@fest-lib/veela 0.1.1

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

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

package/src/scss/advanced/color/_colorize.scss

@@ -0,0 +1,325 @@
+@use "sass:map";
+@use "sass:meta";
+@use "sass:list";
+@use "sass:string";
+
+//
+@use "./color" as color;
+@use "./utils" as utils;
+
+//
+@mixin _apply-surface-palette($selectors, $color: var(--on-surface-color, currentColor), $set-icon: false) {
+    #{$selectors} {
+        border-color: var(--border-color, transparent);
+        background-color: var(--surface-color, transparent);
+        color: #{$color};
+        accent-color: #{$color};
+        caret-color: #{$color};
+        text-decoration-color: #{$color};
+        text-emphasis-color: #{$color};
+        scrollbar-color: var(--scrollbar-color) transparent;
+        -webkit-text-fill-color: currentColor;
+
+        @if $set-icon {
+            --icon-color: #{$color};
+        }
+    }
+}
+
+//
+@mixin reset-vars($vars...) { @each $v in $vars { #{$v}: 0; } }
+@mixin tm-dep($property, $light, $dark) {
+    & {
+        #{$property}: color-mix(in oklch, #{$light} calc(100% * var(--tm-scheme)), #{$dark});
+        @supports(color: light-dark(white, black)) { #{$property}: light-dark(#{$light}, #{$dark}); }
+    }
+}
+
+//
+@mixin inverse {
+    & {
+        @include tm-dep("--tm-cr", var(--tm-cr-dark), var(--tm-cr-light));
+        --tm-ac: #{tm-lo(var(--tm-origin, currentColor), 80%)};
+    }
+}
+
+//
+@function tm-hi($base, $percent) { @return color-mix(in oklch, #{$base} calc(100% - #{$percent}), var(--tm-hi, white)); }
+@function tm-lo($base, $percent) { @return color-mix(in oklch, #{$base} calc(100% - #{$percent}), var(--tm-lo, black)); }
+
+// Internal helpers
+@function _merge-color-options($defaults, $overrides) {
+    @if $overrides == null or meta.type-of($overrides) != "map" or list.length($overrides) == 0 {
+        @return $defaults;
+    }
+
+    @return map.merge($defaults, $overrides);
+}
+
+// Enhanced colorize mixin with scoped propagation options
+@mixin solid-colorize(
+    $selector: "&",
+    $options: (
+        "shade": 0.0,
+        "tint": 0.0,
+        "scheme-id": 2,
+        "role": null,
+        "scope": "component",
+        "propagate": null,
+        "forms-background": null,
+        "global-targets": null
+    )
+) {
+    $role: map.get($options, "role");
+    $base-shade: utils.option-or($options, "shade", 0.0);
+    $base-tint: utils.option-or($options, "tint", 0.0);
+    $scheme-id: utils.option-or($options, "scheme-id", 2);
+    $scope: utils.option-or($options, "scope", "component");
+    $propagate-default: if(sass($scope == "selector"): false; else: true);
+    $propagate: utils.option-or($options, "propagate", $propagate-default);
+    $forms-background: utils.option-or($options, "forms-background", $propagate);
+    $global-targets: utils.option-or($options, "global-targets", $propagate);
+
+    #{$selector} {
+        --color-shade: #{$base-shade};
+        --color-tint: #{$base-tint};
+        --color-source: var(--current, var(--primary, transparent));
+        --surface-color: --c2-surface(
+            var(--_color-shade, 0),
+            var(--color-source, var(--current, var(--primary, transparent))),
+            #{$scheme-id}
+        );
+        --on-surface-color: --c2-on-surface(
+            var(--_color-tint, 0),
+            var(--color-source, var(--current, var(--primary, transparent))),
+            #{$scheme-id}
+        );
+        --on-surface: var(--on-surface-color, currentColor); // alias
+        --scrollbar-color: oklch(from var(--on-surface-color, currentColor) l c h / 0.4);
+        --border-color: oklch(
+            from --c2-surface(
+                calc(var(--_color-shade, 0) + var(--_color-tint, 0) + 0.05),
+                var(--color-source, var(--current, var(--primary, transparent))),
+                #{$scheme-id}
+            ) l c h / 0.1
+        );
+
+        &:where(a, span, ui-icon) {
+            @include _apply-surface-palette("&", var(--on-surface-color, currentColor), true);
+            --icon-color: var(--on-surface-color, currentColor);
+
+            //
+            &::selection {
+                color: var(--surface-color, currentColor);
+                --icon-color: var(--surface-color, currentColor);
+            }
+        }
+
+        &:where(button, input, select, textarea) {
+            border-style: solid;
+            border-width: 0.5px;
+        }
+
+        @include _apply-surface-palette("&", var(--on-surface-color, currentColor), true);
+        @include _apply-surface-palette("&::picker(select)", var(--on-surface-color, currentColor));
+
+        @if $propagate {
+            @include _apply-surface-palette("& :where(select)", var(--on-surface-color, currentColor));
+        }
+
+        $interactive-scope: if(
+            sass($propagate):
+                "&:where(button, input, select, textarea, option), & :where(button, input, select, textarea, option)";
+            else:
+                "&:where(button, input, select, textarea, option)"
+        );
+
+        #{$interactive-scope} {
+            @if $propagate {
+                @include _apply-surface-palette("&", var(--on-surface-color, currentColor), true);
+            }
+
+            //
+            @if $forms-background {
+                background-color: color-mix(
+                    in oklch,
+                    var(--surface-color, transparent) 96%,
+                    var(--on-surface-color, transparent) 10%
+                );
+            }
+
+            //
+            transition:
+                --_color-shade var(--transition-normal),
+                --_color-tint var(--transition-normal),
+                --surface-color var(--transition-normal),
+                --on-surface-color var(--transition-normal),
+                --border-color var(--transition-normal),
+                --scrollbar-color var(--transition-normal),
+                --icon-color var(--transition-normal),
+                border-color var(--transition-normal),
+                background-color var(--transition-normal),
+                box-shadow var(--transition-normal),
+                opacity var(--transition-normal);
+
+            //
+            & { --_color-shade: var(--color-shade, 0); };
+
+            //
+            @include utils.when-hover { --_color-shade: calc(var(--color-shade, 0) + var(--hover-lift, 0.03)); }
+            @include utils.when-active { --_color-shade: calc(var(--color-shade, 0) + var(--active-lift, 0.05)); }
+            @include utils.when-focus { --_color-shade: calc(var(--color-shade, 0) + var(--focus-lift, 0.02)); }
+            @include utils.when-focus-visible { --_color-shade: calc(var(--color-shade, 0) + var(--focus-lift, 0.02)); }
+            @include utils.when-disabled { --_color-shade: calc(var(--color-shade, 0) + var(--disabled-shade, 0.1)); }
+            @include utils.when-selected { --_color-shade: calc(var(--color-shade, 0) + var(--selected-shade, 0.04)); }
+            @include utils.when-autofill { --_color-shade: calc(var(--color-shade, 0) + var(--autofill-shade, 0.04)); }
+
+            //
+            &::placeholder {
+                --on-surface-color: oklch(
+                    from --c2-on-surface(
+                        0.0,
+                        var(--color-source, var(--current, var(--primary, transparent))),
+                        #{$scheme-id}
+                    ) l c h / 0.3
+                );
+            }
+
+            //
+            @include utils.when-autofill {
+                &, &:hover, &:focus, &:active {
+                    background-color: var(--surface-color, transparent) !important;
+                }
+            }
+
+
+            //
+            @include utils.when-selected {
+                background-color: var(--on-surface-color, transparent);
+                color: var(--surface-color, currentColor);
+                -webkit-text-fill-color: var(--surface-color, currentColor);
+                --icon-color: var(--surface-color, currentColor);
+            }
+        }
+
+        &::picker(select) {
+            background-color: transparent;
+        }
+
+        @if $global-targets {
+            ::picker(select) {
+                background-color: transparent;
+            }
+        }
+
+        @if $global-targets {
+            ui-icon {
+                background-color: transparent;
+                --icon-color: var(--on-surface-color, currentColor);
+            }
+        }
+
+        //
+        &:where(a, span, ui-icon) {
+            background-color: transparent;
+            &::selection { background-color: var(--on-surface-color, transparent); }
+        }
+
+        //
+        @if $global-targets {
+            :where(a, span, ui-icon) {
+                background-color: transparent;
+                &::selection { background-color: var(--on-surface-color, transparent); }
+            }
+        }
+    }
+}
+
+
+
+//
+@mixin veela-select-surface() {
+    background-color: var(--surface-color);
+    border-color: var(--border-color);
+    color: var(--on-surface-color);
+    accent-color: currentColor;
+    caret-color: currentColor;
+    text-decoration-color: currentColor;
+    text-emphasis-color: currentColor;
+    scrollbar-color: var(--scrollbar-color) transparent;
+    -webkit-text-fill-color: currentColor;
+}
+
+//
+@mixin surface($shade: var(--surface-opacity-subtle)) {
+    @include solid-colorize("&", ("shade": $shade, "tint": 0.0));
+}
+
+//
+@mixin surface-interactive($shade: var(--surface-opacity-subtle)) {
+    @include solid-colorize("&", ("shade": $shade, "tint": 0.0));
+}
+
+//
+@mixin text-color($tint: var(--text-tint-primary)) {
+    color: --c2-on-surface($tint, var(--current, var(--color-on-surface, var(--md-on-surface, #1c1b1f))));
+}
+
+//
+@mixin border-color($tint: var(--scrollbar-tint), $opacity: var(--border-opacity-default)) {
+    border-color: oklch(
+        from --c2-on-surface(
+            $tint,
+            var(--current, var(--color-on-surface, var(--md-on-surface, #1c1b1f)))
+        ) l c h / $opacity
+    );
+}
+
+//
+@mixin backdrop-blur($strength: "default") {
+    @if $strength =="subtle" {
+        backdrop-filter: var(--backdrop-blur-subtle);
+    }
+
+    @else if $strength =="strong" {
+        backdrop-filter: var(--backdrop-blur-strong);
+    }
+
+    @else {
+        backdrop-filter: var(--backdrop-blur-default);
+    }
+}
+
+//
+@function veela-state-shade($base, $delta: null) {
+    @if $delta == null or $delta == 0 {
+        @return $base;
+    }
+
+    @if meta.type-of($delta) == number {
+        $direction: var(--interaction-tone-direction, 1);
+        @return calc(#{$base} + (#{$delta} * #{$direction}));
+    }
+
+    @return $delta;
+}
+
+//
+@function veela-selector-list($selectors) {
+    @if meta.type-of($selectors) == string {
+        @return $selectors;
+    }
+
+    $result: "";
+
+    @if meta.type-of($selectors) == list {
+        @for $i from 1 through list.length($selectors) {
+            $separator: if(sass($i > 1): ", "; else: "");
+            $result: #{$result}#{$separator}#{list.nth($selectors, $i)};
+        }
+
+        @return $result;
+    }
+
+    @return $selectors;
+}