@skewedaspect/sleekspace-ui 0.2.0-beta.1

package/src/styles/components/_pagination.scss

@@ -0,0 +1,411 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Pagination Styles
+//----------------------------------------------------------------------------------------------------------------------
+// Follows button styling patterns with size system and variants.
+//----------------------------------------------------------------------------------------------------------------------
+
+@use '../mixins/cut-border' as *;
+
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-pagination
+{
+    // Layout
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--sk-space-xs);
+
+    // Color tokens - Default to neutral
+    --sk-pagination-color-base: var(--sk-neutral-base);
+    --sk-pagination-fg: var(--sk-neutral-text);
+
+    // Semantic kind variants
+    &.sk-neutral
+    {
+        --sk-pagination-color-base: var(--sk-neutral-base);
+        --sk-pagination-fg: var(--sk-neutral-text);
+    }
+
+    &.sk-primary
+    {
+        --sk-pagination-color-base: var(--sk-primary-base);
+        --sk-pagination-fg: var(--sk-primary-text);
+    }
+
+    &.sk-accent
+    {
+        --sk-pagination-color-base: var(--sk-accent-base);
+        --sk-pagination-fg: var(--sk-accent-text);
+    }
+
+    &.sk-info
+    {
+        --sk-pagination-color-base: var(--sk-info-base);
+        --sk-pagination-fg: var(--sk-info-text);
+    }
+
+    &.sk-success
+    {
+        --sk-pagination-color-base: var(--sk-success-base);
+        --sk-pagination-fg: var(--sk-success-text);
+    }
+
+    &.sk-warning
+    {
+        --sk-pagination-color-base: var(--sk-warning-base);
+        --sk-pagination-fg: var(--sk-warning-text);
+    }
+
+    &.sk-danger
+    {
+        --sk-pagination-color-base: var(--sk-danger-base);
+        --sk-pagination-fg: var(--sk-danger-text);
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-pagination-item
+{
+    //------------------------------------------------------------------------------------------------------------------
+    // Size System Tokens (compact version of button sizing)
+    //------------------------------------------------------------------------------------------------------------------
+
+    --sk-pagination-height-base: 1.625rem;
+    --sk-pagination-font-size-base: 0.75rem;
+
+    --sk-pagination-scale-xs: 0.625;
+    --sk-pagination-scale-sm: 0.8125;
+    --sk-pagination-scale-md: 1;
+    --sk-pagination-scale-lg: 1.25;
+    --sk-pagination-scale-xl: 1.5;
+
+    --sk-pagination-font-scale-xs: 0.769;
+    --sk-pagination-font-scale-sm: 0.923;
+    --sk-pagination-font-scale-md: 1;
+    --sk-pagination-font-scale-lg: 1.077;
+    --sk-pagination-font-scale-xl: 1.231;
+
+    --sk-pagination-radius-factor: var(--sk-border-radius-factor);
+    --sk-pagination-border-width: var(--sk-border-width-thin);
+    --sk-pagination-transition-duration: var(--sk-transition-normal);
+    --sk-pagination-transition-easing: var(--sk-transition-easing);
+    --sk-pagination-disabled-opacity: var(--sk-opacity-disabled);
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Color Tokens
+    //------------------------------------------------------------------------------------------------------------------
+
+    --sk-pagination-border-color: var(--sk-pagination-color-base);
+    --sk-pagination-glow-shadow: 0 0 0 transparent;
+
+    --sk-pagination-bg: color-mix(
+        in oklch,
+        color-mix(in oklch, var(--sk-pagination-color-base) 75%, transparent 25%),
+        #000 46.25%
+    );
+    --sk-pagination-bg-hover: color-mix(in oklch, var(--sk-pagination-bg) 85%, white 15%);
+    --sk-pagination-bg-active: color-mix(in oklch, var(--sk-pagination-bg) 85%, black 15%);
+    --sk-pagination-border-hover: color-mix(in oklch, var(--sk-pagination-color-base), white 12.68%);
+
+    // Variant tokens
+    --sk-pagination-outline-bg: rgba(5, 5, 5, 0.15);
+    --sk-pagination-subtle-opacity: var(--sk-opacity-subtle);
+    --sk-pagination-subtle-opacity-hover: var(--sk-opacity-subtle-hover);
+    --sk-pagination-subtle-border-opacity: var(--sk-opacity-subtle-border);
+    --sk-pagination-subtle-border-opacity-hover: var(--sk-opacity-subtle-border-hover);
+    --sk-pagination-glow-size: 8px;
+    --sk-pagination-glow-opacity: 0.4;
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Current size (set by size variants below)
+    //------------------------------------------------------------------------------------------------------------------
+
+    --sk-pagination-current-height: calc(var(--sk-pagination-height-base) * var(--sk-pagination-scale-md));
+    --sk-pagination-current-font-size: calc(var(--sk-pagination-font-size-base) * var(--sk-pagination-font-scale-md));
+    --sk-pagination-cut-size: calc(var(--sk-pagination-current-height) / var(--sk-pagination-radius-factor));
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Base Styles
+    //------------------------------------------------------------------------------------------------------------------
+
+    @include cut-border(
+        $cut: var(--sk-pagination-cut-size),
+        $border-width: var(--sk-pagination-border-width),
+        $border-color: var(--sk-pagination-border-color),
+        $corners: (top-left, bottom-right)
+    );
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: var(--sk-pagination-current-height);
+    height: var(--sk-pagination-current-height);
+    padding: 0 0.5em;
+    border: none;
+    font-family: inherit;
+    font-size: var(--sk-pagination-current-font-size);
+    font-weight: 600;
+    line-height: 1.5;
+    cursor: pointer;
+    user-select: none;
+
+    transition:
+        color var(--sk-pagination-transition-duration) var(--sk-pagination-transition-easing),
+        background-color var(--sk-pagination-transition-duration) var(--sk-pagination-transition-easing),
+        border-color var(--sk-pagination-transition-duration) var(--sk-pagination-transition-easing),
+        box-shadow var(--sk-pagination-transition-duration) var(--sk-pagination-transition-easing);
+
+    @supports (corner-shape: bevel)
+    {
+        box-shadow: var(--sk-pagination-glow-shadow);
+    }
+
+    // Focus state
+    &:focus-visible
+    {
+        outline: var(--sk-border-width-base) solid var(--sk-pagination-color-base);
+        outline-offset: 2px;
+    }
+
+    // Disabled state
+    &:disabled
+    {
+        opacity: var(--sk-pagination-disabled-opacity);
+        cursor: not-allowed;
+    }
+
+    // Ellipsis (non-interactive)
+    &.sk-ellipsis
+    {
+        cursor: default;
+        pointer-events: none;
+        background: transparent !important;
+        border-color: transparent !important;
+        --sk-pagination-border-color: transparent;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Size Variants
+    //------------------------------------------------------------------------------------------------------------------
+
+    &.sk-xs
+    {
+        --sk-pagination-current-height: calc(var(--sk-pagination-height-base) * var(--sk-pagination-scale-xs));
+        --sk-pagination-current-font-size: calc(var(--sk-pagination-font-size-base) * var(--sk-pagination-font-scale-xs));
+        --sk-pagination-cut-size: calc(var(--sk-pagination-current-height) / var(--sk-pagination-radius-factor));
+
+        @include cut-border(
+            $cut: var(--sk-pagination-cut-size),
+            $border-width: var(--sk-pagination-border-width),
+            $border-color: var(--sk-pagination-border-color),
+            $corners: (top-left, bottom-right)
+        );
+    }
+
+    &.sk-sm
+    {
+        --sk-pagination-current-height: calc(var(--sk-pagination-height-base) * var(--sk-pagination-scale-sm));
+        --sk-pagination-current-font-size: calc(var(--sk-pagination-font-size-base) * var(--sk-pagination-font-scale-sm));
+        --sk-pagination-cut-size: calc(var(--sk-pagination-current-height) / var(--sk-pagination-radius-factor));
+
+        @include cut-border(
+            $cut: var(--sk-pagination-cut-size),
+            $border-width: var(--sk-pagination-border-width),
+            $border-color: var(--sk-pagination-border-color),
+            $corners: (top-left, bottom-right)
+        );
+    }
+
+    &.sk-md
+    {
+        --sk-pagination-current-height: calc(var(--sk-pagination-height-base) * var(--sk-pagination-scale-md));
+        --sk-pagination-current-font-size: calc(var(--sk-pagination-font-size-base) * var(--sk-pagination-font-scale-md));
+        --sk-pagination-cut-size: calc(var(--sk-pagination-current-height) / var(--sk-pagination-radius-factor));
+
+        @include cut-border(
+            $cut: var(--sk-pagination-cut-size),
+            $border-width: var(--sk-pagination-border-width),
+            $border-color: var(--sk-pagination-border-color),
+            $corners: (top-left, bottom-right)
+        );
+    }
+
+    &.sk-lg
+    {
+        --sk-pagination-current-height: calc(var(--sk-pagination-height-base) * var(--sk-pagination-scale-lg));
+        --sk-pagination-current-font-size: calc(var(--sk-pagination-font-size-base) * var(--sk-pagination-font-scale-lg));
+        --sk-pagination-cut-size: calc(var(--sk-pagination-current-height) / var(--sk-pagination-radius-factor));
+
+        @include cut-border(
+            $cut: var(--sk-pagination-cut-size),
+            $border-width: var(--sk-pagination-border-width),
+            $border-color: var(--sk-pagination-border-color),
+            $corners: (top-left, bottom-right)
+        );
+    }
+
+    &.sk-xl
+    {
+        --sk-pagination-current-height: calc(var(--sk-pagination-height-base) * var(--sk-pagination-scale-xl));
+        --sk-pagination-current-font-size: calc(var(--sk-pagination-font-size-base) * var(--sk-pagination-font-scale-xl));
+        --sk-pagination-cut-size: calc(var(--sk-pagination-current-height) / var(--sk-pagination-radius-factor));
+
+        @include cut-border(
+            $cut: var(--sk-pagination-cut-size),
+            $border-width: var(--sk-pagination-border-width),
+            $border-color: var(--sk-pagination-border-color),
+            $corners: (top-left, bottom-right)
+        );
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Variant: Solid
+    //------------------------------------------------------------------------------------------------------------------
+
+    &.sk-solid
+    {
+        --sk-pagination-border-color: var(--sk-pagination-color-base);
+
+        background-color: var(--sk-pagination-bg);
+        color: var(--sk-pagination-fg);
+
+        &:hover:not(:disabled):not(.sk-ellipsis)
+        {
+            --sk-pagination-border-color: var(--sk-pagination-border-hover);
+            --sk-pagination-glow-shadow: 0 0 var(--sk-pagination-glow-size) oklch(from var(--sk-pagination-color-base) l c h / var(--sk-pagination-glow-opacity));
+
+            background-color: var(--sk-pagination-bg-hover);
+        }
+
+        &:active:not(:disabled):not(.sk-ellipsis)
+        {
+            --sk-pagination-border-color: var(--sk-pagination-border-hover);
+            --sk-pagination-glow-shadow: 0 0 0 transparent;
+
+            background-color: var(--sk-pagination-bg);
+            color: var(--sk-pagination-color-base);
+        }
+
+        // Active page (selected)
+        &.sk-active
+        {
+            background-color: var(--sk-pagination-color-base);
+            color: white;
+        }
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Variant: Outline
+    //------------------------------------------------------------------------------------------------------------------
+
+    &.sk-outline
+    {
+        --sk-pagination-border-color: var(--sk-pagination-color-base);
+
+        background-color: var(--sk-pagination-outline-bg);
+        color: var(--sk-pagination-color-base);
+
+        &:hover:not(:disabled):not(.sk-ellipsis)
+        {
+            --sk-pagination-border-color: var(--sk-pagination-border-hover);
+            --sk-pagination-glow-shadow: 0 0 var(--sk-pagination-glow-size) oklch(from var(--sk-pagination-color-base) l c h / var(--sk-pagination-glow-opacity));
+
+            background-color: var(--sk-pagination-bg);
+        }
+
+        &:active:not(:disabled):not(.sk-ellipsis)
+        {
+            --sk-pagination-border-color: var(--sk-pagination-border-hover);
+            --sk-pagination-glow-shadow: 0 0 0 transparent;
+
+            background-color: var(--sk-pagination-bg-hover);
+            color: var(--sk-pagination-fg);
+        }
+
+        // Active page (selected)
+        &.sk-active
+        {
+            background-color: var(--sk-pagination-color-base);
+            color: white;
+        }
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Variant: Subtle
+    //------------------------------------------------------------------------------------------------------------------
+
+    &.sk-subtle
+    {
+        --sk-pagination-border-color: oklch(from var(--sk-pagination-color-base) l c h / var(--sk-pagination-subtle-border-opacity));
+
+        background-color: oklch(from var(--sk-pagination-bg) l c h / var(--sk-pagination-subtle-opacity));
+        color: var(--sk-pagination-color-base);
+
+        &:hover:not(:disabled):not(.sk-ellipsis)
+        {
+            --sk-pagination-border-color: oklch(from var(--sk-pagination-color-base) l c h / var(--sk-pagination-subtle-border-opacity-hover));
+            --sk-pagination-glow-shadow: 0 0 var(--sk-pagination-glow-size) oklch(from var(--sk-pagination-color-base) l c h / var(--sk-pagination-glow-opacity));
+
+            background-color: oklch(from var(--sk-pagination-bg) l c h / var(--sk-pagination-subtle-opacity-hover));
+        }
+
+        &:active:not(:disabled):not(.sk-ellipsis)
+        {
+            --sk-pagination-border-color: var(--sk-pagination-color-base);
+            --sk-pagination-glow-shadow: 0 0 0 transparent;
+
+            background-color: var(--sk-pagination-bg);
+            color: var(--sk-pagination-fg);
+        }
+
+        // Active page (selected)
+        &.sk-active
+        {
+            --sk-pagination-border-color: var(--sk-pagination-color-base);
+
+            background-color: var(--sk-pagination-color-base);
+            color: white;
+        }
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Variant: Ghost
+    //------------------------------------------------------------------------------------------------------------------
+
+    &.sk-ghost
+    {
+        --sk-pagination-border-color: transparent;
+
+        background-color: transparent;
+        color: var(--sk-pagination-color-base);
+
+        &:hover:not(:disabled):not(.sk-ellipsis)
+        {
+            --sk-pagination-glow-shadow: 0 0 var(--sk-pagination-glow-size) oklch(from var(--sk-pagination-color-base) l c h / var(--sk-pagination-glow-opacity));
+
+            background-color: var(--sk-pagination-bg-hover);
+        }
+
+        &:active:not(:disabled):not(.sk-ellipsis)
+        {
+            --sk-pagination-border-color: var(--sk-pagination-border-hover);
+            --sk-pagination-glow-shadow: 0 0 0 transparent;
+
+            background-color: var(--sk-pagination-bg-hover);
+            color: var(--sk-pagination-fg);
+        }
+
+        // Active page (selected)
+        &.sk-active
+        {
+            --sk-pagination-border-color: var(--sk-pagination-color-base);
+
+            background-color: var(--sk-pagination-color-base);
+            color: white;
+        }
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/styles/components/_panel.scss

@@ -0,0 +1,281 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Panel Component Styles
+//----------------------------------------------------------------------------------------------------------------------
+
+@use '../theme/variables' as *;
+@use '../mixins' as *;
+
+//----------------------------------------------------------------------------------------------------------------------
+// Panel Design Tokens
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-panel
+{
+    //------------------------------------------------------------------------------------------------------------------
+    // Dimension Tokens
+    //------------------------------------------------------------------------------------------------------------------
+
+    /// Internal padding for panel content
+    --sk-panel-padding: 0.75rem;
+
+    /// Minimum height used as basis for cut size calculations
+    --sk-panel-min-height: 4rem;
+
+    /// Border radius calculation factor (references global token for consistency)
+    --sk-panel-radius-factor: var(--sk-border-radius-factor);
+
+    /// Default cut size for md panels (height / factor)
+    --sk-panel-cut-size: calc(var(--sk-panel-min-height) / var(--sk-panel-radius-factor));
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Border Tokens
+    //------------------------------------------------------------------------------------------------------------------
+
+    /// Border width (references global foundation token)
+    --sk-panel-border-width: var(--sk-border-width-thin);
+
+    /// Dynamic border color (set by kinds, uses currentColor as fallback)
+    --sk-panel-border-color: currentColor;
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Glow Effect Tokens
+    //------------------------------------------------------------------------------------------------------------------
+
+    /// Glow effect blur radius (intentionally larger than button for emphasis)
+    --sk-panel-glow-size: 12px;
+
+    /// Glow effect opacity (intentionally different from button for visual hierarchy)
+    --sk-panel-glow-opacity: 0.3;
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Decoration Tokens
+    //------------------------------------------------------------------------------------------------------------------
+
+    /// Offset distance of the corner decoration line from the cut edge
+    --sk-panel-decoration-offset: 3px;
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Generic Color Tokens
+    //------------------------------------------------------------------------------------------------------------------
+    // These base tokens are overridden by each kind (neutral, primary, accent, etc.).
+    // All color derivatives are automatically calculated from these base tokens.
+    // Uses the same color formulas as buttons for visual consistency across components.
+
+    /// Base color - the bright semantic color used for borders and as source for backgrounds
+    /// Each kind (neutral, primary, accent, etc.) overrides this with their specific color
+    --sk-panel-color-base: var(--sk-neutral-base);
+
+    /// Foreground/text color - calculated for optimal contrast against darkened backgrounds
+    /// Each kind overrides this with their pre-calculated foreground color
+    --sk-panel-fg: var(--sk-neutral-text);
+
+    /// Background color - darkened version of base color
+    /// Formula: mix(mix(base 75%, transparent 25%), black 46.25%)
+    /// Same formula as buttons for consistency - reduces lightness by approximately 60%
+    --sk-panel-bg: color-mix(
+        in oklch,
+        color-mix(in oklch, var(--sk-panel-color-base) 75%, transparent 25%),
+        #000 46.25%
+    );
+
+    /// Base border color - uses the bright base color directly for vibrant edges
+    --sk-panel-border-base: var(--sk-panel-color-base);
+
+    /// Inner glow effect - creates ambient lighting inside the panel
+    /// Uses relative color syntax to derive glow from base color with controlled opacity
+    --sk-panel-glow: inset 0 0 var(--sk-panel-glow-size) oklch(from var(--sk-panel-color-base) l c h / var(--sk-panel-glow-opacity));
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Kind Mixin
+//----------------------------------------------------------------------------------------------------------------------
+
+@mixin panel-kind($kind)
+{
+    &.sk-#{ "" + $kind }
+    {
+        // Override base color tokens for this kind
+        --sk-panel-color-base: var(--sk-#{ $kind }-base);
+        --sk-panel-fg: var(--sk-#{ $kind }-text);
+
+        // Set generic kind color for list markers and other cross-component features
+        --sk-kind-color: var(--sk-#{ $kind }-base);
+
+        // Set dynamic border color
+        --sk-panel-border-color: var(--sk-panel-border-base);
+
+        // Use calculated background and foreground
+        background-color: var(--sk-panel-bg);
+        color: var(--sk-panel-fg);
+
+        // Apply inner glow (works in both modern and fallback browsers)
+        box-shadow: var(--sk-panel-glow);
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Base Panel Styles
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-panel
+{
+    // Base structure
+    display: block;
+    position: relative;
+    box-sizing: border-box;
+    padding: var(--sk-panel-padding);
+
+    // Typography
+    font-family: var(--font-family-base);
+    line-height: 1.5;
+
+    *:last-child
+    {
+        margin-bottom: 0;
+    }
+
+    // Override list marker color to match component kind
+    // Uses generic --sk-kind-color set by kind mixins
+    ul li::marker
+    {
+        color: var(--sk-kind-color, var(--sk-panel-color-base));
+    }
+
+    // Apply cut-border mixin for beveled corner (bottom-right only)
+    @include cut-border(
+        $cut: var(--sk-panel-cut-size),
+        $border-width: var(--sk-panel-border-width),
+        $border-color: var(--sk-panel-border-color),
+        $corners: (bottom-right)
+    );
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Corner decoration line
+    //------------------------------------------------------------------------------------------------------------------
+
+    &::after
+    {
+        content: '';
+        position: absolute;
+        width: var(--sk-panel-cut-size);
+        height: 2px;
+        background: var(--sk-panel-border-base);
+        border-radius: 1px;
+        right: var(--sk-panel-decoration-offset);
+        bottom: calc(var(--sk-panel-cut-size) / 2 + var(--sk-panel-decoration-offset) - 1px);
+        transform: rotate(135deg);
+        transform-origin: center;
+        pointer-events: none;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Size variants (only affects cut size, not padding or dimensions)
+    //------------------------------------------------------------------------------------------------------------------
+
+    &.sk-xs
+    {
+        --sk-panel-cut-size: calc(var(--sk-panel-min-height) * 0.5 / var(--sk-panel-radius-factor));
+    }
+
+    &.sk-sm
+    {
+        --sk-panel-cut-size: calc(var(--sk-panel-min-height) * 0.75 / var(--sk-panel-radius-factor));
+    }
+
+    &.sk-md
+    {
+        --sk-panel-cut-size: calc(var(--sk-panel-min-height) * 1.0 / var(--sk-panel-radius-factor));
+    }
+
+    &.sk-lg
+    {
+        --sk-panel-cut-size: calc(var(--sk-panel-min-height) * 1.5 / var(--sk-panel-radius-factor));
+    }
+
+    &.sk-xl
+    {
+        --sk-panel-cut-size: calc(var(--sk-panel-min-height) * 2.0 / var(--sk-panel-radius-factor));
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+    // No Border variant
+    //------------------------------------------------------------------------------------------------------------------
+
+    &.sk-no-border
+    {
+        // Remove all border styling
+        --sk-panel-border-width: 0;
+        --sk-panel-cut-size: 0;
+        box-shadow: none;
+
+        // Remove the decoration as well
+        &::after
+        {
+            display: none;
+        }
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Scrollable Panel Support
+    //------------------------------------------------------------------------------------------------------------------
+    // When a panel contains scrollable content, use a .sk-panel-scroll-content wrapper
+    // This ensures the border/decoration stay fixed while content scrolls internally
+
+    &:has(.sk-panel-scroll-content)
+    {
+        padding: 0;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .sk-panel-scroll-content
+    {
+        padding: var(--sk-panel-padding);
+        margin-bottom: calc(var(--sk-panel-cut-size) + var(--sk-panel-decoration-offset));
+        overflow-y: auto;
+        overflow-x: hidden;
+        flex: 1;
+        min-height: 0;
+
+        // Kind-specific scrollbar colors
+        scrollbar-color: var(--sk-panel-color-base) transparent;
+
+        // Webkit scrollbar styling
+        &::-webkit-scrollbar-thumb
+        {
+            background: var(--sk-panel-color-base);
+            border-color: color-mix(in oklch, var(--sk-panel-color-base), var(--sk-color-gray-95) 20%);
+        }
+
+        &::-webkit-scrollbar-thumb:hover
+        {
+            background: color-mix(in oklch, var(--sk-panel-color-base), var(--sk-color-gray-10) var(--sk-mix-amount-moderate));
+            border-color: color-mix(
+                in oklch,
+                color-mix(in oklch, var(--sk-panel-color-base), var(--sk-color-gray-10) var(--sk-mix-amount-moderate)),
+                var(--sk-color-gray-95) 20%
+            );
+        }
+
+        &::-webkit-scrollbar-thumb:active
+        {
+            background: color-mix(in oklch, var(--sk-panel-color-base), var(--sk-color-gray-10) var(--sk-mix-amount-strong));
+            border-color: color-mix(
+                in oklch,
+                color-mix(in oklch, var(--sk-panel-color-base), var(--sk-color-gray-10) var(--sk-mix-amount-strong)),
+                var(--sk-color-gray-95) 20%
+            );
+        }
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Kind variants
+    //------------------------------------------------------------------------------------------------------------------
+
+    @each $kind in $kinds
+    {
+        @include panel-kind($kind);
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------