@ropav/styles 0.4.0 → 0.6.0

package/dist/components/color-picker.css

@@ -17,10 +17,6 @@
   /* Cursor */
   cursor: var(--cursor-interactive);
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     background-color 150ms var(--ease-smooth),
     box-shadow 150ms var(--ease-out);
@@ -51,7 +47,7 @@
 .color-picker__popover {
   @apply min-w-62 origin-(--trigger-anchor-point) scrollbar-none overflow-x-hidden overflow-y-auto overscroll-contain bg-overlay px-2 pt-2 pb-3;
   box-shadow: var(--shadow-overlay);
-  border-radius: min(32px, calc(var(--radius) * 2.5));
+  border-radius: min(32px, var(--component-radius));
   /* Content layout */
   @apply flex flex-col gap-3;
 

package/dist/components/color-slider.css

@@ -53,7 +53,9 @@
   }
 
   .color-slider__track {
-    @apply relative rounded-2xl;
+    @apply relative;
+
+    border-radius: min(32px, var(--component-radius));
 
     grid-area: track;
     /* Edge cap pseudo-elements */
@@ -68,7 +70,9 @@
 
   .color-slider__thumb {
     /* Flex container for centering */
-    @apply absolute flex cursor-grab items-center justify-center rounded-2xl no-highlight;
+    @apply absolute flex cursor-grab items-center justify-center no-highlight;
+
+    border-radius: min(32px, var(--component-radius));
 
     /* Border to create white ring around the thumb */
     @apply border-3 border-white shadow-overlay;
@@ -76,10 +80,6 @@
     /* Ensure thumb is above edge caps */
     z-index: 1;
 
-    /**
-     * Transitions
-     * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-     */
     transition:
       transform 250ms var(--ease-out),
       box-shadow 150ms var(--ease-out);
@@ -133,7 +133,8 @@
       }
 
       &::before {
-        @apply rounded-ss-2xl rounded-es-2xl;
+        border-start-start-radius: min(32px, var(--component-radius));
+        border-end-start-radius: min(32px, var(--component-radius));
         inset-inline-start: -0.625rem;
         box-shadow:
           inset 1px 0 0 0 rgba(0, 0, 0, 0.1),
@@ -145,7 +146,8 @@
       }
 
       &::after {
-        @apply rounded-se-2xl rounded-ee-2xl;
+        border-start-end-radius: min(32px, var(--component-radius));
+        border-end-end-radius: min(32px, var(--component-radius));
         inset-inline-end: -0.625rem;
         box-shadow:
           inset -1px 0 0 0 rgba(0, 0, 0, 0.1),
@@ -223,8 +225,8 @@
 
       &::before {
         bottom: -0.625rem;
-        border-end-start-radius: 999px;
-        border-end-end-radius: 999px;
+        border-end-start-radius: min(32px, var(--component-radius));
+        border-end-end-radius: min(32px, var(--component-radius));
         /* Left, right, and bottom borders for bottom cap */
         box-shadow:
           inset 1px 0 0 0 rgba(0, 0, 0, 0.1),
@@ -237,8 +239,8 @@
 
       &::after {
         top: -0.625rem;
-        border-start-start-radius: 999px;
-        border-start-end-radius: 999px;
+        border-start-start-radius: min(32px, var(--component-radius));
+        border-start-end-radius: min(32px, var(--component-radius));
         /* Left, right, and top borders for top cap */
         box-shadow:
           inset 1px 0 0 0 rgba(0, 0, 0, 0.1),

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

@@ -24,10 +24,6 @@
   /* Cursor */
   cursor: var(--cursor-interactive);
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     border-color 100ms var(--ease-out),
     box-shadow 100ms var(--ease-out);
@@ -68,10 +64,6 @@
 
   /* Inherit border-radius from item */
   border-radius: inherit;
-  /**
-  * Transitions
-  * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-  */
   transition: transform 100ms var(--ease-out);
   @apply transform-gpu motion-reduce:transition-none;
 
@@ -170,81 +162,6 @@
 }
 
 /* Square variant */
-.color-swatch-picker--square {
-  .color-swatch-picker__item {
-    @apply rounded-xl;
-    .color-swatch-picker__swatch {
-      @apply rounded-lg;
-    }
-    &[data-selected="true"] {
-      .color-swatch-picker__swatch {
-        @apply rounded-lg;
-      }
-    }
-  }
-}
-
-/* Square variant - item radius for xs */
-.color-swatch-picker--square.color-swatch-picker--xs {
-  .color-swatch-picker__item {
-    @apply rounded-md;
-    .color-swatch-picker__swatch {
-      @apply rounded-md;
-    }
-    &[data-selected="true"] {
-      .color-swatch-picker__swatch {
-        @apply rounded-md;
-      }
-    }
-  }
-}
-
-/* Square variant - item radius for sm */
-.color-swatch-picker--square.color-swatch-picker--sm {
-  .color-swatch-picker__item {
-    @apply rounded-lg;
-    .color-swatch-picker__swatch {
-      @apply rounded-lg;
-    }
-    &[data-selected="true"] {
-      .color-swatch-picker__swatch {
-        @apply rounded-md;
-      }
-    }
-  }
-}
-
-/* Square variant - item radius for md (default) */
-.color-swatch-picker--square.color-swatch-picker--md {
-  /* No styles as this is the default size */
-}
-
-/* Square variant - item radius for lg */
-.color-swatch-picker--square.color-swatch-picker--lg {
-  .color-swatch-picker__item {
-    @apply rounded-xl;
-    .color-swatch-picker__swatch {
-      @apply rounded-lg;
-    }
-    &[data-selected="true"] {
-      .color-swatch-picker__swatch {
-        @apply rounded-lg;
-      }
-    }
-  }
-}
-
-/* Square variant - item radius for xl */
-.color-swatch-picker--square.color-swatch-picker--xl {
-  .color-swatch-picker__item {
-    @apply rounded-xl;
-    .color-swatch-picker__swatch {
-      @apply rounded-lg;
-    }
-    &[data-selected="true"] {
-      .color-swatch-picker__swatch {
-        @apply rounded-lg;
-      }
-    }
-  }
+.color-swatch-picker--square .color-swatch-picker__item {
+  border-radius: min(32px, var(--component-radius));
 }

package/dist/components/color-swatch.css

@@ -17,7 +17,7 @@
 }
 
 .color-swatch--square {
-  @apply rounded-md;
+  border-radius: min(32px, var(--component-radius));
 }
 
 /* Size variants */

package/dist/components/combo-box/combo-box.styles.d.ts

@@ -7,6 +7,15 @@ export declare const comboBoxVariants: import("tailwind-variants").TVReturnType<
             inputGroup: string;
         };
     };
+    size: {
+        lg: {
+            popover: string;
+        };
+        md: {};
+        sm: {
+            popover: string;
+        };
+    };
 }, {
     base: string;
     inputGroup: string;
@@ -21,6 +30,15 @@ export declare const comboBoxVariants: import("tailwind-variants").TVReturnType<
             inputGroup: string;
         };
     };
+    size: {
+        lg: {
+            popover: string;
+        };
+        md: {};
+        sm: {
+            popover: string;
+        };
+    };
 }, {
     base: string;
     inputGroup: string;
@@ -35,6 +53,15 @@ export declare const comboBoxVariants: import("tailwind-variants").TVReturnType<
             inputGroup: string;
         };
     };
+    size: {
+        lg: {
+            popover: string;
+        };
+        md: {};
+        sm: {
+            popover: string;
+        };
+    };
 }, {
     base: string;
     inputGroup: string;

package/dist/components/combo-box/combo-box.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"combo-box.styles.d.ts","sourceRoot":"","sources":["../../../src/components/combo-box/combo-box.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,gBAAgB;;QAavB,KAAK;QACL,IAAI;YACF,IAAI;YACJ,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAIhB,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC"}
+{"version":3,"file":"combo-box.styles.d.ts","sourceRoot":"","sources":["../../../src/components/combo-box/combo-box.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,gBAAgB;;QAcvB,KAAK;QACL,IAAI;YACF,IAAI;YACJ,UAAU;;;;QAMZ,EAAE;YACA,OAAO;;QAET,EAAE;QACF,EAAE;YACA,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAIb,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC"}

package/dist/components/combo-box/combo-box.styles.js

@@ -1,7 +1,10 @@
 import { tv } from "tailwind-variants";
 //#region src/components/combo-box/combo-box.styles.ts
 const comboBoxVariants = tv({
-	defaultVariants: { fullWidth: false },
+	defaultVariants: {
+		fullWidth: false,
+		size: "md"
+	},
 	slots: {
 		base: "combo-box",
 		inputGroup: "combo-box__input-group",
@@ -9,13 +12,20 @@ const comboBoxVariants = tv({
 		trigger: "combo-box__trigger",
 		value: "combo-box__value"
 	},
-	variants: { fullWidth: {
-		false: {},
-		true: {
-			base: "combo-box--full-width",
-			inputGroup: "combo-box__input-group--full-width"
+	variants: {
+		fullWidth: {
+			false: {},
+			true: {
+				base: "combo-box--full-width",
+				inputGroup: "combo-box__input-group--full-width"
+			}
+		},
+		size: {
+			lg: { popover: "combo-box__popover--lg" },
+			md: {},
+			sm: { popover: "combo-box__popover--sm" }
 		}
-	} }
+	}
 });
 //#endregion
 export { comboBoxVariants };

package/dist/components/combo-box.css

@@ -43,10 +43,15 @@
 }
 
 .combo-box__value {
-  @apply text-sm wrap-break-word text-field-foreground empty:hidden;
+  @apply text-sm wrap-break-word empty:hidden;
+
+  --combo-box-value-fg: var(--field-foreground, var(--foreground));
+  --combo-box-value-fg-placeholder: var(--field-placeholder, var(--muted));
+
+  color: var(--combo-box-value-fg);
 
   &[data-placeholder="true"] {
-    @apply text-field-placeholder;
+    color: var(--combo-box-value-fg-placeholder);
   }
 
   /* Removes the list-box-item indicator element from the combo-box value */
@@ -61,11 +66,16 @@
   /* Remove default button styles */
   @apply border-none bg-transparent outline-none;
 
+  --combo-box-trigger-fg: var(--field-placeholder, var(--muted));
+  --combo-box-trigger-fg-hover: var(--field-foreground, var(--foreground));
+
+  color: var(--combo-box-trigger-fg);
+
   /* Hover state */
   @media (hover: hover) {
     &:hover,
     &[data-hovered="true"] {
-      @apply text-field-foreground;
+      color: var(--combo-box-trigger-fg-hover);
     }
   }
 
@@ -100,7 +110,7 @@
 /* Similar to popover content styles */
 .combo-box__popover {
   @apply min-w-(--trigger-width) origin-(--trigger-anchor-point) scroll-py-1 scrollbar overflow-y-auto overscroll-contain bg-overlay p-0 text-sm;
-  border-radius: min(32px, var(--radius-3xl));
+  border-radius: min(32px, var(--component-radius));
   box-shadow: var(--shadow-overlay);
 
   /* Focus state */
@@ -174,6 +184,26 @@
   }
 }
 
+/* ==========================================================================
+   Size variants
+   ========================================================================== */
+
+/* The input inside sizes itself from the context the root provides, so only the option rows are
+ * left - reached from the popover's own class, since it is teleported out of this tree. */
+.combo-box__popover--sm {
+  [data-slot="list-box-item"] {
+    @apply min-h-8 py-1;
+  }
+}
+
+.combo-box__popover--lg {
+  @apply text-base;
+
+  [data-slot="list-box-item"] {
+    @apply min-h-10 py-2;
+  }
+}
+
 /* Full width modifier */
 .combo-box--full-width {
   @apply w-full;

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

@@ -6,6 +6,15 @@ export declare const dateInputGroupVariants: import("tailwind-variants").TVRetur
             base: string;
         };
     };
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {};
+        sm: {
+            base: string;
+        };
+    };
     variant: {
         primary: {
             base: string;
@@ -28,6 +37,15 @@ export declare const dateInputGroupVariants: import("tailwind-variants").TVRetur
             base: string;
         };
     };
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {};
+        sm: {
+            base: string;
+        };
+    };
     variant: {
         primary: {
             base: string;
@@ -50,6 +68,15 @@ export declare const dateInputGroupVariants: import("tailwind-variants").TVRetur
             base: string;
         };
     };
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {};
+        sm: {
+            base: string;
+        };
+    };
     variant: {
         primary: {
             base: string;

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

@@ -1 +1 @@
-{"version":3,"file":"date-input-group.styles.d.ts","sourceRoot":"","sources":["../../../src/components/date-input-group/date-input-group.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,sBAAsB;;QAe7B,KAAK;QACL,IAAI;YACF,IAAI;;;;QAIN,OAAO;YACL,IAAI;;QAEN,SAAS;YACP,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAIV,CAAC;AAEH,MAAM,MAAM,sBAAsB,GAAG,YAAY,CAAC,OAAO,sBAAsB,CAAC,CAAC"}
+{"version":3,"file":"date-input-group.styles.d.ts","sourceRoot":"","sources":["../../../src/components/date-input-group/date-input-group.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,sBAAsB;;QAgB7B,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,sBAAsB,GAAG,YAAY,CAAC,OAAO,sBAAsB,CAAC,CAAC"}

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

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

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

@@ -1,6 +1,13 @@
 /* Date input group styles */
 .date-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. */
+  --date-input-group-bg: var(--field-background, var(--default));
+  --date-input-group-bg-hover: var(--field-hover);
+  --date-input-group-bg-focus: var(--field-focus);
+
+  background-color: var(--date-input-group-bg);
   border-width: var(--border-width-field);
   border-color: var(--field-border);
 
@@ -13,10 +20,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),
@@ -27,7 +30,7 @@
   @media (hover: hover) {
     &:hover:not(:focus-within),
     &[data-hovered="true"]:not([data-focus-within="true"]) {
-      @apply bg-field-hover;
+      background-color: var(--date-input-group-bg-hover);
       border-color: var(--field-border-hover);
     }
   }
@@ -55,7 +58,7 @@
   /* Invalid state */
   &[data-invalid="true"] {
     @apply status-invalid-field;
-    background-color: var(--field-focus);
+    background-color: var(--date-input-group-bg-focus);
     border-color: var(--color-field-border-invalid);
   }
 
@@ -67,7 +70,7 @@
 }
 
 .date-input-group__input {
-  @apply flex flex-1 cursor-text items-center gap-px rounded-none border-0 bg-transparent px-3 py-2 text-base shadow-none outline-none sm:text-sm;
+  @apply flex flex-1 cursor-text items-center gap-px rounded-none border-0 bg-transparent px-3 field-line-md shadow-none outline-none;
 
   /* Remove border radius on left side when prefix is present */
   .date-input-group:has([data-slot="date-input-group-prefix"]) & {
@@ -105,20 +108,38 @@
 .date-input-group__segment {
   @apply inline-block rounded-md px-0.5 text-end text-nowrap outline-none;
 
+  /* The fill and the digits, per state. Five states repaint the text here, so a caller retuning
+   * any one of them from a single declaration would take the other four with it. */
+  --date-input-group-segment-bg: transparent;
+  --date-input-group-segment-bg-focused: var(--accent-soft);
+  --date-input-group-segment-bg-invalid-focused: var(--danger-soft);
+  --date-input-group-segment-fg: currentcolor;
+  --date-input-group-segment-fg-literal: var(--muted);
+  --date-input-group-segment-fg-placeholder: var(--field-placeholder, var(--muted));
+  --date-input-group-segment-fg-focused: var(--accent-soft-foreground);
+  --date-input-group-segment-fg-invalid: var(--danger);
+  --date-input-group-segment-fg-invalid-focused: var(--danger-soft-foreground);
+
+  background-color: var(--date-input-group-segment-bg);
+  color: var(--date-input-group-segment-fg);
+
   /* Segment separators styling "/" */
   &[data-type="literal"] {
-    @apply p-0 text-muted;
+    @apply p-0;
+
+    color: var(--date-input-group-segment-fg-literal);
   }
 
   /* Placeholder styling */
   &[data-placeholder="true"] {
-    @apply text-field-placeholder;
+    color: var(--date-input-group-segment-fg-placeholder);
   }
 
   /* Focused segment */
   &:focus,
   &[data-focused="true"] {
-    @apply bg-accent-soft text-accent-soft-foreground;
+    background-color: var(--date-input-group-segment-bg-focused);
+    color: var(--date-input-group-segment-fg-focused);
   }
 
   /* Disabled segment */
@@ -128,12 +149,13 @@
 
   /* Invalid segment */
   &[data-invalid="true"] {
-    @apply text-danger;
+    color: var(--date-input-group-segment-fg-invalid);
 
     /* Focused segment */
     &:focus,
     &[data-focused="true"] {
-      @apply bg-danger-soft text-danger-soft-foreground;
+      background-color: var(--date-input-group-segment-bg-invalid-focused);
+      color: var(--date-input-group-segment-fg-invalid-focused);
     }
   }
 }
@@ -155,31 +177,11 @@
 
 .date-input-group--secondary {
   @apply shadow-none;
-  background-color: var(--date-input-group-bg);
 
   --date-input-group-bg: var(--default);
   --date-input-group-bg-hover: var(--default-hover);
   --date-input-group-bg-focus: var(--default);
 
-  @media (hover: hover) {
-    &:hover:not(:focus-within),
-    &[data-hovered="true"]:not([data-focus-within="true"]) {
-      background-color: var(--date-input-group-bg-hover);
-    }
-  }
-
-  &:focus-within,
-  &[data-focus-within="true"] {
-    background-color: var(--date-input-group-bg-focus);
-  }
-
-  /* Invalid state */
-  &[data-invalid="true"] {
-    @apply status-invalid-field;
-    border-color: var(--color-field-border-invalid);
-    background-color: var(--date-input-group-bg-focus);
-  }
-
   [data-slot="date-input-group-input"] {
     @apply bg-transparent;
   }
@@ -189,3 +191,23 @@
 .date-input-group--full-width {
   @apply w-full;
 }
+
+/* ==========================================================================
+   Size variants
+   ========================================================================== */
+
+.date-input-group--sm {
+  @apply h-8;
+
+  .date-input-group__input {
+    @apply field-line-sm;
+  }
+}
+
+.date-input-group--lg {
+  @apply h-10;
+
+  .date-input-group__input {
+    @apply field-line-lg;
+  }
+}

package/dist/components/date-picker.css

@@ -16,10 +16,6 @@
 
   cursor: var(--cursor-interactive);
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition: box-shadow 150ms var(--ease-out);
   @apply motion-reduce:transition-none;
 
@@ -44,7 +40,7 @@
   @apply motion-reduce:transition-none;
 
   box-shadow: var(--shadow-overlay);
-  border-radius: min(32px, calc(var(--radius) * 2.5));
+  border-radius: min(32px, var(--component-radius));
 
   &:focus-visible:not(:focus),
   &[data-focus-visible="true"] {

package/dist/components/date-range-picker.css

@@ -16,10 +16,6 @@
 
   cursor: var(--cursor-interactive);
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition: box-shadow 150ms var(--ease-out);
   @apply motion-reduce:transition-none;
 
@@ -48,7 +44,7 @@
   @apply motion-reduce:transition-none;
 
   box-shadow: var(--shadow-overlay);
-  border-radius: min(32px, calc(var(--radius) * 2.5));
+  border-radius: min(32px, var(--component-radius));
 
   &:focus-visible:not(:focus),
   &[data-focus-visible="true"] {

package/dist/components/disclosure.css

@@ -43,10 +43,6 @@
   height: var(--disclosure-panel-height);
   overflow: clip;
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     height 200ms var(--ease-out-quad),
     opacity 200ms var(--ease-out);