diff --git a/packages/client/e2e/credit.spec.ts b/packages/client/e2e/credit.spec.ts index 7bf4c4094b..16663e5ae5 100644 --- a/packages/client/e2e/credit.spec.ts +++ b/packages/client/e2e/credit.spec.ts @@ -63,16 +63,13 @@ test.describe("Credit", () => { .first() .click() - const quantity = newRfqPage.getByTestId("quantity") + const quantity = newRfqPage.getByLabel("Quantity (000)") await quantity.pressSequentially("2") await quantity.blur() - await newRfqPage.locator("span").getByText(/All/).click() + await newRfqPage.getByLabel(/All/).click() - await newRfqPage - .locator("span") - .getByText(/Adaptive Bank/) - .click() + await newRfqPage.getByLabel(/Adaptive Bank/).click() await newRfqPage .locator("button") @@ -83,7 +80,7 @@ test.describe("Credit", () => { await rfqsPage.getByText(/Live/).first().click() // Wait for first quote response - await expect(firstQuote).not.toContainText("Awaiting response", { + await expect(firstQuote).not.toContainText(/Awaiting response/, { timeout: ElementTimeout.LONG, }) @@ -100,7 +97,7 @@ test.describe("Credit", () => { }, ) - await rfqsPage.locator("li").getByText(/All/).nth(0).click() + await rfqsPage.locator("div").getByText(/All/).nth(0).click() const btnTxt = await rfqsPage .getByTestId("view-trade") .first() @@ -128,13 +125,10 @@ test.describe("Credit", () => { .first() .click() - const quantity = newRfqPage.getByTestId("quantity") + const quantity = newRfqPage.getByLabel("Quantity (000)") await quantity.pressSequentially("2") - await newRfqPage - .locator("span") - .getByText(/Adaptive Bank/) - .click() + await newRfqPage.getByLabel(/Adaptive Bank/).click() const pagePromise = context.waitForEvent("page", { predicate: (page) => page.url().includes("credit-sellside"), @@ -163,13 +157,10 @@ test.describe("Credit", () => { await newRfqPage.getByPlaceholder(/Enter a CUSIP/).click() await newRfqPage.getByTestId("search-result-item").nth(5).click() - const quantity = newRfqPage.getByTestId("quantity") + const quantity = newRfqPage.getByLabel("Quantity (000)") await quantity.pressSequentially("2") - await newRfqPage - .locator("span") - .getByText(/Adaptive Bank/) - .click() + await newRfqPage.getByLabel(/Adaptive Bank/).click() const pagePromise = context.waitForEvent("page", { predicate: (page) => page.url().includes("credit-sellside"), diff --git a/packages/client/src/client/App/Analytics/Analytics.tsx b/packages/client/src/client/App/Analytics/Analytics.tsx index 4d66ed15c4..71d0df655d 100644 --- a/packages/client/src/client/App/Analytics/Analytics.tsx +++ b/packages/client/src/client/App/Analytics/Analytics.tsx @@ -8,7 +8,7 @@ import { analytics$ } from "@/services/analytics" const AnalyticsCore = lazy(() => import("./AnalyticsCore")) -const AnalyticsWrapper = styled.div<{ +const AnalyticsWrapper = styled(RegionWrapper)<{ hideIfMatches?: string | null }>` border-left: solid @@ -41,14 +41,8 @@ export const Analytics = ({ hideIfMatches = "(max-width: 750px)" }: Props) => { const shouldMountAnalytics = useHasItBeenVisible(ref) return ( - - - {shouldMountAnalytics ? ( - {loader} - ) : ( - loader - )} - + + {shouldMountAnalytics ? {loader} : loader} ) } diff --git a/packages/client/src/client/App/Credit/CreditRfqForm/CounterpartySelection.tsx b/packages/client/src/client/App/Credit/CreditRfqForm/CounterpartySelection.tsx deleted file mode 100644 index cb2a8e4a40..0000000000 --- a/packages/client/src/client/App/Credit/CreditRfqForm/CounterpartySelection.tsx +++ /dev/null @@ -1,129 +0,0 @@ -import { bind, SUSPENSE } from "@react-rxjs/core" -import { createSignal } from "@react-rxjs/utils" -import { map } from "rxjs/operators" -import styled from "styled-components" - -import { DealerBody } from "@/generated/TradingGateway" -import { ADAPTIVE_BANK_NAME, creditDealers$ } from "@/services/credit" - -const CounterpartySelectionWrapper = styled.div` - font-size: 12px; - font-weight: 500; - display: flex; - flex-direction: column; - max-height: 100%; - overflow: auto; -` - -const CounterpartyList = styled.div` - padding: 2px 0; -` - -const CounterpartyListItem = styled.li` - display: flex; - align-items: center; - height: 24px; - list-style: none; - cursor: pointer; - padding: 0 8px; - - &:not(:last-of-type) { - border-bottom: 1px solid ${({ theme }) => theme.primary.base}; - } - - & > input { - position: relative; - appearance: none; - background-color: transparent; - flex: 0 0 11px; - height: 11px; - border: 1px solid ${({ theme }) => theme.primary[5]}; - border-radius: 1px; - } - - & > input:checked { - border: none; - background-image: url("data:image/svg+xml,%3Csvg width='11' height='11' viewBox='0.75 0.75 10.5 10.5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.0833 0.75H1.91667C1.26917 0.75 0.75 1.275 0.75 1.91667V10.0833C0.75 10.725 1.26917 11.25 1.91667 11.25H10.0833C10.7308 11.25 11.25 10.725 11.25 10.0833V1.91667C11.25 1.275 10.7308 0.75 10.0833 0.75ZM4.83333 8.91667L1.91667 6L2.73917 5.1775L4.83333 7.26583L9.26083 2.83833L10.0833 3.66667L4.83333 8.91667Z' fill='%235F94F5'/%3E%3C/svg%3E%0A"); - } - - & > span { - flex: 1; - margin-left: 10px; - } -` - -export const [selectedCounterpartyIds$, setSelectedCounterpartyIds] = - createSignal() -export const [useSelectedCounterpartyIds] = bind(selectedCounterpartyIds$, []) - -// We always want the Adaptive Dealer to be at the top of the list -const [useSortedCreditDealers] = bind( - creditDealers$.pipe( - map((dealers) => { - const sortedDealers = dealers.reduce((sortedDealers, dealer) => { - if (dealer.name === ADAPTIVE_BANK_NAME) { - sortedDealers.unshift(dealer) - } else { - sortedDealers.push(dealer) - } - return sortedDealers - }, [] as DealerBody[]) - - // suspend until we have a least one dealer as it makes no sense to render the RFQ form without being able to select a dealer - return sortedDealers.length > 0 ? sortedDealers : SUSPENSE - }), - ), -) - -export const CounterpartySelection = () => { - const counterparties = useSortedCreditDealers() - const selectedCounterpartyIds = useSelectedCounterpartyIds() - - const onToggleCounterparty = (counterpartyId: number) => { - const newCounterparties = selectedCounterpartyIds.includes(counterpartyId) - ? selectedCounterpartyIds.filter( - (counterparty) => counterparty !== counterpartyId, - ) - : [...selectedCounterpartyIds, counterpartyId] - setSelectedCounterpartyIds(newCounterparties) - } - - const allChecked = counterparties.length === selectedCounterpartyIds.length - const handleToggleAllCheckbox = (checked: boolean) => { - if (checked) { - setSelectedCounterpartyIds(counterparties.map((c) => c.id)) - } else { - setSelectedCounterpartyIds([]) - } - } - - return ( - - - handleToggleAllCheckbox(!allChecked)} - > - handleToggleAllCheckbox(e.target.checked)} - /> - All - - {counterparties.map((dealer) => ( - onToggleCounterparty(dealer.id)} - > - onToggleCounterparty(dealer.id)} - /> - {dealer.name} - - ))} - - - ) -} diff --git a/packages/client/src/client/App/Credit/CreditRfqForm/CreditInstrumentSearch.tsx b/packages/client/src/client/App/Credit/CreditRfqForm/CreditInstrumentSearch.tsx deleted file mode 100644 index 75dea5b768..0000000000 --- a/packages/client/src/client/App/Credit/CreditRfqForm/CreditInstrumentSearch.tsx +++ /dev/null @@ -1,248 +0,0 @@ -import { bind } from "@react-rxjs/core" -import { createSignal } from "@react-rxjs/utils" -import { useCombobox } from "downshift" -import { forwardRef, useCallback, useMemo, useRef, useState } from "react" -import { FaSearch } from "react-icons/fa" -import { map, withLatestFrom } from "rxjs/operators" -import styled from "styled-components" - -import { - creditInstrumentsByCusip$, - useCreditInstrumentsByCusip, -} from "@/services/credit" - -import { CusipWithBenchmark } from "../common/CusipWithBenchmark" - -const InstrumentSearchWrapper = styled.div` - position: relative; - display: flex; - justify-content: space-between; - align-items: center; - height: 2em; -` - -const InputWrapper = styled.div` - flex: 1 1 0; -` - -const CreditInstrument = styled.div` - display: flex; - flex-direction: column; - justify-content: center; -` - -const InstrumentName = styled.div` - font-size: 15px; -` - -const IconWrapper = styled.div` - position: absolute; - right: 0px; - display: flex; - justify-content: center; - align-items: center; - margin-left: 5px; - height: 30px; - width: 30px; - color: ${({ theme }) => theme.secondary[5]}; - - &:hover { - cursor: pointer; - color: ${({ theme }) => theme.accents.primary.base}; - } -` - -export const [selectedInstrumentId$, setSelectedInstrumentId] = createSignal< - number | null ->() -export const [useSelectedInstrument] = bind( - selectedInstrumentId$.pipe( - withLatestFrom(creditInstrumentsByCusip$), - map(([instrumentId, creditInstrumentsByCusip]) => - instrumentId !== null - ? (Object.values(creditInstrumentsByCusip).find( - (instrument) => instrument.id === instrumentId, - ) ?? null) - : null, - ), - ), - null, -) - -const useInputFocus = () => { - const shouldFocusInputOnMount = useRef(false) - const inputRef = useRef() - - const inputRefCallback = useCallback((node: HTMLInputElement | null) => { - inputRef.current = node - if (node && shouldFocusInputOnMount.current) { - node.focus() - shouldFocusInputOnMount.current = false - } - }, []) - - const focusInput = useCallback(() => { - if (inputRef.current) { - inputRef.current.focus() - } else { - shouldFocusInputOnMount.current = true - } - }, []) - - return { inputRef: inputRefCallback, focusInput } -} - -export const CreditInstrumentSearch = () => { - const selectedInstrument = useSelectedInstrument() - const { inputRef, focusInput } = useInputFocus() - - const showAndResetInput = () => { - setSelectedInstrumentId(null) - focusInput() - } - - return ( - - - {selectedInstrument ? ( - - - {selectedInstrument.name} - - - - ) : ( - - )} - - - - - - ) -} - -const SearchWrapper = styled.div` - position: relative; -` - -const SearchInput = styled.input` - display: flex; - padding: 6px; - width: 100%; - border-radius: 3px; - border: 1px solid ${({ theme }) => theme.primary[2]}; - color: ${({ theme }) => theme.core.textColor}; - background-color: ${({ theme }) => theme.core.darkBackground}; - outline: none; - cursor: text; - - &:focus { - outline: none !important; - border-color: ${({ theme }) => theme.accents.primary.base}; - } -` - -const SearchResults = styled.div` - position: absolute; - z-index: 1000; - width: 100%; - border-radius: 3px; - color: ${({ theme }) => theme.core.textColor}; - background: ${({ theme }) => theme.core.darkBackground}; -` - -const SearchResultItem = styled.div` - padding: 6px 12px; - - &[aria-selected="true"] { - background-color: ${({ theme }) => theme.core.backgroundHoverColor}; - } -` - -const MissingInstrument = styled.div` - padding: 6px 12px; - font-size: 15px; -` - -const SearchBox = forwardRef(function SearchBox(_, inputRef) { - const instruments = useCreditInstrumentsByCusip() - const [inputValue, setInputValue] = useState("") - - const filteredInstruments = useMemo(() => { - return Object.values(instruments).filter( - (instrument) => - !inputValue || - instrument.cusip.toLowerCase().includes(inputValue.toLowerCase()) || - instrument.name.toLowerCase().includes(inputValue.toLowerCase()), - ) - }, [inputValue, instruments]) - - const { - isOpen, - getMenuProps, - getInputProps, - getComboboxProps, - getItemProps, - openMenu, - } = useCombobox({ - onInputValueChange({ inputValue }) { - setInputValue(inputValue ?? "") - }, - items: filteredInstruments, - itemToString(instrument) { - return instrument?.cusip ?? "" - }, - inputValue, - onSelectedItemChange: ({ selectedItem, type }) => { - if (type !== useCombobox.stateChangeTypes.InputBlur) { - setSelectedInstrumentId(selectedItem?.id ?? null) - } - }, - defaultHighlightedIndex: 0, - }) - - const renderItems = () => { - if (filteredInstruments.length === 0) { - return No results found... - } - return ( - <> - {filteredInstruments.map((instrument, index) => ( - - {instrument.name} - - - ))} - - ) - } - - return ( - - openMenu(), - ref: inputRef, - })} - /> - - {isOpen && renderItems()} - - - ) -}) diff --git a/packages/client/src/client/App/Credit/CreditRfqForm/CreditRfqForm.tsx b/packages/client/src/client/App/Credit/CreditRfqForm/CreditRfqForm.tsx deleted file mode 100644 index 361a103dcb..0000000000 --- a/packages/client/src/client/App/Credit/CreditRfqForm/CreditRfqForm.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import { lazy, Suspense } from "react" -import styled from "styled-components" - -import { Loader } from "@/client/components/Loader" - -const CreditRfqFormCore = lazy(() => import("./CreditRfqFormCore")) - -const CreditRfqFormWrapper = styled.div` - height: 100%; - flex: 0 0 371px; - overflow: auto; - padding: 0.5rem 1rem 0.5rem 0; - user-select: none; -` - -const loader = ( - -) - -export const CreditRfqForm = () => ( - - - {loader} - - -) - -export default CreditRfqForm diff --git a/packages/client/src/client/App/Credit/CreditRfqForm/CreditRfqFormCore.tsx b/packages/client/src/client/App/Credit/CreditRfqForm/CreditRfqFormCore.tsx deleted file mode 100644 index 9e8128dbd9..0000000000 --- a/packages/client/src/client/App/Credit/CreditRfqForm/CreditRfqFormCore.tsx +++ /dev/null @@ -1,98 +0,0 @@ -import { Subscribe } from "@react-rxjs/core" -import { useEffect } from "react" -import styled from "styled-components" - -import { - registerCreditRfqCreatedNotifications, - unregisterCreditRfqCreatedNotifications, -} from "@/client/notifications" -import { WithChildren } from "@/client/utils/utilityTypes" -import { registerSimulatedDealerResponses } from "@/services/credit/creditRfqResponses" - -import { supportsTearOut } from "../../TearOutSection/supportsTearOut" -import { TearOutComponent } from "../../TearOutSection/TearOutComponent" -import { CounterpartySelection } from "./CounterpartySelection" -import { CreditInstrumentSearch } from "./CreditInstrumentSearch" -import { DirectionToggle } from "./DirectionToggle" -import { RfqButtonPanel } from "./RfqButtonPanel" -import { RfqParameters } from "./RfqParameters" - -const CreditRfqFormCoreWrapper = styled.div` - display: flex; - flex-direction: column; - height: 100%; - min-width: 260px; - margin: auto; - background: ${({ theme }) => theme.core.lightBackground}; - color: ${({ theme }) => theme.core.textColor}; -` - -const CreditRfqHeader = styled.header` - padding: 1em; - display: flex; - justify-content: space-between; - align-items: center; -` - -const CreditRfqSection = styled.div<{ fixed?: boolean }>` - padding: 0 8px 8px; - flex: ${({ fixed }) => `0 ${fixed ? 0 : 1} auto`}; - ${({ fixed }) => (fixed ? "" : "min-height: 0;")} - display: flex; - flex-direction: column; - - &:not(:first-of-type) { - border-top: 2px solid ${({ theme }) => theme.primary.base}; - } - - & > *:not(:last-of-type) { - margin-bottom: 18px; - } -` - -const SectionHeader = styled.header` - font-size: 13px; - padding: 12px 0; -` - -const CreditRfqFooter = styled.footer` - padding: 1em; - border-top: 1px solid ${({ theme }) => theme.primary.base}; - background-color: ${({ theme }) => theme.core.lightBackground}; -` - -const CreditRfqFormCore = ({ children }: WithChildren) => { - useEffect(() => { - const subscription = registerSimulatedDealerResponses() - registerCreditRfqCreatedNotifications() - return () => { - subscription.unsubscribe() - unregisterCreditRfqCreatedNotifications() - } - }, []) - - return ( - - - - New RFQ {supportsTearOut && } - - - - RFQ Details - - - - - Counterparty Selection - - - - - - - - ) -} - -export default CreditRfqFormCore diff --git a/packages/client/src/client/App/Credit/CreditRfqForm/DirectionToggle.tsx b/packages/client/src/client/App/Credit/CreditRfqForm/DirectionToggle.tsx deleted file mode 100644 index d40e580981..0000000000 --- a/packages/client/src/client/App/Credit/CreditRfqForm/DirectionToggle.tsx +++ /dev/null @@ -1,135 +0,0 @@ -import { bind } from "@react-rxjs/core" -import { createSignal } from "@react-rxjs/utils" -import styled from "styled-components" - -import { DirectionIcon } from "@/client/components/icons/DirectionIcon" -import { Direction } from "@/generated/TradingGateway" - -const DirectionToggleWrapper = styled.div` - display: flex; - position: relative; -` - -interface DirectionButtonProps { - direction: Direction - active?: boolean -} - -const DirectionButton = styled.button` - flex: 1; - background-color: ${({ theme, direction, active }) => - active - ? theme.colors.spectrum.uniqueCollections[direction].darker - : theme.primary[2]}; - border: 1px solid - ${({ theme, direction, active }) => - active - ? theme.colors.spectrum.uniqueCollections[direction].base - : theme.primary[3]}; - color: ${({ theme, active }) => - active ? theme.white : theme.core.textColor}; - user-select: none; - display: flex; - align-items: center; - justify-content: center; - padding: 0 0.7rem; - height: 48px; - font-size: 12px; - font-weight: 500; - clip-path: ${({ direction }) => - direction === Direction.Buy - ? "polygon(0 0, 100% 0, 90% 100%, 0% 100%)" - : "polygon(10% 0, 100% 0, 100% 100%, 0% 100%)"}; - - &:after { - z-index: -1; - content: ""; - position: absolute; - top: 0; - height: 100%; - background-color: transparent; - transform: skewX(-21deg); - } - - &:first-child { - margin-right: -6.5px; - } - - &:last-child { - margin-left: -6.5px; - } - - &:first-child:after { - left: 0; - width: calc(50% - 3px); - border-right: 1px solid - ${({ theme, direction, active }) => - active - ? theme.colors.spectrum.uniqueCollections[direction].base - : theme.primary[3]}; - } - - &:last-child:after { - right: 0; - width: calc(50% - 3px); - border-left: 1px solid - ${({ theme, direction, active }) => - active - ? theme.colors.spectrum.uniqueCollections[direction].base - : theme.primary[3]}; - } - - &:hover { - background-color: ${({ theme, direction }) => - theme.colors.spectrum.uniqueCollections[direction].darker}; - border-color: ${({ theme, direction }) => - theme.colors.spectrum.uniqueCollections[direction].base}; - color: ${({ theme }) => theme.white}; - } - - &:hover:after { - border-color: ${({ theme, direction }) => - theme.colors.spectrum.uniqueCollections[direction].base}; - } -` - -const IconWrapper = styled.div<{ direction: Direction }>` - position: absolute; - top: 12px; - left: calc(50% - 13px); - z-index: 1; - color: ${({ theme, direction }) => - theme.colors.spectrum.uniqueCollections[direction].base}; -` - -const [directionInput$, setDirection] = createSignal() - -const [useDirection, direction$] = bind(directionInput$, Direction.Buy) - -export { direction$, setDirection, useDirection } - -export const DirectionToggle = () => { - const direction = useDirection() - - return ( - - setDirection(Direction.Buy)} - > - YOU BUY - - - - - setDirection(Direction.Sell)} - > - YOU SELL - - - ) -} diff --git a/packages/client/src/client/App/Credit/CreditRfqForm/RfqButtonPanel.tsx b/packages/client/src/client/App/Credit/CreditRfqForm/RfqButtonPanel.tsx deleted file mode 100644 index ce1bc49f25..0000000000 --- a/packages/client/src/client/App/Credit/CreditRfqForm/RfqButtonPanel.tsx +++ /dev/null @@ -1,105 +0,0 @@ -import { createSignal } from "@react-rxjs/utils" -import { exhaustMap, filter, map, tap, withLatestFrom } from "rxjs/operators" -import styled from "styled-components" - -import { CREDIT_RFQ_EXPIRY_SECONDS } from "@/client/constants" -import { ACK_CREATE_RFQ_RESPONSE, Direction } from "@/generated/TradingGateway" -import { createCreditRfq$ } from "@/services/credit" - -import { - selectedCounterpartyIds$, - setSelectedCounterpartyIds, - useSelectedCounterpartyIds, -} from "./CounterpartySelection" -import { - selectedInstrumentId$, - setSelectedInstrumentId, - useSelectedInstrument, -} from "./CreditInstrumentSearch" -import { direction$, setDirection } from "./DirectionToggle" -import { quantity$, setQuantity, useQuantity } from "./RfqParameters" - -const RfqButtonPanelWrapper = styled.div` - display: flex; - justify-content: space-between; -` - -const ActionButton = styled.button` - border-radius: 3px; - user-select: none; - padding: 0 0.7rem; - height: 24px; - font-size: 11px; - font-weight: 500; -` - -const ClearButton = styled(ActionButton)` - background-color: ${({ theme }) => theme.core.darkBackground}; -` - -const SendRfqButton = styled(ActionButton)<{ disabled?: boolean }>` - color: ${({ theme }) => theme.white}; - background-color: ${({ theme }) => - theme.colors.spectrum.uniqueCollections.Buy.base}; - ${({ disabled }) => (disabled ? "opacity: 0.3" : "")} -` - -const [rfqRequest$, sendRfq] = createSignal() - -rfqRequest$ - .pipe( - withLatestFrom( - direction$, - selectedInstrumentId$, - quantity$, - selectedCounterpartyIds$, - ), - filter( - ([, , instrumentId, quantity, dealerIds]) => - instrumentId !== null && quantity > 0 && dealerIds.length > 0, - ), - map(([, direction, instrumentId, quantity, dealerIds]) => ({ - instrumentId: instrumentId as number, - dealerIds, - quantity, - direction, - expirySecs: CREDIT_RFQ_EXPIRY_SECONDS, - })), - exhaustMap((request) => createCreditRfq$(request)), - tap((response) => { - if (response?.type === ACK_CREATE_RFQ_RESPONSE) { - setDirection(Direction.Buy) - setSelectedInstrumentId(null) - setQuantity("") - setSelectedCounterpartyIds([]) - } - }), - ) - .subscribe() - -export const RfqButtonPanel = () => { - const selectedInstrument = useSelectedInstrument() - const quantity = useQuantity() - const selectedCounterpartyIds = useSelectedCounterpartyIds() - - const detailsMissing = - selectedInstrument === null || - quantity === 0 || - selectedCounterpartyIds.length === 0 - - const clearRfqTicket = () => { - setDirection(Direction.Buy) - setSelectedInstrumentId(null) - setQuantity("") - setSelectedCounterpartyIds([]) - } - - return ( - - Clear - - Send RFQ - - - ) -} diff --git a/packages/client/src/client/App/Credit/CreditRfqForm/RfqParameters.tsx b/packages/client/src/client/App/Credit/CreditRfqForm/RfqParameters.tsx deleted file mode 100644 index 471d69a8fb..0000000000 --- a/packages/client/src/client/App/Credit/CreditRfqForm/RfqParameters.tsx +++ /dev/null @@ -1,101 +0,0 @@ -import { bind } from "@react-rxjs/core" -import { createSignal } from "@react-rxjs/utils" -import { map } from "rxjs/operators" -import styled from "styled-components" - -import { - createApplyCharacterMultiplier, - customNumberFormatter, - parseQuantity, -} from "@/client/utils/formatNumber" - -const RfqParametersWrapper = styled.div` - display: grid; - grid-template-columns: 1fr 1fr; - grid-column-gap: 8px; - grid-row-gap: 16px; - - font-size: 12px; - font-weight: 500; -` - -const ParameterLabel = styled.div` - color: #93959b; - margin-bottom: 4px; -` - -export const ParameterInput = styled.input` - background-color: ${({ theme }) => theme.core.darkBackground}; - outline: none; - height: 24px; - width: 100%; - padding: 4px; - color: ${({ theme }) => theme.core.textColor}; - border: 1px solid ${({ theme }) => theme.primary[2]}; - border-radius: 3px; - &:focus { - outline: none !important; - border-color: ${({ theme }) => theme.accents.primary.base}; - } - &:disabled { - opacity: 0.3; - } - &.is-invalid { - border-color: ${({ theme }) => theme.accents.negative.base}; - } -` - -const ParameterValue = styled.div` - display: flex; - align-items: center; - height: 24px; -` - -const formatter = customNumberFormatter() - -const [rawQuantity$, setQuantity] = createSignal() - -const applyCharacterMultiplier = createApplyCharacterMultiplier(["k", "m"]) - -const [useQuantity, quantity$] = bind( - rawQuantity$.pipe( - map((rawVal: string): number => { - const numValue = Math.trunc(Math.abs(parseQuantity(rawVal))) - const lastChar = rawVal.slice(-1).toLowerCase() - const value = applyCharacterMultiplier(numValue, lastChar) - return !Number.isNaN(value) ? value : 0 - }), - ), - 0, -) - -export { quantity$, setQuantity, useQuantity } - -export const RfqParameters = () => { - const quantity = useQuantity() - - return ( - -
- Quantity (000) - setQuantity(event.currentTarget.value)} - onFocus={(event) => { - event.target.select() - }} - data-testid="quantity" - /> -
-
- RFQ Duration - 2 Minutes -
-
- Fill Type - All or None -
- - ) -} diff --git a/packages/client/src/client/App/Credit/CreditRfqForm/index.tsx b/packages/client/src/client/App/Credit/CreditRfqForm/index.tsx deleted file mode 100644 index bfabf5ec15..0000000000 --- a/packages/client/src/client/App/Credit/CreditRfqForm/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export * from "./CreditRfqForm" diff --git a/packages/client/src/client/App/Credit/CreditRfqs/ClearRfqsIcon.tsx b/packages/client/src/client/App/Credit/CreditRfqs/ClearRfqsIcon.tsx deleted file mode 100644 index 958309be56..0000000000 --- a/packages/client/src/client/App/Credit/CreditRfqs/ClearRfqsIcon.tsx +++ /dev/null @@ -1,14 +0,0 @@ -export const ClearRfqsIcon = ( - - - -) diff --git a/packages/client/src/client/App/Credit/CreditRfqs/CreditRfqCards/CardFooter.tsx b/packages/client/src/client/App/Credit/CreditRfqs/CreditRfqCards/CardFooter.tsx index d6606bf8cc..3409e15e19 100644 --- a/packages/client/src/client/App/Credit/CreditRfqs/CreditRfqCards/CardFooter.tsx +++ b/packages/client/src/client/App/Credit/CreditRfqs/CreditRfqCards/CardFooter.tsx @@ -1,7 +1,10 @@ import { createSignal } from "@react-rxjs/utils" -import { FaCheckCircle, FaTrash } from "react-icons/fa" import { exhaustMap } from "rxjs/operators" +import { Button } from "@/client/components/Button" +import { BinIcon } from "@/client/components/icons/BinIcon" +import { CheckCircle } from "@/client/components/icons/CheckCircle" +import { Typography } from "@/client/components/Typography" import { ACCEPTED_QUOTE_STATE, RfqState } from "@/generated/TradingGateway" import { cancelCreditRfq$, @@ -12,13 +15,7 @@ import { RfqDetails } from "@/services/credit/creditRfqs" import { CreditRfqTimer, rfqStateToLabel } from "../../common" import { handleViewTrade } from "./handleViewTrade" -import { - AcceptedCardState, - CancelQuoteButton, - CardFooterWrapper, - TerminatedCardState, - ViewTrade, -} from "./styled" +import { CardFooterWrapper, CloseRfqButton, ViewTradeButton } from "./styled" const [cancelRfq$, onCancelRfq] = createSignal() @@ -35,9 +32,9 @@ export const LiveFooterContent = ({ }) => ( <> - onCancelRfq(rfqId)}> + ) @@ -52,18 +49,26 @@ export const AcceptedFooterContent = ({ return ( <> - - + + You traded with {dealerName} - - + { handleViewTrade(rfqId) }} data-testid="view-trade" > - View Trade {rfqId} - + + View Trade {rfqId} + + ) } @@ -75,10 +80,15 @@ export const TerminatedFooterContent = ({ rfqId: number state: RfqState }) => ( - removeRfqs([rfqId])}> - - {rfqStateToLabel(state)} - + removeRfqs([rfqId])}> + + + {rfqStateToLabel(state)} + + ) export const CardFooter = ({ diff --git a/packages/client/src/client/App/Credit/CreditRfqs/CreditRfqCards/CardHeader.tsx b/packages/client/src/client/App/Credit/CreditRfqs/CreditRfqCards/CardHeader.tsx index db51f2b183..093467a9b6 100644 --- a/packages/client/src/client/App/Credit/CreditRfqs/CreditRfqCards/CardHeader.tsx +++ b/packages/client/src/client/App/Credit/CreditRfqs/CreditRfqCards/CardHeader.tsx @@ -1,14 +1,15 @@ -import { memo } from "react" +import { memo, PropsWithChildren } from "react" +import { FlexBox } from "@/client/components/FlexBox" +import { Typography } from "@/client/components/Typography" import { Direction, RfqState } from "@/generated/TradingGateway" import { useCreditInstrumentById } from "@/services/credit" import { CusipWithBenchmark, - DirectionContainer, DirectionLabel, InstrumentLabelContainer, - InstrumentName, + isBuy, isRfqTerminated, } from "../../common" @@ -18,6 +19,12 @@ interface CardHeaderProps { rfqState: RfqState } +const DirectionTypography = ({ children }: PropsWithChildren) => ( + + {children} + +) + export const CardHeader = memo(function CardHeader({ direction, instrumentId, @@ -28,14 +35,18 @@ export const CardHeader = memo(function CardHeader({ const accepted = rfqState === RfqState.Closed return ( - - {direction === Direction.Buy && ( + + {isBuy(direction) && ( -
YOU {accepted ? "BOUGHT" : "BUY"}
+ + You {accepted ? "Bought" : "Buy"} + )} - - {instrument?.name ?? "No name found"} + + + {instrument?.name ?? "No name found"} + {direction === Direction.Sell && ( -
YOU {accepted ? "SOLD" : "SELL"}
+ + You {accepted ? "Sold" : "Sell"} + )} - + ) }) diff --git a/packages/client/src/client/App/Credit/CreditRfqs/CreditRfqCards/CreditRfqCard.tsx b/packages/client/src/client/App/Credit/CreditRfqs/CreditRfqCards/CreditRfqCard.tsx index 363bfd6518..c49ab82df0 100644 --- a/packages/client/src/client/App/Credit/CreditRfqs/CreditRfqCards/CreditRfqCard.tsx +++ b/packages/client/src/client/App/Credit/CreditRfqs/CreditRfqCards/CreditRfqCard.tsx @@ -1,4 +1,5 @@ import { Loader } from "@/client/components/Loader" +import { Typography } from "@/client/components/Typography" import { customNumberFormatter } from "@/client/utils" import { ACCEPTED_QUOTE_STATE, @@ -16,20 +17,16 @@ import { useCreditRfqDetails } from "@/services/credit" import { CardFooter } from "./CardFooter" import { CardHeader } from "./CardHeader" import { Quote } from "./Quote/CardQuote" -import { - CardContainer, - DetailsWrapper, - Label, - Quantity, - QuotesContainer, -} from "./styled" +import { CardContainer, DetailsWrapper, QuotesContainer } from "./styled" const formatter = customNumberFormatter() const Details = ({ quantity }: { quantity: number }) => { return ( - - QTY: {formatter(quantity)} + RFQ DETAILS + + QTY: {formatter(quantity)} + ) } @@ -89,7 +86,6 @@ export const Card = ({ id, highlight }: { id: number; highlight: boolean }) => { return ( diff --git a/packages/client/src/client/App/Credit/CreditRfqs/CreditRfqCards/CreditRfqCardGrid.tsx b/packages/client/src/client/App/Credit/CreditRfqs/CreditRfqCards/CreditRfqCardGrid.tsx index 0e76049555..45e3190cac 100644 --- a/packages/client/src/client/App/Credit/CreditRfqs/CreditRfqCards/CreditRfqCardGrid.tsx +++ b/packages/client/src/client/App/Credit/CreditRfqs/CreditRfqCards/CreditRfqCardGrid.tsx @@ -3,6 +3,7 @@ import { createSignal } from "@react-rxjs/utils" import { combineLatest, merge } from "rxjs" import { delay, map, mergeMap } from "rxjs/operators" +import { GridLayout } from "@/client/components/layout/GridLayout" import { HIGHLIGHT_ROW_FLASH_TIME } from "@/client/constants" import { RfqState } from "@/generated/TradingGateway" import { clearedRfqIds$, creditRfqsById$ } from "@/services/credit" @@ -11,7 +12,6 @@ import { timeRemainingComparator } from "../../common" import { RfqsTab, selectedRfqsTab$ } from "../selectedRfqsTab" import { Card } from "./CreditRfqCard" import { NoRfqsScreen } from "./NoRfqsScreen/NoRfqsScreen" -import { CreditRfqCardGridWrapper } from "./styled" const RFQ_STATE_TO_TAB_MAPPING: Record = { [RfqState.Open]: RfqsTab.Live, @@ -70,15 +70,17 @@ export const CreditRfqCardGrid = () => { const rfqIds = useFilteredCreditRfqIds() const highlightedRfqCard = useCreditRfqCardHighlight() + const empty = !rfqIds.length + return ( - - {rfqIds.length > 0 ? ( + + {empty ? ( + + ) : ( rfqIds.map((id) => ( )) - ) : ( - )} - + ) } diff --git a/packages/client/src/client/App/Credit/CreditRfqs/CreditRfqCards/NoRfqsScreen/NoRfqsScreen.tsx b/packages/client/src/client/App/Credit/CreditRfqs/CreditRfqCards/NoRfqsScreen/NoRfqsScreen.tsx index 9889f0cba6..844d5bb7df 100644 --- a/packages/client/src/client/App/Credit/CreditRfqs/CreditRfqCards/NoRfqsScreen/NoRfqsScreen.tsx +++ b/packages/client/src/client/App/Credit/CreditRfqs/CreditRfqCards/NoRfqsScreen/NoRfqsScreen.tsx @@ -1,6 +1,10 @@ import { FC } from "react" import styled from "styled-components" +import { FlexBox } from "@/client/components/FlexBox" +import { Gap } from "@/client/components/Gap" +import { Typography } from "@/client/components/Typography" + import { RfqsTab, useSelectedRfqsTab } from "../../selectedRfqsTab" import { NoCancelledRfqsIcon } from "./svgs/NoCancelledRfqsIcon" import { NoDoneRfqsIcon } from "./svgs/NoDoneRfqsIcon" @@ -9,31 +13,11 @@ import { NoLiveRfqsIcon } from "./svgs/NoLiveRfqsIcon" import { NoRfqsIcon } from "./svgs/NoRfqsIcon" import { IconProps } from "./svgs/types" -const Wrapper = styled.div` +const Wrapper = styled(FlexBox)` width: 100%; height: 100%; - display: flex; flex-direction: column; justify-content: center; - align-items: center; - color: ${({ theme }) => theme.textColor}; -` - -const IconWrapper = styled.div` - color: ${({ theme }) => theme.textColor}; -` - -const Title = styled.div` - font-size: 15px; - line-height: 16px; - font-weight: 400; - margin-bottom: 3px; -` - -const Description = styled.div` - font-size: 13px; - line-height: 13px; - font-weight: 300; ` function getTitleForTab(tab: RfqsTab) { @@ -92,11 +76,17 @@ export const NoRfqsScreen = () => { return ( - - - - {getTitleForTab(selectedRfqsTab)} - {getDescriptionForTab(selectedRfqsTab)} + + + {getTitleForTab(selectedRfqsTab)} + + + + {getDescriptionForTab(selectedRfqsTab)} + ) } diff --git a/packages/client/src/client/App/Credit/CreditRfqs/CreditRfqCards/NoRfqsScreen/svgs/utils.ts b/packages/client/src/client/App/Credit/CreditRfqs/CreditRfqCards/NoRfqsScreen/svgs/utils.ts index 9511b2da73..b9944f5f24 100644 --- a/packages/client/src/client/App/Credit/CreditRfqs/CreditRfqCards/NoRfqsScreen/svgs/utils.ts +++ b/packages/client/src/client/App/Credit/CreditRfqs/CreditRfqCards/NoRfqsScreen/svgs/utils.ts @@ -10,9 +10,9 @@ export const useNoRfqsIconColors = () => { return useMemo(() => { const theme = themes[themeName] return { - primary: theme.core.textColor, - contrast: theme.colors.spectrum.blue.base, - secondary: theme.colors.spectrum.blue.base, + primary: theme.newTheme.color["Colors/Text/text-primary (900)"], + contrast: theme.newTheme.color["Colors/Text/text-brand-primary (900)"], + secondary: theme.newTheme.color["Colors/Text/text-brand-primary (900)"], } }, [themeName]) } diff --git a/packages/client/src/client/App/Credit/CreditRfqs/CreditRfqCards/Quote/CardQuote.tsx b/packages/client/src/client/App/Credit/CreditRfqs/CreditRfqCards/Quote/CardQuote.tsx index 083b0255e3..dda8239eef 100644 --- a/packages/client/src/client/App/Credit/CreditRfqs/CreditRfqCards/Quote/CardQuote.tsx +++ b/packages/client/src/client/App/Credit/CreditRfqs/CreditRfqCards/Quote/CardQuote.tsx @@ -1,7 +1,9 @@ import { createSignal } from "@react-rxjs/utils" -import { FaCheckCircle } from "react-icons/fa" import { exhaustMap } from "rxjs/operators" +import { CheckCircle } from "@/client/components/icons/CheckCircle" +import { Typography } from "@/client/components/Typography" +import { Color } from "@/client/theme/types" import { ACCEPTED_QUOTE_STATE, DealerBody, @@ -13,10 +15,9 @@ import { } from "@/generated/TradingGateway" import { acceptCreditQuote$, useQuoteState } from "@/services/credit" -import { hasPrice } from "../../../common" +import { hasPrice, isBuy } from "../../../common" import { - AcceptQuoteButton, - DealerName, + AcceptButton, Price, QuoteDot, QuoteDotWrapper, @@ -54,6 +55,49 @@ export const Quote = ({ const accepted = state.type === ACCEPTED_QUOTE_STATE const passed = quote.state.type === PASSED_QUOTE_STATE + const getDealerColor = ( + open: boolean, + accepted: boolean, + priced: boolean, + highlight: boolean, + ): Color => { + if (accepted) { + return "Colors/Text/text-success-primary (600)" + } else if (open) { + if (priced) { + return highlight + ? "Colors/Text/text-black" + : "Colors/Text/text-primary (900)" + } + return "Colors/Text/text-quaternary (500)" + } else { + return "Colors/Text/text-disabled" + } + } + + const getPriceColor = ( + open: boolean, + accepted: boolean, + priced: boolean, + highlight: boolean, + direction: Direction, + ): Color => { + if (accepted) { + return "Colors/Text/text-success-primary (600)" + } else if (open) { + if (priced) { + return highlight + ? "Colors/Text/text-primary_alt" + : isBuy(direction) + ? "Colors/Text/text-buy-primary" + : "Colors/Text/text-sell-primary" + } + return "Colors/Text/text-quaternary (500)" + } else { + return "Colors/Text/text-disabled" + } + } + return ( )} - - {dealer?.name ?? "Dealer name not found"} - - - {accepted && } - {state.payload} + {dealer?.name ?? "Dealer name not found"} + + + + {accepted && } + + {state.payload} + - onAcceptRfq(quote.id)}> + + onAcceptRfq(quote.id)} + > Accept - + ) } diff --git a/packages/client/src/client/App/Credit/CreditRfqs/CreditRfqCards/Quote/styled.ts b/packages/client/src/client/App/Credit/CreditRfqs/CreditRfqCards/Quote/styled.ts index 921a80a2e1..be7ebb5080 100644 --- a/packages/client/src/client/App/Credit/CreditRfqs/CreditRfqCards/Quote/styled.ts +++ b/packages/client/src/client/App/Credit/CreditRfqs/CreditRfqCards/Quote/styled.ts @@ -1,9 +1,12 @@ -import styled, { DefaultTheme } from "styled-components" +import styled from "styled-components" -import { Theme, ThemeName } from "@/client/theme" +import { Button } from "@/client/components/Button" +import { Typography } from "@/client/components/Typography" +import { Theme } from "@/client/theme" import { breathing } from "@/client/utils/styling" import { Direction } from "@/generated/TradingGateway" +import { isBuy } from "../../../common" import { Row } from "../styled" interface CommonProps { @@ -21,26 +24,19 @@ function getBuySellHighlightRowBackgroundColor( theme: Theme, direction: Direction, ) { - return theme.colors.spectrum.uniqueCollections[direction][ - theme.name === ThemeName.Dark ? "darker" : "lighter" - ] + return isBuy(direction) + ? theme.newTheme.color["Colors/Background/bg-buy-primary"] + : theme.newTheme.color["Colors/Background/bg-sell-primary"] } export const QuoteRow = styled(Row)` - justify-content: start; + height: ${({ theme }) => theme.newTheme.density.md}; + border-bottom: 1px solid + ${({ theme }) => theme.newTheme.color["Colors/Background/bg-tertiary"]}; + + background-color: ${({ theme, highlight, direction }) => + highlight ? getBuySellHighlightRowBackgroundColor(theme, direction) : null}; - &:nth-child(even) { - background-color: ${({ theme, highlight, direction }) => - highlight - ? getBuySellHighlightRowBackgroundColor(theme, direction) - : theme.core.darkBackground}; - } - &:nth-child(odd) { - background-color: ${({ theme, highlight, direction }) => - highlight - ? getBuySellHighlightRowBackgroundColor(theme, direction) - : theme.core.lightBackground}; - } &:hover { & button { display: ${({ quoteActive }) => (quoteActive ? "block" : null)}; @@ -48,12 +44,6 @@ export const QuoteRow = styled(Row)` } ` -export const QuoteRowText = styled.div` - font-size: 11px; - line-height: 16px; - font-weight: 500; -` - export const QuoteDotWrapper = styled.div` display: flex; justify-content: center; @@ -63,22 +53,18 @@ export const QuoteDotWrapper = styled.div` margin: 0 4px; ` -function getBuySellHighlightTextColor(theme: Theme, direction: Direction) { - return theme.colors.spectrum.uniqueCollections[direction][ - theme.name === ThemeName.Dark ? "base" : "darker" - ] -} - export const QuoteDot = styled.div` height: 4px; width: 4px; border-radius: 4px; background-color: ${({ theme, highlight, direction, passed }) => highlight - ? theme.textColor + ? theme.newTheme.color["Colors/Text/text-primary (900)"] : passed - ? theme.primary[4] - : getBuySellHighlightTextColor(theme, direction)}; + ? theme.newTheme.color["Colors/Text/text-disabled"] + : isBuy(direction) + ? theme.newTheme.color["Colors/Text/text-buy-primary"] + : theme.newTheme.color["Colors/Text/text-sell-primary"]}; animation: ${breathing} 1s linear infinite; ` @@ -89,72 +75,25 @@ interface RowFieldProps { priced: boolean } -const getRowFieldFontWeight = ({ priced, open, accepted }: RowFieldProps) => - (priced && open) || accepted ? "700" : null - -const getDealerFontColor = ({ - theme, - open, - accepted, - priced, -}: RowFieldProps & { theme: DefaultTheme }) => { - if (accepted) { - return theme.accents.positive.base - } else if (open) { - if (priced) { - return theme.secondary.base - } - return theme.secondary[theme.name === ThemeName.Dark ? 6 : "base"] - } else { - return theme.secondary[theme.name === ThemeName.Dark ? 6 : 4] - } -} - -// This color does not seem to be part of the palette -export const DealerName = styled(QuoteRowText)` +export const Price = styled(Typography)` display: flex; align-items: center; - color: ${getDealerFontColor}; - font-weight: ${getRowFieldFontWeight}; - margin-right: auto; -` - -export const Price = styled(QuoteRowText)` - display: flex; - align-items: center; - color: ${({ theme, open, accepted, priced, highlight, direction }) => { - if (accepted) { - return theme.accents.positive.base - } else if (open) { - if (priced) { - return highlight - ? theme.textColor - : getBuySellHighlightTextColor(theme, direction) - } - return theme.secondary[theme.name === ThemeName.Dark ? 5 : 4] - } else { - return theme.secondary[theme.name === ThemeName.Dark ? 6 : 4] - } - }}; - font-weight: ${getRowFieldFontWeight}; - ${({ open, accepted, passed }) => - (passed || (!open && !accepted)) && "text-decoration: line-through;"} + margin-left: auto; + ${({ open, accepted, passed, priced, theme }) => + (passed || (!open && !accepted)) && + ` + text-decoration: line-through; + color: ${theme.newTheme.color["Colors/Text/text-disabled"]}; + ${priced && `margin-right: ${theme.newTheme.spacing.sm}`} + `} svg { + fill: ${({ theme }) => + theme.newTheme.color["Colors/Text/text-success-primary (600)"]}; margin-right: 4px; } ` - -export const AcceptQuoteButton = styled.button` - user-select: none; +export const AcceptButton = styled(Button)` display: none; - border-radius: 3px; - padding: 0 8px; - height: 16px; - font-size: 11px; - font-weight: 500; - margin-left: 8px; - color: ${({ theme }) => theme.white}; - background-color: ${({ theme }) => - theme.colors.spectrum.uniqueCollections.Buy.base}; + margin-left: ${({ theme }) => theme.newTheme.spacing.sm}; ` diff --git a/packages/client/src/client/App/Credit/CreditRfqs/CreditRfqCards/styled.tsx b/packages/client/src/client/App/Credit/CreditRfqs/CreditRfqCards/styled.tsx index 296540c4d1..bb27d1149a 100644 --- a/packages/client/src/client/App/Credit/CreditRfqs/CreditRfqCards/styled.tsx +++ b/packages/client/src/client/App/Credit/CreditRfqs/CreditRfqCards/styled.tsx @@ -1,34 +1,16 @@ import styled, { css, DefaultTheme, keyframes } from "styled-components" -import { ThemeName } from "@/client/theme" -import { Direction } from "@/generated/TradingGateway" +import { FlexBox } from "@/client/components/FlexBox" -// Card - -export const CreditRfqCardGridWrapper = styled.div<{ empty: boolean }>` - display: ${({ empty }) => (empty ? "flex" : "grid")}; - grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); - grid-gap: 8px; - align-content: start; - margin-right: 8px; - flex: 1; -` - -const cardFlash = ({ - theme, - direction, -}: { - theme: DefaultTheme - direction: Direction -}) => keyframes` +const cardFlash = ({ theme }: { theme: DefaultTheme }) => keyframes` 0% { - border-color: ${theme.colors.spectrum.uniqueCollections[direction].base}; + border-color: ${theme.newTheme.color["Colors/Border/border-brand"]}; } 50% { border-color: transparent; } 100% { - border-color: ${theme.colors.spectrum.uniqueCollections[direction].base}; + border-color: ${theme.newTheme.color["Colors/Border/border-brand"]}; } ` @@ -37,24 +19,23 @@ const highlightBorderColor = css` ` export const CardContainer = styled.div<{ - direction: Direction live: boolean highlight: boolean }>` display: flex; flex-direction: column; - border-radius: 2px; - border: ${({ highlight }) => (highlight ? "2px" : "1px")} solid transparent; + border: 2px solid + ${({ theme }) => theme.newTheme.color["Colors/Background/bg-primary"]}; width: 100%; height: 251px; ${({ highlight }) => highlight && highlightBorderColor} &:first-child { - ${({ theme, direction, live, highlight }) => + ${({ theme, live, highlight }) => live && !highlight && - `border-color: ${theme.colors.spectrum.uniqueCollections[direction].base}`}; + `border-color: ${theme.newTheme.color["Colors/Border/border-brand"]}`}; } ` @@ -67,28 +48,16 @@ export const Row = styled.div` ` export const DetailsWrapper = styled(Row)` - margin: 1px 0; - flex: 0 0 24px; - background: ${({ theme }) => theme.primary[2]}; -` - -export const RowText = styled.span` - font-size: 11px; - font-weight: 500; -` - -export const Label = styled(RowText)` - color: ${({ theme }) => theme.textColor}; -` - -export const Quantity = styled(RowText)` - color: ${({ theme }) => theme.secondary[5]}; + padding: ${({ theme }) => theme.newTheme.spacing.xs}; + background: ${({ theme }) => + theme.newTheme.color["Colors/Background/bg-quaternary"]}; ` export const QuotesContainer = styled.div` flex: 1; overflow-y: auto; - background-color: ${({ theme }) => theme.core.lightBackground}; + background-color: ${({ theme }) => + theme.newTheme.color["Colors/Background/bg-primary"]}; ` export const NoRfqsWrapper = styled.div` @@ -101,40 +70,17 @@ export const NoRfqsWrapper = styled.div` // Card Footer -export const CardFooterWrapper = styled.div` +export const CardFooterWrapper = styled(FlexBox)` display: flex; align-items: center; justify-content: center; - flex: 0 0 32px; - padding: 0 8px; - margin-top: 1px; - background: ${({ theme }) => theme.core.lightBackground}; - font-size: 11px; -` - -export const CancelQuoteButton = styled.button` - color: ${({ theme }) => theme.core.textColor}; - background-color: ${({ theme }) => theme.core.darkBackground}; - border-radius: 3px; - font-size: 11px; - padding: 2px 5px 3px 5px; - margin-left: 9px; -` - -export const TerminatedCardState = styled.button` - display: flex; - align-items: center; - padding: 4px 8px; - border-radius: 3px; - background-color: ${({ theme }) => - theme.primary[theme.name === ThemeName.Dark ? 2 : 3]}; - color: ${({ theme }) => - theme.name === ThemeName.Dark - ? theme.colors.light.core.activeColor - : theme.secondary[3]}; - + padding: ${({ theme }) => theme.newTheme.spacing.md}; + background: ${({ theme }) => + theme.newTheme.color["Colors/Background/bg-secondary_subtle"]}; svg { - margin-right: 4px; + fill: ${({ theme }) => + theme.newTheme.color["Colors/Text/text-success-primary (600)"]}; + margin-right: ${({ theme }) => theme.newTheme.spacing.xs}; } ` @@ -142,14 +88,31 @@ export const AcceptedCardState = styled.div` flex: 1; display: flex; align-items: center; - color: ${({ theme }) => theme.accents.positive.base}; svg { - margin-right: 8px; + margin-right: ${({ theme }) => theme.newTheme.spacing.md}; } ` -export const ViewTrade = styled.button` - flex: 0 0 fit-content; - color: ${({ theme }) => theme.accents.primary.base}; +export const FooterButton = styled.button` + background-color: ${({ theme }) => + theme.newTheme.color["Colors/Background/bg-tertiary"]}; + padding: ${({ theme }) => theme.newTheme.spacing.md}; +` + +export const ViewTradeButton = styled(FooterButton)` + margin-left: auto; +` + +export const CloseRfqButton = styled(FooterButton)` + display: flex; + align-items: center; + padding: ${({ theme }) => theme.newTheme.spacing.xs} + ${({ theme }) => theme.newTheme.spacing.md}; + border-radius: ${({ theme }) => theme.newTheme.radius.xs}; + svg { + fill: ${({ theme }) => + theme.newTheme.color["Colors/Text/text-brand-tertiary (600)"]}; + margin-right: ${({ theme }) => theme.newTheme.spacing.md}; + } ` diff --git a/packages/client/src/client/App/Credit/CreditRfqs/CreditRfqs.tsx b/packages/client/src/client/App/Credit/CreditRfqs/CreditRfqs.tsx index b4179d92cb..71ddc87d8b 100644 --- a/packages/client/src/client/App/Credit/CreditRfqs/CreditRfqs.tsx +++ b/packages/client/src/client/App/Credit/CreditRfqs/CreditRfqs.tsx @@ -1,17 +1,12 @@ -import { lazy, Suspense } from "react" +import { lazy } from "react" import styled from "styled-components" +import { RegionWrapper } from "@/client/components/layout/Region" import { Loader } from "@/client/components/Loader" const CreditRfqsCore = lazy(() => import("./CreditRfqsCore")) -const CreditRfqsWrapper = styled.div` - position: relative; - padding: 0.5rem 0 0.5rem 1rem; - user-select: none; - height: 100%; - background: ${({ theme }) => theme.core.darkBackground}; - +const CreditRfqsWrapper = styled(RegionWrapper)` @media (max-width: 480px) { padding-right: 1rem; } @@ -25,10 +20,8 @@ const loader = ( ) export const CreditRfqs = () => ( - - - {loader} - + + {loader} ) diff --git a/packages/client/src/client/App/Credit/CreditRfqs/CreditRfqsHeader.tsx b/packages/client/src/client/App/Credit/CreditRfqs/CreditRfqsHeader.tsx index 540fd8d966..8c290efd34 100644 --- a/packages/client/src/client/App/Credit/CreditRfqs/CreditRfqsHeader.tsx +++ b/packages/client/src/client/App/Credit/CreditRfqs/CreditRfqsHeader.tsx @@ -1,25 +1,18 @@ import styled from "styled-components" +import { BinIcon } from "@/client/components/icons/BinIcon" import { TabBar, TabBarActionConfig } from "@/client/components/TabBar" import { removeRfqs, useExecutedRfqIds } from "@/services/credit" -import { ClearRfqsIcon } from "./ClearRfqsIcon" import { RFQS_TABS, setSelectedRfqsTab, useSelectedRfqsTab, } from "./selectedRfqsTab" -const ClearRfqsButton = styled.button<{ disabled: boolean }>` - width: 34px; - height: 34px; - border-radius: 8px; - display: flex; - justify-content: center; - align-items: center; - color: ${({ theme }) => theme.secondary.base}; - background-color: ${({ theme }) => theme.core.lightBackground}; - ${({ disabled }) => (disabled ? "opacity: 0.3" : "")} +const BinButton = styled(BinIcon)` + fill: ${({ theme }) => + theme.newTheme.color["Colors/Text/text-quaternary (500)"]}; ` export const CreditRfqsHeader = () => { @@ -29,14 +22,9 @@ export const CreditRfqsHeader = () => { const actions: TabBarActionConfig = [ { name: "clearRfqs", - inner: ( - removeRfqs(executedRfqIds)} - disabled={executedRfqIds.length === 0} - > - {ClearRfqsIcon} - - ), + inner: , + onClick: () => removeRfqs(executedRfqIds), + disabled: executedRfqIds.length === 0, }, ] diff --git a/packages/client/src/client/App/Credit/CreditRfqs/selectedRfqsTab.tsx b/packages/client/src/client/App/Credit/CreditRfqs/selectedRfqsTab.tsx index 3b186aea90..e8c189591e 100644 --- a/packages/client/src/client/App/Credit/CreditRfqs/selectedRfqsTab.tsx +++ b/packages/client/src/client/App/Credit/CreditRfqs/selectedRfqsTab.tsx @@ -7,7 +7,7 @@ export enum RfqsTab { Live = "Live", Expired = "Expired", Done = "Done", - Cancelled = "Canceled", + Cancelled = "Cancelled", } export const RFQS_TABS: RfqsTab[] = Object.values(RfqsTab) diff --git a/packages/client/src/client/App/Credit/NewRfq/NewRfq.tsx b/packages/client/src/client/App/Credit/NewRfq/NewRfq.tsx new file mode 100644 index 0000000000..f33157622d --- /dev/null +++ b/packages/client/src/client/App/Credit/NewRfq/NewRfq.tsx @@ -0,0 +1,26 @@ +import { lazy } from "react" +import styled from "styled-components" + +import { RegionWrapper } from "@/client/components/layout/Region" +import { Loader } from "@/client/components/Loader" + +const NewRfqCore = lazy(() => import("./NewRfqCore")) + +const NewRfqWrapper = styled(RegionWrapper)` + border-left: ${({ theme }) => + theme.newTheme.color["Colors/Background/bg-primary"]} + solid ${({ theme }) => theme.newTheme.spacing.sm}; + width: ${({ theme }) => theme.newTheme.width["xs"]}; +` + +const loader = ( + +) + +export const NewRfq = () => ( + + {loader} + +) + +export default NewRfq diff --git a/packages/client/src/client/App/Credit/NewRfq/NewRfqCore.tsx b/packages/client/src/client/App/Credit/NewRfq/NewRfqCore.tsx new file mode 100644 index 0000000000..3b4962e6d0 --- /dev/null +++ b/packages/client/src/client/App/Credit/NewRfq/NewRfqCore.tsx @@ -0,0 +1,48 @@ +import { useEffect } from "react" + +import { Region } from "@/client/components/layout/Region" +import { TabBar, TabBarActionConfig } from "@/client/components/TabBar" +import { + registerCreditRfqCreatedNotifications, + unregisterCreditRfqCreatedNotifications, +} from "@/client/notifications" +import { WithChildren } from "@/client/utils/utilityTypes" +import { registerSimulatedDealerResponses } from "@/services/credit/creditRfqResponses" + +import { supportsTearOut } from "../../TearOutSection/supportsTearOut" +import { TearOutComponent } from "../../TearOutSection/TearOutComponent" +import { NewRfqForm } from "./NewRfqForm" +import { request$ } from "./state" + +const NewRfqCore = ({ children }: WithChildren) => { + useEffect(() => { + const subscription = registerSimulatedDealerResponses() + registerCreditRfqCreatedNotifications() + return () => { + subscription.unsubscribe() + unregisterCreditRfqCreatedNotifications() + } + }, []) + + const items = ["New RFQ"] + + const actions: TabBarActionConfig = [] + + if (supportsTearOut) { + actions.push({ + name: "tearOut", + inner: , + }) + } + + return ( + } + Body={} + source$={request$} + fallback={children} + /> + ) +} + +export default NewRfqCore diff --git a/packages/client/src/client/App/Credit/NewRfq/NewRfqForm.tsx b/packages/client/src/client/App/Credit/NewRfq/NewRfqForm.tsx new file mode 100644 index 0000000000..c1984b0305 --- /dev/null +++ b/packages/client/src/client/App/Credit/NewRfq/NewRfqForm.tsx @@ -0,0 +1,114 @@ +import { Button } from "@/client/components/Button" +import { CheckBoxInput } from "@/client/components/Form/CheckBoxInput.tsx/CheckBoxInput" +import { FormControl } from "@/client/components/Form/FormControl/FormControl" +import { Label } from "@/client/components/Form/FormControl/Label" +import { TextInput } from "@/client/components/Form/TextInput" +import { Toggle } from "@/client/components/Toggle" +import { customNumberFormatter } from "@/client/utils" +import { Direction } from "@/generated/TradingGateway" + +import { isBuy } from "../common" +import { CreditInstrumentSearch } from "./components/CreditInstrumentSearch" +import { + clear, + CLEAR_DEALER_IDS, + sendRfq, + setDirection, + setQuantity, + updateDealerIds, + useFormState, + useIsValid, + useSortedCreditDealers, +} from "./state" +import { Form, Row } from "./styled" + +const formatter = customNumberFormatter() + +export const NewRfqForm = () => { + const counterparties = useSortedCreditDealers() + const valid = useIsValid() + const [direction, , quantity, dealerIds] = useFormState() + + const items = counterparties.map(({ id, name }) => ({ + id, + name, + })) + + return ( +
+ + setDirection(isBuy(direction) ? Direction.Sell : Direction.Buy) + } + isToggled={direction === Direction.Sell} + /> + + + + + + + + + + + + + + + + + + + + + + + + + + + checked + ? items + .filter(({ id }) => !dealerIds.includes(id)) + .forEach(({ id }) => updateDealerIds({ id, checked: true })) + : updateDealerIds({ id: CLEAR_DEALER_IDS, checked: false }) + } + /> + {items.map(({ name, id }) => ( + updateDealerIds({ id, checked })} + /> + ))} + + + + + + + + ) +} diff --git a/packages/client/src/client/App/Credit/NewRfq/components/CreditInstrumentSearch.tsx b/packages/client/src/client/App/Credit/NewRfq/components/CreditInstrumentSearch.tsx new file mode 100644 index 0000000000..77aa864248 --- /dev/null +++ b/packages/client/src/client/App/Credit/NewRfq/components/CreditInstrumentSearch.tsx @@ -0,0 +1,141 @@ +import { bind } from "@react-rxjs/core" +import { useCombobox } from "downshift" +import { forwardRef, useMemo, useState } from "react" +import { FaSearch } from "react-icons/fa" +import { map, withLatestFrom } from "rxjs/operators" + +import { TextInput } from "@/client/components/Form/TextInput" +import { Typography } from "@/client/components/Typography" +import { + creditInstrumentsByCusip$, + useCreditInstrumentsByCusip, +} from "@/services/credit" + +import { InstrumentDetails } from "../../common/InstrumentDetails" +import { instrumentId$, setInstrumentId } from "../state" +import { + IconWrapper, + InputWrapper, + InstrumentSearchWrapper, + SearchResultItem, + SearchResultsWrapper, + SearchWrapper, +} from "./styled" +import { useInputFocus } from "./useInputFocus" + +export const [useSelectedInstrument] = bind( + instrumentId$.pipe( + withLatestFrom(creditInstrumentsByCusip$), + map(([instrumentId, creditInstrumentsByCusip]) => + instrumentId !== null + ? (Object.values(creditInstrumentsByCusip).find( + (instrument) => instrument.id === instrumentId, + ) ?? null) + : null, + ), + ), + null, +) + +export const CreditInstrumentSearch = () => { + const selectedInstrument = useSelectedInstrument() + const { inputRef, focusInput } = useInputFocus() + + const showAndResetInput = () => { + setInstrumentId(null) + focusInput() + } + + return ( + + + {selectedInstrument ? ( + + ) : ( + + )} + + + + + + ) +} + +const SearchBox = forwardRef< + HTMLInputElement, + { onChange: (value: number | null) => void } +>(function SearchBox({ onChange }, inputRef) { + const instruments = useCreditInstrumentsByCusip() + const [inputValue, setInputValue] = useState("") + + const filteredInstruments = useMemo(() => { + return Object.values(instruments).filter( + (instrument) => + !inputValue || + instrument.cusip.toLowerCase().includes(inputValue.toLowerCase()) || + instrument.name.toLowerCase().includes(inputValue.toLowerCase()), + ) + }, [inputValue, instruments]) + + const { + isOpen, + getMenuProps, + getInputProps, + getComboboxProps, + getItemProps, + openMenu, + } = useCombobox({ + onInputValueChange({ inputValue }) { + setInputValue(inputValue ?? "") + }, + items: filteredInstruments, + itemToString(instrument) { + return instrument?.cusip ?? "" + }, + inputValue, + onSelectedItemChange: ({ selectedItem, type }) => { + if (type !== useCombobox.stateChangeTypes.InputBlur) { + onChange(selectedItem?.id ?? null) + } + }, + defaultHighlightedIndex: 0, + }) + + const renderItems = () => { + if (!filteredInstruments.length) { + return ( + + No results found... + + ) + } + return filteredInstruments.map((instrument, index) => ( + + + + )) + } + + return ( + + openMenu(), + ref: inputRef, + })} + /> + + {isOpen && renderItems()} + + + ) +}) diff --git a/packages/client/src/client/App/Credit/NewRfq/components/styled.ts b/packages/client/src/client/App/Credit/NewRfq/components/styled.ts new file mode 100644 index 0000000000..6ec521bbc6 --- /dev/null +++ b/packages/client/src/client/App/Credit/NewRfq/components/styled.ts @@ -0,0 +1,54 @@ +import styled from "styled-components" + +export const InstrumentSearchWrapper = styled.div` + position: relative; + display: flex; + justify-content: space-between; + align-items: center; + height: 2em; +` + +export const InputWrapper = styled.div` + position: relative; + flex: 1 1 0; +` + +export const IconWrapper = styled.div` + position: absolute; + right: 0px; + display: flex; + justify-content: center; + align-items: center; + margin-left: 5px; + height: 30px; + width: 30px; + color: ${({ theme }) => theme.secondary[5]}; + + &:hover { + cursor: pointer; + color: ${({ theme }) => theme.accents.primary.base}; + } +` + +export const SearchWrapper = styled.div` + position: relative; +` +export const SearchResultsWrapper = styled.div` + position: absolute; + top: 35px; + z-index: 1000; + width: 100%; + border-radius: ${({ theme }) => theme.newTheme.radius.sm}; + background-color: ${({ theme }) => + theme.newTheme.color["Colors/Background/bg-primary"]}; +` + +export const SearchResultItem = styled.div` + padding: ${({ theme }) => theme.newTheme.spacing.md}; + border-radius: ${({ theme }) => theme.newTheme.radius.sm}; + margin: 6px; + &[aria-selected="true"] { + background-color: ${({ theme }) => + theme.newTheme.color["Colors/Background/bg-primary_hover"]}; + } +` diff --git a/packages/client/src/client/App/Credit/NewRfq/components/useInputFocus.ts b/packages/client/src/client/App/Credit/NewRfq/components/useInputFocus.ts new file mode 100644 index 0000000000..30e427bf77 --- /dev/null +++ b/packages/client/src/client/App/Credit/NewRfq/components/useInputFocus.ts @@ -0,0 +1,24 @@ +import { useCallback, useRef } from "react" + +export const useInputFocus = () => { + const shouldFocusInputOnMount = useRef(false) + const inputRef = useRef() + + const inputRefCallback = useCallback((node: HTMLInputElement | null) => { + inputRef.current = node + if (node && shouldFocusInputOnMount.current) { + node.focus() + shouldFocusInputOnMount.current = false + } + }, []) + + const focusInput = useCallback(() => { + if (inputRef.current) { + inputRef.current.focus() + } else { + shouldFocusInputOnMount.current = true + } + }, []) + + return { inputRef: inputRefCallback, focusInput } +} diff --git a/packages/client/src/client/App/Credit/NewRfq/index.tsx b/packages/client/src/client/App/Credit/NewRfq/index.tsx new file mode 100644 index 0000000000..094f6c8c9e --- /dev/null +++ b/packages/client/src/client/App/Credit/NewRfq/index.tsx @@ -0,0 +1 @@ +export * from "./NewRfq" diff --git a/packages/client/src/client/App/Credit/NewRfq/state.ts b/packages/client/src/client/App/Credit/NewRfq/state.ts new file mode 100644 index 0000000000..51445fea59 --- /dev/null +++ b/packages/client/src/client/App/Credit/NewRfq/state.ts @@ -0,0 +1,149 @@ +import { bind, SUSPENSE } from "@react-rxjs/core" +import { createSignal } from "@react-rxjs/utils" +import { + combineLatest, + filter, + map, + merge, + Observable, + scan, + startWith, + switchMap, + take, + tap, + withLatestFrom, +} from "rxjs" + +import { CREDIT_RFQ_EXPIRY_SECONDS } from "@/client/constants" +import { createApplyCharacterMultiplier, parseQuantity } from "@/client/utils" +import { + ACK_CREATE_RFQ_RESPONSE, + DealerBody, + Direction, +} from "@/generated/TradingGateway" +import { + ADAPTIVE_BANK_NAME, + createCreditRfq$, + creditDealers$, +} from "@/services/credit" + +const CLEAR_DEALER_IDS = -1 + +const applyCharacterMultiplier = createApplyCharacterMultiplier(["k", "m"]) + +const prepareStream$ = (source$: Observable, startsWithValue: T) => + merge(source$, reset$.pipe(map(() => startsWithValue))).pipe( + startWith(startsWithValue), + ) + +// We always want the Adaptive Dealer to be at the top of the list +const [useSortedCreditDealers] = bind( + creditDealers$.pipe( + map((dealers) => { + const sortedDealers = dealers.reduce((sortedDealers, dealer) => { + if (dealer.name === ADAPTIVE_BANK_NAME) { + sortedDealers.unshift(dealer) + } else { + sortedDealers.push(dealer) + } + return sortedDealers + }, [] as DealerBody[]) + + // suspend until we have a least one dealer as it makes no sense to render the RFQ form without being able to select a dealer + return sortedDealers.length > 0 ? sortedDealers : SUSPENSE + }), + ), +) + +const [reset$, clear] = createSignal() +const [rfqRequest$, sendRfq] = createSignal() +const [_direction$, setDirection] = createSignal() +const [_instrumentId$, setInstrumentId] = createSignal() +const [_quantity$, setQuantity] = createSignal() +const [_dealerIds$, updateDealerIds] = createSignal<{ + id: number + checked: boolean +}>() + +const direction$ = prepareStream$(_direction$, Direction.Buy) +const instrumentId$ = prepareStream$(_instrumentId$, null) +const quantity$ = prepareStream$(_quantity$, "").pipe( + map((quantity) => { + const numValue = Math.trunc(Math.abs(parseQuantity(quantity))) + const lastChar = quantity.slice(-1).toLowerCase() + const value = applyCharacterMultiplier(numValue, lastChar) + return !Number.isNaN(value) ? value : 0 + }), +) +const dealerIds$ = merge( + _dealerIds$, + reset$.pipe(map(() => ({ id: CLEAR_DEALER_IDS, checked: false }))), +).pipe( + scan<{ id: number; checked: boolean }, number[]>((acc, { id, checked }) => { + if (id === CLEAR_DEALER_IDS) { + return [] + } + + if (checked) { + return [...acc, id] + } + + return acc.filter((value) => value !== id) + }, []), + startWith([] as number[]), +) + +const [useFormState, state$] = bind( + combineLatest([direction$, instrumentId$, quantity$, dealerIds$]), +) + +const [useIsValid, valid$] = bind( + state$.pipe( + map( + ([, instrumentId, quantity, dealerIds]) => + !!(instrumentId !== null && quantity && dealerIds.length), + ), + ), + false, +) + +const request$ = rfqRequest$.pipe( + withLatestFrom(valid$), + filter(([, valid]) => valid), + switchMap(() => + state$.pipe( + take(1), + tap(([direction, instrumentId, quantity, dealerIds]) => { + console.log(direction, instrumentId, quantity, dealerIds) + }), + switchMap(([direction, instrumentId, quantity, dealerIds]) => + createCreditRfq$({ + direction, + quantity, + dealerIds, + instrumentId: instrumentId as number, + expirySecs: CREDIT_RFQ_EXPIRY_SECONDS, + }), + ), + tap((response) => { + if (response.type === ACK_CREATE_RFQ_RESPONSE) clear() + }), + ), + ), +) + +export { + clear, + CLEAR_DEALER_IDS, + instrumentId$, + request$, + reset$, + sendRfq, + setDirection, + setInstrumentId, + setQuantity, + updateDealerIds, + useFormState, + useIsValid, + useSortedCreditDealers, +} diff --git a/packages/client/src/client/App/Credit/NewRfq/styled.tsx b/packages/client/src/client/App/Credit/NewRfq/styled.tsx new file mode 100644 index 0000000000..d767a42027 --- /dev/null +++ b/packages/client/src/client/App/Credit/NewRfq/styled.tsx @@ -0,0 +1,14 @@ +import styled from "styled-components" + +export const Form = styled.div` + display: grid; + gap: ${({ theme }) => theme.newTheme.spacing.xl}; + padding: ${({ theme }) => theme.newTheme.spacing["2xl"]} + ${({ theme }) => theme.newTheme.spacing.lg}; +` + +export const Row = styled.div` + display: flex; + justify-content: space-between; + gap: ${({ theme }) => theme.newTheme.spacing.xl}; +` diff --git a/packages/client/src/client/App/Credit/SellSide/SellSideRfqGrid/SellSideRfqGridInner.tsx b/packages/client/src/client/App/Credit/SellSide/SellSideRfqGrid/SellSideRfqGridInner.tsx index 878f5e8e31..f429916781 100644 --- a/packages/client/src/client/App/Credit/SellSide/SellSideRfqGrid/SellSideRfqGridInner.tsx +++ b/packages/client/src/client/App/Credit/SellSide/SellSideRfqGrid/SellSideRfqGridInner.tsx @@ -1,7 +1,7 @@ import styled, { css } from "styled-components" import { colors } from "@/client/theme" -import { breathing } from "@/client/utils/styling" +import { backgroundFlash, breathing } from "@/client/utils/styling" import { Direction } from "@/generated/TradingGateway" import { @@ -59,7 +59,7 @@ const TableHeadRow = styled.tr` ` const highlightBackgroundColor = css` - animation: ${({ theme }) => theme.flash} 1s ease-in-out 3; + animation: ${backgroundFlash} 1s ease-in-out 3; ` const TableBodyRow = styled.tr<{ diff --git a/packages/client/src/client/App/Credit/SellSide/SellSideRfqGrid/colConfig.tsx b/packages/client/src/client/App/Credit/SellSide/SellSideRfqGrid/colConfig.tsx index bb40680a7d..eae275c0f4 100644 --- a/packages/client/src/client/App/Credit/SellSide/SellSideRfqGrid/colConfig.tsx +++ b/packages/client/src/client/App/Credit/SellSide/SellSideRfqGrid/colConfig.tsx @@ -57,11 +57,7 @@ const StatefulTimer = ({ end }: { end?: number }) => { } }, [timerEnded, end]) - return timerEnded || end === undefined ? ( - - ) : ( - - ) + return timerEnded || end === undefined ? : } export const rfqColDef: RfqColDef = { diff --git a/packages/client/src/client/App/Credit/SellSide/SellSideTradeTicket/SellSideTradeTickerFooter.tsx b/packages/client/src/client/App/Credit/SellSide/SellSideTradeTicket/SellSideTradeTickerFooter.tsx index 4e0da3e3fb..6c9400dd39 100644 --- a/packages/client/src/client/App/Credit/SellSide/SellSideTradeTicket/SellSideTradeTickerFooter.tsx +++ b/packages/client/src/client/App/Credit/SellSide/SellSideTradeTicket/SellSideTradeTickerFooter.tsx @@ -9,7 +9,6 @@ import { } from "@/client/utils" import { ACCEPTED_QUOTE_STATE, - Direction, PASSED_QUOTE_STATE, PENDING_WITHOUT_PRICE_QUOTE_STATE, QuoteBody, @@ -21,7 +20,7 @@ import { useCreditRfqDetails, } from "@/services/credit" -import { CreditRfqTimer, isRfqTerminated } from "../../common" +import { CreditRfqTimer, isBuy, isRfqTerminated } from "../../common" import { price$, usePrice } from "../sellSideState" import { useIsFocused } from "../utils/useIsFocused" import { @@ -137,7 +136,7 @@ export const SellSideTradeTicketFooter = ({ {passed ? "Passed" : state === RfqState.Cancelled - ? "Canceled" + ? "Cancelled" : "Expired"} )} @@ -147,8 +146,8 @@ export const SellSideTradeTicketFooter = ({
Trade Successful
- You {direction === Direction.Buy ? "Bought" : "Sold"}{" "} - {formatter(quantity)} {instrument?.name ?? "Unknown Instrument"} @ + You {isBuy(direction) ? "Bought" : "Sold"} {formatter(quantity)}{" "} + {instrument?.name ?? "Unknown Instrument"} @ {quote.state?.type === ACCEPTED_QUOTE_STATE ? `$${quote.state.payload}` : null} diff --git a/packages/client/src/client/App/Credit/SellSide/SellSideTradeTicket/SellSideTradeTicketHeader.tsx b/packages/client/src/client/App/Credit/SellSide/SellSideTradeTicket/SellSideTradeTicketHeader.tsx index 0c206ca02a..27a5123a7c 100644 --- a/packages/client/src/client/App/Credit/SellSide/SellSideTradeTicket/SellSideTradeTicketHeader.tsx +++ b/packages/client/src/client/App/Credit/SellSide/SellSideTradeTicket/SellSideTradeTicketHeader.tsx @@ -15,6 +15,7 @@ import { DirectionLabel, InstrumentLabelContainer, InstrumentName, + isBuy, } from "../../common" const Wrapper = styled.div` @@ -42,15 +43,12 @@ export const SellSideTradeTicketHeader = memo( return ( - {direction === Direction.Buy && ( + {isBuy(direction) && (
YOU {accepted ? "BOUGHT" : "BUY"}
 )} - + {instrument?.name ?? "No name found"} diff --git a/packages/client/src/client/App/Credit/common/CreditRfqTimer.tsx b/packages/client/src/client/App/Credit/common/CreditRfqTimer.tsx index 6cd915bc68..7a460d753b 100644 --- a/packages/client/src/client/App/Credit/common/CreditRfqTimer.tsx +++ b/packages/client/src/client/App/Credit/common/CreditRfqTimer.tsx @@ -1,6 +1,8 @@ import { memo, useEffect, useLayoutEffect, useRef, useState } from "react" import styled, { css, keyframes } from "styled-components" +import { Typography } from "@/client/components/Typography" + export const TimerWrapper = styled.div` display: flex; align-items: center; @@ -8,17 +10,15 @@ export const TimerWrapper = styled.div` padding: 0 16px; ` -export const TimeLeft = styled.div<{ margin: "left" | "right" }>` +export const TimeLeft = styled.div` color: ${({ theme }) => theme.textColor}; font-size: 10px; opacity: 0.6; white-space: nowrap; - ${({ margin }) => - margin === "left" ? "margin-left: 0.5rem" : "margin-right: 0.5rem"}; ` export const ProgressBarWrapper = styled.div` - background-color: ${({ theme }) => theme.core.darkBackground}; + margin: 0 ${({ theme }) => theme.newTheme.spacing.sm}; height: 6px; width: 100%; border-radius: 3px; @@ -46,7 +46,8 @@ export const ProgressBar = memo(styled.div<{ end: number transitionTime: number }>` - background-color: ${({ theme }) => theme.accents.primary.base}; + background-color: ${({ theme }) => + theme.newTheme.color["Colors/Foreground/fg-brand-primary (600)"]}; border-radius: 3px; height: 100%; animation: ${progressAnimation}; @@ -67,12 +68,7 @@ const TimeProgress = ({ start, end }: { start: number; end: number }) => { ) } -const CountWrapper = styled.span<{ grid?: boolean }>` - color: ${({ grid, theme }) => - grid ? theme.accents.primary.base : "inherit"}; -` - -export const SecsTimer = ({ end, grid }: { end: number; grid?: boolean }) => { +export const SecsTimer = ({ end }: { end: number }) => { const [timeLeft, setTimeLeft] = useState(() => Math.round((end - Date.now()) / 1000), ) @@ -90,9 +86,12 @@ export const SecsTimer = ({ end, grid }: { end: number; grid?: boolean }) => { const timeLeftSecs = timeLeft % 60 return ( - + {timeLeftMins}m {timeLeftSecs}s - + ) } @@ -121,7 +120,7 @@ export const CreditRfqTimer = ({ return timerEnded ? null : ( <> {!isSellSideView && ( - + )} @@ -129,7 +128,7 @@ export const CreditRfqTimer = ({ {isSellSideView && ( - + )} diff --git a/packages/client/src/client/App/Credit/common/CusipWithBenchmark.tsx b/packages/client/src/client/App/Credit/common/CusipWithBenchmark.tsx index c67955a972..8c2152c21f 100644 --- a/packages/client/src/client/App/Credit/common/CusipWithBenchmark.tsx +++ b/packages/client/src/client/App/Credit/common/CusipWithBenchmark.tsx @@ -1,11 +1,6 @@ import { memo } from "react" -import styled from "styled-components" -const InstrumentCusip = styled.div` - font-size: 11px; - font-weight: 500; - opacity: 0.6; -` +import { Typography } from "@/client/components/Typography" interface CusipWithBenchmarkProps { cusip?: string @@ -17,9 +12,12 @@ export const CusipWithBenchmark = memo(function CusipWithBenchmark({ benchmark, }: CusipWithBenchmarkProps) { return ( - + {cusip ?? "No cusip found"}  • {" "} {benchmark ?? "No benchmark available"} - + ) }) diff --git a/packages/client/src/client/App/Credit/common/InstrumentDetails.tsx b/packages/client/src/client/App/Credit/common/InstrumentDetails.tsx new file mode 100644 index 0000000000..72d4270a3e --- /dev/null +++ b/packages/client/src/client/App/Credit/common/InstrumentDetails.tsx @@ -0,0 +1,26 @@ +import styled from "styled-components" + +import { Typography } from "@/client/components/Typography" + +import { CusipWithBenchmark } from "./CusipWithBenchmark" + +const Wrapper = styled.div` + display: flex; + flex-direction: column; + justify-content: center; +` + +interface Props { + name: string + cusip: string + benchmark: string +} + +export const InstrumentDetails = ({ name, cusip, benchmark }: Props) => ( + + + {name} + + + +) diff --git a/packages/client/src/client/App/Credit/common/RfqTicketHeader.ts b/packages/client/src/client/App/Credit/common/RfqTicketHeader.ts index f6e876d9b6..5553c2b61e 100644 --- a/packages/client/src/client/App/Credit/common/RfqTicketHeader.ts +++ b/packages/client/src/client/App/Credit/common/RfqTicketHeader.ts @@ -1,8 +1,9 @@ -import styled from "styled-components" +import styled, { css } from "styled-components" -import { ThemeName } from "@/client/theme" import { Direction } from "@/generated/TradingGateway" +import { isBuy } from "./utils" + interface WithDirection { direction: Direction } @@ -22,66 +23,41 @@ export const DirectionContainer = styled.div` : "rgba(167, 39, 64, 0.15)"}; ` -// Not sure about the clipped path value here, atm they are eyeballed +const buyBackground = css` + background-color: ${({ theme, terminated }) => + terminated + ? theme.newTheme.color["Colors/Background/bg-quaternary"] + : theme.newTheme.color["Colors/Background/bg-brand-primary"]}; +` + +const sellBackground = css` + background-color: ${({ theme, terminated }) => + terminated + ? theme.newTheme.color["Colors/Background/bg-quaternary"] + : theme.newTheme.color["Colors/Background/bg-sell-primary"]}; +` + export const DirectionLabel = styled.div` position: relative; display: flex; - justify-content: ${({ direction }) => - direction === Direction.Buy ? "flex-start" : "flex-end"}; + text-align: center; align-items: center; - padding: ${({ direction }) => - direction === Direction.Buy ? "0 0 0 4px" : "0 4px 0 0"}; - width: 72px; - white-space: pre-wrap; - font-size: 10px; - font-weight: 700; - color: ${({ theme, terminated }) => - terminated ? theme.secondary[5] : theme.white}; - border-radius: 2px; - background-color: ${({ theme, direction, terminated }) => - terminated - ? theme.primary[theme.name === ThemeName.Dark ? 1 : 3] - : theme.colors.spectrum.uniqueCollections[direction].darker}; - clip-path: ${({ direction }) => - direction === Direction.Buy - ? "polygon(0 0, 100% 0, 70% 100%, 0% 100%)" - : "polygon(30% 0, 100% 0, 100% 100%, 0% 100%)"}; - &:after { - right: ${({ direction }) => (direction === Direction.Buy ? 0 : null)}; - left: ${({ direction }) => (direction === Direction.Sell ? 0 : null)}; - width: 14px; - z-index: 10; - content: ""; - position: absolute; - top: 0; - height: 100%; - background-color: ${({ theme, direction, terminated }) => - terminated - ? theme.primary[theme.name === ThemeName.Dark ? 1 : 3] - : theme.colors.spectrum.uniqueCollections[direction].base}; - -moz-transform: skewX(-24deg); - -webkit-transform: skewX(-24deg); - -ms-transform: skewX(-24deg); - transform: skewX(-24deg); - } + width: 50px; - div { - width: 50px; - text-align: center; - } + padding: ${({ theme }) => theme.newTheme.spacing.md}; + ${({ direction }) => (isBuy(direction) ? buyBackground : sellBackground)} ` -export const InstrumentLabelContainer = styled.div< - WithDirection & WithTerminated ->` - display: flex; +export const InstrumentLabelContainer = styled.div` flex-grow: 1; + align-self: stretch; + display: flex; flex-direction: column; justify-content: center; - margin-left: ${({ direction }) => - direction === Direction.Sell ? "8px" : "4px"}; - color: ${({ theme, terminated }) => - terminated ? theme.secondary[5] : theme.textColor}; + text-align: left; + padding-left: ${({ theme }) => theme.newTheme.spacing.md}; + background-color: ${({ theme }) => + theme.newTheme.color["Colors/Background/bg-tertiary"]}; ` export const InstrumentName = styled.div` diff --git a/packages/client/src/client/App/Credit/common/utils.ts b/packages/client/src/client/App/Credit/common/utils.ts index d36745cc20..809b2e41b0 100644 --- a/packages/client/src/client/App/Credit/common/utils.ts +++ b/packages/client/src/client/App/Credit/common/utils.ts @@ -36,7 +36,7 @@ export function rfqStateToLabel(state: RfqState): string { case RfqState.Closed: return "You traded with Done" case RfqState.Cancelled: - return "Request Canceled" + return "Request Cancelled" default: return `Request ${state}` } diff --git a/packages/client/src/client/App/Credit/index.ts b/packages/client/src/client/App/Credit/index.ts index 97a3b83464..a8b0c0c5d8 100644 --- a/packages/client/src/client/App/Credit/index.ts +++ b/packages/client/src/client/App/Credit/index.ts @@ -1,2 +1,2 @@ -export * from "./CreditRfqForm" export * from "./CreditRfqs" +export * from "./NewRfq" diff --git a/packages/client/src/client/App/Header/LoginControls/LoginControls.tsx b/packages/client/src/client/App/Header/LoginControls/LoginControls.tsx index 9a94c68625..22118a7995 100644 --- a/packages/client/src/client/App/Header/LoginControls/LoginControls.tsx +++ b/packages/client/src/client/App/Header/LoginControls/LoginControls.tsx @@ -24,7 +24,7 @@ const LoginControls = () => ( } diff --git a/packages/client/src/client/App/Header/PWA/PWAInstallModal.styles.ts b/packages/client/src/client/App/Header/PWA/PWAInstallModal.styles.ts index 6d09771b05..67079c8bbc 100644 --- a/packages/client/src/client/App/Header/PWA/PWAInstallModal.styles.ts +++ b/packages/client/src/client/App/Header/PWA/PWAInstallModal.styles.ts @@ -1,22 +1,5 @@ import styled from "styled-components" -export const MainTitle = styled.div` - font-size: 1.19rem; - line-height: 2rem; -` - -export const Text = styled.div` - font-size: 0.81rem; - color: rgb(187, 187, 187); -` - -export const DeviceText = styled.div` - margin: 10px 0 30px; - font-size: 0.81rem; - color: rgb(187, 187, 187); - line-height: 2px; -` - export const ModalWrapper = styled.div` text-align: center; ` diff --git a/packages/client/src/client/App/Header/PWA/PWAInstallModal.tsx b/packages/client/src/client/App/Header/PWA/PWAInstallModal.tsx index c06d6598b4..e20fcf37dd 100644 --- a/packages/client/src/client/App/Header/PWA/PWAInstallModal.tsx +++ b/packages/client/src/client/App/Header/PWA/PWAInstallModal.tsx @@ -1,14 +1,10 @@ +import { Button } from "@/client/components/Button" +import { Gap } from "@/client/components/Gap" import { AppleShareIcon } from "@/client/components/icons" import { Modal } from "@/client/components/Modal" +import { Typography } from "@/client/components/Typography" -import { - DeviceText, - Icon, - MainTitle, - ModalWrapper, - Text, -} from "./PWAInstallModal.styles" -import { InstallButton } from "./PWAInstallPrompt.styles" +import { Icon, ModalWrapper } from "./PWAInstallModal.styles" interface InstallModalProps { closeModal: () => void @@ -17,13 +13,27 @@ interface InstallModalProps { export const PWAInstallModal = ({ closeModal }: InstallModalProps) => ( - Install Reactive Trader - This must be done manually - + + Install Reactive Trader + + + + This must be done manually + + Tap {AppleShareIcon} from the browsers menu and select "Add to Home Screen" - - Close + + + ) diff --git a/packages/client/src/client/App/Header/PWA/PWAInstallPrompt.styles.ts b/packages/client/src/client/App/Header/PWA/PWAInstallPrompt.styles.ts index e2eb573b07..d2d473112c 100644 --- a/packages/client/src/client/App/Header/PWA/PWAInstallPrompt.styles.ts +++ b/packages/client/src/client/App/Header/PWA/PWAInstallPrompt.styles.ts @@ -3,38 +3,22 @@ import styled from "styled-components" export const MainBanner = styled.div<{ isHidden: boolean }>` display: ${({ isHidden }) => (isHidden ? "none" : "flex")}; align-items: center; - padding: 0 10px; + gap: ${({ theme }) => theme.newTheme.spacing.md}; + padding: 0 ${({ theme }) => theme.newTheme.spacing.lg}; width: 100%; height: 32px; - background-color: ${({ theme }) => theme.core.textColor}; - color: ${({ theme }) => theme.core.darkBackground}; z-index: 100; + background-color: ${({ theme }) => + theme.newTheme.color["Colors/Background/bg-primary-solid"]}; ` export const CrossButton = styled.div` - width: 24px; - height: 24px; - svg path:last-child { - fill: ${({ theme }) => theme.core.darkBackground}; + svg { + height: 12px; + stroke: ${({ theme }) => + theme.newTheme.color["Colors/Foreground/fg-primary (900)"]}; } &:hover { cursor: pointer; } ` - -export const BannerText = styled.p` - font-size: 0.8125rem; - font-weight: 600; -` - -export const InstallButton = styled.button` - background-color: ${({ theme }) => theme.accents.primary.base}; - color: #ffffff; - padding: 5px 9px; - margin: 0 10px; - border-radius: 4px; - font-size: 0.6875rem; - &:hover { - background-color: ${({ theme }) => theme.accents.primary.darker}; - } -` diff --git a/packages/client/src/client/App/Header/PWA/PWAInstallPrompt.tsx b/packages/client/src/client/App/Header/PWA/PWAInstallPrompt.tsx index 0db8b09ba0..393502f007 100644 --- a/packages/client/src/client/App/Header/PWA/PWAInstallPrompt.tsx +++ b/packages/client/src/client/App/Header/PWA/PWAInstallPrompt.tsx @@ -1,15 +1,12 @@ import { Dispatch, SetStateAction, useEffect } from "react" -import { CrossIcon } from "@/client/components/icons" +import { Button } from "@/client/components/Button" +import { CrossIcon } from "@/client/components/icons/CrossIcon" +import { Typography } from "@/client/components/Typography" import { isiOS, isMobileDevice, isPWA } from "@/client/utils" import { PWAInstallModal } from "./PWAInstallModal" -import { - BannerText, - CrossButton, - InstallButton, - MainBanner, -} from "./PWAInstallPrompt.styles" +import { CrossButton, MainBanner } from "./PWAInstallPrompt.styles" import { usePWABannerPrompt } from "./usePWABannerPrompt" export enum PWABanner { @@ -72,13 +69,18 @@ export const PWAInstallBanner = ({ return ( - {CrossIcon} - + {} + {isMobileDevice ? "Experience Reactive Trader® as an app!" : "Experience Reactive Trader® on your desktop!"} - - installPWA(isiOS)}>Install + + ) } diff --git a/packages/client/src/client/App/Header/PWA/PWALaunchButton.tsx b/packages/client/src/client/App/Header/PWA/PWALaunchButton.tsx index b8e610ae71..5e3a75c77d 100644 --- a/packages/client/src/client/App/Header/PWA/PWALaunchButton.tsx +++ b/packages/client/src/client/App/Header/PWA/PWALaunchButton.tsx @@ -1,9 +1,9 @@ import { Dispatch, SetStateAction } from "react" +import { Button } from "@/client/components/Button" import { isiOS } from "@/client/utils" import { PWABanner } from "./PWAInstallPrompt" -import { InstallButton } from "./PWAInstallPrompt.styles" import { usePWABannerPrompt } from "./usePWABannerPrompt" export const LaunchButtonInner = ({ @@ -13,9 +13,9 @@ export const LaunchButtonInner = ({ onClick: () => void hasPrompt: boolean }) => ( - + ) interface InstallLaunchProps { diff --git a/packages/client/src/client/App/Header/theme-switcher/LightThemeIcon.tsx b/packages/client/src/client/App/Header/theme-switcher/LightThemeIcon.tsx index 6e6b2c1dcb..861243a937 100644 --- a/packages/client/src/client/App/Header/theme-switcher/LightThemeIcon.tsx +++ b/packages/client/src/client/App/Header/theme-switcher/LightThemeIcon.tsx @@ -9,19 +9,22 @@ export const LightThemeIcon = ({ }: ThemeIconProps) => { return ( - - + + + + ) } diff --git a/packages/client/src/client/App/LiveRates/Tile/ExecutionResponse/Pending.tsx b/packages/client/src/client/App/LiveRates/Tile/ExecutionResponse/Pending.tsx index 902773e4ca..14c51bfb6a 100644 --- a/packages/client/src/client/App/LiveRates/Tile/ExecutionResponse/Pending.tsx +++ b/packages/client/src/client/App/LiveRates/Tile/ExecutionResponse/Pending.tsx @@ -29,7 +29,7 @@ const Pending = () => { size={14} speed={0.8} separation={1.5} - color="white" + color="Colors/Foreground/fg-white" type="secondary" /> {" Executing"} diff --git a/packages/client/src/client/App/LiveRates/Tile/PriceButton/PriceButton.styles.tsx b/packages/client/src/client/App/LiveRates/Tile/PriceButton/PriceButton.styles.tsx index b94caed0fd..f12824cdef 100644 --- a/packages/client/src/client/App/LiveRates/Tile/PriceButton/PriceButton.styles.tsx +++ b/packages/client/src/client/App/LiveRates/Tile/PriceButton/PriceButton.styles.tsx @@ -1,5 +1,6 @@ import styled, { css, DefaultTheme, keyframes } from "styled-components" +import { isBuy } from "@/client/App/Credit/common" import { Theme } from "@/client/theme/themes" import { Direction } from "@/generated/TradingGateway" @@ -28,7 +29,7 @@ const getAnimationCSSProperty = (props: { ` const getDirectionColor = (theme: DefaultTheme, direction: Direction) => - direction === Direction.Buy + isBuy(direction) ? theme.newTheme.color["Colors/Background/bg-buy-primary"] : theme.newTheme.color["Colors/Background/bg-sell-primary"] diff --git a/packages/client/src/client/App/LiveRates/Tile/PriceButton/PriceButton.tsx b/packages/client/src/client/App/LiveRates/Tile/PriceButton/PriceButton.tsx index a5130d7a99..17103e933b 100644 --- a/packages/client/src/client/App/LiveRates/Tile/PriceButton/PriceButton.tsx +++ b/packages/client/src/client/App/LiveRates/Tile/PriceButton/PriceButton.tsx @@ -2,6 +2,7 @@ import { bind } from "@react-rxjs/core" import { of } from "rxjs" import { map, switchMap } from "rxjs/operators" +import { isBuy } from "@/client/App/Credit/common" import { AdaptiveLoader } from "@/client/components/AdaptiveLoader" import { customNumberFormatter, @@ -34,7 +35,7 @@ import { const getPriceByDirection$ = (symbol: string, direction: Direction) => getPrice$(symbol).pipe( - map(({ bid, ask }) => (direction === Direction.Buy ? ask : bid)), + map(({ bid, ask }) => (isBuy(direction) ? ask : bid)), map((price) => ({ isExpired: false, price })), ) @@ -45,10 +46,9 @@ const [usePrice, getPriceDirection$] = bind( payload ? of({ ...payload, - price: - direction === Direction.Buy - ? payload.rfqResponse.price.ask - : payload.rfqResponse.price.bid, + price: isBuy(direction) + ? payload.rfqResponse.price.ask + : payload.rfqResponse.price.bid, }) : getPriceByDirection$(symbol, direction), ), diff --git a/packages/client/src/client/App/LiveRates/Tile/Tile.state.ts b/packages/client/src/client/App/LiveRates/Tile/Tile.state.ts index eeca8ebc80..150b746447 100644 --- a/packages/client/src/client/App/LiveRates/Tile/Tile.state.ts +++ b/packages/client/src/client/App/LiveRates/Tile/Tile.state.ts @@ -21,6 +21,7 @@ import { } from "@/services/executions" import { getPrice$ } from "@/services/prices" +import { isBuy } from "../../Credit/common" import { getNotionalValue$ } from "./Notional" // Dismiss Message @@ -81,10 +82,10 @@ export const [useTileState, getTileState$] = bind( ), map(([{ direction }, notional, price, { base, terms, symbol }]) => ({ currencyPair: symbol, - dealtCurrency: direction === Direction.Buy ? base : terms, + dealtCurrency: isBuy(direction) ? base : terms, direction, notional, - spotRate: direction === Direction.Buy ? price.ask : price.bid, + spotRate: isBuy(direction) ? price.ask : price.bid, })), tap(({ direction, currencyPair, spotRate, notional }) => { window.gtag("event", "fx_trade_attempt", { diff --git a/packages/client/src/client/App/LiveRates/Tiles.tsx b/packages/client/src/client/App/LiveRates/Tiles.tsx index 641c695f2f..1d5b27df7e 100644 --- a/packages/client/src/client/App/LiveRates/Tiles.tsx +++ b/packages/client/src/client/App/LiveRates/Tiles.tsx @@ -3,8 +3,8 @@ import { combineKeys } from "@react-rxjs/utils" import { useEffect } from "react" import { combineLatest, merge } from "rxjs" import { map } from "rxjs/operators" -import styled from "styled-components" +import { GridLayout } from "@/client/components/layout/GridLayout" import { currencyPairs$ } from "@/services/currencyPairs" import { ALL_CURRENCIES, selectedCurrency$ } from "./selectedCurrency" @@ -13,14 +13,6 @@ import { Tile, tile$ } from "./Tile" import { handleTearOut } from "./Tile/TearOut/handleTearOut" import { tearOutState$, useTearOutEntry } from "./Tile/TearOut/state" -const PanelItems = styled.div` - display: grid; - grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); - grid-gap: ${({ theme }) => theme.newTheme.spacing.md}; - padding: ${({ theme }) => theme.newTheme.spacing.lg}; - padding-bottom: 0; -` - export const [useFilteredCurrencyPairs, filteredCurrencyPairs$] = bind( combineLatest([currencyPairs$, selectedCurrency$, tearOutState$]).pipe( map(([currencyPairs, selectedCurrency, tearOutState]) => { @@ -66,7 +58,7 @@ export const Tiles = () => { }, [tearOutEntry]) return ( - + {currencyPairs.map((currencyPair) => ( { isAnalytics={selectedView === TileView.Analytics} /> ))} - + ) } diff --git a/packages/client/src/client/App/Trades/Context.ts b/packages/client/src/client/App/Trades/Context.ts index ee4c47ab51..e46e06977b 100644 --- a/packages/client/src/client/App/Trades/Context.ts +++ b/packages/client/src/client/App/Trades/Context.ts @@ -1,6 +1,7 @@ import { createContext, useContext } from "react" import { Observable } from "rxjs" +import { useSafeContext } from "@/client/utils/useSafeContext" import { TradeType } from "@/services/trades/types" import { ColDef } from "./TradesState" @@ -9,42 +10,23 @@ export const TradesStreamContext = createContext< Observable | undefined >(undefined) -export const useTrades$ = () => { - const trades$ = useContext(TradesStreamContext) - - if (!trades$) throw new Error("No trades stream provided") - - return trades$ -} +export const useTrades$ = () => + useSafeContext(TradesStreamContext, "No trades stream provided") export const ColDefContext = createContext(undefined) -export const useColDef = () => { - const colDef = useContext(ColDefContext) - - if (!colDef) throw Error("No Column definition provided") - - return colDef -} +export const useColDef = () => + useSafeContext(ColDefContext, "No Column definition provided") export const ColFieldsContext = createContext<(string | number)[] | undefined>( undefined, ) -export const useColFields = () => { - const colFields = useContext(ColFieldsContext) - - if (!colFields) throw Error("No Column fields provided") - - return colFields -} +export const useColFields = () => + useSafeContext(ColFieldsContext, "No Column fields provided") export const HighlightedRowContext = createContext( null, ) -export const useHighlightedRow = () => { - const highlightedRow = useContext(HighlightedRowContext) - - return highlightedRow -} +export const useHighlightedRow = () => useContext(HighlightedRowContext) diff --git a/packages/client/src/client/App/Trades/GridRegion/TableHeadCell.tsx b/packages/client/src/client/App/Trades/GridRegion/TableHeadCell.tsx index 1777f5ead8..fcea879a72 100644 --- a/packages/client/src/client/App/Trades/GridRegion/TableHeadCell.tsx +++ b/packages/client/src/client/App/Trades/GridRegion/TableHeadCell.tsx @@ -28,6 +28,7 @@ const TableHeadCell = styled.div<{ display: flex; flex-direction: ${({ headerFirst }) => (headerFirst ? "row" : "row-reverse")}; align-items: center; + text-wrap: nowrap; padding-right: ${({ numeric }) => (numeric ? "1.3rem;" : null)}; svg { diff --git a/packages/client/src/client/App/Trades/GridRegion/TradesGridInner.tsx b/packages/client/src/client/App/Trades/GridRegion/TradesGridInner.tsx index 476cf4cae9..95d6445278 100644 --- a/packages/client/src/client/App/Trades/GridRegion/TradesGridInner.tsx +++ b/packages/client/src/client/App/Trades/GridRegion/TradesGridInner.tsx @@ -51,7 +51,6 @@ const InnerElementType = forwardRef< ref={ref} style={{ ...style, - minWidth: `${fields.length * 6}rem`, }} > diff --git a/packages/client/src/client/App/Trades/GridRegion/styled.ts b/packages/client/src/client/App/Trades/GridRegion/styled.ts index d457cd4f16..86eba0fc09 100644 --- a/packages/client/src/client/App/Trades/GridRegion/styled.ts +++ b/packages/client/src/client/App/Trades/GridRegion/styled.ts @@ -1,6 +1,7 @@ import { ReactNode } from "react" import styled, { css } from "styled-components" +import { backgroundFlash } from "@/client/utils/styling" import { ACCEPTED_QUOTE_STATE, REJECTED_WITH_PRICE_QUOTE_STATE, @@ -37,7 +38,7 @@ export const TableHeadRow = styled.div` ` export const highlightBackgroundColor = css` - animation: ${({ theme }) => theme.flash} 1s ease-in-out 3; + animation: ${backgroundFlash} 1s ease-in-out 3; ` export const TableBodyRow = styled.div<{ diff --git a/packages/client/src/client/OpenFin/apps/Launcher/NlpSuggestions/executions/RfqExecution/RfqExecutionWorkflow.tsx b/packages/client/src/client/OpenFin/apps/Launcher/NlpSuggestions/executions/RfqExecution/RfqExecutionWorkflow.tsx index 29e239d9f2..9f10a494e3 100644 --- a/packages/client/src/client/OpenFin/apps/Launcher/NlpSuggestions/executions/RfqExecution/RfqExecutionWorkflow.tsx +++ b/packages/client/src/client/OpenFin/apps/Launcher/NlpSuggestions/executions/RfqExecution/RfqExecutionWorkflow.tsx @@ -1,6 +1,7 @@ +import { isBuy } from "@/client/App/Credit/common" import { Card as RfqCard } from "@/client/App/Credit/CreditRfqs/CreditRfqCards/CreditRfqCard" import { formatNumber } from "@/client/utils" -import { ACK_CREATE_RFQ_RESPONSE, Direction } from "@/generated/TradingGateway" +import { ACK_CREATE_RFQ_RESPONSE } from "@/generated/TradingGateway" import { useCreditInstruments } from "@/services/credit" import { onResetInput } from "@/services/nlp" @@ -26,7 +27,7 @@ const ConfirmContent = ({ maturity, }: RfqNlpExecutionDataReady["payload"]["requestData"]) => { useMoveNextOnEnter(onNext) - const directionStr = direction === Direction.Buy ? "buying" : "selling" + const directionStr = isBuy(direction) ? "buying" : "selling" const notionalStr = formatNumber(notional * 1000) const instrumentMaturity = useCreditInstruments() .filter((bond) => bond.ticker === symbol) diff --git a/packages/client/src/client/OpenFin/apps/Launcher/NlpSuggestions/executions/TradeExecution/TradeExecutionWorkflow.tsx b/packages/client/src/client/OpenFin/apps/Launcher/NlpSuggestions/executions/TradeExecution/TradeExecutionWorkflow.tsx index da54e549fd..0e2b833e70 100644 --- a/packages/client/src/client/OpenFin/apps/Launcher/NlpSuggestions/executions/TradeExecution/TradeExecutionWorkflow.tsx +++ b/packages/client/src/client/OpenFin/apps/Launcher/NlpSuggestions/executions/TradeExecution/TradeExecutionWorkflow.tsx @@ -1,8 +1,8 @@ import { format } from "date-fns" import { createPortal } from "react-dom" +import { isBuy } from "@/client/App/Credit/common" import { formatNumber } from "@/client/utils" -import { Direction } from "@/generated/TradingGateway" import { ExecutionStatus, ExecutionTrade } from "@/services/executions" import { onResetInput } from "@/services/nlp" @@ -27,7 +27,7 @@ const ConfirmContent = ({ symbol, }: TradeNlpExecutionDataReady["payload"]["requestData"]) => { useMoveNextOnEnter(onNext) - const directionStr = direction === Direction.Buy ? "buying" : "selling" + const directionStr = isBuy(direction) ? "buying" : "selling" const notionalStr = formatNumber(notional) return ( @@ -47,7 +47,7 @@ const ConfirmContent = ({ const SuccessContent: React.FC = (trade) => { const message = trade.status === ExecutionStatus.Done - ? `You ${trade.direction === Direction.Buy ? "bought" : "sold"} for ${ + ? `You ${isBuy(trade.direction) ? "bought" : "sold"} for ${ trade.dealtCurrency }${formatNumber(trade.notional)} @ ${trade.spotRate} settling ${format( trade.tradeDate, diff --git a/packages/client/src/client/OpenFin/apps/Launcher/NlpSuggestions/executions/TradeExecution/state.ts b/packages/client/src/client/OpenFin/apps/Launcher/NlpSuggestions/executions/TradeExecution/state.ts index 9df8811c4a..f32941b899 100644 --- a/packages/client/src/client/OpenFin/apps/Launcher/NlpSuggestions/executions/TradeExecution/state.ts +++ b/packages/client/src/client/OpenFin/apps/Launcher/NlpSuggestions/executions/TradeExecution/state.ts @@ -11,7 +11,7 @@ import { withLatestFrom, } from "rxjs/operators" -import { Direction } from "@/generated/TradingGateway" +import { isBuy } from "@/client/App/Credit/common" import { getCurrencyPair$ } from "@/services/currencyPairs" import { execute$, ExecutionStatus } from "@/services/executions" import { nlpIntent$, NlpIntentType } from "@/services/nlp" @@ -67,10 +67,10 @@ const tradeExecutionState$: Observable = exhaustMap(([, price, { base, terms, symbol }]) => execute$({ currencyPair: symbol, - dealtCurrency: direction === Direction.Buy ? base : terms, + dealtCurrency: isBuy(direction) ? base : terms, direction, notional, - spotRate: direction === Direction.Buy ? price.ask : price.bid, + spotRate: isBuy(direction) ? price.ask : price.bid, }).pipe( map((trade) => { if (trade.status === ExecutionStatus.CreditExceeded) { diff --git a/packages/client/src/client/OpenFin/index.tsx b/packages/client/src/client/OpenFin/index.tsx index f749a6d149..ed8a33045a 100644 --- a/packages/client/src/client/OpenFin/index.tsx +++ b/packages/client/src/client/OpenFin/index.tsx @@ -25,9 +25,7 @@ const CreditRfqs = lazy( () => import("@/client/App/Credit/CreditRfqs/CreditRfqs"), ) const CreditTrades = lazy(() => import("@/client/App/Trades/CreditTrades")) -const CreditRfqForm = lazy( - () => import("@/client/App/Credit/CreditRfqForm/CreditRfqForm"), -) +const CreditRfqForm = lazy(() => import("@/client/App/Credit/NewRfq/NewRfq")) const SellSidePage = lazy(() => import("@/client/Web/SellSidePage")) export const OpenFinApp = () => ( diff --git a/packages/client/src/client/Web/CreditPage.tsx b/packages/client/src/client/Web/CreditPage.tsx index cae583f498..981a31e55d 100644 --- a/packages/client/src/client/Web/CreditPage.tsx +++ b/packages/client/src/client/Web/CreditPage.tsx @@ -1,4 +1,4 @@ -import { CreditRfqForm, CreditRfqs } from "@/client/App/Credit" +import { CreditRfqs, NewRfq } from "@/client/App/Credit" import { getTornOutSections } from "@/client/App/TearOutSection/state" import { CreditTrades } from "@/client/App/Trades" import Resizer from "@/client/components/Resizer" @@ -15,7 +15,7 @@ const CreditPage = () => { {!tornOutSections.creditBlotter && } - {!tornOutSections.newRfq && } + {!tornOutSections.newRfq && } ) } diff --git a/packages/client/src/client/Web/index.tsx b/packages/client/src/client/Web/index.tsx index dd17dc3494..63e7bae3a3 100644 --- a/packages/client/src/client/Web/index.tsx +++ b/packages/client/src/client/Web/index.tsx @@ -3,7 +3,7 @@ import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom" import { Admin } from "@/client/App/Admin" import { Analytics } from "@/client/App/Analytics" -import { CreditRfqForm } from "@/client/App/Credit" +import { NewRfq } from "@/client/App/Credit" import { LiveRates } from "@/client/App/LiveRates" import { TornOutTileWrapper } from "@/client/App/LiveRates/Tile" import { TornOut } from "@/client/App/TearOutSection/TearOutWrapper" @@ -66,7 +66,7 @@ export const WebApp = () => { path={ROUTES_CONFIG.newRfq} element={ - + } /> diff --git a/packages/client/src/client/components/AdaptiveLoader.tsx b/packages/client/src/client/components/AdaptiveLoader.tsx index ea5b971746..b2cc0b3a2e 100644 --- a/packages/client/src/client/components/AdaptiveLoader.tsx +++ b/packages/client/src/client/components/AdaptiveLoader.tsx @@ -1,6 +1,8 @@ import { memo, ReactNode } from "react" import styled, { keyframes } from "styled-components" +import { Color } from "../theme/types" + const ANIMATION_SPEED = 2 const BAR_NUMBER = 4 const bars: number[] = Array(BAR_NUMBER) @@ -26,7 +28,7 @@ interface BarProps { moveDistance: number speed: number type: LoaderType - color?: string + color?: Color } const Bar = styled("rect")` @@ -34,7 +36,10 @@ const Bar = styled("rect")` ${({ speed }) => speed}s infinite; animation-delay: ${({ order, speed }) => order * (speed / 1.3 / BAR_NUMBER) - speed * 0.6}s; - fill: ${({ theme, color }) => color ?? theme.core.textColor}; + fill: ${({ theme, color }) => + color + ? theme.newTheme.color[color] + : theme.newTheme.color["Colors/Text/text-primary (900)"]}; will-change: transform; ` @@ -54,7 +59,7 @@ export const AdaptiveLoader = memo(function AdaptiveLoader({ type?: LoaderType separation?: number speed?: number - color?: string + color?: Color children?: ReactNode }) { const sizeNum = Number(size) diff --git a/packages/client/src/client/components/Button.tsx b/packages/client/src/client/components/Button.tsx new file mode 100644 index 0000000000..85df83be1d --- /dev/null +++ b/packages/client/src/client/components/Button.tsx @@ -0,0 +1,118 @@ +import { PropsWithChildren } from "react" +import styled, { css } from "styled-components" + +import { Typography } from "./Typography" + +interface Props { + variant: "brand" | "primary" | "warning" | "outline" + size: "xxs" | "xs" | "sm" | "lg" + disabled?: boolean + onClick: () => void +} + +const focused = css` + &:focus { + outline: 2px solid + ${({ theme }) => + theme.newTheme.color["Colors/Effects/Focus rings/focus-ring"]}; + outline-offset: 1px; + } +` + +const disabledStyle = css` + ${({ theme }) => ` + background-color: ${theme.newTheme.color["Colors/Background/bg-disabled"]}; + color: ${theme.newTheme.color["Colors/Text/text-disabled"]}; + `} +` + +const brandStyle = css` + ${({ theme }) => ` + color: ${theme.newTheme.color["Component colors/Components/Buttons/Brand/button-brand-fg"]}; + background-color: ${theme.newTheme.color["Component colors/Components/Buttons/Brand/button-brand-bg"]}; + + &:hover { + color: ${theme.newTheme.color["Component colors/Components/Buttons/Brand/button-brand-fg_hover"]}; + background-color: ${theme.newTheme.color["Component colors/Components/Buttons/Brand/button-brand-bg_hover"]}; + } + ${focused} +`} +` +const primaryStyle = css` + ${({ theme }) => ` + color: ${theme.newTheme.color["Component colors/Components/Buttons/Primary/button-primary-fg"]}; + background-color: ${theme.newTheme.color["Component colors/Components/Buttons/Primary/button-primary-bg"]}; + + &:hover { + color: ${theme.newTheme.color["Component colors/Components/Buttons/Primary/button-primary-fg_hover"]}; + background-color: ${theme.newTheme.color["Component colors/Components/Buttons/Primary/button-primary-bg_hover"]}; + } + ${focused} +`} +` +const outlineStyle = css` + ${({ theme }) => ` + color: ${theme.newTheme.color["Component colors/Components/Buttons/Brand/button-brand-bg"]}; + border: 1px solid ${theme.newTheme.color["Colors/Border/border-brand"]}; + `} +` +const warningStyle = css` + ${({ theme }) => ` + color: ${theme.newTheme.color["Colors/Text/text-primary (900)"]}; + background-color: ${theme.newTheme.color["Colors/Background/bg-warning-primary"]}; + + &:hover { + color: ${theme.newTheme.color["Component colors/Components/Buttons/Primary/button-primary-fg_hover"]}; + background-color: ${theme.newTheme.color["Component colors/Components/Buttons/Primary/button-primary-bg"]}; + border: 1px solid ${theme.newTheme.color["Colors/Border/border-warning_subtle"]}; + } + ${focused} +`} +` + +const _Button = styled.button` + padding: 0 ${({ theme }) => theme.newTheme.spacing.xl}; + border-radius: ${({ theme }) => theme.newTheme.radius.full}; + + ${({ theme, size }) => { + switch (size) { + case "xxs": + return `height: 18px; + padding: 0 ${theme.newTheme.spacing.sm}; + ` + case "xs": + return `height: ${theme.newTheme.density.xs};` + case "sm": + return `height: ${theme.newTheme.density.sm};` + case "lg": + return `height: ${theme.newTheme.density.md};` + } + }} + ${({ variant, disabled }) => { + if (disabled) { + return disabledStyle + } + switch (variant) { + case "brand": + return brandStyle + case "primary": + return primaryStyle + case "outline": + return outlineStyle + case "warning": + return warningStyle + } + }}; +` + +export const Button = ({ children, ...props }: PropsWithChildren) => { + return ( + <_Button {...props}> + + {children} + + + ) +} diff --git a/packages/client/src/client/components/DisconnectionOverlay.tsx b/packages/client/src/client/components/DisconnectionOverlay.tsx index 1445000a8e..671cdaea74 100644 --- a/packages/client/src/client/components/DisconnectionOverlay.tsx +++ b/packages/client/src/client/components/DisconnectionOverlay.tsx @@ -10,25 +10,20 @@ import { useConnectionStatus, } from "@/services/connection" -// TODO - Use component from styleguide when available -const Button = styled.button` - background-color: ${({ theme }) => theme.button.primary.backgroundColor}; - color: #ffffff; - padding: 5px 9px; - border-radius: 4px; - font-size: 0.6875rem; - margin-top: 20px; - - &:hover { - background-color: ${({ theme }) => theme.accents.primary.darker}; - } -` +import { Button } from "./Button" +import { FlexBox } from "./FlexBox" +import { Typography } from "./Typography" type DisconnectedStatus = | ConnectionStatus.DISCONNECTED | ConnectionStatus.IDLE_DISCONNECTED | ConnectionStatus.OFFLINE_DISCONNECTED +const Wrapper = styled(FlexBox)` + flex-direction: column; + gap: ${({ theme }) => theme.newTheme.spacing.xl}; +` + export const DisconnectionOverlayInner = ({ connectionStatus, onReconnect, @@ -38,10 +33,14 @@ export const DisconnectionOverlayInner = ({ }) => ( {connectionStatus === ConnectionStatus.IDLE_DISCONNECTED ? ( - <> -

You have been disconnected due to inactivity.

- - + + + You have been disconnected due to inactivity. + + + ) : connectionStatus === ConnectionStatus.OFFLINE_DISCONNECTED ? ( "This device has been detected to be offline. Connection to the server will resume when a stable internet connection is established." ) : ( diff --git a/packages/client/src/client/components/Form/CheckBoxInput.tsx/CheckBoxInput.tsx b/packages/client/src/client/components/Form/CheckBoxInput.tsx/CheckBoxInput.tsx new file mode 100644 index 0000000000..542440d33a --- /dev/null +++ b/packages/client/src/client/components/Form/CheckBoxInput.tsx/CheckBoxInput.tsx @@ -0,0 +1,57 @@ +import styled from "styled-components" + +import Check from "../../../components/icons/svg/tick.svg" +import { FlexBox } from "../../FlexBox" +import { Typography } from "../../Typography" + +const CheckBoxInputWrapper = styled(FlexBox)` + border-bottom: 1px solid + ${({ theme }) => theme.newTheme.color["Colors/Background/bg-tertiary"]}; + padding: ${({ theme }) => theme.newTheme.spacing.sm}; + gap: ${({ theme }) => theme.newTheme.spacing.md}; +` + +const CheckBox = styled.input.attrs({ type: "checkbox" })<{ + checked: boolean +}>` + appearance: none; + background-color: "transparent"; + border: 1px solid + ${({ theme }) => theme.newTheme.color["Colors/Border/border-primary"]}; + width: 14px; + height: 14px; + border-radius: 4px; + + ${({ theme, checked }) => + checked && + ` + background-color: ${theme.newTheme.color["Colors/Background/bg-brand-solid"]}; + background-image: url(${Check}); + `} +` + +interface Props { + name: string + checked: boolean + onChange: (checked: boolean) => void +} + +export const CheckBoxInput = ({ name, checked, onChange }: Props) => { + return ( + + onChange(target.checked)} + /> + + + ) +} diff --git a/packages/client/src/client/components/Form/FormControl/FormControl.tsx b/packages/client/src/client/components/Form/FormControl/FormControl.tsx new file mode 100644 index 0000000000..a9217dc88c --- /dev/null +++ b/packages/client/src/client/components/Form/FormControl/FormControl.tsx @@ -0,0 +1,5 @@ +import { PropsWithChildren } from "react" + +export const FormControl = ({ children }: PropsWithChildren) => { + return
{children}
+} diff --git a/packages/client/src/client/components/Form/FormControl/Label.tsx b/packages/client/src/client/components/Form/FormControl/Label.tsx new file mode 100644 index 0000000000..cf46fc0b12 --- /dev/null +++ b/packages/client/src/client/components/Form/FormControl/Label.tsx @@ -0,0 +1,11 @@ +import styled from "styled-components" + +const LabelText = styled.label( + ({ theme }) => theme.newTheme.textStyles["Text xs/Regular"], +) + +export const Label = styled(LabelText)` + color: ${({ theme }) => + theme.newTheme.color["Colors/Text/text-tertiary (600)"]}; + margin-bottom: ${({ theme }) => theme.newTheme.spacing.xs}; +` diff --git a/packages/client/src/client/components/Form/TextInput.tsx b/packages/client/src/client/components/Form/TextInput.tsx new file mode 100644 index 0000000000..f378819ee3 --- /dev/null +++ b/packages/client/src/client/components/Form/TextInput.tsx @@ -0,0 +1,59 @@ +import React from "react" +import styled from "styled-components" + +const TextInputText = styled.input( + ({ theme }) => theme.newTheme.textStyles["Text md/Regular"], +) + +const _TextInput = styled(TextInputText)>` + ${({ theme, disabled }) => ` +height: 28px; +width: 100%; +color: ${theme.newTheme.color["Colors/Text/text-primary (900)"]}; +background-color: ${disabled ? theme.newTheme.color["Colors/Background/bg-secondary_subtle"] : theme.newTheme.color["Colors/Background/bg-secondary"]}; +border: ${theme.newTheme.color["Colors/Border/border-secondary"]} solid 1px; +padding: 0 ${theme.newTheme.spacing.sm}; +margin: 0; + +${ + !disabled && + ` + &:hover{ + border-color: ${theme.newTheme.color["Colors/Border/border-hover"]}; + } + + &:active { + border-color: ${theme.newTheme.color["Colors/Border/border-brand"]}; + } + + &:focus { + outline: 2px solid ${theme.newTheme.color["Colors/Effects/Focus rings/focus-ring"]}; + outline-offset: 1px; + } + ` +} + +`} +` + +interface Props { + name?: string + id?: string + disabled?: boolean + placeholder?: string + value?: string + onChange?: (value: string) => void +} + +export const TextInput = React.forwardRef( + function InputTest({ onChange, value, ...props }, ref) { + return ( + <_TextInput + onChange={({ target }) => onChange?.(target.value)} + value={value} + ref={ref} + {...props} + /> + ) + }, +) diff --git a/packages/client/src/client/components/Gap.tsx b/packages/client/src/client/components/Gap.tsx new file mode 100644 index 0000000000..333cac135d --- /dev/null +++ b/packages/client/src/client/components/Gap.tsx @@ -0,0 +1,15 @@ +import styled from "styled-components" + +import { Spacing } from "../theme/types" + +interface Props { + height?: Spacing + width?: Spacing +} + +export const Gap = styled.div` + ${({ height, width, theme }) => ` + height: ${height && theme.newTheme.spacing[height]}; + width: ${width && theme.newTheme.spacing[width]}; + `} +` diff --git a/packages/client/src/client/components/Line.tsx b/packages/client/src/client/components/Line.tsx index eb9c5b9914..30bb0d2ec5 100644 --- a/packages/client/src/client/components/Line.tsx +++ b/packages/client/src/client/components/Line.tsx @@ -1,8 +1,8 @@ import styled from "styled-components" -import { theme } from "../theme/uiskTheme" +import { Spacing } from "../theme/types" -export const Line = styled.div<{ height?: keyof typeof theme.spacing }>` +export const Line = styled.div<{ height?: Spacing }>` height: ${({ theme, height }) => height ? theme.newTheme.spacing[height] : "100%"}; width: 1px; diff --git a/packages/client/src/client/components/Loader.tsx b/packages/client/src/client/components/Loader.tsx index 4829d2be5a..f93bb39e28 100644 --- a/packages/client/src/client/components/Loader.tsx +++ b/packages/client/src/client/components/Loader.tsx @@ -16,14 +16,17 @@ const LoadableStyle = styled.div` height: 100%; min-height: ${({ minHeight = "100%" }) => minHeight}; border-radius: 0.1875rem; - background-color: ${({ theme }) => theme.core.lightBackground}; - color: ${({ theme }) => theme.core.textColor}; + background-color: ${({ theme }) => + theme.newTheme.color["Colors/Background/bg-secondary_subtle"]}; + color: ${({ theme }) => + theme.newTheme.color["Colors/Text/text-primary (900)"]}; display: flex; align-items: center; justify-content: center; flex-direction: column; - opacity: ${({ opacity }) => opacity ?? "0.59"}; - fill: ${({ theme }) => theme.core.textColor}; + opacity: ${({ opacity }) => opacity ?? ".59"}; + fill: ${({ theme }) => + theme.newTheme.color["Colors/Text/text-primary (900)"]}; ` export const Loader = ({ size, ...props }: Props) => ( diff --git a/packages/client/src/client/components/Modal/Modal.styles.ts b/packages/client/src/client/components/Modal/Modal.styles.ts index e56486cb25..2c97acca5f 100644 --- a/packages/client/src/client/components/Modal/Modal.styles.ts +++ b/packages/client/src/client/components/Modal/Modal.styles.ts @@ -11,7 +11,6 @@ export const ModalContainer = styled.div` display: flex; align-items: center; justify-content: center; - font-size: 0.75rem; ` export const ModalOverlay = styled.div` @@ -23,12 +22,14 @@ export const ModalOverlay = styled.div` opacity: 0.75; - background: ${({ theme }) => theme.overlay.backgroundColor}; + background: ${({ theme }) => + theme.newTheme.color["Colors/Background/bg-primary"]}; ` export const ModalPanel = styled.div` - padding: 1rem 1.5rem; + padding: ${({ theme }) => theme.newTheme.spacing["4xl"]}; margin: 0 1rem; + border-radius: ${({ theme }) => theme.newTheme.radius.lg}; width: max-content; min-width: 16rem; @@ -37,18 +38,20 @@ export const ModalPanel = styled.div` position: relative; z-index: 1; - background: ${({ theme }) => theme.core.lightBackground}; - color: ${({ theme }) => theme.core.textColor}; - border-radius: 0.25rem; + background: ${({ theme }) => + theme.newTheme.color["Colors/Background/bg-secondary"]}; + color: ${({ theme }) => + theme.newTheme.color["Colors/Text/text-primary (900)"]}; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), - 0 1rem 3rem -1rem ${(props) => darken(0.1, props.theme.overlay.backgroundColor)}; + 0 1rem 3rem -1rem ${(props) => darken(0.1, props.theme.newTheme.color["Colors/Background/bg-primary"])}; ` export const Header = styled.div` - font-size: 1rem; - line-height: 3rem; - box-shadow: 0 1px 0 ${({ theme }) => theme.core.textColor}; + padding-bottom: ${({ theme }) => theme.newTheme.spacing.xs}; + border-bottom: 1px solid + ${({ theme }) => theme.newTheme.color["Colors/Text/text-primary (900)"]}; ` export const Body = styled.div` diff --git a/packages/client/src/client/components/Modal/Modal.tsx b/packages/client/src/client/components/Modal/Modal.tsx index 6ae319919d..13d143f944 100644 --- a/packages/client/src/client/components/Modal/Modal.tsx +++ b/packages/client/src/client/components/Modal/Modal.tsx @@ -1,5 +1,6 @@ import { ReactNode } from "react" +import { Typography } from "../Typography" import { Body, Header, @@ -29,7 +30,11 @@ export const Modal = ({ onOverlayClick && onOverlayClick(e)} /> - {title &&
{title}
} + {title && ( +
+ {title} +
+ )} {children} diff --git a/packages/client/src/client/components/Switch/IconContainer.ts b/packages/client/src/client/components/Switch/IconContainer.ts index e2b05d3526..5e8b330500 100644 --- a/packages/client/src/client/components/Switch/IconContainer.ts +++ b/packages/client/src/client/components/Switch/IconContainer.ts @@ -2,13 +2,12 @@ import styled from "styled-components" export const IconContainer = styled.div<{ hover: boolean }>` border-radius: 50%; - height: 1.8rem; - width: 1.8rem; padding: 4px 6px; display: flex; justify-content: ${({ hover }) => (hover ? "flex-end" : "center")}; align-items: center; svg { + height: 20px; fill: ${({ theme }) => theme.newTheme.color[ "Component colors/Components/Buttons/Primary/button-primary-fg_subtle" diff --git a/packages/client/src/client/components/Switch/SwitchContainer.ts b/packages/client/src/client/components/Switch/SwitchContainer.ts index 7a74098581..19e0c86998 100644 --- a/packages/client/src/client/components/Switch/SwitchContainer.ts +++ b/packages/client/src/client/components/Switch/SwitchContainer.ts @@ -2,7 +2,7 @@ import styled from "styled-components" export const SwitchContainer = styled.div` margin: 0 1rem; - padding-top: 1px; + min-width: 3.5rem; display: flex; justify-content: flex-end; diff --git a/packages/client/src/client/components/TabBar/TabBar.styled.ts b/packages/client/src/client/components/TabBar/TabBar.styled.ts index 89f11be66c..8db0c8625d 100644 --- a/packages/client/src/client/components/TabBar/TabBar.styled.ts +++ b/packages/client/src/client/components/TabBar/TabBar.styled.ts @@ -31,11 +31,7 @@ export const RightSection = styled.ul` list-style: none; ` -const TabText = styled.li(({ theme }) => ({ - ...theme.newTheme.textStyles["Text md/Semibold"], -})) - -export const Tab = styled(TabText)<{ active: boolean; isStatic?: boolean }>` +export const Tab = styled.div<{ active: boolean; isStatic?: boolean }>` height: 100%; width: ${({ theme }) => theme.newTheme.spacing["9xl"]}; display: flex; @@ -45,10 +41,6 @@ export const Tab = styled(TabText)<{ active: boolean; isStatic?: boolean }>` list-style-type: none; text-decoration: none; - color: ${({ theme, active }) => - active - ? theme.newTheme.color["Colors/Text/text-brand-primary (900)"] - : "inherit"}; background-color: ${({ active, theme }) => active ? theme.newTheme.color["Colors/Background/bg-primary_alt"] : "none"}; @@ -71,10 +63,15 @@ export const DropdownWrapper = styled.div` } ` -export const Action = styled(Tab)<{ size: "sm" | "lg" }>` +export const Action = styled(Tab)<{ size: "sm" | "lg"; disabled?: boolean }>` width: ${({ theme, size }) => size === "sm" ? theme.newTheme.density.md : "auto"}; display: flex; align-items: center; line-height: 0; + + opacity: ${({ disabled }) => (disabled ? 0.3 : 1)}; + &:hover { + cursor: ${({ disabled }) => (disabled ? "auto" : "pointer")}; + } ` diff --git a/packages/client/src/client/components/TabBar/TabBar.tsx b/packages/client/src/client/components/TabBar/TabBar.tsx index ca0dc1a893..5707a7ab32 100644 --- a/packages/client/src/client/components/TabBar/TabBar.tsx +++ b/packages/client/src/client/components/TabBar/TabBar.tsx @@ -13,6 +13,7 @@ interface TabBarActionConfigItem { name: string inner: JSX.Element active?: boolean + disabled?: boolean size?: "sm" | "lg" onClick?: () => void } @@ -31,54 +32,60 @@ export const TabBar = ({ activeItem, handleItemOnClick, actions, -}: TabBarProps) => { - return ( - - - {items.map((item) => ( - handleItemOnClick?.(item)} - data-testid={`tabItem-${item}`} - isStatic={items.length < 2} +}: TabBarProps) => ( + + + {items.map((item) => ( + handleItemOnClick?.(item)} + data-testid={`tabItem-${item}`} + isStatic={items.length < 2} + > + - - {item} - - - ))} - - - {actions && - actions.toReversed().map(({ name, active, onClick, inner, size }) => ( + {item} + + + ))} + + + {actions && + actions + .toReversed() + .map(({ name, active, onClick, inner, size, disabled }) => ( - {inner} + + {inner} + ))} - {handleItemOnClick && ( - - - - )} - - - ) -} + {handleItemOnClick && ( + + + + )} + + +) diff --git a/packages/client/src/client/components/Text.tsx b/packages/client/src/client/components/Text.tsx deleted file mode 100644 index c0a3d983fa..0000000000 --- a/packages/client/src/client/components/Text.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import styled from "styled-components" - -import { theme } from "../theme/uiskTheme" - -export const Text = Object.fromEntries( - Object.entries(theme.textStyles).map(([key, style]) => { - return [ - key, - styled.text` - ${{ ...style, textTransform: "none" }} - `, - ] - }), -) diff --git a/packages/client/src/client/components/Toggle.tsx b/packages/client/src/client/components/Toggle.tsx new file mode 100644 index 0000000000..9d902a2d4c --- /dev/null +++ b/packages/client/src/client/components/Toggle.tsx @@ -0,0 +1,80 @@ +import styled from "styled-components" + +import { FlexBox } from "@/client/components/FlexBox" +import { Typography } from "@/client/components/Typography" + +interface Props { + left: string + right: string + isToggled: boolean + onChange: () => void +} + +const Background = styled(FlexBox)` + position: relative; + box-sizing: border-box; + background-color: ${({ theme }) => + theme.newTheme.color["Colors/Background/bg-secondary"]}; + border-radius: ${({ theme }) => theme.newTheme.radius.full}; + height: 28px; + justify-content: space-between; + border: ${({ theme }) => theme.newTheme.spacing.xxs} solid + ${({ theme }) => theme.newTheme.color["Colors/Background/bg-secondary"]}; +` + +const Button = styled.button` + flex: 1; + display: flex; + justify-content: center; + align-items: center; + z-index: 2; +` + +const ButtonTypography = styled(Typography)` + transition: color 0.5s ease; +` + +const Indicator = styled.div<{ isToggled: boolean }>` + position: absolute; + width: 50%; + height: 100%; + background-color: ${({ theme, isToggled }) => + isToggled + ? theme.newTheme.color["Colors/Background/bg-sell-primary"] + : theme.newTheme.color["Colors/Background/bg-buy-primary"]}; + border-radius: ${({ theme }) => theme.newTheme.radius.full}; + left: ${({ isToggled }) => (isToggled ? "50%" : 0)}; + transition: + left 0.5s ease, + background-color 0.5s ease; +` + +export const Toggle = ({ left, right, onChange, isToggled }: Props) => ( + + + + + +) diff --git a/packages/client/src/client/components/Typography.tsx b/packages/client/src/client/components/Typography.tsx index 6ba39d0315..bc0343be08 100644 --- a/packages/client/src/client/components/Typography.tsx +++ b/packages/client/src/client/components/Typography.tsx @@ -1,23 +1,19 @@ import styled from "styled-components" -import { theme } from "../theme/uiskTheme" - -type Variant = keyof typeof theme.textStyles -type Color = keyof typeof theme.color +import { Color, TextStyles } from "../theme/types" interface TypographyProps { - variant?: Variant + variant?: TextStyles color?: Color + allowLineHeight?: boolean } export const Typography = styled.div` ${({ variant, theme }) => variant ? theme.newTheme.textStyles[variant] : null} color: ${({ color, theme }) => - color - ? theme.newTheme.color[color] - : theme.newTheme.color["Colors/Text/text-primary (900)"]}; + color ? theme.newTheme.color[color] : "inherit"}; margin-block-end: 0; - line-height: 1; + ${({ allowLineHeight }) => (allowLineHeight ? undefined : `line-height: 1`)}; ` diff --git a/packages/client/src/client/components/icons/BinIcon.tsx b/packages/client/src/client/components/icons/BinIcon.tsx new file mode 100644 index 0000000000..3a70be04f5 --- /dev/null +++ b/packages/client/src/client/components/icons/BinIcon.tsx @@ -0,0 +1,37 @@ +import { SVGAttributes } from "react" + +export const BinIcon = ({ + fill, + width = 18, + height = 18, + className, +}: SVGAttributes) => ( + + + + + + + +) diff --git a/packages/client/src/client/components/icons/CheckCircle.tsx b/packages/client/src/client/components/icons/CheckCircle.tsx new file mode 100644 index 0000000000..a3b2b97723 --- /dev/null +++ b/packages/client/src/client/components/icons/CheckCircle.tsx @@ -0,0 +1,23 @@ +import { SVGAttributes } from "react" + +export const CheckCircle = ({ + fill, + height = 16, + width = 16, +}: SVGAttributes) => ( + + + + +) diff --git a/packages/client/src/client/components/icons/CrossIcon.tsx b/packages/client/src/client/components/icons/CrossIcon.tsx index 443277edc0..585d7979fa 100644 --- a/packages/client/src/client/components/icons/CrossIcon.tsx +++ b/packages/client/src/client/components/icons/CrossIcon.tsx @@ -1,16 +1,20 @@ -export default ( +import { SVGAttributes } from "react" + +export const CrossIcon = ({ + height = 15, + width = 15, + fill = "black", +}: SVGAttributes) => ( - - - - + ) diff --git a/packages/client/src/client/components/icons/icons.stories.tsx b/packages/client/src/client/components/icons/icons.stories.tsx index 52c72714a3..5407f84138 100644 --- a/packages/client/src/client/components/icons/icons.stories.tsx +++ b/packages/client/src/client/components/icons/icons.stories.tsx @@ -20,10 +20,6 @@ export const chevronIcon = { render: () => icons.ChevronIcon, name: "ChevronIcon", } -export const crossIcon = { - render: () => icons.CrossIcon, - name: "CrossIcon", -} export const downloadIcon = { render: () => icons.DownloadIcon, name: "DownloadIcon", diff --git a/packages/client/src/client/components/icons/index.ts b/packages/client/src/client/components/icons/index.ts index ce920b982d..23a93e6a92 100644 --- a/packages/client/src/client/components/icons/index.ts +++ b/packages/client/src/client/components/icons/index.ts @@ -1,7 +1,6 @@ export { default as AppleShareIcon } from "./AppleShareIcon" export { default as ChartIcon } from "./ChartIcon" export { default as ChevronIcon } from "./ChevronIcon" -export { default as CrossIcon } from "./CrossIcon" export { default as DownloadIcon } from "./DownloadIcon" export { default as ExpandIcon } from "./ExpandIcon" export { default as FilterIcon } from "./FilterIcon" diff --git a/packages/client/src/client/components/icons/svg/tick.svg b/packages/client/src/client/components/icons/svg/tick.svg new file mode 100644 index 0000000000..6a842a298e --- /dev/null +++ b/packages/client/src/client/components/icons/svg/tick.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/client/src/client/components/layout/GridLayout.tsx b/packages/client/src/client/components/layout/GridLayout.tsx new file mode 100644 index 0000000000..e6dd334766 --- /dev/null +++ b/packages/client/src/client/components/layout/GridLayout.tsx @@ -0,0 +1,17 @@ +import styled from "styled-components" + +export const GridLayout = styled.div<{ empty?: boolean }>` + display: grid; + grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); + grid-gap: ${({ theme }) => theme.newTheme.spacing.md}; + padding: ${({ theme }) => theme.newTheme.spacing.lg}; + padding-bottom: 0; + + ${({ empty }) => + empty && + ` + flex: 1; + grid-template-columns: 1fr; + grid-template-rows: 1fr; + `} +` diff --git a/packages/client/src/client/components/layout/Region/Region.tsx b/packages/client/src/client/components/layout/Region/Region.tsx index e4d1dea92f..68ac65eff2 100644 --- a/packages/client/src/client/components/layout/Region/Region.tsx +++ b/packages/client/src/client/components/layout/Region/Region.tsx @@ -2,7 +2,7 @@ import { Subscribe } from "@react-rxjs/core" import React from "react" import { LayoutProps } from "../types" -import { RegionLayout } from "./" +import { RegionLayout } from "./RegionLayout" export const Region = ({ source$, diff --git a/packages/client/src/client/components/layout/Region/RegionWrapper.tsx b/packages/client/src/client/components/layout/Region/RegionWrapper.tsx index 343a18c931..cc383b1a47 100644 --- a/packages/client/src/client/components/layout/Region/RegionWrapper.tsx +++ b/packages/client/src/client/components/layout/Region/RegionWrapper.tsx @@ -7,20 +7,21 @@ const Background = styled.div` height: 100%; user-select: none; - background: ${({ theme }) => + background-color: ${({ theme }) => theme.newTheme.color["Colors/Background/bg-primary_alt"]}; ` interface Props { fallback: React.ReactNode + className?: string } export const RegionWrapper = React.forwardRef< HTMLDivElement, WithChildren & Props ->(function RegionWrapperInner({ fallback, children }, ref) { +>(function RegionWrapperInner({ fallback, children, className }, ref) { return ( - + {children} ) diff --git a/packages/client/src/client/components/layout/Region/index.ts b/packages/client/src/client/components/layout/Region/index.ts index d609c726b7..dc38741c1c 100644 --- a/packages/client/src/client/components/layout/Region/index.ts +++ b/packages/client/src/client/components/layout/Region/index.ts @@ -1,3 +1,2 @@ export * from "./Region" -export * from "./RegionLayout" export * from "./RegionWrapper" diff --git a/packages/client/src/client/notifications.openfin.ts b/packages/client/src/client/notifications.openfin.ts index 28b0042de3..bacfb8f4df 100644 --- a/packages/client/src/client/notifications.openfin.ts +++ b/packages/client/src/client/notifications.openfin.ts @@ -29,6 +29,7 @@ import { } from "@/services/credit" import { executions$, ExecutionTrade } from "@/services/executions" +import { isBuy } from "./App/Credit/common" import { setCreditRfqCardHighlight } from "./App/Credit/CreditRfqs/CreditRfqCards" import { processCreditQuoteReceived, @@ -107,10 +108,9 @@ const createNotificationTemplate = ( [ createText("messageTradeDirection", 12, { fontWeight: "bold", - backgroundColor: - direction === Direction.Buy - ? "rgb(45, 149, 255)" - : "rgb(255, 39, 75)", + backgroundColor: isBuy(direction) + ? "rgb(45, 149, 255)" + : "rgb(255, 39, 75)", borderRadius: "10px", padding: "0 5px", }), diff --git a/packages/client/src/client/styleguide/sections/Iconography.tsx b/packages/client/src/client/styleguide/sections/Iconography.tsx index c4e9c41b27..76910613d6 100644 --- a/packages/client/src/client/styleguide/sections/Iconography.tsx +++ b/packages/client/src/client/styleguide/sections/Iconography.tsx @@ -3,7 +3,6 @@ import styled from "styled-components" import { ChartIcon, ChevronIcon, - CrossIcon, DownloadIcon, FilterIcon, MailIcon, @@ -61,12 +60,6 @@ export const FontFamilies = () => ( {} {} -
Cross
-
{CrossIcon}
- {CrossIcon} - {CrossIcon} - {CrossIcon} -
Minimize-Screen
{MinimizeIcon}
{MinimizeIcon} diff --git a/packages/client/src/client/theme/themes.ts b/packages/client/src/client/theme/themes.ts index deadc891c9..28c0ccd879 100644 --- a/packages/client/src/client/theme/themes.ts +++ b/packages/client/src/client/theme/themes.ts @@ -9,7 +9,8 @@ import { CorePalette, CorePaletteMap, } from "./colors" -import { theme as newTheme } from "./uiskTheme" +import { Theme as UISKTheme } from "./types" +import { generateUISKTheme } from "./uisk/generateUISKTheme" export enum ThemeName { Light = "light", @@ -87,6 +88,7 @@ const createTheme = ( name: ThemeName, { primary, secondary, core }: CorePaletteMap, accents: AccentPaletteMap, + newTheme: UISKTheme, ) => ({ name, core, @@ -209,11 +211,13 @@ const lightTheme: Theme = createTheme( ThemeName.Light, colors.light, colors.accents, + generateUISKTheme("Light mode") as unknown as UISKTheme, ) const darkTheme: Theme = createTheme( ThemeName.Dark, colors.dark, colors.accents, + generateUISKTheme("Dark mode") as unknown as UISKTheme, ) export const themes: Record = { diff --git a/packages/client/src/client/theme/types.ts b/packages/client/src/client/theme/types.ts new file mode 100644 index 0000000000..5fe408d2a4 --- /dev/null +++ b/packages/client/src/client/theme/types.ts @@ -0,0 +1,9 @@ +import { theme } from "./uisk/uiskTheme" + +export type Theme = typeof theme +export type Density = keyof Theme["density"] +export type Spacing = keyof Theme["spacing"] +export type Width = keyof Theme["width"] +export type Radius = keyof Theme["radius"] +export type TextStyles = keyof Theme["textStyles"] +export type Color = keyof Theme["color"] diff --git a/packages/client/src/client/theme/uisk/cleanKeys.test.ts b/packages/client/src/client/theme/uisk/cleanKeys.test.ts new file mode 100644 index 0000000000..cee43bdb30 --- /dev/null +++ b/packages/client/src/client/theme/uisk/cleanKeys.test.ts @@ -0,0 +1,33 @@ +import { cleanKeys } from "./cleanKeys" + +it("should clean radius names", () => { + const testRadii = { + "radius-none": 0, + "radius-xxs": 2, + "radius-xs": 4, + "radius-sm": 6, + "radius-md": 8, + "radius-xl": 12, + "radius-2xl": 16, + "radius-4xl": 24, + "radius-full": 9999, + "radius-lg": 10, + "radius-3xl": 20, + } + + const expected = { + none: 0, + xxs: 2, + xs: 4, + sm: 6, + md: 8, + xl: 12, + "2xl": 16, + "4xl": 24, + full: 9999, + lg: 10, + "3xl": 20, + } + + expect(cleanKeys(testRadii, "radius")).toEqual(expected) +}) diff --git a/packages/client/src/client/theme/uisk/cleanKeys.ts b/packages/client/src/client/theme/uisk/cleanKeys.ts new file mode 100644 index 0000000000..8f7a1a2529 --- /dev/null +++ b/packages/client/src/client/theme/uisk/cleanKeys.ts @@ -0,0 +1,8 @@ +export function cleanKeys(object: Record, string: string) { + return Object.fromEntries( + Object.entries(object).map(([key, value]) => [ + key.replace(`${string}-`, "").replace(`-${string}`, ""), + value, + ]), + ) +} diff --git a/packages/client/src/client/theme/uisk/generateUISKTheme.ts b/packages/client/src/client/theme/uisk/generateUISKTheme.ts new file mode 100644 index 0000000000..6367d95a3c --- /dev/null +++ b/packages/client/src/client/theme/uisk/generateUISKTheme.ts @@ -0,0 +1,44 @@ +import { cleanKeys } from "./cleanKeys" +import { resolveTheme, UISK_ThemeModes } from "./generatedTheme" + +type Theme = ReturnType + +function parseTheme(theme: Theme) { + return { + color: theme.variables["1. Color modes"], + radius: setToUnit(cleanKeys(theme.variables["2. Radius"], "radius")), + spacing: setToUnit(cleanKeys(theme.variables["3. Spacing"], "spacing")), + density: setToUnit(cleanKeys(theme.variables["4. Density"], "density")), + width: setToUnit(cleanKeys(theme.variables["5. Widths"], "width")), + container: setToUnit( + cleanKeys(theme.variables["6. Containers"], "container"), + ), + typography: setToUnit(theme.variables["7. Typography"]), + textStyles: convertFontSizeToPx(theme.textStyles), + } +} + +function convertFontSizeToPx(textStyles: Theme["textStyles"]) { + return Object.fromEntries( + Object.entries(textStyles).map(([key, style]) => [ + key, + { ...style, fontSize: style.fontSize + "px" }, + ]), + ) +} + +type Unit = "px" + +function setToUnit( + object: { [key: string]: number | string }, + unit: Unit = "px", +) { + return Object.fromEntries( + Object.entries(object).map(([key, value]) => + typeof value === "number" ? [key, `${value}${unit}`] : [key, value], + ), + ) +} + +export const generateUISKTheme = (mode: UISK_ThemeModes["1. Color modes"]) => + parseTheme(resolveTheme({ "1. Color modes": mode })) diff --git a/packages/client/src/client/theme/uisk/generatedTheme.ts b/packages/client/src/client/theme/uisk/generatedTheme.ts new file mode 100644 index 0000000000..2b58b029df --- /dev/null +++ b/packages/client/src/client/theme/uisk/generatedTheme.ts @@ -0,0 +1,7354 @@ +// ----------------------------------------------------------------------------- +// +// This is a generated file. Do not modify it, modify the generator instead. +// +// ----------------------------------------------------------------------------- + +export type UISK_Theme = { + variables: UISK_Variables + currentModes: UISK_ThemeModes + textStyles: UISK_TextStyles +} +export type UISK_ThemeModes = { + _Primitives: "Adaptive" | "Aeron" + "2. Radius": "Default" + "3. Spacing": "Default" + "5. Widths": "Default" + "6. Containers": "Default" + "7. Typography": "Default" + "1. Color modes": "Dark mode" | "Light mode" + "4. Density": "Comfortable" | "Compact" | "Spacious" +} +export type UISK_TextStyleName = + | "Display 2xl/Regular" + | "Display 2xl/Medium" + | "Display 2xl/Semibold" + | "Display 2xl/Bold" + | "Display xl/Regular" + | "Display xl/Medium" + | "Display xl/Semibold" + | "Display xl/Bold" + | "Display lg/Regular" + | "Display lg/Medium" + | "Display lg/Semibold" + | "Display lg/Bold" + | "Display md/Regular" + | "Display md/Medium" + | "Display md/Semibold" + | "Display md/Bold" + | "Display sm/Regular" + | "Display sm/Medium" + | "Display sm/Semibold" + | "Display sm/Bold" + | "Display xs/Regular" + | "Display xs/Medium" + | "Display xs/Semibold" + | "Display xs/Bold" + | "Text xl/Regular" + | "Text xl/Medium" + | "Text xl/Semibold" + | "Text xl/Bold" + | "Text xl/Regular italic" + | "Text xl/Medium italic" + | "Text xl/Semibold italic" + | "Text xl/Bold italic" + | "Text xl/Regular underlined" + | "Text lg/Regular" + | "Text lg/Medium" + | "Text lg/Semibold" + | "Text lg/Bold" + | "Text lg/Regular italic" + | "Text lg/Medium italic" + | "Text lg/Semibold italic" + | "Text lg/Bold italic" + | "Text lg/Regular underlined" + | "Text md/Regular" + | "Text md/Medium" + | "Text md/Semibold" + | "Text md/Bold" + | "Text md/Regular italic" + | "Text md/Medium italic" + | "Text md/Semibold italic" + | "Text md/Bold italic" + | "Text md/Regular underlined" + | "Text sm/Regular" + | "Text sm/Medium" + | "Text sm/Semibold" + | "Text sm/Bold" + | "Text sm/Regular italic" + | "Text sm/Regular underlined" + | "Text sm/Medium italic" + | "Text sm/Semibold italic" + | "Text sm/Bold italic" + | "Text xs/Regular" + | "Text xs/Medium" + | "Text xs/Semibold" + | "Text xs/Bold" + | "Text xs/Regular italic" + | "Text xs/Regular underlined" + | "Text xs/Medium italic" + | "Text xs/Semibold italic" + | "Text xs/Bold italic" + | "Text xxs/Regular" + | "Text xxs/Medium" + | "Text xxs/Semibold" + | "Text xxs/Bold" + | "Text xxs/Regular italic" + | "Text xxs/Regular underlined" + | "Text xxs/Medium italic" + | "Text xxs/Semibold italic" + | "Text xxs/Bold italic" +export type UISK_ThemeOptions = Partial + +export const modeNames = { + _Primitives: ["Adaptive", "Aeron"], + "2. Radius": ["Default"], + "3. Spacing": ["Default"], + "5. Widths": ["Default"], + "6. Containers": ["Default"], + "7. Typography": ["Default"], + "1. Color modes": ["Dark mode", "Light mode"], + "4. Density": ["Comfortable", "Compact", "Spacious"], +} as const + +/** Resolves all variables and text styles for a theme based on a set of modes. */ +export function resolveTheme(options?: UISK_ThemeOptions): UISK_Theme { + const currentModes: UISK_ThemeModes = { + _Primitives: options?.["_Primitives"] ?? "Adaptive", + "2. Radius": options?.["2. Radius"] ?? "Default", + "3. Spacing": options?.["3. Spacing"] ?? "Default", + "5. Widths": options?.["5. Widths"] ?? "Default", + "6. Containers": options?.["6. Containers"] ?? "Default", + "7. Typography": options?.["7. Typography"] ?? "Default", + "1. Color modes": options?.["1. Color modes"] ?? "Dark mode", + "4. Density": options?.["4. Density"] ?? "Comfortable", + } + const variables: UISK_Variables = { + _Primitives: collections["_Primitives"].modes[currentModes["_Primitives"]], + "2. Radius": collections["2. Radius"].modes[currentModes["2. Radius"]], + "3. Spacing": collections["3. Spacing"].modes[currentModes["3. Spacing"]], + "5. Widths": collections["5. Widths"].modes[currentModes["5. Widths"]], + "6. Containers": + collections["6. Containers"].modes[currentModes["6. Containers"]], + "7. Typography": + collections["7. Typography"].modes[currentModes["7. Typography"]], + "1. Color modes": + collections["1. Color modes"].modes[currentModes["1. Color modes"]], + "4. Density": collections["4. Density"].modes[currentModes["4. Density"]], + } + const textStyles: UISK_TextStyles = { + "Display 2xl/Regular": resolveTextStyle( + variables, + internalTextStyles["Display 2xl/Regular"], + ), + "Display 2xl/Medium": resolveTextStyle( + variables, + internalTextStyles["Display 2xl/Medium"], + ), + "Display 2xl/Semibold": resolveTextStyle( + variables, + internalTextStyles["Display 2xl/Semibold"], + ), + "Display 2xl/Bold": resolveTextStyle( + variables, + internalTextStyles["Display 2xl/Bold"], + ), + "Display xl/Regular": resolveTextStyle( + variables, + internalTextStyles["Display xl/Regular"], + ), + "Display xl/Medium": resolveTextStyle( + variables, + internalTextStyles["Display xl/Medium"], + ), + "Display xl/Semibold": resolveTextStyle( + variables, + internalTextStyles["Display xl/Semibold"], + ), + "Display xl/Bold": resolveTextStyle( + variables, + internalTextStyles["Display xl/Bold"], + ), + "Display lg/Regular": resolveTextStyle( + variables, + internalTextStyles["Display lg/Regular"], + ), + "Display lg/Medium": resolveTextStyle( + variables, + internalTextStyles["Display lg/Medium"], + ), + "Display lg/Semibold": resolveTextStyle( + variables, + internalTextStyles["Display lg/Semibold"], + ), + "Display lg/Bold": resolveTextStyle( + variables, + internalTextStyles["Display lg/Bold"], + ), + "Display md/Regular": resolveTextStyle( + variables, + internalTextStyles["Display md/Regular"], + ), + "Display md/Medium": resolveTextStyle( + variables, + internalTextStyles["Display md/Medium"], + ), + "Display md/Semibold": resolveTextStyle( + variables, + internalTextStyles["Display md/Semibold"], + ), + "Display md/Bold": resolveTextStyle( + variables, + internalTextStyles["Display md/Bold"], + ), + "Display sm/Regular": resolveTextStyle( + variables, + internalTextStyles["Display sm/Regular"], + ), + "Display sm/Medium": resolveTextStyle( + variables, + internalTextStyles["Display sm/Medium"], + ), + "Display sm/Semibold": resolveTextStyle( + variables, + internalTextStyles["Display sm/Semibold"], + ), + "Display sm/Bold": resolveTextStyle( + variables, + internalTextStyles["Display sm/Bold"], + ), + "Display xs/Regular": resolveTextStyle( + variables, + internalTextStyles["Display xs/Regular"], + ), + "Display xs/Medium": resolveTextStyle( + variables, + internalTextStyles["Display xs/Medium"], + ), + "Display xs/Semibold": resolveTextStyle( + variables, + internalTextStyles["Display xs/Semibold"], + ), + "Display xs/Bold": resolveTextStyle( + variables, + internalTextStyles["Display xs/Bold"], + ), + "Text xl/Regular": resolveTextStyle( + variables, + internalTextStyles["Text xl/Regular"], + ), + "Text xl/Medium": resolveTextStyle( + variables, + internalTextStyles["Text xl/Medium"], + ), + "Text xl/Semibold": resolveTextStyle( + variables, + internalTextStyles["Text xl/Semibold"], + ), + "Text xl/Bold": resolveTextStyle( + variables, + internalTextStyles["Text xl/Bold"], + ), + "Text xl/Regular italic": resolveTextStyle( + variables, + internalTextStyles["Text xl/Regular italic"], + ), + "Text xl/Medium italic": resolveTextStyle( + variables, + internalTextStyles["Text xl/Medium italic"], + ), + "Text xl/Semibold italic": resolveTextStyle( + variables, + internalTextStyles["Text xl/Semibold italic"], + ), + "Text xl/Bold italic": resolveTextStyle( + variables, + internalTextStyles["Text xl/Bold italic"], + ), + "Text xl/Regular underlined": resolveTextStyle( + variables, + internalTextStyles["Text xl/Regular underlined"], + ), + "Text lg/Regular": resolveTextStyle( + variables, + internalTextStyles["Text lg/Regular"], + ), + "Text lg/Medium": resolveTextStyle( + variables, + internalTextStyles["Text lg/Medium"], + ), + "Text lg/Semibold": resolveTextStyle( + variables, + internalTextStyles["Text lg/Semibold"], + ), + "Text lg/Bold": resolveTextStyle( + variables, + internalTextStyles["Text lg/Bold"], + ), + "Text lg/Regular italic": resolveTextStyle( + variables, + internalTextStyles["Text lg/Regular italic"], + ), + "Text lg/Medium italic": resolveTextStyle( + variables, + internalTextStyles["Text lg/Medium italic"], + ), + "Text lg/Semibold italic": resolveTextStyle( + variables, + internalTextStyles["Text lg/Semibold italic"], + ), + "Text lg/Bold italic": resolveTextStyle( + variables, + internalTextStyles["Text lg/Bold italic"], + ), + "Text lg/Regular underlined": resolveTextStyle( + variables, + internalTextStyles["Text lg/Regular underlined"], + ), + "Text md/Regular": resolveTextStyle( + variables, + internalTextStyles["Text md/Regular"], + ), + "Text md/Medium": resolveTextStyle( + variables, + internalTextStyles["Text md/Medium"], + ), + "Text md/Semibold": resolveTextStyle( + variables, + internalTextStyles["Text md/Semibold"], + ), + "Text md/Bold": resolveTextStyle( + variables, + internalTextStyles["Text md/Bold"], + ), + "Text md/Regular italic": resolveTextStyle( + variables, + internalTextStyles["Text md/Regular italic"], + ), + "Text md/Medium italic": resolveTextStyle( + variables, + internalTextStyles["Text md/Medium italic"], + ), + "Text md/Semibold italic": resolveTextStyle( + variables, + internalTextStyles["Text md/Semibold italic"], + ), + "Text md/Bold italic": resolveTextStyle( + variables, + internalTextStyles["Text md/Bold italic"], + ), + "Text md/Regular underlined": resolveTextStyle( + variables, + internalTextStyles["Text md/Regular underlined"], + ), + "Text sm/Regular": resolveTextStyle( + variables, + internalTextStyles["Text sm/Regular"], + ), + "Text sm/Medium": resolveTextStyle( + variables, + internalTextStyles["Text sm/Medium"], + ), + "Text sm/Semibold": resolveTextStyle( + variables, + internalTextStyles["Text sm/Semibold"], + ), + "Text sm/Bold": resolveTextStyle( + variables, + internalTextStyles["Text sm/Bold"], + ), + "Text sm/Regular italic": resolveTextStyle( + variables, + internalTextStyles["Text sm/Regular italic"], + ), + "Text sm/Regular underlined": resolveTextStyle( + variables, + internalTextStyles["Text sm/Regular underlined"], + ), + "Text sm/Medium italic": resolveTextStyle( + variables, + internalTextStyles["Text sm/Medium italic"], + ), + "Text sm/Semibold italic": resolveTextStyle( + variables, + internalTextStyles["Text sm/Semibold italic"], + ), + "Text sm/Bold italic": resolveTextStyle( + variables, + internalTextStyles["Text sm/Bold italic"], + ), + "Text xs/Regular": resolveTextStyle( + variables, + internalTextStyles["Text xs/Regular"], + ), + "Text xs/Medium": resolveTextStyle( + variables, + internalTextStyles["Text xs/Medium"], + ), + "Text xs/Semibold": resolveTextStyle( + variables, + internalTextStyles["Text xs/Semibold"], + ), + "Text xs/Bold": resolveTextStyle( + variables, + internalTextStyles["Text xs/Bold"], + ), + "Text xs/Regular italic": resolveTextStyle( + variables, + internalTextStyles["Text xs/Regular italic"], + ), + "Text xs/Regular underlined": resolveTextStyle( + variables, + internalTextStyles["Text xs/Regular underlined"], + ), + "Text xs/Medium italic": resolveTextStyle( + variables, + internalTextStyles["Text xs/Medium italic"], + ), + "Text xs/Semibold italic": resolveTextStyle( + variables, + internalTextStyles["Text xs/Semibold italic"], + ), + "Text xs/Bold italic": resolveTextStyle( + variables, + internalTextStyles["Text xs/Bold italic"], + ), + "Text xxs/Regular": resolveTextStyle( + variables, + internalTextStyles["Text xxs/Regular"], + ), + "Text xxs/Medium": resolveTextStyle( + variables, + internalTextStyles["Text xxs/Medium"], + ), + "Text xxs/Semibold": resolveTextStyle( + variables, + internalTextStyles["Text xxs/Semibold"], + ), + "Text xxs/Bold": resolveTextStyle( + variables, + internalTextStyles["Text xxs/Bold"], + ), + "Text xxs/Regular italic": resolveTextStyle( + variables, + internalTextStyles["Text xxs/Regular italic"], + ), + "Text xxs/Regular underlined": resolveTextStyle( + variables, + internalTextStyles["Text xxs/Regular underlined"], + ), + "Text xxs/Medium italic": resolveTextStyle( + variables, + internalTextStyles["Text xxs/Medium italic"], + ), + "Text xxs/Semibold italic": resolveTextStyle( + variables, + internalTextStyles["Text xxs/Semibold italic"], + ), + "Text xxs/Bold italic": resolveTextStyle( + variables, + internalTextStyles["Text xxs/Bold italic"], + ), + } + return { + variables, + currentModes, + textStyles, + } +} + +type UISK_Collection = { + [name in TName]: { + defaultModeName: TMode + modeNames: TMode[] + modes: { + [mode in TMode]: TVariables + } + } +} +type UISK_Collections = UISK_Collection0 & + UISK_Collection1 & + UISK_Collection2 & + UISK_Collection3 & + UISK_Collection4 & + UISK_Collection5 & + UISK_Collection6 & + UISK_Collection7 +export type UISK_Variables = { + ["_Primitives"]: UISK_Variables0 + ["2. Radius"]: UISK_Variables1 + ["3. Spacing"]: UISK_Variables2 + ["5. Widths"]: UISK_Variables3 + ["6. Containers"]: UISK_Variables4 + ["7. Typography"]: UISK_Variables5 + ["1. Color modes"]: UISK_Variables6 + ["4. Density"]: UISK_Variables7 +} +type UISK_Collection0 = UISK_Collection< + "_Primitives", + "Adaptive" | "Aeron", + UISK_Variables0 +> +type UISK_Variables0 = { + "Colors/Base/white": string + "Colors/Base/black": string + "Colors/Base/transparent": string + "Colors/Light mode/25": string + "Colors/Light mode/50": string + "Colors/Light mode/100": string + "Colors/Light mode/200": string + "Colors/Light mode/300": string + "Colors/Light mode/400": string + "Colors/Light mode/500": string + "Colors/Light mode/600": string + "Colors/Light mode/700": string + "Colors/Light mode/800": string + "Colors/Light mode/900": string + "Colors/Light mode/950": string + "Colors/Dark mode/25": string + "Colors/Dark mode/50": string + "Colors/Dark mode/100": string + "Colors/Dark mode/200": string + "Colors/Dark mode/300": string + "Colors/Dark mode/400": string + "Colors/Dark mode/500": string + "Colors/Dark mode/600": string + "Colors/Dark mode/700": string + "Colors/Dark mode/800": string + "Colors/Dark mode/900": string + "Colors/Dark mode/950": string + "Colors/Brand Primary/25": string + "Colors/Brand Primary/50": string + "Colors/Brand Primary/100": string + "Colors/Brand Primary/200": string + "Colors/Brand Primary/300": string + "Colors/Brand Primary/400": string + "Colors/Brand Primary/500": string + "Colors/Brand Primary/600": string + "Colors/Brand Primary/700": string + "Colors/Brand Primary/800": string + "Colors/Brand Primary/900": string + "Colors/Brand Primary/950": string + "Colors/Brand Secondary/25": string + "Colors/Brand Secondary/50": string + "Colors/Brand Secondary/100": string + "Colors/Brand Secondary/200": string + "Colors/Brand Secondary/300": string + "Colors/Brand Secondary/400": string + "Colors/Brand Secondary/500": string + "Colors/Brand Secondary/600": string + "Colors/Brand Secondary/700": string + "Colors/Brand Secondary/800": string + "Colors/Brand Secondary/900": string + "Colors/Brand Secondary/950": string + "Colors/Error/25": string + "Colors/Error/50": string + "Colors/Error/100": string + "Colors/Error/200": string + "Colors/Error/300": string + "Colors/Error/400": string + "Colors/Error/500": string + "Colors/Error/600": string + "Colors/Error/700": string + "Colors/Error/800": string + "Colors/Error/900": string + "Colors/Error/950": string + "Colors/Warning/25": string + "Colors/Warning/50": string + "Colors/Warning/100": string + "Colors/Warning/200": string + "Colors/Warning/300": string + "Colors/Warning/400": string + "Colors/Warning/500": string + "Colors/Warning/600": string + "Colors/Warning/700": string + "Colors/Warning/800": string + "Colors/Warning/900": string + "Colors/Warning/950": string + "Colors/Success/25": string + "Colors/Success/50": string + "Colors/Success/100": string + "Colors/Success/200": string + "Colors/Success/300": string + "Colors/Success/400": string + "Colors/Success/500": string + "Colors/Success/600": string + "Colors/Success/700": string + "Colors/Success/800": string + "Colors/Success/900": string + "Colors/Success/950": string + "Colors/Data/Positive/25": string + "Colors/Data/Positive/50": string + "Colors/Data/Positive/100": string + "Colors/Data/Positive/200": string + "Colors/Data/Positive/300": string + "Colors/Data/Positive/400": string + "Colors/Data/Positive/500": string + "Colors/Data/Positive/600": string + "Colors/Data/Positive/700": string + "Colors/Data/Positive/800": string + "Colors/Data/Positive/900": string + "Colors/Data/Positive/950": string + "Colors/Data/Negative/25": string + "Colors/Data/Negative/50": string + "Colors/Data/Negative/100": string + "Colors/Data/Negative/200": string + "Colors/Data/Negative/300": string + "Colors/Data/Negative/400": string + "Colors/Data/Negative/500": string + "Colors/Data/Negative/600": string + "Colors/Data/Negative/700": string + "Colors/Data/Negative/800": string + "Colors/Data/Negative/900": string + "Colors/Data/Negative/950": string + "Colors/Data/Neutral/25": string + "Colors/Data/Neutral/50": string + "Colors/Data/Neutral/100": string + "Colors/Data/Neutral/200": string + "Colors/Data/Neutral/300": string + "Colors/Data/Neutral/400": string + "Colors/Data/Neutral/500": string + "Colors/Data/Neutral/600": string + "Colors/Data/Neutral/700": string + "Colors/Data/Neutral/800": string + "Colors/Data/Neutral/900": string + "Colors/Data/Neutral/950": string + "Colors/Palette Library/Gray blue/25": string + "Colors/Palette Library/Gray blue/50": string + "Colors/Palette Library/Gray blue/100": string + "Colors/Palette Library/Gray blue/200": string + "Colors/Palette Library/Gray blue/300": string + "Colors/Palette Library/Gray blue/400": string + "Colors/Palette Library/Gray blue/500": string + "Colors/Palette Library/Gray blue/600": string + "Colors/Palette Library/Gray blue/700": string + "Colors/Palette Library/Gray blue/800": string + "Colors/Palette Library/Gray blue/900": string + "Colors/Palette Library/Gray blue/950": string + "Colors/Palette Library/Gray cool/25": string + "Colors/Palette Library/Gray cool/50": string + "Colors/Palette Library/Gray cool/100": string + "Colors/Palette Library/Gray cool/200": string + "Colors/Palette Library/Gray cool/300": string + "Colors/Palette Library/Gray cool/400": string + "Colors/Palette Library/Gray cool/500": string + "Colors/Palette Library/Gray cool/600": string + "Colors/Palette Library/Gray cool/700": string + "Colors/Palette Library/Gray cool/800": string + "Colors/Palette Library/Gray cool/900": string + "Colors/Palette Library/Gray cool/950": string + "Colors/Palette Library/Gray modern/25": string + "Colors/Palette Library/Gray modern/50": string + "Colors/Palette Library/Gray modern/100": string + "Colors/Palette Library/Gray modern/200": string + "Colors/Palette Library/Gray modern/300": string + "Colors/Palette Library/Gray modern/400": string + "Colors/Palette Library/Gray modern/500": string + "Colors/Palette Library/Gray modern/600": string + "Colors/Palette Library/Gray modern/700": string + "Colors/Palette Library/Gray modern/800": string + "Colors/Palette Library/Gray modern/900": string + "Colors/Palette Library/Gray modern/950": string + "Colors/Palette Library/Gray neutral/25": string + "Colors/Palette Library/Gray neutral/50": string + "Colors/Palette Library/Gray neutral/100": string + "Colors/Palette Library/Gray neutral/200": string + "Colors/Palette Library/Gray neutral/300": string + "Colors/Palette Library/Gray neutral/400": string + "Colors/Palette Library/Gray neutral/500": string + "Colors/Palette Library/Gray neutral/600": string + "Colors/Palette Library/Gray neutral/700": string + "Colors/Palette Library/Gray neutral/800": string + "Colors/Palette Library/Gray neutral/900": string + "Colors/Palette Library/Gray neutral/950": string + "Colors/Palette Library/Green/25": string + "Colors/Palette Library/Green/50": string + "Colors/Palette Library/Green/100": string + "Colors/Palette Library/Green/200": string + "Colors/Palette Library/Green/300": string + "Colors/Palette Library/Green/400": string + "Colors/Palette Library/Green/500": string + "Colors/Palette Library/Green/600": string + "Colors/Palette Library/Green/700": string + "Colors/Palette Library/Green/800": string + "Colors/Palette Library/Green/900": string + "Colors/Palette Library/Green/950": string + "Colors/Palette Library/Gray iron/25": string + "Colors/Palette Library/Gray iron/50": string + "Colors/Palette Library/Gray iron/100": string + "Colors/Palette Library/Gray iron/200": string + "Colors/Palette Library/Gray iron/300": string + "Colors/Palette Library/Gray iron/400": string + "Colors/Palette Library/Gray iron/500": string + "Colors/Palette Library/Gray iron/600": string + "Colors/Palette Library/Gray iron/700": string + "Colors/Palette Library/Gray iron/800": string + "Colors/Palette Library/Gray iron/900": string + "Colors/Palette Library/Gray iron/950": string + "Colors/Palette Library/Gray true/25": string + "Colors/Palette Library/Gray true/50": string + "Colors/Palette Library/Gray true/100": string + "Colors/Palette Library/Gray true/200": string + "Colors/Palette Library/Gray true/300": string + "Colors/Palette Library/Gray true/400": string + "Colors/Palette Library/Gray true/500": string + "Colors/Palette Library/Gray true/600": string + "Colors/Palette Library/Gray true/700": string + "Colors/Palette Library/Gray true/800": string + "Colors/Palette Library/Gray true/900": string + "Colors/Palette Library/Gray true/950": string + "Colors/Palette Library/Gray warm/25": string + "Colors/Palette Library/Gray warm/50": string + "Colors/Palette Library/Gray warm/100": string + "Colors/Palette Library/Gray warm/200": string + "Colors/Palette Library/Gray warm/300": string + "Colors/Palette Library/Gray warm/400": string + "Colors/Palette Library/Gray warm/500": string + "Colors/Palette Library/Gray warm/600": string + "Colors/Palette Library/Gray warm/700": string + "Colors/Palette Library/Gray warm/800": string + "Colors/Palette Library/Gray warm/900": string + "Colors/Palette Library/Gray warm/950": string + "Colors/Palette Library/Moss/25": string + "Colors/Palette Library/Moss/50": string + "Colors/Palette Library/Moss/100": string + "Colors/Palette Library/Moss/200": string + "Colors/Palette Library/Moss/300": string + "Colors/Palette Library/Moss/400": string + "Colors/Palette Library/Moss/500": string + "Colors/Palette Library/Moss/600": string + "Colors/Palette Library/Moss/700": string + "Colors/Palette Library/Moss/800": string + "Colors/Palette Library/Moss/900": string + "Colors/Palette Library/Moss/950": string + "Colors/Palette Library/Green light/25": string + "Colors/Palette Library/Green light/50": string + "Colors/Palette Library/Green light/100": string + "Colors/Palette Library/Green light/200": string + "Colors/Palette Library/Green light/300": string + "Colors/Palette Library/Green light/400": string + "Colors/Palette Library/Green light/500": string + "Colors/Palette Library/Green light/600": string + "Colors/Palette Library/Green light/700": string + "Colors/Palette Library/Green light/800": string + "Colors/Palette Library/Green light/900": string + "Colors/Palette Library/Green light/950": string + "Colors/Palette Library/Teal/25": string + "Colors/Palette Library/Teal/50": string + "Colors/Palette Library/Teal/100": string + "Colors/Palette Library/Teal/200": string + "Colors/Palette Library/Teal/300": string + "Colors/Palette Library/Teal/400": string + "Colors/Palette Library/Teal/500": string + "Colors/Palette Library/Teal/600": string + "Colors/Palette Library/Teal/700": string + "Colors/Palette Library/Teal/800": string + "Colors/Palette Library/Teal/900": string + "Colors/Palette Library/Teal/950": string + "Colors/Palette Library/Cyan/25": string + "Colors/Palette Library/Cyan/50": string + "Colors/Palette Library/Cyan/100": string + "Colors/Palette Library/Cyan/200": string + "Colors/Palette Library/Cyan/300": string + "Colors/Palette Library/Cyan/400": string + "Colors/Palette Library/Cyan/500": string + "Colors/Palette Library/Cyan/600": string + "Colors/Palette Library/Cyan/700": string + "Colors/Palette Library/Cyan/800": string + "Colors/Palette Library/Cyan/900": string + "Colors/Palette Library/Cyan/950": string + "Colors/Palette Library/Blue light/25": string + "Colors/Palette Library/Blue light/50": string + "Colors/Palette Library/Blue light/100": string + "Colors/Palette Library/Blue light/200": string + "Colors/Palette Library/Blue light/300": string + "Colors/Palette Library/Blue light/400": string + "Colors/Palette Library/Blue light/500": string + "Colors/Palette Library/Blue light/600": string + "Colors/Palette Library/Blue light/700": string + "Colors/Palette Library/Blue light/800": string + "Colors/Palette Library/Blue light/900": string + "Colors/Palette Library/Blue light/950": string + "Colors/Palette Library/Blue/25": string + "Colors/Palette Library/Blue/50": string + "Colors/Palette Library/Blue/100": string + "Colors/Palette Library/Blue/200": string + "Colors/Palette Library/Blue/300": string + "Colors/Palette Library/Blue/400": string + "Colors/Palette Library/Blue/500": string + "Colors/Palette Library/Blue/600": string + "Colors/Palette Library/Blue/700": string + "Colors/Palette Library/Blue/800": string + "Colors/Palette Library/Blue/900": string + "Colors/Palette Library/Blue/950": string + "Colors/Palette Library/Blue dark/25": string + "Colors/Palette Library/Blue dark/50": string + "Colors/Palette Library/Blue dark/100": string + "Colors/Palette Library/Blue dark/200": string + "Colors/Palette Library/Blue dark/300": string + "Colors/Palette Library/Blue dark/400": string + "Colors/Palette Library/Blue dark/500": string + "Colors/Palette Library/Blue dark/600": string + "Colors/Palette Library/Blue dark/700": string + "Colors/Palette Library/Blue dark/800": string + "Colors/Palette Library/Blue dark/900": string + "Colors/Palette Library/Blue dark/950": string + "Colors/Palette Library/Indigo/25": string + "Colors/Palette Library/Indigo/50": string + "Colors/Palette Library/Indigo/100": string + "Colors/Palette Library/Indigo/200": string + "Colors/Palette Library/Indigo/300": string + "Colors/Palette Library/Indigo/400": string + "Colors/Palette Library/Indigo/500": string + "Colors/Palette Library/Indigo/600": string + "Colors/Palette Library/Indigo/700": string + "Colors/Palette Library/Indigo/800": string + "Colors/Palette Library/Indigo/900": string + "Colors/Palette Library/Indigo/950": string + "Colors/Palette Library/Violet/25": string + "Colors/Palette Library/Violet/50": string + "Colors/Palette Library/Violet/100": string + "Colors/Palette Library/Violet/200": string + "Colors/Palette Library/Violet/300": string + "Colors/Palette Library/Violet/400": string + "Colors/Palette Library/Violet/500": string + "Colors/Palette Library/Violet/600": string + "Colors/Palette Library/Violet/700": string + "Colors/Palette Library/Violet/800": string + "Colors/Palette Library/Violet/900": string + "Colors/Palette Library/Violet/950": string + "Colors/Palette Library/Purple/25": string + "Colors/Palette Library/Purple/50": string + "Colors/Palette Library/Purple/100": string + "Colors/Palette Library/Purple/200": string + "Colors/Palette Library/Purple/300": string + "Colors/Palette Library/Purple/400": string + "Colors/Palette Library/Purple/500": string + "Colors/Palette Library/Purple/600": string + "Colors/Palette Library/Purple/700": string + "Colors/Palette Library/Purple/800": string + "Colors/Palette Library/Purple/900": string + "Colors/Palette Library/Purple/950": string + "Colors/Palette Library/Fuchsia/25": string + "Colors/Palette Library/Fuchsia/50": string + "Colors/Palette Library/Fuchsia/100": string + "Colors/Palette Library/Fuchsia/200": string + "Colors/Palette Library/Fuchsia/300": string + "Colors/Palette Library/Fuchsia/400": string + "Colors/Palette Library/Fuchsia/500": string + "Colors/Palette Library/Fuchsia/600": string + "Colors/Palette Library/Fuchsia/700": string + "Colors/Palette Library/Fuchsia/800": string + "Colors/Palette Library/Fuchsia/900": string + "Colors/Palette Library/Fuchsia/950": string + "Colors/Palette Library/Pink/25": string + "Colors/Palette Library/Pink/50": string + "Colors/Palette Library/Pink/100": string + "Colors/Palette Library/Pink/200": string + "Colors/Palette Library/Pink/300": string + "Colors/Palette Library/Pink/400": string + "Colors/Palette Library/Pink/500": string + "Colors/Palette Library/Pink/600": string + "Colors/Palette Library/Pink/700": string + "Colors/Palette Library/Pink/800": string + "Colors/Palette Library/Pink/900": string + "Colors/Palette Library/Pink/950": string + "Colors/Palette Library/Rosé/25": string + "Colors/Palette Library/Rosé/50": string + "Colors/Palette Library/Rosé/100": string + "Colors/Palette Library/Rosé/200": string + "Colors/Palette Library/Rosé/300": string + "Colors/Palette Library/Rosé/400": string + "Colors/Palette Library/Rosé/500": string + "Colors/Palette Library/Rosé/600": string + "Colors/Palette Library/Rosé/700": string + "Colors/Palette Library/Rosé/800": string + "Colors/Palette Library/Rosé/900": string + "Colors/Palette Library/Rosé/950": string + "Colors/Palette Library/Orange dark/25": string + "Colors/Palette Library/Orange dark/50": string + "Colors/Palette Library/Orange dark/100": string + "Colors/Palette Library/Orange dark/200": string + "Colors/Palette Library/Orange dark/300": string + "Colors/Palette Library/Orange dark/400": string + "Colors/Palette Library/Orange dark/500": string + "Colors/Palette Library/Orange dark/600": string + "Colors/Palette Library/Orange dark/700": string + "Colors/Palette Library/Orange dark/800": string + "Colors/Palette Library/Orange dark/900": string + "Colors/Palette Library/Orange dark/950": string + "Colors/Palette Library/Orange/25": string + "Colors/Palette Library/Orange/50": string + "Colors/Palette Library/Orange/100": string + "Colors/Palette Library/Orange/200": string + "Colors/Palette Library/Orange/300": string + "Colors/Palette Library/Orange/400": string + "Colors/Palette Library/Orange/500": string + "Colors/Palette Library/Orange/600": string + "Colors/Palette Library/Orange/700": string + "Colors/Palette Library/Orange/800": string + "Colors/Palette Library/Orange/900": string + "Colors/Palette Library/Orange/950": string + "Colors/Palette Library/Yellow/25": string + "Colors/Palette Library/Yellow/50": string + "Colors/Palette Library/Yellow/100": string + "Colors/Palette Library/Yellow/200": string + "Colors/Palette Library/Yellow/300": string + "Colors/Palette Library/Yellow/400": string + "Colors/Palette Library/Yellow/500": string + "Colors/Palette Library/Yellow/600": string + "Colors/Palette Library/Yellow/700": string + "Colors/Palette Library/Yellow/800": string + "Colors/Palette Library/Yellow/900": string + "Colors/Palette Library/Yellow/950": string + "Spacing/0": number + "Spacing/1": number + "Spacing/2": number + "Spacing/3": number + "Spacing/4": number + "Spacing/5": number + "Spacing/6": number + "Spacing/8": number + "Spacing/10": number + "Spacing/12": number + "Spacing/16": number + "Spacing/20": number + "Spacing/24": number + "Spacing/32": number + "Spacing/40": number + "Spacing/48": number + "Spacing/56": number + "Spacing/64": number + "Spacing/80": number + "Spacing/96": number + "Spacing/120": number + "Spacing/140": number + "Spacing/160": number + "Spacing/180": number + "Spacing/192": number + "Spacing/256": number + "Spacing/320": number + "Spacing/360": number + "Spacing/400": number + "Spacing/480": number + "Spacing/0-5": number + "Spacing/1-5": number + "Colors/Palette Library/Gray true/850": string + "Colors/Dark mode/850": string + "Colors/Palette Library/Pewter/500": string + "Colors/Palette Library/Pewter/50": string + "Colors/Palette Library/Pewter/100": string + "Colors/Palette Library/Pewter/300": string + "Colors/Palette Library/Pewter/200": string + "Colors/Palette Library/Pewter/400": string + "Colors/Palette Library/Pewter/600": string + "Colors/Palette Library/Pewter/700": string + "Colors/Palette Library/Pewter/800": string + "Colors/Palette Library/Pewter/900": string + "Colors/Palette Library/Pewter/950": string + "Colors/Palette Library/Carbon/500": string + "Colors/Palette Library/Carbon/50": string + "Colors/Palette Library/Carbon/100": string + "Colors/Palette Library/Carbon/200": string + "Colors/Palette Library/Carbon/300": string + "Colors/Palette Library/Carbon/400": string + "Colors/Palette Library/Carbon/600": string + "Colors/Palette Library/Carbon/700": string + "Colors/Palette Library/Carbon/800": string + "Colors/Palette Library/Carbon/900": string + "Colors/Palette Library/Carbon/950": string + "Colors/Palette Library/Granite/500": string + "Colors/Palette Library/Granite/50": string + "Colors/Palette Library/Granite/100": string + "Colors/Palette Library/Granite/200": string + "Colors/Palette Library/Granite/300": string + "Colors/Palette Library/Granite/400": string + "Colors/Palette Library/Granite/600": string + "Colors/Palette Library/Granite/700": string + "Colors/Palette Library/Granite/800": string + "Colors/Palette Library/Granite/900": string + "Colors/Palette Library/Granite/950": string + "Colors/Palette Library/Titanium/500": string + "Colors/Palette Library/Titanium/50": string + "Colors/Palette Library/Titanium/100": string + "Colors/Palette Library/Titanium/200": string + "Colors/Palette Library/Titanium/300": string + "Colors/Palette Library/Titanium/400": string + "Colors/Palette Library/Titanium/600": string + "Colors/Palette Library/Titanium/700": string + "Colors/Palette Library/Titanium/800": string + "Colors/Palette Library/Titanium/900": string + "Colors/Palette Library/Titanium/950": string + "Colors/Palette Library/Steel/500": string + "Colors/Palette Library/Steel/50": string + "Colors/Palette Library/Steel/100": string + "Colors/Palette Library/Steel/200": string + "Colors/Palette Library/Steel/300": string + "Colors/Palette Library/Steel/400": string + "Colors/Palette Library/Steel/600": string + "Colors/Palette Library/Steel/700": string + "Colors/Palette Library/Steel/800": string + "Colors/Palette Library/Steel/900": string + "Colors/Palette Library/Steel/950": string + "Colors/Palette Library/Off White/500": string + "Colors/Palette Library/Off White/50": string + "Colors/Palette Library/Off White/100": string + "Colors/Palette Library/Off White/200": string + "Colors/Palette Library/Off White/300": string + "Colors/Palette Library/Off White/400": string + "Colors/Palette Library/Off White/600": string + "Colors/Palette Library/Off White/700": string + "Colors/Palette Library/Off White/800": string + "Colors/Palette Library/Off White/900": string + "Colors/Palette Library/Off White/950": string +} + +const collection0: UISK_Collection0 = { + _Primitives: { + defaultModeName: "Adaptive", + modeNames: ["Adaptive", "Aeron"], + modes: { + Adaptive: { + "Colors/Base/white": "#ffffff", + "Colors/Base/black": "#000000", + "Colors/Base/transparent": "#ffffff00", + "Colors/Light mode/25": "#fcfcfc", + "Colors/Light mode/50": "#f7f7f7", + "Colors/Light mode/100": "#f5f5f5", + "Colors/Light mode/200": "#e5e5e5", + "Colors/Light mode/300": "#d6d6d6", + "Colors/Light mode/400": "#a3a3a3", + "Colors/Light mode/500": "#737373", + "Colors/Light mode/600": "#525252", + "Colors/Light mode/700": "#424242", + "Colors/Light mode/800": "#292929", + "Colors/Light mode/900": "#141414", + "Colors/Light mode/950": "#0f0f0f", + "Colors/Dark mode/25": "#fcfcfc", + "Colors/Dark mode/50": "#f7f7f7", + "Colors/Dark mode/100": "#f5f5f5", + "Colors/Dark mode/200": "#e5e5e5", + "Colors/Dark mode/300": "#d6d6d6", + "Colors/Dark mode/400": "#a3a3a3", + "Colors/Dark mode/500": "#737373", + "Colors/Dark mode/600": "#525252", + "Colors/Dark mode/700": "#424242", + "Colors/Dark mode/800": "#292929", + "Colors/Dark mode/900": "#141414", + "Colors/Dark mode/950": "#0f0f0f", + "Colors/Brand Primary/25": "#f2f3fe", + "Colors/Brand Primary/50": "#e6e6fe", + "Colors/Brand Primary/100": "#d9dafd", + "Colors/Brand Primary/200": "#c0c2fc", + "Colors/Brand Primary/300": "#a7a9fa", + "Colors/Brand Primary/400": "#8e90f9", + "Colors/Brand Primary/500": "#8184f8", + "Colors/Brand Primary/600": "#676ac6", + "Colors/Brand Primary/700": "#4d4f95", + "Colors/Brand Primary/800": "#41427c", + "Colors/Brand Primary/900": "#27284a", + "Colors/Brand Primary/950": "#0d0d19", + "Colors/Brand Secondary/25": "#f2f3fe", + "Colors/Brand Secondary/50": "#e6e6fe", + "Colors/Brand Secondary/100": "#d9dafd", + "Colors/Brand Secondary/200": "#c0c2fc", + "Colors/Brand Secondary/300": "#a7a9fa", + "Colors/Brand Secondary/400": "#8e90f9", + "Colors/Brand Secondary/500": "#8184f8", + "Colors/Brand Secondary/600": "#4d4f95", + "Colors/Brand Secondary/700": "#41427c", + "Colors/Brand Secondary/800": "#27284a", + "Colors/Brand Secondary/900": "#0d0d19", + "Colors/Brand Secondary/950": "#28040a", + "Colors/Error/25": "#fcf3f4", + "Colors/Error/50": "#f9e7ea", + "Colors/Error/100": "#f3d0d6", + "Colors/Error/200": "#e28897", + "Colors/Error/300": "#d14159", + "Colors/Error/400": "#c41230", + "Colors/Error/500": "#a50e28", + "Colors/Error/600": "#890c21", + "Colors/Error/700": "#6d091a", + "Colors/Error/800": "#500713", + "Colors/Error/900": "#34040d", + "Colors/Error/950": "#34040d", + "Colors/Warning/25": "#fffcf5", + "Colors/Warning/50": "#fffaeb", + "Colors/Warning/100": "#fef0c7", + "Colors/Warning/200": "#fedf89", + "Colors/Warning/300": "#fec84b", + "Colors/Warning/400": "#fdb022", + "Colors/Warning/500": "#f79009", + "Colors/Warning/600": "#dc6803", + "Colors/Warning/700": "#b54708", + "Colors/Warning/800": "#93370d", + "Colors/Warning/900": "#7a2e0e", + "Colors/Warning/950": "#4e1d09", + "Colors/Success/25": "#f6fef9", + "Colors/Success/50": "#ecfdf3", + "Colors/Success/100": "#dcfae6", + "Colors/Success/200": "#abefc6", + "Colors/Success/300": "#75e0a7", + "Colors/Success/400": "#47cd89", + "Colors/Success/500": "#17b26a", + "Colors/Success/600": "#079455", + "Colors/Success/700": "#067647", + "Colors/Success/800": "#085d3a", + "Colors/Success/900": "#074d31", + "Colors/Success/950": "#053321", + "Colors/Data/Positive/25": "#f6fef9", + "Colors/Data/Positive/50": "#ecfdf3", + "Colors/Data/Positive/100": "#dcfae6", + "Colors/Data/Positive/200": "#abefc6", + "Colors/Data/Positive/300": "#75e0a7", + "Colors/Data/Positive/400": "#47cd89", + "Colors/Data/Positive/500": "#17b26a", + "Colors/Data/Positive/600": "#079455", + "Colors/Data/Positive/700": "#067647", + "Colors/Data/Positive/800": "#085d3a", + "Colors/Data/Positive/900": "#074d31", + "Colors/Data/Positive/950": "#053321", + "Colors/Data/Negative/25": "#f5e0e0", + "Colors/Data/Negative/50": "#f0d1d1", + "Colors/Data/Negative/100": "#d98b8b", + "Colors/Data/Negative/200": "#c34646", + "Colors/Data/Negative/300": "#b41818", + "Colors/Data/Negative/400": "#9c0000", + "Colors/Data/Negative/500": "#880000", + "Colors/Data/Negative/600": "#730000", + "Colors/Data/Negative/700": "#5f0000", + "Colors/Data/Negative/800": "#4a0000", + "Colors/Data/Negative/900": "#360000", + "Colors/Data/Negative/950": "#2c0000", + "Colors/Data/Neutral/25": "#e7e8e9", + "Colors/Data/Neutral/50": "#dcdedf", + "Colors/Data/Neutral/100": "#a7abaf", + "Colors/Data/Neutral/200": "#73797f", + "Colors/Data/Neutral/300": "#50585f", + "Colors/Data/Neutral/400": "#3e454c", + "Colors/Data/Neutral/500": "#353b41", + "Colors/Data/Neutral/600": "#2c3136", + "Colors/Data/Neutral/700": "#23262a", + "Colors/Data/Neutral/800": "#191c1f", + "Colors/Data/Neutral/900": "#101214", + "Colors/Data/Neutral/950": "#0c0d0e", + "Colors/Palette Library/Gray blue/25": "#fcfcfd", + "Colors/Palette Library/Gray blue/50": "#f8f9fc", + "Colors/Palette Library/Gray blue/100": "#eaecf5", + "Colors/Palette Library/Gray blue/200": "#d5d9eb", + "Colors/Palette Library/Gray blue/300": "#b3b8db", + "Colors/Palette Library/Gray blue/400": "#717bbc", + "Colors/Palette Library/Gray blue/500": "#4e5ba6", + "Colors/Palette Library/Gray blue/600": "#3e4784", + "Colors/Palette Library/Gray blue/700": "#363f72", + "Colors/Palette Library/Gray blue/800": "#293056", + "Colors/Palette Library/Gray blue/900": "#101323", + "Colors/Palette Library/Gray blue/950": "#0d0f1c", + "Colors/Palette Library/Gray cool/25": "#fcfcfd", + "Colors/Palette Library/Gray cool/50": "#f9f9fb", + "Colors/Palette Library/Gray cool/100": "#eff1f5", + "Colors/Palette Library/Gray cool/200": "#dcdfea", + "Colors/Palette Library/Gray cool/300": "#b9c0d4", + "Colors/Palette Library/Gray cool/400": "#7d89b0", + "Colors/Palette Library/Gray cool/500": "#5d6b98", + "Colors/Palette Library/Gray cool/600": "#4a5578", + "Colors/Palette Library/Gray cool/700": "#404968", + "Colors/Palette Library/Gray cool/800": "#30374f", + "Colors/Palette Library/Gray cool/900": "#111322", + "Colors/Palette Library/Gray cool/950": "#0e101b", + "Colors/Palette Library/Gray modern/25": "#fcfcfd", + "Colors/Palette Library/Gray modern/50": "#f8fafc", + "Colors/Palette Library/Gray modern/100": "#eef2f6", + "Colors/Palette Library/Gray modern/200": "#e3e8ef", + "Colors/Palette Library/Gray modern/300": "#cdd5df", + "Colors/Palette Library/Gray modern/400": "#9aa4b2", + "Colors/Palette Library/Gray modern/500": "#697586", + "Colors/Palette Library/Gray modern/600": "#4b5565", + "Colors/Palette Library/Gray modern/700": "#364152", + "Colors/Palette Library/Gray modern/800": "#202939", + "Colors/Palette Library/Gray modern/900": "#121926", + "Colors/Palette Library/Gray modern/950": "#0d121c", + "Colors/Palette Library/Gray neutral/25": "#fcfcfd", + "Colors/Palette Library/Gray neutral/50": "#f9fafb", + "Colors/Palette Library/Gray neutral/100": "#f3f4f6", + "Colors/Palette Library/Gray neutral/200": "#e5e7eb", + "Colors/Palette Library/Gray neutral/300": "#d2d6db", + "Colors/Palette Library/Gray neutral/400": "#9da4ae", + "Colors/Palette Library/Gray neutral/500": "#6c737f", + "Colors/Palette Library/Gray neutral/600": "#4d5761", + "Colors/Palette Library/Gray neutral/700": "#384250", + "Colors/Palette Library/Gray neutral/800": "#1f2a37", + "Colors/Palette Library/Gray neutral/900": "#111927", + "Colors/Palette Library/Gray neutral/950": "#0d121c", + "Colors/Palette Library/Green/25": "#f6fef9", + "Colors/Palette Library/Green/50": "#edfcf2", + "Colors/Palette Library/Green/100": "#d3f8df", + "Colors/Palette Library/Green/200": "#aaf0c4", + "Colors/Palette Library/Green/300": "#73e2a3", + "Colors/Palette Library/Green/400": "#3ccb7f", + "Colors/Palette Library/Green/500": "#16b364", + "Colors/Palette Library/Green/600": "#099250", + "Colors/Palette Library/Green/700": "#087443", + "Colors/Palette Library/Green/800": "#095c37", + "Colors/Palette Library/Green/900": "#084c2e", + "Colors/Palette Library/Green/950": "#052e1c", + "Colors/Palette Library/Gray iron/25": "#fcfcfc", + "Colors/Palette Library/Gray iron/50": "#fafafa", + "Colors/Palette Library/Gray iron/100": "#f4f4f5", + "Colors/Palette Library/Gray iron/200": "#e4e4e7", + "Colors/Palette Library/Gray iron/300": "#d1d1d6", + "Colors/Palette Library/Gray iron/400": "#a0a0ab", + "Colors/Palette Library/Gray iron/500": "#70707b", + "Colors/Palette Library/Gray iron/600": "#51525c", + "Colors/Palette Library/Gray iron/700": "#3f3f46", + "Colors/Palette Library/Gray iron/800": "#26272b", + "Colors/Palette Library/Gray iron/900": "#1a1a1e", + "Colors/Palette Library/Gray iron/950": "#131316", + "Colors/Palette Library/Gray true/25": "#fcfcfc", + "Colors/Palette Library/Gray true/50": "#f7f7f7", + "Colors/Palette Library/Gray true/100": "#f5f5f5", + "Colors/Palette Library/Gray true/200": "#e5e5e5", + "Colors/Palette Library/Gray true/300": "#d6d6d6", + "Colors/Palette Library/Gray true/400": "#a3a3a3", + "Colors/Palette Library/Gray true/500": "#737373", + "Colors/Palette Library/Gray true/600": "#525252", + "Colors/Palette Library/Gray true/700": "#424242", + "Colors/Palette Library/Gray true/800": "#292929", + "Colors/Palette Library/Gray true/900": "#141414", + "Colors/Palette Library/Gray true/950": "#0f0f0f", + "Colors/Palette Library/Gray warm/25": "#fdfdfc", + "Colors/Palette Library/Gray warm/50": "#fafaf9", + "Colors/Palette Library/Gray warm/100": "#f5f5f4", + "Colors/Palette Library/Gray warm/200": "#e7e5e4", + "Colors/Palette Library/Gray warm/300": "#d7d3d0", + "Colors/Palette Library/Gray warm/400": "#a9a29d", + "Colors/Palette Library/Gray warm/500": "#79716b", + "Colors/Palette Library/Gray warm/600": "#57534e", + "Colors/Palette Library/Gray warm/700": "#44403c", + "Colors/Palette Library/Gray warm/800": "#292524", + "Colors/Palette Library/Gray warm/900": "#1c1917", + "Colors/Palette Library/Gray warm/950": "#171412", + "Colors/Palette Library/Moss/25": "#fafdf7", + "Colors/Palette Library/Moss/50": "#f5fbee", + "Colors/Palette Library/Moss/100": "#e6f4d7", + "Colors/Palette Library/Moss/200": "#ceeab0", + "Colors/Palette Library/Moss/300": "#acdc79", + "Colors/Palette Library/Moss/400": "#86cb3c", + "Colors/Palette Library/Moss/500": "#669f2a", + "Colors/Palette Library/Moss/600": "#4f7a21", + "Colors/Palette Library/Moss/700": "#3f621a", + "Colors/Palette Library/Moss/800": "#335015", + "Colors/Palette Library/Moss/900": "#2b4212", + "Colors/Palette Library/Moss/950": "#1a280b", + "Colors/Palette Library/Green light/25": "#fafef5", + "Colors/Palette Library/Green light/50": "#f3fee7", + "Colors/Palette Library/Green light/100": "#e3fbcc", + "Colors/Palette Library/Green light/200": "#d0f8ab", + "Colors/Palette Library/Green light/300": "#a6ef67", + "Colors/Palette Library/Green light/400": "#85e13a", + "Colors/Palette Library/Green light/500": "#66c61c", + "Colors/Palette Library/Green light/600": "#4ca30d", + "Colors/Palette Library/Green light/700": "#3b7c0f", + "Colors/Palette Library/Green light/800": "#326212", + "Colors/Palette Library/Green light/900": "#2b5314", + "Colors/Palette Library/Green light/950": "#15290a", + "Colors/Palette Library/Teal/25": "#f6fefc", + "Colors/Palette Library/Teal/50": "#f0fdf9", + "Colors/Palette Library/Teal/100": "#ccfbef", + "Colors/Palette Library/Teal/200": "#99f6e0", + "Colors/Palette Library/Teal/300": "#5fe9d0", + "Colors/Palette Library/Teal/400": "#2ed3b7", + "Colors/Palette Library/Teal/500": "#15b79e", + "Colors/Palette Library/Teal/600": "#0e9384", + "Colors/Palette Library/Teal/700": "#107569", + "Colors/Palette Library/Teal/800": "#125d56", + "Colors/Palette Library/Teal/900": "#134e48", + "Colors/Palette Library/Teal/950": "#0a2926", + "Colors/Palette Library/Cyan/25": "#f5feff", + "Colors/Palette Library/Cyan/50": "#ecfdff", + "Colors/Palette Library/Cyan/100": "#cff9fe", + "Colors/Palette Library/Cyan/200": "#a5f0fc", + "Colors/Palette Library/Cyan/300": "#67e3f9", + "Colors/Palette Library/Cyan/400": "#22ccee", + "Colors/Palette Library/Cyan/500": "#06aed4", + "Colors/Palette Library/Cyan/600": "#088ab2", + "Colors/Palette Library/Cyan/700": "#0e7090", + "Colors/Palette Library/Cyan/800": "#155b75", + "Colors/Palette Library/Cyan/900": "#164c63", + "Colors/Palette Library/Cyan/950": "#0d2d3a", + "Colors/Palette Library/Blue light/25": "#f5fbff", + "Colors/Palette Library/Blue light/50": "#f0f9ff", + "Colors/Palette Library/Blue light/100": "#e0f2fe", + "Colors/Palette Library/Blue light/200": "#b9e6fe", + "Colors/Palette Library/Blue light/300": "#7cd4fd", + "Colors/Palette Library/Blue light/400": "#36bffa", + "Colors/Palette Library/Blue light/500": "#0ba5ec", + "Colors/Palette Library/Blue light/600": "#0086c9", + "Colors/Palette Library/Blue light/700": "#026aa2", + "Colors/Palette Library/Blue light/800": "#065986", + "Colors/Palette Library/Blue light/900": "#0b4a6f", + "Colors/Palette Library/Blue light/950": "#062c41", + "Colors/Palette Library/Blue/25": "#f5faff", + "Colors/Palette Library/Blue/50": "#eff8ff", + "Colors/Palette Library/Blue/100": "#d1e9ff", + "Colors/Palette Library/Blue/200": "#b2ddff", + "Colors/Palette Library/Blue/300": "#84caff", + "Colors/Palette Library/Blue/400": "#53b1fd", + "Colors/Palette Library/Blue/500": "#2e90fa", + "Colors/Palette Library/Blue/600": "#1570ef", + "Colors/Palette Library/Blue/700": "#175cd3", + "Colors/Palette Library/Blue/800": "#1849a9", + "Colors/Palette Library/Blue/900": "#194185", + "Colors/Palette Library/Blue/950": "#102a56", + "Colors/Palette Library/Blue dark/25": "#f5f8ff", + "Colors/Palette Library/Blue dark/50": "#eff4ff", + "Colors/Palette Library/Blue dark/100": "#d1e0ff", + "Colors/Palette Library/Blue dark/200": "#b2ccff", + "Colors/Palette Library/Blue dark/300": "#84adff", + "Colors/Palette Library/Blue dark/400": "#528bff", + "Colors/Palette Library/Blue dark/500": "#2970ff", + "Colors/Palette Library/Blue dark/600": "#155eef", + "Colors/Palette Library/Blue dark/700": "#004eeb", + "Colors/Palette Library/Blue dark/800": "#0040c1", + "Colors/Palette Library/Blue dark/900": "#00359e", + "Colors/Palette Library/Blue dark/950": "#002266", + "Colors/Palette Library/Indigo/25": "#f5f8ff", + "Colors/Palette Library/Indigo/50": "#eef4ff", + "Colors/Palette Library/Indigo/100": "#e0eaff", + "Colors/Palette Library/Indigo/200": "#c7d7fe", + "Colors/Palette Library/Indigo/300": "#a4bcfd", + "Colors/Palette Library/Indigo/400": "#8098f9", + "Colors/Palette Library/Indigo/500": "#6172f3", + "Colors/Palette Library/Indigo/600": "#444ce7", + "Colors/Palette Library/Indigo/700": "#3538cd", + "Colors/Palette Library/Indigo/800": "#2d31a6", + "Colors/Palette Library/Indigo/900": "#2d3282", + "Colors/Palette Library/Indigo/950": "#1f235b", + "Colors/Palette Library/Violet/25": "#fbfaff", + "Colors/Palette Library/Violet/50": "#f5f3ff", + "Colors/Palette Library/Violet/100": "#ece9fe", + "Colors/Palette Library/Violet/200": "#ddd6fe", + "Colors/Palette Library/Violet/300": "#c3b5fd", + "Colors/Palette Library/Violet/400": "#a48afb", + "Colors/Palette Library/Violet/500": "#875bf7", + "Colors/Palette Library/Violet/600": "#7839ee", + "Colors/Palette Library/Violet/700": "#6927da", + "Colors/Palette Library/Violet/800": "#5720b7", + "Colors/Palette Library/Violet/900": "#491c96", + "Colors/Palette Library/Violet/950": "#2e125e", + "Colors/Palette Library/Purple/25": "#fafaff", + "Colors/Palette Library/Purple/50": "#f4f3ff", + "Colors/Palette Library/Purple/100": "#ebe9fe", + "Colors/Palette Library/Purple/200": "#d9d6fe", + "Colors/Palette Library/Purple/300": "#bdb4fe", + "Colors/Palette Library/Purple/400": "#9b8afb", + "Colors/Palette Library/Purple/500": "#7a5af8", + "Colors/Palette Library/Purple/600": "#6938ef", + "Colors/Palette Library/Purple/700": "#5925dc", + "Colors/Palette Library/Purple/800": "#4a1fb8", + "Colors/Palette Library/Purple/900": "#3e1c96", + "Colors/Palette Library/Purple/950": "#27115f", + "Colors/Palette Library/Fuchsia/25": "#fefaff", + "Colors/Palette Library/Fuchsia/50": "#fdf4ff", + "Colors/Palette Library/Fuchsia/100": "#fbe8ff", + "Colors/Palette Library/Fuchsia/200": "#f6d0fe", + "Colors/Palette Library/Fuchsia/300": "#eeaafd", + "Colors/Palette Library/Fuchsia/400": "#e478fa", + "Colors/Palette Library/Fuchsia/500": "#d444f1", + "Colors/Palette Library/Fuchsia/600": "#ba24d5", + "Colors/Palette Library/Fuchsia/700": "#9f1ab1", + "Colors/Palette Library/Fuchsia/800": "#821890", + "Colors/Palette Library/Fuchsia/900": "#6f1877", + "Colors/Palette Library/Fuchsia/950": "#47104c", + "Colors/Palette Library/Pink/25": "#fef6fb", + "Colors/Palette Library/Pink/50": "#fdf2fa", + "Colors/Palette Library/Pink/100": "#fce7f6", + "Colors/Palette Library/Pink/200": "#fcceee", + "Colors/Palette Library/Pink/300": "#faa7e0", + "Colors/Palette Library/Pink/400": "#f670c7", + "Colors/Palette Library/Pink/500": "#ee46bc", + "Colors/Palette Library/Pink/600": "#dd2590", + "Colors/Palette Library/Pink/700": "#c11574", + "Colors/Palette Library/Pink/800": "#9e165f", + "Colors/Palette Library/Pink/900": "#851651", + "Colors/Palette Library/Pink/950": "#4e0d30", + "Colors/Palette Library/Rosé/25": "#fff5f6", + "Colors/Palette Library/Rosé/50": "#fff1f3", + "Colors/Palette Library/Rosé/100": "#ffe4e8", + "Colors/Palette Library/Rosé/200": "#fecdd6", + "Colors/Palette Library/Rosé/300": "#fea3b4", + "Colors/Palette Library/Rosé/400": "#fd6f8e", + "Colors/Palette Library/Rosé/500": "#f63d68", + "Colors/Palette Library/Rosé/600": "#e31b54", + "Colors/Palette Library/Rosé/700": "#c01048", + "Colors/Palette Library/Rosé/800": "#a11043", + "Colors/Palette Library/Rosé/900": "#89123e", + "Colors/Palette Library/Rosé/950": "#510b24", + "Colors/Palette Library/Orange dark/25": "#fff9f5", + "Colors/Palette Library/Orange dark/50": "#fff4ed", + "Colors/Palette Library/Orange dark/100": "#ffe6d5", + "Colors/Palette Library/Orange dark/200": "#ffd6ae", + "Colors/Palette Library/Orange dark/300": "#ff9c66", + "Colors/Palette Library/Orange dark/400": "#ff692e", + "Colors/Palette Library/Orange dark/500": "#ff4405", + "Colors/Palette Library/Orange dark/600": "#e62e05", + "Colors/Palette Library/Orange dark/700": "#bc1b06", + "Colors/Palette Library/Orange dark/800": "#97180c", + "Colors/Palette Library/Orange dark/900": "#771a0d", + "Colors/Palette Library/Orange dark/950": "#57130a", + "Colors/Palette Library/Orange/25": "#fefaf5", + "Colors/Palette Library/Orange/50": "#fef6ee", + "Colors/Palette Library/Orange/100": "#fdead7", + "Colors/Palette Library/Orange/200": "#f9dbaf", + "Colors/Palette Library/Orange/300": "#f7b27a", + "Colors/Palette Library/Orange/400": "#f38744", + "Colors/Palette Library/Orange/500": "#ef6820", + "Colors/Palette Library/Orange/600": "#e04f16", + "Colors/Palette Library/Orange/700": "#b93815", + "Colors/Palette Library/Orange/800": "#932f19", + "Colors/Palette Library/Orange/900": "#772917", + "Colors/Palette Library/Orange/950": "#511c10", + "Colors/Palette Library/Yellow/25": "#fefdf0", + "Colors/Palette Library/Yellow/50": "#fefbe8", + "Colors/Palette Library/Yellow/100": "#fef7c3", + "Colors/Palette Library/Yellow/200": "#feee95", + "Colors/Palette Library/Yellow/300": "#fde272", + "Colors/Palette Library/Yellow/400": "#fac515", + "Colors/Palette Library/Yellow/500": "#eaaa08", + "Colors/Palette Library/Yellow/600": "#ca8504", + "Colors/Palette Library/Yellow/700": "#a15c07", + "Colors/Palette Library/Yellow/800": "#854a0e", + "Colors/Palette Library/Yellow/900": "#713b12", + "Colors/Palette Library/Yellow/950": "#542c0d", + "Spacing/0": 0, + "Spacing/1": 4, + "Spacing/2": 8, + "Spacing/3": 12, + "Spacing/4": 16, + "Spacing/5": 20, + "Spacing/6": 24, + "Spacing/8": 32, + "Spacing/10": 40, + "Spacing/12": 48, + "Spacing/16": 64, + "Spacing/20": 80, + "Spacing/24": 96, + "Spacing/32": 128, + "Spacing/40": 160, + "Spacing/48": 192, + "Spacing/56": 224, + "Spacing/64": 256, + "Spacing/80": 320, + "Spacing/96": 384, + "Spacing/120": 480, + "Spacing/140": 560, + "Spacing/160": 640, + "Spacing/180": 720, + "Spacing/192": 768, + "Spacing/256": 1024, + "Spacing/320": 1280, + "Spacing/360": 1440, + "Spacing/400": 1600, + "Spacing/480": 1920, + "Spacing/0-5": 2, + "Spacing/1-5": 6, + "Colors/Palette Library/Gray true/850": "#1f1f1f", + "Colors/Dark mode/850": "#1f1f1f", + "Colors/Palette Library/Pewter/500": "#969b99", + "Colors/Palette Library/Pewter/50": "#f5f5f5", + "Colors/Palette Library/Pewter/100": "#eaebeb", + "Colors/Palette Library/Pewter/300": "#c0c3c2", + "Colors/Palette Library/Pewter/200": "#d5d7d6", + "Colors/Palette Library/Pewter/400": "#abafae", + "Colors/Palette Library/Pewter/600": "#777d7b", + "Colors/Palette Library/Pewter/700": "#5a5e5c", + "Colors/Palette Library/Pewter/800": "#3c3f3d", + "Colors/Palette Library/Pewter/900": "#1e1f1f", + "Colors/Palette Library/Pewter/950": "#0f100f", + "Colors/Palette Library/Carbon/500": "#222222", + "Colors/Palette Library/Carbon/50": "#e8e8e8", + "Colors/Palette Library/Carbon/100": "#d4d4d4", + "Colors/Palette Library/Carbon/200": "#a6a6a6", + "Colors/Palette Library/Carbon/300": "#7a7a7a", + "Colors/Palette Library/Carbon/400": "#4f4f4f", + "Colors/Palette Library/Carbon/600": "#1c1c1c", + "Colors/Palette Library/Carbon/700": "#141414", + "Colors/Palette Library/Carbon/800": "#0d0d0d", + "Colors/Palette Library/Carbon/900": "#080808", + "Colors/Palette Library/Carbon/950": "#030303", + "Colors/Palette Library/Granite/500": "#333333", + "Colors/Palette Library/Granite/50": "#ebebeb", + "Colors/Palette Library/Granite/100": "#d6d6d6", + "Colors/Palette Library/Granite/200": "#adadad", + "Colors/Palette Library/Granite/300": "#858585", + "Colors/Palette Library/Granite/400": "#5c5c5c", + "Colors/Palette Library/Granite/600": "#292929", + "Colors/Palette Library/Granite/700": "#1f1f1f", + "Colors/Palette Library/Granite/800": "#141414", + "Colors/Palette Library/Granite/900": "#0a0a0a", + "Colors/Palette Library/Granite/950": "#050505", + "Colors/Palette Library/Titanium/500": "#505050", + "Colors/Palette Library/Titanium/50": "#ededed", + "Colors/Palette Library/Titanium/100": "#dbdbdb", + "Colors/Palette Library/Titanium/200": "#bababa", + "Colors/Palette Library/Titanium/300": "#969696", + "Colors/Palette Library/Titanium/400": "#737373", + "Colors/Palette Library/Titanium/600": "#404040", + "Colors/Palette Library/Titanium/700": "#303030", + "Colors/Palette Library/Titanium/800": "#212121", + "Colors/Palette Library/Titanium/900": "#0f0f0f", + "Colors/Palette Library/Titanium/950": "#080808", + "Colors/Palette Library/Steel/500": "#e1e1e1", + "Colors/Palette Library/Steel/50": "#fcfcfc", + "Colors/Palette Library/Steel/100": "#fafafa", + "Colors/Palette Library/Steel/200": "#f2f2f2", + "Colors/Palette Library/Steel/300": "#ededed", + "Colors/Palette Library/Steel/400": "#e8e8e8", + "Colors/Palette Library/Steel/600": "#b5b5b5", + "Colors/Palette Library/Steel/700": "#878787", + "Colors/Palette Library/Steel/800": "#595959", + "Colors/Palette Library/Steel/900": "#2e2e2e", + "Colors/Palette Library/Steel/950": "#171717", + "Colors/Palette Library/Off White/500": "#f4f4f4", + "Colors/Palette Library/Off White/50": "#ffffff", + "Colors/Palette Library/Off White/100": "#fcfcfc", + "Colors/Palette Library/Off White/200": "#fafafa", + "Colors/Palette Library/Off White/300": "#f7f7f7", + "Colors/Palette Library/Off White/400": "#f7f7f7", + "Colors/Palette Library/Off White/600": "#c4c4c4", + "Colors/Palette Library/Off White/700": "#919191", + "Colors/Palette Library/Off White/800": "#616161", + "Colors/Palette Library/Off White/900": "#303030", + "Colors/Palette Library/Off White/950": "#1a1a1a", + }, + Aeron: { + "Colors/Base/white": "#ffffff", + "Colors/Base/black": "#000000", + "Colors/Base/transparent": "#ffffff00", + "Colors/Light mode/25": "#fcfcfc", + "Colors/Light mode/50": "#f7f7f7", + "Colors/Light mode/100": "#f5f5f5", + "Colors/Light mode/200": "#e5e5e5", + "Colors/Light mode/300": "#d6d6d6", + "Colors/Light mode/400": "#a3a3a3", + "Colors/Light mode/500": "#737373", + "Colors/Light mode/600": "#525252", + "Colors/Light mode/700": "#424242", + "Colors/Light mode/800": "#292929", + "Colors/Light mode/900": "#141414", + "Colors/Light mode/950": "#0f0f0f", + "Colors/Dark mode/25": "#fcfcfc", + "Colors/Dark mode/50": "#f7f7f7", + "Colors/Dark mode/100": "#f5f5f5", + "Colors/Dark mode/200": "#e5e5e5", + "Colors/Dark mode/300": "#d6d6d6", + "Colors/Dark mode/400": "#a3a3a3", + "Colors/Dark mode/500": "#737373", + "Colors/Dark mode/600": "#525252", + "Colors/Dark mode/700": "#424242", + "Colors/Dark mode/800": "#292929", + "Colors/Dark mode/900": "#141414", + "Colors/Dark mode/950": "#0f0f0f", + "Colors/Brand Primary/25": "#f2fdf8", + "Colors/Brand Primary/50": "#e9fbf3", + "Colors/Brand Primary/100": "#d3f8e7", + "Colors/Brand Primary/200": "#a3f0cd", + "Colors/Brand Primary/300": "#77e9b6", + "Colors/Brand Primary/400": "#47e19c", + "Colors/Brand Primary/500": "#22d081", + "Colors/Brand Primary/600": "#1ba768", + "Colors/Brand Primary/700": "#157f4f", + "Colors/Brand Primary/800": "#0e5334", + "Colors/Brand Primary/900": "#072c1b", + "Colors/Brand Primary/950": "#04160e", + "Colors/Brand Secondary/25": "#f2f3fe", + "Colors/Brand Secondary/50": "#e6e6fe", + "Colors/Brand Secondary/100": "#d9dafd", + "Colors/Brand Secondary/200": "#c0c2fc", + "Colors/Brand Secondary/300": "#a7a9fa", + "Colors/Brand Secondary/400": "#8e90f9", + "Colors/Brand Secondary/500": "#8184f8", + "Colors/Brand Secondary/600": "#4d4f95", + "Colors/Brand Secondary/700": "#41427c", + "Colors/Brand Secondary/800": "#27284a", + "Colors/Brand Secondary/900": "#0d0d19", + "Colors/Brand Secondary/950": "#28040a", + "Colors/Error/25": "#fcf3f4", + "Colors/Error/50": "#f9e7ea", + "Colors/Error/100": "#f3d0d6", + "Colors/Error/200": "#e28897", + "Colors/Error/300": "#d14159", + "Colors/Error/400": "#c41230", + "Colors/Error/500": "#a50e28", + "Colors/Error/600": "#890c21", + "Colors/Error/700": "#6d091a", + "Colors/Error/800": "#500713", + "Colors/Error/900": "#34040d", + "Colors/Error/950": "#34040d", + "Colors/Warning/25": "#fffcf5", + "Colors/Warning/50": "#fffaeb", + "Colors/Warning/100": "#fef0c7", + "Colors/Warning/200": "#fedf89", + "Colors/Warning/300": "#fec84b", + "Colors/Warning/400": "#fdb022", + "Colors/Warning/500": "#f79009", + "Colors/Warning/600": "#dc6803", + "Colors/Warning/700": "#b54708", + "Colors/Warning/800": "#93370d", + "Colors/Warning/900": "#7a2e0e", + "Colors/Warning/950": "#4e1d09", + "Colors/Success/25": "#f6fef9", + "Colors/Success/50": "#ecfdf3", + "Colors/Success/100": "#dcfae6", + "Colors/Success/200": "#abefc6", + "Colors/Success/300": "#75e0a7", + "Colors/Success/400": "#47cd89", + "Colors/Success/500": "#17b26a", + "Colors/Success/600": "#079455", + "Colors/Success/700": "#067647", + "Colors/Success/800": "#085d3a", + "Colors/Success/900": "#074d31", + "Colors/Success/950": "#053321", + "Colors/Data/Positive/25": "#f6fef9", + "Colors/Data/Positive/50": "#ecfdf3", + "Colors/Data/Positive/100": "#dcfae6", + "Colors/Data/Positive/200": "#abefc6", + "Colors/Data/Positive/300": "#75e0a7", + "Colors/Data/Positive/400": "#47cd89", + "Colors/Data/Positive/500": "#17b26a", + "Colors/Data/Positive/600": "#079455", + "Colors/Data/Positive/700": "#067647", + "Colors/Data/Positive/800": "#085d3a", + "Colors/Data/Positive/900": "#074d31", + "Colors/Data/Positive/950": "#053321", + "Colors/Data/Negative/25": "#f5e0e0", + "Colors/Data/Negative/50": "#f0d1d1", + "Colors/Data/Negative/100": "#d98b8b", + "Colors/Data/Negative/200": "#c34646", + "Colors/Data/Negative/300": "#b41818", + "Colors/Data/Negative/400": "#9c0000", + "Colors/Data/Negative/500": "#880000", + "Colors/Data/Negative/600": "#730000", + "Colors/Data/Negative/700": "#5f0000", + "Colors/Data/Negative/800": "#4a0000", + "Colors/Data/Negative/900": "#360000", + "Colors/Data/Negative/950": "#2c0000", + "Colors/Data/Neutral/25": "#e7e8e9", + "Colors/Data/Neutral/50": "#dcdedf", + "Colors/Data/Neutral/100": "#a7abaf", + "Colors/Data/Neutral/200": "#73797f", + "Colors/Data/Neutral/300": "#50585f", + "Colors/Data/Neutral/400": "#3e454c", + "Colors/Data/Neutral/500": "#353b41", + "Colors/Data/Neutral/600": "#2c3136", + "Colors/Data/Neutral/700": "#23262a", + "Colors/Data/Neutral/800": "#191c1f", + "Colors/Data/Neutral/900": "#101214", + "Colors/Data/Neutral/950": "#0c0d0e", + "Colors/Palette Library/Gray blue/25": "#fcfcfd", + "Colors/Palette Library/Gray blue/50": "#f8f9fc", + "Colors/Palette Library/Gray blue/100": "#eaecf5", + "Colors/Palette Library/Gray blue/200": "#d5d9eb", + "Colors/Palette Library/Gray blue/300": "#b3b8db", + "Colors/Palette Library/Gray blue/400": "#717bbc", + "Colors/Palette Library/Gray blue/500": "#4e5ba6", + "Colors/Palette Library/Gray blue/600": "#3e4784", + "Colors/Palette Library/Gray blue/700": "#363f72", + "Colors/Palette Library/Gray blue/800": "#293056", + "Colors/Palette Library/Gray blue/900": "#101323", + "Colors/Palette Library/Gray blue/950": "#0d0f1c", + "Colors/Palette Library/Gray cool/25": "#fcfcfd", + "Colors/Palette Library/Gray cool/50": "#f9f9fb", + "Colors/Palette Library/Gray cool/100": "#eff1f5", + "Colors/Palette Library/Gray cool/200": "#dcdfea", + "Colors/Palette Library/Gray cool/300": "#b9c0d4", + "Colors/Palette Library/Gray cool/400": "#7d89b0", + "Colors/Palette Library/Gray cool/500": "#5d6b98", + "Colors/Palette Library/Gray cool/600": "#4a5578", + "Colors/Palette Library/Gray cool/700": "#404968", + "Colors/Palette Library/Gray cool/800": "#30374f", + "Colors/Palette Library/Gray cool/900": "#111322", + "Colors/Palette Library/Gray cool/950": "#0e101b", + "Colors/Palette Library/Gray modern/25": "#fcfcfd", + "Colors/Palette Library/Gray modern/50": "#f8fafc", + "Colors/Palette Library/Gray modern/100": "#eef2f6", + "Colors/Palette Library/Gray modern/200": "#e3e8ef", + "Colors/Palette Library/Gray modern/300": "#cdd5df", + "Colors/Palette Library/Gray modern/400": "#9aa4b2", + "Colors/Palette Library/Gray modern/500": "#697586", + "Colors/Palette Library/Gray modern/600": "#4b5565", + "Colors/Palette Library/Gray modern/700": "#364152", + "Colors/Palette Library/Gray modern/800": "#202939", + "Colors/Palette Library/Gray modern/900": "#121926", + "Colors/Palette Library/Gray modern/950": "#0d121c", + "Colors/Palette Library/Gray neutral/25": "#fcfcfd", + "Colors/Palette Library/Gray neutral/50": "#f9fafb", + "Colors/Palette Library/Gray neutral/100": "#f3f4f6", + "Colors/Palette Library/Gray neutral/200": "#e5e7eb", + "Colors/Palette Library/Gray neutral/300": "#d2d6db", + "Colors/Palette Library/Gray neutral/400": "#9da4ae", + "Colors/Palette Library/Gray neutral/500": "#6c737f", + "Colors/Palette Library/Gray neutral/600": "#4d5761", + "Colors/Palette Library/Gray neutral/700": "#384250", + "Colors/Palette Library/Gray neutral/800": "#1f2a37", + "Colors/Palette Library/Gray neutral/900": "#111927", + "Colors/Palette Library/Gray neutral/950": "#0d121c", + "Colors/Palette Library/Green/25": "#f6fef9", + "Colors/Palette Library/Green/50": "#edfcf2", + "Colors/Palette Library/Green/100": "#d3f8df", + "Colors/Palette Library/Green/200": "#aaf0c4", + "Colors/Palette Library/Green/300": "#73e2a3", + "Colors/Palette Library/Green/400": "#3ccb7f", + "Colors/Palette Library/Green/500": "#16b364", + "Colors/Palette Library/Green/600": "#099250", + "Colors/Palette Library/Green/700": "#087443", + "Colors/Palette Library/Green/800": "#095c37", + "Colors/Palette Library/Green/900": "#084c2e", + "Colors/Palette Library/Green/950": "#052e1c", + "Colors/Palette Library/Gray iron/25": "#fcfcfc", + "Colors/Palette Library/Gray iron/50": "#fafafa", + "Colors/Palette Library/Gray iron/100": "#f4f4f5", + "Colors/Palette Library/Gray iron/200": "#e4e4e7", + "Colors/Palette Library/Gray iron/300": "#d1d1d6", + "Colors/Palette Library/Gray iron/400": "#a0a0ab", + "Colors/Palette Library/Gray iron/500": "#70707b", + "Colors/Palette Library/Gray iron/600": "#51525c", + "Colors/Palette Library/Gray iron/700": "#3f3f46", + "Colors/Palette Library/Gray iron/800": "#26272b", + "Colors/Palette Library/Gray iron/900": "#1a1a1e", + "Colors/Palette Library/Gray iron/950": "#131316", + "Colors/Palette Library/Gray true/25": "#fcfcfc", + "Colors/Palette Library/Gray true/50": "#f7f7f7", + "Colors/Palette Library/Gray true/100": "#f5f5f5", + "Colors/Palette Library/Gray true/200": "#e5e5e5", + "Colors/Palette Library/Gray true/300": "#d6d6d6", + "Colors/Palette Library/Gray true/400": "#a3a3a3", + "Colors/Palette Library/Gray true/500": "#737373", + "Colors/Palette Library/Gray true/600": "#525252", + "Colors/Palette Library/Gray true/700": "#424242", + "Colors/Palette Library/Gray true/800": "#292929", + "Colors/Palette Library/Gray true/900": "#141414", + "Colors/Palette Library/Gray true/950": "#0f0f0f", + "Colors/Palette Library/Gray warm/25": "#fdfdfc", + "Colors/Palette Library/Gray warm/50": "#fafaf9", + "Colors/Palette Library/Gray warm/100": "#f5f5f4", + "Colors/Palette Library/Gray warm/200": "#e7e5e4", + "Colors/Palette Library/Gray warm/300": "#d7d3d0", + "Colors/Palette Library/Gray warm/400": "#a9a29d", + "Colors/Palette Library/Gray warm/500": "#79716b", + "Colors/Palette Library/Gray warm/600": "#57534e", + "Colors/Palette Library/Gray warm/700": "#44403c", + "Colors/Palette Library/Gray warm/800": "#292524", + "Colors/Palette Library/Gray warm/900": "#1c1917", + "Colors/Palette Library/Gray warm/950": "#171412", + "Colors/Palette Library/Moss/25": "#fafdf7", + "Colors/Palette Library/Moss/50": "#f5fbee", + "Colors/Palette Library/Moss/100": "#e6f4d7", + "Colors/Palette Library/Moss/200": "#ceeab0", + "Colors/Palette Library/Moss/300": "#acdc79", + "Colors/Palette Library/Moss/400": "#86cb3c", + "Colors/Palette Library/Moss/500": "#669f2a", + "Colors/Palette Library/Moss/600": "#4f7a21", + "Colors/Palette Library/Moss/700": "#3f621a", + "Colors/Palette Library/Moss/800": "#335015", + "Colors/Palette Library/Moss/900": "#2b4212", + "Colors/Palette Library/Moss/950": "#1a280b", + "Colors/Palette Library/Green light/25": "#fafef5", + "Colors/Palette Library/Green light/50": "#f3fee7", + "Colors/Palette Library/Green light/100": "#e3fbcc", + "Colors/Palette Library/Green light/200": "#d0f8ab", + "Colors/Palette Library/Green light/300": "#a6ef67", + "Colors/Palette Library/Green light/400": "#85e13a", + "Colors/Palette Library/Green light/500": "#66c61c", + "Colors/Palette Library/Green light/600": "#4ca30d", + "Colors/Palette Library/Green light/700": "#3b7c0f", + "Colors/Palette Library/Green light/800": "#326212", + "Colors/Palette Library/Green light/900": "#2b5314", + "Colors/Palette Library/Green light/950": "#15290a", + "Colors/Palette Library/Teal/25": "#f6fefc", + "Colors/Palette Library/Teal/50": "#f0fdf9", + "Colors/Palette Library/Teal/100": "#ccfbef", + "Colors/Palette Library/Teal/200": "#99f6e0", + "Colors/Palette Library/Teal/300": "#5fe9d0", + "Colors/Palette Library/Teal/400": "#2ed3b7", + "Colors/Palette Library/Teal/500": "#15b79e", + "Colors/Palette Library/Teal/600": "#0e9384", + "Colors/Palette Library/Teal/700": "#107569", + "Colors/Palette Library/Teal/800": "#125d56", + "Colors/Palette Library/Teal/900": "#134e48", + "Colors/Palette Library/Teal/950": "#0a2926", + "Colors/Palette Library/Cyan/25": "#f5feff", + "Colors/Palette Library/Cyan/50": "#ecfdff", + "Colors/Palette Library/Cyan/100": "#cff9fe", + "Colors/Palette Library/Cyan/200": "#a5f0fc", + "Colors/Palette Library/Cyan/300": "#67e3f9", + "Colors/Palette Library/Cyan/400": "#22ccee", + "Colors/Palette Library/Cyan/500": "#06aed4", + "Colors/Palette Library/Cyan/600": "#088ab2", + "Colors/Palette Library/Cyan/700": "#0e7090", + "Colors/Palette Library/Cyan/800": "#155b75", + "Colors/Palette Library/Cyan/900": "#164c63", + "Colors/Palette Library/Cyan/950": "#0d2d3a", + "Colors/Palette Library/Blue light/25": "#f5fbff", + "Colors/Palette Library/Blue light/50": "#f0f9ff", + "Colors/Palette Library/Blue light/100": "#e0f2fe", + "Colors/Palette Library/Blue light/200": "#b9e6fe", + "Colors/Palette Library/Blue light/300": "#7cd4fd", + "Colors/Palette Library/Blue light/400": "#36bffa", + "Colors/Palette Library/Blue light/500": "#0ba5ec", + "Colors/Palette Library/Blue light/600": "#0086c9", + "Colors/Palette Library/Blue light/700": "#026aa2", + "Colors/Palette Library/Blue light/800": "#065986", + "Colors/Palette Library/Blue light/900": "#0b4a6f", + "Colors/Palette Library/Blue light/950": "#062c41", + "Colors/Palette Library/Blue/25": "#f5faff", + "Colors/Palette Library/Blue/50": "#eff8ff", + "Colors/Palette Library/Blue/100": "#d1e9ff", + "Colors/Palette Library/Blue/200": "#b2ddff", + "Colors/Palette Library/Blue/300": "#84caff", + "Colors/Palette Library/Blue/400": "#53b1fd", + "Colors/Palette Library/Blue/500": "#2e90fa", + "Colors/Palette Library/Blue/600": "#1570ef", + "Colors/Palette Library/Blue/700": "#175cd3", + "Colors/Palette Library/Blue/800": "#1849a9", + "Colors/Palette Library/Blue/900": "#194185", + "Colors/Palette Library/Blue/950": "#102a56", + "Colors/Palette Library/Blue dark/25": "#f5f8ff", + "Colors/Palette Library/Blue dark/50": "#eff4ff", + "Colors/Palette Library/Blue dark/100": "#d1e0ff", + "Colors/Palette Library/Blue dark/200": "#b2ccff", + "Colors/Palette Library/Blue dark/300": "#84adff", + "Colors/Palette Library/Blue dark/400": "#528bff", + "Colors/Palette Library/Blue dark/500": "#2970ff", + "Colors/Palette Library/Blue dark/600": "#155eef", + "Colors/Palette Library/Blue dark/700": "#004eeb", + "Colors/Palette Library/Blue dark/800": "#0040c1", + "Colors/Palette Library/Blue dark/900": "#00359e", + "Colors/Palette Library/Blue dark/950": "#002266", + "Colors/Palette Library/Indigo/25": "#f5f8ff", + "Colors/Palette Library/Indigo/50": "#eef4ff", + "Colors/Palette Library/Indigo/100": "#e0eaff", + "Colors/Palette Library/Indigo/200": "#c7d7fe", + "Colors/Palette Library/Indigo/300": "#a4bcfd", + "Colors/Palette Library/Indigo/400": "#8098f9", + "Colors/Palette Library/Indigo/500": "#6172f3", + "Colors/Palette Library/Indigo/600": "#444ce7", + "Colors/Palette Library/Indigo/700": "#3538cd", + "Colors/Palette Library/Indigo/800": "#2d31a6", + "Colors/Palette Library/Indigo/900": "#2d3282", + "Colors/Palette Library/Indigo/950": "#1f235b", + "Colors/Palette Library/Violet/25": "#fbfaff", + "Colors/Palette Library/Violet/50": "#f5f3ff", + "Colors/Palette Library/Violet/100": "#ece9fe", + "Colors/Palette Library/Violet/200": "#ddd6fe", + "Colors/Palette Library/Violet/300": "#c3b5fd", + "Colors/Palette Library/Violet/400": "#a48afb", + "Colors/Palette Library/Violet/500": "#875bf7", + "Colors/Palette Library/Violet/600": "#7839ee", + "Colors/Palette Library/Violet/700": "#6927da", + "Colors/Palette Library/Violet/800": "#5720b7", + "Colors/Palette Library/Violet/900": "#491c96", + "Colors/Palette Library/Violet/950": "#2e125e", + "Colors/Palette Library/Purple/25": "#fafaff", + "Colors/Palette Library/Purple/50": "#f4f3ff", + "Colors/Palette Library/Purple/100": "#ebe9fe", + "Colors/Palette Library/Purple/200": "#d9d6fe", + "Colors/Palette Library/Purple/300": "#bdb4fe", + "Colors/Palette Library/Purple/400": "#9b8afb", + "Colors/Palette Library/Purple/500": "#7a5af8", + "Colors/Palette Library/Purple/600": "#6938ef", + "Colors/Palette Library/Purple/700": "#5925dc", + "Colors/Palette Library/Purple/800": "#4a1fb8", + "Colors/Palette Library/Purple/900": "#3e1c96", + "Colors/Palette Library/Purple/950": "#27115f", + "Colors/Palette Library/Fuchsia/25": "#fefaff", + "Colors/Palette Library/Fuchsia/50": "#fdf4ff", + "Colors/Palette Library/Fuchsia/100": "#fbe8ff", + "Colors/Palette Library/Fuchsia/200": "#f6d0fe", + "Colors/Palette Library/Fuchsia/300": "#eeaafd", + "Colors/Palette Library/Fuchsia/400": "#e478fa", + "Colors/Palette Library/Fuchsia/500": "#d444f1", + "Colors/Palette Library/Fuchsia/600": "#ba24d5", + "Colors/Palette Library/Fuchsia/700": "#9f1ab1", + "Colors/Palette Library/Fuchsia/800": "#821890", + "Colors/Palette Library/Fuchsia/900": "#6f1877", + "Colors/Palette Library/Fuchsia/950": "#47104c", + "Colors/Palette Library/Pink/25": "#fef6fb", + "Colors/Palette Library/Pink/50": "#fdf2fa", + "Colors/Palette Library/Pink/100": "#fce7f6", + "Colors/Palette Library/Pink/200": "#fcceee", + "Colors/Palette Library/Pink/300": "#faa7e0", + "Colors/Palette Library/Pink/400": "#f670c7", + "Colors/Palette Library/Pink/500": "#ee46bc", + "Colors/Palette Library/Pink/600": "#dd2590", + "Colors/Palette Library/Pink/700": "#c11574", + "Colors/Palette Library/Pink/800": "#9e165f", + "Colors/Palette Library/Pink/900": "#851651", + "Colors/Palette Library/Pink/950": "#4e0d30", + "Colors/Palette Library/Rosé/25": "#fff5f6", + "Colors/Palette Library/Rosé/50": "#fff1f3", + "Colors/Palette Library/Rosé/100": "#ffe4e8", + "Colors/Palette Library/Rosé/200": "#fecdd6", + "Colors/Palette Library/Rosé/300": "#fea3b4", + "Colors/Palette Library/Rosé/400": "#fd6f8e", + "Colors/Palette Library/Rosé/500": "#f63d68", + "Colors/Palette Library/Rosé/600": "#e31b54", + "Colors/Palette Library/Rosé/700": "#c01048", + "Colors/Palette Library/Rosé/800": "#a11043", + "Colors/Palette Library/Rosé/900": "#89123e", + "Colors/Palette Library/Rosé/950": "#510b24", + "Colors/Palette Library/Orange dark/25": "#fff9f5", + "Colors/Palette Library/Orange dark/50": "#fff4ed", + "Colors/Palette Library/Orange dark/100": "#ffe6d5", + "Colors/Palette Library/Orange dark/200": "#ffd6ae", + "Colors/Palette Library/Orange dark/300": "#ff9c66", + "Colors/Palette Library/Orange dark/400": "#ff692e", + "Colors/Palette Library/Orange dark/500": "#ff4405", + "Colors/Palette Library/Orange dark/600": "#e62e05", + "Colors/Palette Library/Orange dark/700": "#bc1b06", + "Colors/Palette Library/Orange dark/800": "#97180c", + "Colors/Palette Library/Orange dark/900": "#771a0d", + "Colors/Palette Library/Orange dark/950": "#57130a", + "Colors/Palette Library/Orange/25": "#fefaf5", + "Colors/Palette Library/Orange/50": "#fef6ee", + "Colors/Palette Library/Orange/100": "#fdead7", + "Colors/Palette Library/Orange/200": "#f9dbaf", + "Colors/Palette Library/Orange/300": "#f7b27a", + "Colors/Palette Library/Orange/400": "#f38744", + "Colors/Palette Library/Orange/500": "#ef6820", + "Colors/Palette Library/Orange/600": "#e04f16", + "Colors/Palette Library/Orange/700": "#b93815", + "Colors/Palette Library/Orange/800": "#932f19", + "Colors/Palette Library/Orange/900": "#772917", + "Colors/Palette Library/Orange/950": "#511c10", + "Colors/Palette Library/Yellow/25": "#fefdf0", + "Colors/Palette Library/Yellow/50": "#fefbe8", + "Colors/Palette Library/Yellow/100": "#fef7c3", + "Colors/Palette Library/Yellow/200": "#feee95", + "Colors/Palette Library/Yellow/300": "#fde272", + "Colors/Palette Library/Yellow/400": "#fac515", + "Colors/Palette Library/Yellow/500": "#eaaa08", + "Colors/Palette Library/Yellow/600": "#ca8504", + "Colors/Palette Library/Yellow/700": "#a15c07", + "Colors/Palette Library/Yellow/800": "#854a0e", + "Colors/Palette Library/Yellow/900": "#713b12", + "Colors/Palette Library/Yellow/950": "#542c0d", + "Spacing/0": 0, + "Spacing/1": 4, + "Spacing/2": 8, + "Spacing/3": 12, + "Spacing/4": 16, + "Spacing/5": 20, + "Spacing/6": 24, + "Spacing/8": 32, + "Spacing/10": 40, + "Spacing/12": 48, + "Spacing/16": 64, + "Spacing/20": 80, + "Spacing/24": 96, + "Spacing/32": 128, + "Spacing/40": 160, + "Spacing/48": 192, + "Spacing/56": 224, + "Spacing/64": 256, + "Spacing/80": 320, + "Spacing/96": 384, + "Spacing/120": 480, + "Spacing/140": 560, + "Spacing/160": 640, + "Spacing/180": 720, + "Spacing/192": 768, + "Spacing/256": 1024, + "Spacing/320": 1280, + "Spacing/360": 1440, + "Spacing/400": 1600, + "Spacing/480": 1920, + "Spacing/0-5": 2, + "Spacing/1-5": 6, + "Colors/Palette Library/Gray true/850": "#1f1f1f", + "Colors/Dark mode/850": "#1f1f1f", + "Colors/Palette Library/Pewter/500": "#969b99", + "Colors/Palette Library/Pewter/50": "#f5f5f5", + "Colors/Palette Library/Pewter/100": "#eaebeb", + "Colors/Palette Library/Pewter/300": "#c0c3c2", + "Colors/Palette Library/Pewter/200": "#d5d7d6", + "Colors/Palette Library/Pewter/400": "#abafae", + "Colors/Palette Library/Pewter/600": "#777d7b", + "Colors/Palette Library/Pewter/700": "#5a5e5c", + "Colors/Palette Library/Pewter/800": "#3c3f3d", + "Colors/Palette Library/Pewter/900": "#1e1f1f", + "Colors/Palette Library/Pewter/950": "#0f100f", + "Colors/Palette Library/Carbon/500": "#222222", + "Colors/Palette Library/Carbon/50": "#e8e8e8", + "Colors/Palette Library/Carbon/100": "#d4d4d4", + "Colors/Palette Library/Carbon/200": "#a6a6a6", + "Colors/Palette Library/Carbon/300": "#7a7a7a", + "Colors/Palette Library/Carbon/400": "#4f4f4f", + "Colors/Palette Library/Carbon/600": "#1c1c1c", + "Colors/Palette Library/Carbon/700": "#141414", + "Colors/Palette Library/Carbon/800": "#0d0d0d", + "Colors/Palette Library/Carbon/900": "#080808", + "Colors/Palette Library/Carbon/950": "#030303", + "Colors/Palette Library/Granite/500": "#333333", + "Colors/Palette Library/Granite/50": "#ebebeb", + "Colors/Palette Library/Granite/100": "#d6d6d6", + "Colors/Palette Library/Granite/200": "#adadad", + "Colors/Palette Library/Granite/300": "#858585", + "Colors/Palette Library/Granite/400": "#5c5c5c", + "Colors/Palette Library/Granite/600": "#292929", + "Colors/Palette Library/Granite/700": "#1f1f1f", + "Colors/Palette Library/Granite/800": "#141414", + "Colors/Palette Library/Granite/900": "#0a0a0a", + "Colors/Palette Library/Granite/950": "#050505", + "Colors/Palette Library/Titanium/500": "#505050", + "Colors/Palette Library/Titanium/50": "#ededed", + "Colors/Palette Library/Titanium/100": "#dbdbdb", + "Colors/Palette Library/Titanium/200": "#bababa", + "Colors/Palette Library/Titanium/300": "#969696", + "Colors/Palette Library/Titanium/400": "#737373", + "Colors/Palette Library/Titanium/600": "#404040", + "Colors/Palette Library/Titanium/700": "#303030", + "Colors/Palette Library/Titanium/800": "#212121", + "Colors/Palette Library/Titanium/900": "#0f0f0f", + "Colors/Palette Library/Titanium/950": "#080808", + "Colors/Palette Library/Steel/500": "#e1e1e1", + "Colors/Palette Library/Steel/50": "#fcfcfc", + "Colors/Palette Library/Steel/100": "#fafafa", + "Colors/Palette Library/Steel/200": "#f2f2f2", + "Colors/Palette Library/Steel/300": "#ededed", + "Colors/Palette Library/Steel/400": "#e8e8e8", + "Colors/Palette Library/Steel/600": "#b5b5b5", + "Colors/Palette Library/Steel/700": "#878787", + "Colors/Palette Library/Steel/800": "#595959", + "Colors/Palette Library/Steel/900": "#2e2e2e", + "Colors/Palette Library/Steel/950": "#171717", + "Colors/Palette Library/Off White/500": "#f4f4f4", + "Colors/Palette Library/Off White/50": "#ffffff", + "Colors/Palette Library/Off White/100": "#fcfcfc", + "Colors/Palette Library/Off White/200": "#fafafa", + "Colors/Palette Library/Off White/300": "#f7f7f7", + "Colors/Palette Library/Off White/400": "#f7f7f7", + "Colors/Palette Library/Off White/600": "#c4c4c4", + "Colors/Palette Library/Off White/700": "#919191", + "Colors/Palette Library/Off White/800": "#616161", + "Colors/Palette Library/Off White/900": "#303030", + "Colors/Palette Library/Off White/950": "#1a1a1a", + }, + }, + }, +} + +type UISK_Collection1 = UISK_Collection<"2. Radius", "Default", UISK_Variables1> +type UISK_Variables1 = { + "radius-none": number + "radius-xxs": number + "radius-xs": number + "radius-sm": number + "radius-md": number + "radius-xl": number + "radius-2xl": number + "radius-4xl": number + "radius-full": number + "radius-lg": number + "radius-3xl": number +} + +const collection1: UISK_Collection1 = { + "2. Radius": { + defaultModeName: "Default", + modeNames: ["Default"], + modes: { + Default: { + "radius-none": 0, + "radius-xxs": 2, + "radius-xs": 4, + "radius-sm": 6, + "radius-md": 8, + "radius-xl": 12, + "radius-2xl": 16, + "radius-4xl": 24, + "radius-full": 9999, + "radius-lg": 10, + "radius-3xl": 20, + }, + }, + }, +} + +type UISK_Collection2 = UISK_Collection< + "3. Spacing", + "Default", + UISK_Variables2 +> +type UISK_Variables2 = { + "spacing-none": number + "spacing-xxs": number + "spacing-xs": number + "spacing-md": number + "spacing-lg": number + "spacing-xl": number + "spacing-2xl": number + "spacing-3xl": number + "spacing-4xl": number + "spacing-6xl": number + "spacing-7xl": number + "spacing-8xl": number + "spacing-9xl": number + "spacing-10xl": number + "spacing-11xl": number + "spacing-sm": number + "spacing-5xl": number +} + +const collection2: UISK_Collection2 = { + "3. Spacing": { + defaultModeName: "Default", + modeNames: ["Default"], + modes: { + Default: { + "spacing-none": 0, + "spacing-xxs": 2, + "spacing-xs": 4, + "spacing-md": 8, + "spacing-lg": 12, + "spacing-xl": 16, + "spacing-2xl": 20, + "spacing-3xl": 24, + "spacing-4xl": 32, + "spacing-6xl": 48, + "spacing-7xl": 64, + "spacing-8xl": 80, + "spacing-9xl": 96, + "spacing-10xl": 128, + "spacing-11xl": 160, + "spacing-sm": 6, + "spacing-5xl": 40, + }, + }, + }, +} + +type UISK_Collection3 = UISK_Collection<"5. Widths", "Default", UISK_Variables3> +type UISK_Variables3 = { + "width-xxs": number + "width-sm": number + "width-lg": number + "width-xl": number + "width-2xl": number + "width-3xl": number + "width-4xl": number + "width-5xl": number + "width-6xl": number + "width-md": number + "paragraph-max-width": number + "width-xs": number +} + +const collection3: UISK_Collection3 = { + "5. Widths": { + defaultModeName: "Default", + modeNames: ["Default"], + modes: { + Default: { + "width-xxs": 320, + "width-sm": 480, + "width-lg": 640, + "width-xl": 768, + "width-2xl": 1024, + "width-3xl": 1280, + "width-4xl": 1440, + "width-5xl": 1600, + "width-6xl": 1920, + "width-md": 560, + "paragraph-max-width": 720, + "width-xs": 384, + }, + }, + }, +} + +type UISK_Collection4 = UISK_Collection< + "6. Containers", + "Default", + UISK_Variables4 +> +type UISK_Variables4 = { + "container-max-width-desktop": number + "container-padding-desktop": number + "container-padding-mobile": number +} + +const collection4: UISK_Collection4 = { + "6. Containers": { + defaultModeName: "Default", + modeNames: ["Default"], + modes: { + Default: { + "container-max-width-desktop": 1280, + "container-padding-desktop": 32, + "container-padding-mobile": 16, + }, + }, + }, +} + +type UISK_Collection5 = UISK_Collection< + "7. Typography", + "Default", + UISK_Variables5 +> +type UISK_Variables5 = { + "Font family/font-family-display": string + "Font family/font-family-body": string + "Font weight/regular": string + "Font weight/regular-italic": string + "Font weight/medium": string + "Font weight/medium-italic": string + "Font weight/semibold": string + "Font weight/semibold-italic": string + "Font weight/bold": string + "Font weight/bold-italic": string + "Font size/text-xs": number + "Font size/text-sm": number + "Font size/text-md": number + "Font size/text-lg": number + "Font size/text-xl": number + "Font size/display-xs": number + "Font size/display-sm": number + "Font size/display-md": number + "Font size/display-lg": number + "Font size/display-xl": number + "Font size/display-2xl": number + "Line height/text-xs": number + "Line height/text-sm": number + "Line height/text-md": number + "Line height/text-lg": number + "Line height/text-xl": number + "Line height/display-xs": number + "Line height/display-sm": number + "Line height/display-md": number + "Line height/display-lg": number + "Line height/display-xl": number + "Line height/display-2xl": number + "Font size/text-xxs": number + "Line height/text-2xs": number + "Line height/text-3xs": number + "Line height/text-4xs": number +} + +const collection5: UISK_Collection5 = { + "7. Typography": { + defaultModeName: "Default", + modeNames: ["Default"], + modes: { + Default: { + "Font family/font-family-display": "Work Sans", + "Font family/font-family-body": "Work Sans", + "Font weight/regular": "Regular", + "Font weight/regular-italic": "Italic", + "Font weight/medium": "Medium", + "Font weight/medium-italic": "Medium italic", + "Font weight/semibold": "Semibold", + "Font weight/semibold-italic": "Semibold italic", + "Font weight/bold": "Bold", + "Font weight/bold-italic": "Bold italic", + "Font size/text-xs": 10, + "Font size/text-sm": 11, + "Font size/text-md": 12, + "Font size/text-lg": 14, + "Font size/text-xl": 16, + "Font size/display-xs": 18, + "Font size/display-sm": 20, + "Font size/display-md": 24, + "Font size/display-lg": 30, + "Font size/display-xl": 34, + "Font size/display-2xl": 38, + "Line height/text-xs": 18, + "Line height/text-sm": 20, + "Line height/text-md": 24, + "Line height/text-lg": 28, + "Line height/text-xl": 30, + "Line height/display-xs": 32, + "Line height/display-sm": 38, + "Line height/display-md": 44, + "Line height/display-lg": 60, + "Line height/display-xl": 72, + "Line height/display-2xl": 90, + "Font size/text-xxs": 9, + "Line height/text-2xs": 16, + "Line height/text-3xs": 14, + "Line height/text-4xs": 12, + }, + }, + }, +} + +type UISK_Collection6 = UISK_Collection< + "1. Color modes", + "Dark mode" | "Light mode", + UISK_Variables6 +> +type UISK_Variables6 = { + "Colors/Text/text-primary (900)": string + "Colors/Text/text-tertiary (600)": string + "Colors/Text/text-error-primary (600)": string + "Colors/Text/text-warning-primary (600)": string + "Colors/Text/text-success-primary (600)": string + "Colors/Text/text-white": string + "Colors/Text/text-secondary (700)": string + "Colors/Text/text-disabled": string + "Colors/Text/text-secondary_hover": string + "Colors/Text/text-tertiary_hover": string + "Colors/Text/text-brand-secondary (700)": string + "Colors/Text/text-placeholder": string + "Colors/Text/text-placeholder_subtle": string + "Colors/Text/text-brand-tertiary (600)": string + "Colors/Text/text-quaternary (500)": string + "Colors/Text/text-brand-primary (900)": string + "Colors/Text/text-primary_on-brand": string + "Colors/Text/text-secondary_on-brand": string + "Colors/Text/text-tertiary_on-brand": string + "Colors/Text/text-quaternary_on-brand": string + "Colors/Text/text-brand-tertiary_alt": string + "Colors/Border/border-secondary": string + "Colors/Border/border-error_subtle": string + "Colors/Border/border-primary": string + "Colors/Border/border-brand": string + "Colors/Border/border-disabled": string + "Colors/Border/border-error": string + "Colors/Border/border-disabled_subtle": string + "Colors/Border/border-tertiary": string + "Colors/Border/border-brand_alt": string + "Colors/Background/bg-primary": string + "Colors/Background/bg-tertiary": string + "Colors/Background/bg-brand-primary": string + "Colors/Background/bg-error-secondary": string + "Colors/Background/bg-warning-primary": string + "Colors/Background/bg-warning-secondary": string + "Colors/Background/bg-success-primary": string + "Colors/Background/bg-success-secondary": string + "Colors/Background/bg-brand-solid": string + "Colors/Background/bg-secondary-solid": string + "Colors/Background/bg-error-solid": string + "Colors/Background/bg-warning-solid": string + "Colors/Background/bg-success-solid": string + "Colors/Background/bg-secondary_hover": string + "Colors/Background/bg-primary_hover": string + "Colors/Background/bg-disabled": string + "Colors/Background/bg-active": string + "Colors/Background/bg-brand-solid_hover": string + "Colors/Background/bg-error-primary": string + "Colors/Background/bg-brand-secondary": string + "Colors/Background/bg-secondary": string + "Colors/Background/bg-disabled_subtle": string + "Colors/Background/bg-quaternary": string + "Colors/Background/bg-primary_alt": string + "Colors/Background/bg-brand-primary_alt": string + "Colors/Background/bg-secondary_alt": string + "Colors/Background/bg-overlay": string + "Colors/Background/bg-secondary_subtle": string + "Colors/Background/bg-brand-section": string + "Colors/Background/bg-brand-section_subtle": string + "Colors/Background/bg-primary-solid": string + "Colors/Foreground/fg-secondary (700)": string + "Colors/Foreground/fg-warning-primary": string + "Colors/Foreground/fg-success-primary": string + "Colors/Foreground/fg-white": string + "Colors/Foreground/fg-success-secondary": string + "Colors/Foreground/fg-secondary_hover": string + "Colors/Foreground/fg-primary (900)": string + "Colors/Foreground/fg-disabled": string + "Colors/Foreground/fg-quaternary (500)": string + "Colors/Foreground/fg-quaternary_hover": string + "Colors/Foreground/fg-brand-secondary (500)": string + "Colors/Foreground/fg-brand-primary (600)": string + "Colors/Foreground/fg-quinary (400)": string + "Colors/Foreground/fg-quinary_hover": string + "Colors/Foreground/fg-error-primary": string + "Colors/Foreground/fg-disabled_subtle": string + "Colors/Foreground/fg-warning-secondary": string + "Colors/Foreground/fg-error-secondary": string + "Colors/Foreground/fg-senary (300)": string + "Colors/Foreground/fg-tertiary (600)": string + "Colors/Foreground/fg-tertiary_hover": string + "Colors/Foreground/fg-brand-primary_alt": string + "Colors/Effects/Shadows/shadow-xs": string + "Colors/Effects/Shadows/shadow-sm_02": string + "Colors/Effects/Shadows/shadow-lg_01": string + "Colors/Effects/Shadows/shadow-lg_02": string + "Colors/Effects/Shadows/shadow-sm_01": string + "Colors/Effects/Shadows/shadow-3xl": string + "Colors/Effects/Shadows/shadow-2xl": string + "Colors/Effects/Shadows/shadow-md_01": string + "Colors/Effects/Shadows/shadow-md_02": string + "Colors/Effects/Shadows/shadow-xl_01": string + "Colors/Effects/Shadows/shadow-xl_02": string + "Colors/Effects/Shadows/shadow-skeumorphic-inner": string + "Colors/Effects/Shadows/shadow-skeumorphic-inner-border": string + "Colors/Effects/Focus rings/focus-ring": string + "Colors/Effects/Focus rings/focus-ring-error": string + "Component colors/Utility/Blue/utility-blue-600": string + "Component colors/Utility/Blue/utility-blue-700": string + "Component colors/Utility/Blue/utility-blue-500": string + "Component colors/Utility/Blue/utility-blue-200": string + "Component colors/Utility/Blue/utility-blue-50": string + "Component colors/Utility/Blue/utility-blue-100": string + "Component colors/Utility/Blue/utility-blue-400": string + "Component colors/Utility/Blue/utility-blue-300": string + "Component colors/Utility/Brand/utility-brand-600": string + "Component colors/Utility/Brand/utility-brand-700": string + "Component colors/Utility/Brand/utility-brand-500": string + "Component colors/Utility/Brand/utility-brand-200": string + "Component colors/Utility/Brand/utility-brand-50": string + "Component colors/Utility/Brand/utility-brand-100": string + "Component colors/Utility/Brand/utility-brand-400": string + "Component colors/Utility/Brand/utility-brand-50_alt": string + "Component colors/Utility/Brand/utility-brand-100_alt": string + "Component colors/Utility/Brand/utility-brand-200_alt": string + "Component colors/Utility/Brand/utility-brand-400_alt": string + "Component colors/Utility/Brand/utility-brand-500_alt": string + "Component colors/Utility/Brand/utility-brand-600_alt": string + "Component colors/Utility/Brand/utility-brand-700_alt": string + "Component colors/Utility/Brand/utility-brand-300": string + "Component colors/Utility/Brand/utility-brand-900": string + "Component colors/Utility/Brand/utility-brand-800": string + "Component colors/Utility/Brand/utility-brand-300_alt": string + "Component colors/Utility/Brand/utility-brand-800_alt": string + "Component colors/Utility/Brand/utility-brand-900_alt": string + "Component colors/Utility/Gray/utility-gray-700": string + "Component colors/Utility/Gray/utility-gray-600": string + "Component colors/Utility/Gray/utility-gray-500": string + "Component colors/Utility/Gray/utility-gray-200": string + "Component colors/Utility/Gray/utility-gray-50": string + "Component colors/Utility/Gray/utility-gray-100": string + "Component colors/Utility/Gray/utility-gray-400": string + "Component colors/Utility/Gray/utility-gray-300": string + "Component colors/Utility/Gray/utility-gray-900": string + "Component colors/Utility/Gray/utility-gray-800": string + "Component colors/Utility/Error/utility-error-600": string + "Component colors/Utility/Error/utility-error-700": string + "Component colors/Utility/Error/utility-error-500": string + "Component colors/Utility/Error/utility-error-200": string + "Component colors/Utility/Error/utility-error-50": string + "Component colors/Utility/Error/utility-error-100": string + "Component colors/Utility/Error/utility-error-400": string + "Component colors/Utility/Error/utility-error-300": string + "Component colors/Utility/Warning/utility-warning-600": string + "Component colors/Utility/Warning/utility-warning-700": string + "Component colors/Utility/Warning/utility-warning-500": string + "Component colors/Utility/Warning/utility-warning-200": string + "Component colors/Utility/Warning/utility-warning-50": string + "Component colors/Utility/Warning/utility-warning-100": string + "Component colors/Utility/Warning/utility-warning-400": string + "Component colors/Utility/Warning/utility-warning-300": string + "Component colors/Utility/Success/utility-success-600": string + "Component colors/Utility/Success/utility-success-700": string + "Component colors/Utility/Success/utility-success-500": string + "Component colors/Utility/Success/utility-success-200": string + "Component colors/Utility/Success/utility-success-50": string + "Component colors/Utility/Success/utility-success-100": string + "Component colors/Utility/Success/utility-success-400": string + "Component colors/Utility/Success/utility-success-300": string + "Component colors/Utility/Orange/utility-orange-600": string + "Component colors/Utility/Orange/utility-orange-700": string + "Component colors/Utility/Orange/utility-orange-500": string + "Component colors/Utility/Orange/utility-orange-200": string + "Component colors/Utility/Orange/utility-orange-50": string + "Component colors/Utility/Orange/utility-orange-100": string + "Component colors/Utility/Orange/utility-orange-400": string + "Component colors/Utility/Orange/utility-orange-300": string + "Component colors/Utility/Blue dark/utility-blue-dark-600": string + "Component colors/Utility/Blue dark/utility-blue-dark-700": string + "Component colors/Utility/Blue dark/utility-blue-dark-500": string + "Component colors/Utility/Blue dark/utility-blue-dark-200": string + "Component colors/Utility/Blue dark/utility-blue-dark-50": string + "Component colors/Utility/Blue dark/utility-blue-dark-100": string + "Component colors/Utility/Blue dark/utility-blue-dark-400": string + "Component colors/Utility/Blue dark/utility-blue-dark-300": string + "Component colors/Utility/Indigo/utility-indigo-600": string + "Component colors/Utility/Indigo/utility-indigo-700": string + "Component colors/Utility/Indigo/utility-indigo-500": string + "Component colors/Utility/Indigo/utility-indigo-200": string + "Component colors/Utility/Indigo/utility-indigo-50": string + "Component colors/Utility/Indigo/utility-indigo-100": string + "Component colors/Utility/Indigo/utility-indigo-400": string + "Component colors/Utility/Indigo/utility-indigo-300": string + "Component colors/Utility/Fuchsia/utility-fuchsia-600": string + "Component colors/Utility/Fuchsia/utility-fuchsia-700": string + "Component colors/Utility/Fuchsia/utility-fuchsia-500": string + "Component colors/Utility/Fuchsia/utility-fuchsia-200": string + "Component colors/Utility/Fuchsia/utility-fuchsia-50": string + "Component colors/Utility/Fuchsia/utility-fuchsia-100": string + "Component colors/Utility/Fuchsia/utility-fuchsia-400": string + "Component colors/Utility/Fuchsia/utility-fuchsia-300": string + "Component colors/Utility/Pink/utility-pink-600": string + "Component colors/Utility/Pink/utility-pink-700": string + "Component colors/Utility/Pink/utility-pink-500": string + "Component colors/Utility/Pink/utility-pink-200": string + "Component colors/Utility/Pink/utility-pink-50": string + "Component colors/Utility/Pink/utility-pink-100": string + "Component colors/Utility/Pink/utility-pink-400": string + "Component colors/Utility/Pink/utility-pink-300": string + "Component colors/Utility/Purple/utility-purple-600": string + "Component colors/Utility/Purple/utility-purple-700": string + "Component colors/Utility/Purple/utility-purple-500": string + "Component colors/Utility/Purple/utility-purple-200": string + "Component colors/Utility/Purple/utility-purple-50": string + "Component colors/Utility/Purple/utility-purple-100": string + "Component colors/Utility/Purple/utility-purple-400": string + "Component colors/Utility/Purple/utility-purple-300": string + "Component colors/Utility/Orange dark/utility-orange-dark-600": string + "Component colors/Utility/Orange dark/utility-orange-dark-700": string + "Component colors/Utility/Orange dark/utility-orange-dark-500": string + "Component colors/Utility/Orange dark/utility-orange-dark-200": string + "Component colors/Utility/Orange dark/utility-orange-dark-50": string + "Component colors/Utility/Orange dark/utility-orange-dark-100": string + "Component colors/Utility/Orange dark/utility-orange-dark-400": string + "Component colors/Utility/Orange dark/utility-orange-dark-300": string + "Component colors/Utility/Blue light/utility-blue-light-600": string + "Component colors/Utility/Blue light/utility-blue-light-700": string + "Component colors/Utility/Blue light/utility-blue-light-500": string + "Component colors/Utility/Blue light/utility-blue-light-200": string + "Component colors/Utility/Blue light/utility-blue-light-50": string + "Component colors/Utility/Blue light/utility-blue-light-100": string + "Component colors/Utility/Blue light/utility-blue-light-400": string + "Component colors/Utility/Blue light/utility-blue-light-300": string + "Component colors/Utility/Gray blue/utility-gray-blue-600": string + "Component colors/Utility/Gray blue/utility-gray-blue-700": string + "Component colors/Utility/Gray blue/utility-gray-blue-500": string + "Component colors/Utility/Gray blue/utility-gray-blue-200": string + "Component colors/Utility/Gray blue/utility-gray-blue-50": string + "Component colors/Utility/Gray blue/utility-gray-blue-100": string + "Component colors/Utility/Gray blue/utility-gray-blue-400": string + "Component colors/Utility/Gray blue/utility-gray-blue-300": string + "Component colors/Components/Tooltips/tooltip-supporting-text": string + "Component colors/Components/Buttons/Brand/button-brand-bg": string + "Component colors/Components/Buttons/Brand/button-brand-bg_hover": string + "Component colors/Components/Buttons/Brand/button-brand-fg": string + "Component colors/Components/Buttons/Brand/button-brand-fg_hover": string + "Component colors/Components/Buttons/Secondary/button-secondary-bg": string + "Component colors/Components/Buttons/Secondary/button-secondary-bg_hover": string + "Component colors/Components/Buttons/Secondary/button-secondary-fg": string + "Component colors/Components/Buttons/Secondary/button-secondary-fg_hover": string + "Component colors/Components/Buttons/Secondary/button-secondary-border": string + "Component colors/Components/Buttons/Secondary/button-secondary-border_hover": string + "Component colors/Components/Buttons/Secondary color/button-secondary-color-bg": string + "Component colors/Components/Buttons/Secondary color/button-secondary-color-bg_hover": string + "Component colors/Components/Buttons/Secondary color/button-secondary-color-border_hover": string + "Component colors/Components/Buttons/Secondary color/button-secondary-color-border": string + "Component colors/Components/Buttons/Secondary color/button-secondary-color-fg": string + "Component colors/Components/Buttons/Secondary color/button-secondary-color-fg_hover": string + "Component colors/Components/Buttons/Primary error/button-primary-error-fg": string + "Component colors/Components/Buttons/Primary error/button-primary-error-fg_hover": string + "Component colors/Components/Buttons/Primary error/button-primary-error-bg": string + "Component colors/Components/Buttons/Primary error/button-primary-error-bg_hover": string + "Component colors/Components/Buttons/Secondary error/button-secondary-error-fg": string + "Component colors/Components/Buttons/Secondary error/button-secondary-error-fg_hover": string + "Component colors/Components/Buttons/Secondary error/button-secondary-error-bg": string + "Component colors/Components/Buttons/Secondary error/button-secondary-error-bg_hover": string + "Component colors/Components/Buttons/Secondary error/button-secondary-error-border": string + "Component colors/Components/Buttons/Secondary error/button-secondary-error-border_hover": string + "Component colors/Components/Buttons/Tertiary/button-tertiary-fg": string + "Component colors/Components/Buttons/Tertiary/button-tertiary-fg_hover": string + "Component colors/Components/Buttons/Tertiary/button-tertiary-bg_hover": string + "Component colors/Components/Buttons/Tertiary color/button-tertiary-color-fg": string + "Component colors/Components/Buttons/Tertiary color/button-tertiary-color-fg_hover": string + "Component colors/Components/Buttons/Tertiary color/button-tertiary-color-bg_hover": string + "Component colors/Components/Buttons/Tertiary error/button-tertiary-error-fg": string + "Component colors/Components/Buttons/Tertiary error/button-tertiary-error-fg_hover": string + "Component colors/Components/Buttons/Tertiary error/button-tertiary-error-bg_hover": string + "Component colors/Components/Toggles/toggle-button-fg_disabled": string + "Colors/Border/border-warning": string + "Colors/Border/border-warning_subtle": string + "Colors/Text/text-buy-primary": string + "Colors/Text/text-sell-primary": string + "Colors/Background/bg-sell-primary": string + "Colors/Background/bg-sell-primary_hover": string + "Colors/Background/bg-buy-primary": string + "Colors/Background/bg-buy-primary_hover": string + "Colors/Border/border-success": string + "Component colors/Utility/Data/utility-data-positive-50": string + "Component colors/Utility/Data/utility-data-positive-100": string + "Component colors/Utility/Data/utility-data-positive-200": string + "Component colors/Utility/Data/utility-data-positive-300": string + "Component colors/Utility/Data/utility-data-positive-400": string + "Component colors/Utility/Data/utility-data-positive-500": string + "Component colors/Utility/Data/utility-data-positive-600": string + "Component colors/Utility/Data/utility-data-positive-700": string + "Component colors/Utility/Red/utility-red-700": string + "Component colors/Utility/Red/utility-red-600": string + "Component colors/Utility/Red/utility-red-500": string + "Component colors/Utility/Red/utility-red-400": string + "Component colors/Utility/Red/utility-red-300": string + "Component colors/Utility/Red/utility-red-200": string + "Component colors/Utility/Red/utility-red-100": string + "Component colors/Utility/Red/utility-red-50": string + "Component colors/Components/Buttons/Primary/button-primary-bg": string + "Component colors/Components/Buttons/Primary/button-primary-bg_hover": string + "Component colors/Components/Buttons/Primary/button-primary-fg": string + "Component colors/Components/Buttons/Primary/button-primary-fg_hover": string + "Component colors/Components/Buttons/Primary/button-primary-border": string + "Component colors/Components/Buttons/Primary/button-primary-border_hover": string + "Component colors/Components/Buttons/Primary/button-primary-fg_subtle": string + "Colors/Border/border-sell": string + "Colors/Border/border-buy": string + "Colors/Text/text-black": string + "Colors/Text/text-primary_alt": string + "Colors/Border/border-hover": string +} + +const collection6: UISK_Collection6 = { + "1. Color modes": { + defaultModeName: "Dark mode", + modeNames: ["Dark mode", "Light mode"], + modes: { + "Dark mode": { + "Colors/Text/text-primary (900)": "#f7f7f7", + "Colors/Text/text-tertiary (600)": "#a3a3a3", + "Colors/Text/text-error-primary (600)": "#c34646", + "Colors/Text/text-warning-primary (600)": "#fdb022", + "Colors/Text/text-success-primary (600)": "#47cd89", + "Colors/Text/text-white": "#ffffff", + "Colors/Text/text-secondary (700)": "#d6d6d6", + "Colors/Text/text-disabled": "#737373", + "Colors/Text/text-secondary_hover": "#e5e5e5", + "Colors/Text/text-tertiary_hover": "#d6d6d6", + "Colors/Text/text-brand-secondary (700)": "#d6d6d6", + "Colors/Text/text-placeholder": "#737373", + "Colors/Text/text-placeholder_subtle": "#424242", + "Colors/Text/text-brand-tertiary (600)": "#a3a3a3", + "Colors/Text/text-quaternary (500)": "#737373", + "Colors/Text/text-brand-primary (900)": "#8e90f9", + "Colors/Text/text-primary_on-brand": "#ffffff", + "Colors/Text/text-secondary_on-brand": "#d9dafd", + "Colors/Text/text-tertiary_on-brand": "#c0c2fc", + "Colors/Text/text-quaternary_on-brand": "#a7a9fa", + "Colors/Text/text-brand-tertiary_alt": "#f7f7f7", + "Colors/Border/border-secondary": "#292929", + "Colors/Border/border-error_subtle": "#890c21", + "Colors/Border/border-primary": "#525252", + "Colors/Border/border-brand": "#8184f8", + "Colors/Border/border-disabled": "#424242", + "Colors/Border/border-error": "#c41230", + "Colors/Border/border-disabled_subtle": "#292929", + "Colors/Border/border-tertiary": "#1f1f1f", + "Colors/Border/border-brand_alt": "#424242", + "Colors/Background/bg-primary": "#0f0f0f", + "Colors/Background/bg-tertiary": "#292929", + "Colors/Background/bg-brand-primary": "#8184f8", + "Colors/Background/bg-error-secondary": "#890c21", + "Colors/Background/bg-warning-primary": "#f79009", + "Colors/Background/bg-warning-secondary": "#dc6803", + "Colors/Background/bg-success-primary": "#17b26a", + "Colors/Background/bg-success-secondary": "#079455", + "Colors/Background/bg-brand-solid": "#676ac6", + "Colors/Background/bg-secondary-solid": "#525252", + "Colors/Background/bg-error-solid": "#890c21", + "Colors/Background/bg-warning-solid": "#dc6803", + "Colors/Background/bg-success-solid": "#079455", + "Colors/Background/bg-secondary_hover": "#424242", + "Colors/Background/bg-primary_hover": "#292929", + "Colors/Background/bg-disabled": "#292929", + "Colors/Background/bg-active": "#292929", + "Colors/Background/bg-brand-solid_hover": "#8184f8", + "Colors/Background/bg-error-primary": "#a50e28", + "Colors/Background/bg-brand-secondary": "#676ac6", + "Colors/Background/bg-secondary": "#1f1f1f", + "Colors/Background/bg-disabled_subtle": "#292929", + "Colors/Background/bg-quaternary": "#424242", + "Colors/Background/bg-primary_alt": "#141414", + "Colors/Background/bg-brand-primary_alt": "#1f1f1f", + "Colors/Background/bg-secondary_alt": "#0f0f0f", + "Colors/Background/bg-overlay": "#292929", + "Colors/Background/bg-secondary_subtle": "#141414", + "Colors/Background/bg-brand-section": "#1f1f1f", + "Colors/Background/bg-brand-section_subtle": "#0f0f0f", + "Colors/Background/bg-primary-solid": "#f5f5f5", + "Colors/Foreground/fg-secondary (700)": "#d6d6d6", + "Colors/Foreground/fg-warning-primary": "#f79009", + "Colors/Foreground/fg-success-primary": "#17b26a", + "Colors/Foreground/fg-white": "#ffffff", + "Colors/Foreground/fg-success-secondary": "#47cd89", + "Colors/Foreground/fg-secondary_hover": "#e5e5e5", + "Colors/Foreground/fg-primary (900)": "#ffffff", + "Colors/Foreground/fg-disabled": "#737373", + "Colors/Foreground/fg-quaternary (500)": "#a3a3a3", + "Colors/Foreground/fg-quaternary_hover": "#d6d6d6", + "Colors/Foreground/fg-brand-secondary (500)": "#8184f8", + "Colors/Foreground/fg-brand-primary (600)": "#8184f8", + "Colors/Foreground/fg-quinary (400)": "#737373", + "Colors/Foreground/fg-quinary_hover": "#a3a3a3", + "Colors/Foreground/fg-error-primary": "#a50e28", + "Colors/Foreground/fg-disabled_subtle": "#525252", + "Colors/Foreground/fg-warning-secondary": "#fdb022", + "Colors/Foreground/fg-error-secondary": "#c41230", + "Colors/Foreground/fg-senary (300)": "#525252", + "Colors/Foreground/fg-tertiary (600)": "#a3a3a3", + "Colors/Foreground/fg-tertiary_hover": "#d6d6d6", + "Colors/Foreground/fg-brand-primary_alt": "#d6d6d6", + "Colors/Effects/Shadows/shadow-xs": "#1313160d", + "Colors/Effects/Shadows/shadow-sm_02": "#1313160f", + "Colors/Effects/Shadows/shadow-lg_01": "#131316", + "Colors/Effects/Shadows/shadow-lg_02": "#131316cc", + "Colors/Effects/Shadows/shadow-sm_01": "#1313161a", + "Colors/Effects/Shadows/shadow-3xl": "#13131624", + "Colors/Effects/Shadows/shadow-2xl": "#1313162e", + "Colors/Effects/Shadows/shadow-md_01": "#1313161a", + "Colors/Effects/Shadows/shadow-md_02": "#1313160f", + "Colors/Effects/Shadows/shadow-xl_01": "#13131614", + "Colors/Effects/Shadows/shadow-xl_02": "#13131608", + "Colors/Effects/Shadows/shadow-skeumorphic-inner": "#1313160d", + "Colors/Effects/Shadows/shadow-skeumorphic-inner-border": "#13131640", + "Colors/Effects/Focus rings/focus-ring": "#2e90fa", + "Colors/Effects/Focus rings/focus-ring-error": "#a50e28", + "Component colors/Utility/Blue/utility-blue-600": "#53b1fd", + "Component colors/Utility/Blue/utility-blue-700": "#84caff", + "Component colors/Utility/Blue/utility-blue-500": "#2e90fa", + "Component colors/Utility/Blue/utility-blue-200": "#1849a9", + "Component colors/Utility/Blue/utility-blue-50": "#102a56", + "Component colors/Utility/Blue/utility-blue-100": "#194185", + "Component colors/Utility/Blue/utility-blue-400": "#1570ef", + "Component colors/Utility/Blue/utility-blue-300": "#175cd3", + "Component colors/Utility/Brand/utility-brand-600": "#8e90f9", + "Component colors/Utility/Brand/utility-brand-700": "#a7a9fa", + "Component colors/Utility/Brand/utility-brand-500": "#8184f8", + "Component colors/Utility/Brand/utility-brand-200": "#41427c", + "Component colors/Utility/Brand/utility-brand-50": "#0d0d19", + "Component colors/Utility/Brand/utility-brand-100": "#27284a", + "Component colors/Utility/Brand/utility-brand-400": "#676ac6", + "Component colors/Utility/Brand/utility-brand-50_alt": "#141414", + "Component colors/Utility/Brand/utility-brand-100_alt": "#292929", + "Component colors/Utility/Brand/utility-brand-200_alt": "#424242", + "Component colors/Utility/Brand/utility-brand-400_alt": "#525252", + "Component colors/Utility/Brand/utility-brand-500_alt": "#737373", + "Component colors/Utility/Brand/utility-brand-600_alt": "#a3a3a3", + "Component colors/Utility/Brand/utility-brand-700_alt": "#d6d6d6", + "Component colors/Utility/Brand/utility-brand-300": "#4d4f95", + "Component colors/Utility/Brand/utility-brand-900": "#d9dafd", + "Component colors/Utility/Brand/utility-brand-800": "#c0c2fc", + "Component colors/Utility/Brand/utility-brand-300_alt": "#424242", + "Component colors/Utility/Brand/utility-brand-800_alt": "#e5e5e5", + "Component colors/Utility/Brand/utility-brand-900_alt": "#f5f5f5", + "Component colors/Utility/Gray/utility-gray-700": "#d6d6d6", + "Component colors/Utility/Gray/utility-gray-600": "#a3a3a3", + "Component colors/Utility/Gray/utility-gray-500": "#737373", + "Component colors/Utility/Gray/utility-gray-200": "#424242", + "Component colors/Utility/Gray/utility-gray-50": "#141414", + "Component colors/Utility/Gray/utility-gray-100": "#292929", + "Component colors/Utility/Gray/utility-gray-400": "#525252", + "Component colors/Utility/Gray/utility-gray-300": "#424242", + "Component colors/Utility/Gray/utility-gray-900": "#f5f5f5", + "Component colors/Utility/Gray/utility-gray-800": "#e5e5e5", + "Component colors/Utility/Error/utility-error-600": "#c41230", + "Component colors/Utility/Error/utility-error-700": "#d14159", + "Component colors/Utility/Error/utility-error-500": "#a50e28", + "Component colors/Utility/Error/utility-error-200": "#500713", + "Component colors/Utility/Error/utility-error-50": "#34040d", + "Component colors/Utility/Error/utility-error-100": "#34040d", + "Component colors/Utility/Error/utility-error-400": "#890c21", + "Component colors/Utility/Error/utility-error-300": "#6d091a", + "Component colors/Utility/Warning/utility-warning-600": "#fdb022", + "Component colors/Utility/Warning/utility-warning-700": "#fec84b", + "Component colors/Utility/Warning/utility-warning-500": "#f79009", + "Component colors/Utility/Warning/utility-warning-200": "#93370d", + "Component colors/Utility/Warning/utility-warning-50": "#4e1d09", + "Component colors/Utility/Warning/utility-warning-100": "#7a2e0e", + "Component colors/Utility/Warning/utility-warning-400": "#dc6803", + "Component colors/Utility/Warning/utility-warning-300": "#b54708", + "Component colors/Utility/Success/utility-success-600": "#47cd89", + "Component colors/Utility/Success/utility-success-700": "#75e0a7", + "Component colors/Utility/Success/utility-success-500": "#17b26a", + "Component colors/Utility/Success/utility-success-200": "#085d3a", + "Component colors/Utility/Success/utility-success-50": "#053321", + "Component colors/Utility/Success/utility-success-100": "#074d31", + "Component colors/Utility/Success/utility-success-400": "#079455", + "Component colors/Utility/Success/utility-success-300": "#067647", + "Component colors/Utility/Orange/utility-orange-600": "#f38744", + "Component colors/Utility/Orange/utility-orange-700": "#f7b27a", + "Component colors/Utility/Orange/utility-orange-500": "#ef6820", + "Component colors/Utility/Orange/utility-orange-200": "#932f19", + "Component colors/Utility/Orange/utility-orange-50": "#511c10", + "Component colors/Utility/Orange/utility-orange-100": "#772917", + "Component colors/Utility/Orange/utility-orange-400": "#e04f16", + "Component colors/Utility/Orange/utility-orange-300": "#b93815", + "Component colors/Utility/Blue dark/utility-blue-dark-600": "#528bff", + "Component colors/Utility/Blue dark/utility-blue-dark-700": "#84adff", + "Component colors/Utility/Blue dark/utility-blue-dark-500": "#2970ff", + "Component colors/Utility/Blue dark/utility-blue-dark-200": "#0040c1", + "Component colors/Utility/Blue dark/utility-blue-dark-50": "#002266", + "Component colors/Utility/Blue dark/utility-blue-dark-100": "#00359e", + "Component colors/Utility/Blue dark/utility-blue-dark-400": "#155eef", + "Component colors/Utility/Blue dark/utility-blue-dark-300": "#004eeb", + "Component colors/Utility/Indigo/utility-indigo-600": "#8098f9", + "Component colors/Utility/Indigo/utility-indigo-700": "#a4bcfd", + "Component colors/Utility/Indigo/utility-indigo-500": "#6172f3", + "Component colors/Utility/Indigo/utility-indigo-200": "#2d31a6", + "Component colors/Utility/Indigo/utility-indigo-50": "#1f235b", + "Component colors/Utility/Indigo/utility-indigo-100": "#2d3282", + "Component colors/Utility/Indigo/utility-indigo-400": "#444ce7", + "Component colors/Utility/Indigo/utility-indigo-300": "#3538cd", + "Component colors/Utility/Fuchsia/utility-fuchsia-600": "#e478fa", + "Component colors/Utility/Fuchsia/utility-fuchsia-700": "#eeaafd", + "Component colors/Utility/Fuchsia/utility-fuchsia-500": "#d444f1", + "Component colors/Utility/Fuchsia/utility-fuchsia-200": "#821890", + "Component colors/Utility/Fuchsia/utility-fuchsia-50": "#47104c", + "Component colors/Utility/Fuchsia/utility-fuchsia-100": "#6f1877", + "Component colors/Utility/Fuchsia/utility-fuchsia-400": "#ba24d5", + "Component colors/Utility/Fuchsia/utility-fuchsia-300": "#9f1ab1", + "Component colors/Utility/Pink/utility-pink-600": "#f670c7", + "Component colors/Utility/Pink/utility-pink-700": "#faa7e0", + "Component colors/Utility/Pink/utility-pink-500": "#ee46bc", + "Component colors/Utility/Pink/utility-pink-200": "#9e165f", + "Component colors/Utility/Pink/utility-pink-50": "#4e0d30", + "Component colors/Utility/Pink/utility-pink-100": "#851651", + "Component colors/Utility/Pink/utility-pink-400": "#dd2590", + "Component colors/Utility/Pink/utility-pink-300": "#c11574", + "Component colors/Utility/Purple/utility-purple-600": "#9b8afb", + "Component colors/Utility/Purple/utility-purple-700": "#bdb4fe", + "Component colors/Utility/Purple/utility-purple-500": "#7a5af8", + "Component colors/Utility/Purple/utility-purple-200": "#4a1fb8", + "Component colors/Utility/Purple/utility-purple-50": "#27115f", + "Component colors/Utility/Purple/utility-purple-100": "#3e1c96", + "Component colors/Utility/Purple/utility-purple-400": "#6938ef", + "Component colors/Utility/Purple/utility-purple-300": "#5925dc", + "Component colors/Utility/Orange dark/utility-orange-dark-600": + "#ff692e", + "Component colors/Utility/Orange dark/utility-orange-dark-700": + "#ff9c66", + "Component colors/Utility/Orange dark/utility-orange-dark-500": + "#ff4405", + "Component colors/Utility/Orange dark/utility-orange-dark-200": + "#97180c", + "Component colors/Utility/Orange dark/utility-orange-dark-50": + "#57130a", + "Component colors/Utility/Orange dark/utility-orange-dark-100": + "#771a0d", + "Component colors/Utility/Orange dark/utility-orange-dark-400": + "#e62e05", + "Component colors/Utility/Orange dark/utility-orange-dark-300": + "#bc1b06", + "Component colors/Utility/Blue light/utility-blue-light-600": "#36bffa", + "Component colors/Utility/Blue light/utility-blue-light-700": "#7cd4fd", + "Component colors/Utility/Blue light/utility-blue-light-500": "#0ba5ec", + "Component colors/Utility/Blue light/utility-blue-light-200": "#065986", + "Component colors/Utility/Blue light/utility-blue-light-50": "#062c41", + "Component colors/Utility/Blue light/utility-blue-light-100": "#0b4a6f", + "Component colors/Utility/Blue light/utility-blue-light-400": "#0086c9", + "Component colors/Utility/Blue light/utility-blue-light-300": "#026aa2", + "Component colors/Utility/Gray blue/utility-gray-blue-600": "#717bbc", + "Component colors/Utility/Gray blue/utility-gray-blue-700": "#b3b8db", + "Component colors/Utility/Gray blue/utility-gray-blue-500": "#4e5ba6", + "Component colors/Utility/Gray blue/utility-gray-blue-200": "#293056", + "Component colors/Utility/Gray blue/utility-gray-blue-50": "#101323", + "Component colors/Utility/Gray blue/utility-gray-blue-100": "#101323", + "Component colors/Utility/Gray blue/utility-gray-blue-400": "#3e4784", + "Component colors/Utility/Gray blue/utility-gray-blue-300": "#363f72", + "Component colors/Components/Tooltips/tooltip-supporting-text": + "#d6d6d6", + "Component colors/Components/Buttons/Brand/button-brand-bg": "#8184f8", + "Component colors/Components/Buttons/Brand/button-brand-bg_hover": + "#4d4f95", + "Component colors/Components/Buttons/Brand/button-brand-fg": "#000000", + "Component colors/Components/Buttons/Brand/button-brand-fg_hover": + "#ffffff", + "Component colors/Components/Buttons/Secondary/button-secondary-bg": + "#141414", + "Component colors/Components/Buttons/Secondary/button-secondary-bg_hover": + "#292929", + "Component colors/Components/Buttons/Secondary/button-secondary-fg": + "#d6d6d6", + "Component colors/Components/Buttons/Secondary/button-secondary-fg_hover": + "#f5f5f5", + "Component colors/Components/Buttons/Secondary/button-secondary-border": + "#424242", + "Component colors/Components/Buttons/Secondary/button-secondary-border_hover": + "#424242", + "Component colors/Components/Buttons/Secondary color/button-secondary-color-bg": + "#141414", + "Component colors/Components/Buttons/Secondary color/button-secondary-color-bg_hover": + "#292929", + "Component colors/Components/Buttons/Secondary color/button-secondary-color-border_hover": + "#424242", + "Component colors/Components/Buttons/Secondary color/button-secondary-color-border": + "#424242", + "Component colors/Components/Buttons/Secondary color/button-secondary-color-fg": + "#d6d6d6", + "Component colors/Components/Buttons/Secondary color/button-secondary-color-fg_hover": + "#f5f5f5", + "Component colors/Components/Buttons/Primary error/button-primary-error-fg": + "#ffffff", + "Component colors/Components/Buttons/Primary error/button-primary-error-fg_hover": + "#ffffff", + "Component colors/Components/Buttons/Primary error/button-primary-error-bg": + "#890c21", + "Component colors/Components/Buttons/Primary error/button-primary-error-bg_hover": + "#6d091a", + "Component colors/Components/Buttons/Secondary error/button-secondary-error-fg": + "#e28897", + "Component colors/Components/Buttons/Secondary error/button-secondary-error-fg_hover": + "#f3d0d6", + "Component colors/Components/Buttons/Secondary error/button-secondary-error-bg": + "#34040d", + "Component colors/Components/Buttons/Secondary error/button-secondary-error-bg_hover": + "#34040d", + "Component colors/Components/Buttons/Secondary error/button-secondary-error-border": + "#500713", + "Component colors/Components/Buttons/Secondary error/button-secondary-error-border_hover": + "#6d091a", + "Component colors/Components/Buttons/Tertiary/button-tertiary-fg": + "#a3a3a3", + "Component colors/Components/Buttons/Tertiary/button-tertiary-fg_hover": + "#e5e5e5", + "Component colors/Components/Buttons/Tertiary/button-tertiary-bg_hover": + "#292929", + "Component colors/Components/Buttons/Tertiary color/button-tertiary-color-fg": + "#d6d6d6", + "Component colors/Components/Buttons/Tertiary color/button-tertiary-color-fg_hover": + "#f5f5f5", + "Component colors/Components/Buttons/Tertiary color/button-tertiary-color-bg_hover": + "#292929", + "Component colors/Components/Buttons/Tertiary error/button-tertiary-error-fg": + "#d14159", + "Component colors/Components/Buttons/Tertiary error/button-tertiary-error-fg_hover": + "#e28897", + "Component colors/Components/Buttons/Tertiary error/button-tertiary-error-bg_hover": + "#34040d", + "Component colors/Components/Toggles/toggle-button-fg_disabled": + "#525252", + "Colors/Border/border-warning": "#f79009", + "Colors/Border/border-warning_subtle": "#a15c07", + "Colors/Text/text-buy-primary": "#8184f8", + "Colors/Text/text-sell-primary": "#f63d68", + "Colors/Background/bg-sell-primary": "#c01048", + "Colors/Background/bg-sell-primary_hover": "#e31b54", + "Colors/Background/bg-buy-primary": "#8e90f9", + "Colors/Background/bg-buy-primary_hover": "#676ac6", + "Colors/Border/border-success": "#079455", + "Component colors/Utility/Data/utility-data-positive-50": "#ecfdf3", + "Component colors/Utility/Data/utility-data-positive-100": "#dcfae6", + "Component colors/Utility/Data/utility-data-positive-200": "#abefc6", + "Component colors/Utility/Data/utility-data-positive-300": "#75e0a7", + "Component colors/Utility/Data/utility-data-positive-400": "#47cd89", + "Component colors/Utility/Data/utility-data-positive-500": "#17b26a", + "Component colors/Utility/Data/utility-data-positive-600": "#079455", + "Component colors/Utility/Data/utility-data-positive-700": "#067647", + "Component colors/Utility/Red/utility-red-700": "#e28897", + "Component colors/Utility/Red/utility-red-600": "#d14159", + "Component colors/Utility/Red/utility-red-500": "#c41230", + "Component colors/Utility/Red/utility-red-400": "#a50e28", + "Component colors/Utility/Red/utility-red-300": "#890c21", + "Component colors/Utility/Red/utility-red-200": "#6d091a", + "Component colors/Utility/Red/utility-red-100": "#500713", + "Component colors/Utility/Red/utility-red-50": "#34040d", + "Component colors/Components/Buttons/Primary/button-primary-bg": + "#292929", + "Component colors/Components/Buttons/Primary/button-primary-bg_hover": + "#424242", + "Component colors/Components/Buttons/Primary/button-primary-fg": + "#d6d6d6", + "Component colors/Components/Buttons/Primary/button-primary-fg_hover": + "#fcfcfc", + "Component colors/Components/Buttons/Primary/button-primary-border": + "#424242", + "Component colors/Components/Buttons/Primary/button-primary-border_hover": + "#424242", + "Component colors/Components/Buttons/Primary/button-primary-fg_subtle": + "#a3a3a3", + "Colors/Border/border-sell": "#f63d68", + "Colors/Border/border-buy": "#8184f8", + "Colors/Text/text-black": "#000000", + "Colors/Text/text-primary_alt": "#0f0f0f", + "Colors/Border/border-hover": "#737373", + }, + "Light mode": { + "Colors/Text/text-primary (900)": "#141414", + "Colors/Text/text-tertiary (600)": "#525252", + "Colors/Text/text-error-primary (600)": "#730000", + "Colors/Text/text-warning-primary (600)": "#dc6803", + "Colors/Text/text-success-primary (600)": "#079455", + "Colors/Text/text-white": "#ffffff", + "Colors/Text/text-secondary (700)": "#424242", + "Colors/Text/text-disabled": "#737373", + "Colors/Text/text-secondary_hover": "#292929", + "Colors/Text/text-tertiary_hover": "#424242", + "Colors/Text/text-brand-secondary (700)": "#4d4f95", + "Colors/Text/text-placeholder": "#737373", + "Colors/Text/text-placeholder_subtle": "#d6d6d6", + "Colors/Text/text-brand-tertiary (600)": "#676ac6", + "Colors/Text/text-quaternary (500)": "#737373", + "Colors/Text/text-brand-primary (900)": "#8184f8", + "Colors/Text/text-primary_on-brand": "#ffffff", + "Colors/Text/text-secondary_on-brand": "#c0c2fc", + "Colors/Text/text-tertiary_on-brand": "#c0c2fc", + "Colors/Text/text-quaternary_on-brand": "#4d4f95", + "Colors/Text/text-brand-tertiary_alt": "#676ac6", + "Colors/Border/border-secondary": "#f5f5f5", + "Colors/Border/border-error_subtle": "#d14159", + "Colors/Border/border-primary": "#e5e5e5", + "Colors/Border/border-brand": "#27284a", + "Colors/Border/border-disabled": "#d6d6d6", + "Colors/Border/border-error": "#a50e28", + "Colors/Border/border-disabled_subtle": "#e5e5e5", + "Colors/Border/border-tertiary": "#f5f5f5", + "Colors/Border/border-brand_alt": "#676ac6", + "Colors/Background/bg-primary": "#f5f5f5", + "Colors/Background/bg-tertiary": "#f5f5f5", + "Colors/Background/bg-brand-primary": "#e6e6fe", + "Colors/Background/bg-error-secondary": "#f3d0d6", + "Colors/Background/bg-warning-primary": "#fffaeb", + "Colors/Background/bg-warning-secondary": "#fef0c7", + "Colors/Background/bg-success-primary": "#ecfdf3", + "Colors/Background/bg-success-secondary": "#dcfae6", + "Colors/Background/bg-brand-solid": "#676ac6", + "Colors/Background/bg-secondary-solid": "#525252", + "Colors/Background/bg-error-solid": "#890c21", + "Colors/Background/bg-warning-solid": "#dc6803", + "Colors/Background/bg-success-solid": "#079455", + "Colors/Background/bg-secondary_hover": "#f5f5f5", + "Colors/Background/bg-primary_hover": "#f7f7f7", + "Colors/Background/bg-disabled": "#f5f5f5", + "Colors/Background/bg-active": "#e5e5e5", + "Colors/Background/bg-brand-solid_hover": "#4d4f95", + "Colors/Background/bg-error-primary": "#f9e7ea", + "Colors/Background/bg-brand-secondary": "#d9dafd", + "Colors/Background/bg-secondary": "#f7f7f7", + "Colors/Background/bg-disabled_subtle": "#f7f7f7", + "Colors/Background/bg-quaternary": "#e5e5e5", + "Colors/Background/bg-primary_alt": "#ffffff", + "Colors/Background/bg-brand-primary_alt": "#e6e6fe", + "Colors/Background/bg-secondary_alt": "#f7f7f7", + "Colors/Background/bg-overlay": "#0f0f0f", + "Colors/Background/bg-secondary_subtle": "#fcfcfc", + "Colors/Background/bg-brand-section": "#41427c", + "Colors/Background/bg-brand-section_subtle": "#4d4f95", + "Colors/Background/bg-primary-solid": "#0f0f0f", + "Colors/Foreground/fg-secondary (700)": "#424242", + "Colors/Foreground/fg-warning-primary": "#dc6803", + "Colors/Foreground/fg-success-primary": "#079455", + "Colors/Foreground/fg-white": "#ffffff", + "Colors/Foreground/fg-success-secondary": "#17b26a", + "Colors/Foreground/fg-secondary_hover": "#292929", + "Colors/Foreground/fg-primary (900)": "#141414", + "Colors/Foreground/fg-disabled": "#a3a3a3", + "Colors/Foreground/fg-quaternary (500)": "#737373", + "Colors/Foreground/fg-quaternary_hover": "#525252", + "Colors/Foreground/fg-brand-secondary (500)": "#8184f8", + "Colors/Foreground/fg-brand-primary (600)": "#676ac6", + "Colors/Foreground/fg-quinary (400)": "#a3a3a3", + "Colors/Foreground/fg-quinary_hover": "#737373", + "Colors/Foreground/fg-error-primary": "#890c21", + "Colors/Foreground/fg-disabled_subtle": "#d6d6d6", + "Colors/Foreground/fg-warning-secondary": "#f79009", + "Colors/Foreground/fg-error-secondary": "#a50e28", + "Colors/Foreground/fg-senary (300)": "#d6d6d6", + "Colors/Foreground/fg-tertiary (600)": "#525252", + "Colors/Foreground/fg-tertiary_hover": "#424242", + "Colors/Foreground/fg-brand-primary_alt": "#676ac6", + "Colors/Effects/Shadows/shadow-xs": "#1018280d", + "Colors/Effects/Shadows/shadow-sm_02": "#1018280f", + "Colors/Effects/Shadows/shadow-lg_01": "#10182814", + "Colors/Effects/Shadows/shadow-lg_02": "#10182808", + "Colors/Effects/Shadows/shadow-sm_01": "#1018281a", + "Colors/Effects/Shadows/shadow-3xl": "#10182824", + "Colors/Effects/Shadows/shadow-2xl": "#1018282e", + "Colors/Effects/Shadows/shadow-md_01": "#1018281a", + "Colors/Effects/Shadows/shadow-md_02": "#1018280f", + "Colors/Effects/Shadows/shadow-xl_01": "#10182814", + "Colors/Effects/Shadows/shadow-xl_02": "#10182808", + "Colors/Effects/Shadows/shadow-skeumorphic-inner": "#1018280d", + "Colors/Effects/Shadows/shadow-skeumorphic-inner-border": "#1018282e", + "Colors/Effects/Focus rings/focus-ring": "#8184f8", + "Colors/Effects/Focus rings/focus-ring-error": "#a50e28", + "Component colors/Utility/Blue/utility-blue-600": "#1570ef", + "Component colors/Utility/Blue/utility-blue-700": "#175cd3", + "Component colors/Utility/Blue/utility-blue-500": "#2e90fa", + "Component colors/Utility/Blue/utility-blue-200": "#b2ddff", + "Component colors/Utility/Blue/utility-blue-50": "#eff8ff", + "Component colors/Utility/Blue/utility-blue-100": "#d1e9ff", + "Component colors/Utility/Blue/utility-blue-400": "#53b1fd", + "Component colors/Utility/Blue/utility-blue-300": "#84caff", + "Component colors/Utility/Brand/utility-brand-600": "#676ac6", + "Component colors/Utility/Brand/utility-brand-700": "#4d4f95", + "Component colors/Utility/Brand/utility-brand-500": "#8184f8", + "Component colors/Utility/Brand/utility-brand-200": "#c0c2fc", + "Component colors/Utility/Brand/utility-brand-50": "#e6e6fe", + "Component colors/Utility/Brand/utility-brand-100": "#d9dafd", + "Component colors/Utility/Brand/utility-brand-400": "#8e90f9", + "Component colors/Utility/Brand/utility-brand-50_alt": "#e6e6fe", + "Component colors/Utility/Brand/utility-brand-100_alt": "#d9dafd", + "Component colors/Utility/Brand/utility-brand-200_alt": "#c0c2fc", + "Component colors/Utility/Brand/utility-brand-400_alt": "#8e90f9", + "Component colors/Utility/Brand/utility-brand-500_alt": "#8184f8", + "Component colors/Utility/Brand/utility-brand-600_alt": "#676ac6", + "Component colors/Utility/Brand/utility-brand-700_alt": "#4d4f95", + "Component colors/Utility/Brand/utility-brand-300": "#a7a9fa", + "Component colors/Utility/Brand/utility-brand-900": "#27284a", + "Component colors/Utility/Brand/utility-brand-800": "#41427c", + "Component colors/Utility/Brand/utility-brand-300_alt": "#a7a9fa", + "Component colors/Utility/Brand/utility-brand-800_alt": "#41427c", + "Component colors/Utility/Brand/utility-brand-900_alt": "#27284a", + "Component colors/Utility/Gray/utility-gray-700": "#424242", + "Component colors/Utility/Gray/utility-gray-600": "#525252", + "Component colors/Utility/Gray/utility-gray-500": "#737373", + "Component colors/Utility/Gray/utility-gray-200": "#e5e5e5", + "Component colors/Utility/Gray/utility-gray-50": "#f7f7f7", + "Component colors/Utility/Gray/utility-gray-100": "#f5f5f5", + "Component colors/Utility/Gray/utility-gray-400": "#a3a3a3", + "Component colors/Utility/Gray/utility-gray-300": "#d6d6d6", + "Component colors/Utility/Gray/utility-gray-900": "#141414", + "Component colors/Utility/Gray/utility-gray-800": "#292929", + "Component colors/Utility/Error/utility-error-600": "#890c21", + "Component colors/Utility/Error/utility-error-700": "#6d091a", + "Component colors/Utility/Error/utility-error-500": "#a50e28", + "Component colors/Utility/Error/utility-error-200": "#e28897", + "Component colors/Utility/Error/utility-error-50": "#f9e7ea", + "Component colors/Utility/Error/utility-error-100": "#f3d0d6", + "Component colors/Utility/Error/utility-error-400": "#c41230", + "Component colors/Utility/Error/utility-error-300": "#d14159", + "Component colors/Utility/Warning/utility-warning-600": "#dc6803", + "Component colors/Utility/Warning/utility-warning-700": "#b54708", + "Component colors/Utility/Warning/utility-warning-500": "#f79009", + "Component colors/Utility/Warning/utility-warning-200": "#fedf89", + "Component colors/Utility/Warning/utility-warning-50": "#fffaeb", + "Component colors/Utility/Warning/utility-warning-100": "#fef0c7", + "Component colors/Utility/Warning/utility-warning-400": "#fdb022", + "Component colors/Utility/Warning/utility-warning-300": "#fec84b", + "Component colors/Utility/Success/utility-success-600": "#079455", + "Component colors/Utility/Success/utility-success-700": "#067647", + "Component colors/Utility/Success/utility-success-500": "#17b26a", + "Component colors/Utility/Success/utility-success-200": "#abefc6", + "Component colors/Utility/Success/utility-success-50": "#ecfdf3", + "Component colors/Utility/Success/utility-success-100": "#dcfae6", + "Component colors/Utility/Success/utility-success-400": "#47cd89", + "Component colors/Utility/Success/utility-success-300": "#75e0a7", + "Component colors/Utility/Orange/utility-orange-600": "#e04f16", + "Component colors/Utility/Orange/utility-orange-700": "#b93815", + "Component colors/Utility/Orange/utility-orange-500": "#ef6820", + "Component colors/Utility/Orange/utility-orange-200": "#f9dbaf", + "Component colors/Utility/Orange/utility-orange-50": "#fef6ee", + "Component colors/Utility/Orange/utility-orange-100": "#fdead7", + "Component colors/Utility/Orange/utility-orange-400": "#f38744", + "Component colors/Utility/Orange/utility-orange-300": "#f7b27a", + "Component colors/Utility/Blue dark/utility-blue-dark-600": "#155eef", + "Component colors/Utility/Blue dark/utility-blue-dark-700": "#004eeb", + "Component colors/Utility/Blue dark/utility-blue-dark-500": "#2970ff", + "Component colors/Utility/Blue dark/utility-blue-dark-200": "#b2ccff", + "Component colors/Utility/Blue dark/utility-blue-dark-50": "#eff4ff", + "Component colors/Utility/Blue dark/utility-blue-dark-100": "#d1e0ff", + "Component colors/Utility/Blue dark/utility-blue-dark-400": "#528bff", + "Component colors/Utility/Blue dark/utility-blue-dark-300": "#84adff", + "Component colors/Utility/Indigo/utility-indigo-600": "#444ce7", + "Component colors/Utility/Indigo/utility-indigo-700": "#3538cd", + "Component colors/Utility/Indigo/utility-indigo-500": "#6172f3", + "Component colors/Utility/Indigo/utility-indigo-200": "#c7d7fe", + "Component colors/Utility/Indigo/utility-indigo-50": "#eef4ff", + "Component colors/Utility/Indigo/utility-indigo-100": "#e0eaff", + "Component colors/Utility/Indigo/utility-indigo-400": "#8098f9", + "Component colors/Utility/Indigo/utility-indigo-300": "#a4bcfd", + "Component colors/Utility/Fuchsia/utility-fuchsia-600": "#ba24d5", + "Component colors/Utility/Fuchsia/utility-fuchsia-700": "#9f1ab1", + "Component colors/Utility/Fuchsia/utility-fuchsia-500": "#d444f1", + "Component colors/Utility/Fuchsia/utility-fuchsia-200": "#f6d0fe", + "Component colors/Utility/Fuchsia/utility-fuchsia-50": "#fdf4ff", + "Component colors/Utility/Fuchsia/utility-fuchsia-100": "#fbe8ff", + "Component colors/Utility/Fuchsia/utility-fuchsia-400": "#e478fa", + "Component colors/Utility/Fuchsia/utility-fuchsia-300": "#eeaafd", + "Component colors/Utility/Pink/utility-pink-600": "#dd2590", + "Component colors/Utility/Pink/utility-pink-700": "#c11574", + "Component colors/Utility/Pink/utility-pink-500": "#ee46bc", + "Component colors/Utility/Pink/utility-pink-200": "#fcceee", + "Component colors/Utility/Pink/utility-pink-50": "#fdf2fa", + "Component colors/Utility/Pink/utility-pink-100": "#fce7f6", + "Component colors/Utility/Pink/utility-pink-400": "#f670c7", + "Component colors/Utility/Pink/utility-pink-300": "#faa7e0", + "Component colors/Utility/Purple/utility-purple-600": "#6938ef", + "Component colors/Utility/Purple/utility-purple-700": "#5925dc", + "Component colors/Utility/Purple/utility-purple-500": "#7a5af8", + "Component colors/Utility/Purple/utility-purple-200": "#d9d6fe", + "Component colors/Utility/Purple/utility-purple-50": "#f4f3ff", + "Component colors/Utility/Purple/utility-purple-100": "#ebe9fe", + "Component colors/Utility/Purple/utility-purple-400": "#9b8afb", + "Component colors/Utility/Purple/utility-purple-300": "#bdb4fe", + "Component colors/Utility/Orange dark/utility-orange-dark-600": + "#e62e05", + "Component colors/Utility/Orange dark/utility-orange-dark-700": + "#bc1b06", + "Component colors/Utility/Orange dark/utility-orange-dark-500": + "#ff4405", + "Component colors/Utility/Orange dark/utility-orange-dark-200": + "#ffd6ae", + "Component colors/Utility/Orange dark/utility-orange-dark-50": + "#fff4ed", + "Component colors/Utility/Orange dark/utility-orange-dark-100": + "#ffe6d5", + "Component colors/Utility/Orange dark/utility-orange-dark-400": + "#ff692e", + "Component colors/Utility/Orange dark/utility-orange-dark-300": + "#ff9c66", + "Component colors/Utility/Blue light/utility-blue-light-600": "#0086c9", + "Component colors/Utility/Blue light/utility-blue-light-700": "#026aa2", + "Component colors/Utility/Blue light/utility-blue-light-500": "#0ba5ec", + "Component colors/Utility/Blue light/utility-blue-light-200": "#b9e6fe", + "Component colors/Utility/Blue light/utility-blue-light-50": "#f0f9ff", + "Component colors/Utility/Blue light/utility-blue-light-100": "#e0f2fe", + "Component colors/Utility/Blue light/utility-blue-light-400": "#36bffa", + "Component colors/Utility/Blue light/utility-blue-light-300": "#7cd4fd", + "Component colors/Utility/Gray blue/utility-gray-blue-600": "#3e4784", + "Component colors/Utility/Gray blue/utility-gray-blue-700": "#363f72", + "Component colors/Utility/Gray blue/utility-gray-blue-500": "#4e5ba6", + "Component colors/Utility/Gray blue/utility-gray-blue-200": "#d5d9eb", + "Component colors/Utility/Gray blue/utility-gray-blue-50": "#f8f9fc", + "Component colors/Utility/Gray blue/utility-gray-blue-100": "#eaecf5", + "Component colors/Utility/Gray blue/utility-gray-blue-400": "#717bbc", + "Component colors/Utility/Gray blue/utility-gray-blue-300": "#b3b8db", + "Component colors/Components/Tooltips/tooltip-supporting-text": + "#d6d6d6", + "Component colors/Components/Buttons/Brand/button-brand-bg": "#27284a", + "Component colors/Components/Buttons/Brand/button-brand-bg_hover": + "#4d4f95", + "Component colors/Components/Buttons/Brand/button-brand-fg": "#000000", + "Component colors/Components/Buttons/Brand/button-brand-fg_hover": + "#ffffff", + "Component colors/Components/Buttons/Secondary/button-secondary-bg": + "#ffffff", + "Component colors/Components/Buttons/Secondary/button-secondary-bg_hover": + "#f7f7f7", + "Component colors/Components/Buttons/Secondary/button-secondary-fg": + "#424242", + "Component colors/Components/Buttons/Secondary/button-secondary-fg_hover": + "#292929", + "Component colors/Components/Buttons/Secondary/button-secondary-border": + "#d6d6d6", + "Component colors/Components/Buttons/Secondary/button-secondary-border_hover": + "#d6d6d6", + "Component colors/Components/Buttons/Secondary color/button-secondary-color-bg": + "#ffffff", + "Component colors/Components/Buttons/Secondary color/button-secondary-color-bg_hover": + "#e6e6fe", + "Component colors/Components/Buttons/Secondary color/button-secondary-color-border_hover": + "#a7a9fa", + "Component colors/Components/Buttons/Secondary color/button-secondary-color-border": + "#a7a9fa", + "Component colors/Components/Buttons/Secondary color/button-secondary-color-fg": + "#4d4f95", + "Component colors/Components/Buttons/Secondary color/button-secondary-color-fg_hover": + "#41427c", + "Component colors/Components/Buttons/Primary error/button-primary-error-fg": + "#ffffff", + "Component colors/Components/Buttons/Primary error/button-primary-error-fg_hover": + "#ffffff", + "Component colors/Components/Buttons/Primary error/button-primary-error-bg": + "#890c21", + "Component colors/Components/Buttons/Primary error/button-primary-error-bg_hover": + "#6d091a", + "Component colors/Components/Buttons/Secondary error/button-secondary-error-fg": + "#6d091a", + "Component colors/Components/Buttons/Secondary error/button-secondary-error-fg_hover": + "#500713", + "Component colors/Components/Buttons/Secondary error/button-secondary-error-bg": + "#ffffff", + "Component colors/Components/Buttons/Secondary error/button-secondary-error-bg_hover": + "#f9e7ea", + "Component colors/Components/Buttons/Secondary error/button-secondary-error-border": + "#d14159", + "Component colors/Components/Buttons/Secondary error/button-secondary-error-border_hover": + "#d14159", + "Component colors/Components/Buttons/Tertiary/button-tertiary-fg": + "#525252", + "Component colors/Components/Buttons/Tertiary/button-tertiary-fg_hover": + "#424242", + "Component colors/Components/Buttons/Tertiary/button-tertiary-bg_hover": + "#f7f7f7", + "Component colors/Components/Buttons/Tertiary color/button-tertiary-color-fg": + "#4d4f95", + "Component colors/Components/Buttons/Tertiary color/button-tertiary-color-fg_hover": + "#41427c", + "Component colors/Components/Buttons/Tertiary color/button-tertiary-color-bg_hover": + "#e6e6fe", + "Component colors/Components/Buttons/Tertiary error/button-tertiary-error-fg": + "#6d091a", + "Component colors/Components/Buttons/Tertiary error/button-tertiary-error-fg_hover": + "#500713", + "Component colors/Components/Buttons/Tertiary error/button-tertiary-error-bg_hover": + "#f9e7ea", + "Component colors/Components/Toggles/toggle-button-fg_disabled": + "#f7f7f7", + "Colors/Border/border-warning": "#f79009", + "Colors/Border/border-warning_subtle": "#fec84b", + "Colors/Text/text-buy-primary": "#676ac6", + "Colors/Text/text-sell-primary": "#e31b54", + "Colors/Background/bg-sell-primary": "#e31b54", + "Colors/Background/bg-sell-primary_hover": "#c01048", + "Colors/Background/bg-buy-primary": "#8e90f9", + "Colors/Background/bg-buy-primary_hover": "#41427c", + "Colors/Border/border-success": "#17b26a", + "Component colors/Utility/Data/utility-data-positive-50": "#ecfdf3", + "Component colors/Utility/Data/utility-data-positive-100": "#dcfae6", + "Component colors/Utility/Data/utility-data-positive-200": "#abefc6", + "Component colors/Utility/Data/utility-data-positive-300": "#75e0a7", + "Component colors/Utility/Data/utility-data-positive-400": "#47cd89", + "Component colors/Utility/Data/utility-data-positive-500": "#17b26a", + "Component colors/Utility/Data/utility-data-positive-600": "#079455", + "Component colors/Utility/Data/utility-data-positive-700": "#067647", + "Component colors/Utility/Red/utility-red-700": "#6d091a", + "Component colors/Utility/Red/utility-red-600": "#890c21", + "Component colors/Utility/Red/utility-red-500": "#a50e28", + "Component colors/Utility/Red/utility-red-400": "#c41230", + "Component colors/Utility/Red/utility-red-300": "#d14159", + "Component colors/Utility/Red/utility-red-200": "#e28897", + "Component colors/Utility/Red/utility-red-100": "#f3d0d6", + "Component colors/Utility/Red/utility-red-50": "#f9e7ea", + "Component colors/Components/Buttons/Primary/button-primary-bg": + "#ffffff", + "Component colors/Components/Buttons/Primary/button-primary-bg_hover": + "#f7f7f7", + "Component colors/Components/Buttons/Primary/button-primary-fg": + "#424242", + "Component colors/Components/Buttons/Primary/button-primary-fg_hover": + "#292929", + "Component colors/Components/Buttons/Primary/button-primary-border": + "#d6d6d6", + "Component colors/Components/Buttons/Primary/button-primary-border_hover": + "#d6d6d6", + "Component colors/Components/Buttons/Primary/button-primary-fg_subtle": + "#424242", + "Colors/Border/border-sell": "#f63d68", + "Colors/Border/border-buy": "#8184f8", + "Colors/Text/text-black": "#000000", + "Colors/Text/text-primary_alt": "#fcfcfc", + "Colors/Border/border-hover": "#e5e5e5", + }, + }, + }, +} + +type UISK_Collection7 = UISK_Collection< + "4. Density", + "Comfortable" | "Compact" | "Spacious", + UISK_Variables7 +> +type UISK_Variables7 = { + "density-sm": number + "density-md": number + "density-lg": number + "density-xl": number + "density-xs": number +} + +const collection7: UISK_Collection7 = { + "4. Density": { + defaultModeName: "Comfortable", + modeNames: ["Comfortable", "Compact", "Spacious"], + modes: { + Comfortable: { + "density-sm": 24, + "density-md": 28, + "density-lg": 32, + "density-xl": 44, + "density-xs": 20, + }, + Compact: { + "density-sm": 20, + "density-md": 24, + "density-lg": 30, + "density-xl": 34, + "density-xs": 16, + }, + Spacious: { + "density-sm": 30, + "density-md": 34, + "density-lg": 40, + "density-xl": 48, + "density-xs": 26, + }, + }, + }, +} +const collections: UISK_Collections = { + ...collection0, + ...collection1, + ...collection2, + ...collection3, + ...collection4, + ...collection5, + ...collection6, + ...collection7, +} + +export type UISK_TextStyles = { + "Display 2xl/Regular": ResolvedTextStyleDefinition + "Display 2xl/Medium": ResolvedTextStyleDefinition + "Display 2xl/Semibold": ResolvedTextStyleDefinition + "Display 2xl/Bold": ResolvedTextStyleDefinition + "Display xl/Regular": ResolvedTextStyleDefinition + "Display xl/Medium": ResolvedTextStyleDefinition + "Display xl/Semibold": ResolvedTextStyleDefinition + "Display xl/Bold": ResolvedTextStyleDefinition + "Display lg/Regular": ResolvedTextStyleDefinition + "Display lg/Medium": ResolvedTextStyleDefinition + "Display lg/Semibold": ResolvedTextStyleDefinition + "Display lg/Bold": ResolvedTextStyleDefinition + "Display md/Regular": ResolvedTextStyleDefinition + "Display md/Medium": ResolvedTextStyleDefinition + "Display md/Semibold": ResolvedTextStyleDefinition + "Display md/Bold": ResolvedTextStyleDefinition + "Display sm/Regular": ResolvedTextStyleDefinition + "Display sm/Medium": ResolvedTextStyleDefinition + "Display sm/Semibold": ResolvedTextStyleDefinition + "Display sm/Bold": ResolvedTextStyleDefinition + "Display xs/Regular": ResolvedTextStyleDefinition + "Display xs/Medium": ResolvedTextStyleDefinition + "Display xs/Semibold": ResolvedTextStyleDefinition + "Display xs/Bold": ResolvedTextStyleDefinition + "Text xl/Regular": ResolvedTextStyleDefinition + "Text xl/Medium": ResolvedTextStyleDefinition + "Text xl/Semibold": ResolvedTextStyleDefinition + "Text xl/Bold": ResolvedTextStyleDefinition + "Text xl/Regular italic": ResolvedTextStyleDefinition + "Text xl/Medium italic": ResolvedTextStyleDefinition + "Text xl/Semibold italic": ResolvedTextStyleDefinition + "Text xl/Bold italic": ResolvedTextStyleDefinition + "Text xl/Regular underlined": ResolvedTextStyleDefinition + "Text lg/Regular": ResolvedTextStyleDefinition + "Text lg/Medium": ResolvedTextStyleDefinition + "Text lg/Semibold": ResolvedTextStyleDefinition + "Text lg/Bold": ResolvedTextStyleDefinition + "Text lg/Regular italic": ResolvedTextStyleDefinition + "Text lg/Medium italic": ResolvedTextStyleDefinition + "Text lg/Semibold italic": ResolvedTextStyleDefinition + "Text lg/Bold italic": ResolvedTextStyleDefinition + "Text lg/Regular underlined": ResolvedTextStyleDefinition + "Text md/Regular": ResolvedTextStyleDefinition + "Text md/Medium": ResolvedTextStyleDefinition + "Text md/Semibold": ResolvedTextStyleDefinition + "Text md/Bold": ResolvedTextStyleDefinition + "Text md/Regular italic": ResolvedTextStyleDefinition + "Text md/Medium italic": ResolvedTextStyleDefinition + "Text md/Semibold italic": ResolvedTextStyleDefinition + "Text md/Bold italic": ResolvedTextStyleDefinition + "Text md/Regular underlined": ResolvedTextStyleDefinition + "Text sm/Regular": ResolvedTextStyleDefinition + "Text sm/Medium": ResolvedTextStyleDefinition + "Text sm/Semibold": ResolvedTextStyleDefinition + "Text sm/Bold": ResolvedTextStyleDefinition + "Text sm/Regular italic": ResolvedTextStyleDefinition + "Text sm/Regular underlined": ResolvedTextStyleDefinition + "Text sm/Medium italic": ResolvedTextStyleDefinition + "Text sm/Semibold italic": ResolvedTextStyleDefinition + "Text sm/Bold italic": ResolvedTextStyleDefinition + "Text xs/Regular": ResolvedTextStyleDefinition + "Text xs/Medium": ResolvedTextStyleDefinition + "Text xs/Semibold": ResolvedTextStyleDefinition + "Text xs/Bold": ResolvedTextStyleDefinition + "Text xs/Regular italic": ResolvedTextStyleDefinition + "Text xs/Regular underlined": ResolvedTextStyleDefinition + "Text xs/Medium italic": ResolvedTextStyleDefinition + "Text xs/Semibold italic": ResolvedTextStyleDefinition + "Text xs/Bold italic": ResolvedTextStyleDefinition + "Text xxs/Regular": ResolvedTextStyleDefinition + "Text xxs/Medium": ResolvedTextStyleDefinition + "Text xxs/Semibold": ResolvedTextStyleDefinition + "Text xxs/Bold": ResolvedTextStyleDefinition + "Text xxs/Regular italic": ResolvedTextStyleDefinition + "Text xxs/Regular underlined": ResolvedTextStyleDefinition + "Text xxs/Medium italic": ResolvedTextStyleDefinition + "Text xxs/Semibold italic": ResolvedTextStyleDefinition + "Text xxs/Bold italic": ResolvedTextStyleDefinition +} +type ThemeTextStyles = { + "Display 2xl/Regular": ThemeTextStyle + "Display 2xl/Medium": ThemeTextStyle + "Display 2xl/Semibold": ThemeTextStyle + "Display 2xl/Bold": ThemeTextStyle + "Display xl/Regular": ThemeTextStyle + "Display xl/Medium": ThemeTextStyle + "Display xl/Semibold": ThemeTextStyle + "Display xl/Bold": ThemeTextStyle + "Display lg/Regular": ThemeTextStyle + "Display lg/Medium": ThemeTextStyle + "Display lg/Semibold": ThemeTextStyle + "Display lg/Bold": ThemeTextStyle + "Display md/Regular": ThemeTextStyle + "Display md/Medium": ThemeTextStyle + "Display md/Semibold": ThemeTextStyle + "Display md/Bold": ThemeTextStyle + "Display sm/Regular": ThemeTextStyle + "Display sm/Medium": ThemeTextStyle + "Display sm/Semibold": ThemeTextStyle + "Display sm/Bold": ThemeTextStyle + "Display xs/Regular": ThemeTextStyle + "Display xs/Medium": ThemeTextStyle + "Display xs/Semibold": ThemeTextStyle + "Display xs/Bold": ThemeTextStyle + "Text xl/Regular": ThemeTextStyle + "Text xl/Medium": ThemeTextStyle + "Text xl/Semibold": ThemeTextStyle + "Text xl/Bold": ThemeTextStyle + "Text xl/Regular italic": ThemeTextStyle + "Text xl/Medium italic": ThemeTextStyle + "Text xl/Semibold italic": ThemeTextStyle + "Text xl/Bold italic": ThemeTextStyle + "Text xl/Regular underlined": ThemeTextStyle + "Text lg/Regular": ThemeTextStyle + "Text lg/Medium": ThemeTextStyle + "Text lg/Semibold": ThemeTextStyle + "Text lg/Bold": ThemeTextStyle + "Text lg/Regular italic": ThemeTextStyle + "Text lg/Medium italic": ThemeTextStyle + "Text lg/Semibold italic": ThemeTextStyle + "Text lg/Bold italic": ThemeTextStyle + "Text lg/Regular underlined": ThemeTextStyle + "Text md/Regular": ThemeTextStyle + "Text md/Medium": ThemeTextStyle + "Text md/Semibold": ThemeTextStyle + "Text md/Bold": ThemeTextStyle + "Text md/Regular italic": ThemeTextStyle + "Text md/Medium italic": ThemeTextStyle + "Text md/Semibold italic": ThemeTextStyle + "Text md/Bold italic": ThemeTextStyle + "Text md/Regular underlined": ThemeTextStyle + "Text sm/Regular": ThemeTextStyle + "Text sm/Medium": ThemeTextStyle + "Text sm/Semibold": ThemeTextStyle + "Text sm/Bold": ThemeTextStyle + "Text sm/Regular italic": ThemeTextStyle + "Text sm/Regular underlined": ThemeTextStyle + "Text sm/Medium italic": ThemeTextStyle + "Text sm/Semibold italic": ThemeTextStyle + "Text sm/Bold italic": ThemeTextStyle + "Text xs/Regular": ThemeTextStyle + "Text xs/Medium": ThemeTextStyle + "Text xs/Semibold": ThemeTextStyle + "Text xs/Bold": ThemeTextStyle + "Text xs/Regular italic": ThemeTextStyle + "Text xs/Regular underlined": ThemeTextStyle + "Text xs/Medium italic": ThemeTextStyle + "Text xs/Semibold italic": ThemeTextStyle + "Text xs/Bold italic": ThemeTextStyle + "Text xxs/Regular": ThemeTextStyle + "Text xxs/Medium": ThemeTextStyle + "Text xxs/Semibold": ThemeTextStyle + "Text xxs/Bold": ThemeTextStyle + "Text xxs/Regular italic": ThemeTextStyle + "Text xxs/Regular underlined": ThemeTextStyle + "Text xxs/Medium italic": ThemeTextStyle + "Text xxs/Semibold italic": ThemeTextStyle + "Text xxs/Bold italic": ThemeTextStyle +} + +const internalTextStyles: ThemeTextStyles = { + "Display 2xl/Regular": { + name: "Display 2xl/Regular", + definition: { + fontSize: 38, + textDecoration: "NONE", + fontName: { family: "Work Sans", style: "Regular" }, + letterSpacing: { value: -2, unit: "PERCENT" }, + lineHeight: { value: 90, unit: "PIXELS" }, + leadingTrim: "NONE", + paragraphIndent: 0, + paragraphSpacing: 38, + listSpacing: 0, + hangingPunctuation: false, + hangingList: false, + textCase: "ORIGINAL", + }, + boundVariables: { + fontSize: { + fieldName: "fontSize", + collectionName: "7. Typography", + variableName: "Font size/display-2xl", + }, + fontStyle: { + fieldName: "fontStyle", + collectionName: "7. Typography", + variableName: "Font weight/regular", + }, + fontFamily: { + fieldName: "fontFamily", + collectionName: "7. Typography", + variableName: "Font family/font-family-display", + }, + paragraphSpacing: { + fieldName: "paragraphSpacing", + collectionName: "7. Typography", + variableName: "Font size/display-2xl", + }, + lineHeight: { + fieldName: "lineHeight", + collectionName: "7. Typography", + variableName: "Line height/display-2xl", + }, + }, + }, + "Display 2xl/Medium": { + name: "Display 2xl/Medium", + definition: { + fontSize: 38, + textDecoration: "NONE", + fontName: { family: "Work Sans", style: "Medium" }, + letterSpacing: { value: -2, unit: "PERCENT" }, + lineHeight: { value: 90, unit: "PIXELS" }, + leadingTrim: "NONE", + paragraphIndent: 0, + paragraphSpacing: 38, + listSpacing: 0, + hangingPunctuation: false, + hangingList: false, + textCase: "ORIGINAL", + }, + boundVariables: { + fontSize: { + fieldName: "fontSize", + collectionName: "7. Typography", + variableName: "Font size/display-2xl", + }, + fontStyle: { + fieldName: "fontStyle", + collectionName: "7. Typography", + variableName: "Font weight/medium", + }, + fontFamily: { + fieldName: "fontFamily", + collectionName: "7. Typography", + variableName: "Font family/font-family-display", + }, + paragraphSpacing: { + fieldName: "paragraphSpacing", + collectionName: "7. Typography", + variableName: "Font size/display-2xl", + }, + lineHeight: { + fieldName: "lineHeight", + collectionName: "7. Typography", + variableName: "Line height/display-2xl", + }, + }, + }, + "Display 2xl/Semibold": { + name: "Display 2xl/Semibold", + definition: { + fontSize: 38, + textDecoration: "NONE", + fontName: { family: "Work Sans", style: "SemiBold" }, + letterSpacing: { value: -2, unit: "PERCENT" }, + lineHeight: { value: 90, unit: "PIXELS" }, + leadingTrim: "NONE", + paragraphIndent: 0, + paragraphSpacing: 38, + listSpacing: 0, + hangingPunctuation: false, + hangingList: false, + textCase: "ORIGINAL", + }, + boundVariables: { + fontSize: { + fieldName: "fontSize", + collectionName: "7. Typography", + variableName: "Font size/display-2xl", + }, + fontStyle: { + fieldName: "fontStyle", + collectionName: "7. Typography", + variableName: "Font weight/semibold", + }, + fontFamily: { + fieldName: "fontFamily", + collectionName: "7. Typography", + variableName: "Font family/font-family-display", + }, + paragraphSpacing: { + fieldName: "paragraphSpacing", + collectionName: "7. Typography", + variableName: "Font size/display-2xl", + }, + lineHeight: { + fieldName: "lineHeight", + collectionName: "7. Typography", + variableName: "Line height/display-2xl", + }, + }, + }, + "Display 2xl/Bold": { + name: "Display 2xl/Bold", + definition: { + fontSize: 38, + textDecoration: "NONE", + fontName: { family: "Work Sans", style: "Bold" }, + letterSpacing: { value: -2, unit: "PERCENT" }, + lineHeight: { value: 90, unit: "PIXELS" }, + leadingTrim: "NONE", + paragraphIndent: 0, + paragraphSpacing: 38, + listSpacing: 0, + hangingPunctuation: false, + hangingList: false, + textCase: "ORIGINAL", + }, + boundVariables: { + fontSize: { + fieldName: "fontSize", + collectionName: "7. Typography", + variableName: "Font size/display-2xl", + }, + fontStyle: { + fieldName: "fontStyle", + collectionName: "7. Typography", + variableName: "Font weight/bold", + }, + fontFamily: { + fieldName: "fontFamily", + collectionName: "7. Typography", + variableName: "Font family/font-family-display", + }, + paragraphSpacing: { + fieldName: "paragraphSpacing", + collectionName: "7. Typography", + variableName: "Font size/display-2xl", + }, + lineHeight: { + fieldName: "lineHeight", + collectionName: "7. Typography", + variableName: "Line height/display-2xl", + }, + }, + }, + "Display xl/Regular": { + name: "Display xl/Regular", + definition: { + fontSize: 34, + textDecoration: "NONE", + fontName: { family: "Work Sans", style: "Regular" }, + letterSpacing: { value: -2, unit: "PERCENT" }, + lineHeight: { value: 72, unit: "PIXELS" }, + leadingTrim: "NONE", + paragraphIndent: 0, + paragraphSpacing: 34, + listSpacing: 0, + hangingPunctuation: false, + hangingList: false, + textCase: "ORIGINAL", + }, + boundVariables: { + fontSize: { + fieldName: "fontSize", + collectionName: "7. Typography", + variableName: "Font size/display-xl", + }, + fontStyle: { + fieldName: "fontStyle", + collectionName: "7. Typography", + variableName: "Font weight/regular", + }, + fontFamily: { + fieldName: "fontFamily", + collectionName: "7. Typography", + variableName: "Font family/font-family-display", + }, + paragraphSpacing: { + fieldName: "paragraphSpacing", + collectionName: "7. Typography", + variableName: "Font size/display-xl", + }, + lineHeight: { + fieldName: "lineHeight", + collectionName: "7. Typography", + variableName: "Line height/display-xl", + }, + }, + }, + "Display xl/Medium": { + name: "Display xl/Medium", + definition: { + fontSize: 34, + textDecoration: "NONE", + fontName: { family: "Work Sans", style: "Medium" }, + letterSpacing: { value: -2, unit: "PERCENT" }, + lineHeight: { value: 72, unit: "PIXELS" }, + leadingTrim: "NONE", + paragraphIndent: 0, + paragraphSpacing: 34, + listSpacing: 0, + hangingPunctuation: false, + hangingList: false, + textCase: "ORIGINAL", + }, + boundVariables: { + fontSize: { + fieldName: "fontSize", + collectionName: "7. Typography", + variableName: "Font size/display-xl", + }, + fontStyle: { + fieldName: "fontStyle", + collectionName: "7. Typography", + variableName: "Font weight/medium", + }, + fontFamily: { + fieldName: "fontFamily", + collectionName: "7. Typography", + variableName: "Font family/font-family-display", + }, + paragraphSpacing: { + fieldName: "paragraphSpacing", + collectionName: "7. Typography", + variableName: "Font size/display-xl", + }, + lineHeight: { + fieldName: "lineHeight", + collectionName: "7. Typography", + variableName: "Line height/display-xl", + }, + }, + }, + "Display xl/Semibold": { + name: "Display xl/Semibold", + definition: { + fontSize: 34, + textDecoration: "NONE", + fontName: { family: "Work Sans", style: "SemiBold" }, + letterSpacing: { value: -2, unit: "PERCENT" }, + lineHeight: { value: 72, unit: "PIXELS" }, + leadingTrim: "NONE", + paragraphIndent: 0, + paragraphSpacing: 34, + listSpacing: 0, + hangingPunctuation: false, + hangingList: false, + textCase: "ORIGINAL", + }, + boundVariables: { + fontSize: { + fieldName: "fontSize", + collectionName: "7. Typography", + variableName: "Font size/display-xl", + }, + fontStyle: { + fieldName: "fontStyle", + collectionName: "7. Typography", + variableName: "Font weight/semibold", + }, + fontFamily: { + fieldName: "fontFamily", + collectionName: "7. Typography", + variableName: "Font family/font-family-display", + }, + paragraphSpacing: { + fieldName: "paragraphSpacing", + collectionName: "7. Typography", + variableName: "Font size/display-xl", + }, + lineHeight: { + fieldName: "lineHeight", + collectionName: "7. Typography", + variableName: "Line height/display-xl", + }, + }, + }, + "Display xl/Bold": { + name: "Display xl/Bold", + definition: { + fontSize: 34, + textDecoration: "NONE", + fontName: { family: "Work Sans", style: "Bold" }, + letterSpacing: { value: -2, unit: "PERCENT" }, + lineHeight: { value: 72, unit: "PIXELS" }, + leadingTrim: "NONE", + paragraphIndent: 0, + paragraphSpacing: 34, + listSpacing: 0, + hangingPunctuation: false, + hangingList: false, + textCase: "ORIGINAL", + }, + boundVariables: { + fontSize: { + fieldName: "fontSize", + collectionName: "7. Typography", + variableName: "Font size/display-xl", + }, + fontStyle: { + fieldName: "fontStyle", + collectionName: "7. Typography", + variableName: "Font weight/bold", + }, + fontFamily: { + fieldName: "fontFamily", + collectionName: "7. Typography", + variableName: "Font family/font-family-display", + }, + paragraphSpacing: { + fieldName: "paragraphSpacing", + collectionName: "7. Typography", + variableName: "Font size/display-xl", + }, + lineHeight: { + fieldName: "lineHeight", + collectionName: "7. Typography", + variableName: "Line height/display-xl", + }, + }, + }, + "Display lg/Regular": { + name: "Display lg/Regular", + definition: { + fontSize: 30, + textDecoration: "NONE", + fontName: { family: "Work Sans", style: "Regular" }, + letterSpacing: { value: -2, unit: "PERCENT" }, + lineHeight: { value: 60, unit: "PIXELS" }, + leadingTrim: "NONE", + paragraphIndent: 0, + paragraphSpacing: 30, + listSpacing: 0, + hangingPunctuation: false, + hangingList: false, + textCase: "ORIGINAL", + }, + boundVariables: { + fontSize: { + fieldName: "fontSize", + collectionName: "7. Typography", + variableName: "Font size/display-lg", + }, + fontStyle: { + fieldName: "fontStyle", + collectionName: "7. Typography", + variableName: "Font weight/regular", + }, + fontFamily: { + fieldName: "fontFamily", + collectionName: "7. Typography", + variableName: "Font family/font-family-display", + }, + paragraphSpacing: { + fieldName: "paragraphSpacing", + collectionName: "7. Typography", + variableName: "Font size/display-lg", + }, + lineHeight: { + fieldName: "lineHeight", + collectionName: "7. Typography", + variableName: "Line height/display-lg", + }, + }, + }, + "Display lg/Medium": { + name: "Display lg/Medium", + definition: { + fontSize: 30, + textDecoration: "NONE", + fontName: { family: "Work Sans", style: "Medium" }, + letterSpacing: { value: -2, unit: "PERCENT" }, + lineHeight: { value: 60, unit: "PIXELS" }, + leadingTrim: "NONE", + paragraphIndent: 0, + paragraphSpacing: 30, + listSpacing: 0, + hangingPunctuation: false, + hangingList: false, + textCase: "ORIGINAL", + }, + boundVariables: { + fontSize: { + fieldName: "fontSize", + collectionName: "7. Typography", + variableName: "Font size/display-lg", + }, + fontStyle: { + fieldName: "fontStyle", + collectionName: "7. Typography", + variableName: "Font weight/medium", + }, + fontFamily: { + fieldName: "fontFamily", + collectionName: "7. Typography", + variableName: "Font family/font-family-display", + }, + paragraphSpacing: { + fieldName: "paragraphSpacing", + collectionName: "7. Typography", + variableName: "Font size/display-lg", + }, + lineHeight: { + fieldName: "lineHeight", + collectionName: "7. Typography", + variableName: "Line height/display-lg", + }, + }, + }, + "Display lg/Semibold": { + name: "Display lg/Semibold", + definition: { + fontSize: 30, + textDecoration: "NONE", + fontName: { family: "Work Sans", style: "SemiBold" }, + letterSpacing: { value: -2, unit: "PERCENT" }, + lineHeight: { value: 60, unit: "PIXELS" }, + leadingTrim: "NONE", + paragraphIndent: 0, + paragraphSpacing: 30, + listSpacing: 0, + hangingPunctuation: false, + hangingList: false, + textCase: "ORIGINAL", + }, + boundVariables: { + fontSize: { + fieldName: "fontSize", + collectionName: "7. Typography", + variableName: "Font size/display-lg", + }, + fontStyle: { + fieldName: "fontStyle", + collectionName: "7. Typography", + variableName: "Font weight/semibold", + }, + fontFamily: { + fieldName: "fontFamily", + collectionName: "7. Typography", + variableName: "Font family/font-family-display", + }, + paragraphSpacing: { + fieldName: "paragraphSpacing", + collectionName: "7. Typography", + variableName: "Font size/display-lg", + }, + lineHeight: { + fieldName: "lineHeight", + collectionName: "7. Typography", + variableName: "Line height/display-lg", + }, + }, + }, + "Display lg/Bold": { + name: "Display lg/Bold", + definition: { + fontSize: 30, + textDecoration: "NONE", + fontName: { family: "Work Sans", style: "Bold" }, + letterSpacing: { value: -2, unit: "PERCENT" }, + lineHeight: { value: 60, unit: "PIXELS" }, + leadingTrim: "NONE", + paragraphIndent: 0, + paragraphSpacing: 30, + listSpacing: 0, + hangingPunctuation: false, + hangingList: false, + textCase: "ORIGINAL", + }, + boundVariables: { + fontSize: { + fieldName: "fontSize", + collectionName: "7. Typography", + variableName: "Font size/display-lg", + }, + fontStyle: { + fieldName: "fontStyle", + collectionName: "7. Typography", + variableName: "Font weight/bold", + }, + fontFamily: { + fieldName: "fontFamily", + collectionName: "7. Typography", + variableName: "Font family/font-family-display", + }, + paragraphSpacing: { + fieldName: "paragraphSpacing", + collectionName: "7. Typography", + variableName: "Font size/display-lg", + }, + lineHeight: { + fieldName: "lineHeight", + collectionName: "7. Typography", + variableName: "Line height/display-lg", + }, + }, + }, + "Display md/Regular": { + name: "Display md/Regular", + definition: { + fontSize: 24, + textDecoration: "NONE", + fontName: { family: "Work Sans", style: "Regular" }, + letterSpacing: { value: -2, unit: "PERCENT" }, + lineHeight: { value: 44, unit: "PIXELS" }, + leadingTrim: "NONE", + paragraphIndent: 0, + paragraphSpacing: 24, + listSpacing: 0, + hangingPunctuation: false, + hangingList: false, + textCase: "ORIGINAL", + }, + boundVariables: { + fontSize: { + fieldName: "fontSize", + collectionName: "7. Typography", + variableName: "Font size/display-md", + }, + fontStyle: { + fieldName: "fontStyle", + collectionName: "7. Typography", + variableName: "Font weight/regular", + }, + fontFamily: { + fieldName: "fontFamily", + collectionName: "7. Typography", + variableName: "Font family/font-family-display", + }, + paragraphSpacing: { + fieldName: "paragraphSpacing", + collectionName: "7. Typography", + variableName: "Font size/display-md", + }, + lineHeight: { + fieldName: "lineHeight", + collectionName: "7. Typography", + variableName: "Line height/display-md", + }, + }, + }, + "Display md/Medium": { + name: "Display md/Medium", + definition: { + fontSize: 24, + textDecoration: "NONE", + fontName: { family: "Work Sans", style: "Medium" }, + letterSpacing: { value: -2, unit: "PERCENT" }, + lineHeight: { value: 44, unit: "PIXELS" }, + leadingTrim: "NONE", + paragraphIndent: 0, + paragraphSpacing: 24, + listSpacing: 0, + hangingPunctuation: false, + hangingList: false, + textCase: "ORIGINAL", + }, + boundVariables: { + fontSize: { + fieldName: "fontSize", + collectionName: "7. Typography", + variableName: "Font size/display-md", + }, + fontStyle: { + fieldName: "fontStyle", + collectionName: "7. Typography", + variableName: "Font weight/medium", + }, + fontFamily: { + fieldName: "fontFamily", + collectionName: "7. Typography", + variableName: "Font family/font-family-display", + }, + paragraphSpacing: { + fieldName: "paragraphSpacing", + collectionName: "7. Typography", + variableName: "Font size/display-md", + }, + lineHeight: { + fieldName: "lineHeight", + collectionName: "7. Typography", + variableName: "Line height/display-md", + }, + }, + }, + "Display md/Semibold": { + name: "Display md/Semibold", + definition: { + fontSize: 24, + textDecoration: "NONE", + fontName: { family: "Work Sans", style: "SemiBold" }, + letterSpacing: { value: -2, unit: "PERCENT" }, + lineHeight: { value: 44, unit: "PIXELS" }, + leadingTrim: "NONE", + paragraphIndent: 0, + paragraphSpacing: 24, + listSpacing: 0, + hangingPunctuation: false, + hangingList: false, + textCase: "ORIGINAL", + }, + boundVariables: { + fontSize: { + fieldName: "fontSize", + collectionName: "7. Typography", + variableName: "Font size/display-md", + }, + fontStyle: { + fieldName: "fontStyle", + collectionName: "7. Typography", + variableName: "Font weight/semibold", + }, + fontFamily: { + fieldName: "fontFamily", + collectionName: "7. Typography", + variableName: "Font family/font-family-display", + }, + paragraphSpacing: { + fieldName: "paragraphSpacing", + collectionName: "7. Typography", + variableName: "Font size/display-md", + }, + lineHeight: { + fieldName: "lineHeight", + collectionName: "7. Typography", + variableName: "Line height/display-md", + }, + }, + }, + "Display md/Bold": { + name: "Display md/Bold", + definition: { + fontSize: 24, + textDecoration: "NONE", + fontName: { family: "Work Sans", style: "Bold" }, + letterSpacing: { value: -2, unit: "PERCENT" }, + lineHeight: { value: 44, unit: "PIXELS" }, + leadingTrim: "NONE", + paragraphIndent: 0, + paragraphSpacing: 24, + listSpacing: 0, + hangingPunctuation: false, + hangingList: false, + textCase: "ORIGINAL", + }, + boundVariables: { + fontSize: { + fieldName: "fontSize", + collectionName: "7. Typography", + variableName: "Font size/display-md", + }, + fontStyle: { + fieldName: "fontStyle", + collectionName: "7. Typography", + variableName: "Font weight/bold", + }, + fontFamily: { + fieldName: "fontFamily", + collectionName: "7. Typography", + variableName: "Font family/font-family-display", + }, + paragraphSpacing: { + fieldName: "paragraphSpacing", + collectionName: "7. Typography", + variableName: "Font size/display-md", + }, + lineHeight: { + fieldName: "lineHeight", + collectionName: "7. Typography", + variableName: "Line height/display-md", + }, + }, + }, + "Display sm/Regular": { + name: "Display sm/Regular", + definition: { + fontSize: 20, + textDecoration: "NONE", + fontName: { family: "Work Sans", style: "Regular" }, + letterSpacing: { value: 0, unit: "PERCENT" }, + lineHeight: { value: 38, unit: "PIXELS" }, + leadingTrim: "NONE", + paragraphIndent: 0, + paragraphSpacing: 20, + listSpacing: 0, + hangingPunctuation: false, + hangingList: false, + textCase: "ORIGINAL", + }, + boundVariables: { + fontSize: { + fieldName: "fontSize", + collectionName: "7. Typography", + variableName: "Font size/display-sm", + }, + fontStyle: { + fieldName: "fontStyle", + collectionName: "7. Typography", + variableName: "Font weight/regular", + }, + fontFamily: { + fieldName: "fontFamily", + collectionName: "7. Typography", + variableName: "Font family/font-family-display", + }, + paragraphSpacing: { + fieldName: "paragraphSpacing", + collectionName: "7. Typography", + variableName: "Font size/display-sm", + }, + lineHeight: { + fieldName: "lineHeight", + collectionName: "7. Typography", + variableName: "Line height/display-sm", + }, + }, + }, + "Display sm/Medium": { + name: "Display sm/Medium", + definition: { + fontSize: 20, + textDecoration: "NONE", + fontName: { family: "Work Sans", style: "Medium" }, + letterSpacing: { value: 0, unit: "PERCENT" }, + lineHeight: { value: 38, unit: "PIXELS" }, + leadingTrim: "NONE", + paragraphIndent: 0, + paragraphSpacing: 20, + listSpacing: 0, + hangingPunctuation: false, + hangingList: false, + textCase: "ORIGINAL", + }, + boundVariables: { + fontSize: { + fieldName: "fontSize", + collectionName: "7. Typography", + variableName: "Font size/display-sm", + }, + fontStyle: { + fieldName: "fontStyle", + collectionName: "7. Typography", + variableName: "Font weight/medium", + }, + fontFamily: { + fieldName: "fontFamily", + collectionName: "7. Typography", + variableName: "Font family/font-family-display", + }, + paragraphSpacing: { + fieldName: "paragraphSpacing", + collectionName: "7. Typography", + variableName: "Font size/display-sm", + }, + lineHeight: { + fieldName: "lineHeight", + collectionName: "7. Typography", + variableName: "Line height/display-sm", + }, + }, + }, + "Display sm/Semibold": { + name: "Display sm/Semibold", + definition: { + fontSize: 20, + textDecoration: "NONE", + fontName: { family: "Work Sans", style: "SemiBold" }, + letterSpacing: { value: 0, unit: "PERCENT" }, + lineHeight: { value: 38, unit: "PIXELS" }, + leadingTrim: "NONE", + paragraphIndent: 0, + paragraphSpacing: 20, + listSpacing: 0, + hangingPunctuation: false, + hangingList: false, + textCase: "ORIGINAL", + }, + boundVariables: { + fontSize: { + fieldName: "fontSize", + collectionName: "7. Typography", + variableName: "Font size/display-sm", + }, + fontStyle: { + fieldName: "fontStyle", + collectionName: "7. Typography", + variableName: "Font weight/semibold", + }, + fontFamily: { + fieldName: "fontFamily", + collectionName: "7. Typography", + variableName: "Font family/font-family-display", + }, + paragraphSpacing: { + fieldName: "paragraphSpacing", + collectionName: "7. Typography", + variableName: "Font size/display-sm", + }, + lineHeight: { + fieldName: "lineHeight", + collectionName: "7. Typography", + variableName: "Line height/display-sm", + }, + }, + }, + "Display sm/Bold": { + name: "Display sm/Bold", + definition: { + fontSize: 20, + textDecoration: "NONE", + fontName: { family: "Work Sans", style: "Bold" }, + letterSpacing: { value: 0, unit: "PERCENT" }, + lineHeight: { value: 38, unit: "PIXELS" }, + leadingTrim: "NONE", + paragraphIndent: 0, + paragraphSpacing: 20, + listSpacing: 0, + hangingPunctuation: false, + hangingList: false, + textCase: "ORIGINAL", + }, + boundVariables: { + fontSize: { + fieldName: "fontSize", + collectionName: "7. Typography", + variableName: "Font size/display-sm", + }, + fontStyle: { + fieldName: "fontStyle", + collectionName: "7. Typography", + variableName: "Font weight/bold", + }, + fontFamily: { + fieldName: "fontFamily", + collectionName: "7. Typography", + variableName: "Font family/font-family-display", + }, + paragraphSpacing: { + fieldName: "paragraphSpacing", + collectionName: "7. Typography", + variableName: "Font size/display-sm", + }, + lineHeight: { + fieldName: "lineHeight", + collectionName: "7. Typography", + variableName: "Line height/display-sm", + }, + }, + }, + "Display xs/Regular": { + name: "Display xs/Regular", + definition: { + fontSize: 18, + textDecoration: "NONE", + fontName: { family: "Work Sans", style: "Regular" }, + letterSpacing: { value: 0, unit: "PERCENT" }, + lineHeight: { value: 32, unit: "PIXELS" }, + leadingTrim: "NONE", + paragraphIndent: 0, + paragraphSpacing: 18, + listSpacing: 0, + hangingPunctuation: false, + hangingList: false, + textCase: "ORIGINAL", + }, + boundVariables: { + fontSize: { + fieldName: "fontSize", + collectionName: "7. Typography", + variableName: "Font size/display-xs", + }, + fontStyle: { + fieldName: "fontStyle", + collectionName: "7. Typography", + variableName: "Font weight/regular", + }, + fontFamily: { + fieldName: "fontFamily", + collectionName: "7. Typography", + variableName: "Font family/font-family-display", + }, + paragraphSpacing: { + fieldName: "paragraphSpacing", + collectionName: "7. Typography", + variableName: "Font size/display-xs", + }, + lineHeight: { + fieldName: "lineHeight", + collectionName: "7. Typography", + variableName: "Line height/display-xs", + }, + }, + }, + "Display xs/Medium": { + name: "Display xs/Medium", + definition: { + fontSize: 18, + textDecoration: "NONE", + fontName: { family: "Work Sans", style: "Medium" }, + letterSpacing: { value: 0, unit: "PERCENT" }, + lineHeight: { value: 32, unit: "PIXELS" }, + leadingTrim: "NONE", + paragraphIndent: 0, + paragraphSpacing: 18, + listSpacing: 0, + hangingPunctuation: false, + hangingList: false, + textCase: "ORIGINAL", + }, + boundVariables: { + fontSize: { + fieldName: "fontSize", + collectionName: "7. Typography", + variableName: "Font size/display-xs", + }, + fontStyle: { + fieldName: "fontStyle", + collectionName: "7. Typography", + variableName: "Font weight/medium", + }, + fontFamily: { + fieldName: "fontFamily", + collectionName: "7. Typography", + variableName: "Font family/font-family-display", + }, + paragraphSpacing: { + fieldName: "paragraphSpacing", + collectionName: "7. Typography", + variableName: "Font size/display-xs", + }, + lineHeight: { + fieldName: "lineHeight", + collectionName: "7. Typography", + variableName: "Line height/display-xs", + }, + }, + }, + "Display xs/Semibold": { + name: "Display xs/Semibold", + definition: { + fontSize: 18, + textDecoration: "NONE", + fontName: { family: "Work Sans", style: "SemiBold" }, + letterSpacing: { value: 0, unit: "PERCENT" }, + lineHeight: { value: 32, unit: "PIXELS" }, + leadingTrim: "NONE", + paragraphIndent: 0, + paragraphSpacing: 18, + listSpacing: 0, + hangingPunctuation: false, + hangingList: false, + textCase: "ORIGINAL", + }, + boundVariables: { + fontSize: { + fieldName: "fontSize", + collectionName: "7. Typography", + variableName: "Font size/display-xs", + }, + fontStyle: { + fieldName: "fontStyle", + collectionName: "7. Typography", + variableName: "Font weight/semibold", + }, + fontFamily: { + fieldName: "fontFamily", + collectionName: "7. Typography", + variableName: "Font family/font-family-display", + }, + paragraphSpacing: { + fieldName: "paragraphSpacing", + collectionName: "7. Typography", + variableName: "Font size/display-xs", + }, + lineHeight: { + fieldName: "lineHeight", + collectionName: "7. Typography", + variableName: "Line height/display-xs", + }, + }, + }, + "Display xs/Bold": { + name: "Display xs/Bold", + definition: { + fontSize: 18, + textDecoration: "NONE", + fontName: { family: "Work Sans", style: "Bold" }, + letterSpacing: { value: 0, unit: "PERCENT" }, + lineHeight: { value: 32, unit: "PIXELS" }, + leadingTrim: "NONE", + paragraphIndent: 0, + paragraphSpacing: 18, + listSpacing: 0, + hangingPunctuation: false, + hangingList: false, + textCase: "ORIGINAL", + }, + boundVariables: { + fontSize: { + fieldName: "fontSize", + collectionName: "7. Typography", + variableName: "Font size/display-xs", + }, + fontStyle: { + fieldName: "fontStyle", + collectionName: "7. Typography", + variableName: "Font weight/bold", + }, + fontFamily: { + fieldName: "fontFamily", + collectionName: "7. Typography", + variableName: "Font family/font-family-display", + }, + paragraphSpacing: { + fieldName: "paragraphSpacing", + collectionName: "7. Typography", + variableName: "Font size/display-xs", + }, + lineHeight: { + fieldName: "lineHeight", + collectionName: "7. Typography", + variableName: "Line height/display-xs", + }, + }, + }, + "Text xl/Regular": { + name: "Text xl/Regular", + definition: { + fontSize: 16, + textDecoration: "NONE", + fontName: { family: "Work Sans", style: "Regular" }, + letterSpacing: { value: 0, unit: "PERCENT" }, + lineHeight: { value: 30, unit: "PIXELS" }, + leadingTrim: "NONE", + paragraphIndent: 0, + paragraphSpacing: 16, + listSpacing: 0, + hangingPunctuation: false, + hangingList: false, + textCase: "ORIGINAL", + }, + boundVariables: { + fontSize: { + fieldName: "fontSize", + collectionName: "7. Typography", + variableName: "Font size/text-xl", + }, + fontStyle: { + fieldName: "fontStyle", + collectionName: "7. Typography", + variableName: "Font weight/regular", + }, + fontFamily: { + fieldName: "fontFamily", + collectionName: "7. Typography", + variableName: "Font family/font-family-body", + }, + paragraphSpacing: { + fieldName: "paragraphSpacing", + collectionName: "7. Typography", + variableName: "Font size/text-xl", + }, + lineHeight: { + fieldName: "lineHeight", + collectionName: "7. Typography", + variableName: "Line height/text-xl", + }, + }, + }, + "Text xl/Medium": { + name: "Text xl/Medium", + definition: { + fontSize: 16, + textDecoration: "NONE", + fontName: { family: "Work Sans", style: "Medium" }, + letterSpacing: { value: 0, unit: "PERCENT" }, + lineHeight: { value: 30, unit: "PIXELS" }, + leadingTrim: "NONE", + paragraphIndent: 0, + paragraphSpacing: 16, + listSpacing: 0, + hangingPunctuation: false, + hangingList: false, + textCase: "ORIGINAL", + }, + boundVariables: { + fontSize: { + fieldName: "fontSize", + collectionName: "7. Typography", + variableName: "Font size/text-xl", + }, + fontStyle: { + fieldName: "fontStyle", + collectionName: "7. Typography", + variableName: "Font weight/medium", + }, + fontFamily: { + fieldName: "fontFamily", + collectionName: "7. Typography", + variableName: "Font family/font-family-body", + }, + paragraphSpacing: { + fieldName: "paragraphSpacing", + collectionName: "7. Typography", + variableName: "Font size/text-xl", + }, + lineHeight: { + fieldName: "lineHeight", + collectionName: "7. Typography", + variableName: "Line height/text-xl", + }, + }, + }, + "Text xl/Semibold": { + name: "Text xl/Semibold", + definition: { + fontSize: 16, + textDecoration: "NONE", + fontName: { family: "Work Sans", style: "SemiBold" }, + letterSpacing: { value: 0, unit: "PERCENT" }, + lineHeight: { value: 30, unit: "PIXELS" }, + leadingTrim: "NONE", + paragraphIndent: 0, + paragraphSpacing: 16, + listSpacing: 0, + hangingPunctuation: false, + hangingList: false, + textCase: "ORIGINAL", + }, + boundVariables: { + fontSize: { + fieldName: "fontSize", + collectionName: "7. Typography", + variableName: "Font size/text-xl", + }, + fontStyle: { + fieldName: "fontStyle", + collectionName: "7. Typography", + variableName: "Font weight/semibold", + }, + fontFamily: { + fieldName: "fontFamily", + collectionName: "7. Typography", + variableName: "Font family/font-family-body", + }, + paragraphSpacing: { + fieldName: "paragraphSpacing", + collectionName: "7. Typography", + variableName: "Font size/text-xl", + }, + lineHeight: { + fieldName: "lineHeight", + collectionName: "7. Typography", + variableName: "Line height/text-xl", + }, + }, + }, + "Text xl/Bold": { + name: "Text xl/Bold", + definition: { + fontSize: 16, + textDecoration: "NONE", + fontName: { family: "Work Sans", style: "Bold" }, + letterSpacing: { value: 0, unit: "PERCENT" }, + lineHeight: { value: 30, unit: "PIXELS" }, + leadingTrim: "NONE", + paragraphIndent: 0, + paragraphSpacing: 16, + listSpacing: 0, + hangingPunctuation: false, + hangingList: false, + textCase: "ORIGINAL", + }, + boundVariables: { + fontSize: { + fieldName: "fontSize", + collectionName: "7. Typography", + variableName: "Font size/text-xl", + }, + fontStyle: { + fieldName: "fontStyle", + collectionName: "7. Typography", + variableName: "Font weight/bold", + }, + fontFamily: { + fieldName: "fontFamily", + collectionName: "7. Typography", + variableName: "Font family/font-family-body", + }, + paragraphSpacing: { + fieldName: "paragraphSpacing", + collectionName: "7. Typography", + variableName: "Font size/text-xl", + }, + lineHeight: { + fieldName: "lineHeight", + collectionName: "7. Typography", + variableName: "Line height/text-xl", + }, + }, + }, + "Text xl/Regular italic": { + name: "Text xl/Regular italic", + definition: { + fontSize: 16, + textDecoration: "NONE", + fontName: { family: "Work Sans", style: "Italic" }, + letterSpacing: { value: 0, unit: "PERCENT" }, + lineHeight: { value: 30, unit: "PIXELS" }, + leadingTrim: "NONE", + paragraphIndent: 0, + paragraphSpacing: 16, + listSpacing: 0, + hangingPunctuation: false, + hangingList: false, + textCase: "ORIGINAL", + }, + boundVariables: { + fontSize: { + fieldName: "fontSize", + collectionName: "7. Typography", + variableName: "Font size/text-xl", + }, + fontStyle: { + fieldName: "fontStyle", + collectionName: "7. Typography", + variableName: "Font weight/regular-italic", + }, + fontFamily: { + fieldName: "fontFamily", + collectionName: "7. Typography", + variableName: "Font family/font-family-body", + }, + paragraphSpacing: { + fieldName: "paragraphSpacing", + collectionName: "7. Typography", + variableName: "Font size/text-xl", + }, + lineHeight: { + fieldName: "lineHeight", + collectionName: "7. Typography", + variableName: "Line height/text-xl", + }, + }, + }, + "Text xl/Medium italic": { + name: "Text xl/Medium italic", + definition: { + fontSize: 16, + textDecoration: "NONE", + fontName: { family: "Work Sans", style: "Medium Italic" }, + letterSpacing: { value: 0, unit: "PERCENT" }, + lineHeight: { value: 30, unit: "PIXELS" }, + leadingTrim: "NONE", + paragraphIndent: 0, + paragraphSpacing: 16, + listSpacing: 0, + hangingPunctuation: false, + hangingList: false, + textCase: "ORIGINAL", + }, + boundVariables: { + fontSize: { + fieldName: "fontSize", + collectionName: "7. Typography", + variableName: "Font size/text-xl", + }, + fontStyle: { + fieldName: "fontStyle", + collectionName: "7. Typography", + variableName: "Font weight/medium-italic", + }, + fontFamily: { + fieldName: "fontFamily", + collectionName: "7. Typography", + variableName: "Font family/font-family-body", + }, + paragraphSpacing: { + fieldName: "paragraphSpacing", + collectionName: "7. Typography", + variableName: "Font size/text-xl", + }, + lineHeight: { + fieldName: "lineHeight", + collectionName: "7. Typography", + variableName: "Line height/text-xl", + }, + }, + }, + "Text xl/Semibold italic": { + name: "Text xl/Semibold italic", + definition: { + fontSize: 16, + textDecoration: "NONE", + fontName: { family: "Work Sans", style: "SemiBold Italic" }, + letterSpacing: { value: 0, unit: "PERCENT" }, + lineHeight: { value: 30, unit: "PIXELS" }, + leadingTrim: "NONE", + paragraphIndent: 0, + paragraphSpacing: 16, + listSpacing: 0, + hangingPunctuation: false, + hangingList: false, + textCase: "ORIGINAL", + }, + boundVariables: { + fontSize: { + fieldName: "fontSize", + collectionName: "7. Typography", + variableName: "Font size/text-xl", + }, + fontStyle: { + fieldName: "fontStyle", + collectionName: "7. Typography", + variableName: "Font weight/semibold-italic", + }, + fontFamily: { + fieldName: "fontFamily", + collectionName: "7. Typography", + variableName: "Font family/font-family-body", + }, + paragraphSpacing: { + fieldName: "paragraphSpacing", + collectionName: "7. Typography", + variableName: "Font size/text-xl", + }, + lineHeight: { + fieldName: "lineHeight", + collectionName: "7. Typography", + variableName: "Line height/text-xl", + }, + }, + }, + "Text xl/Bold italic": { + name: "Text xl/Bold italic", + definition: { + fontSize: 16, + textDecoration: "NONE", + fontName: { family: "Work Sans", style: "Bold Italic" }, + letterSpacing: { value: 0, unit: "PERCENT" }, + lineHeight: { value: 30, unit: "PIXELS" }, + leadingTrim: "NONE", + paragraphIndent: 0, + paragraphSpacing: 16, + listSpacing: 0, + hangingPunctuation: false, + hangingList: false, + textCase: "ORIGINAL", + }, + boundVariables: { + fontSize: { + fieldName: "fontSize", + collectionName: "7. Typography", + variableName: "Font size/text-xl", + }, + fontStyle: { + fieldName: "fontStyle", + collectionName: "7. Typography", + variableName: "Font weight/bold-italic", + }, + fontFamily: { + fieldName: "fontFamily", + collectionName: "7. Typography", + variableName: "Font family/font-family-body", + }, + paragraphSpacing: { + fieldName: "paragraphSpacing", + collectionName: "7. Typography", + variableName: "Font size/text-xl", + }, + lineHeight: { + fieldName: "lineHeight", + collectionName: "7. Typography", + variableName: "Line height/text-xl", + }, + }, + }, + "Text xl/Regular underlined": { + name: "Text xl/Regular underlined", + definition: { + fontSize: 16, + textDecoration: "UNDERLINE", + fontName: { family: "Work Sans", style: "Regular" }, + letterSpacing: { value: 0, unit: "PERCENT" }, + lineHeight: { value: 30, unit: "PIXELS" }, + leadingTrim: "NONE", + paragraphIndent: 0, + paragraphSpacing: 16, + listSpacing: 0, + hangingPunctuation: false, + hangingList: false, + textCase: "ORIGINAL", + }, + boundVariables: { + fontSize: { + fieldName: "fontSize", + collectionName: "7. Typography", + variableName: "Font size/text-xl", + }, + fontStyle: { + fieldName: "fontStyle", + collectionName: "7. Typography", + variableName: "Font weight/regular", + }, + fontFamily: { + fieldName: "fontFamily", + collectionName: "7. Typography", + variableName: "Font family/font-family-body", + }, + paragraphSpacing: { + fieldName: "paragraphSpacing", + collectionName: "7. Typography", + variableName: "Font size/text-xl", + }, + lineHeight: { + fieldName: "lineHeight", + collectionName: "7. Typography", + variableName: "Line height/text-xl", + }, + }, + }, + "Text lg/Regular": { + name: "Text lg/Regular", + definition: { + fontSize: 14, + textDecoration: "NONE", + fontName: { family: "Work Sans", style: "Regular" }, + letterSpacing: { value: 0, unit: "PERCENT" }, + lineHeight: { value: 28, unit: "PIXELS" }, + leadingTrim: "NONE", + paragraphIndent: 0, + paragraphSpacing: 14, + listSpacing: 0, + hangingPunctuation: false, + hangingList: false, + textCase: "ORIGINAL", + }, + boundVariables: { + fontSize: { + fieldName: "fontSize", + collectionName: "7. Typography", + variableName: "Font size/text-lg", + }, + fontStyle: { + fieldName: "fontStyle", + collectionName: "7. Typography", + variableName: "Font weight/regular", + }, + fontFamily: { + fieldName: "fontFamily", + collectionName: "7. Typography", + variableName: "Font family/font-family-body", + }, + paragraphSpacing: { + fieldName: "paragraphSpacing", + collectionName: "7. Typography", + variableName: "Font size/text-lg", + }, + lineHeight: { + fieldName: "lineHeight", + collectionName: "7. Typography", + variableName: "Line height/text-lg", + }, + }, + }, + "Text lg/Medium": { + name: "Text lg/Medium", + definition: { + fontSize: 14, + textDecoration: "NONE", + fontName: { family: "Work Sans", style: "Medium" }, + letterSpacing: { value: 0, unit: "PERCENT" }, + lineHeight: { value: 28, unit: "PIXELS" }, + leadingTrim: "NONE", + paragraphIndent: 0, + paragraphSpacing: 14, + listSpacing: 0, + hangingPunctuation: false, + hangingList: false, + textCase: "ORIGINAL", + }, + boundVariables: { + fontSize: { + fieldName: "fontSize", + collectionName: "7. Typography", + variableName: "Font size/text-lg", + }, + fontStyle: { + fieldName: "fontStyle", + collectionName: "7. Typography", + variableName: "Font weight/medium", + }, + fontFamily: { + fieldName: "fontFamily", + collectionName: "7. Typography", + variableName: "Font family/font-family-body", + }, + paragraphSpacing: { + fieldName: "paragraphSpacing", + collectionName: "7. Typography", + variableName: "Font size/text-lg", + }, + lineHeight: { + fieldName: "lineHeight", + collectionName: "7. Typography", + variableName: "Line height/text-lg", + }, + }, + }, + "Text lg/Semibold": { + name: "Text lg/Semibold", + definition: { + fontSize: 14, + textDecoration: "NONE", + fontName: { family: "Work Sans", style: "SemiBold" }, + letterSpacing: { value: 0, unit: "PERCENT" }, + lineHeight: { value: 28, unit: "PIXELS" }, + leadingTrim: "NONE", + paragraphIndent: 0, + paragraphSpacing: 14, + listSpacing: 0, + hangingPunctuation: false, + hangingList: false, + textCase: "ORIGINAL", + }, + boundVariables: { + fontSize: { + fieldName: "fontSize", + collectionName: "7. Typography", + variableName: "Font size/text-lg", + }, + fontStyle: { + fieldName: "fontStyle", + collectionName: "7. Typography", + variableName: "Font weight/semibold", + }, + fontFamily: { + fieldName: "fontFamily", + collectionName: "7. Typography", + variableName: "Font family/font-family-body", + }, + paragraphSpacing: { + fieldName: "paragraphSpacing", + collectionName: "7. Typography", + variableName: "Font size/text-lg", + }, + lineHeight: { + fieldName: "lineHeight", + collectionName: "7. Typography", + variableName: "Line height/text-lg", + }, + }, + }, + "Text lg/Bold": { + name: "Text lg/Bold", + definition: { + fontSize: 14, + textDecoration: "NONE", + fontName: { family: "Work Sans", style: "Bold" }, + letterSpacing: { value: 0, unit: "PERCENT" }, + lineHeight: { value: 28, unit: "PIXELS" }, + leadingTrim: "NONE", + paragraphIndent: 0, + paragraphSpacing: 14, + listSpacing: 0, + hangingPunctuation: false, + hangingList: false, + textCase: "ORIGINAL", + }, + boundVariables: { + fontSize: { + fieldName: "fontSize", + collectionName: "7. Typography", + variableName: "Font size/text-lg", + }, + fontStyle: { + fieldName: "fontStyle", + collectionName: "7. Typography", + variableName: "Font weight/bold", + }, + fontFamily: { + fieldName: "fontFamily", + collectionName: "7. Typography", + variableName: "Font family/font-family-body", + }, + paragraphSpacing: { + fieldName: "paragraphSpacing", + collectionName: "7. Typography", + variableName: "Font size/text-lg", + }, + lineHeight: { + fieldName: "lineHeight", + collectionName: "7. Typography", + variableName: "Line height/text-lg", + }, + }, + }, + "Text lg/Regular italic": { + name: "Text lg/Regular italic", + definition: { + fontSize: 14, + textDecoration: "NONE", + fontName: { family: "Work Sans", style: "Italic" }, + letterSpacing: { value: 0, unit: "PERCENT" }, + lineHeight: { value: 28, unit: "PIXELS" }, + leadingTrim: "NONE", + paragraphIndent: 0, + paragraphSpacing: 14, + listSpacing: 0, + hangingPunctuation: false, + hangingList: false, + textCase: "ORIGINAL", + }, + boundVariables: { + fontSize: { + fieldName: "fontSize", + collectionName: "7. Typography", + variableName: "Font size/text-lg", + }, + fontStyle: { + fieldName: "fontStyle", + collectionName: "7. Typography", + variableName: "Font weight/regular-italic", + }, + fontFamily: { + fieldName: "fontFamily", + collectionName: "7. Typography", + variableName: "Font family/font-family-body", + }, + paragraphSpacing: { + fieldName: "paragraphSpacing", + collectionName: "7. Typography", + variableName: "Font size/text-lg", + }, + lineHeight: { + fieldName: "lineHeight", + collectionName: "7. Typography", + variableName: "Line height/text-lg", + }, + }, + }, + "Text lg/Medium italic": { + name: "Text lg/Medium italic", + definition: { + fontSize: 14, + textDecoration: "NONE", + fontName: { family: "Roboto", style: "Medium Italic" }, + letterSpacing: { value: 0, unit: "PERCENT" }, + lineHeight: { value: 28, unit: "PIXELS" }, + leadingTrim: "NONE", + paragraphIndent: 0, + paragraphSpacing: 14, + listSpacing: 0, + hangingPunctuation: false, + hangingList: false, + textCase: "ORIGINAL", + }, + boundVariables: { + fontSize: { + fieldName: "fontSize", + collectionName: "7. Typography", + variableName: "Font size/text-lg", + }, + fontStyle: { + fieldName: "fontStyle", + collectionName: "7. Typography", + variableName: "Font weight/medium-italic", + }, + fontFamily: { + fieldName: "fontFamily", + collectionName: "7. Typography", + variableName: "Font family/font-family-body", + }, + paragraphSpacing: { + fieldName: "paragraphSpacing", + collectionName: "7. Typography", + variableName: "Font size/text-lg", + }, + lineHeight: { + fieldName: "lineHeight", + collectionName: "7. Typography", + variableName: "Line height/text-lg", + }, + }, + }, + "Text lg/Semibold italic": { + name: "Text lg/Semibold italic", + definition: { + fontSize: 14, + textDecoration: "NONE", + fontName: { family: "Work Sans", style: "SemiBold Italic" }, + letterSpacing: { value: 0, unit: "PERCENT" }, + lineHeight: { value: 28, unit: "PIXELS" }, + leadingTrim: "NONE", + paragraphIndent: 0, + paragraphSpacing: 14, + listSpacing: 0, + hangingPunctuation: false, + hangingList: false, + textCase: "ORIGINAL", + }, + boundVariables: { + fontSize: { + fieldName: "fontSize", + collectionName: "7. Typography", + variableName: "Font size/text-lg", + }, + fontStyle: { + fieldName: "fontStyle", + collectionName: "7. Typography", + variableName: "Font weight/semibold-italic", + }, + fontFamily: { + fieldName: "fontFamily", + collectionName: "7. Typography", + variableName: "Font family/font-family-body", + }, + paragraphSpacing: { + fieldName: "paragraphSpacing", + collectionName: "7. Typography", + variableName: "Font size/text-lg", + }, + lineHeight: { + fieldName: "lineHeight", + collectionName: "7. Typography", + variableName: "Line height/text-lg", + }, + }, + }, + "Text lg/Bold italic": { + name: "Text lg/Bold italic", + definition: { + fontSize: 14, + textDecoration: "NONE", + fontName: { family: "Work Sans", style: "Bold Italic" }, + letterSpacing: { value: 0, unit: "PERCENT" }, + lineHeight: { value: 28, unit: "PIXELS" }, + leadingTrim: "NONE", + paragraphIndent: 0, + paragraphSpacing: 14, + listSpacing: 0, + hangingPunctuation: false, + hangingList: false, + textCase: "ORIGINAL", + }, + boundVariables: { + fontSize: { + fieldName: "fontSize", + collectionName: "7. Typography", + variableName: "Font size/text-lg", + }, + fontStyle: { + fieldName: "fontStyle", + collectionName: "7. Typography", + variableName: "Font weight/bold-italic", + }, + fontFamily: { + fieldName: "fontFamily", + collectionName: "7. Typography", + variableName: "Font family/font-family-body", + }, + paragraphSpacing: { + fieldName: "paragraphSpacing", + collectionName: "7. Typography", + variableName: "Font size/text-lg", + }, + lineHeight: { + fieldName: "lineHeight", + collectionName: "7. Typography", + variableName: "Line height/text-lg", + }, + }, + }, + "Text lg/Regular underlined": { + name: "Text lg/Regular underlined", + definition: { + fontSize: 14, + textDecoration: "UNDERLINE", + fontName: { family: "Work Sans", style: "Regular" }, + letterSpacing: { value: 0, unit: "PERCENT" }, + lineHeight: { value: 28, unit: "PIXELS" }, + leadingTrim: "NONE", + paragraphIndent: 0, + paragraphSpacing: 14, + listSpacing: 0, + hangingPunctuation: false, + hangingList: false, + textCase: "ORIGINAL", + }, + boundVariables: { + fontSize: { + fieldName: "fontSize", + collectionName: "7. Typography", + variableName: "Font size/text-lg", + }, + fontStyle: { + fieldName: "fontStyle", + collectionName: "7. Typography", + variableName: "Font weight/regular", + }, + fontFamily: { + fieldName: "fontFamily", + collectionName: "7. Typography", + variableName: "Font family/font-family-body", + }, + paragraphSpacing: { + fieldName: "paragraphSpacing", + collectionName: "7. Typography", + variableName: "Font size/text-lg", + }, + lineHeight: { + fieldName: "lineHeight", + collectionName: "7. Typography", + variableName: "Line height/text-lg", + }, + }, + }, + "Text md/Regular": { + name: "Text md/Regular", + definition: { + fontSize: 12, + textDecoration: "NONE", + fontName: { family: "Work Sans", style: "Regular" }, + letterSpacing: { value: 0, unit: "PERCENT" }, + lineHeight: { value: 24, unit: "PIXELS" }, + leadingTrim: "NONE", + paragraphIndent: 0, + paragraphSpacing: 12, + listSpacing: 0, + hangingPunctuation: false, + hangingList: false, + textCase: "ORIGINAL", + }, + boundVariables: { + fontSize: { + fieldName: "fontSize", + collectionName: "7. Typography", + variableName: "Font size/text-md", + }, + fontStyle: { + fieldName: "fontStyle", + collectionName: "7. Typography", + variableName: "Font weight/regular", + }, + fontFamily: { + fieldName: "fontFamily", + collectionName: "7. Typography", + variableName: "Font family/font-family-body", + }, + paragraphSpacing: { + fieldName: "paragraphSpacing", + collectionName: "7. Typography", + variableName: "Font size/text-md", + }, + lineHeight: { + fieldName: "lineHeight", + collectionName: "7. Typography", + variableName: "Line height/text-md", + }, + }, + }, + "Text md/Medium": { + name: "Text md/Medium", + definition: { + fontSize: 12, + textDecoration: "NONE", + fontName: { family: "Work Sans", style: "Medium" }, + letterSpacing: { value: 0, unit: "PERCENT" }, + lineHeight: { value: 24, unit: "PIXELS" }, + leadingTrim: "NONE", + paragraphIndent: 0, + paragraphSpacing: 12, + listSpacing: 0, + hangingPunctuation: false, + hangingList: false, + textCase: "ORIGINAL", + }, + boundVariables: { + fontSize: { + fieldName: "fontSize", + collectionName: "7. Typography", + variableName: "Font size/text-md", + }, + fontStyle: { + fieldName: "fontStyle", + collectionName: "7. Typography", + variableName: "Font weight/medium", + }, + fontFamily: { + fieldName: "fontFamily", + collectionName: "7. Typography", + variableName: "Font family/font-family-body", + }, + paragraphSpacing: { + fieldName: "paragraphSpacing", + collectionName: "7. Typography", + variableName: "Font size/text-md", + }, + lineHeight: { + fieldName: "lineHeight", + collectionName: "7. Typography", + variableName: "Line height/text-md", + }, + }, + }, + "Text md/Semibold": { + name: "Text md/Semibold", + definition: { + fontSize: 12, + textDecoration: "NONE", + fontName: { family: "Work Sans", style: "SemiBold" }, + letterSpacing: { value: 0, unit: "PERCENT" }, + lineHeight: { value: 24, unit: "PIXELS" }, + leadingTrim: "NONE", + paragraphIndent: 0, + paragraphSpacing: 12, + listSpacing: 0, + hangingPunctuation: false, + hangingList: false, + textCase: "ORIGINAL", + }, + boundVariables: { + fontSize: { + fieldName: "fontSize", + collectionName: "7. Typography", + variableName: "Font size/text-md", + }, + fontStyle: { + fieldName: "fontStyle", + collectionName: "7. Typography", + variableName: "Font weight/semibold", + }, + fontFamily: { + fieldName: "fontFamily", + collectionName: "7. Typography", + variableName: "Font family/font-family-body", + }, + paragraphSpacing: { + fieldName: "paragraphSpacing", + collectionName: "7. Typography", + variableName: "Font size/text-md", + }, + lineHeight: { + fieldName: "lineHeight", + collectionName: "7. Typography", + variableName: "Line height/text-md", + }, + }, + }, + "Text md/Bold": { + name: "Text md/Bold", + definition: { + fontSize: 12, + textDecoration: "NONE", + fontName: { family: "Work Sans", style: "Bold" }, + letterSpacing: { value: 0, unit: "PERCENT" }, + lineHeight: { value: 24, unit: "PIXELS" }, + leadingTrim: "NONE", + paragraphIndent: 0, + paragraphSpacing: 12, + listSpacing: 0, + hangingPunctuation: false, + hangingList: false, + textCase: "ORIGINAL", + }, + boundVariables: { + fontSize: { + fieldName: "fontSize", + collectionName: "7. Typography", + variableName: "Font size/text-md", + }, + fontStyle: { + fieldName: "fontStyle", + collectionName: "7. Typography", + variableName: "Font weight/bold", + }, + fontFamily: { + fieldName: "fontFamily", + collectionName: "7. Typography", + variableName: "Font family/font-family-body", + }, + paragraphSpacing: { + fieldName: "paragraphSpacing", + collectionName: "7. Typography", + variableName: "Font size/text-md", + }, + lineHeight: { + fieldName: "lineHeight", + collectionName: "7. Typography", + variableName: "Line height/text-md", + }, + }, + }, + "Text md/Regular italic": { + name: "Text md/Regular italic", + definition: { + fontSize: 12, + textDecoration: "NONE", + fontName: { family: "Work Sans", style: "Italic" }, + letterSpacing: { value: 0, unit: "PERCENT" }, + lineHeight: { value: 24, unit: "PIXELS" }, + leadingTrim: "NONE", + paragraphIndent: 0, + paragraphSpacing: 12, + listSpacing: 0, + hangingPunctuation: false, + hangingList: false, + textCase: "ORIGINAL", + }, + boundVariables: { + fontSize: { + fieldName: "fontSize", + collectionName: "7. Typography", + variableName: "Font size/text-md", + }, + fontStyle: { + fieldName: "fontStyle", + collectionName: "7. Typography", + variableName: "Font weight/regular-italic", + }, + fontFamily: { + fieldName: "fontFamily", + collectionName: "7. Typography", + variableName: "Font family/font-family-body", + }, + paragraphSpacing: { + fieldName: "paragraphSpacing", + collectionName: "7. Typography", + variableName: "Font size/text-md", + }, + lineHeight: { + fieldName: "lineHeight", + collectionName: "7. Typography", + variableName: "Line height/text-md", + }, + }, + }, + "Text md/Medium italic": { + name: "Text md/Medium italic", + definition: { + fontSize: 12, + textDecoration: "NONE", + fontName: { family: "Work Sans", style: "Medium Italic" }, + letterSpacing: { value: 0, unit: "PERCENT" }, + lineHeight: { value: 24, unit: "PIXELS" }, + leadingTrim: "NONE", + paragraphIndent: 0, + paragraphSpacing: 12, + listSpacing: 0, + hangingPunctuation: false, + hangingList: false, + textCase: "ORIGINAL", + }, + boundVariables: { + fontSize: { + fieldName: "fontSize", + collectionName: "7. Typography", + variableName: "Font size/text-md", + }, + fontStyle: { + fieldName: "fontStyle", + collectionName: "7. Typography", + variableName: "Font weight/medium-italic", + }, + fontFamily: { + fieldName: "fontFamily", + collectionName: "7. Typography", + variableName: "Font family/font-family-body", + }, + paragraphSpacing: { + fieldName: "paragraphSpacing", + collectionName: "7. Typography", + variableName: "Font size/text-md", + }, + lineHeight: { + fieldName: "lineHeight", + collectionName: "7. Typography", + variableName: "Line height/text-md", + }, + }, + }, + "Text md/Semibold italic": { + name: "Text md/Semibold italic", + definition: { + fontSize: 12, + textDecoration: "NONE", + fontName: { family: "Work Sans", style: "SemiBold Italic" }, + letterSpacing: { value: 0, unit: "PERCENT" }, + lineHeight: { value: 24, unit: "PIXELS" }, + leadingTrim: "NONE", + paragraphIndent: 0, + paragraphSpacing: 12, + listSpacing: 0, + hangingPunctuation: false, + hangingList: false, + textCase: "ORIGINAL", + }, + boundVariables: { + fontSize: { + fieldName: "fontSize", + collectionName: "7. Typography", + variableName: "Font size/text-md", + }, + fontStyle: { + fieldName: "fontStyle", + collectionName: "7. Typography", + variableName: "Font weight/semibold-italic", + }, + fontFamily: { + fieldName: "fontFamily", + collectionName: "7. Typography", + variableName: "Font family/font-family-body", + }, + paragraphSpacing: { + fieldName: "paragraphSpacing", + collectionName: "7. Typography", + variableName: "Font size/text-md", + }, + lineHeight: { + fieldName: "lineHeight", + collectionName: "7. Typography", + variableName: "Line height/text-md", + }, + }, + }, + "Text md/Bold italic": { + name: "Text md/Bold italic", + definition: { + fontSize: 12, + textDecoration: "NONE", + fontName: { family: "Work Sans", style: "Bold Italic" }, + letterSpacing: { value: 0, unit: "PERCENT" }, + lineHeight: { value: 24, unit: "PIXELS" }, + leadingTrim: "NONE", + paragraphIndent: 0, + paragraphSpacing: 12, + listSpacing: 0, + hangingPunctuation: false, + hangingList: false, + textCase: "ORIGINAL", + }, + boundVariables: { + fontSize: { + fieldName: "fontSize", + collectionName: "7. Typography", + variableName: "Font size/text-md", + }, + fontStyle: { + fieldName: "fontStyle", + collectionName: "7. Typography", + variableName: "Font weight/bold-italic", + }, + fontFamily: { + fieldName: "fontFamily", + collectionName: "7. Typography", + variableName: "Font family/font-family-body", + }, + paragraphSpacing: { + fieldName: "paragraphSpacing", + collectionName: "7. Typography", + variableName: "Font size/text-md", + }, + lineHeight: { + fieldName: "lineHeight", + collectionName: "7. Typography", + variableName: "Line height/text-md", + }, + }, + }, + "Text md/Regular underlined": { + name: "Text md/Regular underlined", + definition: { + fontSize: 12, + textDecoration: "UNDERLINE", + fontName: { family: "Work Sans", style: "Regular" }, + letterSpacing: { value: 0, unit: "PERCENT" }, + lineHeight: { value: 24, unit: "PIXELS" }, + leadingTrim: "NONE", + paragraphIndent: 0, + paragraphSpacing: 12, + listSpacing: 0, + hangingPunctuation: false, + hangingList: false, + textCase: "ORIGINAL", + }, + boundVariables: { + fontSize: { + fieldName: "fontSize", + collectionName: "7. Typography", + variableName: "Font size/text-md", + }, + fontStyle: { + fieldName: "fontStyle", + collectionName: "7. Typography", + variableName: "Font weight/regular", + }, + fontFamily: { + fieldName: "fontFamily", + collectionName: "7. Typography", + variableName: "Font family/font-family-body", + }, + paragraphSpacing: { + fieldName: "paragraphSpacing", + collectionName: "7. Typography", + variableName: "Font size/text-md", + }, + lineHeight: { + fieldName: "lineHeight", + collectionName: "7. Typography", + variableName: "Line height/text-md", + }, + }, + }, + "Text sm/Regular": { + name: "Text sm/Regular", + definition: { + fontSize: 11, + textDecoration: "NONE", + fontName: { family: "Work Sans", style: "Regular" }, + letterSpacing: { value: 0, unit: "PERCENT" }, + lineHeight: { value: 20, unit: "PIXELS" }, + leadingTrim: "NONE", + paragraphIndent: 0, + paragraphSpacing: 11, + listSpacing: 0, + hangingPunctuation: false, + hangingList: false, + textCase: "ORIGINAL", + }, + boundVariables: { + fontSize: { + fieldName: "fontSize", + collectionName: "7. Typography", + variableName: "Font size/text-sm", + }, + fontStyle: { + fieldName: "fontStyle", + collectionName: "7. Typography", + variableName: "Font weight/regular", + }, + fontFamily: { + fieldName: "fontFamily", + collectionName: "7. Typography", + variableName: "Font family/font-family-body", + }, + paragraphSpacing: { + fieldName: "paragraphSpacing", + collectionName: "7. Typography", + variableName: "Font size/text-sm", + }, + lineHeight: { + fieldName: "lineHeight", + collectionName: "7. Typography", + variableName: "Line height/text-sm", + }, + }, + }, + "Text sm/Medium": { + name: "Text sm/Medium", + definition: { + fontSize: 11, + textDecoration: "NONE", + fontName: { family: "Work Sans", style: "Medium" }, + letterSpacing: { value: 0, unit: "PERCENT" }, + lineHeight: { value: 20, unit: "PIXELS" }, + leadingTrim: "NONE", + paragraphIndent: 0, + paragraphSpacing: 11, + listSpacing: 0, + hangingPunctuation: false, + hangingList: false, + textCase: "ORIGINAL", + }, + boundVariables: { + fontSize: { + fieldName: "fontSize", + collectionName: "7. Typography", + variableName: "Font size/text-sm", + }, + fontStyle: { + fieldName: "fontStyle", + collectionName: "7. Typography", + variableName: "Font weight/medium", + }, + fontFamily: { + fieldName: "fontFamily", + collectionName: "7. Typography", + variableName: "Font family/font-family-body", + }, + paragraphSpacing: { + fieldName: "paragraphSpacing", + collectionName: "7. Typography", + variableName: "Font size/text-sm", + }, + lineHeight: { + fieldName: "lineHeight", + collectionName: "7. Typography", + variableName: "Line height/text-sm", + }, + }, + }, + "Text sm/Semibold": { + name: "Text sm/Semibold", + definition: { + fontSize: 11, + textDecoration: "NONE", + fontName: { family: "Work Sans", style: "SemiBold" }, + letterSpacing: { value: 0, unit: "PERCENT" }, + lineHeight: { value: 20, unit: "PIXELS" }, + leadingTrim: "NONE", + paragraphIndent: 0, + paragraphSpacing: 11, + listSpacing: 0, + hangingPunctuation: false, + hangingList: false, + textCase: "ORIGINAL", + }, + boundVariables: { + fontSize: { + fieldName: "fontSize", + collectionName: "7. Typography", + variableName: "Font size/text-sm", + }, + fontStyle: { + fieldName: "fontStyle", + collectionName: "7. Typography", + variableName: "Font weight/semibold", + }, + fontFamily: { + fieldName: "fontFamily", + collectionName: "7. Typography", + variableName: "Font family/font-family-body", + }, + paragraphSpacing: { + fieldName: "paragraphSpacing", + collectionName: "7. Typography", + variableName: "Font size/text-sm", + }, + lineHeight: { + fieldName: "lineHeight", + collectionName: "7. Typography", + variableName: "Line height/text-sm", + }, + }, + }, + "Text sm/Bold": { + name: "Text sm/Bold", + definition: { + fontSize: 11, + textDecoration: "NONE", + fontName: { family: "Work Sans", style: "Bold" }, + letterSpacing: { value: 0, unit: "PERCENT" }, + lineHeight: { value: 20, unit: "PIXELS" }, + leadingTrim: "NONE", + paragraphIndent: 0, + paragraphSpacing: 11, + listSpacing: 0, + hangingPunctuation: false, + hangingList: false, + textCase: "ORIGINAL", + }, + boundVariables: { + fontSize: { + fieldName: "fontSize", + collectionName: "7. Typography", + variableName: "Font size/text-sm", + }, + fontStyle: { + fieldName: "fontStyle", + collectionName: "7. Typography", + variableName: "Font weight/bold", + }, + fontFamily: { + fieldName: "fontFamily", + collectionName: "7. Typography", + variableName: "Font family/font-family-body", + }, + paragraphSpacing: { + fieldName: "paragraphSpacing", + collectionName: "7. Typography", + variableName: "Font size/text-sm", + }, + lineHeight: { + fieldName: "lineHeight", + collectionName: "7. Typography", + variableName: "Line height/text-sm", + }, + }, + }, + "Text sm/Regular italic": { + name: "Text sm/Regular italic", + definition: { + fontSize: 11, + textDecoration: "NONE", + fontName: { family: "Work Sans", style: "Italic" }, + letterSpacing: { value: 0, unit: "PERCENT" }, + lineHeight: { value: 20, unit: "PIXELS" }, + leadingTrim: "NONE", + paragraphIndent: 0, + paragraphSpacing: 11, + listSpacing: 0, + hangingPunctuation: false, + hangingList: false, + textCase: "ORIGINAL", + }, + boundVariables: { + fontSize: { + fieldName: "fontSize", + collectionName: "7. Typography", + variableName: "Font size/text-sm", + }, + fontStyle: { + fieldName: "fontStyle", + collectionName: "7. Typography", + variableName: "Font weight/regular-italic", + }, + fontFamily: { + fieldName: "fontFamily", + collectionName: "7. Typography", + variableName: "Font family/font-family-body", + }, + paragraphSpacing: { + fieldName: "paragraphSpacing", + collectionName: "7. Typography", + variableName: "Font size/text-sm", + }, + lineHeight: { + fieldName: "lineHeight", + collectionName: "7. Typography", + variableName: "Line height/text-sm", + }, + }, + }, + "Text sm/Regular underlined": { + name: "Text sm/Regular underlined", + definition: { + fontSize: 11, + textDecoration: "UNDERLINE", + fontName: { family: "Work Sans", style: "Regular" }, + letterSpacing: { value: 0, unit: "PERCENT" }, + lineHeight: { value: 20, unit: "PIXELS" }, + leadingTrim: "NONE", + paragraphIndent: 0, + paragraphSpacing: 11, + listSpacing: 0, + hangingPunctuation: false, + hangingList: false, + textCase: "ORIGINAL", + }, + boundVariables: { + fontSize: { + fieldName: "fontSize", + collectionName: "7. Typography", + variableName: "Font size/text-sm", + }, + fontStyle: { + fieldName: "fontStyle", + collectionName: "7. Typography", + variableName: "Font weight/regular", + }, + fontFamily: { + fieldName: "fontFamily", + collectionName: "7. Typography", + variableName: "Font family/font-family-body", + }, + paragraphSpacing: { + fieldName: "paragraphSpacing", + collectionName: "7. Typography", + variableName: "Font size/text-sm", + }, + lineHeight: { + fieldName: "lineHeight", + collectionName: "7. Typography", + variableName: "Line height/text-sm", + }, + }, + }, + "Text sm/Medium italic": { + name: "Text sm/Medium italic", + definition: { + fontSize: 11, + textDecoration: "NONE", + fontName: { family: "Work Sans", style: "Medium Italic" }, + letterSpacing: { value: 0, unit: "PERCENT" }, + lineHeight: { value: 20, unit: "PIXELS" }, + leadingTrim: "NONE", + paragraphIndent: 0, + paragraphSpacing: 11, + listSpacing: 0, + hangingPunctuation: false, + hangingList: false, + textCase: "ORIGINAL", + }, + boundVariables: { + fontSize: { + fieldName: "fontSize", + collectionName: "7. Typography", + variableName: "Font size/text-sm", + }, + fontStyle: { + fieldName: "fontStyle", + collectionName: "7. Typography", + variableName: "Font weight/medium-italic", + }, + fontFamily: { + fieldName: "fontFamily", + collectionName: "7. Typography", + variableName: "Font family/font-family-body", + }, + paragraphSpacing: { + fieldName: "paragraphSpacing", + collectionName: "7. Typography", + variableName: "Font size/text-sm", + }, + lineHeight: { + fieldName: "lineHeight", + collectionName: "7. Typography", + variableName: "Line height/text-sm", + }, + }, + }, + "Text sm/Semibold italic": { + name: "Text sm/Semibold italic", + definition: { + fontSize: 11, + textDecoration: "NONE", + fontName: { family: "Work Sans", style: "SemiBold Italic" }, + letterSpacing: { value: 0, unit: "PERCENT" }, + lineHeight: { value: 20, unit: "PIXELS" }, + leadingTrim: "NONE", + paragraphIndent: 0, + paragraphSpacing: 11, + listSpacing: 0, + hangingPunctuation: false, + hangingList: false, + textCase: "ORIGINAL", + }, + boundVariables: { + fontSize: { + fieldName: "fontSize", + collectionName: "7. Typography", + variableName: "Font size/text-sm", + }, + fontStyle: { + fieldName: "fontStyle", + collectionName: "7. Typography", + variableName: "Font weight/semibold-italic", + }, + fontFamily: { + fieldName: "fontFamily", + collectionName: "7. Typography", + variableName: "Font family/font-family-body", + }, + paragraphSpacing: { + fieldName: "paragraphSpacing", + collectionName: "7. Typography", + variableName: "Font size/text-sm", + }, + lineHeight: { + fieldName: "lineHeight", + collectionName: "7. Typography", + variableName: "Line height/text-sm", + }, + }, + }, + "Text sm/Bold italic": { + name: "Text sm/Bold italic", + definition: { + fontSize: 11, + textDecoration: "NONE", + fontName: { family: "Work Sans", style: "Bold Italic" }, + letterSpacing: { value: 0, unit: "PERCENT" }, + lineHeight: { value: 20, unit: "PIXELS" }, + leadingTrim: "NONE", + paragraphIndent: 0, + paragraphSpacing: 11, + listSpacing: 0, + hangingPunctuation: false, + hangingList: false, + textCase: "ORIGINAL", + }, + boundVariables: { + fontSize: { + fieldName: "fontSize", + collectionName: "7. Typography", + variableName: "Font size/text-sm", + }, + fontStyle: { + fieldName: "fontStyle", + collectionName: "7. Typography", + variableName: "Font weight/bold-italic", + }, + fontFamily: { + fieldName: "fontFamily", + collectionName: "7. Typography", + variableName: "Font family/font-family-body", + }, + paragraphSpacing: { + fieldName: "paragraphSpacing", + collectionName: "7. Typography", + variableName: "Font size/text-sm", + }, + lineHeight: { + fieldName: "lineHeight", + collectionName: "7. Typography", + variableName: "Line height/text-sm", + }, + }, + }, + "Text xs/Regular": { + name: "Text xs/Regular", + definition: { + fontSize: 10, + textDecoration: "NONE", + fontName: { family: "Work Sans", style: "Regular" }, + letterSpacing: { value: 0, unit: "PERCENT" }, + lineHeight: { value: 14, unit: "PIXELS" }, + leadingTrim: "NONE", + paragraphIndent: 0, + paragraphSpacing: 10, + listSpacing: 0, + hangingPunctuation: false, + hangingList: false, + textCase: "ORIGINAL", + }, + boundVariables: { + fontSize: { + fieldName: "fontSize", + collectionName: "7. Typography", + variableName: "Font size/text-xs", + }, + fontStyle: { + fieldName: "fontStyle", + collectionName: "7. Typography", + variableName: "Font weight/regular", + }, + fontFamily: { + fieldName: "fontFamily", + collectionName: "7. Typography", + variableName: "Font family/font-family-body", + }, + paragraphSpacing: { + fieldName: "paragraphSpacing", + collectionName: "7. Typography", + variableName: "Font size/text-xs", + }, + lineHeight: { + fieldName: "lineHeight", + collectionName: "7. Typography", + variableName: "Line height/text-3xs", + }, + }, + }, + "Text xs/Medium": { + name: "Text xs/Medium", + definition: { + fontSize: 10, + textDecoration: "NONE", + fontName: { family: "Work Sans", style: "Medium" }, + letterSpacing: { value: 0, unit: "PERCENT" }, + lineHeight: { value: 14, unit: "PIXELS" }, + leadingTrim: "NONE", + paragraphIndent: 0, + paragraphSpacing: 10, + listSpacing: 0, + hangingPunctuation: false, + hangingList: false, + textCase: "ORIGINAL", + }, + boundVariables: { + fontSize: { + fieldName: "fontSize", + collectionName: "7. Typography", + variableName: "Font size/text-xs", + }, + fontStyle: { + fieldName: "fontStyle", + collectionName: "7. Typography", + variableName: "Font weight/medium", + }, + fontFamily: { + fieldName: "fontFamily", + collectionName: "7. Typography", + variableName: "Font family/font-family-body", + }, + paragraphSpacing: { + fieldName: "paragraphSpacing", + collectionName: "7. Typography", + variableName: "Font size/text-xs", + }, + lineHeight: { + fieldName: "lineHeight", + collectionName: "7. Typography", + variableName: "Line height/text-3xs", + }, + }, + }, + "Text xs/Semibold": { + name: "Text xs/Semibold", + definition: { + fontSize: 10, + textDecoration: "NONE", + fontName: { family: "Work Sans", style: "SemiBold" }, + letterSpacing: { value: 0, unit: "PERCENT" }, + lineHeight: { value: 14, unit: "PIXELS" }, + leadingTrim: "NONE", + paragraphIndent: 0, + paragraphSpacing: 10, + listSpacing: 0, + hangingPunctuation: false, + hangingList: false, + textCase: "ORIGINAL", + }, + boundVariables: { + fontSize: { + fieldName: "fontSize", + collectionName: "7. Typography", + variableName: "Font size/text-xs", + }, + fontStyle: { + fieldName: "fontStyle", + collectionName: "7. Typography", + variableName: "Font weight/semibold", + }, + fontFamily: { + fieldName: "fontFamily", + collectionName: "7. Typography", + variableName: "Font family/font-family-body", + }, + paragraphSpacing: { + fieldName: "paragraphSpacing", + collectionName: "7. Typography", + variableName: "Font size/text-xs", + }, + lineHeight: { + fieldName: "lineHeight", + collectionName: "7. Typography", + variableName: "Line height/text-3xs", + }, + }, + }, + "Text xs/Bold": { + name: "Text xs/Bold", + definition: { + fontSize: 10, + textDecoration: "NONE", + fontName: { family: "Work Sans", style: "Bold" }, + letterSpacing: { value: 0, unit: "PERCENT" }, + lineHeight: { value: 14, unit: "PIXELS" }, + leadingTrim: "NONE", + paragraphIndent: 0, + paragraphSpacing: 10, + listSpacing: 0, + hangingPunctuation: false, + hangingList: false, + textCase: "ORIGINAL", + }, + boundVariables: { + fontSize: { + fieldName: "fontSize", + collectionName: "7. Typography", + variableName: "Font size/text-xs", + }, + fontStyle: { + fieldName: "fontStyle", + collectionName: "7. Typography", + variableName: "Font weight/bold", + }, + fontFamily: { + fieldName: "fontFamily", + collectionName: "7. Typography", + variableName: "Font family/font-family-body", + }, + paragraphSpacing: { + fieldName: "paragraphSpacing", + collectionName: "7. Typography", + variableName: "Font size/text-xs", + }, + lineHeight: { + fieldName: "lineHeight", + collectionName: "7. Typography", + variableName: "Line height/text-3xs", + }, + }, + }, + "Text xs/Regular italic": { + name: "Text xs/Regular italic", + definition: { + fontSize: 10, + textDecoration: "NONE", + fontName: { family: "Work Sans", style: "Italic" }, + letterSpacing: { value: 0, unit: "PERCENT" }, + lineHeight: { value: 14, unit: "PIXELS" }, + leadingTrim: "NONE", + paragraphIndent: 0, + paragraphSpacing: 10, + listSpacing: 0, + hangingPunctuation: false, + hangingList: false, + textCase: "ORIGINAL", + }, + boundVariables: { + fontSize: { + fieldName: "fontSize", + collectionName: "7. Typography", + variableName: "Font size/text-xs", + }, + fontStyle: { + fieldName: "fontStyle", + collectionName: "7. Typography", + variableName: "Font weight/regular-italic", + }, + fontFamily: { + fieldName: "fontFamily", + collectionName: "7. Typography", + variableName: "Font family/font-family-body", + }, + paragraphSpacing: { + fieldName: "paragraphSpacing", + collectionName: "7. Typography", + variableName: "Font size/text-xs", + }, + lineHeight: { + fieldName: "lineHeight", + collectionName: "7. Typography", + variableName: "Line height/text-3xs", + }, + }, + }, + "Text xs/Regular underlined": { + name: "Text xs/Regular underlined", + definition: { + fontSize: 10, + textDecoration: "UNDERLINE", + fontName: { family: "Work Sans", style: "Regular" }, + letterSpacing: { value: 0, unit: "PERCENT" }, + lineHeight: { value: 14, unit: "PIXELS" }, + leadingTrim: "NONE", + paragraphIndent: 0, + paragraphSpacing: 10, + listSpacing: 0, + hangingPunctuation: false, + hangingList: false, + textCase: "ORIGINAL", + }, + boundVariables: { + fontSize: { + fieldName: "fontSize", + collectionName: "7. Typography", + variableName: "Font size/text-xs", + }, + fontStyle: { + fieldName: "fontStyle", + collectionName: "7. Typography", + variableName: "Font weight/regular", + }, + fontFamily: { + fieldName: "fontFamily", + collectionName: "7. Typography", + variableName: "Font family/font-family-body", + }, + paragraphSpacing: { + fieldName: "paragraphSpacing", + collectionName: "7. Typography", + variableName: "Font size/text-xs", + }, + lineHeight: { + fieldName: "lineHeight", + collectionName: "7. Typography", + variableName: "Line height/text-3xs", + }, + }, + }, + "Text xs/Medium italic": { + name: "Text xs/Medium italic", + definition: { + fontSize: 10, + textDecoration: "NONE", + fontName: { family: "Work Sans", style: "Medium Italic" }, + letterSpacing: { value: 0, unit: "PERCENT" }, + lineHeight: { value: 14, unit: "PIXELS" }, + leadingTrim: "NONE", + paragraphIndent: 0, + paragraphSpacing: 10, + listSpacing: 0, + hangingPunctuation: false, + hangingList: false, + textCase: "ORIGINAL", + }, + boundVariables: { + fontSize: { + fieldName: "fontSize", + collectionName: "7. Typography", + variableName: "Font size/text-xs", + }, + fontStyle: { + fieldName: "fontStyle", + collectionName: "7. Typography", + variableName: "Font weight/medium-italic", + }, + fontFamily: { + fieldName: "fontFamily", + collectionName: "7. Typography", + variableName: "Font family/font-family-body", + }, + paragraphSpacing: { + fieldName: "paragraphSpacing", + collectionName: "7. Typography", + variableName: "Font size/text-xs", + }, + lineHeight: { + fieldName: "lineHeight", + collectionName: "7. Typography", + variableName: "Line height/text-3xs", + }, + }, + }, + "Text xs/Semibold italic": { + name: "Text xs/Semibold italic", + definition: { + fontSize: 10, + textDecoration: "NONE", + fontName: { family: "Work Sans", style: "SemiBold Italic" }, + letterSpacing: { value: 0, unit: "PERCENT" }, + lineHeight: { value: 14, unit: "PIXELS" }, + leadingTrim: "NONE", + paragraphIndent: 0, + paragraphSpacing: 10, + listSpacing: 0, + hangingPunctuation: false, + hangingList: false, + textCase: "ORIGINAL", + }, + boundVariables: { + fontSize: { + fieldName: "fontSize", + collectionName: "7. Typography", + variableName: "Font size/text-xs", + }, + fontStyle: { + fieldName: "fontStyle", + collectionName: "7. Typography", + variableName: "Font weight/semibold-italic", + }, + fontFamily: { + fieldName: "fontFamily", + collectionName: "7. Typography", + variableName: "Font family/font-family-body", + }, + paragraphSpacing: { + fieldName: "paragraphSpacing", + collectionName: "7. Typography", + variableName: "Font size/text-xs", + }, + lineHeight: { + fieldName: "lineHeight", + collectionName: "7. Typography", + variableName: "Line height/text-3xs", + }, + }, + }, + "Text xs/Bold italic": { + name: "Text xs/Bold italic", + definition: { + fontSize: 10, + textDecoration: "NONE", + fontName: { family: "Work Sans", style: "Bold Italic" }, + letterSpacing: { value: 0, unit: "PERCENT" }, + lineHeight: { value: 14, unit: "PIXELS" }, + leadingTrim: "NONE", + paragraphIndent: 0, + paragraphSpacing: 10, + listSpacing: 0, + hangingPunctuation: false, + hangingList: false, + textCase: "ORIGINAL", + }, + boundVariables: { + fontSize: { + fieldName: "fontSize", + collectionName: "7. Typography", + variableName: "Font size/text-xs", + }, + fontStyle: { + fieldName: "fontStyle", + collectionName: "7. Typography", + variableName: "Font weight/bold-italic", + }, + fontFamily: { + fieldName: "fontFamily", + collectionName: "7. Typography", + variableName: "Font family/font-family-body", + }, + paragraphSpacing: { + fieldName: "paragraphSpacing", + collectionName: "7. Typography", + variableName: "Font size/text-xs", + }, + lineHeight: { + fieldName: "lineHeight", + collectionName: "7. Typography", + variableName: "Line height/text-3xs", + }, + }, + }, + "Text xxs/Regular": { + name: "Text xxs/Regular", + definition: { + fontSize: 9, + textDecoration: "NONE", + fontName: { family: "Work Sans", style: "Regular" }, + letterSpacing: { value: 0, unit: "PERCENT" }, + lineHeight: { value: 12, unit: "PIXELS" }, + leadingTrim: "NONE", + paragraphIndent: 0, + paragraphSpacing: 10, + listSpacing: 0, + hangingPunctuation: false, + hangingList: false, + textCase: "ORIGINAL", + }, + boundVariables: { + fontSize: { + fieldName: "fontSize", + collectionName: "7. Typography", + variableName: "Font size/text-xxs", + }, + fontStyle: { + fieldName: "fontStyle", + collectionName: "7. Typography", + variableName: "Font weight/regular", + }, + fontFamily: { + fieldName: "fontFamily", + collectionName: "7. Typography", + variableName: "Font family/font-family-body", + }, + paragraphSpacing: { + fieldName: "paragraphSpacing", + collectionName: "7. Typography", + variableName: "Font size/text-xs", + }, + lineHeight: { + fieldName: "lineHeight", + collectionName: "7. Typography", + variableName: "Line height/text-4xs", + }, + }, + }, + "Text xxs/Medium": { + name: "Text xxs/Medium", + definition: { + fontSize: 9, + textDecoration: "NONE", + fontName: { family: "Work Sans", style: "Medium" }, + letterSpacing: { value: 0, unit: "PERCENT" }, + lineHeight: { value: 12, unit: "PIXELS" }, + leadingTrim: "NONE", + paragraphIndent: 0, + paragraphSpacing: 10, + listSpacing: 0, + hangingPunctuation: false, + hangingList: false, + textCase: "ORIGINAL", + }, + boundVariables: { + fontSize: { + fieldName: "fontSize", + collectionName: "7. Typography", + variableName: "Font size/text-xxs", + }, + fontStyle: { + fieldName: "fontStyle", + collectionName: "7. Typography", + variableName: "Font weight/medium", + }, + fontFamily: { + fieldName: "fontFamily", + collectionName: "7. Typography", + variableName: "Font family/font-family-body", + }, + paragraphSpacing: { + fieldName: "paragraphSpacing", + collectionName: "7. Typography", + variableName: "Font size/text-xs", + }, + lineHeight: { + fieldName: "lineHeight", + collectionName: "7. Typography", + variableName: "Line height/text-4xs", + }, + }, + }, + "Text xxs/Semibold": { + name: "Text xxs/Semibold", + definition: { + fontSize: 9, + textDecoration: "NONE", + fontName: { family: "Work Sans", style: "SemiBold" }, + letterSpacing: { value: 0, unit: "PERCENT" }, + lineHeight: { value: 12, unit: "PIXELS" }, + leadingTrim: "NONE", + paragraphIndent: 0, + paragraphSpacing: 10, + listSpacing: 0, + hangingPunctuation: false, + hangingList: false, + textCase: "ORIGINAL", + }, + boundVariables: { + fontSize: { + fieldName: "fontSize", + collectionName: "7. Typography", + variableName: "Font size/text-xxs", + }, + fontStyle: { + fieldName: "fontStyle", + collectionName: "7. Typography", + variableName: "Font weight/semibold", + }, + fontFamily: { + fieldName: "fontFamily", + collectionName: "7. Typography", + variableName: "Font family/font-family-body", + }, + paragraphSpacing: { + fieldName: "paragraphSpacing", + collectionName: "7. Typography", + variableName: "Font size/text-xs", + }, + lineHeight: { + fieldName: "lineHeight", + collectionName: "7. Typography", + variableName: "Line height/text-4xs", + }, + }, + }, + "Text xxs/Bold": { + name: "Text xxs/Bold", + definition: { + fontSize: 9, + textDecoration: "NONE", + fontName: { family: "Roboto", style: "Bold" }, + letterSpacing: { value: 0, unit: "PERCENT" }, + lineHeight: { value: 12, unit: "PIXELS" }, + leadingTrim: "NONE", + paragraphIndent: 0, + paragraphSpacing: 10, + listSpacing: 0, + hangingPunctuation: false, + hangingList: false, + textCase: "ORIGINAL", + }, + boundVariables: { + fontSize: { + fieldName: "fontSize", + collectionName: "7. Typography", + variableName: "Font size/text-xxs", + }, + fontStyle: { + fieldName: "fontStyle", + collectionName: "7. Typography", + variableName: "Font weight/bold", + }, + fontFamily: { + fieldName: "fontFamily", + collectionName: "7. Typography", + variableName: "Font family/font-family-body", + }, + paragraphSpacing: { + fieldName: "paragraphSpacing", + collectionName: "7. Typography", + variableName: "Font size/text-xs", + }, + lineHeight: { + fieldName: "lineHeight", + collectionName: "7. Typography", + variableName: "Line height/text-4xs", + }, + }, + }, + "Text xxs/Regular italic": { + name: "Text xxs/Regular italic", + definition: { + fontSize: 9, + textDecoration: "NONE", + fontName: { family: "Work Sans", style: "Italic" }, + letterSpacing: { value: 0, unit: "PERCENT" }, + lineHeight: { value: 12, unit: "PIXELS" }, + leadingTrim: "NONE", + paragraphIndent: 0, + paragraphSpacing: 10, + listSpacing: 0, + hangingPunctuation: false, + hangingList: false, + textCase: "ORIGINAL", + }, + boundVariables: { + fontSize: { + fieldName: "fontSize", + collectionName: "7. Typography", + variableName: "Font size/text-xxs", + }, + fontStyle: { + fieldName: "fontStyle", + collectionName: "7. Typography", + variableName: "Font weight/regular-italic", + }, + fontFamily: { + fieldName: "fontFamily", + collectionName: "7. Typography", + variableName: "Font family/font-family-body", + }, + paragraphSpacing: { + fieldName: "paragraphSpacing", + collectionName: "7. Typography", + variableName: "Font size/text-xs", + }, + lineHeight: { + fieldName: "lineHeight", + collectionName: "7. Typography", + variableName: "Line height/text-4xs", + }, + }, + }, + "Text xxs/Regular underlined": { + name: "Text xxs/Regular underlined", + definition: { + fontSize: 9, + textDecoration: "UNDERLINE", + fontName: { family: "Roboto", style: "Regular" }, + letterSpacing: { value: 0, unit: "PERCENT" }, + lineHeight: { value: 12, unit: "PIXELS" }, + leadingTrim: "NONE", + paragraphIndent: 0, + paragraphSpacing: 10, + listSpacing: 0, + hangingPunctuation: false, + hangingList: false, + textCase: "ORIGINAL", + }, + boundVariables: { + fontSize: { + fieldName: "fontSize", + collectionName: "7. Typography", + variableName: "Font size/text-xxs", + }, + fontStyle: { + fieldName: "fontStyle", + collectionName: "7. Typography", + variableName: "Font weight/regular", + }, + fontFamily: { + fieldName: "fontFamily", + collectionName: "7. Typography", + variableName: "Font family/font-family-body", + }, + paragraphSpacing: { + fieldName: "paragraphSpacing", + collectionName: "7. Typography", + variableName: "Font size/text-xs", + }, + lineHeight: { + fieldName: "lineHeight", + collectionName: "7. Typography", + variableName: "Line height/text-4xs", + }, + }, + }, + "Text xxs/Medium italic": { + name: "Text xxs/Medium italic", + definition: { + fontSize: 9, + textDecoration: "NONE", + fontName: { family: "Work Sans", style: "Medium" }, + letterSpacing: { value: 0, unit: "PERCENT" }, + lineHeight: { value: 12, unit: "PIXELS" }, + leadingTrim: "NONE", + paragraphIndent: 0, + paragraphSpacing: 10, + listSpacing: 0, + hangingPunctuation: false, + hangingList: false, + textCase: "ORIGINAL", + }, + boundVariables: { + fontSize: { + fieldName: "fontSize", + collectionName: "7. Typography", + variableName: "Font size/text-xxs", + }, + fontStyle: { + fieldName: "fontStyle", + collectionName: "7. Typography", + variableName: "Font weight/medium", + }, + fontFamily: { + fieldName: "fontFamily", + collectionName: "7. Typography", + variableName: "Font family/font-family-body", + }, + paragraphSpacing: { + fieldName: "paragraphSpacing", + collectionName: "7. Typography", + variableName: "Font size/text-xs", + }, + lineHeight: { + fieldName: "lineHeight", + collectionName: "7. Typography", + variableName: "Line height/text-4xs", + }, + }, + }, + "Text xxs/Semibold italic": { + name: "Text xxs/Semibold italic", + definition: { + fontSize: 9, + textDecoration: "NONE", + fontName: { family: "Work Sans", style: "SemiBold Italic" }, + letterSpacing: { value: 0, unit: "PERCENT" }, + lineHeight: { value: 12, unit: "PIXELS" }, + leadingTrim: "NONE", + paragraphIndent: 0, + paragraphSpacing: 10, + listSpacing: 0, + hangingPunctuation: false, + hangingList: false, + textCase: "ORIGINAL", + }, + boundVariables: { + fontSize: { + fieldName: "fontSize", + collectionName: "7. Typography", + variableName: "Font size/text-xxs", + }, + fontStyle: { + fieldName: "fontStyle", + collectionName: "7. Typography", + variableName: "Font weight/semibold-italic", + }, + fontFamily: { + fieldName: "fontFamily", + collectionName: "7. Typography", + variableName: "Font family/font-family-body", + }, + paragraphSpacing: { + fieldName: "paragraphSpacing", + collectionName: "7. Typography", + variableName: "Font size/text-xs", + }, + lineHeight: { + fieldName: "lineHeight", + collectionName: "7. Typography", + variableName: "Line height/text-4xs", + }, + }, + }, + "Text xxs/Bold italic": { + name: "Text xxs/Bold italic", + definition: { + fontSize: 9, + textDecoration: "NONE", + fontName: { family: "Work Sans", style: "Bold Italic" }, + letterSpacing: { value: 0, unit: "PERCENT" }, + lineHeight: { value: 12, unit: "PIXELS" }, + leadingTrim: "NONE", + paragraphIndent: 0, + paragraphSpacing: 10, + listSpacing: 0, + hangingPunctuation: false, + hangingList: false, + textCase: "ORIGINAL", + }, + boundVariables: { + fontSize: { + fieldName: "fontSize", + collectionName: "7. Typography", + variableName: "Font size/text-xxs", + }, + fontStyle: { + fieldName: "fontStyle", + collectionName: "7. Typography", + variableName: "Font weight/bold-italic", + }, + fontFamily: { + fieldName: "fontFamily", + collectionName: "7. Typography", + variableName: "Font family/font-family-body", + }, + paragraphSpacing: { + fieldName: "paragraphSpacing", + collectionName: "7. Typography", + variableName: "Font size/text-xs", + }, + lineHeight: { + fieldName: "lineHeight", + collectionName: "7. Typography", + variableName: "Line height/text-4xs", + }, + }, + }, +} + +type BoundVariable = { + fieldName: string + collectionName: string + variableName: string +} + +interface FontName { + readonly family: string + readonly style: string +} + +type FontStretch = "normal" | "condensed" | "expanded" + +type FontStyle = "normal" | "italic" | "oblique" + +type Globals = + | "-moz-initial" + | "inherit" + | "initial" + | "revert" + | "revert-layer" + | "unset" + +type LeadingTrim = "CAP_HEIGHT" | "NONE" + +interface LetterSpacing { + readonly value: number + readonly unit: "PIXELS" | "PERCENT" +} + +type LineHeight = + | { + readonly value: number + readonly unit: "PIXELS" | "PERCENT" + } + | { + readonly unit: "AUTO" + } + +type ResolvedTextDecoration = "none" | "underline" | "line-through" + +type ResolvedTextStyleDefinition = { + fontFamily: string + fontSize: number + fontStretch: string + fontStyle: string + fontWeight: number + letterSpacing: number | string + lineHeight: string + textDecoration: ResolvedTextDecoration + textTransform: TextTransform +} + +type ResolvedVariableValue = boolean | string | number | RGBA + +interface RGBA { + readonly r: number + readonly g: number + readonly b: number + readonly a: number +} + +type TextCase = + | "ORIGINAL" + | "UPPER" + | "LOWER" + | "TITLE" + | "SMALL_CAPS" + | "SMALL_CAPS_FORCED" + +type TextDecoration = "NONE" | "UNDERLINE" | "STRIKETHROUGH" + +type TextStyleDefinition = { + fontSize: number + textDecoration: TextDecoration + fontName: FontName + letterSpacing: LetterSpacing + lineHeight: LineHeight + leadingTrim: LeadingTrim + paragraphIndent: number + paragraphSpacing: number + listSpacing: number + hangingPunctuation: boolean + hangingList: boolean + textCase: TextCase +} + +type TextTransform = + | Globals + | "capitalize" + | "full-size-kana" + | "full-width" + | "lowercase" + | "none" + | "uppercase" + +type ThemeTextStyle = ThemeTextStyleDescription & { + boundVariables: Record +} + +type ThemeTextStyleDescription = { + name: string + definition: TextStyleDefinition +} +type LooselyTypedVariables = Record< + string, + Record +> + +/** + * Resolves text styles in two steps: + * 1. Parses the values as they come from figma into a type that can be used + * with css. + * 2. Resolves the values that are bound to variables. + * @param variables Loosely type version of theme variables, that accepts any + * string as key. + * @param textStyle Parsed text style definition. + * @returns ResolvedTextStyleDefinition + */ +export function resolveTextStyle( + variables: LooselyTypedVariables, + textStyle: ThemeTextStyle, +): ResolvedTextStyleDefinition { + const binding = findBinding(textStyle.boundVariables) + + const resolved: ResolvedTextStyleDefinition = { + fontFamily: resolveStringField( + textStyle.definition.fontName.family, + binding("fontFamily"), + variables, + ), + + fontSize: resolveNumberField( + textStyle.definition.fontSize, + binding("fontSize"), + variables, + ), + + fontStyle: parseFontStyle( + resolveStringField( + textStyle.definition.fontName.family, + binding("fontStyle"), + variables, + ), + ), + + fontWeight: resolveFontWeight( + textStyle.definition.fontName.style, + binding("fontWeight"), + variables, + ), + + letterSpacing: resolveLetterSpacing( + textStyle.definition.letterSpacing, + binding("letterSpacing"), + variables, + ), + + lineHeight: resolveLineHeight( + textStyle.definition.lineHeight, + binding("lineHeight"), + variables, + ), + + fontStretch: parseFontStretch(textStyle.definition.fontName.style), + textDecoration: + textDecorations[textStyle.definition.textDecoration] ?? "none", + textTransform: textCases[textStyle.definition.textCase] ?? "none", + } + + return resolved +} + +const findBinding = + (boundVariables: Record) => + ( + fieldName: + | "fontFamily" + | "fontSize" + | "fontStyle" + | "fontWeight" + | "letterSpacing" + | "lineHeight" + | "paragraphSpacing" + | "paragraphIndent", + ): BoundVariable | undefined => + boundVariables[fieldName] + +const resolveStringField = ( + value: string, + binding: BoundVariable | undefined, + variables: LooselyTypedVariables, +): string => { + if (!binding) { + return value + } + + const candidate = variables[binding.collectionName]?.[binding.variableName] + return typeof candidate === "string" ? candidate : value +} + +const resolveNumberField = ( + value: number, + binding: BoundVariable | undefined, + variables: LooselyTypedVariables, +): number => { + if (!binding) { + return value + } + + const candidate = variables[binding.collectionName]?.[binding.variableName] + return typeof candidate === "number" ? candidate : value +} + +const resolveFontWeight = ( + value: string, + binding: BoundVariable | undefined, + variables: LooselyTypedVariables, +): number => { + const parsed = parseFontWeight(value) + if (!binding) { + return parsed + } + + const candidate = variables[binding.collectionName]?.[binding.variableName] + + if (typeof candidate === "number") { + return candidate + } + + if (typeof candidate === "string") { + return parseFontWeight(candidate) + } + + return parsed +} + +const resolveLetterSpacing = ( + value: LetterSpacing, + binding: BoundVariable | undefined, + variables: LooselyTypedVariables, +): number | string => { + const parsed = parseLetterSpacing(value) + + if (!binding) { + return parsed + } + + const candidate = variables[binding.collectionName]?.[binding.variableName] + + return typeof candidate === "number" + ? parseLetterSpacing({ ...value, value: candidate }) + : parsed +} + +const resolveLineHeight = ( + value: LineHeight, + binding: BoundVariable | undefined, + variables: LooselyTypedVariables, +): string => { + const parsed = parseLineHeight(value) + + if (!binding || value.unit === "AUTO") { + return parsed + } + + const candidate = variables[binding.collectionName]?.[binding.variableName] + + return typeof candidate === "number" + ? // this works because at this point units can only be "PIXELS" or "PERCENT" + parseLineHeight({ unit: value.unit, value: candidate }) + : parsed +} + +const parseLetterSpacing = (letterSpacing: LetterSpacing): number | string => { + return letterSpacing.unit === "PERCENT" + ? `${letterSpacing.value}%` + : letterSpacing.value +} + +const parseLineHeight = (lineHeight: LineHeight): string => { + return lineHeight.unit === "PERCENT" + ? `${lineHeight.value}%` + : lineHeight.unit === "AUTO" + ? "normal" + : `${lineHeight.value}px` +} + +const parseFontStretch = (fontStyle: string): FontStretch => { + const parts = fontStyle.toLowerCase().split(" ") + const part1 = parts[parts.length - 1] ?? "" + const part2 = parts[parts.length - 2] ?? "" + return fontStretch[part1] ?? fontStretch[part2] ?? "normal" +} + +const fontStretch: Record = { + normal: "normal", + condensed: "condensed", + expanded: "expanded", + extended: "expanded", +} + +const parseFontStyle = (fontStyle: string): FontStyle => { + const part = fontStyle.toLowerCase().split(" ").pop() ?? "" + const candidate = fontStyles[part] + return candidate ?? "normal" +} + +const fontStyles: Record = { + normal: "normal", + italic: "italic", + kursiv: "italic", + oblique: "oblique", +} + +const parseFontWeight = (fontStyle: string): number => { + const parts = fontStyle.toLowerCase().split(" ") + + let weight = parts[0] ?? "" + const part1 = parts[0] ?? "" + const part2 = parts[1] ?? "" + + // merge if space after extra + if ( + ["extra", "ultra", "semi", "demi"].includes(part1) && + ["bold", "light"].includes(part2) + ) { + weight = `${parts[0]}${parts[1]}` + } + + return fontWeights[weight] ?? 400 +} + +const fontWeights: Record = { + 100: 100, + thin: 100, + 200: 200, + extralight: 200, + ultralight: 200, + extraleicht: 200, + 300: 300, + light: 300, + leicht: 300, + 400: 400, + normal: 400, + regular: 400, + buch: 400, + 500: 500, + medium: 500, + kraeftig: 500, + kräftig: 500, + 600: 600, + semibold: 600, + demibold: 600, + halbfett: 600, + 700: 700, + bold: 700, + dreiviertelfett: 700, + 800: 800, + extrabold: 800, + ultabold: 800, + fett: 800, + 900: 900, + black: 900, + heavy: 900, + super: 900, + extrafett: 900, +} + +const textDecorations: Record = { + NONE: "none", + UNDERLINE: "underline", + STRIKETHROUGH: "line-through", +} + +const textCases: Record = { + ORIGINAL: "none", + UPPER: "uppercase", + LOWER: "lowercase", + TITLE: "capitalize", +} diff --git a/packages/client/src/client/theme/uisk/types.ts b/packages/client/src/client/theme/uisk/types.ts new file mode 100644 index 0000000000..e229fc507d --- /dev/null +++ b/packages/client/src/client/theme/uisk/types.ts @@ -0,0 +1,5 @@ +import { resolveTheme } from "./generatedTheme" + +export type GeneratedTheme = ReturnType + +export type GeneratedThemeVariables = GeneratedTheme["variables"] diff --git a/packages/client/src/client/theme/uiskTheme.ts b/packages/client/src/client/theme/uisk/uiskTheme.ts similarity index 85% rename from packages/client/src/client/theme/uiskTheme.ts rename to packages/client/src/client/theme/uisk/uiskTheme.ts index 8ccb8f689f..dff8bf3162 100644 --- a/packages/client/src/client/theme/uiskTheme.ts +++ b/packages/client/src/client/theme/uisk/uiskTheme.ts @@ -2,7 +2,7 @@ export const theme = { color: { "Colors/Text/text-primary (900)": "#f7f7f7", "Colors/Text/text-tertiary (600)": "#a3a3a3", - "Colors/Text/text-error-primary (600)": "#c41230", + "Colors/Text/text-error-primary (600)": "#c34646", "Colors/Text/text-warning-primary (600)": "#fdb022", "Colors/Text/text-success-primary (600)": "#47cd89", "Colors/Text/text-white": "#ffffff", @@ -23,12 +23,12 @@ export const theme = { "Colors/Text/text-brand-tertiary_alt": "#f7f7f7", "Colors/Border/border-secondary": "#292929", "Colors/Border/border-error_subtle": "#890c21", - "Colors/Border/border-primary": "#424242", + "Colors/Border/border-primary": "#525252", "Colors/Border/border-brand": "#8184f8", "Colors/Border/border-disabled": "#424242", "Colors/Border/border-error": "#c41230", "Colors/Border/border-disabled_subtle": "#292929", - "Colors/Border/border-tertiary": "#292929", + "Colors/Border/border-tertiary": "#1f1f1f", "Colors/Border/border-brand_alt": "#424242", "Colors/Background/bg-primary": "#0f0f0f", "Colors/Background/bg-tertiary": "#292929", @@ -311,14 +311,14 @@ export const theme = { "Colors/Background/bg-buy-primary": "#8e90f9", "Colors/Background/bg-buy-primary_hover": "#676ac6", "Colors/Border/border-success": "#079455", - "Component colors/Utility/Data/utility-data-positive-50": "#cce4cc", - "Component colors/Utility/Data/utility-data-positive-100": "#7fbb7f", - "Component colors/Utility/Data/utility-data-positive-200": "#339233", - "Component colors/Utility/Data/utility-data-positive-300": "#007700", - "Component colors/Utility/Data/utility-data-positive-400": "#005a00", - "Component colors/Utility/Data/utility-data-positive-500": "#004b00", - "Component colors/Utility/Data/utility-data-positive-600": "#003b00", - "Component colors/Utility/Data/utility-data-positive-700": "#002c00", + "Component colors/Utility/Data/utility-data-positive-50": "#ecfdf3", + "Component colors/Utility/Data/utility-data-positive-100": "#dcfae6", + "Component colors/Utility/Data/utility-data-positive-200": "#abefc6", + "Component colors/Utility/Data/utility-data-positive-300": "#75e0a7", + "Component colors/Utility/Data/utility-data-positive-400": "#47cd89", + "Component colors/Utility/Data/utility-data-positive-500": "#17b26a", + "Component colors/Utility/Data/utility-data-positive-600": "#079455", + "Component colors/Utility/Data/utility-data-positive-700": "#067647", "Component colors/Utility/Red/utility-red-700": "#e28897", "Component colors/Utility/Red/utility-red-600": "#d14159", "Component colors/Utility/Red/utility-red-500": "#c41230", @@ -449,11 +449,8 @@ export const theme = { fontWeight: 400, letterSpacing: "-2%", lineHeight: "90px", - marginBlockEnd: 38, - marginInlineStart: 0, fontStretch: "normal", textDecoration: "none", - textTransform: "none" as const, }, "Display 2xl/Medium": { fontFamily: "Work Sans", @@ -462,11 +459,8 @@ export const theme = { fontWeight: 500, letterSpacing: "-2%", lineHeight: "90px", - marginBlockEnd: 38, - marginInlineStart: 0, fontStretch: "normal", textDecoration: "none", - textTransform: "none" as const, }, "Display 2xl/Semibold": { fontFamily: "Work Sans", @@ -475,11 +469,8 @@ export const theme = { fontWeight: 600, letterSpacing: "-2%", lineHeight: "90px", - marginBlockEnd: 38, - marginInlineStart: 0, fontStretch: "normal", textDecoration: "none", - textTransform: "none" as const, }, "Display 2xl/Bold": { fontFamily: "Work Sans", @@ -488,11 +479,8 @@ export const theme = { fontWeight: 700, letterSpacing: "-2%", lineHeight: "90px", - marginBlockEnd: 38, - marginInlineStart: 0, fontStretch: "normal", textDecoration: "none", - textTransform: "none" as const, }, "Display xl/Regular": { fontFamily: "Work Sans", @@ -501,11 +489,8 @@ export const theme = { fontWeight: 400, letterSpacing: "-2%", lineHeight: "72px", - marginBlockEnd: 34, - marginInlineStart: 0, fontStretch: "normal", textDecoration: "none", - textTransform: "none" as const, }, "Display xl/Medium": { fontFamily: "Work Sans", @@ -514,11 +499,8 @@ export const theme = { fontWeight: 500, letterSpacing: "-2%", lineHeight: "72px", - marginBlockEnd: 34, - marginInlineStart: 0, fontStretch: "normal", textDecoration: "none", - textTransform: "none" as const, }, "Display xl/Semibold": { fontFamily: "Work Sans", @@ -527,11 +509,8 @@ export const theme = { fontWeight: 600, letterSpacing: "-2%", lineHeight: "72px", - marginBlockEnd: 34, - marginInlineStart: 0, fontStretch: "normal", textDecoration: "none", - textTransform: "none" as const, }, "Display xl/Bold": { fontFamily: "Work Sans", @@ -540,11 +519,8 @@ export const theme = { fontWeight: 700, letterSpacing: "-2%", lineHeight: "72px", - marginBlockEnd: 34, - marginInlineStart: 0, fontStretch: "normal", textDecoration: "none", - textTransform: "none" as const, }, "Display lg/Regular": { fontFamily: "Work Sans", @@ -553,11 +529,8 @@ export const theme = { fontWeight: 400, letterSpacing: "-2%", lineHeight: "60px", - marginBlockEnd: 30, - marginInlineStart: 0, fontStretch: "normal", textDecoration: "none", - textTransform: "none" as const, }, "Display lg/Medium": { fontFamily: "Work Sans", @@ -566,11 +539,8 @@ export const theme = { fontWeight: 500, letterSpacing: "-2%", lineHeight: "60px", - marginBlockEnd: 30, - marginInlineStart: 0, fontStretch: "normal", textDecoration: "none", - textTransform: "none" as const, }, "Display lg/Semibold": { fontFamily: "Work Sans", @@ -579,11 +549,8 @@ export const theme = { fontWeight: 600, letterSpacing: "-2%", lineHeight: "60px", - marginBlockEnd: 30, - marginInlineStart: 0, fontStretch: "normal", textDecoration: "none", - textTransform: "none" as const, }, "Display lg/Bold": { fontFamily: "Work Sans", @@ -592,11 +559,8 @@ export const theme = { fontWeight: 700, letterSpacing: "-2%", lineHeight: "60px", - marginBlockEnd: 30, - marginInlineStart: 0, fontStretch: "normal", textDecoration: "none", - textTransform: "none" as const, }, "Display md/Regular": { fontFamily: "Work Sans", @@ -605,11 +569,8 @@ export const theme = { fontWeight: 400, letterSpacing: "-2%", lineHeight: "44px", - marginBlockEnd: 24, - marginInlineStart: 0, fontStretch: "normal", textDecoration: "none", - textTransform: "none" as const, }, "Display md/Medium": { fontFamily: "Work Sans", @@ -618,11 +579,8 @@ export const theme = { fontWeight: 500, letterSpacing: "-2%", lineHeight: "44px", - marginBlockEnd: 24, - marginInlineStart: 0, fontStretch: "normal", textDecoration: "none", - textTransform: "none" as const, }, "Display md/Semibold": { fontFamily: "Work Sans", @@ -631,11 +589,8 @@ export const theme = { fontWeight: 600, letterSpacing: "-2%", lineHeight: "44px", - marginBlockEnd: 24, - marginInlineStart: 0, fontStretch: "normal", textDecoration: "none", - textTransform: "none" as const, }, "Display md/Bold": { fontFamily: "Work Sans", @@ -644,11 +599,8 @@ export const theme = { fontWeight: 700, letterSpacing: "-2%", lineHeight: "44px", - marginBlockEnd: 24, - marginInlineStart: 0, fontStretch: "normal", textDecoration: "none", - textTransform: "none" as const, }, "Display sm/Regular": { fontFamily: "Work Sans", @@ -657,11 +609,8 @@ export const theme = { fontWeight: 400, letterSpacing: "0%", lineHeight: "38px", - marginBlockEnd: 20, - marginInlineStart: 0, fontStretch: "normal", textDecoration: "none", - textTransform: "none" as const, }, "Display sm/Medium": { fontFamily: "Work Sans", @@ -670,11 +619,8 @@ export const theme = { fontWeight: 500, letterSpacing: "0%", lineHeight: "38px", - marginBlockEnd: 20, - marginInlineStart: 0, fontStretch: "normal", textDecoration: "none", - textTransform: "none" as const, }, "Display sm/Semibold": { fontFamily: "Work Sans", @@ -683,11 +629,8 @@ export const theme = { fontWeight: 600, letterSpacing: "0%", lineHeight: "38px", - marginBlockEnd: 20, - marginInlineStart: 0, fontStretch: "normal", textDecoration: "none", - textTransform: "none" as const, }, "Display sm/Bold": { fontFamily: "Work Sans", @@ -696,11 +639,8 @@ export const theme = { fontWeight: 700, letterSpacing: "0%", lineHeight: "38px", - marginBlockEnd: 20, - marginInlineStart: 0, fontStretch: "normal", textDecoration: "none", - textTransform: "none" as const, }, "Display xs/Regular": { fontFamily: "Work Sans", @@ -709,11 +649,8 @@ export const theme = { fontWeight: 400, letterSpacing: "0%", lineHeight: "32px", - marginBlockEnd: 18, - marginInlineStart: 0, fontStretch: "normal", textDecoration: "none", - textTransform: "none" as const, }, "Display xs/Medium": { fontFamily: "Work Sans", @@ -722,11 +659,8 @@ export const theme = { fontWeight: 500, letterSpacing: "0%", lineHeight: "32px", - marginBlockEnd: 18, - marginInlineStart: 0, fontStretch: "normal", textDecoration: "none", - textTransform: "none" as const, }, "Display xs/Semibold": { fontFamily: "Work Sans", @@ -735,11 +669,8 @@ export const theme = { fontWeight: 600, letterSpacing: "0%", lineHeight: "32px", - marginBlockEnd: 18, - marginInlineStart: 0, fontStretch: "normal", textDecoration: "none", - textTransform: "none" as const, }, "Display xs/Bold": { fontFamily: "Work Sans", @@ -748,11 +679,8 @@ export const theme = { fontWeight: 700, letterSpacing: "0%", lineHeight: "32px", - marginBlockEnd: 18, - marginInlineStart: 0, fontStretch: "normal", textDecoration: "none", - textTransform: "none" as const, }, "Text xl/Regular": { fontFamily: "Work Sans", @@ -761,11 +689,8 @@ export const theme = { fontWeight: 400, letterSpacing: "0%", lineHeight: "30px", - marginBlockEnd: 16, - marginInlineStart: 0, fontStretch: "normal", textDecoration: "none", - textTransform: "none" as const, }, "Text xl/Medium": { fontFamily: "Work Sans", @@ -774,11 +699,8 @@ export const theme = { fontWeight: 500, letterSpacing: "0%", lineHeight: "30px", - marginBlockEnd: 16, - marginInlineStart: 0, fontStretch: "normal", textDecoration: "none", - textTransform: "none" as const, }, "Text xl/Semibold": { fontFamily: "Work Sans", @@ -787,11 +709,8 @@ export const theme = { fontWeight: 600, letterSpacing: "0%", lineHeight: "30px", - marginBlockEnd: 16, - marginInlineStart: 0, fontStretch: "normal", textDecoration: "none", - textTransform: "none" as const, }, "Text xl/Bold": { fontFamily: "Work Sans", @@ -800,11 +719,8 @@ export const theme = { fontWeight: 700, letterSpacing: "0%", lineHeight: "30px", - marginBlockEnd: 16, - marginInlineStart: 0, fontStretch: "normal", textDecoration: "none", - textTransform: "none" as const, }, "Text xl/Regular italic": { fontFamily: "Work Sans", @@ -813,11 +729,8 @@ export const theme = { fontWeight: 400, letterSpacing: "0%", lineHeight: "30px", - marginBlockEnd: 16, - marginInlineStart: 0, fontStretch: "normal", textDecoration: "none", - textTransform: "none" as const, }, "Text xl/Medium italic": { fontFamily: "Work Sans", @@ -826,11 +739,8 @@ export const theme = { fontWeight: 500, letterSpacing: "0%", lineHeight: "30px", - marginBlockEnd: 16, - marginInlineStart: 0, fontStretch: "normal", textDecoration: "none", - textTransform: "none" as const, }, "Text xl/Semibold italic": { fontFamily: "Work Sans", @@ -839,11 +749,8 @@ export const theme = { fontWeight: 600, letterSpacing: "0%", lineHeight: "30px", - marginBlockEnd: 16, - marginInlineStart: 0, fontStretch: "normal", textDecoration: "none", - textTransform: "none" as const, }, "Text xl/Bold italic": { fontFamily: "Work Sans", @@ -852,11 +759,8 @@ export const theme = { fontWeight: 700, letterSpacing: "0%", lineHeight: "30px", - marginBlockEnd: 16, - marginInlineStart: 0, fontStretch: "normal", textDecoration: "none", - textTransform: "none" as const, }, "Text xl/Regular underlined": { fontFamily: "Work Sans", @@ -865,11 +769,8 @@ export const theme = { fontWeight: 400, letterSpacing: "0%", lineHeight: "30px", - marginBlockEnd: 16, - marginInlineStart: 0, fontStretch: "normal", textDecoration: "underline", - textTransform: "none" as const, }, "Text lg/Regular": { fontFamily: "Work Sans", @@ -878,11 +779,8 @@ export const theme = { fontWeight: 400, letterSpacing: "0%", lineHeight: "28px", - marginBlockEnd: 14, - marginInlineStart: 0, fontStretch: "normal", textDecoration: "none", - textTransform: "none" as const, }, "Text lg/Medium": { fontFamily: "Work Sans", @@ -891,11 +789,8 @@ export const theme = { fontWeight: 500, letterSpacing: "0%", lineHeight: "28px", - marginBlockEnd: 14, - marginInlineStart: 0, fontStretch: "normal", textDecoration: "none", - textTransform: "none" as const, }, "Text lg/Semibold": { fontFamily: "Work Sans", @@ -904,11 +799,8 @@ export const theme = { fontWeight: 600, letterSpacing: "0%", lineHeight: "28px", - marginBlockEnd: 14, - marginInlineStart: 0, fontStretch: "normal", textDecoration: "none", - textTransform: "none" as const, }, "Text lg/Bold": { fontFamily: "Work Sans", @@ -917,11 +809,8 @@ export const theme = { fontWeight: 700, letterSpacing: "0%", lineHeight: "28px", - marginBlockEnd: 14, - marginInlineStart: 0, fontStretch: "normal", textDecoration: "none", - textTransform: "none" as const, }, "Text lg/Regular italic": { fontFamily: "Work Sans", @@ -930,11 +819,8 @@ export const theme = { fontWeight: 400, letterSpacing: "0%", lineHeight: "28px", - marginBlockEnd: 14, - marginInlineStart: 0, fontStretch: "normal", textDecoration: "none", - textTransform: "none" as const, }, "Text lg/Medium italic": { fontFamily: "Work Sans", @@ -943,11 +829,8 @@ export const theme = { fontWeight: 500, letterSpacing: "0%", lineHeight: "28px", - marginBlockEnd: 14, - marginInlineStart: 0, fontStretch: "normal", textDecoration: "none", - textTransform: "none" as const, }, "Text lg/Semibold italic": { fontFamily: "Work Sans", @@ -956,11 +839,8 @@ export const theme = { fontWeight: 600, letterSpacing: "0%", lineHeight: "28px", - marginBlockEnd: 14, - marginInlineStart: 0, fontStretch: "normal", textDecoration: "none", - textTransform: "none" as const, }, "Text lg/Bold italic": { fontFamily: "Work Sans", @@ -969,11 +849,8 @@ export const theme = { fontWeight: 700, letterSpacing: "0%", lineHeight: "28px", - marginBlockEnd: 14, - marginInlineStart: 0, fontStretch: "normal", textDecoration: "none", - textTransform: "none" as const, }, "Text lg/Regular underlined": { fontFamily: "Work Sans", @@ -982,11 +859,8 @@ export const theme = { fontWeight: 400, letterSpacing: "0%", lineHeight: "28px", - marginBlockEnd: 14, - marginInlineStart: 0, fontStretch: "normal", textDecoration: "underline", - textTransform: "none" as const, }, "Text md/Regular": { fontFamily: "Work Sans", @@ -995,11 +869,8 @@ export const theme = { fontWeight: 400, letterSpacing: "0%", lineHeight: "24px", - marginBlockEnd: 12, - marginInlineStart: 0, fontStretch: "normal", textDecoration: "none", - textTransform: "none" as const, }, "Text md/Medium": { fontFamily: "Work Sans", @@ -1008,11 +879,8 @@ export const theme = { fontWeight: 500, letterSpacing: "0%", lineHeight: "24px", - marginBlockEnd: 12, - marginInlineStart: 0, fontStretch: "normal", textDecoration: "none", - textTransform: "none" as const, }, "Text md/Semibold": { fontFamily: "Work Sans", @@ -1021,11 +889,8 @@ export const theme = { fontWeight: 600, letterSpacing: "0%", lineHeight: "24px", - marginBlockEnd: 12, - marginInlineStart: 0, fontStretch: "normal", textDecoration: "none", - textTransform: "none" as const, }, "Text md/Bold": { fontFamily: "Work Sans", @@ -1034,11 +899,8 @@ export const theme = { fontWeight: 700, letterSpacing: "0%", lineHeight: "24px", - marginBlockEnd: 12, - marginInlineStart: 0, fontStretch: "normal", textDecoration: "none", - textTransform: "none" as const, }, "Text md/Regular italic": { fontFamily: "Work Sans", @@ -1047,11 +909,8 @@ export const theme = { fontWeight: 400, letterSpacing: "0%", lineHeight: "24px", - marginBlockEnd: 12, - marginInlineStart: 0, fontStretch: "normal", textDecoration: "none", - textTransform: "none" as const, }, "Text md/Medium italic": { fontFamily: "Work Sans", @@ -1060,11 +919,8 @@ export const theme = { fontWeight: 500, letterSpacing: "0%", lineHeight: "24px", - marginBlockEnd: 12, - marginInlineStart: 0, fontStretch: "normal", textDecoration: "none", - textTransform: "none" as const, }, "Text md/Semibold italic": { fontFamily: "Work Sans", @@ -1073,11 +929,8 @@ export const theme = { fontWeight: 600, letterSpacing: "0%", lineHeight: "24px", - marginBlockEnd: 12, - marginInlineStart: 0, fontStretch: "normal", textDecoration: "none", - textTransform: "none" as const, }, "Text md/Bold italic": { fontFamily: "Work Sans", @@ -1086,11 +939,8 @@ export const theme = { fontWeight: 700, letterSpacing: "0%", lineHeight: "24px", - marginBlockEnd: 12, - marginInlineStart: 0, fontStretch: "normal", textDecoration: "none", - textTransform: "none" as const, }, "Text md/Regular underlined": { fontFamily: "Work Sans", @@ -1099,11 +949,8 @@ export const theme = { fontWeight: 400, letterSpacing: "0%", lineHeight: "24px", - marginBlockEnd: 12, - marginInlineStart: 0, fontStretch: "normal", textDecoration: "underline", - textTransform: "none" as const, }, "Text sm/Regular": { fontFamily: "Work Sans", @@ -1112,11 +959,8 @@ export const theme = { fontWeight: 400, letterSpacing: "0%", lineHeight: "20px", - marginBlockEnd: 11, - marginInlineStart: 0, fontStretch: "normal", textDecoration: "none", - textTransform: "none" as const, }, "Text sm/Medium": { fontFamily: "Work Sans", @@ -1125,11 +969,8 @@ export const theme = { fontWeight: 500, letterSpacing: "0%", lineHeight: "20px", - marginBlockEnd: 11, - marginInlineStart: 0, fontStretch: "normal", textDecoration: "none", - textTransform: "none" as const, }, "Text sm/Semibold": { fontFamily: "Work Sans", @@ -1138,11 +979,8 @@ export const theme = { fontWeight: 600, letterSpacing: "0%", lineHeight: "20px", - marginBlockEnd: 11, - marginInlineStart: 0, fontStretch: "normal", textDecoration: "none", - textTransform: "none" as const, }, "Text sm/Bold": { fontFamily: "Work Sans", @@ -1151,11 +989,8 @@ export const theme = { fontWeight: 700, letterSpacing: "0%", lineHeight: "20px", - marginBlockEnd: 11, - marginInlineStart: 0, fontStretch: "normal", textDecoration: "none", - textTransform: "none" as const, }, "Text sm/Regular italic": { fontFamily: "Work Sans", @@ -1164,11 +999,8 @@ export const theme = { fontWeight: 400, letterSpacing: "0%", lineHeight: "20px", - marginBlockEnd: 11, - marginInlineStart: 0, fontStretch: "normal", textDecoration: "none", - textTransform: "none" as const, }, "Text sm/Regular underlined": { fontFamily: "Work Sans", @@ -1177,11 +1009,8 @@ export const theme = { fontWeight: 400, letterSpacing: "0%", lineHeight: "20px", - marginBlockEnd: 11, - marginInlineStart: 0, fontStretch: "normal", textDecoration: "underline", - textTransform: "none" as const, }, "Text sm/Medium italic": { fontFamily: "Work Sans", @@ -1190,11 +1019,8 @@ export const theme = { fontWeight: 500, letterSpacing: "0%", lineHeight: "20px", - marginBlockEnd: 11, - marginInlineStart: 0, fontStretch: "normal", textDecoration: "none", - textTransform: "none" as const, }, "Text sm/Semibold italic": { fontFamily: "Work Sans", @@ -1203,11 +1029,8 @@ export const theme = { fontWeight: 600, letterSpacing: "0%", lineHeight: "20px", - marginBlockEnd: 11, - marginInlineStart: 0, fontStretch: "normal", textDecoration: "none", - textTransform: "none" as const, }, "Text sm/Bold italic": { fontFamily: "Work Sans", @@ -1216,11 +1039,8 @@ export const theme = { fontWeight: 700, letterSpacing: "0%", lineHeight: "20px", - marginBlockEnd: 11, - marginInlineStart: 0, fontStretch: "normal", textDecoration: "none", - textTransform: "none" as const, }, "Text xs/Regular": { fontFamily: "Work Sans", @@ -1229,11 +1049,8 @@ export const theme = { fontWeight: 400, letterSpacing: "0%", lineHeight: "14px", - marginBlockEnd: 10, - marginInlineStart: 0, fontStretch: "normal", textDecoration: "none", - textTransform: "none" as const, }, "Text xs/Medium": { fontFamily: "Work Sans", @@ -1242,11 +1059,8 @@ export const theme = { fontWeight: 500, letterSpacing: "0%", lineHeight: "14px", - marginBlockEnd: 10, - marginInlineStart: 0, fontStretch: "normal", textDecoration: "none", - textTransform: "none" as const, }, "Text xs/Semibold": { fontFamily: "Work Sans", @@ -1255,11 +1069,8 @@ export const theme = { fontWeight: 600, letterSpacing: "0%", lineHeight: "14px", - marginBlockEnd: 10, - marginInlineStart: 0, fontStretch: "normal", textDecoration: "none", - textTransform: "none" as const, }, "Text xs/Bold": { fontFamily: "Work Sans", @@ -1268,11 +1079,8 @@ export const theme = { fontWeight: 700, letterSpacing: "0%", lineHeight: "14px", - marginBlockEnd: 10, - marginInlineStart: 0, fontStretch: "normal", textDecoration: "none", - textTransform: "none" as const, }, "Text xs/Regular italic": { fontFamily: "Work Sans", @@ -1281,11 +1089,8 @@ export const theme = { fontWeight: 400, letterSpacing: "0%", lineHeight: "14px", - marginBlockEnd: 10, - marginInlineStart: 0, fontStretch: "normal", textDecoration: "none", - textTransform: "none" as const, }, "Text xs/Regular underlined": { fontFamily: "Work Sans", @@ -1294,11 +1099,8 @@ export const theme = { fontWeight: 400, letterSpacing: "0%", lineHeight: "14px", - marginBlockEnd: 10, - marginInlineStart: 0, fontStretch: "normal", textDecoration: "underline", - textTransform: "none" as const, }, "Text xs/Medium italic": { fontFamily: "Work Sans", @@ -1307,11 +1109,8 @@ export const theme = { fontWeight: 500, letterSpacing: "0%", lineHeight: "14px", - marginBlockEnd: 10, - marginInlineStart: 0, fontStretch: "normal", textDecoration: "none", - textTransform: "none" as const, }, "Text xs/Semibold italic": { fontFamily: "Work Sans", @@ -1320,11 +1119,8 @@ export const theme = { fontWeight: 600, letterSpacing: "0%", lineHeight: "14px", - marginBlockEnd: 10, - marginInlineStart: 0, fontStretch: "normal", textDecoration: "none", - textTransform: "none" as const, }, "Text xs/Bold italic": { fontFamily: "Work Sans", @@ -1333,11 +1129,8 @@ export const theme = { fontWeight: 700, letterSpacing: "0%", lineHeight: "14px", - marginBlockEnd: 10, - marginInlineStart: 0, fontStretch: "normal", textDecoration: "none", - textTransform: "none" as const, }, "Text xxs/Regular": { fontFamily: "Work Sans", @@ -1346,11 +1139,8 @@ export const theme = { fontWeight: 400, letterSpacing: "0%", lineHeight: "12px", - marginBlockEnd: 10, - marginInlineStart: 0, fontStretch: "normal", textDecoration: "none", - textTransform: "none" as const, }, "Text xxs/Medium": { fontFamily: "Work Sans", @@ -1359,11 +1149,8 @@ export const theme = { fontWeight: 500, letterSpacing: "0%", lineHeight: "12px", - marginBlockEnd: 10, - marginInlineStart: 0, fontStretch: "normal", textDecoration: "none", - textTransform: "none" as const, }, "Text xxs/Semibold": { fontFamily: "Work Sans", @@ -1372,11 +1159,8 @@ export const theme = { fontWeight: 600, letterSpacing: "0%", lineHeight: "12px", - marginBlockEnd: 10, - marginInlineStart: 0, fontStretch: "normal", textDecoration: "none", - textTransform: "none" as const, }, "Text xxs/Bold": { fontFamily: "Work Sans", @@ -1385,11 +1169,8 @@ export const theme = { fontWeight: 700, letterSpacing: "0%", lineHeight: "12px", - marginBlockEnd: 10, - marginInlineStart: 0, fontStretch: "normal", textDecoration: "none", - textTransform: "none" as const, }, "Text xxs/Regular italic": { fontFamily: "Work Sans", @@ -1398,11 +1179,8 @@ export const theme = { fontWeight: 400, letterSpacing: "0%", lineHeight: "12px", - marginBlockEnd: 10, - marginInlineStart: 0, fontStretch: "normal", textDecoration: "none", - textTransform: "none" as const, }, "Text xxs/Regular underlined": { fontFamily: "Work Sans", @@ -1411,11 +1189,8 @@ export const theme = { fontWeight: 400, letterSpacing: "0%", lineHeight: "12px", - marginBlockEnd: 10, - marginInlineStart: 0, fontStretch: "normal", textDecoration: "underline", - textTransform: "none" as const, }, "Text xxs/Medium italic": { fontFamily: "Work Sans", @@ -1424,11 +1199,8 @@ export const theme = { fontWeight: 500, letterSpacing: "0%", lineHeight: "12px", - marginBlockEnd: 10, - marginInlineStart: 0, fontStretch: "normal", textDecoration: "none", - textTransform: "none" as const, }, "Text xxs/Semibold italic": { fontFamily: "Work Sans", @@ -1437,11 +1209,8 @@ export const theme = { fontWeight: 600, letterSpacing: "0%", lineHeight: "12px", - marginBlockEnd: 10, - marginInlineStart: 0, fontStretch: "normal", textDecoration: "none", - textTransform: "none" as const, }, "Text xxs/Bold italic": { fontFamily: "Work Sans", @@ -1450,11 +1219,8 @@ export const theme = { fontWeight: 700, letterSpacing: "0%", lineHeight: "12px", - marginBlockEnd: 10, - marginInlineStart: 0, fontStretch: "normal", textDecoration: "none", - textTransform: "none" as const, }, }, } diff --git a/packages/client/src/client/utils/invertDirection.ts b/packages/client/src/client/utils/invertDirection.ts index ce08db22d4..e75150fcf3 100644 --- a/packages/client/src/client/utils/invertDirection.ts +++ b/packages/client/src/client/utils/invertDirection.ts @@ -1,5 +1,7 @@ import { Direction } from "@/generated/TradingGateway" +import { isBuy } from "../App/Credit/common" + export function invertDirection(direction: Direction): Direction { - return direction === Direction.Buy ? Direction.Sell : Direction.Buy + return isBuy(direction) ? Direction.Sell : Direction.Buy } diff --git a/packages/client/src/client/utils/styling/backgroundFlash.ts b/packages/client/src/client/utils/styling/backgroundFlash.ts new file mode 100644 index 0000000000..4c59192e07 --- /dev/null +++ b/packages/client/src/client/utils/styling/backgroundFlash.ts @@ -0,0 +1,13 @@ +import { DefaultTheme, keyframes, ThemeProps } from "styled-components" + +export const backgroundFlash = (props: ThemeProps) => keyframes` +0% { + background-color: ${props.theme.newTheme.color["Colors/Background/bg-primary"]}; +} +50% { + background-color: ${props.theme.newTheme.color["Colors/Background/bg-brand-primary"]}; +} +100% { + background-color: ${props.theme.newTheme.color["Colors/Background/bg-primary"]}; +} +` diff --git a/packages/client/src/client/utils/styling/index.ts b/packages/client/src/client/utils/styling/index.ts index b9a4b25edf..66e102c852 100644 --- a/packages/client/src/client/utils/styling/index.ts +++ b/packages/client/src/client/utils/styling/index.ts @@ -1 +1,2 @@ export * from "./animation-breathing" +export * from "./backgroundFlash" diff --git a/packages/client/src/client/utils/useSafeContext.ts b/packages/client/src/client/utils/useSafeContext.ts new file mode 100644 index 0000000000..be2463a519 --- /dev/null +++ b/packages/client/src/client/utils/useSafeContext.ts @@ -0,0 +1,12 @@ +import { useContext } from "react" + +export const useSafeContext = ( + context: React.Context, + message: string, +) => { + const _context = useContext(context) + + if (!_context) throw Error(message) + + return _context +} diff --git a/packages/client/src/workspace/home/respondWithIntent.ts b/packages/client/src/workspace/home/respondWithIntent.ts index d34150e3e4..7f327669d9 100644 --- a/packages/client/src/workspace/home/respondWithIntent.ts +++ b/packages/client/src/workspace/home/respondWithIntent.ts @@ -18,7 +18,8 @@ import { withLatestFrom, } from "rxjs" -import { ACK_CREATE_RFQ_RESPONSE, Direction } from "@/generated/TradingGateway" +import { isBuy } from "@/client/App/Credit/common" +import { ACK_CREATE_RFQ_RESPONSE } from "@/generated/TradingGateway" import { getCreditRfqDetails$ } from "@/services/credit" import { creditInstruments$ } from "@/services/credit/creditInstruments" import { @@ -211,14 +212,13 @@ export const respondWithIntent = ( const data = { manifestType: "trade-execution", currencyPair: symbol, - spotRate: direction === Direction.Buy ? ask : bid, + spotRate: isBuy(direction) ? ask : bid, valueDate: new Date().toISOString().substr(0, 10), direction, notional, - dealtCurrency: - direction === Direction.Buy - ? symbol.substr(0, 3) - : symbol.substr(3, 3), + dealtCurrency: isBuy(direction) + ? symbol.substr(0, 3) + : symbol.substr(3, 3), } result = { diff --git a/packages/client/src/workspace/home/templates.ts b/packages/client/src/workspace/home/templates.ts index b42b72a54c..2a17ae24c2 100644 --- a/packages/client/src/workspace/home/templates.ts +++ b/packages/client/src/workspace/home/templates.ts @@ -2,6 +2,7 @@ import { ButtonStyle, CLITemplate, TemplateFragment } from "@openfin/workspace" import * as CSS from "csstype" import { format } from "date-fns" +import { isBuy } from "@/client/App/Credit/common" import { customNumberFormatter, DECIMAL_SEPARATOR, @@ -386,9 +387,7 @@ export const constructTradeExecutedTemplateContent = ( const terms = trade.currencyPair.slice(3, 6) const data = { tradeId: `Trade ID: ${trade.tradeId.toString()}`, - direction: `You ${ - trade.direction === Direction.Buy ? "bought" : "sold" - } `, + direction: `You ${isBuy(trade.direction) ? "bought" : "sold"} `, notional: `${base} ${nf.format(trade.notional)}`, rateLabel: " at a rate of ", rate: trade.spotRate.toString(),