@junoput01/junoui 0.2.0

package/dist/js/tokens.js

@@ -0,0 +1,244 @@
+// junoui design tokens — JS. Generated by Style Dictionary; do not edit.
+export const TOKENS = {
+  "colorblind": {
+    "dark": {
+      "nominal": "#78A9FF",
+      "active": "#BE95FF",
+      "target": "#FF7EB6",
+      "caution": "#F1C21B",
+      "warning": "#FF832B",
+      "data": "oklch(93% 0.008 85)",
+      "label": "oklch(63% 0.012 85)",
+      "muted": "oklch(48.5% 0.010 85)",
+      "border": "oklch(30% 0.012 85)",
+      "s0": "oklch(11% 0.010 85)",
+      "s1": "oklch(15% 0.012 85)",
+      "s2": "oklch(19% 0.012 85)",
+      "s3": "oklch(24% 0.012 85)",
+      "data-dim": "oklch(38% 0.010 85)",
+      "border-strong": "oklch(40% 0.012 85)"
+    },
+    "light": {
+      "nominal": "#0043CE",
+      "active": "#6929C4",
+      "target": "#9F1853",
+      "caution": "#7D4F00",
+      "warning": "#BA4300",
+      "data": "oklch(14% 0.008 85)",
+      "label": "oklch(42% 0.010 85)",
+      "muted": "oklch(63% 0.008 85)",
+      "border": "oklch(82% 0.010 85)",
+      "s0": "oklch(97% 0.008 85)",
+      "s1": "oklch(93% 0.010 85)",
+      "s2": "oklch(89% 0.010 85)",
+      "s3": "oklch(85% 0.010 85)",
+      "data-dim": "oklch(70% 0.008 85)",
+      "border-strong": "oklch(74% 0.010 85)"
+    }
+  },
+  "soft": {
+    "dark": {
+      "nominal": "oklch(63% 0.13 155)",
+      "active": "oklch(67% 0.12 210)",
+      "target": "oklch(58% 0.14 318)",
+      "caution": "oklch(72% 0.12 75)",
+      "warning": "oklch(62% 0.15 30)",
+      "data": "oklch(90% 0.008 88)",
+      "label": "oklch(63% 0.010 88)",
+      "muted": "oklch(48.5% 0.010 88)",
+      "border": "oklch(31% 0.010 88)",
+      "s0": "oklch(12% 0.012 88)",
+      "s1": "oklch(16% 0.012 88)",
+      "s2": "oklch(20% 0.012 88)",
+      "s3": "oklch(25% 0.012 88)",
+      "data-dim": "oklch(39% 0.010 88)",
+      "border-strong": "oklch(41% 0.010 88)"
+    },
+    "light": {
+      "nominal": "oklch(40% 0.11 155)",
+      "active": "oklch(44% 0.11 210)",
+      "target": "oklch(42% 0.12 318)",
+      "caution": "oklch(50% 0.12 75)",
+      "warning": "oklch(42% 0.13 30)",
+      "data": "oklch(14% 0.008 88)",
+      "label": "oklch(44% 0.010 88)",
+      "muted": "oklch(62.5% 0.008 88)",
+      "border": "oklch(84% 0.010 88)",
+      "s0": "oklch(96% 0.010 88)",
+      "s1": "oklch(92% 0.010 88)",
+      "s2": "oklch(88% 0.010 88)",
+      "s3": "oklch(84% 0.010 88)",
+      "data-dim": "oklch(69% 0.008 88)",
+      "border-strong": "oklch(76% 0.010 88)"
+    }
+  },
+  "standard": {
+    "dark": {
+      "nominal": "oklch(73% 0.22 148)",
+      "active": "oklch(76% 0.16 204)",
+      "target": "oklch(65% 0.26 324)",
+      "caution": "oklch(77% 0.17 73)",
+      "warning": "oklch(63% 0.22 28)",
+      "data": "oklch(93% 0.008 85)",
+      "label": "oklch(63% 0.012 85)",
+      "muted": "oklch(48.5% 0.010 85)",
+      "border": "oklch(30% 0.012 85)",
+      "s0": "oklch(11% 0.010 85)",
+      "s1": "oklch(15% 0.012 85)",
+      "s2": "oklch(19% 0.012 85)",
+      "s3": "oklch(24% 0.012 85)",
+      "data-dim": "oklch(38% 0.010 85)",
+      "border-strong": "oklch(40% 0.012 85)"
+    },
+    "light": {
+      "nominal": "oklch(42% 0.18 148)",
+      "active": "oklch(47% 0.16 220)",
+      "target": "oklch(45% 0.22 324)",
+      "caution": "oklch(50% 0.17 73)",
+      "warning": "oklch(42% 0.21 26)",
+      "data": "oklch(14% 0.008 85)",
+      "label": "oklch(42% 0.010 85)",
+      "muted": "oklch(63% 0.008 85)",
+      "border": "oklch(82% 0.010 85)",
+      "s0": "oklch(97% 0.008 85)",
+      "s1": "oklch(93% 0.010 85)",
+      "s2": "oklch(89% 0.010 85)",
+      "s3": "oklch(85% 0.010 85)",
+      "data-dim": "oklch(70% 0.008 85)",
+      "border-strong": "oklch(74% 0.010 85)"
+    }
+  }
+};
+
+export const CORE = {
+  "border": {
+    "width": {
+      "1": "1px",
+      "2": "2px",
+      "3": "3px"
+    }
+  },
+  "bp": {
+    "sm": "640px",
+    "md": "768px",
+    "lg": "1024px",
+    "xl": "1280px",
+    "2xl": "1536px"
+  },
+  "shadow": {
+    "1": "0 1px 2px rgb(0 0 0 / 0.30)",
+    "2": "0 4px 14px rgb(0 0 0 / 0.35)",
+    "3": "0 12px 32px rgb(0 0 0 / 0.50)"
+  },
+  "motion": {
+    "duration": {
+      "instant": "80ms",
+      "quick": "140ms",
+      "base": "200ms",
+      "deliberate": "300ms"
+    },
+    "ease": {
+      "decel": "cubic-bezier(0.2, 0.8, 0.2, 1)",
+      "accel": "cubic-bezier(0.4, 0, 1, 1)",
+      "standard": "cubic-bezier(0.2, 0.7, 0.3, 1)",
+      "spring": "cubic-bezier(0.2, 0.9, 0.3, 1.2)"
+    }
+  },
+  "opacity": {
+    "disabled": 0.45,
+    "muted": 0.65,
+    "scrim": 0.62
+  },
+  "radius": {
+    "2": "2px",
+    "3": "3px",
+    "4": "4px",
+    "5": "5px",
+    "8": "8px"
+  },
+  "size": {
+    "tap": {
+      "min": "24px",
+      "comfortable": "44px"
+    },
+    "dot": {
+      "sm": "8px",
+      "md": "10px"
+    }
+  },
+  "space": {
+    "2": "2px",
+    "4": "4px",
+    "8": "8px",
+    "10": "10px",
+    "12": "12px",
+    "16": "16px",
+    "20": "20px",
+    "24": "24px",
+    "28": "28px",
+    "32": "32px",
+    "40": "40px",
+    "56": "56px",
+    "72": "72px",
+    "96": "96px"
+  },
+  "font": {
+    "family": {
+      "sans": "'B612', sans-serif",
+      "mono": "'B612 Mono', monospace"
+    },
+    "weight": {
+      "light": 300,
+      "regular": 400,
+      "medium": 500,
+      "semibold": 600,
+      "bold": 700
+    },
+    "size": {
+      "10": "10px",
+      "11": "11px",
+      "12": "12px",
+      "13": "13px",
+      "14": "14px",
+      "16": "16px",
+      "18": "18px",
+      "20": "20px",
+      "28": "28px",
+      "32": "32px",
+      "36": "36px",
+      "38": "38px",
+      "48": "48px",
+      "52": "52px"
+    },
+    "lineHeight": {
+      "none": 1,
+      "tight": 1.1,
+      "snug": 1.2,
+      "normal": 1.4,
+      "relaxed": 1.5,
+      "loose": 1.7
+    },
+    "tracking": {
+      "tight": "0.02em",
+      "normal": "0.06em",
+      "label": "0.08em",
+      "wide": "0.12em",
+      "caps": "0.15em",
+      "wider": "0.2em",
+      "widest": "0.3em"
+    }
+  },
+  "z": {
+    "surface": 0,
+    "raised": 100,
+    "anchored": 2000,
+    "overlay": 4000,
+    "alert": 5000
+  }
+};
+
+export function getTokens(palette = 'standard', mode = 'dark') {
+  return (TOKENS[palette] || TOKENS.standard)[mode] || TOKENS.standard.dark;
+}
+
+export default { TOKENS, CORE, getTokens };