@fest-lib/veela 0.1.1

package/src/scss/advanced/design/_design-tokens.scss

@@ -0,0 +1,118 @@
+/**
+ * Design Tokens - Centralized Constants
+ * 
+ * Consolidates design-system-level constants used across buttons, forms,
+ * and other interactive elements.
+ * 
+ * Contains:
+ * - State opacity values (hover, press, focus, disabled, drag)
+ * - Motion/timing defaults (duration, easing)
+ * - Shared styling constants
+ */
+
+@use "sass:map";
+
+// ============================================================================
+// State Opacity Tokens
+// ============================================================================
+// Used across buttons, forms, inputs, and interactive elements
+
+$state-opacity-hover: 0.08 !default;
+$state-opacity-press: 0.12 !default;
+$state-opacity-focus: 0.12 !default;
+$state-opacity-disabled: 0.38 !default;
+$state-opacity-drag: 0.16 !default;
+
+$state-opacity-map: (
+    hover: $state-opacity-hover,
+    press: $state-opacity-press,
+    focus: $state-opacity-focus,
+    disabled: $state-opacity-disabled,
+    drag: $state-opacity-drag,
+) !default;
+
+// ============================================================================
+// Motion/Timing Tokens
+// ============================================================================
+// Used for transitions on interactive elements
+
+$duration-fast: 140ms !default;
+$duration-normal: 160ms !default;
+$duration-slow: 200ms !default;
+
+$motion-timing-map: (
+    fast: $duration-fast,
+    normal: $duration-normal,
+    slow: $duration-slow,
+) !default;
+
+$ease-out: cubic-bezier(0, 0, 0.2, 1) !default;
+$ease-in: cubic-bezier(0.4, 0, 1, 1) !default;
+$ease-in-out: cubic-bezier(0.4, 0, 0.2, 1) !default;
+
+// ============================================================================
+// Button & Form Styling Tokens
+// ============================================================================
+
+$button-gap: var(--gap-sm) !default;
+$button-padding-y: var(--padding-sm) !default;
+$button-padding-x: var(--padding-lg) !default;
+$button-radius: var(--radius-full) !default;
+$button-min-height: fit-content !default;
+
+$input-gap: var(--space-sm) !default;
+$input-padding: var(--padding-sm) !default;
+$input-padding-x: var(--padding-md) !default;
+
+// ============================================================================
+// Mixin: Export state opacity CSS variables
+// ============================================================================
+
+///
+/// Exports state opacity values as CSS custom properties.
+/// Centralizes opacity values used across interactive elements.
+///
+/// @param {map} $map - Opacity map (default: $state-opacity-map)
+///
+@mixin export-state-opacity(
+    $map: $state-opacity-map
+) {
+    @each $state, $value in $map {
+        --state-opacity-#{$state}: #{$value};
+    }
+}
+
+// ============================================================================
+// Mixin: Export motion timing CSS variables
+// ============================================================================
+
+///
+/// Exports motion timing values as CSS custom properties.
+/// Centralizes duration and easing used for transitions.
+///
+/// @param {map} $timing-map - Timing map (default: $motion-timing-map)
+///
+@mixin export-motion-timing(
+    $timing-map: $motion-timing-map
+) {
+    @each $type, $duration in $timing-map {
+        --duration-#{$type}: #{$duration};
+    }
+
+    --ease-out: #{$ease-out};
+    --ease-in: #{$ease-in};
+    --ease-in-out: #{$ease-in-out};
+}
+
+// ============================================================================
+// Mixin: Export all design tokens
+// ============================================================================
+
+///
+/// Convenience mixin to export all design tokens at once.
+/// Useful for setting up root or component-level defaults.
+///
+@mixin export-design-tokens() {
+    @include export-state-opacity();
+    @include export-motion-timing();
+}

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

@@ -0,0 +1,275 @@
+@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);
+        }
+    }
+}