@ropav/styles 0.4.0 → 0.6.0

package/dist/components/input.css

@@ -1,5 +1,12 @@
 .input {
-  @apply rounded-field border bg-field px-3 py-2 text-base text-field-foreground shadow-field outline-none placeholder:text-field-placeholder sm:text-sm;
+  @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,37 +69,25 @@
 
 .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 */
 .input--full-width {
   @apply w-full;
 }
+
+/* ==========================================================================
+   Size variants
+   ========================================================================== */
+
+.input--sm {
+  @apply field-line-sm;
+}
+
+.input--lg {
+  @apply field-line-lg;
+}

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/list-box.styles.d.ts

@@ -1,15 +1,30 @@
 import type { VariantProps } from "tailwind-variants";
 export declare const listboxVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        lg: "list-box--lg";
+        md: "";
+        sm: "list-box--sm";
+    };
     variant: {
         danger: "list-box--danger";
         default: "list-box--default";
     };
 }, undefined, "list-box", {
+    size: {
+        lg: "list-box--lg";
+        md: "";
+        sm: "list-box--sm";
+    };
     variant: {
         danger: "list-box--danger";
         default: "list-box--default";
     };
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        lg: "list-box--lg";
+        md: "";
+        sm: "list-box--sm";
+    };
     variant: {
         danger: "list-box--danger";
         default: "list-box--default";

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

@@ -1 +1 @@
-{"version":3,"file":"list-box.styles.d.ts","sourceRoot":"","sources":["../../../src/components/list-box/list-box.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;cAW1B,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC"}
+{"version":3,"file":"list-box.styles.d.ts","sourceRoot":"","sources":["../../../src/components/list-box/list-box.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAiB1B,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC"}

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

@@ -2,11 +2,21 @@ import { tv } from "tailwind-variants";
 //#region src/components/list-box/list-box.styles.ts
 const listboxVariants = tv({
 	base: "list-box",
-	defaultVariants: { variant: "default" },
-	variants: { variant: {
-		danger: "list-box--danger",
-		default: "list-box--default"
-	} }
+	defaultVariants: {
+		size: "md",
+		variant: "default"
+	},
+	variants: {
+		size: {
+			lg: "list-box--lg",
+			md: "",
+			sm: "list-box--sm"
+		},
+		variant: {
+			danger: "list-box--danger",
+			default: "list-box--default"
+		}
+	}
 });
 //#endregion
 export { listboxVariants };

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);
@@ -26,8 +24,10 @@
     @apply pointer-events-none text-wrap select-none;
   }
 
-  /* Add inline-end padding when indicator is present */
-  &:has(.list-box-item__indicator) {
+  /* Room for the checkmark, only while it is drawn. The repeated attribute is what outranks the
+   * `px` the picker popovers reset on this same item. */
+  &[data-slot="list-box-item"][aria-selected="true"]:has(.list-box-item__indicator),
+  &[data-slot="list-box-item"][data-selected="true"]:has(.list-box-item__indicator) {
     @apply pe-7;
   }
 
@@ -52,7 +52,7 @@
   @media (hover: hover) {
     &:hover,
     &[data-hovered="true"] {
-      @apply bg-default;
+      @apply bg-state-layer;
     }
   }
 
@@ -91,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/list-box.css

@@ -23,3 +23,22 @@
     @apply ms-[3%] w-[94%];
   }
 }
+
+/* ==========================================================================
+   Size variants
+   ========================================================================== */
+
+/* A row is as tall as a field of the same size, so a collection standing beside one lines up. */
+.list-box--sm {
+  [data-slot="list-box-item"] {
+    @apply min-h-8 py-1;
+  }
+}
+
+.list-box--lg {
+  @apply text-base;
+
+  [data-slot="list-box-item"] {
+    @apply min-h-10 py-2;
+  }
+}

package/dist/components/menu/menu.styles.d.ts

@@ -1,4 +1,22 @@
 import type { VariantProps } from "tailwind-variants";
-export declare const menuVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "menu", {} | {}, undefined, import("tailwind-variants").TVReturnTypeLike<unknown, undefined>>;
+export declare const menuVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        lg: "menu--lg";
+        md: "";
+        sm: "menu--sm";
+    };
+}, undefined, "menu", {
+    size: {
+        lg: "menu--lg";
+        md: "";
+        sm: "menu--sm";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        lg: "menu--lg";
+        md: "";
+        sm: "menu--sm";
+    };
+}, undefined>>;
 export type MenuVariants = VariantProps<typeof menuVariants>;
 //# sourceMappingURL=menu.styles.d.ts.map

package/dist/components/menu/menu.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menu.styles.d.ts","sourceRoot":"","sources":["../../../src/components/menu/menu.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,YAAY,iKAEvB,CAAC;AAEH,MAAM,MAAM,YAAY,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC"}
+{"version":3,"file":"menu.styles.d.ts","sourceRoot":"","sources":["../../../src/components/menu/menu.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;cAYvB,CAAC;AAEH,MAAM,MAAM,YAAY,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC"}

package/dist/components/menu/menu.styles.js

@@ -1,5 +1,13 @@
 import { tv } from "tailwind-variants";
 //#region src/components/menu/menu.styles.ts
-const menuVariants = tv({ base: "menu" });
+const menuVariants = tv({
+	base: "menu",
+	defaultVariants: { size: "md" },
+	variants: { size: {
+		lg: "menu--lg",
+		md: "",
+		sm: "menu--sm"
+	} }
+});
 //#endregion
 export { menuVariants };

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/menu.css

@@ -16,3 +16,22 @@
     @apply ms-[3%] w-[94%];
   }
 }
+
+/* ==========================================================================
+   Size variants
+   ========================================================================== */
+
+/* A row is as tall as a field of the same size, so a collection standing beside one lines up. */
+.menu--sm {
+  [data-slot="menu-item"] {
+    @apply min-h-8 py-1;
+  }
+}
+
+.menu--lg {
+  @apply text-base;
+
+  [data-slot="menu-item"] {
+    @apply min-h-10 py-2;
+  }
+}

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];
@@ -177,7 +165,7 @@
   @apply relative;
   @apply flex w-full flex-col;
   @apply bg-overlay shadow-overlay outline-none;
-  border-radius: min(32px, var(--radius-3xl));
+  border-radius: min(32px, var(--component-radius));
   @apply p-6;
   @apply pointer-events-auto;
 

package/dist/components/number-field/number-field.styles.d.ts

@@ -7,6 +7,15 @@ export declare const numberFieldVariants: import("tailwind-variants").TVReturnTy
             group: string;
         };
     };
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {};
+        sm: {
+            base: string;
+        };
+    };
     variant: {
         primary: {
             base: string;
@@ -29,6 +38,15 @@ export declare const numberFieldVariants: import("tailwind-variants").TVReturnTy
             group: string;
         };
     };
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {};
+        sm: {
+            base: string;
+        };
+    };
     variant: {
         primary: {
             base: string;
@@ -51,6 +69,15 @@ export declare const numberFieldVariants: import("tailwind-variants").TVReturnTy
             group: string;
         };
     };
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {};
+        sm: {
+            base: string;
+        };
+    };
     variant: {
         primary: {
             base: string;

package/dist/components/number-field/number-field.styles.d.ts.map

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

package/dist/components/number-field/number-field.styles.js

@@ -3,6 +3,7 @@ import { tv } from "tailwind-variants";
 const numberFieldVariants = tv({
 	defaultVariants: {
 		fullWidth: false,
+		size: "md",
 		variant: "primary"
 	},
 	slots: {
@@ -20,6 +21,11 @@ const numberFieldVariants = tv({
 				group: "number-field__group--full-width"
 			}
 		},
+		size: {
+			lg: { base: "number-field--lg" },
+			md: {},
+			sm: { base: "number-field--sm" }
+		},
 		variant: {
 			primary: { base: "number-field--primary" },
 			secondary: { base: "number-field--secondary" }