@brightweblabs/theme 0.7.4 → 0.8.1

package/README.md

@@ -25,7 +25,7 @@ The family contract starts at `--font-body`, `--font-heading`, and `--font-code`
 | `text-body-lg` | `1rem` | Emphasized or introductory body copy |
 | `text-body` | `0.875rem` | Default interface body copy |
 | `text-meta` | `0.75rem` | Secondary metadata |
-| `text-label` | `0.6875rem` | Uppercase interface label |
+| `text-label` | `0.75rem` | Compact sentence-case interface label |
 | `text-micro` | `0.625rem` | Dense supporting copy |
 | `text-kpi` | `2.75rem` | Display-face headline KPI |
 | `text-kpi-lg` | `3.5rem` | Large display-face headline KPI |
@@ -38,9 +38,10 @@ are mono, and numbers in sentences inherit their surrounding prose. The legacy
 existing rendered output for compatibility; new code should use the semantic roles
 above.
 
-Existing recipes remain supported and preserve their rendered values. The table
-below gives the recommended semantic role for new code; it is a migration guide,
-not a claim that every compatibility utility renders identically:
+Existing recipes remain supported. Compatibility label recipes intentionally
+adopt the shared sentence-case label treatment; other compatibility recipes keep
+their established values. The table below gives the recommended semantic role for
+new code rather than promising pixel-identical output:
 
 | Compatibility utility | Recommended role |
 | --- | --- |

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@brightweblabs/theme",
   "private": false,
-  "version": "0.7.4",
+  "version": "0.8.1",
   "main": "./src/tint.ts",
   "types": "./src/tint.ts",
   "files": [

package/src/surfaces.css

@@ -3,18 +3,54 @@
    Unlayered, these beat @layer utilities and e.g. p-0 on the CRM table card
    silently loses to the default card padding. */
 @layer components {
+  .card-root,
   .surface-card {
     border-radius: var(--radius-card);
     border: 1px solid var(--border-hairline);
     background: var(--surface-card);
-    padding: var(--surface-card-padding);
-    animation: surface-fade-in 640ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
+    color: var(--card-foreground);
+    box-shadow: var(--dashboard-shadow-sm);
   }
 
+  .card-root[data-variant="light"],
   .surface-card.is-light {
     background: var(--surface-card-light);
   }
 
+  .card-root[data-variant="elevated"] {
+    box-shadow: var(--dashboard-shadow-md);
+  }
+
+  .card-root[data-variant="interactive"] {
+    cursor: pointer;
+    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
+  }
+
+  .card-root[data-variant="interactive"]:hover,
+  .card-root[data-variant="interactive"]:focus-visible,
+  .card-root[data-variant="interactive"]:focus-within {
+    border-color: var(--border-selection);
+    box-shadow: var(--dashboard-shadow-md);
+    transform: translateY(-1px);
+  }
+
+  .card-root[data-variant="interactive"]:focus-visible,
+  .card-root[data-variant="interactive"]:focus-within {
+    outline: 2px solid var(--ring);
+    outline-offset: 2px;
+  }
+
+  .card-root[data-variant="insight"] {
+    overflow: hidden;
+    border-color: transparent;
+    background: var(--card);
+    box-shadow: none;
+  }
+
+  .card-enter {
+    animation: surface-fade-in 640ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
+  }
+
   /* A near-black panel has strong figure/ground in light mode. In dark mode it
      elevates above the page through a lighter accent mix, border, and shadow. */
   .brand-panel {
@@ -120,6 +156,14 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
+  .card-root,
+  .surface-card {
+    animation: none;
+    opacity: 1;
+    transform: none;
+    transition: none;
+  }
+
   .skeleton-ghost::after {
     display: none;
   }
@@ -138,10 +182,10 @@
   border-radius: var(--radius-pill);
   background: var(--brand-surface-tint);
   color: var(--brand-accent);
-  font-size: var(--text-ui-label);
-  font-weight: var(--font-weight-bold);
-  letter-spacing: var(--type-tracking-040);
-  text-transform: uppercase;
+  font-size: var(--text-meta);
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: var(--type-tracking-normal);
+  text-transform: none;
 }
 
 .status {

package/src/tokens.css

@@ -192,7 +192,7 @@
   --text-body-lg: 1rem;
   --text-body: 0.875rem;
   --text-meta: 0.75rem;
-  --text-label: 0.6875rem;
+  --text-label: 0.75rem;
   --text-micro: 0.625rem;
   --text-metric: 2.75rem;
   --text-metric-display: var(--text-metric);

package/src/typography.css

@@ -68,10 +68,10 @@
 @utility text-label {
   font-family: var(--font-body);
   font-size: var(--text-label);
-  font-weight: var(--font-weight-medium);
-  line-height: var(--type-leading-none);
-  text-transform: uppercase;
-  letter-spacing: var(--type-tracking-140);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--type-leading-140);
+  text-transform: none;
+  letter-spacing: var(--type-tracking-normal);
 }
 
 @utility text-micro {
@@ -151,10 +151,10 @@
 @utility text-ui-label {
   font-family: var(--font-body);
   font-size: var(--text-ui-label);
-  font-weight: var(--font-weight-medium);
-  line-height: var(--type-leading-none);
-  text-transform: uppercase;
-  letter-spacing: var(--type-tracking-140);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--type-leading-140);
+  text-transform: none;
+  letter-spacing: var(--type-tracking-normal);
 }
 
 @utility text-ui-meta {
@@ -317,10 +317,10 @@
 @utility portal-label {
   font-family: var(--font-body);
   font-size: var(--text-ui-label);
-  font-weight: var(--font-weight-medium);
-  line-height: var(--type-leading-none);
-  text-transform: uppercase;
-  letter-spacing: var(--type-tracking-140);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--type-leading-140);
+  text-transform: none;
+  letter-spacing: var(--type-tracking-normal);
   /* MQ parity: apps/portal/app/globals.css:663. */
   color: var(--muted-foreground);
 }

package/themes/mq-aliases.css

@@ -59,11 +59,11 @@
 
   .label {
     margin: 0;
-    font-family: var(--font-display);
-    font-size: var(--type-label);
-    font-weight: var(--font-weight-heavy);
-    line-height: var(--type-leading-120);
-    letter-spacing: var(--type-tracking-120);
-    text-transform: uppercase;
+    font-family: var(--font-body);
+    font-size: var(--text-meta);
+    font-weight: var(--font-weight-semibold);
+    line-height: var(--type-leading-140);
+    letter-spacing: var(--type-tracking-normal);
+    text-transform: none;
   }
 }