fix: update grey color token to lower greys

Kajabi · Aug 22, 2024 · 69f8706 · 69f8706
1 parent c5c3b8d
commit 69f8706
Show file tree

Hide file tree

Showing 39 changed files with 68 additions and 68 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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),
@@ -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, 300);
+    box-shadow: rem(-1px) 0 0 0 sage-color(grey, 150);
     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, 200);
+      background-color: sage-color(grey, 150);
     }
 
     &.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, 200);
+    border-color: sage-color(grey, 150);
   }
 }
 
@@ -864,5 +864,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
@@ -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
@@ -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
@@ -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
@@ -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, 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
@@ -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(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
@@ -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
@@ -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
@@ -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, 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 {
@@ -187,7 +187,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 {
@@ -252,7 +252,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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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(primary, 200);
 
 

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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();