Skip to content

Commit

Permalink
fix: update grey color token to lower greys
Browse files Browse the repository at this point in the history
  • Loading branch information
QuintonJason committed Aug 27, 2024
1 parent bdc62f3 commit 2f43f1d
Show file tree
Hide file tree
Showing 39 changed files with 68 additions and 68 deletions.
2 changes: 1 addition & 1 deletion docs/lib/sage-frontend/stylesheets/docs/_grid.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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-"] & {
Expand Down
2 changes: 1 addition & 1 deletion docs/lib/sage-frontend/stylesheets/docs/_rouge_theme.scss
Original file line number Diff line number Diff line change
@@ -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
Expand Down
4 changes: 2 additions & 2 deletions docs/lib/sage-frontend/stylesheets/docs/_specs.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion docs/lib/sage-frontend/stylesheets/docs/_text.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
4 changes: 2 additions & 2 deletions packages/sage-assets/lib/stylesheets/components/_alert.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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),
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;


Expand Down
4 changes: 2 additions & 2 deletions packages/sage-assets/lib/stylesheets/components/_avatar.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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),
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
16 changes: 8 additions & 8 deletions packages/sage-assets/lib/stylesheets/components/_button.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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: (
Expand Down Expand Up @@ -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),
Expand Down Expand Up @@ -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, 200);
border-color: transparent;

@include sage-focus-outline--update-color(transparent);
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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);
}
}

Expand Down Expand Up @@ -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, 200);
}
4 changes: 2 additions & 2 deletions packages/sage-assets/lib/stylesheets/components/_card.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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),
);
}

Expand Down Expand Up @@ -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);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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();

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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(primary, 200);
$-copy-text-border-hover-color: sage-color(grey, 500);
$-copy-text-color: sage-color(grey, 900);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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: (
Expand Down Expand Up @@ -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) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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);
}
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
2 changes: 1 addition & 1 deletion packages/sage-assets/lib/stylesheets/components/_hint.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
6 changes: 3 additions & 3 deletions packages/sage-assets/lib/stylesheets/components/_nav.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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);
}
Original file line number Diff line number Diff line change
Expand Up @@ -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();

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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);


Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@
top: 50%;
width: 100%;
height: 1px;
background: sage-color(grey, 200);
background: sage-color(grey, 150);
}

&::after {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ $-sortable-image-height: rem(48px);
}

&.sage-sortable__item--ghost {
background: sage-color(grey, 200);
background: sage-color(grey, 150);
}
}

Expand All @@ -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();

Expand Down
Loading

0 comments on commit 2f43f1d

Please sign in to comment.