@kierto/design-system 0.1.0 → 0.2.0

package/dist/theme.js

@@ -21,7 +21,7 @@ export const baseThemeOptions = {
             main: brand.signal,
             dark: brand.signalDeep,
             light: brand.signalSoft,
-            contrastText: '#FFFFFF', // white reads on the green accent (and its darker hover)
+            contrastText: brand.ink, // ink reads on the brighter green accent (AA ≈5.5:1)
         },
         background: {
             default: brand.paper,

package/dist/tokens.d.ts

@@ -5,8 +5,8 @@ export declare const brand: {
     readonly ink: "#15322A";
     readonly inkDeep: "#0D211B";
     readonly inkSoft: "#4B6258";
-    readonly signal: "#177A3A";
-    readonly signalDeep: "#125C2C";
+    readonly signal: "#1E8E45";
+    readonly signalDeep: "#16702F";
     readonly signalSoft: "#C4E8D1";
     readonly signalBright: "#2FBF71";
     readonly line: "rgba(21,50,42,0.16)";

package/dist/tokens.js

@@ -14,9 +14,10 @@ export const brand = {
     ink: '#15322A', // deep spruce — primary text & brand color
     inkDeep: '#0D211B', // near-black spruce — full-bleed dark sections
     inkSoft: '#4B6258', // muted spruce — secondary text
-    signal: '#177A3A', // recycle green — the single sharp accent (eco values). Deep
-    // enough to clear WCAG AA as text on the bone paper (≈4.6:1) and under white (≈5.4:1).
-    signalDeep: '#125C2C', // deeper green — hover / pressed (white text ≈7:1)
+    signal: '#1E8E45', // vivid recycle green — the single sharp brand accent (eco values).
+    // Pair with INK text on green (≈5.5:1 AA); white text fails AA on this brighter green —
+    // use signalDeep when a green surface needs white text.
+    signalDeep: '#16702F', // deeper green — hover / pressed; AA-safe under white text (≈6.5:1)
     signalSoft: '#C4E8D1', // pale green — soft accent on dark sections
     signalBright: '#2FBF71', // vivid green — accents on dark surfaces (dashboard dark mode)
     line: 'rgba(21,50,42,0.16)', // hairline on paper

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kierto/design-system",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Canonical Kierto brand design system — tokens, fonts, and base MUI theme shared across every Kierto frontend.",
   "license": "UNLICENSED",
   "repository": {

package/src/theme.ts

@@ -23,7 +23,7 @@ export const baseThemeOptions: ThemeOptions = {
       main: brand.signal,
       dark: brand.signalDeep,
       light: brand.signalSoft,
-      contrastText: '#FFFFFF', // white reads on the green accent (and its darker hover)
+      contrastText: brand.ink, // ink reads on the brighter green accent (AA ≈5.5:1)
     },
     background: {
       default: brand.paper,

package/src/tokens.ts

@@ -14,9 +14,10 @@ export const brand = {
   ink: '#15322A', // deep spruce — primary text & brand color
   inkDeep: '#0D211B', // near-black spruce — full-bleed dark sections
   inkSoft: '#4B6258', // muted spruce — secondary text
-  signal: '#177A3A', // recycle green — the single sharp accent (eco values). Deep
-  // enough to clear WCAG AA as text on the bone paper (≈4.6:1) and under white (≈5.4:1).
-  signalDeep: '#125C2C', // deeper green — hover / pressed (white text ≈7:1)
+  signal: '#1E8E45', // vivid recycle green — the single sharp brand accent (eco values).
+  // Pair with INK text on green (≈5.5:1 AA); white text fails AA on this brighter green —
+  // use signalDeep when a green surface needs white text.
+  signalDeep: '#16702F', // deeper green — hover / pressed; AA-safe under white text (≈6.5:1)
   signalSoft: '#C4E8D1', // pale green — soft accent on dark sections
   signalBright: '#2FBF71', // vivid green — accents on dark surfaces (dashboard dark mode)
   line: 'rgba(21,50,42,0.16)', // hairline on paper