基礎原理
Customizing your theme
Customize a Master CSS theme with @theme tokens, modes, breakpoints, container sizes, motion, and project-level CSS vocabulary.
Overview
Your theme is the shared design vocabulary for a Master CSS project. It defines the values your markup reaches for every day: colors, spacing, type, radius, shadows, motion, breakpoints, container sizes, mode-specific values, named conditions, and shared selector aliases.
In Master CSS, that vocabulary usually lives in the project CSS entry: @theme for tokens and modes, @settings for project settings, and @custom-variant for reusable condition and selector variants. The file still feels like CSS, while markup keeps using short semantic classes.
@import '@master/css';@theme { --color-blue: #4f46e5; --spacing-lg: 1.5rem; --radius-lg: 1rem; --breakpoint-md: 48rem; --container-md: 28rem;}@theme light { --shadow-sm: 0 0 0 1px rgb(15 23 42 / .06), 0 16px 40px rgb(15 23 42 / .12);}@theme dark { --shadow-sm: 0 0 0 1px rgb(255 255 255 / .06), 0 16px 40px rgb(0 0 0 / .36);}@custom-variant @motion-safe { @media (prefers-reduced-motion: no-preference) { @slot; } }@custom-variant :interactive { &:is(:hover, :focus-visible) { @slot; } }<section class="bg:white text:neutral p:lg r:lg shadow:sm grid-cols:2@md"> <button class="bg:blue fg:white px:md py:xs r:md bg:blue/.85:interactive">Save</button></section>The @theme, @settings, and @custom-variant directives are manifest inputs, not regular stylesheet output. Master CSS resolves them first, then generates only the variables, utilities, components, and keyframes that the application actually uses.
Project CSS entry
A project only needs a CSS entry that marks the Master CSS graph. Put theme directives in the stylesheet that imports @master/css, or in CSS already imported by that entry.
@import '@master/css';@theme { --color-brand: #4f46e5;}The important part is the graph, not a special file name. Tokens, modes, motion, named conditions, and selector shortcuts can live wherever the project CSS entry already reaches them.
Theme tokens
Theme tokens are CSS custom property declarations inside @theme blocks. Write the full token name with the leading --; Master CSS uses the name after -- for namespace resolution and emits the same custom property when generated CSS needs the token. Token name prefixes place values in the namespace that Master CSS utilities already understand.
Define tokens
@theme { --content-hash: " #"; --color-blue: #4f46e5; --color-text-action: #4f46e5; --spacing-lg: 1.5rem; --font-family-sans: Inter, ui-sans-serif, system-ui, sans-serif; --radius-lg: 1rem; --breakpoint-md: 48rem; --container-md: 28rem;}@theme light { --shadow-sm: 0 0 0 1px rgb(15 23 42 / .06), 0 16px 40px rgb(15 23 42 / .12);}@theme dark { --shadow-sm: 0 0 0 1px rgb(255 255 255 / .06), 0 16px 40px rgb(0 0 0 / .36);}How namespaces are resolved
A theme token name has the shape <namespace>-<key>. Master CSS resolves the namespace by longest prefix, so color-line-divider belongs to color-line, not color.
Namespaces come from these sources:
breakpointis built in because viewport query suffixes such as@mdneed to resolvebreakpoint-md.- The preset declares a fixed default namespace registry. Utilities and native value namespaces can only reference those registry entries.
- Utilities can share a registry namespace. For example, border and outline color utilities search
color-linebeforecolor, while spacing utilities searchspacing. - Full property names do not become token namespaces automatically. A token namespace is available only when the preset explicitly registers and references it.
- Semantic utilities can use a clearer foundation namespace than their property name. Animation and transition durations use
duration-*, font feature settings usefont-feature-*, generated content usescontent-*, and shadows useshadow-*.
Function utilities do not become namespaces by name. Tokens such as blur-sm, drop-shadow-soft, and perspective-near are ordinary theme tokens unless the preset registry includes and references that namespace.
@theme { --duration-fast: 120ms; --font-feature-tabular: "tnum"; --content-empty: ""; --leading-body: 1.6;}<pre class="animation-duration:fast transition-delay:fast font-feature-settings:tabular leading:body content:empty">...</pre>Default namespace sources
The default theme vocabulary is registry-backed. This table lists the built-in condition namespace and the namespaces currently referenced by default utilities or native value namespaces.
| Namespace | Used by |
|---|---|
breakpoint | @md, @<md, @sm&<lg |
animate-* | animate:<~animate> |
color-* | border, border-block, border-block-color, border-block-end, border-block-end-color, border-block-start, border-block-start-color, border-bottom and 43 more |
color-line-* | border, border-block, border-block-color, border-block-end, border-block-end-color, border-block-start, border-block-start-color, border-bottom and 25 more |
color-surface-* | surface:<~color-surface> |
color-text-* | caret-color, color, -webkit-text-fill-color, text-decoration-color, text:<~color-text>, text-decoration:<~color-text|~color|color>, text-decoration:<~color-text|~color|*> |
container-* | background-size, block-size, contain-intrinsic-block-size, contain-intrinsic-inline-size, flex-basis, height, inline-size, max-block-size and 12 more |
content-* | content |
duration-* | animation-delay, animation-duration, transition-delay, transition-duration, animation, transition |
easing-* | animation-timing-function, transition-timing-function, animation, transition |
font-family-* | font-family, font:<~font-family> |
font-feature-* | font-feature-settings |
font-size-* | font-size, font:<~font-size|number>, text:<~font-size|number> |
font-weight-* | font-weight, font:<~font-weight> |
leading-* | line-height |
order-* | order |
radius-* | border-bottom-left-radius, border-bottom-right-radius, border-end-end-radius, border-end-start-radius, border-radius, border-start-end-radius, border-start-start-radius, border-top-left-radius and 1 more |
shadow-* | box-shadow |
spacing-* | background-position, bottom, border-spacing, column-gap, gap, inset, inset-block, inset-block-end and 69 more |
tracking-* | letter-spacing |
Use contextual tokens
Utilities resolve token values from the namespace they use. The same short key can mean spacing in p:md, radius in r:md, a container width in max-w:md, or a breakpoint in @md.
<article class="bg:white text:neutral p:md r:lg shadow:sm font:sans"> <h2 class="font:sans">Dashboard</h2> <a class="text:blue" href="/settings">Settings</a></article>Alias and override tokens
Use $ when a token should reference another token.
@theme { --color-brand: #4f46e5; --color-text-action: $color-brand;}Define the same token key as a preset token when you want to override it. Later definitions in the project CSS graph win.
@theme { --color-blue: #4589ff;}Inline tokens
Use @theme inline when a token is only a utility shorthand and should not emit a CSS custom property. Master CSS still matches the token, but generated utilities write the resolved value directly.
@theme inline { --color-brand: #4f46e5; --spacing-feature: 1.5rem;}<article class="bg:brand p:feature">...</article>.bg\:brand { background-color: #4f46e5; }.p\:feature { padding: 1.5rem; }Inline tokens can reference other inline tokens. If an inline token references a regular theme token, Master CSS keeps the regular var(--*) reference and emits that regular token when needed. Inline tokens cannot be mode-specific; use normal @theme light and @theme dark blocks when a value must change by mode.
Breakpoint and container tokens
Responsive thresholds are theme tokens too. Define breakpoint variables for viewport at-rule suffixes, and define container variables for container query thresholds and width caps.
@theme { --breakpoint-sm: 40rem; --breakpoint-md: 48rem; --breakpoint-lg: 64rem; --container-sm: 24rem; --container-md: 28rem; --container-lg: 32rem;}rem, px, and legacy unitless numeric tokens remain comparable for these namespaces. Master CSS normalizes breakpoint and container token metadata into rem query nodes so sorting and generated queries stay stable.
<div class="grid-cols:1 grid-cols:2@md grid-cols:3@lg gap:md"> ...</div><aside class="container max-w:lg"> <article class="grid-cols:1 grid-cols:2@container(md)"> ... </article></aside>Keep breakpoint tokens broad and product-wide. Use container tokens when a reusable component should respond to the space it receives. Use raw media or container syntax only when the condition belongs to one local component. See Breakpoints and Containers for the responsive scales.
Use this page to understand theme token naming, namespace resolution, and project-level token configuration. For the exact color, spacing, typography, radius, elevation, motion, breakpoint, and container scales, continue into the foundation guides.
Modes
Modes let one token name adapt across light, dark, high-contrast, or product-specific themes.
Define mode values
Mode-specific @theme blocks keep markup semantic while values change by mode.
@theme light { --color-text-body: #111827; --color-blue: #4f46e5; --shadow-sm: 0 0 0 1px rgb(15 23 42 / .06), 0 16px 40px rgb(15 23 42 / .12);}@theme dark { --color-text-body: #f9fafb; --color-blue: #818cf8; --shadow-sm: 0 0 0 1px rgb(255 255 255 / .06), 0 16px 40px rgb(0 0 0 / .36);}@theme brand { --color-blue: #ff0;}<section class="bg:white text:body shadow:sm"> <button class="bg:blue fg:white">Save</button></section>light and dark are always available. Defining another mode adds it to the theme automatically. When a token has mode-specific values, Master CSS emits a CSS custom property in the theme layer and generated utilities reference that property. This applies to colors, shadows, and any other token namespace that should adapt by mode.
Derive mode-aware tokens
Default theme tokens are emitted on :root. If a default token references a mode-specific token, the browser computes the derived custom property where it is declared. A local .dark or :host(.dark) island can override the referenced token, but it does not recompute an inherited derived token.
@theme { --stripe: 0 / 7.5px 7.5px linear-gradient(135deg, $color-line-muted 4.5%, $color-surface-raised 0) $color-surface-raised;}Define derived tokens inside each mode bucket when they must follow local mode islands:
@theme light { --stripe: 0 / 7.5px 7.5px linear-gradient(135deg, $color-line-muted 4.5%, $color-surface-raised 0) $color-surface-raised;}@theme dark { --stripe: 0 / 7.5px 7.5px linear-gradient(135deg, $color-line-muted 4.5%, $color-surface-raised 0) $color-surface-raised;}This is CSS custom property computed-value behavior, not a selector specificity or inheritance issue.
Choose a mode trigger
Most projects leave light and dark mode behavior system-driven:
@settings { default-mode: light; mode-trigger: media;}| Trigger | Output behavior |
|---|---|
media | Uses @media (prefers-color-scheme: <mode>) for light and dark modes. |
class | Uses class wrappers such as .dark &. Built-in light and dark mode buckets also emit native color-scheme. |
host | Uses shadow host wrappers such as :host(.dark) &. Built-in light and dark host buckets also emit native color-scheme. |
default-mode controls which class-triggered mode also attaches to :root. Set default-mode: none; when no mode should be applied by default. It has no effect with mode-trigger: media, because the browser decides the active color scheme from user or system preferences.
Switch modes manually
Use mode-trigger: class when your app switches modes manually. Put the active mode class on <html>; Master CSS keeps native color-scheme in sync for the built-in light and dark modes.
<html class="dark"> <body> <div class="bg:white text:body">...</div> </body></html>const key = 'theme-preference'const preference = localStorage.getItem(key) || 'system'const value = preference === 'system' ? matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light' : preferencedocument.documentElement.classList.add(value)Named conditions and selectors
Named conditions and selector shortcuts belong in the theme when they become shared product vocabulary. Use them to keep repeated media queries, support checks, container queries, and selectors out of markup.
At variants
Native CSS cannot store full @media, @supports, or @container rules in CSS variables. Master CSS uses @custom-variant to name those reusable conditions.
@custom-variant @motion-safe { @media (prefers-reduced-motion: no-preference) { @slot; } }@custom-variant @supports-backdrop { @supports (backdrop-filter: blur(0)) { @slot; } }@custom-variant @card-wide { @container card (width >= 42rem) { @slot; } }@custom-variant @start { @starting-style { @slot; } }The token is written with the same leading @ in the definition and in CSS @variant blocks. In markup, use the token name as an @ suffix:
<div class="animation:fade-in|fast@motion-safe bg:white/.8@supports-backdrop"> ...</div>At variants in CSS rules
Inside managed definitions and native style rules, use @variant blocks instead of putting conditional suffixes inside @compose.
@custom-variant @motion-safe { @media (prefers-reduced-motion: no-preference) { @slot; } }@components { card { @compose p:md r:xl; @variant @motion-safe { @compose animation:fade-in|fast; } @variant @<sm { @compose block; } }}@variant accepts custom condition variants, breakpoint tokens such as @md, mode names such as @dark, and raw Master CSS at syntax such as @<sm.
Selector variants
Selector variants name selectors that repeat across markup or CSS-defined styles. Define them with @custom-variant.
@custom-variant :headings { &:is(h1, h2, h3, h4, h5, h6) { @slot; } }@custom-variant :interactive { &:is(:hover, :focus-visible) { @slot; } }@custom-variant ::scrollbar { &::-webkit-scrollbar { @slot; } }Use selector variants anywhere Master CSS accepts a selector suffix:
<article class="font:semibold_:headings"> <button class="text:blue:interactive">Save</button> <div class="w:.5rem::scrollbar">...</div></article>Selector variants in CSS rules
Inside CSS-defined style rules, use @variant to apply selector variants instead of putting selector suffixes inside @compose.
@custom-variant :interactive { &:is(:hover, :focus-visible) { @slot; } }@components { btn { @compose inline-flex align-items:center justify-content:center; @variant :interactive { @compose text:blue; } }}Naming rules
Breakpoint variables automatically create at variants such as @md, and modes automatically create at variants such as @dark. Custom at token names cannot start with @, :, or ::, and cannot conflict with breakpoint or mode names.
Selector variants use : or :: in class suffixes, while conditional variants use @. Both are defined with @custom-variant.
Motion
Motion belongs in the theme when timing, easing, and keyframes are shared by more than one surface.
@theme { --duration-fast: 150ms; --duration-slow: 300ms; --duration-short: 80ms; --easing-smooth: cubic-bezier(.4, 0, .2, 1); @keyframes fade-in { from { opacity: 0; transform: translateY(.25rem); } to { opacity: 1; transform: translateY(0); } }}@custom-variant @motion-safe { @media (prefers-reduced-motion: no-preference) { @slot; } }<div class="animation:fade-in|slow|smooth@motion-safe animation-delay:short"> ...</div>Keyframes are emitted outside cascade layers, while animation utilities still generate in the utilities layer. For the complete animation syntax, see Animation.
Project settings
Most theme work is tokens, but a few root settings shape every generated rule. Keep those settings in @settings and change them only when the project has a clear convention.
@settings { root-size: 16; base-unit: 4; scope: #app;}root-size controls how numeric values convert to rem and em. base-unit controls multiplier units such as 1x, 2x, and 4x. scope prefixes generated selectors when Master CSS should only style a specific application root.
<div id="app"> <button class="p:4x font:16px">Save</button></div>You do not need to set these in every project. Treat them as theme-level defaults, not a list of options to fill out.
For the complete settings syntax, see CSS directives.
Style patterns
The theme should describe shared values and named conditions. Reusable UI patterns can live next to it, but they have a different job.
@components { btn { @compose inline-flex align-items:center justify-content:center gap:xs px:md py:xs r:md font:sm font:medium; @compose bg:blue fg:white; &:disabled { @compose opacity:.55 pointer-events:none; } }}<button class="btn">Save changes</button>Use Reusing Styles for abstraction strategy, component classes for semantic UI classes, and custom utilities for low-level project primitives.
Default source
Master CSS ships its complete default CSS entry as @master/css/index.css. Read it as source, not as a required project template: copy only the tokens or settings you intentionally want to override.
The default entry imports focused public files. Use @master/css/theme.css for preset theme tokens, @master/css/variants.css for preset variants, and @master/css/utilities.css for preset static utilities when you need a smaller entry.
theme.css
@theme { /* Font families */ --font-family-sans: var(--font-sans, ui-sans-serif), system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; --font-family-mono: var(--font-mono, ui-monospace), SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; --font-family-serif: var(--font-serif, ui-serif), Georgia, Cambria, 'Times New Roman', Times, serif; /* Letter spacing */ --tracking-tightest: -0.072em; --tracking-tighter: -0.04em; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.02em; --tracking-wider: 0.04em; --tracking-widest: 0.12em; /* Line heights */ --leading-xs: 1.2; --leading-sm: 1.4; --leading-md: 1.6; --leading-lg: 1.8; --leading-xl: 2; /* Font weights */ --font-weight-thin: 100; --font-weight-extralight: 200; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; --font-weight-heavy: 900; /* Font sizes */ --font-size-3xs: 0.5rem; --font-size-2xs: 0.625rem; --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-md: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem; --font-size-3xl: 2rem; --font-size-4xl: 2.25rem; --font-size-5xl: 2.5rem; --font-size-6xl: 3rem; --font-size-7xl: 3.75rem; --font-size-8xl: 4.5rem; --font-size-9xl: 6rem; --font-size-10xl: 8rem; /* Font features */ --font-feature-tabular: 'tnum'; /* Content */ --content-empty: ''; /* Radii */ --radius-xs: 0.125rem; --radius-sm: 0.25rem; --radius-md: 0.375rem; --radius-lg: 0.5rem; --radius-xl: 0.75rem; --radius-2xl: 1rem; --radius-3xl: 1.5rem; --radius-4xl: 2rem; /* Spacing */ --spacing-4xs: 0.125rem; --spacing-3xs: 0.25rem; --spacing-2xs: 0.375rem; --spacing-xs: 0.5rem; --spacing-sm: 0.75rem; --spacing-md: 1rem; --spacing-lg: 1.5rem; --spacing-xl: 2rem; --spacing-2xl: 3rem; --spacing-3xl: 4rem; --spacing-4xl: 6rem; --spacing-5xl: 8rem; /* Breakpoints */ --breakpoint-4xs: 22.5rem; --breakpoint-3xs: 30rem; --breakpoint-2xs: 37.5rem; --breakpoint-xs: 48rem; --breakpoint-sm: 52.125rem; --breakpoint-md: 64rem; --breakpoint-lg: 80rem; --breakpoint-xl: 90rem; --breakpoint-2xl: 100rem; --breakpoint-3xl: 120rem; --breakpoint-4xl: 160rem; /* Containers */ --container-3xs: 16rem; --container-2xs: 18rem; --container-xs: 20rem; --container-sm: 24rem; --container-md: 28rem; --container-lg: 32rem; --container-xl: 36rem; --container-2xl: 42rem; --container-3xl: 48rem; --container-4xl: 56rem; --container-5xl: 64rem; --container-6xl: 72rem; --container-7xl: 80rem; --container-8xl: 90rem; /* Durations */ --duration-fastest: 75ms; --duration-faster: 100ms; --duration-fast: 150ms; --duration-normal: 200ms; --duration-slow: 300ms; --duration-slower: 500ms; --duration-slowest: 800ms; /* Easings */ --easing-smooth: cubic-bezier(.4, 0, .2, 1); --easing-soft: cubic-bezier(.33, 1, .68, 1); --easing-crisp: cubic-bezier(.16, 1, .3, 1); --easing-snap: cubic-bezier(.2, 0, 0, 1); --easing-accelerate: cubic-bezier(.4, 0, 1, 1); --easing-decelerate: cubic-bezier(0, 0, .2, 1); --easing-overshoot: cubic-bezier(.34, 1.56, .64, 1); --easing-rewind: cubic-bezier(.36, 0, .66, -.56); --easing-spring: cubic-bezier(.68, -.6, .32, 1.6); /* Animations */ --animate-fade: fade 1s infinite; --animate-flash: flash 1s infinite; --animate-float: float 3s ease-in-out infinite; --animate-heart: heart 1s infinite; --animate-jump: jump 1s infinite; --animate-ping: ping 1s infinite; --animate-pulse: pulse 1s infinite; --animate-rotate: rotate 1s linear infinite; --animate-shake: shake 1s infinite; --animate-zoom: zoom 1s infinite; /* Color palettes */ /* stone */ --color-stone-0: oklch(99% 0.002 72); --color-stone-5: oklch(94.9% 0.0053 72); --color-stone-10: oklch(90.8% 0.0158 72); --color-stone-20: oklch(82.6% 0.0287 72); --color-stone-30: oklch(74.4% 0.04 72); --color-stone-40: oklch(66.2% 0.044 72); --color-stone-50: oklch(58% 0.045 72); --color-stone-60: oklch(49.8% 0.033 72); --color-stone-70: oklch(41.6% 0.0275 72); --color-stone-80: oklch(33.4% 0.022 72); --color-stone-90: oklch(25.2% 0.0105 72); --color-stone-95: oklch(21.1% 0.0079 72); --color-stone-100: oklch(17% 0.0053 72); /* gray */ --color-gray-0: oklch(98.48% 0 none); --color-gray-5: oklch(96.5% 0 none); --color-gray-10: oklch(90% 0 none); --color-gray-20: oklch(82% 0 none); --color-gray-30: oklch(73.5% 0 none); --color-gray-40: oklch(65% 0 none); --color-gray-50: oklch(55.2% 0 none); --color-gray-60: oklch(48% 0 none); --color-gray-70: oklch(39.5% 0 none); --color-gray-80: oklch(31% 0 none); --color-gray-90: oklch(23.5% 0 none); --color-gray-95: oklch(18.5% 0 none); --color-gray-100: oklch(14.5% 0 none); /* neutral */ --color-neutral-0: oklch(98.38% 0.0033 250); --color-neutral-5: oklch(96.8% 0.0048 253); --color-neutral-10: oklch(94.8% 0.0074 262); --color-neutral-20: oklch(88.5% 0.014 268); --color-neutral-30: oklch(79.5% 0.02 270); --color-neutral-40: oklch(68.5% 0.026 272); --color-neutral-50: oklch(57% 0.03 273); --color-neutral-60: oklch(48% 0.028 273); --color-neutral-70: oklch(39% 0.024 273); --color-neutral-80: oklch(30.5% 0.019 273); --color-neutral-90: oklch(23% 0.014 273); --color-neutral-95: oklch(18% 0.01 273); --color-neutral-100: oklch(14% 0.007 273); /* slate */ --color-slate-0: oklch(98.07% 0.0055 257.1); --color-slate-5: oklch(96.15% 0.0145 267.3); --color-slate-10: oklch(90.16% 0.0324 268.2); --color-slate-20: oklch(82.16% 0.045 268.2); --color-slate-30: oklch(74.16% 0.069 268.2); --color-slate-40: oklch(63.99% 0.0804 266.1); --color-slate-50: oklch(55.43% 0.0949 263.4); --color-slate-60: oklch(45.03% 0.0817 265.9); --color-slate-70: oklch(39% 0.0702 263.9); --color-slate-80: oklch(32.14% 0.0604 264.8); --color-slate-90: oklch(27.33% 0.0536 264.8); --color-slate-95: oklch(21.5% 0.0573 267.4); --color-slate-100: oklch(17.5% 0.0688 267.4); /* brown */ --color-brown-0: oklch(97% 0.0097 47.1); --color-brown-5: oklch(95.48% 0.0183 34.8); --color-brown-10: oklch(88.65% 0.0558 33.4); --color-brown-20: oklch(81.37% 0.1065 33.6); --color-brown-30: oklch(74.39% 0.12 32.5); --color-brown-40: oklch(67.62% 0.12 32.5); --color-brown-50: oklch(61.9% 0.12 32.5); --color-brown-60: oklch(55.58% 0.12 32.5); --color-brown-70: oklch(49.11% 0.12 32.5); --color-brown-80: oklch(42.07% 0.12 32.5); --color-brown-90: oklch(35.11% 0.12 32.5); --color-brown-95: oklch(24.7% 0.0958 31.2); --color-brown-100: oklch(21.21% 0.0822 31.2); /* orange */ --color-orange-0: oklch(96.76% 0.0202 84.6); --color-orange-5: oklch(94.78% 0.0417 83); --color-orange-10: oklch(89.94% 0.0784 75.7); --color-orange-20: oklch(82.86% 0.1343 69.2); --color-orange-30: oklch(75.09% 0.179 58.4); --color-orange-40: oklch(71.4% 0.1941 48.1); --color-orange-50: oklch(66.61% 0.2247 36.7); --color-orange-60: oklch(61.68% 0.2388 31.2); --color-orange-70: oklch(53.53% 0.2196 29.2); --color-orange-80: oklch(46.33% 0.1901 29.2); --color-orange-90: oklch(36.63% 0.1503 29.2); --color-orange-95: oklch(25.4% 0.1042 29.2); --color-orange-100: oklch(21.44% 0.088 29.2); /* amber */ --color-amber-0: oklch(97.5% 0.0306 99); --color-amber-5: oklch(96.24% 0.0573 98.1); --color-amber-10: oklch(93.46% 0.0995 95.8); --color-amber-20: oklch(88.25% 0.1592 91.3); --color-amber-30: oklch(86% 0.1633 86.9); --color-amber-40: oklch(83.04% 0.1701 81.1); --color-amber-50: oklch(79.4% 0.1709 71.1); --color-amber-60: oklch(73.31% 0.1784 56.5); --color-amber-70: oklch(63.23% 0.1757 46.7); --color-amber-80: oklch(53.09% 0.1677 39.7); --color-amber-90: oklch(42.68% 0.138 38.6); --color-amber-95: oklch(29.27% 0.0971 37.4); --color-amber-100: oklch(23.94% 0.0818 36.1); /* yellow */ --color-yellow-0: oklch(98.86% 0.0355 107.4); --color-yellow-5: oklch(98.27% 0.0758 108); --color-yellow-10: oklch(97.31% 0.1513 109.1); --color-yellow-20: oklch(95.82% 0.207 108.4); --color-yellow-30: oklch(93.51% 0.1981 104.7); --color-yellow-40: oklch(91.5% 0.1909 101.1); --color-yellow-50: oklch(87.52% 0.1796 94.6); --color-yellow-60: oklch(82.02% 0.169 82.1); --color-yellow-70: oklch(72.04% 0.1592 67); --color-yellow-80: oklch(64.84% 0.1477 63.1); --color-yellow-90: oklch(52.17% 0.1199 62.2); --color-yellow-95: oklch(33.35% 0.083 54.6); --color-yellow-100: oklch(26.22% 0.0646 55.4); /* lime */ --color-lime-0: oklch(98.05% 0.0399 116); --color-lime-5: oklch(96.62% 0.08 121.2); --color-lime-10: oklch(95.06% 0.1441 121.5); --color-lime-20: oklch(92.45% 0.2251 126); --color-lime-30: oklch(87.79% 0.2261 126.9); --color-lime-40: oklch(82.22% 0.225 131.1); --color-lime-50: oklch(74.39% 0.2131 133.9); --color-lime-60: oklch(66.45% 0.195 135.3); --color-lime-70: oklch(58.7% 0.1769 136.7); --color-lime-80: oklch(51.46% 0.1612 138.7); --color-lime-90: oklch(44.54% 0.1437 140.1); --color-lime-95: oklch(29.84% 0.097 140.4); --color-lime-100: oklch(25.83% 0.0851 141.1); /* green */ --color-green-0: oklch(97% 0.0305 145.7); --color-green-5: oklch(94.95% 0.071 145.5); --color-green-10: oklch(92.05% 0.1355 145.7); --color-green-20: oklch(89.18% 0.2191 143.8); --color-green-30: oklch(84.3% 0.24 143.9); --color-green-40: oklch(77.68% 0.25 144.1); --color-green-50: oklch(72.41% 0.2464 142.5); --color-green-60: oklch(67.52% 0.2298 142.5); --color-green-70: oklch(58.66% 0.1996 142.5); --color-green-80: oklch(51.96% 0.1768 142.5); --color-green-90: oklch(44.03% 0.1498 142.5); --color-green-95: oklch(30.17% 0.1027 142.5); --color-green-100: oklch(26.35% 0.0897 142.5); /* beryl */ --color-beryl-0: oklch(96.57% 0.03 163.7); --color-beryl-5: oklch(94.71% 0.0634 163.5); --color-beryl-10: oklch(91.87% 0.1178 162.2); --color-beryl-20: oklch(90.33% 0.1569 161.2); --color-beryl-30: oklch(86.43% 0.2104 155.8); --color-beryl-40: oklch(82.49% 0.1978 156.6); --color-beryl-50: oklch(76.89% 0.1885 155.4); --color-beryl-60: oklch(69.77% 0.1794 153.1); --color-beryl-70: oklch(60.74% 0.1602 151.9); --color-beryl-80: oklch(54.36% 0.1421 152.3); --color-beryl-90: oklch(46.09% 0.1213 152); --color-beryl-95: oklch(30.39% 0.0888 147.6); --color-beryl-100: oklch(26.71% 0.0855 144.4); /* teal */ --color-teal-0: oklch(97.24% 0.023 179.8); --color-teal-5: oklch(94.3% 0.0661 180.5); --color-teal-10: oklch(92.33% 0.1056 181.5); --color-teal-20: oklch(91.3% 0.1327 183.1); --color-teal-30: oklch(90.52% 0.1472 184.8); --color-teal-40: oklch(89.99% 0.1577 186.3); --color-teal-50: oklch(86.13% 0.1485 190.5); --color-teal-60: oklch(79.38% 0.1355 194.8); --color-teal-70: oklch(67.86% 0.1154 199.2); --color-teal-80: oklch(60.62% 0.1033 203.7); --color-teal-90: oklch(52.19% 0.0898 208.3); --color-teal-95: oklch(31.94% 0.0584 220.7); --color-teal-100: oklch(28.34% 0.0534 224.3); /* cyan */ --color-cyan-0: oklch(97.47% 0.022 196.6); --color-cyan-5: oklch(95.05% 0.0598 196); --color-cyan-10: oklch(92.28% 0.1032 196.9); --color-cyan-20: oklch(89.98% 0.1264 200.1); --color-cyan-30: oklch(87.28% 0.1376 204.3); --color-cyan-40: oklch(84.82% 0.1408 209.5); --color-cyan-50: oklch(81.54% 0.1453 216.7); --color-cyan-60: oklch(77.57% 0.1494 226.7); --color-cyan-70: oklch(70.27% 0.1509 235.9); --color-cyan-80: oklch(63.25% 0.1493 241.7); --color-cyan-90: oklch(52.16% 0.1354 246.4); --color-cyan-95: oklch(35.21% 0.0976 249.2); --color-cyan-100: oklch(30.27% 0.0847 249.6); /* sky */ --color-sky-0: oklch(97.39% 0.0139 209.4); --color-sky-5: oklch(94.65% 0.0358 212.1); --color-sky-10: oklch(90.51% 0.0667 216.5); --color-sky-20: oklch(86.58% 0.0902 224); --color-sky-30: oklch(77.94% 0.1431 228.4); --color-sky-40: oklch(72.24% 0.1626 239); --color-sky-50: oklch(67.09% 0.1828 248.5); --color-sky-60: oklch(62.09% 0.2077 255.4); --color-sky-70: oklch(55.12% 0.2483 261.6); --color-sky-80: oklch(49.98% 0.2769 263.8); --color-sky-90: oklch(40.76% 0.2499 264.2); --color-sky-95: oklch(28.37% 0.1946 265.1); --color-sky-100: oklch(25.85% 0.1768 265.4); /* blue */ --color-blue-0: oklch(97.5% 0.0105 219.7); --color-blue-5: oklch(93.53% 0.0305 231.3); --color-blue-10: oklch(90.01% 0.0519 236.1); --color-blue-20: oklch(81.69% 0.0975 246.5); --color-blue-30: oklch(72.87% 0.1468 249.3); --color-blue-40: oklch(64.31% 0.1921 258.5); --color-blue-50: oklch(58.22% 0.2279 263.9); --color-blue-60: oklch(51.83% 0.2687 266.1); --color-blue-70: oklch(46.26% 0.3057 266.7); --color-blue-80: oklch(42.89% 0.2907 266.3); --color-blue-90: oklch(39.4% 0.2629 268); --color-blue-95: oklch(28.64% 0.1893 269); --color-blue-100: oklch(25.46% 0.168 269.2); /* indigo */ --color-indigo-0: oklch(97.1% 0.0083 257.2); --color-indigo-5: oklch(94.11% 0.0228 279.6); --color-indigo-10: oklch(87.83% 0.0547 274.4); --color-indigo-20: oklch(77.74% 0.1153 280.2); --color-indigo-30: oklch(70.2% 0.1611 282.9); --color-indigo-40: oklch(61.3% 0.218 284); --color-indigo-50: oklch(56.78% 0.2478 284.1); --color-indigo-60: oklch(50.06% 0.2906 282); --color-indigo-70: oklch(48.74% 0.2963 279.3); --color-indigo-80: oklch(48.25% 0.2976 277.4); --color-indigo-90: oklch(41.46% 0.2571 276.7); --color-indigo-95: oklch(29.36% 0.1799 278.3); --color-indigo-100: oklch(25.28% 0.1551 278.1); /* violet */ --color-violet-0: oklch(97.96% 0.01 322.8); --color-violet-5: oklch(94.02% 0.0266 299.5); --color-violet-10: oklch(88.69% 0.0596 300.1); --color-violet-20: oklch(80.47% 0.113 297.7); --color-violet-30: oklch(71.63% 0.1722 298.7); --color-violet-40: oklch(62.1% 0.237 297.8); --color-violet-50: oklch(56.23% 0.2803 297.8); --color-violet-60: oklch(52.55% 0.293 292.4); --color-violet-70: oklch(51.12% 0.2931 287.9); --color-violet-80: oklch(48.43% 0.2798 286.7); --color-violet-90: oklch(40.64% 0.2331 287.9); --color-violet-95: oklch(28.51% 0.1631 288.3); --color-violet-100: oklch(24.44% 0.1403 287.8); /* purple */ --color-purple-0: oklch(97.07% 0.0155 325.8); --color-purple-5: oklch(94.28% 0.0315 314.4); --color-purple-10: oklch(89.13% 0.0709 314.7); --color-purple-20: oklch(81.4% 0.1318 312.8); --color-purple-30: oklch(72.72% 0.2007 312.8); --color-purple-40: oklch(63.36% 0.2677 310); --color-purple-50: oklch(58.21% 0.2988 307.2); --color-purple-60: oklch(55.59% 0.2952 301); --color-purple-70: oklch(54.45% 0.294 297.9); --color-purple-80: oklch(48.76% 0.264 297.5); --color-purple-90: oklch(39.15% 0.2105 298.7); --color-purple-95: oklch(27.95% 0.1488 300.5); --color-purple-100: oklch(24.3% 0.128 302.4); /* fuchsia */ --color-fuchsia-0: oklch(97.07% 0.0155 325.8); --color-fuchsia-5: oklch(94.57% 0.0378 324.9); --color-fuchsia-10: oklch(89.9% 0.086 326.3); --color-fuchsia-20: oklch(81.84% 0.1554 322); --color-fuchsia-30: oklch(74.78% 0.2085 319.1); --color-fuchsia-40: oklch(67.61% 0.25 316.5); --color-fuchsia-50: oklch(62.91% 0.25 316.7); --color-fuchsia-60: oklch(58.72% 0.25 311.8); --color-fuchsia-70: oklch(53.61% 0.25 312.8); --color-fuchsia-80: oklch(47.9% 0.2382 313.2); --color-fuchsia-90: oklch(38.62% 0.1895 315.8); --color-fuchsia-95: oklch(27.75% 0.1357 316.4); --color-fuchsia-100: oklch(23.7% 0.1162 315.9); /* pink */ --color-pink-0: oklch(97.07% 0.0155 325.8); --color-pink-5: oklch(94.74% 0.0372 326.5); --color-pink-10: oklch(88.85% 0.083 332.8); --color-pink-20: oklch(81.57% 0.1379 341.6); --color-pink-30: oklch(74.68% 0.2018 342.5); --color-pink-40: oklch(69.18% 0.2455 347.6); --color-pink-50: oklch(65.84% 0.25 350.7); --color-pink-60: oklch(63.54% 0.25 359.2); --color-pink-70: oklch(58.95% 0.2377 2.6); --color-pink-80: oklch(53% 0.2126 6.4); --color-pink-90: oklch(43.66% 0.1748 8.1); --color-pink-95: oklch(31.48% 0.1261 7.8); --color-pink-100: oklch(27.42% 0.1098 8.5); /* crimson */ --color-crimson-0: oklch(97.07% 0.0155 325.8); --color-crimson-5: oklch(94.2% 0.0266 353.2); --color-crimson-10: oklch(88.09% 0.0623 1); --color-crimson-20: oklch(80.33% 0.1184 4.5); --color-crimson-30: oklch(72.9% 0.1774 4.4); --color-crimson-40: oklch(66.41% 0.2325 8.3); --color-crimson-50: oklch(63.55% 0.25 15.3); --color-crimson-60: oklch(62.66% 0.25 21.2); --color-crimson-70: oklch(58.59% 0.2383 26.2); --color-crimson-80: oklch(53.32% 0.2169 26.3); --color-crimson-90: oklch(44.03% 0.1783 24.4); --color-crimson-95: oklch(31.73% 0.1287 25.1); --color-crimson-100: oklch(27.68% 0.1126 26.2); /* red */ --color-red-0: oklch(96.63% 0.01 17.2); --color-red-5: oklch(94.05% 0.0239 17); --color-red-10: oklch(87.16% 0.0632 17.8); --color-red-20: oklch(79.39% 0.119 18.8); --color-red-30: oklch(72.94% 0.1679 17.5); --color-red-40: oklch(64.7% 0.2399 19.9); --color-red-50: oklch(62.82% 0.25 28.6); --color-red-60: oklch(60.94% 0.2501 29.2); --color-red-70: oklch(57.58% 0.2363 29.2); --color-red-80: oklch(53.09% 0.2178 29.2); --color-red-90: oklch(44.45% 0.1824 29.2); --color-red-95: oklch(32.59% 0.1337 29.2); --color-red-100: oklch(28.54% 0.1171 29.2); /* Keyframes */ @keyframes fade { 0% { opacity: 0; } to { opacity: 1; } } @keyframes flash { 0%, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes float { 0% { transform: none; } 50% { transform: translateY(-1.25rem); } to { transform: none; } } @keyframes heart { 0% { transform: scale(1); } 14% { transform: scale(1.3); } 28% { transform: scale(1); } 42% { transform: scale(1.3); } 70% { transform: scale(1); } } @keyframes jump { 0%, to { transform: translateY(-25%); animation-timing-function: cubic-bezier(.8, 0, 1, 1); } 50% { transform: translateY(0); animation-timing-function: cubic-bezier(0, 0, .2, 1); } } @keyframes ping { 75%, to { transform: scale(2); opacity: 0; } } @keyframes pulse { 0% { transform: none; } 50% { transform: scale(1.05); } to { transform: none; } } @keyframes rotate { 0% { transform: rotate(-360deg); } to { transform: none; } } @keyframes shake { 0% { transform: none; } 6.5% { transform: translateX(-6px) rotateY(-9deg); } 18.5% { transform: translateX(5px) rotateY(7deg); } 31.5% { transform: translateX(-3px) rotateY(-5deg); } 43.5% { transform: translateX(2px) rotateY(3deg); } 50% { transform: none; } } @keyframes zoom { 0% { transform: scale(0); } to { transform: none; } }}/* Light mode tokens */@theme light { /* Shadows */ --shadow-xs: 0 0 0 1px oklch(0% 0 none / .04), 0 1px 2px -1px oklch(0% 0 none / .08); --shadow-sm: 0 0 0 1px oklch(0% 0 none / .04), 0 1px 2px -1px oklch(0% 0 none / .06), 0 3px 6px -2px oklch(0% 0 none / .08); --shadow-md: 0 0 0 1px oklch(0% 0 none / .05), 0 2px 4px -2px oklch(0% 0 none / .06), 0 8px 16px -4px oklch(0% 0 none / .10); --shadow-lg: 0 0 0 1px oklch(0% 0 none / .05), 0 4px 8px -4px oklch(0% 0 none / .08), 0 16px 32px -8px oklch(0% 0 none / .12); --shadow-xl: 0 0 0 1px oklch(0% 0 none / .06), 0 8px 16px -6px oklch(0% 0 none / .10), 0 24px 48px -12px oklch(0% 0 none / .14); --shadow-2xl: 0 0 0 1px oklch(0% 0 none / .06), 0 12px 24px -8px oklch(0% 0 none / .12), 0 32px 64px -16px oklch(0% 0 none / .18); /* Color aliases */ --color-stone: $color-stone-30; --color-gray: $color-gray-30; --color-neutral: $color-neutral-30; --color-slate: $color-slate-30; --color-brown: $color-brown-40; --color-orange: $color-orange-40; --color-amber: $color-amber-40; --color-yellow: $color-yellow-40; --color-lime: $color-lime-40; --color-green: $color-green-40; --color-beryl: $color-beryl-40; --color-teal: $color-teal-40; --color-cyan: $color-cyan-40; --color-sky: $color-sky-60; --color-blue: $color-blue-60; --color-indigo: $color-indigo-60; --color-violet: $color-violet-60; --color-purple: $color-purple-60; --color-fuchsia: $color-fuchsia-60; --color-pink: $color-pink-60; --color-crimson: $color-crimson-60; --color-red: $color-red-60; /* Surface color aliases */ --color-surface-base: $color-neutral-0; --color-surface-muted: $color-neutral-5; --color-surface-raised: $color-white; --color-surface-overlay: $color-white; --color-surface-inverse: $color-black; /* Line color aliases */ --color-line-base: oklch(0% 0 none / 0.12); --color-line-strong: oklch(0% 0 none / 0.18); --color-line-muted: oklch(0% 0 none / 0.09); --color-line-subtle: oklch(0% 0 none / 0.06); /* Text color aliases */ --color-text-body: $color-neutral-70; --color-text-strong: $color-neutral-100; --color-text-muted: $color-neutral-60; --color-text-subtle: $color-neutral-50; --color-text-disabled: $color-neutral-40; --color-text-placeholder: $color-neutral-40; --color-text-inverse: $color-white; --color-text-link: $color-blue-60; --color-text-link-hover: $color-blue-70; --color-text-stone: $color-stone-60; --color-text-gray: $color-gray-60; --color-text-neutral: $color-neutral-60; --color-text-slate: $color-slate-60; --color-text-brown: $color-brown-60; --color-text-orange: $color-orange-60; --color-text-amber: $color-amber-60; --color-text-yellow: $color-yellow-70; --color-text-lime: $color-lime-70; --color-text-green: $color-green-70; --color-text-beryl: $color-beryl-70; --color-text-teal: $color-teal-70; --color-text-cyan: $color-cyan-70; --color-text-sky: $color-sky-70; --color-text-blue: $color-blue-60; --color-text-indigo: $color-indigo-60; --color-text-violet: $color-violet-60; --color-text-purple: $color-purple-60; --color-text-fuchsia: $color-fuchsia-60; --color-text-pink: $color-pink-60; --color-text-crimson: $color-crimson-60; --color-text-red: $color-red-60;}/* Dark mode tokens */@theme dark { /* Shadows */ --shadow-xs: 0 0 0 1px oklch(100% 0 none / .04), 0 1px 2px -1px oklch(0% 0 none / .30); --shadow-sm: 0 0 0 1px oklch(100% 0 none / .05), 0 1px 2px -1px oklch(0% 0 none / .34), 0 3px 6px -2px oklch(0% 0 none / .26); --shadow-md: 0 0 0 1px oklch(100% 0 none / .06), 0 2px 4px -2px oklch(0% 0 none / .38), 0 8px 16px -4px oklch(0% 0 none / .30); --shadow-lg: 0 0 0 1px oklch(100% 0 none / .06), 0 4px 8px -4px oklch(0% 0 none / .42), 0 16px 32px -8px oklch(0% 0 none / .34); --shadow-xl: 0 0 0 1px oklch(100% 0 none / .07), 0 8px 16px -6px oklch(0% 0 none / .46), 0 24px 48px -12px oklch(0% 0 none / .38); --shadow-2xl: 0 0 0 1px oklch(100% 0 none / .07), 0 12px 24px -8px oklch(0% 0 none / .50), 0 32px 64px -16px oklch(0% 0 none / .44); /* Color aliases */ --color-stone: $color-stone-40; --color-gray: $color-gray-40; --color-neutral: $color-neutral-40; --color-slate: $color-slate-40; --color-brown: $color-brown-50; --color-orange: $color-orange-50; --color-amber: $color-amber-50; --color-yellow: $color-yellow-50; --color-lime: $color-lime-50; --color-green: $color-green-50; --color-beryl: $color-beryl-50; --color-teal: $color-teal-50; --color-cyan: $color-cyan-50; --color-sky: $color-sky-50; --color-blue: $color-blue-50; --color-indigo: $color-indigo-50; --color-violet: $color-violet-50; --color-purple: $color-purple-50; --color-fuchsia: $color-fuchsia-50; --color-pink: $color-pink-50; --color-crimson: $color-crimson-50; --color-red: $color-red-50; /* Surface color aliases */ --color-surface-base: $color-gray-95; --color-surface-muted: $color-gray-100; --color-surface-raised: $color-gray-90; --color-surface-overlay: $color-gray-80; --color-surface-inverse: $color-white; /* Line color aliases */ --color-line-base: oklch(100% 0 none / 0.12); --color-line-strong: oklch(100% 0 none / 0.18); --color-line-muted: oklch(100% 0 none / 0.09); --color-line-subtle: oklch(100% 0 none / 0.06); /* Text color aliases */ --color-text-body: $color-gray-30; --color-text-strong: $color-white; --color-text-muted: $color-gray-40; --color-text-subtle: $color-gray-50; --color-text-disabled: $color-gray-60; --color-text-placeholder: $color-gray-60; --color-text-inverse: $color-black; --color-text-link: $color-blue-30; --color-text-link-hover: $color-blue-20; --color-text-stone: $color-stone-30; --color-text-gray: $color-gray-30; --color-text-neutral: $color-neutral-30; --color-text-slate: $color-slate-30; --color-text-brown: $color-brown-30; --color-text-orange: $color-orange-30; --color-text-amber: $color-amber-40; --color-text-yellow: $color-yellow-40; --color-text-lime: $color-lime-40; --color-text-green: $color-green-40; --color-text-beryl: $color-beryl-40; --color-text-teal: $color-teal-40; --color-text-cyan: $color-cyan-40; --color-text-sky: $color-sky-30; --color-text-blue: $color-blue-30; --color-text-indigo: $color-indigo-30; --color-text-violet: $color-violet-30; --color-text-purple: $color-purple-30; --color-text-fuchsia: $color-fuchsia-30; --color-text-pink: $color-pink-30; --color-text-crimson: $color-crimson-30; --color-text-red: $color-red-30;}/* Inline aliases */@theme inline { --full: 100%; --fit: fit-content; --max: max-content; --min: min-content; --order-first: -999999; --order-last: 999999; --color-white: oklch(100% 0 none); --color-black: oklch(0% 0 none); --color-current: currentColor;}variants.css
@custom-variant @all { @media all { @slot; }}@custom-variant @print { @media print { @slot; }}@custom-variant @screen { @media screen { @slot; }}@custom-variant @speech { @media speech { @slot; }}@custom-variant @landscape { @media (orientation: landscape) { @slot; }}@custom-variant @portrait { @media (orientation: portrait) { @slot; }}@custom-variant @motion { @media (prefers-reduced-motion: no-preference) { @slot; }}@custom-variant @reduce-motion { @media (prefers-reduced-motion: reduce) { @slot; }}@custom-variant @base { @layer base { @slot; }}@custom-variant @default { @layer defaults { @slot; }}@custom-variant @component { @layer components { @slot; }}@custom-variant @utility { @layer utilities { @slot; }}@custom-variant @start { @starting-style { @slot; }}@custom-variant :first { &:first-child { @slot; }}@custom-variant :last { &:last-child { @slot; }}@custom-variant :nth-last { &:nth-last-child { @slot; }}@custom-variant :even { &:nth-child(2n) { @slot; }}@custom-variant :odd { &:nth-child(odd) { @slot; }}@custom-variant :nth { &:nth-child { @slot; }}@custom-variant :only { &:only-child { @slot; }}@custom-variant :rtl { &:dir(rtl) { @slot; }}@custom-variant :ltr { &:dir(ltr) { @slot; }}@custom-variant ::scrollbar { &::-webkit-scrollbar { @slot; }}@custom-variant ::scrollbar-button { &::-webkit-scrollbar-button { @slot; }}@custom-variant ::scrollbar-thumb { &::-webkit-scrollbar-thumb { @slot; }}@custom-variant ::scrollbar-track { &::-webkit-scrollbar-track { @slot; }}@custom-variant ::scrollbar-track-piece { &::-webkit-scrollbar-track-piece { @slot; }}@custom-variant ::scrollbar-corner { &::-webkit-scrollbar-corner { @slot; }}@custom-variant ::slider-thumb { &::-webkit-slider-thumb { @slot; }}@custom-variant ::slider-runnable-track { &::-webkit-slider-runnable-track { @slot; }}@custom-variant ::resizer { &::-webkit-resizer { @slot; }}@custom-variant ::progress { &::-webkit-progress { @slot; }}@custom-variant ::vt { &::view-transition { @slot; }}@custom-variant ::vt-group { &::view-transition-group { @slot; }}@custom-variant ::vt-image-pair { &::view-transition-image-pair { @slot; }}@custom-variant ::vt-old { &::view-transition-old { @slot; }}@custom-variant ::vt-new { &::view-transition-new { @slot; }}utilities.css
/* Static utilities for positioning, clipping, and content. */@utilities { abs { position: absolute; } bg-clip-border { background-clip: border-box; } bg-clip-content { background-clip: content-box; } bg-clip-padding { background-clip: padding-box; } bg-clip-text { background-clip: text; } bg-origin-<border|content|padding> { background-origin: --value()-box; } block { display: block; } bottom { bottom: 0; } box-<border|content> { box-sizing: --value()-box; } break-spaces { white-space: break-spaces; } break-word { word-break: break-word; } capitalize { text-transform: capitalize; } center { left: 0; right: 0; margin-left: auto; margin-right: auto; } clip-border { clip-path: border-box; } clip-content { clip-path: content-box; } clip-fill { clip-path: fill-box; } clip-margin { clip-path: margin-box; } clip-none { clip-path: none; } clip-padding { clip-path: padding-box; } clip-stroke { clip-path: stroke-box; } clip-view { clip-path: view-box; } container { container-type: inline-size; } content-<around|between|evenly> { align-content: space---value(); } content-<baseline|center|end|flex-end|flex-start|normal|start|stretch> { align-content: --value(); } contents { display: contents; }}/* Static utilities for display, font rendering, and alignment. */@utilities { decoration-from-font { text-decoration-thickness: from-font; } diagonal-fractions { font-variant-numeric: diagonal-fractions; } fit { width: fit-content; height: fit-content; } fixed { position: fixed; } flex { display: flex; } flex-col { flex-direction: column; } flex-col-reverse { flex-direction: column-reverse; } flex-row { flex-direction: row; } flex-row-reverse { flex-direction: row-reverse; } flow-root { display: flow-root; } font-antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } font-subpixel-antialiased { -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; } font-bolder { font-weight: bolder; } full { width: 100%; height: 100%; } text-gradient { -webkit-text-fill-color: transparent; background-clip: text; } grid { display: grid; } hidden { display: none; } inline { display: inline; } inline-block { display: inline-block; } inline-flex { display: inline-flex; } inline-grid { display: inline-grid; } inline-table { display: inline-table; } invisible { visibility: hidden; } isolate { isolation: isolate; } italic { font-style: italic; } items-<baseline|center|end|flex-end|flex-start|normal|self-end|self-start|start|stretch> { align-items: --value(); } justify-<around|between|evenly> { justify-content: space---value(); } justify-<center|end|flex-end|flex-start|left|normal|right|start|stretch> { justify-content: --value(); }}/* Static utilities for text variants, viewport bounds, and shapes. */@utilities { left { left: 0; } line-through { text-decoration: line-through; } lining-nums { font-variant-numeric: lining-nums; } list-item { display: list-item; } lowercase { text-transform: lowercase; } max-vh { max-height: 100vh; } max-vw { max-width: 100vw; } middle { top: 0; bottom: 0; margin-top: auto; margin-bottom: auto; } min-vh { min-height: 100vh; } min-vw { min-width: 100vw; } oblique { font-style: oblique; } oldstyle-nums { font-variant-numeric: oldstyle-nums; } ordinal { font-variant-numeric: ordinal; } overline { text-decoration: overline; } overflow { overflow: visible; } proportional-nums { font-variant-numeric: proportional-nums; } rel { position: relative; } right { right: 0; } round { border-radius: 50%; aspect-ratio: 1/1; } rounded { border-radius: 1e9em; } self-<anchor-center|auto|baseline|center|end|flex-end|flex-start|normal|self-end|self-start|start|stretch> { align-self: --value(); } shape-border { shape-outside: border-box; } shape-content { shape-outside: content-box; } shape-margin { shape-outside: margin-box; } shape-none { shape-outside: none; } shape-padding { shape-outside: padding-box; } slashed-zero { font-variant-numeric: slashed-zero; } stacked-fractions { font-variant-numeric: stacked-fractions; } square { aspect-ratio: 1/1; } sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }}/* Static utilities for positioning, tables, transforms, and wrapping. */@utilities { static { position: static; } sticky { position: sticky; } table { display: table; } table-caption { display: table-caption; } table-cell { display: table-cell; } table-column { display: table-column; } table-column-group { display: table-column-group; } table-footer-group { display: table-footer-group; } table-header-group { display: table-header-group; } table-row { display: table-row; } table-row-group { display: table-row-group; } tabular-nums { font-variant-numeric: tabular-nums; } top { top: 0; } transform-<border|content|fill|stroke|view> { transform-box: --value()-box; } untouchable { pointer-events: none; } underline { text-decoration: underline; } uppercase { text-transform: uppercase; } vh { height: 100vh; } video { aspect-ratio: 16/9; } visible { visibility: visible; } vw { width: 100vw; } wrap-<anywhere|break-word|normal> { overflow-wrap: --value(); }}/* Token and size shorthands. */@utilities { animate:<~animate> { animation: --value(); } font:<~font-size|number> { font-size: --value(); } font:<~font-family> { font-family: --value(); } font:<~font-weight> { font-weight: --value(); } bg:<color> { background-color: --value(); } bg:<~color|image> { background-image: --value(); } surface:<~color-surface> { background-color: --value(); } size:<~container|number|*> { width: --value(); height: --value(); } min-size:<~container|number|*> { min-width: --value(); min-height: --value(); } max-size:<~container|number|*> { max-width: --value(); max-height: --value(); }}/* Border and outline shorthands. */@utilities { b:<number> { border-width: --value(); } b:<~color-line|color> { border-color: --value(); } bt:<number> { border-top-width: --value(); } bt:<~color-line|color> { border-top-color: --value(); } br:<number> { border-right-width: --value(); } br:<~color-line|color> { border-right-color: --value(); } bb:<number> { border-bottom-width: --value(); } bb:<~color-line|color> { border-bottom-color: --value(); } bl:<number> { border-left-width: --value(); } bl:<~color-line|color> { border-left-color: --value(); } bx:<number> { border-inline-width: --value(); } bx:<~color-line|color> { border-inline-color: --value(); } by:<number> { border-block-width: --value(); } by:<~color-line|color> { border-block-color: --value(); } outline:<number> { outline-width: --value(); } outline:<~color-line|color> { outline-color: --value(); } outline-<medium|thick|thin> { outline-width: --value(); } outline-<auto|dashed|dotted|double|hidden|none|solid> { outline-style: --value(); }}/* Grid, stroke, and text shorthands. */@utilities { grid-cols:<number|*> { display: grid; grid-template-columns: repeat(--value(), minmax(0, 1fr)); } grid-rows:<number|*> { display: grid; grid-auto-flow: column; grid-template-rows: repeat(--value(), minmax(0, 1fr)); } grid-col-span:<number|*> { grid-column: span --value()/span --value(); } grid-row-span:<number|*> { grid-row: span --value()/span --value(); } line-clamp:<number> { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: --value(); overflow: hidden; overflow-wrap: break-word; text-overflow: ellipsis; } stroke:<number> { stroke-width: --value(); } text:<~font-size|number> { font-size: --value(); line-height: max(1.8em - max(0rem, --value() - 1rem) * 1.12, --value()); letter-spacing: clamp(-0.072em, calc((--value() - 1rem) * -0.048), 0em); } text:<~color-text> { color: --value(); } text-decoration:<number> { text-decoration-thickness: --value(); } text-decoration:<~color-text|color> { text-decoration-color: --value(); } text-decoration:<~color-text|~color|*> { -webkit-text-decoration: --value(); text-decoration: --value(); } text-decoration-thickness:<number|*> { text-decoration-thickness: --value(); } text-underline:<~spacing> { text-underline-offset: --value(); } text-stroke:<number> { -webkit-text-stroke-width: --value(); } text-stroke:<color> { -webkit-text-stroke-color: --value(); } text-stroke:<~color|*> { -webkit-text-stroke: --value(); }}/* Vendor-prefixed shorthands. */@utilities { backdrop-filter:<~color|*> { -webkit-backdrop-filter: --value(); backdrop-filter: --value(); } box-decoration-break:<clone|slice> { -webkit-box-decoration-break: --value(); box-decoration-break: --value(); } mask-image:<*> { -webkit-mask-image: --value(); mask-image: --value(); } user-drag:<auto|element|none> { -webkit-user-drag: --value(); user-drag: --value(); } user-select:<auto|none|text|all> { -webkit-user-select: --value(); user-select: --value(); }}/* Enum utility shortcuts. */@utilities { bg-<auto|contain|cover> { background-size: --value(); } bg-<bottom|center|left|right|top> { background-position: --value(); } bg-<fixed|local|scroll> { background-attachment: --value(); } bg-<repeat|no-repeat|repeat-x|repeat-y> { background-repeat: --value(); } b-<solid|dashed|dotted|double|groove|ridge|inset|outset|none|hidden> { border-style: --value(); } bt-<solid|dashed|dotted|double|groove|ridge|inset|outset|none|hidden> { border-top-style: --value(); } br-<solid|dashed|dotted|double|groove|ridge|inset|outset|none|hidden> { border-right-style: --value(); } bb-<solid|dashed|dotted|double|groove|ridge|inset|outset|none|hidden> { border-bottom-style: --value(); } bl-<solid|dashed|dotted|double|groove|ridge|inset|outset|none|hidden> { border-left-style: --value(); } bx-<solid|dashed|dotted|double|groove|ridge|inset|outset|none|hidden> { border-inline-style: --value(); } by-<solid|dashed|dotted|double|groove|ridge|inset|outset|none|hidden> { border-block-style: --value(); } decoration-<solid|double|dotted|dashed|wavy> { text-decoration-style: --value(); } flex-<wrap|nowrap|wrap-reverse> { flex-wrap: --value(); } list-<disc|decimal> { list-style-type: --value(); } list-<inside|outside> { list-style-position: --value(); } object-<cover|contain|fill|scale-down> { object-fit: --value(); } object-<center|top|bottom|left|right> { object-position: --value(); } snap-<x|y|both|block|inline> { scroll-snap-type: --value(); } snap-<start|end|center> { scroll-snap-align: --value(); } snap-<normal|always> { scroll-snap-stop: --value(); } text-<left|center|right|start|end|justify> { text-align: --value(); } text-<wrap|nowrap|balance|pretty> { text-wrap: --value(); } text-<ellipsis|clip> { text-overflow: --value(); }}