@rovula/ui 0.0.29 → 0.0.31

package/dist/src/theme/global.css

@@ -206,6 +206,18 @@
   --input-color-label-bg: #ffffff;
   /* #2d2e30; */
   --input-color-error: #ed2f15;
+  /* Function button */
+  --function-default-solid: #1e3249;
+  --function-default-hover: #35475b;
+  --function-default-hover-bg: rgba(30 50 73 / 0.08);
+  --function-default-stroke: rgba(30 50 73 / 0.48);
+  --function-default-icon: #ffffff;
+  --function-default-outline-icon: #1e3249;
+  --function-active-solid: #9b8f00;
+  --function-active-hover: #b1a400;
+  --function-active-hover-bg: rgba(221 205 0 / 0.08);
+  --function-active-stroke: rgba(177 164 0 / 0.48);
+  --function-active-icon: #ffffff;
   --text-dark: #18283a;
   --text-medium: #4b5b6d;
   --text-light: #8e98a4;
@@ -954,29 +966,29 @@
   /* Solid Mode Tokens                                                  */
   /* ------------------------------------------------------------------ */
   /* Default State */
-  --action-button-solid-default-bg: var(--state-color-primary-default);
-  --action-button-solid-default-border: var(--state-color-primary-default);
-  --action-button-solid-default-text: var(--state-color-primary-text-solid);
+  --action-button-solid-default-bg: var(--function-default-solid);
+  --action-button-solid-default-border: var(--function-default-solid);
+  --action-button-solid-default-text: var(--function-default-icon);
   /* Hover State */
-  --action-button-solid-hover-bg: var(--state-color-primary-hover);
-  --action-button-solid-hover-border: var(--state-color-primary-hover);
-  --action-button-solid-hover-text: var(--state-color-primary-text-solid);
+  --action-button-solid-hover-bg: var(--function-default-hover);
+  --action-button-solid-hover-border: var(--function-default-hover);
+  --action-button-solid-hover-text: var(--function-default-icon);
   /* Pressed State */
-  --action-button-solid-pressed-bg: var(--state-color-primary-pressed);
-  --action-button-solid-pressed-border: var(--state-color-primary-pressed);
-  --action-button-solid-pressed-text: var(--state-color-primary-text-solid);
+  --action-button-solid-pressed-bg: var(--function-default-solid);
+  --action-button-solid-pressed-border: var(--function-default-solid);
+  --action-button-solid-pressed-text: var(--function-default-icon);
   /* Active State */
-  --action-button-solid-active-bg: var(--state-color-secondary-default);
-  --action-button-solid-active-border: var(--state-color-secondary-default);
-  --action-button-solid-active-text: var(--state-color-secondary-text-solid);
+  --action-button-solid-active-bg: var(--function-active-solid);
+  --action-button-solid-active-border: var(--function-active-solid);
+  --action-button-solid-active-text: var(--function-active-icon);
   /* Active Hover State */
-  --action-button-solid-active-hover-bg: var(--state-color-secondary-hover);
-  --action-button-solid-active-hover-border: var(--state-color-secondary-hover);
-  --action-button-solid-active-hover-text: var(--state-color-secondary-text-solid);
+  --action-button-solid-active-hover-bg: var(--function-active-hover);
+  --action-button-solid-active-hover-border: var(--function-active-hover);
+  --action-button-solid-active-hover-text: var(--function-active-icon);
   /* Active Pressed State */
-  --action-button-solid-active-pressed-bg: var(--state-color-secondary-pressed);
-  --action-button-solid-active-pressed-border: var(--state-color-secondary-pressed);
-  --action-button-solid-active-pressed-text: var(--state-color-secondary-text-solid);
+  --action-button-solid-active-pressed-bg: var(--function-active-solid);
+  --action-button-solid-active-pressed-border: var(--function-active-solid);
+  --action-button-solid-active-pressed-text: var(--function-active-icon);
   /* Disabled State */
   --action-button-solid-disabled-bg: var(--state-color-disable-solid);
   --action-button-solid-disabled-border: var(--state-color-disable-solid);
@@ -986,28 +998,28 @@
   /* ------------------------------------------------------------------ */
   /* Default State */
   --action-button-outline-default-bg: transparent;
-  --action-button-outline-default-border: var(--state-color-primary-stroke);
-  --action-button-outline-default-text: var(--state-color-primary-text-outline);
+  --action-button-outline-default-border: var(--function-default-stroke);
+  --action-button-outline-default-text: var(--function-default-outline-icon);
   /* Hover State */
-  --action-button-outline-hover-bg:  var(--state-color-primary-hover-bg);
-  --action-button-outline-hover-border: var(--state-color-primary-hover);
-  --action-button-outline-hover-text: var(--state-color-primary-text-hover);
+  --action-button-outline-hover-bg: var(--function-default-hover-bg);
+  --action-button-outline-hover-border: var(--function-default-hover);
+  --action-button-outline-hover-text: var(--function-default-hover);
   /* Pressed State */
-  --action-button-outline-pressed-bg: var(--state-color-primary-hover-bg);
-  --action-button-outline-pressed-border: var(--state-color-primary-pressed);
-  --action-button-outline-pressed-text: var(--state-color-primary-text-pressed);
+  --action-button-outline-pressed-bg: var(--function-default-hover-bg);
+  --action-button-outline-pressed-border: var(--function-default-stroke);
+  --action-button-outline-pressed-text: var(--function-default-outline-icon);
   /* Active State */
   --action-button-outline-active-bg: transparent;
-  --action-button-outline-active-border: var(--state-color-secondary-stroke);
-  --action-button-outline-active-text: var(--state-color-secondary-text-outline);
+  --action-button-outline-active-border: var(--function-active-stroke);
+  --action-button-outline-active-text: var(--function-active-solid);
   /* Active Hover State */
-  --action-button-outline-active-hover-bg:  var(--state-color-secondary-hover-bg);
-  --action-button-outline-active-hover-border: var(--state-color-secondary-hover);
-  --action-button-outline-active-hover-text: var(--state-color-secondary-text-hover);
+  --action-button-outline-active-hover-bg:  var(--function-active-hover-bg);
+  --action-button-outline-active-hover-border: var(--function-active-hover);
+  --action-button-outline-active-hover-text: var(--function-active-hover);
   /* Active Pressed State */
-  --action-button-outline-active-pressed-bg: var(--state-color-secondary-hover-bg);
-  --action-button-outline-active-pressed-border: var(--state-color-secondary-pressed);
-  --action-button-outline-active-pressed-text: var(--state-color-secondary-text-pressed);
+  --action-button-outline-active-pressed-bg: var(--function-active-hover-bg);
+  --action-button-outline-active-pressed-border: var(--function-active-stroke);
+  --action-button-outline-active-pressed-text: var(--function-active-solid);
   /* Disabled State */
   --action-button-outline-disabled-bg: transparent;
   --action-button-outline-disabled-border: var(--state-color-disable-outline);
@@ -1018,27 +1030,27 @@
   /* Default State */
   --action-button-icon-default-bg: transparent;
   --action-button-icon-default-border: transparent;
-  --action-button-icon-default-text: var(--state-color-primary-text-outline);
+  --action-button-icon-default-text: var(--function-default-outline-icon);
   /* Hover State */
-  --action-button-icon-hover-bg: var(--state-color-primary-hover-bg);
+  --action-button-icon-hover-bg: var(--function-default-hover-bg);
   --action-button-icon-hover-border: transparent;
-  --action-button-icon-hover-text: var(--state-color-primary-text-hover);
+  --action-button-icon-hover-text: var(--function-default-hover);
   /* Pressed State */
   --action-button-icon-pressed-bg: transparent;
   --action-button-icon-pressed-border: transparent;
-  --action-button-icon-pressed-text: var(--state-color-primary-text-pressed);
+  --action-button-icon-pressed-text: var(--function-default-outline-icon);
   /* Active State */
   --action-button-icon-active-bg: transparent;
   --action-button-icon-active-border: transparent;
-  --action-button-icon-active-text: var(--state-color-secondary-text-outline);
+  --action-button-icon-active-text: var(--function-active-solid);
   /* Active Hover State */
-  --action-button-icon-active-hover-bg:  var(--state-color-secondary-hover-bg);
+  --action-button-icon-active-hover-bg: var(--function-active-hover-bg);
   --action-button-icon-active-hover-border: transparent;
-  --action-button-icon-active-hover-text: var(--state-color-secondary-text-hover);
+  --action-button-icon-active-hover-text: var(--function-active-hover);
   /* Active Pressed State */
   --action-button-icon-active-pressed-bg: transparent;
   --action-button-icon-active-pressed-border: transparent;
-  --action-button-icon-active-pressed-text: var(--state-color-secondary-text-pressed);
+  --action-button-icon-active-pressed-text: var(--function-active-solid);
   /* Disabled State */
   --action-button-icon-disabled-bg: transparent;
   --action-button-icon-disabled-border: transparent;
@@ -1275,7 +1287,7 @@
   --state-color-error-text-hover: #ff4d35;
   --state-color-error-text-pressed: #a5210f;
   --state-color-disable-solid: #454f5b;
-  --state-color-disable-outline: #D3DADF;
+  --state-color-disable-outline: #637381;
   /* Base from design */
   --input-color-default-text: #9e9e9e;
   --input-color-default-stroke: rgba(158 158 158 / 0.24);
@@ -1286,6 +1298,18 @@
   --input-color-disable-bg: rgba(145 158 171 / 0.04);
   --input-color-label-bg: #2d2e30;
   --input-color-error: #ff4d35;
+  /* Function button */
+  --function-default-solid: #ececec;
+  --function-default-hover: #fafafa;
+  --function-default-hover-bg: rgba(250 250 250 / 0.08);
+  --function-default-stroke: rgba(158 158 158 / 0.24);
+  --function-default-icon: #212b36;
+  --function-default-outline-icon: #9e9e9e;
+  --function-active-solid: #b1a400;
+  --function-active-hover: #ddcd00;
+  --function-active-hover-bg: rgba(221 205 0 / 0.08);
+  --function-active-stroke: rgba(177 164 0 / 0.48);
+  --function-active-icon: #212b36;
   --text-dark: #212b36;
   --text-medium: #637381;
   --text-light: #919eab;
@@ -1434,70 +1458,71 @@
   /* Solid Mode Tokens                                                  */
   /* ------------------------------------------------------------------ */
   /* Default State */
-  --action-button-solid-default-bg: var(--state-color-secondary-default);
-  --action-button-solid-default-border: var(--state-color-secondary-default);
-  --action-button-solid-default-text: var(--state-color-secondary-text-solid);
+  --action-button-solid-default-bg: var(--function-default-solid);
+  --action-button-solid-default-border: var(--function-default-solid);
+  --action-button-solid-default-text: var(--function-default-icon);
   /* Hover State */
-  --action-button-solid-hover-bg: var(--state-color-secondary-hover);
-  --action-button-solid-hover-border: var(--state-color-secondary-hover);
-  --action-button-solid-hover-text: var(--state-color-secondary-text-solid);
+  --action-button-solid-hover-bg: var(--function-default-hover);
+  --action-button-solid-hover-border: var(--function-default-hover);
+  --action-button-solid-hover-text: var(--function-default-icon);
   /* Pressed State */
-  --action-button-solid-pressed-bg: var(--state-color-secondary-pressed);
-  --action-button-solid-pressed-border: var(--state-color-secondary-pressed);
-  --action-button-solid-pressed-text: var(--state-color-secondary-text-solid);
+  --action-button-solid-pressed-bg: var(--function-default-solid);
+  --action-button-solid-pressed-border: var(--function-default-solid);
+  --action-button-solid-pressed-text: var(--function-default-icon);
   /* Active State */
-  --action-button-solid-active-bg: var(--state-color-primary-default);
-  --action-button-solid-active-border: var(--state-color-primary-default);
-  --action-button-solid-active-text: var(--state-color-primary-text-solid);
+  --action-button-solid-active-bg: var(--function-active-solid);
+  --action-button-solid-active-border: var(--function-active-solid);
+  --action-button-solid-active-text: var(--function-active-icon);
   /* Active Hover State */
-  --action-button-solid-active-hover-bg: var(--state-color-primary-hover);
-  --action-button-solid-active-hover-border: var(--state-color-primary-hover);
-  --action-button-solid-active-hover-text: var(--state-color-primary-text-solid);
+  --action-button-solid-active-hover-bg: var(--function-active-hover);
+  --action-button-solid-active-hover-border: var(--function-active-hover);
+  --action-button-solid-active-hover-text: var(--function-active-icon);
   /* Active Pressed State */
-  --action-button-solid-active-pressed-bg: var(--state-color-primary-pressed);
-  --action-button-solid-active-pressed-border: var(--state-color-primary-pressed);
-  --action-button-solid-active-pressed-text: var(--state-color-primary-text-solid);
+  --action-button-solid-active-pressed-bg: var(--function-active-solid);
+  --action-button-solid-active-pressed-border: var(--function-active-solid);
+  --action-button-solid-active-pressed-text: var(--function-active-icon);
   /* ------------------------------------------------------------------ */
   /* Outline Mode Tokens                                                */
   /* ------------------------------------------------------------------ */
   /* Default State */
-  --action-button-outline-default-border: var(--state-color-secondary-stroke);
-  --action-button-outline-default-text: var(--state-color-secondary-text-outline);
+  --action-button-outline-default-border: var(--function-default-stroke);
+  --action-button-outline-default-text: var(--function-default-outline-icon);
   /* Hover State */
-  --action-button-outline-hover-bg:  var(--state-color-secondary-hover-bg);
-  --action-button-outline-hover-border: var(--state-color-secondary-hover);
-  --action-button-outline-hover-text: var(--state-color-secondary-text-hover);
+  --action-button-outline-hover-bg: var(--function-default-hover-bg);
+  --action-button-outline-hover-border: var(--function-default-hover);
+  --action-button-outline-hover-text: var(--function-default-hover);
   /* Pressed State */
-  --action-button-outline-pressed-bg: var(--state-color-secondary-hover-bg);
-  --action-button-outline-pressed-border: var(--state-color-secondary-pressed);
-  --action-button-outline-pressed-text: var(--state-color-secondary-text-pressed);
+  --action-button-outline-pressed-bg: var(--function-default-hover-bg);
+  --action-button-outline-pressed-border: var(--function-default-stroke);
+  --action-button-outline-pressed-text: var(--function-default-outline-icon);
   /* Active State */
-  --action-button-outline-active-border: var(--state-color-primary-stroke);
-  --action-button-outline-active-text: var(--state-color-primary-text-outline);
+  --action-button-outline-active-border: var(--function-active-stroke);
+  --action-button-outline-active-text: var(--function-active-solid);
   /* Active Hover State */
-  --action-button-outline-active-hover-bg:  var(--state-color-primary-hover-bg);
-  --action-button-outline-active-hover-border: var(--state-color-primary-hover);
-  --action-button-outline-active-hover-text: var(--state-color-primary-text-hover);
+  --action-button-outline-active-hover-bg:  var(--function-active-hover-bg);
+  --action-button-outline-active-hover-border: var(--function-active-hover);
+  --action-button-outline-active-hover-text: var(--function-active-hover);
   /* Active Pressed State */
-  --action-button-outline-active-pressed-bg: var(--state-color-primary-hover-bg);
-  --action-button-outline-active-pressed-border: var(--state-color-primary-pressed);
-  --action-button-outline-active-pressed-text: var(--state-color-primary-text-pressed);
+  --action-button-outline-active-pressed-bg: var(--function-active-hover-bg);
+  --action-button-outline-active-pressed-border: var(--function-active-stroke);
+  --action-button-outline-active-pressed-text: var(--function-active-solid);
   /* ------------------------------------------------------------------ */
   /* Icon Mode Tokens                                                  */
   /* ------------------------------------------------------------------ */
   /* Default State */
-  --action-button-icon-default-text: var(--state-color-secondary-text-outline);
+  --action-button-icon-default-text: var(--function-default-outline-icon);
   /* Hover State */
-  --action-button-icon-hover-bg: var(--state-color-secondary-hover-bg);
-  --action-button-icon-hover-text: var(--state-color-secondary-text-hover);
+  --action-button-icon-hover-bg: var(--function-default-hover-bg);
+  --action-button-icon-hover-text: var(--function-default-hover);
   /* Pressed State */
-  --action-button-icon-pressed-text: var(--state-color-secondary-text-pressed);
+  --action-button-icon-pressed-text: var(--function-default-outline-icon);
   /* Active State */
-  --action-button-icon-active-text: var(--state-color-primary-text-outline);
+  --action-button-icon-active-text: var(--function-active-solid);
   /* Active Hover State */
-  --action-button-icon-active-hover-bg:  var(--state-color-primary-hover-bg);
-  --action-button-icon-active-hover-text: var(--state-color-primary-text-hover);
-  --action-button-icon-active-pressed-text: var(--state-color-primary-text-pressed);
+  --action-button-icon-active-hover-bg: var(--function-active-hover-bg);
+  --action-button-icon-active-hover-text: var(--function-active-hover);
+  /* Active Pressed State */
+  --action-button-icon-active-pressed-text: var(--function-active-solid);
   /* ------------------------------------------------------------------ */
   /* Loading Component Tokens                                           */
   /* ------------------------------------------------------------------ */
@@ -2337,6 +2362,10 @@ body {
   display: grid;
 }
 
+.contents {
+  display: contents;
+}
+
 .hidden {
   display: none;
 }
@@ -2350,16 +2379,6 @@ body {
   height: 3.5rem;
 }
 
-.size-2 {
-  width: 0.5rem;
-  height: 0.5rem;
-}
-
-.size-2\.5 {
-  width: 0.625rem;
-  height: 0.625rem;
-}
-
 .size-3 {
   width: 0.75rem;
   height: 0.75rem;
@@ -2467,6 +2486,10 @@ body {
   height: 32px;
 }
 
+.h-\[400px\] {
+  height: 400px;
+}
+
 .h-\[40px\] {
   height: 40px;
 }
@@ -3082,6 +3105,11 @@ body {
   border-color: color-mix(in srgb, var(--state-color-error-stroke) calc(100% * var(--tw-border-opacity)), transparent);
 }
 
+.border-function-default-solid {
+  --tw-border-opacity: 1;
+  border-color: color-mix(in srgb, var(--function-default-solid) calc(100% * var(--tw-border-opacity)), 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)), transparent);
@@ -3135,6 +3163,11 @@ body {
   border-left-color: color-mix(in srgb, var(--input-color-default-stroke) calc(100% * var(--tw-border-opacity)), 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)), 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)), transparent);
@@ -3215,6 +3248,11 @@ body {
   background-color: color-mix(in srgb, var(--background) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
+.bg-base-bg2 {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--base-color-bg2) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
 .bg-base-popup {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--base-color-popup) calc(100% * var(--tw-bg-opacity)), transparent);
@@ -3225,6 +3263,11 @@ body {
   background-color: color-mix(in srgb, var(--base-color-popup-curtain) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
+.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)), transparent);
+}
+
 .bg-black {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
@@ -3345,6 +3388,11 @@ body {
   background-color: color-mix(in srgb, var(--other-transparency-error-8) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
+.bg-function-active-hover {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--function-active-hover) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
 .bg-gray-200 {
   --tw-bg-opacity: 1;
   background-color: rgb(229 231 235 / var(--tw-bg-opacity));
@@ -3405,11 +3453,6 @@ body {
   background-color: color-mix(in srgb, var(--state-color-secondary-default) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
-.bg-secondary-hover {
-  --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-secondary-hover) calc(100% * var(--tw-bg-opacity)), 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)), transparent);
@@ -3579,10 +3622,30 @@ body {
   fill: color-mix(in srgb, var(--input-color-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-primary {
   fill: color-mix(in srgb, var(--state-color-primary-default) calc(100% * 1), transparent);
 }
 
+.fill-primary-default {
+  fill: color-mix(in srgb, var(--state-color-primary-default) calc(100% * 1), transparent);
+}
+
+.stroke-input-default-stroke {
+  stroke: color-mix(in srgb, var(--input-color-default-stroke) calc(100% * 1), transparent);
+}
+
+.stroke-input-disable-stroke {
+  stroke: color-mix(in srgb, var(--input-color-disable-stroke) calc(100% * 1), transparent);
+}
+
+.stroke-primary-default {
+  stroke: color-mix(in srgb, var(--state-color-primary-default) calc(100% * 1), transparent);
+}
+
 .p-0 {
   padding: 0px;
 }
@@ -3749,68 +3812,68 @@ body {
   padding-bottom: var(--spacing-spacing-xxs);
 }
 
-.pe-\[30px\] {
-  padding-inline-end: 30px;
+.\!pe-\[38px\] {
+  padding-inline-end: 38px !important;
 }
 
-.pe-\[38px\] {
-  padding-inline-end: 38px;
+.\!pe-\[46px\] {
+  padding-inline-end: 46px !important;
 }
 
-.pe-\[40px\] {
-  padding-inline-end: 40px;
+.\!pe-\[72px\] {
+  padding-inline-end: 72px !important;
 }
 
-.pe-\[46px\] {
-  padding-inline-end: 46px;
+.\!ps-11 {
+  padding-inline-start: 2.75rem !important;
 }
 
-.pe-\[48px\] {
-  padding-inline-end: 48px;
+.\!ps-6 {
+  padding-inline-start: 1.5rem !important;
 }
 
-.pe-\[72px\] {
-  padding-inline-end: 72px;
+.\!ps-9 {
+  padding-inline-start: 2.25rem !important;
 }
 
-.pl-8 {
-  padding-left: 2rem;
+.\!ps-\[38px\] {
+  padding-inline-start: 38px !important;
 }
 
-.pl-9 {
-  padding-left: 2.25rem;
+.\!ps-\[46px\] {
+  padding-inline-start: 46px !important;
 }
 
-.pr-4 {
-  padding-right: 1rem;
+.\!ps-\[72px\] {
+  padding-inline-start: 72px !important;
 }
 
-.pr-xxl {
-  padding-right: var(--spacing-spacing-xxl);
+.pe-\[30px\] {
+  padding-inline-end: 30px;
 }
 
-.ps-11 {
-  padding-inline-start: 2.75rem;
+.pe-\[40px\] {
+  padding-inline-end: 40px;
 }
 
-.ps-6 {
-  padding-inline-start: 1.5rem;
+.pe-\[68px\] {
+  padding-inline-end: 68px;
 }
 
-.ps-9 {
-  padding-inline-start: 2.25rem;
+.pl-8 {
+  padding-left: 2rem;
 }
 
-.ps-\[38px\] {
-  padding-inline-start: 38px;
+.pl-9 {
+  padding-left: 2.25rem;
 }
 
-.ps-\[46px\] {
-  padding-inline-start: 46px;
+.pr-4 {
+  padding-right: 1rem;
 }
 
-.ps-\[72px\] {
-  padding-inline-start: 72px;
+.pr-xxl {
+  padding-right: var(--spacing-spacing-xxl);
 }
 
 .text-left {
@@ -4248,6 +4311,16 @@ body {
   color: color-mix(in srgb, var(--foreground) calc(100% * var(--tw-text-opacity)), transparent);
 }
 
+.text-function-active-icon {
+  --tw-text-opacity: 1;
+  color: color-mix(in srgb, var(--function-active-icon) calc(100% * var(--tw-text-opacity)), transparent);
+}
+
+.text-function-default-solid {
+  --tw-text-opacity: 1;
+  color: color-mix(in srgb, var(--function-default-solid) calc(100% * var(--tw-text-opacity)), transparent);
+}
+
 .text-gray-400 {
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity));
@@ -4841,14 +4914,14 @@ body {
   border-color: color-mix(in srgb, var(--button-warning-solid-hover-border) calc(100% * var(--tw-border-opacity)), transparent);
 }
 
-.hover\:border-input-active-stroke:hover {
+.hover\:border-function-default-hover:hover {
   --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--input-color-active-stroke) calc(100% * var(--tw-border-opacity)), transparent);
+  border-color: color-mix(in srgb, var(--function-default-hover) calc(100% * var(--tw-border-opacity)), transparent);
 }
 
-.hover\:border-primary-hover:hover {
+.hover\:border-input-active-stroke:hover {
   --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--state-color-primary-hover) calc(100% * var(--tw-border-opacity)), transparent);
+  border-color: color-mix(in srgb, var(--input-color-active-stroke) calc(100% * var(--tw-border-opacity)), transparent);
 }
 
 .hover\:bg-action-button-icon-active-hover:hover {
@@ -6392,6 +6465,14 @@ body {
   top: 1rem;
 }
 
+.peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:block {
+  display: block;
+}
+
+.peer:placeholder-shown ~ .peer-placeholder-shown\:block {
+  display: block;
+}
+
 .peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:bg-transparent {
   background-color: transparent;
 }
@@ -6445,6 +6526,18 @@ body {
   fill: color-mix(in srgb, var(--input-color-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);
+}
+
+.peer:hover ~ .peer-hover\:stroke-input-active-stroke {
+  stroke: color-mix(in srgb, var(--input-color-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);
+}
+
 .peer:focus ~ .peer-focus\:-top-1 {
   top: -0.25rem;
 }
@@ -6472,10 +6565,26 @@ body {
   background-color: rgb(239 68 68 / var(--tw-bg-opacity));
 }
 
+.peer:focus ~ .peer-focus\:bg-transparent {
+  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);
 }
 
+.peer:focus ~ .peer-focus\:fill-primary-hover {
+  fill: color-mix(in srgb, var(--state-color-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);
+}
+
+.peer:focus ~ .peer-focus\:stroke-primary-hover {
+  stroke: color-mix(in srgb, var(--state-color-primary-hover) calc(100% * 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)), transparent);
@@ -6510,6 +6619,10 @@ body {
   opacity: 0.7;
 }
 
+.data-\[disabled\]\:\!pointer-events-none[data-disabled] {
+  pointer-events: none !important;
+}
+
 .data-\[disabled\]\:pointer-events-none[data-disabled] {
   pointer-events: none;
 }
@@ -6539,13 +6652,17 @@ body {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.data-\[disabled\]\:\!cursor-not-allowed[data-disabled] {
+  cursor: not-allowed !important;
+}
+
 .data-\[disabled\]\:cursor-not-allowed[data-disabled] {
   cursor: not-allowed;
 }
 
-.data-\[disabled\]\:border-state-disable-solid[data-disabled] {
-  --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--state-color-disable-solid) calc(100% * var(--tw-border-opacity)), transparent);
+.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)), transparent) !important;
 }
 
 .data-\[loading\=true\]\:border-button-error-flat-active[data-loading=true] {
@@ -6653,9 +6770,9 @@ body {
   border-color: color-mix(in srgb, var(--button-warning-solid-active-border) calc(100% * var(--tw-border-opacity)), transparent);
 }
 
-.data-\[state\=checked\]\:border-secondary[data-state=checked] {
+.data-\[state\=checked\]\:border-function-active-solid[data-state=checked] {
   --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--state-color-secondary-default) calc(100% * var(--tw-border-opacity)), transparent);
+  border-color: color-mix(in srgb, var(--function-active-solid) calc(100% * var(--tw-border-opacity)), transparent);
 }
 
 .data-\[disabled\]\:\!bg-\[var\(--dropdown-menu-disabled-bg\)\][data-disabled] {
@@ -6775,9 +6892,9 @@ body {
   background-color: var(--dropdown-menu-selected-bg);
 }
 
-.data-\[state\=checked\]\:bg-secondary[data-state=checked] {
+.data-\[state\=checked\]\:bg-function-active-solid[data-state=checked] {
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-secondary-default) calc(100% * var(--tw-bg-opacity)), transparent);
+  background-color: color-mix(in srgb, var(--function-active-solid) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
 .data-\[state\=checked\]\:bg-secondary-active\/\[0\.32\][data-state=checked] {
@@ -6803,8 +6920,8 @@ body {
   background-color: color-mix(in srgb, var(--state-color-tertiary-active) calc(100% * 0.32), transparent);
 }
 
-.data-\[disabled\]\:fill-state-disable-solid[data-disabled] {
-  fill: color-mix(in srgb, var(--state-color-disable-solid) calc(100% * 1), transparent);
+.data-\[disabled\]\:\!fill-state-disable-solid[data-disabled] {
+  fill: color-mix(in srgb, var(--state-color-disable-solid) calc(100% * 1), transparent) !important;
 }
 
 .data-\[loading\=true\]\:fill-button-error-flat-active[data-loading=true] {
@@ -6895,9 +7012,9 @@ body {
   color: var(--dropdown-menu-disabled-text) !important;
 }
 
-.data-\[disabled\]\:text-state-disable-solid[data-disabled] {
-  --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--state-color-disable-solid) calc(100% * var(--tw-text-opacity)), transparent);
+.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)), transparent) !important;
 }
 
 .data-\[loading\=true\]\:text-button-error-flat-active[data-loading=true] {
@@ -7009,14 +7126,14 @@ body {
   color: var(--dropdown-menu-selected-text);
 }
 
-.data-\[state\=checked\]\:text-secondary[data-state=checked] {
+.data-\[state\=checked\]\:text-function-active-icon[data-state=checked] {
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--state-color-secondary-default) calc(100% * var(--tw-text-opacity)), transparent);
+  color: color-mix(in srgb, var(--function-active-icon) calc(100% * var(--tw-text-opacity)), transparent);
 }
 
-.data-\[state\=checked\]\:text-secondary-foreground[data-state=checked] {
+.data-\[state\=checked\]\:text-function-active-solid[data-state=checked] {
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--secondary-foreground) calc(100% * var(--tw-text-opacity)), transparent);
+  color: color-mix(in srgb, var(--function-active-solid) calc(100% * var(--tw-text-opacity)), transparent);
 }
 
 .data-\[state\=open\]\:text-primary-foreground[data-state=open] {
@@ -7034,27 +7151,27 @@ body {
   font-weight: var(--subtitle5-weight, 500);
 }
 
-.hover\:data-\[state\=checked\]\:border-secondary-hover[data-state=checked]:hover {
+.hover\:data-\[state\=checked\]\:border-function-active-hover[data-state=checked]:hover {
   --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--state-color-secondary-hover) calc(100% * var(--tw-border-opacity)), transparent);
+  border-color: color-mix(in srgb, var(--function-active-hover) calc(100% * var(--tw-border-opacity)), transparent);
 }
 
-.hover\:data-\[state\=checked\]\:bg-secondary-active\/\[0\.48\][data-state=checked]:hover {
-  background-color: color-mix(in srgb, var(--state-color-secondary-active) calc(100% * 0.48), transparent);
+.hover\:data-\[state\=checked\]\:bg-function-active-hover[data-state=checked]:hover {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--function-active-hover) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
-.hover\:data-\[state\=checked\]\:bg-secondary-hover[data-state=checked]:hover {
-  --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-secondary-hover) calc(100% * var(--tw-bg-opacity)), transparent);
+.hover\:data-\[state\=checked\]\:bg-secondary-active\/\[0\.48\][data-state=checked]:hover {
+  background-color: color-mix(in srgb, var(--state-color-secondary-active) calc(100% * 0.48), transparent);
 }
 
 .hover\:data-\[state\=unchecked\]\:bg-tertiary-active\/\[0\.48\][data-state=unchecked]:hover {
   background-color: color-mix(in srgb, var(--state-color-tertiary-active) calc(100% * 0.48), transparent);
 }
 
-.hover\:data-\[state\=checked\]\:text-secondary-hover[data-state=checked]:hover {
+.hover\:data-\[state\=checked\]\:text-function-active-hover[data-state=checked]:hover {
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--state-color-secondary-hover) calc(100% * var(--tw-text-opacity)), transparent);
+  color: color-mix(in srgb, var(--function-active-hover) calc(100% * var(--tw-text-opacity)), transparent);
 }
 
 .group:hover .group-hover\:data-\[state\=checked\]\:ring-secondary-hover-bg[data-state=checked] {