@orange-halo/tokens 2.0.0 → 2.2.0

package/tokens/{global.tokens.json → brands/orange-halo/palette.tokens.json}

@@ -1,5 +1,13 @@
 {
-  "$description": "Global Design Tokens — Orange Halo Visual DNA. Warm, playful, personal.",
+  "$description": "Orange Halo palette (tier 1): colours, fonts, radii, shadows, gradients, motion and borders. Warm, playful, personal. Other brands provide their own palette with the same groups.",
+  "grid": {
+    "$description": "The brand's layout grid. Spacing is multiples of half a unit; type sizes and line heights sit on it (see style-dictionary.config.js)",
+    "unit": {
+      "$type": "dimension",
+      "$value": "8px",
+      "$description": "8px grid with 4px half-steps"
+    }
+  },
   "color": {
     "$description": "Warm palette with nostalgic character. Neutrals are always warm; blue is the deliberate accent.",
     "orange": {
@@ -414,7 +422,7 @@
       }
     },
     "size": {
-      "$description": "Slightly expressive type scale",
+      "$description": "Type scale on the brand's grid (grid.unit): every size is a multiple of half a unit. Strict: no size between xs and base",
       "xs": {
         "$type": "dimension",
         "$value": "0.75rem",
@@ -422,8 +430,8 @@
       },
       "sm": {
         "$type": "dimension",
-        "$value": "0.875rem",
-        "$description": "14px"
+        "$value": "{font.size.xs}",
+        "$description": "Kept so existing references don't break. On the grid, small text is xs; use xs or a tier 2 role"
       },
       "base": {
         "$type": "dimension",
@@ -432,18 +440,18 @@
       },
       "lg": {
         "$type": "dimension",
-        "$value": "1.125rem",
-        "$description": "18px"
+        "$value": "1.25rem",
+        "$description": "20px"
       },
       "xl": {
         "$type": "dimension",
-        "$value": "1.25rem",
-        "$description": "20px"
+        "$value": "1.5rem",
+        "$description": "24px"
       },
       "2xl": {
         "$type": "dimension",
-        "$value": "1.625rem",
-        "$description": "26px"
+        "$value": "1.75rem",
+        "$description": "28px"
       },
       "3xl": {
         "$type": "dimension",
@@ -452,13 +460,13 @@
       },
       "4xl": {
         "$type": "dimension",
-        "$value": "2.625rem",
-        "$description": "42px"
+        "$value": "2.5rem",
+        "$description": "40px"
       },
       "5xl": {
         "$type": "dimension",
-        "$value": "3.25rem",
-        "$description": "52px"
+        "$value": "3rem",
+        "$description": "48px"
       }
     },
     "weight": {
@@ -536,97 +544,6 @@
       }
     }
   },
-  "spacing": {
-    "$description": "Generous spacing — breathing room, not dense",
-    "0": {
-      "$type": "dimension",
-      "$value": "0"
-    },
-    "px": {
-      "$type": "dimension",
-      "$value": "1px"
-    },
-    "0-5": {
-      "$type": "dimension",
-      "$value": "0.125rem",
-      "$description": "2px"
-    },
-    "1": {
-      "$type": "dimension",
-      "$value": "0.25rem",
-      "$description": "4px"
-    },
-    "1-5": {
-      "$type": "dimension",
-      "$value": "0.375rem",
-      "$description": "6px"
-    },
-    "2": {
-      "$type": "dimension",
-      "$value": "0.5rem",
-      "$description": "8px"
-    },
-    "2-5": {
-      "$type": "dimension",
-      "$value": "0.625rem",
-      "$description": "10px"
-    },
-    "3": {
-      "$type": "dimension",
-      "$value": "0.75rem",
-      "$description": "12px"
-    },
-    "3-5": {
-      "$type": "dimension",
-      "$value": "0.875rem",
-      "$description": "14px"
-    },
-    "4": {
-      "$type": "dimension",
-      "$value": "1rem",
-      "$description": "16px"
-    },
-    "5": {
-      "$type": "dimension",
-      "$value": "1.25rem",
-      "$description": "20px"
-    },
-    "6": {
-      "$type": "dimension",
-      "$value": "1.5rem",
-      "$description": "24px"
-    },
-    "7": {
-      "$type": "dimension",
-      "$value": "1.75rem",
-      "$description": "28px"
-    },
-    "8": {
-      "$type": "dimension",
-      "$value": "2rem",
-      "$description": "32px"
-    },
-    "10": {
-      "$type": "dimension",
-      "$value": "2.5rem",
-      "$description": "40px"
-    },
-    "12": {
-      "$type": "dimension",
-      "$value": "3rem",
-      "$description": "48px"
-    },
-    "16": {
-      "$type": "dimension",
-      "$value": "4rem",
-      "$description": "64px"
-    },
-    "20": {
-      "$type": "dimension",
-      "$value": "5rem",
-      "$description": "80px"
-    }
-  },
   "radius": {
     "$description": "Friendly and soft — not sharp, not overly pill-shaped",
     "none": {
@@ -716,6 +633,63 @@
         "$type": "color",
         "$value": "rgba(181, 69, 64, 0.3)",
         "$description": "Error state shadow"
+      },
+      "driftwood": {
+        "$type": "color",
+        "$value": "rgba(107, 93, 77, 0.15)",
+        "$description": "Translucent driftwood, for offset shadows on cream"
+      },
+      "driftwoodHover": {
+        "$type": "color",
+        "$value": "rgba(107, 93, 77, 0.2)",
+        "$description": "A step darker, for the lifted state"
+      },
+      "driftwoodDeep": {
+        "$type": "color",
+        "$value": "rgba(107, 93, 77, 0.25)",
+        "$description": "For dialogs, which sit above everything"
+      },
+      "walnut": {
+        "$type": "color",
+        "$value": "rgba(61, 50, 41, 0.15)",
+        "$description": "Translucent walnut, for the inset shadow inside fields"
+      }
+    },
+    "layered": {
+      "$description": "Layered surface shadows: soft drop shadows with a top highlight, so cards feel like physical objects",
+      "flat": {
+        "$type": "shadow",
+        "$value": "0 1px 2px rgba(61, 50, 41, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.6)"
+      },
+      "raised": {
+        "$type": "shadow",
+        "$value": "0 2px 6px rgba(61, 50, 41, 0.08), 0 6px 16px rgba(61, 50, 41, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.8)"
+      },
+      "lifted": {
+        "$type": "shadow",
+        "$value": "0 4px 12px rgba(61, 50, 41, 0.1), 0 12px 28px rgba(61, 50, 41, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9)"
+      },
+      "pressed": {
+        "$type": "shadow",
+        "$value": "0 1px 3px rgba(61, 50, 41, 0.1), 0 3px 8px rgba(61, 50, 41, 0.06), inset 0 1px 2px rgba(61, 50, 41, 0.04)"
+      },
+      "focused": {
+        "$type": "shadow",
+        "$value": "0 2px 6px rgba(61, 50, 41, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8)",
+        "$description": "Sits under the focus glow"
+      },
+      "sunlit": {
+        "$type": "shadow",
+        "$value": "0 2px 8px rgba(139, 69, 19, 0.08), 0 8px 24px rgba(139, 69, 19, 0.06), 0 0 20px rgba(197, 67, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.9)"
+      },
+      "sunlitLifted": {
+        "$type": "shadow",
+        "$value": "0 4px 12px rgba(139, 69, 19, 0.12), 0 12px 32px rgba(139, 69, 19, 0.08), 0 0 28px rgba(197, 67, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 1)"
+      },
+      "sunlitFocused": {
+        "$type": "shadow",
+        "$value": "0 2px 8px rgba(139, 69, 19, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9)",
+        "$description": "Sits under the focus glow"
       }
     }
   },
@@ -769,42 +743,22 @@
     "easing": {
       "gentle": {
         "$type": "cubicBezier",
-        "$value": [
-          0.4,
-          0,
-          0.2,
-          1
-        ],
+        "$value": [0.4, 0, 0.2, 1],
         "$description": "Default — smooth and natural"
       },
       "out": {
         "$type": "cubicBezier",
-        "$value": [
-          0,
-          0,
-          0.2,
-          1
-        ],
+        "$value": [0, 0, 0.2, 1],
         "$description": "Enters and reveals"
       },
       "in": {
         "$type": "cubicBezier",
-        "$value": [
-          0.4,
-          0,
-          1,
-          1
-        ],
+        "$value": [0.4, 0, 1, 1],
         "$description": "Exits"
       },
       "playful": {
         "$type": "cubicBezier",
-        "$value": [
-          0.34,
-          1.3,
-          0.64,
-          1
-        ],
+        "$value": [0.34, 1.3, 0.64, 1],
         "$description": "Celebrations — slight overshoot"
       }
     }
@@ -830,81 +784,5 @@
         "$description": "Signature chunky frame for controls and feedback"
       }
     }
-  },
-  "size": {
-    "$description": "Fixed layout sizes: content widths and viewport breakpoints",
-    "container": {
-      "$description": "Content max-widths",
-      "sm": {
-        "$type": "dimension",
-        "$value": "640px"
-      },
-      "md": {
-        "$type": "dimension",
-        "$value": "768px"
-      },
-      "lg": {
-        "$type": "dimension",
-        "$value": "1024px"
-      },
-      "xl": {
-        "$type": "dimension",
-        "$value": "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": {
-        "$type": "dimension",
-        "$value": "480px"
-      },
-      "sm": {
-        "$type": "dimension",
-        "$value": "640px"
-      },
-      "md": {
-        "$type": "dimension",
-        "$value": "768px"
-      },
-      "lg": {
-        "$type": "dimension",
-        "$value": "1024px"
-      }
-    }
-  },
-  "zIndex": {
-    "$description": "Z-index layering",
-    "0": {
-      "$type": "number",
-      "$value": 0
-    },
-    "10": {
-      "$type": "number",
-      "$value": 10
-    },
-    "20": {
-      "$type": "number",
-      "$value": 20
-    },
-    "dropdown": {
-      "$type": "number",
-      "$value": 1000
-    },
-    "sticky": {
-      "$type": "number",
-      "$value": 1100
-    },
-    "modal": {
-      "$type": "number",
-      "$value": 1200
-    },
-    "popover": {
-      "$type": "number",
-      "$value": 1300
-    },
-    "tooltip": {
-      "$type": "number",
-      "$value": 1400
-    }
   }
 }