@layer reset, tokens, components;
@layer tokens, components, utilities;
@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: 2px; --example-ds-borderWidth-default: 3px; --example-ds-borderWidth-thick: 4px; }
}
@layer tokens {
:root { --example-ds-fontFamily-sans: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --example-ds-fontFamily-mono: ui-monospace, 'Cascadia Code', 'Fira Code', Menlo, 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: 2px 2px 0 0 #000; --example-ds-shadow-sm: 3px 3px 0 0 #000; --example-ds-shadow-md: 4px 4px 0 0 #000; --example-ds-shadow-lg: 6px 6px 0 0 #000; --example-ds-shadow-xl: 8px 8px 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-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 {
.docs-prose-root { font-size: var(--example-ds-fontSize-md); line-height: 1.75; color: var(--example-ds-color-text-primary); }
}
@layer utilities {
html[data-mode="dark"] .docs-prose-root { line-height: 1.82; }
}
@layer utilities {
@media (prefers-color-scheme: dark) { html:not([data-mode="light"]) .docs-prose-root { line-height: 1.82; } }
}
@layer utilities {
.docs-prose-root h1 { font-size: 28px; font-weight: var(--example-ds-fontWeight-semibold); letter-spacing: -0.02em; 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) { .docs-prose-root h1 { font-size: 24px; margin-bottom: var(--example-ds-space-2); } }
}
@layer utilities {
.docs-prose-root h2 { font-size: 22px; font-weight: var(--example-ds-fontWeight-semibold); letter-spacing: -0.015em; line-height: 1.3; margin-top: var(--example-ds-space-6); margin-bottom: var(--example-ds-space-2); color: var(--example-ds-color-text-primary); }
}
@layer utilities {
@media (max-width: 768px) { .docs-prose-root h2 { font-size: 19px; margin-top: var(--example-ds-space-5); } }
}
@layer utilities {
.docs-prose-root h3 { font-size: 17px; font-weight: var(--example-ds-fontWeight-semibold); line-height: 1.35; 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) { .docs-prose-root h3 { margin-top: var(--example-ds-space-3); } }
}
@layer utilities {
.docs-prose-root h4, .docs-prose-root h5, .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) { .docs-prose-root h4, .docs-prose-root h5, .docs-prose-root h6 { margin-top: var(--example-ds-space-3); } }
}
@layer utilities {
.docs-prose-root h2, .docs-prose-root h3, .docs-prose-root h4, .docs-prose-root h5, .docs-prose-root h6 { position: relative; }
}
@layer utilities {
.docs-prose-root p { margin-bottom: var(--example-ds-space-3); }
}
@layer utilities {
@media (max-width: 768px) { .docs-prose-root p { margin-bottom: var(--example-ds-space-2); } }
}
@layer utilities {
.docs-prose-root ul, .docs-prose-root ol { margin-bottom: var(--example-ds-space-3); padding-left: var(--example-ds-space-4); }
}
@layer utilities {
@media (max-width: 768px) { .docs-prose-root ul, .docs-prose-root ol { margin-bottom: var(--example-ds-space-2); padding-left: var(--example-ds-space-3); } }
}
@layer utilities {
.docs-prose-root li { margin-bottom: var(--example-ds-space-1); }
}
@layer utilities {
.docs-prose-root a { color: var(--example-ds-color-accent-default); text-decoration: none; font-weight: var(--example-ds-fontWeight-medium); transition: var(--example-ds-transition-colorShift); }
}
@layer utilities {
.docs-prose-root a:hover { color: var(--example-ds-color-accent-hover); text-decoration: underline; text-underline-offset: 2px; }
}
@layer utilities {
.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 {
.docs-prose-root code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: var(--example-ds-fontSize-sm); background-color: var(--example-ds-color-background-subtle); padding: 2px var(--example-ds-space-2); border-radius: var(--example-ds-radius-sm); }
}
@layer utilities {
.docs-prose-root pre:not([data-codeblock-pre]) { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; 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) { .docs-prose-root pre:not([data-codeblock-pre]) { padding: var(--example-ds-space-2); margin-bottom: var(--example-ds-space-2); } }
}
@layer utilities {
.docs-prose-root pre code { background-color: transparent; padding: 0; border: none; font-size: inherit; }
}
@layer utilities {
.docs-prose-root blockquote { margin: var(--example-ds-space-4) 0; padding: var(--example-ds-space-3) var(--example-ds-space-4); border-left: 3px solid var(--example-ds-color-accent-default); border-radius: var(--example-ds-radius-md); background-color: var(--example-ds-color-background-subtle); color: var(--example-ds-color-text-secondary); font-style: normal; }
}
@layer utilities {
@media (max-width: 768px) { .docs-prose-root blockquote { margin: var(--example-ds-space-3) 0; padding: var(--example-ds-space-2) var(--example-ds-space-3); } }
}
@layer utilities {
.docs-prose-root blockquote p { margin-bottom: var(--example-ds-space-2); }
}
@layer utilities {
.docs-prose-root blockquote p:last-child { margin-bottom: 0; }
}
@layer utilities {
.docs-prose-root kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; 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 {
.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 {
.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 {
.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 {
.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 {
.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 {
.docs-prose-root hr { border: none; border-top: 1px solid var(--example-ds-color-border-default); margin: var(--example-ds-space-5) 0; }
}
@layer utilities {
@media (max-width: 768px) { .docs-prose-root hr { margin: var(--example-ds-space-4) 0; } }
}
@layer utilities {
.docs-prose-root table { width: 100%; border-collapse: collapse; margin-bottom: var(--example-ds-space-3); font-size: var(--example-ds-fontSize-sm); }
}
@layer utilities {
.docs-prose-root thead { border-bottom: 2px solid var(--example-ds-color-border-default); }
}
@layer utilities {
.docs-prose-root th, .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 {
.docs-prose-root th { font-weight: var(--example-ds-fontWeight-semibold); font-size: var(--example-ds-fontSize-sm); color: var(--example-ds-color-text-secondary); text-transform: uppercase; letter-spacing: 0.04em; }
}
@layer utilities {
.docs-prose-root tr:last-child td { border-bottom: none; }
}
@layer utilities {
.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 {
.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 {
.docs-prose-root [data-prose-heading-anchor]::before { content: "#"; font-size: 0.85em; }
}
@layer utilities {
.docs-prose-root :is(h1, h2, h3, h4, h5, h6):hover [data-prose-heading-anchor] { opacity: 1; }
}
@layer utilities {
.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 {
.docs-prose-tableWrap { overflow-x: auto; margin-bottom: var(--example-ds-space-3); -webkit-overflow-scrolling: touch; }
}
@layer utilities {
.ds-hljs-root [data-codeblock] .hljs { color: var(--example-ds-syntax-base); background: transparent; display: block; overflow-x: auto; }
}
@layer utilities {
.ds-hljs-root [data-codeblock] .hljs-keyword, .ds-hljs-root [data-codeblock] .hljs-meta .hljs-keyword, .ds-hljs-root [data-codeblock] .hljs-template-tag, .ds-hljs-root [data-codeblock] .hljs-template-variable, .ds-hljs-root [data-codeblock] .hljs-type, .ds-hljs-root [data-codeblock] .hljs-variable.language_ { color: var(--example-ds-syntax-keyword); }
}
@layer utilities {
.ds-hljs-root [data-codeblock] .hljs-title, .ds-hljs-root [data-codeblock] .hljs-title.class_, .ds-hljs-root [data-codeblock] .hljs-title.class_.inherited__, .ds-hljs-root [data-codeblock] .hljs-title.function_ { color: var(--example-ds-syntax-title); }
}
@layer utilities {
.ds-hljs-root [data-codeblock] .hljs-attr, .ds-hljs-root [data-codeblock] .hljs-attribute, .ds-hljs-root [data-codeblock] .hljs-literal, .ds-hljs-root [data-codeblock] .hljs-meta, .ds-hljs-root [data-codeblock] .hljs-number, .ds-hljs-root [data-codeblock] .hljs-operator, .ds-hljs-root [data-codeblock] .hljs-variable, .ds-hljs-root [data-codeblock] .hljs-selector-attr, .ds-hljs-root [data-codeblock] .hljs-selector-class, .ds-hljs-root [data-codeblock] .hljs-selector-id { color: var(--example-ds-syntax-attr); }
}
@layer utilities {
.ds-hljs-root [data-codeblock] .hljs-regexp, .ds-hljs-root [data-codeblock] .hljs-string, .ds-hljs-root [data-codeblock] .hljs-meta .hljs-string { color: var(--example-ds-syntax-string); }
}
@layer utilities {
.ds-hljs-root [data-codeblock] .hljs-built_in, .ds-hljs-root [data-codeblock] .hljs-symbol { color: var(--example-ds-syntax-builtIn); }
}
@layer utilities {
.ds-hljs-root [data-codeblock] .hljs-comment, .ds-hljs-root [data-codeblock] .hljs-code, .ds-hljs-root [data-codeblock] .hljs-formula { color: var(--example-ds-syntax-comment); }
}
@layer utilities {
.ds-hljs-root [data-codeblock] .hljs-name, .ds-hljs-root [data-codeblock] .hljs-quote, .ds-hljs-root [data-codeblock] .hljs-selector-tag, .ds-hljs-root [data-codeblock] .hljs-selector-pseudo { color: var(--example-ds-syntax-name); }
}
@layer utilities {
.ds-hljs-root [data-codeblock] .hljs-subst { color: var(--example-ds-syntax-base); }
}
@layer utilities {
.ds-hljs-root [data-codeblock] .hljs-section { color: var(--example-ds-syntax-section); font-weight: bold; }
}
@layer utilities {
.ds-hljs-root [data-codeblock] .hljs-bullet { color: var(--example-ds-syntax-bullet); }
}
@layer utilities {
.ds-hljs-root [data-codeblock] .hljs-emphasis { color: var(--example-ds-syntax-base); font-style: italic; }
}
@layer utilities {
.ds-hljs-root [data-codeblock] .hljs-strong { color: var(--example-ds-syntax-base); font-weight: bold; }
}
@layer utilities {
.ds-hljs-root [data-codeblock] .hljs-addition { color: var(--example-ds-syntax-addition); background-color: var(--example-ds-syntax-additionBackground); }
}
@layer utilities {
.ds-hljs-root [data-codeblock] .hljs-deletion { color: var(--example-ds-syntax-deletion); background-color: var(--example-ds-syntax-deletionBackground); }
}
@layer utilities {
.ds-layout-base { font-family: var(--example-ds-fontFamily-sans); color: var(--example-ds-color-text-primary); }
}
@layer utilities {
.ds-layout-stack { display: grid; gap: var(--example-ds-space-5); }
}
@layer utilities {
.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 {
.ds-layout-row { display: flex; flex-wrap: wrap; gap: var(--example-ds-space-3); align-items: center; }
}
@layer utilities {
.ds-text-base { margin: 0; color: var(--example-ds-color-text-primary); }
}
@layer utilities {
.ds-text-title { font-size: 28px; font-weight: var(--example-ds-fontWeight-semibold); letter-spacing: -0.02em; }
}
@layer utilities {
.ds-text-subtitle { font-size: var(--example-ds-fontSize-lg); color: var(--example-ds-color-text-secondary); }
}
@layer utilities {
.ds-text-sectionTitle { font-size: 20px; font-weight: var(--example-ds-fontWeight-semibold); }
}
@layer utilities {
.ds-text-label { font-size: var(--example-ds-fontSize-md); font-weight: var(--example-ds-fontWeight-medium); }
}
@layer utilities {
.ds-text-caption { font-size: var(--example-ds-fontSize-sm); color: var(--example-ds-color-text-secondary); }
}
@layer components {
.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 {
.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)) { .command-palette-backdrop { backdrop-filter: blur(10px); } }
}
@layer components {
.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 {
.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 {
.command-palette-inputIcon { flex-shrink: 0; display: inline-flex; align-items: center; color: var(--example-ds-color-text-placeholder); line-height: 0; }
}
@layer components {
.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 {
.command-palette-input::placeholder { color: var(--example-ds-color-text-placeholder); }
}
@layer components {
.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 {
.command-palette-result { margin: 0; }
}
@layer components {
.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 {
.command-palette-resultLink:hover { background-color: var(--example-ds-color-accent-subtle); }
}
@layer components {
.command-palette-resultLinkActive { background-color: var(--example-ds-color-accent-subtle); }
}
@layer components {
.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 {
.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 {
.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 {
.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 {
.command-palette-root-open-true { pointer-events: auto; opacity: 1; visibility: visible; }
}
@layer components {
.command-palette-dialog-open-true { opacity: 1; }
}
@property --example-ds-button-border { syntax: "<color>"; inherits: false; initial-value: var(--example-ds-color-border-default); }
@property --example-ds-button-background { syntax: "<color>"; inherits: false; initial-value: var(--example-ds-color-background-surface); }
@property --example-ds-button-foreground { syntax: "<color>"; inherits: false; initial-value: var(--example-ds-color-text-primary); }
@layer components {
.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 {
.button-base:hover { border-color: var(--example-ds-color-border-strong); background-color: var(--example-ds-color-background-subtle); }
}
@layer components {
.button-base:active { transform: translateY(1px); }
}
@layer components {
.button-base:focus-visible { outline: 2px solid var(--example-ds-color-border-focus); outline-offset: 2px; }
}
@layer components {
.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 {
.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 {
.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 {
.button-intent-secondary:hover { border-color: var(--example-ds-color-border-strong); background-color: var(--example-ds-color-background-subtle); }
}
@layer components {
.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 {
.button-intent-ghost:hover { background-color: var(--example-ds-color-background-subtle); }
}
@layer components {
.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 {
.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 {
.code-block-rootDiff { border-color: var(--example-ds-color-border-strong); }
}
@layer components {
.code-block-rootTerminal { background-color: var(--example-ds-color-text-primary); border-color: var(--example-ds-color-text-primary); }
}
@layer components {
.code-block-header { display: flex; align-items: center; justify-content: space-between; gap: var(--example-ds-space-2); padding: var(--example-ds-space-2) var(--example-ds-space-4); border-bottom: var(--example-ds-borderWidth-default) solid var(--example-ds-color-border-default); background-color: var(--example-ds-codeBlock-backgroundHeader); }
}
@layer components {
.code-block-headerTerminal { border-bottom-color: var(--example-ds-color-border-strong); background-color: var(--example-ds-codeBlock-backgroundHeader); }
}
@layer components {
.code-block-title { display: flex; align-items: center; gap: var(--example-ds-space-2); min-width: 0; }
}
@layer components {
.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 {
.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 {
.code-block-languageTerminal { color: var(--example-ds-color-text-onAccent); border-color: rgb(255 255 255 / 0.2); }
}
@layer components {
.code-block-actions { display: inline-flex; align-items: center; gap: var(--example-ds-space-1); flex-shrink: 0; }
}
@layer components {
.code-block-copyButton { appearance: none; border: var(--example-ds-borderWidth-default) solid var(--example-ds-color-border-default); background-color: var(--example-ds-codeBlock-background); color: var(--example-ds-color-text-primary); border-radius: var(--example-ds-radius-md); padding: 6px 10px; font-size: var(--example-ds-fontSize-sm); font-weight: var(--example-ds-fontWeight-bold); cursor: pointer; box-shadow: var(--example-ds-shadow-xs); transition: var(--example-ds-transition-controlSurface); }
}
@layer components {
.code-block-copyButton:hover { background-color: var(--example-ds-color-background-subtle); }
}
@layer components {
.code-block-copyButton:active { transform: translate(2px, 2px); box-shadow: none; }
}
@layer components {
.code-block-copyButton:focus-visible { outline: var(--example-ds-borderWidth-thin) solid var(--example-ds-color-border-focus); outline-offset: 2px; }
}
@layer components {
.code-block-copyButton[data-copied] { border-color: var(--example-ds-color-success-default); color: var(--example-ds-color-success-default); }
}
@layer components {
.code-block-copyButton[data-error] { border-color: var(--example-ds-color-danger-default); color: var(--example-ds-color-danger-default); }
}
@layer components {
.code-block-copyButtonCopied { border-color: var(--example-ds-color-success-default); color: var(--example-ds-color-success-default); }
}
@layer components {
.code-block-copyButtonError { border-color: var(--example-ds-color-danger-default); color: var(--example-ds-color-danger-default); }
}
@layer components {
.code-block-feedback { font-size: var(--example-ds-fontSize-sm); color: var(--example-ds-color-text-secondary); min-height: 1lh; }
}
@layer components {
.code-block-feedbackInline { display: inline-flex; align-items: center; margin-inline-start: var(--example-ds-space-1); }
}
@layer components {
.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 {
.code-block-feedbackSuccess { color: var(--example-ds-color-success-default); }
}
@layer components {
.code-block-feedbackError { color: var(--example-ds-color-danger-default); }
}
@layer components {
.code-block-body { padding: 0; background-color: var(--example-ds-codeBlock-background); }
}
@layer components {
.code-block-bodyTerminal { color: var(--example-ds-color-text-onAccent); }
}
@layer components {
.code-block-bodyScrollable { overflow-x: auto; }
}
@layer components {
.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 {
.code-block-preTerminal { color: var(--example-ds-color-text-onAccent); }
}
@layer components {
.code-block-preWrap { white-space: pre-wrap; word-break: break-word; overflow-x: visible; }
}
@layer components {
.code-block-preScrollX { white-space: pre; overflow-x: auto; }
}
@layer components {
.code-block-code { display: block; }
}
@layer components {
.code-block-lines { display: grid; gap: 2px; }
}
@layer components {
.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 {
.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 {
.code-block-lineContent { min-width: 0; }
}
@layer components {
.code-block-lineHighlighted { background-color: var(--example-ds-codeBlock-backgroundLineHighlight); }
}
@layer components {
.code-block-lineAdded { background-color: rgb(16 185 129 / 0.12); }
}
@layer components {
.code-block-lineDeleted { background-color: rgb(248 113 113 / 0.12); }
}
@property --example-ds-alert-semantic { syntax: "<color>"; inherits: true; initial-value: var(--example-ds-color-accent-default); }
@property --example-ds-alert-solidbg { syntax: "<color>"; inherits: false; initial-value: var(--example-ds-color-accent-default); }
@property --example-ds-alert-solidfg { syntax: "<color>"; inherits: false; initial-value: var(--example-ds-color-text-onAccent); }
@layer components {
.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 {
.alert-icon { flex-shrink: 0; display: inline-flex; margin-top: 2px; font-size: var(--example-ds-fontSize-lg); line-height: 1; }
}
@layer components {
.alert-body { flex: 1; min-width: 0; }
}
@layer components {
.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 {
.alert-content { font-size: var(--example-ds-fontSize-md); margin: 0; color: inherit; }
}
@layer components {
.alert-action { margin-top: var(--example-ds-space-2); }
}
@layer components {
.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 {
.alert-actionLink:hover { text-decoration: none; }
}
@layer components {
.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 {
.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 {
.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 {
.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 {
.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 {
.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 {
.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 {
.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 {
.alert-title-appearance-solid { color: inherit; }
}
@layer components {
.alert-content-contentGap-spaced { margin-top: var(--example-ds-space-1); }
}
@layer components {
.alert-content-contentGap-flush { margin-top: 0; }
}
@property --example-ds-badge-bordercolor { syntax: "<color>"; inherits: false; initial-value: var(--example-ds-color-border-default); }
@property --example-ds-badge-backgroundcolor { syntax: "<color>"; inherits: false; initial-value: var(--example-ds-color-background-subtle); }
@property --example-ds-badge-textcolor { syntax: "<color>"; inherits: false; initial-value: var(--example-ds-color-text-secondary); }
@layer components {
.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 {
.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 {
.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 {
.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 {
.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 {
.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 {
.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 {
.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 {
.card-body { margin: 0; font-size: var(--example-ds-fontSize-md); color: var(--example-ds-color-text-secondary); line-height: 1.55; }
}
@layer components {
.card-grid { display: grid; gap: var(--example-ds-space-4); grid-template-columns: 1fr; }
}
@layer components {
@media (min-width: 640px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
}
@layer components {
.card-linkRoot { text-decoration: none; color: inherit; cursor: pointer; }
}
@layer components {
.card-linkRoot:hover { border-color: var(--example-ds-color-border-strong); box-shadow: var(--example-ds-shadow-xs); }
}
@layer components {
.card-linkRoot:focus-visible { outline: 2px solid var(--example-ds-color-border-focus); outline-offset: 2px; }
}
@layer components {
.card-linkTitle { color: var(--example-ds-color-accent-default); text-decoration: none; }
}
@layer components {
.card-linkTitle:hover { text-decoration: underline; }
}
@layer components {
.card-linkDescription { margin: 0; font-size: var(--example-ds-fontSize-md); color: var(--example-ds-color-text-secondary); line-height: 1.55; }
}
@layer components {
.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 {
.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 {
.ds-named-cq-body { display: flex; flex-direction: column; gap: 12px; }
}
@layer components {
@container example-ds-product-shell (min-width: 480px) { .ds-named-cq-body { flex-direction: row; align-items: flex-start; gap: 20px; } }
}
@layer utilities {
.steps-root { list-style: none; padding: 0; margin: var(--example-ds-space-4) 0; counter-reset: docs-step; }
}
@layer utilities {
.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 {
.steps-root > li:last-child { margin-bottom: 0; }
}
@layer utilities {
.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 {
.steps-root > li :first-child { margin-top: 0; }
}
@layer utilities {
.steps-root > li :last-child { margin-bottom: 0; }
}
@layer components {
.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 {
.fileTree-list { list-style: none; padding: 0; margin: 0; }
}
@layer components {
.fileTree-item { list-style: none; margin: 0; padding: 0; }
}
@layer components {
.fileTree-listNested { list-style: none; padding: 0; margin: 0; margin-top: var(--example-ds-space-1); padding-left: var(--example-ds-space-4); border-left: 1px solid var(--example-ds-color-border-default); }
}
@layer components {
.fileTree-row { display: block; padding: var(--example-ds-space-1) 0; color: var(--example-ds-color-text-primary); }
}
@layer components {
.fileTree-folder { font-weight: var(--example-ds-fontWeight-semibold); color: var(--example-ds-color-text-primary); }
}
@layer components {
.fileTree-file { color: var(--example-ds-color-text-secondary); }
}
@layer components {
.checkbox-root { display: inline-flex; align-items: center; gap: var(--example-ds-space-2); cursor: pointer; }
}
@layer components {
.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 {
.checkbox-box[data-selected] { background-color: var(--example-ds-color-accent-default); border-color: var(--example-ds-color-accent-default); }
}
@layer components {
.checkbox-label { font-size: var(--example-ds-fontSize-md); }
}
@layer components {
.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 {
.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 {
.dialog-content { display: grid; gap: var(--example-ds-space-3); }
}
@layer components {
.dialog-heading { font-size: 18px; font-weight: var(--example-ds-fontWeight-semibold); margin: 0; }
}
@layer components {
.dialog-description { margin: 0; font-size: var(--example-ds-fontSize-sm); color: var(--example-ds-color-text-secondary); }
}
@layer components {
.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 {
.link:hover { text-decoration: underline; }
}
@layer components {
.link:focus-visible { outline: 2px solid var(--example-ds-color-border-focus); outline-offset: 2px; border-radius: var(--example-ds-radius-sm); }
}
@layer components {
.radio-group { display: grid; gap: var(--example-ds-space-1); }
}
@layer components {
.radio-item { display: inline-flex; align-items: center; gap: var(--example-ds-space-2); cursor: pointer; }
}
@layer components {
.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 {
.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 {
.radio-control[data-selected]::before { background-color: var(--example-ds-color-accent-default); }
}
@layer components {
.radio-label { font-size: var(--example-ds-fontSize-md); }
}
@layer components {
.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 {
.select-root { display: grid; gap: var(--example-ds-space-1); min-width: 240px; }
}
@layer components {
.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 {
.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 {
.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 {
.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 {
.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 {
.select-item[data-focused] { background-color: var(--example-ds-color-background-subtle); }
}
@layer components {
.select-item[data-selected] { color: var(--example-ds-color-accent-default); font-weight: var(--example-ds-fontWeight-semibold); }
}
@layer components {
.switch-root { display: inline-flex; align-items: center; gap: var(--example-ds-space-2); cursor: pointer; }
}
@layer components {
.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 {
.switch-track[data-selected] { background-color: var(--example-ds-color-accent-default); }
}
@layer components {
.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 {
.switch-thumb[data-selected] { transform: translateX(16px); }
}
@layer components {
.switch-label { font-size: var(--example-ds-fontSize-md); }
}
@layer components {
.tabs-root { display: grid; gap: var(--example-ds-space-3); }
}
@layer components {
.tabs-list { display: inline-flex; gap: var(--example-ds-space-1); border-bottom: 1px solid var(--example-ds-color-border-default); }
}
@layer components {
.tabs-tab { border: none; border-bottom: 2px 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 {
.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 {
.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 {
.text-area-field-root { display: grid; gap: var(--example-ds-space-1); }
}
@layer components {
.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 {
.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 {
.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 {
.text-area-field-input::placeholder { color: var(--example-ds-color-text-secondary); }
}
@layer components {
.text-area-field-description { font-size: var(--example-ds-fontSize-sm); color: var(--example-ds-color-text-secondary); }
}
@layer components {
.text-area-field-error { font-size: var(--example-ds-fontSize-sm); color: var(--example-ds-color-danger-default); }
}
@layer components {
.text-field-root { display: grid; gap: var(--example-ds-space-1); min-width: 240px; }
}
@layer components {
.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 {
.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 {
.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 {
.text-field-input::placeholder { color: var(--example-ds-color-text-secondary); }
}
@layer components {
.text-field-description { font-size: var(--example-ds-fontSize-sm); color: var(--example-ds-color-text-secondary); }
}
@layer components {
.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: var(--example-ds-palette-neutral-1); --example-ds-color-background-surface: var(--example-ds-palette-neutral-1); --example-ds-color-background-subtle: var(--example-ds-palette-slate-2); --example-ds-color-background-elevated: var(--example-ds-palette-neutral-1); --example-ds-color-text-primary: var(--example-ds-palette-slate-10); --example-ds-color-text-secondary: var(--example-ds-palette-slate-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-blue-6); --example-ds-color-accent-hover: var(--example-ds-palette-blue-7); --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-slate-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: 2px 2px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-sm: 3px 3px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-md: 4px 4px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-lg: 6px 6px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-xl: 8px 8px 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(12% 0.028 260); --example-ds-color-background-surface: var(--example-ds-palette-slate-9); --example-ds-color-background-subtle: var(--example-ds-palette-slate-8); --example-ds-color-background-elevated: var(--example-ds-palette-slate-9); --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: #000; --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 260); --example-ds-color-border-strong: oklch(54% 0.026 260); --example-ds-color-border-focus: var(--example-ds-palette-blue-4); --example-ds-color-shadow-offset: oklch(6.5% 0.035 260); --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: 2px 2px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-sm: 3px 3px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-md: 4px 4px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-lg: 6px 6px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-xl: 8px 8px 0 0 var(--example-ds-color-shadow-offset); } }
}
@layer tokens {
.theme-example-ds-default[data-mode="dark"] { --example-ds-color-background-app: oklch(12% 0.028 260); --example-ds-color-background-surface: var(--example-ds-palette-slate-9); --example-ds-color-background-subtle: var(--example-ds-palette-slate-8); --example-ds-color-background-elevated: var(--example-ds-palette-slate-9); --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: #000; --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 260); --example-ds-color-border-strong: oklch(54% 0.026 260); --example-ds-color-border-focus: var(--example-ds-palette-blue-4); --example-ds-color-shadow-offset: oklch(6.5% 0.035 260); --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: 2px 2px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-sm: 3px 3px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-md: 4px 4px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-lg: 6px 6px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-xl: 8px 8px 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: var(--example-ds-palette-neutral-1); --example-ds-color-background-surface: var(--example-ds-palette-neutral-1); --example-ds-color-background-subtle: var(--example-ds-palette-slate-2); --example-ds-color-background-elevated: var(--example-ds-palette-neutral-1); --example-ds-color-text-primary: var(--example-ds-palette-slate-10); --example-ds-color-text-secondary: var(--example-ds-palette-slate-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-blue-6); --example-ds-color-accent-hover: var(--example-ds-palette-blue-7); --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-slate-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: 2px 2px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-sm: 3px 3px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-md: 4px 4px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-lg: 6px 6px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-xl: 8px 8px 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: 2px 2px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-sm: 3px 3px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-md: 4px 4px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-lg: 6px 6px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-xl: 8px 8px 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(12% 0.03 165); --example-ds-color-background-surface: var(--example-ds-palette-sage-9); --example-ds-color-background-subtle: var(--example-ds-palette-sage-8); --example-ds-color-background-elevated: var(--example-ds-palette-sage-9); --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: 2px 2px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-sm: 3px 3px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-md: 4px 4px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-lg: 6px 6px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-xl: 8px 8px 0 0 var(--example-ds-color-shadow-offset); } }
}
@layer tokens {
.theme-example-ds-forest[data-mode="dark"] { --example-ds-color-background-app: oklch(12% 0.03 165); --example-ds-color-background-surface: var(--example-ds-palette-sage-9); --example-ds-color-background-subtle: var(--example-ds-palette-sage-8); --example-ds-color-background-elevated: var(--example-ds-palette-sage-9); --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: 2px 2px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-sm: 3px 3px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-md: 4px 4px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-lg: 6px 6px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-xl: 8px 8px 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: 2px 2px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-sm: 3px 3px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-md: 4px 4px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-lg: 6px 6px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-xl: 8px 8px 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: 2px 2px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-sm: 3px 3px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-md: 4px 4px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-lg: 6px 6px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-xl: 8px 8px 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(12% 0.03 355); --example-ds-color-background-surface: var(--example-ds-palette-rose-9); --example-ds-color-background-subtle: var(--example-ds-palette-rose-8); --example-ds-color-background-elevated: var(--example-ds-palette-rose-9); --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: 2px 2px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-sm: 3px 3px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-md: 4px 4px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-lg: 6px 6px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-xl: 8px 8px 0 0 var(--example-ds-color-shadow-offset); } }
}
@layer tokens {
.theme-example-ds-rose[data-mode="dark"] { --example-ds-color-background-app: oklch(12% 0.03 355); --example-ds-color-background-surface: var(--example-ds-palette-rose-9); --example-ds-color-background-subtle: var(--example-ds-palette-rose-8); --example-ds-color-background-elevated: var(--example-ds-palette-rose-9); --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: 2px 2px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-sm: 3px 3px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-md: 4px 4px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-lg: 6px 6px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-xl: 8px 8px 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: 2px 2px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-sm: 3px 3px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-md: 4px 4px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-lg: 6px 6px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-xl: 8px 8px 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: 2px 2px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-sm: 3px 3px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-md: 4px 4px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-lg: 6px 6px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-xl: 8px 8px 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(12% 0.02 65); --example-ds-color-background-surface: var(--example-ds-palette-sand-9); --example-ds-color-background-subtle: var(--example-ds-palette-sand-8); --example-ds-color-background-elevated: var(--example-ds-palette-sand-9); --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: 2px 2px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-sm: 3px 3px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-md: 4px 4px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-lg: 6px 6px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-xl: 8px 8px 0 0 var(--example-ds-color-shadow-offset); } }
}
@layer tokens {
.theme-example-ds-amber[data-mode="dark"] { --example-ds-color-background-app: oklch(12% 0.02 65); --example-ds-color-background-surface: var(--example-ds-palette-sand-9); --example-ds-color-background-subtle: var(--example-ds-palette-sand-8); --example-ds-color-background-elevated: var(--example-ds-palette-sand-9); --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: 2px 2px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-sm: 3px 3px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-md: 4px 4px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-lg: 6px 6px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-xl: 8px 8px 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: 2px 2px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-sm: 3px 3px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-md: 4px 4px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-lg: 6px 6px 0 0 var(--example-ds-color-shadow-offset); --example-ds-shadow-xl: 8px 8px 0 0 var(--example-ds-color-shadow-offset); } }
}
@layer components {
.docs-layout-root { display: flex; min-height: 100vh; color: var(--example-ds-color-text-primary); background-color: var(--example-ds-color-background-app); }
}
@layer components {
@media (min-width: 769px) { .docs-layout-root { padding-top: calc(var(--example-ds-space-8) + var(--example-ds-space-2)); } }
}
@layer components {
.docs-layout-content { flex: 1; min-width: 0; }
}
@layer components {
@media (max-width: 768px) { .docs-layout-content { padding-top: calc(var(--example-ds-space-8) + var(--example-ds-space-2)); } }
}
@layer components {
.docs-layout-main { max-width: 768px; padding: var(--example-ds-space-8); }
}
@layer components {
@media (max-width: 768px) { .docs-layout-main { padding: var(--example-ds-space-5) var(--example-ds-space-4); } }
}
@layer components {
.docs-layout-docPageWrap { max-width: 1100px; margin: 0 auto; width: 100%; }
}
@layer components {
.docs-layout-docPageWrapWithToc { display: grid; grid-template-columns: 1fr; grid-template-areas: "toc" "main"; }
}
@layer components {
@media (min-width: 1024px) { .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-layout-mainColumn { grid-area: main; min-width: 0; }
}
@layer components {
.docs-layout-tocAside { grid-area: toc; min-width: 0; }
}
@layer components {
@media (min-width: 1024px) { .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-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 {
@media (min-width: 769px) { .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-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-sidebar-rootOpen { transform: translateX(0); visibility: visible; } }
}
@layer components {
.docs-sidebar-backdrop { display: none; }
}
@layer components {
@media (max-width: 768px) { .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-sidebar-backdropVisible { opacity: 1; visibility: visible; } }
}
@layer components {
.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-sidebar-header { display: none; } }
}
@layer components {
.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-sidebar-logo:hover { color: var(--example-ds-color-accent-default); }
}
@layer components {
.docs-sidebar-logoAccent { color: var(--example-ds-color-accent-default); }
}
@layer components {
.docs-sidebar-search { margin: 0 var(--example-ds-space-4) var(--example-ds-space-4); 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-subtle); color: var(--example-ds-color-text-secondary); outline: none; }
}
@layer components {
.docs-sidebar-search:focus { border-color: var(--example-ds-color-accent-default); }
}
@layer components {
.docs-sidebar-search::placeholder { color: var(--example-ds-color-text-placeholder); }
}
@layer components {
.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-sidebar-searchWrapper { display: none; } }
}
@layer components {
.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-sidebar-searchInput { width: 100%; 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); border: none; background-color: transparent; color: var(--example-ds-color-text-secondary); outline: none; }
}
@layer components {
.docs-sidebar-searchInput:focus { background-color: var(--example-ds-color-background-subtle); }
}
@layer components {
.docs-sidebar-searchInput::placeholder { color: var(--example-ds-color-text-placeholder); }
}
@layer components {
.docs-sidebar-searchKbd { position: absolute; right: 0; top: 0; height: 100%; aspect-ratio: 1px; 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-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-sidebar-searchTrigger:hover { background-color: var(--example-ds-color-background-subtle); color: var(--example-ds-color-text-primary); }
}
@layer components {
.docs-sidebar-searchTrigger:focus-visible { outline: var(--example-ds-borderWidth-thin) solid var(--example-ds-color-accent-default); outline-offset: -2px; }
}
@layer components {
.docs-sidebar-nav { flex: 1; overflow-y: auto; }
}
@layer components {
.docs-sidebar-section { margin-bottom: var(--example-ds-space-2); }
}
@layer components {
.docs-sidebar-sectionTitle { font-size: var(--example-ds-fontSize-xs); font-weight: var(--example-ds-fontWeight-bold); text-transform: uppercase; letter-spacing: 0.08em; color: var(--example-ds-color-text-placeholder); padding: var(--example-ds-space-2) var(--example-ds-space-5); margin-top: var(--example-ds-space-2); }
}
@layer components {
.docs-sidebar-link { display: block; box-sizing: border-box; width: calc(100% + var(--example-ds-borderWidth-thick)); margin-right: calc(-2 * var(--example-ds-borderWidth-thick)); font-size: var(--example-ds-fontSize-md); color: var(--example-ds-color-text-secondary); text-decoration: none; padding: 6px var(--example-ds-space-5); border-right: var(--example-ds-borderWidth-default) solid transparent; z-index: 2; }
}
@layer components {
.docs-sidebar-link:hover { color: var(--example-ds-color-accent-default); background-color: var(--example-ds-color-accent-subtle); }
}
@layer components {
.docs-sidebar-linkActive { position: relative; z-index: 1; color: var(--example-ds-color-text-primary); background-color: var(--example-ds-color-background-subtle); border-right-width: var(--example-ds-borderWidth-thick); border-right-style: solid; border-right-color: var(--example-ds-color-accent-default); padding-right: calc(var(--example-ds-space-5) + var(--example-ds-borderWidth-default) - var(--example-ds-borderWidth-thick)); }
}
@layer components {
.docs-sidebar-linkActive:hover { color: var(--example-ds-color-accent-default); background-color: var(--example-ds-color-accent-subtle); }
}
@layer components {
.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-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-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-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-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-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-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-sidebar-themeSelect option:hover { background-color: var(--example-ds-color-background-subtle); } }
}
@layer components {
@supports (appearance: base-select) { .docs-sidebar-themeSelect option:focus { background-color: var(--example-ds-color-background-subtle); outline: none; } }
}
@layer components {
@supports (appearance: base-select) { .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-sidebar-themeSelect:open::picker-icon { transform: rotate(180deg); } }
}
@layer components {
.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-sidebar-themeToggle:hover { background-color: var(--example-ds-color-background-subtle); }
}
@layer components {
.docs-mobile-bar-root { display: none; }
}
@layer components {
@media (max-width: 768px) { .docs-mobile-bar-root { display: flex; align-items: center; justify-content: space-between; position: fixed; top: 0; left: 0; right: 0; height: calc(var(--example-ds-space-8) + var(--example-ds-space-2)); z-index: 300; padding: 0 var(--example-ds-space-4); background-color: var(--example-ds-color-background-app); border-bottom: var(--example-ds-borderWidth-thick) solid var(--example-ds-color-border-strong); } }
}
@layer components {
.docs-mobile-bar-menuBtn { 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; 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); flex-shrink: 0; }
}
@layer components {
.docs-mobile-bar-menuBtn:hover { background-color: var(--example-ds-color-background-subtle); }
}
@layer components {
.docs-mobile-bar-menuBtn:active { box-shadow: none; transform: translate(2px, 2px); }
}
@layer components {
.docs-mobile-bar-iconLink { display: flex; align-items: center; justify-content: center; min-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 var(--example-ds-space-2); font-size: var(--example-ds-fontSize-xs); font-weight: var(--example-ds-fontWeight-bold); font-family: var(--example-ds-fontFamily-sans); letter-spacing: 0.04em; 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); text-decoration: none; box-shadow: var(--example-ds-shadow-xs); flex-shrink: 0; }
}
@layer components {
.docs-mobile-bar-iconLink:hover { background-color: var(--example-ds-color-background-subtle); }
}
@layer components {
.docs-mobile-bar-iconLink:active { box-shadow: none; transform: translate(2px, 2px); }
}
@layer components {
.docs-mobile-bar-logoWrap { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; padding-inline: var(--example-ds-space-2); }
}
@layer components {
.docs-mobile-bar-logo { font-size: var(--example-ds-fontSize-lg); 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-mobile-bar-logoAccent { color: var(--example-ds-color-accent-default); }
}
@layer components {
.docs-mobile-bar-actions { display: flex; align-items: center; gap: var(--example-ds-space-2); flex-shrink: 0; }
}
@layer components {
.docs-site-header-root { display: none; }
}
@layer components {
@media (min-width: 769px) { .docs-site-header-root { display: block; position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 250; background-color: var(--example-ds-color-background-app); border-bottom: var(--example-ds-borderWidth-thick) solid var(--example-ds-color-border-strong); } }
}
@layer components {
.docs-site-header-inner { display: flex; align-items: stretch; justify-content: space-between; gap: var(--example-ds-space-6); 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: 0 var(--example-ds-space-6); box-sizing: border-box; }
}
@layer components {
.docs-site-header-left { display: flex; align-items: stretch; gap: var(--example-ds-space-8); min-width: 0; }
}
@layer components {
.docs-site-header-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; flex-shrink: 0; align-self: center; }
}
@layer components {
.docs-site-header-logo:hover { color: var(--example-ds-color-accent-default); }
}
@layer components {
.docs-site-header-logoAccent { color: var(--example-ds-color-accent-default); }
}
@layer components {
.docs-site-header-nav { display: flex; align-items: stretch; gap: 0; align-self: stretch; height: 100%; }
}
@layer components {
.docs-site-header-navLink { display: flex; align-items: center; box-sizing: border-box; height: 100%; margin: 0; font-size: var(--example-ds-fontSize-md); font-family: var(--example-ds-fontFamily-sans); line-height: 1.35; color: var(--example-ds-color-text-secondary); text-decoration: none; padding: 0 var(--example-ds-space-5); border: none; background-color: transparent; cursor: pointer; z-index: 2; }
}
@layer components {
.docs-site-header-navLink:hover { color: var(--example-ds-color-text-primary); background-color: var(--example-ds-color-background-subtle); }
}
@layer components {
.docs-site-header-navLink[aria-current="page"] { position: relative; z-index: 3; color: var(--example-ds-color-accent-default); font-weight: var(--example-ds-fontWeight-medium); background-color: var(--example-ds-color-accent-subtle); }
}
@layer components {
.docs-site-header-navLink[aria-current="page"]:hover { color: var(--example-ds-color-accent-default); background-color: var(--example-ds-color-accent-subtle); }
}
@layer components {
.docs-site-header-navLink[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--example-ds-borderWidth-thick); background-color: var(--example-ds-color-accent-default); transform: translateY(100%); pointer-events: none; }
}
@layer components {
.docs-site-header-right { display: flex; align-items: center; gap: var(--example-ds-space-3); flex-shrink: 0; align-self: center; }
}
@layer components {
.docs-site-header-searchWrapper { position: relative; width: min(280px, 36vw); min-width: 180px; border: var(--example-ds-borderWidth-default) solid var(--example-ds-color-border-default); background-color: var(--example-ds-color-background-surface); box-shadow: var(--example-ds-shadow-xs); }
}
@layer components {
.docs-site-header-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-site-header-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-site-header-searchTrigger:hover { background-color: var(--example-ds-color-background-subtle); color: var(--example-ds-color-text-primary); }
}
@layer components {
.docs-site-header-searchTrigger:focus-visible { outline: var(--example-ds-borderWidth-thin) solid var(--example-ds-color-accent-default); outline-offset: -2px; }
}
@layer components {
.docs-site-header-searchKbd { position: absolute; right: 0; top: 0; height: 100%; aspect-ratio: 1px; 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-site-header-githubIcon { display: block; flex-shrink: 0; }
}
@layer components {
.docs-site-header-githubLink { display: inline-flex; align-items: center; justify-content: center; gap: var(--example-ds-space-2); padding: var(--example-ds-space-2) var(--example-ds-space-4); 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: var(--example-ds-color-background-surface); border: var(--example-ds-borderWidth-default) solid var(--example-ds-color-border-strong); box-shadow: var(--example-ds-shadow-sm); }
}
@layer components {
.docs-site-header-githubLink:hover { background-color: var(--example-ds-color-accent-default); color: var(--example-ds-color-text-onAccent); }
}
@layer components {
.docs-site-header-githubLink:active { box-shadow: none; transform: translate(2px, 2px); }
}
@layer components {
.docs-doc-root { flex: 1; min-width: 0; }
}
@layer components {
.docs-doc-eyebrowRow { margin-bottom: var(--example-ds-space-2); }
}
@layer components {
.docs-doc-title { font-size: var(--example-ds-space-6); font-weight: var(--example-ds-fontWeight-bold); margin-bottom: var(--example-ds-space-2); color: var(--example-ds-color-text-primary); letter-spacing: -0.025em; line-height: var(--example-ds-lineHeight-tight); }
}
@layer components {
.docs-doc-description { font-size: var(--example-ds-fontSize-lg); color: var(--example-ds-color-text-secondary); margin-bottom: var(--example-ds-space-6); line-height: var(--example-ds-lineHeight-relaxed); }
}
@layer components {
.docs-doc-content a:not([data-prose-heading-anchor]):not([data-alert-action]) { color: var(--example-ds-color-accent-default); text-decoration: none; transition: color 0.12s ease; }
}
@layer components {
.docs-doc-content a:not([data-prose-heading-anchor]):not([data-alert-action]):hover { color: var(--example-ds-color-accent-hover); text-decoration: underline; }
}
@layer components {
.docs-doc-content a[data-prose-heading-anchor] { color: var(--example-ds-color-text-secondary); font-weight: var(--example-ds-fontWeight-medium); }
}
@layer components {
.docs-doc-content a[data-prose-heading-anchor]:hover { color: var(--example-ds-color-accent-default); }
}
@layer components {
.docs-doc-content a[data-alert-action] { color: inherit; font-weight: inherit; text-decoration: underline; }
}
@layer components {
.docs-doc-content a[data-alert-action]:hover { color: inherit; text-decoration: none; }
}
@layer components {
.docs-doc-content [data-codeblock] code { font-family: inherit; font-size: inherit; background-color: transparent; padding: 0; border-radius: 0; border: none; }
}
@layer components {
.docs-doc-content code { font-family: var(--example-ds-fontFamily-mono); font-size: var(--example-ds-fontSize-sm); background-color: var(--example-ds-color-background-subtle); padding: 2px var(--example-ds-space-1); border-radius: var(--example-ds-radius-sm); }
}
@layer components {
.docs-doc-content 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-4); border-radius: var(--example-ds-radius-md); border: 1px solid var(--example-ds-color-border-default); overflow: auto; margin-bottom: var(--example-ds-space-4); }
}
@layer components {
.docs-doc-content pre code { background-color: transparent; padding: 0; border: none; }
}
@layer components {
.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-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-toc-nav { font-family: var(--example-ds-fontFamily-sans); }
}
@layer components {
.docs-toc-title { margin: 0 0 var(--example-ds-space-2); font-size: var(--example-ds-fontSize-xs); font-weight: var(--example-ds-fontWeight-bold); text-transform: uppercase; letter-spacing: 0.08em; color: var(--example-ds-color-text-placeholder); }
}
@layer components {
@media (max-width: 1023px) { .docs-toc-title { display: none; } }
}
@layer components {
.docs-toc-list { list-style: none; padding: 0; margin: 0; }
}
@layer components {
.docs-toc-item { margin: 0; margin-bottom: var(--example-ds-borderWidth-thin); }
}
@layer components {
.docs-toc-link { display: block; font-size: var(--example-ds-fontSize-sm); line-height: 1.35; color: var(--example-ds-color-text-secondary); text-decoration: none; padding: 4px var(--example-ds-space-2); padding-left: calc(var(--example-ds-space-2) + var(--docs-toc-depth, 0px)); border-left: var(--example-ds-borderWidth-default) solid transparent; }
}
@layer components {
.docs-toc-link:hover { color: var(--example-ds-color-accent-default); background-color: var(--example-ds-color-accent-subtle); }
}
@layer components {
.docs-toc-link[aria-current="location"] { position: relative; z-index: 1; color: var(--example-ds-color-text-primary); background-color: var(--example-ds-color-background-subtle); border-left-style: solid; border-left-color: var(--example-ds-color-accent-default); border-left-width: var(--example-ds-borderWidth-thick); }
}
@layer components {
@media (max-width: 1023px) { .docs-toc-link[aria-current="location"] { margin-left: calc(-1 * (var(--example-ds-space-4) + var(--example-ds-borderWidth-default))); padding-left: calc(var(--example-ds-space-4) + var(--example-ds-space-2) - var(--example-ds-borderWidth-default) + (var(--example-ds-borderWidth-thick) - var(--example-ds-borderWidth-default)) * 2 + var(--docs-toc-depth, 0px)); } }
}
@layer components {
@media (min-width: 1024px) { .docs-toc-link[aria-current="location"] { margin-left: calc(-1 * (var(--example-ds-space-4) + var(--example-ds-borderWidth-thick))); padding-left: calc(var(--example-ds-space-4) + var(--example-ds-space-2) + var(--example-ds-borderWidth-default) + var(--docs-toc-depth, 0px)); } }
}
@layer components {
.docs-toc-link[aria-current="location"]:hover { color: var(--example-ds-color-accent-default); background-color: var(--example-ds-color-accent-subtle); }
}
@layer components {
.docs-toc-root { margin-bottom: var(--example-ds-space-5); border: var(--example-ds-borderWidth-default) solid var(--example-ds-color-border-default); 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-toc-root { margin-bottom: 0; border: none; border-left: var(--example-ds-borderWidth-thick) solid var(--example-ds-color-border-strong); background-color: transparent; overflow: visible; position: static; top: auto; z-index: auto; padding-left: var(--example-ds-space-4); } }
}
@layer components {
.docs-toc-details { margin: 0; }
}
@layer components {
.docs-toc-summary { list-style: none; cursor: pointer; font-size: var(--example-ds-fontSize-sm); font-weight: var(--example-ds-fontWeight-bold); color: var(--example-ds-color-text-primary); padding: var(--example-ds-space-2) var(--example-ds-space-4); }
}
@layer components {
.docs-toc-summary::-webkit-details-marker { display: none; }
}
@layer components {
@media (min-width: 1024px) { .docs-toc-summary { display: none; } }
}
@layer components {
.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-toc-panel { padding: 0; border-top: none; } }
}
@layer components {
.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-doc-page-editLink { color: var(--example-ds-color-accent-default); text-decoration: none; font-weight: var(--example-ds-fontWeight-bold); }
}
@layer components {
.docs-doc-page-editLink:hover { text-decoration: underline; }
}
@layer components {
.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-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-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-home-hero { padding-top: var(--example-ds-space-12); padding-bottom: var(--example-ds-space-8); }
}
@layer components {
@media (max-width: 768px) { .docs-home-hero { padding-top: var(--example-ds-space-8); } }
}
@layer components {
.docs-home-title { font-size: calc(var(--example-ds-space-8) + var(--example-ds-space-2)); font-weight: var(--example-ds-fontWeight-bold); letter-spacing: -0.035em; line-height: 1.1; margin-bottom: var(--example-ds-space-4); color: var(--example-ds-color-text-primary); }
}
@layer components {
@media (max-width: 768px) { .docs-home-title { font-size: var(--example-ds-space-6); } }
}
@layer components {
.docs-home-titleAccent { background-color: var(--example-ds-color-accent-default); color: var(--example-ds-color-text-onAccent); padding: 0 var(--example-ds-space-2); display: inline; box-decoration-break: clone; }
}
@layer components {
.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: 33.75rem; margin-bottom: var(--example-ds-space-6); }
}
@layer components {
.docs-home-actions { display: flex; align-items: center; gap: var(--example-ds-space-4); margin-bottom: var(--example-ds-space-8); }
}
@layer components {
@media (max-width: 768px) { .docs-home-actions { flex-direction: column; align-items: flex-start; } }
}
@layer components {
.docs-home-cta { display: inline-flex; align-items: 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-home-cta:hover { transform: translate(2px, 2px); box-shadow: var(--example-ds-shadow-xs); }
}
@layer components {
.docs-home-cta:active { transform: translate(4px, 4px); box-shadow: none; }
}
@layer components {
.docs-home-ctaSecondary { display: inline-flex; align-items: 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-home-ctaSecondary:hover { transform: translate(2px, 2px); box-shadow: var(--example-ds-shadow-xs); }
}
@layer components {
.docs-home-ctaSecondary:active { transform: translate(4px, 4px); box-shadow: none; }
}
@layer components {
.docs-home-codeExampleWrap { max-width: 520px; }
}
@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 {
::selection { background-color: var(--example-ds-color-accent-subtle); color: var(--example-ds-color-text-primary); }
}
@layer reset {
html { scroll-behavior: smooth; }
}
@layer reset {
html::after { content: ""; position: fixed; top: 0; right: 0; bottom: 0; left: 0; border: var(--example-ds-borderWidth-thick) solid var(--example-ds-color-border-strong); z-index: 9999; pointer-events: none; }
}