diff --git a/scripts/system-token/primitive.json b/scripts/system-token/primitive.json index c46354b5..66da03e1 100644 --- a/scripts/system-token/primitive.json +++ b/scripts/system-token/primitive.json @@ -56,14 +56,6 @@ "$type": "color", "$value": "#ffffff00" }, - "alpha-white-20": { - "$type": "color", - "$value": "#ffffff33" - }, - "alpha-white-30": { - "$type": "color", - "$value": "#ffffff4d" - }, "alpha-grey-100-05": { "$type": "color", "$value": "#f9fafd0d" @@ -79,14 +71,6 @@ "alpha-grey-1000-10": { "$type": "color", "$value": "#1f23291a" - }, - "alpha-grey-1000-70": { - "$type": "color", - "$value": "#1f2329b2" - }, - "alpha-grey-1000-80": { - "$type": "color", - "$value": "#1f2329cc" } }, "Blue": { diff --git a/scripts/system-token/semantic.dark.json b/scripts/system-token/semantic.dark.json index 99d266c0..4565ff9c 100644 --- a/scripts/system-token/semantic.dark.json +++ b/scripts/system-token/semantic.dark.json @@ -16,29 +16,17 @@ "$type": "color", "$value": "{Neutral.1000}" }, - "inverse": { - "$type": "color", - "$value": "{Neutral.1000}" - }, "on-fill": { "$type": "color", "$value": "{Neutral.white}" }, - "theme": { - "$type": "color", - "$value": "{Blue.500}" - }, - "theme-hover": { - "$type": "color", - "$value": "{Blue.600}" - }, "action": { "$type": "color", "$value": "{Blue.500}" }, "action-hover": { "$type": "color", - "$value": "{Blue.600}" + "$value": "{Blue.400}" }, "info": { "$type": "color", @@ -46,7 +34,7 @@ }, "info-hover": { "$type": "color", - "$value": "{Blue.600}" + "$value": "{Blue.400}" }, "success": { "$type": "color", @@ -54,7 +42,7 @@ }, "success-hover": { "$type": "color", - "$value": "{Green.700}" + "$value": "{Green.500}" }, "warning": { "$type": "color", @@ -62,7 +50,7 @@ }, "warning-hover": { "$type": "color", - "$value": "{Orange.700}" + "$value": "{Orange.500}" }, "error": { "$type": "color", @@ -72,13 +60,13 @@ "$type": "color", "$value": "{Red.400}" }, - "purple": { + "featured": { "$type": "color", "$value": "{Purple.500}" }, - "purple-hover": { + "featured-hover": { "$type": "color", - "$value": "{Purple.600}" + "$value": "{Purple.400}" } }, "Icon": { @@ -98,71 +86,13 @@ "$type": "color", "$value": "{Neutral.1000}" }, - "white": { - "$type": "color", - "$value": "{Neutral.white}" - }, - "purple-thick": { - "$type": "color", - "$value": "#ffffff" - }, - "purple-thick-hover": { - "$type": "color", - "$value": "#ffffff" - } - }, - "Border": { - "grey-primary": { - "$type": "color", - "$value": "{Neutral.100}" - }, - "grey-primary-hover": { - "$type": "color", - "$value": "{Neutral.200}" - }, - "grey-secondary": { - "$type": "color", - "$value": "{Neutral.300}" - }, - "grey-secondary-hover": { - "$type": "color", - "$value": "{Neutral.400}" - }, - "grey-tertiary": { - "$type": "color", - "$value": "{Neutral.800}" - }, - "grey-tertiary-hover": { - "$type": "color", - "$value": "{Neutral.700}" - }, - "grey-quaternary": { - "$type": "color", - "$value": "{Neutral.1000}" - }, - "grey-quaternary-hover": { - "$type": "color", - "$value": "{Neutral.900}" - }, - "transparent": { - "$type": "color", - "$value": "{Neutral.alpha-white-0}" - }, - "theme-thick": { - "$type": "color", - "$value": "{Blue.500}" - }, - "theme-thick-hover": { - "$type": "color", - "$value": "{Blue.600}" - }, "info-thick": { "$type": "color", "$value": "{Blue.500}" }, "info-thick-hover": { "$type": "color", - "$value": "{Blue.600}" + "$value": "{Blue.400}" }, "success-thick": { "$type": "color", @@ -170,7 +100,7 @@ }, "success-thick-hover": { "$type": "color", - "$value": "{Green.700}" + "$value": "{Green.500}" }, "warning-thick": { "$type": "color", @@ -178,7 +108,7 @@ }, "warning-thick-hover": { "$type": "color", - "$value": "{Orange.700}" + "$value": "{Orange.500}" }, "error-thick": { "$type": "color", @@ -188,23 +118,27 @@ "$type": "color", "$value": "{Red.400}" }, - "purple-thick": { + "featured-thick": { "$type": "color", "$value": "{Purple.500}" }, - "purple-thick-hover": { + "featured-thick-hover": { "$type": "color", - "$value": "{Purple.600}" + "$value": "{Purple.400}" + }, + "on-fill": { + "$type": "color", + "$value": "{Neutral.white}" } }, - "Fill": { + "Border": { "primary": { "$type": "color", - "$value": "{Neutral.100}" + "$value": "{Neutral.800}" }, "primary-hover": { "$type": "color", - "$value": "{Neutral.200}" + "$value": "{Neutral.700}" }, "secondary": { "$type": "color", @@ -212,88 +146,23 @@ }, "secondary-hover": { "$type": "color", - "$value": "{Neutral.400}" + "$value": "{Neutral.200}" }, "tertiary": { "$type": "color", - "$value": "{Neutral.600}" + "$value": "{Neutral.100}" }, "tertiary-hover": { - "$type": "color", - "$value": "{Neutral.500}" - }, - "quaternary": { - "$type": "color", - "$value": "{Neutral.1000}" - }, - "quaternary-hover": { - "$type": "color", - "$value": "{Neutral.900}" - }, - "transparent": { - "$type": "color", - "$value": "{Neutral.alpha-white-0}" - }, - "primary-alpha-5": { - "$type": "color", - "$value": "{Neutral.alpha-grey-100-05}", - "$description": "Used for hover state, eg. button, navigation item, menu item and grid item." - }, - "primary-alpha-5-hover": { - "$type": "color", - "$value": "{Neutral.alpha-grey-100-10}" - }, - "primary-alpha-80": { - "$type": "color", - "$value": "{Neutral.alpha-grey-1000-80}" - }, - "primary-alpha-80-hover": { - "$type": "color", - "$value": "{Neutral.alpha-grey-1000-70}" - }, - "white": { "$type": "color", "$value": "{Neutral.white}" }, - "white-alpha": { - "$type": "color", - "$value": "{Neutral.alpha-white-20}" - }, - "white-alpha-hover": { - "$type": "color", - "$value": "{Neutral.alpha-white-30}" - }, - "black": { - "$type": "color", - "$value": "{Neutral.black}" - }, - "theme-light": { - "$type": "color", - "$value": "{Blue.100}" - }, - "theme-light-hover": { - "$type": "color", - "$value": "{Blue.200}" - }, "theme-thick": { "$type": "color", "$value": "{Blue.500}" }, "theme-thick-hover": { "$type": "color", - "$value": "{Blue.400}" - }, - "theme-select": { - "$type": "color", - "$value": "{Blue.alpha-blue-500-15}" - }, - "info-light": { - "$type": "color", - "$value": "{Blue.100}" - }, - "info-light-hover": { - "$type": "color", - "$value": "{Blue.200}" + "$value": "{Blue.600}" }, "info-thick": { "$type": "color", @@ -301,15 +170,7 @@ }, "info-thick-hover": { "$type": "color", - "$value": "{Blue.600}" - }, - "success-light": { - "$type": "color", - "$value": "{Green.100}" - }, - "success-light-hover": { - "$type": "color", - "$value": "{Green.200}" + "$value": "{Blue.400}" }, "success-thick": { "$type": "color", @@ -317,15 +178,7 @@ }, "success-thick-hover": { "$type": "color", - "$value": "{Green.700}" - }, - "warning-light": { - "$type": "color", - "$value": "{Orange.100}" - }, - "warning-light-hover": { - "$type": "color", - "$value": "{Orange.200}" + "$value": "{Green.500}" }, "warning-thick": { "$type": "color", @@ -333,43 +186,155 @@ }, "warning-thick-hover": { "$type": "color", - "$value": "{Orange.700}" - }, - "error-light": { - "$type": "color", - "$value": "{Red.100}" - }, - "error-light-hover": { - "$type": "color", - "$value": "{Red.200}" + "$value": "{Orange.500}" }, "error-thick": { "$type": "color", - "$value": "{Red.600}" + "$value": "{Red.500}" }, "error-thick-hover": { + "$type": "color", + "$value": "{Red.400}" + }, + "featured-thick": { + "$type": "color", + "$value": "{Purple.500}" + }, + "featured-thick-hover": { + "$type": "color", + "$value": "{Purple.400}" + } + }, + "Fill": { + "primary": { + "$type": "color", + "$value": "{Neutral.900}" + }, + "primary-hover": { + "$type": "color", + "$value": "{Neutral.800}" + }, + "secondary": { + "$type": "color", + "$value": "{Neutral.600}" + }, + "secondary-hover": { + "$type": "color", + "$value": "{Neutral.500}" + }, + "tertiary": { + "$type": "color", + "$value": "{Neutral.300}" + }, + "tertiary-hover": { + "$type": "color", + "$value": "{Neutral.200}" + }, + "quaternary": { + "$type": "color", + "$value": "{Neutral.100}" + }, + "quaternary-hover": { + "$type": "color", + "$value": "{Neutral.white}" + }, + "content": { + "$type": "color", + "$value": "{Neutral.alpha-white-0}" + }, + "content-hover": { + "$type": "color", + "$value": "{Neutral.alpha-grey-100-05}", + "$description": "Used for hover state, eg. button, navigation item, menu item and grid item." + }, + "content-visible": { + "$type": "color", + "$value": "{Neutral.alpha-grey-100-05}", + "$description": "Used for hover state, eg. button, navigation item, menu item and grid item." + }, + "content-visible-hover": { + "$type": "color", + "$value": "{Neutral.alpha-grey-100-10}" + }, + "theme-thick": { + "$type": "color", + "$value": "{Blue.500}" + }, + "theme-thick-hover": { + "$type": "color", + "$value": "{Blue.600}" + }, + "theme-select": { + "$type": "color", + "$value": "{Blue.alpha-blue-500-15}" + }, + "info-light": { + "$type": "color", + "$value": "{Blue.200}" + }, + "info-light-hover": { + "$type": "color", + "$value": "{Blue.100}" + }, + "info-thick": { + "$type": "color", + "$value": "{Blue.500}" + }, + "info-thick-hover": { + "$type": "color", + "$value": "{Blue.400}" + }, + "success-light": { + "$type": "color", + "$value": "{Green.200}" + }, + "success-light-hover": { + "$type": "color", + "$value": "{Green.100}" + }, + "warning-light": { + "$type": "color", + "$value": "{Orange.200}" + }, + "warning-light-hover": { + "$type": "color", + "$value": "{Orange.100}" + }, + "error-light": { + "$type": "color", + "$value": "{Red.200}" + }, + "error-light-hover": { + "$type": "color", + "$value": "{Red.100}" + }, + "error-thick": { "$type": "color", "$value": "{Red.500}" }, + "error-thick-hover": { + "$type": "color", + "$value": "{Red.400}" + }, "error-select": { "$type": "color", "$value": "{Red.alpha-red-500-10}" }, - "purple-light": { - "$type": "color", - "$value": "{Purple.100}" - }, - "purple-light-hover": { + "featured-light": { "$type": "color", "$value": "{Purple.200}" }, - "purple-thick-hover": { + "featured-light-hover": { "$type": "color", - "$value": "{Purple.600}" + "$value": "{Purple.100}" }, - "purple-thick": { + "featured-thick": { "$type": "color", "$value": "{Purple.500}" + }, + "featured-thick-hover": { + "$type": "color", + "$value": "{Purple.400}" } }, "Surface": { @@ -377,6 +342,14 @@ "$type": "color", "$value": "{Neutral.900}" }, + "primary-hover": { + "$type": "color", + "$value": "{Neutral.800}" + }, + "secondary": { + "$type": "color", + "$value": "{Neutral.800}" + }, "overlay": { "$type": "color", "$value": "{Neutral.alpha-black-60}" @@ -401,529 +374,527 @@ } }, "Badge_Color": { - "Rose": { - "rose-light-1": { + "1": { + "1-1-light": { "$type": "color", - "$value": "#fcf2f2" + "$value": "{Subtle_Color.Rose.100}" }, - "rose-light-2": { + "1-2-light": { "$type": "color", - "$value": "#fae3e3" + "$value": "{Subtle_Color.Rose.200}" }, - "rose-light-3": { + "1-3-light": { "$type": "color", - "$value": "#fad9d9" + "$value": "{Subtle_Color.Rose.300}" }, - "rose-thick-1": { + "1-1-thick": { "$type": "color", - "$value": "#edadad" + "$value": "{Subtle_Color.Rose.400}" }, - "rose-thick-2": { + "1-2-thick": { "$type": "color", - "$value": "#cc4e4e" + "$value": "{Subtle_Color.Rose.500}" }, - "rose-thick-3": { + "1-3-thick": { "$type": "color", - "$value": "#702828" + "$value": "{Subtle_Color.Rose.600}" } }, - "Papaya": { - "papaya-light-1": { + "2": { + "2-1-light": { "$type": "color", - "$value": "#fcf4f0" + "$value": "{Subtle_Color.Papaya.100}" }, - "papaya-light-2": { + "2-2-light": { "$type": "color", - "$value": "#fae8de" + "$value": "{Subtle_Color.Papaya.200}" }, - "papaya-light-3": { + "2-3-light": { "$type": "color", - "$value": "#fadfd2" + "$value": "{Subtle_Color.Papaya.300}" }, - "papaya-thick-1": { + "2-1-thick": { "$type": "color", - "$value": "#f0bda3" + "$value": "{Subtle_Color.Papaya.400}" }, - "papaya-thick-2": { + "2-2-thick": { "$type": "color", - "$value": "#d67240" + "$value": "{Subtle_Color.Papaya.500}" }, - "papaya-thick-3": { + "2-3-thick": { "$type": "color", - "$value": "#6b3215" + "$value": "{Subtle_Color.Papaya.600}" } }, - "Tangerine": { - "tangerine-light-1": { + "3": { + "3-1-light": { "$type": "color", - "$value": "#fff7ed" + "$value": "{Subtle_Color.Tangerine.100}" }, - "tangerine-light-2": { + "3-2-light": { "$type": "color", - "$value": "#fcedd9" + "$value": "{Subtle_Color.Tangerine.200}" }, - "tangerine-light-3": { + "3-3-light": { "$type": "color", - "$value": "#fae5ca" + "$value": "{Subtle_Color.Tangerine.300}" }, - "tangerine-thick-1": { + "3-1-thick": { "$type": "color", - "$value": "#f2cb99" + "$value": "{Subtle_Color.Tangerine.400}" }, - "tangerine-thick-2": { + "3-2-thick": { "$type": "color", - "$value": "#db8f2c" + "$value": "{Subtle_Color.Tangerine.500}" }, - "tangerine-thick-3": { + "3-3-thick": { "$type": "color", - "$value": "#613b0a" + "$value": "{Subtle_Color.Tangerine.600}" } }, - "Mango": { - "mango-light-1": { + "4": { + "4-1-light": { "$type": "color", - "$value": "#fff9ec" + "$value": "{Subtle_Color.Mango.100}" }, - "mango-light-2": { + "4-2-light": { "$type": "color", - "$value": "#fcf1d7" + "$value": "{Subtle_Color.Mango.200}" }, - "mango-light-3": { + "4-3-light": { "$type": "color", - "$value": "#fae9c3" + "$value": "{Subtle_Color.Mango.300}" }, - "mango-thick-1": { + "4-1-thick": { "$type": "color", - "$value": "#f5d68e" + "$value": "{Subtle_Color.Mango.400}" }, - "mango-thick-2": { + "4-2-thick": { "$type": "color", - "$value": "#e0a416" + "$value": "{Subtle_Color.Mango.500}" }, - "mango-thick-3": { + "4-3-thick": { "$type": "color", - "$value": "#5c4102" + "$value": "{Subtle_Color.Mango.600}" } }, - "Lemon": { - "lemon-light-1": { + "5": { + "5-1-light": { "$type": "color", - "$value": "#fffbe8" + "$value": "{Subtle_Color.Lemon.100}" }, - "lemon-light-2": { + "5-2-light": { "$type": "color", - "$value": "#fcf5cf" + "$value": "{Subtle_Color.Lemon.200}" }, - "lemon-light-3": { + "5-3-light": { "$type": "color", - "$value": "#faefb9" + "$value": "{Subtle_Color.Lemon.300}" }, - "lemon-thick-1": { + "5-1-thick": { "$type": "color", - "$value": "#f5e282" + "$value": "{Subtle_Color.Lemon.400}" }, - "lemon-thick-2": { + "5-2-thick": { "$type": "color", - "$value": "#e0bb00" + "$value": "{Subtle_Color.Lemon.500}" }, - "lemon-thick-3": { + "5-3-thick": { "$type": "color", - "$value": "#574800" + "$value": "{Subtle_Color.Lemon.600}" } }, - "Olive": { - "olive-light-1": { + "6": { + "6-1-light": { "$type": "color", - "$value": "#f9fae6" + "$value": "{Subtle_Color.Olive.100}" }, - "olive-light-2": { + "6-2-light": { "$type": "color", - "$value": "#f6f7d0" + "$value": "{Subtle_Color.Olive.200}" }, - "olive-light-3": { + "6-3-light": { "$type": "color", - "$value": "#f0f2b3" + "$value": "{Subtle_Color.Olive.300}" }, - "olive-thick-1": { + "6-1-thick": { "$type": "color", - "$value": "#dbde83" + "$value": "{Subtle_Color.Olive.400}" }, - "olive-thick-2": { + "6-2-thick": { "$type": "color", - "$value": "#adb204" + "$value": "{Subtle_Color.Olive.500}" }, - "olive-thick-3": { + "6-3-thick": { "$type": "color", - "$value": "#4a4c03" + "$value": "{Subtle_Color.Olive.600}" } }, - "Lime": { - "lime-light-1": { + "7": { + "7-1-light": { "$type": "color", - "$value": "#f6f9e6" + "$value": "{Subtle_Color.Lime.100}" }, - "lime-light-2": { + "7-2-light": { "$type": "color", - "$value": "#eef5ce" + "$value": "{Subtle_Color.Lime.200}" }, - "lime-light-3": { + "7-3-light": { "$type": "color", - "$value": "#e7f0bb" + "$value": "{Subtle_Color.Lime.300}" }, - "lime-thick-1": { + "7-1-thick": { "$type": "color", - "$value": "#cfdb91" + "$value": "{Subtle_Color.Lime.400}" }, - "lime-thick-2": { + "7-2-thick": { "$type": "color", - "$value": "#92a822" + "$value": "{Subtle_Color.Lime.500}" }, - "lime-thick-3": { + "7-3-thick": { "$type": "color", - "$value": "#414d05" + "$value": "{Subtle_Color.Lime.600}" } }, - "Grass": { - "grass-light-1": { + "8": { + "8-1-light": { "$type": "color", - "$value": "#f4faeb" + "$value": "{Subtle_Color.Grass.100}" }, - "grass-light-2": { + "8-2-light": { "$type": "color", - "$value": "#e9f5d7" + "$value": "{Subtle_Color.Grass.200}" }, - "grass-light-3": { + "8-3-light": { "$type": "color", - "$value": "#def0c5" + "$value": "{Subtle_Color.Grass.300}" }, - "grass-thick-1": { + "8-1-thick": { "$type": "color", - "$value": "#bfd998" + "$value": "{Subtle_Color.Grass.400}" }, - "grass-thick-2": { + "8-2-thick": { "$type": "color", - "$value": "#75a828" + "$value": "{Subtle_Color.Grass.500}" }, - "grass-thick-3": { + "8-3-thick": { "$type": "color", - "$value": "#334d0c" + "$value": "{Subtle_Color.Grass.600}" } }, - "Forest": { - "forest-light-1": { + "9": { + "9-1-light": { "$type": "color", - "$value": "#f1faf0" + "$value": "{Subtle_Color.Forest.100}" }, - "forest-light-2": { + "9-2-light": { "$type": "color", - "$value": "#e2f5df" + "$value": "{Subtle_Color.Forest.200}" }, - "forest-light-3": { + "9-3-light": { "$type": "color", - "$value": "#d7f0d3" + "$value": "{Subtle_Color.Forest.300}" }, - "forest-thick-1": { + "9-1-thick": { "$type": "color", - "$value": "#a8d6a1" + "$value": "{Subtle_Color.Forest.400}" }, - "forest-thick-2": { + "9-2-thick": { "$type": "color", - "$value": "#49a33b" + "$value": "{Subtle_Color.Forest.500}" }, - "forest-thick-3": { + "9-3-thick": { "$type": "color", - "$value": "#1e4f16" + "$value": "{Subtle_Color.Forest.600}" } }, - "Jade": { - "jade-light-1": { + "10": { + "10-1-light": { "$type": "color", - "$value": "#f0faf6" + "$value": "{Subtle_Color.Jade.100}" }, - "jade-light-2": { + "10-2-light": { "$type": "color", - "$value": "#dff5eb" + "$value": "{Subtle_Color.Jade.200}" }, - "jade-light-3": { + "10-3-light": { "$type": "color", - "$value": "#cef0e1" + "$value": "{Subtle_Color.Jade.300}" }, - "jade-thick-1": { + "10-1-thick": { "$type": "color", - "$value": "#90d1b5" + "$value": "{Subtle_Color.Jade.400}" }, - "jade-thick-2": { + "10-2-thick": { "$type": "color", - "$value": "#1c9963" + "$value": "{Subtle_Color.Jade.500}" }, - "jade-thick-3": { + "10-3-thick": { "$type": "color", - "$value": "#075231" + "$value": "{Subtle_Color.Jade.600}" } }, - "Aqua": { - "aqua-light-1": { + "11": { + "11-1-light": { "$type": "color", - "$value": "#f0f9fa" + "$value": "{Subtle_Color.Aqua.100}" }, - "aqua-light-2": { + "11-2-light": { "$type": "color", - "$value": "#dff3f5" + "$value": "{Subtle_Color.Aqua.200}" }, - "aqua-light-3": { + "11-3-light": { "$type": "color", - "$value": "#ccecf0" + "$value": "{Subtle_Color.Aqua.300}" }, - "aqua-thick-1": { + "11-1-thick": { "$type": "color", - "$value": "#83ccd4" + "$value": "{Subtle_Color.Aqua.400}" }, - "aqua-thick-2": { + "11-2-thick": { "$type": "color", - "$value": "#008e9e" + "$value": "{Subtle_Color.Aqua.500}" }, - "aqua-thick-3": { + "11-3-thick": { "$type": "color", - "$value": "#004e57" + "$value": "{Subtle_Color.Aqua.600}" } }, - "Azure": { - "azure-light-1": { + "12": { + "12-1-light": { "$type": "color", - "$value": "#f0f6fa" + "$value": "{Subtle_Color.Azure.100}" }, - "azure-light-2": { + "12-2-light": { "$type": "color", - "$value": "#e1eef7" + "$value": "{Subtle_Color.Azure.200}" }, - "azure-light-3": { + "12-3-light": { "$type": "color", - "$value": "#d3e6f5" + "$value": "{Subtle_Color.Azure.300}" }, - "azure-thick-1": { + "12-1-thick": { "$type": "color", - "$value": "#88c0eb" + "$value": "{Subtle_Color.Azure.400}" }, - "azure-thick-2": { + "12-2-thick": { "$type": "color", - "$value": "#0877cc" + "$value": "{Subtle_Color.Azure.500}" }, - "azure-thick-3": { + "12-3-thick": { "$type": "color", - "$value": "#154469" + "$value": "{Subtle_Color.Azure.600}" } }, - "Denim": { - "denim-light-1": { + "13": { + "13-1-light": { "$type": "color", - "$value": "#f0f3fa" + "$value": "{Subtle_Color.Denim.100}" }, - "denim-light-2": { + "13-2-light": { "$type": "color", - "$value": "#e3ebfa" + "$value": "{Subtle_Color.Denim.200}" }, - "denim-light-3": { + "13-3-light": { "$type": "color", - "$value": "#d7e2f7" + "$value": "{Subtle_Color.Denim.300}" }, - "denim-thick-1": { + "13-1-thick": { "$type": "color", - "$value": "#9ab6ed" + "$value": "{Subtle_Color.Denim.400}" }, - "denim-thick-2": { + "13-2-thick": { "$type": "color", - "$value": "#3267d1" + "$value": "{Subtle_Color.Denim.500}" }, - "denim-thick-3": { + "13-3-thick": { "$type": "color", - "$value": "#223c70" + "$value": "{Subtle_Color.Denim.600}" } }, - "Mauve": { - "mauve-light-1": { + "14": { + "14-1-light": { "$type": "color", - "$value": "#f2f2fc" + "$value": "{Subtle_Color.Mauve.100}" }, - "mauve-thick-2": { + "14-2-light": { "$type": "color", - "$value": "#5555e0" + "$value": "{Subtle_Color.Mauve.200}" }, - "mauve-thick-3": { + "14-3-light": { "$type": "color", - "$value": "#36366b" + "$value": "{Subtle_Color.Mauve.300}" }, - "mauve-thick-1": { + "14-1-thick": { "$type": "color", - "$value": "#aeaef5" + "$value": "{Subtle_Color.Mauve.400}" + }, + "14-2-thick": { + "$type": "color", + "$value": "{Subtle_Color.Mauve.500}" + }, + "14-3-thick": { + "$type": "color", + "$value": "{Subtle_Color.Mauve.600}" } }, - "Lavender": { - "lavender-light-1": { + "15": { + "15-1-light": { "$type": "color", - "$value": "#f6f3fc" + "$value": "{Subtle_Color.Lavender.100}" }, - "lavender-light-2": { + "15-2-light": { "$type": "color", - "$value": "#ebe3fa" + "$value": "{Subtle_Color.Lavender.200}" }, - "lavender-light-3": { + "15-3-light": { "$type": "color", - "$value": "#e4daf7" + "$value": "{Subtle_Color.Lavender.300}" }, - "lavender-thick-1": { + "15-1-thick": { "$type": "color", - "$value": "#c1aaf0" + "$value": "{Subtle_Color.Lavender.400}" }, - "lavender-thick-2": { + "15-2-thick": { "$type": "color", - "$value": "#8153db" + "$value": "{Subtle_Color.Lavender.500}" }, - "lavender-thick-3": { + "15-3-thick": { "$type": "color", - "$value": "#462f75" + "$value": "{Subtle_Color.Lavender.600}" } }, - "Lilac": { - "liliac-light-1": { + "16": { + "16-1-light": { "$type": "color", - "$value": "#f7f0fa" + "$value": "{Subtle_Color.Lilac.100}" }, - "liliac-light-2": { + "16-2-light": { "$type": "color", - "$value": "#f0e1f7" + "$value": "{Subtle_Color.Lilac.200}" }, - "liliac-light-3": { + "16-3-light": { "$type": "color", - "$value": "#edd7f7" + "$value": "{Subtle_Color.Lilac.300}" }, - "liliac-thick-1": { + "16-1-thick": { "$type": "color", - "$value": "#d3a9e8" + "$value": "{Subtle_Color.Lilac.400}" }, - "liliac-thick-2": { + "16-2-thick": { "$type": "color", - "$value": "#9e4cc7" + "$value": "{Subtle_Color.Lilac.500}" }, - "liliac-thick-3": { + "16-3-thick": { "$type": "color", - "$value": "#562d6b" + "$value": "{Subtle_Color.Lilac.600}" } }, - "Mallow": { - "mallow-light-1": { + "17": { + "17-1-light": { "$type": "color", - "$value": "#faf0fa" + "$value": "{Subtle_Color.Mallow.100}" }, - "mallow-light-2": { + "17-2-light": { "$type": "color", - "$value": "#f5e1f4" + "$value": "{Subtle_Color.Mallow.200}" }, - "mallow-light-3": { + "17-3-light": { "$type": "color", - "$value": "#f5d7f4" + "$value": "{Subtle_Color.Mallow.300}" }, - "mallow-thick-1": { + "17-1-thick": { "$type": "color", - "$value": "#dea4dc" + "$value": "{Subtle_Color.Mallow.400}" }, - "mallow-thick-2": { + "17-2-thick": { "$type": "color", - "$value": "#b240af" + "$value": "{Subtle_Color.Mallow.500}" }, - "mallow-thick-3": { + "17-3-thick": { "$type": "color", - "$value": "#632861" + "$value": "{Subtle_Color.Mallow.600}" } }, - "Camellia": { - "camellia-light-1": { + "18": { + "18-1-light": { "$type": "color", - "$value": "#f9eff3" + "$value": "{Subtle_Color.Camellia.100}" }, - "camellia-light-2": { + "18-2-light": { "$type": "color", - "$value": "#f7e1eb" + "$value": "{Subtle_Color.Camellia.200}" }, - "camellia-light-3": { + "18-3-light": { "$type": "color", - "$value": "#f7d7e5" + "$value": "{Subtle_Color.Camellia.300}" }, - "camellia-thick-1": { + "18-1-thick": { "$type": "color", - "$value": "#e5a3c0" + "$value": "{Subtle_Color.Camellia.400}" }, - "camellia-thick-2": { + "18-2-thick": { "$type": "color", - "$value": "#c24279" + "$value": "{Subtle_Color.Camellia.500}" }, - "camellia-thick-3": { + "18-3-thick": { "$type": "color", - "$value": "#6e2343" + "$value": "{Subtle_Color.Camellia.600}" } }, - "Smoke": { - "smoke-light-1": { + "19": { + "19-1-light": { "$type": "color", - "$value": "#f5f5f5" + "$value": "{Subtle_Color.Smoke.100}" }, - "smoke-light-2": { + "19-2-light": { "$type": "color", - "$value": "#e8e8e8" + "$value": "{Subtle_Color.Smoke.200}" }, - "smoke-light-3": { + "19-3-light": { "$type": "color", - "$value": "#dedede" + "$value": "{Subtle_Color.Smoke.300}" }, - "smoke-thick-1": { + "19-1-thick": { "$type": "color", - "$value": "#b8b8b8" + "$value": "{Subtle_Color.Smoke.400}" }, - "smoke-thick-2": { + "19-2-thick": { "$type": "color", - "$value": "#6e6e6e" + "$value": "{Subtle_Color.Smoke.500}" }, - "smoke-thick-3": { + "19-3-thick": { "$type": "color", - "$value": "#404040" + "$value": "{Subtle_Color.Smoke.600}" } }, - "Iron": { - "icon-light-1": { + "20": { + "20-1-light": { "$type": "color", - "$value": "#f2f4f7" + "$value": "{Subtle_Color.Iron.100}" }, - "icon-light-2": { + "20-2-light": { "$type": "color", - "$value": "#e6e9f0" + "$value": "{Subtle_Color.Iron.200}" }, - "icon-light-3": { + "20-3-light": { "$type": "color", - "$value": "#dadee5" + "$value": "{Subtle_Color.Iron.300}" }, - "icon-thick-1": { + "20-1-thick": { "$type": "color", - "$value": "#b0b5bf" + "$value": "{Subtle_Color.Iron.400}" }, - "icon-thick-2": { + "20-2-thick": { "$type": "color", - "$value": "#666f80" + "$value": "{Subtle_Color.Iron.500}" }, - "icon-thick-3": { + "20-3-thick": { "$type": "color", - "$value": "#394152" + "$value": "{Subtle_Color.Iron.600}" } } }, - "Shadow": { - "sm": { - "$type": "dimension", - "$value": "0px" - }, - "md": { - "$type": "dimension", - "$value": "0px" - } - }, "Brand": { "Skyline": { "$type": "color", diff --git a/scripts/system-token/semantic.light.json b/scripts/system-token/semantic.light.json index 4e6b0543..fabd6ce7 100644 --- a/scripts/system-token/semantic.light.json +++ b/scripts/system-token/semantic.light.json @@ -16,37 +16,25 @@ "$type": "color", "$value": "{Neutral.200}" }, - "inverse": { - "$type": "color", - "$value": "{Neutral.white}" - }, "on-fill": { "$type": "color", "$value": "{Neutral.white}" }, - "theme": { - "$type": "color", - "$value": "{Blue.500}" - }, - "theme-hover": { - "$type": "color", - "$value": "{Blue.600}" - }, "action": { "$type": "color", - "$value": "{Blue.500}" + "$value": "{Blue.600}" }, "action-hover": { "$type": "color", - "$value": "{Blue.600}" + "$value": "{Blue.700}" }, "info": { "$type": "color", - "$value": "{Blue.500}" + "$value": "{Blue.600}" }, "info-hover": { "$type": "color", - "$value": "{Blue.600}" + "$value": "{Blue.700}" }, "success": { "$type": "color", @@ -72,11 +60,11 @@ "$type": "color", "$value": "{Red.700}" }, - "purple": { + "featured": { "$type": "color", "$value": "{Purple.500}" }, - "purple-hover": { + "featured-hover": { "$type": "color", "$value": "{Purple.600}" } @@ -98,55 +86,75 @@ "$type": "color", "$value": "{Neutral.200}" }, - "white": { + "info-thick": { "$type": "color", - "$value": "{Neutral.white}" + "$value": "{Blue.600}" }, - "purple-thick": { + "info-thick-hover": { + "$type": "color", + "$value": "{Blue.700}" + }, + "success-thick": { + "$type": "color", + "$value": "{Green.600}" + }, + "success-thick-hover": { + "$type": "color", + "$value": "{Green.700}" + }, + "warning-thick": { + "$type": "color", + "$value": "{Orange.600}" + }, + "warning-thick-hover": { + "$type": "color", + "$value": "{Orange.700}" + }, + "error-thick": { + "$type": "color", + "$value": "{Red.600}" + }, + "error-thick-hover": { + "$type": "color", + "$value": "{Red.700}" + }, + "featured-thick": { "$type": "color", "$value": "{Purple.500}" }, - "purple-thick-hover": { + "featured-thick-hover": { "$type": "color", "$value": "{Purple.600}" + }, + "on-fill": { + "$type": "color", + "$value": "{Neutral.white}" } }, "Border": { - "grey-primary": { - "$type": "color", - "$value": "{Neutral.1000}" - }, - "grey-primary-hover": { - "$type": "color", - "$value": "{Neutral.900}" - }, - "grey-secondary": { - "$type": "color", - "$value": "{Neutral.800}" - }, - "grey-secondary-hover": { - "$type": "color", - "$value": "{Neutral.700}" - }, - "grey-tertiary": { - "$type": "color", - "$value": "{Neutral.300}" - }, - "grey-tertiary-hover": { - "$type": "color", - "$value": "{Neutral.400}" - }, - "grey-quaternary": { - "$type": "color", - "$value": "{Neutral.100}" - }, - "grey-quaternary-hover": { + "primary": { "$type": "color", "$value": "{Neutral.200}" }, - "transparent": { + "primary-hover": { "$type": "color", - "$value": "{Neutral.alpha-white-0}" + "$value": "{Neutral.300}" + }, + "secondary": { + "$type": "color", + "$value": "{Neutral.800}" + }, + "secondary-hover": { + "$type": "color", + "$value": "{Neutral.700}" + }, + "tertiary": { + "$type": "color", + "$value": "{Neutral.1000}" + }, + "tertiary-hover": { + "$type": "color", + "$value": "{Neutral.900}" }, "theme-thick": { "$type": "color", @@ -188,11 +196,11 @@ "$type": "color", "$value": "{Red.700}" }, - "purple-thick": { + "featured-thick": { "$type": "color", "$value": "{Purple.500}" }, - "purple-thick-hover": { + "featured-thick-hover": { "$type": "color", "$value": "{Purple.600}" } @@ -200,81 +208,54 @@ "Fill": { "primary": { "$type": "color", - "$value": "{Neutral.1000}" + "$value": "{Neutral.100}" }, "primary-hover": { "$type": "color", - "$value": "{Neutral.900}" + "$value": "{Neutral.200}" }, "secondary": { "$type": "color", - "$value": "{Neutral.600}" + "$value": "{Neutral.300}" }, "secondary-hover": { "$type": "color", - "$value": "{Neutral.500}" + "$value": "{Neutral.400}" }, "tertiary": { "$type": "color", - "$value": "{Neutral.300}" + "$value": "{Neutral.600}" }, "tertiary-hover": { "$type": "color", - "$value": "{Neutral.400}" + "$value": "{Neutral.500}" }, "quaternary": { "$type": "color", - "$value": "{Neutral.100}" + "$value": "{Neutral.1000}" }, "quaternary-hover": { "$type": "color", - "$value": "{Neutral.200}" + "$value": "{Neutral.900}" }, - "transparent": { + "content": { "$type": "color", "$value": "{Neutral.alpha-white-0}" }, - "primary-alpha-5": { + "content-hover": { "$type": "color", "$value": "{Neutral.alpha-grey-1000-05}", "$description": "Used for hover state, eg. button, navigation item, menu item and grid item." }, - "primary-alpha-5-hover": { + "content-visible": { + "$type": "color", + "$value": "{Neutral.alpha-grey-1000-05}", + "$description": "Used for hover state, eg. button, navigation item, menu item and grid item." + }, + "content-visible-hover": { "$type": "color", "$value": "{Neutral.alpha-grey-1000-10}" }, - "primary-alpha-80": { - "$type": "color", - "$value": "{Neutral.alpha-grey-1000-80}" - }, - "primary-alpha-80-hover": { - "$type": "color", - "$value": "{Neutral.alpha-grey-1000-70}" - }, - "white": { - "$type": "color", - "$value": "{Neutral.white}" - }, - "white-alpha": { - "$type": "color", - "$value": "{Neutral.alpha-white-20}" - }, - "white-alpha-hover": { - "$type": "color", - "$value": "{Neutral.alpha-white-30}" - }, - "black": { - "$type": "color", - "$value": "{Neutral.black}" - }, - "theme-light": { - "$type": "color", - "$value": "{Blue.100}" - }, - "theme-light-hover": { - "$type": "color", - "$value": "{Blue.200}" - }, "theme-thick": { "$type": "color", "$value": "{Blue.500}" @@ -311,14 +292,6 @@ "$type": "color", "$value": "{Green.200}" }, - "success-thick": { - "$type": "color", - "$value": "{Green.600}" - }, - "success-thick-hover": { - "$type": "color", - "$value": "{Green.700}" - }, "warning-light": { "$type": "color", "$value": "{Orange.100}" @@ -327,14 +300,6 @@ "$type": "color", "$value": "{Orange.200}" }, - "warning-thick": { - "$type": "color", - "$value": "{Orange.600}" - }, - "warning-thick-hover": { - "$type": "color", - "$value": "{Orange.700}" - }, "error-light": { "$type": "color", "$value": "{Red.100}" @@ -355,21 +320,21 @@ "$type": "color", "$value": "{Red.alpha-red-500-10}" }, - "purple-light": { + "featured-light": { "$type": "color", "$value": "{Purple.100}" }, - "purple-light-hover": { + "featured-light-hover": { "$type": "color", "$value": "{Purple.200}" }, - "purple-thick-hover": { - "$type": "color", - "$value": "{Purple.600}" - }, - "purple-thick": { + "featured-thick": { "$type": "color", "$value": "{Purple.500}" + }, + "featured-thick-hover": { + "$type": "color", + "$value": "{Purple.600}" } }, "Surface": { @@ -377,6 +342,14 @@ "$type": "color", "$value": "{Neutral.white}" }, + "primary-hover": { + "$type": "color", + "$value": "{Neutral.100}" + }, + "secondary": { + "$type": "color", + "$value": "{Neutral.1000}" + }, "overlay": { "$type": "color", "$value": "{Neutral.alpha-black-60}" @@ -401,529 +374,527 @@ } }, "Badge_Color": { - "Rose": { - "rose-light-1": { + "1": { + "1-1-light": { "$type": "color", "$value": "{Subtle_Color.Rose.100}" }, - "rose-light-2": { + "1-2-light": { "$type": "color", "$value": "{Subtle_Color.Rose.200}" }, - "rose-light-3": { + "1-3-light": { "$type": "color", "$value": "{Subtle_Color.Rose.300}" }, - "rose-thick-1": { + "1-1-thick": { "$type": "color", "$value": "{Subtle_Color.Rose.400}" }, - "rose-thick-2": { + "1-2-thick": { "$type": "color", "$value": "{Subtle_Color.Rose.500}" }, - "rose-thick-3": { + "1-3-thick": { "$type": "color", "$value": "{Subtle_Color.Rose.600}" } }, - "Papaya": { - "papaya-light-1": { + "2": { + "2-1-light": { "$type": "color", "$value": "{Subtle_Color.Papaya.100}" }, - "papaya-light-2": { + "2-2-light": { "$type": "color", "$value": "{Subtle_Color.Papaya.200}" }, - "papaya-light-3": { + "2-3-light": { "$type": "color", "$value": "{Subtle_Color.Papaya.300}" }, - "papaya-thick-1": { + "2-1-thick": { "$type": "color", "$value": "{Subtle_Color.Papaya.400}" }, - "papaya-thick-2": { + "2-2-thick": { "$type": "color", "$value": "{Subtle_Color.Papaya.500}" }, - "papaya-thick-3": { + "2-3-thick": { "$type": "color", "$value": "{Subtle_Color.Papaya.600}" } }, - "Tangerine": { - "tangerine-light-1": { + "3": { + "3-1-light": { "$type": "color", "$value": "{Subtle_Color.Tangerine.100}" }, - "tangerine-light-2": { + "3-2-light": { "$type": "color", "$value": "{Subtle_Color.Tangerine.200}" }, - "tangerine-light-3": { + "3-3-light": { "$type": "color", "$value": "{Subtle_Color.Tangerine.300}" }, - "tangerine-thick-1": { + "3-1-thick": { "$type": "color", "$value": "{Subtle_Color.Tangerine.400}" }, - "tangerine-thick-2": { + "3-2-thick": { "$type": "color", "$value": "{Subtle_Color.Tangerine.500}" }, - "tangerine-thick-3": { + "3-3-thick": { "$type": "color", "$value": "{Subtle_Color.Tangerine.600}" } }, - "Mango": { - "mango-light-1": { + "4": { + "4-1-light": { "$type": "color", "$value": "{Subtle_Color.Mango.100}" }, - "mango-light-2": { + "4-2-light": { "$type": "color", "$value": "{Subtle_Color.Mango.200}" }, - "mango-light-3": { + "4-3-light": { "$type": "color", "$value": "{Subtle_Color.Mango.300}" }, - "mango-thick-1": { + "4-1-thick": { "$type": "color", "$value": "{Subtle_Color.Mango.400}" }, - "mango-thick-2": { + "4-2-thick": { "$type": "color", "$value": "{Subtle_Color.Mango.500}" }, - "mango-thick-3": { + "4-3-thick": { "$type": "color", "$value": "{Subtle_Color.Mango.600}" } }, - "Lemon": { - "lemon-light-1": { + "5": { + "5-1-light": { "$type": "color", "$value": "{Subtle_Color.Lemon.100}" }, - "lemon-light-2": { + "5-2-light": { "$type": "color", "$value": "{Subtle_Color.Lemon.200}" }, - "lemon-light-3": { + "5-3-light": { "$type": "color", "$value": "{Subtle_Color.Lemon.300}" }, - "lemon-thick-1": { + "5-1-thick": { "$type": "color", "$value": "{Subtle_Color.Lemon.400}" }, - "lemon-thick-2": { + "5-2-thick": { "$type": "color", "$value": "{Subtle_Color.Lemon.500}" }, - "lemon-thick-3": { + "5-3-thick": { "$type": "color", "$value": "{Subtle_Color.Lemon.600}" } }, - "Olive": { - "olive-light-1": { + "6": { + "6-1-light": { "$type": "color", "$value": "{Subtle_Color.Olive.100}" }, - "olive-light-2": { + "6-2-light": { "$type": "color", "$value": "{Subtle_Color.Olive.200}" }, - "olive-light-3": { + "6-3-light": { "$type": "color", "$value": "{Subtle_Color.Olive.300}" }, - "olive-thick-1": { + "6-1-thick": { "$type": "color", "$value": "{Subtle_Color.Olive.400}" }, - "olive-thick-2": { + "6-2-thick": { "$type": "color", "$value": "{Subtle_Color.Olive.500}" }, - "olive-thick-3": { + "6-3-thick": { "$type": "color", "$value": "{Subtle_Color.Olive.600}" } }, - "Lime": { - "lime-light-1": { + "7": { + "7-1-light": { "$type": "color", "$value": "{Subtle_Color.Lime.100}" }, - "lime-light-2": { + "7-2-light": { "$type": "color", "$value": "{Subtle_Color.Lime.200}" }, - "lime-light-3": { + "7-3-light": { "$type": "color", "$value": "{Subtle_Color.Lime.300}" }, - "lime-thick-1": { + "7-1-thick": { "$type": "color", "$value": "{Subtle_Color.Lime.400}" }, - "lime-thick-2": { + "7-2-thick": { "$type": "color", "$value": "{Subtle_Color.Lime.500}" }, - "lime-thick-3": { + "7-3-thick": { "$type": "color", "$value": "{Subtle_Color.Lime.600}" } }, - "Grass": { - "grass-light-1": { + "8": { + "8-1-light": { "$type": "color", "$value": "{Subtle_Color.Grass.100}" }, - "grass-light-2": { + "8-2-light": { "$type": "color", "$value": "{Subtle_Color.Grass.200}" }, - "grass-light-3": { + "8-3-light": { "$type": "color", "$value": "{Subtle_Color.Grass.300}" }, - "grass-thick-1": { + "8-1-thick": { "$type": "color", "$value": "{Subtle_Color.Grass.400}" }, - "grass-thick-2": { + "8-2-thick": { "$type": "color", "$value": "{Subtle_Color.Grass.500}" }, - "grass-thick-3": { + "8-3-thick": { "$type": "color", "$value": "{Subtle_Color.Grass.600}" } }, - "Forest": { - "forest-light-1": { + "9": { + "9-1-light": { "$type": "color", "$value": "{Subtle_Color.Forest.100}" }, - "forest-light-2": { + "9-2-light": { "$type": "color", "$value": "{Subtle_Color.Forest.200}" }, - "forest-light-3": { + "9-3-light": { "$type": "color", "$value": "{Subtle_Color.Forest.300}" }, - "forest-thick-1": { + "9-1-thick": { "$type": "color", "$value": "{Subtle_Color.Forest.400}" }, - "forest-thick-2": { + "9-2-thick": { "$type": "color", "$value": "{Subtle_Color.Forest.500}" }, - "forest-thick-3": { + "9-3-thick": { "$type": "color", "$value": "{Subtle_Color.Forest.600}" } }, - "Jade": { - "jade-light-1": { + "10": { + "10-1-light": { "$type": "color", "$value": "{Subtle_Color.Jade.100}" }, - "jade-light-2": { + "10-2-light": { "$type": "color", "$value": "{Subtle_Color.Jade.200}" }, - "jade-light-3": { + "10-3-light": { "$type": "color", "$value": "{Subtle_Color.Jade.300}" }, - "jade-thick-1": { + "10-1-thick": { "$type": "color", "$value": "{Subtle_Color.Jade.400}" }, - "jade-thick-2": { + "10-2-thick": { "$type": "color", "$value": "{Subtle_Color.Jade.500}" }, - "jade-thick-3": { + "10-3-thick": { "$type": "color", "$value": "{Subtle_Color.Jade.600}" } }, - "Aqua": { - "aqua-light-1": { + "11": { + "11-1-light": { "$type": "color", "$value": "{Subtle_Color.Aqua.100}" }, - "aqua-light-2": { + "11-2-light": { "$type": "color", "$value": "{Subtle_Color.Aqua.200}" }, - "aqua-light-3": { + "11-3-light": { "$type": "color", "$value": "{Subtle_Color.Aqua.300}" }, - "aqua-thick-1": { + "11-1-thick": { "$type": "color", "$value": "{Subtle_Color.Aqua.400}" }, - "aqua-thick-2": { + "11-2-thick": { "$type": "color", "$value": "{Subtle_Color.Aqua.500}" }, - "aqua-thick-3": { + "11-3-thick": { "$type": "color", "$value": "{Subtle_Color.Aqua.600}" } }, - "Azure": { - "azure-light-1": { + "12": { + "12-1-light": { "$type": "color", "$value": "{Subtle_Color.Azure.100}" }, - "azure-light-2": { + "12-2-light": { "$type": "color", "$value": "{Subtle_Color.Azure.200}" }, - "azure-light-3": { + "12-3-light": { "$type": "color", "$value": "{Subtle_Color.Azure.300}" }, - "azure-thick-1": { + "12-1-thick": { "$type": "color", "$value": "{Subtle_Color.Azure.400}" }, - "azure-thick-2": { + "12-2-thick": { "$type": "color", "$value": "{Subtle_Color.Azure.500}" }, - "azure-thick-3": { + "12-3-thick": { "$type": "color", "$value": "{Subtle_Color.Azure.600}" } }, - "Denim": { - "denim-light-1": { + "13": { + "13-1-light": { "$type": "color", "$value": "{Subtle_Color.Denim.100}" }, - "denim-light-2": { + "13-2-light": { "$type": "color", "$value": "{Subtle_Color.Denim.200}" }, - "denim-light-3": { + "13-3-light": { "$type": "color", "$value": "{Subtle_Color.Denim.300}" }, - "denim-thick-1": { + "13-1-thick": { "$type": "color", "$value": "{Subtle_Color.Denim.400}" }, - "denim-thick-2": { + "13-2-thick": { "$type": "color", "$value": "{Subtle_Color.Denim.500}" }, - "denim-thick-3": { + "13-3-thick": { "$type": "color", "$value": "{Subtle_Color.Denim.600}" } }, - "Mauve": { - "mauve-light-1": { + "14": { + "14-1-light": { "$type": "color", "$value": "{Subtle_Color.Mauve.100}" }, - "mauve-thick-2": { + "14-2-light": { + "$type": "color", + "$value": "{Subtle_Color.Mauve.200}" + }, + "14-3-light": { + "$type": "color", + "$value": "{Subtle_Color.Mauve.300}" + }, + "14-1-thick": { + "$type": "color", + "$value": "{Subtle_Color.Mauve.400}" + }, + "14-2-thick": { "$type": "color", "$value": "{Subtle_Color.Mauve.500}" }, - "mauve-thick-3": { + "14-3-thick": { "$type": "color", "$value": "{Subtle_Color.Mauve.600}" - }, - "mauve-thick-1": { - "$type": "color", - "$value": "{Subtle_Color.Mauve.400}" } }, - "Lavender": { - "lavender-light-1": { + "15": { + "15-1-light": { "$type": "color", "$value": "{Subtle_Color.Lavender.100}" }, - "lavender-light-2": { + "15-2-light": { "$type": "color", "$value": "{Subtle_Color.Lavender.200}" }, - "lavender-light-3": { + "15-3-light": { "$type": "color", "$value": "{Subtle_Color.Lavender.300}" }, - "lavender-thick-1": { + "15-1-thick": { "$type": "color", "$value": "{Subtle_Color.Lavender.400}" }, - "lavender-thick-2": { + "15-2-thick": { "$type": "color", "$value": "{Subtle_Color.Lavender.500}" }, - "lavender-thick-3": { + "15-3-thick": { "$type": "color", "$value": "{Subtle_Color.Lavender.600}" } }, - "Lilac": { - "liliac-light-1": { + "16": { + "16-1-light": { "$type": "color", "$value": "{Subtle_Color.Lilac.100}" }, - "liliac-light-2": { + "16-2-light": { "$type": "color", "$value": "{Subtle_Color.Lilac.200}" }, - "liliac-light-3": { + "16-3-light": { "$type": "color", "$value": "{Subtle_Color.Lilac.300}" }, - "liliac-thick-1": { + "16-1-thick": { "$type": "color", "$value": "{Subtle_Color.Lilac.400}" }, - "liliac-thick-2": { + "16-2-thick": { "$type": "color", "$value": "{Subtle_Color.Lilac.500}" }, - "liliac-thick-3": { + "16-3-thick": { "$type": "color", "$value": "{Subtle_Color.Lilac.600}" } }, - "Mallow": { - "mallow-light-1": { + "17": { + "17-1-light": { "$type": "color", "$value": "{Subtle_Color.Mallow.100}" }, - "mallow-light-2": { + "17-2-light": { "$type": "color", "$value": "{Subtle_Color.Mallow.200}" }, - "mallow-light-3": { + "17-3-light": { "$type": "color", "$value": "{Subtle_Color.Mallow.300}" }, - "mallow-thick-1": { + "17-1-thick": { "$type": "color", "$value": "{Subtle_Color.Mallow.400}" }, - "mallow-thick-2": { + "17-2-thick": { "$type": "color", "$value": "{Subtle_Color.Mallow.500}" }, - "mallow-thick-3": { + "17-3-thick": { "$type": "color", "$value": "{Subtle_Color.Mallow.600}" } }, - "Camellia": { - "camellia-light-1": { + "18": { + "18-1-light": { "$type": "color", "$value": "{Subtle_Color.Camellia.100}" }, - "camellia-light-2": { + "18-2-light": { "$type": "color", "$value": "{Subtle_Color.Camellia.200}" }, - "camellia-light-3": { + "18-3-light": { "$type": "color", "$value": "{Subtle_Color.Camellia.300}" }, - "camellia-thick-1": { + "18-1-thick": { "$type": "color", "$value": "{Subtle_Color.Camellia.400}" }, - "camellia-thick-2": { + "18-2-thick": { "$type": "color", "$value": "{Subtle_Color.Camellia.500}" }, - "camellia-thick-3": { + "18-3-thick": { "$type": "color", "$value": "{Subtle_Color.Camellia.600}" } }, - "Smoke": { - "smoke-light-1": { + "19": { + "19-1-light": { "$type": "color", "$value": "{Subtle_Color.Smoke.100}" }, - "smoke-light-2": { + "19-2-light": { "$type": "color", "$value": "{Subtle_Color.Smoke.200}" }, - "smoke-light-3": { + "19-3-light": { "$type": "color", "$value": "{Subtle_Color.Smoke.300}" }, - "smoke-thick-1": { + "19-1-thick": { "$type": "color", "$value": "{Subtle_Color.Smoke.400}" }, - "smoke-thick-2": { + "19-2-thick": { "$type": "color", "$value": "{Subtle_Color.Smoke.500}" }, - "smoke-thick-3": { + "19-3-thick": { "$type": "color", "$value": "{Subtle_Color.Smoke.600}" } }, - "Iron": { - "icon-light-1": { + "20": { + "20-1-light": { "$type": "color", "$value": "{Subtle_Color.Iron.100}" }, - "icon-light-2": { + "20-2-light": { "$type": "color", "$value": "{Subtle_Color.Iron.200}" }, - "icon-light-3": { + "20-3-light": { "$type": "color", "$value": "{Subtle_Color.Iron.300}" }, - "icon-thick-1": { + "20-1-thick": { "$type": "color", "$value": "{Subtle_Color.Iron.400}" }, - "icon-thick-2": { + "20-2-thick": { "$type": "color", "$value": "{Subtle_Color.Iron.500}" }, - "icon-thick-3": { + "20-3-thick": { "$type": "color", "$value": "{Subtle_Color.Iron.600}" } } }, - "Shadow": { - "sm": { - "$type": "dimension", - "$value": "0px" - }, - "md": { - "$type": "dimension", - "$value": "0px" - } - }, "Brand": { "Skyline": { "$type": "color", diff --git a/src/components/_shared/file-dropzone/FileDropzone.tsx b/src/components/_shared/file-dropzone/FileDropzone.tsx index aab7e49a..24a9cc61 100644 --- a/src/components/_shared/file-dropzone/FileDropzone.tsx +++ b/src/components/_shared/file-dropzone/FileDropzone.tsx @@ -10,7 +10,7 @@ interface FileDropzoneProps { placeholder?: string | React.ReactNode; } -function FileDropzone({ onChange, accept, multiple, disabled, placeholder }: FileDropzoneProps) { +function FileDropzone ({ onChange, accept, multiple, disabled, placeholder }: FileDropzoneProps) { const { t } = useTranslation(); const [dragging, setDragging] = useState(false); const fileInputRef = useRef(null); @@ -79,12 +79,12 @@ function FileDropzone({ onChange, accept, multiple, disabled, placeholder }: Fil >
-
+
{placeholder || t('fileDropzone.dropFile')}
(({ node }, ref) => { - if(import.meta.env.DEV) { - return ( -
- (({ node, children }, ref) => { + const type = node.type; + + if (import.meta.env.DEV) { + if (type === 'block_not_found') { + return ( +
-
{`Block not found, id is ${node.blockId}`}
-
- {'It might be deleted or moved to another place but the children map is still referencing it.'} -
- -
- ); + +
{`Block not found, id is ${node.blockId}`}
+
+ {'It might be deleted or moved to another place but the children map is still referencing it.'} +
+ +
+ ); + } + + return {children}; } return
; diff --git a/src/components/ui/avatar.tsx b/src/components/ui/avatar.tsx index f18d3c21..55333c87 100644 --- a/src/components/ui/avatar.tsx +++ b/src/components/ui/avatar.tsx @@ -14,7 +14,7 @@ const avatarVariants = cva( }, variant: { default: 'bg-transparent', - outline: 'border-[1.5px] bg-transparent border-border-grey-tertiary', + outline: 'border-[1.5px] bg-transparent border-border-primary', }, size: { sm: 'h-6 text-xs leading-[16px] text-icon-primary font-normal', @@ -79,7 +79,7 @@ function AvatarFallback ({ data-slot="avatar-fallback" className={cn( 'flex text-icon-primary w-full h-full items-center justify-center', - isString ? 'bg-fill-tertiary' : '', + isString ? 'bg-fill-secondary' : '', className, )} {...props} diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx index 8fef04fc..f5c92b81 100644 --- a/src/components/ui/button.tsx +++ b/src/components/ui/button.tsx @@ -11,16 +11,16 @@ const buttonVariants = cva( variants: { variant: { default: - 'bg-fill-theme-thick text-text-on-fill hover:bg-fill-theme-thick-hover disabled:bg-fill-primary-alpha-5 disabled:text-text-tertiary', + 'bg-fill-theme-thick text-text-on-fill hover:bg-fill-theme-thick-hover disabled:bg-fill-content-hover disabled:text-text-tertiary', destructive: - 'bg-fill-error-thick text-text-on-fill hover:bg-fill-error-thick-hover focus-visible:ring-border-error-thick disabled:bg-fill-primary-alpha-5 disabled:text-text-tertiary', + 'bg-fill-error-thick text-text-on-fill hover:bg-fill-error-thick-hover focus-visible:ring-border-error-thick disabled:bg-fill-content-hover disabled:text-text-tertiary', outline: - 'border border-border-grey-tertiary bg-transparent text-text-primary hover:bg-fill-primary-alpha-5 hover:border-border-grey-tertiary-hover disabled:text-text-tertiary', + 'border border-border-primary bg-fill-content text-text-primary hover:bg-fill-content-hover hover:border-border-primary-hover disabled:text-text-tertiary', 'destructive-outline': - 'bg-transparent text-text-error hover:bg-fill-error-select hover:text-text-error-hover border border-border-error-thick hover:border-border-error-thick-hover disabled:text-text-tertiary disabled:border-border-grey-tertiary', + 'bg-fill-content text-text-error hover:bg-fill-error-select hover:text-text-error-hover border border-border-error-thick hover:border-border-error-thick-hover disabled:text-text-tertiary disabled:border-border-primary', ghost: - 'hover:bg-fill-primary-alpha-5 text-text-primary disabled:bg-fill-transparent disabled:text-text-tertiary', - link: 'hover:bg-transparent text-text-theme hover:text-text-theme-hover !h-fit', + 'hover:bg-fill-content-hover text-text-primary disabled:bg-fill-content disabled:text-text-tertiary', + link: 'hover:bg-fill-content text-text-action hover:text-text-action-hover !h-fit', loading: 'opacity-50 cursor-not-allowed', }, size: { diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx index 905811d9..d0425b80 100644 --- a/src/components/ui/dialog.tsx +++ b/src/components/ui/dialog.tsx @@ -100,7 +100,7 @@ function DialogContent ({ 'disabled:pointer-events-none disabled:text-text-tertiary', // Open state styling - 'data-[state=open]:bg-fill-tertiary data-[state=open]:text-icon-primary', + 'data-[state=open]:bg-fill-secondary data-[state=open]:text-icon-primary', // Transition 'transition-opacity', diff --git a/src/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx index 38b42d87..700b1037 100644 --- a/src/components/ui/dropdown-menu.tsx +++ b/src/components/ui/dropdown-menu.tsx @@ -101,7 +101,7 @@ function DropdownMenuItem ({ data-variant={variant} className={cn( // Focus states - 'focus:bg-fill-primary-alpha-5 focus-visible:outline-none focus:text-text-primary', + 'focus:bg-fill-primary focus-visible:outline-none focus:text-text-primary', // Destructive variant styling 'data-[variant=destructive]:text-text-error', @@ -156,7 +156,7 @@ function DropdownMenuSeparator ({ return ( ); @@ -198,8 +198,8 @@ function DropdownMenuSubTrigger ({ data-inset={inset} className={cn( // Focus and open states - 'focus:bg-fill-primary-alpha-5 focus-visible:outline-none focus:text-text-primary', - 'data-[state=open]:bg-fill-primary-alpha-5 data-[state=open]:text-text-primary', + 'focus:bg-fill-secondary focus-visible:outline-none focus:text-text-primary', + 'data-[state=open]:bg-fill-secondary data-[state=open]:text-text-primary', // Base layout and appearance 'flex cursor-pointer items-center rounded-300 px-2 py-1 min-h-[32px]', diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx index 3348c93b..f8338724 100644 --- a/src/components/ui/input.tsx +++ b/src/components/ui/input.tsx @@ -10,7 +10,7 @@ const baseInputStyles = cn( // Selection styling 'selection:bg-fill-theme-thick selection:text-text-on-fill focus:caret-fill-theme-thick', - 'bg-fill-transparent', + 'bg-fill-content', // Layout 'flex min-w-0', @@ -22,7 +22,7 @@ const baseInputStyles = cn( 'outline-none', // File input styling - 'file:inline-flex file:border-0 file:bg-fill-transparent file:text-sm file:font-medium', + 'file:inline-flex file:border-0 file:bg-fill-content file:text-sm file:font-medium', // Disabled state 'disabled:pointer-events-none disabled:cursor-not-allowed', @@ -34,13 +34,13 @@ const inputVariants = cva( variants: { variant: { // Default variant with focus styles - default: 'border-border-grey-tertiary border focus-visible:border-border-theme-thick focus-visible:ring-border-theme-thick focus-visible:ring-[0.5px] disabled:border-border-grey-tertiary disabled:bg-fill-primary-alpha-5 disabled:text-text-tertiary hover:border-border-grey-tertiary-hover', + default: 'border-border-primary border focus-visible:border-border-theme-thick focus-visible:ring-border-theme-thick focus-visible:ring-[0.5px] disabled:border-border-primary disabled:bg-fill-primary-hover disabled:text-text-tertiary hover:border-border-primary-hover', // Destructive variant for error states - destructive: 'border border-border-error-thick focus-visible:border-border-error-thick focus-visible:ring-border-error-thick focus-visible:ring-[0.5px] focus:caret-text-primary disabled:border-border-grey-tertiary disabled:bg-fill-primary-alpha-5 disabled:text-text-tertiary', + destructive: 'border border-border-error-thick focus-visible:border-border-error-thick focus-visible:ring-border-error-thick focus-visible:ring-[0.5px] focus:caret-text-primary disabled:border-border-primary disabled:bg-fill-primary-hover disabled:text-text-tertiary', // Ghost variant without visible borders - ghost: 'border-fill-transparent focus-visible:border-transparent focus-visible:ring-transparent disabled:border-fill-transparent disabled:bg-fill-transparent disabled:text-text-tertiary', + ghost: 'border-none focus-visible:border-transparent focus-visible:ring-transparent disabled:border-fill-transparent disabled:bg-fill-transparent disabled:text-text-tertiary', }, size: { // Small size input diff --git a/src/components/ui/popover.tsx b/src/components/ui/popover.tsx index 60c89ae8..30e92a2a 100644 --- a/src/components/ui/popover.tsx +++ b/src/components/ui/popover.tsx @@ -24,7 +24,7 @@ function PopoverContent ({ align={align} sideOffset={sideOffset} className={cn( - 'bg-surface-primary data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-popover-content-transform-origin) outline-hidden shadow-popover z-50 w-72 rounded-400 p-0', + 'bg-background-primary data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-popover-content-transform-origin) outline-hidden shadow-popover z-50 w-72 rounded-400 p-0', className, )} {...props} diff --git a/src/components/ui/progress.tsx b/src/components/ui/progress.tsx index bb88b4a0..ff0b6d6b 100644 --- a/src/components/ui/progress.tsx +++ b/src/components/ui/progress.tsx @@ -8,10 +8,6 @@ const progressVariants = cva( variants: { variant: { default: '', - success: '', - warning: '', - destructive: '', - theme: '', }, isIndeterminate: { true: 'animate-progress-container', @@ -26,15 +22,11 @@ const progressVariants = cva( ); const circleVariants = cva( - 'fill-fill-transparent h-5 w-5', + 'fill-fill-content h-5 w-5', { variants: { variant: { - default: 'stroke-fill-tertiary', - theme: 'stroke-fill-tertiary', - success: 'stroke-fill-tertiary', - warning: 'stroke-fill-tertiary', - destructive: 'stroke-fill-tertiary', + default: 'stroke-fill-secondary', }, }, defaultVariants: { @@ -44,15 +36,11 @@ const circleVariants = cva( ); const progressCircleVariants = cva( - 'fill-fill-transparent transition-all h-5 w-5', + 'fill-fill-content transition-all h-5 w-5', { variants: { variant: { default: 'stroke-text-on-fill', - theme: 'stroke-fill-theme-thick', - success: 'stroke-fill-success-thick', - warning: 'stroke-warning-thick', - destructive: 'stroke-error-thick', }, }, defaultVariants: { diff --git a/src/components/ui/separator.tsx b/src/components/ui/separator.tsx index caf65272..ffbc0536 100644 --- a/src/components/ui/separator.tsx +++ b/src/components/ui/separator.tsx @@ -15,7 +15,7 @@ function Separator ({ decorative={decorative} orientation={orientation} className={cn( - 'bg-border-grey-tertiary shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px', + 'bg-border-primary shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px', className, )} {...props} diff --git a/src/components/ui/sonner.tsx b/src/components/ui/sonner.tsx index f50ba8ef..0201b144 100644 --- a/src/components/ui/sonner.tsx +++ b/src/components/ui/sonner.tsx @@ -18,13 +18,13 @@ const Toaster = ({ ...props }: ToasterProps) => { className: '!shadow-toast px-4 py-2 max-w-[360px] w-fit gap-2 bg-surface-secondary border-none text-text-on-fill rounded-400', classNames: { - actionButton: '!text-text-theme font-semibold !px-2 hover:!text-text-theme-hover bg-transparent hover:bg-transparent', + actionButton: '!text-text-action font-semibold !px-2 hover:!text-text-action-hover bg-transparent hover:bg-transparent', }, }} icons={{ - success: , - warning: , - error: , + success: , + warning: , + error: , }} /> ); diff --git a/src/components/ui/tooltip.tsx b/src/components/ui/tooltip.tsx index 599885c9..1bceae0e 100644 --- a/src/components/ui/tooltip.tsx +++ b/src/components/ui/tooltip.tsx @@ -44,7 +44,7 @@ function TooltipContent ({ 'data-[side=top]:slide-in-from-bottom-2', // Styling and layout - 'text-balance shadow-tooltip z-50 origin-[--radix-tooltip-content-transform-origin]', + 'shadow-tooltip z-50 origin-[--radix-tooltip-content-transform-origin]', 'w-fit rounded-400 bg-surface-secondary px-3 py-2 text-sm text-text-on-fill', 'flex flex-col', diff --git a/src/styles/variables/semantic.dark.css b/src/styles/variables/semantic.dark.css index 7b71faf8..f20118fa 100644 --- a/src/styles/variables/semantic.dark.css +++ b/src/styles/variables/semantic.dark.css @@ -3,255 +3,247 @@ * AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY * * Generated from: semantic.dark.json - * Generated time: 2025-03-31T09:19:58.458Z + * Generated time: 2025-04-21T06:10:00.796Z * * To modify these values, edit the source JSON files and run the token conversion script: * node scripts/system-token/convert-tokens.cjs */ :root[data-dark-mode=true] { - --text-primary: #e4e8f5; - --text-secondary: #b5bbd3; - --text-tertiary: #6f748c; - --text-quaternary: #21232a; - --text-inverse: #21232a; - --text-on-fill: #ffffff; - --text-theme: #00b5ff; - --text-theme-hover: #0092d6; - --text-action: #00b5ff; - --text-action-hover: #0092d6; - --text-info: #00b5ff; - --text-info-hover: #0092d6; - --text-success: #248569; - --text-success-hover: #29725d; - --text-warning: #db7e21; - --text-warning-hover: #b75f17; - --text-error: #f33641; - --text-error-hover: #ff5050; - --text-purple: #9327ff; - --text-purple-hover: #7a1dcc; - --icon-primary: #e4e8f5; - --icon-secondary: #b5bbd3; - --icon-tertiary: #6f748c; - --icon-quaternary: #21232a; - --icon-white: #ffffff; - --icon-purple-thick: #ffffff; - --icon-purple-thick-hover: #ffffff; - --border-grey-primary: #f8faff; - --border-grey-primary-hover: #e4e8f5; - --border-grey-secondary: #ced3e6; - --border-grey-secondary-hover: #b5bbd3; - --border-grey-tertiary: #3c3f4e; - --border-grey-tertiary-hover: #54596e; - --border-grey-quaternary: #21232a; - --border-grey-quaternary-hover: #272930; - --border-transparent: #ffffff00; - --border-theme-thick: #00b5ff; - --border-theme-thick-hover: #0092d6; - --border-info-thick: #00b5ff; - --border-info-thick-hover: #0092d6; - --border-success-thick: #248569; - --border-success-thick-hover: #29725d; - --border-warning-thick: #db7e21; - --border-warning-thick-hover: #b75f17; - --border-error-thick: #f33641; - --border-error-thick-hover: #ff5050; - --border-purple-thick: #9327ff; - --border-purple-thick-hover: #7a1dcc; - --fill-primary: #f8faff; - --fill-primary-hover: #e4e8f5; - --fill-secondary: #ced3e6; - --fill-secondary-hover: #b5bbd3; - --fill-tertiary: #6f748c; - --fill-tertiary-hover: #989eb7; - --fill-quaternary: #21232a; - --fill-quaternary-hover: #272930; - --fill-transparent: #ffffff00; - --fill-primary-alpha-5: #f9fafd0d; - --fill-primary-alpha-5-hover: #f9fafd1a; - --fill-primary-alpha-80: #1f2329cc; - --fill-primary-alpha-80-hover: #1f2329b2; - --fill-white: #ffffff; - --fill-white-alpha: #ffffff33; - --fill-white-alpha-hover: #ffffff4d; - --fill-black: #000000; - --fill-theme-light: #e3f6ff; - --fill-theme-light-hover: #a9e2ff; - --fill-theme-thick: #00b5ff; - --fill-theme-thick-hover: #4ec1ff; - --fill-theme-select: #00b5ff26; - --fill-info-light: #e3f6ff; - --fill-info-light-hover: #a9e2ff; - --fill-info-thick: #00b5ff; - --fill-info-thick-hover: #0092d6; - --fill-success-light: #ecf9f5; - --fill-success-light-hover: #c3e5d8; - --fill-success-thick: #248569; - --fill-success-thick-hover: #29725d; - --fill-warning-light: #fff3d5; - --fill-warning-light-hover: #ffe4ab; - --fill-warning-thick: #db7e21; - --fill-warning-thick-hover: #b75f17; - --fill-error-light: #ffd2dd; - --fill-error-light-hover: #ffa5b4; - --fill-error-thick: #e71d32; - --fill-error-thick-hover: #f33641; - --fill-error-select: #f336411a; - --fill-purple-light: #f1e0ff; - --fill-purple-light-hover: #e1b3ff; - --fill-purple-thick-hover: #7a1dcc; - --fill-purple-thick: #9327ff; - --surface-primary: #272930; - --surface-overlay: #00000099; - --surface-secondary: #3C3F4E; - --background-primary: #21232a; - --background-secondary: #272930; - --background-tertiary: #3c3f4e; - --background-quaternary: #54596e; - --badge-color-rose-rose-light-1: #fcf2f2; - --badge-color-rose-rose-light-2: #fae3e3; - --badge-color-rose-rose-light-3: #fad9d9; - --badge-color-rose-rose-thick-1: #edadad; - --badge-color-rose-rose-thick-2: #cc4e4e; - --badge-color-rose-rose-thick-3: #702828; - --badge-color-papaya-papaya-light-1: #fcf4f0; - --badge-color-papaya-papaya-light-2: #fae8de; - --badge-color-papaya-papaya-light-3: #fadfd2; - --badge-color-papaya-papaya-thick-1: #f0bda3; - --badge-color-papaya-papaya-thick-2: #d67240; - --badge-color-papaya-papaya-thick-3: #6b3215; - --badge-color-tangerine-tangerine-light-1: #fff7ed; - --badge-color-tangerine-tangerine-light-2: #fcedd9; - --badge-color-tangerine-tangerine-light-3: #fae5ca; - --badge-color-tangerine-tangerine-thick-1: #f2cb99; - --badge-color-tangerine-tangerine-thick-2: #db8f2c; - --badge-color-tangerine-tangerine-thick-3: #613b0a; - --badge-color-mango-mango-light-1: #fff9ec; - --badge-color-mango-mango-light-2: #fcf1d7; - --badge-color-mango-mango-light-3: #fae9c3; - --badge-color-mango-mango-thick-1: #f5d68e; - --badge-color-mango-mango-thick-2: #e0a416; - --badge-color-mango-mango-thick-3: #5c4102; - --badge-color-lemon-lemon-light-1: #fffbe8; - --badge-color-lemon-lemon-light-2: #fcf5cf; - --badge-color-lemon-lemon-light-3: #faefb9; - --badge-color-lemon-lemon-thick-1: #f5e282; - --badge-color-lemon-lemon-thick-2: #e0bb00; - --badge-color-lemon-lemon-thick-3: #574800; - --badge-color-olive-olive-light-1: #f9fae6; - --badge-color-olive-olive-light-2: #f6f7d0; - --badge-color-olive-olive-light-3: #f0f2b3; - --badge-color-olive-olive-thick-1: #dbde83; - --badge-color-olive-olive-thick-2: #adb204; - --badge-color-olive-olive-thick-3: #4a4c03; - --badge-color-lime-lime-light-1: #f6f9e6; - --badge-color-lime-lime-light-2: #eef5ce; - --badge-color-lime-lime-light-3: #e7f0bb; - --badge-color-lime-lime-thick-1: #cfdb91; - --badge-color-lime-lime-thick-2: #92a822; - --badge-color-lime-lime-thick-3: #414d05; - --badge-color-grass-grass-light-1: #f4faeb; - --badge-color-grass-grass-light-2: #e9f5d7; - --badge-color-grass-grass-light-3: #def0c5; - --badge-color-grass-grass-thick-1: #bfd998; - --badge-color-grass-grass-thick-2: #75a828; - --badge-color-grass-grass-thick-3: #334d0c; - --badge-color-forest-forest-light-1: #f1faf0; - --badge-color-forest-forest-light-2: #e2f5df; - --badge-color-forest-forest-light-3: #d7f0d3; - --badge-color-forest-forest-thick-1: #a8d6a1; - --badge-color-forest-forest-thick-2: #49a33b; - --badge-color-forest-forest-thick-3: #1e4f16; - --badge-color-jade-jade-light-1: #f0faf6; - --badge-color-jade-jade-light-2: #dff5eb; - --badge-color-jade-jade-light-3: #cef0e1; - --badge-color-jade-jade-thick-1: #90d1b5; - --badge-color-jade-jade-thick-2: #1c9963; - --badge-color-jade-jade-thick-3: #075231; - --badge-color-aqua-aqua-light-1: #f0f9fa; - --badge-color-aqua-aqua-light-2: #dff3f5; - --badge-color-aqua-aqua-light-3: #ccecf0; - --badge-color-aqua-aqua-thick-1: #83ccd4; - --badge-color-aqua-aqua-thick-2: #008e9e; - --badge-color-aqua-aqua-thick-3: #004e57; - --badge-color-azure-azure-light-1: #f0f6fa; - --badge-color-azure-azure-light-2: #e1eef7; - --badge-color-azure-azure-light-3: #d3e6f5; - --badge-color-azure-azure-thick-1: #88c0eb; - --badge-color-azure-azure-thick-2: #0877cc; - --badge-color-azure-azure-thick-3: #154469; - --badge-color-denim-denim-light-1: #f0f3fa; - --badge-color-denim-denim-light-2: #e3ebfa; - --badge-color-denim-denim-light-3: #d7e2f7; - --badge-color-denim-denim-thick-1: #9ab6ed; - --badge-color-denim-denim-thick-2: #3267d1; - --badge-color-denim-denim-thick-3: #223c70; - --badge-color-mauve-mauve-light-1: #f2f2fc; - --badge-color-mauve-mauve-thick-2: #5555e0; - --badge-color-mauve-mauve-thick-3: #36366b; - --badge-color-mauve-mauve-thick-1: #aeaef5; - --badge-color-lavender-lavender-light-1: #f6f3fc; - --badge-color-lavender-lavender-light-2: #ebe3fa; - --badge-color-lavender-lavender-light-3: #e4daf7; - --badge-color-lavender-lavender-thick-1: #c1aaf0; - --badge-color-lavender-lavender-thick-2: #8153db; - --badge-color-lavender-lavender-thick-3: #462f75; - --badge-color-lilac-liliac-light-1: #f7f0fa; - --badge-color-lilac-liliac-light-2: #f0e1f7; - --badge-color-lilac-liliac-light-3: #edd7f7; - --badge-color-lilac-liliac-thick-1: #d3a9e8; - --badge-color-lilac-liliac-thick-2: #9e4cc7; - --badge-color-lilac-liliac-thick-3: #562d6b; - --badge-color-mallow-mallow-light-1: #faf0fa; - --badge-color-mallow-mallow-light-2: #f5e1f4; - --badge-color-mallow-mallow-light-3: #f5d7f4; - --badge-color-mallow-mallow-thick-1: #dea4dc; - --badge-color-mallow-mallow-thick-2: #b240af; - --badge-color-mallow-mallow-thick-3: #632861; - --badge-color-camellia-camellia-light-1: #f9eff3; - --badge-color-camellia-camellia-light-2: #f7e1eb; - --badge-color-camellia-camellia-light-3: #f7d7e5; - --badge-color-camellia-camellia-thick-1: #e5a3c0; - --badge-color-camellia-camellia-thick-2: #c24279; - --badge-color-camellia-camellia-thick-3: #6e2343; - --badge-color-smoke-smoke-light-1: #f5f5f5; - --badge-color-smoke-smoke-light-2: #e8e8e8; - --badge-color-smoke-smoke-light-3: #dedede; - --badge-color-smoke-smoke-thick-1: #b8b8b8; - --badge-color-smoke-smoke-thick-2: #6e6e6e; - --badge-color-smoke-smoke-thick-3: #404040; - --badge-color-iron-icon-light-1: #f2f4f7; - --badge-color-iron-icon-light-2: #e6e9f0; - --badge-color-iron-icon-light-3: #dadee5; - --badge-color-iron-icon-thick-1: #b0b5bf; - --badge-color-iron-icon-thick-2: #666f80; - --badge-color-iron-icon-thick-3: #394152; - --shadow-sm: 0px; - --shadow-md: 0px; - --brand-skyline: #00b5ff; - --brand-aqua: #00c8ff; - --brand-violet: #9327ff; - --brand-amethyst: #8427e0; - --brand-berry: #e3006d; - --brand-coral: #fb006d; - --brand-golden: #f7931e; - --brand-amber: #ffbd00; - --brand-lemon: #ffce00; - --other-colors-text-highlight: #a9e2ff; - --spacing-spacing-0: 0px; - --spacing-spacing-xs: 4px; - --spacing-spacing-s: 6px; - --spacing-spacing-m: 8px; - --spacing-spacing-l: 12px; - --spacing-spacing-xl: 16px; - --spacing-spacing-xxl: 20px; - --spacing-spacing-full: 1000px; - --border-radius-border-radius-0: 0px; - --border-radius-border-radius-xs: 4px; - --border-radius-border-radius-s: 6px; - --border-radius-border-radius-m: 8px; - --border-radius-border-radius-l: 12px; - --border-radius-border-radius-xl: 16px; - --border-radius-border-radius-xxl: 20px; - --border-radius-border-radius-full: 1000px; + --text-primary: #e4e8f5; + --text-secondary: #b5bbd3; + --text-tertiary: #6f748c; + --text-quaternary: #21232a; + --text-on-fill: #ffffff; + --text-action: #00b5ff; + --text-action-hover: #4ec1ff; + --text-info: #00b5ff; + --text-info-hover: #4ec1ff; + --text-success: #248569; + --text-success-hover: #48a982; + --text-warning: #db7e21; + --text-warning-hover: #ffa02e; + --text-error: #f33641; + --text-error-hover: #ff5050; + --text-featured: #9327ff; + --text-featured-hover: #bc58ff; + --icon-primary: #e4e8f5; + --icon-secondary: #b5bbd3; + --icon-tertiary: #6f748c; + --icon-quaternary: #21232a; + --icon-info-thick: #00b5ff; + --icon-info-thick-hover: #4ec1ff; + --icon-success-thick: #248569; + --icon-success-thick-hover: #48a982; + --icon-warning-thick: #db7e21; + --icon-warning-thick-hover: #ffa02e; + --icon-error-thick: #f33641; + --icon-error-thick-hover: #ff5050; + --icon-featured-thick: #9327ff; + --icon-featured-thick-hover: #bc58ff; + --icon-on-fill: #ffffff; + --border-primary: #3c3f4e; + --border-primary-hover: #54596e; + --border-secondary: #ced3e6; + --border-secondary-hover: #e4e8f5; + --border-tertiary: #f8faff; + --border-tertiary-hover: #ffffff; + --border-theme-thick: #00b5ff; + --border-theme-thick-hover: #0092d6; + --border-info-thick: #00b5ff; + --border-info-thick-hover: #4ec1ff; + --border-success-thick: #248569; + --border-success-thick-hover: #48a982; + --border-warning-thick: #db7e21; + --border-warning-thick-hover: #ffa02e; + --border-error-thick: #f33641; + --border-error-thick-hover: #ff5050; + --border-featured-thick: #9327ff; + --border-featured-thick-hover: #bc58ff; + --fill-primary: #272930; + --fill-primary-hover: #3c3f4e; + --fill-secondary: #6f748c; + --fill-secondary-hover: #989eb7; + --fill-tertiary: #ced3e6; + --fill-tertiary-hover: #e4e8f5; + --fill-quaternary: #f8faff; + --fill-quaternary-hover: #ffffff; + --fill-content: #ffffff00; + --fill-content-hover: #f9fafd0d; + --fill-content-visible: #f9fafd0d; + --fill-content-visible-hover: #f9fafd1a; + --fill-theme-thick: #00b5ff; + --fill-theme-thick-hover: #0092d6; + --fill-theme-select: #00b5ff26; + --fill-info-light: #a9e2ff; + --fill-info-light-hover: #e3f6ff; + --fill-info-thick: #00b5ff; + --fill-info-thick-hover: #4ec1ff; + --fill-success-light: #c3e5d8; + --fill-success-light-hover: #ecf9f5; + --fill-warning-light: #ffe4ab; + --fill-warning-light-hover: #fff3d5; + --fill-error-light: #ffa5b4; + --fill-error-light-hover: #ffd2dd; + --fill-error-thick: #f33641; + --fill-error-thick-hover: #ff5050; + --fill-error-select: #f336411a; + --fill-featured-light: #e1b3ff; + --fill-featured-light-hover: #f1e0ff; + --fill-featured-thick: #9327ff; + --fill-featured-thick-hover: #bc58ff; + --surface-primary: #272930; + --surface-primary-hover: #3c3f4e; + --surface-secondary: #3c3f4e; + --surface-overlay: #00000099; + --background-primary: #21232a; + --background-secondary: #272930; + --background-tertiary: #3c3f4e; + --background-quaternary: #54596e; + --badge-color-1-1-1-light: #fcf2f2; + --badge-color-1-1-2-light: #fae3e3; + --badge-color-1-1-3-light: #fad9d9; + --badge-color-1-1-1-thick: #edadad; + --badge-color-1-1-2-thick: #cc4e4e; + --badge-color-1-1-3-thick: #702828; + --badge-color-2-2-1-light: #fcf4f0; + --badge-color-2-2-2-light: #fae8de; + --badge-color-2-2-3-light: #fadfd2; + --badge-color-2-2-1-thick: #f0bda3; + --badge-color-2-2-2-thick: #d67240; + --badge-color-2-2-3-thick: #6b3215; + --badge-color-3-3-1-light: #fff7ed; + --badge-color-3-3-2-light: #fcedd9; + --badge-color-3-3-3-light: #fae5ca; + --badge-color-3-3-1-thick: #f2cb99; + --badge-color-3-3-2-thick: #db8f2c; + --badge-color-3-3-3-thick: #613b0a; + --badge-color-4-4-1-light: #fff9ec; + --badge-color-4-4-2-light: #fcf1d7; + --badge-color-4-4-3-light: #fae9c3; + --badge-color-4-4-1-thick: #f5d68e; + --badge-color-4-4-2-thick: #e0a416; + --badge-color-4-4-3-thick: #5c4102; + --badge-color-5-5-1-light: #fffbe8; + --badge-color-5-5-2-light: #fcf5cf; + --badge-color-5-5-3-light: #faefb9; + --badge-color-5-5-1-thick: #f5e282; + --badge-color-5-5-2-thick: #e0bb00; + --badge-color-5-5-3-thick: #574800; + --badge-color-6-6-1-light: #f9fae6; + --badge-color-6-6-2-light: #f6f7d0; + --badge-color-6-6-3-light: #f0f2b3; + --badge-color-6-6-1-thick: #dbde83; + --badge-color-6-6-2-thick: #adb204; + --badge-color-6-6-3-thick: #4a4c03; + --badge-color-7-7-1-light: #f6f9e6; + --badge-color-7-7-2-light: #eef5ce; + --badge-color-7-7-3-light: #e7f0bb; + --badge-color-7-7-1-thick: #cfdb91; + --badge-color-7-7-2-thick: #92a822; + --badge-color-7-7-3-thick: #414d05; + --badge-color-8-8-1-light: #f4faeb; + --badge-color-8-8-2-light: #e9f5d7; + --badge-color-8-8-3-light: #def0c5; + --badge-color-8-8-1-thick: #bfd998; + --badge-color-8-8-2-thick: #75a828; + --badge-color-8-8-3-thick: #334d0c; + --badge-color-9-9-1-light: #f1faf0; + --badge-color-9-9-2-light: #e2f5df; + --badge-color-9-9-3-light: #d7f0d3; + --badge-color-9-9-1-thick: #a8d6a1; + --badge-color-9-9-2-thick: #49a33b; + --badge-color-9-9-3-thick: #1e4f16; + --badge-color-10-10-1-light: #f0faf6; + --badge-color-10-10-2-light: #dff5eb; + --badge-color-10-10-3-light: #cef0e1; + --badge-color-10-10-1-thick: #90d1b5; + --badge-color-10-10-2-thick: #1c9963; + --badge-color-10-10-3-thick: #075231; + --badge-color-11-11-1-light: #f0f9fa; + --badge-color-11-11-2-light: #dff3f5; + --badge-color-11-11-3-light: #ccecf0; + --badge-color-11-11-1-thick: #83ccd4; + --badge-color-11-11-2-thick: #008e9e; + --badge-color-11-11-3-thick: #004e57; + --badge-color-12-12-1-light: #f0f6fa; + --badge-color-12-12-2-light: #e1eef7; + --badge-color-12-12-3-light: #d3e6f5; + --badge-color-12-12-1-thick: #88c0eb; + --badge-color-12-12-2-thick: #0877cc; + --badge-color-12-12-3-thick: #154469; + --badge-color-13-13-1-light: #f0f3fa; + --badge-color-13-13-2-light: #e3ebfa; + --badge-color-13-13-3-light: #d7e2f7; + --badge-color-13-13-1-thick: #9ab6ed; + --badge-color-13-13-2-thick: #3267d1; + --badge-color-13-13-3-thick: #223c70; + --badge-color-14-14-1-light: #f2f2fc; + --badge-color-14-14-2-light: #e6e6fa; + --badge-color-14-14-3-light: #dcdcf7; + --badge-color-14-14-1-thick: #aeaef5; + --badge-color-14-14-2-thick: #5555e0; + --badge-color-14-14-3-thick: #36366b; + --badge-color-15-15-1-light: #f6f3fc; + --badge-color-15-15-2-light: #ebe3fa; + --badge-color-15-15-3-light: #e4daf7; + --badge-color-15-15-1-thick: #c1aaf0; + --badge-color-15-15-2-thick: #8153db; + --badge-color-15-15-3-thick: #462f75; + --badge-color-16-16-1-light: #f7f0fa; + --badge-color-16-16-2-light: #f0e1f7; + --badge-color-16-16-3-light: #edd7f7; + --badge-color-16-16-1-thick: #d3a9e8; + --badge-color-16-16-2-thick: #9e4cc7; + --badge-color-16-16-3-thick: #562d6b; + --badge-color-17-17-1-light: #faf0fa; + --badge-color-17-17-2-light: #f5e1f4; + --badge-color-17-17-3-light: #f5d7f4; + --badge-color-17-17-1-thick: #dea4dc; + --badge-color-17-17-2-thick: #b240af; + --badge-color-17-17-3-thick: #632861; + --badge-color-18-18-1-light: #f9eff3; + --badge-color-18-18-2-light: #f7e1eb; + --badge-color-18-18-3-light: #f7d7e5; + --badge-color-18-18-1-thick: #e5a3c0; + --badge-color-18-18-2-thick: #c24279; + --badge-color-18-18-3-thick: #6e2343; + --badge-color-19-19-1-light: #f5f5f5; + --badge-color-19-19-2-light: #e8e8e8; + --badge-color-19-19-3-light: #dedede; + --badge-color-19-19-1-thick: #b8b8b8; + --badge-color-19-19-2-thick: #6e6e6e; + --badge-color-19-19-3-thick: #404040; + --badge-color-20-20-1-light: #f2f4f7; + --badge-color-20-20-2-light: #e6e9f0; + --badge-color-20-20-3-light: #dadee5; + --badge-color-20-20-1-thick: #b0b5bf; + --badge-color-20-20-2-thick: #666f80; + --badge-color-20-20-3-thick: #394152; + --brand-skyline: #00b5ff; + --brand-aqua: #00c8ff; + --brand-violet: #9327ff; + --brand-amethyst: #8427e0; + --brand-berry: #e3006d; + --brand-coral: #fb006d; + --brand-golden: #f7931e; + --brand-amber: #ffbd00; + --brand-lemon: #ffce00; + --other-colors-text-highlight: #a9e2ff; + --spacing-spacing-0: 0px; + --spacing-spacing-xs: 4px; + --spacing-spacing-s: 6px; + --spacing-spacing-m: 8px; + --spacing-spacing-l: 12px; + --spacing-spacing-xl: 16px; + --spacing-spacing-xxl: 20px; + --spacing-spacing-full: 1000px; + --border-radius-border-radius-0: 0px; + --border-radius-border-radius-xs: 4px; + --border-radius-border-radius-s: 6px; + --border-radius-border-radius-m: 8px; + --border-radius-border-radius-l: 12px; + --border-radius-border-radius-xl: 16px; + --border-radius-border-radius-xxl: 20px; + --border-radius-border-radius-full: 1000px; } diff --git a/src/styles/variables/semantic.light.css b/src/styles/variables/semantic.light.css index f8e6f10f..27f34a7f 100644 --- a/src/styles/variables/semantic.light.css +++ b/src/styles/variables/semantic.light.css @@ -3,255 +3,247 @@ * AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY * * Generated from: semantic.light.json - * Generated time: 2025-03-31T09:19:58.455Z + * Generated time: 2025-04-21T06:10:00.794Z * * To modify these values, edit the source JSON files and run the token conversion script: * node scripts/system-token/convert-tokens.cjs */ :root { - --text-primary: #21232a; - --text-secondary: #6f748c; - --text-tertiary: #b5bbd3; - --text-quaternary: #e4e8f5; - --text-inverse: #ffffff; - --text-on-fill: #ffffff; - --text-theme: #00b5ff; - --text-theme-hover: #0092d6; - --text-action: #00b5ff; - --text-action-hover: #0092d6; - --text-info: #00b5ff; - --text-info-hover: #0092d6; - --text-success: #248569; - --text-success-hover: #29725d; - --text-warning: #db7e21; - --text-warning-hover: #b75f17; - --text-error: #e71d32; - --text-error-hover: #ad1625; - --text-purple: #9327ff; - --text-purple-hover: #7a1dcc; - --icon-primary: #21232a; - --icon-secondary: #6f748c; - --icon-tertiary: #b5bbd3; - --icon-quaternary: #e4e8f5; - --icon-white: #ffffff; - --icon-purple-thick: #9327ff; - --icon-purple-thick-hover: #7a1dcc; - --border-grey-primary: #21232a; - --border-grey-primary-hover: #272930; - --border-grey-secondary: #3c3f4e; - --border-grey-secondary-hover: #54596e; - --border-grey-tertiary: #ced3e6; - --border-grey-tertiary-hover: #b5bbd3; - --border-grey-quaternary: #f8faff; - --border-grey-quaternary-hover: #e4e8f5; - --border-transparent: #ffffff00; - --border-theme-thick: #00b5ff; - --border-theme-thick-hover: #0092d6; - --border-info-thick: #00b5ff; - --border-info-thick-hover: #0092d6; - --border-success-thick: #248569; - --border-success-thick-hover: #29725d; - --border-warning-thick: #db7e21; - --border-warning-thick-hover: #b75f17; - --border-error-thick: #e71d32; - --border-error-thick-hover: #ad1625; - --border-purple-thick: #9327ff; - --border-purple-thick-hover: #7a1dcc; - --fill-primary: #21232a; - --fill-primary-hover: #272930; - --fill-secondary: #6f748c; - --fill-secondary-hover: #989eb7; - --fill-tertiary: #ced3e6; - --fill-tertiary-hover: #b5bbd3; - --fill-quaternary: #f8faff; - --fill-quaternary-hover: #e4e8f5; - --fill-transparent: #ffffff00; - --fill-primary-alpha-5: #1f23290d; - --fill-primary-alpha-5-hover: #1f23291a; - --fill-primary-alpha-80: #1f2329cc; - --fill-primary-alpha-80-hover: #1f2329b2; - --fill-white: #ffffff; - --fill-white-alpha: #ffffff33; - --fill-white-alpha-hover: #ffffff4d; - --fill-black: #000000; - --fill-theme-light: #e3f6ff; - --fill-theme-light-hover: #a9e2ff; - --fill-theme-thick: #00b5ff; - --fill-theme-thick-hover: #0092d6; - --fill-theme-select: #00b5ff26; - --fill-info-light: #e3f6ff; - --fill-info-light-hover: #a9e2ff; - --fill-info-thick: #00b5ff; - --fill-info-thick-hover: #0092d6; - --fill-success-light: #ecf9f5; - --fill-success-light-hover: #c3e5d8; - --fill-success-thick: #248569; - --fill-success-thick-hover: #29725d; - --fill-warning-light: #fff3d5; - --fill-warning-light-hover: #ffe4ab; - --fill-warning-thick: #db7e21; - --fill-warning-thick-hover: #b75f17; - --fill-error-light: #ffd2dd; - --fill-error-light-hover: #ffa5b4; - --fill-error-thick: #e71d32; - --fill-error-thick-hover: #ad1625; - --fill-error-select: #f336411a; - --fill-purple-light: #f1e0ff; - --fill-purple-light-hover: #e1b3ff; - --fill-purple-thick-hover: #7a1dcc; - --fill-purple-thick: #9327ff; - --surface-primary: #ffffff; - --surface-overlay: #00000099; - --surface-secondary: #21232A; - --background-primary: #ffffff; - --background-secondary: #f8faff; - --background-tertiary: #e4e8f5; - --background-quaternary: #ced3e6; - --badge-color-rose-rose-light-1: #fcf2f2; - --badge-color-rose-rose-light-2: #fae3e3; - --badge-color-rose-rose-light-3: #fad9d9; - --badge-color-rose-rose-thick-1: #edadad; - --badge-color-rose-rose-thick-2: #cc4e4e; - --badge-color-rose-rose-thick-3: #702828; - --badge-color-papaya-papaya-light-1: #fcf4f0; - --badge-color-papaya-papaya-light-2: #fae8de; - --badge-color-papaya-papaya-light-3: #fadfd2; - --badge-color-papaya-papaya-thick-1: #f0bda3; - --badge-color-papaya-papaya-thick-2: #d67240; - --badge-color-papaya-papaya-thick-3: #6b3215; - --badge-color-tangerine-tangerine-light-1: #fff7ed; - --badge-color-tangerine-tangerine-light-2: #fcedd9; - --badge-color-tangerine-tangerine-light-3: #fae5ca; - --badge-color-tangerine-tangerine-thick-1: #f2cb99; - --badge-color-tangerine-tangerine-thick-2: #db8f2c; - --badge-color-tangerine-tangerine-thick-3: #613b0a; - --badge-color-mango-mango-light-1: #fff9ec; - --badge-color-mango-mango-light-2: #fcf1d7; - --badge-color-mango-mango-light-3: #fae9c3; - --badge-color-mango-mango-thick-1: #f5d68e; - --badge-color-mango-mango-thick-2: #e0a416; - --badge-color-mango-mango-thick-3: #5c4102; - --badge-color-lemon-lemon-light-1: #fffbe8; - --badge-color-lemon-lemon-light-2: #fcf5cf; - --badge-color-lemon-lemon-light-3: #faefb9; - --badge-color-lemon-lemon-thick-1: #f5e282; - --badge-color-lemon-lemon-thick-2: #e0bb00; - --badge-color-lemon-lemon-thick-3: #574800; - --badge-color-olive-olive-light-1: #f9fae6; - --badge-color-olive-olive-light-2: #f6f7d0; - --badge-color-olive-olive-light-3: #f0f2b3; - --badge-color-olive-olive-thick-1: #dbde83; - --badge-color-olive-olive-thick-2: #adb204; - --badge-color-olive-olive-thick-3: #4a4c03; - --badge-color-lime-lime-light-1: #f6f9e6; - --badge-color-lime-lime-light-2: #eef5ce; - --badge-color-lime-lime-light-3: #e7f0bb; - --badge-color-lime-lime-thick-1: #cfdb91; - --badge-color-lime-lime-thick-2: #92a822; - --badge-color-lime-lime-thick-3: #414d05; - --badge-color-grass-grass-light-1: #f4faeb; - --badge-color-grass-grass-light-2: #e9f5d7; - --badge-color-grass-grass-light-3: #def0c5; - --badge-color-grass-grass-thick-1: #bfd998; - --badge-color-grass-grass-thick-2: #75a828; - --badge-color-grass-grass-thick-3: #334d0c; - --badge-color-forest-forest-light-1: #f1faf0; - --badge-color-forest-forest-light-2: #e2f5df; - --badge-color-forest-forest-light-3: #d7f0d3; - --badge-color-forest-forest-thick-1: #a8d6a1; - --badge-color-forest-forest-thick-2: #49a33b; - --badge-color-forest-forest-thick-3: #1e4f16; - --badge-color-jade-jade-light-1: #f0faf6; - --badge-color-jade-jade-light-2: #dff5eb; - --badge-color-jade-jade-light-3: #cef0e1; - --badge-color-jade-jade-thick-1: #90d1b5; - --badge-color-jade-jade-thick-2: #1c9963; - --badge-color-jade-jade-thick-3: #075231; - --badge-color-aqua-aqua-light-1: #f0f9fa; - --badge-color-aqua-aqua-light-2: #dff3f5; - --badge-color-aqua-aqua-light-3: #ccecf0; - --badge-color-aqua-aqua-thick-1: #83ccd4; - --badge-color-aqua-aqua-thick-2: #008e9e; - --badge-color-aqua-aqua-thick-3: #004e57; - --badge-color-azure-azure-light-1: #f0f6fa; - --badge-color-azure-azure-light-2: #e1eef7; - --badge-color-azure-azure-light-3: #d3e6f5; - --badge-color-azure-azure-thick-1: #88c0eb; - --badge-color-azure-azure-thick-2: #0877cc; - --badge-color-azure-azure-thick-3: #154469; - --badge-color-denim-denim-light-1: #f0f3fa; - --badge-color-denim-denim-light-2: #e3ebfa; - --badge-color-denim-denim-light-3: #d7e2f7; - --badge-color-denim-denim-thick-1: #9ab6ed; - --badge-color-denim-denim-thick-2: #3267d1; - --badge-color-denim-denim-thick-3: #223c70; - --badge-color-mauve-mauve-light-1: #f2f2fc; - --badge-color-mauve-mauve-thick-2: #5555e0; - --badge-color-mauve-mauve-thick-3: #36366b; - --badge-color-mauve-mauve-thick-1: #aeaef5; - --badge-color-lavender-lavender-light-1: #f6f3fc; - --badge-color-lavender-lavender-light-2: #ebe3fa; - --badge-color-lavender-lavender-light-3: #e4daf7; - --badge-color-lavender-lavender-thick-1: #c1aaf0; - --badge-color-lavender-lavender-thick-2: #8153db; - --badge-color-lavender-lavender-thick-3: #462f75; - --badge-color-lilac-liliac-light-1: #f7f0fa; - --badge-color-lilac-liliac-light-2: #f0e1f7; - --badge-color-lilac-liliac-light-3: #edd7f7; - --badge-color-lilac-liliac-thick-1: #d3a9e8; - --badge-color-lilac-liliac-thick-2: #9e4cc7; - --badge-color-lilac-liliac-thick-3: #562d6b; - --badge-color-mallow-mallow-light-1: #faf0fa; - --badge-color-mallow-mallow-light-2: #f5e1f4; - --badge-color-mallow-mallow-light-3: #f5d7f4; - --badge-color-mallow-mallow-thick-1: #dea4dc; - --badge-color-mallow-mallow-thick-2: #b240af; - --badge-color-mallow-mallow-thick-3: #632861; - --badge-color-camellia-camellia-light-1: #f9eff3; - --badge-color-camellia-camellia-light-2: #f7e1eb; - --badge-color-camellia-camellia-light-3: #f7d7e5; - --badge-color-camellia-camellia-thick-1: #e5a3c0; - --badge-color-camellia-camellia-thick-2: #c24279; - --badge-color-camellia-camellia-thick-3: #6e2343; - --badge-color-smoke-smoke-light-1: #f5f5f5; - --badge-color-smoke-smoke-light-2: #e8e8e8; - --badge-color-smoke-smoke-light-3: #dedede; - --badge-color-smoke-smoke-thick-1: #b8b8b8; - --badge-color-smoke-smoke-thick-2: #6e6e6e; - --badge-color-smoke-smoke-thick-3: #404040; - --badge-color-iron-icon-light-1: #f2f4f7; - --badge-color-iron-icon-light-2: #e6e9f0; - --badge-color-iron-icon-light-3: #dadee5; - --badge-color-iron-icon-thick-1: #b0b5bf; - --badge-color-iron-icon-thick-2: #666f80; - --badge-color-iron-icon-thick-3: #394152; - --shadow-sm: 0px; - --shadow-md: 0px; - --brand-skyline: #00b5ff; - --brand-aqua: #00c8ff; - --brand-violet: #9327ff; - --brand-amethyst: #8427e0; - --brand-berry: #e3006d; - --brand-coral: #fb006d; - --brand-golden: #f7931e; - --brand-amber: #ffbd00; - --brand-lemon: #ffce00; - --other-colors-text-highlight: #a9e2ff; - --spacing-spacing-0: 0px; - --spacing-spacing-xs: 4px; - --spacing-spacing-s: 6px; - --spacing-spacing-m: 8px; - --spacing-spacing-l: 12px; - --spacing-spacing-xl: 16px; - --spacing-spacing-xxl: 20px; - --spacing-spacing-full: 1000px; - --border-radius-border-radius-0: 0px; - --border-radius-border-radius-xs: 4px; - --border-radius-border-radius-s: 6px; - --border-radius-border-radius-m: 8px; - --border-radius-border-radius-l: 12px; - --border-radius-border-radius-xl: 16px; - --border-radius-border-radius-xxl: 20px; - --border-radius-border-radius-full: 1000px; + --text-primary: #21232a; + --text-secondary: #6f748c; + --text-tertiary: #b5bbd3; + --text-quaternary: #e4e8f5; + --text-on-fill: #ffffff; + --text-action: #0092d6; + --text-action-hover: #0078c0; + --text-info: #0092d6; + --text-info-hover: #0078c0; + --text-success: #248569; + --text-success-hover: #29725d; + --text-warning: #db7e21; + --text-warning-hover: #b75f17; + --text-error: #e71d32; + --text-error-hover: #ad1625; + --text-featured: #9327ff; + --text-featured-hover: #7a1dcc; + --icon-primary: #21232a; + --icon-secondary: #6f748c; + --icon-tertiary: #b5bbd3; + --icon-quaternary: #e4e8f5; + --icon-info-thick: #0092d6; + --icon-info-thick-hover: #0078c0; + --icon-success-thick: #248569; + --icon-success-thick-hover: #29725d; + --icon-warning-thick: #db7e21; + --icon-warning-thick-hover: #b75f17; + --icon-error-thick: #e71d32; + --icon-error-thick-hover: #ad1625; + --icon-featured-thick: #9327ff; + --icon-featured-thick-hover: #7a1dcc; + --icon-on-fill: #ffffff; + --border-primary: #e4e8f5; + --border-primary-hover: #ced3e6; + --border-secondary: #3c3f4e; + --border-secondary-hover: #54596e; + --border-tertiary: #21232a; + --border-tertiary-hover: #272930; + --border-theme-thick: #00b5ff; + --border-theme-thick-hover: #0092d6; + --border-info-thick: #00b5ff; + --border-info-thick-hover: #0092d6; + --border-success-thick: #248569; + --border-success-thick-hover: #29725d; + --border-warning-thick: #db7e21; + --border-warning-thick-hover: #b75f17; + --border-error-thick: #e71d32; + --border-error-thick-hover: #ad1625; + --border-featured-thick: #9327ff; + --border-featured-thick-hover: #7a1dcc; + --fill-primary: #f8faff; + --fill-primary-hover: #e4e8f5; + --fill-secondary: #ced3e6; + --fill-secondary-hover: #b5bbd3; + --fill-tertiary: #6f748c; + --fill-tertiary-hover: #989eb7; + --fill-quaternary: #21232a; + --fill-quaternary-hover: #272930; + --fill-content: #ffffff00; + --fill-content-hover: #1f23290d; + --fill-content-visible: #1f23290d; + --fill-content-visible-hover: #1f23291a; + --fill-theme-thick: #00b5ff; + --fill-theme-thick-hover: #0092d6; + --fill-theme-select: #00b5ff26; + --fill-info-light: #e3f6ff; + --fill-info-light-hover: #a9e2ff; + --fill-info-thick: #00b5ff; + --fill-info-thick-hover: #0092d6; + --fill-success-light: #ecf9f5; + --fill-success-light-hover: #c3e5d8; + --fill-warning-light: #fff3d5; + --fill-warning-light-hover: #ffe4ab; + --fill-error-light: #ffd2dd; + --fill-error-light-hover: #ffa5b4; + --fill-error-thick: #e71d32; + --fill-error-thick-hover: #ad1625; + --fill-error-select: #f336411a; + --fill-featured-light: #f1e0ff; + --fill-featured-light-hover: #e1b3ff; + --fill-featured-thick: #9327ff; + --fill-featured-thick-hover: #7a1dcc; + --surface-primary: #ffffff; + --surface-primary-hover: #f8faff; + --surface-secondary: #21232a; + --surface-overlay: #00000099; + --background-primary: #ffffff; + --background-secondary: #f8faff; + --background-tertiary: #e4e8f5; + --background-quaternary: #ced3e6; + --badge-color-1-1-1-light: #fcf2f2; + --badge-color-1-1-2-light: #fae3e3; + --badge-color-1-1-3-light: #fad9d9; + --badge-color-1-1-1-thick: #edadad; + --badge-color-1-1-2-thick: #cc4e4e; + --badge-color-1-1-3-thick: #702828; + --badge-color-2-2-1-light: #fcf4f0; + --badge-color-2-2-2-light: #fae8de; + --badge-color-2-2-3-light: #fadfd2; + --badge-color-2-2-1-thick: #f0bda3; + --badge-color-2-2-2-thick: #d67240; + --badge-color-2-2-3-thick: #6b3215; + --badge-color-3-3-1-light: #fff7ed; + --badge-color-3-3-2-light: #fcedd9; + --badge-color-3-3-3-light: #fae5ca; + --badge-color-3-3-1-thick: #f2cb99; + --badge-color-3-3-2-thick: #db8f2c; + --badge-color-3-3-3-thick: #613b0a; + --badge-color-4-4-1-light: #fff9ec; + --badge-color-4-4-2-light: #fcf1d7; + --badge-color-4-4-3-light: #fae9c3; + --badge-color-4-4-1-thick: #f5d68e; + --badge-color-4-4-2-thick: #e0a416; + --badge-color-4-4-3-thick: #5c4102; + --badge-color-5-5-1-light: #fffbe8; + --badge-color-5-5-2-light: #fcf5cf; + --badge-color-5-5-3-light: #faefb9; + --badge-color-5-5-1-thick: #f5e282; + --badge-color-5-5-2-thick: #e0bb00; + --badge-color-5-5-3-thick: #574800; + --badge-color-6-6-1-light: #f9fae6; + --badge-color-6-6-2-light: #f6f7d0; + --badge-color-6-6-3-light: #f0f2b3; + --badge-color-6-6-1-thick: #dbde83; + --badge-color-6-6-2-thick: #adb204; + --badge-color-6-6-3-thick: #4a4c03; + --badge-color-7-7-1-light: #f6f9e6; + --badge-color-7-7-2-light: #eef5ce; + --badge-color-7-7-3-light: #e7f0bb; + --badge-color-7-7-1-thick: #cfdb91; + --badge-color-7-7-2-thick: #92a822; + --badge-color-7-7-3-thick: #414d05; + --badge-color-8-8-1-light: #f4faeb; + --badge-color-8-8-2-light: #e9f5d7; + --badge-color-8-8-3-light: #def0c5; + --badge-color-8-8-1-thick: #bfd998; + --badge-color-8-8-2-thick: #75a828; + --badge-color-8-8-3-thick: #334d0c; + --badge-color-9-9-1-light: #f1faf0; + --badge-color-9-9-2-light: #e2f5df; + --badge-color-9-9-3-light: #d7f0d3; + --badge-color-9-9-1-thick: #a8d6a1; + --badge-color-9-9-2-thick: #49a33b; + --badge-color-9-9-3-thick: #1e4f16; + --badge-color-10-10-1-light: #f0faf6; + --badge-color-10-10-2-light: #dff5eb; + --badge-color-10-10-3-light: #cef0e1; + --badge-color-10-10-1-thick: #90d1b5; + --badge-color-10-10-2-thick: #1c9963; + --badge-color-10-10-3-thick: #075231; + --badge-color-11-11-1-light: #f0f9fa; + --badge-color-11-11-2-light: #dff3f5; + --badge-color-11-11-3-light: #ccecf0; + --badge-color-11-11-1-thick: #83ccd4; + --badge-color-11-11-2-thick: #008e9e; + --badge-color-11-11-3-thick: #004e57; + --badge-color-12-12-1-light: #f0f6fa; + --badge-color-12-12-2-light: #e1eef7; + --badge-color-12-12-3-light: #d3e6f5; + --badge-color-12-12-1-thick: #88c0eb; + --badge-color-12-12-2-thick: #0877cc; + --badge-color-12-12-3-thick: #154469; + --badge-color-13-13-1-light: #f0f3fa; + --badge-color-13-13-2-light: #e3ebfa; + --badge-color-13-13-3-light: #d7e2f7; + --badge-color-13-13-1-thick: #9ab6ed; + --badge-color-13-13-2-thick: #3267d1; + --badge-color-13-13-3-thick: #223c70; + --badge-color-14-14-1-light: #f2f2fc; + --badge-color-14-14-2-light: #e6e6fa; + --badge-color-14-14-3-light: #dcdcf7; + --badge-color-14-14-1-thick: #aeaef5; + --badge-color-14-14-2-thick: #5555e0; + --badge-color-14-14-3-thick: #36366b; + --badge-color-15-15-1-light: #f6f3fc; + --badge-color-15-15-2-light: #ebe3fa; + --badge-color-15-15-3-light: #e4daf7; + --badge-color-15-15-1-thick: #c1aaf0; + --badge-color-15-15-2-thick: #8153db; + --badge-color-15-15-3-thick: #462f75; + --badge-color-16-16-1-light: #f7f0fa; + --badge-color-16-16-2-light: #f0e1f7; + --badge-color-16-16-3-light: #edd7f7; + --badge-color-16-16-1-thick: #d3a9e8; + --badge-color-16-16-2-thick: #9e4cc7; + --badge-color-16-16-3-thick: #562d6b; + --badge-color-17-17-1-light: #faf0fa; + --badge-color-17-17-2-light: #f5e1f4; + --badge-color-17-17-3-light: #f5d7f4; + --badge-color-17-17-1-thick: #dea4dc; + --badge-color-17-17-2-thick: #b240af; + --badge-color-17-17-3-thick: #632861; + --badge-color-18-18-1-light: #f9eff3; + --badge-color-18-18-2-light: #f7e1eb; + --badge-color-18-18-3-light: #f7d7e5; + --badge-color-18-18-1-thick: #e5a3c0; + --badge-color-18-18-2-thick: #c24279; + --badge-color-18-18-3-thick: #6e2343; + --badge-color-19-19-1-light: #f5f5f5; + --badge-color-19-19-2-light: #e8e8e8; + --badge-color-19-19-3-light: #dedede; + --badge-color-19-19-1-thick: #b8b8b8; + --badge-color-19-19-2-thick: #6e6e6e; + --badge-color-19-19-3-thick: #404040; + --badge-color-20-20-1-light: #f2f4f7; + --badge-color-20-20-2-light: #e6e9f0; + --badge-color-20-20-3-light: #dadee5; + --badge-color-20-20-1-thick: #b0b5bf; + --badge-color-20-20-2-thick: #666f80; + --badge-color-20-20-3-thick: #394152; + --brand-skyline: #00b5ff; + --brand-aqua: #00c8ff; + --brand-violet: #9327ff; + --brand-amethyst: #8427e0; + --brand-berry: #e3006d; + --brand-coral: #fb006d; + --brand-golden: #f7931e; + --brand-amber: #ffbd00; + --brand-lemon: #ffce00; + --other-colors-text-highlight: #a9e2ff; + --spacing-spacing-0: 0px; + --spacing-spacing-xs: 4px; + --spacing-spacing-s: 6px; + --spacing-spacing-m: 8px; + --spacing-spacing-l: 12px; + --spacing-spacing-xl: 16px; + --spacing-spacing-xxl: 20px; + --spacing-spacing-full: 1000px; + --border-radius-border-radius-0: 0px; + --border-radius-border-radius-xs: 4px; + --border-radius-border-radius-s: 6px; + --border-radius-border-radius-m: 8px; + --border-radius-border-radius-l: 12px; + --border-radius-border-radius-xl: 16px; + --border-radius-border-radius-xxl: 20px; + --border-radius-border-radius-full: 1000px; } diff --git a/tailwind/new-colors.cjs b/tailwind/new-colors.cjs index 65fc35e1..03cdef1b 100644 --- a/tailwind/new-colors.cjs +++ b/tailwind/new-colors.cjs @@ -1,267 +1,261 @@ /** * TailwindCSS color configuration * AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY - * + * * This file is auto-generated by convert-tokens.cjs script - * Generation time: 2025-03-31T09:19:58.459Z - * + * Generation time: 2025-04-21T06:10:00.797Z + * * To modify these colors, edit the source JSON files and run the token conversion script: * node scripts/system-token/convert-tokens.cjs - * + * * These colors reference CSS variables, ensure the corresponding CSS files are loaded */ module.exports = { - 'text': { - 'primary': 'var(--text-primary)', - 'secondary': 'var(--text-secondary)', - 'tertiary': 'var(--text-tertiary)', - 'quaternary': 'var(--text-quaternary)', - 'inverse': 'var(--text-inverse)', - 'on-fill': 'var(--text-on-fill)', - 'theme': 'var(--text-theme)', - 'theme-hover': 'var(--text-theme-hover)', - 'action': 'var(--text-action)', - 'action-hover': 'var(--text-action-hover)', - 'info': 'var(--text-info)', - 'info-hover': 'var(--text-info-hover)', - 'success': 'var(--text-success)', - 'success-hover': 'var(--text-success-hover)', - 'warning': 'var(--text-warning)', - 'warning-hover': 'var(--text-warning-hover)', - 'error': 'var(--text-error)', - 'error-hover': 'var(--text-error-hover)', - 'purple': 'var(--text-purple)', - 'purple-hover': 'var(--text-purple-hover)', + "text": { + "primary": "var(--text-primary)", + "secondary": "var(--text-secondary)", + "tertiary": "var(--text-tertiary)", + "quaternary": "var(--text-quaternary)", + "on-fill": "var(--text-on-fill)", + "action": "var(--text-action)", + "action-hover": "var(--text-action-hover)", + "info": "var(--text-info)", + "info-hover": "var(--text-info-hover)", + "success": "var(--text-success)", + "success-hover": "var(--text-success-hover)", + "warning": "var(--text-warning)", + "warning-hover": "var(--text-warning-hover)", + "error": "var(--text-error)", + "error-hover": "var(--text-error-hover)", + "featured": "var(--text-featured)", + "featured-hover": "var(--text-featured-hover)" }, - 'icon': { - 'primary': 'var(--icon-primary)', - 'secondary': 'var(--icon-secondary)', - 'tertiary': 'var(--icon-tertiary)', - 'quaternary': 'var(--icon-quaternary)', - 'white': 'var(--icon-white)', - 'purple-thick': 'var(--icon-purple-thick)', - 'purple-thick-hover': 'var(--icon-purple-thick-hover)', + "icon": { + "primary": "var(--icon-primary)", + "secondary": "var(--icon-secondary)", + "tertiary": "var(--icon-tertiary)", + "quaternary": "var(--icon-quaternary)", + "info-thick": "var(--icon-info-thick)", + "info-thick-hover": "var(--icon-info-thick-hover)", + "success-thick": "var(--icon-success-thick)", + "success-thick-hover": "var(--icon-success-thick-hover)", + "warning-thick": "var(--icon-warning-thick)", + "warning-thick-hover": "var(--icon-warning-thick-hover)", + "error-thick": "var(--icon-error-thick)", + "error-thick-hover": "var(--icon-error-thick-hover)", + "featured-thick": "var(--icon-featured-thick)", + "featured-thick-hover": "var(--icon-featured-thick-hover)", + "on-fill": "var(--icon-on-fill)" }, - 'border': { - 'grey-primary': 'var(--border-grey-primary)', - 'grey-primary-hover': 'var(--border-grey-primary-hover)', - 'grey-secondary': 'var(--border-grey-secondary)', - 'grey-secondary-hover': 'var(--border-grey-secondary-hover)', - 'grey-tertiary': 'var(--border-grey-tertiary)', - 'grey-tertiary-hover': 'var(--border-grey-tertiary-hover)', - 'grey-quaternary': 'var(--border-grey-quaternary)', - 'grey-quaternary-hover': 'var(--border-grey-quaternary-hover)', - 'transparent': 'var(--border-transparent)', - 'theme-thick': 'var(--border-theme-thick)', - 'theme-thick-hover': 'var(--border-theme-thick-hover)', - 'info-thick': 'var(--border-info-thick)', - 'info-thick-hover': 'var(--border-info-thick-hover)', - 'success-thick': 'var(--border-success-thick)', - 'success-thick-hover': 'var(--border-success-thick-hover)', - 'warning-thick': 'var(--border-warning-thick)', - 'warning-thick-hover': 'var(--border-warning-thick-hover)', - 'error-thick': 'var(--border-error-thick)', - 'error-thick-hover': 'var(--border-error-thick-hover)', - 'purple-thick': 'var(--border-purple-thick)', - 'purple-thick-hover': 'var(--border-purple-thick-hover)', - 'radius-border-radius-0': 'var(--border-radius-border-radius-0)', - 'radius-border-radius-xs': 'var(--border-radius-border-radius-xs)', - 'radius-border-radius-s': 'var(--border-radius-border-radius-s)', - 'radius-border-radius-m': 'var(--border-radius-border-radius-m)', - 'radius-border-radius-l': 'var(--border-radius-border-radius-l)', - 'radius-border-radius-xl': 'var(--border-radius-border-radius-xl)', - 'radius-border-radius-xxl': 'var(--border-radius-border-radius-xxl)', - 'radius-border-radius-full': 'var(--border-radius-border-radius-full)', + "border": { + "primary": "var(--border-primary)", + "primary-hover": "var(--border-primary-hover)", + "secondary": "var(--border-secondary)", + "secondary-hover": "var(--border-secondary-hover)", + "tertiary": "var(--border-tertiary)", + "tertiary-hover": "var(--border-tertiary-hover)", + "theme-thick": "var(--border-theme-thick)", + "theme-thick-hover": "var(--border-theme-thick-hover)", + "info-thick": "var(--border-info-thick)", + "info-thick-hover": "var(--border-info-thick-hover)", + "success-thick": "var(--border-success-thick)", + "success-thick-hover": "var(--border-success-thick-hover)", + "warning-thick": "var(--border-warning-thick)", + "warning-thick-hover": "var(--border-warning-thick-hover)", + "error-thick": "var(--border-error-thick)", + "error-thick-hover": "var(--border-error-thick-hover)", + "featured-thick": "var(--border-featured-thick)", + "featured-thick-hover": "var(--border-featured-thick-hover)", + "radius-border-radius-0": "var(--border-radius-border-radius-0)", + "radius-border-radius-xs": "var(--border-radius-border-radius-xs)", + "radius-border-radius-s": "var(--border-radius-border-radius-s)", + "radius-border-radius-m": "var(--border-radius-border-radius-m)", + "radius-border-radius-l": "var(--border-radius-border-radius-l)", + "radius-border-radius-xl": "var(--border-radius-border-radius-xl)", + "radius-border-radius-xxl": "var(--border-radius-border-radius-xxl)", + "radius-border-radius-full": "var(--border-radius-border-radius-full)" }, - 'fill': { - 'primary': 'var(--fill-primary)', - 'primary-hover': 'var(--fill-primary-hover)', - 'secondary': 'var(--fill-secondary)', - 'secondary-hover': 'var(--fill-secondary-hover)', - 'tertiary': 'var(--fill-tertiary)', - 'tertiary-hover': 'var(--fill-tertiary-hover)', - 'quaternary': 'var(--fill-quaternary)', - 'quaternary-hover': 'var(--fill-quaternary-hover)', - 'transparent': 'var(--fill-transparent)', - 'primary-alpha-5': 'var(--fill-primary-alpha-5)', - 'primary-alpha-5-hover': 'var(--fill-primary-alpha-5-hover)', - 'primary-alpha-80': 'var(--fill-primary-alpha-80)', - 'primary-alpha-80-hover': 'var(--fill-primary-alpha-80-hover)', - 'white': 'var(--fill-white)', - 'white-alpha': 'var(--fill-white-alpha)', - 'white-alpha-hover': 'var(--fill-white-alpha-hover)', - 'black': 'var(--fill-black)', - 'theme-light': 'var(--fill-theme-light)', - 'theme-light-hover': 'var(--fill-theme-light-hover)', - 'theme-thick': 'var(--fill-theme-thick)', - 'theme-thick-hover': 'var(--fill-theme-thick-hover)', - 'theme-select': 'var(--fill-theme-select)', - 'info-light': 'var(--fill-info-light)', - 'info-light-hover': 'var(--fill-info-light-hover)', - 'info-thick': 'var(--fill-info-thick)', - 'info-thick-hover': 'var(--fill-info-thick-hover)', - 'success-light': 'var(--fill-success-light)', - 'success-light-hover': 'var(--fill-success-light-hover)', - 'success-thick': 'var(--fill-success-thick)', - 'success-thick-hover': 'var(--fill-success-thick-hover)', - 'warning-light': 'var(--fill-warning-light)', - 'warning-light-hover': 'var(--fill-warning-light-hover)', - 'warning-thick': 'var(--fill-warning-thick)', - 'warning-thick-hover': 'var(--fill-warning-thick-hover)', - 'error-light': 'var(--fill-error-light)', - 'error-light-hover': 'var(--fill-error-light-hover)', - 'error-thick': 'var(--fill-error-thick)', - 'error-thick-hover': 'var(--fill-error-thick-hover)', - 'error-select': 'var(--fill-error-select)', - 'purple-light': 'var(--fill-purple-light)', - 'purple-light-hover': 'var(--fill-purple-light-hover)', - 'purple-thick-hover': 'var(--fill-purple-thick-hover)', - 'purple-thick': 'var(--fill-purple-thick)', + "fill": { + "primary": "var(--fill-primary)", + "primary-hover": "var(--fill-primary-hover)", + "secondary": "var(--fill-secondary)", + "secondary-hover": "var(--fill-secondary-hover)", + "tertiary": "var(--fill-tertiary)", + "tertiary-hover": "var(--fill-tertiary-hover)", + "quaternary": "var(--fill-quaternary)", + "quaternary-hover": "var(--fill-quaternary-hover)", + "content": "var(--fill-content)", + "content-hover": "var(--fill-content-hover)", + "content-visible": "var(--fill-content-visible)", + "content-visible-hover": "var(--fill-content-visible-hover)", + "theme-thick": "var(--fill-theme-thick)", + "theme-thick-hover": "var(--fill-theme-thick-hover)", + "theme-select": "var(--fill-theme-select)", + "info-light": "var(--fill-info-light)", + "info-light-hover": "var(--fill-info-light-hover)", + "info-thick": "var(--fill-info-thick)", + "info-thick-hover": "var(--fill-info-thick-hover)", + "success-light": "var(--fill-success-light)", + "success-light-hover": "var(--fill-success-light-hover)", + "warning-light": "var(--fill-warning-light)", + "warning-light-hover": "var(--fill-warning-light-hover)", + "error-light": "var(--fill-error-light)", + "error-light-hover": "var(--fill-error-light-hover)", + "error-thick": "var(--fill-error-thick)", + "error-thick-hover": "var(--fill-error-thick-hover)", + "error-select": "var(--fill-error-select)", + "featured-light": "var(--fill-featured-light)", + "featured-light-hover": "var(--fill-featured-light-hover)", + "featured-thick": "var(--fill-featured-thick)", + "featured-thick-hover": "var(--fill-featured-thick-hover)" }, - 'surface': { - 'primary': 'var(--surface-primary)', - 'overlay': 'var(--surface-overlay)', - 'secondary': 'var(--surface-secondary)', + "surface": { + "primary": "var(--surface-primary)", + "primary-hover": "var(--surface-primary-hover)", + "secondary": "var(--surface-secondary)", + "overlay": "var(--surface-overlay)" }, - 'background': { - 'primary': 'var(--background-primary)', - 'secondary': 'var(--background-secondary)', - 'tertiary': 'var(--background-tertiary)', - 'quaternary': 'var(--background-quaternary)', + "background": { + "primary": "var(--background-primary)", + "secondary": "var(--background-secondary)", + "tertiary": "var(--background-tertiary)", + "quaternary": "var(--background-quaternary)" }, - 'badge': { - 'color-rose-rose-light-1': 'var(--badge-color-rose-rose-light-1)', - 'color-rose-rose-light-2': 'var(--badge-color-rose-rose-light-2)', - 'color-rose-rose-light-3': 'var(--badge-color-rose-rose-light-3)', - 'color-rose-rose-thick-1': 'var(--badge-color-rose-rose-thick-1)', - 'color-rose-rose-thick-2': 'var(--badge-color-rose-rose-thick-2)', - 'color-rose-rose-thick-3': 'var(--badge-color-rose-rose-thick-3)', - 'color-papaya-papaya-light-1': 'var(--badge-color-papaya-papaya-light-1)', - 'color-papaya-papaya-light-2': 'var(--badge-color-papaya-papaya-light-2)', - 'color-papaya-papaya-light-3': 'var(--badge-color-papaya-papaya-light-3)', - 'color-papaya-papaya-thick-1': 'var(--badge-color-papaya-papaya-thick-1)', - 'color-papaya-papaya-thick-2': 'var(--badge-color-papaya-papaya-thick-2)', - 'color-papaya-papaya-thick-3': 'var(--badge-color-papaya-papaya-thick-3)', - 'color-tangerine-tangerine-light-1': 'var(--badge-color-tangerine-tangerine-light-1)', - 'color-tangerine-tangerine-light-2': 'var(--badge-color-tangerine-tangerine-light-2)', - 'color-tangerine-tangerine-light-3': 'var(--badge-color-tangerine-tangerine-light-3)', - 'color-tangerine-tangerine-thick-1': 'var(--badge-color-tangerine-tangerine-thick-1)', - 'color-tangerine-tangerine-thick-2': 'var(--badge-color-tangerine-tangerine-thick-2)', - 'color-tangerine-tangerine-thick-3': 'var(--badge-color-tangerine-tangerine-thick-3)', - 'color-mango-mango-light-1': 'var(--badge-color-mango-mango-light-1)', - 'color-mango-mango-light-2': 'var(--badge-color-mango-mango-light-2)', - 'color-mango-mango-light-3': 'var(--badge-color-mango-mango-light-3)', - 'color-mango-mango-thick-1': 'var(--badge-color-mango-mango-thick-1)', - 'color-mango-mango-thick-2': 'var(--badge-color-mango-mango-thick-2)', - 'color-mango-mango-thick-3': 'var(--badge-color-mango-mango-thick-3)', - 'color-lemon-lemon-light-1': 'var(--badge-color-lemon-lemon-light-1)', - 'color-lemon-lemon-light-2': 'var(--badge-color-lemon-lemon-light-2)', - 'color-lemon-lemon-light-3': 'var(--badge-color-lemon-lemon-light-3)', - 'color-lemon-lemon-thick-1': 'var(--badge-color-lemon-lemon-thick-1)', - 'color-lemon-lemon-thick-2': 'var(--badge-color-lemon-lemon-thick-2)', - 'color-lemon-lemon-thick-3': 'var(--badge-color-lemon-lemon-thick-3)', - 'color-olive-olive-light-1': 'var(--badge-color-olive-olive-light-1)', - 'color-olive-olive-light-2': 'var(--badge-color-olive-olive-light-2)', - 'color-olive-olive-light-3': 'var(--badge-color-olive-olive-light-3)', - 'color-olive-olive-thick-1': 'var(--badge-color-olive-olive-thick-1)', - 'color-olive-olive-thick-2': 'var(--badge-color-olive-olive-thick-2)', - 'color-olive-olive-thick-3': 'var(--badge-color-olive-olive-thick-3)', - 'color-lime-lime-light-1': 'var(--badge-color-lime-lime-light-1)', - 'color-lime-lime-light-2': 'var(--badge-color-lime-lime-light-2)', - 'color-lime-lime-light-3': 'var(--badge-color-lime-lime-light-3)', - 'color-lime-lime-thick-1': 'var(--badge-color-lime-lime-thick-1)', - 'color-lime-lime-thick-2': 'var(--badge-color-lime-lime-thick-2)', - 'color-lime-lime-thick-3': 'var(--badge-color-lime-lime-thick-3)', - 'color-grass-grass-light-1': 'var(--badge-color-grass-grass-light-1)', - 'color-grass-grass-light-2': 'var(--badge-color-grass-grass-light-2)', - 'color-grass-grass-light-3': 'var(--badge-color-grass-grass-light-3)', - 'color-grass-grass-thick-1': 'var(--badge-color-grass-grass-thick-1)', - 'color-grass-grass-thick-2': 'var(--badge-color-grass-grass-thick-2)', - 'color-grass-grass-thick-3': 'var(--badge-color-grass-grass-thick-3)', - 'color-forest-forest-light-1': 'var(--badge-color-forest-forest-light-1)', - 'color-forest-forest-light-2': 'var(--badge-color-forest-forest-light-2)', - 'color-forest-forest-light-3': 'var(--badge-color-forest-forest-light-3)', - 'color-forest-forest-thick-1': 'var(--badge-color-forest-forest-thick-1)', - 'color-forest-forest-thick-2': 'var(--badge-color-forest-forest-thick-2)', - 'color-forest-forest-thick-3': 'var(--badge-color-forest-forest-thick-3)', - 'color-jade-jade-light-1': 'var(--badge-color-jade-jade-light-1)', - 'color-jade-jade-light-2': 'var(--badge-color-jade-jade-light-2)', - 'color-jade-jade-light-3': 'var(--badge-color-jade-jade-light-3)', - 'color-jade-jade-thick-1': 'var(--badge-color-jade-jade-thick-1)', - 'color-jade-jade-thick-2': 'var(--badge-color-jade-jade-thick-2)', - 'color-jade-jade-thick-3': 'var(--badge-color-jade-jade-thick-3)', - 'color-aqua-aqua-light-1': 'var(--badge-color-aqua-aqua-light-1)', - 'color-aqua-aqua-light-2': 'var(--badge-color-aqua-aqua-light-2)', - 'color-aqua-aqua-light-3': 'var(--badge-color-aqua-aqua-light-3)', - 'color-aqua-aqua-thick-1': 'var(--badge-color-aqua-aqua-thick-1)', - 'color-aqua-aqua-thick-2': 'var(--badge-color-aqua-aqua-thick-2)', - 'color-aqua-aqua-thick-3': 'var(--badge-color-aqua-aqua-thick-3)', - 'color-azure-azure-light-1': 'var(--badge-color-azure-azure-light-1)', - 'color-azure-azure-light-2': 'var(--badge-color-azure-azure-light-2)', - 'color-azure-azure-light-3': 'var(--badge-color-azure-azure-light-3)', - 'color-azure-azure-thick-1': 'var(--badge-color-azure-azure-thick-1)', - 'color-azure-azure-thick-2': 'var(--badge-color-azure-azure-thick-2)', - 'color-azure-azure-thick-3': 'var(--badge-color-azure-azure-thick-3)', - 'color-denim-denim-light-1': 'var(--badge-color-denim-denim-light-1)', - 'color-denim-denim-light-2': 'var(--badge-color-denim-denim-light-2)', - 'color-denim-denim-light-3': 'var(--badge-color-denim-denim-light-3)', - 'color-denim-denim-thick-1': 'var(--badge-color-denim-denim-thick-1)', - 'color-denim-denim-thick-2': 'var(--badge-color-denim-denim-thick-2)', - 'color-denim-denim-thick-3': 'var(--badge-color-denim-denim-thick-3)', - 'color-mauve-mauve-light-1': 'var(--badge-color-mauve-mauve-light-1)', - 'color-mauve-mauve-thick-2': 'var(--badge-color-mauve-mauve-thick-2)', - 'color-mauve-mauve-thick-3': 'var(--badge-color-mauve-mauve-thick-3)', - 'color-mauve-mauve-thick-1': 'var(--badge-color-mauve-mauve-thick-1)', - 'color-lavender-lavender-light-1': 'var(--badge-color-lavender-lavender-light-1)', - 'color-lavender-lavender-light-2': 'var(--badge-color-lavender-lavender-light-2)', - 'color-lavender-lavender-light-3': 'var(--badge-color-lavender-lavender-light-3)', - 'color-lavender-lavender-thick-1': 'var(--badge-color-lavender-lavender-thick-1)', - 'color-lavender-lavender-thick-2': 'var(--badge-color-lavender-lavender-thick-2)', - 'color-lavender-lavender-thick-3': 'var(--badge-color-lavender-lavender-thick-3)', - 'color-lilac-liliac-light-1': 'var(--badge-color-lilac-liliac-light-1)', - 'color-lilac-liliac-light-2': 'var(--badge-color-lilac-liliac-light-2)', - 'color-lilac-liliac-light-3': 'var(--badge-color-lilac-liliac-light-3)', - 'color-lilac-liliac-thick-1': 'var(--badge-color-lilac-liliac-thick-1)', - 'color-lilac-liliac-thick-2': 'var(--badge-color-lilac-liliac-thick-2)', - 'color-lilac-liliac-thick-3': 'var(--badge-color-lilac-liliac-thick-3)', - 'color-mallow-mallow-light-1': 'var(--badge-color-mallow-mallow-light-1)', - 'color-mallow-mallow-light-2': 'var(--badge-color-mallow-mallow-light-2)', - 'color-mallow-mallow-light-3': 'var(--badge-color-mallow-mallow-light-3)', - 'color-mallow-mallow-thick-1': 'var(--badge-color-mallow-mallow-thick-1)', - 'color-mallow-mallow-thick-2': 'var(--badge-color-mallow-mallow-thick-2)', - 'color-mallow-mallow-thick-3': 'var(--badge-color-mallow-mallow-thick-3)', - 'color-camellia-camellia-light-1': 'var(--badge-color-camellia-camellia-light-1)', - 'color-camellia-camellia-light-2': 'var(--badge-color-camellia-camellia-light-2)', - 'color-camellia-camellia-light-3': 'var(--badge-color-camellia-camellia-light-3)', - 'color-camellia-camellia-thick-1': 'var(--badge-color-camellia-camellia-thick-1)', - 'color-camellia-camellia-thick-2': 'var(--badge-color-camellia-camellia-thick-2)', - 'color-camellia-camellia-thick-3': 'var(--badge-color-camellia-camellia-thick-3)', - 'color-smoke-smoke-light-1': 'var(--badge-color-smoke-smoke-light-1)', - 'color-smoke-smoke-light-2': 'var(--badge-color-smoke-smoke-light-2)', - 'color-smoke-smoke-light-3': 'var(--badge-color-smoke-smoke-light-3)', - 'color-smoke-smoke-thick-1': 'var(--badge-color-smoke-smoke-thick-1)', - 'color-smoke-smoke-thick-2': 'var(--badge-color-smoke-smoke-thick-2)', - 'color-smoke-smoke-thick-3': 'var(--badge-color-smoke-smoke-thick-3)', - 'color-iron-icon-light-1': 'var(--badge-color-iron-icon-light-1)', - 'color-iron-icon-light-2': 'var(--badge-color-iron-icon-light-2)', - 'color-iron-icon-light-3': 'var(--badge-color-iron-icon-light-3)', - 'color-iron-icon-thick-1': 'var(--badge-color-iron-icon-thick-1)', - 'color-iron-icon-thick-2': 'var(--badge-color-iron-icon-thick-2)', - 'color-iron-icon-thick-3': 'var(--badge-color-iron-icon-thick-3)', + "badge": { + "color-1-1-1-light": "var(--badge-color-1-1-1-light)", + "color-1-1-2-light": "var(--badge-color-1-1-2-light)", + "color-1-1-3-light": "var(--badge-color-1-1-3-light)", + "color-1-1-1-thick": "var(--badge-color-1-1-1-thick)", + "color-1-1-2-thick": "var(--badge-color-1-1-2-thick)", + "color-1-1-3-thick": "var(--badge-color-1-1-3-thick)", + "color-2-2-1-light": "var(--badge-color-2-2-1-light)", + "color-2-2-2-light": "var(--badge-color-2-2-2-light)", + "color-2-2-3-light": "var(--badge-color-2-2-3-light)", + "color-2-2-1-thick": "var(--badge-color-2-2-1-thick)", + "color-2-2-2-thick": "var(--badge-color-2-2-2-thick)", + "color-2-2-3-thick": "var(--badge-color-2-2-3-thick)", + "color-3-3-1-light": "var(--badge-color-3-3-1-light)", + "color-3-3-2-light": "var(--badge-color-3-3-2-light)", + "color-3-3-3-light": "var(--badge-color-3-3-3-light)", + "color-3-3-1-thick": "var(--badge-color-3-3-1-thick)", + "color-3-3-2-thick": "var(--badge-color-3-3-2-thick)", + "color-3-3-3-thick": "var(--badge-color-3-3-3-thick)", + "color-4-4-1-light": "var(--badge-color-4-4-1-light)", + "color-4-4-2-light": "var(--badge-color-4-4-2-light)", + "color-4-4-3-light": "var(--badge-color-4-4-3-light)", + "color-4-4-1-thick": "var(--badge-color-4-4-1-thick)", + "color-4-4-2-thick": "var(--badge-color-4-4-2-thick)", + "color-4-4-3-thick": "var(--badge-color-4-4-3-thick)", + "color-5-5-1-light": "var(--badge-color-5-5-1-light)", + "color-5-5-2-light": "var(--badge-color-5-5-2-light)", + "color-5-5-3-light": "var(--badge-color-5-5-3-light)", + "color-5-5-1-thick": "var(--badge-color-5-5-1-thick)", + "color-5-5-2-thick": "var(--badge-color-5-5-2-thick)", + "color-5-5-3-thick": "var(--badge-color-5-5-3-thick)", + "color-6-6-1-light": "var(--badge-color-6-6-1-light)", + "color-6-6-2-light": "var(--badge-color-6-6-2-light)", + "color-6-6-3-light": "var(--badge-color-6-6-3-light)", + "color-6-6-1-thick": "var(--badge-color-6-6-1-thick)", + "color-6-6-2-thick": "var(--badge-color-6-6-2-thick)", + "color-6-6-3-thick": "var(--badge-color-6-6-3-thick)", + "color-7-7-1-light": "var(--badge-color-7-7-1-light)", + "color-7-7-2-light": "var(--badge-color-7-7-2-light)", + "color-7-7-3-light": "var(--badge-color-7-7-3-light)", + "color-7-7-1-thick": "var(--badge-color-7-7-1-thick)", + "color-7-7-2-thick": "var(--badge-color-7-7-2-thick)", + "color-7-7-3-thick": "var(--badge-color-7-7-3-thick)", + "color-8-8-1-light": "var(--badge-color-8-8-1-light)", + "color-8-8-2-light": "var(--badge-color-8-8-2-light)", + "color-8-8-3-light": "var(--badge-color-8-8-3-light)", + "color-8-8-1-thick": "var(--badge-color-8-8-1-thick)", + "color-8-8-2-thick": "var(--badge-color-8-8-2-thick)", + "color-8-8-3-thick": "var(--badge-color-8-8-3-thick)", + "color-9-9-1-light": "var(--badge-color-9-9-1-light)", + "color-9-9-2-light": "var(--badge-color-9-9-2-light)", + "color-9-9-3-light": "var(--badge-color-9-9-3-light)", + "color-9-9-1-thick": "var(--badge-color-9-9-1-thick)", + "color-9-9-2-thick": "var(--badge-color-9-9-2-thick)", + "color-9-9-3-thick": "var(--badge-color-9-9-3-thick)", + "color-10-10-1-light": "var(--badge-color-10-10-1-light)", + "color-10-10-2-light": "var(--badge-color-10-10-2-light)", + "color-10-10-3-light": "var(--badge-color-10-10-3-light)", + "color-10-10-1-thick": "var(--badge-color-10-10-1-thick)", + "color-10-10-2-thick": "var(--badge-color-10-10-2-thick)", + "color-10-10-3-thick": "var(--badge-color-10-10-3-thick)", + "color-11-11-1-light": "var(--badge-color-11-11-1-light)", + "color-11-11-2-light": "var(--badge-color-11-11-2-light)", + "color-11-11-3-light": "var(--badge-color-11-11-3-light)", + "color-11-11-1-thick": "var(--badge-color-11-11-1-thick)", + "color-11-11-2-thick": "var(--badge-color-11-11-2-thick)", + "color-11-11-3-thick": "var(--badge-color-11-11-3-thick)", + "color-12-12-1-light": "var(--badge-color-12-12-1-light)", + "color-12-12-2-light": "var(--badge-color-12-12-2-light)", + "color-12-12-3-light": "var(--badge-color-12-12-3-light)", + "color-12-12-1-thick": "var(--badge-color-12-12-1-thick)", + "color-12-12-2-thick": "var(--badge-color-12-12-2-thick)", + "color-12-12-3-thick": "var(--badge-color-12-12-3-thick)", + "color-13-13-1-light": "var(--badge-color-13-13-1-light)", + "color-13-13-2-light": "var(--badge-color-13-13-2-light)", + "color-13-13-3-light": "var(--badge-color-13-13-3-light)", + "color-13-13-1-thick": "var(--badge-color-13-13-1-thick)", + "color-13-13-2-thick": "var(--badge-color-13-13-2-thick)", + "color-13-13-3-thick": "var(--badge-color-13-13-3-thick)", + "color-14-14-1-light": "var(--badge-color-14-14-1-light)", + "color-14-14-2-light": "var(--badge-color-14-14-2-light)", + "color-14-14-3-light": "var(--badge-color-14-14-3-light)", + "color-14-14-1-thick": "var(--badge-color-14-14-1-thick)", + "color-14-14-2-thick": "var(--badge-color-14-14-2-thick)", + "color-14-14-3-thick": "var(--badge-color-14-14-3-thick)", + "color-15-15-1-light": "var(--badge-color-15-15-1-light)", + "color-15-15-2-light": "var(--badge-color-15-15-2-light)", + "color-15-15-3-light": "var(--badge-color-15-15-3-light)", + "color-15-15-1-thick": "var(--badge-color-15-15-1-thick)", + "color-15-15-2-thick": "var(--badge-color-15-15-2-thick)", + "color-15-15-3-thick": "var(--badge-color-15-15-3-thick)", + "color-16-16-1-light": "var(--badge-color-16-16-1-light)", + "color-16-16-2-light": "var(--badge-color-16-16-2-light)", + "color-16-16-3-light": "var(--badge-color-16-16-3-light)", + "color-16-16-1-thick": "var(--badge-color-16-16-1-thick)", + "color-16-16-2-thick": "var(--badge-color-16-16-2-thick)", + "color-16-16-3-thick": "var(--badge-color-16-16-3-thick)", + "color-17-17-1-light": "var(--badge-color-17-17-1-light)", + "color-17-17-2-light": "var(--badge-color-17-17-2-light)", + "color-17-17-3-light": "var(--badge-color-17-17-3-light)", + "color-17-17-1-thick": "var(--badge-color-17-17-1-thick)", + "color-17-17-2-thick": "var(--badge-color-17-17-2-thick)", + "color-17-17-3-thick": "var(--badge-color-17-17-3-thick)", + "color-18-18-1-light": "var(--badge-color-18-18-1-light)", + "color-18-18-2-light": "var(--badge-color-18-18-2-light)", + "color-18-18-3-light": "var(--badge-color-18-18-3-light)", + "color-18-18-1-thick": "var(--badge-color-18-18-1-thick)", + "color-18-18-2-thick": "var(--badge-color-18-18-2-thick)", + "color-18-18-3-thick": "var(--badge-color-18-18-3-thick)", + "color-19-19-1-light": "var(--badge-color-19-19-1-light)", + "color-19-19-2-light": "var(--badge-color-19-19-2-light)", + "color-19-19-3-light": "var(--badge-color-19-19-3-light)", + "color-19-19-1-thick": "var(--badge-color-19-19-1-thick)", + "color-19-19-2-thick": "var(--badge-color-19-19-2-thick)", + "color-19-19-3-thick": "var(--badge-color-19-19-3-thick)", + "color-20-20-1-light": "var(--badge-color-20-20-1-light)", + "color-20-20-2-light": "var(--badge-color-20-20-2-light)", + "color-20-20-3-light": "var(--badge-color-20-20-3-light)", + "color-20-20-1-thick": "var(--badge-color-20-20-1-thick)", + "color-20-20-2-thick": "var(--badge-color-20-20-2-thick)", + "color-20-20-3-thick": "var(--badge-color-20-20-3-thick)" }, - 'brand': { - 'skyline': 'var(--brand-skyline)', - 'aqua': 'var(--brand-aqua)', - 'violet': 'var(--brand-violet)', - 'amethyst': 'var(--brand-amethyst)', - 'berry': 'var(--brand-berry)', - 'coral': 'var(--brand-coral)', - 'golden': 'var(--brand-golden)', - 'amber': 'var(--brand-amber)', - 'lemon': 'var(--brand-lemon)', - }, - 'other': { - 'colors-text-highlight': 'var(--other-colors-text-highlight)', + "brand": { + "skyline": "var(--brand-skyline)", + "aqua": "var(--brand-aqua)", + "violet": "var(--brand-violet)", + "amethyst": "var(--brand-amethyst)", + "berry": "var(--brand-berry)", + "coral": "var(--brand-coral)", + "golden": "var(--brand-golden)", + "amber": "var(--brand-amber)", + "lemon": "var(--brand-lemon)" }, + "other": { + "colors-text-highlight": "var(--other-colors-text-highlight)" + } };