@orange-halo/tokens 1.0.0

package/tokens/component.tokens.json

@@ -0,0 +1,184 @@
+{
+  "$description": "Component Design Tokens — Orange Halo Visual DNA applied. Each component has personality knobs.",
+  "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}" },
+      "borderWidth": { "$type": "dimension", "$value": "2.5px" },
+      "transitionDuration": { "$type": "duration", "$value": "{motion.snappy}" },
+      "transitionEasing": { "$type": "cubicBezier", "$value": "{motion.easePlayful}" }
+    },
+    "size": {
+      "sm": {
+        "fontSize": { "$type": "dimension", "$value": "{font.size.sm}" },
+        "paddingX": { "$type": "dimension", "$value": "{spacing.3}" },
+        "paddingY": { "$type": "dimension", "$value": "{spacing.2}" },
+        "minHeight": { "$type": "dimension", "$value": "36px" },
+        "gap": { "$type": "dimension", "$value": "{spacing.1-5}" }
+      },
+      "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" },
+        "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" },
+        "gap": { "$type": "dimension", "$value": "{spacing.2-5}" }
+      }
+    },
+    "variant": {
+      "primary": {
+        "$description": "Primary — warm orange, chunky tactile shadow",
+        "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}" },
+        "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}" },
+        "backgroundActive": { "$type": "color", "$value": "{color.surface.activePressed}" },
+        "color": { "$type": "color", "$value": "{color.text.primary}" },
+        "borderColor": { "$type": "color", "$value": "{color.border.emphasis}" },
+        "shadowColor": { "$type": "color", "$value": "{shadow.secondary}" }
+      },
+      "accent": {
+        "$description": "Accent — blue, modern counterbalance",
+        "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}" },
+        "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" },
+      "ringColor": { "$type": "color", "$value": "{focus.ringColor}" },
+      "glowColor": { "$type": "color", "$value": "{focus.glowColor}" }
+    }
+  },
+  "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}" },
+      "borderWidth": { "$type": "dimension", "$value": "2.5px" },
+      "transitionDuration": { "$type": "duration", "$value": "{motion.snappy}" },
+      "transitionEasing": { "$type": "cubicBezier", "$value": "{motion.easeGentle}" }
+    },
+    "size": {
+      "md": {
+        "paddingX": { "$type": "dimension", "$value": "{spacing.4}" },
+        "paddingY": { "$type": "dimension", "$value": "{spacing.3}" },
+        "minHeight": { "$type": "dimension", "$value": "48px" }
+      }
+    },
+    "state": {
+      "default": {
+        "background": { "$type": "color", "$value": "{color.surface.base}" },
+        "borderColor": { "$type": "color", "$value": "{color.border.emphasis}", "$description": "WCAG 3:1 contrast for UI elements" },
+        "color": { "$type": "color", "$value": "{color.text.primary}" },
+        "placeholderColor": { "$type": "color", "$value": "{color.text.secondary}", "$description": "WCAG readable placeholder" },
+        "shadowColor": { "$type": "color", "$value": "{shadow.secondary}" }
+      },
+      "hover": {
+        "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}" }
+      },
+      "error": {
+        "borderColor": { "$type": "color", "$value": "{color.feedback.error}" },
+        "background": { "$type": "color", "$value": "{color.feedback.errorSubtle}" },
+        "shadowColor": { "$type": "color", "$value": "{shadow.error}" }
+      }
+    }
+  },
+  "card": {
+    "$description": "Card — raised surface with visible frame",
+    "base": {
+      "background": { "$type": "color", "$value": "{color.surface.raised}" },
+      "borderRadius": { "$type": "dimension", "$value": "{shape.container}" },
+      "borderWidth": { "$type": "dimension", "$value": "{border.width.1}" },
+      "borderColor": { "$type": "color", "$value": "{color.border.default}" },
+      "shadow": { "$type": "shadow", "$value": "{elevation.soft}" },
+      "padding": { "$type": "dimension", "$value": "{spacing.5}" }
+    },
+    "interactive": {
+      "$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}" },
+      "borderColorHover": { "$type": "color", "$value": "{color.border.brand}" },
+      "shadowHover": { "$type": "shadow", "$value": "{elevation.medium}" }
+    },
+    "sunlit": {
+      "$description": "Sunlit card — featured with gradient",
+      "background": { "$type": "string", "$value": "{gradient.sunlit}" },
+      "borderColor": { "$type": "color", "$value": "{color.border.brand}" },
+      "shadow": { "$type": "shadow", "$value": "{elevation.medium}" }
+    }
+  },
+  "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}" },
+      "paddingX": { "$type": "dimension", "$value": "{spacing.2-5}" },
+      "paddingY": { "$type": "dimension", "$value": "{spacing.1}" }
+    },
+    "variant": {
+      "brand": {
+        "background": { "$type": "color", "$value": "{color.brand.primarySubtle}" },
+        "color": { "$type": "color", "$value": "{color.brand.primary}" }
+      },
+      "accent": {
+        "background": { "$type": "color", "$value": "{color.accent.subtle}" },
+        "color": { "$type": "color", "$value": "{color.accent.default}" }
+      },
+      "success": {
+        "background": { "$type": "color", "$value": "{color.feedback.successSubtle}" },
+        "color": { "$type": "color", "$value": "{color.feedback.success}" }
+      },
+      "error": {
+        "background": { "$type": "color", "$value": "{color.feedback.errorSubtle}" },
+        "color": { "$type": "color", "$value": "{color.feedback.error}" }
+      },
+      "warning": {
+        "background": { "$type": "color", "$value": "{color.feedback.warningSubtle}" },
+        "color": { "$type": "color", "$value": "{color.feedback.warning}" }
+      },
+      "neutral": {
+        "background": { "$type": "color", "$value": "{color.warm.parchment}" },
+        "color": { "$type": "color", "$value": "{color.text.secondary}" }
+      }
+    }
+  },
+  "link": {
+    "$description": "Link — warm brand color",
+    "color": { "$type": "color", "$value": "{color.text.link}" },
+    "colorHover": { "$type": "color", "$value": "{color.text.linkHover}" },
+    "textDecoration": { "$type": "string", "$value": "underline" },
+    "textDecorationHover": { "$type": "string", "$value": "none" }
+  }
+}

package/tokens/global.tokens.json

@@ -0,0 +1,230 @@
+{
+  "$description": "Global Design Tokens — Orange Halo Visual DNA. Warm, playful, personal.",
+  "color": {
+    "$description": "Warm color palette with nostalgic character. No pure white, no blue-gray.",
+    "orange": {
+      "$description": "Primary brand orange — vibrant and accessible",
+      "50": { "$type": "color", "$value": "#FFF3E0" },
+      "100": { "$type": "color", "$value": "#FFE0B2" },
+      "200": { "$type": "color", "$value": "#FFCC80" },
+      "300": { "$type": "color", "$value": "#FFB74D" },
+      "400": { "$type": "color", "$value": "#FFA726" },
+      "500": { "$type": "color", "$value": "#FF9800" },
+      "600": { "$type": "color", "$value": "#FB8C00" },
+      "700": { "$type": "color", "$value": "#F57C00" },
+      "800": { "$type": "color", "$value": "#EF6C00" },
+      "900": { "$type": "color", "$value": "#C54300", "$description": "Primary brand — WCAG AA (4.5:1)" },
+      "950": { "$type": "color", "$value": "#9E3500", "$description": "Hover/active state — WCAG AA (7.2:1)" }
+    },
+    "honey": {
+      "$description": "Warm highlight — golden warmth for accents and feedback",
+      "50": { "$type": "color", "$value": "#FEFAEE" },
+      "100": { "$type": "color", "$value": "#FDF3D4" },
+      "200": { "$type": "color", "$value": "#FBE7A8" },
+      "300": { "$type": "color", "$value": "#F8D56F" },
+      "400": { "$type": "color", "$value": "#E8A838", "$description": "Signature honey" },
+      "500": { "$type": "color", "$value": "#D4922C" },
+      "600": { "$type": "color", "$value": "#B87A24" },
+      "700": { "$type": "color", "$value": "#8C5E1C", "$description": "WCAG AA (5.2:1)" },
+      "800": { "$type": "color", "$value": "#6B4815" }
+    },
+    "terracotta": {
+      "$description": "Deep accent — earthy depth for active states and emphasis",
+      "50": { "$type": "color", "$value": "#FBF5F0" },
+      "100": { "$type": "color", "$value": "#F5E8DE" },
+      "200": { "$type": "color", "$value": "#E8CDBF" },
+      "300": { "$type": "color", "$value": "#D4A88F" },
+      "400": { "$type": "color", "$value": "#BF8060" },
+      "500": { "$type": "color", "$value": "#A0522D", "$description": "Signature terracotta — WCAG AA (5.3:1)" },
+      "600": { "$type": "color", "$value": "#8B4726" },
+      "700": { "$type": "color", "$value": "#6F3920" },
+      "800": { "$type": "color", "$value": "#5A2F1A" },
+      "900": { "$type": "color", "$value": "#452414" }
+    },
+    "eucalyptus": {
+      "$description": "Nostalgic accent — muted teal, the retro counterbalance",
+      "50": { "$type": "color", "$value": "#F0F6F6" },
+      "100": { "$type": "color", "$value": "#E0EBEB" },
+      "200": { "$type": "color", "$value": "#C2D7D7" },
+      "300": { "$type": "color", "$value": "#9EBEBE" },
+      "400": { "$type": "color", "$value": "#7AA3A4" },
+      "500": { "$type": "color", "$value": "#5F8A8B", "$description": "Signature eucalyptus — WCAG AA (4.5:1)" },
+      "600": { "$type": "color", "$value": "#4D7172" },
+      "700": { "$type": "color", "$value": "#3F5C5D", "$description": "WCAG AA (6.2:1)" },
+      "800": { "$type": "color", "$value": "#344A4B" },
+      "900": { "$type": "color", "$value": "#2A3C3D" }
+    },
+    "warm": {
+      "$description": "Warm neutral scale — cream to walnut, no blue-gray",
+      "cream": { "$type": "color", "$value": "#FAF7F2", "$description": "Base background — warm off-white" },
+      "linen": { "$type": "color", "$value": "#F5F0E8", "$description": "Raised surface" },
+      "parchment": { "$type": "color", "$value": "#EDE8DF", "$description": "Inset surface" },
+      "sand": { "$type": "color", "$value": "#E2DCD2", "$description": "Borders, dividers" },
+      "dune": { "$type": "color", "$value": "#C9C1B4", "$description": "Muted elements" },
+      "driftwood": { "$type": "color", "$value": "#6B5D4D", "$description": "Secondary text — WCAG AA (4.8:1)" },
+      "bark": { "$type": "color", "$value": "#52463A", "$description": "Emphasis text (6.8:1)" },
+      "walnut": { "$type": "color", "$value": "#3D3229", "$description": "Primary text — WCAG AA (8.2:1)" }
+    },
+    "green": {
+      "$description": "Success — warm-tinted green",
+      "50": { "$type": "color", "$value": "#F0F7F1" },
+      "100": { "$type": "color", "$value": "#D9EDD9" },
+      "500": { "$type": "color", "$value": "#5A9A5C" },
+      "600": { "$type": "color", "$value": "#4A8A4C", "$description": "WCAG AA (4.5:1)" },
+      "700": { "$type": "color", "$value": "#3D7340" }
+    },
+    "red": {
+      "$description": "Error — warm-tinted red",
+      "50": { "$type": "color", "$value": "#FDF4F3" },
+      "100": { "$type": "color", "$value": "#F9E0DC" },
+      "500": { "$type": "color", "$value": "#C75450" },
+      "600": { "$type": "color", "$value": "#B54540", "$description": "WCAG AA (4.8:1)" },
+      "700": { "$type": "color", "$value": "#943836", "$description": "Hover/active state" }
+    },
+    "blue": {
+      "$description": "Blue accent — modern counterbalance for CTAs",
+      "50": { "$type": "color", "$value": "#EEF4F9" },
+      "100": { "$type": "color", "$value": "#D6E4F0" },
+      "200": { "$type": "color", "$value": "#A0B4C8" },
+      "300": { "$type": "color", "$value": "#7A9AB8" },
+      "400": { "$type": "color", "$value": "#5A82A8" },
+      "500": { "$type": "color", "$value": "#3D5A80", "$description": "Signature blue — WCAG AA (5.5:1)" },
+      "600": { "$type": "color", "$value": "#354F70", "$description": "Hover state" },
+      "700": { "$type": "color", "$value": "#2E4460", "$description": "Active state" },
+      "800": { "$type": "color", "$value": "#253850" }
+    },
+    "white": { "$type": "color", "$value": "#FFFFFF", "$description": "Pure white for inputs/highlights" }
+  },
+  "font": {
+    "family": {
+      "$description": "Bricolage Grotesque — playful, crafted, warm",
+      "sans": { "$type": "fontFamily", "$value": "'Bricolage Grotesque', 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif" },
+      "display": { "$type": "fontFamily", "$value": "'Bricolage Grotesque', 'General Sans', sans-serif" },
+      "mono": { "$type": "fontFamily", "$value": "'JetBrains Mono', 'Fira Code', ui-monospace, monospace" }
+    },
+    "size": {
+      "$description": "Slightly expressive type scale",
+      "xs": { "$type": "dimension", "$value": "0.75rem", "$description": "12px" },
+      "sm": { "$type": "dimension", "$value": "0.875rem", "$description": "14px" },
+      "base": { "$type": "dimension", "$value": "1rem", "$description": "16px" },
+      "lg": { "$type": "dimension", "$value": "1.125rem", "$description": "18px" },
+      "xl": { "$type": "dimension", "$value": "1.25rem", "$description": "20px" },
+      "2xl": { "$type": "dimension", "$value": "1.625rem", "$description": "26px" },
+      "3xl": { "$type": "dimension", "$value": "2rem", "$description": "32px" },
+      "4xl": { "$type": "dimension", "$value": "2.625rem", "$description": "42px" },
+      "5xl": { "$type": "dimension", "$value": "3.25rem", "$description": "52px" }
+    },
+    "weight": {
+      "$description": "Font weights for hierarchy",
+      "normal": { "$type": "fontWeight", "$value": "400" },
+      "medium": { "$type": "fontWeight", "$value": "500" },
+      "semibold": { "$type": "fontWeight", "$value": "600" },
+      "bold": { "$type": "fontWeight", "$value": "700" }
+    },
+    "lineHeight": {
+      "$description": "Generous line heights for readability",
+      "none": { "$type": "number", "$value": 1 },
+      "tight": { "$type": "number", "$value": 1.25 },
+      "snug": { "$type": "number", "$value": 1.35 },
+      "normal": { "$type": "number", "$value": 1.5 },
+      "relaxed": { "$type": "number", "$value": 1.65 },
+      "loose": { "$type": "number", "$value": 1.8 }
+    },
+    "letterSpacing": {
+      "$description": "Letter spacing — loose for small, tight for display",
+      "tighter": { "$type": "dimension", "$value": "-0.02em" },
+      "tight": { "$type": "dimension", "$value": "-0.01em" },
+      "normal": { "$type": "dimension", "$value": "0" },
+      "wide": { "$type": "dimension", "$value": "0.01em" },
+      "wider": { "$type": "dimension", "$value": "0.02em" }
+    }
+  },
+  "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": { "$type": "dimension", "$value": "0" },
+    "xs": { "$type": "dimension", "$value": "4px", "$description": "Small details, chips" },
+    "sm": { "$type": "dimension", "$value": "6px", "$description": "Buttons, inputs" },
+    "md": { "$type": "dimension", "$value": "10px", "$description": "Cards, panels" },
+    "lg": { "$type": "dimension", "$value": "14px", "$description": "Modals, large containers" },
+    "xl": { "$type": "dimension", "$value": "20px", "$description": "Hero elements" },
+    "full": { "$type": "dimension", "$value": "9999px", "$description": "Avatars, pills" }
+  },
+  "shadow": {
+    "$description": "Warm, low-contrast shadows — never harsh",
+    "none": { "$type": "shadow", "$value": "none" },
+    "soft": { "$type": "shadow", "$value": "0 2px 8px rgba(61, 50, 41, 0.06), 0 1px 3px rgba(61, 50, 41, 0.08)", "$description": "Cards, raised elements" },
+    "medium": { "$type": "shadow", "$value": "0 4px 16px rgba(61, 50, 41, 0.08), 0 2px 6px rgba(61, 50, 41, 0.06)", "$description": "Dropdowns, popovers" },
+    "strong": { "$type": "shadow", "$value": "0 8px 24px rgba(61, 50, 41, 0.10), 0 4px 8px rgba(61, 50, 41, 0.06)", "$description": "Modals, dialogs" },
+    "glow": { "$type": "shadow", "$value": "0 0 0 3px rgba(197, 67, 0, 0.2), 0 0 12px rgba(197, 67, 0, 0.1)", "$description": "Focus ring — warm and friendly" },
+    "inset": { "$type": "shadow", "$value": "inset 0 1px 3px rgba(61, 50, 41, 0.08)", "$description": "Inputs, wells" },
+    "chunky": {
+      "$description": "Offset chunky shadows for playful tactile feel",
+      "primary": { "$type": "color", "$value": "#E8C4A0", "$description": "Warm peach for primary buttons" },
+      "secondary": { "$type": "color", "$value": "#D4C4B0", "$description": "Neutral tan for secondary/form elements" },
+      "accent": { "$type": "color", "$value": "#A0B4C8", "$description": "Cool blue-gray for accent buttons" },
+      "error": { "$type": "color", "$value": "rgba(181, 69, 64, 0.3)", "$description": "Error state shadow" }
+    }
+  },
+  "gradient": {
+    "$description": "Soft, nostalgic gradients — never high-contrast or flashy",
+    "sunlit": { "$type": "string", "$value": "linear-gradient(180deg, #FAF7F2 0%, #F5EFE4 100%)", "$description": "Gentle warmth for surfaces" },
+    "warm": { "$type": "string", "$value": "linear-gradient(135deg, #C54300 0%, #FF9800 100%)", "$description": "Brand emphasis" },
+    "nostalgic": { "$type": "string", "$value": "linear-gradient(180deg, #F5F0E8 0%, #EDE8DF 100%)", "$description": "Subtle retro depth" }
+  },
+  "motion": {
+    "$description": "Subtle and playful — relaxed easing, never snappy",
+    "duration": {
+      "quick": { "$type": "duration", "$value": "100ms", "$description": "Micro-interactions (color shifts)" },
+      "snappy": { "$type": "duration", "$value": "150ms", "$description": "Button/input transitions" },
+      "gentle": { "$type": "duration", "$value": "200ms", "$description": "Standard interactions (hover, focus)" },
+      "relaxed": { "$type": "duration", "$value": "300ms", "$description": "Larger transitions (panels)" },
+      "slow": { "$type": "duration", "$value": "400ms", "$description": "Emphasis animations" }
+    },
+    "easing": {
+      "gentle": { "$type": "cubicBezier", "$value": [0.4, 0, 0.2, 1], "$description": "Default — smooth and natural" },
+      "out": { "$type": "cubicBezier", "$value": [0, 0, 0.2, 1], "$description": "Enters and reveals" },
+      "in": { "$type": "cubicBezier", "$value": [0.4, 0, 1, 1], "$description": "Exits" },
+      "playful": { "$type": "cubicBezier", "$value": [0.34, 1.3, 0.64, 1], "$description": "Celebrations — slight overshoot" }
+    }
+  },
+  "border": {
+    "width": {
+      "$description": "Border widths",
+      "0": { "$type": "dimension", "$value": "0" },
+      "1": { "$type": "dimension", "$value": "1px" },
+      "2": { "$type": "dimension", "$value": "2px" }
+    }
+  },
+  "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 }
+  }
+}