@skewedaspect/sleekspace-ui 0.2.0-beta.1

package/src/styles/components/_listbox.scss

@@ -0,0 +1,453 @@
+@use '@/styles/mixins/cut-border' as *;
+
+//----------------------------------------------------------------------------------------------------------------------
+// Listbox Component Styles
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-listbox
+{
+    // Color tokens (can be overridden by custom colors)
+    --sk-listbox-color-base: var(--sk-neutral-base);
+    --sk-listbox-fg: var(--sk-neutral-text);
+
+    position: relative;
+    display: inline-flex;
+
+    // Size variants
+    &.sk-sm
+    {
+        --sk-listbox-cut: 0.4rem;
+    }
+
+    &.sk-md
+    {
+        --sk-listbox-cut: 0.5rem;
+    }
+
+    &.sk-lg
+    {
+        --sk-listbox-cut: 0.6rem;
+    }
+
+    &.sk-xl
+    {
+        --sk-listbox-cut: 0.7rem;
+    }
+
+    // Kind variants
+    &.sk-neutral
+    {
+        --sk-listbox-color-base: var(--sk-neutral-base);
+        --sk-listbox-fg: var(--sk-neutral-text);
+    }
+
+    &.sk-primary
+    {
+        --sk-listbox-color-base: var(--sk-primary-base);
+        --sk-listbox-fg: var(--sk-primary-text);
+    }
+
+    &.sk-accent
+    {
+        --sk-listbox-color-base: var(--sk-accent-base);
+        --sk-listbox-fg: var(--sk-accent-text);
+    }
+
+    &.sk-info
+    {
+        --sk-listbox-color-base: var(--sk-info-base);
+        --sk-listbox-fg: var(--sk-info-text);
+    }
+
+    &.sk-success
+    {
+        --sk-listbox-color-base: var(--sk-success-base);
+        --sk-listbox-fg: var(--sk-success-text);
+    }
+
+    &.sk-warning
+    {
+        --sk-listbox-color-base: var(--sk-warning-base);
+        --sk-listbox-fg: var(--sk-warning-text);
+    }
+
+    &.sk-danger
+    {
+        --sk-listbox-color-base: var(--sk-danger-base);
+        --sk-listbox-fg: var(--sk-danger-text);
+    }
+
+    // Color kinds (direct palette access)
+    &.sk-neon-blue
+    {
+        --sk-listbox-color-base: var(--sk-neon-blue-base);
+        --sk-listbox-fg: var(--sk-neon-blue-text);
+    }
+
+    &.sk-neon-purple
+    {
+        --sk-listbox-color-base: var(--sk-neon-purple-base);
+        --sk-listbox-fg: var(--sk-neon-purple-text);
+    }
+
+    &.sk-neon-orange
+    {
+        --sk-listbox-color-base: var(--sk-neon-orange-base);
+        --sk-listbox-fg: var(--sk-neon-orange-text);
+    }
+
+    &.sk-neon-green
+    {
+        --sk-listbox-color-base: var(--sk-neon-green-base);
+        --sk-listbox-fg: var(--sk-neon-green-text);
+    }
+
+    &.sk-neon-mint
+    {
+        --sk-listbox-color-base: var(--sk-neon-mint-base);
+        --sk-listbox-fg: var(--sk-neon-mint-text);
+    }
+
+    &.sk-neon-pink
+    {
+        --sk-listbox-color-base: var(--sk-neon-pink-base);
+        --sk-listbox-fg: var(--sk-neon-pink-text);
+    }
+
+    &.sk-yellow
+    {
+        --sk-listbox-color-base: var(--sk-yellow-base);
+        --sk-listbox-fg: var(--sk-yellow-text);
+    }
+
+    &.sk-red
+    {
+        --sk-listbox-color-base: var(--sk-red-base);
+        --sk-listbox-fg: var(--sk-red-text);
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-listbox-anchor
+{
+    display: flex;
+    align-items: center;
+    width: 100%;
+    position: relative;
+
+    @include cut-border(
+        $cut: var(--sk-listbox-cut),
+        $border-width: var(--sk-border-width-thin),
+        $border-color: var(--sk-listbox-color-base),
+        $corners: (top-right)
+    );
+
+    // Base styling
+    background: color-mix(
+        in oklch,
+        color-mix(in oklch, var(--sk-listbox-color-base) 75%, transparent 25%),
+        #000 65%
+    );
+
+    // Transitions
+    transition-property: background, border-color;
+    transition-duration: var(--sk-transition-duration-base);
+
+    // Focus-within state
+    &:focus-within
+    {
+        border-color: color-mix(in oklch, var(--sk-listbox-color-base), white 35%);
+        background: color-mix(
+            in oklch,
+            color-mix(in oklch, var(--sk-listbox-color-base) 75%, transparent 25%),
+            #000 25%
+        );
+    }
+
+    // Hover state
+    &:hover:not(:has(input:disabled))
+    {
+        border-color: color-mix(in oklch, var(--sk-listbox-color-base), white 20%);
+    }
+
+    // Disabled state
+    &:has(input:disabled)
+    {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-listbox-input
+{
+    flex: 1;
+    background: transparent;
+    border: none;
+    color: var(--sk-listbox-fg);
+    font-family: var(--sk-font-family-base);
+    outline: none;
+    cursor: text;
+
+    // Size variants (match input heights)
+    .sk-listbox.sk-sm &
+    {
+        height: 2rem;
+        padding: 0 var(--sk-space-sm);
+        font-size: 0.875rem;
+    }
+
+    .sk-listbox.sk-md &
+    {
+        height: 2.5rem;
+        padding: 0 var(--sk-space-md);
+        font-size: 1rem;
+    }
+
+    .sk-listbox.sk-lg &
+    {
+        height: 3rem;
+        padding: 0 var(--sk-space-md);
+        font-size: 1.125rem;
+    }
+
+    .sk-listbox.sk-xl &
+    {
+        height: 3.5rem;
+        padding: 0 var(--sk-space-md);
+        font-size: 1.25rem;
+    }
+
+    &::placeholder
+    {
+        color: color-mix(in oklch, var(--sk-listbox-fg), transparent 50%);
+    }
+
+    &:disabled
+    {
+        cursor: not-allowed;
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-listbox-trigger
+{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 var(--sk-space-sm);
+    color: var(--sk-listbox-fg);
+    cursor: pointer;
+    flex-shrink: 0;
+
+    &:hover
+    {
+        opacity: 0.8;
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-listbox-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-combobox-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-listbox-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)
+    );
+
+    // Transitions
+    transition-property: background, color;
+    transition-duration: var(--sk-transition-duration-base);
+
+    // 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);
+        transition-duration: var(--sk-transition-duration-fast);
+    }
+
+    // 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-listbox-item-indicator
+{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-listbox-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/_menu.scss

@@ -0,0 +1,216 @@
+@use '@/styles/mixins/cut-border' as *;
+
+//----------------------------------------------------------------------------------------------------------------------
+// Shared Menu Styles
+// Used by Dropdown, ContextMenu, etc.
+//----------------------------------------------------------------------------------------------------------------------
+
+// Base menu container styling (applied via our wrapper components)
+.sk-dropdown-menu-content
+{
+    // Color tokens (can be overridden by custom colors via component)
+    --sk-menu-color-base: var(--sk-neutral-base);
+    --sk-menu-fg: var(--sk-neutral-text);
+
+    min-width: 12rem;
+    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 - minimal transparency for readability
+    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
+    &.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);
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+
+//----------------------------------------------------------------------------------------------------------------------
+// Menu Item Styles
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-dropdown-menu-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)
+    );
+
+    // Transitions
+    transition-property: background, color;
+    transition-duration: var(--sk-transition-duration-base);
+
+    // Hover state - darker with transparency
+    &: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);
+        transition-duration: var(--sk-transition-duration-fast);
+    }
+
+    // Active/focus state - darker with transparency
+    &:focus,
+    &[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;
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Menu Separator Styles
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-dropdown-menu-separator
+{
+    height: 1px;
+    margin: var(--sk-space-xs) 0;
+    background: color-mix(in oklch, var(--sk-menu-color-base), transparent 70%);
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+
+//----------------------------------------------------------------------------------------------------------------------
+// Submenu Caret
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-submenu-caret
+{
+    width: 0.875rem;
+    height: 0.875rem;
+    margin-left: auto;
+    flex-shrink: 0;
+}
+
+//----------------------------------------------------------------------------------------------------------------------