@fest-lib/fl-ui 0.1.1

package/src/styles/ui/_buttons.scss

@@ -0,0 +1,215 @@
+@use "sass:map";
+
+//
+@use "./layout" as layout;
+@use "./typography" as text;
+@use "./color" as color;
+@use "./colorize" as colorize;
+@use "./motion" as motion;
+@use "./utils" as utils;
+@use "./shared-overlays" as overlays;
+
+
+
+// -----------------------------------------------------------------------------
+// Shared base styles
+// -----------------------------------------------------------------------------
+
+@mixin button-structure() {
+    display: inline-flex;
+
+    //
+    place-items: center;
+    place-content: center;
+
+    //
+    gap: var(--button-gap, var(--gap-sm));
+
+    //
+    padding-block: var(--button-padding-y, var(--padding-sm));
+    padding-inline: var(--button-padding-x, var(--padding-lg));
+    min-block-size: var(--button-min-height, fit-content);
+    border-radius: var(--button-radius, var(--radius-full));
+
+    // Cursor and transition
+    cursor: pointer;
+    transition:
+        var(--transition-transform, transform var(--duration-fast) var(--ease-out)),
+        var(--transition-colors, color var(--duration-normal) var(--ease-out), background-color var(--duration-normal) var(--ease-out)),
+        var(--transition-opacity, opacity var(--duration-normal) var(--ease-out));
+
+    //
+    pointer-events: auto;
+    border: none;
+    outline: none;
+
+    //
+    position: relative;
+    font-size: text.md3-type("label-large", size);
+
+    //
+    letter-spacing: 0.01em;
+    text-decoration: none;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    user-select: none;
+
+    //
+    min-inline-size: 0px;
+    block-size: fit-content;
+    inline-size: fit-content;
+    max-block-size: stretch;
+    max-inline-size: stretch;
+    flex-wrap: nowrap;
+
+    //
+    &:disabled {
+        opacity: var(--state-opacity-disabled, 0.38);
+        pointer-events: none;
+    }
+
+    //
+    & > * { max-inline-size: stretch; }
+
+    //
+    & :where(span, a) {
+        display: inline;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+        flex-wrap: nowrap;
+    }
+
+    //
+    &:is(input) {
+        display: inline-block;
+    }
+}
+
+//
+@mixin button-overlays($fallback-color) {
+    --md-button-state-color: var(--md-button-state-color, #{$fallback-color});
+
+    @include overlays.state-overlay(var(--md-button-state-color, #{$fallback-color}));
+}
+
+@mixin button-focus-ring() {
+    @include overlays.focus-ring(var(--md-button-state-color, var(--md-primary)));
+}
+
+@mixin button-icon($size: var(--icon-size-lg)) {
+    @include overlays.icon-button($size);
+}
+
+
+
+
+// -----------------------------------------------------------------------------
+// Unified variant mixin
+// -----------------------------------------------------------------------------
+
+@mixin button-variant(
+    $variant: filled,
+    $role: primary,
+    $container-role: secondary-container,
+    $state-role: secondary,
+    $include-base: true
+) {
+    @include colorize.solid-colorize("&", ("shade": 0.05, "tint": 0.0, "scope": "selector", "global-targets": true));
+    @if $include-base { @include button-structure; }
+
+    // Compute the CSS variable to use for state overlays
+    $state-var: if(sass($variant == tonal): color.md3-var($state-role); else: color.md3-var($role));
+
+    // Common CSS variable setup
+    --md-button-bg: color-mix(in oklch, var(--surface-color, transparent) 90%, var(--on-surface-color, transparent));
+    --md-button-on: var(--on-surface-color, currentColor);
+    --md-button-outline-color: var(--border-color, transparent);
+
+    // Variant-specific styles
+    @if $variant == outlined {
+        background-color: transparent;
+        color: var(--md-button-on, var(--on-surface-color, currentColor));
+        border: 1px solid var(--md-button-outline-color, var(#{color.md3-var(outline)}));
+    } @else if $variant == text {
+        background-color: transparent;
+        color: var(--md-button-on, var(--on-surface-color, currentColor));
+        border: none;
+    } @else {
+        // filled, elevated, tonal
+        background-color: var(--surface-color, var(--surface-color, transparent));
+        color: var(--md-button-on, var(--on-surface-color, currentColor));
+        border: none;
+    }
+
+    // Apply state overlays and focus ring
+    @include button-overlays(var(#{$state-var}));
+    @include button-focus-ring;
+}
+
+
+// -----------------------------------------------------------------------------
+// Variant mixins (backward compatibility wrappers)
+// -----------------------------------------------------------------------------
+
+@mixin button-filled($role: primary, $include-base: true) {
+    @include button-variant(filled, $role, $include-base: $include-base);
+}
+
+@mixin button-elevated($role: primary, $include-base: true) {
+    @include button-variant(elevated, $role, $include-base: $include-base);
+}
+
+@mixin button-tonal($container-role: secondary-container, $state-role: secondary, $include-base: true) {
+    @include button-variant(tonal, $state-role, $container-role, $state-role, $include-base: $include-base);
+}
+
+@mixin button-outlined($role: primary, $include-base: true) {
+    @include button-variant(outlined, $role, $include-base: $include-base);
+}
+
+@mixin button-text($role: primary, $include-base: true) {
+    @include button-variant(text, $role, $include-base: $include-base);
+}
+
+
+
+
+
+// -----------------------------------------------------------------------------
+// Button base mixins
+// -----------------------------------------------------------------------------
+
+
+@mixin button-base {
+    @include button-structure;
+    @include button-filled;
+}
+
+//
+@mixin button-interactions($transition: var(--transition-base, var(--duration-normal))) {
+    @include motion.transition(all, $transition);
+}
+
+//
+@mixin button-colors() {
+    @include button-structure;
+    @include button-filled;
+}
+
+//
+@mixin button-base-variant() {
+    // Reuse unified structure with alternate sizing tokens
+    @include button-structure;
+    @include button-interactions;
+    @include button-colors;
+}
+
+//
+@mixin toolbar-button {
+    font-size: var(--font-size-sm);
+
+    //
+    @include layout.container-query("md") { span { display: none; } }
+}

package/src/styles/ui/_color.scss

@@ -0,0 +1,3 @@
+@function md3-var($role) {
+    @return "--md-#{$role}";
+}

package/src/styles/ui/_colorize.scss

@@ -0,0 +1,5 @@
+@mixin solid-colorize($selector: "&", $options: ()) {
+    #{$selector} {
+        color: var(--on-surface-color, currentColor);
+    }
+}

package/src/styles/ui/_content.scss

@@ -0,0 +1,169 @@
+
+// ============================================================================
+// Content Component Styles
+// ============================================================================
+@mixin tabbed-content($selector: ".content-box") {
+    @at-root :host {
+        #{$selector} {
+            // ================================================================
+            // Base Layout
+            // ================================================================
+            display: grid !important;
+            grid-template-columns: subgrid;
+            grid-template-rows: subgrid;
+            grid-column: 1 / -1 !important;
+            grid-row: 1 / -1 !important;
+            z-index: 1;
+
+            // Sizing
+            inline-size: stretch;
+            block-size: stretch;
+            min-inline-size: 0px;
+            min-block-size: 0px;
+            max-inline-size: stretch;
+            max-block-size: stretch;
+
+            // Spacing
+            gap: 0px;
+
+            // Visual
+            background: none;
+            background-color: transparent !important;
+            border-radius: 0px;
+            box-shadow: none;
+            overflow: hidden;
+            position: relative;
+            pointer-events: none;
+
+            // Containment
+            contain: none;
+
+            // Drop menu mode
+            @at-root :host([sidebar-drop-menu]) & {
+                overflow: visible;
+            }
+        }
+
+        // ================================================================
+        // Content Container
+        // ================================================================
+        #{$selector} :where(.ui-tabbed-box-content, .content) {
+            display: grid !important;
+            flex-direction: column;
+
+            // Grid layout - align with parent grid
+            grid-template-columns:
+                /*[sidebar-col] minmax(0px, var(--sidebar-inline-grid-size, 0px))
+                [button-col] minmax(0px, var(--button-inline-size, 3rem))*/
+                [content-col] minmax(0px, 1fr);
+            grid-template-rows: var(--tabbed-grid-rows);
+            grid-column: 1 / -1;
+            grid-row: 1 / -1;
+
+            // Sizing
+            inline-size: stretch;
+            block-size: stretch;
+            min-inline-size: 0px;
+            min-block-size: 0px;
+            max-inline-size: stretch;
+            max-block-size: stretch;
+            will-change: contents;
+
+            // Spacing
+            gap: 0px;
+
+            // Visual
+            background: none;
+            background-color: transparent !important;
+            border-radius: 0px;
+            box-shadow: none;
+            align-content: start;
+            pointer-events: none;
+
+            // Performance
+            container-type: inline-size;
+            content-visibility: auto;
+            contain: strict;
+            perspective: 1000;
+            transform: translateZ(0px);
+        }
+
+        // ================================================================
+        // Slotted Content
+        // ================================================================
+        #{$selector} ::slotted(*) {
+            display: grid;
+            flex-direction: column;
+            flex-grow: 1;
+            place-content: center;
+            place-items: center;
+
+            // Grid positioning
+            grid-column: 1 / -1;
+            grid-row: content-row;
+            grid-template-columns: minmax(0px, 1fr);
+            grid-template-rows: minmax(0px, 1fr);
+
+            // Sizing
+            inline-size: stretch;
+            block-size: stretch;
+            min-inline-size: 0px;
+            min-block-size: 0px;
+            max-inline-size: stretch;
+            max-block-size: stretch;
+
+            // Spacing
+            gap: 0px;
+
+            // Visual
+            background-color: transparent;
+            box-shadow: none;
+            line-height: var(--leading-normal, 1.5);
+            color: var(--md3-on-surface);
+            overflow: auto;
+            scrollbar-gutter: stable both-edges;
+        }
+
+        // Hidden slotted content
+        #{$selector} ::slotted([aria-hidden="true"], [hidden], :not([active])) {
+            display: none !important;
+        }
+
+        // ================================================================
+        // Responsive: Desktop Layout
+        // ================================================================
+        #{$selector} {
+            @container (min-inline-size: 800px) {
+                .content {
+                    grid-column: 2 / -1 !important;
+                }
+            }
+        }
+
+        // ================================================================
+        // Drop Menu Mode: Backdrop Overlay
+        // ================================================================
+        @at-root :host([sidebar-drop-menu]) #{$selector} {
+            // ================================================================
+            // Responsive: Desktop Layout
+            // ================================================================
+            @container (min-inline-size: 800px) {
+                .content {
+                    isolation: isolate;
+
+                    &::after {
+                        content: "";
+                        position: absolute;
+                        inset: clamp(0px, 1cqi, 0.5rem);
+                        border-radius: 0px;
+                        background: color-mix(in oklch, var(--md3-surface) 60%, transparent);
+                        opacity: 0;
+                        pointer-events: none;
+                        transition: opacity var(--transition-medium, 0.28s) var(--ease-out);
+                        z-index: 4;
+                    }
+                }
+            }
+        }
+    }
+}

package/src/styles/ui/_essentials-options.scss

@@ -0,0 +1,2 @@
+// Compile-time flags for `_essentials.scss`.
+$include-native-button-styles: false !default;