@warmio/design 1.3.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@warmio/design",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Warm's public CSS-only design contract.",
   "license": "MIT",
   "type": "module",

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);
@@ -337,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);
@@ -481,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);
@@ -600,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;