From 2e12557dbaffa30c4e0b53fc4f58a5bdf58a5e6a Mon Sep 17 00:00:00 2001 From: Quinton Jason Date: Fri, 23 Aug 2024 14:05:26 -0500 Subject: [PATCH 01/31] fix(frame): add box shadow to bordered frame (#1958) --- packages/sage-assets/lib/stylesheets/layout/_frame.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/sage-assets/lib/stylesheets/layout/_frame.scss b/packages/sage-assets/lib/stylesheets/layout/_frame.scss index cb97fe45c4..d6cfc94b5c 100644 --- a/packages/sage-assets/lib/stylesheets/layout/_frame.scss +++ b/packages/sage-assets/lib/stylesheets/layout/_frame.scss @@ -234,6 +234,7 @@ $-sage-frame-wrap: none; .sage-frame--border-#{$-key} { background-color: sage-color(white); border: #{$-val}; + box-shadow: sage-shadow(100); } } From 49951e28ddb4157743021d23f6ce775b6d4e0572 Mon Sep 17 00:00:00 2001 From: Quinton Jason Date: Wed, 4 Sep 2024 10:20:43 -0500 Subject: [PATCH 02/31] style: remove border from box like elements with box shadows (#1967) * style: add shadow to frame * style: remove border from box-like elements * chore: remove white space for linter --- packages/sage-assets/lib/stylesheets/layout/_frame.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/sage-assets/lib/stylesheets/layout/_frame.scss b/packages/sage-assets/lib/stylesheets/layout/_frame.scss index d6cfc94b5c..cb97fe45c4 100644 --- a/packages/sage-assets/lib/stylesheets/layout/_frame.scss +++ b/packages/sage-assets/lib/stylesheets/layout/_frame.scss @@ -234,7 +234,6 @@ $-sage-frame-wrap: none; .sage-frame--border-#{$-key} { background-color: sage-color(white); border: #{$-val}; - box-shadow: sage-shadow(100); } } From 60e8be038e02a071d562a217e07d47435eb6bc61 Mon Sep 17 00:00:00 2001 From: Quinton Jason Date: Tue, 20 Aug 2024 09:19:11 -0500 Subject: [PATCH 03/31] fix: change legacy colors to mapped values ie red 500 to red 95 --- .../stylesheets/docs/_rouge_theme.scss | 16 ++++----- .../stylesheets/docs/_status_key.scss | 4 +-- .../lib/stylesheets/components/_alert.scss | 8 ++--- .../lib/stylesheets/components/_avatar.scss | 4 +-- .../lib/stylesheets/components/_banner.scss | 4 +-- .../lib/stylesheets/components/_button.scss | 34 +++++++++---------- .../lib/stylesheets/components/_checkbox.scss | 6 ++-- .../stylesheets/components/_data_card.scss | 8 ++--- .../lib/stylesheets/components/_dropdown.scss | 6 ++-- .../stylesheets/components/_form_input.scss | 2 +- .../stylesheets/components/_form_select.scss | 2 +- .../lib/stylesheets/components/_link.scss | 8 ++--- .../lib/stylesheets/components/_meter.scss | 2 +- .../lib/stylesheets/components/_radio.scss | 2 +- .../lib/stylesheets/components/_switch.scss | 4 +-- .../lib/stylesheets/components/_toast.scss | 2 +- .../components/_transaction_card.scss | 4 +-- .../stylesheets/components/_upload_card.scss | 2 +- .../lib/stylesheets/core/_variables.scss | 4 +-- .../lib/stylesheets/core/mixins/_sage.scss | 4 +-- .../lib/stylesheets/tokens/_border.scss | 2 +- .../tokens/_border_interactive.scss | 4 +-- 22 files changed, 66 insertions(+), 66 deletions(-) diff --git a/docs/lib/sage-frontend/stylesheets/docs/_rouge_theme.scss b/docs/lib/sage-frontend/stylesheets/docs/_rouge_theme.scss index 3fd03479c0..34dbcf0bf5 100644 --- a/docs/lib/sage-frontend/stylesheets/docs/_rouge_theme.scss +++ b/docs/lib/sage-frontend/stylesheets/docs/_rouge_theme.scss @@ -11,19 +11,19 @@ $-color-9: sage-color(charcoal, 400); // Comments of various sorts $-color-3: sage-color(charcoal, 300); // Subheading -$-color-12: sage-color(red, 300); +$-color-12: sage-color(red, 50); // Constant -$-color-18: sage-color(red, 300); +$-color-18: sage-color(red, 50); // Keyword type -$-color-14: sage-color(red, 300); +$-color-14: sage-color(red, 50); // Strings -$-color-15: sage-color(red, 300); +$-color-15: sage-color(red, 50); // Name exception -$-color-21: sage-color(red, 200); +$-color-21: sage-color(red, 30); // Error underlines -$-color-4: sage-color(red, 300); +$-color-4: sage-color(red, 50); // Generic deleted? -$-color-8: sage-color(red, 200); +$-color-8: sage-color(red, 30); // Escape string $-color-25: sage-color(orange, 200); // Regex/interpolation @@ -58,7 +58,7 @@ $-color-23: sage-color(primary, 300); .hll { background-color: $-color-2; } - + /* Comment */ .c { color: $-color-3; diff --git a/docs/lib/sage-frontend/stylesheets/docs/_status_key.scss b/docs/lib/sage-frontend/stylesheets/docs/_status_key.scss index 2ba3100bcc..b5ef306704 100644 --- a/docs/lib/sage-frontend/stylesheets/docs/_status_key.scss +++ b/docs/lib/sage-frontend/stylesheets/docs/_status_key.scss @@ -43,8 +43,8 @@ } &--stop { - border-color: sage-color(red, 300); - background: sage-color(red, 300); + border-color: sage-color(red, 50); + background: sage-color(red, 50); } } diff --git a/packages/sage-assets/lib/stylesheets/components/_alert.scss b/packages/sage-assets/lib/stylesheets/components/_alert.scss index 354bb2fe1d..35db0453c5 100644 --- a/packages/sage-assets/lib/stylesheets/components/_alert.scss +++ b/packages/sage-assets/lib/stylesheets/components/_alert.scss @@ -17,8 +17,8 @@ $-alert-background-colors: ( warning: sage-color(yellow, 100), approaching: sage-color(yellow, 100), reached: sage-color(orange, 100), - exceeded: sage-color(red, 100), - danger: sage-color(red, 100), + exceeded: sage-color(red, 15), + danger: sage-color(red, 15), ); $-alert-icon-colors: ( @@ -30,8 +30,8 @@ $-alert-icon-colors: ( warning: sage-color(yellow, 400), approaching: sage-color(yellow, 400), reached: sage-color(orange, 400), - exceeded: sage-color(red, 300), - danger: sage-color(red, 300), + exceeded: sage-color(red, 50), + danger: sage-color(red, 50), ); $-alert-border-colors: ( diff --git a/packages/sage-assets/lib/stylesheets/components/_avatar.scss b/packages/sage-assets/lib/stylesheets/components/_avatar.scss index f904c0e384..41ff596b58 100644 --- a/packages/sage-assets/lib/stylesheets/components/_avatar.scss +++ b/packages/sage-assets/lib/stylesheets/components/_avatar.scss @@ -33,8 +33,8 @@ $-avatar-ring-colors: ( bg: sage-color(orange, 100) ), red: ( - main: sage-color(red, 300), - bg: sage-color(red, 100) + main: sage-color(red, 50), + bg: sage-color(red, 15) ) ); $-avatar-tile-size: rem(216px); diff --git a/packages/sage-assets/lib/stylesheets/components/_banner.scss b/packages/sage-assets/lib/stylesheets/components/_banner.scss index 4f8d4fd62e..315c49ba79 100644 --- a/packages/sage-assets/lib/stylesheets/components/_banner.scss +++ b/packages/sage-assets/lib/stylesheets/components/_banner.scss @@ -26,9 +26,9 @@ $-banner-colors: ( icon: "warning", ), danger: ( - background: sage-color(red, 300), + background: sage-color(red, 50), text: sage-color(white), - text-hover: sage-color(red, 100), + text-hover: sage-color(red, 15), icon: "danger", ), ); diff --git a/packages/sage-assets/lib/stylesheets/components/_button.scss b/packages/sage-assets/lib/stylesheets/components/_button.scss index dee431d146..3625249fa2 100644 --- a/packages/sage-assets/lib/stylesheets/components/_button.scss +++ b/packages/sage-assets/lib/stylesheets/components/_button.scss @@ -90,23 +90,23 @@ $-btn-base-styles: ( danger: ( default: ( color: sage-color(white), - background-color: sage-color(red, 300), - border-color: sage-color(red, 300), - ring-color: sage-color(red, 200), + background-color: sage-color(red, 50), + border-color: sage-color(red, 50), + ring-color: sage-color(red, 30), ), hover: ( color: sage-color(white), - background-color: sage-color(red, 400), + background-color: sage-color(red, 80), ), focus: ( color: sage-color(white), - background-color: sage-color(red, 300), - border-color: sage-color(red, 300), + background-color: sage-color(red, 50), + border-color: sage-color(red, 50), ), disabled: ( - color: sage-color(red, 200), - background-color: sage-color(red, 100), - border-color: sage-color(red, 100), + color: sage-color(red, 30), + background-color: sage-color(red, 15), + border-color: sage-color(red, 15), ) ), ); @@ -137,12 +137,12 @@ $-btn-subtle-styles: ( disabled: sage-color(charcoal, 100), ), danger: ( - default: sage-color(red, 300), - hover: sage-color(red, 300), - hover-background: sage-color(red, 100), - focus: sage-color(red, 300), - focus-outline: sage-color(red, 200), - disabled: sage-color(red, 200), + default: sage-color(red, 50), + hover: sage-color(red, 50), + hover-background: sage-color(red, 15), + focus: sage-color(red, 50), + focus-outline: sage-color(red, 30), + disabled: sage-color(red, 30), ), ); @@ -157,8 +157,8 @@ $-alert-close-btn-background-colors: ( warning: sage-color(yellow, 200), approaching: sage-color(yellow, 200), reached: sage-color(orange, 200), - exceeded: sage-color(red, 200), - danger: sage-color(red, 200), + exceeded: sage-color(red, 30), + danger: sage-color(red, 30), ); // diff --git a/packages/sage-assets/lib/stylesheets/components/_checkbox.scss b/packages/sage-assets/lib/stylesheets/components/_checkbox.scss index 81c73ec6ae..d0291ce397 100644 --- a/packages/sage-assets/lib/stylesheets/components/_checkbox.scss +++ b/packages/sage-assets/lib/stylesheets/components/_checkbox.scss @@ -14,7 +14,7 @@ $-checkbox-color-checked-hover: sage-color(charcoal, 500); $-checkbox-color-disabled: sage-color(grey, 200); $-checkbox-color-disabled-border: sage-color(grey, 300); $-checkbox-color-disabled-checked: sage-color(charcoal, 100); -$-checkbox-color-error: sage-color(red, 300); +$-checkbox-color-error: sage-color(red, 50); $-checkbox-size: rem(16px); $-checkbox-label-spacing: rem(12px); @@ -280,7 +280,7 @@ $-checkbox-focus-outline-color: sage-color(purple, 30); } &::before { - border-color: sage-color(red, 200); + border-color: sage-color(red, 30); } } @@ -301,7 +301,7 @@ $-checkbox-focus-outline-color: sage-color(purple, 30); .sage-checkbox--error &, .sage-checkbox__input:invalid + & { - color: sage-color(red, 300); + color: sage-color(red, 50); } .sage-checkbox__input:disabled ~ & { diff --git a/packages/sage-assets/lib/stylesheets/components/_data_card.scss b/packages/sage-assets/lib/stylesheets/components/_data_card.scss index 9c614c9288..4f3a009c85 100644 --- a/packages/sage-assets/lib/stylesheets/components/_data_card.scss +++ b/packages/sage-assets/lib/stylesheets/components/_data_card.scss @@ -11,8 +11,8 @@ $-data-card-colors: ( text-color: sage-color(charcoal, 400), ), danger: ( - border-color: sage-color(red, 300), - text-color: sage-color(red, 300), + border-color: sage-color(red, 50), + text-color: sage-color(red, 50), ), muted: ( border-color: sage-color(charcoal, 300), @@ -118,7 +118,7 @@ $-data-card-padding: sage-spacing(xs); gap: sage-spacing(sm); padding-bottom: sage-spacing(sm); } - + .sage-data-card-scroll-container &:not(:last-child) { padding-right: sage-spacing(md); border-right: 1px solid sage-color(grey, 400); @@ -138,7 +138,7 @@ $-data-card-padding: sage-spacing(xs); .sage-data-card-group__title { @extend %t-sage-body-semi; - + @each $-color-name, $-values in $-data-card-colors { @if $-color-name == default { color: map-get($-values, text-color); diff --git a/packages/sage-assets/lib/stylesheets/components/_dropdown.scss b/packages/sage-assets/lib/stylesheets/components/_dropdown.scss index afa35f8c9c..5f8fda5f53 100644 --- a/packages/sage-assets/lib/stylesheets/components/_dropdown.scss +++ b/packages/sage-assets/lib/stylesheets/components/_dropdown.scss @@ -240,11 +240,11 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs); } .sage-dropdown__item-control--danger { - color: sage-color(red, 300); + color: sage-color(red, 50); &:hover { - color: sage-color(red, 300); - background-color: sage-color(red, 100); + color: sage-color(red, 50); + background-color: sage-color(red, 15); } } diff --git a/packages/sage-assets/lib/stylesheets/components/_form_input.scss b/packages/sage-assets/lib/stylesheets/components/_form_input.scss index b71c650aee..cdb5e70e5d 100644 --- a/packages/sage-assets/lib/stylesheets/components/_form_input.scss +++ b/packages/sage-assets/lib/stylesheets/components/_form_input.scss @@ -160,7 +160,7 @@ $-input-text-height: sage-font-size(body); } .sage-form-field--error & i { - color: sage-color(red, 300); + color: sage-color(red, 50); } } diff --git a/packages/sage-assets/lib/stylesheets/components/_form_select.scss b/packages/sage-assets/lib/stylesheets/components/_form_select.scss index b05b1bb0fd..8add07d3b3 100644 --- a/packages/sage-assets/lib/stylesheets/components/_form_select.scss +++ b/packages/sage-assets/lib/stylesheets/components/_form_select.scss @@ -10,7 +10,7 @@ $-select-color-border-hover: sage-color(charcoal, 100); $-select-color-border-selected: sage-color(primary, 200); $-select-color-default: sage-color(charcoal, 200); $-select-color-default-hover: sage-color(charcoal, 400); -$-select-color-error: sage-color(red, 300); +$-select-color-error: sage-color(red, 50); $-select-color-label-background: sage-color(white); $-select-color-success: sage-color(primary, 200); $-select-filled-top-padding: rem(4.4px); diff --git a/packages/sage-assets/lib/stylesheets/components/_link.scss b/packages/sage-assets/lib/stylesheets/components/_link.scss index 37b3142922..762dd8feab 100644 --- a/packages/sage-assets/lib/stylesheets/components/_link.scss +++ b/packages/sage-assets/lib/stylesheets/components/_link.scss @@ -45,14 +45,14 @@ $-link-base-styles: ( ), danger:( default: ( - color: sage-color(red, 300), + color: sage-color(red, 50), ), hover: ( - color: sage-color(red, 400), + color: sage-color(red, 80), ), focus-visible: ( - color: sage-color(red, 300), - focus-outline: sage-color(red, 200), + color: sage-color(red, 50), + focus-outline: sage-color(red, 30), ), ) ); diff --git a/packages/sage-assets/lib/stylesheets/components/_meter.scss b/packages/sage-assets/lib/stylesheets/components/_meter.scss index 25965238d8..2396a37417 100644 --- a/packages/sage-assets/lib/stylesheets/components/_meter.scss +++ b/packages/sage-assets/lib/stylesheets/components/_meter.scss @@ -7,7 +7,7 @@ $-meter-bar-height: rem(4px); $-meter-color-bg: sage-color(grey, 300); -$-meter-bar-low: rgba(sage-color(red, 500), 0.9); +$-meter-bar-low: rgba(sage-color(red, 95), 0.9); $-meter-bar-med: rgba(sage-color(orange), 0.9); $-meter-bar-success: rgba(sage-color(sage, 200), 0.9); $-meter-bar-max: rgba(sage-color(sage, 300), 0.9); diff --git a/packages/sage-assets/lib/stylesheets/components/_radio.scss b/packages/sage-assets/lib/stylesheets/components/_radio.scss index 1122c0e480..192f977f01 100644 --- a/packages/sage-assets/lib/stylesheets/components/_radio.scss +++ b/packages/sage-assets/lib/stylesheets/components/_radio.scss @@ -16,7 +16,7 @@ $-radio-color-error: map-get($sage-radio-colors, error); $-radio-color-hover: map-get($sage-radio-colors, hover); $-radio-color-text-disabled: sage-color(grey, 500); $-radio-color-focus-outline: sage-color(purple, 30); -$-radio-color-focus-outline-error: sage-color(red, 200); +$-radio-color-focus-outline-error: sage-color(red, 30); // Additional configurations $-radio-button-size: $sage-radio-size; diff --git a/packages/sage-assets/lib/stylesheets/components/_switch.scss b/packages/sage-assets/lib/stylesheets/components/_switch.scss index 4066e34501..cd0f794d01 100644 --- a/packages/sage-assets/lib/stylesheets/components/_switch.scss +++ b/packages/sage-assets/lib/stylesheets/components/_switch.scss @@ -15,8 +15,8 @@ $-switch-color-disabled: sage-color(grey, 300); $-switch-color-disabled-text: sage-color(charcoal, 300); $-switch-color-disabled-checked: sage-color(grey, 300); $-switch-color-disabled-checked-text: sage-color(charcoal, 100); -$-switch-color-error: sage-color(red, 300); -$-switch-focus-outline-error-color: sage-color(red, 200); +$-switch-color-error: sage-color(red, 50); +$-switch-focus-outline-error-color: sage-color(red, 30); // Switch $-switch-label-left-spacing: rem(12px); diff --git a/packages/sage-assets/lib/stylesheets/components/_toast.scss b/packages/sage-assets/lib/stylesheets/components/_toast.scss index a10b61b0e2..5080120c60 100644 --- a/packages/sage-assets/lib/stylesheets/components/_toast.scss +++ b/packages/sage-assets/lib/stylesheets/components/_toast.scss @@ -94,7 +94,7 @@ $-toast-bottom-spacing: sage-spacing(xs); } &.sage-toast--style-danger { - background-color: sage-color(red, 300); + background-color: sage-color(red, 50); } &.sage-toast--dismissed { diff --git a/packages/sage-assets/lib/stylesheets/components/_transaction_card.scss b/packages/sage-assets/lib/stylesheets/components/_transaction_card.scss index ad53bfb056..78001ac72c 100644 --- a/packages/sage-assets/lib/stylesheets/components/_transaction_card.scss +++ b/packages/sage-assets/lib/stylesheets/components/_transaction_card.scss @@ -66,7 +66,7 @@ $-transaction-card-price-max-width: rem(100px); } .sage-transaction-card__amount--red { - color: sage-color(red, 300); + color: sage-color(red, 50); } .sage-transaction-card__label { @@ -91,7 +91,7 @@ $-transaction-card-price-max-width: rem(100px); } .sage-transaction-card__state--red { - color: sage-color(red, 300); + color: sage-color(red, 50); } .sage-transaction-card__state--sage { diff --git a/packages/sage-assets/lib/stylesheets/components/_upload_card.scss b/packages/sage-assets/lib/stylesheets/components/_upload_card.scss index 7272556b91..1ae071c1a0 100644 --- a/packages/sage-assets/lib/stylesheets/components/_upload_card.scss +++ b/packages/sage-assets/lib/stylesheets/components/_upload_card.scss @@ -7,7 +7,7 @@ $-upload-card-border-radius: sage-border(radius-large); $-upload-card-border-width: 2; -$-upload-card-error-color: sage-color(red, 300); +$-upload-card-error-color: sage-color(red, 50); $-upload-card-body-width: rem(200px); $-upload-card-body-width-stack: rem(340px); $-upload-card-preview-border-radius: sage-border(radius-medium); diff --git a/packages/sage-assets/lib/stylesheets/core/_variables.scss b/packages/sage-assets/lib/stylesheets/core/_variables.scss index 898977de9d..5f3de1014c 100644 --- a/packages/sage-assets/lib/stylesheets/core/_variables.scss +++ b/packages/sage-assets/lib/stylesheets/core/_variables.scss @@ -55,7 +55,7 @@ $sage-field-colors: ( default: sage-color(charcoal, 300), disabled: sage-color(grey, 500), disabled-background: sage-color(grey, 200), - error: sage-color(red, 300), + error: sage-color(red, 50), label-background: sage-color(white), success: sage-color(primary, 300), ); @@ -72,7 +72,7 @@ $sage-radio-colors: ( checked-inner: sage-color(white), default: sage-color(grey, 400), disabled: sage-color(grey, 200), - error: sage-color(red, 300), + error: sage-color(red, 50), hover: sage-color(grey, 500), ); diff --git a/packages/sage-assets/lib/stylesheets/core/mixins/_sage.scss b/packages/sage-assets/lib/stylesheets/core/mixins/_sage.scss index 79cd6ccafe..12db832113 100644 --- a/packages/sage-assets/lib/stylesheets/core/mixins/_sage.scss +++ b/packages/sage-assets/lib/stylesheets/core/mixins/_sage.scss @@ -473,7 +473,7 @@ .sage-form-field--error &:focus:not(:disabled), .sage-form-field--error &:not(:placeholder-shown), .sage-form-field--error &:required:not(:placeholder-shown):not(:valid) { - @include sage-focus-ring(sage-color(red, 200)); + @include sage-focus-ring(sage-color(red, 30)); box-shadow: sage-border-interactive(error); @@ -552,7 +552,7 @@ color: sage-color(charcoal, 200); .sage-form-field--error & { - color: sage-color(red, 300); + color: sage-color(red, 50); &::before { @include sage-icon-base(danger, md, pine); diff --git a/packages/sage-assets/lib/stylesheets/tokens/_border.scss b/packages/sage-assets/lib/stylesheets/tokens/_border.scss index 7a4ad74b82..74c157fd21 100644 --- a/packages/sage-assets/lib/stylesheets/tokens/_border.scss +++ b/packages/sage-assets/lib/stylesheets/tokens/_border.scss @@ -10,7 +10,7 @@ /// $sage-borders: ( default: rem(1px) solid sage-color(grey, 300), - error: rem(1px) solid sage-color(red, 300), + error: rem(1px) solid sage-color(red, 50), interactive: rem(1px) solid sage-color(grey, 400), interactive-hover: rem(1px) solid sage-color(grey, 500), radius-small: rem(4px), diff --git a/packages/sage-assets/lib/stylesheets/tokens/_border_interactive.scss b/packages/sage-assets/lib/stylesheets/tokens/_border_interactive.scss index 91ab7c33fa..4114bb6538 100644 --- a/packages/sage-assets/lib/stylesheets/tokens/_border_interactive.scss +++ b/packages/sage-assets/lib/stylesheets/tokens/_border_interactive.scss @@ -13,8 +13,8 @@ $sage-borders-interactive: ( hover: 0 0 0 1px sage-color(grey, 500), focus: 0 0 0 4px sage-color(primary, 200), selected: 0 0 0 4px sage-color(charcoal, 400), - error: 0 0 0 1px sage-color(red, 300), - error-focus: 0 0 0 4px sage-color(red, 300), + error: 0 0 0 1px sage-color(red, 50), + error-focus: 0 0 0 4px sage-color(red, 50), disabled: 0 0 0 1px sage-color(grey, 300), ); From db390594eef71df4b2947d772eff09e4546acf5f Mon Sep 17 00:00:00 2001 From: Quinton Jason Date: Tue, 20 Aug 2024 09:28:00 -0500 Subject: [PATCH 04/31] fix: remove old 100 tokens --- .../app/sage_tokens/sage_dictionary.rb | 40 --------- .../lib/stylesheets/dictionary/_tokens.scss | 85 ------------------- .../lib/configs/dictionary/tokens.js | 40 --------- style-dictionary/tokens/color/base.json | 25 ------ style-dictionary/tokens/color/combos.json | 20 ++--- style-dictionary/tokens/color/core.json | 2 +- 6 files changed, 11 insertions(+), 201 deletions(-) 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 f76cae65af..28fa09edd5 100644 --- a/docs/lib/sage_rails/app/sage_tokens/sage_dictionary.rb +++ b/docs/lib/sage_rails/app/sage_tokens/sage_dictionary.rb @@ -246,21 +246,6 @@ module SageDictionary SD_SAGE_COLOR_BASE_RED_95_HEX = "#572627" SD_SAGE_COLOR_BASE_RED_95_CODE = "red-95" SD_SAGE_COLOR_BASE_RED_95_CLASSNAME = "t-sage--color-red-95" - SD_SAGE_COLOR_BASE_RED_100_HEX = "#fee2e1" - SD_SAGE_COLOR_BASE_RED_100_CODE = "red-100" - SD_SAGE_COLOR_BASE_RED_100_CLASSNAME = "t-sage--color-red-100" - SD_SAGE_COLOR_BASE_RED_200_HEX = "#fda5a5" - SD_SAGE_COLOR_BASE_RED_200_CODE = "red-200" - SD_SAGE_COLOR_BASE_RED_200_CLASSNAME = "t-sage--color-red-200" - SD_SAGE_COLOR_BASE_RED_300_HEX = "#ef4444" - SD_SAGE_COLOR_BASE_RED_300_CODE = "red-300" - SD_SAGE_COLOR_BASE_RED_300_CLASSNAME = "t-sage--color-red-300" - SD_SAGE_COLOR_BASE_RED_400_HEX = "#991b1b" - SD_SAGE_COLOR_BASE_RED_400_CODE = "red-400" - SD_SAGE_COLOR_BASE_RED_400_CLASSNAME = "t-sage--color-red-400" - SD_SAGE_COLOR_BASE_RED_500_HEX = "#572627" - SD_SAGE_COLOR_BASE_RED_500_CODE = "red-500" - SD_SAGE_COLOR_BASE_RED_500_CLASSNAME = "t-sage--color-red-500" SD_SAGE_COLOR_BASE_ORANGE_100_HEX = "#ffe3d4" SD_SAGE_COLOR_BASE_ORANGE_100_CODE = "orange-100" SD_SAGE_COLOR_BASE_ORANGE_100_CLASSNAME = "t-sage--color-orange-100" @@ -816,31 +801,6 @@ module SageDictionary "CODE": SD_SAGE_COLOR_BASE_RED_95_CODE, "CLASSNAME": SD_SAGE_COLOR_BASE_RED_95_CLASSNAME, }, - "100": { - "HEX": SD_SAGE_COLOR_BASE_RED_100_HEX, - "CODE": SD_SAGE_COLOR_BASE_RED_100_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_RED_100_CLASSNAME, - }, - "200": { - "HEX": SD_SAGE_COLOR_BASE_RED_200_HEX, - "CODE": SD_SAGE_COLOR_BASE_RED_200_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_RED_200_CLASSNAME, - }, - "300": { - "HEX": SD_SAGE_COLOR_BASE_RED_300_HEX, - "CODE": SD_SAGE_COLOR_BASE_RED_300_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_RED_300_CLASSNAME, - }, - "400": { - "HEX": SD_SAGE_COLOR_BASE_RED_400_HEX, - "CODE": SD_SAGE_COLOR_BASE_RED_400_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_RED_400_CLASSNAME, - }, - "500": { - "HEX": SD_SAGE_COLOR_BASE_RED_500_HEX, - "CODE": SD_SAGE_COLOR_BASE_RED_500_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_RED_500_CLASSNAME, - }, }, "ORANGE": { "100": { diff --git a/packages/sage-assets/lib/stylesheets/dictionary/_tokens.scss b/packages/sage-assets/lib/stylesheets/dictionary/_tokens.scss index 8f5b4b5b52..5720d8616d 100644 --- a/packages/sage-assets/lib/stylesheets/dictionary/_tokens.scss +++ b/packages/sage-assets/lib/stylesheets/dictionary/_tokens.scss @@ -922,66 +922,6 @@ $sd-sage-color-base-red-95-code: "red-95"; /// $sd-sage-color-base-red-95-classname: "t-sage--color-red-95"; /// -/// color color-base-red-100-hex -/// -$sd-sage-color-base-red-100-hex: #fee2e1; -/// -/// color color-base-red-100-code -/// -$sd-sage-color-base-red-100-code: "red-100"; -/// -/// color color-base-red-100-classname -/// -$sd-sage-color-base-red-100-classname: "t-sage--color-red-100"; -/// -/// color color-base-red-200-hex -/// -$sd-sage-color-base-red-200-hex: #fda5a5; -/// -/// color color-base-red-200-code -/// -$sd-sage-color-base-red-200-code: "red-200"; -/// -/// color color-base-red-200-classname -/// -$sd-sage-color-base-red-200-classname: "t-sage--color-red-200"; -/// -/// color color-base-red-300-hex -/// -$sd-sage-color-base-red-300-hex: #ef4444; -/// -/// color color-base-red-300-code -/// -$sd-sage-color-base-red-300-code: "red-300"; -/// -/// color color-base-red-300-classname -/// -$sd-sage-color-base-red-300-classname: "t-sage--color-red-300"; -/// -/// color color-base-red-400-hex -/// -$sd-sage-color-base-red-400-hex: #991b1b; -/// -/// color color-base-red-400-code -/// -$sd-sage-color-base-red-400-code: "red-400"; -/// -/// color color-base-red-400-classname -/// -$sd-sage-color-base-red-400-classname: "t-sage--color-red-400"; -/// -/// color color-base-red-500-hex -/// -$sd-sage-color-base-red-500-hex: #572627; -/// -/// color color-base-red-500-code -/// -$sd-sage-color-base-red-500-code: "red-500"; -/// -/// color color-base-red-500-classname -/// -$sd-sage-color-base-red-500-classname: "t-sage--color-red-500"; -/// /// color color-base-orange-100-hex /// $sd-sage-color-base-orange-100-hex: #ffe3d4; @@ -2022,31 +1962,6 @@ $sd-sage-color: ( code: $sd-sage-color-base-red-95-code, classname: $sd-sage-color-base-red-95-classname, ), - 100: ( - hex: $sd-sage-color-base-red-100-hex, - code: $sd-sage-color-base-red-100-code, - classname: $sd-sage-color-base-red-100-classname, - ), - 200: ( - hex: $sd-sage-color-base-red-200-hex, - code: $sd-sage-color-base-red-200-code, - classname: $sd-sage-color-base-red-200-classname, - ), - 300: ( - hex: $sd-sage-color-base-red-300-hex, - code: $sd-sage-color-base-red-300-code, - classname: $sd-sage-color-base-red-300-classname, - ), - 400: ( - hex: $sd-sage-color-base-red-400-hex, - code: $sd-sage-color-base-red-400-code, - classname: $sd-sage-color-base-red-400-classname, - ), - 500: ( - hex: $sd-sage-color-base-red-500-hex, - code: $sd-sage-color-base-red-500-code, - classname: $sd-sage-color-base-red-500-classname, - ), ), orange: ( 100: ( diff --git a/packages/sage-react/lib/configs/dictionary/tokens.js b/packages/sage-react/lib/configs/dictionary/tokens.js index fc6635ea4f..584833ee99 100644 --- a/packages/sage-react/lib/configs/dictionary/tokens.js +++ b/packages/sage-react/lib/configs/dictionary/tokens.js @@ -244,21 +244,6 @@ export const COLOR_BASE_RED_90_CLASSNAME = 't-sage--color-red-90'; export const COLOR_BASE_RED_95_HEX = '#572627'; export const COLOR_BASE_RED_95_CODE = 'red-95'; export const COLOR_BASE_RED_95_CLASSNAME = 't-sage--color-red-95'; -export const COLOR_BASE_RED_100_HEX = '#fee2e1'; -export const COLOR_BASE_RED_100_CODE = 'red-100'; -export const COLOR_BASE_RED_100_CLASSNAME = 't-sage--color-red-100'; -export const COLOR_BASE_RED_200_HEX = '#fda5a5'; -export const COLOR_BASE_RED_200_CODE = 'red-200'; -export const COLOR_BASE_RED_200_CLASSNAME = 't-sage--color-red-200'; -export const COLOR_BASE_RED_300_HEX = '#ef4444'; -export const COLOR_BASE_RED_300_CODE = 'red-300'; -export const COLOR_BASE_RED_300_CLASSNAME = 't-sage--color-red-300'; -export const COLOR_BASE_RED_400_HEX = '#991b1b'; -export const COLOR_BASE_RED_400_CODE = 'red-400'; -export const COLOR_BASE_RED_400_CLASSNAME = 't-sage--color-red-400'; -export const COLOR_BASE_RED_500_HEX = '#572627'; -export const COLOR_BASE_RED_500_CODE = 'red-500'; -export const COLOR_BASE_RED_500_CLASSNAME = 't-sage--color-red-500'; export const COLOR_BASE_ORANGE_100_HEX = '#ffe3d4'; export const COLOR_BASE_ORANGE_100_CODE = 'orange-100'; export const COLOR_BASE_ORANGE_100_CLASSNAME = 't-sage--color-orange-100'; @@ -814,31 +799,6 @@ export const COLOR = { CODE: COLOR_BASE_RED_95_CODE, CLASSNAME: COLOR_BASE_RED_95_CLASSNAME, }, - 100: { - HEX: COLOR_BASE_RED_100_HEX, - CODE: COLOR_BASE_RED_100_CODE, - CLASSNAME: COLOR_BASE_RED_100_CLASSNAME, - }, - 200: { - HEX: COLOR_BASE_RED_200_HEX, - CODE: COLOR_BASE_RED_200_CODE, - CLASSNAME: COLOR_BASE_RED_200_CLASSNAME, - }, - 300: { - HEX: COLOR_BASE_RED_300_HEX, - CODE: COLOR_BASE_RED_300_CODE, - CLASSNAME: COLOR_BASE_RED_300_CLASSNAME, - }, - 400: { - HEX: COLOR_BASE_RED_400_HEX, - CODE: COLOR_BASE_RED_400_CODE, - CLASSNAME: COLOR_BASE_RED_400_CLASSNAME, - }, - 500: { - HEX: COLOR_BASE_RED_500_HEX, - CODE: COLOR_BASE_RED_500_CODE, - CLASSNAME: COLOR_BASE_RED_500_CLASSNAME, - }, }, ORANGE: { 100: { diff --git a/style-dictionary/tokens/color/base.json b/style-dictionary/tokens/color/base.json index 04e1dadf4a..bca4e9a167 100644 --- a/style-dictionary/tokens/color/base.json +++ b/style-dictionary/tokens/color/base.json @@ -388,31 +388,6 @@ "hex": { "value": "#572627" }, "code": { "value": "red-95" }, "classname": { "value": "t-sage--color-red-95" } - }, - "100": { - "hex": { "value": "{color.base.red.15.hex.value}" }, - "code": { "value": "red-100" }, - "classname": { "value": "t-sage--color-red-100" } - }, - "200": { - "hex": { "value": "{color.base.red.30.hex.value}" }, - "code": { "value": "red-200" }, - "classname": { "value": "t-sage--color-red-200" } - }, - "300": { - "hex": { "value": "{color.base.red.50.hex.value}" }, - "code": { "value": "red-300" }, - "classname": { "value": "t-sage--color-red-300" } - }, - "400": { - "hex": { "value": "{color.base.red.80.hex.value}" }, - "code": { "value": "red-400" }, - "classname": { "value": "t-sage--color-red-400" } - }, - "500": { - "hex": { "value": "{color.base.red.95.hex.value}" }, - "code": { "value": "red-500" }, - "classname": { "value": "t-sage--color-red-500" } } }, "orange": { diff --git a/style-dictionary/tokens/color/combos.json b/style-dictionary/tokens/color/combos.json index 751ccbf373..1ce480ed87 100644 --- a/style-dictionary/tokens/color/combos.json +++ b/style-dictionary/tokens/color/combos.json @@ -194,38 +194,38 @@ "danger": { "default": { "foreground": { - "value": "{color.base.red.400.hex}" + "value": "{color.base.red.80.hex}" }, "foreground-accent": { - "value": "{color.base.red.500.hex}" + "value": "{color.base.red.95.hex}" }, "background": { - "value": "{color.base.red.100.hex}" + "value": "{color.base.red.15.hex}" }, "background-accent": { - "value": "{color.base.red.200.hex}" + "value": "{color.base.red.30.hex}" }, "icon-background-accent": { - "value": "{color.base.red.300.hex}" + "value": "{color.base.red.50.hex}" } }, "subtle": { "foreground": { - "value": "{color.base.red.400.hex}" + "value": "{color.base.red.80.hex}" }, "foreground-accent": { - "value": "{color.base.red.200.hex}" + "value": "{color.base.red.30.hex}" }, "background": { - "value": "{color.base.red.200.hex}" + "value": "{color.base.red.30.hex}" } }, "bold": { "foreground": { - "value": "{color.base.red.100.hex}" + "value": "{color.base.red.15.hex}" }, "background": { - "value": "{color.base.red.200.hex}" + "value": "{color.base.red.30.hex}" } } }, diff --git a/style-dictionary/tokens/color/core.json b/style-dictionary/tokens/color/core.json index 96e442ee28..c83df419cb 100644 --- a/style-dictionary/tokens/color/core.json +++ b/style-dictionary/tokens/color/core.json @@ -20,7 +20,7 @@ "value": "{color.base.yellow.300.hex}" }, "red": { - "value": "{color.base.red.300.hex}" + "value": "{color.base.red.50.hex}" }, "orange": { "value": "{color.base.orange.300.hex}" From 9ca76b377edcfcbead936a33316f9b141f2a15ac Mon Sep 17 00:00:00 2001 From: Quinton Jason Date: Tue, 20 Aug 2024 10:17:24 -0500 Subject: [PATCH 05/31] fix: add 0 to make token 3 digits --- docs/app/views/pages/_color_values.html.erb | 2 +- .../stylesheets/docs/_colors.scss | 8 +- .../stylesheets/docs/_rouge_theme.scss | 14 +- .../stylesheets/docs/_status_key.scss | 4 +- .../app/sage_tokens/sage_dictionary.rb | 170 ++++++------ .../lib/stylesheets/components/_alert.scss | 8 +- .../lib/stylesheets/components/_avatar.scss | 4 +- .../lib/stylesheets/components/_banner.scss | 4 +- .../lib/stylesheets/components/_button.scss | 34 +-- .../lib/stylesheets/components/_checkbox.scss | 6 +- .../stylesheets/components/_data_card.scss | 4 +- .../lib/stylesheets/components/_dropdown.scss | 6 +- .../stylesheets/components/_form_input.scss | 2 +- .../stylesheets/components/_form_select.scss | 2 +- .../lib/stylesheets/components/_link.scss | 8 +- .../lib/stylesheets/components/_meter.scss | 2 +- .../lib/stylesheets/components/_radio.scss | 2 +- .../lib/stylesheets/components/_switch.scss | 4 +- .../lib/stylesheets/components/_toast.scss | 2 +- .../components/_transaction_card.scss | 4 +- .../stylesheets/components/_upload_card.scss | 2 +- .../lib/stylesheets/core/_variables.scss | 4 +- .../lib/stylesheets/core/mixins/_sage.scss | 4 +- .../lib/stylesheets/dictionary/_tokens.scss | 242 +++++++++--------- .../lib/stylesheets/tokens/_border.scss | 2 +- .../tokens/_border_interactive.scss | 4 +- .../stylesheets/tokens/_color_palette.scss | 29 ++- .../lib/configs/dictionary/tokens.js | 170 ++++++------ style-dictionary/tokens/color/base.json | 24 +- style-dictionary/tokens/color/combos.json | 20 +- 30 files changed, 410 insertions(+), 381 deletions(-) diff --git a/docs/app/views/pages/_color_values.html.erb b/docs/app/views/pages/_color_values.html.erb index ffebface9d..c9460696e4 100644 --- a/docs/app/views/pages/_color_values.html.erb +++ b/docs/app/views/pages/_color_values.html.erb @@ -4,7 +4,7 @@ <%= render "color_values_body", color: color, value: value %> <% end %> <% else %> - <% [5, 10, 15, 20, 30, 40, 50, 60, 70, 80, 95].each do |value| %> + <% ["050", 100, 200, 300, 400, 500, 600, 700, 800, 950].each do |value| %> <%= render "color_values_body", color: color, value: value %> <% end %> <% end %> diff --git a/docs/lib/sage-frontend/stylesheets/docs/_colors.scss b/docs/lib/sage-frontend/stylesheets/docs/_colors.scss index a705c5abc4..c70b7b3932 100644 --- a/docs/lib/sage-frontend/stylesheets/docs/_colors.scss +++ b/docs/lib/sage-frontend/stylesheets/docs/_colors.scss @@ -47,7 +47,13 @@ @each $value, $map in $color { $hex: sage-color($name, $value); - .color-#{"" + $name}-#{$value} { + // Determine class name for $value == 50 + $classname: ".color-#{"" + $name}-#{$value}"; + @if ($value == 50) { + $classname: ".color-#{"" + $name}-0#{$value}"; + } + + #{$classname} { padding: sage-spacing(sm) sage-spacing(); font-size: sage-font-size(body); background: $hex; diff --git a/docs/lib/sage-frontend/stylesheets/docs/_rouge_theme.scss b/docs/lib/sage-frontend/stylesheets/docs/_rouge_theme.scss index 34dbcf0bf5..669668e732 100644 --- a/docs/lib/sage-frontend/stylesheets/docs/_rouge_theme.scss +++ b/docs/lib/sage-frontend/stylesheets/docs/_rouge_theme.scss @@ -11,19 +11,19 @@ $-color-9: sage-color(charcoal, 400); // Comments of various sorts $-color-3: sage-color(charcoal, 300); // Subheading -$-color-12: sage-color(red, 50); +$-color-12: sage-color(red, 500); // Constant -$-color-18: sage-color(red, 50); +$-color-18: sage-color(red, 500); // Keyword type -$-color-14: sage-color(red, 50); +$-color-14: sage-color(red, 500); // Strings -$-color-15: sage-color(red, 50); +$-color-15: sage-color(red, 500); // Name exception -$-color-21: sage-color(red, 30); +$-color-21: sage-color(red, 300); // Error underlines -$-color-4: sage-color(red, 50); +$-color-4: sage-color(red, 500); // Generic deleted? -$-color-8: sage-color(red, 30); +$-color-8: sage-color(red, 300); // Escape string $-color-25: sage-color(orange, 200); // Regex/interpolation diff --git a/docs/lib/sage-frontend/stylesheets/docs/_status_key.scss b/docs/lib/sage-frontend/stylesheets/docs/_status_key.scss index b5ef306704..32aa628dce 100644 --- a/docs/lib/sage-frontend/stylesheets/docs/_status_key.scss +++ b/docs/lib/sage-frontend/stylesheets/docs/_status_key.scss @@ -43,8 +43,8 @@ } &--stop { - border-color: sage-color(red, 50); - background: sage-color(red, 50); + border-color: sage-color(red, 500); + background: sage-color(red, 500); } } 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 28fa09edd5..d03c7f3ce5 100644 --- a/docs/lib/sage_rails/app/sage_tokens/sage_dictionary.rb +++ b/docs/lib/sage_rails/app/sage_tokens/sage_dictionary.rb @@ -210,42 +210,42 @@ module SageDictionary SD_SAGE_COLOR_BASE_YELLOW_500_HEX = "#451902" SD_SAGE_COLOR_BASE_YELLOW_500_CODE = "yellow-500" SD_SAGE_COLOR_BASE_YELLOW_500_CLASSNAME = "t-sage--color-yellow-500" - SD_SAGE_COLOR_BASE_RED_5_HEX = "#fffafa" - SD_SAGE_COLOR_BASE_RED_5_CODE = "red-5" - SD_SAGE_COLOR_BASE_RED_5_CLASSNAME = "t-sage--color-red-5" - SD_SAGE_COLOR_BASE_RED_10_HEX = "#fef2f2" - SD_SAGE_COLOR_BASE_RED_10_CODE = "red-10" - SD_SAGE_COLOR_BASE_RED_10_CLASSNAME = "t-sage--color-red-10" - SD_SAGE_COLOR_BASE_RED_15_HEX = "#fee2e1" - SD_SAGE_COLOR_BASE_RED_15_CODE = "red-15" - SD_SAGE_COLOR_BASE_RED_15_CLASSNAME = "t-sage--color-red-15" - SD_SAGE_COLOR_BASE_RED_20_HEX = "#fecaca" - SD_SAGE_COLOR_BASE_RED_20_CODE = "red-20" - SD_SAGE_COLOR_BASE_RED_20_CLASSNAME = "t-sage--color-red-20" - SD_SAGE_COLOR_BASE_RED_30_HEX = "#fda5a5" - SD_SAGE_COLOR_BASE_RED_30_CODE = "red-30" - SD_SAGE_COLOR_BASE_RED_30_CLASSNAME = "t-sage--color-red-30" - SD_SAGE_COLOR_BASE_RED_40_HEX = "#f87171" - SD_SAGE_COLOR_BASE_RED_40_CODE = "red-40" - SD_SAGE_COLOR_BASE_RED_40_CLASSNAME = "t-sage--color-red-40" - SD_SAGE_COLOR_BASE_RED_50_HEX = "#ef4444" - SD_SAGE_COLOR_BASE_RED_50_CODE = "red-50" - SD_SAGE_COLOR_BASE_RED_50_CLASSNAME = "t-sage--color-red-50" - SD_SAGE_COLOR_BASE_RED_60_HEX = "#dc2625" - SD_SAGE_COLOR_BASE_RED_60_CODE = "red-60" - SD_SAGE_COLOR_BASE_RED_60_CLASSNAME = "t-sage--color-red-60" - SD_SAGE_COLOR_BASE_RED_70_HEX = "#b91c1b" - SD_SAGE_COLOR_BASE_RED_70_CODE = "red-70" - SD_SAGE_COLOR_BASE_RED_70_CLASSNAME = "t-sage--color-red-70" - SD_SAGE_COLOR_BASE_RED_80_HEX = "#991b1b" - SD_SAGE_COLOR_BASE_RED_80_CODE = "red-80" - SD_SAGE_COLOR_BASE_RED_80_CLASSNAME = "t-sage--color-red-80" - SD_SAGE_COLOR_BASE_RED_90_HEX = "#7f1c1d" - SD_SAGE_COLOR_BASE_RED_90_CODE = "red-90" - SD_SAGE_COLOR_BASE_RED_90_CLASSNAME = "t-sage--color-red-90" - SD_SAGE_COLOR_BASE_RED_95_HEX = "#572627" - SD_SAGE_COLOR_BASE_RED_95_CODE = "red-95" - SD_SAGE_COLOR_BASE_RED_95_CLASSNAME = "t-sage--color-red-95" + SD_SAGE_COLOR_BASE_RED_50_HEX = "#fffafa" + SD_SAGE_COLOR_BASE_RED_50_CODE = "red-5" + SD_SAGE_COLOR_BASE_RED_50_CLASSNAME = "t-sage--color-red-5" + SD_SAGE_COLOR_BASE_RED_100_HEX = "#fef2f2" + SD_SAGE_COLOR_BASE_RED_100_CODE = "red-10" + SD_SAGE_COLOR_BASE_RED_100_CLASSNAME = "t-sage--color-red-10" + SD_SAGE_COLOR_BASE_RED_150_HEX = "#fee2e1" + SD_SAGE_COLOR_BASE_RED_150_CODE = "red-15" + SD_SAGE_COLOR_BASE_RED_150_CLASSNAME = "t-sage--color-red-15" + SD_SAGE_COLOR_BASE_RED_200_HEX = "#fecaca" + SD_SAGE_COLOR_BASE_RED_200_CODE = "red-20" + SD_SAGE_COLOR_BASE_RED_200_CLASSNAME = "t-sage--color-red-20" + SD_SAGE_COLOR_BASE_RED_300_HEX = "#fda5a5" + SD_SAGE_COLOR_BASE_RED_300_CODE = "red-30" + SD_SAGE_COLOR_BASE_RED_300_CLASSNAME = "t-sage--color-red-30" + SD_SAGE_COLOR_BASE_RED_400_HEX = "#f87171" + SD_SAGE_COLOR_BASE_RED_400_CODE = "red-40" + SD_SAGE_COLOR_BASE_RED_400_CLASSNAME = "t-sage--color-red-40" + SD_SAGE_COLOR_BASE_RED_500_HEX = "#ef4444" + SD_SAGE_COLOR_BASE_RED_500_CODE = "red-50" + SD_SAGE_COLOR_BASE_RED_500_CLASSNAME = "t-sage--color-red-50" + SD_SAGE_COLOR_BASE_RED_600_HEX = "#dc2625" + SD_SAGE_COLOR_BASE_RED_600_CODE = "red-60" + SD_SAGE_COLOR_BASE_RED_600_CLASSNAME = "t-sage--color-red-60" + SD_SAGE_COLOR_BASE_RED_700_HEX = "#b91c1b" + SD_SAGE_COLOR_BASE_RED_700_CODE = "red-70" + SD_SAGE_COLOR_BASE_RED_700_CLASSNAME = "t-sage--color-red-70" + SD_SAGE_COLOR_BASE_RED_800_HEX = "#991b1b" + SD_SAGE_COLOR_BASE_RED_800_CODE = "red-80" + SD_SAGE_COLOR_BASE_RED_800_CLASSNAME = "t-sage--color-red-80" + SD_SAGE_COLOR_BASE_RED_900_HEX = "#7f1c1d" + SD_SAGE_COLOR_BASE_RED_900_CODE = "red-90" + SD_SAGE_COLOR_BASE_RED_900_CLASSNAME = "t-sage--color-red-90" + SD_SAGE_COLOR_BASE_RED_950_HEX = "#572627" + SD_SAGE_COLOR_BASE_RED_950_CODE = "red-95" + SD_SAGE_COLOR_BASE_RED_950_CLASSNAME = "t-sage--color-red-95" SD_SAGE_COLOR_BASE_ORANGE_100_HEX = "#ffe3d4" SD_SAGE_COLOR_BASE_ORANGE_100_CODE = "orange-100" SD_SAGE_COLOR_BASE_ORANGE_100_CLASSNAME = "t-sage--color-orange-100" @@ -741,65 +741,65 @@ module SageDictionary }, }, "RED": { - "5": { - "HEX": SD_SAGE_COLOR_BASE_RED_5_HEX, - "CODE": SD_SAGE_COLOR_BASE_RED_5_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_RED_5_CLASSNAME, + "50": { + "HEX": SD_SAGE_COLOR_BASE_RED_50_HEX, + "CODE": SD_SAGE_COLOR_BASE_RED_50_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_RED_50_CLASSNAME, }, - "10": { - "HEX": SD_SAGE_COLOR_BASE_RED_10_HEX, - "CODE": SD_SAGE_COLOR_BASE_RED_10_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_RED_10_CLASSNAME, + "100": { + "HEX": SD_SAGE_COLOR_BASE_RED_100_HEX, + "CODE": SD_SAGE_COLOR_BASE_RED_100_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_RED_100_CLASSNAME, }, - "15": { - "HEX": SD_SAGE_COLOR_BASE_RED_15_HEX, - "CODE": SD_SAGE_COLOR_BASE_RED_15_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_RED_15_CLASSNAME, + "150": { + "HEX": SD_SAGE_COLOR_BASE_RED_150_HEX, + "CODE": SD_SAGE_COLOR_BASE_RED_150_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_RED_150_CLASSNAME, }, - "20": { - "HEX": SD_SAGE_COLOR_BASE_RED_20_HEX, - "CODE": SD_SAGE_COLOR_BASE_RED_20_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_RED_20_CLASSNAME, + "200": { + "HEX": SD_SAGE_COLOR_BASE_RED_200_HEX, + "CODE": SD_SAGE_COLOR_BASE_RED_200_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_RED_200_CLASSNAME, }, - "30": { - "HEX": SD_SAGE_COLOR_BASE_RED_30_HEX, - "CODE": SD_SAGE_COLOR_BASE_RED_30_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_RED_30_CLASSNAME, + "300": { + "HEX": SD_SAGE_COLOR_BASE_RED_300_HEX, + "CODE": SD_SAGE_COLOR_BASE_RED_300_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_RED_300_CLASSNAME, }, - "40": { - "HEX": SD_SAGE_COLOR_BASE_RED_40_HEX, - "CODE": SD_SAGE_COLOR_BASE_RED_40_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_RED_40_CLASSNAME, + "400": { + "HEX": SD_SAGE_COLOR_BASE_RED_400_HEX, + "CODE": SD_SAGE_COLOR_BASE_RED_400_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_RED_400_CLASSNAME, }, - "50": { - "HEX": SD_SAGE_COLOR_BASE_RED_50_HEX, - "CODE": SD_SAGE_COLOR_BASE_RED_50_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_RED_50_CLASSNAME, + "500": { + "HEX": SD_SAGE_COLOR_BASE_RED_500_HEX, + "CODE": SD_SAGE_COLOR_BASE_RED_500_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_RED_500_CLASSNAME, }, - "60": { - "HEX": SD_SAGE_COLOR_BASE_RED_60_HEX, - "CODE": SD_SAGE_COLOR_BASE_RED_60_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_RED_60_CLASSNAME, + "600": { + "HEX": SD_SAGE_COLOR_BASE_RED_600_HEX, + "CODE": SD_SAGE_COLOR_BASE_RED_600_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_RED_600_CLASSNAME, }, - "70": { - "HEX": SD_SAGE_COLOR_BASE_RED_70_HEX, - "CODE": SD_SAGE_COLOR_BASE_RED_70_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_RED_70_CLASSNAME, + "700": { + "HEX": SD_SAGE_COLOR_BASE_RED_700_HEX, + "CODE": SD_SAGE_COLOR_BASE_RED_700_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_RED_700_CLASSNAME, }, - "80": { - "HEX": SD_SAGE_COLOR_BASE_RED_80_HEX, - "CODE": SD_SAGE_COLOR_BASE_RED_80_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_RED_80_CLASSNAME, + "800": { + "HEX": SD_SAGE_COLOR_BASE_RED_800_HEX, + "CODE": SD_SAGE_COLOR_BASE_RED_800_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_RED_800_CLASSNAME, }, - "90": { - "HEX": SD_SAGE_COLOR_BASE_RED_90_HEX, - "CODE": SD_SAGE_COLOR_BASE_RED_90_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_RED_90_CLASSNAME, + "900": { + "HEX": SD_SAGE_COLOR_BASE_RED_900_HEX, + "CODE": SD_SAGE_COLOR_BASE_RED_900_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_RED_900_CLASSNAME, }, - "95": { - "HEX": SD_SAGE_COLOR_BASE_RED_95_HEX, - "CODE": SD_SAGE_COLOR_BASE_RED_95_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_RED_95_CLASSNAME, + "950": { + "HEX": SD_SAGE_COLOR_BASE_RED_950_HEX, + "CODE": SD_SAGE_COLOR_BASE_RED_950_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_RED_950_CLASSNAME, }, }, "ORANGE": { @@ -1305,7 +1305,7 @@ module SageDictionary SD_SAGE_COLOR_CORE_PRIMARY = "#2463eb" SD_SAGE_COLOR_CORE_SAGE = "#079250" SD_SAGE_COLOR_CORE_YELLOW = "#fdbb21" - SD_SAGE_COLOR_CORE_RED = "#ef4444" + SD_SAGE_COLOR_CORE_RED = "#fffafa" SD_SAGE_COLOR_CORE_ORANGE = "#ff3e15" SD_SAGE_COLOR_CORE_PURPLE = "#533be5" SD_SAGE_COLOR_CORE_CHARCOAL = "#4d4d4c" diff --git a/packages/sage-assets/lib/stylesheets/components/_alert.scss b/packages/sage-assets/lib/stylesheets/components/_alert.scss index 35db0453c5..99e492ea97 100644 --- a/packages/sage-assets/lib/stylesheets/components/_alert.scss +++ b/packages/sage-assets/lib/stylesheets/components/_alert.scss @@ -17,8 +17,8 @@ $-alert-background-colors: ( warning: sage-color(yellow, 100), approaching: sage-color(yellow, 100), reached: sage-color(orange, 100), - exceeded: sage-color(red, 15), - danger: sage-color(red, 15), + exceeded: sage-color(red, 150), + danger: sage-color(red, 150), ); $-alert-icon-colors: ( @@ -30,8 +30,8 @@ $-alert-icon-colors: ( warning: sage-color(yellow, 400), approaching: sage-color(yellow, 400), reached: sage-color(orange, 400), - exceeded: sage-color(red, 50), - danger: sage-color(red, 50), + exceeded: sage-color(red, 500), + danger: sage-color(red, 500), ); $-alert-border-colors: ( diff --git a/packages/sage-assets/lib/stylesheets/components/_avatar.scss b/packages/sage-assets/lib/stylesheets/components/_avatar.scss index 41ff596b58..b05cab2b3e 100644 --- a/packages/sage-assets/lib/stylesheets/components/_avatar.scss +++ b/packages/sage-assets/lib/stylesheets/components/_avatar.scss @@ -33,8 +33,8 @@ $-avatar-ring-colors: ( bg: sage-color(orange, 100) ), red: ( - main: sage-color(red, 50), - bg: sage-color(red, 15) + main: sage-color(red, 500), + bg: sage-color(red, 150) ) ); $-avatar-tile-size: rem(216px); diff --git a/packages/sage-assets/lib/stylesheets/components/_banner.scss b/packages/sage-assets/lib/stylesheets/components/_banner.scss index 315c49ba79..107d4aac4f 100644 --- a/packages/sage-assets/lib/stylesheets/components/_banner.scss +++ b/packages/sage-assets/lib/stylesheets/components/_banner.scss @@ -26,9 +26,9 @@ $-banner-colors: ( icon: "warning", ), danger: ( - background: sage-color(red, 50), + background: sage-color(red, 500), text: sage-color(white), - text-hover: sage-color(red, 15), + text-hover: sage-color(red, 150), icon: "danger", ), ); diff --git a/packages/sage-assets/lib/stylesheets/components/_button.scss b/packages/sage-assets/lib/stylesheets/components/_button.scss index 3625249fa2..317a400931 100644 --- a/packages/sage-assets/lib/stylesheets/components/_button.scss +++ b/packages/sage-assets/lib/stylesheets/components/_button.scss @@ -90,23 +90,23 @@ $-btn-base-styles: ( danger: ( default: ( color: sage-color(white), - background-color: sage-color(red, 50), - border-color: sage-color(red, 50), - ring-color: sage-color(red, 30), + background-color: sage-color(red, 500), + border-color: sage-color(red, 500), + ring-color: sage-color(red, 300), ), hover: ( color: sage-color(white), - background-color: sage-color(red, 80), + background-color: sage-color(red, 800), ), focus: ( color: sage-color(white), - background-color: sage-color(red, 50), - border-color: sage-color(red, 50), + background-color: sage-color(red, 500), + border-color: sage-color(red, 500), ), disabled: ( - color: sage-color(red, 30), - background-color: sage-color(red, 15), - border-color: sage-color(red, 15), + color: sage-color(red, 300), + background-color: sage-color(red, 150), + border-color: sage-color(red, 150), ) ), ); @@ -137,12 +137,12 @@ $-btn-subtle-styles: ( disabled: sage-color(charcoal, 100), ), danger: ( - default: sage-color(red, 50), - hover: sage-color(red, 50), - hover-background: sage-color(red, 15), - focus: sage-color(red, 50), - focus-outline: sage-color(red, 30), - disabled: sage-color(red, 30), + default: sage-color(red, 500), + hover: sage-color(red, 500), + hover-background: sage-color(red, 150), + focus: sage-color(red, 500), + focus-outline: sage-color(red, 300), + disabled: sage-color(red, 300), ), ); @@ -157,8 +157,8 @@ $-alert-close-btn-background-colors: ( warning: sage-color(yellow, 200), approaching: sage-color(yellow, 200), reached: sage-color(orange, 200), - exceeded: sage-color(red, 30), - danger: sage-color(red, 30), + exceeded: sage-color(red, 300), + danger: sage-color(red, 300), ); // diff --git a/packages/sage-assets/lib/stylesheets/components/_checkbox.scss b/packages/sage-assets/lib/stylesheets/components/_checkbox.scss index d0291ce397..22668c7b5a 100644 --- a/packages/sage-assets/lib/stylesheets/components/_checkbox.scss +++ b/packages/sage-assets/lib/stylesheets/components/_checkbox.scss @@ -14,7 +14,7 @@ $-checkbox-color-checked-hover: sage-color(charcoal, 500); $-checkbox-color-disabled: sage-color(grey, 200); $-checkbox-color-disabled-border: sage-color(grey, 300); $-checkbox-color-disabled-checked: sage-color(charcoal, 100); -$-checkbox-color-error: sage-color(red, 50); +$-checkbox-color-error: sage-color(red, 500); $-checkbox-size: rem(16px); $-checkbox-label-spacing: rem(12px); @@ -280,7 +280,7 @@ $-checkbox-focus-outline-color: sage-color(purple, 30); } &::before { - border-color: sage-color(red, 30); + border-color: sage-color(red, 300); } } @@ -301,7 +301,7 @@ $-checkbox-focus-outline-color: sage-color(purple, 30); .sage-checkbox--error &, .sage-checkbox__input:invalid + & { - color: sage-color(red, 50); + color: sage-color(red, 500); } .sage-checkbox__input:disabled ~ & { diff --git a/packages/sage-assets/lib/stylesheets/components/_data_card.scss b/packages/sage-assets/lib/stylesheets/components/_data_card.scss index 4f3a009c85..7c8a9667b7 100644 --- a/packages/sage-assets/lib/stylesheets/components/_data_card.scss +++ b/packages/sage-assets/lib/stylesheets/components/_data_card.scss @@ -11,8 +11,8 @@ $-data-card-colors: ( text-color: sage-color(charcoal, 400), ), danger: ( - border-color: sage-color(red, 50), - text-color: sage-color(red, 50), + border-color: sage-color(red, 500), + text-color: sage-color(red, 500), ), muted: ( border-color: sage-color(charcoal, 300), diff --git a/packages/sage-assets/lib/stylesheets/components/_dropdown.scss b/packages/sage-assets/lib/stylesheets/components/_dropdown.scss index 5f8fda5f53..4c788da798 100644 --- a/packages/sage-assets/lib/stylesheets/components/_dropdown.scss +++ b/packages/sage-assets/lib/stylesheets/components/_dropdown.scss @@ -240,11 +240,11 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs); } .sage-dropdown__item-control--danger { - color: sage-color(red, 50); + color: sage-color(red, 500); &:hover { - color: sage-color(red, 50); - background-color: sage-color(red, 15); + color: sage-color(red, 500); + background-color: sage-color(red, 150); } } diff --git a/packages/sage-assets/lib/stylesheets/components/_form_input.scss b/packages/sage-assets/lib/stylesheets/components/_form_input.scss index cdb5e70e5d..1217a0481d 100644 --- a/packages/sage-assets/lib/stylesheets/components/_form_input.scss +++ b/packages/sage-assets/lib/stylesheets/components/_form_input.scss @@ -160,7 +160,7 @@ $-input-text-height: sage-font-size(body); } .sage-form-field--error & i { - color: sage-color(red, 50); + color: sage-color(red, 500); } } diff --git a/packages/sage-assets/lib/stylesheets/components/_form_select.scss b/packages/sage-assets/lib/stylesheets/components/_form_select.scss index 8add07d3b3..00cb67e120 100644 --- a/packages/sage-assets/lib/stylesheets/components/_form_select.scss +++ b/packages/sage-assets/lib/stylesheets/components/_form_select.scss @@ -10,7 +10,7 @@ $-select-color-border-hover: sage-color(charcoal, 100); $-select-color-border-selected: sage-color(primary, 200); $-select-color-default: sage-color(charcoal, 200); $-select-color-default-hover: sage-color(charcoal, 400); -$-select-color-error: sage-color(red, 50); +$-select-color-error: sage-color(red, 500); $-select-color-label-background: sage-color(white); $-select-color-success: sage-color(primary, 200); $-select-filled-top-padding: rem(4.4px); diff --git a/packages/sage-assets/lib/stylesheets/components/_link.scss b/packages/sage-assets/lib/stylesheets/components/_link.scss index 762dd8feab..3beaba966d 100644 --- a/packages/sage-assets/lib/stylesheets/components/_link.scss +++ b/packages/sage-assets/lib/stylesheets/components/_link.scss @@ -45,14 +45,14 @@ $-link-base-styles: ( ), danger:( default: ( - color: sage-color(red, 50), + color: sage-color(red, 500), ), hover: ( - color: sage-color(red, 80), + color: sage-color(red, 800), ), focus-visible: ( - color: sage-color(red, 50), - focus-outline: sage-color(red, 30), + color: sage-color(red, 500), + focus-outline: sage-color(red, 300), ), ) ); diff --git a/packages/sage-assets/lib/stylesheets/components/_meter.scss b/packages/sage-assets/lib/stylesheets/components/_meter.scss index 2396a37417..b73bc19468 100644 --- a/packages/sage-assets/lib/stylesheets/components/_meter.scss +++ b/packages/sage-assets/lib/stylesheets/components/_meter.scss @@ -7,7 +7,7 @@ $-meter-bar-height: rem(4px); $-meter-color-bg: sage-color(grey, 300); -$-meter-bar-low: rgba(sage-color(red, 95), 0.9); +$-meter-bar-low: rgba(sage-color(red, 950), 0.9); $-meter-bar-med: rgba(sage-color(orange), 0.9); $-meter-bar-success: rgba(sage-color(sage, 200), 0.9); $-meter-bar-max: rgba(sage-color(sage, 300), 0.9); diff --git a/packages/sage-assets/lib/stylesheets/components/_radio.scss b/packages/sage-assets/lib/stylesheets/components/_radio.scss index 192f977f01..1c2acc728a 100644 --- a/packages/sage-assets/lib/stylesheets/components/_radio.scss +++ b/packages/sage-assets/lib/stylesheets/components/_radio.scss @@ -16,7 +16,7 @@ $-radio-color-error: map-get($sage-radio-colors, error); $-radio-color-hover: map-get($sage-radio-colors, hover); $-radio-color-text-disabled: sage-color(grey, 500); $-radio-color-focus-outline: sage-color(purple, 30); -$-radio-color-focus-outline-error: sage-color(red, 30); +$-radio-color-focus-outline-error: sage-color(red, 300); // Additional configurations $-radio-button-size: $sage-radio-size; diff --git a/packages/sage-assets/lib/stylesheets/components/_switch.scss b/packages/sage-assets/lib/stylesheets/components/_switch.scss index cd0f794d01..c0dc43c665 100644 --- a/packages/sage-assets/lib/stylesheets/components/_switch.scss +++ b/packages/sage-assets/lib/stylesheets/components/_switch.scss @@ -15,8 +15,8 @@ $-switch-color-disabled: sage-color(grey, 300); $-switch-color-disabled-text: sage-color(charcoal, 300); $-switch-color-disabled-checked: sage-color(grey, 300); $-switch-color-disabled-checked-text: sage-color(charcoal, 100); -$-switch-color-error: sage-color(red, 50); -$-switch-focus-outline-error-color: sage-color(red, 30); +$-switch-color-error: sage-color(red, 500); +$-switch-focus-outline-error-color: sage-color(red, 300); // Switch $-switch-label-left-spacing: rem(12px); diff --git a/packages/sage-assets/lib/stylesheets/components/_toast.scss b/packages/sage-assets/lib/stylesheets/components/_toast.scss index 5080120c60..d6536c239e 100644 --- a/packages/sage-assets/lib/stylesheets/components/_toast.scss +++ b/packages/sage-assets/lib/stylesheets/components/_toast.scss @@ -94,7 +94,7 @@ $-toast-bottom-spacing: sage-spacing(xs); } &.sage-toast--style-danger { - background-color: sage-color(red, 50); + background-color: sage-color(red, 500); } &.sage-toast--dismissed { diff --git a/packages/sage-assets/lib/stylesheets/components/_transaction_card.scss b/packages/sage-assets/lib/stylesheets/components/_transaction_card.scss index 78001ac72c..1d88b76978 100644 --- a/packages/sage-assets/lib/stylesheets/components/_transaction_card.scss +++ b/packages/sage-assets/lib/stylesheets/components/_transaction_card.scss @@ -66,7 +66,7 @@ $-transaction-card-price-max-width: rem(100px); } .sage-transaction-card__amount--red { - color: sage-color(red, 50); + color: sage-color(red, 500); } .sage-transaction-card__label { @@ -91,7 +91,7 @@ $-transaction-card-price-max-width: rem(100px); } .sage-transaction-card__state--red { - color: sage-color(red, 50); + color: sage-color(red, 500); } .sage-transaction-card__state--sage { diff --git a/packages/sage-assets/lib/stylesheets/components/_upload_card.scss b/packages/sage-assets/lib/stylesheets/components/_upload_card.scss index 1ae071c1a0..b75c3466fc 100644 --- a/packages/sage-assets/lib/stylesheets/components/_upload_card.scss +++ b/packages/sage-assets/lib/stylesheets/components/_upload_card.scss @@ -7,7 +7,7 @@ $-upload-card-border-radius: sage-border(radius-large); $-upload-card-border-width: 2; -$-upload-card-error-color: sage-color(red, 50); +$-upload-card-error-color: sage-color(red, 500); $-upload-card-body-width: rem(200px); $-upload-card-body-width-stack: rem(340px); $-upload-card-preview-border-radius: sage-border(radius-medium); diff --git a/packages/sage-assets/lib/stylesheets/core/_variables.scss b/packages/sage-assets/lib/stylesheets/core/_variables.scss index 5f3de1014c..7a25865ab4 100644 --- a/packages/sage-assets/lib/stylesheets/core/_variables.scss +++ b/packages/sage-assets/lib/stylesheets/core/_variables.scss @@ -55,7 +55,7 @@ $sage-field-colors: ( default: sage-color(charcoal, 300), disabled: sage-color(grey, 500), disabled-background: sage-color(grey, 200), - error: sage-color(red, 50), + error: sage-color(red, 500), label-background: sage-color(white), success: sage-color(primary, 300), ); @@ -72,7 +72,7 @@ $sage-radio-colors: ( checked-inner: sage-color(white), default: sage-color(grey, 400), disabled: sage-color(grey, 200), - error: sage-color(red, 50), + error: sage-color(red, 500), hover: sage-color(grey, 500), ); diff --git a/packages/sage-assets/lib/stylesheets/core/mixins/_sage.scss b/packages/sage-assets/lib/stylesheets/core/mixins/_sage.scss index 12db832113..75e5a5bf06 100644 --- a/packages/sage-assets/lib/stylesheets/core/mixins/_sage.scss +++ b/packages/sage-assets/lib/stylesheets/core/mixins/_sage.scss @@ -473,7 +473,7 @@ .sage-form-field--error &:focus:not(:disabled), .sage-form-field--error &:not(:placeholder-shown), .sage-form-field--error &:required:not(:placeholder-shown):not(:valid) { - @include sage-focus-ring(sage-color(red, 30)); + @include sage-focus-ring(sage-color(red, 300)); box-shadow: sage-border-interactive(error); @@ -552,7 +552,7 @@ color: sage-color(charcoal, 200); .sage-form-field--error & { - color: sage-color(red, 50); + color: sage-color(red, 500); &::before { @include sage-icon-base(danger, md, pine); diff --git a/packages/sage-assets/lib/stylesheets/dictionary/_tokens.scss b/packages/sage-assets/lib/stylesheets/dictionary/_tokens.scss index 5720d8616d..6b15d44a8e 100644 --- a/packages/sage-assets/lib/stylesheets/dictionary/_tokens.scss +++ b/packages/sage-assets/lib/stylesheets/dictionary/_tokens.scss @@ -778,149 +778,149 @@ $sd-sage-color-base-yellow-500-code: "yellow-500"; /// $sd-sage-color-base-yellow-500-classname: "t-sage--color-yellow-500"; /// -/// color color-base-red-5-hex +/// color color-base-red-50-hex /// -$sd-sage-color-base-red-5-hex: #fffafa; +$sd-sage-color-base-red-50-hex: #fffafa; /// -/// color color-base-red-5-code +/// color color-base-red-50-code /// -$sd-sage-color-base-red-5-code: "red-5"; +$sd-sage-color-base-red-50-code: "red-5"; /// -/// color color-base-red-5-classname +/// color color-base-red-50-classname /// -$sd-sage-color-base-red-5-classname: "t-sage--color-red-5"; +$sd-sage-color-base-red-50-classname: "t-sage--color-red-5"; /// -/// color color-base-red-10-hex +/// color color-base-red-100-hex /// -$sd-sage-color-base-red-10-hex: #fef2f2; +$sd-sage-color-base-red-100-hex: #fef2f2; /// -/// color color-base-red-10-code +/// color color-base-red-100-code /// -$sd-sage-color-base-red-10-code: "red-10"; +$sd-sage-color-base-red-100-code: "red-10"; /// -/// color color-base-red-10-classname +/// color color-base-red-100-classname /// -$sd-sage-color-base-red-10-classname: "t-sage--color-red-10"; +$sd-sage-color-base-red-100-classname: "t-sage--color-red-10"; /// -/// color color-base-red-15-hex +/// color color-base-red-150-hex /// -$sd-sage-color-base-red-15-hex: #fee2e1; +$sd-sage-color-base-red-150-hex: #fee2e1; /// -/// color color-base-red-15-code +/// color color-base-red-150-code /// -$sd-sage-color-base-red-15-code: "red-15"; +$sd-sage-color-base-red-150-code: "red-15"; /// -/// color color-base-red-15-classname +/// color color-base-red-150-classname /// -$sd-sage-color-base-red-15-classname: "t-sage--color-red-15"; +$sd-sage-color-base-red-150-classname: "t-sage--color-red-15"; /// -/// color color-base-red-20-hex +/// color color-base-red-200-hex /// -$sd-sage-color-base-red-20-hex: #fecaca; +$sd-sage-color-base-red-200-hex: #fecaca; /// -/// color color-base-red-20-code +/// color color-base-red-200-code /// -$sd-sage-color-base-red-20-code: "red-20"; +$sd-sage-color-base-red-200-code: "red-20"; /// -/// color color-base-red-20-classname +/// color color-base-red-200-classname /// -$sd-sage-color-base-red-20-classname: "t-sage--color-red-20"; +$sd-sage-color-base-red-200-classname: "t-sage--color-red-20"; /// -/// color color-base-red-30-hex +/// color color-base-red-300-hex /// -$sd-sage-color-base-red-30-hex: #fda5a5; +$sd-sage-color-base-red-300-hex: #fda5a5; /// -/// color color-base-red-30-code +/// color color-base-red-300-code /// -$sd-sage-color-base-red-30-code: "red-30"; +$sd-sage-color-base-red-300-code: "red-30"; /// -/// color color-base-red-30-classname +/// color color-base-red-300-classname /// -$sd-sage-color-base-red-30-classname: "t-sage--color-red-30"; +$sd-sage-color-base-red-300-classname: "t-sage--color-red-30"; /// -/// color color-base-red-40-hex +/// color color-base-red-400-hex /// -$sd-sage-color-base-red-40-hex: #f87171; +$sd-sage-color-base-red-400-hex: #f87171; /// -/// color color-base-red-40-code +/// color color-base-red-400-code /// -$sd-sage-color-base-red-40-code: "red-40"; +$sd-sage-color-base-red-400-code: "red-40"; /// -/// color color-base-red-40-classname +/// color color-base-red-400-classname /// -$sd-sage-color-base-red-40-classname: "t-sage--color-red-40"; +$sd-sage-color-base-red-400-classname: "t-sage--color-red-40"; /// -/// color color-base-red-50-hex +/// color color-base-red-500-hex /// -$sd-sage-color-base-red-50-hex: #ef4444; +$sd-sage-color-base-red-500-hex: #ef4444; /// -/// color color-base-red-50-code +/// color color-base-red-500-code /// -$sd-sage-color-base-red-50-code: "red-50"; +$sd-sage-color-base-red-500-code: "red-50"; /// -/// color color-base-red-50-classname +/// color color-base-red-500-classname /// -$sd-sage-color-base-red-50-classname: "t-sage--color-red-50"; +$sd-sage-color-base-red-500-classname: "t-sage--color-red-50"; /// -/// color color-base-red-60-hex +/// color color-base-red-600-hex /// -$sd-sage-color-base-red-60-hex: #dc2625; +$sd-sage-color-base-red-600-hex: #dc2625; /// -/// color color-base-red-60-code +/// color color-base-red-600-code /// -$sd-sage-color-base-red-60-code: "red-60"; +$sd-sage-color-base-red-600-code: "red-60"; /// -/// color color-base-red-60-classname +/// color color-base-red-600-classname /// -$sd-sage-color-base-red-60-classname: "t-sage--color-red-60"; +$sd-sage-color-base-red-600-classname: "t-sage--color-red-60"; /// -/// color color-base-red-70-hex +/// color color-base-red-700-hex /// -$sd-sage-color-base-red-70-hex: #b91c1b; +$sd-sage-color-base-red-700-hex: #b91c1b; /// -/// color color-base-red-70-code +/// color color-base-red-700-code /// -$sd-sage-color-base-red-70-code: "red-70"; +$sd-sage-color-base-red-700-code: "red-70"; /// -/// color color-base-red-70-classname +/// color color-base-red-700-classname /// -$sd-sage-color-base-red-70-classname: "t-sage--color-red-70"; +$sd-sage-color-base-red-700-classname: "t-sage--color-red-70"; /// -/// color color-base-red-80-hex +/// color color-base-red-800-hex /// -$sd-sage-color-base-red-80-hex: #991b1b; +$sd-sage-color-base-red-800-hex: #991b1b; /// -/// color color-base-red-80-code +/// color color-base-red-800-code /// -$sd-sage-color-base-red-80-code: "red-80"; +$sd-sage-color-base-red-800-code: "red-80"; /// -/// color color-base-red-80-classname +/// color color-base-red-800-classname /// -$sd-sage-color-base-red-80-classname: "t-sage--color-red-80"; +$sd-sage-color-base-red-800-classname: "t-sage--color-red-80"; /// -/// color color-base-red-90-hex +/// color color-base-red-900-hex /// -$sd-sage-color-base-red-90-hex: #7f1c1d; +$sd-sage-color-base-red-900-hex: #7f1c1d; /// -/// color color-base-red-90-code +/// color color-base-red-900-code /// -$sd-sage-color-base-red-90-code: "red-90"; +$sd-sage-color-base-red-900-code: "red-90"; /// -/// color color-base-red-90-classname +/// color color-base-red-900-classname /// -$sd-sage-color-base-red-90-classname: "t-sage--color-red-90"; +$sd-sage-color-base-red-900-classname: "t-sage--color-red-90"; /// -/// color color-base-red-95-hex +/// color color-base-red-950-hex /// -$sd-sage-color-base-red-95-hex: #572627; +$sd-sage-color-base-red-950-hex: #572627; /// -/// color color-base-red-95-code +/// color color-base-red-950-code /// -$sd-sage-color-base-red-95-code: "red-95"; +$sd-sage-color-base-red-950-code: "red-95"; /// -/// color color-base-red-95-classname +/// color color-base-red-950-classname /// -$sd-sage-color-base-red-95-classname: "t-sage--color-red-95"; +$sd-sage-color-base-red-950-classname: "t-sage--color-red-95"; /// /// color color-base-orange-100-hex /// @@ -1902,65 +1902,65 @@ $sd-sage-color: ( ), ), red: ( - 5: ( - hex: $sd-sage-color-base-red-5-hex, - code: $sd-sage-color-base-red-5-code, - classname: $sd-sage-color-base-red-5-classname, + 50: ( + hex: $sd-sage-color-base-red-50-hex, + code: $sd-sage-color-base-red-50-code, + classname: $sd-sage-color-base-red-50-classname, ), - 10: ( - hex: $sd-sage-color-base-red-10-hex, - code: $sd-sage-color-base-red-10-code, - classname: $sd-sage-color-base-red-10-classname, + 100: ( + hex: $sd-sage-color-base-red-100-hex, + code: $sd-sage-color-base-red-100-code, + classname: $sd-sage-color-base-red-100-classname, ), - 15: ( - hex: $sd-sage-color-base-red-15-hex, - code: $sd-sage-color-base-red-15-code, - classname: $sd-sage-color-base-red-15-classname, + 150: ( + hex: $sd-sage-color-base-red-150-hex, + code: $sd-sage-color-base-red-150-code, + classname: $sd-sage-color-base-red-150-classname, ), - 20: ( - hex: $sd-sage-color-base-red-20-hex, - code: $sd-sage-color-base-red-20-code, - classname: $sd-sage-color-base-red-20-classname, + 200: ( + hex: $sd-sage-color-base-red-200-hex, + code: $sd-sage-color-base-red-200-code, + classname: $sd-sage-color-base-red-200-classname, ), - 30: ( - hex: $sd-sage-color-base-red-30-hex, - code: $sd-sage-color-base-red-30-code, - classname: $sd-sage-color-base-red-30-classname, + 300: ( + hex: $sd-sage-color-base-red-300-hex, + code: $sd-sage-color-base-red-300-code, + classname: $sd-sage-color-base-red-300-classname, ), - 40: ( - hex: $sd-sage-color-base-red-40-hex, - code: $sd-sage-color-base-red-40-code, - classname: $sd-sage-color-base-red-40-classname, + 400: ( + hex: $sd-sage-color-base-red-400-hex, + code: $sd-sage-color-base-red-400-code, + classname: $sd-sage-color-base-red-400-classname, ), - 50: ( - hex: $sd-sage-color-base-red-50-hex, - code: $sd-sage-color-base-red-50-code, - classname: $sd-sage-color-base-red-50-classname, + 500: ( + hex: $sd-sage-color-base-red-500-hex, + code: $sd-sage-color-base-red-500-code, + classname: $sd-sage-color-base-red-500-classname, ), - 60: ( - hex: $sd-sage-color-base-red-60-hex, - code: $sd-sage-color-base-red-60-code, - classname: $sd-sage-color-base-red-60-classname, + 600: ( + hex: $sd-sage-color-base-red-600-hex, + code: $sd-sage-color-base-red-600-code, + classname: $sd-sage-color-base-red-600-classname, ), - 70: ( - hex: $sd-sage-color-base-red-70-hex, - code: $sd-sage-color-base-red-70-code, - classname: $sd-sage-color-base-red-70-classname, + 700: ( + hex: $sd-sage-color-base-red-700-hex, + code: $sd-sage-color-base-red-700-code, + classname: $sd-sage-color-base-red-700-classname, ), - 80: ( - hex: $sd-sage-color-base-red-80-hex, - code: $sd-sage-color-base-red-80-code, - classname: $sd-sage-color-base-red-80-classname, + 800: ( + hex: $sd-sage-color-base-red-800-hex, + code: $sd-sage-color-base-red-800-code, + classname: $sd-sage-color-base-red-800-classname, ), - 90: ( - hex: $sd-sage-color-base-red-90-hex, - code: $sd-sage-color-base-red-90-code, - classname: $sd-sage-color-base-red-90-classname, + 900: ( + hex: $sd-sage-color-base-red-900-hex, + code: $sd-sage-color-base-red-900-code, + classname: $sd-sage-color-base-red-900-classname, ), - 95: ( - hex: $sd-sage-color-base-red-95-hex, - code: $sd-sage-color-base-red-95-code, - classname: $sd-sage-color-base-red-95-classname, + 950: ( + hex: $sd-sage-color-base-red-950-hex, + code: $sd-sage-color-base-red-950-code, + classname: $sd-sage-color-base-red-950-classname, ), ), orange: ( @@ -2727,7 +2727,7 @@ $sd-sage-color-core-yellow: #fdbb21; /// /// color core color-core-red /// -$sd-sage-color-core-red: #ef4444; +$sd-sage-color-core-red: #fffafa; /// /// color core color-core-orange /// diff --git a/packages/sage-assets/lib/stylesheets/tokens/_border.scss b/packages/sage-assets/lib/stylesheets/tokens/_border.scss index 74c157fd21..a8b3715f62 100644 --- a/packages/sage-assets/lib/stylesheets/tokens/_border.scss +++ b/packages/sage-assets/lib/stylesheets/tokens/_border.scss @@ -10,7 +10,7 @@ /// $sage-borders: ( default: rem(1px) solid sage-color(grey, 300), - error: rem(1px) solid sage-color(red, 50), + error: rem(1px) solid sage-color(red, 500), interactive: rem(1px) solid sage-color(grey, 400), interactive-hover: rem(1px) solid sage-color(grey, 500), radius-small: rem(4px), diff --git a/packages/sage-assets/lib/stylesheets/tokens/_border_interactive.scss b/packages/sage-assets/lib/stylesheets/tokens/_border_interactive.scss index 4114bb6538..fc7e52abfc 100644 --- a/packages/sage-assets/lib/stylesheets/tokens/_border_interactive.scss +++ b/packages/sage-assets/lib/stylesheets/tokens/_border_interactive.scss @@ -13,8 +13,8 @@ $sage-borders-interactive: ( hover: 0 0 0 1px sage-color(grey, 500), focus: 0 0 0 4px sage-color(primary, 200), selected: 0 0 0 4px sage-color(charcoal, 400), - error: 0 0 0 1px sage-color(red, 50), - error-focus: 0 0 0 4px sage-color(red, 50), + error: 0 0 0 1px sage-color(red, 500), + error-focus: 0 0 0 4px sage-color(red, 500), disabled: 0 0 0 1px sage-color(grey, 300), ); diff --git a/packages/sage-assets/lib/stylesheets/tokens/_color_palette.scss b/packages/sage-assets/lib/stylesheets/tokens/_color_palette.scss index 632b1924a9..eb072b1fda 100644 --- a/packages/sage-assets/lib/stylesheets/tokens/_color_palette.scss +++ b/packages/sage-assets/lib/stylesheets/tokens/_color_palette.scss @@ -32,14 +32,37 @@ $sage-color-default-name: "grey 500"; /// /// @return {color} the value retrieved /// -@function sage-color($base, $value: 300) { +@function sage-color($base, $value: null) { + // Map base colors to their default values + $default-values: ( + black: 500, + blue: 600, + charcoal: 300, + grey: 300, + green: 600, + mercury: 500, + orange: 300, + primary: 300, + purple: 600, + red: 500, + sage: 300, + white: 500, + yellow: 400 + ); + + // Get the default value for the given base color + $default-value: map-get($default-values, $base); + + // If no value is provided, use the default value + $value: if($value == null, $default-value, $value); + $color: sd-sage-color($base, $value, hex); - + @if $color { @return $color; } @warn "Could not retrieve color: #{$base} #{$value}. Got `#{$color}` from `sd-sage-color()`. Default color #{$sage-color-default-name} (`#{$sage-color-default}`) returned instead."; - + @return $sage-color-default; } diff --git a/packages/sage-react/lib/configs/dictionary/tokens.js b/packages/sage-react/lib/configs/dictionary/tokens.js index 584833ee99..bbee9c2ce7 100644 --- a/packages/sage-react/lib/configs/dictionary/tokens.js +++ b/packages/sage-react/lib/configs/dictionary/tokens.js @@ -208,42 +208,42 @@ export const COLOR_BASE_YELLOW_400_CLASSNAME = 't-sage--color-yellow-400'; export const COLOR_BASE_YELLOW_500_HEX = '#451902'; export const COLOR_BASE_YELLOW_500_CODE = 'yellow-500'; export const COLOR_BASE_YELLOW_500_CLASSNAME = 't-sage--color-yellow-500'; -export const COLOR_BASE_RED_5_HEX = '#fffafa'; -export const COLOR_BASE_RED_5_CODE = 'red-5'; -export const COLOR_BASE_RED_5_CLASSNAME = 't-sage--color-red-5'; -export const COLOR_BASE_RED_10_HEX = '#fef2f2'; -export const COLOR_BASE_RED_10_CODE = 'red-10'; -export const COLOR_BASE_RED_10_CLASSNAME = 't-sage--color-red-10'; -export const COLOR_BASE_RED_15_HEX = '#fee2e1'; -export const COLOR_BASE_RED_15_CODE = 'red-15'; -export const COLOR_BASE_RED_15_CLASSNAME = 't-sage--color-red-15'; -export const COLOR_BASE_RED_20_HEX = '#fecaca'; -export const COLOR_BASE_RED_20_CODE = 'red-20'; -export const COLOR_BASE_RED_20_CLASSNAME = 't-sage--color-red-20'; -export const COLOR_BASE_RED_30_HEX = '#fda5a5'; -export const COLOR_BASE_RED_30_CODE = 'red-30'; -export const COLOR_BASE_RED_30_CLASSNAME = 't-sage--color-red-30'; -export const COLOR_BASE_RED_40_HEX = '#f87171'; -export const COLOR_BASE_RED_40_CODE = 'red-40'; -export const COLOR_BASE_RED_40_CLASSNAME = 't-sage--color-red-40'; -export const COLOR_BASE_RED_50_HEX = '#ef4444'; -export const COLOR_BASE_RED_50_CODE = 'red-50'; -export const COLOR_BASE_RED_50_CLASSNAME = 't-sage--color-red-50'; -export const COLOR_BASE_RED_60_HEX = '#dc2625'; -export const COLOR_BASE_RED_60_CODE = 'red-60'; -export const COLOR_BASE_RED_60_CLASSNAME = 't-sage--color-red-60'; -export const COLOR_BASE_RED_70_HEX = '#b91c1b'; -export const COLOR_BASE_RED_70_CODE = 'red-70'; -export const COLOR_BASE_RED_70_CLASSNAME = 't-sage--color-red-70'; -export const COLOR_BASE_RED_80_HEX = '#991b1b'; -export const COLOR_BASE_RED_80_CODE = 'red-80'; -export const COLOR_BASE_RED_80_CLASSNAME = 't-sage--color-red-80'; -export const COLOR_BASE_RED_90_HEX = '#7f1c1d'; -export const COLOR_BASE_RED_90_CODE = 'red-90'; -export const COLOR_BASE_RED_90_CLASSNAME = 't-sage--color-red-90'; -export const COLOR_BASE_RED_95_HEX = '#572627'; -export const COLOR_BASE_RED_95_CODE = 'red-95'; -export const COLOR_BASE_RED_95_CLASSNAME = 't-sage--color-red-95'; +export const COLOR_BASE_RED_50_HEX = '#fffafa'; +export const COLOR_BASE_RED_50_CODE = 'red-5'; +export const COLOR_BASE_RED_50_CLASSNAME = 't-sage--color-red-5'; +export const COLOR_BASE_RED_100_HEX = '#fef2f2'; +export const COLOR_BASE_RED_100_CODE = 'red-10'; +export const COLOR_BASE_RED_100_CLASSNAME = 't-sage--color-red-10'; +export const COLOR_BASE_RED_150_HEX = '#fee2e1'; +export const COLOR_BASE_RED_150_CODE = 'red-15'; +export const COLOR_BASE_RED_150_CLASSNAME = 't-sage--color-red-15'; +export const COLOR_BASE_RED_200_HEX = '#fecaca'; +export const COLOR_BASE_RED_200_CODE = 'red-20'; +export const COLOR_BASE_RED_200_CLASSNAME = 't-sage--color-red-20'; +export const COLOR_BASE_RED_300_HEX = '#fda5a5'; +export const COLOR_BASE_RED_300_CODE = 'red-30'; +export const COLOR_BASE_RED_300_CLASSNAME = 't-sage--color-red-30'; +export const COLOR_BASE_RED_400_HEX = '#f87171'; +export const COLOR_BASE_RED_400_CODE = 'red-40'; +export const COLOR_BASE_RED_400_CLASSNAME = 't-sage--color-red-40'; +export const COLOR_BASE_RED_500_HEX = '#ef4444'; +export const COLOR_BASE_RED_500_CODE = 'red-50'; +export const COLOR_BASE_RED_500_CLASSNAME = 't-sage--color-red-50'; +export const COLOR_BASE_RED_600_HEX = '#dc2625'; +export const COLOR_BASE_RED_600_CODE = 'red-60'; +export const COLOR_BASE_RED_600_CLASSNAME = 't-sage--color-red-60'; +export const COLOR_BASE_RED_700_HEX = '#b91c1b'; +export const COLOR_BASE_RED_700_CODE = 'red-70'; +export const COLOR_BASE_RED_700_CLASSNAME = 't-sage--color-red-70'; +export const COLOR_BASE_RED_800_HEX = '#991b1b'; +export const COLOR_BASE_RED_800_CODE = 'red-80'; +export const COLOR_BASE_RED_800_CLASSNAME = 't-sage--color-red-80'; +export const COLOR_BASE_RED_900_HEX = '#7f1c1d'; +export const COLOR_BASE_RED_900_CODE = 'red-90'; +export const COLOR_BASE_RED_900_CLASSNAME = 't-sage--color-red-90'; +export const COLOR_BASE_RED_950_HEX = '#572627'; +export const COLOR_BASE_RED_950_CODE = 'red-95'; +export const COLOR_BASE_RED_950_CLASSNAME = 't-sage--color-red-95'; export const COLOR_BASE_ORANGE_100_HEX = '#ffe3d4'; export const COLOR_BASE_ORANGE_100_CODE = 'orange-100'; export const COLOR_BASE_ORANGE_100_CLASSNAME = 't-sage--color-orange-100'; @@ -739,65 +739,65 @@ export const COLOR = { }, }, RED: { - 5: { - HEX: COLOR_BASE_RED_5_HEX, - CODE: COLOR_BASE_RED_5_CODE, - CLASSNAME: COLOR_BASE_RED_5_CLASSNAME, + 50: { + HEX: COLOR_BASE_RED_50_HEX, + CODE: COLOR_BASE_RED_50_CODE, + CLASSNAME: COLOR_BASE_RED_50_CLASSNAME, }, - 10: { - HEX: COLOR_BASE_RED_10_HEX, - CODE: COLOR_BASE_RED_10_CODE, - CLASSNAME: COLOR_BASE_RED_10_CLASSNAME, + 100: { + HEX: COLOR_BASE_RED_100_HEX, + CODE: COLOR_BASE_RED_100_CODE, + CLASSNAME: COLOR_BASE_RED_100_CLASSNAME, }, - 15: { - HEX: COLOR_BASE_RED_15_HEX, - CODE: COLOR_BASE_RED_15_CODE, - CLASSNAME: COLOR_BASE_RED_15_CLASSNAME, + 150: { + HEX: COLOR_BASE_RED_150_HEX, + CODE: COLOR_BASE_RED_150_CODE, + CLASSNAME: COLOR_BASE_RED_150_CLASSNAME, }, - 20: { - HEX: COLOR_BASE_RED_20_HEX, - CODE: COLOR_BASE_RED_20_CODE, - CLASSNAME: COLOR_BASE_RED_20_CLASSNAME, + 200: { + HEX: COLOR_BASE_RED_200_HEX, + CODE: COLOR_BASE_RED_200_CODE, + CLASSNAME: COLOR_BASE_RED_200_CLASSNAME, }, - 30: { - HEX: COLOR_BASE_RED_30_HEX, - CODE: COLOR_BASE_RED_30_CODE, - CLASSNAME: COLOR_BASE_RED_30_CLASSNAME, + 300: { + HEX: COLOR_BASE_RED_300_HEX, + CODE: COLOR_BASE_RED_300_CODE, + CLASSNAME: COLOR_BASE_RED_300_CLASSNAME, }, - 40: { - HEX: COLOR_BASE_RED_40_HEX, - CODE: COLOR_BASE_RED_40_CODE, - CLASSNAME: COLOR_BASE_RED_40_CLASSNAME, + 400: { + HEX: COLOR_BASE_RED_400_HEX, + CODE: COLOR_BASE_RED_400_CODE, + CLASSNAME: COLOR_BASE_RED_400_CLASSNAME, }, - 50: { - HEX: COLOR_BASE_RED_50_HEX, - CODE: COLOR_BASE_RED_50_CODE, - CLASSNAME: COLOR_BASE_RED_50_CLASSNAME, + 500: { + HEX: COLOR_BASE_RED_500_HEX, + CODE: COLOR_BASE_RED_500_CODE, + CLASSNAME: COLOR_BASE_RED_500_CLASSNAME, }, - 60: { - HEX: COLOR_BASE_RED_60_HEX, - CODE: COLOR_BASE_RED_60_CODE, - CLASSNAME: COLOR_BASE_RED_60_CLASSNAME, + 600: { + HEX: COLOR_BASE_RED_600_HEX, + CODE: COLOR_BASE_RED_600_CODE, + CLASSNAME: COLOR_BASE_RED_600_CLASSNAME, }, - 70: { - HEX: COLOR_BASE_RED_70_HEX, - CODE: COLOR_BASE_RED_70_CODE, - CLASSNAME: COLOR_BASE_RED_70_CLASSNAME, + 700: { + HEX: COLOR_BASE_RED_700_HEX, + CODE: COLOR_BASE_RED_700_CODE, + CLASSNAME: COLOR_BASE_RED_700_CLASSNAME, }, - 80: { - HEX: COLOR_BASE_RED_80_HEX, - CODE: COLOR_BASE_RED_80_CODE, - CLASSNAME: COLOR_BASE_RED_80_CLASSNAME, + 800: { + HEX: COLOR_BASE_RED_800_HEX, + CODE: COLOR_BASE_RED_800_CODE, + CLASSNAME: COLOR_BASE_RED_800_CLASSNAME, }, - 90: { - HEX: COLOR_BASE_RED_90_HEX, - CODE: COLOR_BASE_RED_90_CODE, - CLASSNAME: COLOR_BASE_RED_90_CLASSNAME, + 900: { + HEX: COLOR_BASE_RED_900_HEX, + CODE: COLOR_BASE_RED_900_CODE, + CLASSNAME: COLOR_BASE_RED_900_CLASSNAME, }, - 95: { - HEX: COLOR_BASE_RED_95_HEX, - CODE: COLOR_BASE_RED_95_CODE, - CLASSNAME: COLOR_BASE_RED_95_CLASSNAME, + 950: { + HEX: COLOR_BASE_RED_950_HEX, + CODE: COLOR_BASE_RED_950_CODE, + CLASSNAME: COLOR_BASE_RED_950_CLASSNAME, }, }, ORANGE: { @@ -1303,7 +1303,7 @@ export const COLOR_CORE_MERCURY = '#ff3e15'; export const COLOR_CORE_PRIMARY = '#2463eb'; export const COLOR_CORE_SAGE = '#079250'; export const COLOR_CORE_YELLOW = '#fdbb21'; -export const COLOR_CORE_RED = '#ef4444'; +export const COLOR_CORE_RED = '#fffafa'; export const COLOR_CORE_ORANGE = '#ff3e15'; export const COLOR_CORE_PURPLE = '#533be5'; export const COLOR_CORE_CHARCOAL = '#4d4d4c'; diff --git a/style-dictionary/tokens/color/base.json b/style-dictionary/tokens/color/base.json index bca4e9a167..8b9ec0f9ca 100644 --- a/style-dictionary/tokens/color/base.json +++ b/style-dictionary/tokens/color/base.json @@ -329,62 +329,62 @@ } }, "red": { - "5": { + "50": { "hex": { "value": "#fffafa" }, "code": { "value": "red-5" }, "classname": { "value": "t-sage--color-red-5" } }, - "10": { + "100": { "hex": { "value": "#fef2f2" }, "code": { "value": "red-10" }, "classname": { "value": "t-sage--color-red-10" } }, - "15": { + "150": { "hex": { "value": "#fee2e1" }, "code": { "value": "red-15" }, "classname": { "value": "t-sage--color-red-15" } }, - "20": { + "200": { "hex": { "value": "#fecaca" }, "code": { "value": "red-20" }, "classname": { "value": "t-sage--color-red-20" } }, - "30": { + "300": { "hex": { "value": "#fda5a5" }, "code": { "value": "red-30" }, "classname": { "value": "t-sage--color-red-30" } }, - "40": { + "400": { "hex": { "value": "#f87171" }, "code": { "value": "red-40" }, "classname": { "value": "t-sage--color-red-40" } }, - "50": { + "500": { "hex": { "value": "#ef4444" }, "code": { "value": "red-50" }, "classname": { "value": "t-sage--color-red-50" } }, - "60": { + "600": { "hex": { "value": "#dc2625" }, "code": { "value": "red-60" }, "classname": { "value": "t-sage--color-red-60" } }, - "70": { + "700": { "hex": { "value": "#b91c1b" }, "code": { "value": "red-70" }, "classname": { "value": "t-sage--color-red-70" } }, - "80": { + "800": { "hex": { "value": "#991b1b" }, "code": { "value": "red-80" }, "classname": { "value": "t-sage--color-red-80" } }, - "90": { + "900": { "hex": { "value": "#7f1c1d" }, "code": { "value": "red-90" }, "classname": { "value": "t-sage--color-red-90" } }, - "95": { + "950": { "hex": { "value": "#572627" }, "code": { "value": "red-95" }, "classname": { "value": "t-sage--color-red-95" } diff --git a/style-dictionary/tokens/color/combos.json b/style-dictionary/tokens/color/combos.json index 1ce480ed87..47cb37c3d6 100644 --- a/style-dictionary/tokens/color/combos.json +++ b/style-dictionary/tokens/color/combos.json @@ -194,38 +194,38 @@ "danger": { "default": { "foreground": { - "value": "{color.base.red.80.hex}" + "value": "{color.base.red.800.hex}" }, "foreground-accent": { - "value": "{color.base.red.95.hex}" + "value": "{color.base.red.950.hex}" }, "background": { - "value": "{color.base.red.15.hex}" + "value": "{color.base.red.150.hex}" }, "background-accent": { - "value": "{color.base.red.30.hex}" + "value": "{color.base.red.300.hex}" }, "icon-background-accent": { - "value": "{color.base.red.50.hex}" + "value": "{color.base.red.500.hex}" } }, "subtle": { "foreground": { - "value": "{color.base.red.80.hex}" + "value": "{color.base.red.800.hex}" }, "foreground-accent": { - "value": "{color.base.red.30.hex}" + "value": "{color.base.red.300.hex}" }, "background": { - "value": "{color.base.red.30.hex}" + "value": "{color.base.red.300.hex}" } }, "bold": { "foreground": { - "value": "{color.base.red.15.hex}" + "value": "{color.base.red.150.hex}" }, "background": { - "value": "{color.base.red.30.hex}" + "value": "{color.base.red.300.hex}" } } }, From 23ac2011637e29fe5f14f28eaf27b2c614afee95 Mon Sep 17 00:00:00 2001 From: Quinton Jason Date: Tue, 20 Aug 2024 14:17:11 -0500 Subject: [PATCH 06/31] fix: add red color classes --- .../app/sage_tokens/sage_dictionary.rb | 22 +++++++++---------- .../lib/stylesheets/dictionary/_tokens.scss | 22 +++++++++---------- .../lib/configs/dictionary/tokens.js | 22 +++++++++---------- style-dictionary/tokens/color/base.json | 22 +++++++++---------- 4 files changed, 44 insertions(+), 44 deletions(-) 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 d03c7f3ce5..4e2392a0c2 100644 --- a/docs/lib/sage_rails/app/sage_tokens/sage_dictionary.rb +++ b/docs/lib/sage_rails/app/sage_tokens/sage_dictionary.rb @@ -215,37 +215,37 @@ module SageDictionary SD_SAGE_COLOR_BASE_RED_50_CLASSNAME = "t-sage--color-red-5" SD_SAGE_COLOR_BASE_RED_100_HEX = "#fef2f2" SD_SAGE_COLOR_BASE_RED_100_CODE = "red-10" - SD_SAGE_COLOR_BASE_RED_100_CLASSNAME = "t-sage--color-red-10" + SD_SAGE_COLOR_BASE_RED_100_CLASSNAME = "t-sage--color-red-100" SD_SAGE_COLOR_BASE_RED_150_HEX = "#fee2e1" SD_SAGE_COLOR_BASE_RED_150_CODE = "red-15" - SD_SAGE_COLOR_BASE_RED_150_CLASSNAME = "t-sage--color-red-15" + SD_SAGE_COLOR_BASE_RED_150_CLASSNAME = "t-sage--color-red-150" SD_SAGE_COLOR_BASE_RED_200_HEX = "#fecaca" SD_SAGE_COLOR_BASE_RED_200_CODE = "red-20" - SD_SAGE_COLOR_BASE_RED_200_CLASSNAME = "t-sage--color-red-20" + SD_SAGE_COLOR_BASE_RED_200_CLASSNAME = "t-sage--color-red-200" SD_SAGE_COLOR_BASE_RED_300_HEX = "#fda5a5" SD_SAGE_COLOR_BASE_RED_300_CODE = "red-30" - SD_SAGE_COLOR_BASE_RED_300_CLASSNAME = "t-sage--color-red-30" + SD_SAGE_COLOR_BASE_RED_300_CLASSNAME = "t-sage--color-red-300" SD_SAGE_COLOR_BASE_RED_400_HEX = "#f87171" SD_SAGE_COLOR_BASE_RED_400_CODE = "red-40" - SD_SAGE_COLOR_BASE_RED_400_CLASSNAME = "t-sage--color-red-40" + SD_SAGE_COLOR_BASE_RED_400_CLASSNAME = "t-sage--color-red-400" SD_SAGE_COLOR_BASE_RED_500_HEX = "#ef4444" SD_SAGE_COLOR_BASE_RED_500_CODE = "red-50" - SD_SAGE_COLOR_BASE_RED_500_CLASSNAME = "t-sage--color-red-50" + SD_SAGE_COLOR_BASE_RED_500_CLASSNAME = "t-sage--color-red-500" SD_SAGE_COLOR_BASE_RED_600_HEX = "#dc2625" SD_SAGE_COLOR_BASE_RED_600_CODE = "red-60" - SD_SAGE_COLOR_BASE_RED_600_CLASSNAME = "t-sage--color-red-60" + SD_SAGE_COLOR_BASE_RED_600_CLASSNAME = "t-sage--color-red-600" SD_SAGE_COLOR_BASE_RED_700_HEX = "#b91c1b" SD_SAGE_COLOR_BASE_RED_700_CODE = "red-70" - SD_SAGE_COLOR_BASE_RED_700_CLASSNAME = "t-sage--color-red-70" + SD_SAGE_COLOR_BASE_RED_700_CLASSNAME = "t-sage--color-red-700" SD_SAGE_COLOR_BASE_RED_800_HEX = "#991b1b" SD_SAGE_COLOR_BASE_RED_800_CODE = "red-80" - SD_SAGE_COLOR_BASE_RED_800_CLASSNAME = "t-sage--color-red-80" + SD_SAGE_COLOR_BASE_RED_800_CLASSNAME = "t-sage--color-red-800" SD_SAGE_COLOR_BASE_RED_900_HEX = "#7f1c1d" SD_SAGE_COLOR_BASE_RED_900_CODE = "red-90" - SD_SAGE_COLOR_BASE_RED_900_CLASSNAME = "t-sage--color-red-90" + SD_SAGE_COLOR_BASE_RED_900_CLASSNAME = "t-sage--color-red-900" SD_SAGE_COLOR_BASE_RED_950_HEX = "#572627" SD_SAGE_COLOR_BASE_RED_950_CODE = "red-95" - SD_SAGE_COLOR_BASE_RED_950_CLASSNAME = "t-sage--color-red-95" + SD_SAGE_COLOR_BASE_RED_950_CLASSNAME = "t-sage--color-red-950" SD_SAGE_COLOR_BASE_ORANGE_100_HEX = "#ffe3d4" SD_SAGE_COLOR_BASE_ORANGE_100_CODE = "orange-100" SD_SAGE_COLOR_BASE_ORANGE_100_CLASSNAME = "t-sage--color-orange-100" diff --git a/packages/sage-assets/lib/stylesheets/dictionary/_tokens.scss b/packages/sage-assets/lib/stylesheets/dictionary/_tokens.scss index 6b15d44a8e..6f48069101 100644 --- a/packages/sage-assets/lib/stylesheets/dictionary/_tokens.scss +++ b/packages/sage-assets/lib/stylesheets/dictionary/_tokens.scss @@ -800,7 +800,7 @@ $sd-sage-color-base-red-100-code: "red-10"; /// /// color color-base-red-100-classname /// -$sd-sage-color-base-red-100-classname: "t-sage--color-red-10"; +$sd-sage-color-base-red-100-classname: "t-sage--color-red-100"; /// /// color color-base-red-150-hex /// @@ -812,7 +812,7 @@ $sd-sage-color-base-red-150-code: "red-15"; /// /// color color-base-red-150-classname /// -$sd-sage-color-base-red-150-classname: "t-sage--color-red-15"; +$sd-sage-color-base-red-150-classname: "t-sage--color-red-150"; /// /// color color-base-red-200-hex /// @@ -824,7 +824,7 @@ $sd-sage-color-base-red-200-code: "red-20"; /// /// color color-base-red-200-classname /// -$sd-sage-color-base-red-200-classname: "t-sage--color-red-20"; +$sd-sage-color-base-red-200-classname: "t-sage--color-red-200"; /// /// color color-base-red-300-hex /// @@ -836,7 +836,7 @@ $sd-sage-color-base-red-300-code: "red-30"; /// /// color color-base-red-300-classname /// -$sd-sage-color-base-red-300-classname: "t-sage--color-red-30"; +$sd-sage-color-base-red-300-classname: "t-sage--color-red-300"; /// /// color color-base-red-400-hex /// @@ -848,7 +848,7 @@ $sd-sage-color-base-red-400-code: "red-40"; /// /// color color-base-red-400-classname /// -$sd-sage-color-base-red-400-classname: "t-sage--color-red-40"; +$sd-sage-color-base-red-400-classname: "t-sage--color-red-400"; /// /// color color-base-red-500-hex /// @@ -860,7 +860,7 @@ $sd-sage-color-base-red-500-code: "red-50"; /// /// color color-base-red-500-classname /// -$sd-sage-color-base-red-500-classname: "t-sage--color-red-50"; +$sd-sage-color-base-red-500-classname: "t-sage--color-red-500"; /// /// color color-base-red-600-hex /// @@ -872,7 +872,7 @@ $sd-sage-color-base-red-600-code: "red-60"; /// /// color color-base-red-600-classname /// -$sd-sage-color-base-red-600-classname: "t-sage--color-red-60"; +$sd-sage-color-base-red-600-classname: "t-sage--color-red-600"; /// /// color color-base-red-700-hex /// @@ -884,7 +884,7 @@ $sd-sage-color-base-red-700-code: "red-70"; /// /// color color-base-red-700-classname /// -$sd-sage-color-base-red-700-classname: "t-sage--color-red-70"; +$sd-sage-color-base-red-700-classname: "t-sage--color-red-700"; /// /// color color-base-red-800-hex /// @@ -896,7 +896,7 @@ $sd-sage-color-base-red-800-code: "red-80"; /// /// color color-base-red-800-classname /// -$sd-sage-color-base-red-800-classname: "t-sage--color-red-80"; +$sd-sage-color-base-red-800-classname: "t-sage--color-red-800"; /// /// color color-base-red-900-hex /// @@ -908,7 +908,7 @@ $sd-sage-color-base-red-900-code: "red-90"; /// /// color color-base-red-900-classname /// -$sd-sage-color-base-red-900-classname: "t-sage--color-red-90"; +$sd-sage-color-base-red-900-classname: "t-sage--color-red-900"; /// /// color color-base-red-950-hex /// @@ -920,7 +920,7 @@ $sd-sage-color-base-red-950-code: "red-95"; /// /// color color-base-red-950-classname /// -$sd-sage-color-base-red-950-classname: "t-sage--color-red-95"; +$sd-sage-color-base-red-950-classname: "t-sage--color-red-950"; /// /// color color-base-orange-100-hex /// diff --git a/packages/sage-react/lib/configs/dictionary/tokens.js b/packages/sage-react/lib/configs/dictionary/tokens.js index bbee9c2ce7..23135ae744 100644 --- a/packages/sage-react/lib/configs/dictionary/tokens.js +++ b/packages/sage-react/lib/configs/dictionary/tokens.js @@ -213,37 +213,37 @@ export const COLOR_BASE_RED_50_CODE = 'red-5'; export const COLOR_BASE_RED_50_CLASSNAME = 't-sage--color-red-5'; export const COLOR_BASE_RED_100_HEX = '#fef2f2'; export const COLOR_BASE_RED_100_CODE = 'red-10'; -export const COLOR_BASE_RED_100_CLASSNAME = 't-sage--color-red-10'; +export const COLOR_BASE_RED_100_CLASSNAME = 't-sage--color-red-100'; export const COLOR_BASE_RED_150_HEX = '#fee2e1'; export const COLOR_BASE_RED_150_CODE = 'red-15'; -export const COLOR_BASE_RED_150_CLASSNAME = 't-sage--color-red-15'; +export const COLOR_BASE_RED_150_CLASSNAME = 't-sage--color-red-150'; export const COLOR_BASE_RED_200_HEX = '#fecaca'; export const COLOR_BASE_RED_200_CODE = 'red-20'; -export const COLOR_BASE_RED_200_CLASSNAME = 't-sage--color-red-20'; +export const COLOR_BASE_RED_200_CLASSNAME = 't-sage--color-red-200'; export const COLOR_BASE_RED_300_HEX = '#fda5a5'; export const COLOR_BASE_RED_300_CODE = 'red-30'; -export const COLOR_BASE_RED_300_CLASSNAME = 't-sage--color-red-30'; +export const COLOR_BASE_RED_300_CLASSNAME = 't-sage--color-red-300'; export const COLOR_BASE_RED_400_HEX = '#f87171'; export const COLOR_BASE_RED_400_CODE = 'red-40'; -export const COLOR_BASE_RED_400_CLASSNAME = 't-sage--color-red-40'; +export const COLOR_BASE_RED_400_CLASSNAME = 't-sage--color-red-400'; export const COLOR_BASE_RED_500_HEX = '#ef4444'; export const COLOR_BASE_RED_500_CODE = 'red-50'; -export const COLOR_BASE_RED_500_CLASSNAME = 't-sage--color-red-50'; +export const COLOR_BASE_RED_500_CLASSNAME = 't-sage--color-red-500'; export const COLOR_BASE_RED_600_HEX = '#dc2625'; export const COLOR_BASE_RED_600_CODE = 'red-60'; -export const COLOR_BASE_RED_600_CLASSNAME = 't-sage--color-red-60'; +export const COLOR_BASE_RED_600_CLASSNAME = 't-sage--color-red-600'; export const COLOR_BASE_RED_700_HEX = '#b91c1b'; export const COLOR_BASE_RED_700_CODE = 'red-70'; -export const COLOR_BASE_RED_700_CLASSNAME = 't-sage--color-red-70'; +export const COLOR_BASE_RED_700_CLASSNAME = 't-sage--color-red-700'; export const COLOR_BASE_RED_800_HEX = '#991b1b'; export const COLOR_BASE_RED_800_CODE = 'red-80'; -export const COLOR_BASE_RED_800_CLASSNAME = 't-sage--color-red-80'; +export const COLOR_BASE_RED_800_CLASSNAME = 't-sage--color-red-800'; export const COLOR_BASE_RED_900_HEX = '#7f1c1d'; export const COLOR_BASE_RED_900_CODE = 'red-90'; -export const COLOR_BASE_RED_900_CLASSNAME = 't-sage--color-red-90'; +export const COLOR_BASE_RED_900_CLASSNAME = 't-sage--color-red-900'; export const COLOR_BASE_RED_950_HEX = '#572627'; export const COLOR_BASE_RED_950_CODE = 'red-95'; -export const COLOR_BASE_RED_950_CLASSNAME = 't-sage--color-red-95'; +export const COLOR_BASE_RED_950_CLASSNAME = 't-sage--color-red-950'; export const COLOR_BASE_ORANGE_100_HEX = '#ffe3d4'; export const COLOR_BASE_ORANGE_100_CODE = 'orange-100'; export const COLOR_BASE_ORANGE_100_CLASSNAME = 't-sage--color-orange-100'; diff --git a/style-dictionary/tokens/color/base.json b/style-dictionary/tokens/color/base.json index 8b9ec0f9ca..fb4a2b63f7 100644 --- a/style-dictionary/tokens/color/base.json +++ b/style-dictionary/tokens/color/base.json @@ -337,57 +337,57 @@ "100": { "hex": { "value": "#fef2f2" }, "code": { "value": "red-10" }, - "classname": { "value": "t-sage--color-red-10" } + "classname": { "value": "t-sage--color-red-100" } }, "150": { "hex": { "value": "#fee2e1" }, "code": { "value": "red-15" }, - "classname": { "value": "t-sage--color-red-15" } + "classname": { "value": "t-sage--color-red-150" } }, "200": { "hex": { "value": "#fecaca" }, "code": { "value": "red-20" }, - "classname": { "value": "t-sage--color-red-20" } + "classname": { "value": "t-sage--color-red-200" } }, "300": { "hex": { "value": "#fda5a5" }, "code": { "value": "red-30" }, - "classname": { "value": "t-sage--color-red-30" } + "classname": { "value": "t-sage--color-red-300" } }, "400": { "hex": { "value": "#f87171" }, "code": { "value": "red-40" }, - "classname": { "value": "t-sage--color-red-40" } + "classname": { "value": "t-sage--color-red-400" } }, "500": { "hex": { "value": "#ef4444" }, "code": { "value": "red-50" }, - "classname": { "value": "t-sage--color-red-50" } + "classname": { "value": "t-sage--color-red-500" } }, "600": { "hex": { "value": "#dc2625" }, "code": { "value": "red-60" }, - "classname": { "value": "t-sage--color-red-60" } + "classname": { "value": "t-sage--color-red-600" } }, "700": { "hex": { "value": "#b91c1b" }, "code": { "value": "red-70" }, - "classname": { "value": "t-sage--color-red-70" } + "classname": { "value": "t-sage--color-red-700" } }, "800": { "hex": { "value": "#991b1b" }, "code": { "value": "red-80" }, - "classname": { "value": "t-sage--color-red-80" } + "classname": { "value": "t-sage--color-red-800" } }, "900": { "hex": { "value": "#7f1c1d" }, "code": { "value": "red-90" }, - "classname": { "value": "t-sage--color-red-90" } + "classname": { "value": "t-sage--color-red-900" } }, "950": { "hex": { "value": "#572627" }, "code": { "value": "red-95" }, - "classname": { "value": "t-sage--color-red-95" } + "classname": { "value": "t-sage--color-red-950" } } }, "orange": { From 96dbb7bae8b8c5810b5bcff425da41f3c6eaffba Mon Sep 17 00:00:00 2001 From: Quinton Jason Date: Tue, 20 Aug 2024 14:51:57 -0500 Subject: [PATCH 07/31] fix: add 0 to green color token names --- .../stylesheets/docs/_colors.scss | 2 +- .../app/sage_tokens/sage_dictionary.rb | 192 ++++++------- .../components/_card_highlight.scss | 2 +- .../lib/stylesheets/components/_dot.scss | 2 +- .../lib/stylesheets/components/_stat_box.scss | 2 +- .../lib/stylesheets/core/_typography.scss | 2 +- .../lib/stylesheets/dictionary/_tokens.scss | 268 +++++++++--------- .../lib/configs/dictionary/tokens.js | 192 ++++++------- style-dictionary/tokens/color/base.json | 108 +++---- style-dictionary/tokens/color/core.json | 4 +- 10 files changed, 387 insertions(+), 387 deletions(-) diff --git a/docs/lib/sage-frontend/stylesheets/docs/_colors.scss b/docs/lib/sage-frontend/stylesheets/docs/_colors.scss index c70b7b3932..1e6a31e99b 100644 --- a/docs/lib/sage-frontend/stylesheets/docs/_colors.scss +++ b/docs/lib/sage-frontend/stylesheets/docs/_colors.scss @@ -83,7 +83,7 @@ color: sage-color(white); } @else if ($name == green) { - color: sage-color(green, 60); + color: sage-color(green, 600); } @else if ($name == yellow and $value > 30) { color: sage-color(white); 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 4e2392a0c2..1f83055c70 100644 --- a/docs/lib/sage_rails/app/sage_tokens/sage_dictionary.rb +++ b/docs/lib/sage_rails/app/sage_tokens/sage_dictionary.rb @@ -57,42 +57,42 @@ module SageDictionary SD_SAGE_COLOR_BASE_BLUE_95_HEX = "#172554" SD_SAGE_COLOR_BASE_BLUE_95_CODE = "blue-95" SD_SAGE_COLOR_BASE_BLUE_95_CLASSNAME = "t-sage--color-blue-95" - SD_SAGE_COLOR_BASE_GREEN_5_HEX = "#fbfefc" - SD_SAGE_COLOR_BASE_GREEN_5_CODE = "green-5" - SD_SAGE_COLOR_BASE_GREEN_5_CLASSNAME = "t-sage--color-green-5" - SD_SAGE_COLOR_BASE_GREEN_10_HEX = "#edfcf2" - SD_SAGE_COLOR_BASE_GREEN_10_CODE = "green-10" - SD_SAGE_COLOR_BASE_GREEN_10_CLASSNAME = "t-sage--color-green-10" - SD_SAGE_COLOR_BASE_GREEN_15_HEX = "#d3f8df" - SD_SAGE_COLOR_BASE_GREEN_15_CODE = "green-15" - SD_SAGE_COLOR_BASE_GREEN_15_CLASSNAME = "t-sage--color-green-15" - SD_SAGE_COLOR_BASE_GREEN_20_HEX = "#aaf0c4" - SD_SAGE_COLOR_BASE_GREEN_20_CODE = "green-20" - SD_SAGE_COLOR_BASE_GREEN_20_CLASSNAME = "t-sage--color-green-20" - SD_SAGE_COLOR_BASE_GREEN_30_HEX = "#73e2a3" - SD_SAGE_COLOR_BASE_GREEN_30_CODE = "green-30" - SD_SAGE_COLOR_BASE_GREEN_30_CLASSNAME = "t-sage--color-green-30" - SD_SAGE_COLOR_BASE_GREEN_40_HEX = "#3dcb7f" - SD_SAGE_COLOR_BASE_GREEN_40_CODE = "green-40" - SD_SAGE_COLOR_BASE_GREEN_40_CLASSNAME = "t-sage--color-green-40" - SD_SAGE_COLOR_BASE_GREEN_50_HEX = "#17b365" + SD_SAGE_COLOR_BASE_GREEN_50_HEX = "#fbfefc" SD_SAGE_COLOR_BASE_GREEN_50_CODE = "green-50" SD_SAGE_COLOR_BASE_GREEN_50_CLASSNAME = "t-sage--color-green-50" - SD_SAGE_COLOR_BASE_GREEN_60_HEX = "#079250" - SD_SAGE_COLOR_BASE_GREEN_60_CODE = "green-60" - SD_SAGE_COLOR_BASE_GREEN_60_CLASSNAME = "t-sage--color-green-60" - SD_SAGE_COLOR_BASE_GREEN_70_HEX = "#097443" - SD_SAGE_COLOR_BASE_GREEN_70_CODE = "green-70" - SD_SAGE_COLOR_BASE_GREEN_70_CLASSNAME = "t-sage--color-green-70" - SD_SAGE_COLOR_BASE_GREEN_80_HEX = "#085c37" - SD_SAGE_COLOR_BASE_GREEN_80_CODE = "green-80" - SD_SAGE_COLOR_BASE_GREEN_80_CLASSNAME = "t-sage--color-green-80" - SD_SAGE_COLOR_BASE_GREEN_90_HEX = "#094c2f" - SD_SAGE_COLOR_BASE_GREEN_90_CODE = "green-90" - SD_SAGE_COLOR_BASE_GREEN_90_CLASSNAME = "t-sage--color-green-90" - SD_SAGE_COLOR_BASE_GREEN_95_HEX = "#052e1c" - SD_SAGE_COLOR_BASE_GREEN_95_CODE = "green-95" - SD_SAGE_COLOR_BASE_GREEN_95_CLASSNAME = "t-sage--color-green-95" + SD_SAGE_COLOR_BASE_GREEN_100_HEX = "#edfcf2" + SD_SAGE_COLOR_BASE_GREEN_100_CODE = "green-100" + SD_SAGE_COLOR_BASE_GREEN_100_CLASSNAME = "t-sage--color-green-100" + SD_SAGE_COLOR_BASE_GREEN_150_HEX = "#d3f8df" + SD_SAGE_COLOR_BASE_GREEN_150_CODE = "green-150" + SD_SAGE_COLOR_BASE_GREEN_150_CLASSNAME = "t-sage--color-green-150" + SD_SAGE_COLOR_BASE_GREEN_200_HEX = "#aaf0c4" + SD_SAGE_COLOR_BASE_GREEN_200_CODE = "green-200" + SD_SAGE_COLOR_BASE_GREEN_200_CLASSNAME = "t-sage--color-green-200" + SD_SAGE_COLOR_BASE_GREEN_300_HEX = "#73e2a3" + SD_SAGE_COLOR_BASE_GREEN_300_CODE = "green-300" + SD_SAGE_COLOR_BASE_GREEN_300_CLASSNAME = "t-sage--color-green-300" + SD_SAGE_COLOR_BASE_GREEN_400_HEX = "#3dcb7f" + SD_SAGE_COLOR_BASE_GREEN_400_CODE = "green-400" + SD_SAGE_COLOR_BASE_GREEN_400_CLASSNAME = "t-sage--color-green-400" + SD_SAGE_COLOR_BASE_GREEN_500_HEX = "#17b365" + SD_SAGE_COLOR_BASE_GREEN_500_CODE = "green-500" + SD_SAGE_COLOR_BASE_GREEN_500_CLASSNAME = "t-sage--color-green-500" + SD_SAGE_COLOR_BASE_GREEN_600_HEX = "#079250" + SD_SAGE_COLOR_BASE_GREEN_600_CODE = "green-600" + SD_SAGE_COLOR_BASE_GREEN_600_CLASSNAME = "t-sage--color-green-600" + SD_SAGE_COLOR_BASE_GREEN_700_HEX = "#097443" + SD_SAGE_COLOR_BASE_GREEN_700_CODE = "green-700" + SD_SAGE_COLOR_BASE_GREEN_700_CLASSNAME = "t-sage--color-green-700" + SD_SAGE_COLOR_BASE_GREEN_800_HEX = "#085c37" + SD_SAGE_COLOR_BASE_GREEN_800_CODE = "green-800" + SD_SAGE_COLOR_BASE_GREEN_800_CLASSNAME = "t-sage--color-green-800" + SD_SAGE_COLOR_BASE_GREEN_900_HEX = "#094c2f" + SD_SAGE_COLOR_BASE_GREEN_900_CODE = "green-900" + SD_SAGE_COLOR_BASE_GREEN_900_CLASSNAME = "t-sage--color-green-900" + SD_SAGE_COLOR_BASE_GREEN_950_HEX = "#052e1c" + SD_SAGE_COLOR_BASE_GREEN_950_CODE = "green-950" + SD_SAGE_COLOR_BASE_GREEN_950_CLASSNAME = "t-sage--color-green-950" SD_SAGE_COLOR_BASE_MERCURY_5_HEX = "#fffcfa" SD_SAGE_COLOR_BASE_MERCURY_5_CODE = "mercury-5" SD_SAGE_COLOR_BASE_MERCURY_5_CLASSNAME = "t-sage--color-mercury-5" @@ -211,40 +211,40 @@ module SageDictionary SD_SAGE_COLOR_BASE_YELLOW_500_CODE = "yellow-500" SD_SAGE_COLOR_BASE_YELLOW_500_CLASSNAME = "t-sage--color-yellow-500" SD_SAGE_COLOR_BASE_RED_50_HEX = "#fffafa" - SD_SAGE_COLOR_BASE_RED_50_CODE = "red-5" - SD_SAGE_COLOR_BASE_RED_50_CLASSNAME = "t-sage--color-red-5" + SD_SAGE_COLOR_BASE_RED_50_CODE = "red-50" + SD_SAGE_COLOR_BASE_RED_50_CLASSNAME = "t-sage--color-red-50" SD_SAGE_COLOR_BASE_RED_100_HEX = "#fef2f2" - SD_SAGE_COLOR_BASE_RED_100_CODE = "red-10" + SD_SAGE_COLOR_BASE_RED_100_CODE = "red-100" SD_SAGE_COLOR_BASE_RED_100_CLASSNAME = "t-sage--color-red-100" SD_SAGE_COLOR_BASE_RED_150_HEX = "#fee2e1" - SD_SAGE_COLOR_BASE_RED_150_CODE = "red-15" + SD_SAGE_COLOR_BASE_RED_150_CODE = "red-150" SD_SAGE_COLOR_BASE_RED_150_CLASSNAME = "t-sage--color-red-150" SD_SAGE_COLOR_BASE_RED_200_HEX = "#fecaca" - SD_SAGE_COLOR_BASE_RED_200_CODE = "red-20" + SD_SAGE_COLOR_BASE_RED_200_CODE = "red-200" SD_SAGE_COLOR_BASE_RED_200_CLASSNAME = "t-sage--color-red-200" SD_SAGE_COLOR_BASE_RED_300_HEX = "#fda5a5" - SD_SAGE_COLOR_BASE_RED_300_CODE = "red-30" + SD_SAGE_COLOR_BASE_RED_300_CODE = "red-300" SD_SAGE_COLOR_BASE_RED_300_CLASSNAME = "t-sage--color-red-300" SD_SAGE_COLOR_BASE_RED_400_HEX = "#f87171" - SD_SAGE_COLOR_BASE_RED_400_CODE = "red-40" + SD_SAGE_COLOR_BASE_RED_400_CODE = "red-400" SD_SAGE_COLOR_BASE_RED_400_CLASSNAME = "t-sage--color-red-400" SD_SAGE_COLOR_BASE_RED_500_HEX = "#ef4444" - SD_SAGE_COLOR_BASE_RED_500_CODE = "red-50" + SD_SAGE_COLOR_BASE_RED_500_CODE = "red-500" SD_SAGE_COLOR_BASE_RED_500_CLASSNAME = "t-sage--color-red-500" SD_SAGE_COLOR_BASE_RED_600_HEX = "#dc2625" - SD_SAGE_COLOR_BASE_RED_600_CODE = "red-60" + SD_SAGE_COLOR_BASE_RED_600_CODE = "red-600" SD_SAGE_COLOR_BASE_RED_600_CLASSNAME = "t-sage--color-red-600" SD_SAGE_COLOR_BASE_RED_700_HEX = "#b91c1b" - SD_SAGE_COLOR_BASE_RED_700_CODE = "red-70" + SD_SAGE_COLOR_BASE_RED_700_CODE = "red-700" SD_SAGE_COLOR_BASE_RED_700_CLASSNAME = "t-sage--color-red-700" SD_SAGE_COLOR_BASE_RED_800_HEX = "#991b1b" - SD_SAGE_COLOR_BASE_RED_800_CODE = "red-80" + SD_SAGE_COLOR_BASE_RED_800_CODE = "red-800" SD_SAGE_COLOR_BASE_RED_800_CLASSNAME = "t-sage--color-red-800" SD_SAGE_COLOR_BASE_RED_900_HEX = "#7f1c1d" - SD_SAGE_COLOR_BASE_RED_900_CODE = "red-90" + SD_SAGE_COLOR_BASE_RED_900_CODE = "red-900" SD_SAGE_COLOR_BASE_RED_900_CLASSNAME = "t-sage--color-red-900" SD_SAGE_COLOR_BASE_RED_950_HEX = "#572627" - SD_SAGE_COLOR_BASE_RED_950_CODE = "red-95" + SD_SAGE_COLOR_BASE_RED_950_CODE = "red-950" SD_SAGE_COLOR_BASE_RED_950_CLASSNAME = "t-sage--color-red-950" SD_SAGE_COLOR_BASE_ORANGE_100_HEX = "#ffe3d4" SD_SAGE_COLOR_BASE_ORANGE_100_CODE = "orange-100" @@ -476,65 +476,65 @@ module SageDictionary }, }, "GREEN": { - "5": { - "HEX": SD_SAGE_COLOR_BASE_GREEN_5_HEX, - "CODE": SD_SAGE_COLOR_BASE_GREEN_5_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_GREEN_5_CLASSNAME, + "50": { + "HEX": SD_SAGE_COLOR_BASE_GREEN_50_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREEN_50_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREEN_50_CLASSNAME, }, - "10": { - "HEX": SD_SAGE_COLOR_BASE_GREEN_10_HEX, - "CODE": SD_SAGE_COLOR_BASE_GREEN_10_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_GREEN_10_CLASSNAME, + "100": { + "HEX": SD_SAGE_COLOR_BASE_GREEN_100_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREEN_100_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREEN_100_CLASSNAME, }, - "15": { - "HEX": SD_SAGE_COLOR_BASE_GREEN_15_HEX, - "CODE": SD_SAGE_COLOR_BASE_GREEN_15_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_GREEN_15_CLASSNAME, + "150": { + "HEX": SD_SAGE_COLOR_BASE_GREEN_150_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREEN_150_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREEN_150_CLASSNAME, }, - "20": { - "HEX": SD_SAGE_COLOR_BASE_GREEN_20_HEX, - "CODE": SD_SAGE_COLOR_BASE_GREEN_20_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_GREEN_20_CLASSNAME, + "200": { + "HEX": SD_SAGE_COLOR_BASE_GREEN_200_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREEN_200_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREEN_200_CLASSNAME, }, - "30": { - "HEX": SD_SAGE_COLOR_BASE_GREEN_30_HEX, - "CODE": SD_SAGE_COLOR_BASE_GREEN_30_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_GREEN_30_CLASSNAME, + "300": { + "HEX": SD_SAGE_COLOR_BASE_GREEN_300_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREEN_300_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREEN_300_CLASSNAME, }, - "40": { - "HEX": SD_SAGE_COLOR_BASE_GREEN_40_HEX, - "CODE": SD_SAGE_COLOR_BASE_GREEN_40_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_GREEN_40_CLASSNAME, + "400": { + "HEX": SD_SAGE_COLOR_BASE_GREEN_400_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREEN_400_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREEN_400_CLASSNAME, }, - "50": { - "HEX": SD_SAGE_COLOR_BASE_GREEN_50_HEX, - "CODE": SD_SAGE_COLOR_BASE_GREEN_50_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_GREEN_50_CLASSNAME, + "500": { + "HEX": SD_SAGE_COLOR_BASE_GREEN_500_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREEN_500_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREEN_500_CLASSNAME, }, - "60": { - "HEX": SD_SAGE_COLOR_BASE_GREEN_60_HEX, - "CODE": SD_SAGE_COLOR_BASE_GREEN_60_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_GREEN_60_CLASSNAME, + "600": { + "HEX": SD_SAGE_COLOR_BASE_GREEN_600_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREEN_600_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREEN_600_CLASSNAME, }, - "70": { - "HEX": SD_SAGE_COLOR_BASE_GREEN_70_HEX, - "CODE": SD_SAGE_COLOR_BASE_GREEN_70_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_GREEN_70_CLASSNAME, + "700": { + "HEX": SD_SAGE_COLOR_BASE_GREEN_700_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREEN_700_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREEN_700_CLASSNAME, }, - "80": { - "HEX": SD_SAGE_COLOR_BASE_GREEN_80_HEX, - "CODE": SD_SAGE_COLOR_BASE_GREEN_80_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_GREEN_80_CLASSNAME, + "800": { + "HEX": SD_SAGE_COLOR_BASE_GREEN_800_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREEN_800_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREEN_800_CLASSNAME, }, - "90": { - "HEX": SD_SAGE_COLOR_BASE_GREEN_90_HEX, - "CODE": SD_SAGE_COLOR_BASE_GREEN_90_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_GREEN_90_CLASSNAME, + "900": { + "HEX": SD_SAGE_COLOR_BASE_GREEN_900_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREEN_900_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREEN_900_CLASSNAME, }, - "95": { - "HEX": SD_SAGE_COLOR_BASE_GREEN_95_HEX, - "CODE": SD_SAGE_COLOR_BASE_GREEN_95_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_GREEN_95_CLASSNAME, + "950": { + "HEX": SD_SAGE_COLOR_BASE_GREEN_950_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREEN_950_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREEN_950_CLASSNAME, }, }, "MERCURY": { @@ -1305,7 +1305,7 @@ module SageDictionary SD_SAGE_COLOR_CORE_PRIMARY = "#2463eb" SD_SAGE_COLOR_CORE_SAGE = "#079250" SD_SAGE_COLOR_CORE_YELLOW = "#fdbb21" - SD_SAGE_COLOR_CORE_RED = "#fffafa" + SD_SAGE_COLOR_CORE_RED = "#ef4444" SD_SAGE_COLOR_CORE_ORANGE = "#ff3e15" SD_SAGE_COLOR_CORE_PURPLE = "#533be5" SD_SAGE_COLOR_CORE_CHARCOAL = "#4d4d4c" diff --git a/packages/sage-assets/lib/stylesheets/components/_card_highlight.scss b/packages/sage-assets/lib/stylesheets/components/_card_highlight.scss index bc67b9446f..4f02b1d117 100644 --- a/packages/sage-assets/lib/stylesheets/components/_card_highlight.scss +++ b/packages/sage-assets/lib/stylesheets/components/_card_highlight.scss @@ -58,7 +58,7 @@ $-card-highlight-size: rem(12px); --color: #{sage-color($-color-name, 60)}; } @else if ($-color-name == green) { - --color: #{sage-color($-color-name, 60)}; + --color: #{sage-color($-color-name, 600)}; } @else if ($-color-name == mercury) { --color: #{sage-color($-color-name, 50)}; diff --git a/packages/sage-assets/lib/stylesheets/components/_dot.scss b/packages/sage-assets/lib/stylesheets/components/_dot.scss index c065fdc97c..8713b86705 100644 --- a/packages/sage-assets/lib/stylesheets/components/_dot.scss +++ b/packages/sage-assets/lib/stylesheets/components/_dot.scss @@ -46,7 +46,7 @@ $-sage-dot-size--badge: rem(6px); --sage-dot-color: #{sage-color($-color-name, 60)}; } @else if ($-color-name == green) { - --sage-dot-color: #{sage-color($-color-name, 60)}; + --sage-dot-color: #{sage-color($-color-name, 600)}; } @else if ($-color-name == mercury) { --sage-dot-color: #{sage-color($-color-name, 50)}; diff --git a/packages/sage-assets/lib/stylesheets/components/_stat_box.scss b/packages/sage-assets/lib/stylesheets/components/_stat_box.scss index 74e49f3134..0cbef32d2a 100644 --- a/packages/sage-assets/lib/stylesheets/components/_stat_box.scss +++ b/packages/sage-assets/lib/stylesheets/components/_stat_box.scss @@ -105,7 +105,7 @@ $-stat-box-image-max-width: rem(48px); --legend-color: #{sage-color($-color-name, 60)}; } @else if ($-color-name == green) { - --legend-color: #{sage-color($-color-name, 60)}; + --legend-color: #{sage-color($-color-name, 600)}; } @else if ($-color-name == mercury) { --legend-color: #{sage-color($-color-name, 50)}; diff --git a/packages/sage-assets/lib/stylesheets/core/_typography.scss b/packages/sage-assets/lib/stylesheets/core/_typography.scss index 3524214b35..72a9d0a459 100644 --- a/packages/sage-assets/lib/stylesheets/core/_typography.scss +++ b/packages/sage-assets/lib/stylesheets/core/_typography.scss @@ -215,7 +215,7 @@ body:not(.sage-excluded), $color-value: sage-color($color-name, 60); } @else if ($color-name == green) { - $color-value: sage-color($color-name, 60); + $color-value: sage-color($color-name, 600); } @else if ($color-name == mercury) { $color-value: sage-color($color-name, 50); diff --git a/packages/sage-assets/lib/stylesheets/dictionary/_tokens.scss b/packages/sage-assets/lib/stylesheets/dictionary/_tokens.scss index 6f48069101..219b20bd13 100644 --- a/packages/sage-assets/lib/stylesheets/dictionary/_tokens.scss +++ b/packages/sage-assets/lib/stylesheets/dictionary/_tokens.scss @@ -166,149 +166,149 @@ $sd-sage-color-base-blue-95-code: "blue-95"; /// $sd-sage-color-base-blue-95-classname: "t-sage--color-blue-95"; /// -/// color color-base-green-5-hex +/// color color-base-green-50-hex /// -$sd-sage-color-base-green-5-hex: #fbfefc; +$sd-sage-color-base-green-50-hex: #fbfefc; /// -/// color color-base-green-5-code +/// color color-base-green-50-code /// -$sd-sage-color-base-green-5-code: "green-5"; +$sd-sage-color-base-green-50-code: "green-50"; /// -/// color color-base-green-5-classname +/// color color-base-green-50-classname /// -$sd-sage-color-base-green-5-classname: "t-sage--color-green-5"; +$sd-sage-color-base-green-50-classname: "t-sage--color-green-50"; /// -/// color color-base-green-10-hex +/// color color-base-green-100-hex /// -$sd-sage-color-base-green-10-hex: #edfcf2; +$sd-sage-color-base-green-100-hex: #edfcf2; /// -/// color color-base-green-10-code +/// color color-base-green-100-code /// -$sd-sage-color-base-green-10-code: "green-10"; +$sd-sage-color-base-green-100-code: "green-100"; /// -/// color color-base-green-10-classname +/// color color-base-green-100-classname /// -$sd-sage-color-base-green-10-classname: "t-sage--color-green-10"; +$sd-sage-color-base-green-100-classname: "t-sage--color-green-100"; /// -/// color color-base-green-15-hex +/// color color-base-green-150-hex /// -$sd-sage-color-base-green-15-hex: #d3f8df; +$sd-sage-color-base-green-150-hex: #d3f8df; /// -/// color color-base-green-15-code +/// color color-base-green-150-code /// -$sd-sage-color-base-green-15-code: "green-15"; +$sd-sage-color-base-green-150-code: "green-150"; /// -/// color color-base-green-15-classname +/// color color-base-green-150-classname /// -$sd-sage-color-base-green-15-classname: "t-sage--color-green-15"; +$sd-sage-color-base-green-150-classname: "t-sage--color-green-150"; /// -/// color color-base-green-20-hex +/// color color-base-green-200-hex /// -$sd-sage-color-base-green-20-hex: #aaf0c4; +$sd-sage-color-base-green-200-hex: #aaf0c4; /// -/// color color-base-green-20-code +/// color color-base-green-200-code /// -$sd-sage-color-base-green-20-code: "green-20"; +$sd-sage-color-base-green-200-code: "green-200"; /// -/// color color-base-green-20-classname +/// color color-base-green-200-classname /// -$sd-sage-color-base-green-20-classname: "t-sage--color-green-20"; +$sd-sage-color-base-green-200-classname: "t-sage--color-green-200"; /// -/// color color-base-green-30-hex +/// color color-base-green-300-hex /// -$sd-sage-color-base-green-30-hex: #73e2a3; +$sd-sage-color-base-green-300-hex: #73e2a3; /// -/// color color-base-green-30-code +/// color color-base-green-300-code /// -$sd-sage-color-base-green-30-code: "green-30"; +$sd-sage-color-base-green-300-code: "green-300"; /// -/// color color-base-green-30-classname +/// color color-base-green-300-classname /// -$sd-sage-color-base-green-30-classname: "t-sage--color-green-30"; +$sd-sage-color-base-green-300-classname: "t-sage--color-green-300"; /// -/// color color-base-green-40-hex +/// color color-base-green-400-hex /// -$sd-sage-color-base-green-40-hex: #3dcb7f; +$sd-sage-color-base-green-400-hex: #3dcb7f; /// -/// color color-base-green-40-code +/// color color-base-green-400-code /// -$sd-sage-color-base-green-40-code: "green-40"; +$sd-sage-color-base-green-400-code: "green-400"; /// -/// color color-base-green-40-classname +/// color color-base-green-400-classname /// -$sd-sage-color-base-green-40-classname: "t-sage--color-green-40"; +$sd-sage-color-base-green-400-classname: "t-sage--color-green-400"; /// -/// color color-base-green-50-hex +/// color color-base-green-500-hex /// -$sd-sage-color-base-green-50-hex: #17b365; +$sd-sage-color-base-green-500-hex: #17b365; /// -/// color color-base-green-50-code +/// color color-base-green-500-code /// -$sd-sage-color-base-green-50-code: "green-50"; +$sd-sage-color-base-green-500-code: "green-500"; /// -/// color color-base-green-50-classname +/// color color-base-green-500-classname /// -$sd-sage-color-base-green-50-classname: "t-sage--color-green-50"; +$sd-sage-color-base-green-500-classname: "t-sage--color-green-500"; /// -/// color color-base-green-60-hex +/// color color-base-green-600-hex /// -$sd-sage-color-base-green-60-hex: #079250; +$sd-sage-color-base-green-600-hex: #079250; /// -/// color color-base-green-60-code +/// color color-base-green-600-code /// -$sd-sage-color-base-green-60-code: "green-60"; +$sd-sage-color-base-green-600-code: "green-600"; /// -/// color color-base-green-60-classname +/// color color-base-green-600-classname /// -$sd-sage-color-base-green-60-classname: "t-sage--color-green-60"; +$sd-sage-color-base-green-600-classname: "t-sage--color-green-600"; /// -/// color color-base-green-70-hex +/// color color-base-green-700-hex /// -$sd-sage-color-base-green-70-hex: #097443; +$sd-sage-color-base-green-700-hex: #097443; /// -/// color color-base-green-70-code +/// color color-base-green-700-code /// -$sd-sage-color-base-green-70-code: "green-70"; +$sd-sage-color-base-green-700-code: "green-700"; /// -/// color color-base-green-70-classname +/// color color-base-green-700-classname /// -$sd-sage-color-base-green-70-classname: "t-sage--color-green-70"; +$sd-sage-color-base-green-700-classname: "t-sage--color-green-700"; /// -/// color color-base-green-80-hex +/// color color-base-green-800-hex /// -$sd-sage-color-base-green-80-hex: #085c37; +$sd-sage-color-base-green-800-hex: #085c37; /// -/// color color-base-green-80-code +/// color color-base-green-800-code /// -$sd-sage-color-base-green-80-code: "green-80"; +$sd-sage-color-base-green-800-code: "green-800"; /// -/// color color-base-green-80-classname +/// color color-base-green-800-classname /// -$sd-sage-color-base-green-80-classname: "t-sage--color-green-80"; +$sd-sage-color-base-green-800-classname: "t-sage--color-green-800"; /// -/// color color-base-green-90-hex +/// color color-base-green-900-hex /// -$sd-sage-color-base-green-90-hex: #094c2f; +$sd-sage-color-base-green-900-hex: #094c2f; /// -/// color color-base-green-90-code +/// color color-base-green-900-code /// -$sd-sage-color-base-green-90-code: "green-90"; +$sd-sage-color-base-green-900-code: "green-900"; /// -/// color color-base-green-90-classname +/// color color-base-green-900-classname /// -$sd-sage-color-base-green-90-classname: "t-sage--color-green-90"; +$sd-sage-color-base-green-900-classname: "t-sage--color-green-900"; /// -/// color color-base-green-95-hex +/// color color-base-green-950-hex /// -$sd-sage-color-base-green-95-hex: #052e1c; +$sd-sage-color-base-green-950-hex: #052e1c; /// -/// color color-base-green-95-code +/// color color-base-green-950-code /// -$sd-sage-color-base-green-95-code: "green-95"; +$sd-sage-color-base-green-950-code: "green-950"; /// -/// color color-base-green-95-classname +/// color color-base-green-950-classname /// -$sd-sage-color-base-green-95-classname: "t-sage--color-green-95"; +$sd-sage-color-base-green-950-classname: "t-sage--color-green-950"; /// /// color color-base-mercury-5-hex /// @@ -784,11 +784,11 @@ $sd-sage-color-base-red-50-hex: #fffafa; /// /// color color-base-red-50-code /// -$sd-sage-color-base-red-50-code: "red-5"; +$sd-sage-color-base-red-50-code: "red-50"; /// /// color color-base-red-50-classname /// -$sd-sage-color-base-red-50-classname: "t-sage--color-red-5"; +$sd-sage-color-base-red-50-classname: "t-sage--color-red-50"; /// /// color color-base-red-100-hex /// @@ -796,7 +796,7 @@ $sd-sage-color-base-red-100-hex: #fef2f2; /// /// color color-base-red-100-code /// -$sd-sage-color-base-red-100-code: "red-10"; +$sd-sage-color-base-red-100-code: "red-100"; /// /// color color-base-red-100-classname /// @@ -808,7 +808,7 @@ $sd-sage-color-base-red-150-hex: #fee2e1; /// /// color color-base-red-150-code /// -$sd-sage-color-base-red-150-code: "red-15"; +$sd-sage-color-base-red-150-code: "red-150"; /// /// color color-base-red-150-classname /// @@ -820,7 +820,7 @@ $sd-sage-color-base-red-200-hex: #fecaca; /// /// color color-base-red-200-code /// -$sd-sage-color-base-red-200-code: "red-20"; +$sd-sage-color-base-red-200-code: "red-200"; /// /// color color-base-red-200-classname /// @@ -832,7 +832,7 @@ $sd-sage-color-base-red-300-hex: #fda5a5; /// /// color color-base-red-300-code /// -$sd-sage-color-base-red-300-code: "red-30"; +$sd-sage-color-base-red-300-code: "red-300"; /// /// color color-base-red-300-classname /// @@ -844,7 +844,7 @@ $sd-sage-color-base-red-400-hex: #f87171; /// /// color color-base-red-400-code /// -$sd-sage-color-base-red-400-code: "red-40"; +$sd-sage-color-base-red-400-code: "red-400"; /// /// color color-base-red-400-classname /// @@ -856,7 +856,7 @@ $sd-sage-color-base-red-500-hex: #ef4444; /// /// color color-base-red-500-code /// -$sd-sage-color-base-red-500-code: "red-50"; +$sd-sage-color-base-red-500-code: "red-500"; /// /// color color-base-red-500-classname /// @@ -868,7 +868,7 @@ $sd-sage-color-base-red-600-hex: #dc2625; /// /// color color-base-red-600-code /// -$sd-sage-color-base-red-600-code: "red-60"; +$sd-sage-color-base-red-600-code: "red-600"; /// /// color color-base-red-600-classname /// @@ -880,7 +880,7 @@ $sd-sage-color-base-red-700-hex: #b91c1b; /// /// color color-base-red-700-code /// -$sd-sage-color-base-red-700-code: "red-70"; +$sd-sage-color-base-red-700-code: "red-700"; /// /// color color-base-red-700-classname /// @@ -892,7 +892,7 @@ $sd-sage-color-base-red-800-hex: #991b1b; /// /// color color-base-red-800-code /// -$sd-sage-color-base-red-800-code: "red-80"; +$sd-sage-color-base-red-800-code: "red-800"; /// /// color color-base-red-800-classname /// @@ -904,7 +904,7 @@ $sd-sage-color-base-red-900-hex: #7f1c1d; /// /// color color-base-red-900-code /// -$sd-sage-color-base-red-900-code: "red-90"; +$sd-sage-color-base-red-900-code: "red-900"; /// /// color color-base-red-900-classname /// @@ -916,7 +916,7 @@ $sd-sage-color-base-red-950-hex: #572627; /// /// color color-base-red-950-code /// -$sd-sage-color-base-red-950-code: "red-95"; +$sd-sage-color-base-red-950-code: "red-950"; /// /// color color-base-red-950-classname /// @@ -1637,65 +1637,65 @@ $sd-sage-color: ( ), ), green: ( - 5: ( - hex: $sd-sage-color-base-green-5-hex, - code: $sd-sage-color-base-green-5-code, - classname: $sd-sage-color-base-green-5-classname, + 50: ( + hex: $sd-sage-color-base-green-50-hex, + code: $sd-sage-color-base-green-50-code, + classname: $sd-sage-color-base-green-50-classname, ), - 10: ( - hex: $sd-sage-color-base-green-10-hex, - code: $sd-sage-color-base-green-10-code, - classname: $sd-sage-color-base-green-10-classname, + 100: ( + hex: $sd-sage-color-base-green-100-hex, + code: $sd-sage-color-base-green-100-code, + classname: $sd-sage-color-base-green-100-classname, ), - 15: ( - hex: $sd-sage-color-base-green-15-hex, - code: $sd-sage-color-base-green-15-code, - classname: $sd-sage-color-base-green-15-classname, + 150: ( + hex: $sd-sage-color-base-green-150-hex, + code: $sd-sage-color-base-green-150-code, + classname: $sd-sage-color-base-green-150-classname, ), - 20: ( - hex: $sd-sage-color-base-green-20-hex, - code: $sd-sage-color-base-green-20-code, - classname: $sd-sage-color-base-green-20-classname, + 200: ( + hex: $sd-sage-color-base-green-200-hex, + code: $sd-sage-color-base-green-200-code, + classname: $sd-sage-color-base-green-200-classname, ), - 30: ( - hex: $sd-sage-color-base-green-30-hex, - code: $sd-sage-color-base-green-30-code, - classname: $sd-sage-color-base-green-30-classname, + 300: ( + hex: $sd-sage-color-base-green-300-hex, + code: $sd-sage-color-base-green-300-code, + classname: $sd-sage-color-base-green-300-classname, ), - 40: ( - hex: $sd-sage-color-base-green-40-hex, - code: $sd-sage-color-base-green-40-code, - classname: $sd-sage-color-base-green-40-classname, + 400: ( + hex: $sd-sage-color-base-green-400-hex, + code: $sd-sage-color-base-green-400-code, + classname: $sd-sage-color-base-green-400-classname, ), - 50: ( - hex: $sd-sage-color-base-green-50-hex, - code: $sd-sage-color-base-green-50-code, - classname: $sd-sage-color-base-green-50-classname, + 500: ( + hex: $sd-sage-color-base-green-500-hex, + code: $sd-sage-color-base-green-500-code, + classname: $sd-sage-color-base-green-500-classname, ), - 60: ( - hex: $sd-sage-color-base-green-60-hex, - code: $sd-sage-color-base-green-60-code, - classname: $sd-sage-color-base-green-60-classname, + 600: ( + hex: $sd-sage-color-base-green-600-hex, + code: $sd-sage-color-base-green-600-code, + classname: $sd-sage-color-base-green-600-classname, ), - 70: ( - hex: $sd-sage-color-base-green-70-hex, - code: $sd-sage-color-base-green-70-code, - classname: $sd-sage-color-base-green-70-classname, + 700: ( + hex: $sd-sage-color-base-green-700-hex, + code: $sd-sage-color-base-green-700-code, + classname: $sd-sage-color-base-green-700-classname, ), - 80: ( - hex: $sd-sage-color-base-green-80-hex, - code: $sd-sage-color-base-green-80-code, - classname: $sd-sage-color-base-green-80-classname, + 800: ( + hex: $sd-sage-color-base-green-800-hex, + code: $sd-sage-color-base-green-800-code, + classname: $sd-sage-color-base-green-800-classname, ), - 90: ( - hex: $sd-sage-color-base-green-90-hex, - code: $sd-sage-color-base-green-90-code, - classname: $sd-sage-color-base-green-90-classname, + 900: ( + hex: $sd-sage-color-base-green-900-hex, + code: $sd-sage-color-base-green-900-code, + classname: $sd-sage-color-base-green-900-classname, ), - 95: ( - hex: $sd-sage-color-base-green-95-hex, - code: $sd-sage-color-base-green-95-code, - classname: $sd-sage-color-base-green-95-classname, + 950: ( + hex: $sd-sage-color-base-green-950-hex, + code: $sd-sage-color-base-green-950-code, + classname: $sd-sage-color-base-green-950-classname, ), ), mercury: ( @@ -2727,7 +2727,7 @@ $sd-sage-color-core-yellow: #fdbb21; /// /// color core color-core-red /// -$sd-sage-color-core-red: #fffafa; +$sd-sage-color-core-red: #ef4444; /// /// color core color-core-orange /// diff --git a/packages/sage-react/lib/configs/dictionary/tokens.js b/packages/sage-react/lib/configs/dictionary/tokens.js index 23135ae744..d96bad9e9a 100644 --- a/packages/sage-react/lib/configs/dictionary/tokens.js +++ b/packages/sage-react/lib/configs/dictionary/tokens.js @@ -55,42 +55,42 @@ export const COLOR_BASE_BLUE_90_CLASSNAME = 't-sage--color-blue-90'; export const COLOR_BASE_BLUE_95_HEX = '#172554'; export const COLOR_BASE_BLUE_95_CODE = 'blue-95'; export const COLOR_BASE_BLUE_95_CLASSNAME = 't-sage--color-blue-95'; -export const COLOR_BASE_GREEN_5_HEX = '#fbfefc'; -export const COLOR_BASE_GREEN_5_CODE = 'green-5'; -export const COLOR_BASE_GREEN_5_CLASSNAME = 't-sage--color-green-5'; -export const COLOR_BASE_GREEN_10_HEX = '#edfcf2'; -export const COLOR_BASE_GREEN_10_CODE = 'green-10'; -export const COLOR_BASE_GREEN_10_CLASSNAME = 't-sage--color-green-10'; -export const COLOR_BASE_GREEN_15_HEX = '#d3f8df'; -export const COLOR_BASE_GREEN_15_CODE = 'green-15'; -export const COLOR_BASE_GREEN_15_CLASSNAME = 't-sage--color-green-15'; -export const COLOR_BASE_GREEN_20_HEX = '#aaf0c4'; -export const COLOR_BASE_GREEN_20_CODE = 'green-20'; -export const COLOR_BASE_GREEN_20_CLASSNAME = 't-sage--color-green-20'; -export const COLOR_BASE_GREEN_30_HEX = '#73e2a3'; -export const COLOR_BASE_GREEN_30_CODE = 'green-30'; -export const COLOR_BASE_GREEN_30_CLASSNAME = 't-sage--color-green-30'; -export const COLOR_BASE_GREEN_40_HEX = '#3dcb7f'; -export const COLOR_BASE_GREEN_40_CODE = 'green-40'; -export const COLOR_BASE_GREEN_40_CLASSNAME = 't-sage--color-green-40'; -export const COLOR_BASE_GREEN_50_HEX = '#17b365'; +export const COLOR_BASE_GREEN_50_HEX = '#fbfefc'; export const COLOR_BASE_GREEN_50_CODE = 'green-50'; export const COLOR_BASE_GREEN_50_CLASSNAME = 't-sage--color-green-50'; -export const COLOR_BASE_GREEN_60_HEX = '#079250'; -export const COLOR_BASE_GREEN_60_CODE = 'green-60'; -export const COLOR_BASE_GREEN_60_CLASSNAME = 't-sage--color-green-60'; -export const COLOR_BASE_GREEN_70_HEX = '#097443'; -export const COLOR_BASE_GREEN_70_CODE = 'green-70'; -export const COLOR_BASE_GREEN_70_CLASSNAME = 't-sage--color-green-70'; -export const COLOR_BASE_GREEN_80_HEX = '#085c37'; -export const COLOR_BASE_GREEN_80_CODE = 'green-80'; -export const COLOR_BASE_GREEN_80_CLASSNAME = 't-sage--color-green-80'; -export const COLOR_BASE_GREEN_90_HEX = '#094c2f'; -export const COLOR_BASE_GREEN_90_CODE = 'green-90'; -export const COLOR_BASE_GREEN_90_CLASSNAME = 't-sage--color-green-90'; -export const COLOR_BASE_GREEN_95_HEX = '#052e1c'; -export const COLOR_BASE_GREEN_95_CODE = 'green-95'; -export const COLOR_BASE_GREEN_95_CLASSNAME = 't-sage--color-green-95'; +export const COLOR_BASE_GREEN_100_HEX = '#edfcf2'; +export const COLOR_BASE_GREEN_100_CODE = 'green-100'; +export const COLOR_BASE_GREEN_100_CLASSNAME = 't-sage--color-green-100'; +export const COLOR_BASE_GREEN_150_HEX = '#d3f8df'; +export const COLOR_BASE_GREEN_150_CODE = 'green-150'; +export const COLOR_BASE_GREEN_150_CLASSNAME = 't-sage--color-green-150'; +export const COLOR_BASE_GREEN_200_HEX = '#aaf0c4'; +export const COLOR_BASE_GREEN_200_CODE = 'green-200'; +export const COLOR_BASE_GREEN_200_CLASSNAME = 't-sage--color-green-200'; +export const COLOR_BASE_GREEN_300_HEX = '#73e2a3'; +export const COLOR_BASE_GREEN_300_CODE = 'green-300'; +export const COLOR_BASE_GREEN_300_CLASSNAME = 't-sage--color-green-300'; +export const COLOR_BASE_GREEN_400_HEX = '#3dcb7f'; +export const COLOR_BASE_GREEN_400_CODE = 'green-400'; +export const COLOR_BASE_GREEN_400_CLASSNAME = 't-sage--color-green-400'; +export const COLOR_BASE_GREEN_500_HEX = '#17b365'; +export const COLOR_BASE_GREEN_500_CODE = 'green-500'; +export const COLOR_BASE_GREEN_500_CLASSNAME = 't-sage--color-green-500'; +export const COLOR_BASE_GREEN_600_HEX = '#079250'; +export const COLOR_BASE_GREEN_600_CODE = 'green-600'; +export const COLOR_BASE_GREEN_600_CLASSNAME = 't-sage--color-green-600'; +export const COLOR_BASE_GREEN_700_HEX = '#097443'; +export const COLOR_BASE_GREEN_700_CODE = 'green-700'; +export const COLOR_BASE_GREEN_700_CLASSNAME = 't-sage--color-green-700'; +export const COLOR_BASE_GREEN_800_HEX = '#085c37'; +export const COLOR_BASE_GREEN_800_CODE = 'green-800'; +export const COLOR_BASE_GREEN_800_CLASSNAME = 't-sage--color-green-800'; +export const COLOR_BASE_GREEN_900_HEX = '#094c2f'; +export const COLOR_BASE_GREEN_900_CODE = 'green-900'; +export const COLOR_BASE_GREEN_900_CLASSNAME = 't-sage--color-green-900'; +export const COLOR_BASE_GREEN_950_HEX = '#052e1c'; +export const COLOR_BASE_GREEN_950_CODE = 'green-950'; +export const COLOR_BASE_GREEN_950_CLASSNAME = 't-sage--color-green-950'; export const COLOR_BASE_MERCURY_5_HEX = '#fffcfa'; export const COLOR_BASE_MERCURY_5_CODE = 'mercury-5'; export const COLOR_BASE_MERCURY_5_CLASSNAME = 't-sage--color-mercury-5'; @@ -209,40 +209,40 @@ export const COLOR_BASE_YELLOW_500_HEX = '#451902'; export const COLOR_BASE_YELLOW_500_CODE = 'yellow-500'; export const COLOR_BASE_YELLOW_500_CLASSNAME = 't-sage--color-yellow-500'; export const COLOR_BASE_RED_50_HEX = '#fffafa'; -export const COLOR_BASE_RED_50_CODE = 'red-5'; -export const COLOR_BASE_RED_50_CLASSNAME = 't-sage--color-red-5'; +export const COLOR_BASE_RED_50_CODE = 'red-50'; +export const COLOR_BASE_RED_50_CLASSNAME = 't-sage--color-red-50'; export const COLOR_BASE_RED_100_HEX = '#fef2f2'; -export const COLOR_BASE_RED_100_CODE = 'red-10'; +export const COLOR_BASE_RED_100_CODE = 'red-100'; export const COLOR_BASE_RED_100_CLASSNAME = 't-sage--color-red-100'; export const COLOR_BASE_RED_150_HEX = '#fee2e1'; -export const COLOR_BASE_RED_150_CODE = 'red-15'; +export const COLOR_BASE_RED_150_CODE = 'red-150'; export const COLOR_BASE_RED_150_CLASSNAME = 't-sage--color-red-150'; export const COLOR_BASE_RED_200_HEX = '#fecaca'; -export const COLOR_BASE_RED_200_CODE = 'red-20'; +export const COLOR_BASE_RED_200_CODE = 'red-200'; export const COLOR_BASE_RED_200_CLASSNAME = 't-sage--color-red-200'; export const COLOR_BASE_RED_300_HEX = '#fda5a5'; -export const COLOR_BASE_RED_300_CODE = 'red-30'; +export const COLOR_BASE_RED_300_CODE = 'red-300'; export const COLOR_BASE_RED_300_CLASSNAME = 't-sage--color-red-300'; export const COLOR_BASE_RED_400_HEX = '#f87171'; -export const COLOR_BASE_RED_400_CODE = 'red-40'; +export const COLOR_BASE_RED_400_CODE = 'red-400'; export const COLOR_BASE_RED_400_CLASSNAME = 't-sage--color-red-400'; export const COLOR_BASE_RED_500_HEX = '#ef4444'; -export const COLOR_BASE_RED_500_CODE = 'red-50'; +export const COLOR_BASE_RED_500_CODE = 'red-500'; export const COLOR_BASE_RED_500_CLASSNAME = 't-sage--color-red-500'; export const COLOR_BASE_RED_600_HEX = '#dc2625'; -export const COLOR_BASE_RED_600_CODE = 'red-60'; +export const COLOR_BASE_RED_600_CODE = 'red-600'; export const COLOR_BASE_RED_600_CLASSNAME = 't-sage--color-red-600'; export const COLOR_BASE_RED_700_HEX = '#b91c1b'; -export const COLOR_BASE_RED_700_CODE = 'red-70'; +export const COLOR_BASE_RED_700_CODE = 'red-700'; export const COLOR_BASE_RED_700_CLASSNAME = 't-sage--color-red-700'; export const COLOR_BASE_RED_800_HEX = '#991b1b'; -export const COLOR_BASE_RED_800_CODE = 'red-80'; +export const COLOR_BASE_RED_800_CODE = 'red-800'; export const COLOR_BASE_RED_800_CLASSNAME = 't-sage--color-red-800'; export const COLOR_BASE_RED_900_HEX = '#7f1c1d'; -export const COLOR_BASE_RED_900_CODE = 'red-90'; +export const COLOR_BASE_RED_900_CODE = 'red-900'; export const COLOR_BASE_RED_900_CLASSNAME = 't-sage--color-red-900'; export const COLOR_BASE_RED_950_HEX = '#572627'; -export const COLOR_BASE_RED_950_CODE = 'red-95'; +export const COLOR_BASE_RED_950_CODE = 'red-950'; export const COLOR_BASE_RED_950_CLASSNAME = 't-sage--color-red-950'; export const COLOR_BASE_ORANGE_100_HEX = '#ffe3d4'; export const COLOR_BASE_ORANGE_100_CODE = 'orange-100'; @@ -474,65 +474,65 @@ export const COLOR = { }, }, GREEN: { - 5: { - HEX: COLOR_BASE_GREEN_5_HEX, - CODE: COLOR_BASE_GREEN_5_CODE, - CLASSNAME: COLOR_BASE_GREEN_5_CLASSNAME, + 50: { + HEX: COLOR_BASE_GREEN_50_HEX, + CODE: COLOR_BASE_GREEN_50_CODE, + CLASSNAME: COLOR_BASE_GREEN_50_CLASSNAME, }, - 10: { - HEX: COLOR_BASE_GREEN_10_HEX, - CODE: COLOR_BASE_GREEN_10_CODE, - CLASSNAME: COLOR_BASE_GREEN_10_CLASSNAME, + 100: { + HEX: COLOR_BASE_GREEN_100_HEX, + CODE: COLOR_BASE_GREEN_100_CODE, + CLASSNAME: COLOR_BASE_GREEN_100_CLASSNAME, }, - 15: { - HEX: COLOR_BASE_GREEN_15_HEX, - CODE: COLOR_BASE_GREEN_15_CODE, - CLASSNAME: COLOR_BASE_GREEN_15_CLASSNAME, + 150: { + HEX: COLOR_BASE_GREEN_150_HEX, + CODE: COLOR_BASE_GREEN_150_CODE, + CLASSNAME: COLOR_BASE_GREEN_150_CLASSNAME, }, - 20: { - HEX: COLOR_BASE_GREEN_20_HEX, - CODE: COLOR_BASE_GREEN_20_CODE, - CLASSNAME: COLOR_BASE_GREEN_20_CLASSNAME, + 200: { + HEX: COLOR_BASE_GREEN_200_HEX, + CODE: COLOR_BASE_GREEN_200_CODE, + CLASSNAME: COLOR_BASE_GREEN_200_CLASSNAME, }, - 30: { - HEX: COLOR_BASE_GREEN_30_HEX, - CODE: COLOR_BASE_GREEN_30_CODE, - CLASSNAME: COLOR_BASE_GREEN_30_CLASSNAME, + 300: { + HEX: COLOR_BASE_GREEN_300_HEX, + CODE: COLOR_BASE_GREEN_300_CODE, + CLASSNAME: COLOR_BASE_GREEN_300_CLASSNAME, }, - 40: { - HEX: COLOR_BASE_GREEN_40_HEX, - CODE: COLOR_BASE_GREEN_40_CODE, - CLASSNAME: COLOR_BASE_GREEN_40_CLASSNAME, + 400: { + HEX: COLOR_BASE_GREEN_400_HEX, + CODE: COLOR_BASE_GREEN_400_CODE, + CLASSNAME: COLOR_BASE_GREEN_400_CLASSNAME, }, - 50: { - HEX: COLOR_BASE_GREEN_50_HEX, - CODE: COLOR_BASE_GREEN_50_CODE, - CLASSNAME: COLOR_BASE_GREEN_50_CLASSNAME, + 500: { + HEX: COLOR_BASE_GREEN_500_HEX, + CODE: COLOR_BASE_GREEN_500_CODE, + CLASSNAME: COLOR_BASE_GREEN_500_CLASSNAME, }, - 60: { - HEX: COLOR_BASE_GREEN_60_HEX, - CODE: COLOR_BASE_GREEN_60_CODE, - CLASSNAME: COLOR_BASE_GREEN_60_CLASSNAME, + 600: { + HEX: COLOR_BASE_GREEN_600_HEX, + CODE: COLOR_BASE_GREEN_600_CODE, + CLASSNAME: COLOR_BASE_GREEN_600_CLASSNAME, }, - 70: { - HEX: COLOR_BASE_GREEN_70_HEX, - CODE: COLOR_BASE_GREEN_70_CODE, - CLASSNAME: COLOR_BASE_GREEN_70_CLASSNAME, + 700: { + HEX: COLOR_BASE_GREEN_700_HEX, + CODE: COLOR_BASE_GREEN_700_CODE, + CLASSNAME: COLOR_BASE_GREEN_700_CLASSNAME, }, - 80: { - HEX: COLOR_BASE_GREEN_80_HEX, - CODE: COLOR_BASE_GREEN_80_CODE, - CLASSNAME: COLOR_BASE_GREEN_80_CLASSNAME, + 800: { + HEX: COLOR_BASE_GREEN_800_HEX, + CODE: COLOR_BASE_GREEN_800_CODE, + CLASSNAME: COLOR_BASE_GREEN_800_CLASSNAME, }, - 90: { - HEX: COLOR_BASE_GREEN_90_HEX, - CODE: COLOR_BASE_GREEN_90_CODE, - CLASSNAME: COLOR_BASE_GREEN_90_CLASSNAME, + 900: { + HEX: COLOR_BASE_GREEN_900_HEX, + CODE: COLOR_BASE_GREEN_900_CODE, + CLASSNAME: COLOR_BASE_GREEN_900_CLASSNAME, }, - 95: { - HEX: COLOR_BASE_GREEN_95_HEX, - CODE: COLOR_BASE_GREEN_95_CODE, - CLASSNAME: COLOR_BASE_GREEN_95_CLASSNAME, + 950: { + HEX: COLOR_BASE_GREEN_950_HEX, + CODE: COLOR_BASE_GREEN_950_CODE, + CLASSNAME: COLOR_BASE_GREEN_950_CLASSNAME, }, }, MERCURY: { @@ -1303,7 +1303,7 @@ export const COLOR_CORE_MERCURY = '#ff3e15'; export const COLOR_CORE_PRIMARY = '#2463eb'; export const COLOR_CORE_SAGE = '#079250'; export const COLOR_CORE_YELLOW = '#fdbb21'; -export const COLOR_CORE_RED = '#fffafa'; +export const COLOR_CORE_RED = '#ef4444'; export const COLOR_CORE_ORANGE = '#ff3e15'; export const COLOR_CORE_PURPLE = '#533be5'; export const COLOR_CORE_CHARCOAL = '#4d4d4c'; diff --git a/style-dictionary/tokens/color/base.json b/style-dictionary/tokens/color/base.json index fb4a2b63f7..509107516a 100644 --- a/style-dictionary/tokens/color/base.json +++ b/style-dictionary/tokens/color/base.json @@ -64,65 +64,65 @@ } }, "green": { - "5": { + "50": { "hex": { "value": "#fbfefc" }, - "code": { "value": "green-5" }, - "classname": { "value": "t-sage--color-green-5" } + "code": { "value": "green-50" }, + "classname": { "value": "t-sage--color-green-50" } }, - "10": { + "100": { "hex": { "value": "#edfcf2" }, - "code": { "value": "green-10" }, - "classname": { "value": "t-sage--color-green-10" } + "code": { "value": "green-100" }, + "classname": { "value": "t-sage--color-green-100" } }, - "15": { + "150": { "hex": { "value": "#d3f8df" }, - "code": { "value": "green-15" }, - "classname": { "value": "t-sage--color-green-15" } + "code": { "value": "green-150" }, + "classname": { "value": "t-sage--color-green-150" } }, - "20": { + "200": { "hex": { "value": "#aaf0c4" }, - "code": { "value": "green-20" }, - "classname": { "value": "t-sage--color-green-20" } + "code": { "value": "green-200" }, + "classname": { "value": "t-sage--color-green-200" } }, - "30": { + "300": { "hex": { "value": "#73e2a3" }, - "code": { "value": "green-30" }, - "classname": { "value": "t-sage--color-green-30" } + "code": { "value": "green-300" }, + "classname": { "value": "t-sage--color-green-300" } }, - "40": { + "400": { "hex": { "value": "#3dcb7f" }, - "code": { "value": "green-40" }, - "classname": { "value": "t-sage--color-green-40" } + "code": { "value": "green-400" }, + "classname": { "value": "t-sage--color-green-400" } }, - "50": { + "500": { "hex": { "value": "#17b365" }, - "code": { "value": "green-50" }, - "classname": { "value": "t-sage--color-green-50" } + "code": { "value": "green-500" }, + "classname": { "value": "t-sage--color-green-500" } }, - "60": { + "600": { "hex": { "value": "#079250" }, - "code": { "value": "green-60" }, - "classname": { "value": "t-sage--color-green-60" } + "code": { "value": "green-600" }, + "classname": { "value": "t-sage--color-green-600" } }, - "70": { + "700": { "hex": { "value": "#097443" }, - "code": { "value": "green-70" }, - "classname": { "value": "t-sage--color-green-70" } + "code": { "value": "green-700" }, + "classname": { "value": "t-sage--color-green-700" } }, - "80": { + "800": { "hex": { "value": "#085c37" }, - "code": { "value": "green-80" }, - "classname": { "value": "t-sage--color-green-80" } + "code": { "value": "green-800" }, + "classname": { "value": "t-sage--color-green-800" } }, - "90": { + "900": { "hex": { "value": "#094c2f" }, - "code": { "value": "green-90" }, - "classname": { "value": "t-sage--color-green-90" } + "code": { "value": "green-900" }, + "classname": { "value": "t-sage--color-green-900" } }, - "95": { + "950": { "hex": { "value": "#052e1c" }, - "code": { "value": "green-95" }, - "classname": { "value": "t-sage--color-green-95" } + "code": { "value": "green-950" }, + "classname": { "value": "t-sage--color-green-950" } } }, "mercury": { @@ -216,27 +216,27 @@ }, "sage": { "100": { - "hex": { "value": "{color.base.green.15.hex.value}" }, + "hex": { "value": "{color.base.green.150.hex.value}" }, "code": { "value": "sage-100" }, "classname": { "value": "t-sage--color-sage-100" } }, "200": { - "hex": { "value": "{color.base.green.30.hex.value}" }, + "hex": { "value": "{color.base.green.300.hex.value}" }, "code": { "value": "sage-200" }, "classname": { "value": "t-sage--color-sage-200" } }, "300": { - "hex": { "value": "{color.base.green.60.hex.value}" }, + "hex": { "value": "{color.base.green.600.hex.value}" }, "code": { "value": "sage-300" }, "classname": { "value": "t-sage--color-sage-300" } }, "400": { - "hex": { "value": "{color.base.green.80.hex.value}" }, + "hex": { "value": "{color.base.green.800.hex.value}" }, "code": { "value": "sage-400" }, "classname": { "value": "t-sage--color-sage-400" } }, "500": { - "hex": { "value": "{color.base.green.95.hex.value}" }, + "hex": { "value": "{color.base.green.950.hex.value}" }, "code": { "value": "sage-500" }, "classname": { "value": "t-sage--color-sage-500" } } @@ -331,62 +331,62 @@ "red": { "50": { "hex": { "value": "#fffafa" }, - "code": { "value": "red-5" }, - "classname": { "value": "t-sage--color-red-5" } + "code": { "value": "red-50" }, + "classname": { "value": "t-sage--color-red-50" } }, "100": { "hex": { "value": "#fef2f2" }, - "code": { "value": "red-10" }, + "code": { "value": "red-100" }, "classname": { "value": "t-sage--color-red-100" } }, "150": { "hex": { "value": "#fee2e1" }, - "code": { "value": "red-15" }, + "code": { "value": "red-150" }, "classname": { "value": "t-sage--color-red-150" } }, "200": { "hex": { "value": "#fecaca" }, - "code": { "value": "red-20" }, + "code": { "value": "red-200" }, "classname": { "value": "t-sage--color-red-200" } }, "300": { "hex": { "value": "#fda5a5" }, - "code": { "value": "red-30" }, + "code": { "value": "red-300" }, "classname": { "value": "t-sage--color-red-300" } }, "400": { "hex": { "value": "#f87171" }, - "code": { "value": "red-40" }, + "code": { "value": "red-400" }, "classname": { "value": "t-sage--color-red-400" } }, "500": { "hex": { "value": "#ef4444" }, - "code": { "value": "red-50" }, + "code": { "value": "red-500" }, "classname": { "value": "t-sage--color-red-500" } }, "600": { "hex": { "value": "#dc2625" }, - "code": { "value": "red-60" }, + "code": { "value": "red-600" }, "classname": { "value": "t-sage--color-red-600" } }, "700": { "hex": { "value": "#b91c1b" }, - "code": { "value": "red-70" }, + "code": { "value": "red-700" }, "classname": { "value": "t-sage--color-red-700" } }, "800": { "hex": { "value": "#991b1b" }, - "code": { "value": "red-80" }, + "code": { "value": "red-800" }, "classname": { "value": "t-sage--color-red-800" } }, "900": { "hex": { "value": "#7f1c1d" }, - "code": { "value": "red-90" }, + "code": { "value": "red-900" }, "classname": { "value": "t-sage--color-red-900" } }, "950": { "hex": { "value": "#572627" }, - "code": { "value": "red-95" }, + "code": { "value": "red-950" }, "classname": { "value": "t-sage--color-red-950" } } }, diff --git a/style-dictionary/tokens/color/core.json b/style-dictionary/tokens/color/core.json index c83df419cb..6b3eea0e87 100644 --- a/style-dictionary/tokens/color/core.json +++ b/style-dictionary/tokens/color/core.json @@ -5,7 +5,7 @@ "value": "{color.base.blue.60.hex}" }, "green": { - "value": "{color.base.green.60.hex}" + "value": "{color.base.green.600.hex}" }, "mercury": { "value": "{color.base.mercury.50.hex}" @@ -20,7 +20,7 @@ "value": "{color.base.yellow.300.hex}" }, "red": { - "value": "{color.base.red.50.hex}" + "value": "{color.base.red.500.hex}" }, "orange": { "value": "{color.base.orange.300.hex}" From 89cd25d754dbb9681e29b008d9f6833936d1730a Mon Sep 17 00:00:00 2001 From: Quinton Jason Date: Tue, 20 Aug 2024 14:58:23 -0500 Subject: [PATCH 08/31] fix: add 0 to blue color token names --- .../stylesheets/docs/_colors.scss | 8 +- .../app/sage_tokens/sage_dictionary.rb | 164 ++++++------ .../components/_card_highlight.scss | 2 +- .../lib/stylesheets/components/_dot.scss | 2 +- .../lib/stylesheets/components/_stat_box.scss | 2 +- .../lib/stylesheets/core/_typography.scss | 2 +- .../lib/stylesheets/dictionary/_tokens.scss | 240 +++++++++--------- .../lib/configs/dictionary/tokens.js | 164 ++++++------ style-dictionary/tokens/color/base.json | 82 +++--- style-dictionary/tokens/color/core.json | 2 +- 10 files changed, 334 insertions(+), 334 deletions(-) diff --git a/docs/lib/sage-frontend/stylesheets/docs/_colors.scss b/docs/lib/sage-frontend/stylesheets/docs/_colors.scss index 1e6a31e99b..06386d3a4d 100644 --- a/docs/lib/sage-frontend/stylesheets/docs/_colors.scss +++ b/docs/lib/sage-frontend/stylesheets/docs/_colors.scss @@ -67,11 +67,11 @@ @else if ($name == black or $name == charcoal) { color: sage-color(white); } - @else if ($name == blue and $value > 40) { - color: sage-color(blue, 20); + @else if ($name == blue and $value > 400) { + color: sage-color(blue, 200); } @else if ($name == blue) { - color: sage-color(blue, 95); + color: sage-color(blue, 950); } @else if ($name == mercury and $value > 20) { color: sage-color(white); @@ -79,7 +79,7 @@ @else if ($name == mercury) { color: sage-color(mercury, 50); } - @else if ($name == green and $value > 20) { + @else if ($name == green and $value > 200) { color: sage-color(white); } @else if ($name == green) { 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 1f83055c70..6b414f8fca 100644 --- a/docs/lib/sage_rails/app/sage_tokens/sage_dictionary.rb +++ b/docs/lib/sage_rails/app/sage_tokens/sage_dictionary.rb @@ -21,42 +21,42 @@ module SageDictionary # # Static vars for COLOR BASE # - SD_SAGE_COLOR_BASE_BLUE_5_HEX = "#fafcff" - SD_SAGE_COLOR_BASE_BLUE_5_CODE = "blue-5" - SD_SAGE_COLOR_BASE_BLUE_5_CLASSNAME = "t-sage--color-blue-5" - SD_SAGE_COLOR_BASE_BLUE_10_HEX = "#eff6ff" - SD_SAGE_COLOR_BASE_BLUE_10_CODE = "blue-10" - SD_SAGE_COLOR_BASE_BLUE_10_CLASSNAME = "t-sage--color-blue-10" - SD_SAGE_COLOR_BASE_BLUE_15_HEX = "#dbe9fe" - SD_SAGE_COLOR_BASE_BLUE_15_CODE = "blue-15" - SD_SAGE_COLOR_BASE_BLUE_15_CLASSNAME = "t-sage--color-blue-15" - SD_SAGE_COLOR_BASE_BLUE_20_HEX = "#bfdbfe" - SD_SAGE_COLOR_BASE_BLUE_20_CODE = "blue-20" - SD_SAGE_COLOR_BASE_BLUE_20_CLASSNAME = "t-sage--color-blue-20" - SD_SAGE_COLOR_BASE_BLUE_30_HEX = "#92c5fd" - SD_SAGE_COLOR_BASE_BLUE_30_CODE = "blue-30" - SD_SAGE_COLOR_BASE_BLUE_30_CLASSNAME = "t-sage--color-blue-30" - SD_SAGE_COLOR_BASE_BLUE_40_HEX = "#60a5fa" - SD_SAGE_COLOR_BASE_BLUE_40_CODE = "blue-40" - SD_SAGE_COLOR_BASE_BLUE_40_CLASSNAME = "t-sage--color-blue-40" - SD_SAGE_COLOR_BASE_BLUE_50_HEX = "#3c82f6" + SD_SAGE_COLOR_BASE_BLUE_50_HEX = "#fafcff" SD_SAGE_COLOR_BASE_BLUE_50_CODE = "blue-50" SD_SAGE_COLOR_BASE_BLUE_50_CLASSNAME = "t-sage--color-blue-50" - SD_SAGE_COLOR_BASE_BLUE_60_HEX = "#2463eb" - SD_SAGE_COLOR_BASE_BLUE_60_CODE = "blue-60" - SD_SAGE_COLOR_BASE_BLUE_60_CLASSNAME = "t-sage--color-blue-60" - SD_SAGE_COLOR_BASE_BLUE_70_HEX = "#1c4ed8" - SD_SAGE_COLOR_BASE_BLUE_70_CODE = "blue-70" - SD_SAGE_COLOR_BASE_BLUE_70_CLASSNAME = "t-sage--color-blue-70" - SD_SAGE_COLOR_BASE_BLUE_80_HEX = "#1d40ae" - SD_SAGE_COLOR_BASE_BLUE_80_CODE = "blue-80" - SD_SAGE_COLOR_BASE_BLUE_80_CLASSNAME = "t-sage--color-blue-80" - SD_SAGE_COLOR_BASE_BLUE_90_HEX = "#1f3a8a" - SD_SAGE_COLOR_BASE_BLUE_90_CODE = "blue-90" - SD_SAGE_COLOR_BASE_BLUE_90_CLASSNAME = "t-sage--color-blue-90" - SD_SAGE_COLOR_BASE_BLUE_95_HEX = "#172554" - SD_SAGE_COLOR_BASE_BLUE_95_CODE = "blue-95" - SD_SAGE_COLOR_BASE_BLUE_95_CLASSNAME = "t-sage--color-blue-95" + SD_SAGE_COLOR_BASE_BLUE_100_HEX = "#eff6ff" + SD_SAGE_COLOR_BASE_BLUE_100_CODE = "blue-100" + SD_SAGE_COLOR_BASE_BLUE_100_CLASSNAME = "t-sage--color-blue-100" + SD_SAGE_COLOR_BASE_BLUE_150_HEX = "#dbe9fe" + SD_SAGE_COLOR_BASE_BLUE_150_CODE = "blue-150" + SD_SAGE_COLOR_BASE_BLUE_150_CLASSNAME = "t-sage--color-blue-150" + 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_CODE = "blue-300" + SD_SAGE_COLOR_BASE_BLUE_300_CLASSNAME = "t-sage--color-blue-300" + SD_SAGE_COLOR_BASE_BLUE_400_HEX = "#60a5fa" + SD_SAGE_COLOR_BASE_BLUE_400_CODE = "blue-400" + SD_SAGE_COLOR_BASE_BLUE_400_CLASSNAME = "t-sage--color-blue-400" + SD_SAGE_COLOR_BASE_BLUE_500_HEX = "#3c82f6" + SD_SAGE_COLOR_BASE_BLUE_500_CODE = "blue-500" + SD_SAGE_COLOR_BASE_BLUE_500_CLASSNAME = "t-sage--color-blue-500" + SD_SAGE_COLOR_BASE_BLUE_600_HEX = "#2463eb" + SD_SAGE_COLOR_BASE_BLUE_600_CODE = "blue-600" + SD_SAGE_COLOR_BASE_BLUE_600_CLASSNAME = "t-sage--color-blue-600" + SD_SAGE_COLOR_BASE_BLUE_700_HEX = "#1c4ed8" + SD_SAGE_COLOR_BASE_BLUE_700_CODE = "blue-700" + SD_SAGE_COLOR_BASE_BLUE_700_CLASSNAME = "t-sage--color-blue-700" + SD_SAGE_COLOR_BASE_BLUE_800_HEX = "#1d40ae" + SD_SAGE_COLOR_BASE_BLUE_800_CODE = "blue-800" + SD_SAGE_COLOR_BASE_BLUE_800_CLASSNAME = "t-sage--color-blue-800" + SD_SAGE_COLOR_BASE_BLUE_900_HEX = "#1f3a8a" + SD_SAGE_COLOR_BASE_BLUE_900_CODE = "blue-900" + SD_SAGE_COLOR_BASE_BLUE_900_CLASSNAME = "t-sage--color-blue-900" + SD_SAGE_COLOR_BASE_BLUE_950_HEX = "#172554" + SD_SAGE_COLOR_BASE_BLUE_950_CODE = "blue-950" + SD_SAGE_COLOR_BASE_BLUE_950_CLASSNAME = "t-sage--color-blue-950" SD_SAGE_COLOR_BASE_GREEN_50_HEX = "#fbfefc" SD_SAGE_COLOR_BASE_GREEN_50_CODE = "green-50" SD_SAGE_COLOR_BASE_GREEN_50_CLASSNAME = "t-sage--color-green-50" @@ -414,65 +414,65 @@ module SageDictionary # SD_SAGE_COLOR = { "BLUE": { - "5": { - "HEX": SD_SAGE_COLOR_BASE_BLUE_5_HEX, - "CODE": SD_SAGE_COLOR_BASE_BLUE_5_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_BLUE_5_CLASSNAME, + "50": { + "HEX": SD_SAGE_COLOR_BASE_BLUE_50_HEX, + "CODE": SD_SAGE_COLOR_BASE_BLUE_50_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_BLUE_50_CLASSNAME, }, - "10": { - "HEX": SD_SAGE_COLOR_BASE_BLUE_10_HEX, - "CODE": SD_SAGE_COLOR_BASE_BLUE_10_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_BLUE_10_CLASSNAME, + "100": { + "HEX": SD_SAGE_COLOR_BASE_BLUE_100_HEX, + "CODE": SD_SAGE_COLOR_BASE_BLUE_100_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_BLUE_100_CLASSNAME, }, - "15": { - "HEX": SD_SAGE_COLOR_BASE_BLUE_15_HEX, - "CODE": SD_SAGE_COLOR_BASE_BLUE_15_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_BLUE_15_CLASSNAME, + "150": { + "HEX": SD_SAGE_COLOR_BASE_BLUE_150_HEX, + "CODE": SD_SAGE_COLOR_BASE_BLUE_150_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_BLUE_150_CLASSNAME, }, - "20": { - "HEX": SD_SAGE_COLOR_BASE_BLUE_20_HEX, - "CODE": SD_SAGE_COLOR_BASE_BLUE_20_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_BLUE_20_CLASSNAME, + "200": { + "HEX": SD_SAGE_COLOR_BASE_BLUE_200_HEX, + "CODE": SD_SAGE_COLOR_BASE_BLUE_200_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_BLUE_200_CLASSNAME, }, - "30": { - "HEX": SD_SAGE_COLOR_BASE_BLUE_30_HEX, - "CODE": SD_SAGE_COLOR_BASE_BLUE_30_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_BLUE_30_CLASSNAME, + "300": { + "HEX": SD_SAGE_COLOR_BASE_BLUE_300_HEX, + "CODE": SD_SAGE_COLOR_BASE_BLUE_300_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_BLUE_300_CLASSNAME, }, - "40": { - "HEX": SD_SAGE_COLOR_BASE_BLUE_40_HEX, - "CODE": SD_SAGE_COLOR_BASE_BLUE_40_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_BLUE_40_CLASSNAME, + "400": { + "HEX": SD_SAGE_COLOR_BASE_BLUE_400_HEX, + "CODE": SD_SAGE_COLOR_BASE_BLUE_400_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_BLUE_400_CLASSNAME, }, - "50": { - "HEX": SD_SAGE_COLOR_BASE_BLUE_50_HEX, - "CODE": SD_SAGE_COLOR_BASE_BLUE_50_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_BLUE_50_CLASSNAME, + "500": { + "HEX": SD_SAGE_COLOR_BASE_BLUE_500_HEX, + "CODE": SD_SAGE_COLOR_BASE_BLUE_500_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_BLUE_500_CLASSNAME, }, - "60": { - "HEX": SD_SAGE_COLOR_BASE_BLUE_60_HEX, - "CODE": SD_SAGE_COLOR_BASE_BLUE_60_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_BLUE_60_CLASSNAME, + "600": { + "HEX": SD_SAGE_COLOR_BASE_BLUE_600_HEX, + "CODE": SD_SAGE_COLOR_BASE_BLUE_600_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_BLUE_600_CLASSNAME, }, - "70": { - "HEX": SD_SAGE_COLOR_BASE_BLUE_70_HEX, - "CODE": SD_SAGE_COLOR_BASE_BLUE_70_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_BLUE_70_CLASSNAME, + "700": { + "HEX": SD_SAGE_COLOR_BASE_BLUE_700_HEX, + "CODE": SD_SAGE_COLOR_BASE_BLUE_700_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_BLUE_700_CLASSNAME, }, - "80": { - "HEX": SD_SAGE_COLOR_BASE_BLUE_80_HEX, - "CODE": SD_SAGE_COLOR_BASE_BLUE_80_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_BLUE_80_CLASSNAME, + "800": { + "HEX": SD_SAGE_COLOR_BASE_BLUE_800_HEX, + "CODE": SD_SAGE_COLOR_BASE_BLUE_800_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_BLUE_800_CLASSNAME, }, - "90": { - "HEX": SD_SAGE_COLOR_BASE_BLUE_90_HEX, - "CODE": SD_SAGE_COLOR_BASE_BLUE_90_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_BLUE_90_CLASSNAME, + "900": { + "HEX": SD_SAGE_COLOR_BASE_BLUE_900_HEX, + "CODE": SD_SAGE_COLOR_BASE_BLUE_900_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_BLUE_900_CLASSNAME, }, - "95": { - "HEX": SD_SAGE_COLOR_BASE_BLUE_95_HEX, - "CODE": SD_SAGE_COLOR_BASE_BLUE_95_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_BLUE_95_CLASSNAME, + "950": { + "HEX": SD_SAGE_COLOR_BASE_BLUE_950_HEX, + "CODE": SD_SAGE_COLOR_BASE_BLUE_950_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_BLUE_950_CLASSNAME, }, }, "GREEN": { diff --git a/packages/sage-assets/lib/stylesheets/components/_card_highlight.scss b/packages/sage-assets/lib/stylesheets/components/_card_highlight.scss index 4f02b1d117..cbef524045 100644 --- a/packages/sage-assets/lib/stylesheets/components/_card_highlight.scss +++ b/packages/sage-assets/lib/stylesheets/components/_card_highlight.scss @@ -55,7 +55,7 @@ $-card-highlight-size: rem(12px); @each $-color-name, $-color-sliders in $sage-colors { .sage-card-highlight--#{"" + $-color-name} { @if ($-color-name == blue) { - --color: #{sage-color($-color-name, 60)}; + --color: #{sage-color($-color-name, 600)}; } @else if ($-color-name == green) { --color: #{sage-color($-color-name, 600)}; diff --git a/packages/sage-assets/lib/stylesheets/components/_dot.scss b/packages/sage-assets/lib/stylesheets/components/_dot.scss index 8713b86705..78cb8cb8a9 100644 --- a/packages/sage-assets/lib/stylesheets/components/_dot.scss +++ b/packages/sage-assets/lib/stylesheets/components/_dot.scss @@ -43,7 +43,7 @@ $-sage-dot-size--badge: rem(6px); @each $-color-name, $-color-sliders in $sage-colors { .sage-dot--color-#{"" + $-color-name} { @if ($-color-name == blue) { - --sage-dot-color: #{sage-color($-color-name, 60)}; + --sage-dot-color: #{sage-color($-color-name, 600)}; } @else if ($-color-name == green) { --sage-dot-color: #{sage-color($-color-name, 600)}; diff --git a/packages/sage-assets/lib/stylesheets/components/_stat_box.scss b/packages/sage-assets/lib/stylesheets/components/_stat_box.scss index 0cbef32d2a..d79548770a 100644 --- a/packages/sage-assets/lib/stylesheets/components/_stat_box.scss +++ b/packages/sage-assets/lib/stylesheets/components/_stat_box.scss @@ -102,7 +102,7 @@ $-stat-box-image-max-width: rem(48px); @each $-color-name, $-color-sliders in $sage-colors { .sage-stat-box__title--legend-#{"" + $-color-name} { @if ($-color-name == blue) { - --legend-color: #{sage-color($-color-name, 60)}; + --legend-color: #{sage-color($-color-name, 600)}; } @else if ($-color-name == green) { --legend-color: #{sage-color($-color-name, 600)}; diff --git a/packages/sage-assets/lib/stylesheets/core/_typography.scss b/packages/sage-assets/lib/stylesheets/core/_typography.scss index 72a9d0a459..afee77bd7a 100644 --- a/packages/sage-assets/lib/stylesheets/core/_typography.scss +++ b/packages/sage-assets/lib/stylesheets/core/_typography.scss @@ -212,7 +212,7 @@ body:not(.sage-excluded), $color-value: ""; @if ($color-name == blue) { - $color-value: sage-color($color-name, 60); + $color-value: sage-color($color-name, 600); } @else if ($color-name == green) { $color-value: sage-color($color-name, 600); diff --git a/packages/sage-assets/lib/stylesheets/dictionary/_tokens.scss b/packages/sage-assets/lib/stylesheets/dictionary/_tokens.scss index 219b20bd13..0d4280a5c9 100644 --- a/packages/sage-assets/lib/stylesheets/dictionary/_tokens.scss +++ b/packages/sage-assets/lib/stylesheets/dictionary/_tokens.scss @@ -22,149 +22,149 @@ // Static vars for color base // /// -/// color color-base-blue-5-hex +/// color color-base-blue-50-hex /// -$sd-sage-color-base-blue-5-hex: #fafcff; +$sd-sage-color-base-blue-50-hex: #fafcff; /// -/// color color-base-blue-5-code +/// color color-base-blue-50-code /// -$sd-sage-color-base-blue-5-code: "blue-5"; +$sd-sage-color-base-blue-50-code: "blue-50"; /// -/// color color-base-blue-5-classname +/// color color-base-blue-50-classname /// -$sd-sage-color-base-blue-5-classname: "t-sage--color-blue-5"; +$sd-sage-color-base-blue-50-classname: "t-sage--color-blue-50"; /// -/// color color-base-blue-10-hex +/// color color-base-blue-100-hex /// -$sd-sage-color-base-blue-10-hex: #eff6ff; +$sd-sage-color-base-blue-100-hex: #eff6ff; /// -/// color color-base-blue-10-code +/// color color-base-blue-100-code /// -$sd-sage-color-base-blue-10-code: "blue-10"; +$sd-sage-color-base-blue-100-code: "blue-100"; /// -/// color color-base-blue-10-classname +/// color color-base-blue-100-classname /// -$sd-sage-color-base-blue-10-classname: "t-sage--color-blue-10"; +$sd-sage-color-base-blue-100-classname: "t-sage--color-blue-100"; /// -/// color color-base-blue-15-hex +/// color color-base-blue-150-hex /// -$sd-sage-color-base-blue-15-hex: #dbe9fe; +$sd-sage-color-base-blue-150-hex: #dbe9fe; /// -/// color color-base-blue-15-code +/// color color-base-blue-150-code /// -$sd-sage-color-base-blue-15-code: "blue-15"; +$sd-sage-color-base-blue-150-code: "blue-150"; /// -/// color color-base-blue-15-classname +/// color color-base-blue-150-classname /// -$sd-sage-color-base-blue-15-classname: "t-sage--color-blue-15"; +$sd-sage-color-base-blue-150-classname: "t-sage--color-blue-150"; /// -/// color color-base-blue-20-hex +/// color color-base-blue-200-hex /// -$sd-sage-color-base-blue-20-hex: #bfdbfe; +$sd-sage-color-base-blue-200-hex: #bfdbfe; /// -/// color color-base-blue-20-code +/// color color-base-blue-200-code /// -$sd-sage-color-base-blue-20-code: "blue-20"; +$sd-sage-color-base-blue-200-code: "blue-200"; /// -/// color color-base-blue-20-classname +/// color color-base-blue-200-classname /// -$sd-sage-color-base-blue-20-classname: "t-sage--color-blue-20"; +$sd-sage-color-base-blue-200-classname: "t-sage--color-blue-200"; /// -/// color color-base-blue-30-hex +/// color color-base-blue-300-hex /// -$sd-sage-color-base-blue-30-hex: #92c5fd; +$sd-sage-color-base-blue-300-hex: #92c5fd; /// -/// color color-base-blue-30-code +/// color color-base-blue-300-code /// -$sd-sage-color-base-blue-30-code: "blue-30"; +$sd-sage-color-base-blue-300-code: "blue-300"; /// -/// color color-base-blue-30-classname +/// color color-base-blue-300-classname /// -$sd-sage-color-base-blue-30-classname: "t-sage--color-blue-30"; +$sd-sage-color-base-blue-300-classname: "t-sage--color-blue-300"; /// -/// color color-base-blue-40-hex +/// color color-base-blue-400-hex /// -$sd-sage-color-base-blue-40-hex: #60a5fa; +$sd-sage-color-base-blue-400-hex: #60a5fa; /// -/// color color-base-blue-40-code +/// color color-base-blue-400-code /// -$sd-sage-color-base-blue-40-code: "blue-40"; +$sd-sage-color-base-blue-400-code: "blue-400"; /// -/// color color-base-blue-40-classname +/// color color-base-blue-400-classname /// -$sd-sage-color-base-blue-40-classname: "t-sage--color-blue-40"; +$sd-sage-color-base-blue-400-classname: "t-sage--color-blue-400"; /// -/// color color-base-blue-50-hex +/// color color-base-blue-500-hex /// -$sd-sage-color-base-blue-50-hex: #3c82f6; +$sd-sage-color-base-blue-500-hex: #3c82f6; /// -/// color color-base-blue-50-code +/// color color-base-blue-500-code /// -$sd-sage-color-base-blue-50-code: "blue-50"; +$sd-sage-color-base-blue-500-code: "blue-500"; /// -/// color color-base-blue-50-classname +/// color color-base-blue-500-classname /// -$sd-sage-color-base-blue-50-classname: "t-sage--color-blue-50"; +$sd-sage-color-base-blue-500-classname: "t-sage--color-blue-500"; /// -/// color color-base-blue-60-hex +/// color color-base-blue-600-hex /// -$sd-sage-color-base-blue-60-hex: #2463eb; +$sd-sage-color-base-blue-600-hex: #2463eb; /// -/// color color-base-blue-60-code +/// color color-base-blue-600-code /// -$sd-sage-color-base-blue-60-code: "blue-60"; +$sd-sage-color-base-blue-600-code: "blue-600"; /// -/// color color-base-blue-60-classname +/// color color-base-blue-600-classname /// -$sd-sage-color-base-blue-60-classname: "t-sage--color-blue-60"; +$sd-sage-color-base-blue-600-classname: "t-sage--color-blue-600"; /// -/// color color-base-blue-70-hex +/// color color-base-blue-700-hex /// -$sd-sage-color-base-blue-70-hex: #1c4ed8; +$sd-sage-color-base-blue-700-hex: #1c4ed8; /// -/// color color-base-blue-70-code +/// color color-base-blue-700-code /// -$sd-sage-color-base-blue-70-code: "blue-70"; +$sd-sage-color-base-blue-700-code: "blue-700"; /// -/// color color-base-blue-70-classname +/// color color-base-blue-700-classname /// -$sd-sage-color-base-blue-70-classname: "t-sage--color-blue-70"; +$sd-sage-color-base-blue-700-classname: "t-sage--color-blue-700"; /// -/// color color-base-blue-80-hex +/// color color-base-blue-800-hex /// -$sd-sage-color-base-blue-80-hex: #1d40ae; +$sd-sage-color-base-blue-800-hex: #1d40ae; /// -/// color color-base-blue-80-code +/// color color-base-blue-800-code /// -$sd-sage-color-base-blue-80-code: "blue-80"; +$sd-sage-color-base-blue-800-code: "blue-800"; /// -/// color color-base-blue-80-classname +/// color color-base-blue-800-classname /// -$sd-sage-color-base-blue-80-classname: "t-sage--color-blue-80"; +$sd-sage-color-base-blue-800-classname: "t-sage--color-blue-800"; /// -/// color color-base-blue-90-hex +/// color color-base-blue-900-hex /// -$sd-sage-color-base-blue-90-hex: #1f3a8a; +$sd-sage-color-base-blue-900-hex: #1f3a8a; /// -/// color color-base-blue-90-code +/// color color-base-blue-900-code /// -$sd-sage-color-base-blue-90-code: "blue-90"; +$sd-sage-color-base-blue-900-code: "blue-900"; /// -/// color color-base-blue-90-classname +/// color color-base-blue-900-classname /// -$sd-sage-color-base-blue-90-classname: "t-sage--color-blue-90"; +$sd-sage-color-base-blue-900-classname: "t-sage--color-blue-900"; /// -/// color color-base-blue-95-hex +/// color color-base-blue-950-hex /// -$sd-sage-color-base-blue-95-hex: #172554; +$sd-sage-color-base-blue-950-hex: #172554; /// -/// color color-base-blue-95-code +/// color color-base-blue-950-code /// -$sd-sage-color-base-blue-95-code: "blue-95"; +$sd-sage-color-base-blue-950-code: "blue-950"; /// -/// color color-base-blue-95-classname +/// color color-base-blue-950-classname /// -$sd-sage-color-base-blue-95-classname: "t-sage--color-blue-95"; +$sd-sage-color-base-blue-950-classname: "t-sage--color-blue-950"; /// /// color color-base-green-50-hex /// @@ -1575,65 +1575,65 @@ $sd-sage-color-base-black-500-classname: "t-sage--color-black-500"; /// $sd-sage-color: ( blue: ( - 5: ( - hex: $sd-sage-color-base-blue-5-hex, - code: $sd-sage-color-base-blue-5-code, - classname: $sd-sage-color-base-blue-5-classname, + 50: ( + hex: $sd-sage-color-base-blue-50-hex, + code: $sd-sage-color-base-blue-50-code, + classname: $sd-sage-color-base-blue-50-classname, ), - 10: ( - hex: $sd-sage-color-base-blue-10-hex, - code: $sd-sage-color-base-blue-10-code, - classname: $sd-sage-color-base-blue-10-classname, + 100: ( + hex: $sd-sage-color-base-blue-100-hex, + code: $sd-sage-color-base-blue-100-code, + classname: $sd-sage-color-base-blue-100-classname, ), - 15: ( - hex: $sd-sage-color-base-blue-15-hex, - code: $sd-sage-color-base-blue-15-code, - classname: $sd-sage-color-base-blue-15-classname, + 150: ( + hex: $sd-sage-color-base-blue-150-hex, + code: $sd-sage-color-base-blue-150-code, + classname: $sd-sage-color-base-blue-150-classname, ), - 20: ( - hex: $sd-sage-color-base-blue-20-hex, - code: $sd-sage-color-base-blue-20-code, - classname: $sd-sage-color-base-blue-20-classname, + 200: ( + hex: $sd-sage-color-base-blue-200-hex, + code: $sd-sage-color-base-blue-200-code, + classname: $sd-sage-color-base-blue-200-classname, ), - 30: ( - hex: $sd-sage-color-base-blue-30-hex, - code: $sd-sage-color-base-blue-30-code, - classname: $sd-sage-color-base-blue-30-classname, + 300: ( + hex: $sd-sage-color-base-blue-300-hex, + code: $sd-sage-color-base-blue-300-code, + classname: $sd-sage-color-base-blue-300-classname, ), - 40: ( - hex: $sd-sage-color-base-blue-40-hex, - code: $sd-sage-color-base-blue-40-code, - classname: $sd-sage-color-base-blue-40-classname, + 400: ( + hex: $sd-sage-color-base-blue-400-hex, + code: $sd-sage-color-base-blue-400-code, + classname: $sd-sage-color-base-blue-400-classname, ), - 50: ( - hex: $sd-sage-color-base-blue-50-hex, - code: $sd-sage-color-base-blue-50-code, - classname: $sd-sage-color-base-blue-50-classname, + 500: ( + hex: $sd-sage-color-base-blue-500-hex, + code: $sd-sage-color-base-blue-500-code, + classname: $sd-sage-color-base-blue-500-classname, ), - 60: ( - hex: $sd-sage-color-base-blue-60-hex, - code: $sd-sage-color-base-blue-60-code, - classname: $sd-sage-color-base-blue-60-classname, + 600: ( + hex: $sd-sage-color-base-blue-600-hex, + code: $sd-sage-color-base-blue-600-code, + classname: $sd-sage-color-base-blue-600-classname, ), - 70: ( - hex: $sd-sage-color-base-blue-70-hex, - code: $sd-sage-color-base-blue-70-code, - classname: $sd-sage-color-base-blue-70-classname, + 700: ( + hex: $sd-sage-color-base-blue-700-hex, + code: $sd-sage-color-base-blue-700-code, + classname: $sd-sage-color-base-blue-700-classname, ), - 80: ( - hex: $sd-sage-color-base-blue-80-hex, - code: $sd-sage-color-base-blue-80-code, - classname: $sd-sage-color-base-blue-80-classname, + 800: ( + hex: $sd-sage-color-base-blue-800-hex, + code: $sd-sage-color-base-blue-800-code, + classname: $sd-sage-color-base-blue-800-classname, ), - 90: ( - hex: $sd-sage-color-base-blue-90-hex, - code: $sd-sage-color-base-blue-90-code, - classname: $sd-sage-color-base-blue-90-classname, + 900: ( + hex: $sd-sage-color-base-blue-900-hex, + code: $sd-sage-color-base-blue-900-code, + classname: $sd-sage-color-base-blue-900-classname, ), - 95: ( - hex: $sd-sage-color-base-blue-95-hex, - code: $sd-sage-color-base-blue-95-code, - classname: $sd-sage-color-base-blue-95-classname, + 950: ( + hex: $sd-sage-color-base-blue-950-hex, + code: $sd-sage-color-base-blue-950-code, + classname: $sd-sage-color-base-blue-950-classname, ), ), green: ( diff --git a/packages/sage-react/lib/configs/dictionary/tokens.js b/packages/sage-react/lib/configs/dictionary/tokens.js index d96bad9e9a..1997037f76 100644 --- a/packages/sage-react/lib/configs/dictionary/tokens.js +++ b/packages/sage-react/lib/configs/dictionary/tokens.js @@ -19,42 +19,42 @@ // // Static vars for COLOR BASE // -export const COLOR_BASE_BLUE_5_HEX = '#fafcff'; -export const COLOR_BASE_BLUE_5_CODE = 'blue-5'; -export const COLOR_BASE_BLUE_5_CLASSNAME = 't-sage--color-blue-5'; -export const COLOR_BASE_BLUE_10_HEX = '#eff6ff'; -export const COLOR_BASE_BLUE_10_CODE = 'blue-10'; -export const COLOR_BASE_BLUE_10_CLASSNAME = 't-sage--color-blue-10'; -export const COLOR_BASE_BLUE_15_HEX = '#dbe9fe'; -export const COLOR_BASE_BLUE_15_CODE = 'blue-15'; -export const COLOR_BASE_BLUE_15_CLASSNAME = 't-sage--color-blue-15'; -export const COLOR_BASE_BLUE_20_HEX = '#bfdbfe'; -export const COLOR_BASE_BLUE_20_CODE = 'blue-20'; -export const COLOR_BASE_BLUE_20_CLASSNAME = 't-sage--color-blue-20'; -export const COLOR_BASE_BLUE_30_HEX = '#92c5fd'; -export const COLOR_BASE_BLUE_30_CODE = 'blue-30'; -export const COLOR_BASE_BLUE_30_CLASSNAME = 't-sage--color-blue-30'; -export const COLOR_BASE_BLUE_40_HEX = '#60a5fa'; -export const COLOR_BASE_BLUE_40_CODE = 'blue-40'; -export const COLOR_BASE_BLUE_40_CLASSNAME = 't-sage--color-blue-40'; -export const COLOR_BASE_BLUE_50_HEX = '#3c82f6'; +export const COLOR_BASE_BLUE_50_HEX = '#fafcff'; export const COLOR_BASE_BLUE_50_CODE = 'blue-50'; export const COLOR_BASE_BLUE_50_CLASSNAME = 't-sage--color-blue-50'; -export const COLOR_BASE_BLUE_60_HEX = '#2463eb'; -export const COLOR_BASE_BLUE_60_CODE = 'blue-60'; -export const COLOR_BASE_BLUE_60_CLASSNAME = 't-sage--color-blue-60'; -export const COLOR_BASE_BLUE_70_HEX = '#1c4ed8'; -export const COLOR_BASE_BLUE_70_CODE = 'blue-70'; -export const COLOR_BASE_BLUE_70_CLASSNAME = 't-sage--color-blue-70'; -export const COLOR_BASE_BLUE_80_HEX = '#1d40ae'; -export const COLOR_BASE_BLUE_80_CODE = 'blue-80'; -export const COLOR_BASE_BLUE_80_CLASSNAME = 't-sage--color-blue-80'; -export const COLOR_BASE_BLUE_90_HEX = '#1f3a8a'; -export const COLOR_BASE_BLUE_90_CODE = 'blue-90'; -export const COLOR_BASE_BLUE_90_CLASSNAME = 't-sage--color-blue-90'; -export const COLOR_BASE_BLUE_95_HEX = '#172554'; -export const COLOR_BASE_BLUE_95_CODE = 'blue-95'; -export const COLOR_BASE_BLUE_95_CLASSNAME = 't-sage--color-blue-95'; +export const COLOR_BASE_BLUE_100_HEX = '#eff6ff'; +export const COLOR_BASE_BLUE_100_CODE = 'blue-100'; +export const COLOR_BASE_BLUE_100_CLASSNAME = 't-sage--color-blue-100'; +export const COLOR_BASE_BLUE_150_HEX = '#dbe9fe'; +export const COLOR_BASE_BLUE_150_CODE = 'blue-150'; +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_CODE = 'blue-300'; +export const COLOR_BASE_BLUE_300_CLASSNAME = 't-sage--color-blue-300'; +export const COLOR_BASE_BLUE_400_HEX = '#60a5fa'; +export const COLOR_BASE_BLUE_400_CODE = 'blue-400'; +export const COLOR_BASE_BLUE_400_CLASSNAME = 't-sage--color-blue-400'; +export const COLOR_BASE_BLUE_500_HEX = '#3c82f6'; +export const COLOR_BASE_BLUE_500_CODE = 'blue-500'; +export const COLOR_BASE_BLUE_500_CLASSNAME = 't-sage--color-blue-500'; +export const COLOR_BASE_BLUE_600_HEX = '#2463eb'; +export const COLOR_BASE_BLUE_600_CODE = 'blue-600'; +export const COLOR_BASE_BLUE_600_CLASSNAME = 't-sage--color-blue-600'; +export const COLOR_BASE_BLUE_700_HEX = '#1c4ed8'; +export const COLOR_BASE_BLUE_700_CODE = 'blue-700'; +export const COLOR_BASE_BLUE_700_CLASSNAME = 't-sage--color-blue-700'; +export const COLOR_BASE_BLUE_800_HEX = '#1d40ae'; +export const COLOR_BASE_BLUE_800_CODE = 'blue-800'; +export const COLOR_BASE_BLUE_800_CLASSNAME = 't-sage--color-blue-800'; +export const COLOR_BASE_BLUE_900_HEX = '#1f3a8a'; +export const COLOR_BASE_BLUE_900_CODE = 'blue-900'; +export const COLOR_BASE_BLUE_900_CLASSNAME = 't-sage--color-blue-900'; +export const COLOR_BASE_BLUE_950_HEX = '#172554'; +export const COLOR_BASE_BLUE_950_CODE = 'blue-950'; +export const COLOR_BASE_BLUE_950_CLASSNAME = 't-sage--color-blue-950'; export const COLOR_BASE_GREEN_50_HEX = '#fbfefc'; export const COLOR_BASE_GREEN_50_CODE = 'green-50'; export const COLOR_BASE_GREEN_50_CLASSNAME = 't-sage--color-green-50'; @@ -412,65 +412,65 @@ export const COLOR_BASE_BLACK_500_CLASSNAME = 't-sage--color-black-500'; // export const COLOR = { BLUE: { - 5: { - HEX: COLOR_BASE_BLUE_5_HEX, - CODE: COLOR_BASE_BLUE_5_CODE, - CLASSNAME: COLOR_BASE_BLUE_5_CLASSNAME, + 50: { + HEX: COLOR_BASE_BLUE_50_HEX, + CODE: COLOR_BASE_BLUE_50_CODE, + CLASSNAME: COLOR_BASE_BLUE_50_CLASSNAME, }, - 10: { - HEX: COLOR_BASE_BLUE_10_HEX, - CODE: COLOR_BASE_BLUE_10_CODE, - CLASSNAME: COLOR_BASE_BLUE_10_CLASSNAME, + 100: { + HEX: COLOR_BASE_BLUE_100_HEX, + CODE: COLOR_BASE_BLUE_100_CODE, + CLASSNAME: COLOR_BASE_BLUE_100_CLASSNAME, }, - 15: { - HEX: COLOR_BASE_BLUE_15_HEX, - CODE: COLOR_BASE_BLUE_15_CODE, - CLASSNAME: COLOR_BASE_BLUE_15_CLASSNAME, + 150: { + HEX: COLOR_BASE_BLUE_150_HEX, + CODE: COLOR_BASE_BLUE_150_CODE, + CLASSNAME: COLOR_BASE_BLUE_150_CLASSNAME, }, - 20: { - HEX: COLOR_BASE_BLUE_20_HEX, - CODE: COLOR_BASE_BLUE_20_CODE, - CLASSNAME: COLOR_BASE_BLUE_20_CLASSNAME, + 200: { + HEX: COLOR_BASE_BLUE_200_HEX, + CODE: COLOR_BASE_BLUE_200_CODE, + CLASSNAME: COLOR_BASE_BLUE_200_CLASSNAME, }, - 30: { - HEX: COLOR_BASE_BLUE_30_HEX, - CODE: COLOR_BASE_BLUE_30_CODE, - CLASSNAME: COLOR_BASE_BLUE_30_CLASSNAME, + 300: { + HEX: COLOR_BASE_BLUE_300_HEX, + CODE: COLOR_BASE_BLUE_300_CODE, + CLASSNAME: COLOR_BASE_BLUE_300_CLASSNAME, }, - 40: { - HEX: COLOR_BASE_BLUE_40_HEX, - CODE: COLOR_BASE_BLUE_40_CODE, - CLASSNAME: COLOR_BASE_BLUE_40_CLASSNAME, + 400: { + HEX: COLOR_BASE_BLUE_400_HEX, + CODE: COLOR_BASE_BLUE_400_CODE, + CLASSNAME: COLOR_BASE_BLUE_400_CLASSNAME, }, - 50: { - HEX: COLOR_BASE_BLUE_50_HEX, - CODE: COLOR_BASE_BLUE_50_CODE, - CLASSNAME: COLOR_BASE_BLUE_50_CLASSNAME, + 500: { + HEX: COLOR_BASE_BLUE_500_HEX, + CODE: COLOR_BASE_BLUE_500_CODE, + CLASSNAME: COLOR_BASE_BLUE_500_CLASSNAME, }, - 60: { - HEX: COLOR_BASE_BLUE_60_HEX, - CODE: COLOR_BASE_BLUE_60_CODE, - CLASSNAME: COLOR_BASE_BLUE_60_CLASSNAME, + 600: { + HEX: COLOR_BASE_BLUE_600_HEX, + CODE: COLOR_BASE_BLUE_600_CODE, + CLASSNAME: COLOR_BASE_BLUE_600_CLASSNAME, }, - 70: { - HEX: COLOR_BASE_BLUE_70_HEX, - CODE: COLOR_BASE_BLUE_70_CODE, - CLASSNAME: COLOR_BASE_BLUE_70_CLASSNAME, + 700: { + HEX: COLOR_BASE_BLUE_700_HEX, + CODE: COLOR_BASE_BLUE_700_CODE, + CLASSNAME: COLOR_BASE_BLUE_700_CLASSNAME, }, - 80: { - HEX: COLOR_BASE_BLUE_80_HEX, - CODE: COLOR_BASE_BLUE_80_CODE, - CLASSNAME: COLOR_BASE_BLUE_80_CLASSNAME, + 800: { + HEX: COLOR_BASE_BLUE_800_HEX, + CODE: COLOR_BASE_BLUE_800_CODE, + CLASSNAME: COLOR_BASE_BLUE_800_CLASSNAME, }, - 90: { - HEX: COLOR_BASE_BLUE_90_HEX, - CODE: COLOR_BASE_BLUE_90_CODE, - CLASSNAME: COLOR_BASE_BLUE_90_CLASSNAME, + 900: { + HEX: COLOR_BASE_BLUE_900_HEX, + CODE: COLOR_BASE_BLUE_900_CODE, + CLASSNAME: COLOR_BASE_BLUE_900_CLASSNAME, }, - 95: { - HEX: COLOR_BASE_BLUE_95_HEX, - CODE: COLOR_BASE_BLUE_95_CODE, - CLASSNAME: COLOR_BASE_BLUE_95_CLASSNAME, + 950: { + HEX: COLOR_BASE_BLUE_950_HEX, + CODE: COLOR_BASE_BLUE_950_CODE, + CLASSNAME: COLOR_BASE_BLUE_950_CLASSNAME, }, }, GREEN: { diff --git a/style-dictionary/tokens/color/base.json b/style-dictionary/tokens/color/base.json index 509107516a..6a857f4216 100644 --- a/style-dictionary/tokens/color/base.json +++ b/style-dictionary/tokens/color/base.json @@ -2,65 +2,65 @@ "color": { "base": { "blue": { - "5": { + "50": { "hex": { "value": "#fafcff" }, - "code": { "value": "blue-5" }, - "classname": { "value": "t-sage--color-blue-5" } + "code": { "value": "blue-50" }, + "classname": { "value": "t-sage--color-blue-50" } }, - "10": { + "100": { "hex": { "value": "#eff6ff" }, - "code": { "value": "blue-10" }, - "classname": { "value": "t-sage--color-blue-10" } + "code": { "value": "blue-100" }, + "classname": { "value": "t-sage--color-blue-100" } }, - "15": { + "150": { "hex": { "value": "#dbe9fe" }, - "code": { "value": "blue-15" }, - "classname": { "value": "t-sage--color-blue-15" } + "code": { "value": "blue-150" }, + "classname": { "value": "t-sage--color-blue-150" } }, - "20": { + "200": { "hex": { "value": "#bfdbfe" }, - "code": { "value": "blue-20" }, - "classname": { "value": "t-sage--color-blue-20" } + "code": { "value": "blue-200" }, + "classname": { "value": "t-sage--color-blue-200" } }, - "30": { + "300": { "hex": { "value": "#92c5fd" }, - "code": { "value": "blue-30" }, - "classname": { "value": "t-sage--color-blue-30" } + "code": { "value": "blue-300" }, + "classname": { "value": "t-sage--color-blue-300" } }, - "40": { + "400": { "hex": { "value": "#60a5fa" }, - "code": { "value": "blue-40" }, - "classname": { "value": "t-sage--color-blue-40" } + "code": { "value": "blue-400" }, + "classname": { "value": "t-sage--color-blue-400" } }, - "50": { + "500": { "hex": { "value": "#3c82f6" }, - "code": { "value": "blue-50" }, - "classname": { "value": "t-sage--color-blue-50" } + "code": { "value": "blue-500" }, + "classname": { "value": "t-sage--color-blue-500" } }, - "60": { + "600": { "hex": { "value": "#2463eb" }, - "code": { "value": "blue-60" }, - "classname": { "value": "t-sage--color-blue-60" } + "code": { "value": "blue-600" }, + "classname": { "value": "t-sage--color-blue-600" } }, - "70": { + "700": { "hex": { "value": "#1c4ed8" }, - "code": { "value": "blue-70" }, - "classname": { "value": "t-sage--color-blue-70" } + "code": { "value": "blue-700" }, + "classname": { "value": "t-sage--color-blue-700" } }, - "80": { + "800": { "hex": { "value": "#1d40ae" }, - "code": { "value": "blue-80" }, - "classname": { "value": "t-sage--color-blue-80" } + "code": { "value": "blue-800" }, + "classname": { "value": "t-sage--color-blue-800" } }, - "90": { + "900": { "hex": { "value": "#1f3a8a" }, - "code": { "value": "blue-90" }, - "classname": { "value": "t-sage--color-blue-90" } + "code": { "value": "blue-900" }, + "classname": { "value": "t-sage--color-blue-900" } }, - "95": { + "950": { "hex": { "value": "#172554" }, - "code": { "value": "blue-95" }, - "classname": { "value": "t-sage--color-blue-95" } + "code": { "value": "blue-950" }, + "classname": { "value": "t-sage--color-blue-950" } } }, "green": { @@ -189,27 +189,27 @@ }, "primary": { "100": { - "hex": { "value": "{color.base.blue.15.hex.value}" }, + "hex": { "value": "{color.base.blue.150.hex.value}" }, "code": { "value": "primary-100" }, "classname": { "value": "t-sage--color-primary-100" } }, "200": { - "hex": { "value": "{color.base.blue.30.hex.value}" }, + "hex": { "value": "{color.base.blue.300.hex.value}" }, "code": { "value": "primary-200" }, "classname": { "value": "t-sage--color-primary-200" } }, "300": { - "hex": { "value": "{color.base.blue.60.hex.value}" }, + "hex": { "value": "{color.base.blue.600.hex.value}" }, "code": { "value": "primary-300" }, "classname": { "value": "t-sage--color-primary-300" } }, "400": { - "hex": { "value": "{color.base.blue.70.hex.value}" }, + "hex": { "value": "{color.base.blue.700.hex.value}" }, "code": { "value": "primary-400" }, "classname": { "value": "t-sage--color-primary-400" } }, "500": { - "hex": { "value": "{color.base.blue.95.hex.value}" }, + "hex": { "value": "{color.base.blue.950.hex.value}" }, "code": { "value": "primary-500" }, "classname": { "value": "t-sage--color-primary-500" } } diff --git a/style-dictionary/tokens/color/core.json b/style-dictionary/tokens/color/core.json index 6b3eea0e87..8505f4ab9e 100644 --- a/style-dictionary/tokens/color/core.json +++ b/style-dictionary/tokens/color/core.json @@ -2,7 +2,7 @@ "color": { "core": { "blue": { - "value": "{color.base.blue.60.hex}" + "value": "{color.base.blue.600.hex}" }, "green": { "value": "{color.base.green.600.hex}" From 2b03d37f73ebcce47a808293f958acb84da70c80 Mon Sep 17 00:00:00 2001 From: Quinton Jason Date: Tue, 20 Aug 2024 15:04:56 -0500 Subject: [PATCH 09/31] fix: add 0 to mercury color token names --- .../stylesheets/docs/_colors.scss | 4 +- .../app/sage_tokens/sage_dictionary.rb | 166 ++++++------ .../components/_card_highlight.scss | 2 +- .../lib/stylesheets/components/_dot.scss | 2 +- .../lib/stylesheets/components/_stat_box.scss | 2 +- .../lib/stylesheets/core/_typography.scss | 2 +- .../lib/stylesheets/dictionary/_tokens.scss | 242 +++++++++--------- .../lib/configs/dictionary/tokens.js | 166 ++++++------ style-dictionary/tokens/color/base.json | 82 +++--- 9 files changed, 334 insertions(+), 334 deletions(-) diff --git a/docs/lib/sage-frontend/stylesheets/docs/_colors.scss b/docs/lib/sage-frontend/stylesheets/docs/_colors.scss index 06386d3a4d..bfa927a122 100644 --- a/docs/lib/sage-frontend/stylesheets/docs/_colors.scss +++ b/docs/lib/sage-frontend/stylesheets/docs/_colors.scss @@ -73,11 +73,11 @@ @else if ($name == blue) { color: sage-color(blue, 950); } - @else if ($name == mercury and $value > 20) { + @else if ($name == mercury and $value > 200) { color: sage-color(white); } @else if ($name == mercury) { - color: sage-color(mercury, 50); + color: sage-color(mercury, 500); } @else if ($name == green and $value > 200) { color: sage-color(white); 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 6b414f8fca..ba8a768eac 100644 --- a/docs/lib/sage_rails/app/sage_tokens/sage_dictionary.rb +++ b/docs/lib/sage_rails/app/sage_tokens/sage_dictionary.rb @@ -93,42 +93,42 @@ module SageDictionary SD_SAGE_COLOR_BASE_GREEN_950_HEX = "#052e1c" SD_SAGE_COLOR_BASE_GREEN_950_CODE = "green-950" SD_SAGE_COLOR_BASE_GREEN_950_CLASSNAME = "t-sage--color-green-950" - SD_SAGE_COLOR_BASE_MERCURY_5_HEX = "#fffcfa" - SD_SAGE_COLOR_BASE_MERCURY_5_CODE = "mercury-5" - SD_SAGE_COLOR_BASE_MERCURY_5_CLASSNAME = "t-sage--color-mercury-5" - SD_SAGE_COLOR_BASE_MERCURY_10_HEX = "#fff3ed" - SD_SAGE_COLOR_BASE_MERCURY_10_CODE = "mercury-10" - SD_SAGE_COLOR_BASE_MERCURY_10_CLASSNAME = "t-sage--color-mercury-10" - SD_SAGE_COLOR_BASE_MERCURY_15_HEX = "#ffe3d4" - SD_SAGE_COLOR_BASE_MERCURY_15_CODE = "mercury-15" - SD_SAGE_COLOR_BASE_MERCURY_15_CLASSNAME = "t-sage--color-mercury-15" - SD_SAGE_COLOR_BASE_MERCURY_20_HEX = "#ffc3a8" - SD_SAGE_COLOR_BASE_MERCURY_20_CODE = "mercury-20" - SD_SAGE_COLOR_BASE_MERCURY_20_CLASSNAME = "t-sage--color-mercury-20" - SD_SAGE_COLOR_BASE_MERCURY_30_HEX = "#ff9970" - SD_SAGE_COLOR_BASE_MERCURY_30_CODE = "mercury-30" - SD_SAGE_COLOR_BASE_MERCURY_30_CLASSNAME = "t-sage--color-mercury-30" - SD_SAGE_COLOR_BASE_MERCURY_40_HEX = "#ff6337" - SD_SAGE_COLOR_BASE_MERCURY_40_CODE = "mercury-40" - SD_SAGE_COLOR_BASE_MERCURY_40_CLASSNAME = "t-sage--color-mercury-40" - SD_SAGE_COLOR_BASE_MERCURY_50_HEX = "#ff3e15" + SD_SAGE_COLOR_BASE_MERCURY_50_HEX = "#fffcfa" SD_SAGE_COLOR_BASE_MERCURY_50_CODE = "mercury-50" SD_SAGE_COLOR_BASE_MERCURY_50_CLASSNAME = "t-sage--color-mercury-50" - SD_SAGE_COLOR_BASE_MERCURY_60_HEX = "#f11f06" - SD_SAGE_COLOR_BASE_MERCURY_60_CODE = "mercury-60" - SD_SAGE_COLOR_BASE_MERCURY_60_CLASSNAME = "t-sage--color-mercury-60" - SD_SAGE_COLOR_BASE_MERCURY_70_HEX = "#c81307" - SD_SAGE_COLOR_BASE_MERCURY_70_CODE = "mercury-70" - SD_SAGE_COLOR_BASE_MERCURY_70_CLASSNAME = "t-sage--color-mercury-70" - SD_SAGE_COLOR_BASE_MERCURY_80_HEX = "#9e110e" - SD_SAGE_COLOR_BASE_MERCURY_80_CODE = "mercury-80" - SD_SAGE_COLOR_BASE_MERCURY_80_CLASSNAME = "t-sage--color-mercury-80" - SD_SAGE_COLOR_BASE_MERCURY_90_HEX = "#7f120f" - SD_SAGE_COLOR_BASE_MERCURY_90_CODE = "mercury-90" - SD_SAGE_COLOR_BASE_MERCURY_90_CLASSNAME = "t-sage--color-mercury-90" - SD_SAGE_COLOR_BASE_MERCURY_95_HEX = "#450506" - SD_SAGE_COLOR_BASE_MERCURY_95_CODE = "mercury-95" - SD_SAGE_COLOR_BASE_MERCURY_95_CLASSNAME = "t-sage--color-mercury-95" + SD_SAGE_COLOR_BASE_MERCURY_100_HEX = "#fff3ed" + SD_SAGE_COLOR_BASE_MERCURY_100_CODE = "mercury-100" + SD_SAGE_COLOR_BASE_MERCURY_100_CLASSNAME = "t-sage--color-mercury-100" + SD_SAGE_COLOR_BASE_MERCURY_150_HEX = "#ffe3d4" + SD_SAGE_COLOR_BASE_MERCURY_150_CODE = "mercury-150" + SD_SAGE_COLOR_BASE_MERCURY_150_CLASSNAME = "t-sage--color-mercury-150" + SD_SAGE_COLOR_BASE_MERCURY_200_HEX = "#ffc3a8" + SD_SAGE_COLOR_BASE_MERCURY_200_CODE = "mercury-200" + SD_SAGE_COLOR_BASE_MERCURY_200_CLASSNAME = "t-sage--color-mercury-200" + SD_SAGE_COLOR_BASE_MERCURY_300_HEX = "#ff9970" + SD_SAGE_COLOR_BASE_MERCURY_300_CODE = "mercury-300" + SD_SAGE_COLOR_BASE_MERCURY_300_CLASSNAME = "t-sage--color-mercury-300" + SD_SAGE_COLOR_BASE_MERCURY_400_HEX = "#ff6337" + SD_SAGE_COLOR_BASE_MERCURY_400_CODE = "mercury-400" + SD_SAGE_COLOR_BASE_MERCURY_400_CLASSNAME = "t-sage--color-mercury-400" + SD_SAGE_COLOR_BASE_MERCURY_500_HEX = "#ff3e15" + SD_SAGE_COLOR_BASE_MERCURY_500_CODE = "mercury-500" + SD_SAGE_COLOR_BASE_MERCURY_500_CLASSNAME = "t-sage--color-mercury-500" + SD_SAGE_COLOR_BASE_MERCURY_600_HEX = "#f11f06" + SD_SAGE_COLOR_BASE_MERCURY_600_CODE = "mercury-600" + SD_SAGE_COLOR_BASE_MERCURY_600_CLASSNAME = "t-sage--color-mercury-600" + SD_SAGE_COLOR_BASE_MERCURY_700_HEX = "#c81307" + SD_SAGE_COLOR_BASE_MERCURY_700_CODE = "mercury-700" + SD_SAGE_COLOR_BASE_MERCURY_700_CLASSNAME = "t-sage--color-mercury-700" + SD_SAGE_COLOR_BASE_MERCURY_800_HEX = "#9e110e" + SD_SAGE_COLOR_BASE_MERCURY_800_CODE = "mercury-800" + SD_SAGE_COLOR_BASE_MERCURY_800_CLASSNAME = "t-sage--color-mercury-800" + SD_SAGE_COLOR_BASE_MERCURY_900_HEX = "#7f120f" + SD_SAGE_COLOR_BASE_MERCURY_900_CODE = "mercury-900" + SD_SAGE_COLOR_BASE_MERCURY_900_CLASSNAME = "t-sage--color-mercury-900" + SD_SAGE_COLOR_BASE_MERCURY_950_HEX = "#450506" + SD_SAGE_COLOR_BASE_MERCURY_950_CODE = "mercury-950" + SD_SAGE_COLOR_BASE_MERCURY_950_CLASSNAME = "t-sage--color-mercury-950" 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" @@ -538,65 +538,65 @@ module SageDictionary }, }, "MERCURY": { - "5": { - "HEX": SD_SAGE_COLOR_BASE_MERCURY_5_HEX, - "CODE": SD_SAGE_COLOR_BASE_MERCURY_5_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_MERCURY_5_CLASSNAME, + "50": { + "HEX": SD_SAGE_COLOR_BASE_MERCURY_50_HEX, + "CODE": SD_SAGE_COLOR_BASE_MERCURY_50_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_MERCURY_50_CLASSNAME, }, - "10": { - "HEX": SD_SAGE_COLOR_BASE_MERCURY_10_HEX, - "CODE": SD_SAGE_COLOR_BASE_MERCURY_10_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_MERCURY_10_CLASSNAME, + "100": { + "HEX": SD_SAGE_COLOR_BASE_MERCURY_100_HEX, + "CODE": SD_SAGE_COLOR_BASE_MERCURY_100_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_MERCURY_100_CLASSNAME, }, - "15": { - "HEX": SD_SAGE_COLOR_BASE_MERCURY_15_HEX, - "CODE": SD_SAGE_COLOR_BASE_MERCURY_15_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_MERCURY_15_CLASSNAME, + "150": { + "HEX": SD_SAGE_COLOR_BASE_MERCURY_150_HEX, + "CODE": SD_SAGE_COLOR_BASE_MERCURY_150_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_MERCURY_150_CLASSNAME, }, - "20": { - "HEX": SD_SAGE_COLOR_BASE_MERCURY_20_HEX, - "CODE": SD_SAGE_COLOR_BASE_MERCURY_20_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_MERCURY_20_CLASSNAME, + "200": { + "HEX": SD_SAGE_COLOR_BASE_MERCURY_200_HEX, + "CODE": SD_SAGE_COLOR_BASE_MERCURY_200_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_MERCURY_200_CLASSNAME, }, - "30": { - "HEX": SD_SAGE_COLOR_BASE_MERCURY_30_HEX, - "CODE": SD_SAGE_COLOR_BASE_MERCURY_30_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_MERCURY_30_CLASSNAME, + "300": { + "HEX": SD_SAGE_COLOR_BASE_MERCURY_300_HEX, + "CODE": SD_SAGE_COLOR_BASE_MERCURY_300_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_MERCURY_300_CLASSNAME, }, - "40": { - "HEX": SD_SAGE_COLOR_BASE_MERCURY_40_HEX, - "CODE": SD_SAGE_COLOR_BASE_MERCURY_40_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_MERCURY_40_CLASSNAME, + "400": { + "HEX": SD_SAGE_COLOR_BASE_MERCURY_400_HEX, + "CODE": SD_SAGE_COLOR_BASE_MERCURY_400_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_MERCURY_400_CLASSNAME, }, - "50": { - "HEX": SD_SAGE_COLOR_BASE_MERCURY_50_HEX, - "CODE": SD_SAGE_COLOR_BASE_MERCURY_50_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_MERCURY_50_CLASSNAME, + "500": { + "HEX": SD_SAGE_COLOR_BASE_MERCURY_500_HEX, + "CODE": SD_SAGE_COLOR_BASE_MERCURY_500_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_MERCURY_500_CLASSNAME, }, - "60": { - "HEX": SD_SAGE_COLOR_BASE_MERCURY_60_HEX, - "CODE": SD_SAGE_COLOR_BASE_MERCURY_60_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_MERCURY_60_CLASSNAME, + "600": { + "HEX": SD_SAGE_COLOR_BASE_MERCURY_600_HEX, + "CODE": SD_SAGE_COLOR_BASE_MERCURY_600_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_MERCURY_600_CLASSNAME, }, - "70": { - "HEX": SD_SAGE_COLOR_BASE_MERCURY_70_HEX, - "CODE": SD_SAGE_COLOR_BASE_MERCURY_70_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_MERCURY_70_CLASSNAME, + "700": { + "HEX": SD_SAGE_COLOR_BASE_MERCURY_700_HEX, + "CODE": SD_SAGE_COLOR_BASE_MERCURY_700_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_MERCURY_700_CLASSNAME, }, - "80": { - "HEX": SD_SAGE_COLOR_BASE_MERCURY_80_HEX, - "CODE": SD_SAGE_COLOR_BASE_MERCURY_80_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_MERCURY_80_CLASSNAME, + "800": { + "HEX": SD_SAGE_COLOR_BASE_MERCURY_800_HEX, + "CODE": SD_SAGE_COLOR_BASE_MERCURY_800_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_MERCURY_800_CLASSNAME, }, - "90": { - "HEX": SD_SAGE_COLOR_BASE_MERCURY_90_HEX, - "CODE": SD_SAGE_COLOR_BASE_MERCURY_90_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_MERCURY_90_CLASSNAME, + "900": { + "HEX": SD_SAGE_COLOR_BASE_MERCURY_900_HEX, + "CODE": SD_SAGE_COLOR_BASE_MERCURY_900_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_MERCURY_900_CLASSNAME, }, - "95": { - "HEX": SD_SAGE_COLOR_BASE_MERCURY_95_HEX, - "CODE": SD_SAGE_COLOR_BASE_MERCURY_95_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_MERCURY_95_CLASSNAME, + "950": { + "HEX": SD_SAGE_COLOR_BASE_MERCURY_950_HEX, + "CODE": SD_SAGE_COLOR_BASE_MERCURY_950_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_MERCURY_950_CLASSNAME, }, }, "PRIMARY": { @@ -1301,7 +1301,7 @@ module SageDictionary # SD_SAGE_COLOR_CORE_BLUE = "#2463eb" SD_SAGE_COLOR_CORE_GREEN = "#079250" - SD_SAGE_COLOR_CORE_MERCURY = "#ff3e15" + SD_SAGE_COLOR_CORE_MERCURY = "#fffcfa" SD_SAGE_COLOR_CORE_PRIMARY = "#2463eb" SD_SAGE_COLOR_CORE_SAGE = "#079250" SD_SAGE_COLOR_CORE_YELLOW = "#fdbb21" diff --git a/packages/sage-assets/lib/stylesheets/components/_card_highlight.scss b/packages/sage-assets/lib/stylesheets/components/_card_highlight.scss index cbef524045..ec73c612ca 100644 --- a/packages/sage-assets/lib/stylesheets/components/_card_highlight.scss +++ b/packages/sage-assets/lib/stylesheets/components/_card_highlight.scss @@ -61,7 +61,7 @@ $-card-highlight-size: rem(12px); --color: #{sage-color($-color-name, 600)}; } @else if ($-color-name == mercury) { - --color: #{sage-color($-color-name, 50)}; + --color: #{sage-color($-color-name, 500)}; } @else { --color: #{sage-color($-color-name, 300)}; diff --git a/packages/sage-assets/lib/stylesheets/components/_dot.scss b/packages/sage-assets/lib/stylesheets/components/_dot.scss index 78cb8cb8a9..cca3841570 100644 --- a/packages/sage-assets/lib/stylesheets/components/_dot.scss +++ b/packages/sage-assets/lib/stylesheets/components/_dot.scss @@ -49,7 +49,7 @@ $-sage-dot-size--badge: rem(6px); --sage-dot-color: #{sage-color($-color-name, 600)}; } @else if ($-color-name == mercury) { - --sage-dot-color: #{sage-color($-color-name, 50)}; + --sage-dot-color: #{sage-color($-color-name, 500)}; } @else { --sage-dot-color: #{sage-color($-color-name)}; diff --git a/packages/sage-assets/lib/stylesheets/components/_stat_box.scss b/packages/sage-assets/lib/stylesheets/components/_stat_box.scss index d79548770a..4403b59ff8 100644 --- a/packages/sage-assets/lib/stylesheets/components/_stat_box.scss +++ b/packages/sage-assets/lib/stylesheets/components/_stat_box.scss @@ -108,7 +108,7 @@ $-stat-box-image-max-width: rem(48px); --legend-color: #{sage-color($-color-name, 600)}; } @else if ($-color-name == mercury) { - --legend-color: #{sage-color($-color-name, 50)}; + --legend-color: #{sage-color($-color-name, 500)}; } @else { --legend-color: #{sage-color($-color-name, 500)}; diff --git a/packages/sage-assets/lib/stylesheets/core/_typography.scss b/packages/sage-assets/lib/stylesheets/core/_typography.scss index afee77bd7a..11519ff075 100644 --- a/packages/sage-assets/lib/stylesheets/core/_typography.scss +++ b/packages/sage-assets/lib/stylesheets/core/_typography.scss @@ -218,7 +218,7 @@ body:not(.sage-excluded), $color-value: sage-color($color-name, 600); } @else if ($color-name == mercury) { - $color-value: sage-color($color-name, 50); + $color-value: sage-color($color-name, 500); } @else if ($color-name == grey) { $color-value: sage-color($color-name, 500); diff --git a/packages/sage-assets/lib/stylesheets/dictionary/_tokens.scss b/packages/sage-assets/lib/stylesheets/dictionary/_tokens.scss index 0d4280a5c9..23276acd23 100644 --- a/packages/sage-assets/lib/stylesheets/dictionary/_tokens.scss +++ b/packages/sage-assets/lib/stylesheets/dictionary/_tokens.scss @@ -310,149 +310,149 @@ $sd-sage-color-base-green-950-code: "green-950"; /// $sd-sage-color-base-green-950-classname: "t-sage--color-green-950"; /// -/// color color-base-mercury-5-hex +/// color color-base-mercury-50-hex /// -$sd-sage-color-base-mercury-5-hex: #fffcfa; +$sd-sage-color-base-mercury-50-hex: #fffcfa; /// -/// color color-base-mercury-5-code +/// color color-base-mercury-50-code /// -$sd-sage-color-base-mercury-5-code: "mercury-5"; +$sd-sage-color-base-mercury-50-code: "mercury-50"; /// -/// color color-base-mercury-5-classname +/// color color-base-mercury-50-classname /// -$sd-sage-color-base-mercury-5-classname: "t-sage--color-mercury-5"; +$sd-sage-color-base-mercury-50-classname: "t-sage--color-mercury-50"; /// -/// color color-base-mercury-10-hex +/// color color-base-mercury-100-hex /// -$sd-sage-color-base-mercury-10-hex: #fff3ed; +$sd-sage-color-base-mercury-100-hex: #fff3ed; /// -/// color color-base-mercury-10-code +/// color color-base-mercury-100-code /// -$sd-sage-color-base-mercury-10-code: "mercury-10"; +$sd-sage-color-base-mercury-100-code: "mercury-100"; /// -/// color color-base-mercury-10-classname +/// color color-base-mercury-100-classname /// -$sd-sage-color-base-mercury-10-classname: "t-sage--color-mercury-10"; +$sd-sage-color-base-mercury-100-classname: "t-sage--color-mercury-100"; /// -/// color color-base-mercury-15-hex +/// color color-base-mercury-150-hex /// -$sd-sage-color-base-mercury-15-hex: #ffe3d4; +$sd-sage-color-base-mercury-150-hex: #ffe3d4; /// -/// color color-base-mercury-15-code +/// color color-base-mercury-150-code /// -$sd-sage-color-base-mercury-15-code: "mercury-15"; +$sd-sage-color-base-mercury-150-code: "mercury-150"; /// -/// color color-base-mercury-15-classname +/// color color-base-mercury-150-classname /// -$sd-sage-color-base-mercury-15-classname: "t-sage--color-mercury-15"; +$sd-sage-color-base-mercury-150-classname: "t-sage--color-mercury-150"; /// -/// color color-base-mercury-20-hex +/// color color-base-mercury-200-hex /// -$sd-sage-color-base-mercury-20-hex: #ffc3a8; +$sd-sage-color-base-mercury-200-hex: #ffc3a8; /// -/// color color-base-mercury-20-code +/// color color-base-mercury-200-code /// -$sd-sage-color-base-mercury-20-code: "mercury-20"; +$sd-sage-color-base-mercury-200-code: "mercury-200"; /// -/// color color-base-mercury-20-classname +/// color color-base-mercury-200-classname /// -$sd-sage-color-base-mercury-20-classname: "t-sage--color-mercury-20"; +$sd-sage-color-base-mercury-200-classname: "t-sage--color-mercury-200"; /// -/// color color-base-mercury-30-hex +/// color color-base-mercury-300-hex /// -$sd-sage-color-base-mercury-30-hex: #ff9970; +$sd-sage-color-base-mercury-300-hex: #ff9970; /// -/// color color-base-mercury-30-code +/// color color-base-mercury-300-code /// -$sd-sage-color-base-mercury-30-code: "mercury-30"; +$sd-sage-color-base-mercury-300-code: "mercury-300"; /// -/// color color-base-mercury-30-classname +/// color color-base-mercury-300-classname /// -$sd-sage-color-base-mercury-30-classname: "t-sage--color-mercury-30"; +$sd-sage-color-base-mercury-300-classname: "t-sage--color-mercury-300"; /// -/// color color-base-mercury-40-hex +/// color color-base-mercury-400-hex /// -$sd-sage-color-base-mercury-40-hex: #ff6337; +$sd-sage-color-base-mercury-400-hex: #ff6337; /// -/// color color-base-mercury-40-code +/// color color-base-mercury-400-code /// -$sd-sage-color-base-mercury-40-code: "mercury-40"; +$sd-sage-color-base-mercury-400-code: "mercury-400"; /// -/// color color-base-mercury-40-classname +/// color color-base-mercury-400-classname /// -$sd-sage-color-base-mercury-40-classname: "t-sage--color-mercury-40"; +$sd-sage-color-base-mercury-400-classname: "t-sage--color-mercury-400"; /// -/// color color-base-mercury-50-hex +/// color color-base-mercury-500-hex /// -$sd-sage-color-base-mercury-50-hex: #ff3e15; +$sd-sage-color-base-mercury-500-hex: #ff3e15; /// -/// color color-base-mercury-50-code +/// color color-base-mercury-500-code /// -$sd-sage-color-base-mercury-50-code: "mercury-50"; +$sd-sage-color-base-mercury-500-code: "mercury-500"; /// -/// color color-base-mercury-50-classname +/// color color-base-mercury-500-classname /// -$sd-sage-color-base-mercury-50-classname: "t-sage--color-mercury-50"; +$sd-sage-color-base-mercury-500-classname: "t-sage--color-mercury-500"; /// -/// color color-base-mercury-60-hex +/// color color-base-mercury-600-hex /// -$sd-sage-color-base-mercury-60-hex: #f11f06; +$sd-sage-color-base-mercury-600-hex: #f11f06; /// -/// color color-base-mercury-60-code +/// color color-base-mercury-600-code /// -$sd-sage-color-base-mercury-60-code: "mercury-60"; +$sd-sage-color-base-mercury-600-code: "mercury-600"; /// -/// color color-base-mercury-60-classname +/// color color-base-mercury-600-classname /// -$sd-sage-color-base-mercury-60-classname: "t-sage--color-mercury-60"; +$sd-sage-color-base-mercury-600-classname: "t-sage--color-mercury-600"; /// -/// color color-base-mercury-70-hex +/// color color-base-mercury-700-hex /// -$sd-sage-color-base-mercury-70-hex: #c81307; +$sd-sage-color-base-mercury-700-hex: #c81307; /// -/// color color-base-mercury-70-code +/// color color-base-mercury-700-code /// -$sd-sage-color-base-mercury-70-code: "mercury-70"; +$sd-sage-color-base-mercury-700-code: "mercury-700"; /// -/// color color-base-mercury-70-classname +/// color color-base-mercury-700-classname /// -$sd-sage-color-base-mercury-70-classname: "t-sage--color-mercury-70"; +$sd-sage-color-base-mercury-700-classname: "t-sage--color-mercury-700"; /// -/// color color-base-mercury-80-hex +/// color color-base-mercury-800-hex /// -$sd-sage-color-base-mercury-80-hex: #9e110e; +$sd-sage-color-base-mercury-800-hex: #9e110e; /// -/// color color-base-mercury-80-code +/// color color-base-mercury-800-code /// -$sd-sage-color-base-mercury-80-code: "mercury-80"; +$sd-sage-color-base-mercury-800-code: "mercury-800"; /// -/// color color-base-mercury-80-classname +/// color color-base-mercury-800-classname /// -$sd-sage-color-base-mercury-80-classname: "t-sage--color-mercury-80"; +$sd-sage-color-base-mercury-800-classname: "t-sage--color-mercury-800"; /// -/// color color-base-mercury-90-hex +/// color color-base-mercury-900-hex /// -$sd-sage-color-base-mercury-90-hex: #7f120f; +$sd-sage-color-base-mercury-900-hex: #7f120f; /// -/// color color-base-mercury-90-code +/// color color-base-mercury-900-code /// -$sd-sage-color-base-mercury-90-code: "mercury-90"; +$sd-sage-color-base-mercury-900-code: "mercury-900"; /// -/// color color-base-mercury-90-classname +/// color color-base-mercury-900-classname /// -$sd-sage-color-base-mercury-90-classname: "t-sage--color-mercury-90"; +$sd-sage-color-base-mercury-900-classname: "t-sage--color-mercury-900"; /// -/// color color-base-mercury-95-hex +/// color color-base-mercury-950-hex /// -$sd-sage-color-base-mercury-95-hex: #450506; +$sd-sage-color-base-mercury-950-hex: #450506; /// -/// color color-base-mercury-95-code +/// color color-base-mercury-950-code /// -$sd-sage-color-base-mercury-95-code: "mercury-95"; +$sd-sage-color-base-mercury-950-code: "mercury-950"; /// -/// color color-base-mercury-95-classname +/// color color-base-mercury-950-classname /// -$sd-sage-color-base-mercury-95-classname: "t-sage--color-mercury-95"; +$sd-sage-color-base-mercury-950-classname: "t-sage--color-mercury-950"; /// /// color color-base-primary-100-hex /// @@ -1699,65 +1699,65 @@ $sd-sage-color: ( ), ), mercury: ( - 5: ( - hex: $sd-sage-color-base-mercury-5-hex, - code: $sd-sage-color-base-mercury-5-code, - classname: $sd-sage-color-base-mercury-5-classname, + 50: ( + hex: $sd-sage-color-base-mercury-50-hex, + code: $sd-sage-color-base-mercury-50-code, + classname: $sd-sage-color-base-mercury-50-classname, ), - 10: ( - hex: $sd-sage-color-base-mercury-10-hex, - code: $sd-sage-color-base-mercury-10-code, - classname: $sd-sage-color-base-mercury-10-classname, + 100: ( + hex: $sd-sage-color-base-mercury-100-hex, + code: $sd-sage-color-base-mercury-100-code, + classname: $sd-sage-color-base-mercury-100-classname, ), - 15: ( - hex: $sd-sage-color-base-mercury-15-hex, - code: $sd-sage-color-base-mercury-15-code, - classname: $sd-sage-color-base-mercury-15-classname, + 150: ( + hex: $sd-sage-color-base-mercury-150-hex, + code: $sd-sage-color-base-mercury-150-code, + classname: $sd-sage-color-base-mercury-150-classname, ), - 20: ( - hex: $sd-sage-color-base-mercury-20-hex, - code: $sd-sage-color-base-mercury-20-code, - classname: $sd-sage-color-base-mercury-20-classname, + 200: ( + hex: $sd-sage-color-base-mercury-200-hex, + code: $sd-sage-color-base-mercury-200-code, + classname: $sd-sage-color-base-mercury-200-classname, ), - 30: ( - hex: $sd-sage-color-base-mercury-30-hex, - code: $sd-sage-color-base-mercury-30-code, - classname: $sd-sage-color-base-mercury-30-classname, + 300: ( + hex: $sd-sage-color-base-mercury-300-hex, + code: $sd-sage-color-base-mercury-300-code, + classname: $sd-sage-color-base-mercury-300-classname, ), - 40: ( - hex: $sd-sage-color-base-mercury-40-hex, - code: $sd-sage-color-base-mercury-40-code, - classname: $sd-sage-color-base-mercury-40-classname, + 400: ( + hex: $sd-sage-color-base-mercury-400-hex, + code: $sd-sage-color-base-mercury-400-code, + classname: $sd-sage-color-base-mercury-400-classname, ), - 50: ( - hex: $sd-sage-color-base-mercury-50-hex, - code: $sd-sage-color-base-mercury-50-code, - classname: $sd-sage-color-base-mercury-50-classname, + 500: ( + hex: $sd-sage-color-base-mercury-500-hex, + code: $sd-sage-color-base-mercury-500-code, + classname: $sd-sage-color-base-mercury-500-classname, ), - 60: ( - hex: $sd-sage-color-base-mercury-60-hex, - code: $sd-sage-color-base-mercury-60-code, - classname: $sd-sage-color-base-mercury-60-classname, + 600: ( + hex: $sd-sage-color-base-mercury-600-hex, + code: $sd-sage-color-base-mercury-600-code, + classname: $sd-sage-color-base-mercury-600-classname, ), - 70: ( - hex: $sd-sage-color-base-mercury-70-hex, - code: $sd-sage-color-base-mercury-70-code, - classname: $sd-sage-color-base-mercury-70-classname, + 700: ( + hex: $sd-sage-color-base-mercury-700-hex, + code: $sd-sage-color-base-mercury-700-code, + classname: $sd-sage-color-base-mercury-700-classname, ), - 80: ( - hex: $sd-sage-color-base-mercury-80-hex, - code: $sd-sage-color-base-mercury-80-code, - classname: $sd-sage-color-base-mercury-80-classname, + 800: ( + hex: $sd-sage-color-base-mercury-800-hex, + code: $sd-sage-color-base-mercury-800-code, + classname: $sd-sage-color-base-mercury-800-classname, ), - 90: ( - hex: $sd-sage-color-base-mercury-90-hex, - code: $sd-sage-color-base-mercury-90-code, - classname: $sd-sage-color-base-mercury-90-classname, + 900: ( + hex: $sd-sage-color-base-mercury-900-hex, + code: $sd-sage-color-base-mercury-900-code, + classname: $sd-sage-color-base-mercury-900-classname, ), - 95: ( - hex: $sd-sage-color-base-mercury-95-hex, - code: $sd-sage-color-base-mercury-95-code, - classname: $sd-sage-color-base-mercury-95-classname, + 950: ( + hex: $sd-sage-color-base-mercury-950-hex, + code: $sd-sage-color-base-mercury-950-code, + classname: $sd-sage-color-base-mercury-950-classname, ), ), primary: ( @@ -2711,7 +2711,7 @@ $sd-sage-color-core-green: #079250; /// /// color core color-core-mercury /// -$sd-sage-color-core-mercury: #ff3e15; +$sd-sage-color-core-mercury: #fffcfa; /// /// color core color-core-primary /// diff --git a/packages/sage-react/lib/configs/dictionary/tokens.js b/packages/sage-react/lib/configs/dictionary/tokens.js index 1997037f76..2e09f93940 100644 --- a/packages/sage-react/lib/configs/dictionary/tokens.js +++ b/packages/sage-react/lib/configs/dictionary/tokens.js @@ -91,42 +91,42 @@ export const COLOR_BASE_GREEN_900_CLASSNAME = 't-sage--color-green-900'; export const COLOR_BASE_GREEN_950_HEX = '#052e1c'; export const COLOR_BASE_GREEN_950_CODE = 'green-950'; export const COLOR_BASE_GREEN_950_CLASSNAME = 't-sage--color-green-950'; -export const COLOR_BASE_MERCURY_5_HEX = '#fffcfa'; -export const COLOR_BASE_MERCURY_5_CODE = 'mercury-5'; -export const COLOR_BASE_MERCURY_5_CLASSNAME = 't-sage--color-mercury-5'; -export const COLOR_BASE_MERCURY_10_HEX = '#fff3ed'; -export const COLOR_BASE_MERCURY_10_CODE = 'mercury-10'; -export const COLOR_BASE_MERCURY_10_CLASSNAME = 't-sage--color-mercury-10'; -export const COLOR_BASE_MERCURY_15_HEX = '#ffe3d4'; -export const COLOR_BASE_MERCURY_15_CODE = 'mercury-15'; -export const COLOR_BASE_MERCURY_15_CLASSNAME = 't-sage--color-mercury-15'; -export const COLOR_BASE_MERCURY_20_HEX = '#ffc3a8'; -export const COLOR_BASE_MERCURY_20_CODE = 'mercury-20'; -export const COLOR_BASE_MERCURY_20_CLASSNAME = 't-sage--color-mercury-20'; -export const COLOR_BASE_MERCURY_30_HEX = '#ff9970'; -export const COLOR_BASE_MERCURY_30_CODE = 'mercury-30'; -export const COLOR_BASE_MERCURY_30_CLASSNAME = 't-sage--color-mercury-30'; -export const COLOR_BASE_MERCURY_40_HEX = '#ff6337'; -export const COLOR_BASE_MERCURY_40_CODE = 'mercury-40'; -export const COLOR_BASE_MERCURY_40_CLASSNAME = 't-sage--color-mercury-40'; -export const COLOR_BASE_MERCURY_50_HEX = '#ff3e15'; +export const COLOR_BASE_MERCURY_50_HEX = '#fffcfa'; export const COLOR_BASE_MERCURY_50_CODE = 'mercury-50'; export const COLOR_BASE_MERCURY_50_CLASSNAME = 't-sage--color-mercury-50'; -export const COLOR_BASE_MERCURY_60_HEX = '#f11f06'; -export const COLOR_BASE_MERCURY_60_CODE = 'mercury-60'; -export const COLOR_BASE_MERCURY_60_CLASSNAME = 't-sage--color-mercury-60'; -export const COLOR_BASE_MERCURY_70_HEX = '#c81307'; -export const COLOR_BASE_MERCURY_70_CODE = 'mercury-70'; -export const COLOR_BASE_MERCURY_70_CLASSNAME = 't-sage--color-mercury-70'; -export const COLOR_BASE_MERCURY_80_HEX = '#9e110e'; -export const COLOR_BASE_MERCURY_80_CODE = 'mercury-80'; -export const COLOR_BASE_MERCURY_80_CLASSNAME = 't-sage--color-mercury-80'; -export const COLOR_BASE_MERCURY_90_HEX = '#7f120f'; -export const COLOR_BASE_MERCURY_90_CODE = 'mercury-90'; -export const COLOR_BASE_MERCURY_90_CLASSNAME = 't-sage--color-mercury-90'; -export const COLOR_BASE_MERCURY_95_HEX = '#450506'; -export const COLOR_BASE_MERCURY_95_CODE = 'mercury-95'; -export const COLOR_BASE_MERCURY_95_CLASSNAME = 't-sage--color-mercury-95'; +export const COLOR_BASE_MERCURY_100_HEX = '#fff3ed'; +export const COLOR_BASE_MERCURY_100_CODE = 'mercury-100'; +export const COLOR_BASE_MERCURY_100_CLASSNAME = 't-sage--color-mercury-100'; +export const COLOR_BASE_MERCURY_150_HEX = '#ffe3d4'; +export const COLOR_BASE_MERCURY_150_CODE = 'mercury-150'; +export const COLOR_BASE_MERCURY_150_CLASSNAME = 't-sage--color-mercury-150'; +export const COLOR_BASE_MERCURY_200_HEX = '#ffc3a8'; +export const COLOR_BASE_MERCURY_200_CODE = 'mercury-200'; +export const COLOR_BASE_MERCURY_200_CLASSNAME = 't-sage--color-mercury-200'; +export const COLOR_BASE_MERCURY_300_HEX = '#ff9970'; +export const COLOR_BASE_MERCURY_300_CODE = 'mercury-300'; +export const COLOR_BASE_MERCURY_300_CLASSNAME = 't-sage--color-mercury-300'; +export const COLOR_BASE_MERCURY_400_HEX = '#ff6337'; +export const COLOR_BASE_MERCURY_400_CODE = 'mercury-400'; +export const COLOR_BASE_MERCURY_400_CLASSNAME = 't-sage--color-mercury-400'; +export const COLOR_BASE_MERCURY_500_HEX = '#ff3e15'; +export const COLOR_BASE_MERCURY_500_CODE = 'mercury-500'; +export const COLOR_BASE_MERCURY_500_CLASSNAME = 't-sage--color-mercury-500'; +export const COLOR_BASE_MERCURY_600_HEX = '#f11f06'; +export const COLOR_BASE_MERCURY_600_CODE = 'mercury-600'; +export const COLOR_BASE_MERCURY_600_CLASSNAME = 't-sage--color-mercury-600'; +export const COLOR_BASE_MERCURY_700_HEX = '#c81307'; +export const COLOR_BASE_MERCURY_700_CODE = 'mercury-700'; +export const COLOR_BASE_MERCURY_700_CLASSNAME = 't-sage--color-mercury-700'; +export const COLOR_BASE_MERCURY_800_HEX = '#9e110e'; +export const COLOR_BASE_MERCURY_800_CODE = 'mercury-800'; +export const COLOR_BASE_MERCURY_800_CLASSNAME = 't-sage--color-mercury-800'; +export const COLOR_BASE_MERCURY_900_HEX = '#7f120f'; +export const COLOR_BASE_MERCURY_900_CODE = 'mercury-900'; +export const COLOR_BASE_MERCURY_900_CLASSNAME = 't-sage--color-mercury-900'; +export const COLOR_BASE_MERCURY_950_HEX = '#450506'; +export const COLOR_BASE_MERCURY_950_CODE = 'mercury-950'; +export const COLOR_BASE_MERCURY_950_CLASSNAME = 't-sage--color-mercury-950'; 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'; @@ -536,65 +536,65 @@ export const COLOR = { }, }, MERCURY: { - 5: { - HEX: COLOR_BASE_MERCURY_5_HEX, - CODE: COLOR_BASE_MERCURY_5_CODE, - CLASSNAME: COLOR_BASE_MERCURY_5_CLASSNAME, + 50: { + HEX: COLOR_BASE_MERCURY_50_HEX, + CODE: COLOR_BASE_MERCURY_50_CODE, + CLASSNAME: COLOR_BASE_MERCURY_50_CLASSNAME, }, - 10: { - HEX: COLOR_BASE_MERCURY_10_HEX, - CODE: COLOR_BASE_MERCURY_10_CODE, - CLASSNAME: COLOR_BASE_MERCURY_10_CLASSNAME, + 100: { + HEX: COLOR_BASE_MERCURY_100_HEX, + CODE: COLOR_BASE_MERCURY_100_CODE, + CLASSNAME: COLOR_BASE_MERCURY_100_CLASSNAME, }, - 15: { - HEX: COLOR_BASE_MERCURY_15_HEX, - CODE: COLOR_BASE_MERCURY_15_CODE, - CLASSNAME: COLOR_BASE_MERCURY_15_CLASSNAME, + 150: { + HEX: COLOR_BASE_MERCURY_150_HEX, + CODE: COLOR_BASE_MERCURY_150_CODE, + CLASSNAME: COLOR_BASE_MERCURY_150_CLASSNAME, }, - 20: { - HEX: COLOR_BASE_MERCURY_20_HEX, - CODE: COLOR_BASE_MERCURY_20_CODE, - CLASSNAME: COLOR_BASE_MERCURY_20_CLASSNAME, + 200: { + HEX: COLOR_BASE_MERCURY_200_HEX, + CODE: COLOR_BASE_MERCURY_200_CODE, + CLASSNAME: COLOR_BASE_MERCURY_200_CLASSNAME, }, - 30: { - HEX: COLOR_BASE_MERCURY_30_HEX, - CODE: COLOR_BASE_MERCURY_30_CODE, - CLASSNAME: COLOR_BASE_MERCURY_30_CLASSNAME, + 300: { + HEX: COLOR_BASE_MERCURY_300_HEX, + CODE: COLOR_BASE_MERCURY_300_CODE, + CLASSNAME: COLOR_BASE_MERCURY_300_CLASSNAME, }, - 40: { - HEX: COLOR_BASE_MERCURY_40_HEX, - CODE: COLOR_BASE_MERCURY_40_CODE, - CLASSNAME: COLOR_BASE_MERCURY_40_CLASSNAME, + 400: { + HEX: COLOR_BASE_MERCURY_400_HEX, + CODE: COLOR_BASE_MERCURY_400_CODE, + CLASSNAME: COLOR_BASE_MERCURY_400_CLASSNAME, }, - 50: { - HEX: COLOR_BASE_MERCURY_50_HEX, - CODE: COLOR_BASE_MERCURY_50_CODE, - CLASSNAME: COLOR_BASE_MERCURY_50_CLASSNAME, + 500: { + HEX: COLOR_BASE_MERCURY_500_HEX, + CODE: COLOR_BASE_MERCURY_500_CODE, + CLASSNAME: COLOR_BASE_MERCURY_500_CLASSNAME, }, - 60: { - HEX: COLOR_BASE_MERCURY_60_HEX, - CODE: COLOR_BASE_MERCURY_60_CODE, - CLASSNAME: COLOR_BASE_MERCURY_60_CLASSNAME, + 600: { + HEX: COLOR_BASE_MERCURY_600_HEX, + CODE: COLOR_BASE_MERCURY_600_CODE, + CLASSNAME: COLOR_BASE_MERCURY_600_CLASSNAME, }, - 70: { - HEX: COLOR_BASE_MERCURY_70_HEX, - CODE: COLOR_BASE_MERCURY_70_CODE, - CLASSNAME: COLOR_BASE_MERCURY_70_CLASSNAME, + 700: { + HEX: COLOR_BASE_MERCURY_700_HEX, + CODE: COLOR_BASE_MERCURY_700_CODE, + CLASSNAME: COLOR_BASE_MERCURY_700_CLASSNAME, }, - 80: { - HEX: COLOR_BASE_MERCURY_80_HEX, - CODE: COLOR_BASE_MERCURY_80_CODE, - CLASSNAME: COLOR_BASE_MERCURY_80_CLASSNAME, + 800: { + HEX: COLOR_BASE_MERCURY_800_HEX, + CODE: COLOR_BASE_MERCURY_800_CODE, + CLASSNAME: COLOR_BASE_MERCURY_800_CLASSNAME, }, - 90: { - HEX: COLOR_BASE_MERCURY_90_HEX, - CODE: COLOR_BASE_MERCURY_90_CODE, - CLASSNAME: COLOR_BASE_MERCURY_90_CLASSNAME, + 900: { + HEX: COLOR_BASE_MERCURY_900_HEX, + CODE: COLOR_BASE_MERCURY_900_CODE, + CLASSNAME: COLOR_BASE_MERCURY_900_CLASSNAME, }, - 95: { - HEX: COLOR_BASE_MERCURY_95_HEX, - CODE: COLOR_BASE_MERCURY_95_CODE, - CLASSNAME: COLOR_BASE_MERCURY_95_CLASSNAME, + 950: { + HEX: COLOR_BASE_MERCURY_950_HEX, + CODE: COLOR_BASE_MERCURY_950_CODE, + CLASSNAME: COLOR_BASE_MERCURY_950_CLASSNAME, }, }, PRIMARY: { @@ -1299,7 +1299,7 @@ export const COLOR_COMBOS = { // export const COLOR_CORE_BLUE = '#2463eb'; export const COLOR_CORE_GREEN = '#079250'; -export const COLOR_CORE_MERCURY = '#ff3e15'; +export const COLOR_CORE_MERCURY = '#fffcfa'; export const COLOR_CORE_PRIMARY = '#2463eb'; export const COLOR_CORE_SAGE = '#079250'; export const COLOR_CORE_YELLOW = '#fdbb21'; diff --git a/style-dictionary/tokens/color/base.json b/style-dictionary/tokens/color/base.json index 6a857f4216..2a280dbd8a 100644 --- a/style-dictionary/tokens/color/base.json +++ b/style-dictionary/tokens/color/base.json @@ -126,65 +126,65 @@ } }, "mercury": { - "5": { + "50": { "hex": { "value": "#fffcfa" }, - "code": { "value": "mercury-5" }, - "classname": { "value": "t-sage--color-mercury-5" } + "code": { "value": "mercury-50" }, + "classname": { "value": "t-sage--color-mercury-50" } }, - "10": { + "100": { "hex": { "value": "#fff3ed" }, - "code": { "value": "mercury-10" }, - "classname": { "value": "t-sage--color-mercury-10" } + "code": { "value": "mercury-100" }, + "classname": { "value": "t-sage--color-mercury-100" } }, - "15": { + "150": { "hex": { "value": "#ffe3d4" }, - "code": { "value": "mercury-15" }, - "classname": { "value": "t-sage--color-mercury-15" } + "code": { "value": "mercury-150" }, + "classname": { "value": "t-sage--color-mercury-150" } }, - "20": { + "200": { "hex": { "value": "#ffc3a8" }, - "code": { "value": "mercury-20" }, - "classname": { "value": "t-sage--color-mercury-20" } + "code": { "value": "mercury-200" }, + "classname": { "value": "t-sage--color-mercury-200" } }, - "30": { + "300": { "hex": { "value": "#ff9970" }, - "code": { "value": "mercury-30" }, - "classname": { "value": "t-sage--color-mercury-30" } + "code": { "value": "mercury-300" }, + "classname": { "value": "t-sage--color-mercury-300" } }, - "40": { + "400": { "hex": { "value": "#ff6337" }, - "code": { "value": "mercury-40" }, - "classname": { "value": "t-sage--color-mercury-40" } + "code": { "value": "mercury-400" }, + "classname": { "value": "t-sage--color-mercury-400" } }, - "50": { + "500": { "hex": { "value": "#ff3e15" }, - "code": { "value": "mercury-50" }, - "classname": { "value": "t-sage--color-mercury-50" } + "code": { "value": "mercury-500" }, + "classname": { "value": "t-sage--color-mercury-500" } }, - "60": { + "600": { "hex": { "value": "#f11f06" }, - "code": { "value": "mercury-60" }, - "classname": { "value": "t-sage--color-mercury-60" } + "code": { "value": "mercury-600" }, + "classname": { "value": "t-sage--color-mercury-600" } }, - "70": { + "700": { "hex": { "value": "#c81307" }, - "code": { "value": "mercury-70" }, - "classname": { "value": "t-sage--color-mercury-70" } + "code": { "value": "mercury-700" }, + "classname": { "value": "t-sage--color-mercury-700" } }, - "80": { + "800": { "hex": { "value": "#9e110e" }, - "code": { "value": "mercury-80" }, - "classname": { "value": "t-sage--color-mercury-80" } + "code": { "value": "mercury-800" }, + "classname": { "value": "t-sage--color-mercury-800" } }, - "90": { + "900": { "hex": { "value": "#7f120f" }, - "code": { "value": "mercury-90" }, - "classname": { "value": "t-sage--color-mercury-90" } + "code": { "value": "mercury-900" }, + "classname": { "value": "t-sage--color-mercury-900" } }, - "95": { + "950": { "hex": { "value": "#450506" }, - "code": { "value": "mercury-95" }, - "classname": { "value": "t-sage--color-mercury-95" } + "code": { "value": "mercury-950" }, + "classname": { "value": "t-sage--color-mercury-950" } } }, "primary": { @@ -392,27 +392,27 @@ }, "orange": { "100": { - "hex": { "value": "{color.base.mercury.15.hex.value}" }, + "hex": { "value": "{color.base.mercury.150.hex.value}" }, "code": { "value": "orange-100" }, "classname": { "value": "t-sage--color-orange-100" } }, "200": { - "hex": { "value": "{color.base.mercury.30.hex.value}" }, + "hex": { "value": "{color.base.mercury.300.hex.value}" }, "code": { "value": "orange-200" }, "classname": { "value": "t-sage--color-orange-200" } }, "300": { - "hex": { "value": "{color.base.mercury.50.hex.value}" }, + "hex": { "value": "{color.base.mercury.500.hex.value}" }, "code": { "value": "orange-300" }, "classname": { "value": "t-sage--color-orange-300" } }, "400": { - "hex": { "value": "{color.base.mercury.80.hex.value}" }, + "hex": { "value": "{color.base.mercury.800.hex.value}" }, "code": { "value": "orange-400" }, "classname": { "value": "t-sage--color-orange-400" } }, "500": { - "hex": { "value": "{color.base.mercury.95.hex.value}" }, + "hex": { "value": "{color.base.mercury.950.hex.value}" }, "code": { "value": "orange-500" }, "classname": { "value": "t-sage--color-orange-500" } } From 898a1d00c6280047c576e3c2bcb8b207d2aa1002 Mon Sep 17 00:00:00 2001 From: Quinton Jason Date: Tue, 20 Aug 2024 17:06:19 -0500 Subject: [PATCH 10/31] fix: add 0 to yellow color token names --- .../stylesheets/docs/_colors.scss | 2 +- .../stylesheets/docs/_rouge_theme.scss | 4 +- .../app/sage_tokens/sage_dictionary.rb | 150 ++++----- .../lib/stylesheets/components/_alert.scss | 8 +- .../lib/stylesheets/components/_avatar.scss | 4 +- .../lib/stylesheets/components/_banner.scss | 2 +- .../lib/stylesheets/components/_button.scss | 4 +- .../lib/stylesheets/dictionary/_tokens.scss | 291 +++++++----------- .../lib/configs/dictionary/tokens.js | 150 ++++----- style-dictionary/tokens/color/base.json | 95 +++--- style-dictionary/tokens/color/combos.json | 18 +- style-dictionary/tokens/color/core.json | 4 +- 12 files changed, 271 insertions(+), 461 deletions(-) diff --git a/docs/lib/sage-frontend/stylesheets/docs/_colors.scss b/docs/lib/sage-frontend/stylesheets/docs/_colors.scss index bfa927a122..8bca6c9bce 100644 --- a/docs/lib/sage-frontend/stylesheets/docs/_colors.scss +++ b/docs/lib/sage-frontend/stylesheets/docs/_colors.scss @@ -85,7 +85,7 @@ @else if ($name == green) { color: sage-color(green, 600); } - @else if ($name == yellow and $value > 30) { + @else if ($name == yellow and $value > 300) { color: sage-color(white); } @else if (lightness($hex) < 65) { diff --git a/docs/lib/sage-frontend/stylesheets/docs/_rouge_theme.scss b/docs/lib/sage-frontend/stylesheets/docs/_rouge_theme.scss index 669668e732..3c62618584 100644 --- a/docs/lib/sage-frontend/stylesheets/docs/_rouge_theme.scss +++ b/docs/lib/sage-frontend/stylesheets/docs/_rouge_theme.scss @@ -31,9 +31,9 @@ $-color-26: sage-color(orange, 200); // Preproc comment $-color-7: sage-color(charcoal, 300); // Highlight? -$-color-2: sage-color(yellow, 100); +$-color-2: sage-color(yellow, 150); // Name label -$-color-22: sage-color(yellow, 300); +$-color-22: sage-color(yellow, 400); // Keywords and built ins, tag names $-color-5: sage-color(sage, 300); // Generic inserted? 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 ba8a768eac..d95d938c82 100644 --- a/docs/lib/sage_rails/app/sage_tokens/sage_dictionary.rb +++ b/docs/lib/sage_rails/app/sage_tokens/sage_dictionary.rb @@ -159,57 +159,42 @@ module SageDictionary SD_SAGE_COLOR_BASE_SAGE_500_HEX = "#052e1c" SD_SAGE_COLOR_BASE_SAGE_500_CODE = "sage-500" SD_SAGE_COLOR_BASE_SAGE_500_CLASSNAME = "t-sage--color-sage-500" - SD_SAGE_COLOR_BASE_YELLOW_5_HEX = "#fffefa" - SD_SAGE_COLOR_BASE_YELLOW_5_CODE = "yellow-5" - SD_SAGE_COLOR_BASE_YELLOW_5_CLASSNAME = "t-sage--color-yellow-5" - SD_SAGE_COLOR_BASE_YELLOW_10_HEX = "#fffbeb" - SD_SAGE_COLOR_BASE_YELLOW_10_CODE = "yellow-10" - SD_SAGE_COLOR_BASE_YELLOW_10_CLASSNAME = "t-sage--color-yellow-10" - SD_SAGE_COLOR_BASE_YELLOW_15_HEX = "#fff3c6" - SD_SAGE_COLOR_BASE_YELLOW_15_CODE = "yellow-15" - SD_SAGE_COLOR_BASE_YELLOW_15_CLASSNAME = "t-sage--color-yellow-15" - SD_SAGE_COLOR_BASE_YELLOW_20_HEX = "#fee589" - SD_SAGE_COLOR_BASE_YELLOW_20_CODE = "yellow-20" - SD_SAGE_COLOR_BASE_YELLOW_20_CLASSNAME = "t-sage--color-yellow-20" - SD_SAGE_COLOR_BASE_YELLOW_30_HEX = "#fed04b" - SD_SAGE_COLOR_BASE_YELLOW_30_CODE = "yellow-30" - SD_SAGE_COLOR_BASE_YELLOW_30_CLASSNAME = "t-sage--color-yellow-30" - SD_SAGE_COLOR_BASE_YELLOW_40_HEX = "#fdbb21" - SD_SAGE_COLOR_BASE_YELLOW_40_CODE = "yellow-40" - SD_SAGE_COLOR_BASE_YELLOW_40_CLASSNAME = "t-sage--color-yellow-40" - SD_SAGE_COLOR_BASE_YELLOW_50_HEX = "#f79a0b" + SD_SAGE_COLOR_BASE_YELLOW_50_HEX = "#fffefa" SD_SAGE_COLOR_BASE_YELLOW_50_CODE = "yellow-50" SD_SAGE_COLOR_BASE_YELLOW_50_CLASSNAME = "t-sage--color-yellow-50" - SD_SAGE_COLOR_BASE_YELLOW_60_HEX = "#db7303" - SD_SAGE_COLOR_BASE_YELLOW_60_CODE = "yellow-60" - SD_SAGE_COLOR_BASE_YELLOW_60_CLASSNAME = "t-sage--color-yellow-60" - SD_SAGE_COLOR_BASE_YELLOW_70_HEX = "#b64f06" - SD_SAGE_COLOR_BASE_YELLOW_70_CODE = "yellow-70" - SD_SAGE_COLOR_BASE_YELLOW_70_CLASSNAME = "t-sage--color-yellow-70" - SD_SAGE_COLOR_BASE_YELLOW_80_HEX = "#943d0e" - SD_SAGE_COLOR_BASE_YELLOW_80_CODE = "yellow-80" - SD_SAGE_COLOR_BASE_YELLOW_80_CLASSNAME = "t-sage--color-yellow-80" - SD_SAGE_COLOR_BASE_YELLOW_90_HEX = "#79330e" - SD_SAGE_COLOR_BASE_YELLOW_90_CODE = "yellow-90" - SD_SAGE_COLOR_BASE_YELLOW_90_CLASSNAME = "t-sage--color-yellow-90" - SD_SAGE_COLOR_BASE_YELLOW_95_HEX = "#451902" - SD_SAGE_COLOR_BASE_YELLOW_95_CODE = "yellow-95" - SD_SAGE_COLOR_BASE_YELLOW_95_CLASSNAME = "t-sage--color-yellow-95" - SD_SAGE_COLOR_BASE_YELLOW_100_HEX = "#fff3c6" + SD_SAGE_COLOR_BASE_YELLOW_100_HEX = "#fffbeb" SD_SAGE_COLOR_BASE_YELLOW_100_CODE = "yellow-100" SD_SAGE_COLOR_BASE_YELLOW_100_CLASSNAME = "t-sage--color-yellow-100" - SD_SAGE_COLOR_BASE_YELLOW_200_HEX = "#fed04b" + SD_SAGE_COLOR_BASE_YELLOW_150_HEX = "#fff3c6" + SD_SAGE_COLOR_BASE_YELLOW_150_CODE = "yellow-150" + SD_SAGE_COLOR_BASE_YELLOW_150_CLASSNAME = "t-sage--color-yellow-150" + SD_SAGE_COLOR_BASE_YELLOW_200_HEX = "#fee589" SD_SAGE_COLOR_BASE_YELLOW_200_CODE = "yellow-200" SD_SAGE_COLOR_BASE_YELLOW_200_CLASSNAME = "t-sage--color-yellow-200" - SD_SAGE_COLOR_BASE_YELLOW_300_HEX = "#fdbb21" + SD_SAGE_COLOR_BASE_YELLOW_300_HEX = "#fed04b" SD_SAGE_COLOR_BASE_YELLOW_300_CODE = "yellow-300" SD_SAGE_COLOR_BASE_YELLOW_300_CLASSNAME = "t-sage--color-yellow-300" - SD_SAGE_COLOR_BASE_YELLOW_400_HEX = "#db7303" + SD_SAGE_COLOR_BASE_YELLOW_400_HEX = "#fdbb21" SD_SAGE_COLOR_BASE_YELLOW_400_CODE = "yellow-400" SD_SAGE_COLOR_BASE_YELLOW_400_CLASSNAME = "t-sage--color-yellow-400" - SD_SAGE_COLOR_BASE_YELLOW_500_HEX = "#451902" + SD_SAGE_COLOR_BASE_YELLOW_500_HEX = "#f79a0b" SD_SAGE_COLOR_BASE_YELLOW_500_CODE = "yellow-500" SD_SAGE_COLOR_BASE_YELLOW_500_CLASSNAME = "t-sage--color-yellow-500" + SD_SAGE_COLOR_BASE_YELLOW_600_HEX = "#db7303" + SD_SAGE_COLOR_BASE_YELLOW_600_CODE = "yellow-60" + SD_SAGE_COLOR_BASE_YELLOW_600_CLASSNAME = "t-sage--color-yellow-600" + SD_SAGE_COLOR_BASE_YELLOW_700_HEX = "#b64f06" + SD_SAGE_COLOR_BASE_YELLOW_700_CODE = "yellow-700" + SD_SAGE_COLOR_BASE_YELLOW_700_CLASSNAME = "t-sage--color-yellow-700" + SD_SAGE_COLOR_BASE_YELLOW_800_HEX = "#943d0e" + SD_SAGE_COLOR_BASE_YELLOW_800_CODE = "yellow-800" + SD_SAGE_COLOR_BASE_YELLOW_800_CLASSNAME = "t-sage--color-yellow-800" + SD_SAGE_COLOR_BASE_YELLOW_900_HEX = "#79330e" + SD_SAGE_COLOR_BASE_YELLOW_900_CODE = "yellow-900" + SD_SAGE_COLOR_BASE_YELLOW_900_CLASSNAME = "t-sage--color-yellow-900" + SD_SAGE_COLOR_BASE_YELLOW_950_HEX = "#451902" + SD_SAGE_COLOR_BASE_YELLOW_950_CODE = "yellow-950" + SD_SAGE_COLOR_BASE_YELLOW_950_CLASSNAME = "t-sage--color-yellow-950" SD_SAGE_COLOR_BASE_RED_50_HEX = "#fffafa" SD_SAGE_COLOR_BASE_RED_50_CODE = "red-50" SD_SAGE_COLOR_BASE_RED_50_CLASSNAME = "t-sage--color-red-50" @@ -654,71 +639,21 @@ module SageDictionary }, }, "YELLOW": { - "5": { - "HEX": SD_SAGE_COLOR_BASE_YELLOW_5_HEX, - "CODE": SD_SAGE_COLOR_BASE_YELLOW_5_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_5_CLASSNAME, - }, - "10": { - "HEX": SD_SAGE_COLOR_BASE_YELLOW_10_HEX, - "CODE": SD_SAGE_COLOR_BASE_YELLOW_10_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_10_CLASSNAME, - }, - "15": { - "HEX": SD_SAGE_COLOR_BASE_YELLOW_15_HEX, - "CODE": SD_SAGE_COLOR_BASE_YELLOW_15_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_15_CLASSNAME, - }, - "20": { - "HEX": SD_SAGE_COLOR_BASE_YELLOW_20_HEX, - "CODE": SD_SAGE_COLOR_BASE_YELLOW_20_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_20_CLASSNAME, - }, - "30": { - "HEX": SD_SAGE_COLOR_BASE_YELLOW_30_HEX, - "CODE": SD_SAGE_COLOR_BASE_YELLOW_30_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_30_CLASSNAME, - }, - "40": { - "HEX": SD_SAGE_COLOR_BASE_YELLOW_40_HEX, - "CODE": SD_SAGE_COLOR_BASE_YELLOW_40_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_40_CLASSNAME, - }, "50": { "HEX": SD_SAGE_COLOR_BASE_YELLOW_50_HEX, "CODE": SD_SAGE_COLOR_BASE_YELLOW_50_CODE, "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_50_CLASSNAME, }, - "60": { - "HEX": SD_SAGE_COLOR_BASE_YELLOW_60_HEX, - "CODE": SD_SAGE_COLOR_BASE_YELLOW_60_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_60_CLASSNAME, - }, - "70": { - "HEX": SD_SAGE_COLOR_BASE_YELLOW_70_HEX, - "CODE": SD_SAGE_COLOR_BASE_YELLOW_70_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_70_CLASSNAME, - }, - "80": { - "HEX": SD_SAGE_COLOR_BASE_YELLOW_80_HEX, - "CODE": SD_SAGE_COLOR_BASE_YELLOW_80_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_80_CLASSNAME, - }, - "90": { - "HEX": SD_SAGE_COLOR_BASE_YELLOW_90_HEX, - "CODE": SD_SAGE_COLOR_BASE_YELLOW_90_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_90_CLASSNAME, - }, - "95": { - "HEX": SD_SAGE_COLOR_BASE_YELLOW_95_HEX, - "CODE": SD_SAGE_COLOR_BASE_YELLOW_95_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_95_CLASSNAME, - }, "100": { "HEX": SD_SAGE_COLOR_BASE_YELLOW_100_HEX, "CODE": SD_SAGE_COLOR_BASE_YELLOW_100_CODE, "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_100_CLASSNAME, }, + "150": { + "HEX": SD_SAGE_COLOR_BASE_YELLOW_150_HEX, + "CODE": SD_SAGE_COLOR_BASE_YELLOW_150_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_150_CLASSNAME, + }, "200": { "HEX": SD_SAGE_COLOR_BASE_YELLOW_200_HEX, "CODE": SD_SAGE_COLOR_BASE_YELLOW_200_CODE, @@ -739,6 +674,31 @@ module SageDictionary "CODE": SD_SAGE_COLOR_BASE_YELLOW_500_CODE, "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_500_CLASSNAME, }, + "600": { + "HEX": SD_SAGE_COLOR_BASE_YELLOW_600_HEX, + "CODE": SD_SAGE_COLOR_BASE_YELLOW_600_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_600_CLASSNAME, + }, + "700": { + "HEX": SD_SAGE_COLOR_BASE_YELLOW_700_HEX, + "CODE": SD_SAGE_COLOR_BASE_YELLOW_700_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_700_CLASSNAME, + }, + "800": { + "HEX": SD_SAGE_COLOR_BASE_YELLOW_800_HEX, + "CODE": SD_SAGE_COLOR_BASE_YELLOW_800_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_800_CLASSNAME, + }, + "900": { + "HEX": SD_SAGE_COLOR_BASE_YELLOW_900_HEX, + "CODE": SD_SAGE_COLOR_BASE_YELLOW_900_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_900_CLASSNAME, + }, + "950": { + "HEX": SD_SAGE_COLOR_BASE_YELLOW_950_HEX, + "CODE": SD_SAGE_COLOR_BASE_YELLOW_950_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_950_CLASSNAME, + }, }, "RED": { "50": { @@ -1301,7 +1261,7 @@ module SageDictionary # SD_SAGE_COLOR_CORE_BLUE = "#2463eb" SD_SAGE_COLOR_CORE_GREEN = "#079250" - SD_SAGE_COLOR_CORE_MERCURY = "#fffcfa" + SD_SAGE_COLOR_CORE_MERCURY = "#ff3e15" SD_SAGE_COLOR_CORE_PRIMARY = "#2463eb" SD_SAGE_COLOR_CORE_SAGE = "#079250" SD_SAGE_COLOR_CORE_YELLOW = "#fdbb21" diff --git a/packages/sage-assets/lib/stylesheets/components/_alert.scss b/packages/sage-assets/lib/stylesheets/components/_alert.scss index 99e492ea97..7ede7bcc12 100644 --- a/packages/sage-assets/lib/stylesheets/components/_alert.scss +++ b/packages/sage-assets/lib/stylesheets/components/_alert.scss @@ -14,8 +14,8 @@ $-alert-background-colors: ( info: sage-color(primary, 100), published: sage-color(sage, 100), success: sage-color(sage, 100), - warning: sage-color(yellow, 100), - approaching: sage-color(yellow, 100), + warning: sage-color(yellow, 150), + approaching: sage-color(yellow, 150), reached: sage-color(orange, 100), exceeded: sage-color(red, 150), danger: sage-color(red, 150), @@ -27,8 +27,8 @@ $-alert-icon-colors: ( info: sage-color(primary, 300), published: sage-color(sage, 300), success: sage-color(sage, 300), - warning: sage-color(yellow, 400), - approaching: sage-color(yellow, 400), + warning: sage-color(yellow, 600), + approaching: sage-color(yellow, 600), reached: sage-color(orange, 400), exceeded: sage-color(red, 500), danger: sage-color(red, 500), diff --git a/packages/sage-assets/lib/stylesheets/components/_avatar.scss b/packages/sage-assets/lib/stylesheets/components/_avatar.scss index b05cab2b3e..0d276dca1f 100644 --- a/packages/sage-assets/lib/stylesheets/components/_avatar.scss +++ b/packages/sage-assets/lib/stylesheets/components/_avatar.scss @@ -25,8 +25,8 @@ $-avatar-ring-colors: ( bg: sage-color(sage, 100) ), yellow: ( - main: sage-color(yellow, 300), - bg: sage-color(yellow, 100) + main: sage-color(yellow, 400), + bg: sage-color(yellow, 150) ), orange: ( main: sage-color(orange, 300), diff --git a/packages/sage-assets/lib/stylesheets/components/_banner.scss b/packages/sage-assets/lib/stylesheets/components/_banner.scss index 107d4aac4f..e82edbf80f 100644 --- a/packages/sage-assets/lib/stylesheets/components/_banner.scss +++ b/packages/sage-assets/lib/stylesheets/components/_banner.scss @@ -20,7 +20,7 @@ $-banner-colors: ( icon: "info-circle", ), warning: ( - background: sage-color(yellow, 200), + background: sage-color(yellow, 300), text: sage-color(charcoal, 500), text-hover: sage-color(charcoal, 300), icon: "warning", diff --git a/packages/sage-assets/lib/stylesheets/components/_button.scss b/packages/sage-assets/lib/stylesheets/components/_button.scss index 317a400931..3193e1c6a9 100644 --- a/packages/sage-assets/lib/stylesheets/components/_button.scss +++ b/packages/sage-assets/lib/stylesheets/components/_button.scss @@ -154,8 +154,8 @@ $-alert-close-btn-background-colors: ( info: sage-color(primary, 200), published: sage-color(sage, 200), success: sage-color(sage, 200), - warning: sage-color(yellow, 200), - approaching: sage-color(yellow, 200), + warning: sage-color(yellow, 300), + approaching: sage-color(yellow, 300), reached: sage-color(orange, 200), exceeded: sage-color(red, 300), danger: sage-color(red, 300), diff --git a/packages/sage-assets/lib/stylesheets/dictionary/_tokens.scss b/packages/sage-assets/lib/stylesheets/dictionary/_tokens.scss index 23276acd23..e7ebd896f7 100644 --- a/packages/sage-assets/lib/stylesheets/dictionary/_tokens.scss +++ b/packages/sage-assets/lib/stylesheets/dictionary/_tokens.scss @@ -574,209 +574,149 @@ $sd-sage-color-base-sage-500-code: "sage-500"; /// $sd-sage-color-base-sage-500-classname: "t-sage--color-sage-500"; /// -/// color color-base-yellow-5-hex -/// -$sd-sage-color-base-yellow-5-hex: #fffefa; -/// -/// color color-base-yellow-5-code -/// -$sd-sage-color-base-yellow-5-code: "yellow-5"; -/// -/// color color-base-yellow-5-classname -/// -$sd-sage-color-base-yellow-5-classname: "t-sage--color-yellow-5"; -/// -/// color color-base-yellow-10-hex -/// -$sd-sage-color-base-yellow-10-hex: #fffbeb; -/// -/// color color-base-yellow-10-code -/// -$sd-sage-color-base-yellow-10-code: "yellow-10"; -/// -/// color color-base-yellow-10-classname -/// -$sd-sage-color-base-yellow-10-classname: "t-sage--color-yellow-10"; -/// -/// color color-base-yellow-15-hex -/// -$sd-sage-color-base-yellow-15-hex: #fff3c6; -/// -/// color color-base-yellow-15-code -/// -$sd-sage-color-base-yellow-15-code: "yellow-15"; -/// -/// color color-base-yellow-15-classname -/// -$sd-sage-color-base-yellow-15-classname: "t-sage--color-yellow-15"; -/// -/// color color-base-yellow-20-hex -/// -$sd-sage-color-base-yellow-20-hex: #fee589; -/// -/// color color-base-yellow-20-code -/// -$sd-sage-color-base-yellow-20-code: "yellow-20"; -/// -/// color color-base-yellow-20-classname -/// -$sd-sage-color-base-yellow-20-classname: "t-sage--color-yellow-20"; -/// -/// color color-base-yellow-30-hex -/// -$sd-sage-color-base-yellow-30-hex: #fed04b; -/// -/// color color-base-yellow-30-code -/// -$sd-sage-color-base-yellow-30-code: "yellow-30"; -/// -/// color color-base-yellow-30-classname -/// -$sd-sage-color-base-yellow-30-classname: "t-sage--color-yellow-30"; -/// -/// color color-base-yellow-40-hex +/// color color-base-yellow-50-hex /// -$sd-sage-color-base-yellow-40-hex: #fdbb21; +$sd-sage-color-base-yellow-50-hex: #fffefa; /// -/// color color-base-yellow-40-code +/// color color-base-yellow-50-code /// -$sd-sage-color-base-yellow-40-code: "yellow-40"; +$sd-sage-color-base-yellow-50-code: "yellow-50"; /// -/// color color-base-yellow-40-classname +/// color color-base-yellow-50-classname /// -$sd-sage-color-base-yellow-40-classname: "t-sage--color-yellow-40"; +$sd-sage-color-base-yellow-50-classname: "t-sage--color-yellow-50"; /// -/// color color-base-yellow-50-hex +/// color color-base-yellow-100-hex /// -$sd-sage-color-base-yellow-50-hex: #f79a0b; +$sd-sage-color-base-yellow-100-hex: #fffbeb; /// -/// color color-base-yellow-50-code +/// color color-base-yellow-100-code /// -$sd-sage-color-base-yellow-50-code: "yellow-50"; +$sd-sage-color-base-yellow-100-code: "yellow-100"; /// -/// color color-base-yellow-50-classname +/// color color-base-yellow-100-classname /// -$sd-sage-color-base-yellow-50-classname: "t-sage--color-yellow-50"; +$sd-sage-color-base-yellow-100-classname: "t-sage--color-yellow-100"; /// -/// color color-base-yellow-60-hex +/// color color-base-yellow-150-hex /// -$sd-sage-color-base-yellow-60-hex: #db7303; +$sd-sage-color-base-yellow-150-hex: #fff3c6; /// -/// color color-base-yellow-60-code +/// color color-base-yellow-150-code /// -$sd-sage-color-base-yellow-60-code: "yellow-60"; +$sd-sage-color-base-yellow-150-code: "yellow-150"; /// -/// color color-base-yellow-60-classname +/// color color-base-yellow-150-classname /// -$sd-sage-color-base-yellow-60-classname: "t-sage--color-yellow-60"; +$sd-sage-color-base-yellow-150-classname: "t-sage--color-yellow-150"; /// -/// color color-base-yellow-70-hex +/// color color-base-yellow-200-hex /// -$sd-sage-color-base-yellow-70-hex: #b64f06; +$sd-sage-color-base-yellow-200-hex: #fee589; /// -/// color color-base-yellow-70-code +/// color color-base-yellow-200-code /// -$sd-sage-color-base-yellow-70-code: "yellow-70"; +$sd-sage-color-base-yellow-200-code: "yellow-200"; /// -/// color color-base-yellow-70-classname +/// color color-base-yellow-200-classname /// -$sd-sage-color-base-yellow-70-classname: "t-sage--color-yellow-70"; +$sd-sage-color-base-yellow-200-classname: "t-sage--color-yellow-200"; /// -/// color color-base-yellow-80-hex +/// color color-base-yellow-300-hex /// -$sd-sage-color-base-yellow-80-hex: #943d0e; +$sd-sage-color-base-yellow-300-hex: #fed04b; /// -/// color color-base-yellow-80-code +/// color color-base-yellow-300-code /// -$sd-sage-color-base-yellow-80-code: "yellow-80"; +$sd-sage-color-base-yellow-300-code: "yellow-300"; /// -/// color color-base-yellow-80-classname +/// color color-base-yellow-300-classname /// -$sd-sage-color-base-yellow-80-classname: "t-sage--color-yellow-80"; +$sd-sage-color-base-yellow-300-classname: "t-sage--color-yellow-300"; /// -/// color color-base-yellow-90-hex +/// color color-base-yellow-400-hex /// -$sd-sage-color-base-yellow-90-hex: #79330e; +$sd-sage-color-base-yellow-400-hex: #fdbb21; /// -/// color color-base-yellow-90-code +/// color color-base-yellow-400-code /// -$sd-sage-color-base-yellow-90-code: "yellow-90"; +$sd-sage-color-base-yellow-400-code: "yellow-400"; /// -/// color color-base-yellow-90-classname +/// color color-base-yellow-400-classname /// -$sd-sage-color-base-yellow-90-classname: "t-sage--color-yellow-90"; +$sd-sage-color-base-yellow-400-classname: "t-sage--color-yellow-400"; /// -/// color color-base-yellow-95-hex +/// color color-base-yellow-500-hex /// -$sd-sage-color-base-yellow-95-hex: #451902; +$sd-sage-color-base-yellow-500-hex: #f79a0b; /// -/// color color-base-yellow-95-code +/// color color-base-yellow-500-code /// -$sd-sage-color-base-yellow-95-code: "yellow-95"; +$sd-sage-color-base-yellow-500-code: "yellow-500"; /// -/// color color-base-yellow-95-classname +/// color color-base-yellow-500-classname /// -$sd-sage-color-base-yellow-95-classname: "t-sage--color-yellow-95"; +$sd-sage-color-base-yellow-500-classname: "t-sage--color-yellow-500"; /// -/// color color-base-yellow-100-hex +/// color color-base-yellow-600-hex /// -$sd-sage-color-base-yellow-100-hex: #fff3c6; +$sd-sage-color-base-yellow-600-hex: #db7303; /// -/// color color-base-yellow-100-code +/// color color-base-yellow-600-code /// -$sd-sage-color-base-yellow-100-code: "yellow-100"; +$sd-sage-color-base-yellow-600-code: "yellow-60"; /// -/// color color-base-yellow-100-classname +/// color color-base-yellow-600-classname /// -$sd-sage-color-base-yellow-100-classname: "t-sage--color-yellow-100"; +$sd-sage-color-base-yellow-600-classname: "t-sage--color-yellow-600"; /// -/// color color-base-yellow-200-hex +/// color color-base-yellow-700-hex /// -$sd-sage-color-base-yellow-200-hex: #fed04b; +$sd-sage-color-base-yellow-700-hex: #b64f06; /// -/// color color-base-yellow-200-code +/// color color-base-yellow-700-code /// -$sd-sage-color-base-yellow-200-code: "yellow-200"; +$sd-sage-color-base-yellow-700-code: "yellow-700"; /// -/// color color-base-yellow-200-classname +/// color color-base-yellow-700-classname /// -$sd-sage-color-base-yellow-200-classname: "t-sage--color-yellow-200"; +$sd-sage-color-base-yellow-700-classname: "t-sage--color-yellow-700"; /// -/// color color-base-yellow-300-hex +/// color color-base-yellow-800-hex /// -$sd-sage-color-base-yellow-300-hex: #fdbb21; +$sd-sage-color-base-yellow-800-hex: #943d0e; /// -/// color color-base-yellow-300-code +/// color color-base-yellow-800-code /// -$sd-sage-color-base-yellow-300-code: "yellow-300"; +$sd-sage-color-base-yellow-800-code: "yellow-800"; /// -/// color color-base-yellow-300-classname +/// color color-base-yellow-800-classname /// -$sd-sage-color-base-yellow-300-classname: "t-sage--color-yellow-300"; +$sd-sage-color-base-yellow-800-classname: "t-sage--color-yellow-800"; /// -/// color color-base-yellow-400-hex +/// color color-base-yellow-900-hex /// -$sd-sage-color-base-yellow-400-hex: #db7303; +$sd-sage-color-base-yellow-900-hex: #79330e; /// -/// color color-base-yellow-400-code +/// color color-base-yellow-900-code /// -$sd-sage-color-base-yellow-400-code: "yellow-400"; +$sd-sage-color-base-yellow-900-code: "yellow-900"; /// -/// color color-base-yellow-400-classname +/// color color-base-yellow-900-classname /// -$sd-sage-color-base-yellow-400-classname: "t-sage--color-yellow-400"; +$sd-sage-color-base-yellow-900-classname: "t-sage--color-yellow-900"; /// -/// color color-base-yellow-500-hex +/// color color-base-yellow-950-hex /// -$sd-sage-color-base-yellow-500-hex: #451902; +$sd-sage-color-base-yellow-950-hex: #451902; /// -/// color color-base-yellow-500-code +/// color color-base-yellow-950-code /// -$sd-sage-color-base-yellow-500-code: "yellow-500"; +$sd-sage-color-base-yellow-950-code: "yellow-950"; /// -/// color color-base-yellow-500-classname +/// color color-base-yellow-950-classname /// -$sd-sage-color-base-yellow-500-classname: "t-sage--color-yellow-500"; +$sd-sage-color-base-yellow-950-classname: "t-sage--color-yellow-950"; /// /// color color-base-red-50-hex /// @@ -1815,71 +1755,21 @@ $sd-sage-color: ( ), ), yellow: ( - 5: ( - hex: $sd-sage-color-base-yellow-5-hex, - code: $sd-sage-color-base-yellow-5-code, - classname: $sd-sage-color-base-yellow-5-classname, - ), - 10: ( - hex: $sd-sage-color-base-yellow-10-hex, - code: $sd-sage-color-base-yellow-10-code, - classname: $sd-sage-color-base-yellow-10-classname, - ), - 15: ( - hex: $sd-sage-color-base-yellow-15-hex, - code: $sd-sage-color-base-yellow-15-code, - classname: $sd-sage-color-base-yellow-15-classname, - ), - 20: ( - hex: $sd-sage-color-base-yellow-20-hex, - code: $sd-sage-color-base-yellow-20-code, - classname: $sd-sage-color-base-yellow-20-classname, - ), - 30: ( - hex: $sd-sage-color-base-yellow-30-hex, - code: $sd-sage-color-base-yellow-30-code, - classname: $sd-sage-color-base-yellow-30-classname, - ), - 40: ( - hex: $sd-sage-color-base-yellow-40-hex, - code: $sd-sage-color-base-yellow-40-code, - classname: $sd-sage-color-base-yellow-40-classname, - ), 50: ( hex: $sd-sage-color-base-yellow-50-hex, code: $sd-sage-color-base-yellow-50-code, classname: $sd-sage-color-base-yellow-50-classname, ), - 60: ( - hex: $sd-sage-color-base-yellow-60-hex, - code: $sd-sage-color-base-yellow-60-code, - classname: $sd-sage-color-base-yellow-60-classname, - ), - 70: ( - hex: $sd-sage-color-base-yellow-70-hex, - code: $sd-sage-color-base-yellow-70-code, - classname: $sd-sage-color-base-yellow-70-classname, - ), - 80: ( - hex: $sd-sage-color-base-yellow-80-hex, - code: $sd-sage-color-base-yellow-80-code, - classname: $sd-sage-color-base-yellow-80-classname, - ), - 90: ( - hex: $sd-sage-color-base-yellow-90-hex, - code: $sd-sage-color-base-yellow-90-code, - classname: $sd-sage-color-base-yellow-90-classname, - ), - 95: ( - hex: $sd-sage-color-base-yellow-95-hex, - code: $sd-sage-color-base-yellow-95-code, - classname: $sd-sage-color-base-yellow-95-classname, - ), 100: ( hex: $sd-sage-color-base-yellow-100-hex, code: $sd-sage-color-base-yellow-100-code, classname: $sd-sage-color-base-yellow-100-classname, ), + 150: ( + hex: $sd-sage-color-base-yellow-150-hex, + code: $sd-sage-color-base-yellow-150-code, + classname: $sd-sage-color-base-yellow-150-classname, + ), 200: ( hex: $sd-sage-color-base-yellow-200-hex, code: $sd-sage-color-base-yellow-200-code, @@ -1900,6 +1790,31 @@ $sd-sage-color: ( code: $sd-sage-color-base-yellow-500-code, classname: $sd-sage-color-base-yellow-500-classname, ), + 600: ( + hex: $sd-sage-color-base-yellow-600-hex, + code: $sd-sage-color-base-yellow-600-code, + classname: $sd-sage-color-base-yellow-600-classname, + ), + 700: ( + hex: $sd-sage-color-base-yellow-700-hex, + code: $sd-sage-color-base-yellow-700-code, + classname: $sd-sage-color-base-yellow-700-classname, + ), + 800: ( + hex: $sd-sage-color-base-yellow-800-hex, + code: $sd-sage-color-base-yellow-800-code, + classname: $sd-sage-color-base-yellow-800-classname, + ), + 900: ( + hex: $sd-sage-color-base-yellow-900-hex, + code: $sd-sage-color-base-yellow-900-code, + classname: $sd-sage-color-base-yellow-900-classname, + ), + 950: ( + hex: $sd-sage-color-base-yellow-950-hex, + code: $sd-sage-color-base-yellow-950-code, + classname: $sd-sage-color-base-yellow-950-classname, + ), ), red: ( 50: ( @@ -2711,7 +2626,7 @@ $sd-sage-color-core-green: #079250; /// /// color core color-core-mercury /// -$sd-sage-color-core-mercury: #fffcfa; +$sd-sage-color-core-mercury: #ff3e15; /// /// color core color-core-primary /// diff --git a/packages/sage-react/lib/configs/dictionary/tokens.js b/packages/sage-react/lib/configs/dictionary/tokens.js index 2e09f93940..06acdf9ff6 100644 --- a/packages/sage-react/lib/configs/dictionary/tokens.js +++ b/packages/sage-react/lib/configs/dictionary/tokens.js @@ -157,57 +157,42 @@ export const COLOR_BASE_SAGE_400_CLASSNAME = 't-sage--color-sage-400'; export const COLOR_BASE_SAGE_500_HEX = '#052e1c'; export const COLOR_BASE_SAGE_500_CODE = 'sage-500'; export const COLOR_BASE_SAGE_500_CLASSNAME = 't-sage--color-sage-500'; -export const COLOR_BASE_YELLOW_5_HEX = '#fffefa'; -export const COLOR_BASE_YELLOW_5_CODE = 'yellow-5'; -export const COLOR_BASE_YELLOW_5_CLASSNAME = 't-sage--color-yellow-5'; -export const COLOR_BASE_YELLOW_10_HEX = '#fffbeb'; -export const COLOR_BASE_YELLOW_10_CODE = 'yellow-10'; -export const COLOR_BASE_YELLOW_10_CLASSNAME = 't-sage--color-yellow-10'; -export const COLOR_BASE_YELLOW_15_HEX = '#fff3c6'; -export const COLOR_BASE_YELLOW_15_CODE = 'yellow-15'; -export const COLOR_BASE_YELLOW_15_CLASSNAME = 't-sage--color-yellow-15'; -export const COLOR_BASE_YELLOW_20_HEX = '#fee589'; -export const COLOR_BASE_YELLOW_20_CODE = 'yellow-20'; -export const COLOR_BASE_YELLOW_20_CLASSNAME = 't-sage--color-yellow-20'; -export const COLOR_BASE_YELLOW_30_HEX = '#fed04b'; -export const COLOR_BASE_YELLOW_30_CODE = 'yellow-30'; -export const COLOR_BASE_YELLOW_30_CLASSNAME = 't-sage--color-yellow-30'; -export const COLOR_BASE_YELLOW_40_HEX = '#fdbb21'; -export const COLOR_BASE_YELLOW_40_CODE = 'yellow-40'; -export const COLOR_BASE_YELLOW_40_CLASSNAME = 't-sage--color-yellow-40'; -export const COLOR_BASE_YELLOW_50_HEX = '#f79a0b'; +export const COLOR_BASE_YELLOW_50_HEX = '#fffefa'; export const COLOR_BASE_YELLOW_50_CODE = 'yellow-50'; export const COLOR_BASE_YELLOW_50_CLASSNAME = 't-sage--color-yellow-50'; -export const COLOR_BASE_YELLOW_60_HEX = '#db7303'; -export const COLOR_BASE_YELLOW_60_CODE = 'yellow-60'; -export const COLOR_BASE_YELLOW_60_CLASSNAME = 't-sage--color-yellow-60'; -export const COLOR_BASE_YELLOW_70_HEX = '#b64f06'; -export const COLOR_BASE_YELLOW_70_CODE = 'yellow-70'; -export const COLOR_BASE_YELLOW_70_CLASSNAME = 't-sage--color-yellow-70'; -export const COLOR_BASE_YELLOW_80_HEX = '#943d0e'; -export const COLOR_BASE_YELLOW_80_CODE = 'yellow-80'; -export const COLOR_BASE_YELLOW_80_CLASSNAME = 't-sage--color-yellow-80'; -export const COLOR_BASE_YELLOW_90_HEX = '#79330e'; -export const COLOR_BASE_YELLOW_90_CODE = 'yellow-90'; -export const COLOR_BASE_YELLOW_90_CLASSNAME = 't-sage--color-yellow-90'; -export const COLOR_BASE_YELLOW_95_HEX = '#451902'; -export const COLOR_BASE_YELLOW_95_CODE = 'yellow-95'; -export const COLOR_BASE_YELLOW_95_CLASSNAME = 't-sage--color-yellow-95'; -export const COLOR_BASE_YELLOW_100_HEX = '#fff3c6'; +export const COLOR_BASE_YELLOW_100_HEX = '#fffbeb'; export const COLOR_BASE_YELLOW_100_CODE = 'yellow-100'; export const COLOR_BASE_YELLOW_100_CLASSNAME = 't-sage--color-yellow-100'; -export const COLOR_BASE_YELLOW_200_HEX = '#fed04b'; +export const COLOR_BASE_YELLOW_150_HEX = '#fff3c6'; +export const COLOR_BASE_YELLOW_150_CODE = 'yellow-150'; +export const COLOR_BASE_YELLOW_150_CLASSNAME = 't-sage--color-yellow-150'; +export const COLOR_BASE_YELLOW_200_HEX = '#fee589'; export const COLOR_BASE_YELLOW_200_CODE = 'yellow-200'; export const COLOR_BASE_YELLOW_200_CLASSNAME = 't-sage--color-yellow-200'; -export const COLOR_BASE_YELLOW_300_HEX = '#fdbb21'; +export const COLOR_BASE_YELLOW_300_HEX = '#fed04b'; export const COLOR_BASE_YELLOW_300_CODE = 'yellow-300'; export const COLOR_BASE_YELLOW_300_CLASSNAME = 't-sage--color-yellow-300'; -export const COLOR_BASE_YELLOW_400_HEX = '#db7303'; +export const COLOR_BASE_YELLOW_400_HEX = '#fdbb21'; export const COLOR_BASE_YELLOW_400_CODE = 'yellow-400'; export const COLOR_BASE_YELLOW_400_CLASSNAME = 't-sage--color-yellow-400'; -export const COLOR_BASE_YELLOW_500_HEX = '#451902'; +export const COLOR_BASE_YELLOW_500_HEX = '#f79a0b'; export const COLOR_BASE_YELLOW_500_CODE = 'yellow-500'; export const COLOR_BASE_YELLOW_500_CLASSNAME = 't-sage--color-yellow-500'; +export const COLOR_BASE_YELLOW_600_HEX = '#db7303'; +export const COLOR_BASE_YELLOW_600_CODE = 'yellow-60'; +export const COLOR_BASE_YELLOW_600_CLASSNAME = 't-sage--color-yellow-600'; +export const COLOR_BASE_YELLOW_700_HEX = '#b64f06'; +export const COLOR_BASE_YELLOW_700_CODE = 'yellow-700'; +export const COLOR_BASE_YELLOW_700_CLASSNAME = 't-sage--color-yellow-700'; +export const COLOR_BASE_YELLOW_800_HEX = '#943d0e'; +export const COLOR_BASE_YELLOW_800_CODE = 'yellow-800'; +export const COLOR_BASE_YELLOW_800_CLASSNAME = 't-sage--color-yellow-800'; +export const COLOR_BASE_YELLOW_900_HEX = '#79330e'; +export const COLOR_BASE_YELLOW_900_CODE = 'yellow-900'; +export const COLOR_BASE_YELLOW_900_CLASSNAME = 't-sage--color-yellow-900'; +export const COLOR_BASE_YELLOW_950_HEX = '#451902'; +export const COLOR_BASE_YELLOW_950_CODE = 'yellow-950'; +export const COLOR_BASE_YELLOW_950_CLASSNAME = 't-sage--color-yellow-950'; export const COLOR_BASE_RED_50_HEX = '#fffafa'; export const COLOR_BASE_RED_50_CODE = 'red-50'; export const COLOR_BASE_RED_50_CLASSNAME = 't-sage--color-red-50'; @@ -652,71 +637,21 @@ export const COLOR = { }, }, YELLOW: { - 5: { - HEX: COLOR_BASE_YELLOW_5_HEX, - CODE: COLOR_BASE_YELLOW_5_CODE, - CLASSNAME: COLOR_BASE_YELLOW_5_CLASSNAME, - }, - 10: { - HEX: COLOR_BASE_YELLOW_10_HEX, - CODE: COLOR_BASE_YELLOW_10_CODE, - CLASSNAME: COLOR_BASE_YELLOW_10_CLASSNAME, - }, - 15: { - HEX: COLOR_BASE_YELLOW_15_HEX, - CODE: COLOR_BASE_YELLOW_15_CODE, - CLASSNAME: COLOR_BASE_YELLOW_15_CLASSNAME, - }, - 20: { - HEX: COLOR_BASE_YELLOW_20_HEX, - CODE: COLOR_BASE_YELLOW_20_CODE, - CLASSNAME: COLOR_BASE_YELLOW_20_CLASSNAME, - }, - 30: { - HEX: COLOR_BASE_YELLOW_30_HEX, - CODE: COLOR_BASE_YELLOW_30_CODE, - CLASSNAME: COLOR_BASE_YELLOW_30_CLASSNAME, - }, - 40: { - HEX: COLOR_BASE_YELLOW_40_HEX, - CODE: COLOR_BASE_YELLOW_40_CODE, - CLASSNAME: COLOR_BASE_YELLOW_40_CLASSNAME, - }, 50: { HEX: COLOR_BASE_YELLOW_50_HEX, CODE: COLOR_BASE_YELLOW_50_CODE, CLASSNAME: COLOR_BASE_YELLOW_50_CLASSNAME, }, - 60: { - HEX: COLOR_BASE_YELLOW_60_HEX, - CODE: COLOR_BASE_YELLOW_60_CODE, - CLASSNAME: COLOR_BASE_YELLOW_60_CLASSNAME, - }, - 70: { - HEX: COLOR_BASE_YELLOW_70_HEX, - CODE: COLOR_BASE_YELLOW_70_CODE, - CLASSNAME: COLOR_BASE_YELLOW_70_CLASSNAME, - }, - 80: { - HEX: COLOR_BASE_YELLOW_80_HEX, - CODE: COLOR_BASE_YELLOW_80_CODE, - CLASSNAME: COLOR_BASE_YELLOW_80_CLASSNAME, - }, - 90: { - HEX: COLOR_BASE_YELLOW_90_HEX, - CODE: COLOR_BASE_YELLOW_90_CODE, - CLASSNAME: COLOR_BASE_YELLOW_90_CLASSNAME, - }, - 95: { - HEX: COLOR_BASE_YELLOW_95_HEX, - CODE: COLOR_BASE_YELLOW_95_CODE, - CLASSNAME: COLOR_BASE_YELLOW_95_CLASSNAME, - }, 100: { HEX: COLOR_BASE_YELLOW_100_HEX, CODE: COLOR_BASE_YELLOW_100_CODE, CLASSNAME: COLOR_BASE_YELLOW_100_CLASSNAME, }, + 150: { + HEX: COLOR_BASE_YELLOW_150_HEX, + CODE: COLOR_BASE_YELLOW_150_CODE, + CLASSNAME: COLOR_BASE_YELLOW_150_CLASSNAME, + }, 200: { HEX: COLOR_BASE_YELLOW_200_HEX, CODE: COLOR_BASE_YELLOW_200_CODE, @@ -737,6 +672,31 @@ export const COLOR = { CODE: COLOR_BASE_YELLOW_500_CODE, CLASSNAME: COLOR_BASE_YELLOW_500_CLASSNAME, }, + 600: { + HEX: COLOR_BASE_YELLOW_600_HEX, + CODE: COLOR_BASE_YELLOW_600_CODE, + CLASSNAME: COLOR_BASE_YELLOW_600_CLASSNAME, + }, + 700: { + HEX: COLOR_BASE_YELLOW_700_HEX, + CODE: COLOR_BASE_YELLOW_700_CODE, + CLASSNAME: COLOR_BASE_YELLOW_700_CLASSNAME, + }, + 800: { + HEX: COLOR_BASE_YELLOW_800_HEX, + CODE: COLOR_BASE_YELLOW_800_CODE, + CLASSNAME: COLOR_BASE_YELLOW_800_CLASSNAME, + }, + 900: { + HEX: COLOR_BASE_YELLOW_900_HEX, + CODE: COLOR_BASE_YELLOW_900_CODE, + CLASSNAME: COLOR_BASE_YELLOW_900_CLASSNAME, + }, + 950: { + HEX: COLOR_BASE_YELLOW_950_HEX, + CODE: COLOR_BASE_YELLOW_950_CODE, + CLASSNAME: COLOR_BASE_YELLOW_950_CLASSNAME, + }, }, RED: { 50: { @@ -1299,7 +1259,7 @@ export const COLOR_COMBOS = { // export const COLOR_CORE_BLUE = '#2463eb'; export const COLOR_CORE_GREEN = '#079250'; -export const COLOR_CORE_MERCURY = '#fffcfa'; +export const COLOR_CORE_MERCURY = '#ff3e15'; export const COLOR_CORE_PRIMARY = '#2463eb'; export const COLOR_CORE_SAGE = '#079250'; export const COLOR_CORE_YELLOW = '#fdbb21'; diff --git a/style-dictionary/tokens/color/base.json b/style-dictionary/tokens/color/base.json index 2a280dbd8a..1f2909bfbd 100644 --- a/style-dictionary/tokens/color/base.json +++ b/style-dictionary/tokens/color/base.json @@ -242,90 +242,65 @@ } }, "yellow": { - "5": { + "50": { "hex": { "value": "#fffefa" }, - "code": { "value": "yellow-5" }, - "classname": { "value": "t-sage--color-yellow-5" } + "code": { "value": "yellow-50" }, + "classname": { "value": "t-sage--color-yellow-50" } }, - "10": { + "100": { "hex": { "value": "#fffbeb" }, - "code": { "value": "yellow-10" }, - "classname": { "value": "t-sage--color-yellow-10" } + "code": { "value": "yellow-100" }, + "classname": { "value": "t-sage--color-yellow-100" } }, - "15": { + "150": { "hex": { "value": "#fff3c6" }, - "code": { "value": "yellow-15" }, - "classname": { "value": "t-sage--color-yellow-15" } + "code": { "value": "yellow-150" }, + "classname": { "value": "t-sage--color-yellow-150" } }, - "20": { + "200": { "hex": { "value": "#fee589" }, - "code": { "value": "yellow-20" }, - "classname": { "value": "t-sage--color-yellow-20" } + "code": { "value": "yellow-200" }, + "classname": { "value": "t-sage--color-yellow-200" } }, - "30": { + "300": { "hex": { "value": "#fed04b" }, - "code": { "value": "yellow-30" }, - "classname": { "value": "t-sage--color-yellow-30" } + "code": { "value": "yellow-300" }, + "classname": { "value": "t-sage--color-yellow-300" } }, - "40": { + "400": { "hex": { "value": "#fdbb21" }, - "code": { "value": "yellow-40" }, - "classname": { "value": "t-sage--color-yellow-40" } + "code": { "value": "yellow-400" }, + "classname": { "value": "t-sage--color-yellow-400" } }, - "50": { + "500": { "hex": { "value": "#f79a0b" }, - "code": { "value": "yellow-50" }, - "classname": { "value": "t-sage--color-yellow-50" } + "code": { "value": "yellow-500" }, + "classname": { "value": "t-sage--color-yellow-500" } }, - "60": { + "600": { "hex": { "value": "#db7303" }, "code": { "value": "yellow-60" }, - "classname": { "value": "t-sage--color-yellow-60" } + "classname": { "value": "t-sage--color-yellow-600" } }, - "70": { + "700": { "hex": { "value": "#b64f06" }, - "code": { "value": "yellow-70" }, - "classname": { "value": "t-sage--color-yellow-70" } + "code": { "value": "yellow-700" }, + "classname": { "value": "t-sage--color-yellow-700" } }, - "80": { + "800": { "hex": { "value": "#943d0e" }, - "code": { "value": "yellow-80" }, - "classname": { "value": "t-sage--color-yellow-80" } + "code": { "value": "yellow-800" }, + "classname": { "value": "t-sage--color-yellow-800" } }, - "90": { + "900": { "hex": { "value": "#79330e" }, - "code": { "value": "yellow-90" }, - "classname": { "value": "t-sage--color-yellow-90" } + "code": { "value": "yellow-900" }, + "classname": { "value": "t-sage--color-yellow-900" } }, - "95": { + "950": { "hex": { "value": "#451902" }, - "code": { "value": "yellow-95" }, - "classname": { "value": "t-sage--color-yellow-95" } - }, - "100": { - "hex": { "value": "{color.base.yellow.15.hex.value}" }, - "code": { "value": "yellow-100" }, - "classname": { "value": "t-sage--color-yellow-100" } - }, - "200": { - "hex": { "value": "{color.base.yellow.30.hex.value}" }, - "code": { "value": "yellow-200" }, - "classname": { "value": "t-sage--color-yellow-200" } - }, - "300": { - "hex": { "value": "{color.base.yellow.40.hex.value}" }, - "code": { "value": "yellow-300" }, - "classname": { "value": "t-sage--color-yellow-300" } - }, - "400": { - "hex": { "value": "{color.base.yellow.60.hex.value}" }, - "code": { "value": "yellow-400" }, - "classname": { "value": "t-sage--color-yellow-400" } - }, - "500": { - "hex": { "value": "{color.base.yellow.95.hex.value}" }, - "code": { "value": "yellow-500" }, - "classname": { "value": "t-sage--color-yellow-500" } + "code": { "value": "yellow-950" }, + "classname": { "value": "t-sage--color-yellow-950" } } }, "red": { diff --git a/style-dictionary/tokens/color/combos.json b/style-dictionary/tokens/color/combos.json index 47cb37c3d6..92cdc0478a 100644 --- a/style-dictionary/tokens/color/combos.json +++ b/style-dictionary/tokens/color/combos.json @@ -156,30 +156,30 @@ "warning": { "default": { "foreground": { - "value": "{color.base.yellow.400.hex}" + "value": "{color.base.yellow.600.hex}" }, "foreground-accent": { - "value": "{color.base.yellow.500.hex}" + "value": "{color.base.yellow.950.hex}" }, "background": { - "value": "{color.base.yellow.100.hex}" + "value": "{color.base.yellow.150.hex}" }, "background-accent": { - "value": "{color.base.yellow.200.hex}" + "value": "{color.base.yellow.300.hex}" }, "icon-background-accent": { - "value": "{color.base.yellow.400.hex}" + "value": "{color.base.yellow.600.hex}" } }, "subtle": { "foreground": { - "value": "{color.base.yellow.400.hex}" + "value": "{color.base.yellow.600.hex}" }, "foreground-accent": { - "value": "{color.base.yellow.300.hex}" + "value": "{color.base.yellow.400.hex}" }, "background": { - "value": "{color.base.yellow.300.hex}" + "value": "{color.base.yellow.400.hex}" } }, "bold": { @@ -187,7 +187,7 @@ "value": "{color.base.white.300.hex}" }, "background": { - "value": "{color.base.yellow.300.hex}" + "value": "{color.base.yellow.400.hex}" } } }, diff --git a/style-dictionary/tokens/color/core.json b/style-dictionary/tokens/color/core.json index 8505f4ab9e..f24070a987 100644 --- a/style-dictionary/tokens/color/core.json +++ b/style-dictionary/tokens/color/core.json @@ -8,7 +8,7 @@ "value": "{color.base.green.600.hex}" }, "mercury": { - "value": "{color.base.mercury.50.hex}" + "value": "{color.base.mercury.500.hex}" }, "primary": { "value": "{color.base.primary.300.hex}" @@ -17,7 +17,7 @@ "value": "{color.base.sage.300.hex}" }, "yellow": { - "value": "{color.base.yellow.300.hex}" + "value": "{color.base.yellow.400.hex}" }, "red": { "value": "{color.base.red.500.hex}" From c521526c2946051582f249796b88e4b388f201cd Mon Sep 17 00:00:00 2001 From: Quinton Jason Date: Tue, 20 Aug 2024 17:25:01 -0500 Subject: [PATCH 11/31] fix: add 0 to purple color token names --- .../sage-frontend/stylesheets/docs/_code.scss | 4 +- .../stylesheets/docs/_rouge_theme.scss | 2 +- .../app/sage_tokens/sage_dictionary.rb | 148 ++++----- .../lib/stylesheets/components/_avatar.scss | 4 +- .../lib/stylesheets/dictionary/_tokens.scss | 289 +++++++----------- .../lib/configs/dictionary/tokens.js | 148 ++++----- style-dictionary/tokens/color/base.json | 97 +++--- style-dictionary/tokens/color/combos.json | 20 +- style-dictionary/tokens/color/core.json | 2 +- 9 files changed, 262 insertions(+), 452 deletions(-) diff --git a/docs/lib/sage-frontend/stylesheets/docs/_code.scss b/docs/lib/sage-frontend/stylesheets/docs/_code.scss index 619ded3f18..90a68f7f56 100644 --- a/docs/lib/sage-frontend/stylesheets/docs/_code.scss +++ b/docs/lib/sage-frontend/stylesheets/docs/_code.scss @@ -49,13 +49,13 @@ pre .lit { /* literal */ color: sage-color(sage, 100); } pre .pun { /* punctuation */ - color: sage-color(purple, 100); + color: sage-color(purple, 150); } pre .pln { /* plaintext */ color: sage-color(primary, 100); } pre .tag { /* html/xml tag */ - color: sage-color(purple, 100); + color: sage-color(purple, 150); font-weight: bold; } pre .atn { /* attribute name */ diff --git a/docs/lib/sage-frontend/stylesheets/docs/_rouge_theme.scss b/docs/lib/sage-frontend/stylesheets/docs/_rouge_theme.scss index 3c62618584..d48372cd06 100644 --- a/docs/lib/sage-frontend/stylesheets/docs/_rouge_theme.scss +++ b/docs/lib/sage-frontend/stylesheets/docs/_rouge_theme.scss @@ -47,7 +47,7 @@ $-color-13: sage-color(primary, 200); // Class, function, namespace $-color-17: sage-color(sage, 200); // Name decorator and word operator -$-color-19: sage-color(purple, 200); +$-color-19: sage-color(purple, 300); // Variables $-color-23: sage-color(primary, 300); 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 d95d938c82..ad570d5aba 100644 --- a/docs/lib/sage_rails/app/sage_tokens/sage_dictionary.rb +++ b/docs/lib/sage_rails/app/sage_tokens/sage_dictionary.rb @@ -246,57 +246,42 @@ module SageDictionary SD_SAGE_COLOR_BASE_ORANGE_500_HEX = "#450506" SD_SAGE_COLOR_BASE_ORANGE_500_CODE = "orange-500" SD_SAGE_COLOR_BASE_ORANGE_500_CLASSNAME = "t-sage--color-orange-500" - SD_SAGE_COLOR_BASE_PURPLE_5_HEX = "#fafbff" - SD_SAGE_COLOR_BASE_PURPLE_5_CODE = "purple-5" - SD_SAGE_COLOR_BASE_PURPLE_5_CLASSNAME = "t-sage--color-purple-5" - SD_SAGE_COLOR_BASE_PURPLE_10_HEX = "#edf1ff" - SD_SAGE_COLOR_BASE_PURPLE_10_CODE = "purple-10" - SD_SAGE_COLOR_BASE_PURPLE_10_CLASSNAME = "t-sage--color-purple-10" - SD_SAGE_COLOR_BASE_PURPLE_15_HEX = "#e0e4ff" - SD_SAGE_COLOR_BASE_PURPLE_15_CODE = "purple-15" - SD_SAGE_COLOR_BASE_PURPLE_15_CLASSNAME = "t-sage--color-purple-15" - SD_SAGE_COLOR_BASE_PURPLE_20_HEX = "#c7cdfe" - SD_SAGE_COLOR_BASE_PURPLE_20_CODE = "purple-20" - SD_SAGE_COLOR_BASE_PURPLE_20_CLASSNAME = "t-sage--color-purple-20" - SD_SAGE_COLOR_BASE_PURPLE_30_HEX = "#a3acfd" - SD_SAGE_COLOR_BASE_PURPLE_30_CODE = "purple-30" - SD_SAGE_COLOR_BASE_PURPLE_30_CLASSNAME = "t-sage--color-purple-30" - SD_SAGE_COLOR_BASE_PURPLE_40_HEX = "#8081f9" - SD_SAGE_COLOR_BASE_PURPLE_40_CODE = "purple-40" - SD_SAGE_COLOR_BASE_PURPLE_40_CLASSNAME = "t-sage--color-purple-40" - SD_SAGE_COLOR_BASE_PURPLE_50_HEX = "#6a62f2" + SD_SAGE_COLOR_BASE_PURPLE_50_HEX = "#fafbff" SD_SAGE_COLOR_BASE_PURPLE_50_CODE = "purple-50" SD_SAGE_COLOR_BASE_PURPLE_50_CLASSNAME = "t-sage--color-purple-50" - SD_SAGE_COLOR_BASE_PURPLE_60_HEX = "#533be5" - SD_SAGE_COLOR_BASE_PURPLE_60_CODE = "purple-60" - SD_SAGE_COLOR_BASE_PURPLE_60_CLASSNAME = "t-sage--color-purple-60" - SD_SAGE_COLOR_BASE_PURPLE_70_HEX = "#4f37cb" - SD_SAGE_COLOR_BASE_PURPLE_70_CODE = "purple-70" - SD_SAGE_COLOR_BASE_PURPLE_70_CLASSNAME = "t-sage--color-purple-70" - SD_SAGE_COLOR_BASE_PURPLE_80_HEX = "#402fa4" - SD_SAGE_COLOR_BASE_PURPLE_80_CODE = "purple-80" - SD_SAGE_COLOR_BASE_PURPLE_80_CLASSNAME = "t-sage--color-purple-80" - SD_SAGE_COLOR_BASE_PURPLE_90_HEX = "#372d82" - SD_SAGE_COLOR_BASE_PURPLE_90_CODE = "purple-90" - SD_SAGE_COLOR_BASE_PURPLE_90_CLASSNAME = "t-sage--color-purple-90" - SD_SAGE_COLOR_BASE_PURPLE_95_HEX = "#221b4b" - SD_SAGE_COLOR_BASE_PURPLE_95_CODE = "purple-95" - SD_SAGE_COLOR_BASE_PURPLE_95_CLASSNAME = "t-sage--color-purple-95" - SD_SAGE_COLOR_BASE_PURPLE_100_HEX = "#e0e4ff" + SD_SAGE_COLOR_BASE_PURPLE_100_HEX = "#edf1ff" SD_SAGE_COLOR_BASE_PURPLE_100_CODE = "purple-100" SD_SAGE_COLOR_BASE_PURPLE_100_CLASSNAME = "t-sage--color-purple-100" - SD_SAGE_COLOR_BASE_PURPLE_200_HEX = "#a3acfd" + SD_SAGE_COLOR_BASE_PURPLE_150_HEX = "#e0e4ff" + SD_SAGE_COLOR_BASE_PURPLE_150_CODE = "purple-150" + SD_SAGE_COLOR_BASE_PURPLE_150_CLASSNAME = "t-sage--color-purple-150" + SD_SAGE_COLOR_BASE_PURPLE_200_HEX = "#c7cdfe" SD_SAGE_COLOR_BASE_PURPLE_200_CODE = "purple-200" SD_SAGE_COLOR_BASE_PURPLE_200_CLASSNAME = "t-sage--color-purple-200" - SD_SAGE_COLOR_BASE_PURPLE_300_HEX = "#533be5" + SD_SAGE_COLOR_BASE_PURPLE_300_HEX = "#a3acfd" SD_SAGE_COLOR_BASE_PURPLE_300_CODE = "purple-300" SD_SAGE_COLOR_BASE_PURPLE_300_CLASSNAME = "t-sage--color-purple-300" - SD_SAGE_COLOR_BASE_PURPLE_400_HEX = "#402fa4" + SD_SAGE_COLOR_BASE_PURPLE_400_HEX = "#8081f9" SD_SAGE_COLOR_BASE_PURPLE_400_CODE = "purple-400" SD_SAGE_COLOR_BASE_PURPLE_400_CLASSNAME = "t-sage--color-purple-400" - SD_SAGE_COLOR_BASE_PURPLE_500_HEX = "#221b4b" + SD_SAGE_COLOR_BASE_PURPLE_500_HEX = "#6a62f2" SD_SAGE_COLOR_BASE_PURPLE_500_CODE = "purple-500" SD_SAGE_COLOR_BASE_PURPLE_500_CLASSNAME = "t-sage--color-purple-500" + SD_SAGE_COLOR_BASE_PURPLE_600_HEX = "#533be5" + SD_SAGE_COLOR_BASE_PURPLE_600_CODE = "purple-600" + SD_SAGE_COLOR_BASE_PURPLE_600_CLASSNAME = "t-sage--color-purple-600" + SD_SAGE_COLOR_BASE_PURPLE_700_HEX = "#4f37cb" + SD_SAGE_COLOR_BASE_PURPLE_700_CODE = "purple-700" + SD_SAGE_COLOR_BASE_PURPLE_700_CLASSNAME = "t-sage--color-purple-700" + SD_SAGE_COLOR_BASE_PURPLE_800_HEX = "#402fa4" + SD_SAGE_COLOR_BASE_PURPLE_800_CODE = "purple-800" + SD_SAGE_COLOR_BASE_PURPLE_800_CLASSNAME = "t-sage--color-purple-800" + SD_SAGE_COLOR_BASE_PURPLE_900_HEX = "#372d82" + SD_SAGE_COLOR_BASE_PURPLE_900_CODE = "purple-900" + SD_SAGE_COLOR_BASE_PURPLE_900_CLASSNAME = "t-sage--color-purple-900" + SD_SAGE_COLOR_BASE_PURPLE_950_HEX = "#221b4b" + SD_SAGE_COLOR_BASE_PURPLE_950_CODE = "purple-950" + SD_SAGE_COLOR_BASE_PURPLE_950_CLASSNAME = "t-sage--color-purple-950" SD_SAGE_COLOR_BASE_CHARCOAL_100_HEX = "#828180" SD_SAGE_COLOR_BASE_CHARCOAL_100_CODE = "charcoal-100" SD_SAGE_COLOR_BASE_CHARCOAL_100_CLASSNAME = "t-sage--color-charcoal-100" @@ -790,71 +775,21 @@ module SageDictionary }, }, "PURPLE": { - "5": { - "HEX": SD_SAGE_COLOR_BASE_PURPLE_5_HEX, - "CODE": SD_SAGE_COLOR_BASE_PURPLE_5_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_5_CLASSNAME, - }, - "10": { - "HEX": SD_SAGE_COLOR_BASE_PURPLE_10_HEX, - "CODE": SD_SAGE_COLOR_BASE_PURPLE_10_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_10_CLASSNAME, - }, - "15": { - "HEX": SD_SAGE_COLOR_BASE_PURPLE_15_HEX, - "CODE": SD_SAGE_COLOR_BASE_PURPLE_15_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_15_CLASSNAME, - }, - "20": { - "HEX": SD_SAGE_COLOR_BASE_PURPLE_20_HEX, - "CODE": SD_SAGE_COLOR_BASE_PURPLE_20_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_20_CLASSNAME, - }, - "30": { - "HEX": SD_SAGE_COLOR_BASE_PURPLE_30_HEX, - "CODE": SD_SAGE_COLOR_BASE_PURPLE_30_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_30_CLASSNAME, - }, - "40": { - "HEX": SD_SAGE_COLOR_BASE_PURPLE_40_HEX, - "CODE": SD_SAGE_COLOR_BASE_PURPLE_40_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_40_CLASSNAME, - }, "50": { "HEX": SD_SAGE_COLOR_BASE_PURPLE_50_HEX, "CODE": SD_SAGE_COLOR_BASE_PURPLE_50_CODE, "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_50_CLASSNAME, }, - "60": { - "HEX": SD_SAGE_COLOR_BASE_PURPLE_60_HEX, - "CODE": SD_SAGE_COLOR_BASE_PURPLE_60_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_60_CLASSNAME, - }, - "70": { - "HEX": SD_SAGE_COLOR_BASE_PURPLE_70_HEX, - "CODE": SD_SAGE_COLOR_BASE_PURPLE_70_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_70_CLASSNAME, - }, - "80": { - "HEX": SD_SAGE_COLOR_BASE_PURPLE_80_HEX, - "CODE": SD_SAGE_COLOR_BASE_PURPLE_80_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_80_CLASSNAME, - }, - "90": { - "HEX": SD_SAGE_COLOR_BASE_PURPLE_90_HEX, - "CODE": SD_SAGE_COLOR_BASE_PURPLE_90_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_90_CLASSNAME, - }, - "95": { - "HEX": SD_SAGE_COLOR_BASE_PURPLE_95_HEX, - "CODE": SD_SAGE_COLOR_BASE_PURPLE_95_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_95_CLASSNAME, - }, "100": { "HEX": SD_SAGE_COLOR_BASE_PURPLE_100_HEX, "CODE": SD_SAGE_COLOR_BASE_PURPLE_100_CODE, "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_100_CLASSNAME, }, + "150": { + "HEX": SD_SAGE_COLOR_BASE_PURPLE_150_HEX, + "CODE": SD_SAGE_COLOR_BASE_PURPLE_150_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_150_CLASSNAME, + }, "200": { "HEX": SD_SAGE_COLOR_BASE_PURPLE_200_HEX, "CODE": SD_SAGE_COLOR_BASE_PURPLE_200_CODE, @@ -875,6 +810,31 @@ module SageDictionary "CODE": SD_SAGE_COLOR_BASE_PURPLE_500_CODE, "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_500_CLASSNAME, }, + "600": { + "HEX": SD_SAGE_COLOR_BASE_PURPLE_600_HEX, + "CODE": SD_SAGE_COLOR_BASE_PURPLE_600_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_600_CLASSNAME, + }, + "700": { + "HEX": SD_SAGE_COLOR_BASE_PURPLE_700_HEX, + "CODE": SD_SAGE_COLOR_BASE_PURPLE_700_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_700_CLASSNAME, + }, + "800": { + "HEX": SD_SAGE_COLOR_BASE_PURPLE_800_HEX, + "CODE": SD_SAGE_COLOR_BASE_PURPLE_800_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_800_CLASSNAME, + }, + "900": { + "HEX": SD_SAGE_COLOR_BASE_PURPLE_900_HEX, + "CODE": SD_SAGE_COLOR_BASE_PURPLE_900_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_900_CLASSNAME, + }, + "950": { + "HEX": SD_SAGE_COLOR_BASE_PURPLE_950_HEX, + "CODE": SD_SAGE_COLOR_BASE_PURPLE_950_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_950_CLASSNAME, + }, }, "CHARCOAL": { "100": { diff --git a/packages/sage-assets/lib/stylesheets/components/_avatar.scss b/packages/sage-assets/lib/stylesheets/components/_avatar.scss index 0d276dca1f..8c5448879e 100644 --- a/packages/sage-assets/lib/stylesheets/components/_avatar.scss +++ b/packages/sage-assets/lib/stylesheets/components/_avatar.scss @@ -17,8 +17,8 @@ $-avatar-ring-colors: ( bg: sage-color(grey, 300) ), purple: ( - main: sage-color(purple, 300), - bg: sage-color(purple, 100) + main: sage-color(purple, 600), + bg: sage-color(purple, 150) ), sage: ( main: sage-color(sage, 300), diff --git a/packages/sage-assets/lib/stylesheets/dictionary/_tokens.scss b/packages/sage-assets/lib/stylesheets/dictionary/_tokens.scss index e7ebd896f7..eacaa9a08a 100644 --- a/packages/sage-assets/lib/stylesheets/dictionary/_tokens.scss +++ b/packages/sage-assets/lib/stylesheets/dictionary/_tokens.scss @@ -922,209 +922,149 @@ $sd-sage-color-base-orange-500-code: "orange-500"; /// $sd-sage-color-base-orange-500-classname: "t-sage--color-orange-500"; /// -/// color color-base-purple-5-hex -/// -$sd-sage-color-base-purple-5-hex: #fafbff; -/// -/// color color-base-purple-5-code -/// -$sd-sage-color-base-purple-5-code: "purple-5"; -/// -/// color color-base-purple-5-classname -/// -$sd-sage-color-base-purple-5-classname: "t-sage--color-purple-5"; -/// -/// color color-base-purple-10-hex -/// -$sd-sage-color-base-purple-10-hex: #edf1ff; -/// -/// color color-base-purple-10-code -/// -$sd-sage-color-base-purple-10-code: "purple-10"; -/// -/// color color-base-purple-10-classname -/// -$sd-sage-color-base-purple-10-classname: "t-sage--color-purple-10"; -/// -/// color color-base-purple-15-hex -/// -$sd-sage-color-base-purple-15-hex: #e0e4ff; -/// -/// color color-base-purple-15-code -/// -$sd-sage-color-base-purple-15-code: "purple-15"; -/// -/// color color-base-purple-15-classname -/// -$sd-sage-color-base-purple-15-classname: "t-sage--color-purple-15"; -/// -/// color color-base-purple-20-hex -/// -$sd-sage-color-base-purple-20-hex: #c7cdfe; -/// -/// color color-base-purple-20-code -/// -$sd-sage-color-base-purple-20-code: "purple-20"; -/// -/// color color-base-purple-20-classname -/// -$sd-sage-color-base-purple-20-classname: "t-sage--color-purple-20"; -/// -/// color color-base-purple-30-hex -/// -$sd-sage-color-base-purple-30-hex: #a3acfd; -/// -/// color color-base-purple-30-code -/// -$sd-sage-color-base-purple-30-code: "purple-30"; -/// -/// color color-base-purple-30-classname -/// -$sd-sage-color-base-purple-30-classname: "t-sage--color-purple-30"; -/// -/// color color-base-purple-40-hex +/// color color-base-purple-50-hex /// -$sd-sage-color-base-purple-40-hex: #8081f9; +$sd-sage-color-base-purple-50-hex: #fafbff; /// -/// color color-base-purple-40-code +/// color color-base-purple-50-code /// -$sd-sage-color-base-purple-40-code: "purple-40"; +$sd-sage-color-base-purple-50-code: "purple-50"; /// -/// color color-base-purple-40-classname +/// color color-base-purple-50-classname /// -$sd-sage-color-base-purple-40-classname: "t-sage--color-purple-40"; +$sd-sage-color-base-purple-50-classname: "t-sage--color-purple-50"; /// -/// color color-base-purple-50-hex +/// color color-base-purple-100-hex /// -$sd-sage-color-base-purple-50-hex: #6a62f2; +$sd-sage-color-base-purple-100-hex: #edf1ff; /// -/// color color-base-purple-50-code +/// color color-base-purple-100-code /// -$sd-sage-color-base-purple-50-code: "purple-50"; +$sd-sage-color-base-purple-100-code: "purple-100"; /// -/// color color-base-purple-50-classname +/// color color-base-purple-100-classname /// -$sd-sage-color-base-purple-50-classname: "t-sage--color-purple-50"; +$sd-sage-color-base-purple-100-classname: "t-sage--color-purple-100"; /// -/// color color-base-purple-60-hex +/// color color-base-purple-150-hex /// -$sd-sage-color-base-purple-60-hex: #533be5; +$sd-sage-color-base-purple-150-hex: #e0e4ff; /// -/// color color-base-purple-60-code +/// color color-base-purple-150-code /// -$sd-sage-color-base-purple-60-code: "purple-60"; +$sd-sage-color-base-purple-150-code: "purple-150"; /// -/// color color-base-purple-60-classname +/// color color-base-purple-150-classname /// -$sd-sage-color-base-purple-60-classname: "t-sage--color-purple-60"; +$sd-sage-color-base-purple-150-classname: "t-sage--color-purple-150"; /// -/// color color-base-purple-70-hex +/// color color-base-purple-200-hex /// -$sd-sage-color-base-purple-70-hex: #4f37cb; +$sd-sage-color-base-purple-200-hex: #c7cdfe; /// -/// color color-base-purple-70-code +/// color color-base-purple-200-code /// -$sd-sage-color-base-purple-70-code: "purple-70"; +$sd-sage-color-base-purple-200-code: "purple-200"; /// -/// color color-base-purple-70-classname +/// color color-base-purple-200-classname /// -$sd-sage-color-base-purple-70-classname: "t-sage--color-purple-70"; +$sd-sage-color-base-purple-200-classname: "t-sage--color-purple-200"; /// -/// color color-base-purple-80-hex +/// color color-base-purple-300-hex /// -$sd-sage-color-base-purple-80-hex: #402fa4; +$sd-sage-color-base-purple-300-hex: #a3acfd; /// -/// color color-base-purple-80-code +/// color color-base-purple-300-code /// -$sd-sage-color-base-purple-80-code: "purple-80"; +$sd-sage-color-base-purple-300-code: "purple-300"; /// -/// color color-base-purple-80-classname +/// color color-base-purple-300-classname /// -$sd-sage-color-base-purple-80-classname: "t-sage--color-purple-80"; +$sd-sage-color-base-purple-300-classname: "t-sage--color-purple-300"; /// -/// color color-base-purple-90-hex +/// color color-base-purple-400-hex /// -$sd-sage-color-base-purple-90-hex: #372d82; +$sd-sage-color-base-purple-400-hex: #8081f9; /// -/// color color-base-purple-90-code +/// color color-base-purple-400-code /// -$sd-sage-color-base-purple-90-code: "purple-90"; +$sd-sage-color-base-purple-400-code: "purple-400"; /// -/// color color-base-purple-90-classname +/// color color-base-purple-400-classname /// -$sd-sage-color-base-purple-90-classname: "t-sage--color-purple-90"; +$sd-sage-color-base-purple-400-classname: "t-sage--color-purple-400"; /// -/// color color-base-purple-95-hex +/// color color-base-purple-500-hex /// -$sd-sage-color-base-purple-95-hex: #221b4b; +$sd-sage-color-base-purple-500-hex: #6a62f2; /// -/// color color-base-purple-95-code +/// color color-base-purple-500-code /// -$sd-sage-color-base-purple-95-code: "purple-95"; +$sd-sage-color-base-purple-500-code: "purple-500"; /// -/// color color-base-purple-95-classname +/// color color-base-purple-500-classname /// -$sd-sage-color-base-purple-95-classname: "t-sage--color-purple-95"; +$sd-sage-color-base-purple-500-classname: "t-sage--color-purple-500"; /// -/// color color-base-purple-100-hex +/// color color-base-purple-600-hex /// -$sd-sage-color-base-purple-100-hex: #e0e4ff; +$sd-sage-color-base-purple-600-hex: #533be5; /// -/// color color-base-purple-100-code +/// color color-base-purple-600-code /// -$sd-sage-color-base-purple-100-code: "purple-100"; +$sd-sage-color-base-purple-600-code: "purple-600"; /// -/// color color-base-purple-100-classname +/// color color-base-purple-600-classname /// -$sd-sage-color-base-purple-100-classname: "t-sage--color-purple-100"; +$sd-sage-color-base-purple-600-classname: "t-sage--color-purple-600"; /// -/// color color-base-purple-200-hex +/// color color-base-purple-700-hex /// -$sd-sage-color-base-purple-200-hex: #a3acfd; +$sd-sage-color-base-purple-700-hex: #4f37cb; /// -/// color color-base-purple-200-code +/// color color-base-purple-700-code /// -$sd-sage-color-base-purple-200-code: "purple-200"; +$sd-sage-color-base-purple-700-code: "purple-700"; /// -/// color color-base-purple-200-classname +/// color color-base-purple-700-classname /// -$sd-sage-color-base-purple-200-classname: "t-sage--color-purple-200"; +$sd-sage-color-base-purple-700-classname: "t-sage--color-purple-700"; /// -/// color color-base-purple-300-hex +/// color color-base-purple-800-hex /// -$sd-sage-color-base-purple-300-hex: #533be5; +$sd-sage-color-base-purple-800-hex: #402fa4; /// -/// color color-base-purple-300-code +/// color color-base-purple-800-code /// -$sd-sage-color-base-purple-300-code: "purple-300"; +$sd-sage-color-base-purple-800-code: "purple-800"; /// -/// color color-base-purple-300-classname +/// color color-base-purple-800-classname /// -$sd-sage-color-base-purple-300-classname: "t-sage--color-purple-300"; +$sd-sage-color-base-purple-800-classname: "t-sage--color-purple-800"; /// -/// color color-base-purple-400-hex +/// color color-base-purple-900-hex /// -$sd-sage-color-base-purple-400-hex: #402fa4; +$sd-sage-color-base-purple-900-hex: #372d82; /// -/// color color-base-purple-400-code +/// color color-base-purple-900-code /// -$sd-sage-color-base-purple-400-code: "purple-400"; +$sd-sage-color-base-purple-900-code: "purple-900"; /// -/// color color-base-purple-400-classname +/// color color-base-purple-900-classname /// -$sd-sage-color-base-purple-400-classname: "t-sage--color-purple-400"; +$sd-sage-color-base-purple-900-classname: "t-sage--color-purple-900"; /// -/// color color-base-purple-500-hex +/// color color-base-purple-950-hex /// -$sd-sage-color-base-purple-500-hex: #221b4b; +$sd-sage-color-base-purple-950-hex: #221b4b; /// -/// color color-base-purple-500-code +/// color color-base-purple-950-code /// -$sd-sage-color-base-purple-500-code: "purple-500"; +$sd-sage-color-base-purple-950-code: "purple-950"; /// -/// color color-base-purple-500-classname +/// color color-base-purple-950-classname /// -$sd-sage-color-base-purple-500-classname: "t-sage--color-purple-500"; +$sd-sage-color-base-purple-950-classname: "t-sage--color-purple-950"; /// /// color color-base-charcoal-100-hex /// @@ -1906,71 +1846,21 @@ $sd-sage-color: ( ), ), purple: ( - 5: ( - hex: $sd-sage-color-base-purple-5-hex, - code: $sd-sage-color-base-purple-5-code, - classname: $sd-sage-color-base-purple-5-classname, - ), - 10: ( - hex: $sd-sage-color-base-purple-10-hex, - code: $sd-sage-color-base-purple-10-code, - classname: $sd-sage-color-base-purple-10-classname, - ), - 15: ( - hex: $sd-sage-color-base-purple-15-hex, - code: $sd-sage-color-base-purple-15-code, - classname: $sd-sage-color-base-purple-15-classname, - ), - 20: ( - hex: $sd-sage-color-base-purple-20-hex, - code: $sd-sage-color-base-purple-20-code, - classname: $sd-sage-color-base-purple-20-classname, - ), - 30: ( - hex: $sd-sage-color-base-purple-30-hex, - code: $sd-sage-color-base-purple-30-code, - classname: $sd-sage-color-base-purple-30-classname, - ), - 40: ( - hex: $sd-sage-color-base-purple-40-hex, - code: $sd-sage-color-base-purple-40-code, - classname: $sd-sage-color-base-purple-40-classname, - ), 50: ( hex: $sd-sage-color-base-purple-50-hex, code: $sd-sage-color-base-purple-50-code, classname: $sd-sage-color-base-purple-50-classname, ), - 60: ( - hex: $sd-sage-color-base-purple-60-hex, - code: $sd-sage-color-base-purple-60-code, - classname: $sd-sage-color-base-purple-60-classname, - ), - 70: ( - hex: $sd-sage-color-base-purple-70-hex, - code: $sd-sage-color-base-purple-70-code, - classname: $sd-sage-color-base-purple-70-classname, - ), - 80: ( - hex: $sd-sage-color-base-purple-80-hex, - code: $sd-sage-color-base-purple-80-code, - classname: $sd-sage-color-base-purple-80-classname, - ), - 90: ( - hex: $sd-sage-color-base-purple-90-hex, - code: $sd-sage-color-base-purple-90-code, - classname: $sd-sage-color-base-purple-90-classname, - ), - 95: ( - hex: $sd-sage-color-base-purple-95-hex, - code: $sd-sage-color-base-purple-95-code, - classname: $sd-sage-color-base-purple-95-classname, - ), 100: ( hex: $sd-sage-color-base-purple-100-hex, code: $sd-sage-color-base-purple-100-code, classname: $sd-sage-color-base-purple-100-classname, ), + 150: ( + hex: $sd-sage-color-base-purple-150-hex, + code: $sd-sage-color-base-purple-150-code, + classname: $sd-sage-color-base-purple-150-classname, + ), 200: ( hex: $sd-sage-color-base-purple-200-hex, code: $sd-sage-color-base-purple-200-code, @@ -1991,6 +1881,31 @@ $sd-sage-color: ( code: $sd-sage-color-base-purple-500-code, classname: $sd-sage-color-base-purple-500-classname, ), + 600: ( + hex: $sd-sage-color-base-purple-600-hex, + code: $sd-sage-color-base-purple-600-code, + classname: $sd-sage-color-base-purple-600-classname, + ), + 700: ( + hex: $sd-sage-color-base-purple-700-hex, + code: $sd-sage-color-base-purple-700-code, + classname: $sd-sage-color-base-purple-700-classname, + ), + 800: ( + hex: $sd-sage-color-base-purple-800-hex, + code: $sd-sage-color-base-purple-800-code, + classname: $sd-sage-color-base-purple-800-classname, + ), + 900: ( + hex: $sd-sage-color-base-purple-900-hex, + code: $sd-sage-color-base-purple-900-code, + classname: $sd-sage-color-base-purple-900-classname, + ), + 950: ( + hex: $sd-sage-color-base-purple-950-hex, + code: $sd-sage-color-base-purple-950-code, + classname: $sd-sage-color-base-purple-950-classname, + ), ), charcoal: ( 100: ( diff --git a/packages/sage-react/lib/configs/dictionary/tokens.js b/packages/sage-react/lib/configs/dictionary/tokens.js index 06acdf9ff6..39973a344b 100644 --- a/packages/sage-react/lib/configs/dictionary/tokens.js +++ b/packages/sage-react/lib/configs/dictionary/tokens.js @@ -244,57 +244,42 @@ export const COLOR_BASE_ORANGE_400_CLASSNAME = 't-sage--color-orange-400'; export const COLOR_BASE_ORANGE_500_HEX = '#450506'; export const COLOR_BASE_ORANGE_500_CODE = 'orange-500'; export const COLOR_BASE_ORANGE_500_CLASSNAME = 't-sage--color-orange-500'; -export const COLOR_BASE_PURPLE_5_HEX = '#fafbff'; -export const COLOR_BASE_PURPLE_5_CODE = 'purple-5'; -export const COLOR_BASE_PURPLE_5_CLASSNAME = 't-sage--color-purple-5'; -export const COLOR_BASE_PURPLE_10_HEX = '#edf1ff'; -export const COLOR_BASE_PURPLE_10_CODE = 'purple-10'; -export const COLOR_BASE_PURPLE_10_CLASSNAME = 't-sage--color-purple-10'; -export const COLOR_BASE_PURPLE_15_HEX = '#e0e4ff'; -export const COLOR_BASE_PURPLE_15_CODE = 'purple-15'; -export const COLOR_BASE_PURPLE_15_CLASSNAME = 't-sage--color-purple-15'; -export const COLOR_BASE_PURPLE_20_HEX = '#c7cdfe'; -export const COLOR_BASE_PURPLE_20_CODE = 'purple-20'; -export const COLOR_BASE_PURPLE_20_CLASSNAME = 't-sage--color-purple-20'; -export const COLOR_BASE_PURPLE_30_HEX = '#a3acfd'; -export const COLOR_BASE_PURPLE_30_CODE = 'purple-30'; -export const COLOR_BASE_PURPLE_30_CLASSNAME = 't-sage--color-purple-30'; -export const COLOR_BASE_PURPLE_40_HEX = '#8081f9'; -export const COLOR_BASE_PURPLE_40_CODE = 'purple-40'; -export const COLOR_BASE_PURPLE_40_CLASSNAME = 't-sage--color-purple-40'; -export const COLOR_BASE_PURPLE_50_HEX = '#6a62f2'; +export const COLOR_BASE_PURPLE_50_HEX = '#fafbff'; export const COLOR_BASE_PURPLE_50_CODE = 'purple-50'; export const COLOR_BASE_PURPLE_50_CLASSNAME = 't-sage--color-purple-50'; -export const COLOR_BASE_PURPLE_60_HEX = '#533be5'; -export const COLOR_BASE_PURPLE_60_CODE = 'purple-60'; -export const COLOR_BASE_PURPLE_60_CLASSNAME = 't-sage--color-purple-60'; -export const COLOR_BASE_PURPLE_70_HEX = '#4f37cb'; -export const COLOR_BASE_PURPLE_70_CODE = 'purple-70'; -export const COLOR_BASE_PURPLE_70_CLASSNAME = 't-sage--color-purple-70'; -export const COLOR_BASE_PURPLE_80_HEX = '#402fa4'; -export const COLOR_BASE_PURPLE_80_CODE = 'purple-80'; -export const COLOR_BASE_PURPLE_80_CLASSNAME = 't-sage--color-purple-80'; -export const COLOR_BASE_PURPLE_90_HEX = '#372d82'; -export const COLOR_BASE_PURPLE_90_CODE = 'purple-90'; -export const COLOR_BASE_PURPLE_90_CLASSNAME = 't-sage--color-purple-90'; -export const COLOR_BASE_PURPLE_95_HEX = '#221b4b'; -export const COLOR_BASE_PURPLE_95_CODE = 'purple-95'; -export const COLOR_BASE_PURPLE_95_CLASSNAME = 't-sage--color-purple-95'; -export const COLOR_BASE_PURPLE_100_HEX = '#e0e4ff'; +export const COLOR_BASE_PURPLE_100_HEX = '#edf1ff'; export const COLOR_BASE_PURPLE_100_CODE = 'purple-100'; export const COLOR_BASE_PURPLE_100_CLASSNAME = 't-sage--color-purple-100'; -export const COLOR_BASE_PURPLE_200_HEX = '#a3acfd'; +export const COLOR_BASE_PURPLE_150_HEX = '#e0e4ff'; +export const COLOR_BASE_PURPLE_150_CODE = 'purple-150'; +export const COLOR_BASE_PURPLE_150_CLASSNAME = 't-sage--color-purple-150'; +export const COLOR_BASE_PURPLE_200_HEX = '#c7cdfe'; export const COLOR_BASE_PURPLE_200_CODE = 'purple-200'; export const COLOR_BASE_PURPLE_200_CLASSNAME = 't-sage--color-purple-200'; -export const COLOR_BASE_PURPLE_300_HEX = '#533be5'; +export const COLOR_BASE_PURPLE_300_HEX = '#a3acfd'; export const COLOR_BASE_PURPLE_300_CODE = 'purple-300'; export const COLOR_BASE_PURPLE_300_CLASSNAME = 't-sage--color-purple-300'; -export const COLOR_BASE_PURPLE_400_HEX = '#402fa4'; +export const COLOR_BASE_PURPLE_400_HEX = '#8081f9'; export const COLOR_BASE_PURPLE_400_CODE = 'purple-400'; export const COLOR_BASE_PURPLE_400_CLASSNAME = 't-sage--color-purple-400'; -export const COLOR_BASE_PURPLE_500_HEX = '#221b4b'; +export const COLOR_BASE_PURPLE_500_HEX = '#6a62f2'; export const COLOR_BASE_PURPLE_500_CODE = 'purple-500'; export const COLOR_BASE_PURPLE_500_CLASSNAME = 't-sage--color-purple-500'; +export const COLOR_BASE_PURPLE_600_HEX = '#533be5'; +export const COLOR_BASE_PURPLE_600_CODE = 'purple-600'; +export const COLOR_BASE_PURPLE_600_CLASSNAME = 't-sage--color-purple-600'; +export const COLOR_BASE_PURPLE_700_HEX = '#4f37cb'; +export const COLOR_BASE_PURPLE_700_CODE = 'purple-700'; +export const COLOR_BASE_PURPLE_700_CLASSNAME = 't-sage--color-purple-700'; +export const COLOR_BASE_PURPLE_800_HEX = '#402fa4'; +export const COLOR_BASE_PURPLE_800_CODE = 'purple-800'; +export const COLOR_BASE_PURPLE_800_CLASSNAME = 't-sage--color-purple-800'; +export const COLOR_BASE_PURPLE_900_HEX = '#372d82'; +export const COLOR_BASE_PURPLE_900_CODE = 'purple-900'; +export const COLOR_BASE_PURPLE_900_CLASSNAME = 't-sage--color-purple-900'; +export const COLOR_BASE_PURPLE_950_HEX = '#221b4b'; +export const COLOR_BASE_PURPLE_950_CODE = 'purple-950'; +export const COLOR_BASE_PURPLE_950_CLASSNAME = 't-sage--color-purple-950'; export const COLOR_BASE_CHARCOAL_100_HEX = '#828180'; export const COLOR_BASE_CHARCOAL_100_CODE = 'charcoal-100'; export const COLOR_BASE_CHARCOAL_100_CLASSNAME = 't-sage--color-charcoal-100'; @@ -788,71 +773,21 @@ export const COLOR = { }, }, PURPLE: { - 5: { - HEX: COLOR_BASE_PURPLE_5_HEX, - CODE: COLOR_BASE_PURPLE_5_CODE, - CLASSNAME: COLOR_BASE_PURPLE_5_CLASSNAME, - }, - 10: { - HEX: COLOR_BASE_PURPLE_10_HEX, - CODE: COLOR_BASE_PURPLE_10_CODE, - CLASSNAME: COLOR_BASE_PURPLE_10_CLASSNAME, - }, - 15: { - HEX: COLOR_BASE_PURPLE_15_HEX, - CODE: COLOR_BASE_PURPLE_15_CODE, - CLASSNAME: COLOR_BASE_PURPLE_15_CLASSNAME, - }, - 20: { - HEX: COLOR_BASE_PURPLE_20_HEX, - CODE: COLOR_BASE_PURPLE_20_CODE, - CLASSNAME: COLOR_BASE_PURPLE_20_CLASSNAME, - }, - 30: { - HEX: COLOR_BASE_PURPLE_30_HEX, - CODE: COLOR_BASE_PURPLE_30_CODE, - CLASSNAME: COLOR_BASE_PURPLE_30_CLASSNAME, - }, - 40: { - HEX: COLOR_BASE_PURPLE_40_HEX, - CODE: COLOR_BASE_PURPLE_40_CODE, - CLASSNAME: COLOR_BASE_PURPLE_40_CLASSNAME, - }, 50: { HEX: COLOR_BASE_PURPLE_50_HEX, CODE: COLOR_BASE_PURPLE_50_CODE, CLASSNAME: COLOR_BASE_PURPLE_50_CLASSNAME, }, - 60: { - HEX: COLOR_BASE_PURPLE_60_HEX, - CODE: COLOR_BASE_PURPLE_60_CODE, - CLASSNAME: COLOR_BASE_PURPLE_60_CLASSNAME, - }, - 70: { - HEX: COLOR_BASE_PURPLE_70_HEX, - CODE: COLOR_BASE_PURPLE_70_CODE, - CLASSNAME: COLOR_BASE_PURPLE_70_CLASSNAME, - }, - 80: { - HEX: COLOR_BASE_PURPLE_80_HEX, - CODE: COLOR_BASE_PURPLE_80_CODE, - CLASSNAME: COLOR_BASE_PURPLE_80_CLASSNAME, - }, - 90: { - HEX: COLOR_BASE_PURPLE_90_HEX, - CODE: COLOR_BASE_PURPLE_90_CODE, - CLASSNAME: COLOR_BASE_PURPLE_90_CLASSNAME, - }, - 95: { - HEX: COLOR_BASE_PURPLE_95_HEX, - CODE: COLOR_BASE_PURPLE_95_CODE, - CLASSNAME: COLOR_BASE_PURPLE_95_CLASSNAME, - }, 100: { HEX: COLOR_BASE_PURPLE_100_HEX, CODE: COLOR_BASE_PURPLE_100_CODE, CLASSNAME: COLOR_BASE_PURPLE_100_CLASSNAME, }, + 150: { + HEX: COLOR_BASE_PURPLE_150_HEX, + CODE: COLOR_BASE_PURPLE_150_CODE, + CLASSNAME: COLOR_BASE_PURPLE_150_CLASSNAME, + }, 200: { HEX: COLOR_BASE_PURPLE_200_HEX, CODE: COLOR_BASE_PURPLE_200_CODE, @@ -873,6 +808,31 @@ export const COLOR = { CODE: COLOR_BASE_PURPLE_500_CODE, CLASSNAME: COLOR_BASE_PURPLE_500_CLASSNAME, }, + 600: { + HEX: COLOR_BASE_PURPLE_600_HEX, + CODE: COLOR_BASE_PURPLE_600_CODE, + CLASSNAME: COLOR_BASE_PURPLE_600_CLASSNAME, + }, + 700: { + HEX: COLOR_BASE_PURPLE_700_HEX, + CODE: COLOR_BASE_PURPLE_700_CODE, + CLASSNAME: COLOR_BASE_PURPLE_700_CLASSNAME, + }, + 800: { + HEX: COLOR_BASE_PURPLE_800_HEX, + CODE: COLOR_BASE_PURPLE_800_CODE, + CLASSNAME: COLOR_BASE_PURPLE_800_CLASSNAME, + }, + 900: { + HEX: COLOR_BASE_PURPLE_900_HEX, + CODE: COLOR_BASE_PURPLE_900_CODE, + CLASSNAME: COLOR_BASE_PURPLE_900_CLASSNAME, + }, + 950: { + HEX: COLOR_BASE_PURPLE_950_HEX, + CODE: COLOR_BASE_PURPLE_950_CODE, + CLASSNAME: COLOR_BASE_PURPLE_950_CLASSNAME, + }, }, CHARCOAL: { 100: { diff --git a/style-dictionary/tokens/color/base.json b/style-dictionary/tokens/color/base.json index 1f2909bfbd..db7eb972b2 100644 --- a/style-dictionary/tokens/color/base.json +++ b/style-dictionary/tokens/color/base.json @@ -393,90 +393,65 @@ } }, "purple": { - "5": { - "hex": { "value": "#fafbff" }, - "code": { "value": "purple-5" }, - "classname": { "value": "t-sage--color-purple-5" } - }, - "10": { - "hex": { "value": "#edf1ff" }, - "code": { "value": "purple-10" }, - "classname": { "value": "t-sage--color-purple-10" } - }, - "15": { - "hex": { "value": "#e0e4ff" }, - "code": { "value": "purple-15" }, - "classname": { "value": "t-sage--color-purple-15" } - }, - "20": { - "hex": { "value": "#c7cdfe" }, - "code": { "value": "purple-20" }, - "classname": { "value": "t-sage--color-purple-20" } - }, - "30": { - "hex": { "value": "#a3acfd" }, - "code": { "value": "purple-30" }, - "classname": { "value": "t-sage--color-purple-30" } - }, - "40": { - "hex": { "value": "#8081f9" }, - "code": { "value": "purple-40" }, - "classname": { "value": "t-sage--color-purple-40" } - }, "50": { - "hex": { "value": "#6a62f2" }, + "hex": { "value": "#fafbff" }, "code": { "value": "purple-50" }, "classname": { "value": "t-sage--color-purple-50" } }, - "60": { - "hex": { "value": "#533be5" }, - "code": { "value": "purple-60" }, - "classname": { "value": "t-sage--color-purple-60" } - }, - "70": { - "hex": { "value": "#4f37cb" }, - "code": { "value": "purple-70" }, - "classname": { "value": "t-sage--color-purple-70" } - }, - "80": { - "hex": { "value": "#402fa4" }, - "code": { "value": "purple-80" }, - "classname": { "value": "t-sage--color-purple-80" } - }, - "90": { - "hex": { "value": "#372d82" }, - "code": { "value": "purple-90" }, - "classname": { "value": "t-sage--color-purple-90" } - }, - "95": { - "hex": { "value": "#221b4b" }, - "code": { "value": "purple-95" }, - "classname": { "value": "t-sage--color-purple-95" } - }, "100": { - "hex": { "value": "{color.base.purple.15.hex.value}" }, + "hex": { "value": "#edf1ff" }, "code": { "value": "purple-100" }, "classname": { "value": "t-sage--color-purple-100" } }, + "150": { + "hex": { "value": "#e0e4ff" }, + "code": { "value": "purple-150" }, + "classname": { "value": "t-sage--color-purple-150" } + }, "200": { - "hex": { "value": "{color.base.purple.30.hex.value}" }, + "hex": { "value": "#c7cdfe" }, "code": { "value": "purple-200" }, "classname": { "value": "t-sage--color-purple-200" } }, "300": { - "hex": { "value": "{color.base.purple.60.hex.value}" }, + "hex": { "value": "#a3acfd" }, "code": { "value": "purple-300" }, "classname": { "value": "t-sage--color-purple-300" } }, "400": { - "hex": { "value": "{color.base.purple.80.hex.value}" }, + "hex": { "value": "#8081f9" }, "code": { "value": "purple-400" }, "classname": { "value": "t-sage--color-purple-400" } }, "500": { - "hex": { "value": "{color.base.purple.95.hex.value}" }, + "hex": { "value": "#6a62f2" }, "code": { "value": "purple-500" }, "classname": { "value": "t-sage--color-purple-500" } + }, + "600": { + "hex": { "value": "#533be5" }, + "code": { "value": "purple-600" }, + "classname": { "value": "t-sage--color-purple-600" } + }, + "700": { + "hex": { "value": "#4f37cb" }, + "code": { "value": "purple-700" }, + "classname": { "value": "t-sage--color-purple-700" } + }, + "800": { + "hex": { "value": "#402fa4" }, + "code": { "value": "purple-800" }, + "classname": { "value": "t-sage--color-purple-800" } + }, + "900": { + "hex": { "value": "#372d82" }, + "code": { "value": "purple-900" }, + "classname": { "value": "t-sage--color-purple-900" } + }, + "950": { + "hex": { "value": "#221b4b" }, + "code": { "value": "purple-950" }, + "classname": { "value": "t-sage--color-purple-950" } } }, "charcoal": { diff --git a/style-dictionary/tokens/color/combos.json b/style-dictionary/tokens/color/combos.json index 92cdc0478a..e562bd3aa2 100644 --- a/style-dictionary/tokens/color/combos.json +++ b/style-dictionary/tokens/color/combos.json @@ -118,38 +118,38 @@ "locked": { "default": { "foreground": { - "value": "{color.base.purple.400.hex}" + "value": "{color.base.purple.800.hex}" }, "foreground-accent": { - "value": "{color.base.purple.500.hex}" + "value": "{color.base.purple.950.hex}" }, "background": { - "value": "{color.base.purple.100.hex}" + "value": "{color.base.purple.150.hex}" }, "background-accent": { - "value": "{color.base.purple.200.hex}" + "value": "{color.base.purple.300.hex}" }, "icon-background-accent": { - "value": "{color.base.purple.300.hex}" + "value": "{color.base.purple.600.hex}" } }, "subtle": { "foreground": { - "value": "{color.base.purple.400.hex}" + "value": "{color.base.purple.800.hex}" }, "foreground-accent": { - "value": "{color.base.purple.300.hex}" + "value": "{color.base.purple.600.hex}" }, "background": { - "value": "{color.base.purple.200.hex}" + "value": "{color.base.purple.300.hex}" } }, "bold": { "foreground": { - "value": "{color.base.purple.100.hex}" + "value": "{color.base.purple.150.hex}" }, "background": { - "value": "{color.base.purple.300.hex}" + "value": "{color.base.purple.600.hex}" } } }, diff --git a/style-dictionary/tokens/color/core.json b/style-dictionary/tokens/color/core.json index f24070a987..1868c29414 100644 --- a/style-dictionary/tokens/color/core.json +++ b/style-dictionary/tokens/color/core.json @@ -26,7 +26,7 @@ "value": "{color.base.orange.300.hex}" }, "purple": { - "value": "{color.base.purple.300.hex}" + "value": "{color.base.purple.600.hex}" }, "charcoal": { "value": "{color.base.charcoal.300.hex}" From d10e7762f992b69eca957d9aa06e2e3b66f9f167 Mon Sep 17 00:00:00 2001 From: Quinton Jason Date: Tue, 20 Aug 2024 17:52:43 -0500 Subject: [PATCH 12/31] fix: update grey color token names to 3 digits --- .../stylesheets/docs/_colors.scss | 2 +- .../sage-frontend/stylesheets/docs/_grid.scss | 2 +- .../sage-frontend/stylesheets/docs/_icon.scss | 4 +- .../stylesheets/docs/_rouge_theme.scss | 2 +- .../stylesheets/docs/_specs.scss | 4 +- .../sage-frontend/stylesheets/docs/_text.scss | 2 +- .../app/sage_tokens/sage_dictionary.rb | 144 ++++----- .../lib/stylesheets/components/_alert.scss | 4 +- .../stylesheets/components/_assistant.scss | 4 +- .../lib/stylesheets/components/_avatar.scss | 4 +- .../lib/stylesheets/components/_banner.scss | 2 +- .../lib/stylesheets/components/_button.scss | 22 +- .../lib/stylesheets/components/_card.scss | 4 +- .../stylesheets/components/_catalog_item.scss | 4 +- .../lib/stylesheets/components/_checkbox.scss | 6 +- .../lib/stylesheets/components/_choice.scss | 4 +- .../stylesheets/components/_copy_text.scss | 2 +- .../stylesheets/components/_data_card.scss | 4 +- .../lib/stylesheets/components/_divider.scss | 2 +- .../lib/stylesheets/components/_dropdown.scss | 8 +- .../stylesheets/components/_empty_state.scss | 4 +- .../components/_expandable_card.scss | 2 +- .../lib/stylesheets/components/_hint.scss | 2 +- .../stylesheets/components/_indicator.scss | 2 +- .../stylesheets/components/_input_group.scss | 6 +- .../lib/stylesheets/components/_list.scss | 4 +- .../lib/stylesheets/components/_loader.scss | 2 +- .../stylesheets/components/_menu_button.scss | 2 +- .../lib/stylesheets/components/_meter.scss | 2 +- .../lib/stylesheets/components/_nav.scss | 6 +- .../stylesheets/components/_page_heading.scss | 2 +- .../stylesheets/components/_pagination.scss | 2 +- .../lib/stylesheets/components/_panel.scss | 2 +- .../components/_panel_controls.scss | 2 +- .../stylesheets/components/_panel_figure.scss | 2 +- .../stylesheets/components/_progress_bar.scss | 2 +- .../lib/stylesheets/components/_radio.scss | 2 +- .../lib/stylesheets/components/_search.scss | 2 +- .../lib/stylesheets/components/_sortable.scss | 6 +- .../lib/stylesheets/components/_switch.scss | 6 +- .../lib/stylesheets/components/_tab.scss | 4 +- .../lib/stylesheets/components/_table.scss | 2 +- .../lib/stylesheets/components/_tabs.scss | 4 +- .../lib/stylesheets/components/_tag.scss | 4 +- .../lib/stylesheets/components/_toast.scss | 2 +- .../stylesheets/components/_typeahead.scss | 2 +- .../lib/stylesheets/core/_variables.scss | 10 +- .../lib/stylesheets/dictionary/_tokens.scss | 289 +++++++----------- .../lib/stylesheets/tokens/_border.scss | 4 +- .../tokens/_border_interactive.scss | 4 +- .../lib/stylesheets/tokens/_shadow.scss | 22 +- .../lib/configs/dictionary/tokens.js | 144 ++++----- style-dictionary/tokens/color/base.json | 103 +++---- style-dictionary/tokens/color/combos.json | 6 +- 54 files changed, 350 insertions(+), 540 deletions(-) diff --git a/docs/lib/sage-frontend/stylesheets/docs/_colors.scss b/docs/lib/sage-frontend/stylesheets/docs/_colors.scss index 8bca6c9bce..b246030378 100644 --- a/docs/lib/sage-frontend/stylesheets/docs/_colors.scss +++ b/docs/lib/sage-frontend/stylesheets/docs/_colors.scss @@ -58,7 +58,7 @@ font-size: sage-font-size(body); background: $hex; - @if ($name == grey and $value > 40) { + @if ($name == grey and $value > 400) { color: sage-color(white); } @else if ($name == white or $name == grey) { diff --git a/docs/lib/sage-frontend/stylesheets/docs/_grid.scss b/docs/lib/sage-frontend/stylesheets/docs/_grid.scss index 1b08b21ddf..64472af66b 100644 --- a/docs/lib/sage-frontend/stylesheets/docs/_grid.scss +++ b/docs/lib/sage-frontend/stylesheets/docs/_grid.scss @@ -9,7 +9,7 @@ margin-bottom: sage-spacing(md); padding: sage-spacing(xs) sage-spacing(md); text-align: center; - background: sage-color(grey, 300); + background: sage-color(grey, 200); border-radius: sage-border(radius); [class*="sage-col--align-"] & { diff --git a/docs/lib/sage-frontend/stylesheets/docs/_icon.scss b/docs/lib/sage-frontend/stylesheets/docs/_icon.scss index c6c7142c92..6891de8ec9 100644 --- a/docs/lib/sage-frontend/stylesheets/docs/_icon.scss +++ b/docs/lib/sage-frontend/stylesheets/docs/_icon.scss @@ -12,7 +12,7 @@ margin-bottom: sage-spacing(); padding: sage-spacing(lg) sage-spacing(sm); text-align: center; - background: sage-color(grey, 200); + background: sage-color(grey, 150); border-radius: sage-border(radius); cursor: pointer; } @@ -29,7 +29,7 @@ margin-bottom: sage-spacing(sm); padding: sage-spacing(sm); text-align: right; - background: sage-color(grey, 200); + background: sage-color(grey, 150); border-radius: sage-border(radius); i { line-height: 1; diff --git a/docs/lib/sage-frontend/stylesheets/docs/_rouge_theme.scss b/docs/lib/sage-frontend/stylesheets/docs/_rouge_theme.scss index d48372cd06..65cbcbad0f 100644 --- a/docs/lib/sage-frontend/stylesheets/docs/_rouge_theme.scss +++ b/docs/lib/sage-frontend/stylesheets/docs/_rouge_theme.scss @@ -1,5 +1,5 @@ // background -$-color-1: sage-color(grey, 300); +$-color-1: sage-color(grey, 200); // Whitespace $-color-24: sage-color(charcoal, 200); // Name entity diff --git a/docs/lib/sage-frontend/stylesheets/docs/_specs.scss b/docs/lib/sage-frontend/stylesheets/docs/_specs.scss index 7f3b680aee..2dafe9ff9a 100644 --- a/docs/lib/sage-frontend/stylesheets/docs/_specs.scss +++ b/docs/lib/sage-frontend/stylesheets/docs/_specs.scss @@ -8,14 +8,14 @@ th { padding: 4px; color: sage-color(charcoal, 200); - border-bottom: 1px solid sage-color(grey, 400); + border-bottom: 1px solid sage-color(grey, 300); } td { padding: 4px; font-size: sage-font-size(body-xs); vertical-align: middle; - border-bottom: 1px solid sage-color(grey, 300); + border-bottom: 1px solid sage-color(grey, 200); } tfoot td { diff --git a/docs/lib/sage-frontend/stylesheets/docs/_text.scss b/docs/lib/sage-frontend/stylesheets/docs/_text.scss index 61bca29212..b0aa73ae62 100644 --- a/docs/lib/sage-frontend/stylesheets/docs/_text.scss +++ b/docs/lib/sage-frontend/stylesheets/docs/_text.scss @@ -8,7 +8,7 @@ code { display: inline-block; padding: 0 sage-spacing(2xs); font-size: 0.9em; - background-color: sage-color(grey, 300); + background-color: sage-color(grey, 200); } pre { 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 ad570d5aba..574fc3d05d 100644 --- a/docs/lib/sage_rails/app/sage_tokens/sage_dictionary.rb +++ b/docs/lib/sage_rails/app/sage_tokens/sage_dictionary.rb @@ -297,57 +297,42 @@ module SageDictionary SD_SAGE_COLOR_BASE_CHARCOAL_500_HEX = "#1a1a19" SD_SAGE_COLOR_BASE_CHARCOAL_500_CODE = "charcoal-500" SD_SAGE_COLOR_BASE_CHARCOAL_500_CLASSNAME = "t-sage--color-charcoal-500" - SD_SAGE_COLOR_BASE_GREY_5_HEX = "#fcfcfc" - SD_SAGE_COLOR_BASE_GREY_5_CODE = "grey-5" - SD_SAGE_COLOR_BASE_GREY_5_CLASSNAME = "t-sage--color-grey-5" - SD_SAGE_COLOR_BASE_GREY_10_HEX = "#f8f8f8" - SD_SAGE_COLOR_BASE_GREY_10_CODE = "grey-10" - SD_SAGE_COLOR_BASE_GREY_10_CLASSNAME = "t-sage--color-grey-10" - SD_SAGE_COLOR_BASE_GREY_15_HEX = "#f0f0f0" - SD_SAGE_COLOR_BASE_GREY_15_CODE = "grey-15" - SD_SAGE_COLOR_BASE_GREY_15_CLASSNAME = "t-sage--color-grey-15" - SD_SAGE_COLOR_BASE_GREY_20_HEX = "#e4e4e4" - SD_SAGE_COLOR_BASE_GREY_20_CODE = "grey-20" - SD_SAGE_COLOR_BASE_GREY_20_CLASSNAME = "t-sage--color-grey-20" - SD_SAGE_COLOR_BASE_GREY_30_HEX = "#d2d1d1" - SD_SAGE_COLOR_BASE_GREY_30_CODE = "grey-30" - SD_SAGE_COLOR_BASE_GREY_30_CLASSNAME = "t-sage--color-grey-30" - SD_SAGE_COLOR_BASE_GREY_40_HEX = "#bbbab9" - SD_SAGE_COLOR_BASE_GREY_40_CODE = "grey-40" - SD_SAGE_COLOR_BASE_GREY_40_CLASSNAME = "t-sage--color-grey-40" - SD_SAGE_COLOR_BASE_GREY_50_HEX = "#9b9a98" + SD_SAGE_COLOR_BASE_GREY_50_HEX = "#fcfcfc" SD_SAGE_COLOR_BASE_GREY_50_CODE = "grey-50" SD_SAGE_COLOR_BASE_GREY_50_CLASSNAME = "t-sage--color-grey-50" - SD_SAGE_COLOR_BASE_GREY_60_HEX = "#828180" - SD_SAGE_COLOR_BASE_GREY_60_CODE = "grey-60" - SD_SAGE_COLOR_BASE_GREY_60_CLASSNAME = "t-sage--color-grey-60" - SD_SAGE_COLOR_BASE_GREY_70_HEX = "#6c6a69" - SD_SAGE_COLOR_BASE_GREY_70_CODE = "grey-70" - SD_SAGE_COLOR_BASE_GREY_70_CLASSNAME = "t-sage--color-grey-70" - SD_SAGE_COLOR_BASE_GREY_80_HEX = "#4d4d4c" - SD_SAGE_COLOR_BASE_GREY_80_CODE = "grey-80" - SD_SAGE_COLOR_BASE_GREY_80_CLASSNAME = "t-sage--color-grey-80" - SD_SAGE_COLOR_BASE_GREY_90_HEX = "#343332" - SD_SAGE_COLOR_BASE_GREY_90_CODE = "grey-90" - SD_SAGE_COLOR_BASE_GREY_90_CLASSNAME = "t-sage--color-grey-90" - SD_SAGE_COLOR_BASE_GREY_95_HEX = "#1a1a19" - SD_SAGE_COLOR_BASE_GREY_95_CODE = "grey-95" - SD_SAGE_COLOR_BASE_GREY_95_CLASSNAME = "t-sage--color-grey-95" SD_SAGE_COLOR_BASE_GREY_100_HEX = "#f8f8f8" SD_SAGE_COLOR_BASE_GREY_100_CODE = "grey-100" SD_SAGE_COLOR_BASE_GREY_100_CLASSNAME = "t-sage--color-grey-100" - SD_SAGE_COLOR_BASE_GREY_200_HEX = "#f0f0f0" + SD_SAGE_COLOR_BASE_GREY_150_HEX = "#f0f0f0" + SD_SAGE_COLOR_BASE_GREY_150_CODE = "grey-15" + SD_SAGE_COLOR_BASE_GREY_150_CLASSNAME = "t-sage--color-grey-150" + SD_SAGE_COLOR_BASE_GREY_200_HEX = "#e4e4e4" SD_SAGE_COLOR_BASE_GREY_200_CODE = "grey-200" SD_SAGE_COLOR_BASE_GREY_200_CLASSNAME = "t-sage--color-grey-200" - SD_SAGE_COLOR_BASE_GREY_300_HEX = "#e4e4e4" + SD_SAGE_COLOR_BASE_GREY_300_HEX = "#d2d1d1" SD_SAGE_COLOR_BASE_GREY_300_CODE = "grey-300" SD_SAGE_COLOR_BASE_GREY_300_CLASSNAME = "t-sage--color-grey-300" - SD_SAGE_COLOR_BASE_GREY_400_HEX = "#d2d1d1" + SD_SAGE_COLOR_BASE_GREY_400_HEX = "#bbbab9" SD_SAGE_COLOR_BASE_GREY_400_CODE = "grey-400" SD_SAGE_COLOR_BASE_GREY_400_CLASSNAME = "t-sage--color-grey-400" SD_SAGE_COLOR_BASE_GREY_500_HEX = "#9b9a98" SD_SAGE_COLOR_BASE_GREY_500_CODE = "grey-500" SD_SAGE_COLOR_BASE_GREY_500_CLASSNAME = "t-sage--color-grey-500" + SD_SAGE_COLOR_BASE_GREY_600_HEX = "#828180" + SD_SAGE_COLOR_BASE_GREY_600_CODE = "grey-600" + SD_SAGE_COLOR_BASE_GREY_600_CLASSNAME = "t-sage--color-grey-600" + SD_SAGE_COLOR_BASE_GREY_700_HEX = "#6c6a69" + SD_SAGE_COLOR_BASE_GREY_700_CODE = "grey-700" + SD_SAGE_COLOR_BASE_GREY_700_CLASSNAME = "t-sage--color-grey-700" + SD_SAGE_COLOR_BASE_GREY_800_HEX = "#4d4d4c" + SD_SAGE_COLOR_BASE_GREY_800_CODE = "grey-800" + SD_SAGE_COLOR_BASE_GREY_800_CLASSNAME = "t-sage--color-grey-800" + SD_SAGE_COLOR_BASE_GREY_900_HEX = "#343332" + SD_SAGE_COLOR_BASE_GREY_900_CODE = "grey-900" + SD_SAGE_COLOR_BASE_GREY_900_CLASSNAME = "t-sage--color-grey-900" + SD_SAGE_COLOR_BASE_GREY_950_HEX = "#1a1a19" + SD_SAGE_COLOR_BASE_GREY_950_CODE = "grey-950" + SD_SAGE_COLOR_BASE_GREY_950_CLASSNAME = "t-sage--color-grey-950" SD_SAGE_COLOR_BASE_WHITE_100_HEX = "#fff" SD_SAGE_COLOR_BASE_WHITE_100_CODE = "white-100" SD_SAGE_COLOR_BASE_WHITE_100_CLASSNAME = "t-sage--color-white-100" @@ -864,71 +849,21 @@ module SageDictionary }, }, "GREY": { - "5": { - "HEX": SD_SAGE_COLOR_BASE_GREY_5_HEX, - "CODE": SD_SAGE_COLOR_BASE_GREY_5_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_5_CLASSNAME, - }, - "10": { - "HEX": SD_SAGE_COLOR_BASE_GREY_10_HEX, - "CODE": SD_SAGE_COLOR_BASE_GREY_10_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_10_CLASSNAME, - }, - "15": { - "HEX": SD_SAGE_COLOR_BASE_GREY_15_HEX, - "CODE": SD_SAGE_COLOR_BASE_GREY_15_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_15_CLASSNAME, - }, - "20": { - "HEX": SD_SAGE_COLOR_BASE_GREY_20_HEX, - "CODE": SD_SAGE_COLOR_BASE_GREY_20_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_20_CLASSNAME, - }, - "30": { - "HEX": SD_SAGE_COLOR_BASE_GREY_30_HEX, - "CODE": SD_SAGE_COLOR_BASE_GREY_30_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_30_CLASSNAME, - }, - "40": { - "HEX": SD_SAGE_COLOR_BASE_GREY_40_HEX, - "CODE": SD_SAGE_COLOR_BASE_GREY_40_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_40_CLASSNAME, - }, "50": { "HEX": SD_SAGE_COLOR_BASE_GREY_50_HEX, "CODE": SD_SAGE_COLOR_BASE_GREY_50_CODE, "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_50_CLASSNAME, }, - "60": { - "HEX": SD_SAGE_COLOR_BASE_GREY_60_HEX, - "CODE": SD_SAGE_COLOR_BASE_GREY_60_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_60_CLASSNAME, - }, - "70": { - "HEX": SD_SAGE_COLOR_BASE_GREY_70_HEX, - "CODE": SD_SAGE_COLOR_BASE_GREY_70_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_70_CLASSNAME, - }, - "80": { - "HEX": SD_SAGE_COLOR_BASE_GREY_80_HEX, - "CODE": SD_SAGE_COLOR_BASE_GREY_80_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_80_CLASSNAME, - }, - "90": { - "HEX": SD_SAGE_COLOR_BASE_GREY_90_HEX, - "CODE": SD_SAGE_COLOR_BASE_GREY_90_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_90_CLASSNAME, - }, - "95": { - "HEX": SD_SAGE_COLOR_BASE_GREY_95_HEX, - "CODE": SD_SAGE_COLOR_BASE_GREY_95_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_95_CLASSNAME, - }, "100": { "HEX": SD_SAGE_COLOR_BASE_GREY_100_HEX, "CODE": SD_SAGE_COLOR_BASE_GREY_100_CODE, "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_100_CLASSNAME, }, + "150": { + "HEX": SD_SAGE_COLOR_BASE_GREY_150_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREY_150_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_150_CLASSNAME, + }, "200": { "HEX": SD_SAGE_COLOR_BASE_GREY_200_HEX, "CODE": SD_SAGE_COLOR_BASE_GREY_200_CODE, @@ -949,6 +884,31 @@ module SageDictionary "CODE": SD_SAGE_COLOR_BASE_GREY_500_CODE, "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_500_CLASSNAME, }, + "600": { + "HEX": SD_SAGE_COLOR_BASE_GREY_600_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREY_600_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_600_CLASSNAME, + }, + "700": { + "HEX": SD_SAGE_COLOR_BASE_GREY_700_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREY_700_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_700_CLASSNAME, + }, + "800": { + "HEX": SD_SAGE_COLOR_BASE_GREY_800_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREY_800_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_800_CLASSNAME, + }, + "900": { + "HEX": SD_SAGE_COLOR_BASE_GREY_900_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREY_900_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_900_CLASSNAME, + }, + "950": { + "HEX": SD_SAGE_COLOR_BASE_GREY_950_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREY_950_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_950_CLASSNAME, + }, }, "WHITE": { "100": { diff --git a/packages/sage-assets/lib/stylesheets/components/_alert.scss b/packages/sage-assets/lib/stylesheets/components/_alert.scss index 7ede7bcc12..26d07a6e10 100644 --- a/packages/sage-assets/lib/stylesheets/components/_alert.scss +++ b/packages/sage-assets/lib/stylesheets/components/_alert.scss @@ -9,8 +9,8 @@ // `_button.scss`, `sage_alert.rb`, `_sage_alert.html.erb`, and `Alert.jsx` // $-alert-background-colors: ( - default: sage-color(grey, 300), - draft: sage-color(grey, 300), + default: sage-color(grey, 200), + draft: sage-color(grey, 200), info: sage-color(primary, 100), published: sage-color(sage, 100), success: sage-color(sage, 100), diff --git a/packages/sage-assets/lib/stylesheets/components/_assistant.scss b/packages/sage-assets/lib/stylesheets/components/_assistant.scss index 21c8badb74..a7f34a78b4 100644 --- a/packages/sage-assets/lib/stylesheets/components/_assistant.scss +++ b/packages/sage-assets/lib/stylesheets/components/_assistant.scss @@ -8,9 +8,9 @@ $-assistant-height: $sage-assistant-height; $-assistant-branding-height: rem(20px); $-assistant-search-height: rem(40px); -$-assistant-search-bg-color: sage-color(grey, 300); +$-assistant-search-bg-color: sage-color(grey, 200); $-assistant-search-bg-opacity: 0.1; -$-assistant-search-placeholder-color: sage-color(grey, 400); +$-assistant-search-placeholder-color: sage-color(grey, 300); $-assistant-search-placeholder-transition: color 0.15s ease-in-out, opacity 0.15s ease-in-out; diff --git a/packages/sage-assets/lib/stylesheets/components/_avatar.scss b/packages/sage-assets/lib/stylesheets/components/_avatar.scss index 8c5448879e..1d8fc10b8d 100644 --- a/packages/sage-assets/lib/stylesheets/components/_avatar.scss +++ b/packages/sage-assets/lib/stylesheets/components/_avatar.scss @@ -10,11 +10,11 @@ $-avatar-max-size: rem(128px); $-avatar-ring-colors: ( charcoal: ( main: sage-color(charcoal, 500), - bg: sage-color(grey, 300) + bg: sage-color(grey, 200) ), grey: ( main: sage-color(charcoal, 500), - bg: sage-color(grey, 300) + bg: sage-color(grey, 200) ), purple: ( main: sage-color(purple, 600), diff --git a/packages/sage-assets/lib/stylesheets/components/_banner.scss b/packages/sage-assets/lib/stylesheets/components/_banner.scss index e82edbf80f..db63ef2a51 100644 --- a/packages/sage-assets/lib/stylesheets/components/_banner.scss +++ b/packages/sage-assets/lib/stylesheets/components/_banner.scss @@ -14,7 +14,7 @@ $-banner-colors: ( icon: "flag", ), secondary: ( - background: sage-color(grey, 300), + background: sage-color(grey, 200), text: sage-color(charcoal, 500), text-hover: sage-color(charcoal, 300), icon: "info-circle", diff --git a/packages/sage-assets/lib/stylesheets/components/_button.scss b/packages/sage-assets/lib/stylesheets/components/_button.scss index 3193e1c6a9..5be89eefb7 100644 --- a/packages/sage-assets/lib/stylesheets/components/_button.scss +++ b/packages/sage-assets/lib/stylesheets/components/_button.scss @@ -64,8 +64,8 @@ $-btn-base-styles: ( ), disabled: ( color: sage-color(charcoal, 100), - background-color: sage-color(grey, 300), - border-color: sage-color(grey, 300), + background-color: sage-color(grey, 200), + border-color: sage-color(grey, 200), ) ), secondary: ( @@ -123,7 +123,7 @@ $-btn-subtle-styles: ( primary: ( default: sage-color(charcoal, 400), hover: sage-color(charcoal, 400), - hover-background: sage-color(grey, 200), + hover-background: sage-color(grey, 150), focus: sage-color(charcoal, 400), focus-outline: sage-color(purple, 30), disabled: sage-color(charcoal, 100), @@ -131,7 +131,7 @@ $-btn-subtle-styles: ( secondary: ( default: sage-color(charcoal, 400), hover: sage-color(charcoal, 400), - hover-background: sage-color(grey, 200), + hover-background: sage-color(grey, 150), focus: sage-color(charcoal, 400), focus-outline: sage-color(purple, 30), disabled: sage-color(charcoal, 100), @@ -149,8 +149,8 @@ $-btn-subtle-styles: ( // NOTE: the following colors should be kept in sync // with the colors in `_alert.scss` $-alert-close-btn-background-colors: ( - default: sage-color(grey, 400), - draft: sage-color(grey, 400), + default: sage-color(grey, 300), + draft: sage-color(grey, 300), info: sage-color(primary, 200), published: sage-color(sage, 200), success: sage-color(sage, 200), @@ -317,7 +317,7 @@ $-btn-loading-min-height: rem(36px); bottom: rem(1px); height: rem(38px); background-color: sage-color(white); - box-shadow: rem(-1px) 0 0 0 sage-color(grey, 400); + box-shadow: rem(-1px) 0 0 0 sage-color(grey, 300); border-color: transparent; @include sage-focus-outline--update-color(transparent); @@ -472,7 +472,7 @@ $-btn-loading-min-height: rem(36px); } &:hover { - background-color: sage-color(grey, 300); + background-color: sage-color(grey, 200); } &.sage-btn--selected { @@ -612,7 +612,7 @@ a.sage-btn { &[aria-disabled="true"] { color: sage-color(charcoal, 100); background-color: sage-color(white); - border-color: sage-color(grey, 300); + border-color: sage-color(grey, 200); } } @@ -752,7 +752,7 @@ a.sage-btn { .sage-assistant & { @include sage-focus-outline--update-color(sage-color(white)); - color: sage-color(grey, 200); + color: sage-color(grey, 150); border-color: transparent; &:hover { @@ -860,5 +860,5 @@ a.sage-btn { .sage-btn-group--border-top { padding-top: sage-spacing(lg); - border-top: 1px solid sage-color(grey, 400); + border-top: 1px solid sage-color(grey, 300); } diff --git a/packages/sage-assets/lib/stylesheets/components/_card.scss b/packages/sage-assets/lib/stylesheets/components/_card.scss index f469d911f3..6ad1d41226 100644 --- a/packages/sage-assets/lib/stylesheets/components/_card.scss +++ b/packages/sage-assets/lib/stylesheets/components/_card.scss @@ -26,7 +26,7 @@ $-sage-card-background: transparent; border-color: sage-color(white); @include sage-dashed-border( $border-radius: sage-border(radius), - $color: sage-color(grey, 400), + $color: sage-color(grey, 300), ); } @@ -103,7 +103,7 @@ $-sage-card-background: transparent; top: 50%; width: 100%; height: 1px; - background: sage-color(grey, 300); + background: sage-color(grey, 200); } &::after { content: attr(data-divider-label); diff --git a/packages/sage-assets/lib/stylesheets/components/_catalog_item.scss b/packages/sage-assets/lib/stylesheets/components/_catalog_item.scss index e488c5bf22..405c7f8835 100644 --- a/packages/sage-assets/lib/stylesheets/components/_catalog_item.scss +++ b/packages/sage-assets/lib/stylesheets/components/_catalog_item.scss @@ -44,7 +44,7 @@ $-catalogue-item-image-height-mobile: rem(120px); } &.sage-catalog-item--loading { - background-color: sage-color(grey, 200); + background-color: sage-color(grey, 150); cursor: wait; } @@ -94,7 +94,7 @@ $-catalogue-item-image-height-mobile: rem(120px); grid-area: img; overflow: hidden; min-height: $-catalogue-item-image-height-min; - background: sage-color(grey, 300); + background: sage-color(grey, 200); border-radius: sage-border(radius); border: sage-border(); diff --git a/packages/sage-assets/lib/stylesheets/components/_checkbox.scss b/packages/sage-assets/lib/stylesheets/components/_checkbox.scss index 22668c7b5a..6a9bc76afc 100644 --- a/packages/sage-assets/lib/stylesheets/components/_checkbox.scss +++ b/packages/sage-assets/lib/stylesheets/components/_checkbox.scss @@ -8,11 +8,11 @@ // Colors // $-checkbox-color-default: sage-color(grey, 500); -$-checkbox-color-default-border: sage-color(grey, 400); +$-checkbox-color-default-border: sage-color(grey, 300); $-checkbox-color-checked: sage-color(charcoal, 400); $-checkbox-color-checked-hover: sage-color(charcoal, 500); -$-checkbox-color-disabled: sage-color(grey, 200); -$-checkbox-color-disabled-border: sage-color(grey, 300); +$-checkbox-color-disabled: sage-color(grey, 150); +$-checkbox-color-disabled-border: sage-color(grey, 200); $-checkbox-color-disabled-checked: sage-color(charcoal, 100); $-checkbox-color-error: sage-color(red, 500); diff --git a/packages/sage-assets/lib/stylesheets/components/_choice.scss b/packages/sage-assets/lib/stylesheets/components/_choice.scss index c4a777f18d..9817a4c7db 100644 --- a/packages/sage-assets/lib/stylesheets/components/_choice.scss +++ b/packages/sage-assets/lib/stylesheets/components/_choice.scss @@ -82,12 +82,12 @@ $-choice-radio-color-checked-inner: map-get($sage-radio-colors, checked-inner); &[aria-disabled="true"], &:disabled { - background-color: sage-color(grey, 200); + background-color: sage-color(grey, 150); cursor: default; pointer-events: none; &::before { - background-color: sage-color(grey, 300); + background-color: sage-color(grey, 200); } &:hover::before { diff --git a/packages/sage-assets/lib/stylesheets/components/_copy_text.scss b/packages/sage-assets/lib/stylesheets/components/_copy_text.scss index 93eccd598e..bbf7d71efb 100644 --- a/packages/sage-assets/lib/stylesheets/components/_copy_text.scss +++ b/packages/sage-assets/lib/stylesheets/components/_copy_text.scss @@ -6,7 +6,7 @@ $-copy-text-border: 1px solid sage-color(grey, 400); -$-copy-text-border-focus-color: sage-color(purple, 30); +$-copy-text-border-focus-color: sage-color(purple, 300); $-copy-text-border-hover-color: sage-color(grey, 500); $-copy-text-color: sage-color(charcoal, 400); $-copy-text-color-hover: sage-color(charcoal, 500); diff --git a/packages/sage-assets/lib/stylesheets/components/_data_card.scss b/packages/sage-assets/lib/stylesheets/components/_data_card.scss index 7c8a9667b7..f78b1c66d7 100644 --- a/packages/sage-assets/lib/stylesheets/components/_data_card.scss +++ b/packages/sage-assets/lib/stylesheets/components/_data_card.scss @@ -7,7 +7,7 @@ $-data-card-colors: ( default: ( - border-color: sage-color(grey, 400), + border-color: sage-color(grey, 300), text-color: sage-color(charcoal, 400), ), danger: ( @@ -121,7 +121,7 @@ $-data-card-padding: sage-spacing(xs); .sage-data-card-scroll-container &:not(:last-child) { padding-right: sage-spacing(md); - border-right: 1px solid sage-color(grey, 400); + border-right: 1px solid sage-color(grey, 300); } .sage-data-card-scroll-container &:not(:first-child) { diff --git a/packages/sage-assets/lib/stylesheets/components/_divider.scss b/packages/sage-assets/lib/stylesheets/components/_divider.scss index 0c37619a96..4b53ae54df 100644 --- a/packages/sage-assets/lib/stylesheets/components/_divider.scss +++ b/packages/sage-assets/lib/stylesheets/components/_divider.scss @@ -9,7 +9,7 @@ height: rem(1px); width: 100%; margin: 0; - background: var(--sage-divider-background-color, sage-color(grey, 300)); + background: var(--sage-divider-background-color, sage-color(grey, 200)); border: 0; &--vertical { diff --git a/packages/sage-assets/lib/stylesheets/components/_dropdown.scss b/packages/sage-assets/lib/stylesheets/components/_dropdown.scss index 4c788da798..8a6b1425e7 100644 --- a/packages/sage-assets/lib/stylesheets/components/_dropdown.scss +++ b/packages/sage-assets/lib/stylesheets/components/_dropdown.scss @@ -134,13 +134,13 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs); .sage-dropdown__item--border-before { padding-top: sage-spacing(xs); margin-top: sage-spacing(xs); - border-top: 1px solid sage-color(grey, 300); + border-top: 1px solid sage-color(grey, 200); } .sage-dropdown__item--border-after { padding-bottom: sage-spacing(xs); margin-bottom: sage-spacing(xs); - border-bottom: 1px solid sage-color(grey, 300); + border-bottom: 1px solid sage-color(grey, 200); } .sage-dropdown__item--disabled { @@ -188,7 +188,7 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs); &:hover { - background-color: sage-color(grey, 300); + background-color: sage-color(grey, 200); } &:focus-within { @@ -253,7 +253,7 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs); &:hover { color: sage-color(charcoal, 400); - background-color: sage-color(grey, 300); + background-color: sage-color(grey, 200); } } diff --git a/packages/sage-assets/lib/stylesheets/components/_empty_state.scss b/packages/sage-assets/lib/stylesheets/components/_empty_state.scss index e2c15fb632..583dd707f4 100644 --- a/packages/sage-assets/lib/stylesheets/components/_empty_state.scss +++ b/packages/sage-assets/lib/stylesheets/components/_empty_state.scss @@ -78,7 +78,7 @@ $-empty-state-icon-compact-size: rem(56px); .sage-empty-state__title { @extend %t-sage-heading-3; - color: sage-color(grey, 90); + color: sage-color(grey, 900); word-wrap: break-word; &:not(:only-child) { @@ -94,5 +94,5 @@ $-empty-state-icon-compact-size: rem(56px); .sage-empty-state__text, .sage-empty-state__custom-content { - color: sage-color(grey, 70); + color: sage-color(grey, 700); } diff --git a/packages/sage-assets/lib/stylesheets/components/_expandable_card.scss b/packages/sage-assets/lib/stylesheets/components/_expandable_card.scss index 8b36a80038..754f3ac421 100644 --- a/packages/sage-assets/lib/stylesheets/components/_expandable_card.scss +++ b/packages/sage-assets/lib/stylesheets/components/_expandable_card.scss @@ -6,7 +6,7 @@ $-expandable-card-bg-color: sage-color(white); -$-expandable-card-border-color: sage-color(grey, 400); +$-expandable-card-border-color: sage-color(grey, 300); $-expandable-card-border-radius: sage-border(radius); $-expandable-card-padding: sage-spacing(sm); $-expandable-card-padding-xs: sage-spacing(xs); diff --git a/packages/sage-assets/lib/stylesheets/components/_hint.scss b/packages/sage-assets/lib/stylesheets/components/_hint.scss index 7beb28c3a6..497104bc31 100644 --- a/packages/sage-assets/lib/stylesheets/components/_hint.scss +++ b/packages/sage-assets/lib/stylesheets/components/_hint.scss @@ -6,7 +6,7 @@ // Colors $-hint-text-color: sage-color(charcoal, 400); -$-hint-background-color: sage-color(grey, 300); +$-hint-background-color: sage-color(grey, 200); .sage-hint { display: flex; diff --git a/packages/sage-assets/lib/stylesheets/components/_indicator.scss b/packages/sage-assets/lib/stylesheets/components/_indicator.scss index 49fa9d0546..b73bfce83e 100644 --- a/packages/sage-assets/lib/stylesheets/components/_indicator.scss +++ b/packages/sage-assets/lib/stylesheets/components/_indicator.scss @@ -20,7 +20,7 @@ $-indicator-size: rem(6px); border-radius: sage-border(radius-round); &:not(.sage-indicator--current) { - background-color: sage-color(grey, 400); + background-color: sage-color(grey, 300); } &:not(:last-child) { diff --git a/packages/sage-assets/lib/stylesheets/components/_input_group.scss b/packages/sage-assets/lib/stylesheets/components/_input_group.scss index 9c4dd90713..755401f106 100644 --- a/packages/sage-assets/lib/stylesheets/components/_input_group.scss +++ b/packages/sage-assets/lib/stylesheets/components/_input_group.scss @@ -26,13 +26,13 @@ $-input-group-pw-field-button-color-text-hover: sage-color(black); } .sage-input-group:focus-within & { - background-color: sage-color(grey, 300); + background-color: sage-color(grey, 200); opacity: 1; } .sage-input-group--disabled & { color: sage-color(grey, 500); - background-color: sage-color(grey, 200); + background-color: sage-color(grey, 150); } } @@ -81,6 +81,6 @@ $-input-group-pw-field-button-color-text-hover: sage-color(black); .sage-input-group--disabled & { color: sage-color(charcoal, 300); - background-color: sage-color(grey, 200); + background-color: sage-color(grey, 150); } } diff --git a/packages/sage-assets/lib/stylesheets/components/_list.scss b/packages/sage-assets/lib/stylesheets/components/_list.scss index 335225cfc6..9cac615362 100644 --- a/packages/sage-assets/lib/stylesheets/components/_list.scss +++ b/packages/sage-assets/lib/stylesheets/components/_list.scss @@ -19,7 +19,7 @@ border-radius: sage-border(radius-medium); &:hover { - background-color: sage-color(grey, 200); + background-color: sage-color(grey, 150); } .sage-list--draggable-by-row & { @@ -44,7 +44,7 @@ } .sage-list__item--sortable-ghost { - background-color: sage-color(grey, 200); + background-color: sage-color(grey, 150); } .sage-list__item-content { diff --git a/packages/sage-assets/lib/stylesheets/components/_loader.scss b/packages/sage-assets/lib/stylesheets/components/_loader.scss index 1ae92a2902..bf2994d3a0 100644 --- a/packages/sage-assets/lib/stylesheets/components/_loader.scss +++ b/packages/sage-assets/lib/stylesheets/components/_loader.scss @@ -171,7 +171,7 @@ $-loader-lower-opacity: 0.4; position: relative; margin: 0 auto; padding: rem(15px) rem(20px); - background-color: sage-color(grey, 200); + background-color: sage-color(grey, 150); will-change: transform; border-radius: sage-border(radius-large); box-shadow: sage-shadow(sm); diff --git a/packages/sage-assets/lib/stylesheets/components/_menu_button.scss b/packages/sage-assets/lib/stylesheets/components/_menu_button.scss index e75dafa0b5..e5e88c1c8d 100644 --- a/packages/sage-assets/lib/stylesheets/components/_menu_button.scss +++ b/packages/sage-assets/lib/stylesheets/components/_menu_button.scss @@ -6,7 +6,7 @@ $-menubtn-toggle-size: rem(24px); -$-menubtn-toggle-line-color: sage-color(grey, 200); +$-menubtn-toggle-line-color: sage-color(grey, 150); $-menubtn-toggle-line-height: rem(2px); $-menubtn-toggle-radius: rem(2px); $-menubtn-focus-outline-size: sage-spacing(xs); diff --git a/packages/sage-assets/lib/stylesheets/components/_meter.scss b/packages/sage-assets/lib/stylesheets/components/_meter.scss index b73bc19468..372b4ea5c7 100644 --- a/packages/sage-assets/lib/stylesheets/components/_meter.scss +++ b/packages/sage-assets/lib/stylesheets/components/_meter.scss @@ -6,7 +6,7 @@ $-meter-bar-height: rem(4px); -$-meter-color-bg: sage-color(grey, 300); +$-meter-color-bg: sage-color(grey, 200); $-meter-bar-low: rgba(sage-color(red, 950), 0.9); $-meter-bar-med: rgba(sage-color(orange), 0.9); $-meter-bar-success: rgba(sage-color(sage, 200), 0.9); diff --git a/packages/sage-assets/lib/stylesheets/components/_nav.scss b/packages/sage-assets/lib/stylesheets/components/_nav.scss index fca0188e11..95d046a842 100644 --- a/packages/sage-assets/lib/stylesheets/components/_nav.scss +++ b/packages/sage-assets/lib/stylesheets/components/_nav.scss @@ -6,8 +6,8 @@ $-nav-color-text: sage-color(charcoal, 300); $-nav-color-focus: sage-color(grey, 500); -$-nav-color-background: sage-color(grey, 300); -$-nav-color-background-hover: sage-color(grey, 300); +$-nav-color-background: sage-color(grey, 200); +$-nav-color-background-hover: sage-color(grey, 200); $-nav-icon-size: rem(16px); $-nav-icon-spacing: rem(8px); $-nav-subitem-border-width: rem(2px); @@ -117,5 +117,5 @@ $-nav-subitem-border-width: rem(2px); .sage-nav__list--sub-with-icon { margin-left: calc((#{sage-spacing(sm)} + (#{$-nav-icon-size} / 2)) - (#{$-nav-subitem-border-width} / 2) - (#{$-nav-icon-spacing} / 2)); padding-left: sage-spacing(sm); - border-left: $-nav-subitem-border-width solid sage-color(grey, 400); + border-left: $-nav-subitem-border-width solid sage-color(grey, 300); } diff --git a/packages/sage-assets/lib/stylesheets/components/_page_heading.scss b/packages/sage-assets/lib/stylesheets/components/_page_heading.scss index 998e7ba6ce..45ef8ab244 100644 --- a/packages/sage-assets/lib/stylesheets/components/_page_heading.scss +++ b/packages/sage-assets/lib/stylesheets/components/_page_heading.scss @@ -84,7 +84,7 @@ $-page-heading-image-height-mobile: rem(120px); grid-area: image; overflow: hidden; min-height: $-page-heading-image-height-min; - background: sage-color(grey, 30); + background: sage-color(grey, 300); border-radius: sage-border(radius); border: sage-border(); diff --git a/packages/sage-assets/lib/stylesheets/components/_pagination.scss b/packages/sage-assets/lib/stylesheets/components/_pagination.scss index fc035f3e15..f9657c68af 100644 --- a/packages/sage-assets/lib/stylesheets/components/_pagination.scss +++ b/packages/sage-assets/lib/stylesheets/components/_pagination.scss @@ -12,7 +12,7 @@ $-pagination-text-color: sage-color(charcoal, 400); $-pagination-text-color-disabled: sage-color(charcoal, 100); $-pagination-bg-color-current: sage-color(grey, 200); $-pagination-bg-color-hover: sage-color(grey, 300); -$-pagination-focus-ring-color: sage-color(purple, 30); +$-pagination-focus-ring-color: sage-color(purple, 300); .sage-pagination { diff --git a/packages/sage-assets/lib/stylesheets/components/_panel.scss b/packages/sage-assets/lib/stylesheets/components/_panel.scss index e6789cc4a0..7d0e808027 100644 --- a/packages/sage-assets/lib/stylesheets/components/_panel.scss +++ b/packages/sage-assets/lib/stylesheets/components/_panel.scss @@ -45,7 +45,7 @@ top: 50%; width: 100%; height: 1px; - background: sage-color(grey, 300); + background: sage-color(grey, 200); } &::after { diff --git a/packages/sage-assets/lib/stylesheets/components/_panel_controls.scss b/packages/sage-assets/lib/stylesheets/components/_panel_controls.scss index 8c15b195b3..d4cf57bf16 100644 --- a/packages/sage-assets/lib/stylesheets/components/_panel_controls.scss +++ b/packages/sage-assets/lib/stylesheets/components/_panel_controls.scss @@ -19,7 +19,7 @@ height: 0; margin-right: -1 * sage-spacing(panel); margin-left: -1 * sage-spacing(panel); - border-top: 1px solid sage-color(grey, 400); + border-top: 1px solid sage-color(grey, 300); } .sage-search { diff --git a/packages/sage-assets/lib/stylesheets/components/_panel_figure.scss b/packages/sage-assets/lib/stylesheets/components/_panel_figure.scss index 038a8d2bbd..127b667aef 100644 --- a/packages/sage-assets/lib/stylesheets/components/_panel_figure.scss +++ b/packages/sage-assets/lib/stylesheets/components/_panel_figure.scss @@ -4,7 +4,7 @@ /// @group sage/components/panel-figure //// $-panel-figure-padding: sage-spacing(lg); -$-panel-figure-default-background-color: sage-color(grey, 200); +$-panel-figure-default-background-color: sage-color(grey, 150); :root { --sage-figure-aspect-ratio: 1.78; // 16 / 9 diff --git a/packages/sage-assets/lib/stylesheets/components/_progress_bar.scss b/packages/sage-assets/lib/stylesheets/components/_progress_bar.scss index 57b61b83fd..4f7b972164 100644 --- a/packages/sage-assets/lib/stylesheets/components/_progress_bar.scss +++ b/packages/sage-assets/lib/stylesheets/components/_progress_bar.scss @@ -34,7 +34,7 @@ $-progress-bar-height: sage-spacing(xs); height: $-progress-bar-height; width: 100%; border-radius: sage-border(radius-small); - background-color: var(--sage-progress-bar-background-color, sage-color(grey, 300)); + background-color: var(--sage-progress-bar-background-color, sage-color(grey, 200)); .sage-modal__header & { border-radius: 0; diff --git a/packages/sage-assets/lib/stylesheets/components/_radio.scss b/packages/sage-assets/lib/stylesheets/components/_radio.scss index 1c2acc728a..ddbe0e3496 100644 --- a/packages/sage-assets/lib/stylesheets/components/_radio.scss +++ b/packages/sage-assets/lib/stylesheets/components/_radio.scss @@ -15,7 +15,7 @@ $-radio-color-disabled: map-get($sage-radio-colors, disabled); $-radio-color-error: map-get($sage-radio-colors, error); $-radio-color-hover: map-get($sage-radio-colors, hover); $-radio-color-text-disabled: sage-color(grey, 500); -$-radio-color-focus-outline: sage-color(purple, 30); +$-radio-color-focus-outline: sage-color(purple, 300); $-radio-color-focus-outline-error: sage-color(red, 300); // Additional configurations diff --git a/packages/sage-assets/lib/stylesheets/components/_search.scss b/packages/sage-assets/lib/stylesheets/components/_search.scss index 49e6569b75..360ba4b6fc 100644 --- a/packages/sage-assets/lib/stylesheets/components/_search.scss +++ b/packages/sage-assets/lib/stylesheets/components/_search.scss @@ -29,7 +29,7 @@ $-search-icon: "::before"; } .sage-search:not(.sage-search--contained) & { - border-bottom: 1px solid sage-color(grey, 400); + border-bottom: 1px solid sage-color(grey, 300); &:hover { background-color: sage-color(grey, 100); diff --git a/packages/sage-assets/lib/stylesheets/components/_sortable.scss b/packages/sage-assets/lib/stylesheets/components/_sortable.scss index 66d29f2b39..c802b7cd5f 100644 --- a/packages/sage-assets/lib/stylesheets/components/_sortable.scss +++ b/packages/sage-assets/lib/stylesheets/components/_sortable.scss @@ -30,7 +30,7 @@ $-sortable-image-height: rem(48px); &:focus, &:hover { - background-color: sage-color(grey, 200); + background-color: sage-color(grey, 150); &::before { color: sage-color(primary, 300); @@ -75,7 +75,7 @@ $-sortable-image-height: rem(48px); } &.sage-sortable__item--ghost { - background: sage-color(grey, 300); + background: sage-color(grey, 200); } } @@ -84,7 +84,7 @@ $-sortable-image-height: rem(48px); overflow: hidden; height: $-sortable-image-height; width: $-sortable-image-width; - background: sage-color(grey, 300); + background: sage-color(grey, 200); border-radius: sage-border(radius); border: sage-border(); diff --git a/packages/sage-assets/lib/stylesheets/components/_switch.scss b/packages/sage-assets/lib/stylesheets/components/_switch.scss index c0dc43c665..7a3ccce779 100644 --- a/packages/sage-assets/lib/stylesheets/components/_switch.scss +++ b/packages/sage-assets/lib/stylesheets/components/_switch.scss @@ -6,14 +6,14 @@ // Colors -$-switch-color-default: sage-color(grey, 400); +$-switch-color-default: sage-color(grey, 300); $-switch-color-default-hover: sage-color(grey, 500); $-switch-color-default-text: sage-color(charcoal, 300); $-switch-color-checked: sage-color(charcoal, 400); $-switch-color-checked-hover: sage-color(charcoal, 500); -$-switch-color-disabled: sage-color(grey, 300); +$-switch-color-disabled: sage-color(grey, 200); $-switch-color-disabled-text: sage-color(charcoal, 300); -$-switch-color-disabled-checked: sage-color(grey, 300); +$-switch-color-disabled-checked: sage-color(grey, 200); $-switch-color-disabled-checked-text: sage-color(charcoal, 100); $-switch-color-error: sage-color(red, 500); $-switch-focus-outline-error-color: sage-color(red, 300); diff --git a/packages/sage-assets/lib/stylesheets/components/_tab.scss b/packages/sage-assets/lib/stylesheets/components/_tab.scss index 21a9cfc039..2fa28b2d7c 100644 --- a/packages/sage-assets/lib/stylesheets/components/_tab.scss +++ b/packages/sage-assets/lib/stylesheets/components/_tab.scss @@ -28,7 +28,7 @@ $-tab-color-disabled: map-get($sage-tab-colors, disabled); .sage-tabs--filter & { padding: rem(6px) rem(14px); - background-color: sage-color(grey, 300); + background-color: sage-color(grey, 200); border-radius: sage-border(radius-x-large); @extend %t-sage-body-small-semi; } @@ -38,7 +38,7 @@ $-tab-color-disabled: map-get($sage-tab-colors, disabled); &:hover { color: $-tab-color-active; .sage-tabs--filter & { - background: sage-color(grey, 400); + background: sage-color(grey, 300); } } diff --git a/packages/sage-assets/lib/stylesheets/components/_table.scss b/packages/sage-assets/lib/stylesheets/components/_table.scss index 40599a15da..4cc0e4ae3f 100644 --- a/packages/sage-assets/lib/stylesheets/components/_table.scss +++ b/packages/sage-assets/lib/stylesheets/components/_table.scss @@ -5,7 +5,7 @@ //// // Borders and sizing -$-table-header-border: rem(1px) solid sage-color(grey, 300); +$-table-header-border: rem(1px) solid sage-color(grey, 200); $-table-cell-padding-xs: sage-spacing(xs); $-table-cell-padding-card: sage-spacing(); $-table-cell-padding-panel: sage-spacing(); diff --git a/packages/sage-assets/lib/stylesheets/components/_tabs.scss b/packages/sage-assets/lib/stylesheets/components/_tabs.scss index c519915740..2b250ce8a1 100644 --- a/packages/sage-assets/lib/stylesheets/components/_tabs.scss +++ b/packages/sage-assets/lib/stylesheets/components/_tabs.scss @@ -38,7 +38,7 @@ padding-top: sage-spacing(sm); padding-left: sage-spacing(xs); padding-right: sage-spacing(xs); - background-color: sage-color(grey, 300); + background-color: sage-color(grey, 200); } .sage-tabs--layout-stacked { @@ -52,7 +52,7 @@ .sage-tabs-divider, .sage-tabs-container > hr { margin: 0; - border-top: 1px solid sage-color(grey, 400); + border-top: 1px solid sage-color(grey, 300); } .sage-tabs-pane { diff --git a/packages/sage-assets/lib/stylesheets/components/_tag.scss b/packages/sage-assets/lib/stylesheets/components/_tag.scss index e2ef901f1b..94621b4b3f 100644 --- a/packages/sage-assets/lib/stylesheets/components/_tag.scss +++ b/packages/sage-assets/lib/stylesheets/components/_tag.scss @@ -15,11 +15,11 @@ $-tag-button-icon-mobile-size: rem(24px); display: inline-flex; align-items: center; padding: sage-spacing(3xs) sage-spacing(xs) sage-spacing(3xs) sage-spacing(xs); - background-color: sage-color(grey, 300); + background-color: sage-color(grey, 200); border-radius: sage-border(radius-x-large); &:hover { - background-color: sage-color(grey, 400); + background-color: sage-color(grey, 300); } pds-icon { diff --git a/packages/sage-assets/lib/stylesheets/components/_toast.scss b/packages/sage-assets/lib/stylesheets/components/_toast.scss index d6536c239e..3188a88383 100644 --- a/packages/sage-assets/lib/stylesheets/components/_toast.scss +++ b/packages/sage-assets/lib/stylesheets/components/_toast.scss @@ -148,7 +148,7 @@ $-toast-bottom-spacing: sage-spacing(xs); } &.sage-btn--subtle.sage-btn--secondary:not(:focus):hover { - color: sage-color(grey, 200); + color: sage-color(grey, 150); background-color: inherit; &::after { diff --git a/packages/sage-assets/lib/stylesheets/components/_typeahead.scss b/packages/sage-assets/lib/stylesheets/components/_typeahead.scss index e1e3769e4f..19ad82acc4 100644 --- a/packages/sage-assets/lib/stylesheets/components/_typeahead.scss +++ b/packages/sage-assets/lib/stylesheets/components/_typeahead.scss @@ -47,7 +47,7 @@ $-typeahead-item-height: rem(68px); &:hover, &:focus-within { - background-color: sage-color(grey, 200); + background-color: sage-color(grey, 150); } } diff --git a/packages/sage-assets/lib/stylesheets/core/_variables.scss b/packages/sage-assets/lib/stylesheets/core/_variables.scss index 7a25865ab4..8ba665949f 100644 --- a/packages/sage-assets/lib/stylesheets/core/_variables.scss +++ b/packages/sage-assets/lib/stylesheets/core/_variables.scss @@ -51,10 +51,10 @@ $sage-field-configs: ( /// Field coloring /// $sage-field-colors: ( - border: sage-color(grey, 400), + border: sage-color(grey, 300), default: sage-color(charcoal, 300), disabled: sage-color(grey, 500), - disabled-background: sage-color(grey, 200), + disabled-background: sage-color(grey, 150), error: sage-color(red, 500), label-background: sage-color(white), success: sage-color(primary, 300), @@ -67,11 +67,11 @@ $sage-field-colors: ( /// $sage-radio-colors: ( checked: sage-color(charcoal, 400), - checked-disabled: sage-color(grey, 300), + checked-disabled: sage-color(grey, 200), checked-hover: sage-color(charcoal, 500), checked-inner: sage-color(white), - default: sage-color(grey, 400), - disabled: sage-color(grey, 200), + default: sage-color(grey, 300), + disabled: sage-color(grey, 150), error: sage-color(red, 500), hover: sage-color(grey, 500), ); diff --git a/packages/sage-assets/lib/stylesheets/dictionary/_tokens.scss b/packages/sage-assets/lib/stylesheets/dictionary/_tokens.scss index eacaa9a08a..6ec67d894b 100644 --- a/packages/sage-assets/lib/stylesheets/dictionary/_tokens.scss +++ b/packages/sage-assets/lib/stylesheets/dictionary/_tokens.scss @@ -1126,209 +1126,149 @@ $sd-sage-color-base-charcoal-500-code: "charcoal-500"; /// $sd-sage-color-base-charcoal-500-classname: "t-sage--color-charcoal-500"; /// -/// color color-base-grey-5-hex -/// -$sd-sage-color-base-grey-5-hex: #fcfcfc; -/// -/// color color-base-grey-5-code -/// -$sd-sage-color-base-grey-5-code: "grey-5"; -/// -/// color color-base-grey-5-classname -/// -$sd-sage-color-base-grey-5-classname: "t-sage--color-grey-5"; -/// -/// color color-base-grey-10-hex -/// -$sd-sage-color-base-grey-10-hex: #f8f8f8; -/// -/// color color-base-grey-10-code -/// -$sd-sage-color-base-grey-10-code: "grey-10"; -/// -/// color color-base-grey-10-classname -/// -$sd-sage-color-base-grey-10-classname: "t-sage--color-grey-10"; -/// -/// color color-base-grey-15-hex -/// -$sd-sage-color-base-grey-15-hex: #f0f0f0; -/// -/// color color-base-grey-15-code -/// -$sd-sage-color-base-grey-15-code: "grey-15"; -/// -/// color color-base-grey-15-classname -/// -$sd-sage-color-base-grey-15-classname: "t-sage--color-grey-15"; -/// -/// color color-base-grey-20-hex -/// -$sd-sage-color-base-grey-20-hex: #e4e4e4; -/// -/// color color-base-grey-20-code -/// -$sd-sage-color-base-grey-20-code: "grey-20"; -/// -/// color color-base-grey-20-classname -/// -$sd-sage-color-base-grey-20-classname: "t-sage--color-grey-20"; -/// -/// color color-base-grey-30-hex -/// -$sd-sage-color-base-grey-30-hex: #d2d1d1; -/// -/// color color-base-grey-30-code -/// -$sd-sage-color-base-grey-30-code: "grey-30"; -/// -/// color color-base-grey-30-classname -/// -$sd-sage-color-base-grey-30-classname: "t-sage--color-grey-30"; -/// -/// color color-base-grey-40-hex +/// color color-base-grey-50-hex /// -$sd-sage-color-base-grey-40-hex: #bbbab9; +$sd-sage-color-base-grey-50-hex: #fcfcfc; /// -/// color color-base-grey-40-code +/// color color-base-grey-50-code /// -$sd-sage-color-base-grey-40-code: "grey-40"; +$sd-sage-color-base-grey-50-code: "grey-50"; /// -/// color color-base-grey-40-classname +/// color color-base-grey-50-classname /// -$sd-sage-color-base-grey-40-classname: "t-sage--color-grey-40"; +$sd-sage-color-base-grey-50-classname: "t-sage--color-grey-50"; /// -/// color color-base-grey-50-hex +/// color color-base-grey-100-hex /// -$sd-sage-color-base-grey-50-hex: #9b9a98; +$sd-sage-color-base-grey-100-hex: #f8f8f8; /// -/// color color-base-grey-50-code +/// color color-base-grey-100-code /// -$sd-sage-color-base-grey-50-code: "grey-50"; +$sd-sage-color-base-grey-100-code: "grey-100"; /// -/// color color-base-grey-50-classname +/// color color-base-grey-100-classname /// -$sd-sage-color-base-grey-50-classname: "t-sage--color-grey-50"; +$sd-sage-color-base-grey-100-classname: "t-sage--color-grey-100"; /// -/// color color-base-grey-60-hex +/// color color-base-grey-150-hex /// -$sd-sage-color-base-grey-60-hex: #828180; +$sd-sage-color-base-grey-150-hex: #f0f0f0; /// -/// color color-base-grey-60-code +/// color color-base-grey-150-code /// -$sd-sage-color-base-grey-60-code: "grey-60"; +$sd-sage-color-base-grey-150-code: "grey-15"; /// -/// color color-base-grey-60-classname +/// color color-base-grey-150-classname /// -$sd-sage-color-base-grey-60-classname: "t-sage--color-grey-60"; +$sd-sage-color-base-grey-150-classname: "t-sage--color-grey-150"; /// -/// color color-base-grey-70-hex +/// color color-base-grey-200-hex /// -$sd-sage-color-base-grey-70-hex: #6c6a69; +$sd-sage-color-base-grey-200-hex: #e4e4e4; /// -/// color color-base-grey-70-code +/// color color-base-grey-200-code /// -$sd-sage-color-base-grey-70-code: "grey-70"; +$sd-sage-color-base-grey-200-code: "grey-200"; /// -/// color color-base-grey-70-classname +/// color color-base-grey-200-classname /// -$sd-sage-color-base-grey-70-classname: "t-sage--color-grey-70"; +$sd-sage-color-base-grey-200-classname: "t-sage--color-grey-200"; /// -/// color color-base-grey-80-hex +/// color color-base-grey-300-hex /// -$sd-sage-color-base-grey-80-hex: #4d4d4c; +$sd-sage-color-base-grey-300-hex: #d2d1d1; /// -/// color color-base-grey-80-code +/// color color-base-grey-300-code /// -$sd-sage-color-base-grey-80-code: "grey-80"; +$sd-sage-color-base-grey-300-code: "grey-300"; /// -/// color color-base-grey-80-classname +/// color color-base-grey-300-classname /// -$sd-sage-color-base-grey-80-classname: "t-sage--color-grey-80"; +$sd-sage-color-base-grey-300-classname: "t-sage--color-grey-300"; /// -/// color color-base-grey-90-hex +/// color color-base-grey-400-hex /// -$sd-sage-color-base-grey-90-hex: #343332; +$sd-sage-color-base-grey-400-hex: #bbbab9; /// -/// color color-base-grey-90-code +/// color color-base-grey-400-code /// -$sd-sage-color-base-grey-90-code: "grey-90"; +$sd-sage-color-base-grey-400-code: "grey-400"; /// -/// color color-base-grey-90-classname +/// color color-base-grey-400-classname /// -$sd-sage-color-base-grey-90-classname: "t-sage--color-grey-90"; +$sd-sage-color-base-grey-400-classname: "t-sage--color-grey-400"; /// -/// color color-base-grey-95-hex +/// color color-base-grey-500-hex /// -$sd-sage-color-base-grey-95-hex: #1a1a19; +$sd-sage-color-base-grey-500-hex: #9b9a98; /// -/// color color-base-grey-95-code +/// color color-base-grey-500-code /// -$sd-sage-color-base-grey-95-code: "grey-95"; +$sd-sage-color-base-grey-500-code: "grey-500"; /// -/// color color-base-grey-95-classname +/// color color-base-grey-500-classname /// -$sd-sage-color-base-grey-95-classname: "t-sage--color-grey-95"; +$sd-sage-color-base-grey-500-classname: "t-sage--color-grey-500"; /// -/// color color-base-grey-100-hex +/// color color-base-grey-600-hex /// -$sd-sage-color-base-grey-100-hex: #f8f8f8; +$sd-sage-color-base-grey-600-hex: #828180; /// -/// color color-base-grey-100-code +/// color color-base-grey-600-code /// -$sd-sage-color-base-grey-100-code: "grey-100"; +$sd-sage-color-base-grey-600-code: "grey-600"; /// -/// color color-base-grey-100-classname +/// color color-base-grey-600-classname /// -$sd-sage-color-base-grey-100-classname: "t-sage--color-grey-100"; +$sd-sage-color-base-grey-600-classname: "t-sage--color-grey-600"; /// -/// color color-base-grey-200-hex +/// color color-base-grey-700-hex /// -$sd-sage-color-base-grey-200-hex: #f0f0f0; +$sd-sage-color-base-grey-700-hex: #6c6a69; /// -/// color color-base-grey-200-code +/// color color-base-grey-700-code /// -$sd-sage-color-base-grey-200-code: "grey-200"; +$sd-sage-color-base-grey-700-code: "grey-700"; /// -/// color color-base-grey-200-classname +/// color color-base-grey-700-classname /// -$sd-sage-color-base-grey-200-classname: "t-sage--color-grey-200"; +$sd-sage-color-base-grey-700-classname: "t-sage--color-grey-700"; /// -/// color color-base-grey-300-hex +/// color color-base-grey-800-hex /// -$sd-sage-color-base-grey-300-hex: #e4e4e4; +$sd-sage-color-base-grey-800-hex: #4d4d4c; /// -/// color color-base-grey-300-code +/// color color-base-grey-800-code /// -$sd-sage-color-base-grey-300-code: "grey-300"; +$sd-sage-color-base-grey-800-code: "grey-800"; /// -/// color color-base-grey-300-classname +/// color color-base-grey-800-classname /// -$sd-sage-color-base-grey-300-classname: "t-sage--color-grey-300"; +$sd-sage-color-base-grey-800-classname: "t-sage--color-grey-800"; /// -/// color color-base-grey-400-hex +/// color color-base-grey-900-hex /// -$sd-sage-color-base-grey-400-hex: #d2d1d1; +$sd-sage-color-base-grey-900-hex: #343332; /// -/// color color-base-grey-400-code +/// color color-base-grey-900-code /// -$sd-sage-color-base-grey-400-code: "grey-400"; +$sd-sage-color-base-grey-900-code: "grey-900"; /// -/// color color-base-grey-400-classname +/// color color-base-grey-900-classname /// -$sd-sage-color-base-grey-400-classname: "t-sage--color-grey-400"; +$sd-sage-color-base-grey-900-classname: "t-sage--color-grey-900"; /// -/// color color-base-grey-500-hex +/// color color-base-grey-950-hex /// -$sd-sage-color-base-grey-500-hex: #9b9a98; +$sd-sage-color-base-grey-950-hex: #1a1a19; /// -/// color color-base-grey-500-code +/// color color-base-grey-950-code /// -$sd-sage-color-base-grey-500-code: "grey-500"; +$sd-sage-color-base-grey-950-code: "grey-950"; /// -/// color color-base-grey-500-classname +/// color color-base-grey-950-classname /// -$sd-sage-color-base-grey-500-classname: "t-sage--color-grey-500"; +$sd-sage-color-base-grey-950-classname: "t-sage--color-grey-950"; /// /// color color-base-white-100-hex /// @@ -1935,71 +1875,21 @@ $sd-sage-color: ( ), ), grey: ( - 5: ( - hex: $sd-sage-color-base-grey-5-hex, - code: $sd-sage-color-base-grey-5-code, - classname: $sd-sage-color-base-grey-5-classname, - ), - 10: ( - hex: $sd-sage-color-base-grey-10-hex, - code: $sd-sage-color-base-grey-10-code, - classname: $sd-sage-color-base-grey-10-classname, - ), - 15: ( - hex: $sd-sage-color-base-grey-15-hex, - code: $sd-sage-color-base-grey-15-code, - classname: $sd-sage-color-base-grey-15-classname, - ), - 20: ( - hex: $sd-sage-color-base-grey-20-hex, - code: $sd-sage-color-base-grey-20-code, - classname: $sd-sage-color-base-grey-20-classname, - ), - 30: ( - hex: $sd-sage-color-base-grey-30-hex, - code: $sd-sage-color-base-grey-30-code, - classname: $sd-sage-color-base-grey-30-classname, - ), - 40: ( - hex: $sd-sage-color-base-grey-40-hex, - code: $sd-sage-color-base-grey-40-code, - classname: $sd-sage-color-base-grey-40-classname, - ), 50: ( hex: $sd-sage-color-base-grey-50-hex, code: $sd-sage-color-base-grey-50-code, classname: $sd-sage-color-base-grey-50-classname, ), - 60: ( - hex: $sd-sage-color-base-grey-60-hex, - code: $sd-sage-color-base-grey-60-code, - classname: $sd-sage-color-base-grey-60-classname, - ), - 70: ( - hex: $sd-sage-color-base-grey-70-hex, - code: $sd-sage-color-base-grey-70-code, - classname: $sd-sage-color-base-grey-70-classname, - ), - 80: ( - hex: $sd-sage-color-base-grey-80-hex, - code: $sd-sage-color-base-grey-80-code, - classname: $sd-sage-color-base-grey-80-classname, - ), - 90: ( - hex: $sd-sage-color-base-grey-90-hex, - code: $sd-sage-color-base-grey-90-code, - classname: $sd-sage-color-base-grey-90-classname, - ), - 95: ( - hex: $sd-sage-color-base-grey-95-hex, - code: $sd-sage-color-base-grey-95-code, - classname: $sd-sage-color-base-grey-95-classname, - ), 100: ( hex: $sd-sage-color-base-grey-100-hex, code: $sd-sage-color-base-grey-100-code, classname: $sd-sage-color-base-grey-100-classname, ), + 150: ( + hex: $sd-sage-color-base-grey-150-hex, + code: $sd-sage-color-base-grey-150-code, + classname: $sd-sage-color-base-grey-150-classname, + ), 200: ( hex: $sd-sage-color-base-grey-200-hex, code: $sd-sage-color-base-grey-200-code, @@ -2020,6 +1910,31 @@ $sd-sage-color: ( code: $sd-sage-color-base-grey-500-code, classname: $sd-sage-color-base-grey-500-classname, ), + 600: ( + hex: $sd-sage-color-base-grey-600-hex, + code: $sd-sage-color-base-grey-600-code, + classname: $sd-sage-color-base-grey-600-classname, + ), + 700: ( + hex: $sd-sage-color-base-grey-700-hex, + code: $sd-sage-color-base-grey-700-code, + classname: $sd-sage-color-base-grey-700-classname, + ), + 800: ( + hex: $sd-sage-color-base-grey-800-hex, + code: $sd-sage-color-base-grey-800-code, + classname: $sd-sage-color-base-grey-800-classname, + ), + 900: ( + hex: $sd-sage-color-base-grey-900-hex, + code: $sd-sage-color-base-grey-900-code, + classname: $sd-sage-color-base-grey-900-classname, + ), + 950: ( + hex: $sd-sage-color-base-grey-950-hex, + code: $sd-sage-color-base-grey-950-code, + classname: $sd-sage-color-base-grey-950-classname, + ), ), white: ( 100: ( diff --git a/packages/sage-assets/lib/stylesheets/tokens/_border.scss b/packages/sage-assets/lib/stylesheets/tokens/_border.scss index a8b3715f62..401a0ef3c7 100644 --- a/packages/sage-assets/lib/stylesheets/tokens/_border.scss +++ b/packages/sage-assets/lib/stylesheets/tokens/_border.scss @@ -9,9 +9,9 @@ /// Sage borders token /// $sage-borders: ( - default: rem(1px) solid sage-color(grey, 300), + default: rem(1px) solid sage-color(grey, 200), error: rem(1px) solid sage-color(red, 500), - interactive: rem(1px) solid sage-color(grey, 400), + interactive: rem(1px) solid sage-color(grey, 300), interactive-hover: rem(1px) solid sage-color(grey, 500), radius-small: rem(4px), radius: rem(8px), diff --git a/packages/sage-assets/lib/stylesheets/tokens/_border_interactive.scss b/packages/sage-assets/lib/stylesheets/tokens/_border_interactive.scss index fc7e52abfc..e7284a08fa 100644 --- a/packages/sage-assets/lib/stylesheets/tokens/_border_interactive.scss +++ b/packages/sage-assets/lib/stylesheets/tokens/_border_interactive.scss @@ -9,13 +9,13 @@ /// Sage borders interactive token /// $sage-borders-interactive: ( - default: 0 0 0 1px sage-color(grey, 400), + default: 0 0 0 1px sage-color(grey, 300), hover: 0 0 0 1px sage-color(grey, 500), focus: 0 0 0 4px sage-color(primary, 200), selected: 0 0 0 4px sage-color(charcoal, 400), error: 0 0 0 1px sage-color(red, 500), error-focus: 0 0 0 4px sage-color(red, 500), - disabled: 0 0 0 1px sage-color(grey, 300), + disabled: 0 0 0 1px sage-color(grey, 200), ); /// diff --git a/packages/sage-assets/lib/stylesheets/tokens/_shadow.scss b/packages/sage-assets/lib/stylesheets/tokens/_shadow.scss index 0540f7fa4b..f4f15b80c5 100644 --- a/packages/sage-assets/lib/stylesheets/tokens/_shadow.scss +++ b/packages/sage-assets/lib/stylesheets/tokens/_shadow.scss @@ -9,17 +9,17 @@ /// Sage shadows token /// $sage-shadows: ( - sm: (0 1px 2px rgba(sage-color(grey, 95), 0.06), 0 1px 3px rgba(sage-color(grey, 95), 0.1)), - md: (0 4px 6px -2px rgba(sage-color(grey, 95), 0.03), 0 12px 16px -4px rgba(sage-color(grey, 95), 0.08)), - lg: (0 24px 48px -12px rgba(sage-color(grey, 95), 0.18)), - modal: (0 32px 64px -12px rgba(sage-color(grey, 95), 0.24)), - 050: (0 1px 2px 0 rgba(sage-color(grey, 95), 0.05)), - 100: (0 1px 3px 0 rgba(sage-color(grey, 95), 0.1), 0 1px 2px 0 rgba(sage-color(grey, 95), 0.06)), - 150: (0 4px 8px -2px rgba(sage-color(grey, 95), 0.1), 0 2px 4px -2px rgba(sage-color(grey, 95), 0.06)), - 200: (0 12px 16px -4px rgba(sage-color(grey, 95), 0.08), 0 4px 6px -2px rgba(sage-color(grey, 95), 0.03)), - 300: (0 20px 24px -4px rgba(sage-color(grey, 95), 0.08), 0 8px 8px -4px rgba(sage-color(grey, 95), 0.03)), - 400: (0 24px 48px -12px rgba(sage-color(grey, 95), 0.18)), - 500: (0 32px 64px -12px rgba(sage-color(grey, 95), 0.14)), + sm: (0 1px 2px rgba(sage-color(grey, 950), 0.06), 0 1px 3px rgba(sage-color(grey, 950), 0.1)), + md: (0 4px 6px -2px rgba(sage-color(grey, 950), 0.03), 0 12px 16px -4px rgba(sage-color(grey, 950), 0.08)), + lg: (0 24px 48px -12px rgba(sage-color(grey, 950), 0.18)), + modal: (0 32px 64px -12px rgba(sage-color(grey, 950), 0.24)), + 050: (0 1px 2px 0 rgba(sage-color(grey, 950), 0.05)), + 100: (0 1px 3px 0 rgba(sage-color(grey, 950), 0.1), 0 1px 2px 0 rgba(sage-color(grey, 950), 0.06)), + 150: (0 4px 8px -2px rgba(sage-color(grey, 950), 0.1), 0 2px 4px -2px rgba(sage-color(grey, 950), 0.06)), + 200: (0 12px 16px -4px rgba(sage-color(grey, 950), 0.08), 0 4px 6px -2px rgba(sage-color(grey, 950), 0.03)), + 300: (0 20px 24px -4px rgba(sage-color(grey, 950), 0.08), 0 8px 8px -4px rgba(sage-color(grey, 950), 0.03)), + 400: (0 24px 48px -12px rgba(sage-color(grey, 950), 0.18)), + 500: (0 32px 64px -12px rgba(sage-color(grey, 950), 0.14)), ); /// diff --git a/packages/sage-react/lib/configs/dictionary/tokens.js b/packages/sage-react/lib/configs/dictionary/tokens.js index 39973a344b..c939248904 100644 --- a/packages/sage-react/lib/configs/dictionary/tokens.js +++ b/packages/sage-react/lib/configs/dictionary/tokens.js @@ -295,57 +295,42 @@ export const COLOR_BASE_CHARCOAL_400_CLASSNAME = 't-sage--color-charcoal-400'; export const COLOR_BASE_CHARCOAL_500_HEX = '#1a1a19'; export const COLOR_BASE_CHARCOAL_500_CODE = 'charcoal-500'; export const COLOR_BASE_CHARCOAL_500_CLASSNAME = 't-sage--color-charcoal-500'; -export const COLOR_BASE_GREY_5_HEX = '#fcfcfc'; -export const COLOR_BASE_GREY_5_CODE = 'grey-5'; -export const COLOR_BASE_GREY_5_CLASSNAME = 't-sage--color-grey-5'; -export const COLOR_BASE_GREY_10_HEX = '#f8f8f8'; -export const COLOR_BASE_GREY_10_CODE = 'grey-10'; -export const COLOR_BASE_GREY_10_CLASSNAME = 't-sage--color-grey-10'; -export const COLOR_BASE_GREY_15_HEX = '#f0f0f0'; -export const COLOR_BASE_GREY_15_CODE = 'grey-15'; -export const COLOR_BASE_GREY_15_CLASSNAME = 't-sage--color-grey-15'; -export const COLOR_BASE_GREY_20_HEX = '#e4e4e4'; -export const COLOR_BASE_GREY_20_CODE = 'grey-20'; -export const COLOR_BASE_GREY_20_CLASSNAME = 't-sage--color-grey-20'; -export const COLOR_BASE_GREY_30_HEX = '#d2d1d1'; -export const COLOR_BASE_GREY_30_CODE = 'grey-30'; -export const COLOR_BASE_GREY_30_CLASSNAME = 't-sage--color-grey-30'; -export const COLOR_BASE_GREY_40_HEX = '#bbbab9'; -export const COLOR_BASE_GREY_40_CODE = 'grey-40'; -export const COLOR_BASE_GREY_40_CLASSNAME = 't-sage--color-grey-40'; -export const COLOR_BASE_GREY_50_HEX = '#9b9a98'; +export const COLOR_BASE_GREY_50_HEX = '#fcfcfc'; export const COLOR_BASE_GREY_50_CODE = 'grey-50'; export const COLOR_BASE_GREY_50_CLASSNAME = 't-sage--color-grey-50'; -export const COLOR_BASE_GREY_60_HEX = '#828180'; -export const COLOR_BASE_GREY_60_CODE = 'grey-60'; -export const COLOR_BASE_GREY_60_CLASSNAME = 't-sage--color-grey-60'; -export const COLOR_BASE_GREY_70_HEX = '#6c6a69'; -export const COLOR_BASE_GREY_70_CODE = 'grey-70'; -export const COLOR_BASE_GREY_70_CLASSNAME = 't-sage--color-grey-70'; -export const COLOR_BASE_GREY_80_HEX = '#4d4d4c'; -export const COLOR_BASE_GREY_80_CODE = 'grey-80'; -export const COLOR_BASE_GREY_80_CLASSNAME = 't-sage--color-grey-80'; -export const COLOR_BASE_GREY_90_HEX = '#343332'; -export const COLOR_BASE_GREY_90_CODE = 'grey-90'; -export const COLOR_BASE_GREY_90_CLASSNAME = 't-sage--color-grey-90'; -export const COLOR_BASE_GREY_95_HEX = '#1a1a19'; -export const COLOR_BASE_GREY_95_CODE = 'grey-95'; -export const COLOR_BASE_GREY_95_CLASSNAME = 't-sage--color-grey-95'; export const COLOR_BASE_GREY_100_HEX = '#f8f8f8'; export const COLOR_BASE_GREY_100_CODE = 'grey-100'; export const COLOR_BASE_GREY_100_CLASSNAME = 't-sage--color-grey-100'; -export const COLOR_BASE_GREY_200_HEX = '#f0f0f0'; +export const COLOR_BASE_GREY_150_HEX = '#f0f0f0'; +export const COLOR_BASE_GREY_150_CODE = 'grey-15'; +export const COLOR_BASE_GREY_150_CLASSNAME = 't-sage--color-grey-150'; +export const COLOR_BASE_GREY_200_HEX = '#e4e4e4'; export const COLOR_BASE_GREY_200_CODE = 'grey-200'; export const COLOR_BASE_GREY_200_CLASSNAME = 't-sage--color-grey-200'; -export const COLOR_BASE_GREY_300_HEX = '#e4e4e4'; +export const COLOR_BASE_GREY_300_HEX = '#d2d1d1'; export const COLOR_BASE_GREY_300_CODE = 'grey-300'; export const COLOR_BASE_GREY_300_CLASSNAME = 't-sage--color-grey-300'; -export const COLOR_BASE_GREY_400_HEX = '#d2d1d1'; +export const COLOR_BASE_GREY_400_HEX = '#bbbab9'; export const COLOR_BASE_GREY_400_CODE = 'grey-400'; export const COLOR_BASE_GREY_400_CLASSNAME = 't-sage--color-grey-400'; export const COLOR_BASE_GREY_500_HEX = '#9b9a98'; export const COLOR_BASE_GREY_500_CODE = 'grey-500'; export const COLOR_BASE_GREY_500_CLASSNAME = 't-sage--color-grey-500'; +export const COLOR_BASE_GREY_600_HEX = '#828180'; +export const COLOR_BASE_GREY_600_CODE = 'grey-600'; +export const COLOR_BASE_GREY_600_CLASSNAME = 't-sage--color-grey-600'; +export const COLOR_BASE_GREY_700_HEX = '#6c6a69'; +export const COLOR_BASE_GREY_700_CODE = 'grey-700'; +export const COLOR_BASE_GREY_700_CLASSNAME = 't-sage--color-grey-700'; +export const COLOR_BASE_GREY_800_HEX = '#4d4d4c'; +export const COLOR_BASE_GREY_800_CODE = 'grey-800'; +export const COLOR_BASE_GREY_800_CLASSNAME = 't-sage--color-grey-800'; +export const COLOR_BASE_GREY_900_HEX = '#343332'; +export const COLOR_BASE_GREY_900_CODE = 'grey-900'; +export const COLOR_BASE_GREY_900_CLASSNAME = 't-sage--color-grey-900'; +export const COLOR_BASE_GREY_950_HEX = '#1a1a19'; +export const COLOR_BASE_GREY_950_CODE = 'grey-950'; +export const COLOR_BASE_GREY_950_CLASSNAME = 't-sage--color-grey-950'; export const COLOR_BASE_WHITE_100_HEX = '#fff'; export const COLOR_BASE_WHITE_100_CODE = 'white-100'; export const COLOR_BASE_WHITE_100_CLASSNAME = 't-sage--color-white-100'; @@ -862,71 +847,21 @@ export const COLOR = { }, }, GREY: { - 5: { - HEX: COLOR_BASE_GREY_5_HEX, - CODE: COLOR_BASE_GREY_5_CODE, - CLASSNAME: COLOR_BASE_GREY_5_CLASSNAME, - }, - 10: { - HEX: COLOR_BASE_GREY_10_HEX, - CODE: COLOR_BASE_GREY_10_CODE, - CLASSNAME: COLOR_BASE_GREY_10_CLASSNAME, - }, - 15: { - HEX: COLOR_BASE_GREY_15_HEX, - CODE: COLOR_BASE_GREY_15_CODE, - CLASSNAME: COLOR_BASE_GREY_15_CLASSNAME, - }, - 20: { - HEX: COLOR_BASE_GREY_20_HEX, - CODE: COLOR_BASE_GREY_20_CODE, - CLASSNAME: COLOR_BASE_GREY_20_CLASSNAME, - }, - 30: { - HEX: COLOR_BASE_GREY_30_HEX, - CODE: COLOR_BASE_GREY_30_CODE, - CLASSNAME: COLOR_BASE_GREY_30_CLASSNAME, - }, - 40: { - HEX: COLOR_BASE_GREY_40_HEX, - CODE: COLOR_BASE_GREY_40_CODE, - CLASSNAME: COLOR_BASE_GREY_40_CLASSNAME, - }, 50: { HEX: COLOR_BASE_GREY_50_HEX, CODE: COLOR_BASE_GREY_50_CODE, CLASSNAME: COLOR_BASE_GREY_50_CLASSNAME, }, - 60: { - HEX: COLOR_BASE_GREY_60_HEX, - CODE: COLOR_BASE_GREY_60_CODE, - CLASSNAME: COLOR_BASE_GREY_60_CLASSNAME, - }, - 70: { - HEX: COLOR_BASE_GREY_70_HEX, - CODE: COLOR_BASE_GREY_70_CODE, - CLASSNAME: COLOR_BASE_GREY_70_CLASSNAME, - }, - 80: { - HEX: COLOR_BASE_GREY_80_HEX, - CODE: COLOR_BASE_GREY_80_CODE, - CLASSNAME: COLOR_BASE_GREY_80_CLASSNAME, - }, - 90: { - HEX: COLOR_BASE_GREY_90_HEX, - CODE: COLOR_BASE_GREY_90_CODE, - CLASSNAME: COLOR_BASE_GREY_90_CLASSNAME, - }, - 95: { - HEX: COLOR_BASE_GREY_95_HEX, - CODE: COLOR_BASE_GREY_95_CODE, - CLASSNAME: COLOR_BASE_GREY_95_CLASSNAME, - }, 100: { HEX: COLOR_BASE_GREY_100_HEX, CODE: COLOR_BASE_GREY_100_CODE, CLASSNAME: COLOR_BASE_GREY_100_CLASSNAME, }, + 150: { + HEX: COLOR_BASE_GREY_150_HEX, + CODE: COLOR_BASE_GREY_150_CODE, + CLASSNAME: COLOR_BASE_GREY_150_CLASSNAME, + }, 200: { HEX: COLOR_BASE_GREY_200_HEX, CODE: COLOR_BASE_GREY_200_CODE, @@ -947,6 +882,31 @@ export const COLOR = { CODE: COLOR_BASE_GREY_500_CODE, CLASSNAME: COLOR_BASE_GREY_500_CLASSNAME, }, + 600: { + HEX: COLOR_BASE_GREY_600_HEX, + CODE: COLOR_BASE_GREY_600_CODE, + CLASSNAME: COLOR_BASE_GREY_600_CLASSNAME, + }, + 700: { + HEX: COLOR_BASE_GREY_700_HEX, + CODE: COLOR_BASE_GREY_700_CODE, + CLASSNAME: COLOR_BASE_GREY_700_CLASSNAME, + }, + 800: { + HEX: COLOR_BASE_GREY_800_HEX, + CODE: COLOR_BASE_GREY_800_CODE, + CLASSNAME: COLOR_BASE_GREY_800_CLASSNAME, + }, + 900: { + HEX: COLOR_BASE_GREY_900_HEX, + CODE: COLOR_BASE_GREY_900_CODE, + CLASSNAME: COLOR_BASE_GREY_900_CLASSNAME, + }, + 950: { + HEX: COLOR_BASE_GREY_950_HEX, + CODE: COLOR_BASE_GREY_950_CODE, + CLASSNAME: COLOR_BASE_GREY_950_CLASSNAME, + }, }, WHITE: { 100: { diff --git a/style-dictionary/tokens/color/base.json b/style-dictionary/tokens/color/base.json index db7eb972b2..26da3031af 100644 --- a/style-dictionary/tokens/color/base.json +++ b/style-dictionary/tokens/color/base.json @@ -456,109 +456,59 @@ }, "charcoal": { "100": { - "hex": { "value": "{color.base.grey.60.hex.value}" }, + "hex": { "value": "{color.base.grey.600.hex.value}" }, "code": { "value": "charcoal-100" }, "classname": { "value": "t-sage--color-charcoal-100" } }, "200": { - "hex": { "value": "{color.base.grey.70.hex.value}" }, + "hex": { "value": "{color.base.grey.700.hex.value}" }, "code": { "value": "charcoal-200" }, "classname": { "value": "t-sage--color-charcoal-200" } }, "300": { - "hex": { "value": "{color.base.grey.80.hex.value}" }, + "hex": { "value": "{color.base.grey.800.hex.value}" }, "code": { "value": "charcoal-300" }, "classname": { "value": "t-sage--color-charcoal-300" } }, "400": { - "hex": { "value": "{color.base.grey.90.hex.value}" }, + "hex": { "value": "{color.base.grey.900.hex.value}" }, "code": { "value": "charcoal-400" }, "classname": { "value": "t-sage--color-charcoal-400" } }, "500": { - "hex": { "value": "{color.base.grey.95.hex.value}" }, + "hex": { "value": "{color.base.grey.950.hex.value}" }, "code": { "value": "charcoal-500" }, "classname": { "value": "t-sage--color-charcoal-500" } } }, "grey": { - "5": { - "hex": { "value": "#fcfcfc" }, - "code": { "value": "grey-5" }, - "classname": { "value": "t-sage--color-grey-5" } - }, - "10": { - "hex": { "value": "#f8f8f8" }, - "code": { "value": "grey-10" }, - "classname": { "value": "t-sage--color-grey-10" } - }, - "15": { - "hex": { "value": "#f0f0f0" }, - "code": { "value": "grey-15" }, - "classname": { "value": "t-sage--color-grey-15" } - }, - "20": { - "hex": { "value": "#e4e4e4" }, - "code": { "value": "grey-20" }, - "classname": { "value": "t-sage--color-grey-20" } - }, - "30": { - "hex": { "value": "#d2d1d1" }, - "code": { "value": "grey-30" }, - "classname": { "value": "t-sage--color-grey-30" } - }, - "40": { - "hex": { "value": "#bbbab9" }, - "code": { "value": "grey-40" }, - "classname": { "value": "t-sage--color-grey-40" } - }, "50": { - "hex": { "value": "#9b9a98" }, + "hex": { "value": "#fcfcfc" }, "code": { "value": "grey-50" }, "classname": { "value": "t-sage--color-grey-50" } }, - "60": { - "hex": { "value": "#828180" }, - "code": { "value": "grey-60" }, - "classname": { "value": "t-sage--color-grey-60" } - }, - "70": { - "hex": { "value": "#6c6a69" }, - "code": { "value": "grey-70" }, - "classname": { "value": "t-sage--color-grey-70" } - }, - "80": { - "hex": { "value": "#4d4d4c" }, - "code": { "value": "grey-80" }, - "classname": { "value": "t-sage--color-grey-80" } - }, - "90": { - "hex": { "value": "#343332" }, - "code": { "value": "grey-90" }, - "classname": { "value": "t-sage--color-grey-90" } - }, - "95": { - "hex": { "value": "#1a1a19" }, - "code": { "value": "grey-95" }, - "classname": { "value": "t-sage--color-grey-95" } - }, "100": { "hex": { "value": "#f8f8f8" }, "code": { "value": "grey-100" }, "classname": { "value": "t-sage--color-grey-100" } }, - "200": { + "150": { "hex": { "value": "#f0f0f0" }, + "code": { "value": "grey-15" }, + "classname": { "value": "t-sage--color-grey-150" } + }, + "200": { + "hex": { "value": "#e4e4e4" }, "code": { "value": "grey-200" }, "classname": { "value": "t-sage--color-grey-200" } }, "300": { - "hex": { "value": "#e4e4e4" }, + "hex": { "value": "#d2d1d1" }, "code": { "value": "grey-300" }, "classname": { "value": "t-sage--color-grey-300" } }, "400": { - "hex": { "value": "#d2d1d1" }, + "hex": { "value": "#bbbab9" }, "code": { "value": "grey-400" }, "classname": { "value": "t-sage--color-grey-400" } }, @@ -566,6 +516,31 @@ "hex": { "value": "#9b9a98" }, "code": { "value": "grey-500" }, "classname": { "value": "t-sage--color-grey-500" } + }, + "600": { + "hex": { "value": "#828180" }, + "code": { "value": "grey-600" }, + "classname": { "value": "t-sage--color-grey-600" } + }, + "700": { + "hex": { "value": "#6c6a69" }, + "code": { "value": "grey-700" }, + "classname": { "value": "t-sage--color-grey-700" } + }, + "800": { + "hex": { "value": "#4d4d4c" }, + "code": { "value": "grey-800" }, + "classname": { "value": "t-sage--color-grey-800" } + }, + "900": { + "hex": { "value": "#343332" }, + "code": { "value": "grey-900" }, + "classname": { "value": "t-sage--color-grey-900" } + }, + "950": { + "hex": { "value": "#1a1a19" }, + "code": { "value": "grey-950" }, + "classname": { "value": "t-sage--color-grey-950" } } }, "white": { diff --git a/style-dictionary/tokens/color/combos.json b/style-dictionary/tokens/color/combos.json index e562bd3aa2..440160d6d7 100644 --- a/style-dictionary/tokens/color/combos.json +++ b/style-dictionary/tokens/color/combos.json @@ -10,10 +10,10 @@ "value": "{color.base.charcoal.500.hex}" }, "background": { - "value": "{color.base.grey.300.hex}" + "value": "{color.base.grey.200.hex}" }, "background-accent": { - "value": "{color.base.grey.400.hex}" + "value": "{color.base.grey.300.hex}" }, "icon-background-accent": { "value": "{color.base.charcoal.200.hex}" @@ -32,7 +32,7 @@ }, "bold": { "foreground": { - "value": "{color.base.grey.200.hex}" + "value": "{color.base.grey.150.hex}" }, "background": { "value": "{color.base.charcoal.400.hex}" From 7dcc2c74f19a81e96fda7e0b71e251ecfc68e7c7 Mon Sep 17 00:00:00 2001 From: Quinton Jason Date: Wed, 21 Aug 2024 16:40:53 -0500 Subject: [PATCH 13/31] fix: update react green colors --- packages/sage-react/lib/Chart/Chart.story.jsx | 4 ++-- packages/sage-react/lib/Chart/types/Bar.jsx | 2 +- packages/sage-react/lib/MediaTile/MediaTile.story.jsx | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/sage-react/lib/Chart/Chart.story.jsx b/packages/sage-react/lib/Chart/Chart.story.jsx index 0721c11e43..4ecb0bec7a 100644 --- a/packages/sage-react/lib/Chart/Chart.story.jsx +++ b/packages/sage-react/lib/Chart/Chart.story.jsx @@ -72,7 +72,7 @@ MultipleBars.args = { { dataKey: 'thisYear', name: 'This Year', - fill: SageTokens.COLOR_PALETTE.SAGE_100, + fill: SageTokens.COLOR_PALETTE.GREEN_150, }, { dataKey: 'lastYear', @@ -124,7 +124,7 @@ Donut.args = { { name: 'Healthy', value: 2467, - fill: SageTokens.COLOR_PALETTE.SAGE_100, + fill: SageTokens.COLOR_PALETTE.GREEN_150, }, { name: 'Unengaged', diff --git a/packages/sage-react/lib/Chart/types/Bar.jsx b/packages/sage-react/lib/Chart/types/Bar.jsx index d0eb5b8e9d..ebf5386e4f 100644 --- a/packages/sage-react/lib/Chart/types/Bar.jsx +++ b/packages/sage-react/lib/Chart/types/Bar.jsx @@ -72,7 +72,7 @@ Bar.defaultProps = { aspect: 1.8, bars: [{ dataKey: 'value', - fill: SageTokens.COLOR_PALETTE.SAGE_100, + fill: SageTokens.COLOR_PALETTE.GREEN_150, name: 'Value' }], showLegend: false, diff --git a/packages/sage-react/lib/MediaTile/MediaTile.story.jsx b/packages/sage-react/lib/MediaTile/MediaTile.story.jsx index bfd1803c21..f37175394c 100644 --- a/packages/sage-react/lib/MediaTile/MediaTile.story.jsx +++ b/packages/sage-react/lib/MediaTile/MediaTile.story.jsx @@ -85,7 +85,7 @@ KitchenSink.args = { ), mediaConfigs: { aspectRatio: 1.8, - backgroundColor: SageTokens.COLOR_PALETTE.SAGE_100, + backgroundColor: SageTokens.COLOR_PALETTE.GREEN_150, padded: true, }, tileLink: null, From c527b1e1e96a6f9733ee5f6cf519004855cded49 Mon Sep 17 00:00:00 2001 From: Quinton Jason Date: Wed, 21 Aug 2024 16:57:24 -0500 Subject: [PATCH 14/31] fix: update react purple colors --- packages/sage-react/lib/Chart/Chart.story.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/sage-react/lib/Chart/Chart.story.jsx b/packages/sage-react/lib/Chart/Chart.story.jsx index 4ecb0bec7a..e81fe514f3 100644 --- a/packages/sage-react/lib/Chart/Chart.story.jsx +++ b/packages/sage-react/lib/Chart/Chart.story.jsx @@ -144,7 +144,7 @@ Donut.args = { { name: 'Grumpy', value: 53, - fill: SageTokens.COLOR_PALETTE.PURPLE_200, + fill: SageTokens.COLOR_PALETTE.PURPLE_300, }, ], loading: false, From 8af1541b66955d886a525ccc0e46258f2b16a399 Mon Sep 17 00:00:00 2001 From: Quinton Jason Date: Wed, 21 Aug 2024 17:19:40 -0500 Subject: [PATCH 15/31] fix: update red in jsx and erb --- docs/app/helpers/type_specs_helper.rb | 32 +++++++++---------- packages/sage-react/lib/Chart/Chart.story.jsx | 2 +- 2 files changed, 17 insertions(+), 17 deletions(-) diff --git a/docs/app/helpers/type_specs_helper.rb b/docs/app/helpers/type_specs_helper.rb index 5c2cc62ef2..cad3c3f71c 100644 --- a/docs/app/helpers/type_specs_helper.rb +++ b/docs/app/helpers/type_specs_helper.rb @@ -134,11 +134,11 @@ def sage_type_specs_color_classes )), }, { - color: %(Red), - type_class: md("`t-sage--color-red-300`"), + color: %(Red), + type_class: md("`t-sage--color-red-600`"), constants: md(%( - Rails: `SageClassnames::TYPE_COLORS::RED_300`
- React: `SageClassnames.TYPE_COLORS.RED_300` + Rails: `SageClassnames::TYPE_COLORS::RED_600`
+ React: `SageClassnames.TYPE_COLORS.RED_600` )), }, { @@ -150,27 +150,27 @@ def sage_type_specs_color_classes )), }, { - color: %(Yellow), - type_class: md("`t-sage--color-yellow-300`"), + color: %(Yellow), + type_class: md("`t-sage--color-yellow-400`"), constants: md(%( - Rails: `SageClassnames::TYPE_COLORS::YELLOW_300`
- React: `SageClassnames.TYPE_COLORS.YELLOW_300` + Rails: `SageClassnames::TYPE_COLORS::YELLOW_400`
+ React: `SageClassnames.TYPE_COLORS.YELLOW_400` )), }, { - color: %(Sage), - type_class: md("`t-sage--color-sage-300`"), + color: %(Sage), + type_class: md("`t-sage--color-green-600`"), constants: md(%( - Rails: `SageClassnames::TYPE_COLORS::SAGE_300`
- React: `SageClassnames.TYPE_COLORS.SAGE_300` + Rails: `SageClassnames::TYPE_COLORS::GREEN_600`
+ React: `SageClassnames.TYPE_COLORS.GREEN_600` )), }, { - color: %(Purple), - type_class: md("`t-sage--color-purple-300`"), + color: %(Purple), + type_class: md("`t-sage--color-purple-600`"), constants: md(%( - Rails: `SageClassnames::TYPE_COLORS::PURPLE_300`
- React: `SageClassnames.TYPE_COLORS.PURPLE_300` + Rails: `SageClassnames::TYPE_COLORS::PURPLE_600`
+ React: `SageClassnames.TYPE_COLORS.PURPLE_600` )), } ] diff --git a/packages/sage-react/lib/Chart/Chart.story.jsx b/packages/sage-react/lib/Chart/Chart.story.jsx index e81fe514f3..8216863544 100644 --- a/packages/sage-react/lib/Chart/Chart.story.jsx +++ b/packages/sage-react/lib/Chart/Chart.story.jsx @@ -134,7 +134,7 @@ Donut.args = { { name: 'Inactive', value: 153, - fill: SageTokens.COLOR_PALETTE.RED_200, + fill: SageTokens.COLOR_PALETTE.RED_300, }, { name: 'Hungry', From 3476ad32d36bbdd86544af35ee25156b6cf88aa6 Mon Sep 17 00:00:00 2001 From: Quinton Jason Date: Wed, 21 Aug 2024 17:31:08 -0500 Subject: [PATCH 16/31] fix: update orange color token to mercury --- docs/app/helpers/type_specs_helper.rb | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/app/helpers/type_specs_helper.rb b/docs/app/helpers/type_specs_helper.rb index cad3c3f71c..c3da84fb90 100644 --- a/docs/app/helpers/type_specs_helper.rb +++ b/docs/app/helpers/type_specs_helper.rb @@ -142,11 +142,11 @@ def sage_type_specs_color_classes )), }, { - color: %(Orange), - type_class: md("`t-sage--color-orange-300`"), + color: %(Orange), + type_class: md("`t-sage--color-mercury-500`"), constants: md(%( - Rails: `SageClassnames::TYPE_COLORS::ORANGE_300`
- React: `SageClassnames.TYPE_COLORS.ORANGE_300` + Rails: `SageClassnames::TYPE_COLORS::MERCURY_500`
+ React: `SageClassnames.TYPE_COLORS.MERCURY_500` )), }, { From c9ce881697cdd777f189230e9968297bf72f7044 Mon Sep 17 00:00:00 2001 From: Quinton Jason Date: Wed, 21 Aug 2024 19:01:44 -0500 Subject: [PATCH 17/31] fix: update charcoal color token to upper greys --- docs/app/helpers/type_specs_helper.rb | 8 ++-- .../examples/components/dot/_preview.html.erb | 1 - .../components/drawer/_preview.html.erb | 2 +- .../components/icon_list/_preview.html.erb | 6 +-- .../components/panel_figure/_preview.html.erb | 2 +- .../layouts/frame/examples/_nesting.html.erb | 2 +- .../layouts/frame/examples/_stat_box.html.erb | 4 +- docs/app/views/pages/grid_templates.html.erb | 2 +- .../sage-frontend/stylesheets/docs/_code.scss | 2 +- .../stylesheets/docs/_colors.scss | 6 +-- .../stylesheets/docs/_example.scss | 12 +++--- .../stylesheets/docs/_quick_links.scss | 2 +- .../stylesheets/docs/_rouge_theme.scss | 12 +++--- .../stylesheets/docs/_specs.scss | 2 +- .../stylesheets/docs/_status_key.scss | 2 +- .../stylesheets/docs/_status_table.scss | 2 +- .../_sage_breadcrumbs.html.erb | 2 +- .../_sage_form_select.html.erb | 2 +- .../_sage_modal_content.html.erb | 2 +- .../sage_components/_sage_search.html.erb | 2 +- .../_sage_sortable_item.html.erb | 2 +- .../lib/stylesheets/components/_alert.scss | 14 +++---- .../lib/stylesheets/components/_avatar.scss | 4 +- .../lib/stylesheets/components/_badge.scss | 2 +- .../lib/stylesheets/components/_banner.scss | 8 ++-- .../stylesheets/components/_breadcrumbs.scss | 6 +-- .../lib/stylesheets/components/_button.scss | 42 +++++++++---------- .../lib/stylesheets/components/_card.scss | 6 +-- .../lib/stylesheets/components/_carousel.scss | 2 +- .../stylesheets/components/_chart_legend.scss | 2 +- .../components/_chart_summary.scss | 6 +-- .../lib/stylesheets/components/_checkbox.scss | 8 ++-- .../lib/stylesheets/components/_choice.scss | 8 ++-- .../stylesheets/components/_copy_text.scss | 4 +- .../stylesheets/components/_data_card.scss | 6 +-- .../stylesheets/components/_description.scss | 4 +- .../lib/stylesheets/components/_dropdown.scss | 8 ++-- .../components/_feature_toggle.scss | 2 +- .../stylesheets/components/_form_input.scss | 2 +- .../stylesheets/components/_form_section.scss | 4 +- .../stylesheets/components/_form_select.scss | 18 ++++---- .../components/_form_textarea.scss | 2 +- .../lib/stylesheets/components/_hero.scss | 4 +- .../lib/stylesheets/components/_hint.scss | 2 +- .../lib/stylesheets/components/_icon.scss | 2 +- .../stylesheets/components/_icon_list.scss | 2 +- .../stylesheets/components/_indicator.scss | 2 +- .../stylesheets/components/_input_group.scss | 2 +- .../lib/stylesheets/components/_link.scss | 14 +++---- .../stylesheets/components/_media_tile.scss | 4 +- .../stylesheets/components/_menu_button.scss | 4 +- .../lib/stylesheets/components/_modal.scss | 12 +++--- .../lib/stylesheets/components/_nav.scss | 2 +- .../lib/stylesheets/components/_overlay.scss | 2 +- .../stylesheets/components/_page_heading.scss | 4 +- .../lib/stylesheets/components/_panel.scss | 6 +-- .../lib/stylesheets/components/_popover.scss | 4 +- .../lib/stylesheets/components/_property.scss | 2 +- .../lib/stylesheets/components/_radio.scss | 2 +- .../lib/stylesheets/components/_search.scss | 8 ++-- .../lib/stylesheets/components/_sortable.scss | 4 +- .../lib/stylesheets/components/_stat_box.scss | 4 +- .../stylesheets/components/_status_icon.scss | 6 +-- .../lib/stylesheets/components/_switch.scss | 12 +++--- .../lib/stylesheets/components/_tab.scss | 4 +- .../lib/stylesheets/components/_table.scss | 10 ++--- .../lib/stylesheets/components/_tag.scss | 4 +- .../lib/stylesheets/components/_toast.scss | 2 +- .../lib/stylesheets/components/_tooltip.scss | 2 +- .../components/_transaction_card.scss | 2 +- .../stylesheets/components/_typeahead.scss | 4 +- .../stylesheets/components/_upload_card.scss | 8 ++-- .../lib/stylesheets/core/_variables.scss | 16 +++---- .../lib/stylesheets/core/mixins/_sage.scss | 16 +++---- .../lib/stylesheets/global/_reboot.scss | 2 +- .../tokens/_border_interactive.scss | 2 +- .../sage-react/lib/Drawer/Drawer.story.jsx | 4 +- packages/sage-react/lib/Frame/Frame.story.jsx | 6 +-- .../sage-react/lib/IconList/IconListItem.jsx | 2 +- packages/sage-react/lib/Modal/ModalHeader.jsx | 2 +- packages/sage-react/lib/Search/Search.jsx | 2 +- packages/sage-react/lib/Select/Select.jsx | 2 +- .../sage-react/lib/configs/tokens/recharts.js | 2 +- style-dictionary/tokens/color/combos.json | 14 +++---- style-dictionary/tokens/color/core.json | 4 +- 85 files changed, 224 insertions(+), 225 deletions(-) diff --git a/docs/app/helpers/type_specs_helper.rb b/docs/app/helpers/type_specs_helper.rb index c3da84fb90..a356c03bd6 100644 --- a/docs/app/helpers/type_specs_helper.rb +++ b/docs/app/helpers/type_specs_helper.rb @@ -126,11 +126,11 @@ def sage_type_specs_color_classes )), }, { - color: %(Grey), - type_class: md("`t-sage--color-charcoal-100`"), + color: %(Grey), + type_class: md("`t-sage--color-grey-600`"), constants: md(%( - Rails: `SageClassnames::TYPE_COLORS::CHARCOAL_100`
- React: `SageClassnames.TYPE_COLORS.CHARCOAL_100` + Rails: `SageClassnames::TYPE_COLORS::GREY_600`
+ React: `SageClassnames.TYPE_COLORS.GREY_600` )), }, { diff --git a/docs/app/views/examples/components/dot/_preview.html.erb b/docs/app/views/examples/components/dot/_preview.html.erb index d36d7041c2..2fb3886a75 100644 --- a/docs/app/views/examples/components/dot/_preview.html.erb +++ b/docs/app/views/examples/components/dot/_preview.html.erb @@ -7,7 +7,6 @@ <%= sage_component SageDot, { color: "red" } %> <%= sage_component SageDot, { color: "yellow" } %> <%= sage_component SageDot, { color: "purple" } %> -<%= sage_component SageDot, { color: "charcoal" } %> <%= sage_component SageDot, { color: "grey" } %>

Custom color

diff --git a/docs/app/views/examples/components/drawer/_preview.html.erb b/docs/app/views/examples/components/drawer/_preview.html.erb index b625ef0703..992e9807f8 100644 --- a/docs/app/views/examples/components/drawer/_preview.html.erb +++ b/docs/app/views/examples/components/drawer/_preview.html.erb @@ -1,5 +1,5 @@ <% -heading_specs = "#{SageClassnames::TYPE::HEADING_4} #{SageClassnames::TYPE_COLORS::CHARCOAL_500}" +heading_specs = "#{SageClassnames::TYPE::HEADING_4} #{SageClassnames::TYPE_COLORS::GREY_950}" modal_primary_content = %(

Drawer diff --git a/docs/app/views/examples/components/icon_list/_preview.html.erb b/docs/app/views/examples/components/icon_list/_preview.html.erb index 48f081305e..4550d2c572 100644 --- a/docs/app/views/examples/components/icon_list/_preview.html.erb +++ b/docs/app/views/examples/components/icon_list/_preview.html.erb @@ -3,7 +3,7 @@ items: [ { bullet: %( - + ), body: %(

Lorem ipsum dolor sit amet

@@ -12,7 +12,7 @@ }, { bullet: %( - + ), body: %(

Lorem ipsum dolor sit amet

@@ -21,7 +21,7 @@ }, { bullet: %( - + ), body: %(

Lorem ipsum dolor sit amet

diff --git a/docs/app/views/examples/components/panel_figure/_preview.html.erb b/docs/app/views/examples/components/panel_figure/_preview.html.erb index 5ea57928dd..c3b12dee72 100644 --- a/docs/app/views/examples/components/panel_figure/_preview.html.erb +++ b/docs/app/views/examples/components/panel_figure/_preview.html.erb @@ -73,7 +73,7 @@ but note that Wistia objects need a little additional styling that can be enable <%= sage_component SagePanelFigure, { bleed: "top", padded: true, - background_color: SageTokens::COLOR_PALETTE[:CHARCOAL_100], + background_color: SageTokens::COLOR_PALETTE[:GREY_600], } do %> <%= image_tag("card-placeholder-lg.png", alt: "") %> <% end %> diff --git a/docs/app/views/examples/layouts/frame/examples/_nesting.html.erb b/docs/app/views/examples/layouts/frame/examples/_nesting.html.erb index c149933f54..b8f2043496 100644 --- a/docs/app/views/examples/layouts/frame/examples/_nesting.html.erb +++ b/docs/app/views/examples/layouts/frame/examples/_nesting.html.erb @@ -13,7 +13,7 @@

Lorem ipsum dolor sit

-

"> +

"> Consectetur adipiscing elit

<% end %> diff --git a/docs/app/views/examples/layouts/frame/examples/_stat_box.html.erb b/docs/app/views/examples/layouts/frame/examples/_stat_box.html.erb index 77ef9eaaf7..06eababf1c 100644 --- a/docs/app/views/examples/layouts/frame/examples/_stat_box.html.erb +++ b/docs/app/views/examples/layouts/frame/examples/_stat_box.html.erb @@ -8,7 +8,7 @@ } do %> <%= sage_layout SageFrame, { gap: "xs" } do %> <%= sage_layout SageFrame, { gap: "none" } do %> -

"> +

"> All payments

<%= sage_layout SageFrame, { @@ -20,7 +20,7 @@ "> 40 - "> + "> successful payments <% end %> diff --git a/docs/app/views/pages/grid_templates.html.erb b/docs/app/views/pages/grid_templates.html.erb index bacaad9af5..67435be139 100644 --- a/docs/app/views/pages/grid_templates.html.erb +++ b/docs/app/views/pages/grid_templates.html.erb @@ -106,7 +106,7 @@ dots = [ %().html_safe, sage_component(SageBadge, { value: "Verified", color: "published" }).html_safe, %($5.99).html_safe, - %().html_safe + %().html_safe ] %> diff --git a/docs/lib/sage-frontend/stylesheets/docs/_code.scss b/docs/lib/sage-frontend/stylesheets/docs/_code.scss index 90a68f7f56..74c4807939 100644 --- a/docs/lib/sage-frontend/stylesheets/docs/_code.scss +++ b/docs/lib/sage-frontend/stylesheets/docs/_code.scss @@ -28,7 +28,7 @@ } } pre .nocode { - color: sage-color(charcoal, 500); + color: sage-color(grey, 950); background-color: none; } pre .str { /* string */ diff --git a/docs/lib/sage-frontend/stylesheets/docs/_colors.scss b/docs/lib/sage-frontend/stylesheets/docs/_colors.scss index b246030378..1a4dca47e5 100644 --- a/docs/lib/sage-frontend/stylesheets/docs/_colors.scss +++ b/docs/lib/sage-frontend/stylesheets/docs/_colors.scss @@ -62,7 +62,7 @@ color: sage-color(white); } @else if ($name == white or $name == grey) { - color: sage-color(charcoal, 500); + color: sage-color(grey, 950); } @else if ($name == black or $name == charcoal) { color: sage-color(white); @@ -111,8 +111,8 @@ .color-white-100 { border-radius: sage-border(radius); - border: 1px solid sage-color(charcoal, 300); - box-shadow: inset 0 0 0.0625rem sage-color(charcoal, 300); + border: 1px solid sage-color(grey, 800); + box-shadow: inset 0 0 0.0625rem sage-color(grey, 800); } .color-black-100 { diff --git a/docs/lib/sage-frontend/stylesheets/docs/_example.scss b/docs/lib/sage-frontend/stylesheets/docs/_example.scss index 9e2d876bf8..b167db5d1f 100644 --- a/docs/lib/sage-frontend/stylesheets/docs/_example.scss +++ b/docs/lib/sage-frontend/stylesheets/docs/_example.scss @@ -5,7 +5,7 @@ ================================================== */ $-example-link-color: inherit; -$-example-link-color-hover: sage-color(charcoal, 100); +$-example-link-color-hover: sage-color(grey, 600); $-example-code-preview-height: 13rem; $-example-code-preview-button-color: sage-color(white); @@ -14,7 +14,7 @@ $-example-code-preview-button-blur: blur(2px); $-example-code-preview-button-bg: rgba(sage-color(primary, 300), 0.75); .example__title { - color: sage-color(charcoal, 500); + color: sage-color(grey, 950); text-transform: capitalize; } @@ -40,7 +40,7 @@ $-example-code-preview-button-bg: rgba(sage-color(primary, 300), 0.75); &:hover, &:focus, &:active { - color: sage-color(charcoal, 500); + color: sage-color(grey, 950); text-decoration: none; } } @@ -50,7 +50,7 @@ $-example-code-preview-button-bg: rgba(sage-color(primary, 300), 0.75); min-width: rem(100px); margin: sage-spacing() 0; padding: sage-spacing(xs) sage-spacing(); - color: sage-color(charcoal, 500); + color: sage-color(grey, 950); text-align: center; background: sage-color(white); box-shadow: sage-shadow(); @@ -197,11 +197,11 @@ $-example-code-preview-button-bg: rgba(sage-color(primary, 300), 0.75); @media (max-width: map-get($-media-tile-breakpoints, 1-col-max)) { grid-template-columns: repeat(1, 1fr); } - + @media (min-width: map-get($-media-tile-breakpoints, 2-col-min)) and (max-width: map-get($-media-tile-breakpoints, 2-col-max)) { grid-template-columns: repeat(2, 1fr); } - + @media (min-width: map-get($-media-tile-breakpoints, 3-col-min)) { grid-template-columns: repeat(3, 1fr); } diff --git a/docs/lib/sage-frontend/stylesheets/docs/_quick_links.scss b/docs/lib/sage-frontend/stylesheets/docs/_quick_links.scss index cc8e946019..b6510fc6d7 100644 --- a/docs/lib/sage-frontend/stylesheets/docs/_quick_links.scss +++ b/docs/lib/sage-frontend/stylesheets/docs/_quick_links.scss @@ -4,7 +4,7 @@ For Sage documentation use ================================================== */ -$-quick-links-color-text: sage-color(charcoal, 400); +$-quick-links-color-text: sage-color(grey, 900); $-quick-links-color-focus: sage-color(primary, 300); $-quick-links-color-background: sage-color(primary, 200); diff --git a/docs/lib/sage-frontend/stylesheets/docs/_rouge_theme.scss b/docs/lib/sage-frontend/stylesheets/docs/_rouge_theme.scss index 65cbcbad0f..c247ac9c06 100644 --- a/docs/lib/sage-frontend/stylesheets/docs/_rouge_theme.scss +++ b/docs/lib/sage-frontend/stylesheets/docs/_rouge_theme.scss @@ -1,15 +1,15 @@ // background $-color-1: sage-color(grey, 200); // Whitespace -$-color-24: sage-color(charcoal, 200); +$-color-24: sage-color(grey, 700); // Name entity -$-color-20: sage-color(charcoal, 400); +$-color-20: sage-color(grey, 900); // Operators, numbers -$-color-6: sage-color(charcoal, 300); +$-color-6: sage-color(grey, 800); // Heading and prompt -$-color-9: sage-color(charcoal, 400); +$-color-9: sage-color(grey, 900); // Comments of various sorts -$-color-3: sage-color(charcoal, 300); +$-color-3: sage-color(grey, 800); // Subheading $-color-12: sage-color(red, 500); // Constant @@ -29,7 +29,7 @@ $-color-25: sage-color(orange, 200); // Regex/interpolation $-color-26: sage-color(orange, 200); // Preproc comment -$-color-7: sage-color(charcoal, 300); +$-color-7: sage-color(grey, 800); // Highlight? $-color-2: sage-color(yellow, 150); // Name label diff --git a/docs/lib/sage-frontend/stylesheets/docs/_specs.scss b/docs/lib/sage-frontend/stylesheets/docs/_specs.scss index 2dafe9ff9a..37bf5a3dbf 100644 --- a/docs/lib/sage-frontend/stylesheets/docs/_specs.scss +++ b/docs/lib/sage-frontend/stylesheets/docs/_specs.scss @@ -7,7 +7,7 @@ .sage-specs { th { padding: 4px; - color: sage-color(charcoal, 200); + color: sage-color(grey, 700); border-bottom: 1px solid sage-color(grey, 300); } diff --git a/docs/lib/sage-frontend/stylesheets/docs/_status_key.scss b/docs/lib/sage-frontend/stylesheets/docs/_status_key.scss index 32aa628dce..d4ea6ba477 100644 --- a/docs/lib/sage-frontend/stylesheets/docs/_status_key.scss +++ b/docs/lib/sage-frontend/stylesheets/docs/_status_key.scss @@ -52,7 +52,7 @@ margin-left: sage-spacing(xs); font-size: sage-font-size(body-sm); font-weight: sage-font-weight(semibold); - color: sage-color(charcoal, 200); + color: sage-color(grey, 700); } @media screen and (min-width: sage-breakpoint(lg-min)) { diff --git a/docs/lib/sage-frontend/stylesheets/docs/_status_table.scss b/docs/lib/sage-frontend/stylesheets/docs/_status_table.scss index f21a563ef7..5e2d78111e 100644 --- a/docs/lib/sage-frontend/stylesheets/docs/_status_table.scss +++ b/docs/lib/sage-frontend/stylesheets/docs/_status_table.scss @@ -6,7 +6,7 @@ $-status-table-border: rem(2px) solid sage-color(grey); $-status-table-cell-padding: sage-spacing(xs) sage-spacing(sm); -$-status-table-heading-color: sage-color(charcoal, 100); +$-status-table-heading-color: sage-color(grey, 600); $-status-table-heading-font-size: sage-font-size(body-sm); $-status-table-heading-padding: sage-spacing(xs) sage-spacing(sm); diff --git a/docs/lib/sage_rails/app/views/sage_components/_sage_breadcrumbs.html.erb b/docs/lib/sage_rails/app/views/sage_components/_sage_breadcrumbs.html.erb index cced0815b2..12a78a4152 100644 --- a/docs/lib/sage_rails/app/views/sage_components/_sage_breadcrumbs.html.erb +++ b/docs/lib/sage_rails/app/views/sage_components/_sage_breadcrumbs.html.erb @@ -32,7 +32,7 @@ is_progressbar = component.is_progressbar.present? && component.is_progressbar <% if is_progressbar %> diff --git a/docs/lib/sage_rails/app/views/sage_components/_sage_form_select.html.erb b/docs/lib/sage_rails/app/views/sage_components/_sage_form_select.html.erb index fd321c5ffc..af93f63862 100644 --- a/docs/lib/sage_rails/app/views/sage_components/_sage_form_select.html.erb +++ b/docs/lib/sage_rails/app/views/sage_components/_sage_form_select.html.erb @@ -57,7 +57,7 @@ <% if component.message.present? %> diff --git a/docs/lib/sage_rails/app/views/sage_components/_sage_modal_content.html.erb b/docs/lib/sage_rails/app/views/sage_components/_sage_modal_content.html.erb index 4f23ed80a4..e410dd040d 100644 --- a/docs/lib/sage_rails/app/views/sage_components/_sage_modal_content.html.erb +++ b/docs/lib/sage_rails/app/views/sage_components/_sage_modal_content.html.erb @@ -37,7 +37,7 @@ <% if component.subheader %> <%= sage_component SageCardRow, { grid_template: "te" } do %> -

"> +

"> <%= component.subheader %>

diff --git a/docs/lib/sage_rails/app/views/sage_components/_sage_search.html.erb b/docs/lib/sage_rails/app/views/sage_components/_sage_search.html.erb index 739d1dddab..5a85eed60b 100644 --- a/docs/lib/sage_rails/app/views/sage_components/_sage_search.html.erb +++ b/docs/lib/sage_rails/app/views/sage_components/_sage_search.html.erb @@ -13,7 +13,7 @@ <%= component.label_text %>
- + <%= component.generated_html_attributes.html_safe %> > - + <% if component.image.present? %>
<%= image_tag component.image, alt: "Cover for #{component.title}" %> diff --git a/packages/sage-assets/lib/stylesheets/components/_alert.scss b/packages/sage-assets/lib/stylesheets/components/_alert.scss index 26d07a6e10..29984678f3 100644 --- a/packages/sage-assets/lib/stylesheets/components/_alert.scss +++ b/packages/sage-assets/lib/stylesheets/components/_alert.scss @@ -22,8 +22,8 @@ $-alert-background-colors: ( ); $-alert-icon-colors: ( - default: sage-color(charcoal, 200), - draft: sage-color(charcoal, 200), + default: sage-color(grey, 700), + draft: sage-color(grey, 700), info: sage-color(primary, 300), published: sage-color(sage, 300), success: sage-color(sage, 300), @@ -119,7 +119,7 @@ $-alert-border-colors: ( .sage-alert__title { @extend %t-sage-heading-5; - color: sage-color(charcoal, 500); + color: sage-color(grey, 950); } .sage-alert__title--add-on { @@ -164,11 +164,11 @@ $-alert-border-colors: ( @extend %t-sage-body-med; @include sage-focus-outline($outline-offset-inline: 4px); - color: sage-color(charcoal, 400); + color: sage-color(grey, 900); text-decoration: none; &:hover { - color: sage-color(charcoal, 500); + color: sage-color(grey, 950); text-decoration: underline; } @@ -191,11 +191,11 @@ $-alert-border-colors: ( a:not([class*="sage-"]) { @include sage-focus-outline($outline-offset-inline: 4px); - color: sage-color(charcoal, 400); + color: sage-color(grey, 900); text-decoration: underline; &:hover { - color: sage-color(charcoal, 500); + color: sage-color(grey, 950); text-decoration: none; } diff --git a/packages/sage-assets/lib/stylesheets/components/_avatar.scss b/packages/sage-assets/lib/stylesheets/components/_avatar.scss index 1d8fc10b8d..a8dc43bf7e 100644 --- a/packages/sage-assets/lib/stylesheets/components/_avatar.scss +++ b/packages/sage-assets/lib/stylesheets/components/_avatar.scss @@ -9,11 +9,11 @@ $-avatar-min-size: rem(32px); $-avatar-max-size: rem(128px); $-avatar-ring-colors: ( charcoal: ( - main: sage-color(charcoal, 500), + main: sage-color(grey, 950), bg: sage-color(grey, 200) ), grey: ( - main: sage-color(charcoal, 500), + main: sage-color(grey, 950), bg: sage-color(grey, 200) ), purple: ( diff --git a/packages/sage-assets/lib/stylesheets/components/_badge.scss b/packages/sage-assets/lib/stylesheets/components/_badge.scss index 4ca5bf32bf..52a29bf6c9 100644 --- a/packages/sage-assets/lib/stylesheets/components/_badge.scss +++ b/packages/sage-assets/lib/stylesheets/components/_badge.scss @@ -41,7 +41,7 @@ $-badge-statuses: ( max-width: 100%; min-height: $-badge-min-height; padding: $-badge-padding; - color: sage-color(charcoal, 500); + color: sage-color(grey, 950); white-space: nowrap; background-color: transparent; border-radius: $-badge-border-radius; diff --git a/packages/sage-assets/lib/stylesheets/components/_banner.scss b/packages/sage-assets/lib/stylesheets/components/_banner.scss index db63ef2a51..bc052abb89 100644 --- a/packages/sage-assets/lib/stylesheets/components/_banner.scss +++ b/packages/sage-assets/lib/stylesheets/components/_banner.scss @@ -15,14 +15,14 @@ $-banner-colors: ( ), secondary: ( background: sage-color(grey, 200), - text: sage-color(charcoal, 500), - text-hover: sage-color(charcoal, 300), + text: sage-color(grey, 950), + text-hover: sage-color(grey, 800), icon: "info-circle", ), warning: ( background: sage-color(yellow, 300), - text: sage-color(charcoal, 500), - text-hover: sage-color(charcoal, 300), + text: sage-color(grey, 950), + text-hover: sage-color(grey, 800), icon: "warning", ), danger: ( diff --git a/packages/sage-assets/lib/stylesheets/components/_breadcrumbs.scss b/packages/sage-assets/lib/stylesheets/components/_breadcrumbs.scss index 0c59c97996..720545f930 100644 --- a/packages/sage-assets/lib/stylesheets/components/_breadcrumbs.scss +++ b/packages/sage-assets/lib/stylesheets/components/_breadcrumbs.scss @@ -6,7 +6,7 @@ $-breadcrumb-current-color: sage-color(charcoal, 400); $-breadcrumb-interactive-color: sage-color(charcoal, 400); -$-breadcrumb-outline-color: sage-color(purple, 30); +$-breadcrumb-outline-color: sage-color(purple, 300); .sage-breadcrumbs { display: flex; @@ -33,7 +33,7 @@ $-breadcrumb-outline-color: sage-color(purple, 30); &:not(:last-child) { &::after { content: "/"; - color: sage-color(charcoal, 200); + color: sage-color(grey, 700); } .sage-breadcrumbs--progressbar &::after { @@ -56,7 +56,7 @@ $-breadcrumb-outline-color: sage-color(purple, 30); display: inline-flex; align-items: center; padding: sage-spacing(3xs) sage-spacing(xs); - color: sage-color(charcoal, 300); + color: sage-color(grey, 800); font-size: sage-font-size(body-sm); font-weight: sage-font-weight(semibold); text-decoration: none; diff --git a/packages/sage-assets/lib/stylesheets/components/_button.scss b/packages/sage-assets/lib/stylesheets/components/_button.scss index 5be89eefb7..b4ae3912d4 100644 --- a/packages/sage-assets/lib/stylesheets/components/_button.scss +++ b/packages/sage-assets/lib/stylesheets/components/_button.scss @@ -51,39 +51,39 @@ $-btn-base-styles: ( color: sage-color(white), background-color: sage-color(charcoal, 400), border-color: sage-color(charcoal, 400), - ring-color: sage-color(purple, 30), + ring-color: sage-color(purple, 300), ), hover: ( color: sage-color(white), - background-color: sage-color(charcoal, 500), + background-color: sage-color(grey, 950), ), focus: ( color: sage-color(white), - background-color: sage-color(charcoal, 400), - border-color: sage-color(charcoal, 400), + background-color: sage-color(grey, 900), + border-color: sage-color(grey, 900), ), disabled: ( - color: sage-color(charcoal, 100), + color: sage-color(grey, 600), background-color: sage-color(grey, 200), border-color: sage-color(grey, 200), ) ), secondary: ( default: ( - color: sage-color(charcoal, 400), + color: sage-color(grey, 900), background-color: sage-color(white), ring-color: sage-color(purple, 30), ), hover: ( - color: sage-color(charcoal, 400), + color: sage-color(grey, 900), background-color: sage-color(grey, 100), ), focus: ( - color: sage-color(charcoal, 400), + color: sage-color(grey, 900), background-color: sage-color(white), ), disabled: ( - color: sage-color(charcoal, 100), + color: sage-color(grey, 600), background-color: sage-color(grey, 100), ) ), @@ -121,19 +121,19 @@ $-btn-subtle-styles: ( disabled: sage-color(primary, 200), ), primary: ( - default: sage-color(charcoal, 400), - hover: sage-color(charcoal, 400), + default: sage-color(grey, 900), + hover: sage-color(grey, 900), hover-background: sage-color(grey, 150), focus: sage-color(charcoal, 400), - focus-outline: sage-color(purple, 30), + focus-outline: sage-color(purple, 300), disabled: sage-color(charcoal, 100), ), secondary: ( - default: sage-color(charcoal, 400), - hover: sage-color(charcoal, 400), + default: sage-color(grey, 900), + hover: sage-color(grey, 900), hover-background: sage-color(grey, 150), focus: sage-color(charcoal, 400), - focus-outline: sage-color(purple, 30), + focus-outline: sage-color(purple, 300), disabled: sage-color(charcoal, 100), ), danger: ( @@ -346,7 +346,7 @@ $-btn-loading-min-height: rem(36px); .sage-toolbar__group > .sage-input ~ &.sage-btn--primary, .sage-toolbar__group > .sage-search ~ &.sage-btn--primary { - box-shadow: 0 0 0 1px sage-color(charcoal, 400); + box-shadow: 0 0 0 1px sage-color(grey, 900); border-color: transparent; } @@ -477,7 +477,7 @@ $-btn-loading-min-height: rem(36px); &.sage-btn--selected { color: sage-color(white); - background-color: sage-color(charcoal, 400); + background-color: sage-color(grey, 900); &::after { color: sage-color(white); @@ -588,13 +588,13 @@ a.sage-btn { // Secondary styles, no shadow variation .sage-btn--secondary { - color: sage-color(charcoal, 400); + color: sage-color(grey, 900); background-color: sage-color(white); border: 1px solid sage-color(grey, 500); &:hover { background-color: sage-color(white); - border-color: sage-color(charcoal, 100); + border-color: sage-color(grey, 600); } &:focus { @@ -603,14 +603,14 @@ a.sage-btn { &:focus-visible, &:active { - color: sage-color(charcoal, 300); + color: sage-color(grey, 800); background-color: sage-color(white); border-color: sage-color(grey); } &:disabled, &[aria-disabled="true"] { - color: sage-color(charcoal, 100); + color: sage-color(grey, 600); background-color: sage-color(white); border-color: sage-color(grey, 200); } diff --git a/packages/sage-assets/lib/stylesheets/components/_card.scss b/packages/sage-assets/lib/stylesheets/components/_card.scss index 6ad1d41226..60ffb9bd64 100644 --- a/packages/sage-assets/lib/stylesheets/components/_card.scss +++ b/packages/sage-assets/lib/stylesheets/components/_card.scss @@ -59,11 +59,11 @@ $-sage-card-background: transparent; .sage-link.sage-card__link--primary { // Remove when Link component is updated with new styles - color: sage-color(charcoal, 400); + color: sage-color(grey, 900); text-decoration: none; &:hover { - color: sage-color(charcoal, 500); + color: sage-color(grey, 950); } } @@ -110,7 +110,7 @@ $-sage-card-background: transparent; display: inline-block; position: relative; padding: 0 sage-spacing(sm); - color: sage-color(charcoal, 100); + color: sage-color(grey, 600); font-size: sage-font-size(body-xs); background-color: sage-color(white); } diff --git a/packages/sage-assets/lib/stylesheets/components/_carousel.scss b/packages/sage-assets/lib/stylesheets/components/_carousel.scss index 2164c06e12..372b5d812e 100644 --- a/packages/sage-assets/lib/stylesheets/components/_carousel.scss +++ b/packages/sage-assets/lib/stylesheets/components/_carousel.scss @@ -5,7 +5,7 @@ //// $-sage-carousel-arrow-width: sage-spacing(lg); -$-sage-carousel-active-color: sage-color(charcoal, 100); +$-sage-carousel-active-color: sage-color(grey, 600); $-sage-carousel-inactive-color: sage-color(grey, 500); .sage-carousel { diff --git a/packages/sage-assets/lib/stylesheets/components/_chart_legend.scss b/packages/sage-assets/lib/stylesheets/components/_chart_legend.scss index e19f8a8999..5bfa016143 100644 --- a/packages/sage-assets/lib/stylesheets/components/_chart_legend.scss +++ b/packages/sage-assets/lib/stylesheets/components/_chart_legend.scss @@ -17,7 +17,7 @@ display: flex; align-items: center; list-style: none; - color: sage-color(charcoal, 200); + color: sage-color(grey, 700); &::before { content: ""; diff --git a/packages/sage-assets/lib/stylesheets/components/_chart_summary.scss b/packages/sage-assets/lib/stylesheets/components/_chart_summary.scss index 84f6c95aec..8f226a60cf 100644 --- a/packages/sage-assets/lib/stylesheets/components/_chart_summary.scss +++ b/packages/sage-assets/lib/stylesheets/components/_chart_summary.scss @@ -28,19 +28,19 @@ @extend %t-sage-body-xsmall-med; @include line-clamp(1); - color: sage-color(charcoal, 100); + color: sage-color(grey, 600); } .sage-chart-summary__label { @extend %t-sage-body-small-med; @include line-clamp(2); - color: sage-color(charcoal, 200); + color: sage-color(grey, 700); } .sage-chart-summary__value { @extend %t-sage-heading-5; - color: sage-color(charcoal, 500); + color: sage-color(grey, 950); font-style: normal; } diff --git a/packages/sage-assets/lib/stylesheets/components/_checkbox.scss b/packages/sage-assets/lib/stylesheets/components/_checkbox.scss index 6a9bc76afc..02580fe76c 100644 --- a/packages/sage-assets/lib/stylesheets/components/_checkbox.scss +++ b/packages/sage-assets/lib/stylesheets/components/_checkbox.scss @@ -9,11 +9,11 @@ // $-checkbox-color-default: sage-color(grey, 500); $-checkbox-color-default-border: sage-color(grey, 300); -$-checkbox-color-checked: sage-color(charcoal, 400); -$-checkbox-color-checked-hover: sage-color(charcoal, 500); +$-checkbox-color-checked: sage-color(grey, 900); +$-checkbox-color-checked-hover: sage-color(grey, 950); $-checkbox-color-disabled: sage-color(grey, 150); $-checkbox-color-disabled-border: sage-color(grey, 200); -$-checkbox-color-disabled-checked: sage-color(charcoal, 100); +$-checkbox-color-disabled-checked: sage-color(grey, 600); $-checkbox-color-error: sage-color(red, 500); $-checkbox-size: rem(16px); @@ -80,7 +80,7 @@ $-checkbox-focus-outline-color: sage-color(purple, 30); &:hover { z-index: sage-z-index(default, 1); - border-color: sage-color(charcoal, 100); + border-color: sage-color(grey, 600); } &:focus-within { diff --git a/packages/sage-assets/lib/stylesheets/components/_choice.scss b/packages/sage-assets/lib/stylesheets/components/_choice.scss index 9817a4c7db..9fb8c59b50 100644 --- a/packages/sage-assets/lib/stylesheets/components/_choice.scss +++ b/packages/sage-assets/lib/stylesheets/components/_choice.scss @@ -74,7 +74,7 @@ $-choice-radio-color-checked-inner: map-get($sage-radio-colors, checked-inner); color: $-choice-color-active; &::after { - border-color: sage-color(charcoal, 400); + border-color: sage-color(grey, 900); border-width: rem(4px); } @@ -122,7 +122,7 @@ $-choice-radio-color-checked-inner: map-get($sage-radio-colors, checked-inner); @include sage-icon-base(caret-right, lg, pine); margin: 0 0 0 sage-spacing(sm); - color: sage-color(charcoal, 400); + color: sage-color(grey, 900); transition: color map-get($sage-transitions, default); } @@ -233,14 +233,14 @@ $-choice-radio-color-checked-inner: map-get($sage-radio-colors, checked-inner); .sage-choice__text { font-style: normal; - color: sage-color(charcoal, 400); + color: sage-color(grey, 900); } .sage-choice__subtext { @extend %t-sage-body-xsmall; margin-top: sage-spacing(2xs); - color: sage-color(charcoal, 200); + color: sage-color(grey, 700); } pds-icon { diff --git a/packages/sage-assets/lib/stylesheets/components/_copy_text.scss b/packages/sage-assets/lib/stylesheets/components/_copy_text.scss index bbf7d71efb..6e1429af6b 100644 --- a/packages/sage-assets/lib/stylesheets/components/_copy_text.scss +++ b/packages/sage-assets/lib/stylesheets/components/_copy_text.scss @@ -8,8 +8,8 @@ $-copy-text-border: 1px solid sage-color(grey, 400); $-copy-text-border-focus-color: sage-color(purple, 300); $-copy-text-border-hover-color: sage-color(grey, 500); -$-copy-text-color: sage-color(charcoal, 400); -$-copy-text-color-hover: sage-color(charcoal, 500); +$-copy-text-color: sage-color(grey, 900); +$-copy-text-color-hover: sage-color(grey, 950); .sage-copy-text { diff --git a/packages/sage-assets/lib/stylesheets/components/_data_card.scss b/packages/sage-assets/lib/stylesheets/components/_data_card.scss index f78b1c66d7..718233514a 100644 --- a/packages/sage-assets/lib/stylesheets/components/_data_card.scss +++ b/packages/sage-assets/lib/stylesheets/components/_data_card.scss @@ -8,15 +8,15 @@ $-data-card-colors: ( default: ( border-color: sage-color(grey, 300), - text-color: sage-color(charcoal, 400), + text-color: sage-color(grey, 900), ), danger: ( border-color: sage-color(red, 500), text-color: sage-color(red, 500), ), muted: ( - border-color: sage-color(charcoal, 300), - text-color: sage-color(charcoal, 300), + border-color: sage-color(grey, 800), + text-color: sage-color(grey, 800), ), ); $-data-card-transition: 0.2s linear; diff --git a/packages/sage-assets/lib/stylesheets/components/_description.scss b/packages/sage-assets/lib/stylesheets/components/_description.scss index 0f2d1de689..db1bb6644a 100644 --- a/packages/sage-assets/lib/stylesheets/components/_description.scss +++ b/packages/sage-assets/lib/stylesheets/components/_description.scss @@ -70,14 +70,14 @@ $-description-spacing: sage-spacing(sm); @extend %t-sage-body; grid-area: title; - color: sage-color(charcoal, 200); + color: sage-color(grey, 700); } .sage-description__data { @extend %t-sage-body-med; grid-area: data; - color: sage-color(charcoal, 400); + color: sage-color(grey, 900); } .sage-description__action { diff --git a/packages/sage-assets/lib/stylesheets/components/_dropdown.scss b/packages/sage-assets/lib/stylesheets/components/_dropdown.scss index 8a6b1425e7..66324a5acf 100644 --- a/packages/sage-assets/lib/stylesheets/components/_dropdown.scss +++ b/packages/sage-assets/lib/stylesheets/components/_dropdown.scss @@ -151,7 +151,7 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs); .sage-dropdown__item--heading { padding: sage-spacing(sm) sage-spacing(sm) 0 sage-spacing(sm); - color: sage-color(charcoal, 100); + color: sage-color(grey, 600); text-transform: uppercase; cursor: default; pointer-events: none; @@ -249,10 +249,10 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs); } .sage-dropdown__item-control--muted { - color: sage-color(charcoal, 100); + color: sage-color(grey, 600); &:hover { - color: sage-color(charcoal, 400); + color: sage-color(grey, 900); background-color: sage-color(grey, 200); } } @@ -430,7 +430,7 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs); .sage-btn--icon-right-caret-down::before { .sage-dropdown__trigger--select &, .sage-dropdown__trigger & { - color: sage-color(charcoal, 100); + color: sage-color(grey, 600); } } diff --git a/packages/sage-assets/lib/stylesheets/components/_feature_toggle.scss b/packages/sage-assets/lib/stylesheets/components/_feature_toggle.scss index 8d4f81ea38..527f57e7a8 100644 --- a/packages/sage-assets/lib/stylesheets/components/_feature_toggle.scss +++ b/packages/sage-assets/lib/stylesheets/components/_feature_toggle.scss @@ -56,7 +56,7 @@ $-feature-toggle-image-height-mobile: rem(96px); p { @extend %t-sage-body-small; - color: sage-color(charcoal, 200); + color: sage-color(grey, 700); } } diff --git a/packages/sage-assets/lib/stylesheets/components/_form_input.scss b/packages/sage-assets/lib/stylesheets/components/_form_input.scss index 1217a0481d..c823c22f58 100644 --- a/packages/sage-assets/lib/stylesheets/components/_form_input.scss +++ b/packages/sage-assets/lib/stylesheets/components/_form_input.scss @@ -82,7 +82,7 @@ $-input-text-height: sage-font-size(body); } .sage-input__affix-value { - color: sage-color(charcoal, 100); + color: sage-color(grey, 600); } .sage-input__affix--prefix { diff --git a/packages/sage-assets/lib/stylesheets/components/_form_section.scss b/packages/sage-assets/lib/stylesheets/components/_form_section.scss index 4e5aaf3b84..5e183fc481 100644 --- a/packages/sage-assets/lib/stylesheets/components/_form_section.scss +++ b/packages/sage-assets/lib/stylesheets/components/_form_section.scss @@ -24,11 +24,11 @@ .sage-form-section__subtitle { @extend %t-sage-body; - + display: flex; flex-direction: column; gap: sage-spacing(sm); - color: sage-color(charcoal, 200); + color: sage-color(grey, 700); } .sage-form-section__subtitle--legacy { diff --git a/packages/sage-assets/lib/stylesheets/components/_form_select.scss b/packages/sage-assets/lib/stylesheets/components/_form_select.scss index 00cb67e120..550ceb3a18 100644 --- a/packages/sage-assets/lib/stylesheets/components/_form_select.scss +++ b/packages/sage-assets/lib/stylesheets/components/_form_select.scss @@ -6,10 +6,10 @@ $-select-border-box-shadow-size: map-get($sage-field-configs, box-shadow-size); $-select-color-border: sage-color(grey, 500); -$-select-color-border-hover: sage-color(charcoal, 100); +$-select-color-border-hover: sage-color(grey, 600); $-select-color-border-selected: sage-color(primary, 200); -$-select-color-default: sage-color(charcoal, 200); -$-select-color-default-hover: sage-color(charcoal, 400); +$-select-color-default: sage-color(grey, 700); +$-select-color-default-hover: sage-color(grey, 900); $-select-color-error: sage-color(red, 500); $-select-color-label-background: sage-color(white); $-select-color-success: sage-color(primary, 200); @@ -68,7 +68,7 @@ $-select-arrow-position-inverse-with-message: calc(100% - #{$-select-height + $- align-items: center; height: $-select-height; font-size: $-select-arrow-font-size; - color: sage-color(charcoal, 100); + color: sage-color(grey, 600); transition: 0.2s color ease; } @@ -96,7 +96,7 @@ $-select-arrow-position-inverse-with-message: calc(100% - #{$-select-height + $- } .sage-select--value-selected & { - color: sage-color(charcoal, 400); + color: sage-color(grey, 900); } .sage-select--value-selected &:not(:disabled) + .sage-select__arrow::before { @@ -132,16 +132,16 @@ $-select-arrow-position-inverse-with-message: calc(100% - #{$-select-height + $- } &:disabled { - color: sage-color(charcoal, 200); + color: sage-color(grey, 700); background-color: sage-color(grey, 100); ~ .sage-select__arrow::before { - color: sage-color(charcoal, 200); + color: sage-color(grey, 700); opacity: 0.5; } @include placeholder { - color: sage-color(charcoal, 200); + color: sage-color(grey, 700); } } } @@ -169,6 +169,6 @@ $-select-arrow-position-inverse-with-message: calc(100% - #{$-select-height + $- } &.sage-select--value-selected .form-group:focus-within:not(:disabled) ~ .sage-select__label { - color: sage-color(charcoal, 400); + color: sage-color(grey, 900); } } diff --git a/packages/sage-assets/lib/stylesheets/components/_form_textarea.scss b/packages/sage-assets/lib/stylesheets/components/_form_textarea.scss index 62f37339b6..b9b76e4468 100644 --- a/packages/sage-assets/lib/stylesheets/components/_form_textarea.scss +++ b/packages/sage-assets/lib/stylesheets/components/_form_textarea.scss @@ -19,7 +19,7 @@ $-textarea-height: 100%; $-textarea-min-height: rem(90px); // Colors -$-textarea-color-default: sage-color(charcoal, 300); +$-textarea-color-default: sage-color(grey, 800); .sage-textarea { @include sage-form-field-group; diff --git a/packages/sage-assets/lib/stylesheets/components/_hero.scss b/packages/sage-assets/lib/stylesheets/components/_hero.scss index 13e9b8a2ca..47d86a0000 100644 --- a/packages/sage-assets/lib/stylesheets/components/_hero.scss +++ b/packages/sage-assets/lib/stylesheets/components/_hero.scss @@ -91,7 +91,7 @@ $-hero-play-icon-background-color: sage-color(white); padding-inline-end: sage-spacing(md); margin-block-end: $-hero-margin-y; font-weight: sage-font-weight(medium); - color: sage-color(charcoal, 300); + color: sage-color(grey, 800); @media (min-width: sage-breakpoint(lg-max)) { padding-block-start: 0; @@ -170,7 +170,7 @@ $-hero-play-icon-background-color: sage-color(white); align-items: center; width: $-hero-icon-size; font-size: $-hero-icon-size; - color: sage-color(charcoal, 500); + color: sage-color(grey, 950); } &::after { diff --git a/packages/sage-assets/lib/stylesheets/components/_hint.scss b/packages/sage-assets/lib/stylesheets/components/_hint.scss index 497104bc31..59b8475393 100644 --- a/packages/sage-assets/lib/stylesheets/components/_hint.scss +++ b/packages/sage-assets/lib/stylesheets/components/_hint.scss @@ -5,7 +5,7 @@ //// // Colors -$-hint-text-color: sage-color(charcoal, 400); +$-hint-text-color: sage-color(grey, 900); $-hint-background-color: sage-color(grey, 200); .sage-hint { diff --git a/packages/sage-assets/lib/stylesheets/components/_icon.scss b/packages/sage-assets/lib/stylesheets/components/_icon.scss index 1243653fb1..c4e6cffea5 100644 --- a/packages/sage-assets/lib/stylesheets/components/_icon.scss +++ b/packages/sage-assets/lib/stylesheets/components/_icon.scss @@ -88,7 +88,7 @@ $-icon-beside-type: ( } .sage-input__icon .sage-icon-#{$icon-name} { - color: sage-color(charcoal, 200); + color: sage-color(grey, 700); line-height: sage-line-height(body-xs); } diff --git a/packages/sage-assets/lib/stylesheets/components/_icon_list.scss b/packages/sage-assets/lib/stylesheets/components/_icon_list.scss index 8dfc29703a..c4086a0dd6 100644 --- a/packages/sage-assets/lib/stylesheets/components/_icon_list.scss +++ b/packages/sage-assets/lib/stylesheets/components/_icon_list.scss @@ -52,7 +52,7 @@ .sage-icon-list-item__label-subtext { @extend %t-sage-body; - color: sage-color(charcoal, 400); + color: sage-color(grey, 900); } .sage-icon-list-item__title { diff --git a/packages/sage-assets/lib/stylesheets/components/_indicator.scss b/packages/sage-assets/lib/stylesheets/components/_indicator.scss index b73bfce83e..b2dbc95076 100644 --- a/packages/sage-assets/lib/stylesheets/components/_indicator.scss +++ b/packages/sage-assets/lib/stylesheets/components/_indicator.scss @@ -35,5 +35,5 @@ $-indicator-size: rem(6px); } .sage-indicator--current { - background-color: sage-color(charcoal, 400); + background-color: sage-color(grey, 900); } diff --git a/packages/sage-assets/lib/stylesheets/components/_input_group.scss b/packages/sage-assets/lib/stylesheets/components/_input_group.scss index 755401f106..80098d068b 100644 --- a/packages/sage-assets/lib/stylesheets/components/_input_group.scss +++ b/packages/sage-assets/lib/stylesheets/components/_input_group.scss @@ -80,7 +80,7 @@ $-input-group-pw-field-button-color-text-hover: sage-color(black); } .sage-input-group--disabled & { - color: sage-color(charcoal, 300); + color: sage-color(grey, 800); background-color: sage-color(grey, 150); } } diff --git a/packages/sage-assets/lib/stylesheets/components/_link.scss b/packages/sage-assets/lib/stylesheets/components/_link.scss index 3beaba966d..e5243f0d15 100644 --- a/packages/sage-assets/lib/stylesheets/components/_link.scss +++ b/packages/sage-assets/lib/stylesheets/components/_link.scss @@ -6,8 +6,8 @@ $-link-color: sage-color(primary, 300); $-link-color-hover: sage-color(primary, 400); -$-link-subtext-color: sage-color(charcoal, 200); -$-link-subtext-color-hover: sage-color(charcoal, 400); +$-link-subtext-color: sage-color(grey, 700); +$-link-subtext-color-hover: sage-color(grey, 900); $-link-base-styles: ( primary:( @@ -23,13 +23,13 @@ $-link-base-styles: ( ), secondary:( default: ( - color: sage-color(charcoal, 400), + color: sage-color(grey, 900), ), hover: ( color: sage-color(black), ), focus-visible: ( - color: sage-color(charcoal, 400), + color: sage-color(grey, 900), ), ), neutral:( @@ -173,7 +173,7 @@ $-link-base-styles: ( pds-icon { @include sage-icon-base(question-circle, lg, pine); - color: sage-color(charcoal, 100); + color: sage-color(grey, 600); } &:hover, @@ -183,11 +183,11 @@ $-link-base-styles: ( outline: 0; pds-icon { - color: sage-color(charcoal, 300); + color: sage-color(grey, 800); } &::before { - color: sage-color(charcoal, 300); + color: sage-color(grey, 800); } } diff --git a/packages/sage-assets/lib/stylesheets/components/_media_tile.scss b/packages/sage-assets/lib/stylesheets/components/_media_tile.scss index a126277cd5..71a45b6760 100644 --- a/packages/sage-assets/lib/stylesheets/components/_media_tile.scss +++ b/packages/sage-assets/lib/stylesheets/components/_media_tile.scss @@ -31,7 +31,7 @@ $-media-tile-breakpoints: ( } .sage-media-tile__body { - color: sage-color(charcoal, 200); + color: sage-color(grey, 700); > p { @extend %t-sage-body; @@ -39,7 +39,7 @@ $-media-tile-breakpoints: ( } .sage-media-tile__caption { - color: sage-color(charcoal, 100); + color: sage-color(grey, 600); > p { @extend %t-sage-body-small; diff --git a/packages/sage-assets/lib/stylesheets/components/_menu_button.scss b/packages/sage-assets/lib/stylesheets/components/_menu_button.scss index e5e88c1c8d..95dac5ec08 100644 --- a/packages/sage-assets/lib/stylesheets/components/_menu_button.scss +++ b/packages/sage-assets/lib/stylesheets/components/_menu_button.scss @@ -55,7 +55,7 @@ $-menubtn-focus-outline-color: currentColor; &:focus::after { transform: translate3d(-50%, -50%, 0) scale(1); - border-color: sage-color(charcoal, 100); + border-color: sage-color(grey, 600); opacity: 1; } @@ -64,7 +64,7 @@ $-menubtn-focus-outline-color: currentColor; } &:active::after { - border-color: sage-color(charcoal, 200); + border-color: sage-color(grey, 700); } &[aria-expanded="true"]::after { diff --git a/packages/sage-assets/lib/stylesheets/components/_modal.scss b/packages/sage-assets/lib/stylesheets/components/_modal.scss index 166a8e9304..22e83c2afc 100644 --- a/packages/sage-assets/lib/stylesheets/components/_modal.scss +++ b/packages/sage-assets/lib/stylesheets/components/_modal.scss @@ -24,10 +24,10 @@ $-modal-inner-size: sage-container(md); overflow-y: scroll; z-index: sage-z-index(negative); padding: sage-spacing(md); - background-color: rgba(sage-color(charcoal, 500), 0.4); + background-color: rgba(sage-color(grey, 950), 0.4); background-image: linear-gradient( - rgba(sage-color(charcoal, 200), 0.35) 0%, - rgba(sage-color(charcoal, 500), 0.4) 100% + rgba(sage-color(grey, 700), 0.35) 0%, + rgba(sage-color(grey, 950), 0.4) 100% ); transition: opacity 0.1s ease-out; pointer-events: none; @@ -59,8 +59,8 @@ $-modal-inner-size: sage-container(md); &.sage-modal--no-blur { backdrop-filter: none; background-image: linear-gradient( - rgba(sage-color(charcoal, 300), 0.5) 0%, - rgba(sage-color(charcoal, 500), 0.5) 100% + rgba(sage-color(grey, 800), 0.5) 0%, + rgba(sage-color(grey, 950), 0.5) 100% ); } @@ -336,7 +336,7 @@ $-modal-inner-size: sage-container(md); @media (prefers-reduced-motion) { .sage-modal { - background-color: rgba(sage-color(charcoal, 500), 0.85); + background-color: rgba(sage-color(grey, 950), 0.85); backdrop-filter: none; } diff --git a/packages/sage-assets/lib/stylesheets/components/_nav.scss b/packages/sage-assets/lib/stylesheets/components/_nav.scss index 95d046a842..02d7d49b71 100644 --- a/packages/sage-assets/lib/stylesheets/components/_nav.scss +++ b/packages/sage-assets/lib/stylesheets/components/_nav.scss @@ -4,7 +4,7 @@ /// @group sage //// -$-nav-color-text: sage-color(charcoal, 300); +$-nav-color-text: sage-color(grey, 800); $-nav-color-focus: sage-color(grey, 500); $-nav-color-background: sage-color(grey, 200); $-nav-color-background-hover: sage-color(grey, 200); diff --git a/packages/sage-assets/lib/stylesheets/components/_overlay.scss b/packages/sage-assets/lib/stylesheets/components/_overlay.scss index 444555e25f..03389a62ac 100644 --- a/packages/sage-assets/lib/stylesheets/components/_overlay.scss +++ b/packages/sage-assets/lib/stylesheets/components/_overlay.scss @@ -5,7 +5,7 @@ //// -$-overlay-bg-color: rgba(sage-color(charcoal, 100), 0.5); +$-overlay-bg-color: rgba(sage-color(grey, 600), 0.5); $-overlay-backdrop-filter: blur(rem(2px)); $-overlay-z-index: sage-z-index(underlay); $-overlay-transition-default: opacity 0.5s ease-in-out; diff --git a/packages/sage-assets/lib/stylesheets/components/_page_heading.scss b/packages/sage-assets/lib/stylesheets/components/_page_heading.scss index 45ef8ab244..2042aa956c 100644 --- a/packages/sage-assets/lib/stylesheets/components/_page_heading.scss +++ b/packages/sage-assets/lib/stylesheets/components/_page_heading.scss @@ -76,7 +76,7 @@ $-page-heading-image-height-mobile: rem(120px); .sage-page-heading__intro { grid-area: intro; margin-top: rem(12px); - color: sage-color(charcoal, 300); + color: sage-color(grey, 800); } .sage-page-heading__image { @@ -146,7 +146,7 @@ $-page-heading-image-height-mobile: rem(120px); justify-content: flex-end; align-items: center; margin-top: sage-spacing(sm); - color: sage-color(charcoal, 200); + color: sage-color(grey, 700); font-style: italic; @media (max-width: sage-breakpoint()) { justify-content: flex-start; diff --git a/packages/sage-assets/lib/stylesheets/components/_panel.scss b/packages/sage-assets/lib/stylesheets/components/_panel.scss index 7d0e808027..4bfee719b2 100644 --- a/packages/sage-assets/lib/stylesheets/components/_panel.scss +++ b/packages/sage-assets/lib/stylesheets/components/_panel.scss @@ -53,7 +53,7 @@ display: inline-block; position: relative; padding: 0 sage-spacing(sm); - color: sage-color(charcoal, 100); + color: sage-color(grey, 600); font-size: sage-font-size(body-xs); background-color: sage-color(white); } @@ -97,7 +97,7 @@ .sage-panel__title { @extend %t-sage-heading-5; - color: sage-color(charcoal, 500); + color: sage-color(grey, 950); + .sage-panel__subtext { margin-top: sage-spacing(xs); @@ -106,7 +106,7 @@ .sage-panel__subtext { grid-column: 1 / -1; - color: sage-color(charcoal, 100); + color: sage-color(grey, 600); .sage-panel__header & { @extend %t-sage-body; diff --git a/packages/sage-assets/lib/stylesheets/components/_popover.scss b/packages/sage-assets/lib/stylesheets/components/_popover.scss index 35d646464a..3191483be2 100644 --- a/packages/sage-assets/lib/stylesheets/components/_popover.scss +++ b/packages/sage-assets/lib/stylesheets/components/_popover.scss @@ -157,7 +157,7 @@ $-popover-tooltip-inactive: $-popover-tooltip-width solid transparent; @include sage-grid-stack(); gap: rem(20px); - color: sage-color(charcoal, 300); + color: sage-color(grey, 800); } .sage-popover__media { @@ -185,5 +185,5 @@ $-popover-tooltip-inactive: $-popover-tooltip-width solid transparent; .sage-popover__title { @extend %t-sage-heading-5; - color: sage-color(charcoal, 500); + color: sage-color(grey, 950); } diff --git a/packages/sage-assets/lib/stylesheets/components/_property.scss b/packages/sage-assets/lib/stylesheets/components/_property.scss index 82f156f55d..4331fe5f4d 100644 --- a/packages/sage-assets/lib/stylesheets/components/_property.scss +++ b/packages/sage-assets/lib/stylesheets/components/_property.scss @@ -10,7 +10,7 @@ display: inline-flex; align-items: center; - color: sage-color(charcoal, 300); + color: sage-color(grey, 800); .sage-property-group &:not(:last-child) { margin-right: sage-spacing(md); diff --git a/packages/sage-assets/lib/stylesheets/components/_radio.scss b/packages/sage-assets/lib/stylesheets/components/_radio.scss index ddbe0e3496..e357763793 100644 --- a/packages/sage-assets/lib/stylesheets/components/_radio.scss +++ b/packages/sage-assets/lib/stylesheets/components/_radio.scss @@ -95,7 +95,7 @@ $-radio-focus-outline-color: currentColor; margin-left: 0; .sage-radio--has-border & { - color: sage-color(charcoal, 400); + color: sage-color(grey, 900); font-weight: sage-font-weight(semibold); &::after { diff --git a/packages/sage-assets/lib/stylesheets/components/_search.scss b/packages/sage-assets/lib/stylesheets/components/_search.scss index 360ba4b6fc..de5ba504d4 100644 --- a/packages/sage-assets/lib/stylesheets/components/_search.scss +++ b/packages/sage-assets/lib/stylesheets/components/_search.scss @@ -23,7 +23,7 @@ $-search-icon: "::before"; z-index: sage-z-index(default, 2); margin-left: sage-spacing(sm); margin-right: -1 * sage-spacing(lg); - color: sage-color(charcoal, 200); + color: sage-color(grey, 700); transition: map-get($sage-transitions, default); transition-property: color; } @@ -33,7 +33,7 @@ $-search-icon: "::before"; &:hover { background-color: sage-color(grey, 100); - border-bottom-color: sage-color(charcoal, 100); + border-bottom-color: sage-color(grey, 600); } &:focus-within { @@ -150,7 +150,7 @@ $-search-icon: "::before"; @extend %t-sage-body; @include placeholder { - color: sage-color(charcoal, 200); + color: sage-color(grey, 700); } &:focus { @@ -159,7 +159,7 @@ $-search-icon: "::before"; &:hover:not(:disabled) { background-color: sage-color(grey, 100); - border-bottom-color: sage-color(charcoal, 100); + border-bottom-color: sage-color(grey, 600); box-shadow: none; } diff --git a/packages/sage-assets/lib/stylesheets/components/_sortable.scss b/packages/sage-assets/lib/stylesheets/components/_sortable.scss index c802b7cd5f..5455b17340 100644 --- a/packages/sage-assets/lib/stylesheets/components/_sortable.scss +++ b/packages/sage-assets/lib/stylesheets/components/_sortable.scss @@ -25,7 +25,7 @@ $-sortable-image-height: rem(48px); &::before { @include sage-icon-base(handle-2-vertical, md, pine); padding: 0; - color: sage-color(charcoal, 100); + color: sage-color(grey, 600); } &:focus, @@ -115,7 +115,7 @@ $-sortable-image-height: rem(48px); .sage-sortable__item-subtitle { @extend %t-sage-body-xsmall; @include truncate(); - color: sage-color(charcoal, 100); + color: sage-color(grey, 600); } .sage-sortable__item-actions { diff --git a/packages/sage-assets/lib/stylesheets/components/_stat_box.scss b/packages/sage-assets/lib/stylesheets/components/_stat_box.scss index 4403b59ff8..ce7ca6961f 100644 --- a/packages/sage-assets/lib/stylesheets/components/_stat_box.scss +++ b/packages/sage-assets/lib/stylesheets/components/_stat_box.scss @@ -79,7 +79,7 @@ $-stat-box-image-max-width: rem(48px); .sage-stat-box__title, .sage-stat-box__data--no-data { - color: sage-color(charcoal, 200); + color: sage-color(grey, 700); } .sage-stat-box__title { @@ -126,7 +126,7 @@ $-stat-box-image-max-width: rem(48px); .sage-stat-box__timeframe { @extend %t-sage-body-xsmall; margin-left: sage-spacing(xs); - color: sage-color(charcoal, 100); + color: sage-color(grey, 600); } .sage-stat-box__link { diff --git a/packages/sage-assets/lib/stylesheets/components/_status_icon.scss b/packages/sage-assets/lib/stylesheets/components/_status_icon.scss index 2fda034429..0bb799a404 100644 --- a/packages/sage-assets/lib/stylesheets/components/_status_icon.scss +++ b/packages/sage-assets/lib/stylesheets/components/_status_icon.scss @@ -11,7 +11,7 @@ display: inline-flex; align-items: baseline; position: relative; - color: sage-color(charcoal, 200); + color: sage-color(grey, 700); transition: color map-get($sage-transitions, default), background-color map-get($sage-transitions, default); cursor: help; @@ -23,12 +23,12 @@ @include sage-focus-outline--update-color(sage-color(purple, 30)); &:hover:not(:focus):not(:active) { - color: sage-color(charcoal, 400); + color: sage-color(grey, 900); } &:focus, &:active { - color: sage-color(charcoal, 200); + color: sage-color(grey, 700); } .sage-sortable__item & { diff --git a/packages/sage-assets/lib/stylesheets/components/_switch.scss b/packages/sage-assets/lib/stylesheets/components/_switch.scss index 7a3ccce779..0a0517a861 100644 --- a/packages/sage-assets/lib/stylesheets/components/_switch.scss +++ b/packages/sage-assets/lib/stylesheets/components/_switch.scss @@ -8,13 +8,13 @@ // Colors $-switch-color-default: sage-color(grey, 300); $-switch-color-default-hover: sage-color(grey, 500); -$-switch-color-default-text: sage-color(charcoal, 300); -$-switch-color-checked: sage-color(charcoal, 400); -$-switch-color-checked-hover: sage-color(charcoal, 500); +$-switch-color-default-text: sage-color(grey, 800); +$-switch-color-checked: sage-color(grey, 900); +$-switch-color-checked-hover: sage-color(grey, 950); $-switch-color-disabled: sage-color(grey, 200); -$-switch-color-disabled-text: sage-color(charcoal, 300); +$-switch-color-disabled-text: sage-color(grey, 800); $-switch-color-disabled-checked: sage-color(grey, 200); -$-switch-color-disabled-checked-text: sage-color(charcoal, 100); +$-switch-color-disabled-checked-text: sage-color(grey, 600); $-switch-color-error: sage-color(red, 500); $-switch-focus-outline-error-color: sage-color(red, 300); @@ -114,7 +114,7 @@ $-switch-toggle-size: rem(16px); .sage-switch--has-border & { margin-left: ($-switch-width + $-switch-label-left-spacing); - color: sage-color(charcoal, 400); + color: sage-color(grey, 900); font-weight: sage-font-weight(semibold); } diff --git a/packages/sage-assets/lib/stylesheets/components/_tab.scss b/packages/sage-assets/lib/stylesheets/components/_tab.scss index 2fa28b2d7c..5bcbc3fc00 100644 --- a/packages/sage-assets/lib/stylesheets/components/_tab.scss +++ b/packages/sage-assets/lib/stylesheets/components/_tab.scss @@ -64,7 +64,7 @@ $-tab-color-disabled: map-get($sage-tab-colors, disabled); color: $-tab-color-active; .sage-tabs--filter & { color: sage-color(white); - background: sage-color(charcoal, 400); + background: sage-color(grey, 900); &::after { display: none; } @@ -116,7 +116,7 @@ $-tab-color-disabled: map-get($sage-tab-colors, disabled); &:not(:last-child) { &::before { order: 2; - color: sage-color(charcoal, 100); + color: sage-color(grey, 600); @include sage-icon-base(right-small, xl, pine); } diff --git a/packages/sage-assets/lib/stylesheets/components/_table.scss b/packages/sage-assets/lib/stylesheets/components/_table.scss index 4cc0e4ae3f..436872272f 100644 --- a/packages/sage-assets/lib/stylesheets/components/_table.scss +++ b/packages/sage-assets/lib/stylesheets/components/_table.scss @@ -16,11 +16,11 @@ $-table-max-width: none; // Text $-table-caption-font-size: "%t-sage-body-small"; $-table-caption-alignment: center; -$-table-cell-font-color: sage-color(charcoal, 200); -$-table-cell-font-color-strong: sage-color(charcoal, 400); +$-table-cell-font-color: sage-color(grey, 700); +$-table-cell-font-color-strong: sage-color(grey, 900); $-table-cell-type-spec: "%t-sage-body-med"; $-table-cell-type-spec-strong: "%t-sage-body-semi"; -$-table-heading-font-color: sage-color(charcoal, 500); +$-table-heading-font-color: sage-color(grey, 950); $-table-heading-type-spec: "%t-sage-body-med"; // Overflow gradient @@ -37,7 +37,7 @@ $-table-overflow-indicator-gradient: linear-gradient( // Other $-table-row-color-hover: sage-color(grey, 100); -$-table-cell-focus: sage-color(charcoal, 300); +$-table-cell-focus: sage-color(grey, 800); $-table-cell-truncate-width: 6.5em; $-table-sort-indicator-width: rem(5px); $-table-sort-indicator-direction: rem(7px); @@ -167,7 +167,7 @@ $-table-avatar-width: rem(32px); } .sage-table__sort-link--selected { - color: sage-color(charcoal, 100); + color: sage-color(grey, 600); text-decoration: underline; &::after { diff --git a/packages/sage-assets/lib/stylesheets/components/_tag.scss b/packages/sage-assets/lib/stylesheets/components/_tag.scss index 94621b4b3f..8d597b22ba 100644 --- a/packages/sage-assets/lib/stylesheets/components/_tag.scss +++ b/packages/sage-assets/lib/stylesheets/components/_tag.scss @@ -5,7 +5,7 @@ //// $-tag-image-size: rem(24px); -$-tag-button-color: sage-color(charcoal, 500); +$-tag-button-color: sage-color(grey, 950); $-tag-button-icon-size: rem(18px); $-tag-button-icon-mobile-size: rem(24px); @@ -84,5 +84,5 @@ $-tag-button-icon-mobile-size: rem(24px); } .sage-tag__value { - color: sage-color(charcoal, 500); + color: sage-color(grey, 950); } diff --git a/packages/sage-assets/lib/stylesheets/components/_toast.scss b/packages/sage-assets/lib/stylesheets/components/_toast.scss index 3188a88383..ef85ae0a43 100644 --- a/packages/sage-assets/lib/stylesheets/components/_toast.scss +++ b/packages/sage-assets/lib/stylesheets/components/_toast.scss @@ -73,7 +73,7 @@ $-toast-bottom-spacing: sage-spacing(xs); color: sage-color(white); border-radius: sage-border(radius-medium); box-shadow: sage-shadow(lg); - background-color: sage-color(charcoal, 400); + background-color: sage-color(grey, 900); animation: 0.5s ease; @media #{$-toast-breakpoint-default} { diff --git a/packages/sage-assets/lib/stylesheets/components/_tooltip.scss b/packages/sage-assets/lib/stylesheets/components/_tooltip.scss index eb6fb06e1d..7b58b86522 100644 --- a/packages/sage-assets/lib/stylesheets/components/_tooltip.scss +++ b/packages/sage-assets/lib/stylesheets/components/_tooltip.scss @@ -6,7 +6,7 @@ // Colors -$-tooltip-bg-color: sage-color(charcoal, 400); +$-tooltip-bg-color: sage-color(grey, 900); $-tooltip-light-bg-color: $-tooltip-bg-color; $-tooltip-font-color: sage-color(white); $-tooltip-light-font-color: $-tooltip-font-color; diff --git a/packages/sage-assets/lib/stylesheets/components/_transaction_card.scss b/packages/sage-assets/lib/stylesheets/components/_transaction_card.scss index 1d88b76978..0dfdadc996 100644 --- a/packages/sage-assets/lib/stylesheets/components/_transaction_card.scss +++ b/packages/sage-assets/lib/stylesheets/components/_transaction_card.scss @@ -87,7 +87,7 @@ $-transaction-card-price-max-width: rem(100px); @extend %t-sage-body-small; max-width: $-transaction-card-state-max-width; - color: sage-color(charcoal, 400); + color: sage-color(grey, 900); } .sage-transaction-card__state--red { diff --git a/packages/sage-assets/lib/stylesheets/components/_typeahead.scss b/packages/sage-assets/lib/stylesheets/components/_typeahead.scss index 19ad82acc4..b5732348c5 100644 --- a/packages/sage-assets/lib/stylesheets/components/_typeahead.scss +++ b/packages/sage-assets/lib/stylesheets/components/_typeahead.scss @@ -30,7 +30,7 @@ $-typeahead-item-height: rem(68px); .sage-typeahead__null-state { @extend %t-sage-body-small; padding: sage-spacing(sm); - color: sage-color(charcoal, 100); + color: sage-color(grey, 600); text-align: center; } @@ -91,7 +91,7 @@ $-typeahead-item-height: rem(68px); @include truncate; :hover & { - color: sage-color(charcoal, 500); + color: sage-color(grey, 950); } } } diff --git a/packages/sage-assets/lib/stylesheets/components/_upload_card.scss b/packages/sage-assets/lib/stylesheets/components/_upload_card.scss index b75c3466fc..efdb55caba 100644 --- a/packages/sage-assets/lib/stylesheets/components/_upload_card.scss +++ b/packages/sage-assets/lib/stylesheets/components/_upload_card.scss @@ -29,10 +29,10 @@ $-upload-card-mobile-breakpoint: 609px; justify-content: flex-start; flex: 1 1; gap: sage-spacing(); - color: sage-color(charcoal, 200); + color: sage-color(grey, 700); .sage-upload-card--selected & { - color: sage-color(charcoal, 300); + color: sage-color(grey, 800); } .sage-upload-card--error & { @@ -100,7 +100,7 @@ $-upload-card-mobile-breakpoint: 609px; .sage-upload-card__icon { display: inline-flex; - color: sage-color(charcoal, 100); + color: sage-color(grey, 600); .sage-upload-card:not(.sage-uploaded-card--selected) & { margin-bottom: sage-spacing(2xs); @@ -142,5 +142,5 @@ $-upload-card-mobile-breakpoint: 609px; flex-direction: column; align-items: flex-start; gap: sage-spacing(sm); - color: sage-color(charcoal, 200); + color: sage-color(grey, 700); } diff --git a/packages/sage-assets/lib/stylesheets/core/_variables.scss b/packages/sage-assets/lib/stylesheets/core/_variables.scss index 8ba665949f..106b3c3d77 100644 --- a/packages/sage-assets/lib/stylesheets/core/_variables.scss +++ b/packages/sage-assets/lib/stylesheets/core/_variables.scss @@ -52,7 +52,7 @@ $sage-field-configs: ( /// $sage-field-colors: ( border: sage-color(grey, 300), - default: sage-color(charcoal, 300), + default: sage-color(grey, 800), disabled: sage-color(grey, 500), disabled-background: sage-color(grey, 150), error: sage-color(red, 500), @@ -66,9 +66,9 @@ $sage-field-colors: ( /// Radio button colors /// $sage-radio-colors: ( - checked: sage-color(charcoal, 400), + checked: sage-color(grey, 900), checked-disabled: sage-color(grey, 200), - checked-hover: sage-color(charcoal, 500), + checked-hover: sage-color(grey, 950), checked-inner: sage-color(white), default: sage-color(grey, 300), disabled: sage-color(grey, 150), @@ -85,17 +85,17 @@ $sage-radio-size: rem(16px); /// Tab colors shared by components such as tabs and choices /// $sage-tab-colors: ( - default: sage-color(charcoal, 300), - active: sage-color(charcoal, 400), - disabled: sage-color(charcoal, 100), + default: sage-color(grey, 800), + active: sage-color(grey, 900), + disabled: sage-color(grey, 600), ); /// /// Standard text colors /// $sage-text-colors: ( - body: sage-color(charcoal, 400), - heading: sage-color(charcoal, 500), + body: sage-color(grey, 900), + heading: sage-color(grey, 950), ); /// diff --git a/packages/sage-assets/lib/stylesheets/core/mixins/_sage.scss b/packages/sage-assets/lib/stylesheets/core/mixins/_sage.scss index 75e5a5bf06..729de27e34 100644 --- a/packages/sage-assets/lib/stylesheets/core/mixins/_sage.scss +++ b/packages/sage-assets/lib/stylesheets/core/mixins/_sage.scss @@ -58,7 +58,7 @@ @include truncate(); padding: rem(6px) sage-spacing(sm); - color: sage-color(charcoal, 400); + color: sage-color(grey, 900); background-color: transparent; border: $-copy-text-border; border-radius: sage-border(radius-medium); @@ -410,7 +410,7 @@ width: 100%; padding: sage-spacing(sm); - color: sage-color(charcoal, 400); + color: sage-color(grey, 900); appearance: none; box-shadow: sage-border-interactive(default); border: 0; @@ -420,11 +420,11 @@ transition-property: border, box-shadow, color; @include placeholder { - color: sage-color(charcoal, 200); + color: sage-color(grey, 700); } &:hover:not(:disabled) { - color: sage-color(charcoal, 400); + color: sage-color(grey, 900); box-shadow: sage-border-interactive(hover); .sage-form-field--error & { @@ -453,7 +453,7 @@ resize: none; @include placeholder { - color: sage-color(charcoal, 200); + color: sage-color(grey, 700); } .sage-form-field--showplaceholder & ~ label { @@ -478,7 +478,7 @@ box-shadow: sage-border-interactive(error); ~ label { - color: sage-color(charcoal, 400); + color: sage-color(grey, 900); } &:hover:not(:disabled) { @@ -549,7 +549,7 @@ @extend %t-sage-body-small-med; margin-top: sage-spacing(xs); - color: sage-color(charcoal, 200); + color: sage-color(grey, 700); .sage-form-field--error & { color: sage-color(red, 500); @@ -613,7 +613,7 @@ position: relative; z-index: sage-z-index(default); width: 100%; - color: sage-color(charcoal, 200); + color: sage-color(grey, 700); } /// diff --git a/packages/sage-assets/lib/stylesheets/global/_reboot.scss b/packages/sage-assets/lib/stylesheets/global/_reboot.scss index d2ee03f90f..a4a12e8009 100644 --- a/packages/sage-assets/lib/stylesheets/global/_reboot.scss +++ b/packages/sage-assets/lib/stylesheets/global/_reboot.scss @@ -66,7 +66,7 @@ h6, .t-sage-heading-6 { margin-top: 0; margin-bottom: 0; - color: sage-color(charcoal, 500); + color: sage-color(grey, 950); font-family: "GreetStandard", "Inter", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", sans-serif ; } diff --git a/packages/sage-assets/lib/stylesheets/tokens/_border_interactive.scss b/packages/sage-assets/lib/stylesheets/tokens/_border_interactive.scss index e7284a08fa..69c8e04c99 100644 --- a/packages/sage-assets/lib/stylesheets/tokens/_border_interactive.scss +++ b/packages/sage-assets/lib/stylesheets/tokens/_border_interactive.scss @@ -12,7 +12,7 @@ $sage-borders-interactive: ( default: 0 0 0 1px sage-color(grey, 300), hover: 0 0 0 1px sage-color(grey, 500), focus: 0 0 0 4px sage-color(primary, 200), - selected: 0 0 0 4px sage-color(charcoal, 400), + selected: 0 0 0 4px sage-color(grey, 900), error: 0 0 0 1px sage-color(red, 500), error-focus: 0 0 0 4px sage-color(red, 500), disabled: 0 0 0 1px sage-color(grey, 200), diff --git a/packages/sage-react/lib/Drawer/Drawer.story.jsx b/packages/sage-react/lib/Drawer/Drawer.story.jsx index 4c8aacbd66..41156bb8bf 100644 --- a/packages/sage-react/lib/Drawer/Drawer.story.jsx +++ b/packages/sage-react/lib/Drawer/Drawer.story.jsx @@ -7,7 +7,7 @@ import { Grid } from '../Grid'; const drawerChildren = ( <> -

+

Drawer

👋 Any content can go here.

@@ -112,7 +112,7 @@ export const WiredExample = () => { const drawerExpandedChildren = ( <> -

+

Drawer

👋 Any content can go here.

diff --git a/packages/sage-react/lib/Frame/Frame.story.jsx b/packages/sage-react/lib/Frame/Frame.story.jsx index 00fd694eda..9cc0d74792 100644 --- a/packages/sage-react/lib/Frame/Frame.story.jsx +++ b/packages/sage-react/lib/Frame/Frame.story.jsx @@ -112,7 +112,7 @@ export const NestingFrames = () => (

Lorem ipsum dolor sit

-

+

Consectetur adipiscing elit

@@ -225,7 +225,7 @@ export const StatBox = () => ( > -

+

All payments

( 40 - + successful payments diff --git a/packages/sage-react/lib/IconList/IconListItem.jsx b/packages/sage-react/lib/IconList/IconListItem.jsx index c83db42f8c..3c7e5b40fd 100644 --- a/packages/sage-react/lib/IconList/IconListItem.jsx +++ b/packages/sage-react/lib/IconList/IconListItem.jsx @@ -93,7 +93,7 @@ IconListItem.defaultProps = { children: null, className: null, icon: null, - iconColor: Icon.COLORS.CHARCOAL_100, + iconColor: Icon.COLORS.GREY_600, input: null, inputId: null, inputName: null, diff --git a/packages/sage-react/lib/Modal/ModalHeader.jsx b/packages/sage-react/lib/Modal/ModalHeader.jsx index bece5f83c6..b7c2f86a95 100644 --- a/packages/sage-react/lib/Modal/ModalHeader.jsx +++ b/packages/sage-react/lib/Modal/ModalHeader.jsx @@ -55,7 +55,7 @@ export const ModalHeader = ({ {subheader && ( -

{subheader}

+

{subheader}

{popover && ( {label && ( diff --git a/packages/sage-react/lib/configs/tokens/recharts.js b/packages/sage-react/lib/configs/tokens/recharts.js index adfeb54419..d838260596 100644 --- a/packages/sage-react/lib/configs/tokens/recharts.js +++ b/packages/sage-react/lib/configs/tokens/recharts.js @@ -4,7 +4,7 @@ const gridConfigs = { stroke: TOKENS_COLOR_PALETTE.GREY_300, }; const tickConfigs = { - fill: TOKENS_COLOR_PALETTE.CHARCOAL_100, + fill: TOKENS_COLOR_PALETTE.GREY_600, fontSize: 12, }; diff --git a/style-dictionary/tokens/color/combos.json b/style-dictionary/tokens/color/combos.json index 440160d6d7..95aa028e6d 100644 --- a/style-dictionary/tokens/color/combos.json +++ b/style-dictionary/tokens/color/combos.json @@ -4,10 +4,10 @@ "draft": { "default": { "foreground": { - "value": "{color.base.charcoal.400.hex}" + "value": "{color.base.grey.900.hex}" }, "foreground-accent": { - "value": "{color.base.charcoal.500.hex}" + "value": "{color.base.grey.950.hex}" }, "background": { "value": "{color.base.grey.200.hex}" @@ -16,18 +16,18 @@ "value": "{color.base.grey.300.hex}" }, "icon-background-accent": { - "value": "{color.base.charcoal.200.hex}" + "value": "{color.base.grey.700.hex}" } }, "subtle": { "foreground": { - "value": "{color.base.charcoal.200.hex}" + "value": "{color.base.grey.700.hex}" }, "foreground-accent": { - "value": "{color.base.charcoal.100.hex}" + "value": "{color.base.grey.600.hex}" }, "background": { - "value": "{color.base.charcoal.100.hex}" + "value": "{color.base.grey.600.hex}" } }, "bold": { @@ -35,7 +35,7 @@ "value": "{color.base.grey.150.hex}" }, "background": { - "value": "{color.base.charcoal.400.hex}" + "value": "{color.base.grey.900.hex}" } } }, diff --git a/style-dictionary/tokens/color/core.json b/style-dictionary/tokens/color/core.json index 1868c29414..c50693319f 100644 --- a/style-dictionary/tokens/color/core.json +++ b/style-dictionary/tokens/color/core.json @@ -29,10 +29,10 @@ "value": "{color.base.purple.600.hex}" }, "charcoal": { - "value": "{color.base.charcoal.300.hex}" + "value": "{color.base.grey.800.hex}" }, "grey": { - "value": "{color.base.charcoal.100.hex}" + "value": "{color.base.grey.600.hex}" }, "white": { "value": "{color.base.white.500.hex}" From 8e3ad3fe7f778e3c91e0b94b49e5a38761bd66f5 Mon Sep 17 00:00:00 2001 From: Quinton Jason Date: Thu, 22 Aug 2024 16:51:03 -0500 Subject: [PATCH 18/31] fix: update grey color token to lower greys --- .../sage-frontend/stylesheets/docs/_grid.scss | 2 +- .../stylesheets/docs/_rouge_theme.scss | 2 +- .../sage-frontend/stylesheets/docs/_specs.scss | 4 ++-- .../sage-frontend/stylesheets/docs/_text.scss | 2 +- .../lib/stylesheets/components/_alert.scss | 4 ++-- .../lib/stylesheets/components/_assistant.scss | 4 ++-- .../lib/stylesheets/components/_avatar.scss | 4 ++-- .../lib/stylesheets/components/_banner.scss | 2 +- .../lib/stylesheets/components/_button.scss | 16 ++++++++-------- .../lib/stylesheets/components/_card.scss | 4 ++-- .../stylesheets/components/_catalog_item.scss | 2 +- .../lib/stylesheets/components/_checkbox.scss | 4 ++-- .../lib/stylesheets/components/_choice.scss | 2 +- .../lib/stylesheets/components/_copy_text.scss | 2 +- .../lib/stylesheets/components/_data_card.scss | 4 ++-- .../lib/stylesheets/components/_divider.scss | 2 +- .../lib/stylesheets/components/_dropdown.scss | 8 ++++---- .../stylesheets/components/_expandable_card.scss | 2 +- .../lib/stylesheets/components/_hint.scss | 2 +- .../lib/stylesheets/components/_indicator.scss | 2 +- .../lib/stylesheets/components/_input_group.scss | 2 +- .../lib/stylesheets/components/_meter.scss | 2 +- .../lib/stylesheets/components/_nav.scss | 6 +++--- .../stylesheets/components/_page_heading.scss | 2 +- .../lib/stylesheets/components/_pagination.scss | 8 ++++---- .../lib/stylesheets/components/_panel.scss | 2 +- .../stylesheets/components/_panel_controls.scss | 2 +- .../stylesheets/components/_progress_bar.scss | 2 +- .../lib/stylesheets/components/_search.scss | 2 +- .../lib/stylesheets/components/_sortable.scss | 4 ++-- .../lib/stylesheets/components/_switch.scss | 6 +++--- .../lib/stylesheets/components/_tab.scss | 4 ++-- .../lib/stylesheets/components/_table.scss | 2 +- .../lib/stylesheets/components/_tabs.scss | 4 ++-- .../lib/stylesheets/components/_tag.scss | 4 ++-- .../lib/stylesheets/core/_variables.scss | 6 +++--- .../lib/stylesheets/tokens/_border.scss | 4 ++-- .../stylesheets/tokens/_border_interactive.scss | 4 ++-- packages/sage-react/lib/Divider/Divider.jsx | 2 +- 39 files changed, 71 insertions(+), 71 deletions(-) diff --git a/docs/lib/sage-frontend/stylesheets/docs/_grid.scss b/docs/lib/sage-frontend/stylesheets/docs/_grid.scss index 64472af66b..bdd18a82ce 100644 --- a/docs/lib/sage-frontend/stylesheets/docs/_grid.scss +++ b/docs/lib/sage-frontend/stylesheets/docs/_grid.scss @@ -9,7 +9,7 @@ margin-bottom: sage-spacing(md); padding: sage-spacing(xs) sage-spacing(md); text-align: center; - background: sage-color(grey, 200); + background: sage-color(grey, 150); border-radius: sage-border(radius); [class*="sage-col--align-"] & { diff --git a/docs/lib/sage-frontend/stylesheets/docs/_rouge_theme.scss b/docs/lib/sage-frontend/stylesheets/docs/_rouge_theme.scss index c247ac9c06..34719f30ce 100644 --- a/docs/lib/sage-frontend/stylesheets/docs/_rouge_theme.scss +++ b/docs/lib/sage-frontend/stylesheets/docs/_rouge_theme.scss @@ -1,5 +1,5 @@ // background -$-color-1: sage-color(grey, 200); +$-color-1: sage-color(grey, 150); // Whitespace $-color-24: sage-color(grey, 700); // Name entity diff --git a/docs/lib/sage-frontend/stylesheets/docs/_specs.scss b/docs/lib/sage-frontend/stylesheets/docs/_specs.scss index 37bf5a3dbf..df08e1ad7a 100644 --- a/docs/lib/sage-frontend/stylesheets/docs/_specs.scss +++ b/docs/lib/sage-frontend/stylesheets/docs/_specs.scss @@ -8,14 +8,14 @@ th { padding: 4px; color: sage-color(grey, 700); - border-bottom: 1px solid sage-color(grey, 300); + border-bottom: 1px solid sage-color(grey, 150); } td { padding: 4px; font-size: sage-font-size(body-xs); vertical-align: middle; - border-bottom: 1px solid sage-color(grey, 200); + border-bottom: 1px solid sage-color(grey, 150); } tfoot td { diff --git a/docs/lib/sage-frontend/stylesheets/docs/_text.scss b/docs/lib/sage-frontend/stylesheets/docs/_text.scss index b0aa73ae62..86c16f80d4 100644 --- a/docs/lib/sage-frontend/stylesheets/docs/_text.scss +++ b/docs/lib/sage-frontend/stylesheets/docs/_text.scss @@ -8,7 +8,7 @@ code { display: inline-block; padding: 0 sage-spacing(2xs); font-size: 0.9em; - background-color: sage-color(grey, 200); + background-color: sage-color(grey, 150); } pre { diff --git a/packages/sage-assets/lib/stylesheets/components/_alert.scss b/packages/sage-assets/lib/stylesheets/components/_alert.scss index 29984678f3..bc386ee891 100644 --- a/packages/sage-assets/lib/stylesheets/components/_alert.scss +++ b/packages/sage-assets/lib/stylesheets/components/_alert.scss @@ -9,8 +9,8 @@ // `_button.scss`, `sage_alert.rb`, `_sage_alert.html.erb`, and `Alert.jsx` // $-alert-background-colors: ( - default: sage-color(grey, 200), - draft: sage-color(grey, 200), + default: sage-color(grey, 150), + draft: sage-color(grey, 150), info: sage-color(primary, 100), published: sage-color(sage, 100), success: sage-color(sage, 100), diff --git a/packages/sage-assets/lib/stylesheets/components/_assistant.scss b/packages/sage-assets/lib/stylesheets/components/_assistant.scss index a7f34a78b4..e6be13ea5a 100644 --- a/packages/sage-assets/lib/stylesheets/components/_assistant.scss +++ b/packages/sage-assets/lib/stylesheets/components/_assistant.scss @@ -8,9 +8,9 @@ $-assistant-height: $sage-assistant-height; $-assistant-branding-height: rem(20px); $-assistant-search-height: rem(40px); -$-assistant-search-bg-color: sage-color(grey, 200); +$-assistant-search-bg-color: sage-color(grey, 150); $-assistant-search-bg-opacity: 0.1; -$-assistant-search-placeholder-color: sage-color(grey, 300); +$-assistant-search-placeholder-color: sage-color(grey, 150); $-assistant-search-placeholder-transition: color 0.15s ease-in-out, opacity 0.15s ease-in-out; diff --git a/packages/sage-assets/lib/stylesheets/components/_avatar.scss b/packages/sage-assets/lib/stylesheets/components/_avatar.scss index a8dc43bf7e..c11dc7e352 100644 --- a/packages/sage-assets/lib/stylesheets/components/_avatar.scss +++ b/packages/sage-assets/lib/stylesheets/components/_avatar.scss @@ -10,11 +10,11 @@ $-avatar-max-size: rem(128px); $-avatar-ring-colors: ( charcoal: ( main: sage-color(grey, 950), - bg: sage-color(grey, 200) + bg: sage-color(grey, 150) ), grey: ( main: sage-color(grey, 950), - bg: sage-color(grey, 200) + bg: sage-color(grey, 150) ), purple: ( main: sage-color(purple, 600), diff --git a/packages/sage-assets/lib/stylesheets/components/_banner.scss b/packages/sage-assets/lib/stylesheets/components/_banner.scss index bc052abb89..921b11abc9 100644 --- a/packages/sage-assets/lib/stylesheets/components/_banner.scss +++ b/packages/sage-assets/lib/stylesheets/components/_banner.scss @@ -14,7 +14,7 @@ $-banner-colors: ( icon: "flag", ), secondary: ( - background: sage-color(grey, 200), + background: sage-color(grey, 150), text: sage-color(grey, 950), text-hover: sage-color(grey, 800), icon: "info-circle", diff --git a/packages/sage-assets/lib/stylesheets/components/_button.scss b/packages/sage-assets/lib/stylesheets/components/_button.scss index b4ae3912d4..73ed3dd5ac 100644 --- a/packages/sage-assets/lib/stylesheets/components/_button.scss +++ b/packages/sage-assets/lib/stylesheets/components/_button.scss @@ -64,8 +64,8 @@ $-btn-base-styles: ( ), disabled: ( color: sage-color(grey, 600), - background-color: sage-color(grey, 200), - border-color: sage-color(grey, 200), + background-color: sage-color(grey, 150), + border-color: sage-color(grey, 150), ) ), secondary: ( @@ -149,8 +149,8 @@ $-btn-subtle-styles: ( // NOTE: the following colors should be kept in sync // with the colors in `_alert.scss` $-alert-close-btn-background-colors: ( - default: sage-color(grey, 300), - draft: sage-color(grey, 300), + default: sage-color(grey, 150), + draft: sage-color(grey, 150), info: sage-color(primary, 200), published: sage-color(sage, 200), success: sage-color(sage, 200), @@ -317,7 +317,7 @@ $-btn-loading-min-height: rem(36px); bottom: rem(1px); height: rem(38px); background-color: sage-color(white); - box-shadow: rem(-1px) 0 0 0 sage-color(grey, 300); + box-shadow: rem(-1px) 0 0 0 sage-color(grey, 150); border-color: transparent; @include sage-focus-outline--update-color(transparent); @@ -472,7 +472,7 @@ $-btn-loading-min-height: rem(36px); } &:hover { - background-color: sage-color(grey, 200); + background-color: sage-color(grey, 150); } &.sage-btn--selected { @@ -612,7 +612,7 @@ a.sage-btn { &[aria-disabled="true"] { color: sage-color(grey, 600); background-color: sage-color(white); - border-color: sage-color(grey, 200); + border-color: sage-color(grey, 150); } } @@ -860,5 +860,5 @@ a.sage-btn { .sage-btn-group--border-top { padding-top: sage-spacing(lg); - border-top: 1px solid sage-color(grey, 300); + border-top: 1px solid sage-color(grey, 150); } diff --git a/packages/sage-assets/lib/stylesheets/components/_card.scss b/packages/sage-assets/lib/stylesheets/components/_card.scss index 60ffb9bd64..995a536d2d 100644 --- a/packages/sage-assets/lib/stylesheets/components/_card.scss +++ b/packages/sage-assets/lib/stylesheets/components/_card.scss @@ -26,7 +26,7 @@ $-sage-card-background: transparent; border-color: sage-color(white); @include sage-dashed-border( $border-radius: sage-border(radius), - $color: sage-color(grey, 300), + $color: sage-color(grey, 150), ); } @@ -103,7 +103,7 @@ $-sage-card-background: transparent; top: 50%; width: 100%; height: 1px; - background: sage-color(grey, 200); + background: sage-color(grey, 150); } &::after { content: attr(data-divider-label); diff --git a/packages/sage-assets/lib/stylesheets/components/_catalog_item.scss b/packages/sage-assets/lib/stylesheets/components/_catalog_item.scss index 405c7f8835..af07f3ddef 100644 --- a/packages/sage-assets/lib/stylesheets/components/_catalog_item.scss +++ b/packages/sage-assets/lib/stylesheets/components/_catalog_item.scss @@ -94,7 +94,7 @@ $-catalogue-item-image-height-mobile: rem(120px); grid-area: img; overflow: hidden; min-height: $-catalogue-item-image-height-min; - background: sage-color(grey, 200); + background: sage-color(grey, 150); border-radius: sage-border(radius); border: sage-border(); diff --git a/packages/sage-assets/lib/stylesheets/components/_checkbox.scss b/packages/sage-assets/lib/stylesheets/components/_checkbox.scss index 02580fe76c..8440012d19 100644 --- a/packages/sage-assets/lib/stylesheets/components/_checkbox.scss +++ b/packages/sage-assets/lib/stylesheets/components/_checkbox.scss @@ -8,11 +8,11 @@ // Colors // $-checkbox-color-default: sage-color(grey, 500); -$-checkbox-color-default-border: sage-color(grey, 300); +$-checkbox-color-default-border: sage-color(grey, 150); $-checkbox-color-checked: sage-color(grey, 900); $-checkbox-color-checked-hover: sage-color(grey, 950); $-checkbox-color-disabled: sage-color(grey, 150); -$-checkbox-color-disabled-border: sage-color(grey, 200); +$-checkbox-color-disabled-border: sage-color(grey, 150); $-checkbox-color-disabled-checked: sage-color(grey, 600); $-checkbox-color-error: sage-color(red, 500); diff --git a/packages/sage-assets/lib/stylesheets/components/_choice.scss b/packages/sage-assets/lib/stylesheets/components/_choice.scss index 9fb8c59b50..aa5c687785 100644 --- a/packages/sage-assets/lib/stylesheets/components/_choice.scss +++ b/packages/sage-assets/lib/stylesheets/components/_choice.scss @@ -87,7 +87,7 @@ $-choice-radio-color-checked-inner: map-get($sage-radio-colors, checked-inner); pointer-events: none; &::before { - background-color: sage-color(grey, 200); + background-color: sage-color(grey, 150); } &:hover::before { diff --git a/packages/sage-assets/lib/stylesheets/components/_copy_text.scss b/packages/sage-assets/lib/stylesheets/components/_copy_text.scss index 6e1429af6b..a156816900 100644 --- a/packages/sage-assets/lib/stylesheets/components/_copy_text.scss +++ b/packages/sage-assets/lib/stylesheets/components/_copy_text.scss @@ -5,7 +5,7 @@ //// -$-copy-text-border: 1px solid sage-color(grey, 400); +$-copy-text-border: 1px solid sage-color(grey, 150); $-copy-text-border-focus-color: sage-color(purple, 300); $-copy-text-border-hover-color: sage-color(grey, 500); $-copy-text-color: sage-color(grey, 900); diff --git a/packages/sage-assets/lib/stylesheets/components/_data_card.scss b/packages/sage-assets/lib/stylesheets/components/_data_card.scss index 718233514a..ef81566f3e 100644 --- a/packages/sage-assets/lib/stylesheets/components/_data_card.scss +++ b/packages/sage-assets/lib/stylesheets/components/_data_card.scss @@ -7,7 +7,7 @@ $-data-card-colors: ( default: ( - border-color: sage-color(grey, 300), + border-color: sage-color(grey, 150), text-color: sage-color(grey, 900), ), danger: ( @@ -121,7 +121,7 @@ $-data-card-padding: sage-spacing(xs); .sage-data-card-scroll-container &:not(:last-child) { padding-right: sage-spacing(md); - border-right: 1px solid sage-color(grey, 300); + border-right: 1px solid sage-color(grey, 150); } .sage-data-card-scroll-container &:not(:first-child) { diff --git a/packages/sage-assets/lib/stylesheets/components/_divider.scss b/packages/sage-assets/lib/stylesheets/components/_divider.scss index 4b53ae54df..54e6b35fb2 100644 --- a/packages/sage-assets/lib/stylesheets/components/_divider.scss +++ b/packages/sage-assets/lib/stylesheets/components/_divider.scss @@ -9,7 +9,7 @@ height: rem(1px); width: 100%; margin: 0; - background: var(--sage-divider-background-color, sage-color(grey, 200)); + background: var(--sage-divider-background-color, sage-color(grey, 150)); border: 0; &--vertical { diff --git a/packages/sage-assets/lib/stylesheets/components/_dropdown.scss b/packages/sage-assets/lib/stylesheets/components/_dropdown.scss index 66324a5acf..c362d9c023 100644 --- a/packages/sage-assets/lib/stylesheets/components/_dropdown.scss +++ b/packages/sage-assets/lib/stylesheets/components/_dropdown.scss @@ -134,13 +134,13 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs); .sage-dropdown__item--border-before { padding-top: sage-spacing(xs); margin-top: sage-spacing(xs); - border-top: 1px solid sage-color(grey, 200); + border-top: 1px solid sage-color(grey, 150); } .sage-dropdown__item--border-after { padding-bottom: sage-spacing(xs); margin-bottom: sage-spacing(xs); - border-bottom: 1px solid sage-color(grey, 200); + border-bottom: 1px solid sage-color(grey, 150); } .sage-dropdown__item--disabled { @@ -188,7 +188,7 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs); &:hover { - background-color: sage-color(grey, 200); + background-color: sage-color(grey, 150); } &:focus-within { @@ -253,7 +253,7 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs); &:hover { color: sage-color(grey, 900); - background-color: sage-color(grey, 200); + background-color: sage-color(grey, 150); } } diff --git a/packages/sage-assets/lib/stylesheets/components/_expandable_card.scss b/packages/sage-assets/lib/stylesheets/components/_expandable_card.scss index 754f3ac421..7160b51502 100644 --- a/packages/sage-assets/lib/stylesheets/components/_expandable_card.scss +++ b/packages/sage-assets/lib/stylesheets/components/_expandable_card.scss @@ -6,7 +6,7 @@ $-expandable-card-bg-color: sage-color(white); -$-expandable-card-border-color: sage-color(grey, 300); +$-expandable-card-border-color: sage-color(grey, 150); $-expandable-card-border-radius: sage-border(radius); $-expandable-card-padding: sage-spacing(sm); $-expandable-card-padding-xs: sage-spacing(xs); diff --git a/packages/sage-assets/lib/stylesheets/components/_hint.scss b/packages/sage-assets/lib/stylesheets/components/_hint.scss index 59b8475393..ed0d1b0bc4 100644 --- a/packages/sage-assets/lib/stylesheets/components/_hint.scss +++ b/packages/sage-assets/lib/stylesheets/components/_hint.scss @@ -6,7 +6,7 @@ // Colors $-hint-text-color: sage-color(grey, 900); -$-hint-background-color: sage-color(grey, 200); +$-hint-background-color: sage-color(grey, 150); .sage-hint { display: flex; diff --git a/packages/sage-assets/lib/stylesheets/components/_indicator.scss b/packages/sage-assets/lib/stylesheets/components/_indicator.scss index b2dbc95076..58387a42d7 100644 --- a/packages/sage-assets/lib/stylesheets/components/_indicator.scss +++ b/packages/sage-assets/lib/stylesheets/components/_indicator.scss @@ -20,7 +20,7 @@ $-indicator-size: rem(6px); border-radius: sage-border(radius-round); &:not(.sage-indicator--current) { - background-color: sage-color(grey, 300); + background-color: sage-color(grey, 150); } &:not(:last-child) { diff --git a/packages/sage-assets/lib/stylesheets/components/_input_group.scss b/packages/sage-assets/lib/stylesheets/components/_input_group.scss index 80098d068b..112ec78b3d 100644 --- a/packages/sage-assets/lib/stylesheets/components/_input_group.scss +++ b/packages/sage-assets/lib/stylesheets/components/_input_group.scss @@ -26,7 +26,7 @@ $-input-group-pw-field-button-color-text-hover: sage-color(black); } .sage-input-group:focus-within & { - background-color: sage-color(grey, 200); + background-color: sage-color(grey, 150); opacity: 1; } diff --git a/packages/sage-assets/lib/stylesheets/components/_meter.scss b/packages/sage-assets/lib/stylesheets/components/_meter.scss index 372b4ea5c7..557e109ae1 100644 --- a/packages/sage-assets/lib/stylesheets/components/_meter.scss +++ b/packages/sage-assets/lib/stylesheets/components/_meter.scss @@ -6,7 +6,7 @@ $-meter-bar-height: rem(4px); -$-meter-color-bg: sage-color(grey, 200); +$-meter-color-bg: sage-color(grey, 150); $-meter-bar-low: rgba(sage-color(red, 950), 0.9); $-meter-bar-med: rgba(sage-color(orange), 0.9); $-meter-bar-success: rgba(sage-color(sage, 200), 0.9); diff --git a/packages/sage-assets/lib/stylesheets/components/_nav.scss b/packages/sage-assets/lib/stylesheets/components/_nav.scss index 02d7d49b71..0eb871b478 100644 --- a/packages/sage-assets/lib/stylesheets/components/_nav.scss +++ b/packages/sage-assets/lib/stylesheets/components/_nav.scss @@ -6,8 +6,8 @@ $-nav-color-text: sage-color(grey, 800); $-nav-color-focus: sage-color(grey, 500); -$-nav-color-background: sage-color(grey, 200); -$-nav-color-background-hover: sage-color(grey, 200); +$-nav-color-background: sage-color(grey, 150); +$-nav-color-background-hover: sage-color(grey, 150); $-nav-icon-size: rem(16px); $-nav-icon-spacing: rem(8px); $-nav-subitem-border-width: rem(2px); @@ -117,5 +117,5 @@ $-nav-subitem-border-width: rem(2px); .sage-nav__list--sub-with-icon { margin-left: calc((#{sage-spacing(sm)} + (#{$-nav-icon-size} / 2)) - (#{$-nav-subitem-border-width} / 2) - (#{$-nav-icon-spacing} / 2)); padding-left: sage-spacing(sm); - border-left: $-nav-subitem-border-width solid sage-color(grey, 300); + border-left: $-nav-subitem-border-width solid sage-color(grey, 150); } diff --git a/packages/sage-assets/lib/stylesheets/components/_page_heading.scss b/packages/sage-assets/lib/stylesheets/components/_page_heading.scss index 2042aa956c..02ef09cf7d 100644 --- a/packages/sage-assets/lib/stylesheets/components/_page_heading.scss +++ b/packages/sage-assets/lib/stylesheets/components/_page_heading.scss @@ -84,7 +84,7 @@ $-page-heading-image-height-mobile: rem(120px); grid-area: image; overflow: hidden; min-height: $-page-heading-image-height-min; - background: sage-color(grey, 300); + background: sage-color(grey, 150); border-radius: sage-border(radius); border: sage-border(); diff --git a/packages/sage-assets/lib/stylesheets/components/_pagination.scss b/packages/sage-assets/lib/stylesheets/components/_pagination.scss index f9657c68af..81c3d937ac 100644 --- a/packages/sage-assets/lib/stylesheets/components/_pagination.scss +++ b/packages/sage-assets/lib/stylesheets/components/_pagination.scss @@ -8,10 +8,10 @@ $-pagination-size: rem(40px); $-pagination-padding-arrows: rem(10px) rem(12px); $-pagination-radius: sage-border(radius-round); -$-pagination-text-color: sage-color(charcoal, 400); -$-pagination-text-color-disabled: sage-color(charcoal, 100); -$-pagination-bg-color-current: sage-color(grey, 200); -$-pagination-bg-color-hover: sage-color(grey, 300); +$-pagination-text-color: sage-color(grey, 900); +$-pagination-text-color-disabled: sage-color(grey, 600); +$-pagination-bg-color-current: sage-color(grey, 150); +$-pagination-bg-color-hover: sage-color(grey, 150); $-pagination-focus-ring-color: sage-color(purple, 300); diff --git a/packages/sage-assets/lib/stylesheets/components/_panel.scss b/packages/sage-assets/lib/stylesheets/components/_panel.scss index 4bfee719b2..72be2f8200 100644 --- a/packages/sage-assets/lib/stylesheets/components/_panel.scss +++ b/packages/sage-assets/lib/stylesheets/components/_panel.scss @@ -45,7 +45,7 @@ top: 50%; width: 100%; height: 1px; - background: sage-color(grey, 200); + background: sage-color(grey, 150); } &::after { diff --git a/packages/sage-assets/lib/stylesheets/components/_panel_controls.scss b/packages/sage-assets/lib/stylesheets/components/_panel_controls.scss index d4cf57bf16..39122a46a1 100644 --- a/packages/sage-assets/lib/stylesheets/components/_panel_controls.scss +++ b/packages/sage-assets/lib/stylesheets/components/_panel_controls.scss @@ -19,7 +19,7 @@ height: 0; margin-right: -1 * sage-spacing(panel); margin-left: -1 * sage-spacing(panel); - border-top: 1px solid sage-color(grey, 300); + border-top: 1px solid sage-color(grey, 150); } .sage-search { diff --git a/packages/sage-assets/lib/stylesheets/components/_progress_bar.scss b/packages/sage-assets/lib/stylesheets/components/_progress_bar.scss index 4f7b972164..7275e3c395 100644 --- a/packages/sage-assets/lib/stylesheets/components/_progress_bar.scss +++ b/packages/sage-assets/lib/stylesheets/components/_progress_bar.scss @@ -34,7 +34,7 @@ $-progress-bar-height: sage-spacing(xs); height: $-progress-bar-height; width: 100%; border-radius: sage-border(radius-small); - background-color: var(--sage-progress-bar-background-color, sage-color(grey, 200)); + background-color: var(--sage-progress-bar-background-color, sage-color(grey, 150)); .sage-modal__header & { border-radius: 0; diff --git a/packages/sage-assets/lib/stylesheets/components/_search.scss b/packages/sage-assets/lib/stylesheets/components/_search.scss index de5ba504d4..13882a99e0 100644 --- a/packages/sage-assets/lib/stylesheets/components/_search.scss +++ b/packages/sage-assets/lib/stylesheets/components/_search.scss @@ -29,7 +29,7 @@ $-search-icon: "::before"; } .sage-search:not(.sage-search--contained) & { - border-bottom: 1px solid sage-color(grey, 300); + border-bottom: 1px solid sage-color(grey, 150); &:hover { background-color: sage-color(grey, 100); diff --git a/packages/sage-assets/lib/stylesheets/components/_sortable.scss b/packages/sage-assets/lib/stylesheets/components/_sortable.scss index 5455b17340..b886010638 100644 --- a/packages/sage-assets/lib/stylesheets/components/_sortable.scss +++ b/packages/sage-assets/lib/stylesheets/components/_sortable.scss @@ -75,7 +75,7 @@ $-sortable-image-height: rem(48px); } &.sage-sortable__item--ghost { - background: sage-color(grey, 200); + background: sage-color(grey, 150); } } @@ -84,7 +84,7 @@ $-sortable-image-height: rem(48px); overflow: hidden; height: $-sortable-image-height; width: $-sortable-image-width; - background: sage-color(grey, 200); + background: sage-color(grey, 150); border-radius: sage-border(radius); border: sage-border(); diff --git a/packages/sage-assets/lib/stylesheets/components/_switch.scss b/packages/sage-assets/lib/stylesheets/components/_switch.scss index 0a0517a861..1b9660c9dc 100644 --- a/packages/sage-assets/lib/stylesheets/components/_switch.scss +++ b/packages/sage-assets/lib/stylesheets/components/_switch.scss @@ -6,14 +6,14 @@ // Colors -$-switch-color-default: sage-color(grey, 300); +$-switch-color-default: sage-color(grey, 150); $-switch-color-default-hover: sage-color(grey, 500); $-switch-color-default-text: sage-color(grey, 800); $-switch-color-checked: sage-color(grey, 900); $-switch-color-checked-hover: sage-color(grey, 950); -$-switch-color-disabled: sage-color(grey, 200); +$-switch-color-disabled: sage-color(grey, 150); $-switch-color-disabled-text: sage-color(grey, 800); -$-switch-color-disabled-checked: sage-color(grey, 200); +$-switch-color-disabled-checked: sage-color(grey, 150); $-switch-color-disabled-checked-text: sage-color(grey, 600); $-switch-color-error: sage-color(red, 500); $-switch-focus-outline-error-color: sage-color(red, 300); diff --git a/packages/sage-assets/lib/stylesheets/components/_tab.scss b/packages/sage-assets/lib/stylesheets/components/_tab.scss index 5bcbc3fc00..b49266b32e 100644 --- a/packages/sage-assets/lib/stylesheets/components/_tab.scss +++ b/packages/sage-assets/lib/stylesheets/components/_tab.scss @@ -28,7 +28,7 @@ $-tab-color-disabled: map-get($sage-tab-colors, disabled); .sage-tabs--filter & { padding: rem(6px) rem(14px); - background-color: sage-color(grey, 200); + background-color: sage-color(grey, 150); border-radius: sage-border(radius-x-large); @extend %t-sage-body-small-semi; } @@ -38,7 +38,7 @@ $-tab-color-disabled: map-get($sage-tab-colors, disabled); &:hover { color: $-tab-color-active; .sage-tabs--filter & { - background: sage-color(grey, 300); + background: sage-color(grey, 150); } } diff --git a/packages/sage-assets/lib/stylesheets/components/_table.scss b/packages/sage-assets/lib/stylesheets/components/_table.scss index 436872272f..1be2309f32 100644 --- a/packages/sage-assets/lib/stylesheets/components/_table.scss +++ b/packages/sage-assets/lib/stylesheets/components/_table.scss @@ -5,7 +5,7 @@ //// // Borders and sizing -$-table-header-border: rem(1px) solid sage-color(grey, 200); +$-table-header-border: rem(1px) solid sage-color(grey, 150); $-table-cell-padding-xs: sage-spacing(xs); $-table-cell-padding-card: sage-spacing(); $-table-cell-padding-panel: sage-spacing(); diff --git a/packages/sage-assets/lib/stylesheets/components/_tabs.scss b/packages/sage-assets/lib/stylesheets/components/_tabs.scss index 2b250ce8a1..d58c13a854 100644 --- a/packages/sage-assets/lib/stylesheets/components/_tabs.scss +++ b/packages/sage-assets/lib/stylesheets/components/_tabs.scss @@ -38,7 +38,7 @@ padding-top: sage-spacing(sm); padding-left: sage-spacing(xs); padding-right: sage-spacing(xs); - background-color: sage-color(grey, 200); + background-color: sage-color(grey, 150); } .sage-tabs--layout-stacked { @@ -52,7 +52,7 @@ .sage-tabs-divider, .sage-tabs-container > hr { margin: 0; - border-top: 1px solid sage-color(grey, 300); + border-top: 1px solid sage-color(grey, 150); } .sage-tabs-pane { diff --git a/packages/sage-assets/lib/stylesheets/components/_tag.scss b/packages/sage-assets/lib/stylesheets/components/_tag.scss index 8d597b22ba..27fd9bcd8b 100644 --- a/packages/sage-assets/lib/stylesheets/components/_tag.scss +++ b/packages/sage-assets/lib/stylesheets/components/_tag.scss @@ -15,11 +15,11 @@ $-tag-button-icon-mobile-size: rem(24px); display: inline-flex; align-items: center; padding: sage-spacing(3xs) sage-spacing(xs) sage-spacing(3xs) sage-spacing(xs); - background-color: sage-color(grey, 200); + background-color: sage-color(grey, 150); border-radius: sage-border(radius-x-large); &:hover { - background-color: sage-color(grey, 300); + background-color: sage-color(grey, 150); } pds-icon { diff --git a/packages/sage-assets/lib/stylesheets/core/_variables.scss b/packages/sage-assets/lib/stylesheets/core/_variables.scss index 106b3c3d77..6e6a96f6c3 100644 --- a/packages/sage-assets/lib/stylesheets/core/_variables.scss +++ b/packages/sage-assets/lib/stylesheets/core/_variables.scss @@ -51,7 +51,7 @@ $sage-field-configs: ( /// Field coloring /// $sage-field-colors: ( - border: sage-color(grey, 300), + border: sage-color(grey, 150), default: sage-color(grey, 800), disabled: sage-color(grey, 500), disabled-background: sage-color(grey, 150), @@ -67,10 +67,10 @@ $sage-field-colors: ( /// $sage-radio-colors: ( checked: sage-color(grey, 900), - checked-disabled: sage-color(grey, 200), + checked-disabled: sage-color(grey, 150), checked-hover: sage-color(grey, 950), checked-inner: sage-color(white), - default: sage-color(grey, 300), + default: sage-color(grey, 150), disabled: sage-color(grey, 150), error: sage-color(red, 500), hover: sage-color(grey, 500), diff --git a/packages/sage-assets/lib/stylesheets/tokens/_border.scss b/packages/sage-assets/lib/stylesheets/tokens/_border.scss index 401a0ef3c7..85d8fd6eb9 100644 --- a/packages/sage-assets/lib/stylesheets/tokens/_border.scss +++ b/packages/sage-assets/lib/stylesheets/tokens/_border.scss @@ -9,9 +9,9 @@ /// Sage borders token /// $sage-borders: ( - default: rem(1px) solid sage-color(grey, 200), + default: rem(1px) solid sage-color(grey, 150), error: rem(1px) solid sage-color(red, 500), - interactive: rem(1px) solid sage-color(grey, 300), + interactive: rem(1px) solid sage-color(grey, 150), interactive-hover: rem(1px) solid sage-color(grey, 500), radius-small: rem(4px), radius: rem(8px), diff --git a/packages/sage-assets/lib/stylesheets/tokens/_border_interactive.scss b/packages/sage-assets/lib/stylesheets/tokens/_border_interactive.scss index 69c8e04c99..919ee2968c 100644 --- a/packages/sage-assets/lib/stylesheets/tokens/_border_interactive.scss +++ b/packages/sage-assets/lib/stylesheets/tokens/_border_interactive.scss @@ -9,13 +9,13 @@ /// Sage borders interactive token /// $sage-borders-interactive: ( - default: 0 0 0 1px sage-color(grey, 300), + default: 0 0 0 1px sage-color(grey, 150), hover: 0 0 0 1px sage-color(grey, 500), focus: 0 0 0 4px sage-color(primary, 200), selected: 0 0 0 4px sage-color(grey, 900), error: 0 0 0 1px sage-color(red, 500), error-focus: 0 0 0 4px sage-color(red, 500), - disabled: 0 0 0 1px sage-color(grey, 200), + disabled: 0 0 0 1px sage-color(grey, 150), ); /// diff --git a/packages/sage-react/lib/Divider/Divider.jsx b/packages/sage-react/lib/Divider/Divider.jsx index 58636fe14a..d02ce2a18a 100644 --- a/packages/sage-react/lib/Divider/Divider.jsx +++ b/packages/sage-react/lib/Divider/Divider.jsx @@ -29,7 +29,7 @@ export const Divider = ({ }; Divider.defaultProps = { - color: SageTokens.COLOR_PALETTE.GREY_300, + color: SageTokens.COLOR_PALETTE.GREY_200, vertical: null, offset: null, }; From a695b95f6428ea0284c302aaae912a1678915a02 Mon Sep 17 00:00:00 2001 From: Quinton Jason Date: Fri, 23 Aug 2024 10:25:34 -0500 Subject: [PATCH 19/31] fix: add options for default color values --- .../stylesheets/tokens/_color_palette.scss | 1 + .../sage-react/lib/configs/classnames/type.js | 20 +++++++++++++++++-- 2 files changed, 19 insertions(+), 2 deletions(-) diff --git a/packages/sage-assets/lib/stylesheets/tokens/_color_palette.scss b/packages/sage-assets/lib/stylesheets/tokens/_color_palette.scss index eb072b1fda..b53ed8b82b 100644 --- a/packages/sage-assets/lib/stylesheets/tokens/_color_palette.scss +++ b/packages/sage-assets/lib/stylesheets/tokens/_color_palette.scss @@ -65,4 +65,5 @@ $sage-color-default-name: "grey 500"; @warn "Could not retrieve color: #{$base} #{$value}. Got `#{$color}` from `sd-sage-color()`. Default color #{$sage-color-default-name} (`#{$sage-color-default}`) returned instead."; @return $sage-color-default; + } diff --git a/packages/sage-react/lib/configs/classnames/type.js b/packages/sage-react/lib/configs/classnames/type.js index 2a3673f87b..39da26e4d9 100644 --- a/packages/sage-react/lib/configs/classnames/type.js +++ b/packages/sage-react/lib/configs/classnames/type.js @@ -26,9 +26,25 @@ export const CLASSNAMES_TYPE = { // Generates Sage Color classes from the color sliders token set such as // CLASSNAMES_TYPE_COLORS.RED_200 ---> `t-sage--color-red-200` export const CLASSNAMES_TYPE_COLORS = {}; -Object.keys(SageDictionary.COLOR).forEach((colorName) => { +Object.keys(SageDictionary.COLOR).forEach((colorName)   => { + const defaultIndex = { + black: 500, + blue: 600, + charcoal: 300, + gray: 300, + green: 600, + mercury: 500, + orange: 300, + primary: 300, + purple: 600, + red: 500, + sage: 300, + white: 500, + yellow: 400 + }[colorName]; + Object.keys(SageDictionary.COLOR[colorName]).forEach((index) => { - if (index === '300') { + if (index === defaultIndex) { CLASSNAMES_TYPE_COLORS[`${colorName}`] = SageDictionary.COLOR[colorName][index].CLASSNAME; } CLASSNAMES_TYPE_COLORS[`${colorName}_${index}`] = SageDictionary.COLOR[colorName][index].CLASSNAME; From c2fcfe3e37a18000ae0aceee53428e1124cd6ce7 Mon Sep 17 00:00:00 2001 From: Quinton Jason Date: Fri, 23 Aug 2024 10:32:40 -0500 Subject: [PATCH 20/31] chore: remove whitespace --- packages/sage-react/lib/configs/classnames/type.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/sage-react/lib/configs/classnames/type.js b/packages/sage-react/lib/configs/classnames/type.js index 39da26e4d9..b540fde764 100644 --- a/packages/sage-react/lib/configs/classnames/type.js +++ b/packages/sage-react/lib/configs/classnames/type.js @@ -26,7 +26,7 @@ export const CLASSNAMES_TYPE = { // Generates Sage Color classes from the color sliders token set such as // CLASSNAMES_TYPE_COLORS.RED_200 ---> `t-sage--color-red-200` export const CLASSNAMES_TYPE_COLORS = {}; -Object.keys(SageDictionary.COLOR).forEach((colorName)   => { +Object.keys(SageDictionary.COLOR).forEach((colorName) => { const defaultIndex = { black: 500, blue: 600, From 020550ca9a940d6128a12fd526affea537ebd58f Mon Sep 17 00:00:00 2001 From: Quinton Jason Date: Fri, 23 Aug 2024 11:13:10 -0500 Subject: [PATCH 21/31] fix: self review fix grey 300 and grey 400 in css --- docs/lib/sage-frontend/stylesheets/docs/_grid.scss | 2 +- docs/lib/sage-frontend/stylesheets/docs/_icon.scss | 4 ++-- .../stylesheets/docs/_rouge_theme.scss | 2 +- .../lib/sage-frontend/stylesheets/docs/_specs.scss | 4 ++-- docs/lib/sage-frontend/stylesheets/docs/_text.scss | 2 +- .../lib/stylesheets/components/_alert.scss | 4 ++-- .../lib/stylesheets/components/_assistant.scss | 4 ++-- .../lib/stylesheets/components/_avatar.scss | 4 ++-- .../lib/stylesheets/components/_banner.scss | 2 +- .../lib/stylesheets/components/_button.scss | 14 +++++++------- .../lib/stylesheets/components/_card.scss | 4 ++-- .../lib/stylesheets/components/_catalog_item.scss | 2 +- .../lib/stylesheets/components/_checkbox.scss | 4 ++-- .../lib/stylesheets/components/_choice.scss | 2 +- .../lib/stylesheets/components/_copy_text.scss | 2 +- .../lib/stylesheets/components/_data_card.scss | 4 ++-- .../lib/stylesheets/components/_divider.scss | 2 +- .../lib/stylesheets/components/_dropdown.scss | 8 ++++---- .../stylesheets/components/_expandable_card.scss | 2 +- .../lib/stylesheets/components/_hint.scss | 2 +- .../lib/stylesheets/components/_indicator.scss | 2 +- .../lib/stylesheets/components/_input_group.scss | 2 +- .../lib/stylesheets/components/_meter.scss | 2 +- .../lib/stylesheets/components/_nav.scss | 6 +++--- .../lib/stylesheets/components/_page_heading.scss | 2 +- .../lib/stylesheets/components/_pagination.scss | 2 +- .../lib/stylesheets/components/_panel.scss | 2 +- .../stylesheets/components/_panel_controls.scss | 2 +- .../lib/stylesheets/components/_progress_bar.scss | 2 +- .../lib/stylesheets/components/_sortable.scss | 4 ++-- .../lib/stylesheets/components/_switch.scss | 4 ++-- .../lib/stylesheets/components/_table.scss | 2 +- .../lib/stylesheets/components/_tabs.scss | 4 ++-- .../lib/stylesheets/components/_tag.scss | 4 ++-- .../lib/stylesheets/core/_variables.scss | 6 +++--- .../lib/stylesheets/tokens/_border.scss | 4 ++-- .../stylesheets/tokens/_border_interactive.scss | 4 ++-- 37 files changed, 64 insertions(+), 64 deletions(-) diff --git a/docs/lib/sage-frontend/stylesheets/docs/_grid.scss b/docs/lib/sage-frontend/stylesheets/docs/_grid.scss index bdd18a82ce..64472af66b 100644 --- a/docs/lib/sage-frontend/stylesheets/docs/_grid.scss +++ b/docs/lib/sage-frontend/stylesheets/docs/_grid.scss @@ -9,7 +9,7 @@ margin-bottom: sage-spacing(md); padding: sage-spacing(xs) sage-spacing(md); text-align: center; - background: sage-color(grey, 150); + background: sage-color(grey, 200); border-radius: sage-border(radius); [class*="sage-col--align-"] & { diff --git a/docs/lib/sage-frontend/stylesheets/docs/_icon.scss b/docs/lib/sage-frontend/stylesheets/docs/_icon.scss index 6891de8ec9..c6c7142c92 100644 --- a/docs/lib/sage-frontend/stylesheets/docs/_icon.scss +++ b/docs/lib/sage-frontend/stylesheets/docs/_icon.scss @@ -12,7 +12,7 @@ margin-bottom: sage-spacing(); padding: sage-spacing(lg) sage-spacing(sm); text-align: center; - background: sage-color(grey, 150); + background: sage-color(grey, 200); border-radius: sage-border(radius); cursor: pointer; } @@ -29,7 +29,7 @@ margin-bottom: sage-spacing(sm); padding: sage-spacing(sm); text-align: right; - background: sage-color(grey, 150); + background: sage-color(grey, 200); border-radius: sage-border(radius); i { line-height: 1; diff --git a/docs/lib/sage-frontend/stylesheets/docs/_rouge_theme.scss b/docs/lib/sage-frontend/stylesheets/docs/_rouge_theme.scss index 34719f30ce..c247ac9c06 100644 --- a/docs/lib/sage-frontend/stylesheets/docs/_rouge_theme.scss +++ b/docs/lib/sage-frontend/stylesheets/docs/_rouge_theme.scss @@ -1,5 +1,5 @@ // background -$-color-1: sage-color(grey, 150); +$-color-1: sage-color(grey, 200); // Whitespace $-color-24: sage-color(grey, 700); // Name entity diff --git a/docs/lib/sage-frontend/stylesheets/docs/_specs.scss b/docs/lib/sage-frontend/stylesheets/docs/_specs.scss index df08e1ad7a..37bf5a3dbf 100644 --- a/docs/lib/sage-frontend/stylesheets/docs/_specs.scss +++ b/docs/lib/sage-frontend/stylesheets/docs/_specs.scss @@ -8,14 +8,14 @@ th { padding: 4px; color: sage-color(grey, 700); - border-bottom: 1px solid sage-color(grey, 150); + border-bottom: 1px solid sage-color(grey, 300); } td { padding: 4px; font-size: sage-font-size(body-xs); vertical-align: middle; - border-bottom: 1px solid sage-color(grey, 150); + border-bottom: 1px solid sage-color(grey, 200); } tfoot td { diff --git a/docs/lib/sage-frontend/stylesheets/docs/_text.scss b/docs/lib/sage-frontend/stylesheets/docs/_text.scss index 86c16f80d4..b0aa73ae62 100644 --- a/docs/lib/sage-frontend/stylesheets/docs/_text.scss +++ b/docs/lib/sage-frontend/stylesheets/docs/_text.scss @@ -8,7 +8,7 @@ code { display: inline-block; padding: 0 sage-spacing(2xs); font-size: 0.9em; - background-color: sage-color(grey, 150); + background-color: sage-color(grey, 200); } pre { diff --git a/packages/sage-assets/lib/stylesheets/components/_alert.scss b/packages/sage-assets/lib/stylesheets/components/_alert.scss index bc386ee891..29984678f3 100644 --- a/packages/sage-assets/lib/stylesheets/components/_alert.scss +++ b/packages/sage-assets/lib/stylesheets/components/_alert.scss @@ -9,8 +9,8 @@ // `_button.scss`, `sage_alert.rb`, `_sage_alert.html.erb`, and `Alert.jsx` // $-alert-background-colors: ( - default: sage-color(grey, 150), - draft: sage-color(grey, 150), + default: sage-color(grey, 200), + draft: sage-color(grey, 200), info: sage-color(primary, 100), published: sage-color(sage, 100), success: sage-color(sage, 100), diff --git a/packages/sage-assets/lib/stylesheets/components/_assistant.scss b/packages/sage-assets/lib/stylesheets/components/_assistant.scss index e6be13ea5a..a7f34a78b4 100644 --- a/packages/sage-assets/lib/stylesheets/components/_assistant.scss +++ b/packages/sage-assets/lib/stylesheets/components/_assistant.scss @@ -8,9 +8,9 @@ $-assistant-height: $sage-assistant-height; $-assistant-branding-height: rem(20px); $-assistant-search-height: rem(40px); -$-assistant-search-bg-color: sage-color(grey, 150); +$-assistant-search-bg-color: sage-color(grey, 200); $-assistant-search-bg-opacity: 0.1; -$-assistant-search-placeholder-color: sage-color(grey, 150); +$-assistant-search-placeholder-color: sage-color(grey, 300); $-assistant-search-placeholder-transition: color 0.15s ease-in-out, opacity 0.15s ease-in-out; diff --git a/packages/sage-assets/lib/stylesheets/components/_avatar.scss b/packages/sage-assets/lib/stylesheets/components/_avatar.scss index c11dc7e352..a8dc43bf7e 100644 --- a/packages/sage-assets/lib/stylesheets/components/_avatar.scss +++ b/packages/sage-assets/lib/stylesheets/components/_avatar.scss @@ -10,11 +10,11 @@ $-avatar-max-size: rem(128px); $-avatar-ring-colors: ( charcoal: ( main: sage-color(grey, 950), - bg: sage-color(grey, 150) + bg: sage-color(grey, 200) ), grey: ( main: sage-color(grey, 950), - bg: sage-color(grey, 150) + bg: sage-color(grey, 200) ), purple: ( main: sage-color(purple, 600), diff --git a/packages/sage-assets/lib/stylesheets/components/_banner.scss b/packages/sage-assets/lib/stylesheets/components/_banner.scss index 921b11abc9..bc052abb89 100644 --- a/packages/sage-assets/lib/stylesheets/components/_banner.scss +++ b/packages/sage-assets/lib/stylesheets/components/_banner.scss @@ -14,7 +14,7 @@ $-banner-colors: ( icon: "flag", ), secondary: ( - background: sage-color(grey, 150), + background: sage-color(grey, 200), text: sage-color(grey, 950), text-hover: sage-color(grey, 800), icon: "info-circle", diff --git a/packages/sage-assets/lib/stylesheets/components/_button.scss b/packages/sage-assets/lib/stylesheets/components/_button.scss index 73ed3dd5ac..145b607977 100644 --- a/packages/sage-assets/lib/stylesheets/components/_button.scss +++ b/packages/sage-assets/lib/stylesheets/components/_button.scss @@ -64,8 +64,8 @@ $-btn-base-styles: ( ), disabled: ( color: sage-color(grey, 600), - background-color: sage-color(grey, 150), - border-color: sage-color(grey, 150), + background-color: sage-color(grey, 200), + border-color: sage-color(grey, 200), ) ), secondary: ( @@ -149,8 +149,8 @@ $-btn-subtle-styles: ( // NOTE: the following colors should be kept in sync // with the colors in `_alert.scss` $-alert-close-btn-background-colors: ( - default: sage-color(grey, 150), - draft: sage-color(grey, 150), + default: sage-color(grey, 300), + draft: sage-color(grey, 300), info: sage-color(primary, 200), published: sage-color(sage, 200), success: sage-color(sage, 200), @@ -317,7 +317,7 @@ $-btn-loading-min-height: rem(36px); bottom: rem(1px); height: rem(38px); background-color: sage-color(white); - box-shadow: rem(-1px) 0 0 0 sage-color(grey, 150); + box-shadow: rem(-1px) 0 0 0 sage-color(grey, 300); border-color: transparent; @include sage-focus-outline--update-color(transparent); @@ -472,7 +472,7 @@ $-btn-loading-min-height: rem(36px); } &:hover { - background-color: sage-color(grey, 150); + background-color: sage-color(grey, 200); } &.sage-btn--selected { @@ -612,7 +612,7 @@ a.sage-btn { &[aria-disabled="true"] { color: sage-color(grey, 600); background-color: sage-color(white); - border-color: sage-color(grey, 150); + border-color: sage-color(grey, 200); } } diff --git a/packages/sage-assets/lib/stylesheets/components/_card.scss b/packages/sage-assets/lib/stylesheets/components/_card.scss index 995a536d2d..60ffb9bd64 100644 --- a/packages/sage-assets/lib/stylesheets/components/_card.scss +++ b/packages/sage-assets/lib/stylesheets/components/_card.scss @@ -26,7 +26,7 @@ $-sage-card-background: transparent; border-color: sage-color(white); @include sage-dashed-border( $border-radius: sage-border(radius), - $color: sage-color(grey, 150), + $color: sage-color(grey, 300), ); } @@ -103,7 +103,7 @@ $-sage-card-background: transparent; top: 50%; width: 100%; height: 1px; - background: sage-color(grey, 150); + background: sage-color(grey, 200); } &::after { content: attr(data-divider-label); diff --git a/packages/sage-assets/lib/stylesheets/components/_catalog_item.scss b/packages/sage-assets/lib/stylesheets/components/_catalog_item.scss index af07f3ddef..405c7f8835 100644 --- a/packages/sage-assets/lib/stylesheets/components/_catalog_item.scss +++ b/packages/sage-assets/lib/stylesheets/components/_catalog_item.scss @@ -94,7 +94,7 @@ $-catalogue-item-image-height-mobile: rem(120px); grid-area: img; overflow: hidden; min-height: $-catalogue-item-image-height-min; - background: sage-color(grey, 150); + background: sage-color(grey, 200); border-radius: sage-border(radius); border: sage-border(); diff --git a/packages/sage-assets/lib/stylesheets/components/_checkbox.scss b/packages/sage-assets/lib/stylesheets/components/_checkbox.scss index 8440012d19..ff3175d8df 100644 --- a/packages/sage-assets/lib/stylesheets/components/_checkbox.scss +++ b/packages/sage-assets/lib/stylesheets/components/_checkbox.scss @@ -8,11 +8,11 @@ // Colors // $-checkbox-color-default: sage-color(grey, 500); -$-checkbox-color-default-border: sage-color(grey, 150); +$-checkbox-color-default-border: sage-color(grey, 200); $-checkbox-color-checked: sage-color(grey, 900); $-checkbox-color-checked-hover: sage-color(grey, 950); $-checkbox-color-disabled: sage-color(grey, 150); -$-checkbox-color-disabled-border: sage-color(grey, 150); +$-checkbox-color-disabled-border: sage-color(grey, 200); $-checkbox-color-disabled-checked: sage-color(grey, 600); $-checkbox-color-error: sage-color(red, 500); diff --git a/packages/sage-assets/lib/stylesheets/components/_choice.scss b/packages/sage-assets/lib/stylesheets/components/_choice.scss index aa5c687785..9fb8c59b50 100644 --- a/packages/sage-assets/lib/stylesheets/components/_choice.scss +++ b/packages/sage-assets/lib/stylesheets/components/_choice.scss @@ -87,7 +87,7 @@ $-choice-radio-color-checked-inner: map-get($sage-radio-colors, checked-inner); pointer-events: none; &::before { - background-color: sage-color(grey, 150); + background-color: sage-color(grey, 200); } &:hover::before { diff --git a/packages/sage-assets/lib/stylesheets/components/_copy_text.scss b/packages/sage-assets/lib/stylesheets/components/_copy_text.scss index a156816900..7397ea8a29 100644 --- a/packages/sage-assets/lib/stylesheets/components/_copy_text.scss +++ b/packages/sage-assets/lib/stylesheets/components/_copy_text.scss @@ -5,7 +5,7 @@ //// -$-copy-text-border: 1px solid sage-color(grey, 150); +$-copy-text-border: 1px solid sage-color(grey, 300); $-copy-text-border-focus-color: sage-color(purple, 300); $-copy-text-border-hover-color: sage-color(grey, 500); $-copy-text-color: sage-color(grey, 900); diff --git a/packages/sage-assets/lib/stylesheets/components/_data_card.scss b/packages/sage-assets/lib/stylesheets/components/_data_card.scss index ef81566f3e..718233514a 100644 --- a/packages/sage-assets/lib/stylesheets/components/_data_card.scss +++ b/packages/sage-assets/lib/stylesheets/components/_data_card.scss @@ -7,7 +7,7 @@ $-data-card-colors: ( default: ( - border-color: sage-color(grey, 150), + border-color: sage-color(grey, 300), text-color: sage-color(grey, 900), ), danger: ( @@ -121,7 +121,7 @@ $-data-card-padding: sage-spacing(xs); .sage-data-card-scroll-container &:not(:last-child) { padding-right: sage-spacing(md); - border-right: 1px solid sage-color(grey, 150); + border-right: 1px solid sage-color(grey, 300); } .sage-data-card-scroll-container &:not(:first-child) { diff --git a/packages/sage-assets/lib/stylesheets/components/_divider.scss b/packages/sage-assets/lib/stylesheets/components/_divider.scss index 54e6b35fb2..4b53ae54df 100644 --- a/packages/sage-assets/lib/stylesheets/components/_divider.scss +++ b/packages/sage-assets/lib/stylesheets/components/_divider.scss @@ -9,7 +9,7 @@ height: rem(1px); width: 100%; margin: 0; - background: var(--sage-divider-background-color, sage-color(grey, 150)); + background: var(--sage-divider-background-color, sage-color(grey, 200)); border: 0; &--vertical { diff --git a/packages/sage-assets/lib/stylesheets/components/_dropdown.scss b/packages/sage-assets/lib/stylesheets/components/_dropdown.scss index c362d9c023..66324a5acf 100644 --- a/packages/sage-assets/lib/stylesheets/components/_dropdown.scss +++ b/packages/sage-assets/lib/stylesheets/components/_dropdown.scss @@ -134,13 +134,13 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs); .sage-dropdown__item--border-before { padding-top: sage-spacing(xs); margin-top: sage-spacing(xs); - border-top: 1px solid sage-color(grey, 150); + border-top: 1px solid sage-color(grey, 200); } .sage-dropdown__item--border-after { padding-bottom: sage-spacing(xs); margin-bottom: sage-spacing(xs); - border-bottom: 1px solid sage-color(grey, 150); + border-bottom: 1px solid sage-color(grey, 200); } .sage-dropdown__item--disabled { @@ -188,7 +188,7 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs); &:hover { - background-color: sage-color(grey, 150); + background-color: sage-color(grey, 200); } &:focus-within { @@ -253,7 +253,7 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs); &:hover { color: sage-color(grey, 900); - background-color: sage-color(grey, 150); + background-color: sage-color(grey, 200); } } diff --git a/packages/sage-assets/lib/stylesheets/components/_expandable_card.scss b/packages/sage-assets/lib/stylesheets/components/_expandable_card.scss index 7160b51502..754f3ac421 100644 --- a/packages/sage-assets/lib/stylesheets/components/_expandable_card.scss +++ b/packages/sage-assets/lib/stylesheets/components/_expandable_card.scss @@ -6,7 +6,7 @@ $-expandable-card-bg-color: sage-color(white); -$-expandable-card-border-color: sage-color(grey, 150); +$-expandable-card-border-color: sage-color(grey, 300); $-expandable-card-border-radius: sage-border(radius); $-expandable-card-padding: sage-spacing(sm); $-expandable-card-padding-xs: sage-spacing(xs); diff --git a/packages/sage-assets/lib/stylesheets/components/_hint.scss b/packages/sage-assets/lib/stylesheets/components/_hint.scss index ed0d1b0bc4..59b8475393 100644 --- a/packages/sage-assets/lib/stylesheets/components/_hint.scss +++ b/packages/sage-assets/lib/stylesheets/components/_hint.scss @@ -6,7 +6,7 @@ // Colors $-hint-text-color: sage-color(grey, 900); -$-hint-background-color: sage-color(grey, 150); +$-hint-background-color: sage-color(grey, 200); .sage-hint { display: flex; diff --git a/packages/sage-assets/lib/stylesheets/components/_indicator.scss b/packages/sage-assets/lib/stylesheets/components/_indicator.scss index 58387a42d7..b2dbc95076 100644 --- a/packages/sage-assets/lib/stylesheets/components/_indicator.scss +++ b/packages/sage-assets/lib/stylesheets/components/_indicator.scss @@ -20,7 +20,7 @@ $-indicator-size: rem(6px); border-radius: sage-border(radius-round); &:not(.sage-indicator--current) { - background-color: sage-color(grey, 150); + background-color: sage-color(grey, 300); } &:not(:last-child) { diff --git a/packages/sage-assets/lib/stylesheets/components/_input_group.scss b/packages/sage-assets/lib/stylesheets/components/_input_group.scss index 112ec78b3d..80098d068b 100644 --- a/packages/sage-assets/lib/stylesheets/components/_input_group.scss +++ b/packages/sage-assets/lib/stylesheets/components/_input_group.scss @@ -26,7 +26,7 @@ $-input-group-pw-field-button-color-text-hover: sage-color(black); } .sage-input-group:focus-within & { - background-color: sage-color(grey, 150); + background-color: sage-color(grey, 200); opacity: 1; } diff --git a/packages/sage-assets/lib/stylesheets/components/_meter.scss b/packages/sage-assets/lib/stylesheets/components/_meter.scss index 557e109ae1..372b4ea5c7 100644 --- a/packages/sage-assets/lib/stylesheets/components/_meter.scss +++ b/packages/sage-assets/lib/stylesheets/components/_meter.scss @@ -6,7 +6,7 @@ $-meter-bar-height: rem(4px); -$-meter-color-bg: sage-color(grey, 150); +$-meter-color-bg: sage-color(grey, 200); $-meter-bar-low: rgba(sage-color(red, 950), 0.9); $-meter-bar-med: rgba(sage-color(orange), 0.9); $-meter-bar-success: rgba(sage-color(sage, 200), 0.9); diff --git a/packages/sage-assets/lib/stylesheets/components/_nav.scss b/packages/sage-assets/lib/stylesheets/components/_nav.scss index 0eb871b478..02d7d49b71 100644 --- a/packages/sage-assets/lib/stylesheets/components/_nav.scss +++ b/packages/sage-assets/lib/stylesheets/components/_nav.scss @@ -6,8 +6,8 @@ $-nav-color-text: sage-color(grey, 800); $-nav-color-focus: sage-color(grey, 500); -$-nav-color-background: sage-color(grey, 150); -$-nav-color-background-hover: sage-color(grey, 150); +$-nav-color-background: sage-color(grey, 200); +$-nav-color-background-hover: sage-color(grey, 200); $-nav-icon-size: rem(16px); $-nav-icon-spacing: rem(8px); $-nav-subitem-border-width: rem(2px); @@ -117,5 +117,5 @@ $-nav-subitem-border-width: rem(2px); .sage-nav__list--sub-with-icon { margin-left: calc((#{sage-spacing(sm)} + (#{$-nav-icon-size} / 2)) - (#{$-nav-subitem-border-width} / 2) - (#{$-nav-icon-spacing} / 2)); padding-left: sage-spacing(sm); - border-left: $-nav-subitem-border-width solid sage-color(grey, 150); + border-left: $-nav-subitem-border-width solid sage-color(grey, 300); } diff --git a/packages/sage-assets/lib/stylesheets/components/_page_heading.scss b/packages/sage-assets/lib/stylesheets/components/_page_heading.scss index 02ef09cf7d..5b768efd2a 100644 --- a/packages/sage-assets/lib/stylesheets/components/_page_heading.scss +++ b/packages/sage-assets/lib/stylesheets/components/_page_heading.scss @@ -84,7 +84,7 @@ $-page-heading-image-height-mobile: rem(120px); grid-area: image; overflow: hidden; min-height: $-page-heading-image-height-min; - background: sage-color(grey, 150); + background: sage-color(grey, 200); border-radius: sage-border(radius); border: sage-border(); diff --git a/packages/sage-assets/lib/stylesheets/components/_pagination.scss b/packages/sage-assets/lib/stylesheets/components/_pagination.scss index 81c3d937ac..695cc76ca9 100644 --- a/packages/sage-assets/lib/stylesheets/components/_pagination.scss +++ b/packages/sage-assets/lib/stylesheets/components/_pagination.scss @@ -11,7 +11,7 @@ $-pagination-radius: sage-border(radius-round); $-pagination-text-color: sage-color(grey, 900); $-pagination-text-color-disabled: sage-color(grey, 600); $-pagination-bg-color-current: sage-color(grey, 150); -$-pagination-bg-color-hover: sage-color(grey, 150); +$-pagination-bg-color-hover: sage-color(grey, 200); $-pagination-focus-ring-color: sage-color(purple, 300); diff --git a/packages/sage-assets/lib/stylesheets/components/_panel.scss b/packages/sage-assets/lib/stylesheets/components/_panel.scss index 72be2f8200..4bfee719b2 100644 --- a/packages/sage-assets/lib/stylesheets/components/_panel.scss +++ b/packages/sage-assets/lib/stylesheets/components/_panel.scss @@ -45,7 +45,7 @@ top: 50%; width: 100%; height: 1px; - background: sage-color(grey, 150); + background: sage-color(grey, 200); } &::after { diff --git a/packages/sage-assets/lib/stylesheets/components/_panel_controls.scss b/packages/sage-assets/lib/stylesheets/components/_panel_controls.scss index 39122a46a1..d4cf57bf16 100644 --- a/packages/sage-assets/lib/stylesheets/components/_panel_controls.scss +++ b/packages/sage-assets/lib/stylesheets/components/_panel_controls.scss @@ -19,7 +19,7 @@ height: 0; margin-right: -1 * sage-spacing(panel); margin-left: -1 * sage-spacing(panel); - border-top: 1px solid sage-color(grey, 150); + border-top: 1px solid sage-color(grey, 300); } .sage-search { diff --git a/packages/sage-assets/lib/stylesheets/components/_progress_bar.scss b/packages/sage-assets/lib/stylesheets/components/_progress_bar.scss index 7275e3c395..4f7b972164 100644 --- a/packages/sage-assets/lib/stylesheets/components/_progress_bar.scss +++ b/packages/sage-assets/lib/stylesheets/components/_progress_bar.scss @@ -34,7 +34,7 @@ $-progress-bar-height: sage-spacing(xs); height: $-progress-bar-height; width: 100%; border-radius: sage-border(radius-small); - background-color: var(--sage-progress-bar-background-color, sage-color(grey, 150)); + background-color: var(--sage-progress-bar-background-color, sage-color(grey, 200)); .sage-modal__header & { border-radius: 0; diff --git a/packages/sage-assets/lib/stylesheets/components/_sortable.scss b/packages/sage-assets/lib/stylesheets/components/_sortable.scss index b886010638..5455b17340 100644 --- a/packages/sage-assets/lib/stylesheets/components/_sortable.scss +++ b/packages/sage-assets/lib/stylesheets/components/_sortable.scss @@ -75,7 +75,7 @@ $-sortable-image-height: rem(48px); } &.sage-sortable__item--ghost { - background: sage-color(grey, 150); + background: sage-color(grey, 200); } } @@ -84,7 +84,7 @@ $-sortable-image-height: rem(48px); overflow: hidden; height: $-sortable-image-height; width: $-sortable-image-width; - background: sage-color(grey, 150); + background: sage-color(grey, 200); border-radius: sage-border(radius); border: sage-border(); diff --git a/packages/sage-assets/lib/stylesheets/components/_switch.scss b/packages/sage-assets/lib/stylesheets/components/_switch.scss index 1b9660c9dc..3ff71db22f 100644 --- a/packages/sage-assets/lib/stylesheets/components/_switch.scss +++ b/packages/sage-assets/lib/stylesheets/components/_switch.scss @@ -6,12 +6,12 @@ // Colors -$-switch-color-default: sage-color(grey, 150); +$-switch-color-default: sage-color(grey, 300); $-switch-color-default-hover: sage-color(grey, 500); $-switch-color-default-text: sage-color(grey, 800); $-switch-color-checked: sage-color(grey, 900); $-switch-color-checked-hover: sage-color(grey, 950); -$-switch-color-disabled: sage-color(grey, 150); +$-switch-color-disabled: sage-color(grey, 200); $-switch-color-disabled-text: sage-color(grey, 800); $-switch-color-disabled-checked: sage-color(grey, 150); $-switch-color-disabled-checked-text: sage-color(grey, 600); diff --git a/packages/sage-assets/lib/stylesheets/components/_table.scss b/packages/sage-assets/lib/stylesheets/components/_table.scss index 1be2309f32..436872272f 100644 --- a/packages/sage-assets/lib/stylesheets/components/_table.scss +++ b/packages/sage-assets/lib/stylesheets/components/_table.scss @@ -5,7 +5,7 @@ //// // Borders and sizing -$-table-header-border: rem(1px) solid sage-color(grey, 150); +$-table-header-border: rem(1px) solid sage-color(grey, 200); $-table-cell-padding-xs: sage-spacing(xs); $-table-cell-padding-card: sage-spacing(); $-table-cell-padding-panel: sage-spacing(); diff --git a/packages/sage-assets/lib/stylesheets/components/_tabs.scss b/packages/sage-assets/lib/stylesheets/components/_tabs.scss index d58c13a854..2b250ce8a1 100644 --- a/packages/sage-assets/lib/stylesheets/components/_tabs.scss +++ b/packages/sage-assets/lib/stylesheets/components/_tabs.scss @@ -38,7 +38,7 @@ padding-top: sage-spacing(sm); padding-left: sage-spacing(xs); padding-right: sage-spacing(xs); - background-color: sage-color(grey, 150); + background-color: sage-color(grey, 200); } .sage-tabs--layout-stacked { @@ -52,7 +52,7 @@ .sage-tabs-divider, .sage-tabs-container > hr { margin: 0; - border-top: 1px solid sage-color(grey, 150); + border-top: 1px solid sage-color(grey, 300); } .sage-tabs-pane { diff --git a/packages/sage-assets/lib/stylesheets/components/_tag.scss b/packages/sage-assets/lib/stylesheets/components/_tag.scss index 27fd9bcd8b..8d597b22ba 100644 --- a/packages/sage-assets/lib/stylesheets/components/_tag.scss +++ b/packages/sage-assets/lib/stylesheets/components/_tag.scss @@ -15,11 +15,11 @@ $-tag-button-icon-mobile-size: rem(24px); display: inline-flex; align-items: center; padding: sage-spacing(3xs) sage-spacing(xs) sage-spacing(3xs) sage-spacing(xs); - background-color: sage-color(grey, 150); + background-color: sage-color(grey, 200); border-radius: sage-border(radius-x-large); &:hover { - background-color: sage-color(grey, 150); + background-color: sage-color(grey, 300); } pds-icon { diff --git a/packages/sage-assets/lib/stylesheets/core/_variables.scss b/packages/sage-assets/lib/stylesheets/core/_variables.scss index 6e6a96f6c3..106b3c3d77 100644 --- a/packages/sage-assets/lib/stylesheets/core/_variables.scss +++ b/packages/sage-assets/lib/stylesheets/core/_variables.scss @@ -51,7 +51,7 @@ $sage-field-configs: ( /// Field coloring /// $sage-field-colors: ( - border: sage-color(grey, 150), + border: sage-color(grey, 300), default: sage-color(grey, 800), disabled: sage-color(grey, 500), disabled-background: sage-color(grey, 150), @@ -67,10 +67,10 @@ $sage-field-colors: ( /// $sage-radio-colors: ( checked: sage-color(grey, 900), - checked-disabled: sage-color(grey, 150), + checked-disabled: sage-color(grey, 200), checked-hover: sage-color(grey, 950), checked-inner: sage-color(white), - default: sage-color(grey, 150), + default: sage-color(grey, 300), disabled: sage-color(grey, 150), error: sage-color(red, 500), hover: sage-color(grey, 500), diff --git a/packages/sage-assets/lib/stylesheets/tokens/_border.scss b/packages/sage-assets/lib/stylesheets/tokens/_border.scss index 85d8fd6eb9..401a0ef3c7 100644 --- a/packages/sage-assets/lib/stylesheets/tokens/_border.scss +++ b/packages/sage-assets/lib/stylesheets/tokens/_border.scss @@ -9,9 +9,9 @@ /// Sage borders token /// $sage-borders: ( - default: rem(1px) solid sage-color(grey, 150), + default: rem(1px) solid sage-color(grey, 200), error: rem(1px) solid sage-color(red, 500), - interactive: rem(1px) solid sage-color(grey, 150), + interactive: rem(1px) solid sage-color(grey, 300), interactive-hover: rem(1px) solid sage-color(grey, 500), radius-small: rem(4px), radius: rem(8px), diff --git a/packages/sage-assets/lib/stylesheets/tokens/_border_interactive.scss b/packages/sage-assets/lib/stylesheets/tokens/_border_interactive.scss index 919ee2968c..69c8e04c99 100644 --- a/packages/sage-assets/lib/stylesheets/tokens/_border_interactive.scss +++ b/packages/sage-assets/lib/stylesheets/tokens/_border_interactive.scss @@ -9,13 +9,13 @@ /// Sage borders interactive token /// $sage-borders-interactive: ( - default: 0 0 0 1px sage-color(grey, 150), + default: 0 0 0 1px sage-color(grey, 300), hover: 0 0 0 1px sage-color(grey, 500), focus: 0 0 0 4px sage-color(primary, 200), selected: 0 0 0 4px sage-color(grey, 900), error: 0 0 0 1px sage-color(red, 500), error-focus: 0 0 0 4px sage-color(red, 500), - disabled: 0 0 0 1px sage-color(grey, 150), + disabled: 0 0 0 1px sage-color(grey, 200), ); /// From 4c1b3d05ca6d62748d8a03127a726b5865f802c6 Mon Sep 17 00:00:00 2001 From: Quinton Jason Date: Mon, 26 Aug 2024 16:49:36 -0500 Subject: [PATCH 22/31] Revert "fix: self review fix grey 300 and grey 400 in css" This reverts commit 2ae5967850416529d61fda4ce6287e35a151fed6. --- docs/lib/sage-frontend/stylesheets/docs/_grid.scss | 2 +- docs/lib/sage-frontend/stylesheets/docs/_icon.scss | 4 ++-- .../stylesheets/docs/_rouge_theme.scss | 2 +- .../lib/sage-frontend/stylesheets/docs/_specs.scss | 4 ++-- docs/lib/sage-frontend/stylesheets/docs/_text.scss | 2 +- .../lib/stylesheets/components/_alert.scss | 4 ++-- .../lib/stylesheets/components/_assistant.scss | 4 ++-- .../lib/stylesheets/components/_avatar.scss | 4 ++-- .../lib/stylesheets/components/_banner.scss | 2 +- .../lib/stylesheets/components/_button.scss | 14 +++++++------- .../lib/stylesheets/components/_card.scss | 4 ++-- .../lib/stylesheets/components/_catalog_item.scss | 2 +- .../lib/stylesheets/components/_checkbox.scss | 4 ++-- .../lib/stylesheets/components/_choice.scss | 2 +- .../lib/stylesheets/components/_copy_text.scss | 2 +- .../lib/stylesheets/components/_data_card.scss | 4 ++-- .../lib/stylesheets/components/_divider.scss | 2 +- .../lib/stylesheets/components/_dropdown.scss | 8 ++++---- .../stylesheets/components/_expandable_card.scss | 2 +- .../lib/stylesheets/components/_hint.scss | 2 +- .../lib/stylesheets/components/_indicator.scss | 2 +- .../lib/stylesheets/components/_input_group.scss | 2 +- .../lib/stylesheets/components/_meter.scss | 2 +- .../lib/stylesheets/components/_nav.scss | 6 +++--- .../lib/stylesheets/components/_page_heading.scss | 2 +- .../lib/stylesheets/components/_pagination.scss | 2 +- .../lib/stylesheets/components/_panel.scss | 2 +- .../stylesheets/components/_panel_controls.scss | 2 +- .../lib/stylesheets/components/_progress_bar.scss | 2 +- .../lib/stylesheets/components/_sortable.scss | 4 ++-- .../lib/stylesheets/components/_switch.scss | 4 ++-- .../lib/stylesheets/components/_table.scss | 2 +- .../lib/stylesheets/components/_tabs.scss | 4 ++-- .../lib/stylesheets/components/_tag.scss | 4 ++-- .../lib/stylesheets/core/_variables.scss | 6 +++--- .../lib/stylesheets/tokens/_border.scss | 4 ++-- .../stylesheets/tokens/_border_interactive.scss | 4 ++-- 37 files changed, 64 insertions(+), 64 deletions(-) diff --git a/docs/lib/sage-frontend/stylesheets/docs/_grid.scss b/docs/lib/sage-frontend/stylesheets/docs/_grid.scss index 64472af66b..bdd18a82ce 100644 --- a/docs/lib/sage-frontend/stylesheets/docs/_grid.scss +++ b/docs/lib/sage-frontend/stylesheets/docs/_grid.scss @@ -9,7 +9,7 @@ margin-bottom: sage-spacing(md); padding: sage-spacing(xs) sage-spacing(md); text-align: center; - background: sage-color(grey, 200); + background: sage-color(grey, 150); border-radius: sage-border(radius); [class*="sage-col--align-"] & { diff --git a/docs/lib/sage-frontend/stylesheets/docs/_icon.scss b/docs/lib/sage-frontend/stylesheets/docs/_icon.scss index c6c7142c92..6891de8ec9 100644 --- a/docs/lib/sage-frontend/stylesheets/docs/_icon.scss +++ b/docs/lib/sage-frontend/stylesheets/docs/_icon.scss @@ -12,7 +12,7 @@ margin-bottom: sage-spacing(); padding: sage-spacing(lg) sage-spacing(sm); text-align: center; - background: sage-color(grey, 200); + background: sage-color(grey, 150); border-radius: sage-border(radius); cursor: pointer; } @@ -29,7 +29,7 @@ margin-bottom: sage-spacing(sm); padding: sage-spacing(sm); text-align: right; - background: sage-color(grey, 200); + background: sage-color(grey, 150); border-radius: sage-border(radius); i { line-height: 1; diff --git a/docs/lib/sage-frontend/stylesheets/docs/_rouge_theme.scss b/docs/lib/sage-frontend/stylesheets/docs/_rouge_theme.scss index c247ac9c06..34719f30ce 100644 --- a/docs/lib/sage-frontend/stylesheets/docs/_rouge_theme.scss +++ b/docs/lib/sage-frontend/stylesheets/docs/_rouge_theme.scss @@ -1,5 +1,5 @@ // background -$-color-1: sage-color(grey, 200); +$-color-1: sage-color(grey, 150); // Whitespace $-color-24: sage-color(grey, 700); // Name entity diff --git a/docs/lib/sage-frontend/stylesheets/docs/_specs.scss b/docs/lib/sage-frontend/stylesheets/docs/_specs.scss index 37bf5a3dbf..df08e1ad7a 100644 --- a/docs/lib/sage-frontend/stylesheets/docs/_specs.scss +++ b/docs/lib/sage-frontend/stylesheets/docs/_specs.scss @@ -8,14 +8,14 @@ th { padding: 4px; color: sage-color(grey, 700); - border-bottom: 1px solid sage-color(grey, 300); + border-bottom: 1px solid sage-color(grey, 150); } td { padding: 4px; font-size: sage-font-size(body-xs); vertical-align: middle; - border-bottom: 1px solid sage-color(grey, 200); + border-bottom: 1px solid sage-color(grey, 150); } tfoot td { diff --git a/docs/lib/sage-frontend/stylesheets/docs/_text.scss b/docs/lib/sage-frontend/stylesheets/docs/_text.scss index b0aa73ae62..86c16f80d4 100644 --- a/docs/lib/sage-frontend/stylesheets/docs/_text.scss +++ b/docs/lib/sage-frontend/stylesheets/docs/_text.scss @@ -8,7 +8,7 @@ code { display: inline-block; padding: 0 sage-spacing(2xs); font-size: 0.9em; - background-color: sage-color(grey, 200); + background-color: sage-color(grey, 150); } pre { diff --git a/packages/sage-assets/lib/stylesheets/components/_alert.scss b/packages/sage-assets/lib/stylesheets/components/_alert.scss index 29984678f3..bc386ee891 100644 --- a/packages/sage-assets/lib/stylesheets/components/_alert.scss +++ b/packages/sage-assets/lib/stylesheets/components/_alert.scss @@ -9,8 +9,8 @@ // `_button.scss`, `sage_alert.rb`, `_sage_alert.html.erb`, and `Alert.jsx` // $-alert-background-colors: ( - default: sage-color(grey, 200), - draft: sage-color(grey, 200), + default: sage-color(grey, 150), + draft: sage-color(grey, 150), info: sage-color(primary, 100), published: sage-color(sage, 100), success: sage-color(sage, 100), diff --git a/packages/sage-assets/lib/stylesheets/components/_assistant.scss b/packages/sage-assets/lib/stylesheets/components/_assistant.scss index a7f34a78b4..e6be13ea5a 100644 --- a/packages/sage-assets/lib/stylesheets/components/_assistant.scss +++ b/packages/sage-assets/lib/stylesheets/components/_assistant.scss @@ -8,9 +8,9 @@ $-assistant-height: $sage-assistant-height; $-assistant-branding-height: rem(20px); $-assistant-search-height: rem(40px); -$-assistant-search-bg-color: sage-color(grey, 200); +$-assistant-search-bg-color: sage-color(grey, 150); $-assistant-search-bg-opacity: 0.1; -$-assistant-search-placeholder-color: sage-color(grey, 300); +$-assistant-search-placeholder-color: sage-color(grey, 150); $-assistant-search-placeholder-transition: color 0.15s ease-in-out, opacity 0.15s ease-in-out; diff --git a/packages/sage-assets/lib/stylesheets/components/_avatar.scss b/packages/sage-assets/lib/stylesheets/components/_avatar.scss index a8dc43bf7e..c11dc7e352 100644 --- a/packages/sage-assets/lib/stylesheets/components/_avatar.scss +++ b/packages/sage-assets/lib/stylesheets/components/_avatar.scss @@ -10,11 +10,11 @@ $-avatar-max-size: rem(128px); $-avatar-ring-colors: ( charcoal: ( main: sage-color(grey, 950), - bg: sage-color(grey, 200) + bg: sage-color(grey, 150) ), grey: ( main: sage-color(grey, 950), - bg: sage-color(grey, 200) + bg: sage-color(grey, 150) ), purple: ( main: sage-color(purple, 600), diff --git a/packages/sage-assets/lib/stylesheets/components/_banner.scss b/packages/sage-assets/lib/stylesheets/components/_banner.scss index bc052abb89..921b11abc9 100644 --- a/packages/sage-assets/lib/stylesheets/components/_banner.scss +++ b/packages/sage-assets/lib/stylesheets/components/_banner.scss @@ -14,7 +14,7 @@ $-banner-colors: ( icon: "flag", ), secondary: ( - background: sage-color(grey, 200), + background: sage-color(grey, 150), text: sage-color(grey, 950), text-hover: sage-color(grey, 800), icon: "info-circle", diff --git a/packages/sage-assets/lib/stylesheets/components/_button.scss b/packages/sage-assets/lib/stylesheets/components/_button.scss index 145b607977..73ed3dd5ac 100644 --- a/packages/sage-assets/lib/stylesheets/components/_button.scss +++ b/packages/sage-assets/lib/stylesheets/components/_button.scss @@ -64,8 +64,8 @@ $-btn-base-styles: ( ), disabled: ( color: sage-color(grey, 600), - background-color: sage-color(grey, 200), - border-color: sage-color(grey, 200), + background-color: sage-color(grey, 150), + border-color: sage-color(grey, 150), ) ), secondary: ( @@ -149,8 +149,8 @@ $-btn-subtle-styles: ( // NOTE: the following colors should be kept in sync // with the colors in `_alert.scss` $-alert-close-btn-background-colors: ( - default: sage-color(grey, 300), - draft: sage-color(grey, 300), + default: sage-color(grey, 150), + draft: sage-color(grey, 150), info: sage-color(primary, 200), published: sage-color(sage, 200), success: sage-color(sage, 200), @@ -317,7 +317,7 @@ $-btn-loading-min-height: rem(36px); bottom: rem(1px); height: rem(38px); background-color: sage-color(white); - box-shadow: rem(-1px) 0 0 0 sage-color(grey, 300); + box-shadow: rem(-1px) 0 0 0 sage-color(grey, 150); border-color: transparent; @include sage-focus-outline--update-color(transparent); @@ -472,7 +472,7 @@ $-btn-loading-min-height: rem(36px); } &:hover { - background-color: sage-color(grey, 200); + background-color: sage-color(grey, 150); } &.sage-btn--selected { @@ -612,7 +612,7 @@ a.sage-btn { &[aria-disabled="true"] { color: sage-color(grey, 600); background-color: sage-color(white); - border-color: sage-color(grey, 200); + border-color: sage-color(grey, 150); } } diff --git a/packages/sage-assets/lib/stylesheets/components/_card.scss b/packages/sage-assets/lib/stylesheets/components/_card.scss index 60ffb9bd64..995a536d2d 100644 --- a/packages/sage-assets/lib/stylesheets/components/_card.scss +++ b/packages/sage-assets/lib/stylesheets/components/_card.scss @@ -26,7 +26,7 @@ $-sage-card-background: transparent; border-color: sage-color(white); @include sage-dashed-border( $border-radius: sage-border(radius), - $color: sage-color(grey, 300), + $color: sage-color(grey, 150), ); } @@ -103,7 +103,7 @@ $-sage-card-background: transparent; top: 50%; width: 100%; height: 1px; - background: sage-color(grey, 200); + background: sage-color(grey, 150); } &::after { content: attr(data-divider-label); diff --git a/packages/sage-assets/lib/stylesheets/components/_catalog_item.scss b/packages/sage-assets/lib/stylesheets/components/_catalog_item.scss index 405c7f8835..af07f3ddef 100644 --- a/packages/sage-assets/lib/stylesheets/components/_catalog_item.scss +++ b/packages/sage-assets/lib/stylesheets/components/_catalog_item.scss @@ -94,7 +94,7 @@ $-catalogue-item-image-height-mobile: rem(120px); grid-area: img; overflow: hidden; min-height: $-catalogue-item-image-height-min; - background: sage-color(grey, 200); + background: sage-color(grey, 150); border-radius: sage-border(radius); border: sage-border(); diff --git a/packages/sage-assets/lib/stylesheets/components/_checkbox.scss b/packages/sage-assets/lib/stylesheets/components/_checkbox.scss index ff3175d8df..8440012d19 100644 --- a/packages/sage-assets/lib/stylesheets/components/_checkbox.scss +++ b/packages/sage-assets/lib/stylesheets/components/_checkbox.scss @@ -8,11 +8,11 @@ // Colors // $-checkbox-color-default: sage-color(grey, 500); -$-checkbox-color-default-border: sage-color(grey, 200); +$-checkbox-color-default-border: sage-color(grey, 150); $-checkbox-color-checked: sage-color(grey, 900); $-checkbox-color-checked-hover: sage-color(grey, 950); $-checkbox-color-disabled: sage-color(grey, 150); -$-checkbox-color-disabled-border: sage-color(grey, 200); +$-checkbox-color-disabled-border: sage-color(grey, 150); $-checkbox-color-disabled-checked: sage-color(grey, 600); $-checkbox-color-error: sage-color(red, 500); diff --git a/packages/sage-assets/lib/stylesheets/components/_choice.scss b/packages/sage-assets/lib/stylesheets/components/_choice.scss index 9fb8c59b50..aa5c687785 100644 --- a/packages/sage-assets/lib/stylesheets/components/_choice.scss +++ b/packages/sage-assets/lib/stylesheets/components/_choice.scss @@ -87,7 +87,7 @@ $-choice-radio-color-checked-inner: map-get($sage-radio-colors, checked-inner); pointer-events: none; &::before { - background-color: sage-color(grey, 200); + background-color: sage-color(grey, 150); } &:hover::before { diff --git a/packages/sage-assets/lib/stylesheets/components/_copy_text.scss b/packages/sage-assets/lib/stylesheets/components/_copy_text.scss index 7397ea8a29..a156816900 100644 --- a/packages/sage-assets/lib/stylesheets/components/_copy_text.scss +++ b/packages/sage-assets/lib/stylesheets/components/_copy_text.scss @@ -5,7 +5,7 @@ //// -$-copy-text-border: 1px solid sage-color(grey, 300); +$-copy-text-border: 1px solid sage-color(grey, 150); $-copy-text-border-focus-color: sage-color(purple, 300); $-copy-text-border-hover-color: sage-color(grey, 500); $-copy-text-color: sage-color(grey, 900); diff --git a/packages/sage-assets/lib/stylesheets/components/_data_card.scss b/packages/sage-assets/lib/stylesheets/components/_data_card.scss index 718233514a..ef81566f3e 100644 --- a/packages/sage-assets/lib/stylesheets/components/_data_card.scss +++ b/packages/sage-assets/lib/stylesheets/components/_data_card.scss @@ -7,7 +7,7 @@ $-data-card-colors: ( default: ( - border-color: sage-color(grey, 300), + border-color: sage-color(grey, 150), text-color: sage-color(grey, 900), ), danger: ( @@ -121,7 +121,7 @@ $-data-card-padding: sage-spacing(xs); .sage-data-card-scroll-container &:not(:last-child) { padding-right: sage-spacing(md); - border-right: 1px solid sage-color(grey, 300); + border-right: 1px solid sage-color(grey, 150); } .sage-data-card-scroll-container &:not(:first-child) { diff --git a/packages/sage-assets/lib/stylesheets/components/_divider.scss b/packages/sage-assets/lib/stylesheets/components/_divider.scss index 4b53ae54df..54e6b35fb2 100644 --- a/packages/sage-assets/lib/stylesheets/components/_divider.scss +++ b/packages/sage-assets/lib/stylesheets/components/_divider.scss @@ -9,7 +9,7 @@ height: rem(1px); width: 100%; margin: 0; - background: var(--sage-divider-background-color, sage-color(grey, 200)); + background: var(--sage-divider-background-color, sage-color(grey, 150)); border: 0; &--vertical { diff --git a/packages/sage-assets/lib/stylesheets/components/_dropdown.scss b/packages/sage-assets/lib/stylesheets/components/_dropdown.scss index 66324a5acf..c362d9c023 100644 --- a/packages/sage-assets/lib/stylesheets/components/_dropdown.scss +++ b/packages/sage-assets/lib/stylesheets/components/_dropdown.scss @@ -134,13 +134,13 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs); .sage-dropdown__item--border-before { padding-top: sage-spacing(xs); margin-top: sage-spacing(xs); - border-top: 1px solid sage-color(grey, 200); + border-top: 1px solid sage-color(grey, 150); } .sage-dropdown__item--border-after { padding-bottom: sage-spacing(xs); margin-bottom: sage-spacing(xs); - border-bottom: 1px solid sage-color(grey, 200); + border-bottom: 1px solid sage-color(grey, 150); } .sage-dropdown__item--disabled { @@ -188,7 +188,7 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs); &:hover { - background-color: sage-color(grey, 200); + background-color: sage-color(grey, 150); } &:focus-within { @@ -253,7 +253,7 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs); &:hover { color: sage-color(grey, 900); - background-color: sage-color(grey, 200); + background-color: sage-color(grey, 150); } } diff --git a/packages/sage-assets/lib/stylesheets/components/_expandable_card.scss b/packages/sage-assets/lib/stylesheets/components/_expandable_card.scss index 754f3ac421..7160b51502 100644 --- a/packages/sage-assets/lib/stylesheets/components/_expandable_card.scss +++ b/packages/sage-assets/lib/stylesheets/components/_expandable_card.scss @@ -6,7 +6,7 @@ $-expandable-card-bg-color: sage-color(white); -$-expandable-card-border-color: sage-color(grey, 300); +$-expandable-card-border-color: sage-color(grey, 150); $-expandable-card-border-radius: sage-border(radius); $-expandable-card-padding: sage-spacing(sm); $-expandable-card-padding-xs: sage-spacing(xs); diff --git a/packages/sage-assets/lib/stylesheets/components/_hint.scss b/packages/sage-assets/lib/stylesheets/components/_hint.scss index 59b8475393..ed0d1b0bc4 100644 --- a/packages/sage-assets/lib/stylesheets/components/_hint.scss +++ b/packages/sage-assets/lib/stylesheets/components/_hint.scss @@ -6,7 +6,7 @@ // Colors $-hint-text-color: sage-color(grey, 900); -$-hint-background-color: sage-color(grey, 200); +$-hint-background-color: sage-color(grey, 150); .sage-hint { display: flex; diff --git a/packages/sage-assets/lib/stylesheets/components/_indicator.scss b/packages/sage-assets/lib/stylesheets/components/_indicator.scss index b2dbc95076..58387a42d7 100644 --- a/packages/sage-assets/lib/stylesheets/components/_indicator.scss +++ b/packages/sage-assets/lib/stylesheets/components/_indicator.scss @@ -20,7 +20,7 @@ $-indicator-size: rem(6px); border-radius: sage-border(radius-round); &:not(.sage-indicator--current) { - background-color: sage-color(grey, 300); + background-color: sage-color(grey, 150); } &:not(:last-child) { diff --git a/packages/sage-assets/lib/stylesheets/components/_input_group.scss b/packages/sage-assets/lib/stylesheets/components/_input_group.scss index 80098d068b..112ec78b3d 100644 --- a/packages/sage-assets/lib/stylesheets/components/_input_group.scss +++ b/packages/sage-assets/lib/stylesheets/components/_input_group.scss @@ -26,7 +26,7 @@ $-input-group-pw-field-button-color-text-hover: sage-color(black); } .sage-input-group:focus-within & { - background-color: sage-color(grey, 200); + background-color: sage-color(grey, 150); opacity: 1; } diff --git a/packages/sage-assets/lib/stylesheets/components/_meter.scss b/packages/sage-assets/lib/stylesheets/components/_meter.scss index 372b4ea5c7..557e109ae1 100644 --- a/packages/sage-assets/lib/stylesheets/components/_meter.scss +++ b/packages/sage-assets/lib/stylesheets/components/_meter.scss @@ -6,7 +6,7 @@ $-meter-bar-height: rem(4px); -$-meter-color-bg: sage-color(grey, 200); +$-meter-color-bg: sage-color(grey, 150); $-meter-bar-low: rgba(sage-color(red, 950), 0.9); $-meter-bar-med: rgba(sage-color(orange), 0.9); $-meter-bar-success: rgba(sage-color(sage, 200), 0.9); diff --git a/packages/sage-assets/lib/stylesheets/components/_nav.scss b/packages/sage-assets/lib/stylesheets/components/_nav.scss index 02d7d49b71..0eb871b478 100644 --- a/packages/sage-assets/lib/stylesheets/components/_nav.scss +++ b/packages/sage-assets/lib/stylesheets/components/_nav.scss @@ -6,8 +6,8 @@ $-nav-color-text: sage-color(grey, 800); $-nav-color-focus: sage-color(grey, 500); -$-nav-color-background: sage-color(grey, 200); -$-nav-color-background-hover: sage-color(grey, 200); +$-nav-color-background: sage-color(grey, 150); +$-nav-color-background-hover: sage-color(grey, 150); $-nav-icon-size: rem(16px); $-nav-icon-spacing: rem(8px); $-nav-subitem-border-width: rem(2px); @@ -117,5 +117,5 @@ $-nav-subitem-border-width: rem(2px); .sage-nav__list--sub-with-icon { margin-left: calc((#{sage-spacing(sm)} + (#{$-nav-icon-size} / 2)) - (#{$-nav-subitem-border-width} / 2) - (#{$-nav-icon-spacing} / 2)); padding-left: sage-spacing(sm); - border-left: $-nav-subitem-border-width solid sage-color(grey, 300); + border-left: $-nav-subitem-border-width solid sage-color(grey, 150); } diff --git a/packages/sage-assets/lib/stylesheets/components/_page_heading.scss b/packages/sage-assets/lib/stylesheets/components/_page_heading.scss index 5b768efd2a..02ef09cf7d 100644 --- a/packages/sage-assets/lib/stylesheets/components/_page_heading.scss +++ b/packages/sage-assets/lib/stylesheets/components/_page_heading.scss @@ -84,7 +84,7 @@ $-page-heading-image-height-mobile: rem(120px); grid-area: image; overflow: hidden; min-height: $-page-heading-image-height-min; - background: sage-color(grey, 200); + background: sage-color(grey, 150); border-radius: sage-border(radius); border: sage-border(); diff --git a/packages/sage-assets/lib/stylesheets/components/_pagination.scss b/packages/sage-assets/lib/stylesheets/components/_pagination.scss index 695cc76ca9..81c3d937ac 100644 --- a/packages/sage-assets/lib/stylesheets/components/_pagination.scss +++ b/packages/sage-assets/lib/stylesheets/components/_pagination.scss @@ -11,7 +11,7 @@ $-pagination-radius: sage-border(radius-round); $-pagination-text-color: sage-color(grey, 900); $-pagination-text-color-disabled: sage-color(grey, 600); $-pagination-bg-color-current: sage-color(grey, 150); -$-pagination-bg-color-hover: sage-color(grey, 200); +$-pagination-bg-color-hover: sage-color(grey, 150); $-pagination-focus-ring-color: sage-color(purple, 300); diff --git a/packages/sage-assets/lib/stylesheets/components/_panel.scss b/packages/sage-assets/lib/stylesheets/components/_panel.scss index 4bfee719b2..72be2f8200 100644 --- a/packages/sage-assets/lib/stylesheets/components/_panel.scss +++ b/packages/sage-assets/lib/stylesheets/components/_panel.scss @@ -45,7 +45,7 @@ top: 50%; width: 100%; height: 1px; - background: sage-color(grey, 200); + background: sage-color(grey, 150); } &::after { diff --git a/packages/sage-assets/lib/stylesheets/components/_panel_controls.scss b/packages/sage-assets/lib/stylesheets/components/_panel_controls.scss index d4cf57bf16..39122a46a1 100644 --- a/packages/sage-assets/lib/stylesheets/components/_panel_controls.scss +++ b/packages/sage-assets/lib/stylesheets/components/_panel_controls.scss @@ -19,7 +19,7 @@ height: 0; margin-right: -1 * sage-spacing(panel); margin-left: -1 * sage-spacing(panel); - border-top: 1px solid sage-color(grey, 300); + border-top: 1px solid sage-color(grey, 150); } .sage-search { diff --git a/packages/sage-assets/lib/stylesheets/components/_progress_bar.scss b/packages/sage-assets/lib/stylesheets/components/_progress_bar.scss index 4f7b972164..7275e3c395 100644 --- a/packages/sage-assets/lib/stylesheets/components/_progress_bar.scss +++ b/packages/sage-assets/lib/stylesheets/components/_progress_bar.scss @@ -34,7 +34,7 @@ $-progress-bar-height: sage-spacing(xs); height: $-progress-bar-height; width: 100%; border-radius: sage-border(radius-small); - background-color: var(--sage-progress-bar-background-color, sage-color(grey, 200)); + background-color: var(--sage-progress-bar-background-color, sage-color(grey, 150)); .sage-modal__header & { border-radius: 0; diff --git a/packages/sage-assets/lib/stylesheets/components/_sortable.scss b/packages/sage-assets/lib/stylesheets/components/_sortable.scss index 5455b17340..b886010638 100644 --- a/packages/sage-assets/lib/stylesheets/components/_sortable.scss +++ b/packages/sage-assets/lib/stylesheets/components/_sortable.scss @@ -75,7 +75,7 @@ $-sortable-image-height: rem(48px); } &.sage-sortable__item--ghost { - background: sage-color(grey, 200); + background: sage-color(grey, 150); } } @@ -84,7 +84,7 @@ $-sortable-image-height: rem(48px); overflow: hidden; height: $-sortable-image-height; width: $-sortable-image-width; - background: sage-color(grey, 200); + background: sage-color(grey, 150); border-radius: sage-border(radius); border: sage-border(); diff --git a/packages/sage-assets/lib/stylesheets/components/_switch.scss b/packages/sage-assets/lib/stylesheets/components/_switch.scss index 3ff71db22f..1b9660c9dc 100644 --- a/packages/sage-assets/lib/stylesheets/components/_switch.scss +++ b/packages/sage-assets/lib/stylesheets/components/_switch.scss @@ -6,12 +6,12 @@ // Colors -$-switch-color-default: sage-color(grey, 300); +$-switch-color-default: sage-color(grey, 150); $-switch-color-default-hover: sage-color(grey, 500); $-switch-color-default-text: sage-color(grey, 800); $-switch-color-checked: sage-color(grey, 900); $-switch-color-checked-hover: sage-color(grey, 950); -$-switch-color-disabled: sage-color(grey, 200); +$-switch-color-disabled: sage-color(grey, 150); $-switch-color-disabled-text: sage-color(grey, 800); $-switch-color-disabled-checked: sage-color(grey, 150); $-switch-color-disabled-checked-text: sage-color(grey, 600); diff --git a/packages/sage-assets/lib/stylesheets/components/_table.scss b/packages/sage-assets/lib/stylesheets/components/_table.scss index 436872272f..1be2309f32 100644 --- a/packages/sage-assets/lib/stylesheets/components/_table.scss +++ b/packages/sage-assets/lib/stylesheets/components/_table.scss @@ -5,7 +5,7 @@ //// // Borders and sizing -$-table-header-border: rem(1px) solid sage-color(grey, 200); +$-table-header-border: rem(1px) solid sage-color(grey, 150); $-table-cell-padding-xs: sage-spacing(xs); $-table-cell-padding-card: sage-spacing(); $-table-cell-padding-panel: sage-spacing(); diff --git a/packages/sage-assets/lib/stylesheets/components/_tabs.scss b/packages/sage-assets/lib/stylesheets/components/_tabs.scss index 2b250ce8a1..d58c13a854 100644 --- a/packages/sage-assets/lib/stylesheets/components/_tabs.scss +++ b/packages/sage-assets/lib/stylesheets/components/_tabs.scss @@ -38,7 +38,7 @@ padding-top: sage-spacing(sm); padding-left: sage-spacing(xs); padding-right: sage-spacing(xs); - background-color: sage-color(grey, 200); + background-color: sage-color(grey, 150); } .sage-tabs--layout-stacked { @@ -52,7 +52,7 @@ .sage-tabs-divider, .sage-tabs-container > hr { margin: 0; - border-top: 1px solid sage-color(grey, 300); + border-top: 1px solid sage-color(grey, 150); } .sage-tabs-pane { diff --git a/packages/sage-assets/lib/stylesheets/components/_tag.scss b/packages/sage-assets/lib/stylesheets/components/_tag.scss index 8d597b22ba..27fd9bcd8b 100644 --- a/packages/sage-assets/lib/stylesheets/components/_tag.scss +++ b/packages/sage-assets/lib/stylesheets/components/_tag.scss @@ -15,11 +15,11 @@ $-tag-button-icon-mobile-size: rem(24px); display: inline-flex; align-items: center; padding: sage-spacing(3xs) sage-spacing(xs) sage-spacing(3xs) sage-spacing(xs); - background-color: sage-color(grey, 200); + background-color: sage-color(grey, 150); border-radius: sage-border(radius-x-large); &:hover { - background-color: sage-color(grey, 300); + background-color: sage-color(grey, 150); } pds-icon { diff --git a/packages/sage-assets/lib/stylesheets/core/_variables.scss b/packages/sage-assets/lib/stylesheets/core/_variables.scss index 106b3c3d77..6e6a96f6c3 100644 --- a/packages/sage-assets/lib/stylesheets/core/_variables.scss +++ b/packages/sage-assets/lib/stylesheets/core/_variables.scss @@ -51,7 +51,7 @@ $sage-field-configs: ( /// Field coloring /// $sage-field-colors: ( - border: sage-color(grey, 300), + border: sage-color(grey, 150), default: sage-color(grey, 800), disabled: sage-color(grey, 500), disabled-background: sage-color(grey, 150), @@ -67,10 +67,10 @@ $sage-field-colors: ( /// $sage-radio-colors: ( checked: sage-color(grey, 900), - checked-disabled: sage-color(grey, 200), + checked-disabled: sage-color(grey, 150), checked-hover: sage-color(grey, 950), checked-inner: sage-color(white), - default: sage-color(grey, 300), + default: sage-color(grey, 150), disabled: sage-color(grey, 150), error: sage-color(red, 500), hover: sage-color(grey, 500), diff --git a/packages/sage-assets/lib/stylesheets/tokens/_border.scss b/packages/sage-assets/lib/stylesheets/tokens/_border.scss index 401a0ef3c7..85d8fd6eb9 100644 --- a/packages/sage-assets/lib/stylesheets/tokens/_border.scss +++ b/packages/sage-assets/lib/stylesheets/tokens/_border.scss @@ -9,9 +9,9 @@ /// Sage borders token /// $sage-borders: ( - default: rem(1px) solid sage-color(grey, 200), + default: rem(1px) solid sage-color(grey, 150), error: rem(1px) solid sage-color(red, 500), - interactive: rem(1px) solid sage-color(grey, 300), + interactive: rem(1px) solid sage-color(grey, 150), interactive-hover: rem(1px) solid sage-color(grey, 500), radius-small: rem(4px), radius: rem(8px), diff --git a/packages/sage-assets/lib/stylesheets/tokens/_border_interactive.scss b/packages/sage-assets/lib/stylesheets/tokens/_border_interactive.scss index 69c8e04c99..919ee2968c 100644 --- a/packages/sage-assets/lib/stylesheets/tokens/_border_interactive.scss +++ b/packages/sage-assets/lib/stylesheets/tokens/_border_interactive.scss @@ -9,13 +9,13 @@ /// Sage borders interactive token /// $sage-borders-interactive: ( - default: 0 0 0 1px sage-color(grey, 300), + default: 0 0 0 1px sage-color(grey, 150), hover: 0 0 0 1px sage-color(grey, 500), focus: 0 0 0 4px sage-color(primary, 200), selected: 0 0 0 4px sage-color(grey, 900), error: 0 0 0 1px sage-color(red, 500), error-focus: 0 0 0 4px sage-color(red, 500), - disabled: 0 0 0 1px sage-color(grey, 200), + disabled: 0 0 0 1px sage-color(grey, 150), ); /// From fbef081acd6350df3b3ac37b3071d1f8ad4b6776 Mon Sep 17 00:00:00 2001 From: Quinton Jason Date: Mon, 26 Aug 2024 16:50:01 -0500 Subject: [PATCH 23/31] Revert "fix: update grey color token to lower greys" This reverts commit 69f8706fc389e07b36e121f830859a87e3f1f9c7. --- .../sage-frontend/stylesheets/docs/_grid.scss | 2 +- .../stylesheets/docs/_rouge_theme.scss | 2 +- .../sage-frontend/stylesheets/docs/_specs.scss | 4 ++-- .../sage-frontend/stylesheets/docs/_text.scss | 2 +- .../lib/stylesheets/components/_alert.scss | 4 ++-- .../lib/stylesheets/components/_assistant.scss | 4 ++-- .../lib/stylesheets/components/_avatar.scss | 4 ++-- .../lib/stylesheets/components/_banner.scss | 2 +- .../lib/stylesheets/components/_button.scss | 16 ++++++++-------- .../lib/stylesheets/components/_card.scss | 4 ++-- .../stylesheets/components/_catalog_item.scss | 2 +- .../lib/stylesheets/components/_checkbox.scss | 4 ++-- .../lib/stylesheets/components/_choice.scss | 2 +- .../lib/stylesheets/components/_copy_text.scss | 2 +- .../lib/stylesheets/components/_data_card.scss | 4 ++-- .../lib/stylesheets/components/_divider.scss | 2 +- .../lib/stylesheets/components/_dropdown.scss | 8 ++++---- .../stylesheets/components/_expandable_card.scss | 2 +- .../lib/stylesheets/components/_hint.scss | 2 +- .../lib/stylesheets/components/_indicator.scss | 2 +- .../lib/stylesheets/components/_input_group.scss | 2 +- .../lib/stylesheets/components/_meter.scss | 2 +- .../lib/stylesheets/components/_nav.scss | 6 +++--- .../stylesheets/components/_page_heading.scss | 2 +- .../lib/stylesheets/components/_pagination.scss | 2 +- .../lib/stylesheets/components/_panel.scss | 2 +- .../stylesheets/components/_panel_controls.scss | 2 +- .../stylesheets/components/_progress_bar.scss | 2 +- .../lib/stylesheets/components/_search.scss | 2 +- .../lib/stylesheets/components/_sortable.scss | 4 ++-- .../lib/stylesheets/components/_switch.scss | 6 +++--- .../lib/stylesheets/components/_tab.scss | 4 ++-- .../lib/stylesheets/components/_table.scss | 2 +- .../lib/stylesheets/components/_tabs.scss | 4 ++-- .../lib/stylesheets/components/_tag.scss | 4 ++-- .../lib/stylesheets/core/_variables.scss | 6 +++--- .../lib/stylesheets/tokens/_border.scss | 4 ++-- .../stylesheets/tokens/_border_interactive.scss | 4 ++-- packages/sage-react/lib/Divider/Divider.jsx | 2 +- 39 files changed, 68 insertions(+), 68 deletions(-) diff --git a/docs/lib/sage-frontend/stylesheets/docs/_grid.scss b/docs/lib/sage-frontend/stylesheets/docs/_grid.scss index bdd18a82ce..64472af66b 100644 --- a/docs/lib/sage-frontend/stylesheets/docs/_grid.scss +++ b/docs/lib/sage-frontend/stylesheets/docs/_grid.scss @@ -9,7 +9,7 @@ margin-bottom: sage-spacing(md); padding: sage-spacing(xs) sage-spacing(md); text-align: center; - background: sage-color(grey, 150); + background: sage-color(grey, 200); border-radius: sage-border(radius); [class*="sage-col--align-"] & { diff --git a/docs/lib/sage-frontend/stylesheets/docs/_rouge_theme.scss b/docs/lib/sage-frontend/stylesheets/docs/_rouge_theme.scss index 34719f30ce..c247ac9c06 100644 --- a/docs/lib/sage-frontend/stylesheets/docs/_rouge_theme.scss +++ b/docs/lib/sage-frontend/stylesheets/docs/_rouge_theme.scss @@ -1,5 +1,5 @@ // background -$-color-1: sage-color(grey, 150); +$-color-1: sage-color(grey, 200); // Whitespace $-color-24: sage-color(grey, 700); // Name entity diff --git a/docs/lib/sage-frontend/stylesheets/docs/_specs.scss b/docs/lib/sage-frontend/stylesheets/docs/_specs.scss index df08e1ad7a..37bf5a3dbf 100644 --- a/docs/lib/sage-frontend/stylesheets/docs/_specs.scss +++ b/docs/lib/sage-frontend/stylesheets/docs/_specs.scss @@ -8,14 +8,14 @@ th { padding: 4px; color: sage-color(grey, 700); - border-bottom: 1px solid sage-color(grey, 150); + border-bottom: 1px solid sage-color(grey, 300); } td { padding: 4px; font-size: sage-font-size(body-xs); vertical-align: middle; - border-bottom: 1px solid sage-color(grey, 150); + border-bottom: 1px solid sage-color(grey, 200); } tfoot td { diff --git a/docs/lib/sage-frontend/stylesheets/docs/_text.scss b/docs/lib/sage-frontend/stylesheets/docs/_text.scss index 86c16f80d4..b0aa73ae62 100644 --- a/docs/lib/sage-frontend/stylesheets/docs/_text.scss +++ b/docs/lib/sage-frontend/stylesheets/docs/_text.scss @@ -8,7 +8,7 @@ code { display: inline-block; padding: 0 sage-spacing(2xs); font-size: 0.9em; - background-color: sage-color(grey, 150); + background-color: sage-color(grey, 200); } pre { diff --git a/packages/sage-assets/lib/stylesheets/components/_alert.scss b/packages/sage-assets/lib/stylesheets/components/_alert.scss index bc386ee891..29984678f3 100644 --- a/packages/sage-assets/lib/stylesheets/components/_alert.scss +++ b/packages/sage-assets/lib/stylesheets/components/_alert.scss @@ -9,8 +9,8 @@ // `_button.scss`, `sage_alert.rb`, `_sage_alert.html.erb`, and `Alert.jsx` // $-alert-background-colors: ( - default: sage-color(grey, 150), - draft: sage-color(grey, 150), + default: sage-color(grey, 200), + draft: sage-color(grey, 200), info: sage-color(primary, 100), published: sage-color(sage, 100), success: sage-color(sage, 100), diff --git a/packages/sage-assets/lib/stylesheets/components/_assistant.scss b/packages/sage-assets/lib/stylesheets/components/_assistant.scss index e6be13ea5a..a7f34a78b4 100644 --- a/packages/sage-assets/lib/stylesheets/components/_assistant.scss +++ b/packages/sage-assets/lib/stylesheets/components/_assistant.scss @@ -8,9 +8,9 @@ $-assistant-height: $sage-assistant-height; $-assistant-branding-height: rem(20px); $-assistant-search-height: rem(40px); -$-assistant-search-bg-color: sage-color(grey, 150); +$-assistant-search-bg-color: sage-color(grey, 200); $-assistant-search-bg-opacity: 0.1; -$-assistant-search-placeholder-color: sage-color(grey, 150); +$-assistant-search-placeholder-color: sage-color(grey, 300); $-assistant-search-placeholder-transition: color 0.15s ease-in-out, opacity 0.15s ease-in-out; diff --git a/packages/sage-assets/lib/stylesheets/components/_avatar.scss b/packages/sage-assets/lib/stylesheets/components/_avatar.scss index c11dc7e352..a8dc43bf7e 100644 --- a/packages/sage-assets/lib/stylesheets/components/_avatar.scss +++ b/packages/sage-assets/lib/stylesheets/components/_avatar.scss @@ -10,11 +10,11 @@ $-avatar-max-size: rem(128px); $-avatar-ring-colors: ( charcoal: ( main: sage-color(grey, 950), - bg: sage-color(grey, 150) + bg: sage-color(grey, 200) ), grey: ( main: sage-color(grey, 950), - bg: sage-color(grey, 150) + bg: sage-color(grey, 200) ), purple: ( main: sage-color(purple, 600), diff --git a/packages/sage-assets/lib/stylesheets/components/_banner.scss b/packages/sage-assets/lib/stylesheets/components/_banner.scss index 921b11abc9..bc052abb89 100644 --- a/packages/sage-assets/lib/stylesheets/components/_banner.scss +++ b/packages/sage-assets/lib/stylesheets/components/_banner.scss @@ -14,7 +14,7 @@ $-banner-colors: ( icon: "flag", ), secondary: ( - background: sage-color(grey, 150), + background: sage-color(grey, 200), text: sage-color(grey, 950), text-hover: sage-color(grey, 800), icon: "info-circle", diff --git a/packages/sage-assets/lib/stylesheets/components/_button.scss b/packages/sage-assets/lib/stylesheets/components/_button.scss index 73ed3dd5ac..b4ae3912d4 100644 --- a/packages/sage-assets/lib/stylesheets/components/_button.scss +++ b/packages/sage-assets/lib/stylesheets/components/_button.scss @@ -64,8 +64,8 @@ $-btn-base-styles: ( ), disabled: ( color: sage-color(grey, 600), - background-color: sage-color(grey, 150), - border-color: sage-color(grey, 150), + background-color: sage-color(grey, 200), + border-color: sage-color(grey, 200), ) ), secondary: ( @@ -149,8 +149,8 @@ $-btn-subtle-styles: ( // NOTE: the following colors should be kept in sync // with the colors in `_alert.scss` $-alert-close-btn-background-colors: ( - default: sage-color(grey, 150), - draft: sage-color(grey, 150), + default: sage-color(grey, 300), + draft: sage-color(grey, 300), info: sage-color(primary, 200), published: sage-color(sage, 200), success: sage-color(sage, 200), @@ -317,7 +317,7 @@ $-btn-loading-min-height: rem(36px); bottom: rem(1px); height: rem(38px); background-color: sage-color(white); - box-shadow: rem(-1px) 0 0 0 sage-color(grey, 150); + box-shadow: rem(-1px) 0 0 0 sage-color(grey, 300); border-color: transparent; @include sage-focus-outline--update-color(transparent); @@ -472,7 +472,7 @@ $-btn-loading-min-height: rem(36px); } &:hover { - background-color: sage-color(grey, 150); + background-color: sage-color(grey, 200); } &.sage-btn--selected { @@ -612,7 +612,7 @@ a.sage-btn { &[aria-disabled="true"] { color: sage-color(grey, 600); background-color: sage-color(white); - border-color: sage-color(grey, 150); + border-color: sage-color(grey, 200); } } @@ -860,5 +860,5 @@ a.sage-btn { .sage-btn-group--border-top { padding-top: sage-spacing(lg); - border-top: 1px solid sage-color(grey, 150); + border-top: 1px solid sage-color(grey, 300); } diff --git a/packages/sage-assets/lib/stylesheets/components/_card.scss b/packages/sage-assets/lib/stylesheets/components/_card.scss index 995a536d2d..60ffb9bd64 100644 --- a/packages/sage-assets/lib/stylesheets/components/_card.scss +++ b/packages/sage-assets/lib/stylesheets/components/_card.scss @@ -26,7 +26,7 @@ $-sage-card-background: transparent; border-color: sage-color(white); @include sage-dashed-border( $border-radius: sage-border(radius), - $color: sage-color(grey, 150), + $color: sage-color(grey, 300), ); } @@ -103,7 +103,7 @@ $-sage-card-background: transparent; top: 50%; width: 100%; height: 1px; - background: sage-color(grey, 150); + background: sage-color(grey, 200); } &::after { content: attr(data-divider-label); diff --git a/packages/sage-assets/lib/stylesheets/components/_catalog_item.scss b/packages/sage-assets/lib/stylesheets/components/_catalog_item.scss index af07f3ddef..405c7f8835 100644 --- a/packages/sage-assets/lib/stylesheets/components/_catalog_item.scss +++ b/packages/sage-assets/lib/stylesheets/components/_catalog_item.scss @@ -94,7 +94,7 @@ $-catalogue-item-image-height-mobile: rem(120px); grid-area: img; overflow: hidden; min-height: $-catalogue-item-image-height-min; - background: sage-color(grey, 150); + background: sage-color(grey, 200); border-radius: sage-border(radius); border: sage-border(); diff --git a/packages/sage-assets/lib/stylesheets/components/_checkbox.scss b/packages/sage-assets/lib/stylesheets/components/_checkbox.scss index 8440012d19..02580fe76c 100644 --- a/packages/sage-assets/lib/stylesheets/components/_checkbox.scss +++ b/packages/sage-assets/lib/stylesheets/components/_checkbox.scss @@ -8,11 +8,11 @@ // Colors // $-checkbox-color-default: sage-color(grey, 500); -$-checkbox-color-default-border: sage-color(grey, 150); +$-checkbox-color-default-border: sage-color(grey, 300); $-checkbox-color-checked: sage-color(grey, 900); $-checkbox-color-checked-hover: sage-color(grey, 950); $-checkbox-color-disabled: sage-color(grey, 150); -$-checkbox-color-disabled-border: sage-color(grey, 150); +$-checkbox-color-disabled-border: sage-color(grey, 200); $-checkbox-color-disabled-checked: sage-color(grey, 600); $-checkbox-color-error: sage-color(red, 500); diff --git a/packages/sage-assets/lib/stylesheets/components/_choice.scss b/packages/sage-assets/lib/stylesheets/components/_choice.scss index aa5c687785..9fb8c59b50 100644 --- a/packages/sage-assets/lib/stylesheets/components/_choice.scss +++ b/packages/sage-assets/lib/stylesheets/components/_choice.scss @@ -87,7 +87,7 @@ $-choice-radio-color-checked-inner: map-get($sage-radio-colors, checked-inner); pointer-events: none; &::before { - background-color: sage-color(grey, 150); + background-color: sage-color(grey, 200); } &:hover::before { diff --git a/packages/sage-assets/lib/stylesheets/components/_copy_text.scss b/packages/sage-assets/lib/stylesheets/components/_copy_text.scss index a156816900..7397ea8a29 100644 --- a/packages/sage-assets/lib/stylesheets/components/_copy_text.scss +++ b/packages/sage-assets/lib/stylesheets/components/_copy_text.scss @@ -5,7 +5,7 @@ //// -$-copy-text-border: 1px solid sage-color(grey, 150); +$-copy-text-border: 1px solid sage-color(grey, 300); $-copy-text-border-focus-color: sage-color(purple, 300); $-copy-text-border-hover-color: sage-color(grey, 500); $-copy-text-color: sage-color(grey, 900); diff --git a/packages/sage-assets/lib/stylesheets/components/_data_card.scss b/packages/sage-assets/lib/stylesheets/components/_data_card.scss index ef81566f3e..718233514a 100644 --- a/packages/sage-assets/lib/stylesheets/components/_data_card.scss +++ b/packages/sage-assets/lib/stylesheets/components/_data_card.scss @@ -7,7 +7,7 @@ $-data-card-colors: ( default: ( - border-color: sage-color(grey, 150), + border-color: sage-color(grey, 300), text-color: sage-color(grey, 900), ), danger: ( @@ -121,7 +121,7 @@ $-data-card-padding: sage-spacing(xs); .sage-data-card-scroll-container &:not(:last-child) { padding-right: sage-spacing(md); - border-right: 1px solid sage-color(grey, 150); + border-right: 1px solid sage-color(grey, 300); } .sage-data-card-scroll-container &:not(:first-child) { diff --git a/packages/sage-assets/lib/stylesheets/components/_divider.scss b/packages/sage-assets/lib/stylesheets/components/_divider.scss index 54e6b35fb2..4b53ae54df 100644 --- a/packages/sage-assets/lib/stylesheets/components/_divider.scss +++ b/packages/sage-assets/lib/stylesheets/components/_divider.scss @@ -9,7 +9,7 @@ height: rem(1px); width: 100%; margin: 0; - background: var(--sage-divider-background-color, sage-color(grey, 150)); + background: var(--sage-divider-background-color, sage-color(grey, 200)); border: 0; &--vertical { diff --git a/packages/sage-assets/lib/stylesheets/components/_dropdown.scss b/packages/sage-assets/lib/stylesheets/components/_dropdown.scss index c362d9c023..66324a5acf 100644 --- a/packages/sage-assets/lib/stylesheets/components/_dropdown.scss +++ b/packages/sage-assets/lib/stylesheets/components/_dropdown.scss @@ -134,13 +134,13 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs); .sage-dropdown__item--border-before { padding-top: sage-spacing(xs); margin-top: sage-spacing(xs); - border-top: 1px solid sage-color(grey, 150); + border-top: 1px solid sage-color(grey, 200); } .sage-dropdown__item--border-after { padding-bottom: sage-spacing(xs); margin-bottom: sage-spacing(xs); - border-bottom: 1px solid sage-color(grey, 150); + border-bottom: 1px solid sage-color(grey, 200); } .sage-dropdown__item--disabled { @@ -188,7 +188,7 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs); &:hover { - background-color: sage-color(grey, 150); + background-color: sage-color(grey, 200); } &:focus-within { @@ -253,7 +253,7 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs); &:hover { color: sage-color(grey, 900); - background-color: sage-color(grey, 150); + background-color: sage-color(grey, 200); } } diff --git a/packages/sage-assets/lib/stylesheets/components/_expandable_card.scss b/packages/sage-assets/lib/stylesheets/components/_expandable_card.scss index 7160b51502..754f3ac421 100644 --- a/packages/sage-assets/lib/stylesheets/components/_expandable_card.scss +++ b/packages/sage-assets/lib/stylesheets/components/_expandable_card.scss @@ -6,7 +6,7 @@ $-expandable-card-bg-color: sage-color(white); -$-expandable-card-border-color: sage-color(grey, 150); +$-expandable-card-border-color: sage-color(grey, 300); $-expandable-card-border-radius: sage-border(radius); $-expandable-card-padding: sage-spacing(sm); $-expandable-card-padding-xs: sage-spacing(xs); diff --git a/packages/sage-assets/lib/stylesheets/components/_hint.scss b/packages/sage-assets/lib/stylesheets/components/_hint.scss index ed0d1b0bc4..59b8475393 100644 --- a/packages/sage-assets/lib/stylesheets/components/_hint.scss +++ b/packages/sage-assets/lib/stylesheets/components/_hint.scss @@ -6,7 +6,7 @@ // Colors $-hint-text-color: sage-color(grey, 900); -$-hint-background-color: sage-color(grey, 150); +$-hint-background-color: sage-color(grey, 200); .sage-hint { display: flex; diff --git a/packages/sage-assets/lib/stylesheets/components/_indicator.scss b/packages/sage-assets/lib/stylesheets/components/_indicator.scss index 58387a42d7..b2dbc95076 100644 --- a/packages/sage-assets/lib/stylesheets/components/_indicator.scss +++ b/packages/sage-assets/lib/stylesheets/components/_indicator.scss @@ -20,7 +20,7 @@ $-indicator-size: rem(6px); border-radius: sage-border(radius-round); &:not(.sage-indicator--current) { - background-color: sage-color(grey, 150); + background-color: sage-color(grey, 300); } &:not(:last-child) { diff --git a/packages/sage-assets/lib/stylesheets/components/_input_group.scss b/packages/sage-assets/lib/stylesheets/components/_input_group.scss index 112ec78b3d..80098d068b 100644 --- a/packages/sage-assets/lib/stylesheets/components/_input_group.scss +++ b/packages/sage-assets/lib/stylesheets/components/_input_group.scss @@ -26,7 +26,7 @@ $-input-group-pw-field-button-color-text-hover: sage-color(black); } .sage-input-group:focus-within & { - background-color: sage-color(grey, 150); + background-color: sage-color(grey, 200); opacity: 1; } diff --git a/packages/sage-assets/lib/stylesheets/components/_meter.scss b/packages/sage-assets/lib/stylesheets/components/_meter.scss index 557e109ae1..372b4ea5c7 100644 --- a/packages/sage-assets/lib/stylesheets/components/_meter.scss +++ b/packages/sage-assets/lib/stylesheets/components/_meter.scss @@ -6,7 +6,7 @@ $-meter-bar-height: rem(4px); -$-meter-color-bg: sage-color(grey, 150); +$-meter-color-bg: sage-color(grey, 200); $-meter-bar-low: rgba(sage-color(red, 950), 0.9); $-meter-bar-med: rgba(sage-color(orange), 0.9); $-meter-bar-success: rgba(sage-color(sage, 200), 0.9); diff --git a/packages/sage-assets/lib/stylesheets/components/_nav.scss b/packages/sage-assets/lib/stylesheets/components/_nav.scss index 0eb871b478..02d7d49b71 100644 --- a/packages/sage-assets/lib/stylesheets/components/_nav.scss +++ b/packages/sage-assets/lib/stylesheets/components/_nav.scss @@ -6,8 +6,8 @@ $-nav-color-text: sage-color(grey, 800); $-nav-color-focus: sage-color(grey, 500); -$-nav-color-background: sage-color(grey, 150); -$-nav-color-background-hover: sage-color(grey, 150); +$-nav-color-background: sage-color(grey, 200); +$-nav-color-background-hover: sage-color(grey, 200); $-nav-icon-size: rem(16px); $-nav-icon-spacing: rem(8px); $-nav-subitem-border-width: rem(2px); @@ -117,5 +117,5 @@ $-nav-subitem-border-width: rem(2px); .sage-nav__list--sub-with-icon { margin-left: calc((#{sage-spacing(sm)} + (#{$-nav-icon-size} / 2)) - (#{$-nav-subitem-border-width} / 2) - (#{$-nav-icon-spacing} / 2)); padding-left: sage-spacing(sm); - border-left: $-nav-subitem-border-width solid sage-color(grey, 150); + border-left: $-nav-subitem-border-width solid sage-color(grey, 300); } diff --git a/packages/sage-assets/lib/stylesheets/components/_page_heading.scss b/packages/sage-assets/lib/stylesheets/components/_page_heading.scss index 02ef09cf7d..2042aa956c 100644 --- a/packages/sage-assets/lib/stylesheets/components/_page_heading.scss +++ b/packages/sage-assets/lib/stylesheets/components/_page_heading.scss @@ -84,7 +84,7 @@ $-page-heading-image-height-mobile: rem(120px); grid-area: image; overflow: hidden; min-height: $-page-heading-image-height-min; - background: sage-color(grey, 150); + background: sage-color(grey, 300); border-radius: sage-border(radius); border: sage-border(); diff --git a/packages/sage-assets/lib/stylesheets/components/_pagination.scss b/packages/sage-assets/lib/stylesheets/components/_pagination.scss index 81c3d937ac..695cc76ca9 100644 --- a/packages/sage-assets/lib/stylesheets/components/_pagination.scss +++ b/packages/sage-assets/lib/stylesheets/components/_pagination.scss @@ -11,7 +11,7 @@ $-pagination-radius: sage-border(radius-round); $-pagination-text-color: sage-color(grey, 900); $-pagination-text-color-disabled: sage-color(grey, 600); $-pagination-bg-color-current: sage-color(grey, 150); -$-pagination-bg-color-hover: sage-color(grey, 150); +$-pagination-bg-color-hover: sage-color(grey, 200); $-pagination-focus-ring-color: sage-color(purple, 300); diff --git a/packages/sage-assets/lib/stylesheets/components/_panel.scss b/packages/sage-assets/lib/stylesheets/components/_panel.scss index 72be2f8200..4bfee719b2 100644 --- a/packages/sage-assets/lib/stylesheets/components/_panel.scss +++ b/packages/sage-assets/lib/stylesheets/components/_panel.scss @@ -45,7 +45,7 @@ top: 50%; width: 100%; height: 1px; - background: sage-color(grey, 150); + background: sage-color(grey, 200); } &::after { diff --git a/packages/sage-assets/lib/stylesheets/components/_panel_controls.scss b/packages/sage-assets/lib/stylesheets/components/_panel_controls.scss index 39122a46a1..d4cf57bf16 100644 --- a/packages/sage-assets/lib/stylesheets/components/_panel_controls.scss +++ b/packages/sage-assets/lib/stylesheets/components/_panel_controls.scss @@ -19,7 +19,7 @@ height: 0; margin-right: -1 * sage-spacing(panel); margin-left: -1 * sage-spacing(panel); - border-top: 1px solid sage-color(grey, 150); + border-top: 1px solid sage-color(grey, 300); } .sage-search { diff --git a/packages/sage-assets/lib/stylesheets/components/_progress_bar.scss b/packages/sage-assets/lib/stylesheets/components/_progress_bar.scss index 7275e3c395..4f7b972164 100644 --- a/packages/sage-assets/lib/stylesheets/components/_progress_bar.scss +++ b/packages/sage-assets/lib/stylesheets/components/_progress_bar.scss @@ -34,7 +34,7 @@ $-progress-bar-height: sage-spacing(xs); height: $-progress-bar-height; width: 100%; border-radius: sage-border(radius-small); - background-color: var(--sage-progress-bar-background-color, sage-color(grey, 150)); + background-color: var(--sage-progress-bar-background-color, sage-color(grey, 200)); .sage-modal__header & { border-radius: 0; diff --git a/packages/sage-assets/lib/stylesheets/components/_search.scss b/packages/sage-assets/lib/stylesheets/components/_search.scss index 13882a99e0..de5ba504d4 100644 --- a/packages/sage-assets/lib/stylesheets/components/_search.scss +++ b/packages/sage-assets/lib/stylesheets/components/_search.scss @@ -29,7 +29,7 @@ $-search-icon: "::before"; } .sage-search:not(.sage-search--contained) & { - border-bottom: 1px solid sage-color(grey, 150); + border-bottom: 1px solid sage-color(grey, 300); &:hover { background-color: sage-color(grey, 100); diff --git a/packages/sage-assets/lib/stylesheets/components/_sortable.scss b/packages/sage-assets/lib/stylesheets/components/_sortable.scss index b886010638..5455b17340 100644 --- a/packages/sage-assets/lib/stylesheets/components/_sortable.scss +++ b/packages/sage-assets/lib/stylesheets/components/_sortable.scss @@ -75,7 +75,7 @@ $-sortable-image-height: rem(48px); } &.sage-sortable__item--ghost { - background: sage-color(grey, 150); + background: sage-color(grey, 200); } } @@ -84,7 +84,7 @@ $-sortable-image-height: rem(48px); overflow: hidden; height: $-sortable-image-height; width: $-sortable-image-width; - background: sage-color(grey, 150); + background: sage-color(grey, 200); border-radius: sage-border(radius); border: sage-border(); diff --git a/packages/sage-assets/lib/stylesheets/components/_switch.scss b/packages/sage-assets/lib/stylesheets/components/_switch.scss index 1b9660c9dc..0a0517a861 100644 --- a/packages/sage-assets/lib/stylesheets/components/_switch.scss +++ b/packages/sage-assets/lib/stylesheets/components/_switch.scss @@ -6,14 +6,14 @@ // Colors -$-switch-color-default: sage-color(grey, 150); +$-switch-color-default: sage-color(grey, 300); $-switch-color-default-hover: sage-color(grey, 500); $-switch-color-default-text: sage-color(grey, 800); $-switch-color-checked: sage-color(grey, 900); $-switch-color-checked-hover: sage-color(grey, 950); -$-switch-color-disabled: sage-color(grey, 150); +$-switch-color-disabled: sage-color(grey, 200); $-switch-color-disabled-text: sage-color(grey, 800); -$-switch-color-disabled-checked: sage-color(grey, 150); +$-switch-color-disabled-checked: sage-color(grey, 200); $-switch-color-disabled-checked-text: sage-color(grey, 600); $-switch-color-error: sage-color(red, 500); $-switch-focus-outline-error-color: sage-color(red, 300); diff --git a/packages/sage-assets/lib/stylesheets/components/_tab.scss b/packages/sage-assets/lib/stylesheets/components/_tab.scss index b49266b32e..5bcbc3fc00 100644 --- a/packages/sage-assets/lib/stylesheets/components/_tab.scss +++ b/packages/sage-assets/lib/stylesheets/components/_tab.scss @@ -28,7 +28,7 @@ $-tab-color-disabled: map-get($sage-tab-colors, disabled); .sage-tabs--filter & { padding: rem(6px) rem(14px); - background-color: sage-color(grey, 150); + background-color: sage-color(grey, 200); border-radius: sage-border(radius-x-large); @extend %t-sage-body-small-semi; } @@ -38,7 +38,7 @@ $-tab-color-disabled: map-get($sage-tab-colors, disabled); &:hover { color: $-tab-color-active; .sage-tabs--filter & { - background: sage-color(grey, 150); + background: sage-color(grey, 300); } } diff --git a/packages/sage-assets/lib/stylesheets/components/_table.scss b/packages/sage-assets/lib/stylesheets/components/_table.scss index 1be2309f32..436872272f 100644 --- a/packages/sage-assets/lib/stylesheets/components/_table.scss +++ b/packages/sage-assets/lib/stylesheets/components/_table.scss @@ -5,7 +5,7 @@ //// // Borders and sizing -$-table-header-border: rem(1px) solid sage-color(grey, 150); +$-table-header-border: rem(1px) solid sage-color(grey, 200); $-table-cell-padding-xs: sage-spacing(xs); $-table-cell-padding-card: sage-spacing(); $-table-cell-padding-panel: sage-spacing(); diff --git a/packages/sage-assets/lib/stylesheets/components/_tabs.scss b/packages/sage-assets/lib/stylesheets/components/_tabs.scss index d58c13a854..2b250ce8a1 100644 --- a/packages/sage-assets/lib/stylesheets/components/_tabs.scss +++ b/packages/sage-assets/lib/stylesheets/components/_tabs.scss @@ -38,7 +38,7 @@ padding-top: sage-spacing(sm); padding-left: sage-spacing(xs); padding-right: sage-spacing(xs); - background-color: sage-color(grey, 150); + background-color: sage-color(grey, 200); } .sage-tabs--layout-stacked { @@ -52,7 +52,7 @@ .sage-tabs-divider, .sage-tabs-container > hr { margin: 0; - border-top: 1px solid sage-color(grey, 150); + border-top: 1px solid sage-color(grey, 300); } .sage-tabs-pane { diff --git a/packages/sage-assets/lib/stylesheets/components/_tag.scss b/packages/sage-assets/lib/stylesheets/components/_tag.scss index 27fd9bcd8b..8d597b22ba 100644 --- a/packages/sage-assets/lib/stylesheets/components/_tag.scss +++ b/packages/sage-assets/lib/stylesheets/components/_tag.scss @@ -15,11 +15,11 @@ $-tag-button-icon-mobile-size: rem(24px); display: inline-flex; align-items: center; padding: sage-spacing(3xs) sage-spacing(xs) sage-spacing(3xs) sage-spacing(xs); - background-color: sage-color(grey, 150); + background-color: sage-color(grey, 200); border-radius: sage-border(radius-x-large); &:hover { - background-color: sage-color(grey, 150); + background-color: sage-color(grey, 300); } pds-icon { diff --git a/packages/sage-assets/lib/stylesheets/core/_variables.scss b/packages/sage-assets/lib/stylesheets/core/_variables.scss index 6e6a96f6c3..106b3c3d77 100644 --- a/packages/sage-assets/lib/stylesheets/core/_variables.scss +++ b/packages/sage-assets/lib/stylesheets/core/_variables.scss @@ -51,7 +51,7 @@ $sage-field-configs: ( /// Field coloring /// $sage-field-colors: ( - border: sage-color(grey, 150), + border: sage-color(grey, 300), default: sage-color(grey, 800), disabled: sage-color(grey, 500), disabled-background: sage-color(grey, 150), @@ -67,10 +67,10 @@ $sage-field-colors: ( /// $sage-radio-colors: ( checked: sage-color(grey, 900), - checked-disabled: sage-color(grey, 150), + checked-disabled: sage-color(grey, 200), checked-hover: sage-color(grey, 950), checked-inner: sage-color(white), - default: sage-color(grey, 150), + default: sage-color(grey, 300), disabled: sage-color(grey, 150), error: sage-color(red, 500), hover: sage-color(grey, 500), diff --git a/packages/sage-assets/lib/stylesheets/tokens/_border.scss b/packages/sage-assets/lib/stylesheets/tokens/_border.scss index 85d8fd6eb9..401a0ef3c7 100644 --- a/packages/sage-assets/lib/stylesheets/tokens/_border.scss +++ b/packages/sage-assets/lib/stylesheets/tokens/_border.scss @@ -9,9 +9,9 @@ /// Sage borders token /// $sage-borders: ( - default: rem(1px) solid sage-color(grey, 150), + default: rem(1px) solid sage-color(grey, 200), error: rem(1px) solid sage-color(red, 500), - interactive: rem(1px) solid sage-color(grey, 150), + interactive: rem(1px) solid sage-color(grey, 300), interactive-hover: rem(1px) solid sage-color(grey, 500), radius-small: rem(4px), radius: rem(8px), diff --git a/packages/sage-assets/lib/stylesheets/tokens/_border_interactive.scss b/packages/sage-assets/lib/stylesheets/tokens/_border_interactive.scss index 919ee2968c..69c8e04c99 100644 --- a/packages/sage-assets/lib/stylesheets/tokens/_border_interactive.scss +++ b/packages/sage-assets/lib/stylesheets/tokens/_border_interactive.scss @@ -9,13 +9,13 @@ /// Sage borders interactive token /// $sage-borders-interactive: ( - default: 0 0 0 1px sage-color(grey, 150), + default: 0 0 0 1px sage-color(grey, 300), hover: 0 0 0 1px sage-color(grey, 500), focus: 0 0 0 4px sage-color(primary, 200), selected: 0 0 0 4px sage-color(grey, 900), error: 0 0 0 1px sage-color(red, 500), error-focus: 0 0 0 4px sage-color(red, 500), - disabled: 0 0 0 1px sage-color(grey, 150), + disabled: 0 0 0 1px sage-color(grey, 200), ); /// diff --git a/packages/sage-react/lib/Divider/Divider.jsx b/packages/sage-react/lib/Divider/Divider.jsx index d02ce2a18a..58636fe14a 100644 --- a/packages/sage-react/lib/Divider/Divider.jsx +++ b/packages/sage-react/lib/Divider/Divider.jsx @@ -29,7 +29,7 @@ export const Divider = ({ }; Divider.defaultProps = { - color: SageTokens.COLOR_PALETTE.GREY_200, + color: SageTokens.COLOR_PALETTE.GREY_300, vertical: null, offset: null, }; From 33c2f43731c165ef468e093ad7a82a95baba66a7 Mon Sep 17 00:00:00 2001 From: Quinton Jason Date: Mon, 26 Aug 2024 19:40:29 -0500 Subject: [PATCH 24/31] fix: update grey color token to lower greys --- .../sage-frontend/stylesheets/docs/_grid.scss | 2 +- .../stylesheets/docs/_rouge_theme.scss | 2 +- .../sage-frontend/stylesheets/docs/_specs.scss | 4 ++-- .../sage-frontend/stylesheets/docs/_text.scss | 2 +- .../lib/stylesheets/components/_alert.scss | 4 ++-- .../lib/stylesheets/components/_assistant.scss | 4 ++-- .../lib/stylesheets/components/_avatar.scss | 4 ++-- .../lib/stylesheets/components/_banner.scss | 2 +- .../lib/stylesheets/components/_button.scss | 16 ++++++++-------- .../lib/stylesheets/components/_card.scss | 4 ++-- .../stylesheets/components/_catalog_item.scss | 2 +- .../lib/stylesheets/components/_checkbox.scss | 4 ++-- .../lib/stylesheets/components/_choice.scss | 2 +- .../lib/stylesheets/components/_copy_text.scss | 2 +- .../lib/stylesheets/components/_data_card.scss | 4 ++-- .../lib/stylesheets/components/_divider.scss | 2 +- .../lib/stylesheets/components/_dropdown.scss | 8 ++++---- .../stylesheets/components/_expandable_card.scss | 2 +- .../lib/stylesheets/components/_hint.scss | 2 +- .../lib/stylesheets/components/_indicator.scss | 2 +- .../lib/stylesheets/components/_input_group.scss | 2 +- .../lib/stylesheets/components/_meter.scss | 2 +- .../lib/stylesheets/components/_nav.scss | 6 +++--- .../stylesheets/components/_page_heading.scss | 2 +- .../lib/stylesheets/components/_pagination.scss | 2 +- .../lib/stylesheets/components/_panel.scss | 2 +- .../stylesheets/components/_panel_controls.scss | 2 +- .../stylesheets/components/_progress_bar.scss | 2 +- .../lib/stylesheets/components/_search.scss | 2 +- .../lib/stylesheets/components/_sortable.scss | 4 ++-- .../lib/stylesheets/components/_switch.scss | 6 +++--- .../lib/stylesheets/components/_tab.scss | 4 ++-- .../lib/stylesheets/components/_table.scss | 2 +- .../lib/stylesheets/components/_tabs.scss | 4 ++-- .../lib/stylesheets/components/_tag.scss | 4 ++-- .../lib/stylesheets/core/_variables.scss | 6 +++--- .../lib/stylesheets/tokens/_border.scss | 4 ++-- .../stylesheets/tokens/_border_interactive.scss | 4 ++-- packages/sage-react/lib/Divider/Divider.jsx | 2 +- 39 files changed, 68 insertions(+), 68 deletions(-) diff --git a/docs/lib/sage-frontend/stylesheets/docs/_grid.scss b/docs/lib/sage-frontend/stylesheets/docs/_grid.scss index 64472af66b..bdd18a82ce 100644 --- a/docs/lib/sage-frontend/stylesheets/docs/_grid.scss +++ b/docs/lib/sage-frontend/stylesheets/docs/_grid.scss @@ -9,7 +9,7 @@ margin-bottom: sage-spacing(md); padding: sage-spacing(xs) sage-spacing(md); text-align: center; - background: sage-color(grey, 200); + background: sage-color(grey, 150); border-radius: sage-border(radius); [class*="sage-col--align-"] & { diff --git a/docs/lib/sage-frontend/stylesheets/docs/_rouge_theme.scss b/docs/lib/sage-frontend/stylesheets/docs/_rouge_theme.scss index c247ac9c06..34719f30ce 100644 --- a/docs/lib/sage-frontend/stylesheets/docs/_rouge_theme.scss +++ b/docs/lib/sage-frontend/stylesheets/docs/_rouge_theme.scss @@ -1,5 +1,5 @@ // background -$-color-1: sage-color(grey, 200); +$-color-1: sage-color(grey, 150); // Whitespace $-color-24: sage-color(grey, 700); // Name entity diff --git a/docs/lib/sage-frontend/stylesheets/docs/_specs.scss b/docs/lib/sage-frontend/stylesheets/docs/_specs.scss index 37bf5a3dbf..089897f560 100644 --- a/docs/lib/sage-frontend/stylesheets/docs/_specs.scss +++ b/docs/lib/sage-frontend/stylesheets/docs/_specs.scss @@ -8,14 +8,14 @@ th { padding: 4px; color: sage-color(grey, 700); - border-bottom: 1px solid sage-color(grey, 300); + border-bottom: 1px solid sage-color(grey, 200); } td { padding: 4px; font-size: sage-font-size(body-xs); vertical-align: middle; - border-bottom: 1px solid sage-color(grey, 200); + border-bottom: 1px solid sage-color(grey, 150); } tfoot td { diff --git a/docs/lib/sage-frontend/stylesheets/docs/_text.scss b/docs/lib/sage-frontend/stylesheets/docs/_text.scss index b0aa73ae62..86c16f80d4 100644 --- a/docs/lib/sage-frontend/stylesheets/docs/_text.scss +++ b/docs/lib/sage-frontend/stylesheets/docs/_text.scss @@ -8,7 +8,7 @@ code { display: inline-block; padding: 0 sage-spacing(2xs); font-size: 0.9em; - background-color: sage-color(grey, 200); + background-color: sage-color(grey, 150); } pre { diff --git a/packages/sage-assets/lib/stylesheets/components/_alert.scss b/packages/sage-assets/lib/stylesheets/components/_alert.scss index 29984678f3..bc386ee891 100644 --- a/packages/sage-assets/lib/stylesheets/components/_alert.scss +++ b/packages/sage-assets/lib/stylesheets/components/_alert.scss @@ -9,8 +9,8 @@ // `_button.scss`, `sage_alert.rb`, `_sage_alert.html.erb`, and `Alert.jsx` // $-alert-background-colors: ( - default: sage-color(grey, 200), - draft: sage-color(grey, 200), + default: sage-color(grey, 150), + draft: sage-color(grey, 150), info: sage-color(primary, 100), published: sage-color(sage, 100), success: sage-color(sage, 100), diff --git a/packages/sage-assets/lib/stylesheets/components/_assistant.scss b/packages/sage-assets/lib/stylesheets/components/_assistant.scss index a7f34a78b4..8085e7631c 100644 --- a/packages/sage-assets/lib/stylesheets/components/_assistant.scss +++ b/packages/sage-assets/lib/stylesheets/components/_assistant.scss @@ -8,9 +8,9 @@ $-assistant-height: $sage-assistant-height; $-assistant-branding-height: rem(20px); $-assistant-search-height: rem(40px); -$-assistant-search-bg-color: sage-color(grey, 200); +$-assistant-search-bg-color: sage-color(grey, 150); $-assistant-search-bg-opacity: 0.1; -$-assistant-search-placeholder-color: sage-color(grey, 300); +$-assistant-search-placeholder-color: sage-color(grey, 200); $-assistant-search-placeholder-transition: color 0.15s ease-in-out, opacity 0.15s ease-in-out; diff --git a/packages/sage-assets/lib/stylesheets/components/_avatar.scss b/packages/sage-assets/lib/stylesheets/components/_avatar.scss index a8dc43bf7e..c11dc7e352 100644 --- a/packages/sage-assets/lib/stylesheets/components/_avatar.scss +++ b/packages/sage-assets/lib/stylesheets/components/_avatar.scss @@ -10,11 +10,11 @@ $-avatar-max-size: rem(128px); $-avatar-ring-colors: ( charcoal: ( main: sage-color(grey, 950), - bg: sage-color(grey, 200) + bg: sage-color(grey, 150) ), grey: ( main: sage-color(grey, 950), - bg: sage-color(grey, 200) + bg: sage-color(grey, 150) ), purple: ( main: sage-color(purple, 600), diff --git a/packages/sage-assets/lib/stylesheets/components/_banner.scss b/packages/sage-assets/lib/stylesheets/components/_banner.scss index bc052abb89..921b11abc9 100644 --- a/packages/sage-assets/lib/stylesheets/components/_banner.scss +++ b/packages/sage-assets/lib/stylesheets/components/_banner.scss @@ -14,7 +14,7 @@ $-banner-colors: ( icon: "flag", ), secondary: ( - background: sage-color(grey, 200), + background: sage-color(grey, 150), text: sage-color(grey, 950), text-hover: sage-color(grey, 800), icon: "info-circle", diff --git a/packages/sage-assets/lib/stylesheets/components/_button.scss b/packages/sage-assets/lib/stylesheets/components/_button.scss index b4ae3912d4..367f98a525 100644 --- a/packages/sage-assets/lib/stylesheets/components/_button.scss +++ b/packages/sage-assets/lib/stylesheets/components/_button.scss @@ -64,8 +64,8 @@ $-btn-base-styles: ( ), disabled: ( color: sage-color(grey, 600), - background-color: sage-color(grey, 200), - border-color: sage-color(grey, 200), + background-color: sage-color(grey, 150), + border-color: sage-color(grey, 150), ) ), secondary: ( @@ -149,8 +149,8 @@ $-btn-subtle-styles: ( // NOTE: the following colors should be kept in sync // with the colors in `_alert.scss` $-alert-close-btn-background-colors: ( - default: sage-color(grey, 300), - draft: sage-color(grey, 300), + default: sage-color(grey, 200), + draft: sage-color(grey, 200), info: sage-color(primary, 200), published: sage-color(sage, 200), success: sage-color(sage, 200), @@ -317,7 +317,7 @@ $-btn-loading-min-height: rem(36px); bottom: rem(1px); height: rem(38px); background-color: sage-color(white); - box-shadow: rem(-1px) 0 0 0 sage-color(grey, 300); + box-shadow: rem(-1px) 0 0 0 sage-color(grey, 200); border-color: transparent; @include sage-focus-outline--update-color(transparent); @@ -472,7 +472,7 @@ $-btn-loading-min-height: rem(36px); } &:hover { - background-color: sage-color(grey, 200); + background-color: sage-color(grey, 150); } &.sage-btn--selected { @@ -612,7 +612,7 @@ a.sage-btn { &[aria-disabled="true"] { color: sage-color(grey, 600); background-color: sage-color(white); - border-color: sage-color(grey, 200); + border-color: sage-color(grey, 150); } } @@ -860,5 +860,5 @@ a.sage-btn { .sage-btn-group--border-top { padding-top: sage-spacing(lg); - border-top: 1px solid sage-color(grey, 300); + border-top: 1px solid sage-color(grey, 200); } diff --git a/packages/sage-assets/lib/stylesheets/components/_card.scss b/packages/sage-assets/lib/stylesheets/components/_card.scss index 60ffb9bd64..20da94a417 100644 --- a/packages/sage-assets/lib/stylesheets/components/_card.scss +++ b/packages/sage-assets/lib/stylesheets/components/_card.scss @@ -26,7 +26,7 @@ $-sage-card-background: transparent; border-color: sage-color(white); @include sage-dashed-border( $border-radius: sage-border(radius), - $color: sage-color(grey, 300), + $color: sage-color(grey, 200), ); } @@ -103,7 +103,7 @@ $-sage-card-background: transparent; top: 50%; width: 100%; height: 1px; - background: sage-color(grey, 200); + background: sage-color(grey, 150); } &::after { content: attr(data-divider-label); diff --git a/packages/sage-assets/lib/stylesheets/components/_catalog_item.scss b/packages/sage-assets/lib/stylesheets/components/_catalog_item.scss index 405c7f8835..af07f3ddef 100644 --- a/packages/sage-assets/lib/stylesheets/components/_catalog_item.scss +++ b/packages/sage-assets/lib/stylesheets/components/_catalog_item.scss @@ -94,7 +94,7 @@ $-catalogue-item-image-height-mobile: rem(120px); grid-area: img; overflow: hidden; min-height: $-catalogue-item-image-height-min; - background: sage-color(grey, 200); + background: sage-color(grey, 150); border-radius: sage-border(radius); border: sage-border(); diff --git a/packages/sage-assets/lib/stylesheets/components/_checkbox.scss b/packages/sage-assets/lib/stylesheets/components/_checkbox.scss index 02580fe76c..79b4a82b09 100644 --- a/packages/sage-assets/lib/stylesheets/components/_checkbox.scss +++ b/packages/sage-assets/lib/stylesheets/components/_checkbox.scss @@ -8,11 +8,11 @@ // Colors // $-checkbox-color-default: sage-color(grey, 500); -$-checkbox-color-default-border: sage-color(grey, 300); +$-checkbox-color-default-border: sage-color(grey, 200); $-checkbox-color-checked: sage-color(grey, 900); $-checkbox-color-checked-hover: sage-color(grey, 950); $-checkbox-color-disabled: sage-color(grey, 150); -$-checkbox-color-disabled-border: sage-color(grey, 200); +$-checkbox-color-disabled-border: sage-color(grey, 150); $-checkbox-color-disabled-checked: sage-color(grey, 600); $-checkbox-color-error: sage-color(red, 500); diff --git a/packages/sage-assets/lib/stylesheets/components/_choice.scss b/packages/sage-assets/lib/stylesheets/components/_choice.scss index 9fb8c59b50..aa5c687785 100644 --- a/packages/sage-assets/lib/stylesheets/components/_choice.scss +++ b/packages/sage-assets/lib/stylesheets/components/_choice.scss @@ -87,7 +87,7 @@ $-choice-radio-color-checked-inner: map-get($sage-radio-colors, checked-inner); pointer-events: none; &::before { - background-color: sage-color(grey, 200); + background-color: sage-color(grey, 150); } &:hover::before { diff --git a/packages/sage-assets/lib/stylesheets/components/_copy_text.scss b/packages/sage-assets/lib/stylesheets/components/_copy_text.scss index 7397ea8a29..eb80fcc2f0 100644 --- a/packages/sage-assets/lib/stylesheets/components/_copy_text.scss +++ b/packages/sage-assets/lib/stylesheets/components/_copy_text.scss @@ -5,7 +5,7 @@ //// -$-copy-text-border: 1px solid sage-color(grey, 300); +$-copy-text-border: 1px solid sage-color(grey, 200); $-copy-text-border-focus-color: sage-color(purple, 300); $-copy-text-border-hover-color: sage-color(grey, 500); $-copy-text-color: sage-color(grey, 900); diff --git a/packages/sage-assets/lib/stylesheets/components/_data_card.scss b/packages/sage-assets/lib/stylesheets/components/_data_card.scss index 718233514a..379d1f6ede 100644 --- a/packages/sage-assets/lib/stylesheets/components/_data_card.scss +++ b/packages/sage-assets/lib/stylesheets/components/_data_card.scss @@ -7,7 +7,7 @@ $-data-card-colors: ( default: ( - border-color: sage-color(grey, 300), + border-color: sage-color(grey, 200), text-color: sage-color(grey, 900), ), danger: ( @@ -121,7 +121,7 @@ $-data-card-padding: sage-spacing(xs); .sage-data-card-scroll-container &:not(:last-child) { padding-right: sage-spacing(md); - border-right: 1px solid sage-color(grey, 300); + border-right: 1px solid sage-color(grey, 200); } .sage-data-card-scroll-container &:not(:first-child) { diff --git a/packages/sage-assets/lib/stylesheets/components/_divider.scss b/packages/sage-assets/lib/stylesheets/components/_divider.scss index 4b53ae54df..54e6b35fb2 100644 --- a/packages/sage-assets/lib/stylesheets/components/_divider.scss +++ b/packages/sage-assets/lib/stylesheets/components/_divider.scss @@ -9,7 +9,7 @@ height: rem(1px); width: 100%; margin: 0; - background: var(--sage-divider-background-color, sage-color(grey, 200)); + background: var(--sage-divider-background-color, sage-color(grey, 150)); border: 0; &--vertical { diff --git a/packages/sage-assets/lib/stylesheets/components/_dropdown.scss b/packages/sage-assets/lib/stylesheets/components/_dropdown.scss index 66324a5acf..c362d9c023 100644 --- a/packages/sage-assets/lib/stylesheets/components/_dropdown.scss +++ b/packages/sage-assets/lib/stylesheets/components/_dropdown.scss @@ -134,13 +134,13 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs); .sage-dropdown__item--border-before { padding-top: sage-spacing(xs); margin-top: sage-spacing(xs); - border-top: 1px solid sage-color(grey, 200); + border-top: 1px solid sage-color(grey, 150); } .sage-dropdown__item--border-after { padding-bottom: sage-spacing(xs); margin-bottom: sage-spacing(xs); - border-bottom: 1px solid sage-color(grey, 200); + border-bottom: 1px solid sage-color(grey, 150); } .sage-dropdown__item--disabled { @@ -188,7 +188,7 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs); &:hover { - background-color: sage-color(grey, 200); + background-color: sage-color(grey, 150); } &:focus-within { @@ -253,7 +253,7 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs); &:hover { color: sage-color(grey, 900); - background-color: sage-color(grey, 200); + background-color: sage-color(grey, 150); } } diff --git a/packages/sage-assets/lib/stylesheets/components/_expandable_card.scss b/packages/sage-assets/lib/stylesheets/components/_expandable_card.scss index 754f3ac421..d34fcf5ae7 100644 --- a/packages/sage-assets/lib/stylesheets/components/_expandable_card.scss +++ b/packages/sage-assets/lib/stylesheets/components/_expandable_card.scss @@ -6,7 +6,7 @@ $-expandable-card-bg-color: sage-color(white); -$-expandable-card-border-color: sage-color(grey, 300); +$-expandable-card-border-color: sage-color(grey, 200); $-expandable-card-border-radius: sage-border(radius); $-expandable-card-padding: sage-spacing(sm); $-expandable-card-padding-xs: sage-spacing(xs); diff --git a/packages/sage-assets/lib/stylesheets/components/_hint.scss b/packages/sage-assets/lib/stylesheets/components/_hint.scss index 59b8475393..ed0d1b0bc4 100644 --- a/packages/sage-assets/lib/stylesheets/components/_hint.scss +++ b/packages/sage-assets/lib/stylesheets/components/_hint.scss @@ -6,7 +6,7 @@ // Colors $-hint-text-color: sage-color(grey, 900); -$-hint-background-color: sage-color(grey, 200); +$-hint-background-color: sage-color(grey, 150); .sage-hint { display: flex; diff --git a/packages/sage-assets/lib/stylesheets/components/_indicator.scss b/packages/sage-assets/lib/stylesheets/components/_indicator.scss index b2dbc95076..d26ebacc14 100644 --- a/packages/sage-assets/lib/stylesheets/components/_indicator.scss +++ b/packages/sage-assets/lib/stylesheets/components/_indicator.scss @@ -20,7 +20,7 @@ $-indicator-size: rem(6px); border-radius: sage-border(radius-round); &:not(.sage-indicator--current) { - background-color: sage-color(grey, 300); + background-color: sage-color(grey, 200); } &:not(:last-child) { diff --git a/packages/sage-assets/lib/stylesheets/components/_input_group.scss b/packages/sage-assets/lib/stylesheets/components/_input_group.scss index 80098d068b..112ec78b3d 100644 --- a/packages/sage-assets/lib/stylesheets/components/_input_group.scss +++ b/packages/sage-assets/lib/stylesheets/components/_input_group.scss @@ -26,7 +26,7 @@ $-input-group-pw-field-button-color-text-hover: sage-color(black); } .sage-input-group:focus-within & { - background-color: sage-color(grey, 200); + background-color: sage-color(grey, 150); opacity: 1; } diff --git a/packages/sage-assets/lib/stylesheets/components/_meter.scss b/packages/sage-assets/lib/stylesheets/components/_meter.scss index 372b4ea5c7..557e109ae1 100644 --- a/packages/sage-assets/lib/stylesheets/components/_meter.scss +++ b/packages/sage-assets/lib/stylesheets/components/_meter.scss @@ -6,7 +6,7 @@ $-meter-bar-height: rem(4px); -$-meter-color-bg: sage-color(grey, 200); +$-meter-color-bg: sage-color(grey, 150); $-meter-bar-low: rgba(sage-color(red, 950), 0.9); $-meter-bar-med: rgba(sage-color(orange), 0.9); $-meter-bar-success: rgba(sage-color(sage, 200), 0.9); diff --git a/packages/sage-assets/lib/stylesheets/components/_nav.scss b/packages/sage-assets/lib/stylesheets/components/_nav.scss index 02d7d49b71..7f0cd64764 100644 --- a/packages/sage-assets/lib/stylesheets/components/_nav.scss +++ b/packages/sage-assets/lib/stylesheets/components/_nav.scss @@ -6,8 +6,8 @@ $-nav-color-text: sage-color(grey, 800); $-nav-color-focus: sage-color(grey, 500); -$-nav-color-background: sage-color(grey, 200); -$-nav-color-background-hover: sage-color(grey, 200); +$-nav-color-background: sage-color(grey, 150); +$-nav-color-background-hover: sage-color(grey, 150); $-nav-icon-size: rem(16px); $-nav-icon-spacing: rem(8px); $-nav-subitem-border-width: rem(2px); @@ -117,5 +117,5 @@ $-nav-subitem-border-width: rem(2px); .sage-nav__list--sub-with-icon { margin-left: calc((#{sage-spacing(sm)} + (#{$-nav-icon-size} / 2)) - (#{$-nav-subitem-border-width} / 2) - (#{$-nav-icon-spacing} / 2)); padding-left: sage-spacing(sm); - border-left: $-nav-subitem-border-width solid sage-color(grey, 300); + border-left: $-nav-subitem-border-width solid sage-color(grey, 200); } diff --git a/packages/sage-assets/lib/stylesheets/components/_page_heading.scss b/packages/sage-assets/lib/stylesheets/components/_page_heading.scss index 2042aa956c..5b768efd2a 100644 --- a/packages/sage-assets/lib/stylesheets/components/_page_heading.scss +++ b/packages/sage-assets/lib/stylesheets/components/_page_heading.scss @@ -84,7 +84,7 @@ $-page-heading-image-height-mobile: rem(120px); grid-area: image; overflow: hidden; min-height: $-page-heading-image-height-min; - background: sage-color(grey, 300); + background: sage-color(grey, 200); border-radius: sage-border(radius); border: sage-border(); diff --git a/packages/sage-assets/lib/stylesheets/components/_pagination.scss b/packages/sage-assets/lib/stylesheets/components/_pagination.scss index 695cc76ca9..81c3d937ac 100644 --- a/packages/sage-assets/lib/stylesheets/components/_pagination.scss +++ b/packages/sage-assets/lib/stylesheets/components/_pagination.scss @@ -11,7 +11,7 @@ $-pagination-radius: sage-border(radius-round); $-pagination-text-color: sage-color(grey, 900); $-pagination-text-color-disabled: sage-color(grey, 600); $-pagination-bg-color-current: sage-color(grey, 150); -$-pagination-bg-color-hover: sage-color(grey, 200); +$-pagination-bg-color-hover: sage-color(grey, 150); $-pagination-focus-ring-color: sage-color(purple, 300); diff --git a/packages/sage-assets/lib/stylesheets/components/_panel.scss b/packages/sage-assets/lib/stylesheets/components/_panel.scss index 4bfee719b2..72be2f8200 100644 --- a/packages/sage-assets/lib/stylesheets/components/_panel.scss +++ b/packages/sage-assets/lib/stylesheets/components/_panel.scss @@ -45,7 +45,7 @@ top: 50%; width: 100%; height: 1px; - background: sage-color(grey, 200); + background: sage-color(grey, 150); } &::after { diff --git a/packages/sage-assets/lib/stylesheets/components/_panel_controls.scss b/packages/sage-assets/lib/stylesheets/components/_panel_controls.scss index d4cf57bf16..29ccbd6243 100644 --- a/packages/sage-assets/lib/stylesheets/components/_panel_controls.scss +++ b/packages/sage-assets/lib/stylesheets/components/_panel_controls.scss @@ -19,7 +19,7 @@ height: 0; margin-right: -1 * sage-spacing(panel); margin-left: -1 * sage-spacing(panel); - border-top: 1px solid sage-color(grey, 300); + border-top: 1px solid sage-color(grey, 200); } .sage-search { diff --git a/packages/sage-assets/lib/stylesheets/components/_progress_bar.scss b/packages/sage-assets/lib/stylesheets/components/_progress_bar.scss index 4f7b972164..7275e3c395 100644 --- a/packages/sage-assets/lib/stylesheets/components/_progress_bar.scss +++ b/packages/sage-assets/lib/stylesheets/components/_progress_bar.scss @@ -34,7 +34,7 @@ $-progress-bar-height: sage-spacing(xs); height: $-progress-bar-height; width: 100%; border-radius: sage-border(radius-small); - background-color: var(--sage-progress-bar-background-color, sage-color(grey, 200)); + background-color: var(--sage-progress-bar-background-color, sage-color(grey, 150)); .sage-modal__header & { border-radius: 0; diff --git a/packages/sage-assets/lib/stylesheets/components/_search.scss b/packages/sage-assets/lib/stylesheets/components/_search.scss index de5ba504d4..5c5ab96727 100644 --- a/packages/sage-assets/lib/stylesheets/components/_search.scss +++ b/packages/sage-assets/lib/stylesheets/components/_search.scss @@ -29,7 +29,7 @@ $-search-icon: "::before"; } .sage-search:not(.sage-search--contained) & { - border-bottom: 1px solid sage-color(grey, 300); + border-bottom: 1px solid sage-color(grey, 200); &:hover { background-color: sage-color(grey, 100); diff --git a/packages/sage-assets/lib/stylesheets/components/_sortable.scss b/packages/sage-assets/lib/stylesheets/components/_sortable.scss index 5455b17340..b886010638 100644 --- a/packages/sage-assets/lib/stylesheets/components/_sortable.scss +++ b/packages/sage-assets/lib/stylesheets/components/_sortable.scss @@ -75,7 +75,7 @@ $-sortable-image-height: rem(48px); } &.sage-sortable__item--ghost { - background: sage-color(grey, 200); + background: sage-color(grey, 150); } } @@ -84,7 +84,7 @@ $-sortable-image-height: rem(48px); overflow: hidden; height: $-sortable-image-height; width: $-sortable-image-width; - background: sage-color(grey, 200); + background: sage-color(grey, 150); border-radius: sage-border(radius); border: sage-border(); diff --git a/packages/sage-assets/lib/stylesheets/components/_switch.scss b/packages/sage-assets/lib/stylesheets/components/_switch.scss index 0a0517a861..84ce30406a 100644 --- a/packages/sage-assets/lib/stylesheets/components/_switch.scss +++ b/packages/sage-assets/lib/stylesheets/components/_switch.scss @@ -6,14 +6,14 @@ // Colors -$-switch-color-default: sage-color(grey, 300); +$-switch-color-default: sage-color(grey, 200); $-switch-color-default-hover: sage-color(grey, 500); $-switch-color-default-text: sage-color(grey, 800); $-switch-color-checked: sage-color(grey, 900); $-switch-color-checked-hover: sage-color(grey, 950); -$-switch-color-disabled: sage-color(grey, 200); +$-switch-color-disabled: sage-color(grey, 150); $-switch-color-disabled-text: sage-color(grey, 800); -$-switch-color-disabled-checked: sage-color(grey, 200); +$-switch-color-disabled-checked: sage-color(grey, 150); $-switch-color-disabled-checked-text: sage-color(grey, 600); $-switch-color-error: sage-color(red, 500); $-switch-focus-outline-error-color: sage-color(red, 300); diff --git a/packages/sage-assets/lib/stylesheets/components/_tab.scss b/packages/sage-assets/lib/stylesheets/components/_tab.scss index 5bcbc3fc00..61f1d1ef5c 100644 --- a/packages/sage-assets/lib/stylesheets/components/_tab.scss +++ b/packages/sage-assets/lib/stylesheets/components/_tab.scss @@ -28,7 +28,7 @@ $-tab-color-disabled: map-get($sage-tab-colors, disabled); .sage-tabs--filter & { padding: rem(6px) rem(14px); - background-color: sage-color(grey, 200); + background-color: sage-color(grey, 150); border-radius: sage-border(radius-x-large); @extend %t-sage-body-small-semi; } @@ -38,7 +38,7 @@ $-tab-color-disabled: map-get($sage-tab-colors, disabled); &:hover { color: $-tab-color-active; .sage-tabs--filter & { - background: sage-color(grey, 300); + background: sage-color(grey, 200); } } diff --git a/packages/sage-assets/lib/stylesheets/components/_table.scss b/packages/sage-assets/lib/stylesheets/components/_table.scss index 436872272f..1be2309f32 100644 --- a/packages/sage-assets/lib/stylesheets/components/_table.scss +++ b/packages/sage-assets/lib/stylesheets/components/_table.scss @@ -5,7 +5,7 @@ //// // Borders and sizing -$-table-header-border: rem(1px) solid sage-color(grey, 200); +$-table-header-border: rem(1px) solid sage-color(grey, 150); $-table-cell-padding-xs: sage-spacing(xs); $-table-cell-padding-card: sage-spacing(); $-table-cell-padding-panel: sage-spacing(); diff --git a/packages/sage-assets/lib/stylesheets/components/_tabs.scss b/packages/sage-assets/lib/stylesheets/components/_tabs.scss index 2b250ce8a1..5f3915c136 100644 --- a/packages/sage-assets/lib/stylesheets/components/_tabs.scss +++ b/packages/sage-assets/lib/stylesheets/components/_tabs.scss @@ -38,7 +38,7 @@ padding-top: sage-spacing(sm); padding-left: sage-spacing(xs); padding-right: sage-spacing(xs); - background-color: sage-color(grey, 200); + background-color: sage-color(grey, 150); } .sage-tabs--layout-stacked { @@ -52,7 +52,7 @@ .sage-tabs-divider, .sage-tabs-container > hr { margin: 0; - border-top: 1px solid sage-color(grey, 300); + border-top: 1px solid sage-color(grey, 200); } .sage-tabs-pane { diff --git a/packages/sage-assets/lib/stylesheets/components/_tag.scss b/packages/sage-assets/lib/stylesheets/components/_tag.scss index 8d597b22ba..0258e552b0 100644 --- a/packages/sage-assets/lib/stylesheets/components/_tag.scss +++ b/packages/sage-assets/lib/stylesheets/components/_tag.scss @@ -15,11 +15,11 @@ $-tag-button-icon-mobile-size: rem(24px); display: inline-flex; align-items: center; padding: sage-spacing(3xs) sage-spacing(xs) sage-spacing(3xs) sage-spacing(xs); - background-color: sage-color(grey, 200); + background-color: sage-color(grey, 150); border-radius: sage-border(radius-x-large); &:hover { - background-color: sage-color(grey, 300); + background-color: sage-color(grey, 200); } pds-icon { diff --git a/packages/sage-assets/lib/stylesheets/core/_variables.scss b/packages/sage-assets/lib/stylesheets/core/_variables.scss index 106b3c3d77..cf12a42306 100644 --- a/packages/sage-assets/lib/stylesheets/core/_variables.scss +++ b/packages/sage-assets/lib/stylesheets/core/_variables.scss @@ -51,7 +51,7 @@ $sage-field-configs: ( /// Field coloring /// $sage-field-colors: ( - border: sage-color(grey, 300), + border: sage-color(grey, 200), default: sage-color(grey, 800), disabled: sage-color(grey, 500), disabled-background: sage-color(grey, 150), @@ -67,10 +67,10 @@ $sage-field-colors: ( /// $sage-radio-colors: ( checked: sage-color(grey, 900), - checked-disabled: sage-color(grey, 200), + checked-disabled: sage-color(grey, 150), checked-hover: sage-color(grey, 950), checked-inner: sage-color(white), - default: sage-color(grey, 300), + default: sage-color(grey, 200), disabled: sage-color(grey, 150), error: sage-color(red, 500), hover: sage-color(grey, 500), diff --git a/packages/sage-assets/lib/stylesheets/tokens/_border.scss b/packages/sage-assets/lib/stylesheets/tokens/_border.scss index 401a0ef3c7..452bf3e2c1 100644 --- a/packages/sage-assets/lib/stylesheets/tokens/_border.scss +++ b/packages/sage-assets/lib/stylesheets/tokens/_border.scss @@ -9,9 +9,9 @@ /// Sage borders token /// $sage-borders: ( - default: rem(1px) solid sage-color(grey, 200), + default: rem(1px) solid sage-color(grey, 150), error: rem(1px) solid sage-color(red, 500), - interactive: rem(1px) solid sage-color(grey, 300), + interactive: rem(1px) solid sage-color(grey, 200), interactive-hover: rem(1px) solid sage-color(grey, 500), radius-small: rem(4px), radius: rem(8px), diff --git a/packages/sage-assets/lib/stylesheets/tokens/_border_interactive.scss b/packages/sage-assets/lib/stylesheets/tokens/_border_interactive.scss index 69c8e04c99..c8c1976bc1 100644 --- a/packages/sage-assets/lib/stylesheets/tokens/_border_interactive.scss +++ b/packages/sage-assets/lib/stylesheets/tokens/_border_interactive.scss @@ -9,13 +9,13 @@ /// Sage borders interactive token /// $sage-borders-interactive: ( - default: 0 0 0 1px sage-color(grey, 300), + default: 0 0 0 1px sage-color(grey, 200), hover: 0 0 0 1px sage-color(grey, 500), focus: 0 0 0 4px sage-color(primary, 200), selected: 0 0 0 4px sage-color(grey, 900), error: 0 0 0 1px sage-color(red, 500), error-focus: 0 0 0 4px sage-color(red, 500), - disabled: 0 0 0 1px sage-color(grey, 200), + disabled: 0 0 0 1px sage-color(grey, 150), ); /// diff --git a/packages/sage-react/lib/Divider/Divider.jsx b/packages/sage-react/lib/Divider/Divider.jsx index 58636fe14a..d02ce2a18a 100644 --- a/packages/sage-react/lib/Divider/Divider.jsx +++ b/packages/sage-react/lib/Divider/Divider.jsx @@ -29,7 +29,7 @@ export const Divider = ({ }; Divider.defaultProps = { - color: SageTokens.COLOR_PALETTE.GREY_300, + color: SageTokens.COLOR_PALETTE.GREY_200, vertical: null, offset: null, }; From f297884c9bf9772b775b26f2e5bd621f26afc058 Mon Sep 17 00:00:00 2001 From: Quinton Jason Date: Wed, 28 Aug 2024 10:35:04 -0500 Subject: [PATCH 25/31] Revert "fix: update grey color token to lower greys" This reverts commit 2f43f1d435529ff04f4daf89fc0bc7cda3ff9ab9. --- .../sage-frontend/stylesheets/docs/_grid.scss | 2 +- .../stylesheets/docs/_rouge_theme.scss | 2 +- .../sage-frontend/stylesheets/docs/_specs.scss | 4 ++-- .../sage-frontend/stylesheets/docs/_text.scss | 2 +- .../lib/stylesheets/components/_alert.scss | 4 ++-- .../lib/stylesheets/components/_assistant.scss | 4 ++-- .../lib/stylesheets/components/_avatar.scss | 4 ++-- .../lib/stylesheets/components/_banner.scss | 2 +- .../lib/stylesheets/components/_button.scss | 16 ++++++++-------- .../lib/stylesheets/components/_card.scss | 4 ++-- .../stylesheets/components/_catalog_item.scss | 2 +- .../lib/stylesheets/components/_checkbox.scss | 4 ++-- .../lib/stylesheets/components/_choice.scss | 2 +- .../lib/stylesheets/components/_copy_text.scss | 2 +- .../lib/stylesheets/components/_data_card.scss | 4 ++-- .../lib/stylesheets/components/_divider.scss | 2 +- .../lib/stylesheets/components/_dropdown.scss | 8 ++++---- .../stylesheets/components/_expandable_card.scss | 2 +- .../lib/stylesheets/components/_hint.scss | 2 +- .../lib/stylesheets/components/_indicator.scss | 2 +- .../lib/stylesheets/components/_input_group.scss | 2 +- .../lib/stylesheets/components/_meter.scss | 2 +- .../lib/stylesheets/components/_nav.scss | 6 +++--- .../stylesheets/components/_page_heading.scss | 2 +- .../lib/stylesheets/components/_pagination.scss | 2 +- .../lib/stylesheets/components/_panel.scss | 2 +- .../stylesheets/components/_panel_controls.scss | 2 +- .../stylesheets/components/_progress_bar.scss | 2 +- .../lib/stylesheets/components/_search.scss | 2 +- .../lib/stylesheets/components/_sortable.scss | 4 ++-- .../lib/stylesheets/components/_switch.scss | 6 +++--- .../lib/stylesheets/components/_tab.scss | 4 ++-- .../lib/stylesheets/components/_table.scss | 2 +- .../lib/stylesheets/components/_tabs.scss | 4 ++-- .../lib/stylesheets/components/_tag.scss | 4 ++-- .../lib/stylesheets/core/_variables.scss | 6 +++--- .../lib/stylesheets/tokens/_border.scss | 4 ++-- .../stylesheets/tokens/_border_interactive.scss | 4 ++-- packages/sage-react/lib/Divider/Divider.jsx | 2 +- 39 files changed, 68 insertions(+), 68 deletions(-) diff --git a/docs/lib/sage-frontend/stylesheets/docs/_grid.scss b/docs/lib/sage-frontend/stylesheets/docs/_grid.scss index bdd18a82ce..64472af66b 100644 --- a/docs/lib/sage-frontend/stylesheets/docs/_grid.scss +++ b/docs/lib/sage-frontend/stylesheets/docs/_grid.scss @@ -9,7 +9,7 @@ margin-bottom: sage-spacing(md); padding: sage-spacing(xs) sage-spacing(md); text-align: center; - background: sage-color(grey, 150); + background: sage-color(grey, 200); border-radius: sage-border(radius); [class*="sage-col--align-"] & { diff --git a/docs/lib/sage-frontend/stylesheets/docs/_rouge_theme.scss b/docs/lib/sage-frontend/stylesheets/docs/_rouge_theme.scss index 34719f30ce..c247ac9c06 100644 --- a/docs/lib/sage-frontend/stylesheets/docs/_rouge_theme.scss +++ b/docs/lib/sage-frontend/stylesheets/docs/_rouge_theme.scss @@ -1,5 +1,5 @@ // background -$-color-1: sage-color(grey, 150); +$-color-1: sage-color(grey, 200); // Whitespace $-color-24: sage-color(grey, 700); // Name entity diff --git a/docs/lib/sage-frontend/stylesheets/docs/_specs.scss b/docs/lib/sage-frontend/stylesheets/docs/_specs.scss index 089897f560..37bf5a3dbf 100644 --- a/docs/lib/sage-frontend/stylesheets/docs/_specs.scss +++ b/docs/lib/sage-frontend/stylesheets/docs/_specs.scss @@ -8,14 +8,14 @@ th { padding: 4px; color: sage-color(grey, 700); - border-bottom: 1px solid sage-color(grey, 200); + border-bottom: 1px solid sage-color(grey, 300); } td { padding: 4px; font-size: sage-font-size(body-xs); vertical-align: middle; - border-bottom: 1px solid sage-color(grey, 150); + border-bottom: 1px solid sage-color(grey, 200); } tfoot td { diff --git a/docs/lib/sage-frontend/stylesheets/docs/_text.scss b/docs/lib/sage-frontend/stylesheets/docs/_text.scss index 86c16f80d4..b0aa73ae62 100644 --- a/docs/lib/sage-frontend/stylesheets/docs/_text.scss +++ b/docs/lib/sage-frontend/stylesheets/docs/_text.scss @@ -8,7 +8,7 @@ code { display: inline-block; padding: 0 sage-spacing(2xs); font-size: 0.9em; - background-color: sage-color(grey, 150); + background-color: sage-color(grey, 200); } pre { diff --git a/packages/sage-assets/lib/stylesheets/components/_alert.scss b/packages/sage-assets/lib/stylesheets/components/_alert.scss index bc386ee891..29984678f3 100644 --- a/packages/sage-assets/lib/stylesheets/components/_alert.scss +++ b/packages/sage-assets/lib/stylesheets/components/_alert.scss @@ -9,8 +9,8 @@ // `_button.scss`, `sage_alert.rb`, `_sage_alert.html.erb`, and `Alert.jsx` // $-alert-background-colors: ( - default: sage-color(grey, 150), - draft: sage-color(grey, 150), + default: sage-color(grey, 200), + draft: sage-color(grey, 200), info: sage-color(primary, 100), published: sage-color(sage, 100), success: sage-color(sage, 100), diff --git a/packages/sage-assets/lib/stylesheets/components/_assistant.scss b/packages/sage-assets/lib/stylesheets/components/_assistant.scss index 8085e7631c..a7f34a78b4 100644 --- a/packages/sage-assets/lib/stylesheets/components/_assistant.scss +++ b/packages/sage-assets/lib/stylesheets/components/_assistant.scss @@ -8,9 +8,9 @@ $-assistant-height: $sage-assistant-height; $-assistant-branding-height: rem(20px); $-assistant-search-height: rem(40px); -$-assistant-search-bg-color: sage-color(grey, 150); +$-assistant-search-bg-color: sage-color(grey, 200); $-assistant-search-bg-opacity: 0.1; -$-assistant-search-placeholder-color: sage-color(grey, 200); +$-assistant-search-placeholder-color: sage-color(grey, 300); $-assistant-search-placeholder-transition: color 0.15s ease-in-out, opacity 0.15s ease-in-out; diff --git a/packages/sage-assets/lib/stylesheets/components/_avatar.scss b/packages/sage-assets/lib/stylesheets/components/_avatar.scss index c11dc7e352..a8dc43bf7e 100644 --- a/packages/sage-assets/lib/stylesheets/components/_avatar.scss +++ b/packages/sage-assets/lib/stylesheets/components/_avatar.scss @@ -10,11 +10,11 @@ $-avatar-max-size: rem(128px); $-avatar-ring-colors: ( charcoal: ( main: sage-color(grey, 950), - bg: sage-color(grey, 150) + bg: sage-color(grey, 200) ), grey: ( main: sage-color(grey, 950), - bg: sage-color(grey, 150) + bg: sage-color(grey, 200) ), purple: ( main: sage-color(purple, 600), diff --git a/packages/sage-assets/lib/stylesheets/components/_banner.scss b/packages/sage-assets/lib/stylesheets/components/_banner.scss index 921b11abc9..bc052abb89 100644 --- a/packages/sage-assets/lib/stylesheets/components/_banner.scss +++ b/packages/sage-assets/lib/stylesheets/components/_banner.scss @@ -14,7 +14,7 @@ $-banner-colors: ( icon: "flag", ), secondary: ( - background: sage-color(grey, 150), + background: sage-color(grey, 200), text: sage-color(grey, 950), text-hover: sage-color(grey, 800), icon: "info-circle", diff --git a/packages/sage-assets/lib/stylesheets/components/_button.scss b/packages/sage-assets/lib/stylesheets/components/_button.scss index 367f98a525..b4ae3912d4 100644 --- a/packages/sage-assets/lib/stylesheets/components/_button.scss +++ b/packages/sage-assets/lib/stylesheets/components/_button.scss @@ -64,8 +64,8 @@ $-btn-base-styles: ( ), disabled: ( color: sage-color(grey, 600), - background-color: sage-color(grey, 150), - border-color: sage-color(grey, 150), + background-color: sage-color(grey, 200), + border-color: sage-color(grey, 200), ) ), secondary: ( @@ -149,8 +149,8 @@ $-btn-subtle-styles: ( // NOTE: the following colors should be kept in sync // with the colors in `_alert.scss` $-alert-close-btn-background-colors: ( - default: sage-color(grey, 200), - draft: sage-color(grey, 200), + default: sage-color(grey, 300), + draft: sage-color(grey, 300), info: sage-color(primary, 200), published: sage-color(sage, 200), success: sage-color(sage, 200), @@ -317,7 +317,7 @@ $-btn-loading-min-height: rem(36px); bottom: rem(1px); height: rem(38px); background-color: sage-color(white); - box-shadow: rem(-1px) 0 0 0 sage-color(grey, 200); + box-shadow: rem(-1px) 0 0 0 sage-color(grey, 300); border-color: transparent; @include sage-focus-outline--update-color(transparent); @@ -472,7 +472,7 @@ $-btn-loading-min-height: rem(36px); } &:hover { - background-color: sage-color(grey, 150); + background-color: sage-color(grey, 200); } &.sage-btn--selected { @@ -612,7 +612,7 @@ a.sage-btn { &[aria-disabled="true"] { color: sage-color(grey, 600); background-color: sage-color(white); - border-color: sage-color(grey, 150); + border-color: sage-color(grey, 200); } } @@ -860,5 +860,5 @@ a.sage-btn { .sage-btn-group--border-top { padding-top: sage-spacing(lg); - border-top: 1px solid sage-color(grey, 200); + border-top: 1px solid sage-color(grey, 300); } diff --git a/packages/sage-assets/lib/stylesheets/components/_card.scss b/packages/sage-assets/lib/stylesheets/components/_card.scss index 20da94a417..60ffb9bd64 100644 --- a/packages/sage-assets/lib/stylesheets/components/_card.scss +++ b/packages/sage-assets/lib/stylesheets/components/_card.scss @@ -26,7 +26,7 @@ $-sage-card-background: transparent; border-color: sage-color(white); @include sage-dashed-border( $border-radius: sage-border(radius), - $color: sage-color(grey, 200), + $color: sage-color(grey, 300), ); } @@ -103,7 +103,7 @@ $-sage-card-background: transparent; top: 50%; width: 100%; height: 1px; - background: sage-color(grey, 150); + background: sage-color(grey, 200); } &::after { content: attr(data-divider-label); diff --git a/packages/sage-assets/lib/stylesheets/components/_catalog_item.scss b/packages/sage-assets/lib/stylesheets/components/_catalog_item.scss index af07f3ddef..405c7f8835 100644 --- a/packages/sage-assets/lib/stylesheets/components/_catalog_item.scss +++ b/packages/sage-assets/lib/stylesheets/components/_catalog_item.scss @@ -94,7 +94,7 @@ $-catalogue-item-image-height-mobile: rem(120px); grid-area: img; overflow: hidden; min-height: $-catalogue-item-image-height-min; - background: sage-color(grey, 150); + background: sage-color(grey, 200); border-radius: sage-border(radius); border: sage-border(); diff --git a/packages/sage-assets/lib/stylesheets/components/_checkbox.scss b/packages/sage-assets/lib/stylesheets/components/_checkbox.scss index 79b4a82b09..02580fe76c 100644 --- a/packages/sage-assets/lib/stylesheets/components/_checkbox.scss +++ b/packages/sage-assets/lib/stylesheets/components/_checkbox.scss @@ -8,11 +8,11 @@ // Colors // $-checkbox-color-default: sage-color(grey, 500); -$-checkbox-color-default-border: sage-color(grey, 200); +$-checkbox-color-default-border: sage-color(grey, 300); $-checkbox-color-checked: sage-color(grey, 900); $-checkbox-color-checked-hover: sage-color(grey, 950); $-checkbox-color-disabled: sage-color(grey, 150); -$-checkbox-color-disabled-border: sage-color(grey, 150); +$-checkbox-color-disabled-border: sage-color(grey, 200); $-checkbox-color-disabled-checked: sage-color(grey, 600); $-checkbox-color-error: sage-color(red, 500); diff --git a/packages/sage-assets/lib/stylesheets/components/_choice.scss b/packages/sage-assets/lib/stylesheets/components/_choice.scss index aa5c687785..9fb8c59b50 100644 --- a/packages/sage-assets/lib/stylesheets/components/_choice.scss +++ b/packages/sage-assets/lib/stylesheets/components/_choice.scss @@ -87,7 +87,7 @@ $-choice-radio-color-checked-inner: map-get($sage-radio-colors, checked-inner); pointer-events: none; &::before { - background-color: sage-color(grey, 150); + background-color: sage-color(grey, 200); } &:hover::before { diff --git a/packages/sage-assets/lib/stylesheets/components/_copy_text.scss b/packages/sage-assets/lib/stylesheets/components/_copy_text.scss index eb80fcc2f0..7397ea8a29 100644 --- a/packages/sage-assets/lib/stylesheets/components/_copy_text.scss +++ b/packages/sage-assets/lib/stylesheets/components/_copy_text.scss @@ -5,7 +5,7 @@ //// -$-copy-text-border: 1px solid sage-color(grey, 200); +$-copy-text-border: 1px solid sage-color(grey, 300); $-copy-text-border-focus-color: sage-color(purple, 300); $-copy-text-border-hover-color: sage-color(grey, 500); $-copy-text-color: sage-color(grey, 900); diff --git a/packages/sage-assets/lib/stylesheets/components/_data_card.scss b/packages/sage-assets/lib/stylesheets/components/_data_card.scss index 379d1f6ede..718233514a 100644 --- a/packages/sage-assets/lib/stylesheets/components/_data_card.scss +++ b/packages/sage-assets/lib/stylesheets/components/_data_card.scss @@ -7,7 +7,7 @@ $-data-card-colors: ( default: ( - border-color: sage-color(grey, 200), + border-color: sage-color(grey, 300), text-color: sage-color(grey, 900), ), danger: ( @@ -121,7 +121,7 @@ $-data-card-padding: sage-spacing(xs); .sage-data-card-scroll-container &:not(:last-child) { padding-right: sage-spacing(md); - border-right: 1px solid sage-color(grey, 200); + border-right: 1px solid sage-color(grey, 300); } .sage-data-card-scroll-container &:not(:first-child) { diff --git a/packages/sage-assets/lib/stylesheets/components/_divider.scss b/packages/sage-assets/lib/stylesheets/components/_divider.scss index 54e6b35fb2..4b53ae54df 100644 --- a/packages/sage-assets/lib/stylesheets/components/_divider.scss +++ b/packages/sage-assets/lib/stylesheets/components/_divider.scss @@ -9,7 +9,7 @@ height: rem(1px); width: 100%; margin: 0; - background: var(--sage-divider-background-color, sage-color(grey, 150)); + background: var(--sage-divider-background-color, sage-color(grey, 200)); border: 0; &--vertical { diff --git a/packages/sage-assets/lib/stylesheets/components/_dropdown.scss b/packages/sage-assets/lib/stylesheets/components/_dropdown.scss index c362d9c023..66324a5acf 100644 --- a/packages/sage-assets/lib/stylesheets/components/_dropdown.scss +++ b/packages/sage-assets/lib/stylesheets/components/_dropdown.scss @@ -134,13 +134,13 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs); .sage-dropdown__item--border-before { padding-top: sage-spacing(xs); margin-top: sage-spacing(xs); - border-top: 1px solid sage-color(grey, 150); + border-top: 1px solid sage-color(grey, 200); } .sage-dropdown__item--border-after { padding-bottom: sage-spacing(xs); margin-bottom: sage-spacing(xs); - border-bottom: 1px solid sage-color(grey, 150); + border-bottom: 1px solid sage-color(grey, 200); } .sage-dropdown__item--disabled { @@ -188,7 +188,7 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs); &:hover { - background-color: sage-color(grey, 150); + background-color: sage-color(grey, 200); } &:focus-within { @@ -253,7 +253,7 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs); &:hover { color: sage-color(grey, 900); - background-color: sage-color(grey, 150); + background-color: sage-color(grey, 200); } } diff --git a/packages/sage-assets/lib/stylesheets/components/_expandable_card.scss b/packages/sage-assets/lib/stylesheets/components/_expandable_card.scss index d34fcf5ae7..754f3ac421 100644 --- a/packages/sage-assets/lib/stylesheets/components/_expandable_card.scss +++ b/packages/sage-assets/lib/stylesheets/components/_expandable_card.scss @@ -6,7 +6,7 @@ $-expandable-card-bg-color: sage-color(white); -$-expandable-card-border-color: sage-color(grey, 200); +$-expandable-card-border-color: sage-color(grey, 300); $-expandable-card-border-radius: sage-border(radius); $-expandable-card-padding: sage-spacing(sm); $-expandable-card-padding-xs: sage-spacing(xs); diff --git a/packages/sage-assets/lib/stylesheets/components/_hint.scss b/packages/sage-assets/lib/stylesheets/components/_hint.scss index ed0d1b0bc4..59b8475393 100644 --- a/packages/sage-assets/lib/stylesheets/components/_hint.scss +++ b/packages/sage-assets/lib/stylesheets/components/_hint.scss @@ -6,7 +6,7 @@ // Colors $-hint-text-color: sage-color(grey, 900); -$-hint-background-color: sage-color(grey, 150); +$-hint-background-color: sage-color(grey, 200); .sage-hint { display: flex; diff --git a/packages/sage-assets/lib/stylesheets/components/_indicator.scss b/packages/sage-assets/lib/stylesheets/components/_indicator.scss index d26ebacc14..b2dbc95076 100644 --- a/packages/sage-assets/lib/stylesheets/components/_indicator.scss +++ b/packages/sage-assets/lib/stylesheets/components/_indicator.scss @@ -20,7 +20,7 @@ $-indicator-size: rem(6px); border-radius: sage-border(radius-round); &:not(.sage-indicator--current) { - background-color: sage-color(grey, 200); + background-color: sage-color(grey, 300); } &:not(:last-child) { diff --git a/packages/sage-assets/lib/stylesheets/components/_input_group.scss b/packages/sage-assets/lib/stylesheets/components/_input_group.scss index 112ec78b3d..80098d068b 100644 --- a/packages/sage-assets/lib/stylesheets/components/_input_group.scss +++ b/packages/sage-assets/lib/stylesheets/components/_input_group.scss @@ -26,7 +26,7 @@ $-input-group-pw-field-button-color-text-hover: sage-color(black); } .sage-input-group:focus-within & { - background-color: sage-color(grey, 150); + background-color: sage-color(grey, 200); opacity: 1; } diff --git a/packages/sage-assets/lib/stylesheets/components/_meter.scss b/packages/sage-assets/lib/stylesheets/components/_meter.scss index 557e109ae1..372b4ea5c7 100644 --- a/packages/sage-assets/lib/stylesheets/components/_meter.scss +++ b/packages/sage-assets/lib/stylesheets/components/_meter.scss @@ -6,7 +6,7 @@ $-meter-bar-height: rem(4px); -$-meter-color-bg: sage-color(grey, 150); +$-meter-color-bg: sage-color(grey, 200); $-meter-bar-low: rgba(sage-color(red, 950), 0.9); $-meter-bar-med: rgba(sage-color(orange), 0.9); $-meter-bar-success: rgba(sage-color(sage, 200), 0.9); diff --git a/packages/sage-assets/lib/stylesheets/components/_nav.scss b/packages/sage-assets/lib/stylesheets/components/_nav.scss index 7f0cd64764..02d7d49b71 100644 --- a/packages/sage-assets/lib/stylesheets/components/_nav.scss +++ b/packages/sage-assets/lib/stylesheets/components/_nav.scss @@ -6,8 +6,8 @@ $-nav-color-text: sage-color(grey, 800); $-nav-color-focus: sage-color(grey, 500); -$-nav-color-background: sage-color(grey, 150); -$-nav-color-background-hover: sage-color(grey, 150); +$-nav-color-background: sage-color(grey, 200); +$-nav-color-background-hover: sage-color(grey, 200); $-nav-icon-size: rem(16px); $-nav-icon-spacing: rem(8px); $-nav-subitem-border-width: rem(2px); @@ -117,5 +117,5 @@ $-nav-subitem-border-width: rem(2px); .sage-nav__list--sub-with-icon { margin-left: calc((#{sage-spacing(sm)} + (#{$-nav-icon-size} / 2)) - (#{$-nav-subitem-border-width} / 2) - (#{$-nav-icon-spacing} / 2)); padding-left: sage-spacing(sm); - border-left: $-nav-subitem-border-width solid sage-color(grey, 200); + border-left: $-nav-subitem-border-width solid sage-color(grey, 300); } diff --git a/packages/sage-assets/lib/stylesheets/components/_page_heading.scss b/packages/sage-assets/lib/stylesheets/components/_page_heading.scss index 5b768efd2a..2042aa956c 100644 --- a/packages/sage-assets/lib/stylesheets/components/_page_heading.scss +++ b/packages/sage-assets/lib/stylesheets/components/_page_heading.scss @@ -84,7 +84,7 @@ $-page-heading-image-height-mobile: rem(120px); grid-area: image; overflow: hidden; min-height: $-page-heading-image-height-min; - background: sage-color(grey, 200); + background: sage-color(grey, 300); border-radius: sage-border(radius); border: sage-border(); diff --git a/packages/sage-assets/lib/stylesheets/components/_pagination.scss b/packages/sage-assets/lib/stylesheets/components/_pagination.scss index 81c3d937ac..695cc76ca9 100644 --- a/packages/sage-assets/lib/stylesheets/components/_pagination.scss +++ b/packages/sage-assets/lib/stylesheets/components/_pagination.scss @@ -11,7 +11,7 @@ $-pagination-radius: sage-border(radius-round); $-pagination-text-color: sage-color(grey, 900); $-pagination-text-color-disabled: sage-color(grey, 600); $-pagination-bg-color-current: sage-color(grey, 150); -$-pagination-bg-color-hover: sage-color(grey, 150); +$-pagination-bg-color-hover: sage-color(grey, 200); $-pagination-focus-ring-color: sage-color(purple, 300); diff --git a/packages/sage-assets/lib/stylesheets/components/_panel.scss b/packages/sage-assets/lib/stylesheets/components/_panel.scss index 72be2f8200..4bfee719b2 100644 --- a/packages/sage-assets/lib/stylesheets/components/_panel.scss +++ b/packages/sage-assets/lib/stylesheets/components/_panel.scss @@ -45,7 +45,7 @@ top: 50%; width: 100%; height: 1px; - background: sage-color(grey, 150); + background: sage-color(grey, 200); } &::after { diff --git a/packages/sage-assets/lib/stylesheets/components/_panel_controls.scss b/packages/sage-assets/lib/stylesheets/components/_panel_controls.scss index 29ccbd6243..d4cf57bf16 100644 --- a/packages/sage-assets/lib/stylesheets/components/_panel_controls.scss +++ b/packages/sage-assets/lib/stylesheets/components/_panel_controls.scss @@ -19,7 +19,7 @@ height: 0; margin-right: -1 * sage-spacing(panel); margin-left: -1 * sage-spacing(panel); - border-top: 1px solid sage-color(grey, 200); + border-top: 1px solid sage-color(grey, 300); } .sage-search { diff --git a/packages/sage-assets/lib/stylesheets/components/_progress_bar.scss b/packages/sage-assets/lib/stylesheets/components/_progress_bar.scss index 7275e3c395..4f7b972164 100644 --- a/packages/sage-assets/lib/stylesheets/components/_progress_bar.scss +++ b/packages/sage-assets/lib/stylesheets/components/_progress_bar.scss @@ -34,7 +34,7 @@ $-progress-bar-height: sage-spacing(xs); height: $-progress-bar-height; width: 100%; border-radius: sage-border(radius-small); - background-color: var(--sage-progress-bar-background-color, sage-color(grey, 150)); + background-color: var(--sage-progress-bar-background-color, sage-color(grey, 200)); .sage-modal__header & { border-radius: 0; diff --git a/packages/sage-assets/lib/stylesheets/components/_search.scss b/packages/sage-assets/lib/stylesheets/components/_search.scss index 5c5ab96727..de5ba504d4 100644 --- a/packages/sage-assets/lib/stylesheets/components/_search.scss +++ b/packages/sage-assets/lib/stylesheets/components/_search.scss @@ -29,7 +29,7 @@ $-search-icon: "::before"; } .sage-search:not(.sage-search--contained) & { - border-bottom: 1px solid sage-color(grey, 200); + border-bottom: 1px solid sage-color(grey, 300); &:hover { background-color: sage-color(grey, 100); diff --git a/packages/sage-assets/lib/stylesheets/components/_sortable.scss b/packages/sage-assets/lib/stylesheets/components/_sortable.scss index b886010638..5455b17340 100644 --- a/packages/sage-assets/lib/stylesheets/components/_sortable.scss +++ b/packages/sage-assets/lib/stylesheets/components/_sortable.scss @@ -75,7 +75,7 @@ $-sortable-image-height: rem(48px); } &.sage-sortable__item--ghost { - background: sage-color(grey, 150); + background: sage-color(grey, 200); } } @@ -84,7 +84,7 @@ $-sortable-image-height: rem(48px); overflow: hidden; height: $-sortable-image-height; width: $-sortable-image-width; - background: sage-color(grey, 150); + background: sage-color(grey, 200); border-radius: sage-border(radius); border: sage-border(); diff --git a/packages/sage-assets/lib/stylesheets/components/_switch.scss b/packages/sage-assets/lib/stylesheets/components/_switch.scss index 84ce30406a..0a0517a861 100644 --- a/packages/sage-assets/lib/stylesheets/components/_switch.scss +++ b/packages/sage-assets/lib/stylesheets/components/_switch.scss @@ -6,14 +6,14 @@ // Colors -$-switch-color-default: sage-color(grey, 200); +$-switch-color-default: sage-color(grey, 300); $-switch-color-default-hover: sage-color(grey, 500); $-switch-color-default-text: sage-color(grey, 800); $-switch-color-checked: sage-color(grey, 900); $-switch-color-checked-hover: sage-color(grey, 950); -$-switch-color-disabled: sage-color(grey, 150); +$-switch-color-disabled: sage-color(grey, 200); $-switch-color-disabled-text: sage-color(grey, 800); -$-switch-color-disabled-checked: sage-color(grey, 150); +$-switch-color-disabled-checked: sage-color(grey, 200); $-switch-color-disabled-checked-text: sage-color(grey, 600); $-switch-color-error: sage-color(red, 500); $-switch-focus-outline-error-color: sage-color(red, 300); diff --git a/packages/sage-assets/lib/stylesheets/components/_tab.scss b/packages/sage-assets/lib/stylesheets/components/_tab.scss index 61f1d1ef5c..5bcbc3fc00 100644 --- a/packages/sage-assets/lib/stylesheets/components/_tab.scss +++ b/packages/sage-assets/lib/stylesheets/components/_tab.scss @@ -28,7 +28,7 @@ $-tab-color-disabled: map-get($sage-tab-colors, disabled); .sage-tabs--filter & { padding: rem(6px) rem(14px); - background-color: sage-color(grey, 150); + background-color: sage-color(grey, 200); border-radius: sage-border(radius-x-large); @extend %t-sage-body-small-semi; } @@ -38,7 +38,7 @@ $-tab-color-disabled: map-get($sage-tab-colors, disabled); &:hover { color: $-tab-color-active; .sage-tabs--filter & { - background: sage-color(grey, 200); + background: sage-color(grey, 300); } } diff --git a/packages/sage-assets/lib/stylesheets/components/_table.scss b/packages/sage-assets/lib/stylesheets/components/_table.scss index 1be2309f32..436872272f 100644 --- a/packages/sage-assets/lib/stylesheets/components/_table.scss +++ b/packages/sage-assets/lib/stylesheets/components/_table.scss @@ -5,7 +5,7 @@ //// // Borders and sizing -$-table-header-border: rem(1px) solid sage-color(grey, 150); +$-table-header-border: rem(1px) solid sage-color(grey, 200); $-table-cell-padding-xs: sage-spacing(xs); $-table-cell-padding-card: sage-spacing(); $-table-cell-padding-panel: sage-spacing(); diff --git a/packages/sage-assets/lib/stylesheets/components/_tabs.scss b/packages/sage-assets/lib/stylesheets/components/_tabs.scss index 5f3915c136..2b250ce8a1 100644 --- a/packages/sage-assets/lib/stylesheets/components/_tabs.scss +++ b/packages/sage-assets/lib/stylesheets/components/_tabs.scss @@ -38,7 +38,7 @@ padding-top: sage-spacing(sm); padding-left: sage-spacing(xs); padding-right: sage-spacing(xs); - background-color: sage-color(grey, 150); + background-color: sage-color(grey, 200); } .sage-tabs--layout-stacked { @@ -52,7 +52,7 @@ .sage-tabs-divider, .sage-tabs-container > hr { margin: 0; - border-top: 1px solid sage-color(grey, 200); + border-top: 1px solid sage-color(grey, 300); } .sage-tabs-pane { diff --git a/packages/sage-assets/lib/stylesheets/components/_tag.scss b/packages/sage-assets/lib/stylesheets/components/_tag.scss index 0258e552b0..8d597b22ba 100644 --- a/packages/sage-assets/lib/stylesheets/components/_tag.scss +++ b/packages/sage-assets/lib/stylesheets/components/_tag.scss @@ -15,11 +15,11 @@ $-tag-button-icon-mobile-size: rem(24px); display: inline-flex; align-items: center; padding: sage-spacing(3xs) sage-spacing(xs) sage-spacing(3xs) sage-spacing(xs); - background-color: sage-color(grey, 150); + background-color: sage-color(grey, 200); border-radius: sage-border(radius-x-large); &:hover { - background-color: sage-color(grey, 200); + background-color: sage-color(grey, 300); } pds-icon { diff --git a/packages/sage-assets/lib/stylesheets/core/_variables.scss b/packages/sage-assets/lib/stylesheets/core/_variables.scss index cf12a42306..106b3c3d77 100644 --- a/packages/sage-assets/lib/stylesheets/core/_variables.scss +++ b/packages/sage-assets/lib/stylesheets/core/_variables.scss @@ -51,7 +51,7 @@ $sage-field-configs: ( /// Field coloring /// $sage-field-colors: ( - border: sage-color(grey, 200), + border: sage-color(grey, 300), default: sage-color(grey, 800), disabled: sage-color(grey, 500), disabled-background: sage-color(grey, 150), @@ -67,10 +67,10 @@ $sage-field-colors: ( /// $sage-radio-colors: ( checked: sage-color(grey, 900), - checked-disabled: sage-color(grey, 150), + checked-disabled: sage-color(grey, 200), checked-hover: sage-color(grey, 950), checked-inner: sage-color(white), - default: sage-color(grey, 200), + default: sage-color(grey, 300), disabled: sage-color(grey, 150), error: sage-color(red, 500), hover: sage-color(grey, 500), diff --git a/packages/sage-assets/lib/stylesheets/tokens/_border.scss b/packages/sage-assets/lib/stylesheets/tokens/_border.scss index 452bf3e2c1..401a0ef3c7 100644 --- a/packages/sage-assets/lib/stylesheets/tokens/_border.scss +++ b/packages/sage-assets/lib/stylesheets/tokens/_border.scss @@ -9,9 +9,9 @@ /// Sage borders token /// $sage-borders: ( - default: rem(1px) solid sage-color(grey, 150), + default: rem(1px) solid sage-color(grey, 200), error: rem(1px) solid sage-color(red, 500), - interactive: rem(1px) solid sage-color(grey, 200), + interactive: rem(1px) solid sage-color(grey, 300), interactive-hover: rem(1px) solid sage-color(grey, 500), radius-small: rem(4px), radius: rem(8px), diff --git a/packages/sage-assets/lib/stylesheets/tokens/_border_interactive.scss b/packages/sage-assets/lib/stylesheets/tokens/_border_interactive.scss index c8c1976bc1..69c8e04c99 100644 --- a/packages/sage-assets/lib/stylesheets/tokens/_border_interactive.scss +++ b/packages/sage-assets/lib/stylesheets/tokens/_border_interactive.scss @@ -9,13 +9,13 @@ /// Sage borders interactive token /// $sage-borders-interactive: ( - default: 0 0 0 1px sage-color(grey, 200), + default: 0 0 0 1px sage-color(grey, 300), hover: 0 0 0 1px sage-color(grey, 500), focus: 0 0 0 4px sage-color(primary, 200), selected: 0 0 0 4px sage-color(grey, 900), error: 0 0 0 1px sage-color(red, 500), error-focus: 0 0 0 4px sage-color(red, 500), - disabled: 0 0 0 1px sage-color(grey, 150), + disabled: 0 0 0 1px sage-color(grey, 200), ); /// diff --git a/packages/sage-react/lib/Divider/Divider.jsx b/packages/sage-react/lib/Divider/Divider.jsx index d02ce2a18a..58636fe14a 100644 --- a/packages/sage-react/lib/Divider/Divider.jsx +++ b/packages/sage-react/lib/Divider/Divider.jsx @@ -29,7 +29,7 @@ export const Divider = ({ }; Divider.defaultProps = { - color: SageTokens.COLOR_PALETTE.GREY_200, + color: SageTokens.COLOR_PALETTE.GREY_300, vertical: null, offset: null, }; From 49992171a2a6b3523affdef004e8baceda5eebe9 Mon Sep 17 00:00:00 2001 From: Julian Skinner Date: Thu, 5 Sep 2024 14:21:43 -0500 Subject: [PATCH 26/31] style: update purple color token to use three digits --- .../lib/stylesheets/components/_alert.scss | 4 +-- .../lib/stylesheets/components/_badge.scss | 2 +- .../lib/stylesheets/components/_button.scss | 26 +++++++++---------- .../lib/stylesheets/components/_checkbox.scss | 2 +- .../lib/stylesheets/components/_choice.scss | 2 +- .../lib/stylesheets/components/_dropdown.scss | 8 +++--- .../lib/stylesheets/components/_hero.scss | 2 +- .../lib/stylesheets/components/_link.scss | 4 +-- .../stylesheets/components/_media_tile.scss | 2 +- .../lib/stylesheets/components/_nav.scss | 6 ++--- .../stylesheets/components/_status_icon.scss | 2 +- .../lib/stylesheets/components/_toast.scss | 2 +- .../stylesheets/components/_typeahead.scss | 2 +- .../lib/stylesheets/core/_variables.scss | 2 +- .../lib/stylesheets/core/mixins/_sage.scss | 2 +- 15 files changed, 34 insertions(+), 34 deletions(-) diff --git a/packages/sage-assets/lib/stylesheets/components/_alert.scss b/packages/sage-assets/lib/stylesheets/components/_alert.scss index 29984678f3..d659545a53 100644 --- a/packages/sage-assets/lib/stylesheets/components/_alert.scss +++ b/packages/sage-assets/lib/stylesheets/components/_alert.scss @@ -173,7 +173,7 @@ $-alert-border-colors: ( } &:focus-visible { - @include sage-focus-outline--update-color(sage-color(purple, 30)); + @include sage-focus-outline--update-color(sage-color(purple, 300)); } } @@ -200,7 +200,7 @@ $-alert-border-colors: ( } &:focus-visible { - @include sage-focus-outline--update-color(sage-color(purple, 30)); + @include sage-focus-outline--update-color(sage-color(purple, 300)); } } diff --git a/packages/sage-assets/lib/stylesheets/components/_badge.scss b/packages/sage-assets/lib/stylesheets/components/_badge.scss index 52a29bf6c9..96bfd7e440 100644 --- a/packages/sage-assets/lib/stylesheets/components/_badge.scss +++ b/packages/sage-assets/lib/stylesheets/components/_badge.scss @@ -102,7 +102,7 @@ $-badge-statuses: ( .sage-badge__value { @include sage-focus-outline($outline-offset-block: -1, $outline-offset-inline: -1); - @include sage-focus-outline--update-color(sage-color(purple, 30)); + @include sage-focus-outline--update-color(sage-color(purple, 300)); position: static; padding-right: rem(24px); diff --git a/packages/sage-assets/lib/stylesheets/components/_button.scss b/packages/sage-assets/lib/stylesheets/components/_button.scss index b4ae3912d4..f31cb406d7 100644 --- a/packages/sage-assets/lib/stylesheets/components/_button.scss +++ b/packages/sage-assets/lib/stylesheets/components/_button.scss @@ -26,24 +26,24 @@ $-btn-base-styles: ( accent: ( default: ( color: sage-color(white), - background-color: sage-color(purple, 50), - border-color: sage-color(purple, 50), - ring-color: sage-color(purple, 30), + background-color: sage-color(purple, 500), + border-color: sage-color(purple, 500), + ring-color: sage-color(purple, 300), ), hover: ( color: sage-color(white), - background-color: sage-color(purple, 60), - border-color: sage-color(purple, 60), + background-color: sage-color(purple, 600), + border-color: sage-color(purple, 600), ), focus: ( color: sage-color(white), - background-color: sage-color(purple, 50), - border-color: sage-color(purple, 50), + background-color: sage-color(purple, 500), + border-color: sage-color(purple, 500), ), disabled: ( - color: sage-color(purple, 30), - background-color: sage-color(purple, 15), - border-color: sage-color(purple, 15), + color: sage-color(purple, 300), + background-color: sage-color(purple, 150), + border-color: sage-color(purple, 150), ) ), primary: ( @@ -72,7 +72,7 @@ $-btn-base-styles: ( default: ( color: sage-color(grey, 900), background-color: sage-color(white), - ring-color: sage-color(purple, 30), + ring-color: sage-color(purple, 300), ), hover: ( color: sage-color(grey, 900), @@ -117,7 +117,7 @@ $-btn-subtle-styles: ( hover: sage-color(primary, 300), hover-background: sage-color(primary, 100), focus: sage-color(primary, 300), - focus-outline: sage-color(purple, 30), + focus-outline: sage-color(purple, 300), disabled: sage-color(primary, 200), ), primary: ( @@ -414,7 +414,7 @@ $-btn-loading-min-height: rem(36px); .sage-upload-card & { &.sage-btn--subtle:focus { - @include sage-focus-outline--update-color(sage-color(purple, 30)); + @include sage-focus-outline--update-color(sage-color(purple, 300)); } } diff --git a/packages/sage-assets/lib/stylesheets/components/_checkbox.scss b/packages/sage-assets/lib/stylesheets/components/_checkbox.scss index 02580fe76c..e64daed60f 100644 --- a/packages/sage-assets/lib/stylesheets/components/_checkbox.scss +++ b/packages/sage-assets/lib/stylesheets/components/_checkbox.scss @@ -33,7 +33,7 @@ $-checkbox-marker-offset: $-checkbox-marker-border * 2; // $-checkbox-focus-outline-size: rem(3px); $-checkbox-focus-outline-width: 2; -$-checkbox-focus-outline-color: sage-color(purple, 30); +$-checkbox-focus-outline-color: sage-color(purple, 300); .sage-checkbox { diff --git a/packages/sage-assets/lib/stylesheets/components/_choice.scss b/packages/sage-assets/lib/stylesheets/components/_choice.scss index 9fb8c59b50..9c59d682e0 100644 --- a/packages/sage-assets/lib/stylesheets/components/_choice.scss +++ b/packages/sage-assets/lib/stylesheets/components/_choice.scss @@ -66,7 +66,7 @@ $-choice-radio-color-checked-inner: map-get($sage-radio-colors, checked-inner); } &:focus-visible { - border-color: sage-color(purple, 30); + border-color: sage-color(purple, 300); outline: none; } diff --git a/packages/sage-assets/lib/stylesheets/components/_dropdown.scss b/packages/sage-assets/lib/stylesheets/components/_dropdown.scss index 66324a5acf..1d6fdfcf92 100644 --- a/packages/sage-assets/lib/stylesheets/components/_dropdown.scss +++ b/packages/sage-assets/lib/stylesheets/components/_dropdown.scss @@ -127,7 +127,7 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs); &:focus-within { outline: none; - @include sage-focus-outline--update-color(sage-color(purple, 30)); + @include sage-focus-outline--update-color(sage-color(purple, 300)); } } @@ -145,7 +145,7 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs); .sage-dropdown__item--disabled { &:active { - @include sage-focus-outline--update-color(sage-color(purple, 30)); + @include sage-focus-outline--update-color(sage-color(purple, 300)); } } @@ -162,7 +162,7 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs); .sage-dropdown__item-control { @include sage-button-style-reset(); @include sage-focus-outline($outline-offset-inline: 4px, $outline-offset-block: -2px); - @include sage-focus-outline--update-color(sage-color(purple, 30)); + @include sage-focus-outline--update-color(sage-color(purple, 300)); @extend %t-sage-body-med; @@ -193,7 +193,7 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs); &:focus-within { @include sage-focus-outline($outline-offset-inline: 4px, $outline-offset-block: -2px); - @include sage-focus-outline--update-color(sage-color(purple, 30)); + @include sage-focus-outline--update-color(sage-color(purple, 300)); &::after { opacity: 1; diff --git a/packages/sage-assets/lib/stylesheets/components/_hero.scss b/packages/sage-assets/lib/stylesheets/components/_hero.scss index 47d86a0000..6b264d97ee 100644 --- a/packages/sage-assets/lib/stylesheets/components/_hero.scss +++ b/packages/sage-assets/lib/stylesheets/components/_hero.scss @@ -134,7 +134,7 @@ $-hero-play-icon-background-color: sage-color(white); @include sage-focus-ring; &:focus { - @include sage-focus-outline--update-color(sage-color(purple, 30)); + @include sage-focus-outline--update-color(sage-color(purple, 300)); } } diff --git a/packages/sage-assets/lib/stylesheets/components/_link.scss b/packages/sage-assets/lib/stylesheets/components/_link.scss index e5243f0d15..6193f5e1c9 100644 --- a/packages/sage-assets/lib/stylesheets/components/_link.scss +++ b/packages/sage-assets/lib/stylesheets/components/_link.scss @@ -77,7 +77,7 @@ $-link-base-styles: ( &:focus-visible { color: sage-color(primary, 300); - @include sage-focus-outline--update-color(sage-color(purple, 30)); + @include sage-focus-outline--update-color(sage-color(purple, 300)); } .sage-card--interactive & { @@ -214,7 +214,7 @@ $-link-base-styles: ( $outline-offset-block: 4px, $outline-border-radius: sage-border(radius-round), ); - @include sage-focus-outline--update-color(sage-color(purple, 30)); + @include sage-focus-outline--update-color(sage-color(purple, 300)); } .sage-link--remove-underline { diff --git a/packages/sage-assets/lib/stylesheets/components/_media_tile.scss b/packages/sage-assets/lib/stylesheets/components/_media_tile.scss index 71a45b6760..519870434f 100644 --- a/packages/sage-assets/lib/stylesheets/components/_media_tile.scss +++ b/packages/sage-assets/lib/stylesheets/components/_media_tile.scss @@ -82,7 +82,7 @@ $-media-tile-breakpoints: ( &::after { border-width: rem(2px); - border-color: sage-color(purple, 30); + border-color: sage-color(purple, 300); } } } diff --git a/packages/sage-assets/lib/stylesheets/components/_nav.scss b/packages/sage-assets/lib/stylesheets/components/_nav.scss index 02d7d49b71..aaaee45f44 100644 --- a/packages/sage-assets/lib/stylesheets/components/_nav.scss +++ b/packages/sage-assets/lib/stylesheets/components/_nav.scss @@ -36,7 +36,7 @@ $-nav-subitem-border-width: rem(2px); $outline-offset-block: -1, $outline-border-radius: sage-border(radius-medium), ); - @include sage-focus-outline--update-color(sage-color(purple, 30)); + @include sage-focus-outline--update-color(sage-color(purple, 300)); display: flex; align-items: center; @@ -63,7 +63,7 @@ $-nav-subitem-border-width: rem(2px); @extend %t-sage-body-small-med; &.sage-nav__link--active { - @include sage-focus-outline--update-color(sage-color(purple, 30)); + @include sage-focus-outline--update-color(sage-color(purple, 300)); background: $-nav-color-background; } @@ -88,7 +88,7 @@ $-nav-subitem-border-width: rem(2px); &:not(.sage-nav__list--sub) { .sage-nav__link--active { - @include sage-focus-outline--update-color(sage-color(purple, 30)); + @include sage-focus-outline--update-color(sage-color(purple, 300)); } .sage-nav__link--active::after { diff --git a/packages/sage-assets/lib/stylesheets/components/_status_icon.scss b/packages/sage-assets/lib/stylesheets/components/_status_icon.scss index 0bb799a404..ad8afc716d 100644 --- a/packages/sage-assets/lib/stylesheets/components/_status_icon.scss +++ b/packages/sage-assets/lib/stylesheets/components/_status_icon.scss @@ -20,7 +20,7 @@ $outline-offset-block: 4px, $outline-border-radius: sage-border(radius-round), ); - @include sage-focus-outline--update-color(sage-color(purple, 30)); + @include sage-focus-outline--update-color(sage-color(purple, 300)); &:hover:not(:focus):not(:active) { color: sage-color(grey, 900); diff --git a/packages/sage-assets/lib/stylesheets/components/_toast.scss b/packages/sage-assets/lib/stylesheets/components/_toast.scss index ef85ae0a43..0b506862af 100644 --- a/packages/sage-assets/lib/stylesheets/components/_toast.scss +++ b/packages/sage-assets/lib/stylesheets/components/_toast.scss @@ -161,7 +161,7 @@ $-toast-bottom-spacing: sage-spacing(xs); text-decoration: underline; @include sage-focus-outline($outline-offset-inline: 4px); - @include sage-focus-outline--update-color(sage-color(purple, 30)); + @include sage-focus-outline--update-color(sage-color(purple, 300)); } @keyframes rotate { diff --git a/packages/sage-assets/lib/stylesheets/components/_typeahead.scss b/packages/sage-assets/lib/stylesheets/components/_typeahead.scss index b5732348c5..a276d8197a 100644 --- a/packages/sage-assets/lib/stylesheets/components/_typeahead.scss +++ b/packages/sage-assets/lib/stylesheets/components/_typeahead.scss @@ -58,7 +58,7 @@ $-typeahead-item-height: rem(68px); $outline-offset-inline: -4px, $outline-animation-speed: 0.05s ); - @include sage-focus-outline--update-color(sage-color(purple, 30)); + @include sage-focus-outline--update-color(sage-color(purple, 300)); display: grid; position: unset; // Undo position defined in sage-focus-outline() diff --git a/packages/sage-assets/lib/stylesheets/core/_variables.scss b/packages/sage-assets/lib/stylesheets/core/_variables.scss index 106b3c3d77..4e8ddb0e35 100644 --- a/packages/sage-assets/lib/stylesheets/core/_variables.scss +++ b/packages/sage-assets/lib/stylesheets/core/_variables.scss @@ -103,7 +103,7 @@ $sage-text-colors: ( /// $sage-toolbar-button-borders: ( default: 0 0 0 1px sage-color(grey, 500), - focus: 0 0 0 2px sage-color(purple, 30), + focus: 0 0 0 2px sage-color(purple, 300), hover: 0 0 0 1px sage-color(charcoal, 100), hover-large: 0 0 0 2px sage-color(charcoal, 100), active-hover: 0 0 0 4px sage-color(primary, 200), diff --git a/packages/sage-assets/lib/stylesheets/core/mixins/_sage.scss b/packages/sage-assets/lib/stylesheets/core/mixins/_sage.scss index 729de27e34..5447a35b1d 100644 --- a/packages/sage-assets/lib/stylesheets/core/mixins/_sage.scss +++ b/packages/sage-assets/lib/stylesheets/core/mixins/_sage.scss @@ -178,7 +178,7 @@ /// @param {time} $focus-animation-speed [0.2s] How quickly the focus ring animates on activation /// @mixin sage-focus-ring( - $focus-shadow: sage-color(purple, 30), + $focus-shadow: sage-color(purple, 300), $focus-width-inner: 1px, $focus-width-outter: 3px ) { From a72be755b66291e0e44c46159d83f5a87b01c098 Mon Sep 17 00:00:00 2001 From: Julian Skinner Date: Thu, 5 Sep 2024 14:58:20 -0500 Subject: [PATCH 27/31] style: update additional 2 digit token value to 3 digit token values --- .../lib/stylesheets/components/_alert.scss | 22 +++++++++---------- .../lib/stylesheets/core/_variables.scss | 2 +- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/sage-assets/lib/stylesheets/components/_alert.scss b/packages/sage-assets/lib/stylesheets/components/_alert.scss index d659545a53..f22894dc2d 100644 --- a/packages/sage-assets/lib/stylesheets/components/_alert.scss +++ b/packages/sage-assets/lib/stylesheets/components/_alert.scss @@ -35,16 +35,16 @@ $-alert-icon-colors: ( ); $-alert-border-colors: ( - default: sage-color(grey, 30), - draft: sage-color(grey, 30), - info: sage-color(blue, 30), - published: sage-color(green, 30), - success: sage-color(green, 30), - warning: sage-color(yellow, 30), - approaching: sage-color(yellow, 30), - reached: sage-color(mercury, 30), - exceeded: sage-color(red, 30), - danger: sage-color(red, 30), + default: sage-color(grey, 300), + draft: sage-color(grey, 300), + info: sage-color(blue, 300), + published: sage-color(green, 300), + success: sage-color(green, 300), + warning: sage-color(yellow, 300), + approaching: sage-color(yellow, 300), + reached: sage-color(mercury, 300), + exceeded: sage-color(red, 300), + danger: sage-color(red, 300), ); .sage-alert { @@ -54,7 +54,7 @@ $-alert-border-colors: ( gap: sage-spacing(sm); padding: sage-spacing(); margin-bottom: sage-spacing(); - border: 1px solid sage-color(grey, 30); + border: 1px solid sage-color(grey, 300); border-radius: sage-border(radius-large); .sage-frame > &, diff --git a/packages/sage-assets/lib/stylesheets/core/_variables.scss b/packages/sage-assets/lib/stylesheets/core/_variables.scss index 4e8ddb0e35..3a8e3e5c3b 100644 --- a/packages/sage-assets/lib/stylesheets/core/_variables.scss +++ b/packages/sage-assets/lib/stylesheets/core/_variables.scss @@ -15,7 +15,7 @@ $sage-greet-font-path: "#{$sage-font-cdn-root}/greet"; /// $sage-active-underline-configs: ( height: rem(3px), - color: sage-color(mercury, 50), + color: sage-color(mercury, 500), ); /// From 6e6323e18b3125675cd3fa92c2257981bd80695c Mon Sep 17 00:00:00 2001 From: Quinton Jason Date: Thu, 5 Sep 2024 16:05:36 -0500 Subject: [PATCH 28/31] style: added zero to mercury 30 --- packages/sage-react/lib/EmptyState/EmptyState.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/sage-react/lib/EmptyState/EmptyState.jsx b/packages/sage-react/lib/EmptyState/EmptyState.jsx index 9e2ac7347a..21331d83ca 100644 --- a/packages/sage-react/lib/EmptyState/EmptyState.jsx +++ b/packages/sage-react/lib/EmptyState/EmptyState.jsx @@ -44,7 +44,7 @@ export const EmptyState = ({ {icon && (
Date: Fri, 6 Sep 2024 10:45:36 -0500 Subject: [PATCH 29/31] style: update templating to wrap 050 values in single-quotes --- .../app/sage_tokens/sage_dictionary.rb | 112 +++++----- .../lib/stylesheets/dictionary/_tokens.scss | 202 +++++++++--------- .../lib/configs/dictionary/tokens.js | 112 +++++----- style-dictionary/bin/templating.js | 7 + .../templates/presets/jsx/tokens.hbs | 6 +- style-dictionary/tokens/color/base.json | 42 ++-- 6 files changed, 244 insertions(+), 237 deletions(-) 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 574fc3d05d..89be719d7e 100644 --- a/docs/lib/sage_rails/app/sage_tokens/sage_dictionary.rb +++ b/docs/lib/sage_rails/app/sage_tokens/sage_dictionary.rb @@ -21,9 +21,6 @@ module SageDictionary # # Static vars for COLOR BASE # - SD_SAGE_COLOR_BASE_BLUE_50_HEX = "#fafcff" - SD_SAGE_COLOR_BASE_BLUE_50_CODE = "blue-50" - SD_SAGE_COLOR_BASE_BLUE_50_CLASSNAME = "t-sage--color-blue-50" SD_SAGE_COLOR_BASE_BLUE_100_HEX = "#eff6ff" SD_SAGE_COLOR_BASE_BLUE_100_CODE = "blue-100" SD_SAGE_COLOR_BASE_BLUE_100_CLASSNAME = "t-sage--color-blue-100" @@ -57,9 +54,9 @@ module SageDictionary SD_SAGE_COLOR_BASE_BLUE_950_HEX = "#172554" SD_SAGE_COLOR_BASE_BLUE_950_CODE = "blue-950" SD_SAGE_COLOR_BASE_BLUE_950_CLASSNAME = "t-sage--color-blue-950" - SD_SAGE_COLOR_BASE_GREEN_50_HEX = "#fbfefc" - SD_SAGE_COLOR_BASE_GREEN_50_CODE = "green-50" - SD_SAGE_COLOR_BASE_GREEN_50_CLASSNAME = "t-sage--color-green-50" + SD_SAGE_COLOR_BASE_BLUE_050_HEX = "#fafcff" + SD_SAGE_COLOR_BASE_BLUE_050_CODE = "blue-050" + SD_SAGE_COLOR_BASE_BLUE_050_CLASSNAME = "t-sage--color-blue-050" SD_SAGE_COLOR_BASE_GREEN_100_HEX = "#edfcf2" SD_SAGE_COLOR_BASE_GREEN_100_CODE = "green-100" SD_SAGE_COLOR_BASE_GREEN_100_CLASSNAME = "t-sage--color-green-100" @@ -93,9 +90,9 @@ module SageDictionary SD_SAGE_COLOR_BASE_GREEN_950_HEX = "#052e1c" SD_SAGE_COLOR_BASE_GREEN_950_CODE = "green-950" SD_SAGE_COLOR_BASE_GREEN_950_CLASSNAME = "t-sage--color-green-950" - SD_SAGE_COLOR_BASE_MERCURY_50_HEX = "#fffcfa" - SD_SAGE_COLOR_BASE_MERCURY_50_CODE = "mercury-50" - SD_SAGE_COLOR_BASE_MERCURY_50_CLASSNAME = "t-sage--color-mercury-50" + SD_SAGE_COLOR_BASE_GREEN_050_HEX = "#fbfefc" + SD_SAGE_COLOR_BASE_GREEN_050_CODE = "green-050" + SD_SAGE_COLOR_BASE_GREEN_050_CLASSNAME = "t-sage--color-green-050" SD_SAGE_COLOR_BASE_MERCURY_100_HEX = "#fff3ed" SD_SAGE_COLOR_BASE_MERCURY_100_CODE = "mercury-100" SD_SAGE_COLOR_BASE_MERCURY_100_CLASSNAME = "t-sage--color-mercury-100" @@ -129,6 +126,9 @@ module SageDictionary SD_SAGE_COLOR_BASE_MERCURY_950_HEX = "#450506" SD_SAGE_COLOR_BASE_MERCURY_950_CODE = "mercury-950" SD_SAGE_COLOR_BASE_MERCURY_950_CLASSNAME = "t-sage--color-mercury-950" + SD_SAGE_COLOR_BASE_MERCURY_050_HEX = "#fffcfa" + SD_SAGE_COLOR_BASE_MERCURY_050_CODE = "mercury-050" + SD_SAGE_COLOR_BASE_MERCURY_050_CLASSNAME = "t-sage--color-mercury-050" 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" @@ -159,9 +159,6 @@ module SageDictionary SD_SAGE_COLOR_BASE_SAGE_500_HEX = "#052e1c" SD_SAGE_COLOR_BASE_SAGE_500_CODE = "sage-500" SD_SAGE_COLOR_BASE_SAGE_500_CLASSNAME = "t-sage--color-sage-500" - SD_SAGE_COLOR_BASE_YELLOW_50_HEX = "#fffefa" - SD_SAGE_COLOR_BASE_YELLOW_50_CODE = "yellow-50" - SD_SAGE_COLOR_BASE_YELLOW_50_CLASSNAME = "t-sage--color-yellow-50" SD_SAGE_COLOR_BASE_YELLOW_100_HEX = "#fffbeb" SD_SAGE_COLOR_BASE_YELLOW_100_CODE = "yellow-100" SD_SAGE_COLOR_BASE_YELLOW_100_CLASSNAME = "t-sage--color-yellow-100" @@ -195,9 +192,9 @@ module SageDictionary SD_SAGE_COLOR_BASE_YELLOW_950_HEX = "#451902" SD_SAGE_COLOR_BASE_YELLOW_950_CODE = "yellow-950" SD_SAGE_COLOR_BASE_YELLOW_950_CLASSNAME = "t-sage--color-yellow-950" - SD_SAGE_COLOR_BASE_RED_50_HEX = "#fffafa" - SD_SAGE_COLOR_BASE_RED_50_CODE = "red-50" - SD_SAGE_COLOR_BASE_RED_50_CLASSNAME = "t-sage--color-red-50" + SD_SAGE_COLOR_BASE_YELLOW_050_HEX = "#fffefa" + SD_SAGE_COLOR_BASE_YELLOW_050_CODE = "yellow-050" + SD_SAGE_COLOR_BASE_YELLOW_050_CLASSNAME = "t-sage--color-yellow-050" SD_SAGE_COLOR_BASE_RED_100_HEX = "#fef2f2" SD_SAGE_COLOR_BASE_RED_100_CODE = "red-100" SD_SAGE_COLOR_BASE_RED_100_CLASSNAME = "t-sage--color-red-100" @@ -231,6 +228,9 @@ module SageDictionary SD_SAGE_COLOR_BASE_RED_950_HEX = "#572627" SD_SAGE_COLOR_BASE_RED_950_CODE = "red-950" SD_SAGE_COLOR_BASE_RED_950_CLASSNAME = "t-sage--color-red-950" + SD_SAGE_COLOR_BASE_RED_050_HEX = "#fffafa" + SD_SAGE_COLOR_BASE_RED_050_CODE = "red-050" + SD_SAGE_COLOR_BASE_RED_050_CLASSNAME = "t-sage--color-red-050" SD_SAGE_COLOR_BASE_ORANGE_100_HEX = "#ffe3d4" SD_SAGE_COLOR_BASE_ORANGE_100_CODE = "orange-100" SD_SAGE_COLOR_BASE_ORANGE_100_CLASSNAME = "t-sage--color-orange-100" @@ -246,9 +246,6 @@ module SageDictionary SD_SAGE_COLOR_BASE_ORANGE_500_HEX = "#450506" SD_SAGE_COLOR_BASE_ORANGE_500_CODE = "orange-500" SD_SAGE_COLOR_BASE_ORANGE_500_CLASSNAME = "t-sage--color-orange-500" - SD_SAGE_COLOR_BASE_PURPLE_50_HEX = "#fafbff" - SD_SAGE_COLOR_BASE_PURPLE_50_CODE = "purple-50" - SD_SAGE_COLOR_BASE_PURPLE_50_CLASSNAME = "t-sage--color-purple-50" SD_SAGE_COLOR_BASE_PURPLE_100_HEX = "#edf1ff" SD_SAGE_COLOR_BASE_PURPLE_100_CODE = "purple-100" SD_SAGE_COLOR_BASE_PURPLE_100_CLASSNAME = "t-sage--color-purple-100" @@ -282,6 +279,9 @@ module SageDictionary SD_SAGE_COLOR_BASE_PURPLE_950_HEX = "#221b4b" SD_SAGE_COLOR_BASE_PURPLE_950_CODE = "purple-950" SD_SAGE_COLOR_BASE_PURPLE_950_CLASSNAME = "t-sage--color-purple-950" + SD_SAGE_COLOR_BASE_PURPLE_050_HEX = "#fafbff" + SD_SAGE_COLOR_BASE_PURPLE_050_CODE = "purple-050" + SD_SAGE_COLOR_BASE_PURPLE_050_CLASSNAME = "t-sage--color-purple-050" SD_SAGE_COLOR_BASE_CHARCOAL_100_HEX = "#828180" SD_SAGE_COLOR_BASE_CHARCOAL_100_CODE = "charcoal-100" SD_SAGE_COLOR_BASE_CHARCOAL_100_CLASSNAME = "t-sage--color-charcoal-100" @@ -297,9 +297,6 @@ module SageDictionary SD_SAGE_COLOR_BASE_CHARCOAL_500_HEX = "#1a1a19" SD_SAGE_COLOR_BASE_CHARCOAL_500_CODE = "charcoal-500" SD_SAGE_COLOR_BASE_CHARCOAL_500_CLASSNAME = "t-sage--color-charcoal-500" - SD_SAGE_COLOR_BASE_GREY_50_HEX = "#fcfcfc" - SD_SAGE_COLOR_BASE_GREY_50_CODE = "grey-50" - SD_SAGE_COLOR_BASE_GREY_50_CLASSNAME = "t-sage--color-grey-50" SD_SAGE_COLOR_BASE_GREY_100_HEX = "#f8f8f8" SD_SAGE_COLOR_BASE_GREY_100_CODE = "grey-100" SD_SAGE_COLOR_BASE_GREY_100_CLASSNAME = "t-sage--color-grey-100" @@ -333,6 +330,9 @@ module SageDictionary SD_SAGE_COLOR_BASE_GREY_950_HEX = "#1a1a19" SD_SAGE_COLOR_BASE_GREY_950_CODE = "grey-950" SD_SAGE_COLOR_BASE_GREY_950_CLASSNAME = "t-sage--color-grey-950" + SD_SAGE_COLOR_BASE_GREY_050_HEX = "#fcfcfc" + SD_SAGE_COLOR_BASE_GREY_050_CODE = "grey-050" + SD_SAGE_COLOR_BASE_GREY_050_CLASSNAME = "t-sage--color-grey-050" SD_SAGE_COLOR_BASE_WHITE_100_HEX = "#fff" SD_SAGE_COLOR_BASE_WHITE_100_CODE = "white-100" SD_SAGE_COLOR_BASE_WHITE_100_CLASSNAME = "t-sage--color-white-100" @@ -369,11 +369,6 @@ module SageDictionary # SD_SAGE_COLOR = { "BLUE": { - "50": { - "HEX": SD_SAGE_COLOR_BASE_BLUE_50_HEX, - "CODE": SD_SAGE_COLOR_BASE_BLUE_50_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_BLUE_50_CLASSNAME, - }, "100": { "HEX": SD_SAGE_COLOR_BASE_BLUE_100_HEX, "CODE": SD_SAGE_COLOR_BASE_BLUE_100_CODE, @@ -429,13 +424,13 @@ module SageDictionary "CODE": SD_SAGE_COLOR_BASE_BLUE_950_CODE, "CLASSNAME": SD_SAGE_COLOR_BASE_BLUE_950_CLASSNAME, }, + "050": { + "HEX": SD_SAGE_COLOR_BASE_BLUE_050_HEX, + "CODE": SD_SAGE_COLOR_BASE_BLUE_050_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_BLUE_050_CLASSNAME, + }, }, "GREEN": { - "50": { - "HEX": SD_SAGE_COLOR_BASE_GREEN_50_HEX, - "CODE": SD_SAGE_COLOR_BASE_GREEN_50_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_GREEN_50_CLASSNAME, - }, "100": { "HEX": SD_SAGE_COLOR_BASE_GREEN_100_HEX, "CODE": SD_SAGE_COLOR_BASE_GREEN_100_CODE, @@ -491,13 +486,13 @@ module SageDictionary "CODE": SD_SAGE_COLOR_BASE_GREEN_950_CODE, "CLASSNAME": SD_SAGE_COLOR_BASE_GREEN_950_CLASSNAME, }, + "050": { + "HEX": SD_SAGE_COLOR_BASE_GREEN_050_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREEN_050_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREEN_050_CLASSNAME, + }, }, "MERCURY": { - "50": { - "HEX": SD_SAGE_COLOR_BASE_MERCURY_50_HEX, - "CODE": SD_SAGE_COLOR_BASE_MERCURY_50_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_MERCURY_50_CLASSNAME, - }, "100": { "HEX": SD_SAGE_COLOR_BASE_MERCURY_100_HEX, "CODE": SD_SAGE_COLOR_BASE_MERCURY_100_CODE, @@ -553,6 +548,11 @@ module SageDictionary "CODE": SD_SAGE_COLOR_BASE_MERCURY_950_CODE, "CLASSNAME": SD_SAGE_COLOR_BASE_MERCURY_950_CLASSNAME, }, + "050": { + "HEX": SD_SAGE_COLOR_BASE_MERCURY_050_HEX, + "CODE": SD_SAGE_COLOR_BASE_MERCURY_050_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_MERCURY_050_CLASSNAME, + }, }, "PRIMARY": { "100": { @@ -609,11 +609,6 @@ module SageDictionary }, }, "YELLOW": { - "50": { - "HEX": SD_SAGE_COLOR_BASE_YELLOW_50_HEX, - "CODE": SD_SAGE_COLOR_BASE_YELLOW_50_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_50_CLASSNAME, - }, "100": { "HEX": SD_SAGE_COLOR_BASE_YELLOW_100_HEX, "CODE": SD_SAGE_COLOR_BASE_YELLOW_100_CODE, @@ -669,13 +664,13 @@ module SageDictionary "CODE": SD_SAGE_COLOR_BASE_YELLOW_950_CODE, "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_950_CLASSNAME, }, + "050": { + "HEX": SD_SAGE_COLOR_BASE_YELLOW_050_HEX, + "CODE": SD_SAGE_COLOR_BASE_YELLOW_050_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_050_CLASSNAME, + }, }, "RED": { - "50": { - "HEX": SD_SAGE_COLOR_BASE_RED_50_HEX, - "CODE": SD_SAGE_COLOR_BASE_RED_50_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_RED_50_CLASSNAME, - }, "100": { "HEX": SD_SAGE_COLOR_BASE_RED_100_HEX, "CODE": SD_SAGE_COLOR_BASE_RED_100_CODE, @@ -731,6 +726,11 @@ module SageDictionary "CODE": SD_SAGE_COLOR_BASE_RED_950_CODE, "CLASSNAME": SD_SAGE_COLOR_BASE_RED_950_CLASSNAME, }, + "050": { + "HEX": SD_SAGE_COLOR_BASE_RED_050_HEX, + "CODE": SD_SAGE_COLOR_BASE_RED_050_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_RED_050_CLASSNAME, + }, }, "ORANGE": { "100": { @@ -760,11 +760,6 @@ module SageDictionary }, }, "PURPLE": { - "50": { - "HEX": SD_SAGE_COLOR_BASE_PURPLE_50_HEX, - "CODE": SD_SAGE_COLOR_BASE_PURPLE_50_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_50_CLASSNAME, - }, "100": { "HEX": SD_SAGE_COLOR_BASE_PURPLE_100_HEX, "CODE": SD_SAGE_COLOR_BASE_PURPLE_100_CODE, @@ -820,6 +815,11 @@ module SageDictionary "CODE": SD_SAGE_COLOR_BASE_PURPLE_950_CODE, "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_950_CLASSNAME, }, + "050": { + "HEX": SD_SAGE_COLOR_BASE_PURPLE_050_HEX, + "CODE": SD_SAGE_COLOR_BASE_PURPLE_050_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_050_CLASSNAME, + }, }, "CHARCOAL": { "100": { @@ -849,11 +849,6 @@ module SageDictionary }, }, "GREY": { - "50": { - "HEX": SD_SAGE_COLOR_BASE_GREY_50_HEX, - "CODE": SD_SAGE_COLOR_BASE_GREY_50_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_50_CLASSNAME, - }, "100": { "HEX": SD_SAGE_COLOR_BASE_GREY_100_HEX, "CODE": SD_SAGE_COLOR_BASE_GREY_100_CODE, @@ -909,6 +904,11 @@ module SageDictionary "CODE": SD_SAGE_COLOR_BASE_GREY_950_CODE, "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_950_CLASSNAME, }, + "050": { + "HEX": SD_SAGE_COLOR_BASE_GREY_050_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREY_050_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_050_CLASSNAME, + }, }, "WHITE": { "100": { diff --git a/packages/sage-assets/lib/stylesheets/dictionary/_tokens.scss b/packages/sage-assets/lib/stylesheets/dictionary/_tokens.scss index 6ec67d894b..f7a726fbb0 100644 --- a/packages/sage-assets/lib/stylesheets/dictionary/_tokens.scss +++ b/packages/sage-assets/lib/stylesheets/dictionary/_tokens.scss @@ -22,18 +22,6 @@ // Static vars for color base // /// -/// color color-base-blue-50-hex -/// -$sd-sage-color-base-blue-50-hex: #fafcff; -/// -/// color color-base-blue-50-code -/// -$sd-sage-color-base-blue-50-code: "blue-50"; -/// -/// color color-base-blue-50-classname -/// -$sd-sage-color-base-blue-50-classname: "t-sage--color-blue-50"; -/// /// color color-base-blue-100-hex /// $sd-sage-color-base-blue-100-hex: #eff6ff; @@ -166,17 +154,17 @@ $sd-sage-color-base-blue-950-code: "blue-950"; /// $sd-sage-color-base-blue-950-classname: "t-sage--color-blue-950"; /// -/// color color-base-green-50-hex +/// color color-base-blue-050-hex /// -$sd-sage-color-base-green-50-hex: #fbfefc; +$sd-sage-color-base-blue-050-hex: #fafcff; /// -/// color color-base-green-50-code +/// color color-base-blue-050-code /// -$sd-sage-color-base-green-50-code: "green-50"; +$sd-sage-color-base-blue-050-code: "blue-050"; /// -/// color color-base-green-50-classname +/// color color-base-blue-050-classname /// -$sd-sage-color-base-green-50-classname: "t-sage--color-green-50"; +$sd-sage-color-base-blue-050-classname: "t-sage--color-blue-050"; /// /// color color-base-green-100-hex /// @@ -310,17 +298,17 @@ $sd-sage-color-base-green-950-code: "green-950"; /// $sd-sage-color-base-green-950-classname: "t-sage--color-green-950"; /// -/// color color-base-mercury-50-hex +/// color color-base-green-050-hex /// -$sd-sage-color-base-mercury-50-hex: #fffcfa; +$sd-sage-color-base-green-050-hex: #fbfefc; /// -/// color color-base-mercury-50-code +/// color color-base-green-050-code /// -$sd-sage-color-base-mercury-50-code: "mercury-50"; +$sd-sage-color-base-green-050-code: "green-050"; /// -/// color color-base-mercury-50-classname +/// color color-base-green-050-classname /// -$sd-sage-color-base-mercury-50-classname: "t-sage--color-mercury-50"; +$sd-sage-color-base-green-050-classname: "t-sage--color-green-050"; /// /// color color-base-mercury-100-hex /// @@ -454,6 +442,18 @@ $sd-sage-color-base-mercury-950-code: "mercury-950"; /// $sd-sage-color-base-mercury-950-classname: "t-sage--color-mercury-950"; /// +/// color color-base-mercury-050-hex +/// +$sd-sage-color-base-mercury-050-hex: #fffcfa; +/// +/// color color-base-mercury-050-code +/// +$sd-sage-color-base-mercury-050-code: "mercury-050"; +/// +/// color color-base-mercury-050-classname +/// +$sd-sage-color-base-mercury-050-classname: "t-sage--color-mercury-050"; +/// /// color color-base-primary-100-hex /// $sd-sage-color-base-primary-100-hex: #dbe9fe; @@ -574,18 +574,6 @@ $sd-sage-color-base-sage-500-code: "sage-500"; /// $sd-sage-color-base-sage-500-classname: "t-sage--color-sage-500"; /// -/// color color-base-yellow-50-hex -/// -$sd-sage-color-base-yellow-50-hex: #fffefa; -/// -/// color color-base-yellow-50-code -/// -$sd-sage-color-base-yellow-50-code: "yellow-50"; -/// -/// color color-base-yellow-50-classname -/// -$sd-sage-color-base-yellow-50-classname: "t-sage--color-yellow-50"; -/// /// color color-base-yellow-100-hex /// $sd-sage-color-base-yellow-100-hex: #fffbeb; @@ -718,17 +706,17 @@ $sd-sage-color-base-yellow-950-code: "yellow-950"; /// $sd-sage-color-base-yellow-950-classname: "t-sage--color-yellow-950"; /// -/// color color-base-red-50-hex +/// color color-base-yellow-050-hex /// -$sd-sage-color-base-red-50-hex: #fffafa; +$sd-sage-color-base-yellow-050-hex: #fffefa; /// -/// color color-base-red-50-code +/// color color-base-yellow-050-code /// -$sd-sage-color-base-red-50-code: "red-50"; +$sd-sage-color-base-yellow-050-code: "yellow-050"; /// -/// color color-base-red-50-classname +/// color color-base-yellow-050-classname /// -$sd-sage-color-base-red-50-classname: "t-sage--color-red-50"; +$sd-sage-color-base-yellow-050-classname: "t-sage--color-yellow-050"; /// /// color color-base-red-100-hex /// @@ -862,6 +850,18 @@ $sd-sage-color-base-red-950-code: "red-950"; /// $sd-sage-color-base-red-950-classname: "t-sage--color-red-950"; /// +/// color color-base-red-050-hex +/// +$sd-sage-color-base-red-050-hex: #fffafa; +/// +/// color color-base-red-050-code +/// +$sd-sage-color-base-red-050-code: "red-050"; +/// +/// color color-base-red-050-classname +/// +$sd-sage-color-base-red-050-classname: "t-sage--color-red-050"; +/// /// color color-base-orange-100-hex /// $sd-sage-color-base-orange-100-hex: #ffe3d4; @@ -922,18 +922,6 @@ $sd-sage-color-base-orange-500-code: "orange-500"; /// $sd-sage-color-base-orange-500-classname: "t-sage--color-orange-500"; /// -/// color color-base-purple-50-hex -/// -$sd-sage-color-base-purple-50-hex: #fafbff; -/// -/// color color-base-purple-50-code -/// -$sd-sage-color-base-purple-50-code: "purple-50"; -/// -/// color color-base-purple-50-classname -/// -$sd-sage-color-base-purple-50-classname: "t-sage--color-purple-50"; -/// /// color color-base-purple-100-hex /// $sd-sage-color-base-purple-100-hex: #edf1ff; @@ -1066,6 +1054,18 @@ $sd-sage-color-base-purple-950-code: "purple-950"; /// $sd-sage-color-base-purple-950-classname: "t-sage--color-purple-950"; /// +/// color color-base-purple-050-hex +/// +$sd-sage-color-base-purple-050-hex: #fafbff; +/// +/// color color-base-purple-050-code +/// +$sd-sage-color-base-purple-050-code: "purple-050"; +/// +/// color color-base-purple-050-classname +/// +$sd-sage-color-base-purple-050-classname: "t-sage--color-purple-050"; +/// /// color color-base-charcoal-100-hex /// $sd-sage-color-base-charcoal-100-hex: #828180; @@ -1126,18 +1126,6 @@ $sd-sage-color-base-charcoal-500-code: "charcoal-500"; /// $sd-sage-color-base-charcoal-500-classname: "t-sage--color-charcoal-500"; /// -/// color color-base-grey-50-hex -/// -$sd-sage-color-base-grey-50-hex: #fcfcfc; -/// -/// color color-base-grey-50-code -/// -$sd-sage-color-base-grey-50-code: "grey-50"; -/// -/// color color-base-grey-50-classname -/// -$sd-sage-color-base-grey-50-classname: "t-sage--color-grey-50"; -/// /// color color-base-grey-100-hex /// $sd-sage-color-base-grey-100-hex: #f8f8f8; @@ -1270,6 +1258,18 @@ $sd-sage-color-base-grey-950-code: "grey-950"; /// $sd-sage-color-base-grey-950-classname: "t-sage--color-grey-950"; /// +/// color color-base-grey-050-hex +/// +$sd-sage-color-base-grey-050-hex: #fcfcfc; +/// +/// color color-base-grey-050-code +/// +$sd-sage-color-base-grey-050-code: "grey-050"; +/// +/// color color-base-grey-050-classname +/// +$sd-sage-color-base-grey-050-classname: "t-sage--color-grey-050"; +/// /// color color-base-white-100-hex /// $sd-sage-color-base-white-100-hex: #fff; @@ -1395,11 +1395,6 @@ $sd-sage-color-base-black-500-classname: "t-sage--color-black-500"; /// $sd-sage-color: ( blue: ( - 50: ( - hex: $sd-sage-color-base-blue-50-hex, - code: $sd-sage-color-base-blue-50-code, - classname: $sd-sage-color-base-blue-50-classname, - ), 100: ( hex: $sd-sage-color-base-blue-100-hex, code: $sd-sage-color-base-blue-100-code, @@ -1455,13 +1450,13 @@ $sd-sage-color: ( code: $sd-sage-color-base-blue-950-code, classname: $sd-sage-color-base-blue-950-classname, ), + 050: ( + hex: $sd-sage-color-base-blue-050-hex, + code: $sd-sage-color-base-blue-050-code, + classname: $sd-sage-color-base-blue-050-classname, + ), ), green: ( - 50: ( - hex: $sd-sage-color-base-green-50-hex, - code: $sd-sage-color-base-green-50-code, - classname: $sd-sage-color-base-green-50-classname, - ), 100: ( hex: $sd-sage-color-base-green-100-hex, code: $sd-sage-color-base-green-100-code, @@ -1517,13 +1512,13 @@ $sd-sage-color: ( code: $sd-sage-color-base-green-950-code, classname: $sd-sage-color-base-green-950-classname, ), + 050: ( + hex: $sd-sage-color-base-green-050-hex, + code: $sd-sage-color-base-green-050-code, + classname: $sd-sage-color-base-green-050-classname, + ), ), mercury: ( - 50: ( - hex: $sd-sage-color-base-mercury-50-hex, - code: $sd-sage-color-base-mercury-50-code, - classname: $sd-sage-color-base-mercury-50-classname, - ), 100: ( hex: $sd-sage-color-base-mercury-100-hex, code: $sd-sage-color-base-mercury-100-code, @@ -1579,6 +1574,11 @@ $sd-sage-color: ( code: $sd-sage-color-base-mercury-950-code, classname: $sd-sage-color-base-mercury-950-classname, ), + 050: ( + hex: $sd-sage-color-base-mercury-050-hex, + code: $sd-sage-color-base-mercury-050-code, + classname: $sd-sage-color-base-mercury-050-classname, + ), ), primary: ( 100: ( @@ -1635,11 +1635,6 @@ $sd-sage-color: ( ), ), yellow: ( - 50: ( - hex: $sd-sage-color-base-yellow-50-hex, - code: $sd-sage-color-base-yellow-50-code, - classname: $sd-sage-color-base-yellow-50-classname, - ), 100: ( hex: $sd-sage-color-base-yellow-100-hex, code: $sd-sage-color-base-yellow-100-code, @@ -1695,13 +1690,13 @@ $sd-sage-color: ( code: $sd-sage-color-base-yellow-950-code, classname: $sd-sage-color-base-yellow-950-classname, ), + 050: ( + hex: $sd-sage-color-base-yellow-050-hex, + code: $sd-sage-color-base-yellow-050-code, + classname: $sd-sage-color-base-yellow-050-classname, + ), ), red: ( - 50: ( - hex: $sd-sage-color-base-red-50-hex, - code: $sd-sage-color-base-red-50-code, - classname: $sd-sage-color-base-red-50-classname, - ), 100: ( hex: $sd-sage-color-base-red-100-hex, code: $sd-sage-color-base-red-100-code, @@ -1757,6 +1752,11 @@ $sd-sage-color: ( code: $sd-sage-color-base-red-950-code, classname: $sd-sage-color-base-red-950-classname, ), + 050: ( + hex: $sd-sage-color-base-red-050-hex, + code: $sd-sage-color-base-red-050-code, + classname: $sd-sage-color-base-red-050-classname, + ), ), orange: ( 100: ( @@ -1786,11 +1786,6 @@ $sd-sage-color: ( ), ), purple: ( - 50: ( - hex: $sd-sage-color-base-purple-50-hex, - code: $sd-sage-color-base-purple-50-code, - classname: $sd-sage-color-base-purple-50-classname, - ), 100: ( hex: $sd-sage-color-base-purple-100-hex, code: $sd-sage-color-base-purple-100-code, @@ -1846,6 +1841,11 @@ $sd-sage-color: ( code: $sd-sage-color-base-purple-950-code, classname: $sd-sage-color-base-purple-950-classname, ), + 050: ( + hex: $sd-sage-color-base-purple-050-hex, + code: $sd-sage-color-base-purple-050-code, + classname: $sd-sage-color-base-purple-050-classname, + ), ), charcoal: ( 100: ( @@ -1875,11 +1875,6 @@ $sd-sage-color: ( ), ), grey: ( - 50: ( - hex: $sd-sage-color-base-grey-50-hex, - code: $sd-sage-color-base-grey-50-code, - classname: $sd-sage-color-base-grey-50-classname, - ), 100: ( hex: $sd-sage-color-base-grey-100-hex, code: $sd-sage-color-base-grey-100-code, @@ -1935,6 +1930,11 @@ $sd-sage-color: ( code: $sd-sage-color-base-grey-950-code, classname: $sd-sage-color-base-grey-950-classname, ), + 050: ( + hex: $sd-sage-color-base-grey-050-hex, + code: $sd-sage-color-base-grey-050-code, + classname: $sd-sage-color-base-grey-050-classname, + ), ), white: ( 100: ( diff --git a/packages/sage-react/lib/configs/dictionary/tokens.js b/packages/sage-react/lib/configs/dictionary/tokens.js index c939248904..af0c112b98 100644 --- a/packages/sage-react/lib/configs/dictionary/tokens.js +++ b/packages/sage-react/lib/configs/dictionary/tokens.js @@ -19,9 +19,6 @@ // // Static vars for COLOR BASE // -export const COLOR_BASE_BLUE_50_HEX = '#fafcff'; -export const COLOR_BASE_BLUE_50_CODE = 'blue-50'; -export const COLOR_BASE_BLUE_50_CLASSNAME = 't-sage--color-blue-50'; export const COLOR_BASE_BLUE_100_HEX = '#eff6ff'; export const COLOR_BASE_BLUE_100_CODE = 'blue-100'; export const COLOR_BASE_BLUE_100_CLASSNAME = 't-sage--color-blue-100'; @@ -55,9 +52,9 @@ export const COLOR_BASE_BLUE_900_CLASSNAME = 't-sage--color-blue-900'; export const COLOR_BASE_BLUE_950_HEX = '#172554'; export const COLOR_BASE_BLUE_950_CODE = 'blue-950'; export const COLOR_BASE_BLUE_950_CLASSNAME = 't-sage--color-blue-950'; -export const COLOR_BASE_GREEN_50_HEX = '#fbfefc'; -export const COLOR_BASE_GREEN_50_CODE = 'green-50'; -export const COLOR_BASE_GREEN_50_CLASSNAME = 't-sage--color-green-50'; +export const COLOR_BASE_BLUE_050_HEX = '#fafcff'; +export const COLOR_BASE_BLUE_050_CODE = 'blue-050'; +export const COLOR_BASE_BLUE_050_CLASSNAME = 't-sage--color-blue-050'; export const COLOR_BASE_GREEN_100_HEX = '#edfcf2'; export const COLOR_BASE_GREEN_100_CODE = 'green-100'; export const COLOR_BASE_GREEN_100_CLASSNAME = 't-sage--color-green-100'; @@ -91,9 +88,9 @@ export const COLOR_BASE_GREEN_900_CLASSNAME = 't-sage--color-green-900'; export const COLOR_BASE_GREEN_950_HEX = '#052e1c'; export const COLOR_BASE_GREEN_950_CODE = 'green-950'; export const COLOR_BASE_GREEN_950_CLASSNAME = 't-sage--color-green-950'; -export const COLOR_BASE_MERCURY_50_HEX = '#fffcfa'; -export const COLOR_BASE_MERCURY_50_CODE = 'mercury-50'; -export const COLOR_BASE_MERCURY_50_CLASSNAME = 't-sage--color-mercury-50'; +export const COLOR_BASE_GREEN_050_HEX = '#fbfefc'; +export const COLOR_BASE_GREEN_050_CODE = 'green-050'; +export const COLOR_BASE_GREEN_050_CLASSNAME = 't-sage--color-green-050'; export const COLOR_BASE_MERCURY_100_HEX = '#fff3ed'; export const COLOR_BASE_MERCURY_100_CODE = 'mercury-100'; export const COLOR_BASE_MERCURY_100_CLASSNAME = 't-sage--color-mercury-100'; @@ -127,6 +124,9 @@ export const COLOR_BASE_MERCURY_900_CLASSNAME = 't-sage--color-mercury-900'; export const COLOR_BASE_MERCURY_950_HEX = '#450506'; export const COLOR_BASE_MERCURY_950_CODE = 'mercury-950'; export const COLOR_BASE_MERCURY_950_CLASSNAME = 't-sage--color-mercury-950'; +export const COLOR_BASE_MERCURY_050_HEX = '#fffcfa'; +export const COLOR_BASE_MERCURY_050_CODE = 'mercury-050'; +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'; @@ -157,9 +157,6 @@ export const COLOR_BASE_SAGE_400_CLASSNAME = 't-sage--color-sage-400'; export const COLOR_BASE_SAGE_500_HEX = '#052e1c'; export const COLOR_BASE_SAGE_500_CODE = 'sage-500'; export const COLOR_BASE_SAGE_500_CLASSNAME = 't-sage--color-sage-500'; -export const COLOR_BASE_YELLOW_50_HEX = '#fffefa'; -export const COLOR_BASE_YELLOW_50_CODE = 'yellow-50'; -export const COLOR_BASE_YELLOW_50_CLASSNAME = 't-sage--color-yellow-50'; export const COLOR_BASE_YELLOW_100_HEX = '#fffbeb'; export const COLOR_BASE_YELLOW_100_CODE = 'yellow-100'; export const COLOR_BASE_YELLOW_100_CLASSNAME = 't-sage--color-yellow-100'; @@ -193,9 +190,9 @@ export const COLOR_BASE_YELLOW_900_CLASSNAME = 't-sage--color-yellow-900'; export const COLOR_BASE_YELLOW_950_HEX = '#451902'; export const COLOR_BASE_YELLOW_950_CODE = 'yellow-950'; export const COLOR_BASE_YELLOW_950_CLASSNAME = 't-sage--color-yellow-950'; -export const COLOR_BASE_RED_50_HEX = '#fffafa'; -export const COLOR_BASE_RED_50_CODE = 'red-50'; -export const COLOR_BASE_RED_50_CLASSNAME = 't-sage--color-red-50'; +export const COLOR_BASE_YELLOW_050_HEX = '#fffefa'; +export const COLOR_BASE_YELLOW_050_CODE = 'yellow-050'; +export const COLOR_BASE_YELLOW_050_CLASSNAME = 't-sage--color-yellow-050'; export const COLOR_BASE_RED_100_HEX = '#fef2f2'; export const COLOR_BASE_RED_100_CODE = 'red-100'; export const COLOR_BASE_RED_100_CLASSNAME = 't-sage--color-red-100'; @@ -229,6 +226,9 @@ export const COLOR_BASE_RED_900_CLASSNAME = 't-sage--color-red-900'; export const COLOR_BASE_RED_950_HEX = '#572627'; export const COLOR_BASE_RED_950_CODE = 'red-950'; export const COLOR_BASE_RED_950_CLASSNAME = 't-sage--color-red-950'; +export const COLOR_BASE_RED_050_HEX = '#fffafa'; +export const COLOR_BASE_RED_050_CODE = 'red-050'; +export const COLOR_BASE_RED_050_CLASSNAME = 't-sage--color-red-050'; export const COLOR_BASE_ORANGE_100_HEX = '#ffe3d4'; export const COLOR_BASE_ORANGE_100_CODE = 'orange-100'; export const COLOR_BASE_ORANGE_100_CLASSNAME = 't-sage--color-orange-100'; @@ -244,9 +244,6 @@ export const COLOR_BASE_ORANGE_400_CLASSNAME = 't-sage--color-orange-400'; export const COLOR_BASE_ORANGE_500_HEX = '#450506'; export const COLOR_BASE_ORANGE_500_CODE = 'orange-500'; export const COLOR_BASE_ORANGE_500_CLASSNAME = 't-sage--color-orange-500'; -export const COLOR_BASE_PURPLE_50_HEX = '#fafbff'; -export const COLOR_BASE_PURPLE_50_CODE = 'purple-50'; -export const COLOR_BASE_PURPLE_50_CLASSNAME = 't-sage--color-purple-50'; export const COLOR_BASE_PURPLE_100_HEX = '#edf1ff'; export const COLOR_BASE_PURPLE_100_CODE = 'purple-100'; export const COLOR_BASE_PURPLE_100_CLASSNAME = 't-sage--color-purple-100'; @@ -280,6 +277,9 @@ export const COLOR_BASE_PURPLE_900_CLASSNAME = 't-sage--color-purple-900'; export const COLOR_BASE_PURPLE_950_HEX = '#221b4b'; export const COLOR_BASE_PURPLE_950_CODE = 'purple-950'; export const COLOR_BASE_PURPLE_950_CLASSNAME = 't-sage--color-purple-950'; +export const COLOR_BASE_PURPLE_050_HEX = '#fafbff'; +export const COLOR_BASE_PURPLE_050_CODE = 'purple-050'; +export const COLOR_BASE_PURPLE_050_CLASSNAME = 't-sage--color-purple-050'; export const COLOR_BASE_CHARCOAL_100_HEX = '#828180'; export const COLOR_BASE_CHARCOAL_100_CODE = 'charcoal-100'; export const COLOR_BASE_CHARCOAL_100_CLASSNAME = 't-sage--color-charcoal-100'; @@ -295,9 +295,6 @@ export const COLOR_BASE_CHARCOAL_400_CLASSNAME = 't-sage--color-charcoal-400'; export const COLOR_BASE_CHARCOAL_500_HEX = '#1a1a19'; export const COLOR_BASE_CHARCOAL_500_CODE = 'charcoal-500'; export const COLOR_BASE_CHARCOAL_500_CLASSNAME = 't-sage--color-charcoal-500'; -export const COLOR_BASE_GREY_50_HEX = '#fcfcfc'; -export const COLOR_BASE_GREY_50_CODE = 'grey-50'; -export const COLOR_BASE_GREY_50_CLASSNAME = 't-sage--color-grey-50'; export const COLOR_BASE_GREY_100_HEX = '#f8f8f8'; export const COLOR_BASE_GREY_100_CODE = 'grey-100'; export const COLOR_BASE_GREY_100_CLASSNAME = 't-sage--color-grey-100'; @@ -331,6 +328,9 @@ export const COLOR_BASE_GREY_900_CLASSNAME = 't-sage--color-grey-900'; export const COLOR_BASE_GREY_950_HEX = '#1a1a19'; export const COLOR_BASE_GREY_950_CODE = 'grey-950'; export const COLOR_BASE_GREY_950_CLASSNAME = 't-sage--color-grey-950'; +export const COLOR_BASE_GREY_050_HEX = '#fcfcfc'; +export const COLOR_BASE_GREY_050_CODE = 'grey-050'; +export const COLOR_BASE_GREY_050_CLASSNAME = 't-sage--color-grey-050'; export const COLOR_BASE_WHITE_100_HEX = '#fff'; export const COLOR_BASE_WHITE_100_CODE = 'white-100'; export const COLOR_BASE_WHITE_100_CLASSNAME = 't-sage--color-white-100'; @@ -367,11 +367,6 @@ export const COLOR_BASE_BLACK_500_CLASSNAME = 't-sage--color-black-500'; // export const COLOR = { BLUE: { - 50: { - HEX: COLOR_BASE_BLUE_50_HEX, - CODE: COLOR_BASE_BLUE_50_CODE, - CLASSNAME: COLOR_BASE_BLUE_50_CLASSNAME, - }, 100: { HEX: COLOR_BASE_BLUE_100_HEX, CODE: COLOR_BASE_BLUE_100_CODE, @@ -427,13 +422,13 @@ export const COLOR = { CODE: COLOR_BASE_BLUE_950_CODE, CLASSNAME: COLOR_BASE_BLUE_950_CLASSNAME, }, + '050': { + HEX: COLOR_BASE_BLUE_050_HEX, + CODE: COLOR_BASE_BLUE_050_CODE, + CLASSNAME: COLOR_BASE_BLUE_050_CLASSNAME, + }, }, GREEN: { - 50: { - HEX: COLOR_BASE_GREEN_50_HEX, - CODE: COLOR_BASE_GREEN_50_CODE, - CLASSNAME: COLOR_BASE_GREEN_50_CLASSNAME, - }, 100: { HEX: COLOR_BASE_GREEN_100_HEX, CODE: COLOR_BASE_GREEN_100_CODE, @@ -489,13 +484,13 @@ export const COLOR = { CODE: COLOR_BASE_GREEN_950_CODE, CLASSNAME: COLOR_BASE_GREEN_950_CLASSNAME, }, + '050': { + HEX: COLOR_BASE_GREEN_050_HEX, + CODE: COLOR_BASE_GREEN_050_CODE, + CLASSNAME: COLOR_BASE_GREEN_050_CLASSNAME, + }, }, MERCURY: { - 50: { - HEX: COLOR_BASE_MERCURY_50_HEX, - CODE: COLOR_BASE_MERCURY_50_CODE, - CLASSNAME: COLOR_BASE_MERCURY_50_CLASSNAME, - }, 100: { HEX: COLOR_BASE_MERCURY_100_HEX, CODE: COLOR_BASE_MERCURY_100_CODE, @@ -551,6 +546,11 @@ export const COLOR = { CODE: COLOR_BASE_MERCURY_950_CODE, CLASSNAME: COLOR_BASE_MERCURY_950_CLASSNAME, }, + '050': { + HEX: COLOR_BASE_MERCURY_050_HEX, + CODE: COLOR_BASE_MERCURY_050_CODE, + CLASSNAME: COLOR_BASE_MERCURY_050_CLASSNAME, + }, }, PRIMARY: { 100: { @@ -607,11 +607,6 @@ export const COLOR = { }, }, YELLOW: { - 50: { - HEX: COLOR_BASE_YELLOW_50_HEX, - CODE: COLOR_BASE_YELLOW_50_CODE, - CLASSNAME: COLOR_BASE_YELLOW_50_CLASSNAME, - }, 100: { HEX: COLOR_BASE_YELLOW_100_HEX, CODE: COLOR_BASE_YELLOW_100_CODE, @@ -667,13 +662,13 @@ export const COLOR = { CODE: COLOR_BASE_YELLOW_950_CODE, CLASSNAME: COLOR_BASE_YELLOW_950_CLASSNAME, }, + '050': { + HEX: COLOR_BASE_YELLOW_050_HEX, + CODE: COLOR_BASE_YELLOW_050_CODE, + CLASSNAME: COLOR_BASE_YELLOW_050_CLASSNAME, + }, }, RED: { - 50: { - HEX: COLOR_BASE_RED_50_HEX, - CODE: COLOR_BASE_RED_50_CODE, - CLASSNAME: COLOR_BASE_RED_50_CLASSNAME, - }, 100: { HEX: COLOR_BASE_RED_100_HEX, CODE: COLOR_BASE_RED_100_CODE, @@ -729,6 +724,11 @@ export const COLOR = { CODE: COLOR_BASE_RED_950_CODE, CLASSNAME: COLOR_BASE_RED_950_CLASSNAME, }, + '050': { + HEX: COLOR_BASE_RED_050_HEX, + CODE: COLOR_BASE_RED_050_CODE, + CLASSNAME: COLOR_BASE_RED_050_CLASSNAME, + }, }, ORANGE: { 100: { @@ -758,11 +758,6 @@ export const COLOR = { }, }, PURPLE: { - 50: { - HEX: COLOR_BASE_PURPLE_50_HEX, - CODE: COLOR_BASE_PURPLE_50_CODE, - CLASSNAME: COLOR_BASE_PURPLE_50_CLASSNAME, - }, 100: { HEX: COLOR_BASE_PURPLE_100_HEX, CODE: COLOR_BASE_PURPLE_100_CODE, @@ -818,6 +813,11 @@ export const COLOR = { CODE: COLOR_BASE_PURPLE_950_CODE, CLASSNAME: COLOR_BASE_PURPLE_950_CLASSNAME, }, + '050': { + HEX: COLOR_BASE_PURPLE_050_HEX, + CODE: COLOR_BASE_PURPLE_050_CODE, + CLASSNAME: COLOR_BASE_PURPLE_050_CLASSNAME, + }, }, CHARCOAL: { 100: { @@ -847,11 +847,6 @@ export const COLOR = { }, }, GREY: { - 50: { - HEX: COLOR_BASE_GREY_50_HEX, - CODE: COLOR_BASE_GREY_50_CODE, - CLASSNAME: COLOR_BASE_GREY_50_CLASSNAME, - }, 100: { HEX: COLOR_BASE_GREY_100_HEX, CODE: COLOR_BASE_GREY_100_CODE, @@ -907,6 +902,11 @@ export const COLOR = { CODE: COLOR_BASE_GREY_950_CODE, CLASSNAME: COLOR_BASE_GREY_950_CLASSNAME, }, + '050': { + HEX: COLOR_BASE_GREY_050_HEX, + CODE: COLOR_BASE_GREY_050_CODE, + CLASSNAME: COLOR_BASE_GREY_050_CLASSNAME, + }, }, WHITE: { 100: { diff --git a/style-dictionary/bin/templating.js b/style-dictionary/bin/templating.js index 43243efe3f..da65211e46 100644 --- a/style-dictionary/bin/templating.js +++ b/style-dictionary/bin/templating.js @@ -112,6 +112,13 @@ Handlebars.registerHelper('lowercase', function (value) { }); +Handlebars.registerHelper('startsWithZero', function(value, options) { + if (value && value.toString().startsWith('0')) { + return "'" + value.toString() + "'"; + } + return value; +}); + // // Templates compilation // diff --git a/style-dictionary/templates/presets/jsx/tokens.hbs b/style-dictionary/templates/presets/jsx/tokens.hbs index d7bf41a20c..f265d01ba8 100644 --- a/style-dictionary/templates/presets/jsx/tokens.hbs +++ b/style-dictionary/templates/presets/jsx/tokens.hbs @@ -34,13 +34,13 @@ export const {{constantCase ../category}}{{#if (notBaseType type)}}_{{constantCa {{constantCase item}}: { {{#each subitems}} {{#if (hasAny states)}} - {{constantCase subitem}}: { + {{{ startsWithZero (constantCase subitem) }}}: { {{#each states}} - {{constantCase state}}: {{name}}, + {{{startsWithZero (constantCase state) }}}: {{name}}, {{/each}} }, {{else}} - {{constantCase subitem}}: {{name}}, + {{{startsWithZero (constantCase subitem)}}}: {{name}}, {{/if}} {{/each}} }, diff --git a/style-dictionary/tokens/color/base.json b/style-dictionary/tokens/color/base.json index 26da3031af..bf918421b3 100644 --- a/style-dictionary/tokens/color/base.json +++ b/style-dictionary/tokens/color/base.json @@ -2,10 +2,10 @@ "color": { "base": { "blue": { - "50": { + "050": { "hex": { "value": "#fafcff" }, - "code": { "value": "blue-50" }, - "classname": { "value": "t-sage--color-blue-50" } + "code": { "value": "blue-050" }, + "classname": { "value": "t-sage--color-blue-050" } }, "100": { "hex": { "value": "#eff6ff" }, @@ -64,10 +64,10 @@ } }, "green": { - "50": { + "050": { "hex": { "value": "#fbfefc" }, - "code": { "value": "green-50" }, - "classname": { "value": "t-sage--color-green-50" } + "code": { "value": "green-050" }, + "classname": { "value": "t-sage--color-green-050" } }, "100": { "hex": { "value": "#edfcf2" }, @@ -126,10 +126,10 @@ } }, "mercury": { - "50": { + "050": { "hex": { "value": "#fffcfa" }, - "code": { "value": "mercury-50" }, - "classname": { "value": "t-sage--color-mercury-50" } + "code": { "value": "mercury-050" }, + "classname": { "value": "t-sage--color-mercury-050" } }, "100": { "hex": { "value": "#fff3ed" }, @@ -242,10 +242,10 @@ } }, "yellow": { - "50": { + "050": { "hex": { "value": "#fffefa" }, - "code": { "value": "yellow-50" }, - "classname": { "value": "t-sage--color-yellow-50" } + "code": { "value": "yellow-050" }, + "classname": { "value": "t-sage--color-yellow-050" } }, "100": { "hex": { "value": "#fffbeb" }, @@ -304,10 +304,10 @@ } }, "red": { - "50": { + "050": { "hex": { "value": "#fffafa" }, - "code": { "value": "red-50" }, - "classname": { "value": "t-sage--color-red-50" } + "code": { "value": "red-050" }, + "classname": { "value": "t-sage--color-red-050" } }, "100": { "hex": { "value": "#fef2f2" }, @@ -393,10 +393,10 @@ } }, "purple": { - "50": { + "050": { "hex": { "value": "#fafbff" }, - "code": { "value": "purple-50" }, - "classname": { "value": "t-sage--color-purple-50" } + "code": { "value": "purple-050" }, + "classname": { "value": "t-sage--color-purple-050" } }, "100": { "hex": { "value": "#edf1ff" }, @@ -482,10 +482,10 @@ } }, "grey": { - "50": { + "050": { "hex": { "value": "#fcfcfc" }, - "code": { "value": "grey-50" }, - "classname": { "value": "t-sage--color-grey-50" } + "code": { "value": "grey-050" }, + "classname": { "value": "t-sage--color-grey-050" } }, "100": { "hex": { "value": "#f8f8f8" }, From 554fa7b7481066635717d48f4c658b34f5f72120 Mon Sep 17 00:00:00 2001 From: Julian Skinner Date: Tue, 1 Oct 2024 15:27:41 -0500 Subject: [PATCH 30/31] style(breadcrumbs): change charcoal 400 to grey 900 --- .../sage-assets/lib/stylesheets/components/_breadcrumbs.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/sage-assets/lib/stylesheets/components/_breadcrumbs.scss b/packages/sage-assets/lib/stylesheets/components/_breadcrumbs.scss index 720545f930..a4d1c3f09a 100644 --- a/packages/sage-assets/lib/stylesheets/components/_breadcrumbs.scss +++ b/packages/sage-assets/lib/stylesheets/components/_breadcrumbs.scss @@ -4,8 +4,8 @@ /// @group sage //// -$-breadcrumb-current-color: sage-color(charcoal, 400); -$-breadcrumb-interactive-color: sage-color(charcoal, 400); +$-breadcrumb-current-color: sage-color(grey, 900); +$-breadcrumb-interactive-color: sage-color(grey, 900); $-breadcrumb-outline-color: sage-color(purple, 300); .sage-breadcrumbs { From 0fd790329ecfbb199a9e759a6c4831dea46c1e41 Mon Sep 17 00:00:00 2001 From: Quinton Jason Date: Tue, 1 Oct 2024 18:58:03 -0500 Subject: [PATCH 31/31] fix: update gray to grey instances --- docs/lib/sage-frontend/stylesheets/docs/_example.scss | 4 ++-- docs/lib/sage-frontend/stylesheets/docs/_footer.scss | 2 +- docs/lib/sage-frontend/stylesheets/docs/_home.scss | 2 +- docs/lib/sage-frontend/stylesheets/docs/_sidebar.scss | 2 +- .../lib/stylesheets/components/_dynamic_select.scss | 4 ++-- packages/sage-react/lib/configs/classnames/type.js | 2 +- 6 files changed, 8 insertions(+), 8 deletions(-) diff --git a/docs/lib/sage-frontend/stylesheets/docs/_example.scss b/docs/lib/sage-frontend/stylesheets/docs/_example.scss index b167db5d1f..a617551311 100644 --- a/docs/lib/sage-frontend/stylesheets/docs/_example.scss +++ b/docs/lib/sage-frontend/stylesheets/docs/_example.scss @@ -164,13 +164,13 @@ $-example-code-preview-button-bg: rgba(sage-color(primary, 300), 0.75); overflow: hidden; padding: 0; border: 0; - background: sage-color(gray, 100); + background: sage-color(grey, 100); } .sage-card__header { padding: sage-spacing(); padding-bottom: sage-spacing(xs); code { - background: sage-color(gray, 300); + background: sage-color(grey, 300); } } } diff --git a/docs/lib/sage-frontend/stylesheets/docs/_footer.scss b/docs/lib/sage-frontend/stylesheets/docs/_footer.scss index 45830c9764..9ecd0421f1 100644 --- a/docs/lib/sage-frontend/stylesheets/docs/_footer.scss +++ b/docs/lib/sage-frontend/stylesheets/docs/_footer.scss @@ -6,7 +6,7 @@ .docs-footer { padding: sage-spacing(2xl) sage-spacing(); - background: sage-color(gray, 200); + background: sage-color(grey, 200); .sage-stage & { padding: sage-spacing(2xl) 0; diff --git a/docs/lib/sage-frontend/stylesheets/docs/_home.scss b/docs/lib/sage-frontend/stylesheets/docs/_home.scss index c63f1d23aa..429a2752a6 100644 --- a/docs/lib/sage-frontend/stylesheets/docs/_home.scss +++ b/docs/lib/sage-frontend/stylesheets/docs/_home.scss @@ -4,7 +4,7 @@ For Sage documentation use ================================================== */ .docs-home { - background: sage-color(gray, 200); + background: sage-color(grey, 200); } .docs-hero { diff --git a/docs/lib/sage-frontend/stylesheets/docs/_sidebar.scss b/docs/lib/sage-frontend/stylesheets/docs/_sidebar.scss index d8bfbfbbda..9862978c69 100644 --- a/docs/lib/sage-frontend/stylesheets/docs/_sidebar.scss +++ b/docs/lib/sage-frontend/stylesheets/docs/_sidebar.scss @@ -21,5 +21,5 @@ // Side Navigation Footer Top Border // Visual division between the scrolling content and the footer .sage-sidebar__footer { - box-shadow: inset 0 1px 0 sage-color(gray); + box-shadow: inset 0 1px 0 sage-color(grey); } diff --git a/packages/sage-assets/lib/stylesheets/components/_dynamic_select.scss b/packages/sage-assets/lib/stylesheets/components/_dynamic_select.scss index b57c85d921..72f8966243 100644 --- a/packages/sage-assets/lib/stylesheets/components/_dynamic_select.scss +++ b/packages/sage-assets/lib/stylesheets/components/_dynamic_select.scss @@ -1,7 +1,7 @@ $-dynamic-select-default-height: rem(45px); $-dynamic-select-default-padding: rem(4px) sage-spacing(sm) 0; -$-dynamic-select-border-color: sage-color(gray, 400); -$-dynamic-select-placeholder-color: sage-color(gray, 400); +$-dynamic-select-border-color: sage-color(grey, 400); +$-dynamic-select-placeholder-color: sage-color(grey, 400); $-dynamic-select-color-success: map-get($sage-field-colors, success); $-dynamic-select-border-box-shadow-size: map-get($sage-field-configs, box-shadow-size); $-dynamic-select-selected-height: rem(54px); diff --git a/packages/sage-react/lib/configs/classnames/type.js b/packages/sage-react/lib/configs/classnames/type.js index b540fde764..ceebd879be 100644 --- a/packages/sage-react/lib/configs/classnames/type.js +++ b/packages/sage-react/lib/configs/classnames/type.js @@ -31,7 +31,7 @@ Object.keys(SageDictionary.COLOR).forEach((colorName) => { black: 500, blue: 600, charcoal: 300, - gray: 300, + grey: 300, green: 600, mercury: 500, orange: 300,