@fest-lib/veela 0.1.20 → 1.0.1

package/src/scss/ui/components/appearance-desktop.scss

@@ -0,0 +1,14 @@
+// Desktop Specific Styles
+@mixin host-related($host, $child) {
+    // outside web component
+    #{$host} { & > #{$child} { @content; } }
+    // inside web component
+    :host(#{$host}) { ::slotted(#{$child}) { @content; } }
+}
+
+//
+@include host-related('ui-taskbar[data-type="desktop"]', 'ui-task[data-focus]') {
+    background: --c2-surface(0.0, var(--current));
+    color: --c2-on-surface(0.0, var(--current));
+    color: contrast-color(var(--c2-surface(0.0, var(--current))));
+}

package/src/scss/ui/components/appearance-mobile.scss

@@ -0,0 +1,14 @@
+// Mobile Specific Styles
+@mixin host-related($host, $child) {
+    // outside web component
+    #{$host} { & > #{$child} { @content; } }
+    // inside web component
+    :host(#{$host}) { ::slotted(#{$child}) { @content; } }
+}
+
+//
+@include host-related('ui-taskbar[data-type="mobile"]', 'ui-task[data-focus]') {
+    background: --c2-surface(0.0, var(--current));
+    color: --c2-on-surface(0.0, var(--current));
+    color: contrast-color(var(--c2-surface(0.0, var(--current))));
+}

package/src/scss/ui/components/calendar/flyout.scss

@@ -0,0 +1,194 @@
+/*
+ * Filename: CalendarFlyout.scss
+ * FullPath: modules/projects/fl.ui/src/ui/navigation/calendar/CalendarFlyout.scss
+ * Change date and time: 08.30.00_02.08.2026
+ * Reason for changes: Win11-like calendar flyout — compact acrylic-ish panel, no backdrop-filter.
+ */
+
+@layer components {
+    :host {
+        --cal-base-color: var(--color-primary);
+        --cal-surface: var(--color-surface);
+        --cal-on-surface: var(--color-on-surface);
+        --cal-outline: color-mix(in oklab, var(--color-outline-variant) 80%, transparent);
+        --cal-hover: color-mix(in oklab, var(--color-on-surface) 8%, transparent);
+
+        display: block;
+        box-sizing: border-box;
+        color-scheme: inherit;
+        pointer-events: auto;
+        color: var(--cal-on-surface);
+        min-inline-size: 280px;
+        max-inline-size: min(360px, 96vw);
+    }
+
+    :host([hidden]) {
+        display: none !important;
+    }
+
+    .ui-cal-flyout__panel {
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        gap: 0.6rem;
+        inline-size: 100%;
+        padding: 0.9rem 0.9rem 0.75rem;
+        border-radius: 14px;
+        background: var(--cal-surface);
+        color: contrast-color(var(--cal-surface));
+        border: 1px solid var(--cal-outline);
+        box-shadow:
+            0 18px 44px -18px color-mix(in oklab, #000 55%, transparent),
+            0 2px 6px -2px color-mix(in oklab, #000 35%, transparent);
+        /* NOTE: no backdrop-filter — breaks phosphor duotone icon rendering elsewhere in chrome. */
+    }
+
+    .ui-cal-flyout__header {
+        display: flex;
+        align-items: baseline;
+        justify-content: space-between;
+        padding-inline: 0.15rem;
+    }
+
+    .ui-cal-flyout__today {
+        margin: 0;
+        font-size: 0.95rem;
+        font-weight: 650;
+        line-height: 1.25;
+        color: var(--cal-on-surface);
+    }
+
+    .ui-cal-flyout__nav {
+        display: grid;
+        grid-template-columns: auto 1fr auto;
+        align-items: center;
+        gap: 0.35rem;
+    }
+
+    .ui-cal-flyout__nav-btn {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        inline-size: 2rem;
+        block-size: 2rem;
+        padding: 0;
+        border: none;
+        border-radius: 8px;
+        background: transparent;
+        color: var(--cal-on-surface);
+        cursor: pointer;
+        appearance: none;
+        -webkit-tap-highlight-color: transparent;
+
+        ui-icon {
+            /* WHY: Phosphor default --icon-padding shrinks nav carets to dots. */
+            --icon-size: 1.25rem;
+            --icon-padding: 0;
+            --icon-color: currentColor;
+            inline-size: var(--icon-size);
+            block-size: var(--icon-size);
+            min-inline-size: var(--icon-size);
+            min-block-size: var(--icon-size);
+            color: currentColor;
+            pointer-events: none;
+        }
+
+        &:hover {
+            background: var(--cal-hover);
+            color: contrast-color(var(--cal-hover));
+        }
+
+        &:active {
+            background: color-mix(in oklab, var(--cal-hover) 160%, transparent);
+            color: contrast-color(color-mix(in oklab, var(--cal-hover) 160%, transparent));
+        }
+
+        &:focus-visible {
+            outline: 2px solid var(--cal-base-color);
+            outline-offset: 1px;
+        }
+    }
+
+    .ui-cal-flyout__month-label {
+        text-align: center;
+        font-size: 0.86rem;
+        font-weight: 600;
+        letter-spacing: 0.01em;
+        color: var(--cal-on-surface);
+        user-select: none;
+    }
+
+    .ui-cal-flyout__weekdays {
+        display: grid;
+        grid-template-columns: repeat(7, minmax(0, 1fr));
+        gap: 2px;
+        padding-inline: 0.1rem;
+    }
+
+    .ui-cal-flyout__weekday {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 0.7rem;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.02em;
+        color: color-mix(in oklab, var(--cal-on-surface) 62%, transparent);
+        padding-block: 0.2rem;
+        user-select: none;
+    }
+
+    .ui-cal-flyout__grid {
+        display: grid;
+        grid-template-columns: repeat(7, minmax(0, 1fr));
+        gap: 2px;
+        padding-inline: 0.1rem;
+    }
+
+    .ui-cal-flyout__day {
+        position: relative;
+        inline-size: 100%;
+        aspect-ratio: 1 / 1;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        border: none;
+        border-radius: 999px;
+        background: transparent;
+        color: var(--cal-on-surface);
+        font-size: 0.82rem;
+        font-variant-numeric: tabular-nums;
+        cursor: pointer;
+        appearance: none;
+        -webkit-tap-highlight-color: transparent;
+        transition: background-color 120ms ease, color 120ms ease;
+
+        &[data-other-month] {
+            color: color-mix(in oklab, var(--cal-on-surface) 42%, transparent);
+        }
+
+        &:hover {
+            background: var(--cal-hover);
+            color: contrast-color(var(--cal-hover));
+        }
+
+        &:focus-visible {
+            outline: 2px solid var(--cal-base-color);
+            outline-offset: 1px;
+        }
+
+        &[data-today] {
+            background: color-mix(in oklab, var(--cal-base-color) 88%, transparent);
+            color: light-dark(#ffffff, #ffffff);
+            font-weight: 700;
+        }
+
+        &[data-selected] {
+            box-shadow: 0 0 0 2px var(--cal-base-color) inset;
+        }
+
+        &[data-today][data-selected] {
+            box-shadow: 0 0 0 2px color-mix(in oklab, var(--cal-base-color) 70%, #fff 20%) inset;
+        }
+    }
+}