@aziontech/theme 5.0.0 → 5.2.0

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,72 +742,99 @@
   --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.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;
+  --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;
+  --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;
+  --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;
+  --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;
+  --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;
   --text-label-lg-font-size: 1rem;
   --text-label-lg-line-height: 1.5;
   --text-label-lg-font-weight: 400;
+  --text-label-lg-letter-spacing: -0.025rem;
   --text-label-md-font-size: 0.875rem;
   --text-label-md-line-height: 1.5;
   --text-label-md-font-weight: 400;
+  --text-label-md-letter-spacing: -0.025rem;
   --text-label-sm-font-size: 0.75rem;
   --text-label-sm-line-height: 1.5;
   --text-label-sm-font-weight: 400;
+  --text-label-sm-letter-spacing: -0.025rem;
   --text-label-code-sm-font-family: Roboto Mono;
   --text-label-code-sm-font-size: 0.75rem;
   --text-label-code-sm-line-height: 1;
   --text-label-code-sm-font-weight: 400;
-  --text-label-code-sm-letter-spacing: 0;
+  --text-label-code-sm-letter-spacing: 0.025rem;
   --text-body-code-sm-text-wrap-style: pretty;
   --text-body-code-sm-font-family: Roboto Mono;
   --text-body-code-sm-font-size: 0.75rem;
   --text-body-code-sm-line-height: 1.625;
   --text-body-code-sm-font-weight: 400;
-  --text-body-code-sm-letter-spacing: 0;
+  --text-body-code-sm-letter-spacing: 0.025rem;
   --text-label-code-md-font-family: Roboto Mono;
   --text-label-code-md-font-size: 0.875rem;
   --text-label-code-md-line-height: 1;
   --text-label-code-md-font-weight: 400;
-  --text-label-code-md-letter-spacing: 0;
+  --text-label-code-md-letter-spacing: 0.025rem;
   --text-label-code-lg-font-family: Roboto Mono;
   --text-label-code-lg-font-size: 1rem;
   --text-label-code-lg-line-height: 1;
   --text-label-code-lg-font-weight: 400;
-  --text-label-code-lg-letter-spacing: 0;
+  --text-label-code-lg-letter-spacing: 0.025rem;
+  --text-body-lg-text-wrap-style: pretty;
   --text-body-lg-font-size: 1rem;
   --text-body-lg-font-weight: 400;
   --text-body-lg-line-height: 1.375;
+  --text-body-md-text-wrap-style: pretty;
   --text-body-md-font-size: 1rem;
   --text-body-md-font-weight: 400;
   --text-body-md-line-height: 1.375;
   --text-body-prose-md-font-size: 1rem;
   --text-body-prose-md-font-weight: 400;
   --text-body-prose-md-line-height: 1.625;
+  --text-body-sm-text-wrap-style: pretty;
   --text-body-sm-font-size: 0.875rem;
   --text-body-sm-font-weight: 400;
   --text-body-sm-line-height: 1.375;
+  --text-body-xs-text-wrap-style: pretty;
   --text-body-xs-font-size: 0.75rem;
   --text-body-xs-font-weight: 400;
   --text-body-xs-line-height: 1.375;
+  --text-body-xxs-text-wrap-style: pretty;
   --text-body-xxs-font-size: 0.75rem;
   --text-body-xxs-font-weight: 400;
   --text-body-xxs-line-height: 1.5;
@@ -852,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;
@@ -864,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;
@@ -889,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;
@@ -911,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;
@@ -924,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;
@@ -955,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 {
@@ -964,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;
@@ -1030,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 {
@@ -1119,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); }
@@ -1190,64 +1286,89 @@
   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);
   line-height: var(--text-heading-2xl-line-height);
   font-weight: var(--text-heading-2xl-font-weight);
+  letter-spacing: var(--text-heading-2xl-letter-spacing);
 }
 
 @utility text-heading-xl {
+  text-wrap-style: var(--text-heading-xl-text-wrap-style);
   font-size: var(--text-heading-xl-font-size);
   line-height: var(--text-heading-xl-line-height);
   font-weight: var(--text-heading-xl-font-weight);
+  letter-spacing: var(--text-heading-xl-letter-spacing);
 }
 
 @utility text-heading-lg {
+  text-wrap-style: var(--text-heading-lg-text-wrap-style);
   font-size: var(--text-heading-lg-font-size);
   line-height: var(--text-heading-lg-line-height);
   font-weight: var(--text-heading-lg-font-weight);
+  letter-spacing: var(--text-heading-lg-letter-spacing);
 }
 
 @utility text-heading-md {
+  text-wrap-style: var(--text-heading-md-text-wrap-style);
   font-size: var(--text-heading-md-font-size);
   line-height: var(--text-heading-md-line-height);
   font-weight: var(--text-heading-md-font-weight);
+  letter-spacing: var(--text-heading-md-letter-spacing);
 }
 
 @utility text-heading-sm {
+  text-wrap-style: var(--text-heading-sm-text-wrap-style);
   font-size: var(--text-heading-sm-font-size);
   line-height: var(--text-heading-sm-line-height);
   font-weight: var(--text-heading-sm-font-weight);
+  letter-spacing: var(--text-heading-sm-letter-spacing);
 }
 
 @utility text-heading-xs {
+  text-wrap-style: var(--text-heading-xs-text-wrap-style);
   font-size: var(--text-heading-xs-font-size);
   line-height: var(--text-heading-xs-line-height);
   font-weight: var(--text-heading-xs-font-weight);
+  letter-spacing: var(--text-heading-xs-letter-spacing);
 }
 
 @utility text-heading-xxs {
+  text-wrap-style: var(--text-heading-xxs-text-wrap-style);
   font-size: var(--text-heading-xxs-font-size);
   line-height: var(--text-heading-xxs-line-height);
   font-weight: var(--text-heading-xxs-font-weight);
+  letter-spacing: var(--text-heading-xxs-letter-spacing);
 }
 
 @utility text-label-lg {
   font-size: var(--text-label-lg-font-size);
   line-height: var(--text-label-lg-line-height);
   font-weight: var(--text-label-lg-font-weight);
+  letter-spacing: var(--text-label-lg-letter-spacing);
 }
 
 @utility text-label-md {
   font-size: var(--text-label-md-font-size);
   line-height: var(--text-label-md-line-height);
   font-weight: var(--text-label-md-font-weight);
+  letter-spacing: var(--text-label-md-letter-spacing);
 }
 
 @utility text-label-sm {
   font-size: var(--text-label-sm-font-size);
   line-height: var(--text-label-sm-line-height);
   font-weight: var(--text-label-sm-font-weight);
+  letter-spacing: var(--text-label-sm-letter-spacing);
 }
 
 @utility text-label-code-sm {
@@ -1284,12 +1405,14 @@
 }
 
 @utility text-body-lg {
+  text-wrap-style: var(--text-body-lg-text-wrap-style);
   font-size: var(--text-body-lg-font-size);
   font-weight: var(--text-body-lg-font-weight);
   line-height: var(--text-body-lg-line-height);
 }
 
 @utility text-body-md {
+  text-wrap-style: var(--text-body-md-text-wrap-style);
   font-size: var(--text-body-md-font-size);
   font-weight: var(--text-body-md-font-weight);
   line-height: var(--text-body-md-line-height);
@@ -1302,18 +1425,21 @@
 }
 
 @utility text-body-sm {
+  text-wrap-style: var(--text-body-sm-text-wrap-style);
   font-size: var(--text-body-sm-font-size);
   font-weight: var(--text-body-sm-font-weight);
   line-height: var(--text-body-sm-line-height);
 }
 
 @utility text-body-xs {
+  text-wrap-style: var(--text-body-xs-text-wrap-style);
   font-size: var(--text-body-xs-font-size);
   font-weight: var(--text-body-xs-font-weight);
   line-height: var(--text-body-xs-line-height);
 }
 
 @utility text-body-xxs {
+  text-wrap-style: var(--text-body-xxs-text-wrap-style);
   font-size: var(--text-body-xxs-font-size);
   font-weight: var(--text-body-xxs-font-weight);
   line-height: var(--text-body-xxs-line-height);
@@ -1474,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); }
@@ -1486,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); }
@@ -1601,6 +1733,11 @@
 @utility border-info-contrast { border-color: var(--info-contrast); }
 
 @layer base {
+  html {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
   button:not(:disabled),
   [role="button"]:not([aria-disabled="true"]),
   summary {