@aziontech/theme 5.1.0 → 5.2.1

package/dist/v4/globals.css

@@ -200,10 +200,12 @@
   --color-gray-150: #ECECEC;
   --color-gray-200: #E5E5E5;
   --color-gray-250: #DADADA;
+  --color-gray-275: #D1D1D1;
   --color-gray-300: #B2B2B2;
   --color-gray-400: #999999;
   --color-gray-500: #808080;
   --color-gray-600: #666666;
+  --color-gray-650: #535353;
   --color-gray-700: #4D4D4D;
   --color-gray-750: #2B2B2B;
   --color-gray-775: #242424;
@@ -420,6 +422,9 @@
   --animate-progress-indeterminate: progressIndeterminate 2100ms cubic-bezier(0.39, 0.57, 0.56, 1) infinite;
   --animate-progress-indeterminate-short: progressIndeterminateShort 2100ms cubic-bezier(0.17, 0.84, 0.44, 1) 1100ms infinite;
   --animate-flow-dash: flowDash 700ms linear infinite;
+  --animate-texture-wave-a: textureWaveA 13s linear infinite;
+  --animate-texture-wave-b: textureWaveB 19s linear infinite;
+  --animate-brand-marquee: brandMarquee 59s linear infinite;
   --transition-duration-fast-01: 70ms;
   --transition-duration-fast-02: 110ms;
   --transition-duration-moderate-01: 150ms;
@@ -619,7 +624,7 @@
   --line-height-9: 36px;
   --line-height-10: 40px;
   --line-height-none: 0;
-  --tracking-tighter: -0.05rem;
+  --tracking-tighter: -0.16rem;
   --tracking-tight: -0.025rem;
   --tracking-normal: 0;
   --tracking-wide: 0.025rem;
@@ -681,6 +686,9 @@
   --animate-progress-indeterminate: progressIndeterminate 2100ms cubic-bezier(0.39, 0.57, 0.56, 1) infinite;
   --animate-progress-indeterminate-short: progressIndeterminateShort 2100ms cubic-bezier(0.17, 0.84, 0.44, 1) 1100ms infinite;
   --animate-flow-dash: flowDash 700ms linear infinite;
+  --animate-texture-wave-a: textureWaveA 13s linear infinite;
+  --animate-texture-wave-b: textureWaveB 19s linear infinite;
+  --animate-brand-marquee: brandMarquee 59s linear infinite;
   --ring-offset: 0.5px;
   --container-px: 1rem;
   --container-py: 4rem;
@@ -734,41 +742,46 @@
   --text-amount-sm-line-height: 1.5;
   --text-amount-sm-font-weight: 400;
   --text-amount-sm-letter-spacing: -0.08em;
+  --text-heading-3xl-text-wrap-style: balance;
+  --text-heading-3xl-font-size: 1.875rem;
+  --text-heading-3xl-line-height: 1.25;
+  --text-heading-3xl-font-weight: 400;
+  --text-heading-3xl-letter-spacing: -0.16rem;
   --text-heading-2xl-text-wrap-style: balance;
   --text-heading-2xl-font-size: 1.875rem;
-  --text-heading-2xl-line-height: 1.25;
+  --text-heading-2xl-line-height: 1;
   --text-heading-2xl-font-weight: 400;
-  --text-heading-2xl-letter-spacing: -0.05rem;
+  --text-heading-2xl-letter-spacing: -0.16rem;
   --text-heading-xl-text-wrap-style: balance;
   --text-heading-xl-font-size: 1.25rem;
   --text-heading-xl-line-height: 1.25;
   --text-heading-xl-font-weight: 400;
-  --text-heading-xl-letter-spacing: -0.05rem;
+  --text-heading-xl-letter-spacing: 0;
   --text-heading-lg-text-wrap-style: balance;
   --text-heading-lg-font-size: 1.125rem;
   --text-heading-lg-line-height: 1.25;
   --text-heading-lg-font-weight: 400;
-  --text-heading-lg-letter-spacing: -0.05rem;
+  --text-heading-lg-letter-spacing: 0;
   --text-heading-md-text-wrap-style: balance;
   --text-heading-md-font-size: 1rem;
   --text-heading-md-line-height: 1.25;
   --text-heading-md-font-weight: 400;
-  --text-heading-md-letter-spacing: -0.05rem;
+  --text-heading-md-letter-spacing: 0;
   --text-heading-sm-text-wrap-style: balance;
   --text-heading-sm-font-size: 0.875rem;
   --text-heading-sm-line-height: 1.375;
   --text-heading-sm-font-weight: 400;
-  --text-heading-sm-letter-spacing: -0.05rem;
+  --text-heading-sm-letter-spacing: 0;
   --text-heading-xs-text-wrap-style: balance;
   --text-heading-xs-font-size: 1rem;
   --text-heading-xs-line-height: 1.375;
   --text-heading-xs-font-weight: 400;
-  --text-heading-xs-letter-spacing: -0.05rem;
+  --text-heading-xs-letter-spacing: 0;
   --text-heading-xxs-text-wrap-style: balance;
   --text-heading-xxs-font-size: 0.875rem;
   --text-heading-xxs-line-height: 1.375;
   --text-heading-xxs-font-weight: 400;
-  --text-heading-xxs-letter-spacing: -0.05rem;
+  --text-heading-xxs-letter-spacing: 0;
   --text-label-lg-font-size: 1rem;
   --text-label-lg-line-height: 1.5;
   --text-label-lg-font-weight: 400;
@@ -874,7 +887,8 @@
     --text-big-number-lg-font-size: 2.25rem;
     --text-amount-lg-font-size: 3rem;
     --text-amount-md-font-size: 1.25rem;
-    --text-heading-2xl-font-size: 3rem;
+    --text-heading-3xl-font-size: 3rem;
+    --text-heading-2xl-font-size: 2.25rem;
     --text-heading-xl-font-size: 1.875rem;
     --text-heading-md-font-size: 1.25rem;
     --text-heading-sm-font-size: 1rem;
@@ -886,7 +900,8 @@
     --text-big-number-lg-font-size: 3.5rem;
     --text-amount-lg-font-size: 3.5rem;
     --text-amount-md-font-size: 1.5rem;
-    --text-heading-2xl-font-size: 3.5rem;
+    --text-heading-3xl-font-size: 3.5rem;
+    --text-heading-2xl-font-size: 3rem;
     --text-heading-xl-font-size: 2.25rem;
     --text-heading-lg-font-size: 1.875rem;
     --text-heading-md-font-size: 1.5rem;
@@ -911,10 +926,12 @@
   --surface-150: #ECECEC;
   --surface-200: #E5E5E5;
   --surface-250: #DADADA;
+  --surface-275: #D1D1D1;
   --surface-300: #B2B2B2;
   --surface-400: #999999;
   --surface-500: #808080;
   --surface-600: #666666;
+  --surface-650: #535353;
   --surface-700: #4D4D4D;
   --surface-750: #2B2B2B;
   --surface-775: #242424;
@@ -933,7 +950,7 @@
   --accent-mask: #0072F51A;
   --accent-selected: #0072F5;
   --accent-contrast: #000000;
-  --bg-canvas: #FAFAFA;
+  --bg-canvas: #F5F5F5;
   --bg-surface: #FFFFFF;
   --bg-surface-raised: #FFFFFF;
   --bg-mask: #00000005;
@@ -946,12 +963,12 @@
   --bg-selected: #E5E5E5;
   --bg-contrast: #141414;
   --bg-disabled: #E5E5E5;
-  --border-default: #DADADA;
+  --border-default: #D1D1D1;
   --border-muted: #ECECEC;
   --border-strong: #000000;
   --border-selected: #F3652B;
   --text-default: #141414;
-  --text-muted: #808080;
+  --text-muted: #535353;
   --text-disabled: #999999;
   --text-link: #005FCC;
   --text-link-hover: #004799;
@@ -977,6 +994,27 @@
   --info: #CCE4FF;
   --info-border: #0072F566;
   --info-contrast: #004799;
+  --illustration-ground: #F5F5F5;
+  --illustration-surface: #FFFFFF;
+  --illustration-surface-raised: #FFFFFF;
+  --illustration-block: #E5E5E5;
+  --illustration-line: #D1D1D1;
+  --illustration-line-muted: #ECECEC;
+  --illustration-line-strong: #999999;
+  --illustration-highlight: #000000;
+  --illustration-ink: #141414;
+  --illustration-ink-muted: #535353;
+  --illustration-primary: #F3652B;
+  --illustration-accent: #0072F5;
+  --illustration-code-punctuation: #808080;
+  --illustration-code-keyword: #005FCC;
+  --illustration-success: #12542B;
+  --illustration-success-surface: #A4F4C0;
+  --illustration-danger: #891010;
+  --illustration-warning: #634B03;
+  --illustration-warning-surface: #FCE49C;
+  --illustration-info: #004799;
+  --illustration-info-surface: #CCE4FF;
 }
 
 [data-theme=dark], .dark, .azion.azion-dark {
@@ -986,10 +1024,12 @@
   --surface-150: #ECECEC;
   --surface-200: #E5E5E5;
   --surface-250: #DADADA;
+  --surface-275: #D1D1D1;
   --surface-300: #B2B2B2;
   --surface-400: #999999;
   --surface-500: #808080;
   --surface-600: #666666;
+  --surface-650: #535353;
   --surface-700: #4D4D4D;
   --surface-750: #2B2B2B;
   --surface-775: #242424;
@@ -1052,6 +1092,27 @@
   --info: #001833;
   --info-border: #0072F566;
   --info-contrast: #66ADFF;
+  --illustration-ground: #000000;
+  --illustration-surface: #0A0A0A;
+  --illustration-surface-raised: #141414;
+  --illustration-block: #1A1A1A;
+  --illustration-line: #2B2B2B;
+  --illustration-line-muted: #242424;
+  --illustration-line-strong: #4D4D4D;
+  --illustration-highlight: #FFFFFF;
+  --illustration-ink: #FAFAFA;
+  --illustration-ink-muted: #808080;
+  --illustration-primary: #F3652B;
+  --illustration-accent: #0072F5;
+  --illustration-code-punctuation: #999999;
+  --illustration-code-keyword: #3392FF;
+  --illustration-success: #52E086;
+  --illustration-success-surface: #0A2916;
+  --illustration-danger: #ED7878;
+  --illustration-warning: #F7BD08;
+  --illustration-warning-surface: #312602;
+  --illustration-info: #66ADFF;
+  --illustration-info-surface: #001833;
 }
 
 @keyframes fadeIn {
@@ -1141,6 +1202,19 @@
   100% { stroke-dashoffset: 0; }
 }
 
+@keyframes textureWaveA {
+  to { transform: translate3d(calc(-1 * var(--texture-wave-shift)), 0, 0); }
+}
+
+@keyframes textureWaveB {
+  to { transform: translate3d(var(--texture-wave-shift), 0, 0); }
+}
+
+@keyframes brandMarquee {
+  0% { transform: translateX(0); }
+  100% { transform: translateX(-50%); }
+}
+
 @layer components {
   /* ── Containers ── */
   .px-container { padding-left: var(--container-px); padding-right: var(--container-px); }
@@ -1212,6 +1286,14 @@
   letter-spacing: var(--text-amount-sm-letter-spacing);
 }
 
+@utility text-heading-3xl {
+  text-wrap-style: var(--text-heading-3xl-text-wrap-style);
+  font-size: var(--text-heading-3xl-font-size);
+  line-height: var(--text-heading-3xl-line-height);
+  font-weight: var(--text-heading-3xl-font-weight);
+  letter-spacing: var(--text-heading-3xl-letter-spacing);
+}
+
 @utility text-heading-2xl {
   text-wrap-style: var(--text-heading-2xl-text-wrap-style);
   font-size: var(--text-heading-2xl-font-size);
@@ -1518,6 +1600,9 @@
 @utility bg-surface-250 { background-color: var(--surface-250); }
 @utility text-surface-250 { color: var(--surface-250); }
 @utility border-surface-250 { border-color: var(--surface-250); }
+@utility bg-surface-275 { background-color: var(--surface-275); }
+@utility text-surface-275 { color: var(--surface-275); }
+@utility border-surface-275 { border-color: var(--surface-275); }
 @utility bg-surface-300 { background-color: var(--surface-300); }
 @utility text-surface-300 { color: var(--surface-300); }
 @utility border-surface-300 { border-color: var(--surface-300); }
@@ -1530,6 +1615,9 @@
 @utility bg-surface-600 { background-color: var(--surface-600); }
 @utility text-surface-600 { color: var(--surface-600); }
 @utility border-surface-600 { border-color: var(--surface-600); }
+@utility bg-surface-650 { background-color: var(--surface-650); }
+@utility text-surface-650 { color: var(--surface-650); }
+@utility border-surface-650 { border-color: var(--surface-650); }
 @utility bg-surface-700 { background-color: var(--surface-700); }
 @utility text-surface-700 { color: var(--surface-700); }
 @utility border-surface-700 { border-color: var(--surface-700); }

package/dist/v4/globals.scss

@@ -200,10 +200,12 @@
   --color-gray-150: #ECECEC;
   --color-gray-200: #E5E5E5;
   --color-gray-250: #DADADA;
+  --color-gray-275: #D1D1D1;
   --color-gray-300: #B2B2B2;
   --color-gray-400: #999999;
   --color-gray-500: #808080;
   --color-gray-600: #666666;
+  --color-gray-650: #535353;
   --color-gray-700: #4D4D4D;
   --color-gray-750: #2B2B2B;
   --color-gray-775: #242424;
@@ -420,6 +422,9 @@
   --animate-progress-indeterminate: progressIndeterminate 2100ms cubic-bezier(0.39, 0.57, 0.56, 1) infinite;
   --animate-progress-indeterminate-short: progressIndeterminateShort 2100ms cubic-bezier(0.17, 0.84, 0.44, 1) 1100ms infinite;
   --animate-flow-dash: flowDash 700ms linear infinite;
+  --animate-texture-wave-a: textureWaveA 13s linear infinite;
+  --animate-texture-wave-b: textureWaveB 19s linear infinite;
+  --animate-brand-marquee: brandMarquee 59s linear infinite;
   --transition-duration-fast-01: 70ms;
   --transition-duration-fast-02: 110ms;
   --transition-duration-moderate-01: 150ms;
@@ -619,7 +624,7 @@
   --line-height-9: 36px;
   --line-height-10: 40px;
   --line-height-none: 0;
-  --tracking-tighter: -0.05rem;
+  --tracking-tighter: -0.16rem;
   --tracking-tight: -0.025rem;
   --tracking-normal: 0;
   --tracking-wide: 0.025rem;
@@ -681,6 +686,9 @@
   --animate-progress-indeterminate: progressIndeterminate 2100ms cubic-bezier(0.39, 0.57, 0.56, 1) infinite;
   --animate-progress-indeterminate-short: progressIndeterminateShort 2100ms cubic-bezier(0.17, 0.84, 0.44, 1) 1100ms infinite;
   --animate-flow-dash: flowDash 700ms linear infinite;
+  --animate-texture-wave-a: textureWaveA 13s linear infinite;
+  --animate-texture-wave-b: textureWaveB 19s linear infinite;
+  --animate-brand-marquee: brandMarquee 59s linear infinite;
   --ring-offset: 0.5px;
   --container-px: 1rem;
   --container-py: 4rem;
@@ -734,41 +742,46 @@
   --text-amount-sm-line-height: 1.5;
   --text-amount-sm-font-weight: 400;
   --text-amount-sm-letter-spacing: -0.08em;
+  --text-heading-3xl-text-wrap-style: balance;
+  --text-heading-3xl-font-size: 1.875rem;
+  --text-heading-3xl-line-height: 1.25;
+  --text-heading-3xl-font-weight: 400;
+  --text-heading-3xl-letter-spacing: -0.16rem;
   --text-heading-2xl-text-wrap-style: balance;
   --text-heading-2xl-font-size: 1.875rem;
-  --text-heading-2xl-line-height: 1.25;
+  --text-heading-2xl-line-height: 1;
   --text-heading-2xl-font-weight: 400;
-  --text-heading-2xl-letter-spacing: -0.05rem;
+  --text-heading-2xl-letter-spacing: -0.16rem;
   --text-heading-xl-text-wrap-style: balance;
   --text-heading-xl-font-size: 1.25rem;
   --text-heading-xl-line-height: 1.25;
   --text-heading-xl-font-weight: 400;
-  --text-heading-xl-letter-spacing: -0.05rem;
+  --text-heading-xl-letter-spacing: 0;
   --text-heading-lg-text-wrap-style: balance;
   --text-heading-lg-font-size: 1.125rem;
   --text-heading-lg-line-height: 1.25;
   --text-heading-lg-font-weight: 400;
-  --text-heading-lg-letter-spacing: -0.05rem;
+  --text-heading-lg-letter-spacing: 0;
   --text-heading-md-text-wrap-style: balance;
   --text-heading-md-font-size: 1rem;
   --text-heading-md-line-height: 1.25;
   --text-heading-md-font-weight: 400;
-  --text-heading-md-letter-spacing: -0.05rem;
+  --text-heading-md-letter-spacing: 0;
   --text-heading-sm-text-wrap-style: balance;
   --text-heading-sm-font-size: 0.875rem;
   --text-heading-sm-line-height: 1.375;
   --text-heading-sm-font-weight: 400;
-  --text-heading-sm-letter-spacing: -0.05rem;
+  --text-heading-sm-letter-spacing: 0;
   --text-heading-xs-text-wrap-style: balance;
   --text-heading-xs-font-size: 1rem;
   --text-heading-xs-line-height: 1.375;
   --text-heading-xs-font-weight: 400;
-  --text-heading-xs-letter-spacing: -0.05rem;
+  --text-heading-xs-letter-spacing: 0;
   --text-heading-xxs-text-wrap-style: balance;
   --text-heading-xxs-font-size: 0.875rem;
   --text-heading-xxs-line-height: 1.375;
   --text-heading-xxs-font-weight: 400;
-  --text-heading-xxs-letter-spacing: -0.05rem;
+  --text-heading-xxs-letter-spacing: 0;
   --text-label-lg-font-size: 1rem;
   --text-label-lg-line-height: 1.5;
   --text-label-lg-font-weight: 400;
@@ -874,7 +887,8 @@
     --text-big-number-lg-font-size: 2.25rem;
     --text-amount-lg-font-size: 3rem;
     --text-amount-md-font-size: 1.25rem;
-    --text-heading-2xl-font-size: 3rem;
+    --text-heading-3xl-font-size: 3rem;
+    --text-heading-2xl-font-size: 2.25rem;
     --text-heading-xl-font-size: 1.875rem;
     --text-heading-md-font-size: 1.25rem;
     --text-heading-sm-font-size: 1rem;
@@ -886,7 +900,8 @@
     --text-big-number-lg-font-size: 3.5rem;
     --text-amount-lg-font-size: 3.5rem;
     --text-amount-md-font-size: 1.5rem;
-    --text-heading-2xl-font-size: 3.5rem;
+    --text-heading-3xl-font-size: 3.5rem;
+    --text-heading-2xl-font-size: 3rem;
     --text-heading-xl-font-size: 2.25rem;
     --text-heading-lg-font-size: 1.875rem;
     --text-heading-md-font-size: 1.5rem;
@@ -911,10 +926,12 @@
   --surface-150: #ECECEC;
   --surface-200: #E5E5E5;
   --surface-250: #DADADA;
+  --surface-275: #D1D1D1;
   --surface-300: #B2B2B2;
   --surface-400: #999999;
   --surface-500: #808080;
   --surface-600: #666666;
+  --surface-650: #535353;
   --surface-700: #4D4D4D;
   --surface-750: #2B2B2B;
   --surface-775: #242424;
@@ -933,7 +950,7 @@
   --accent-mask: #0072F51A;
   --accent-selected: #0072F5;
   --accent-contrast: #000000;
-  --bg-canvas: #FAFAFA;
+  --bg-canvas: #F5F5F5;
   --bg-surface: #FFFFFF;
   --bg-surface-raised: #FFFFFF;
   --bg-mask: #00000005;
@@ -946,12 +963,12 @@
   --bg-selected: #E5E5E5;
   --bg-contrast: #141414;
   --bg-disabled: #E5E5E5;
-  --border-default: #DADADA;
+  --border-default: #D1D1D1;
   --border-muted: #ECECEC;
   --border-strong: #000000;
   --border-selected: #F3652B;
   --text-default: #141414;
-  --text-muted: #808080;
+  --text-muted: #535353;
   --text-disabled: #999999;
   --text-link: #005FCC;
   --text-link-hover: #004799;
@@ -977,6 +994,27 @@
   --info: #CCE4FF;
   --info-border: #0072F566;
   --info-contrast: #004799;
+  --illustration-ground: #F5F5F5;
+  --illustration-surface: #FFFFFF;
+  --illustration-surface-raised: #FFFFFF;
+  --illustration-block: #E5E5E5;
+  --illustration-line: #D1D1D1;
+  --illustration-line-muted: #ECECEC;
+  --illustration-line-strong: #999999;
+  --illustration-highlight: #000000;
+  --illustration-ink: #141414;
+  --illustration-ink-muted: #535353;
+  --illustration-primary: #F3652B;
+  --illustration-accent: #0072F5;
+  --illustration-code-punctuation: #808080;
+  --illustration-code-keyword: #005FCC;
+  --illustration-success: #12542B;
+  --illustration-success-surface: #A4F4C0;
+  --illustration-danger: #891010;
+  --illustration-warning: #634B03;
+  --illustration-warning-surface: #FCE49C;
+  --illustration-info: #004799;
+  --illustration-info-surface: #CCE4FF;
 }
 
 [data-theme=dark], .dark, .azion.azion-dark {
@@ -986,10 +1024,12 @@
   --surface-150: #ECECEC;
   --surface-200: #E5E5E5;
   --surface-250: #DADADA;
+  --surface-275: #D1D1D1;
   --surface-300: #B2B2B2;
   --surface-400: #999999;
   --surface-500: #808080;
   --surface-600: #666666;
+  --surface-650: #535353;
   --surface-700: #4D4D4D;
   --surface-750: #2B2B2B;
   --surface-775: #242424;
@@ -1052,6 +1092,27 @@
   --info: #001833;
   --info-border: #0072F566;
   --info-contrast: #66ADFF;
+  --illustration-ground: #000000;
+  --illustration-surface: #0A0A0A;
+  --illustration-surface-raised: #141414;
+  --illustration-block: #1A1A1A;
+  --illustration-line: #2B2B2B;
+  --illustration-line-muted: #242424;
+  --illustration-line-strong: #4D4D4D;
+  --illustration-highlight: #FFFFFF;
+  --illustration-ink: #FAFAFA;
+  --illustration-ink-muted: #808080;
+  --illustration-primary: #F3652B;
+  --illustration-accent: #0072F5;
+  --illustration-code-punctuation: #999999;
+  --illustration-code-keyword: #3392FF;
+  --illustration-success: #52E086;
+  --illustration-success-surface: #0A2916;
+  --illustration-danger: #ED7878;
+  --illustration-warning: #F7BD08;
+  --illustration-warning-surface: #312602;
+  --illustration-info: #66ADFF;
+  --illustration-info-surface: #001833;
 }
 
 @keyframes fadeIn {
@@ -1141,6 +1202,19 @@
   100% { stroke-dashoffset: 0; }
 }
 
+@keyframes textureWaveA {
+  to { transform: translate3d(calc(-1 * var(--texture-wave-shift)), 0, 0); }
+}
+
+@keyframes textureWaveB {
+  to { transform: translate3d(var(--texture-wave-shift), 0, 0); }
+}
+
+@keyframes brandMarquee {
+  0% { transform: translateX(0); }
+  100% { transform: translateX(-50%); }
+}
+
 @layer components {
   /* ── Containers ── */
   .px-container { padding-left: var(--container-px); padding-right: var(--container-px); }
@@ -1212,6 +1286,14 @@
   letter-spacing: var(--text-amount-sm-letter-spacing);
 }
 
+@utility text-heading-3xl {
+  text-wrap-style: var(--text-heading-3xl-text-wrap-style);
+  font-size: var(--text-heading-3xl-font-size);
+  line-height: var(--text-heading-3xl-line-height);
+  font-weight: var(--text-heading-3xl-font-weight);
+  letter-spacing: var(--text-heading-3xl-letter-spacing);
+}
+
 @utility text-heading-2xl {
   text-wrap-style: var(--text-heading-2xl-text-wrap-style);
   font-size: var(--text-heading-2xl-font-size);
@@ -1518,6 +1600,9 @@
 @utility bg-surface-250 { background-color: var(--surface-250); }
 @utility text-surface-250 { color: var(--surface-250); }
 @utility border-surface-250 { border-color: var(--surface-250); }
+@utility bg-surface-275 { background-color: var(--surface-275); }
+@utility text-surface-275 { color: var(--surface-275); }
+@utility border-surface-275 { border-color: var(--surface-275); }
 @utility bg-surface-300 { background-color: var(--surface-300); }
 @utility text-surface-300 { color: var(--surface-300); }
 @utility border-surface-300 { border-color: var(--surface-300); }
@@ -1530,6 +1615,9 @@
 @utility bg-surface-600 { background-color: var(--surface-600); }
 @utility text-surface-600 { color: var(--surface-600); }
 @utility border-surface-600 { border-color: var(--surface-600); }
+@utility bg-surface-650 { background-color: var(--surface-650); }
+@utility text-surface-650 { color: var(--surface-650); }
+@utility border-surface-650 { border-color: var(--surface-650); }
 @utility bg-surface-700 { background-color: var(--surface-700); }
 @utility text-surface-700 { color: var(--surface-700); }
 @utility border-surface-700 { border-color: var(--surface-700); }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@aziontech/theme",
   "type": "module",
-  "version": "5.1.0",
+  "version": "5.2.1",
   "author": "aziontech",
   "license": "MIT",
   "repository": {

package/src/scripts/build-tokens.mjs

@@ -201,6 +201,7 @@ const AXIS_BY_PREFIX = {
 };
 
 const isCodeSintax = (key) => key.startsWith('code-sintax-');
+const isIllustration = (key) => key.startsWith('illustration-');
 
 const emitSemanticColorUtilities = () => {
   const { light } = compileThemeVars();
@@ -212,7 +213,7 @@ const emitSemanticColorUtilities = () => {
   const emitted = new Set(Object.keys(textsData));
 
   for (const key of keys) {
-    if (isCodeSintax(key)) continue;
+    if (isCodeSintax(key) || isIllustration(key)) continue;
     const prefixEntry = Object.entries(AXIS_BY_PREFIX).find(([prefix]) =>
       key.startsWith(prefix),
     );

package/src/scripts/compile-theme.js

@@ -19,6 +19,7 @@ import { danger } from '../tokens/theme/feedback/danger.js'
 import { info } from '../tokens/theme/feedback/info.js'
 import { success } from '../tokens/theme/feedback/success.js'
 import { warning } from '../tokens/theme/feedback/warning.js'
+import { illustration } from '../tokens/theme/illustration.js'
 import { primary } from '../tokens/theme/primary.js'
 import { ring } from '../tokens/theme/ring.js'
 import { secondary } from '../tokens/theme/secondary.js'
@@ -34,7 +35,22 @@ const getValueByPath = (obj, path) =>
     return undefined
   }, obj)
 
-const resolveRef = (ref, surfacesResolved) => {
+const semanticGroups = {
+  primary,
+  secondary,
+  accent,
+  background,
+  border,
+  text,
+  ring,
+  codeSintax,
+  success,
+  warning,
+  danger,
+  info
+}
+
+const resolveRef = (ref, surfacesResolved, semanticResolved = {}) => {
   if (ref.startsWith('primitives.')) {
     const v = getValueByPath(colorPrimitives, ref.slice('primitives.'.length))
     return typeof v === 'string' || typeof v === 'number' ? String(v) : null
@@ -55,14 +71,17 @@ const resolveRef = (ref, surfacesResolved) => {
     const key = ref.slice('theme.surfaces.'.length)
     return surfacesResolved[key] ?? null
   }
+  if (ref.startsWith('theme.')) {
+    return semanticResolved[ref.slice('theme.'.length)] ?? null
+  }
   return null
 }
 
-const resolveGroup = (group, surfacesResolved, variant, unresolved) => {
+const resolveGroup = (group, surfacesResolved, variant, unresolved, semanticResolved) => {
   const result = {}
   Object.entries(group).forEach(([key, value]) => {
     if (!isTokenRef(value)) return
-    const resolved = resolveRef(value.__ref, surfacesResolved)
+    const resolved = resolveRef(value.__ref, surfacesResolved, semanticResolved)
     if (resolved != null) result[`--${key}`] = String(resolved)
     else unresolved.push(`[${variant}] --${key} → ${value.__ref}`)
   })
@@ -84,21 +103,19 @@ const compileVariant = (variant, unresolved) => {
     vars[`--${k}`] = v
   })
 
-  const groups = [
-    primary[variant],
-    secondary[variant],
-    accent[variant],
-    background[variant],
-    border[variant],
-    text[variant],
-    ring[variant],
-    codeSintax[variant],
-    success[variant],
-    warning[variant],
-    danger[variant],
-    info[variant]
-  ]
-  groups.forEach((g) => Object.assign(vars, resolveGroup(g, surfacesResolved, variant, unresolved)))
+  const semanticResolved = {}
+  Object.entries(semanticGroups).forEach(([name, group]) => {
+    const resolved = resolveGroup(group[variant], surfacesResolved, variant, unresolved)
+    Object.assign(vars, resolved)
+    Object.entries(resolved).forEach(([key, value]) => {
+      semanticResolved[`${name}.${key.slice(2)}`] = value
+    })
+  })
+
+  Object.assign(
+    vars,
+    resolveGroup(illustration[variant], surfacesResolved, variant, unresolved, semanticResolved)
+  )
   return vars
 }
 

package/src/tokens/primitives/animations/animate.d.ts

@@ -36,6 +36,9 @@ export const animate: {
     'progress-indeterminate': string;
     'progress-indeterminate-short': string;
     'flow-dash': string;
+    'texture-wave-a': string;
+    'texture-wave-b': string;
+    'brand-marquee': string;
 };
 export const useWhen: {
     'page-enter': string;
@@ -59,6 +62,9 @@ export const useWhen: {
     'progress-indeterminate': string;
     'progress-indeterminate-short': string;
     'flow-dash': string;
+    'texture-wave-a': string;
+    'texture-wave-b': string;
+    'brand-marquee': string;
 };
 declare namespace _default {
     export { animate };

package/src/tokens/primitives/animations/animate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"animate.d.ts","sourceRoot":"","sources":["animate.js"],"names":[],"mappings":"AAAA;;;;;EAKC;AAED;;;;;;;;;EASC;AAED;;;;;;;;;;;;;;;;;;;;;;EAwBC;AAED;;;;;;;;;;;;;;;;;;;;;;EA4BC"}
+{"version":3,"file":"animate.d.ts","sourceRoot":"","sources":["animate.js"],"names":[],"mappings":"AAAA;;;;;EAKC;AAED;;;;;;;;;EASC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;EA2BC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;EAkCC"}

package/src/tokens/primitives/animations/animate.js

@@ -39,7 +39,10 @@ export const animate = {
   'progress-indeterminate-short': `progressIndeterminateShort ${duration['slow-04']} ${curve['expressive-entrance']} ${duration['slow-03']} infinite`,
   // `linear` (not a curve token) for the same reason as spin/shimmer: an endlessly
   // looping animation must not accelerate, or the seam between repeats is visible.
-  'flow-dash': `flowDash ${duration['slow-02']} linear infinite`
+  'flow-dash': `flowDash ${duration['slow-02']} linear infinite`,
+  'texture-wave-a': 'textureWaveA 13s linear infinite',
+  'texture-wave-b': 'textureWaveB 19s linear infinite',
+  'brand-marquee': 'brandMarquee 59s linear infinite'
 }
 
 export const useWhen = {
@@ -69,7 +72,13 @@ export const useWhen = {
   'progress-indeterminate': 'Indeterminate linear progress bar (primary sweep).',
   'progress-indeterminate-short': 'Indeterminate linear progress bar (secondary short sweep).',
   'flow-dash':
-    'Flowing connection along an SVG connector stroke in a node-based / network diagram. Set a stroke-dasharray whose cycle divides 24 (e.g. 4 4) so the loop is seamless.'
+    'Flowing connection along an SVG connector stroke in a node-based / network diagram. Set a stroke-dasharray whose cycle divides 24 (e.g. 4 4) so the loop is seamless.',
+  'texture-wave-a':
+    'One of the two crossing bands of a pixelate texture, travelling left. Set --texture-wave-shift on the element to one period of its banding measured along X, and overhang the element by that much on the side it travels toward, or the field uncovers mid-cycle.',
+  'texture-wave-b':
+    'The counter-travelling band of that pair (pair of texture-wave-a; same --texture-wave-shift contract, opposite direction).',
+  'brand-marquee':
+    'A strip of logos looping forever (client trust strips, framework strips). Apply to a track holding its row exactly twice, the duplicate aria-hidden, and set animation-duration ON THE ELEMENT from the mark count so every strip on a site moves at one speed rather than one duration — a var in this shorthand would resolve at :root and never see it. Pause it on hover and focus-within so a linked mark can be reached.'
 }
 
 export default { animate, curve, duration, useWhen }

package/src/tokens/primitives/animations/keyframes.d.ts

@@ -69,6 +69,17 @@ export namespace keyframes {
         '0%': string;
         '100%': string;
     };
+    namespace textureWaveA {
+        let to: string;
+    }
+    namespace textureWaveB {
+        let to_1: string;
+        export { to_1 as to };
+    }
+    let brandMarquee: {
+        '0%': string;
+        '100%': string;
+    };
 }
 /**
  * Utilities that need CSS properties beyond the `animation` shorthand

package/src/tokens/primitives/animations/keyframes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"keyframes.d.ts","sourceRoot":"","sources":["keyframes.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6FA;;;;GAIG;AACH;;;;;;;EAGC"}
+{"version":3,"file":"keyframes.d.ts","sourceRoot":"","sources":["keyframes.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuGA;;;;GAIG;AACH;;;;;;;EAGC"}

package/src/tokens/primitives/animations/keyframes.js

@@ -88,6 +88,16 @@ export const keyframes = {
   flowDash: {
     '0%': 'stroke-dashoffset: 24',
     '100%': 'stroke-dashoffset: 0'
+  },
+  textureWaveA: {
+    to: 'transform: translate3d(calc(-1 * var(--texture-wave-shift)), 0, 0)'
+  },
+  textureWaveB: {
+    to: 'transform: translate3d(var(--texture-wave-shift), 0, 0)'
+  },
+  brandMarquee: {
+    '0%': 'transform: translateX(0)',
+    '100%': 'transform: translateX(-50%)'
   }
 }
 

package/src/tokens/primitives/colors/colors.d.ts

@@ -23,10 +23,12 @@ export namespace primitives {
         150: string;
         200: string;
         250: string;
+        275: string;
         300: string;
         400: string;
         500: string;
         600: string;
+        650: string;
         700: string;
         750: string;
         775: string;

package/src/tokens/primitives/colors/colors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["colors.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCACuC,YAAY;sBAAZ,YAAY;sBAD7B,YAAY"}
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["colors.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCACuC,YAAY;sBAAZ,YAAY;sBAD7B,YAAY"}

package/src/tokens/primitives/colors/colors.js

@@ -32,10 +32,12 @@ export const primitives = {
     150: '#ECECEC',
     200: '#E5E5E5',
     250: '#DADADA',
+    275: '#D1D1D1',
     300: '#B2B2B2',
     400: '#999999',
     500: '#808080',
     600: '#666666',
+    650: '#535353',
     700: '#4D4D4D',
     750: '#2B2B2B',
     775: '#242424',

package/src/tokens/primitives/typography/tracking.js

@@ -5,7 +5,7 @@
  * resolves to a fixed 1.6px instead of 10% of the element's font size.
  */
 export const tracking = {
-  tighter: '-0.05rem',
+  tighter: '-0.16rem',
   tight: '-0.025rem',
   normal: '0',
   wide: '0.025rem',

package/src/tokens/semantic/texts.data.d.ts

@@ -56,6 +56,17 @@ export const textsData: {
         fontWeight: number;
         letterSpacing: string;
     };
+    'text-heading-3xl': {
+        textWrapStyle: string;
+        fontSize: {
+            _: string;
+            sm: string;
+            md: string;
+        };
+        lineHeight: number;
+        fontWeight: number;
+        letterSpacing: string;
+    };
     'text-heading-2xl': {
         textWrapStyle: string;
         fontSize: {

package/src/tokens/semantic/texts.data.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"texts.data.d.ts","sourceRoot":"","sources":["texts.data.js"],"names":[],"mappings":"AAkCA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA2OE,8FAA8F;;;;;;;;;;;;;;;;;;EAkB/F"}
+{"version":3,"file":"texts.data.d.ts","sourceRoot":"","sources":["texts.data.js"],"names":[],"mappings":"AAkCA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAkPE,8FAA8F;;;;;;;;;;;;;;;;;;EAkB/F"}

package/src/tokens/semantic/texts.data.js

@@ -56,7 +56,7 @@ export const textsData = {
   // The three sizes `Currency` typesets a monetary amount at, one per reading
   // distance: `sm` inside a table row or list cell, `md` an amount stated as a fact on
   // a card, `lg` the headline figure of a pricing card. Each MIRRORS the heading/label
-  // token it used to borrow (`text-label-lg`, `text-heading-md`, `text-heading-2xl`) —
+  // token it used to borrow (`text-label-lg`, `text-heading-md`, `text-heading-3xl`) —
   // same size ramp, same leading, same weight — and adds the one thing that made
   // borrowing wrong: the amount's negative tracking.
   //
@@ -69,7 +69,7 @@ export const textsData = {
   // makes a single declaration correct at all three sizes and at every breakpoint of
   // `lg`'s responsive ramp.
   //
-  // Dedicated tokens rather than tracking added to the borrowed ones: `text-heading-2xl`
+  // Dedicated tokens rather than tracking added to the borrowed ones: `text-heading-3xl`
   // sets every hero headline in the system, and a hero is prose, not a numeral.
   'text-amount-lg': {
     textWrapStyle: 'balance',
@@ -91,54 +91,61 @@ export const textsData = {
     fontWeight: fontWeight.normal,
     letterSpacing: '-0.08em'
   },
-  'text-heading-2xl': {
+  'text-heading-3xl': {
     textWrapStyle: 'balance',
     fontSize: { _: fontSize['3xl'], sm: fontSize['5xl'], md: fontSize['6xl'] },
     lineHeight: leading.tight,
     fontWeight: fontWeight.normal,
     letterSpacing: tracking.tighter
   },
+  'text-heading-2xl': {
+    textWrapStyle: 'balance',
+    fontSize: { _: fontSize['3xl'], sm: fontSize['4xl'], md: fontSize['5xl'] },
+    lineHeight: leading.none,
+    fontWeight: fontWeight.normal,
+    letterSpacing: tracking.tighter
+  },
   'text-heading-xl': {
     textWrapStyle: 'balance',
     fontSize: { _: fontSize.xl, sm: fontSize['3xl'], md: fontSize['4xl'] },
     lineHeight: leading.tight,
     fontWeight: fontWeight.normal,
-    letterSpacing: tracking.tighter
+    letterSpacing: tracking.normal
   },
   'text-heading-lg': {
     textWrapStyle: 'balance',
     fontSize: { _: fontSize.lg, md: fontSize['3xl'] },
     lineHeight: leading.tight,
     fontWeight: fontWeight.normal,
-    letterSpacing: tracking.tighter
+    letterSpacing: tracking.normal
   },
   'text-heading-md': {
     textWrapStyle: 'balance',
     fontSize: { _: fontSize.base, sm: fontSize.xl, md: fontSize['2xl'] },
     lineHeight: leading.tight,
     fontWeight: fontWeight.normal,
-    letterSpacing: tracking.tighter
+    letterSpacing: tracking.normal
   },
   'text-heading-sm': {
     textWrapStyle: 'balance',
     fontSize: { _: fontSize.sm, sm: fontSize.base, md: fontSize.lg },
     lineHeight: leading.snug,
     fontWeight: fontWeight.normal,
-    letterSpacing: tracking.tighter
+    letterSpacing: tracking.normal
   },
   'text-heading-xs': {
     textWrapStyle: 'balance',
     fontSize: fontSize.base,
     lineHeight: leading.snug,
     fontWeight: fontWeight.normal,
-    letterSpacing: tracking.tighter
+    letterSpacing: tracking.normal
   },
   'text-heading-xxs': {
     textWrapStyle: 'balance',
     fontSize: fontSize.sm,
     lineHeight: leading.snug,
     fontWeight: fontWeight.normal,
-    letterSpacing: tracking.tighter
+    letterSpacing: tracking.normal
   },
   'text-label-lg': {
     fontSize: fontSize.base,

package/src/tokens/theme/background.js

@@ -2,7 +2,7 @@ import { tokenRef } from '../../scripts/refs.js'
 
 export const background = {
   light: {
-    'bg-canvas': tokenRef('theme.surfaces.surface-50'),
+    'bg-canvas': tokenRef('theme.surfaces.surface-100'),
     'bg-surface': tokenRef('theme.surfaces.surface-0'),
     'bg-surface-raised': tokenRef('theme.surfaces.surface-0'),
     'bg-mask': tokenRef('primitives.alpha.black.50'),

package/src/tokens/theme/border.js

@@ -8,12 +8,12 @@ import { tokenRef } from '../../scripts/refs.js'
 // brighter line, so any stacked or abutting border doubled. An opaque step gives a rule one
 // identity wherever it is drawn, and makes overlap a no-op.
 //
-// The steps are ones added to fill the ramp's gaps (`gray.150` / `gray.250` / `gray.750` /
+// The steps are ones added to fill the ramp's gaps (`gray.150` / `gray.275` / `gray.750` /
 // `gray.775`), NOT the steps that bracket them — `surface-200` (light) and `surface-800` (dark)
 // are what `--bg-selected` and `--bg-disabled` already use, so a border drawn there is exactly
 // its own fill and vanishes. Every pairing a component can produce now clears zero:
-//   light default  surface-250  vs canvas 32 · surface 37 · selected/disabled 11
-//   light muted    surface-150  vs canvas 14 · surface 19 · selected/disabled 7
+//   light default  surface-275  vs canvas 36 · surface 46 · selected/disabled 20
+//   light muted    surface-150  vs canvas 9 · surface 19 · selected/disabled 7
 //   dark  default  surface-750  vs canvas 43 · surface 33 · raised 23 · selected 17
 //   dark  muted    surface-775  vs canvas 36 · surface 26 · raised 16 · selected 10
 //
@@ -24,7 +24,7 @@ import { tokenRef } from '../../scripts/refs.js'
 // cannot go proportionally as subtle: `--bg-surface-raised` sits at 20 and would swallow it.
 export const border = {
   light: {
-    'border-default': tokenRef('theme.surfaces.surface-250'),
+    'border-default': tokenRef('theme.surfaces.surface-275'),
     'border-muted': tokenRef('theme.surfaces.surface-150'),
     'border-strong': tokenRef('primitives.base.black'),
     'border-selected': tokenRef('brand.primary.primary-500')

package/src/tokens/theme/illustration.d.ts

@@ -0,0 +1,74 @@
+export namespace illustration {
+    export { aliases as light };
+    export { aliases as dark };
+}
+declare namespace _default {
+    export { illustration };
+}
+export default _default;
+declare const aliases: {
+    'illustration-ground': {
+        __ref: any;
+    };
+    'illustration-surface': {
+        __ref: any;
+    };
+    'illustration-surface-raised': {
+        __ref: any;
+    };
+    'illustration-block': {
+        __ref: any;
+    };
+    'illustration-line': {
+        __ref: any;
+    };
+    'illustration-line-muted': {
+        __ref: any;
+    };
+    'illustration-line-strong': {
+        __ref: any;
+    };
+    'illustration-highlight': {
+        __ref: any;
+    };
+    'illustration-ink': {
+        __ref: any;
+    };
+    'illustration-ink-muted': {
+        __ref: any;
+    };
+    'illustration-primary': {
+        __ref: any;
+    };
+    'illustration-accent': {
+        __ref: any;
+    };
+    'illustration-code-punctuation': {
+        __ref: any;
+    };
+    'illustration-code-keyword': {
+        __ref: any;
+    };
+    'illustration-success': {
+        __ref: any;
+    };
+    'illustration-success-surface': {
+        __ref: any;
+    };
+    'illustration-danger': {
+        __ref: any;
+    };
+    'illustration-warning': {
+        __ref: any;
+    };
+    'illustration-warning-surface': {
+        __ref: any;
+    };
+    'illustration-info': {
+        __ref: any;
+    };
+    'illustration-info-surface': {
+        __ref: any;
+    };
+};
+//# sourceMappingURL=illustration.d.ts.map

package/src/tokens/theme/illustration.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"illustration.d.ts","sourceRoot":"","sources":["illustration.js"],"names":[],"mappings":";;;;;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsBC"}

package/src/tokens/theme/illustration.js

@@ -0,0 +1,32 @@
+import { tokenRef } from '../../scripts/refs.js'
+
+const aliases = {
+  'illustration-ground': tokenRef('theme.background.bg-canvas'),
+  'illustration-surface': tokenRef('theme.background.bg-surface'),
+  'illustration-surface-raised': tokenRef('theme.background.bg-surface-raised'),
+  'illustration-block': tokenRef('theme.background.bg-selected'),
+  'illustration-line': tokenRef('theme.border.border-default'),
+  'illustration-line-muted': tokenRef('theme.border.border-muted'),
+  'illustration-line-strong': tokenRef('theme.text.text-disabled'),
+  'illustration-highlight': tokenRef('theme.border.border-strong'),
+  'illustration-ink': tokenRef('theme.text.text-default'),
+  'illustration-ink-muted': tokenRef('theme.text.text-muted'),
+  'illustration-primary': tokenRef('theme.primary.primary'),
+  'illustration-accent': tokenRef('theme.accent.accent'),
+  'illustration-code-punctuation': tokenRef('theme.codeSintax.code-sintax-punctuation'),
+  'illustration-code-keyword': tokenRef('theme.codeSintax.code-sintax-keyword'),
+  'illustration-success': tokenRef('theme.success.success-contrast'),
+  'illustration-success-surface': tokenRef('theme.success.success'),
+  'illustration-danger': tokenRef('theme.danger.danger-contrast'),
+  'illustration-warning': tokenRef('theme.warning.warning-contrast'),
+  'illustration-warning-surface': tokenRef('theme.warning.warning'),
+  'illustration-info': tokenRef('theme.info.info-contrast'),
+  'illustration-info-surface': tokenRef('theme.info.info')
+}
+
+export const illustration = {
+  light: aliases,
+  dark: aliases
+}
+
+export default { illustration }

package/src/tokens/theme/surfaces.d.ts

@@ -25,6 +25,9 @@ declare const shared: {
     'surface-250': {
         __ref: any;
     };
+    'surface-275': {
+        __ref: any;
+    };
     'surface-300': {
         __ref: any;
     };
@@ -37,6 +40,9 @@ declare const shared: {
     'surface-600': {
         __ref: any;
     };
+    'surface-650': {
+        __ref: any;
+    };
     'surface-700': {
         __ref: any;
     };

package/src/tokens/theme/surfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"surfaces.d.ts","sourceRoot":"","sources":["surfaces.js"],"names":[],"mappings":";;;;;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiBC"}
+{"version":3,"file":"surfaces.d.ts","sourceRoot":"","sources":["surfaces.js"],"names":[],"mappings":";;;;;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmBC"}

package/src/tokens/theme/surfaces.js

@@ -7,10 +7,12 @@ const shared = {
   'surface-150': tokenRef('primitives.gray.150'),
   'surface-200': tokenRef('primitives.gray.200'),
   'surface-250': tokenRef('primitives.gray.250'),
+  'surface-275': tokenRef('primitives.gray.275'),
   'surface-300': tokenRef('primitives.gray.300'),
   'surface-400': tokenRef('primitives.gray.400'),
   'surface-500': tokenRef('primitives.gray.500'),
   'surface-600': tokenRef('primitives.gray.600'),
+  'surface-650': tokenRef('primitives.gray.650'),
   'surface-700': tokenRef('primitives.gray.700'),
   'surface-750': tokenRef('primitives.gray.750'),
   'surface-775': tokenRef('primitives.gray.775'),

package/src/tokens/theme/text.js

@@ -3,7 +3,7 @@ import { tokenRef } from '../../scripts/refs.js'
 export const text = {
   light: {
     'text-default': tokenRef('primitives.gray.900'),
-    'text-muted': tokenRef('primitives.gray.500'),
+    'text-muted': tokenRef('primitives.gray.650'),
     'text-disabled': tokenRef('primitives.gray.400'),
     'text-link': tokenRef('primitives.blue.600'),
     'text-link-hover': tokenRef('primitives.blue.700'),

package/src/tokens/theme.d.ts

@@ -80,10 +80,12 @@ export namespace theme {
                 150: string;
                 200: string;
                 250: string;
+                275: string;
                 300: string;
                 400: string;
                 500: string;
                 600: string;
+                650: string;
                 700: string;
                 750: string;
                 775: string;