@orange-halo/tokens 2.0.0 → 2.1.0

package/tokens/core/scales.tokens.json

@@ -0,0 +1,170 @@
+{
+  "$description": "Core scales shared by every brand: spacing, fixed sizes (content widths and breakpoints) and stacking order. Structural, so layouts behave the same in every brand.",
+  "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"
+    }
+  },
+  "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
+    }
+  }
+}

package/dist/themes/light.css

@@ -1,47 +0,0 @@
-/**
- * Orange Halo Light Theme
- * Auto-generated - do not edit directly
- * WCAG AA compliant color contrast ratios
- */
-
-:root, [data-theme='light'] {
-  --oh-color-brand-primary: #c54300;
-  --oh-color-brand-primary-hover: #9e3500;
-  --oh-color-brand-primary-active: #9e3500;
-  --oh-color-brand-primary-subtle: #fff3e0;
-  --oh-color-brand-primary-muted: #ffe0b2;
-  --oh-color-brand-highlight: #e8a838;
-  --oh-color-brand-highlight-subtle: #fdf3d4;
-  --oh-color-accent-default: #3d5a80;
-  --oh-color-accent-hover: #354f70;
-  --oh-color-accent-subtle: #eef4f9;
-  --oh-color-accent-muted: #d6e4f0;
-  --oh-color-feedback-success: #3d7340;
-  --oh-color-feedback-success-subtle: #f0f7f1;
-  --oh-color-feedback-error: #b54540;
-  --oh-color-feedback-error-subtle: #fdf4f3;
-  --oh-color-feedback-warning: #8c5e1c;
-  --oh-color-feedback-warning-subtle: #fefaee;
-  --oh-color-feedback-info: #3d5a80;
-  --oh-color-feedback-info-subtle: #eef4f9;
-  --oh-color-surface-base: #faf7f2;
-  --oh-color-surface-raised: #f5f0e8;
-  --oh-color-surface-sunlit: #faf7f2;
-  --oh-color-surface-inset: #ede8df;
-  --oh-color-surface-overlay: rgba(61, 50, 41, 0.4);
-  --oh-color-surface-disabled: #e2dcd2;
-  --oh-color-border-default: #e2dcd2;
-  --oh-color-border-subtle: #ede8df;
-  --oh-color-border-emphasis: #6b5d4d;
-  --oh-color-border-focus: #c54300;
-  --oh-color-border-brand: rgba(197, 67, 0, 0.25);
-  --oh-color-text-primary: #3d3229;
-  --oh-color-text-secondary: #6b5d4d;
-  --oh-color-text-disabled: #c9c1b4;
-  --oh-color-text-inverse: #faf7f2;
-  --oh-color-text-link: #c54300;
-  --oh-color-text-link-hover: #9e3500;
-  --oh-color-text-link-raised: #9e3500;
-  --oh-focus-ring-color: #c54300;
-  --oh-focus-glow-color: rgba(197, 67, 0, 0.15);
-}