tembro 3.1.15 → 3.1.17

package/packages/cli/vendor/templates/styles/globals.css

@@ -95,6 +95,27 @@
   --aui-danger: var(--destructive);
   --aui-danger-foreground: oklch(0.985 0.004 95);
 
+  /* Compatibility aliases for components authored against the earlier theme contract. */
+  --aui-brand-strong: var(--primary);
+  --aui-control-bg: var(--aui-control-surface);
+  --aui-control-border: var(--input);
+  --aui-control-fg: var(--foreground);
+  --aui-divider: var(--border);
+  --aui-input-bg: var(--aui-control-surface);
+  --aui-input-border: var(--input);
+  --aui-input-border-hover: var(--aui-control-hover-border);
+  --aui-input-fg: var(--foreground);
+  --aui-page-bg: var(--background);
+  --aui-page-bg-alt: var(--muted);
+  --aui-page-foreground: var(--foreground);
+  --aui-popover-bg: var(--popover);
+  --aui-popover-fg: var(--popover-foreground);
+  --aui-ring: var(--ring);
+  --aui-shadow-card: var(--aui-card-shadow);
+  --aui-surface: var(--card);
+  --aui-surface-border: var(--aui-card-border);
+  --aui-text-muted: var(--muted-foreground);
+
   --aui-radius-control: var(--radius-md);
   --aui-radius-surface: var(--radius-lg);
   --aui-radius-overlay: var(--radius-xl);
@@ -133,9 +154,9 @@
   --aui-control-panel-bg: var(--aui-surface-raised);
   --aui-control-panel-shadow: var(--aui-shadow-md);
   --aui-card-radius: var(--aui-radius-surface);
-  --aui-card-border: color-mix(in oklch, var(--border), white 8%);
-  --aui-card-shadow: var(--aui-shadow-md);
-  --aui-card-shadow-hover: var(--aui-shadow-lg);
+  --aui-card-border: var(--border);
+  --aui-card-shadow: var(--aui-shadow-xs);
+  --aui-card-shadow-hover: var(--aui-shadow-md);
   --aui-card-soft-bg: color-mix(in oklch, var(--muted), var(--background) 34%);
   --aui-card-outline-bg: var(--aui-surface-raised);
   --aui-popover-shadow: var(--aui-shadow-lg);
@@ -860,106 +881,105 @@
     box-shadow: var(--aui-control-shadow), 0 0 0 1px var(--aui-focus-ring), 0 0 0 5px var(--aui-focus-ring-soft);
   }
 
-  [data-slot="card"][data-slot="card"],
-  [data-slot="stat-card"][data-slot="stat-card"] {
+  :is([data-slot="card"], [data-card]) {
     border: 1px solid var(--aui-card-border);
     border-radius: var(--aui-card-radius);
     background: linear-gradient(180deg, color-mix(in oklch, var(--card), white 8%), var(--card));
     box-shadow: var(--aui-card-shadow);
   }
 
-  [data-slot="card"] {
+  :is([data-slot="card"], [data-card]) {
     --card-spacing: 1.25rem;
     color: var(--card-foreground);
     font-size: 0.875rem;
     transition: background-color var(--aui-motion-normal) var(--aui-ease-standard), border-color var(--aui-motion-normal) var(--aui-ease-standard), box-shadow var(--aui-motion-normal) var(--aui-ease-standard), transform var(--aui-motion-normal) var(--aui-ease-standard), opacity var(--aui-motion-normal) var(--aui-ease-standard);
   }
 
-  [data-slot="card"][data-size="sm"] { --card-spacing: 1rem; }
-  [data-slot="card"][data-size="lg"] { --card-spacing: 1.5rem; }
-  [data-slot="card"][data-density="compact"] { font-size: 0.75rem; }
-  [data-slot="card"][data-density="comfortable"] { font-size: 1rem; }
-  [data-slot="card"][data-variant="ghost"] { border-color: transparent; background: transparent; box-shadow: none; }
-  [data-slot="card"] > img:first-child { border-radius: var(--aui-card-radius) var(--aui-card-radius) 0 0; }
-  [data-slot="card"] > img:last-child { border-radius: 0 0 var(--aui-card-radius) var(--aui-card-radius); }
+  :is([data-slot="card"], [data-card])[data-size="sm"] { --card-spacing: 1rem; }
+  :is([data-slot="card"], [data-card])[data-size="lg"] { --card-spacing: 1.5rem; }
+  :is([data-slot="card"], [data-card])[data-density="compact"] { font-size: 0.75rem; }
+  :is([data-slot="card"], [data-card])[data-density="comfortable"] { font-size: 1rem; }
+  :is([data-slot="card"], [data-card])[data-variant="ghost"] { border-color: transparent; background: transparent; box-shadow: none; }
+  :is([data-slot="card"], [data-card]) > img:first-child { border-radius: var(--aui-card-radius) var(--aui-card-radius) 0 0; }
+  :is([data-slot="card"], [data-card]) > img:last-child { border-radius: 0 0 var(--aui-card-radius) var(--aui-card-radius); }
 
   [data-slot="card-header"] { border-radius: var(--aui-card-radius) var(--aui-card-radius) 0 0; }
   [data-slot="card-eyebrow"] { color: color-mix(in oklch, var(--muted-foreground), transparent 20%); font-size: 0.6875rem; font-weight: 650; letter-spacing: 0.18em; text-transform: uppercase; }
   [data-slot="card-title"] { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 650; line-height: 1.35; letter-spacing: -0.02em; }
-  [data-slot="card"][data-size="sm"] [data-slot="card-title"] { font-size: 0.875rem; }
-  [data-slot="card"][data-size="lg"] [data-slot="card-title"] { font-size: 1.25rem; }
+  :is([data-slot="card"], [data-card])[data-size="sm"] [data-slot="card-title"] { font-size: 0.875rem; }
+  :is([data-slot="card"], [data-card])[data-size="lg"] [data-slot="card-title"] { font-size: 1.25rem; }
   [data-slot="card-description"] { color: var(--muted-foreground); font-size: 0.875rem; line-height: 1.5rem; }
   [data-slot="card-footer"] { border-top: 1px solid color-mix(in oklch, var(--border), transparent 40%); border-radius: 0 0 var(--aui-card-radius) var(--aui-card-radius); background: color-mix(in oklch, var(--muted), transparent 78%); }
 
-  [data-slot="card"][data-variant="elevated"] {
+  :is([data-slot="card"], [data-card])[data-variant="elevated"] {
     box-shadow: 0 1px 0 oklch(1 0 0 / 76%), 0 24px 58px oklch(0.24 0.02 255 / 10%);
   }
 
-  [data-slot="card"][data-variant="outline"] {
+  :is([data-slot="card"], [data-card])[data-variant="outline"] {
     background: var(--aui-card-outline-bg);
     box-shadow: none;
   }
 
-  [data-slot="card"][data-variant="soft"] {
+  :is([data-slot="card"], [data-card])[data-variant="soft"] {
     border-color: color-mix(in oklch, var(--border), transparent 28%);
     background: var(--aui-card-soft-bg);
     box-shadow: none;
   }
 
-  [data-slot="card"][data-tone="info"] {
+  :is([data-slot="card"], [data-card])[data-tone="info"] {
     background: linear-gradient(180deg, color-mix(in oklch, var(--card), var(--aui-info) 14%), var(--card));
   }
 
-  [data-slot="card"][data-tone="success"] {
+  :is([data-slot="card"], [data-card])[data-tone="success"] {
     background: linear-gradient(180deg, color-mix(in oklch, var(--card), var(--aui-success) 14%), var(--card));
   }
 
-  [data-slot="card"][data-tone="warning"] {
+  :is([data-slot="card"], [data-card])[data-tone="warning"] {
     background: linear-gradient(180deg, color-mix(in oklch, var(--card), var(--aui-warning) 14%), var(--card));
   }
 
-  [data-slot="card"][data-tone="danger"] {
+  :is([data-slot="card"], [data-card])[data-tone="danger"] {
     background: linear-gradient(180deg, color-mix(in oklch, var(--card), var(--destructive) 10%), var(--card));
   }
 
-  [data-slot="card"][data-interactive="true"]:hover {
+  :is([data-slot="card"], [data-card])[data-interactive="true"]:hover {
     border-color: var(--aui-control-hover-border);
     box-shadow: var(--aui-card-shadow-hover);
   }
 
-  [data-slot="card"][data-interactive="true"]:focus-visible {
+  :is([data-slot="card"], [data-card])[data-interactive="true"]:focus-visible {
     box-shadow: var(--aui-card-shadow), 0 0 0 1px var(--aui-focus-ring), 0 0 0 5px var(--aui-focus-ring-soft);
   }
 
-  [data-slot="card"][data-selected="true"] {
+  :is([data-slot="card"], [data-card])[data-selected="true"] {
     border-color: color-mix(in oklch, var(--primary), transparent 44%);
     box-shadow: var(--aui-card-shadow), 0 0 0 1px color-mix(in oklch, var(--primary), transparent 64%), 0 0 0 6px color-mix(in oklch, var(--primary), transparent 88%);
   }
 
-  [data-slot="card"][data-disabled="true"] {
+  :is([data-slot="card"], [data-card])[data-disabled="true"] {
     box-shadow: none;
     opacity: 0.76;
   }
 
-  [data-slot="card"][data-size="sm"] {
+  :is([data-slot="card"], [data-card])[data-size="sm"] {
     border-radius: var(--radius-xl);
   }
 
-  [data-slot="card"][data-size="lg"] {
+  :is([data-slot="card"], [data-card])[data-size="lg"] {
     border-radius: var(--radius-3xl);
   }
 
-  [data-slot="card"][data-density="compact"] [data-slot="card-description"] {
+  :is([data-slot="card"], [data-card])[data-density="compact"] [data-slot="card-description"] {
     font-size: 0.8125rem;
     line-height: 1.35;
   }
 
-  [data-slot="card"][data-density="comfortable"] [data-slot="card-description"] {
+  :is([data-slot="card"], [data-card])[data-density="comfortable"] [data-slot="card-description"] {
     font-size: 0.975rem;
     line-height: 1.7;
   }
 
-  [data-slot="card"] [data-slot="card"][data-slot="card"] {
+  :is([data-slot="card"], [data-card]) :is([data-slot="card"], [data-card]) {
     box-shadow: none;
     border-color: color-mix(in oklch, var(--border), transparent 18%);
     background: color-mix(in oklch, var(--muted), transparent 74%);
@@ -1724,9 +1744,9 @@
   }
 
   [data-slot="statistic-card"] {
-    border-color: var(--aui-surface-border);
-    background: var(--aui-surface);
-    box-shadow: var(--aui-shadow-card);
+    border-color: var(--aui-card-border, var(--border));
+    background: var(--card);
+    box-shadow: var(--aui-card-shadow, var(--aui-shadow-xs));
   }
 
   [data-slot="statistic-label"],
@@ -1740,10 +1760,10 @@
   [data-slot="statistic-change"][data-trend="down"] { color: var(--destructive); background: color-mix(in oklch, var(--destructive), transparent 90%); }
 
   [data-slot="page-state"] {
-    border-color: var(--aui-surface-border);
+    border-color: var(--aui-card-border, var(--border));
     border-radius: var(--aui-radius-panel);
-    background: var(--aui-surface);
-    box-shadow: var(--aui-shadow-card);
+    background: var(--card);
+    box-shadow: var(--aui-card-shadow, var(--aui-shadow-xs));
   }
 
   [data-slot="page-state-icon"] { color: var(--muted-foreground); background: var(--aui-surface-muted); }
@@ -1753,9 +1773,9 @@
 
   [data-slot="file-upload-dropzone"],
   [data-slot="file-upload-item"] {
-    border-color: var(--aui-surface-border);
-    background: var(--aui-surface);
-    box-shadow: var(--aui-shadow-card);
+    border-color: var(--aui-card-border, var(--border));
+    background: var(--card);
+    box-shadow: var(--aui-card-shadow, var(--aui-shadow-xs));
   }
 
   [data-slot="file-upload-file-status"][data-status="success"] { color: var(--aui-success-fg); background: var(--aui-success-bg); }

package/registry.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://tembro.dev/registry.schema.json",
   "name": "tembro",
-  "version": "3.1.15",
+  "version": "3.1.17",
   "description": "Reusable React + TypeScript UI kit registry",
   "groups": {
     "ui": [