diff --git a/libs/island-ui/theme/src/index.ts b/libs/island-ui/theme/src/index.ts index faf26866dc31..c25b28463e35 100644 --- a/libs/island-ui/theme/src/index.ts +++ b/libs/island-ui/theme/src/index.ts @@ -1,4 +1,4 @@ import * as HelperStylesExports from './lib/helperStyles.css' export const helperStyles = { ...HelperStylesExports } -export * from './lib/colors' +export * from './lib/colors/colors' export * from './lib/theme' diff --git a/libs/island-ui/theme/src/lib/colors.ts b/libs/island-ui/theme/src/lib/colors.ts deleted file mode 100644 index 4e71b28e4a50..000000000000 --- a/libs/island-ui/theme/src/lib/colors.ts +++ /dev/null @@ -1,56 +0,0 @@ -// Primary colors -export const blue600 = '#0044b3' -export const blue400 = '#0061ff' -export const blue300 = '#99c0ff' -export const blue200 = '#ccdfff' -export const blue100 = '#f2f7ff' - -export const dark400 = '#00003c' -export const dark300 = '#9999b1' -export const dark200 = '#ccccd8' -export const dark100 = '#f2f2f5' - -export const red600 = '#b30038' -export const red400 = '#ff0050' -export const red300 = '#ff99b9' -export const red200 = '#ffccdc' -export const red100 = '#fff2f6' - -export const white = '#ffffff' -export const black = '#000000' - -// Support colors -export const blueberry600 = '#24268e' -export const blueberry400 = '#4649d0' -export const blueberry300 = '#b5b6ec' -export const blueberry200 = '#dadbf6' -export const blueberry100 = '#f6f6fd' - -export const purple600 = '#421c63' -export const purple400 = '#6a2ea0' -export const purple300 = '#c3abd9' -export const purple200 = '#e1d5ec' -export const purple100 = '#f8f5fa' - -export const roseTinted600 = '#4d003a' -export const roseTinted400 = '#9a0074' -export const roseTinted300 = '#d799c7' -export const roseTinted200 = '#ebcce3' -export const roseTinted100 = '#faf2f8' - -// Attention colors -export const mint800 = '#005B52' -export const mint600 = '#00b39e' -export const mint400 = '#00e4ca' -export const mint200 = '#ccfaf4' -export const mint300 = '#99f4ea' -export const mint100 = '#f2fefc' - -export const yellow600 = '#e6cf00' -export const yellow400 = '#fff066' -export const yellow200 = '#fffce0' -export const yellow300 = '#fff9c2' -export const yellow100 = '#fffef7' - -export const transparent = 'transparent' -export const currentColor = 'currentColor' diff --git a/libs/island-ui/theme/src/lib/colors/colors.ts b/libs/island-ui/theme/src/lib/colors/colors.ts new file mode 100644 index 000000000000..cb79aa5ae7a1 --- /dev/null +++ b/libs/island-ui/theme/src/lib/colors/colors.ts @@ -0,0 +1,202 @@ +import { color } from './primitivesMapper' + +const { + primary: { blue, dark, red }, + secondary: { blueberry, purple, rose }, + accent: { mint, yellow }, +} = color + +// Primary colors +export const blue600 = blue[600] ?? '#0044b3' +export const blue400 = blue[400] ?? '#0061ff' +export const blue300 = blue[300] ?? '#99c0ff' +export const blue200 = blue[200] ?? '#ccdfff' +export const blue100 = blue[100] ?? '#ccdfff' + +export const dark400 = dark[400] ?? '#00003c' +export const dark350 = dark[350] ?? '#33335a' +export const dark300 = dark[300] ?? '#9999b1' +export const dark200 = dark[200] ?? '#ccccd8' +export const dark100 = dark[100] ?? '#f2f2f5' + +export const red600 = red[600] ?? '#b30038' +export const red400 = red[400] ?? '#ff0050' +export const red300 = red[300] ?? '#ff99b9' +export const red200 = red[200] ?? '#ffccdc' +export const red100 = red[100] ?? '#fff2f6' + +export const white = '#ffffff' +export const black = '#000000' +export const overlay = '#f2f7ff' + +// Secondary colors +export const blueberry600 = blueberry[600] ?? '#24268e' +export const blueberry400 = blueberry[400] ?? '#4649d0' +export const blueberry300 = blueberry[300] ?? '#b5b6ec' +export const blueberry200 = blueberry[200] ?? '#dadbf6' +export const blueberry100 = blueberry[100] ?? '#f6f6fd' + +export const purple600 = purple[600] ?? '#421c63' +export const purple400 = purple[400] ?? '#6a2ea0' +export const purple300 = purple[300] ?? '#c3abd9' +export const purple200 = purple[200] ?? '#e1d5ec' +export const purple100 = purple[100] ?? '#f8f5fa' + +export const roseTinted600 = rose[600] ?? '#4d003a' +export const roseTinted400 = rose[400] ?? '#9a0074' +export const roseTinted300 = rose[300] ?? '#d799c7' +export const roseTinted200 = rose[200] ?? '#ebcce3' +export const roseTinted100 = rose[100] ?? '#faf2f8' + +// Accent colors +export const mint800 = mint[800] ?? '#005B52' +export const mint600 = mint[600] ?? '#00b39e' +export const mint400 = mint[400] ?? '#00e4ca' +export const mint300 = mint[300] ?? '#99f4ea' +export const mint200 = mint[200] ?? '#ccfaf4' +export const mint100 = mint[100] ?? '#f2fefc' + +export const yellow600 = yellow[600] ?? '#e6cf00' +export const yellow400 = yellow[400] ?? '#fff066' +export const yellow300 = yellow[300] ?? '#fff9c2' +export const yellow200 = yellow[200] ?? '#fffce0' +export const yellow100 = yellow[100] ?? '#fffef7' + +export const transparent = 'transparent' +export const currentColor = 'currentColor' + +/* ----- Mapping colors to match the design tokens ----- */ + +// Background Colors +export const backgroundBrand = blue400 +export const backgroundBrandLighter = blue200 +export const backgroundBrandMinimal = blue100 +export const backgroundBrandSecondary = purple400 +export const backgroundBrandSecondaryLighter = purple200 +export const backgroundBrandSecondaryMinimal = purple100 +export const backgroundInvert = white + +// Border Colors +export const borderInvert = white +export const borderPrimary = blue200 +export const borderPrimaryContrast = blue400 +export const borderSecondaryActive = purple400 +export const borderSecondaryInactive = purple200 + +// Feedback Colors - Error +export const feedbackErrorBackground = red100 +export const feedbackErrorBorder = red200 +export const feedbackErrorBorderContrast = red600 +export const feedbackErrorForeground = red400 +export const feedbackErrorForegroundContrast = red600 + +// Feedback Colors - Information +export const feedbackInfoBackgroundMinimal = blue100 +export const feedbackInfoBorder = blue200 +export const feedbackInfoForeground = blue400 +export const feedbackInfoForegroundContrast = blue600 + +// Feedback Colors - Success +export const feedbackSuccessBackground = mint100 +export const feedbackSuccessBorder = mint200 +export const feedbackSuccessForeground = mint400 + +// Feedback Colors - Tags +export const feedbackTagsBlueAccent = blue400 +export const feedbackTagsBlueBackground = blue100 +export const feedbackTagsBlueBorder = blue200 + +export const feedbackTagsBlueberryAccent = blueberry400 +export const feedbackTagsBlueberryBackground = blueberry100 +export const feedbackTagsBlueberryBorder = blueberry200 + +export const feedbackTagsDarkBlueAccent = blue600 +export const feedbackTagsDarkBlueBackground = blue200 +export const feedbackTagsDarkBlueBorder = blue200 + +export const feedbackTagsMintAccent = mint800 +export const feedbackTagsMintBackground = mint200 +export const feedbackTagsMintBorder = mint200 + +export const feedbackTagsPurpleAccent = purple400 +export const feedbackTagsPurpleBackground = purple100 +export const feedbackTagsPurpleBorder = purple200 + +export const feedbackTagsRedAccent = red600 +export const feedbackTagsRedBackground = red100 +export const feedbackTagsRedBorder = red200 + +export const feedbackTagsRoseAccent = roseTinted400 +export const feedbackTagsRoseBackground = roseTinted100 +export const feedbackTagsRoseAccentBorder = roseTinted200 + +export const feedbackTagsYellowAccent = dark400 +export const feedbackTagsYellowBackground = yellow300 +export const feedbackTagsYellowBorder = yellow600 +export const feedbackTagsYellowHover = yellow400 + +// Feedback Colors - Warning +export const feedbackWarningBackground = yellow200 +export const feedbackWarningBorder = yellow400 +export const feedbackWarningForeground = yellow600 + +// Foreground Colors +export const foregroundBrand = blue400 +export const foregroundBrandContrast = blue600 +export const foregroundBrandSecondary = purple400 +export const foregroundBrandSecondaryContrast = purple600 +export const foregroundInvert = white +export const foregroundModal = dark400 +export const foregroundPrimary = dark400 +export const foregroundPrimaryMinimal = dark300 + +// Interactive Colors - Background +export const interactiveBackgroundBrandSecondaryActive = purple200 +export const interactiveBackgroundBrandSecondaryMinimal = purple100 +export const interactiveBackgroundDestructive = red600 +export const interactiveBackgroundDestructiveActive = roseTinted400 +export const interactiveBackgroundDestructiveDisabled = red300 +export const interactiveBackgroundFocus = mint400 +export const interactiveBackgroundInvert = white +export const interactiveBackgroundNeutral = dark300 +export const interactiveBackgroundNeutralActive = dark350 +export const interactiveBackgroundPrimary = blue400 +export const interactiveBackgroundPrimaryActive = blueberry400 +export const interactiveBackgroundPrimaryDisabled = blue300 +export const interactiveBackgroundPrimaryMinimal = blue100 +export const interactiveBackgroundPrimaryMinimalActive = blue200 +export const interactiveBackgroundTooltip = dark400 + +// Interactive Colors - Border +export const interactiveBorderActive = dark400 +export const interactiveBorderDisabled = blue300 +export const interactiveBorderPrimary = blue400 +export const interactiveBorderPrimaryMinimal = blue200 +export const interactiveBorderSecondary = purple400 +export const interactiveBorderSecondaryMinimal = purple200 +export const interactiveBorderDestructiveActive = roseTinted400 +export const interactiveBorderDestructiveDefault = red600 +export const interactiveBorderDestructiveDisabled = red300 +export const interactiveBorderFocus = mint400 +export const interactiveBorderInvert = white +export const interactiveBorderInvertActive = blueberry100 + +// Interactive Colors - Foreground +export const interactiveForegroundBrandSecondary = purple400 +export const interactiveForegroundBrandSecondaryContrast = purple600 +export const interactiveForegroundDefault = dark400 +export const interactiveForegroundDestructive = red600 +export const interactiveForegroundDestructiveActive = roseTinted400 +export const interactiveForegroundDestructiveDisabled = red300 +export const interactiveForegroundDisabled = dark300 +export const interactiveForegroundInvert = white +export const interactiveForegroundInvertActive = blueberry100 +export const interactiveForegroundPrimary = blue400 +export const interactiveForegroundPrimaryActive = blueberry400 +export const interactiveForegroundPrimaryContrast = blue600 +export const interactiveForegroundPrimaryDisabled = blue300 +export const interactiveForegroundRed = red400 +export const interactiveForegroundRedMinimalActive = red200 + +// Overlay Colors +export const overlayDefault = overlay diff --git a/libs/island-ui/theme/src/lib/colors/primitivesMapper.ts b/libs/island-ui/theme/src/lib/colors/primitivesMapper.ts new file mode 100644 index 000000000000..f66950da3365 --- /dev/null +++ b/libs/island-ui/theme/src/lib/colors/primitivesMapper.ts @@ -0,0 +1,70 @@ +import { color as colorPrimitives } from '../tokens/tokens' + +export const color = { + primary: { + blue: { + 100: colorPrimitives.primary.blue['100'].$value, + 200: colorPrimitives.primary.blue['200'].$value, + 300: colorPrimitives.primary.blue['300'].$value, + 400: colorPrimitives.primary.blue['400'].$value, + 600: colorPrimitives.primary.blue['600'].$value, + }, + dark: { + 100: colorPrimitives.primary.dark['100'].$value, + 200: colorPrimitives.primary.dark['200'].$value, + 300: colorPrimitives.primary.dark['300'].$value, + 350: colorPrimitives.primary.dark['350'].$value, + 400: colorPrimitives.primary.dark['400'].$value, + }, + red: { + 100: colorPrimitives.primary.red['100'].$value, + 200: colorPrimitives.primary.red['200'].$value, + 300: colorPrimitives.primary.red['300'].$value, + 400: colorPrimitives.primary.red['400'].$value, + 600: colorPrimitives.primary.red['600'].$value, + }, + white: { + 400: colorPrimitives.primary.white['400'].$value, + }, + }, + secondary: { + blueberry: { + 100: colorPrimitives.secondary.blueberry['100'].$value, + 200: colorPrimitives.secondary.blueberry['200'].$value, + 300: colorPrimitives.secondary.blueberry['300'].$value, + 400: colorPrimitives.secondary.blueberry['400'].$value, + 600: colorPrimitives.secondary.blueberry['600'].$value, + }, + purple: { + 100: colorPrimitives.secondary.purple['100'].$value, + 200: colorPrimitives.secondary.purple['200'].$value, + 300: colorPrimitives.secondary.purple['300'].$value, + 400: colorPrimitives.secondary.purple['400'].$value, + 600: colorPrimitives.secondary.purple['600'].$value, + }, + rose: { + 100: colorPrimitives.secondary.rose['100'].$value, + 200: colorPrimitives.secondary.rose['200'].$value, + 300: colorPrimitives.secondary.rose['300'].$value, + 400: colorPrimitives.secondary.rose['400'].$value, + 600: colorPrimitives.secondary.rose['600'].$value, + }, + }, + accent: { + mint: { + 100: colorPrimitives.accent.mint['100'].$value, + 200: colorPrimitives.accent.mint['200'].$value, + 300: colorPrimitives.accent.mint['300'].$value, + 400: colorPrimitives.accent.mint['400'].$value, + 600: colorPrimitives.accent.mint['600'].$value, + 800: colorPrimitives.accent.mint['800'].$value, + }, + yellow: { + 100: colorPrimitives.accent.yellow['100'].$value, + 200: colorPrimitives.accent.yellow['200'].$value, + 300: colorPrimitives.accent.yellow['300'].$value, + 400: colorPrimitives.accent.yellow['400'].$value, + 600: colorPrimitives.accent.yellow['600'].$value, + }, + }, +} diff --git a/libs/island-ui/theme/src/lib/theme.ts b/libs/island-ui/theme/src/lib/theme.ts index 7036be569c09..c262d1842c8d 100644 --- a/libs/island-ui/theme/src/lib/theme.ts +++ b/libs/island-ui/theme/src/lib/theme.ts @@ -1,41 +1,40 @@ import isEqual from 'lodash/isEqual' import type { StyleRule } from '@vanilla-extract/css' import omit from 'lodash/omit' -import * as color from './colors' +import * as color from './colors/colors' +import { font, spacing as spacingPrimitives, radius } from './tokens/tokens' export const UNIT = 8 +// TODO: spacing will be further updated in the followup PR export const spacing = { - 0: UNIT * 0, - 1: UNIT * 1, - 2: UNIT * 2, - 3: UNIT * 3, - 4: UNIT * 4, - 5: UNIT * 5, - 6: UNIT * 6, - 7: UNIT * 7, - 8: UNIT * 8, - 9: UNIT * 9, - 10: UNIT * 10, - 12: UNIT * 12, - 14: UNIT * 14, - 15: UNIT * 15, - 20: UNIT * 20, - 21: UNIT * 21, - 22: UNIT * 22, - 23: UNIT * 23, - 24: UNIT * 24, - 25: UNIT * 25, - 26: UNIT * 26, - 27: UNIT * 27, - 28: UNIT * 28, - 29: UNIT * 29, - 30: UNIT * 30, - 31: UNIT * 31, + 0: spacingPrimitives['0'].$value ?? UNIT * 0, + 1: spacingPrimitives['8'].$value ?? UNIT * 1, + 2: spacingPrimitives['16'].$value ?? UNIT * 2, + 3: spacingPrimitives['24'].$value ?? UNIT * 3, + 4: spacingPrimitives['32'].$value ?? UNIT * 4, + 5: spacingPrimitives['40'].$value ?? UNIT * 5, + 6: spacingPrimitives['48'].$value ?? UNIT * 6, + 7: spacingPrimitives['56'].$value ?? UNIT * 7, + 8: spacingPrimitives['64'].$value ?? UNIT * 8, + 9: spacingPrimitives['72'].$value ?? UNIT * 9, + 10: spacingPrimitives['80'].$value ?? UNIT * 10, + 12: spacingPrimitives['96'].$value ?? UNIT * 12, + 13: spacingPrimitives['104'].$value ?? UNIT * 13, + 14: UNIT * 14, // DEPRECATED + 15: spacingPrimitives['120'].$value ?? UNIT * 15, + 20: UNIT * 20, // DEPRECATED + 21: UNIT * 21, // DEPRECATED + 22: UNIT * 22, // DEPRECATED + 23: UNIT * 23, // DEPRECATED + 24: UNIT * 24, // DEPRECATED + 28: UNIT * 28, // DEPRECATED + 30: UNIT * 30, // DEPRECATED + 200: spacingPrimitives['200'].$value ?? UNIT * 25, none: UNIT * 0, - smallGutter: UNIT * 0.5, - gutter: UNIT * 2, - containerGutter: UNIT * 6, + smallGutter: spacingPrimitives['4'].$value ?? UNIT * 0.5, + gutter: spacingPrimitives['16'].$value ?? UNIT * 2, + containerGutter: spacingPrimitives['48'].$value ?? UNIT * 6, auto: 'auto', p1: 8, p2: 12, @@ -76,7 +75,7 @@ export const theme = { zIndex, touchableSize: 10, typography: { - fontFamily: `"IBM Plex Sans", San Francisco, Segoe UI, sans-serif`, + fontFamily: `"${font.family.primary.$value}", San Francisco, Segoe UI, sans-serif`, light: 300, regular: 400, medium: 500, @@ -98,10 +97,13 @@ export const theme = { solid: 'solid', }, radius: { - standard: '4px', - large: '8px', - xl: '24px', - circle: '50%', + standard: `${radius.xs.$value ?? 4}px`, // TODO: check with designers to keep as standard + large: `${radius.default.$value ?? 8}px`, // TODO: check with designers to keep as large + md: `${radius.md.$value ?? 12}px`, + lg: `${radius.lg.$value ?? 16}px`, + xl: '24px', // TODO: should be added to figma? + circle: '50%', // TODO: should be added to figma? + full: `${radius.full.$value ?? 9999}px`, }, width: { standard: 1, @@ -110,7 +112,7 @@ export const theme = { }, color: { standard: color.blue200, - focus: color.red200, + focus: color.red200, // Ask designer what the border colors mean in sync with this? ...color, }, }, diff --git a/libs/island-ui/theme/src/lib/tokens/figmaTokens.json b/libs/island-ui/theme/src/lib/tokens/figmaTokens.json new file mode 100644 index 000000000000..900367d70798 --- /dev/null +++ b/libs/island-ui/theme/src/lib/tokens/figmaTokens.json @@ -0,0 +1,1774 @@ +[ + { + "00 Primitives": { + "modes": { + "Mode 1": { + "color": { + "primary": { + "blue": { + "100": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#f2f7ff" + }, + "200": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#ccdfff" + }, + "300": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#99c0ff" + }, + "400": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#0061ff" + }, + "600": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#0044b3" + } + }, + "red": { + "100": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#fff2f6" + }, + "200": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#ffccdc" + }, + "300": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#ff99b9" + }, + "400": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#ff0050" + }, + "600": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#b30038" + } + }, + "dark": { + "100": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#f2f2f5" + }, + "200": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#ccccd8" + }, + "300": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#9999b1" + }, + "350": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#666685" + }, + "400": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#00003c" + } + }, + "white": { + "400": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#ffffff" + } + } + }, + "secondary": { + "blueberry": { + "100": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#f6f6fd" + }, + "200": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#dadbf6" + }, + "300": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#b5b6ec" + }, + "400": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#4649d0" + }, + "600": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#24268e" + } + }, + "purple": { + "100": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#f8f5fa" + }, + "200": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#e1d5ec" + }, + "300": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#c3abd9" + }, + "400": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#6a2ea0" + }, + "600": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#421c63" + } + }, + "rose": { + "100": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#faf2f8" + }, + "200": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#ebcce3" + }, + "300": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#d799c7" + }, + "400": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#9a0074" + }, + "600": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#4d003a" + } + } + }, + "accent": { + "mint": { + "100": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#f2fefc" + }, + "200": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#ccfaf4" + }, + "300": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#99f4ea" + }, + "400": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#00e4ca" + }, + "600": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#00b39e" + }, + "800": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#005b52" + } + }, + "yellow": { + "100": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#fffef7" + }, + "200": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#fffce0" + }, + "300": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#fff9c2" + }, + "400": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#fff066" + }, + "600": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#e6cf00" + } + } + } + }, + "font": { + "family": { + "primary": { + "$scopes": ["FONT_FAMILY"], + "$type": "string", + "$value": "IBM Plex Sans" + } + }, + "weight": { + "semibold": { + "$scopes": ["FONT_STYLE"], + "$type": "string", + "$value": "Semibold" + }, + "regular": { + "$scopes": ["ALL_SCOPES"], + "$type": "string", + "$value": "Regular" + }, + "light": { + "$scopes": ["FONT_STYLE"], + "$type": "string", + "$value": "Light" + } + } + }, + "spacing": { + "0": { + "$scopes": ["WIDTH_HEIGHT", "GAP"], + "$type": "float", + "$value": 0 + }, + "2": { + "$scopes": ["WIDTH_HEIGHT", "GAP"], + "$type": "float", + "$value": 2 + }, + "4": { + "$scopes": ["WIDTH_HEIGHT", "GAP"], + "$type": "float", + "$value": 4 + }, + "8": { + "$scopes": ["WIDTH_HEIGHT", "GAP"], + "$type": "float", + "$value": 8 + }, + "12": { + "$scopes": ["WIDTH_HEIGHT", "GAP"], + "$type": "float", + "$value": 12 + }, + "16": { + "$scopes": ["WIDTH_HEIGHT", "GAP"], + "$type": "float", + "$value": 16 + }, + "20": { + "$scopes": ["WIDTH_HEIGHT", "GAP"], + "$type": "float", + "$value": 20 + }, + "24": { + "$scopes": ["WIDTH_HEIGHT", "GAP"], + "$type": "float", + "$value": 24 + }, + "28": { + "$scopes": ["WIDTH_HEIGHT", "GAP"], + "$type": "float", + "$value": 28 + }, + "32": { + "$scopes": ["WIDTH_HEIGHT", "GAP"], + "$type": "float", + "$value": 32 + }, + "36": { + "$scopes": ["WIDTH_HEIGHT", "GAP"], + "$type": "float", + "$value": 36 + }, + "40": { + "$scopes": ["WIDTH_HEIGHT", "GAP"], + "$type": "float", + "$value": 40 + }, + "44": { + "$scopes": ["WIDTH_HEIGHT", "GAP"], + "$type": "float", + "$value": 44 + }, + "48": { + "$scopes": ["WIDTH_HEIGHT", "GAP"], + "$type": "float", + "$value": 48 + }, + "52": { + "$scopes": ["WIDTH_HEIGHT", "GAP"], + "$type": "float", + "$value": 52 + }, + "56": { + "$scopes": ["WIDTH_HEIGHT", "GAP"], + "$type": "float", + "$value": 56 + }, + "60": { + "$scopes": ["WIDTH_HEIGHT", "GAP"], + "$type": "float", + "$value": 60 + }, + "64": { + "$scopes": ["WIDTH_HEIGHT", "GAP"], + "$type": "float", + "$value": 64 + }, + "68": { + "$scopes": ["WIDTH_HEIGHT", "GAP"], + "$type": "float", + "$value": 69 + }, + "72": { + "$scopes": ["WIDTH_HEIGHT", "GAP"], + "$type": "float", + "$value": 72 + }, + "76": { + "$scopes": ["WIDTH_HEIGHT", "GAP"], + "$type": "float", + "$value": 76 + }, + "80": { + "$scopes": ["WIDTH_HEIGHT", "GAP"], + "$type": "float", + "$value": 80 + }, + "84": { + "$scopes": ["WIDTH_HEIGHT", "GAP"], + "$type": "float", + "$value": 84 + }, + "88": { + "$scopes": ["WIDTH_HEIGHT", "GAP"], + "$type": "float", + "$value": 88 + }, + "92": { + "$scopes": ["WIDTH_HEIGHT", "GAP"], + "$type": "float", + "$value": 92 + }, + "96": { + "$scopes": ["WIDTH_HEIGHT", "GAP"], + "$type": "float", + "$value": 96 + }, + "100": { + "$scopes": ["WIDTH_HEIGHT", "GAP"], + "$type": "float", + "$value": 100 + }, + "104": { + "$scopes": ["WIDTH_HEIGHT", "GAP"], + "$type": "float", + "$value": 104 + }, + "120": { + "$scopes": ["WIDTH_HEIGHT", "GAP"], + "$type": "float", + "$value": 120 + }, + "200": { + "$scopes": ["WIDTH_HEIGHT", "GAP"], + "$type": "float", + "$value": 200 + } + }, + "radius": { + "none": { + "$scopes": ["CORNER_RADIUS"], + "$type": "float", + "$value": 0 + }, + "xs": { + "$scopes": ["CORNER_RADIUS"], + "$type": "float", + "$value": 4 + }, + "default": { + "$scopes": ["CORNER_RADIUS"], + "$type": "float", + "$value": 8 + }, + "md": { + "$scopes": ["CORNER_RADIUS"], + "$type": "float", + "$value": 12 + }, + "lg": { + "$scopes": ["CORNER_RADIUS"], + "$type": "float", + "$value": 16 + }, + "full": { + "$scopes": ["CORNER_RADIUS"], + "$type": "float", + "$value": 9999 + } + } + } + } + } + }, + { + "01 Colors Tokens": { + "modes": { + "Light Mode": { + "background": { + "invert": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.primary.white.400}" + }, + "brand": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.primary.blue.400}" + }, + "brand-lighter": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.primary.blue.200}" + }, + "brand-minimal": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.primary.blue.100}" + }, + "brand-secondary": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.secondary.purple.400}" + }, + "brand-secondary-lighter": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.secondary.purple.200}" + }, + "brand-secondary-minimal": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.secondary.purple.100}" + } + }, + "foreground": { + "primary": { + "$scopes": ["SHAPE_FILL", "TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.primary.dark.400}" + }, + "primary-minimal": { + "$scopes": ["SHAPE_FILL", "TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.primary.dark.300}" + }, + "brand-secondary-contrast": { + "$scopes": ["SHAPE_FILL", "TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.secondary.purple.600}" + }, + "brand-secondary": { + "$scopes": ["SHAPE_FILL", "TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.secondary.purple.400}" + }, + "brand": { + "$scopes": ["SHAPE_FILL", "TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.primary.blue.400}" + }, + "brand-contrast": { + "$scopes": ["SHAPE_FILL", "TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.primary.blue.600}" + }, + "invert": { + "$scopes": ["SHAPE_FILL", "TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.primary.white.400}" + }, + "modal": { + "$scopes": ["SHAPE_FILL", "TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.primary.dark.400}" + } + }, + "border": { + "primary": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.primary.blue.200}" + }, + "primary-contrast": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.primary.blue.400}" + }, + "invert": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.primary.white.400}" + }, + "secondary-active": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.secondary.purple.400}" + }, + "secondary-inactive": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.secondary.purple.200}" + } + }, + "interactive": { + "background": { + "primary": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.primary.blue.400}" + }, + "primary-minimal": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.primary.blue.100}" + }, + "primary-minimal-active": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.primary.blue.200}" + }, + "primary-disabled": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.primary.blue.300}" + }, + "primary-active": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.secondary.blueberry.400}" + }, + "neutral": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.primary.dark.300}" + }, + "neutral-active": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.primary.dark.350}" + }, + "focus": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.accent.mint.400}" + }, + "invert": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.primary.white.400}" + }, + "destructive": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.primary.red.600}" + }, + "destructive-active": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.secondary.rose.400}" + }, + "destructive-disabled": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.primary.red.300}" + }, + "tooltip": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.primary.dark.400}" + }, + "brand-secondary-active": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.secondary.purple.200}" + }, + "brand-secondary-minimal": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.secondary.purple.100}" + } + }, + "foreground": { + "primary": { + "$scopes": ["SHAPE_FILL", "TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.primary.blue.400}" + }, + "primary-contrast": { + "$scopes": ["SHAPE_FILL", "TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.primary.blue.600}" + }, + "primary-active": { + "$scopes": ["SHAPE_FILL", "TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.secondary.blueberry.400}" + }, + "primary-disabled": { + "$scopes": ["SHAPE_FILL", "TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.primary.blue.300}" + }, + "brand-secondary": { + "$scopes": ["SHAPE_FILL", "TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.secondary.purple.400}" + }, + "brand-secondary-contrast": { + "$scopes": ["SHAPE_FILL", "TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.secondary.purple.600}" + }, + "default": { + "$scopes": ["SHAPE_FILL", "TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.primary.dark.400}" + }, + "disabled": { + "$scopes": ["SHAPE_FILL", "TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.primary.dark.300}" + }, + "invert": { + "$scopes": ["SHAPE_FILL", "TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.primary.white.400}" + }, + "invert-active": { + "$scopes": ["SHAPE_FILL", "TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.secondary.blueberry.100}" + }, + "red": { + "$scopes": ["SHAPE_FILL", "TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.primary.red.400}" + }, + "red-minimal-active": { + "$scopes": ["SHAPE_FILL", "TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.primary.red.200}" + }, + "destructive": { + "$scopes": ["SHAPE_FILL", "TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.primary.red.600}" + }, + "destructive-active": { + "$scopes": ["SHAPE_FILL", "TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.secondary.rose.400}" + }, + "destructive-disabled": { + "$scopes": ["SHAPE_FILL", "TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.primary.red.300}" + } + }, + "border": { + "border-primary": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.primary.blue.400}" + }, + "border-active": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.secondary.blueberry.400}" + }, + "border-disabled": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.primary.blue.300}" + }, + "border-primary-minimal": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.primary.blue.200}" + }, + "border-secondary-minimal": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.secondary.purple.200}" + }, + "border-secondary": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.secondary.purple.400}" + }, + "focus": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.accent.mint.400}" + }, + "active": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.primary.dark.400}" + }, + "invert": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.primary.white.400}" + }, + "invert-active": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.secondary.blueberry.100}" + }, + "destructive-default": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.primary.red.600}" + }, + "destructive-active": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.secondary.rose.400}" + }, + "destructive-disabled": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.primary.red.300}" + } + } + }, + "feedback": { + "information": { + "background-minimal": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.primary.blue.100}" + }, + "border": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.primary.blue.200}" + }, + "foreground": { + "$scopes": ["SHAPE_FILL", "TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.primary.blue.400}" + }, + "foreground-contrast": { + "$scopes": ["SHAPE_FILL", "TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.primary.blue.600}" + } + }, + "success": { + "background": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.accent.mint.100}" + }, + "foreground": { + "$scopes": ["SHAPE_FILL", "TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.accent.mint.400}" + }, + "border": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.accent.mint.200}" + } + }, + "warning": { + "background": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.accent.yellow.200}" + }, + "foreground": { + "$scopes": ["SHAPE_FILL", "TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.accent.yellow.600}" + }, + "border": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.accent.yellow.400}" + } + }, + "error": { + "background": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.primary.red.100}" + }, + "foreground": { + "$scopes": ["SHAPE_FILL", "TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.primary.red.400}" + }, + "foreground-contrast": { + "$scopes": ["SHAPE_FILL", "TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.primary.red.600}" + }, + "border": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.primary.red.200}" + }, + "border-contrast": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.primary.red.600}" + } + }, + "tags": { + "blue-background": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.primary.blue.100}" + }, + "blue-accent": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.primary.blue.400}" + }, + "blue-border": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.primary.blue.200}" + }, + "red-background": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.primary.red.100}" + }, + "red-accent": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.primary.red.600}" + }, + "red-border": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.primary.red.200}" + }, + "purple-background": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.secondary.purple.100}" + }, + "purple-accent": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.secondary.purple.400}" + }, + "purple-border": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.secondary.purple.200}" + }, + "rose-background": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.secondary.rose.100}" + }, + "rose-accent": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.secondary.rose.400}" + }, + "rose-accent border": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.secondary.rose.200}" + }, + "blueberry-background": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.secondary.blueberry.100}" + }, + "blueberry-accent": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.secondary.blueberry.400}" + }, + "blueberry-border": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.secondary.blueberry.200}" + }, + "darkerBlue-background": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.primary.blue.200}" + }, + "darkerBlue-accent": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.primary.blue.600}" + }, + "darkerBlue-border": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.primary.blue.200}" + }, + "mint-background": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.accent.mint.200}" + }, + "mint-accent": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.accent.mint.800}" + }, + "mint-border": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.accent.mint.200}" + }, + "yellow-background": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.accent.yellow.300}" + }, + "yellow-accent": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.primary.dark.400}" + }, + "yellow-hover": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.accent.yellow.400}" + }, + "yellow-border": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{color.accent.yellow.600}" + } + } + }, + "overlay": { + "default": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$value": "rgba(242, 247, 255, 70)" + } + } + } + } + } + }, + { + "02 Typography Tokens": { + "modes": { + "Desktop": { + "Device": { + "Size": { + "$scopes": ["ALL_SCOPES"], + "$type": "float", + "$value": 1440 + } + }, + "Heading": { + "H1": { + "Font Name": { + "$scopes": ["FONT_FAMILY"], + "$type": "string", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{font.family.primary}" + }, + "Font-weight": { + "$scopes": ["FONT_STYLE"], + "$type": "string", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{font.weight.semibold}" + }, + "font-size": { + "$scopes": ["FONT_SIZE"], + "$type": "float", + "$value": 42 + }, + "line-height": { + "$scopes": ["LINE_HEIGHT"], + "$type": "float", + "$value": 52 + } + }, + "H2": { + "Font Name": { + "$scopes": ["FONT_FAMILY"], + "$type": "string", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{font.family.primary}" + }, + "Font-weight": { + "$scopes": ["FONT_STYLE"], + "$type": "string", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{font.weight.semibold}" + }, + "font-size": { + "$scopes": ["FONT_SIZE"], + "$type": "float", + "$value": 34 + }, + "line-height": { + "$scopes": ["LINE_HEIGHT"], + "$type": "float", + "$value": 44 + } + }, + "H3": { + "Font Name": { + "$scopes": ["FONT_FAMILY"], + "$type": "string", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{font.family.primary}" + }, + "Font-weight": { + "$scopes": ["FONT_STYLE"], + "$type": "string", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{font.weight.semibold}" + }, + "font-size": { + "$scopes": ["FONT_SIZE"], + "$type": "float", + "$value": 24 + }, + "line-height": { + "$scopes": ["LINE_HEIGHT"], + "$type": "float", + "$value": 34 + } + }, + "H4": { + "Font Name": { + "$scopes": ["FONT_FAMILY"], + "$type": "string", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{font.family.primary}" + }, + "Font-weight": { + "$scopes": ["FONT_STYLE"], + "$type": "string", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{font.weight.semibold}" + }, + "font-size": { + "$scopes": ["FONT_SIZE"], + "$type": "float", + "$value": 20 + }, + "line-height": { + "$scopes": ["LINE_HEIGHT"], + "$type": "float", + "$value": 30 + } + }, + "H5": { + "Font Name": { + "$scopes": ["FONT_FAMILY"], + "$type": "string", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{font.family.primary}" + }, + "Font-weight": { + "$scopes": ["FONT_STYLE"], + "$type": "string", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{font.weight.semibold}" + }, + "font-size": { + "$scopes": ["FONT_SIZE"], + "$type": "float", + "$value": 18 + }, + "line-height": { + "$scopes": ["LINE_HEIGHT"], + "$type": "float", + "$value": 28 + } + } + }, + "Paragraph": { + "Default": { + "Font Name": { + "$scopes": ["FONT_FAMILY"], + "$type": "string", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{font.family.primary}" + }, + "Font-weight": { + "$scopes": ["FONT_STYLE"], + "$type": "string", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{font.weight.light}" + }, + "font-size": { + "$scopes": ["FONT_SIZE"], + "$type": "float", + "$value": 18 + }, + "line-height": { + "$scopes": ["LINE_HEIGHT"], + "$type": "float", + "$value": 28 + } + }, + "Large": { + "Font Name": { + "$scopes": ["FONT_FAMILY"], + "$type": "string", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{font.family.primary}" + }, + "Font-weight": { + "$scopes": ["FONT_STYLE"], + "$type": "string", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{font.weight.light}" + }, + "font-size": { + "$scopes": ["FONT_SIZE"], + "$type": "float", + "$value": 24 + }, + "line-height": { + "$scopes": ["LINE_HEIGHT"], + "$type": "float", + "$value": 34 + } + }, + "Medium": { + "Font Name": { + "$scopes": ["FONT_FAMILY"], + "$type": "string", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{font.family.primary}" + }, + "Font-weight": { + "$scopes": ["FONT_STYLE"], + "$type": "string", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{font.weight.regular}" + }, + "font-size": { + "$scopes": ["FONT_SIZE"], + "$type": "float", + "$value": 16 + }, + "line-height": { + "$scopes": ["LINE_HEIGHT"], + "$type": "float", + "$value": 26 + } + }, + "Small": { + "Font Name": { + "$scopes": ["FONT_FAMILY"], + "$type": "string", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{font.family.primary}" + }, + "Font-weight": { + "$scopes": ["FONT_STYLE"], + "$type": "string", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{font.weight.regular}" + }, + "font-size": { + "$scopes": ["FONT_SIZE"], + "$type": "float", + "$value": 14 + }, + "line-height": { + "$scopes": ["LINE_HEIGHT"], + "$type": "float", + "$value": 24 + } + } + }, + "Other": { + "Eyebrows": { + "Font Name": { + "$scopes": ["FONT_FAMILY"], + "$type": "string", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{font.family.primary}" + }, + "Font-weight": { + "$scopes": ["FONT_STYLE"], + "$type": "string", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{font.weight.semibold}" + }, + "font-size": { + "$scopes": ["FONT_SIZE"], + "$type": "float", + "$value": 14 + }, + "line-height": { + "$scopes": ["LINE_HEIGHT"], + "$type": "float", + "$value": 16 + } + } + } + }, + "Mobile": { + "Device": { + "Size": { + "$scopes": ["ALL_SCOPES"], + "$type": "float", + "$value": 375 + } + }, + "Heading": { + "H1": { + "Font Name": { + "$scopes": ["FONT_FAMILY"], + "$type": "string", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{font.family.primary}" + }, + "Font-weight": { + "$scopes": ["FONT_STYLE"], + "$type": "string", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{font.weight.semibold}" + }, + "font-size": { + "$scopes": ["FONT_SIZE"], + "$type": "float", + "$value": 32 + }, + "line-height": { + "$scopes": ["LINE_HEIGHT"], + "$type": "float", + "$value": 38 + } + }, + "H2": { + "Font Name": { + "$scopes": ["FONT_FAMILY"], + "$type": "string", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{font.family.primary}" + }, + "Font-weight": { + "$scopes": ["FONT_STYLE"], + "$type": "string", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{font.weight.semibold}" + }, + "font-size": { + "$scopes": ["FONT_SIZE"], + "$type": "float", + "$value": 26 + }, + "line-height": { + "$scopes": ["LINE_HEIGHT"], + "$type": "float", + "$value": 32 + } + }, + "H3": { + "Font Name": { + "$scopes": ["FONT_FAMILY"], + "$type": "string", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{font.family.primary}" + }, + "Font-weight": { + "$scopes": ["FONT_STYLE"], + "$type": "string", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{font.weight.semibold}" + }, + "font-size": { + "$scopes": ["FONT_SIZE"], + "$type": "float", + "$value": 20 + }, + "line-height": { + "$scopes": ["LINE_HEIGHT"], + "$type": "float", + "$value": 26 + } + }, + "H4": { + "Font Name": { + "$scopes": ["FONT_FAMILY"], + "$type": "string", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{font.family.primary}" + }, + "Font-weight": { + "$scopes": ["FONT_STYLE"], + "$type": "string", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{font.weight.semibold}" + }, + "font-size": { + "$scopes": ["FONT_SIZE"], + "$type": "float", + "$value": 18 + }, + "line-height": { + "$scopes": ["LINE_HEIGHT"], + "$type": "float", + "$value": 24 + } + }, + "H5": { + "Font Name": { + "$scopes": ["FONT_FAMILY"], + "$type": "string", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{font.family.primary}" + }, + "Font-weight": { + "$scopes": ["FONT_STYLE"], + "$type": "string", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{font.weight.semibold}" + }, + "font-size": { + "$scopes": ["FONT_SIZE"], + "$type": "float", + "$value": 16 + }, + "line-height": { + "$scopes": ["LINE_HEIGHT"], + "$type": "float", + "$value": 20 + } + } + }, + "Paragraph": { + "Default": { + "Font Name": { + "$scopes": ["FONT_FAMILY"], + "$type": "string", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{font.family.primary}" + }, + "Font-weight": { + "$scopes": ["FONT_STYLE"], + "$type": "string", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{font.weight.light}" + }, + "font-size": { + "$scopes": ["FONT_SIZE"], + "$type": "float", + "$value": 16 + }, + "line-height": { + "$scopes": ["LINE_HEIGHT"], + "$type": "float", + "$value": 24 + } + }, + "Large": { + "Font Name": { + "$scopes": ["FONT_FAMILY"], + "$type": "string", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{font.family.primary}" + }, + "Font-weight": { + "$scopes": ["FONT_STYLE"], + "$type": "string", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{font.weight.light}" + }, + "font-size": { + "$scopes": ["FONT_SIZE"], + "$type": "float", + "$value": 20 + }, + "line-height": { + "$scopes": ["LINE_HEIGHT"], + "$type": "float", + "$value": 28 + } + }, + "Medium": { + "Font Name": { + "$scopes": ["FONT_FAMILY"], + "$type": "string", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{font.family.primary}" + }, + "Font-weight": { + "$scopes": ["FONT_STYLE"], + "$type": "string", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{font.weight.regular}" + }, + "font-size": { + "$scopes": ["FONT_SIZE"], + "$type": "float", + "$value": 14 + }, + "line-height": { + "$scopes": ["LINE_HEIGHT"], + "$type": "float", + "$value": 20 + } + }, + "Small": { + "Font Name": { + "$scopes": ["FONT_FAMILY"], + "$type": "string", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{font.family.primary}" + }, + "Font-weight": { + "$scopes": ["FONT_STYLE"], + "$type": "string", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{font.weight.regular}" + }, + "font-size": { + "$scopes": ["FONT_SIZE"], + "$type": "float", + "$value": 12 + }, + "line-height": { + "$scopes": ["LINE_HEIGHT"], + "$type": "float", + "$value": 16 + } + } + }, + "Other": { + "Eyebrows": { + "Font Name": { + "$scopes": ["FONT_FAMILY"], + "$type": "string", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{font.family.primary}" + }, + "Font-weight": { + "$scopes": ["FONT_STYLE"], + "$type": "string", + "$libraryName": "", + "$collectionName": "00 Primitives", + "$value": "{font.weight.semibold}" + }, + "font-size": { + "$scopes": ["FONT_SIZE"], + "$type": "float", + "$value": 12 + }, + "line-height": { + "$scopes": ["LINE_HEIGHT"], + "$type": "float", + "$value": 16 + } + } + } + } + } + } + } +] diff --git a/libs/island-ui/theme/src/lib/tokens/tokens.ts b/libs/island-ui/theme/src/lib/tokens/tokens.ts new file mode 100644 index 000000000000..f25e32ee4ac6 --- /dev/null +++ b/libs/island-ui/theme/src/lib/tokens/tokens.ts @@ -0,0 +1,23 @@ +// eslint-disable-next-line @typescript-eslint/no-var-requires +const figmaTokens = require('./figmaTokens.json') + +// Primitives +const primitives = figmaTokens[0]['00 Primitives'].modes['Mode 1'] +export const { color, font, radius, spacing } = primitives + +// Color Tokens +const colorTokensLight = figmaTokens[1]['01 Colors Tokens'].modes['Light Mode'] +export const { + background, + border, + feedback, + foreground, + interactive, + overlay, +} = colorTokensLight + +// Typography Tokens +export const typographyDesktopTokens = + figmaTokens[2]['02 Typography Tokens'].modes['Desktop'] +export const typographyMobileTokens = + figmaTokens[2]['02 Typography Tokens'].modes['Mobile'] diff --git a/libs/island-ui/theme/tsconfig.json b/libs/island-ui/theme/tsconfig.json index f094e2ad0a12..3bf4ca5a1d3a 100644 --- a/libs/island-ui/theme/tsconfig.json +++ b/libs/island-ui/theme/tsconfig.json @@ -9,5 +9,10 @@ { "path": "./tsconfig.spec.json" } - ] + ], + "compilerOptions": { + "resolveJsonModule": true, + "esModuleInterop": true, + "strict": true + } }