@orange-halo/tokens 1.0.0 → 2.0.0

package/dist/tokens.json

@@ -1,7 +1,7 @@
 {
   "$description": "Component Design Tokens — Orange Halo Visual DNA applied. Each component has personality knobs.",
   "color": {
-    "$description": "Warm color palette with nostalgic character. No pure white, no blue-gray.",
+    "$description": "Warm palette with nostalgic character. Neutrals are always warm; blue is the deliberate accent.",
     "orange": {
       "50": "#fff3e0",
       "100": "#ffe0b2",
@@ -26,6 +26,7 @@
       "600": "#b87a24",
       "700": "#8c5e1c",
       "800": "#6b4815",
+      "900": "#3d3529",
       "$description": "Warm highlight — golden warmth for accents and feedback"
     },
     "terracotta": {
@@ -52,33 +53,47 @@
       "700": "#3f5c5d",
       "800": "#344a4b",
       "900": "#2a3c3d",
-      "$description": "Nostalgic accent — muted teal, the retro counterbalance"
+      "$description": "Reserve palette — not used by semantic tokens"
     },
     "warm": {
       "$description": "Warm neutral scale — cream to walnut, no blue-gray",
       "cream": "#faf7f2",
       "linen": "#f5f0e8",
+      "dawn": "#fffbf5",
+      "shell": "#fdf6ee",
+      "biscuit": "#f8efe4",
       "parchment": "#ede8df",
       "sand": "#e2dcd2",
       "dune": "#c9c1b4",
+      "stone": "#a09080",
+      "taupe": "#8a7a68",
       "driftwood": "#6b5d4d",
       "bark": "#52463a",
-      "walnut": "#3d3229"
+      "hickory": "#4a3f33",
+      "chestnut": "#44382c",
+      "walnut": "#3d3229",
+      "mocha": "#352e28",
+      "cocoa": "#2a2420",
+      "espresso": "#1f1a17"
     },
     "green": {
       "50": "#f0f7f1",
       "100": "#d9edd9",
+      "300": "#7ab87c",
       "500": "#5a9a5c",
       "600": "#4a8a4c",
       "700": "#3d7340",
+      "900": "#2a3629",
       "$description": "Success — warm-tinted green"
     },
     "red": {
       "50": "#fdf4f3",
       "100": "#f9e0dc",
+      "300": "#e08f8d",
       "500": "#c75450",
       "600": "#b54540",
       "700": "#943836",
+      "900": "#3d2a29",
       "$description": "Error — warm-tinted red"
     },
     "blue": {
@@ -100,7 +115,6 @@
       "primaryHover": "#9e3500",
       "primaryActive": "#9e3500",
       "primarySubtle": "#fff3e0",
-      "primaryMuted": "#ffe0b2",
       "highlight": "#e8a838",
       "highlightSubtle": "#fdf3d4"
     },
@@ -110,25 +124,20 @@
       "hover": "#354f70",
       "active": "#2e4460",
       "subtle": "#eef4f9",
-      "muted": "#d6e4f0",
       "shadow": "#a0b4c8"
     },
     "feedback": {
       "$description": "Feedback colors — warm-tinted",
-      "success": "#4a8a4c",
+      "success": "#3d7340",
       "successSubtle": "#f0f7f1",
-      "successMuted": "#d9edd9",
       "error": "#b54540",
       "errorHover": "#943836",
       "errorSubtle": "#fdf4f3",
-      "errorMuted": "#f9e0dc",
       "errorShadow": "#b545404d",
       "warning": "#8c5e1c",
       "warningSubtle": "#fefaee",
-      "warningMuted": "#fdf3d4",
       "info": "#3d5a80",
-      "infoSubtle": "#eef4f9",
-      "infoMuted": "#d6e4f0"
+      "infoSubtle": "#eef4f9"
     },
     "surface": {
       "$description": "Surface system — designed surfaces, not flat planes",
@@ -136,7 +145,7 @@
       "raised": "#f5f0e8",
       "sunlit": "#faf7f2",
       "inset": "#ede8df",
-      "white": "#ffffff",
+      "highlight": "#ffffff",
       "overlay": "#3d322966",
       "disabled": "#e2dcd2",
       "hover": "#fff4e6",
@@ -147,9 +156,8 @@
       "default": "#e2dcd2",
       "subtle": "#ede8df",
       "emphasis": "#6b5d4d",
+      "strong": "#c9c1b4",
       "hover": "#8b4726",
-      "focus": "#c54300",
-      "focusInner": "#c54300",
       "disabled": "#ede8df",
       "brand": "#c5430040"
     },
@@ -161,9 +169,14 @@
       "inverse": "#faf7f2",
       "link": "#c54300",
       "linkHover": "#9e3500",
+      "linkRaised": "#9e3500",
       "brand": "#c54300",
       "onBrand": "#ffffff",
-      "onAccent": "#ffffff"
+      "onAccent": "#ffffff",
+      "onSuccess": "#ffffff",
+      "onError": "#ffffff",
+      "onWarning": "#ffffff",
+      "onInfo": "#ffffff"
     }
   },
   "font": {
@@ -207,7 +220,8 @@
       "tight": "-0.01em",
       "normal": "0",
       "wide": "0.01em",
-      "wider": "0.02em"
+      "wider": "0.02em",
+      "widest": "0.05em"
     }
   },
   "spacing": {
@@ -278,7 +292,7 @@
   },
   "gradient": {
     "$description": "Soft, nostalgic gradients — never high-contrast or flashy",
-    "sunlit": "linear-gradient(180deg, #FAF7F2 0%, #F5EFE4 100%)",
+    "sunlit": "linear-gradient(180deg, #fffbf5 0%, #fdf6ee 30%, #f8efe4 100%)",
     "warm": "linear-gradient(135deg, #C54300 0%, #FF9800 100%)",
     "nostalgic": "linear-gradient(180deg, #F5F0E8 0%, #EDE8DF 100%)"
   },
@@ -346,7 +360,25 @@
       "0": "0",
       "1": "1px",
       "2": "2px",
-      "$description": "Border widths"
+      "$description": "Border widths",
+      "chunky": "2.5px"
+    }
+  },
+  "size": {
+    "$description": "Fixed layout sizes: content widths and viewport breakpoints",
+    "container": {
+      "$description": "Content max-widths",
+      "sm": "640px",
+      "md": "768px",
+      "lg": "1024px",
+      "xl": "1280px"
+    },
+    "breakpoint": {
+      "$description": "Viewport widths for @media queries. CSS can't read custom properties in a media query, so components write the value; check:tokens fails any (min|max)-width that isn't one of these (or one pixel either side, for adjoining ranges).",
+      "xs": "480px",
+      "sm": "640px",
+      "md": "768px",
+      "lg": "1024px"
     }
   },
   "zIndex": {
@@ -372,7 +404,7 @@
       },
       "h2": {
         "fontSize": "2rem",
-        "fontWeight": "600",
+        "fontWeight": "700",
         "lineHeight": 1.25,
         "letterSpacing": "-0.01em"
       },
@@ -384,7 +416,7 @@
       },
       "h4": {
         "fontSize": "1.25rem",
-        "fontWeight": "500",
+        "fontWeight": "600",
         "lineHeight": 1.35,
         "letterSpacing": "0"
       },
@@ -401,6 +433,12 @@
     },
     "body": {
       "fontFamily": "'Bricolage Grotesque', 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif",
+      "xl": {
+        "$description": "Lead paragraphs and hero subtitles",
+        "fontSize": "1.25rem",
+        "fontWeight": "400",
+        "lineHeight": 1.5
+      },
       "lg": {
         "fontSize": "1.125rem",
         "fontWeight": "400",
@@ -439,18 +477,51 @@
         "letterSpacing": "0.01em"
       }
     },
+    "eyebrow": {
+      "$description": "Small uppercase line above a heading (set text-transform: uppercase alongside)",
+      "fontFamily": "'Bricolage Grotesque', 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif",
+      "fontSize": "1rem",
+      "fontWeight": "500",
+      "letterSpacing": "0.05em"
+    },
+    "control": {
+      "$description": "Buttons, field labels, legends, select triggers and options, choice labels",
+      "fontFamily": "'Bricolage Grotesque', 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif",
+      "fontWeight": "600",
+      "letterSpacing": "0.01em",
+      "fontSize": {
+        "sm": "1rem",
+        "md": "1.125rem",
+        "lg": "1.25rem"
+      }
+    },
+    "emphasis": {
+      "$description": "Inline emphasis inside body text: links, the selected option",
+      "fontWeight": "600"
+    },
     "code": {
       "fontFamily": "'JetBrains Mono', 'Fira Code', ui-monospace, monospace",
       "fontSize": "0.875rem",
       "lineHeight": 1.5
     }
   },
+  "layout": {
+    "$description": "Layout sizes",
+    "container": {
+      "$description": "Max-width of a centred content column (oh-container, oh-hero)",
+      "sm": "640px",
+      "md": "768px",
+      "lg": "1024px",
+      "xl": "1280px"
+    }
+  },
   "shape": {
     "$description": "Friendly soft corners",
-    "interactive": "6px",
+    "control": "10px",
     "container": "10px",
     "large": "14px",
-    "small": "4px",
+    "compact": "6px",
+    "tight": "4px",
     "pill": "9999px"
   },
   "elevation": {
@@ -465,14 +536,15 @@
   "focus": {
     "$description": "Warm, friendly focus ring",
     "ringWidth": "3px",
-    "ringColor": "#c5430059",
+    "ringOffset": "2px",
+    "ringColor": "#c54300",
     "glowColor": "#c5430026"
   },
   "button": {
     "$description": "Button — chunky, tactile, playful with offset shadows",
     "base": {
       "fontFamily": "'Bricolage Grotesque', 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif",
-      "fontWeight": "500",
+      "fontWeight": "600",
       "letterSpacing": "0.01em",
       "borderRadius": "10px",
       "borderWidth": "2.5px",
@@ -485,25 +557,26 @@
       ]
     },
     "size": {
+      "$description": "Matches oh-button.ts, which reads these. Minimum 16px text",
       "sm": {
-        "fontSize": "0.875rem",
-        "paddingX": "0.75rem",
+        "fontSize": "1rem",
+        "paddingX": "1rem",
         "paddingY": "0.5rem",
-        "minHeight": "36px",
-        "gap": "0.375rem"
+        "minHeight": "40px",
+        "gap": "0.5rem"
       },
       "md": {
-        "fontSize": "0.875rem",
-        "paddingX": "1rem",
-        "paddingY": "0.625rem",
-        "minHeight": "44px",
+        "fontSize": "1.125rem",
+        "paddingX": "1.5rem",
+        "paddingY": "0.75rem",
+        "minHeight": "48px",
         "gap": "0.5rem"
       },
       "lg": {
-        "fontSize": "1rem",
-        "paddingX": "1.5rem",
-        "paddingY": "0.875rem",
-        "minHeight": "52px",
+        "fontSize": "1.25rem",
+        "paddingX": "2rem",
+        "paddingY": "1rem",
+        "minHeight": "56px",
         "gap": "0.625rem"
       }
     },
@@ -520,7 +593,7 @@
       "secondary": {
         "$description": "Secondary — cream surface with emphasis border",
         "background": "#faf7f2",
-        "backgroundHover": "#ffffff",
+        "backgroundHover": "#fff4e6",
         "backgroundActive": "#f0ebe3",
         "color": "#3d3229",
         "borderColor": "#6b5d4d",
@@ -537,9 +610,8 @@
       }
     },
     "focus": {
-      "$description": "Warm, friendly focus ring",
-      "ringWidth": "3px",
-      "ringColor": "#c5430059",
+      "$description": "Focus is an underline in focus.ringColor; glow is decoration",
+      "ringColor": "#c54300",
       "glowColor": "#c5430026"
     }
   },
@@ -593,7 +665,7 @@
     "$description": "Card — raised surface with visible frame",
     "base": {
       "background": "#f5f0e8",
-      "borderRadius": "10px",
+      "borderRadius": "14px",
       "borderWidth": "1px",
       "borderColor": "#e2dcd2",
       "shadow": "0 2px 8px rgba(61, 50, 41, 0.06), 0 1px 3px rgba(61, 50, 41, 0.08)",
@@ -612,21 +684,53 @@
       "borderColorHover": "#c5430040",
       "shadowHover": "0 4px 16px rgba(61, 50, 41, 0.08), 0 2px 6px rgba(61, 50, 41, 0.06)"
     },
+    "raised": {
+      "$description": "Raised card (default) — subtle top-lit gradient",
+      "gradientStart": "#ffffff",
+      "gradientMid": "#faf7f2",
+      "gradientEnd": "#f5f0e8",
+      "borderColor": "#e2dcd2"
+    },
+    "flat": {
+      "$description": "Flat card — border-led, minimal shadow",
+      "gradientStart": "#faf7f2",
+      "gradientEnd": "#f5f0e8",
+      "borderColor": "#e2dcd2"
+    },
     "sunlit": {
       "$description": "Sunlit card — featured with gradient",
-      "background": "linear-gradient(180deg, #FAF7F2 0%, #F5EFE4 100%)",
+      "background": "linear-gradient(180deg, #fffbf5 0%, #fdf6ee 30%, #f8efe4 100%)",
+      "gradientStart": "#fffbf5",
+      "gradientMid": "#fdf6ee",
+      "gradientEnd": "#f8efe4",
       "borderColor": "#c5430040",
+      "borderColorHover": "#c5430059",
       "shadow": "0 4px 16px rgba(61, 50, 41, 0.08), 0 2px 6px rgba(61, 50, 41, 0.06)"
+    },
+    "section": {
+      "$description": "Card header and footer",
+      "dividerColor": "#e2d5c899",
+      "headerGradientStart": "#ffffff80",
+      "headerGradientEnd": "#ffffff00"
+    }
+  },
+  "progress": {
+    "$description": "Progress — chunky pill track",
+    "inverse": {
+      "$description": "On brand/accent backgrounds (e.g. journey hero). Fill is cream so it reads at 3.7:1 against the track.",
+      "trackBackground": "#ffffff26",
+      "trackBorder": "#ffffff4d",
+      "fill": "#faf7f2"
     }
   },
   "badge": {
     "$description": "Badge — small status indicators",
     "base": {
       "fontFamily": "'Bricolage Grotesque', 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif",
-      "fontSize": "0.75rem",
+      "fontSize": "1rem",
       "fontWeight": "500",
       "letterSpacing": "0.01em",
-      "borderRadius": "9999px",
+      "borderRadius": "6px",
       "paddingX": "0.625rem",
       "paddingY": "0.25rem"
     },
@@ -641,7 +745,7 @@
       },
       "success": {
         "background": "#f0f7f1",
-        "color": "#4a8a4c"
+        "color": "#3d7340"
       },
       "error": {
         "background": "#fdf4f3",
@@ -662,6 +766,18 @@
     "color": "#c54300",
     "colorHover": "#9e3500",
     "textDecoration": "underline",
-    "textDecorationHover": "none"
+    "textDecorationHover": "none",
+    "inverse": {
+      "$description": "On brand/accent backgrounds",
+      "focusBackground": "#0000001a"
+    }
+  },
+  "modal": {
+    "$description": "Modal dialog",
+    "overlay": "#3d322999"
+  },
+  "closeButton": {
+    "$description": "Icon-only close buttons in alerts and modals",
+    "backgroundHover": "#00000014"
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orange-halo/tokens",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "Design tokens for Orange Halo Design System (W3C Design Token Format)",
   "type": "module",
   "main": "./dist/tokens.js",
@@ -9,13 +9,17 @@
       "import": "./dist/tokens.js"
     },
     "./css": "./dist/tokens.css",
-    "./themes/light": "./dist/themes/light.css",
     "./themes/dark": "./dist/themes/dark.css",
-    "./json": "./dist/tokens.json"
+    "./themes/dark.json": "./dist/themes/dark.json",
+    "./json": "./dist/tokens.json",
+    "./contrast": "./contrast.js",
+    "./contrast-pairs": "./contrast-pairs.json"
   },
   "files": [
     "dist",
-    "tokens"
+    "tokens",
+    "contrast.js",
+    "contrast-pairs.json"
   ],
   "devDependencies": {
     "style-dictionary": "^4.2.0"