@orange-halo/tokens 1.0.0 → 2.0.0

package/tokens/component.tokens.json

@@ -3,34 +3,35 @@
   "button": {
     "$description": "Button — chunky, tactile, playful with offset shadows",
     "base": {
-      "fontFamily": { "$type": "fontFamily", "$value": "{typography.label.fontFamily}" },
-      "fontWeight": { "$type": "fontWeight", "$value": "{font.weight.medium}" },
-      "letterSpacing": { "$type": "dimension", "$value": "{font.letterSpacing.wide}" },
-      "borderRadius": { "$type": "dimension", "$value": "{radius.md}" },
+      "fontFamily": { "$type": "fontFamily", "$value": "{typography.control.fontFamily}" },
+      "fontWeight": { "$type": "fontWeight", "$value": "{typography.control.fontWeight}" },
+      "letterSpacing": { "$type": "dimension", "$value": "{typography.control.letterSpacing}" },
+      "borderRadius": { "$type": "dimension", "$value": "{shape.control}" },
       "borderWidth": { "$type": "dimension", "$value": "2.5px" },
       "transitionDuration": { "$type": "duration", "$value": "{motion.snappy}" },
       "transitionEasing": { "$type": "cubicBezier", "$value": "{motion.easePlayful}" }
     },
     "size": {
+      "$description": "Matches oh-button.ts, which reads these. Minimum 16px text",
       "sm": {
-        "fontSize": { "$type": "dimension", "$value": "{font.size.sm}" },
-        "paddingX": { "$type": "dimension", "$value": "{spacing.3}" },
+        "fontSize": { "$type": "dimension", "$value": "{typography.control.fontSize.sm}" },
+        "paddingX": { "$type": "dimension", "$value": "{spacing.4}" },
         "paddingY": { "$type": "dimension", "$value": "{spacing.2}" },
-        "minHeight": { "$type": "dimension", "$value": "36px" },
-        "gap": { "$type": "dimension", "$value": "{spacing.1-5}" }
+        "minHeight": { "$type": "dimension", "$value": "40px" },
+        "gap": { "$type": "dimension", "$value": "{spacing.2}" }
       },
       "md": {
-        "fontSize": { "$type": "dimension", "$value": "{font.size.sm}" },
-        "paddingX": { "$type": "dimension", "$value": "{spacing.4}" },
-        "paddingY": { "$type": "dimension", "$value": "{spacing.2-5}" },
-        "minHeight": { "$type": "dimension", "$value": "44px" },
+        "fontSize": { "$type": "dimension", "$value": "{typography.control.fontSize.md}" },
+        "paddingX": { "$type": "dimension", "$value": "{spacing.6}" },
+        "paddingY": { "$type": "dimension", "$value": "{spacing.3}" },
+        "minHeight": { "$type": "dimension", "$value": "48px" },
         "gap": { "$type": "dimension", "$value": "{spacing.2}" }
       },
       "lg": {
-        "fontSize": { "$type": "dimension", "$value": "{font.size.base}" },
-        "paddingX": { "$type": "dimension", "$value": "{spacing.6}" },
-        "paddingY": { "$type": "dimension", "$value": "{spacing.3-5}" },
-        "minHeight": { "$type": "dimension", "$value": "52px" },
+        "fontSize": { "$type": "dimension", "$value": "{typography.control.fontSize.lg}" },
+        "paddingX": { "$type": "dimension", "$value": "{spacing.8}" },
+        "paddingY": { "$type": "dimension", "$value": "{spacing.4}" },
+        "minHeight": { "$type": "dimension", "$value": "56px" },
         "gap": { "$type": "dimension", "$value": "{spacing.2-5}" }
       }
     },
@@ -40,14 +41,14 @@
         "background": { "$type": "color", "$value": "{color.brand.primary}" },
         "backgroundHover": { "$type": "color", "$value": "{color.brand.primaryHover}" },
         "backgroundActive": { "$type": "color", "$value": "{color.brand.primaryActive}" },
-        "color": { "$type": "color", "$value": "{color.surface.white}" },
+        "color": { "$type": "color", "$value": "{color.text.onBrand}" },
         "borderColor": { "$type": "color", "$value": "{color.brand.primary}" },
         "shadowColor": { "$type": "color", "$value": "{shadow.primary}" }
       },
       "secondary": {
         "$description": "Secondary — cream surface with emphasis border",
         "background": { "$type": "color", "$value": "{color.surface.base}" },
-        "backgroundHover": { "$type": "color", "$value": "{color.surface.white}" },
+        "backgroundHover": { "$type": "color", "$value": "{color.surface.hover}" },
         "backgroundActive": { "$type": "color", "$value": "{color.surface.activePressed}" },
         "color": { "$type": "color", "$value": "{color.text.primary}" },
         "borderColor": { "$type": "color", "$value": "{color.border.emphasis}" },
@@ -58,14 +59,13 @@
         "background": { "$type": "color", "$value": "{color.accent.default}" },
         "backgroundHover": { "$type": "color", "$value": "{color.accent.hover}" },
         "backgroundActive": { "$type": "color", "$value": "{color.accent.active}" },
-        "color": { "$type": "color", "$value": "{color.surface.white}" },
+        "color": { "$type": "color", "$value": "{color.text.onAccent}" },
         "borderColor": { "$type": "color", "$value": "{color.accent.default}" },
         "shadowColor": { "$type": "color", "$value": "{color.accent.shadow}" }
       }
     },
     "focus": {
-      "$description": "Warm, friendly focus ring",
-      "ringWidth": { "$type": "dimension", "$value": "3px" },
+      "$description": "Focus is an underline in focus.ringColor; glow is decoration",
       "ringColor": { "$type": "color", "$value": "{focus.ringColor}" },
       "glowColor": { "$type": "color", "$value": "{focus.glowColor}" }
     }
@@ -73,10 +73,10 @@
   "input": {
     "$description": "Input — chunky border, inset shadow, tactile feel",
     "base": {
-      "fontFamily": { "$type": "fontFamily", "$value": "{font.family.sans}" },
-      "fontSize": { "$type": "dimension", "$value": "{font.size.lg}" },
-      "lineHeight": { "$type": "number", "$value": "{font.lineHeight.normal}" },
-      "borderRadius": { "$type": "dimension", "$value": "{radius.md}" },
+      "fontFamily": { "$type": "fontFamily", "$value": "{typography.control.fontFamily}" },
+      "fontSize": { "$type": "dimension", "$value": "{typography.control.fontSize.md}" },
+      "lineHeight": { "$type": "number", "$value": "{typography.body.base.lineHeight}" },
+      "borderRadius": { "$type": "dimension", "$value": "{shape.control}" },
       "borderWidth": { "$type": "dimension", "$value": "2.5px" },
       "transitionDuration": { "$type": "duration", "$value": "{motion.snappy}" },
       "transitionEasing": { "$type": "cubicBezier", "$value": "{motion.easeGentle}" }
@@ -100,9 +100,9 @@
         "borderColor": { "$type": "color", "$value": "{color.border.hover}" }
       },
       "focus": {
-        "background": { "$type": "color", "$value": "{color.surface.white}" },
-        "borderColor": { "$type": "color", "$value": "{color.border.focus}" },
-        "focusRingColor": { "$type": "color", "$value": "{color.border.focusInner}" }
+        "background": { "$type": "color", "$value": "{color.surface.highlight}" },
+        "borderColor": { "$type": "color", "$value": "{focus.ringColor}" },
+        "focusRingColor": { "$type": "color", "$value": "{focus.ringColor}" }
       },
       "error": {
         "borderColor": { "$type": "color", "$value": "{color.feedback.error}" },
@@ -115,7 +115,7 @@
     "$description": "Card — raised surface with visible frame",
     "base": {
       "background": { "$type": "color", "$value": "{color.surface.raised}" },
-      "borderRadius": { "$type": "dimension", "$value": "{shape.container}" },
+      "borderRadius": { "$type": "dimension", "$value": "{shape.large}" },
       "borderWidth": { "$type": "dimension", "$value": "{border.width.1}" },
       "borderColor": { "$type": "color", "$value": "{color.border.default}" },
       "shadow": { "$type": "shadow", "$value": "{elevation.soft}" },
@@ -125,25 +125,57 @@
       "$description": "Interactive card — gentle warmth on hover",
       "transitionDuration": { "$type": "duration", "$value": "{motion.gentle}" },
       "transitionEasing": { "$type": "cubicBezier", "$value": "{motion.easeGentle}" },
-      "backgroundHover": { "$type": "color", "$value": "{color.warm.cream}" },
+      "backgroundHover": { "$type": "color", "$value": "{color.surface.base}" },
       "borderColorHover": { "$type": "color", "$value": "{color.border.brand}" },
       "shadowHover": { "$type": "shadow", "$value": "{elevation.medium}" }
     },
+    "raised": {
+      "$description": "Raised card (default) — subtle top-lit gradient",
+      "gradientStart": { "$type": "color", "$value": "{color.surface.highlight}" },
+      "gradientMid": { "$type": "color", "$value": "{color.surface.base}" },
+      "gradientEnd": { "$type": "color", "$value": "{color.surface.raised}" },
+      "borderColor": { "$type": "color", "$value": "{color.border.default}" }
+    },
+    "flat": {
+      "$description": "Flat card — border-led, minimal shadow",
+      "gradientStart": { "$type": "color", "$value": "{color.surface.base}" },
+      "gradientEnd": { "$type": "color", "$value": "{color.surface.raised}" },
+      "borderColor": { "$type": "color", "$value": "{color.border.default}" }
+    },
     "sunlit": {
       "$description": "Sunlit card — featured with gradient",
       "background": { "$type": "string", "$value": "{gradient.sunlit}" },
+      "gradientStart": { "$type": "color", "$value": "{color.warm.dawn}" },
+      "gradientMid": { "$type": "color", "$value": "{color.warm.shell}" },
+      "gradientEnd": { "$type": "color", "$value": "{color.warm.biscuit}" },
       "borderColor": { "$type": "color", "$value": "{color.border.brand}" },
+      "borderColorHover": { "$type": "color", "$value": "rgba(197, 67, 0, 0.35)", "$description": "Decorative container edge — not a focus or control border" },
       "shadow": { "$type": "shadow", "$value": "{elevation.medium}" }
+    },
+    "section": {
+      "$description": "Card header and footer",
+      "dividerColor": { "$type": "color", "$value": "rgba(226, 213, 200, 0.6)", "$description": "Decorative divider" },
+      "headerGradientStart": { "$type": "color", "$value": "rgba(255, 255, 255, 0.5)" },
+      "headerGradientEnd": { "$type": "color", "$value": "rgba(255, 255, 255, 0)" }
+    }
+  },
+  "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": { "$type": "color", "$value": "rgba(255, 255, 255, 0.15)" },
+      "trackBorder": { "$type": "color", "$value": "rgba(255, 255, 255, 0.3)" },
+      "fill": { "$type": "color", "$value": "{color.text.inverse}" }
     }
   },
   "badge": {
     "$description": "Badge — small status indicators",
     "base": {
-      "fontFamily": { "$type": "fontFamily", "$value": "{font.family.sans}" },
-      "fontSize": { "$type": "dimension", "$value": "{font.size.xs}" },
-      "fontWeight": { "$type": "fontWeight", "$value": "{font.weight.medium}" },
-      "letterSpacing": { "$type": "dimension", "$value": "{font.letterSpacing.wide}" },
-      "borderRadius": { "$type": "dimension", "$value": "{shape.pill}" },
+      "fontFamily": { "$type": "fontFamily", "$value": "{typography.label.fontFamily}" },
+      "fontSize": { "$type": "dimension", "$value": "{typography.body.base.fontSize}" },
+      "fontWeight": { "$type": "fontWeight", "$value": "{typography.label.base.fontWeight}" },
+      "letterSpacing": { "$type": "dimension", "$value": "{typography.label.base.letterSpacing}" },
+      "borderRadius": { "$type": "dimension", "$value": "{shape.compact}" },
       "paddingX": { "$type": "dimension", "$value": "{spacing.2-5}" },
       "paddingY": { "$type": "dimension", "$value": "{spacing.1}" }
     },
@@ -169,7 +201,7 @@
         "color": { "$type": "color", "$value": "{color.feedback.warning}" }
       },
       "neutral": {
-        "background": { "$type": "color", "$value": "{color.warm.parchment}" },
+        "background": { "$type": "color", "$value": "{color.surface.inset}" },
         "color": { "$type": "color", "$value": "{color.text.secondary}" }
       }
     }
@@ -179,6 +211,18 @@
     "color": { "$type": "color", "$value": "{color.text.link}" },
     "colorHover": { "$type": "color", "$value": "{color.text.linkHover}" },
     "textDecoration": { "$type": "string", "$value": "underline" },
-    "textDecorationHover": { "$type": "string", "$value": "none" }
+    "textDecorationHover": { "$type": "string", "$value": "none" },
+    "inverse": {
+      "$description": "On brand/accent backgrounds",
+      "focusBackground": { "$type": "color", "$value": "rgba(0, 0, 0, 0.1)", "$description": "Focus tint — paired with the underline, which is the indicator" }
+    }
+  },
+  "modal": {
+    "$description": "Modal dialog",
+    "overlay": { "$type": "color", "$value": "rgba(61, 50, 41, 0.6)", "$description": "Backdrop — darker than color.surface.overlay so the dialog stands out" }
+  },
+  "closeButton": {
+    "$description": "Icon-only close buttons in alerts and modals",
+    "backgroundHover": { "$type": "color", "$value": "rgba(0, 0, 0, 0.08)", "$description": "Neutral tint that works on every alert variant" }
   }
 }