From c827390ed4f952cd5b1638b44536e53ee6ac93d4 Mon Sep 17 00:00:00 2001 From: Hiro M <55973039+Akatori-Design@users.noreply.github.com> Date: Wed, 6 Nov 2024 11:37:40 -0800 Subject: [PATCH 1/2] DARK : color v2 & description updates DARK THEME UPDATES: - background color updates - background new colors - text, icon, border color updates. - general description updates. --- .storybook/main.ts | 2 +- .yarnrc.yml | 2 +- src/figma/darkTheme.json | 132 ++++++++++++++++++++++----------------- 3 files changed, 77 insertions(+), 59 deletions(-) diff --git a/.storybook/main.ts b/.storybook/main.ts index 73138dc8..aa0ed0f2 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -36,6 +36,6 @@ const config: StorybookConfig = { reactDocgen: 'react-docgen-typescript', }, - docs: {} + docs: {}, }; export default config; diff --git a/.yarnrc.yml b/.yarnrc.yml index f9309e37..376d616a 100644 --- a/.yarnrc.yml +++ b/.yarnrc.yml @@ -15,6 +15,6 @@ nodeLinker: node-modules plugins: - checksum: 026e73679828ee4858db990ba2c3bf75db99d3cbe7c17386a595ede2d01f6bff43b344a285d944de310513e9d16c8fcb55ff6bd368b063adafb19e59f767d158 path: .yarn/plugins/@yarnpkg/plugin-allow-scripts.cjs - spec: "https://raw.githubusercontent.com/LavaMoat/LavaMoat/main/packages/yarn-plugin-allow-scripts/bundles/@yarnpkg/plugin-allow-scripts.js" + spec: 'https://raw.githubusercontent.com/LavaMoat/LavaMoat/main/packages/yarn-plugin-allow-scripts/bundles/@yarnpkg/plugin-allow-scripts.js' yarnPath: .yarn/releases/yarn-4.1.1.cjs diff --git a/src/figma/darkTheme.json b/src/figma/darkTheme.json index 11f5df7b..49e05089 100644 --- a/src/figma/darkTheme.json +++ b/src/figma/darkTheme.json @@ -1,52 +1,70 @@ { "background": { "default": { - "value": "{grey.800}", + "value": "{grey.900}", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "For default neutral backgrounds" + "description": "For default neutral surface." }, "alternative": { - "value": "{grey.900}", + "value": "{grey.1000}", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "For secondary neutral backgrounds." + "description": "For sunken neutral surface below background/default." }, "default-hover": { - "value": "#313235", + "value": "#1E2124", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "For \"hover\" states that use background-default." + "description": "Hover state surface for background/default." }, "default-pressed": { - "value": "#3f4145", + "value": "#272B2F", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "For \"pressed\" states that use background-alternative." + "description": "Pressed state surface for background/default." }, "alternative-hover": { - "value": "#1f2123", + "value": "#0A0A0A", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "For \"hover\" states that use background-alternative." + "description": "Hover state surface for background/alternative." }, "alternative-pressed": { - "value": "#2e3033", + "value": "#141414", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "For \"pressed\" states that use background-alternative." + "description": "Pressed state surface for background/alternative." }, "hover": { "value": "#ffffff0a", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "For \"hover\" state that use no background fill." + "description": "General purpose hover tint." }, "pressed": { "value": "#ffffff14", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "For \"pressed\" state that use no background fill." + "description": "General purpose pressed tint." + }, + "muted": { + "value": "{grey.800}", + "type": "color", + "parent": "Theme Colors/Dark mode", + "description": "For raised neutral surface above background/default." + }, + "muted-hover": { + "value": "#2D3034", + "type": "color", + "parent": "Theme Colors/Dark mode", + "description": "Hover state surface for background/muted." + }, + "muted-pressed": { + "value": "#363B3F", + "type": "color", + "parent": "Theme Colors/Dark mode", + "description": "Pressed state surface for background/muted." } }, "text": { @@ -54,53 +72,53 @@ "value": "{grey.000}", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "For default neutral text." + "description": "Default color for text." }, "alternative": { - "value": "{grey.200}", + "value": "{grey.300}", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "For softer contrast neutral text" + "description": "Softer color for text." }, "muted": { - "value": "{grey.400}", + "value": "{grey.500}", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "For the softest contrast neutral text (not accessible)" + "description": "Muted color for text (Not accessible)." } }, "icon": { "default": { - "value": "{grey.000}", + "value": "{text.default}", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "For default neutral icons" + "description": "Default color for icons, following text/default." }, "alternative": { - "value": "{grey.200}", + "value": "{text.alternative}", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "For softer neutral icons" + "description": "Softer color for icons, following text/alternative." }, "muted": { - "value": "{grey.400}", + "value": "{text.muted}", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "For the weakest contrast neutral icons (not accessible)" + "description": "Muted color for icons (Not accessible), following text/muted." } }, "border": { "default": { - "value": "{grey.400}", + "value": "{grey.500}", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "For soft contrast neutral border" + "description": "Default color for borders." }, "muted": { "value": "#848c9629", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "For the weakest contrast neutral border" + "description": "Muted color for borders." } }, "overlay": { @@ -108,19 +126,19 @@ "value": "#00000099", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "For the default shade of screen" + "description": "Default color for overlays(scrim)." }, "alternative": { "value": "#000000cc", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "For a stronger shade of screen" + "description": "Dimmer color for overlays(scrim)." }, "inverse": { "value": "{grey.000}", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "For elements used on top of overlay/alternative. Used for text, icon or border" + "description": "For elements placed on top of overlay/alternative. " } }, "primary": { @@ -128,37 +146,37 @@ "value": "{blue.300}", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "For interactive, active, and selected semantics. Used for text, background, icon or border" + "description": "For primary semantic elements: interactive, active, selected..." }, "alternative": { "value": "{blue.200}", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "For the stronger contrast primary semantic elements." + "description": "Stronger color for primary semantic elements." }, "muted": { "value": "#43aefc26", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "For the weakest contrast primary semantic backgrounds." + "description": "Muted color for primary semantic elements." }, "inverse": { "value": "{grey.900}", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "For elements used on top of primary/default. Used for text, icon or border" + "description": "For elements placed on top of primary/default fill." }, "default-hover": { "value": "#26a2fc", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "For the \"hover\" state of primary-default elements" + "description": "Hover state surface for primary/default." }, "default-pressed": { "value": "#3baafd", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "For the \"pressed\" state of primary-default elements" + "description": "Pressed state surface for primary/default." } }, "error": { @@ -166,37 +184,37 @@ "value": "{red.300}", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "For the critical alert semantic elements. Used for text, background, icon or border" + "description": "For danger semantic elements: error, critical, destructive..." }, "alternative": { "value": "{red.200}", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "For the stronger contrast error semantic elements." + "description": "Stronger color for danger semantic." }, "muted": { "value": "#e88f9726", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "For the weakest contrast critical alert semantic backgrounds." + "description": "Muted color for danger semantic." }, "inverse": { "value": "{grey.900}", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "For elements used on top of error/default. Used for text, icon or border" + "description": "For elements placed on top of error/default fill." }, "default-hover": { "value": "#e47782", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "For the \"hover\" state of error-default elements." + "description": "Hover state surface for error/default." }, "default-pressed": { "value": "#e78891", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "For the \"pressed\" state of error-default elements." + "description": "Pressed state surface for error/default." } }, "warning": { @@ -204,31 +222,31 @@ "value": "{yellow.100}", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "For the caution alert semantic elements. Used for text, background, icon or border" + "description": "For warning semantic elements: caution, attention, precaution..." }, "muted": { "value": "#ffdf7026", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "For the weakest contrast caution alert semantic backgrounds." + "description": "Muted color option for warning semantic." }, "inverse": { "value": "{grey.900}", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "For elements used on top of warning/default. Used for text, icon or border" + "description": "For elements placed on top of warning/default fill." }, "default-hover": { "value": "#ffe485", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "For the \"hover\" state of warning-default elements" + "description": "Hover state surface for warning/default." }, "default-pressed": { "value": "#ffe899", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "For the \"pressed\" state of warning-default elements" + "description": "Pressed state surface for warning/default." } }, "success": { @@ -236,31 +254,31 @@ "value": "{green.300}", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "For the positive semantic elements. Used for text, background, icon or border" + "description": "For positive semantic elements: success, confirm, complete, safe..." }, "muted": { "value": "#28a74526", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "For the weakest contrast positive semantic backgrounds." + "description": "Muted color for positive semantic." }, "inverse": { "value": "{grey.900}", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "For elements used on top of success/default. Used for text, icon or border" + "description": "For elements placed on top of success/default fill." }, "default-hover": { "value": "#2cb94c", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "For the \"hover\" state of success-default elements" + "description": "Hover state surface for success/default." }, "default-pressed": { "value": "#30ca53", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "For the \"pressed\" state of success-default elements" + "description": "Pressed state surface for success/default." } }, "info": { @@ -268,19 +286,19 @@ "value": "{blue.300}", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "For informational read-only elements. Used for text, background, icon or border" + "description": "For soft alert semantic elements: info, reminder, hint..." }, "muted": { "value": "#43aefc26", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "For the weakest contrast informational semantic backgrounds." + "description": "Muted color for soft alert semantic." }, "inverse": { "value": "{grey.900}", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "For elements used on top of info/default. Used for text, icon or border" + "description": "For elements placed on top of info/default fill." } }, "flask": { @@ -294,7 +312,7 @@ "value": "{grey.900}", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "For elements used on top of flask/default. Used for text, icon or border" + "description": "For elements placed on top of flask/default." } }, "shadow": { From 24617b40ba4e9fd74300779ee7507d36139dcd4d Mon Sep 17 00:00:00 2001 From: Hiro M <55973039+Akatori-Design@users.noreply.github.com> Date: Wed, 6 Nov 2024 16:10:00 -0800 Subject: [PATCH 2/2] color v2 updates MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Light Theme Updates • border.default: {grey.200} → {grey.400} • icon.default: {grey.900} → {text.default} • icon.alternative: {grey.500} → {text.alternative} • icon.muted: {grey.300} → {text.muted} • background-muted: New → {grey.050} • background-muted-hover: New → #E7EBEE • background-muted-pressed: New → #DBE0E6 Dark Theme Updates
 • background-default: {grey.800} → {grey.900} • background-alternative: {grey.900} → {grey.1000}
 • background-default-hover: #313235 → #1E2124 • background-default-pressed: #3F4145 → #272B2F
 • background-alternative-hover: #1F2123 → #0A0A0A • background-alternative-pressed: #2E3033 → #141414
 • border.default: {grey.400} → {grey.500}
 • text.alternative: {grey.200} → {grey.300} • text.muted: {grey.400} → {grey.500}
 • icon.default: {grey.000} → {text.default} • icon.alternative: {grey.300} → {text.alternative} • icon.muted: {grey.500} → {text.muted} • background-muted: New → {grey.800} • background-muted-hover: New → #2D3034 • background-muted-pressed: New → #363B3F Also most descriptions were updated to the latest. --- src/figma/darkTheme.json | 36 ++++++------ src/figma/lightTheme.json | 116 ++++++++++++++++++++++---------------- 2 files changed, 85 insertions(+), 67 deletions(-) diff --git a/src/figma/darkTheme.json b/src/figma/darkTheme.json index 49e05089..f12285c3 100644 --- a/src/figma/darkTheme.json +++ b/src/figma/darkTheme.json @@ -12,6 +12,12 @@ "parent": "Theme Colors/Dark mode", "description": "For sunken neutral surface below background/default." }, + "muted": { + "value": "{grey.800}", + "type": "color", + "parent": "Theme Colors/Dark mode", + "description": "For raised neutral surface above background/default." + }, "default-hover": { "value": "#1E2124", "type": "color", @@ -36,24 +42,6 @@ "parent": "Theme Colors/Dark mode", "description": "Pressed state surface for background/alternative." }, - "hover": { - "value": "#ffffff0a", - "type": "color", - "parent": "Theme Colors/Dark mode", - "description": "General purpose hover tint." - }, - "pressed": { - "value": "#ffffff14", - "type": "color", - "parent": "Theme Colors/Dark mode", - "description": "General purpose pressed tint." - }, - "muted": { - "value": "{grey.800}", - "type": "color", - "parent": "Theme Colors/Dark mode", - "description": "For raised neutral surface above background/default." - }, "muted-hover": { "value": "#2D3034", "type": "color", @@ -65,6 +53,18 @@ "type": "color", "parent": "Theme Colors/Dark mode", "description": "Pressed state surface for background/muted." + }, + "hover": { + "value": "#ffffff0a", + "type": "color", + "parent": "Theme Colors/Dark mode", + "description": "General purpose hover state tint." + }, + "pressed": { + "value": "#ffffff14", + "type": "color", + "parent": "Theme Colors/Dark mode", + "description": "General purpose pressed state tint." } }, "text": { diff --git a/src/figma/lightTheme.json b/src/figma/lightTheme.json index 8d098c39..bacbdfe6 100644 --- a/src/figma/lightTheme.json +++ b/src/figma/lightTheme.json @@ -4,49 +4,67 @@ "value": "{grey.000}", "type": "color", "parent": "Theme Colors/Light mode", - "description": "For default neutral backgrounds" + "description": "For default neutral surface." }, "alternative": { "value": "{grey.050}", "type": "color", "parent": "Theme Colors/Light mode", - "description": "For secondary neutral backgrounds." + "description": "For sunken neutral surface below background/default." + }, + "muted": { + "value": "{grey.050}", + "type": "color", + "parent": "Theme Colors/Dark mode", + "description": "For raised neutral surface above background/default." }, "default-hover": { "value": "#f5f5f5", "type": "color", "parent": "Theme Colors/Light mode", - "description": "For \"hover\" states that use background-default." + "description": "Hover state surface for background/default." }, "default-pressed": { "value": "#ebebeb", "type": "color", "parent": "Theme Colors/Light mode", - "description": "For \"pressed\" states that use background-alternative." + "description": "Pressed state surface for background/default." }, "alternative-hover": { "value": "#e7ebee", "type": "color", "parent": "Theme Colors/Light mode", - "description": "For \"hover\" states that use background-alternative." + "description": "Hover state surface for background/alternative." }, "alternative-pressed": { "value": "#dbe0e6", "type": "color", "parent": "Theme Colors/Light mode", - "description": "For \"pressed\" states that use background-alternative." + "description": "Pressed state surface for background/alternative." + }, + "muted-hover": { + "value": "#E7EBEE", + "type": "color", + "parent": "Theme Colors/Dark mode", + "description": "Hover state surface for background/muted." + }, + "muted-pressed": { + "value": "#DBE0E6", + "type": "color", + "parent": "Theme Colors/Dark mode", + "description": "Pressed state surface for background/muted." }, "hover": { "value": "#0000000a", "type": "color", "parent": "Theme Colors/Light mode", - "description": "For \"hover\" state that use no background fill." + "description": "General purpose hover state tint." }, "pressed": { "value": "#00000014", "type": "color", "parent": "Theme Colors/Light mode", - "description": "For \"pressed\" state that use no background fill." + "description": "General purpose pressed state tint." } }, "text": { @@ -54,53 +72,53 @@ "value": "{grey.900}", "type": "color", "parent": "Theme Colors/Light mode", - "description": "For default neutral text." + "description": "Default color for text." }, "alternative": { "value": "{grey.500}", "type": "color", "parent": "Theme Colors/Light mode", - "description": "For softer contrast neutral text" + "description": "Softer color for text." }, "muted": { "value": "{grey.300}", "type": "color", "parent": "Theme Colors/Light mode", - "description": "For the softest contrast neutral text (not accessible)" + "description": "Muted color for text (Not accessible)." } }, "icon": { "default": { - "value": "{grey.900}", + "value": "{text.default}", "type": "color", "parent": "Theme Colors/Light mode", - "description": "For default neutral icons" + "description": "Default color for icons, following text/default." }, "alternative": { - "value": "{grey.500}", + "value": "{text.alternative}", "type": "color", "parent": "Theme Colors/Light mode", - "description": "For softer neutral icons" + "description": "Softer color for icons, following text/alternative." }, "muted": { - "value": "{grey.300}", + "value": "{text.muted}", "type": "color", "parent": "Theme Colors/Light mode", - "description": "For the weakest contrast neutral icons (not accessible)" + "description": "Muted color for icons (Not accessible), following text/muted." } }, "border": { "default": { - "value": "{grey.200}", + "value": "{grey.400}", "type": "color", "parent": "Theme Colors/Light mode", - "description": "For soft contrast neutral border" + "description": "Default color for borders." }, "muted": { "value": "#bbc0c566", "type": "color", "parent": "Theme Colors/Light mode", - "description": "For the weakest contrast neutral border" + "description": "Muted color for borders." } }, "overlay": { @@ -108,19 +126,19 @@ "value": "#00000099", "type": "color", "parent": "Theme Colors/Light mode", - "description": "For the default shade of screen" + "description": "Default color for overlays(scrim)." }, "alternative": { "value": "#000000cc", "type": "color", "parent": "Theme Colors/Light mode", - "description": "For a stronger shade of screen" + "description": "Dimmer color for overlays(scrim)." }, "inverse": { "value": "{grey.000}", "type": "color", "parent": "Theme Colors/Light mode", - "description": "For elements used on top of overlay/alternative. Used for text, icon or border" + "description": "For elements placed on top of overlay/alternative." } }, "primary": { @@ -128,37 +146,37 @@ "value": "{blue.500}", "type": "color", "parent": "Theme Colors/Light mode", - "description": "For interactive, active, and selected semantics. Used for text, background, icon or border" + "description": "For primary semantic elements: interactive, active, selected..." }, "alternative": { "value": "{blue.600}", "type": "color", "parent": "Theme Colors/Light mode", - "description": "For the stronger contrast primary semantic elements." + "description": "Stronger color for primary semantic elements." }, "muted": { "value": "#0376c91a", "type": "color", "parent": "Theme Colors/Light mode", - "description": "For the weakest contrast primary semantic backgrounds." + "description": "Muted color for primary semantic elements." }, "inverse": { "value": "{grey.000}", "type": "color", "parent": "Theme Colors/Light mode", - "description": "For elements used on top of primary/default. Used for text, icon or border" + "description": "For elements placed on top of primary/default fill." }, "default-hover": { "value": "#036ab5", "type": "color", "parent": "Theme Colors/Light mode", - "description": "For the \"hover\" state of primary-default elements" + "description": "Hover state surface for primary/default." }, "default-pressed": { "value": "#025ea1", "type": "color", "parent": "Theme Colors/Light mode", - "description": "For the \"pressed\" state of primary-default elements" + "description": "Pressed state surface for primary/default." } }, "error": { @@ -166,37 +184,37 @@ "value": "{red.500}", "type": "color", "parent": "Theme Colors/Light mode", - "description": "For the critical alert semantic elements. Used for text, background, icon or border" + "description": "For danger semantic elements: error, critical, destructive..." }, "alternative": { "value": "{red.600}", "type": "color", "parent": "Theme Colors/Light mode", - "description": "For the stronger contrast error semantic elements." + "description": "Stronger color for danger semantic." }, "muted": { "value": "#d738471a", "type": "color", "parent": "Theme Colors/Light mode", - "description": "For the weakest contrast critical alert semantic backgrounds." + "description": "Muted color for danger semantic." }, "inverse": { "value": "{grey.000}", "type": "color", "parent": "Theme Colors/Light mode", - "description": "For elements used on top of error/default. Used for text, icon or border" + "description": "For elements placed on top of error/default fill." }, "default-hover": { "value": "#d02a3a", "type": "color", "parent": "Theme Colors/Light mode", - "description": "For the \"hover\" state of error-default elements." + "description": "Hover state surface for error/default." }, "default-pressed": { "value": "#bf2635", "type": "color", "parent": "Theme Colors/Light mode", - "description": "For the \"pressed\" state of error-default elements." + "description": "Pressed state surface for error/default." } }, "warning": { @@ -204,31 +222,31 @@ "value": "{yellow.500}", "type": "color", "parent": "Theme Colors/Light mode", - "description": "For the caution alert semantic elements. Used for text, background, icon or border" + "description": "For warning semantic elements: caution, attention, precaution..." }, "muted": { "value": "#bf52081a", "type": "color", "parent": "Theme Colors/Light mode", - "description": "For the weakest contrast caution alert semantic backgrounds." + "description": "Muted color option for warning semantic." }, "inverse": { "value": "{grey.000}", "type": "color", "parent": "Theme Colors/Light mode", - "description": "For elements used on top of warning/default. Used for text, icon or border" + "description": "For elements placed on top of warning/default fill." }, "default-hover": { "value": "#ac4a07", "type": "color", "parent": "Theme Colors/Light mode", - "description": "For the \"hover\" state of warning-default elements" + "description": "Hover state surface for warning/default." }, "default-pressed": { "value": "#984106", "type": "color", "parent": "Theme Colors/Light mode", - "description": "For the \"pressed\" state of warning-default elements" + "description": "Pressed state surface for warning/default." } }, "success": { @@ -236,31 +254,31 @@ "value": "{green.500}", "type": "color", "parent": "Theme Colors/Light mode", - "description": "For the positive semantic elements. Used for text, background, icon or border" + "description": "For positive semantic elements: success, confirm, complete, safe..." }, "muted": { "value": "#1c82341a", "type": "color", "parent": "Theme Colors/Light mode", - "description": "For the weakest contrast positive semantic backgrounds." + "description": "Muted color for positive semantic." }, "inverse": { "value": "{grey.000}", "type": "color", "parent": "Theme Colors/Light mode", - "description": "For elements used on top of success/default. Used for text, icon or border" + "description": "For elements placed on top of success/default fill." }, "default-hover": { "value": "#18712d", "type": "color", "parent": "Theme Colors/Light mode", - "description": "For the \"hover\" state of success-default elements" + "description": "Hover state surface for success/default." }, "default-pressed": { "value": "#156127", "type": "color", "parent": "Theme Colors/Light mode", - "description": "For the \"pressed\" state of success-default elements" + "description": "Pressed state surface for success/default." } }, "info": { @@ -268,19 +286,19 @@ "value": "{blue.500}", "type": "color", "parent": "Theme Colors/Light mode", - "description": "For informational read-only elements. Used for text, background, icon or border" + "description": "For soft alert semantic elements: info, reminder, hint..." }, "muted": { "value": "#0376c91a", "type": "color", "parent": "Theme Colors/Light mode", - "description": "For the weakest contrast informational semantic backgrounds." + "description": "Muted color for soft alert semantic." }, "inverse": { "value": "{grey.000}", "type": "color", "parent": "Theme Colors/Light mode", - "description": "For elements used on top of info/default. Used for text, icon or border" + "description": "For elements placed on top of info/default fill." } }, "flask": { @@ -294,7 +312,7 @@ "value": "{grey.000}", "type": "color", "parent": "Theme Colors/Light mode", - "description": "For elements used on top of flask/default. Used for text, icon or border" + "description": "For elements placed on top of flask/default." } }, "shadow": {