@skewedaspect/sleekspace-ui 0.2.0-beta.1

package/src/styles/components/_tabs.scss

@@ -0,0 +1,486 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Tabs Component Styles
+//----------------------------------------------------------------------------------------------------------------------
+
+@use '../theme/variables' as *;
+
+//----------------------------------------------------------------------------------------------------------------------
+// Tabs Design Tokens
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-tabs
+{
+    //------------------------------------------------------------------------------------------------------------------
+    // Spacing Tokens
+    //------------------------------------------------------------------------------------------------------------------
+
+    /// Gap between tabs in the tab list
+    --sk-tab-list-gap: 0.5rem;
+
+    /// Gap between tab content items (icon + text spacing)
+    --sk-tab-content-gap: 0.5rem;
+
+    /// Horizontal padding for tabs
+    --sk-tab-padding-x: 0.5rem;
+
+    /// Vertical padding for tabs
+    --sk-tab-padding-y: 0.65rem;
+
+    /// Padding for tab panels
+    --sk-tab-panel-padding: 0.5rem;
+
+    /// Minimum width for vertical tab lists
+    --sk-tab-list-vertical-min-width: 50px;
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Typography Tokens
+    //------------------------------------------------------------------------------------------------------------------
+
+    /// Font size for tab text
+    --sk-tab-font-size: 0.875rem;
+
+    /// Font weight for tab text
+    --sk-tab-font-weight: 500;
+
+    /// Font weight for active tabs (increased emphasis)
+    --sk-tab-font-weight-active: 600;
+
+    /// Line height for tab text
+    --sk-tab-line-height: 1.5;
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Border Tokens
+    //------------------------------------------------------------------------------------------------------------------
+
+    /// Width of the underline indicator
+    --sk-tab-underline-width: 2px;
+
+    /// Width of the tab list border (horizontal bottom or vertical right)
+    --sk-tab-list-border-width: var(--sk-border-width-thin);
+
+    /// Opacity of tab list border
+    --sk-tab-list-border-opacity: 0.2;
+
+    /// Border radius for focus ring
+    --sk-tab-focus-radius: 4px;
+
+    /// Focus ring width
+    --sk-tab-focus-width: 2px;
+
+    /// Focus ring offset
+    --sk-tab-focus-offset: 2px;
+
+    /// Cut corner size for horizontal tabs (active tab background)
+    --sk-tab-cut-corner-horizontal: 7px;
+
+    /// Cut corner size for vertical tabs (active tab background)
+    --sk-tab-cut-corner-vertical: 5px;
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Transition Tokens
+    //------------------------------------------------------------------------------------------------------------------
+
+    /// Tab transition duration (references global foundation token)
+    --sk-tab-transition-duration: var(--sk-transition-normal);
+
+    /// Tab transition easing (references global foundation token)
+    --sk-tab-transition-easing: var(--sk-transition-easing);
+
+    //------------------------------------------------------------------------------------------------------------------
+    // State Tokens
+    //------------------------------------------------------------------------------------------------------------------
+
+    /// Disabled state opacity (references global foundation token)
+    --sk-tab-disabled-opacity: var(--sk-opacity-disabled);
+
+    /// Inactive tab opacity (dimmed text for non-active tabs)
+    --sk-tab-inactive-opacity: 0.7;
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Color Tokens
+    //------------------------------------------------------------------------------------------------------------------
+    // These base tokens are overridden by each kind (neutral, primary, accent, etc.).
+    // This ensures consistent color behavior across all tab kinds.
+
+    /// Base color - the semantic color used for active tabs and underlines
+    /// Can be overridden externally via inline styles or CSS
+    --sk-tab-color-base: var(--sk-neutral-base);
+
+    /// Foreground/text color - calculated for optimal contrast
+    /// Can be overridden externally via inline styles or CSS
+    --sk-tab-fg: var(--sk-neutral-text);
+
+    /// Background color for active tabs (underline variant) - darkened version of base color
+    /// Same formula as buttons for consistency
+    --sk-tab-bg: color-mix(
+        in oklch,
+        color-mix(in oklch, var(--sk-tab-color-base) 75%, transparent 25%),
+        #000 46.25%
+    );
+
+    /// Active tab background opacity (subtle variant style)
+    --sk-tab-active-bg-opacity: var(--sk-opacity-subtle);
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Tabs Container
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-tabs
+{
+    display: flex;
+
+    // Horizontal orientation
+    &.sk-horizontal
+    {
+        flex-direction: column;
+
+        &.sk-placement-start
+        {
+            // Tab list at top (default for horizontal)
+        }
+
+        &.sk-placement-end
+        {
+            flex-direction: column-reverse; // Tab list at bottom
+        }
+    }
+
+    // Vertical orientation
+    &.sk-vertical
+    {
+        --sk-tab-padding-x: 1.0rem;
+        --sk-tab-padding-y: 0.25rem;
+
+        flex-direction: row;
+
+        &.sk-placement-start
+        {
+            // Tab list on left (default for vertical)
+        }
+
+        &.sk-placement-end
+        {
+            flex-direction: row-reverse; // Tab list on right
+        }
+    }
+
+    // Flush mode - use negative margins to align with container edges (e.g., inside panels)
+    // Apply negative margins on all sides except where the tab list border would be clipped
+    &.sk-flush
+    {
+        // Horizontal tabs - negative on left, right, and top/bottom depending on placement
+        &.sk-horizontal
+        {
+            margin-left: calc(-1 * var(--sk-panel-padding, 1rem));
+            margin-right: calc(-1 * var(--sk-panel-padding, 1rem));
+
+            &.sk-placement-start
+            {
+                margin-top: calc(-1 * var(--sk-panel-padding, 1rem));
+                margin-bottom: 0;
+            }
+
+            &.sk-placement-end
+            {
+                margin-top: 0;
+                margin-bottom: calc(-1 * var(--sk-panel-padding, 1rem));
+            }
+        }
+
+        // Vertical tabs - negative on top, bottom, and left/right depending on placement
+        &.sk-vertical
+        {
+            margin-top: calc(-1 * var(--sk-panel-padding, 1rem));
+            margin-bottom: calc(-1 * var(--sk-panel-padding, 1rem));
+
+            &.sk-placement-start
+            {
+                margin-left: calc(-1 * var(--sk-panel-padding, 1rem));
+                margin-right: 0;
+            }
+
+            &.sk-placement-end
+            {
+                margin-left: 0;
+                margin-right: calc(-1 * var(--sk-panel-padding, 1rem));
+            }
+        }
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Tab List
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-tab-list
+{
+    display: flex;
+    gap: var(--sk-tab-list-gap);
+    position: relative;
+
+    // Horizontal layout
+    &.sk-horizontal
+    {
+        flex-direction: row;
+        border-bottom: var(--sk-tab-list-border-width) solid oklch(from var(--sk-tab-color-base) l c h / var(--sk-tab-list-border-opacity));
+    }
+
+    // Vertical layout
+    &.sk-vertical
+    {
+        flex-direction: column;
+        border-right: var(--sk-tab-list-border-width) solid oklch(from var(--sk-tab-color-base) l c h / var(--sk-tab-list-border-opacity));
+        min-width: var(--sk-tab-list-vertical-min-width);
+    }
+}
+
+// Flush mode padding - add internal padding to tab list (half of panel padding)
+.sk-tabs.sk-flush .sk-tab-list
+{
+    &.sk-horizontal
+    {
+        padding-left: calc(var(--sk-panel-padding, 1rem) / 2);
+        padding-right: calc(var(--sk-panel-padding, 1rem) / 2);
+    }
+
+    &.sk-vertical
+    {
+        padding-top: calc(var(--sk-panel-padding, 1rem) / 2);
+        padding-bottom: calc(var(--sk-panel-padding, 1rem) / 2);
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Individual Tab
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-tab
+{
+    display: inline-flex;
+    align-items: center;
+    gap: var(--sk-tab-content-gap);
+    padding: var(--sk-tab-padding-y) var(--sk-tab-padding-x);
+    font-size: var(--sk-tab-font-size);
+    font-weight: var(--sk-tab-font-weight);
+    line-height: var(--sk-tab-line-height);
+    background: transparent;
+    border: none;
+    border-radius: 0; // Override any RekaUI defaults
+    cursor: pointer;
+    transition:
+        color var(--sk-tab-transition-duration) var(--sk-tab-transition-easing),
+        background-color var(--sk-tab-transition-duration) var(--sk-tab-transition-easing),
+        border-color var(--sk-tab-transition-duration) var(--sk-tab-transition-easing);
+    white-space: nowrap;
+    user-select: none;
+    position: relative;
+
+    // Default inactive state - dimmed foreground color for contrast
+    color: oklch(from var(--sk-tab-fg) l c h / var(--sk-tab-inactive-opacity));
+
+    &:hover:not(:disabled)
+    {
+        // Hover shows full foreground color
+        color: var(--sk-tab-fg);
+    }
+
+    &[data-state="active"]
+    {
+        // Active shows full foreground color
+        color: var(--sk-tab-fg);
+    }
+
+    &.sk-disabled,
+    &:disabled
+    {
+        opacity: var(--sk-tab-disabled-opacity);
+        cursor: not-allowed;
+    }
+
+    &:focus-visible
+    {
+        outline: var(--sk-tab-focus-width) solid var(--sk-focus-ring-color);
+        outline-offset: var(--sk-tab-focus-offset);
+        // Note: No border-radius here - it conflicts with our clip-path cut corners
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Tab Label (Overlapping Text for No Layout Shift)
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-tab-label
+{
+    display: grid;
+    align-items: center;
+    line-height: 1;
+    white-space: nowrap;
+
+    // Overlap both spans in the same grid cell
+    .sk-tab-label-normal,
+    .sk-tab-label-bold
+    {
+        grid-area: 1 / 1;
+    }
+
+    .sk-tab-label-normal
+    {
+        font-weight: var(--sk-tab-font-weight);
+    }
+
+    .sk-tab-label-bold
+    {
+        font-weight: var(--sk-tab-font-weight-active);
+        visibility: hidden;
+    }
+}
+
+// Active state: swap visibility
+.sk-tab[data-state="active"]
+{
+    .sk-tab-label-normal
+    {
+        visibility: hidden;
+    }
+
+    .sk-tab-label-bold
+    {
+        visibility: visible;
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Tab List Styles
+//----------------------------------------------------------------------------------------------------------------------
+
+// Apply kind-based colors at tabs container level (same element as inline styles)
+// This applies ONLY when a kind class is present. Without a kind class, uses the defaults
+// defined in the design tokens section (neutral), allowing inline styles to override them.
+.sk-tabs
+{
+    @each $kind in $kinds
+    {
+        &.sk-#{"" + $kind}
+        {
+            --sk-tab-color-base: var(--sk-#{$kind}-base);
+            --sk-tab-fg: var(--sk-#{$kind}-text);
+        }
+    }
+}
+
+// Individual tabs can override with their own kind (for mixed-color tabs)
+// This applies ONLY when a kind class is present on the individual tab.
+.sk-tab-list .sk-tab
+{
+    position: relative;
+    border-bottom: var(--sk-tab-underline-width) solid transparent;
+
+    // Apply kind-based color tokens to individual tabs
+    @each $kind in $kinds
+    {
+        &.sk-#{"" + $kind}
+        {
+            --sk-tab-color-base: var(--sk-#{$kind}-base);
+            --sk-tab-fg: var(--sk-#{$kind}-text);
+        }
+    }
+
+    // Active state styling
+    &[data-state="active"]
+    {
+        background-color: oklch(from var(--sk-tab-color-base) l c h / 0.15);
+        border-bottom-color: var(--sk-tab-color-base);
+    }
+}
+
+// Vertical tabs (becomes side line)
+.sk-tab-list.sk-vertical .sk-tab
+{
+    border-bottom: none;
+    border-right: var(--sk-tab-underline-width) solid transparent;
+
+    // For vertical, use right border instead
+    &[data-state="active"]
+    {
+        background-color: oklch(from var(--sk-tab-color-base) l c h / 0.15);
+        border-bottom-color: transparent;
+        border-right-color: var(--sk-tab-color-base);
+    }
+}
+
+// Horizontal tabs cut corners (not in flush mode)
+.sk-tabs:not(.sk-flush).sk-horizontal .sk-tab-list .sk-tab[data-state="active"]
+{
+    // Only cut upper left corner
+    clip-path: polygon(
+        var(--sk-tab-cut-corner-horizontal) 0%,
+        100% 0%,
+        100% 100%,
+        0% 100%,
+        0% var(--sk-tab-cut-corner-horizontal)
+    );
+}
+
+// Vertical tabs placement-specific cut corners
+.sk-tabs:not(.sk-flush).sk-vertical.sk-placement-start .sk-tab-list .sk-tab[data-state="active"]
+{
+    // Tabs on left - only cut top-left corner
+    clip-path: polygon(
+        var(--sk-tab-cut-corner-vertical) 0%,
+        100% 0%,
+        100% 100%,
+        0% 100%,
+        0% var(--sk-tab-cut-corner-vertical)
+    );
+    border-right-color: var(--sk-tab-color-base);
+}
+
+.sk-tabs:not(.sk-flush).sk-vertical.sk-placement-end .sk-tab-list .sk-tab[data-state="active"]
+{
+    // Tabs on right - only cut top-left corner
+    clip-path: polygon(
+        var(--sk-tab-cut-corner-vertical) 0%,
+        100% 0%,
+        100% 100%,
+        0% 100%,
+        0% var(--sk-tab-cut-corner-vertical)
+    );
+    border-right-color: var(--sk-tab-color-base);
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Tab Icon
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-tab-icon
+{
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.25rem;
+    height: 1.25rem;
+
+    svg
+    {
+        width: 100%;
+        height: 100%;
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Tab Panels
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-tab-panels
+{
+    flex: 1;
+}
+
+.sk-tab-panel
+{
+    padding: var(--sk-tab-panel-padding);
+    outline: none;
+}
+
+//----------------------------------------------------------------------------------------------------------------------