@orange-halo/tokens 1.0.0

package/dist/tokens.json

@@ -0,0 +1,667 @@
+{
+  "$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.",
+    "orange": {
+      "50": "#fff3e0",
+      "100": "#ffe0b2",
+      "200": "#ffcc80",
+      "300": "#ffb74d",
+      "400": "#ffa726",
+      "500": "#ff9800",
+      "600": "#fb8c00",
+      "700": "#f57c00",
+      "800": "#ef6c00",
+      "900": "#c54300",
+      "950": "#9e3500",
+      "$description": "Primary brand orange — vibrant and accessible"
+    },
+    "honey": {
+      "50": "#fefaee",
+      "100": "#fdf3d4",
+      "200": "#fbe7a8",
+      "300": "#f8d56f",
+      "400": "#e8a838",
+      "500": "#d4922c",
+      "600": "#b87a24",
+      "700": "#8c5e1c",
+      "800": "#6b4815",
+      "$description": "Warm highlight — golden warmth for accents and feedback"
+    },
+    "terracotta": {
+      "50": "#fbf5f0",
+      "100": "#f5e8de",
+      "200": "#e8cdbf",
+      "300": "#d4a88f",
+      "400": "#bf8060",
+      "500": "#a0522d",
+      "600": "#8b4726",
+      "700": "#6f3920",
+      "800": "#5a2f1a",
+      "900": "#452414",
+      "$description": "Deep accent — earthy depth for active states and emphasis"
+    },
+    "eucalyptus": {
+      "50": "#f0f6f6",
+      "100": "#e0ebeb",
+      "200": "#c2d7d7",
+      "300": "#9ebebe",
+      "400": "#7aa3a4",
+      "500": "#5f8a8b",
+      "600": "#4d7172",
+      "700": "#3f5c5d",
+      "800": "#344a4b",
+      "900": "#2a3c3d",
+      "$description": "Nostalgic accent — muted teal, the retro counterbalance"
+    },
+    "warm": {
+      "$description": "Warm neutral scale — cream to walnut, no blue-gray",
+      "cream": "#faf7f2",
+      "linen": "#f5f0e8",
+      "parchment": "#ede8df",
+      "sand": "#e2dcd2",
+      "dune": "#c9c1b4",
+      "driftwood": "#6b5d4d",
+      "bark": "#52463a",
+      "walnut": "#3d3229"
+    },
+    "green": {
+      "50": "#f0f7f1",
+      "100": "#d9edd9",
+      "500": "#5a9a5c",
+      "600": "#4a8a4c",
+      "700": "#3d7340",
+      "$description": "Success — warm-tinted green"
+    },
+    "red": {
+      "50": "#fdf4f3",
+      "100": "#f9e0dc",
+      "500": "#c75450",
+      "600": "#b54540",
+      "700": "#943836",
+      "$description": "Error — warm-tinted red"
+    },
+    "blue": {
+      "50": "#eef4f9",
+      "100": "#d6e4f0",
+      "200": "#a0b4c8",
+      "300": "#7a9ab8",
+      "400": "#5a82a8",
+      "500": "#3d5a80",
+      "600": "#354f70",
+      "700": "#2e4460",
+      "800": "#253850",
+      "$description": "Blue accent — modern counterbalance for CTAs"
+    },
+    "white": "#ffffff",
+    "brand": {
+      "$description": "Brand colors — Orange Halo warmth",
+      "primary": "#c54300",
+      "primaryHover": "#9e3500",
+      "primaryActive": "#9e3500",
+      "primarySubtle": "#fff3e0",
+      "primaryMuted": "#ffe0b2",
+      "highlight": "#e8a838",
+      "highlightSubtle": "#fdf3d4"
+    },
+    "accent": {
+      "$description": "Blue accent — modern counterbalance for CTAs",
+      "default": "#3d5a80",
+      "hover": "#354f70",
+      "active": "#2e4460",
+      "subtle": "#eef4f9",
+      "muted": "#d6e4f0",
+      "shadow": "#a0b4c8"
+    },
+    "feedback": {
+      "$description": "Feedback colors — warm-tinted",
+      "success": "#4a8a4c",
+      "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"
+    },
+    "surface": {
+      "$description": "Surface system — designed surfaces, not flat planes",
+      "base": "#faf7f2",
+      "raised": "#f5f0e8",
+      "sunlit": "#faf7f2",
+      "inset": "#ede8df",
+      "white": "#ffffff",
+      "overlay": "#3d322966",
+      "disabled": "#e2dcd2",
+      "hover": "#fff4e6",
+      "activePressed": "#f0ebe3"
+    },
+    "border": {
+      "$description": "Border colors — visible and intentional",
+      "default": "#e2dcd2",
+      "subtle": "#ede8df",
+      "emphasis": "#6b5d4d",
+      "hover": "#8b4726",
+      "focus": "#c54300",
+      "focusInner": "#c54300",
+      "disabled": "#ede8df",
+      "brand": "#c5430040"
+    },
+    "text": {
+      "$description": "Text colors — calm and readable, not stark",
+      "primary": "#3d3229",
+      "secondary": "#6b5d4d",
+      "disabled": "#c9c1b4",
+      "inverse": "#faf7f2",
+      "link": "#c54300",
+      "linkHover": "#9e3500",
+      "brand": "#c54300",
+      "onBrand": "#ffffff",
+      "onAccent": "#ffffff"
+    }
+  },
+  "font": {
+    "family": {
+      "$description": "Bricolage Grotesque — playful, crafted, warm",
+      "sans": "'Bricolage Grotesque', 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif",
+      "display": "'Bricolage Grotesque', 'General Sans', sans-serif",
+      "mono": "'JetBrains Mono', 'Fira Code', ui-monospace, monospace"
+    },
+    "size": {
+      "$description": "Slightly expressive type scale",
+      "xs": "0.75rem",
+      "sm": "0.875rem",
+      "base": "1rem",
+      "lg": "1.125rem",
+      "xl": "1.25rem",
+      "2xl": "1.625rem",
+      "3xl": "2rem",
+      "4xl": "2.625rem",
+      "5xl": "3.25rem"
+    },
+    "weight": {
+      "$description": "Font weights for hierarchy",
+      "normal": "400",
+      "medium": "500",
+      "semibold": "600",
+      "bold": "700"
+    },
+    "lineHeight": {
+      "$description": "Generous line heights for readability",
+      "none": 1,
+      "tight": 1.25,
+      "snug": 1.35,
+      "normal": 1.5,
+      "relaxed": 1.65,
+      "loose": 1.8
+    },
+    "letterSpacing": {
+      "$description": "Letter spacing — loose for small, tight for display",
+      "tighter": "-0.02em",
+      "tight": "-0.01em",
+      "normal": "0",
+      "wide": "0.01em",
+      "wider": "0.02em"
+    }
+  },
+  "spacing": {
+    "0": "0",
+    "1": "0.25rem",
+    "2": "0.5rem",
+    "3": "0.75rem",
+    "4": "1rem",
+    "5": "1.25rem",
+    "6": "1.5rem",
+    "7": "1.75rem",
+    "8": "2rem",
+    "10": "2.5rem",
+    "12": "3rem",
+    "16": "4rem",
+    "20": "5rem",
+    "$description": "Generous spacing — breathing room, not dense",
+    "px": "1px",
+    "0-5": "0.125rem",
+    "1-5": "0.375rem",
+    "2-5": "0.625rem",
+    "3-5": "0.875rem",
+    "layout": {
+      "$description": "Generous layout spacing",
+      "page": "1.5rem",
+      "section": "3rem",
+      "stack": "1.25rem",
+      "inline": "1rem"
+    },
+    "component": {
+      "$description": "Component-level spacing",
+      "xs": "0.375rem",
+      "sm": "0.625rem",
+      "md": "0.875rem",
+      "lg": "1.25rem",
+      "xl": "1.75rem"
+    }
+  },
+  "radius": {
+    "$description": "Friendly and soft — not sharp, not overly pill-shaped",
+    "none": "0",
+    "xs": "4px",
+    "sm": "6px",
+    "md": "10px",
+    "lg": "14px",
+    "xl": "20px",
+    "full": "9999px"
+  },
+  "shadow": {
+    "$description": "Chunky offset shadows for playful tactile feel",
+    "none": "none",
+    "soft": "0 2px 8px rgba(61, 50, 41, 0.06), 0 1px 3px rgba(61, 50, 41, 0.08)",
+    "medium": "0 4px 16px rgba(61, 50, 41, 0.08), 0 2px 6px rgba(61, 50, 41, 0.06)",
+    "strong": "0 8px 24px rgba(61, 50, 41, 0.10), 0 4px 8px rgba(61, 50, 41, 0.06)",
+    "glow": "0 0 0 3px rgba(197, 67, 0, 0.2), 0 0 12px rgba(197, 67, 0, 0.1)",
+    "inset": "inset 0 1px 3px rgba(61, 50, 41, 0.08)",
+    "chunky": {
+      "$description": "Offset chunky shadows for playful tactile feel",
+      "primary": "#e8c4a0",
+      "secondary": "#d4c4b0",
+      "accent": "#a0b4c8",
+      "error": "#b545404d"
+    },
+    "primary": "#e8c4a0",
+    "secondary": "#d4c4b0",
+    "accent": "#a0b4c8",
+    "error": "#b545404d"
+  },
+  "gradient": {
+    "$description": "Soft, nostalgic gradients — never high-contrast or flashy",
+    "sunlit": "linear-gradient(180deg, #FAF7F2 0%, #F5EFE4 100%)",
+    "warm": "linear-gradient(135deg, #C54300 0%, #FF9800 100%)",
+    "nostalgic": "linear-gradient(180deg, #F5F0E8 0%, #EDE8DF 100%)"
+  },
+  "motion": {
+    "$description": "Relaxed, playful motion",
+    "duration": {
+      "quick": "100ms",
+      "snappy": "150ms",
+      "gentle": "200ms",
+      "relaxed": "300ms",
+      "slow": "400ms"
+    },
+    "easing": {
+      "gentle": [
+        0.4,
+        0,
+        0.2,
+        1
+      ],
+      "out": [
+        0,
+        0,
+        0.2,
+        1
+      ],
+      "in": [
+        0.4,
+        0,
+        1,
+        1
+      ],
+      "playful": [
+        0.34,
+        1.3,
+        0.64,
+        1
+      ]
+    },
+    "quick": "100ms",
+    "snappy": "150ms",
+    "gentle": "200ms",
+    "relaxed": "300ms",
+    "slow": "400ms",
+    "easeGentle": [
+      0.4,
+      0,
+      0.2,
+      1
+    ],
+    "easeOut": [
+      0,
+      0,
+      0.2,
+      1
+    ],
+    "easePlayful": [
+      0.34,
+      1.3,
+      0.64,
+      1
+    ]
+  },
+  "border": {
+    "width": {
+      "0": "0",
+      "1": "1px",
+      "2": "2px",
+      "$description": "Border widths"
+    }
+  },
+  "zIndex": {
+    "0": 0,
+    "10": 10,
+    "20": 20,
+    "$description": "Z-index layering",
+    "dropdown": 1000,
+    "sticky": 1100,
+    "modal": 1200,
+    "popover": 1300,
+    "tooltip": 1400
+  },
+  "typography": {
+    "$description": "Bricolage Grotesque — playful, crafted, warm",
+    "heading": {
+      "fontFamily": "'Bricolage Grotesque', 'General Sans', sans-serif",
+      "h1": {
+        "fontSize": "2.625rem",
+        "fontWeight": "700",
+        "lineHeight": 1.25,
+        "letterSpacing": "-0.02em"
+      },
+      "h2": {
+        "fontSize": "2rem",
+        "fontWeight": "600",
+        "lineHeight": 1.25,
+        "letterSpacing": "-0.01em"
+      },
+      "h3": {
+        "fontSize": "1.625rem",
+        "fontWeight": "600",
+        "lineHeight": 1.35,
+        "letterSpacing": "-0.01em"
+      },
+      "h4": {
+        "fontSize": "1.25rem",
+        "fontWeight": "500",
+        "lineHeight": 1.35,
+        "letterSpacing": "0"
+      },
+      "h5": {
+        "fontSize": "1.125rem",
+        "fontWeight": "500",
+        "lineHeight": 1.5
+      },
+      "h6": {
+        "fontSize": "1rem",
+        "fontWeight": "500",
+        "lineHeight": 1.5
+      }
+    },
+    "body": {
+      "fontFamily": "'Bricolage Grotesque', 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif",
+      "lg": {
+        "fontSize": "1.125rem",
+        "fontWeight": "400",
+        "lineHeight": 1.65
+      },
+      "base": {
+        "fontSize": "1rem",
+        "fontWeight": "400",
+        "lineHeight": 1.5
+      },
+      "sm": {
+        "fontSize": "0.875rem",
+        "fontWeight": "400",
+        "lineHeight": 1.5,
+        "letterSpacing": "0.01em"
+      },
+      "xs": {
+        "fontSize": "0.75rem",
+        "fontWeight": "400",
+        "lineHeight": 1.5,
+        "letterSpacing": "0.01em"
+      }
+    },
+    "label": {
+      "fontFamily": "'Bricolage Grotesque', 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif",
+      "base": {
+        "fontSize": "0.875rem",
+        "fontWeight": "500",
+        "lineHeight": 1.5,
+        "letterSpacing": "0.01em"
+      },
+      "sm": {
+        "fontSize": "0.75rem",
+        "fontWeight": "500",
+        "lineHeight": 1.5,
+        "letterSpacing": "0.01em"
+      }
+    },
+    "code": {
+      "fontFamily": "'JetBrains Mono', 'Fira Code', ui-monospace, monospace",
+      "fontSize": "0.875rem",
+      "lineHeight": 1.5
+    }
+  },
+  "shape": {
+    "$description": "Friendly soft corners",
+    "interactive": "6px",
+    "container": "10px",
+    "large": "14px",
+    "small": "4px",
+    "pill": "9999px"
+  },
+  "elevation": {
+    "$description": "Warm shadows with visible depth",
+    "none": "none",
+    "soft": "0 2px 8px rgba(61, 50, 41, 0.06), 0 1px 3px rgba(61, 50, 41, 0.08)",
+    "medium": "0 4px 16px rgba(61, 50, 41, 0.08), 0 2px 6px rgba(61, 50, 41, 0.06)",
+    "strong": "0 8px 24px rgba(61, 50, 41, 0.10), 0 4px 8px rgba(61, 50, 41, 0.06)",
+    "glow": "0 0 0 3px rgba(197, 67, 0, 0.2), 0 0 12px rgba(197, 67, 0, 0.1)",
+    "inset": "inset 0 1px 3px rgba(61, 50, 41, 0.08)"
+  },
+  "focus": {
+    "$description": "Warm, friendly focus ring",
+    "ringWidth": "3px",
+    "ringColor": "#c5430059",
+    "glowColor": "#c5430026"
+  },
+  "button": {
+    "$description": "Button — chunky, tactile, playful with offset shadows",
+    "base": {
+      "fontFamily": "'Bricolage Grotesque', 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif",
+      "fontWeight": "500",
+      "letterSpacing": "0.01em",
+      "borderRadius": "10px",
+      "borderWidth": "2.5px",
+      "transitionDuration": "150ms",
+      "transitionEasing": [
+        0.34,
+        1.3,
+        0.64,
+        1
+      ]
+    },
+    "size": {
+      "sm": {
+        "fontSize": "0.875rem",
+        "paddingX": "0.75rem",
+        "paddingY": "0.5rem",
+        "minHeight": "36px",
+        "gap": "0.375rem"
+      },
+      "md": {
+        "fontSize": "0.875rem",
+        "paddingX": "1rem",
+        "paddingY": "0.625rem",
+        "minHeight": "44px",
+        "gap": "0.5rem"
+      },
+      "lg": {
+        "fontSize": "1rem",
+        "paddingX": "1.5rem",
+        "paddingY": "0.875rem",
+        "minHeight": "52px",
+        "gap": "0.625rem"
+      }
+    },
+    "variant": {
+      "primary": {
+        "$description": "Primary — warm orange, chunky tactile shadow",
+        "background": "#c54300",
+        "backgroundHover": "#9e3500",
+        "backgroundActive": "#9e3500",
+        "color": "#ffffff",
+        "borderColor": "#c54300",
+        "shadowColor": "#e8c4a0"
+      },
+      "secondary": {
+        "$description": "Secondary — cream surface with emphasis border",
+        "background": "#faf7f2",
+        "backgroundHover": "#ffffff",
+        "backgroundActive": "#f0ebe3",
+        "color": "#3d3229",
+        "borderColor": "#6b5d4d",
+        "shadowColor": "#d4c4b0"
+      },
+      "accent": {
+        "$description": "Accent — blue, modern counterbalance",
+        "background": "#3d5a80",
+        "backgroundHover": "#354f70",
+        "backgroundActive": "#2e4460",
+        "color": "#ffffff",
+        "borderColor": "#3d5a80",
+        "shadowColor": "#a0b4c8"
+      }
+    },
+    "focus": {
+      "$description": "Warm, friendly focus ring",
+      "ringWidth": "3px",
+      "ringColor": "#c5430059",
+      "glowColor": "#c5430026"
+    }
+  },
+  "input": {
+    "$description": "Input — chunky border, inset shadow, tactile feel",
+    "base": {
+      "fontFamily": "'Bricolage Grotesque', 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif",
+      "fontSize": "1.125rem",
+      "lineHeight": 1.5,
+      "borderRadius": "10px",
+      "borderWidth": "2.5px",
+      "transitionDuration": "150ms",
+      "transitionEasing": [
+        0.4,
+        0,
+        0.2,
+        1
+      ]
+    },
+    "size": {
+      "md": {
+        "paddingX": "1rem",
+        "paddingY": "0.75rem",
+        "minHeight": "48px"
+      }
+    },
+    "state": {
+      "default": {
+        "background": "#faf7f2",
+        "borderColor": "#6b5d4d",
+        "color": "#3d3229",
+        "placeholderColor": "#6b5d4d",
+        "shadowColor": "#d4c4b0"
+      },
+      "hover": {
+        "borderColor": "#8b4726"
+      },
+      "focus": {
+        "background": "#ffffff",
+        "borderColor": "#c54300",
+        "focusRingColor": "#c54300"
+      },
+      "error": {
+        "borderColor": "#b54540",
+        "background": "#fdf4f3",
+        "shadowColor": "#b545404d"
+      }
+    }
+  },
+  "card": {
+    "$description": "Card — raised surface with visible frame",
+    "base": {
+      "background": "#f5f0e8",
+      "borderRadius": "10px",
+      "borderWidth": "1px",
+      "borderColor": "#e2dcd2",
+      "shadow": "0 2px 8px rgba(61, 50, 41, 0.06), 0 1px 3px rgba(61, 50, 41, 0.08)",
+      "padding": "1.25rem"
+    },
+    "interactive": {
+      "$description": "Interactive card — gentle warmth on hover",
+      "transitionDuration": "200ms",
+      "transitionEasing": [
+        0.4,
+        0,
+        0.2,
+        1
+      ],
+      "backgroundHover": "#faf7f2",
+      "borderColorHover": "#c5430040",
+      "shadowHover": "0 4px 16px rgba(61, 50, 41, 0.08), 0 2px 6px rgba(61, 50, 41, 0.06)"
+    },
+    "sunlit": {
+      "$description": "Sunlit card — featured with gradient",
+      "background": "linear-gradient(180deg, #FAF7F2 0%, #F5EFE4 100%)",
+      "borderColor": "#c5430040",
+      "shadow": "0 4px 16px rgba(61, 50, 41, 0.08), 0 2px 6px rgba(61, 50, 41, 0.06)"
+    }
+  },
+  "badge": {
+    "$description": "Badge — small status indicators",
+    "base": {
+      "fontFamily": "'Bricolage Grotesque', 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif",
+      "fontSize": "0.75rem",
+      "fontWeight": "500",
+      "letterSpacing": "0.01em",
+      "borderRadius": "9999px",
+      "paddingX": "0.625rem",
+      "paddingY": "0.25rem"
+    },
+    "variant": {
+      "brand": {
+        "background": "#fff3e0",
+        "color": "#c54300"
+      },
+      "accent": {
+        "background": "#eef4f9",
+        "color": "#3d5a80"
+      },
+      "success": {
+        "background": "#f0f7f1",
+        "color": "#4a8a4c"
+      },
+      "error": {
+        "background": "#fdf4f3",
+        "color": "#b54540"
+      },
+      "warning": {
+        "background": "#fefaee",
+        "color": "#8c5e1c"
+      },
+      "neutral": {
+        "background": "#ede8df",
+        "color": "#6b5d4d"
+      }
+    }
+  },
+  "link": {
+    "$description": "Link — warm brand color",
+    "color": "#c54300",
+    "colorHover": "#9e3500",
+    "textDecoration": "underline",
+    "textDecorationHover": "none"
+  }
+}

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@orange-halo/tokens",
+  "version": "1.0.0",
+  "description": "Design tokens for Orange Halo Design System (W3C Design Token Format)",
+  "type": "module",
+  "main": "./dist/tokens.js",
+  "exports": {
+    ".": {
+      "import": "./dist/tokens.js"
+    },
+    "./css": "./dist/tokens.css",
+    "./themes/light": "./dist/themes/light.css",
+    "./themes/dark": "./dist/themes/dark.css",
+    "./json": "./dist/tokens.json"
+  },
+  "files": [
+    "dist",
+    "tokens"
+  ],
+  "devDependencies": {
+    "style-dictionary": "^4.2.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "design-tokens",
+    "w3c",
+    "dtcg",
+    "css-custom-properties",
+    "style-dictionary"
+  ],
+  "scripts": {
+    "build": "node style-dictionary.config.js",
+    "dev": "node --watch style-dictionary.config.js",
+    "clean": "rm -rf dist",
+    "lint": "eslint tokens/",
+    "lint:fix": "eslint tokens/ --fix"
+  }
+}