@aziontech/theme 4.1.0 → 4.3.0

package/dist/v4/globals.css

@@ -413,6 +413,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 +435,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 +542,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 +598,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 +613,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;
@@ -658,6 +672,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;
@@ -669,6 +684,9 @@
   --spacing-sm: 0.75rem;
   --spacing-xs: 0.5rem;
   --spacing-xxs: 0.25rem;
+  --z-input-field: 1;
+  --z-input-popup: 10;
+  --z-input-overlay: 1100;
   --text-big-number-md-font-size: 1.25rem;
   --text-big-number-md-line-height: 1.25;
   --text-big-number-md-font-weight: 400;
@@ -704,13 +722,13 @@
   --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;
@@ -745,17 +763,17 @@
   --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;
@@ -832,15 +850,17 @@
   --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;
@@ -852,7 +872,7 @@
   --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;
@@ -862,6 +882,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;
@@ -875,7 +896,7 @@
   --danger-border: #E51A1A66;
   --danger-contrast: #891010;
   --info: #CCE4FF;
-  --info-border: #8A84EC66;
+  --info-border: #0072F566;
   --info-contrast: #004799;
 }
 
@@ -900,17 +921,19 @@
   --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;
@@ -920,7 +943,7 @@
   --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;
@@ -930,6 +953,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;
@@ -943,7 +967,7 @@
   --danger-border: #E51A1A66;
   --danger-contrast: #ED7878;
   --info: #001833;
-  --info-border: #0072F580;
+  --info-border: #0072F566;
   --info-contrast: #66ADFF;
 }
 
@@ -978,13 +1002,13 @@
 }
 
 @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 {
@@ -1019,6 +1043,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); }
@@ -1319,6 +1348,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/dist/v4/globals.scss

@@ -413,6 +413,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 +435,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 +542,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 +598,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 +613,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;
@@ -658,6 +672,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;
@@ -669,6 +684,9 @@
   --spacing-sm: 0.75rem;
   --spacing-xs: 0.5rem;
   --spacing-xxs: 0.25rem;
+  --z-input-field: 1;
+  --z-input-popup: 10;
+  --z-input-overlay: 1100;
   --text-big-number-md-font-size: 1.25rem;
   --text-big-number-md-line-height: 1.25;
   --text-big-number-md-font-weight: 400;
@@ -704,13 +722,13 @@
   --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;
@@ -745,17 +763,17 @@
   --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;
@@ -832,15 +850,17 @@
   --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;
@@ -852,7 +872,7 @@
   --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;
@@ -862,6 +882,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;
@@ -875,7 +896,7 @@
   --danger-border: #E51A1A66;
   --danger-contrast: #891010;
   --info: #CCE4FF;
-  --info-border: #8A84EC66;
+  --info-border: #0072F566;
   --info-contrast: #004799;
 }
 
@@ -900,17 +921,19 @@
   --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;
@@ -920,7 +943,7 @@
   --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;
@@ -930,6 +953,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;
@@ -943,7 +967,7 @@
   --danger-border: #E51A1A66;
   --danger-contrast: #ED7878;
   --info: #001833;
-  --info-border: #0072F580;
+  --info-border: #0072F566;
   --info-contrast: #66ADFF;
 }
 
@@ -978,13 +1002,13 @@
 }
 
 @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 {
@@ -1019,6 +1043,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); }
@@ -1319,6 +1348,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.1.0",
+  "version": "4.3.0",
   "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/",