@fest-lib/veela 0.1.20 → 1.0.1

package/src/scss/advanced/theme/_variants.scss

@@ -1,354 +0,0 @@
-@use "veela-lib" as *;
-
-//
-@mixin validation-state($color, $border-opacity: var(--border-opacity-strong), $bg-opacity: 0.04) {
-    border-color: oklch(from $color l c h / $border-opacity);
-    background-color: oklch(from $color l c h / $bg-opacity);
-}
-
-//
-@mixin validation-warning { @include validation-state(var(--color-warning)); }
-@mixin validation-success { @include validation-state(var(--color-success)); }
-@mixin validation-error   { @include validation-state(var(--color-error)); }
-
-// Dedicated colorization utility classes
-// These classes apply semantic color variants and states to elements
-@layer ux-colors {
-
-    // =============================================================================
-    // INPUT STATE VARIANTS
-    // =============================================================================
-
-    :where(input, textarea, select) {
-        // Success state
-        &.state-success,
-        &.is-success,
-        &[data-state="success"] {
-            --current: var(--color-success);
-            @include validation-success;
-        }
-
-        // Warning state
-        &.state-warning,
-        &.is-warning,
-        &[data-state="warning"] {
-            --current: var(--color-warning);
-            @include validation-warning;
-        }
-
-        // Error state
-        &.state-error,
-        &.is-error,
-        &.state-invalid,
-        &.is-invalid,
-        &[data-state="error"],
-        &[data-state="invalid"] {
-            --current: var(--color-error, var(--color-danger));
-            @include validation-error;
-        }
-
-        // Valid state
-        &.state-valid,
-        &.is-valid,
-        &[data-state="valid"] {
-            --current: var(--color-success);
-            @include validation-success;
-        }
-    }
-
-
-    // =============================================================================
-    // COLOR VARIANT CLASSES
-    // =============================================================================
-
-    .color-primary { --current: var(--color-primary); }
-    .color-secondary { --current: var(--color-secondary); }
-    .color-accent { --current: var(--color-accent); }
-    .color-success { --current: var(--color-success); }
-    .color-warning { --current: var(--color-warning); }
-    .color-danger { --current: var(--color-danger); }
-    .color-info { --current: var(--color-info); }
-
-    // =============================================================================
-    // SURFACE COLORIZATION CLASSES
-    // =============================================================================
-
-    .surface {
-        @include solid-colorize("&", ("shade": var(--surface-opacity-default), "tint": 0.0, "scope": "selector"));
-    }
-
-    .surface-subtle {
-        @include solid-colorize("&", ("shade": var(--surface-opacity-subtle), "tint": 0.0, "scope": "selector"));
-    }
-
-    .surface-muted {
-        @include solid-colorize("&", ("shade": var(--surface-opacity-muted), "tint": 0.0, "scope": "selector"));
-    }
-
-    .surface-emphasis {
-        @include solid-colorize("&", ("shade": var(--surface-opacity-emphasis), "tint": 0.0, "scope": "selector"));
-    }
-
-    .surface-strong {
-        @include solid-colorize("&", ("shade": var(--surface-opacity-strong), "tint": 0.0, "scope": "selector"));
-    }
-
-    // =============================================================================
-    // INTERACTIVE SURFACE CLASSES
-    // =============================================================================
-
-    .surface-interactive {
-        @include surface-interactive(var(--surface-opacity-default));
-    }
-
-    .surface-interactive-subtle {
-        @include surface-interactive(var(--surface-opacity-subtle));
-    }
-
-    .surface-interactive-emphasis {
-        @include surface-interactive(var(--surface-opacity-emphasis));
-    }
-
-
-    // =============================================================================
-    // TEXT COLOR CLASSES
-    // =============================================================================
-
-    .text-primary {
-        @include text-color(var(--text-tint-primary));
-    }
-
-    .text-secondary {
-        @include text-color(var(--text-tint-secondary));
-    }
-
-    .text-muted {
-        @include text-color(var(--text-tint-muted));
-    }
-
-    .text-disabled {
-        @include text-color(var(--text-tint-disabled));
-        opacity: 0.6;
-        cursor: not-allowed;
-    }
-
-    // =============================================================================
-    // VALIDATION STATE CLASSES
-    // =============================================================================
-
-    .state-success {
-        --current: var(--color-success);
-        @include validation-success;
-    }
-
-    .state-warning {
-        --current: var(--color-warning);
-        @include validation-warning;
-    }
-
-    .state-error {
-        --current: var(--color-error, var(--color-danger));
-        @include validation-error;
-    }
-
-    .state-invalid {
-        --current: var(--color-error, var(--color-danger));
-        @include validation-error;
-    }
-
-    .state-valid {
-        --current: var(--color-success);
-        @include validation-success;
-    }
-
-    // =============================================================================
-    // COMBINED COLOR + SURFACE CLASSES
-    // =============================================================================
-
-    @each $color-name, $color-var in (
-        "primary": var(--color-primary),
-        "secondary": var(--color-secondary),
-        "accent": var(--color-accent),
-        "success": var(--color-success),
-        "warning": var(--color-warning),
-        "danger": var(--color-danger),
-        "info": var(--color-info)
-    ) {
-        .#{$color-name}-surface {
-            --current: #{$color-var};
-            @include solid-colorize("&", ("shade": var(--surface-opacity-default), "tint": 0.0, "scope": "selector"));
-        }
-
-        .#{$color-name}-surface-interactive {
-            --current: #{$color-var};
-            @include surface-interactive(var(--surface-opacity-default));
-        }
-    }
-
-
-
-    // =============================================================================
-    // BUTTON MODIFIERS & VARIANTS
-    // =============================================================================
-
-    :where(button) {
-        @include button-filled();
-
-        // Palette overrides -------------------------------------------------
-        &.btn-primary,
-        &[data-variant="primary"] {
-            --md-button-bg: var(--md-primary);
-            --md-button-on: var(--md-on-primary);
-            --md-button-state-color: var(--md-primary);
-            --md-button-outline-color: var(--md-primary);
-        }
-
-        &.btn-secondary,
-        &[data-variant="secondary"] {
-            --md-button-bg: var(--md-secondary);
-            --md-button-on: var(--md-on-secondary);
-            --md-button-state-color: var(--md-secondary);
-            --md-button-outline-color: var(--md-secondary);
-        }
-
-        &.btn-tertiary,
-        &.btn-accent,
-        &[data-variant="tertiary"] {
-            --md-button-bg: var(--md-tertiary);
-            --md-button-on: var(--md-on-tertiary);
-            --md-button-state-color: var(--md-tertiary);
-            --md-button-outline-color: var(--md-tertiary);
-        }
-
-        &.btn-surface,
-        &[data-variant="surface"] {
-            --md-button-bg: var(--md-surface);
-            --md-button-on: var(--md-on-surface);
-            --md-button-state-color: var(--md-primary);
-            --md-button-outline-color: var(--md-outline);
-        }
-
-        &.btn-success,
-        &:is(.save, .submit, .confirm) {
-            --md-button-bg: var(--color-success);
-            --md-button-on: var(--md-on-surface);
-            --md-button-state-color: var(--color-success);
-            --md-button-outline-color: var(--color-success);
-        }
-
-        &.btn-danger,
-        &:is(.cancel, .delete, .remove) {
-            --md-button-bg: var(--color-danger);
-            --md-button-on: var(--md-on-surface);
-            --md-button-state-color: var(--color-danger);
-            --md-button-outline-color: var(--color-danger);
-        }
-
-        &.btn-warning,
-        &:is(.warning) {
-            --md-button-bg: var(--color-warning);
-            --md-button-on: var(--md-on-surface);
-            --md-button-state-color: var(--color-warning);
-            --md-button-outline-color: var(--color-warning);
-        }
-
-        &.btn-info,
-        &:is(.info) {
-            --md-button-bg: var(--color-info);
-            --md-button-on: var(--md-on-surface);
-            --md-button-state-color: var(--color-info);
-            --md-button-outline-color: var(--color-info);
-        }
-
-        // Variant mixins ----------------------------------------------------
-        &.btn-filled,
-        &.filled {
-            @include button-filled(primary, false);
-        }
-
-        &.btn-elevated,
-        &.elevated {
-            @include button-elevated(primary, false);
-        }
-
-        &.btn-tonal,
-        &.tonal {
-            @include button-tonal(secondary-container, secondary, false);
-        }
-
-        &.btn-tonal.btn-primary,
-        &.btn-tonal-primary {
-            --md-button-bg: var(--md-primary-container);
-            --md-button-on: var(--md-on-primary-container);
-            --md-button-state-color: var(--md-primary);
-            @include button-tonal(primary-container, primary, false);
-        }
-
-        &.btn-tonal.btn-secondary,
-        &.btn-tonal-secondary {
-            --md-button-bg: var(--md-secondary-container);
-            --md-button-on: var(--md-on-secondary-container);
-            --md-button-state-color: var(--md-secondary);
-            @include button-tonal(secondary-container, secondary, false);
-        }
-
-        &.btn-tonal.btn-tertiary,
-        &.btn-tonal-tertiary {
-            --md-button-bg: var(--md-tertiary-container);
-            --md-button-on: var(--md-on-tertiary-container);
-            --md-button-state-color: var(--md-tertiary);
-            @include button-tonal(tertiary-container, tertiary, false);
-        }
-
-        &.btn-outlined,
-        &.outlined {
-            --md-button-on: var(--md-button-on, var(--md-primary));
-            --md-button-outline-color: var(--md-button-outline-color, var(--md-primary));
-            --md-button-state-color: var(--md-button-state-color, var(--md-primary));
-            @include button-outlined(primary, false);
-        }
-
-        &.btn-outlined.btn-secondary {
-            --md-button-on: var(--md-secondary);
-            --md-button-outline-color: var(--md-secondary);
-            --md-button-state-color: var(--md-secondary);
-            @include button-outlined(primary, false);
-        }
-
-        &.btn-outlined.btn-tertiary,
-        &.btn-outlined.btn-accent {
-            --md-button-on: var(--md-tertiary);
-            --md-button-outline-color: var(--md-tertiary);
-            --md-button-state-color: var(--md-tertiary);
-            @include button-outlined(primary, false);
-        }
-
-        &.btn-text,
-        &.btn-link,
-        &.btn-ghost,
-        &.text {
-            --md-button-on: var(--md-button-on, var(--md-primary));
-            --md-button-state-color: var(--md-button-state-color, var(--md-primary));
-            @include button-text(primary, false);
-        }
-
-        &.btn-text.btn-secondary {
-            --md-button-on: var(--md-secondary);
-            --md-button-state-color: var(--md-secondary);
-            @include button-text(primary, false);
-        }
-
-        &.btn-text.btn-tertiary,
-        &.btn-text.btn-accent {
-            --md-button-on: var(--md-tertiary);
-            --md-button-state-color: var(--md-tertiary);
-            @include button-text(primary, false);
-        }
-
-        &.btn-icon,
-        &.icon-only {
-            @include button-icon();
-        }
-    }
-
-}

package/src/scss/advanced/tokens/_material-color.scss

@@ -1,120 +0,0 @@
-@use "veela-lib" as md3;
-@use "./function-utils" as func;
-
-//
-@function if-cond($c, $a, $b) { @return #{"if(\
-    #{$c}: #{$a};\
-     else: #{$b};\
-)"}; }
-
-//
-@include func.make-func("@function --c2h-triple-mix(\
---c2h-a <color>, \
---c2h-b <color>, \
---c2h-c <color>, \
---c2h-factor <number> \
-)") {
-    --c2h-t : clamp(0, var(--c2h-factor, 0), 1);
-    --c2h-ct: clamp(0, round(nearest, var(--c2h-t), 1), 1);
-    --c2h-dz: clamp(0, calc(var(--c2h-t) * 2 - 1), 1);
-    --c2h-lz: clamp(0, calc(var(--c2h-t) * 2 - 0), 1);
-
-    /* */
-    --c2h-lc: color-mix(in oklch, var(--c2h-a) calc((1 - var(--c2h-u)) * 100%), var(--c2h-b) calc(var(--c2h-u) * 100%));
-    --c2h-dc: color-mix(in oklch, var(--c2h-b) calc((1 - var(--c2h-u)) * 100%), var(--c2h-c) calc(var(--c2h-u) * 100%));
-
-    /* */
-    --c2h-u: calc(
-        var(--c2h-ct) * var(--c2h-dz) +
-        (1 - var(--c2h-ct)) * var(--c2h-lz)
-    );
-    result: color-mix(in oklch,
-        var(--c2h-lc) calc((1 - var(--c2h-ct)) * 100%),
-        var(--c2h-dc) calc(var(--c2h-ct) * 100%)
-    );
-}
-
-//
-@include func.make-func("@function --c2h-re-shading(\
---c2h-color <color>, \
---c2h-factor <number>: 0, \
---c2h-theme-type <number>: 2 \
-)") {
-    /* chromatic neutralize (unused) ir chromatic, or make very chromatic if too gray */
-    --c2h-chromatic-inverse-ls: oklch(from var(--c2h-color) l calc(1 - c) h);
-    --c2h-chromatic-inverse-ds: oklch(from var(--c2h-color) l calc(1 - c) h);
-
-    /* from light source colors (l > 0.5, not very chromatic) */
-    --c2h-chromatic-extract-ls: oklch(from var(--c2h-color) l calc(c * 0.5) h);  /* most chromatic */
-    --c2h-chromatic-extract-ds: oklch(from var(--c2h-color) l calc(c * 0.35) h);  /* most chromatic */
-
-    /* from dark source colors (l < 0.5, not very chromatic) */
-    --c2h-lightness-extract-ls: oklch(from var(--c2h-color) 0.99 calc(c * 0.2) h);  /* most light */
-    --c2h-lightness-extract-ds: oklch(from var(--c2h-color) 0.08 calc(c * 0.1) h);  /* most light */
-
-    /* */
-    --c2h-lightness-inverse-ls: oklch(from var(--c2h-color) 0.01 calc(c * 0.2) h);  /* most dark */
-    --c2h-lightness-inverse-ds: oklch(from var(--c2h-color) 0.99 calc(c * 0.1) h);  /* most dark (almost black) */
-
-    /* */
-    --c2h-lightness-extract: sass(if(
-        style(--c2h-theme-type: 1): var(--c2h-lightness-extract-ds);
-        style(--c2h-theme-type: 0): var(--c2h-lightness-extract-ls);
-        else: light-dark(var(--c2h-lightness-extract-ls), var(--c2h-lightness-extract-ds)));
-    --c2h-chromatic-extract: sass(if(
-        style(--c2h-theme-type: 1): var(--c2h-chromatic-extract-ds);
-        style(--c2h-theme-type: 0): var(--c2h-chromatic-extract-ls);
-        else: light-dark(var(--c2h-chromatic-extract-ls), var(--c2h-chromatic-extract-ds)));
-    --c2h-lightness-inverse: sass(if(
-        style(--c2h-theme-type: 1): var(--c2h-lightness-extract-ds);
-        style(--c2h-theme-type: 0): var(--c2h-lightness-extract-ls);
-        else: light-dark(var(--c2h-lightness-inverse-ls), var(--c2h-lightness-inverse-ds)));
-    --c2h-chromatic-inverse: sass(if(
-        style(--c2h-theme-type: 1): var(--c2h-chromatic-inverse-ds);
-        style(--c2h-theme-type: 0): var(--c2h-chromatic-inverse-ls);
-        else: light-dark(var(--c2h-chromatic-inverse-ls), var(--c2h-chromatic-inverse-ds)));
-
-    /* */
-    result: --c2h-triple-mix(
-        var(--c2h-lightness-extract),
-        var(--c2h-chromatic-extract),
-        var(--c2h-lightness-inverse),
-        var(--c2h-factor, 0)
-    );
-}
-
-
-
-/* */
-@include func.make-func("@function --c2-surface(\
---c2-shift    <number>: var(--_color-shade, 0), \
---c2-color     <color>: var(--current, var(--primary, currentColor)), \
---c2-theme    <number>: 2 \
-)")
-    { result: --c2h-re-shading(var(--c2-color, var(--primary, currentColor)), clamp(0, calc(0.02 + var(--c2-shift, 0) * 0.8), 1), var(--c2-theme, 2)); };
-
-/* */
-@include func.make-func("@function --c2-on-surface(\
---c2-shift      <number>: var(--_color-tint, 0), \
---c2-color       <color>: var(--current, var(--primary, currentColor)), \
---c2-theme      <number>: 2 \
-)")
-    { result: --c2h-re-shading(var(--c2-color, var(--primary, currentColor)), clamp(0, calc(0.96 - var(--c2-shift, 0) * 0.8), 1), var(--c2-theme, 2)); };
-
-
-
-/* */
-@include func.make-func("@function --c2-contrast(\
---c2-shift    <number>: var(--_color-shade, 0), \
---c2-color     <color>: var(--current, var(--primary, currentColor)), \
---c2-theme      <number>: 2 \
-)")
-    { result: --c2h-re-shading(var(--c2-color, var(--primary, currentColor)), clamp(0, calc(0.01 + var(--c2-shift, 0) * 0.6), 1), var(--c2-theme, 2)); };
-
-/* */
-@include func.make-func("@function --c2-on-contrast(\
---c2-shift      <number>: var(--_color-tint, 0), \
---c2-color       <color>: var(--current, var(--primary, currentColor)), \
---c2-theme      <number>: 2 \
-)")
-    { result: --c2h-re-shading(var(--c2-color, var(--primary, currentColor)), clamp(0, calc(1 - var(--c2-shift, 0) * 0.6), 1), var(--c2-theme, 2)); };

package/src/scss/advanced/tokens/_variables.scss

@@ -1,171 +0,0 @@
-/*
- * Filename: _variables.scss
- * FullPath: modules/projects/veela.css/src/scss/advanced/tokens/_variables.scss
- * Change date and time: 12.30.00_06.08.2026
- * Reason for changes: Document canonical SoT for color tokens.
- */
-/*
- * NOTE: Canonical color-token source of truth is `core/misc/_tokens.scss`.
- * This file keeps the advanced MD3/C2 mixin DEFINITIONS (`define-palette-tokens`,
- * `define-surface-tokens`, `make-md-theme`, `material-color-c2-adapter-remap`)
- * because they depend on `veela-lib` and the `--c2-*` color functions in
- * `_material-color.scss`. Folding these definitions into `core/misc/_tokens.scss`
- * would create a circular `@use` on `veela-lib`. Emission is invoked from here.
- */
-
-@use "veela-lib" as md3;
-
-// Register core typed properties
-@include md3.declare-props();
-
-// =============================================================================
-// MD3 THEME GENERATION (Simplified)
-// Reduced property chains for better performance
-// =============================================================================
-
-// Core palette tokens - single source of truth
-@mixin define-palette-tokens($suffix: "", $theme-type: 2) {
-    // Primary palette (simplified chain)
-    --md-c2-primary#{$suffix}: var(--current, #469);
-    --md-c2-secondary#{$suffix}: var(--secondary, var(--md-c2-primary#{$suffix}));
-    --md-c2-tertiary#{$suffix}: var(--tertiary, var(--md-c2-secondary#{$suffix}));
-    --md-c2-error#{$suffix}: var(--error, oklch(0.62 0.17 23));
-    --md-c2-neutral#{$suffix}: --c2-surface(0.2, var(--md-c2-primary#{$suffix}), #{$theme-type});
-
-    // Shift values (computed once)
-    --md-c2-surface-shift#{$suffix}: clamp(0, calc(var(--background-tone-shift, 0) + 0.16), 1);
-    --md-c2-on-surface-shift#{$suffix}: clamp(0, calc(var(--color-tone-shift, 0) + 0.06), 1);
-    --md-c2-surface-variant-shift#{$suffix}: clamp(0, calc(var(--background-tone-shift, 0) + 0.34), 1);
-    --md-c2-outline-shift#{$suffix}: clamp(0, calc(var(--color-tone-shift, 0) + 0.28), 1);
-    --md-c2-contrast-shift#{$suffix}: clamp(0, calc(0.88 - var(--background-tone-shift, 0) * 0.3), 1);
-    --md-c2-inverse-primary-shift#{$suffix}: clamp(0, calc(0.7 - var(--background-tone-shift, 0) * 0.2), 1);
-}
-
-// Surface tokens derived from palette
-@mixin define-surface-tokens($suffix: "", $theme-type: 2) {
-    // Primary surfaces
-    --md-sys-color-primary#{$suffix}: var(--md-c2-primary#{$suffix});
-    --md-sys-color-on-primary#{$suffix}: --c2-on-contrast(0.02, var(--md-c2-primary#{$suffix}), #{$theme-type});
-    --md-sys-color-primary-container#{$suffix}: --c2-surface(0.74, var(--md-c2-primary#{$suffix}), #{$theme-type});
-    --md-sys-color-on-primary-container#{$suffix}: --c2-on-surface(0.26, var(--md-c2-primary#{$suffix}), #{$theme-type});
-
-    // Secondary surfaces
-    --md-sys-color-secondary#{$suffix}: var(--md-c2-secondary#{$suffix});
-    --md-sys-color-on-secondary#{$suffix}: --c2-on-contrast(0.02, var(--md-c2-secondary#{$suffix}), #{$theme-type});
-    --md-sys-color-secondary-container#{$suffix}: --c2-surface(0.68, var(--md-c2-secondary#{$suffix}), #{$theme-type});
-    --md-sys-color-on-secondary-container#{$suffix}: --c2-on-surface(0.24, var(--md-c2-secondary#{$suffix}), #{$theme-type});
-
-    // Tertiary surfaces
-    --md-sys-color-tertiary#{$suffix}: var(--md-c2-tertiary#{$suffix});
-    --md-sys-color-on-tertiary#{$suffix}: --c2-on-contrast(0.02, var(--md-c2-tertiary#{$suffix}), #{$theme-type});
-    --md-sys-color-tertiary-container#{$suffix}: --c2-surface(0.64, var(--md-c2-tertiary#{$suffix}), #{$theme-type});
-    --md-sys-color-on-tertiary-container#{$suffix}: --c2-on-surface(0.22, var(--md-c2-tertiary#{$suffix}), #{$theme-type});
-
-    // Error surfaces
-    --md-sys-color-error#{$suffix}: var(--md-c2-error#{$suffix});
-    --md-sys-color-on-error#{$suffix}: --c2-on-contrast(0.02, var(--md-c2-error#{$suffix}), #{$theme-type});
-    --md-sys-color-error-container#{$suffix}: --c2-surface(0.72, var(--md-c2-error#{$suffix}), #{$theme-type});
-    --md-sys-color-on-error-container#{$suffix}: --c2-on-surface(0.24, var(--md-c2-error#{$suffix}), #{$theme-type});
-
-    // Neutral surfaces
-    --md-sys-color-surface#{$suffix}: --c2-surface(var(--md-c2-surface-shift#{$suffix}), var(--md-c2-neutral#{$suffix}), #{$theme-type});
-    --md-sys-color-on-surface#{$suffix}: --c2-on-surface(var(--md-c2-on-surface-shift#{$suffix}), var(--md-c2-neutral#{$suffix}), #{$theme-type});
-    --md-sys-color-surface-variant#{$suffix}: --c2-surface(var(--md-c2-surface-variant-shift#{$suffix}), var(--md-c2-neutral#{$suffix}), #{$theme-type});
-    --md-sys-color-on-surface-variant#{$suffix}: --c2-on-surface(clamp(0, calc(var(--md-c2-on-surface-shift#{$suffix}) + 0.14), 1), var(--md-c2-neutral#{$suffix}), #{$theme-type});
-
-    // Outline
-    --md-sys-color-outline#{$suffix}: color-mix(in oklch, --c2-on-surface(var(--md-c2-outline-shift#{$suffix}), var(--md-c2-neutral#{$suffix}), #{$theme-type}) 58%, transparent);
-    --md-sys-color-outline-variant#{$suffix}: color-mix(
-        in oklch,
-        --c2-on-surface(clamp(0, calc(var(--md-c2-outline-shift#{$suffix}) + 0.1), 1), var(--md-c2-neutral#{$suffix}), #{$theme-type}) 34%,
-        --c2-surface(var(--md-c2-surface-variant-shift#{$suffix}), var(--md-c2-neutral#{$suffix}), #{$theme-type}) 66%
-    );
-
-    // Background
-    --md-sys-color-background#{$suffix}: --c2-surface(var(--background-tone-shift, 0), var(--md-c2-neutral#{$suffix}), #{$theme-type});
-    --md-sys-color-on-background#{$suffix}: --c2-on-surface(var(--color-tone-shift, 0), var(--md-c2-neutral#{$suffix}), #{$theme-type});
-
-    // Inverse
-    --md-sys-color-inverse-surface#{$suffix}: --c2-contrast(var(--md-c2-contrast-shift#{$suffix}), var(--md-c2-neutral#{$suffix}), #{$theme-type});
-    --md-sys-color-inverse-on-surface#{$suffix}: --c2-on-contrast(clamp(0, calc(var(--md-c2-on-surface-shift#{$suffix}) + 0.06), 1), var(--md-c2-neutral#{$suffix}), #{$theme-type});
-    --md-sys-color-inverse-primary#{$suffix}: --c2-contrast(var(--md-c2-inverse-primary-shift#{$suffix}), var(--md-c2-primary#{$suffix}), #{$theme-type});
-
-    // Misc
-    --md-sys-color-surface-tint#{$suffix}: var(--md-c2-primary#{$suffix});
-    --md-sys-color-shadow#{$suffix}: color-mix(in oklch, var(--md-c2-neutral#{$suffix}) 24%, transparent);
-    --md-sys-color-scrim#{$suffix}: color-mix(in oklch, var(--md-c2-neutral#{$suffix}) 70%, transparent);
-}
-
-// Combined theme mixin
-@mixin make-md-theme($suffix: "", $theme-type: 2) {
-    @include define-palette-tokens($suffix, $theme-type);
-    @include define-surface-tokens($suffix, $theme-type);
-}
-
-// Adapter for MD3 color functions
-@mixin material-color-c2-adapter-remap($selector: ":where(:root, :host, :scope, body, div, section)") {
-    @at-root {
-        @layer md3.c2-adapter {
-            #{$selector} {
-                @include make-md-theme("", 2);
-                @include make-md-theme("-dark", 1);
-                @include make-md-theme("-light", 0);
-            }
-        }
-    }
-}
-
-// =============================================================================
-// RUNTIME LAYER
-// =============================================================================
-
-@layer md3.runtime {
-    // Root-level palette defaults (simplified)
-    :where(:root, :scope) {
-        // Core palette (single source - no fallback chains)
-        --primary: #469;
-        --secondary: oklch(from var(--current, #469) l calc(c * 0.88) calc(h + 120));
-        --tertiary: oklch(from var(--current, #469) l calc(c * 0.84) calc(h + 240));
-        --accent: var(--tertiary);
-        --current: var(--primary);
-
-        // Color scheme handling
-        @media(prefers-color-scheme: dark) { color-scheme: dark; }
-        @media(prefers-color-scheme: light) { color-scheme: light; }
-
-        & { color-scheme: light; & * { color-scheme: light; } }
-        &:is([data-scheme="dark"], [data-theme="dark"]) { color-scheme: dark only; & * { color-scheme: dark; } }
-        &:is([data-scheme="light"], [data-theme="light"]) { color-scheme: light only; & * { color-scheme: light; } }
-        &:is([data-scheme="system"], [data-theme="system"], [data-scheme="auto"], [data-theme="auto"]) {
-            color-scheme: light dark;
-        }
-    }
-
-    // Color modifiers reset
-    :where(:root, :host, :scope) :where(*) {
-        --color-shade: 0;
-        --color-tint: 0;
-        --color-opacity: 0;
-        --color-enable-blur: 0;
-        --_color-shade: var(--color-shade, 0);
-        --_color-tint: var(--color-tint, 0);
-    }
-
-    // Host defaults
-    :host {
-        --current: var(--primary, transparent);
-        color-scheme: inherit;
-    }
-
-    // Export all design tokens
-    :where(:root, :host, :scope) {
-        @include material-color-c2-adapter-remap();
-        @include md3.md3-export-scale-vars();
-        @include md3.md3-export-density-vars();
-        @include md3.md3-export-layout-vars();
-        @include md3.md3-export-motion-vars();
-        @include md3.md3-export-typography-vars();
-        @include md3.md3-export-elevation-vars();
-        @include md3.md3-export-state-vars();
-    }
-}

package/src/scss/basic/misc/_index.scss

@@ -1,18 +0,0 @@
-// FL.UI Lib - Unified mixin facade
-// This file provides a consistent API whether using veela or core mixins
-//
-// Usage: @use "fl-ui-lib" as m;
-//
-// This facade can be configured to use:
-// - Core mixins (veela-independent)
-// - Veela mixins (when veela is available)
-// - Custom mixins (your own CSS framework)
-
-// Core SCSS mixins - Veela-independent fallbacks
-// These provide basic implementations that work without veela
-// When veela is available, these can be enhanced/overridden
-
-@forward "./queries";
-@forward "./mixins";
-@forward "./motion";
-@forward "./layout";