<%= 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 354bb2fe1d..f22894dc2d 100644
--- a/packages/sage-assets/lib/stylesheets/components/_alert.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_alert.scss
@@ -9,42 +9,42 @@
// `_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),
- 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, 100),
- danger: sage-color(red, 100),
+ exceeded: sage-color(red, 150),
+ danger: sage-color(red, 150),
);
$-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),
- 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, 300),
- danger: sage-color(red, 300),
+ exceeded: sage-color(red, 500),
+ danger: sage-color(red, 500),
);
$-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 > &,
@@ -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,16 +164,16 @@ $-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;
}
&:focus-visible {
- @include sage-focus-outline--update-color(sage-color(purple, 30));
+ @include sage-focus-outline--update-color(sage-color(purple, 300));
}
}
@@ -191,16 +191,16 @@ $-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;
}
&: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/_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 f904c0e384..a8dc43bf7e 100644
--- a/packages/sage-assets/lib/stylesheets/components/_avatar.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_avatar.scss
@@ -9,32 +9,32 @@ $-avatar-min-size: rem(32px);
$-avatar-max-size: rem(128px);
$-avatar-ring-colors: (
charcoal: (
- main: sage-color(charcoal, 500),
- bg: sage-color(grey, 300)
+ main: sage-color(grey, 950),
+ bg: sage-color(grey, 200)
),
grey: (
- main: sage-color(charcoal, 500),
- bg: sage-color(grey, 300)
+ main: sage-color(grey, 950),
+ bg: sage-color(grey, 200)
),
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),
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),
bg: sage-color(orange, 100)
),
red: (
- main: sage-color(red, 300),
- bg: sage-color(red, 100)
+ main: sage-color(red, 500),
+ bg: sage-color(red, 150)
)
);
$-avatar-tile-size: rem(216px);
diff --git a/packages/sage-assets/lib/stylesheets/components/_badge.scss b/packages/sage-assets/lib/stylesheets/components/_badge.scss
index 4ca5bf32bf..96bfd7e440 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;
@@ -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/_banner.scss b/packages/sage-assets/lib/stylesheets/components/_banner.scss
index 4f8d4fd62e..bc052abb89 100644
--- a/packages/sage-assets/lib/stylesheets/components/_banner.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_banner.scss
@@ -14,21 +14,21 @@ $-banner-colors: (
icon: "flag",
),
secondary: (
- background: sage-color(grey, 300),
- text: sage-color(charcoal, 500),
- text-hover: sage-color(charcoal, 300),
+ background: sage-color(grey, 200),
+ text: sage-color(grey, 950),
+ text-hover: sage-color(grey, 800),
icon: "info-circle",
),
warning: (
- background: sage-color(yellow, 200),
- text: sage-color(charcoal, 500),
- text-hover: sage-color(charcoal, 300),
+ background: sage-color(yellow, 300),
+ text: sage-color(grey, 950),
+ text-hover: sage-color(grey, 800),
icon: "warning",
),
danger: (
- background: sage-color(red, 300),
+ background: sage-color(red, 500),
text: sage-color(white),
- text-hover: sage-color(red, 100),
+ text-hover: sage-color(red, 150),
icon: "danger",
),
);
diff --git a/packages/sage-assets/lib/stylesheets/components/_breadcrumbs.scss b/packages/sage-assets/lib/stylesheets/components/_breadcrumbs.scss
index 0c59c97996..a4d1c3f09a 100644
--- a/packages/sage-assets/lib/stylesheets/components/_breadcrumbs.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_breadcrumbs.scss
@@ -4,9 +4,9 @@
/// @group sage
////
-$-breadcrumb-current-color: sage-color(charcoal, 400);
-$-breadcrumb-interactive-color: sage-color(charcoal, 400);
-$-breadcrumb-outline-color: sage-color(purple, 30);
+$-breadcrumb-current-color: sage-color(grey, 900);
+$-breadcrumb-interactive-color: sage-color(grey, 900);
+$-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 dee431d146..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: (
@@ -51,62 +51,62 @@ $-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),
- background-color: sage-color(grey, 300),
- border-color: sage-color(grey, 300),
+ 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),
+ ring-color: sage-color(purple, 300),
),
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),
)
),
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, 500),
+ border-color: sage-color(red, 500),
+ ring-color: sage-color(red, 300),
),
hover: (
color: sage-color(white),
- background-color: sage-color(red, 400),
+ background-color: sage-color(red, 800),
),
focus: (
color: sage-color(white),
- background-color: sage-color(red, 300),
- border-color: sage-color(red, 300),
+ background-color: sage-color(red, 500),
+ border-color: sage-color(red, 500),
),
disabled: (
- color: sage-color(red, 200),
- background-color: sage-color(red, 100),
- border-color: sage-color(red, 100),
+ color: sage-color(red, 300),
+ background-color: sage-color(red, 150),
+ border-color: sage-color(red, 150),
)
),
);
@@ -117,48 +117,48 @@ $-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: (
- default: sage-color(charcoal, 400),
- hover: sage-color(charcoal, 400),
- hover-background: sage-color(grey, 200),
+ 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),
- hover-background: sage-color(grey, 200),
+ 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: (
- 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, 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),
),
);
// 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),
- 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, 200),
- danger: sage-color(red, 200),
+ exceeded: sage-color(red, 300),
+ danger: sage-color(red, 300),
);
//
@@ -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);
@@ -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;
}
@@ -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));
}
}
@@ -472,12 +472,12 @@ $-btn-loading-min-height: rem(36px);
}
&:hover {
- background-color: sage-color(grey, 300);
+ background-color: sage-color(grey, 200);
}
&.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,16 +603,16 @@ 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, 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..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, 400),
+ $color: sage-color(grey, 300),
);
}
@@ -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);
}
}
@@ -103,14 +103,14 @@ $-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);
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/_card_highlight.scss b/packages/sage-assets/lib/stylesheets/components/_card_highlight.scss
index bc67b9446f..ec73c612ca 100644
--- a/packages/sage-assets/lib/stylesheets/components/_card_highlight.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_card_highlight.scss
@@ -55,13 +55,13 @@ $-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, 60)};
+ --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/_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/_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/_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 81c73ec6ae..e64daed60f 100644
--- a/packages/sage-assets/lib/stylesheets/components/_checkbox.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_checkbox.scss
@@ -8,13 +8,13 @@
// Colors
//
$-checkbox-color-default: sage-color(grey, 500);
-$-checkbox-color-default-border: sage-color(grey, 400);
-$-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-checked: sage-color(charcoal, 100);
-$-checkbox-color-error: sage-color(red, 300);
+$-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, 200);
+$-checkbox-color-disabled-checked: sage-color(grey, 600);
+$-checkbox-color-error: sage-color(red, 500);
$-checkbox-size: rem(16px);
$-checkbox-label-spacing: rem(12px);
@@ -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 {
@@ -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 {
@@ -280,7 +280,7 @@ $-checkbox-focus-outline-color: sage-color(purple, 30);
}
&::before {
- border-color: sage-color(red, 200);
+ 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, 300);
+ color: sage-color(red, 500);
}
.sage-checkbox__input:disabled ~ & {
diff --git a/packages/sage-assets/lib/stylesheets/components/_choice.scss b/packages/sage-assets/lib/stylesheets/components/_choice.scss
index c4a777f18d..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;
}
@@ -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);
}
@@ -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 {
@@ -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 93eccd598e..7397ea8a29 100644
--- a/packages/sage-assets/lib/stylesheets/components/_copy_text.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_copy_text.scss
@@ -5,11 +5,11 @@
////
-$-copy-text-border: 1px solid sage-color(grey, 400);
-$-copy-text-border-focus-color: sage-color(purple, 30);
+$-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(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 9c614c9288..718233514a 100644
--- a/packages/sage-assets/lib/stylesheets/components/_data_card.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_data_card.scss
@@ -7,16 +7,16 @@
$-data-card-colors: (
default: (
- border-color: sage-color(grey, 400),
- text-color: sage-color(charcoal, 400),
+ border-color: sage-color(grey, 300),
+ text-color: sage-color(grey, 900),
),
danger: (
- border-color: sage-color(red, 300),
- text-color: sage-color(red, 300),
+ 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;
@@ -118,10 +118,10 @@ $-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);
+ border-right: 1px solid sage-color(grey, 300);
}
.sage-data-card-scroll-container &:not(:first-child) {
@@ -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/_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/_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/_dot.scss b/packages/sage-assets/lib/stylesheets/components/_dot.scss
index c065fdc97c..cca3841570 100644
--- a/packages/sage-assets/lib/stylesheets/components/_dot.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_dot.scss
@@ -43,13 +43,13 @@ $-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, 60)};
+ --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/_dropdown.scss b/packages/sage-assets/lib/stylesheets/components/_dropdown.scss
index afa35f8c9c..1d6fdfcf92 100644
--- a/packages/sage-assets/lib/stylesheets/components/_dropdown.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_dropdown.scss
@@ -127,31 +127,31 @@ $-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));
}
}
.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 {
&:active {
- @include sage-focus-outline--update-color(sage-color(purple, 30));
+ @include sage-focus-outline--update-color(sage-color(purple, 300));
}
}
.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;
@@ -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;
@@ -188,12 +188,12 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs);
&:hover {
- background-color: sage-color(grey, 300);
+ background-color: sage-color(grey, 200);
}
&: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;
@@ -240,20 +240,20 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs);
}
.sage-dropdown__item-control--danger {
- color: sage-color(red, 300);
+ color: sage-color(red, 500);
&:hover {
- color: sage-color(red, 300);
- background-color: sage-color(red, 100);
+ color: sage-color(red, 500);
+ background-color: sage-color(red, 150);
}
}
.sage-dropdown__item-control--muted {
- color: sage-color(charcoal, 100);
+ color: sage-color(grey, 600);
&:hover {
- color: sage-color(charcoal, 400);
- background-color: sage-color(grey, 300);
+ 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/_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-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/_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 b71c650aee..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 {
@@ -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, 500);
}
}
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 b05b1bb0fd..550ceb3a18 100644
--- a/packages/sage-assets/lib/stylesheets/components/_form_select.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_form_select.scss
@@ -6,11 +6,11 @@
$-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-error: sage-color(red, 300);
+$-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);
$-select-filled-top-padding: rem(4.4px);
@@ -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..6b264d97ee 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;
@@ -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));
}
}
@@ -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 7beb28c3a6..59b8475393 100644
--- a/packages/sage-assets/lib/stylesheets/components/_hint.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_hint.scss
@@ -5,8 +5,8 @@
////
// Colors
-$-hint-text-color: sage-color(charcoal, 400);
-$-hint-background-color: sage-color(grey, 300);
+$-hint-text-color: sage-color(grey, 900);
+$-hint-background-color: sage-color(grey, 200);
.sage-hint {
display: flex;
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 49fa9d0546..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, 400);
+ background-color: sage-color(grey, 300);
}
&:not(:last-child) {
@@ -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 9c4dd90713..80098d068b 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);
}
}
@@ -80,7 +80,7 @@ $-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);
+ 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 37b3142922..6193f5e1c9 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:(
@@ -45,14 +45,14 @@ $-link-base-styles: (
),
danger:(
default: (
- color: sage-color(red, 300),
+ color: sage-color(red, 500),
),
hover: (
- color: sage-color(red, 400),
+ color: sage-color(red, 800),
),
focus-visible: (
- color: sage-color(red, 300),
- focus-outline: sage-color(red, 200),
+ color: sage-color(red, 500),
+ focus-outline: sage-color(red, 300),
),
)
);
@@ -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 & {
@@ -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);
}
}
@@ -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/_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/_media_tile.scss b/packages/sage-assets/lib/stylesheets/components/_media_tile.scss
index a126277cd5..519870434f 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;
@@ -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/_menu_button.scss b/packages/sage-assets/lib/stylesheets/components/_menu_button.scss
index e75dafa0b5..95dac5ec08 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);
@@ -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/_meter.scss b/packages/sage-assets/lib/stylesheets/components/_meter.scss
index 25965238d8..372b4ea5c7 100644
--- a/packages/sage-assets/lib/stylesheets/components/_meter.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_meter.scss
@@ -6,8 +6,8 @@
$-meter-bar-height: rem(4px);
-$-meter-color-bg: sage-color(grey, 300);
-$-meter-bar-low: rgba(sage-color(red, 500), 0.9);
+$-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);
$-meter-bar-max: rgba(sage-color(sage, 300), 0.9);
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 fca0188e11..aaaee45f44 100644
--- a/packages/sage-assets/lib/stylesheets/components/_nav.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_nav.scss
@@ -4,10 +4,10 @@
/// @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, 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);
@@ -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 {
@@ -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/_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 998e7ba6ce..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 {
@@ -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();
@@ -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/_pagination.scss b/packages/sage-assets/lib/stylesheets/components/_pagination.scss
index fc035f3e15..695cc76ca9 100644
--- a/packages/sage-assets/lib/stylesheets/components/_pagination.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_pagination.scss
@@ -8,11 +8,11 @@
$-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-focus-ring-color: sage-color(purple, 30);
+$-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-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..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, 300);
+ background: sage-color(grey, 200);
}
&::after {
@@ -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/_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/_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/_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/_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 1122c0e480..e357763793 100644
--- a/packages/sage-assets/lib/stylesheets/components/_radio.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_radio.scss
@@ -15,8 +15,8 @@ $-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-error: sage-color(red, 200);
+$-radio-color-focus-outline: sage-color(purple, 300);
+$-radio-color-focus-outline-error: sage-color(red, 300);
// Additional configurations
$-radio-button-size: $sage-radio-size;
@@ -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 49e6569b75..de5ba504d4 100644
--- a/packages/sage-assets/lib/stylesheets/components/_search.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_search.scss
@@ -23,17 +23,17 @@ $-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;
}
.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);
- 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 66d29f2b39..5455b17340 100644
--- a/packages/sage-assets/lib/stylesheets/components/_sortable.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_sortable.scss
@@ -25,12 +25,12 @@ $-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,
&: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();
@@ -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 74e49f3134..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 {
@@ -102,13 +102,13 @@ $-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, 60)};
+ --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)};
@@ -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..ad8afc716d 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;
@@ -20,15 +20,15 @@
$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(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 4066e34501..0a0517a861 100644
--- a/packages/sage-assets/lib/stylesheets/components/_switch.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_switch.scss
@@ -6,17 +6,17 @@
// 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-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-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(grey, 800);
+$-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);
// Switch
$-switch-label-left-spacing: rem(12px);
@@ -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 21a9cfc039..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, 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);
}
}
@@ -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 40599a15da..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, 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();
@@ -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/_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..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);
@@ -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 {
@@ -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 a10b61b0e2..0b506862af 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} {
@@ -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, 500);
}
&.sage-toast--dismissed {
@@ -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 {
@@ -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/_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 ad53bfb056..0dfdadc996 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, 500);
}
.sage-transaction-card__label {
@@ -87,11 +87,11 @@ $-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 {
- color: sage-color(red, 300);
+ color: sage-color(red, 500);
}
.sage-transaction-card__state--sage {
diff --git a/packages/sage-assets/lib/stylesheets/components/_typeahead.scss b/packages/sage-assets/lib/stylesheets/components/_typeahead.scss
index e1e3769e4f..a276d8197a 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;
}
@@ -47,7 +47,7 @@ $-typeahead-item-height: rem(68px);
&:hover,
&:focus-within {
- background-color: sage-color(grey, 200);
+ background-color: sage-color(grey, 150);
}
}
@@ -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()
@@ -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 7272556b91..efdb55caba 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, 500);
$-upload-card-body-width: rem(200px);
$-upload-card-body-width-stack: rem(340px);
$-upload-card-preview-border-radius: sage-border(radius-medium);
@@ -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/_typography.scss b/packages/sage-assets/lib/stylesheets/core/_typography.scss
index 3524214b35..11519ff075 100644
--- a/packages/sage-assets/lib/stylesheets/core/_typography.scss
+++ b/packages/sage-assets/lib/stylesheets/core/_typography.scss
@@ -212,13 +212,13 @@ 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, 60);
+ $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/core/_variables.scss b/packages/sage-assets/lib/stylesheets/core/_variables.scss
index 898977de9d..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),
);
///
@@ -51,11 +51,11 @@ $sage-field-configs: (
/// Field coloring
///
$sage-field-colors: (
- border: sage-color(grey, 400),
- default: sage-color(charcoal, 300),
+ border: sage-color(grey, 300),
+ default: sage-color(grey, 800),
disabled: sage-color(grey, 500),
- disabled-background: sage-color(grey, 200),
- error: sage-color(red, 300),
+ disabled-background: sage-color(grey, 150),
+ error: sage-color(red, 500),
label-background: sage-color(white),
success: sage-color(primary, 300),
);
@@ -66,13 +66,13 @@ $sage-field-colors: (
/// Radio button colors
///
$sage-radio-colors: (
- checked: sage-color(charcoal, 400),
- checked-disabled: sage-color(grey, 300),
- checked-hover: sage-color(charcoal, 500),
+ checked: sage-color(grey, 900),
+ checked-disabled: sage-color(grey, 200),
+ checked-hover: sage-color(grey, 950),
checked-inner: sage-color(white),
- default: sage-color(grey, 400),
- disabled: sage-color(grey, 200),
- error: sage-color(red, 300),
+ default: sage-color(grey, 300),
+ disabled: sage-color(grey, 150),
+ error: sage-color(red, 500),
hover: sage-color(grey, 500),
);
@@ -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),
);
///
@@ -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 79cd6ccafe..5447a35b1d 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);
@@ -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
) {
@@ -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 {
@@ -473,12 +473,12 @@
.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, 300));
box-shadow: sage-border-interactive(error);
~ label {
- color: sage-color(charcoal, 400);
+ color: sage-color(grey, 900);
}
&:hover:not(:disabled) {
@@ -549,10 +549,10 @@
@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, 300);
+ color: sage-color(red, 500);
&::before {
@include sage-icon-base(danger, md, pine);
@@ -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/dictionary/_tokens.scss b/packages/sage-assets/lib/stylesheets/dictionary/_tokens.scss
index 8f5b4b5b52..f7a726fbb0 100644
--- a/packages/sage-assets/lib/stylesheets/dictionary/_tokens.scss
+++ b/packages/sage-assets/lib/stylesheets/dictionary/_tokens.scss
@@ -22,437 +22,437 @@
// Static vars for color base
//
///
-/// color color-base-blue-5-hex
+/// color color-base-blue-100-hex
///
-$sd-sage-color-base-blue-5-hex: #fafcff;
+$sd-sage-color-base-blue-100-hex: #eff6ff;
///
-/// color color-base-blue-5-code
+/// color color-base-blue-100-code
///
-$sd-sage-color-base-blue-5-code: "blue-5";
+$sd-sage-color-base-blue-100-code: "blue-100";
///
-/// color color-base-blue-5-classname
+/// color color-base-blue-100-classname
///
-$sd-sage-color-base-blue-5-classname: "t-sage--color-blue-5";
+$sd-sage-color-base-blue-100-classname: "t-sage--color-blue-100";
///
-/// color color-base-blue-10-hex
+/// color color-base-blue-150-hex
///
-$sd-sage-color-base-blue-10-hex: #eff6ff;
+$sd-sage-color-base-blue-150-hex: #dbe9fe;
///
-/// color color-base-blue-10-code
+/// color color-base-blue-150-code
///
-$sd-sage-color-base-blue-10-code: "blue-10";
+$sd-sage-color-base-blue-150-code: "blue-150";
///
-/// color color-base-blue-10-classname
+/// color color-base-blue-150-classname
///
-$sd-sage-color-base-blue-10-classname: "t-sage--color-blue-10";
+$sd-sage-color-base-blue-150-classname: "t-sage--color-blue-150";
///
-/// color color-base-blue-15-hex
+/// color color-base-blue-200-hex
///
-$sd-sage-color-base-blue-15-hex: #dbe9fe;
+$sd-sage-color-base-blue-200-hex: #bfdbfe;
///
-/// color color-base-blue-15-code
+/// color color-base-blue-200-code
///
-$sd-sage-color-base-blue-15-code: "blue-15";
+$sd-sage-color-base-blue-200-code: "blue-200";
///
-/// color color-base-blue-15-classname
+/// color color-base-blue-200-classname
///
-$sd-sage-color-base-blue-15-classname: "t-sage--color-blue-15";
+$sd-sage-color-base-blue-200-classname: "t-sage--color-blue-200";
///
-/// color color-base-blue-20-hex
+/// color color-base-blue-300-hex
///
-$sd-sage-color-base-blue-20-hex: #bfdbfe;
+$sd-sage-color-base-blue-300-hex: #92c5fd;
///
-/// color color-base-blue-20-code
+/// color color-base-blue-300-code
///
-$sd-sage-color-base-blue-20-code: "blue-20";
+$sd-sage-color-base-blue-300-code: "blue-300";
///
-/// color color-base-blue-20-classname
+/// color color-base-blue-300-classname
///
-$sd-sage-color-base-blue-20-classname: "t-sage--color-blue-20";
+$sd-sage-color-base-blue-300-classname: "t-sage--color-blue-300";
///
-/// color color-base-blue-30-hex
+/// color color-base-blue-400-hex
///
-$sd-sage-color-base-blue-30-hex: #92c5fd;
+$sd-sage-color-base-blue-400-hex: #60a5fa;
///
-/// color color-base-blue-30-code
+/// color color-base-blue-400-code
///
-$sd-sage-color-base-blue-30-code: "blue-30";
+$sd-sage-color-base-blue-400-code: "blue-400";
///
-/// color color-base-blue-30-classname
+/// color color-base-blue-400-classname
///
-$sd-sage-color-base-blue-30-classname: "t-sage--color-blue-30";
+$sd-sage-color-base-blue-400-classname: "t-sage--color-blue-400";
///
-/// color color-base-blue-40-hex
+/// color color-base-blue-500-hex
///
-$sd-sage-color-base-blue-40-hex: #60a5fa;
+$sd-sage-color-base-blue-500-hex: #3c82f6;
///
-/// color color-base-blue-40-code
+/// color color-base-blue-500-code
///
-$sd-sage-color-base-blue-40-code: "blue-40";
+$sd-sage-color-base-blue-500-code: "blue-500";
///
-/// color color-base-blue-40-classname
+/// color color-base-blue-500-classname
///
-$sd-sage-color-base-blue-40-classname: "t-sage--color-blue-40";
+$sd-sage-color-base-blue-500-classname: "t-sage--color-blue-500";
///
-/// color color-base-blue-50-hex
+/// color color-base-blue-600-hex
///
-$sd-sage-color-base-blue-50-hex: #3c82f6;
+$sd-sage-color-base-blue-600-hex: #2463eb;
///
-/// color color-base-blue-50-code
+/// color color-base-blue-600-code
///
-$sd-sage-color-base-blue-50-code: "blue-50";
+$sd-sage-color-base-blue-600-code: "blue-600";
///
-/// color color-base-blue-50-classname
+/// color color-base-blue-600-classname
///
-$sd-sage-color-base-blue-50-classname: "t-sage--color-blue-50";
+$sd-sage-color-base-blue-600-classname: "t-sage--color-blue-600";
///
-/// color color-base-blue-60-hex
+/// color color-base-blue-700-hex
///
-$sd-sage-color-base-blue-60-hex: #2463eb;
+$sd-sage-color-base-blue-700-hex: #1c4ed8;
///
-/// color color-base-blue-60-code
+/// color color-base-blue-700-code
///
-$sd-sage-color-base-blue-60-code: "blue-60";
+$sd-sage-color-base-blue-700-code: "blue-700";
///
-/// color color-base-blue-60-classname
+/// color color-base-blue-700-classname
///
-$sd-sage-color-base-blue-60-classname: "t-sage--color-blue-60";
+$sd-sage-color-base-blue-700-classname: "t-sage--color-blue-700";
///
-/// color color-base-blue-70-hex
+/// color color-base-blue-800-hex
///
-$sd-sage-color-base-blue-70-hex: #1c4ed8;
+$sd-sage-color-base-blue-800-hex: #1d40ae;
///
-/// color color-base-blue-70-code
+/// color color-base-blue-800-code
///
-$sd-sage-color-base-blue-70-code: "blue-70";
+$sd-sage-color-base-blue-800-code: "blue-800";
///
-/// color color-base-blue-70-classname
+/// color color-base-blue-800-classname
///
-$sd-sage-color-base-blue-70-classname: "t-sage--color-blue-70";
+$sd-sage-color-base-blue-800-classname: "t-sage--color-blue-800";
///
-/// color color-base-blue-80-hex
+/// color color-base-blue-900-hex
///
-$sd-sage-color-base-blue-80-hex: #1d40ae;
+$sd-sage-color-base-blue-900-hex: #1f3a8a;
///
-/// color color-base-blue-80-code
+/// color color-base-blue-900-code
///
-$sd-sage-color-base-blue-80-code: "blue-80";
+$sd-sage-color-base-blue-900-code: "blue-900";
///
-/// color color-base-blue-80-classname
+/// color color-base-blue-900-classname
///
-$sd-sage-color-base-blue-80-classname: "t-sage--color-blue-80";
+$sd-sage-color-base-blue-900-classname: "t-sage--color-blue-900";
///
-/// color color-base-blue-90-hex
+/// color color-base-blue-950-hex
///
-$sd-sage-color-base-blue-90-hex: #1f3a8a;
+$sd-sage-color-base-blue-950-hex: #172554;
///
-/// color color-base-blue-90-code
+/// color color-base-blue-950-code
///
-$sd-sage-color-base-blue-90-code: "blue-90";
+$sd-sage-color-base-blue-950-code: "blue-950";
///
-/// color color-base-blue-90-classname
+/// color color-base-blue-950-classname
///
-$sd-sage-color-base-blue-90-classname: "t-sage--color-blue-90";
+$sd-sage-color-base-blue-950-classname: "t-sage--color-blue-950";
///
-/// color color-base-blue-95-hex
+/// color color-base-blue-050-hex
///
-$sd-sage-color-base-blue-95-hex: #172554;
+$sd-sage-color-base-blue-050-hex: #fafcff;
///
-/// color color-base-blue-95-code
+/// color color-base-blue-050-code
///
-$sd-sage-color-base-blue-95-code: "blue-95";
+$sd-sage-color-base-blue-050-code: "blue-050";
///
-/// color color-base-blue-95-classname
+/// color color-base-blue-050-classname
///
-$sd-sage-color-base-blue-95-classname: "t-sage--color-blue-95";
+$sd-sage-color-base-blue-050-classname: "t-sage--color-blue-050";
///
-/// color color-base-green-5-hex
+/// color color-base-green-100-hex
///
-$sd-sage-color-base-green-5-hex: #fbfefc;
+$sd-sage-color-base-green-100-hex: #edfcf2;
///
-/// color color-base-green-5-code
+/// color color-base-green-100-code
///
-$sd-sage-color-base-green-5-code: "green-5";
+$sd-sage-color-base-green-100-code: "green-100";
///
-/// color color-base-green-5-classname
+/// color color-base-green-100-classname
///
-$sd-sage-color-base-green-5-classname: "t-sage--color-green-5";
+$sd-sage-color-base-green-100-classname: "t-sage--color-green-100";
///
-/// color color-base-green-10-hex
+/// color color-base-green-150-hex
///
-$sd-sage-color-base-green-10-hex: #edfcf2;
+$sd-sage-color-base-green-150-hex: #d3f8df;
///
-/// color color-base-green-10-code
+/// color color-base-green-150-code
///
-$sd-sage-color-base-green-10-code: "green-10";
+$sd-sage-color-base-green-150-code: "green-150";
///
-/// color color-base-green-10-classname
+/// color color-base-green-150-classname
///
-$sd-sage-color-base-green-10-classname: "t-sage--color-green-10";
+$sd-sage-color-base-green-150-classname: "t-sage--color-green-150";
///
-/// color color-base-green-15-hex
+/// color color-base-green-200-hex
///
-$sd-sage-color-base-green-15-hex: #d3f8df;
+$sd-sage-color-base-green-200-hex: #aaf0c4;
///
-/// color color-base-green-15-code
+/// color color-base-green-200-code
///
-$sd-sage-color-base-green-15-code: "green-15";
+$sd-sage-color-base-green-200-code: "green-200";
///
-/// color color-base-green-15-classname
+/// color color-base-green-200-classname
///
-$sd-sage-color-base-green-15-classname: "t-sage--color-green-15";
+$sd-sage-color-base-green-200-classname: "t-sage--color-green-200";
///
-/// color color-base-green-20-hex
+/// color color-base-green-300-hex
///
-$sd-sage-color-base-green-20-hex: #aaf0c4;
+$sd-sage-color-base-green-300-hex: #73e2a3;
///
-/// color color-base-green-20-code
+/// color color-base-green-300-code
///
-$sd-sage-color-base-green-20-code: "green-20";
+$sd-sage-color-base-green-300-code: "green-300";
///
-/// color color-base-green-20-classname
+/// color color-base-green-300-classname
///
-$sd-sage-color-base-green-20-classname: "t-sage--color-green-20";
+$sd-sage-color-base-green-300-classname: "t-sage--color-green-300";
///
-/// color color-base-green-30-hex
+/// color color-base-green-400-hex
///
-$sd-sage-color-base-green-30-hex: #73e2a3;
+$sd-sage-color-base-green-400-hex: #3dcb7f;
///
-/// color color-base-green-30-code
+/// color color-base-green-400-code
///
-$sd-sage-color-base-green-30-code: "green-30";
+$sd-sage-color-base-green-400-code: "green-400";
///
-/// color color-base-green-30-classname
+/// color color-base-green-400-classname
///
-$sd-sage-color-base-green-30-classname: "t-sage--color-green-30";
+$sd-sage-color-base-green-400-classname: "t-sage--color-green-400";
///
-/// color color-base-green-40-hex
+/// color color-base-green-500-hex
///
-$sd-sage-color-base-green-40-hex: #3dcb7f;
+$sd-sage-color-base-green-500-hex: #17b365;
///
-/// color color-base-green-40-code
+/// color color-base-green-500-code
///
-$sd-sage-color-base-green-40-code: "green-40";
+$sd-sage-color-base-green-500-code: "green-500";
///
-/// color color-base-green-40-classname
+/// color color-base-green-500-classname
///
-$sd-sage-color-base-green-40-classname: "t-sage--color-green-40";
+$sd-sage-color-base-green-500-classname: "t-sage--color-green-500";
///
-/// color color-base-green-50-hex
+/// color color-base-green-600-hex
///
-$sd-sage-color-base-green-50-hex: #17b365;
+$sd-sage-color-base-green-600-hex: #079250;
///
-/// color color-base-green-50-code
+/// color color-base-green-600-code
///
-$sd-sage-color-base-green-50-code: "green-50";
+$sd-sage-color-base-green-600-code: "green-600";
///
-/// color color-base-green-50-classname
+/// color color-base-green-600-classname
///
-$sd-sage-color-base-green-50-classname: "t-sage--color-green-50";
+$sd-sage-color-base-green-600-classname: "t-sage--color-green-600";
///
-/// color color-base-green-60-hex
+/// color color-base-green-700-hex
///
-$sd-sage-color-base-green-60-hex: #079250;
+$sd-sage-color-base-green-700-hex: #097443;
///
-/// color color-base-green-60-code
+/// color color-base-green-700-code
///
-$sd-sage-color-base-green-60-code: "green-60";
+$sd-sage-color-base-green-700-code: "green-700";
///
-/// color color-base-green-60-classname
+/// color color-base-green-700-classname
///
-$sd-sage-color-base-green-60-classname: "t-sage--color-green-60";
+$sd-sage-color-base-green-700-classname: "t-sage--color-green-700";
///
-/// color color-base-green-70-hex
+/// color color-base-green-800-hex
///
-$sd-sage-color-base-green-70-hex: #097443;
+$sd-sage-color-base-green-800-hex: #085c37;
///
-/// color color-base-green-70-code
+/// color color-base-green-800-code
///
-$sd-sage-color-base-green-70-code: "green-70";
+$sd-sage-color-base-green-800-code: "green-800";
///
-/// color color-base-green-70-classname
+/// color color-base-green-800-classname
///
-$sd-sage-color-base-green-70-classname: "t-sage--color-green-70";
+$sd-sage-color-base-green-800-classname: "t-sage--color-green-800";
///
-/// color color-base-green-80-hex
+/// color color-base-green-900-hex
///
-$sd-sage-color-base-green-80-hex: #085c37;
+$sd-sage-color-base-green-900-hex: #094c2f;
///
-/// color color-base-green-80-code
+/// color color-base-green-900-code
///
-$sd-sage-color-base-green-80-code: "green-80";
+$sd-sage-color-base-green-900-code: "green-900";
///
-/// color color-base-green-80-classname
+/// color color-base-green-900-classname
///
-$sd-sage-color-base-green-80-classname: "t-sage--color-green-80";
+$sd-sage-color-base-green-900-classname: "t-sage--color-green-900";
///
-/// color color-base-green-90-hex
+/// color color-base-green-950-hex
///
-$sd-sage-color-base-green-90-hex: #094c2f;
+$sd-sage-color-base-green-950-hex: #052e1c;
///
-/// color color-base-green-90-code
+/// color color-base-green-950-code
///
-$sd-sage-color-base-green-90-code: "green-90";
+$sd-sage-color-base-green-950-code: "green-950";
///
-/// color color-base-green-90-classname
+/// color color-base-green-950-classname
///
-$sd-sage-color-base-green-90-classname: "t-sage--color-green-90";
+$sd-sage-color-base-green-950-classname: "t-sage--color-green-950";
///
-/// color color-base-green-95-hex
+/// color color-base-green-050-hex
///
-$sd-sage-color-base-green-95-hex: #052e1c;
+$sd-sage-color-base-green-050-hex: #fbfefc;
///
-/// color color-base-green-95-code
+/// color color-base-green-050-code
///
-$sd-sage-color-base-green-95-code: "green-95";
+$sd-sage-color-base-green-050-code: "green-050";
///
-/// color color-base-green-95-classname
+/// color color-base-green-050-classname
///
-$sd-sage-color-base-green-95-classname: "t-sage--color-green-95";
+$sd-sage-color-base-green-050-classname: "t-sage--color-green-050";
///
-/// color color-base-mercury-5-hex
+/// color color-base-mercury-100-hex
///
-$sd-sage-color-base-mercury-5-hex: #fffcfa;
+$sd-sage-color-base-mercury-100-hex: #fff3ed;
///
-/// color color-base-mercury-5-code
+/// color color-base-mercury-100-code
///
-$sd-sage-color-base-mercury-5-code: "mercury-5";
+$sd-sage-color-base-mercury-100-code: "mercury-100";
///
-/// color color-base-mercury-5-classname
+/// color color-base-mercury-100-classname
///
-$sd-sage-color-base-mercury-5-classname: "t-sage--color-mercury-5";
+$sd-sage-color-base-mercury-100-classname: "t-sage--color-mercury-100";
///
-/// color color-base-mercury-10-hex
+/// color color-base-mercury-150-hex
///
-$sd-sage-color-base-mercury-10-hex: #fff3ed;
+$sd-sage-color-base-mercury-150-hex: #ffe3d4;
///
-/// color color-base-mercury-10-code
+/// color color-base-mercury-150-code
///
-$sd-sage-color-base-mercury-10-code: "mercury-10";
+$sd-sage-color-base-mercury-150-code: "mercury-150";
///
-/// color color-base-mercury-10-classname
+/// color color-base-mercury-150-classname
///
-$sd-sage-color-base-mercury-10-classname: "t-sage--color-mercury-10";
+$sd-sage-color-base-mercury-150-classname: "t-sage--color-mercury-150";
///
-/// color color-base-mercury-15-hex
+/// color color-base-mercury-200-hex
///
-$sd-sage-color-base-mercury-15-hex: #ffe3d4;
+$sd-sage-color-base-mercury-200-hex: #ffc3a8;
///
-/// color color-base-mercury-15-code
+/// color color-base-mercury-200-code
///
-$sd-sage-color-base-mercury-15-code: "mercury-15";
+$sd-sage-color-base-mercury-200-code: "mercury-200";
///
-/// color color-base-mercury-15-classname
+/// color color-base-mercury-200-classname
///
-$sd-sage-color-base-mercury-15-classname: "t-sage--color-mercury-15";
+$sd-sage-color-base-mercury-200-classname: "t-sage--color-mercury-200";
///
-/// color color-base-mercury-20-hex
+/// color color-base-mercury-300-hex
///
-$sd-sage-color-base-mercury-20-hex: #ffc3a8;
+$sd-sage-color-base-mercury-300-hex: #ff9970;
///
-/// color color-base-mercury-20-code
+/// color color-base-mercury-300-code
///
-$sd-sage-color-base-mercury-20-code: "mercury-20";
+$sd-sage-color-base-mercury-300-code: "mercury-300";
///
-/// color color-base-mercury-20-classname
+/// color color-base-mercury-300-classname
///
-$sd-sage-color-base-mercury-20-classname: "t-sage--color-mercury-20";
+$sd-sage-color-base-mercury-300-classname: "t-sage--color-mercury-300";
///
-/// color color-base-mercury-30-hex
+/// color color-base-mercury-400-hex
///
-$sd-sage-color-base-mercury-30-hex: #ff9970;
+$sd-sage-color-base-mercury-400-hex: #ff6337;
///
-/// color color-base-mercury-30-code
+/// color color-base-mercury-400-code
///
-$sd-sage-color-base-mercury-30-code: "mercury-30";
+$sd-sage-color-base-mercury-400-code: "mercury-400";
///
-/// color color-base-mercury-30-classname
+/// color color-base-mercury-400-classname
///
-$sd-sage-color-base-mercury-30-classname: "t-sage--color-mercury-30";
+$sd-sage-color-base-mercury-400-classname: "t-sage--color-mercury-400";
///
-/// color color-base-mercury-40-hex
+/// color color-base-mercury-500-hex
///
-$sd-sage-color-base-mercury-40-hex: #ff6337;
+$sd-sage-color-base-mercury-500-hex: #ff3e15;
///
-/// color color-base-mercury-40-code
+/// color color-base-mercury-500-code
///
-$sd-sage-color-base-mercury-40-code: "mercury-40";
+$sd-sage-color-base-mercury-500-code: "mercury-500";
///
-/// color color-base-mercury-40-classname
+/// color color-base-mercury-500-classname
///
-$sd-sage-color-base-mercury-40-classname: "t-sage--color-mercury-40";
+$sd-sage-color-base-mercury-500-classname: "t-sage--color-mercury-500";
///
-/// color color-base-mercury-50-hex
+/// color color-base-mercury-600-hex
///
-$sd-sage-color-base-mercury-50-hex: #ff3e15;
+$sd-sage-color-base-mercury-600-hex: #f11f06;
///
-/// color color-base-mercury-50-code
+/// color color-base-mercury-600-code
///
-$sd-sage-color-base-mercury-50-code: "mercury-50";
+$sd-sage-color-base-mercury-600-code: "mercury-600";
///
-/// color color-base-mercury-50-classname
+/// color color-base-mercury-600-classname
///
-$sd-sage-color-base-mercury-50-classname: "t-sage--color-mercury-50";
+$sd-sage-color-base-mercury-600-classname: "t-sage--color-mercury-600";
///
-/// color color-base-mercury-60-hex
+/// color color-base-mercury-700-hex
///
-$sd-sage-color-base-mercury-60-hex: #f11f06;
+$sd-sage-color-base-mercury-700-hex: #c81307;
///
-/// color color-base-mercury-60-code
+/// color color-base-mercury-700-code
///
-$sd-sage-color-base-mercury-60-code: "mercury-60";
+$sd-sage-color-base-mercury-700-code: "mercury-700";
///
-/// color color-base-mercury-60-classname
+/// color color-base-mercury-700-classname
///
-$sd-sage-color-base-mercury-60-classname: "t-sage--color-mercury-60";
+$sd-sage-color-base-mercury-700-classname: "t-sage--color-mercury-700";
///
-/// color color-base-mercury-70-hex
+/// color color-base-mercury-800-hex
///
-$sd-sage-color-base-mercury-70-hex: #c81307;
+$sd-sage-color-base-mercury-800-hex: #9e110e;
///
-/// color color-base-mercury-70-code
+/// color color-base-mercury-800-code
///
-$sd-sage-color-base-mercury-70-code: "mercury-70";
+$sd-sage-color-base-mercury-800-code: "mercury-800";
///
-/// color color-base-mercury-70-classname
+/// color color-base-mercury-800-classname
///
-$sd-sage-color-base-mercury-70-classname: "t-sage--color-mercury-70";
+$sd-sage-color-base-mercury-800-classname: "t-sage--color-mercury-800";
///
-/// color color-base-mercury-80-hex
+/// color color-base-mercury-900-hex
///
-$sd-sage-color-base-mercury-80-hex: #9e110e;
+$sd-sage-color-base-mercury-900-hex: #7f120f;
///
-/// color color-base-mercury-80-code
+/// color color-base-mercury-900-code
///
-$sd-sage-color-base-mercury-80-code: "mercury-80";
+$sd-sage-color-base-mercury-900-code: "mercury-900";
///
-/// color color-base-mercury-80-classname
+/// color color-base-mercury-900-classname
///
-$sd-sage-color-base-mercury-80-classname: "t-sage--color-mercury-80";
+$sd-sage-color-base-mercury-900-classname: "t-sage--color-mercury-900";
///
-/// color color-base-mercury-90-hex
+/// color color-base-mercury-950-hex
///
-$sd-sage-color-base-mercury-90-hex: #7f120f;
+$sd-sage-color-base-mercury-950-hex: #450506;
///
-/// color color-base-mercury-90-code
+/// color color-base-mercury-950-code
///
-$sd-sage-color-base-mercury-90-code: "mercury-90";
+$sd-sage-color-base-mercury-950-code: "mercury-950";
///
-/// color color-base-mercury-90-classname
+/// color color-base-mercury-950-classname
///
-$sd-sage-color-base-mercury-90-classname: "t-sage--color-mercury-90";
+$sd-sage-color-base-mercury-950-classname: "t-sage--color-mercury-950";
///
-/// color color-base-mercury-95-hex
+/// color color-base-mercury-050-hex
///
-$sd-sage-color-base-mercury-95-hex: #450506;
+$sd-sage-color-base-mercury-050-hex: #fffcfa;
///
-/// color color-base-mercury-95-code
+/// color color-base-mercury-050-code
///
-$sd-sage-color-base-mercury-95-code: "mercury-95";
+$sd-sage-color-base-mercury-050-code: "mercury-050";
///
-/// color color-base-mercury-95-classname
+/// color color-base-mercury-050-classname
///
-$sd-sage-color-base-mercury-95-classname: "t-sage--color-mercury-95";
+$sd-sage-color-base-mercury-050-classname: "t-sage--color-mercury-050";
///
/// color color-base-primary-100-hex
///
@@ -574,165 +574,33 @@ $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
-///
-$sd-sage-color-base-yellow-40-hex: #fdbb21;
-///
-/// color color-base-yellow-40-code
-///
-$sd-sage-color-base-yellow-40-code: "yellow-40";
-///
-/// color color-base-yellow-40-classname
-///
-$sd-sage-color-base-yellow-40-classname: "t-sage--color-yellow-40";
-///
-/// color color-base-yellow-50-hex
-///
-$sd-sage-color-base-yellow-50-hex: #f79a0b;
-///
-/// 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-60-hex
-///
-$sd-sage-color-base-yellow-60-hex: #db7303;
-///
-/// color color-base-yellow-60-code
-///
-$sd-sage-color-base-yellow-60-code: "yellow-60";
-///
-/// color color-base-yellow-60-classname
-///
-$sd-sage-color-base-yellow-60-classname: "t-sage--color-yellow-60";
-///
-/// color color-base-yellow-70-hex
-///
-$sd-sage-color-base-yellow-70-hex: #b64f06;
-///
-/// color color-base-yellow-70-code
-///
-$sd-sage-color-base-yellow-70-code: "yellow-70";
-///
-/// color color-base-yellow-70-classname
-///
-$sd-sage-color-base-yellow-70-classname: "t-sage--color-yellow-70";
-///
-/// color color-base-yellow-80-hex
-///
-$sd-sage-color-base-yellow-80-hex: #943d0e;
-///
-/// color color-base-yellow-80-code
-///
-$sd-sage-color-base-yellow-80-code: "yellow-80";
-///
-/// color color-base-yellow-80-classname
-///
-$sd-sage-color-base-yellow-80-classname: "t-sage--color-yellow-80";
-///
-/// color color-base-yellow-90-hex
-///
-$sd-sage-color-base-yellow-90-hex: #79330e;
-///
-/// color color-base-yellow-90-code
-///
-$sd-sage-color-base-yellow-90-code: "yellow-90";
-///
-/// color color-base-yellow-90-classname
-///
-$sd-sage-color-base-yellow-90-classname: "t-sage--color-yellow-90";
-///
-/// color color-base-yellow-95-hex
+/// color color-base-yellow-100-hex
///
-$sd-sage-color-base-yellow-95-hex: #451902;
+$sd-sage-color-base-yellow-100-hex: #fffbeb;
///
-/// color color-base-yellow-95-code
+/// color color-base-yellow-100-code
///
-$sd-sage-color-base-yellow-95-code: "yellow-95";
+$sd-sage-color-base-yellow-100-code: "yellow-100";
///
-/// color color-base-yellow-95-classname
+/// color color-base-yellow-100-classname
///
-$sd-sage-color-base-yellow-95-classname: "t-sage--color-yellow-95";
+$sd-sage-color-base-yellow-100-classname: "t-sage--color-yellow-100";
///
-/// color color-base-yellow-100-hex
+/// color color-base-yellow-150-hex
///
-$sd-sage-color-base-yellow-100-hex: #fff3c6;
+$sd-sage-color-base-yellow-150-hex: #fff3c6;
///
-/// color color-base-yellow-100-code
+/// color color-base-yellow-150-code
///
-$sd-sage-color-base-yellow-100-code: "yellow-100";
+$sd-sage-color-base-yellow-150-code: "yellow-150";
///
-/// color color-base-yellow-100-classname
+/// color color-base-yellow-150-classname
///
-$sd-sage-color-base-yellow-100-classname: "t-sage--color-yellow-100";
+$sd-sage-color-base-yellow-150-classname: "t-sage--color-yellow-150";
///
/// color color-base-yellow-200-hex
///
-$sd-sage-color-base-yellow-200-hex: #fed04b;
+$sd-sage-color-base-yellow-200-hex: #fee589;
///
/// color color-base-yellow-200-code
///
@@ -744,7 +612,7 @@ $sd-sage-color-base-yellow-200-classname: "t-sage--color-yellow-200";
///
/// color color-base-yellow-300-hex
///
-$sd-sage-color-base-yellow-300-hex: #fdbb21;
+$sd-sage-color-base-yellow-300-hex: #fed04b;
///
/// color color-base-yellow-300-code
///
@@ -756,7 +624,7 @@ $sd-sage-color-base-yellow-300-classname: "t-sage--color-yellow-300";
///
/// color color-base-yellow-400-hex
///
-$sd-sage-color-base-yellow-400-hex: #db7303;
+$sd-sage-color-base-yellow-400-hex: #fdbb21;
///
/// color color-base-yellow-400-code
///
@@ -768,7 +636,7 @@ $sd-sage-color-base-yellow-400-classname: "t-sage--color-yellow-400";
///
/// color color-base-yellow-500-hex
///
-$sd-sage-color-base-yellow-500-hex: #451902;
+$sd-sage-color-base-yellow-500-hex: #f79a0b;
///
/// color color-base-yellow-500-code
///
@@ -778,209 +646,221 @@ $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-yellow-600-hex
///
-$sd-sage-color-base-red-5-hex: #fffafa;
+$sd-sage-color-base-yellow-600-hex: #db7303;
///
-/// color color-base-red-5-code
+/// color color-base-yellow-600-code
///
-$sd-sage-color-base-red-5-code: "red-5";
+$sd-sage-color-base-yellow-600-code: "yellow-60";
///
-/// color color-base-red-5-classname
+/// color color-base-yellow-600-classname
///
-$sd-sage-color-base-red-5-classname: "t-sage--color-red-5";
+$sd-sage-color-base-yellow-600-classname: "t-sage--color-yellow-600";
///
-/// color color-base-red-10-hex
+/// color color-base-yellow-700-hex
///
-$sd-sage-color-base-red-10-hex: #fef2f2;
+$sd-sage-color-base-yellow-700-hex: #b64f06;
///
-/// color color-base-red-10-code
+/// color color-base-yellow-700-code
///
-$sd-sage-color-base-red-10-code: "red-10";
+$sd-sage-color-base-yellow-700-code: "yellow-700";
///
-/// color color-base-red-10-classname
+/// color color-base-yellow-700-classname
///
-$sd-sage-color-base-red-10-classname: "t-sage--color-red-10";
+$sd-sage-color-base-yellow-700-classname: "t-sage--color-yellow-700";
///
-/// color color-base-red-15-hex
+/// color color-base-yellow-800-hex
///
-$sd-sage-color-base-red-15-hex: #fee2e1;
+$sd-sage-color-base-yellow-800-hex: #943d0e;
///
-/// color color-base-red-15-code
+/// color color-base-yellow-800-code
///
-$sd-sage-color-base-red-15-code: "red-15";
+$sd-sage-color-base-yellow-800-code: "yellow-800";
///
-/// color color-base-red-15-classname
+/// color color-base-yellow-800-classname
///
-$sd-sage-color-base-red-15-classname: "t-sage--color-red-15";
+$sd-sage-color-base-yellow-800-classname: "t-sage--color-yellow-800";
///
-/// color color-base-red-20-hex
+/// color color-base-yellow-900-hex
///
-$sd-sage-color-base-red-20-hex: #fecaca;
+$sd-sage-color-base-yellow-900-hex: #79330e;
///
-/// color color-base-red-20-code
+/// color color-base-yellow-900-code
///
-$sd-sage-color-base-red-20-code: "red-20";
+$sd-sage-color-base-yellow-900-code: "yellow-900";
///
-/// color color-base-red-20-classname
+/// color color-base-yellow-900-classname
///
-$sd-sage-color-base-red-20-classname: "t-sage--color-red-20";
+$sd-sage-color-base-yellow-900-classname: "t-sage--color-yellow-900";
///
-/// color color-base-red-30-hex
+/// color color-base-yellow-950-hex
///
-$sd-sage-color-base-red-30-hex: #fda5a5;
+$sd-sage-color-base-yellow-950-hex: #451902;
///
-/// color color-base-red-30-code
+/// color color-base-yellow-950-code
///
-$sd-sage-color-base-red-30-code: "red-30";
+$sd-sage-color-base-yellow-950-code: "yellow-950";
///
-/// color color-base-red-30-classname
+/// color color-base-yellow-950-classname
///
-$sd-sage-color-base-red-30-classname: "t-sage--color-red-30";
+$sd-sage-color-base-yellow-950-classname: "t-sage--color-yellow-950";
///
-/// color color-base-red-40-hex
+/// color color-base-yellow-050-hex
///
-$sd-sage-color-base-red-40-hex: #f87171;
+$sd-sage-color-base-yellow-050-hex: #fffefa;
///
-/// color color-base-red-40-code
+/// color color-base-yellow-050-code
///
-$sd-sage-color-base-red-40-code: "red-40";
+$sd-sage-color-base-yellow-050-code: "yellow-050";
///
-/// color color-base-red-40-classname
+/// color color-base-yellow-050-classname
///
-$sd-sage-color-base-red-40-classname: "t-sage--color-red-40";
+$sd-sage-color-base-yellow-050-classname: "t-sage--color-yellow-050";
///
-/// color color-base-red-50-hex
+/// color color-base-red-100-hex
///
-$sd-sage-color-base-red-50-hex: #ef4444;
+$sd-sage-color-base-red-100-hex: #fef2f2;
///
-/// color color-base-red-50-code
+/// color color-base-red-100-code
///
-$sd-sage-color-base-red-50-code: "red-50";
+$sd-sage-color-base-red-100-code: "red-100";
///
-/// color color-base-red-50-classname
+/// color color-base-red-100-classname
///
-$sd-sage-color-base-red-50-classname: "t-sage--color-red-50";
+$sd-sage-color-base-red-100-classname: "t-sage--color-red-100";
///
-/// color color-base-red-60-hex
+/// color color-base-red-150-hex
///
-$sd-sage-color-base-red-60-hex: #dc2625;
+$sd-sage-color-base-red-150-hex: #fee2e1;
///
-/// color color-base-red-60-code
+/// color color-base-red-150-code
///
-$sd-sage-color-base-red-60-code: "red-60";
+$sd-sage-color-base-red-150-code: "red-150";
///
-/// color color-base-red-60-classname
+/// color color-base-red-150-classname
///
-$sd-sage-color-base-red-60-classname: "t-sage--color-red-60";
+$sd-sage-color-base-red-150-classname: "t-sage--color-red-150";
///
-/// color color-base-red-70-hex
+/// color color-base-red-200-hex
+///
+$sd-sage-color-base-red-200-hex: #fecaca;
+///
+/// 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-70-hex: #b91c1b;
+$sd-sage-color-base-red-300-hex: #fda5a5;
///
-/// color color-base-red-70-code
+/// color color-base-red-300-code
///
-$sd-sage-color-base-red-70-code: "red-70";
+$sd-sage-color-base-red-300-code: "red-300";
///
-/// color color-base-red-70-classname
+/// color color-base-red-300-classname
///
-$sd-sage-color-base-red-70-classname: "t-sage--color-red-70";
+$sd-sage-color-base-red-300-classname: "t-sage--color-red-300";
///
-/// color color-base-red-80-hex
+/// color color-base-red-400-hex
///
-$sd-sage-color-base-red-80-hex: #991b1b;
+$sd-sage-color-base-red-400-hex: #f87171;
///
-/// color color-base-red-80-code
+/// color color-base-red-400-code
///
-$sd-sage-color-base-red-80-code: "red-80";
+$sd-sage-color-base-red-400-code: "red-400";
///
-/// color color-base-red-80-classname
+/// color color-base-red-400-classname
///
-$sd-sage-color-base-red-80-classname: "t-sage--color-red-80";
+$sd-sage-color-base-red-400-classname: "t-sage--color-red-400";
///
-/// color color-base-red-90-hex
+/// color color-base-red-500-hex
///
-$sd-sage-color-base-red-90-hex: #7f1c1d;
+$sd-sage-color-base-red-500-hex: #ef4444;
///
-/// color color-base-red-90-code
+/// color color-base-red-500-code
///
-$sd-sage-color-base-red-90-code: "red-90";
+$sd-sage-color-base-red-500-code: "red-500";
///
-/// color color-base-red-90-classname
+/// color color-base-red-500-classname
///
-$sd-sage-color-base-red-90-classname: "t-sage--color-red-90";
+$sd-sage-color-base-red-500-classname: "t-sage--color-red-500";
///
-/// color color-base-red-95-hex
+/// color color-base-red-600-hex
///
-$sd-sage-color-base-red-95-hex: #572627;
+$sd-sage-color-base-red-600-hex: #dc2625;
///
-/// color color-base-red-95-code
+/// color color-base-red-600-code
///
-$sd-sage-color-base-red-95-code: "red-95";
+$sd-sage-color-base-red-600-code: "red-600";
///
-/// color color-base-red-95-classname
+/// color color-base-red-600-classname
///
-$sd-sage-color-base-red-95-classname: "t-sage--color-red-95";
+$sd-sage-color-base-red-600-classname: "t-sage--color-red-600";
///
-/// color color-base-red-100-hex
+/// color color-base-red-700-hex
///
-$sd-sage-color-base-red-100-hex: #fee2e1;
+$sd-sage-color-base-red-700-hex: #b91c1b;
///
-/// color color-base-red-100-code
+/// color color-base-red-700-code
///
-$sd-sage-color-base-red-100-code: "red-100";
+$sd-sage-color-base-red-700-code: "red-700";
///
-/// color color-base-red-100-classname
+/// color color-base-red-700-classname
///
-$sd-sage-color-base-red-100-classname: "t-sage--color-red-100";
+$sd-sage-color-base-red-700-classname: "t-sage--color-red-700";
///
-/// color color-base-red-200-hex
+/// color color-base-red-800-hex
///
-$sd-sage-color-base-red-200-hex: #fda5a5;
+$sd-sage-color-base-red-800-hex: #991b1b;
///
-/// color color-base-red-200-code
+/// color color-base-red-800-code
///
-$sd-sage-color-base-red-200-code: "red-200";
+$sd-sage-color-base-red-800-code: "red-800";
///
-/// color color-base-red-200-classname
+/// color color-base-red-800-classname
///
-$sd-sage-color-base-red-200-classname: "t-sage--color-red-200";
+$sd-sage-color-base-red-800-classname: "t-sage--color-red-800";
///
-/// color color-base-red-300-hex
+/// color color-base-red-900-hex
///
-$sd-sage-color-base-red-300-hex: #ef4444;
+$sd-sage-color-base-red-900-hex: #7f1c1d;
///
-/// color color-base-red-300-code
+/// color color-base-red-900-code
///
-$sd-sage-color-base-red-300-code: "red-300";
+$sd-sage-color-base-red-900-code: "red-900";
///
-/// color color-base-red-300-classname
+/// color color-base-red-900-classname
///
-$sd-sage-color-base-red-300-classname: "t-sage--color-red-300";
+$sd-sage-color-base-red-900-classname: "t-sage--color-red-900";
///
-/// color color-base-red-400-hex
+/// color color-base-red-950-hex
///
-$sd-sage-color-base-red-400-hex: #991b1b;
+$sd-sage-color-base-red-950-hex: #572627;
///
-/// color color-base-red-400-code
+/// color color-base-red-950-code
///
-$sd-sage-color-base-red-400-code: "red-400";
+$sd-sage-color-base-red-950-code: "red-950";
///
-/// color color-base-red-400-classname
+/// color color-base-red-950-classname
///
-$sd-sage-color-base-red-400-classname: "t-sage--color-red-400";
+$sd-sage-color-base-red-950-classname: "t-sage--color-red-950";
///
-/// color color-base-red-500-hex
+/// color color-base-red-050-hex
///
-$sd-sage-color-base-red-500-hex: #572627;
+$sd-sage-color-base-red-050-hex: #fffafa;
///
-/// color color-base-red-500-code
+/// color color-base-red-050-code
///
-$sd-sage-color-base-red-500-code: "red-500";
+$sd-sage-color-base-red-050-code: "red-050";
///
-/// color color-base-red-500-classname
+/// color color-base-red-050-classname
///
-$sd-sage-color-base-red-500-classname: "t-sage--color-red-500";
+$sd-sage-color-base-red-050-classname: "t-sage--color-red-050";
///
/// color color-base-orange-100-hex
///
@@ -1042,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-100-hex
///
-$sd-sage-color-base-purple-40-hex: #8081f9;
+$sd-sage-color-base-purple-100-hex: #edf1ff;
///
-/// color color-base-purple-40-code
+/// color color-base-purple-100-code
///
-$sd-sage-color-base-purple-40-code: "purple-40";
+$sd-sage-color-base-purple-100-code: "purple-100";
///
-/// color color-base-purple-40-classname
+/// color color-base-purple-100-classname
///
-$sd-sage-color-base-purple-40-classname: "t-sage--color-purple-40";
+$sd-sage-color-base-purple-100-classname: "t-sage--color-purple-100";
///
-/// color color-base-purple-50-hex
+/// color color-base-purple-150-hex
///
-$sd-sage-color-base-purple-50-hex: #6a62f2;
+$sd-sage-color-base-purple-150-hex: #e0e4ff;
///
-/// color color-base-purple-50-code
+/// color color-base-purple-150-code
///
-$sd-sage-color-base-purple-50-code: "purple-50";
+$sd-sage-color-base-purple-150-code: "purple-150";
///
-/// color color-base-purple-50-classname
+/// color color-base-purple-150-classname
///
-$sd-sage-color-base-purple-50-classname: "t-sage--color-purple-50";
+$sd-sage-color-base-purple-150-classname: "t-sage--color-purple-150";
///
-/// color color-base-purple-60-hex
+/// color color-base-purple-200-hex
///
-$sd-sage-color-base-purple-60-hex: #533be5;
+$sd-sage-color-base-purple-200-hex: #c7cdfe;
///
-/// color color-base-purple-60-code
+/// color color-base-purple-200-code
///
-$sd-sage-color-base-purple-60-code: "purple-60";
+$sd-sage-color-base-purple-200-code: "purple-200";
///
-/// color color-base-purple-60-classname
+/// color color-base-purple-200-classname
///
-$sd-sage-color-base-purple-60-classname: "t-sage--color-purple-60";
+$sd-sage-color-base-purple-200-classname: "t-sage--color-purple-200";
///
-/// color color-base-purple-70-hex
+/// color color-base-purple-300-hex
///
-$sd-sage-color-base-purple-70-hex: #4f37cb;
+$sd-sage-color-base-purple-300-hex: #a3acfd;
///
-/// color color-base-purple-70-code
+/// color color-base-purple-300-code
///
-$sd-sage-color-base-purple-70-code: "purple-70";
+$sd-sage-color-base-purple-300-code: "purple-300";
///
-/// color color-base-purple-70-classname
+/// color color-base-purple-300-classname
///
-$sd-sage-color-base-purple-70-classname: "t-sage--color-purple-70";
+$sd-sage-color-base-purple-300-classname: "t-sage--color-purple-300";
///
-/// color color-base-purple-80-hex
+/// color color-base-purple-400-hex
///
-$sd-sage-color-base-purple-80-hex: #402fa4;
+$sd-sage-color-base-purple-400-hex: #8081f9;
///
-/// color color-base-purple-80-code
+/// color color-base-purple-400-code
///
-$sd-sage-color-base-purple-80-code: "purple-80";
+$sd-sage-color-base-purple-400-code: "purple-400";
///
-/// color color-base-purple-80-classname
+/// color color-base-purple-400-classname
///
-$sd-sage-color-base-purple-80-classname: "t-sage--color-purple-80";
+$sd-sage-color-base-purple-400-classname: "t-sage--color-purple-400";
///
-/// color color-base-purple-90-hex
+/// color color-base-purple-500-hex
///
-$sd-sage-color-base-purple-90-hex: #372d82;
+$sd-sage-color-base-purple-500-hex: #6a62f2;
///
-/// color color-base-purple-90-code
+/// color color-base-purple-500-code
///
-$sd-sage-color-base-purple-90-code: "purple-90";
+$sd-sage-color-base-purple-500-code: "purple-500";
///
-/// color color-base-purple-90-classname
+/// color color-base-purple-500-classname
///
-$sd-sage-color-base-purple-90-classname: "t-sage--color-purple-90";
+$sd-sage-color-base-purple-500-classname: "t-sage--color-purple-500";
///
-/// color color-base-purple-95-hex
+/// color color-base-purple-600-hex
///
-$sd-sage-color-base-purple-95-hex: #221b4b;
+$sd-sage-color-base-purple-600-hex: #533be5;
///
-/// color color-base-purple-95-code
+/// color color-base-purple-600-code
///
-$sd-sage-color-base-purple-95-code: "purple-95";
+$sd-sage-color-base-purple-600-code: "purple-600";
///
-/// color color-base-purple-95-classname
+/// color color-base-purple-600-classname
///
-$sd-sage-color-base-purple-95-classname: "t-sage--color-purple-95";
+$sd-sage-color-base-purple-600-classname: "t-sage--color-purple-600";
///
-/// color color-base-purple-100-hex
+/// color color-base-purple-700-hex
///
-$sd-sage-color-base-purple-100-hex: #e0e4ff;
+$sd-sage-color-base-purple-700-hex: #4f37cb;
///
-/// color color-base-purple-100-code
+/// color color-base-purple-700-code
///
-$sd-sage-color-base-purple-100-code: "purple-100";
+$sd-sage-color-base-purple-700-code: "purple-700";
///
-/// color color-base-purple-100-classname
+/// color color-base-purple-700-classname
///
-$sd-sage-color-base-purple-100-classname: "t-sage--color-purple-100";
+$sd-sage-color-base-purple-700-classname: "t-sage--color-purple-700";
///
-/// color color-base-purple-200-hex
+/// color color-base-purple-800-hex
///
-$sd-sage-color-base-purple-200-hex: #a3acfd;
+$sd-sage-color-base-purple-800-hex: #402fa4;
///
-/// color color-base-purple-200-code
+/// color color-base-purple-800-code
///
-$sd-sage-color-base-purple-200-code: "purple-200";
+$sd-sage-color-base-purple-800-code: "purple-800";
///
-/// color color-base-purple-200-classname
+/// color color-base-purple-800-classname
///
-$sd-sage-color-base-purple-200-classname: "t-sage--color-purple-200";
+$sd-sage-color-base-purple-800-classname: "t-sage--color-purple-800";
///
-/// color color-base-purple-300-hex
+/// color color-base-purple-900-hex
///
-$sd-sage-color-base-purple-300-hex: #533be5;
+$sd-sage-color-base-purple-900-hex: #372d82;
///
-/// color color-base-purple-300-code
+/// color color-base-purple-900-code
///
-$sd-sage-color-base-purple-300-code: "purple-300";
+$sd-sage-color-base-purple-900-code: "purple-900";
///
-/// color color-base-purple-300-classname
+/// color color-base-purple-900-classname
///
-$sd-sage-color-base-purple-300-classname: "t-sage--color-purple-300";
+$sd-sage-color-base-purple-900-classname: "t-sage--color-purple-900";
///
-/// color color-base-purple-400-hex
+/// color color-base-purple-950-hex
///
-$sd-sage-color-base-purple-400-hex: #402fa4;
+$sd-sage-color-base-purple-950-hex: #221b4b;
///
-/// color color-base-purple-400-code
+/// color color-base-purple-950-code
///
-$sd-sage-color-base-purple-400-code: "purple-400";
+$sd-sage-color-base-purple-950-code: "purple-950";
///
-/// color color-base-purple-400-classname
+/// color color-base-purple-950-classname
///
-$sd-sage-color-base-purple-400-classname: "t-sage--color-purple-400";
+$sd-sage-color-base-purple-950-classname: "t-sage--color-purple-950";
///
-/// color color-base-purple-500-hex
+/// color color-base-purple-050-hex
///
-$sd-sage-color-base-purple-500-hex: #221b4b;
+$sd-sage-color-base-purple-050-hex: #fafbff;
///
-/// color color-base-purple-500-code
+/// color color-base-purple-050-code
///
-$sd-sage-color-base-purple-500-code: "purple-500";
+$sd-sage-color-base-purple-050-code: "purple-050";
///
-/// color color-base-purple-500-classname
+/// color color-base-purple-050-classname
///
-$sd-sage-color-base-purple-500-classname: "t-sage--color-purple-500";
+$sd-sage-color-base-purple-050-classname: "t-sage--color-purple-050";
///
/// color color-base-charcoal-100-hex
///
@@ -1306,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-100-hex
///
-/// color color-base-grey-20-classname
+$sd-sage-color-base-grey-100-hex: #f8f8f8;
///
-$sd-sage-color-base-grey-20-classname: "t-sage--color-grey-20";
+/// color color-base-grey-100-code
///
-/// color color-base-grey-30-hex
+$sd-sage-color-base-grey-100-code: "grey-100";
///
-$sd-sage-color-base-grey-30-hex: #d2d1d1;
+/// color color-base-grey-100-classname
///
-/// color color-base-grey-30-code
+$sd-sage-color-base-grey-100-classname: "t-sage--color-grey-100";
///
-$sd-sage-color-base-grey-30-code: "grey-30";
+/// color color-base-grey-150-hex
///
-/// color color-base-grey-30-classname
+$sd-sage-color-base-grey-150-hex: #f0f0f0;
///
-$sd-sage-color-base-grey-30-classname: "t-sage--color-grey-30";
+/// color color-base-grey-150-code
///
-/// color color-base-grey-40-hex
+$sd-sage-color-base-grey-150-code: "grey-15";
///
-$sd-sage-color-base-grey-40-hex: #bbbab9;
+/// color color-base-grey-150-classname
///
-/// color color-base-grey-40-code
+$sd-sage-color-base-grey-150-classname: "t-sage--color-grey-150";
///
-$sd-sage-color-base-grey-40-code: "grey-40";
+/// color color-base-grey-200-hex
///
-/// color color-base-grey-40-classname
+$sd-sage-color-base-grey-200-hex: #e4e4e4;
///
-$sd-sage-color-base-grey-40-classname: "t-sage--color-grey-40";
+/// color color-base-grey-200-code
///
-/// color color-base-grey-50-hex
+$sd-sage-color-base-grey-200-code: "grey-200";
///
-$sd-sage-color-base-grey-50-hex: #9b9a98;
+/// color color-base-grey-200-classname
///
-/// color color-base-grey-50-code
+$sd-sage-color-base-grey-200-classname: "t-sage--color-grey-200";
///
-$sd-sage-color-base-grey-50-code: "grey-50";
+/// color color-base-grey-300-hex
///
-/// color color-base-grey-50-classname
+$sd-sage-color-base-grey-300-hex: #d2d1d1;
///
-$sd-sage-color-base-grey-50-classname: "t-sage--color-grey-50";
+/// color color-base-grey-300-code
///
-/// color color-base-grey-60-hex
+$sd-sage-color-base-grey-300-code: "grey-300";
///
-$sd-sage-color-base-grey-60-hex: #828180;
+/// color color-base-grey-300-classname
///
-/// color color-base-grey-60-code
+$sd-sage-color-base-grey-300-classname: "t-sage--color-grey-300";
///
-$sd-sage-color-base-grey-60-code: "grey-60";
+/// color color-base-grey-400-hex
///
-/// color color-base-grey-60-classname
+$sd-sage-color-base-grey-400-hex: #bbbab9;
///
-$sd-sage-color-base-grey-60-classname: "t-sage--color-grey-60";
+/// color color-base-grey-400-code
///
-/// color color-base-grey-70-hex
+$sd-sage-color-base-grey-400-code: "grey-400";
///
-$sd-sage-color-base-grey-70-hex: #6c6a69;
+/// color color-base-grey-400-classname
///
-/// color color-base-grey-70-code
+$sd-sage-color-base-grey-400-classname: "t-sage--color-grey-400";
///
-$sd-sage-color-base-grey-70-code: "grey-70";
+/// color color-base-grey-500-hex
///
-/// color color-base-grey-70-classname
+$sd-sage-color-base-grey-500-hex: #9b9a98;
///
-$sd-sage-color-base-grey-70-classname: "t-sage--color-grey-70";
+/// color color-base-grey-500-code
///
-/// color color-base-grey-80-hex
+$sd-sage-color-base-grey-500-code: "grey-500";
///
-$sd-sage-color-base-grey-80-hex: #4d4d4c;
+/// color color-base-grey-500-classname
///
-/// color color-base-grey-80-code
+$sd-sage-color-base-grey-500-classname: "t-sage--color-grey-500";
///
-$sd-sage-color-base-grey-80-code: "grey-80";
+/// color color-base-grey-600-hex
///
-/// color color-base-grey-80-classname
+$sd-sage-color-base-grey-600-hex: #828180;
///
-$sd-sage-color-base-grey-80-classname: "t-sage--color-grey-80";
+/// color color-base-grey-600-code
///
-/// color color-base-grey-90-hex
+$sd-sage-color-base-grey-600-code: "grey-600";
///
-$sd-sage-color-base-grey-90-hex: #343332;
+/// color color-base-grey-600-classname
///
-/// color color-base-grey-90-code
+$sd-sage-color-base-grey-600-classname: "t-sage--color-grey-600";
///
-$sd-sage-color-base-grey-90-code: "grey-90";
+/// color color-base-grey-700-hex
///
-/// color color-base-grey-90-classname
+$sd-sage-color-base-grey-700-hex: #6c6a69;
///
-$sd-sage-color-base-grey-90-classname: "t-sage--color-grey-90";
+/// color color-base-grey-700-code
///
-/// color color-base-grey-95-hex
+$sd-sage-color-base-grey-700-code: "grey-700";
///
-$sd-sage-color-base-grey-95-hex: #1a1a19;
+/// color color-base-grey-700-classname
///
-/// color color-base-grey-95-code
+$sd-sage-color-base-grey-700-classname: "t-sage--color-grey-700";
///
-$sd-sage-color-base-grey-95-code: "grey-95";
+/// color color-base-grey-800-hex
///
-/// color color-base-grey-95-classname
+$sd-sage-color-base-grey-800-hex: #4d4d4c;
///
-$sd-sage-color-base-grey-95-classname: "t-sage--color-grey-95";
+/// color color-base-grey-800-code
///
-/// color color-base-grey-100-hex
+$sd-sage-color-base-grey-800-code: "grey-800";
///
-$sd-sage-color-base-grey-100-hex: #f8f8f8;
+/// color color-base-grey-800-classname
///
-/// color color-base-grey-100-code
+$sd-sage-color-base-grey-800-classname: "t-sage--color-grey-800";
///
-$sd-sage-color-base-grey-100-code: "grey-100";
+/// color color-base-grey-900-hex
///
-/// color color-base-grey-100-classname
+$sd-sage-color-base-grey-900-hex: #343332;
///
-$sd-sage-color-base-grey-100-classname: "t-sage--color-grey-100";
+/// color color-base-grey-900-code
///
-/// color color-base-grey-200-hex
+$sd-sage-color-base-grey-900-code: "grey-900";
///
-$sd-sage-color-base-grey-200-hex: #f0f0f0;
+/// color color-base-grey-900-classname
///
-/// color color-base-grey-200-code
+$sd-sage-color-base-grey-900-classname: "t-sage--color-grey-900";
///
-$sd-sage-color-base-grey-200-code: "grey-200";
+/// color color-base-grey-950-hex
///
-/// color color-base-grey-200-classname
+$sd-sage-color-base-grey-950-hex: #1a1a19;
///
-$sd-sage-color-base-grey-200-classname: "t-sage--color-grey-200";
+/// color color-base-grey-950-code
///
-/// color color-base-grey-300-hex
+$sd-sage-color-base-grey-950-code: "grey-950";
///
-$sd-sage-color-base-grey-300-hex: #e4e4e4;
+/// color color-base-grey-950-classname
///
-/// color color-base-grey-300-code
+$sd-sage-color-base-grey-950-classname: "t-sage--color-grey-950";
///
-$sd-sage-color-base-grey-300-code: "grey-300";
+/// color color-base-grey-050-hex
///
-/// color color-base-grey-300-classname
+$sd-sage-color-base-grey-050-hex: #fcfcfc;
///
-$sd-sage-color-base-grey-300-classname: "t-sage--color-grey-300";
+/// color color-base-grey-050-code
///
-/// color color-base-grey-400-hex
+$sd-sage-color-base-grey-050-code: "grey-050";
///
-$sd-sage-color-base-grey-400-hex: #d2d1d1;
+/// color color-base-grey-050-classname
///
-/// color color-base-grey-400-code
-///
-$sd-sage-color-base-grey-400-code: "grey-400";
-///
-/// color color-base-grey-400-classname
-///
-$sd-sage-color-base-grey-400-classname: "t-sage--color-grey-400";
-///
-/// color color-base-grey-500-hex
-///
-$sd-sage-color-base-grey-500-hex: #9b9a98;
-///
-/// color color-base-grey-500-code
-///
-$sd-sage-color-base-grey-500-code: "grey-500";
-///
-/// color color-base-grey-500-classname
-///
-$sd-sage-color-base-grey-500-classname: "t-sage--color-grey-500";
+$sd-sage-color-base-grey-050-classname: "t-sage--color-grey-050";
///
/// color color-base-white-100-hex
///
@@ -1635,189 +1395,189 @@ $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,
- ),
- 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,
- ),
- 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,
- ),
- 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,
- ),
- 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,
- ),
- 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,
- ),
- 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,
- ),
- 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,
- ),
- 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,
- ),
- 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,
- ),
- 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,
- ),
- 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,
+ 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,
+ ),
+ 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,
+ ),
+ 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,
+ ),
+ 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,
+ ),
+ 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,
+ ),
+ 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,
+ ),
+ 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,
+ ),
+ 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,
+ ),
+ 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,
+ ),
+ 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,
+ ),
+ 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,
+ ),
+ 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: (
- 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,
- ),
- 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,
- ),
- 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,
- ),
- 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,
- ),
- 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,
- ),
- 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,
- ),
- 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,
- ),
- 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,
- ),
- 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,
- ),
- 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,
- ),
- 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,
- ),
- 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,
+ 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,
+ ),
+ 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,
+ ),
+ 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,
+ ),
+ 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,
+ ),
+ 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,
+ ),
+ 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,
+ ),
+ 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,
+ ),
+ 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,
+ ),
+ 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,
+ ),
+ 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,
+ ),
+ 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,
+ ),
+ 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: (
- 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,
- ),
- 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,
- ),
- 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,
- ),
- 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,
- ),
- 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,
- ),
- 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,
- ),
- 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,
- ),
- 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,
- ),
- 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,
- ),
- 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,
- ),
- 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,
- ),
- 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,
+ 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,
+ ),
+ 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,
+ ),
+ 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,
+ ),
+ 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,
+ ),
+ 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,
+ ),
+ 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,
+ ),
+ 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,
+ ),
+ 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,
+ ),
+ 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,
+ ),
+ 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,
+ ),
+ 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,
+ ),
+ 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: (
@@ -1875,71 +1635,16 @@ $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,
@@ -1960,73 +1665,48 @@ $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,
+ ),
+ 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: (
- 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,
- ),
- 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,
- ),
- 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,
- ),
- 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,
- ),
- 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,
- ),
- 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,
- ),
- 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,
- ),
- 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,
- ),
- 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,
- ),
- 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,
- ),
- 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,
- ),
- 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,
- ),
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,
),
+ 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,
+ ),
200: (
hex: $sd-sage-color-base-red-200-hex,
code: $sd-sage-color-base-red-200-code,
@@ -2047,6 +1727,36 @@ $sd-sage-color: (
code: $sd-sage-color-base-red-500-code,
classname: $sd-sage-color-base-red-500-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,
+ ),
+ 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,
+ ),
+ 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,
+ ),
+ 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,
+ ),
+ 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,
+ ),
+ 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: (
@@ -2076,71 +1786,16 @@ $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,
@@ -2161,6 +1816,36 @@ $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,
+ ),
+ 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: (
@@ -2190,71 +1875,16 @@ $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,
@@ -2275,6 +1905,36 @@ $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,
+ ),
+ 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/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.scss b/packages/sage-assets/lib/stylesheets/tokens/_border.scss
index 7a4ad74b82..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),
- error: rem(1px) solid sage-color(red, 300),
- interactive: rem(1px) solid sage-color(grey, 400),
+ default: rem(1px) solid sage-color(grey, 200),
+ error: rem(1px) solid sage-color(red, 500),
+ 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 91ab7c33fa..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, 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, 300),
- error-focus: 0 0 0 4px sage-color(red, 300),
- disabled: 0 0 0 1px sage-color(grey, 300),
+ 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-assets/lib/stylesheets/tokens/_color_palette.scss b/packages/sage-assets/lib/stylesheets/tokens/_color_palette.scss
index 632b1924a9..b53ed8b82b 100644
--- a/packages/sage-assets/lib/stylesheets/tokens/_color_palette.scss
+++ b/packages/sage-assets/lib/stylesheets/tokens/_color_palette.scss
@@ -32,14 +32,38 @@ $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-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/Chart/Chart.story.jsx b/packages/sage-react/lib/Chart/Chart.story.jsx
index 0721c11e43..8216863544 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',
@@ -134,7 +134,7 @@ Donut.args = {
{
name: 'Inactive',
value: 153,
- fill: SageTokens.COLOR_PALETTE.RED_200,
+ fill: SageTokens.COLOR_PALETTE.RED_300,
},
{
name: 'Hungry',
@@ -144,7 +144,7 @@ Donut.args = {
{
name: 'Grumpy',
value: 53,
- fill: SageTokens.COLOR_PALETTE.PURPLE_200,
+ fill: SageTokens.COLOR_PALETTE.PURPLE_300,
},
],
loading: false,
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/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/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 && (
(
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/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,
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/classnames/type.js b/packages/sage-react/lib/configs/classnames/type.js
index 2a3673f87b..ceebd879be 100644
--- a/packages/sage-react/lib/configs/classnames/type.js
+++ b/packages/sage-react/lib/configs/classnames/type.js
@@ -27,8 +27,24 @@ export const CLASSNAMES_TYPE = {
// CLASSNAMES_TYPE_COLORS.RED_200 ---> `t-sage--color-red-200`
export const CLASSNAMES_TYPE_COLORS = {};
Object.keys(SageDictionary.COLOR).forEach((colorName) => {
+ const defaultIndex = {
+ 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
+ }[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;
diff --git a/packages/sage-react/lib/configs/dictionary/tokens.js b/packages/sage-react/lib/configs/dictionary/tokens.js
index fc6635ea4f..af0c112b98 100644
--- a/packages/sage-react/lib/configs/dictionary/tokens.js
+++ b/packages/sage-react/lib/configs/dictionary/tokens.js
@@ -19,114 +19,114 @@
//
// 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_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_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_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_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_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_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_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';
+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_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';
+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_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,108 +157,78 @@ 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_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_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_100_HEX = '#fee2e1';
+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_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';
-export const COLOR_BASE_RED_200_HEX = '#fda5a5';
+export const COLOR_BASE_RED_150_HEX = '#fee2e1';
+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-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_HEX = '#fda5a5';
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_HEX = '#f87171';
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_HEX = '#ef4444';
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-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-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-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-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-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';
@@ -274,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_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_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';
@@ -340,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_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_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';
@@ -427,189 +367,189 @@ 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,
- },
- 10: {
- HEX: COLOR_BASE_BLUE_10_HEX,
- CODE: COLOR_BASE_BLUE_10_CODE,
- CLASSNAME: COLOR_BASE_BLUE_10_CLASSNAME,
- },
- 15: {
- HEX: COLOR_BASE_BLUE_15_HEX,
- CODE: COLOR_BASE_BLUE_15_CODE,
- CLASSNAME: COLOR_BASE_BLUE_15_CLASSNAME,
- },
- 20: {
- HEX: COLOR_BASE_BLUE_20_HEX,
- CODE: COLOR_BASE_BLUE_20_CODE,
- CLASSNAME: COLOR_BASE_BLUE_20_CLASSNAME,
- },
- 30: {
- HEX: COLOR_BASE_BLUE_30_HEX,
- CODE: COLOR_BASE_BLUE_30_CODE,
- CLASSNAME: COLOR_BASE_BLUE_30_CLASSNAME,
- },
- 40: {
- HEX: COLOR_BASE_BLUE_40_HEX,
- CODE: COLOR_BASE_BLUE_40_CODE,
- CLASSNAME: COLOR_BASE_BLUE_40_CLASSNAME,
- },
- 50: {
- HEX: COLOR_BASE_BLUE_50_HEX,
- CODE: COLOR_BASE_BLUE_50_CODE,
- CLASSNAME: COLOR_BASE_BLUE_50_CLASSNAME,
- },
- 60: {
- HEX: COLOR_BASE_BLUE_60_HEX,
- CODE: COLOR_BASE_BLUE_60_CODE,
- CLASSNAME: COLOR_BASE_BLUE_60_CLASSNAME,
- },
- 70: {
- HEX: COLOR_BASE_BLUE_70_HEX,
- CODE: COLOR_BASE_BLUE_70_CODE,
- CLASSNAME: COLOR_BASE_BLUE_70_CLASSNAME,
- },
- 80: {
- HEX: COLOR_BASE_BLUE_80_HEX,
- CODE: COLOR_BASE_BLUE_80_CODE,
- CLASSNAME: COLOR_BASE_BLUE_80_CLASSNAME,
- },
- 90: {
- HEX: COLOR_BASE_BLUE_90_HEX,
- CODE: COLOR_BASE_BLUE_90_CODE,
- CLASSNAME: COLOR_BASE_BLUE_90_CLASSNAME,
- },
- 95: {
- HEX: COLOR_BASE_BLUE_95_HEX,
- CODE: COLOR_BASE_BLUE_95_CODE,
- CLASSNAME: COLOR_BASE_BLUE_95_CLASSNAME,
+ 100: {
+ HEX: COLOR_BASE_BLUE_100_HEX,
+ CODE: COLOR_BASE_BLUE_100_CODE,
+ CLASSNAME: COLOR_BASE_BLUE_100_CLASSNAME,
+ },
+ 150: {
+ HEX: COLOR_BASE_BLUE_150_HEX,
+ CODE: COLOR_BASE_BLUE_150_CODE,
+ CLASSNAME: COLOR_BASE_BLUE_150_CLASSNAME,
+ },
+ 200: {
+ HEX: COLOR_BASE_BLUE_200_HEX,
+ CODE: COLOR_BASE_BLUE_200_CODE,
+ CLASSNAME: COLOR_BASE_BLUE_200_CLASSNAME,
+ },
+ 300: {
+ HEX: COLOR_BASE_BLUE_300_HEX,
+ CODE: COLOR_BASE_BLUE_300_CODE,
+ CLASSNAME: COLOR_BASE_BLUE_300_CLASSNAME,
+ },
+ 400: {
+ HEX: COLOR_BASE_BLUE_400_HEX,
+ CODE: COLOR_BASE_BLUE_400_CODE,
+ CLASSNAME: COLOR_BASE_BLUE_400_CLASSNAME,
+ },
+ 500: {
+ HEX: COLOR_BASE_BLUE_500_HEX,
+ CODE: COLOR_BASE_BLUE_500_CODE,
+ CLASSNAME: COLOR_BASE_BLUE_500_CLASSNAME,
+ },
+ 600: {
+ HEX: COLOR_BASE_BLUE_600_HEX,
+ CODE: COLOR_BASE_BLUE_600_CODE,
+ CLASSNAME: COLOR_BASE_BLUE_600_CLASSNAME,
+ },
+ 700: {
+ HEX: COLOR_BASE_BLUE_700_HEX,
+ CODE: COLOR_BASE_BLUE_700_CODE,
+ CLASSNAME: COLOR_BASE_BLUE_700_CLASSNAME,
+ },
+ 800: {
+ HEX: COLOR_BASE_BLUE_800_HEX,
+ CODE: COLOR_BASE_BLUE_800_CODE,
+ CLASSNAME: COLOR_BASE_BLUE_800_CLASSNAME,
+ },
+ 900: {
+ HEX: COLOR_BASE_BLUE_900_HEX,
+ CODE: COLOR_BASE_BLUE_900_CODE,
+ CLASSNAME: COLOR_BASE_BLUE_900_CLASSNAME,
+ },
+ 950: {
+ HEX: COLOR_BASE_BLUE_950_HEX,
+ 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: {
- 5: {
- HEX: COLOR_BASE_GREEN_5_HEX,
- CODE: COLOR_BASE_GREEN_5_CODE,
- CLASSNAME: COLOR_BASE_GREEN_5_CLASSNAME,
- },
- 10: {
- HEX: COLOR_BASE_GREEN_10_HEX,
- CODE: COLOR_BASE_GREEN_10_CODE,
- CLASSNAME: COLOR_BASE_GREEN_10_CLASSNAME,
- },
- 15: {
- HEX: COLOR_BASE_GREEN_15_HEX,
- CODE: COLOR_BASE_GREEN_15_CODE,
- CLASSNAME: COLOR_BASE_GREEN_15_CLASSNAME,
- },
- 20: {
- HEX: COLOR_BASE_GREEN_20_HEX,
- CODE: COLOR_BASE_GREEN_20_CODE,
- CLASSNAME: COLOR_BASE_GREEN_20_CLASSNAME,
- },
- 30: {
- HEX: COLOR_BASE_GREEN_30_HEX,
- CODE: COLOR_BASE_GREEN_30_CODE,
- CLASSNAME: COLOR_BASE_GREEN_30_CLASSNAME,
- },
- 40: {
- HEX: COLOR_BASE_GREEN_40_HEX,
- CODE: COLOR_BASE_GREEN_40_CODE,
- CLASSNAME: COLOR_BASE_GREEN_40_CLASSNAME,
- },
- 50: {
- HEX: COLOR_BASE_GREEN_50_HEX,
- CODE: COLOR_BASE_GREEN_50_CODE,
- CLASSNAME: COLOR_BASE_GREEN_50_CLASSNAME,
- },
- 60: {
- HEX: COLOR_BASE_GREEN_60_HEX,
- CODE: COLOR_BASE_GREEN_60_CODE,
- CLASSNAME: COLOR_BASE_GREEN_60_CLASSNAME,
- },
- 70: {
- HEX: COLOR_BASE_GREEN_70_HEX,
- CODE: COLOR_BASE_GREEN_70_CODE,
- CLASSNAME: COLOR_BASE_GREEN_70_CLASSNAME,
- },
- 80: {
- HEX: COLOR_BASE_GREEN_80_HEX,
- CODE: COLOR_BASE_GREEN_80_CODE,
- CLASSNAME: COLOR_BASE_GREEN_80_CLASSNAME,
- },
- 90: {
- HEX: COLOR_BASE_GREEN_90_HEX,
- CODE: COLOR_BASE_GREEN_90_CODE,
- CLASSNAME: COLOR_BASE_GREEN_90_CLASSNAME,
- },
- 95: {
- HEX: COLOR_BASE_GREEN_95_HEX,
- CODE: COLOR_BASE_GREEN_95_CODE,
- CLASSNAME: COLOR_BASE_GREEN_95_CLASSNAME,
+ 100: {
+ HEX: COLOR_BASE_GREEN_100_HEX,
+ CODE: COLOR_BASE_GREEN_100_CODE,
+ CLASSNAME: COLOR_BASE_GREEN_100_CLASSNAME,
+ },
+ 150: {
+ HEX: COLOR_BASE_GREEN_150_HEX,
+ CODE: COLOR_BASE_GREEN_150_CODE,
+ CLASSNAME: COLOR_BASE_GREEN_150_CLASSNAME,
+ },
+ 200: {
+ HEX: COLOR_BASE_GREEN_200_HEX,
+ CODE: COLOR_BASE_GREEN_200_CODE,
+ CLASSNAME: COLOR_BASE_GREEN_200_CLASSNAME,
+ },
+ 300: {
+ HEX: COLOR_BASE_GREEN_300_HEX,
+ CODE: COLOR_BASE_GREEN_300_CODE,
+ CLASSNAME: COLOR_BASE_GREEN_300_CLASSNAME,
+ },
+ 400: {
+ HEX: COLOR_BASE_GREEN_400_HEX,
+ CODE: COLOR_BASE_GREEN_400_CODE,
+ CLASSNAME: COLOR_BASE_GREEN_400_CLASSNAME,
+ },
+ 500: {
+ HEX: COLOR_BASE_GREEN_500_HEX,
+ CODE: COLOR_BASE_GREEN_500_CODE,
+ CLASSNAME: COLOR_BASE_GREEN_500_CLASSNAME,
+ },
+ 600: {
+ HEX: COLOR_BASE_GREEN_600_HEX,
+ CODE: COLOR_BASE_GREEN_600_CODE,
+ CLASSNAME: COLOR_BASE_GREEN_600_CLASSNAME,
+ },
+ 700: {
+ HEX: COLOR_BASE_GREEN_700_HEX,
+ CODE: COLOR_BASE_GREEN_700_CODE,
+ CLASSNAME: COLOR_BASE_GREEN_700_CLASSNAME,
+ },
+ 800: {
+ HEX: COLOR_BASE_GREEN_800_HEX,
+ CODE: COLOR_BASE_GREEN_800_CODE,
+ CLASSNAME: COLOR_BASE_GREEN_800_CLASSNAME,
+ },
+ 900: {
+ HEX: COLOR_BASE_GREEN_900_HEX,
+ CODE: COLOR_BASE_GREEN_900_CODE,
+ CLASSNAME: COLOR_BASE_GREEN_900_CLASSNAME,
+ },
+ 950: {
+ HEX: COLOR_BASE_GREEN_950_HEX,
+ 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: {
- 5: {
- HEX: COLOR_BASE_MERCURY_5_HEX,
- CODE: COLOR_BASE_MERCURY_5_CODE,
- CLASSNAME: COLOR_BASE_MERCURY_5_CLASSNAME,
- },
- 10: {
- HEX: COLOR_BASE_MERCURY_10_HEX,
- CODE: COLOR_BASE_MERCURY_10_CODE,
- CLASSNAME: COLOR_BASE_MERCURY_10_CLASSNAME,
- },
- 15: {
- HEX: COLOR_BASE_MERCURY_15_HEX,
- CODE: COLOR_BASE_MERCURY_15_CODE,
- CLASSNAME: COLOR_BASE_MERCURY_15_CLASSNAME,
- },
- 20: {
- HEX: COLOR_BASE_MERCURY_20_HEX,
- CODE: COLOR_BASE_MERCURY_20_CODE,
- CLASSNAME: COLOR_BASE_MERCURY_20_CLASSNAME,
- },
- 30: {
- HEX: COLOR_BASE_MERCURY_30_HEX,
- CODE: COLOR_BASE_MERCURY_30_CODE,
- CLASSNAME: COLOR_BASE_MERCURY_30_CLASSNAME,
- },
- 40: {
- HEX: COLOR_BASE_MERCURY_40_HEX,
- CODE: COLOR_BASE_MERCURY_40_CODE,
- CLASSNAME: COLOR_BASE_MERCURY_40_CLASSNAME,
- },
- 50: {
- HEX: COLOR_BASE_MERCURY_50_HEX,
- CODE: COLOR_BASE_MERCURY_50_CODE,
- CLASSNAME: COLOR_BASE_MERCURY_50_CLASSNAME,
- },
- 60: {
- HEX: COLOR_BASE_MERCURY_60_HEX,
- CODE: COLOR_BASE_MERCURY_60_CODE,
- CLASSNAME: COLOR_BASE_MERCURY_60_CLASSNAME,
- },
- 70: {
- HEX: COLOR_BASE_MERCURY_70_HEX,
- CODE: COLOR_BASE_MERCURY_70_CODE,
- CLASSNAME: COLOR_BASE_MERCURY_70_CLASSNAME,
- },
- 80: {
- HEX: COLOR_BASE_MERCURY_80_HEX,
- CODE: COLOR_BASE_MERCURY_80_CODE,
- CLASSNAME: COLOR_BASE_MERCURY_80_CLASSNAME,
- },
- 90: {
- HEX: COLOR_BASE_MERCURY_90_HEX,
- CODE: COLOR_BASE_MERCURY_90_CODE,
- CLASSNAME: COLOR_BASE_MERCURY_90_CLASSNAME,
- },
- 95: {
- HEX: COLOR_BASE_MERCURY_95_HEX,
- CODE: COLOR_BASE_MERCURY_95_CODE,
- CLASSNAME: COLOR_BASE_MERCURY_95_CLASSNAME,
+ 100: {
+ HEX: COLOR_BASE_MERCURY_100_HEX,
+ CODE: COLOR_BASE_MERCURY_100_CODE,
+ CLASSNAME: COLOR_BASE_MERCURY_100_CLASSNAME,
+ },
+ 150: {
+ HEX: COLOR_BASE_MERCURY_150_HEX,
+ CODE: COLOR_BASE_MERCURY_150_CODE,
+ CLASSNAME: COLOR_BASE_MERCURY_150_CLASSNAME,
+ },
+ 200: {
+ HEX: COLOR_BASE_MERCURY_200_HEX,
+ CODE: COLOR_BASE_MERCURY_200_CODE,
+ CLASSNAME: COLOR_BASE_MERCURY_200_CLASSNAME,
+ },
+ 300: {
+ HEX: COLOR_BASE_MERCURY_300_HEX,
+ CODE: COLOR_BASE_MERCURY_300_CODE,
+ CLASSNAME: COLOR_BASE_MERCURY_300_CLASSNAME,
+ },
+ 400: {
+ HEX: COLOR_BASE_MERCURY_400_HEX,
+ CODE: COLOR_BASE_MERCURY_400_CODE,
+ CLASSNAME: COLOR_BASE_MERCURY_400_CLASSNAME,
+ },
+ 500: {
+ HEX: COLOR_BASE_MERCURY_500_HEX,
+ CODE: COLOR_BASE_MERCURY_500_CODE,
+ CLASSNAME: COLOR_BASE_MERCURY_500_CLASSNAME,
+ },
+ 600: {
+ HEX: COLOR_BASE_MERCURY_600_HEX,
+ CODE: COLOR_BASE_MERCURY_600_CODE,
+ CLASSNAME: COLOR_BASE_MERCURY_600_CLASSNAME,
+ },
+ 700: {
+ HEX: COLOR_BASE_MERCURY_700_HEX,
+ CODE: COLOR_BASE_MERCURY_700_CODE,
+ CLASSNAME: COLOR_BASE_MERCURY_700_CLASSNAME,
+ },
+ 800: {
+ HEX: COLOR_BASE_MERCURY_800_HEX,
+ CODE: COLOR_BASE_MERCURY_800_CODE,
+ CLASSNAME: COLOR_BASE_MERCURY_800_CLASSNAME,
+ },
+ 900: {
+ HEX: COLOR_BASE_MERCURY_900_HEX,
+ CODE: COLOR_BASE_MERCURY_900_CODE,
+ CLASSNAME: COLOR_BASE_MERCURY_900_CLASSNAME,
+ },
+ 950: {
+ HEX: COLOR_BASE_MERCURY_950_HEX,
+ 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: {
@@ -667,71 +607,16 @@ 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,
@@ -752,73 +637,48 @@ 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,
+ },
+ '050': {
+ HEX: COLOR_BASE_YELLOW_050_HEX,
+ CODE: COLOR_BASE_YELLOW_050_CODE,
+ CLASSNAME: COLOR_BASE_YELLOW_050_CLASSNAME,
+ },
},
RED: {
- 5: {
- HEX: COLOR_BASE_RED_5_HEX,
- CODE: COLOR_BASE_RED_5_CODE,
- CLASSNAME: COLOR_BASE_RED_5_CLASSNAME,
- },
- 10: {
- HEX: COLOR_BASE_RED_10_HEX,
- CODE: COLOR_BASE_RED_10_CODE,
- CLASSNAME: COLOR_BASE_RED_10_CLASSNAME,
- },
- 15: {
- HEX: COLOR_BASE_RED_15_HEX,
- CODE: COLOR_BASE_RED_15_CODE,
- CLASSNAME: COLOR_BASE_RED_15_CLASSNAME,
- },
- 20: {
- HEX: COLOR_BASE_RED_20_HEX,
- CODE: COLOR_BASE_RED_20_CODE,
- CLASSNAME: COLOR_BASE_RED_20_CLASSNAME,
- },
- 30: {
- HEX: COLOR_BASE_RED_30_HEX,
- CODE: COLOR_BASE_RED_30_CODE,
- CLASSNAME: COLOR_BASE_RED_30_CLASSNAME,
- },
- 40: {
- HEX: COLOR_BASE_RED_40_HEX,
- CODE: COLOR_BASE_RED_40_CODE,
- CLASSNAME: COLOR_BASE_RED_40_CLASSNAME,
- },
- 50: {
- HEX: COLOR_BASE_RED_50_HEX,
- CODE: COLOR_BASE_RED_50_CODE,
- CLASSNAME: COLOR_BASE_RED_50_CLASSNAME,
- },
- 60: {
- HEX: COLOR_BASE_RED_60_HEX,
- CODE: COLOR_BASE_RED_60_CODE,
- CLASSNAME: COLOR_BASE_RED_60_CLASSNAME,
- },
- 70: {
- HEX: COLOR_BASE_RED_70_HEX,
- CODE: COLOR_BASE_RED_70_CODE,
- CLASSNAME: COLOR_BASE_RED_70_CLASSNAME,
- },
- 80: {
- HEX: COLOR_BASE_RED_80_HEX,
- CODE: COLOR_BASE_RED_80_CODE,
- CLASSNAME: COLOR_BASE_RED_80_CLASSNAME,
- },
- 90: {
- HEX: COLOR_BASE_RED_90_HEX,
- CODE: COLOR_BASE_RED_90_CODE,
- CLASSNAME: COLOR_BASE_RED_90_CLASSNAME,
- },
- 95: {
- HEX: COLOR_BASE_RED_95_HEX,
- 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,
},
+ 150: {
+ HEX: COLOR_BASE_RED_150_HEX,
+ CODE: COLOR_BASE_RED_150_CODE,
+ CLASSNAME: COLOR_BASE_RED_150_CLASSNAME,
+ },
200: {
HEX: COLOR_BASE_RED_200_HEX,
CODE: COLOR_BASE_RED_200_CODE,
@@ -839,6 +699,36 @@ export const COLOR = {
CODE: COLOR_BASE_RED_500_CODE,
CLASSNAME: COLOR_BASE_RED_500_CLASSNAME,
},
+ 600: {
+ HEX: COLOR_BASE_RED_600_HEX,
+ CODE: COLOR_BASE_RED_600_CODE,
+ CLASSNAME: COLOR_BASE_RED_600_CLASSNAME,
+ },
+ 700: {
+ HEX: COLOR_BASE_RED_700_HEX,
+ CODE: COLOR_BASE_RED_700_CODE,
+ CLASSNAME: COLOR_BASE_RED_700_CLASSNAME,
+ },
+ 800: {
+ HEX: COLOR_BASE_RED_800_HEX,
+ CODE: COLOR_BASE_RED_800_CODE,
+ CLASSNAME: COLOR_BASE_RED_800_CLASSNAME,
+ },
+ 900: {
+ HEX: COLOR_BASE_RED_900_HEX,
+ CODE: COLOR_BASE_RED_900_CODE,
+ CLASSNAME: COLOR_BASE_RED_900_CLASSNAME,
+ },
+ 950: {
+ HEX: COLOR_BASE_RED_950_HEX,
+ 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: {
@@ -868,71 +758,16 @@ 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,
@@ -953,6 +788,36 @@ 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,
+ },
+ '050': {
+ HEX: COLOR_BASE_PURPLE_050_HEX,
+ CODE: COLOR_BASE_PURPLE_050_CODE,
+ CLASSNAME: COLOR_BASE_PURPLE_050_CLASSNAME,
+ },
},
CHARCOAL: {
100: {
@@ -982,71 +847,16 @@ 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,
@@ -1067,6 +877,36 @@ 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,
+ },
+ '050': {
+ HEX: COLOR_BASE_GREY_050_HEX,
+ CODE: COLOR_BASE_GREY_050_CODE,
+ CLASSNAME: COLOR_BASE_GREY_050_CLASSNAME,
+ },
},
WHITE: {
100: {
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/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 04e1dadf4a..bf918421b3 100644
--- a/style-dictionary/tokens/color/base.json
+++ b/style-dictionary/tokens/color/base.json
@@ -2,645 +2,545 @@
"color": {
"base": {
"blue": {
- "5": {
+ "050": {
"hex": { "value": "#fafcff" },
- "code": { "value": "blue-5" },
- "classname": { "value": "t-sage--color-blue-5" }
+ "code": { "value": "blue-050" },
+ "classname": { "value": "t-sage--color-blue-050" }
},
- "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": {
- "5": {
+ "050": {
"hex": { "value": "#fbfefc" },
- "code": { "value": "green-5" },
- "classname": { "value": "t-sage--color-green-5" }
+ "code": { "value": "green-050" },
+ "classname": { "value": "t-sage--color-green-050" }
},
- "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": {
- "5": {
+ "050": {
"hex": { "value": "#fffcfa" },
- "code": { "value": "mercury-5" },
- "classname": { "value": "t-sage--color-mercury-5" }
+ "code": { "value": "mercury-050" },
+ "classname": { "value": "t-sage--color-mercury-050" }
},
- "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": {
"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" }
}
},
"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" }
}
},
"yellow": {
- "5": {
+ "050": {
"hex": { "value": "#fffefa" },
- "code": { "value": "yellow-5" },
- "classname": { "value": "t-sage--color-yellow-5" }
+ "code": { "value": "yellow-050" },
+ "classname": { "value": "t-sage--color-yellow-050" }
},
- "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": {
- "5": {
+ "050": {
"hex": { "value": "#fffafa" },
- "code": { "value": "red-5" },
- "classname": { "value": "t-sage--color-red-5" }
+ "code": { "value": "red-050" },
+ "classname": { "value": "t-sage--color-red-050" }
},
- "10": {
+ "100": {
"hex": { "value": "#fef2f2" },
- "code": { "value": "red-10" },
- "classname": { "value": "t-sage--color-red-10" }
+ "code": { "value": "red-100" },
+ "classname": { "value": "t-sage--color-red-100" }
},
- "15": {
+ "150": {
"hex": { "value": "#fee2e1" },
- "code": { "value": "red-15" },
- "classname": { "value": "t-sage--color-red-15" }
+ "code": { "value": "red-150" },
+ "classname": { "value": "t-sage--color-red-150" }
},
- "20": {
+ "200": {
"hex": { "value": "#fecaca" },
- "code": { "value": "red-20" },
- "classname": { "value": "t-sage--color-red-20" }
+ "code": { "value": "red-200" },
+ "classname": { "value": "t-sage--color-red-200" }
},
- "30": {
+ "300": {
"hex": { "value": "#fda5a5" },
- "code": { "value": "red-30" },
- "classname": { "value": "t-sage--color-red-30" }
+ "code": { "value": "red-300" },
+ "classname": { "value": "t-sage--color-red-300" }
},
- "40": {
+ "400": {
"hex": { "value": "#f87171" },
- "code": { "value": "red-40" },
- "classname": { "value": "t-sage--color-red-40" }
+ "code": { "value": "red-400" },
+ "classname": { "value": "t-sage--color-red-400" }
},
- "50": {
+ "500": {
"hex": { "value": "#ef4444" },
- "code": { "value": "red-50" },
- "classname": { "value": "t-sage--color-red-50" }
+ "code": { "value": "red-500" },
+ "classname": { "value": "t-sage--color-red-500" }
},
- "60": {
+ "600": {
"hex": { "value": "#dc2625" },
- "code": { "value": "red-60" },
- "classname": { "value": "t-sage--color-red-60" }
+ "code": { "value": "red-600" },
+ "classname": { "value": "t-sage--color-red-600" }
},
- "70": {
+ "700": {
"hex": { "value": "#b91c1b" },
- "code": { "value": "red-70" },
- "classname": { "value": "t-sage--color-red-70" }
+ "code": { "value": "red-700" },
+ "classname": { "value": "t-sage--color-red-700" }
},
- "80": {
+ "800": {
"hex": { "value": "#991b1b" },
- "code": { "value": "red-80" },
- "classname": { "value": "t-sage--color-red-80" }
+ "code": { "value": "red-800" },
+ "classname": { "value": "t-sage--color-red-800" }
},
- "90": {
+ "900": {
"hex": { "value": "#7f1c1d" },
- "code": { "value": "red-90" },
- "classname": { "value": "t-sage--color-red-90" }
+ "code": { "value": "red-900" },
+ "classname": { "value": "t-sage--color-red-900" }
},
- "95": {
+ "950": {
"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" }
+ "code": { "value": "red-950" },
+ "classname": { "value": "t-sage--color-red-950" }
}
},
"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" }
}
},
"purple": {
- "5": {
+ "050": {
"hex": { "value": "#fafbff" },
- "code": { "value": "purple-5" },
- "classname": { "value": "t-sage--color-purple-5" }
+ "code": { "value": "purple-050" },
+ "classname": { "value": "t-sage--color-purple-050" }
},
- "10": {
+ "100": {
"hex": { "value": "#edf1ff" },
- "code": { "value": "purple-10" },
- "classname": { "value": "t-sage--color-purple-10" }
+ "code": { "value": "purple-100" },
+ "classname": { "value": "t-sage--color-purple-100" }
},
- "15": {
+ "150": {
"hex": { "value": "#e0e4ff" },
- "code": { "value": "purple-15" },
- "classname": { "value": "t-sage--color-purple-15" }
+ "code": { "value": "purple-150" },
+ "classname": { "value": "t-sage--color-purple-150" }
},
- "20": {
+ "200": {
"hex": { "value": "#c7cdfe" },
- "code": { "value": "purple-20" },
- "classname": { "value": "t-sage--color-purple-20" }
+ "code": { "value": "purple-200" },
+ "classname": { "value": "t-sage--color-purple-200" }
},
- "30": {
+ "300": {
"hex": { "value": "#a3acfd" },
- "code": { "value": "purple-30" },
- "classname": { "value": "t-sage--color-purple-30" }
+ "code": { "value": "purple-300" },
+ "classname": { "value": "t-sage--color-purple-300" }
},
- "40": {
+ "400": {
"hex": { "value": "#8081f9" },
- "code": { "value": "purple-40" },
- "classname": { "value": "t-sage--color-purple-40" }
+ "code": { "value": "purple-400" },
+ "classname": { "value": "t-sage--color-purple-400" }
},
- "50": {
+ "500": {
"hex": { "value": "#6a62f2" },
- "code": { "value": "purple-50" },
- "classname": { "value": "t-sage--color-purple-50" }
+ "code": { "value": "purple-500" },
+ "classname": { "value": "t-sage--color-purple-500" }
},
- "60": {
+ "600": {
"hex": { "value": "#533be5" },
- "code": { "value": "purple-60" },
- "classname": { "value": "t-sage--color-purple-60" }
+ "code": { "value": "purple-600" },
+ "classname": { "value": "t-sage--color-purple-600" }
},
- "70": {
+ "700": {
"hex": { "value": "#4f37cb" },
- "code": { "value": "purple-70" },
- "classname": { "value": "t-sage--color-purple-70" }
+ "code": { "value": "purple-700" },
+ "classname": { "value": "t-sage--color-purple-700" }
},
- "80": {
+ "800": {
"hex": { "value": "#402fa4" },
- "code": { "value": "purple-80" },
- "classname": { "value": "t-sage--color-purple-80" }
+ "code": { "value": "purple-800" },
+ "classname": { "value": "t-sage--color-purple-800" }
},
- "90": {
+ "900": {
"hex": { "value": "#372d82" },
- "code": { "value": "purple-90" },
- "classname": { "value": "t-sage--color-purple-90" }
+ "code": { "value": "purple-900" },
+ "classname": { "value": "t-sage--color-purple-900" }
},
- "95": {
+ "950": {
"hex": { "value": "#221b4b" },
- "code": { "value": "purple-95" },
- "classname": { "value": "t-sage--color-purple-95" }
- },
- "100": {
- "hex": { "value": "{color.base.purple.15.hex.value}" },
- "code": { "value": "purple-100" },
- "classname": { "value": "t-sage--color-purple-100" }
- },
- "200": {
- "hex": { "value": "{color.base.purple.30.hex.value}" },
- "code": { "value": "purple-200" },
- "classname": { "value": "t-sage--color-purple-200" }
- },
- "300": {
- "hex": { "value": "{color.base.purple.60.hex.value}" },
- "code": { "value": "purple-300" },
- "classname": { "value": "t-sage--color-purple-300" }
- },
- "400": {
- "hex": { "value": "{color.base.purple.80.hex.value}" },
- "code": { "value": "purple-400" },
- "classname": { "value": "t-sage--color-purple-400" }
- },
- "500": {
- "hex": { "value": "{color.base.purple.95.hex.value}" },
- "code": { "value": "purple-500" },
- "classname": { "value": "t-sage--color-purple-500" }
+ "code": { "value": "purple-950" },
+ "classname": { "value": "t-sage--color-purple-950" }
}
},
"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": {
+ "050": {
"hex": { "value": "#fcfcfc" },
- "code": { "value": "grey-5" },
- "classname": { "value": "t-sage--color-grey-5" }
+ "code": { "value": "grey-050" },
+ "classname": { "value": "t-sage--color-grey-050" }
},
- "10": {
+ "100": {
"hex": { "value": "#f8f8f8" },
- "code": { "value": "grey-10" },
- "classname": { "value": "t-sage--color-grey-10" }
+ "code": { "value": "grey-100" },
+ "classname": { "value": "t-sage--color-grey-100" }
},
- "15": {
+ "150": {
"hex": { "value": "#f0f0f0" },
"code": { "value": "grey-15" },
- "classname": { "value": "t-sage--color-grey-15" }
+ "classname": { "value": "t-sage--color-grey-150" }
},
- "20": {
+ "200": {
"hex": { "value": "#e4e4e4" },
- "code": { "value": "grey-20" },
- "classname": { "value": "t-sage--color-grey-20" }
+ "code": { "value": "grey-200" },
+ "classname": { "value": "t-sage--color-grey-200" }
},
- "30": {
+ "300": {
"hex": { "value": "#d2d1d1" },
- "code": { "value": "grey-30" },
- "classname": { "value": "t-sage--color-grey-30" }
+ "code": { "value": "grey-300" },
+ "classname": { "value": "t-sage--color-grey-300" }
},
- "40": {
+ "400": {
"hex": { "value": "#bbbab9" },
- "code": { "value": "grey-40" },
- "classname": { "value": "t-sage--color-grey-40" }
+ "code": { "value": "grey-400" },
+ "classname": { "value": "t-sage--color-grey-400" }
},
- "50": {
+ "500": {
"hex": { "value": "#9b9a98" },
- "code": { "value": "grey-50" },
- "classname": { "value": "t-sage--color-grey-50" }
+ "code": { "value": "grey-500" },
+ "classname": { "value": "t-sage--color-grey-500" }
},
- "60": {
+ "600": {
"hex": { "value": "#828180" },
- "code": { "value": "grey-60" },
- "classname": { "value": "t-sage--color-grey-60" }
+ "code": { "value": "grey-600" },
+ "classname": { "value": "t-sage--color-grey-600" }
},
- "70": {
+ "700": {
"hex": { "value": "#6c6a69" },
- "code": { "value": "grey-70" },
- "classname": { "value": "t-sage--color-grey-70" }
+ "code": { "value": "grey-700" },
+ "classname": { "value": "t-sage--color-grey-700" }
},
- "80": {
+ "800": {
"hex": { "value": "#4d4d4c" },
- "code": { "value": "grey-80" },
- "classname": { "value": "t-sage--color-grey-80" }
+ "code": { "value": "grey-800" },
+ "classname": { "value": "t-sage--color-grey-800" }
},
- "90": {
+ "900": {
"hex": { "value": "#343332" },
- "code": { "value": "grey-90" },
- "classname": { "value": "t-sage--color-grey-90" }
+ "code": { "value": "grey-900" },
+ "classname": { "value": "t-sage--color-grey-900" }
},
- "95": {
+ "950": {
"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": {
- "hex": { "value": "#f0f0f0" },
- "code": { "value": "grey-200" },
- "classname": { "value": "t-sage--color-grey-200" }
- },
- "300": {
- "hex": { "value": "#e4e4e4" },
- "code": { "value": "grey-300" },
- "classname": { "value": "t-sage--color-grey-300" }
- },
- "400": {
- "hex": { "value": "#d2d1d1" },
- "code": { "value": "grey-400" },
- "classname": { "value": "t-sage--color-grey-400" }
- },
- "500": {
- "hex": { "value": "#9b9a98" },
- "code": { "value": "grey-500" },
- "classname": { "value": "t-sage--color-grey-500" }
+ "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 751ccbf373..95aa028e6d 100644
--- a/style-dictionary/tokens/color/combos.json
+++ b/style-dictionary/tokens/color/combos.json
@@ -4,38 +4,38 @@
"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.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}"
+ "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": {
"foreground": {
- "value": "{color.base.grey.200.hex}"
+ "value": "{color.base.grey.150.hex}"
},
"background": {
- "value": "{color.base.charcoal.400.hex}"
+ "value": "{color.base.grey.900.hex}"
}
}
},
@@ -118,68 +118,68 @@
"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}"
}
}
},
"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,45 +187,45 @@
"value": "{color.base.white.300.hex}"
},
"background": {
- "value": "{color.base.yellow.300.hex}"
+ "value": "{color.base.yellow.400.hex}"
}
}
},
"danger": {
"default": {
"foreground": {
- "value": "{color.base.red.400.hex}"
+ "value": "{color.base.red.800.hex}"
},
"foreground-accent": {
- "value": "{color.base.red.500.hex}"
+ "value": "{color.base.red.950.hex}"
},
"background": {
- "value": "{color.base.red.100.hex}"
+ "value": "{color.base.red.150.hex}"
},
"background-accent": {
- "value": "{color.base.red.200.hex}"
+ "value": "{color.base.red.300.hex}"
},
"icon-background-accent": {
- "value": "{color.base.red.300.hex}"
+ "value": "{color.base.red.500.hex}"
}
},
"subtle": {
"foreground": {
- "value": "{color.base.red.400.hex}"
+ "value": "{color.base.red.800.hex}"
},
"foreground-accent": {
- "value": "{color.base.red.200.hex}"
+ "value": "{color.base.red.300.hex}"
},
"background": {
- "value": "{color.base.red.200.hex}"
+ "value": "{color.base.red.300.hex}"
}
},
"bold": {
"foreground": {
- "value": "{color.base.red.100.hex}"
+ "value": "{color.base.red.150.hex}"
},
"background": {
- "value": "{color.base.red.200.hex}"
+ "value": "{color.base.red.300.hex}"
}
}
},
diff --git a/style-dictionary/tokens/color/core.json b/style-dictionary/tokens/color/core.json
index 96e442ee28..c50693319f 100644
--- a/style-dictionary/tokens/color/core.json
+++ b/style-dictionary/tokens/color/core.json
@@ -2,13 +2,13 @@
"color": {
"core": {
"blue": {
- "value": "{color.base.blue.60.hex}"
+ "value": "{color.base.blue.600.hex}"
},
"green": {
- "value": "{color.base.green.60.hex}"
+ "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,22 +17,22 @@
"value": "{color.base.sage.300.hex}"
},
"yellow": {
- "value": "{color.base.yellow.300.hex}"
+ "value": "{color.base.yellow.400.hex}"
},
"red": {
- "value": "{color.base.red.300.hex}"
+ "value": "{color.base.red.500.hex}"
},
"orange": {
"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}"
+ "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}"