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 ece753f44c..ecda0a1c0f 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 c8763f9e6d..686cd50027 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), @@ -325,7 +325,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); @@ -480,7 +480,7 @@ $-btn-loading-min-height: rem(36px); } &:hover { - background-color: sage-color(grey, 150); + background-color: sage-color(grey, 200); } &.sage-btn--selected { @@ -616,7 +616,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); } } @@ -864,5 +864,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 5fa75c302a..9f52031996 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 67083f422e..926c1c585f 100644 --- a/packages/sage-assets/lib/stylesheets/components/_choice.scss +++ b/packages/sage-assets/lib/stylesheets/components/_choice.scss @@ -86,7 +86,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 1d66e8e520..1a2f5c46a0 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(primary, 200); $-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 126fc0fbb1..1b5e2d3abc 100644 --- a/packages/sage-assets/lib/stylesheets/components/_dropdown.scss +++ b/packages/sage-assets/lib/stylesheets/components/_dropdown.scss @@ -133,13 +133,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 { @@ -187,7 +187,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 { @@ -252,7 +252,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 1953cc5b64..f727cefe64 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 53f4b93eca..57da7e61ef 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(primary, 200); 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 2786271cde..25da94d61e 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 9dd32db233..d8526e12af 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 7bd59d968b..e6aaec9a81 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 6183567ffe..f7890436d7 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 37bda531af..7885d8ac01 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 80dedca577..9e8aaed40a 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, };