@ropav/styles 0.5.0 → 0.6.0

package/dist/components/input.css

@@ -1,5 +1,12 @@
 .input {
-  @apply rounded-field border bg-field px-3 field-line-md text-field-foreground shadow-field outline-none placeholder:text-field-placeholder;
+  @apply rounded-field border px-3 field-line-md text-field-foreground shadow-field outline-none placeholder:text-field-placeholder;
+
+  /* The fill, per state. The `--secondary` variant re-points these and declares nothing else. */
+  --input-bg: var(--field-background, var(--default));
+  --input-bg-hover: var(--field-hover);
+  --input-bg-focus: var(--field-focus);
+
+  background-color: var(--input-bg);
 
   border-width: var(--border-width-field);
   border-color: var(--field-border);
@@ -14,10 +21,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):not(:focus-visible),
     &[data-hovered="true"]:not([data-focused="true"]):not([data-focus-visible="true"]) {
-      @apply bg-field-hover;
+      background-color: var(--input-bg-hover);
       border-color: var(--field-border-hover);
     }
   }
@@ -37,7 +40,7 @@
   &[data-focused="true"] {
     @apply status-focused-field;
     border-color: var(--field-border-focus);
-    background-color: var(--field-focus);
+    background-color: var(--input-bg-focus);
   }
 
   /* Focus visible state */
@@ -48,7 +51,7 @@
   /* Invalid state */
   &[data-invalid="true"] {
     @apply status-invalid-field;
-    background-color: var(--field-focus);
+    background-color: var(--input-bg-focus);
   }
 
   /* Disabled state */
@@ -66,34 +69,10 @@
 
 .input--secondary {
   @apply shadow-none;
-  background-color: var(--input-bg);
 
   --input-bg: var(--default);
   --input-bg-hover: var(--default-hover);
   --input-bg-focus: var(--default);
-
-  @media (hover: hover) {
-    &:hover:not(:focus):not(:focus-visible),
-    &[data-hovered="true"]:not([data-focus-visible="true"]):not([data-focused="true"]) {
-      background-color: var(--input-bg-hover);
-    }
-  }
-
-  &:focus,
-  &[data-focused="true"] {
-    background-color: var(--input-bg-focus);
-  }
-
-  /* Focus visible state */
-  &:focus-visible:not(:focus),
-  &[data-focus-visible="true"] {
-  }
-
-  /* Invalid state */
-  &[data-invalid="true"] {
-    @apply status-invalid-field;
-    background-color: var(--input-bg-focus);
-  }
 }
 
 /* Full width modifier */

package/dist/components/kbd.css

@@ -1,6 +1,8 @@
 /* Base styles */
 .kbd {
-  @apply inline-flex h-6 items-center space-x-0.5 rounded-lg bg-default px-2 text-center font-sans text-sm font-medium whitespace-nowrap text-muted rtl:space-x-reverse;
+  @apply inline-flex h-6 items-center space-x-0.5 bg-default px-2 text-center font-sans text-sm font-medium whitespace-nowrap text-muted rtl:space-x-reverse;
+
+  border-radius: min(32px, var(--component-radius));
   word-spacing: -0.25rem;
 }
 

package/dist/components/label.css

@@ -1,7 +1,12 @@
 /* Base label styles */
 .label {
   /* Base styling */
-  @apply text-sm font-medium text-foreground;
+  @apply text-sm font-medium;
+
+  --label-fg: var(--foreground);
+  --label-fg-invalid: var(--danger);
+
+  color: var(--label-fg);
 }
 
 /*
@@ -24,5 +29,5 @@
 .label--invalid,
 [data-invalid="true"] .label,
 [aria-invalid="true"] .label {
-  @apply text-danger;
+  color: var(--label-fg-invalid);
 }

package/dist/components/link.css

@@ -1,11 +1,13 @@
 /* Base link styles */
 .link {
-  @apply relative inline-flex h-fit w-fit items-center rounded-xl font-medium text-link no-underline decoration-separator-tertiary decoration-[1.5px] underline-offset-4 no-highlight;
+  @apply relative inline-flex h-fit w-fit items-center rounded-xl font-medium text-link no-underline decoration-[1.5px] underline-offset-4 no-highlight;
+
+  --link-decoration: var(--separator-tertiary);
+  --link-decoration-hover: color-mix(in oklab, var(--muted) 50%, transparent);
+  --link-decoration-pressed: var(--muted);
+
+  text-decoration-color: var(--link-decoration);
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     color 100ms var(--ease-smooth),
     background-color 150ms var(--ease-smooth),
@@ -20,7 +22,9 @@
   @media (hover: hover) {
     &:hover,
     &[data-hovered="true"] {
-      @apply underline decoration-muted/50;
+      @apply underline;
+
+      text-decoration-color: var(--link-decoration-hover);
 
       .link__icon {
         @apply opacity-100;
@@ -31,7 +35,9 @@
   /* Pressed state */
   &:active,
   &[data-pressed="true"] {
-    @apply underline decoration-muted;
+    @apply underline;
+
+    text-decoration-color: var(--link-decoration-pressed);
 
     .link__icon {
       @apply opacity-100;
@@ -56,10 +62,6 @@
   .link__icon {
     @apply pointer-events-none inline-flex size-[0.75em] shrink-0 items-center justify-center text-current opacity-60;
 
-    /**
-     * Transitions
-     * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-     */
     transition: opacity 150ms var(--ease-out);
     @apply motion-reduce:transition-none;
 

package/dist/components/list-box-item.css

@@ -3,12 +3,10 @@
    ========================================================================== */
 
 .list-box-item {
-  @apply relative flex min-h-9 w-full items-center justify-start gap-3 rounded-2xl px-2 py-1.5 outline-none no-highlight;
+  @apply relative flex min-h-9 w-full items-center justify-start gap-3 px-2 py-1.5 outline-none no-highlight;
+
+  border-radius: min(32px, var(--component-radius));
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     transform 250ms var(--ease-out-quart),
     box-shadow 150ms var(--ease-out);
@@ -54,7 +52,7 @@
   @media (hover: hover) {
     &:hover,
     &[data-hovered="true"] {
-      @apply bg-default;
+      @apply bg-state-layer;
     }
   }
 
@@ -93,10 +91,6 @@
 
   .list-box-item[aria-selected="true"] [data-slot="list-box-item-indicator--checkmark"],
   .list-box-item[data-selected="true"] [data-slot="list-box-item-indicator--checkmark"] {
-    /**
-     * Transitions
-     * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-     */
     transition: stroke-dashoffset 250ms linear;
     @apply motion-reduce:transition-none;
   }

package/dist/components/menu-item.css

@@ -3,12 +3,10 @@
    ========================================================================== */
 
 .menu-item {
-  @apply relative flex min-h-9 w-full items-center justify-start gap-3 rounded-2xl px-2 py-1.5 outline-none no-highlight;
+  @apply relative flex min-h-9 w-full items-center justify-start gap-3 px-2 py-1.5 outline-none no-highlight;
+
+  border-radius: min(32px, var(--component-radius));
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     transform 250ms var(--ease-out-quart),
     box-shadow 150ms var(--ease-out);
@@ -61,7 +59,7 @@
   @media (hover: hover) {
     &:hover,
     &[data-hovered="true"] {
-      @apply bg-default;
+      @apply bg-state-layer;
     }
   }
 
@@ -70,10 +68,6 @@
   &[aria-selected="true"],
   &[data-selected="true"] {
     [data-slot="menu-item-indicator--checkmark"] {
-      /**
-     * Transitions
-     * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-     */
       transition: stroke-dashoffset 100ms linear;
       @apply motion-reduce:transition-none;
     }

package/dist/components/meter.css

@@ -26,7 +26,9 @@
   }
 
   .meter__track {
-    @apply relative overflow-hidden rounded-sm bg-default;
+    @apply relative overflow-hidden bg-default;
+
+    border-radius: min(32px, var(--component-radius));
 
     grid-area: track;
 
@@ -43,7 +45,9 @@
   }
 
   .meter__fill {
-    @apply absolute start-0 top-0 h-full rounded-sm;
+    @apply absolute start-0 top-0 h-full;
+
+    border-radius: min(32px, var(--component-radius));
 
     background-color: var(--meter-fill);
 
@@ -51,10 +55,6 @@
       background-color: Highlight;
     }
 
-    /**
-     * Transitions
-     * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-     */
     transition: width 300ms var(--ease-out);
     @apply motion-reduce:transition-none;
   }
@@ -77,11 +77,7 @@
 
 .meter--sm {
   .meter__track {
-    @apply h-1 rounded-xs;
-  }
-
-  .meter__fill {
-    @apply rounded-xs;
+    @apply h-1;
   }
 }
 
@@ -91,11 +87,7 @@
 
 .meter--lg {
   .meter__track {
-    @apply h-3 rounded-md;
-  }
-
-  .meter__fill {
-    @apply rounded-md;
+    @apply h-3;
   }
 }
 

package/dist/components/modal.css

@@ -9,10 +9,6 @@
 .modal__trigger {
   @apply inline-block cursor-(--cursor-interactive);
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     transform 250ms var(--ease-out-quart),
     background-color 150ms var(--ease-smooth),
@@ -56,10 +52,6 @@
     @apply animate-out duration-100 ease-out fade-out-0;
   }
 
-  /**
-   * Reduce Animation
-   * CRITICAL: motion-reduce must be AFTER animate for correct override specificity
-   */
   &[data-exiting="true"],
   &[data-entering="true"] {
     @apply will-change-[opacity];
@@ -125,10 +117,6 @@
     @apply animate-out duration-100 ease-out-quad fade-out-0 zoom-out-95;
   }
 
-  /**
-   * Reduce Animation
-   * CRITICAL: motion-reduce must be AFTER animate for correct override specificity
-   */
   &[data-exiting="true"],
   &[data-entering="true"] {
     @apply will-change-[opacity,transform];

package/dist/components/number-field.css

@@ -15,7 +15,14 @@
 }
 
 .number-field__group {
-  @apply grid h-9 items-center overflow-hidden rounded-field border bg-field text-sm text-field-foreground shadow-field outline-none;
+  @apply grid 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. */
+  --number-field-group-bg: var(--field-background, var(--default));
+  --number-field-group-bg-hover: var(--field-hover);
+  --number-field-group-bg-focus: var(--field-focus);
+
+  background-color: var(--number-field-group-bg);
   border-width: var(--border-width-field);
   border-color: var(--field-border);
 
@@ -40,10 +47,6 @@
     grid-template-columns: 40px 1fr 40px;
   }
 
-  /**
-   * 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),
@@ -54,7 +57,7 @@
   @media (hover: hover) {
     &:hover:not(:focus-within),
     &[data-hovered="true"]:not([data-focus-within="true"]) {
-      @apply bg-field-hover;
+      background-color: var(--number-field-group-bg-hover);
       border-color: var(--field-border-hover);
     }
   }
@@ -64,13 +67,13 @@
   &:focus-within {
     @apply status-focused-field;
     border-color: var(--field-border-focus);
-    background-color: var(--field-focus);
+    background-color: var(--number-field-group-bg-focus);
   }
 
   /* Invalid state */
   &[data-invalid="true"] {
     @apply status-invalid-field;
-    background-color: var(--field-focus);
+    background-color: var(--number-field-group-bg-focus);
     border-color: var(--color-field-border-invalid);
   }
 
@@ -91,7 +94,7 @@
    */
   &:has([data-slot="number-field-input"]:-webkit-autofill),
   &:has([data-slot="number-field-input"]:autofill) {
-    background-color: var(--field-focus);
+    background-color: var(--number-field-group-bg-focus);
     border-color: var(--field-border-focus);
   }
 }
@@ -137,15 +140,20 @@
 
 .number-field__increment-button,
 .number-field__decrement-button {
-  @apply flex h-full w-10 items-center justify-center rounded-none bg-transparent text-field-foreground outline-none;
+  @apply flex h-full w-10 items-center justify-center rounded-none text-field-foreground outline-none;
+
+  --number-field-button-bg: transparent;
+  --number-field-button-bg-pressed: color-mix(
+    in oklab,
+    var(--field-foreground, var(--foreground)) 10%,
+    transparent
+  );
+
+  background-color: var(--number-field-button-bg);
   border-width: var(--border-width-field);
   border-color: var(--field-border);
   border-style: solid;
 
-  /**
-   * 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);
@@ -167,7 +175,7 @@
   /* Pressed state */
   &:active,
   &[data-pressed="true"] {
-    @apply bg-field-foreground/10;
+    background-color: var(--number-field-button-bg-pressed);
     transform: scale(0.97);
   }
 
@@ -200,31 +208,11 @@
 
 .number-field--secondary .number-field__group {
   @apply shadow-none;
-  background-color: var(--number-field-group-bg);
 
   --number-field-group-bg: var(--default);
   --number-field-group-bg-hover: var(--default-hover);
   --number-field-group-bg-focus: var(--default);
 
-  @media (hover: hover) {
-    &:hover:not(:focus-within),
-    &[data-hovered="true"]:not([data-focus-within="true"]) {
-      background-color: var(--number-field-group-bg-hover);
-    }
-  }
-
-  &:focus-within,
-  &[data-focus-within="true"] {
-    background-color: var(--number-field-group-bg-focus);
-  }
-
-  /* Invalid state */
-  &[data-invalid="true"] {
-    @apply status-invalid-field;
-    border-color: var(--color-field-border-invalid);
-    background-color: var(--number-field-group-bg-focus);
-  }
-
   [data-slot="number-field-input"] {
     @apply bg-transparent;
   }

package/dist/components/pagination.css

@@ -28,10 +28,6 @@
 
   cursor: var(--cursor-interactive);
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     transform 250ms var(--ease-smooth),
     background-color 100ms var(--ease-out),

package/dist/components/popover.css

@@ -85,10 +85,6 @@
 .popover__trigger {
   @apply inline-block;
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     color 150ms var(--ease-smooth),
     background-color 150ms var(--ease-smooth),

package/dist/components/progress-bar/progress-bar.styles.d.ts

@@ -17,6 +17,18 @@ export declare const progressBarVariants: import("tailwind-variants").TVReturnTy
             base: string;
         };
     };
+    isAnimated: {
+        false: {};
+        true: {
+            base: string;
+        };
+    };
+    isStriped: {
+        false: {};
+        true: {
+            base: string;
+        };
+    };
     size: {
         lg: {
             base: string;
@@ -51,6 +63,18 @@ export declare const progressBarVariants: import("tailwind-variants").TVReturnTy
             base: string;
         };
     };
+    isAnimated: {
+        false: {};
+        true: {
+            base: string;
+        };
+    };
+    isStriped: {
+        false: {};
+        true: {
+            base: string;
+        };
+    };
     size: {
         lg: {
             base: string;
@@ -85,6 +109,18 @@ export declare const progressBarVariants: import("tailwind-variants").TVReturnTy
             base: string;
         };
     };
+    isAnimated: {
+        false: {};
+        true: {
+            base: string;
+        };
+    };
+    isStriped: {
+        false: {};
+        true: {
+            base: string;
+        };
+    };
     size: {
         lg: {
             base: string;

package/dist/components/progress-bar/progress-bar.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"progress-bar.styles.d.ts","sourceRoot":"","sources":["../../../src/components/progress-bar/progress-bar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,mBAAmB;;QAa1B,MAAM;YACJ,IAAI;;QAEN,MAAM;YACJ,IAAI;;QAEN,OAAO;YACL,IAAI;;QAEN,OAAO;YACL,IAAI;;QAEN,OAAO;YACL,IAAI;;;;QAIN,EAAE;YACA,IAAI;;QAEN,EAAE;YACA,IAAI;;QAEN,EAAE;YACA,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAIV,CAAC;AAEH,MAAM,MAAM,mBAAmB,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC"}
+{"version":3,"file":"progress-bar.styles.d.ts","sourceRoot":"","sources":["../../../src/components/progress-bar/progress-bar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,mBAAmB;;QAe1B,MAAM;YACJ,IAAI;;QAEN,MAAM;YACJ,IAAI;;QAEN,OAAO;YACL,IAAI;;QAEN,OAAO;YACL,IAAI;;QAEN,OAAO;YACL,IAAI;;;;QAIN,KAAK;QACL,IAAI;YACF,IAAI;;;;QAIN,KAAK;QACL,IAAI;YACF,IAAI;;;;QAIN,EAAE;YACA,IAAI;;QAEN,EAAE;YACA,IAAI;;QAEN,EAAE;YACA,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAIV,CAAC;AAEH,MAAM,MAAM,mBAAmB,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC"}

package/dist/components/progress-bar/progress-bar.styles.js

@@ -3,6 +3,8 @@ import { tv } from "tailwind-variants";
 const progressBarVariants = tv({
 	defaultVariants: {
 		color: "accent",
+		isAnimated: false,
+		isStriped: false,
 		size: "md"
 	},
 	slots: {
@@ -19,6 +21,14 @@ const progressBarVariants = tv({
 			success: { base: "progress-bar--success" },
 			warning: { base: "progress-bar--warning" }
 		},
+		isAnimated: {
+			false: {},
+			true: { base: "progress-bar--animated" }
+		},
+		isStriped: {
+			false: {},
+			true: { base: "progress-bar--striped" }
+		},
 		size: {
 			lg: { base: "progress-bar--lg" },
 			md: { base: "progress-bar--md" },