@leonardaustin/ui 0.7.1 → 0.8.0

package/dist/styles.css

@@ -3,6 +3,7 @@
 @layer utilities{.group-focus-within\:block:is(:where(.group):focus-within *){display:block}@media (hover:hover){.group-hover\:block:is(:where(.group):hover *){display:block}}}
 @layer utilities{.min-h-24{min-height:calc(var(--spacing) * 24)}.min-h-full{min-height:100%}.min-w-5{min-width:calc(var(--spacing) * 5)}.p-1{padding:calc(var(--spacing) * 1)}.pl-1{padding-left:calc(var(--spacing) * 1)}.self-start{align-self:flex-start}.focus-visible\:outline-none:focus-visible{--utility-outline-style:none;outline-style:none}}
 @layer utilities{.focus-visible\:opacity-100:focus-visible{opacity:1}}
+@layer utilities{.max-w-\[576px\]{max-width:576px}.max-w-\[768px\]{max-width:768px}.max-w-\[1024px\]{max-width:1024px}.self-center{align-self:center}}
 
 
 /* ─── Theme: CSS Custom Properties ─── */
@@ -52,6 +53,10 @@
   --blue-muted: rgba(96, 165, 250, 0.15);
   --purple: #a78bfa;
   --purple-muted: rgba(167, 139, 250, 0.15);
+  --teal: #2dd4bf;
+  --teal-muted: rgba(45, 212, 191, 0.15);
+  --rose: #fb7185;
+  --rose-muted: rgba(251, 113, 133, 0.15);
 
   --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
   --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
@@ -131,6 +136,10 @@
   --blue-muted: rgba(59, 130, 246, 0.12);
   --purple: #8b5cf6;
   --purple-muted: rgba(139, 92, 246, 0.12);
+  --teal: #14b8a6;
+  --teal-muted: rgba(20, 184, 166, 0.12);
+  --rose: #f43f5e;
+  --rose-muted: rgba(244, 63, 94, 0.12);
 
   --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
   --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
@@ -216,6 +225,10 @@
   --blue-muted: rgba(37, 99, 235, 0.12);
   --purple: #7c3aed;
   --purple-muted: rgba(124, 58, 237, 0.12);
+  --teal: #0d9488;
+  --teal-muted: rgba(13, 148, 136, 0.12);
+  --rose: #e11d48;
+  --rose-muted: rgba(225, 29, 72, 0.12);
 
   --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06);
   --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
@@ -287,6 +300,10 @@
   --blue-muted: rgba(102, 217, 239, 0.15);
   --purple: #ae81ff;
   --purple-muted: rgba(174, 129, 255, 0.15);
+  --teal: #3ddbc0;
+  --teal-muted: rgba(61, 219, 192, 0.15);
+  --rose: #fd5ff0;
+  --rose-muted: rgba(253, 95, 240, 0.15);
 
   --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
   --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
@@ -357,6 +374,10 @@
   --blue-muted: rgba(38, 139, 210, 0.15);
   --purple: #6c71c4;
   --purple-muted: rgba(108, 113, 196, 0.15);
+  --teal: #2aa198;
+  --teal-muted: rgba(42, 161, 152, 0.15);
+  --rose: #d33682;
+  --rose-muted: rgba(211, 54, 130, 0.15);
 
   --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
   --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
@@ -427,6 +448,10 @@
   --blue-muted: rgba(96, 165, 250, 0.15);
   --purple: #a78bfa;
   --purple-muted: rgba(167, 139, 250, 0.15);
+  --teal: #2dd4bf;
+  --teal-muted: rgba(45, 212, 191, 0.15);
+  --rose: #fb7185;
+  --rose-muted: rgba(251, 113, 133, 0.15);
 
   --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
   --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.6);
@@ -491,6 +516,10 @@
   --blue-muted: rgba(37, 99, 235, 0.12);
   --purple: #7c3aed;
   --purple-muted: rgba(124, 58, 237, 0.12);
+  --teal: #0d9488;
+  --teal-muted: rgba(13, 148, 136, 0.12);
+  --rose: #e11d48;
+  --rose-muted: rgba(225, 29, 72, 0.12);
 
   --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
   --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.14);
@@ -746,6 +775,31 @@ pre.shiki span {
     color: var(--text-table-header, var(--text-tertiary));
   }
 
+  /* Teal and rose status colours, defined by every theme. */
+  .bg-teal {
+    background-color: var(--teal);
+  }
+
+  .bg-teal-muted {
+    background-color: var(--teal-muted);
+  }
+
+  .text-teal {
+    color: var(--teal);
+  }
+
+  .bg-rose {
+    background-color: var(--rose);
+  }
+
+  .bg-rose-muted {
+    background-color: var(--rose-muted);
+  }
+
+  .text-rose {
+    color: var(--rose);
+  }
+
   @media (hover: hover) {
     .hover\:text-text-table-header-hover:hover {
       color: var(--text-table-header-hover, var(--text-secondary));
@@ -1817,7 +1871,7 @@ textarea:disabled {
   justify-content: center;
   width: 100%;
   height: 100%;
-  border: 1px solid var(--border);
+  border: 1px solid var(--control-border, var(--border));
   border-radius: var(--ui-radius, 4px);
   background: var(--bg-secondary);
   color: var(--text-on-accent);
@@ -1853,6 +1907,11 @@ textarea:disabled {
 .ui-bar {
   min-height: calc(var(--spacing) * 12 + 1px);
 }
+.ui-bar[data-control-size="compact"] {
+  min-height: calc(
+    var(--spacing) * 7 + 2 * var(--ui-bar-padding-y, var(--spacing) * 2.5) + 1px
+  );
+}
 .ui-bar[data-control-size="comfortable"] {
   min-height: calc(44px + var(--spacing) * 5 + 1px);
 }
@@ -1921,6 +1980,71 @@ select.ui-sized-control[data-control-size="comfortable"] {
   right: 0;
 }
 
+/* Theme hooks. Every token below is optional: when a theme leaves it unset
+   the rule falls back to the component's own utility classes (revert-layer)
+   or to the previous value, so existing themes look exactly as before.
+
+   Field labels: --ui-label-transform, --ui-label-tracking, --ui-label-color. */
+.ui-field-label {
+  color: var(--ui-label-color, var(--text-secondary));
+  text-transform: var(--ui-label-transform, inherit);
+  letter-spacing: var(--ui-label-tracking, inherit);
+}
+
+/* Unchecked switch edge (--control-border) and knob (--control-knob-checked). */
+.ui-switch-off {
+  border-color: var(--control-border, var(--border));
+}
+.ui-switch-knob {
+  background-color: var(--control-knob);
+}
+[role="switch"][aria-checked="true"] > .ui-switch-knob {
+  background-color: var(--control-knob-checked, var(--control-knob));
+}
+
+/* Compact control sizing: --ui-control-height, --ui-control-font-size and
+   --ui-control-padding-x. These beat the size utilities on the control, so
+   they apply only to compact controls; Button sm/lg, icon buttons and
+   buttons whose label hides responsively, and Button xs/sm/lg keep their own sizing. */
+.ui-sized-control[data-control-size="compact"]:not(textarea):not(
+    [data-variant="icon"]
+  ):not([data-size="xs"]):not([data-size="sm"]):not([data-size="lg"]):not(
+    [data-hide-label]
+  ) {
+  height: var(--ui-control-height, revert-layer);
+}
+.ui-sized-control[data-control-size="compact"]:not([data-variant="icon"]):not(
+    [data-size="xs"]
+  ):not([data-size="sm"]):not([data-size="lg"]):not([data-hide-label]) {
+  font-size: var(--ui-control-font-size, revert-layer);
+}
+.ui-sized-control[data-control-size="compact"]:not([data-variant="icon"]):not(
+    [data-size="xs"]
+  ):not([data-size="sm"]):not([data-size="lg"]):not([data-hide-label]):not(
+    [data-has-icon="true"]
+  ) {
+  padding-inline-start: var(--ui-control-padding-x, revert-layer);
+}
+:is(
+    button.ui-sized-control[data-variant],
+    input.ui-sized-control:not(.ui-password-input),
+    textarea.ui-sized-control
+  )[data-control-size="compact"]:not([data-variant="icon"]):not(
+    [data-size="xs"]
+  ):not([data-size="sm"]):not([data-size="lg"]):not([data-hide-label]) {
+  padding-inline-end: var(--ui-control-padding-x, revert-layer);
+}
+
+/* Card, Dialog and SideSheet padding: --ui-surface-padding for bodies,
+   --ui-bar-padding-x and --ui-bar-padding-y for header and footer bars. */
+.ui-surface-body {
+  padding: var(--ui-surface-padding, revert-layer);
+}
+.ui-bar[data-control-size="compact"] {
+  padding-inline: var(--ui-bar-padding-x, revert-layer);
+  padding-block: var(--ui-bar-padding-y, revert-layer);
+}
+
 /* Native progress supplies semantics; the decorative fill supports stripes in all browsers. */
 .ui-progress-track {
   --progress-color: var(--accent);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leonardaustin/ui",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "description": "Reusable React component library and application shell for Leonard Austin projects.",
   "license": "MIT",
   "type": "module",