@warmio/design 1.0.0 → 1.2.0

package/README.md

@@ -11,3 +11,12 @@ The default product typefaces are Geist and Geist Mono. The `font-editorial`
 utility uses Inter and should be reserved for deliberate editorial accents.
 
 This package has no JavaScript entry point or runtime dependencies.
+
+## Releases
+
+The `1.0.0` cutover is done. Bump this `package.json` version whenever fonts, colors,
+spacing, or theme tokens in this folder change, then follow
+[docs/reference/DESIGN_PACKAGE.md](../../docs/reference/DESIGN_PACKAGE.md).
+
+App uses the workspace package immediately. Chat and Warm Static stay on the last
+published npm version until that release is bumped the same day.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@warmio/design",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "description": "Warm's public CSS-only design contract.",
   "license": "MIT",
   "type": "module",
@@ -35,4 +35,4 @@
   "scripts": {
     "pack:check": "node ../../tools/tasks/check-design-package.mjs"
   }
-}
+}

package/theme.css

@@ -117,6 +117,13 @@
     oklch(from var(--warning) l calc(c + 0.08) h) 18%
   );
 
+  /* Finance = legible on-surface tones of WARM_COLORS.finance
+     (libraries/app-core/utils/colors.ts): cash=sage, debt=mauve, investment=seafoam.
+     Darkened from the raw palette hues so they meet AA as text on light surfaces. */
+  --finance-cash: oklch(0.43 0.055 128);
+  --finance-debt: oklch(0.45 0.09 5);
+  --finance-investment: oklch(0.44 0.05 200);
+
   /* Destructive/Error = Red (H: 30) */
   --destructive: oklch(0.55 0.12 30);
   --destructive-foreground: oklch(1 0 0);
@@ -156,6 +163,11 @@
   --glass-border: rgb(255 255 255 / 0.5);
   --backdrop-blur: rgb(0 0 0 / 0.1);
 
+  /* Auth coastal backdrop */
+  --auth-backdrop-overlay-start: oklch(0.98 0.018 300 / 0.94);
+  --auth-backdrop-overlay-end: oklch(0.94 0.035 266 / 0.72);
+  --auth-backdrop-overlay-accent: oklch(0.82 0.1 318 / 0.5);
+
   /* Shadows */
   --shadow-2xs: 0px 1px 2px 0px var(--overlay-subtle);
   --shadow-xs: 0px 1px 2px 0px var(--overlay-subtle);
@@ -166,7 +178,8 @@
   --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(--border), 0 1px 2px -1px var(--overlay-subtle), 0 2px 4px 0 var(--overlay-subtle);
+    0 0 0 1px var(--card-edge-border, var(--border)), 0 1px 2px -1px var(--overlay-subtle),
+    0 2px 4px 0 var(--overlay-subtle);
 
   /* ══════════════════════════════════════════════════════════════════════════
      NON-COLOR TOKENS (shared across all themes)
@@ -208,6 +221,26 @@
   --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-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);
 
   /* Form Specific */
   --input-height: 2.25rem;
@@ -234,6 +267,10 @@
   /* Card Specific */
   --card-padding: 1rem;
   --card-header-padding: 1.5rem;
+  --pricing-plan-min-width: 17.5rem;
+
+  /* Overlay Sizing */
+  --select-content-max-width: calc(100vw - var(--spacing-2xl));
 
   /* Border Radius */
   --radius: 0.5rem;
@@ -283,6 +320,10 @@
   /* Alternating section backgrounds - notably darker for visual distinction */
   --section-alt: oklch(0.2 0 0);
 
+  /* Date-group header band: a higher-contrast card surface so grouped date rows
+     read as clear section dividers in dark mode (light mode uses bg-muted/40). */
+  --date-group-surface: color-mix(in oklch, var(--card), white 8%);
+
   /* ─── Primary (brighter for dark mode) ─── */
   --primary: oklch(from var(--brand-primary) calc(l + 0.115) calc(c - 0.01) h);
   --primary-foreground: var(--background);
@@ -302,6 +343,25 @@
   --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-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);
 
   /* Sidebar = solid dark surface */
   --sidebar: var(--background);
@@ -335,6 +395,11 @@
     oklch(from var(--warning) l calc(c + 0.06) h) 20%
   );
 
+  /* Finance (dark variants) — lightened for legibility on dark surfaces */
+  --finance-cash: oklch(0.74 0.06 128);
+  --finance-debt: oklch(0.76 0.08 5);
+  --finance-investment: oklch(0.73 0.05 200);
+
   --destructive-foreground: oklch(1 0 0);
   --error-text: oklch(0.7 0.12 30);
   --error-bg-subtle: oklch(0.2 0.05 30);
@@ -367,6 +432,11 @@
   --glass-border: rgb(255 255 255 / 0.08);
   --backdrop-blur: rgb(0 0 0 / 0.33);
 
+  /* Auth coastal backdrop */
+  --auth-backdrop-overlay-start: oklch(0.13 0.035 270 / 0.84);
+  --auth-backdrop-overlay-end: oklch(0.19 0.045 314 / 0.72);
+  --auth-backdrop-overlay-accent: oklch(0.33 0.1 318 / 0.52);
+
   /* Shadows (stronger in dark) */
   --shadow-2xs: 0px 1px 2px 0px var(--overlay-strong);
   --shadow-xs: 0px 1px 2px 0px var(--overlay-strong);
@@ -396,6 +466,9 @@
   /* ─── Primary (standard for light mode) ─── */
   --primary: var(--brand-primary);
   --primary-foreground: oklch(1 0 0);
+  --apple-button-background: var(--foreground);
+  --apple-button-foreground: var(--background);
+  --apple-button-hover: var(--apple-button-background);
 
   /* ─── Secondary/Accent ─── */
   --secondary: oklch(from var(--brand-primary) calc(l + 0.27) calc(c - 0.025) h);
@@ -407,6 +480,23 @@
   --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-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);
@@ -432,6 +522,11 @@
     oklch(from var(--warning) l calc(c + 0.08) h) 18%
   );
 
+  /* Finance (light variants) — darkened for legibility on light surfaces */
+  --finance-cash: oklch(0.43 0.055 128);
+  --finance-debt: oklch(0.45 0.09 5);
+  --finance-investment: oklch(0.44 0.05 200);
+
   --destructive-foreground: oklch(1 0 0);
   --error-text: oklch(0.35 0.14 30);
   --error-bg-subtle: oklch(0.96 0.02 30);
@@ -488,6 +583,9 @@
   --color-popover-foreground: var(--popover-foreground);
   --color-primary: var(--primary);
   --color-primary-foreground: var(--primary-foreground);
+  --color-apple-button-background: var(--apple-button-background);
+  --color-apple-button-foreground: var(--apple-button-foreground);
+  --color-apple-button-hover: var(--apple-button-hover);
   --color-secondary: var(--secondary);
   --color-secondary-foreground: var(--secondary-foreground);
   --color-muted: var(--muted);
@@ -520,6 +618,9 @@
   --color-info-bg-subtle: var(--info-bg-subtle);
   --color-info-bg-muted: var(--info-bg-muted);
   --color-info-border: var(--info-border);
+  --color-finance-cash: var(--finance-cash);
+  --color-finance-debt: var(--finance-debt);
+  --color-finance-investment: var(--finance-investment);
 
   /* UI elements */
   --color-border: var(--border);
@@ -589,4 +690,5 @@
   --shadow-lg: var(--shadow-lg);
   --shadow-xl: var(--shadow-xl);
   --shadow-2xl: var(--shadow-2xl);
+  --shadow-card-edge: var(--shadow-border);
 }