@rovula/ui 0.1.5 → 0.1.7

package/dist/cjs/bundle.css

@@ -1,7 +1,11 @@
-@import "./tokens/baseline.css";
 @import "./themes/variable.css";
-@import "./themes/xspector/baseline.css";
-@import "./themes/skyller/baseline.css";
+@import "./themes/variable-mapping.css";
+@import "./tokens/color.css"; 
+@import "./tokens/baseline.css";
+
+/* TODO: remove this */
+/* @import "./themes/xspector/baseline.css";
+@import "./themes/skyller/baseline.css"; */
 
 *, ::before, ::after{
   --tw-border-spacing-x: 0;
@@ -111,9 +115,7 @@
   --tw-contain-style:  ;
 }
 
-/*
-! tailwindcss v3.4.16 | MIT License | https://tailwindcss.com
-*/
+/* ! tailwindcss v3.4.16 | MIT License | https://tailwindcss.com */
 
 /*
 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
@@ -518,7 +520,7 @@ video {
 
 body {
     /* @apply bg-background text-foreground; */
-    /* @apply bg-[var(--backgroud)] text-[var(--foreground)]; */
+    /* @apply bg-[var(--background)] text-[var(--foreground)]; */
   }
 
 /* hide input number arrow */
@@ -1590,7 +1592,7 @@ input[type=number] {
 }
 .border-error-stroke{
   --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--state-color-error-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
+  border-color: color-mix(in srgb, var(--state-error-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 .border-function-default-solid{
   --tw-border-opacity: 1;
@@ -1598,23 +1600,23 @@ input[type=number] {
 }
 .border-info{
   --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--state-color-info-default) calc(100% * var(--tw-border-opacity, 1)), transparent);
+  border-color: color-mix(in srgb, var(--state-info-default) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 .border-info-stroke{
   --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--state-color-info-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
+  border-color: color-mix(in srgb, var(--state-info-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 .border-input-default-stroke{
   --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--input-color-default-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
+  border-color: color-mix(in srgb, var(--input-default-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 .border-primary{
   --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--state-color-primary-default) calc(100% * var(--tw-border-opacity, 1)), transparent);
+  border-color: color-mix(in srgb, var(--state-primary-default) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 .border-primary-10{
   --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--primary-ramps-primary-10) calc(100% * var(--tw-border-opacity, 1)), transparent);
+  border-color: color-mix(in srgb, var(--ramps-primary-10) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 .border-red-500{
   --tw-border-opacity: 1;
@@ -1622,15 +1624,15 @@ input[type=number] {
 }
 .border-secondary{
   --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--state-color-secondary-default) calc(100% * var(--tw-border-opacity, 1)), transparent);
+  border-color: color-mix(in srgb, var(--state-secondary-default) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 .border-state-disable-outline{
   --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--state-color-disable-outline) calc(100% * var(--tw-border-opacity, 1)), transparent);
+  border-color: color-mix(in srgb, var(--state-disable-outline) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 .border-success-stroke{
   --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--state-color-success-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
+  border-color: color-mix(in srgb, var(--state-success-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 .border-surface{
   --tw-border-opacity: 1;
@@ -1641,7 +1643,7 @@ input[type=number] {
 }
 .border-warning-stroke{
   --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--state-color-warning-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
+  border-color: color-mix(in srgb, var(--state-warning-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 .border-white{
   --tw-border-opacity: 1;
@@ -1652,38 +1654,42 @@ input[type=number] {
 }
 .border-l-input-default-stroke{
   --tw-border-opacity: 1;
-  border-left-color: color-mix(in srgb, var(--input-color-default-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
+  border-left-color: color-mix(in srgb, var(--input-default-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 .border-l-input-disable-stroke{
   --tw-border-opacity: 1;
-  border-left-color: color-mix(in srgb, var(--input-color-disable-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
+  border-left-color: color-mix(in srgb, var(--input-disable-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 .border-l-input-error{
   --tw-border-opacity: 1;
-  border-left-color: color-mix(in srgb, var(--input-color-error) calc(100% * var(--tw-border-opacity, 1)), transparent);
+  border-left-color: color-mix(in srgb, var(--input-error) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 .border-l-warning-stroke{
   --tw-border-opacity: 1;
-  border-left-color: color-mix(in srgb, var(--state-color-warning-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
+  border-left-color: color-mix(in srgb, var(--state-warning-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 .border-r-input-default-stroke{
   --tw-border-opacity: 1;
-  border-right-color: color-mix(in srgb, var(--input-color-default-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
+  border-right-color: color-mix(in srgb, var(--input-default-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 .border-r-input-error{
   --tw-border-opacity: 1;
-  border-right-color: color-mix(in srgb, var(--input-color-error) calc(100% * var(--tw-border-opacity, 1)), transparent);
+  border-right-color: color-mix(in srgb, var(--input-error) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 .border-r-warning-stroke{
   --tw-border-opacity: 1;
-  border-right-color: color-mix(in srgb, var(--state-color-warning-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
+  border-right-color: color-mix(in srgb, var(--state-warning-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 .border-t-\[var\(--footer-border-color\)\]{
   border-top-color: var(--footer-border-color);
 }
+.border-t-grey-transparent-24{
+  --tw-border-opacity: 1;
+  border-top-color: color-mix(in srgb, var(--transparent-grey-24) calc(100% * var(--tw-border-opacity, 1)), transparent);
+}
 .border-t-secondary{
   --tw-border-opacity: 1;
-  border-top-color: color-mix(in srgb, var(--state-color-secondary-default) calc(100% * var(--tw-border-opacity, 1)), transparent);
+  border-top-color: color-mix(in srgb, var(--state-secondary-default) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 .\!bg-action-button-icon-active-hover{
   --tw-bg-opacity: 1 !important;
@@ -1800,7 +1806,7 @@ input[type=number] {
 }
 .bg-base-popup-highlight{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--base-color-popup-hightlight) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--base-color-popup-highlight) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-base-stroke{
   --tw-bg-opacity: 1;
@@ -1816,27 +1822,27 @@ input[type=number] {
 }
 .bg-black-transparent-12{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-black-12) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-black-12) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-black-transparent-16{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-black-16) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-black-16) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-black-transparent-24{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-black-24) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-black-24) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-black-transparent-32{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-black-32) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-black-32) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-black-transparent-48{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-black-48) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-black-48) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-black-transparent-8{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-black-8) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-black-8) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-button-error-flat-default{
   --tw-bg-opacity: 1;
@@ -1932,47 +1938,47 @@ input[type=number] {
 }
 .bg-error{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-error-default) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--state-error-default) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-error-100{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--error-error-100) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-error-100) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-error-200{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--error-error-200) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-error-200) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-error-300{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--error-error-300) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-error-300) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-error-400{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--error-error-400) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-error-400) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-error-50{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--error-error-50) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-error-50) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-error-500{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--error-error-500) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-error-500) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-error-600{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--error-error-600) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-error-600) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-error-700{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--error-error-700) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-error-700) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-error-800{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--error-error-800) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-error-800) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-error-900{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--error-error-900) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-error-900) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-error-foreground{
   --tw-bg-opacity: 1;
@@ -1980,27 +1986,27 @@ input[type=number] {
 }
 .bg-error-transparent-12{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-error-12) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-error-12) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-error-transparent-16{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-error-16) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-error-16) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-error-transparent-24{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-error-24) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-error-24) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-error-transparent-32{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-error-32) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-error-32) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-error-transparent-48{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-error-48) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-error-48) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-error-transparent-8{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-error-8) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-error-8) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-foreground{
   --tw-bg-opacity: 1;
@@ -2064,199 +2070,199 @@ input[type=number] {
 }
 .bg-grey-10{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--grey-grey-10) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-grey-10) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-grey-100{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--grey-grey-100) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-grey-100) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-grey-110{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--grey-grey-110) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-grey-110) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-grey-120{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--grey-grey-120) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-grey-120) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-grey-130{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--grey-grey-130) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-grey-130) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-grey-140{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--grey-grey-140) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-grey-140) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-grey-150{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--grey-grey-150) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-grey-150) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-grey-20{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--grey-grey-20) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-grey-20) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-grey-30{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--grey-grey-30) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-grey-30) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-grey-40{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--grey-grey-40) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-grey-40) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-grey-5{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--grey-grey-5) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-grey-5) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-grey-50{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--grey-grey-50) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-grey-50) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-grey-60{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--grey-grey-60) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-grey-60) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-grey-70{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--grey-grey-70) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-grey-70) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-grey-80{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--grey-grey-80) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-grey-80) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-grey-90{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--grey-grey-90) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-grey-90) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-grey-transparent-12{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-grey-12) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-grey-12) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-grey-transparent-16{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-grey-16) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-grey-16) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-grey-transparent-24{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-grey-24) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-grey-24) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-grey-transparent-32{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-grey-32) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-grey-32) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-grey-transparent-48{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-grey-48) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-grey-48) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-grey-transparent-8{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-grey-8) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-grey-8) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-grey2-100{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--grey2-grey2-100) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-grey2-100) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-grey2-200{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--grey2-grey2-200) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-grey2-200) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-grey2-300{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--grey2-grey2-300) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-grey2-300) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-grey2-400{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--grey2-grey2-400) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-grey2-400) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-grey2-50{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--grey2-grey2-50) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-grey2-50) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-grey2-500{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--grey2-grey2-500) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-grey2-500) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-grey2-600{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--grey2-grey2-600) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-grey2-600) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-grey2-700{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--grey2-grey2-700) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-grey2-700) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-grey2-800{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--grey2-grey2-800) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-grey2-800) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-grey2-900{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--grey2-grey2-900) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-grey2-900) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-grey2-transparent-12{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-grey2-12) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-grey2-12) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-grey2-transparent-16{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-grey2-16) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-grey2-16) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-grey2-transparent-24{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-grey2-24) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-grey2-24) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-grey2-transparent-32{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-grey2-32) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-grey2-32) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-grey2-transparent-48{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-grey2-48) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-grey2-48) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-grey2-transparent-8{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-grey2-8) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-grey2-8) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-info{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-info-default) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--state-info-default) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-info-100{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--info-info-100) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-info-100) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-info-200{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--info-info-200) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-info-200) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-info-300{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--info-info-300) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-info-300) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-info-400{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--info-info-400) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-info-400) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-info-50{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--info-info-50) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-info-50) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-info-500{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--info-info-500) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-info-500) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-info-600{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--info-info-600) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-info-600) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-info-700{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--info-info-700) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-info-700) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-info-800{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--info-info-800) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-info-800) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-info-900{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--info-info-900) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-info-900) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-info-foreground{
   --tw-bg-opacity: 1;
@@ -2264,63 +2270,63 @@ input[type=number] {
 }
 .bg-info-transparent-12{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-info-12) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-info-12) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-info-transparent-16{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-info-16) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-info-16) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-info-transparent-24{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-info-24) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-info-24) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-info-transparent-32{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-info-32) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-info-32) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-info-transparent-48{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-info-48) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-info-48) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-info-transparent-8{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-info-8) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-info-8) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-input-active-stroke{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--input-color-active-stroke) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--input-active-stroke) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-input-default-stroke{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--input-color-default-stroke) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--input-default-stroke) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-input-default-text{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--input-color-default-text) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--input-default-text) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-input-disable-bg{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--input-color-disable-bg) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--input-disable-bg) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-input-disable-stroke{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--input-color-disable-stroke) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--input-disable-stroke) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-input-disable-text{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--input-color-disable-text) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--input-disable-text) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-input-error{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--input-color-error) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--input-error) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-input-filled-text{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--input-color-filled-text) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--input-filled-text) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-input-label-bg{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--input-color-label-bg) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--input-label-bg) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-pink-100{
   --tw-bg-opacity: 1;
@@ -2328,75 +2334,75 @@ input[type=number] {
 }
 .bg-primary{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-primary-default) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--state-primary-default) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-primary-10{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--primary-ramps-primary-10) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-primary-10) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-primary-100{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--primary-ramps-primary-100) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-primary-100) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-primary-110{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--primary-ramps-primary-110) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-primary-110) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-primary-120{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--primary-ramps-primary-120) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-primary-120) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-primary-130{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--primary-ramps-primary-130) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-primary-130) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-primary-140{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--primary-ramps-primary-140) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-primary-140) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-primary-150{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--primary-ramps-primary-150) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-primary-150) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-primary-20{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--primary-ramps-primary-20) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-primary-20) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-primary-30{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--primary-ramps-primary-30) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-primary-30) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-primary-40{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--primary-ramps-primary-40) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-primary-40) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-primary-5{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--primary-ramps-primary-5) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-primary-5) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-primary-50{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--primary-ramps-primary-50) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-primary-50) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-primary-60{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--primary-ramps-primary-60) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-primary-60) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-primary-70{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--primary-ramps-primary-70) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-primary-70) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-primary-80{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--primary-ramps-primary-80) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-primary-80) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-primary-90{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--primary-ramps-primary-90) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-primary-90) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-primary-default{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-primary-default) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--state-primary-default) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-primary-foreground{
   --tw-bg-opacity: 1;
@@ -2404,55 +2410,55 @@ input[type=number] {
 }
 .bg-primary-hover{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-primary-hover) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--state-primary-hover) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-primary-hover-bg{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-primary-hover-bg) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--state-primary-hover-bg) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-primary-pressed{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-primary-pressed) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--state-primary-pressed) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-primary-stroke{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-primary-stroke) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--state-primary-stroke) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-primary-text-outline{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-primary-text-outline) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--state-primary-text-outline) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-primary-text-pressed{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-primary-text-pressed) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--state-primary-text-pressed) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-primary-text-solid{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-primary-text-solid) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--state-primary-text-solid) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-primary-transparent-12{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--main-transparency-primary-12) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-primary-12) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-primary-transparent-16{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--main-transparency-primary-16) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-primary-16) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-primary-transparent-24{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--main-transparency-primary-24) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-primary-24) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-primary-transparent-32{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--main-transparency-primary-32) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-primary-32) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-primary-transparent-48{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--main-transparency-primary-48) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-primary-48) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-primary-transparent-8{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--main-transparency-primary-8) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-primary-8) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-red-100{
   --tw-bg-opacity: 1;
@@ -2460,75 +2466,75 @@ input[type=number] {
 }
 .bg-secondary{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-secondary-default) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--state-secondary-default) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-secondary-10{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--secondary-ramps-secondary-10) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-secondary-10) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-secondary-100{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--secondary-ramps-secondary-100) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-secondary-100) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-secondary-110{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--secondary-ramps-secondary-110) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-secondary-110) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-secondary-120{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--secondary-ramps-secondary-120) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-secondary-120) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-secondary-130{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--secondary-ramps-secondary-130) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-secondary-130) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-secondary-140{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--secondary-ramps-secondary-140) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-secondary-140) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-secondary-150{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--secondary-ramps-secondary-150) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-secondary-150) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-secondary-20{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--secondary-ramps-secondary-20) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-secondary-20) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-secondary-30{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--secondary-ramps-secondary-30) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-secondary-30) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-secondary-40{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--secondary-ramps-secondary-40) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-secondary-40) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-secondary-5{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--secondary-ramps-secondary-5) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-secondary-5) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-secondary-50{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--secondary-ramps-secondary-50) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-secondary-50) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-secondary-60{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--secondary-ramps-secondary-60) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-secondary-60) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-secondary-70{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--secondary-ramps-secondary-70) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-secondary-70) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-secondary-80{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--secondary-ramps-secondary-80) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-secondary-80) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-secondary-90{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--secondary-ramps-secondary-90) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-secondary-90) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-secondary-default{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-secondary-default) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--state-secondary-default) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-secondary-foreground{
   --tw-bg-opacity: 1;
@@ -2536,107 +2542,107 @@ input[type=number] {
 }
 .bg-secondary-hover{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-secondary-hover) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--state-secondary-hover) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-secondary-hover-bg{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-secondary-hover-bg) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--state-secondary-hover-bg) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-secondary-pressed{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-secondary-pressed) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--state-secondary-pressed) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-secondary-stroke{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-secondary-stroke) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--state-secondary-stroke) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-secondary-text-outline{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-secondary-text-outline) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--state-secondary-text-outline) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-secondary-text-pressed{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-secondary-text-pressed) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--state-secondary-text-pressed) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-secondary-text-solid{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-secondary-text-solid) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--state-secondary-text-solid) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-secondary-transparent-12{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--main-transparency-secondary-12) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-secondary-12) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-secondary-transparent-16{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--main-transparency-secondary-16) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-secondary-16) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-secondary-transparent-24{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--main-transparency-secondary-24) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-secondary-24) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-secondary-transparent-32{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--main-transparency-secondary-32) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-secondary-32) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-secondary-transparent-48{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--main-transparency-secondary-48) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-secondary-48) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-secondary-transparent-8{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--main-transparency-secondary-8) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-secondary-8) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-state-disable-outline{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-disable-outline) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--state-disable-outline) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-state-disable-solid{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-disable-solid) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--state-disable-solid) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-success{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-success-default) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--state-success-default) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-success-100{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--success-success-100) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-success-100) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-success-200{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--success-success-200) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-success-200) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-success-300{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--success-success-300) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-success-300) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-success-400{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--success-success-400) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-success-400) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-success-50{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--success-success-50) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-success-50) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-success-500{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--success-success-500) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-success-500) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-success-600{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--success-success-600) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-success-600) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-success-700{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--success-success-700) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-success-700) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-success-800{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--success-success-800) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-success-800) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-success-900{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--success-success-900) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-success-900) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-success-foreground{
   --tw-bg-opacity: 1;
@@ -2644,27 +2650,27 @@ input[type=number] {
 }
 .bg-success-transparent-12{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-success-12) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-success-12) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-success-transparent-16{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-success-16) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-success-16) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-success-transparent-24{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-success-24) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-success-24) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-success-transparent-32{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-success-32) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-success-32) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-success-transparent-48{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-success-48) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-success-48) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-success-transparent-8{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-success-8) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-success-8) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-surface{
   --tw-bg-opacity: 1;
@@ -2672,75 +2678,75 @@ input[type=number] {
 }
 .bg-tertiary{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-tertiary-default) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--state-tertiary-default) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-tertiary-10{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--tertiary-ramps-tertiary-10) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-tertiary-10) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-tertiary-100{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--tertiary-ramps-tertiary-100) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-tertiary-100) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-tertiary-110{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--tertiary-ramps-tertiary-110) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-tertiary-110) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-tertiary-120{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--tertiary-ramps-tertiary-120) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-tertiary-120) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-tertiary-130{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--tertiary-ramps-tertiary-130) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-tertiary-130) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-tertiary-140{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--tertiary-ramps-tertiary-140) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-tertiary-140) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-tertiary-150{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--tertiary-ramps-tertiary-150) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-tertiary-150) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-tertiary-20{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--tertiary-ramps-tertiary-20) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-tertiary-20) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-tertiary-30{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--tertiary-ramps-tertiary-30) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-tertiary-30) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-tertiary-40{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--tertiary-ramps-tertiary-40) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-tertiary-40) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-tertiary-5{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--tertiary-ramps-tertiary-5) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-tertiary-5) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-tertiary-50{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--tertiary-ramps-tertiary-50) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-tertiary-50) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-tertiary-60{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--tertiary-ramps-tertiary-60) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-tertiary-60) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-tertiary-70{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--tertiary-ramps-tertiary-70) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-tertiary-70) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-tertiary-80{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--tertiary-ramps-tertiary-80) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-tertiary-80) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-tertiary-90{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--tertiary-ramps-tertiary-90) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-tertiary-90) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-tertiary-default{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-tertiary-default) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--state-tertiary-default) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-tertiary-foreground{
   --tw-bg-opacity: 1;
@@ -2748,55 +2754,55 @@ input[type=number] {
 }
 .bg-tertiary-hover{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-tertiary-hover) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--state-tertiary-hover) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-tertiary-hover-bg{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-tertiary-hover-bg) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--state-tertiary-hover-bg) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-tertiary-pressed{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-tertiary-pressed) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--state-tertiary-pressed) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-tertiary-stroke{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-tertiary-stroke) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--state-tertiary-stroke) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-tertiary-text-outline{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-tertiary-text-outline) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--state-tertiary-text-outline) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-tertiary-text-pressed{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-tertiary-text-pressed) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--state-tertiary-text-pressed) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-tertiary-text-solid{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-tertiary-text-solid) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--state-tertiary-text-solid) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-tertiary-transparent-12{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--main-transparency-tertiary-12) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-tertiary-12) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-tertiary-transparent-16{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--main-transparency-tertiary-16) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-tertiary-16) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-tertiary-transparent-24{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--main-transparency-tertiary-24) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-tertiary-24) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-tertiary-transparent-32{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--main-transparency-tertiary-32) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-tertiary-32) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-tertiary-transparent-48{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--main-transparency-tertiary-48) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-tertiary-48) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-tertiary-transparent-8{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--main-transparency-tertiary-8) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-tertiary-8) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-text-black{
   --tw-bg-opacity: 1;
@@ -2835,47 +2841,47 @@ input[type=number] {
 }
 .bg-warning{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-warning-default) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--state-warning-default) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-warning-100{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--warning-warning-100) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-warning-100) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-warning-200{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--warning-warning-200) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-warning-200) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-warning-300{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--warning-warning-300) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-warning-300) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-warning-400{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--warning-warning-400) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-warning-400) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-warning-50{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--warning-warning-50) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-warning-50) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-warning-500{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--warning-warning-500) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-warning-500) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-warning-600{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--warning-warning-600) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-warning-600) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-warning-700{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--warning-warning-700) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-warning-700) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-warning-800{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--warning-warning-800) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-warning-800) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-warning-900{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--warning-warning-900) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-warning-900) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-warning-foreground{
   --tw-bg-opacity: 1;
@@ -2883,27 +2889,27 @@ input[type=number] {
 }
 .bg-warning-transparent-12{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-warning-12) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-warning-12) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-warning-transparent-16{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-warning-16) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-warning-16) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-warning-transparent-24{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-warning-24) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-warning-24) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-warning-transparent-32{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-warning-32) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-warning-32) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-warning-transparent-48{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-warning-48) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-warning-48) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-warning-transparent-8{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-warning-8) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-warning-8) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-white{
   --tw-bg-opacity: 1;
@@ -2911,27 +2917,27 @@ input[type=number] {
 }
 .bg-white-transparent-12{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-white-12) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-white-12) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-white-transparent-16{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-white-16) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-white-16) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-white-transparent-24{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-white-24) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-white-24) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-white-transparent-32{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-white-32) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-white-32) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-white-transparent-48{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-white-48) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-white-48) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-white-transparent-8{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--other-transparency-white-8) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--transparent-white-8) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .bg-gradient-to-r{
   background-image: linear-gradient(to right, var(--tw-gradient-stops));
@@ -3064,52 +3070,52 @@ input[type=number] {
   fill: currentColor;
 }
 .fill-error{
-  fill: color-mix(in srgb, var(--state-color-error-default) calc(100% * 1), transparent);
+  fill: color-mix(in srgb, var(--state-error-default) calc(100% * 1), transparent);
 }
 .fill-info{
-  fill: color-mix(in srgb, var(--state-color-info-default) calc(100% * 1), transparent);
+  fill: color-mix(in srgb, var(--state-info-default) calc(100% * 1), transparent);
 }
 .fill-inherit{
   fill: inherit;
 }
 .fill-input-active-stroke{
-  fill: color-mix(in srgb, var(--input-color-active-stroke) calc(100% * 1), transparent);
+  fill: color-mix(in srgb, var(--input-active-stroke) calc(100% * 1), transparent);
 }
 .fill-input-default-text{
-  fill: color-mix(in srgb, var(--input-color-default-text) calc(100% * 1), transparent);
+  fill: color-mix(in srgb, var(--input-default-text) calc(100% * 1), transparent);
 }
 .fill-input-disable-stroke{
-  fill: color-mix(in srgb, var(--input-color-disable-stroke) calc(100% * 1), transparent);
+  fill: color-mix(in srgb, var(--input-disable-stroke) calc(100% * 1), transparent);
 }
 .fill-none{
   fill: none;
 }
 .fill-primary{
-  fill: color-mix(in srgb, var(--state-color-primary-default) calc(100% * 1), transparent);
+  fill: color-mix(in srgb, var(--state-primary-default) calc(100% * 1), transparent);
 }
 .fill-primary-default{
-  fill: color-mix(in srgb, var(--state-color-primary-default) calc(100% * 1), transparent);
+  fill: color-mix(in srgb, var(--state-primary-default) calc(100% * 1), transparent);
 }
 .fill-secondary{
-  fill: color-mix(in srgb, var(--state-color-secondary-default) calc(100% * 1), transparent);
+  fill: color-mix(in srgb, var(--state-secondary-default) calc(100% * 1), transparent);
 }
 .fill-warning{
-  fill: color-mix(in srgb, var(--state-color-warning-default) calc(100% * 1), transparent);
+  fill: color-mix(in srgb, var(--state-warning-default) calc(100% * 1), transparent);
 }
 .stroke-current{
   stroke: currentColor;
 }
 .stroke-input-default-stroke{
-  stroke: color-mix(in srgb, var(--input-color-default-stroke) calc(100% * 1), transparent);
+  stroke: color-mix(in srgb, var(--input-default-stroke) calc(100% * 1), transparent);
 }
 .stroke-input-default-text{
-  stroke: color-mix(in srgb, var(--input-color-default-text) calc(100% * 1), transparent);
+  stroke: color-mix(in srgb, var(--input-default-text) calc(100% * 1), transparent);
 }
 .stroke-input-disable-stroke{
-  stroke: color-mix(in srgb, var(--input-color-disable-stroke) calc(100% * 1), transparent);
+  stroke: color-mix(in srgb, var(--input-disable-stroke) calc(100% * 1), transparent);
 }
 .stroke-primary-default{
-  stroke: color-mix(in srgb, var(--state-color-primary-default) calc(100% * 1), transparent);
+  stroke: color-mix(in srgb, var(--state-primary-default) calc(100% * 1), transparent);
 }
 .p-0{
   padding: 0px;
@@ -3444,32 +3450,32 @@ input[type=number] {
   line-height: var(--small9-line-height, 10px);
   font-weight: var(--small9-weight, 400);
 }
-.text-subtitile1{
+.text-subtitle1{
   font-size: var(--subtitle1-size, 16px);
   line-height: var(--subtitle1-line-height, 24px);
   font-weight: var(--subtitle1-weight, 400);
 }
-.text-subtitile2{
+.text-subtitle2{
   font-size: var(--subtitle2-size, 16px);
   line-height: var(--subtitle2-line-height, 24px);
   font-weight: var(--subtitle2-weight, 500);
 }
-.text-subtitile3{
+.text-subtitle3{
   font-size: var(--subtitle3-size, 16px);
   line-height: var(--subtitle3-line-height, 24px);
   font-weight: var(--subtitle3-weight, 600);
 }
-.text-subtitile4{
+.text-subtitle4{
   font-size: var(--subtitle4-size, 14px);
   line-height: var(--subtitle4-line-height, 22px);
   font-weight: var(--subtitle4-weight, 400);
 }
-.text-subtitile5{
+.text-subtitle5{
   font-size: var(--subtitle5-size, 14px);
   line-height: var(--subtitle5-line-height, 22px);
   font-weight: var(--subtitle5-weight, 500);
 }
-.text-subtitile6{
+.text-subtitle6{
   font-size: var(--subtitle6-size, 14px);
   line-height: var(--subtitle6-line-height, 22px);
   font-weight: var(--subtitle6-weight, 600);
@@ -3699,7 +3705,7 @@ input[type=number] {
 }
 .text-error{
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--state-color-error-default) calc(100% * var(--tw-text-opacity, 1)), transparent);
+  color: color-mix(in srgb, var(--state-error-default) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 .text-foreground{
   --tw-text-opacity: 1;
@@ -3731,30 +3737,30 @@ input[type=number] {
 }
 .text-grey2-500{
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--grey2-grey2-500) calc(100% * var(--tw-text-opacity, 1)), transparent);
+  color: color-mix(in srgb, var(--ramps-grey2-500) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 .text-info{
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--state-color-info-default) calc(100% * var(--tw-text-opacity, 1)), transparent);
+  color: color-mix(in srgb, var(--state-info-default) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 .text-inherit{
   color: inherit;
 }
 .text-input-default-text{
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--input-color-default-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
+  color: color-mix(in srgb, var(--input-default-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 .text-input-disable-text{
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--input-color-disable-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
+  color: color-mix(in srgb, var(--input-disable-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 .text-input-error{
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--input-color-error) calc(100% * var(--tw-text-opacity, 1)), transparent);
+  color: color-mix(in srgb, var(--input-error) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 .text-input-filled-text{
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--input-color-filled-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
+  color: color-mix(in srgb, var(--input-filled-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 .text-pink-200{
   --tw-text-opacity: 1;
@@ -3762,7 +3768,7 @@ input[type=number] {
 }
 .text-primary{
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--state-color-primary-default) calc(100% * var(--tw-text-opacity, 1)), transparent);
+  color: color-mix(in srgb, var(--state-primary-default) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 .text-red-500{
   --tw-text-opacity: 1;
@@ -3770,11 +3776,11 @@ input[type=number] {
 }
 .text-secondary{
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--state-color-secondary-default) calc(100% * var(--tw-text-opacity, 1)), transparent);
+  color: color-mix(in srgb, var(--state-secondary-default) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 .text-secondary-120{
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--secondary-ramps-secondary-120) calc(100% * var(--tw-text-opacity, 1)), transparent);
+  color: color-mix(in srgb, var(--ramps-secondary-120) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 .text-secondary-foreground{
   --tw-text-opacity: 1;
@@ -3782,15 +3788,15 @@ input[type=number] {
 }
 .text-state-disable-outline{
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--state-color-disable-outline) calc(100% * var(--tw-text-opacity, 1)), transparent);
+  color: color-mix(in srgb, var(--state-disable-outline) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 .text-state-disable-solid{
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--state-color-disable-solid) calc(100% * var(--tw-text-opacity, 1)), transparent);
+  color: color-mix(in srgb, var(--state-disable-solid) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 .text-success{
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--state-color-success-default) calc(100% * var(--tw-text-opacity, 1)), transparent);
+  color: color-mix(in srgb, var(--state-success-default) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 .text-surface-foreground{
   --tw-text-opacity: 1;
@@ -3798,7 +3804,7 @@ input[type=number] {
 }
 .text-tertiary{
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--state-color-tertiary-default) calc(100% * var(--tw-text-opacity, 1)), transparent);
+  color: color-mix(in srgb, var(--state-tertiary-default) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 .text-text-dark{
   --tw-text-opacity: 1;
@@ -3822,7 +3828,7 @@ input[type=number] {
 }
 .text-warning{
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--state-color-warning-default) calc(100% * var(--tw-text-opacity, 1)), transparent);
+  color: color-mix(in srgb, var(--state-warning-default) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 .text-white{
   --tw-text-opacity: 1;
@@ -3835,7 +3841,7 @@ input[type=number] {
   text-underline-offset: 4px;
 }
 .caret-primary{
-  caret-color: color-mix(in srgb, var(--state-color-primary-default) calc(100% * 1), transparent);
+  caret-color: color-mix(in srgb, var(--state-primary-default) calc(100% * 1), transparent);
 }
 .opacity-0{
   opacity: 0;
@@ -3910,23 +3916,23 @@ input[type=number] {
 }
 .ring-error{
   --tw-ring-opacity: 1;
-  --tw-ring-color: color-mix(in srgb, var(--state-color-error-default) calc(100% * var(--tw-ring-opacity, 1)), transparent);
+  --tw-ring-color: color-mix(in srgb, var(--state-error-default) calc(100% * var(--tw-ring-opacity, 1)), transparent);
 }
 .ring-input-default-stroke{
   --tw-ring-opacity: 1;
-  --tw-ring-color: color-mix(in srgb, var(--input-color-default-stroke) calc(100% * var(--tw-ring-opacity, 1)), transparent);
+  --tw-ring-color: color-mix(in srgb, var(--input-default-stroke) calc(100% * var(--tw-ring-opacity, 1)), transparent);
 }
 .ring-input-disable-stroke{
   --tw-ring-opacity: 1;
-  --tw-ring-color: color-mix(in srgb, var(--input-color-disable-stroke) calc(100% * var(--tw-ring-opacity, 1)), transparent);
+  --tw-ring-color: color-mix(in srgb, var(--input-disable-stroke) calc(100% * var(--tw-ring-opacity, 1)), transparent);
 }
 .ring-input-error{
   --tw-ring-opacity: 1;
-  --tw-ring-color: color-mix(in srgb, var(--input-color-error) calc(100% * var(--tw-ring-opacity, 1)), transparent);
+  --tw-ring-color: color-mix(in srgb, var(--input-error) calc(100% * var(--tw-ring-opacity, 1)), transparent);
 }
 .ring-warning-stroke{
   --tw-ring-opacity: 1;
-  --tw-ring-color: color-mix(in srgb, var(--state-color-warning-stroke) calc(100% * var(--tw-ring-opacity, 1)), transparent);
+  --tw-ring-color: color-mix(in srgb, var(--state-warning-stroke) calc(100% * var(--tw-ring-opacity, 1)), transparent);
 }
 .ring-offset-background{
   --tw-ring-offset-color: color-mix(in srgb, var(--background) calc(100% * 1), transparent);
@@ -4019,6 +4025,36 @@ input[type=number] {
   line-height: var(--h6-line-height, 24px);
   font-weight: var(--h6-weight, 700);
 }
+.typography-subtitle1{
+  font-size: var(--subtitle1-size, 16px);
+  line-height: var(--subtitle1-line-height, 24px);
+  font-weight: var(--subtitle1-weight, 400);
+}
+.typography-subtitle2{
+  font-size: var(--subtitle2-size, 16px);
+  line-height: var(--subtitle2-line-height, 24px);
+  font-weight: var(--subtitle2-weight, 500);
+}
+.typography-subtitle3{
+  font-size: var(--subtitle3-size, 16px);
+  line-height: var(--subtitle3-line-height, 24px);
+  font-weight: var(--subtitle3-weight, 600);
+}
+.typography-subtitle4{
+  font-size: var(--subtitle4-size, 14px);
+  line-height: var(--subtitle4-line-height, 22px);
+  font-weight: var(--subtitle4-weight, 400);
+}
+.typography-subtitle5{
+  font-size: var(--subtitle5-size, 14px);
+  line-height: var(--subtitle5-line-height, 22px);
+  font-weight: var(--subtitle5-weight, 500);
+}
+.typography-subtitle6{
+  font-size: var(--subtitle6-size, 14px);
+  line-height: var(--subtitle6-line-height, 22px);
+  font-weight: var(--subtitle6-weight, 600);
+}
 .typography-subtitile1{
   font-size: var(--subtitle1-size, 16px);
   line-height: var(--subtitle1-line-height, 24px);
@@ -4157,19 +4193,19 @@ input[type=number] {
 }
 .placeholder\:text-input-default-text::-moz-placeholder{
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--input-color-default-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
+  color: color-mix(in srgb, var(--input-default-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 .placeholder\:text-input-default-text::placeholder{
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--input-color-default-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
+  color: color-mix(in srgb, var(--input-default-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 .placeholder\:text-input-disable-text::-moz-placeholder{
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--input-color-disable-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
+  color: color-mix(in srgb, var(--input-disable-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 .placeholder\:text-input-disable-text::placeholder{
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--input-color-disable-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
+  color: color-mix(in srgb, var(--input-disable-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 .placeholder\:text-transparent::-moz-placeholder{
   color: transparent;
@@ -4346,15 +4382,15 @@ input[type=number] {
 }
 .hover\:border-input-active-stroke:hover{
   --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--input-color-active-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
+  border-color: color-mix(in srgb, var(--input-active-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 .hover\:border-l-input-active-stroke:hover{
   --tw-border-opacity: 1;
-  border-left-color: color-mix(in srgb, var(--input-color-active-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
+  border-left-color: color-mix(in srgb, var(--input-active-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 .hover\:border-r-input-active-stroke:hover{
   --tw-border-opacity: 1;
-  border-right-color: color-mix(in srgb, var(--input-color-active-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
+  border-right-color: color-mix(in srgb, var(--input-active-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 .hover\:bg-\[var\(--dropdown-menu-hover-bg\)\]:hover{
   background-color: var(--dropdown-menu-hover-bg);
@@ -4476,19 +4512,19 @@ input[type=number] {
   background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
 }
 .hover\:bg-input-active-stroke\/10:hover{
-  background-color: color-mix(in srgb, var(--input-color-active-stroke) calc(100% * 0.1), transparent);
+  background-color: color-mix(in srgb, var(--input-active-stroke) calc(100% * 0.1), transparent);
 }
 .hover\:bg-input-disable-bg:hover{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--input-color-disable-bg) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--input-disable-bg) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .hover\:bg-primary-hover-bg:hover{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-primary-hover-bg) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--state-primary-hover-bg) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .hover\:bg-secondary-hover:hover{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-secondary-hover) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--state-secondary-hover) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .hover\:fill-action-button-icon-active-hover:hover{
   fill: color-mix(in srgb, var(--action-button-icon-active-hover-text) calc(100% * 1), transparent);
@@ -4572,13 +4608,13 @@ input[type=number] {
   fill: color-mix(in srgb, var(--button-warning-solid-hover-text) calc(100% * 1), transparent);
 }
 .hover\:fill-input-default-text:hover{
-  fill: color-mix(in srgb, var(--input-color-default-text) calc(100% * 1), transparent);
+  fill: color-mix(in srgb, var(--input-default-text) calc(100% * 1), transparent);
 }
 .hover\:fill-input-filled-text:hover{
-  fill: color-mix(in srgb, var(--input-color-filled-text) calc(100% * 1), transparent);
+  fill: color-mix(in srgb, var(--input-filled-text) calc(100% * 1), transparent);
 }
 .hover\:stroke-input-filled-text:hover{
-  stroke: color-mix(in srgb, var(--input-color-filled-text) calc(100% * 1), transparent);
+  stroke: color-mix(in srgb, var(--input-filled-text) calc(100% * 1), transparent);
 }
 .hover\:text-\[var\(--dropdown-menu-hover-text\)\]:hover{
   color: var(--dropdown-menu-hover-text);
@@ -4693,11 +4729,11 @@ input[type=number] {
 }
 .hover\:text-input-disable-text:hover{
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--input-color-disable-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
+  color: color-mix(in srgb, var(--input-disable-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 .hover\:text-input-filled-text:hover{
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--input-color-filled-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
+  color: color-mix(in srgb, var(--input-filled-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 .hover\:text-text-grey-dark:hover{
   --tw-text-opacity: 1;
@@ -4714,38 +4750,38 @@ input[type=number] {
 }
 .hover\:ring-input-active-stroke:hover{
   --tw-ring-opacity: 1;
-  --tw-ring-color: color-mix(in srgb, var(--input-color-active-stroke) calc(100% * var(--tw-ring-opacity, 1)), transparent);
+  --tw-ring-color: color-mix(in srgb, var(--input-active-stroke) calc(100% * var(--tw-ring-opacity, 1)), transparent);
 }
 .hover\:ring-input-disable-stroke:hover{
   --tw-ring-opacity: 1;
-  --tw-ring-color: color-mix(in srgb, var(--input-color-disable-stroke) calc(100% * var(--tw-ring-opacity, 1)), transparent);
+  --tw-ring-color: color-mix(in srgb, var(--input-disable-stroke) calc(100% * var(--tw-ring-opacity, 1)), transparent);
 }
 .hover\:ring-input-error:hover{
   --tw-ring-opacity: 1;
-  --tw-ring-color: color-mix(in srgb, var(--input-color-error) calc(100% * var(--tw-ring-opacity, 1)), transparent);
+  --tw-ring-color: color-mix(in srgb, var(--input-error) calc(100% * var(--tw-ring-opacity, 1)), transparent);
 }
 .hover\:ring-warning-stroke:hover{
   --tw-ring-opacity: 1;
-  --tw-ring-color: color-mix(in srgb, var(--state-color-warning-stroke) calc(100% * var(--tw-ring-opacity, 1)), transparent);
+  --tw-ring-color: color-mix(in srgb, var(--state-warning-stroke) calc(100% * var(--tw-ring-opacity, 1)), transparent);
 }
 .hover\:placeholder\:text-input-disable-text:hover::-moz-placeholder{
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--input-color-disable-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
+  color: color-mix(in srgb, var(--input-disable-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 .hover\:placeholder\:text-input-disable-text:hover::placeholder{
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--input-color-disable-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
+  color: color-mix(in srgb, var(--input-disable-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 .focus\:border-input-default-stroke:focus{
   --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--input-color-default-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
+  border-color: color-mix(in srgb, var(--input-default-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 .focus\:\!bg-\[var\(--dropdown-menu-hover-bg\)\]:focus{
   background-color: var(--dropdown-menu-hover-bg) !important;
 }
 .focus\:bg-primary:focus{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-primary-default) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--state-primary-default) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .focus\:pe-10:focus{
   padding-inline-end: 2.5rem;
@@ -4761,7 +4797,7 @@ input[type=number] {
 }
 .focus\:text-input-filled-text:focus{
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--input-color-filled-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
+  color: color-mix(in srgb, var(--input-filled-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 .focus\:outline-none:focus{
   outline: 2px solid transparent;
@@ -4782,15 +4818,15 @@ input[type=number] {
 }
 .focus\:ring-input-active-stroke:focus{
   --tw-ring-opacity: 1;
-  --tw-ring-color: color-mix(in srgb, var(--input-color-active-stroke) calc(100% * var(--tw-ring-opacity, 1)), transparent);
+  --tw-ring-color: color-mix(in srgb, var(--input-active-stroke) calc(100% * var(--tw-ring-opacity, 1)), transparent);
 }
 .focus\:ring-input-error:focus{
   --tw-ring-opacity: 1;
-  --tw-ring-color: color-mix(in srgb, var(--input-color-error) calc(100% * var(--tw-ring-opacity, 1)), transparent);
+  --tw-ring-color: color-mix(in srgb, var(--input-error) calc(100% * var(--tw-ring-opacity, 1)), transparent);
 }
 .focus\:ring-warning-stroke:focus{
   --tw-ring-opacity: 1;
-  --tw-ring-color: color-mix(in srgb, var(--state-color-warning-stroke) calc(100% * var(--tw-ring-opacity, 1)), transparent);
+  --tw-ring-color: color-mix(in srgb, var(--state-warning-stroke) calc(100% * var(--tw-ring-opacity, 1)), transparent);
 }
 .focus\:ring-offset-2:focus{
   --tw-ring-offset-width: 2px;
@@ -5029,7 +5065,7 @@ input[type=number] {
 }
 .active\:bg-input-disable-bg:active{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--input-color-disable-bg) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--input-disable-bg) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .active\:fill-action-button-icon-active-pressed:active{
   fill: color-mix(in srgb, var(--action-button-icon-active-pressed-text) calc(100% * 1), transparent);
@@ -5113,7 +5149,7 @@ input[type=number] {
   fill: color-mix(in srgb, var(--button-warning-solid-active-text) calc(100% * 1), transparent);
 }
 .active\:stroke-input-filled-text:active{
-  stroke: color-mix(in srgb, var(--input-color-filled-text) calc(100% * 1), transparent);
+  stroke: color-mix(in srgb, var(--input-filled-text) calc(100% * 1), transparent);
 }
 .active\:text-action-button-icon-active-pressed:active{
   --tw-text-opacity: 1;
@@ -5225,11 +5261,11 @@ input[type=number] {
 }
 .active\:text-input-disable-text:active{
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--input-color-disable-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
+  color: color-mix(in srgb, var(--input-disable-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 .active\:text-input-filled-text:active{
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--input-color-filled-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
+  color: color-mix(in srgb, var(--input-filled-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 .active\:text-text-dark:active{
   --tw-text-opacity: 1;
@@ -5246,15 +5282,15 @@ input[type=number] {
 }
 .active\:ring-input-disable-stroke:active{
   --tw-ring-opacity: 1;
-  --tw-ring-color: color-mix(in srgb, var(--input-color-disable-stroke) calc(100% * var(--tw-ring-opacity, 1)), transparent);
+  --tw-ring-color: color-mix(in srgb, var(--input-disable-stroke) calc(100% * var(--tw-ring-opacity, 1)), transparent);
 }
 .active\:placeholder\:text-input-disable-text:active::-moz-placeholder{
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--input-color-disable-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
+  color: color-mix(in srgb, var(--input-disable-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 .active\:placeholder\:text-input-disable-text:active::placeholder{
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--input-color-disable-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
+  color: color-mix(in srgb, var(--input-disable-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 .disabled\:pointer-events-none:disabled{
   pointer-events: none;
@@ -5348,7 +5384,7 @@ input[type=number] {
 }
 .disabled\:border-state-disable-solid:disabled{
   --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--state-color-disable-solid) calc(100% * var(--tw-border-opacity, 1)), transparent);
+  border-color: color-mix(in srgb, var(--state-disable-solid) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 .disabled\:bg-button-error-flat-disabled:disabled{
   --tw-bg-opacity: 1;
@@ -5583,7 +5619,7 @@ input[type=number] {
 }
 .disabled\:text-state-disable-outline:disabled{
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--state-color-disable-outline) calc(100% * var(--tw-text-opacity, 1)), transparent);
+  color: color-mix(in srgb, var(--state-disable-outline) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 .disabled\:opacity-30:disabled{
   opacity: 0.3;
@@ -5618,22 +5654,22 @@ input[type=number] {
 .peer:placeholder-shown ~ .peer-placeholder-shown\:bg-transparent{
   background-color: transparent;
 }
-.peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:typography-subtitile1{
+.peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:typography-subtitle1{
   font-size: var(--subtitle1-size, 16px);
   line-height: var(--subtitle1-line-height, 24px);
   font-weight: var(--subtitle1-weight, 400);
 }
-.peer:placeholder-shown ~ .peer-placeholder-shown\:typography-subtitile1{
+.peer:placeholder-shown ~ .peer-placeholder-shown\:typography-subtitle1{
   font-size: var(--subtitle1-size, 16px);
   line-height: var(--subtitle1-line-height, 24px);
   font-weight: var(--subtitle1-weight, 400);
 }
-.peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:typography-subtitile4{
+.peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:typography-subtitle4{
   font-size: var(--subtitle4-size, 14px);
   line-height: var(--subtitle4-line-height, 22px);
   font-weight: var(--subtitle4-weight, 400);
 }
-.peer:placeholder-shown ~ .peer-placeholder-shown\:typography-subtitile4{
+.peer:placeholder-shown ~ .peer-placeholder-shown\:typography-subtitle4{
   font-size: var(--subtitle4-size, 14px);
   line-height: var(--subtitle4-line-height, 22px);
   font-weight: var(--subtitle4-weight, 400);
@@ -5650,23 +5686,23 @@ input[type=number] {
 }
 .peer:hover ~ .peer-hover\:border-l-input-active-stroke{
   --tw-border-opacity: 1;
-  border-left-color: color-mix(in srgb, var(--input-color-active-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
+  border-left-color: color-mix(in srgb, var(--input-active-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 .peer:hover ~ .peer-hover\:border-r-input-active-stroke{
   --tw-border-opacity: 1;
-  border-right-color: color-mix(in srgb, var(--input-color-active-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
+  border-right-color: color-mix(in srgb, var(--input-active-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 .peer:hover ~ .peer-hover\:fill-input-filled-text{
-  fill: color-mix(in srgb, var(--input-color-filled-text) calc(100% * 1), transparent);
+  fill: color-mix(in srgb, var(--input-filled-text) calc(100% * 1), transparent);
 }
 .peer:hover ~ .peer-hover\:fill-primary-default{
-  fill: color-mix(in srgb, var(--state-color-primary-default) calc(100% * 1), transparent);
+  fill: color-mix(in srgb, var(--state-primary-default) calc(100% * 1), transparent);
 }
 .peer:hover ~ .peer-hover\:stroke-input-active-stroke{
-  stroke: color-mix(in srgb, var(--input-color-active-stroke) calc(100% * 1), transparent);
+  stroke: color-mix(in srgb, var(--input-active-stroke) calc(100% * 1), transparent);
 }
 .peer:hover ~ .peer-hover\:stroke-primary-default{
-  stroke: color-mix(in srgb, var(--state-color-primary-default) calc(100% * 1), transparent);
+  stroke: color-mix(in srgb, var(--state-primary-default) calc(100% * 1), transparent);
 }
 .peer:focus ~ .peer-focus\:-top-1\.5{
   top: -0.375rem;
@@ -5676,15 +5712,15 @@ input[type=number] {
 }
 .peer:focus ~ .peer-focus\:border-l-input-active-stroke{
   --tw-border-opacity: 1;
-  border-left-color: color-mix(in srgb, var(--input-color-active-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
+  border-left-color: color-mix(in srgb, var(--input-active-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 .peer:focus ~ .peer-focus\:border-r-input-active-stroke{
   --tw-border-opacity: 1;
-  border-right-color: color-mix(in srgb, var(--input-color-active-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
+  border-right-color: color-mix(in srgb, var(--input-active-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 .peer:focus ~ .peer-focus\:bg-input-label-bg{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--input-color-label-bg) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--input-label-bg) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .peer:focus ~ .peer-focus\:bg-red-500{
   --tw-bg-opacity: 1;
@@ -5694,24 +5730,24 @@ input[type=number] {
   background-color: transparent;
 }
 .peer:focus ~ .peer-focus\:fill-input-filled-text{
-  fill: color-mix(in srgb, var(--input-color-filled-text) calc(100% * 1), transparent);
+  fill: color-mix(in srgb, var(--input-filled-text) calc(100% * 1), transparent);
 }
 .peer:focus ~ .peer-focus\:fill-primary-hover{
-  fill: color-mix(in srgb, var(--state-color-primary-hover) calc(100% * 1), transparent);
+  fill: color-mix(in srgb, var(--state-primary-hover) calc(100% * 1), transparent);
 }
 .peer:focus ~ .peer-focus\:stroke-input-filled-text{
-  stroke: color-mix(in srgb, var(--input-color-filled-text) calc(100% * 1), transparent);
+  stroke: color-mix(in srgb, var(--input-filled-text) calc(100% * 1), transparent);
 }
 .peer:focus ~ .peer-focus\:stroke-primary-hover{
-  stroke: color-mix(in srgb, var(--state-color-primary-hover) calc(100% * 1), transparent);
+  stroke: color-mix(in srgb, var(--state-primary-hover) calc(100% * 1), transparent);
 }
 .peer:focus ~ .peer-focus\:text-input-default-text{
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--input-color-default-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
+  color: color-mix(in srgb, var(--input-default-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 .peer:focus ~ .peer-focus\:text-input-filled-text{
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--input-color-filled-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
+  color: color-mix(in srgb, var(--input-filled-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 .peer:focus ~ .peer-focus\:typography-label1{
   font-size: var(--label-label1-size, 12px);
@@ -5724,21 +5760,21 @@ input[type=number] {
   font-weight: var(--label-label2-weight, 400);
 }
 .peer:active ~ .peer-active\:fill-input-filled-text{
-  fill: color-mix(in srgb, var(--input-color-filled-text) calc(100% * 1), transparent);
+  fill: color-mix(in srgb, var(--input-filled-text) calc(100% * 1), transparent);
 }
 .peer:disabled ~ .peer-disabled\:cursor-not-allowed{
   cursor: not-allowed;
 }
 .peer:disabled ~ .peer-disabled\:border-l-input-disable-stroke{
   --tw-border-opacity: 1;
-  border-left-color: color-mix(in srgb, var(--input-color-disable-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
+  border-left-color: color-mix(in srgb, var(--input-disable-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 .peer:disabled ~ .peer-disabled\:border-r-input-disable-stroke{
   --tw-border-opacity: 1;
-  border-right-color: color-mix(in srgb, var(--input-color-disable-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
+  border-right-color: color-mix(in srgb, var(--input-disable-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 .peer:disabled ~ .peer-disabled\:fill-input-disable-stroke{
-  fill: color-mix(in srgb, var(--input-color-disable-stroke) calc(100% * 1), transparent);
+  fill: color-mix(in srgb, var(--input-disable-stroke) calc(100% * 1), transparent);
 }
 .peer:disabled ~ .peer-disabled\:opacity-70{
   opacity: 0.7;
@@ -5777,7 +5813,7 @@ input[type=number] {
 }
 .data-\[disabled\]\:\!border-state-disable-solid[data-disabled]{
   --tw-border-opacity: 1 !important;
-  border-color: color-mix(in srgb, var(--state-color-disable-solid) calc(100% * var(--tw-border-opacity, 1)), transparent) !important;
+  border-color: color-mix(in srgb, var(--state-disable-solid) calc(100% * var(--tw-border-opacity, 1)), transparent) !important;
 }
 .data-\[loading\=true\]\:border-button-error-flat-active[data-loading="true"]{
   --tw-border-opacity: 1;
@@ -5977,11 +6013,11 @@ input[type=number] {
 }
 .data-\[state\=open\]\:bg-primary[data-state="open"]{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-primary-default) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--state-primary-default) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .data-\[state\=selected\]\:bg-grey-20[data-state="selected"]{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--grey-grey-20) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--ramps-grey-20) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .data-\[state\=unchecked\]\:bg-\[var\(--switch-thumb-default-color\)\][data-state="unchecked"]{
   background-color: var(--switch-thumb-default-color);
@@ -5990,7 +6026,7 @@ input[type=number] {
   background-color: var(--switch-thumb-hover-color);
 }
 .data-\[disabled\]\:\!fill-state-disable-solid[data-disabled]{
-  fill: color-mix(in srgb, var(--state-color-disable-solid) calc(100% * 1), transparent) !important;
+  fill: color-mix(in srgb, var(--state-disable-solid) calc(100% * 1), transparent) !important;
 }
 .data-\[loading\=true\]\:fill-button-error-flat-active[data-loading="true"]{
   fill: color-mix(in srgb, var(--button-error-flat-active-text) calc(100% * 1), transparent);
@@ -6060,7 +6096,7 @@ input[type=number] {
 }
 .data-\[disabled\]\:\!text-state-disable-solid[data-disabled]{
   --tw-text-opacity: 1 !important;
-  color: color-mix(in srgb, var(--state-color-disable-solid) calc(100% * var(--tw-text-opacity, 1)), transparent) !important;
+  color: color-mix(in srgb, var(--state-disable-solid) calc(100% * var(--tw-text-opacity, 1)), transparent) !important;
 }
 .data-\[loading\=true\]\:text-button-error-flat-active[data-loading="true"]{
   --tw-text-opacity: 1;
@@ -6149,8 +6185,8 @@ input[type=number] {
 .data-\[state\=\'checked\'\]\:text-\[var\(--dropdown-menu-selected-text\)\][data-state='checked']{
   color: var(--dropdown-menu-selected-text);
 }
-.data-\[state\=checked\]\:text-\[var\(--state-color-primary-hover-bg\)\][data-state="checked"]{
-  color: var(--state-color-primary-hover-bg);
+.data-\[state\=checked\]\:text-\[var\(--state-primary-hover-bg\)\][data-state="checked"]{
+  color: var(--state-primary-hover-bg);
 }
 .data-\[state\=checked\]\:text-function-active-icon[data-state="checked"]{
   --tw-text-opacity: 1;
@@ -6168,13 +6204,13 @@ input[type=number] {
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--primary-foreground) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
-.data-\[state\=unchecked\]\:text-\[var\(--state-color-tertiary-hover-bg\)\][data-state="unchecked"]{
-  color: var(--state-color-tertiary-hover-bg);
+.data-\[state\=unchecked\]\:text-\[var\(--state-tertiary-hover-bg\)\][data-state="unchecked"]{
+  color: var(--state-tertiary-hover-bg);
 }
 .data-\[swipe\=move\]\:transition-none[data-swipe="move"]{
   transition-property: none;
 }
-.data-\[state\=\'checked\'\]\:typography-subtitile5[data-state='checked']{
+.data-\[state\=\'checked\'\]\:typography-subtitle5[data-state='checked']{
   font-size: var(--subtitle5-size, 14px);
   line-height: var(--subtitle5-line-height, 22px);
   font-weight: var(--subtitle5-weight, 500);
@@ -6229,11 +6265,11 @@ input[type=number] {
 }
 .disabled\:data-\[state\=checked\]\:bg-state-disable-solid[data-state="checked"]:disabled{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-disable-solid) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--state-disable-solid) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .disabled\:data-\[state\=indeterminate\]\:bg-state-disable-solid[data-state="indeterminate"]:disabled{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-disable-solid) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+  background-color: color-mix(in srgb, var(--state-disable-solid) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 .group:hover .group-hover\:data-\[state\=checked\]\:bg-\[var\(--switch-thumb-active-hover-color\)\][data-state="checked"]{
   background-color: var(--switch-thumb-active-hover-color);
@@ -6326,11 +6362,11 @@ input[type=number] {
 }
 .\[\&_button\]\:\!border-primary button{
   --tw-border-opacity: 1 !important;
-  border-color: color-mix(in srgb, var(--state-color-primary-default) calc(100% * var(--tw-border-opacity, 1)), transparent) !important;
+  border-color: color-mix(in srgb, var(--state-primary-default) calc(100% * var(--tw-border-opacity, 1)), transparent) !important;
 }
 .\[\&_button\]\:\!text-input-disable-text button{
   --tw-text-opacity: 1 !important;
-  color: color-mix(in srgb, var(--input-color-disable-text) calc(100% * var(--tw-text-opacity, 1)), transparent) !important;
+  color: color-mix(in srgb, var(--input-disable-text) calc(100% * var(--tw-text-opacity, 1)), transparent) !important;
 }
 .\[\&_svg\]\:size-5 svg{
   width: 1.25rem;
@@ -6362,27 +6398,27 @@ input[type=number] {
 }
 .\[\&_svg\]\:text-input-default-text svg{
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--input-color-default-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
+  color: color-mix(in srgb, var(--input-default-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 .hover\:\[\&_svg\]\:text-input-filled-text svg:hover{
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--input-color-filled-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
+  color: color-mix(in srgb, var(--input-filled-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 .peer:hover ~ .peer-hover\:\[\&_svg\]\:text-input-filled-text svg{
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--input-color-filled-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
+  color: color-mix(in srgb, var(--input-filled-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 .peer:focus ~ .peer-focus\:\[\&_svg\]\:text-input-filled-text svg{
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--input-color-filled-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
+  color: color-mix(in srgb, var(--input-filled-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 .peer:active ~ .peer-active\:\[\&_svg\]\:text-input-filled-text svg{
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--input-color-filled-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
+  color: color-mix(in srgb, var(--input-filled-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 .peer:disabled ~ .peer-disabled\:\[\&_svg\]\:text-input-disable-stroke svg{
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--input-color-disable-stroke) calc(100% * var(--tw-text-opacity, 1)), transparent);
+  color: color-mix(in srgb, var(--input-disable-stroke) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 .\[\&_tr\:last-child\]\:border-0 tr:last-child{
   border-width: 0px;