@warmio/design 1.2.0 → 1.4.0

package/README.md

@@ -10,6 +10,9 @@ styles, and pinned local font assets used by Warm products.
 The default product typefaces are Geist and Geist Mono. The `font-editorial`
 utility uses Inter and should be reserved for deliberate editorial accents.
 
+`--accent-solid` / `--accent-solid-text` are the chromatic accent for links,
+badges, and highlights. They derive from `--brand-accent-solid` in `themes.css`.
+
 This package has no JavaScript entry point or runtime dependencies.
 
 ## Releases

package/globals.css

@@ -1,3 +1,4 @@
 @import './fonts.css';
 @import './theme.css';
 @import './base.css';
+@import './interfaces.css';

package/interfaces.css

@@ -0,0 +1,93 @@
+/* Shared interfaces.dev baseline — https://interfaces.dev/cheat-sheet */
+
+:root {
+  /* Concentric radius: nested surfaces subtract padding from the outer radius. */
+  --interface-image-outline: oklch(0 0 0 / 0.08);
+  --interface-prose-measure: 65ch;
+}
+
+.dark {
+  --interface-image-outline: oklch(1 0 0 / 0.08);
+}
+
+/* Disable incidental CSS transitions while the theme class toggles. View transitions stay enabled. */
+html.theme-switching,
+html.theme-switching *,
+html.theme-switching *::before,
+html.theme-switching *::after {
+  transition-duration: 0s !important;
+  transition-delay: 0s !important;
+}
+
+@layer base {
+  img:not([data-slot='avatar-image']) {
+    outline: 1px solid var(--interface-image-outline);
+    outline-offset: -1px;
+  }
+
+  a:not([data-slot='button']):not([role='button']) {
+    text-underline-position: from-font;
+    text-decoration-skip-ink: auto;
+  }
+
+  [data-slot='card'] {
+    --interface-outer-radius: var(--radius-xl);
+  }
+
+  [data-slot='card']
+    :is(
+      [data-slot='input'],
+      [data-slot='textarea'],
+      [data-slot='select-trigger'],
+      [data-slot='input-group']
+    ) {
+    --interface-inset: var(--spacing-lg);
+    border-radius: max(0px, calc(var(--interface-outer-radius) - var(--interface-inset)));
+  }
+}
+
+@layer utilities {
+  .interface-prose {
+    max-width: var(--interface-prose-measure);
+  }
+
+  .interface-concentric {
+    border-radius: max(0px, calc(var(--interface-outer-radius, var(--radius-xl)) - var(--interface-inset, 0px)));
+  }
+
+  .interface-icon-crossfade {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .interface-icon-crossfade > svg {
+    position: absolute;
+    inset: 0;
+    transition:
+      opacity 200ms ease-out,
+      transform 200ms ease-out,
+      filter 200ms ease-out;
+  }
+
+  .interface-icon-crossfade > svg[data-state='inactive'] {
+    opacity: 0;
+    transform: scale(0.25);
+    filter: blur(4px);
+  }
+
+  .interface-icon-crossfade > svg[data-state='active'] {
+    opacity: 1;
+    transform: scale(1);
+    filter: blur(0);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .interface-icon-crossfade > svg {
+      transition: none;
+      filter: none;
+      transform: none;
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@warmio/design",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "description": "Warm's public CSS-only design contract.",
   "license": "MIT",
   "type": "module",
@@ -20,6 +20,7 @@
     "globals.css",
     "base.css",
     "fonts.css",
+    "interfaces.css",
     "theme.css",
     "themes.css",
     "fonts",
@@ -30,7 +31,8 @@
     "./base.css": "./base.css",
     "./fonts.css": "./fonts.css",
     "./theme.css": "./theme.css",
-    "./themes.css": "./themes.css"
+    "./themes.css": "./themes.css",
+    "./interfaces.css": "./interfaces.css"
   },
   "scripts": {
     "pack:check": "node ../../tools/tasks/check-design-package.mjs"

package/theme.css

@@ -41,6 +41,8 @@
      ══════════════════════════════════════════════════════════════════════════ */
   --accent: oklch(0.96 0.002 17.2);
   --accent-foreground: oklch(0.214 0.009 43.1);
+  --accent-solid: var(--brand-accent-solid);
+  --accent-solid-text: oklch(from var(--brand-accent-solid) calc(l - 0.14) calc(c + 0.02) h);
 
   /* Interactive hover background - single source of truth for all hover states */
   --hover-bg: color-mix(in oklch, var(--foreground) 4%, transparent);
@@ -149,6 +151,7 @@
      ══════════════════════════════════════════════════════════════════════════ */
 
   --overlay-subtle: rgb(0 0 0 / 0.05);
+  --shadow-card-edge-tight: rgb(0 0 0 / 0.08);
   --overlay-light: rgb(0 0 0 / 0.1);
   --overlay-medium: rgb(0 0 0 / 0.2);
   --overlay-strong: rgb(0 0 0 / 0.25);
@@ -178,9 +181,11 @@
   --shadow-xl: 0px 1px 2px 0px var(--overlay-light), 0px 8px 10px -1px var(--overlay-light);
   --shadow-2xl: 0px 1px 2px 0px var(--overlay-strong);
   --shadow-border:
-    0 0 0 1px var(--card-edge-border, var(--border)), 0 1px 2px -1px var(--overlay-subtle),
-    0 2px 4px 0 var(--overlay-subtle);
-
+    0 -1px 0 0 var(--card-edge-border, var(--border)),
+    1px 0 0 0 var(--card-edge-border, var(--border)),
+    -1px 0 0 0 var(--card-edge-border, var(--border)),
+    0 1px 0 0 color-mix(in oklch, var(--card-edge-border, var(--border)) 75%, black),
+    0 1px 2px -1px var(--shadow-card-edge-tight), 0 2px 4px 0 var(--overlay-subtle);
   /* ══════════════════════════════════════════════════════════════════════════
      NON-COLOR TOKENS (shared across all themes)
      ══════════════════════════════════════════════════════════════════════════ */
@@ -224,6 +229,7 @@
   --button-primary-shadow:
     inset 0 1px 0 rgb(255 255 255 / 0.18), inset 0 -1px 0 rgb(0 0 0 / 0.55), 0 0 0 1px #26251f,
     0 1px 2px rgb(0 0 0 / 0.18);
+  --button-outline-shadow: 0 0 0 1px var(--border), 0 1px 2px rgb(0 0 0 / 0.18);
   --button-primary-gradient: linear-gradient(
     to bottom,
     #46453e 0%,
@@ -333,6 +339,8 @@
   --secondary-foreground: var(--foreground);
   --accent: oklch(from var(--brand-accent) calc(l + 0.08) calc(c - 0.02) h);
   --accent-foreground: var(--foreground);
+  --accent-solid: oklch(from var(--brand-accent-solid) calc(l + 0.08) c h);
+  --accent-solid-text: var(--accent-solid);
 
   /* Default button gradient (dark) */
   --default-button-gradient-start: oklch(0.4 0 0);
@@ -345,6 +353,7 @@
   --button-primary-active: oklch(0.94 0 0);
   --button-primary-shadow:
     inset 0 1px 0 rgb(255 255 255), 0 0 0 1px rgb(0 0 0 / 0.42), 0 2px 3px rgb(0 0 0 / 0.28);
+  --button-outline-shadow: 0 0 0 1px var(--border), 0 2px 3px rgb(0 0 0 / 0.28);
   --button-primary-gradient: linear-gradient(
     to bottom,
     #ffffff 0%,
@@ -418,6 +427,7 @@
 
   /* ─── Effects (dark mode) ─── */
   --overlay-subtle: rgb(0 0 0 / 0.2);
+  --shadow-card-edge-tight: rgb(0 0 0 / 0.26);
   --overlay-light: rgb(0 0 0 / 0.3);
   --overlay-medium: rgb(0 0 0 / 0.4);
   --overlay-strong: rgb(0 0 0 / 0.5);
@@ -475,6 +485,8 @@
   --secondary-foreground: oklch(from var(--brand-neutral) 0.35 0.015 h);
   --accent: var(--brand-accent);
   --accent-foreground: oklch(from var(--brand-neutral) 0.25 0.01 h);
+  --accent-solid: var(--brand-accent-solid);
+  --accent-solid-text: oklch(from var(--brand-accent-solid) calc(l - 0.14) calc(c + 0.02) h);
 
   /* Default button gradient (light) */
   --default-button-gradient-start: oklch(1 0 0);
@@ -483,6 +495,7 @@
   --button-primary-shadow:
     inset 0 1px 0 rgb(255 255 255 / 0.18), inset 0 -1px 0 rgb(0 0 0 / 0.55), 0 0 0 1px #26251f,
     0 1px 2px rgb(0 0 0 / 0.18);
+  --button-outline-shadow: 0 0 0 1px var(--border), 0 1px 2px rgb(0 0 0 / 0.18);
   --button-primary-gradient: linear-gradient(
     to bottom,
     #46453e 0%,
@@ -545,6 +558,7 @@
 
   /* ─── Effects (light mode) ─── */
   --overlay-subtle: rgb(0 0 0 / 0.05);
+  --shadow-card-edge-tight: rgb(0 0 0 / 0.08);
   --overlay-light: rgb(0 0 0 / 0.1);
   --overlay-medium: rgb(0 0 0 / 0.2);
   --overlay-strong: rgb(0 0 0 / 0.25);
@@ -592,6 +606,8 @@
   --color-muted-foreground: var(--muted-foreground);
   --color-accent: var(--accent);
   --color-accent-foreground: var(--accent-foreground);
+  --color-accent-solid: var(--accent-solid);
+  --color-accent-solid-text: var(--accent-solid-text);
   --color-destructive: var(--destructive);
   --color-destructive-foreground: var(--destructive-foreground);
   --color-success: var(--success);

package/themes.css

@@ -12,6 +12,7 @@
 
    OPTIONAL:
      --logo-gradient-start/end   Logo gradient colors
+     --brand-accent-solid        Chromatic accent for links, badges, and highlights
 
    ════════════════════════════════════════════════════════════════════════════ */
 
@@ -22,6 +23,7 @@
 :root {
   --brand-primary: #85807a;
   --brand-accent: #7e7a8a;
+  --brand-accent-solid: #8b80a6;
   --brand-muted: #848079;
   --brand-neutral: #837f7c;
   --logo-gradient-start: #85807a;
@@ -39,6 +41,7 @@
 [data-theme='ocean'] {
   --brand-primary: #4a6fa5;
   --brand-accent: #5a8a7a;
+  --brand-accent-solid: #8b80a6;
   --brand-muted: #6b7f99;
   --brand-neutral: #6e7a85;
   --logo-gradient-start: #4a6fa5;