@moduix/react 2.0.0 → 2.2.0

package/dist/components/color-picker/ColorPicker.css

@@ -1,10 +1,10 @@
-@layer ui.components {
+@layer moduix.components {
   @keyframes kgcaIq_color-picker-content-open {
     from {
-      opacity: var(--color-picker-content-closed-opacity, var(--popup-motion-starting-opacity, 0));
-      translate: var(--popup-motion-starting-translate-x, 0)
-        var(--popup-motion-starting-translate-y, 0);
-      transform: scale(var(--color-picker-content-closed-scale, var(--popup-motion-starting-scale, var(--scale-popup))));
+      opacity: var(--moduix-color-picker-content-closed-opacity, var(--moduix-popup-motion-starting-opacity, 0));
+      translate: var(--moduix-popup-motion-starting-translate-x, 0)
+        var(--moduix-popup-motion-starting-translate-y, 0);
+      transform: scale(var(--moduix-color-picker-content-closed-scale, var(--moduix-popup-motion-starting-scale, var(--moduix-scale-popup))));
     }
 
     to {
@@ -20,68 +20,71 @@
     }
 
     to {
-      opacity: var(--color-picker-content-closed-opacity, var(--popup-motion-ending-opacity, 0));
-      translate: var(--popup-motion-ending-translate-x, 0) var(--popup-motion-ending-translate-y, 0);
-      transform: scale(var(--color-picker-content-closed-scale, var(--popup-motion-ending-scale, var(--scale-popup))));
+      opacity: var(--moduix-color-picker-content-closed-opacity, var(--moduix-popup-motion-ending-opacity, 0));
+      translate: var(--moduix-popup-motion-ending-translate-x, 0)
+        var(--moduix-popup-motion-ending-translate-y, 0);
+      transform: scale(var(--moduix-color-picker-content-closed-scale, var(--moduix-popup-motion-ending-scale, var(--moduix-scale-popup))));
     }
   }
 
   .kgcaIq_root {
     box-sizing: border-box;
-    width: var(--color-picker-width, 16rem);
-    max-width: var(--color-picker-max-width, 100%);
-    gap: var(--color-picker-root-gap, var(--spacing-2));
+    width: var(--moduix-color-picker-width, 16rem);
+    max-width: var(--moduix-color-picker-max-width, 100%);
+    gap: var(--moduix-color-picker-root-gap, var(--moduix-spacing-2));
     min-width: 0;
-    color: var(--color-picker-color, var(--color-foreground));
+    color: var(--moduix-color-picker-color, var(--moduix-color-foreground));
     flex-direction: column;
     display: flex;
 
     &[data-disabled] {
-      opacity: var(--color-picker-disabled-opacity, var(--opacity-disabled));
+      opacity: var(--moduix-color-picker-disabled-opacity, var(--moduix-opacity-disabled));
     }
   }
 
   .kgcaIq_label {
-    color: var(--color-picker-label-color, var(--color-picker-color, var(--color-foreground)));
-    font-size: var(--color-picker-label-font-size, var(--text-sm));
-    font-weight: var(--color-picker-label-font-weight, var(--weight-medium));
-    line-height: var(--color-picker-label-line-height, var(--line-height-text-sm));
+    color: var(--moduix-color-picker-label-color, var(--moduix-color-picker-color, var(--moduix-color-foreground)));
+    font-size: var(--moduix-color-picker-label-font-size, var(--moduix-text-sm));
+    font-weight: var(--moduix-color-picker-label-font-weight, var(--moduix-weight-medium));
+    line-height: var(--moduix-color-picker-label-line-height, var(--moduix-line-height-text-sm));
     user-select: none;
     align-items: center;
     display: inline-flex;
 
     &[data-disabled] {
-      opacity: var(--color-picker-disabled-opacity, var(--opacity-disabled));
+      opacity: var(--moduix-color-picker-disabled-opacity, var(--moduix-opacity-disabled));
     }
   }
 
   .kgcaIq_control {
     align-items: center;
-    gap: var(--color-picker-control-gap, var(--spacing-2));
+    gap: var(--moduix-color-picker-control-gap, var(--moduix-spacing-2));
     min-width: 0;
     display: flex;
 
     &[data-disabled] {
-      opacity: var(--color-picker-disabled-opacity, var(--opacity-disabled));
+      opacity: var(--moduix-color-picker-disabled-opacity, var(--moduix-opacity-disabled));
     }
   }
 
   .kgcaIq_trigger {
     box-sizing: border-box;
-    width: var(--color-picker-trigger-size, var(--size-lg));
-    height: var(--color-picker-trigger-size, var(--size-lg));
-    border: var(--color-picker-border-width, var(--border-width-sm)) solid
-      var(--color-picker-border-color, var(--color-border));
-    border-radius: var(--color-picker-radius, var(--radius-md));
-    padding: var(--color-picker-trigger-padding, var(--spacing-1));
-    background: var(--color-picker-control-bg, var(--color-background));
-    color: var(--color-picker-color, var(--color-foreground));
-    outline: var(--color-picker-focus-ring-width, var(--border-width-sm)) solid transparent;
-    outline-offset: calc(var(--color-picker-focus-ring-width, var(--border-width-sm)) * -1);
+    width: var(--moduix-color-picker-trigger-size, var(--moduix-size-md));
+    height: var(--moduix-color-picker-trigger-size, var(--moduix-size-md));
+    border: var(--moduix-color-picker-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-color-picker-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-color-picker-radius, var(--moduix-radius-md));
+    padding: var(--moduix-color-picker-trigger-padding, var(--moduix-spacing-1));
+    background: var(--moduix-color-picker-control-bg, var(--moduix-color-background));
+    color: var(--moduix-color-picker-color, var(--moduix-color-foreground));
+    outline: var(--moduix-color-picker-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
+      solid transparent;
+    outline-offset: calc(var(--moduix-color-picker-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm))) *
+        -1);
     cursor: pointer;
-    transition: border-color var(--color-picker-transition, var(--transition-default)),
-      outline-color var(--color-picker-transition, var(--transition-default)),
-      background-color var(--color-picker-transition, var(--transition-default));
+    transition: border-color var(--moduix-color-picker-transition, var(--moduix-transition-default)),
+      outline-color var(--moduix-color-picker-transition, var(--moduix-transition-default)),
+      background-color var(--moduix-color-picker-transition, var(--moduix-transition-default));
     flex-shrink: 0;
     place-items: center;
     margin: 0;
@@ -89,13 +92,13 @@
     overflow: hidden;
 
     &:is(:focus-visible, [data-focus]) {
-      border-color: var(--color-picker-focus-ring-color, var(--color-ring));
-      outline-color: var(--color-picker-focus-ring-color, var(--color-ring));
+      border-color: var(--moduix-color-picker-focus-ring-color, var(--moduix-color-ring));
+      outline-color: var(--moduix-color-picker-focus-ring-color, var(--moduix-color-ring));
     }
 
     &[data-invalid] {
-      border-color: var(--color-picker-invalid-color, var(--color-destructive));
-      outline-color: var(--color-picker-invalid-color, var(--color-destructive));
+      border-color: var(--moduix-color-picker-invalid-color, var(--moduix-color-destructive));
+      outline-color: var(--moduix-color-picker-invalid-color, var(--moduix-color-destructive));
     }
 
     &:is([disabled], [data-disabled], [data-readonly]) {
@@ -104,38 +107,38 @@
 
     &[data-fit-content] {
       width: auto;
-      min-width: var(--color-picker-trigger-size, var(--size-lg));
-      padding-inline: var(--color-picker-trigger-fit-content-padding-x, var(--spacing-3));
-      gap: var(--color-picker-trigger-fit-content-gap, var(--spacing-2));
+      min-width: var(--moduix-color-picker-trigger-size, var(--moduix-size-md));
+      padding-inline: var(--moduix-color-picker-trigger-fit-content-padding-x, var(--moduix-spacing-3));
+      gap: var(--moduix-color-picker-trigger-fit-content-gap, var(--moduix-spacing-2));
       display: inline-flex;
     }
 
     &[data-fit-content] [data-slot="color-picker-transparency-grid"], &[data-fit-content] [data-slot="color-picker-value-swatch"] {
-      width: var(--color-picker-trigger-fit-content-swatch-size, 1rem);
-      height: var(--color-picker-trigger-fit-content-swatch-size, 1rem);
+      width: var(--moduix-color-picker-trigger-fit-content-swatch-size, var(--moduix-spacing-4));
+      height: var(--moduix-color-picker-trigger-fit-content-swatch-size, var(--moduix-spacing-4));
       flex-shrink: 0;
       grid-area: auto;
     }
   }
 
   .kgcaIq_positioner {
-    z-index: var(--z-popup);
+    z-index: var(--moduix-z-popup);
     outline: 0;
   }
 
   .kgcaIq_content {
     box-sizing: border-box;
-    width: var(--color-picker-content-width, 16rem);
+    width: var(--moduix-color-picker-content-width, 16rem);
     max-width: var(--available-width);
-    max-height: min(var(--color-picker-content-max-height, 32rem), var(--available-height));
-    gap: var(--color-picker-content-gap, var(--spacing-3));
-    border: var(--color-picker-content-border-width, var(--border-width-sm)) solid
-      var(--color-picker-content-border-color, var(--color-border));
-    border-radius: var(--color-picker-content-radius, var(--color-picker-radius, var(--radius-md)));
-    padding: var(--color-picker-content-padding, var(--spacing-4));
-    background-color: var(--color-picker-content-bg, var(--color-popover));
-    box-shadow: var(--color-picker-content-shadow, var(--shadow-lg));
-    color: var(--color-picker-content-color, var(--color-popover-foreground));
+    max-height: min(var(--moduix-color-picker-content-max-height, 32rem), var(--available-height));
+    gap: var(--moduix-color-picker-content-gap, var(--moduix-spacing-3));
+    border: var(--moduix-color-picker-content-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-color-picker-content-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-color-picker-content-radius, var(--moduix-color-picker-radius, var(--moduix-radius-md)));
+    padding: var(--moduix-color-picker-content-padding, var(--moduix-spacing-4));
+    background-color: var(--moduix-color-picker-content-bg, var(--moduix-color-popover));
+    box-shadow: var(--moduix-color-picker-content-shadow, var(--moduix-shadow-lg));
+    color: var(--moduix-color-picker-content-color, var(--moduix-color-popover-foreground));
     transform-origin: var(--transform-origin);
     overscroll-behavior: contain;
     outline: 0;
@@ -145,24 +148,25 @@
 
     &[data-state="open"] {
       animation: kgcaIq_color-picker-content-open
-        var(--color-picker-transition, var(--popup-motion-duration, var(--duration-normal))
-            var(--popup-motion-easing, var(--ease-in-out)));
+        var(--moduix-color-picker-transition, var(--moduix-popup-motion-duration, var(--moduix-duration-normal))
+            var(--moduix-popup-motion-easing, var(--moduix-ease-in-out)));
     }
 
     &[data-state="closed"] {
       animation: kgcaIq_color-picker-content-closed
-        var(--color-picker-transition, var(--popup-motion-duration, var(--duration-normal))
-            var(--popup-motion-easing, var(--ease-in-out)));
+        var(--moduix-color-picker-transition, var(--moduix-popup-motion-duration, var(--moduix-duration-normal))
+            var(--moduix-popup-motion-easing, var(--moduix-ease-in-out)));
     }
   }
 
   .kgcaIq_area {
     box-sizing: border-box;
     width: 100%;
-    height: var(--color-picker-area-height, 10rem);
-    border-radius: var(--color-picker-area-radius, var(--radius-md));
-    box-shadow: inset 0 0 0 var(--color-picker-area-border-width, var(--border-width-sm))
-      var(--color-picker-area-border-color, color-mix(in oklab, var(--color-border) 70%, transparent));
+    height: var(--moduix-color-picker-area-height, 10rem);
+    border-radius: var(--moduix-color-picker-area-radius, var(--moduix-radius-md));
+    box-shadow: inset 0 0 0
+      var(--moduix-color-picker-area-border-width, var(--moduix-border-width-sm))
+      var(--moduix-color-picker-area-border-color, color-mix(in oklab, var(--moduix-color-border) 70%, transparent));
     touch-action: none;
     user-select: none;
     position: relative;
@@ -181,24 +185,24 @@
 
   .kgcaIq_thumb {
     box-sizing: border-box;
-    width: var(--color-picker-thumb-size, 1rem);
-    height: var(--color-picker-thumb-size, 1rem);
-    border-radius: var(--color-picker-thumb-radius, var(--radius-full));
-    background: var(--color-picker-thumb-bg, var(--color-background));
-    box-shadow: 0 0 0 var(--color-picker-thumb-inner-ring-width, var(--border-width-md))
-        var(--color-picker-thumb-inner-ring-color, var(--color-background)),
-      0 0 0 var(--color-picker-thumb-outer-ring-width, var(--border-width-lg))
-        var(--color-picker-thumb-outer-ring-color, oklab(0% none none / .18)),
-      var(--color-picker-thumb-shadow, var(--shadow-sm));
+    width: var(--moduix-color-picker-thumb-size, var(--moduix-spacing-4));
+    height: var(--moduix-color-picker-thumb-size, var(--moduix-spacing-4));
+    border-radius: var(--moduix-color-picker-thumb-radius, var(--moduix-radius-full));
+    background: var(--moduix-color-picker-thumb-bg, var(--moduix-color-background));
+    box-shadow: 0 0 0 var(--moduix-color-picker-thumb-inner-ring-width, var(--moduix-border-width-md))
+        var(--moduix-color-picker-thumb-inner-ring-color, var(--moduix-color-background)),
+      0 0 0 var(--moduix-color-picker-thumb-outer-ring-width, var(--moduix-border-width-lg))
+        var(--moduix-color-picker-thumb-outer-ring-color, oklab(0% none none / .18)),
+      var(--moduix-color-picker-thumb-shadow, var(--moduix-shadow-sm));
     outline: 0;
     transform: translate(-50%, -50%);
 
     &:focus-visible {
-      box-shadow: 0 0 0 var(--color-picker-thumb-inner-ring-width, var(--border-width-md))
-          var(--color-picker-thumb-inner-ring-color, var(--color-background)),
-        0 0 0 var(--color-picker-thumb-focus-ring-width, var(--border-width-lg))
-          var(--color-picker-focus-ring-color, var(--color-ring)),
-        var(--color-picker-thumb-shadow, var(--shadow-sm));
+      box-shadow: 0 0 0 var(--moduix-color-picker-thumb-inner-ring-width, var(--moduix-border-width-md))
+          var(--moduix-color-picker-thumb-inner-ring-color, var(--moduix-color-background)),
+        0 0 0 var(--moduix-color-picker-thumb-focus-ring-width, var(--moduix-border-width-lg))
+          var(--moduix-color-picker-focus-ring-color, var(--moduix-color-ring)),
+        var(--moduix-color-picker-thumb-shadow, var(--moduix-shadow-sm));
     }
 
     &[data-disabled] {
@@ -208,8 +212,8 @@
 
   .kgcaIq_channelSlider {
     box-sizing: border-box;
-    height: var(--color-picker-channel-slider-height, var(--spacing-3));
-    border-radius: var(--color-picker-channel-slider-radius, var(--radius-full));
+    height: var(--moduix-color-picker-channel-slider-height, var(--moduix-spacing-3));
+    border-radius: var(--moduix-color-picker-channel-slider-radius, var(--moduix-radius-full));
     touch-action: none;
     user-select: none;
     align-items: center;
@@ -217,15 +221,15 @@
     position: relative;
 
     &[data-orientation="vertical"] {
-      width: var(--color-picker-channel-slider-height, var(--spacing-3));
-      height: var(--color-picker-channel-slider-vertical-height, 10rem);
+      width: var(--moduix-color-picker-channel-slider-height, var(--moduix-spacing-3));
+      height: var(--moduix-color-picker-channel-slider-vertical-height, 10rem);
       justify-content: center;
       align-items: stretch;
     }
   }
 
   .kgcaIq_sliders {
-    gap: var(--color-picker-sliders-gap, var(--spacing-2));
+    gap: var(--moduix-color-picker-sliders-gap, var(--moduix-spacing-2));
     flex-direction: column;
     flex: 1;
     min-width: 0;
@@ -234,63 +238,66 @@
 
   .kgcaIq_channelSliderTrack {
     width: 100%;
-    height: var(--color-picker-channel-slider-track-size, var(--spacing-3));
+    height: var(--moduix-color-picker-channel-slider-track-size, var(--moduix-spacing-3));
     border-radius: inherit;
-    box-shadow: inset 0 0 0 var(--color-picker-channel-slider-border-width, var(--border-width-sm))
-      var(--color-picker-channel-slider-border-color, oklab(0% none none / .14));
+    box-shadow: inset 0 0 0
+      var(--moduix-color-picker-channel-slider-border-width, var(--moduix-border-width-sm))
+      var(--moduix-color-picker-channel-slider-border-color, oklab(0% none none / .14));
 
     &[data-orientation="vertical"] {
-      width: var(--color-picker-channel-slider-track-size, var(--spacing-3));
+      width: var(--moduix-color-picker-channel-slider-track-size, var(--moduix-spacing-3));
       height: 100%;
     }
   }
 
   .kgcaIq_channelSliderLabel {
-    color: var(--color-picker-channel-slider-label-color, var(--color-picker-color, var(--color-foreground)));
-    font-size: var(--color-picker-channel-slider-label-font-size, var(--text-sm));
-    font-weight: var(--color-picker-channel-slider-label-font-weight, var(--weight-medium));
-    line-height: var(--color-picker-channel-slider-label-line-height, var(--line-height-text-sm));
+    color: var(--moduix-color-picker-channel-slider-label-color, var(--moduix-color-picker-color, var(--moduix-color-foreground)));
+    font-size: var(--moduix-color-picker-channel-slider-label-font-size, var(--moduix-text-sm));
+    font-weight: var(--moduix-color-picker-channel-slider-label-font-weight, var(--moduix-weight-medium));
+    line-height: var(--moduix-color-picker-channel-slider-label-line-height, var(--moduix-line-height-text-sm));
   }
 
   .kgcaIq_channelSliderValueText {
-    color: var(--color-picker-channel-slider-value-color, var(--color-muted-foreground));
-    font-size: var(--color-picker-channel-slider-value-font-size, var(--text-sm));
-    line-height: var(--color-picker-channel-slider-value-line-height, var(--line-height-text-sm));
+    color: var(--moduix-color-picker-channel-slider-value-color, var(--moduix-color-muted-foreground));
+    font-size: var(--moduix-color-picker-channel-slider-value-font-size, var(--moduix-text-sm));
+    line-height: var(--moduix-color-picker-channel-slider-value-line-height, var(--moduix-line-height-text-sm));
   }
 
   .kgcaIq_channelInput, .kgcaIq_formatSelect {
     box-sizing: border-box;
     width: 100%;
     min-width: 0;
-    height: var(--color-picker-input-height, var(--size-lg));
-    border: var(--color-picker-border-width, var(--border-width-sm)) solid
-      var(--color-picker-border-color, var(--color-border));
-    border-radius: var(--color-picker-radius, var(--radius-md));
-    padding-inline: var(--color-picker-input-padding-x, var(--spacing-3));
-    background: var(--color-picker-control-bg, var(--color-background));
-    color: var(--color-picker-color, var(--color-foreground));
+    height: var(--moduix-color-picker-input-height, var(--moduix-size-md));
+    border: var(--moduix-color-picker-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-color-picker-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-color-picker-radius, var(--moduix-radius-md));
+    padding-inline: var(--moduix-color-picker-input-padding-x, var(--moduix-spacing-3));
+    background: var(--moduix-color-picker-control-bg, var(--moduix-color-background));
+    color: var(--moduix-color-picker-color, var(--moduix-color-foreground));
     font: inherit;
-    font-size: var(--color-picker-input-font-size, var(--text-sm));
-    line-height: var(--color-picker-input-line-height, var(--line-height-text-sm));
-    outline: var(--color-picker-focus-ring-width, var(--border-width-sm)) solid transparent;
-    outline-offset: calc(var(--color-picker-focus-ring-width, var(--border-width-sm)) * -1);
-    transition: border-color var(--color-picker-transition, var(--transition-default)),
-      outline-color var(--color-picker-transition, var(--transition-default));
+    font-size: var(--moduix-color-picker-input-font-size, var(--moduix-text-sm));
+    line-height: var(--moduix-color-picker-input-line-height, var(--moduix-line-height-text-sm));
+    outline: var(--moduix-color-picker-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
+      solid transparent;
+    outline-offset: calc(var(--moduix-color-picker-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm))) *
+        -1);
+    transition: border-color var(--moduix-color-picker-transition, var(--moduix-transition-default)),
+      outline-color var(--moduix-color-picker-transition, var(--moduix-transition-default));
     appearance: textfield;
     margin: 0;
 
     &:is(:focus, :focus-visible) {
-      border-color: var(--color-picker-focus-ring-color, var(--color-ring));
-      outline-color: var(--color-picker-focus-ring-color, var(--color-ring));
+      border-color: var(--moduix-color-picker-focus-ring-color, var(--moduix-color-ring));
+      outline-color: var(--moduix-color-picker-focus-ring-color, var(--moduix-color-ring));
     }
 
     &[data-invalid] {
-      border-color: var(--color-picker-invalid-color, var(--color-destructive));
-      outline-color: var(--color-picker-invalid-color, var(--color-destructive));
+      border-color: var(--moduix-color-picker-invalid-color, var(--moduix-color-destructive));
+      outline-color: var(--moduix-color-picker-invalid-color, var(--moduix-color-destructive));
     }
 
     &[data-disabled] {
-      opacity: var(--color-picker-disabled-opacity, var(--opacity-disabled));
+      opacity: var(--moduix-color-picker-disabled-opacity, var(--moduix-opacity-disabled));
     }
 
     &::-webkit-outer-spin-button, &::-webkit-inner-spin-button {
@@ -303,8 +310,8 @@
     flex: 1;
 
     &[data-channel="alpha"] {
-      width: var(--color-picker-alpha-input-width, 4rem);
-      flex: 0 0 var(--color-picker-alpha-input-width, 4rem);
+      width: var(--moduix-color-picker-alpha-input-width, 4rem);
+      flex: 0 0 var(--moduix-color-picker-alpha-input-width, 4rem);
     }
   }
 
@@ -315,46 +322,48 @@
 
   .kgcaIq_eyeDropperTrigger, .kgcaIq_formatTrigger {
     box-sizing: border-box;
-    height: var(--color-picker-action-size, var(--size-lg));
-    min-width: var(--color-picker-action-size, var(--size-lg));
+    height: var(--moduix-color-picker-action-size, var(--moduix-size-md));
+    min-width: var(--moduix-color-picker-action-size, var(--moduix-size-md));
     justify-content: center;
     align-items: center;
-    gap: var(--color-picker-action-gap, var(--spacing-2));
-    border: var(--color-picker-border-width, var(--border-width-sm)) solid
-      var(--color-picker-border-color, var(--color-border));
-    border-radius: var(--color-picker-radius, var(--radius-md));
-    padding-inline: var(--color-picker-action-padding-x, var(--spacing-2));
-    background: var(--color-picker-action-bg, transparent);
-    color: var(--color-picker-action-color, var(--color-muted-foreground));
+    gap: var(--moduix-color-picker-action-gap, var(--moduix-spacing-2));
+    border: var(--moduix-color-picker-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-color-picker-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-color-picker-radius, var(--moduix-radius-md));
+    padding-inline: var(--moduix-color-picker-action-padding-x, var(--moduix-spacing-2));
+    background: var(--moduix-color-picker-action-bg, transparent);
+    color: var(--moduix-color-picker-action-color, var(--moduix-color-muted-foreground));
     font: inherit;
-    font-size: var(--color-picker-action-font-size, var(--text-sm));
-    line-height: var(--color-picker-action-line-height, var(--line-height-text-sm));
-    outline: var(--color-picker-focus-ring-width, var(--border-width-sm)) solid transparent;
-    outline-offset: calc(var(--color-picker-focus-ring-width, var(--border-width-sm)) * -1);
+    font-size: var(--moduix-color-picker-action-font-size, var(--moduix-text-sm));
+    line-height: var(--moduix-color-picker-action-line-height, var(--moduix-line-height-text-sm));
+    outline: var(--moduix-color-picker-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
+      solid transparent;
+    outline-offset: calc(var(--moduix-color-picker-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm))) *
+        -1);
     cursor: pointer;
-    transition: border-color var(--color-picker-transition, var(--transition-default)),
-      outline-color var(--color-picker-transition, var(--transition-default)),
-      background-color var(--color-picker-transition, var(--transition-default)),
-      color var(--color-picker-transition, var(--transition-default));
+    transition: border-color var(--moduix-color-picker-transition, var(--moduix-transition-default)),
+      outline-color var(--moduix-color-picker-transition, var(--moduix-transition-default)),
+      background-color var(--moduix-color-picker-transition, var(--moduix-transition-default)),
+      color var(--moduix-color-picker-transition, var(--moduix-transition-default));
     flex-shrink: 0;
     margin: 0;
     display: inline-flex;
 
     & > svg {
-      width: var(--color-picker-icon-size, 1rem);
-      height: var(--color-picker-icon-size, 1rem);
+      width: var(--moduix-color-picker-icon-size, var(--moduix-spacing-4));
+      height: var(--moduix-color-picker-icon-size, var(--moduix-spacing-4));
     }
 
     &:is(:focus-visible, [data-focus]) {
-      border-color: var(--color-picker-focus-ring-color, var(--color-ring));
-      outline-color: var(--color-picker-focus-ring-color, var(--color-ring));
+      border-color: var(--moduix-color-picker-focus-ring-color, var(--moduix-color-ring));
+      outline-color: var(--moduix-color-picker-focus-ring-color, var(--moduix-color-ring));
     }
 
     &:not(:is([disabled], [data-disabled], [data-readonly])) {
       @media (hover: hover) {
         &:hover {
-          background-color: var(--color-picker-action-bg-hover, var(--color-muted));
-          color: var(--color-picker-action-color-hover, var(--color-foreground));
+          background-color: var(--moduix-color-picker-action-bg-hover, var(--moduix-color-muted));
+          color: var(--moduix-color-picker-action-color-hover, var(--moduix-color-foreground));
         }
       }
     }
@@ -365,13 +374,13 @@
   }
 
   .kgcaIq_swatchGroup {
-    gap: var(--color-picker-swatch-gap, var(--spacing-2));
+    gap: var(--moduix-color-picker-swatch-gap, var(--moduix-spacing-2));
     flex-wrap: wrap;
     display: flex;
   }
 
   .kgcaIq_swatchTrigger {
-    border-radius: var(--color-picker-swatch-radius, var(--radius-sm));
+    border-radius: var(--moduix-color-picker-swatch-radius, var(--moduix-radius-sm));
     cursor: pointer;
     background: none;
     border: 0;
@@ -383,23 +392,25 @@
     display: inline-flex;
 
     &:focus-visible {
-      box-shadow: 0 0 0 var(--color-picker-focus-ring-width, var(--border-width-sm))
-        var(--color-picker-focus-ring-color, var(--color-ring));
+      box-shadow: 0 0 0
+        var(--moduix-color-picker-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
+        var(--moduix-color-picker-focus-ring-color, var(--moduix-color-ring));
     }
 
     &[data-disabled] {
       cursor: default;
-      opacity: var(--color-picker-disabled-opacity, var(--opacity-disabled));
+      opacity: var(--moduix-color-picker-disabled-opacity, var(--moduix-opacity-disabled));
     }
   }
 
   .kgcaIq_swatch {
     box-sizing: border-box;
-    width: var(--color-picker-swatch-size, 2rem);
-    height: var(--color-picker-swatch-size, 2rem);
+    width: var(--moduix-color-picker-swatch-size, var(--moduix-size-sm));
+    height: var(--moduix-color-picker-swatch-size, var(--moduix-size-sm));
     border-radius: inherit;
-    box-shadow: inset 0 0 0 var(--color-picker-swatch-border-width, var(--border-width-sm))
-      var(--color-picker-swatch-border-color, oklab(0% none none / .14));
+    box-shadow: inset 0 0 0
+      var(--moduix-color-picker-swatch-border-width, var(--moduix-border-width-sm))
+      var(--moduix-color-picker-swatch-border-color, oklab(0% none none / .14));
     flex-shrink: 0;
     place-items: center;
     display: grid;
@@ -408,8 +419,8 @@
   }
 
   .kgcaIq_swatchIndicator {
-    color: var(--color-picker-swatch-indicator-color, white);
-    filter: drop-shadow(0 1px 1px #00000073);
+    color: var(--moduix-color-picker-swatch-indicator-color, white);
+    filter: var(--moduix-color-picker-swatch-indicator-shadow, drop-shadow(0 1px 1px #00000073));
     pointer-events: none;
     justify-content: center;
     align-items: center;
@@ -418,8 +429,8 @@
     inset: 0;
 
     & > svg {
-      width: var(--color-picker-swatch-indicator-size, 1rem);
-      height: var(--color-picker-swatch-indicator-size, 1rem);
+      width: var(--moduix-color-picker-swatch-indicator-size, var(--moduix-spacing-4));
+      height: var(--moduix-color-picker-swatch-indicator-size, var(--moduix-spacing-4));
     }
 
     [data-state="checked"] > &, &[data-state="checked"] {
@@ -444,13 +455,13 @@
 
   .kgcaIq_valueText {
     min-width: 0;
-    color: var(--color-picker-value-text-color, var(--color-picker-color, var(--color-foreground)));
-    font-size: var(--color-picker-value-text-font-size, var(--text-sm));
-    line-height: var(--color-picker-value-text-line-height, var(--line-height-text-sm));
+    color: var(--moduix-color-picker-value-text-color, var(--moduix-color-picker-color, var(--moduix-color-foreground)));
+    font-size: var(--moduix-color-picker-value-text-font-size, var(--moduix-text-sm));
+    line-height: var(--moduix-color-picker-value-text-line-height, var(--moduix-line-height-text-sm));
   }
 
   .kgcaIq_view {
-    gap: var(--color-picker-view-gap, var(--spacing-2));
+    gap: var(--moduix-color-picker-view-gap, var(--moduix-spacing-2));
     flex-direction: column;
     min-width: 0;
     display: flex;