@junoput01/junoui 0.2.0

package/dist/css/juno-tokens.css

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