@aziontech/theme 4.2.0 → 4.3.1

package/dist/v4/globals.scss

@@ -173,7 +173,7 @@
 
 
 /*
- * `@aziontech/webkit` components use arbitrary values (`bg-[var(--x)]`) that
+ * `@aziontech/webkit` components use arbitrary values (`bg-(--x)`) that
  * Tailwind v4 only picks up when the source files are inside the scan.
  * Auto-detect scans the CWD only, so we point `@source` at the webkit
  * package via a monorepo-relative path (this file is under
@@ -197,12 +197,16 @@
   --color-blue-950: #000C1A;
   --color-gray-50: #FAFAFA;
   --color-gray-100: #F5F5F5;
+  --color-gray-150: #ECECEC;
   --color-gray-200: #E5E5E5;
+  --color-gray-250: #DADADA;
   --color-gray-300: #B2B2B2;
   --color-gray-400: #999999;
   --color-gray-500: #808080;
   --color-gray-600: #666666;
   --color-gray-700: #4D4D4D;
+  --color-gray-750: #2B2B2B;
+  --color-gray-775: #242424;
   --color-gray-800: #1A1A1A;
   --color-gray-900: #141414;
   --color-gray-950: #0A0A0A;
@@ -404,7 +408,9 @@
   --animate-fade-in: fadeIn 220ms ease-in-out;
   --animate-fade-out: fadeOut 220ms ease-in-out;
   --animate-slide-down: slideDown 220ms ease-in-out;
-  --animate-highlight-fade: highlight ease-in forwards;
+  --animate-highlight-fade: highlight 1100ms ease-in forwards;
+  --animate-page-enter: pageEnter 240ms cubic-bezier(0.39, 0.57, 0.56, 1);
+  --animate-content-enter: contentEnter 240ms cubic-bezier(0.39, 0.57, 0.56, 1) var(--content-enter-delay, 0s) backwards;
   --animate-popup-scale-in: popupScaleIn 150ms cubic-bezier(0.39, 0.57, 0.56, 1);
   --animate-popup-scale-out: popupScaleOut 110ms cubic-bezier(0.55, 0.09, 0.68, 0.53);
   --animate-slide-in-left: slideInLeft 240ms cubic-bezier(0.39, 0.57, 0.56, 1);
@@ -413,6 +419,19 @@
   --animate-slide-out-right: slideOutRight 150ms cubic-bezier(0.55, 0.09, 0.68, 0.53);
   --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;
+  --transition-duration-fast-01: 70ms;
+  --transition-duration-fast-02: 110ms;
+  --transition-duration-moderate-01: 150ms;
+  --transition-duration-moderate-02: 240ms;
+  --transition-duration-slow-01: 400ms;
+  --transition-duration-slow-02: 700ms;
+  --transition-duration-slow-03: 1100ms;
+  --transition-duration-slow-04: 2100ms;
+  --ease-productive-entrance: cubic-bezier(0.39, 0.57, 0.56, 1);
+  --ease-productive-exit: cubic-bezier(0.55, 0.09, 0.68, 0.53);
+  --ease-expressive-entrance: cubic-bezier(0.17, 0.84, 0.44, 1);
+  --ease-expressive-exit: cubic-bezier(0.95, 0.05, 0.8, 0.04);
 }
 
 :root, [data-theme=light], .azion.azion-light {
@@ -422,18 +441,18 @@
   --border-3: 3px;
   --border-4: 4px;
   --container-3xs: 256px;
-  --container-2xs: 288px;
-  --container-xs: 320px;
-  --container-sm: 384px;
-  --container-md: 448px;
-  --container-lg: 512px;
-  --container-xl: 576px;
-  --container-2xl: 672px;
-  --container-3xl: 768px;
-  --container-4xl: 896px;
-  --container-5xl: 1024px;
-  --container-6xl: 1152px;
-  --container-7xl: 1280px;
+  --container-2xs: 300px;
+  --container-xs: 348px;
+  --container-sm: 408px;
+  --container-md: 472px;
+  --container-lg: 552px;
+  --container-xl: 644px;
+  --container-2xl: 752px;
+  --container-3xl: 876px;
+  --container-4xl: 1024px;
+  --container-5xl: 1192px;
+  --container-6xl: 1388px;
+  --container-7xl: 1620px;
   --height-2: 8px;
   --height-3: 12px;
   --height-4: 16px;
@@ -529,18 +548,18 @@
   --spacing-80: 320px;
   --spacing-96: 384px;
   --width-3xs: 256px;
-  --width-2xs: 288px;
-  --width-xs: 320px;
-  --width-sm: 384px;
-  --width-md: 448px;
-  --width-lg: 512px;
-  --width-xl: 576px;
-  --width-2xl: 672px;
-  --width-3xl: 768px;
-  --width-4xl: 896px;
-  --width-5xl: 1024px;
-  --width-6xl: 1152px;
-  --width-7xl: 1280px;
+  --width-2xs: 300px;
+  --width-xs: 348px;
+  --width-sm: 408px;
+  --width-md: 472px;
+  --width-lg: 552px;
+  --width-xl: 644px;
+  --width-2xl: 752px;
+  --width-3xl: 876px;
+  --width-4xl: 1024px;
+  --width-5xl: 1192px;
+  --width-6xl: 1388px;
+  --width-7xl: 1620px;
   --aspect-video: 16 / 9;
   --shape-flat: 0;
   --shape-card: 8px;
@@ -585,6 +604,7 @@
   --font-weight-bold: 700;
   --font-weight-extrabold: 800;
   --font-weight-black: 900;
+  --leading-none: 1;
   --leading-tight: 1.25;
   --leading-snug: 1.375;
   --leading-normal: 1.5;
@@ -599,12 +619,12 @@
   --line-height-9: 36px;
   --line-height-10: 40px;
   --line-height-none: 0;
-  --tracking-tighter: -0.05em;
-  --tracking-tight: -0.025em;
-  --tracking-normal: 0em;
-  --tracking-wide: 0.025em;
-  --tracking-wider: 0.05em;
-  --tracking-widest: 0.1em;
+  --tracking-tighter: -0.05rem;
+  --tracking-tight: -0.025rem;
+  --tracking-normal: 0;
+  --tracking-wide: 0.025rem;
+  --tracking-wider: 0.05rem;
+  --tracking-widest: 0.1rem;
   --blur-xs: 4px;
   --blur-sm: 8px;
   --blur-md: 12px;
@@ -649,7 +669,9 @@
   --animate-fade-in: fadeIn 220ms ease-in-out;
   --animate-fade-out: fadeOut 220ms ease-in-out;
   --animate-slide-down: slideDown 220ms ease-in-out;
-  --animate-highlight-fade: highlight ease-in forwards;
+  --animate-highlight-fade: highlight 1100ms ease-in forwards;
+  --animate-page-enter: pageEnter 240ms cubic-bezier(0.39, 0.57, 0.56, 1);
+  --animate-content-enter: contentEnter 240ms cubic-bezier(0.39, 0.57, 0.56, 1) var(--content-enter-delay, 0s) backwards;
   --animate-popup-scale-in: popupScaleIn 150ms cubic-bezier(0.39, 0.57, 0.56, 1);
   --animate-popup-scale-out: popupScaleOut 110ms cubic-bezier(0.55, 0.09, 0.68, 0.53);
   --animate-slide-in-left: slideInLeft 240ms cubic-bezier(0.39, 0.57, 0.56, 1);
@@ -658,6 +680,7 @@
   --animate-slide-out-right: slideOutRight 150ms cubic-bezier(0.55, 0.09, 0.68, 0.53);
   --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;
   --ring-offset: 0.5px;
   --container-px: 1rem;
   --container-py: 4rem;
@@ -672,6 +695,18 @@
   --z-input-field: 1;
   --z-input-popup: 10;
   --z-input-overlay: 1100;
+  --layout-boundary-inline: var(--spacing-lg);
+  --layout-boundary-end: var(--spacing-lg);
+  --layout-boundary-start: var(--spacing-lg);
+  --layout-section-gap: var(--spacing-xl);
+  --layout-group-gap: var(--spacing-md);
+  --layout-measure: var(--container-7xl);
+  --layout-measure-focused: var(--container-4xl);
+  --layout-measure-form: var(--container-4xl);
+  --layout-measure-form-create: var(--container-5xl);
+  --layout-measure-docs: var(--container-4xl);
+  --container-site: var(--container-5xl);
+  --layout-measure-control: var(--container-3xs);
   --text-big-number-md-font-size: 1.25rem;
   --text-big-number-md-line-height: 1.25;
   --text-big-number-md-font-weight: 400;
@@ -707,18 +742,24 @@
   --text-heading-xxs-font-weight: 400;
   --text-label-lg-font-size: 1rem;
   --text-label-lg-line-height: 1.5;
-  --text-label-lg-font-weight: 500;
+  --text-label-lg-font-weight: 400;
   --text-label-md-font-size: 0.875rem;
   --text-label-md-line-height: 1.5;
-  --text-label-md-font-weight: 500;
+  --text-label-md-font-weight: 400;
   --text-label-sm-font-size: 0.75rem;
   --text-label-sm-line-height: 1.5;
-  --text-label-sm-font-weight: 500;
+  --text-label-sm-font-weight: 400;
   --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-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-label-code-md-font-family: Roboto Mono;
   --text-label-code-md-font-size: 0.875rem;
   --text-label-code-md-line-height: 1;
@@ -730,35 +771,43 @@
   --text-label-code-lg-font-weight: 400;
   --text-label-code-lg-letter-spacing: 0;
   --text-body-lg-font-size: 1rem;
-  --text-body-lg-line-height: 1.5;
+  --text-body-lg-font-weight: 400;
+  --text-body-lg-line-height: 1.375;
   --text-body-md-font-size: 1rem;
-  --text-body-md-line-height: 1.5;
+  --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-font-size: 0.875rem;
-  --text-body-sm-line-height: 1.5;
+  --text-body-sm-font-weight: 400;
+  --text-body-sm-line-height: 1.375;
   --text-body-xs-font-size: 0.75rem;
-  --text-body-xs-line-height: 1.5;
+  --text-body-xs-font-weight: 400;
+  --text-body-xs-line-height: 1.375;
+  --text-body-xxs-font-size: 0.75rem;
+  --text-body-xxs-font-weight: 400;
+  --text-body-xxs-line-height: 1.5;
   --text-tag-sm-font-size: 0.75rem;
   --text-tag-sm-line-height: 1.25;
-  --text-tag-sm-font-weight: 600;
+  --text-tag-sm-font-weight: 400;
   --text-tag-md-font-size: 0.75rem;
   --text-tag-md-line-height: 1.25;
-  --text-tag-md-font-weight: 600;
-  --text-body-xxs-font-size: 0.75rem;
-  --text-body-xxs-line-height: 1.5;
+  --text-tag-md-font-weight: 400;
   --text-overline-md-font-family: Proto Mono;
   --text-overline-md-font-size: 0.75rem;
   --text-overline-md-line-height: 1.375;
-  --text-overline-md-letter-spacing: 0.08em;
+  --text-overline-md-letter-spacing: 0.1rem;
   --text-overline-md-text-transform: uppercase;
   --text-overline-sm-font-family: Proto Mono;
   --text-overline-sm-font-size: 0.75rem;
   --text-overline-sm-line-height: 1.375;
-  --text-overline-sm-letter-spacing: 0.08em;
+  --text-overline-sm-letter-spacing: 0.1rem;
   --text-overline-sm-text-transform: uppercase;
   --text-overline-xs-font-family: Proto Mono;
   --text-overline-xs-font-size: 0.75rem;
   --text-overline-xs-line-height: 1.375;
-  --text-overline-xs-letter-spacing: 0.08em;
+  --text-overline-xs-letter-spacing: 0.1rem;
   --text-overline-xs-text-transform: uppercase;
   --text-button-lg-font-family: Sora;
   --text-button-lg-font-size: 0.875rem;
@@ -818,12 +867,16 @@
   --surface-0: #FFFFFF;
   --surface-50: #FAFAFA;
   --surface-100: #F5F5F5;
+  --surface-150: #ECECEC;
   --surface-200: #E5E5E5;
+  --surface-250: #DADADA;
   --surface-300: #B2B2B2;
   --surface-400: #999999;
   --surface-500: #808080;
   --surface-600: #666666;
   --surface-700: #4D4D4D;
+  --surface-750: #2B2B2B;
+  --surface-775: #242424;
   --surface-800: #1A1A1A;
   --surface-900: #141414;
   --surface-950: #0A0A0A;
@@ -835,27 +888,29 @@
   --secondary-mask: #00000005;
   --secondary-selected: #0A0A0A;
   --secondary-contrast: #FFFFFF;
-  --accent: #756FE5;
-  --accent-mask: #8A84EC0D;
-  --accent-selected: #8A84EC;
+  --accent: #0072F5;
+  --accent-mask: #0072F51A;
+  --accent-selected: #0072F5;
   --accent-contrast: #000000;
   --bg-canvas: #FAFAFA;
   --bg-surface: #FFFFFF;
   --bg-surface-raised: #FFFFFF;
   --bg-mask: #00000005;
   --bg-surface-overlay: #FAFAFA;
+  --bg-placeholder: #00000014;
+  --bg-placeholder-highlight: #FFFFFF99;
   --bg-hover: #00000014;
   --bg-active: #00000005;
   --bg-backdrop: #000000CC;
   --bg-selected: #E5E5E5;
   --bg-contrast: #141414;
   --bg-disabled: #E5E5E5;
-  --border-default: #00000014;
-  --border-muted: #00000014;
+  --border-default: #DADADA;
+  --border-muted: #ECECEC;
   --border-strong: #000000;
   --border-selected: #F3652B;
   --text-default: #141414;
-  --text-muted: #666666;
+  --text-muted: #808080;
   --text-disabled: #999999;
   --text-link: #005FCC;
   --text-link-hover: #004799;
@@ -865,6 +920,7 @@
   --code-sintax-line-number: #808080;
   --code-sintax-keyword: #005FCC;
   --code-sintax-punctuation: #808080;
+  --code-sintax-comment: #808080;
   --code-sintax-function: #F3652B;
   --code-sintax-type: #947105;
   --code-sintax-string: #005FCC;
@@ -878,7 +934,7 @@
   --danger-border: #E51A1A66;
   --danger-contrast: #891010;
   --info: #CCE4FF;
-  --info-border: #8A84EC66;
+  --info-border: #0072F566;
   --info-contrast: #004799;
 }
 
@@ -886,12 +942,16 @@
   --surface-0: #FFFFFF;
   --surface-50: #FAFAFA;
   --surface-100: #F5F5F5;
+  --surface-150: #ECECEC;
   --surface-200: #E5E5E5;
+  --surface-250: #DADADA;
   --surface-300: #B2B2B2;
   --surface-400: #999999;
   --surface-500: #808080;
   --surface-600: #666666;
   --surface-700: #4D4D4D;
+  --surface-750: #2B2B2B;
+  --surface-775: #242424;
   --surface-800: #1A1A1A;
   --surface-900: #141414;
   --surface-950: #0A0A0A;
@@ -903,27 +963,29 @@
   --secondary-mask: #FFFFFF1A;
   --secondary-selected: #FFFFFF;
   --secondary-contrast: #000000;
-  --accent: #8A84EC;
-  --accent-mask: #8A84EC1A;
-  --accent-selected: #8A84EC;
+  --accent: #0072F5;
+  --accent-mask: #0072F51A;
+  --accent-selected: #0072F5;
   --accent-contrast: #000000;
   --bg-canvas: #000000;
   --bg-surface: #0A0A0A;
   --bg-surface-raised: #141414;
   --bg-mask: #FFFFFF0D;
   --bg-surface-overlay: #4D4D4D;
-  --bg-hover: #00000033;
-  --bg-active: #00000014;
+  --bg-placeholder: #FFFFFF1A;
+  --bg-placeholder-highlight: #FFFFFF1A;
+  --bg-hover: #FFFFFF1A;
+  --bg-active: #FFFFFF0D;
   --bg-backdrop: #000000CC;
   --bg-selected: #1A1A1A;
   --bg-contrast: #FAFAFA;
   --bg-disabled: #1A1A1A;
-  --border-default: #FFFFFF1A;
-  --border-muted: #FFFFFF0D;
+  --border-default: #2B2B2B;
+  --border-muted: #242424;
   --border-strong: #FFFFFF;
   --border-selected: #F3652B;
   --text-default: #FAFAFA;
-  --text-muted: #999999;
+  --text-muted: #808080;
   --text-disabled: #4D4D4D;
   --text-link: #3392FF;
   --text-link-hover: #66ADFF;
@@ -933,6 +995,7 @@
   --code-sintax-line-number: #999999;
   --code-sintax-keyword: #3392FF;
   --code-sintax-punctuation: #999999;
+  --code-sintax-comment: #999999;
   --code-sintax-function: #F3652B;
   --code-sintax-type: #FAD76B;
   --code-sintax-string: #3392FF;
@@ -946,7 +1009,7 @@
   --danger-border: #E51A1A66;
   --danger-contrast: #ED7878;
   --info: #001833;
-  --info-border: #0072F580;
+  --info-border: #0072F566;
   --info-contrast: #66ADFF;
 }
 
@@ -971,8 +1034,8 @@
 }
 
 @keyframes highlight {
-  0% { background-color: var(--surface-hover); font-weight: 500; }
-  100% { background-color: var(--surface-hover); font-weight: 500; }
+  0%, 40% { background-color: var(--surface-hover); font-weight: 500; }
+  100% { background-color: transparent; font-weight: 400; }
 }
 
 @keyframes shimmer {
@@ -980,14 +1043,24 @@
   100% { background-position: -200% 0; }
 }
 
+@keyframes pageEnter {
+  0% { opacity: 0; translate: calc(var(--page-enter-distance, var(--layout-boundary-inline)) * -1) 0; }
+  100% { opacity: 1; translate: 0 0; }
+}
+
+@keyframes contentEnter {
+  0% { opacity: 0; translate: 0 var(--spacing-xs); }
+  100% { opacity: 1; translate: 0 0; }
+}
+
 @keyframes popupScaleIn {
-  0% { opacity: 0; transform: scale(0.95); }
+  0% { opacity: 0; transform: scale(0.9); }
   100% { opacity: 1; transform: scale(1); }
 }
 
 @keyframes popupScaleOut {
   0% { opacity: 1; transform: scale(1); }
-  100% { opacity: 0; transform: scale(0.95); }
+  100% { opacity: 0; transform: scale(0.9); }
 }
 
 @keyframes slideInLeft {
@@ -1022,6 +1095,11 @@
   100% { inset-inline-start: 107%; inset-inline-end: -8%; }
 }
 
+@keyframes flowDash {
+  0% { stroke-dashoffset: 24; }
+  100% { stroke-dashoffset: 0; }
+}
+
 @layer components {
   /* ── Containers ── */
   .px-container { padding-left: var(--container-px); padding-right: var(--container-px); }
@@ -1138,6 +1216,15 @@
   letter-spacing: var(--text-label-code-sm-letter-spacing);
 }
 
+@utility text-body-code-sm {
+  text-wrap-style: var(--text-body-code-sm-text-wrap-style);
+  font-family: var(--text-body-code-sm-font-family);
+  font-size: var(--text-body-code-sm-font-size);
+  line-height: var(--text-body-code-sm-line-height);
+  font-weight: var(--text-body-code-sm-font-weight);
+  letter-spacing: var(--text-body-code-sm-letter-spacing);
+}
+
 @utility text-label-code-md {
   font-family: var(--text-label-code-md-font-family);
   font-size: var(--text-label-code-md-font-size);
@@ -1156,24 +1243,40 @@
 
 @utility text-body-lg {
   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 {
   font-size: var(--text-body-md-font-size);
+  font-weight: var(--text-body-md-font-weight);
   line-height: var(--text-body-md-line-height);
 }
 
+@utility text-body-prose-md {
+  font-size: var(--text-body-prose-md-font-size);
+  font-weight: var(--text-body-prose-md-font-weight);
+  line-height: var(--text-body-prose-md-line-height);
+}
+
 @utility text-body-sm {
   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 {
   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 {
+  font-size: var(--text-body-xxs-font-size);
+  font-weight: var(--text-body-xxs-font-weight);
+  line-height: var(--text-body-xxs-line-height);
+}
+
 @utility text-tag-sm {
   font-size: var(--text-tag-sm-font-size);
   line-height: var(--text-tag-sm-line-height);
@@ -1186,11 +1289,6 @@
   font-weight: var(--text-tag-md-font-weight);
 }
 
-@utility text-body-xxs {
-  font-size: var(--text-body-xxs-font-size);
-  line-height: var(--text-body-xxs-line-height);
-}
-
 @utility text-overline-md {
   font-family: var(--text-overline-md-font-family);
   font-size: var(--text-overline-md-font-size);
@@ -1245,6 +1343,71 @@
   .text-link { transition: none; }
 }
 
+@utility layout-boundary {
+  padding-inline: var(--layout-boundary-inline);
+  padding-block-start: var(--layout-boundary-start);
+  padding-block-end: var(--layout-boundary-end);
+}
+
+@utility layout-boundary-inline {
+  padding-inline: var(--layout-boundary-inline);
+}
+
+@utility layout-section-start {
+  margin-block-start: var(--layout-boundary-start);
+  &:first-child { margin-block-start: 0; }
+}
+
+@utility layout-group-start {
+  margin-block-start: var(--layout-group-gap);
+  &:first-child { margin-block-start: 0; }
+}
+
+@utility layout-column {
+  --layout-column-measure: var(--layout-measure);
+  margin-inline: auto;
+  width: 100%;
+  max-width: var(--layout-column-measure);
+  &:is(.layout-boundary, .layout-boundary-inline) { max-width: calc(var(--layout-column-measure) + 2 * var(--layout-boundary-inline)); }
+}
+
+@utility layout-column-focused {
+  --layout-column-measure: var(--layout-measure-focused);
+  margin-inline: auto;
+  width: 100%;
+  max-width: var(--layout-column-measure);
+  &:is(.layout-boundary, .layout-boundary-inline) { max-width: calc(var(--layout-column-measure) + 2 * var(--layout-boundary-inline)); }
+}
+
+@utility layout-column-form {
+  --layout-column-measure: var(--layout-measure-form);
+  margin-inline: auto;
+  width: 100%;
+  max-width: var(--layout-column-measure);
+  &:is(.layout-boundary, .layout-boundary-inline) { max-width: calc(var(--layout-column-measure) + 2 * var(--layout-boundary-inline)); }
+}
+
+@utility layout-form-create {
+  --layout-column-measure: var(--layout-measure-form-create);
+  --layout-measure-control: var(--container-md);
+  margin-inline: auto;
+  width: 100%;
+  max-width: var(--layout-column-measure);
+  &:is(.layout-boundary, .layout-boundary-inline) { max-width: calc(var(--layout-column-measure) + 2 * var(--layout-boundary-inline)); }
+}
+
+@utility layout-column-docs {
+  --layout-column-measure: var(--layout-measure-docs);
+  margin-inline: auto;
+  width: 100%;
+  max-width: var(--layout-column-measure);
+  &:is(.layout-boundary, .layout-boundary-inline) { max-width: calc(var(--layout-column-measure) + 2 * var(--layout-boundary-inline)); }
+}
+
+@utility layout-field-control {
+  &:not(#\#) { display: flex; flex: 1 1 0%; justify-content: flex-end; max-width: var(--layout-measure-control); }
+}
+
 @utility bg-surface-0 { background-color: var(--surface-0); }
 @utility text-surface-0 { color: var(--surface-0); }
 @utility border-surface-0 { border-color: var(--surface-0); }
@@ -1254,9 +1417,15 @@
 @utility bg-surface-100 { background-color: var(--surface-100); }
 @utility text-surface-100 { color: var(--surface-100); }
 @utility border-surface-100 { border-color: var(--surface-100); }
+@utility bg-surface-150 { background-color: var(--surface-150); }
+@utility text-surface-150 { color: var(--surface-150); }
+@utility border-surface-150 { border-color: var(--surface-150); }
 @utility bg-surface-200 { background-color: var(--surface-200); }
 @utility text-surface-200 { color: var(--surface-200); }
 @utility border-surface-200 { border-color: var(--surface-200); }
+@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-300 { background-color: var(--surface-300); }
 @utility text-surface-300 { color: var(--surface-300); }
 @utility border-surface-300 { border-color: var(--surface-300); }
@@ -1272,6 +1441,12 @@
 @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); }
+@utility bg-surface-750 { background-color: var(--surface-750); }
+@utility text-surface-750 { color: var(--surface-750); }
+@utility border-surface-750 { border-color: var(--surface-750); }
+@utility bg-surface-775 { background-color: var(--surface-775); }
+@utility text-surface-775 { color: var(--surface-775); }
+@utility border-surface-775 { border-color: var(--surface-775); }
 @utility bg-surface-800 { background-color: var(--surface-800); }
 @utility text-surface-800 { color: var(--surface-800); }
 @utility border-surface-800 { border-color: var(--surface-800); }
@@ -1322,6 +1497,8 @@
 @utility bg-surface-raised { background-color: var(--bg-surface-raised); }
 @utility bg-mask { background-color: var(--bg-mask); }
 @utility bg-surface-overlay { background-color: var(--bg-surface-overlay); }
+@utility bg-placeholder { background-color: var(--bg-placeholder); }
+@utility bg-placeholder-highlight { background-color: var(--bg-placeholder-highlight); }
 @utility bg-hover { background-color: var(--bg-hover); }
 @utility bg-active { background-color: var(--bg-active); }
 @utility bg-backdrop { background-color: var(--bg-backdrop); }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@aziontech/theme",
   "type": "module",
-  "version": "4.2.0",
+  "version": "4.3.1",
   "author": "aziontech",
   "license": "MIT",
   "repository": {
@@ -11,6 +11,7 @@
   },
   "scripts": {
     "pack:dry": "npm pack --dry-run",
+    "test": "node --test \"test/**/*.test.mjs\"",
     "format": "prettier --write scripts/ src/",
     "build": "pnpm build:tokens",
     "build:tokens": "node src/scripts/build-tokens.mjs",
@@ -31,19 +32,8 @@
     "ui-kit",
     "token-generator"
   ],
-  "dependencies": {
-    "vue-tsc": "^3.2.5"
-  },
   "devDependencies": {
-    "@semantic-release/changelog": "^6.0.3",
-    "@semantic-release/commit-analyzer": "^10.0.1",
-    "@semantic-release/exec": "^6.0.3",
-    "@semantic-release/git": "^10.0.1",
-    "@semantic-release/github": "^9.2.6",
-    "@semantic-release/npm": "^11.0.0",
-    "@semantic-release/release-notes-generator": "^12.1.0",
-    "conventional-changelog-conventionalcommits": "^7.0.0",
-    "semantic-release": "^23.0.0"
+    "vue-tsc": "^3.2.5"
   },
   "files": [
     "src/",
@@ -54,6 +44,7 @@
     ".": "./dist/v4/globals.css",
     "./animations": "./src/tokens/primitives/animations/animate.js",
     "./colors": "./src/tokens/primitives/colors/colors.js",
+    "./layouts": "./src/tokens/semantic/layouts.data.js",
     "./texts": "./src/tokens/semantic/texts.data.js",
     "./theme-colors": "./src/scripts/compile-theme.js"
   }