@fest-lib/veela 0.1.20 → 1.0.2

package/src/scss/basic/misc/_mixins.scss

@@ -1,179 +0,0 @@
-// Shared mixins to unify common property blocks
-// Do not @use "veela-lib" here: this file is part of veela-lib (via @forward) and that would create a Sass module loop.
-@use "sass:map";
-@use "sass:meta";
-@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: nowrap;
-}
-
-// 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/basic/misc/_queries.scss

@@ -1,34 +0,0 @@
-// 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; }
-}

package/src/scss/basic/misc/_tokens.scss

@@ -1,78 +0,0 @@
-/*
- * Filename: _tokens.scss
- * FullPath: modules/projects/veela.css/src/scss/basic/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 vl-basic 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
- * lightweight vl-basic 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%);
-
-// Stacking (use with lib/basic/_position.scss — overlays, modals)
-$z-modal-backdrop: var(--z-modal-backdrop);
-$z-modal: var(--z-modal);
-
-

package/src/scss/basic/misc/_veela.scss

@@ -1,12 +0,0 @@
-// FL.UI Lib - Veela integration
-// This file provides full veela integration when available
-// 
-// Usage: @use "fl-ui-lib" as m;
-// 
-// Note: This requires veela.css to be installed and configured
-
-// Import and forward veela-lib
-@use "veela-lib" as *;
-@forward "veela-lib";
-
-// All veela mixins are now available through this facade

package/src/scss/core/misc/_index.scss

@@ -1,6 +0,0 @@
-@forward "../interact/draggable";
-@forward "../interact/resizable";
-@forward "../interact/position";
-@forward "./utilities";
-@forward "./icons";
-@forward "../interact/viewport";