From 1ae1e989d859f25064651151fd72cfca054696f8 Mon Sep 17 00:00:00 2001 From: Monica Wheeler Date: Tue, 26 Nov 2024 09:26:34 -0600 Subject: [PATCH] Badge: border and color updates (#2022) * chore(ci): updating rails gem version [ci skip] * chore(release): publish [skip ci] * style(badge): rework documentation and styles for border and color updates * fix(linter): remove extra spaces and reorg style order * style(badge): rearrange badge preview and update styles * fix: linting issue in the scss for order of props * docs(badge): minor adjustments to grammar * style(dot): adjust sage-badge dot spacing to align with designs * revert versions to match develop * fix: remove extra space in changelog --------- Co-authored-by: Kajabi Automation Bot --- .../components/badge/_preview.html.erb | 162 ++++++++---------- .../app/sage_tokens/sage_dictionary.rb | 16 +- .../lib/stylesheets/components/_badge.scss | 24 +-- .../lib/stylesheets/components/_dot.scss | 2 +- .../lib/stylesheets/dictionary/_tokens.scss | 16 +- .../lib/configs/dictionary/tokens.js | 16 +- style-dictionary/tokens/color/base.json | 2 +- style-dictionary/tokens/color/combos.json | 2 +- 8 files changed, 113 insertions(+), 127 deletions(-) diff --git a/docs/app/views/examples/components/badge/_preview.html.erb b/docs/app/views/examples/components/badge/_preview.html.erb index 4983bccb03..f7332fefd8 100644 --- a/docs/app/views/examples/components/badge/_preview.html.erb +++ b/docs/app/views/examples/components/badge/_preview.html.erb @@ -1,102 +1,84 @@ -<% -configs = [ - { - color: "draft", - icon: "draft", - }, - { - color: "published", - icon: "check", - }, - { - color: "info", - icon: "draft", - }, - { - color: "warning", - icon: "warning", - }, - { - color: "danger", - icon: "danger", - }, - { - color: "locked", - icon: "lock", - } -] -%> -<%= sage_component SagePanelBlock, {} do %> -

Default Badge

- <%= sage_component SageLabelGroup, {} do %> - <% configs.each do | config | %> - <%= sage_component SageBadge, { - color: config[:color], - value: config[:color].capitalize, - }%> - <% end %> - <% end %> +

Variants

+ +

Default Badge

+

Demonstrates the use of the default badge with various color options.

+ +<%= sage_component SageLabelGroup, { gap: :md, spacer: { bottom: :sm }} do %> + <%= sage_component SageBadge, { color: "draft", value: "Neutral" } %> + <%= sage_component SageBadge, { color: "info", value: "Info" } %> + <%= sage_component SageBadge, { color: "published", value: "Success" } %> + <%= sage_component SageBadge, { color: "warning", value: "Warning" } %> + <%= sage_component SageBadge, { color: "danger", value: "Danger" } %> + <%= sage_component SageBadge, { color: "locked", value: "Accent" } %> <% end %> -<%= sage_component SagePanelBlock, {} do %> -

Indicator Badge

- <%= sage_component SageLabelGroup, {} do %> - <% configs.each do | config | %> - <%= sage_component SageBadge, { - color: config[:color], - value: config[:color].capitalize, - } do %> - <% content_for :sage_badge_dot do %> - <%= sage_component SageDot, { color: "primary" } %> - <% end %> - <% end %> +<%= sage_component SageDivider, {} %> + +

Dot

+

Demostrates a badge with an indicator dot.

+ +<%= sage_component SageLabelGroup, { gap: :md, spacer: { bottom: :sm }} do %> + <%= sage_component SageBadge, { color: "draft", value: "Neutral" } do %> + <% content_for :sage_badge_dot do %> + <%= sage_component SageDot, { color: "primary" } %> <% end %> <% end %> -<% end %> - -<%= sage_component SagePanelBlock, {} do %> -

Interactive Badge

- <%= sage_component SageLabelGroup, {} do %> - <% configs.each do | config | %> - <%= sage_component SageBadge, { - color: config[:color], - value: config[:color].capitalize, - interactive_type: :dropdown - } do %> - <% content_for :sage_badge_dot do %> - <%= sage_component SageDot, { color: "primary" } %> - <% end %> - <% end %> + <%= sage_component SageBadge, { color: "info", value: "Info" } do %> + <% content_for :sage_badge_dot do %> + <%= sage_component SageDot, { color: "primary" } %> + <% end %> + <% end %> + <%= sage_component SageBadge, { color: "published", value: "Success" } do %> + <% content_for :sage_badge_dot do %> + <%= sage_component SageDot, { color: "primary" } %> + <% end %> + <% end %> + <%= sage_component SageBadge, { color: "warning", value: "Warning" } do %> + <% content_for :sage_badge_dot do %> + <%= sage_component SageDot, { color: "primary" } %> + <% end %> + <% end %> + <%= sage_component SageBadge, { color: "danger", value: "Danger" } do %> + <% content_for :sage_badge_dot do %> + <%= sage_component SageDot, { color: "primary" } %> + <% end %> + <% end %> + <%= sage_component SageBadge, { color: "locked", value: "Accent" } do %> + <% content_for :sage_badge_dot do %> + <%= sage_component SageDot, { color: "primary" } %> <% end %> <% end %> <% end %> -<%= sage_component SagePanelBlock, {} do %> -

Large Badge

- <%= sage_component SageLabelGroup, {} do %> - <%= sage_component SageBadge, { - color: "draft", - value: "Draft", - large: true, - } %> - <%= sage_component SageBadge, { - color: "published", - value: "Published", - large: true, - } do %> - <% content_for :sage_badge_dot do %> - <%= sage_component SageDot, {} %> - <% end %> +<%= sage_component SageDivider, {} %> + +

Interactive Badge

+

Demonstrates an interactive badge with dropdown functionality.

+ +<%= sage_component SageLabelGroup, { gap: :md, spacer: { bottom: :sm }} do %> + <%= sage_component SageBadge, { color: "draft", value: "Neutral", interactive_type: :dropdown } %> + <%= sage_component SageBadge, { color: "info", value: "Info", interactive_type: :dropdown } %> + <%= sage_component SageBadge, { color: "published", value: "Success", interactive_type: :dropdown } %> + <%= sage_component SageBadge, { color: "warning", value: "Warning", interactive_type: :dropdown } %> + <%= sage_component SageBadge, { color: "danger", value: "Danger", interactive_type: :dropdown } %> + <%= sage_component SageBadge, { color: "locked", value: "Accent", interactive_type: :dropdown } %> +<% end %> + +<%= sage_component SageDivider, {} %> + +

Large Badge

+

Demonstrates larger badge sizes for emphasis.

+ +<%= sage_component SageLabelGroup, { gap: :md, spacer: { bottom: :sm }} do %> + <%= sage_component SageBadge, { color: "draft", value: "Neutral", large: true } %> + <%= sage_component SageBadge, { color: "published", value: "Success", large: true } do %> + <% content_for :sage_badge_dot do %> + <%= sage_component SageDot, {} %> <% end %> - <%= sage_component SageBadge, { - color: "warning", - value: "Warning", - large: true, - interactive_type: :dropdown - } do %> - <% content_for :sage_badge_dot do %> - <%= sage_component SageDot, {} %> - <% end %> + <% end %> + <%= sage_component SageBadge, { color: "warning", value: "Warning", large: true, interactive_type: :dropdown } do %> + <% content_for :sage_badge_dot do %> + <%= sage_component SageDot, {} %> <% end %> <% end %> <% end %> diff --git a/docs/lib/sage_rails/app/sage_tokens/sage_dictionary.rb b/docs/lib/sage_rails/app/sage_tokens/sage_dictionary.rb index 89be719d7e..63b62f4482 100644 --- a/docs/lib/sage_rails/app/sage_tokens/sage_dictionary.rb +++ b/docs/lib/sage_rails/app/sage_tokens/sage_dictionary.rb @@ -30,7 +30,7 @@ module SageDictionary SD_SAGE_COLOR_BASE_BLUE_200_HEX = "#bfdbfe" SD_SAGE_COLOR_BASE_BLUE_200_CODE = "blue-200" SD_SAGE_COLOR_BASE_BLUE_200_CLASSNAME = "t-sage--color-blue-200" - SD_SAGE_COLOR_BASE_BLUE_300_HEX = "#92c5fd" + SD_SAGE_COLOR_BASE_BLUE_300_HEX = "#93c5fd" SD_SAGE_COLOR_BASE_BLUE_300_CODE = "blue-300" SD_SAGE_COLOR_BASE_BLUE_300_CLASSNAME = "t-sage--color-blue-300" SD_SAGE_COLOR_BASE_BLUE_400_HEX = "#60a5fa" @@ -132,7 +132,7 @@ module SageDictionary SD_SAGE_COLOR_BASE_PRIMARY_100_HEX = "#dbe9fe" SD_SAGE_COLOR_BASE_PRIMARY_100_CODE = "primary-100" SD_SAGE_COLOR_BASE_PRIMARY_100_CLASSNAME = "t-sage--color-primary-100" - SD_SAGE_COLOR_BASE_PRIMARY_200_HEX = "#92c5fd" + SD_SAGE_COLOR_BASE_PRIMARY_200_HEX = "#93c5fd" SD_SAGE_COLOR_BASE_PRIMARY_200_CODE = "primary-200" SD_SAGE_COLOR_BASE_PRIMARY_200_CLASSNAME = "t-sage--color-primary-200" SD_SAGE_COLOR_BASE_PRIMARY_300_HEX = "#2463eb" @@ -975,7 +975,7 @@ module SageDictionary # SD_SAGE_COLOR_COMBOS_DRAFT_DEFAULT_FOREGROUND = "#343332" SD_SAGE_COLOR_COMBOS_DRAFT_DEFAULT_FOREGROUND_ACCENT = "#1a1a19" - SD_SAGE_COLOR_COMBOS_DRAFT_DEFAULT_BACKGROUND = "#e4e4e4" + SD_SAGE_COLOR_COMBOS_DRAFT_DEFAULT_BACKGROUND = "#f0f0f0" SD_SAGE_COLOR_COMBOS_DRAFT_DEFAULT_BACKGROUND_ACCENT = "#d2d1d1" SD_SAGE_COLOR_COMBOS_DRAFT_DEFAULT_ICON_BACKGROUND_ACCENT = "#6c6a69" SD_SAGE_COLOR_COMBOS_DRAFT_SUBTLE_FOREGROUND = "#6c6a69" @@ -996,11 +996,11 @@ module SageDictionary SD_SAGE_COLOR_COMBOS_INFO_DEFAULT_FOREGROUND = "#1c4ed8" SD_SAGE_COLOR_COMBOS_INFO_DEFAULT_FOREGROUND_ACCENT = "#172554" SD_SAGE_COLOR_COMBOS_INFO_DEFAULT_BACKGROUND = "#dbe9fe" - SD_SAGE_COLOR_COMBOS_INFO_DEFAULT_BACKGROUND_ACCENT = "#92c5fd" + SD_SAGE_COLOR_COMBOS_INFO_DEFAULT_BACKGROUND_ACCENT = "#93c5fd" SD_SAGE_COLOR_COMBOS_INFO_DEFAULT_ICON_BACKGROUND_ACCENT = "#2463eb" SD_SAGE_COLOR_COMBOS_INFO_SUBTLE_FOREGROUND = "#1c4ed8" SD_SAGE_COLOR_COMBOS_INFO_SUBTLE_FOREGROUND_ACCENT = "#2463eb" - SD_SAGE_COLOR_COMBOS_INFO_SUBTLE_BACKGROUND = "#92c5fd" + SD_SAGE_COLOR_COMBOS_INFO_SUBTLE_BACKGROUND = "#93c5fd" SD_SAGE_COLOR_COMBOS_INFO_BOLD_FOREGROUND = "#dbe9fe" SD_SAGE_COLOR_COMBOS_INFO_BOLD_BACKGROUND = "#2463eb" SD_SAGE_COLOR_COMBOS_LOCKED_DEFAULT_FOREGROUND = "#402fa4" @@ -1035,12 +1035,12 @@ module SageDictionary SD_SAGE_COLOR_COMBOS_DANGER_BOLD_BACKGROUND = "#fda5a5" SD_SAGE_COLOR_COMBOS_PRIMARY_DEFAULT_FOREGROUND = "#fff" SD_SAGE_COLOR_COMBOS_PRIMARY_DEFAULT_FOREGROUND_ACCENT = "#fff" - SD_SAGE_COLOR_COMBOS_PRIMARY_DEFAULT_BACKGROUND = "#92c5fd" + SD_SAGE_COLOR_COMBOS_PRIMARY_DEFAULT_BACKGROUND = "#93c5fd" SD_SAGE_COLOR_COMBOS_PRIMARY_SUBTLE_FOREGROUND = "#fff" SD_SAGE_COLOR_COMBOS_PRIMARY_SUBTLE_FOREGROUND_ACCENT = "#fff" - SD_SAGE_COLOR_COMBOS_PRIMARY_SUBTLE_BACKGROUND = "#92c5fd" + SD_SAGE_COLOR_COMBOS_PRIMARY_SUBTLE_BACKGROUND = "#93c5fd" SD_SAGE_COLOR_COMBOS_PRIMARY_BOLD_FOREGROUND = "#fff" - SD_SAGE_COLOR_COMBOS_PRIMARY_BOLD_BACKGROUND = "#92c5fd" + SD_SAGE_COLOR_COMBOS_PRIMARY_BOLD_BACKGROUND = "#93c5fd" # # Map for COLOR COMBOS diff --git a/packages/sage-assets/lib/stylesheets/components/_badge.scss b/packages/sage-assets/lib/stylesheets/components/_badge.scss index 3859fe2068..c0845ae2d0 100644 --- a/packages/sage-assets/lib/stylesheets/components/_badge.scss +++ b/packages/sage-assets/lib/stylesheets/components/_badge.scss @@ -8,10 +8,9 @@ $-badge-min-height: rem(20px); $-badge-interactive-icon-size: rem(24px); $-badge-interactive-icon-size-decor: rem(28px); -$-badge-padding: sage-spacing(3xs) rem(10px) sage-spacing(3xs) sage-spacing(xs); +$-badge-padding: 1px sage-spacing(xs); $-badge-padding-lg: sage-spacing(2xs) rem(12px); $-badge-border-radius: sage-border(radius-x-large); -$-badge-inset-border: 0 0 0 1px inset; $-badge-statuses: ( danger, draft, @@ -26,6 +25,8 @@ $-badge-statuses: ( align-items: center; position: relative; border-radius: $-badge-border-radius; + border-width: 1px; + border-style: solid; &[class*="sage-badge--icon-only"] { background-color: transparent; @@ -33,15 +34,14 @@ $-badge-statuses: ( } .sage-badge__value { - @extend %t-sage-body-small-med; - + @extend %t-sage-body-med; appearance: none; display: flex; align-items: center; max-width: 100%; min-height: $-badge-min-height; padding: $-badge-padding; - color: sage-color(grey, 950); + letter-spacing: sage-letter-spacing(md); white-space: nowrap; background-color: transparent; border-radius: $-badge-border-radius; @@ -59,8 +59,14 @@ $-badge-statuses: ( } .sage-badge--large & { - @extend %t-sage-body-med; + @extend %t-sage-heading-6; padding: $-badge-padding-lg; + font-family: $-heading-font; + + .sage-badge__value-text { + font-size: sage-font-size(lg, false); + letter-spacing: sage-letter-spacing(sm); + } } } @@ -84,11 +90,9 @@ $-badge-statuses: ( $-color-modifier: ".sage-badge--#{$-color-name}"; #{$-color-modifier} { + color: sage-color-combo($-color-name, default, foreground-accent); background-color: sage-color-combo($-color-name, default, background); - - &:hover:not(:focus):not(:active):not(:disabled):not(.disabled) { - color: sage-color-combo($-color-name, default, background-accent); - } + border-color: sage-color-combo($-color-name, default, background-accent); } #{$-color-modifier} .sage-dot { diff --git a/packages/sage-assets/lib/stylesheets/components/_dot.scss b/packages/sage-assets/lib/stylesheets/components/_dot.scss index bd250539f8..fd66dd49ba 100644 --- a/packages/sage-assets/lib/stylesheets/components/_dot.scss +++ b/packages/sage-assets/lib/stylesheets/components/_dot.scss @@ -31,7 +31,7 @@ $-sage-dot-size--badge: rem(6px); } .sage-badge & { - margin-inline-start: rem(6px); + margin-inline-start: sage-spacing(xs); } .sage-badge--large & { diff --git a/packages/sage-assets/lib/stylesheets/dictionary/_tokens.scss b/packages/sage-assets/lib/stylesheets/dictionary/_tokens.scss index f7a726fbb0..163bb79046 100644 --- a/packages/sage-assets/lib/stylesheets/dictionary/_tokens.scss +++ b/packages/sage-assets/lib/stylesheets/dictionary/_tokens.scss @@ -60,7 +60,7 @@ $sd-sage-color-base-blue-200-classname: "t-sage--color-blue-200"; /// /// color color-base-blue-300-hex /// -$sd-sage-color-base-blue-300-hex: #92c5fd; +$sd-sage-color-base-blue-300-hex: #93c5fd; /// /// color color-base-blue-300-code /// @@ -468,7 +468,7 @@ $sd-sage-color-base-primary-100-classname: "t-sage--color-primary-100"; /// /// color color-base-primary-200-hex /// -$sd-sage-color-base-primary-200-hex: #92c5fd; +$sd-sage-color-base-primary-200-hex: #93c5fd; /// /// color color-base-primary-200-code /// @@ -2028,7 +2028,7 @@ $sd-sage-color-combos-draft-default-foreground-accent: #1a1a19; /// /// color combos color-combos-draft-default-background /// -$sd-sage-color-combos-draft-default-background: #e4e4e4; +$sd-sage-color-combos-draft-default-background: #f0f0f0; /// /// color combos color-combos-draft-default-background-accent /// @@ -2112,7 +2112,7 @@ $sd-sage-color-combos-info-default-background: #dbe9fe; /// /// color combos color-combos-info-default-background-accent /// -$sd-sage-color-combos-info-default-background-accent: #92c5fd; +$sd-sage-color-combos-info-default-background-accent: #93c5fd; /// /// color combos color-combos-info-default-icon-background-accent /// @@ -2128,7 +2128,7 @@ $sd-sage-color-combos-info-subtle-foreground-accent: #2463eb; /// /// color combos color-combos-info-subtle-background /// -$sd-sage-color-combos-info-subtle-background: #92c5fd; +$sd-sage-color-combos-info-subtle-background: #93c5fd; /// /// color combos color-combos-info-bold-foreground /// @@ -2268,7 +2268,7 @@ $sd-sage-color-combos-primary-default-foreground-accent: #fff; /// /// color combos color-combos-primary-default-background /// -$sd-sage-color-combos-primary-default-background: #92c5fd; +$sd-sage-color-combos-primary-default-background: #93c5fd; /// /// color combos color-combos-primary-subtle-foreground /// @@ -2280,7 +2280,7 @@ $sd-sage-color-combos-primary-subtle-foreground-accent: #fff; /// /// color combos color-combos-primary-subtle-background /// -$sd-sage-color-combos-primary-subtle-background: #92c5fd; +$sd-sage-color-combos-primary-subtle-background: #93c5fd; /// /// color combos color-combos-primary-bold-foreground /// @@ -2288,7 +2288,7 @@ $sd-sage-color-combos-primary-bold-foreground: #fff; /// /// color combos color-combos-primary-bold-background /// -$sd-sage-color-combos-primary-bold-background: #92c5fd; +$sd-sage-color-combos-primary-bold-background: #93c5fd; /// /// Map for color combos diff --git a/packages/sage-react/lib/configs/dictionary/tokens.js b/packages/sage-react/lib/configs/dictionary/tokens.js index af0c112b98..dbc4a218ef 100644 --- a/packages/sage-react/lib/configs/dictionary/tokens.js +++ b/packages/sage-react/lib/configs/dictionary/tokens.js @@ -28,7 +28,7 @@ export const COLOR_BASE_BLUE_150_CLASSNAME = 't-sage--color-blue-150'; export const COLOR_BASE_BLUE_200_HEX = '#bfdbfe'; export const COLOR_BASE_BLUE_200_CODE = 'blue-200'; export const COLOR_BASE_BLUE_200_CLASSNAME = 't-sage--color-blue-200'; -export const COLOR_BASE_BLUE_300_HEX = '#92c5fd'; +export const COLOR_BASE_BLUE_300_HEX = '#93c5fd'; export const COLOR_BASE_BLUE_300_CODE = 'blue-300'; export const COLOR_BASE_BLUE_300_CLASSNAME = 't-sage--color-blue-300'; export const COLOR_BASE_BLUE_400_HEX = '#60a5fa'; @@ -130,7 +130,7 @@ export const COLOR_BASE_MERCURY_050_CLASSNAME = 't-sage--color-mercury-050'; export const COLOR_BASE_PRIMARY_100_HEX = '#dbe9fe'; export const COLOR_BASE_PRIMARY_100_CODE = 'primary-100'; export const COLOR_BASE_PRIMARY_100_CLASSNAME = 't-sage--color-primary-100'; -export const COLOR_BASE_PRIMARY_200_HEX = '#92c5fd'; +export const COLOR_BASE_PRIMARY_200_HEX = '#93c5fd'; export const COLOR_BASE_PRIMARY_200_CODE = 'primary-200'; export const COLOR_BASE_PRIMARY_200_CLASSNAME = 't-sage--color-primary-200'; export const COLOR_BASE_PRIMARY_300_HEX = '#2463eb'; @@ -973,7 +973,7 @@ export const COLOR = { // export const COLOR_COMBOS_DRAFT_DEFAULT_FOREGROUND = '#343332'; export const COLOR_COMBOS_DRAFT_DEFAULT_FOREGROUND_ACCENT = '#1a1a19'; -export const COLOR_COMBOS_DRAFT_DEFAULT_BACKGROUND = '#e4e4e4'; +export const COLOR_COMBOS_DRAFT_DEFAULT_BACKGROUND = '#f0f0f0'; export const COLOR_COMBOS_DRAFT_DEFAULT_BACKGROUND_ACCENT = '#d2d1d1'; export const COLOR_COMBOS_DRAFT_DEFAULT_ICON_BACKGROUND_ACCENT = '#6c6a69'; export const COLOR_COMBOS_DRAFT_SUBTLE_FOREGROUND = '#6c6a69'; @@ -994,11 +994,11 @@ export const COLOR_COMBOS_PUBLISHED_BOLD_BACKGROUND = '#079250'; export const COLOR_COMBOS_INFO_DEFAULT_FOREGROUND = '#1c4ed8'; export const COLOR_COMBOS_INFO_DEFAULT_FOREGROUND_ACCENT = '#172554'; export const COLOR_COMBOS_INFO_DEFAULT_BACKGROUND = '#dbe9fe'; -export const COLOR_COMBOS_INFO_DEFAULT_BACKGROUND_ACCENT = '#92c5fd'; +export const COLOR_COMBOS_INFO_DEFAULT_BACKGROUND_ACCENT = '#93c5fd'; export const COLOR_COMBOS_INFO_DEFAULT_ICON_BACKGROUND_ACCENT = '#2463eb'; export const COLOR_COMBOS_INFO_SUBTLE_FOREGROUND = '#1c4ed8'; export const COLOR_COMBOS_INFO_SUBTLE_FOREGROUND_ACCENT = '#2463eb'; -export const COLOR_COMBOS_INFO_SUBTLE_BACKGROUND = '#92c5fd'; +export const COLOR_COMBOS_INFO_SUBTLE_BACKGROUND = '#93c5fd'; export const COLOR_COMBOS_INFO_BOLD_FOREGROUND = '#dbe9fe'; export const COLOR_COMBOS_INFO_BOLD_BACKGROUND = '#2463eb'; export const COLOR_COMBOS_LOCKED_DEFAULT_FOREGROUND = '#402fa4'; @@ -1033,12 +1033,12 @@ export const COLOR_COMBOS_DANGER_BOLD_FOREGROUND = '#fee2e1'; export const COLOR_COMBOS_DANGER_BOLD_BACKGROUND = '#fda5a5'; export const COLOR_COMBOS_PRIMARY_DEFAULT_FOREGROUND = '#fff'; export const COLOR_COMBOS_PRIMARY_DEFAULT_FOREGROUND_ACCENT = '#fff'; -export const COLOR_COMBOS_PRIMARY_DEFAULT_BACKGROUND = '#92c5fd'; +export const COLOR_COMBOS_PRIMARY_DEFAULT_BACKGROUND = '#93c5fd'; export const COLOR_COMBOS_PRIMARY_SUBTLE_FOREGROUND = '#fff'; export const COLOR_COMBOS_PRIMARY_SUBTLE_FOREGROUND_ACCENT = '#fff'; -export const COLOR_COMBOS_PRIMARY_SUBTLE_BACKGROUND = '#92c5fd'; +export const COLOR_COMBOS_PRIMARY_SUBTLE_BACKGROUND = '#93c5fd'; export const COLOR_COMBOS_PRIMARY_BOLD_FOREGROUND = '#fff'; -export const COLOR_COMBOS_PRIMARY_BOLD_BACKGROUND = '#92c5fd'; +export const COLOR_COMBOS_PRIMARY_BOLD_BACKGROUND = '#93c5fd'; // // Map for COLOR COMBOS diff --git a/style-dictionary/tokens/color/base.json b/style-dictionary/tokens/color/base.json index bf918421b3..b86fd1a03a 100644 --- a/style-dictionary/tokens/color/base.json +++ b/style-dictionary/tokens/color/base.json @@ -23,7 +23,7 @@ "classname": { "value": "t-sage--color-blue-200" } }, "300": { - "hex": { "value": "#92c5fd" }, + "hex": { "value": "#93c5fd" }, "code": { "value": "blue-300" }, "classname": { "value": "t-sage--color-blue-300" } }, diff --git a/style-dictionary/tokens/color/combos.json b/style-dictionary/tokens/color/combos.json index 95aa028e6d..cae73feca6 100644 --- a/style-dictionary/tokens/color/combos.json +++ b/style-dictionary/tokens/color/combos.json @@ -10,7 +10,7 @@ "value": "{color.base.grey.950.hex}" }, "background": { - "value": "{color.base.grey.200.hex}" + "value": "{color.base.grey.150.hex}" }, "background-accent": { "value": "{color.base.grey.300.hex}"