@fest-lib/veela 0.1.1

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

@@ -0,0 +1,354 @@
+@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

@@ -0,0 +1,120 @@
+@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

@@ -0,0 +1,171 @@
+/*
+ * 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/design/_index.scss

@@ -0,0 +1,3 @@
+@use "./keyframes" as *;
+@use "./wavy-runtime" as *;
+@use "./shapes" as *;