@layer reset, tokens, components;
@layer tokens, components, utilities;
@font-face { font-family: "Space Grotesk"; src: url('/fonts/space-grotesk-latin.woff2') format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@layer tokens {
:root { --example-ds-palette-amber-1: oklch(97.00% 0.024 72); --example-ds-palette-amber-2: oklch(88.67% 0.058 72); --example-ds-palette-amber-3: oklch(80.33% 0.105 72); --example-ds-palette-amber-4: oklch(72.00% 0.146 72); --example-ds-palette-amber-5: oklch(63.67% 0.17 72); --example-ds-palette-amber-6: oklch(55.33% 0.17 72); --example-ds-palette-amber-7: oklch(47.00% 0.153 72); --example-ds-palette-amber-8: oklch(38.67% 0.116 72); --example-ds-palette-amber-9: oklch(30.33% 0.082 72); --example-ds-palette-amber-10: oklch(22.00% 0.054 72); --example-ds-palette-blue-1: oklch(97.00% 0.031 262); --example-ds-palette-blue-2: oklch(88.67% 0.075 262); --example-ds-palette-blue-3: oklch(80.33% 0.136 262); --example-ds-palette-blue-4: oklch(72.00% 0.189 262); --example-ds-palette-blue-5: oklch(63.67% 0.22 262); --example-ds-palette-blue-6: oklch(55.33% 0.22 262); --example-ds-palette-blue-7: oklch(47.00% 0.198 262); --example-ds-palette-blue-8: oklch(38.67% 0.15 262); --example-ds-palette-blue-9: oklch(30.33% 0.106 262); --example-ds-palette-blue-10: oklch(22.00% 0.07 262); --example-ds-palette-bronze-1: oklch(97.00% 0.017 58); --example-ds-palette-bronze-2: oklch(88.67% 0.041 58); --example-ds-palette-bronze-3: oklch(80.33% 0.074 58); --example-ds-palette-bronze-4: oklch(72.00% 0.103 58); --example-ds-palette-bronze-5: oklch(63.67% 0.12 58); --example-ds-palette-bronze-6: oklch(55.33% 0.12 58); --example-ds-palette-bronze-7: oklch(47.00% 0.108 58); --example-ds-palette-bronze-8: oklch(38.67% 0.082 58); --example-ds-palette-bronze-9: oklch(30.33% 0.058 58); --example-ds-palette-bronze-10: oklch(22.00% 0.038 58); --example-ds-palette-brown-1: oklch(97.00% 0.013 48); --example-ds-palette-brown-2: oklch(88.67% 0.031 48); --example-ds-palette-brown-3: oklch(80.33% 0.056 48); --example-ds-palette-brown-4: oklch(72.00% 0.077 48); --example-ds-palette-brown-5: oklch(63.67% 0.09 48); --example-ds-palette-brown-6: oklch(55.33% 0.09 48); --example-ds-palette-brown-7: oklch(47.00% 0.081 48); --example-ds-palette-brown-8: oklch(38.67% 0.061 48); --example-ds-palette-brown-9: oklch(30.33% 0.043 48); --example-ds-palette-brown-10: oklch(22.00% 0.029 48); --example-ds-palette-crimson-1: oklch(97.00% 0.029 5); --example-ds-palette-crimson-2: oklch(88.67% 0.071 5); --example-ds-palette-crimson-3: oklch(80.33% 0.13 5); --example-ds-palette-crimson-4: oklch(72.00% 0.181 5); --example-ds-palette-crimson-5: oklch(63.67% 0.21 5); --example-ds-palette-crimson-6: oklch(55.33% 0.21 5); --example-ds-palette-crimson-7: oklch(47.00% 0.189 5); --example-ds-palette-crimson-8: oklch(38.67% 0.143 5); --example-ds-palette-crimson-9: oklch(30.33% 0.101 5); --example-ds-palette-crimson-10: oklch(22.00% 0.067 5); --example-ds-palette-cyan-1: oklch(97.00% 0.024 200); --example-ds-palette-cyan-2: oklch(88.67% 0.058 200); --example-ds-palette-cyan-3: oklch(80.33% 0.105 200); --example-ds-palette-cyan-4: oklch(72.00% 0.146 200); --example-ds-palette-cyan-5: oklch(63.67% 0.17 200); --example-ds-palette-cyan-6: oklch(55.33% 0.17 200); --example-ds-palette-cyan-7: oklch(47.00% 0.153 200); --example-ds-palette-cyan-8: oklch(38.67% 0.116 200); --example-ds-palette-cyan-9: oklch(30.33% 0.082 200); --example-ds-palette-cyan-10: oklch(22.00% 0.054 200); --example-ds-palette-emerald-1: oklch(97.00% 0.025 158); --example-ds-palette-emerald-2: oklch(88.67% 0.061 158); --example-ds-palette-emerald-3: oklch(80.33% 0.112 158); --example-ds-palette-emerald-4: oklch(72.00% 0.155 158); --example-ds-palette-emerald-5: oklch(63.67% 0.18 158); --example-ds-palette-emerald-6: oklch(55.33% 0.18 158); --example-ds-palette-emerald-7: oklch(47.00% 0.162 158); --example-ds-palette-emerald-8: oklch(38.67% 0.122 158); --example-ds-palette-emerald-9: oklch(30.33% 0.086 158); --example-ds-palette-emerald-10: oklch(22.00% 0.058 158); --example-ds-palette-fuchsia-1: oklch(97.00% 0.031 328); --example-ds-palette-fuchsia-2: oklch(88.67% 0.075 328); --example-ds-palette-fuchsia-3: oklch(80.33% 0.136 328); --example-ds-palette-fuchsia-4: oklch(72.00% 0.189 328); --example-ds-palette-fuchsia-5: oklch(63.67% 0.22 328); --example-ds-palette-fuchsia-6: oklch(55.33% 0.22 328); --example-ds-palette-fuchsia-7: oklch(47.00% 0.198 328); --example-ds-palette-fuchsia-8: oklch(38.67% 0.15 328); --example-ds-palette-fuchsia-9: oklch(30.33% 0.106 328); --example-ds-palette-fuchsia-10: oklch(22.00% 0.07 328); --example-ds-palette-gold-1: oklch(97.00% 0.017 78); --example-ds-palette-gold-2: oklch(88.67% 0.041 78); --example-ds-palette-gold-3: oklch(80.33% 0.074 78); --example-ds-palette-gold-4: oklch(72.00% 0.103 78); --example-ds-palette-gold-5: oklch(63.67% 0.12 78); --example-ds-palette-gold-6: oklch(55.33% 0.12 78); --example-ds-palette-gold-7: oklch(47.00% 0.108 78); --example-ds-palette-gold-8: oklch(38.67% 0.082 78); --example-ds-palette-gold-9: oklch(30.33% 0.058 78); --example-ds-palette-gold-10: oklch(22.00% 0.038 78); --example-ds-palette-grass-1: oklch(97.00% 0.028 138); --example-ds-palette-grass-2: oklch(88.67% 0.068 138); --example-ds-palette-grass-3: oklch(80.33% 0.124 138); --example-ds-palette-grass-4: oklch(72.00% 0.172 138); --example-ds-palette-grass-5: oklch(63.67% 0.2 138); --example-ds-palette-grass-6: oklch(55.33% 0.2 138); --example-ds-palette-grass-7: oklch(47.00% 0.18 138); --example-ds-palette-grass-8: oklch(38.67% 0.136 138); --example-ds-palette-grass-9: oklch(30.33% 0.096 138); --example-ds-palette-grass-10: oklch(22.00% 0.064 138); --example-ds-palette-gray-1: oklch(97.00% 0.002 264); --example-ds-palette-gray-2: oklch(88.67% 0.005 264); --example-ds-palette-gray-3: oklch(80.33% 0.009 264); --example-ds-palette-gray-4: oklch(72.00% 0.012 264); --example-ds-palette-gray-5: oklch(63.67% 0.014 264); --example-ds-palette-gray-6: oklch(55.33% 0.014 264); --example-ds-palette-gray-7: oklch(47.00% 0.013 264); --example-ds-palette-gray-8: oklch(38.67% 0.01 264); --example-ds-palette-gray-9: oklch(30.33% 0.007 264); --example-ds-palette-gray-10: oklch(22.00% 0.004 264); --example-ds-palette-green-1: oklch(97.00% 0.027 145); --example-ds-palette-green-2: oklch(88.67% 0.065 145); --example-ds-palette-green-3: oklch(80.33% 0.118 145); --example-ds-palette-green-4: oklch(72.00% 0.163 145); --example-ds-palette-green-5: oklch(63.67% 0.19 145); --example-ds-palette-green-6: oklch(55.33% 0.19 145); --example-ds-palette-green-7: oklch(47.00% 0.171 145); --example-ds-palette-green-8: oklch(38.67% 0.129 145); --example-ds-palette-green-9: oklch(30.33% 0.091 145); --example-ds-palette-green-10: oklch(22.00% 0.061 145); --example-ds-palette-indigo-1: oklch(97.00% 0.028 274); --example-ds-palette-indigo-2: oklch(88.67% 0.068 274); --example-ds-palette-indigo-3: oklch(80.33% 0.124 274); --example-ds-palette-indigo-4: oklch(72.00% 0.172 274); --example-ds-palette-indigo-5: oklch(63.67% 0.2 274); --example-ds-palette-indigo-6: oklch(55.33% 0.2 274); --example-ds-palette-indigo-7: oklch(47.00% 0.18 274); --example-ds-palette-indigo-8: oklch(38.67% 0.136 274); --example-ds-palette-indigo-9: oklch(30.33% 0.096 274); --example-ds-palette-indigo-10: oklch(22.00% 0.064 274); --example-ds-palette-iris-1: oklch(97.00% 0.025 277); --example-ds-palette-iris-2: oklch(88.67% 0.061 277); --example-ds-palette-iris-3: oklch(80.33% 0.112 277); --example-ds-palette-iris-4: oklch(72.00% 0.155 277); --example-ds-palette-iris-5: oklch(63.67% 0.18 277); --example-ds-palette-iris-6: oklch(55.33% 0.18 277); --example-ds-palette-iris-7: oklch(47.00% 0.162 277); --example-ds-palette-iris-8: oklch(38.67% 0.122 277); --example-ds-palette-iris-9: oklch(30.33% 0.086 277); --example-ds-palette-iris-10: oklch(22.00% 0.058 277); --example-ds-palette-jade-1: oklch(97.00% 0.022 168); --example-ds-palette-jade-2: oklch(88.67% 0.054 168); --example-ds-palette-jade-3: oklch(80.33% 0.099 168); --example-ds-palette-jade-4: oklch(72.00% 0.138 168); --example-ds-palette-jade-5: oklch(63.67% 0.16 168); --example-ds-palette-jade-6: oklch(55.33% 0.16 168); --example-ds-palette-jade-7: oklch(47.00% 0.144 168); --example-ds-palette-jade-8: oklch(38.67% 0.109 168); --example-ds-palette-jade-9: oklch(30.33% 0.077 168); --example-ds-palette-jade-10: oklch(22.00% 0.051 168); --example-ds-palette-lime-1: oklch(97.00% 0.028 128); --example-ds-palette-lime-2: oklch(88.67% 0.068 128); --example-ds-palette-lime-3: oklch(80.33% 0.124 128); --example-ds-palette-lime-4: oklch(72.00% 0.172 128); --example-ds-palette-lime-5: oklch(63.67% 0.2 128); --example-ds-palette-lime-6: oklch(55.33% 0.2 128); --example-ds-palette-lime-7: oklch(47.00% 0.18 128); --example-ds-palette-lime-8: oklch(38.67% 0.136 128); --example-ds-palette-lime-9: oklch(30.33% 0.096 128); --example-ds-palette-lime-10: oklch(22.00% 0.064 128); --example-ds-palette-mauve-1: oklch(97.00% 0.004 285); --example-ds-palette-mauve-2: oklch(88.67% 0.009 285); --example-ds-palette-mauve-3: oklch(80.33% 0.015 285); --example-ds-palette-mauve-4: oklch(72.00% 0.022 285); --example-ds-palette-mauve-5: oklch(63.67% 0.025 285); --example-ds-palette-mauve-6: oklch(55.33% 0.025 285); --example-ds-palette-mauve-7: oklch(47.00% 0.023 285); --example-ds-palette-mauve-8: oklch(38.67% 0.017 285); --example-ds-palette-mauve-9: oklch(30.33% 0.012 285); --example-ds-palette-mauve-10: oklch(22.00% 0.008 285); --example-ds-palette-mint-1: oklch(97.00% 0.02 188); --example-ds-palette-mint-2: oklch(88.67% 0.048 188); --example-ds-palette-mint-3: oklch(80.33% 0.087 188); --example-ds-palette-mint-4: oklch(72.00% 0.12 188); --example-ds-palette-mint-5: oklch(63.67% 0.14 188); --example-ds-palette-mint-6: oklch(55.33% 0.14 188); --example-ds-palette-mint-7: oklch(47.00% 0.126 188); --example-ds-palette-mint-8: oklch(38.67% 0.095 188); --example-ds-palette-mint-9: oklch(30.33% 0.067 188); --example-ds-palette-mint-10: oklch(22.00% 0.045 188); --example-ds-palette-mist-1: oklch(97.00% 0.003 215); --example-ds-palette-mist-2: oklch(88.67% 0.007 215); --example-ds-palette-mist-3: oklch(80.33% 0.014 215); --example-ds-palette-mist-4: oklch(72.00% 0.019 215); --example-ds-palette-mist-5: oklch(63.67% 0.022 215); --example-ds-palette-mist-6: oklch(55.33% 0.022 215); --example-ds-palette-mist-7: oklch(47.00% 0.02 215); --example-ds-palette-mist-8: oklch(38.67% 0.015 215); --example-ds-palette-mist-9: oklch(30.33% 0.011 215); --example-ds-palette-mist-10: oklch(22.00% 0.007 215); --example-ds-palette-neutral-1: oklch(97.00% 0 0); --example-ds-palette-neutral-2: oklch(88.67% 0 0); --example-ds-palette-neutral-3: oklch(80.33% 0 0); --example-ds-palette-neutral-4: oklch(72.00% 0 0); --example-ds-palette-neutral-5: oklch(63.67% 0 0); --example-ds-palette-neutral-6: oklch(55.33% 0 0); --example-ds-palette-neutral-7: oklch(47.00% 0 0); --example-ds-palette-neutral-8: oklch(38.67% 0 0); --example-ds-palette-neutral-9: oklch(30.33% 0 0); --example-ds-palette-neutral-10: oklch(22.00% 0 0); --example-ds-palette-olive-1: oklch(97.00% 0.003 118); --example-ds-palette-olive-2: oklch(88.67% 0.007 118); --example-ds-palette-olive-3: oklch(80.33% 0.014 118); --example-ds-palette-olive-4: oklch(72.00% 0.019 118); --example-ds-palette-olive-5: oklch(63.67% 0.022 118); --example-ds-palette-olive-6: oklch(55.33% 0.022 118); --example-ds-palette-olive-7: oklch(47.00% 0.02 118); --example-ds-palette-olive-8: oklch(38.67% 0.015 118); --example-ds-palette-olive-9: oklch(30.33% 0.011 118); --example-ds-palette-olive-10: oklch(22.00% 0.007 118); --example-ds-palette-orange-1: oklch(97.00% 0.027 55); --example-ds-palette-orange-2: oklch(88.67% 0.065 55); --example-ds-palette-orange-3: oklch(80.33% 0.118 55); --example-ds-palette-orange-4: oklch(72.00% 0.163 55); --example-ds-palette-orange-5: oklch(63.67% 0.19 55); --example-ds-palette-orange-6: oklch(55.33% 0.19 55); --example-ds-palette-orange-7: oklch(47.00% 0.171 55); --example-ds-palette-orange-8: oklch(38.67% 0.129 55); --example-ds-palette-orange-9: oklch(30.33% 0.091 55); --example-ds-palette-orange-10: oklch(22.00% 0.061 55); --example-ds-palette-pink-1: oklch(97.00% 0.025 348); --example-ds-palette-pink-2: oklch(88.67% 0.061 348); --example-ds-palette-pink-3: oklch(80.33% 0.112 348); --example-ds-palette-pink-4: oklch(72.00% 0.155 348); --example-ds-palette-pink-5: oklch(63.67% 0.18 348); --example-ds-palette-pink-6: oklch(55.33% 0.18 348); --example-ds-palette-pink-7: oklch(47.00% 0.162 348); --example-ds-palette-pink-8: oklch(38.67% 0.122 348); --example-ds-palette-pink-9: oklch(30.33% 0.086 348); --example-ds-palette-pink-10: oklch(22.00% 0.058 348); --example-ds-palette-plum-1: oklch(97.00% 0.025 315); --example-ds-palette-plum-2: oklch(88.67% 0.061 315); --example-ds-palette-plum-3: oklch(80.33% 0.112 315); --example-ds-palette-plum-4: oklch(72.00% 0.155 315); --example-ds-palette-plum-5: oklch(63.67% 0.18 315); --example-ds-palette-plum-6: oklch(55.33% 0.18 315); --example-ds-palette-plum-7: oklch(47.00% 0.162 315); --example-ds-palette-plum-8: oklch(38.67% 0.122 315); --example-ds-palette-plum-9: oklch(30.33% 0.086 315); --example-ds-palette-plum-10: oklch(22.00% 0.058 315); --example-ds-palette-purple-1: oklch(97.00% 0.031 302); --example-ds-palette-purple-2: oklch(88.67% 0.075 302); --example-ds-palette-purple-3: oklch(80.33% 0.136 302); --example-ds-palette-purple-4: oklch(72.00% 0.189 302); --example-ds-palette-purple-5: oklch(63.67% 0.22 302); --example-ds-palette-purple-6: oklch(55.33% 0.22 302); --example-ds-palette-purple-7: oklch(47.00% 0.198 302); --example-ds-palette-purple-8: oklch(38.67% 0.15 302); --example-ds-palette-purple-9: oklch(30.33% 0.106 302); --example-ds-palette-purple-10: oklch(22.00% 0.07 302); --example-ds-palette-red-1: oklch(97.00% 0.029 27); --example-ds-palette-red-2: oklch(88.67% 0.071 27); --example-ds-palette-red-3: oklch(80.33% 0.13 27); --example-ds-palette-red-4: oklch(72.00% 0.181 27); --example-ds-palette-red-5: oklch(63.67% 0.21 27); --example-ds-palette-red-6: oklch(55.33% 0.21 27); --example-ds-palette-red-7: oklch(47.00% 0.189 27); --example-ds-palette-red-8: oklch(38.67% 0.143 27); --example-ds-palette-red-9: oklch(30.33% 0.101 27); --example-ds-palette-red-10: oklch(22.00% 0.067 27); --example-ds-palette-rose-1: oklch(97.00% 0.027 2); --example-ds-palette-rose-2: oklch(88.67% 0.065 2); --example-ds-palette-rose-3: oklch(80.33% 0.118 2); --example-ds-palette-rose-4: oklch(72.00% 0.163 2); --example-ds-palette-rose-5: oklch(63.67% 0.19 2); --example-ds-palette-rose-6: oklch(55.33% 0.19 2); --example-ds-palette-rose-7: oklch(47.00% 0.171 2); --example-ds-palette-rose-8: oklch(38.67% 0.129 2); --example-ds-palette-rose-9: oklch(30.33% 0.091 2); --example-ds-palette-rose-10: oklch(22.00% 0.061 2); --example-ds-palette-ruby-1: oklch(97.00% 0.028 12); --example-ds-palette-ruby-2: oklch(88.67% 0.068 12); --example-ds-palette-ruby-3: oklch(80.33% 0.124 12); --example-ds-palette-ruby-4: oklch(72.00% 0.172 12); --example-ds-palette-ruby-5: oklch(63.67% 0.2 12); --example-ds-palette-ruby-6: oklch(55.33% 0.2 12); --example-ds-palette-ruby-7: oklch(47.00% 0.18 12); --example-ds-palette-ruby-8: oklch(38.67% 0.136 12); --example-ds-palette-ruby-9: oklch(30.33% 0.096 12); --example-ds-palette-ruby-10: oklch(22.00% 0.064 12); --example-ds-palette-sage-1: oklch(97.00% 0.003 145); --example-ds-palette-sage-2: oklch(88.67% 0.007 145); --example-ds-palette-sage-3: oklch(80.33% 0.014 145); --example-ds-palette-sage-4: oklch(72.00% 0.019 145); --example-ds-palette-sage-5: oklch(63.67% 0.022 145); --example-ds-palette-sage-6: oklch(55.33% 0.022 145); --example-ds-palette-sage-7: oklch(47.00% 0.02 145); --example-ds-palette-sage-8: oklch(38.67% 0.015 145); --example-ds-palette-sage-9: oklch(30.33% 0.011 145); --example-ds-palette-sage-10: oklch(22.00% 0.007 145); --example-ds-palette-sand-1: oklch(97.00% 0.003 72); --example-ds-palette-sand-2: oklch(88.67% 0.008 72); --example-ds-palette-sand-3: oklch(80.33% 0.015 72); --example-ds-palette-sand-4: oklch(72.00% 0.021 72); --example-ds-palette-sand-5: oklch(63.67% 0.024 72); --example-ds-palette-sand-6: oklch(55.33% 0.024 72); --example-ds-palette-sand-7: oklch(47.00% 0.022 72); --example-ds-palette-sand-8: oklch(38.67% 0.016 72); --example-ds-palette-sand-9: oklch(30.33% 0.012 72); --example-ds-palette-sand-10: oklch(22.00% 0.008 72); --example-ds-palette-slate-1: oklch(97.00% 0.004 260); --example-ds-palette-slate-2: oklch(88.67% 0.01 260); --example-ds-palette-slate-3: oklch(80.33% 0.017 260); --example-ds-palette-slate-4: oklch(72.00% 0.024 260); --example-ds-palette-slate-5: oklch(63.67% 0.028 260); --example-ds-palette-slate-6: oklch(55.33% 0.028 260); --example-ds-palette-slate-7: oklch(47.00% 0.025 260); --example-ds-palette-slate-8: oklch(38.67% 0.019 260); --example-ds-palette-slate-9: oklch(30.33% 0.013 260); --example-ds-palette-slate-10: oklch(22.00% 0.009 260); --example-ds-palette-sky-1: oklch(97.00% 0.02 238); --example-ds-palette-sky-2: oklch(88.67% 0.048 238); --example-ds-palette-sky-3: oklch(80.33% 0.087 238); --example-ds-palette-sky-4: oklch(72.00% 0.12 238); --example-ds-palette-sky-5: oklch(63.67% 0.14 238); --example-ds-palette-sky-6: oklch(55.33% 0.14 238); --example-ds-palette-sky-7: oklch(47.00% 0.126 238); --example-ds-palette-sky-8: oklch(38.67% 0.095 238); --example-ds-palette-sky-9: oklch(30.33% 0.067 238); --example-ds-palette-sky-10: oklch(22.00% 0.045 238); --example-ds-palette-stone-1: oklch(97.00% 0.003 55); --example-ds-palette-stone-2: oklch(88.67% 0.007 55); --example-ds-palette-stone-3: oklch(80.33% 0.014 55); --example-ds-palette-stone-4: oklch(72.00% 0.019 55); --example-ds-palette-stone-5: oklch(63.67% 0.022 55); --example-ds-palette-stone-6: oklch(55.33% 0.022 55); --example-ds-palette-stone-7: oklch(47.00% 0.02 55); --example-ds-palette-stone-8: oklch(38.67% 0.015 55); --example-ds-palette-stone-9: oklch(30.33% 0.011 55); --example-ds-palette-stone-10: oklch(22.00% 0.007 55); --example-ds-palette-taupe-1: oklch(97.00% 0.003 42); --example-ds-palette-taupe-2: oklch(88.67% 0.007 42); --example-ds-palette-taupe-3: oklch(80.33% 0.014 42); --example-ds-palette-taupe-4: oklch(72.00% 0.019 42); --example-ds-palette-taupe-5: oklch(63.67% 0.022 42); --example-ds-palette-taupe-6: oklch(55.33% 0.022 42); --example-ds-palette-taupe-7: oklch(47.00% 0.02 42); --example-ds-palette-taupe-8: oklch(38.67% 0.015 42); --example-ds-palette-taupe-9: oklch(30.33% 0.011 42); --example-ds-palette-taupe-10: oklch(22.00% 0.007 42); --example-ds-palette-teal-1: oklch(97.00% 0.022 182); --example-ds-palette-teal-2: oklch(88.67% 0.054 182); --example-ds-palette-teal-3: oklch(80.33% 0.099 182); --example-ds-palette-teal-4: oklch(72.00% 0.138 182); --example-ds-palette-teal-5: oklch(63.67% 0.16 182); --example-ds-palette-teal-6: oklch(55.33% 0.16 182); --example-ds-palette-teal-7: oklch(47.00% 0.144 182); --example-ds-palette-teal-8: oklch(38.67% 0.109 182); --example-ds-palette-teal-9: oklch(30.33% 0.077 182); --example-ds-palette-teal-10: oklch(22.00% 0.051 182); --example-ds-palette-tomato-1: oklch(97.00% 0.028 35); --example-ds-palette-tomato-2: oklch(88.67% 0.068 35); --example-ds-palette-tomato-3: oklch(80.33% 0.124 35); --example-ds-palette-tomato-4: oklch(72.00% 0.172 35); --example-ds-palette-tomato-5: oklch(63.67% 0.2 35); --example-ds-palette-tomato-6: oklch(55.33% 0.2 35); --example-ds-palette-tomato-7: oklch(47.00% 0.18 35); --example-ds-palette-tomato-8: oklch(38.67% 0.136 35); --example-ds-palette-tomato-9: oklch(30.33% 0.096 35); --example-ds-palette-tomato-10: oklch(22.00% 0.064 35); --example-ds-palette-violet-1: oklch(97.00% 0.031 294); --example-ds-palette-violet-2: oklch(88.67% 0.075 294); --example-ds-palette-violet-3: oklch(80.33% 0.136 294); --example-ds-palette-violet-4: oklch(72.00% 0.189 294); --example-ds-palette-violet-5: oklch(63.67% 0.22 294); --example-ds-palette-violet-6: oklch(55.33% 0.22 294); --example-ds-palette-violet-7: oklch(47.00% 0.198 294); --example-ds-palette-violet-8: oklch(38.67% 0.15 294); --example-ds-palette-violet-9: oklch(30.33% 0.106 294); --example-ds-palette-violet-10: oklch(22.00% 0.07 294); --example-ds-palette-yellow-1: oklch(97.00% 0.018 98); --example-ds-palette-yellow-2: oklch(88.67% 0.044 98); --example-ds-palette-yellow-3: oklch(80.33% 0.081 98); --example-ds-palette-yellow-4: oklch(72.00% 0.112 98); --example-ds-palette-yellow-5: oklch(63.67% 0.13 98); --example-ds-palette-yellow-6: oklch(55.33% 0.13 98); --example-ds-palette-yellow-7: oklch(47.00% 0.117 98); --example-ds-palette-yellow-8: oklch(38.67% 0.088 98); --example-ds-palette-yellow-9: oklch(30.33% 0.062 98); --example-ds-palette-yellow-10: oklch(22.00% 0.042 98); --example-ds-palette-zinc-1: oklch(97.00% 0.002 268); --example-ds-palette-zinc-2: oklch(88.67% 0.005 268); --example-ds-palette-zinc-3: oklch(80.33% 0.009 268); --example-ds-palette-zinc-4: oklch(72.00% 0.013 268); --example-ds-palette-zinc-5: oklch(63.67% 0.015 268); --example-ds-palette-zinc-6: oklch(55.33% 0.015 268); --example-ds-palette-zinc-7: oklch(47.00% 0.013 268); --example-ds-palette-zinc-8: oklch(38.67% 0.01 268); --example-ds-palette-zinc-9: oklch(30.33% 0.007 268); --example-ds-palette-zinc-10: oklch(22.00% 0.005 268); }
}
@layer tokens {
:root { --example-ds-space-1: 4px; --example-ds-space-2: 8px; --example-ds-space-3: 12px; --example-ds-space-4: 16px; --example-ds-space-5: 24px; --example-ds-space-6: 32px; --example-ds-space-8: 48px; --example-ds-space-12: 64px; }
}
@layer tokens {
:root { --example-ds-radius-none: 0; --example-ds-radius-sm: 0; --example-ds-radius-md: 0; --example-ds-radius-lg: 0; --example-ds-radius-xl: 0; --example-ds-radius-full: 0; }
}
@layer tokens {
:root { --example-ds-borderWidth-thin: 1px; --example-ds-borderWidth-default: 1px; --example-ds-borderWidth-thick: 1px; }
}
@layer tokens {
:root { --example-ds-fontFamily-display: "Fraunces", "Iowan Old Style", "Apple Garamond", Baskerville, "Palatino Linotype", Palatino, Georgia, serif; --example-ds-fontFamily-sans: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", Menlo, Monaco, Consolas, monospace; --example-ds-fontFamily-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", Menlo, Monaco, Consolas, monospace; }
}
@layer tokens {
:root { --example-ds-fontSize-xs: 11px; --example-ds-fontSize-sm: 13px; --example-ds-fontSize-md: 14px; --example-ds-fontSize-lg: 16px; --example-ds-fontSize-xl: 20px; --example-ds-fontSize-2xl: 24px; --example-ds-fontSize-3xl: 30px; }
}
@layer tokens {
:root { --example-ds-fontWeight-normal: 400; --example-ds-fontWeight-medium: 500; --example-ds-fontWeight-semibold: 600; --example-ds-fontWeight-bold: 700; }
}
@layer tokens {
:root { --example-ds-lineHeight-tight: 1.25; --example-ds-lineHeight-normal: 1.5; --example-ds-lineHeight-relaxed: 1.625; }
}
@layer tokens {
:root { --example-ds-shadow-xs: 1px 1px 0 0 #000; --example-ds-shadow-sm: 2px 2px 0 0 #000; --example-ds-shadow-md: 3px 3px 0 0 #000; --example-ds-shadow-lg: 4px 4px 0 0 #000; --example-ds-shadow-xl: 5px 5px 0 0 #000; }
}
@layer tokens {
:root { --example-ds-duration-fast: 80ms; --example-ds-duration-medium: 140ms; --example-ds-duration-slow: 220ms; }
}
@layer tokens {
:root { --example-ds-easing-standard: ease; --example-ds-easing-emphasized: cubic-bezier(0.16, 1, 0.3, 1); }
}
@layer tokens {
:root { --example-ds-transition-overlayFade: opacity var(--duration-slow) var(--easing-standard), visibility var(--duration-slow) var(--easing-standard); --example-ds-transition-panelEnter: opacity var(--duration-slow) var(--easing-emphasized); --example-ds-transition-backdrop: opacity var(--duration-slow) var(--easing-standard); --example-ds-transition-surfaceFast: background-color var(--duration-fast) var(--easing-standard); --example-ds-transition-colorShift: color var(--duration-medium) var(--easing-standard), text-decoration-color var(--duration-medium) var(--easing-standard); --example-ds-transition-controlSurface: background-color var(--duration-medium) var(--easing-standard), border-color var(--duration-medium) var(--easing-standard); }
}
@layer tokens {
:root { --example-ds-color-background-app: ; --example-ds-color-background-surface: ; --example-ds-color-background-subtle: ; --example-ds-color-background-elevated: ; --example-ds-color-text-primary: ; --example-ds-color-text-secondary: ; --example-ds-color-text-onAccent: ; --example-ds-color-text-onDanger: ; --example-ds-color-text-disabled: color-mix(in oklch, var(--example-ds-color-text-secondary) 45%, transparent); --example-ds-color-text-placeholder: color-mix(in oklch, var(--example-ds-color-text-secondary) 55%, transparent); --example-ds-color-accent-default: ; --example-ds-color-accent-hover: ; --example-ds-color-accent-subtle: color-mix(in oklch, var(--example-ds-color-accent-default) 24%, var(--example-ds-color-background-app)); --example-ds-color-border-default: ; --example-ds-color-border-strong: ; --example-ds-color-border-focus: ; --example-ds-color-shadow-offset: ; --example-ds-color-danger-default: ; --example-ds-color-danger-solid: ; --example-ds-color-danger-subtle: color-mix(in oklch, var(--example-ds-color-danger-default) 12%, transparent); --example-ds-color-danger-border: color-mix(in oklch, var(--example-ds-color-danger-default) 40%, transparent); --example-ds-color-success-default: ; --example-ds-color-success-solid: ; --example-ds-color-success-subtle: color-mix(in oklch, var(--example-ds-color-success-default) 12%, transparent); --example-ds-color-success-border: color-mix(in oklch, var(--example-ds-color-success-default) 40%, transparent); --example-ds-color-warning-default: ; --example-ds-color-warning-onSolid: ; --example-ds-color-warning-subtle: color-mix(in oklch, var(--example-ds-color-warning-default) 12%, transparent); --example-ds-color-warning-border: color-mix(in oklch, var(--example-ds-color-warning-default) 40%, transparent); --example-ds-color-info-default: ; --example-ds-color-info-onSolid: ; --example-ds-color-info-subtle: color-mix(in oklch, var(--example-ds-color-info-default) 12%, transparent); --example-ds-color-info-border: color-mix(in oklch, var(--example-ds-color-info-default) 40%, transparent); --example-ds-color-overlay-default: ; --example-ds-color-overlay-backdrop: color-mix(in oklch, var(--example-ds-color-overlay-default) 60%, transparent); }
}
@layer tokens {
:root { --example-ds-stroke-default: var(--example-ds-borderWidth-default) solid var(--example-ds-color-border-default); --example-ds-stroke-strong: var(--example-ds-borderWidth-default) solid var(--example-ds-color-border-strong); }
}
@layer tokens {
:root { --example-ds-syntax-base: ; --example-ds-syntax-keyword: ; --example-ds-syntax-title: ; --example-ds-syntax-attr: ; --example-ds-syntax-string: ; --example-ds-syntax-builtIn: ; --example-ds-syntax-comment: ; --example-ds-syntax-name: ; --example-ds-syntax-section: ; --example-ds-syntax-bullet: ; --example-ds-syntax-addition: ; --example-ds-syntax-additionBackground: ; --example-ds-syntax-deletion: ; --example-ds-syntax-deletionBackground: ; }
}
@layer tokens {
:root { --example-ds-codeBlock-background: var(--example-ds-color-background-surface); --example-ds-codeBlock-backgroundHeader: var(--example-ds-color-background-subtle); --example-ds-codeBlock-backgroundInline: var(--example-ds-color-background-subtle); --example-ds-codeBlock-backgroundLineHighlight: var(--example-ds-color-background-subtle); --example-ds-codeBlock-border: var(--example-ds-color-border-default); }
}
@layer utilities {
.example-ds-docs-prose-root { font-family: var(--example-ds-fontFamily-sans); font-size: var(--example-ds-fontSize-md); line-height: 1.75; color: var(--example-ds-color-text-primary); }
}
@layer utilities {
html[data-mode="dark"] .example-ds-docs-prose-root { line-height: 1.82; }
}
@layer utilities {
@media (prefers-color-scheme: dark) { html:not([data-mode="light"]) .example-ds-docs-prose-root { line-height: 1.82; } }
}
@layer utilities {
.example-ds-docs-prose-root h1 { font-family: var(--example-ds-fontFamily-display); font-style: italic; font-size: 28px; font-weight: var(--example-ds-fontWeight-bold); letter-spacing: -0.015em; line-height: 1.25; margin-top: 0; margin-bottom: var(--example-ds-space-3); color: var(--example-ds-color-text-primary); }
}
@layer utilities {
@media (max-width: 768px) { .example-ds-docs-prose-root h1 { font-size: 24px; margin-bottom: var(--example-ds-space-2); } }
}
@layer utilities {
.example-ds-docs-prose-root h2 { font-family: var(--example-ds-fontFamily-display); font-style: italic; font-size: 24px; font-weight: var(--example-ds-fontWeight-bold); letter-spacing: -0.015em; line-height: 1.25; margin-top: var(--example-ds-space-8); margin-bottom: var(--example-ds-space-3); padding-top: var(--example-ds-space-5); border-top: var(--example-ds-stroke-strong); color: var(--example-ds-color-text-primary); }
}
@layer utilities {
@media (max-width: 768px) { .example-ds-docs-prose-root h2 { font-size: 21px; margin-top: var(--example-ds-space-6); padding-top: var(--example-ds-space-4); } }
}
@layer utilities {
.example-ds-docs-prose-root > h2:first-of-type, .example-ds-docs-prose-root > h2:first-child { margin-top: var(--example-ds-space-4); padding-top: 0; border-top: none; }
}
@layer utilities {
.example-ds-docs-prose-root h2:first-child { margin-top: 0; }
}
@layer utilities {
.example-ds-docs-prose-root h3 { font-size: 17px; font-weight: var(--example-ds-fontWeight-semibold); line-height: 1.35; margin-top: var(--example-ds-space-5); margin-bottom: var(--example-ds-space-2); color: var(--example-ds-color-text-primary); }
}
@layer utilities {
@media (max-width: 768px) { .example-ds-docs-prose-root h3 { margin-top: var(--example-ds-space-4); } }
}
@layer utilities {
.example-ds-docs-prose-root h4, .example-ds-docs-prose-root h5, .example-ds-docs-prose-root h6 { font-size: var(--example-ds-fontSize-md); font-weight: var(--example-ds-fontWeight-semibold); margin-top: var(--example-ds-space-4); margin-bottom: var(--example-ds-space-1); color: var(--example-ds-color-text-primary); }
}
@layer utilities {
@media (max-width: 768px) { .example-ds-docs-prose-root h4, .example-ds-docs-prose-root h5, .example-ds-docs-prose-root h6 { margin-top: var(--example-ds-space-3); } }
}
@layer utilities {
.example-ds-docs-prose-root h2, .example-ds-docs-prose-root h3, .example-ds-docs-prose-root h4, .example-ds-docs-prose-root h5, .example-ds-docs-prose-root h6 { position: relative; }
}
@layer utilities {
.example-ds-docs-prose-root p { margin-bottom: var(--example-ds-space-4); }
}
@layer utilities {
@media (max-width: 768px) { .example-ds-docs-prose-root p { margin-bottom: var(--example-ds-space-3); } }
}
@layer utilities {
.example-ds-docs-prose-root ul, .example-ds-docs-prose-root ol { margin-bottom: var(--example-ds-space-3); padding-left: var(--example-ds-space-4); }
}
@layer utilities {
@media (max-width: 768px) { .example-ds-docs-prose-root ul, .example-ds-docs-prose-root ol { margin-bottom: var(--example-ds-space-2); padding-left: var(--example-ds-space-3); } }
}
@layer utilities {
.example-ds-docs-prose-root li { margin-bottom: var(--example-ds-space-1); }
}
@layer utilities {
.example-ds-docs-prose-root a { color: var(--example-ds-color-accent-default); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--example-ds-color-accent-default) 40%, transparent); font-weight: var(--example-ds-fontWeight-medium); transition: var(--example-ds-transition-colorShift); }
}
@layer utilities {
.example-ds-docs-prose-root a:hover { color: var(--example-ds-color-accent-hover); text-decoration-color: currentColor; }
}
@layer utilities {
.example-ds-docs-prose-root a:focus-visible { outline: 2px solid var(--example-ds-color-border-focus); outline-offset: 2px; border-radius: var(--example-ds-radius-sm); }
}
@layer utilities {
.example-ds-docs-prose-root code { font-family: var(--example-ds-fontFamily-mono); font-size: 0.92em; font-weight: var(--example-ds-fontWeight-medium); color: var(--example-ds-color-accent-hover); white-space: nowrap; }
}
@layer utilities {
.example-ds-docs-prose-root a code { color: inherit; }
}
@layer utilities {
.example-ds-docs-prose-root a[data-alert-action] { color: inherit; font-weight: inherit; text-decoration: underline; text-decoration-color: currentColor; }
}
@layer utilities {
.example-ds-docs-prose-root a[data-alert-action]:hover { color: inherit; text-decoration: none; }
}
@layer utilities {
.example-ds-docs-prose-root pre:not([data-codeblock-pre]) { font-family: var(--example-ds-fontFamily-mono); font-size: var(--example-ds-fontSize-sm); line-height: 1.6; background-color: var(--example-ds-color-background-subtle); padding: var(--example-ds-space-3); border-radius: var(--example-ds-radius-md); border: 1px solid var(--example-ds-color-border-default); overflow: auto; margin-bottom: var(--example-ds-space-3); }
}
@layer utilities {
@media (max-width: 768px) { .example-ds-docs-prose-root pre:not([data-codeblock-pre]) { padding: var(--example-ds-space-2); margin-bottom: var(--example-ds-space-2); } }
}
@layer utilities {
.example-ds-docs-prose-root pre code { background-color: transparent; padding: 0; border: none; font-size: inherit; font-weight: inherit; color: inherit; white-space: pre; }
}
@layer utilities {
.example-ds-docs-prose-root [data-codeblock] { margin-block: var(--example-ds-space-5); }
}
@layer utilities {
@media (max-width: 768px) { .example-ds-docs-prose-root [data-codeblock] { margin-block: var(--example-ds-space-4); } }
}
@layer utilities {
.example-ds-docs-prose-root [data-codeblock] + [data-codeblock] { margin-top: var(--example-ds-space-3); }
}
@layer utilities {
.example-ds-docs-prose-root [data-codeblock]:first-child { margin-top: 0; }
}
@layer utilities {
.example-ds-docs-prose-root [data-codeblock]:last-child { margin-bottom: 0; }
}
@layer utilities {
.example-ds-docs-prose-root blockquote { margin: var(--example-ds-space-5) 0; padding: var(--example-ds-space-4) var(--example-ds-space-5); border: var(--example-ds-borderWidth-default) solid var(--example-ds-color-border-strong); background-color: var(--example-ds-color-background-subtle); box-shadow: var(--example-ds-shadow-sm); color: var(--example-ds-color-text-primary); font-style: normal; }
}
@layer utilities {
@media (max-width: 768px) { .example-ds-docs-prose-root blockquote { margin: var(--example-ds-space-4) 0; padding: var(--example-ds-space-3) var(--example-ds-space-4); } }
}
@layer utilities {
.example-ds-docs-prose-root blockquote p { margin-bottom: var(--example-ds-space-2); }
}
@layer utilities {
.example-ds-docs-prose-root blockquote p:last-child { margin-bottom: 0; }
}
@layer utilities {
.example-ds-docs-prose-root kbd { font-family: var(--example-ds-fontFamily-mono); font-size: var(--example-ds-fontSize-sm); font-weight: var(--example-ds-fontWeight-medium); padding: 2px var(--example-ds-space-2); border-radius: var(--example-ds-radius-sm); border: 1px solid var(--example-ds-color-border-strong); background-color: var(--example-ds-color-background-surface); box-shadow: 0 1px 0 var(--example-ds-color-border-default); white-space: nowrap; }
}
@layer utilities {
.example-ds-docs-prose-root [data-docs-badge] { display: inline-flex; align-items: center; box-sizing: border-box; font-size: var(--example-ds-fontSize-sm); font-weight: var(--example-ds-fontWeight-medium); line-height: 1.2; padding: 2px var(--example-ds-space-2); border-radius: var(--example-ds-radius-full); border: 1px solid var(--example-ds-color-border-default); background-color: var(--example-ds-color-background-subtle); color: var(--example-ds-color-text-primary); vertical-align: 0.08em; }
}
@layer utilities {
.example-ds-docs-prose-root [data-docs-badge][data-docs-badge-tone="success"] { border-color: color-mix(in srgb, var(--example-ds-color-success-default) 45%, var(--example-ds-color-border-default)); background-color: color-mix(in srgb, var(--example-ds-color-success-default) 14%, var(--example-ds-color-background-surface)); color: color-mix(in srgb, var(--example-ds-color-success-default) 85%, var(--example-ds-color-text-primary)); }
}
@layer utilities {
.example-ds-docs-prose-root [data-docs-badge][data-docs-badge-tone="warning"] { border-color: color-mix(in srgb, var(--example-ds-color-warning-default) 45%, var(--example-ds-color-border-default)); background-color: color-mix(in srgb, var(--example-ds-color-warning-default) 16%, var(--example-ds-color-background-surface)); color: color-mix(in srgb, var(--example-ds-color-warning-default) 75%, var(--example-ds-color-text-primary)); }
}
@layer utilities {
.example-ds-docs-prose-root [data-docs-badge][data-docs-badge-tone="danger"] { border-color: color-mix(in srgb, var(--example-ds-color-danger-default) 45%, var(--example-ds-color-border-default)); background-color: color-mix(in srgb, var(--example-ds-color-danger-default) 12%, var(--example-ds-color-background-surface)); color: color-mix(in srgb, var(--example-ds-color-danger-default) 80%, var(--example-ds-color-text-primary)); }
}
@layer utilities {
.example-ds-docs-prose-root [data-docs-badge][data-docs-badge-tone="info"] { border-color: color-mix(in srgb, var(--example-ds-color-accent-default) 45%, var(--example-ds-color-border-default)); background-color: color-mix(in srgb, var(--example-ds-color-accent-default) 12%, var(--example-ds-color-background-surface)); color: color-mix(in srgb, var(--example-ds-color-accent-default) 75%, var(--example-ds-color-text-primary)); }
}
@layer utilities {
.example-ds-docs-prose-root hr { border-top: 1px solid var(--example-ds-color-border-default); border-right: none; border-bottom: none; border-left: none; margin: var(--example-ds-space-5) 0; }
}
@layer utilities {
@media (max-width: 768px) { .example-ds-docs-prose-root hr { margin: var(--example-ds-space-4) 0; } }
}
@layer utilities {
.example-ds-docs-prose-root table { width: 100%; border-collapse: collapse; margin-block: var(--example-ds-space-4) var(--example-ds-space-5); font-size: var(--example-ds-fontSize-sm); border: var(--example-ds-borderWidth-default) solid var(--example-ds-color-border-strong); }
}
@layer utilities {
.example-ds-docs-prose-root thead { background-color: var(--example-ds-color-background-subtle); border-bottom: var(--example-ds-borderWidth-thick) solid var(--example-ds-color-border-strong); }
}
@layer utilities {
.example-ds-docs-prose-root th, .example-ds-docs-prose-root td { text-align: left; padding: var(--example-ds-space-2) var(--example-ds-space-3); border-bottom: 1px solid var(--example-ds-color-border-default); vertical-align: top; }
}
@layer utilities {
.example-ds-docs-prose-root th { font-weight: var(--example-ds-fontWeight-bold); font-size: var(--example-ds-fontSize-xs); color: var(--example-ds-color-text-primary); text-transform: uppercase; letter-spacing: 0.06em; font-family: var(--example-ds-fontFamily-mono); }
}
@layer utilities {
.example-ds-docs-prose-root tr:last-child td { border-bottom: none; }
}
@layer utilities {
.example-ds-docs-prose-root caption { caption-side: bottom; padding-top: var(--example-ds-space-2); font-size: var(--example-ds-fontSize-sm); color: var(--example-ds-color-text-secondary); text-align: left; }
}
@layer utilities {
.example-ds-docs-prose-root [data-prose-heading-anchor] { margin-left: var(--example-ds-space-2); font-weight: var(--example-ds-fontWeight-medium); color: var(--example-ds-color-text-secondary); text-decoration: none; opacity: 0; transition: opacity var(--duration-medium) var(--easing-standard), color var(--duration-medium) var(--easing-standard); }
}
@layer utilities {
.example-ds-docs-prose-root [data-prose-heading-anchor]::before { content: "#"; font-size: 0.85em; }
}
@layer utilities {
.example-ds-docs-prose-root :is(h1, h2, h3, h4, h5, h6):hover [data-prose-heading-anchor] { opacity: 1; }
}
@layer utilities {
.example-ds-docs-prose-root [data-prose-heading-anchor]:focus-visible { opacity: 1; outline: 2px solid var(--example-ds-color-border-focus); outline-offset: 2px; border-radius: var(--example-ds-radius-sm); }
}
@layer utilities {
.example-ds-docs-prose-tableWrap { overflow-x: auto; margin-bottom: var(--example-ds-space-3); -webkit-overflow-scrolling: touch; }
}
@layer utilities {
.example-ds-ds-hljs-root [data-codeblock] .hljs { color: var(--example-ds-syntax-base); background: transparent; display: block; overflow-x: auto; }
}
@layer utilities {
.example-ds-ds-hljs-root [data-codeblock] .hljs-keyword, .example-ds-ds-hljs-root [data-codeblock] .hljs-meta .hljs-keyword, .example-ds-ds-hljs-root [data-codeblock] .hljs-template-tag, .example-ds-ds-hljs-root [data-codeblock] .hljs-template-variable, .example-ds-ds-hljs-root [data-codeblock] .hljs-type, .example-ds-ds-hljs-root [data-codeblock] .hljs-variable.language_ { color: var(--example-ds-syntax-keyword); }
}
@layer utilities {
.example-ds-ds-hljs-root [data-codeblock] .hljs-title, .example-ds-ds-hljs-root [data-codeblock] .hljs-title.class_, .example-ds-ds-hljs-root [data-codeblock] .hljs-title.class_.inherited__, .example-ds-ds-hljs-root [data-codeblock] .hljs-title.function_ { color: var(--example-ds-syntax-title); }
}
@layer utilities {
.example-ds-ds-hljs-root [data-codeblock] .hljs-attr, .example-ds-ds-hljs-root [data-codeblock] .hljs-attribute, .example-ds-ds-hljs-root [data-codeblock] .hljs-literal, .example-ds-ds-hljs-root [data-codeblock] .hljs-meta, .example-ds-ds-hljs-root [data-codeblock] .hljs-number, .example-ds-ds-hljs-root [data-codeblock] .hljs-operator, .example-ds-ds-hljs-root [data-codeblock] .hljs-variable, .example-ds-ds-hljs-root [data-codeblock] .hljs-selector-attr, .example-ds-ds-hljs-root [data-codeblock] .hljs-selector-class, .example-ds-ds-hljs-root [data-codeblock] .hljs-selector-id { color: var(--example-ds-syntax-attr); }
}
@layer utilities {
.example-ds-ds-hljs-root [data-codeblock] .hljs-regexp, .example-ds-ds-hljs-root [data-codeblock] .hljs-string, .example-ds-ds-hljs-root [data-codeblock] .hljs-meta .hljs-string { color: var(--example-ds-syntax-string); }
}
@layer utilities {
.example-ds-ds-hljs-root [data-codeblock] .hljs-built_in, .example-ds-ds-hljs-root [data-codeblock] .hljs-symbol { color: var(--example-ds-syntax-builtIn); }
}
@layer utilities {
.example-ds-ds-hljs-root [data-codeblock] .hljs-comment, .example-ds-ds-hljs-root [data-codeblock] .hljs-code, .example-ds-ds-hljs-root [data-codeblock] .hljs-formula { color: var(--example-ds-syntax-comment); }
}
@layer utilities {
.example-ds-ds-hljs-root [data-codeblock] .hljs-name, .example-ds-ds-hljs-root [data-codeblock] .hljs-quote, .example-ds-ds-hljs-root [data-codeblock] .hljs-selector-tag, .example-ds-ds-hljs-root [data-codeblock] .hljs-selector-pseudo { color: var(--example-ds-syntax-name); }
}
@layer utilities {
.example-ds-ds-hljs-root [data-codeblock] .hljs-subst { color: var(--example-ds-syntax-base); }
}
@layer utilities {
.example-ds-ds-hljs-root [data-codeblock] .hljs-section { color: var(--example-ds-syntax-section); font-weight: bold; }
}
@layer utilities {
.example-ds-ds-hljs-root [data-codeblock] .hljs-bullet { color: var(--example-ds-syntax-bullet); }
}
@layer utilities {
.example-ds-ds-hljs-root [data-codeblock] .hljs-emphasis { color: var(--example-ds-syntax-base); font-style: italic; }
}
@layer utilities {
.example-ds-ds-hljs-root [data-codeblock] .hljs-strong { color: var(--example-ds-syntax-base); font-weight: bold; }
}
@layer utilities {
.example-ds-ds-hljs-root [data-codeblock] .hljs-addition { color: var(--example-ds-syntax-addition); background-color: var(--example-ds-syntax-additionBackground); }
}
@layer utilities {
.example-ds-ds-hljs-root [data-codeblock] .hljs-deletion { color: var(--example-ds-syntax-deletion); background-color: var(--example-ds-syntax-deletionBackground); }
}
@layer utilities {
.example-ds-ds-layout-base { font-family: var(--example-ds-fontFamily-sans); color: var(--example-ds-color-text-primary); }
}
@layer utilities {
.example-ds-ds-layout-stack { display: grid; gap: var(--example-ds-space-5); }
}
@layer utilities {
.example-ds-ds-layout-section { display: grid; gap: var(--example-ds-space-3); padding: var(--example-ds-space-4); border: 1px solid var(--example-ds-color-border-default); border-radius: var(--example-ds-radius-lg); background-color: var(--example-ds-color-background-surface); box-shadow: var(--example-ds-shadow-xs); }
}
@layer utilities {
.example-ds-ds-layout-row { display: flex; flex-wrap: wrap; gap: var(--example-ds-space-3); align-items: center; }
}
@layer utilities {
.example-ds-ds-text-base { margin: 0; color: var(--example-ds-color-text-primary); }
}
@layer utilities {
.example-ds-ds-text-title { font-size: 28px; font-weight: var(--example-ds-fontWeight-semibold); letter-spacing: -0.02em; }
}
@layer utilities {
.example-ds-ds-text-subtitle { font-size: var(--example-ds-fontSize-lg); color: var(--example-ds-color-text-secondary); }
}
@layer utilities {
.example-ds-ds-text-sectionTitle { font-size: 20px; font-weight: var(--example-ds-fontWeight-semibold); }
}
@layer utilities {
.example-ds-ds-text-label { font-size: var(--example-ds-fontSize-md); font-weight: var(--example-ds-fontWeight-medium); }
}
@layer utilities {
.example-ds-ds-text-caption { font-size: var(--example-ds-fontSize-sm); color: var(--example-ds-color-text-secondary); }
}
@layer components {
.example-ds-command-palette-root { position: fixed; inset: 0; z-index: 450; display: flex; justify-content: center; align-items: flex-start; padding: max(12vh, 72px) var(--example-ds-space-4) var(--example-ds-space-5); pointer-events: none; opacity: 0; visibility: hidden; transition: var(--example-ds-transition-overlayFade); }
}
@layer components {
.example-ds-command-palette-backdrop { position: absolute; inset: 0; background-color: var(--example-ds-color-overlay-backdrop); transition: var(--example-ds-transition-backdrop); }
}
@layer components {
@supports (backdrop-filter: blur(1px)) { .example-ds-command-palette-backdrop { backdrop-filter: blur(10px); } }
}
@layer components {
.example-ds-command-palette-dialog { position: relative; z-index: 1; width: min(560px, 100%); max-height: min(72vh, 640px); display: flex; flex-direction: column; font-family: var(--example-ds-fontFamily-sans); background-color: var(--example-ds-color-background-surface); border-radius: var(--example-ds-radius-lg); border: var(--example-ds-borderWidth-default) solid var(--example-ds-color-border-default); box-shadow: var(--example-ds-shadow-xl); overflow: hidden; opacity: 0; transition: var(--example-ds-transition-panelEnter); }
}
@layer components {
.example-ds-command-palette-inputRow { flex-shrink: 0; display: flex; align-items: center; gap: var(--example-ds-space-2); padding: var(--example-ds-space-3) var(--example-ds-space-4); border-bottom: var(--example-ds-borderWidth-default) solid var(--example-ds-color-border-default); }
}
@layer components {
.example-ds-command-palette-inputIcon { flex-shrink: 0; display: inline-flex; align-items: center; color: var(--example-ds-color-text-placeholder); line-height: 0; }
}
@layer components {
.example-ds-command-palette-input { flex: 1; min-width: 0; border: none; margin: 0; padding: 0; background-color: transparent; font-size: var(--example-ds-fontSize-lg); font-family: var(--example-ds-fontFamily-sans); color: var(--example-ds-color-text-primary); outline: none; }
}
@layer components {
.example-ds-command-palette-input::placeholder { color: var(--example-ds-color-text-placeholder); }
}
@layer components {
.example-ds-command-palette-results { flex: 1; min-height: 0; overflow-y: auto; margin: 0; padding: var(--example-ds-space-1) 0 var(--example-ds-space-2); list-style: none; }
}
@layer components {
.example-ds-command-palette-result { margin: 0; }
}
@layer components {
.example-ds-command-palette-resultLink { display: block; padding: var(--example-ds-space-2) var(--example-ds-space-4); text-decoration: none; color: var(--example-ds-color-text-primary); transition: var(--example-ds-transition-surfaceFast); }
}
@layer components {
.example-ds-command-palette-resultLink:hover { background-color: var(--example-ds-color-accent-subtle); }
}
@layer components {
.example-ds-command-palette-resultLinkActive { background-color: var(--example-ds-color-accent-subtle); }
}
@layer components {
.example-ds-command-palette-resultTitle { display: block; font-size: var(--example-ds-fontSize-md); font-weight: var(--example-ds-fontWeight-semibold); line-height: 1.35; margin-bottom: var(--example-ds-space-1); }
}
@layer components {
.example-ds-command-palette-resultMeta { display: block; font-size: var(--example-ds-fontSize-sm); color: var(--example-ds-color-text-secondary); line-height: 1.35; }
}
@layer components {
.example-ds-command-palette-mark { font-family: inherit; background-color: var(--example-ds-color-accent-subtle); color: var(--example-ds-color-text-primary); border-radius: var(--example-ds-radius-sm); padding: 0 var(--example-ds-space-1); }
}
@layer components {
.example-ds-command-palette-empty { padding: var(--example-ds-space-4) var(--example-ds-space-4); font-size: var(--example-ds-fontSize-sm); color: var(--example-ds-color-text-secondary); line-height: 1.5; }
}
@layer components {
.example-ds-command-palette-root-open-true { pointer-events: auto; opacity: 1; visibility: visible; }
}
@layer components {
.example-ds-command-palette-dialog-open-true { opacity: 1; }
}
@property --example-ds-button-border { syntax: "*"; inherits: false; }
@property --example-ds-button-background { syntax: "*"; inherits: false; }
@property --example-ds-button-foreground { syntax: "*"; inherits: false; }
@layer components {
.example-ds-button-base { --example-ds-button-border: var(--example-ds-color-border-default); --example-ds-button-background: var(--example-ds-color-background-surface); --example-ds-button-foreground: var(--example-ds-color-text-primary); appearance: none; border: 1px solid var(--example-ds-button-border); border-radius: var(--example-ds-radius-md); background-color: var(--example-ds-button-background); color: var(--example-ds-button-foreground); font-size: var(--example-ds-fontSize-md); font-weight: var(--example-ds-fontWeight-medium); padding: var(--example-ds-space-2) var(--example-ds-space-4); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--example-ds-space-2); transition: background-color 140ms ease, border-color 140ms ease, transform 80ms ease; }
}
@layer components {
.example-ds-button-base:hover { border-color: var(--example-ds-color-border-strong); background-color: var(--example-ds-color-background-subtle); }
}
@layer components {
.example-ds-button-base:active { transform: translateY(1px); }
}
@layer components {
.example-ds-button-base:focus-visible { outline: 2px solid var(--example-ds-color-border-focus); outline-offset: 2px; }
}
@layer components {
.example-ds-button-intent-primary { --example-ds-button-border: var(--example-ds-color-accent-default); --example-ds-button-background: var(--example-ds-color-accent-default); --example-ds-button-foreground: var(--example-ds-color-text-onAccent); }
}
@layer components {
.example-ds-button-intent-primary:hover { --example-ds-button-background: var(--example-ds-color-accent-hover); --example-ds-button-border: var(--example-ds-color-accent-hover); }
}
@layer components {
.example-ds-button-intent-secondary { --example-ds-button-background: var(--example-ds-color-background-surface); --example-ds-button-border: var(--example-ds-color-border-default); --example-ds-button-foreground: var(--example-ds-color-text-primary); }
}
@layer components {
.example-ds-button-intent-secondary:hover { border-color: var(--example-ds-color-border-strong); background-color: var(--example-ds-color-background-subtle); }
}
@layer components {
.example-ds-button-intent-ghost { --example-ds-button-background: transparent; --example-ds-button-border: transparent; --example-ds-button-foreground: var(--example-ds-color-text-primary); }
}
@layer components {
.example-ds-button-intent-ghost:hover { background-color: var(--example-ds-color-background-subtle); }
}
@layer components {
.example-ds-code-block-root { border: var(--example-ds-borderWidth-default) solid var(--example-ds-color-border-default); border-radius: var(--example-ds-radius-lg); background-color: var(--example-ds-codeBlock-background); overflow: hidden; box-shadow: var(--example-ds-shadow-lg); }
}
@layer components {
.example-ds-code-block-rootInline { display: inline-flex; align-items: center; gap: var(--example-ds-space-1); border-radius: var(--example-ds-radius-md); border: var(--example-ds-borderWidth-default) solid var(--example-ds-color-border-default); padding: 2px 8px; background-color: var(--example-ds-codeBlock-backgroundInline); }
}
@layer components {
.example-ds-code-block-rootDiff { border-color: var(--example-ds-color-border-strong); }
}
@layer components {
.example-ds-code-block-rootTerminal { background-color: var(--example-ds-color-text-primary); border-color: var(--example-ds-color-text-primary); }
}
@layer components {
.example-ds-code-block-header { display: flex; align-items: center; justify-content: space-between; gap: var(--example-ds-space-2); padding-block: var(--example-ds-space-1); padding-inline: var(--example-ds-space-3); border-bottom: var(--example-ds-borderWidth-default) solid var(--example-ds-color-border-default); background-color: var(--example-ds-codeBlock-backgroundHeader); }
}
@layer components {
.example-ds-code-block-headerTerminal { border-bottom-color: var(--example-ds-color-border-strong); background-color: var(--example-ds-codeBlock-backgroundHeader); }
}
@layer components {
.example-ds-code-block-title { display: flex; align-items: center; gap: var(--example-ds-space-2); min-width: 0; }
}
@layer components {
.example-ds-code-block-filename { font-size: var(--example-ds-fontSize-sm); font-weight: var(--example-ds-fontWeight-medium); color: var(--example-ds-color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@layer components {
.example-ds-code-block-language { font-size: var(--example-ds-fontSize-xs); font-weight: var(--example-ds-fontWeight-bold); font-family: var(--example-ds-fontFamily-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--example-ds-color-text-secondary); white-space: nowrap; }
}
@layer components {
.example-ds-code-block-languageTerminal { color: var(--example-ds-color-text-onAccent); border-color: rgb(255 255 255 / 0.2); }
}
@layer components {
.example-ds-code-block-actions { display: inline-flex; align-items: center; gap: var(--example-ds-space-1); flex-shrink: 0; }
}
@layer components {
.example-ds-code-block-copyButton { appearance: none; border: none; background-color: transparent; color: var(--example-ds-color-text-secondary); border-radius: var(--example-ds-radius-sm); padding-block: var(--example-ds-space-1); padding-inline: var(--example-ds-space-2); font-family: var(--example-ds-fontFamily-mono); font-size: var(--example-ds-fontSize-xs); font-weight: var(--example-ds-fontWeight-semibold); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: var(--example-ds-transition-colorShift); }
}
@layer components {
.example-ds-code-block-copyButton:hover { color: var(--example-ds-color-text-primary); background-color: var(--example-ds-color-background-subtle); }
}
@layer components {
.example-ds-code-block-copyButton:focus-visible { outline: var(--example-ds-borderWidth-thin) solid var(--example-ds-color-border-focus); outline-offset: 2px; }
}
@layer components {
.example-ds-code-block-copyButton[data-copied] { color: var(--example-ds-color-success-default); }
}
@layer components {
.example-ds-code-block-copyButton[data-error] { color: var(--example-ds-color-danger-default); }
}
@layer components {
.example-ds-code-block-copyButtonCopied { color: var(--example-ds-color-success-default); }
}
@layer components {
.example-ds-code-block-copyButtonError { color: var(--example-ds-color-danger-default); }
}
@layer components {
.example-ds-code-block-feedback { font-size: var(--example-ds-fontSize-sm); color: var(--example-ds-color-text-secondary); min-height: 1lh; }
}
@layer components {
.example-ds-code-block-feedbackInline { display: inline-flex; align-items: center; margin-inline-start: var(--example-ds-space-1); }
}
@layer components {
.example-ds-code-block-feedbackToast { position: absolute; right: var(--example-ds-space-3); top: var(--example-ds-space-3); z-index: 1; border: var(--example-ds-borderWidth-default) solid var(--example-ds-color-border-default); background-color: var(--example-ds-codeBlock-background); border-radius: var(--example-ds-radius-md); padding: 2px var(--example-ds-space-2); box-shadow: var(--example-ds-shadow-sm); }
}
@layer components {
.example-ds-code-block-feedbackSuccess { color: var(--example-ds-color-success-default); }
}
@layer components {
.example-ds-code-block-feedbackError { color: var(--example-ds-color-danger-default); }
}
@layer components {
.example-ds-code-block-body { padding: 0; background-color: var(--example-ds-codeBlock-background); }
}
@layer components {
.example-ds-code-block-bodyTerminal { color: var(--example-ds-color-text-onAccent); }
}
@layer components {
.example-ds-code-block-bodyScrollable { overflow-x: auto; }
}
@layer components {
.example-ds-code-block-pre { margin: 0; padding: var(--example-ds-space-4); font-family: var(--example-ds-fontFamily-mono); font-size: var(--example-ds-fontSize-sm); line-height: 1.6; overflow: auto; background-color: transparent; border: none; border-radius: 0; }
}
@layer components {
.example-ds-code-block-preTerminal { color: var(--example-ds-color-text-onAccent); }
}
@layer components {
.example-ds-code-block-preWrap { white-space: pre-wrap; word-break: break-word; overflow-x: visible; }
}
@layer components {
.example-ds-code-block-preScrollX { white-space: pre; overflow-x: auto; }
}
@layer components {
.example-ds-code-block-code { display: block; }
}
@layer components {
.example-ds-code-block-lines { display: grid; gap: 2px; }
}
@layer components {
.example-ds-code-block-line { display: grid; grid-template-columns: auto 1fr; align-items: start; column-gap: var(--example-ds-space-3); border-radius: var(--example-ds-radius-sm); padding-inline: var(--example-ds-space-2); }
}
@layer components {
.example-ds-code-block-lineNumber { min-width: 2ch; text-align: right; font-size: var(--example-ds-fontSize-sm); color: var(--example-ds-color-text-secondary); opacity: 0.8; user-select: none; }
}
@layer components {
.example-ds-code-block-lineContent { min-width: 0; }
}
@layer components {
.example-ds-code-block-lineHighlighted { background-color: var(--example-ds-codeBlock-backgroundLineHighlight); }
}
@layer components {
.example-ds-code-block-lineAdded { background-color: rgb(16 185 129 / 0.12); }
}
@layer components {
.example-ds-code-block-lineDeleted { background-color: rgb(248 113 113 / 0.12); }
}
@property --example-ds-alert-semantic { syntax: "*"; inherits: true; }
@property --example-ds-alert-solidbg { syntax: "*"; inherits: false; }
@property --example-ds-alert-solidfg { syntax: "*"; inherits: false; }
@layer components {
.example-ds-alert-root { display: flex; align-items: flex-start; gap: var(--example-ds-space-3); padding: var(--example-ds-space-4); border-radius: var(--example-ds-radius-md); line-height: 1.55; }
}
@layer components {
.example-ds-alert-icon { flex-shrink: 0; display: inline-flex; margin-top: 2px; font-size: var(--example-ds-fontSize-lg); line-height: 1; }
}
@layer components {
.example-ds-alert-body { flex: 1; min-width: 0; }
}
@layer components {
.example-ds-alert-title { font-size: var(--example-ds-fontSize-md); font-weight: var(--example-ds-fontWeight-semibold); margin: 0; color: var(--example-ds-alert-semantic); }
}
@layer components {
.example-ds-alert-content { font-size: var(--example-ds-fontSize-md); margin: 0; color: inherit; }
}
@layer components {
.example-ds-alert-action { margin-top: var(--example-ds-space-2); }
}
@layer components {
.example-ds-alert-actionLink { font-size: var(--example-ds-fontSize-md); font-weight: var(--example-ds-fontWeight-medium); color: inherit; text-decoration: underline; text-underline-offset: 2px; }
}
@layer components {
.example-ds-alert-actionLink:hover { text-decoration: none; }
}
@layer components {
.example-ds-alert-actionLink:focus-visible { outline: 2px solid var(--example-ds-color-border-focus); outline-offset: 2px; border-radius: var(--example-ds-radius-sm); }
}
@layer components {
.example-ds-alert-root-tone-info { --example-ds-alert-semantic: var(--example-ds-color-accent-default); --example-ds-alert-solidbg: var(--example-ds-color-accent-default); --example-ds-alert-solidfg: var(--example-ds-color-text-onAccent); }
}
@layer components {
.example-ds-alert-root-tone-success { --example-ds-alert-semantic: var(--example-ds-color-success-default); --example-ds-alert-solidbg: var(--example-ds-color-success-solid); --example-ds-alert-solidfg: #ffffff; }
}
@layer components {
.example-ds-alert-root-tone-warning { --example-ds-alert-semantic: var(--example-ds-color-warning-default); --example-ds-alert-solidbg: var(--example-ds-color-warning-default); --example-ds-alert-solidfg: var(--example-ds-color-warning-onSolid); }
}
@layer components {
.example-ds-alert-root-tone-danger { --example-ds-alert-semantic: var(--example-ds-color-danger-default); --example-ds-alert-solidbg: var(--example-ds-color-danger-solid); --example-ds-alert-solidfg: #ffffff; }
}
@layer components {
.example-ds-alert-root-tone-tip { --example-ds-alert-semantic: var(--example-ds-color-info-default); --example-ds-alert-solidbg: var(--example-ds-color-info-default); --example-ds-alert-solidfg: var(--example-ds-color-info-onSolid); }
}
@layer components {
.example-ds-alert-root-appearance-subtle { background-color: color-mix(in srgb, var(--example-ds-alert-semantic) 12%, var(--example-ds-color-background-surface)); border: 1px solid color-mix(in srgb, var(--example-ds-alert-semantic) 38%, var(--example-ds-color-border-default)); color: var(--example-ds-color-text-primary); }
}
@layer components {
.example-ds-alert-root-appearance-solid { background-color: var(--example-ds-alert-solidbg); border: 1px solid var(--example-ds-alert-solidbg); color: var(--example-ds-alert-solidfg); }
}
@layer components {
.example-ds-alert-title-appearance-solid { color: inherit; }
}
@layer components {
.example-ds-alert-content-contentGap-spaced { margin-top: var(--example-ds-space-1); }
}
@layer components {
.example-ds-alert-content-contentGap-flush { margin-top: 0; }
}
@property --example-ds-badge-bordercolor { syntax: "*"; inherits: false; }
@property --example-ds-badge-backgroundcolor { syntax: "*"; inherits: false; }
@property --example-ds-badge-textcolor { syntax: "*"; inherits: false; }
@layer components {
.example-ds-badge-base { --example-ds-badge-bordercolor: var(--example-ds-color-border-default); --example-ds-badge-backgroundcolor: var(--example-ds-color-background-subtle); --example-ds-badge-textcolor: var(--example-ds-color-text-secondary); display: inline-flex; align-items: center; font-size: var(--example-ds-fontSize-sm); font-weight: var(--example-ds-fontWeight-semibold); line-height: 1; padding: var(--example-ds-space-1) var(--example-ds-space-2); border-radius: var(--example-ds-radius-full); border: 1px solid var(--example-ds-badge-bordercolor); background-color: var(--example-ds-badge-backgroundcolor); color: var(--example-ds-badge-textcolor); }
}
@layer components {
.example-ds-badge-tone-accent { --example-ds-badge-bordercolor: color-mix(in srgb, var(--example-ds-color-accent-default) 38%, var(--example-ds-color-border-default)); --example-ds-badge-backgroundcolor: color-mix(in srgb, var(--example-ds-color-accent-default) 12%, var(--example-ds-color-background-surface)); --example-ds-badge-textcolor: var(--example-ds-color-accent-default); }
}
@layer components {
.example-ds-badge-tone-success { --example-ds-badge-bordercolor: color-mix(in srgb, var(--example-ds-color-success-default) 38%, var(--example-ds-color-border-default)); --example-ds-badge-backgroundcolor: color-mix(in srgb, var(--example-ds-color-success-default) 12%, var(--example-ds-color-background-surface)); --example-ds-badge-textcolor: var(--example-ds-color-success-default); }
}
@layer components {
.example-ds-badge-tone-warning { --example-ds-badge-bordercolor: color-mix(in srgb, var(--example-ds-color-warning-default) 38%, var(--example-ds-color-border-default)); --example-ds-badge-backgroundcolor: color-mix(in srgb, var(--example-ds-color-warning-default) 12%, var(--example-ds-color-background-surface)); --example-ds-badge-textcolor: var(--example-ds-color-warning-default); }
}
@layer components {
.example-ds-badge-tone-danger { --example-ds-badge-bordercolor: color-mix(in srgb, var(--example-ds-color-danger-default) 38%, var(--example-ds-color-border-default)); --example-ds-badge-backgroundcolor: color-mix(in srgb, var(--example-ds-color-danger-default) 12%, var(--example-ds-color-background-surface)); --example-ds-badge-textcolor: var(--example-ds-color-danger-default); }
}
@layer components {
.example-ds-badge-tone-tip { --example-ds-badge-bordercolor: color-mix(in srgb, var(--example-ds-color-info-default) 38%, var(--example-ds-color-border-default)); --example-ds-badge-backgroundcolor: color-mix(in srgb, var(--example-ds-color-info-default) 12%, var(--example-ds-color-background-surface)); --example-ds-badge-textcolor: var(--example-ds-color-info-default); }
}
@layer components {
.example-ds-card-root { display: flex; flex-direction: column; gap: var(--example-ds-space-2); padding: var(--example-ds-space-4); border-radius: var(--example-ds-radius-md); border: 1px solid var(--example-ds-color-border-default); background-color: var(--example-ds-color-background-surface); transition: border-color 0.15s ease, box-shadow 0.15s ease; }
}
@layer components {
.example-ds-card-title { margin: 0; font-size: var(--example-ds-fontSize-lg); font-weight: var(--example-ds-fontWeight-semibold); color: var(--example-ds-color-text-primary); line-height: 1.3; }
}
@layer components {
.example-ds-card-body { margin: 0; font-size: var(--example-ds-fontSize-md); color: var(--example-ds-color-text-secondary); line-height: 1.55; }
}
@layer components {
.example-ds-card-grid { display: grid; gap: var(--example-ds-space-4); grid-template-columns: 1fr; }
}
@layer components {
@media (min-width: 640px) { .example-ds-card-grid { grid-template-columns: repeat(2, 1fr); } }
}
@layer components {
.example-ds-card-linkRoot { text-decoration: none; color: inherit; cursor: pointer; }
}
@layer components {
.example-ds-card-linkRoot:hover { border-color: var(--example-ds-color-border-strong); box-shadow: var(--example-ds-shadow-xs); }
}
@layer components {
.example-ds-card-linkRoot:focus-visible { outline: 2px solid var(--example-ds-color-border-focus); outline-offset: 2px; }
}
@layer components {
.example-ds-card-linkTitle { color: var(--example-ds-color-accent-default); text-decoration: none; }
}
@layer components {
.example-ds-card-linkTitle:hover { text-decoration: underline; }
}
@layer components {
.example-ds-card-linkDescription { margin: 0; font-size: var(--example-ds-fontSize-md); color: var(--example-ds-color-text-secondary); line-height: 1.55; }
}
@layer components {
.example-ds-card-linkHint { margin-top: auto; padding-top: var(--example-ds-space-2); font-size: var(--example-ds-fontSize-sm); font-weight: var(--example-ds-fontWeight-medium); color: var(--example-ds-color-text-secondary); }
}
@layer components {
.example-ds-ds-named-cq-root { container-type: inline-size; container-name: example-ds-product-shell; max-width: 40rem; margin: 0 auto; padding: 1rem; border: 1px solid color-mix(in srgb, currentColor 12%, transparent); border-radius: 12px; }
}
@layer components {
.example-ds-ds-named-cq-body { display: flex; flex-direction: column; gap: 12px; }
}
@layer components {
@container example-ds-product-shell (min-width: 480px) { .example-ds-ds-named-cq-body { flex-direction: row; align-items: flex-start; gap: 20px; } }
}
@layer utilities {
.example-ds-steps-root { list-style: none; padding: 0; margin: var(--example-ds-space-4) 0; counter-reset: docs-step; }
}
@layer utilities {
.example-ds-steps-root > li { position: relative; list-style: none; padding-left: calc(var(--example-ds-space-5) + var(--example-ds-space-3)); margin-bottom: var(--example-ds-space-5); counter-increment: docs-step; font-size: var(--example-ds-fontSize-md); color: var(--example-ds-color-text-primary); line-height: 1.6; }
}
@layer utilities {
.example-ds-steps-root > li:last-child { margin-bottom: 0; }
}
@layer utilities {
.example-ds-steps-root > li::before { content: counter(docs-step); position: absolute; left: 0; top: 0; width: var(--example-ds-space-5); height: var(--example-ds-space-5); display: flex; align-items: center; justify-content: center; font-size: var(--example-ds-fontSize-sm); font-weight: var(--example-ds-fontWeight-semibold); color: var(--example-ds-color-text-onAccent); background-color: var(--example-ds-color-accent-default); border-radius: var(--example-ds-radius-full); line-height: 1; }
}
@layer utilities {
.example-ds-steps-root > li :first-child { margin-top: 0; }
}
@layer utilities {
.example-ds-steps-root > li :last-child { margin-bottom: 0; }
}
@layer components {
.example-ds-fileTree-root { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: var(--example-ds-fontSize-sm); line-height: 1.5; color: var(--example-ds-color-text-primary); margin: var(--example-ds-space-3) 0; padding: var(--example-ds-space-3); border-radius: var(--example-ds-radius-md); border: 1px solid var(--example-ds-color-border-default); background-color: var(--example-ds-color-background-subtle); overflow-x: auto; }
}
@layer components {
.example-ds-fileTree-list { list-style: none; padding: 0; margin: 0; }
}
@layer components {
.example-ds-fileTree-item { list-style: none; margin: 0; padding: 0; }
}
@layer components {
.example-ds-fileTree-listNested { list-style: none; margin-top: var(--example-ds-space-1); margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: var(--example-ds-space-4); border-left: 1px solid var(--example-ds-color-border-default); }
}
@layer components {
.example-ds-fileTree-row { display: block; padding: var(--example-ds-space-1) 0; color: var(--example-ds-color-text-primary); }
}
@layer components {
.example-ds-fileTree-folder { font-weight: var(--example-ds-fontWeight-semibold); color: var(--example-ds-color-text-primary); }
}
@layer components {
.example-ds-fileTree-file { color: var(--example-ds-color-text-secondary); }
}
@layer components {
.example-ds-checkbox-root { display: inline-flex; align-items: center; gap: var(--example-ds-space-2); cursor: pointer; }
}
@layer components {
.example-ds-checkbox-box { width: 18px; height: 18px; border-radius: var(--example-ds-radius-sm); border: 1px solid var(--example-ds-color-border-strong); background-color: var(--example-ds-color-background-surface); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: var(--example-ds-fontWeight-semibold); color: var(--example-ds-color-text-onAccent); }
}
@layer components {
.example-ds-checkbox-box[data-selected] { background-color: var(--example-ds-color-accent-default); border-color: var(--example-ds-color-accent-default); }
}
@layer components {
.example-ds-checkbox-label { font-size: var(--example-ds-fontSize-md); }
}
@layer components {
.example-ds-dialog-overlay { position: fixed; inset: 0; background-color: var(--example-ds-color-overlay-default); display: grid; place-items: center; padding: var(--example-ds-space-4); }
}
@layer components {
.example-ds-dialog-modal { width: min(480px, 100%); background-color: var(--example-ds-color-background-surface); border-radius: var(--example-ds-radius-lg); border: 1px solid var(--example-ds-color-border-default); box-shadow: var(--example-ds-shadow-md); padding: var(--example-ds-space-4); }
}
@layer components {
.example-ds-dialog-content { display: grid; gap: var(--example-ds-space-3); }
}
@layer components {
.example-ds-dialog-heading { font-size: 18px; font-weight: var(--example-ds-fontWeight-semibold); margin: 0; }
}
@layer components {
.example-ds-dialog-description { margin: 0; font-size: var(--example-ds-fontSize-sm); color: var(--example-ds-color-text-secondary); }
}
@layer components {
.example-ds-link { color: var(--example-ds-color-accent-default); font-size: var(--example-ds-fontSize-md); text-decoration: none; font-weight: var(--example-ds-fontWeight-medium); }
}
@layer components {
.example-ds-link:hover { text-decoration: underline; }
}
@layer components {
.example-ds-link:focus-visible { outline: 2px solid var(--example-ds-color-border-focus); outline-offset: 2px; border-radius: var(--example-ds-radius-sm); }
}
@layer components {
.example-ds-radio-group { display: grid; gap: var(--example-ds-space-1); }
}
@layer components {
.example-ds-radio-item { display: inline-flex; align-items: center; gap: var(--example-ds-space-2); cursor: pointer; }
}
@layer components {
.example-ds-radio-control { width: 18px; height: 18px; border-radius: var(--example-ds-radius-full); border: 1px solid var(--example-ds-color-border-strong); display: inline-flex; align-items: center; justify-content: center; }
}
@layer components {
.example-ds-radio-control::before { content: ""; width: 8px; height: 8px; border-radius: var(--example-ds-radius-full); background-color: transparent; transition: background-color 120ms ease; }
}
@layer components {
.example-ds-radio-control[data-selected]::before { background-color: var(--example-ds-color-accent-default); }
}
@layer components {
.example-ds-radio-label { font-size: var(--example-ds-fontSize-md); }
}
@layer components {
.example-ds-radio-groupLabel { font-size: var(--example-ds-fontSize-md); font-weight: var(--example-ds-fontWeight-medium); color: var(--example-ds-color-text-primary); }
}
@layer components {
.example-ds-select-root { display: grid; gap: var(--example-ds-space-1); min-width: 240px; }
}
@layer components {
.example-ds-select-label { font-size: var(--example-ds-fontSize-md); font-weight: var(--example-ds-fontWeight-medium); color: var(--example-ds-color-text-primary); }
}
@layer components {
.example-ds-select-trigger { text-align: left; border: 1px solid var(--example-ds-color-border-default); border-radius: var(--example-ds-radius-md); padding: var(--example-ds-space-2) var(--example-ds-space-3); background-color: var(--example-ds-color-background-surface); color: var(--example-ds-color-text-primary); font-size: var(--example-ds-fontSize-md); cursor: pointer; }
}
@layer components {
.example-ds-select-trigger:focus-visible { outline: 2px solid var(--example-ds-color-border-focus); outline-offset: 1px; border-color: var(--example-ds-color-border-focus); }
}
@layer components {
.example-ds-select-popover { border: 1px solid var(--example-ds-color-border-default); border-radius: var(--example-ds-radius-md); background-color: var(--example-ds-color-background-surface); box-shadow: var(--example-ds-shadow-md); padding: var(--example-ds-space-1); }
}
@layer components {
.example-ds-select-item { font-size: var(--example-ds-fontSize-md); padding: var(--example-ds-space-2) var(--example-ds-space-3); border-radius: var(--example-ds-radius-sm); cursor: pointer; }
}
@layer components {
.example-ds-select-item[data-focused] { background-color: var(--example-ds-color-background-subtle); }
}
@layer components {
.example-ds-select-item[data-selected] { color: var(--example-ds-color-accent-default); font-weight: var(--example-ds-fontWeight-semibold); }
}
@layer components {
.example-ds-switch-root { display: inline-flex; align-items: center; gap: var(--example-ds-space-2); cursor: pointer; }
}
@layer components {
.example-ds-switch-track { position: relative; width: 40px; height: 24px; border-radius: var(--example-ds-radius-full); background-color: var(--example-ds-color-border-default); transition: background-color 140ms ease; }
}
@layer components {
.example-ds-switch-track[data-selected] { background-color: var(--example-ds-color-accent-default); }
}
@layer components {
.example-ds-switch-thumb { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: var(--example-ds-radius-full); background-color: var(--example-ds-color-background-surface); transition: transform 140ms ease; }
}
@layer components {
.example-ds-switch-thumb[data-selected] { transform: translateX(16px); }
}
@layer components {
.example-ds-switch-label { font-size: var(--example-ds-fontSize-md); }
}
@layer components {
.example-ds-tabs-root { display: grid; gap: var(--example-ds-space-3); }
}
@layer components {
.example-ds-tabs-list { display: inline-flex; gap: var(--example-ds-space-1); border-bottom: 1px solid var(--example-ds-color-border-default); }
}
@layer components {
.example-ds-tabs-tab { border-top: none; border-right: none; border-left: none; border-bottom: var(--example-ds-borderWidth-default) solid transparent; background-color: transparent; padding: var(--example-ds-space-2) var(--example-ds-space-3); color: var(--example-ds-color-text-secondary); cursor: pointer; font-size: var(--example-ds-fontSize-md); }
}
@layer components {
.example-ds-tabs-tab[data-selected] { color: var(--example-ds-color-text-primary); border-bottom-color: var(--example-ds-color-accent-default); font-weight: var(--example-ds-fontWeight-semibold); }
}
@layer components {
.example-ds-tabs-panel { padding: var(--example-ds-space-3); background-color: var(--example-ds-color-background-subtle); border-radius: var(--example-ds-radius-md); border: 1px solid var(--example-ds-color-border-default); }
}
@layer components {
.example-ds-text-area-field-root { display: grid; gap: var(--example-ds-space-1); }
}
@layer components {
.example-ds-text-area-field-label { font-size: var(--example-ds-fontSize-md); font-weight: var(--example-ds-fontWeight-medium); color: var(--example-ds-color-text-primary); }
}
@layer components {
.example-ds-text-area-field-input { border: 1px solid var(--example-ds-color-border-default); border-radius: var(--example-ds-radius-md); padding: var(--example-ds-space-2) var(--example-ds-space-3); font-size: var(--example-ds-fontSize-md); background-color: var(--example-ds-color-background-surface); color: var(--example-ds-color-text-primary); min-height: 88px; resize: vertical; }
}
@layer components {
.example-ds-text-area-field-input:focus { outline: 2px solid var(--example-ds-color-border-focus); outline-offset: 1px; border-color: var(--example-ds-color-border-focus); }
}
@layer components {
.example-ds-text-area-field-input::placeholder { color: var(--example-ds-color-text-secondary); }
}
@layer components {
.example-ds-text-area-field-description { font-size: var(--example-ds-fontSize-sm); color: var(--example-ds-color-text-secondary); }
}
@layer components {
.example-ds-text-area-field-error { font-size: var(--example-ds-fontSize-sm); color: var(--example-ds-color-danger-default); }
}
@layer components {
.example-ds-text-field-root { display: grid; gap: var(--example-ds-space-1); min-width: 240px; }
}
@layer components {
.example-ds-text-field-label { font-size: var(--example-ds-fontSize-md); font-weight: var(--example-ds-fontWeight-medium); color: var(--example-ds-color-text-primary); }
}
@layer components {
.example-ds-text-field-input { border: 1px solid var(--example-ds-color-border-default); border-radius: var(--example-ds-radius-md); padding: var(--example-ds-space-2) var(--example-ds-space-3); font-size: var(--example-ds-fontSize-md); background-color: var(--example-ds-color-background-surface); color: var(--example-ds-color-text-primary); }
}
@layer components {
.example-ds-text-field-input:focus { outline: 2px solid var(--example-ds-color-border-focus); outline-offset: 1px; border-color: var(--example-ds-color-border-focus); }
}
@layer components {
.example-ds-text-field-input::placeholder { color: var(--example-ds-color-text-secondary); }
}
@layer components {
.example-ds-text-field-description { font-size: var(--example-ds-fontSize-sm); color: var(--example-ds-color-text-secondary); }
}
@layer components {
.example-ds-text-field-error { font-size: var(--example-ds-fontSize-sm); color: var(--example-ds-color-danger-default); }
}
@layer tokens {
.theme-example-ds-default { --example-ds-color-background-app: #F5F1E9; --example-ds-color-background-surface: #FAF8F2; --example-ds-color-background-subtle: var(--example-ds-palette-sand-2); --example-ds-color-background-elevated: #FFFCF6; --example-ds-color-text-primary: #14110D; --example-ds-color-text-secondary: var(--example-ds-palette-stone-8); --example-ds-color-text-onAccent: var(--example-ds-palette-neutral-1); --example-ds-color-text-onDanger: var(--example-ds-palette-neutral-1); --example-ds-color-accent-default: var(--example-ds-palette-sky-7); --example-ds-color-accent-hover: var(--example-ds-palette-sky-8); --example-ds-color-border-default: #000; --example-ds-color-border-strong: #000; --example-ds-color-border-focus: var(--example-ds-palette-blue-5); --example-ds-color-shadow-offset: color-mix(in oklch, var(--example-ds-palette-sand-2) 50%, transparent); --example-ds-color-danger-default: var(--example-ds-palette-red-7); --example-ds-color-danger-solid: var(--example-ds-palette-red-8); --example-ds-color-success-default: var(--example-ds-palette-green-7); --example-ds-color-success-solid: var(--example-ds-palette-green-8); --example-ds-color-warning-default: var(--example-ds-palette-amber-7); --example-ds-color-warning-onSolid: var(--example-ds-palette-stone-10); --example-ds-color-info-default: var(--example-ds-palette-violet-7); --example-ds-color-info-onSolid: var(--example-ds-palette-neutral-1); --example-ds-color-overlay-default: color-mix(in oklch, var(--example-ds-palette-slate-10) 55%, transparent); --example-ds-syntax-base: oklch(24.8% 0.008 264); --example-ds-syntax-keyword: oklch(54.5% 0.24 301); --example-ds-syntax-title: oklch(58.5% 0.22 248); --example-ds-syntax-attr: oklch(50% 0.18 68); --example-ds-syntax-string: oklch(53.2% 0.18 178); --example-ds-syntax-builtIn: oklch(56.5% 0.22 48); --example-ds-syntax-comment: oklch(66.4% 0.014 264); --example-ds-syntax-name: oklch(57.5% 0.18 29); --example-ds-syntax-section: oklch(55.2% 0.24 271); --example-ds-syntax-bullet: oklch(55.5% 0.22 66); --example-ds-syntax-addition: oklch(58.8% 0.22 176); --example-ds-syntax-additionBackground: oklch(99.3% 0.01 160); --example-ds-syntax-deletion: oklch(57.5% 0.18 29); --example-ds-syntax-deletionBackground: oklch(99.7% 0.008 25); --example-ds-shadow-xs: 1px 1px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-sm: 2px 2px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-md: 3px 3px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-lg: 4px 4px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-xl: 5px 5px 0 0 var(--example-ds-color-shadow-offset); }
}
@layer tokens {
@media (prefers-color-scheme: dark) { .theme-example-ds-default { --example-ds-color-background-app: oklch(23% 0.012 88); --example-ds-color-background-surface: oklch(27% 0.011 88); --example-ds-color-background-subtle: oklch(31% 0.01 88); --example-ds-color-background-elevated: oklch(27% 0.011 88); --example-ds-color-text-primary: var(--example-ds-palette-slate-1); --example-ds-color-text-secondary: var(--example-ds-palette-slate-3); --example-ds-color-text-onAccent: var(--example-ds-palette-neutral-1); --example-ds-color-text-onDanger: var(--example-ds-palette-neutral-1); --example-ds-color-accent-default: var(--example-ds-palette-blue-4); --example-ds-color-accent-hover: var(--example-ds-palette-blue-3); --example-ds-color-border-default: oklch(40% 0.02 88); --example-ds-color-border-strong: oklch(54% 0.026 88); --example-ds-color-border-focus: var(--example-ds-palette-blue-4); --example-ds-color-shadow-offset: oklch(6.5% 0.035 88); --example-ds-color-danger-default: var(--example-ds-palette-red-4); --example-ds-color-danger-solid: var(--example-ds-palette-red-7); --example-ds-color-success-default: var(--example-ds-palette-green-4); --example-ds-color-success-solid: var(--example-ds-palette-green-7); --example-ds-color-warning-default: var(--example-ds-palette-amber-4); --example-ds-color-warning-onSolid: var(--example-ds-palette-stone-10); --example-ds-color-info-default: var(--example-ds-palette-violet-4); --example-ds-color-info-onSolid: var(--example-ds-palette-neutral-1); --example-ds-color-overlay-default: color-mix(in oklch, var(--example-ds-palette-slate-10) 70%, transparent); --example-ds-syntax-base: oklch(90% 0.002 264); --example-ds-syntax-keyword: oklch(79.5% 0.17 295); --example-ds-syntax-title: oklch(82.5% 0.16 245); --example-ds-syntax-attr: oklch(77.2% 0.24 60); --example-ds-syntax-string: oklch(81.5% 0.2 170); --example-ds-syntax-builtIn: oklch(79.5% 0.22 45); --example-ds-syntax-comment: oklch(77.5% 0.012 264); --example-ds-syntax-name: oklch(80.3% 0.22 27.5); --example-ds-syntax-section: oklch(79% 0.17 265); --example-ds-syntax-bullet: oklch(67.5% 0.28 62); --example-ds-syntax-addition: oklch(81.5% 0.2 170); --example-ds-syntax-additionBackground: oklch(18% 0.04 170); --example-ds-syntax-deletion: oklch(80.3% 0.22 27.5); --example-ds-syntax-deletionBackground: oklch(18% 0.04 30); --example-ds-shadow-xs: 1px 1px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-sm: 2px 2px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-md: 3px 3px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-lg: 4px 4px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-xl: 5px 5px 0 0 var(--example-ds-color-shadow-offset); } }
}
@layer tokens {
.theme-example-ds-default[data-mode="dark"] { --example-ds-color-background-app: oklch(23% 0.012 88); --example-ds-color-background-surface: oklch(27% 0.011 88); --example-ds-color-background-subtle: oklch(31% 0.01 88); --example-ds-color-background-elevated: oklch(27% 0.011 88); --example-ds-color-text-primary: var(--example-ds-palette-slate-1); --example-ds-color-text-secondary: var(--example-ds-palette-slate-3); --example-ds-color-text-onAccent: var(--example-ds-palette-neutral-1); --example-ds-color-text-onDanger: var(--example-ds-palette-neutral-1); --example-ds-color-accent-default: var(--example-ds-palette-blue-4); --example-ds-color-accent-hover: var(--example-ds-palette-blue-3); --example-ds-color-border-default: oklch(40% 0.02 88); --example-ds-color-border-strong: oklch(54% 0.026 88); --example-ds-color-border-focus: var(--example-ds-palette-blue-4); --example-ds-color-shadow-offset: oklch(6.5% 0.035 88); --example-ds-color-danger-default: var(--example-ds-palette-red-4); --example-ds-color-danger-solid: var(--example-ds-palette-red-7); --example-ds-color-success-default: var(--example-ds-palette-green-4); --example-ds-color-success-solid: var(--example-ds-palette-green-7); --example-ds-color-warning-default: var(--example-ds-palette-amber-4); --example-ds-color-warning-onSolid: var(--example-ds-palette-stone-10); --example-ds-color-info-default: var(--example-ds-palette-violet-4); --example-ds-color-info-onSolid: var(--example-ds-palette-neutral-1); --example-ds-color-overlay-default: color-mix(in oklch, var(--example-ds-palette-slate-10) 70%, transparent); --example-ds-syntax-base: oklch(90% 0.002 264); --example-ds-syntax-keyword: oklch(79.5% 0.17 295); --example-ds-syntax-title: oklch(82.5% 0.16 245); --example-ds-syntax-attr: oklch(77.2% 0.24 60); --example-ds-syntax-string: oklch(81.5% 0.2 170); --example-ds-syntax-builtIn: oklch(79.5% 0.22 45); --example-ds-syntax-comment: oklch(77.5% 0.012 264); --example-ds-syntax-name: oklch(80.3% 0.22 27.5); --example-ds-syntax-section: oklch(79% 0.17 265); --example-ds-syntax-bullet: oklch(67.5% 0.28 62); --example-ds-syntax-addition: oklch(81.5% 0.2 170); --example-ds-syntax-additionBackground: oklch(18% 0.04 170); --example-ds-syntax-deletion: oklch(80.3% 0.22 27.5); --example-ds-syntax-deletionBackground: oklch(18% 0.04 30); --example-ds-shadow-xs: 1px 1px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-sm: 2px 2px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-md: 3px 3px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-lg: 4px 4px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-xl: 5px 5px 0 0 var(--example-ds-color-shadow-offset); }
}
@layer tokens {
@media (prefers-color-scheme: dark) { .theme-example-ds-default[data-mode="light"] { --example-ds-color-background-app: #F5F1E9; --example-ds-color-background-surface: #FAF8F2; --example-ds-color-background-subtle: var(--example-ds-palette-sand-2); --example-ds-color-background-elevated: #FFFCF6; --example-ds-color-text-primary: #14110D; --example-ds-color-text-secondary: var(--example-ds-palette-stone-8); --example-ds-color-text-onAccent: var(--example-ds-palette-neutral-1); --example-ds-color-text-onDanger: var(--example-ds-palette-neutral-1); --example-ds-color-accent-default: var(--example-ds-palette-sky-7); --example-ds-color-accent-hover: var(--example-ds-palette-sky-8); --example-ds-color-border-default: #000; --example-ds-color-border-strong: #000; --example-ds-color-border-focus: var(--example-ds-palette-blue-5); --example-ds-color-shadow-offset: color-mix(in oklch, var(--example-ds-palette-sand-2) 50%, transparent); --example-ds-color-danger-default: var(--example-ds-palette-red-7); --example-ds-color-danger-solid: var(--example-ds-palette-red-8); --example-ds-color-success-default: var(--example-ds-palette-green-7); --example-ds-color-success-solid: var(--example-ds-palette-green-8); --example-ds-color-warning-default: var(--example-ds-palette-amber-7); --example-ds-color-warning-onSolid: var(--example-ds-palette-stone-10); --example-ds-color-info-default: var(--example-ds-palette-violet-7); --example-ds-color-info-onSolid: var(--example-ds-palette-neutral-1); --example-ds-color-overlay-default: color-mix(in oklch, var(--example-ds-palette-slate-10) 55%, transparent); --example-ds-syntax-base: oklch(24.8% 0.008 264); --example-ds-syntax-keyword: oklch(54.5% 0.24 301); --example-ds-syntax-title: oklch(58.5% 0.22 248); --example-ds-syntax-attr: oklch(50% 0.18 68); --example-ds-syntax-string: oklch(53.2% 0.18 178); --example-ds-syntax-builtIn: oklch(56.5% 0.22 48); --example-ds-syntax-comment: oklch(66.4% 0.014 264); --example-ds-syntax-name: oklch(57.5% 0.18 29); --example-ds-syntax-section: oklch(55.2% 0.24 271); --example-ds-syntax-bullet: oklch(55.5% 0.22 66); --example-ds-syntax-addition: oklch(58.8% 0.22 176); --example-ds-syntax-additionBackground: oklch(99.3% 0.01 160); --example-ds-syntax-deletion: oklch(57.5% 0.18 29); --example-ds-syntax-deletionBackground: oklch(99.7% 0.008 25); --example-ds-shadow-xs: 1px 1px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-sm: 2px 2px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-md: 3px 3px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-lg: 4px 4px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-xl: 5px 5px 0 0 var(--example-ds-color-shadow-offset); } }
}
@layer tokens {
.theme-example-ds-forest { --example-ds-color-background-app: var(--example-ds-palette-sage-1); --example-ds-color-background-surface: var(--example-ds-palette-neutral-1); --example-ds-color-background-subtle: var(--example-ds-palette-sage-2); --example-ds-color-background-elevated: var(--example-ds-palette-neutral-1); --example-ds-color-text-primary: var(--example-ds-palette-sage-10); --example-ds-color-text-secondary: var(--example-ds-palette-sage-7); --example-ds-color-text-onAccent: #000; --example-ds-color-text-onDanger: var(--example-ds-palette-neutral-1); --example-ds-color-accent-default: var(--example-ds-palette-green-6); --example-ds-color-accent-hover: var(--example-ds-palette-green-7); --example-ds-color-border-default: #000; --example-ds-color-border-strong: #000; --example-ds-color-border-focus: var(--example-ds-palette-green-5); --example-ds-color-shadow-offset: color-mix(in oklch, var(--example-ds-palette-sage-2) 50%, transparent); --example-ds-color-danger-default: var(--example-ds-palette-red-7); --example-ds-color-danger-solid: var(--example-ds-palette-red-8); --example-ds-color-success-default: var(--example-ds-palette-green-7); --example-ds-color-success-solid: var(--example-ds-palette-green-8); --example-ds-color-warning-default: var(--example-ds-palette-amber-7); --example-ds-color-warning-onSolid: var(--example-ds-palette-stone-10); --example-ds-color-info-default: var(--example-ds-palette-jade-7); --example-ds-color-info-onSolid: var(--example-ds-palette-neutral-1); --example-ds-color-overlay-default: color-mix(in oklch, var(--example-ds-palette-sage-10) 55%, transparent); --example-ds-syntax-base: oklch(24.8% 0.008 264); --example-ds-syntax-keyword: oklch(54.5% 0.24 301); --example-ds-syntax-title: oklch(58.5% 0.22 248); --example-ds-syntax-attr: oklch(50% 0.18 68); --example-ds-syntax-string: oklch(53.2% 0.18 178); --example-ds-syntax-builtIn: oklch(56.5% 0.22 48); --example-ds-syntax-comment: oklch(66.4% 0.014 264); --example-ds-syntax-name: oklch(57.5% 0.18 29); --example-ds-syntax-section: oklch(55.2% 0.24 271); --example-ds-syntax-bullet: oklch(55.5% 0.22 66); --example-ds-syntax-addition: oklch(58.8% 0.22 176); --example-ds-syntax-additionBackground: oklch(99.3% 0.01 160); --example-ds-syntax-deletion: oklch(57.5% 0.18 29); --example-ds-syntax-deletionBackground: oklch(99.7% 0.008 25); --example-ds-shadow-xs: 1px 1px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-sm: 2px 2px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-md: 3px 3px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-lg: 4px 4px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-xl: 5px 5px 0 0 var(--example-ds-color-shadow-offset); }
}
@layer tokens {
@media (prefers-color-scheme: dark) { .theme-example-ds-forest { --example-ds-color-background-app: oklch(23% 0.022 165); --example-ds-color-background-surface: oklch(27% 0.02 165); --example-ds-color-background-subtle: oklch(31% 0.018 165); --example-ds-color-background-elevated: oklch(27% 0.02 165); --example-ds-color-text-primary: var(--example-ds-palette-sage-1); --example-ds-color-text-secondary: var(--example-ds-palette-sage-3); --example-ds-color-text-onAccent: #000; --example-ds-color-text-onDanger: var(--example-ds-palette-neutral-1); --example-ds-color-accent-default: var(--example-ds-palette-green-3); --example-ds-color-accent-hover: var(--example-ds-palette-green-2); --example-ds-color-border-default: oklch(40% 0.02 165); --example-ds-color-border-strong: oklch(54% 0.026 165); --example-ds-color-border-focus: var(--example-ds-palette-green-4); --example-ds-color-shadow-offset: oklch(6.5% 0.035 165); --example-ds-color-danger-default: var(--example-ds-palette-red-4); --example-ds-color-danger-solid: var(--example-ds-palette-red-7); --example-ds-color-success-default: var(--example-ds-palette-green-4); --example-ds-color-success-solid: var(--example-ds-palette-green-7); --example-ds-color-warning-default: var(--example-ds-palette-amber-4); --example-ds-color-warning-onSolid: var(--example-ds-palette-stone-10); --example-ds-color-info-default: var(--example-ds-palette-jade-4); --example-ds-color-info-onSolid: var(--example-ds-palette-neutral-1); --example-ds-color-overlay-default: color-mix(in oklch, var(--example-ds-palette-sage-10) 70%, transparent); --example-ds-syntax-base: oklch(90% 0.002 264); --example-ds-syntax-keyword: oklch(79.5% 0.17 295); --example-ds-syntax-title: oklch(82.5% 0.16 245); --example-ds-syntax-attr: oklch(77.2% 0.24 60); --example-ds-syntax-string: oklch(81.5% 0.2 170); --example-ds-syntax-builtIn: oklch(79.5% 0.22 45); --example-ds-syntax-comment: oklch(77.5% 0.012 264); --example-ds-syntax-name: oklch(80.3% 0.22 27.5); --example-ds-syntax-section: oklch(79% 0.17 265); --example-ds-syntax-bullet: oklch(67.5% 0.28 62); --example-ds-syntax-addition: oklch(81.5% 0.2 170); --example-ds-syntax-additionBackground: oklch(18% 0.04 170); --example-ds-syntax-deletion: oklch(80.3% 0.22 27.5); --example-ds-syntax-deletionBackground: oklch(18% 0.04 30); --example-ds-shadow-xs: 1px 1px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-sm: 2px 2px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-md: 3px 3px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-lg: 4px 4px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-xl: 5px 5px 0 0 var(--example-ds-color-shadow-offset); } }
}
@layer tokens {
.theme-example-ds-forest[data-mode="dark"] { --example-ds-color-background-app: oklch(23% 0.022 165); --example-ds-color-background-surface: oklch(27% 0.02 165); --example-ds-color-background-subtle: oklch(31% 0.018 165); --example-ds-color-background-elevated: oklch(27% 0.02 165); --example-ds-color-text-primary: var(--example-ds-palette-sage-1); --example-ds-color-text-secondary: var(--example-ds-palette-sage-3); --example-ds-color-text-onAccent: #000; --example-ds-color-text-onDanger: var(--example-ds-palette-neutral-1); --example-ds-color-accent-default: var(--example-ds-palette-green-3); --example-ds-color-accent-hover: var(--example-ds-palette-green-2); --example-ds-color-border-default: oklch(40% 0.02 165); --example-ds-color-border-strong: oklch(54% 0.026 165); --example-ds-color-border-focus: var(--example-ds-palette-green-4); --example-ds-color-shadow-offset: oklch(6.5% 0.035 165); --example-ds-color-danger-default: var(--example-ds-palette-red-4); --example-ds-color-danger-solid: var(--example-ds-palette-red-7); --example-ds-color-success-default: var(--example-ds-palette-green-4); --example-ds-color-success-solid: var(--example-ds-palette-green-7); --example-ds-color-warning-default: var(--example-ds-palette-amber-4); --example-ds-color-warning-onSolid: var(--example-ds-palette-stone-10); --example-ds-color-info-default: var(--example-ds-palette-jade-4); --example-ds-color-info-onSolid: var(--example-ds-palette-neutral-1); --example-ds-color-overlay-default: color-mix(in oklch, var(--example-ds-palette-sage-10) 70%, transparent); --example-ds-syntax-base: oklch(90% 0.002 264); --example-ds-syntax-keyword: oklch(79.5% 0.17 295); --example-ds-syntax-title: oklch(82.5% 0.16 245); --example-ds-syntax-attr: oklch(77.2% 0.24 60); --example-ds-syntax-string: oklch(81.5% 0.2 170); --example-ds-syntax-builtIn: oklch(79.5% 0.22 45); --example-ds-syntax-comment: oklch(77.5% 0.012 264); --example-ds-syntax-name: oklch(80.3% 0.22 27.5); --example-ds-syntax-section: oklch(79% 0.17 265); --example-ds-syntax-bullet: oklch(67.5% 0.28 62); --example-ds-syntax-addition: oklch(81.5% 0.2 170); --example-ds-syntax-additionBackground: oklch(18% 0.04 170); --example-ds-syntax-deletion: oklch(80.3% 0.22 27.5); --example-ds-syntax-deletionBackground: oklch(18% 0.04 30); --example-ds-shadow-xs: 1px 1px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-sm: 2px 2px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-md: 3px 3px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-lg: 4px 4px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-xl: 5px 5px 0 0 var(--example-ds-color-shadow-offset); }
}
@layer tokens {
@media (prefers-color-scheme: dark) { .theme-example-ds-forest[data-mode="light"] { --example-ds-color-background-app: var(--example-ds-palette-sage-1); --example-ds-color-background-surface: var(--example-ds-palette-neutral-1); --example-ds-color-background-subtle: var(--example-ds-palette-sage-2); --example-ds-color-background-elevated: var(--example-ds-palette-neutral-1); --example-ds-color-text-primary: var(--example-ds-palette-sage-10); --example-ds-color-text-secondary: var(--example-ds-palette-sage-7); --example-ds-color-text-onAccent: #000; --example-ds-color-text-onDanger: var(--example-ds-palette-neutral-1); --example-ds-color-accent-default: var(--example-ds-palette-green-6); --example-ds-color-accent-hover: var(--example-ds-palette-green-7); --example-ds-color-border-default: #000; --example-ds-color-border-strong: #000; --example-ds-color-border-focus: var(--example-ds-palette-green-5); --example-ds-color-shadow-offset: color-mix(in oklch, var(--example-ds-palette-sage-2) 50%, transparent); --example-ds-color-danger-default: var(--example-ds-palette-red-7); --example-ds-color-danger-solid: var(--example-ds-palette-red-8); --example-ds-color-success-default: var(--example-ds-palette-green-7); --example-ds-color-success-solid: var(--example-ds-palette-green-8); --example-ds-color-warning-default: var(--example-ds-palette-amber-7); --example-ds-color-warning-onSolid: var(--example-ds-palette-stone-10); --example-ds-color-info-default: var(--example-ds-palette-jade-7); --example-ds-color-info-onSolid: var(--example-ds-palette-neutral-1); --example-ds-color-overlay-default: color-mix(in oklch, var(--example-ds-palette-sage-10) 55%, transparent); --example-ds-syntax-base: oklch(24.8% 0.008 264); --example-ds-syntax-keyword: oklch(54.5% 0.24 301); --example-ds-syntax-title: oklch(58.5% 0.22 248); --example-ds-syntax-attr: oklch(50% 0.18 68); --example-ds-syntax-string: oklch(53.2% 0.18 178); --example-ds-syntax-builtIn: oklch(56.5% 0.22 48); --example-ds-syntax-comment: oklch(66.4% 0.014 264); --example-ds-syntax-name: oklch(57.5% 0.18 29); --example-ds-syntax-section: oklch(55.2% 0.24 271); --example-ds-syntax-bullet: oklch(55.5% 0.22 66); --example-ds-syntax-addition: oklch(58.8% 0.22 176); --example-ds-syntax-additionBackground: oklch(99.3% 0.01 160); --example-ds-syntax-deletion: oklch(57.5% 0.18 29); --example-ds-syntax-deletionBackground: oklch(99.7% 0.008 25); --example-ds-shadow-xs: 1px 1px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-sm: 2px 2px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-md: 3px 3px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-lg: 4px 4px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-xl: 5px 5px 0 0 var(--example-ds-color-shadow-offset); } }
}
@layer tokens {
.theme-example-ds-rose { --example-ds-color-background-app: var(--example-ds-palette-rose-1); --example-ds-color-background-surface: var(--example-ds-palette-neutral-1); --example-ds-color-background-subtle: var(--example-ds-palette-rose-2); --example-ds-color-background-elevated: var(--example-ds-palette-neutral-1); --example-ds-color-text-primary: var(--example-ds-palette-rose-10); --example-ds-color-text-secondary: var(--example-ds-palette-rose-7); --example-ds-color-text-onAccent: #000; --example-ds-color-text-onDanger: var(--example-ds-palette-neutral-1); --example-ds-color-accent-default: var(--example-ds-palette-crimson-7); --example-ds-color-accent-hover: var(--example-ds-palette-crimson-8); --example-ds-color-border-default: #000; --example-ds-color-border-strong: #000; --example-ds-color-border-focus: var(--example-ds-palette-crimson-5); --example-ds-color-shadow-offset: color-mix(in oklch, var(--example-ds-palette-rose-2) 50%, transparent); --example-ds-color-danger-default: var(--example-ds-palette-red-7); --example-ds-color-danger-solid: var(--example-ds-palette-red-8); --example-ds-color-success-default: var(--example-ds-palette-green-7); --example-ds-color-success-solid: var(--example-ds-palette-green-8); --example-ds-color-warning-default: var(--example-ds-palette-amber-7); --example-ds-color-warning-onSolid: var(--example-ds-palette-stone-10); --example-ds-color-info-default: var(--example-ds-palette-plum-7); --example-ds-color-info-onSolid: var(--example-ds-palette-neutral-1); --example-ds-color-overlay-default: color-mix(in oklch, var(--example-ds-palette-rose-10) 55%, transparent); --example-ds-syntax-base: oklch(24.8% 0.008 264); --example-ds-syntax-keyword: oklch(54.5% 0.24 301); --example-ds-syntax-title: oklch(58.5% 0.22 248); --example-ds-syntax-attr: oklch(50% 0.18 68); --example-ds-syntax-string: oklch(53.2% 0.18 178); --example-ds-syntax-builtIn: oklch(56.5% 0.22 48); --example-ds-syntax-comment: oklch(66.4% 0.014 264); --example-ds-syntax-name: oklch(57.5% 0.18 29); --example-ds-syntax-section: oklch(55.2% 0.24 271); --example-ds-syntax-bullet: oklch(55.5% 0.22 66); --example-ds-syntax-addition: oklch(58.8% 0.22 176); --example-ds-syntax-additionBackground: oklch(99.3% 0.01 160); --example-ds-syntax-deletion: oklch(57.5% 0.18 29); --example-ds-syntax-deletionBackground: oklch(99.7% 0.008 25); --example-ds-shadow-xs: 1px 1px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-sm: 2px 2px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-md: 3px 3px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-lg: 4px 4px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-xl: 5px 5px 0 0 var(--example-ds-color-shadow-offset); }
}
@layer tokens {
@media (prefers-color-scheme: dark) { .theme-example-ds-rose { --example-ds-color-background-app: oklch(23% 0.024 355); --example-ds-color-background-surface: oklch(27% 0.022 355); --example-ds-color-background-subtle: oklch(31% 0.02 355); --example-ds-color-background-elevated: oklch(27% 0.022 355); --example-ds-color-text-primary: var(--example-ds-palette-rose-1); --example-ds-color-text-secondary: var(--example-ds-palette-rose-3); --example-ds-color-text-onAccent: #000; --example-ds-color-text-onDanger: var(--example-ds-palette-neutral-1); --example-ds-color-accent-default: var(--example-ds-palette-rose-3); --example-ds-color-accent-hover: var(--example-ds-palette-rose-2); --example-ds-color-border-default: oklch(40% 0.02 355); --example-ds-color-border-strong: oklch(54% 0.026 355); --example-ds-color-border-focus: var(--example-ds-palette-rose-4); --example-ds-color-shadow-offset: oklch(6.5% 0.035 355); --example-ds-color-danger-default: var(--example-ds-palette-red-4); --example-ds-color-danger-solid: var(--example-ds-palette-red-7); --example-ds-color-success-default: var(--example-ds-palette-green-4); --example-ds-color-success-solid: var(--example-ds-palette-green-7); --example-ds-color-warning-default: var(--example-ds-palette-amber-4); --example-ds-color-warning-onSolid: var(--example-ds-palette-stone-10); --example-ds-color-info-default: var(--example-ds-palette-plum-4); --example-ds-color-info-onSolid: var(--example-ds-palette-neutral-1); --example-ds-color-overlay-default: color-mix(in oklch, var(--example-ds-palette-rose-10) 70%, transparent); --example-ds-syntax-base: oklch(90% 0.002 264); --example-ds-syntax-keyword: oklch(79.5% 0.17 295); --example-ds-syntax-title: oklch(82.5% 0.16 245); --example-ds-syntax-attr: oklch(77.2% 0.24 60); --example-ds-syntax-string: oklch(81.5% 0.2 170); --example-ds-syntax-builtIn: oklch(79.5% 0.22 45); --example-ds-syntax-comment: oklch(77.5% 0.012 264); --example-ds-syntax-name: oklch(80.3% 0.22 27.5); --example-ds-syntax-section: oklch(79% 0.17 265); --example-ds-syntax-bullet: oklch(67.5% 0.28 62); --example-ds-syntax-addition: oklch(81.5% 0.2 170); --example-ds-syntax-additionBackground: oklch(18% 0.04 170); --example-ds-syntax-deletion: oklch(80.3% 0.22 27.5); --example-ds-syntax-deletionBackground: oklch(18% 0.04 30); --example-ds-shadow-xs: 1px 1px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-sm: 2px 2px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-md: 3px 3px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-lg: 4px 4px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-xl: 5px 5px 0 0 var(--example-ds-color-shadow-offset); } }
}
@layer tokens {
.theme-example-ds-rose[data-mode="dark"] { --example-ds-color-background-app: oklch(23% 0.024 355); --example-ds-color-background-surface: oklch(27% 0.022 355); --example-ds-color-background-subtle: oklch(31% 0.02 355); --example-ds-color-background-elevated: oklch(27% 0.022 355); --example-ds-color-text-primary: var(--example-ds-palette-rose-1); --example-ds-color-text-secondary: var(--example-ds-palette-rose-3); --example-ds-color-text-onAccent: #000; --example-ds-color-text-onDanger: var(--example-ds-palette-neutral-1); --example-ds-color-accent-default: var(--example-ds-palette-rose-3); --example-ds-color-accent-hover: var(--example-ds-palette-rose-2); --example-ds-color-border-default: oklch(40% 0.02 355); --example-ds-color-border-strong: oklch(54% 0.026 355); --example-ds-color-border-focus: var(--example-ds-palette-rose-4); --example-ds-color-shadow-offset: oklch(6.5% 0.035 355); --example-ds-color-danger-default: var(--example-ds-palette-red-4); --example-ds-color-danger-solid: var(--example-ds-palette-red-7); --example-ds-color-success-default: var(--example-ds-palette-green-4); --example-ds-color-success-solid: var(--example-ds-palette-green-7); --example-ds-color-warning-default: var(--example-ds-palette-amber-4); --example-ds-color-warning-onSolid: var(--example-ds-palette-stone-10); --example-ds-color-info-default: var(--example-ds-palette-plum-4); --example-ds-color-info-onSolid: var(--example-ds-palette-neutral-1); --example-ds-color-overlay-default: color-mix(in oklch, var(--example-ds-palette-rose-10) 70%, transparent); --example-ds-syntax-base: oklch(90% 0.002 264); --example-ds-syntax-keyword: oklch(79.5% 0.17 295); --example-ds-syntax-title: oklch(82.5% 0.16 245); --example-ds-syntax-attr: oklch(77.2% 0.24 60); --example-ds-syntax-string: oklch(81.5% 0.2 170); --example-ds-syntax-builtIn: oklch(79.5% 0.22 45); --example-ds-syntax-comment: oklch(77.5% 0.012 264); --example-ds-syntax-name: oklch(80.3% 0.22 27.5); --example-ds-syntax-section: oklch(79% 0.17 265); --example-ds-syntax-bullet: oklch(67.5% 0.28 62); --example-ds-syntax-addition: oklch(81.5% 0.2 170); --example-ds-syntax-additionBackground: oklch(18% 0.04 170); --example-ds-syntax-deletion: oklch(80.3% 0.22 27.5); --example-ds-syntax-deletionBackground: oklch(18% 0.04 30); --example-ds-shadow-xs: 1px 1px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-sm: 2px 2px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-md: 3px 3px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-lg: 4px 4px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-xl: 5px 5px 0 0 var(--example-ds-color-shadow-offset); }
}
@layer tokens {
@media (prefers-color-scheme: dark) { .theme-example-ds-rose[data-mode="light"] { --example-ds-color-background-app: var(--example-ds-palette-rose-1); --example-ds-color-background-surface: var(--example-ds-palette-neutral-1); --example-ds-color-background-subtle: var(--example-ds-palette-rose-2); --example-ds-color-background-elevated: var(--example-ds-palette-neutral-1); --example-ds-color-text-primary: var(--example-ds-palette-rose-10); --example-ds-color-text-secondary: var(--example-ds-palette-rose-7); --example-ds-color-text-onAccent: #000; --example-ds-color-text-onDanger: var(--example-ds-palette-neutral-1); --example-ds-color-accent-default: var(--example-ds-palette-crimson-7); --example-ds-color-accent-hover: var(--example-ds-palette-crimson-8); --example-ds-color-border-default: #000; --example-ds-color-border-strong: #000; --example-ds-color-border-focus: var(--example-ds-palette-crimson-5); --example-ds-color-shadow-offset: color-mix(in oklch, var(--example-ds-palette-rose-2) 50%, transparent); --example-ds-color-danger-default: var(--example-ds-palette-red-7); --example-ds-color-danger-solid: var(--example-ds-palette-red-8); --example-ds-color-success-default: var(--example-ds-palette-green-7); --example-ds-color-success-solid: var(--example-ds-palette-green-8); --example-ds-color-warning-default: var(--example-ds-palette-amber-7); --example-ds-color-warning-onSolid: var(--example-ds-palette-stone-10); --example-ds-color-info-default: var(--example-ds-palette-plum-7); --example-ds-color-info-onSolid: var(--example-ds-palette-neutral-1); --example-ds-color-overlay-default: color-mix(in oklch, var(--example-ds-palette-rose-10) 55%, transparent); --example-ds-syntax-base: oklch(24.8% 0.008 264); --example-ds-syntax-keyword: oklch(54.5% 0.24 301); --example-ds-syntax-title: oklch(58.5% 0.22 248); --example-ds-syntax-attr: oklch(50% 0.18 68); --example-ds-syntax-string: oklch(53.2% 0.18 178); --example-ds-syntax-builtIn: oklch(56.5% 0.22 48); --example-ds-syntax-comment: oklch(66.4% 0.014 264); --example-ds-syntax-name: oklch(57.5% 0.18 29); --example-ds-syntax-section: oklch(55.2% 0.24 271); --example-ds-syntax-bullet: oklch(55.5% 0.22 66); --example-ds-syntax-addition: oklch(58.8% 0.22 176); --example-ds-syntax-additionBackground: oklch(99.3% 0.01 160); --example-ds-syntax-deletion: oklch(57.5% 0.18 29); --example-ds-syntax-deletionBackground: oklch(99.7% 0.008 25); --example-ds-shadow-xs: 1px 1px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-sm: 2px 2px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-md: 3px 3px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-lg: 4px 4px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-xl: 5px 5px 0 0 var(--example-ds-color-shadow-offset); } }
}
@layer tokens {
.theme-example-ds-amber { --example-ds-color-background-app: var(--example-ds-palette-sand-1); --example-ds-color-background-surface: var(--example-ds-palette-neutral-1); --example-ds-color-background-subtle: var(--example-ds-palette-sand-2); --example-ds-color-background-elevated: var(--example-ds-palette-neutral-1); --example-ds-color-text-primary: var(--example-ds-palette-sand-10); --example-ds-color-text-secondary: var(--example-ds-palette-sand-7); --example-ds-color-text-onAccent: #000; --example-ds-color-text-onDanger: var(--example-ds-palette-neutral-1); --example-ds-color-accent-default: var(--example-ds-palette-orange-7); --example-ds-color-accent-hover: var(--example-ds-palette-orange-8); --example-ds-color-border-default: #000; --example-ds-color-border-strong: #000; --example-ds-color-border-focus: var(--example-ds-palette-orange-5); --example-ds-color-shadow-offset: color-mix(in oklch, var(--example-ds-palette-sand-2) 50%, transparent); --example-ds-color-danger-default: var(--example-ds-palette-red-7); --example-ds-color-danger-solid: var(--example-ds-palette-red-8); --example-ds-color-success-default: var(--example-ds-palette-green-7); --example-ds-color-success-solid: var(--example-ds-palette-green-8); --example-ds-color-warning-default: var(--example-ds-palette-amber-7); --example-ds-color-warning-onSolid: var(--example-ds-palette-stone-10); --example-ds-color-info-default: var(--example-ds-palette-orange-7); --example-ds-color-info-onSolid: var(--example-ds-palette-neutral-1); --example-ds-color-overlay-default: color-mix(in oklch, var(--example-ds-palette-sand-10) 55%, transparent); --example-ds-syntax-base: oklch(24.8% 0.008 264); --example-ds-syntax-keyword: oklch(54.5% 0.24 301); --example-ds-syntax-title: oklch(58.5% 0.22 248); --example-ds-syntax-attr: oklch(50% 0.18 68); --example-ds-syntax-string: oklch(53.2% 0.18 178); --example-ds-syntax-builtIn: oklch(56.5% 0.22 48); --example-ds-syntax-comment: oklch(66.4% 0.014 264); --example-ds-syntax-name: oklch(57.5% 0.18 29); --example-ds-syntax-section: oklch(55.2% 0.24 271); --example-ds-syntax-bullet: oklch(55.5% 0.22 66); --example-ds-syntax-addition: oklch(58.8% 0.22 176); --example-ds-syntax-additionBackground: oklch(99.3% 0.01 160); --example-ds-syntax-deletion: oklch(57.5% 0.18 29); --example-ds-syntax-deletionBackground: oklch(99.7% 0.008 25); --example-ds-shadow-xs: 1px 1px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-sm: 2px 2px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-md: 3px 3px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-lg: 4px 4px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-xl: 5px 5px 0 0 var(--example-ds-color-shadow-offset); }
}
@layer tokens {
@media (prefers-color-scheme: dark) { .theme-example-ds-amber { --example-ds-color-background-app: oklch(23% 0.016 65); --example-ds-color-background-surface: oklch(27% 0.014 65); --example-ds-color-background-subtle: oklch(31% 0.013 65); --example-ds-color-background-elevated: oklch(27% 0.014 65); --example-ds-color-text-primary: var(--example-ds-palette-sand-1); --example-ds-color-text-secondary: var(--example-ds-palette-sand-3); --example-ds-color-text-onAccent: #000; --example-ds-color-text-onDanger: var(--example-ds-palette-neutral-1); --example-ds-color-accent-default: var(--example-ds-palette-amber-3); --example-ds-color-accent-hover: var(--example-ds-palette-amber-2); --example-ds-color-border-default: oklch(40% 0.02 65); --example-ds-color-border-strong: oklch(54% 0.026 65); --example-ds-color-border-focus: var(--example-ds-palette-amber-4); --example-ds-color-shadow-offset: oklch(6.5% 0.035 65); --example-ds-color-danger-default: var(--example-ds-palette-red-4); --example-ds-color-danger-solid: var(--example-ds-palette-red-7); --example-ds-color-success-default: var(--example-ds-palette-green-4); --example-ds-color-success-solid: var(--example-ds-palette-green-7); --example-ds-color-warning-default: var(--example-ds-palette-amber-4); --example-ds-color-warning-onSolid: var(--example-ds-palette-stone-10); --example-ds-color-info-default: var(--example-ds-palette-orange-4); --example-ds-color-info-onSolid: var(--example-ds-palette-neutral-1); --example-ds-color-overlay-default: color-mix(in oklch, var(--example-ds-palette-sand-10) 70%, transparent); --example-ds-syntax-base: oklch(90% 0.002 264); --example-ds-syntax-keyword: oklch(79.5% 0.17 295); --example-ds-syntax-title: oklch(82.5% 0.16 245); --example-ds-syntax-attr: oklch(77.2% 0.24 60); --example-ds-syntax-string: oklch(81.5% 0.2 170); --example-ds-syntax-builtIn: oklch(79.5% 0.22 45); --example-ds-syntax-comment: oklch(77.5% 0.012 264); --example-ds-syntax-name: oklch(80.3% 0.22 27.5); --example-ds-syntax-section: oklch(79% 0.17 265); --example-ds-syntax-bullet: oklch(67.5% 0.28 62); --example-ds-syntax-addition: oklch(81.5% 0.2 170); --example-ds-syntax-additionBackground: oklch(18% 0.04 170); --example-ds-syntax-deletion: oklch(80.3% 0.22 27.5); --example-ds-syntax-deletionBackground: oklch(18% 0.04 30); --example-ds-shadow-xs: 1px 1px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-sm: 2px 2px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-md: 3px 3px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-lg: 4px 4px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-xl: 5px 5px 0 0 var(--example-ds-color-shadow-offset); } }
}
@layer tokens {
.theme-example-ds-amber[data-mode="dark"] { --example-ds-color-background-app: oklch(23% 0.016 65); --example-ds-color-background-surface: oklch(27% 0.014 65); --example-ds-color-background-subtle: oklch(31% 0.013 65); --example-ds-color-background-elevated: oklch(27% 0.014 65); --example-ds-color-text-primary: var(--example-ds-palette-sand-1); --example-ds-color-text-secondary: var(--example-ds-palette-sand-3); --example-ds-color-text-onAccent: #000; --example-ds-color-text-onDanger: var(--example-ds-palette-neutral-1); --example-ds-color-accent-default: var(--example-ds-palette-amber-3); --example-ds-color-accent-hover: var(--example-ds-palette-amber-2); --example-ds-color-border-default: oklch(40% 0.02 65); --example-ds-color-border-strong: oklch(54% 0.026 65); --example-ds-color-border-focus: var(--example-ds-palette-amber-4); --example-ds-color-shadow-offset: oklch(6.5% 0.035 65); --example-ds-color-danger-default: var(--example-ds-palette-red-4); --example-ds-color-danger-solid: var(--example-ds-palette-red-7); --example-ds-color-success-default: var(--example-ds-palette-green-4); --example-ds-color-success-solid: var(--example-ds-palette-green-7); --example-ds-color-warning-default: var(--example-ds-palette-amber-4); --example-ds-color-warning-onSolid: var(--example-ds-palette-stone-10); --example-ds-color-info-default: var(--example-ds-palette-orange-4); --example-ds-color-info-onSolid: var(--example-ds-palette-neutral-1); --example-ds-color-overlay-default: color-mix(in oklch, var(--example-ds-palette-sand-10) 70%, transparent); --example-ds-syntax-base: oklch(90% 0.002 264); --example-ds-syntax-keyword: oklch(79.5% 0.17 295); --example-ds-syntax-title: oklch(82.5% 0.16 245); --example-ds-syntax-attr: oklch(77.2% 0.24 60); --example-ds-syntax-string: oklch(81.5% 0.2 170); --example-ds-syntax-builtIn: oklch(79.5% 0.22 45); --example-ds-syntax-comment: oklch(77.5% 0.012 264); --example-ds-syntax-name: oklch(80.3% 0.22 27.5); --example-ds-syntax-section: oklch(79% 0.17 265); --example-ds-syntax-bullet: oklch(67.5% 0.28 62); --example-ds-syntax-addition: oklch(81.5% 0.2 170); --example-ds-syntax-additionBackground: oklch(18% 0.04 170); --example-ds-syntax-deletion: oklch(80.3% 0.22 27.5); --example-ds-syntax-deletionBackground: oklch(18% 0.04 30); --example-ds-shadow-xs: 1px 1px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-sm: 2px 2px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-md: 3px 3px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-lg: 4px 4px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-xl: 5px 5px 0 0 var(--example-ds-color-shadow-offset); }
}
@layer tokens {
@media (prefers-color-scheme: dark) { .theme-example-ds-amber[data-mode="light"] { --example-ds-color-background-app: var(--example-ds-palette-sand-1); --example-ds-color-background-surface: var(--example-ds-palette-neutral-1); --example-ds-color-background-subtle: var(--example-ds-palette-sand-2); --example-ds-color-background-elevated: var(--example-ds-palette-neutral-1); --example-ds-color-text-primary: var(--example-ds-palette-sand-10); --example-ds-color-text-secondary: var(--example-ds-palette-sand-7); --example-ds-color-text-onAccent: #000; --example-ds-color-text-onDanger: var(--example-ds-palette-neutral-1); --example-ds-color-accent-default: var(--example-ds-palette-orange-7); --example-ds-color-accent-hover: var(--example-ds-palette-orange-8); --example-ds-color-border-default: #000; --example-ds-color-border-strong: #000; --example-ds-color-border-focus: var(--example-ds-palette-orange-5); --example-ds-color-shadow-offset: color-mix(in oklch, var(--example-ds-palette-sand-2) 50%, transparent); --example-ds-color-danger-default: var(--example-ds-palette-red-7); --example-ds-color-danger-solid: var(--example-ds-palette-red-8); --example-ds-color-success-default: var(--example-ds-palette-green-7); --example-ds-color-success-solid: var(--example-ds-palette-green-8); --example-ds-color-warning-default: var(--example-ds-palette-amber-7); --example-ds-color-warning-onSolid: var(--example-ds-palette-stone-10); --example-ds-color-info-default: var(--example-ds-palette-orange-7); --example-ds-color-info-onSolid: var(--example-ds-palette-neutral-1); --example-ds-color-overlay-default: color-mix(in oklch, var(--example-ds-palette-sand-10) 55%, transparent); --example-ds-syntax-base: oklch(24.8% 0.008 264); --example-ds-syntax-keyword: oklch(54.5% 0.24 301); --example-ds-syntax-title: oklch(58.5% 0.22 248); --example-ds-syntax-attr: oklch(50% 0.18 68); --example-ds-syntax-string: oklch(53.2% 0.18 178); --example-ds-syntax-builtIn: oklch(56.5% 0.22 48); --example-ds-syntax-comment: oklch(66.4% 0.014 264); --example-ds-syntax-name: oklch(57.5% 0.18 29); --example-ds-syntax-section: oklch(55.2% 0.24 271); --example-ds-syntax-bullet: oklch(55.5% 0.22 66); --example-ds-syntax-addition: oklch(58.8% 0.22 176); --example-ds-syntax-additionBackground: oklch(99.3% 0.01 160); --example-ds-syntax-deletion: oklch(57.5% 0.18 29); --example-ds-syntax-deletionBackground: oklch(99.7% 0.008 25); --example-ds-shadow-xs: 1px 1px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-sm: 2px 2px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-md: 3px 3px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-lg: 4px 4px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-xl: 5px 5px 0 0 var(--example-ds-color-shadow-offset); } }
}
@layer tokens {
.theme-example-ds-ai-glow { --example-ds-fontFamily-display: "Fraunces", "Iowan Old Style", "Apple Garamond", Baskerville, "Palatino Linotype", Palatino, Georgia, serif; --example-ds-fontFamily-sans: "Space Grotesk", "Avenir Next", Avenir, ui-sans-serif, system-ui, sans-serif; --example-ds-fontFamily-mono: "JetBrains Mono", ui-monospace, "SF Mono", Monaco, Consolas, monospace; --example-ds-fontSize-xs: 11px; --example-ds-fontSize-sm: 13px; --example-ds-fontSize-md: 15px; --example-ds-fontSize-lg: 17px; --example-ds-fontSize-xl: 22px; --example-ds-fontSize-2xl: 28px; --example-ds-fontSize-3xl: 36px; --example-ds-fontWeight-normal: 400; --example-ds-fontWeight-medium: 520; --example-ds-fontWeight-semibold: 650; --example-ds-fontWeight-bold: 760; --example-ds-radius-none: 0; --example-ds-radius-sm: 3px; --example-ds-radius-md: 4px; --example-ds-radius-lg: 6px; --example-ds-radius-xl: 8px; --example-ds-radius-full: 999px; --example-ds-borderWidth-thin: 1px; --example-ds-borderWidth-default: 1px; --example-ds-borderWidth-thick: 1px; --example-ds-shadow-xs: 0 4px 14px color-mix(in oklch, #0EA5E9 12%, transparent); --example-ds-shadow-sm: 0 8px 24px color-mix(in oklch, #DB2777 12%, transparent); --example-ds-shadow-md: 0 16px 48px color-mix(in oklch, #0EA5E9 16%, transparent), 0 4px 24px color-mix(in oklch, #F59E0B 10%, transparent); --example-ds-shadow-lg: 0 24px 72px color-mix(in oklch, #DB2777 18%, transparent), 0 8px 42px color-mix(in oklch, #10B981 12%, transparent); --example-ds-shadow-xl: 0 32px 96px color-mix(in oklch, #0EA5E9 18%, transparent), 0 12px 56px color-mix(in oklch, #F59E0B 14%, transparent); --example-ds-duration-fast: 120ms; --example-ds-duration-medium: 220ms; --example-ds-duration-slow: 360ms; --example-ds-transition-overlayFade: opacity 260ms ease, visibility 260ms ease; --example-ds-transition-panelEnter: opacity 320ms cubic-bezier(0.16, 1, 0.3, 1); --example-ds-transition-backdrop: opacity 260ms ease; --example-ds-transition-surfaceFast: background-color 160ms ease; --example-ds-transition-colorShift: color 180ms ease, text-decoration-color 180ms ease; --example-ds-transition-controlSurface: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease; --example-ds-color-background-app: #F8F5FF; --example-ds-color-background-surface: #FFFCFF; --example-ds-color-background-subtle: #E8F7FF; --example-ds-color-background-elevated: #FFFFFF; --example-ds-color-text-primary: #201A3D; --example-ds-color-text-secondary: #5B527B; --example-ds-color-text-onAccent: #FFFFFF; --example-ds-color-text-onDanger: #FFFFFF; --example-ds-color-accent-default: #0EA5E9; --example-ds-color-accent-hover: #7C3AED; --example-ds-color-border-default: color-mix(in oklch, #0EA5E9 28%, #FFFFFF); --example-ds-color-border-strong: color-mix(in oklch, #F59E0B 38%, #FFFFFF); --example-ds-color-border-focus: #DB2777; --example-ds-color-shadow-offset: color-mix(in oklch, #0EA5E9 24%, transparent); --example-ds-color-danger-default: var(--example-ds-palette-red-7); --example-ds-color-danger-solid: var(--example-ds-palette-red-8); --example-ds-color-success-default: #0F9F6E; --example-ds-color-success-solid: #047857; --example-ds-color-warning-default: #B45309; --example-ds-color-warning-onSolid: #FFFFFF; --example-ds-color-info-default: #2563EB; --example-ds-color-info-onSolid: #FFFFFF; --example-ds-color-overlay-default: color-mix(in oklch, #201A3D 42%, transparent); --example-ds-syntax-base: oklch(24.8% 0.008 264); --example-ds-syntax-keyword: #7C3AED; --example-ds-syntax-title: #2563EB; --example-ds-syntax-attr: #B45309; --example-ds-syntax-string: #047857; --example-ds-syntax-builtIn: #DB2777; --example-ds-syntax-comment: #786D98; --example-ds-syntax-name: oklch(57.5% 0.18 29); --example-ds-syntax-section: #0891B2; --example-ds-syntax-bullet: oklch(55.5% 0.22 66); --example-ds-syntax-addition: oklch(58.8% 0.22 176); --example-ds-syntax-additionBackground: oklch(99.3% 0.01 160); --example-ds-syntax-deletion: oklch(57.5% 0.18 29); --example-ds-syntax-deletionBackground: oklch(99.7% 0.008 25); }
}
@layer tokens {
@media (prefers-color-scheme: dark) { .theme-example-ds-ai-glow { --example-ds-fontFamily-display: "Fraunces", "Iowan Old Style", "Apple Garamond", Baskerville, "Palatino Linotype", Palatino, Georgia, serif; --example-ds-fontFamily-sans: "Space Grotesk", "Avenir Next", Avenir, ui-sans-serif, system-ui, sans-serif; --example-ds-fontFamily-mono: "JetBrains Mono", ui-monospace, "SF Mono", Monaco, Consolas, monospace; --example-ds-fontSize-xs: 11px; --example-ds-fontSize-sm: 13px; --example-ds-fontSize-md: 15px; --example-ds-fontSize-lg: 17px; --example-ds-fontSize-xl: 22px; --example-ds-fontSize-2xl: 28px; --example-ds-fontSize-3xl: 36px; --example-ds-fontWeight-normal: 400; --example-ds-fontWeight-medium: 520; --example-ds-fontWeight-semibold: 650; --example-ds-fontWeight-bold: 760; --example-ds-radius-none: 0; --example-ds-radius-sm: 3px; --example-ds-radius-md: 4px; --example-ds-radius-lg: 6px; --example-ds-radius-xl: 8px; --example-ds-radius-full: 999px; --example-ds-borderWidth-thin: 1px; --example-ds-borderWidth-default: 1px; --example-ds-borderWidth-thick: 1px; --example-ds-shadow-xs: 0 4px 18px color-mix(in oklch, #67E8F9 18%, transparent); --example-ds-shadow-sm: 0 8px 30px color-mix(in oklch, #F0ABFC 18%, transparent); --example-ds-shadow-md: 0 18px 56px color-mix(in oklch, #67E8F9 22%, transparent), 0 6px 32px color-mix(in oklch, #FDE68A 12%, transparent); --example-ds-shadow-lg: 0 28px 84px color-mix(in oklch, #F0ABFC 22%, transparent), 0 10px 50px color-mix(in oklch, #6EE7B7 16%, transparent); --example-ds-shadow-xl: 0 36px 110px color-mix(in oklch, #67E8F9 22%, transparent), 0 16px 64px color-mix(in oklch, #FDE68A 18%, transparent); --example-ds-duration-fast: 120ms; --example-ds-duration-medium: 220ms; --example-ds-duration-slow: 360ms; --example-ds-transition-overlayFade: opacity 260ms ease, visibility 260ms ease; --example-ds-transition-panelEnter: opacity 320ms cubic-bezier(0.16, 1, 0.3, 1); --example-ds-transition-backdrop: opacity 260ms ease; --example-ds-transition-surfaceFast: background-color 160ms ease; --example-ds-transition-colorShift: color 180ms ease, text-decoration-color 180ms ease; --example-ds-transition-controlSurface: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease; --example-ds-color-background-app: #111025; --example-ds-color-background-surface: #1A1733; --example-ds-color-background-subtle: #272143; --example-ds-color-background-elevated: #211B3B; --example-ds-color-text-primary: #FAF7FF; --example-ds-color-text-secondary: #C9C0EA; --example-ds-color-text-onAccent: #FFFFFF; --example-ds-color-text-onDanger: #FFFFFF; --example-ds-color-accent-default: #67E8F9; --example-ds-color-accent-hover: #F0ABFC; --example-ds-color-border-default: color-mix(in oklch, #67E8F9 34%, #111025); --example-ds-color-border-strong: color-mix(in oklch, #FDE68A 42%, #111025); --example-ds-color-border-focus: #F0ABFC; --example-ds-color-shadow-offset: color-mix(in oklch, #67E8F9 30%, transparent); --example-ds-color-danger-default: var(--example-ds-palette-red-4); --example-ds-color-danger-solid: var(--example-ds-palette-red-7); --example-ds-color-success-default: #6EE7B7; --example-ds-color-success-solid: #047857; --example-ds-color-warning-default: #FCD34D; --example-ds-color-warning-onSolid: #211400; --example-ds-color-info-default: #67E8F9; --example-ds-color-info-onSolid: #08111A; --example-ds-color-overlay-default: color-mix(in oklch, #05040F 76%, transparent); --example-ds-syntax-base: oklch(90% 0.002 264); --example-ds-syntax-keyword: #C4B5FD; --example-ds-syntax-title: #93C5FD; --example-ds-syntax-attr: #FCD34D; --example-ds-syntax-string: #6EE7B7; --example-ds-syntax-builtIn: #F0ABFC; --example-ds-syntax-comment: #AFA5CF; --example-ds-syntax-name: oklch(80.3% 0.22 27.5); --example-ds-syntax-section: #67E8F9; --example-ds-syntax-bullet: oklch(67.5% 0.28 62); --example-ds-syntax-addition: oklch(81.5% 0.2 170); --example-ds-syntax-additionBackground: oklch(18% 0.04 170); --example-ds-syntax-deletion: oklch(80.3% 0.22 27.5); --example-ds-syntax-deletionBackground: oklch(18% 0.04 30); } }
}
@layer tokens {
.theme-example-ds-ai-glow[data-mode="dark"] { --example-ds-fontFamily-display: "Fraunces", "Iowan Old Style", "Apple Garamond", Baskerville, "Palatino Linotype", Palatino, Georgia, serif; --example-ds-fontFamily-sans: "Space Grotesk", "Avenir Next", Avenir, ui-sans-serif, system-ui, sans-serif; --example-ds-fontFamily-mono: "JetBrains Mono", ui-monospace, "SF Mono", Monaco, Consolas, monospace; --example-ds-fontSize-xs: 11px; --example-ds-fontSize-sm: 13px; --example-ds-fontSize-md: 15px; --example-ds-fontSize-lg: 17px; --example-ds-fontSize-xl: 22px; --example-ds-fontSize-2xl: 28px; --example-ds-fontSize-3xl: 36px; --example-ds-fontWeight-normal: 400; --example-ds-fontWeight-medium: 520; --example-ds-fontWeight-semibold: 650; --example-ds-fontWeight-bold: 760; --example-ds-radius-none: 0; --example-ds-radius-sm: 3px; --example-ds-radius-md: 4px; --example-ds-radius-lg: 6px; --example-ds-radius-xl: 8px; --example-ds-radius-full: 999px; --example-ds-borderWidth-thin: 1px; --example-ds-borderWidth-default: 1px; --example-ds-borderWidth-thick: 1px; --example-ds-shadow-xs: 0 4px 18px color-mix(in oklch, #67E8F9 18%, transparent); --example-ds-shadow-sm: 0 8px 30px color-mix(in oklch, #F0ABFC 18%, transparent); --example-ds-shadow-md: 0 18px 56px color-mix(in oklch, #67E8F9 22%, transparent), 0 6px 32px color-mix(in oklch, #FDE68A 12%, transparent); --example-ds-shadow-lg: 0 28px 84px color-mix(in oklch, #F0ABFC 22%, transparent), 0 10px 50px color-mix(in oklch, #6EE7B7 16%, transparent); --example-ds-shadow-xl: 0 36px 110px color-mix(in oklch, #67E8F9 22%, transparent), 0 16px 64px color-mix(in oklch, #FDE68A 18%, transparent); --example-ds-duration-fast: 120ms; --example-ds-duration-medium: 220ms; --example-ds-duration-slow: 360ms; --example-ds-transition-overlayFade: opacity 260ms ease, visibility 260ms ease; --example-ds-transition-panelEnter: opacity 320ms cubic-bezier(0.16, 1, 0.3, 1); --example-ds-transition-backdrop: opacity 260ms ease; --example-ds-transition-surfaceFast: background-color 160ms ease; --example-ds-transition-colorShift: color 180ms ease, text-decoration-color 180ms ease; --example-ds-transition-controlSurface: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease; --example-ds-color-background-app: #111025; --example-ds-color-background-surface: #1A1733; --example-ds-color-background-subtle: #272143; --example-ds-color-background-elevated: #211B3B; --example-ds-color-text-primary: #FAF7FF; --example-ds-color-text-secondary: #C9C0EA; --example-ds-color-text-onAccent: #FFFFFF; --example-ds-color-text-onDanger: #FFFFFF; --example-ds-color-accent-default: #67E8F9; --example-ds-color-accent-hover: #F0ABFC; --example-ds-color-border-default: color-mix(in oklch, #67E8F9 34%, #111025); --example-ds-color-border-strong: color-mix(in oklch, #FDE68A 42%, #111025); --example-ds-color-border-focus: #F0ABFC; --example-ds-color-shadow-offset: color-mix(in oklch, #67E8F9 30%, transparent); --example-ds-color-danger-default: var(--example-ds-palette-red-4); --example-ds-color-danger-solid: var(--example-ds-palette-red-7); --example-ds-color-success-default: #6EE7B7; --example-ds-color-success-solid: #047857; --example-ds-color-warning-default: #FCD34D; --example-ds-color-warning-onSolid: #211400; --example-ds-color-info-default: #67E8F9; --example-ds-color-info-onSolid: #08111A; --example-ds-color-overlay-default: color-mix(in oklch, #05040F 76%, transparent); --example-ds-syntax-base: oklch(90% 0.002 264); --example-ds-syntax-keyword: #C4B5FD; --example-ds-syntax-title: #93C5FD; --example-ds-syntax-attr: #FCD34D; --example-ds-syntax-string: #6EE7B7; --example-ds-syntax-builtIn: #F0ABFC; --example-ds-syntax-comment: #AFA5CF; --example-ds-syntax-name: oklch(80.3% 0.22 27.5); --example-ds-syntax-section: #67E8F9; --example-ds-syntax-bullet: oklch(67.5% 0.28 62); --example-ds-syntax-addition: oklch(81.5% 0.2 170); --example-ds-syntax-additionBackground: oklch(18% 0.04 170); --example-ds-syntax-deletion: oklch(80.3% 0.22 27.5); --example-ds-syntax-deletionBackground: oklch(18% 0.04 30); }
}
@layer tokens {
@media (prefers-color-scheme: dark) { .theme-example-ds-ai-glow[data-mode="light"] { --example-ds-fontFamily-display: "Fraunces", "Iowan Old Style", "Apple Garamond", Baskerville, "Palatino Linotype", Palatino, Georgia, serif; --example-ds-fontFamily-sans: "Space Grotesk", "Avenir Next", Avenir, ui-sans-serif, system-ui, sans-serif; --example-ds-fontFamily-mono: "JetBrains Mono", ui-monospace, "SF Mono", Monaco, Consolas, monospace; --example-ds-fontSize-xs: 11px; --example-ds-fontSize-sm: 13px; --example-ds-fontSize-md: 15px; --example-ds-fontSize-lg: 17px; --example-ds-fontSize-xl: 22px; --example-ds-fontSize-2xl: 28px; --example-ds-fontSize-3xl: 36px; --example-ds-fontWeight-normal: 400; --example-ds-fontWeight-medium: 520; --example-ds-fontWeight-semibold: 650; --example-ds-fontWeight-bold: 760; --example-ds-radius-none: 0; --example-ds-radius-sm: 3px; --example-ds-radius-md: 4px; --example-ds-radius-lg: 6px; --example-ds-radius-xl: 8px; --example-ds-radius-full: 999px; --example-ds-borderWidth-thin: 1px; --example-ds-borderWidth-default: 1px; --example-ds-borderWidth-thick: 1px; --example-ds-shadow-xs: 0 4px 14px color-mix(in oklch, #0EA5E9 12%, transparent); --example-ds-shadow-sm: 0 8px 24px color-mix(in oklch, #DB2777 12%, transparent); --example-ds-shadow-md: 0 16px 48px color-mix(in oklch, #0EA5E9 16%, transparent), 0 4px 24px color-mix(in oklch, #F59E0B 10%, transparent); --example-ds-shadow-lg: 0 24px 72px color-mix(in oklch, #DB2777 18%, transparent), 0 8px 42px color-mix(in oklch, #10B981 12%, transparent); --example-ds-shadow-xl: 0 32px 96px color-mix(in oklch, #0EA5E9 18%, transparent), 0 12px 56px color-mix(in oklch, #F59E0B 14%, transparent); --example-ds-duration-fast: 120ms; --example-ds-duration-medium: 220ms; --example-ds-duration-slow: 360ms; --example-ds-transition-overlayFade: opacity 260ms ease, visibility 260ms ease; --example-ds-transition-panelEnter: opacity 320ms cubic-bezier(0.16, 1, 0.3, 1); --example-ds-transition-backdrop: opacity 260ms ease; --example-ds-transition-surfaceFast: background-color 160ms ease; --example-ds-transition-colorShift: color 180ms ease, text-decoration-color 180ms ease; --example-ds-transition-controlSurface: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease; --example-ds-color-background-app: #F8F5FF; --example-ds-color-background-surface: #FFFCFF; --example-ds-color-background-subtle: #E8F7FF; --example-ds-color-background-elevated: #FFFFFF; --example-ds-color-text-primary: #201A3D; --example-ds-color-text-secondary: #5B527B; --example-ds-color-text-onAccent: #FFFFFF; --example-ds-color-text-onDanger: #FFFFFF; --example-ds-color-accent-default: #0EA5E9; --example-ds-color-accent-hover: #7C3AED; --example-ds-color-border-default: color-mix(in oklch, #0EA5E9 28%, #FFFFFF); --example-ds-color-border-strong: color-mix(in oklch, #F59E0B 38%, #FFFFFF); --example-ds-color-border-focus: #DB2777; --example-ds-color-shadow-offset: color-mix(in oklch, #0EA5E9 24%, transparent); --example-ds-color-danger-default: var(--example-ds-palette-red-7); --example-ds-color-danger-solid: var(--example-ds-palette-red-8); --example-ds-color-success-default: #0F9F6E; --example-ds-color-success-solid: #047857; --example-ds-color-warning-default: #B45309; --example-ds-color-warning-onSolid: #FFFFFF; --example-ds-color-info-default: #2563EB; --example-ds-color-info-onSolid: #FFFFFF; --example-ds-color-overlay-default: color-mix(in oklch, #201A3D 42%, transparent); --example-ds-syntax-base: oklch(24.8% 0.008 264); --example-ds-syntax-keyword: #7C3AED; --example-ds-syntax-title: #2563EB; --example-ds-syntax-attr: #B45309; --example-ds-syntax-string: #047857; --example-ds-syntax-builtIn: #DB2777; --example-ds-syntax-comment: #786D98; --example-ds-syntax-name: oklch(57.5% 0.18 29); --example-ds-syntax-section: #0891B2; --example-ds-syntax-bullet: oklch(55.5% 0.22 66); --example-ds-syntax-addition: oklch(58.8% 0.22 176); --example-ds-syntax-additionBackground: oklch(99.3% 0.01 160); --example-ds-syntax-deletion: oklch(57.5% 0.18 29); --example-ds-syntax-deletionBackground: oklch(99.7% 0.008 25); } }
}
@layer tokens {
.theme-example-ds-new-wave { --example-ds-fontFamily-display: "Arial Black", Impact, "Space Grotesk", system-ui, sans-serif; --example-ds-fontFamily-sans: "Trebuchet MS", "Space Grotesk", system-ui, sans-serif; --example-ds-fontFamily-mono: "JetBrains Mono", ui-monospace, "SF Mono", Monaco, Consolas, monospace; --example-ds-fontSize-xs: 11px; --example-ds-fontSize-sm: 13px; --example-ds-fontSize-md: 15px; --example-ds-fontSize-lg: 18px; --example-ds-fontSize-xl: 24px; --example-ds-fontSize-2xl: 30px; --example-ds-fontSize-3xl: 38px; --example-ds-fontWeight-normal: 500; --example-ds-fontWeight-medium: 700; --example-ds-fontWeight-semibold: 800; --example-ds-fontWeight-bold: 900; --example-ds-radius-none: 0; --example-ds-radius-sm: 6px; --example-ds-radius-md: 14px; --example-ds-radius-lg: 22px; --example-ds-radius-xl: 30px; --example-ds-radius-full: 999px; --example-ds-borderWidth-thin: 1px; --example-ds-borderWidth-default: 2px; --example-ds-borderWidth-thick: 3px; --example-ds-duration-fast: 90ms; --example-ds-duration-medium: 120ms; --example-ds-duration-slow: 180ms; --example-ds-shadow-xs: 2px 2px 0 0 #00D7FF; --example-ds-shadow-sm: 3px 3px 0 0 #00D7FF; --example-ds-shadow-md: 6px 6px 0 0 #00D7FF; --example-ds-shadow-lg: 8px 8px 0 0 #00D7FF; --example-ds-shadow-xl: 10px 10px 0 0 #00D7FF; --example-ds-transition-overlayFade: opacity 180ms ease, visibility 180ms ease; --example-ds-transition-panelEnter: opacity 180ms cubic-bezier(0.16, 1, 0.3, 1); --example-ds-transition-backdrop: opacity 180ms ease; --example-ds-transition-surfaceFast: background-color 90ms ease; --example-ds-transition-colorShift: color 120ms ease, text-decoration-color 120ms ease; --example-ds-transition-controlSurface: background-color 120ms ease, border-color 120ms ease; --example-ds-color-background-app: #FFF45C; --example-ds-color-background-surface: #FFFDF0; --example-ds-color-background-subtle: #FFE1F8; --example-ds-color-background-elevated: #FFFFFF; --example-ds-color-text-primary: #151329; --example-ds-color-text-secondary: #4F3D7A; --example-ds-color-text-onAccent: #151329; --example-ds-color-text-onDanger: var(--example-ds-palette-neutral-1); --example-ds-color-accent-default: #FF4FD8; --example-ds-color-accent-hover: #D934B6; --example-ds-color-border-default: #151329; --example-ds-color-border-strong: #151329; --example-ds-color-border-focus: #00D7FF; --example-ds-color-shadow-offset: #00D7FF; --example-ds-color-danger-default: var(--example-ds-palette-red-7); --example-ds-color-danger-solid: var(--example-ds-palette-red-8); --example-ds-color-success-default: #00A878; --example-ds-color-success-solid: #00845F; --example-ds-color-warning-default: #F06C00; --example-ds-color-warning-onSolid: #151329; --example-ds-color-info-default: #5D5FEF; --example-ds-color-info-onSolid: var(--example-ds-palette-neutral-1); --example-ds-color-overlay-default: color-mix(in oklch, #151329 55%, transparent); --example-ds-syntax-base: oklch(24.8% 0.008 264); --example-ds-syntax-keyword: #D934B6; --example-ds-syntax-title: #243CFF; --example-ds-syntax-attr: oklch(50% 0.18 68); --example-ds-syntax-string: #00845F; --example-ds-syntax-builtIn: #F06C00; --example-ds-syntax-comment: oklch(66.4% 0.014 264); --example-ds-syntax-name: oklch(57.5% 0.18 29); --example-ds-syntax-section: #5D5FEF; --example-ds-syntax-bullet: oklch(55.5% 0.22 66); --example-ds-syntax-addition: oklch(58.8% 0.22 176); --example-ds-syntax-additionBackground: oklch(99.3% 0.01 160); --example-ds-syntax-deletion: oklch(57.5% 0.18 29); --example-ds-syntax-deletionBackground: oklch(99.7% 0.008 25); }
}
@layer tokens {
@media (prefers-color-scheme: dark) { .theme-example-ds-new-wave { --example-ds-fontFamily-display: "Arial Black", Impact, "Space Grotesk", system-ui, sans-serif; --example-ds-fontFamily-sans: "Trebuchet MS", "Space Grotesk", system-ui, sans-serif; --example-ds-fontFamily-mono: "JetBrains Mono", ui-monospace, "SF Mono", Monaco, Consolas, monospace; --example-ds-fontSize-xs: 11px; --example-ds-fontSize-sm: 13px; --example-ds-fontSize-md: 15px; --example-ds-fontSize-lg: 18px; --example-ds-fontSize-xl: 24px; --example-ds-fontSize-2xl: 30px; --example-ds-fontSize-3xl: 38px; --example-ds-fontWeight-normal: 500; --example-ds-fontWeight-medium: 700; --example-ds-fontWeight-semibold: 800; --example-ds-fontWeight-bold: 900; --example-ds-radius-none: 0; --example-ds-radius-sm: 6px; --example-ds-radius-md: 14px; --example-ds-radius-lg: 22px; --example-ds-radius-xl: 30px; --example-ds-radius-full: 999px; --example-ds-borderWidth-thin: 1px; --example-ds-borderWidth-default: 2px; --example-ds-borderWidth-thick: 3px; --example-ds-duration-fast: 90ms; --example-ds-duration-medium: 120ms; --example-ds-duration-slow: 180ms; --example-ds-shadow-xs: 2px 2px 0 0 #FF4FD8; --example-ds-shadow-sm: 3px 3px 0 0 #FF4FD8; --example-ds-shadow-md: 6px 6px 0 0 #FF4FD8; --example-ds-shadow-lg: 8px 8px 0 0 #FF4FD8; --example-ds-shadow-xl: 10px 10px 0 0 #FF4FD8; --example-ds-transition-overlayFade: opacity 180ms ease, visibility 180ms ease; --example-ds-transition-panelEnter: opacity 180ms cubic-bezier(0.16, 1, 0.3, 1); --example-ds-transition-backdrop: opacity 180ms ease; --example-ds-transition-surfaceFast: background-color 90ms ease; --example-ds-transition-colorShift: color 120ms ease, text-decoration-color 120ms ease; --example-ds-transition-controlSurface: background-color 120ms ease, border-color 120ms ease; --example-ds-color-background-app: #131129; --example-ds-color-background-surface: #1E1B3F; --example-ds-color-background-subtle: #2D2256; --example-ds-color-background-elevated: #25204E; --example-ds-color-text-primary: #FFF8A8; --example-ds-color-text-secondary: #B9B0F7; --example-ds-color-text-onAccent: #151329; --example-ds-color-text-onDanger: var(--example-ds-palette-neutral-1); --example-ds-color-accent-default: #8BFF5C; --example-ds-color-accent-hover: #B9FF66; --example-ds-color-border-default: #00D7FF; --example-ds-color-border-strong: #00D7FF; --example-ds-color-border-focus: #FF4FD8; --example-ds-color-shadow-offset: #FF4FD8; --example-ds-color-danger-default: var(--example-ds-palette-red-4); --example-ds-color-danger-solid: var(--example-ds-palette-red-7); --example-ds-color-success-default: #8BFF5C; --example-ds-color-success-solid: #00A878; --example-ds-color-warning-default: #FFF45C; --example-ds-color-warning-onSolid: #151329; --example-ds-color-info-default: #00D7FF; --example-ds-color-info-onSolid: #151329; --example-ds-color-overlay-default: color-mix(in oklch, #05040F 78%, transparent); --example-ds-syntax-base: oklch(90% 0.002 264); --example-ds-syntax-keyword: #FF7FE6; --example-ds-syntax-title: #8BFF5C; --example-ds-syntax-attr: oklch(77.2% 0.24 60); --example-ds-syntax-string: #70F7D3; --example-ds-syntax-builtIn: #FFF45C; --example-ds-syntax-comment: oklch(77.5% 0.012 264); --example-ds-syntax-name: oklch(80.3% 0.22 27.5); --example-ds-syntax-section: #00D7FF; --example-ds-syntax-bullet: oklch(67.5% 0.28 62); --example-ds-syntax-addition: oklch(81.5% 0.2 170); --example-ds-syntax-additionBackground: oklch(18% 0.04 170); --example-ds-syntax-deletion: oklch(80.3% 0.22 27.5); --example-ds-syntax-deletionBackground: oklch(18% 0.04 30); } }
}
@layer tokens {
.theme-example-ds-new-wave[data-mode="dark"] { --example-ds-fontFamily-display: "Arial Black", Impact, "Space Grotesk", system-ui, sans-serif; --example-ds-fontFamily-sans: "Trebuchet MS", "Space Grotesk", system-ui, sans-serif; --example-ds-fontFamily-mono: "JetBrains Mono", ui-monospace, "SF Mono", Monaco, Consolas, monospace; --example-ds-fontSize-xs: 11px; --example-ds-fontSize-sm: 13px; --example-ds-fontSize-md: 15px; --example-ds-fontSize-lg: 18px; --example-ds-fontSize-xl: 24px; --example-ds-fontSize-2xl: 30px; --example-ds-fontSize-3xl: 38px; --example-ds-fontWeight-normal: 500; --example-ds-fontWeight-medium: 700; --example-ds-fontWeight-semibold: 800; --example-ds-fontWeight-bold: 900; --example-ds-radius-none: 0; --example-ds-radius-sm: 6px; --example-ds-radius-md: 14px; --example-ds-radius-lg: 22px; --example-ds-radius-xl: 30px; --example-ds-radius-full: 999px; --example-ds-borderWidth-thin: 1px; --example-ds-borderWidth-default: 2px; --example-ds-borderWidth-thick: 3px; --example-ds-duration-fast: 90ms; --example-ds-duration-medium: 120ms; --example-ds-duration-slow: 180ms; --example-ds-shadow-xs: 2px 2px 0 0 #FF4FD8; --example-ds-shadow-sm: 3px 3px 0 0 #FF4FD8; --example-ds-shadow-md: 6px 6px 0 0 #FF4FD8; --example-ds-shadow-lg: 8px 8px 0 0 #FF4FD8; --example-ds-shadow-xl: 10px 10px 0 0 #FF4FD8; --example-ds-transition-overlayFade: opacity 180ms ease, visibility 180ms ease; --example-ds-transition-panelEnter: opacity 180ms cubic-bezier(0.16, 1, 0.3, 1); --example-ds-transition-backdrop: opacity 180ms ease; --example-ds-transition-surfaceFast: background-color 90ms ease; --example-ds-transition-colorShift: color 120ms ease, text-decoration-color 120ms ease; --example-ds-transition-controlSurface: background-color 120ms ease, border-color 120ms ease; --example-ds-color-background-app: #131129; --example-ds-color-background-surface: #1E1B3F; --example-ds-color-background-subtle: #2D2256; --example-ds-color-background-elevated: #25204E; --example-ds-color-text-primary: #FFF8A8; --example-ds-color-text-secondary: #B9B0F7; --example-ds-color-text-onAccent: #151329; --example-ds-color-text-onDanger: var(--example-ds-palette-neutral-1); --example-ds-color-accent-default: #8BFF5C; --example-ds-color-accent-hover: #B9FF66; --example-ds-color-border-default: #00D7FF; --example-ds-color-border-strong: #00D7FF; --example-ds-color-border-focus: #FF4FD8; --example-ds-color-shadow-offset: #FF4FD8; --example-ds-color-danger-default: var(--example-ds-palette-red-4); --example-ds-color-danger-solid: var(--example-ds-palette-red-7); --example-ds-color-success-default: #8BFF5C; --example-ds-color-success-solid: #00A878; --example-ds-color-warning-default: #FFF45C; --example-ds-color-warning-onSolid: #151329; --example-ds-color-info-default: #00D7FF; --example-ds-color-info-onSolid: #151329; --example-ds-color-overlay-default: color-mix(in oklch, #05040F 78%, transparent); --example-ds-syntax-base: oklch(90% 0.002 264); --example-ds-syntax-keyword: #FF7FE6; --example-ds-syntax-title: #8BFF5C; --example-ds-syntax-attr: oklch(77.2% 0.24 60); --example-ds-syntax-string: #70F7D3; --example-ds-syntax-builtIn: #FFF45C; --example-ds-syntax-comment: oklch(77.5% 0.012 264); --example-ds-syntax-name: oklch(80.3% 0.22 27.5); --example-ds-syntax-section: #00D7FF; --example-ds-syntax-bullet: oklch(67.5% 0.28 62); --example-ds-syntax-addition: oklch(81.5% 0.2 170); --example-ds-syntax-additionBackground: oklch(18% 0.04 170); --example-ds-syntax-deletion: oklch(80.3% 0.22 27.5); --example-ds-syntax-deletionBackground: oklch(18% 0.04 30); }
}
@layer tokens {
@media (prefers-color-scheme: dark) { .theme-example-ds-new-wave[data-mode="light"] { --example-ds-fontFamily-display: "Arial Black", Impact, "Space Grotesk", system-ui, sans-serif; --example-ds-fontFamily-sans: "Trebuchet MS", "Space Grotesk", system-ui, sans-serif; --example-ds-fontFamily-mono: "JetBrains Mono", ui-monospace, "SF Mono", Monaco, Consolas, monospace; --example-ds-fontSize-xs: 11px; --example-ds-fontSize-sm: 13px; --example-ds-fontSize-md: 15px; --example-ds-fontSize-lg: 18px; --example-ds-fontSize-xl: 24px; --example-ds-fontSize-2xl: 30px; --example-ds-fontSize-3xl: 38px; --example-ds-fontWeight-normal: 500; --example-ds-fontWeight-medium: 700; --example-ds-fontWeight-semibold: 800; --example-ds-fontWeight-bold: 900; --example-ds-radius-none: 0; --example-ds-radius-sm: 6px; --example-ds-radius-md: 14px; --example-ds-radius-lg: 22px; --example-ds-radius-xl: 30px; --example-ds-radius-full: 999px; --example-ds-borderWidth-thin: 1px; --example-ds-borderWidth-default: 2px; --example-ds-borderWidth-thick: 3px; --example-ds-duration-fast: 90ms; --example-ds-duration-medium: 120ms; --example-ds-duration-slow: 180ms; --example-ds-shadow-xs: 2px 2px 0 0 #00D7FF; --example-ds-shadow-sm: 3px 3px 0 0 #00D7FF; --example-ds-shadow-md: 6px 6px 0 0 #00D7FF; --example-ds-shadow-lg: 8px 8px 0 0 #00D7FF; --example-ds-shadow-xl: 10px 10px 0 0 #00D7FF; --example-ds-transition-overlayFade: opacity 180ms ease, visibility 180ms ease; --example-ds-transition-panelEnter: opacity 180ms cubic-bezier(0.16, 1, 0.3, 1); --example-ds-transition-backdrop: opacity 180ms ease; --example-ds-transition-surfaceFast: background-color 90ms ease; --example-ds-transition-colorShift: color 120ms ease, text-decoration-color 120ms ease; --example-ds-transition-controlSurface: background-color 120ms ease, border-color 120ms ease; --example-ds-color-background-app: #FFF45C; --example-ds-color-background-surface: #FFFDF0; --example-ds-color-background-subtle: #FFE1F8; --example-ds-color-background-elevated: #FFFFFF; --example-ds-color-text-primary: #151329; --example-ds-color-text-secondary: #4F3D7A; --example-ds-color-text-onAccent: #151329; --example-ds-color-text-onDanger: var(--example-ds-palette-neutral-1); --example-ds-color-accent-default: #FF4FD8; --example-ds-color-accent-hover: #D934B6; --example-ds-color-border-default: #151329; --example-ds-color-border-strong: #151329; --example-ds-color-border-focus: #00D7FF; --example-ds-color-shadow-offset: #00D7FF; --example-ds-color-danger-default: var(--example-ds-palette-red-7); --example-ds-color-danger-solid: var(--example-ds-palette-red-8); --example-ds-color-success-default: #00A878; --example-ds-color-success-solid: #00845F; --example-ds-color-warning-default: #F06C00; --example-ds-color-warning-onSolid: #151329; --example-ds-color-info-default: #5D5FEF; --example-ds-color-info-onSolid: var(--example-ds-palette-neutral-1); --example-ds-color-overlay-default: color-mix(in oklch, #151329 55%, transparent); --example-ds-syntax-base: oklch(24.8% 0.008 264); --example-ds-syntax-keyword: #D934B6; --example-ds-syntax-title: #243CFF; --example-ds-syntax-attr: oklch(50% 0.18 68); --example-ds-syntax-string: #00845F; --example-ds-syntax-builtIn: #F06C00; --example-ds-syntax-comment: oklch(66.4% 0.014 264); --example-ds-syntax-name: oklch(57.5% 0.18 29); --example-ds-syntax-section: #5D5FEF; --example-ds-syntax-bullet: oklch(55.5% 0.22 66); --example-ds-syntax-addition: oklch(58.8% 0.22 176); --example-ds-syntax-additionBackground: oklch(99.3% 0.01 160); --example-ds-syntax-deletion: oklch(57.5% 0.18 29); --example-ds-syntax-deletionBackground: oklch(99.7% 0.008 25); } }
}
@layer tokens {
.theme-example-ds-windows-95 { --example-ds-fontFamily-display: "MS Sans Serif", "Microsoft Sans Serif", Arial, system-ui, sans-serif; --example-ds-fontFamily-sans: "MS Sans Serif", "Microsoft Sans Serif", Arial, system-ui, sans-serif; --example-ds-fontFamily-mono: "Lucida Console", "Courier New", ui-monospace, monospace; --example-ds-fontSize-xs: 11px; --example-ds-fontSize-sm: 12px; --example-ds-fontSize-md: 13px; --example-ds-fontSize-lg: 15px; --example-ds-fontSize-xl: 18px; --example-ds-fontSize-2xl: 22px; --example-ds-fontSize-3xl: 26px; --example-ds-fontWeight-normal: 400; --example-ds-fontWeight-medium: 600; --example-ds-fontWeight-semibold: 700; --example-ds-fontWeight-bold: 700; --example-ds-radius-none: 0; --example-ds-radius-sm: 0; --example-ds-radius-md: 0; --example-ds-radius-lg: 0; --example-ds-radius-xl: 0; --example-ds-radius-full: 0; --example-ds-borderWidth-thin: 1px; --example-ds-borderWidth-default: 2px; --example-ds-borderWidth-thick: 2px; --example-ds-shadow-xs: inset 1px 1px 0 #FFFFFF, inset -1px -1px 0 #404040; --example-ds-shadow-sm: inset 1px 1px 0 #FFFFFF, inset -1px -1px 0 #404040; --example-ds-shadow-md: inset 2px 2px 0 #FFFFFF, inset -2px -2px 0 #404040; --example-ds-shadow-lg: inset 2px 2px 0 #FFFFFF, inset -2px -2px 0 #404040; --example-ds-shadow-xl: inset 2px 2px 0 #FFFFFF, inset -2px -2px 0 #404040; --example-ds-duration-fast: 0ms; --example-ds-duration-medium: 0ms; --example-ds-duration-slow: 0ms; --example-ds-transition-overlayFade: none; --example-ds-transition-panelEnter: none; --example-ds-transition-backdrop: none; --example-ds-transition-surfaceFast: none; --example-ds-transition-colorShift: none; --example-ds-transition-controlSurface: none; --example-ds-color-background-app: #C0C0C0; --example-ds-color-background-surface: #C0C0C0; --example-ds-color-background-subtle: #E0E0E0; --example-ds-color-background-elevated: #F0F0F0; --example-ds-color-text-primary: #000000; --example-ds-color-text-secondary: #202020; --example-ds-color-text-onAccent: #FFFFFF; --example-ds-color-text-onDanger: #FFFFFF; --example-ds-color-accent-default: #000080; --example-ds-color-accent-hover: #1084D0; --example-ds-color-border-default: #808080; --example-ds-color-border-strong: #000000; --example-ds-color-border-focus: #000080; --example-ds-color-shadow-offset: #404040; --example-ds-color-danger-default: #800000; --example-ds-color-danger-solid: #800000; --example-ds-color-success-default: #008000; --example-ds-color-success-solid: #008000; --example-ds-color-warning-default: #808000; --example-ds-color-warning-onSolid: #000000; --example-ds-color-info-default: #000080; --example-ds-color-info-onSolid: #FFFFFF; --example-ds-color-overlay-default: color-mix(in srgb, #000000 50%, transparent); --example-ds-syntax-base: oklch(24.8% 0.008 264); --example-ds-syntax-keyword: #000080; --example-ds-syntax-title: #800080; --example-ds-syntax-attr: #5F4F00; --example-ds-syntax-string: #004F00; --example-ds-syntax-builtIn: #800000; --example-ds-syntax-comment: #303030; --example-ds-syntax-name: oklch(57.5% 0.18 29); --example-ds-syntax-section: oklch(55.2% 0.24 271); --example-ds-syntax-bullet: oklch(55.5% 0.22 66); --example-ds-syntax-addition: oklch(58.8% 0.22 176); --example-ds-syntax-additionBackground: oklch(99.3% 0.01 160); --example-ds-syntax-deletion: oklch(57.5% 0.18 29); --example-ds-syntax-deletionBackground: oklch(99.7% 0.008 25); }
}
@layer tokens {
@media (prefers-color-scheme: dark) { .theme-example-ds-windows-95 { --example-ds-fontFamily-display: "MS Sans Serif", "Microsoft Sans Serif", Arial, system-ui, sans-serif; --example-ds-fontFamily-sans: "MS Sans Serif", "Microsoft Sans Serif", Arial, system-ui, sans-serif; --example-ds-fontFamily-mono: "Lucida Console", "Courier New", ui-monospace, monospace; --example-ds-fontSize-xs: 11px; --example-ds-fontSize-sm: 12px; --example-ds-fontSize-md: 13px; --example-ds-fontSize-lg: 15px; --example-ds-fontSize-xl: 18px; --example-ds-fontSize-2xl: 22px; --example-ds-fontSize-3xl: 26px; --example-ds-fontWeight-normal: 400; --example-ds-fontWeight-medium: 600; --example-ds-fontWeight-semibold: 700; --example-ds-fontWeight-bold: 700; --example-ds-radius-none: 0; --example-ds-radius-sm: 0; --example-ds-radius-md: 0; --example-ds-radius-lg: 0; --example-ds-radius-xl: 0; --example-ds-radius-full: 0; --example-ds-borderWidth-thin: 1px; --example-ds-borderWidth-default: 2px; --example-ds-borderWidth-thick: 2px; --example-ds-shadow-xs: inset 1px 1px 0 #808080, inset -1px -1px 0 #000000; --example-ds-shadow-sm: inset 1px 1px 0 #808080, inset -1px -1px 0 #000000; --example-ds-shadow-md: inset 2px 2px 0 #808080, inset -2px -2px 0 #000000; --example-ds-shadow-lg: inset 2px 2px 0 #808080, inset -2px -2px 0 #000000; --example-ds-shadow-xl: inset 2px 2px 0 #808080, inset -2px -2px 0 #000000; --example-ds-duration-fast: 0ms; --example-ds-duration-medium: 0ms; --example-ds-duration-slow: 0ms; --example-ds-transition-overlayFade: none; --example-ds-transition-panelEnter: none; --example-ds-transition-backdrop: none; --example-ds-transition-surfaceFast: none; --example-ds-transition-colorShift: none; --example-ds-transition-controlSurface: none; --example-ds-color-background-app: #000040; --example-ds-color-background-surface: #303030; --example-ds-color-background-subtle: #454545; --example-ds-color-background-elevated: #555555; --example-ds-color-text-primary: #F2F2F2; --example-ds-color-text-secondary: #CFCFCF; --example-ds-color-text-onAccent: #FFFFFF; --example-ds-color-text-onDanger: #FFFFFF; --example-ds-color-accent-default: #1084D0; --example-ds-color-accent-hover: #38A8F0; --example-ds-color-border-default: #808080; --example-ds-color-border-strong: #FFFFFF; --example-ds-color-border-focus: #38A8F0; --example-ds-color-shadow-offset: #000000; --example-ds-color-danger-default: var(--example-ds-palette-red-4); --example-ds-color-danger-solid: #800000; --example-ds-color-success-default: var(--example-ds-palette-green-4); --example-ds-color-success-solid: #008000; --example-ds-color-warning-default: var(--example-ds-palette-amber-4); --example-ds-color-warning-onSolid: #000000; --example-ds-color-info-default: #38A8F0; --example-ds-color-info-onSolid: #000000; --example-ds-color-overlay-default: color-mix(in srgb, #000000 70%, transparent); --example-ds-syntax-base: oklch(90% 0.002 264); --example-ds-syntax-keyword: #38A8F0; --example-ds-syntax-title: #F0F0F0; --example-ds-syntax-attr: #FFFF80; --example-ds-syntax-string: #80FF80; --example-ds-syntax-builtIn: #FF8080; --example-ds-syntax-comment: #B0B0B0; --example-ds-syntax-name: oklch(80.3% 0.22 27.5); --example-ds-syntax-section: oklch(79% 0.17 265); --example-ds-syntax-bullet: oklch(67.5% 0.28 62); --example-ds-syntax-addition: oklch(81.5% 0.2 170); --example-ds-syntax-additionBackground: oklch(18% 0.04 170); --example-ds-syntax-deletion: oklch(80.3% 0.22 27.5); --example-ds-syntax-deletionBackground: oklch(18% 0.04 30); } }
}
@layer tokens {
.theme-example-ds-windows-95[data-mode="dark"] { --example-ds-fontFamily-display: "MS Sans Serif", "Microsoft Sans Serif", Arial, system-ui, sans-serif; --example-ds-fontFamily-sans: "MS Sans Serif", "Microsoft Sans Serif", Arial, system-ui, sans-serif; --example-ds-fontFamily-mono: "Lucida Console", "Courier New", ui-monospace, monospace; --example-ds-fontSize-xs: 11px; --example-ds-fontSize-sm: 12px; --example-ds-fontSize-md: 13px; --example-ds-fontSize-lg: 15px; --example-ds-fontSize-xl: 18px; --example-ds-fontSize-2xl: 22px; --example-ds-fontSize-3xl: 26px; --example-ds-fontWeight-normal: 400; --example-ds-fontWeight-medium: 600; --example-ds-fontWeight-semibold: 700; --example-ds-fontWeight-bold: 700; --example-ds-radius-none: 0; --example-ds-radius-sm: 0; --example-ds-radius-md: 0; --example-ds-radius-lg: 0; --example-ds-radius-xl: 0; --example-ds-radius-full: 0; --example-ds-borderWidth-thin: 1px; --example-ds-borderWidth-default: 2px; --example-ds-borderWidth-thick: 2px; --example-ds-shadow-xs: inset 1px 1px 0 #808080, inset -1px -1px 0 #000000; --example-ds-shadow-sm: inset 1px 1px 0 #808080, inset -1px -1px 0 #000000; --example-ds-shadow-md: inset 2px 2px 0 #808080, inset -2px -2px 0 #000000; --example-ds-shadow-lg: inset 2px 2px 0 #808080, inset -2px -2px 0 #000000; --example-ds-shadow-xl: inset 2px 2px 0 #808080, inset -2px -2px 0 #000000; --example-ds-duration-fast: 0ms; --example-ds-duration-medium: 0ms; --example-ds-duration-slow: 0ms; --example-ds-transition-overlayFade: none; --example-ds-transition-panelEnter: none; --example-ds-transition-backdrop: none; --example-ds-transition-surfaceFast: none; --example-ds-transition-colorShift: none; --example-ds-transition-controlSurface: none; --example-ds-color-background-app: #000040; --example-ds-color-background-surface: #303030; --example-ds-color-background-subtle: #454545; --example-ds-color-background-elevated: #555555; --example-ds-color-text-primary: #F2F2F2; --example-ds-color-text-secondary: #CFCFCF; --example-ds-color-text-onAccent: #FFFFFF; --example-ds-color-text-onDanger: #FFFFFF; --example-ds-color-accent-default: #1084D0; --example-ds-color-accent-hover: #38A8F0; --example-ds-color-border-default: #808080; --example-ds-color-border-strong: #FFFFFF; --example-ds-color-border-focus: #38A8F0; --example-ds-color-shadow-offset: #000000; --example-ds-color-danger-default: var(--example-ds-palette-red-4); --example-ds-color-danger-solid: #800000; --example-ds-color-success-default: var(--example-ds-palette-green-4); --example-ds-color-success-solid: #008000; --example-ds-color-warning-default: var(--example-ds-palette-amber-4); --example-ds-color-warning-onSolid: #000000; --example-ds-color-info-default: #38A8F0; --example-ds-color-info-onSolid: #000000; --example-ds-color-overlay-default: color-mix(in srgb, #000000 70%, transparent); --example-ds-syntax-base: oklch(90% 0.002 264); --example-ds-syntax-keyword: #38A8F0; --example-ds-syntax-title: #F0F0F0; --example-ds-syntax-attr: #FFFF80; --example-ds-syntax-string: #80FF80; --example-ds-syntax-builtIn: #FF8080; --example-ds-syntax-comment: #B0B0B0; --example-ds-syntax-name: oklch(80.3% 0.22 27.5); --example-ds-syntax-section: oklch(79% 0.17 265); --example-ds-syntax-bullet: oklch(67.5% 0.28 62); --example-ds-syntax-addition: oklch(81.5% 0.2 170); --example-ds-syntax-additionBackground: oklch(18% 0.04 170); --example-ds-syntax-deletion: oklch(80.3% 0.22 27.5); --example-ds-syntax-deletionBackground: oklch(18% 0.04 30); }
}
@layer tokens {
@media (prefers-color-scheme: dark) { .theme-example-ds-windows-95[data-mode="light"] { --example-ds-fontFamily-display: "MS Sans Serif", "Microsoft Sans Serif", Arial, system-ui, sans-serif; --example-ds-fontFamily-sans: "MS Sans Serif", "Microsoft Sans Serif", Arial, system-ui, sans-serif; --example-ds-fontFamily-mono: "Lucida Console", "Courier New", ui-monospace, monospace; --example-ds-fontSize-xs: 11px; --example-ds-fontSize-sm: 12px; --example-ds-fontSize-md: 13px; --example-ds-fontSize-lg: 15px; --example-ds-fontSize-xl: 18px; --example-ds-fontSize-2xl: 22px; --example-ds-fontSize-3xl: 26px; --example-ds-fontWeight-normal: 400; --example-ds-fontWeight-medium: 600; --example-ds-fontWeight-semibold: 700; --example-ds-fontWeight-bold: 700; --example-ds-radius-none: 0; --example-ds-radius-sm: 0; --example-ds-radius-md: 0; --example-ds-radius-lg: 0; --example-ds-radius-xl: 0; --example-ds-radius-full: 0; --example-ds-borderWidth-thin: 1px; --example-ds-borderWidth-default: 2px; --example-ds-borderWidth-thick: 2px; --example-ds-shadow-xs: inset 1px 1px 0 #FFFFFF, inset -1px -1px 0 #404040; --example-ds-shadow-sm: inset 1px 1px 0 #FFFFFF, inset -1px -1px 0 #404040; --example-ds-shadow-md: inset 2px 2px 0 #FFFFFF, inset -2px -2px 0 #404040; --example-ds-shadow-lg: inset 2px 2px 0 #FFFFFF, inset -2px -2px 0 #404040; --example-ds-shadow-xl: inset 2px 2px 0 #FFFFFF, inset -2px -2px 0 #404040; --example-ds-duration-fast: 0ms; --example-ds-duration-medium: 0ms; --example-ds-duration-slow: 0ms; --example-ds-transition-overlayFade: none; --example-ds-transition-panelEnter: none; --example-ds-transition-backdrop: none; --example-ds-transition-surfaceFast: none; --example-ds-transition-colorShift: none; --example-ds-transition-controlSurface: none; --example-ds-color-background-app: #C0C0C0; --example-ds-color-background-surface: #C0C0C0; --example-ds-color-background-subtle: #E0E0E0; --example-ds-color-background-elevated: #F0F0F0; --example-ds-color-text-primary: #000000; --example-ds-color-text-secondary: #202020; --example-ds-color-text-onAccent: #FFFFFF; --example-ds-color-text-onDanger: #FFFFFF; --example-ds-color-accent-default: #000080; --example-ds-color-accent-hover: #1084D0; --example-ds-color-border-default: #808080; --example-ds-color-border-strong: #000000; --example-ds-color-border-focus: #000080; --example-ds-color-shadow-offset: #404040; --example-ds-color-danger-default: #800000; --example-ds-color-danger-solid: #800000; --example-ds-color-success-default: #008000; --example-ds-color-success-solid: #008000; --example-ds-color-warning-default: #808000; --example-ds-color-warning-onSolid: #000000; --example-ds-color-info-default: #000080; --example-ds-color-info-onSolid: #FFFFFF; --example-ds-color-overlay-default: color-mix(in srgb, #000000 50%, transparent); --example-ds-syntax-base: oklch(24.8% 0.008 264); --example-ds-syntax-keyword: #000080; --example-ds-syntax-title: #800080; --example-ds-syntax-attr: #5F4F00; --example-ds-syntax-string: #004F00; --example-ds-syntax-builtIn: #800000; --example-ds-syntax-comment: #303030; --example-ds-syntax-name: oklch(57.5% 0.18 29); --example-ds-syntax-section: oklch(55.2% 0.24 271); --example-ds-syntax-bullet: oklch(55.5% 0.22 66); --example-ds-syntax-addition: oklch(58.8% 0.22 176); --example-ds-syntax-additionBackground: oklch(99.3% 0.01 160); --example-ds-syntax-deletion: oklch(57.5% 0.18 29); --example-ds-syntax-deletionBackground: oklch(99.7% 0.008 25); } }
}
@layer tokens {
.theme-example-ds-classic-system { --example-ds-fontFamily-display: Chicago, "Geneva", Monaco, "Courier New", ui-monospace, monospace; --example-ds-fontFamily-sans: Chicago, "Geneva", Monaco, "Courier New", ui-monospace, monospace; --example-ds-fontFamily-mono: Monaco, "Courier New", ui-monospace, monospace; --example-ds-fontSize-xs: 10px; --example-ds-fontSize-sm: 12px; --example-ds-fontSize-md: 13px; --example-ds-fontSize-lg: 15px; --example-ds-fontSize-xl: 18px; --example-ds-fontSize-2xl: 22px; --example-ds-fontSize-3xl: 28px; --example-ds-fontWeight-normal: 400; --example-ds-fontWeight-medium: 600; --example-ds-fontWeight-semibold: 700; --example-ds-fontWeight-bold: 700; --example-ds-radius-none: 0; --example-ds-radius-sm: 0; --example-ds-radius-md: 0; --example-ds-radius-lg: 0; --example-ds-radius-xl: 0; --example-ds-radius-full: 999px; --example-ds-borderWidth-thin: 1px; --example-ds-borderWidth-default: 1px; --example-ds-borderWidth-thick: 2px; --example-ds-shadow-xs: 1px 1px 0 0 #000000; --example-ds-shadow-sm: 1px 1px 0 0 #000000; --example-ds-shadow-md: 2px 2px 0 0 #000000; --example-ds-shadow-lg: 3px 3px 0 0 #000000; --example-ds-shadow-xl: 4px 4px 0 0 #000000; --example-ds-duration-fast: 80ms; --example-ds-duration-medium: 100ms; --example-ds-duration-slow: 140ms; --example-ds-transition-overlayFade: opacity 100ms steps(2, end), visibility 100ms steps(2, end); --example-ds-transition-panelEnter: opacity 100ms steps(2, end); --example-ds-transition-backdrop: opacity 100ms steps(2, end); --example-ds-transition-surfaceFast: background-color 80ms steps(2, end); --example-ds-transition-colorShift: color 80ms steps(2, end), text-decoration-color 80ms steps(2, end); --example-ds-transition-controlSurface: background-color 80ms steps(2, end), border-color 80ms steps(2, end); --example-ds-color-background-app: #FFFFFF; --example-ds-color-background-surface: #FFFFFF; --example-ds-color-background-subtle: #EEEEEE; --example-ds-color-background-elevated: #FFFFFF; --example-ds-color-text-primary: #000000; --example-ds-color-text-secondary: #333333; --example-ds-color-text-onAccent: #FFFFFF; --example-ds-color-text-onDanger: #FFFFFF; --example-ds-color-accent-default: #000000; --example-ds-color-accent-hover: #333333; --example-ds-color-border-default: #000000; --example-ds-color-border-strong: #000000; --example-ds-color-border-focus: #000000; --example-ds-color-shadow-offset: #000000; --example-ds-color-danger-default: #000000; --example-ds-color-danger-solid: #000000; --example-ds-color-success-default: #000000; --example-ds-color-success-solid: #000000; --example-ds-color-warning-default: #000000; --example-ds-color-warning-onSolid: #FFFFFF; --example-ds-color-info-default: #000000; --example-ds-color-info-onSolid: #FFFFFF; --example-ds-color-overlay-default: color-mix(in srgb, #000000 45%, transparent); --example-ds-syntax-base: oklch(24.8% 0.008 264); --example-ds-syntax-keyword: oklch(54.5% 0.24 301); --example-ds-syntax-title: oklch(58.5% 0.22 248); --example-ds-syntax-attr: oklch(50% 0.18 68); --example-ds-syntax-string: oklch(53.2% 0.18 178); --example-ds-syntax-builtIn: oklch(56.5% 0.22 48); --example-ds-syntax-comment: oklch(66.4% 0.014 264); --example-ds-syntax-name: oklch(57.5% 0.18 29); --example-ds-syntax-section: oklch(55.2% 0.24 271); --example-ds-syntax-bullet: oklch(55.5% 0.22 66); --example-ds-syntax-addition: oklch(58.8% 0.22 176); --example-ds-syntax-additionBackground: oklch(99.3% 0.01 160); --example-ds-syntax-deletion: oklch(57.5% 0.18 29); --example-ds-syntax-deletionBackground: oklch(99.7% 0.008 25); }
}
@layer tokens {
@media (prefers-color-scheme: dark) { .theme-example-ds-classic-system { --example-ds-fontFamily-display: Chicago, "Geneva", Monaco, "Courier New", ui-monospace, monospace; --example-ds-fontFamily-sans: Chicago, "Geneva", Monaco, "Courier New", ui-monospace, monospace; --example-ds-fontFamily-mono: Monaco, "Courier New", ui-monospace, monospace; --example-ds-fontSize-xs: 10px; --example-ds-fontSize-sm: 12px; --example-ds-fontSize-md: 13px; --example-ds-fontSize-lg: 15px; --example-ds-fontSize-xl: 18px; --example-ds-fontSize-2xl: 22px; --example-ds-fontSize-3xl: 28px; --example-ds-fontWeight-normal: 400; --example-ds-fontWeight-medium: 600; --example-ds-fontWeight-semibold: 700; --example-ds-fontWeight-bold: 700; --example-ds-radius-none: 0; --example-ds-radius-sm: 0; --example-ds-radius-md: 0; --example-ds-radius-lg: 0; --example-ds-radius-xl: 0; --example-ds-radius-full: 999px; --example-ds-borderWidth-thin: 1px; --example-ds-borderWidth-default: 1px; --example-ds-borderWidth-thick: 2px; --example-ds-shadow-xs: 1px 1px 0 0 #FFFFFF; --example-ds-shadow-sm: 1px 1px 0 0 #FFFFFF; --example-ds-shadow-md: 2px 2px 0 0 #FFFFFF; --example-ds-shadow-lg: 3px 3px 0 0 #FFFFFF; --example-ds-shadow-xl: 4px 4px 0 0 #FFFFFF; --example-ds-duration-fast: 80ms; --example-ds-duration-medium: 100ms; --example-ds-duration-slow: 140ms; --example-ds-transition-overlayFade: opacity 100ms steps(2, end), visibility 100ms steps(2, end); --example-ds-transition-panelEnter: opacity 100ms steps(2, end); --example-ds-transition-backdrop: opacity 100ms steps(2, end); --example-ds-transition-surfaceFast: background-color 80ms steps(2, end); --example-ds-transition-colorShift: color 80ms steps(2, end), text-decoration-color 80ms steps(2, end); --example-ds-transition-controlSurface: background-color 80ms steps(2, end), border-color 80ms steps(2, end); --example-ds-color-background-app: #101010; --example-ds-color-background-surface: #181818; --example-ds-color-background-subtle: #252525; --example-ds-color-background-elevated: #202020; --example-ds-color-text-primary: #FFFFFF; --example-ds-color-text-secondary: #D8D8D8; --example-ds-color-text-onAccent: #000000; --example-ds-color-text-onDanger: #000000; --example-ds-color-accent-default: #FFFFFF; --example-ds-color-accent-hover: #E0E0E0; --example-ds-color-border-default: #FFFFFF; --example-ds-color-border-strong: #FFFFFF; --example-ds-color-border-focus: #FFFFFF; --example-ds-color-shadow-offset: #FFFFFF; --example-ds-color-danger-default: var(--example-ds-palette-red-3); --example-ds-color-danger-solid: var(--example-ds-palette-red-3); --example-ds-color-success-default: var(--example-ds-palette-green-3); --example-ds-color-success-solid: var(--example-ds-palette-green-3); --example-ds-color-warning-default: var(--example-ds-palette-amber-3); --example-ds-color-warning-onSolid: #000000; --example-ds-color-info-default: #FFFFFF; --example-ds-color-info-onSolid: #000000; --example-ds-color-overlay-default: color-mix(in srgb, #000000 72%, transparent); --example-ds-syntax-base: oklch(90% 0.002 264); --example-ds-syntax-keyword: oklch(79.5% 0.17 295); --example-ds-syntax-title: oklch(82.5% 0.16 245); --example-ds-syntax-attr: oklch(77.2% 0.24 60); --example-ds-syntax-string: oklch(81.5% 0.2 170); --example-ds-syntax-builtIn: oklch(79.5% 0.22 45); --example-ds-syntax-comment: oklch(77.5% 0.012 264); --example-ds-syntax-name: oklch(80.3% 0.22 27.5); --example-ds-syntax-section: oklch(79% 0.17 265); --example-ds-syntax-bullet: oklch(67.5% 0.28 62); --example-ds-syntax-addition: oklch(81.5% 0.2 170); --example-ds-syntax-additionBackground: oklch(18% 0.04 170); --example-ds-syntax-deletion: oklch(80.3% 0.22 27.5); --example-ds-syntax-deletionBackground: oklch(18% 0.04 30); } }
}
@layer tokens {
.theme-example-ds-classic-system[data-mode="dark"] { --example-ds-fontFamily-display: Chicago, "Geneva", Monaco, "Courier New", ui-monospace, monospace; --example-ds-fontFamily-sans: Chicago, "Geneva", Monaco, "Courier New", ui-monospace, monospace; --example-ds-fontFamily-mono: Monaco, "Courier New", ui-monospace, monospace; --example-ds-fontSize-xs: 10px; --example-ds-fontSize-sm: 12px; --example-ds-fontSize-md: 13px; --example-ds-fontSize-lg: 15px; --example-ds-fontSize-xl: 18px; --example-ds-fontSize-2xl: 22px; --example-ds-fontSize-3xl: 28px; --example-ds-fontWeight-normal: 400; --example-ds-fontWeight-medium: 600; --example-ds-fontWeight-semibold: 700; --example-ds-fontWeight-bold: 700; --example-ds-radius-none: 0; --example-ds-radius-sm: 0; --example-ds-radius-md: 0; --example-ds-radius-lg: 0; --example-ds-radius-xl: 0; --example-ds-radius-full: 999px; --example-ds-borderWidth-thin: 1px; --example-ds-borderWidth-default: 1px; --example-ds-borderWidth-thick: 2px; --example-ds-shadow-xs: 1px 1px 0 0 #FFFFFF; --example-ds-shadow-sm: 1px 1px 0 0 #FFFFFF; --example-ds-shadow-md: 2px 2px 0 0 #FFFFFF; --example-ds-shadow-lg: 3px 3px 0 0 #FFFFFF; --example-ds-shadow-xl: 4px 4px 0 0 #FFFFFF; --example-ds-duration-fast: 80ms; --example-ds-duration-medium: 100ms; --example-ds-duration-slow: 140ms; --example-ds-transition-overlayFade: opacity 100ms steps(2, end), visibility 100ms steps(2, end); --example-ds-transition-panelEnter: opacity 100ms steps(2, end); --example-ds-transition-backdrop: opacity 100ms steps(2, end); --example-ds-transition-surfaceFast: background-color 80ms steps(2, end); --example-ds-transition-colorShift: color 80ms steps(2, end), text-decoration-color 80ms steps(2, end); --example-ds-transition-controlSurface: background-color 80ms steps(2, end), border-color 80ms steps(2, end); --example-ds-color-background-app: #101010; --example-ds-color-background-surface: #181818; --example-ds-color-background-subtle: #252525; --example-ds-color-background-elevated: #202020; --example-ds-color-text-primary: #FFFFFF; --example-ds-color-text-secondary: #D8D8D8; --example-ds-color-text-onAccent: #000000; --example-ds-color-text-onDanger: #000000; --example-ds-color-accent-default: #FFFFFF; --example-ds-color-accent-hover: #E0E0E0; --example-ds-color-border-default: #FFFFFF; --example-ds-color-border-strong: #FFFFFF; --example-ds-color-border-focus: #FFFFFF; --example-ds-color-shadow-offset: #FFFFFF; --example-ds-color-danger-default: var(--example-ds-palette-red-3); --example-ds-color-danger-solid: var(--example-ds-palette-red-3); --example-ds-color-success-default: var(--example-ds-palette-green-3); --example-ds-color-success-solid: var(--example-ds-palette-green-3); --example-ds-color-warning-default: var(--example-ds-palette-amber-3); --example-ds-color-warning-onSolid: #000000; --example-ds-color-info-default: #FFFFFF; --example-ds-color-info-onSolid: #000000; --example-ds-color-overlay-default: color-mix(in srgb, #000000 72%, transparent); --example-ds-syntax-base: oklch(90% 0.002 264); --example-ds-syntax-keyword: oklch(79.5% 0.17 295); --example-ds-syntax-title: oklch(82.5% 0.16 245); --example-ds-syntax-attr: oklch(77.2% 0.24 60); --example-ds-syntax-string: oklch(81.5% 0.2 170); --example-ds-syntax-builtIn: oklch(79.5% 0.22 45); --example-ds-syntax-comment: oklch(77.5% 0.012 264); --example-ds-syntax-name: oklch(80.3% 0.22 27.5); --example-ds-syntax-section: oklch(79% 0.17 265); --example-ds-syntax-bullet: oklch(67.5% 0.28 62); --example-ds-syntax-addition: oklch(81.5% 0.2 170); --example-ds-syntax-additionBackground: oklch(18% 0.04 170); --example-ds-syntax-deletion: oklch(80.3% 0.22 27.5); --example-ds-syntax-deletionBackground: oklch(18% 0.04 30); }
}
@layer tokens {
@media (prefers-color-scheme: dark) { .theme-example-ds-classic-system[data-mode="light"] { --example-ds-fontFamily-display: Chicago, "Geneva", Monaco, "Courier New", ui-monospace, monospace; --example-ds-fontFamily-sans: Chicago, "Geneva", Monaco, "Courier New", ui-monospace, monospace; --example-ds-fontFamily-mono: Monaco, "Courier New", ui-monospace, monospace; --example-ds-fontSize-xs: 10px; --example-ds-fontSize-sm: 12px; --example-ds-fontSize-md: 13px; --example-ds-fontSize-lg: 15px; --example-ds-fontSize-xl: 18px; --example-ds-fontSize-2xl: 22px; --example-ds-fontSize-3xl: 28px; --example-ds-fontWeight-normal: 400; --example-ds-fontWeight-medium: 600; --example-ds-fontWeight-semibold: 700; --example-ds-fontWeight-bold: 700; --example-ds-radius-none: 0; --example-ds-radius-sm: 0; --example-ds-radius-md: 0; --example-ds-radius-lg: 0; --example-ds-radius-xl: 0; --example-ds-radius-full: 999px; --example-ds-borderWidth-thin: 1px; --example-ds-borderWidth-default: 1px; --example-ds-borderWidth-thick: 2px; --example-ds-shadow-xs: 1px 1px 0 0 #000000; --example-ds-shadow-sm: 1px 1px 0 0 #000000; --example-ds-shadow-md: 2px 2px 0 0 #000000; --example-ds-shadow-lg: 3px 3px 0 0 #000000; --example-ds-shadow-xl: 4px 4px 0 0 #000000; --example-ds-duration-fast: 80ms; --example-ds-duration-medium: 100ms; --example-ds-duration-slow: 140ms; --example-ds-transition-overlayFade: opacity 100ms steps(2, end), visibility 100ms steps(2, end); --example-ds-transition-panelEnter: opacity 100ms steps(2, end); --example-ds-transition-backdrop: opacity 100ms steps(2, end); --example-ds-transition-surfaceFast: background-color 80ms steps(2, end); --example-ds-transition-colorShift: color 80ms steps(2, end), text-decoration-color 80ms steps(2, end); --example-ds-transition-controlSurface: background-color 80ms steps(2, end), border-color 80ms steps(2, end); --example-ds-color-background-app: #FFFFFF; --example-ds-color-background-surface: #FFFFFF; --example-ds-color-background-subtle: #EEEEEE; --example-ds-color-background-elevated: #FFFFFF; --example-ds-color-text-primary: #000000; --example-ds-color-text-secondary: #333333; --example-ds-color-text-onAccent: #FFFFFF; --example-ds-color-text-onDanger: #FFFFFF; --example-ds-color-accent-default: #000000; --example-ds-color-accent-hover: #333333; --example-ds-color-border-default: #000000; --example-ds-color-border-strong: #000000; --example-ds-color-border-focus: #000000; --example-ds-color-shadow-offset: #000000; --example-ds-color-danger-default: #000000; --example-ds-color-danger-solid: #000000; --example-ds-color-success-default: #000000; --example-ds-color-success-solid: #000000; --example-ds-color-warning-default: #000000; --example-ds-color-warning-onSolid: #FFFFFF; --example-ds-color-info-default: #000000; --example-ds-color-info-onSolid: #FFFFFF; --example-ds-color-overlay-default: color-mix(in srgb, #000000 45%, transparent); --example-ds-syntax-base: oklch(24.8% 0.008 264); --example-ds-syntax-keyword: oklch(54.5% 0.24 301); --example-ds-syntax-title: oklch(58.5% 0.22 248); --example-ds-syntax-attr: oklch(50% 0.18 68); --example-ds-syntax-string: oklch(53.2% 0.18 178); --example-ds-syntax-builtIn: oklch(56.5% 0.22 48); --example-ds-syntax-comment: oklch(66.4% 0.014 264); --example-ds-syntax-name: oklch(57.5% 0.18 29); --example-ds-syntax-section: oklch(55.2% 0.24 271); --example-ds-syntax-bullet: oklch(55.5% 0.22 66); --example-ds-syntax-addition: oklch(58.8% 0.22 176); --example-ds-syntax-additionBackground: oklch(99.3% 0.01 160); --example-ds-syntax-deletion: oklch(57.5% 0.18 29); --example-ds-syntax-deletionBackground: oklch(99.7% 0.008 25); } }
}
@layer components {
.docs-docs-layout-sidebarShell { flex-shrink: 0; align-self: stretch; }
}
@layer components {
@media (min-width: 769px) { .docs-docs-layout-sidebarShellHiddenDesktop { display: none; } }
}
@layer components {
.docs-docs-layout-root { display: flex; min-height: 100vh; color: var(--example-ds-color-text-primary); background-color: var(--example-ds-color-background-app); padding-top: calc(var(--example-ds-space-8) + var(--example-ds-space-2)); }
}
@layer components {
.docs-docs-layout-content { flex: 1; min-width: 0; }
}
@layer components {
html[data-style="ai-glow"] .docs-docs-layout-content { background-image: linear-gradient(115deg, color-mix(in oklch, #F0ABFC 30%, transparent), transparent 24%, color-mix(in oklch, #67E8F9 28%, transparent) 50%, color-mix(in oklch, #FDE68A 20%, transparent) 72%, transparent); background-position: top center; background-repeat: no-repeat; background-size: 100% min(760px, 80vh); }
}
@layer components {
.docs-docs-layout-main { max-width: 720px; padding: var(--example-ds-space-8); }
}
@layer components {
@media (max-width: 768px) { .docs-docs-layout-main { padding: var(--example-ds-space-5) var(--example-ds-space-4); } }
}
@layer components {
.docs-docs-layout-mainLanding { max-width: min(1120px, 100%); margin: 0 auto; width: 100%; padding: var(--example-ds-space-8); }
}
@layer components {
@media (max-width: 768px) { .docs-docs-layout-mainLanding { padding: var(--example-ds-space-5) var(--example-ds-space-4); } }
}
@layer components {
.docs-docs-layout-docPageWrap { max-width: 1100px; margin: 0 auto; width: 100%; }
}
@layer components {
.docs-docs-layout-docPageWrapWithToc { display: grid; grid-template-columns: 1fr; grid-template-areas: "toc" "main"; }
}
@layer components {
@media (min-width: 1024px) { .docs-docs-layout-docPageWrapWithToc { grid-template-columns: minmax(0, 1fr) 200px; grid-template-areas: "main toc"; gap: var(--example-ds-space-8); align-items: start; } }
}
@layer components {
.docs-docs-layout-mainColumn { grid-area: main; min-width: 0; }
}
@layer components {
.docs-docs-layout-tocAside { grid-area: toc; min-width: 0; }
}
@layer components {
@media (min-width: 1024px) { .docs-docs-layout-tocAside { justify-self: end; width: 200px; position: sticky; top: calc(calc(var(--example-ds-space-8) + var(--example-ds-space-2)) + var(--example-ds-space-5)); max-height: calc(100vh - calc(var(--example-ds-space-8) + var(--example-ds-space-2)) - var(--example-ds-space-5) - var(--example-ds-space-2)); overflow-y: auto; padding-top: var(--example-ds-space-2); padding-right: var(--example-ds-space-1); } }
}
@layer components {
.docs-docs-sidebar-root { width: 280px; flex-shrink: 0; height: 100vh; position: sticky; top: 0; display: flex; flex-direction: column; border-right: var(--example-ds-borderWidth-thick) solid var(--example-ds-color-border-strong); }
}
@layer components {
html[data-style="ai-glow"] .docs-docs-sidebar-root { background-color: color-mix(in oklch, var(--example-ds-color-background-surface) 78%, transparent); background-image: radial-gradient(circle at 20% 10%, color-mix(in oklch, #F0ABFC 18%, transparent) 0 4rem, transparent 10rem),
          radial-gradient(circle at 90% 70%, color-mix(in oklch, #67E8F9 14%, transparent) 0 4rem, transparent 10rem); backdrop-filter: blur(18px) saturate(1.25); box-shadow: 8px 0 36px color-mix(in oklch, #7C3AED 10%, transparent); }
}
@layer components {
html[data-style="windows-95"] .docs-docs-sidebar-root { background-color: var(--example-ds-color-background-surface); border-right: var(--example-ds-borderWidth-default) solid var(--example-ds-color-shadow-offset); box-shadow: inset 1px 0 0 var(--example-ds-color-background-elevated); }
}
@layer components {
html[data-style="classic-system"] .docs-docs-sidebar-root { background-color: var(--example-ds-color-background-surface); background-image: repeating-linear-gradient(45deg, transparent 0 2px, var(--example-ds-color-background-subtle) 2px 4px); }
}
@layer components {
html[data-style="new-wave"] .docs-docs-sidebar-root { border-right-width: 3px; }
}
@layer components {
@media (min-width: 769px) { .docs-docs-sidebar-root { top: calc(var(--example-ds-space-8) + var(--example-ds-space-2)); height: calc(100vh - calc(var(--example-ds-space-8) + var(--example-ds-space-2))); align-self: flex-start; } }
}
@layer components {
@media (max-width: 768px) { .docs-docs-sidebar-root { position: fixed; height: auto; top: 0; left: 0; bottom: 0; z-index: 200; transform: translateX(-100%); visibility: hidden; background-color: var(--example-ds-color-background-app); } }
}
@layer components {
@media (max-width: 768px) { .docs-docs-sidebar-rootOpen { transform: translateX(0); visibility: visible; } }
}
@layer components {
.docs-docs-sidebar-backdrop { display: none; }
}
@layer components {
@media (max-width: 768px) { .docs-docs-sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 100; background-color: var(--example-ds-color-overlay-default); opacity: 0; visibility: hidden; } }
}
@layer components {
@media (max-width: 768px) { .docs-docs-sidebar-backdropVisible { opacity: 1; visibility: visible; } }
}
@layer components {
.docs-docs-sidebar-header { display: flex; align-items: center; padding: var(--example-ds-space-5) var(--example-ds-space-5) var(--example-ds-space-4); }
}
@layer components {
@media (min-width: 769px) { .docs-docs-sidebar-header { display: none; } }
}
@layer components {
.docs-docs-sidebar-logo { font-size: var(--example-ds-fontSize-xl); font-weight: var(--example-ds-fontWeight-bold); color: var(--example-ds-color-text-primary); text-decoration: none; letter-spacing: -0.03em; text-transform: uppercase; }
}
@layer components {
.docs-docs-sidebar-logo:hover { color: var(--example-ds-color-accent-default); }
}
@layer components {
.docs-docs-sidebar-logoAccent { color: var(--example-ds-color-accent-default); }
}
@layer components {
.docs-docs-sidebar-searchWrapper { position: relative; border-top: var(--example-ds-borderWidth-thick) solid var(--example-ds-color-border-strong); border-bottom: var(--example-ds-borderWidth-thick) solid var(--example-ds-color-border-strong); }
}
@layer components {
@media (min-width: 769px) { .docs-docs-sidebar-searchWrapper { display: none; } }
}
@layer components {
.docs-docs-sidebar-searchIcon { position: absolute; left: calc(var(--example-ds-space-2) + 2px); top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; color: var(--example-ds-color-text-placeholder); pointer-events: none; line-height: 0; }
}
@layer components {
.docs-docs-sidebar-searchKbd { position: absolute; right: 0; top: 0; height: 100%; aspect-ratio: 1; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; font-size: var(--example-ds-fontSize-xs); color: var(--example-ds-color-text-placeholder); background-color: var(--example-ds-color-accent-subtle); padding-inline: var(--example-ds-space-2); font-family: var(--example-ds-fontFamily-sans); line-height: 1; pointer-events: none; }
}
@layer components {
.docs-docs-sidebar-searchTrigger { width: 100%; display: flex; align-items: center; margin: 0; padding: var(--example-ds-space-2) var(--example-ds-space-4) var(--example-ds-space-2) 32px; font-size: var(--example-ds-fontSize-sm); font-family: var(--example-ds-fontFamily-sans); text-align: left; cursor: pointer; background-color: transparent; border: none; color: var(--example-ds-color-text-secondary); outline: none; }
}
@layer components {
.docs-docs-sidebar-searchTrigger:hover { background-color: var(--example-ds-color-background-subtle); color: var(--example-ds-color-text-primary); }
}
@layer components {
.docs-docs-sidebar-searchTrigger:focus-visible { outline: var(--example-ds-borderWidth-thin) solid var(--example-ds-color-accent-default); outline-offset: -2px; }
}
@layer components {
.docs-docs-sidebar-nav { flex: 1; overflow-y: auto; padding-block: var(--example-ds-space-2); }
}
@layer components {
.docs-docs-sidebar-sectionTitle { font-family: var(--example-ds-fontFamily-mono); font-size: var(--example-ds-fontSize-xs); font-weight: var(--example-ds-fontWeight-bold); text-transform: uppercase; letter-spacing: 0.1em; color: var(--example-ds-color-text-secondary); padding: var(--example-ds-space-4) var(--example-ds-space-5) var(--example-ds-space-2); margin-top: var(--example-ds-space-3); border-top: var(--example-ds-stroke-default); }
}
@layer components {
.docs-docs-sidebar-sectionTitleFirst { border-top: none; margin-top: 0; }
}
@layer components {
.docs-docs-sidebar-link { display: block; box-sizing: border-box; font-size: var(--example-ds-fontSize-md); color: var(--example-ds-color-text-secondary); text-decoration: none; padding: 6px var(--example-ds-space-5); z-index: 2; }
}
@layer components {
.docs-docs-sidebar-link:hover { color: var(--example-ds-color-accent-default); background-color: var(--example-ds-color-background-surface); }
}
@layer components {
.docs-docs-sidebar-linkActive { position: relative; z-index: 1; color: var(--example-ds-color-text-primary); background-color: var(--example-ds-color-background-surface); border-top: var(--example-ds-stroke-strong); border-bottom: var(--example-ds-stroke-strong); }
}
@layer components {
.docs-docs-sidebar-linkActive:hover { color: var(--example-ds-color-accent-default); background-color: var(--example-ds-color-background-surface); }
}
@layer components {
.docs-docs-sidebar-footer { padding: var(--example-ds-space-4) var(--example-ds-space-5); border-top: var(--example-ds-borderWidth-thick) solid var(--example-ds-color-border-strong); display: flex; flex-direction: column; gap: var(--example-ds-space-2); }
}
@layer components {
.docs-docs-sidebar-themeFieldLabel { font-size: var(--example-ds-fontSize-xs); font-weight: var(--example-ds-fontWeight-bold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--example-ds-color-text-placeholder); }
}
@layer components {
.docs-docs-sidebar-themeSelect { width: 100%; padding: var(--example-ds-space-2) var(--example-ds-space-4); font-size: var(--example-ds-fontSize-sm); font-family: var(--example-ds-fontFamily-sans); background-color: var(--example-ds-color-background-surface); border: var(--example-ds-borderWidth-default) solid var(--example-ds-color-border-strong); color: var(--example-ds-color-text-primary); cursor: pointer; outline: none; box-shadow: var(--example-ds-shadow-xs); }
}
@layer components {
.docs-docs-sidebar-themeSelect:focus { outline: var(--example-ds-borderWidth-thin) solid var(--example-ds-color-accent-default); outline-offset: 0; }
}
@layer components {
@supports (appearance: base-select) { .docs-docs-sidebar-themeSelect { appearance: base-select; border-radius: var(--example-ds-radius-none); border: var(--example-ds-borderWidth-thick) solid var(--example-ds-color-border-strong); box-shadow: var(--example-ds-shadow-sm); } }
}
@layer components {
@supports (appearance: base-select) { .docs-docs-sidebar-themeSelect::picker(select) { appearance: base-select; background-color: var(--example-ds-color-background-surface); color: var(--example-ds-color-text-primary); border: var(--example-ds-borderWidth-thick) solid var(--example-ds-color-border-strong); border-radius: var(--example-ds-radius-none); box-shadow: var(--example-ds-shadow-md); padding: var(--example-ds-space-1); margin-block-start: var(--example-ds-space-2); } }
}
@layer components {
@supports (appearance: base-select) { .docs-docs-sidebar-themeSelect option { padding: var(--example-ds-space-2) var(--example-ds-space-3); font-size: var(--example-ds-fontSize-sm); font-family: var(--example-ds-fontFamily-sans); border-radius: var(--example-ds-radius-none); cursor: pointer; } }
}
@layer components {
@supports (appearance: base-select) { .docs-docs-sidebar-themeSelect option:hover { background-color: var(--example-ds-color-background-subtle); } }
}
@layer components {
@supports (appearance: base-select) { .docs-docs-sidebar-themeSelect option:focus { background-color: var(--example-ds-color-background-subtle); outline: none; } }
}
@layer components {
@supports (appearance: base-select) { .docs-docs-sidebar-themeSelect option:checked { background-color: var(--example-ds-color-accent-subtle); color: var(--example-ds-color-text-primary); font-weight: var(--example-ds-fontWeight-medium); } }
}
@layer components {
@supports (appearance: base-select) { .docs-docs-sidebar-themeSelect:open::picker-icon { transform: rotate(180deg); } }
}
@layer components {
.docs-docs-sidebar-themeToggle { display: flex; align-items: center; justify-content: center; gap: var(--example-ds-space-2); width: 100%; padding: 7px var(--example-ds-space-4); font-size: var(--example-ds-fontSize-sm); color: var(--example-ds-color-text-primary); background-color: var(--example-ds-color-background-surface); border: var(--example-ds-borderWidth-default) solid var(--example-ds-color-border-strong); cursor: pointer; font-family: var(--example-ds-fontFamily-sans); box-shadow: var(--example-ds-shadow-xs); }
}
@layer components {
.docs-docs-sidebar-themeToggle:hover { background-color: var(--example-ds-color-background-subtle); }
}
@layer components {
.docs-docs-site-header-root { display: block; position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 300; background-color: var(--example-ds-color-background-app); border-bottom: var(--example-ds-borderWidth-thick) solid var(--example-ds-color-border-strong); }
}
@layer components {
html[data-style="ai-glow"] .docs-docs-site-header-root { background-color: color-mix(in oklch, var(--example-ds-color-background-surface) 84%, transparent); border-bottom-color: var(--example-ds-color-border-default); box-shadow: 0 12px 36px color-mix(in oklch, #7C3AED 12%, transparent); backdrop-filter: blur(18px) saturate(1.35); }
}
@layer components {
html[data-style="new-wave"] .docs-docs-site-header-root { border-bottom-width: 3px; text-transform: uppercase; }
}
@layer components {
html[data-style="windows-95"] .docs-docs-site-header-root { background-color: var(--example-ds-color-background-surface); border-bottom: var(--example-ds-borderWidth-default) solid var(--example-ds-color-shadow-offset); box-shadow: inset 0 1px 0 var(--example-ds-color-background-elevated); }
}
@layer components {
html[data-style="classic-system"] .docs-docs-site-header-root { background-color: var(--example-ds-color-background-surface); border-bottom: var(--example-ds-borderWidth-default) solid var(--example-ds-color-border-strong); }
}
@layer components {
.docs-docs-site-header-inner { display: flex; align-items: stretch; justify-content: space-between; gap: 0; height: calc(var(--example-ds-space-8) + var(--example-ds-space-2)); min-height: calc(var(--example-ds-space-8) + var(--example-ds-space-2)); padding-inline: var(--example-ds-space-4); box-sizing: border-box; }
}
@layer components {
@media (min-width: 769px) { .docs-docs-site-header-inner { padding-inline: 0; gap: 0; } }
}
@layer components {
.docs-docs-site-header-menuToggle { display: flex; align-items: center; justify-content: center; width: calc(var(--example-ds-space-6) + var(--example-ds-space-1)); height: calc(var(--example-ds-space-6) + var(--example-ds-space-1)); padding: 0; margin: 0; flex-shrink: 0; align-self: center; background-color: var(--example-ds-color-background-surface); border: var(--example-ds-borderWidth-default) solid var(--example-ds-color-border-default); color: var(--example-ds-color-text-primary); cursor: pointer; box-shadow: var(--example-ds-shadow-xs); font-size: var(--example-ds-fontSize-lg); line-height: 1; }
}
@layer components {
.docs-docs-site-header-menuToggle:hover { background-color: var(--example-ds-color-background-subtle); }
}
@layer components {
.docs-docs-site-header-menuToggle:active { box-shadow: none; transform: translate(2px, 2px); }
}
@layer components {
html[data-style="windows-95"] .docs-docs-site-header-menuToggle { box-shadow: var(--example-ds-shadow-xs); border-color: var(--example-ds-color-border-default); }
}
@layer components {
html[data-style="classic-system"] .docs-docs-site-header-menuToggle { border-radius: var(--example-ds-radius-full); box-shadow: none; }
}
@layer components {
.docs-docs-site-header-menuToggle:focus-visible { outline: var(--example-ds-borderWidth-thin) solid var(--example-ds-color-accent-default); outline-offset: 2px; }
}
@layer components {
@media (min-width: 769px) { .docs-docs-site-header-menuToggle { display: none; } }
}
@layer components {
.docs-docs-site-header-left { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; }
}
@layer components {
@media (max-width: 768px) { .docs-docs-site-header-left { margin-inline: var(--example-ds-space-1); gap: var(--example-ds-space-1); } }
}
@layer components {
@media (min-width: 769px) { .docs-docs-site-header-left { flex: initial; flex-grow: 0; justify-content: flex-start; align-items: stretch; margin-inline: 0; border-inline-end: var(--example-ds-stroke-strong); } }
}
@layer components {
.docs-docs-site-header-logo { font-family: var(--example-ds-fontFamily-display); font-style: italic; font-size: var(--example-ds-fontSize-xl); font-weight: var(--example-ds-fontWeight-bold); color: var(--example-ds-color-text-primary); text-decoration: none; letter-spacing: 0.02em; text-transform: uppercase; flex-shrink: 0; align-self: center; padding-inline: var(--example-ds-space-2); padding-block: var(--example-ds-space-1); }
}
@layer components {
@media (min-width: 769px) { .docs-docs-site-header-logo { width: 280px; box-sizing: border-box; padding-inline-start: var(--example-ds-space-4); padding-inline-end: var(--example-ds-space-4); padding-block: 0; } }
}
@layer components {
.docs-docs-site-header-logo:hover { color: var(--example-ds-color-accent-default); }
}
@layer components {
html[data-style="ai-glow"] .docs-docs-site-header-logo { font-style: normal; letter-spacing: -0.02em; text-transform: none; }
}
@layer components {
html[data-style="new-wave"] .docs-docs-site-header-logo { letter-spacing: 0.08em; font-style: normal; }
}
@layer components {
html[data-style="windows-95"] .docs-docs-site-header-logo { font-style: normal; letter-spacing: 0; text-transform: none; }
}
@layer components {
html[data-style="classic-system"] .docs-docs-site-header-logo { font-style: normal; letter-spacing: 0; text-transform: none; }
}
@layer components {
@media (max-width: 768px) { .docs-docs-site-header-logo { font-size: var(--example-ds-fontSize-lg); padding-inline: var(--example-ds-space-2); } }
}
@layer components {
.docs-docs-site-header-logoAccent { color: var(--example-ds-color-accent-default); }
}
@layer components {
.docs-docs-site-header-nav { display: none; }
}
@layer components {
@media (min-width: 769px) { .docs-docs-site-header-nav { display: flex; align-items: stretch; gap: 0; align-self: stretch; height: 100%; border-inline-start: var(--example-ds-stroke-strong); margin-inline-start: -1px; } }
}
@layer components {
.docs-docs-site-header-navLink { display: flex; align-items: center; box-sizing: border-box; height: 100%; margin: 0; font-size: var(--example-ds-fontSize-sm); font-family: var(--example-ds-fontFamily-mono); font-weight: var(--example-ds-fontWeight-semibold); letter-spacing: 0.04em; line-height: 1.2; color: var(--example-ds-color-text-secondary); text-decoration: none; padding-inline: var(--example-ds-space-4); background-color: transparent; cursor: pointer; z-index: 2; transition: var(--example-ds-transition-colorShift); }
}
@layer components {
.docs-docs-site-header-navLink:hover { color: var(--example-ds-color-text-primary); background-color: var(--example-ds-color-background-subtle); }
}
@layer components {
.docs-docs-site-header-navLink[aria-current="page"] { position: relative; z-index: 3; color: var(--example-ds-color-text-primary); background-color: var(--example-ds-color-background-surface); }
}
@layer components {
.docs-docs-site-header-navLink[aria-current="page"]:hover { color: var(--example-ds-color-text-primary); background-color: var(--example-ds-color-background-surface); }
}
@layer components {
.docs-docs-site-header-right { display: flex; align-items: stretch; flex-shrink: 0; align-self: center; height: 100%; }
}
@layer components {
@media (min-width: 769px) { .docs-docs-site-header-right { flex: 1; min-width: 0; align-self: stretch; justify-content: flex-end; } }
}
@layer components {
.docs-docs-site-header-searchWrapper { display: flex; align-items: stretch; flex-shrink: 0; }
}
@layer components {
@media (max-width: 768px) { .docs-docs-site-header-searchWrapper { border-inline-start: none; } }
}
@layer components {
@media (min-width: 769px) { .docs-docs-site-header-searchWrapper { flex: 0 1 12rem; min-width: 0; max-width: min(19rem, 100%); align-self: stretch; margin-inline: 0; border-inline-start: var(--example-ds-stroke-strong); } }
}
@layer components {
.docs-docs-site-header-searchIcon { display: inline-flex; align-items: center; justify-content: center; color: var(--example-ds-color-text-placeholder); pointer-events: none; line-height: 0; flex-shrink: 0; }
}
@layer components {
@media (min-width: 769px) { .docs-docs-site-header-searchIcon { color: var(--example-ds-color-text-placeholder); opacity: 0.8; } }
}
@layer components {
@media (max-width: 768px) { .docs-docs-site-header-searchTriggerLabel { display: none; } }
}
@layer components {
.docs-docs-site-header-searchTrigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--example-ds-space-2); margin: 0; min-width: 0; box-sizing: border-box; padding-inline: var(--example-ds-space-3); padding-block: var(--example-ds-space-2); font-size: var(--example-ds-fontSize-sm); font-family: var(--example-ds-fontFamily-sans); text-align: left; cursor: pointer; background-color: transparent; border: none; color: var(--example-ds-color-text-secondary); outline: none; }
}
@layer components {
.docs-docs-site-header-searchTrigger:hover { background-color: var(--example-ds-color-background-subtle); color: var(--example-ds-color-text-primary); }
}
@layer components {
.docs-docs-site-header-searchTrigger:active { background-color: var(--example-ds-color-accent-subtle); }
}
@layer components {
.docs-docs-site-header-searchTrigger:focus-visible { outline: var(--example-ds-borderWidth-thin) solid var(--example-ds-color-accent-default); outline-offset: 2px; }
}
@layer components {
@media (min-width: 769px) { .docs-docs-site-header-searchTrigger { min-height: calc(var(--example-ds-space-8) + var(--example-ds-space-2)); align-self: stretch; padding-block: 0; padding-inline: var(--example-ds-space-4); transition: var(--example-ds-transition-colorShift); } }
}
@layer components {
@media (min-width: 769px) { .docs-docs-site-header-searchTrigger:focus-visible { outline: var(--example-ds-borderWidth-thin) solid var(--example-ds-color-accent-default); outline-offset: 2px; } }
}
@layer components {
@media (max-width: 768px) { .docs-docs-site-header-searchTrigger { width: calc(var(--example-ds-space-6) + var(--example-ds-space-1)); height: calc(var(--example-ds-space-6) + var(--example-ds-space-1)); padding: 0; justify-content: center; gap: 0; background-color: var(--example-ds-color-background-surface); border: var(--example-ds-borderWidth-default) solid var(--example-ds-color-border-default); box-shadow: var(--example-ds-shadow-xs); color: var(--example-ds-color-text-primary); } }
}
@layer components {
@media (max-width: 768px) { .docs-docs-site-header-searchTrigger:hover { background-color: var(--example-ds-color-background-subtle); color: var(--example-ds-color-text-primary); } }
}
@layer components {
@media (max-width: 768px) { .docs-docs-site-header-searchTrigger:active { box-shadow: none; transform: translate(2px, 2px); } }
}
@layer components {
@media (max-width: 768px) { .docs-docs-site-header-searchTrigger:focus-visible { outline-offset: 2px; } }
}
@layer components {
.docs-docs-site-header-searchKbd { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; font-size: var(--example-ds-fontSize-xs); line-height: 1; color: var(--example-ds-color-text-secondary); background-color: transparent; border: none; font-family: var(--example-ds-fontFamily-mono); font-weight: var(--example-ds-fontWeight-semibold); letter-spacing: 0.04em; padding-inline: 0; padding-block: 0; pointer-events: none; flex-shrink: 0; opacity: 0.8; }
}
@layer components {
@media (max-width: 768px) { .docs-docs-site-header-searchKbd { display: none; } }
}
@layer components {
@media (min-width: 769px) { .docs-docs-site-header-searchKbd { margin-inline-start: auto; } }
}
@layer components {
.docs-docs-site-header-githubIcon { display: block; flex-shrink: 0; }
}
@layer components {
.docs-docs-site-header-githubLink { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: calc(var(--example-ds-space-8) + var(--example-ds-space-2)); width: calc(var(--example-ds-space-8) + var(--example-ds-space-2)); padding: 0; font-size: var(--example-ds-fontSize-sm); font-weight: var(--example-ds-fontWeight-bold); font-family: var(--example-ds-fontFamily-sans); text-decoration: none; color: var(--example-ds-color-text-primary); background-color: transparent; border: none; border-inline-start: var(--example-ds-stroke-strong); box-shadow: none; align-self: stretch; transition: var(--example-ds-transition-colorShift); }
}
@layer components {
.docs-docs-site-header-githubLink:hover { background-color: var(--example-ds-color-background-subtle); color: var(--example-ds-color-accent-default); }
}
@layer components {
.docs-docs-site-header-githubLink:active { background-color: var(--example-ds-color-accent-subtle); }
}
@layer components {
.docs-docs-site-header-githubLink:focus-visible { outline: var(--example-ds-borderWidth-thin) solid var(--example-ds-color-accent-default); outline-offset: 2px; z-index: 1; }
}
@layer components {
@media (max-width: 768px) { .docs-docs-site-header-githubLink { min-width: calc(var(--example-ds-space-6) + var(--example-ds-space-1)); width: calc(var(--example-ds-space-6) + var(--example-ds-space-1)); } }
}
@layer components {
.docs-docs-appearance-controls-cluster { display: flex; align-items: stretch; flex-shrink: 0; height: 100%; gap: 0; }
}
@layer components {
.docs-docs-appearance-controls-iconButton { display: inline-flex; align-items: center; justify-content: center; margin: 0; box-sizing: border-box; width: calc(var(--example-ds-space-8) + var(--example-ds-space-2)); min-width: calc(var(--example-ds-space-8) + var(--example-ds-space-2)); padding: 0; background-color: transparent; color: var(--example-ds-color-text-primary); cursor: pointer; flex-shrink: 0; align-self: stretch; border: none; border-inline-start: var(--example-ds-stroke-strong); transition: var(--example-ds-transition-colorShift); }
}
@layer components {
.docs-docs-appearance-controls-iconButton:hover { background-color: var(--example-ds-color-background-subtle); color: var(--example-ds-color-accent-default); }
}
@layer components {
.docs-docs-appearance-controls-iconButton:active { background-color: var(--example-ds-color-accent-subtle); }
}
@layer components {
html[data-style="ai-glow"] .docs-docs-appearance-controls-iconButton { border-inline-start-color: var(--example-ds-color-border-default); }
}
@layer components {
html[data-style="windows-95"] .docs-docs-appearance-controls-iconButton { background-color: var(--example-ds-color-background-surface); border-inline-start: var(--example-ds-borderWidth-default) solid var(--example-ds-color-border-default); box-shadow: var(--example-ds-shadow-xs); }
}
@layer components {
html[data-style="classic-system"] .docs-docs-appearance-controls-iconButton { border-inline-start: var(--example-ds-stroke-strong); }
}
@layer components {
html[data-style="new-wave"] .docs-docs-appearance-controls-iconButton { text-transform: uppercase; }
}
@layer components {
.docs-docs-appearance-controls-iconButton:focus-visible { outline: var(--example-ds-borderWidth-thin) solid var(--example-ds-color-accent-default); outline-offset: 2px; z-index: 1; }
}
@layer components {
@media (max-width: 768px) { .docs-docs-appearance-controls-iconButton { width: calc(var(--example-ds-space-6) + var(--example-ds-space-1)); min-width: calc(var(--example-ds-space-6) + var(--example-ds-space-1)); } }
}
@layer components {
.docs-docs-appearance-controls-styleHost { position: relative; display: flex; align-items: center; }
}
@layer components {
@media (min-width: 769px) { .docs-docs-appearance-controls-styleHost { align-items: stretch; align-self: stretch; } }
}
@layer components {
.docs-docs-appearance-controls-modeIcon { display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
}
@layer components {
.docs-docs-appearance-controls-modeIcon[hidden] { display: none; }
}
@layer components {
.docs-docs-appearance-controls-dropdown { position: absolute; top: 100%; right: 0; margin-top: var(--example-ds-space-2); min-width: 13rem; max-height: min(50vh, 16rem); overflow-y: auto; padding: var(--example-ds-space-1); background-color: var(--example-ds-color-background-surface); border: var(--example-ds-borderWidth-thick) solid var(--example-ds-color-border-strong); box-shadow: var(--example-ds-shadow-md); z-index: 400; }
}
@layer components {
html[data-style="ai-glow"] .docs-docs-appearance-controls-dropdown { background-color: color-mix(in oklch, var(--example-ds-color-background-surface) 92%, transparent); background-image: radial-gradient(circle at 18% 18%, color-mix(in oklch, #F0ABFC 24%, transparent) 0 3rem, transparent 7rem),
          radial-gradient(circle at 86% 12%, color-mix(in oklch, #67E8F9 22%, transparent) 0 2rem, transparent 6rem); backdrop-filter: blur(16px) saturate(1.25); }
}
@layer components {
html[data-style="windows-95"] .docs-docs-appearance-controls-dropdown { border-color: var(--example-ds-color-border-default); box-shadow: var(--example-ds-shadow-md); }
}
@layer components {
html[data-style="classic-system"] .docs-docs-appearance-controls-dropdown { background-image: repeating-linear-gradient(45deg, transparent 0 2px, var(--example-ds-color-background-subtle) 2px 4px); }
}
@layer components {
html[data-style="new-wave"] .docs-docs-appearance-controls-dropdown { transform: rotate(-1deg); }
}
@layer components {
.docs-docs-appearance-controls-menuItem { display: block; width: 100%; margin: 0; padding: var(--example-ds-space-2) var(--example-ds-space-3); font-size: var(--example-ds-fontSize-sm); font-family: var(--example-ds-fontFamily-sans); text-align: left; color: var(--example-ds-color-text-primary); background-color: transparent; border: none; cursor: pointer; border-radius: var(--example-ds-radius-none); }
}
@layer components {
.docs-docs-appearance-controls-menuItem:hover { background-color: var(--example-ds-color-background-subtle); }
}
@layer components {
.docs-docs-appearance-controls-menuItem[aria-selected="true"] { background-color: var(--example-ds-color-accent-subtle); font-weight: var(--example-ds-fontWeight-medium); }
}
@layer components {
html[data-style="ai-glow"] .docs-docs-appearance-controls-menuItem[aria-selected="true"] { box-shadow: inset 0 0 0 1px color-mix(in oklch, #7C3AED 34%, transparent); }
}
@layer components {
html[data-style="windows-95"] .docs-docs-appearance-controls-menuItem[aria-selected="true"] { color: var(--example-ds-color-text-onAccent); background-color: var(--example-ds-color-accent-default); }
}
@layer components {
html[data-style="classic-system"] .docs-docs-appearance-controls-menuItem[aria-selected="true"] { color: var(--example-ds-color-text-onAccent); background-color: var(--example-ds-color-accent-default); }
}
@layer components {
.docs-docs-doc-root { flex: 1; min-width: 0; }
}
@layer components {
.docs-docs-doc-eyebrowRow { margin-bottom: var(--example-ds-space-2); }
}
@layer components {
.docs-docs-doc-kicker { display: inline-flex; align-items: center; gap: var(--example-ds-space-2); margin-top: 0; margin-right: 0; margin-bottom: var(--example-ds-space-3); margin-left: 0; font-family: var(--example-ds-fontFamily-mono); font-size: var(--example-ds-fontSize-xs); font-weight: var(--example-ds-fontWeight-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--example-ds-color-text-secondary); }
}
@layer components {
.docs-docs-doc-kickerDot { width: 6px; height: 6px; background-color: var(--example-ds-color-accent-default); }
}
@layer components {
.docs-docs-doc-title { font-family: var(--example-ds-fontFamily-display); font-style: italic; font-size: clamp(2rem, 2.2vw + 1.25rem, 2.75rem); font-weight: var(--example-ds-fontWeight-bold); margin-top: 0; margin-bottom: var(--example-ds-space-3); color: var(--example-ds-color-text-primary); letter-spacing: -0.025em; line-height: 1.1; text-wrap: balance; }
}
@layer components {
html[data-style="ai-glow"] .docs-docs-doc-title { font-style: normal; letter-spacing: -0.045em; }
}
@layer components {
html[data-style="new-wave"] .docs-docs-doc-title { font-style: normal; text-transform: uppercase; letter-spacing: 0.02em; }
}
@layer components {
html[data-style="windows-95"] .docs-docs-doc-title { font-style: normal; letter-spacing: 0; }
}
@layer components {
html[data-style="classic-system"] .docs-docs-doc-title { font-style: normal; letter-spacing: 0; }
}
@layer components {
.docs-docs-doc-description { font-size: var(--example-ds-fontSize-lg); color: var(--example-ds-color-text-secondary); margin-top: 0; margin-bottom: var(--example-ds-space-6); line-height: var(--example-ds-lineHeight-relaxed); max-width: 60ch; text-wrap: pretty; }
}
@layer components {
.docs-docs-doc-content [data-codeblock] code { font-family: inherit; font-size: inherit; font-weight: inherit; color: inherit; background-color: transparent; padding: 0; border-radius: 0; border: none; }
}
@layer components {
.docs-docs-doc-content [data-doc-install-tabs] { margin-block: var(--example-ds-space-6); }
}
@layer components {
.docs-docs-doc-content .doc-install-tabs-tablist { display: flex; flex-wrap: wrap; gap: var(--example-ds-space-1); padding-top: var(--example-ds-space-2); padding-right: var(--example-ds-space-2); padding-left: var(--example-ds-space-2); border-top: var(--example-ds-borderWidth-default) solid var(--example-ds-color-border-default); border-right: var(--example-ds-borderWidth-default) solid var(--example-ds-color-border-default); border-left: var(--example-ds-borderWidth-default) solid var(--example-ds-color-border-default); border-bottom: none; border-top-left-radius: var(--example-ds-radius-lg); border-top-right-radius: var(--example-ds-radius-lg); background-color: var(--example-ds-codeBlock-backgroundHeader); }
}
@layer components {
.docs-docs-doc-content .doc-install-tabs-tab { appearance: none; margin: 0; border: none; border-radius: var(--example-ds-radius-md); padding-block: var(--example-ds-space-1); padding-inline: var(--example-ds-space-3); font-family: var(--example-ds-fontFamily-mono); font-size: var(--example-ds-fontSize-xs); font-weight: var(--example-ds-fontWeight-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--example-ds-color-text-secondary); background-color: transparent; cursor: pointer; transition: var(--example-ds-transition-colorShift); }
}
@layer components {
.docs-docs-doc-content .doc-install-tabs-tab:hover { color: var(--example-ds-color-text-primary); background-color: var(--example-ds-color-background-subtle); }
}
@layer components {
.docs-docs-doc-content .doc-install-tabs-tab[aria-selected="true"] { color: var(--example-ds-color-text-primary); background-color: var(--example-ds-color-background-default); box-shadow: var(--example-ds-shadow-sm); }
}
@layer components {
.docs-docs-doc-content [data-doc-install-tabs] [data-codeblock] { border-top-left-radius: 0; border-top-right-radius: 0; }
}
@layer components {
.docs-docs-doc-content .doc-install-tabs-panels { position: relative; }
}
@layer components {
.docs-docs-doc-content .doc-install-tabs-panelwrap[hidden] { display: none; }
}
@layer components {
.docs-docs-skip-root { position: absolute; left: var(--example-ds-space-4); top: var(--example-ds-space-4); z-index: 10000; padding: var(--example-ds-space-2) var(--example-ds-space-4); background-color: var(--example-ds-color-accent-default); color: var(--example-ds-color-text-onAccent); font-size: var(--example-ds-fontSize-md); font-weight: var(--example-ds-fontWeight-bold); text-decoration: none; border: var(--example-ds-borderWidth-default) solid var(--example-ds-color-border-default); box-shadow: var(--example-ds-shadow-md); transform: translateY(-160%); }
}
@layer components {
.docs-docs-skip-root:focus { transform: translateY(0); outline: var(--example-ds-borderWidth-thin) solid var(--example-ds-color-accent-default); outline-offset: 2px; }
}
@layer components {
.docs-docs-toc-nav { font-family: var(--example-ds-fontFamily-sans); }
}
@layer components {
.docs-docs-toc-title { margin-block: 0 var(--example-ds-space-3); margin-inline: var(--example-ds-space-4); font-family: var(--example-ds-fontFamily-mono); font-size: var(--example-ds-fontSize-xs); font-weight: var(--example-ds-fontWeight-bold); text-transform: uppercase; letter-spacing: 0.1em; color: var(--example-ds-color-text-secondary); }
}
@layer components {
@media (max-width: 1023px) { .docs-docs-toc-title { display: none; } }
}
@layer components {
.docs-docs-toc-list { list-style: none; padding: 0; margin: 0; }
}
@layer components {
@media (min-width: 1024px) { .docs-docs-toc-list { border-left: var(--example-ds-stroke-strong); } }
}
@layer components {
.docs-docs-toc-item { margin: 0; }
}
@layer components {
.docs-docs-toc-link { display: block; position: relative; font-size: var(--example-ds-fontSize-sm); line-height: 1.4; color: var(--example-ds-color-text-secondary); text-decoration: none; padding-top: var(--example-ds-space-1); padding-right: var(--example-ds-space-4); padding-bottom: var(--example-ds-space-1); padding-left: calc(var(--example-ds-space-4) + var(--docs-toc-depth, 0px)); transition: color 120ms ease; }
}
@layer components {
.docs-docs-toc-link:hover { color: var(--example-ds-color-accent-default); }
}
@layer components {
.docs-docs-toc-link[aria-current="location"] { color: var(--example-ds-color-accent-default); font-weight: var(--example-ds-fontWeight-semibold); }
}
@layer components {
@media (min-width: 1024px) { .docs-docs-toc-link[aria-current="location"]::before { content: ""; position: absolute; left: -5px; top: 50%; width: 8px; height: 8px; background-color: var(--example-ds-color-accent-default); transform: translateY(-50%); } }
}
@layer components {
.docs-docs-toc-root { margin-bottom: var(--example-ds-space-5); background-color: var(--example-ds-color-background-subtle); overflow: hidden; position: sticky; top: var(--example-ds-space-12); z-index: 20; }
}
@layer components {
@media (min-width: 1024px) { .docs-docs-toc-root { margin-bottom: 0; background-color: transparent; overflow: visible; position: static; top: auto; z-index: auto; } }
}
@layer components {
.docs-docs-toc-details { margin: 0; }
}
@layer components {
.docs-docs-toc-summary { list-style: none; cursor: pointer; font-family: var(--example-ds-fontFamily-mono); font-size: var(--example-ds-fontSize-sm); font-weight: var(--example-ds-fontWeight-bold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--example-ds-color-text-primary); padding: var(--example-ds-space-2) var(--example-ds-space-4); }
}
@layer components {
.docs-docs-toc-summary::-webkit-details-marker { display: none; }
}
@layer components {
@media (min-width: 1024px) { .docs-docs-toc-summary { display: none; } }
}
@layer components {
.docs-docs-toc-panel { padding: 0 var(--example-ds-space-4) var(--example-ds-space-4); border-top: var(--example-ds-borderWidth-default) solid var(--example-ds-color-border-default); }
}
@layer components {
@media (min-width: 1024px) { .docs-docs-toc-panel { padding: 0; border-top: none; } }
}
@layer components {
.docs-docs-doc-page-footer { margin-top: var(--example-ds-space-5); padding-top: var(--example-ds-space-4); border-top: var(--example-ds-borderWidth-thick) solid var(--example-ds-color-border-strong); display: flex; flex-wrap: wrap; align-items: center; gap: var(--example-ds-space-4) var(--example-ds-space-5); font-size: var(--example-ds-fontSize-sm); color: var(--example-ds-color-text-secondary); }
}
@layer components {
.docs-docs-doc-page-editLink { color: var(--example-ds-color-accent-default); text-decoration: none; font-weight: var(--example-ds-fontWeight-bold); }
}
@layer components {
.docs-docs-doc-page-editLink:hover { text-decoration: underline; }
}
@layer components {
.docs-docs-doc-page-pagination { display: flex; justify-content: space-between; margin-top: var(--example-ds-space-6); padding-top: var(--example-ds-space-5); border-top: var(--example-ds-borderWidth-thick) solid var(--example-ds-color-border-strong); gap: var(--example-ds-space-4); }
}
@layer components {
.docs-docs-doc-page-paginationLink { font-size: var(--example-ds-fontSize-md); color: var(--example-ds-color-text-primary); text-decoration: none; padding: var(--example-ds-space-2) var(--example-ds-space-4); border: var(--example-ds-borderWidth-default) solid var(--example-ds-color-border-default); box-shadow: var(--example-ds-shadow-sm); font-weight: var(--example-ds-fontWeight-medium); }
}
@layer components {
.docs-docs-doc-page-paginationLink:hover { background-color: var(--example-ds-color-accent-default); color: var(--example-ds-color-text-onAccent); transform: translate(2px, 2px); box-shadow: none; }
}
@layer components {
.docs-docs-doc-ai-actions-root { display: flex; flex-wrap: wrap; align-items: center; gap: var(--example-ds-space-2); margin-top: calc(-1 * var(--example-ds-space-2)); margin-bottom: var(--example-ds-space-4); }
}
@layer components {
.docs-docs-doc-ai-actions-button { font-size: var(--example-ds-fontSize-sm); padding: var(--example-ds-space-1) var(--example-ds-space-3); }
}
@layer components {
.docs-docs-doc-ai-actions-menu { position: relative; }
}
@layer components {
.docs-docs-doc-ai-actions-menuSummary { list-style: none; cursor: pointer; }
}
@layer components {
.docs-docs-doc-ai-actions-menuSummary::-webkit-details-marker { display: none; }
}
@layer components {
.docs-docs-doc-ai-actions-menuPanel { position: absolute; top: 100%; left: 0; z-index: 20; margin-top: var(--example-ds-space-1); min-width: 12rem; padding: var(--example-ds-space-1); background-color: var(--example-ds-color-background-surface); border: var(--example-ds-borderWidth-default) solid var(--example-ds-color-border-default); box-shadow: var(--example-ds-shadow-md); display: flex; flex-direction: column; gap: var(--example-ds-space-1); }
}
@layer components {
.docs-docs-doc-ai-actions-menuItem { display: block; padding: var(--example-ds-space-2) var(--example-ds-space-3); font-size: var(--example-ds-fontSize-sm); color: var(--example-ds-color-text-primary); text-decoration: none; }
}
@layer components {
.docs-docs-doc-ai-actions-menuItem:hover { background-color: var(--example-ds-color-background-subtle); }
}
@layer components {
.docs-docs-home-hero { position: relative; padding-top: var(--example-ds-space-12); padding-bottom: var(--example-ds-space-8); overflow: hidden; }
}
@layer components {
html[data-style="ai-glow"] .docs-docs-home-hero { overflow: visible; padding-bottom: calc(var(--example-ds-space-8) + var(--example-ds-space-8)); }
}
@layer components {
@media (max-width: 768px) { .docs-docs-home-hero { padding-top: var(--example-ds-space-8); padding-bottom: var(--example-ds-space-6); } }
}
@layer components {
@media (max-width: 768px) { html[data-style="ai-glow"] .docs-docs-home-hero { padding-bottom: calc(var(--example-ds-space-6) + var(--example-ds-space-6)); } }
}
@layer components {
.docs-docs-home-heroGrid { position: absolute; inset: 0; background-image: radial-gradient(circle at 1px 1px, var(--example-ds-color-border-default) 1px, transparent 0); background-size: 28px 28px; opacity: 0.4; pointer-events: none; mask-image: radial-gradient(ellipse 80% 70% at 30% 0%, black 20%, transparent 75%); }
}
@layer components {
html[data-style="ai-glow"] .docs-docs-home-heroGrid { inset: -var(--example-ds-space-8) -8vw -var(--example-ds-space-12); background-image: radial-gradient(circle at 12% 18%, #FFFFFF 0 1px, transparent 2px),
          radial-gradient(circle at 24% 36%, color-mix(in oklch, #F0ABFC 74%, transparent) 0 2px, transparent 3px),
          radial-gradient(circle at 72% 18%, color-mix(in oklch, #67E8F9 74%, transparent) 0 2px, transparent 3px),
          radial-gradient(circle at 88% 54%, color-mix(in oklch, #FDE68A 76%, transparent) 0 1px, transparent 3px),
          radial-gradient(circle at 44% 72%, color-mix(in oklch, #6EE7B7 72%, transparent) 0 2px, transparent 3px); background-size: 88px 88px, 120px 120px, 140px 140px, 104px 104px, 132px 132px; mask-image: radial-gradient(ellipse 96% 82% at 34% 18%, black 18%, transparent 78%); opacity: 0.82; }
}
@layer components {
html[data-style="new-wave"] .docs-docs-home-heroGrid { background-image: linear-gradient(135deg, var(--example-ds-color-accent-default) 0 10px, transparent 10px 30px),
          radial-gradient(circle at 1px 1px, var(--example-ds-color-border-default) 1px, transparent 0); background-size: 40px 40px, 24px 24px; opacity: 0.28; }
}
@layer components {
html[data-style="windows-95"] .docs-docs-home-heroGrid { background-image: none; }
}
@layer components {
html[data-style="classic-system"] .docs-docs-home-heroGrid { background-image: repeating-linear-gradient(45deg, var(--example-ds-color-border-default) 0 1px, transparent 1px 8px); background-size: auto; opacity: 0.12; }
}
@layer components {
.docs-docs-home-heroInner { position: relative; z-index: 1; }
}
@layer components {
.docs-docs-home-heroTop { display: grid; gap: var(--example-ds-space-12); align-items: start; }
}
@layer components {
@media (min-width: 769px) { .docs-docs-home-heroTop { grid-template-columns: minmax(0, 1fr) minmax(320px, 520px); gap: var(--example-ds-space-12); align-items: center; } }
}
@layer components {
.docs-docs-home-heroCopy { display: flex; flex-direction: column; gap: var(--example-ds-space-5); align-items: flex-start; }
}
@layer components {
.docs-docs-home-eyebrow { display: inline-flex; align-items: center; gap: var(--example-ds-space-2); font-size: var(--example-ds-fontSize-sm); font-weight: var(--example-ds-fontWeight-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--example-ds-color-text-secondary); margin: 0; }
}
@layer components {
.docs-docs-home-eyebrowDot { width: 6px; height: 6px; border-radius: var(--example-ds-radius-full); background-color: var(--example-ds-color-accent-default); }
}
@layer components {
.docs-docs-home-title { font-family: var(--example-ds-fontFamily-display); font-style: italic; font-size: clamp(2.25rem, 6vw + 0.75rem, 4rem); font-weight: var(--example-ds-fontWeight-bold); letter-spacing: -0.02em; line-height: 1.08; margin: 0; color: var(--example-ds-color-text-primary); text-wrap: balance; }
}
@layer components {
html[data-style="ai-glow"] .docs-docs-home-title { font-style: normal; letter-spacing: -0.045em; }
}
@layer components {
html[data-style="new-wave"] .docs-docs-home-title { text-transform: uppercase; letter-spacing: 0.02em; font-style: normal; }
}
@layer components {
html[data-style="windows-95"] .docs-docs-home-title { font-style: normal; letter-spacing: 0; }
}
@layer components {
html[data-style="classic-system"] .docs-docs-home-title { font-style: normal; letter-spacing: 0; }
}
@layer components {
.docs-docs-home-titleAccent { font-family: var(--example-ds-fontFamily-mono); font-style: normal; font-size: 0.82em; font-weight: var(--example-ds-fontWeight-bold); letter-spacing: -0.01em; padding-inline: var(--example-ds-space-3); padding-block: 0.05em; display: inline-block; box-decoration-break: clone; border: var(--example-ds-stroke-strong); background-color: var(--example-ds-color-background-surface); vertical-align: 0.08em; }
}
@layer components {
html[data-style="ai-glow"] .docs-docs-home-titleAccent { border-color: var(--example-ds-color-border-default); border-radius: var(--example-ds-radius-md); background-image: linear-gradient(120deg, color-mix(in oklch, #F0ABFC 22%, transparent), color-mix(in oklch, #67E8F9 20%, transparent), color-mix(in oklch, #6EE7B7 18%, transparent), color-mix(in oklch, #FDE68A 22%, transparent)); box-shadow: var(--example-ds-shadow-md); }
}
@layer components {
html[data-style="windows-95"] .docs-docs-home-titleAccent { border-color: var(--example-ds-color-border-default); box-shadow: var(--example-ds-shadow-xs); }
}
@layer components {
html[data-style="classic-system"] .docs-docs-home-titleAccent { border-radius: var(--example-ds-radius-full); background-image: repeating-linear-gradient(45deg, transparent 0 2px, var(--example-ds-color-background-subtle) 2px 4px); }
}
@layer components {
html[data-style="new-wave"] .docs-docs-home-titleAccent { transform: rotate(-2deg); }
}
@layer components {
.docs-docs-home-subtitle { font-size: var(--example-ds-fontSize-xl); color: var(--example-ds-color-text-secondary); line-height: var(--example-ds-lineHeight-relaxed); max-width: 36rem; margin: 0; text-wrap: pretty; }
}
@layer components {
.docs-docs-home-installChip { display: inline-flex; align-items: stretch; max-width: 100%; border: var(--example-ds-stroke-strong); background-color: var(--example-ds-color-background-surface); box-shadow: var(--example-ds-shadow-md); font-family: var(--example-ds-fontFamily-mono); font-size: var(--example-ds-fontSize-md); }
}
@layer components {
html[data-style="ai-glow"] .docs-docs-home-installChip { background-color: color-mix(in oklch, var(--example-ds-color-background-surface) 90%, transparent); background-image: linear-gradient(110deg, color-mix(in oklch, #F0ABFC 10%, transparent), color-mix(in oklch, #67E8F9 10%, transparent), color-mix(in oklch, #FDE68A 8%, transparent)); backdrop-filter: blur(12px) saturate(1.2); }
}
@layer components {
.docs-docs-home-installChipPre { margin: 0; padding: var(--example-ds-space-3) var(--example-ds-space-4); display: flex; align-items: center; overflow: auto; color: var(--example-ds-color-text-primary); white-space: nowrap; }
}
@layer components {
.docs-docs-home-installChipPre::before { content: "$"; color: var(--example-ds-color-text-secondary); margin-right: var(--example-ds-space-2); user-select: none; }
}
@layer components {
.docs-docs-home-installChipPre code { font-family: inherit; font-size: inherit; background: none; padding: 0; }
}
@layer components {
.docs-docs-home-installChipCopy { display: inline-flex; align-items: center; justify-content: center; padding: 0 var(--example-ds-space-4); border-left: var(--example-ds-stroke-strong); border-top: 0; border-right: 0; border-bottom: 0; background: var(--example-ds-color-background-subtle); color: var(--example-ds-color-text-primary); font-family: var(--example-ds-fontFamily-mono); font-size: var(--example-ds-fontSize-xs); font-weight: var(--example-ds-fontWeight-semibold); letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; transition: background-color 120ms ease; }
}
@layer components {
.docs-docs-home-installChipCopy:hover:not(:disabled) { background-color: var(--example-ds-color-accent-subtle); }
}
@layer components {
.docs-docs-home-installChipCopy[data-copied="true"] { background-color: var(--example-ds-color-accent-default); color: var(--example-ds-color-text-onAccent); }
}
@layer components {
.docs-docs-home-actions { display: flex; align-items: center; gap: var(--example-ds-space-3); flex-wrap: wrap; }
}
@layer components {
@media (max-width: 768px) { .docs-docs-home-actions { flex-direction: column; align-items: stretch; width: 100%; } }
}
@layer components {
.docs-docs-home-cta { display: inline-flex; align-items: center; justify-content: center; gap: var(--example-ds-space-2); font-size: var(--example-ds-fontSize-lg); font-weight: var(--example-ds-fontWeight-bold); font-family: var(--example-ds-fontFamily-sans); color: var(--example-ds-color-text-onAccent); background-color: var(--example-ds-color-accent-default); padding: 12px var(--example-ds-space-5); text-decoration: none; border: var(--example-ds-borderWidth-default) solid var(--example-ds-color-border-default); box-shadow: var(--example-ds-shadow-md); cursor: pointer; text-transform: uppercase; letter-spacing: 0.02em; }
}
@layer components {
.docs-docs-home-cta:hover { transform: translate(2px, 2px); box-shadow: var(--example-ds-shadow-xs); }
}
@layer components {
html[data-style="ai-glow"] .docs-docs-home-cta { border-color: transparent; border-radius: var(--example-ds-radius-md); background-color: var(--example-ds-color-accent-default); background-image: linear-gradient(110deg, color-mix(in oklch, #7C3AED 42%, #0EA5E9), #0EA5E9 58%, color-mix(in oklch, #10B981 42%, #0EA5E9)); }
}
@layer components {
html[data-style="ai-glow"] .docs-docs-home-cta:hover { transform: translateY(-1px); box-shadow: var(--example-ds-shadow-lg); }
}
@layer components {
html[data-style="windows-95"] .docs-docs-home-cta { box-shadow: var(--example-ds-shadow-xs); text-transform: none; }
}
@layer components {
html[data-style="classic-system"] .docs-docs-home-cta { border-radius: var(--example-ds-radius-full); text-transform: none; }
}
@layer components {
.docs-docs-home-cta:active { transform: translate(4px, 4px); box-shadow: none; }
}
@layer components {
.docs-docs-home-ctaSecondary { display: inline-flex; align-items: center; justify-content: center; gap: var(--example-ds-space-2); font-size: var(--example-ds-fontSize-lg); font-weight: var(--example-ds-fontWeight-bold); font-family: var(--example-ds-fontFamily-sans); color: var(--example-ds-color-text-primary); background-color: var(--example-ds-color-background-surface); padding: 12px var(--example-ds-space-5); text-decoration: none; border: var(--example-ds-borderWidth-default) solid var(--example-ds-color-border-default); box-shadow: var(--example-ds-shadow-md); cursor: pointer; text-transform: uppercase; letter-spacing: 0.02em; }
}
@layer components {
.docs-docs-home-ctaSecondary:hover { transform: translate(2px, 2px); box-shadow: var(--example-ds-shadow-xs); }
}
@layer components {
html[data-style="ai-glow"] .docs-docs-home-ctaSecondary:hover { transform: translateY(-1px); box-shadow: var(--example-ds-shadow-lg); }
}
@layer components {
html[data-style="windows-95"] .docs-docs-home-ctaSecondary { box-shadow: var(--example-ds-shadow-xs); text-transform: none; }
}
@layer components {
html[data-style="classic-system"] .docs-docs-home-ctaSecondary { border-radius: var(--example-ds-radius-full); text-transform: none; }
}
@layer components {
.docs-docs-home-ctaSecondary:active { transform: translate(4px, 4px); box-shadow: none; }
}
@layer components {
.docs-docs-home-metaRow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--example-ds-space-2) var(--example-ds-space-3); font-family: var(--example-ds-fontFamily-mono); font-size: var(--example-ds-fontSize-xs); color: var(--example-ds-color-text-secondary); letter-spacing: 0.04em; text-transform: uppercase; }
}
@layer components {
.docs-docs-home-metaDivider { display: inline-block; width: 4px; height: 4px; background-color: var(--example-ds-color-border-default); opacity: 0.5; }
}
@layer components {
.docs-docs-home-codeExampleWrap { width: 100%; max-width: 100%; }
}
@layer components {
@media (min-width: 769px) { .docs-docs-home-codeExampleWrap { justify-self: end; } }
}
@layer components {
.docs-docs-home-section { padding-top: var(--example-ds-space-12); padding-bottom: var(--example-ds-space-12); border-top: var(--example-ds-stroke-default); }
}
@layer components {
@media (max-width: 768px) { .docs-docs-home-section { padding-top: var(--example-ds-space-8); padding-bottom: var(--example-ds-space-8); } }
}
@layer components {
.docs-docs-home-sectionDense { padding-top: var(--example-ds-space-8); padding-bottom: var(--example-ds-space-8); }
}
@layer components {
@media (max-width: 768px) { .docs-docs-home-sectionDense { padding-top: var(--example-ds-space-6); padding-bottom: var(--example-ds-space-6); } }
}
@layer components {
.docs-docs-home-sectionHead { max-width: 40rem; margin-bottom: var(--example-ds-space-8); }
}
@layer components {
.docs-docs-home-sectionKicker { font-size: var(--example-ds-fontSize-sm); font-weight: var(--example-ds-fontWeight-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--example-ds-color-accent-default); margin-bottom: var(--example-ds-space-2); font-family: var(--example-ds-fontFamily-mono); }
}
@layer components {
.docs-docs-home-sectionTitle { font-size: var(--example-ds-fontSize-2xl); font-weight: var(--example-ds-fontWeight-bold); letter-spacing: -0.02em; line-height: 1.2; color: var(--example-ds-color-text-primary); margin-top: 0; margin-right: 0; margin-bottom: var(--example-ds-space-3); margin-left: 0; font-family: var(--example-ds-fontFamily-display); font-style: italic; }
}
@layer components {
.docs-docs-home-sectionLead { font-size: var(--example-ds-fontSize-lg); color: var(--example-ds-color-text-secondary); line-height: var(--example-ds-lineHeight-relaxed); margin: 0; }
}
@layer components {
.docs-docs-home-benefitStack { display: flex; flex-direction: column; gap: var(--example-ds-space-4); }
}
@layer components {
.docs-docs-home-benefitHero { display: grid; gap: var(--example-ds-space-6); padding: var(--example-ds-space-8); border: var(--example-ds-stroke-strong); background-color: var(--example-ds-color-background-surface); box-shadow: var(--example-ds-shadow-lg); align-items: center; }
}
@layer components {
@media (min-width: 769px) { .docs-docs-home-benefitHero { grid-template-columns: minmax(0, 1fr) minmax(320px, 480px); gap: var(--example-ds-space-8); } }
}
@layer components {
@media (max-width: 768px) { .docs-docs-home-benefitHero { padding: var(--example-ds-space-5); } }
}
@layer components {
.docs-docs-home-benefitHeroCopy { display: flex; flex-direction: column; gap: var(--example-ds-space-3); }
}
@layer components {
.docs-docs-home-benefitHeroTitle { font-size: var(--example-ds-fontSize-2xl); font-family: var(--example-ds-fontFamily-display); font-style: italic; font-weight: var(--example-ds-fontWeight-bold); letter-spacing: -0.02em; line-height: 1.15; color: var(--example-ds-color-text-primary); margin: 0; }
}
@layer components {
.docs-docs-home-benefitHeroText { font-size: var(--example-ds-fontSize-lg); color: var(--example-ds-color-text-secondary); line-height: var(--example-ds-lineHeight-relaxed); margin: 0; }
}
@layer components {
.docs-docs-home-benefitHeroText code { font-family: var(--example-ds-fontFamily-mono); font-size: 0.9em; padding: 0 var(--example-ds-space-1); background-color: var(--example-ds-color-background-subtle); }
}
@layer components {
.docs-docs-home-classPreview { display: flex; flex-direction: column; gap: var(--example-ds-space-2); padding: var(--example-ds-space-4); border: var(--example-ds-stroke-default); background-color: var(--example-ds-color-background-app); font-family: var(--example-ds-fontFamily-mono); font-size: var(--example-ds-fontSize-sm); color: var(--example-ds-color-text-primary); overflow: auto; }
}
@layer components {
.docs-docs-home-classPreviewLine { white-space: pre; }
}
@layer components {
.docs-docs-home-classPreviewLabel { font-size: var(--example-ds-fontSize-xs); font-weight: var(--example-ds-fontWeight-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--example-ds-color-text-secondary); margin-bottom: var(--example-ds-space-1); }
}
@layer components {
.docs-docs-home-classPreviewToken { color: var(--example-ds-color-accent-default); }
}
@layer components {
.docs-docs-home-benefitRow { display: grid; gap: var(--example-ds-space-4); grid-template-columns: 1fr; }
}
@layer components {
@media (min-width: 769px) { .docs-docs-home-benefitRow { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
}
@layer components {
.docs-docs-home-benefitCard { display: flex; flex-direction: column; gap: var(--example-ds-space-2); padding: var(--example-ds-space-5); border: var(--example-ds-stroke-default); background-color: var(--example-ds-color-background-surface); box-shadow: var(--example-ds-shadow-xs); transition: transform 120ms ease, box-shadow 120ms ease; }
}
@layer components {
.docs-docs-home-benefitCard:hover { transform: translate(-1px, -1px); box-shadow: var(--example-ds-shadow-sm); }
}
@layer components {
.docs-docs-home-benefitNumber { font-family: var(--example-ds-fontFamily-mono); font-size: var(--example-ds-fontSize-xs); font-weight: var(--example-ds-fontWeight-semibold); letter-spacing: 0.1em; color: var(--example-ds-color-accent-default); margin-bottom: var(--example-ds-space-1); }
}
@layer components {
.docs-docs-home-benefitTitle { font-size: var(--example-ds-fontSize-lg); font-weight: var(--example-ds-fontWeight-semibold); color: var(--example-ds-color-text-primary); margin: 0; line-height: 1.3; }
}
@layer components {
.docs-docs-home-benefitText { font-size: var(--example-ds-fontSize-md); color: var(--example-ds-color-text-secondary); line-height: 1.55; margin: 0; }
}
@layer components {
.docs-docs-home-benefitText code { font-family: var(--example-ds-fontFamily-mono); font-size: 0.9em; padding: 0 var(--example-ds-space-1); background-color: var(--example-ds-color-background-subtle); }
}
@layer components {
.docs-docs-home-split { display: grid; gap: var(--example-ds-space-8); align-items: center; }
}
@layer components {
@media (min-width: 769px) { .docs-docs-home-split { grid-template-columns: 1fr 1fr; gap: var(--example-ds-space-12); } }
}
@layer components {
@media (min-width: 769px) { .docs-docs-home-splitProseFirst { order: 1; } }
}
@layer components {
@media (min-width: 769px) { .docs-docs-home-splitMediaSecond { order: 2; } }
}
@layer components {
@media (min-width: 769px) { .docs-docs-home-splitProseSecond { order: 2; } }
}
@layer components {
@media (min-width: 769px) { .docs-docs-home-splitMediaFirst { order: 1; } }
}
@layer components {
.docs-docs-home-proseList { margin: 0; padding-left: var(--example-ds-space-5); color: var(--example-ds-color-text-secondary); font-size: var(--example-ds-fontSize-md); line-height: 1.65; display: flex; flex-direction: column; gap: var(--example-ds-space-3); }
}
@layer components {
.docs-docs-home-integrations { display: flex; flex-wrap: wrap; gap: var(--example-ds-space-3); align-items: center; justify-content: center; padding-top: var(--example-ds-space-4); }
}
@layer components {
.docs-docs-home-integrationChip { font-size: var(--example-ds-fontSize-sm); font-weight: var(--example-ds-fontWeight-semibold); color: var(--example-ds-color-text-primary); background-color: var(--example-ds-color-background-surface); border: var(--example-ds-stroke-default); border-radius: var(--example-ds-radius-md); padding: var(--example-ds-space-2) var(--example-ds-space-4); }
}
@layer components {
.docs-docs-home-ctaBand { margin-top: var(--example-ds-space-4); padding: var(--example-ds-space-12); border: var(--example-ds-stroke-strong); background-color: var(--example-ds-color-background-surface); box-shadow: var(--example-ds-shadow-xl); text-align: center; }
}
@layer components {
@media (max-width: 768px) { .docs-docs-home-ctaBand { padding: var(--example-ds-space-8) var(--example-ds-space-5); box-shadow: var(--example-ds-shadow-lg); } }
}
@layer components {
.docs-docs-home-ctaBandTitle { font-family: var(--example-ds-fontFamily-display); font-style: italic; font-size: var(--example-ds-fontSize-2xl); font-weight: var(--example-ds-fontWeight-bold); color: var(--example-ds-color-text-primary); margin-top: 0; margin-right: 0; margin-bottom: var(--example-ds-space-3); margin-left: 0; letter-spacing: -0.02em; }
}
@layer components {
.docs-docs-home-ctaBandLead { font-size: var(--example-ds-fontSize-lg); color: var(--example-ds-color-text-secondary); margin-top: 0; margin-right: auto; margin-bottom: var(--example-ds-space-6); margin-left: auto; max-width: 32rem; line-height: var(--example-ds-lineHeight-relaxed); }
}
@layer components {
.docs-docs-home-ctaBandActions { display: flex; justify-content: center; gap: var(--example-ds-space-4); flex-wrap: wrap; }
}
@layer components {
@media (max-width: 768px) { .docs-docs-home-ctaBandActions { flex-direction: column; align-items: stretch; } }
}
@layer components {
.docs-docs-home-ghIcon { display: inline-flex; align-items: center; }
}
@layer components {
.docs-docs-live-demo-root { margin-top: var(--example-ds-space-6); margin-bottom: var(--example-ds-space-8); min-width: 0; border: 1px solid var(--example-ds-color-border-default); border-radius: var(--example-ds-radius-lg); overflow: hidden; background-color: var(--example-ds-color-surface-default); }
}
@layer components {
.docs-docs-live-demo-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--example-ds-space-3); padding: var(--example-ds-space-4) var(--example-ds-space-4) var(--example-ds-space-3); border-bottom: 1px solid var(--example-ds-color-border-default); background-color: var(--example-ds-color-surface-sunken); }
}
@layer components {
.docs-docs-live-demo-headerText { display: flex; flex-direction: column; gap: var(--example-ds-space-1); min-width: 0; flex: 1 1 12rem; }
}
@layer components {
.docs-docs-live-demo-title { margin: 0; font-size: var(--example-ds-fontSize-sm); font-weight: var(--example-ds-fontWeight-semibold); color: var(--example-ds-color-text-primary); }
}
@layer components {
.docs-docs-live-demo-caption { margin: 0; font-size: var(--example-ds-fontSize-xs); line-height: 1.45; color: var(--example-ds-color-text-secondary); max-width: 42ch; }
}
@layer components {
.docs-docs-live-demo-variantList { display: flex; flex-wrap: wrap; gap: var(--example-ds-space-2); flex-shrink: 0; }
}
@layer components {
.docs-docs-live-demo-variantButton { padding: var(--example-ds-space-1) var(--example-ds-space-3); font-size: var(--example-ds-fontSize-xs); font-weight: var(--example-ds-fontWeight-medium); border: 1px solid var(--example-ds-color-border-default); border-radius: var(--example-ds-radius-md); background-color: var(--example-ds-color-surface-default); color: var(--example-ds-color-text-secondary); cursor: pointer; transition: border-color 120ms ease, color 120ms ease, background-color 120ms ease; }
}
@layer components {
.docs-docs-live-demo-variantButton[data-active="true"] { border-color: var(--example-ds-color-accent-default); color: var(--example-ds-color-accent-default); background-color: var(--example-ds-color-accent-subtle); }
}
@layer components {
.docs-docs-live-demo-preview { display: flex; align-items: center; justify-content: center; min-height: 96px; padding: var(--example-ds-space-5) var(--example-ds-space-4); border-bottom: 1px solid var(--example-ds-color-border-default); background-color: var(--example-ds-color-surface-raised); background-image: linear-gradient(45deg, color-mix(in oklch, var(--example-ds-color-border-default) 22%, transparent) 25%, transparent 25%, transparent 75%, color-mix(in oklch, var(--example-ds-color-border-default) 22%, transparent) 75%, color-mix(in oklch, var(--example-ds-color-border-default) 22%, transparent)), linear-gradient(45deg, color-mix(in oklch, var(--example-ds-color-border-default) 22%, transparent) 25%, transparent 25%, transparent 75%, color-mix(in oklch, var(--example-ds-color-border-default) 22%, transparent) 75%, color-mix(in oklch, var(--example-ds-color-border-default) 22%, transparent)); background-position: 0 0, 8px 8px; background-size: 16px 16px; }
}
@layer components {
.docs-docs-live-demo-previewButton { font: inherit; }
}
@layer components {
.docs-docs-live-demo-previewCard { min-width: 200px; text-align: center; font-size: var(--example-ds-fontSize-sm); }
}
@layer components {
.docs-docs-live-demo-section { padding: var(--example-ds-space-4); border-bottom: 1px solid var(--example-ds-color-border-default); min-width: 0; }
}
@layer components {
.docs-docs-live-demo-section:last-child { border-bottom: none; }
}
@layer components {
.docs-docs-live-demo-sectionLabel { margin: 0 0 var(--example-ds-space-2); font-size: var(--example-ds-fontSize-xs); font-weight: var(--example-ds-fontWeight-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--example-ds-color-text-secondary); }
}
@layer components {
.docs-docs-live-demo-sectionFile { font-weight: var(--example-ds-fontWeight-medium); color: var(--example-ds-color-text-primary); text-transform: none; letter-spacing: normal; }
}
@layer components {
.docs-docs-live-demo-detailsGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; min-width: 0; border-bottom: none; }
}
@layer components {
@media (max-width: 560px) { .docs-docs-live-demo-detailsGrid { grid-template-columns: 1fr; } }
}
@layer components {
.docs-docs-live-demo-detailSection { padding: var(--example-ds-space-4); min-width: 0; }
}
@layer components {
.docs-docs-live-demo-detailSection:first-child { border-right: 1px solid var(--example-ds-color-border-default); }
}
@layer components {
@media (max-width: 560px) { .docs-docs-live-demo-detailSection:first-child { border-right: none; border-bottom: 1px solid var(--example-ds-color-border-default); } }
}
@layer components {
.docs-docs-live-demo-codeShell { margin: 0; border-radius: var(--example-ds-radius-md); background-color: var(--example-ds-codeBlock-background); overflow: auto; }
}
@layer components {
.docs-docs-live-demo-codeShell [data-codeblock-pre] { margin: 0; padding: var(--example-ds-space-3); max-height: 260px; font-size: var(--example-ds-fontSize-xs); line-height: 1.55; white-space: pre; background-color: transparent; }
}
@layer components {
.docs-docs-live-demo-codeShell [data-codeblock] code { font-family: inherit; font-size: inherit; font-weight: inherit; color: inherit; background-color: transparent; padding: 0; border-radius: 0; border: none; }
}
@layer components {
.docs-docs-live-demo-outputShell { max-height: 200px; }
}
@layer reset {
*, *::before, *::after { box-sizing: border-box; }
}
@layer reset {
*:not(dialog) { margin: 0; }
}
@layer reset {
@media (prefers-reduced-motion: no-preference) { html { interpolate-size: allow-keywords; } }
}
@layer reset {
body { line-height: 1.5; -webkit-font-smoothing: antialiased; }
}
@layer reset {
img, picture, video, canvas, svg { display: block; max-width: 100%; }
}
@layer reset {
input, button, textarea, select { font: inherit; }
}
@layer reset {
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
}
@layer reset {
p { text-wrap: pretty; }
}
@layer reset {
h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
}
@layer reset {
html body { background: var(--example-ds-color-background-app); font-family: var(--example-ds-fontFamily-sans); -moz-osx-font-smoothing: grayscale; }
}
@layer reset {
html[data-style="new-wave"] body { background-color: var(--example-ds-color-background-app); background-image: linear-gradient(135deg, transparent 0 72%, var(--example-ds-color-accent-subtle) 72% 78%, transparent 78%),
    radial-gradient(circle at 8% 12%, var(--example-ds-color-accent-default) 0 5px, transparent 6px); background-attachment: fixed; }
}
@layer reset {
html[data-style="ai-glow"] body { background-color: var(--example-ds-color-background-app); background-image: radial-gradient(circle at 12% 10%, color-mix(in oklch, #F0ABFC 34%, transparent) 0 12rem, transparent 24rem),
    radial-gradient(circle at 88% 14%, color-mix(in oklch, #67E8F9 36%, transparent) 0 11rem, transparent 25rem),
    radial-gradient(circle at 74% 76%, color-mix(in oklch, #6EE7B7 28%, transparent) 0 10rem, transparent 23rem),
    radial-gradient(circle at 22% 82%, color-mix(in oklch, #FDE68A 32%, transparent) 0 10rem, transparent 24rem),
    linear-gradient(135deg, color-mix(in oklch, var(--example-ds-color-background-app) 86%, #FFFFFF), var(--example-ds-color-background-app)); background-attachment: fixed; }
}
@layer reset {
html[data-style="windows-95"] body { background-color: var(--example-ds-color-background-app); background-image: none; }
}
@layer reset {
html[data-style="classic-system"] body { background-color: var(--example-ds-color-background-app); background-image: repeating-linear-gradient(45deg, transparent 0 2px, var(--example-ds-color-background-subtle) 2px 4px); background-attachment: fixed; }
}
@layer reset {
::selection { background-color: var(--example-ds-color-accent-subtle); color: var(--example-ds-color-text-primary); }
}
@layer reset {
html:root { scroll-behavior: smooth; }
}
.variant-button-base { display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 8px; font-weight: 500; }
.variant-button-intent-primary { background-color: #2563eb; color: white; }
.variant-button-intent-ghost { background-color: transparent; color: #1f2937; }
.variant-button-size-sm { padding: 6px 10px; font-size: 14px; }
.variant-button-size-lg { padding: 10px 16px; font-size: 16px; }
:root { --theming-light-dark-demo-theme-text: #111827; --theming-light-dark-demo-theme-textMuted: #6b7280; --theming-light-dark-demo-theme-surface: #ffffff; --theming-light-dark-demo-theme-primary: #0066ff; }
.theme-theming-light-dark-demo-dark { --theming-light-dark-demo-theme-text: #e0e0e0; --theming-light-dark-demo-theme-textMuted: #9ca3af; --theming-light-dark-demo-theme-surface: #1a1a2e; --theming-light-dark-demo-theme-primary: #66b3ff; }
.demo-card-base { padding: 16px 20px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--theme-text) 12%, transparent); background-color: var(--theme-surface); color: var(--theme-text); }