@fest-lib/veela 0.1.20 → 1.0.1

package/src/scss/advanced/design/_effects.scss

@@ -1,275 +0,0 @@
-@use "sass:list";
-@use "sass:map";
-@use "sass:meta";
-
-@use "./colorize" as colorize;
-@use "./motion" as motion;
-@use "./shadow" as shadow;
-@use "./utils" as utils;
-
-// =============================================================================
-// VISUAL EFFECTS MIXINS (split from layout)
-// =============================================================================
-
-$effect-defaults: (
-    transition-duration: var(--duration-fast, #{motion.$ui-duration-fast}),
-    transition-timing: var(--ease-out, #{motion.$ui-ease-standard}),
-    lift: -2px,
-    scale: 1,
-    hover-shadow: var(--shadow-md, #{shadow.$shadow-md}),
-    glass-surface-opacity: var(--surface-opacity-muted, 0.06),
-    glass-border-opacity: var(--border-opacity-subtle, 0.14),
-    glass-blur: default,
-    shimmer-angle: 112deg,
-    shimmer-width: 28%,
-    shimmer-opacity: 0.32,
-    shimmer-duration: var(--duration-long, #{motion.$ui-duration-standard}),
-    shimmer-color: color-mix(in oklch, var(--color-primary, #ffffff) 36%, transparent),
-    shine-duration: var(--duration-normal, #{motion.$ui-duration-standard}),
-    shine-angle: 95deg,
-    shine-width: 22%,
-    shine-opacity: 0.28
-);
-
-$__effects-shimmer-keyframes-declared: false !default;
-$shimmer-keyframes-name: veela-shimmer-glide;
-
-@function _effect-token($token) {
-    @if map.has-key($effect-defaults, $token) {
-        @return map.get($effect-defaults, $token);
-    }
-
-    @error "Unknown visual effect token `#{$token}`.";
-}
-
-@mixin _ensure-shimmer-keyframes($name: $shimmer-keyframes-name) {
-    @if not $__effects-shimmer-keyframes-declared {
-        $__effects-shimmer-keyframes-declared: true !global;
-
-        @at-root {
-            @keyframes #{$name} {
-                0% { transform: translate3d(-120%, 0, 0); }
-                50% { transform: translate3d(0, 0, 0); }
-                100% { transform: translate3d(120%, 0, 0); }
-            }
-        }
-    }
-}
-
-@mixin effect-transition($properties: (transform, box-shadow), $duration: null, $timing: null) {
-    $prop-list: sass(if(sass(meta.type-of($properties) == "list"): $properties; else: ($properties,)));
-    $resolved-duration: sass(if(sass($duration == null): _effect-token(transition-duration); else: $duration));
-    $resolved-timing: sass(if(sass($timing == null): _effect-token(transition-timing); else: $timing));
-
-    @include motion.transition($prop-list, $resolved-duration, $resolved-timing);
-}
-
-@mixin interactive-effect(
-    $hover-transform: null,
-    $hover-shadow: null,
-    $rest-shadow: null,
-    $properties: (transform, box-shadow),
-    $duration: null,
-    $timing: null
-) {
-    $prop-list: sass(if(sass(meta.type-of($properties) == "list"): $properties; else: ($properties,)));
-
-    @include effect-transition($prop-list, $duration, $timing);
-
-    @if $rest-shadow != null {
-        box-shadow: $rest-shadow;
-    }
-
-    @include utils.when-hover {
-        @if $hover-transform != null {
-            transform: $hover-transform;
-        }
-
-        @if $hover-shadow != null {
-            box-shadow: $hover-shadow;
-        }
-    }
-
-    @include utils.when-active {
-        @if $hover-transform != null {
-            transform: $hover-transform;
-        }
-
-        @if $hover-shadow != null {
-            box-shadow: $hover-shadow;
-        }
-    }
-}
-
-@mixin glass-morphism(
-    $surface-opacity: null,
-    $border-opacity: null,
-    $blur: null
-) {
-    $surface-opacity: sass(if(sass($surface-opacity == null): _effect-token(glass-surface-opacity); else: $surface-opacity));
-    $border-opacity: sass(if(sass($border-opacity == null): _effect-token(glass-border-opacity); else: $border-opacity));
-    $blur-value: sass(if(sass($blur == null): _effect-token(glass-blur); else: $blur));
-
-    @include colorize.surface($surface-opacity);
-    @include colorize.border-color(var(--scrollbar-tint), $border-opacity);
-
-    @if meta.type-of($blur-value) == "string" {
-        @include colorize.backdrop-blur($blur-value);
-    } @else {
-        backdrop-filter: $blur-value;
-    }
-
-    background-color:
-        color-mix(
-            in oklch,
-            var(--surface-color, var(--md-sys-color-surface, #0f131a)) calc(#{$surface-opacity} * 100%),
-            transparent
-        );
-}
-
-@mixin gradient-text($gradient: var(--primary-gradient, linear-gradient(120deg, var(--color-primary, #6b8cff), var(--color-tertiary, #f86ed4)))) {
-    background-image: $gradient;
-    background-size: 200% 200%;
-    background-position: 0% 50%;
-    background-clip: text;
-    color: transparent;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-
-    @include effect-transition(background-position);
-
-    @include utils.when-hover {
-        background-position: 100% 50%;
-    }
-
-    @include utils.when-active {
-        background-position: 100% 50%;
-    }
-}
-
-@mixin hover-lift(
-    $lift: null,
-    $shadow: null,
-    $scale: null,
-    $rest-shadow: null,
-    $duration: null,
-    $timing: null
-) {
-    $resolved-lift: sass(if(sass($lift == null): _effect-token(lift); else: $lift));
-    $resolved-shadow: sass(if(sass($shadow == null): _effect-token(hover-shadow); else: $shadow));
-    $resolved-scale: sass(if(sass($scale == null): _effect-token(scale); else: $scale));
-
-    $hover-transform: translate3d(0, $resolved-lift, 0);
-
-    @if $resolved-scale != 1 {
-        $hover-transform: #{$hover-transform} scale(#{$resolved-scale});
-    }
-
-    @include interactive-effect(
-        $hover-transform: $hover-transform,
-        $hover-shadow: $resolved-shadow,
-        $rest-shadow: $rest-shadow,
-        $properties: (transform, box-shadow),
-        $duration: $duration,
-        $timing: $timing
-    );
-}
-
-@mixin shimmer-effect(
-    $duration: null,
-    $angle: null,
-    $width: null,
-    $opacity: null,
-    $color: null
-) {
-    $resolved-duration: sass(if(sass($duration == null): _effect-token(shimmer-duration); else: $duration));
-    $resolved-angle: sass(if(sass($angle == null): _effect-token(shimmer-angle); else: $angle));
-    $resolved-width: sass(if(sass($width == null): _effect-token(shimmer-width); else: $width));
-    $resolved-opacity: sass(if(sass($opacity == null): _effect-token(shimmer-opacity); else: $opacity));
-    $resolved-color: sass(if(sass($color == null): _effect-token(shimmer-color); else: $color));
-
-    position: relative;
-    overflow: hidden;
-    isolation: isolate;
-
-    @include effect-transition(filter);
-
-    @include _ensure-shimmer-keyframes();
-
-    &::after {
-        content: "";
-        position: absolute;
-        inset: -150%;
-        background: linear-gradient(
-            $resolved-angle,
-            transparent 0%,
-            color-mix(in oklch, #{$resolved-color} 0%, transparent) calc((100% - #{$resolved-width}) / 2),
-            #{$resolved-color} 50%,
-            color-mix(in oklch, #{$resolved-color} 0%, transparent) calc((100% + #{$resolved-width}) / 2),
-            transparent 100%
-        );
-        opacity: $resolved-opacity;
-        animation: #{$shimmer-keyframes-name} #{$resolved-duration} linear infinite;
-        pointer-events: none;
-        mix-blend-mode: screen;
-    }
-
-    @include motion.reduced-motion {
-        &::after {
-            animation-play-state: paused;
-            opacity: calc(#{$resolved-opacity} * 0.7);
-        }
-    }
-}
-
-@mixin button-shine(
-    $duration: null,
-    $angle: null,
-    $width: null,
-    $opacity: null,
-    $shadow: null
-) {
-    $resolved-duration: sass(if(sass($duration == null): _effect-token(shine-duration); else: $duration));
-    $resolved-angle: sass(if(sass($angle == null): _effect-token(shine-angle); else: $angle));
-    $resolved-width: sass(if(sass($width == null): _effect-token(shine-width); else: $width));
-    $resolved-opacity: sass(if(sass($opacity == null): _effect-token(shine-opacity); else: $opacity));
-    $resolved-shadow: sass(if(sass($shadow == null): _effect-token(hover-shadow); else: $shadow));
-
-    position: relative;
-    overflow: hidden;
-    isolation: isolate;
-
-    @include hover-lift(
-        $shadow: $resolved-shadow,
-        $rest-shadow: var(--shadow-sm, #{shadow.$shadow-sm})
-    );
-
-    &::before {
-        content: "";
-        position: absolute;
-        inset-block: -30%;
-        inset-inline: calc(-1 * #{$resolved-width});
-        background: linear-gradient(
-            $resolved-angle,
-            transparent 0%,
-            rgb(255 255 255 / 0) calc((100% - #{$resolved-width}) / 2),
-            rgb(255 255 255 / #{$resolved-opacity}) 50%,
-            rgb(255 255 255 / 0) calc((100% + #{$resolved-width}) / 2),
-            transparent 100%
-        );
-        transform: translate3d(-120%, 0, 0);
-        transition: transform #{$resolved-duration} var(--ease-in-out, #{motion.md3-easing(standard)});
-        pointer-events: none;
-        mix-blend-mode: soft-light;
-    }
-
-    @include utils.when-hover {
-        &::before { transform: translate3d(120%, 0, 0); }
-    }
-
-    @include motion.reduced-motion {
-        &::before {
-            transition-duration: calc(#{$resolved-duration} * 1.5);
-        }
-    }
-}

package/src/scss/advanced/design/_shadow.scss

@@ -1,359 +0,0 @@
-@use "utils" as _;
-
-@use "sass:map";
-@use "sass:string";
-
-//
-// Elevation levels
-$md3-elevation-levels: (
-    0: (),
-    1: (
-        0 1px 2px color-mix(in oklab, var(--md-shadow, #000) 18%, transparent),
-        0 1px 3px 1px color-mix(in oklab, var(--md-shadow, #000) 14%, transparent),
-    ),
-    2: (
-        0 1px 2px color-mix(in oklab, var(--md-shadow, #000) 20%, transparent),
-        0 2px 6px 2px color-mix(in oklab, var(--md-shadow, #000) 16%, transparent),
-    ),
-    3: (
-        0 2px 3px color-mix(in oklab, var(--md-shadow, #000) 22%, transparent),
-        0 4px 8px 3px color-mix(in oklab, var(--md-shadow, #000) 18%, transparent),
-    ),
-    4: (
-        0 3px 4px color-mix(in oklab, var(--md-shadow, #000) 24%, transparent),
-        0 6px 12px 4px color-mix(in oklab, var(--md-shadow, #000) 18%, transparent),
-    ),
-    5: (
-        0 5px 5px color-mix(in oklab, var(--md-shadow, #000) 26%, transparent),
-        0 8px 16px 6px color-mix(in oklab, var(--md-shadow, #000) 22%, transparent),
-    ),
-);
-
-//
-// Shadow to string function
-@function _shadow-to-string($layers) {
-    $result: "";
-
-    @each $layer in $layers {
-        $result: sass(if(sass($result == ""): "#{$layer}"; else: "#{$result}, #{$layer}"));
-    }
-
-    @return sass(if(sass($result == ""): none; else: string.unquote($result)));
-}
-
-//
-// Elevation function
-@function md3-elevation($level: 0) {
-    @if not map.has-key($md3-elevation-levels, $level) {
-        @error "Unknown elevation level `#{$level}`. Available: #{map.keys($md3-elevation-levels)}";
-    }
-
-    $layers: map.get($md3-elevation-levels, $level);
-    @return _shadow-to-string($layers);
-}
-
-//
-// Shadow registries & defaults
-$md3-shadow-aliases: (
-    xs: (level: 0),
-    sm: (level: 1),
-    md: (level: 2),
-    lg: (level: 3),
-    xl: (level: 4),
-    "2xl": (level: 5),
-) !default;
-
-$md3-shadow-static-props: (
-    inset: inset 0 1px 0 color-mix(
-        in oklab,
-        var(
-            --md-shadow,
-            var(--current, var(--color-on-surface, var(--md-on-surface, #1c1b1f)))
-        ) 12%,
-        transparent
-    ),
-    inset-strong: inset 0 2px 6px color-mix(in oklab, var(--md-shadow, #000) 18%, transparent),
-) !default;
-
-$md3-shadow-glow-map: (
-    primary: 0 0 0 1px color-mix(in oklch, #{md3-color(primary)} 24%, transparent),
-    secondary: 0 0 0 1px color-mix(in oklch, #{md3-color(secondary)} 24%, transparent),
-    accent: 0 0 0 1px color-mix(in oklch, #{md3-color(tertiary)} 28%, transparent),
-) !default;
-
-$dynamic-shadow-defaults: (
-    parallax-ref: 600px,
-    parallax-k: 0.01,
-    az-base: 225deg,
-    az-span: 12deg,
-    alt-base: 55deg,
-    alt-span: 6deg,
-    soft-ang: 18deg,
-    umbra-density: 0.32,
-    penumbra-density: 0.18,
-    z-offset: 2,
-    elevation-scale: 2,
-    important: false,
-) !default;
-
-//
-// Shadow helpers
-@function _shadow-remove-prefix($value, $prefix) {
-    $normalized-value: string.to-lower-case(string.unquote("#{$value}"));
-    $normalized-prefix: string.to-lower-case($prefix);
-    $prefix-length: string.length($normalized-prefix);
-
-    @if $prefix-length > 0 and string.slice($normalized-value, 1, $prefix-length) == $normalized-prefix {
-        @return string.slice($normalized-value, $prefix-length + 1);
-    }
-
-    @return $normalized-value;
-}
-
-@function _shadow-token-key($token) {
-    $key: string.to-lower-case(string.unquote("#{$token}"));
-    $key: _shadow-remove-prefix($key, "--");
-    $key: _shadow-remove-prefix($key, "shadow-");
-    @return $key;
-}
-
-@function md3-shadow-fallback($token, $default: null) {
-    $key: _shadow-token-key($token);
-
-    @if map.has-key($md3-shadow-aliases, $key) {
-        $entry: map.get($md3-shadow-aliases, $key);
-
-        @if map.has-key($entry, fallback) {
-            $fallback: map.get($entry, fallback);
-
-            @if $fallback != null {
-                @return $fallback;
-            }
-        }
-
-        @if map.has-key($entry, level) {
-            @return md3-elevation(map.get($entry, level));
-        }
-
-        @if map.has-key($entry, value) {
-            @return map.get($entry, value);
-        }
-    }
-
-    @if map.has-key($md3-shadow-static-props, $key) {
-        @return map.get($md3-shadow-static-props, $key);
-    }
-
-    $glow-key: _shadow-remove-prefix($key, "glow-");
-
-    @if $glow-key != $key and map.has-key($md3-shadow-glow-map, $glow-key) {
-        @return map.get($md3-shadow-glow-map, $glow-key);
-    }
-
-    @if map.has-key($md3-shadow-glow-map, $key) {
-        @return map.get($md3-shadow-glow-map, $key);
-    }
-
-    @if type-of($token) == number {
-        @return md3-elevation($token);
-    }
-
-    @if $default != null {
-        @return $default;
-    }
-
-    @return null;
-}
-
-@function md3-shadow($token, $fallback: null) {
-    $key: _shadow-token-key($token);
-
-    @if map.has-key($md3-shadow-aliases, $key) {
-        $entry: map.get($md3-shadow-aliases, $key);
-
-        @if map.has-key($entry, value) and map.get($entry, value) != null {
-            @return map.get($entry, value);
-        }
-
-        @if map.has-key($entry, level) {
-            @return md3-elevation(map.get($entry, level));
-        }
-    }
-
-    @if map.has-key($md3-shadow-static-props, $key) {
-        @return map.get($md3-shadow-static-props, $key);
-    }
-
-    $glow-key: _shadow-remove-prefix($key, "glow-");
-
-    @if $glow-key != $key and map.has-key($md3-shadow-glow-map, $glow-key) {
-        @return map.get($md3-shadow-glow-map, $glow-key);
-    }
-
-    @if map.has-key($md3-shadow-glow-map, $key) {
-        @return map.get($md3-shadow-glow-map, $key);
-    }
-
-    @if type-of($token) == number {
-        @return md3-elevation($token);
-    }
-
-    @if $fallback != null {
-        @return $fallback;
-    }
-
-    @error "Unknown shadow token `#{$token}`. Available aliases: #{map.keys($md3-shadow-aliases)}; statics: #{map.keys($md3-shadow-static-props)}; glows: #{map.keys($md3-shadow-glow-map)}";
-}
-
-@function md3-shadow-var($token, $fallback: null) {
-    $key: _shadow-token-key($token);
-    $fallback-value: sass(if(sass($fallback == null): md3-shadow-fallback($token); else: $fallback));
-
-    @if $fallback-value == null {
-        $fallback-value: md3-shadow($token);
-    }
-
-    @return string.unquote("var(--shadow-#{$key}, #{$fallback-value})");
-}
-
-@function _shadow-config($overrides) {
-    $overrides-map: sass(if(sass(type-of($overrides) == "map"): $overrides; else: ()));
-    @return map.merge($dynamic-shadow-defaults, $overrides-map);
-}
-
-@function _shadow-config-var($config, $name) {
-    $value: map.get($config, $name);
-
-    @if $value == null {
-        @return string.unquote("var(--#{$name})");
-    }
-
-    @return string.unquote("var(--#{$name}, #{$value})");
-}
-
-//
-// Export elevation vars mixin
-@mixin md3-export-elevation-vars(
-    $aliases: $md3-shadow-aliases,
-    $static-props: $md3-shadow-static-props,
-    $glows: $md3-shadow-glow-map
-) {
-    @each $level, $layers in $md3-elevation-levels {
-        --md-elevation-#{$level}: #{_shadow-to-string($layers)};
-    }
-
-    @each $alias, $entry in $aliases {
-        $value: null;
-
-        @if map.has-key($entry, value) {
-            $value: map.get($entry, value);
-        }
-
-        @if $value == null and map.has-key($entry, level) {
-            $fallback: md3-shadow-fallback($alias);
-            $value: string.unquote("var(--md-elevation-#{map.get($entry, level)}, #{$fallback})");
-        }
-
-        @if $value != null {
-            --shadow-#{$alias}: #{$value};
-        }
-    }
-
-    @each $name, $value in $static-props {
-        --shadow-#{$name}: #{$value};
-    }
-
-    @if $glows != null {
-        @each $name, $value in $glows {
-            --shadow-glow-#{$name}: #{$value};
-        }
-    }
-}
-
-//
-// Shadow application mixins
-@mixin md3-shadow-apply($token, $property: box-shadow, $important: false) {
-    $value: md3-shadow-var($token);
-
-    #{$property}: #{$value}#{sass(if(sass($important): " !important"; else: ""))};
-}
-
-@mixin md3-shadow-layer($token) {
-    @include md3-shadow-apply($token);
-}
-
-//
-// Shadow variables
-$shadow-xs: md3-shadow(xs);
-$shadow-sm: md3-shadow(sm);
-$shadow-md: md3-shadow(md);
-$shadow-lg: md3-shadow(lg);
-$shadow-xl: md3-shadow(xl);
-$shadow-2xl: md3-shadow("2xl");
-
-//
-// Shadow glow variables
-$shadow-glow-primary: md3-shadow(glow-primary);
-$shadow-glow-secondary: md3-shadow(glow-secondary);
-$shadow-glow-accent: md3-shadow(glow-accent);
-
-//
-// UI shadow variables
-$ui-shadow-soft: md3-shadow(md) !default;
-$ui-shadow-elevated: md3-shadow(lg) !default;
-
-//
-// Dynamic drop-shadow mixin
-@mixin dynamic-shadow-drop($overrides: ()) {
-    $config: _shadow-config($overrides);
-
-    $parallax-ref: _shadow-config-var($config, parallax-ref);
-    $parallax-k: _shadow-config-var($config, parallax-k);
-    $az-base: _shadow-config-var($config, az-base);
-    $az-span: _shadow-config-var($config, az-span);
-    $alt-base: _shadow-config-var($config, alt-base);
-    $alt-span: _shadow-config-var($config, alt-span);
-    $soft-ang: _shadow-config-var($config, soft-ang);
-    $umbra-density: _shadow-config-var($config, umbra-density);
-    $penumbra-density: _shadow-config-var($config, penumbra-density);
-    $z-offset: map.get($config, z-offset);
-    $elevation-scale: map.get($config, elevation-scale);
-    $important-flag: map.get($config, important);
-
-    --relate-x: calc(var(--drag-x, 0) + var(--shift-x, 0) - (100cqi / 2));
-    --relate-y: calc(var(--drag-y, 0) + var(--shift-y, 0) - (100cqb / 2));
-
-    --relNX: calc(clamp(-1, (var(--relate-x, 0) / #{$parallax-ref}), 1));
-    --relNY: calc(clamp(-1, (var(--relate-y, 0) / #{$parallax-ref}), 1));
-
-    --light-az:  calc(#{$az-base} + var(--relNX) * #{$az-span});
-    --light-alt: calc(#{$alt-base} + var(--relNY) * #{$alt-span});
-
-    --elev: calc((var(--z-index, 0) + #{$z-offset}) * #{$elevation-scale});
-
-    --cotA: calc(1 / max(0.001, tan(var(--light-alt))));
-    --L: calc(abs(var(--elev)) * var(--cotA));
-
-    --dx: calc(cos(var(--light-az)) * var(--L) * sign(var(--elev)));
-    --dy: calc(sin(var(--light-az)) * var(--L) * sign(var(--elev)));
-
-    --sx: calc((var(--dx) + var(--relate-x) * #{$parallax-k}) * 1px);
-    --sy: calc((var(--dy) + var(--relate-y) * #{$parallax-k}) * 1px);
-
-    --blurC: calc(max(0.5, abs(var(--elev)) * tan(#{$soft-ang})));
-    --blurU: calc(var(--blurC) * 1.6);
-    --blurP: calc(var(--blurC) * 2.8);
-
-    --spreadC: calc(abs(var(--elev)) * 0.04);
-    --spreadU: calc(abs(var(--elev)) * 0.10);
-    --spreadP: calc(var(--spreadU) * 1.2);
-
-    --alphaC: calc(clamp(0.08, (#{$umbra-density} * 0.9) / (1 + abs(var(--elev)) * 0.30), 0.40));
-    --alphaU: calc(clamp(0.06, #{$umbra-density} / sqrt(1 + abs(var(--elev)) * 0.15), 0.35));
-    --alphaP: calc(clamp(0.04, #{$penumbra-density} / sqrt(1 + abs(var(--elev)) * 0.08), 0.25));
-
-    filter:
-        drop-shadow(calc(var(--sx) * 0.15) calc(var(--sy) * 0.15) calc(var(--blurC) * 1px) #{"rgb(0 0 0 / var(--alphaC))"})
-        drop-shadow(var(--sx) var(--sy) calc(var(--blurU) * 1px) #{"rgb(0 0 0 / var(--alphaU))"})
-        drop-shadow(var(--sx) var(--sy) calc(var(--blurP) * 1px) #{"rgb(0 0 0 / var(--alphaP))"})#{sass(if(sass($important-flag): " !important"; else: ""))};
-}

package/src/scss/advanced/design/_surfaces.scss

@@ -1,76 +0,0 @@
-@use "./layout" as layout;
-@use "./colorize" as colorize;
-
-//
-@mixin card-base() {
-    display: grid;
-    gap: var(--card-gap);
-    padding: var(--card-padding);
-    border-radius: var(--card-radius);
-    transition: var(--transition-colors), var(--transition-transform);
-}
-
-//
-@mixin surface-base() {
-    display: grid;
-    gap: var(--surface-gap);
-    padding: var(--surface-padding);
-    border-radius: var(--surface-radius);
-    border: var(--surface-border);
-}
-
-//
-@mixin panel-base {
-    display: grid;
-    gap: var(--gap-md);
-    padding: var(--padding-xl);
-    border-radius: var(--radius-lg);
-    border: 1px solid;
-}
-
-//
-@mixin panel-header {
-    background-color: var(--panel-background);
-    color: var(--panel-text-color);
-    padding: var(--panel-padding);
-    border-radius: var(--panel-radius);
-    border: var(--panel-border);
-}
-
-//
-@mixin accordion-base {
-    border-radius: var(--accordion-radius);
-    overflow: hidden;
-    transition: var(--accordion-transition);
-
-    &[open] {
-        --color-shade: var(--accordion-open-color-shade);
-        border: var(--accordion-open-border);
-    }
-}
-
-//
-@mixin empty-state {
-    padding: var(--empty-state-padding);
-    border-radius: var(--empty-state-radius);
-    border: var(--empty-state-border);
-    text-align: center;
-    min-block-size: var(--empty-state-min-block-size);
-
-    @include layout.grid-center;
-}
-
-//
-@mixin nav-item {
-    padding: var(--nav-padding);
-    border-radius: var(--nav-radius);
-    text-decoration: none;
-    gap: var(--nav-gap);
-
-    @include layout.flex-between;
-
-    ui-icon {
-        --icon-size: var(--icon-size-md);
-        --icon-color: currentColor;
-    }
-}