diff --git a/packages/tokens/src/tokens.json b/packages/tokens/src/tokens.json index b4724e634..25b12014d 100644 --- a/packages/tokens/src/tokens.json +++ b/packages/tokens/src/tokens.json @@ -873,11 +873,6 @@ "type": "color", "description": "Used for pressed interaction" }, - "neutral-400": { - "value": "{grey.400}", - "type": "color", - "description": "used for progress step (in inactive state)" - }, "neutral-500": { "value": "{grey.500}", "type": "color", @@ -891,17 +886,17 @@ "neutral-800": { "value": "{grey.800}", "type": "color", - "description": "Used for switch" + "description": "Used for switch, clearable" }, "success": { "value": "{green.550}", "type": "color", - "description": "Used for success messages" + "description": "Used for success messages, valid states" }, "error": { "value": "{red.300}", "type": "color", - "description": "Used for error messages\n" + "description": "Used for error messages, invalid states" }, "error-400": { "value": "{red.400}", @@ -992,12 +987,12 @@ "white": { "value": "{white}", "type": "color", - "description": "Used for buttons" + "description": "Used for buttons, inverted focus state" }, "accent": { "value": "{green.default}", "type": "color", - "description": "Used for brand-shape\n" + "description": "Used to highlight active/selected elements\n" }, "accent-550": { "value": "{green.550}", @@ -1029,11 +1024,6 @@ "type": "color", "description": "Used for pressed interaction" }, - "neutral-200": { - "value": "{grey.200}", - "type": "color", - "description": "Used for spinner" - }, "neutral-400": { "value": "{grey.400}", "type": "color", @@ -1074,17 +1064,12 @@ "primary": { "value": "{blue.default}", "type": "color", - "description": "Inverted background color (light mode)\nUsed for primary-button background" + "description": "Inverted background color (light mode)\nUsed for button" }, "white": { "value": "{white}", "type": "color", - "description": "Default background color (light mode)" - }, - "accent-500": { - "value": "{green.500}", - "type": "color", - "description": "Used for cta background" + "description": "Default background color (light mode) 
Used for inverted button" }, "accent-300": { "value": "{green.300}", @@ -1096,6 +1081,11 @@ "type": "color", "description": "Used for checkbox, switch" }, + "accent-500": { + "value": "{green.500}", + "type": "color", + "description": "Used for cta background" + }, "accent-550": { "value": "{green.550}", "type": "color", @@ -1139,17 +1129,12 @@ "neutral-200": { "value": "{grey.200}", "type": "color", - "description": "Additional background color (light mode) on neutral-100\nUsed for hover interaction " + "description": "Used for hover interaction " }, "neutral-300": { "value": "{grey.300}", "type": "color", - "description": "Used for flag background" - }, - "neutral-400": { - "value": "{grey.400}", - "type": "color", - "description": "Used for " + "description": "Used for flag " }, "neutral-500": { "value": "{grey.500}", @@ -1169,12 +1154,12 @@ "success": { "value": "{green.550}", "type": "color", - "description": "Used for notifications" + "description": "Used for notification, status-badge" }, "error": { "value": "{red.300}", "type": "color", - "description": "Used for notifications, badges, toolbar timer" + "description": "Used for notification, status-badge" }, "error-400": { "value": "{red.400}", @@ -1184,69 +1169,69 @@ "info": { "value": "{lightblue.500}", "type": "color", - "description": "Used for notifications" + "description": "Used for notification, status-badge" }, "warning": { "value": "{yellow.650}", "type": "color", - "description": "Used for notifications" + "description": "Used for notification, status-badge" } }, "*background-transparent": { "primary|10": { "value": "rgba({blue.default}, 0.1)", "type": "color", - "description": "Used for sd-audio (wave animation)" + "description": "Used for audio (wave animation)" }, "primary|30": { "value": "rgba({blue.default}, 0.3)", "type": "color", - "description": "Used for sd-map-marker" + "description": "Used for map-marker" }, "primary|80": { "value": "rgba({blue.default}, 0.8)", "type": "color", - "description": "Used for sd-teaser" + "description": "Used for teaser" }, "primary|90": { "value": "rgba({blue.default}, 0.9)", "type": "color", - "description": "Used for sd-teaser" + "description": "Used for teaser" }, "primary-100|80": { "value": "rgba({blue.100}, 0.8)", "type": "color", - "description": "Used for sd-teaser" + "description": "Used for teaser" }, "primary-100|90": { "value": "rgba({blue.100}, 0.9)", "type": "color", - "description": "Used for sd-teaser" + "description": "Used for teaser" }, "white|20": { "value": "rgba({white}, 0.2)", "type": "color", - "description": "Used for sd-audio (wave animation inverted)" + "description": "Used for audio (wave animation inverted)" }, "white|80": { "value": "rgba({white}, 0.8)", "type": "color", - "description": "Used for sd-teaser" + "description": "Used for teaser" }, "white|90": { "value": "rgba({white}, 0.9)", "type": "color", - "description": "Used for sd-teaser, sd-audio (wave animation)\n" + "description": "Used for teaser, audio (wave animation)\n" }, "neutral-100|80": { "value": "rgba({grey.100}, 0.8)", "type": "color", - "description": "Used for sd-teaser" + "description": "Used for teaser" }, "neutral-100|90": { "value": "rgba({grey.100}, 0.9)", "type": "color", - "description": "Used for sd-teaser" + "description": "Used for teaser" }, "primary-800|90": { "value": "rgba({blue.800}, 0.9)", @@ -1273,7 +1258,7 @@ "accent": { "value": "{green.default}", "type": "color", - "description": "Accent brand color for highlighted text" + "description": "Used for inverted hover interaction button label" }, "primary-100": { "value": "{blue.100}", @@ -1318,12 +1303,12 @@ "success": { "value": "{green.550}", "type": "color", - "description": "Used for success messages" + "description": "Used to display positive performance values" }, "error": { "value": "{red.300}", "type": "color", - "description": "Used for error messages" + "description": "Used to display negative performance values" } }, "sd-headline": { @@ -1620,75 +1605,60 @@ } }, "gradient": { - "vertical-transparent-primary-800|75": { - "value": "linear-gradient(180deg, rgba( {blue.800}, 0) 40%, rgba( {blue.800}, 0.75) 100%)", - "type": "color", - "description": "Used in sd-teaser-full-image, sd-flashcard" - }, - "vertical-primary-800|75-transparent": { - "value": "linear-gradient(0deg, rgba( {blue.800}, 0) 40%, rgba( {blue.800}, 0.75) 100%)", - "type": "color", - "description": "Used in sd-teaser-full-image -> deprecated when sd-media-teaser is merged" - }, - "vertical-transparent-white|75": { - "value": "linear-gradient(180deg, rgba({white},0) 40%, rgba({white}, 0.75) 100%)", - "type": "color", - "description": "Used in sd-teaser-full-image, sd-flashcard" - }, - "vertical-white|75-transparent": { - "value": "linear-gradient(0deg, rgba({white},0) 40%, rgba({white}, 0.75) 100%)", - "type": "color", - "description": "Used in sd-teaser-full-image, sd-flashcard" - }, "vertical-white-transparent": { "value": "linear-gradient(0deg, rgba({white}, 0) 5%, rgba({white}, 1) 20%, rgba({white}, 1) 100%)", "type": "color", - "description": "Used in sd-expandable, sd-scrollable (V.0.0.2)\n" + "description": "Used in expandable, scrollable\n" }, "vertical-black|40-transparent": { "value": "linear-gradient(0deg, rgba({black}, 0) 50%, rgba({black}, 0.4) 100%)", "type": "color", - "description": "Used in sd-scrollable" + "description": "Used in header, scrollable" }, - "horizontal-black|10-transparent": { - "value": "linear-gradient(270deg, rgba({black}, 0) 0%, rgba({black}, 0.1) 100%)", - "type": "color", - "description": "Used in sd-table (shadow)" - }, - "horizontal-transparent-black|10": { - "value": "linear-gradient(90deg, rgba({black}, 0) 0%, rgba({black}, 0.1) 100%)", + "vertical-transparent-black|40": { + "value": "linear-gradient(180deg, rgba({black}, 0) 50%, rgba({black}, 0.4) 100%)", "type": "color", - "description": "Used in sd-table (shadow)" + "description": "Used in scrollable" }, "vertical-black|10-transparent": { "value": "linear-gradient(180deg, rgba({black}, 0) 0%, rgba({black}, 0.1) 100%)", "type": "color", - "description": "Used in sd-table (shadow)" + "description": "Used in table" }, "vertical-transparent-black|10": { "value": "linear-gradient(0deg, rgba({black}, 0) 0%, rgba({black}, 0.1) 100%)", "type": "color", "description": "Used in sd-table (shadow)" }, - "vertical-transparent-black|40": { - "value": "linear-gradient(180deg, rgba({black}, 0) 50%, rgba({black}, 0.4) 100%)", - "type": "color", - "description": "Used in sd-scrollable" - }, "vertical-transparent-white|60": { "value": "linear-gradient(180deg, rgba({white}, 0) 0%, rgba({white}, 0.6) 100%)", "type": "color", - "description": "Used in sd-teaser-media (gradient light), sd-flipcard (gradient light bottom)" + "description": "Used in teaser-media, flipcard" + }, + "vertical-white|60-transparent": { + "value": "linear-gradient(180deg, rgba( {white}, 0.6) 0%, rgba( {white}, 0) 100%)", + "type": "color", + "description": "Used in teaser-media, flipcard" }, "vertical-white|60-white|75": { "value": "linear-gradient(180deg, rgba({white}, 0.6) 0%, rgba({white}, 0.75) 100%)", "type": "color", - "description": "Used in sd-teaser-media (gradient light), sd-flipcard (gradient light bottom)" + "description": "Used in teaser-media, flipcard" + }, + "vertical-white|75-white|60": { + "value": "linear-gradient(180deg, rgba( {white}, 0.75) 0%, rgba( {white}, 0.6) 100%)", + "type": "color", + "description": "Used in teaser-media, flipcard" }, "vertical-transparent-primary-800|60": { "value": "linear-gradient(180deg, rgba( {blue.800}, 0) 0%, rgba( {blue.800}, 0.6) 100%)", "type": "color", - "description": "Used in sd-media-teaser, sd-flipcard (gradient dark bottom)" + "description": "Used in teaser-media, flipcard" + }, + "vertical-primary-800|60-transparent": { + "value": "linear-gradient(180deg, rgba( {blue.800}, 0.6) 0%, rgba( {blue.800}, 0) 100%)", + "type": "color", + "description": "Used in teaser-media, flipcard" }, "vertical-primary-800|60-primary-800|75": { "value": "linear-gradient(180deg, rgba( {blue.800}, 0.6) 0%, rgba( {blue.800}, 0.75) 100%)", @@ -1698,52 +1668,47 @@ "vertical-primary-800|75-primary-800|60": { "value": "linear-gradient(180deg, rgba( {blue.800}, 0.75) 0%, rgba( {blue.800}, 0.6) 100%)", "type": "color", - "description": "Used in sd-flipcard (gradient dark top)" - }, - "vertical-primary-800|60-transparent": { - "value": "linear-gradient(180deg, rgba( {blue.800}, 0.6) 0%, rgba( {blue.800}, 0) 100%)", - "type": "color", - "description": "Used in sd-flipcard (gradient dark top)" + "description": "Used in teaser-media, flipcard" }, - "vertical-white|75-white|60": { - "value": "linear-gradient(180deg, rgba( {white}, 0.75) 0%, rgba( {white}, 0.6) 100%)", + "vertical-transparent-white|80-white": { + "value": "linear-gradient(180deg, rgba({white}, 0) 5%, rgba({white}, 0.05) 75%, rgba({white}, 1) 100%)", "type": "color", - "description": "Used in sd-flipcard (gradient light top)" + "description": "Used in sd-scrollable (masking for top button)" }, - "vertical-white|60-transparent": { - "value": "linear-gradient(180deg, rgba( {white}, 0.6) 0%, rgba( {white}, 0) 100%)", + "vertical-white-white|80-transparent": { + "value": "linear-gradient(0deg, rgba({white}, 0) 5%, rgba({white}, 0.05) 75%, rgba({white}, 1) 100%)", "type": "color", - "description": "Used in sd-flipcard (gradient light top)" + "description": "Used in sd-scrollable (masking for bottom button)" }, "horizontal-white-white|80-transparent": { "value": "linear-gradient(270deg, rgba({white}, 0) 0%, rgba({white}, 0.05) 65%, rgba({white}, 1) 100%)", "type": "color", - "description": "Used in sd-scrollable (masking for left button)" + "description": "Used in scrollable" }, "horizontal-transparent-white|80-white": { "value": "linear-gradient(90deg, rgba({white}, 0) 15%, rgba({white}, 0.05) 75%, rgba({white}, 1) 100%)", "type": "color", - "description": "Used in sd-scrollable (masking for right button)" + "description": "Used in scrollable" }, - "vertical-transparent-white|80-white": { - "value": "linear-gradient(180deg, rgba({white}, 0) 5%, rgba({white}, 0.05) 75%, rgba({white}, 1) 100%)", + "horizontal-black|10-transparent": { + "value": "linear-gradient(270deg, rgba({black}, 0) 0%, rgba({black}, 0.1) 100%)", "type": "color", - "description": "Used in sd-scrollable (masking for top button)" + "description": "Used in table" }, - "vertical-white-white|80-transparent": { - "value": "linear-gradient(0deg, rgba({white}, 0) 5%, rgba({white}, 0.05) 75%, rgba({white}, 1) 100%)", + "horizontal-transparent-black|10": { + "value": "linear-gradient(90deg, rgba({black}, 0) 0%, rgba({black}, 0.1) 100%)", "type": "color", - "description": "Used in sd-scrollable (masking for bottom button)" + "description": "Used in table" }, "horizontal-transparent-black|40": { "value": "linear-gradient(270deg, rgba({black}, 0) 50%, rgba({black}, 0.4) 100%)", "type": "color", - "description": "Used in sd-scrollable" + "description": "Used in scrollable" }, "horizontal-black|40-transparent": { "value": "linear-gradient(90deg, rgba({black}, 0) 50%, rgba({black}, 0.4) 100%)", "type": "color", - "description": "Used in sd-scrollable" + "description": "Used in scrollable" } }, "shadow": { @@ -2010,8 +1975,6 @@ "headline.mobile.text-3xl": "S:af99950b2515359e8674a6488ac71ac5afde4c7b,", "gradient.horizontal-neutral|0-white|80": "S:fed5c3751c3ee5419eb0c576b0cc858d3b5a5532,", "gradient.horizontal-white|80-neutral|0": "S:6b14a2ae3f2da5d8440f22e2b9c7fa25de6c76a1,", - "gradient.vertical-transparent-white|75": "S:5fe04dd64b3798624cc115bacb956616aaab2c8b,", - "gradient.vertical-white|75-transparent": "S:a027eef8b1d7c9bfb75d43b2bd76401e6d0be842,", "fill.accent-300": "S:8b5ab35d255587774d0637ec6aa31c057398fac2,", "fill.primary-100": "S:1599dfcaa532d6b466d843b9b8e6e27edff1e55d,", "fill.primary-200": "S:7ee36b0635b908b61a56c322fb7ca8cd3d3da3b3,", @@ -2034,7 +1997,6 @@ "background.primary-800": "S:96e135a5dcbd04a239ecf54be371e4fcdd8eb225,", "background.neutral-100": "S:def7d3103c5f8000e411320751fd4113be923db6,", "background.neutral-200": "S:765b5473d4d82e9514a324b9272312074308d321,", - "background.neutral-400": "S:772e29fadc13cb4aecf605832e4f86ea42dc5c2d,", "background.neutral-500": "S:f7086c957b858d8981530b9f6ef2e1e98c6f0f0a,", "text.primary-100": "S:a2e2d1854d2fe61f76d9355c851837b860380cd0,", "text.primary-200": "S:75161cc122ff44bab997e75c783975fab9d863b0,", @@ -2086,7 +2048,6 @@ "icon-fill.primary-400": "S:a0df23f759f3e54800ac2b2d148d445ef8ba5f23,", "icon-fill.primary-500": "S:d13f054b41dc7aa349c73b1eac49065de8a00155,", "icon-fill.primary-800": "S:b09b81de117d466ea39600172271af7db9525828,", - "icon-fill.neutral-400": "S:5eac1b47e4397c7fc655d261239e45aabd1d15d0,", "icon-fill.neutral-500": "S:f47e02039089acc905e530a5e7f3e60626256e65,", "icon-fill.neutral-600": "S:7bdb464410724b730235c40dd0376fddd2b92587,", "icon-fill.neutral-800": "S:bd0af6baf33b45327f08fe6750113f9522bed716,", @@ -2119,7 +2080,6 @@ "background.neutral-800": "S:e4839618c32988cf5eb06583c3e77347d3b410aa,", "background.error": "S:7efe7ea7ea15d8aee9750b71b096384ab958bd35,", "icon-fill.error-400": "S:b28f05aa09e8665db752219bef3daea2f529b833,", - "border.neutral-200": "S:2cb6d1361efdbca0f2f964f7740188b1e00b073e,", "border.error-400": "S:7980386a0e6e27f55854d0587d144b120f8fa4b7,", "background.error-400": "S:5d5b122cea8619e1d8a113201eba2440868e4534,", "shadow": "S:85ebfda49814ffc5013d9d51fe3a280497009551,", @@ -2135,8 +2095,6 @@ "body.normal.mobile.text-xl": "S:c116669ee4398f5f2288f063dc3980865d23845c,", "gradient.horizontal-black|10-transparent": "S:45ad69867f4b97c2022ad39a7c35eb7e30fabdfe,", "*background-transparent.primary-800|90": "S:e23a0748a9917f54cd3a6623af0e68ebfbff7e4a,", - "gradient.vertical-transparent-primary-800|75": "S:6640acb070ae7bee8371d25ef1559ada8bca07f2,", - "gradient.vertical-primary-800|75-transparent": "S:e36bacb650701df661f8ee2a8053ffb65ca167f3,", "gradient.horizontal-white-white|80-transparent": "S:b5191cb8ca6334405fe1cf7b85781302ace583c9," } }