@fest-lib/veela 0.1.1

package/src/scss/advanced/misc/_rendering.scss

@@ -0,0 +1,82 @@
+@mixin HQRendering($importance: null) {
+    /*image-rendering: high-quality;
+    image-rendering: optimizeQuality;*/
+    font-smooth: always;
+    text-rendering: optimizeLegibility;
+    text-rendering: geometricPrecision;
+    shape-rendering: geometricPrecision;
+    -webkit-font-smoothing: subpixel-antialiased;
+    -moz-osx-font-smoothing: auto;
+}
+
+@mixin LQRendering($importance: null) {
+    /*image-rendering: low-quality;
+    image-rendering: optimizeSpeed;*/
+    font-smooth: never;
+    text-rendering: optimizeSpeed;
+    shape-rendering: optimizeSpeed;
+    shape-rendering: crispEdges;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+@mixin hw-optimize() {
+    transform: translateZ(0);
+    transform-origin: 50% 50%;
+    backface-visibility: hidden;
+    box-sizing: border-box;
+    overflow: hidden;
+    transition: none;
+
+    @supports (contain: layout paint) {
+        contain: layout paint;
+    }
+
+    @supports (scrollbar-width: none) {
+        scrollbar-width: none;
+    }
+
+    @supports (scrollbar-gutter: stable both-edges) {
+        scrollbar-gutter: stable both-edges;
+    }
+}
+
+@mixin disable-transform() {
+    rotate: none;
+    scale: none;
+    translate: none;
+    transform: none;
+
+    transform-origin: 50% 50%;
+    backface-visibility: visible;
+
+    filter: none;
+    backdrop-filter: none;
+
+    perspective: none;
+    isolation: auto;
+}
+
+@mixin hide-scrollbars() {
+    overflow: auto;
+    overscroll-behavior: contain;
+    scroll-behavior: smooth;
+    scrollbar-color: transparent;
+
+    @supports (scrollbar-width: none) {
+        scrollbar-width: none;
+        scrollbar-color: transparent;
+    }
+
+    @supports (scrollbar-gutter: stable both-edges) {
+        scrollbar-gutter: stable both-edges;
+    }
+
+    &::-webkit-scrollbar {
+        -webkit-appearance: none;
+        inline-size: 0px;
+        block-size: 0px;
+        display: none;
+    }
+}
+

package/src/scss/advanced/misc/_tokens.scss

@@ -0,0 +1,74 @@
+/*
+ * Filename: _tokens.scss
+ * FullPath: modules/projects/veela.css/src/scss/advanced/misc/_tokens.scss
+ * Change date and time: 12.30.00_06.08.2026
+ * Reason for changes: Document canonical SoT for color tokens.
+ */
+/*
+ * INVARIANT: Intentional per-bundle SCSS alias shim for the advanced bundle.
+ * Produces NO CSS output — only `$color-*` / `$space-*` / `$radius-*` / `$font-*` SCSS aliases.
+ * Canonical color-token source of truth: `core/misc/_tokens.scss` (full bundle).
+ * Do NOT `@forward` canonical here — would emit the full `@layer tokens` CSS into the
+ * advanced bundle and break its size semantics.
+ */
+
+// Design tokens: SCSS aliases for CSS custom properties
+// Keep aliases small and meaningful to encourage reuse
+
+$space-2xs: var(--space-2xs);
+$space-xs: var(--space-xs);
+$space-sm: var(--space-sm);
+$space-md: var(--space-md);
+$space-lg: var(--space-lg);
+$space-xl: var(--space-xl);
+$space-2xl: var(--space-2xl);
+
+$radius-xs: var(--radius-xs);
+$radius-sm: var(--radius-sm);
+$radius-md: var(--radius-md);
+$radius-lg: var(--radius-lg);
+$radius-xl: var(--radius-xl);
+$radius-full: var(--radius-full);
+
+$font-xs: var(--font-xs);
+$font-sm: var(--font-sm);
+$font-base: var(--font-base);
+$font-md: var(--font-md);
+$font-lg: var(--font-lg);
+$font-xl: var(--font-xl);
+$font-2xl: var(--font-2xl);
+
+$font-weight-normal: var(--font-weight-normal);
+$font-weight-medium: var(--font-weight-medium);
+$font-weight-semibold: var(--font-weight-semibold);
+$font-weight-bold: var(--font-weight-bold);
+$font-weight-extrabold: var(--font-weight-extrabold);
+
+$font-family-base: var(--font-family-base);
+$font-family-mono: var(--font-family-mono);
+
+$color-primary: var(--md3-primary);
+$color-primary-container: var(--md3-primary-container);
+$color-secondary: var(--md3-secondary);
+$color-tertiary: var(--md3-tertiary);
+$color-surface: var(--md3-surface);
+$color-surface-variant: var(--md3-surface-variant);
+$color-surface-container: var(--md3-surface-container);
+$color-outline: var(--md3-outline);
+$color-outline-variant: var(--md3-outline-variant);
+$color-error: var(--md3-error);
+$color-inverse-surface: var(--md3-inverse-surface);
+$color-inverse-on-surface: var(--md3-inverse-on-surface);
+$color-scrim: var(--md3-scrim);
+
+// Common color variables (compat layer for reducing --c2-* usage)
+$on-surface: var(--on-surface, currentColor);
+$text-secondary: var(--text-secondary, color-mix(in oklch, var(--on-surface, currentColor) 74%, transparent));
+$border-color: var(--border-color, color-mix(in oklch, var(--on-surface, currentColor) 18%, transparent));
+$backdrop: var(--backdrop, oklch(from black l c h / 0.22));
+
+// Scrollbar
+$scrollbar-opacity: var(--scrollbar-opacity, 0.56);
+$scrollbar-tint: var(--scrollbar-tint, 86%);
+
+

package/src/scss/advanced/theme/_shared.scss

@@ -0,0 +1,232 @@
+/**
+ * Veela CSS - Core Shared Utilities
+ *
+ * Reusable mixins, placeholders, and common patterns for core layout styles.
+ * Reduces duplication across normalize, states, layout, and gridbox modules.
+ */
+
+/* ========================================================================
+   Meta-level: Placeholders for zero-specificity selector groups
+   ======================================================================== */
+
+/**
+ * Reset border and outline styles (transparent, none, 0px)
+ * Use: @extend %reset-borders; or include in selectors
+ */
+%reset-borders {
+    border: none 0px transparent;
+    outline: none 0px transparent;
+}
+
+/**
+ * Disable user interaction (pointer-events, touch-action, user-select)
+ * Use: @extend %disable-interaction;
+ */
+%disable-interaction {
+    pointer-events: none;
+    touch-action: none;
+    user-select: none;
+}
+
+/**
+ * Lock interaction (pointer-events: none + touch + select disabled)
+ * Stronger version with explicit !important for state overrides
+ */
+%lock-interaction {
+    pointer-events: none !important;
+    touch-action: none !important;
+    user-select: none !important;
+}
+
+/**
+ * Basic box-model reset: margin, padding, box-sizing
+ */
+%reset-box-model {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+/* ========================================================================
+   Mixins: Common property/style groups
+   ======================================================================== */
+
+/**
+ * Reset box model (margin, padding, sizing)
+ * @usage: @include reset-box-model();
+ */
+@mixin reset-box-model {
+    /*margin: 0;
+    padding: 0;*/
+    box-sizing: border-box;
+}
+
+/**
+ * Reset borders and outlines
+ * @usage: @include reset-borders();
+ */
+@mixin reset-borders {
+    border: none 0px transparent;
+    outline: none 0px transparent;
+}
+
+/**
+ * Disable interaction via pointer-events, touch-action, user-select
+ * @param $importance [false] - if true, use !important
+ * @usage: @include disable-interaction(); or @include disable-interaction(true);
+ */
+@mixin disable-interaction($importance: false) {
+    $imp: if(sass($importance): !important; else: null);
+    pointer-events: none if(sass($imp != null): #{$imp}; else: null);
+    touch-action: none if(sass($imp != null): #{$imp}; else: null);
+    user-select: none if(sass($imp != null): #{$imp}; else: null);
+}
+
+/**
+ * Reset form element appearance (font, line-height, margin, text-transform)
+ * @usage: @include reset-form-appearance();
+ */
+@mixin reset-form-appearance {
+    font: inherit;
+    color: inherit;
+    letter-spacing: inherit;
+    margin: 0;
+    border: none;
+    outline: none;
+}
+
+/**
+ * Scrollbar styling for webkit browsers
+ * @param $size [8px] - scrollbar width/height
+ * @param $color [var(--color-scrollbar, currentColor)] - thumb color
+ * @param $radius [var(--border-radius, 4px)] - thumb border-radius
+ * @usage: @include scrollbar-webkit(8px, var(--color-scrollbar));
+ */
+@mixin scrollbar-webkit($size: 8px, $color: var(--color-scrollbar, currentColor), $radius: var(--border-radius, 4px)) {
+    &::-webkit-scrollbar {
+        inline-size: $size;
+        block-size: $size;
+    }
+
+    &::-webkit-scrollbar-track {
+        background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background-color: $color;
+        border-radius: $radius;
+    }
+
+    &::-webkit-scrollbar-thumb:hover {
+        background: var(--color-outline, #9ca3af);
+    }
+}
+
+/**
+ * Scrollbar styling (both webkit and Firefox)
+ * @param $color [var(--color-scrollbar, currentColor)] - scrollbar color
+ * @usage: @include scrollbar-styling(var(--color-scrollbar));
+ */
+@mixin scrollbar-styling($color: var(--color-scrollbar, currentColor)) {
+    scrollbar-width: thin;
+    scrollbar-color: $color transparent;
+
+    @include scrollbar-webkit(var(--scrollbar-size, 8px), $color);
+}
+
+/**
+ * Flex row layout with space-between and wrap
+ * Used for nav-like layouts
+ * @usage: @include flex-row-wrap();
+ */
+@mixin flex-row-wrap {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+}
+
+/**
+ * Flex column centered (used for labels, stacked content)
+ * @usage: @include flex-column-center();
+ */
+@mixin flex-column-center {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+}
+
+/**
+ * Stretch to viewport size (used for root/body containers)
+ * Combines inline-size, block-size with min/max constraints
+ * @usage: @include stretch-viewport();
+ */
+@mixin stretch-viewport {
+    inline-size: stretch;
+    block-size: stretch;
+    min-inline-size: 0px;
+    min-block-size: 0px;
+    max-inline-size: min(100%, min(100cqi, 100dvi));
+    max-block-size: min(100%, min(100cqb, 100dvb));
+}
+
+/**
+ * Hidden state: display none + pointer/touch disabled
+ * @param $opacity [false] - if true, also apply opacity: 0
+ * @usage: @include hidden-state(); or @include hidden-state(true);
+ */
+@mixin hidden-state($opacity: false) {
+    display: none !important;
+    pointer-events: none !important;
+    touch-action: none !important;
+    @if $opacity {
+        opacity: 0;
+        visibility: collapse;
+    }
+}
+
+/**
+ * Prevent dragging of element
+ * @usage: @include no-drag();
+ */
+@mixin no-drag {
+    -webkit-user-drag: none;
+    -moz-user-drag: none;
+    user-select: none;
+}
+
+/**
+ * Focus ring without outline (M3-style)
+ * @param $color [var(--color-primary, #0066cc)] - focus color
+ * @param $radius [var(--radius-sm, 8px)] - border radius
+ * @usage: @include focus-ring(var(--color-primary));
+ */
+@mixin focus-ring($color: var(--color-primary, #0066cc), $radius: var(--radius-sm, 8px)) {
+    outline: none;
+    box-shadow: 0 0 0 3px color-mix(in oklab, $color 35%, transparent);
+    border-radius: $radius;
+}
+
+/**
+ * Media element sizing (img, video, canvas, svg)
+ * @usage: @include media-sizing();
+ */
+@mixin media-sizing {
+    display: block;
+    max-inline-size: 100%;
+    block-size: auto;
+}
+
+/**
+ * Code element font and sizing
+ * @param $font [var(--font-family-mono, 'SF Mono', 'Monaco', 'Roboto Mono', monospace)] - monospace font
+ * @usage: @include code-styling();
+ */
+@mixin code-styling($font: var(--font-family-mono, 'SF Mono', 'Monaco', 'Roboto Mono', monospace)) {
+    font-family: $font;
+    background-color: var(--bgColor-muted);
+    border-radius: 0.3em;
+    padding: 0.2em 0.4em;
+    font-size: 85%;
+}

package/src/scss/advanced/theme/_states.scss

@@ -0,0 +1,332 @@
+@use "veela-lib" as *;
+@use "./shared" as *;
+
+//
+$ux-input-button-types: '[type="button"], [type="submit"], [type="reset"]';
+$ux-textual-input-types: '[type="text"], [type="email"], [type="url"], [type="tel"], [type="password"], [type="search"], [type="number"], [type="date"], [type="time"], [type="datetime-local"], [type="month"], [type="week"]';
+$ux-numeric-temporal-types: '[type="number"], [type="date"], [type="time"], [type="datetime-local"], [type="month"], [type="week"]';
+
+//
+@mixin ux-textual-interaction {
+    @include button-base();
+    @include input-base();
+
+    & {
+        display: inline-block;
+        flex-direction: row;
+        justify-items: stretch;
+        justify-content: space-between;
+        text-align: start;
+    }
+
+    &:invalid:not(:disabled) {
+        --current: var(--color-error, var(--color-danger));
+    }
+
+    &:placeholder-shown {
+        --color-tint: var(--text-tint-muted);
+    }
+
+    &::placeholder {
+        color: oklch(from var(--current) l c h / calc(var(--text-tint-muted) + 0.1));
+        opacity: 0.7;
+    }
+}
+
+//
+@layer ux-states {
+    :where(:root, :host, :scope, body) {
+        --ux-tone-direction: var(--interaction-tone-direction, 1);
+    }
+
+    //
+    :where(:root, :host, :scope) {
+        @include solid-colorize("&");
+        @include initial-properties();
+    }
+
+    //
+    :where(input, option, textarea, select, button) {
+        @include solid-colorize("&");
+        @include initial-properties();
+    }
+
+    :where(input, option, textarea, select, button):disabled {
+        cursor: not-allowed;
+    }
+
+    //
+    ui-longtext {
+        --thumb-size: 1.25rem;
+        --track-height: 0.25rem;
+        display: inline-block;
+    }
+
+    ui-slider[variant="slider"] {
+        block-size: 1rem;
+        border-radius: 9999px;
+    }
+
+    //
+    :where(button, input:is(#{$ux-input-button-types})) {
+        &:not([data-variant]):not([data-icon-only]) {
+            @include button-elevated(primary);
+        }
+
+        &[data-variant="filled"] {
+            @include button-filled(primary, false);
+        }
+
+        &[data-variant="tonal"] {
+            @include button-tonal(secondary-container, secondary, false);
+        }
+
+        &[data-variant="outlined"] {
+            @include button-outlined(primary, false);
+        }
+
+        &[data-variant="text"] {
+            @include button-text(primary, false);
+        }
+    }
+
+
+
+    // =============================================================================
+    // BUTTONS
+    // =============================================================================
+
+    :where(button) {
+        @include button-filled();
+
+        & {
+            display: flex-inline;
+            place-content: center;
+            place-items: center;
+            text-align: center;
+        }
+    }
+
+
+
+    // =============================================================================
+    // TEXT INPUTS (text, number, email, password, search, tel, url, date, time, datetime-local, month, week)
+    // =============================================================================
+
+    //
+    :where(input) {
+        &::-webkit-outer-spin-button,
+        &::-webkit-inner-spin-button {
+            -webkit-appearance: none;
+            margin: 0;
+        }
+
+        &:where(#{$ux-numeric-temporal-types}) {
+            font-variant-numeric: tabular-nums;
+        }
+    }
+
+    //
+    :where(input:is(#{$ux-textual-input-types}), textarea) {
+        @include solid-colorize("&", ("shade": 0.05, "tint": 0.0, "scope": "selector"));
+        @include ux-textual-interaction;
+
+        & {
+            inline-size: stretch;
+            min-inline-size: 0px;
+            max-inline-size: stretch;
+            justify-content: space-between;
+            justify-items: stretch;
+            display: inline-block;
+            block-size: fit-content;
+            cursor: text;
+        }
+
+        &:is(input[type="datetime-local"]) {
+            font-variant-numeric: tabular-nums;
+            padding-inline-end: calc(var(--space-lg) * 2);
+
+            // Enhanced calendar icon styling
+            &::-webkit-calendar-picker-indicator {
+                cursor: pointer; opacity: 0.8;
+                float: end; justify-self: end;
+
+                @include when-hover { opacity: 1; }
+                @include when-active { opacity: 1; }
+            }
+
+            //
+            &::-webkit-datetime-edit {
+                & { background-color: transparent; float: end; justify-self: end; }
+            }
+        }
+    }
+
+    // Enhanced select dropdown styling
+    :where(textarea) {
+        @include form-field-base;
+        & { display: block; inline-size: stretch; }
+    }
+
+    //
+    input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"] {
+        &::-webkit-calendar-picker-indicator {
+            cursor: pointer; opacity: 0.8;
+            transition: filter var(--transition-normal);
+            float: end; justify-self: end;
+
+            @include when-hover { opacity: 1; }
+            @include when-active { opacity: 1; }
+            @include when-focus-visible { opacity: 1; }
+        }
+
+        &::-webkit-datetime-edit {
+            & { background-color: transparent; float: end; justify-self: end; }
+        }
+    }
+
+
+
+    // =============================================================================
+    // CHECKBOX & RADIO INPUTS
+    // =============================================================================
+
+    :where(input:is([type="checkbox"], [type="radio"]), button[data-icon-only]) {
+        @include checkbox-base();
+
+        //
+        &:is([type="radio"]) {
+            border-radius: var(--radius-full);
+        }
+    }
+
+
+
+    // =============================================================================
+    // SELECT ELEMENT
+    // =============================================================================
+
+    :where(select) {
+        @include select-base;
+
+        //
+        &:invalid:not(:disabled) {
+            --current: var(--color-error, var(--color-danger));
+        }
+    }
+
+    // =============================================================================
+    // RANGE INPUT
+    // =============================================================================
+
+    :where(input[type="range"]) {
+        &::-webkit-slider-thumb,
+        &::-moz-range-thumb {
+            @include solid-colorize("&", ("shade": var(--ux-thumb-base), "tint": 0.0, "scope": "selector"));
+        }
+    }
+
+
+    // =============================================================================
+    // FILE & COLOR INPUTS
+    // =============================================================================
+
+
+
+    // =============================================================================
+    // PROGRESS ELEMENT
+    // =============================================================================
+
+
+
+    // =============================================================================
+    // METER ELEMENT
+    // =============================================================================
+
+    :where(meter) {
+        //
+        &::-webkit-meter-optimum-value {
+            --current: var(--color-success);
+        }
+
+        //
+        &::-webkit-meter-suboptimum-value {
+            --current: var(--color-warning);
+        }
+
+        //
+        &::-webkit-meter-even-less-good-value {
+            --current: var(--color-danger);
+        }
+    }
+}
+
+//
+@layer ux-existence {
+    //
+    *[data-hidden]:not([data-hidden="false"]):not([data-opacity-animation]) {
+        &, * {
+            display: none !important;
+            pointer-events: none !important;
+            touch-action: none !important;
+            content-visibility: auto !important;
+        }
+    }
+
+    //
+    :host([data-hidden]:not([data-hidden="false"]:not([data-opacity-animation]))) {
+        &, *, ::slotted(*) {
+            display: none !important;
+            pointer-events: none !important;
+            touch-action: none !important;
+            content-visibility: auto !important;
+        }
+    }
+
+    //
+    :host([data-hidden]:not([data-hidden="false"])) {
+        &, *, ::slotted(*) {
+            pointer-events: none !important;
+            touch-action: none !important;
+        }
+    }
+
+    //
+    *[data-hidden]:not([data-hidden="false"]) {
+        &, * {
+            pointer-events: none !important;
+            touch-action: none !important;
+        }
+    }
+}
+
+//
+@layer ux-existence {
+    //
+    *[data-hidden]:not([data-hidden="false"]):not([data-opacity-animation]) {
+        &, * {
+            @include hidden-state(true);
+        }
+    }
+
+    //
+    :host([data-hidden]:not([data-hidden="false"]:not([data-opacity-animation]))) {
+        &, *, ::slotted(*) {
+            @include hidden-state(true);
+        }
+    }
+
+    //
+    :host([data-hidden]:not([data-hidden="false"])) {
+        &, *, ::slotted(*) {
+            @include disable-interaction(true);
+        }
+    }
+
+    //
+    *[data-hidden]:not([data-hidden="false"]) {
+        &, * {
+            @include disable-interaction(true);
+        }
+    }
+}