diff --git a/src/figma/tokens.json b/src/figma/tokens.json index 8c2bcc41..94088666 100644 --- a/src/figma/tokens.json +++ b/src/figma/tokens.json @@ -744,12 +744,12 @@ }, "default-hover": { "value": "#FAFBFC", - "description": "(grey030: #FAFBFC) For interactive elements that need a hover state that use background/default as their background color.", + "description": "(grey030: #FAFBFC) (grey030: #FAFBFC) For component hover states that use background/default", "type": "color" }, "default-pressed": { "value": "#FAFBFC", - "description": "(grey030: #FAFBFC) For interactive elements that need a pressed state that use background/default as their background color.", + "description": "(grey030: #FAFBFC) For component pressed states that use background/default", "type": "color" }, "alternative": { @@ -759,12 +759,12 @@ }, "alternative-hover": { "value": "#D6D9DC", - "description": "(grey100: #D6D9DC) For interactive elements that need a hover state that use background/alternative as their background color.", + "description": "(grey100: #D6D9DC) For component hover states that use background/alternative", "type": "color" }, "alternative-pressed": { "value": "#D6D9DC", - "description": "(grey100: #D6D9DC) For interactive elements that need a hover state that use background/alternative as their background color.", + "description": "(grey100: #D6D9DC) For component pressed states that use background/alternative", "type": "color" } }, @@ -827,7 +827,7 @@ }, "inverse": { "value": "#FCFCFC", - "description": "(white010: #FCFCFC) [Deprecated] overlay.inverse should be used only as the foreground element on top of overlay.default used for text or icons", + "description": "(white010: #FCFCFC) [DEPRECATED] overlay.inverse should be used only as the foreground element on top of overlay.default used for text or icons", "type": "color" } }, @@ -854,34 +854,34 @@ }, "disabled": { "value": "#037DD680", - "description": "(blue500: #037DD6 50% opacity) [Deprecated] primary.disabled should be used for all disabled primary action components such as buttons or links", + "description": "(blue500: #037DD6 50% opacity) [DEPRECATED] primary.disabled should be used for all disabled primary action components such as buttons or links", "type": "color" } }, "secondary": { "default": { "value": "#F66A0A", - "description": "(orange500: #F66A0A) [Deprecated] secondary.default should be used for any secondary actions. It should not be used for any negative connotations such as warnings or errors as it is quite closely tied to the MetaMask Fox", + "description": "(orange500: #F66A0A) [DEPRECATED] secondary.default should be used for any secondary actions. It should not be used for any negative connotations such as warnings or errors as it is quite closely tied to the MetaMask Fox", "type": "color" }, "alternative": { "value": "#C65507", - "description": "(orange600: #C65507) [Deprecated] secondary.alternative should be used as an alternative to secondary.default for things such as hover states", + "description": "(orange600: #C65507) [DEPRECATED] secondary.alternative should be used as an alternative to secondary.default for things such as hover states", "type": "color" }, "muted": { "value": "#F66A0A19", - "description": "(orange500: #F66A0A 10% opacity) [Deprecated] secondary.muted is a very low contrasting secondary variant for things such as alert backgrounds. secondary.muted and secondary.inverse should not be used together in a foreground and background combination", + "description": "(orange500: #F66A0A 10% opacity) [DEPRECATED] secondary.muted is a very low contrasting secondary variant for things such as alert backgrounds. secondary.muted and secondary.inverse should not be used together in a foreground and background combination", "type": "color" }, "inverse": { "value": "#FCFCFC", - "description": "(white010: #FCFCFC) [Deprecated] secondary.inverse should be used only as the foreground element on top of secondary.default and secondary.alternative. It is intended to be the most contrasting color to secondary.default. It should meet all AA and AAA accessibility standards such as the text or icon of a secondary button", + "description": "(white010: #FCFCFC) [DEPRECATED] secondary.inverse should be used only as the foreground element on top of secondary.default and secondary.alternative. It is intended to be the most contrasting color to secondary.default. It should meet all AA and AAA accessibility standards such as the text or icon of a secondary button", "type": "color" }, "disabled": { "value": "#F66A0A80", - "description": "(orange500: #F66A0A 50% opacity) [Deprecated] secondary.disabled should be used for all disabled secondary action components", + "description": "(orange500: #F66A0A 50% opacity) [DEPRECATED] secondary.disabled should be used for all disabled secondary action components", "type": "color" } }, @@ -908,7 +908,7 @@ }, "disabled": { "value": "#D73A4980", - "description": "(red500: #D73A49 50% opacity) [Deprecated] error.disabled should be used for all disabled critical action components such as buttons", + "description": "(red500: #D73A49 50% opacity) [DEPRECATED] error.disabled should be used for all disabled critical action components such as buttons", "type": "color" } }, @@ -920,7 +920,7 @@ }, "alternative": { "value": "#FFC70A", - "description": "(yellow600: #FFC70A) [Deprecated] warning.alternative should be used as an alternative to warning.default for things such as hover states", + "description": "(yellow600: #FFC70A) [DEPRECATED] warning.alternative should be used as an alternative to warning.default for things such as hover states", "type": "color" }, "muted": { @@ -935,7 +935,7 @@ }, "disabled": { "value": "#FFD33D80", - "description": "(yellow500: #FFD33D 50% opacity) [Deprecated] warning.disabled should be used for all disabled component colors such as buttons", + "description": "(yellow500: #FFD33D 50% opacity) [DEPRECATED] warning.disabled should be used for all disabled component colors such as buttons", "type": "color" } }, @@ -947,7 +947,7 @@ }, "alternative": { "value": "#1E7E34", - "description": "(green600: #1E7E34) [Deprecated] (green600: #1E7E34) success.alternative should be used as an alternative to success.default for things such as hover states", + "description": "(green600: #1E7E34) [DEPRECATED] (green600: #1E7E34) success.alternative should be used as an alternative to success.default for things such as hover states", "type": "color" }, "muted": { @@ -962,7 +962,7 @@ }, "disabled": { "value": "#28A74580", - "description": "(green500: #28A745 50% opacity) [Deprecated] success.disabled should be used for all disabled success component colors such as buttons", + "description": "(green500: #28A745 50% opacity) [DEPRECATED] success.disabled should be used for all disabled success component colors such as buttons", "type": "color" } }, @@ -974,7 +974,7 @@ }, "alternative": { "value": "#0260A4", - "description": "(blue600: #0260A4) [Deprecated] info.alternative should be used as an alternative to info.default for things such as hover states", + "description": "(blue600: #0260A4) [DEPRECATED] info.alternative should be used as an alternative to info.default for things such as hover states", "type": "color" }, "muted": { @@ -989,7 +989,7 @@ }, "disabled": { "value": "#037DD680", - "description": "(blue500: #037DD6 50% opacity) [Deprecated] primary.disabled should be used for all disabled primary action components such as buttons or links", + "description": "(blue500: #037DD6 50% opacity) [DEPRECATED] primary.disabled should be used for all disabled primary action components such as buttons or links", "type": "color" } }, @@ -1117,12 +1117,12 @@ }, "default-hover": { "value": "#3B4046", - "description": "(grey700: #3B4046) For interactive elements that need a hover state that use background/default as their background color.", + "description": "(grey700: #3B4046) For component hover states that use background/default", "type": "color" }, "default-pressed": { "value": "#3B4046", - "description": "(grey700: #3B4046) For interactive elements that need a pressed state that use background/default as their background color.", + "description": "(grey700: #3B4046) For component pressed states that use background/default", "type": "color" }, "alternative": { @@ -1132,12 +1132,12 @@ }, "alternative-hover": { "value": "#2E3339", - "description": "(grey750: #2E3339) For interactive elements that need a hover state that use background/alternative as their background color.", + "description": "(grey750: #2E3339) For component hover states that use background/alternative", "type": "color" }, "alternative-pressed": { "value": "#2E3339", - "description": "(grey750: #2E3339) For interactive elements that need a hover state that use background/alternative as their background color.", + "description": "(grey750: #2E3339) For component pressed states that use background/alternative", "type": "color" } }, @@ -1200,7 +1200,7 @@ }, "inverse": { "value": "#FCFCFC", - "description": "(white010: #FCFCFC) [Deprecated] overlay.inverse should be used only as the foreground element on top of overlay.default used for text or icons", + "description": "(white010: #FCFCFC) [DEPRECATED] overlay.inverse should be used only as the foreground element on top of overlay.default used for text or icons", "type": "color" } }, @@ -1227,34 +1227,34 @@ }, "disabled": { "value": "#1098FC80", - "description": "(blue400: #1098FC) [Deprecated] primary.disabled should be used for all disabled primary action components such as buttons or links", + "description": "(blue400: #1098FC) [DEPRECATED] primary.disabled should be used for all disabled primary action components such as buttons or links", "type": "color" } }, "secondary": { "default": { "value": "#F8883B", - "description": "(orange400: #F8883B) [Deprecated] secondary.default should be used for any secondary actions. It should not be used for any negative connotations such as warnings or errors as it is quite closely tied to the MetaMask Fox", + "description": "(orange400: #F8883B) [DEPRECATED] secondary.default should be used for any secondary actions. It should not be used for any negative connotations such as warnings or errors as it is quite closely tied to the MetaMask Fox", "type": "color" }, "alternative": { "value": "#FAA66C", - "description": "(orange300: #FAA66C) [Deprecated] secondary.alternative should be used as an alternative to secondary.default for things such as hover states", + "description": "(orange300: #FAA66C) [DEPRECATED] secondary.alternative should be used as an alternative to secondary.default for things such as hover states", "type": "color" }, "muted": { "value": "#F8883B26", - "description": "(orange400: #F8883B 15% opacity) [Deprecated] secondary.muted is a very low contrasting secondary variant for things such as alert backgrounds. secondary.muted and secondary.inverse should not be used together in a foreground and background combination", + "description": "(orange400: #F8883B 15% opacity) [DEPRECATED] secondary.muted is a very low contrasting secondary variant for things such as alert backgrounds. secondary.muted and secondary.inverse should not be used together in a foreground and background combination", "type": "color" }, "inverse": { "value": "#FCFCFC", - "description": "(white010: #FCFCFC) [Deprecated] secondary.inverse should be used only as the foreground element on top of secondary.default and secondary.alternative. It is intended to be the most contrasting color to secondary.default. It should meet all AA and AAA accessibility standards such as the text or icon of a secondary button", + "description": "(white010: #FCFCFC) [DEPRECATED] secondary.inverse should be used only as the foreground element on top of secondary.default and secondary.alternative. It is intended to be the most contrasting color to secondary.default. It should meet all AA and AAA accessibility standards such as the text or icon of a secondary button", "type": "color" }, "disabled": { "value": "#F8883B80", - "description": "(orange400: #F8883B 50% opacity) [Deprecated] secondary.disabled should be used for all disabled secondary action components", + "description": "(orange400: #F8883B 50% opacity) [DEPRECATED] secondary.disabled should be used for all disabled secondary action components", "type": "color" } }, @@ -1281,7 +1281,7 @@ }, "disabled": { "value": "#D73A4980", - "description": "(red500: #D73A49 50% opacity) [Deprecated] error.disabled should be used for all disabled critical action components such as buttons", + "description": "(red500: #D73A49 50% opacity) [DEPRECATED] error.disabled should be used for all disabled critical action components such as buttons", "type": "color" } }, @@ -1293,7 +1293,7 @@ }, "alternative": { "value": "#FFDF70", - "description": "(yellow400: #FFDF70) [Deprecated] warning.alternative should be used as an alternative to warning.default for things such as hover states", + "description": "(yellow400: #FFDF70) [DEPRECATED] warning.alternative should be used as an alternative to warning.default for things such as hover states", "type": "color" }, "muted": { @@ -1308,7 +1308,7 @@ }, "disabled": { "value": "#FFD33D80", - "description": "(yellow500: #FFD33D 50% opacity) [Deprecated] warning.disabled should be used for all disabled component colors such as buttons", + "description": "(yellow500: #FFD33D 50% opacity) [DEPRECATED] warning.disabled should be used for all disabled component colors such as buttons", "type": "color" } }, @@ -1320,7 +1320,7 @@ }, "alternative": { "value": "#5DD879", - "description": "(green400: #5DD879) [Deprecated] success.alternative should be used as an alternative to success.default for things such as hover states", + "description": "(green400: #5DD879) [DEPRECATED] success.alternative should be used as an alternative to success.default for things such as hover states", "type": "color" }, "muted": { @@ -1335,7 +1335,7 @@ }, "disabled": { "value": "#28A74580", - "description": "(green500: #28A745 50% opacity) [Deprecated] success.disabled should be used for all disabled success component colors such as buttons", + "description": "(green500: #28A745 50% opacity) [DEPRECATED] success.disabled should be used for all disabled success component colors such as buttons", "type": "color" } }, @@ -1347,7 +1347,7 @@ }, "alternative": { "value": "#43AEFC", - "description": "(blue300: #43AEFC) [Deprecated] info.alternative should be used as an alternative to info.default for things such as hover states", + "description": "(blue300: #43AEFC) [DEPRECATED] info.alternative should be used as an alternative to info.default for things such as hover states", "type": "color" }, "muted": { @@ -1362,7 +1362,7 @@ }, "disabled": { "value": "#037DD680", - "description": "(blue500: #037DD6 50% opacity) [Deprecated] info.disabled should be used for all disabled info action components such as buttons or links", + "description": "(blue500: #037DD6 50% opacity) [DEPRECATED] info.disabled should be used for all disabled info action components such as buttons or links", "type": "color" } }, diff --git a/src/js/themes/types.ts b/src/js/themes/types.ts index 2ae5dd38..66f06abb 100644 --- a/src/js/themes/types.ts +++ b/src/js/themes/types.ts @@ -28,11 +28,11 @@ export interface ThemeColors { */ default: string; /** - * {string} background.defaultHover - For interactive elements that need a hover state that use background/default as their background color. + * {string} background.defaultHover - For component hover states that use background/default */ defaultHover: string; /** - * {string} background.defaultPressed - For interactive elements that need a pressed state that use background/default as their background color. + * {string} background.defaultPressed - For component pressed states that use background/default. */ defaultPressed: string; /** @@ -40,11 +40,11 @@ export interface ThemeColors { */ alternative: string; /** - * {string} background.alternativeHover - For interactive elements that need a hover state that use background/alternative as their background color. + * {string} background.alternativeHover - For component hover states that use background/alternative */ alternativeHover: string; /** - * {string} background.alternativePressed - For interactive elements that need a pressed state that use background/alternative as their background color. + * {string} background.alternativePressed - For component pressed states that use background/alternative */ alternativePressed: string; }; @@ -96,7 +96,7 @@ export interface ThemeColors { */ inverse: string; /** - * {string} overlay.inverse - [Deprecated] Should be used for elements over an overlay + * {string} overlay.inverse - [DEPRECATED] Should be used for elements over an overlay */ alternative: string; }; @@ -124,7 +124,7 @@ export interface ThemeColors { */ inverse: string; /** - * {string} primary.disabled - [Deprecated] Should be used for + * {string} primary.disabled - [DEPRECATED] Should be used for disabled state */ disabled: string; /** @@ -134,23 +134,23 @@ export interface ThemeColors { }; secondary: { /** - * {string} secondary.default - [Deprecated] Should be used for any secondary actions. It should not be used for any negative connotations such as warnings or errors as it is quite closely tied to the MetaMask Fox + * {string} secondary.default - [DEPRECATED] Should be used for any secondary actions. It should not be used for any negative connotations such as warnings or errors as it is quite closely tied to the MetaMask Fox */ default: string; /** - * {string} secondary.alternative - [Deprecated] Should be used as an alternative to secondary.default for things such as hover states + * {string} secondary.alternative - [DEPRECATED] Should be used as an alternative to secondary.default for things such as hover states */ alternative: string; /** - * {string} secondary.muted - [Deprecated] It’s a very low contrasting secondary variant for things such as alert backgrounds. secondary.muted and secondary.inverse should not be used together in a foreground and background combination + * {string} secondary.muted - [DEPRECATED] It’s a very low contrasting secondary variant for things such as alert backgrounds. secondary.muted and secondary.inverse should not be used together in a foreground and background combination */ muted: string; /** - * {string} secondary.inverse - [Deprecated] Should be used only as the foreground element on top of primary/default and primary/alternative. It is intended to be the most contrasting color to primary/default. It should meet all AA and AAA accessibility standards such as the text or icon of a primary button + * {string} secondary.inverse - [DEPRECATED] Should be used only as the foreground element on top of primary/default and primary/alternative. It is intended to be the most contrasting color to primary/default. It should meet all AA and AAA accessibility standards such as the text or icon of a primary button */ inverse: string; /** - * {string} secondary.disabled - [Deprecated] Should be used for all disabled secondary action components + * {string} secondary.disabled - [DEPRECATED] Should be used for all disabled secondary action components */ disabled: string; }; @@ -172,7 +172,7 @@ export interface ThemeColors { */ inverse: string; /** - * {string} error.disabled - [Deprecated] Should be used for disabled state + * {string} error.disabled - [DEPRECATED] Should be used for disabled state */ disabled: string; /** @@ -186,7 +186,7 @@ export interface ThemeColors { */ default: string; /** - * {string} warning.alternative - [Deprecated] Should be used as an alternative to warning/default for things like hover or pressed states + * {string} warning.alternative - [DEPRECATED] Should be used as an alternative to warning/default for things like hover or pressed states */ alternative: string; /** @@ -198,7 +198,7 @@ export interface ThemeColors { */ inverse: string; /** - * {string} warning.disabled - [Deprecated] Should be used for disabled state + * {string} warning.disabled - [DEPRECATED] Should be used for disabled state */ disabled: string; }; @@ -208,7 +208,7 @@ export interface ThemeColors { */ default: string; /** - * {string} success.alternative - [Deprecated] Should be used as an alternative to success/default for things like hover or pressed states + * {string} success.alternative - [DEPRECATED] Should be used as an alternative to success/default for things like hover or pressed states */ alternative: string; /** @@ -220,7 +220,7 @@ export interface ThemeColors { */ inverse: string; /** - * {string} success.disabled - [Deprecated] Should be used for disabled state + * {string} success.disabled - [DEPRECATED] Should be used for disabled state */ disabled: string; }; @@ -230,7 +230,7 @@ export interface ThemeColors { */ default: string; /** - * {string} info.alternative - [Deprecated] Should be used as an alternative to info/default for things like hover or pressed states + * {string} info.alternative - [DEPRECATED] Should be used as an alternative to info/default for things like hover or pressed states */ alternative: string; /** @@ -242,7 +242,7 @@ export interface ThemeColors { */ inverse: string; /** - * {string} info.disabled - [Deprecated] Should be used for disabled state + * {string} info.disabled - [DEPRECATED] Should be used for disabled state */ disabled: string; };