@fest-lib/veela 0.1.1

package/src/scss/advanced/misc/_config.scss

@@ -0,0 +1,119 @@
+@use "sass:map";
+@use "sass:list";
+
+$md-config: (
+    "effects": (
+        "active-brightness": 0.85,
+        "hover-brightness": 1.2,
+        "disabled-opacity": 0.5
+    ),
+    "shape": (
+        "border-radius": 0.75rem,
+        "box-shadow": 0 4px 6px -1px rgb(0 0 0 / 0.1),
+        "box-shadow-hover": 0 10px 15px -3px rgb(0 0 0 / 0.1)
+    ),
+    "colors": (
+        "accent": (#118bee15, #0097fc4f),
+        "bg": (#ffffff, #0d1117),
+        "bg-secondary": (#f6f8fa, #151b23),
+        "link": (#0969da, #2f81f7),
+        "secondary": (#6e7781, #8b949e),
+        "secondary-accent": (#eff1f3, #1f2428),
+        "shadow": (#d1d9e0, #30363d),
+        "table": (#f6f8fa, #161b22),
+        "text": (#1f2328, #e6edf3),
+        "text-secondary": (#656d76, #7d8590),
+        "scrollbar": (#d0d7de, #484f58),
+        "border": (#d0d7de, #30363d)
+    ),
+    "font": (
+        "emoji": "\"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"",
+        "body": "-apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Noto Sans\", Helvetica, Arial, sans-serif, var(--font-family-emoji-flag-capable)",
+        "mono": "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace",
+        "size-base": 1rem
+    ),
+    "layout": (
+        "line-height": 1.5,
+        "justify-important": center,
+        "justify-normal": start,
+        "widths": (
+            "card": 320px,
+            "card-medium": 480px,
+            "card-wide": 768px,
+            "content": 1200px
+        )
+    ),
+    "z-index": (
+        "negative": -1,
+        "base": 0,
+        "dropdown": 1000,
+        "sticky": 1020,
+        "fixed": 1030,
+        "modal-backdrop": 1040,
+        "modal": 1050,
+        "popover": 1060,
+        "tooltip": 1070
+    ),
+    "page": (
+        "margin": 1rem
+    ),
+    "heading": (
+        "padding": 0.5em,
+        "padding-small": 0.25em
+    ),
+    "blockquote": (
+        "margin-inline": 1.5em,
+        "padding-inline": 1em
+    ),
+    "table": (
+        "cell-padding": 0.5rem 1rem
+    ),
+    "media": (
+        "img-max-width": 100%
+    ),
+    "scrollbar": (
+        "size": 6px
+    )
+);
+
+@function md-config($keys...) {
+    $value: $md-config;
+
+    @each $key in $keys {
+        @if $value == null {
+            @return null;
+        }
+        $value: map.get($value, $key);
+    }
+
+    @return $value;
+}
+
+@function md-color($name, $mode: null) {
+    $palette: md-config("colors");
+    $value: map.get($palette, $name);
+
+    @if $value == null {
+        @return null;
+    }
+
+    @if $mode == "light" {
+        @return list.nth($value, 1);
+    }
+
+    @if $mode == "dark" {
+        @return list.nth($value, 2);
+    }
+
+    @return $value;
+}
+
+@function md-light-dark($name) {
+    $value: md-color($name);
+
+    @if $value == null {
+        @return null;
+    }
+
+    @return light-dark(#{list.nth($value, 1)}, #{list.nth($value, 2)});
+}

package/src/scss/advanced/misc/_initials.scss

@@ -0,0 +1,298 @@
+@use "../core/color" as color;
+@use "../core/colorize" as colorize;
+
+@mixin structural-shell(
+    $prefix,
+    $gap: null,
+    $padding: null,
+    $radius: var(--radius-md),
+    $border-width: 1px,
+    $border-style: solid,
+    $border-color: transparent
+) {
+    @if $gap != null {
+        --#{$prefix}-gap: #{$gap};
+    }
+
+    @if $padding != null {
+        --#{$prefix}-padding: #{$padding};
+    }
+
+    --#{$prefix}-radius: #{$radius};
+    --#{$prefix}-border: #{$border-width} #{$border-style};
+    --#{$prefix}-border-color: #{$border-color};
+    --#{$prefix}-border-width: #{$border-width};
+    --#{$prefix}-border-style: #{$border-style};
+    --#{$prefix}-border-radius: #{$radius};
+    --#{$prefix}-border-radius-top-left: #{$radius};
+    --#{$prefix}-border-radius-top-right: #{$radius};
+    --#{$prefix}-border-radius-bottom-left: #{$radius};
+    --#{$prefix}-border-radius-bottom-right: #{$radius};
+}
+
+@mixin initial-component-tokens() {
+    // Component defaults
+    --card-padding: var(--padding-lg);
+    --card-gap: var(--gap-md);
+    --card-radius: #{md3-radius(lg)};
+    --card-avatar-size: var(--avatar-size);
+
+    --form-radius: #{md3-radius(md)};
+    --form-padding: var(--padding-md);
+    --form-gap: var(--gap-sm);
+
+    --button-radius: #{md3-radius(full)};
+    --button-padding-x: var(--padding-lg);
+    --button-padding-y: var(--padding-sm);
+
+    --nav-gap: var(--gap-sm);
+    --nav-padding: var(--padding-sm);
+    --nav-radius: #{md3-radius(sm)};
+
+    // -------------------------------------------------------------------------
+    // Component tokens
+    // -------------------------------------------------------------------------
+    --avatar-size: clamp(32px, 6cqi, 48px);
+    --avatar-size-lg: clamp(40px, 8cqi, 64px);
+
+    --icon-size-sm: clamp(0.9rem, 1.2cqi, 1.1rem);
+    --icon-size-md: clamp(1.1rem, 1.4cqi, 1.3rem);
+    --icon-size-lg: clamp(1.4rem, 1.8cqi, 1.7rem);
+    --icon-color: currentColor;
+
+    --card-avatar-size: var(--avatar-size);
+
+    --button-radius: var(--radius-full);
+    --button-padding-x: var(--padding-lg);
+    --button-padding-y: var(--padding-sm);
+
+    --nav-gap: var(--gap-md);
+    --nav-padding: var(--padding-md);
+    --nav-radius: var(--radius-md);
+}
+
+@mixin initial-input-properties() {
+    @include colorize.solid-colorize("&", ("shade": 0.05, "tint": 0.0, "scope": "selector", "global-targets": true));
+
+    // -------------------------------------------------------------------------
+    // Form controls · inputs
+    // -------------------------------------------------------------------------
+    --input-radius: var(--radius-full);
+    --input-gap: var(--gap-sm);
+
+    --input-padding: var(--padding-md);
+    --input-padding-block: var(--padding-sm);
+    --input-padding-inline: var(--padding-lg, 1rem);
+    --input-padding-inline-start: var(--padding-lg, 1rem);
+    --input-padding-inline-end: var(--padding-lg, 1rem);
+
+    --input-text-color: var(--on-surface-color, currentColor);
+    --input-placeholder-color: color-mix(in oklch, var(--input-text-color) 32%, transparent);
+    --input-helper-color: color-mix(in oklch, var(--input-text-color) 68%, transparent);
+
+    --input-border-width: 1px;
+    --input-border-color: color-mix(in oklch, var(--on-surface-color, currentColor) 20%, transparent);
+    --input-border-hover: color-mix(in oklch, var(--on-surface-color, currentColor) 30%, transparent);
+    --input-border-focus: color-mix(
+        in oklch,
+        var(--input-border-hover) 40%,
+        color-mix(in oklch, var(--current, currentColor) 30%, transparent)
+    );
+    --input-border-error: var(--error, currentColor);
+    --input-border-disabled: color-mix(in oklch, var(--input-border-color) 35%, transparent);
+    --input-border-readonly: color-mix(in oklch, var(--input-border-color) 55%, transparent);
+    --input-border-checked: color-mix(in oklch, var(--surface-color, currentColor) 80%, transparent);
+    --input-border-autofill: color-mix(in oklch, var(--input-border-color) 80%, transparent);
+
+    --input-surface-color: var(--surface-color, transparent);//color-mix(in oklch, var(--surface-color, transparent) 96%, var(--on-surface-color, transparent));
+    --input-surface-hover: color-mix(in oklch, var(--input-surface-color) 90%, var(--input-border-focus) 10%);
+    --input-surface-focus: color-mix(in oklch, var(--input-surface-color) 88%, var(--input-border-focus) 12%);
+    --input-surface-error: color-mix(in oklch, var(--input-surface-color) 88%, var(--input-border-error) 12%);
+    --input-surface-disabled: color-mix(in oklch, var(--input-surface-color) 96%, transparent 4%);
+    --input-surface-readonly: color-mix(in oklch, var(--input-surface-color) 96%, transparent 4%);
+    --input-surface-autofill: color-mix(in oklch, var(--input-surface-color) 94%, transparent 6%);
+    --input-surface: var(--input-surface-color, var(--surface-color, currentColor));
+    --input-color: var(--input-surface-color, var(--surface-color, currentColor));
+
+    --input-shadow: 0 1px 2px color-mix(in oklch, var(--md-shadow, #000) 12%, transparent);
+    --input-shadow-hover: 0 1px 3px color-mix(in oklch, var(--md-shadow, #000) 18%, transparent);
+    --input-shadow-focus: 0 0 0 1px color-mix(in oklch, var(--input-border-focus) 32%, transparent),
+        0 0 0 4px color-mix(in oklch, var(--input-border-focus) 12%, transparent);
+    --input-shadow-error: 0 0 0 1px color-mix(in oklch, var(--input-border-error) 32%, transparent),
+        0 0 0 4px color-mix(in oklch, var(--input-border-error) 12%, transparent);
+
+    --input-focus-ring-offset: 2px;
+
+    --input-selection-color: var(--on-surface-color, currentColor);
+    --input-selection-on-color: var(--surface-color, currentColor);
+
+    --input-icon-color: color-mix(in oklch, var(--input-text-color) 82%, transparent);
+    --input-icon-size: var(--icon-size-md);
+
+    --input-helper-spacing: var(--space-xs, 0.5rem);
+    --input-label-color: color-mix(in oklch, var(--input-text-color) 92%, transparent);
+    --input-min-block-size: fit-content;
+    --input-min-inline-size: 0px;
+    --input-max-inline-size: 100%;
+    --input-inline-size: fit-content;
+    --input-line-height: 1.4;
+    --input-font-weight: inherit;
+    --input-letter-spacing: 0.01em;
+    --input-cursor: text;
+
+    --input-text-disabled: color-mix(in oklch, var(--input-text-color) 55%, transparent);
+    --input-text-readonly: color-mix(in oklch, var(--input-text-color) 70%, transparent);
+    --input-text-autofill: color-mix(in oklch, var(--input-text-color) 65%, transparent);
+}
+
+@mixin initial-option-properties() {
+    // -------------------------------------------------------------------------
+    // Form controls · options
+    // -------------------------------------------------------------------------
+    --option-border-inline-size: 1px;
+    --option-padding-block: var(--padding-sm);
+    --option-padding-inline: calc(var(--padding-lg, 1rem) * 0.75);
+
+    --option-border-color: color-mix(in oklch, var(--input-border-color) 70%, transparent);
+    --option-border-hover: color-mix(in oklch, var(--option-border-color) 70%, var(--input-border-focus) 30%);
+    --option-border-focus: var(--input-border-focus);
+    --option-border-checked: var(--input-border-focus);
+
+    --option-text-color: var(--input-text-color, var(--on-surface-color, currentColor));
+    --option-text-hover: var(--option-text-color);
+    --option-text-active: var(--option-text-color);
+    --option-text-checked: var(--input-selection-on-color, var(--surface-color, currentColor));
+    --option-text-focus: var(--input-border-focus);
+
+    --option-surface-color: var(--input-surface-color, var(--surface-color, currentColor));
+    --option-surface-hover: color-mix(in oklch, var(--option-surface-color) 88%, var(--on-surface-color, currentColor) 12%);
+    --option-surface-active: color-mix(in oklch, var(--option-surface-color) 84%, var(--on-surface-color, currentColor) 16%);
+    --option-surface-checked: color-mix(in oklch, var(--option-surface-color) 10%, var(--on-surface-color, currentColor) 90%);
+
+    --option-outline-width: 2px;
+    --option-outline-offset: -2px;
+    --option-outline-color: color-mix(in oklch, var(--on-surface-color, currentColor) 80%, transparent);
+
+    --option-color: var(--option-surface-color);
+    --option-hover-color: var(--option-surface-hover);
+    --option-active-color: var(--option-surface-active);
+    --option-checked-color: var(--option-surface-checked);
+}
+
+@mixin initial-select-properties() {
+    // -------------------------------------------------------------------------
+    // Form controls · selects
+    // -------------------------------------------------------------------------
+    --select-gap: var(--gap-sm);
+    --select-indicator-size: var(--icon-size-sm, 1.125rem);
+
+    --select-indicator-color: var(--input-text-color, var(--option-text-color, currentColor));
+    --select-text-color: var(--input-text-color, var(--option-text-color, currentColor));
+
+    --select-color: var(--input-surface-color, var(--option-color, currentColor));
+    --select-hover-color: var(--input-hover-color, var(--option-hover-color, currentColor));
+
+    --select-surface-color: var(--input-surface-color, var(--option-color, currentColor));
+    --select-surface-hover: var(--input-hover-color, var(--option-hover-color, currentColor));
+}
+
+@mixin initial-checkbox-properties() {
+    // -------------------------------------------------------------------------
+    // Form controls · checkboxes
+    // -------------------------------------------------------------------------
+    --checkbox-size: 1.25rem;
+    --checkbox-radius: var(--radius-sm);
+    --checkbox-border-width: 1px;
+
+    --checkbox-surface: var(--input-surface, color-mix(in oklch, var(--surface-color, currentColor) 96%, var(--on-surface-color, currentColor)));
+    --checkbox-surface-hover: color-mix(in oklch, var(--checkbox-surface) 88%, var(--on-surface-color, currentColor) 12%);
+    --checkbox-surface-checked: color-mix(in oklch, var(--checkbox-surface) 10%, var(--on-surface-color, currentColor) 12%);
+    --checkbox-surface-disabled: color-mix(in oklch, var(--checkbox-surface) 96%, transparent 4%);
+
+    --checkbox-border-color: var(--input-border-color);
+    --checkbox-border-hover: var(--input-border-hover);
+    --checkbox-border-focus: var(--input-border-focus);
+    --checkbox-border-checked: var(--input-border-focus);
+    --checkbox-border-disabled: var(--input-border-disabled);
+
+    --checkbox-shadow: var(--input-shadow);
+    --checkbox-shadow-hover: var(--input-shadow-hover);
+    --checkbox-shadow-focus: var(--input-shadow-focus);
+
+    --checkbox-icon-color: var(--input-icon-color);
+    --checkbox-icon-checked: var(--input-selection-on-color);
+}
+
+@mixin initial-form-controls() {
+    // -------------------------------------------------------------------------
+    // Form controls
+    // -------------------------------------------------------------------------
+    --form-radius: var(--radius-full);
+    --form-padding: var(--padding-md);
+    --form-gap: var(--gap-sm);
+
+    @include initial-input-properties();
+    @include initial-option-properties();
+    @include initial-select-properties();
+    @include initial-checkbox-properties();
+}
+
+@mixin initial-structural-elements() {
+    // -------------------------------------------------------------------------
+    // Surfaces & structural elements
+    // -------------------------------------------------------------------------
+    --accordion-radius: var(--radius-lg);
+    --accordion-open-color-shade: var(--surface-opacity-emphasis);
+    --accordion-open-border: 1px solid;
+    --accordion-transition: var(--transition-colors);
+
+    --empty-state-padding: var(--padding-2xl);
+    --empty-state-radius: var(--radius-lg);
+    --empty-state-border: 1px dashed color-mix(
+        in oklch,
+        var(
+            --c2-on-surface(
+                var(--scrollbar-tint),
+                var(--current, var(--color-on-surface, var(--md-on-surface, #1c1b1f)))
+            ),
+            #{color.md3-var(outline-variant)}
+        ) l c h / var(--border-opacity-dashed)
+    );
+    --empty-state-min-block-size: var(--space-2xl);
+
+    @include structural-shell(
+        "surface",
+        null,
+        null,
+        var(--radius-md),
+        1px,
+        solid,
+        transparent
+    );
+
+    @include structural-shell(
+        "card",
+        var(--gap-md),
+        var(--padding-md),
+        var(--radius-md),
+        var(--surface-border-width, 1px),
+        var(--surface-border-style, solid),
+        var(--surface-border-color, transparent)
+    );
+
+    @include structural-shell(
+        "panel",
+        var(--gap-md),
+        var(--padding-md),
+        var(--radius-md),
+        var(--surface-border-width, 1px),
+        var(--surface-border-style, solid),
+        var(--surface-border-color, transparent)
+    );
+}
+
+@mixin initial-properties() {
+    @include initial-component-tokens();
+    @include initial-form-controls();
+    @include initial-structural-elements();
+}

package/src/scss/advanced/misc/_mixins.scss

@@ -0,0 +1,179 @@
+// Shared mixins to unify common property blocks
+@use "sass:map";
+@use "sass:meta";
+@use "veela-lib" as *;
+@use "./tokens" as t;
+
+// Layout stacks
+@mixin stack($gap, $display: grid) {
+    display: $display;
+    gap: $gap;
+}
+
+@mixin hstack($gap) { @include stack($gap, inline-flex); }
+@mixin vstack($gap) { @include stack($gap, grid); }
+
+// Container helpers
+@mixin container-inline { container-type: inline-size; }
+@mixin container-size { container-type: size; contain: content; }
+
+// Typography helpers based on MD3 tokens
+@mixin text-heading($token: "title-large", $align: null) {
+    @if meta.mixin-exists("md3-typography") {
+        @include md3-typography($token);
+    }
+    font-family: t.$font-family-base;
+    @if $align != null { text-align: $align; }
+
+    &:where(:-webkit-autofill, :autofill, :-webkit-autofill:hover, :-webkit-autofill:focus, :-webkit-autofill:active) {
+        font-family: t.$font-family-base;
+    }
+}
+
+@mixin text-body($token: "body-medium") {
+    @if meta.mixin-exists("md3-typography") {
+        @include md3-typography($token);
+    }
+    font-family: t.$font-family-base;
+
+    &:where(:-webkit-autofill, :autofill, :-webkit-autofill:hover, :-webkit-autofill:focus, :-webkit-autofill:active) {
+        font-family: t.$font-family-base;
+    }
+}
+
+@mixin text-label($token: "label-large", $uppercase: false) {
+    @if meta.mixin-exists("md3-typography") {
+        @include md3-typography($token);
+    }
+    font-family: t.$font-family-base;
+    @if $uppercase { text-transform: uppercase; }
+
+    &:where(:-webkit-autofill, :autofill, :-webkit-autofill:hover, :-webkit-autofill:focus, :-webkit-autofill:active) {
+        font-family: t.$font-family-base;
+    }
+}
+
+@mixin font-nums-tabular { font-variant-numeric: tabular-nums; }
+
+// Tonal surfaces & elevation helpers
+@mixin tonal-surface(
+    $role: surface,
+    $tone: var(--surface-opacity-default),
+    $radius: null,
+    $padding: null,
+    $elevation: null,
+    $border: false
+) {
+    @if meta.mixin-exists("solid-colorize") {
+        @include solid-colorize("&", ("shade": $tone, "role": $role, "scope": "selector"));
+    }
+
+    @if $radius != null { border-radius: $radius; }
+    @if $padding != null { padding: $padding; }
+    @if $elevation != null {
+        --md3-elevation-level: #{$elevation};
+    }
+    @if $border {
+        border: 0.5px solid color-mix(in oklch, var(--md3-outline) 42%, transparent);
+    }
+}
+
+@mixin interactive-surface(
+    $role: surface,
+    $tone: var(--surface-opacity-default),
+    $state: hover,
+    $selector: "&::after"
+) {
+    @include tonal-surface($role, $tone);
+    @if meta.mixin-exists("md3-state-layer") {
+        @include md3-state-layer($role, $state, $selector);
+    }
+}
+
+@mixin card-surface(
+    $role: surface-container,
+    $tone: var(--surface-opacity-subtle),
+    $radius: var(--radius-lg),
+    $padding: var(--padding-lg),
+    $elevation: 2
+) {
+    @include tonal-surface($role, $tone, $radius, $padding, $elevation, true);
+    backdrop-filter: blur(10px) saturate(115%);
+}
+
+// Structured blocks
+@mixin section-stack($gap: var(--gap-sm)) {
+    display: grid;
+    gap: $gap;
+    inline-size: stretch;
+    min-inline-size: 0;
+}
+
+@mixin inline-toolbar($gap: var(--gap-sm)) {
+    display: inline-flex;
+    align-items: center;
+    gap: $gap;
+    flex-wrap: wrap;
+}
+
+// Input helpers
+@mixin input-padding-trailing($logical-size) {
+    padding-inline-end: calc(#{$logical-size} * 2);
+}
+
+@mixin field-stack($gap: var(--gap-xs)) {
+    display: grid;
+    gap: $gap;
+    inline-size: stretch;
+    min-inline-size: 0;
+}
+
+// List helpers
+@mixin tonal-list(
+    $role: surface,
+    $tone: var(--surface-opacity-subtle),
+    $radius: var(--radius-sm),
+    $padding: var(--padding-xs)
+) {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+    list-style: none;
+    margin: 0;
+    padding: $padding;
+    @include tonal-surface($role, $tone, $radius);
+}
+
+// State blocks (flex row with gaps and radius)
+@mixin state-inline($gap, $padding-y, $padding-x, $radius) {
+    display: flex;
+    align-items: center;
+    gap: $gap;
+    padding-block: $padding-y;
+    padding-inline: $padding-x;
+    border-radius: $radius;
+}
+
+// Scrollbar styling (modern and webkit)
+@mixin scrollbars($size: 6px, $tone: var(--surface-opacity-emphasis)) {
+    scrollbar-width: thin;
+    & { scrollbar-color: color-mix(in oklch, var(--on-surface, currentColor) var(--scrollbar-tint, 86%), transparent) transparent; }
+
+    &::-webkit-scrollbar { inline-size: $size; block-size: $size; }
+    &::-webkit-scrollbar-thumb {
+        border-radius: 999px;
+        @include solid-colorize("&", ("shade": $tone, "scope": "selector"));
+    }
+    &::-webkit-scrollbar-track { background: transparent; }
+}
+
+// Overlay + elevation utilities
+@mixin glass-backdrop($blur: 18px, $opacity: 0.22) {
+    background: color-mix(in oklch, var(--color-inverse-surface) #{$opacity * 100%}, transparent);
+    backdrop-filter: blur($blur) saturate(120%);
+}
+
+// Accessibility helpers
+@mixin reduced-motion-zero { transition-duration: 0ms; }
+@mixin high-contrast-border($color: var(--border-color)) { border: 2px solid $color; }
+

package/src/scss/advanced/misc/_queries.scss

@@ -0,0 +1,34 @@
+// Query utilities: container and media helpers with shared breakpoints
+
+$breakpoints: (
+	"sm": 480px,
+	"md": 640px,
+	"lg": 768px,
+	"xl": 1024px,
+	"2xl": 1280px
+);
+
+@mixin mq($cond) {
+	@media #{$cond} { @content; }
+}
+
+@mixin mq-up($key) {
+	$val: map-get($breakpoints, $key);
+	@media (min-width: $val) { @content; }
+}
+
+@mixin mq-down($key) {
+	$val: map-get($breakpoints, $key);
+	@media (max-width: $val) { @content; }
+}
+
+@mixin cq($cond) {
+	@container #{$cond} { @content; }
+}
+
+@mixin cq-size($min: null, $max: null) {
+	$parts: ();
+	@if $min != null { $parts: append($parts, '(min-inline-size: ' + $min + ')'); }
+	@if $max != null { $parts: append($parts, '(max-inline-size: ' + $max + ')'); }
+	@container #{join($parts, ' and ')} { @content; }
+}