@warmio/design 1.1.0 → 1.3.0

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.1.0",
+  "version": "1.3.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

@@ -149,6 +149,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 +179,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)
      ══════════════════════════════════════════════════════════════════════════ */
@@ -221,6 +224,24 @@
   --button-primary-border: oklch(0 0 0 / 0.18);
   --button-primary-hover: oklch(from var(--primary) calc(l + 0.08) c h);
   --button-primary-active: oklch(from var(--primary) calc(l - 0.04) c h);
+  --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%,
+    #383731 28%,
+    #292824 64%,
+    #1d1c19 100%
+  );
+  --button-primary-gradient-hover: linear-gradient(
+    to bottom,
+    #4f4e48 0%,
+    #42413b 28%,
+    #34332f 64%,
+    #282724 100%
+  );
   --apple-button-background: var(--foreground);
   --apple-button-foreground: var(--background);
   --apple-button-hover: var(--apple-button-background);
@@ -326,6 +347,23 @@
   --button-primary-border: oklch(1 0 0 / 0.18);
   --button-primary-hover: oklch(1 0 0);
   --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%,
+    #f8f7f4 28%,
+    #f0eee9 64%,
+    #e4e1db 100%
+  );
+  --button-primary-gradient-hover: linear-gradient(
+    to bottom,
+    #f2f2f2 0%,
+    #ecebe8 28%,
+    #e4e2dd 64%,
+    #d9d6d0 100%
+  );
   --apple-button-background: oklch(0 0 0);
   --apple-button-foreground: oklch(1 0 0);
   --apple-button-hover: var(--apple-button-background);
@@ -385,6 +423,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);
@@ -447,6 +486,24 @@
   --default-button-gradient-start: oklch(1 0 0);
   --default-button-gradient-end: oklch(0.92 0 0);
   --default-button-active: oklch(0.91 0 0);
+  --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%,
+    #383731 28%,
+    #292824 64%,
+    #1d1c19 100%
+  );
+  --button-primary-gradient-hover: linear-gradient(
+    to bottom,
+    #4f4e48 0%,
+    #42413b 28%,
+    #34332f 64%,
+    #282724 100%
+  );
 
   /* Charts */
   --chart-1: var(--brand-primary);
@@ -495,6 +552,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);