@skewedaspect/sleekspace-ui 0.5.1 → 0.7.0

package/src/styles/components/_select.scss

@@ -0,0 +1,439 @@
+@use '@/styles/mixins/cut-border' as *;
+
+//----------------------------------------------------------------------------------------------------------------------
+// Select Component Styles
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-select
+{
+    // Color tokens (can be overridden by custom colors)
+    --sk-select-color-base: var(--sk-neutral-base);
+    --sk-select-fg: var(--sk-neutral-text);
+
+    position: relative;
+    display: inline-flex;
+    width: 100%;
+
+    // Size variants
+    &.sk-sm
+    {
+        --sk-select-cut: 0.4rem;
+    }
+
+    &.sk-md
+    {
+        --sk-select-cut: 0.5rem;
+    }
+
+    &.sk-lg
+    {
+        --sk-select-cut: 0.6rem;
+    }
+
+    &.sk-xl
+    {
+        --sk-select-cut: 0.7rem;
+    }
+
+    // Kind variants
+    &.sk-neutral
+    {
+        --sk-select-color-base: var(--sk-neutral-base);
+        --sk-select-fg: var(--sk-neutral-text);
+    }
+
+    &.sk-primary
+    {
+        --sk-select-color-base: var(--sk-primary-base);
+        --sk-select-fg: var(--sk-primary-text);
+    }
+
+    &.sk-accent
+    {
+        --sk-select-color-base: var(--sk-accent-base);
+        --sk-select-fg: var(--sk-accent-text);
+    }
+
+    &.sk-info
+    {
+        --sk-select-color-base: var(--sk-info-base);
+        --sk-select-fg: var(--sk-info-text);
+    }
+
+    &.sk-success
+    {
+        --sk-select-color-base: var(--sk-success-base);
+        --sk-select-fg: var(--sk-success-text);
+    }
+
+    &.sk-warning
+    {
+        --sk-select-color-base: var(--sk-warning-base);
+        --sk-select-fg: var(--sk-warning-text);
+    }
+
+    &.sk-danger
+    {
+        --sk-select-color-base: var(--sk-danger-base);
+        --sk-select-fg: var(--sk-danger-text);
+    }
+
+    // Color kinds (direct palette access)
+    &.sk-neon-blue
+    {
+        --sk-select-color-base: var(--sk-neon-blue-base);
+        --sk-select-fg: var(--sk-neon-blue-text);
+    }
+
+    &.sk-neon-purple
+    {
+        --sk-select-color-base: var(--sk-neon-purple-base);
+        --sk-select-fg: var(--sk-neon-purple-text);
+    }
+
+    &.sk-neon-orange
+    {
+        --sk-select-color-base: var(--sk-neon-orange-base);
+        --sk-select-fg: var(--sk-neon-orange-text);
+    }
+
+    &.sk-neon-green
+    {
+        --sk-select-color-base: var(--sk-neon-green-base);
+        --sk-select-fg: var(--sk-neon-green-text);
+    }
+
+    &.sk-neon-mint
+    {
+        --sk-select-color-base: var(--sk-neon-mint-base);
+        --sk-select-fg: var(--sk-neon-mint-text);
+    }
+
+    &.sk-neon-pink
+    {
+        --sk-select-color-base: var(--sk-neon-pink-base);
+        --sk-select-fg: var(--sk-neon-pink-text);
+    }
+
+    &.sk-yellow
+    {
+        --sk-select-color-base: var(--sk-yellow-base);
+        --sk-select-fg: var(--sk-yellow-text);
+    }
+
+    &.sk-red
+    {
+        --sk-select-color-base: var(--sk-red-base);
+        --sk-select-fg: var(--sk-red-text);
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-select-trigger
+{
+    display: flex;
+    align-items: center;
+    gap: var(--sk-space-sm);
+    width: 100%;
+
+    // Button reset (SelectTrigger renders as <button>)
+    font-family: var(--sk-font-family-base);
+    font-size: inherit;
+    text-align: left;
+
+    @include cut-border(
+        $cut: var(--sk-select-cut),
+        $border-width: var(--sk-border-width-thin),
+        $border-color: var(--sk-select-color-base),
+        $corners: (top-right)
+    );
+
+    // Base styling
+    background: color-mix(
+        in oklch,
+        color-mix(in oklch, var(--sk-select-color-base) 75%, transparent 25%),
+        #000 65%
+    );
+    color: var(--sk-select-fg);
+    cursor: pointer;
+    outline: none;
+
+    // Transitions
+    transition-property: background, border-color;
+    transition-duration: var(--sk-transition-duration-base);
+
+    // Size variants
+    .sk-select.sk-sm &
+    {
+        height: 2rem;
+        padding: 0 var(--sk-space-sm);
+        font-size: 0.875rem;
+    }
+
+    .sk-select.sk-md &
+    {
+        height: 2.5rem;
+        padding: 0 var(--sk-space-md);
+        font-size: 1rem;
+    }
+
+    .sk-select.sk-lg &
+    {
+        height: 3rem;
+        padding: 0 var(--sk-space-md);
+        font-size: 1.125rem;
+    }
+
+    .sk-select.sk-xl &
+    {
+        height: 3.5rem;
+        padding: 0 var(--sk-space-md);
+        font-size: 1.25rem;
+    }
+
+    // Focus state
+    &:focus-visible
+    {
+        border-color: color-mix(in oklch, var(--sk-select-color-base), white 35%);
+        background: color-mix(
+            in oklch,
+            color-mix(in oklch, var(--sk-select-color-base) 75%, transparent 25%),
+            #000 25%
+        );
+    }
+
+    // Hover state
+    &:hover:not(:disabled)
+    {
+        border-color: color-mix(in oklch, var(--sk-select-color-base), white 20%);
+    }
+
+    // Disabled state
+    &:disabled
+    {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+
+    // SelectValue text -- fill remaining space
+    > span
+    {
+        flex: 1;
+        color: white;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+
+        // Placeholder (Reka UI adds data-placeholder when no value is selected)
+        &[data-placeholder]
+        {
+            color: color-mix(in oklch, var(--sk-select-fg), transparent 50%);
+        }
+    }
+
+    // Chevron icon -- fixed right
+    > svg
+    {
+        flex-shrink: 0;
+        opacity: 0.8;
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-select-content
+{
+    // Color tokens - define defaults (can be overridden by kind variants)
+    --sk-menu-color-base: var(--sk-neutral-base);
+    --sk-menu-fg: var(--sk-neutral-text);
+
+    position: relative;
+    min-width: var(--reka-select-trigger-width);
+    max-height: 20rem;
+    overflow: auto;
+    padding: var(--sk-space-xs);
+    z-index: 1000;
+
+    @include cut-border(
+        $cut: 0.625rem,
+        $border-width: var(--sk-border-width-thin),
+        $border-color: var(--sk-menu-color-base),
+        $corners: (top-left)
+    );
+
+    // Base styling
+    background: color-mix(
+        in oklch,
+        color-mix(in oklch, var(--sk-menu-color-base) 95%, transparent 5%),
+        #000 46.25%
+    );
+    color: var(--sk-menu-fg);
+    box-shadow: var(--sk-shadow-lg);
+
+    // Kind variants (defined directly on content for portal support)
+    &.sk-neutral
+    {
+        --sk-menu-color-base: var(--sk-neutral-base);
+        --sk-menu-fg: var(--sk-neutral-text);
+    }
+
+    &.sk-primary
+    {
+        --sk-menu-color-base: var(--sk-primary-base);
+        --sk-menu-fg: var(--sk-primary-text);
+    }
+
+    &.sk-accent
+    {
+        --sk-menu-color-base: var(--sk-accent-base);
+        --sk-menu-fg: var(--sk-accent-text);
+    }
+
+    &.sk-info
+    {
+        --sk-menu-color-base: var(--sk-info-base);
+        --sk-menu-fg: var(--sk-info-text);
+    }
+
+    &.sk-success
+    {
+        --sk-menu-color-base: var(--sk-success-base);
+        --sk-menu-fg: var(--sk-success-text);
+    }
+
+    &.sk-warning
+    {
+        --sk-menu-color-base: var(--sk-warning-base);
+        --sk-menu-fg: var(--sk-warning-text);
+    }
+
+    &.sk-danger
+    {
+        --sk-menu-color-base: var(--sk-danger-base);
+        --sk-menu-fg: var(--sk-danger-text);
+    }
+
+    // Color kinds (direct palette access)
+    &.sk-neon-blue
+    {
+        --sk-menu-color-base: var(--sk-neon-blue-base);
+        --sk-menu-fg: var(--sk-neon-blue-text);
+    }
+
+    &.sk-neon-purple
+    {
+        --sk-menu-color-base: var(--sk-neon-purple-base);
+        --sk-menu-fg: var(--sk-neon-purple-text);
+    }
+
+    &.sk-neon-orange
+    {
+        --sk-menu-color-base: var(--sk-neon-orange-base);
+        --sk-menu-fg: var(--sk-neon-orange-text);
+    }
+
+    &.sk-neon-green
+    {
+        --sk-menu-color-base: var(--sk-neon-green-base);
+        --sk-menu-fg: var(--sk-neon-green-text);
+    }
+
+    &.sk-neon-mint
+    {
+        --sk-menu-color-base: var(--sk-neon-mint-base);
+        --sk-menu-fg: var(--sk-neon-mint-text);
+    }
+
+    &.sk-neon-pink
+    {
+        --sk-menu-color-base: var(--sk-neon-pink-base);
+        --sk-menu-fg: var(--sk-neon-pink-text);
+    }
+
+    &.sk-yellow
+    {
+        --sk-menu-color-base: var(--sk-yellow-base);
+        --sk-menu-fg: var(--sk-yellow-text);
+    }
+
+    &.sk-red
+    {
+        --sk-menu-color-base: var(--sk-red-base);
+        --sk-menu-fg: var(--sk-red-text);
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-select-item
+{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--sk-space-md);
+    padding: var(--sk-space-xs) var(--sk-space-md);
+    cursor: pointer;
+    color: color-mix(in oklch, var(--sk-menu-fg), black 15%);
+    font-size: 0.875rem;
+    outline: none;
+    user-select: none;
+
+    @include cut-border(
+        $cut: 0.5rem,
+        $border-width: var(--sk-border-width-thin),
+        $border-color: transparent,
+        $corners: (top-left bottom-right)
+    );
+
+    // Hover state
+    &:hover:not([data-disabled])
+    {
+        background: color-mix(
+            in oklch,
+            color-mix(in oklch, var(--sk-menu-color-base), black 30%),
+            transparent 10%
+        );
+        color: var(--sk-menu-fg);
+    }
+
+    // Highlighted state (keyboard navigation)
+    &[data-highlighted]
+    {
+        background: color-mix(
+            in oklch,
+            color-mix(in oklch, var(--sk-menu-color-base), black 30%),
+            transparent 10%
+        );
+        color: var(--sk-menu-fg);
+        outline: none;
+    }
+
+    // Disabled state
+    &[data-disabled]
+    {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-select-item-indicator
+{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-select-separator
+{
+    height: 1px;
+    margin: var(--sk-space-xs) 0;
+    background: color-mix(in oklch, var(--sk-menu-color-base), transparent 70%);
+}
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/styles/components/_sidebar.scss

@@ -15,6 +15,26 @@
     width: var(--sk-sidebar-width, 180px);
     flex-shrink: 0;
 
+    // Item theming -- uses same darkened color derivation as button system.
+    // --sk-sidebar-color-base is overridden per kind below; bg/hover/active derive automatically.
+    --sk-sidebar-color-base: var(--sk-neutral-base);
+    --sk-sidebar-item-bg: color-mix(
+        in oklch,
+        color-mix(in oklch, var(--sk-sidebar-color-base) 75%, transparent 25%),
+        #000 46.25%
+    );
+    --sk-sidebar-item-hover-bg: color-mix(in oklch, var(--sk-sidebar-item-bg) 85%, white 15%);
+    --sk-sidebar-item-hover-text: color-mix(in oklch, var(--sk-sidebar-color-base), white 30%);
+    --sk-sidebar-item-active-text: color-mix(in oklch, var(--sk-sidebar-color-base), white 50%);
+    --sk-sidebar-item-active-bg: var(--sk-sidebar-item-bg);
+
+    &.sk-primary { --sk-sidebar-color-base: var(--sk-primary-base); }
+    &.sk-accent { --sk-sidebar-color-base: var(--sk-accent-base); }
+    &.sk-info { --sk-sidebar-color-base: var(--sk-info-base); }
+    &.sk-success { --sk-sidebar-color-base: var(--sk-success-base); }
+    &.sk-warning { --sk-sidebar-color-base: var(--sk-warning-base); }
+    &.sk-danger { --sk-sidebar-color-base: var(--sk-danger-base); }
+
     .sk-sidebar-nav
     {
         display: flex;
@@ -50,6 +70,7 @@
 
 .sk-sidebar-item
 {
+    position: relative;
     color: var(--sk-neutral-text);
     text-decoration: none;
     padding: 0.5rem 0.75rem;
@@ -60,8 +81,8 @@
 
     &:hover
     {
-        background: color-mix(in oklch, var(--sk-neutral-base), black 40%);
-        color: var(--sk-accent-base);
+        background: var(--sk-sidebar-item-hover-bg);
+        color: var(--sk-sidebar-item-hover-text);
         clip-path: polygon(
             10px 0%,
             100% 0%,
@@ -75,8 +96,8 @@
     &.sk-active,
     &.router-link-active
     {
-        background: color-mix(in oklch, var(--sk-neutral-base), black 40%);
-        color: var(--sk-primary-base);
+        background: var(--sk-sidebar-item-active-bg);
+        color: var(--sk-sidebar-item-active-text);
         font-weight: 600;
         clip-path: polygon(
             10px 0%,
@@ -86,6 +107,64 @@
             0% 100%,
             0% 10px
         );
+
+        // Active indicator: 2px L-shape tracing the left edge + top-left bevel
+        &::before
+        {
+            content: '';
+            position: absolute;
+            inset: 0;
+            background: var(--sk-sidebar-color-base);
+            clip-path: polygon(
+                0% 100%,
+                0px 10px,
+                10px 0px,
+                11.41px 1.41px,
+                2px 10.83px,
+                2px 100%
+            );
+        }
+    }
+
+    // Mirrored for right-side placement
+    .sk-sidebar-right &
+    {
+        &:hover
+        {
+            clip-path: polygon(
+                0% 0%,
+                calc(100% - 10px) 0%,
+                100% 10px,
+                100% 100%,
+                10px 100%,
+                0% calc(100% - 10px)
+            );
+        }
+
+        &.sk-active,
+        &.router-link-active
+        {
+            clip-path: polygon(
+                0% 0%,
+                calc(100% - 10px) 0%,
+                100% 10px,
+                100% 100%,
+                10px 100%,
+                0% calc(100% - 10px)
+            );
+
+            &::before
+            {
+                clip-path: polygon(
+                    100% 100%,
+                    100% 10px,
+                    calc(100% - 10px) 0px,
+                    calc(100% - 11.41px) 1.41px,
+                    calc(100% - 2px) 10.83px,
+                    calc(100% - 2px) 100%
+                );
+            }
+        }
     }
 }
 

package/src/styles/components/_splitter.scss

@@ -0,0 +1,136 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Splitter Component Styles
+//----------------------------------------------------------------------------------------------------------------------
+
+$kinds: (neutral, primary, accent, info, success, warning, danger);
+
+//----------------------------------------------------------------------------------------------------------------------
+// Kind Mixin
+//----------------------------------------------------------------------------------------------------------------------
+
+@mixin splitter-kind($kind)
+{
+    &.sk-#{ '' + $kind }
+    {
+        --sk-splitter-color-base: var(--sk-#{ $kind }-base);
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Splitter Group
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-splitter
+{
+    --sk-splitter-color-base: var(--sk-neutral-base);
+    --sk-splitter-handle-color: var(--sk-splitter-color-base);
+    --sk-splitter-handle-size: 4px;
+    --sk-splitter-handle-gap: 0.5rem;
+
+    display: flex;
+    width: 100%;
+    height: 100%;
+
+    &.sk-horizontal
+    {
+        flex-direction: row;
+    }
+
+    &.sk-vertical
+    {
+        flex-direction: column;
+    }
+
+    @each $kind in $kinds
+    {
+        @include splitter-kind($kind);
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Splitter Panel
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-splitter-panel
+{
+    overflow: auto;
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Splitter Handle
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-splitter-handle
+{
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: oklch(from var(--sk-splitter-handle-color) l c h / 0.1);
+    transition: background var(--sk-transition-duration-fast) var(--sk-transition-timing-default);
+
+    // Horizontal layout: vertical handle bar
+    .sk-horizontal > &
+    {
+        width: var(--sk-splitter-handle-size);
+        cursor: col-resize;
+    }
+
+    // Vertical layout: horizontal handle bar
+    .sk-vertical > &
+    {
+        height: var(--sk-splitter-handle-size);
+        cursor: row-resize;
+    }
+
+    &:hover:not([data-disabled])
+    {
+        background: oklch(from var(--sk-splitter-handle-color) l c h / 0.25);
+    }
+
+    &:active:not([data-disabled])
+    {
+        background: oklch(from var(--sk-splitter-handle-color) l c h / 0.4);
+    }
+
+    &:focus-visible
+    {
+        outline: var(--sk-border-width-base) solid var(--sk-splitter-handle-color);
+        outline-offset: -2px;
+    }
+
+    &[data-disabled]
+    {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+}
+
+// Handle grip indicator (dots)
+.sk-splitter-handle-grip
+{
+    display: flex;
+    gap: 2px;
+    opacity: 0.5;
+    transition: opacity var(--sk-transition-duration-fast) var(--sk-transition-timing-default);
+
+    .sk-splitter-handle:hover &
+    {
+        opacity: 0.8;
+    }
+
+    .sk-horizontal > .sk-splitter-handle &
+    {
+        flex-direction: column;
+    }
+}
+
+.sk-splitter-handle-dot
+{
+    width: 3px;
+    height: 3px;
+    border-radius: 50%;
+    background: var(--sk-splitter-handle-color);
+}
+
+//----------------------------------------------------------------------------------------------------------------------