@rovula/ui 0.0.46 → 0.0.48

package/dist/cjs/bundle.css

@@ -1,6 +1,7 @@
 
 @import "./tokens/baseline.css";
 @import "./themes/xspector/baseline.css";
+@import "./themes/SKL/baseline.css";
 
 /*
 ! tailwindcss v3.4.3 | MIT License | https://tailwindcss.com
@@ -698,6 +699,9 @@ input[type=number] {
 .mr-4{
   margin-right: 1rem;
 }
+.mr-\[2px\]{
+  margin-right: 2px;
+}
 .mt-1{
   margin-top: 0.25rem;
 }
@@ -776,6 +780,10 @@ input[type=number] {
   width: 14px;
   height: 14px;
 }
+.size-\[16pt\]{
+  width: 16pt;
+  height: 16pt;
+}
 .size-\[30px\]{
   width: 30px;
   height: 30px;
@@ -788,6 +796,9 @@ input[type=number] {
   width: 100%;
   height: 100%;
 }
+.h-1\/2{
+  height: 50%;
+}
 .h-10{
   height: 2.5rem;
 }
@@ -858,6 +869,9 @@ input[type=number] {
 .max-h-screen{
   max-height: 100vh;
 }
+.min-h-10{
+  min-height: 2.5rem;
+}
 .w-1\/2{
   width: 50%;
 }
@@ -1131,6 +1145,9 @@ input[type=number] {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.text-ellipsis{
+  text-overflow: ellipsis;
+}
 .rounded{
   border-radius: 0.25rem;
 }
@@ -2201,10 +2218,6 @@ input[type=number] {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--secondary-ramps-secondary-90) calc(100% * var(--tw-bg-opacity)), transparent);
 }
-.bg-secondary-active{
-  --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-secondary-active) calc(100% * var(--tw-bg-opacity)), 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)), transparent);
@@ -2722,6 +2735,9 @@ input[type=number] {
 .fill-primary-default{
   fill: color-mix(in srgb, var(--state-color-primary-default) calc(100% * 1), transparent);
 }
+.fill-warning{
+  fill: color-mix(in srgb, var(--state-color-warning-default) calc(100% * 1), transparent);
+}
 .stroke-input-default-stroke{
   stroke: color-mix(in srgb, var(--input-color-default-stroke) calc(100% * 1), transparent);
 }
@@ -4977,9 +4993,8 @@ input[type=number] {
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
-.group:disabled .group-disabled\: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);
+.group:disabled .group-disabled\:\!bg-\[--switch-thumb-disabled-color\]{
+  background-color: var(--switch-thumb-disabled-color) !important;
 }
 .peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:top-2{
   top: 0.5rem;
@@ -5241,8 +5256,8 @@ input[type=number] {
 .data-\[disabled\]\:\!bg-\[var\(--dropdown-menu-disabled-bg\)\][data-disabled]{
   background-color: var(--dropdown-menu-disabled-bg) !important;
 }
-.data-\[disabled\]\:bg-state-disable-solid\/\[0\.32\][data-disabled]{
-  background-color: color-mix(in srgb, var(--state-color-disable-solid) calc(100% * 0.32), transparent);
+.data-\[disabled\]\:\!bg-\[var\(--switch-disabled-color\)\][data-disabled]{
+  background-color: var(--switch-disabled-color) !important;
 }
 .data-\[loading\=true\]\:bg-button-error-flat-active[data-loading=true]{
   --tw-bg-opacity: 1;
@@ -5331,13 +5346,16 @@ input[type=number] {
 .data-\[state\=\'checked\'\]\:bg-\[var\(--dropdown-menu-selected-bg\)\][data-state='checked']{
   background-color: var(--dropdown-menu-selected-bg);
 }
+.data-\[state\=checked\]\:bg-\[var\(--switch-active-color\)\][data-state=checked]{
+  background-color: var(--switch-active-color);
+}
+.data-\[state\=checked\]\:bg-\[var\(--switch-thumb-active-color\)\][data-state=checked]{
+  background-color: var(--switch-thumb-active-color);
+}
 .data-\[state\=checked\]\:bg-function-active-solid[data-state=checked]{
   --tw-bg-opacity: 1;
   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]{
-  background-color: color-mix(in srgb, var(--state-color-secondary-active) calc(100% * 0.32), transparent);
-}
 .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)), transparent);
@@ -5346,12 +5364,11 @@ input[type=number] {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--grey-grey-20) calc(100% * var(--tw-bg-opacity)), transparent);
 }
-.data-\[state\=unchecked\]\:bg-tertiary-active[data-state=unchecked]{
-  --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-tertiary-active) calc(100% * var(--tw-bg-opacity)), transparent);
+.data-\[state\=unchecked\]\:bg-\[var\(--switch-default-color\)\][data-state=unchecked]{
+  background-color: var(--switch-default-color);
 }
-.data-\[state\=unchecked\]\:bg-tertiary-active\/\[0\.32\][data-state=unchecked]{
-  background-color: color-mix(in srgb, var(--state-color-tertiary-active) calc(100% * 0.32), transparent);
+.data-\[state\=unchecked\]\:bg-\[var\(--switch-thumb-default-color\)\][data-state=unchecked]{
+  background-color: var(--switch-thumb-default-color);
 }
 .data-\[disabled\]\:\!fill-state-disable-solid[data-disabled]{
   fill: color-mix(in srgb, var(--state-color-disable-solid) calc(100% * 1), transparent) !important;
@@ -5537,27 +5554,31 @@ input[type=number] {
   --tw-border-opacity: 1;
   border-color: color-mix(in srgb, var(--function-active-hover) calc(100% * var(--tw-border-opacity)), transparent);
 }
+.hover\:data-\[state\=checked\]\:bg-\[var\(--switch-active-hover-color\)\][data-state=checked]:hover{
+  background-color: var(--switch-active-hover-color);
+}
 .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-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\=unchecked\]\:bg-\[var\(--switch-hover-color\)\][data-state=unchecked]:hover{
+  background-color: var(--switch-hover-color);
 }
 .hover\:data-\[state\=checked\]\:text-function-active-hover[data-state=checked]:hover{
   --tw-text-opacity: 1;
   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]{
-  --tw-ring-opacity: 1;
-  --tw-ring-color: color-mix(in srgb, var(--state-color-secondary-hover-bg) calc(100% * var(--tw-ring-opacity)), 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);
 }
-.group:hover .group-hover\:data-\[state\=unchecked\]\:ring-tertiary-hover-bg[data-state=unchecked]{
-  --tw-ring-opacity: 1;
-  --tw-ring-color: color-mix(in srgb, var(--state-color-tertiary-hover-bg) calc(100% * var(--tw-ring-opacity)), transparent);
+.group:hover .group-hover\:data-\[state\=unchecked\]\:bg-\[var\(--switch-thumb-hover-color\)\][data-state=unchecked]{
+  background-color: var(--switch-thumb-hover-color);
+}
+.group:hover .group-hover\:data-\[state\=checked\]\:ring-\[var\(--switch-thumb-active-hover-ring\)\][data-state=checked]{
+  --tw-ring-color: var(--switch-thumb-active-hover-ring);
+}
+.group:hover .group-hover\:data-\[state\=unchecked\]\:ring-\[var\(--switch-thumb-hover-ring\)\][data-state=unchecked]{
+  --tw-ring-color: var(--switch-thumb-hover-ring);
 }
 @media (min-width: 640px){