diff --git a/src/figma/tokens.json b/src/figma/tokens.json index 69df6ce6..b71e853b 100644 --- a/src/figma/tokens.json +++ b/src/figma/tokens.json @@ -943,14 +943,24 @@ "type": "color" }, "inverse": { - "value": "#FCFCFC", - "description": "(white010: #FCFCFC) For elements used on top of primary/default. (Example: label of primary button, check in a checkbox)", - "type": "color" + "value": "#ffffff", + "type": "color", + "description": "(white000: #FFFFFF) For elements used on top of primary/default. (Example: label of primary button, check in a checkbox)" }, "disabled": { "value": "#0376C980", "description": "(blue500: #0376C9 50% opacity) [DEPRECATED] primary.disabled should be used for all disabled primary action components such as buttons or links", "type": "color" + }, + "default-hover": { + "value": "#0379ce", + "type": "color", + "description": "(#0379CE) For the \"hover\" state of interactive primary elements" + }, + "default-pressed": { + "value": "#036db9", + "type": "color", + "description": "(#036DB9) For the \"pressed\" state of interactive primary elements" } }, "secondary": { @@ -997,21 +1007,31 @@ "type": "color" }, "inverse": { - "value": "#FCFCFC", - "description": "(white010: #FCFCFC) For elements used on top of error/default (Example: label of danger/critical button)", - "type": "color" + "value": "#ffffff", + "type": "color", + "description": "(white000: #FFFFFF) For elements used on top of error/default (Example: label of danger/critical button)" }, "disabled": { "value": "#D7384780", "description": "(red500: #D73847 50% opacity) [DEPRECATED] error.disabled should be used for all disabled critical action components such as buttons", "type": "color" + }, + "default-hover": { + "value": "#cd4250", + "type": "color", + "description": "(#CD4250) For the \"hovered\" state of interactive danger/critical elements" + }, + "default-pressed": { + "value": "#c63441", + "type": "color", + "description": "(#C63441) For the \"pressed\" state of interactive danger/critical elements" } }, "warning": { "default": { - "value": "#F66A0A", - "description": "(orange500: #F66A0A) For low-mid level alert elements. Used for text, background, icon or border", - "type": "color" + "value": "#bf5208", + "type": "color", + "description": "(orange600: #BF5208) For low-mid level alert elements. Used for text, background, icon or border" }, "alternative": { "value": "#FFC70A", @@ -1019,26 +1039,36 @@ "type": "color" }, "muted": { - "value": "#FFD33D19", - "description": "(yellow500: #FFD33D 10% opacity) For lowest contrast background used in warning elements. (Example: notification background)", - "type": "color" + "value": "#bf520819", + "type": "color", + "description": "(orange600: #BF5208 10% opacity) For lowest contrast background used in warning elements. (Example: notification background)" }, "inverse": { - "value": "#FCFCFC", - "description": "(white010: #FCFCFC) For elements used on top of warning/default. Used for text, icon or border", - "type": "color" + "value": "#ffffff", + "type": "color", + "description": "(white000: #FFFFFF) For elements used on top of warning/default. Used for text, icon or border" }, "disabled": { "value": "#FFD33D80", "description": "(yellow500: #FFD33D 50% opacity) [DEPRECATED] warning.disabled should be used for all disabled component colors such as buttons", "type": "color" + }, + "default-hover": { + "value": "#c2540a", + "type": "color", + "description": "(#C2540A) For the \"hover\" state of warning elements" + }, + "default-pressed": { + "value": "#a24507", + "type": "color", + "description": "(#A24507) For the \"pressed\" state of warning elements" } }, "success": { "default": { - "value": "#28A745", - "description": "(green500: #28A745) For positive & good semantic elements. Used for text, background, icon or border", - "type": "color" + "value": "#1c8234", + "type": "color", + "description": "(green500: #1C8234) For positive & good semantic elements. Used for text, background, icon or border" }, "alternative": { "value": "#1E7E34", @@ -1046,19 +1076,29 @@ "type": "color" }, "muted": { - "value": "#28A74519", - "description": "(green500: #28A74519 10% opacity) For lowest contrast background used in success semantic. (Example: notification background)", - "type": "color" + "value": "#1c823419", + "type": "color", + "description": "(green600: #1C8234 10% opacity) For lowest contrast background used in success semantic. (Example: notification background)" }, "inverse": { - "value": "#FCFCFC", - "description": "(white010: #FCFCFC) For elements used on top of success/default. Used for text, icon or border", - "type": "color" + "value": "#ffffff", + "type": "color", + "description": "(white000: #FFFFFF) For elements used on top of success/default. Used for text, icon or border" }, "disabled": { "value": "#28A74580", "description": "(green500: #28A745 50% opacity) [DEPRECATED] success.disabled should be used for all disabled success component colors such as buttons", "type": "color" + }, + "default-hover": { + "value": "#208838", + "type": "color", + "description": "(#208838) For the \"hover\" state of success elements" + }, + "default-pressed": { + "value": "#1b7431", + "type": "color", + "description": "(#1B7431) For the \"pressed\" state of success elements" } }, "info": { @@ -1078,9 +1118,9 @@ "type": "color" }, "inverse": { - "value": "#FCFCFC", - "description": "(white010: #FCFCFC) For elements used on top of info/default. Used for text, icon or border", - "type": "color" + "value": "#ffffff", + "type": "color", + "description": "(white000: #FFFFFF) For elements used on top of info/default. Used for text, icon or border" }, "disabled": { "value": "#0376C980", @@ -1338,14 +1378,24 @@ "type": "color" }, "inverse": { - "value": "#FCFCFC", - "description": "(white010: #FCFCFC) For elements used on top of primary/default. (Example: label of primary button, check in a checkbox)", - "type": "color" + "value": "#141618", + "type": "color", + "description": "(grey900 : #141618) For elements used on top of primary/default. (Example: label of primary button, check in a checkbox)" }, "disabled": { "value": "#1098FC80", "description": "(blue400: #1098FC) [DEPRECATED] primary.disabled should be used for all disabled primary action components such as buttons or links", "type": "color" + }, + "default-hover": { + "value": "#0092fa", + "type": "color", + "description": "(#0092FA) For the \"hover\" state of interactive primary elements" + }, + "default-pressed": { + "value": "#54b6fc", + "type": "color", + "description": "(#54B6FC) For the \"hover\" state of interactive primary elements" } }, "secondary": { @@ -1377,9 +1427,9 @@ }, "error": { "default": { - "value": "#D73847", - "description": "(red500: #D73847) For high-level alert danger/critical elements. Used for text, background, icon or border", - "type": "color" + "value": "#ff5263", + "type": "color", + "description": "(#FF5263) For high-level alert danger/critical elements. Used for text, background, icon or border" }, "alternative": { "value": "#E06470", @@ -1387,19 +1437,29 @@ "type": "color" }, "muted": { - "value": "#D7384726", - "description": "(red500: #D73847 15% opacity) For lowest contrast background used in high-level alert danger/critical elements. (Example: notification background)", - "type": "color" + "value": "#ff526326", + "type": "color", + "description": "(#FF5263) 15% opacity) For lowest contrast background used in high-level alert danger/critical elements. (Example: notification background)" }, "inverse": { - "value": "#FCFCFC", - "description": "(white010: #FCFCFC) For elements used on top of error/default (Example: label of danger/critical button)", - "type": "color" + "value": "#141618", + "type": "color", + "description": "(grey900: #141618) For elements used on top of error/default (Example: label of danger/critical button)" }, "disabled": { "value": "#D7384780", "description": "(red500: #D73847 50% opacity) [DEPRECATED] error.disabled should be used for all disabled critical action components such as buttons", "type": "color" + }, + "default-hover": { + "value": "#ff4d58", + "type": "color", + "description": "FF4D58: For the \"hover\" state of interactive danger/critical elements" + }, + "default-pressed": { + "value": "#f9868e", + "type": "color", + "description": "F9868E: For the \"hover\" state of interactive danger/critical elements" } }, "warning": { @@ -1427,6 +1487,16 @@ "value": "#FFD33D80", "description": "(yellow500: #FFD33D 50% opacity) [DEPRECATED] warning.disabled should be used for all disabled component colors such as buttons", "type": "color" + }, + "default-hover": { + "value": "#ffc60a", + "type": "color", + "description": "(#FFC60A): For warning with stronger contrast." + }, + "default-pressed": { + "value": "#ffeaa3d1", + "type": "color", + "description": "(#FFEAA3): For the \"pressed\" state of low-mid level alert elements." } }, "success": { @@ -1446,14 +1516,24 @@ "type": "color" }, "inverse": { - "value": "#FCFCFC", - "description": "(white010: #FCFCFC) For elements used on top of success/default. Used for text, icon or border", - "type": "color" + "value": "#141618", + "type": "color", + "description": "(grey900 : #141618) For elements used on top of success/default. Used for text, icon or border" }, "disabled": { "value": "#28A74580", "description": "(green500: #28A745 50% opacity) [DEPRECATED] success.disabled should be used for all disabled success component colors such as buttons", "type": "color" + }, + "default-hover": { + "value": "#05b82f", + "type": "color", + "description": "(#05B82F): For success with stronger contrast." + }, + "default-pressed": { + "value": "#6aec88", + "type": "color", + "description": "(#6AEC88): For success with stronger contrast." } }, "info": { @@ -1473,9 +1553,9 @@ "type": "color" }, "inverse": { - "value": "#FCFCFC", - "description": "(white010: #FCFCFC) For elements used on top of info/default. Used for text, icon or border", - "type": "color" + "value": "#141618", + "type": "color", + "description": "(grey900: #141618) For elements used on top of info/default. Used for text, icon or border" }, "disabled": { "value": "#0376C980", @@ -1605,6 +1685,10 @@ }, "$themes": [], "$metadata": { - "tokenSetOrder": ["global", "light", "dark"] + "tokenSetOrder": [ + "global", + "light", + "dark" + ] } -} +} \ No newline at end of file