From c985e49f680bfaa0b355656f7a01bef4b409c7ce Mon Sep 17 00:00:00 2001 From: Jake Albaugh Date: Wed, 12 Jun 2024 16:31:10 -0500 Subject: [PATCH] cleanup code connect and some updates --- figma.config.json | 2 - scripts/preview/Figma.stories.tsx | 14 +- scripts/tokens/styles.json | 7 + scripts/tokens/tokens.json | 1118 ++++++++--------- scripts/tokens/tokensCodeSyntaxes.js | 10 + src/stories/ui/compositions/Cards.stories.tsx | 12 +- src/stories/ui/primitives/Avatar.stories.tsx | 20 +- src/stories/ui/primitives/Image.stories.tsx | 12 +- src/stories/ui/primitives/Link.stories.tsx | 2 +- src/stories/ui/primitives/ListBox.stories.tsx | 2 +- src/theme.css | 326 +++-- src/ui/compositions/Cards/Cards.figma.tsx | 14 +- src/ui/compositions/Headers/Headers.tsx | 4 +- src/ui/primitives/Avatar/Avatar.figma.tsx | 2 +- src/ui/primitives/Fieldset/Fieldset.figma.tsx | 36 +- src/ui/primitives/Image/Image.figma.tsx | 46 - src/ui/primitives/Input/Input.figma.tsx | 32 +- src/ui/primitives/Menu/Menu.figma.tsx | 6 +- .../Notification/Notification.figma.tsx | 9 +- src/ui/primitives/Select/Select.figma.tsx | 32 +- src/ui/primitives/Text/Text.figma.tsx | 27 - src/ui/primitives/TextArea/TextArea.figma.tsx | 32 +- src/ui/primitives/Tooltip/tooltip.css | 1 + 23 files changed, 888 insertions(+), 878 deletions(-) delete mode 100644 src/ui/primitives/Image/Image.figma.tsx diff --git a/figma.config.json b/figma.config.json index ce53124..9a75946 100644 --- a/figma.config.json +++ b/figma.config.json @@ -35,8 +35,6 @@ "": "https://www.figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=2287-22651", "": "https://www.figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=18-9389", "": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=11-11508", - "": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=159-8617", - "": "https://www.figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=159-8992", "": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=9762:850", "": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=2136-2263", "": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=2159-5053", diff --git a/scripts/preview/Figma.stories.tsx b/scripts/preview/Figma.stories.tsx index 380eff2..4416301 100644 --- a/scripts/preview/Figma.stories.tsx +++ b/scripts/preview/Figma.stories.tsx @@ -88,7 +88,7 @@ export const AvatarStory: StoryObj< render: ({ shape, type, ...args }) => ( @@ -113,12 +113,12 @@ export const AvatarGroupStory: StoryObj< max={3} {...args} > - - - - - - + + + + + + ), }; diff --git a/scripts/tokens/styles.json b/scripts/tokens/styles.json index 81064d8..436e6c1 100644 --- a/scripts/tokens/styles.json +++ b/scripts/tokens/styles.json @@ -1023,6 +1023,13 @@ } ] }, + { + "key": "b6cb6cc3526049c20430b096b6ed65c5eba1c246", + "name": "Image Placeholder", + "styleType": "FILL", + "remote": false, + "description": "" + }, { "key": "6a0b0b053a6eb9f72ad90ddd19010c5060f6c3ae", "name": ".Utilities/Component notes/Bold", diff --git a/scripts/tokens/tokens.json b/scripts/tokens/tokens.json index 348c5bd..12fe373 100644 --- a/scripts/tokens/tokens.json +++ b/scripts/tokens/tokens.json @@ -44,6 +44,126 @@ } } }, + "scale-01": { + "$type": "number", + "$value": 12, + "$extensions": { + "org.sds": { + "figmaId": "VariableID:9:11198", + "modes": { + "default": 12 + } + } + } + }, + "scale-02": { + "$type": "number", + "$value": 14, + "$extensions": { + "org.sds": { + "figmaId": "VariableID:9:11197", + "modes": { + "default": 14 + } + } + } + }, + "scale-03": { + "$type": "number", + "$value": 16, + "$extensions": { + "org.sds": { + "figmaId": "VariableID:9:11196", + "modes": { + "default": 16 + } + } + } + }, + "scale-04": { + "$type": "number", + "$value": 20, + "$extensions": { + "org.sds": { + "figmaId": "VariableID:9:11195", + "modes": { + "default": 20 + } + } + } + }, + "scale-05": { + "$type": "number", + "$value": 24, + "$extensions": { + "org.sds": { + "figmaId": "VariableID:9:11194", + "modes": { + "default": 24 + } + } + } + }, + "scale-06": { + "$type": "number", + "$value": 32, + "$extensions": { + "org.sds": { + "figmaId": "VariableID:9:11193", + "modes": { + "default": 32 + } + } + } + }, + "scale-07": { + "$type": "number", + "$value": 40, + "$extensions": { + "org.sds": { + "figmaId": "VariableID:9:11192", + "modes": { + "default": 40 + } + } + } + }, + "scale-08": { + "$type": "number", + "$value": 48, + "$extensions": { + "org.sds": { + "figmaId": "VariableID:9:11191", + "modes": { + "default": 48 + } + } + } + }, + "scale-09": { + "$type": "number", + "$value": 64, + "$extensions": { + "org.sds": { + "figmaId": "VariableID:9:11190", + "modes": { + "default": 64 + } + } + } + }, + "scale-10": { + "$type": "number", + "$value": 72, + "$extensions": { + "org.sds": { + "figmaId": "VariableID:9:11189", + "modes": { + "default": 72 + } + } + } + }, "weight-thin": { "$type": "fontWeight", "$value": 100, @@ -259,126 +379,6 @@ } } } - }, - "scale-10": { - "$type": "number", - "$value": 72, - "$extensions": { - "org.sds": { - "figmaId": "VariableID:9:11189", - "modes": { - "default": 72 - } - } - } - }, - "scale-09": { - "$type": "number", - "$value": 64, - "$extensions": { - "org.sds": { - "figmaId": "VariableID:9:11190", - "modes": { - "default": 64 - } - } - } - }, - "scale-08": { - "$type": "number", - "$value": 48, - "$extensions": { - "org.sds": { - "figmaId": "VariableID:9:11191", - "modes": { - "default": 48 - } - } - } - }, - "scale-07": { - "$type": "number", - "$value": 40, - "$extensions": { - "org.sds": { - "figmaId": "VariableID:9:11192", - "modes": { - "default": 40 - } - } - } - }, - "scale-06": { - "$type": "number", - "$value": 32, - "$extensions": { - "org.sds": { - "figmaId": "VariableID:9:11193", - "modes": { - "default": 32 - } - } - } - }, - "scale-05": { - "$type": "number", - "$value": 24, - "$extensions": { - "org.sds": { - "figmaId": "VariableID:9:11194", - "modes": { - "default": 24 - } - } - } - }, - "scale-04": { - "$type": "number", - "$value": 20, - "$extensions": { - "org.sds": { - "figmaId": "VariableID:9:11195", - "modes": { - "default": 20 - } - } - } - }, - "scale-03": { - "$type": "number", - "$value": 16, - "$extensions": { - "org.sds": { - "figmaId": "VariableID:9:11196", - "modes": { - "default": 16 - } - } - } - }, - "scale-02": { - "$type": "number", - "$value": 14, - "$extensions": { - "org.sds": { - "figmaId": "VariableID:9:11197", - "modes": { - "default": 14 - } - } - } - }, - "scale-01": { - "$type": "number", - "$value": 12, - "$extensions": { - "org.sds": { - "figmaId": "VariableID:9:11198", - "modes": { - "default": 12 - } - } - } } }, "@responsive": { @@ -554,7 +554,7 @@ "figmaId": "VariableID:227:20357", "modes": { "desktop": 16, - "mobile": 18, + "mobile": 20, "tablet": 16 } } @@ -610,7 +610,7 @@ "figmaId": "VariableID:227:20363", "modes": { "desktop": 32, - "mobile": 36, + "mobile": 40, "tablet": 32 } } @@ -923,144 +923,144 @@ "gap": { "xs": { "$type": "number", - "$value": 4, + "$value": "{@responsive.unit-04}", "$extensions": { "org.sds": { "figmaId": "VariableID:9:11258", "modes": { - "default": 4 + "default": "{@responsive.unit-04}" } } } }, "sm": { "$type": "number", - "$value": 8, + "$value": "{@responsive.unit-08}", "$extensions": { "org.sds": { "figmaId": "VariableID:9:11259", "modes": { - "default": 8 + "default": "{@responsive.unit-08}" } } } }, "md": { "$type": "number", - "$value": 12, + "$value": "{@responsive.unit-12}", "$extensions": { "org.sds": { "figmaId": "VariableID:9:11260", "modes": { - "default": 12 + "default": "{@responsive.unit-12}" } } } }, "lg": { "$type": "number", - "$value": 16, + "$value": "{@responsive.unit-16}", "$extensions": { "org.sds": { "figmaId": "VariableID:9:11261", "modes": { - "default": 16 + "default": "{@responsive.unit-16}" } } } }, "xl": { "$type": "number", - "$value": 24, + "$value": "{@responsive.unit-24}", "$extensions": { "org.sds": { "figmaId": "VariableID:9:11262", "modes": { - "default": 24 + "default": "{@responsive.unit-24}" } } } }, "xxl": { "$type": "number", - "$value": 48, + "$value": "{@responsive.unit-48}", "$extensions": { "org.sds": { "figmaId": "VariableID:2143:14622", "modes": { - "default": 48 + "default": "{@responsive.unit-48}" } } } }, "column": { "$type": "number", - "$value": 64, + "$value": "{@responsive.unit-64}", "$extensions": { "org.sds": { "figmaId": "VariableID:107:11150", "modes": { - "default": 64 + "default": "{@responsive.unit-64}" } } } }, "negative-xs": { "$type": "number", - "$value": -4, + "$value": "{@responsive.unit-negative-04}", "$extensions": { "org.sds": { "figmaId": "VariableID:9:11263", "modes": { - "default": -4 + "default": "{@responsive.unit-negative-04}" } } } }, "negative-sm": { "$type": "number", - "$value": -8, + "$value": "{@responsive.unit-negative-08}", "$extensions": { "org.sds": { "figmaId": "VariableID:9:11264", "modes": { - "default": -8 + "default": "{@responsive.unit-negative-08}" } } } }, "negative-md": { "$type": "number", - "$value": -12, + "$value": "{@responsive.unit-negative-12}", "$extensions": { "org.sds": { "figmaId": "VariableID:9:11265", "modes": { - "default": -12 + "default": "{@responsive.unit-negative-12}" } } } }, "negative-lg": { "$type": "number", - "$value": -16, + "$value": "{@responsive.unit-negative-16}", "$extensions": { "org.sds": { "figmaId": "VariableID:9:11266", "modes": { - "default": -16 + "default": "{@responsive.unit-negative-16}" } } } }, "negative-xl": { "$type": "number", - "$value": -24, + "$value": "{@responsive.unit-negative-24}", "$extensions": { "org.sds": { "figmaId": "VariableID:9:11267", "modes": { - "default": -24 + "default": "{@responsive.unit-negative-24}" } } } @@ -1069,108 +1069,108 @@ "padding": { "xs": { "$type": "number", - "$value": 4, + "$value": "{@responsive.unit-04}", "$extensions": { "org.sds": { "figmaId": "VariableID:9:11268", "modes": { - "default": 4 + "default": "{@responsive.unit-04}" } } } }, "sm": { "$type": "number", - "$value": 8, + "$value": "{@responsive.unit-08}", "$extensions": { "org.sds": { "figmaId": "VariableID:9:11269", "modes": { - "default": 8 + "default": "{@responsive.unit-08}" } } } }, "md": { "$type": "number", - "$value": 12, + "$value": "{@responsive.unit-12}", "$extensions": { "org.sds": { "figmaId": "VariableID:9:11270", "modes": { - "default": 12 + "default": "{@responsive.unit-12}" } } } }, "lg": { "$type": "number", - "$value": 16, + "$value": "{@responsive.unit-16}", "$extensions": { "org.sds": { "figmaId": "VariableID:9:11271", "modes": { - "default": 16 + "default": "{@responsive.unit-16}" } } } }, "xl": { "$type": "number", - "$value": 24, + "$value": "{@responsive.unit-24}", "$extensions": { "org.sds": { "figmaId": "VariableID:9:11272", "modes": { - "default": 24 + "default": "{@responsive.unit-24}" } } } }, "xxl": { "$type": "number", - "$value": 32, + "$value": "{@responsive.unit-32}", "$extensions": { "org.sds": { "figmaId": "VariableID:9:11273", "modes": { - "default": 32 + "default": "{@responsive.unit-32}" } } } }, "section-sm": { "$type": "number", - "$value": 32, + "$value": "{@responsive.unit-32}", "$extensions": { "org.sds": { "figmaId": "VariableID:2159:2116", "modes": { - "default": 32 + "default": "{@responsive.unit-32}" } } } }, "section-md": { "$type": "number", - "$value": 64, + "$value": "{@responsive.unit-64}", "$extensions": { "org.sds": { "figmaId": "VariableID:2143:17262", "modes": { - "default": 64 + "default": "{@responsive.unit-64}" } } } }, "section-lg": { "$type": "number", - "$value": 160, + "$value": "{@responsive.unit-160}", "$extensions": { "org.sds": { "figmaId": "VariableID:107:11151", "modes": { - "default": 160 + "default": "{@responsive.unit-160}" } } } @@ -1179,72 +1179,72 @@ "radius": { "xs": { "$type": "number", - "$value": 4, + "$value": "{@responsive.unit-04}", "$extensions": { "org.sds": { "figmaId": "VariableID:9:11274", "modes": { - "default": 4 + "default": "{@responsive.unit-04}" } } } }, "sm": { "$type": "number", - "$value": 8, + "$value": "{@responsive.unit-08}", "$extensions": { "org.sds": { "figmaId": "VariableID:9:11275", "modes": { - "default": 8 + "default": "{@responsive.unit-08}" } } } }, "md": { "$type": "number", - "$value": 12, + "$value": "{@responsive.unit-12}", "$extensions": { "org.sds": { "figmaId": "VariableID:9:11276", "modes": { - "default": 12 + "default": "{@responsive.unit-12}" } } } }, "lg": { "$type": "number", - "$value": 16, + "$value": "{@responsive.unit-16}", "$extensions": { "org.sds": { "figmaId": "VariableID:9:11277", "modes": { - "default": 16 + "default": "{@responsive.unit-16}" } } } }, "xl": { "$type": "number", - "$value": 24, + "$value": "{@responsive.unit-24}", "$extensions": { "org.sds": { "figmaId": "VariableID:9:11278", "modes": { - "default": 24 + "default": "{@responsive.unit-24}" } } } }, "xxl": { "$type": "number", - "$value": 32, + "$value": "{@responsive.unit-32}", "$extensions": { "org.sds": { "figmaId": "VariableID:9:11279", "modes": { - "default": 32 + "default": "{@responsive.unit-32}" } } } @@ -1277,144 +1277,144 @@ }, "xs": { "$type": "number", - "$value": 1, + "$value": "{@responsive.unit-01}", "$extensions": { "org.sds": { "figmaId": "VariableID:9:11281", "modes": { - "default": 1 + "default": "{@responsive.unit-01}" } } } }, "sm": { "$type": "number", - "$value": 4, + "$value": "{@responsive.unit-04}", "$extensions": { "org.sds": { "figmaId": "VariableID:9:11282", "modes": { - "default": 4 + "default": "{@responsive.unit-04}" } } } }, "md": { "$type": "number", - "$value": 6, + "$value": "{@responsive.unit-06}", "$extensions": { "org.sds": { "figmaId": "VariableID:9:11283", "modes": { - "default": 6 + "default": "{@responsive.unit-06}" } } } }, "lg": { "$type": "number", - "$value": 16, + "$value": "{@responsive.unit-16}", "$extensions": { "org.sds": { "figmaId": "VariableID:9:11284", "modes": { - "default": 16 + "default": "{@responsive.unit-16}" } } } }, "xl": { "$type": "number", - "$value": 32, + "$value": "{@responsive.unit-32}", "$extensions": { "org.sds": { "figmaId": "VariableID:9:11285", "modes": { - "default": 32 + "default": "{@responsive.unit-32}" } } } }, "xxl": { "$type": "number", - "$value": 48, + "$value": "{@responsive.unit-48}", "$extensions": { "org.sds": { "figmaId": "VariableID:9:11286", "modes": { - "default": 48 + "default": "{@responsive.unit-48}" } } } }, "negative-xs": { "$type": "number", - "$value": -1, + "$value": "{@responsive.unit-negative-01}", "$extensions": { "org.sds": { "figmaId": "VariableID:9:11287", "modes": { - "default": -1 + "default": "{@responsive.unit-negative-01}" } } } }, "negative-sm": { "$type": "number", - "$value": -4, + "$value": "{@responsive.unit-negative-04}", "$extensions": { "org.sds": { "figmaId": "VariableID:9:11288", "modes": { - "default": -4 + "default": "{@responsive.unit-negative-04}" } } } }, "negative-md": { "$type": "number", - "$value": -8, + "$value": "{@responsive.unit-negative-08}", "$extensions": { "org.sds": { "figmaId": "VariableID:9:11289", "modes": { - "default": -8 + "default": "{@responsive.unit-negative-08}" } } } }, "negative-lg": { "$type": "number", - "$value": -16, + "$value": "{@responsive.unit-negative-16}", "$extensions": { "org.sds": { "figmaId": "VariableID:9:11290", "modes": { - "default": -16 + "default": "{@responsive.unit-negative-16}" } } } }, "negative-xl": { "$type": "number", - "$value": -32, + "$value": "{@responsive.unit-negative-32}", "$extensions": { "org.sds": { "figmaId": "VariableID:9:11291", "modes": { - "default": -32 + "default": "{@responsive.unit-negative-32}" } } } }, "negative-xxl": { "$type": "number", - "$value": -48, + "$value": "{@responsive.unit-negative-48}", "$extensions": { "org.sds": { "figmaId": "VariableID:9:11292", "modes": { - "default": -48 + "default": "{@responsive.unit-negative-48}" } } } @@ -2947,6 +2947,128 @@ } } } + }, + "pink": { + "100": { + "$type": "color", + "$value": "#fcf1fd", + "$extensions": { + "org.sds": { + "figmaId": "VariableID:280:16481", + "modes": { + "value": "#fcf1fd" + } + } + } + }, + "200": { + "$type": "color", + "$value": "#fae1fa", + "$extensions": { + "org.sds": { + "figmaId": "VariableID:280:16482", + "modes": { + "value": "#fae1fa" + } + } + } + }, + "300": { + "$type": "color", + "$value": "#f5c0ef", + "$extensions": { + "org.sds": { + "figmaId": "VariableID:280:16483", + "modes": { + "value": "#f5c0ef" + } + } + } + }, + "400": { + "$type": "color", + "$value": "#f19edc", + "$extensions": { + "org.sds": { + "figmaId": "VariableID:280:16486", + "modes": { + "value": "#f19edc" + } + } + } + }, + "500": { + "$type": "color", + "$value": "#ea3fb8", + "$extensions": { + "org.sds": { + "figmaId": "VariableID:280:16490", + "modes": { + "value": "#ea3fb8" + } + } + } + }, + "600": { + "$type": "color", + "$value": "#d732a8", + "$extensions": { + "org.sds": { + "figmaId": "VariableID:280:16491", + "modes": { + "value": "#d732a8" + } + } + } + }, + "700": { + "$type": "color", + "$value": "#ba2a92", + "$extensions": { + "org.sds": { + "figmaId": "VariableID:280:16493", + "modes": { + "value": "#ba2a92" + } + } + } + }, + "800": { + "$type": "color", + "$value": "#8a226f", + "$extensions": { + "org.sds": { + "figmaId": "VariableID:280:16494", + "modes": { + "value": "#8a226f" + } + } + } + }, + "900": { + "$type": "color", + "$value": "#57184a", + "$extensions": { + "org.sds": { + "figmaId": "VariableID:280:16497", + "modes": { + "value": "#57184a" + } + } + } + }, + "1000": { + "$type": "color", + "$value": "#3f1536", + "$extensions": { + "org.sds": { + "figmaId": "VariableID:280:16498", + "modes": { + "value": "#3f1536" + } + } + } + } } }, "@colors": { @@ -2957,9 +3079,7 @@ "sds_light", "sds_dark", "brand_light", - "brand_dark", - "sds_brand_light", - "sds_brand_dark" + "brand_dark" ] } }, @@ -2975,9 +3095,7 @@ "sds_light": "{@color_primitives.white.1000}", "sds_dark": "{@color_primitives.grey.900}", "brand_light": "{@color_primitives.white.1000}", - "brand_dark": "{@color_primitives.grey.900}", - "sds_brand_light": "{@color_primitives.white.1000}", - "sds_brand_dark": "{@color_primitives.grey.900}" + "brand_dark": "{@color_primitives.grey.900}" } } } @@ -2992,9 +3110,7 @@ "sds_light": "{@color_primitives.grey.100}", "sds_dark": "{@color_primitives.grey.700}", "brand_light": "{@color_primitives.grey.100}", - "brand_dark": "{@color_primitives.grey.700}", - "sds_brand_light": "{@color_primitives.grey.100}", - "sds_brand_dark": "{@color_primitives.grey.700}" + "brand_dark": "{@color_primitives.grey.700}" } } } @@ -3009,9 +3125,7 @@ "sds_light": "{@color_primitives.grey.100}", "sds_dark": "{@color_primitives.grey.800}", "brand_light": "{@color_primitives.grey.100}", - "brand_dark": "{@color_primitives.grey.800}", - "sds_brand_light": "{@color_primitives.grey.100}", - "sds_brand_dark": "{@color_primitives.grey.800}" + "brand_dark": "{@color_primitives.grey.800}" } } } @@ -3026,9 +3140,7 @@ "sds_light": "{@color_primitives.grey.200}", "sds_dark": "{@color_primitives.grey.900}", "brand_light": "{@color_primitives.grey.200}", - "brand_dark": "{@color_primitives.grey.900}", - "sds_brand_light": "{@color_primitives.grey.200}", - "sds_brand_dark": "{@color_primitives.grey.900}" + "brand_dark": "{@color_primitives.grey.900}" } } } @@ -3043,9 +3155,7 @@ "sds_light": "{@color_primitives.grey.300}", "sds_dark": "{@color_primitives.grey.600}", "brand_light": "{@color_primitives.grey.300}", - "brand_dark": "{@color_primitives.grey.600}", - "sds_brand_light": "{@color_primitives.grey.300}", - "sds_brand_dark": "{@color_primitives.grey.600}" + "brand_dark": "{@color_primitives.grey.600}" } } } @@ -3060,9 +3170,7 @@ "sds_light": "{@color_primitives.grey.400}", "sds_dark": "{@color_primitives.grey.700}", "brand_light": "{@color_primitives.grey.400}", - "brand_dark": "{@color_primitives.grey.700}", - "sds_brand_light": "{@color_primitives.grey.400}", - "sds_brand_dark": "{@color_primitives.grey.700}" + "brand_dark": "{@color_primitives.grey.700}" } } } @@ -3079,9 +3187,7 @@ "sds_light": "{@color_primitives.slate.700}", "sds_dark": "{@color_primitives.slate.400}", "brand_light": "{@color_primitives.slate.700}", - "brand_dark": "{@color_primitives.slate.400}", - "sds_brand_light": "{@color_primitives.slate.700}", - "sds_brand_dark": "{@color_primitives.slate.400}" + "brand_dark": "{@color_primitives.slate.400}" } } } @@ -3096,9 +3202,7 @@ "sds_light": "{@color_primitives.slate.800}", "sds_dark": "{@color_primitives.slate.500}", "brand_light": "{@color_primitives.slate.800}", - "brand_dark": "{@color_primitives.slate.500}", - "sds_brand_light": "{@color_primitives.slate.800}", - "sds_brand_dark": "{@color_primitives.slate.500}" + "brand_dark": "{@color_primitives.slate.500}" } } } @@ -3113,9 +3217,7 @@ "sds_light": "{@color_primitives.slate.300}", "sds_dark": "{@color_primitives.slate.900}", "brand_light": "{@color_primitives.slate.300}", - "brand_dark": "{@color_primitives.slate.900}", - "sds_brand_light": "{@color_primitives.slate.300}", - "sds_brand_dark": "{@color_primitives.slate.900}" + "brand_dark": "{@color_primitives.slate.900}" } } } @@ -3130,9 +3232,7 @@ "sds_light": "{@color_primitives.slate.400}", "sds_dark": "{@color_primitives.slate.1000}", "brand_light": "{@color_primitives.slate.400}", - "brand_dark": "{@color_primitives.slate.1000}", - "sds_brand_light": "{@color_primitives.slate.400}", - "sds_brand_dark": "{@color_primitives.slate.1000}" + "brand_dark": "{@color_primitives.slate.1000}" } } } @@ -3147,9 +3247,7 @@ "sds_light": "{@color_primitives.slate.200}", "sds_dark": "{@color_primitives.slate.900}", "brand_light": "{@color_primitives.slate.200}", - "brand_dark": "{@color_primitives.slate.900}", - "sds_brand_light": "{@color_primitives.slate.200}", - "sds_brand_dark": "{@color_primitives.slate.900}" + "brand_dark": "{@color_primitives.slate.900}" } } } @@ -3164,9 +3262,7 @@ "sds_light": "{@color_primitives.slate.300}", "sds_dark": "{@color_primitives.slate.1000}", "brand_light": "{@color_primitives.slate.300}", - "brand_dark": "{@color_primitives.slate.1000}", - "sds_brand_light": "{@color_primitives.slate.300}", - "sds_brand_dark": "{@color_primitives.slate.1000}" + "brand_dark": "{@color_primitives.slate.1000}" } } } @@ -3183,9 +3279,7 @@ "sds_light": "{@color_primitives.grey.800}", "sds_dark": "{@color_primitives.grey.100}", "brand_light": "#0070c2", - "brand_dark": "#0070c2", - "sds_brand_light": "{@color_primitives.sds.500}", - "sds_brand_dark": "{@color_primitives.sds.500}" + "brand_dark": "#0070c2" } } } @@ -3200,9 +3294,7 @@ "sds_light": "{@color_primitives.grey.900}", "sds_dark": "{@color_primitives.grey.300}", "brand_light": "#003399", - "brand_dark": "#003399", - "sds_brand_light": "{@color_primitives.sds.600}", - "sds_brand_dark": "{@color_primitives.sds.600}" + "brand_dark": "#003399" } } } @@ -3217,9 +3309,7 @@ "sds_light": "{@color_primitives.grey.200}", "sds_dark": "{@color_primitives.grey.600}", "brand_light": "#d1ecff", - "brand_dark": "#003180", - "sds_brand_light": "{@color_primitives.sds.200}", - "sds_brand_dark": "{@color_primitives.sds.700}" + "brand_dark": "#003180" } } } @@ -3234,9 +3324,7 @@ "sds_light": "{@color_primitives.grey.300}", "sds_dark": "{@color_primitives.grey.500}", "brand_light": "#a3d9ff", - "brand_dark": "#041362", - "sds_brand_light": "{@color_primitives.sds.300}", - "sds_brand_dark": "{@color_primitives.sds.800}" + "brand_dark": "#041362" } } } @@ -3251,9 +3339,7 @@ "sds_light": "{@color_primitives.grey.100}", "sds_dark": "{@color_primitives.grey.600}", "brand_light": "#ebf6ff", - "brand_dark": "#020e4a", - "sds_brand_light": "{@color_primitives.sds.100}", - "sds_brand_dark": "{@color_primitives.sds.900}" + "brand_dark": "#020e4a" } } } @@ -3268,9 +3354,7 @@ "sds_light": "{@color_primitives.grey.200}", "sds_dark": "{@color_primitives.grey.800}", "brand_light": "#d1ecff", - "brand_dark": "#090e2a", - "sds_brand_light": "{@color_primitives.sds.200}", - "sds_brand_dark": "{@color_primitives.sds.1000}" + "brand_dark": "#090e2a" } } } @@ -3287,9 +3371,7 @@ "sds_light": "{@color_primitives.green.500}", "sds_dark": "{@color_primitives.green.700}", "brand_light": "{@color_primitives.green.500}", - "brand_dark": "{@color_primitives.green.700}", - "sds_brand_light": "{@color_primitives.green.500}", - "sds_brand_dark": "{@color_primitives.green.700}" + "brand_dark": "{@color_primitives.green.700}" } } } @@ -3304,9 +3386,7 @@ "sds_light": "{@color_primitives.green.600}", "sds_dark": "{@color_primitives.green.800}", "brand_light": "{@color_primitives.green.600}", - "brand_dark": "{@color_primitives.green.800}", - "sds_brand_light": "{@color_primitives.green.600}", - "sds_brand_dark": "{@color_primitives.green.800}" + "brand_dark": "{@color_primitives.green.800}" } } } @@ -3321,9 +3401,7 @@ "sds_light": "{@color_primitives.green.200}", "sds_dark": "{@color_primitives.green.800}", "brand_light": "{@color_primitives.green.200}", - "brand_dark": "{@color_primitives.green.800}", - "sds_brand_light": "{@color_primitives.green.200}", - "sds_brand_dark": "{@color_primitives.green.800}" + "brand_dark": "{@color_primitives.green.800}" } } } @@ -3338,9 +3416,7 @@ "sds_light": "{@color_primitives.green.300}", "sds_dark": "{@color_primitives.green.900}", "brand_light": "{@color_primitives.green.300}", - "brand_dark": "{@color_primitives.green.900}", - "sds_brand_light": "{@color_primitives.green.300}", - "sds_brand_dark": "{@color_primitives.green.900}" + "brand_dark": "{@color_primitives.green.900}" } } } @@ -3355,9 +3431,7 @@ "sds_light": "{@color_primitives.green.100}", "sds_dark": "{@color_primitives.green.900}", "brand_light": "{@color_primitives.green.100}", - "brand_dark": "{@color_primitives.green.900}", - "sds_brand_light": "{@color_primitives.green.100}", - "sds_brand_dark": "{@color_primitives.green.900}" + "brand_dark": "{@color_primitives.green.900}" } } } @@ -3372,9 +3446,7 @@ "sds_light": "{@color_primitives.green.200}", "sds_dark": "{@color_primitives.green.1000}", "brand_light": "{@color_primitives.green.200}", - "brand_dark": "{@color_primitives.green.1000}", - "sds_brand_light": "{@color_primitives.green.200}", - "sds_brand_dark": "{@color_primitives.green.1000}" + "brand_dark": "{@color_primitives.green.1000}" } } } @@ -3391,9 +3463,7 @@ "sds_light": "{@color_primitives.yellow.400}", "sds_dark": "{@color_primitives.yellow.400}", "brand_light": "{@color_primitives.yellow.400}", - "brand_dark": "{@color_primitives.yellow.400}", - "sds_brand_light": "{@color_primitives.yellow.400}", - "sds_brand_dark": "{@color_primitives.yellow.400}" + "brand_dark": "{@color_primitives.yellow.400}" } } } @@ -3408,9 +3478,7 @@ "sds_light": "{@color_primitives.yellow.500}", "sds_dark": "{@color_primitives.yellow.500}", "brand_light": "{@color_primitives.yellow.500}", - "brand_dark": "{@color_primitives.yellow.500}", - "sds_brand_light": "{@color_primitives.yellow.500}", - "sds_brand_dark": "{@color_primitives.yellow.500}" + "brand_dark": "{@color_primitives.yellow.500}" } } } @@ -3425,9 +3493,7 @@ "sds_light": "{@color_primitives.yellow.200}", "sds_dark": "{@color_primitives.yellow.800}", "brand_light": "{@color_primitives.yellow.200}", - "brand_dark": "{@color_primitives.yellow.800}", - "sds_brand_light": "{@color_primitives.yellow.200}", - "sds_brand_dark": "{@color_primitives.yellow.800}" + "brand_dark": "{@color_primitives.yellow.800}" } } } @@ -3442,9 +3508,7 @@ "sds_light": "{@color_primitives.yellow.300}", "sds_dark": "{@color_primitives.yellow.900}", "brand_light": "{@color_primitives.yellow.300}", - "brand_dark": "{@color_primitives.yellow.900}", - "sds_brand_light": "{@color_primitives.yellow.300}", - "sds_brand_dark": "{@color_primitives.yellow.900}" + "brand_dark": "{@color_primitives.yellow.900}" } } } @@ -3459,9 +3523,7 @@ "sds_light": "{@color_primitives.yellow.100}", "sds_dark": "{@color_primitives.yellow.900}", "brand_light": "{@color_primitives.yellow.100}", - "brand_dark": "{@color_primitives.yellow.900}", - "sds_brand_light": "{@color_primitives.yellow.100}", - "sds_brand_dark": "{@color_primitives.yellow.900}" + "brand_dark": "{@color_primitives.yellow.900}" } } } @@ -3476,9 +3538,7 @@ "sds_light": "{@color_primitives.yellow.200}", "sds_dark": "{@color_primitives.yellow.1000}", "brand_light": "{@color_primitives.yellow.200}", - "brand_dark": "{@color_primitives.yellow.1000}", - "sds_brand_light": "{@color_primitives.yellow.200}", - "sds_brand_dark": "{@color_primitives.yellow.1000}" + "brand_dark": "{@color_primitives.yellow.1000}" } } } @@ -3495,9 +3555,7 @@ "sds_light": "{@color_primitives.red.500}", "sds_dark": "{@color_primitives.red.600}", "brand_light": "{@color_primitives.red.500}", - "brand_dark": "{@color_primitives.red.600}", - "sds_brand_light": "{@color_primitives.red.500}", - "sds_brand_dark": "{@color_primitives.red.600}" + "brand_dark": "{@color_primitives.red.600}" } } } @@ -3512,9 +3570,7 @@ "sds_light": "{@color_primitives.red.600}", "sds_dark": "{@color_primitives.red.700}", "brand_light": "{@color_primitives.red.600}", - "brand_dark": "{@color_primitives.red.700}", - "sds_brand_light": "{@color_primitives.red.600}", - "sds_brand_dark": "{@color_primitives.red.700}" + "brand_dark": "{@color_primitives.red.700}" } } } @@ -3529,9 +3585,7 @@ "sds_light": "{@color_primitives.red.200}", "sds_dark": "{@color_primitives.red.800}", "brand_light": "{@color_primitives.red.200}", - "brand_dark": "{@color_primitives.red.800}", - "sds_brand_light": "{@color_primitives.red.200}", - "sds_brand_dark": "{@color_primitives.red.800}" + "brand_dark": "{@color_primitives.red.800}" } } } @@ -3546,9 +3600,7 @@ "sds_light": "{@color_primitives.red.300}", "sds_dark": "{@color_primitives.red.900}", "brand_light": "{@color_primitives.red.300}", - "brand_dark": "{@color_primitives.red.900}", - "sds_brand_light": "{@color_primitives.red.300}", - "sds_brand_dark": "{@color_primitives.red.900}" + "brand_dark": "{@color_primitives.red.900}" } } } @@ -3563,9 +3615,7 @@ "sds_light": "{@color_primitives.red.100}", "sds_dark": "{@color_primitives.red.900}", "brand_light": "{@color_primitives.red.100}", - "brand_dark": "{@color_primitives.red.900}", - "sds_brand_light": "{@color_primitives.red.100}", - "sds_brand_dark": "{@color_primitives.red.900}" + "brand_dark": "{@color_primitives.red.900}" } } } @@ -3580,9 +3630,7 @@ "sds_light": "{@color_primitives.red.200}", "sds_dark": "{@color_primitives.red.1000}", "brand_light": "{@color_primitives.red.200}", - "brand_dark": "{@color_primitives.red.1000}", - "sds_brand_light": "{@color_primitives.red.200}", - "sds_brand_dark": "{@color_primitives.red.1000}" + "brand_dark": "{@color_primitives.red.1000}" } } } @@ -3599,9 +3647,7 @@ "sds_light": "{@color_primitives.grey.300}", "sds_dark": "{@color_primitives.grey.700}", "brand_light": "{@color_primitives.grey.300}", - "brand_dark": "{@color_primitives.grey.700}", - "sds_brand_light": "{@color_primitives.grey.300}", - "sds_brand_dark": "{@color_primitives.grey.700}" + "brand_dark": "{@color_primitives.grey.700}" } } } @@ -3618,9 +3664,7 @@ "sds_light": "#ffffffcc", "sds_dark": "#000000cc", "brand_light": "#ffffffcc", - "brand_dark": "#000000cc", - "sds_brand_light": "#000000cc", - "sds_brand_dark": "#000000cc" + "brand_dark": "#000000cc" } } } @@ -3635,9 +3679,7 @@ "sds_light": "#ffffffb2", "sds_dark": "#000000b2", "brand_light": "#ffffffb2", - "brand_dark": "#000000b2", - "sds_brand_light": "#000000b2", - "sds_brand_dark": "#000000b2" + "brand_dark": "#000000b2" } } } @@ -3652,26 +3694,22 @@ "sds_light": "#ffffff80", "sds_dark": "#00000080", "brand_light": "#ffffff80", - "brand_dark": "#00000080", - "sds_brand_light": "#00000080", - "sds_brand_dark": "#00000080" + "brand_dark": "#00000080" } } } }, "measurement": { "$type": "color", - "$value": "#ffe0fc", + "$value": "{@color_primitives.pink.200}", "$extensions": { "org.sds": { "figmaId": "VariableID:72:9197", "modes": { - "sds_light": "#ffe0fc", - "sds_dark": "#971172", + "sds_light": "{@color_primitives.pink.200}", + "sds_dark": "{@color_primitives.pink.800}", "brand_light": "#ffe0fc", - "brand_dark": "#971172", - "sds_brand_light": "#ffe0fc", - "sds_brand_dark": "#971172" + "brand_dark": "#971172" } } } @@ -3690,9 +3728,7 @@ "sds_light": "{@color_primitives.slate.900}", "sds_dark": "{@color_primitives.white.1000}", "brand_light": "{@color_primitives.slate.900}", - "brand_dark": "{@color_primitives.white.1000}", - "sds_brand_light": "{@color_primitives.slate.900}", - "sds_brand_dark": "{@color_primitives.white.1000}" + "brand_dark": "{@color_primitives.white.1000}" } } } @@ -3707,9 +3743,7 @@ "sds_light": "{@color_primitives.slate.500}", "sds_dark": "{@color_primitives.white.500}", "brand_light": "{@color_primitives.slate.500}", - "brand_dark": "{@color_primitives.white.500}", - "sds_brand_light": "{@color_primitives.slate.500}", - "sds_brand_dark": "{@color_primitives.white.500}" + "brand_dark": "{@color_primitives.white.500}" } } } @@ -3724,9 +3758,22 @@ "sds_light": "{@color_primitives.slate.400}", "sds_dark": "{@color_primitives.white.400}", "brand_light": "{@color_primitives.slate.400}", - "brand_dark": "{@color_primitives.white.400}", - "sds_brand_light": "{@color_primitives.slate.400}", - "sds_brand_dark": "{@color_primitives.white.400}" + "brand_dark": "{@color_primitives.white.400}" + } + } + } + }, + "inverse": { + "$type": "color", + "$value": "{@color_primitives.white.1000}", + "$extensions": { + "org.sds": { + "figmaId": "VariableID:253:9807", + "modes": { + "sds_light": "{@color_primitives.white.1000}", + "sds_dark": "{@color_primitives.black.900}", + "brand_light": "{@color_primitives.slate.400}", + "brand_dark": "{@color_primitives.white.400}" } } } @@ -3743,9 +3790,7 @@ "sds_light": "{@color_primitives.slate.900}", "sds_dark": "{@color_primitives.slate.200}", "brand_light": "{@color_primitives.slate.800}", - "brand_dark": "{@color_primitives.slate.200}", - "sds_brand_light": "{@color_primitives.slate.800}", - "sds_brand_dark": "{@color_primitives.slate.200}" + "brand_dark": "{@color_primitives.slate.200}" } } } @@ -3760,9 +3805,7 @@ "sds_light": "{@color_primitives.slate.700}", "sds_dark": "{@color_primitives.slate.300}", "brand_light": "{@color_primitives.slate.700}", - "brand_dark": "{@color_primitives.slate.300}", - "sds_brand_light": "{@color_primitives.slate.700}", - "sds_brand_dark": "{@color_primitives.slate.300}" + "brand_dark": "{@color_primitives.slate.300}" } } } @@ -3777,9 +3820,7 @@ "sds_light": "{@color_primitives.slate.600}", "sds_dark": "{@color_primitives.slate.400}", "brand_light": "{@color_primitives.slate.600}", - "brand_dark": "{@color_primitives.slate.400}", - "sds_brand_light": "{@color_primitives.slate.600}", - "sds_brand_dark": "{@color_primitives.slate.400}" + "brand_dark": "{@color_primitives.slate.400}" } } } @@ -3794,9 +3835,7 @@ "sds_light": "{@color_primitives.slate.100}", "sds_dark": "{@color_primitives.slate.1000}", "brand_light": "{@color_primitives.slate.100}", - "brand_dark": "{@color_primitives.slate.1000}", - "sds_brand_light": "{@color_primitives.slate.100}", - "sds_brand_dark": "{@color_primitives.slate.1000}" + "brand_dark": "{@color_primitives.slate.1000}" } } } @@ -3811,9 +3850,7 @@ "sds_light": "{@color_primitives.slate.900}", "sds_dark": "{@color_primitives.slate.100}", "brand_light": "{@color_primitives.slate.900}", - "brand_dark": "{@color_primitives.slate.100}", - "sds_brand_light": "{@color_primitives.slate.900}", - "sds_brand_dark": "{@color_primitives.slate.100}" + "brand_dark": "{@color_primitives.slate.100}" } } } @@ -3828,9 +3865,7 @@ "sds_light": "{@color_primitives.slate.800}", "sds_dark": "{@color_primitives.slate.100}", "brand_light": "{@color_primitives.slate.800}", - "brand_dark": "{@color_primitives.slate.100}", - "sds_brand_light": "{@color_primitives.slate.800}", - "sds_brand_dark": "{@color_primitives.slate.100}" + "brand_dark": "{@color_primitives.slate.100}" } } } @@ -3847,9 +3882,7 @@ "sds_light": "{@color_primitives.grey.800}", "sds_dark": "{@color_primitives.grey.100}", "brand_light": "#041362", - "brand_dark": "#d1ecff", - "sds_brand_light": "{@color_primitives.sds.800}", - "sds_brand_dark": "{@color_primitives.sds.200}" + "brand_dark": "#d1ecff" } } } @@ -3864,9 +3897,7 @@ "sds_light": "{@color_primitives.grey.600}", "sds_dark": "{@color_primitives.grey.300}", "brand_light": "#003180", - "brand_dark": "#a3d9ff", - "sds_brand_light": "{@color_primitives.sds.700}", - "sds_brand_dark": "{@color_primitives.sds.300}" + "brand_dark": "#a3d9ff" } } } @@ -3881,9 +3912,7 @@ "sds_light": "{@color_primitives.grey.500}", "sds_dark": "{@color_primitives.grey.400}", "brand_light": "#003399", - "brand_dark": "#66bfff", - "sds_brand_light": "{@color_primitives.sds.600}", - "sds_brand_dark": "{@color_primitives.sds.400}" + "brand_dark": "#66bfff" } } } @@ -3898,9 +3927,7 @@ "sds_light": "{@color_primitives.grey.100}", "sds_dark": "{@color_primitives.grey.900}", "brand_light": "#ebf6ff", - "brand_dark": "#f5faff", - "sds_brand_light": "{@color_primitives.sds.100}", - "sds_brand_dark": "{@color_primitives.sds.100}" + "brand_dark": "#f5faff" } } } @@ -3915,9 +3942,7 @@ "sds_light": "{@color_primitives.grey.900}", "sds_dark": "{@color_primitives.grey.100}", "brand_light": "#020e4a", - "brand_dark": "#ebf6ff", - "sds_brand_light": "{@color_primitives.sds.900}", - "sds_brand_dark": "{@color_primitives.sds.100}" + "brand_dark": "#ebf6ff" } } } @@ -3932,9 +3957,7 @@ "sds_light": "{@color_primitives.grey.800}", "sds_dark": "{@color_primitives.grey.100}", "brand_light": "#041362", - "brand_dark": "#ebf6ff", - "sds_brand_light": "{@color_primitives.sds.800}", - "sds_brand_dark": "{@color_primitives.sds.100}" + "brand_dark": "#ebf6ff" } } } @@ -3951,9 +3974,7 @@ "sds_light": "{@color_primitives.green.800}", "sds_dark": "{@color_primitives.green.200}", "brand_light": "{@color_primitives.green.600}", - "brand_dark": "{@color_primitives.green.300}", - "sds_brand_light": "{@color_primitives.green.600}", - "sds_brand_dark": "{@color_primitives.green.300}" + "brand_dark": "{@color_primitives.green.300}" } } } @@ -3968,9 +3989,7 @@ "sds_light": "{@color_primitives.green.600}", "sds_dark": "{@color_primitives.green.400}", "brand_light": "{@color_primitives.green.700}", - "brand_dark": "{@color_primitives.green.500}", - "sds_brand_light": "{@color_primitives.green.700}", - "sds_brand_dark": "{@color_primitives.green.500}" + "brand_dark": "{@color_primitives.green.500}" } } } @@ -3985,9 +4004,7 @@ "sds_light": "{@color_primitives.green.500}", "sds_dark": "{@color_primitives.green.600}", "brand_light": "{@color_primitives.green.800}", - "brand_dark": "{@color_primitives.green.600}", - "sds_brand_light": "{@color_primitives.green.800}", - "sds_brand_dark": "{@color_primitives.green.600}" + "brand_dark": "{@color_primitives.green.600}" } } } @@ -4002,9 +4019,7 @@ "sds_light": "{@color_primitives.green.100}", "sds_dark": "{@color_primitives.green.100}", "brand_light": "{@color_primitives.green.100}", - "brand_dark": "{@color_primitives.green.100}", - "sds_brand_light": "{@color_primitives.green.100}", - "sds_brand_dark": "{@color_primitives.green.100}" + "brand_dark": "{@color_primitives.green.100}" } } } @@ -4019,9 +4034,7 @@ "sds_light": "{@color_primitives.green.800}", "sds_dark": "{@color_primitives.green.100}", "brand_light": "{@color_primitives.green.800}", - "brand_dark": "{@color_primitives.green.100}", - "sds_brand_light": "{@color_primitives.green.800}", - "sds_brand_dark": "{@color_primitives.green.100}" + "brand_dark": "{@color_primitives.green.100}" } } } @@ -4036,9 +4049,7 @@ "sds_light": "{@color_primitives.green.800}", "sds_dark": "{@color_primitives.green.100}", "brand_light": "{@color_primitives.green.800}", - "brand_dark": "{@color_primitives.green.100}", - "sds_brand_light": "{@color_primitives.green.800}", - "sds_brand_dark": "{@color_primitives.green.100}" + "brand_dark": "{@color_primitives.green.100}" } } } @@ -4055,9 +4066,7 @@ "sds_light": "{@color_primitives.yellow.900}", "sds_dark": "{@color_primitives.yellow.200}", "brand_light": "{@color_primitives.yellow.900}", - "brand_dark": "{@color_primitives.yellow.300}", - "sds_brand_light": "{@color_primitives.yellow.900}", - "sds_brand_dark": "{@color_primitives.yellow.300}" + "brand_dark": "{@color_primitives.yellow.300}" } } } @@ -4072,9 +4081,7 @@ "sds_light": "{@color_primitives.yellow.700}", "sds_dark": "{@color_primitives.yellow.400}", "brand_light": "{@color_primitives.yellow.800}", - "brand_dark": "{@color_primitives.yellow.500}", - "sds_brand_light": "{@color_primitives.yellow.800}", - "sds_brand_dark": "{@color_primitives.yellow.500}" + "brand_dark": "{@color_primitives.yellow.500}" } } } @@ -4089,9 +4096,7 @@ "sds_light": "{@color_primitives.yellow.600}", "sds_dark": "{@color_primitives.yellow.600}", "brand_light": "{@color_primitives.yellow.700}", - "brand_dark": "{@color_primitives.yellow.600}", - "sds_brand_light": "{@color_primitives.yellow.700}", - "sds_brand_dark": "{@color_primitives.yellow.600}" + "brand_dark": "{@color_primitives.yellow.600}" } } } @@ -4106,9 +4111,7 @@ "sds_light": "{@color_primitives.yellow.1000}", "sds_dark": "{@color_primitives.yellow.1000}", "brand_light": "{@color_primitives.yellow.1000}", - "brand_dark": "{@color_primitives.yellow.1000}", - "sds_brand_light": "{@color_primitives.yellow.1000}", - "sds_brand_dark": "{@color_primitives.yellow.1000}" + "brand_dark": "{@color_primitives.yellow.1000}" } } } @@ -4123,9 +4126,7 @@ "sds_light": "{@color_primitives.yellow.800}", "sds_dark": "{@color_primitives.yellow.100}", "brand_light": "{@color_primitives.yellow.800}", - "brand_dark": "{@color_primitives.yellow.100}", - "sds_brand_light": "{@color_primitives.yellow.800}", - "sds_brand_dark": "{@color_primitives.yellow.100}" + "brand_dark": "{@color_primitives.yellow.100}" } } } @@ -4140,9 +4141,7 @@ "sds_light": "{@color_primitives.yellow.900}", "sds_dark": "{@color_primitives.yellow.100}", "brand_light": "{@color_primitives.yellow.900}", - "brand_dark": "{@color_primitives.yellow.100}", - "sds_brand_light": "{@color_primitives.yellow.900}", - "sds_brand_dark": "{@color_primitives.yellow.100}" + "brand_dark": "{@color_primitives.yellow.100}" } } } @@ -4159,9 +4158,7 @@ "sds_light": "{@color_primitives.red.700}", "sds_dark": "{@color_primitives.red.200}", "brand_light": "{@color_primitives.red.600}", - "brand_dark": "{@color_primitives.red.300}", - "sds_brand_light": "{@color_primitives.red.600}", - "sds_brand_dark": "{@color_primitives.red.300}" + "brand_dark": "{@color_primitives.red.300}" } } } @@ -4176,9 +4173,7 @@ "sds_light": "{@color_primitives.red.600}", "sds_dark": "{@color_primitives.red.400}", "brand_light": "{@color_primitives.red.700}", - "brand_dark": "{@color_primitives.red.500}", - "sds_brand_light": "{@color_primitives.red.700}", - "sds_brand_dark": "{@color_primitives.red.500}" + "brand_dark": "{@color_primitives.red.500}" } } } @@ -4193,9 +4188,7 @@ "sds_light": "{@color_primitives.red.500}", "sds_dark": "{@color_primitives.red.500}", "brand_light": "{@color_primitives.red.800}", - "brand_dark": "{@color_primitives.red.600}", - "sds_brand_light": "{@color_primitives.red.800}", - "sds_brand_dark": "{@color_primitives.red.600}" + "brand_dark": "{@color_primitives.red.600}" } } } @@ -4210,9 +4203,7 @@ "sds_light": "{@color_primitives.red.100}", "sds_dark": "{@color_primitives.red.100}", "brand_light": "{@color_primitives.red.100}", - "brand_dark": "{@color_primitives.red.100}", - "sds_brand_light": "{@color_primitives.red.100}", - "sds_brand_dark": "{@color_primitives.red.100}" + "brand_dark": "{@color_primitives.red.100}" } } } @@ -4227,9 +4218,7 @@ "sds_light": "{@color_primitives.red.700}", "sds_dark": "{@color_primitives.red.100}", "brand_light": "{@color_primitives.red.700}", - "brand_dark": "{@color_primitives.red.100}", - "sds_brand_light": "{@color_primitives.red.700}", - "sds_brand_dark": "{@color_primitives.red.100}" + "brand_dark": "{@color_primitives.red.100}" } } } @@ -4244,9 +4233,7 @@ "sds_light": "{@color_primitives.red.700}", "sds_dark": "{@color_primitives.red.100}", "brand_light": "{@color_primitives.red.700}", - "brand_dark": "{@color_primitives.red.100}", - "sds_brand_light": "{@color_primitives.red.700}", - "sds_brand_dark": "{@color_primitives.red.100}" + "brand_dark": "{@color_primitives.red.100}" } } } @@ -4263,9 +4250,7 @@ "sds_light": "{@color_primitives.grey.400}", "sds_dark": "{@color_primitives.grey.500}", "brand_light": "{@color_primitives.grey.400}", - "brand_dark": "{@color_primitives.grey.500}", - "sds_brand_light": "{@color_primitives.grey.400}", - "sds_brand_dark": "{@color_primitives.grey.500}" + "brand_dark": "{@color_primitives.grey.500}" } } } @@ -4280,9 +4265,7 @@ "sds_light": "{@color_primitives.grey.400}", "sds_dark": "{@color_primitives.grey.400}", "brand_light": "{@color_primitives.grey.400}", - "brand_dark": "{@color_primitives.grey.400}", - "sds_brand_light": "{@color_primitives.grey.400}", - "sds_brand_dark": "{@color_primitives.grey.400}" + "brand_dark": "{@color_primitives.grey.400}" } } } @@ -4299,26 +4282,22 @@ "sds_light": "{@color_primitives.black.1000}", "sds_dark": "{@color_primitives.white.1000}", "brand_light": "{@color_primitives.black.1000}", - "brand_dark": "{@color_primitives.white.1000}", - "sds_brand_light": "{@color_primitives.white.1000}", - "sds_brand_dark": "{@color_primitives.white.1000}" + "brand_dark": "{@color_primitives.white.1000}" } } } }, "text-onmeasurement": { "$type": "color", - "$value": "UNKNOWN", + "$value": "{@color_primitives.pink.800}", "$extensions": { "org.sds": { "figmaId": "VariableID:72:10153", "modes": { - "sds_light": "UNKNOWN", - "sds_dark": "UNKNOWN", + "sds_light": "{@color_primitives.pink.800}", + "sds_dark": "{@color_primitives.pink.200}", "brand_light": "UNKNOWN", - "brand_dark": "UNKNOWN", - "sds_brand_light": "UNKNOWN", - "sds_brand_dark": "UNKNOWN" + "brand_dark": "UNKNOWN" } } } @@ -4337,9 +4316,7 @@ "sds_light": "{@color_primitives.slate.800}", "sds_dark": "{@color_primitives.white.1000}", "brand_light": "{@color_primitives.slate.800}", - "brand_dark": "{@color_primitives.white.1000}", - "sds_brand_light": "{@color_primitives.slate.800}", - "sds_brand_dark": "{@color_primitives.white.1000}" + "brand_dark": "{@color_primitives.white.1000}" } } } @@ -4354,9 +4331,7 @@ "sds_light": "{@color_primitives.slate.500}", "sds_dark": "{@color_primitives.white.500}", "brand_light": "{@color_primitives.slate.500}", - "brand_dark": "{@color_primitives.white.500}", - "sds_brand_light": "{@color_primitives.slate.500}", - "sds_brand_dark": "{@color_primitives.white.500}" + "brand_dark": "{@color_primitives.white.500}" } } } @@ -4371,9 +4346,7 @@ "sds_light": "{@color_primitives.slate.300}", "sds_dark": "{@color_primitives.white.300}", "brand_light": "{@color_primitives.slate.300}", - "brand_dark": "{@color_primitives.white.300}", - "sds_brand_light": "{@color_primitives.slate.300}", - "sds_brand_dark": "{@color_primitives.white.300}" + "brand_dark": "{@color_primitives.white.300}" } } } @@ -4390,9 +4363,7 @@ "sds_light": "{@color_primitives.slate.900}", "sds_dark": "{@color_primitives.slate.200}", "brand_light": "{@color_primitives.slate.800}", - "brand_dark": "{@color_primitives.slate.200}", - "sds_brand_light": "{@color_primitives.slate.800}", - "sds_brand_dark": "{@color_primitives.slate.200}" + "brand_dark": "{@color_primitives.slate.200}" } } } @@ -4407,9 +4378,7 @@ "sds_light": "{@color_primitives.slate.700}", "sds_dark": "{@color_primitives.slate.300}", "brand_light": "{@color_primitives.slate.700}", - "brand_dark": "{@color_primitives.slate.300}", - "sds_brand_light": "{@color_primitives.slate.700}", - "sds_brand_dark": "{@color_primitives.slate.300}" + "brand_dark": "{@color_primitives.slate.300}" } } } @@ -4424,9 +4393,7 @@ "sds_light": "{@color_primitives.slate.600}", "sds_dark": "{@color_primitives.slate.400}", "brand_light": "{@color_primitives.slate.600}", - "brand_dark": "{@color_primitives.slate.400}", - "sds_brand_light": "{@color_primitives.slate.600}", - "sds_brand_dark": "{@color_primitives.slate.400}" + "brand_dark": "{@color_primitives.slate.400}" } } } @@ -4441,9 +4408,7 @@ "sds_light": "{@color_primitives.slate.100}", "sds_dark": "{@color_primitives.slate.1000}", "brand_light": "{@color_primitives.slate.100}", - "brand_dark": "{@color_primitives.slate.1000}", - "sds_brand_light": "{@color_primitives.slate.100}", - "sds_brand_dark": "{@color_primitives.slate.1000}" + "brand_dark": "{@color_primitives.slate.1000}" } } } @@ -4458,9 +4423,7 @@ "sds_light": "{@color_primitives.slate.900}", "sds_dark": "{@color_primitives.slate.100}", "brand_light": "{@color_primitives.slate.900}", - "brand_dark": "{@color_primitives.slate.100}", - "sds_brand_light": "{@color_primitives.slate.900}", - "sds_brand_dark": "{@color_primitives.slate.100}" + "brand_dark": "{@color_primitives.slate.100}" } } } @@ -4475,9 +4438,7 @@ "sds_light": "{@color_primitives.slate.800}", "sds_dark": "{@color_primitives.slate.100}", "brand_light": "{@color_primitives.slate.800}", - "brand_dark": "{@color_primitives.slate.100}", - "sds_brand_light": "{@color_primitives.slate.800}", - "sds_brand_dark": "{@color_primitives.slate.100}" + "brand_dark": "{@color_primitives.slate.100}" } } } @@ -4494,9 +4455,7 @@ "sds_light": "{@color_primitives.grey.800}", "sds_dark": "{@color_primitives.grey.100}", "brand_light": "UNKNOWN", - "brand_dark": "UNKNOWN", - "sds_brand_light": "{@color_primitives.sds.800}", - "sds_brand_dark": "{@color_primitives.sds.200}" + "brand_dark": "UNKNOWN" } } } @@ -4511,9 +4470,7 @@ "sds_light": "{@color_primitives.grey.600}", "sds_dark": "{@color_primitives.grey.300}", "brand_light": "UNKNOWN", - "brand_dark": "UNKNOWN", - "sds_brand_light": "{@color_primitives.sds.700}", - "sds_brand_dark": "{@color_primitives.sds.300}" + "brand_dark": "UNKNOWN" } } } @@ -4528,9 +4485,7 @@ "sds_light": "{@color_primitives.grey.500}", "sds_dark": "{@color_primitives.grey.400}", "brand_light": "UNKNOWN", - "brand_dark": "UNKNOWN", - "sds_brand_light": "{@color_primitives.sds.600}", - "sds_brand_dark": "{@color_primitives.sds.400}" + "brand_dark": "UNKNOWN" } } } @@ -4545,9 +4500,7 @@ "sds_light": "{@color_primitives.grey.100}", "sds_dark": "{@color_primitives.grey.900}", "brand_light": "UNKNOWN", - "brand_dark": "UNKNOWN", - "sds_brand_light": "{@color_primitives.sds.100}", - "sds_brand_dark": "{@color_primitives.sds.100}" + "brand_dark": "UNKNOWN" } } } @@ -4562,9 +4515,7 @@ "sds_light": "{@color_primitives.grey.900}", "sds_dark": "{@color_primitives.grey.100}", "brand_light": "UNKNOWN", - "brand_dark": "UNKNOWN", - "sds_brand_light": "{@color_primitives.sds.900}", - "sds_brand_dark": "{@color_primitives.sds.100}" + "brand_dark": "UNKNOWN" } } } @@ -4579,9 +4530,7 @@ "sds_light": "{@color_primitives.grey.800}", "sds_dark": "{@color_primitives.grey.100}", "brand_light": "UNKNOWN", - "brand_dark": "UNKNOWN", - "sds_brand_light": "{@color_primitives.sds.800}", - "sds_brand_dark": "{@color_primitives.sds.100}" + "brand_dark": "UNKNOWN" } } } @@ -4598,9 +4547,7 @@ "sds_light": "{@color_primitives.green.800}", "sds_dark": "{@color_primitives.green.200}", "brand_light": "{@color_primitives.green.600}", - "brand_dark": "{@color_primitives.green.300}", - "sds_brand_light": "{@color_primitives.green.600}", - "sds_brand_dark": "{@color_primitives.green.300}" + "brand_dark": "{@color_primitives.green.300}" } } } @@ -4615,9 +4562,7 @@ "sds_light": "{@color_primitives.green.600}", "sds_dark": "{@color_primitives.green.400}", "brand_light": "{@color_primitives.green.700}", - "brand_dark": "{@color_primitives.green.500}", - "sds_brand_light": "{@color_primitives.green.700}", - "sds_brand_dark": "{@color_primitives.green.500}" + "brand_dark": "{@color_primitives.green.500}" } } } @@ -4632,9 +4577,7 @@ "sds_light": "{@color_primitives.green.500}", "sds_dark": "{@color_primitives.green.600}", "brand_light": "{@color_primitives.green.800}", - "brand_dark": "{@color_primitives.green.600}", - "sds_brand_light": "{@color_primitives.green.800}", - "sds_brand_dark": "{@color_primitives.green.600}" + "brand_dark": "{@color_primitives.green.600}" } } } @@ -4649,9 +4592,7 @@ "sds_light": "{@color_primitives.green.100}", "sds_dark": "{@color_primitives.green.100}", "brand_light": "{@color_primitives.green.100}", - "brand_dark": "{@color_primitives.green.100}", - "sds_brand_light": "{@color_primitives.green.100}", - "sds_brand_dark": "{@color_primitives.green.100}" + "brand_dark": "{@color_primitives.green.100}" } } } @@ -4666,9 +4607,7 @@ "sds_light": "{@color_primitives.green.800}", "sds_dark": "{@color_primitives.green.100}", "brand_light": "{@color_primitives.green.800}", - "brand_dark": "{@color_primitives.green.100}", - "sds_brand_light": "{@color_primitives.green.800}", - "sds_brand_dark": "{@color_primitives.green.100}" + "brand_dark": "{@color_primitives.green.100}" } } } @@ -4683,9 +4622,7 @@ "sds_light": "{@color_primitives.green.900}", "sds_dark": "{@color_primitives.green.100}", "brand_light": "{@color_primitives.green.900}", - "brand_dark": "{@color_primitives.green.100}", - "sds_brand_light": "{@color_primitives.green.900}", - "sds_brand_dark": "{@color_primitives.green.100}" + "brand_dark": "{@color_primitives.green.100}" } } } @@ -4702,9 +4639,7 @@ "sds_light": "{@color_primitives.yellow.900}", "sds_dark": "{@color_primitives.yellow.200}", "brand_light": "{@color_primitives.yellow.900}", - "brand_dark": "{@color_primitives.yellow.300}", - "sds_brand_light": "{@color_primitives.yellow.900}", - "sds_brand_dark": "{@color_primitives.yellow.300}" + "brand_dark": "{@color_primitives.yellow.300}" } } } @@ -4719,9 +4654,7 @@ "sds_light": "{@color_primitives.yellow.700}", "sds_dark": "{@color_primitives.yellow.400}", "brand_light": "{@color_primitives.yellow.800}", - "brand_dark": "{@color_primitives.yellow.500}", - "sds_brand_light": "{@color_primitives.yellow.800}", - "sds_brand_dark": "{@color_primitives.yellow.500}" + "brand_dark": "{@color_primitives.yellow.500}" } } } @@ -4736,9 +4669,7 @@ "sds_light": "{@color_primitives.yellow.600}", "sds_dark": "{@color_primitives.yellow.600}", "brand_light": "{@color_primitives.yellow.700}", - "brand_dark": "{@color_primitives.yellow.600}", - "sds_brand_light": "{@color_primitives.yellow.700}", - "sds_brand_dark": "{@color_primitives.yellow.600}" + "brand_dark": "{@color_primitives.yellow.600}" } } } @@ -4753,9 +4684,7 @@ "sds_light": "{@color_primitives.yellow.1000}", "sds_dark": "{@color_primitives.yellow.1000}", "brand_light": "{@color_primitives.yellow.1000}", - "brand_dark": "{@color_primitives.yellow.1000}", - "sds_brand_light": "{@color_primitives.yellow.1000}", - "sds_brand_dark": "{@color_primitives.yellow.1000}" + "brand_dark": "{@color_primitives.yellow.1000}" } } } @@ -4770,9 +4699,7 @@ "sds_light": "{@color_primitives.yellow.800}", "sds_dark": "{@color_primitives.yellow.100}", "brand_light": "{@color_primitives.yellow.800}", - "brand_dark": "{@color_primitives.yellow.100}", - "sds_brand_light": "{@color_primitives.yellow.800}", - "sds_brand_dark": "{@color_primitives.yellow.100}" + "brand_dark": "{@color_primitives.yellow.100}" } } } @@ -4787,9 +4714,7 @@ "sds_light": "{@color_primitives.yellow.900}", "sds_dark": "{@color_primitives.yellow.100}", "brand_light": "{@color_primitives.yellow.900}", - "brand_dark": "{@color_primitives.yellow.100}", - "sds_brand_light": "{@color_primitives.yellow.900}", - "sds_brand_dark": "{@color_primitives.yellow.100}" + "brand_dark": "{@color_primitives.yellow.100}" } } } @@ -4806,9 +4731,7 @@ "sds_light": "{@color_primitives.red.700}", "sds_dark": "{@color_primitives.red.200}", "brand_light": "{@color_primitives.red.600}", - "brand_dark": "{@color_primitives.red.300}", - "sds_brand_light": "{@color_primitives.red.600}", - "sds_brand_dark": "{@color_primitives.red.300}" + "brand_dark": "{@color_primitives.red.300}" } } } @@ -4823,9 +4746,7 @@ "sds_light": "{@color_primitives.red.600}", "sds_dark": "{@color_primitives.red.400}", "brand_light": "{@color_primitives.red.700}", - "brand_dark": "{@color_primitives.red.500}", - "sds_brand_light": "{@color_primitives.red.700}", - "sds_brand_dark": "{@color_primitives.red.500}" + "brand_dark": "{@color_primitives.red.500}" } } } @@ -4840,9 +4761,7 @@ "sds_light": "{@color_primitives.red.500}", "sds_dark": "{@color_primitives.red.500}", "brand_light": "{@color_primitives.red.800}", - "brand_dark": "{@color_primitives.red.600}", - "sds_brand_light": "{@color_primitives.red.800}", - "sds_brand_dark": "{@color_primitives.red.600}" + "brand_dark": "{@color_primitives.red.600}" } } } @@ -4857,9 +4776,7 @@ "sds_light": "{@color_primitives.red.100}", "sds_dark": "{@color_primitives.red.100}", "brand_light": "{@color_primitives.red.100}", - "brand_dark": "{@color_primitives.red.100}", - "sds_brand_light": "{@color_primitives.red.100}", - "sds_brand_dark": "{@color_primitives.red.100}" + "brand_dark": "{@color_primitives.red.100}" } } } @@ -4874,9 +4791,7 @@ "sds_light": "{@color_primitives.red.700}", "sds_dark": "{@color_primitives.red.100}", "brand_light": "{@color_primitives.red.700}", - "brand_dark": "{@color_primitives.red.100}", - "sds_brand_light": "{@color_primitives.red.700}", - "sds_brand_dark": "{@color_primitives.red.100}" + "brand_dark": "{@color_primitives.red.100}" } } } @@ -4891,9 +4806,7 @@ "sds_light": "{@color_primitives.red.700}", "sds_dark": "{@color_primitives.red.100}", "brand_light": "{@color_primitives.red.700}", - "brand_dark": "{@color_primitives.red.100}", - "sds_brand_light": "{@color_primitives.red.700}", - "sds_brand_dark": "{@color_primitives.red.100}" + "brand_dark": "{@color_primitives.red.100}" } } } @@ -4910,9 +4823,7 @@ "sds_light": "{@color_primitives.grey.400}", "sds_dark": "{@color_primitives.grey.500}", "brand_light": "{@color_primitives.grey.400}", - "brand_dark": "{@color_primitives.grey.500}", - "sds_brand_light": "{@color_primitives.grey.400}", - "sds_brand_dark": "{@color_primitives.grey.500}" + "brand_dark": "{@color_primitives.grey.500}" } } } @@ -4927,9 +4838,24 @@ "sds_light": "{@color_primitives.grey.400}", "sds_dark": "{@color_primitives.grey.400}", "brand_light": "{@color_primitives.grey.400}", - "brand_dark": "{@color_primitives.grey.400}", - "sds_brand_light": "{@color_primitives.grey.400}", - "sds_brand_dark": "{@color_primitives.grey.400}" + "brand_dark": "{@color_primitives.grey.400}" + } + } + } + } + }, + "utilities": { + "icon-onmeasurement": { + "$type": "color", + "$value": "{@color_primitives.pink.800}", + "$extensions": { + "org.sds": { + "figmaId": "VariableID:280:16549", + "modes": { + "sds_light": "{@color_primitives.pink.800}", + "sds_dark": "{@color_primitives.pink.200}", + "brand_light": "#ffffff", + "brand_dark": "#ffffff" } } } @@ -4946,28 +4872,24 @@ "figmaId": "VariableID:3919:36514", "modes": { "sds_light": "{@color_primitives.grey.300}", - "sds_dark": "{@color_primitives.grey.500}", + "sds_dark": "{@color_primitives.grey.400}", "brand_light": "{@color_primitives.grey.300}", - "brand_dark": "{@color_primitives.grey.500}", - "sds_brand_light": "{@color_primitives.grey.300}", - "sds_brand_dark": "{@color_primitives.grey.500}" + "brand_dark": "{@color_primitives.grey.500}" } } } }, "secondary": { "$type": "color", - "$value": "{@color_primitives.grey.800}", + "$value": "{@color_primitives.grey.500}", "$extensions": { "org.sds": { "figmaId": "VariableID:3919:36515", "modes": { - "sds_light": "{@color_primitives.grey.800}", - "sds_dark": "{@color_primitives.grey.400}", + "sds_light": "{@color_primitives.grey.500}", + "sds_dark": "{@color_primitives.grey.500}", "brand_light": "{@color_primitives.grey.800}", - "brand_dark": "{@color_primitives.grey.400}", - "sds_brand_light": "{@color_primitives.grey.800}", - "sds_brand_dark": "{@color_primitives.grey.400}" + "brand_dark": "{@color_primitives.grey.400}" } } } @@ -4980,11 +4902,9 @@ "figmaId": "VariableID:159:12723", "modes": { "sds_light": "{@color_primitives.grey.700}", - "sds_dark": "{@color_primitives.grey.300}", + "sds_dark": "{@color_primitives.grey.600}", "brand_light": "{@color_primitives.grey.700}", - "brand_dark": "{@color_primitives.grey.300}", - "sds_brand_light": "{@color_primitives.grey.700}", - "sds_brand_dark": "{@color_primitives.grey.300}" + "brand_dark": "{@color_primitives.grey.300}" } } } @@ -5001,9 +4921,7 @@ "sds_light": "{@color_primitives.slate.900}", "sds_dark": "{@color_primitives.slate.100}", "brand_light": "{@color_primitives.slate.900}", - "brand_dark": "{@color_primitives.slate.100}", - "sds_brand_light": "{@color_primitives.slate.900}", - "sds_brand_dark": "{@color_primitives.slate.100}" + "brand_dark": "{@color_primitives.slate.100}" } } } @@ -5018,9 +4936,7 @@ "sds_light": "{@color_primitives.slate.600}", "sds_dark": "{@color_primitives.slate.500}", "brand_light": "{@color_primitives.slate.600}", - "brand_dark": "{@color_primitives.slate.500}", - "sds_brand_light": "{@color_primitives.slate.600}", - "sds_brand_dark": "{@color_primitives.slate.500}" + "brand_dark": "{@color_primitives.slate.500}" } } } @@ -5035,9 +4951,7 @@ "sds_light": "{@color_primitives.slate.400}", "sds_dark": "{@color_primitives.slate.600}", "brand_light": "{@color_primitives.slate.400}", - "brand_dark": "{@color_primitives.slate.600}", - "sds_brand_light": "{@color_primitives.slate.400}", - "sds_brand_dark": "{@color_primitives.slate.600}" + "brand_dark": "{@color_primitives.slate.600}" } } } @@ -5054,9 +4968,7 @@ "sds_light": "{@color_primitives.grey.800}", "sds_dark": "{@color_primitives.grey.100}", "brand_light": "#003180", - "brand_dark": "#a3d9ff", - "sds_brand_light": "{@color_primitives.sds.700}", - "sds_brand_dark": "{@color_primitives.sds.300}" + "brand_dark": "#a3d9ff" } } } @@ -5071,9 +4983,7 @@ "sds_light": "{@color_primitives.grey.600}", "sds_dark": "{@color_primitives.grey.300}", "brand_light": "#0070c2", - "brand_dark": "#0070c2", - "sds_brand_light": "{@color_primitives.sds.500}", - "sds_brand_dark": "{@color_primitives.sds.500}" + "brand_dark": "#0070c2" } } } @@ -5088,9 +4998,7 @@ "sds_light": "{@color_primitives.grey.500}", "sds_dark": "{@color_primitives.grey.400}", "brand_light": "#66bfff", - "brand_dark": "#003399", - "sds_brand_light": "{@color_primitives.sds.400}", - "sds_brand_dark": "{@color_primitives.sds.600}" + "brand_dark": "#003399" } } } @@ -5107,9 +5015,7 @@ "sds_light": "{@color_primitives.green.800}", "sds_dark": "{@color_primitives.green.200}", "brand_light": "{@color_primitives.green.700}", - "brand_dark": "{@color_primitives.green.400}", - "sds_brand_light": "{@color_primitives.green.700}", - "sds_brand_dark": "{@color_primitives.green.400}" + "brand_dark": "{@color_primitives.green.400}" } } } @@ -5124,9 +5030,7 @@ "sds_light": "{@color_primitives.green.600}", "sds_dark": "{@color_primitives.green.400}", "brand_light": "{@color_primitives.green.500}", - "brand_dark": "{@color_primitives.green.600}", - "sds_brand_light": "{@color_primitives.green.500}", - "sds_brand_dark": "{@color_primitives.green.600}" + "brand_dark": "{@color_primitives.green.600}" } } } @@ -5141,9 +5045,7 @@ "sds_light": "{@color_primitives.green.500}", "sds_dark": "{@color_primitives.green.600}", "brand_light": "{@color_primitives.green.400}", - "brand_dark": "{@color_primitives.green.700}", - "sds_brand_light": "{@color_primitives.green.400}", - "sds_brand_dark": "{@color_primitives.green.700}" + "brand_dark": "{@color_primitives.green.700}" } } } @@ -5160,9 +5062,7 @@ "sds_light": "{@color_primitives.yellow.900}", "sds_dark": "{@color_primitives.yellow.200}", "brand_light": "{@color_primitives.yellow.700}", - "brand_dark": "{@color_primitives.yellow.200}", - "sds_brand_light": "{@color_primitives.yellow.700}", - "sds_brand_dark": "{@color_primitives.yellow.200}" + "brand_dark": "{@color_primitives.yellow.200}" } } } @@ -5177,9 +5077,7 @@ "sds_light": "{@color_primitives.yellow.700}", "sds_dark": "{@color_primitives.yellow.400}", "brand_light": "{@color_primitives.yellow.500}", - "brand_dark": "{@color_primitives.yellow.600}", - "sds_brand_light": "{@color_primitives.yellow.500}", - "sds_brand_dark": "{@color_primitives.yellow.600}" + "brand_dark": "{@color_primitives.yellow.600}" } } } @@ -5194,9 +5092,7 @@ "sds_light": "{@color_primitives.yellow.600}", "sds_dark": "{@color_primitives.yellow.600}", "brand_light": "{@color_primitives.yellow.400}", - "brand_dark": "{@color_primitives.yellow.700}", - "sds_brand_light": "{@color_primitives.yellow.400}", - "sds_brand_dark": "{@color_primitives.yellow.700}" + "brand_dark": "{@color_primitives.yellow.700}" } } } @@ -5213,9 +5109,7 @@ "sds_light": "{@color_primitives.red.700}", "sds_dark": "{@color_primitives.red.200}", "brand_light": "{@color_primitives.red.700}", - "brand_dark": "{@color_primitives.red.400}", - "sds_brand_light": "{@color_primitives.red.700}", - "sds_brand_dark": "{@color_primitives.red.400}" + "brand_dark": "{@color_primitives.red.400}" } } } @@ -5230,9 +5124,7 @@ "sds_light": "{@color_primitives.red.600}", "sds_dark": "{@color_primitives.red.400}", "brand_light": "{@color_primitives.red.500}", - "brand_dark": "{@color_primitives.red.500}", - "sds_brand_light": "{@color_primitives.red.500}", - "sds_brand_dark": "{@color_primitives.red.500}" + "brand_dark": "{@color_primitives.red.500}" } } } @@ -5247,9 +5139,7 @@ "sds_light": "{@color_primitives.red.500}", "sds_dark": "{@color_primitives.red.500}", "brand_light": "{@color_primitives.red.400}", - "brand_dark": "{@color_primitives.red.600}", - "sds_brand_light": "{@color_primitives.red.400}", - "sds_brand_dark": "{@color_primitives.red.600}" + "brand_dark": "{@color_primitives.red.600}" } } } @@ -5266,9 +5156,7 @@ "sds_light": "{@color_primitives.grey.400}", "sds_dark": "{@color_primitives.grey.600}", "brand_light": "{@color_primitives.grey.400}", - "brand_dark": "{@color_primitives.grey.600}", - "sds_brand_light": "{@color_primitives.grey.300}", - "sds_brand_dark": "{@color_primitives.grey.600}" + "brand_dark": "{@color_primitives.grey.600}" } } } @@ -5277,17 +5165,15 @@ "utilities": { "measurement": { "$type": "color", - "$value": "UNKNOWN", + "$value": "{@color_primitives.pink.400}", "$extensions": { "org.sds": { "figmaId": "VariableID:72:10154", "modes": { - "sds_light": "UNKNOWN", - "sds_dark": "UNKNOWN", + "sds_light": "{@color_primitives.pink.400}", + "sds_dark": "{@color_primitives.pink.600}", "brand_light": "UNKNOWN", - "brand_dark": "UNKNOWN", - "sds_brand_light": "UNKNOWN", - "sds_brand_dark": "UNKNOWN" + "brand_dark": "UNKNOWN" } } } diff --git a/scripts/tokens/tokensCodeSyntaxes.js b/scripts/tokens/tokensCodeSyntaxes.js index c1506d5..49b24f2 100644 --- a/scripts/tokens/tokensCodeSyntaxes.js +++ b/scripts/tokens/tokensCodeSyntaxes.js @@ -74,6 +74,16 @@ Promise.all([ ["VariableID:3919:36620", "var(--sds-color-grey-700)"], ["VariableID:3919:36621", "var(--sds-color-grey-800)"], ["VariableID:3919:36622", "var(--sds-color-grey-900)"], +["VariableID:280:16481", "var(--sds-color-pink-100)"], +["VariableID:280:16498", "var(--sds-color-pink-1000)"], +["VariableID:280:16482", "var(--sds-color-pink-200)"], +["VariableID:280:16483", "var(--sds-color-pink-300)"], +["VariableID:280:16486", "var(--sds-color-pink-400)"], +["VariableID:280:16490", "var(--sds-color-pink-500)"], +["VariableID:280:16491", "var(--sds-color-pink-600)"], +["VariableID:280:16493", "var(--sds-color-pink-700)"], +["VariableID:280:16494", "var(--sds-color-pink-800)"], +["VariableID:280:16497", "var(--sds-color-pink-900)"], ["VariableID:3919:36624", "var(--sds-color-red-100)"], ["VariableID:3919:36633", "var(--sds-color-red-1000)"], ["VariableID:3919:36625", "var(--sds-color-red-200)"], diff --git a/src/stories/ui/compositions/Cards.stories.tsx b/src/stories/ui/compositions/Cards.stories.tsx index a9c0a4a..ed6daf3 100644 --- a/src/stories/ui/compositions/Cards.stories.tsx +++ b/src/stories/ui/compositions/Cards.stories.tsx @@ -54,7 +54,7 @@ export const Default: StoryObj< alt="A nice image" aspectRatio="1-1" size="sm" - src="https://picsum.photos/500" + src="https://placehold.co/500" /> ) : undefined } @@ -107,14 +107,14 @@ export const BlockProductInfoCard: StoryObj = { render: () => ( } + asset={Accessibility!} heading="Product" price={5} action="Buy this" onAction={() => {}} /> } + asset={Accessibility!} heading="Product" price={5} action="Buy this" @@ -136,19 +136,19 @@ export const BlockTestimonialCard: StoryObj = { > diff --git a/src/stories/ui/primitives/Avatar.stories.tsx b/src/stories/ui/primitives/Avatar.stories.tsx index 92c26cf..0be500f 100644 --- a/src/stories/ui/primitives/Avatar.stories.tsx +++ b/src/stories/ui/primitives/Avatar.stories.tsx @@ -23,9 +23,9 @@ export const Image: Story = { args: {}, render: () => ( - - - + + + ), }; @@ -45,9 +45,9 @@ export const Buttons: Story = { args: {}, render: () => ( - - - + + + ), }; @@ -70,11 +70,11 @@ export const Group: GroupStory = { - + - + - + ), @@ -84,7 +84,7 @@ export const Block: Story = { args: {}, render: () => ( - + @fullname420 diff --git a/src/stories/ui/primitives/Image.stories.tsx b/src/stories/ui/primitives/Image.stories.tsx index 8291d82..d5a4fef 100644 --- a/src/stories/ui/primitives/Image.stories.tsx +++ b/src/stories/ui/primitives/Image.stories.tsx @@ -18,7 +18,7 @@ export const Default: StoryObj = { width: "100%", }} > - + ), }; @@ -26,8 +26,8 @@ export const Default: StoryObj = { export const SrcSet: StoryObj = { render: (args) => ( @@ -41,13 +41,13 @@ export const DefaultPicture: StoryObj = { - Magical thing + Magical thing ), }; diff --git a/src/stories/ui/primitives/Link.stories.tsx b/src/stories/ui/primitives/Link.stories.tsx index 05f0a11..8b7424b 100644 --- a/src/stories/ui/primitives/Link.stories.tsx +++ b/src/stories/ui/primitives/Link.stories.tsx @@ -10,6 +10,6 @@ export default meta; type Story = StoryObj; export const Default: Story = { - args: { children: "Hello world!", href: "https://www.example.org" }, + args: { children: "Hello world!", href: "https://www.figma.com" }, render: (args) => {args.children}, }; diff --git a/src/stories/ui/primitives/ListBox.stories.tsx b/src/stories/ui/primitives/ListBox.stories.tsx index 1dcfc28..e11857d 100644 --- a/src/stories/ui/primitives/ListBox.stories.tsx +++ b/src/stories/ui/primitives/ListBox.stories.tsx @@ -32,7 +32,7 @@ export const Default: Story = { - + Full access diff --git a/src/theme.css b/src/theme.css index d6595ee..474a030 100644 --- a/src/theme.css +++ b/src/theme.css @@ -360,66 +360,66 @@ } /* size: default (default) */ :root { - --sds-size-blur: 0.25rem; - --sds-size-border-width: 0.0625rem; - --sds-size-depth-lg: 1rem; - --sds-size-depth-md: 0.375rem; - --sds-size-depth-negative-lg: -1rem; - --sds-size-depth-negative-md: -0.5rem; - --sds-size-depth-negative-sm: -0.25rem; - --sds-size-depth-negative-xl: -2rem; - --sds-size-depth-negative-xs: -0.0625rem; - --sds-size-depth-negative-xxl: -3rem; + --sds-size-blur: var(--sds-responsive-unit-04); + --sds-size-border-width: var(--sds-responsive-unit-01); + --sds-size-depth-lg: var(--sds-responsive-unit-16); + --sds-size-depth-md: var(--sds-responsive-unit-06); + --sds-size-depth-negative-lg: var(--sds-responsive-unit-negative-16); + --sds-size-depth-negative-md: var(--sds-responsive-unit-negative-08); + --sds-size-depth-negative-sm: var(--sds-responsive-unit-negative-04); + --sds-size-depth-negative-xl: var(--sds-responsive-unit-negative-32); + --sds-size-depth-negative-xs: var(--sds-responsive-unit-negative-01); + --sds-size-depth-negative-xxl: var(--sds-responsive-unit-negative-48); --sds-size-depth-none: 0rem; - --sds-size-depth-sm: 0.25rem; - --sds-size-depth-xl: 2rem; - --sds-size-depth-xs: 0.0625rem; - --sds-size-depth-xxl: 3rem; - --sds-size-focus-ring: 0.125rem; - --sds-size-gap-column: 4rem; - --sds-size-gap-lg: 1rem; - --sds-size-gap-md: 0.75rem; - --sds-size-gap-negative-lg: -1rem; - --sds-size-gap-negative-md: -0.75rem; - --sds-size-gap-negative-sm: -0.5rem; - --sds-size-gap-negative-xl: -1.5rem; - --sds-size-gap-negative-xs: -0.25rem; - --sds-size-gap-sm: 0.5rem; - --sds-size-gap-xl: 1.5rem; - --sds-size-gap-xs: 0.25rem; - --sds-size-gap-xxl: 3rem; - --sds-size-padding-lg: 1rem; - --sds-size-padding-md: 0.75rem; - --sds-size-padding-section-lg: 10rem; - --sds-size-padding-section-md: 4rem; - --sds-size-padding-section-sm: 2rem; - --sds-size-padding-sm: 0.5rem; - --sds-size-padding-xl: 1.5rem; - --sds-size-padding-xs: 0.25rem; - --sds-size-padding-xxl: 2rem; + --sds-size-depth-sm: var(--sds-responsive-unit-04); + --sds-size-depth-xl: var(--sds-responsive-unit-32); + --sds-size-depth-xs: var(--sds-responsive-unit-01); + --sds-size-depth-xxl: var(--sds-responsive-unit-48); + --sds-size-focus-ring: var(--sds-responsive-unit-02); + --sds-size-gap-column: var(--sds-responsive-unit-64); + --sds-size-gap-lg: var(--sds-responsive-unit-16); + --sds-size-gap-md: var(--sds-responsive-unit-12); + --sds-size-gap-negative-lg: var(--sds-responsive-unit-negative-16); + --sds-size-gap-negative-md: var(--sds-responsive-unit-negative-12); + --sds-size-gap-negative-sm: var(--sds-responsive-unit-negative-08); + --sds-size-gap-negative-xl: var(--sds-responsive-unit-negative-24); + --sds-size-gap-negative-xs: var(--sds-responsive-unit-negative-04); + --sds-size-gap-sm: var(--sds-responsive-unit-08); + --sds-size-gap-xl: var(--sds-responsive-unit-24); + --sds-size-gap-xs: var(--sds-responsive-unit-04); + --sds-size-gap-xxl: var(--sds-responsive-unit-48); + --sds-size-padding-lg: var(--sds-responsive-unit-16); + --sds-size-padding-md: var(--sds-responsive-unit-12); + --sds-size-padding-section-lg: var(--sds-responsive-unit-160); + --sds-size-padding-section-md: var(--sds-responsive-unit-64); + --sds-size-padding-section-sm: var(--sds-responsive-unit-32); + --sds-size-padding-sm: var(--sds-responsive-unit-08); + --sds-size-padding-xl: var(--sds-responsive-unit-24); + --sds-size-padding-xs: var(--sds-responsive-unit-04); + --sds-size-padding-xxl: var(--sds-responsive-unit-32); --sds-size-radius-full: 624.9375rem; - --sds-size-radius-lg: 1rem; - --sds-size-radius-md: 0.75rem; - --sds-size-radius-sm: 0.5rem; - --sds-size-radius-xl: 1.5rem; - --sds-size-radius-xs: 0.25rem; - --sds-size-radius-xxl: 2rem; + --sds-size-radius-lg: var(--sds-responsive-unit-16); + --sds-size-radius-md: var(--sds-responsive-unit-12); + --sds-size-radius-sm: var(--sds-responsive-unit-08); + --sds-size-radius-xl: var(--sds-responsive-unit-24); + --sds-size-radius-xs: var(--sds-responsive-unit-04); + --sds-size-radius-xxl: var(--sds-responsive-unit-32); } /* typography_primitives: default (default) */ :root { --sds-typography-family-mono: "Roboto Mono", monospace; --sds-typography-family-sans: "Inter", sans-serif; --sds-typography-family-serif: "Noto Serif", serif; - --sds-typography-scale-01: 0.75rem; - --sds-typography-scale-02: 0.875rem; - --sds-typography-scale-03: 1rem; - --sds-typography-scale-04: 1.25rem; - --sds-typography-scale-05: 1.5rem; - --sds-typography-scale-06: 2rem; - --sds-typography-scale-07: 2.5rem; - --sds-typography-scale-08: 3rem; - --sds-typography-scale-09: 4rem; - --sds-typography-scale-10: 4.5rem; + --sds-typography-scale-01: var(--sds-responsive-unit-12); + --sds-typography-scale-02: var(--sds-responsive-unit-14); + --sds-typography-scale-03: var(--sds-responsive-unit-16); + --sds-typography-scale-04: var(--sds-responsive-unit-20); + --sds-typography-scale-05: var(--sds-responsive-unit-24); + --sds-typography-scale-06: var(--sds-responsive-unit-32); + --sds-typography-scale-07: var(--sds-responsive-unit-40); + --sds-typography-scale-08: var(--sds-responsive-unit-48); + --sds-typography-scale-09: var(--sds-responsive-unit-64); + --sds-typography-scale-10: var(--sds-responsive-unit-72); --sds-typography-weight-black: 900; --sds-typography-weight-black-italic: 900 italic; --sds-typography-weight-bold: 700; @@ -445,7 +445,9 @@ --sds-typography-body-size-lg: var(--sds-typography-scale-04); --sds-typography-body-size-md: var(--sds-typography-scale-03); --sds-typography-body-size-sm: var(--sds-typography-scale-02); - --sds-typography-body-weight-emphasis: var(--sds-typography-weight-regular-italic); + --sds-typography-body-weight-emphasis: var( + --sds-typography-weight-regular-italic + ); --sds-typography-body-weight-regular: var(--sds-typography-weight-regular); --sds-typography-body-weight-strong: var(--sds-typography-weight-semibold); --sds-typography-code-family: var(--sds-typography-family-mono); @@ -482,34 +484,200 @@ --sds-typography-title-page-size-sm: var(--sds-typography-scale-07); --sds-typography-title-page-weight: var(--sds-typography-weight-bold); } +/* responsive: mobile (default) */ +:root { + --sds-responsive-root-font-size: 18px; + --sds-responsive-unit-01: 1.125; + --sds-responsive-unit-02: 2.25; + --sds-responsive-unit-04: 4.5; + --sds-responsive-unit-06: 6.75; + --sds-responsive-unit-08: 9px; + --sds-responsive-unit-12: 13.5; + --sds-responsive-unit-14: 15.75; + --sds-responsive-unit-16: 18px; + --sds-responsive-unit-160: 180px; + --sds-responsive-unit-20: 22.25; + --sds-responsive-unit-24: 27.5; + --sds-responsive-unit-28: 31.5; + --sds-responsive-unit-32: 36px; + --sds-responsive-unit-36: 40.5; + --sds-responsive-unit-40: 45px; + --sds-responsive-unit-48: 54px; + --sds-responsive-unit-64: 72px; + --sds-responsive-unit-72: 81px; + --sds-responsive-unit-negative-01: -1.1299999952316284; + --sds-responsive-unit-negative-02: -2.25; + --sds-responsive-unit-negative-04: -4.5; + --sds-responsive-unit-negative-06: -6.75; + --sds-responsive-unit-negative-08: -9px; + --sds-responsive-unit-negative-12: 13.5; + --sds-responsive-unit-negative-16: -18px; + --sds-responsive-unit-negative-20: -22.25; + --sds-responsive-unit-negative-24: -27.5; + --sds-responsive-unit-negative-28: -31.5; + --sds-responsive-unit-negative-32: -36px; + --sds-responsive-unit-negative-36: -40.5; + --sds-responsive-unit-negative-40: -45px; + --sds-responsive-unit-negative-48: -54px; + --sds-responsive-unit-negative-64: -72px; + --sds-responsive-width-device-min: 375px; +} +/* responsive: tablet */ +@media (min-width: 768px) { + :root { + --sds-responsive-root-font-size: 16px; + --sds-responsive-unit-01: 1px; + --sds-responsive-unit-02: 2px; + --sds-responsive-unit-04: 4px; + --sds-responsive-unit-06: 6px; + --sds-responsive-unit-08: 8px; + --sds-responsive-unit-12: 12px; + --sds-responsive-unit-14: 14px; + --sds-responsive-unit-16: 16px; + --sds-responsive-unit-160: 160px; + --sds-responsive-unit-20: 20px; + --sds-responsive-unit-24: 24px; + --sds-responsive-unit-28: 28px; + --sds-responsive-unit-32: 32px; + --sds-responsive-unit-36: 36px; + --sds-responsive-unit-40: 40px; + --sds-responsive-unit-48: 48px; + --sds-responsive-unit-64: 64px; + --sds-responsive-unit-72: 64px; + --sds-responsive-unit-negative-01: -1px; + --sds-responsive-unit-negative-02: -2px; + --sds-responsive-unit-negative-04: -4px; + --sds-responsive-unit-negative-06: -6px; + --sds-responsive-unit-negative-08: -8px; + --sds-responsive-unit-negative-12: -12px; + --sds-responsive-unit-negative-16: -16px; + --sds-responsive-unit-negative-20: -20px; + --sds-responsive-unit-negative-24: -24px; + --sds-responsive-unit-negative-28: -28px; + --sds-responsive-unit-negative-32: -32px; + --sds-responsive-unit-negative-36: -36px; + --sds-responsive-unit-negative-40: -40px; + --sds-responsive-unit-negative-48: -48px; + --sds-responsive-unit-negative-64: -64px; + --sds-responsive-width-device-min: 768px; + } +} +/* responsive: desktop */ +@media (min-width: 1200px) { + :root { + --sds-responsive-root-font-size: 16px; + --sds-responsive-unit-01: 1px; + --sds-responsive-unit-02: 2px; + --sds-responsive-unit-04: 4px; + --sds-responsive-unit-06: 6px; + --sds-responsive-unit-08: 8px; + --sds-responsive-unit-12: 12px; + --sds-responsive-unit-14: 14px; + --sds-responsive-unit-16: 16px; + --sds-responsive-unit-160: 160px; + --sds-responsive-unit-20: 20px; + --sds-responsive-unit-24: 24px; + --sds-responsive-unit-28: 28px; + --sds-responsive-unit-32: 32px; + --sds-responsive-unit-36: 36px; + --sds-responsive-unit-40: 40px; + --sds-responsive-unit-48: 48px; + --sds-responsive-unit-64: 64px; + --sds-responsive-unit-72: 72px; + --sds-responsive-unit-negative-01: -1px; + --sds-responsive-unit-negative-02: -2px; + --sds-responsive-unit-negative-04: -4px; + --sds-responsive-unit-negative-06: -6px; + --sds-responsive-unit-negative-08: -8px; + --sds-responsive-unit-negative-12: -12px; + --sds-responsive-unit-negative-16: -16px; + --sds-responsive-unit-negative-20: -20px; + --sds-responsive-unit-negative-24: -24px; + --sds-responsive-unit-negative-28: -28px; + --sds-responsive-unit-negative-32: -32px; + --sds-responsive-unit-negative-36: -36px; + --sds-responsive-unit-negative-40: -40px; + --sds-responsive-unit-negative-48: -48px; + --sds-responsive-unit-negative-64: -64px; + --sds-responsive-width-device-min: 1200px; + } +} /* styles */ :root { - --sds-font-body-strong: normal var(--sds-typography-body-weight-strong) var(--sds-typography-body-size-md) var(--sds-typography-body-family); - --sds-font-body-base: normal var(--sds-typography-body-weight-regular) var(--sds-typography-body-size-md) var(--sds-typography-body-family); - --sds-font-input: normal var(--sds-typography-input-weight) var(--sds-typography-input-size-md) var(--sds-typography-input-family); - --sds-font-utilities-component-notes-regular: normal var(--sds-typography-weight-regular) var(--sds-typography-scale-03) var(--sds-typography-family-mono); - --sds-font-subheading: normal var(--sds-typography-subheading-weight) var(--sds-typography-subheading-size-md) var(--sds-typography-subheading-family); - --sds-font-title-hero: normal var(--sds-typography-title-hero-weight) var(--sds-typography-title-hero-size) var(--sds-typography-title-hero-family); - --sds-font-title-page: normal var(--sds-typography-title-page-weight) var(--sds-typography-title-page-size-md) var(--sds-typography-title-page-family); - --sds-font-subtitle: normal var(--sds-typography-subtitle-weight) var(--sds-typography-subtitle-size-md) var(--sds-typography-subtitle-family); - --sds-font-heading: normal var(--sds-typography-heading-weight) var(--sds-typography-heading-size-md) var(--sds-typography-heading-family); - --sds-font-body-emphasis: var(--sds-typography-body-weight-emphasis) var(--sds-typography-body-size-md) var(--sds-typography-body-family); - --sds-font-body-link: normal var(--sds-typography-body-weight-regular) var(--sds-typography-body-size-md) var(--sds-typography-body-family); - --sds-font-body-small: normal var(--sds-typography-body-weight-regular) var(--sds-typography-body-size-sm) var(--sds-typography-body-family); - --sds-font-body-code: normal var(--sds-typography-code-weight) var(--sds-typography-code-size-md) var(--sds-typography-code-family); - --sds-effects-shadows-drop-shadow-200: var(--sds-size-depth-none) var(--sds-size-depth-xs) var(--sds-size-depth-sm) var(--sds-size-depth-none) var(--sds-color-black-100), var(--sds-size-depth-none) var(--sds-size-depth-xs) var(--sds-size-depth-sm) var(--sds-size-depth-none) var(--sds-color-black-200); - --sds-effects-shadows-drop-shadow-100: var(--sds-size-depth-none) var(--sds-size-depth-xs) var(--sds-size-depth-sm) var(--sds-size-depth-none) var(--sds-color-black-100); - --sds-effects-shadows-drop-shadow-300: var(--sds-size-depth-none) var(--sds-size-depth-sm) var(--sds-size-depth-sm) var(--sds-size-depth-negative-xs) var(--sds-color-black-100), var(--sds-size-depth-none) var(--sds-size-depth-sm) var(--sds-size-depth-sm) var(--sds-size-depth-negative-xs) var(--sds-color-black-200); - --sds-effects-shadows-drop-shadow-400: var(--sds-size-depth-none) var(--sds-size-depth-sm) var(--sds-size-depth-sm) var(--sds-size-depth-negative-sm) var(--sds-color-black-100), var(--sds-size-depth-none) var(--sds-size-depth-lg) var(--sds-size-depth-xl) var(--sds-size-depth-negative-sm) var(--sds-color-black-200); - --sds-effects-shadows-drop-shadow-500: var(--sds-size-depth-none) var(--sds-size-depth-sm) var(--sds-size-depth-sm) var(--sds-size-depth-negative-sm) var(--sds-color-black-100), var(--sds-size-depth-none) var(--sds-size-depth-lg) var(--sds-size-depth-lg) var(--sds-size-depth-negative-md) var(--sds-color-black-200); - --sds-effects-shadows-drop-shadow-600: var(--sds-size-depth-none) var(--sds-size-depth-lg) var(--sds-size-depth-xl) var(--sds-size-depth-negative-md) var(--sds-color-black-400); - --sds-effects-shadows-inner-shadow-100: inset 0px var(--sds-size-depth-xs) var(--sds-size-blur) undefinedpx var(--sds-color-black-100); - --sds-effects-shadows-inner-shadow-200: inset var(--sds-size-depth-none) var(--sds-size-depth-xs) var(--sds-size-depth-sm) var(--sds-size-depth-none) var(--sds-color-black-100); - --sds-effects-shadows-inner-shadow-300: inset var(--sds-size-depth-none) var(--sds-size-depth-sm) var(--sds-size-depth-sm) var(--sds-size-depth-negative-xs) var(--sds-color-black-100); - --sds-effects-shadows-inner-shadow-400: inset var(--sds-size-depth-none) var(--sds-size-depth-lg) var(--sds-size-depth-xl) var(--sds-size-depth-negative-sm) var(--sds-color-black-200); - --sds-effects-shadows-inner-shadow-500: inset var(--sds-size-depth-none) var(--sds-size-depth-lg) var(--sds-size-depth-lg) var(--sds-size-depth-negative-md) var(--sds-color-black-200); - --sds-effects-shadows-inner-shadow-600: inset var(--sds-size-depth-none) var(--sds-size-depth-lg) var(--sds-size-depth-xl) var(--sds-size-depth-negative-md) var(--sds-color-black-400); + --sds-font-body-strong: normal var(--sds-typography-body-weight-strong) + var(--sds-typography-body-size-md) var(--sds-typography-body-family); + --sds-font-body-base: normal var(--sds-typography-body-weight-regular) + var(--sds-typography-body-size-md) var(--sds-typography-body-family); + --sds-font-input: normal var(--sds-typography-input-weight) + var(--sds-typography-input-size-md) var(--sds-typography-input-family); + --sds-font-utilities-component-notes-regular: normal + var(--sds-typography-weight-regular) var(--sds-typography-scale-03) + var(--sds-typography-family-mono); + --sds-font-subheading: normal var(--sds-typography-subheading-weight) + var(--sds-typography-subheading-size-md) + var(--sds-typography-subheading-family); + --sds-font-title-hero: normal var(--sds-typography-title-hero-weight) + var(--sds-typography-title-hero-size) + var(--sds-typography-title-hero-family); + --sds-font-title-page: normal var(--sds-typography-title-page-weight) + var(--sds-typography-title-page-size-md) + var(--sds-typography-title-page-family); + --sds-font-subtitle: normal var(--sds-typography-subtitle-weight) + var(--sds-typography-subtitle-size-md) var(--sds-typography-subtitle-family); + --sds-font-heading: normal var(--sds-typography-heading-weight) + var(--sds-typography-heading-size-md) var(--sds-typography-heading-family); + --sds-font-body-emphasis: var(--sds-typography-body-weight-emphasis) + var(--sds-typography-body-size-md) var(--sds-typography-body-family); + --sds-font-body-link: normal var(--sds-typography-body-weight-regular) + var(--sds-typography-body-size-md) var(--sds-typography-body-family); + --sds-font-body-small: normal var(--sds-typography-body-weight-regular) + var(--sds-typography-body-size-sm) var(--sds-typography-body-family); + --sds-font-body-code: normal var(--sds-typography-code-weight) + var(--sds-typography-code-size-md) var(--sds-typography-code-family); + --sds-effects-shadows-drop-shadow-200: var(--sds-size-depth-none) + var(--sds-size-depth-xs) var(--sds-size-depth-sm) + var(--sds-size-depth-none) var(--sds-color-black-100), + var(--sds-size-depth-none) var(--sds-size-depth-xs) var(--sds-size-depth-sm) + var(--sds-size-depth-none) var(--sds-color-black-200); + --sds-effects-shadows-drop-shadow-100: var(--sds-size-depth-none) + var(--sds-size-depth-xs) var(--sds-size-depth-sm) var(--sds-size-depth-none) + var(--sds-color-black-100); + --sds-effects-shadows-drop-shadow-300: var(--sds-size-depth-none) + var(--sds-size-depth-sm) var(--sds-size-depth-sm) + var(--sds-size-depth-negative-xs) var(--sds-color-black-100), + var(--sds-size-depth-none) var(--sds-size-depth-sm) var(--sds-size-depth-sm) + var(--sds-size-depth-negative-xs) var(--sds-color-black-200); + --sds-effects-shadows-drop-shadow-400: var(--sds-size-depth-none) + var(--sds-size-depth-sm) var(--sds-size-depth-sm) + var(--sds-size-depth-negative-sm) var(--sds-color-black-100), + var(--sds-size-depth-none) var(--sds-size-depth-lg) var(--sds-size-depth-xl) + var(--sds-size-depth-negative-sm) var(--sds-color-black-200); + --sds-effects-shadows-drop-shadow-500: var(--sds-size-depth-none) + var(--sds-size-depth-sm) var(--sds-size-depth-sm) + var(--sds-size-depth-negative-sm) var(--sds-color-black-100), + var(--sds-size-depth-none) var(--sds-size-depth-lg) var(--sds-size-depth-lg) + var(--sds-size-depth-negative-md) var(--sds-color-black-200); + --sds-effects-shadows-drop-shadow-600: var(--sds-size-depth-none) + var(--sds-size-depth-lg) var(--sds-size-depth-xl) + var(--sds-size-depth-negative-md) var(--sds-color-black-400); + --sds-effects-shadows-inner-shadow-100: inset 0px var(--sds-size-depth-xs) + var(--sds-size-blur) undefinedpx var(--sds-color-black-100); + --sds-effects-shadows-inner-shadow-200: inset var(--sds-size-depth-none) + var(--sds-size-depth-xs) var(--sds-size-depth-sm) var(--sds-size-depth-none) + var(--sds-color-black-100); + --sds-effects-shadows-inner-shadow-300: inset var(--sds-size-depth-none) + var(--sds-size-depth-sm) var(--sds-size-depth-sm) + var(--sds-size-depth-negative-xs) var(--sds-color-black-100); + --sds-effects-shadows-inner-shadow-400: inset var(--sds-size-depth-none) + var(--sds-size-depth-lg) var(--sds-size-depth-xl) + var(--sds-size-depth-negative-sm) var(--sds-color-black-200); + --sds-effects-shadows-inner-shadow-500: inset var(--sds-size-depth-none) + var(--sds-size-depth-lg) var(--sds-size-depth-lg) + var(--sds-size-depth-negative-md) var(--sds-color-black-200); + --sds-effects-shadows-inner-shadow-600: inset var(--sds-size-depth-none) + var(--sds-size-depth-lg) var(--sds-size-depth-xl) + var(--sds-size-depth-negative-md) var(--sds-color-black-400); --sds-effects-backdrop-filter-blur-overlay: blur(var(--sds-size-blur)); --sds-effects-filter-blur-layer: blur(var(--sds-size-blur)); --sds-effects-backdrop-filter-blur-background: blur(var(--sds-size-blur)); -} \ No newline at end of file +} diff --git a/src/ui/compositions/Cards/Cards.figma.tsx b/src/ui/compositions/Cards/Cards.figma.tsx index c6174a1..67ae81c 100644 --- a/src/ui/compositions/Cards/Cards.figma.tsx +++ b/src/ui/compositions/Cards/Cards.figma.tsx @@ -1,11 +1,15 @@ import { figma } from "@figma/code-connect"; +import { Image, Text, TextHeading } from "ui/primitives"; import { Card } from "./Cards"; figma.connect(Card, "", { props: { - asset: figma.children(["Image", "Icon"]), - heading: figma.children("Text Heading"), - body: figma.children("Text"), + asset: figma.enum("Asset Type", { + Image: Always use alt text, + Icon: figma.instance("Icon"), + }), + heading: figma.string("Heading"), + body: figma.string("Body"), direction: figma.enum("Direction", { Horizontal: "horizontal", Vertical: "vertical", @@ -18,8 +22,8 @@ figma.connect(Card, "", { }, example: ({ actions, variant, heading, body, asset, direction }) => ( - {heading} - {body} + {heading} + {body} {actions} ), diff --git a/src/ui/compositions/Headers/Headers.tsx b/src/ui/compositions/Headers/Headers.tsx index fa81bec..8cdf2ad 100644 --- a/src/ui/compositions/Headers/Headers.tsx +++ b/src/ui/compositions/Headers/Headers.tsx @@ -38,7 +38,7 @@ export function HeaderAuth() { size="small" onPress={() => login({ - avatar: "https://picsum.photos/300", + avatar: "https://placehold.co/300", name: "Charlie Brown", username: "snooptroupe", }) @@ -50,7 +50,7 @@ export function HeaderAuth() { size="small" onPress={() => login({ - avatar: "https://picsum.photos/300", + avatar: "https://placehold.co/300", name: "Charlie Brown", username: "snooptroupe", }) diff --git a/src/ui/primitives/Avatar/Avatar.figma.tsx b/src/ui/primitives/Avatar/Avatar.figma.tsx index 19940a4..d1a387d 100644 --- a/src/ui/primitives/Avatar/Avatar.figma.tsx +++ b/src/ui/primitives/Avatar/Avatar.figma.tsx @@ -33,7 +33,7 @@ figma.connect(Avatar, "", { Small: "sm", }), src: figma.enum("Type", { - Image: "https://picsum.photos/80", + Image: "https://placehold.co/80", }), }, example: ({ initials, size, square, src }) => ( diff --git a/src/ui/primitives/Fieldset/Fieldset.figma.tsx b/src/ui/primitives/Fieldset/Fieldset.figma.tsx index 400d62b..24968c2 100644 --- a/src/ui/primitives/Fieldset/Fieldset.figma.tsx +++ b/src/ui/primitives/Fieldset/Fieldset.figma.tsx @@ -1,12 +1,5 @@ import figma from "@figma/code-connect"; -import { - Description, - FieldError, - FieldGroup, - Fieldset, - Label, - Legend, -} from "./Fieldset"; +import { Description, FieldError, Label, Legend } from "./Fieldset"; figma.connect(Description, "", { props: { @@ -35,30 +28,3 @@ figma.connect(FieldError, "", { }, example: ({ error }) => {error}, }); - -figma.connect(FieldGroup, "", { - props: { - children: figma.children([ - "Input Field", - "Select Field", - "Text Area Field", - "Switch Group", - "Checkbox Group", - "Radio Group", - "Checkbox Field", - ]), - }, - example: ({ children }) => {children}, -}); - -figma.connect(Fieldset, "", { - props: { - children: figma.children([ - "Legend", - "Description", - "Field Group", - "Button Group", - ]), - }, - example: ({ children }) =>
{children}
, -}); diff --git a/src/ui/primitives/Image/Image.figma.tsx b/src/ui/primitives/Image/Image.figma.tsx deleted file mode 100644 index ee26a52..0000000 --- a/src/ui/primitives/Image/Image.figma.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import figma from "@figma/code-connect"; -import { Image } from "./Image"; - -figma.connect(Image, "", { - props: { - aspectRatio: figma.enum("Aspect ratio", { - "16:9": "16-9", - "1:1": "1-1", - "4:3": "4-3", - fill: "fill", - natural: "natural", - }), - size: figma.enum("Size", { - sm: "sm", - md: "md", - lg: "lg", - fill: "fill", - natural: "natural", - }), - src: figma.enum("Aspect ratio", { - "16:9": "https://picsum.photos/800/450", - "1:1": "https://picsum.photos/600/600", - "4:3": "https://picsum.photos/800/600", - fill: "https://picsum.photos/800/600", - natural: "https://picsum.photos/800/600", - }), - }, - example: ({ aspectRatio, size, src }) => ( - Always use alt - ), -}); - -figma.connect(Image, "", { - example: () => ( - Always describe the image - ), -}); diff --git a/src/ui/primitives/Input/Input.figma.tsx b/src/ui/primitives/Input/Input.figma.tsx index b99e117..7d70730 100644 --- a/src/ui/primitives/Input/Input.figma.tsx +++ b/src/ui/primitives/Input/Input.figma.tsx @@ -1,6 +1,6 @@ import figma from "@figma/code-connect"; import { Field } from "../Fieldset/Fieldset"; -import { Input } from "./Input"; +import { Input, InputField } from "./Input"; figma.connect(Input, "", { props: { @@ -20,16 +20,30 @@ figma.connect(Input, "", { ), }); -// TODO: Use Text Field figma.connect(Field, "", { props: { isDisabled: figma.enum("State", { Disabled: true }), - children: figma.children([ - "Label", - "Input", - "Description", - "Error Message", - ]), + description: figma.boolean("Has Description", { + true: figma.string("Description"), + false: undefined, + }), + label: figma.boolean("Has Label", { + true: figma.string("Label"), + false: undefined, + }), + errorMessage: figma.boolean("Has Error Message", { + true: figma.string("Error Message"), + false: undefined, + }), + input: figma.children("Input"), }, - example: ({ children }) => {children}, + example: ({ description, label, errorMessage, input }) => ( + + {input} + + ), }); diff --git a/src/ui/primitives/Menu/Menu.figma.tsx b/src/ui/primitives/Menu/Menu.figma.tsx index 3731ed4..71cdfb0 100644 --- a/src/ui/primitives/Menu/Menu.figma.tsx +++ b/src/ui/primitives/Menu/Menu.figma.tsx @@ -51,19 +51,19 @@ figma.connect(MenuItem, "", { false: undefined, }), description: figma.boolean("Has Description", { - true: figma.children("Menu Description"), + true: {figma.string("Description")}, false: undefined, }), shortcut: figma.boolean("Has Shortcut", { true: figma.children("Menu Shortcut"), false: undefined, }), - label: figma.children("Menu Label"), + label: figma.string("Label"), }, example: ({ icon, label, description, shortcut }) => ( {icon} - {label} + {label} {shortcut} {description} diff --git a/src/ui/primitives/Notification/Notification.figma.tsx b/src/ui/primitives/Notification/Notification.figma.tsx index 11b56a7..11a192f 100644 --- a/src/ui/primitives/Notification/Notification.figma.tsx +++ b/src/ui/primitives/Notification/Notification.figma.tsx @@ -1,16 +1,17 @@ import figma from "@figma/code-connect"; +import { Text, TextStrong } from "../Text/Text"; import { Notification } from "./Notification"; figma.connect(Notification, "", { props: { - title: figma.children("Text Strong"), + title: figma.string("Title"), icon: figma.boolean("Has Icon", { true: figma.instance("Icon"), false: undefined, }), isDismissible: figma.boolean("Is Dismissible"), button: figma.children("Button"), - body: figma.children("Text"), + body: figma.string("Body"), variant: figma.enum("Variant", { Message: "message", Alert: "alert", @@ -18,8 +19,8 @@ figma.connect(Notification, "", { }, example: ({ icon, isDismissible, button, body, title }) => ( - {title} - {body} + {title} + {body} {button} ), diff --git a/src/ui/primitives/Select/Select.figma.tsx b/src/ui/primitives/Select/Select.figma.tsx index acb6e17..d6bf796 100644 --- a/src/ui/primitives/Select/Select.figma.tsx +++ b/src/ui/primitives/Select/Select.figma.tsx @@ -1,6 +1,6 @@ import figma from "@figma/code-connect"; import { Field } from "../Fieldset/Fieldset"; -import { Select, SelectItem } from "./Select"; +import { Select, SelectField, SelectItem } from "./Select"; figma.connect(Select, "", { props: { @@ -29,16 +29,30 @@ figma.connect(Select, "", { ), }); -// TODO: Use Select Field figma.connect(Field, "", { props: { isDisabled: figma.enum("State", { Disabled: true }), - children: figma.children([ - "Label", - "Select", - "Description", - "Error Message", - ]), + description: figma.boolean("Has Description", { + true: figma.string("Description"), + false: undefined, + }), + label: figma.boolean("Has Label", { + true: figma.string("Label"), + false: undefined, + }), + errorMessage: figma.boolean("Has Error Message", { + true: figma.string("Error Message"), + false: undefined, + }), + select: figma.children("Select"), }, - example: ({ children }) => {children}, + example: ({ description, label, errorMessage, select }) => ( + + {select} + + ), }); diff --git a/src/ui/primitives/Text/Text.figma.tsx b/src/ui/primitives/Text/Text.figma.tsx index 439a33f..c840c2f 100644 --- a/src/ui/primitives/Text/Text.figma.tsx +++ b/src/ui/primitives/Text/Text.figma.tsx @@ -7,8 +7,6 @@ import { TextEmphasis, TextHeading, TextLink, - TextLinkList, - TextList, TextListItem, TextPrice, TextSmall, @@ -63,36 +61,11 @@ figma.connect(TextCode, "", { props: { text: figma.string("Text") }, example: ({ text }) => {text}, }); - -figma.connect(TextList, "", { - props: { - children: figma.children("Text List Item"), - title: figma.boolean("Has Title", { - true: figma.children("Text Strong"), - false: undefined, - }), - }, - example: ({ children, title }) => ( - {children} - ), -}); figma.connect(TextListItem, "", { props: { text: figma.string("Text") }, example: ({ text }) => {text}, }); -figma.connect(TextList, "", { - props: { - children: figma.children("Text Link List Item"), - title: figma.boolean("Has Title", { - true: figma.children("Text Strong"), - false: undefined, - }), - }, - example: ({ children, title }) => ( - {children} - ), -}); figma.connect(TextListItem, "", { props: { text: figma.string("Text") }, example: ({ text }) => ( diff --git a/src/ui/primitives/TextArea/TextArea.figma.tsx b/src/ui/primitives/TextArea/TextArea.figma.tsx index c14b48e..1ddc003 100644 --- a/src/ui/primitives/TextArea/TextArea.figma.tsx +++ b/src/ui/primitives/TextArea/TextArea.figma.tsx @@ -1,6 +1,6 @@ import figma from "@figma/code-connect"; import { Field } from "../Fieldset/Fieldset"; -import { TextArea } from "./TextArea"; +import { TextArea, TextAreaField } from "./TextArea"; figma.connect(TextArea, "", { props: { @@ -23,16 +23,30 @@ figma.connect(TextArea, "", { ), }); -// TODO: Use Text Area Field figma.connect(Field, "", { props: { isDisabled: figma.enum("State", { Disabled: true }), - children: figma.children([ - "Label", - "Text Area", - "Description", - "Error Message", - ]), + description: figma.boolean("Has Description", { + true: figma.string("Description"), + false: undefined, + }), + label: figma.boolean("Has Label", { + true: figma.string("Label"), + false: undefined, + }), + errorMessage: figma.boolean("Has Error Message", { + true: figma.string("Error Message"), + false: undefined, + }), + textArea: figma.children("Text Area"), }, - example: ({ children }) => {children}, + example: ({ description, label, errorMessage, textArea }) => ( + + {textArea} + + ), }); diff --git a/src/ui/primitives/Tooltip/tooltip.css b/src/ui/primitives/Tooltip/tooltip.css index 234142a..f70b13a 100644 --- a/src/ui/primitives/Tooltip/tooltip.css +++ b/src/ui/primitives/Tooltip/tooltip.css @@ -62,6 +62,7 @@ > .dialog { --dialog-padding-y: var(--sds-size-padding-lg); + box-shadow: var(--sds-effects-shadows-drop-shadow-200); padding-left: var(--sds-size-padding-md); padding-right: var(--sds-size-padding-md); width: 100%;