@fest-lib/veela 0.1.19 → 1.0.1

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

@@ -1,74 +0,0 @@
-/*
- * 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

@@ -1,232 +0,0 @@
-/**
- * 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, #5a7fff), $radius: var(--radius-sm)) {
-    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

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