web-expressive/dist/core.css

A standard-first frontend toolkit based on Material Expressive design language intent.

/*!
 * Web Expressive
 * Copyright (c) 2026 Arby (@mobalti)
 * Licensed under the MIT License
 * https://github.com/mobalti/web-expressive
 */
@layer design-system.tokens{@property --ref-typeface-base{syntax:"<string>#";inherits:false;initial-value:"Google Sans Flex"}@property --ref-typeface-brand{syntax:"<string>#";inherits:false;initial-value:"Google Sans Flex"}@property --ref-typeface-plain{syntax:"<string>#";inherits:false;initial-value:"Google Sans Flex"}@property --ref-typeface-emphasized-brand{syntax:"<string>#";inherits:false;initial-value:"Google Sans Flex"}@property --ref-typeface-emphasized-plain{syntax:"<string>#";inherits:false;initial-value:"Google Sans Flex"}@property --ref-typeface-generic{syntax:"serif|sans-serif|system-ui|monospace|cursive|fantasy|math|ui-serif|ui-sans-serif|ui-monospace|ui-rounded";inherits:false;initial-value:sans-serif}@property --ref-typeface-symbols{syntax:"<string>#";inherits:true;initial-value:"Material Symbols Outlined"}@property --size{syntax:"xs|sm|md|lg|xl";inherits:false;initial-value:sm}@property --width{syntax:"narrow|normal|wide";inherits:false;initial-value:normal}@property --shape{syntax:"round|square";inherits:false;initial-value:round}:where(html){--sys-shape-corner-none:0px;--sys-shape-corner-extra-small:.25rem;--sys-shape-corner-small:.5rem;--sys-shape-corner-medium:.75rem;--sys-shape-corner-large:1rem;--sys-shape-corner-large-increased:1.25rem;--sys-shape-corner-extra-large:1.75rem;--sys-shape-corner-extra-large-increased:2rem;--sys-shape-corner-extra-extra-large:3rem;--sys-shape-corner-full:9999px;--sys-motion-spring-fast-spatial:cubic-bezier(.42, 1.67, .21, .9);--sys-motion-spring-fast-spatial-duration:.35s;--sys-motion-spring-default-spatial:cubic-bezier(.38, 1.21, .22, 1);--sys-motion-spring-default-spatial-duration:.5s;--sys-motion-spring-slow-spatial:cubic-bezier(.39, 1.29, .35, .98);--sys-motion-spring-slow-spatial-duration:.65s;--sys-motion-spring-fast-effects:cubic-bezier(.31, .94, .34, 1);--sys-motion-spring-fast-effects-duration:.15s;--sys-motion-spring-default-effects:cubic-bezier(.34, .8, .34, 1);--sys-motion-spring-default-effects-duration:.2s;--sys-motion-spring-slow-effects:cubic-bezier(.34, .88, .34, 1);--sys-motion-spring-slow-effects-duration:.3s}:where(html,[data-mode=light],.light-mode){--sys-elevation-level1:0px 1px 2px #0000004d, 0px 1px 3px 1px #00000026;--sys-elevation-level2:0px 1px 2px #0000004d, 0px 2px 6px 2px #00000026;--sys-elevation-level3:0px 4px 8px 3px #00000026, 0px 1px 3px #0000004d;--sys-elevation-level4:0px 6px 10px 4px #00000026, 0px 2px 3px #0000004d;--sys-elevation-level5:0px 8px 12px 6px #00000026, 0px 4px 4px #0000004d}:where([data-mode=dark],.dark-mode){--sys-elevation-level1:0px 1px 3px 1px #00000026, 0px 1px 2px #0000004d;--sys-elevation-level2:0px 2px 6px 2px #00000026, 0px 1px 2px #0000004d;--sys-elevation-level3:0px 4px 8px 3px #00000026, 0px 1px 3px #0000004d;--sys-elevation-level4:0px 6px 10px 4px #00000026, 0px 2px 3px #0000004d;--sys-elevation-level5:0px 8px 12px 6px #00000026, 0px 4px 4px #0000004d}:where(html){--sys-motion-spring-pop-focus:linear(0 0%, 2.5 25%, 2.5 50%, 1 100%);--ref-typeface-brand:var(--ref-typeface-base);--ref-typeface-plain:var(--ref-typeface-base);--ref-typeface-emphasized-brand:var(--ref-typeface-brand);--ref-typeface-emphasized-plain:var(--ref-typeface-plain);--sys-typescale-body-large:400 1rem/1.5rem var(--ref-typeface-plain), var(--ref-typeface-generic);--sys-typescale-body-medium:400 .875rem/1.25rem var(--ref-typeface-plain), var(--ref-typeface-generic);--sys-typescale-body-small:400 .75rem/1rem var(--ref-typeface-plain), var(--ref-typeface-generic);--sys-typescale-display-large:400 3.562rem/4rem var(--ref-typeface-brand), var(--ref-typeface-generic);--sys-typescale-display-medium:400 2.812rem/3.25rem var(--ref-typeface-brand), var(--ref-typeface-generic);--sys-typescale-display-small:400 2.25rem/2.75rem var(--ref-typeface-brand), var(--ref-typeface-generic);--sys-typescale-headline-large:400 2rem/2.5rem var(--ref-typeface-brand), var(--ref-typeface-generic);--sys-typescale-headline-medium:400 1.75rem/2.25rem var(--ref-typeface-brand), var(--ref-typeface-generic);--sys-typescale-headline-small:400 1.5rem/2rem var(--ref-typeface-brand), var(--ref-typeface-generic);--sys-typescale-label-large:500 .875rem/1.25rem var(--ref-typeface-plain), var(--ref-typeface-generic);--sys-typescale-label-medium:500 .75rem/1rem var(--ref-typeface-plain), var(--ref-typeface-generic);--sys-typescale-label-small:500 .688rem/1rem var(--ref-typeface-plain), var(--ref-typeface-generic);--sys-typescale-title-large:400 1.375rem/1.75rem var(--ref-typeface-brand), var(--ref-typeface-generic);--sys-typescale-title-medium:500 1rem/1.5rem var(--ref-typeface-plain), var(--ref-typeface-generic);--sys-typescale-title-small:500 .875rem/1.25rem var(--ref-typeface-plain), var(--ref-typeface-generic);--sys-typescale-emphasized-body-large:500 1rem/1.5rem var(--ref-typeface-emphasized-plain), var(--ref-typeface-generic);--sys-typescale-emphasized-body-medium:500 .875rem/1.25rem var(--ref-typeface-emphasized-plain), var(--ref-typeface-generic);--sys-typescale-emphasized-body-small:500 .75rem/1rem var(--ref-typeface-emphasized-plain), var(--ref-typeface-generic);--sys-typescale-emphasized-display-large:500 3.562rem/4rem var(--ref-typeface-emphasized-brand), var(--ref-typeface-generic);--sys-typescale-emphasized-display-medium:500 2.812rem/3.25rem var(--ref-typeface-emphasized-brand), var(--ref-typeface-generic);--sys-typescale-emphasized-display-small:500 2.25rem/2.75rem var(--ref-typeface-emphasized-brand), var(--ref-typeface-generic);--sys-typescale-emphasized-headline-large:500 2rem/2.5rem var(--ref-typeface-emphasized-brand), var(--ref-typeface-generic);--sys-typescale-emphasized-headline-medium:500 1.75rem/2.25rem var(--ref-typeface-emphasized-brand), var(--ref-typeface-generic);--sys-typescale-emphasized-headline-small:500 1.5rem/2rem var(--ref-typeface-emphasized-brand), var(--ref-typeface-generic);--sys-typescale-emphasized-label-large:600 .875rem/1.25rem var(--ref-typeface-emphasized-plain), var(--ref-typeface-generic);--sys-typescale-emphasized-label-medium:600 .75rem/1rem var(--ref-typeface-emphasized-plain), var(--ref-typeface-generic);--sys-typescale-emphasized-label-small:600 .688rem/1rem var(--ref-typeface-emphasized-plain), var(--ref-typeface-generic);--sys-typescale-emphasized-title-large:500 1.375rem/1.75rem var(--ref-typeface-emphasized-brand), var(--ref-typeface-generic);--sys-typescale-emphasized-title-medium:600 1rem/1.5rem var(--ref-typeface-emphasized-plain), var(--ref-typeface-generic);--sys-typescale-emphasized-title-small:600 .875rem/1.25rem var(--ref-typeface-emphasized-plain), var(--ref-typeface-generic)}}@layer design-system{@layer tokens;@layer reset{*,:before,:after{box-sizing:border-box}:where(:not(dialog)){margin:0}:where(html){-webkit-text-size-adjust:none;@media (prefers-reduced-motion:no-preference){scroll-behavior:smooth}}:where(body){-webkit-font-smoothing:antialiased;min-block-size:100svb}}@layer base{html{scrollbar-color:var(--sys-color-outline) transparent;color-scheme:light dark;& ::selection{background:var(--sys-color-secondary-container);color:var(--sys-color-on-secondary-container)}}body{background:var(--sys-color-surface);color:var(--sys-color-on-surface);font:var(--sys-typescale-body-large)}}@layer components,groups;}