<%= image_tag component.image, alt: "Cover for #{component.title}" %>
diff --git a/lerna.json b/lerna.json
index 61bb73671f..5bdfc79df0 100644
--- a/lerna.json
+++ b/lerna.json
@@ -11,7 +11,7 @@
"conventionalCommits": true,
"message": "chore(release): publish [skip ci]",
"registry": "https://npm.pkg.github.com",
- "allowBranch": ["main", "develop"]
+ "allowBranch": ["main", "develop", "mercury-rising"]
}
}
}
diff --git a/packages/sage-assets/lib/stylesheets/components/_alert.scss b/packages/sage-assets/lib/stylesheets/components/_alert.scss
index 94f5f30ffe..f22894dc2d 100644
--- a/packages/sage-assets/lib/stylesheets/components/_alert.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_alert.scss
@@ -9,27 +9,40 @@
// `_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, 500),
+ danger: sage-color(red, 500),
+);
+
+$-alert-border-colors: (
+ 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),
);
@@ -41,6 +54,7 @@ $-alert-icon-colors: (
gap: sage-spacing(sm);
padding: sage-spacing();
margin-bottom: sage-spacing();
+ border: 1px solid sage-color(grey, 300);
border-radius: sage-border(radius-large);
.sage-frame > &,
@@ -72,6 +86,12 @@ $-alert-icon-colors: (
}
}
+@each $name, $value in $-alert-border-colors {
+ .sage-alert--#{$name} {
+ border-color: $value;
+ }
+}
+
.sage-alert--small {
grid-template-columns: auto 1fr auto;
grid-template-areas: "icon copy actions";
@@ -99,7 +119,7 @@ $-alert-icon-colors: (
.sage-alert__title {
@extend %t-sage-heading-5;
- color: sage-color(charcoal, 500);
+ color: sage-color(grey, 950);
}
.sage-alert__title--add-on {
@@ -117,7 +137,7 @@ $-alert-icon-colors: (
}
.sage-alert--small & {
- transform: translateY(-2px);
+ transform: translateY(0);
}
}
@@ -144,16 +164,16 @@ $-alert-icon-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 {
- @include sage-focus-outline--update-color(sage-color(primary, 200));
+ &:focus-visible {
+ @include sage-focus-outline--update-color(sage-color(purple, 300));
}
}
@@ -171,16 +191,16 @@ $-alert-icon-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 {
- @include sage-focus-outline--update-color(sage-color(primary, 200));
+ &:focus-visible {
+ @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 80f26bc86d..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(primary, 200));
+ @include sage-focus-outline--update-color(sage-color(purple, 300));
position: static;
padding-right: rem(24px);
@@ -126,7 +126,6 @@ $-badge-statuses: (
align-items: center;
position: absolute;
right: rem(8px);
- min-height: rem(22px);
margin-top: rem(1px);
border-radius: 0 $-badge-border-radius $-badge-border-radius 0;
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 c43606f2f3..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(primary, 200);
+$-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(primary, 200);
&: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(primary, 200);
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;
@@ -89,10 +89,10 @@ $-breadcrumb-outline-color: sage-color(primary, 200);
background: transparent;
border-radius: rem(6px);
@include sage-focus-outline(
- $outline-width: 4px,
- $outline-offset-block: -4,
- $outline-offset-inline: -6,
- $outline-border-radius: rem(6px)
+ $outline-width: 2px,
+ $outline-offset-block: -2,
+ $outline-offset-inline: -3,
+ $outline-border-radius: rem(3px)
);
@include sage-focus-outline--update-color($-breadcrumb-outline-color);
diff --git a/packages/sage-assets/lib/stylesheets/components/_button.scss b/packages/sage-assets/lib/stylesheets/components/_button.scss
index 320a7f3bc2..f31cb406d7 100644
--- a/packages/sage-assets/lib/stylesheets/components/_button.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_button.scss
@@ -13,7 +13,7 @@ $-btn-transition: map-get($sage-transitions, default);
$-btn-base-padding-block: sage-spacing(xs); // vertical (y) axis
$-btn-base-padding-inline: sage-spacing(sm); // horizontal (x) axis
$-btn-base-line-height: var(--sage-line-height-body, #{rem(24px)});
-$-btn-border-radius: sage-border(radius);
+$-btn-border-radius: 9999px;
$-btn-shadow-base: sage-shadow(sm);
$-btn-icon-only-standard-size: rem(40px);
$-btn-icon-only-subtle-size: rem(16px);
@@ -26,24 +26,24 @@ $-btn-base-styles: (
accent: (
default: (
color: sage-color(white),
- background-color: sage-color(primary, 300),
- border-color: sage-color(primary, 300),
- ring-color: sage-color(primary, 200),
+ 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(primary, 400),
- border-color: sage-color(primary, 400),
+ background-color: sage-color(purple, 600),
+ border-color: sage-color(purple, 600),
),
focus: (
color: sage-color(white),
- background-color: sage-color(primary, 300),
- border-color: sage-color(primary, 300),
+ background-color: sage-color(purple, 500),
+ border-color: sage-color(purple, 500),
),
disabled: (
- color: sage-color(primary, 200),
- background-color: sage-color(primary, 100),
- border-color: sage-color(primary, 100),
+ 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(primary, 200),
+ 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(primary, 200),
+ 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(primary, 200),
+ 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(primary, 200),
+ 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(primary, 200),
+ 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),
);
//
@@ -169,7 +169,7 @@ $-btn-loading-min-height: rem(36px);
// stylelint-disable max-nesting-depth
.sage-btn {
- @extend %t-sage-body-semi;
+ @extend %t-sage-body-med;
@include sage-button-style-reset();
@include sage-focus-ring;
@@ -179,6 +179,7 @@ $-btn-loading-min-height: rem(36px);
align-items: center;
justify-self: flex-start;
padding: $-btn-base-padding-block $-btn-base-padding-inline;
+ font-family: $-heading-font;
text-align: left; // Prevents text alignment issue when inner text is truncated
border-width: 1px;
border-style: solid;
@@ -262,15 +263,6 @@ $-btn-loading-min-height: rem(36px);
}
}
- .sage-accordion &.sage-expandable-card__trigger {
- &:focus {
- box-shadow: inherit;
- }
- &:focus-visible {
- @include sage-focus-ring;
- }
- }
-
.sage-input-group & {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
@@ -325,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);
@@ -354,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;
}
@@ -422,7 +414,7 @@ $-btn-loading-min-height: rem(36px);
.sage-upload-card & {
&.sage-btn--subtle:focus {
- @include sage-focus-outline--update-color(sage-color(primary, 300));
+ @include sage-focus-outline--update-color(sage-color(purple, 300));
}
}
@@ -480,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);
@@ -532,7 +524,7 @@ a.sage-btn {
}
}
@else if ($-style-type-name == focus) {
- &:focus,
+ &:focus-visible,
&:active {
color: map-get($-style-type-configs, color);
background-color: map-get($-style-type-configs, background-color);
@@ -570,10 +562,10 @@ a.sage-btn {
box-shadow: map-get($sage-toolbar-button-borders, hover);
}
- .sage-toolbar > &:focus,
- .sage-toolbar > .sage-dropdown .sage-dropdown__trigger &:focus,
- .sage-toolbar__group > &:focus,
- .sage-toolbar__group > .sage-dropdown .sage-dropdown__trigger &:focus {
+ .sage-toolbar > &:focus-visible,
+ .sage-toolbar > .sage-dropdown .sage-dropdown__trigger &:focus-visible,
+ .sage-toolbar__group > &:focus-visible,
+ .sage-toolbar__group > .sage-dropdown .sage-dropdown__trigger &:focus-visible {
z-index: sage-z-index(default, 2);
box-shadow: map-get($sage-toolbar-button-borders, focus);
}
@@ -588,35 +580,39 @@ a.sage-btn {
.sage-toolbar__group > .sage-search ~ &:not(.sage-btn--subtle):not(:disabled):not([aria-disabled="true"]):hover {
box-shadow: map-get($sage-toolbar-button-borders, hover-large);
}
- .sage-toolbar__group > .sage-input ~ &:not(.sage-btn--subtle):not(:disabled):not([aria-disabled="true"]):focus,
- .sage-toolbar__group > .sage-search ~ &:not(.sage-btn--subtle):not(:disabled):not([aria-disabled="true"]):focus {
+ .sage-toolbar__group > .sage-input ~ &:not(.sage-btn--subtle):not(:disabled):not([aria-disabled="true"]):focus-visible,
+ .sage-toolbar__group > .sage-search ~ &:not(.sage-btn--subtle):not(:disabled):not([aria-disabled="true"]):focus-visible {
box-shadow: map-get($sage-toolbar-button-borders, focus);
}
}
// 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,
+ &:focus {
+ outline: none;
+ }
+
+ &: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);
}
}
@@ -756,14 +752,14 @@ 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 {
color: sage-color(white);
}
- &:focus {
+ &:focus-visible {
color: sage-color(white);
}
}
@@ -773,7 +769,7 @@ a.sage-btn {
&.sage-banner__close.sage-btn--primary {
color: inherit;
- &:focus,
+ &:focus-visible,
&:active {
color: inherit;
@@ -864,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 498f851b9a..60ffb9bd64 100644
--- a/packages/sage-assets/lib/stylesheets/components/_card.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_card.scss
@@ -13,13 +13,20 @@ $-sage-card-background: transparent;
position: relative;
width: 100%;
+ background-color: sage-color(white);
+ box-shadow: sage-shadow(100);
+
+ .sage-card,
+ .sage-panel & {
+ box-shadow: none;
+ }
}
.sage-card--border-dashed {
border-color: sage-color(white);
@include sage-dashed-border(
$border-radius: sage-border(radius),
- $color: sage-color(grey, 400),
+ $color: sage-color(grey, 300),
);
}
@@ -52,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);
}
}
@@ -96,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 71969d650d..ec73c612ca 100644
--- a/packages/sage-assets/lib/stylesheets/components/_card_highlight.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_card_highlight.scss
@@ -54,7 +54,18 @@ $-card-highlight-size: rem(12px);
@each $-color-name, $-color-sliders in $sage-colors {
.sage-card-highlight--#{"" + $-color-name} {
- --color: #{sage-color($-color-name, 300)};
+ @if ($-color-name == blue) {
+ --color: #{sage-color($-color-name, 600)};
+ }
+ @else if ($-color-name == green) {
+ --color: #{sage-color($-color-name, 600)};
+ }
+ @else if ($-color-name == mercury) {
+ --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 8b916c24d6..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);
@@ -32,8 +32,8 @@ $-checkbox-marker-offset: $-checkbox-marker-border * 2;
// Focus state
//
$-checkbox-focus-outline-size: rem(3px);
-$-checkbox-focus-outline-width: 4;
-$-checkbox-focus-outline-color: sage-color(primary, 200);
+$-checkbox-focus-outline-width: 2;
+$-checkbox-focus-outline-color: sage-color(purple, 300);
.sage-checkbox {
@@ -80,7 +80,7 @@ $-checkbox-focus-outline-color: sage-color(primary, 200);
&:hover {
z-index: sage-z-index(default, 1);
- border-color: sage-color(charcoal, 100);
+ border-color: sage-color(grey, 600);
}
&:focus-within {
@@ -213,7 +213,7 @@ $-checkbox-focus-outline-color: sage-color(primary, 200);
background-color: sage-color(grey, 100);
}
- &:focus:not(:disabled),
+ &:focus-visible:not(:disabled),
&:active:not(:disabled) {
outline: none;
border-color: $-checkbox-focus-outline-color;
@@ -264,7 +264,7 @@ $-checkbox-focus-outline-color: sage-color(primary, 200);
background-color: $-checkbox-color-error;
}
- &:focus:not(:disabled),
+ &:focus-visible:not(:disabled),
&:active:not(:disabled) {
border-color: $-checkbox-color-error;
}
@@ -280,12 +280,12 @@ $-checkbox-focus-outline-color: sage-color(primary, 200);
}
&::before {
- border-color: sage-color(red, 200);
+ border-color: sage-color(red, 300);
}
}
.sage-checkbox & {
- margin-top: rem(4px);
+ margin-top: rem(2px);
}
&.sage-checkbox, // spcificity that should apply only to `--standalone` variation
@@ -301,7 +301,7 @@ $-checkbox-focus-outline-color: sage-color(primary, 200);
.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 641fb40e4e..9c59d682e0 100644
--- a/packages/sage-assets/lib/stylesheets/components/_choice.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_choice.scss
@@ -41,8 +41,10 @@ $-choice-radio-color-checked-inner: map-get($sage-radio-colors, checked-inner);
padding: sage-spacing();
text-decoration: none;
color: $-choice-color-default;
+ background-color: sage-color(white);
border: sage-border();
border-radius: sage-border(radius-large);
+ box-shadow: sage-shadow(100);
transition: map-get($sage-transitions, default);
transition-property: color, background-color, border-color, box-shadow;
@@ -63,8 +65,8 @@ $-choice-radio-color-checked-inner: map-get($sage-radio-colors, checked-inner);
color: $-choice-color-active;
}
- &:focus {
- border-color: sage-color(primary, 200);
+ &:focus-visible {
+ border-color: sage-color(purple, 300);
outline: none;
}
@@ -72,19 +74,20 @@ $-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);
}
+
}
&[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 {
@@ -92,6 +95,11 @@ $-choice-radio-color-checked-inner: map-get($sage-radio-colors, checked-inner);
}
}
+ .sage-card & ,
+ .sage-panel & {
+ box-shadow: none;
+ }
+
.sage-tabs--layout-default &:not(:last-child) {
@media (max-width: sage-breakpoint(sm-max)) {
margin-bottom: sage-spacing(sm);
@@ -114,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);
}
@@ -134,10 +142,6 @@ $-choice-radio-color-checked-inner: map-get($sage-radio-colors, checked-inner);
transition: color map-get($sage-transitions, default);
}
- pds-icon {
- margin-top: var(--icon-top-offset);
- }
-
&.sage-choice--vertical-align-icon-start::#{$-choice-el-icon} {
align-self: start;
margin-top: var(--icon-top-offset);
@@ -229,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 45f46ea0e1..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(primary, 200);
+$-copy-text-border: 1px solid sage-color(grey, 300);
+$-copy-text-border-focus-color: sage-color(purple, 300);
$-copy-text-border-hover-color: sage-color(grey, 500);
-$-copy-text-color: sage-color(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 fcc0eade96..cca3841570 100644
--- a/packages/sage-assets/lib/stylesheets/components/_dot.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_dot.scss
@@ -42,6 +42,17 @@ $-sage-dot-size--badge: rem(6px);
@each $-color-name, $-color-sliders in $sage-colors {
.sage-dot--color-#{"" + $-color-name} {
- --sage-dot-color: #{sage-color($-color-name)};
+ @if ($-color-name == blue) {
+ --sage-dot-color: #{sage-color($-color-name, 600)};
+ }
+ @else if ($-color-name == green) {
+ --sage-dot-color: #{sage-color($-color-name, 600)};
+ }
+ @else if ($-color-name == mercury) {
+ --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 aa9b7dffc2..c31161dc81 100644
--- a/packages/sage-assets/lib/stylesheets/components/_dropdown.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_dropdown.scss
@@ -48,7 +48,7 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs);
background-color: sage-color(white);
}
- &:focus,
+ &:focus-visible,
&:focus-within {
z-index: sage-z-index(default, 2);
box-shadow: map-get($sage-toolbar-button-borders, focus);
@@ -123,34 +123,35 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs);
@extend %t-sage-body;
&:active,
+ &:focus-visible,
&:focus-within {
outline: none;
- @include sage-focus-outline--update-color(sage-color(primary, 200));
+ @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(primary, 200));
+ @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;
@@ -161,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(primary, 200));
+ @include sage-focus-outline--update-color(sage-color(purple, 300));
@extend %t-sage-body-med;
@@ -187,12 +188,12 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs);
&:hover {
- background-color: sage-color(grey, 300);
+ background-color: sage-color(grey, 150);
}
&:focus-within {
@include sage-focus-outline($outline-offset-inline: 4px, $outline-offset-block: -2px);
- @include sage-focus-outline--update-color(sage-color(primary, 200));
+ @include sage-focus-outline--update-color(sage-color(purple, 300));
&::after {
opacity: 1;
@@ -239,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);
}
}
@@ -273,7 +274,7 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs);
max-height: $-dropdown-panel-max-height;
padding: sage-spacing(xs) 0;
border-radius: sage-border(radius-medium);
-
+
// adds a box shadow to the menu when it is scrollable
overflow-scrolling: touch;
background:
@@ -282,27 +283,27 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs);
white 30%,
rgba(255, 255, 255, 0)
) center top,
-
+
/* Shadow Cover BOTTOM */
linear-gradient(
- rgba(255, 255, 255, 0),
+ rgba(255, 255, 255, 0),
white 70%
) center bottom,
-
+
/* Shadow TOP */
radial-gradient(
farthest-side at 50% 0,
rgba(0, 0, 0, 0.2),
rgba(0, 0, 0, 0)
) center top,
-
+
/* Shadow BOTTOM */
radial-gradient(
farthest-side at 50% 100%,
rgba(0, 0, 0, 0.2),
rgba(0, 0, 0, 0)
) center bottom;
-
+
background-repeat: no-repeat;
background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
background-attachment: local, local, scroll, scroll;
@@ -322,7 +323,7 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs);
.sage-dropdown--page-size & {
min-width: 100%;
}
-
+
@media (max-height: $-dropdown-panel-max-height-breakpoint) {
max-height: $-dropdown-panel-max-height-small;
}
@@ -413,6 +414,7 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs);
}
.sage-dropdown__trigger {
+ display: flex;
width: 100%;
border-radius: inherit;
@@ -428,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 effb269696..583dd707f4 100644
--- a/packages/sage-assets/lib/stylesheets/components/_empty_state.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_empty_state.scss
@@ -4,28 +4,23 @@
/// @group sage
////
-$-empty-state-graphic-feature-width: 100%;
-$-empty-state-graphic-feature-height: rem(142px);
-$-empty-state-graphic-page-width: 100%;
-$-empty-state-graphic-page-height: rem(336px);
-$-empty-state-page-max-width: rem(1064px);
+$-empty-state-graphic-default-width: 100%;
+$-empty-state-graphic-default-height: rem(104px);
+$-empty-state-graphic-compact-width: 100%;
+$-empty-state-graphic-compact-height: rem(56px);
+$-empty-state-icon-background-color: var(--color-background-icon);
+$-empty-state-icon-size: rem(104px);
+$-empty-state-icon-compact-size: rem(56px);
.sage-empty-state {
- margin-left: auto;
- margin-right: auto;
-
- &:not(.sage-empty-state--page) {
- @include sage-grid-panel();
-
- max-width: sage-container(md);
- text-align: center;
- justify-items: center;
- }
-
- &:not(.sage-empty-state--compact):not(.sage-empty-state--page) {
- gap: sage-spacing();
- padding: sage-spacing(2xl) sage-spacing();
- }
+ @include sage-grid-panel();
+
+ gap: sage-spacing(sm);
+ margin-inline-start: auto;
+ margin-inline-end: auto;
+ max-width: sage-container(md);
+ text-align: center;
+ justify-items: center;
}
.sage-empty-state--center {
@@ -34,48 +29,12 @@ $-empty-state-page-max-width: rem(1064px);
top: 50%;
transform: translate(-50%, -50%);
padding: sage-spacing();
-
- @media screen and (min-width: sage-breakpoint(lg-max)) {
- padding: 0;
- }
-}
-
-.sage-empty-state--compact {
- padding: sage-spacing(xs) sage-spacing();
-}
-
-.sage-empty-state--page {
- display: flex;
- align-items: center;
- justify-content: center;
- gap: sage-spacing();
- width: 100%;
- padding: sage-spacing(lg);
-
- @media screen and (max-width: sage-breakpoint(lg-max)) {
- flex-direction: column;
- }
-
- @media screen and (min-width: sage-breakpoint(xl-min)) {
- flex-direction: row;
- max-width: $-empty-state-page-max-width;
- }
}
.sage-empty-state__actions,
.sage-empty-state__custom-content,
.sage-empty-state__video {
- margin-top: sage-spacing();
-}
-
-.sage-empty-state__content {
- .sage-empty-state--page & {
- max-width: $-empty-state-graphic-page-width;
-
- @media screen and (min-width: sage-breakpoint(xl-min)) {
- order: 1;
- }
- }
+ margin-block-start: sage-spacing();
}
.sage-empty-state__graphic {
@@ -83,8 +42,8 @@ $-empty-state-page-max-width: rem(1064px);
align-items: center;
justify-content: center;
overflow: hidden;
- width: $-empty-state-graphic-feature-width;
- height: $-empty-state-graphic-feature-height;
+ inline-size: $-empty-state-graphic-default-width;
+ block-size: $-empty-state-graphic-default-height;
> img {
display: block;
@@ -93,39 +52,47 @@ $-empty-state-page-max-width: rem(1064px);
border-radius: sage-border(radius);
}
- .sage-empty-state--page & {
- max-width: $-empty-state-graphic-page-width;
- height: $-empty-state-graphic-page-height;
+ .sage-empty-state--compact & {
+ block-size: $-empty-state-graphic-compact-height;
+ inline-size: $-empty-state-graphic-compact-width;
+ }
+}
+
+.sage-empty-state__icon-container {
+ display: flex;
+ padding: sage-spacing(lg);
+ background-color: $-empty-state-icon-background-color;
+ border-radius: sage-border(radius-round);
- @media screen and (min-width: sage-breakpoint(xl-min)) {
- order: 2;
- }
+ .sage-empty-state--compact & {
+ padding: sage-spacing(sm);
}
}
.sage-empty-state__icon {
display: inline-flex;
- color: sage-color(charcoal, 100);
+ inline-size: $-empty-state-icon-size;
+ block-size: $-empty-state-icon-size;
}
.sage-empty-state__title {
- @extend %t-sage-heading-4;
+ @extend %t-sage-heading-3;
- color: sage-color(charcoal, 500);
+ color: sage-color(grey, 900);
word-wrap: break-word;
- .sage-empty-state--page & {
- @extend %t-sage-heading-1;
- }
-
&:not(:only-child) {
- margin-bottom: sage-spacing(sm);
+ margin-block-end: sage-spacing(sm);
}
}
.sage-empty-state__text {
@extend %t-sage-body;
- color: sage-color(charcoal, 300);
word-wrap: break-word;
}
+
+.sage-empty-state__text,
+.sage-empty-state__custom-content {
+ 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 7dd2e193ea..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(primary, 200));
+ @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..19b858033b 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;
@@ -21,7 +21,7 @@ $-hint-background-color: sage-color(grey, 300);
}
.sage-hint__content {
- @extend %t-sage-body-small;
+ @extend %t-sage-body;
color: $-hint-text-color;
word-break: break-word;
}
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_card.scss b/packages/sage-assets/lib/stylesheets/components/_icon_card.scss
index 04ede8922a..ece871d7fd 100644
--- a/packages/sage-assets/lib/stylesheets/components/_icon_card.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_icon_card.scss
@@ -29,6 +29,7 @@
--background-color: #{sage-color-combo($-color, default, background)};
}
}
+
.sage-icon-card--round {
border-radius: sage-border(radius-round);
}
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 71735e36cb..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:(
@@ -17,19 +17,19 @@ $-link-base-styles: (
hover: (
color: sage-color(primary, 400),
),
- focus: (
+ focus-visible: (
color: sage-color(primary, 300),
),
),
secondary:(
default: (
- color: sage-color(charcoal, 400),
+ color: sage-color(grey, 900),
),
hover: (
color: sage-color(black),
),
- focus: (
- color: sage-color(charcoal, 400),
+ focus-visible: (
+ color: sage-color(grey, 900),
),
),
neutral:(
@@ -39,20 +39,20 @@ $-link-base-styles: (
hover: (
color: sage-color(grey, 100),
),
- focus: (
+ focus-visible: (
color: sage-color(white),
),
),
danger:(
default: (
- color: sage-color(red, 300),
+ color: sage-color(red, 500),
),
hover: (
- color: sage-color(red, 400),
+ color: sage-color(red, 800),
),
- focus: (
- color: sage-color(red, 300),
- focus-outline: sage-color(red, 200),
+ focus-visible: (
+ color: sage-color(red, 500),
+ focus-outline: sage-color(red, 300),
),
)
);
@@ -74,10 +74,10 @@ $-link-base-styles: (
cursor: pointer;
}
- &:focus {
+ &:focus-visible {
color: sage-color(primary, 300);
- @include sage-focus-outline--update-color(sage-color(primary, 200));
+ @include sage-focus-outline--update-color(sage-color(purple, 300));
}
.sage-card--interactive & {
@@ -99,8 +99,8 @@ $-link-base-styles: (
box-shadow: sage-border-interactive(hover);
}
- &:focus::before {
- box-shadow: sage-border-interactive(focus);
+ &:focus-visible::before {
+ box-shadow: sage-border-interactive(focus-visible);
}
&:active::before {
@@ -111,11 +111,11 @@ $-link-base-styles: (
box-shadow: sage-border-interactive(error);
}
- &:focus:invalid::before {
+ &:focus-visible:invalid::before {
box-shadow: sage-border-interactive(error-focus);
}
- &:focus::after {
+ &:focus-visible::after {
border: 0;
}
@@ -137,9 +137,9 @@ $-link-base-styles: (
}
/* stylelint-enable max-nesting-depth */
}
- @else if ($-style-type-name == focus) {
+ @else if ($-style-type-name == focus-visible) {
/* stylelint-disable max-nesting-depth */
- &:focus,
+ &:focus-visible,
&:active {
color: map-get($-style-type-configs, color);
@@ -173,21 +173,21 @@ $-link-base-styles: (
pds-icon {
@include sage-icon-base(question-circle, lg, pine);
- color: sage-color(charcoal, 100);
+ color: sage-color(grey, 600);
}
&:hover,
&:active,
- &:focus {
+ &:focus-visible {
color: inherit;
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(primary, 200));
+ @include sage-focus-outline--update-color(sage-color(purple, 300));
}
.sage-link--remove-underline {
@@ -239,7 +239,7 @@ $-link-base-styles: (
text-decoration: underline;
}
- &:focus {
+ &:focus-visible {
color: $-link-subtext-color-hover;
text-decoration: none;
}
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 014e30b0ca..bf2994d3a0 100644
--- a/packages/sage-assets/lib/stylesheets/components/_loader.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_loader.scss
@@ -10,8 +10,7 @@ $-loader-bar-speed: 1.2s;
$-loader-bar-speed-delay: 0.5s;
$-loader-bar-width: rem(300px);
$-loader-spinner-size: rem(48px);
-$-loader-spinner-speed: 2s;
-$-loader-spinner-path-speed: 1.5s;
+$-loader-spinner-speed: 1.5s;
$-loader-typing-size: rem(6px);
$-loader-lower-opacity: 0.4;
@@ -84,7 +83,7 @@ $-loader-lower-opacity: 0.4;
.sage-loader__spinner {
width: sage-spacing(xl);
height: sage-spacing(xl);
- animation: rotate $-loader-spinner-speed linear infinite;
+ animation: loader-rotate $-loader-spinner-speed linear infinite;
}
.sage-loader__spinner--loading-button {
@@ -94,11 +93,20 @@ $-loader-lower-opacity: 0.4;
}
.sage-loader__spinner-path {
- stroke-dasharray: 150, 200;
- stroke-dashoffset: -10;
+ stroke-width: 8px;
+}
+
+.sage-loader__spinner-secondHalf {
+ stroke: url("#sage-loader__spinner-secondHalf");
+}
+
+.sage-loader__spinner-firstHalf {
+ stroke: url("#sage-loader__spinner-firstHalf");
+}
+
+.sage-loader__spinner-highlight {
+ stroke: currentColor;
stroke-linecap: round;
- stroke: sage-color(primary, 300);
- animation: dash $-loader-spinner-path-speed ease-in-out infinite;
}
.sage-loader__spinner-path--loading-button {
@@ -146,24 +154,12 @@ $-loader-lower-opacity: 0.4;
}
}
-@keyframes rotate {
- 100% {
- transform: rotate(360deg);
- }
-}
-
-@keyframes dash {
+@keyframes loader-rotate {
0% {
- stroke-dasharray: 1, 200;
- stroke-dashoffset: 0;
- }
- 50% {
- stroke-dasharray: 89, 200;
- stroke-dashoffset: -35;
+ transform: rotate(0deg);
}
100% {
- stroke-dasharray: 89, 200;
- stroke-dashoffset: -124;
+ transform: rotate(360deg);
}
}
@@ -175,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 f4b3e9947b..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;
@@ -77,12 +77,12 @@ $-media-tile-breakpoints: (
color: inherit;
}
- &:focus {
+ &:focus-visible {
outline: 0;
&::after {
- border-width: sage-spacing(2xs);
- border-color: sage-color(primary, 200);
+ border-width: rem(2px);
+ 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 5ecab8ca10..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);
@@ -31,12 +31,12 @@ $-nav-subitem-border-width: rem(2px);
.sage-nav__link,
.sage-nav__link--active {
@include sage-focus-outline(
- $outline-width: 4px,
- $outline-offset-inline: -2,
- $outline-offset-block: -4,
+ $outline-width: 2px,
+ $outline-offset-inline: 0,
+ $outline-offset-block: -1,
$outline-border-radius: sage-border(radius-medium),
);
- @include sage-focus-outline--update-color(sage-color(primary, 200));
+ @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(primary, 200));
+ @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(primary, 200));
+ @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 45ef8ab244..2042aa956c 100644
--- a/packages/sage-assets/lib/stylesheets/components/_page_heading.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_page_heading.scss
@@ -76,7 +76,7 @@ $-page-heading-image-height-mobile: rem(120px);
.sage-page-heading__intro {
grid-area: intro;
margin-top: rem(12px);
- color: sage-color(charcoal, 300);
+ color: sage-color(grey, 800);
}
.sage-page-heading__image {
@@ -146,7 +146,7 @@ $-page-heading-image-height-mobile: rem(120px);
justify-content: flex-end;
align-items: center;
margin-top: sage-spacing(sm);
- color: sage-color(charcoal, 200);
+ color: sage-color(grey, 700);
font-style: italic;
@media (max-width: sage-breakpoint()) {
justify-content: flex-start;
diff --git a/packages/sage-assets/lib/stylesheets/components/_pagination.scss b/packages/sage-assets/lib/stylesheets/components/_pagination.scss
index 8fe75575de..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(primary, 200);
+$-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 {
@@ -84,7 +84,6 @@ $-pagination-focus-ring-color: sage-color(primary, 200);
text-decoration: none;
color: $-pagination-text-color;
border: 0;
- background-color: sage-color(white);
border-radius: $-pagination-radius;
&:hover,
diff --git a/packages/sage-assets/lib/stylesheets/components/_panel.scss b/packages/sage-assets/lib/stylesheets/components/_panel.scss
index 31d92f60f4..4bfee719b2 100644
--- a/packages/sage-assets/lib/stylesheets/components/_panel.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_panel.scss
@@ -7,6 +7,11 @@
.sage-panel {
@include sage-panel;
@include sage-grid-panel;
+
+ .sage-card &,
+ .sage-panel {
+ box-shadow: none;
+ }
}
.sage-panel-grid {
@@ -40,7 +45,7 @@
top: 50%;
width: 100%;
height: 1px;
- background: sage-color(grey, 300);
+ background: sage-color(grey, 200);
}
&::after {
@@ -48,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);
}
@@ -92,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);
@@ -101,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..3558775b94 100644
--- a/packages/sage-assets/lib/stylesheets/components/_popover.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_popover.scss
@@ -51,7 +51,7 @@ $-popover-tooltip-inactive: $-popover-tooltip-width solid transparent;
padding: $-popover-panel-padding;
background-color: sage-color(white);
background-clip: padding-box;
- box-shadow: sage-shadow(lg);
+ box-shadow: sage-shadow(md);
border-radius: sage-border(radius-large);
&::after {
@@ -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..80b54a6600 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;
@@ -44,7 +44,7 @@ $-progress-bar-height: sage-spacing(xs);
.sage-progress-bar__value {
transform-origin: center left;
height: 100%;
- background-color: var(--progress-bar-value-color, sage-color(sage, 300));
+ background-color: var(--progress-bar-value-color, sage-color(mercury, 500));
border-radius: sage-border(radius-small);
.sage-modal__header & {
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 6f41a66e8c..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(primary, 200);
-$-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;
@@ -26,7 +26,7 @@ $-radio-selected-indicator-size: rem(6px);
// Focus state
$-radio-focus-outline-size: rem(3px);
-$-radio-focus-outline-width: 4;
+$-radio-focus-outline-width: 2;
$-radio-focus-outline-color: currentColor;
// stylelint-disable max-nesting-depth
@@ -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 {
@@ -176,7 +176,7 @@ $-radio-focus-outline-color: currentColor;
}
}
- &:focus:not(:disabled),
+ &:focus-visible:not(:disabled),
&:active:not(:disabled) {
outline: none;
diff --git a/packages/sage-assets/lib/stylesheets/components/_search.scss b/packages/sage-assets/lib/stylesheets/components/_search.scss
index e32f1146dd..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;
}
@@ -197,10 +197,13 @@ $-search-icon: "::before";
box-shadow: map-get($sage-toolbar-button-borders, hover);
}
- &:focus,
&:active {
box-shadow: map-get($sage-toolbar-button-borders, active-hover);
}
+
+ &:focus {
+ box-shadow: map-get($sage-toolbar-button-borders, focus);
+ }
}
.sage-search--contained &:focus,
diff --git a/packages/sage-assets/lib/stylesheets/components/_sortable.scss b/packages/sage-assets/lib/stylesheets/components/_sortable.scss
index 403425c532..5455b17340 100644
--- a/packages/sage-assets/lib/stylesheets/components/_sortable.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_sortable.scss
@@ -15,7 +15,7 @@ $-sortable-image-height: rem(48px);
.sage-sortable__item {
display: grid;
- grid-template-columns: min-content minmax(0, 1fr) auto auto;
+ grid-template-columns: min-content min-content minmax(0, 1fr) auto auto;
gap: sage-spacing(card);
align-items: center;
padding: sage-spacing(xs) sage-spacing(panel);
@@ -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 9b32dfc981..ce7ca6961f 100644
--- a/packages/sage-assets/lib/stylesheets/components/_stat_box.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_stat_box.scss
@@ -11,6 +11,13 @@ $-stat-box-image-max-width: rem(48px);
@include sage-card($grid: false);
padding: rem(18px) sage-spacing(sm);
border-radius: sage-border(radius-large);
+ box-shadow: sage-shadow(100);
+ background-color: sage-color(white);
+
+ .sage-card &,
+ .sage-panel & {
+ box-shadow: none;
+ }
&.sage-stat-box--raised {
box-shadow: sage-shadow(sm);
@@ -72,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 {
@@ -94,7 +101,18 @@ $-stat-box-image-max-width: rem(48px);
@each $-color-name, $-color-sliders in $sage-colors {
.sage-stat-box__title--legend-#{"" + $-color-name} {
- --legend-color: #{sage-color($-color-name, 500)};
+ @if ($-color-name == blue) {
+ --legend-color: #{sage-color($-color-name, 600)};
+ }
+ @else if ($-color-name == green) {
+ --legend-color: #{sage-color($-color-name, 600)};
+ }
+ @else if ($-color-name == mercury) {
+ --legend-color: #{sage-color($-color-name, 500)};
+ }
+ @else {
+ --legend-color: #{sage-color($-color-name, 500)};
+ }
}
}
@@ -108,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 8e30d41782..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(primary, 200));
+ @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 96c9cf7afb..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);
@@ -42,6 +42,13 @@ $-switch-toggle-size: rem(16px);
padding: sage-spacing(card);
border: sage-border();
border-radius: sage-border(radius);
+ box-shadow: sage-shadow(100);
+ background-color: sage-color(white);
+
+ .sage-card &,
+ .sage-panel & {
+ box-shadow: none;
+ }
}
&.sage-switch--toggle-right {
@@ -107,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 3c1ebda1de..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,14 +38,16 @@ $-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);
}
}
&:focus {
- z-index: sage-z-index(default, 1);
outline: none;
- box-shadow: 0 0 0 4px sage-color(primary, 200);
+ }
+
+ &:focus-visible {
+ @include sage-focus-ring();
border-radius: sage-border(radius-small);
.sage-tabs--filter & {
@@ -62,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;
}
@@ -97,11 +99,11 @@ $-tab-color-disabled: map-get($sage-tab-colors, disabled);
opacity: 0;
}
- &:focus {
+ &:focus-visible {
border-radius: sage-border(radius-small);
}
- &:focus::after,
+ &:focus-visible::after,
&.sage-tab--active::after {
opacity: 1;
}
@@ -114,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);
}
@@ -126,7 +128,7 @@ $-tab-color-disabled: map-get($sage-tab-colors, disabled);
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
- &:focus {
+ &:focus-visible {
border-radius: sage-border(radius-small);
}
}
diff --git a/packages/sage-assets/lib/stylesheets/components/_table.scss b/packages/sage-assets/lib/stylesheets/components/_table.scss
index aa5ffff969..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,12 +16,12 @@ $-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-type-spec: "%t-sage-body-small-med";
-$-table-cell-type-spec-strong: "%t-sage-body-small-semi";
-$-table-heading-font-color: sage-color(charcoal, 500);
-$-table-heading-type-spec: "%t-sage-body-small-semi";
+$-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(grey, 950);
+$-table-heading-type-spec: "%t-sage-body-med";
// Overflow gradient
$-table-overflow-indicator-width: sage-spacing(sm);
@@ -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);
@@ -70,6 +70,7 @@ $-table-avatar-width: rem(32px);
th {
padding: $-table-padding-heading;
+ font-weight: sage-font-weight(semibold);
}
}
@@ -166,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 295eb8b1f7..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 {
@@ -63,7 +63,7 @@ $-tag-button-icon-mobile-size: rem(24px);
color: $-tag-button-color;
}
- &:focus {
+ &:focus-visible {
color: $-tag-button-color;
border-color: sage-color(primary, 200);
}
@@ -73,16 +73,16 @@ $-tag-button-icon-mobile-size: rem(24px);
height: $-tag-button-icon-mobile-size;
}
- &:not(:focus):hover {
+ &:not(:focus-visible):hover {
color: inherit;
background-color: transparent;
}
- &:not(:focus):hover::after {
+ &:not(:focus-visible):hover::after {
background-color: transparent;
}
}
.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 3b5b948b40..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(primary, 200));
+ @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 32e57cea5e..0dfdadc996 100644
--- a/packages/sage-assets/lib/stylesheets/components/_transaction_card.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_transaction_card.scss
@@ -11,8 +11,15 @@ $-transaction-card-price-max-width: rem(100px);
.sage-transaction-card {
@include sage-card;
+ .sage-card &,
+ .sage-panel & {
+ box-shadow: none;
+ }
+
position: relative;
width: 100%;
+ background-color: sage-color(white);
+ box-shadow: sage-shadow(100);
> * {
min-width: 0;
@@ -59,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 {
@@ -80,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 1991a3fd83..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(primary, 200));
+ @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/_fonts.scss b/packages/sage-assets/lib/stylesheets/core/_fonts.scss
index 0ff328f311..9aa3519d39 100644
--- a/packages/sage-assets/lib/stylesheets/core/_fonts.scss
+++ b/packages/sage-assets/lib/stylesheets/core/_fonts.scss
@@ -3,79 +3,455 @@
///
/// @group sage
////
-
-$-body-font-path: "#{$sage-font-cdn-root}/circular" !default; // pathname of font directory
-$-body-font-name: "CircularXXWeb";
$-body-font-version: 1;
+$sage-greet-font-path: "#{$sage-font-cdn-root}/greet" !default; // pathname of font directory
+$-greet-font-name: "greetstandard";
+
+$sage-inter-font-path: "#{$sage-font-cdn-root}/inter" !default; // pathname of font directory
+$-inter-font-name: "Inter";
+
+$sage-sprig-font-path: "#{$sage-font-cdn-root}/sprig" !default; // pathname of font directory
+$-sprig-font-name: "FAIRE-Sprig";
+
+// Sample Url
+// https://sage.kajabi-cdn.com/font/greet/greetstandard-bold.woff2?v=1
+// https://sage.kajabi-cdn.com/font/greet/greetstandard-bold.woff?v=1
+
+// Greet Standard
+
+// Light
+@font-face {
+ font-family: "GreetStandard";
+ font-style: normal;
+ font-weight: 300;
+ font-display: swap;
+ src: local("#{$-greet-font-name}-light"),
+ url("#{$sage-greet-font-path}/#{$-greet-font-name}-light.woff2?v=#{$-body-font-version}") format("woff2"),
+ url("#{$sage-greet-font-path}/#{$-greet-font-name}-light.woff?v=#{$-body-font-version}") format("woff");
+}
+
+// Light Italic
+@font-face {
+ font-family: "GreetStandard";
+ font-style: italic;
+ font-weight: 300;
+ font-display: swap;
+ src: local("#{$-greet-font-name}-lightitalic"),
+ url("#{$sage-greet-font-path}/#{$-greet-font-name}-lightitalic.woff2?v=#{$-body-font-version}") format("woff2"),
+ url("#{$sage-greet-font-path}/#{$-greet-font-name}-lightitalic.woff?v=#{$-body-font-version}") format("woff");
+}
+
// Regular
@font-face {
- font-family: "Circular";
+ font-family: "GreetStandard";
font-style: normal;
font-weight: 400;
font-display: swap;
- src: local("#{$-body-font-name}-Regular"), url("#{$-body-font-path}/#{$-body-font-name}-Regular.woff2?v=#{$-body-font-version}") format("woff2"), url("#{$-body-font-path}/#{$-body-font-name}-Regular.woff?v=#{$-body-font-version}") format("woff");
+ src: local("#{$-greet-font-name}-regular"),
+ url("#{$sage-greet-font-path}/#{$-greet-font-name}-regular.woff2?v=#{$-body-font-version}") format("woff2"),
+ url("#{$sage-greet-font-path}/#{$-greet-font-name}-regular.woff?v=#{$-body-font-version}") format("woff");
}
// Regular Italic
@font-face {
- font-family: "Circular";
+ font-family: "GreetStandard";
font-style: italic;
font-weight: 400;
font-display: swap;
- src: local("#{$-body-font-name}-Italic"), url("#{$-body-font-path}/#{$-body-font-name}-Italic.woff2?v=#{$-body-font-version}") format("woff2"), url("#{$-body-font-path}/#{$-body-font-name}-Italic.woff?v=#{$-body-font-version}") format("woff");
+ src: local("#{$-greet-font-name}-regularitalic"),
+ url("#{$sage-greet-font-path}/#{$-greet-font-name}-regularitalic.woff2?v=#{$-body-font-version}") format("woff2"),
+ url("#{$sage-greet-font-path}/#{$-greet-font-name}-regularitalic.woff?v=#{$-body-font-version}") format("woff");
}
// Medium
@font-face {
- font-family: "Circular";
+ font-family: "GreetStandard";
font-style: normal;
font-weight: 500;
font-display: swap;
- src: local("#{$-body-font-name}-Book"), url("#{$-body-font-path}/#{$-body-font-name}-Book.woff2?v=#{$-body-font-version}") format("woff2"), url("#{$-body-font-path}/#{$-body-font-name}-Book.woff?v=#{$-body-font-version}") format("woff");
+ src: local("#{$-greet-font-name}-medium"),
+ url("#{$sage-greet-font-path}/#{$-greet-font-name}-medium.woff2?v=#{$-body-font-version}") format("woff2"),
+ url("#{$sage-greet-font-path}/#{$-greet-font-name}-medium.woff?v=#{$-body-font-version}") format("woff");
}
// Medium Italic
@font-face {
- font-family: "Circular";
+ font-family: "GreetStandard";
font-style: italic;
font-weight: 500;
font-display: swap;
- src: local("#{$-body-font-name}-BookItalic"), url("#{$-body-font-path}/#{$-body-font-name}-BookItalic.woff2?v=#{$-body-font-version}") format("woff2"), url("#{$-body-font-path}/#{$-body-font-name}-BookItalic.woff?v=#{$-body-font-version}") format("woff");
+ src: local("#{$-greet-font-name}-mediumitalic"),
+ url("#{$sage-greet-font-path}/#{$-greet-font-name}-mediumitalic.woff2?v=#{$-body-font-version}") format("woff2"),
+ url("#{$sage-greet-font-path}/#{$-greet-font-name}-mediumitalic.woff?v=#{$-body-font-version}") format("woff");
+}
+
+// Semi-Bold
+@font-face {
+ font-family: "GreetStandard";
+ font-style: normal ;
+ font-weight: 600 ;
+ font-display: swap;
+ src: local("#{$-greet-font-name}-semibold"),
+ url("#{$sage-greet-font-path}/#{$-greet-font-name}-semibold.woff2?v=#{$-body-font-version}") format("woff2"),
+ url("#{$sage-greet-font-path}/#{$-greet-font-name}-semibold.woff?v=#{$-body-font-version}") format("woff");
+}
+
+// Semi-Bold Italic
+@font-face {
+ font-family: "GreetStandard";
+ font-style: italic ;
+ font-weight: 600 ;
+ font-display: swap;
+ src: local("#{$-greet-font-name}-semibolditalic"),
+ url("#{$sage-greet-font-path}/#{$-greet-font-name}-semibolditalic.woff2?v=#{$-body-font-version}") format("woff2"),
+ url("#{$sage-greet-font-path}/#{$-greet-font-name}-semibolditalic.woff?v=#{$-body-font-version}") format("woff");
+}
+
+// Bold
+@font-face {
+ font-family: "GreetStandard";
+ font-style: normal ;
+ font-weight: 700 ;
+ font-display: swap;
+ src: local("#{$-greet-font-name}-bold"),
+ url("#{$sage-greet-font-path}/#{$-greet-font-name}-bold.woff2?v=#{$-body-font-version}") format("woff2"),
+ url("#{$sage-greet-font-path}/#{$-greet-font-name}-bold.woff?v=#{$-body-font-version}") format("woff");
+}
+
+// Bold Italic
+@font-face {
+ font-family: "GreetStandard";
+ font-style: italic ;
+ font-weight: 700 ;
+ font-display: swap;
+ src: local("#{$-greet-font-name}-bolditalic"),
+ url("#{$sage-greet-font-path}/#{$-greet-font-name}-bolditalic.woff2?v=#{$-body-font-version}") format("woff2"),
+ url("#{$sage-greet-font-path}/#{$-greet-font-name}-bolditalic.woff?v=#{$-body-font-version}") format("woff");
+}
+
+// Heavy (Black)
+@font-face {
+ font-family: "GreetStandard";
+ font-style: "normal";
+ font-weight: 900;
+ font-display: swap;
+ src: local("#{$-greet-font-name}-heavy"),
+ url("#{$sage-greet-font-path}/#{$-greet-font-name}-heavy.woff2?v=#{$-body-font-version}") format("woff2"),
+ url("#{$sage-greet-font-path}/#{$-greet-font-name}-heavy.woff?v=#{$-body-font-version}") format("woff");
+}
+
+// Heavy (Black) Italic
+@font-face {
+ font-family: "GreetStandard";
+ font-style: italic;
+ font-weight: 900;
+ font-display: swap;
+ src: local("#{$-greet-font-name}-heavyitalic"),
+ url("#{$sage-greet-font-path}/#{$-greet-font-name}-heavyitalic.woff2?v=#{$-body-font-version}") format("woff2"),
+ url("#{$sage-greet-font-path}/#{$-greet-font-name}-heavyitalic.woff?v=#{$-body-font-version}") format("woff");
+}
+
+
+// Inter
+
+// Thin
+@font-face {
+ font-family: "Inter";
+ font-style: normal;
+ font-weight: 100;
+ font-display: swap;
+ src: local("#{$-inter-font-name}-Thin"),
+ url("#{$sage-inter-font-path}/#{$-inter-font-name}-Thin.woff2?v=#{$-body-font-version}") format("woff2");
}
-// Semibold
+// Thin Italic
@font-face {
- font-family: "Circular";
+ font-family: "Inter";
+ font-style: italic;
+ font-weight: 100;
+ font-display: swap;
+ src: local("#{$-inter-font-name}-ThinItalic"),
+ url("#{$sage-inter-font-path}/#{$-inter-font-name}-ThinItalic.woff2?v=#{$-body-font-version}") format("woff2");
+}
+
+// Extra Light
+@font-face {
+ font-family: "Inter";
+ font-style: normal;
+ font-weight: 200;
+ font-display: swap;
+ src: local("#{$-inter-font-name}-ExtraLight"),
+ url("#{$sage-inter-font-path}/#{$-inter-font-name}-ExtraLight.woff2?v=#{$-body-font-version}") format("woff2");
+}
+
+// Extra Light Italic
+@font-face {
+ font-family: "Inter";
+ font-style: italic;
+ font-weight: 200;
+ font-display: swap;
+ src: local("#{$-inter-font-name}-ExtraLightItalic"),
+ url("#{$sage-inter-font-path}/#{$-inter-font-name}-ExtraLightItalic.woff2?v=#{$-body-font-version}") format("woff2");
+}
+
+// Light
+@font-face {
+ font-family: "Inter";
+ font-style: normal;
+ font-weight: 300;
+ font-display: swap;
+ src: local("#{$-inter-font-name}-Light"),
+ url("#{$sage-inter-font-path}/#{$-inter-font-name}-Light.woff2?v=#{$-body-font-version}") format("woff2");
+}
+
+// Light Italic
+@font-face {
+ font-family: "Inter";
+ font-style: italic;
+ font-weight: 300;
+ font-display: swap;
+ src: local("#{$-inter-font-name}-LightItalic"),
+ url("#{$sage-inter-font-path}/#{$-inter-font-name}-LightItalic.woff2?v=#{$-body-font-version}") format("woff2");
+}
+
+// Regular
+@font-face {
+ font-family: "Inter";
+ font-style: normal;
+ font-weight: 400;
+ font-display: swap;
+ src: local("#{$-inter-font-name}-Regular"),
+ url("#{$sage-inter-font-path}/#{$-inter-font-name}-Regular.woff2?v=#{$-body-font-version}") format("woff2");
+}
+
+// Italic
+@font-face {
+ font-family: "Inter";
+ font-style: italic;
+ font-weight: 400;
+ font-display: swap;
+ src: local("#{$-inter-font-name}-Italic"),
+ url("#{$sage-inter-font-path}/#{$-inter-font-name}-Italic.woff2?v=#{$-body-font-version}") format("woff2");
+}
+
+// Medium
+@font-face {
+ font-family: "Inter";
+ font-style: normal;
+ font-weight: 500;
+ font-display: swap;
+ src: local("#{$-inter-font-name}-Medium"),
+ url("#{$sage-inter-font-path}/#{$-inter-font-name}-Medium.woff2?v=#{$-body-font-version}") format("woff2");
+}
+
+// Medium Italic
+@font-face {
+ font-family: "Inter";
+ font-style: italic;
+ font-weight: 500;
+ font-display: swap;
+ src: local("#{$-inter-font-name}-MediumItalic"),
+ url("#{$sage-inter-font-path}/#{$-inter-font-name}-MediumItalic.woff2?v=#{$-body-font-version}") format("woff2");
+}
+
+@font-face {
+ font-family: "Inter";
font-style: normal;
font-weight: 600;
font-display: swap;
- src: local("#{$-body-font-name}-Medium"), url("#{$-body-font-path}/#{$-body-font-name}-Medium.woff2?v=#{$-body-font-version}") format("woff2"), url("#{$-body-font-path}/#{$-body-font-name}-Medium.woff?v=#{$-body-font-version}") format("woff");
+ src: local("#{$-inter-font-name}-SemiBold"),
+ url("#{$sage-inter-font-path}/#{$-inter-font-name}-SemiBold.woff2?v=#{$-body-font-version}") format("woff2");
}
-// Semibold Italic
@font-face {
- font-family: "Circular";
+ font-family: "Inter";
font-style: italic;
font-weight: 600;
font-display: swap;
- src: local("#{$-body-font-name}-MediumItalic"), url("#{$-body-font-path}/#{$-body-font-name}-MediumItalic.woff2?v=#{$-body-font-version}") format("woff2"), url("#{$-body-font-path}/#{$-body-font-name}-MediumItalic.woff?v=#{$-body-font-version}") format("woff");
+ src: local("#{$-inter-font-name}-SemiBoldItalic"),
+ url("#{$sage-inter-font-path}/#{$-inter-font-name}-SemiBoldItalic.woff2?v=#{$-body-font-version}") format("woff2");
+}
+
+// Semi-Bold
+@font-face {
+ font-family: "Inter";
+ font-style: normal;
+ font-weight: 700;
+ font-display: swap;
+ src: local("#{$-inter-font-name}-Bold"),
+ url("#{$sage-inter-font-path}/#{$-inter-font-name}-Bold.woff2?v=#{$-body-font-version}") format("woff2");
+}
+
+// Bold Italic
+@font-face {
+ font-family: "Inter";
+ font-style: italic;
+ font-weight: 700;
+ font-display: swap;
+ src: local("#{$-inter-font-name}-BoldItalic"),
+ url("#{$sage-inter-font-path}/#{$-inter-font-name}-BoldItalic.woff2?v=#{$-body-font-version}") format("woff2");
+}
+
+// Extra Bold
+@font-face {
+ font-family: "Inter";
+ font-style: normal;
+ font-weight: 800;
+ font-display: swap;
+ src: local("#{$-inter-font-name}-ExtraBold"),
+ url("#{$sage-inter-font-path}/#{$-inter-font-name}-ExtraBold.woff2?v=#{$-body-font-version}") format("woff2");
+}
+
+// Extra Bold Italic
+@font-face {
+ font-family: "Inter";
+ font-style: italic;
+ font-weight: 800;
+ font-display: swap;
+ src: local("#{$-inter-font-name}-ExtraBoldItalic"),
+ url("#{$sage-inter-font-path}/#{$-inter-font-name}-ExtraBoldItalic.woff2?v=#{$-body-font-version}") format("woff2");
+}
+
+// Black
+@font-face {
+ font-family: "Inter";
+ font-style: normal;
+ font-weight: 900;
+ font-display: swap;
+ src: local("#{$-inter-font-name}-Black"),
+ url("#{$sage-inter-font-path}/#{$-inter-font-name}-Black.woff2?v=#{$-body-font-version}") format("woff2");
+}
+
+// Black Italic
+@font-face {
+ font-family: "Inter";
+ font-style: italic;
+ font-weight: 900;
+ font-display: swap;
+ src: local("#{$-inter-font-name}-BlackItalic"),
+ url("#{$sage-inter-font-path}/#{$-inter-font-name}-BlackItalic.woff2?v=#{$-body-font-version}") format("woff2");
+}
+
+
+// FAIRE Sprig
+
+// Thin
+@font-face {
+ font-family: "Sprig";
+ font-style: normal;
+ font-weight: 200;
+ font-display: swap;
+ src: local("#{$-sprig-font-name}-Thin"),
+ url("#{$sage-sprig-font-path}/#{$-sprig-font-name}-Thin.woff2?v=#{$-body-font-version}") format("woff2");
+}
+
+// Thin Italic
+@font-face {
+ font-family: "Sprig";
+ font-style: italic;
+ font-weight: 200;
+ font-display: swap;
+ src: local("#{$-sprig-font-name}-ThinItalic"),
+ url("#{$sage-sprig-font-path}/#{$-sprig-font-name}-ThinItalic.woff2?v=#{$-body-font-version}") format("woff2");
+}
+
+// Light
+@font-face {
+ font-family: "Sprig";
+ font-style: normal;
+ font-weight: 300;
+ font-display: swap;
+ src: local("#{$-sprig-font-name}-Light"),
+ url("#{$sage-sprig-font-path}/#{$-sprig-font-name}-Light.woff2?v=#{$-body-font-version}") format("woff2");
+}
+
+// Light Italic
+@font-face {
+ font-family: "Sprig";
+ font-style: italic;
+ font-weight: 300;
+ font-display: swap;
+ src: local("#{$-sprig-font-name}-LightItalic"),
+ url("#{$sage-sprig-font-path}/#{$-sprig-font-name}-LightItalic.woff2?v=#{$-body-font-version}") format("woff2");
+}
+
+// Regular
+@font-face {
+ font-family: "Sprig";
+ font-style: normal;
+ font-weight: 400;
+ font-display: swap;
+ src: local("#{$-sprig-font-name}-Regular"),
+ url("#{$sage-sprig-font-path}/#{$-sprig-font-name}-Regular.woff2?v=#{$-body-font-version}") format("woff2");
+}
+
+// Regular Italic
+@font-face {
+ font-family: "Sprig";
+ font-style: italic;
+ font-weight: 400;
+ font-display: swap;
+ src: local("#{$-sprig-font-name}-RegularItalic"),
+ url("#{$sage-sprig-font-path}/#{$-sprig-font-name}-RegularItalic.woff2?v=#{$-body-font-version}") format("woff2");
+}
+
+// Medium
+@font-face {
+ font-family: "Sprig";
+ font-style: normal;
+ font-weight: 500;
+ font-display: swap;
+ src: local("#{$-sprig-font-name}-Medium"),
+ url("#{$sage-sprig-font-path}/#{$-sprig-font-name}-Medium.woff2?v=#{$-body-font-version}") format("woff2");
+}
+
+// Medium Italic
+@font-face {
+ font-family: "Sprig";
+ font-style: italic;
+ font-weight: 500;
+ font-display: swap;
+ src: local("#{$-sprig-font-name}-MediumItalic"),
+ url("#{$sage-sprig-font-path}/#{$-sprig-font-name}-MediumItalic.woff2?v=#{$-body-font-version}") format("woff2");
}
// Bold
@font-face {
- font-family: "Circular";
+ font-family: "Sprig";
font-style: normal;
font-weight: 700;
font-display: swap;
- src: local("#{$-body-font-name}-Bold"), url("#{$-body-font-path}/#{$-body-font-name}-Bold.woff2?v=#{$-body-font-version}") format("woff2"), url("#{$-body-font-path}/#{$-body-font-name}-Bold.woff?v=#{$-body-font-version}") format("woff");
+ src: local("#{$-sprig-font-name}-Bold"),
+ url("#{$sage-sprig-font-path}/#{$-sprig-font-name}-Bold.woff2?v=#{$-body-font-version}") format("woff2");
}
// Bold Italic
@font-face {
- font-family: "Circular";
+ font-family: "Sprig";
font-style: italic;
font-weight: 700;
font-display: swap;
- src: local("#{$-body-font-name}-BoldItalic"), url("#{$-body-font-path}/#{$-body-font-name}-BoldItalic.woff2?v=#{$-body-font-version}") format("woff2"), url("#{$-body-font-path}/#{$-body-font-name}-BoldItalic.woff?v=#{$-body-font-version}") format("woff");
+ src: local("#{$-sprig-font-name}-BoldItalic"),
+ url("#{$sage-sprig-font-path}/#{$-sprig-font-name}-BoldItalic.woff2?v=#{$-body-font-version}") format("woff2");
+}
+
+// Super
+@font-face {
+ font-family: "Sprig";
+ font-style: normal;
+ font-weight: 900;
+ font-display: swap;
+ src: local("#{$-sprig-font-name}-Super"),
+ url("#{$sage-sprig-font-path}/#{$-sprig-font-name}-Super.woff2?v=#{$-body-font-version}") format("woff2");
+}
+
+// Super Italic
+@font-face {
+ font-family: "Sprig";
+ font-style: italic;
+ font-weight: 900;
+ font-display: swap;
+ src: local("#{$-sprig-font-name}-SuperItalic"),
+ url("#{$sage-sprig-font-path}/#{$-sprig-font-name}-SuperItalic.woff2?v=#{$-body-font-version}") format("woff2");
}
diff --git a/packages/sage-assets/lib/stylesheets/core/_typography.scss b/packages/sage-assets/lib/stylesheets/core/_typography.scss
index d863c9b042..383d8ca9c7 100644
--- a/packages/sage-assets/lib/stylesheets/core/_typography.scss
+++ b/packages/sage-assets/lib/stylesheets/core/_typography.scss
@@ -6,7 +6,8 @@
// Font definitions
-$-body-font-stack: "Circular", -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans", sans-serif;
+$-heading-font: "GreetStandard";
+$-body-font-stack: "Inter", -apple-system, system-ui, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Ubuntu", sans-serif;
$-body-margin-bottom: sage-spacing(xs);
$-headings-margin-bottom: sage-spacing(sm);
@@ -24,23 +25,23 @@ $-headings-margin-bottom: sage-spacing(sm);
--sage-font-size-body-xs: #{map-get($sage-font-sizes, xs)};
--sage-font-size-body-sm: #{map-get($sage-font-sizes, sm)};
--sage-font-size-body: #{map-get($sage-font-sizes, md)};
- --sage-font-size-h6: #{map-get($sage-font-sizes, md)};
- --sage-font-size-h5: #{map-get($sage-font-sizes, lg)};
- --sage-font-size-h4: #{map-get($sage-font-sizes, xl)};
- --sage-font-size-h3: #{map-get($sage-font-sizes, 2xl)};
- --sage-font-size-h2: #{map-get($sage-font-sizes, 3xl)};
- --sage-font-size-h1: #{map-get($sage-font-sizes, 4xl)};
+ --sage-font-size-h6: #{map-get($sage-font-sizes, lg)};
+ --sage-font-size-h5: #{map-get($sage-font-sizes, xl)};
+ --sage-font-size-h4: #{map-get($sage-font-sizes, 2xl)};
+ --sage-font-size-h3: #{map-get($sage-font-sizes, 3xl)};
+ --sage-font-size-h2: #{map-get($sage-font-sizes, 4xl)};
+ --sage-font-size-h1: #{map-get($sage-font-sizes, 5xl)};
// Line heights
--sage-line-height-body-xs: #{map-get($sage-line-heights, xs)};
--sage-line-height-body-sm: #{map-get($sage-line-heights, sm)};
--sage-line-height-body: #{map-get($sage-line-heights, md)};
--sage-line-height-h6: #{map-get($sage-line-heights, lg)};
- --sage-line-height-h5: #{map-get($sage-line-heights, lg)};
- --sage-line-height-h4: #{map-get($sage-line-heights, xl)};
- --sage-line-height-h3: #{map-get($sage-line-heights, xl)};
- --sage-line-height-h2: #{map-get($sage-line-heights, 2xl)};
- --sage-line-height-h1: #{map-get($sage-line-heights, 3xl)};
+ --sage-line-height-h5: #{map-get($sage-line-heights, xl)};
+ --sage-line-height-h4: #{map-get($sage-line-heights, 2xl)};
+ --sage-line-height-h3: #{map-get($sage-line-heights, 3xl)};
+ --sage-line-height-h2: #{map-get($sage-line-heights, 4xl)};
+ --sage-line-height-h1: #{map-get($sage-line-heights, 5xl)};
}
// Responsive adjustments are currently TBD
@@ -105,7 +106,6 @@ body:not(.sage-excluded),
.sage-type {
// Body-like elements get spacing below
- > p:not([class]),
> ul:not([class]),
> ol:not([class]),
> dl:not([class]),
@@ -209,20 +209,39 @@ body:not(.sage-excluded),
// Generate text color modifiers
@each $color-name, $color-slider in $sage-colors {
- // Default color values
- $color-value: sage-color($color-name);
+ $color-value: "";
- @if ($color-name == grey) {
+ @if ($color-name == blue) {
+ $color-value: sage-color($color-name, 600);
+ }
+ @else if ($color-name == green) {
+ $color-value: sage-color($color-name, 600);
+ }
+ @else if ($color-name == mercury) {
$color-value: sage-color($color-name, 500);
}
-
+ @else if ($color-name == grey) {
+ $color-value: sage-color($color-name, 500);
+ }
+ @else {
+ // Default color values
+ $color-value: sage-color($color-name);
+ }
.t-sage--color-#{"" + $color-name} {
+
color: $color-value;
}
// Specific color values
@each $-level, $-value in $color-slider {
- .t-sage--color-#{"" + $color-name}-#{$-level} {
+
+
+ $classname: ".t-sage--color-#{"" + $color-name}-#{$-level}";
+ @if ($-level == 50) {
+ $classname: ".t-sage--color-#{"" + $color-name}-0#{$-level}";
+ }
+
+ #{$classname} {
color: sage-color($color-name, $-level);
}
}
diff --git a/packages/sage-assets/lib/stylesheets/core/_variables.scss b/packages/sage-assets/lib/stylesheets/core/_variables.scss
index 67f315388c..3a8e3e5c3b 100644
--- a/packages/sage-assets/lib/stylesheets/core/_variables.scss
+++ b/packages/sage-assets/lib/stylesheets/core/_variables.scss
@@ -8,13 +8,14 @@
/// Base Font CDN path
///
$sage-font-cdn-root: "https://sage.kajabi-cdn.com/fonts";
+$sage-greet-font-path: "#{$sage-font-cdn-root}/greet";
///
/// Active underline configuration
///
$sage-active-underline-configs: (
height: rem(3px),
- color: sage-color(charcoal, 400),
+ color: sage-color(mercury, 500),
);
///
@@ -50,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),
);
@@ -65,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),
);
@@ -84,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),
);
///
@@ -102,7 +103,7 @@ $sage-text-colors: (
///
$sage-toolbar-button-borders: (
default: 0 0 0 1px sage-color(grey, 500),
- focus: 0 0 0 4px sage-color(primary, 200),
+ 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 c70fcb32ba..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,13 +178,14 @@
/// @param {time} $focus-animation-speed [0.2s] How quickly the focus ring animates on activation
///
@mixin sage-focus-ring(
- $focus-shadow: sage-color(primary, 200),
- $focus-width: 4px
+ $focus-shadow: sage-color(purple, 300),
+ $focus-width-inner: 1px,
+ $focus-width-outter: 3px
) {
- &:focus {
+ &:focus-visible {
z-index: sage-z-index(default, 1);
outline: none;
- box-shadow: 0 0 0 $focus-width $focus-shadow;
+ box-shadow: 0 0 0 $focus-width-inner #fff, 0 0 0 $focus-width-outter $focus-shadow;
}
}
@@ -198,7 +199,7 @@
/// @param {time} $outline-animation-speed [0.2s] How quickly the focus ring animates on activation
///
@mixin sage-focus-outline(
- $outline-width: 4px,
+ $outline-width: 2px,
$outline-offset-block: 0,
$outline-offset-inline: 0,
$outline-animation-speed: 0.2s,
@@ -207,6 +208,7 @@
position: relative;
&:focus,
+ &:focus-visible,
&:focus-within {
outline: none;
}
@@ -233,7 +235,7 @@
will-change: transform;
}
- &:focus:not(:disabled):not([aria-disabled="true"]),
+ &:focus-visible:not(:disabled):not([aria-disabled="true"]),
&:active:not(:disabled):not([aria-disabled="true"]) {
&::after {
transform: translate3d(-50%, -50%, 0) scale(1);
@@ -283,7 +285,6 @@
}
gap: sage-spacing();
padding: sage-spacing(card);
- border: sage-border();
border-radius: sage-border(radius-large);
}
@@ -409,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;
@@ -419,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 & {
@@ -452,7 +453,7 @@
resize: none;
@include placeholder {
- color: sage-color(charcoal, 200);
+ color: sage-color(grey, 700);
}
.sage-form-field--showplaceholder & ~ label {
@@ -472,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) {
@@ -548,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);
@@ -612,7 +613,7 @@
position: relative;
z-index: sage-z-index(default);
width: 100%;
- color: sage-color(charcoal, 200);
+ color: sage-color(grey, 700);
}
///
@@ -656,8 +657,8 @@
@mixin sage-panel() {
padding: sage-spacing(panel);
background-color: sage-color(white);
- border: sage-border();
border-radius: sage-border(radius-large);
+ box-shadow: sage-shadow(100);
}
///
@@ -669,7 +670,7 @@
$item-underline: "after";
&::#{$item-underline} {
- $spacing-off: 50%;
+ $spacing-off: calc(50% + #{sage-letter-spacing(lg)});
content: "";
position: absolute;
@@ -701,6 +702,7 @@
///
@mixin sage-font-family() {
font-family: $-body-font-stack;
+ font-feature-settings: "liga" 1, "calt" 1; /* fix for Chrome */
}
///
diff --git a/packages/sage-assets/lib/stylesheets/dictionary/_tokens.scss b/packages/sage-assets/lib/stylesheets/dictionary/_tokens.scss
index f630d3c5c8..f7a726fbb0 100644
--- a/packages/sage-assets/lib/stylesheets/dictionary/_tokens.scss
+++ b/packages/sage-assets/lib/stylesheets/dictionary/_tokens.scss
@@ -22,9 +22,441 @@
// Static vars for color base
//
///
+/// color color-base-blue-100-hex
+///
+$sd-sage-color-base-blue-100-hex: #eff6ff;
+///
+/// color color-base-blue-100-code
+///
+$sd-sage-color-base-blue-100-code: "blue-100";
+///
+/// color color-base-blue-100-classname
+///
+$sd-sage-color-base-blue-100-classname: "t-sage--color-blue-100";
+///
+/// color color-base-blue-150-hex
+///
+$sd-sage-color-base-blue-150-hex: #dbe9fe;
+///
+/// color color-base-blue-150-code
+///
+$sd-sage-color-base-blue-150-code: "blue-150";
+///
+/// color color-base-blue-150-classname
+///
+$sd-sage-color-base-blue-150-classname: "t-sage--color-blue-150";
+///
+/// color color-base-blue-200-hex
+///
+$sd-sage-color-base-blue-200-hex: #bfdbfe;
+///
+/// color color-base-blue-200-code
+///
+$sd-sage-color-base-blue-200-code: "blue-200";
+///
+/// color color-base-blue-200-classname
+///
+$sd-sage-color-base-blue-200-classname: "t-sage--color-blue-200";
+///
+/// color color-base-blue-300-hex
+///
+$sd-sage-color-base-blue-300-hex: #92c5fd;
+///
+/// color color-base-blue-300-code
+///
+$sd-sage-color-base-blue-300-code: "blue-300";
+///
+/// color color-base-blue-300-classname
+///
+$sd-sage-color-base-blue-300-classname: "t-sage--color-blue-300";
+///
+/// color color-base-blue-400-hex
+///
+$sd-sage-color-base-blue-400-hex: #60a5fa;
+///
+/// color color-base-blue-400-code
+///
+$sd-sage-color-base-blue-400-code: "blue-400";
+///
+/// color color-base-blue-400-classname
+///
+$sd-sage-color-base-blue-400-classname: "t-sage--color-blue-400";
+///
+/// color color-base-blue-500-hex
+///
+$sd-sage-color-base-blue-500-hex: #3c82f6;
+///
+/// color color-base-blue-500-code
+///
+$sd-sage-color-base-blue-500-code: "blue-500";
+///
+/// color color-base-blue-500-classname
+///
+$sd-sage-color-base-blue-500-classname: "t-sage--color-blue-500";
+///
+/// color color-base-blue-600-hex
+///
+$sd-sage-color-base-blue-600-hex: #2463eb;
+///
+/// color color-base-blue-600-code
+///
+$sd-sage-color-base-blue-600-code: "blue-600";
+///
+/// color color-base-blue-600-classname
+///
+$sd-sage-color-base-blue-600-classname: "t-sage--color-blue-600";
+///
+/// color color-base-blue-700-hex
+///
+$sd-sage-color-base-blue-700-hex: #1c4ed8;
+///
+/// color color-base-blue-700-code
+///
+$sd-sage-color-base-blue-700-code: "blue-700";
+///
+/// color color-base-blue-700-classname
+///
+$sd-sage-color-base-blue-700-classname: "t-sage--color-blue-700";
+///
+/// color color-base-blue-800-hex
+///
+$sd-sage-color-base-blue-800-hex: #1d40ae;
+///
+/// color color-base-blue-800-code
+///
+$sd-sage-color-base-blue-800-code: "blue-800";
+///
+/// color color-base-blue-800-classname
+///
+$sd-sage-color-base-blue-800-classname: "t-sage--color-blue-800";
+///
+/// color color-base-blue-900-hex
+///
+$sd-sage-color-base-blue-900-hex: #1f3a8a;
+///
+/// color color-base-blue-900-code
+///
+$sd-sage-color-base-blue-900-code: "blue-900";
+///
+/// color color-base-blue-900-classname
+///
+$sd-sage-color-base-blue-900-classname: "t-sage--color-blue-900";
+///
+/// color color-base-blue-950-hex
+///
+$sd-sage-color-base-blue-950-hex: #172554;
+///
+/// color color-base-blue-950-code
+///
+$sd-sage-color-base-blue-950-code: "blue-950";
+///
+/// color color-base-blue-950-classname
+///
+$sd-sage-color-base-blue-950-classname: "t-sage--color-blue-950";
+///
+/// color color-base-blue-050-hex
+///
+$sd-sage-color-base-blue-050-hex: #fafcff;
+///
+/// color color-base-blue-050-code
+///
+$sd-sage-color-base-blue-050-code: "blue-050";
+///
+/// color color-base-blue-050-classname
+///
+$sd-sage-color-base-blue-050-classname: "t-sage--color-blue-050";
+///
+/// color color-base-green-100-hex
+///
+$sd-sage-color-base-green-100-hex: #edfcf2;
+///
+/// color color-base-green-100-code
+///
+$sd-sage-color-base-green-100-code: "green-100";
+///
+/// color color-base-green-100-classname
+///
+$sd-sage-color-base-green-100-classname: "t-sage--color-green-100";
+///
+/// color color-base-green-150-hex
+///
+$sd-sage-color-base-green-150-hex: #d3f8df;
+///
+/// color color-base-green-150-code
+///
+$sd-sage-color-base-green-150-code: "green-150";
+///
+/// color color-base-green-150-classname
+///
+$sd-sage-color-base-green-150-classname: "t-sage--color-green-150";
+///
+/// color color-base-green-200-hex
+///
+$sd-sage-color-base-green-200-hex: #aaf0c4;
+///
+/// color color-base-green-200-code
+///
+$sd-sage-color-base-green-200-code: "green-200";
+///
+/// color color-base-green-200-classname
+///
+$sd-sage-color-base-green-200-classname: "t-sage--color-green-200";
+///
+/// color color-base-green-300-hex
+///
+$sd-sage-color-base-green-300-hex: #73e2a3;
+///
+/// color color-base-green-300-code
+///
+$sd-sage-color-base-green-300-code: "green-300";
+///
+/// color color-base-green-300-classname
+///
+$sd-sage-color-base-green-300-classname: "t-sage--color-green-300";
+///
+/// color color-base-green-400-hex
+///
+$sd-sage-color-base-green-400-hex: #3dcb7f;
+///
+/// color color-base-green-400-code
+///
+$sd-sage-color-base-green-400-code: "green-400";
+///
+/// color color-base-green-400-classname
+///
+$sd-sage-color-base-green-400-classname: "t-sage--color-green-400";
+///
+/// color color-base-green-500-hex
+///
+$sd-sage-color-base-green-500-hex: #17b365;
+///
+/// color color-base-green-500-code
+///
+$sd-sage-color-base-green-500-code: "green-500";
+///
+/// color color-base-green-500-classname
+///
+$sd-sage-color-base-green-500-classname: "t-sage--color-green-500";
+///
+/// color color-base-green-600-hex
+///
+$sd-sage-color-base-green-600-hex: #079250;
+///
+/// color color-base-green-600-code
+///
+$sd-sage-color-base-green-600-code: "green-600";
+///
+/// color color-base-green-600-classname
+///
+$sd-sage-color-base-green-600-classname: "t-sage--color-green-600";
+///
+/// color color-base-green-700-hex
+///
+$sd-sage-color-base-green-700-hex: #097443;
+///
+/// color color-base-green-700-code
+///
+$sd-sage-color-base-green-700-code: "green-700";
+///
+/// color color-base-green-700-classname
+///
+$sd-sage-color-base-green-700-classname: "t-sage--color-green-700";
+///
+/// color color-base-green-800-hex
+///
+$sd-sage-color-base-green-800-hex: #085c37;
+///
+/// color color-base-green-800-code
+///
+$sd-sage-color-base-green-800-code: "green-800";
+///
+/// color color-base-green-800-classname
+///
+$sd-sage-color-base-green-800-classname: "t-sage--color-green-800";
+///
+/// color color-base-green-900-hex
+///
+$sd-sage-color-base-green-900-hex: #094c2f;
+///
+/// color color-base-green-900-code
+///
+$sd-sage-color-base-green-900-code: "green-900";
+///
+/// color color-base-green-900-classname
+///
+$sd-sage-color-base-green-900-classname: "t-sage--color-green-900";
+///
+/// color color-base-green-950-hex
+///
+$sd-sage-color-base-green-950-hex: #052e1c;
+///
+/// color color-base-green-950-code
+///
+$sd-sage-color-base-green-950-code: "green-950";
+///
+/// color color-base-green-950-classname
+///
+$sd-sage-color-base-green-950-classname: "t-sage--color-green-950";
+///
+/// color color-base-green-050-hex
+///
+$sd-sage-color-base-green-050-hex: #fbfefc;
+///
+/// color color-base-green-050-code
+///
+$sd-sage-color-base-green-050-code: "green-050";
+///
+/// color color-base-green-050-classname
+///
+$sd-sage-color-base-green-050-classname: "t-sage--color-green-050";
+///
+/// color color-base-mercury-100-hex
+///
+$sd-sage-color-base-mercury-100-hex: #fff3ed;
+///
+/// color color-base-mercury-100-code
+///
+$sd-sage-color-base-mercury-100-code: "mercury-100";
+///
+/// color color-base-mercury-100-classname
+///
+$sd-sage-color-base-mercury-100-classname: "t-sage--color-mercury-100";
+///
+/// color color-base-mercury-150-hex
+///
+$sd-sage-color-base-mercury-150-hex: #ffe3d4;
+///
+/// color color-base-mercury-150-code
+///
+$sd-sage-color-base-mercury-150-code: "mercury-150";
+///
+/// color color-base-mercury-150-classname
+///
+$sd-sage-color-base-mercury-150-classname: "t-sage--color-mercury-150";
+///
+/// color color-base-mercury-200-hex
+///
+$sd-sage-color-base-mercury-200-hex: #ffc3a8;
+///
+/// color color-base-mercury-200-code
+///
+$sd-sage-color-base-mercury-200-code: "mercury-200";
+///
+/// color color-base-mercury-200-classname
+///
+$sd-sage-color-base-mercury-200-classname: "t-sage--color-mercury-200";
+///
+/// color color-base-mercury-300-hex
+///
+$sd-sage-color-base-mercury-300-hex: #ff9970;
+///
+/// color color-base-mercury-300-code
+///
+$sd-sage-color-base-mercury-300-code: "mercury-300";
+///
+/// color color-base-mercury-300-classname
+///
+$sd-sage-color-base-mercury-300-classname: "t-sage--color-mercury-300";
+///
+/// color color-base-mercury-400-hex
+///
+$sd-sage-color-base-mercury-400-hex: #ff6337;
+///
+/// color color-base-mercury-400-code
+///
+$sd-sage-color-base-mercury-400-code: "mercury-400";
+///
+/// color color-base-mercury-400-classname
+///
+$sd-sage-color-base-mercury-400-classname: "t-sage--color-mercury-400";
+///
+/// color color-base-mercury-500-hex
+///
+$sd-sage-color-base-mercury-500-hex: #ff3e15;
+///
+/// color color-base-mercury-500-code
+///
+$sd-sage-color-base-mercury-500-code: "mercury-500";
+///
+/// color color-base-mercury-500-classname
+///
+$sd-sage-color-base-mercury-500-classname: "t-sage--color-mercury-500";
+///
+/// color color-base-mercury-600-hex
+///
+$sd-sage-color-base-mercury-600-hex: #f11f06;
+///
+/// color color-base-mercury-600-code
+///
+$sd-sage-color-base-mercury-600-code: "mercury-600";
+///
+/// color color-base-mercury-600-classname
+///
+$sd-sage-color-base-mercury-600-classname: "t-sage--color-mercury-600";
+///
+/// color color-base-mercury-700-hex
+///
+$sd-sage-color-base-mercury-700-hex: #c81307;
+///
+/// color color-base-mercury-700-code
+///
+$sd-sage-color-base-mercury-700-code: "mercury-700";
+///
+/// color color-base-mercury-700-classname
+///
+$sd-sage-color-base-mercury-700-classname: "t-sage--color-mercury-700";
+///
+/// color color-base-mercury-800-hex
+///
+$sd-sage-color-base-mercury-800-hex: #9e110e;
+///
+/// color color-base-mercury-800-code
+///
+$sd-sage-color-base-mercury-800-code: "mercury-800";
+///
+/// color color-base-mercury-800-classname
+///
+$sd-sage-color-base-mercury-800-classname: "t-sage--color-mercury-800";
+///
+/// color color-base-mercury-900-hex
+///
+$sd-sage-color-base-mercury-900-hex: #7f120f;
+///
+/// color color-base-mercury-900-code
+///
+$sd-sage-color-base-mercury-900-code: "mercury-900";
+///
+/// color color-base-mercury-900-classname
+///
+$sd-sage-color-base-mercury-900-classname: "t-sage--color-mercury-900";
+///
+/// color color-base-mercury-950-hex
+///
+$sd-sage-color-base-mercury-950-hex: #450506;
+///
+/// color color-base-mercury-950-code
+///
+$sd-sage-color-base-mercury-950-code: "mercury-950";
+///
+/// color color-base-mercury-950-classname
+///
+$sd-sage-color-base-mercury-950-classname: "t-sage--color-mercury-950";
+///
+/// color color-base-mercury-050-hex
+///
+$sd-sage-color-base-mercury-050-hex: #fffcfa;
+///
+/// color color-base-mercury-050-code
+///
+$sd-sage-color-base-mercury-050-code: "mercury-050";
+///
+/// color color-base-mercury-050-classname
+///
+$sd-sage-color-base-mercury-050-classname: "t-sage--color-mercury-050";
+///
/// color color-base-primary-100-hex
///
-$sd-sage-color-base-primary-100-hex: #e6f4fe;
+$sd-sage-color-base-primary-100-hex: #dbe9fe;
///
/// color color-base-primary-100-code
///
@@ -36,7 +468,7 @@ $sd-sage-color-base-primary-100-classname: "t-sage--color-primary-100";
///
/// color color-base-primary-200-hex
///
-$sd-sage-color-base-primary-200-hex: #8ecafb;
+$sd-sage-color-base-primary-200-hex: #92c5fd;
///
/// color color-base-primary-200-code
///
@@ -48,7 +480,7 @@ $sd-sage-color-base-primary-200-classname: "t-sage--color-primary-200";
///
/// color color-base-primary-300-hex
///
-$sd-sage-color-base-primary-300-hex: #0072ef;
+$sd-sage-color-base-primary-300-hex: #2463eb;
///
/// color color-base-primary-300-code
///
@@ -60,7 +492,7 @@ $sd-sage-color-base-primary-300-classname: "t-sage--color-primary-300";
///
/// color color-base-primary-400-hex
///
-$sd-sage-color-base-primary-400-hex: #054fb8;
+$sd-sage-color-base-primary-400-hex: #1c4ed8;
///
/// color color-base-primary-400-code
///
@@ -72,7 +504,7 @@ $sd-sage-color-base-primary-400-classname: "t-sage--color-primary-400";
///
/// color color-base-primary-500-hex
///
-$sd-sage-color-base-primary-500-hex: #07265f;
+$sd-sage-color-base-primary-500-hex: #172554;
///
/// color color-base-primary-500-code
///
@@ -84,7 +516,7 @@ $sd-sage-color-base-primary-500-classname: "t-sage--color-primary-500";
///
/// color color-base-sage-100-hex
///
-$sd-sage-color-base-sage-100-hex: #ddf8f0;
+$sd-sage-color-base-sage-100-hex: #d3f8df;
///
/// color color-base-sage-100-code
///
@@ -96,7 +528,7 @@ $sd-sage-color-base-sage-100-classname: "t-sage--color-sage-100";
///
/// color color-base-sage-200-hex
///
-$sd-sage-color-base-sage-200-hex: #86d5bc;
+$sd-sage-color-base-sage-200-hex: #73e2a3;
///
/// color color-base-sage-200-code
///
@@ -108,7 +540,7 @@ $sd-sage-color-base-sage-200-classname: "t-sage--color-sage-200";
///
/// color color-base-sage-300-hex
///
-$sd-sage-color-base-sage-300-hex: #23856d;
+$sd-sage-color-base-sage-300-hex: #079250;
///
/// color color-base-sage-300-code
///
@@ -120,7 +552,7 @@ $sd-sage-color-base-sage-300-classname: "t-sage--color-sage-300";
///
/// color color-base-sage-400-hex
///
-$sd-sage-color-base-sage-400-hex: #225d53;
+$sd-sage-color-base-sage-400-hex: #085c37;
///
/// color color-base-sage-400-code
///
@@ -132,7 +564,7 @@ $sd-sage-color-base-sage-400-classname: "t-sage--color-sage-400";
///
/// color color-base-sage-500-hex
///
-$sd-sage-color-base-sage-500-hex: #183e3b;
+$sd-sage-color-base-sage-500-hex: #052e1c;
///
/// color color-base-sage-500-code
///
@@ -144,7 +576,7 @@ $sd-sage-color-base-sage-500-classname: "t-sage--color-sage-500";
///
/// color color-base-yellow-100-hex
///
-$sd-sage-color-base-yellow-100-hex: #fef8e1;
+$sd-sage-color-base-yellow-100-hex: #fffbeb;
///
/// color color-base-yellow-100-code
///
@@ -154,9 +586,21 @@ $sd-sage-color-base-yellow-100-code: "yellow-100";
///
$sd-sage-color-base-yellow-100-classname: "t-sage--color-yellow-100";
///
+/// color color-base-yellow-150-hex
+///
+$sd-sage-color-base-yellow-150-hex: #fff3c6;
+///
+/// color color-base-yellow-150-code
+///
+$sd-sage-color-base-yellow-150-code: "yellow-150";
+///
+/// color color-base-yellow-150-classname
+///
+$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: #fad980;
+$sd-sage-color-base-yellow-200-hex: #fee589;
///
/// color color-base-yellow-200-code
///
@@ -168,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: #ffc505;
+$sd-sage-color-base-yellow-300-hex: #fed04b;
///
/// color color-base-yellow-300-code
///
@@ -180,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: #c56a02;
+$sd-sage-color-base-yellow-400-hex: #fdbb21;
///
/// color color-base-yellow-400-code
///
@@ -192,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: #8c3b08;
+$sd-sage-color-base-yellow-500-hex: #f79a0b;
///
/// color color-base-yellow-500-code
///
@@ -202,9 +646,81 @@ $sd-sage-color-base-yellow-500-code: "yellow-500";
///
$sd-sage-color-base-yellow-500-classname: "t-sage--color-yellow-500";
///
+/// color color-base-yellow-600-hex
+///
+$sd-sage-color-base-yellow-600-hex: #db7303;
+///
+/// color color-base-yellow-600-code
+///
+$sd-sage-color-base-yellow-600-code: "yellow-60";
+///
+/// color color-base-yellow-600-classname
+///
+$sd-sage-color-base-yellow-600-classname: "t-sage--color-yellow-600";
+///
+/// color color-base-yellow-700-hex
+///
+$sd-sage-color-base-yellow-700-hex: #b64f06;
+///
+/// color color-base-yellow-700-code
+///
+$sd-sage-color-base-yellow-700-code: "yellow-700";
+///
+/// color color-base-yellow-700-classname
+///
+$sd-sage-color-base-yellow-700-classname: "t-sage--color-yellow-700";
+///
+/// color color-base-yellow-800-hex
+///
+$sd-sage-color-base-yellow-800-hex: #943d0e;
+///
+/// color color-base-yellow-800-code
+///
+$sd-sage-color-base-yellow-800-code: "yellow-800";
+///
+/// color color-base-yellow-800-classname
+///
+$sd-sage-color-base-yellow-800-classname: "t-sage--color-yellow-800";
+///
+/// color color-base-yellow-900-hex
+///
+$sd-sage-color-base-yellow-900-hex: #79330e;
+///
+/// color color-base-yellow-900-code
+///
+$sd-sage-color-base-yellow-900-code: "yellow-900";
+///
+/// color color-base-yellow-900-classname
+///
+$sd-sage-color-base-yellow-900-classname: "t-sage--color-yellow-900";
+///
+/// color color-base-yellow-950-hex
+///
+$sd-sage-color-base-yellow-950-hex: #451902;
+///
+/// color color-base-yellow-950-code
+///
+$sd-sage-color-base-yellow-950-code: "yellow-950";
+///
+/// color color-base-yellow-950-classname
+///
+$sd-sage-color-base-yellow-950-classname: "t-sage--color-yellow-950";
+///
+/// color color-base-yellow-050-hex
+///
+$sd-sage-color-base-yellow-050-hex: #fffefa;
+///
+/// color color-base-yellow-050-code
+///
+$sd-sage-color-base-yellow-050-code: "yellow-050";
+///
+/// color color-base-yellow-050-classname
+///
+$sd-sage-color-base-yellow-050-classname: "t-sage--color-yellow-050";
+///
/// color color-base-red-100-hex
///
-$sd-sage-color-base-red-100-hex: #fff0f0;
+$sd-sage-color-base-red-100-hex: #fef2f2;
///
/// color color-base-red-100-code
///
@@ -214,9 +730,21 @@ $sd-sage-color-base-red-100-code: "red-100";
///
$sd-sage-color-base-red-100-classname: "t-sage--color-red-100";
///
+/// color color-base-red-150-hex
+///
+$sd-sage-color-base-red-150-hex: #fee2e1;
+///
+/// color color-base-red-150-code
+///
+$sd-sage-color-base-red-150-code: "red-150";
+///
+/// color color-base-red-150-classname
+///
+$sd-sage-color-base-red-150-classname: "t-sage--color-red-150";
+///
/// color color-base-red-200-hex
///
-$sd-sage-color-base-red-200-hex: #fdb0aa;
+$sd-sage-color-base-red-200-hex: #fecaca;
///
/// color color-base-red-200-code
///
@@ -228,7 +756,7 @@ $sd-sage-color-base-red-200-classname: "t-sage--color-red-200";
///
/// color color-base-red-300-hex
///
-$sd-sage-color-base-red-300-hex: #cf3c32;
+$sd-sage-color-base-red-300-hex: #fda5a5;
///
/// color color-base-red-300-code
///
@@ -240,7 +768,7 @@ $sd-sage-color-base-red-300-classname: "t-sage--color-red-300";
///
/// color color-base-red-400-hex
///
-$sd-sage-color-base-red-400-hex: #99221e;
+$sd-sage-color-base-red-400-hex: #f87171;
///
/// color color-base-red-400-code
///
@@ -252,7 +780,7 @@ $sd-sage-color-base-red-400-classname: "t-sage--color-red-400";
///
/// color color-base-red-500-hex
///
-$sd-sage-color-base-red-500-hex: #5e0d0d;
+$sd-sage-color-base-red-500-hex: #ef4444;
///
/// color color-base-red-500-code
///
@@ -262,9 +790,81 @@ $sd-sage-color-base-red-500-code: "red-500";
///
$sd-sage-color-base-red-500-classname: "t-sage--color-red-500";
///
+/// color color-base-red-600-hex
+///
+$sd-sage-color-base-red-600-hex: #dc2625;
+///
+/// color color-base-red-600-code
+///
+$sd-sage-color-base-red-600-code: "red-600";
+///
+/// color color-base-red-600-classname
+///
+$sd-sage-color-base-red-600-classname: "t-sage--color-red-600";
+///
+/// color color-base-red-700-hex
+///
+$sd-sage-color-base-red-700-hex: #b91c1b;
+///
+/// color color-base-red-700-code
+///
+$sd-sage-color-base-red-700-code: "red-700";
+///
+/// color color-base-red-700-classname
+///
+$sd-sage-color-base-red-700-classname: "t-sage--color-red-700";
+///
+/// color color-base-red-800-hex
+///
+$sd-sage-color-base-red-800-hex: #991b1b;
+///
+/// color color-base-red-800-code
+///
+$sd-sage-color-base-red-800-code: "red-800";
+///
+/// color color-base-red-800-classname
+///
+$sd-sage-color-base-red-800-classname: "t-sage--color-red-800";
+///
+/// color color-base-red-900-hex
+///
+$sd-sage-color-base-red-900-hex: #7f1c1d;
+///
+/// color color-base-red-900-code
+///
+$sd-sage-color-base-red-900-code: "red-900";
+///
+/// color color-base-red-900-classname
+///
+$sd-sage-color-base-red-900-classname: "t-sage--color-red-900";
+///
+/// color color-base-red-950-hex
+///
+$sd-sage-color-base-red-950-hex: #572627;
+///
+/// color color-base-red-950-code
+///
+$sd-sage-color-base-red-950-code: "red-950";
+///
+/// color color-base-red-950-classname
+///
+$sd-sage-color-base-red-950-classname: "t-sage--color-red-950";
+///
+/// color color-base-red-050-hex
+///
+$sd-sage-color-base-red-050-hex: #fffafa;
+///
+/// color color-base-red-050-code
+///
+$sd-sage-color-base-red-050-code: "red-050";
+///
+/// color color-base-red-050-classname
+///
+$sd-sage-color-base-red-050-classname: "t-sage--color-red-050";
+///
/// color color-base-orange-100-hex
///
-$sd-sage-color-base-orange-100-hex: #fef1e1;
+$sd-sage-color-base-orange-100-hex: #ffe3d4;
///
/// color color-base-orange-100-code
///
@@ -276,7 +876,7 @@ $sd-sage-color-base-orange-100-classname: "t-sage--color-orange-100";
///
/// color color-base-orange-200-hex
///
-$sd-sage-color-base-orange-200-hex: #ffb36b;
+$sd-sage-color-base-orange-200-hex: #ff9970;
///
/// color color-base-orange-200-code
///
@@ -288,7 +888,7 @@ $sd-sage-color-base-orange-200-classname: "t-sage--color-orange-200";
///
/// color color-base-orange-300-hex
///
-$sd-sage-color-base-orange-300-hex: #fb7e09;
+$sd-sage-color-base-orange-300-hex: #ff3e15;
///
/// color color-base-orange-300-code
///
@@ -300,7 +900,7 @@ $sd-sage-color-base-orange-300-classname: "t-sage--color-orange-300";
///
/// color color-base-orange-400-hex
///
-$sd-sage-color-base-orange-400-hex: #b3501e;
+$sd-sage-color-base-orange-400-hex: #9e110e;
///
/// color color-base-orange-400-code
///
@@ -312,7 +912,7 @@ $sd-sage-color-base-orange-400-classname: "t-sage--color-orange-400";
///
/// color color-base-orange-500-hex
///
-$sd-sage-color-base-orange-500-hex: #5a260c;
+$sd-sage-color-base-orange-500-hex: #450506;
///
/// color color-base-orange-500-code
///
@@ -324,7 +924,7 @@ $sd-sage-color-base-orange-500-classname: "t-sage--color-orange-500";
///
/// color color-base-purple-100-hex
///
-$sd-sage-color-base-purple-100-hex: #eee4f6;
+$sd-sage-color-base-purple-100-hex: #edf1ff;
///
/// color color-base-purple-100-code
///
@@ -334,9 +934,21 @@ $sd-sage-color-base-purple-100-code: "purple-100";
///
$sd-sage-color-base-purple-100-classname: "t-sage--color-purple-100";
///
+/// color color-base-purple-150-hex
+///
+$sd-sage-color-base-purple-150-hex: #e0e4ff;
+///
+/// color color-base-purple-150-code
+///
+$sd-sage-color-base-purple-150-code: "purple-150";
+///
+/// color color-base-purple-150-classname
+///
+$sd-sage-color-base-purple-150-classname: "t-sage--color-purple-150";
+///
/// color color-base-purple-200-hex
///
-$sd-sage-color-base-purple-200-hex: #d9c2ef;
+$sd-sage-color-base-purple-200-hex: #c7cdfe;
///
/// color color-base-purple-200-code
///
@@ -348,7 +960,7 @@ $sd-sage-color-base-purple-200-classname: "t-sage--color-purple-200";
///
/// color color-base-purple-300-hex
///
-$sd-sage-color-base-purple-300-hex: #8e5ad8;
+$sd-sage-color-base-purple-300-hex: #a3acfd;
///
/// color color-base-purple-300-code
///
@@ -360,7 +972,7 @@ $sd-sage-color-base-purple-300-classname: "t-sage--color-purple-300";
///
/// color color-base-purple-400-hex
///
-$sd-sage-color-base-purple-400-hex: #50348a;
+$sd-sage-color-base-purple-400-hex: #8081f9;
///
/// color color-base-purple-400-code
///
@@ -372,7 +984,7 @@ $sd-sage-color-base-purple-400-classname: "t-sage--color-purple-400";
///
/// color color-base-purple-500-hex
///
-$sd-sage-color-base-purple-500-hex: #381c5e;
+$sd-sage-color-base-purple-500-hex: #6a62f2;
///
/// color color-base-purple-500-code
///
@@ -382,9 +994,81 @@ $sd-sage-color-base-purple-500-code: "purple-500";
///
$sd-sage-color-base-purple-500-classname: "t-sage--color-purple-500";
///
+/// color color-base-purple-600-hex
+///
+$sd-sage-color-base-purple-600-hex: #533be5;
+///
+/// color color-base-purple-600-code
+///
+$sd-sage-color-base-purple-600-code: "purple-600";
+///
+/// color color-base-purple-600-classname
+///
+$sd-sage-color-base-purple-600-classname: "t-sage--color-purple-600";
+///
+/// color color-base-purple-700-hex
+///
+$sd-sage-color-base-purple-700-hex: #4f37cb;
+///
+/// color color-base-purple-700-code
+///
+$sd-sage-color-base-purple-700-code: "purple-700";
+///
+/// color color-base-purple-700-classname
+///
+$sd-sage-color-base-purple-700-classname: "t-sage--color-purple-700";
+///
+/// color color-base-purple-800-hex
+///
+$sd-sage-color-base-purple-800-hex: #402fa4;
+///
+/// color color-base-purple-800-code
+///
+$sd-sage-color-base-purple-800-code: "purple-800";
+///
+/// color color-base-purple-800-classname
+///
+$sd-sage-color-base-purple-800-classname: "t-sage--color-purple-800";
+///
+/// color color-base-purple-900-hex
+///
+$sd-sage-color-base-purple-900-hex: #372d82;
+///
+/// color color-base-purple-900-code
+///
+$sd-sage-color-base-purple-900-code: "purple-900";
+///
+/// color color-base-purple-900-classname
+///
+$sd-sage-color-base-purple-900-classname: "t-sage--color-purple-900";
+///
+/// color color-base-purple-950-hex
+///
+$sd-sage-color-base-purple-950-hex: #221b4b;
+///
+/// color color-base-purple-950-code
+///
+$sd-sage-color-base-purple-950-code: "purple-950";
+///
+/// color color-base-purple-950-classname
+///
+$sd-sage-color-base-purple-950-classname: "t-sage--color-purple-950";
+///
+/// color color-base-purple-050-hex
+///
+$sd-sage-color-base-purple-050-hex: #fafbff;
+///
+/// color color-base-purple-050-code
+///
+$sd-sage-color-base-purple-050-code: "purple-050";
+///
+/// color color-base-purple-050-classname
+///
+$sd-sage-color-base-purple-050-classname: "t-sage--color-purple-050";
+///
/// color color-base-charcoal-100-hex
///
-$sd-sage-color-base-charcoal-100-hex: #8d939a;
+$sd-sage-color-base-charcoal-100-hex: #828180;
///
/// color color-base-charcoal-100-code
///
@@ -396,7 +1080,7 @@ $sd-sage-color-base-charcoal-100-classname: "t-sage--color-charcoal-100";
///
/// color color-base-charcoal-200-hex
///
-$sd-sage-color-base-charcoal-200-hex: #60666c;
+$sd-sage-color-base-charcoal-200-hex: #6c6a69;
///
/// color color-base-charcoal-200-code
///
@@ -408,7 +1092,7 @@ $sd-sage-color-base-charcoal-200-classname: "t-sage--color-charcoal-200";
///
/// color color-base-charcoal-300-hex
///
-$sd-sage-color-base-charcoal-300-hex: #43474b;
+$sd-sage-color-base-charcoal-300-hex: #4d4d4c;
///
/// color color-base-charcoal-300-code
///
@@ -420,7 +1104,7 @@ $sd-sage-color-base-charcoal-300-classname: "t-sage--color-charcoal-300";
///
/// color color-base-charcoal-400-hex
///
-$sd-sage-color-base-charcoal-400-hex: #202327;
+$sd-sage-color-base-charcoal-400-hex: #343332;
///
/// color color-base-charcoal-400-code
///
@@ -432,7 +1116,7 @@ $sd-sage-color-base-charcoal-400-classname: "t-sage--color-charcoal-400";
///
/// color color-base-charcoal-500-hex
///
-$sd-sage-color-base-charcoal-500-hex: #040506;
+$sd-sage-color-base-charcoal-500-hex: #1a1a19;
///
/// color color-base-charcoal-500-code
///
@@ -444,7 +1128,7 @@ $sd-sage-color-base-charcoal-500-classname: "t-sage--color-charcoal-500";
///
/// color color-base-grey-100-hex
///
-$sd-sage-color-base-grey-100-hex: #f9fafa;
+$sd-sage-color-base-grey-100-hex: #f8f8f8;
///
/// color color-base-grey-100-code
///
@@ -454,9 +1138,21 @@ $sd-sage-color-base-grey-100-code: "grey-100";
///
$sd-sage-color-base-grey-100-classname: "t-sage--color-grey-100";
///
+/// color color-base-grey-150-hex
+///
+$sd-sage-color-base-grey-150-hex: #f0f0f0;
+///
+/// color color-base-grey-150-code
+///
+$sd-sage-color-base-grey-150-code: "grey-15";
+///
+/// color color-base-grey-150-classname
+///
+$sd-sage-color-base-grey-150-classname: "t-sage--color-grey-150";
+///
/// color color-base-grey-200-hex
///
-$sd-sage-color-base-grey-200-hex: #f6f8f8;
+$sd-sage-color-base-grey-200-hex: #e4e4e4;
///
/// color color-base-grey-200-code
///
@@ -468,7 +1164,7 @@ $sd-sage-color-base-grey-200-classname: "t-sage--color-grey-200";
///
/// color color-base-grey-300-hex
///
-$sd-sage-color-base-grey-300-hex: #eceeef;
+$sd-sage-color-base-grey-300-hex: #d2d1d1;
///
/// color color-base-grey-300-code
///
@@ -480,7 +1176,7 @@ $sd-sage-color-base-grey-300-classname: "t-sage--color-grey-300";
///
/// color color-base-grey-400-hex
///
-$sd-sage-color-base-grey-400-hex: #d3d5d9;
+$sd-sage-color-base-grey-400-hex: #bbbab9;
///
/// color color-base-grey-400-code
///
@@ -492,7 +1188,7 @@ $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: #b5bac0;
+$sd-sage-color-base-grey-500-hex: #9b9a98;
///
/// color color-base-grey-500-code
///
@@ -502,6 +1198,78 @@ $sd-sage-color-base-grey-500-code: "grey-500";
///
$sd-sage-color-base-grey-500-classname: "t-sage--color-grey-500";
///
+/// color color-base-grey-600-hex
+///
+$sd-sage-color-base-grey-600-hex: #828180;
+///
+/// color color-base-grey-600-code
+///
+$sd-sage-color-base-grey-600-code: "grey-600";
+///
+/// color color-base-grey-600-classname
+///
+$sd-sage-color-base-grey-600-classname: "t-sage--color-grey-600";
+///
+/// color color-base-grey-700-hex
+///
+$sd-sage-color-base-grey-700-hex: #6c6a69;
+///
+/// color color-base-grey-700-code
+///
+$sd-sage-color-base-grey-700-code: "grey-700";
+///
+/// color color-base-grey-700-classname
+///
+$sd-sage-color-base-grey-700-classname: "t-sage--color-grey-700";
+///
+/// color color-base-grey-800-hex
+///
+$sd-sage-color-base-grey-800-hex: #4d4d4c;
+///
+/// color color-base-grey-800-code
+///
+$sd-sage-color-base-grey-800-code: "grey-800";
+///
+/// color color-base-grey-800-classname
+///
+$sd-sage-color-base-grey-800-classname: "t-sage--color-grey-800";
+///
+/// color color-base-grey-900-hex
+///
+$sd-sage-color-base-grey-900-hex: #343332;
+///
+/// color color-base-grey-900-code
+///
+$sd-sage-color-base-grey-900-code: "grey-900";
+///
+/// color color-base-grey-900-classname
+///
+$sd-sage-color-base-grey-900-classname: "t-sage--color-grey-900";
+///
+/// color color-base-grey-950-hex
+///
+$sd-sage-color-base-grey-950-hex: #1a1a19;
+///
+/// color color-base-grey-950-code
+///
+$sd-sage-color-base-grey-950-code: "grey-950";
+///
+/// color color-base-grey-950-classname
+///
+$sd-sage-color-base-grey-950-classname: "t-sage--color-grey-950";
+///
+/// color color-base-grey-050-hex
+///
+$sd-sage-color-base-grey-050-hex: #fcfcfc;
+///
+/// color color-base-grey-050-code
+///
+$sd-sage-color-base-grey-050-code: "grey-050";
+///
+/// color color-base-grey-050-classname
+///
+$sd-sage-color-base-grey-050-classname: "t-sage--color-grey-050";
+///
/// color color-base-white-100-hex
///
$sd-sage-color-base-white-100-hex: #fff;
@@ -626,6 +1394,192 @@ $sd-sage-color-base-black-500-classname: "t-sage--color-black-500";
/// Map for color base
///
$sd-sage-color: (
+ blue: (
+ 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: (
+ 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: (
+ 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: (
100: (
hex: $sd-sage-color-base-primary-100-hex,
@@ -686,6 +1640,11 @@ $sd-sage-color: (
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,
@@ -706,6 +1665,36 @@ $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: (
100: (
@@ -713,6 +1702,11 @@ $sd-sage-color: (
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,
@@ -733,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: (
@@ -767,6 +1791,11 @@ $sd-sage-color: (
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,
@@ -787,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: (
@@ -821,6 +1880,11 @@ $sd-sage-color: (
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,
@@ -841,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: (
@@ -926,75 +2020,75 @@ $sd-sage-color: (
///
/// color combos color-combos-draft-default-foreground
///
-$sd-sage-color-combos-draft-default-foreground: #202327;
+$sd-sage-color-combos-draft-default-foreground: #343332;
///
/// color combos color-combos-draft-default-foreground-accent
///
-$sd-sage-color-combos-draft-default-foreground-accent: #040506;
+$sd-sage-color-combos-draft-default-foreground-accent: #1a1a19;
///
/// color combos color-combos-draft-default-background
///
-$sd-sage-color-combos-draft-default-background: #eceeef;
+$sd-sage-color-combos-draft-default-background: #e4e4e4;
///
/// color combos color-combos-draft-default-background-accent
///
-$sd-sage-color-combos-draft-default-background-accent: #d3d5d9;
+$sd-sage-color-combos-draft-default-background-accent: #d2d1d1;
///
/// color combos color-combos-draft-default-icon-background-accent
///
-$sd-sage-color-combos-draft-default-icon-background-accent: #60666c;
+$sd-sage-color-combos-draft-default-icon-background-accent: #6c6a69;
///
/// color combos color-combos-draft-subtle-foreground
///
-$sd-sage-color-combos-draft-subtle-foreground: #60666c;
+$sd-sage-color-combos-draft-subtle-foreground: #6c6a69;
///
/// color combos color-combos-draft-subtle-foreground-accent
///
-$sd-sage-color-combos-draft-subtle-foreground-accent: #8d939a;
+$sd-sage-color-combos-draft-subtle-foreground-accent: #828180;
///
/// color combos color-combos-draft-subtle-background
///
-$sd-sage-color-combos-draft-subtle-background: #8d939a;
+$sd-sage-color-combos-draft-subtle-background: #828180;
///
/// color combos color-combos-draft-bold-foreground
///
-$sd-sage-color-combos-draft-bold-foreground: #f6f8f8;
+$sd-sage-color-combos-draft-bold-foreground: #f0f0f0;
///
/// color combos color-combos-draft-bold-background
///
-$sd-sage-color-combos-draft-bold-background: #202327;
+$sd-sage-color-combos-draft-bold-background: #343332;
///
/// color combos color-combos-published-default-foreground
///
-$sd-sage-color-combos-published-default-foreground: #225d53;
+$sd-sage-color-combos-published-default-foreground: #085c37;
///
/// color combos color-combos-published-default-foreground-accent
///
-$sd-sage-color-combos-published-default-foreground-accent: #183e3b;
+$sd-sage-color-combos-published-default-foreground-accent: #052e1c;
///
/// color combos color-combos-published-default-background
///
-$sd-sage-color-combos-published-default-background: #ddf8f0;
+$sd-sage-color-combos-published-default-background: #d3f8df;
///
/// color combos color-combos-published-default-background-accent
///
-$sd-sage-color-combos-published-default-background-accent: #86d5bc;
+$sd-sage-color-combos-published-default-background-accent: #73e2a3;
///
/// color combos color-combos-published-default-icon-background-accent
///
-$sd-sage-color-combos-published-default-icon-background-accent: #23856d;
+$sd-sage-color-combos-published-default-icon-background-accent: #079250;
///
/// color combos color-combos-published-subtle-foreground
///
-$sd-sage-color-combos-published-subtle-foreground: #225d53;
+$sd-sage-color-combos-published-subtle-foreground: #085c37;
///
/// color combos color-combos-published-subtle-foreground-accent
///
-$sd-sage-color-combos-published-subtle-foreground-accent: #23856d;
+$sd-sage-color-combos-published-subtle-foreground-accent: #079250;
///
/// color combos color-combos-published-subtle-background
///
-$sd-sage-color-combos-published-subtle-background: #23856d;
+$sd-sage-color-combos-published-subtle-background: #079250;
///
/// color combos color-combos-published-bold-foreground
///
@@ -1002,119 +2096,119 @@ $sd-sage-color-combos-published-bold-foreground: #fff;
///
/// color combos color-combos-published-bold-background
///
-$sd-sage-color-combos-published-bold-background: #23856d;
+$sd-sage-color-combos-published-bold-background: #079250;
///
/// color combos color-combos-info-default-foreground
///
-$sd-sage-color-combos-info-default-foreground: #054fb8;
+$sd-sage-color-combos-info-default-foreground: #1c4ed8;
///
/// color combos color-combos-info-default-foreground-accent
///
-$sd-sage-color-combos-info-default-foreground-accent: #07265f;
+$sd-sage-color-combos-info-default-foreground-accent: #172554;
///
/// color combos color-combos-info-default-background
///
-$sd-sage-color-combos-info-default-background: #e6f4fe;
+$sd-sage-color-combos-info-default-background: #dbe9fe;
///
/// color combos color-combos-info-default-background-accent
///
-$sd-sage-color-combos-info-default-background-accent: #8ecafb;
+$sd-sage-color-combos-info-default-background-accent: #92c5fd;
///
/// color combos color-combos-info-default-icon-background-accent
///
-$sd-sage-color-combos-info-default-icon-background-accent: #0072ef;
+$sd-sage-color-combos-info-default-icon-background-accent: #2463eb;
///
/// color combos color-combos-info-subtle-foreground
///
-$sd-sage-color-combos-info-subtle-foreground: #054fb8;
+$sd-sage-color-combos-info-subtle-foreground: #1c4ed8;
///
/// color combos color-combos-info-subtle-foreground-accent
///
-$sd-sage-color-combos-info-subtle-foreground-accent: #0072ef;
+$sd-sage-color-combos-info-subtle-foreground-accent: #2463eb;
///
/// color combos color-combos-info-subtle-background
///
-$sd-sage-color-combos-info-subtle-background: #8ecafb;
+$sd-sage-color-combos-info-subtle-background: #92c5fd;
///
/// color combos color-combos-info-bold-foreground
///
-$sd-sage-color-combos-info-bold-foreground: #e6f4fe;
+$sd-sage-color-combos-info-bold-foreground: #dbe9fe;
///
/// color combos color-combos-info-bold-background
///
-$sd-sage-color-combos-info-bold-background: #0072ef;
+$sd-sage-color-combos-info-bold-background: #2463eb;
///
/// color combos color-combos-locked-default-foreground
///
-$sd-sage-color-combos-locked-default-foreground: #50348a;
+$sd-sage-color-combos-locked-default-foreground: #402fa4;
///
/// color combos color-combos-locked-default-foreground-accent
///
-$sd-sage-color-combos-locked-default-foreground-accent: #381c5e;
+$sd-sage-color-combos-locked-default-foreground-accent: #221b4b;
///
/// color combos color-combos-locked-default-background
///
-$sd-sage-color-combos-locked-default-background: #eee4f6;
+$sd-sage-color-combos-locked-default-background: #e0e4ff;
///
/// color combos color-combos-locked-default-background-accent
///
-$sd-sage-color-combos-locked-default-background-accent: #d9c2ef;
+$sd-sage-color-combos-locked-default-background-accent: #a3acfd;
///
/// color combos color-combos-locked-default-icon-background-accent
///
-$sd-sage-color-combos-locked-default-icon-background-accent: #8e5ad8;
+$sd-sage-color-combos-locked-default-icon-background-accent: #533be5;
///
/// color combos color-combos-locked-subtle-foreground
///
-$sd-sage-color-combos-locked-subtle-foreground: #50348a;
+$sd-sage-color-combos-locked-subtle-foreground: #402fa4;
///
/// color combos color-combos-locked-subtle-foreground-accent
///
-$sd-sage-color-combos-locked-subtle-foreground-accent: #8e5ad8;
+$sd-sage-color-combos-locked-subtle-foreground-accent: #533be5;
///
/// color combos color-combos-locked-subtle-background
///
-$sd-sage-color-combos-locked-subtle-background: #d9c2ef;
+$sd-sage-color-combos-locked-subtle-background: #a3acfd;
///
/// color combos color-combos-locked-bold-foreground
///
-$sd-sage-color-combos-locked-bold-foreground: #eee4f6;
+$sd-sage-color-combos-locked-bold-foreground: #e0e4ff;
///
/// color combos color-combos-locked-bold-background
///
-$sd-sage-color-combos-locked-bold-background: #8e5ad8;
+$sd-sage-color-combos-locked-bold-background: #533be5;
///
/// color combos color-combos-warning-default-foreground
///
-$sd-sage-color-combos-warning-default-foreground: #c56a02;
+$sd-sage-color-combos-warning-default-foreground: #db7303;
///
/// color combos color-combos-warning-default-foreground-accent
///
-$sd-sage-color-combos-warning-default-foreground-accent: #8c3b08;
+$sd-sage-color-combos-warning-default-foreground-accent: #451902;
///
/// color combos color-combos-warning-default-background
///
-$sd-sage-color-combos-warning-default-background: #fef8e1;
+$sd-sage-color-combos-warning-default-background: #fff3c6;
///
/// color combos color-combos-warning-default-background-accent
///
-$sd-sage-color-combos-warning-default-background-accent: #fad980;
+$sd-sage-color-combos-warning-default-background-accent: #fed04b;
///
/// color combos color-combos-warning-default-icon-background-accent
///
-$sd-sage-color-combos-warning-default-icon-background-accent: #c56a02;
+$sd-sage-color-combos-warning-default-icon-background-accent: #db7303;
///
/// color combos color-combos-warning-subtle-foreground
///
-$sd-sage-color-combos-warning-subtle-foreground: #c56a02;
+$sd-sage-color-combos-warning-subtle-foreground: #db7303;
///
/// color combos color-combos-warning-subtle-foreground-accent
///
-$sd-sage-color-combos-warning-subtle-foreground-accent: #ffc505;
+$sd-sage-color-combos-warning-subtle-foreground-accent: #fdbb21;
///
/// color combos color-combos-warning-subtle-background
///
-$sd-sage-color-combos-warning-subtle-background: #ffc505;
+$sd-sage-color-combos-warning-subtle-background: #fdbb21;
///
/// color combos color-combos-warning-bold-foreground
///
@@ -1122,47 +2216,47 @@ $sd-sage-color-combos-warning-bold-foreground: #fff;
///
/// color combos color-combos-warning-bold-background
///
-$sd-sage-color-combos-warning-bold-background: #ffc505;
+$sd-sage-color-combos-warning-bold-background: #fdbb21;
///
/// color combos color-combos-danger-default-foreground
///
-$sd-sage-color-combos-danger-default-foreground: #99221e;
+$sd-sage-color-combos-danger-default-foreground: #991b1b;
///
/// color combos color-combos-danger-default-foreground-accent
///
-$sd-sage-color-combos-danger-default-foreground-accent: #5e0d0d;
+$sd-sage-color-combos-danger-default-foreground-accent: #572627;
///
/// color combos color-combos-danger-default-background
///
-$sd-sage-color-combos-danger-default-background: #fff0f0;
+$sd-sage-color-combos-danger-default-background: #fee2e1;
///
/// color combos color-combos-danger-default-background-accent
///
-$sd-sage-color-combos-danger-default-background-accent: #fdb0aa;
+$sd-sage-color-combos-danger-default-background-accent: #fda5a5;
///
/// color combos color-combos-danger-default-icon-background-accent
///
-$sd-sage-color-combos-danger-default-icon-background-accent: #cf3c32;
+$sd-sage-color-combos-danger-default-icon-background-accent: #ef4444;
///
/// color combos color-combos-danger-subtle-foreground
///
-$sd-sage-color-combos-danger-subtle-foreground: #99221e;
+$sd-sage-color-combos-danger-subtle-foreground: #991b1b;
///
/// color combos color-combos-danger-subtle-foreground-accent
///
-$sd-sage-color-combos-danger-subtle-foreground-accent: #fdb0aa;
+$sd-sage-color-combos-danger-subtle-foreground-accent: #fda5a5;
///
/// color combos color-combos-danger-subtle-background
///
-$sd-sage-color-combos-danger-subtle-background: #fdb0aa;
+$sd-sage-color-combos-danger-subtle-background: #fda5a5;
///
/// color combos color-combos-danger-bold-foreground
///
-$sd-sage-color-combos-danger-bold-foreground: #fff0f0;
+$sd-sage-color-combos-danger-bold-foreground: #fee2e1;
///
/// color combos color-combos-danger-bold-background
///
-$sd-sage-color-combos-danger-bold-background: #fdb0aa;
+$sd-sage-color-combos-danger-bold-background: #fda5a5;
///
/// color combos color-combos-primary-default-foreground
///
@@ -1174,7 +2268,7 @@ $sd-sage-color-combos-primary-default-foreground-accent: #fff;
///
/// color combos color-combos-primary-default-background
///
-$sd-sage-color-combos-primary-default-background: #8ecafb;
+$sd-sage-color-combos-primary-default-background: #92c5fd;
///
/// color combos color-combos-primary-subtle-foreground
///
@@ -1186,7 +2280,7 @@ $sd-sage-color-combos-primary-subtle-foreground-accent: #fff;
///
/// color combos color-combos-primary-subtle-background
///
-$sd-sage-color-combos-primary-subtle-background: #8ecafb;
+$sd-sage-color-combos-primary-subtle-background: #92c5fd;
///
/// color combos color-combos-primary-bold-foreground
///
@@ -1194,7 +2288,7 @@ $sd-sage-color-combos-primary-bold-foreground: #fff;
///
/// color combos color-combos-primary-bold-background
///
-$sd-sage-color-combos-primary-bold-background: #8ecafb;
+$sd-sage-color-combos-primary-bold-background: #92c5fd;
///
/// Map for color combos
@@ -1352,37 +2446,49 @@ $sd-sage-color-combos: (
// Static vars for color core
//
///
+/// color core color-core-blue
+///
+$sd-sage-color-core-blue: #2463eb;
+///
+/// color core color-core-green
+///
+$sd-sage-color-core-green: #079250;
+///
+/// color core color-core-mercury
+///
+$sd-sage-color-core-mercury: #ff3e15;
+///
/// color core color-core-primary
///
-$sd-sage-color-core-primary: #0072ef;
+$sd-sage-color-core-primary: #2463eb;
///
/// color core color-core-sage
///
-$sd-sage-color-core-sage: #23856d;
+$sd-sage-color-core-sage: #079250;
///
/// color core color-core-yellow
///
-$sd-sage-color-core-yellow: #ffc505;
+$sd-sage-color-core-yellow: #fdbb21;
///
/// color core color-core-red
///
-$sd-sage-color-core-red: #cf3c32;
+$sd-sage-color-core-red: #ef4444;
///
/// color core color-core-orange
///
-$sd-sage-color-core-orange: #fb7e09;
+$sd-sage-color-core-orange: #ff3e15;
///
/// color core color-core-purple
///
-$sd-sage-color-core-purple: #8e5ad8;
+$sd-sage-color-core-purple: #533be5;
///
/// color core color-core-charcoal
///
-$sd-sage-color-core-charcoal: #43474b;
+$sd-sage-color-core-charcoal: #4d4d4c;
///
/// color core color-core-grey
///
-$sd-sage-color-core-grey: #8d939a;
+$sd-sage-color-core-grey: #828180;
///
/// color core color-core-white
///
@@ -1396,6 +2502,9 @@ $sd-sage-color-core-black: #000;
/// Map for color core
///
$sd-sage-color-core: (
+ blue: $sd-sage-color-core-blue,
+ green: $sd-sage-color-core-green,
+ mercury: $sd-sage-color-core-mercury,
primary: $sd-sage-color-core-primary,
sage: $sd-sage-color-core-sage,
yellow: $sd-sage-color-core-yellow,
diff --git a/packages/sage-assets/lib/stylesheets/global/_reboot.scss b/packages/sage-assets/lib/stylesheets/global/_reboot.scss
index 337467f95d..a4a12e8009 100644
--- a/packages/sage-assets/lib/stylesheets/global/_reboot.scss
+++ b/packages/sage-assets/lib/stylesheets/global/_reboot.scss
@@ -33,9 +33,9 @@ section {
body {
margin: 0;
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
- "Helvetica Neue", "Arial", "Noto Sans", sans-serif, "Apple Color Emoji",
- "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+ font-family: "Inter", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", sans-serif,
+ "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+ font-feature-settings: "liga" 1, "calt" 1; /* fix for Chrome */
font-size: 1rem;
font-weight: 400;
line-height: 1.5; /* NOTE: line-height must be '1.5' to avoid conflicts with Ladera */
@@ -57,10 +57,17 @@ h2,
h3,
h4,
h5,
-h6 {
+h6,
+.t-sage-heading-1,
+.t-sage-heading-2,
+.t-sage-heading-3,
+.t-sage-heading-4,
+.t-sage-heading-5,
+.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 ;
}
p {
@@ -172,7 +179,7 @@ pre,
code,
kbd,
samp {
- font-family: "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;
+ font-family: "ui-monospace", "Menlo", "Consolas", "Liberation Mono", monospace;
font-size: 1em;
}
diff --git a/packages/sage-assets/lib/stylesheets/layout/_frame.scss b/packages/sage-assets/lib/stylesheets/layout/_frame.scss
index 7592747095..cb97fe45c4 100644
--- a/packages/sage-assets/lib/stylesheets/layout/_frame.scss
+++ b/packages/sage-assets/lib/stylesheets/layout/_frame.scss
@@ -109,6 +109,22 @@ $-sage-frame-borders: (
default: sage-border(),
);
+// Border radii options
+// Generally aligned to border tokens plus a `none` option
+$-sage-frame-box-shadows: (
+ none: 0,
+ sm: sage-shadow(sm),
+ md: sage-shadow(md),
+ lg: sage-shadow(lg),
+ modal: sage-shadow(modal),
+ 050: sage-shadow(050),
+ 100: sage-shadow(100),
+ 200: sage-shadow(200),
+ 300: sage-shadow(300),
+ 400: sage-shadow(400),
+ 500: sage-shadow(500),
+);
+
// Directions that map to `flex-direction`
// named to resemble the auto layout settings in Figma
$-sage-frame-directions: (
@@ -216,6 +232,7 @@ $-sage-frame-wrap: none;
@each $-key, $-val in $-sage-frame-borders {
.sage-frame--border-#{$-key} {
+ background-color: sage-color(white);
border: #{$-val};
}
}
@@ -226,6 +243,12 @@ $-sage-frame-wrap: none;
}
}
+@each $-key, $-val in $-sage-frame-box-shadows {
+ .sage-frame--box-shadow-#{$-key} {
+ box-shadow: #{$-val};
+ }
+}
+
@each $-key, $-val in $-sage-frame-directions {
.sage-frame--direction-#{$-key} {
flex-direction: #{$-val};
@@ -242,7 +265,7 @@ $-sage-frame-wrap: none;
.sage-frame--gap-#{$-key} {
gap: #{$-val};
}
-
+
.sage-frame--padding-#{$-key} {
padding: #{$_val};
}
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/_font_size.scss b/packages/sage-assets/lib/stylesheets/tokens/_font_size.scss
index 92341c0c00..1f80f1211a 100644
--- a/packages/sage-assets/lib/stylesheets/tokens/_font_size.scss
+++ b/packages/sage-assets/lib/stylesheets/tokens/_font_size.scss
@@ -12,13 +12,14 @@
///
$sage-font-sizes: (
xs: rem(12px),
- sm: rem(14px),
- md: rem(16px),
- lg: rem(18px),
- xl: rem(24px),
- 2xl: rem(28px),
- 3xl: rem(32px),
- 4xl: rem(40px)
+ sm: rem(12px),
+ md: rem(14px),
+ lg: rem(16px),
+ xl: rem(18px),
+ 2xl: rem(20px),
+ 3xl: rem(22px),
+ 4xl: rem(26px),
+ 5xl: rem(28px)
);
///
diff --git a/packages/sage-assets/lib/stylesheets/tokens/_font_weight.scss b/packages/sage-assets/lib/stylesheets/tokens/_font_weight.scss
index 6e9e108ab9..cf1a7ff951 100644
--- a/packages/sage-assets/lib/stylesheets/tokens/_font_weight.scss
+++ b/packages/sage-assets/lib/stylesheets/tokens/_font_weight.scss
@@ -24,5 +24,6 @@ $sage-font-weights: (
///
@function sage-font-weight($key: regular) {
$value: map-get($sage-font-weights, $key);
+
@return $value;
}
diff --git a/packages/sage-assets/lib/stylesheets/tokens/_letter_spacing.scss b/packages/sage-assets/lib/stylesheets/tokens/_letter_spacing.scss
index fcf41051ff..a40549f686 100644
--- a/packages/sage-assets/lib/stylesheets/tokens/_letter_spacing.scss
+++ b/packages/sage-assets/lib/stylesheets/tokens/_letter_spacing.scss
@@ -9,9 +9,15 @@
/// Sage letter spacing/kerning token
///
$sage-letter-spacings: (
- xs: rem(-0.15px),
- sm: rem(-0.5px),
- md: rem(-0.6px),
+ xs: rem(0),
+ sm: rem(0),
+ md: rem(-0.16px),
+ lg: rem(0.16px),
+ xl: rem(0.18px),
+ 2xl: rem(0.2px),
+ 3xl: rem(0.22px),
+ 4xl: rem(0.24px),
+ 5xl: rem(0.26px),
);
///
diff --git a/packages/sage-assets/lib/stylesheets/tokens/_line_height.scss b/packages/sage-assets/lib/stylesheets/tokens/_line_height.scss
index 2982bc9682..287b7f6683 100644
--- a/packages/sage-assets/lib/stylesheets/tokens/_line_height.scss
+++ b/packages/sage-assets/lib/stylesheets/tokens/_line_height.scss
@@ -10,14 +10,15 @@
/// See core/_typography.scss for where these are primarily implemented.
///
$sage-line-heights: (
- xs: sage-baseline(4), // 16
- sm: sage-baseline(5), // 20
- md: sage-baseline(6), // 24
- lg: sage-baseline(7), // 28
- xl: sage-baseline(8), // 32
- 2xl: sage-baseline(10), // 40
- 3xl: sage-baseline(12), // 48
- 4xl: sage-baseline(15), // 60
+ xs: rem(18px),
+ sm: rem(18px),
+ md: rem(20px),
+ lg: rem(20px),
+ xl: rem(22px),
+ 2xl: rem(26px),
+ 3xl: rem(28px),
+ 4xl: rem(32px),
+ 5xl: rem(36px),
);
///
diff --git a/packages/sage-assets/lib/stylesheets/tokens/_shadow.scss b/packages/sage-assets/lib/stylesheets/tokens/_shadow.scss
index 700bf9b01b..f4f15b80c5 100644
--- a/packages/sage-assets/lib/stylesheets/tokens/_shadow.scss
+++ b/packages/sage-assets/lib/stylesheets/tokens/_shadow.scss
@@ -9,10 +9,17 @@
/// Sage shadows token
///
$sage-shadows: (
- sm: (0 2px 4px rgba(sage-color(black), 0.12), 0 0 2px rgba(sage-color(black), 0.08)),
- md: (0 8px 14px rgba(sage-color(black), 0.16), 0 0 4px rgba(sage-color(black), 0.08)),
- lg: (0 8px 40px rgba(sage-color(black), 0.24)),
- modal: (0 8px 40px rgba(sage-color(black), 0.24), 0 0 4px rgba(sage-color(black), 0.1)),
+ 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-assets/lib/stylesheets/tokens/_type_specs.scss b/packages/sage-assets/lib/stylesheets/tokens/_type_specs.scss
index 5e7e9743ff..2d643b3d25 100644
--- a/packages/sage-assets/lib/stylesheets/tokens/_type_specs.scss
+++ b/packages/sage-assets/lib/stylesheets/tokens/_type_specs.scss
@@ -7,21 +7,63 @@
// Base specs to avoid repetition
$-t-base-spec: (
- kerning: sage-letter-spacing(xs),
+ kerning: sage-letter-spacing(sm),
responsive: true,
type-pairing: body,
weight: sage-font-weight(),
);
-$-t-body-small-spec: (
+$-t-body-xsmall-spec: (
kerning: sage-letter-spacing(xs),
responsive: true,
+ type-pairing: body-xs,
+ weight: sage-font-weight(),
+);
+$-t-body-small-spec: (
+ kerning: sage-letter-spacing(sm),
+ responsive: true,
type-pairing: body-sm,
weight: sage-font-weight(),
);
-$-t-body-xsmall-spec: (
- kerning: sage-letter-spacing(xs),
+$-t-body-medium-spec: (
+ kerning: sage-letter-spacing(md),
responsive: true,
- type-pairing: body-xs,
+ type-pairing: body-md,
+ weight: sage-font-weight(),
+);
+$-t-body-large-spec: (
+ kerning: sage-letter-spacing(lg),
+ responsive: true,
+ type-pairing: body-lg,
+ weight: sage-font-weight(),
+);
+$-t-body-xlarge-spec: (
+ kerning: sage-letter-spacing(xl),
+ responsive: true,
+ type-pairing: body-xl,
+ weight: sage-font-weight(),
+);
+$-t-body-2xlarge-spec: (
+ kerning: sage-letter-spacing(2xl),
+ responsive: true,
+ type-pairing: body-2xl,
+ weight: sage-font-weight(),
+);
+$-t-body-3xlarge-spec: (
+ kerning: sage-letter-spacing(3xl),
+ responsive: true,
+ type-pairing: body-3xl,
+ weight: sage-font-weight(),
+);
+$-t-body-4xlarge-spec: (
+ kerning: sage-letter-spacing(4xl),
+ responsive: true,
+ type-pairing: body-4xl,
+ weight: sage-font-weight(),
+);
+$-t-body-5xlarge-spec: (
+ kerning: sage-letter-spacing(5xl),
+ responsive: true,
+ type-pairing: body-5xl,
weight: sage-font-weight(),
);
@@ -38,38 +80,40 @@ $-t-body-xsmall-spec: (
$sage-type-specs: (
// Headings
"heading-1": (
- kerning: sage-letter-spacing(md),
+ kerning: sage-letter-spacing(5xl),
responsive: true,
type-pairing: h1,
- weight: sage-font-weight(bold),
+ weight: sage-font-weight(semibold),
),
"heading-2": (
- kerning: sage-letter-spacing(md),
+ kerning: sage-letter-spacing(4xl),
responsive: true,
type-pairing: h2,
- weight: sage-font-weight(bold),
+ weight: sage-font-weight(semibold),
),
"heading-3": (
- kerning: sage-letter-spacing(xs),
+ kerning: sage-letter-spacing(3xl),
responsive: true,
type-pairing: h3,
- weight: sage-font-weight(bold),
+ weight: sage-font-weight(semibold),
),
"heading-4": (
- kerning: sage-letter-spacing(xs),
+ kerning: sage-letter-spacing(2xl),
responsive: true,
type-pairing: h4,
weight: sage-font-weight(semibold),
),
"heading-5": (
+ kerning: sage-letter-spacing(xl),
responsive: true,
type-pairing: h5,
- weight: sage-font-weight(semibold),
+ weight: sage-font-weight(medium),
),
"heading-6": (
+ kerning: sage-letter-spacing(lg),
responsive: true,
type-pairing: h6,
- weight: sage-font-weight(semibold),
+ weight: sage-font-weight(medium),
),
"nav": (
responsive: false,
diff --git a/packages/sage-assets/lib/stylesheets/utilities/_spacer.scss b/packages/sage-assets/lib/stylesheets/utilities/_spacer.scss
index 56baf6f4c8..48631dc9ca 100644
--- a/packages/sage-assets/lib/stylesheets/utilities/_spacer.scss
+++ b/packages/sage-assets/lib/stylesheets/utilities/_spacer.scss
@@ -4,22 +4,30 @@
/// @group sage
////
+$css-property-map: (
+ top: block-start,
+ right: inline-end,
+ bottom: block-end,
+ left: inline-start
+);
@each $-name, $-value in $sage-spacings {
$suffix: "-#{$-name}";
-
+
@if $-name == md {
$suffix: "";
}
-
+
@each $-box-side in (
top,
right,
bottom,
left
) {
+ $css-logical-property: map-get($css-property-map, $-box-side);
+
.sage-spacer-#{$-box-side}#{$suffix} {
- margin-#{$-box-side}: $-value;
+ margin-#{$css-logical-property}: $-value;
}
}
}
diff --git a/packages/sage-react/lib/Card/Card.story.jsx b/packages/sage-react/lib/Card/Card.story.jsx
index 8361f78b1c..7d8a1c8200 100644
--- a/packages/sage-react/lib/Card/Card.story.jsx
+++ b/packages/sage-react/lib/Card/Card.story.jsx
@@ -8,6 +8,8 @@ import { Link } from '../Link';
import { Card } from './Card';
import { Frame } from '../Frame';
+import placeholderImg from '../../public/CardPlaceholderLarge.png';
+
export default {
title: 'Sage/Card',
component: Card,
@@ -122,7 +124,7 @@ Default.args = {
Figure (with side bleed)
-
Divider
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/Choice/Choice.story.jsx b/packages/sage-react/lib/Choice/Choice.story.jsx
index 1c7032b176..1279725dfd 100644
--- a/packages/sage-react/lib/Choice/Choice.story.jsx
+++ b/packages/sage-react/lib/Choice/Choice.story.jsx
@@ -3,6 +3,7 @@ import { selectArgs } from '../story-support/helpers';
import { SageTokens } from '../configs';
import { Avatar } from '../Avatar';
import { Choice } from './Choice';
+import placeholderImg from '../../public/CardPlaceholderSmall.png';
// Default Sandbox
export default {
@@ -113,7 +114,7 @@ export const WiredIcon = () => {
export const Graphic = () => (
(
export const LinkText = () => (
-
+
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 e98bb81e1f..21331d83ca 100644
--- a/packages/sage-react/lib/EmptyState/EmptyState.jsx
+++ b/packages/sage-react/lib/EmptyState/EmptyState.jsx
@@ -4,7 +4,7 @@ import classnames from 'classnames';
import { SageTokens } from '../configs';
import { Button } from '../Button';
import { Icon } from '../Icon';
-import { EMPTY_STATE_SCOPES } from './configs';
+import { EMPTY_STATE_SIZES } from './configs';
export const EmptyState = ({
actions,
@@ -12,7 +12,9 @@ export const EmptyState = ({
children,
graphic,
icon,
+ backgroundColor,
scope,
+ size,
text,
title,
titleTag,
@@ -23,7 +25,7 @@ export const EmptyState = ({
'sage-empty-state',
{
'sage-empty-state--center': centerVertical,
- [`sage-empty-state--${scope}`]: scope,
+ [`sage-empty-state--${size}`]: size,
},
);
@@ -39,7 +41,19 @@ export const EmptyState = ({
{graphic}
)}
- {icon && (
+
+ )}
{title && (
@@ -59,7 +73,10 @@ export const EmptyState = ({
)}
{actions && (
-
+
{actions}
@@ -75,7 +92,8 @@ export const EmptyState = ({
);
};
-EmptyState.SCOPES = EMPTY_STATE_SCOPES;
+EmptyState.SIZES = EMPTY_STATE_SIZES;
+EmptyState.SCOPES = EMPTY_STATE_SIZES;
EmptyState.defaultProps = {
actions: null,
@@ -83,7 +101,9 @@ EmptyState.defaultProps = {
children: null,
graphic: null,
icon: null,
- scope: EmptyState.SCOPES.DEFAULT,
+ backgroundColor: null,
+ scope: EmptyState.SIZES.DEFAULT,
+ size: EmptyState.SIZES.DEFAULT,
text: null,
title: null,
titleTag: 'h2',
@@ -91,14 +111,52 @@ EmptyState.defaultProps = {
};
EmptyState.propTypes = {
+ /**
+ * Slot into which buttons or other actions can be placed.
+ */
actions: PropTypes.node,
+ /**
+ * If true, the Empty State will be visually centered inside the entire page context.
+ */
centerVertical: PropTypes.bool,
+ /**
+ * The content to be rendered within the Empty State.
+ */
children: PropTypes.node,
+ /**
+ * Adds a graphic above the content.
+ */
graphic: PropTypes.node,
+ /**
+ * Adds an icon above the content.
+ */
icon: PropTypes.oneOf(Object.values(SageTokens.ICONS)),
- scope: PropTypes.oneOf(Object.values(EmptyState.SCOPES)),
+ /**
+ * Sets the background color of the icon container. Defaults to Mercury 30
+ */
+ backgroundColor: PropTypes.string,
+ /**
+ * Sets the scope for the Empty State. Deprecated.
+ */
+ scope: PropTypes.oneOf(Object.values(EmptyState.SIZES)),
+ /**
+ * The size and context of the Empty State.
+ */
+ size: PropTypes.oneOf(Object.values(EmptyState.SIZES)),
+ /**
+ * Sets the text for the Empty State.
+ */
text: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+ /**
+ * Sets the title for the Empty State.
+ */
title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+ /**
+ * Sets which HTML heading tag to use on the title.
+ */
titleTag: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']),
+ /**
+ * Slot into which video cards or other media can be placed.
+ */
video: PropTypes.node,
};
diff --git a/packages/sage-react/lib/EmptyState/EmptyState.story.jsx b/packages/sage-react/lib/EmptyState/EmptyState.story.jsx
deleted file mode 100644
index 23c7bd7b41..0000000000
--- a/packages/sage-react/lib/EmptyState/EmptyState.story.jsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import React from 'react';
-import { selectArgs } from '../story-support/helpers';
-import { Button } from '../Button';
-import { SageTokens } from '../configs';
-import { EmptyState } from './EmptyState';
-
-export default {
- title: 'Sage/EmptyState',
- component: EmptyState,
- // displays description on Docs tab
- parameters: {
- docs: {
- description: {
- component: 'The Empty State is displayed for main application features that have never been interacted with before. The Empty State is also used for smaller features in the app that primarily focus on data entry and have no data to show.'
- },
- },
- },
- argTypes: {
- ...selectArgs({
- icon: SageTokens.ICONS,
- scope: EmptyState.SCOPES
- })
- },
- args: {
- actions: (
- <>
-
- Lorem ipsum
-
-
- ),
- icon: SageTokens.ICONS.GEAR,
- text: 'Text Here',
- title: 'Title Here'
- }
-};
-
-const Template = (args) =>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Elit arcu volutpat cursus ultricies ac, ultricies.
- Platea sed nibh molestie ut.
-
- ),
- title: 'Create your first Email Campaign',
- titleTag: 'h1',
- children: null,
- actions: (
- <>
- Add Email Campaign
- Link
-
- )
-};
diff --git a/packages/sage-react/lib/EmptyState/EmptyState.story.mdx b/packages/sage-react/lib/EmptyState/EmptyState.story.mdx
new file mode 100644
index 0000000000..d634cc0379
--- /dev/null
+++ b/packages/sage-react/lib/EmptyState/EmptyState.story.mdx
@@ -0,0 +1,94 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
+import { Button } from '../Button';
+import { SageTokens } from '../configs';
+import { EmptyState } from './EmptyState';
+
+import placeholderImg from '../../public/CardPlaceholderLarge.png';
+
+
+
+
+ Add Email Campaign
+ Link
+
+ )}
+ icon={SageTokens.ICONS.PEN}
+ title="Create your first Email Campaign"
+ titleTag="h1"
+ text={(
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Elit arcu volutpat cursus ultricies ac, ultricies.
+ Platea sed nibh molestie ut.
+
)}
+ />
+
+
+
+### Compact
+
+
+
+
+ Add Email Campaign
+ Link
+
+ )}
+ icon={SageTokens.ICONS.PEN}
+ size={EmptyState.SIZES.COMPACT}
+ title="Create your first Email Campaign"
+ titleTag="h1"
+ text={(
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Elit arcu volutpat cursus ultricies ac, ultricies.
+ Platea sed nibh molestie ut.
+
)}
+ />
+
+
+
+### With Graphic
+
+
+
+
+ Add Email Campaign
+ Link
+
+ )}
+ graphic={(
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Elit arcu volutpat cursus ultricies ac, ultricies.
+ Platea sed nibh molestie ut.
+
)}
+ />
+
+
diff --git a/packages/sage-react/lib/EmptyState/configs.js b/packages/sage-react/lib/EmptyState/configs.js
index 6550148d23..75df4b370d 100644
--- a/packages/sage-react/lib/EmptyState/configs.js
+++ b/packages/sage-react/lib/EmptyState/configs.js
@@ -1,5 +1,4 @@
-export const EMPTY_STATE_SCOPES = {
+export const EMPTY_STATE_SIZES = {
DEFAULT: null,
- PAGE: 'page',
COMPACT: 'compact',
};
diff --git a/packages/sage-react/lib/Frame/Frame.jsx b/packages/sage-react/lib/Frame/Frame.jsx
index dd0e9c8b48..cf9a153ab9 100644
--- a/packages/sage-react/lib/Frame/Frame.jsx
+++ b/packages/sage-react/lib/Frame/Frame.jsx
@@ -6,6 +6,7 @@ import {
FRAME_ALIGNMENTS,
FRAME_BORDERS,
FRAME_BORDER_RADII,
+ FRAME_BOX_SHADOWS,
FRAME_DIRECTIONS,
FRAME_SPACINGS,
FRAME_WIDTHS,
@@ -19,6 +20,7 @@ export const Frame = ({
background,
border,
borderRadius,
+ boxShadow,
direction,
gap,
maxWidth,
@@ -49,6 +51,7 @@ export const Frame = ({
[`sage-frame--background-${background}`]: background && !hasCustomBackground,
[`sage-frame--border-${border}`]: border,
[`sage-frame--border-radius-${borderRadius}`]: borderRadius,
+ [`sage-frame--box-shadow-${boxShadow}`]: boxShadow,
[`sage-frame--direction-${direction}`]: direction,
[`sage-frame--gap-${gap}`]: gap,
[`sage-frame--padding-${padding}`]: padding,
@@ -98,6 +101,7 @@ export const Frame = ({
Frame.ALIGNMENTS = FRAME_ALIGNMENTS;
Frame.BORDERS = FRAME_BORDERS;
+Frame.BOX_SHADOWS = FRAME_BOX_SHADOWS;
Frame.BORDER_RADII = FRAME_BORDER_RADII;
Frame.DIRECTIONS = FRAME_DIRECTIONS;
Frame.GAPS = FRAME_SPACINGS;
@@ -110,6 +114,7 @@ Frame.defaultProps = {
background: null,
border: null,
borderRadius: null,
+ boxShadow: null,
children: null,
className: '',
direction: FRAME_DIRECTIONS.VERTICAL,
@@ -133,6 +138,7 @@ Frame.propTypes = {
]),
border: PropTypes.oneOf(Object.values(Frame.BORDERS)),
borderRadius: PropTypes.oneOf(Object.values(Frame.BORDER_RADII)),
+ boxShadow: PropTypes.oneOf(Object.values(Frame.BOX_SHADOWS)),
direction: PropTypes.oneOf(Object.values(Frame.DIRECTIONS)),
gap: PropTypes.oneOf(Object.values(Frame.GAPS)),
maxWidth: PropTypes.oneOfType([
diff --git a/packages/sage-react/lib/Frame/Frame.story.jsx b/packages/sage-react/lib/Frame/Frame.story.jsx
index c9d1458d37..9cc0d74792 100644
--- a/packages/sage-react/lib/Frame/Frame.story.jsx
+++ b/packages/sage-react/lib/Frame/Frame.story.jsx
@@ -4,6 +4,8 @@ import { SageClassnames, SageTokens } from '../configs';
import { Button, Label, Property } from '..';
import { Frame } from './Frame';
+import placeholderImg from '../../public/CardPlaceholderLarge.png';
+
export default {
title: 'Sage/Frame',
component: Frame,
@@ -82,6 +84,18 @@ export const BorderedBox = () => (
);
+export const BoxShadow = () => (
+ Galinti Marcus
+ galinti@example.com
+ Member since 2022
+
+);
+
export const NestingFrames = () => (
Lorem ipsum dolor sit
-
+
Consectetur adipiscing elit
@@ -195,7 +209,7 @@ export const CustomBlock = () => (
+
All payments
40
-
+
successful payments
diff --git a/packages/sage-react/lib/Frame/configs.js b/packages/sage-react/lib/Frame/configs.js
index 03bd68fae5..6ff087d163 100644
--- a/packages/sage-react/lib/Frame/configs.js
+++ b/packages/sage-react/lib/Frame/configs.js
@@ -30,6 +30,21 @@ export const FRAME_BORDERS = {
DEFAULT: 'default',
};
+// Keep in sync with `packages/sage-assets/lib/stylesheets/components/_frame.scss`
+export const FRAME_BOX_SHADOWS = {
+ NONE: 'none',
+ SM: 'sm',
+ MD: 'md',
+ LG: 'lg',
+ MODAL: 'modal',
+ '050': '050',
+ 100: '100',
+ 200: '200',
+ 300: '300',
+ 400: '400',
+ 500: '500',
+};
+
// Keep in sync with `packages/sage-assets/lib/stylesheets/components/_frame.scss`
export const FRAME_BORDER_RADII = {
NONE: 'none',
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/List/List.story.jsx b/packages/sage-react/lib/List/List.story.jsx
index 47cdc4ace6..8b34d5a877 100644
--- a/packages/sage-react/lib/List/List.story.jsx
+++ b/packages/sage-react/lib/List/List.story.jsx
@@ -9,6 +9,7 @@ import { OptionsDropdown } from '../Dropdown';
import { Property } from '../Property';
import { List } from './List';
import { ListItem } from './ListItem';
+import placeholderImg from '../../public/CardPlaceholderLarge.png';
import {
sampleItems,
sampleItemRenderer,
@@ -81,7 +82,7 @@ export const otherActionItems = () => (
>
+
+
+
+
+
+
+
)}
{(type === LOADER_TYPES.SPINNER) && (
-
+
+
+
+
+
+
+
)}
{(type === LOADER_TYPES.SUCCESS) && (
diff --git a/packages/sage-react/lib/MediaTile/MediaTile.story.jsx b/packages/sage-react/lib/MediaTile/MediaTile.story.jsx
index b2813d8450..f37175394c 100644
--- a/packages/sage-react/lib/MediaTile/MediaTile.story.jsx
+++ b/packages/sage-react/lib/MediaTile/MediaTile.story.jsx
@@ -4,6 +4,7 @@ import { selectArgs } from '../story-support/helpers';
import { Button } from '../Button';
import { Badge } from '../Badge';
import { MediaTile } from './MediaTile';
+import placeholderImg from '../../public/CardPlaceholderLarge.png';
export default {
title: 'Sage/Media Tile',
@@ -53,7 +54,7 @@ export default {
),
footer: null,
media: (
-
{subheader && (
- {subheader}
+ {subheader}
{popover && (
-
`}
@@ -380,7 +381,7 @@ A panel figure contains an image that occupies a substantive space in the panel.
-
diff --git a/packages/sage-react/lib/ProgressBar/ProgressBar.jsx b/packages/sage-react/lib/ProgressBar/ProgressBar.jsx
index 85ed0b80a4..2fce8af65e 100644
--- a/packages/sage-react/lib/ProgressBar/ProgressBar.jsx
+++ b/packages/sage-react/lib/ProgressBar/ProgressBar.jsx
@@ -81,7 +81,7 @@ ProgressBar.defaultProps = {
animate: true,
backgroundColor: null,
className: null,
- color: ProgressBar.COLORS.PRIMARY_300,
+ color: ProgressBar.COLORS.MERCURY_500,
disableTooltip: false,
displayPercent: false,
label: null,
diff --git a/packages/sage-react/lib/ProgressBar/ProgressBar.story.jsx b/packages/sage-react/lib/ProgressBar/ProgressBar.story.jsx
index 83885f6b6f..e67031c00a 100644
--- a/packages/sage-react/lib/ProgressBar/ProgressBar.story.jsx
+++ b/packages/sage-react/lib/ProgressBar/ProgressBar.story.jsx
@@ -14,7 +14,6 @@ export default {
},
},
args: {
- color: ProgressBar.COLORS.PRIMARY_300,
label: 'Cloning product',
percent: '44',
},
@@ -30,7 +29,7 @@ const Template = (args) =>
+
+
+
+
+
+
+
+
+ `;
const ATTRIBUTE_ARIA_LABEL = 'aria-label';
const ATTRIBUTE_ARIA_BUSY = 'aria-busy';
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 ab5944f264..bf918421b3 100644
--- a/style-dictionary/tokens/color/base.json
+++ b/style-dictionary/tokens/color/base.json
@@ -1,220 +1,546 @@
{
"color": {
"base": {
+ "blue": {
+ "050": {
+ "hex": { "value": "#fafcff" },
+ "code": { "value": "blue-050" },
+ "classname": { "value": "t-sage--color-blue-050" }
+ },
+ "100": {
+ "hex": { "value": "#eff6ff" },
+ "code": { "value": "blue-100" },
+ "classname": { "value": "t-sage--color-blue-100" }
+ },
+ "150": {
+ "hex": { "value": "#dbe9fe" },
+ "code": { "value": "blue-150" },
+ "classname": { "value": "t-sage--color-blue-150" }
+ },
+ "200": {
+ "hex": { "value": "#bfdbfe" },
+ "code": { "value": "blue-200" },
+ "classname": { "value": "t-sage--color-blue-200" }
+ },
+ "300": {
+ "hex": { "value": "#92c5fd" },
+ "code": { "value": "blue-300" },
+ "classname": { "value": "t-sage--color-blue-300" }
+ },
+ "400": {
+ "hex": { "value": "#60a5fa" },
+ "code": { "value": "blue-400" },
+ "classname": { "value": "t-sage--color-blue-400" }
+ },
+ "500": {
+ "hex": { "value": "#3c82f6" },
+ "code": { "value": "blue-500" },
+ "classname": { "value": "t-sage--color-blue-500" }
+ },
+ "600": {
+ "hex": { "value": "#2463eb" },
+ "code": { "value": "blue-600" },
+ "classname": { "value": "t-sage--color-blue-600" }
+ },
+ "700": {
+ "hex": { "value": "#1c4ed8" },
+ "code": { "value": "blue-700" },
+ "classname": { "value": "t-sage--color-blue-700" }
+ },
+ "800": {
+ "hex": { "value": "#1d40ae" },
+ "code": { "value": "blue-800" },
+ "classname": { "value": "t-sage--color-blue-800" }
+ },
+ "900": {
+ "hex": { "value": "#1f3a8a" },
+ "code": { "value": "blue-900" },
+ "classname": { "value": "t-sage--color-blue-900" }
+ },
+ "950": {
+ "hex": { "value": "#172554" },
+ "code": { "value": "blue-950" },
+ "classname": { "value": "t-sage--color-blue-950" }
+ }
+ },
+ "green": {
+ "050": {
+ "hex": { "value": "#fbfefc" },
+ "code": { "value": "green-050" },
+ "classname": { "value": "t-sage--color-green-050" }
+ },
+ "100": {
+ "hex": { "value": "#edfcf2" },
+ "code": { "value": "green-100" },
+ "classname": { "value": "t-sage--color-green-100" }
+ },
+ "150": {
+ "hex": { "value": "#d3f8df" },
+ "code": { "value": "green-150" },
+ "classname": { "value": "t-sage--color-green-150" }
+ },
+ "200": {
+ "hex": { "value": "#aaf0c4" },
+ "code": { "value": "green-200" },
+ "classname": { "value": "t-sage--color-green-200" }
+ },
+ "300": {
+ "hex": { "value": "#73e2a3" },
+ "code": { "value": "green-300" },
+ "classname": { "value": "t-sage--color-green-300" }
+ },
+ "400": {
+ "hex": { "value": "#3dcb7f" },
+ "code": { "value": "green-400" },
+ "classname": { "value": "t-sage--color-green-400" }
+ },
+ "500": {
+ "hex": { "value": "#17b365" },
+ "code": { "value": "green-500" },
+ "classname": { "value": "t-sage--color-green-500" }
+ },
+ "600": {
+ "hex": { "value": "#079250" },
+ "code": { "value": "green-600" },
+ "classname": { "value": "t-sage--color-green-600" }
+ },
+ "700": {
+ "hex": { "value": "#097443" },
+ "code": { "value": "green-700" },
+ "classname": { "value": "t-sage--color-green-700" }
+ },
+ "800": {
+ "hex": { "value": "#085c37" },
+ "code": { "value": "green-800" },
+ "classname": { "value": "t-sage--color-green-800" }
+ },
+ "900": {
+ "hex": { "value": "#094c2f" },
+ "code": { "value": "green-900" },
+ "classname": { "value": "t-sage--color-green-900" }
+ },
+ "950": {
+ "hex": { "value": "#052e1c" },
+ "code": { "value": "green-950" },
+ "classname": { "value": "t-sage--color-green-950" }
+ }
+ },
+ "mercury": {
+ "050": {
+ "hex": { "value": "#fffcfa" },
+ "code": { "value": "mercury-050" },
+ "classname": { "value": "t-sage--color-mercury-050" }
+ },
+ "100": {
+ "hex": { "value": "#fff3ed" },
+ "code": { "value": "mercury-100" },
+ "classname": { "value": "t-sage--color-mercury-100" }
+ },
+ "150": {
+ "hex": { "value": "#ffe3d4" },
+ "code": { "value": "mercury-150" },
+ "classname": { "value": "t-sage--color-mercury-150" }
+ },
+ "200": {
+ "hex": { "value": "#ffc3a8" },
+ "code": { "value": "mercury-200" },
+ "classname": { "value": "t-sage--color-mercury-200" }
+ },
+ "300": {
+ "hex": { "value": "#ff9970" },
+ "code": { "value": "mercury-300" },
+ "classname": { "value": "t-sage--color-mercury-300" }
+ },
+ "400": {
+ "hex": { "value": "#ff6337" },
+ "code": { "value": "mercury-400" },
+ "classname": { "value": "t-sage--color-mercury-400" }
+ },
+ "500": {
+ "hex": { "value": "#ff3e15" },
+ "code": { "value": "mercury-500" },
+ "classname": { "value": "t-sage--color-mercury-500" }
+ },
+ "600": {
+ "hex": { "value": "#f11f06" },
+ "code": { "value": "mercury-600" },
+ "classname": { "value": "t-sage--color-mercury-600" }
+ },
+ "700": {
+ "hex": { "value": "#c81307" },
+ "code": { "value": "mercury-700" },
+ "classname": { "value": "t-sage--color-mercury-700" }
+ },
+ "800": {
+ "hex": { "value": "#9e110e" },
+ "code": { "value": "mercury-800" },
+ "classname": { "value": "t-sage--color-mercury-800" }
+ },
+ "900": {
+ "hex": { "value": "#7f120f" },
+ "code": { "value": "mercury-900" },
+ "classname": { "value": "t-sage--color-mercury-900" }
+ },
+ "950": {
+ "hex": { "value": "#450506" },
+ "code": { "value": "mercury-950" },
+ "classname": { "value": "t-sage--color-mercury-950" }
+ }
+ },
"primary": {
"100": {
- "hex": { "value": "#e6f4fe" },
+ "hex": { "value": "{color.base.blue.150.hex.value}" },
"code": { "value": "primary-100" },
"classname": { "value": "t-sage--color-primary-100" }
},
"200": {
- "hex": { "value": "#8ecafb" },
+ "hex": { "value": "{color.base.blue.300.hex.value}" },
"code": { "value": "primary-200" },
"classname": { "value": "t-sage--color-primary-200" }
},
"300": {
- "hex": { "value": "#0072ef" },
+ "hex": { "value": "{color.base.blue.600.hex.value}" },
"code": { "value": "primary-300" },
"classname": { "value": "t-sage--color-primary-300" }
},
"400": {
- "hex": { "value": "#054fb8" },
+ "hex": { "value": "{color.base.blue.700.hex.value}" },
"code": { "value": "primary-400" },
"classname": { "value": "t-sage--color-primary-400" }
},
"500": {
- "hex": { "value": "#07265f" },
+ "hex": { "value": "{color.base.blue.950.hex.value}" },
"code": { "value": "primary-500" },
"classname": { "value": "t-sage--color-primary-500" }
}
},
"sage": {
"100": {
- "hex": { "value": "#ddf8f0" },
+ "hex": { "value": "{color.base.green.150.hex.value}" },
"code": { "value": "sage-100" },
"classname": { "value": "t-sage--color-sage-100" }
},
"200": {
- "hex": { "value": "#86d5bc" },
+ "hex": { "value": "{color.base.green.300.hex.value}" },
"code": { "value": "sage-200" },
"classname": { "value": "t-sage--color-sage-200" }
},
"300": {
- "hex": { "value": "#23856d" },
+ "hex": { "value": "{color.base.green.600.hex.value}" },
"code": { "value": "sage-300" },
"classname": { "value": "t-sage--color-sage-300" }
},
"400": {
- "hex": { "value": "#225d53" },
+ "hex": { "value": "{color.base.green.800.hex.value}" },
"code": { "value": "sage-400" },
"classname": { "value": "t-sage--color-sage-400" }
},
"500": {
- "hex": { "value": "#183e3b" },
+ "hex": { "value": "{color.base.green.950.hex.value}" },
"code": { "value": "sage-500" },
"classname": { "value": "t-sage--color-sage-500" }
}
},
"yellow": {
+ "050": {
+ "hex": { "value": "#fffefa" },
+ "code": { "value": "yellow-050" },
+ "classname": { "value": "t-sage--color-yellow-050" }
+ },
"100": {
- "hex": { "value": "#fef8e1" },
+ "hex": { "value": "#fffbeb" },
"code": { "value": "yellow-100" },
"classname": { "value": "t-sage--color-yellow-100" }
},
+ "150": {
+ "hex": { "value": "#fff3c6" },
+ "code": { "value": "yellow-150" },
+ "classname": { "value": "t-sage--color-yellow-150" }
+ },
"200": {
- "hex": { "value": "#fad980" },
+ "hex": { "value": "#fee589" },
"code": { "value": "yellow-200" },
"classname": { "value": "t-sage--color-yellow-200" }
},
"300": {
- "hex": { "value": "#ffc505" },
+ "hex": { "value": "#fed04b" },
"code": { "value": "yellow-300" },
"classname": { "value": "t-sage--color-yellow-300" }
},
"400": {
- "hex": { "value": "#c56a02" },
+ "hex": { "value": "#fdbb21" },
"code": { "value": "yellow-400" },
"classname": { "value": "t-sage--color-yellow-400" }
},
"500": {
- "hex": { "value": "#8c3b08" },
+ "hex": { "value": "#f79a0b" },
"code": { "value": "yellow-500" },
"classname": { "value": "t-sage--color-yellow-500" }
+ },
+ "600": {
+ "hex": { "value": "#db7303" },
+ "code": { "value": "yellow-60" },
+ "classname": { "value": "t-sage--color-yellow-600" }
+ },
+ "700": {
+ "hex": { "value": "#b64f06" },
+ "code": { "value": "yellow-700" },
+ "classname": { "value": "t-sage--color-yellow-700" }
+ },
+ "800": {
+ "hex": { "value": "#943d0e" },
+ "code": { "value": "yellow-800" },
+ "classname": { "value": "t-sage--color-yellow-800" }
+ },
+ "900": {
+ "hex": { "value": "#79330e" },
+ "code": { "value": "yellow-900" },
+ "classname": { "value": "t-sage--color-yellow-900" }
+ },
+ "950": {
+ "hex": { "value": "#451902" },
+ "code": { "value": "yellow-950" },
+ "classname": { "value": "t-sage--color-yellow-950" }
}
},
"red": {
+ "050": {
+ "hex": { "value": "#fffafa" },
+ "code": { "value": "red-050" },
+ "classname": { "value": "t-sage--color-red-050" }
+ },
"100": {
- "hex": { "value": "#fff0f0" },
+ "hex": { "value": "#fef2f2" },
"code": { "value": "red-100" },
"classname": { "value": "t-sage--color-red-100" }
},
+ "150": {
+ "hex": { "value": "#fee2e1" },
+ "code": { "value": "red-150" },
+ "classname": { "value": "t-sage--color-red-150" }
+ },
"200": {
- "hex": { "value": "#fdb0aa" },
+ "hex": { "value": "#fecaca" },
"code": { "value": "red-200" },
"classname": { "value": "t-sage--color-red-200" }
},
"300": {
- "hex": { "value": "#cf3c32" },
+ "hex": { "value": "#fda5a5" },
"code": { "value": "red-300" },
"classname": { "value": "t-sage--color-red-300" }
},
"400": {
- "hex": { "value": "#99221e" },
+ "hex": { "value": "#f87171" },
"code": { "value": "red-400" },
"classname": { "value": "t-sage--color-red-400" }
},
"500": {
- "hex": { "value": "#5e0d0d" },
+ "hex": { "value": "#ef4444" },
"code": { "value": "red-500" },
"classname": { "value": "t-sage--color-red-500" }
+ },
+ "600": {
+ "hex": { "value": "#dc2625" },
+ "code": { "value": "red-600" },
+ "classname": { "value": "t-sage--color-red-600" }
+ },
+ "700": {
+ "hex": { "value": "#b91c1b" },
+ "code": { "value": "red-700" },
+ "classname": { "value": "t-sage--color-red-700" }
+ },
+ "800": {
+ "hex": { "value": "#991b1b" },
+ "code": { "value": "red-800" },
+ "classname": { "value": "t-sage--color-red-800" }
+ },
+ "900": {
+ "hex": { "value": "#7f1c1d" },
+ "code": { "value": "red-900" },
+ "classname": { "value": "t-sage--color-red-900" }
+ },
+ "950": {
+ "hex": { "value": "#572627" },
+ "code": { "value": "red-950" },
+ "classname": { "value": "t-sage--color-red-950" }
}
},
"orange": {
"100": {
- "hex": { "value": "#fef1e1" },
+ "hex": { "value": "{color.base.mercury.150.hex.value}" },
"code": { "value": "orange-100" },
"classname": { "value": "t-sage--color-orange-100" }
},
"200": {
- "hex": { "value": "#ffb36b" },
+ "hex": { "value": "{color.base.mercury.300.hex.value}" },
"code": { "value": "orange-200" },
"classname": { "value": "t-sage--color-orange-200" }
},
"300": {
- "hex": { "value": "#fb7e09" },
+ "hex": { "value": "{color.base.mercury.500.hex.value}" },
"code": { "value": "orange-300" },
"classname": { "value": "t-sage--color-orange-300" }
},
"400": {
- "hex": { "value": "#b3501e" },
+ "hex": { "value": "{color.base.mercury.800.hex.value}" },
"code": { "value": "orange-400" },
"classname": { "value": "t-sage--color-orange-400" }
},
"500": {
- "hex": { "value": "#5a260c" },
+ "hex": { "value": "{color.base.mercury.950.hex.value}" },
"code": { "value": "orange-500" },
"classname": { "value": "t-sage--color-orange-500" }
}
},
"purple": {
+ "050": {
+ "hex": { "value": "#fafbff" },
+ "code": { "value": "purple-050" },
+ "classname": { "value": "t-sage--color-purple-050" }
+ },
"100": {
- "hex": { "value": "#eee4f6" },
+ "hex": { "value": "#edf1ff" },
"code": { "value": "purple-100" },
"classname": { "value": "t-sage--color-purple-100" }
},
+ "150": {
+ "hex": { "value": "#e0e4ff" },
+ "code": { "value": "purple-150" },
+ "classname": { "value": "t-sage--color-purple-150" }
+ },
"200": {
- "hex": { "value": "#d9c2ef" },
+ "hex": { "value": "#c7cdfe" },
"code": { "value": "purple-200" },
"classname": { "value": "t-sage--color-purple-200" }
},
"300": {
- "hex": { "value": "#8e5ad8" },
+ "hex": { "value": "#a3acfd" },
"code": { "value": "purple-300" },
"classname": { "value": "t-sage--color-purple-300" }
},
"400": {
- "hex": { "value": "#50348a" },
+ "hex": { "value": "#8081f9" },
"code": { "value": "purple-400" },
"classname": { "value": "t-sage--color-purple-400" }
},
"500": {
- "hex": { "value": "#381c5e" },
+ "hex": { "value": "#6a62f2" },
"code": { "value": "purple-500" },
"classname": { "value": "t-sage--color-purple-500" }
+ },
+ "600": {
+ "hex": { "value": "#533be5" },
+ "code": { "value": "purple-600" },
+ "classname": { "value": "t-sage--color-purple-600" }
+ },
+ "700": {
+ "hex": { "value": "#4f37cb" },
+ "code": { "value": "purple-700" },
+ "classname": { "value": "t-sage--color-purple-700" }
+ },
+ "800": {
+ "hex": { "value": "#402fa4" },
+ "code": { "value": "purple-800" },
+ "classname": { "value": "t-sage--color-purple-800" }
+ },
+ "900": {
+ "hex": { "value": "#372d82" },
+ "code": { "value": "purple-900" },
+ "classname": { "value": "t-sage--color-purple-900" }
+ },
+ "950": {
+ "hex": { "value": "#221b4b" },
+ "code": { "value": "purple-950" },
+ "classname": { "value": "t-sage--color-purple-950" }
}
},
"charcoal": {
"100": {
- "hex": { "value": "#8d939a" },
+ "hex": { "value": "{color.base.grey.600.hex.value}" },
"code": { "value": "charcoal-100" },
"classname": { "value": "t-sage--color-charcoal-100" }
},
"200": {
- "hex": { "value": "#60666c" },
+ "hex": { "value": "{color.base.grey.700.hex.value}" },
"code": { "value": "charcoal-200" },
"classname": { "value": "t-sage--color-charcoal-200" }
},
"300": {
- "hex": { "value": "#43474b" },
+ "hex": { "value": "{color.base.grey.800.hex.value}" },
"code": { "value": "charcoal-300" },
"classname": { "value": "t-sage--color-charcoal-300" }
},
"400": {
- "hex": { "value": "#202327" },
+ "hex": { "value": "{color.base.grey.900.hex.value}" },
"code": { "value": "charcoal-400" },
"classname": { "value": "t-sage--color-charcoal-400" }
},
"500": {
- "hex": { "value": "#040506" },
+ "hex": { "value": "{color.base.grey.950.hex.value}" },
"code": { "value": "charcoal-500" },
"classname": { "value": "t-sage--color-charcoal-500" }
}
},
"grey": {
+ "050": {
+ "hex": { "value": "#fcfcfc" },
+ "code": { "value": "grey-050" },
+ "classname": { "value": "t-sage--color-grey-050" }
+ },
"100": {
- "hex": { "value": "#f9fafa" },
+ "hex": { "value": "#f8f8f8" },
"code": { "value": "grey-100" },
"classname": { "value": "t-sage--color-grey-100" }
},
+ "150": {
+ "hex": { "value": "#f0f0f0" },
+ "code": { "value": "grey-15" },
+ "classname": { "value": "t-sage--color-grey-150" }
+ },
"200": {
- "hex": { "value": "#f6f8f8" },
+ "hex": { "value": "#e4e4e4" },
"code": { "value": "grey-200" },
"classname": { "value": "t-sage--color-grey-200" }
},
"300": {
- "hex": { "value": "#eceeef" },
+ "hex": { "value": "#d2d1d1" },
"code": { "value": "grey-300" },
"classname": { "value": "t-sage--color-grey-300" }
},
"400": {
- "hex": { "value": "#d3d5d9" },
+ "hex": { "value": "#bbbab9" },
"code": { "value": "grey-400" },
"classname": { "value": "t-sage--color-grey-400" }
},
"500": {
- "hex": { "value": "#b5bac0" },
+ "hex": { "value": "#9b9a98" },
"code": { "value": "grey-500" },
"classname": { "value": "t-sage--color-grey-500" }
+ },
+ "600": {
+ "hex": { "value": "#828180" },
+ "code": { "value": "grey-600" },
+ "classname": { "value": "t-sage--color-grey-600" }
+ },
+ "700": {
+ "hex": { "value": "#6c6a69" },
+ "code": { "value": "grey-700" },
+ "classname": { "value": "t-sage--color-grey-700" }
+ },
+ "800": {
+ "hex": { "value": "#4d4d4c" },
+ "code": { "value": "grey-800" },
+ "classname": { "value": "t-sage--color-grey-800" }
+ },
+ "900": {
+ "hex": { "value": "#343332" },
+ "code": { "value": "grey-900" },
+ "classname": { "value": "t-sage--color-grey-900" }
+ },
+ "950": {
+ "hex": { "value": "#1a1a19" },
+ "code": { "value": "grey-950" },
+ "classname": { "value": "t-sage--color-grey-950" }
}
},
"white": {
diff --git a/style-dictionary/tokens/color/combos.json b/style-dictionary/tokens/color/combos.json
index 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 43a099971e..c50693319f 100644
--- a/style-dictionary/tokens/color/core.json
+++ b/style-dictionary/tokens/color/core.json
@@ -1,6 +1,15 @@
{
"color": {
"core": {
+ "blue": {
+ "value": "{color.base.blue.600.hex}"
+ },
+ "green": {
+ "value": "{color.base.green.600.hex}"
+ },
+ "mercury": {
+ "value": "{color.base.mercury.500.hex}"
+ },
"primary": {
"value": "{color.base.primary.300.hex}"
},
@@ -8,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}"
diff --git a/yarn.lock b/yarn.lock
index 721931fadd..6cb384ad3d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2954,9 +2954,9 @@
integrity sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg==
"@stencil/core@^4.20.0":
- version "4.20.0"
- resolved "https://registry.yarnpkg.com/@stencil/core/-/core-4.20.0.tgz#221f2b36ab999891560449b02d6915862c435f49"
- integrity sha512-WPrTHFngvN081RY+dJPneKQLwnOFD60OMCOQGmmSHfCW0f4ujPMzzhwWU1gcSwXPWXz5O+8cBiiCaxAbJU7kAg==
+ version "4.21.0"
+ resolved "https://registry.yarnpkg.com/@stencil/core/-/core-4.21.0.tgz#6e294c57468e58dd77a458244968fe73d589b41b"
+ integrity sha512-v50lnVbzS8mpMSnEVxR+G75XpvxHKtkJaQrNPE8+/fF6Ppr5z4bcdcBhcP8LPfEW+4BZcic6VifMXRwTopc+kw==
"@storybook/addon-a11y@^6.5.9":
version "6.5.10"
+ 
<%= sage_component SageCardBlock, {} do %>
),
+ media: %(
),
+ media: %(
),
+ media: %(