@fest-lib/veela 0.1.20 → 1.0.1

package/src/scss/advanced/animation/_motion.scss

@@ -1,323 +0,0 @@
-@use "sass:list";
-@use "sass:map";
-@use "sass:math";
-@use "sass:meta";
-@use "sass:string";
-
-//
-@use "utils" as _;
-
-//
-// Motion durations
-$md3-motion-durations: (
-    fast: 120ms,
-    normal: 160ms,
-    slow: 220ms,
-    long: 320ms,
-    extra-long: 420ms,
-);
-
-
-//
-// Motion easing
-$md3-motion-easing: (
-    standard: cubic-bezier(0.4, 0, 0.2, 1),
-    emphasized: cubic-bezier(0.2, 0, 0, 1),
-    decelerate: cubic-bezier(0, 0, 0.2, 1),
-    accelerate: cubic-bezier(0.4, 0, 1, 1),
-    bounce: cubic-bezier(0.34, 1.56, 0.64, 1),
-);
-
-$md3-easing-aliases: (
-    out: standard,
-    "in-out": decelerate,
-    "in": accelerate,
-);
-
-$md3-transition-definitions: (
-    colors: (
-        properties: (color, background-color, border-color),
-        duration: normal,
-        easing: out,
-    ),
-    transform: (
-        properties: transform,
-        duration: slow,
-        easing: "in-out",
-    ),
-    opacity: (
-        properties: opacity,
-        duration: fast,
-        easing: out,
-    ),
-    all: (
-        properties: all,
-        duration: normal,
-        easing: out,
-    ),
-);
-
-$md3-transition-aliases: (
-    fast: opacity,
-    normal: colors,
-    slow: transform,
-);
-
-
-//
-// Easing function
-@function md3-easing($token: standard) {
-    @return _.md3-fetch($md3-motion-easing, $token, "easing token");
-}
-
-
-//
-// Duration function
-@function md3-duration($token: normal) {
-    @return _.md3-fetch($md3-motion-durations, $token, "duration token");
-}
-
-//
-// Motion helper functions
-@function duration-var($token: normal) {
-    $value: _.md3-fetch($md3-motion-durations, $token, "duration token");
-    @return var(--duration-#{$token}, #{$value});
-}
-
-@function easing-var($token: standard) {
-    @if map.has-key($md3-motion-easing, $token) {
-        $value: _.md3-fetch($md3-motion-easing, $token, "easing token");
-        @return var(--ease-#{$token}, #{$value});
-    }
-
-    @if map.has-key($md3-easing-aliases, $token) {
-        $resolved: map.get($md3-easing-aliases, $token);
-        $value: _.md3-fetch($md3-motion-easing, $resolved, "easing token");
-        @return var(--ease-#{$token}, var(--ease-#{$resolved}, #{$value}));
-    }
-
-    @error "Unknown easing token `#{$token}`.";
-}
-
-@function _transition-props($properties) {
-    @return sass(if(sass(meta.type-of($properties) == "list"): list.join($properties, ", "); else: $properties));
-}
-
-@function _transition-definition($config) {
-    $properties: map.get($config, properties);
-    $duration-token: map.get($config, duration);
-    $easing-token: map.get($config, easing);
-    $delay: map.get($config, delay);
-
-    @if $properties == null {
-        $properties: all;
-    }
-
-    @if $duration-token == null {
-        $duration-token: normal;
-    }
-
-    @if $easing-token == null {
-        $easing-token: standard;
-    }
-
-    $sequence: ();
-    $sequence: list.append($sequence, _transition-props($properties), "space");
-    $sequence: list.append($sequence, duration-var($duration-token), "space");
-    $sequence: list.append($sequence, easing-var($easing-token), "space");
-
-    @if $delay != null {
-        $sequence: list.append($sequence, $delay, "space");
-    }
-
-    @return list.join($sequence, " ");
-}
-
-@mixin _export-duration-vars($durations) {
-    @each $token, $value in $durations {
-        --md3-duration-#{$token}: #{$value};
-        @if $token != fast and $token != normal and $token != slow {
-            --duration-#{$token}: #{$value};
-        }
-    }
-}
-
-@mixin _export-easing-vars($easing, $aliases) {
-    @each $token, $value in $easing {
-        --ease-#{$token}: #{$value};
-    }
-
-    @each $alias, $target in $aliases {
-        @if map.has-key($easing, $target) {
-            --ease-#{$alias}: var(--ease-#{$target});
-        }
-    }
-}
-
-@mixin _export-transition-vars($definitions, $aliases) {
-    @each $name, $config in $definitions {
-        --md3-transition-#{$name}: #{_transition-definition($config)};
-        @if $name != fast and $name != normal and $name != slow {
-            --transition-#{$name}: #{_transition-definition($config)};
-        }
-    }
-
-    @each $alias, $target in $aliases {
-        @if $alias != fast and $alias != normal and $alias != slow and map.has-key($definitions, $target) {
-            --transition-#{$alias}: var(--transition-#{$target});
-        }
-    }
-}
-
-//
-// Transition variables
-$transition-fast: md3-duration(fast);
-$transition-base: md3-duration(normal);
-$transition-slow: md3-duration(slow);
-$transition-bounce: md3-easing(bounce);
-
-//
-// UI duration variables
-$ui-duration-fast: md3-duration(fast) !default;
-$ui-duration-standard: md3-duration(normal) !default;
-$ui-ease-standard: md3-easing(standard) !default;
-
-//
-// Export motion vars mixin
-@mixin md3-export-motion-vars(
-    $durations: $md3-motion-durations,
-    $easing: $md3-motion-easing,
-    $easing-aliases: $md3-easing-aliases,
-    $transition-definitions: $md3-transition-definitions,
-    $transition-aliases: $md3-transition-aliases
-) {
-    // =============================================================================
-    // ANIMATIONS & TRANSITIONS
-    // =============================================================================
-
-    @include _export-duration-vars($durations);
-    @include _export-easing-vars($easing, $easing-aliases);
-    @include _export-transition-vars($transition-definitions, $transition-aliases);
-
-    --transition-delay: 0s;
-}
-
-//
-// Motion animation mixin
-@mixin motion-animation(
-    $name,
-    $duration: duration-var(normal),
-    $timing: easing-var(out),
-    $delay: null,
-    $fill: null,
-    $iteration: null,
-    $direction: null,
-    $state: null
-) {
-    $sequence: ($name, $duration, $timing);
-
-    @if $delay != null {
-        $sequence: list.append($sequence, $delay, "space");
-    }
-
-    @if $iteration != null {
-        $sequence: list.append($sequence, $iteration, "space");
-    }
-
-    @if $direction != null {
-        $sequence: list.append($sequence, $direction, "space");
-    }
-
-    @if $fill != null {
-        $sequence: list.append($sequence, $fill, "space");
-    }
-
-    @if $state != null {
-        $sequence: list.append($sequence, $state, "space");
-    }
-
-    animation: $sequence;
-}
-
-//
-// Fade in mixin
-@mixin fade-in($duration: duration-var(normal), $timing: easing-var(out), $delay: null, $fill: null, $iteration: null, $direction: null, $state: null) {
-    @include motion-animation(fade-in, $duration, $timing, $delay, $fill, $iteration, $direction, $state);
-}
-
-//
-// Slide up mixin
-@mixin slide-up($duration: duration-var(normal), $timing: easing-var(out), $delay: null, $fill: null, $iteration: null, $direction: null, $state: null) {
-    @include motion-animation(slide-up, $duration, $timing, $delay, $fill, $iteration, $direction, $state);
-}
-
-//
-// Scale in mixin
-@mixin scale-in($duration: duration-var(fast), $timing: easing-var(bounce), $delay: null, $fill: null, $iteration: null, $direction: null, $state: null) {
-    @include motion-animation(scale-in, $duration, $timing, $delay, $fill, $iteration, $direction, $state);
-}
-
-//
-// Focus ring mixin
-@mixin focus-ring($tint: var(--outline-tint), $thickness: 2px, $offset: 2px) {
-    &:focus-visible {
-        outline: $thickness solid oklch(
-            from --c2-on-surface(
-                $tint,
-                var(--current, var(--color-on-surface, var(--md-on-surface, #1c1b1f)))
-            ) l c h / var(--outline-opacity)
-        );
-        outline-offset: $offset;
-    }
-}
-
-//
-// Reduced motion mixin
-@mixin reduced-motion($preference: reduce) {
-    @media (prefers-reduced-motion: #{$preference}) {
-        @content;
-    }
-}
-
-//
-// High contrast mixin
-@mixin high-contrast($preference: more) {
-    @media (prefers-contrast: #{$preference}) {
-        @content;
-    }
-}
-
-//
-// Transition mixin
-@mixin transition($properties: all, $duration: null, $timing: null, $delay: null) {
-    & {
-        $prop-list: _transition-props($properties);
-        --transition-props: #{$prop-list};
-
-        @if $duration != null {
-            @if map.has-key($md3-motion-durations, $duration) {
-                --transition-duration: #{duration-var($duration)};
-            } @else {
-                --transition-duration: #{$duration};
-            }
-        }
-
-        @if $timing != null {
-            @if map.has-key($md3-motion-easing, $timing) or map.has-key($md3-easing-aliases, $timing) {
-                --transition-timing: #{easing-var($timing)};
-            } @else {
-                --transition-timing: #{$timing};
-            }
-        }
-
-        @if $delay != null {
-            --transition-delay: #{$delay};
-        }
-
-        transition:
-            var(--transition-props)
-            var(--transition-duration, #{duration-var(normal)})
-            var(--transition-timing, #{easing-var(out)})
-            var(--transition-delay, 0s);
-    }
-}

package/src/scss/advanced/color/_color.scss

@@ -1,328 +0,0 @@
-@use "sass:list";
-@use "sass:map";
-@use "sass:math";
-@use "sass:meta";
-@use "sass:string";
-
-//
-@use "utils" as _;
-
-//
-// Surface role map
-$md3-surface-role-map: (
-    primary: on-primary,
-    primary-container: on-primary-container,
-    primary-fixed: on-primary-fixed,
-    primary-fixed-dim: on-primary-fixed,
-    secondary: on-secondary,
-    secondary-container: on-secondary-container,
-    secondary-fixed: on-secondary-fixed,
-    secondary-fixed-dim: on-secondary-fixed,
-    tertiary: on-tertiary,
-    tertiary-container: on-tertiary-container,
-    tertiary-fixed: on-tertiary-fixed,
-    tertiary-fixed-dim: on-tertiary-fixed,
-    error: on-error,
-    error-container: on-error-container,
-    surface: on-surface,
-    surface-dim: on-surface,
-    surface-bright: on-surface,
-    surface-variant: on-surface-variant,
-    surface-container-lowest: on-surface,
-    surface-container-low: on-surface,
-    surface-container: on-surface,
-    surface-container-high: on-surface,
-    surface-container-highest: on-surface,
-    background: on-background,
-    inverse-surface: inverse-on-surface,
-    outline: on-surface,
-    outline-variant: on-surface,
-    surface-tint: on-surface,
-);
-
-//
-// State opacity
-$md3-state-opacity: (
-    hover: 0.08,
-    focus: 0.12,
-    focus-visible: 0.12,
-    focus-ring: 0.22,
-    press: 0.12,
-    drag: 0.16,
-    selected: 0.16,
-    disabled: 0.38,
-    icon: 0.54,
-);
-
-//
-// State function
-@function md3-state($state) {
-    @return _.md3-fetch($md3-state-opacity, $state, "state");
-}
-
-//
-// Variable function
-@function md3-var($role) {
-    @return "--md-#{$role}";
-}
-
-//
-// Material role map
-$material-role-map: (
-    primary: "--md-sys-color-primary",
-    on-primary: "--md-sys-color-on-primary",
-    primary-container: "--md-sys-color-primary-container",
-    on-primary-container: "--md-sys-color-on-primary-container",
-    secondary: "--md-sys-color-secondary",
-    on-secondary: "--md-sys-color-on-secondary",
-    secondary-container: "--md-sys-color-secondary-container",
-    on-secondary-container: "--md-sys-color-on-secondary-container",
-    tertiary: "--md-sys-color-tertiary",
-    on-tertiary: "--md-sys-color-on-tertiary",
-    tertiary-container: "--md-sys-color-tertiary-container",
-    on-tertiary-container: "--md-sys-color-on-tertiary-container",
-    error: "--md-sys-color-error",
-    on-error: "--md-sys-color-on-error",
-    error-container: "--md-sys-color-error-container",
-    on-error-container: "--md-sys-color-on-error-container",
-    surface: "--md-sys-color-surface",
-    on-surface: "--md-sys-color-on-surface",
-    surface-variant: "--md-sys-color-surface-variant",
-    on-surface-variant: "--md-sys-color-on-surface-variant",
-    outline: "--md-sys-color-outline",
-    outline-variant: "--md-sys-color-outline-variant",
-    background: "--md-sys-color-background",
-    on-background: "--md-sys-color-on-background",
-    inverse-surface: "--md-sys-color-inverse-surface",
-    inverse-on-surface: "--md-sys-color-inverse-on-surface",
-    inverse-primary: "--md-sys-color-inverse-primary",
-    surface-tint: "--md-sys-color-surface-tint",
-);
-
-//
-// Material mode suffix
-$material-mode-suffix: (
-    light: "",
-    dark: "-dark",
-);
-
-//
-// Helpers
-@function md3-tone-scale($factor, $direction: "--interaction-tone-direction") {
-    @return calc(#{$factor} * var(#{$direction}, 1));
-}
-
-@function md3-shadow-mix($base-property, $weight, $shadow-property: "--md-shadow") {
-    $base-weight: math.percentage($weight);
-    $shadow-weight: math.percentage(1 - $weight);
-
-    @return color-mix(in oklch, var(#{$base-property}) #{$base-weight}, var(#{$shadow-property}) #{$shadow-weight});
-}
-
-@function md3-resolve($overrides, $property, $fallback) {
-    @if meta.type-of($overrides) == "map" and map.has-key($overrides, $property) {
-        @return map.get($overrides, $property);
-    }
-
-    @return $fallback;
-}
-
-@mixin md3-emit-properties($properties, $overrides) {
-    @each $property, $value in $properties {
-        #{$property}: #{md3-resolve($overrides, $property, $value)};
-    }
-}
-
-//
-// Layer variables
-$md3-backdrop-filters: (
-    "--backdrop-blur-subtle": blur(6px) saturate(110%),
-    "--backdrop-blur-default": blur(12px) saturate(120%),
-    "--backdrop-blur-strong": blur(18px) saturate(140%),
-);
-
-$md3-surface-opacity-levels: (
-    "--surface-opacity-subtle": 0.02,
-    "--surface-opacity-muted": 0.04,
-    "--surface-opacity-default": 0.08,
-    "--surface-opacity-emphasis": 0.12,
-    "--surface-opacity-strong": 0.16,
-);
-
-$md3-contrast-opacity-levels: (
-    "--contrast-opacity-subtle": 0.04,
-    "--contrast-opacity-muted": 0.08,
-    "--contrast-opacity-default": 0.12,
-    "--contrast-opacity-emphasis": 0.16,
-    "--contrast-opacity-strong": 0.24,
-);
-
-$md3-text-tint-levels: (
-    "--text-tint-primary": 0,
-    "--text-tint-secondary": 0.04,
-    "--text-tint-muted": 0.06,
-    "--text-tint-disabled": 0.12,
-);
-
-$md3-border-opacity-levels: (
-    "--border-opacity-subtle": 0.14,
-    "--border-opacity-default": 0.2,
-    "--border-opacity-emphasis": 0.24,
-    "--border-opacity-strong": 0.4,
-    "--border-opacity-dashed": 0.18,
-);
-
-$md3-outline-properties: (
-    "--outline-opacity": 0.4,
-    "--outline-tint": 0,
-);
-
-$md3-scrollbar-properties: (
-    "--scrollbar-opacity": 0.4,
-    "--scrollbar-tint": 0.1,
-);
-
-//
-// Interaction variables
-$md3-interaction-lift-factors: (
-    "--hover-lift": 0.03,
-    "--active-lift": 0.05,
-    "--focus-lift": 0.02,
-);
-
-$md3-interaction-properties: (
-    "--selection-opacity": 0.1,
-);
-
-//
-// State opacity custom properties
-$md3-state-opacity-properties: (
-    "--state-opacity-hover": hover,
-    "--state-opacity-focus": focus,
-    "--state-opacity-focus-visible": focus-visible,
-    "--state-opacity-focus-ring": focus-ring,
-    "--state-opacity-press": press,
-    "--state-opacity-drag": drag,
-    "--state-opacity-selected": selected,
-    "--state-opacity-disabled": disabled,
-    "--state-opacity-icon": icon,
-);
-
-//
-// Semantic palettes
-$md3-spectrum-colors: (
-    "--color-red": oklch(0.5 0.2 30 / 1),
-    "--color-orange": oklch(0.5 0.2 80 / 1),
-    "--color-yellow": oklch(0.7 0.2 100 / 1),
-    "--color-green": oklch(0.5 0.2 140 / 1),
-    "--color-blue": oklch(0.5 0.2 260 / 1),
-    "--color-purple": oklch(0.5 0.2 320 / 1),
-);
-
-$md3-semantic-base-colors: (
-    "--color-primary": #2c3e50,
-    "--color-secondary": #34495e,
-    "--color-accent": #3498db,
-    "--color-success": #2cda9d,
-    "--color-warning": #ffb347,
-    "--color-danger": #ff6b6b,
-    "--color-info": #17a2b8,
-);
-
-$md3-semantic-aliases: (
-    "--color-error": var(--color-danger),
-);
-
-$md3-semantic-tones: (
-    "--color-success-dark": (base: "--color-success", weight: 0.4),
-    "--color-warning-dark": (base: "--color-warning", weight: 0.38),
-    "--color-danger-dark": (base: "--color-danger", weight: 0.42),
-    "--color-error-dark": (base: "--color-danger", weight: 0.42),
-);
-
-//
-// Layer mixins
-@mixin md3-export-backdrop-filters($overrides) {
-    @include md3-emit-properties($md3-backdrop-filters, $overrides);
-}
-
-@mixin md3-export-layer-opacities($overrides) {
-    @include md3-emit-properties($md3-surface-opacity-levels, $overrides);
-    @include md3-emit-properties($md3-contrast-opacity-levels, $overrides);
-    @include md3-emit-properties($md3-text-tint-levels, $overrides);
-    @include md3-emit-properties($md3-border-opacity-levels, $overrides);
-    @include md3-emit-properties($md3-outline-properties, $overrides);
-    @include md3-emit-properties($md3-scrollbar-properties, $overrides);
-}
-
-@mixin md3-export-state-opacities($overrides) {
-    @each $property, $state in $md3-state-opacity-properties {
-        #{$property}: #{md3-resolve($overrides, $property, md3-state($state))};
-    }
-}
-
-@mixin md3-export-interaction-tuning($overrides) {
-    --interaction-tone-direction: #{md3-resolve($overrides, "--interaction-tone-direction", 1)};
-
-    @each $property, $factor in $md3-interaction-lift-factors {
-        #{$property}: #{md3-resolve($overrides, $property, md3-tone-scale($factor))};
-    }
-
-    @include md3-emit-properties($md3-interaction-properties, $overrides);
-}
-
-@mixin md3-export-semantic-colors($overrides) {
-    @include md3-emit-properties($md3-spectrum-colors, $overrides);
-    @include md3-emit-properties($md3-semantic-base-colors, $overrides);
-    @include md3-emit-properties($md3-semantic-aliases, $overrides);
-
-    @each $property, $config in $md3-semantic-tones {
-        $base: map.get($config, base);
-        $weight: map.get($config, weight);
-        #{$property}: #{md3-resolve($overrides, $property, md3-shadow-mix($base, $weight))};
-    }
-}
-
-//
-// Export state vars mixin
-@mixin md3-export-state-vars($overrides: ()) {
-    $config: if(sass(meta.type-of($overrides) == "map"): $overrides; else: ());
-
-    @include md3-export-backdrop-filters($config);
-    @include md3-export-layer-opacities($config);
-    @include md3-export-state-opacities($config);
-    @include md3-export-interaction-tuning($config);
-    @include md3-export-semantic-colors($config);
-}
-
-//
-// Material color utilities theme mixin
-@mixin material-color-utilities-theme($mode, $selector) {
-    $suffix: map.get($material-mode-suffix, $mode);
-
-    #{$selector} {
-        @each $role, $source in $material-role-map {
-            #{md3-var($role)}: var(#{$source}#{$suffix}, #{md3-color($role, $mode)});
-        }
-    }
-}
-
-//
-// Material color utilities remap mixin
-@mixin material-color-utilities-remap($system-selector: ":where(:root, :host, :scope, body, div, section, html)") {
-    @at-root {
-        @layer md3.mcu {
-            #{$system-selector}:not([data-scheme]):not([data-theme]),
-            #{$system-selector}:where([data-scheme="auto"], [data-theme="auto"]),
-            #{$system-selector}:where([data-scheme="system"], [data-theme="system"])
-            {
-                @media (prefers-color-scheme: light) { @include material-color-utilities-theme(light, "&"); }
-                @media (prefers-color-scheme: dark)  { @include material-color-utilities-theme(dark, "&"); }
-            }
-
-            //
-            #{$system-selector}:where([data-theme="dark"] , [data-scheme="dark"] ) { @include material-color-utilities-theme(dark , "&"); }
-            #{$system-selector}:where([data-theme="light"], [data-scheme="light"]) { @include material-color-utilities-theme(light, "&"); }
-        }
-    }
-}