{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"arc-foundation","type":"registry:item","title":"Arc foundation","description":"Arc design tokens (color, surface, radius, shadow, accent, focus, light and dark themes), plus the shared motion presets. Install once per app.","categories":["foundation"],"dependencies":[],"registryDependencies":["https://uiarc.dev/r/arc-motion-tokens.json"],"files":[{"path":"registry/foundation.css","type":"registry:component","target":"@components/arc/foundation.css","content":":root {\n  color-scheme: light;\n  --neutral-0: oklch(100% 0 0);\n  --neutral-1: oklch(99% 0 0);\n  --neutral-2: oklch(97.8% 0 0);\n  --neutral-3: oklch(95.8% 0 0);\n  --neutral-4: oklch(91.5% 0 0);\n  --neutral-5: oklch(84% 0 0);\n  --neutral-6: oklch(72% 0 0);\n  --neutral-7: oklch(59% 0 0);\n  --neutral-8: oklch(46% 0 0);\n  --neutral-9: oklch(34% 0 0);\n  --neutral-10: oklch(23% 0 0);\n  --neutral-11: oklch(15% 0 0);\n  --background: var(--neutral-0);\n  --surface: var(--neutral-0);\n  --surface-raised: var(--neutral-0);\n  --surface-muted: var(--neutral-2);\n  --foreground: var(--neutral-11);\n  --text-secondary: var(--neutral-8);\n  --text-muted: var(--neutral-7);\n  --border: oklch(93.5% 0 0);\n  --border-subtle: oklch(96.5% 0 0);\n  --border-strong: oklch(82% 0 0);\n  --accent: oklch(33% 0 0);\n  --accent-strong: oklch(24% 0 0);\n  --accent-subtle: oklch(33% 0 0 / .1);\n  --accent-foreground: var(--background);\n  /* Selection controls (switch, checkbox, radio, slider). --control-on fills a chosen control; --control-glyph is the check or dot drawn on it;\n     thumbs stay white in both states so they always read against the track. Tuned per accent below so white thumbs hold on every hue. */\n  --control-on: oklch(23% 0 0);\n  --control-glyph: oklch(100% 0 0);\n  --control-track: oklch(89.5% 0 0);\n  --control-track-hover: oklch(86% 0 0);\n  --control-thumb: oklch(100% 0 0);\n  --control-thumb-on: oklch(100% 0 0);\n  --control-thumb-shadow: 0 0 0 .5px oklch(0% 0 0 / .07), 0 1px 2px oklch(0% 0 0 / .14), 0 2px 6px oklch(0% 0 0 / .06);\n  --control-on-subtle: color-mix(in oklab, var(--control-on) 10%, transparent);\n  /* Slider fills. Same as --control-on except neutral dark, where a mid grey keeps the white thumb distinct. */\n  --control-fill: var(--control-on);\n  /* Pointer focus draws no ring (product decision). --focus-ring is the halo a few fields drew for any input method, so it stays transparent.\n     Keyboard focus uses the outline at the end of this file; tune it with --focus-outline, --focus-outline-width and --focus-outline-offset. */\n  --focus-ring: transparent;\n  --success: oklch(49% .19 150);\n  --warning: oklch(58% .18 75);\n  --danger: oklch(54% .21 25);\n  --shadow-resting: 0 1px 2px oklch(0% 0 0 / .035);\n  --shadow-raised: 0 6px 18px oklch(0% 0 0 / .065), 0 1px 3px oklch(0% 0 0 / .035);\n  --shadow-floating: 0 20px 48px oklch(0% 0 0 / .105), 0 3px 10px oklch(0% 0 0 / .045);\n  /* Brand gradient: soft lavender to warm peach. Light enough for dark text (--arc-gradient-foreground, >12:1). */\n  --arc-gradient-from: oklch(90% .045 300);\n  --arc-gradient-to: oklch(92% .045 65);\n  --arc-gradient: linear-gradient(100deg, var(--arc-gradient-from), var(--arc-gradient-to));\n  --arc-gradient-foreground: oklch(22% .01 300);\n  /* Faint wash for backgrounds and tinted panels. */\n  --arc-gradient-soft: linear-gradient(135deg, oklch(97.5% .016 300), oklch(98% .016 65));\n  /* Hairline borders and rules. */\n  --arc-gradient-line: linear-gradient(100deg, oklch(83% .06 300), oklch(86% .06 65));\n  /* Text-safe stops for gradient text and small marks (>4.5:1 on the surface). */\n  --arc-gradient-ink: linear-gradient(100deg, oklch(47% .1 300), oklch(50% .09 55));\n  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;\n  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;\n  --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem;\n  --radius-control: 1.125rem; --radius-panel: 1.625rem; --radius-surface: 2.125rem; --radius-pill: 9999px;\n  --control-height-sm: 2.25rem; --control-height-md: 2.75rem; --control-height-lg: 3.125rem;\n  --font-display: var(--font-geist, \"Geist Variable\"), sans-serif;\n  --font-body: var(--font-inter, \"Inter Variable\"), sans-serif;\n  --text-xs: .75rem; --text-sm: .875rem; --text-base: 1rem; --text-lg: 1.125rem;\n  --text-xl: 1.375rem; --text-2xl: 1.75rem; --text-3xl: 2.25rem;\n  --text-4xl: 3.25rem; --text-5xl: 4.5rem;\n  --tracking-display: -.03em; --tracking-body: -.01em;\n  --leading-display: 1.1; --leading-body: 1.4;\n  --ease-enter: cubic-bezier(.16,1,.3,1);\n  --ease-standard: cubic-bezier(.22,1,.36,1);\n  --ease-exit: cubic-bezier(.7,0,.84,0);\n  --ease-in-out: cubic-bezier(.65,0,.35,1);\n  /* Spring with a gentle settle (bounce .15). Pair with --duration-spring for transform transitions. */\n  --ease-spring: linear(0, 0.0258, 0.09, 0.1763, 0.2732, 0.3724, 0.4683, 0.5573, 0.6376, 0.7082, 0.7689, 0.8202, 0.8628, 0.8976, 0.9256, 0.9476, 0.9648, 0.9778, 0.9875, 0.9945, 0.9994, 1.0026, 1.0047, 1.0058, 1.0062, 1.0062, 1.0059, 1.0055, 1.0049, 1.0043, 1.0036, 1.0031, 1.0025, 1.002, 1.0016, 1.0013, 1);\n  --duration-instant: 120ms; --duration-fast: 160ms; --duration-standard: 240ms; --duration-considered: 480ms; --duration-spring: 580ms;\n}\n\n:root[data-theme=\"dark\"] {\n  color-scheme: dark;\n  --background: oklch(19% 0 0);\n  --surface: oklch(21.5% 0 0);\n  --surface-raised: oklch(24% 0 0);\n  /* Keep muted surfaces and hover states distinct from the base surface in dark mode. */\n  --surface-muted: oklch(26% 0 0);\n  --foreground: oklch(96% 0 0);\n  --text-secondary: oklch(77% 0 0);\n  --text-muted: oklch(64% 0 0);\n  --border: oklch(29% 0 0);\n  --border-subtle: oklch(25% 0 0);\n  --border-strong: oklch(40% 0 0);\n  --focus-ring: transparent;\n  --accent: oklch(80% 0 0);\n  --accent-strong: oklch(91% 0 0);\n  --accent-subtle: oklch(80% 0 0 / .13);\n  /* Neutral dark inverts: a near-white track carries a dark thumb, so on and off never read alike. */\n  --control-on: oklch(93% 0 0);\n  --control-glyph: oklch(19% 0 0);\n  --control-track: oklch(33% 0 0);\n  --control-track-hover: oklch(37% 0 0);\n  --control-thumb: oklch(97% 0 0);\n  --control-thumb-on: oklch(19% 0 0);\n  --control-fill: oklch(62% 0 0);\n  --control-thumb-shadow: 0 0 0 .5px oklch(0% 0 0 / .3), 0 1px 2px oklch(0% 0 0 / .35), 0 2px 6px oklch(0% 0 0 / .2);\n  --success: oklch(78% .18 150);\n  --warning: oklch(83% .17 80);\n  --danger: oklch(76% .2 25);\n  --shadow-resting: 0 1px 2px oklch(0% 0 0 / .18);\n  --shadow-raised: 0 8px 22px oklch(0% 0 0 / .22);\n  --shadow-floating: 0 22px 55px oklch(0% 0 0 / .34);\n  --arc-gradient-from: oklch(38% .05 300);\n  --arc-gradient-to: oklch(40% .045 60);\n  --arc-gradient-foreground: oklch(96% .005 300);\n  --arc-gradient-soft: linear-gradient(135deg, oklch(23.5% .016 300), oklch(24% .014 65));\n  --arc-gradient-line: linear-gradient(100deg, oklch(48% .06 300), oklch(52% .055 65));\n  --arc-gradient-ink: linear-gradient(100deg, oklch(82% .07 300), oklch(86% .065 70));\n}\n\n:root[data-accent=\"neutral\"] { --accent: oklch(33% 0 0); --accent-strong: oklch(24% 0 0); --accent-subtle: oklch(33% 0 0 / .1); }\n:root[data-accent=\"violet\"] { --accent: #7747ff; --accent-strong: #5528ce; --accent-subtle: rgb(119 71 255 / .13); }\n:root[data-accent=\"blue\"] { --accent: #0562ef; --accent-strong: #074db7; --accent-subtle: rgb(5 98 239 / .12); }\n:root[data-accent=\"green\"] { --accent: #0db879; --accent-strong: #087c54; --accent-subtle: rgb(13 184 121 / .13); --accent-foreground: #102016; }\n:root[data-accent=\"amber\"] { --accent: #f3ad20; --accent-strong: #9c6300; --accent-subtle: rgb(243 173 32 / .16); --accent-foreground: #20190d; }\n:root[data-accent=\"orange\"] { --accent: #f48120; --accent-strong: #aa4700; --accent-subtle: rgb(244 129 32 / .13); --accent-foreground: #17130f; }\n:root[data-accent=\"coral\"] { --accent: #f15f55; --accent-strong: #b92c27; --accent-subtle: rgb(241 95 85 / .14); --accent-foreground: #21110f; }\n:root[data-accent=\"rose\"] { --accent: #ed4e9d; --accent-strong: #ae2570; --accent-subtle: rgb(237 78 157 / .14); --accent-foreground: #250f1b; }\n:root[data-theme=\"dark\"][data-accent=\"neutral\"] { --accent: oklch(80% 0 0); --accent-strong: oklch(91% 0 0); --accent-subtle: oklch(80% 0 0 / .13); }\n:root[data-theme=\"dark\"][data-accent=\"violet\"] { --accent: #a78bff; --accent-strong: #c7b7ff; --accent-subtle: rgb(119 71 255 / .22); }\n:root[data-theme=\"dark\"][data-accent=\"blue\"] { --accent: #6ba3ff; --accent-strong: #a4c7ff; --accent-subtle: rgb(5 98 239 / .22); }\n:root[data-theme=\"dark\"][data-accent=\"green\"] { --accent: #53dca6; --accent-strong: #93efd0; --accent-subtle: rgb(13 184 121 / .2); }\n:root[data-theme=\"dark\"][data-accent=\"amber\"] { --accent: #ffcb62; --accent-strong: #ffe0a1; --accent-subtle: rgb(243 173 32 / .2); }\n:root[data-theme=\"dark\"][data-accent=\"orange\"] { --accent: #ffad5e; --accent-strong: #ffd0a0; --accent-subtle: rgb(244 129 32 / .2); --accent-foreground: #17130f; }\n:root[data-theme=\"dark\"][data-accent=\"coral\"] { --accent: #ff9386; --accent-strong: #ffc1ba; --accent-subtle: rgb(241 95 85 / .2); }\n:root[data-theme=\"dark\"][data-accent=\"rose\"] { --accent: #ff8bc5; --accent-strong: #ffc0df; --accent-subtle: rgb(237 78 157 / .2); }\n\n/* Selection control fills per accent. Light: the accent, deepened slightly where a white thumb needs it. Dark: a mid tone instead of the pastel\n   text accent, so white thumbs and checks keep contrast without a neon track. Amber keeps a dark glyph because white on yellow washes out. */\n:root[data-accent=\"neutral\"] { --control-on: oklch(23% 0 0); --control-thumb-on: oklch(100% 0 0); --control-glyph: oklch(100% 0 0); }\n:root[data-accent=\"violet\"] { --control-on: #7747ff; --control-thumb-on: #fff; --control-glyph: #fff; }\n:root[data-accent=\"blue\"] { --control-on: #0562ef; --control-thumb-on: #fff; --control-glyph: #fff; }\n:root[data-accent=\"green\"] { --control-on: #10a870; --control-thumb-on: #fff; --control-glyph: #fff; }\n:root[data-accent=\"amber\"] { --control-on: #eda11a; --control-thumb-on: #fff; --control-glyph: #2a1c03; }\n:root[data-accent=\"orange\"] { --control-on: #f07818; --control-thumb-on: #fff; --control-glyph: #fff; }\n:root[data-accent=\"coral\"] { --control-on: #ec564b; --control-thumb-on: #fff; --control-glyph: #fff; }\n:root[data-accent=\"rose\"] { --control-on: #e64494; --control-thumb-on: #fff; --control-glyph: #fff; }\n:root[data-theme=\"dark\"][data-accent=\"neutral\"] { --control-on: oklch(93% 0 0); --control-thumb-on: oklch(19% 0 0); --control-glyph: oklch(19% 0 0); }\n:root[data-theme=\"dark\"][data-accent=\"violet\"] { --control-on: #8a66ff; --control-thumb-on: #fff; --control-glyph: #fff; --control-fill: #8a66ff; }\n:root[data-theme=\"dark\"][data-accent=\"blue\"] { --control-on: #3b82f6; --control-thumb-on: #fff; --control-glyph: #fff; --control-fill: #3b82f6; }\n:root[data-theme=\"dark\"][data-accent=\"green\"] { --control-on: #1fae78; --control-thumb-on: #fff; --control-glyph: #fff; --control-fill: #1fae78; }\n:root[data-theme=\"dark\"][data-accent=\"amber\"] { --control-on: #e8a52a; --control-thumb-on: #fff; --control-glyph: #241803; --control-fill: #e8a52a; }\n:root[data-theme=\"dark\"][data-accent=\"orange\"] { --control-on: #ef873a; --control-thumb-on: #fff; --control-glyph: #fff; --control-fill: #ef873a; }\n:root[data-theme=\"dark\"][data-accent=\"coral\"] { --control-on: #ec6a60; --control-thumb-on: #fff; --control-glyph: #fff; --control-fill: #ec6a60; }\n:root[data-theme=\"dark\"][data-accent=\"rose\"] { --control-on: #e457a0; --control-thumb-on: #fff; --control-glyph: #fff; --control-fill: #e457a0; }\n\n/* Chart series palette, shared by every chart. Series 1 is the accent itself; series 2 to 4 rotate its hue at lightness steps\n   around it, so they stay distinct for every accent. A neutral accent falls back to a blue. Validated with the dataviz script\n   across all eight accents in both themes: every pair (not only neighbours) clears CVD ΔE 9 and normal vision ΔE 17. Browsers\n   without relative color get the neutral set. Override --series-1 to --series-4 on any element to rebrand a chart. */\n:root { --series-1: #1f7dcf; --series-2: #7128a5; --series-3: #e58f00; --series-4: #009e84; }\n:root[data-theme=\"dark\"] { --series-1: #55adff; --series-2: #9c37be; --series-3: #e66e00; --series-4: #00a861; }\n@supports (color: oklch(from red clamp(.4, l * sign(max(c - .02, 0)) + .5, .8) c h)) {\n  :root {\n    --series-1: oklch(from var(--accent) calc(l * sign(max(c - .02, 0)) + .58 * (1 - sign(max(c - .02, 0)))) calc(c * sign(max(c - .02, 0)) + .15 * (1 - sign(max(c - .02, 0)))) calc(h * sign(max(c - .02, 0)) + 250 * (1 - sign(max(c - .02, 0)))));\n    --series-2: oklch(from var(--accent) clamp(.45, l * sign(max(c - .02, 0)) + .58 * (1 - sign(max(c - .02, 0))) - 0.25, .76) .19 calc(h * sign(max(c - .02, 0)) + 250 * (1 - sign(max(c - .02, 0))) + 57));\n    --series-3: oklch(from var(--accent) clamp(.45, l * sign(max(c - .02, 0)) + .58 * (1 - sign(max(c - .02, 0))) + 0.14, .76) .18 calc(h * sign(max(c - .02, 0)) + 250 * (1 - sign(max(c - .02, 0))) + 184));\n    --series-4: oklch(from var(--accent) clamp(.45, l * sign(max(c - .02, 0)) + .58 * (1 - sign(max(c - .02, 0))), .76) .21 calc(h * sign(max(c - .02, 0)) + 250 * (1 - sign(max(c - .02, 0))) + 292));\n  }\n  :root[data-theme=\"dark\"] {\n    --series-1: oklch(from var(--accent) calc(l * sign(max(c - .02, 0)) + .73 * (1 - sign(max(c - .02, 0)))) calc(c * sign(max(c - .02, 0)) + .15 * (1 - sign(max(c - .02, 0)))) calc(h * sign(max(c - .02, 0)) + 250 * (1 - sign(max(c - .02, 0)))));\n    --series-2: oklch(from var(--accent) clamp(.485, l * sign(max(c - .02, 0)) + .73 * (1 - sign(max(c - .02, 0))) - 0.19, .665) .21 calc(h * sign(max(c - .02, 0)) + 250 * (1 - sign(max(c - .02, 0))) + 66));\n    --series-3: oklch(from var(--accent) clamp(.485, l * sign(max(c - .02, 0)) + .73 * (1 - sign(max(c - .02, 0))) + 0.02, .665) .21 calc(h * sign(max(c - .02, 0)) + 250 * (1 - sign(max(c - .02, 0))) + 175));\n    --series-4: oklch(from var(--accent) clamp(.485, l * sign(max(c - .02, 0)) + .73 * (1 - sign(max(c - .02, 0))) - 0.1, .665) .18 calc(h * sign(max(c - .02, 0)) + 250 * (1 - sign(max(c - .02, 0))) + 270));\n  }\n}\n\n/* Focus. Pointer focus never draws a ring (product decision). Keyboard focus (:focus-visible) draws a subtle accent outline, so keyboard users\n   can always see where they are (WCAG 2.4.7). Left out of the outline: text fields, which match :focus-visible on a mouse click too and show\n   focus with their border and caret; menu items and listbox options, whose highlight fill marks the keyboard position; and tabindex=\"-1\"\n   targets (dialog panels, regions) that only receive focus from script.\n   Tune it on :root or any element, no !important needed:\n     --focus-outline           color (default: the accent, softened); set transparent to hide it\n     --focus-outline-width     default 2px\n     --focus-outline-offset    default 2px; components inside clipped containers set a negative offset */\n:focus:not(:focus-visible),\n:is(input:not([type=\"button\"], [type=\"checkbox\"], [type=\"color\"], [type=\"file\"], [type=\"image\"], [type=\"radio\"], [type=\"range\"], [type=\"reset\"], [type=\"submit\"]), textarea, [contenteditable]:not([contenteditable=\"false\"]), [role=\"menuitem\"], [role=\"menuitemcheckbox\"], [role=\"menuitemradio\"], [role=\"option\"], [tabindex=\"-1\"]):focus { outline: none !important; }\n:focus-visible:not(input:not([type=\"button\"], [type=\"checkbox\"], [type=\"color\"], [type=\"file\"], [type=\"image\"], [type=\"radio\"], [type=\"range\"], [type=\"reset\"], [type=\"submit\"]), textarea, [contenteditable]:not([contenteditable=\"false\"]), [role=\"menuitem\"], [role=\"menuitemcheckbox\"], [role=\"menuitemradio\"], [role=\"option\"], [tabindex=\"-1\"]) {\n  outline: var(--focus-outline-width, 2px) solid var(--focus-outline, color-mix(in oklab, var(--accent-strong) 72%, transparent)) !important;\n  outline-offset: var(--focus-outline-offset, 2px) !important;\n}\n"}],"docs":"Install once per app, then import the tokens once in your root layout: import \"@/components/arc/foundation.css\" (Arc installs into an arc/ folder under your components alias). Components never import this file and do not reinstall it, so you can keep the tokens anywhere your app loads them globally. Set data-theme=\"dark\" on <html> for dark mode and data-accent (violet, blue, green, amber, orange, coral, rose) to change the accent.","meta":{"tier":"free","kind":"foundation","docs":"https://uiarc.dev/docs/ai"}}