@fest-lib/veela 0.1.1

package/package.json

@@ -0,0 +1,83 @@
+{
+    "name": "@fest-lib/veela",
+    "description": "Veela CSS framework and runtime loaders (fest-lib)",
+    "version": "0.1.1",
+    "license": "MIT",
+    "type": "module",
+    "sideEffects": true,
+    "engines": {
+        "node": ">=20"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/fest-live/veela.css.git"
+    },
+    "bugs": {
+        "url": "https://github.com/fest-live/veela.css/issues"
+    },
+    "homepage": "https://github.com/fest-live/veela.css#readme",
+    "keywords": [
+        "fest",
+        "fest-lib",
+        "css",
+        "scss",
+        "design-system"
+    ],
+    "files": [
+        "dist",
+        "src/scss",
+        "LICENSE"
+    ],
+    "main": "./dist/veela.js",
+    "module": "./dist/veela.js",
+    "exports": {
+        ".": {
+            "import": "./dist/veela.js",
+            "default": "./dist/veela.js"
+        },
+        "./scss/*": "./src/scss/*",
+        "./package.json": "./package.json"
+    },
+    "peerDependencies": {
+        "@fest-lib/core": "^0.1.0",
+        "@fest-lib/dom": "^0.1.0"
+    },
+    "scripts": {
+        "test": "npm run test:puppeteer",
+        "test:puppeteer": "node test/puppeteer/run.mjs",
+        "test:browser": "npm run demo",
+        "dev": "vite --host 0.0.0.0",
+        "demo": "vite",
+        "watch": "vite build --watch",
+        "build": "vite build --config vite.config.js && npm run docs && npm run docs:md",
+        "build:publish": "FEST_NPM_IMPORTS=1 vite build --config vite.config.js",
+        "prepack": "npm run build:publish",
+        "docs": "typedoc ./src/scss/index.ts --options ./typedoc.json --out ./docs --tsconfig ./tsconfig.json --excludeExternals --excludePrivate --excludeProtected --skipErrorChecking",
+        "docs:clean": "rm -rf ./docs && typedoc --options ./typedoc.json",
+        "docs:md": "typedoc --options ./typedoc.md.json",
+        "docs:md:clean": "rm -rf ./docs-md && typedoc --options ./typedoc.md.json",
+        "preview": "vite preview",
+        "release": "PUPPETEER_SKIP_DOWNLOAD=1 npm run build:publish && npm publish --access public --ignore-scripts",
+        "publish": "npm run release"
+    },
+    "devDependencies": {
+        "cssnano": ">=7.1.0",
+        "cssnano-preset-advanced": ">=7.0.7",
+        "culori": ">=4.0.2",
+        "postcss": ">=8.5.6",
+        "postcss-discard-duplicates": ">=7.0.2",
+        "postcss-preset-env": ">=10.2.4",
+        "puppeteer": ">=24.42.0",
+        "sass": ">=1.93.3",
+        "typedoc": "^0.28.20",
+        "typedoc-plugin-markdown": "^4.12.0",
+        "typescript": ">=6.0.0-beta",
+        "vite": ">=8.0.7",
+        "vite-plugin-dynamic-import": ">=1.6.0",
+        "vite-plugin-external": ">=6.2.2",
+        "vite-plugin-optimizer": ">=1.4.3"
+    }
+}

package/src/scss/_layers.scss

@@ -0,0 +1,16 @@
+/**
+ * Veela CSS Layer Order
+ *
+ * Defines the cascade layer order for all veela style variants.
+ * Imported by core/basic/advanced/beercss entry points.
+ */
+
+@layer
+    ux-normalize,
+    ux-tokens,
+    ux-base,
+    ux-layout,
+    ux-components,
+    ux-utilities,
+    ux-theme,
+    ux-overrides;

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

@@ -0,0 +1,317 @@
+@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 {
+        --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 {
+        --transition-#{$name}: #{_transition-definition($config)};
+    }
+
+    @each $alias, $target in $aliases {
+        @if 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);
+    }
+}