@educarehq/solaris-ui 0.27.3 → 2.0.0

package/styles/token/color/_dark.scss

@@ -1,73 +1,83 @@
 @mixin solaris-dark-tokens {
-  --solaris-bg-page: #151616;
-  --solaris-surface-base: #111212;
-  --solaris-surface-subtle: #222324;
-  --solaris-surface-muted: #333435;
-  --solaris-surface-raised: #202123;
-  --solaris-surface-reverse: #f2f5fb;
-  --solaris-surface-reverse-subtle: #dadada;
-  --solaris-surface-reverse-muted: #cdcdcd;
-  --solaris-backdrop: #000000bf;
+  --solaris-neutral-page: #0a0a0a;
+  --solaris-neutral-default: #171717;
+  --solaris-neutral-subtle: #1e1e1e;
+  --solaris-neutral-sunken: #262626;
+  --solaris-neutral-overlay: #171717;
+  --solaris-neutral-inverse: #f2f5fb;
+  --solaris-neutral-inverse-subtle: #dadada;
+  --solaris-neutral-inverse-muted: #cdcdcd;
+  --solaris-neutral-backdrop: #00000099;
 
-  --solaris-text-strong: #f2f5fb;
-  --solaris-text-default: #e4e6ec;
-  --solaris-text-muted: #adafb4;
-  --solaris-text-subtle: #7f8083;
-  --solaris-text-inverse: #151616;
-  --solaris-text-glass: #ffffff;
+  --solaris-neutral-text-heading: #ffffff;
+  --solaris-neutral-text-body: #f2f5fb;
+  --solaris-neutral-text-secondary: #adafb4;
+  --solaris-neutral-text-tertiary: #7f8083;
+  --solaris-neutral-text-light: #f2f5fb;
+  --solaris-neutral-text-inverse: #0a0a0a;
 
-  --solaris-border-subtle: #3b3b3c;
-  --solaris-border-default: #4a4b4d;
-  --solaris-border-strong: #626367;
-  --solaris-border-soft: #cfcfcf;
+  --solaris-neutral-border-subtle: #3b3b3c;
+  --solaris-neutral-border-default: #4a4b4d;
+  --solaris-neutral-border-strong: #626367;
 
-  --solaris-primary-base: #3f5dca;
-  --solaris-primary-hover: #467ae3;
-  --solaris-primary-active: #5280ed;
-  --solaris-primary-surface: #2b3b5a;
+  --solaris-button-group-separator-color: #4a4b4d;
+  --solaris-button-group-separator-on-solid: #dcdcdc;
+
+  --solaris-primary-solid: #3f5dca;
+  --solaris-primary-solid-hover: #467ae3;
+  --solaris-primary-solid-active: #5280ed;
+  --solaris-primary-soft: #2b3b5a;
   --solaris-primary-border: #6b92c5;
-  --solaris-primary-text: #f2f5fb;
+  --solaris-primary-foreground: #c9d8fa;
   --solaris-primary-on-solid: #f2f5fb;
 
-  --solaris-success-base: #4aba66;
-  --solaris-success-hover: #54ca6c;
-  --solaris-success-active: #4ea35e;
-  --solaris-success-surface: #2d7138;
+  --solaris-success-solid: #4aba66;
+  --solaris-success-solid-hover: #54ca6c;
+  --solaris-success-solid-active: #63d677;
+  --solaris-success-soft: #2d7138;
   --solaris-success-border: #74f688;
-  --solaris-success-text: #bce6c7;
+  --solaris-success-foreground: #bce6c7;
   --solaris-success-on-solid: #0c100c;
 
-  --solaris-warning-base: #f1df56;
-  --solaris-warning-hover: #e0c82a;
-  --solaris-warning-active: #ead746;
-  --solaris-warning-surface: #595019;
+  --solaris-warning-solid: #f1df56;
+  --solaris-warning-solid-hover: #f5e46a;
+  --solaris-warning-solid-active: #f9ec93;
+  --solaris-warning-soft: #595019;
   --solaris-warning-border: #f1e379;
-  --solaris-warning-text: #f0e48a;
+  --solaris-warning-foreground: #f0e48a;
   --solaris-warning-on-solid: #2e2a21;
 
-  --solaris-danger-base: #f4565e;
-  --solaris-danger-hover: #f7535a;
-  --solaris-danger-active: #f7878c;
-  --solaris-danger-surface: #6c2027;
+  --solaris-danger-solid: #f13645;
+  --solaris-danger-solid-hover: #f84857;
+  --solaris-danger-solid-active: #ff6b75;
+  --solaris-danger-soft: #6c2027;
   --solaris-danger-border: #ca7779;
-  --solaris-danger-text: #f9aeb2;
+  --solaris-danger-foreground: #ffb4b8;
   --solaris-danger-on-solid: #ffffff;
 
-  --solaris-info-base: #6aa7ed;
-  --solaris-info-hover: #76b0ed;
-  --solaris-info-active: #8dc5f5;
-  --solaris-info-surface: #0e1f30;
+  --solaris-info-solid: #6aa7ed;
+  --solaris-info-solid-hover: #76b0ed;
+  --solaris-info-solid-active: #8dc5f5;
+  --solaris-info-soft: #0e1f30;
   --solaris-info-border: #7c9dc3;
-  --solaris-info-text: #dfeaf8;
+  --solaris-info-foreground: #dfeaf8;
   --solaris-info-on-solid: #0e1f30;
 
-  --solaris-orange-base: #e98d16;
-  --solaris-orange-hover: #eea33b;
-  --solaris-orange-active: #f2b960;
-  --solaris-orange-surface: #2e1b04;
-  --solaris-orange-border: #663d0a;
-  --solaris-orange-text: #f5cf96;
-  --solaris-orange-on-solid: #2e1b04;
+  --solaris-accent-solid: #e98d16;
+  --solaris-accent-solid-hover: #eea33b;
+  --solaris-accent-solid-active: #f2b960;
+  --solaris-accent-soft: #2e1b04;
+  --solaris-accent-border: #663d0a;
+  --solaris-accent-foreground: #f5cf96;
+  --solaris-accent-on-solid: #2e1b04;
+
+  --solaris-violet-solid: #8e7cf0;
+  --solaris-violet-solid-hover: #9d8ff2;
+  --solaris-violet-solid-active: #b3a6f5;
+  --solaris-violet-soft: #241d4d;
+  --solaris-violet-border: #6f5bd0;
+  --solaris-violet-foreground: #cdc2ff;
+  --solaris-violet-on-solid: #ffffff;
 }
 
 [data-theme='dark'] {

package/styles/token/color/_high-contrast.scss

@@ -1,143 +1,178 @@
-[data-theme='high-contrast'],
-[data-high-contrast='true'] {
-  --solaris-bg-page: #ffffff;
-  --solaris-surface-base: #ffffff;
-  --solaris-surface-subtle: #f0f0f0;
-  --solaris-surface-muted: #e0e0e0;
-  --solaris-surface-raised: #ffffff;
-  --solaris-surface-reverse: #000000;
-  --solaris-surface-reverse-subtle: #1a1a1a;
-  --solaris-surface-reverse-muted: #333333;
-  --solaris-backdrop: #000000e2;
-
-  --solaris-text-strong: #000000;
-  --solaris-text-default: #000000;
-  --solaris-text-muted: #222222;
-  --solaris-text-subtle: #444444;
-  --solaris-text-inverse: #ffffff;
-  --solaris-text-glass: #ffffff;
-
-  --solaris-border-subtle: #666666;
-  --solaris-border-default: #888888;
-  --solaris-border-strong: #aaaaaa;
-  --solaris-border-soft: #cccccc;
-
-  --solaris-primary-base: #0000cc;
-  --solaris-primary-hover: #000099;
-  --solaris-primary-active: #000066;
-  --solaris-primary-surface: #e6e6ff;
+@mixin solaris-high-contrast-tokens {
+  --solaris-neutral-page: #ffffff;
+  --solaris-neutral-default: #ffffff;
+  --solaris-neutral-subtle: #f0f0f0;
+  --solaris-neutral-sunken: #e0e0e0;
+  --solaris-neutral-overlay: #ffffff;
+  --solaris-neutral-inverse: #000000;
+  --solaris-neutral-inverse-subtle: #1a1a1a;
+  --solaris-neutral-inverse-muted: #333333;
+  --solaris-neutral-backdrop: #000000e2;
+
+  --solaris-neutral-text-heading: #000000;
+  --solaris-neutral-text-body: #000000;
+  --solaris-neutral-text-secondary: #222222;
+  --solaris-neutral-text-tertiary: #444444;
+  --solaris-neutral-text-light: #ffffff;
+  --solaris-neutral-text-inverse: #ffffff;
+
+  --solaris-neutral-border-subtle: #666666;
+  --solaris-neutral-border-default: #888888;
+  --solaris-neutral-border-strong: #000000;
+
+  --solaris-button-group-separator-color: #888888;
+  --solaris-button-group-separator-on-solid: #cccccc;
+
+  --solaris-primary-solid: #0000cc;
+  --solaris-primary-solid-hover: #000099;
+  --solaris-primary-solid-active: #000066;
+  --solaris-primary-soft: #e6e6ff;
   --solaris-primary-border: #9999ff;
-  --solaris-primary-text: #0000aa;
+  --solaris-primary-foreground: #0000aa;
   --solaris-primary-on-solid: #ffffff;
 
-  --solaris-success-base: #006600;
-  --solaris-success-hover: #004d00;
-  --solaris-success-active: #003300;
-  --solaris-success-surface: #e6f2e6;
+  --solaris-success-solid: #006600;
+  --solaris-success-solid-hover: #004d00;
+  --solaris-success-solid-active: #003300;
+  --solaris-success-soft: #e6f2e6;
   --solaris-success-border: #99cc99;
-  --solaris-success-text: #004d00;
+  --solaris-success-foreground: #004d00;
   --solaris-success-on-solid: #ffffff;
 
-  --solaris-warning-base: #996600;
-  --solaris-warning-hover: #7a5200;
-  --solaris-warning-active: #5c3d00;
-  --solaris-warning-surface: #fff2cc;
+  --solaris-warning-solid: #996600;
+  --solaris-warning-solid-hover: #7a5200;
+  --solaris-warning-solid-active: #5c3d00;
+  --solaris-warning-soft: #fff2cc;
   --solaris-warning-border: #ffd633;
-  --solaris-warning-text: #664400;
+  --solaris-warning-foreground: #664400;
   --solaris-warning-on-solid: #ffffff;
 
-  --solaris-danger-base: #cc0000;
-  --solaris-danger-hover: #990000;
-  --solaris-danger-active: #660000;
-  --solaris-danger-surface: #ffe6e6;
+  --solaris-danger-solid: #cc0000;
+  --solaris-danger-solid-hover: #990000;
+  --solaris-danger-solid-active: #660000;
+  --solaris-danger-soft: #ffe6e6;
   --solaris-danger-border: #ff9999;
-  --solaris-danger-text: #990000;
+  --solaris-danger-foreground: #990000;
   --solaris-danger-on-solid: #ffffff;
 
-  --solaris-info-base: #0044cc;
-  --solaris-info-hover: #003399;
-  --solaris-info-active: #002266;
-  --solaris-info-surface: #e6eeff;
+  --solaris-info-solid: #0044cc;
+  --solaris-info-solid-hover: #003399;
+  --solaris-info-solid-active: #002266;
+  --solaris-info-soft: #e6eeff;
   --solaris-info-border: #99bbff;
-  --solaris-info-text: #003399;
+  --solaris-info-foreground: #003399;
   --solaris-info-on-solid: #ffffff;
 
-  --solaris-orange-base: #cc6600;
-  --solaris-orange-hover: #995200;
-  --solaris-orange-active: #663d00;
-  --solaris-orange-surface: #fff0e6;
-  --solaris-orange-border: #ffcca8;
-  --solaris-orange-text: #994d00;
-  --solaris-orange-on-solid: #ffffff;
+  --solaris-accent-solid: #cc6600;
+  --solaris-accent-solid-hover: #995200;
+  --solaris-accent-solid-active: #663d00;
+  --solaris-accent-soft: #fff0e6;
+  --solaris-accent-border: #ffcca8;
+  --solaris-accent-foreground: #994d00;
+  --solaris-accent-on-solid: #ffffff;
+
+  --solaris-violet-solid: #4b2fb8;
+  --solaris-violet-solid-hover: #3a2490;
+  --solaris-violet-solid-active: #2a1a68;
+  --solaris-violet-soft: #ece8fd;
+  --solaris-violet-border: #a68cf0;
+  --solaris-violet-foreground: #341f8a;
+  --solaris-violet-on-solid: #ffffff;
+}
+
+@mixin solaris-high-contrast-dark-tokens {
+  --solaris-neutral-page: #000000;
+  --solaris-neutral-default: #000000;
+  --solaris-neutral-subtle: #1a1a1a;
+  --solaris-neutral-sunken: #2a2a2a;
+  --solaris-neutral-overlay: #0a0a0a;
+  --solaris-neutral-inverse: #ffffff;
+  --solaris-neutral-inverse-subtle: #e8e8e8;
+  --solaris-neutral-inverse-muted: #cfcfcf;
+  --solaris-neutral-backdrop: #000000e2;
+
+  --solaris-neutral-text-heading: #ffffff;
+  --solaris-neutral-text-body: #ffffff;
+  --solaris-neutral-text-secondary: #e8e8e8;
+  --solaris-neutral-text-tertiary: #cfcfcf;
+  --solaris-neutral-text-light: #ffffff;
+  --solaris-neutral-text-inverse: #000000;
+
+  --solaris-neutral-border-subtle: #8a8a8a;
+  --solaris-neutral-border-default: #bdbdbd;
+  --solaris-neutral-border-strong: #ffffff;
+
+  --solaris-button-group-separator-color: #bdbdbd;
+  --solaris-button-group-separator-on-solid: #ffffff;
+
+  --solaris-primary-solid: #8fa8ff;
+  --solaris-primary-solid-hover: #a9bcff;
+  --solaris-primary-solid-active: #c3cfff;
+  --solaris-primary-soft: #0a1440;
+  --solaris-primary-border: #8fa8ff;
+  --solaris-primary-foreground: #dce6ff;
+  --solaris-primary-on-solid: #000000;
+
+  --solaris-success-solid: #4ade80;
+  --solaris-success-solid-hover: #6ce695;
+  --solaris-success-solid-active: #8df0ab;
+  --solaris-success-soft: #052e12;
+  --solaris-success-border: #4ade80;
+  --solaris-success-foreground: #d9fbe3;
+  --solaris-success-on-solid: #000000;
+
+  --solaris-warning-solid: #ffd60a;
+  --solaris-warning-solid-hover: #ffdd3d;
+  --solaris-warning-solid-active: #ffe470;
+  --solaris-warning-soft: #332900;
+  --solaris-warning-border: #ffd60a;
+  --solaris-warning-foreground: #ffefb0;
+  --solaris-warning-on-solid: #000000;
+
+  --solaris-danger-solid: #ff4d4d;
+  --solaris-danger-solid-hover: #ff6b6b;
+  --solaris-danger-solid-active: #ff8a8a;
+  --solaris-danger-soft: #3d0606;
+  --solaris-danger-border: #ff4d4d;
+  --solaris-danger-foreground: #ffd7d7;
+  --solaris-danger-on-solid: #000000;
+
+  --solaris-info-solid: #6aa7ed;
+  --solaris-info-solid-hover: #8dc5f5;
+  --solaris-info-solid-active: #b3d9f9;
+  --solaris-info-soft: #081826;
+  --solaris-info-border: #6aa7ed;
+  --solaris-info-foreground: #d9ecfc;
+  --solaris-info-on-solid: #000000;
+
+  --solaris-accent-solid: #ffa733;
+  --solaris-accent-solid-hover: #ffb85c;
+  --solaris-accent-solid-active: #ffca85;
+  --solaris-accent-soft: #33200a;
+  --solaris-accent-border: #ffa733;
+  --solaris-accent-foreground: #ffe3bd;
+  --solaris-accent-on-solid: #000000;
+
+  --solaris-violet-solid: #b3a6f5;
+  --solaris-violet-solid-hover: #c6bdf7;
+  --solaris-violet-solid-active: #d9d3fa;
+  --solaris-violet-soft: #1c1540;
+  --solaris-violet-border: #b3a6f5;
+  --solaris-violet-foreground: #e2dcfd;
+  --solaris-violet-on-solid: #000000;
+}
+
+[data-theme='high-contrast'],
+[data-high-contrast='true'] {
+  @include solaris-high-contrast-tokens;
+}
+
+[data-theme='high-contrast-dark'] {
+  @include solaris-high-contrast-dark-tokens;
 }
 
 @media (prefers-contrast: high) {
   :root:not([data-theme]) {
-    --solaris-bg-page: #ffffff;
-    --solaris-surface-base: #ffffff;
-    --solaris-surface-subtle: #f0f0f0;
-    --solaris-surface-muted: #e0e0e0;
-    --solaris-surface-raised: #ffffff;
-    --solaris-backdrop: #000000e2;
-
-    --solaris-text-strong: #000000;
-    --solaris-text-default: #000000;
-    --solaris-text-muted: #222222;
-    --solaris-text-subtle: #444444;
-    --solaris-text-inverse: #ffffff;
-    --solaris-text-glass: #ffffff;
-
-    --solaris-border-subtle: #666666;
-    --solaris-border-default: #888888;
-    --solaris-border-strong: #aaaaaa;
-    --solaris-border-soft: #cccccc;
-
-    --solaris-primary-base: #0000cc;
-    --solaris-primary-hover: #000099;
-    --solaris-primary-active: #000066;
-    --solaris-primary-surface: #e6e6ff;
-    --solaris-primary-border: #9999ff;
-    --solaris-primary-text: #0000aa;
-    --solaris-primary-on-solid: #ffffff;
-
-    --solaris-success-base: #006600;
-    --solaris-success-hover: #004d00;
-    --solaris-success-active: #003300;
-    --solaris-success-surface: #e6f2e6;
-    --solaris-success-border: #99cc99;
-    --solaris-success-text: #004d00;
-    --solaris-success-on-solid: #ffffff;
-
-    --solaris-warning-base: #996600;
-    --solaris-warning-hover: #7a5200;
-    --solaris-warning-active: #5c3d00;
-    --solaris-warning-surface: #fff2cc;
-    --solaris-warning-border: #ffd633;
-    --solaris-warning-text: #664400;
-    --solaris-warning-on-solid: #ffffff;
-
-    --solaris-danger-base: #cc0000;
-    --solaris-danger-hover: #990000;
-    --solaris-danger-active: #660000;
-    --solaris-danger-surface: #ffe6e6;
-    --solaris-danger-border: #ff9999;
-    --solaris-danger-text: #990000;
-    --solaris-danger-on-solid: #ffffff;
-
-    --solaris-info-base: #0044cc;
-    --solaris-info-hover: #003399;
-    --solaris-info-active: #002266;
-    --solaris-info-surface: #e6eeff;
-    --solaris-info-border: #99bbff;
-    --solaris-info-text: #003399;
-    --solaris-info-on-solid: #ffffff;
-
-    --solaris-orange-base: #cc6600;
-    --solaris-orange-hover: #995200;
-    --solaris-orange-active: #663d00;
-    --solaris-orange-surface: #fff0e6;
-    --solaris-orange-border: #ffcca8;
-    --solaris-orange-text: #994d00;
-    --solaris-orange-on-solid: #ffffff;
+    @include solaris-high-contrast-tokens;
   }
 }

package/styles/token/color/_light.scss

@@ -1,73 +1,83 @@
 @mixin solaris-light-tokens {
-  --solaris-bg-page: #ffffff;
-  --solaris-surface-base: #ffffff;
-  --solaris-surface-subtle: #f7f8fb;
-  --solaris-surface-muted: #eeeeee;
-  --solaris-surface-raised: #ffffff;
-  --solaris-surface-reverse: #16191e;
-  --solaris-surface-reverse-subtle: #222324;
-  --solaris-surface-reverse-muted: #333435;
-  --solaris-backdrop: #000000bf;
+  --solaris-neutral-page: #ffffff;
+  --solaris-neutral-default: #ffffff;
+  --solaris-neutral-subtle: #f5f6f9;
+  --solaris-neutral-sunken: #efefef;
+  --solaris-neutral-overlay: #ffffff;
+  --solaris-neutral-inverse: #16191e;
+  --solaris-neutral-inverse-subtle: #222324;
+  --solaris-neutral-inverse-muted: #333435;
+  --solaris-neutral-backdrop: #000000bf;
 
-  --solaris-text-strong: #16191e;
-  --solaris-text-default: #24262d;
-  --solaris-text-muted: #5d5f61;
-  --solaris-text-subtle: #7a7d84;
-  --solaris-text-inverse: #ffffff;
-  --solaris-text-glass: #ffffff;
+  --solaris-neutral-text-heading: #16191e;
+  --solaris-neutral-text-body: #24262d;
+  --solaris-neutral-text-secondary: #5d5f61;
+  --solaris-neutral-text-tertiary: #7a7d84;
+  --solaris-neutral-text-light: #f2f5fb;
+  --solaris-neutral-text-inverse: #ffffff;
 
-  --solaris-border-subtle: #e4e6ee;
-  --solaris-border-default: #d7d9e3;
-  --solaris-border-strong: #b9bdca;
-  --solaris-border-soft: #474747;
+  --solaris-neutral-border-subtle: #e4e6ee;
+  --solaris-neutral-border-default: #d7d9e3;
+  --solaris-neutral-border-strong: #b9bdca;
 
-  --solaris-primary-base: #6a9fff;
-  --solaris-primary-hover: #72a3df;
-  --solaris-primary-active: #7296c8;
-  --solaris-primary-surface: #d4d8fd;
+  --solaris-button-group-separator-color: #d7d9e3;
+  --solaris-button-group-separator-on-solid: #474747;
+
+  --solaris-primary-solid: #3f5dca;
+  --solaris-primary-solid-hover: #3550b5;
+  --solaris-primary-solid-active: #2c4398;
+  --solaris-primary-soft: #d4d8fd;
   --solaris-primary-border: #c9d2ff;
-  --solaris-primary-text: #2c2c2c;
-  --solaris-primary-on-solid: #f2f5fb;
+  --solaris-primary-foreground: #23357a;
+  --solaris-primary-on-solid: #ffffff;
 
-  --solaris-success-base: #33a44b;
-  --solaris-success-hover: #2b8c3f;
-  --solaris-success-active: #237334;
-  --solaris-success-surface: #eaf8ed;
+  --solaris-success-solid: #33a44b;
+  --solaris-success-solid-hover: #2b8c3f;
+  --solaris-success-solid-active: #237334;
+  --solaris-success-soft: #eaf8ed;
   --solaris-success-border: #b3e0bd;
-  --solaris-success-text: #1e6b2e;
+  --solaris-success-foreground: #1e6b2e;
   --solaris-success-on-solid: #ffffff;
 
-  --solaris-warning-base: #f1d008;
-  --solaris-warning-hover: #f3d631;
-  --solaris-warning-active: #dfbd06;
-  --solaris-warning-surface: #fbf1bb;
+  --solaris-warning-solid: #f1d008;
+  --solaris-warning-solid-hover: #d9bc06;
+  --solaris-warning-solid-active: #c2a706;
+  --solaris-warning-soft: #fbf1bb;
   --solaris-warning-border: #f0e6a0;
-  --solaris-warning-text: #7a6808;
+  --solaris-warning-foreground: #7a6808;
   --solaris-warning-on-solid: #17191e;
 
-  --solaris-danger-base: #dc252d;
-  --solaris-danger-hover: #bb1f26;
-  --solaris-danger-active: #9b1920;
-  --solaris-danger-surface: #fde8e9;
+  --solaris-danger-solid: #dc252d;
+  --solaris-danger-solid-hover: #bb1f26;
+  --solaris-danger-solid-active: #9b1920;
+  --solaris-danger-soft: #fde8e9;
   --solaris-danger-border: #f4b3b6;
-  --solaris-danger-text: #8a161b;
+  --solaris-danger-foreground: #8a161b;
   --solaris-danger-on-solid: #ffffff;
 
-  --solaris-info-base: #5f9be4;
-  --solaris-info-hover: #4f85c7;
-  --solaris-info-active: #3f6faa;
-  --solaris-info-surface: #edf4fc;
+  --solaris-info-solid: #2f6cb5;
+  --solaris-info-solid-hover: #285d9c;
+  --solaris-info-solid-active: #214e83;
+  --solaris-info-soft: #edf4fc;
   --solaris-info-border: #bfd9f3;
-  --solaris-info-text: #181919;
+  --solaris-info-foreground: #1d4a7a;
   --solaris-info-on-solid: #ffffff;
 
-  --solaris-orange-base: #e98d16;
-  --solaris-orange-hover: #c97812;
-  --solaris-orange-active: #a9630f;
-  --solaris-orange-surface: #fef2e0;
-  --solaris-orange-border: #f5d6a8;
-  --solaris-orange-text: #8a4f0b;
-  --solaris-orange-on-solid: #ffffff;
+  --solaris-accent-solid: #b25f04;
+  --solaris-accent-solid-hover: #9a5204;
+  --solaris-accent-solid-active: #834603;
+  --solaris-accent-soft: #fef2e0;
+  --solaris-accent-border: #f5d6a8;
+  --solaris-accent-foreground: #8a4f0b;
+  --solaris-accent-on-solid: #ffffff;
+
+  --solaris-violet-solid: #6d4fd0;
+  --solaris-violet-solid-hover: #5d43b5;
+  --solaris-violet-solid-active: #4e3898;
+  --solaris-violet-soft: #ece8fd;
+  --solaris-violet-border: #c4b5f5;
+  --solaris-violet-foreground: #3d2e8a;
+  --solaris-violet-on-solid: #ffffff;
 }
 
 :root,

package/styles/token/density/_comfortable.scss

@@ -1,16 +1,16 @@
 [data-density='comfortable'] {
   --solaris-density-scale: 1;
-  --solaris-density-padding-xs: 6px;
-  --solaris-density-padding-sm: 8px;
-  --solaris-density-padding-md: 10px;
-  --solaris-density-padding-lg: 16px;
-  --solaris-density-padding-xl: 20px;
-  --solaris-density-gap-xs: 4px;
-  --solaris-density-gap-sm: 6px;
-  --solaris-density-gap-md: 8px;
-  --solaris-density-gap-lg: 10px;
-  --solaris-density-gap-xl: 16px;
-  --solaris-density-min-width: 56px;
-  --solaris-density-min-height: 56px;
+  --solaris-density-padding-xs: var(--solaris-spacing-5);
+  --solaris-density-padding-sm: var(--solaris-spacing-6);
+  --solaris-density-padding-md: var(--solaris-spacing-7);
+  --solaris-density-padding-lg: var(--solaris-spacing-8);
+  --solaris-density-padding-xl: var(--solaris-spacing-9);
+  --solaris-density-gap-xs: var(--solaris-spacing-5);
+  --solaris-density-gap-sm: var(--solaris-spacing-6);
+  --solaris-density-gap-md: var(--solaris-spacing-7);
+  --solaris-density-gap-lg: var(--solaris-spacing-8);
+  --solaris-density-gap-xl: var(--solaris-spacing-9);
+  --solaris-density-min-width: var(--solaris-spacing-13);
+  --solaris-density-min-height: var(--solaris-control-height-comfortable-md);
   --solaris-density-font-size: var(--solaris-font-size-lg);
 }

package/styles/token/density/_compact.scss

@@ -1,16 +1,16 @@
 [data-density='compact'] {
-  --solaris-density-scale: 0.75;
-  --solaris-density-padding-xs: 4px;
-  --solaris-density-padding-sm: 6px;
-  --solaris-density-padding-md: 8px;
-  --solaris-density-padding-lg: 10px;
-  --solaris-density-padding-xl: 12px;
-  --solaris-density-gap-xs: 4px;
-  --solaris-density-gap-sm: 6px;
-  --solaris-density-gap-md: 8px;
-  --solaris-density-gap-lg: 10px;
-  --solaris-density-gap-xl: 12px;
-  --solaris-density-min-width: 40px;
-  --solaris-density-min-height: 40px;
+  --solaris-density-scale: 0.5;
+  --solaris-density-padding-xs: var(--solaris-spacing-3);
+  --solaris-density-padding-sm: var(--solaris-spacing-4);
+  --solaris-density-padding-md: var(--solaris-spacing-5);
+  --solaris-density-padding-lg: var(--solaris-spacing-6);
+  --solaris-density-padding-xl: var(--solaris-spacing-7);
+  --solaris-density-gap-xs: var(--solaris-spacing-3);
+  --solaris-density-gap-sm: var(--solaris-spacing-4);
+  --solaris-density-gap-md: var(--solaris-spacing-5);
+  --solaris-density-gap-lg: var(--solaris-spacing-6);
+  --solaris-density-gap-xl: var(--solaris-spacing-7);
+  --solaris-density-min-width: var(--solaris-spacing-10);
   --solaris-density-font-size: var(--solaris-font-size-sm);
+  --solaris-density-min-height: var(--solaris-control-height-compact-md);
 }

package/styles/token/density/_normal.scss

@@ -1,16 +1,16 @@
 [data-density='normal'] {
-  --solaris-density-scale: 0.875;
-  --solaris-density-padding-xs: 4px;
-  --solaris-density-padding-sm: 6px;
-  --solaris-density-padding-md: 8px;
-  --solaris-density-padding-lg: 12px;
-  --solaris-density-padding-xl: 16px;
-  --solaris-density-gap-xs: 3px;
-  --solaris-density-gap-sm: 5px;
-  --solaris-density-gap-md: 7px;
-  --solaris-density-gap-lg: 9px;
-  --solaris-density-gap-xl: 12px;
-  --solaris-density-min-width: 48px;
-  --solaris-density-min-height: 48px;
+  --solaris-density-scale: 0.75;
+  --solaris-density-padding-xs: var(--solaris-spacing-4);
+  --solaris-density-padding-sm: var(--solaris-spacing-5);
+  --solaris-density-padding-md: var(--solaris-spacing-6);
+  --solaris-density-padding-lg: var(--solaris-spacing-7);
+  --solaris-density-padding-xl: var(--solaris-spacing-8);
+  --solaris-density-gap-xs: var(--solaris-spacing-4);
+  --solaris-density-gap-sm: var(--solaris-spacing-5);
+  --solaris-density-gap-md: var(--solaris-spacing-6);
+  --solaris-density-gap-lg: var(--solaris-spacing-7);
+  --solaris-density-gap-xl: var(--solaris-spacing-8);
+  --solaris-density-min-width: var(--solaris-spacing-12);
+  --solaris-density-min-height: var(--solaris-control-height-normal-md);
   --solaris-density-font-size: var(--solaris-font-size-md);
 }