@ropav/styles 0.4.0 → 0.6.0

package/dist/components/calendar-year-picker.css

@@ -116,13 +116,22 @@
  * Year Cell
  * -------------------------------------------------------------------------- */
 .calendar-year-picker__year-cell {
-  @apply relative inline-flex h-8 items-center justify-center rounded-3xl px-2.5 text-sm font-medium outline-none select-none no-highlight;
+  @apply relative inline-flex h-8 items-center justify-center rounded-component px-2.5 text-sm font-medium outline-none select-none no-highlight;
   touch-action: manipulation;
 
-  /**
-   * Transitions – same as .tag
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
+  /* The fill and label, per state — selected and hovered land together on the current year. */
+  --calendar-year-picker-year-cell-bg: transparent;
+  --calendar-year-picker-year-cell-bg-hover: var(--state-layer);
+  --calendar-year-picker-year-cell-bg-selected: var(--accent);
+  --calendar-year-picker-year-cell-bg-selected-hover: var(--accent-hover);
+  --calendar-year-picker-year-cell-fg: currentcolor;
+  --calendar-year-picker-year-cell-fg-hover: var(--default-foreground);
+  --calendar-year-picker-year-cell-fg-selected: var(--accent-foreground);
+
+  background-color: var(--calendar-year-picker-year-cell-bg);
+  color: var(--calendar-year-picker-year-cell-fg);
+
+  /* Same as `.tag`. */
   transition:
     color 100ms var(--ease-smooth),
     scale 100ms var(--ease-smooth),
@@ -136,19 +145,22 @@
   /* Hover state (when not selected) – only on devices that support hover */
   @media (hover: hover) and (pointer: fine) {
     &:is(:hover, [data-hovered="true"]):not([data-selected="true"]) {
-      @apply bg-default text-default-foreground;
+      background-color: var(--calendar-year-picker-year-cell-bg-hover);
+      color: var(--calendar-year-picker-year-cell-fg-hover);
     }
   }
 
   /* Selected state (current year) – same as .tag[data-selected] */
   &[data-selected="true"],
   &[aria-selected="true"] {
-    @apply bg-accent text-accent-foreground;
+    background-color: var(--calendar-year-picker-year-cell-bg-selected);
+    color: var(--calendar-year-picker-year-cell-fg-selected);
+
     @apply forced-selected;
 
     @media (hover: hover) and (pointer: fine) {
       &:is(:hover, [data-hovered="true"]) {
-        @apply bg-accent-hover;
+        background-color: var(--calendar-year-picker-year-cell-bg-selected-hover);
       }
     }
   }

package/dist/components/calendar.css

@@ -80,14 +80,12 @@
 }
 
 .calendar__nav-button {
-  @apply flex size-6 items-center justify-center rounded-2xl text-accent-soft-foreground;
+  @apply flex size-6 items-center justify-center text-accent-soft-foreground;
+
+  border-radius: min(32px, var(--component-radius));
 
   will-change: scale;
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     transform 250ms var(--ease-out),
     background-color 100ms var(--ease-out),
@@ -101,7 +99,7 @@
   @media (hover: hover) {
     &:hover,
     &[data-hovered="true"] {
-      @apply bg-default text-accent-soft-foreground;
+      @apply bg-state-layer;
     }
   }
 
@@ -183,13 +181,30 @@
  * -------------------------------------------------------------------------- */
 .calendar__cell {
   /* Cell (td) wrapper styles - margins now work with grid layout */
-  @apply relative flex aspect-square size-full items-center justify-center rounded-3xl text-center text-sm font-medium outline-none no-highlight;
+  @apply relative flex aspect-square size-full items-center justify-center text-center text-sm font-medium outline-none no-highlight;
+
+  border-radius: min(32px, var(--component-radius));
+
+  /* Eight states repaint a day, several of them in pairs — today and hovered, selected and
+   * pressed, selected and outside the month. One declaration cannot tell them apart, so each
+   * reads its own. */
+  --calendar-cell-bg: transparent;
+  --calendar-cell-bg-hover: var(--state-layer);
+  --calendar-cell-bg-pressed: var(--calendar-cell-bg-hover);
+  --calendar-cell-bg-today: var(--accent-soft);
+  --calendar-cell-bg-today-hover: var(--accent-soft-hover);
+  --calendar-cell-bg-selected: var(--accent);
+  --calendar-cell-bg-selected-pressed: var(--accent-hover);
+  --calendar-cell-bg-selected-outside-month: var(--state-layer);
+  --calendar-cell-fg: currentcolor;
+  --calendar-cell-fg-today: var(--accent-soft-foreground);
+  --calendar-cell-fg-selected: var(--accent-foreground);
+  --calendar-cell-fg-outside-month: var(--muted);
+
+  background-color: var(--calendar-cell-bg);
+  color: var(--calendar-cell-fg);
 
   will-change: scale;
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     transform 250ms var(--ease-out),
     box-shadow 100ms var(--ease-out);
@@ -205,7 +220,8 @@
 
   /* Today indicator */
   &[data-today="true"] {
-    @apply bg-accent-soft text-accent-soft-foreground;
+    background-color: var(--calendar-cell-bg-today);
+    color: var(--calendar-cell-fg-today);
 
     /* A tinted background is all that marks today, and forced colors flattens it onto the page.
      * An edge rather than a fill, so today still reads as itself once it is also selected. */
@@ -217,25 +233,27 @@
     @media (hover: hover) {
       &:hover:not([data-selected="true"]),
       &[data-hovered="true"]:not([data-selected="true"]) {
-        @apply bg-accent-soft-hover;
+        background-color: var(--calendar-cell-bg-today-hover);
       }
     }
   }
 
   /* Selected state */
   &[data-selected="true"] {
-    @apply bg-accent text-accent-foreground;
+    background-color: var(--calendar-cell-bg-selected);
+    color: var(--calendar-cell-fg-selected);
+
     @apply forced-selected;
   }
 
   /* Pressed state */
   &:active,
   &[data-pressed="true"] {
-    @apply bg-default;
+    background-color: var(--calendar-cell-bg-pressed);
     transform: scale(0.95);
 
     &[data-selected="true"] {
-      @apply bg-accent-hover;
+      background-color: var(--calendar-cell-bg-selected-pressed);
     }
   }
 
@@ -243,17 +261,19 @@
   @media (hover: hover) {
     &:hover:not([data-selected="true"]),
     &[data-hovered="true"]:not([data-selected="true"]) {
-      @apply bg-default;
+      background-color: var(--calendar-cell-bg-hover);
     }
   }
 
   /* Outside month (previous/next month days) */
   &[data-outside-month="true"] {
-    @apply text-muted opacity-50;
+    @apply opacity-50;
+
+    color: var(--calendar-cell-fg-outside-month);
   }
 
   &[data-selected="true"][data-outside-month="true"] {
-    @apply bg-default;
+    background-color: var(--calendar-cell-bg-selected-outside-month);
   }
 
   /* Unavailable dates */
@@ -272,10 +292,15 @@
 
 /* Cell indicator - small dot at bottom center of cell */
 .calendar__cell-indicator {
-  @apply absolute bottom-1 left-1/2 size-[3px] -translate-x-1/2 rounded-xs bg-muted;
+  @apply absolute bottom-1 left-1/2 size-[3px] -translate-x-1/2 rounded-xs;
+
+  --calendar-cell-indicator-bg: var(--muted);
+  --calendar-cell-indicator-bg-selected: var(--accent-foreground);
+
+  background-color: var(--calendar-cell-indicator-bg);
 
   /* Indicator color changes when cell is selected */
   [data-selected="true"] > & {
-    @apply bg-accent-foreground;
+    background-color: var(--calendar-cell-indicator-bg-selected);
   }
 }

package/dist/components/card.css

@@ -4,7 +4,7 @@
 .card {
   @apply relative flex flex-col gap-3 overflow-visible p-4;
   @apply shadow-surface;
-  border-radius: min(32px, var(--radius-3xl));
+  border-radius: min(32px, var(--component-radius));
 }
 
 /* Element - header */

package/dist/components/checkbox.css

@@ -41,7 +41,9 @@
 
   /* Checkmark SVG indicator */
   [data-slot="checkbox-default-indicator--checkmark"] {
-    @apply size-2.5 stroke-[2.5px] text-accent-foreground;
+    @apply size-2.5 stroke-[2.5px];
+
+    color: var(--checkbox-control-fg-checked);
 
     /**
      * Transitions
@@ -58,7 +60,7 @@
   &[data-invalid="true"][aria-checked="true"] [data-slot="checkbox-default-indicator--checkmark"],
   &[aria-invalid="true"][data-selected="true"] [data-slot="checkbox-default-indicator--checkmark"],
   &[aria-invalid="true"][aria-checked="true"] [data-slot="checkbox-default-indicator--checkmark"] {
-    @apply text-danger-foreground;
+    color: var(--checkbox-control-fg-invalid);
   }
 
   /* Indeterminate line indicator */
@@ -73,7 +75,7 @@
     [data-slot="checkbox-default-indicator--indeterminate"],
   &[data-indeterminate="true"][aria-invalid="true"]
     [data-slot="checkbox-default-indicator--indeterminate"] {
-    @apply text-danger-foreground;
+    color: var(--checkbox-control-fg-invalid);
   }
 }
 
@@ -82,12 +84,32 @@
    ========================================================================== */
 
 .checkbox__control {
-  @apply relative inline-flex size-4 shrink-0 items-center justify-center overflow-hidden rounded-md border [border-width:var(--border-width-field)] border-field-border bg-field shadow-field outline-none no-highlight;
+  @apply relative inline-flex size-4 shrink-0 items-center justify-center overflow-hidden border [border-width:var(--border-width-field)] shadow-field outline-none no-highlight;
+
+  /* The cap is what keeps the box reading square at 16px: the field radius is set for a 36px
+   * control, and worn whole here it looks twice as round as the field beside it. */
+  border-radius: min(var(--field-radius, calc(var(--radius) * 0.75)), 25%);
+
+  /* Four things carry state here: the box's fill and edge, the glyph inside it, and the `::before`
+   * that scales in behind the glyph. Checked and indeterminate share a colour, as do the two
+   * invalid pairings, so each is named for what it means rather than for every combination.
+   * `--secondary` re-points the fill and nothing else. */
+  --checkbox-control-bg: var(--field-background, var(--default));
+  --checkbox-control-bg-checked: var(--accent);
+  --checkbox-control-bg-checked-pressed: var(--accent-hover);
+  --checkbox-control-bg-invalid: var(--danger);
+  --checkbox-control-border: var(--field-border, var(--border));
+  --checkbox-control-border-hover: var(--field-border-hover);
+  --checkbox-control-border-checked: transparent;
+  --checkbox-control-fg-checked: var(--accent-foreground);
+  --checkbox-control-fg-invalid: var(--danger-foreground);
+  --checkbox-control-fill: var(--accent);
+  --checkbox-control-fill-hover: var(--accent-hover);
+  --checkbox-control-fill-invalid: var(--danger);
+
+  background-color: var(--checkbox-control-bg);
+  border-color: var(--checkbox-control-border);
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     background-color 200ms var(--ease-out),
     border-color 200ms var(--ease-out),
@@ -98,17 +120,16 @@
 
   /* Background indicator pseudo-element */
   &::before {
-    @apply pointer-events-none absolute inset-0 z-0 origin-center scale-70 rounded-md bg-accent opacity-0 content-[''];
+    @apply pointer-events-none absolute inset-0 z-0 origin-center scale-70 opacity-0 content-[''];
+
+    border-radius: inherit;
+
+    background-color: var(--checkbox-control-fill);
 
-    /**
-     * Transitions
-     * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-     */
     transition:
       scale 100ms var(--ease-linear),
       opacity 200ms var(--ease-linear),
       background-color 200ms var(--ease-out);
-    @apply motion-reduce:transition-none;
   }
 
   /* Interactive states */
@@ -123,10 +144,10 @@
   .checkbox:hover &,
   .checkbox:has([data-slot="checkbox-content"][data-hovered="true"]) &,
   .checkbox [data-slot="checkbox-content"][data-hovered="true"] & {
-    @apply border-field-border-hover;
+    border-color: var(--checkbox-control-border-hover);
 
     &::before {
-      @apply bg-accent-hover;
+      background-color: var(--checkbox-control-fill-hover);
     }
   }
 
@@ -140,7 +161,8 @@
   /* Selected */
   .checkbox[aria-checked="true"] &,
   .checkbox[data-selected="true"] & {
-    @apply border-transparent text-accent-foreground;
+    border-color: var(--checkbox-control-border-checked);
+    color: var(--checkbox-control-fg-checked);
 
     &::before {
       @apply scale-100 opacity-100;
@@ -149,14 +171,15 @@
 
   /* Indeterminate */
   .checkbox[data-indeterminate="true"] & {
-    @apply bg-accent text-accent-foreground;
+    background-color: var(--checkbox-control-bg-checked);
+    color: var(--checkbox-control-fg-checked);
   }
 
   /* Indeterminate + Pressed */
   .checkbox:active[data-indeterminate="true"] &,
   .checkbox[data-pressed="true"][data-indeterminate="true"] &,
   .checkbox:has([data-slot="checkbox-content"][data-pressed="true"])[data-indeterminate="true"] & {
-    @apply bg-accent-hover;
+    background-color: var(--checkbox-control-bg-checked-pressed);
   }
 
   /* Validation states */
@@ -177,17 +200,22 @@
   .checkbox[data-invalid="true"][data-selected="true"] &,
   .checkbox[aria-invalid="true"][aria-checked="true"] &,
   .checkbox[aria-invalid="true"][data-selected="true"] & {
-    @apply border-transparent bg-danger text-danger-foreground;
+    background-color: var(--checkbox-control-bg-invalid);
+    border-color: var(--checkbox-control-border-checked);
+    color: var(--checkbox-control-fg-invalid);
 
     &::before {
-      @apply scale-100 bg-danger opacity-100;
+      @apply scale-100 opacity-100;
+
+      background-color: var(--checkbox-control-fill-invalid);
     }
   }
 
   /* Invalid + Indeterminate */
   .checkbox[data-indeterminate="true"][aria-invalid="true"] &,
   .checkbox[data-indeterminate="true"][data-invalid="true"] & {
-    @apply bg-danger text-danger-foreground;
+    background-color: var(--checkbox-control-bg-invalid);
+    color: var(--checkbox-control-fg-invalid);
   }
 }
 
@@ -221,44 +249,14 @@
 
 .checkbox--secondary .checkbox__control {
   @apply shadow-none;
-  background-color: var(--checkbox-control-bg);
 
-  --checkbox-control-bg: var(--default);
-
-  /* Hover state */
-  .checkbox:hover &,
-  .checkbox:has([data-slot="checkbox-content"][data-hovered="true"]) &,
-  .checkbox [data-slot="checkbox-content"][data-hovered="true"] & {
-    @apply border-field-border-hover;
-  }
+  /* No border and no shadow leave the fill as the only thing drawing this box, so a flat neutral
+   * erases it against any surface of the same lightness — a hovered table row is exactly that.
+   * The state layer is an alpha, so it keeps its step over whatever it lands on. */
+  --checkbox-control-bg: var(--state-layer);
 }
 
 /* Checkbox content — the clickable label (control + label text) */
 .checkbox__content {
   @apply relative inline-flex cursor-[inherit] items-center gap-3 text-sm font-medium text-foreground outline-none select-none no-highlight;
 }
-
-/* Unselected state background for secondary variant */
-.checkbox--secondary:not([aria-checked="true"]):not([data-selected="true"]):not(
-    [data-indeterminate="true"]
-  )
-  .checkbox__control {
-  background-color: var(--checkbox-control-bg);
-}
-
-/* Selected state on secondary variant */
-.checkbox--secondary[aria-checked="true"] .checkbox__control,
-.checkbox--secondary[data-selected="true"] .checkbox__control {
-  &::before {
-    @apply bg-accent;
-  }
-}
-
-/* Indeterminate state on secondary variant */
-.checkbox--secondary[data-indeterminate="true"] .checkbox__control {
-  @apply bg-accent;
-
-  &::before {
-    @apply bg-accent;
-  }
-}

package/dist/components/chip.css

@@ -1,6 +1,8 @@
 /* Base styles */
 .chip {
-  @apply inline-flex w-fit shrink-0 items-center gap-0.5 rounded-2xl px-2 py-0.5 text-xs leading-5 font-medium;
+  @apply inline-flex w-fit shrink-0 items-center gap-0.5 px-2 py-0.5 text-xs leading-5 font-medium;
+
+  border-radius: min(32px, var(--component-radius));
 
   /* Default tokens */
   --chip-bg: var(--default);

package/dist/components/close-button.css

@@ -7,10 +7,6 @@
   /* Cursor */
   cursor: var(--cursor-interactive);
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     transform 250ms var(--ease-out-quart),
     color 150ms var(--ease-out),
@@ -45,7 +41,12 @@
 
 /* Variants */
 .close-button--default {
-  @apply bg-default text-muted;
+  @apply text-muted;
+
+  --close-button-bg: var(--default);
+  --close-button-bg-hover: var(--default-hover);
+
+  background-color: var(--close-button-bg);
 
   /* Forced Colors Mode flattens the fill onto the page and strips the shadow, leaving a control
    * with nothing to say it is one. `ButtonBorder` is the keyword the platform uses for a
@@ -62,7 +63,7 @@
   @media (hover: hover) {
     &:hover,
     &[data-hovered="true"] {
-      @apply bg-default-hover;
+      background-color: var(--close-button-bg-hover);
     }
   }
 

package/dist/components/color-area.css

@@ -4,7 +4,9 @@
 
 /* Base styles */
 .color-area {
-  @apply relative w-full max-w-56 shrink-0 rounded-2xl no-highlight;
+  @apply relative w-full max-w-56 shrink-0 no-highlight;
+
+  border-radius: min(32px, var(--component-radius));
 
   /* Square aspect ratio */
   aspect-ratio: 1 / 1;
@@ -41,7 +43,9 @@
    ========================================================================== */
 
 .color-area__thumb {
-  @apply size-4 rounded-xl will-change-[width,height];
+  @apply size-4 will-change-[width,height];
+
+  border-radius: min(32px, var(--component-radius));
 
   /* Current color from React Aria */
   background-color: var(--color-area-thumb-color);
@@ -54,10 +58,6 @@
     0 0 0 1px rgba(0, 0, 0, 0.1),
     inset 0 0 0 1px rgba(0, 0, 0, 0.1);
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     width 150ms var(--ease-out),
     height 150ms var(--ease-out);

package/dist/components/color-input-group/color-input-group.styles.d.ts

@@ -6,6 +6,15 @@ export declare const colorInputGroupVariants: import("tailwind-variants").TVRetu
             base: string;
         };
     };
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {};
+        sm: {
+            base: string;
+        };
+    };
     variant: {
         primary: {
             base: string;
@@ -26,6 +35,15 @@ export declare const colorInputGroupVariants: import("tailwind-variants").TVRetu
             base: string;
         };
     };
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {};
+        sm: {
+            base: string;
+        };
+    };
     variant: {
         primary: {
             base: string;
@@ -46,6 +64,15 @@ export declare const colorInputGroupVariants: import("tailwind-variants").TVRetu
             base: string;
         };
     };
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {};
+        sm: {
+            base: string;
+        };
+    };
     variant: {
         primary: {
             base: string;

package/dist/components/color-input-group/color-input-group.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color-input-group.styles.d.ts","sourceRoot":"","sources":["../../../src/components/color-input-group/color-input-group.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,uBAAuB;;QAa9B,KAAK;QACL,IAAI;YACF,IAAI;;;;QAIN,OAAO;YACL,IAAI;;QAEN,SAAS;YACP,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAIV,CAAC;AAEH,MAAM,MAAM,uBAAuB,GAAG,YAAY,CAAC,OAAO,uBAAuB,CAAC,CAAC"}
+{"version":3,"file":"color-input-group.styles.d.ts","sourceRoot":"","sources":["../../../src/components/color-input-group/color-input-group.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,uBAAuB;;QAc9B,KAAK;QACL,IAAI;YACF,IAAI;;;;QAIN,EAAE;YACA,IAAI;;QAEN,EAAE;QACF,EAAE;YACA,IAAI;;;;QAIN,OAAO;YACL,IAAI;;QAEN,SAAS;YACP,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAIV,CAAC;AAEH,MAAM,MAAM,uBAAuB,GAAG,YAAY,CAAC,OAAO,uBAAuB,CAAC,CAAC"}

package/dist/components/color-input-group/color-input-group.styles.js

@@ -3,6 +3,7 @@ import { tv } from "tailwind-variants";
 const colorInputGroupVariants = tv({
 	defaultVariants: {
 		fullWidth: false,
+		size: "md",
 		variant: "primary"
 	},
 	slots: {
@@ -16,6 +17,11 @@ const colorInputGroupVariants = tv({
 			false: {},
 			true: { base: "color-input-group--full-width" }
 		},
+		size: {
+			lg: { base: "color-input-group--lg" },
+			md: {},
+			sm: { base: "color-input-group--sm" }
+		},
 		variant: {
 			primary: { base: "color-input-group--primary" },
 			secondary: { base: "color-input-group--secondary" }

package/dist/components/color-input-group.css

@@ -4,7 +4,14 @@
 
 /* Base styles */
 .color-input-group {
-  @apply inline-flex h-9 items-center overflow-hidden rounded-field border bg-field text-sm text-field-foreground shadow-field outline-none;
+  @apply inline-flex h-9 items-center overflow-hidden rounded-field border text-sm text-field-foreground shadow-field outline-none;
+
+  /* The fill, per state. The `--secondary` variant re-points these and declares nothing else. */
+  --color-input-group-bg: var(--field-background, var(--default));
+  --color-input-group-bg-hover: var(--field-hover);
+  --color-input-group-bg-focus: var(--field-focus);
+
+  background-color: var(--color-input-group-bg);
   border-width: var(--border-width-field);
   border-color: var(--field-border);
 
@@ -17,10 +24,6 @@
     outline-offset: -1px;
   }
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     background-color 150ms var(--ease-smooth),
     border-color 150ms var(--ease-smooth),
@@ -31,7 +34,7 @@
   @media (hover: hover) {
     &:hover:not(:focus-within),
     &[data-hovered="true"]:not([data-focus-within="true"]) {
-      @apply bg-field-hover;
+      background-color: var(--color-input-group-bg-hover);
       border-color: var(--field-border-hover);
     }
   }
@@ -45,7 +48,7 @@
   /* Invalid state */
   &[data-invalid="true"] {
     @apply status-invalid-field;
-    background-color: var(--field-focus);
+    background-color: var(--color-input-group-bg-focus);
     border-color: var(--color-field-border-invalid);
   }
 
@@ -61,7 +64,7 @@
    ========================================================================== */
 
 .color-input-group__input {
-  @apply flex h-full flex-1 cursor-text items-center rounded-none border-0 bg-transparent px-3 py-2 text-base shadow-none outline-none sm:text-sm;
+  @apply flex h-full flex-1 cursor-text items-center rounded-none border-0 bg-transparent px-3 field-line-md shadow-none outline-none;
 
   /* Placeholder styling */
   &::placeholder {
@@ -105,31 +108,11 @@
 
 .color-input-group--secondary {
   @apply shadow-none;
-  background-color: var(--color-input-group-bg);
 
   --color-input-group-bg: var(--default);
   --color-input-group-bg-hover: var(--default-hover);
   --color-input-group-bg-focus: var(--default);
 
-  @media (hover: hover) {
-    &:hover:not(:focus-within),
-    &[data-hovered="true"]:not([data-focus-within="true"]) {
-      background-color: var(--color-input-group-bg-hover);
-    }
-  }
-
-  &:focus-within,
-  &[data-focus-within="true"] {
-    background-color: var(--color-input-group-bg-focus);
-  }
-
-  /* Invalid state */
-  &[data-invalid="true"] {
-    @apply status-invalid-field;
-    border-color: var(--color-field-border-invalid);
-    background-color: var(--color-input-group-bg-focus);
-  }
-
   [data-slot="color-input-group-input"] {
     @apply bg-transparent;
   }
@@ -142,3 +125,23 @@
 .color-input-group--full-width {
   @apply w-full;
 }
+
+/* ==========================================================================
+   Size variants
+   ========================================================================== */
+
+.color-input-group--sm {
+  @apply h-8;
+
+  .color-input-group__input {
+    @apply field-line-sm;
+  }
+}
+
+.color-input-group--lg {
+  @apply h-10;
+
+  .color-input-group__input {
+    @apply field-line-lg;
+  }
+}