@fest-lib/veela 0.1.1

package/src/scss/basic/misc/_normalize.scss

@@ -0,0 +1,765 @@
+/*
+ * Filename: _normalize.scss
+ * FullPath: modules/projects/fl.ui/src/styles/runtime/basic/misc/_normalize.scss
+ * Change date and time: 16.25.00_31.07.2026
+ * Reason for changes: vl-basic palette via --u2-color-mod (token names kept).
+ */
+@use "./shared" as *;
+
+// COMPAT: vl-basic may load without veela _tokens.scss — keep function local.
+@#{"function --u2-color-mod(--base-color <color>, --index <number> : 550) returns <color>"} {
+    --i: clamp(0, var(--index), 1000);
+    --pivot: 550;
+    --white-distance: clamp(0, calc((var(--pivot) - var(--i)) / var(--pivot)), 1);
+    --black-distance: clamp(0, calc((var(--i) - var(--pivot)) / (1000 - var(--pivot))), 1);
+    --to-white: pow(var(--white-distance), 1.15);
+    --to-black: pow(var(--black-distance), 1.08);
+    --center-left: clamp(0, calc(var(--i) / var(--pivot)), 1);
+    --center-right: clamp(0, calc((1000 - var(--i)) / (1000 - var(--pivot))), 1);
+    --chroma-shape: sqrt(min(var(--center-left), var(--center-right)));
+    --chroma-scale: calc(0.08 + 0.92 * var(--chroma-shape));
+    result: oklch(
+        from var(--base-color)
+        calc(l + (0.985 - l) * var(--to-white) + (0.16 - l) * var(--to-black))
+        calc(c * var(--chroma-scale))
+        h
+    );
+}
+
+@layer tokens, base, layout, utilities, shells, shell, views, view, viewer, components, ux-layer, markdown, essentials, print, print-breaks, overrides;
+
+@layer tokens {
+    :where(:root, html) {
+        color-scheme: light dark;
+        dynamic-range-limit: no-limit;
+        /*
+         * WHY: vl-basic loads only this runtime sheet; advanced MD3 tokens are not bundled.
+         * Body/normalize use var(--color-bg) etc. — without defaults, backgrounds stay transparent
+         * and light-dark() in views never resolves meaningfully.
+         * Native CSS light-dark() follows the used color-scheme (Theme.ts sets html.style.colorScheme).
+         */
+        --color-primary: light-dark(#91b6e3, #2e3a64);
+        --base-color: var(--color-primary);
+        --color-bg: light-dark(
+            --u2-color-mod(var(--base-color), 70),
+            --u2-color-mod(var(--base-color), 940)
+        );
+        --color-text: light-dark(
+            --u2-color-mod(var(--base-color), 900),
+            --u2-color-mod(var(--base-color), 100)
+        );
+        --color-fg: var(--color-text);
+        --color-bg-secondary: light-dark(
+            --u2-color-mod(var(--base-color), 160),
+            --u2-color-mod(var(--base-color), 840)
+        );
+        --color-bg-alt: light-dark(
+            --u2-color-mod(var(--base-color), 200),
+            --u2-color-mod(var(--base-color), 880)
+        );
+        --color-text-secondary: light-dark(
+            --u2-color-mod(var(--base-color), 700),
+            --u2-color-mod(var(--base-color), 280)
+        );
+        --color-border: light-dark(
+            --u2-color-mod(var(--base-color), 300),
+            --u2-color-mod(var(--base-color), 640)
+        );
+        --color-table: light-dark(
+            --u2-color-mod(var(--base-color), 120),
+            --u2-color-mod(var(--base-color), 860)
+        );
+        --color-link: var(--color-primary);
+        --color-primary-hover: light-dark(
+            --u2-color-mod(var(--base-color), 620),
+            --u2-color-mod(var(--base-color), 480)
+        );
+        --color-secondary: light-dark(
+            --u2-color-mod(var(--base-color), 420),
+            --u2-color-mod(var(--base-color), 680)
+        );
+        --color-outline: light-dark(
+            --u2-color-mod(var(--base-color), 100),
+            --u2-color-mod(var(--base-color), 900)
+        );
+        --color-outline-variant: light-dark(
+            --u2-color-mod(var(--base-color), 100),
+            --u2-color-mod(var(--base-color), 900)
+        );
+        --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+        --line-height: 1.5;
+        --border-radius: 0.5rem;
+        tab-size: 4;
+        text-size-adjust: 100%;
+        interpolate-size: allow-keywords;
+        font-size-adjust: from-font;
+        font-optical-sizing: auto;
+        font-size: 16px;
+        line-height: 1.5;
+        min-block-size: 0;
+        min-inline-size: 0;
+        padding: 0;
+        margin: 0;
+        border: none;
+        contain: strict;
+        overflow: hidden;
+        font-family: var(--font-family, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
+        @include stretch-viewport;
+    }
+}
+
+@layer base {
+    @keyframes bottom-to-top {
+        0% {
+            opacity: 0;
+            transform: translateY(10%);
+        }
+
+        100% {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+
+    @media screen {
+        *,
+        *::before,
+        *::after {
+            @include reset-box-model;
+            box-sizing: border-box;
+            dynamic-range-limit: no-limit;
+        }
+
+        :where(html) {
+            -webkit-text-size-adjust: 100%;
+            font-size-adjust: from-font;
+            font-optical-sizing: auto;
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
+            text-rendering: optimizeLegibility;
+            font-family: var(--font-sans);
+            font-size: 16px;
+            line-height: 1.5;
+            dynamic-range-limit: no-limit;
+        }
+
+        :where(body) {
+            inset: 0;
+            margin: 0;
+            padding: 0;
+            border: none;
+            min-block-size: min(100dvb, 100cqb);
+            block-size: fit-content;
+            background: var(--color-bg);
+            color: var(--color-text);
+            line-height: var(--line-height);
+            -webkit-font-smoothing: antialiased;
+            text-rendering: optimizeLegibility;
+            dynamic-range-limit: no-limit;
+        }
+
+        :where(ul, ol) {
+            list-style: none;
+            margin: 0;
+            padding: 0;
+        }
+
+        :where(blockquote, q) {
+            quotes: none;
+
+            &::before,
+            &::after {
+                content: "";
+                content: none;
+            }
+        }
+
+        :where(article, main, aside, section, header, footer, nav) {
+            border: none 0px transparent;
+            outline: none 0px transparent;
+            box-shadow: none 0px transparent;
+        }
+
+        :where(table) {
+            border-collapse: collapse;
+            border-spacing: 0;
+            display: block;
+            overflow-x: auto;
+            inline-size: max-content;
+            max-inline-size: 100%;
+            margin-block: 1rem;
+            border: 1px solid var(--color-border);
+            border-radius: var(--border-radius);
+
+            :where(th, td) {
+                padding: 0.5rem 1rem;
+                border-block-end: 1px solid var(--color-border);
+                text-align: start;
+            }
+
+            :where(th) {
+                background-color: var(--color-table);
+                color: var(--color-text);
+                font-weight: bold;
+            }
+
+            :where(tr:last-child td) {
+                border-block-end: none;
+            }
+
+            :where(tr:nth-child(even)) {
+                background-color: var(--color-bg-secondary);
+            }
+        }
+
+        :focus-visible {
+            @include focus-ring();
+        }
+
+        :focus:not(:focus-visible) {
+            outline: none;
+        }
+
+        :where(button, input, optgroup, select, textarea) {
+            @include reset-form-appearance;
+            line-height: 1.15;
+            border: none 0px transparent;
+            outline: none 0px transparent;
+            box-shadow: none 0px transparent;
+        }
+
+        :where(button) {
+            min-block-size: fit-content;
+            min-inline-size: fit-content;
+            padding-inline: 1rem;
+            padding-block: 0.5rem;
+            gap: 0.25rem;
+            text-transform: none;
+            user-select: none;
+            pointer-events: auto;
+            cursor: pointer;
+            appearance: none;
+            border: none;
+            background: transparent;
+
+            &:has(> ui-icon:only-child) {
+                place-content: center;
+                place-items: center;
+                aspect-ratio: 1 / 1;
+            }
+
+            &:disabled {
+                pointer-events: none;
+                cursor: not-allowed;
+            }
+        }
+
+        :where(select) {
+            text-transform: none;
+        }
+
+        :where(button, [type="button"], [type="reset"], [type="submit"]) {
+            -webkit-appearance: button;
+            cursor: pointer;
+
+            &::-moz-focus-inner {
+                border-style: none;
+                padding: 0;
+            }
+        }
+
+        :where(fieldset, dialog) {
+            border: none;
+            padding: 0;
+            margin: 0;
+        }
+
+        :where(legend) {
+            padding: 0;
+        }
+
+        :where(progress) {
+            vertical-align: baseline;
+        }
+
+        :where(textarea) {
+            overflow: auto;
+            resize: vertical;
+        }
+
+        :where([type="search"]) {
+            -webkit-appearance: textfield;
+            outline-offset: -2px;
+
+            &::-webkit-search-decoration {
+                -webkit-appearance: none;
+            }
+        }
+
+        :where([type="range"]) {
+            -webkit-appearance: none;
+        }
+
+        :where(details > summary),
+        :where(summary) {
+            cursor: pointer;
+        }
+
+        :where(mark) {
+            background-color: transparent;
+            color: inherit;
+        }
+
+        :where(sub, sup) {
+            font-size: 75%;
+            line-height: 0;
+            position: relative;
+            vertical-align: baseline;
+        }
+
+        :where(sup) {
+            top: -0.5em;
+        }
+
+        :where(sub) {
+            bottom: -0.25em;
+        }
+
+        :where(a) {
+            color: var(--color-link, inherit);
+            text-decoration: inherit;
+            text-underline-offset: 0.2em;
+            pointer-events: auto;
+            cursor: pointer;
+            transition: color var(--transition-fast);
+
+            &:hover {
+                color: var(--color-primary-hover);
+            }
+        }
+
+        :where(img, canvas, svg, video, iframe, picture) {
+            max-inline-size: 100%;
+            block-size: auto;
+            border: none 0px transparent;
+            outline: none 0px transparent;
+            box-shadow: none 0px transparent;
+            dynamic-range-limit: no-limit;
+        }
+
+        :where(img, video, canvas, svg, picture) {
+            @include media-sizing;
+        }
+
+        :where(img, video) {
+            object-fit: contain;
+            object-position: center;
+        }
+
+        :where(picture) {
+            display: contents;
+        }
+
+        :where(iframe) {
+            max-inline-size: 100%;
+            block-size: auto;
+        }
+
+        :where(em, i) {
+            font-style: normal;
+        }
+
+        :where(strong, b) {
+            font-weight: normal;
+        }
+
+        :where(code, kbd, samp, pre) {
+            font-family: var(--font-family-mono, "SF Mono", "Monaco", "Inconsolata", "Roboto Mono", monospace);
+            font-size: 1em;
+        }
+
+        :where(code, pre) {
+            font-family: var(--font-mono);
+            font-size: 0.875em;
+        }
+
+        :where(code, samp, kbd) {
+            @include code-styling();
+        }
+
+        :where(code) {
+            background: var(--color-bg-alt);
+            padding: 0.125em 0.25em;
+            border-radius: var(--radius-sm);
+        }
+
+        :where(pre) {
+            background: var(--color-bg-alt);
+            padding: var(--space-md);
+            border-radius: var(--radius-md);
+            overflow-x: auto;
+
+            :where(code) {
+                background: transparent;
+                padding: 0;
+                border-radius: 0;
+            }
+        }
+
+        :where(input, textarea, select, button, option) {
+            @include reset-borders;
+            accent-color: var(--color-link, currentColor);
+            font-variant-emoji: text;
+            border: none 0px transparent;
+            outline: none 0px transparent;
+            box-shadow: none 0px transparent;
+        }
+
+        :where(span) {
+            font-variant-emoji: text;
+        }
+
+        :where(hr) {
+            border: none;
+            border-block-start: 1px solid var(--color-border);
+            margin-block: var(--space-lg);
+        }
+
+        ::-webkit-scrollbar {
+            inline-size: 8px;
+            block-size: 8px;
+        }
+
+        ::-webkit-scrollbar-track {
+            background: transparent;
+        }
+
+        ::-webkit-scrollbar-thumb {
+            background: var(--color-outline-variant, #d1d5db);
+            border-radius: 4px;
+
+            &:hover {
+                background: var(--color-outline, #9ca3af);
+            }
+        }
+
+        * {
+            scrollbar-width: thin;
+            scrollbar-color: var(--color-outline-variant, #d1d5db) transparent;
+        }
+
+        :where(input, textarea, select) {
+            inline-size: 100%;
+            padding: 0.5rem;
+            font-size: var(--font-size-base);
+            background-color: var(--color-bg-alt);
+            color: var(--color-fg);
+            border: 0px solid var(--color-border);
+            border-radius: var(--border-radius);
+
+            &:focus {
+                outline: none;
+                border-color: var(--color-primary);
+            }
+
+            &::placeholder {
+                color: var(--color-text-secondary);
+                opacity: 0.7;
+            }
+
+            &:disabled {
+                background-color: var(--color-bg-secondary);
+                cursor: not-allowed;
+                opacity: 0.5;
+            }
+        }
+
+        :where(input) {
+            &:-webkit-autofill::first-line,
+            &:autofill::first-line {
+                font-size: 1em;
+                text-size-adjust: 100%;
+            }
+
+            &:-internal-autofill-previewed {
+                letter-spacing: #{"calc(1em / 10)"} !important;
+            }
+        }
+
+        :where(input):is([type="radio"], [type="checkbox"]) {
+            inline-size: 1rem;
+            block-size: 1rem;
+            accent-color: var(--color-primary);
+            aspect-ratio: 1 / 1;
+        }
+
+        :where(label) {
+            font-weight: 600;
+            user-select: none;
+            pointer-events: none;
+            margin-block-end: 0.25rem;
+        }
+
+        :where(h1, h2, h3, h4, h5, h6) {
+            font-weight: 600;
+            line-height: 1.2;
+            margin-block: 0.5em;
+            text-wrap: balance;
+        }
+
+        :where(h1) {
+            font-size: 2rem;
+        }
+
+        :where(h2) {
+            font-size: 1.5rem;
+        }
+
+        :where(h3) {
+            font-size: 1.25rem;
+        }
+
+        :where(h4) {
+            font-size: 1.125rem;
+        }
+
+        :where(h5) {
+            font-size: 1rem;
+        }
+
+        :where(h6) {
+            font-size: 0.875rem;
+        }
+
+        :where(p) {
+            text-wrap: pretty;
+            margin-block: 1em;
+        }
+
+        :where(article, .content) {
+            ul,
+            ol {
+                margin-block: var(--space-md);
+                padding-inline-start: var(--space-lg);
+            }
+
+            ul {
+                list-style: disc;
+            }
+
+            ol {
+                list-style: decimal;
+            }
+        }
+
+        :where(blockquote) {
+            margin-inline: 1rem;
+            padding-inline: 1rem;
+            border-inline-start: 0.25rem solid var(--color-secondary);
+            color: var(--color-text-secondary);
+            font-style: italic;
+        }
+
+        :where(body, main, aside, pre, code, textarea, [data-scrollable], .scrollable) {
+            @include scrollbar-styling();
+        }
+
+        //:not(:defined),
+        :where(link, head, script, style, meta),
+        [hidden] {
+            display: none !important;
+        }
+
+        /*:not(:defined) {
+            opacity: 0;
+            visibility: collapse;
+            pointer-events: none;
+        }*/
+
+        :where(link, head, script, style, meta) {
+            pointer-events: none !important;
+        }
+
+        [aria-hidden="true"] {
+            visibility: collapse;
+            pointer-events: none;
+            opacity: 0;
+        }
+
+        [data-dragging] {
+            will-change: transform;
+            cursor: grabbing;
+        }
+
+        :where(a, button, [role="button"]) {
+            -webkit-tap-highlight-color: transparent;
+        }
+
+        @media (prefers-reduced-motion: reduce) {
+            *,
+            *::after,
+            *::before {
+                animation-duration: 0.01ms !important;
+                animation-iteration-count: 1 !important;
+                transition-duration: 0.01ms !important;
+                scroll-behavior: auto !important;
+            }
+        }
+    }
+}
+
+@layer layout {
+    @media screen {
+        :where(footer, header, main) {
+            margin-inline: auto;
+            padding: 0;
+        }
+
+        :where(header) {
+            text-align: center;
+        }
+
+        :where(nav) {
+            @include flex-row-wrap();
+            margin-block-end: 0;
+
+            ul {
+                display: flex;
+                list-style: none;
+                padding: 0;
+                gap: 1rem;
+                margin: 0;
+
+                li {
+                    position: relative;
+                }
+            }
+
+            a {
+                font-weight: bold;
+                color: var(--color-link);
+                text-decoration: none;
+            }
+        }
+
+        :where(section) {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: var(--justify-important, center);
+            gap: 1rem;
+
+            :where(aside) {
+                border: 1px solid var(--color-bg-secondary);
+                border-radius: var(--border-radius);
+                box-shadow: var(--box-shadow);
+                padding: 1.25rem;
+                inline-size: var(--width-card);
+                flex: 1 1 var(--width-card);
+            }
+        }
+    }
+}
+
+@layer components {
+    @media screen {
+        :where(dialog) {
+            margin: auto;
+            padding: 1rem;
+            background: var(--color-bg);
+            color: var(--color-text);
+            border: 1px solid var(--color-border);
+            border-radius: var(--border-radius);
+            box-shadow: var(--box-shadow);
+            max-inline-size: min(90vw, 600px);
+            max-block-size: 85vh;
+
+            &::backdrop {
+                background-color: rgb(0 0 0 / 0.5);
+            }
+
+            &[open] {
+                animation: bottom-to-top 0.25s ease-out;
+            }
+        }
+
+        :where(button, input[type="submit"], input[type="button"]) {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            background-color: var(--color-link);
+            border: 0px solid transparent;
+            border-radius: var(--border-radius);
+            padding: 0.5rem 1rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: filter 0.2s ease, transform 0.1s ease;
+
+            &:disabled {
+                opacity: 0.6;
+                cursor: not-allowed;
+                filter: none;
+                background-color: var(--color-secondary);
+            }
+        }
+
+        :where(canvas):is([is="ui-canvas"]) {
+            position: absolute;
+            inset: 0;
+            pointer-events: none;
+            z-index: 0;
+            padding: 0;
+            margin: 0;
+            border: none;
+            inline-size: stretch;
+            block-size: stretch;
+            max-inline-size: min(100%, min(100cqi, 100dvi)) !important;
+            max-block-size: min(100%, min(100cqb, 100dvb)) !important;
+            box-sizing: border-box !important;
+            min-inline-size: 0;
+            min-block-size: 0;
+            object-fit: cover;
+            object-position: center;
+        }
+
+    }
+}
+
+//
+@layer overrides {
+    @media screen {
+        [data-scheme="dark"],
+        [data-theme="dark"] {
+            color-scheme: dark only;
+
+            & * {
+                color-scheme: dark;
+            }
+        }
+
+        [data-scheme="light"],
+        [data-theme="light"] {
+            color-scheme: light only;
+
+            & * {
+                color-scheme: light;
+            }
+        }
+
+        [data-scheme="system"],
+        [data-theme="system"] {
+            color-scheme: light dark;
+        }
+        
+        /* Scheme Overrides — align with Theme.ts data-scheme / data-theme */
+        [data-scheme="dark"], [data-theme="dark"] { color-scheme: dark only; & * { color-scheme: dark; } }
+        [data-scheme="light"], [data-theme="light"] { color-scheme: light only; & * { color-scheme: light; } }
+        /*
+         * WHY: When QS/Theme pins data-theme=light|dark, do NOT let stale data-scheme=auto
+         * win (same specificity, later rule used to force `light dark` and keep OS dark).
+         */
+        [data-scheme="auto"]:not([data-theme="light"]):not([data-theme="dark"]),
+        [data-theme="auto"],
+        [data-scheme="system"]:not([data-theme="light"]):not([data-theme="dark"]),
+        [data-theme="system"] { color-scheme: light dark; }
+    }
+}