@skewedaspect/sleekspace-ui 0.6.0 → 0.7.1

package/src/styles/components/_color-picker.scss

@@ -0,0 +1,552 @@
+@use '@/styles/mixins/cut-border' as *;
+
+//----------------------------------------------------------------------------------------------------------------------
+// ColorPicker Component Styles
+//----------------------------------------------------------------------------------------------------------------------
+
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-color-picker
+{
+    // Color tokens (can be overridden by custom colors)
+    --sk-color-picker-color-base: var(--sk-neutral-base);
+    --sk-color-picker-fg: var(--sk-neutral-text);
+
+    position: relative;
+    display: inline-flex;
+    width: 100%;
+
+    // Size variants
+    &.sk-sm
+    {
+        --sk-color-picker-cut: 0.4rem;
+    }
+
+    &.sk-md
+    {
+        --sk-color-picker-cut: 0.5rem;
+    }
+
+    &.sk-lg
+    {
+        --sk-color-picker-cut: 0.6rem;
+    }
+
+    &.sk-xl
+    {
+        --sk-color-picker-cut: 0.7rem;
+    }
+
+    // Kind variants
+    &.sk-neutral
+    {
+        --sk-color-picker-color-base: var(--sk-neutral-base);
+        --sk-color-picker-fg: var(--sk-neutral-text);
+    }
+
+    &.sk-primary
+    {
+        --sk-color-picker-color-base: var(--sk-primary-base);
+        --sk-color-picker-fg: var(--sk-primary-text);
+    }
+
+    &.sk-accent
+    {
+        --sk-color-picker-color-base: var(--sk-accent-base);
+        --sk-color-picker-fg: var(--sk-accent-text);
+    }
+
+    &.sk-info
+    {
+        --sk-color-picker-color-base: var(--sk-info-base);
+        --sk-color-picker-fg: var(--sk-info-text);
+    }
+
+    &.sk-success
+    {
+        --sk-color-picker-color-base: var(--sk-success-base);
+        --sk-color-picker-fg: var(--sk-success-text);
+    }
+
+    &.sk-warning
+    {
+        --sk-color-picker-color-base: var(--sk-warning-base);
+        --sk-color-picker-fg: var(--sk-warning-text);
+    }
+
+    &.sk-danger
+    {
+        --sk-color-picker-color-base: var(--sk-danger-base);
+        --sk-color-picker-fg: var(--sk-danger-text);
+    }
+
+    // Color kinds
+    &.sk-neon-blue
+    {
+        --sk-color-picker-color-base: var(--sk-neon-blue-base);
+        --sk-color-picker-fg: var(--sk-neon-blue-text);
+    }
+
+    &.sk-neon-purple
+    {
+        --sk-color-picker-color-base: var(--sk-neon-purple-base);
+        --sk-color-picker-fg: var(--sk-neon-purple-text);
+    }
+
+    &.sk-neon-orange
+    {
+        --sk-color-picker-color-base: var(--sk-neon-orange-base);
+        --sk-color-picker-fg: var(--sk-neon-orange-text);
+    }
+
+    &.sk-neon-green
+    {
+        --sk-color-picker-color-base: var(--sk-neon-green-base);
+        --sk-color-picker-fg: var(--sk-neon-green-text);
+    }
+
+    &.sk-neon-mint
+    {
+        --sk-color-picker-color-base: var(--sk-neon-mint-base);
+        --sk-color-picker-fg: var(--sk-neon-mint-text);
+    }
+
+    &.sk-neon-pink
+    {
+        --sk-color-picker-color-base: var(--sk-neon-pink-base);
+        --sk-color-picker-fg: var(--sk-neon-pink-text);
+    }
+
+    &.sk-yellow
+    {
+        --sk-color-picker-color-base: var(--sk-yellow-base);
+        --sk-color-picker-fg: var(--sk-yellow-text);
+    }
+
+    &.sk-red
+    {
+        --sk-color-picker-color-base: var(--sk-red-base);
+        --sk-color-picker-fg: var(--sk-red-text);
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-color-picker-anchor
+{
+    display: flex;
+    align-items: center;
+    width: 100%;
+    position: relative;
+    gap: var(--sk-space-xs);
+
+    @include cut-border(
+        $cut: var(--sk-color-picker-cut),
+        $border-width: var(--sk-border-width-thin),
+        $border-color: var(--sk-color-picker-color-base),
+        $corners: (top-right)
+    );
+
+    background: color-mix(
+        in oklch,
+        color-mix(in oklch, var(--sk-color-picker-color-base) 75%, transparent 25%),
+        #000 65%
+    );
+
+    cursor: pointer;
+    transition-property: background, border-color;
+    transition-duration: var(--sk-transition-duration-base);
+
+    &:focus-within
+    {
+        border-color: color-mix(in oklch, var(--sk-color-picker-color-base), white 35%);
+        background: color-mix(
+            in oklch,
+            color-mix(in oklch, var(--sk-color-picker-color-base) 75%, transparent 25%),
+            #000 25%
+        );
+    }
+
+    .sk-color-picker:not(.sk-disabled) &:hover
+    {
+        border-color: color-mix(in oklch, var(--sk-color-picker-color-base), white 20%);
+    }
+
+    .sk-color-picker.sk-disabled &
+    {
+        opacity: 0.5;
+        cursor: not-allowed;
+        pointer-events: none;
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-color-picker-swatch
+{
+    flex-shrink: 0;
+
+    @include cut-border(
+        $cut: 0.375rem,
+        $border-width: var(--sk-border-width-thin),
+        $border-color: color-mix(in oklch, var(--sk-color-picker-color-base), white 30%),
+        $corners: (top-right)
+    );
+
+    // Size variants
+    .sk-color-picker.sk-sm &
+    {
+        width: 1.25rem;
+        height: 1.25rem;
+        margin-left: var(--sk-space-sm);
+    }
+
+    .sk-color-picker.sk-md &
+    {
+        width: 1.5rem;
+        height: 1.5rem;
+        margin-left: var(--sk-space-md);
+    }
+
+    .sk-color-picker.sk-lg &
+    {
+        width: 1.75rem;
+        height: 1.75rem;
+        margin-left: var(--sk-space-md);
+    }
+
+    .sk-color-picker.sk-xl &
+    {
+        width: 2rem;
+        height: 2rem;
+        margin-left: var(--sk-space-md);
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-color-picker-input
+{
+    flex: 1;
+    min-width: 0;
+    background: transparent;
+    border: none;
+    color: var(--sk-color-picker-fg);
+    font-family: var(--sk-font-family-mono, var(--sk-font-family-base));
+    outline: none;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    // Size variants
+    .sk-color-picker.sk-sm &
+    {
+        height: 2rem;
+        padding: 0 var(--sk-space-xs);
+        font-size: 0.8125rem;
+    }
+
+    .sk-color-picker.sk-md &
+    {
+        height: 2.5rem;
+        padding: 0 var(--sk-space-sm);
+        font-size: 0.875rem;
+    }
+
+    .sk-color-picker.sk-lg &
+    {
+        height: 3rem;
+        padding: 0 var(--sk-space-sm);
+        font-size: 1rem;
+    }
+
+    .sk-color-picker.sk-xl &
+    {
+        height: 3.5rem;
+        padding: 0 var(--sk-space-sm);
+        font-size: 1.125rem;
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-color-picker-trigger
+{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 var(--sk-space-sm);
+    color: var(--sk-color-picker-fg);
+    cursor: pointer;
+    flex-shrink: 0;
+    background: none;
+    border: none;
+
+    &:hover:not(:disabled)
+    {
+        opacity: 0.8;
+    }
+
+    &:disabled
+    {
+        cursor: not-allowed;
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Panel (portal content - kind variants defined directly here)
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-color-picker-panel
+{
+    --sk-panel-color-base: var(--sk-neutral-base);
+    --sk-panel-fg: var(--sk-neutral-text);
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--sk-space-sm);
+    padding: var(--sk-space-md);
+    z-index: 1000;
+    width: 17rem;
+
+    @include cut-border(
+        $cut: 0.625rem,
+        $border-width: var(--sk-border-width-thin),
+        $border-color: var(--sk-panel-color-base),
+        $corners: (top-left)
+    );
+
+    background: color-mix(
+        in oklch,
+        color-mix(in oklch, var(--sk-panel-color-base) 95%, transparent 5%),
+        #000 46.25%
+    );
+    color: var(--sk-panel-fg);
+    box-shadow: var(--sk-shadow-lg);
+
+    // Kind variants (portal pattern: must be defined directly on portal content)
+    &.sk-neutral
+    {
+        --sk-panel-color-base: var(--sk-neutral-base);
+        --sk-panel-fg: var(--sk-neutral-text);
+    }
+
+    &.sk-primary
+    {
+        --sk-panel-color-base: var(--sk-primary-base);
+        --sk-panel-fg: var(--sk-primary-text);
+    }
+
+    &.sk-accent
+    {
+        --sk-panel-color-base: var(--sk-accent-base);
+        --sk-panel-fg: var(--sk-accent-text);
+    }
+
+    &.sk-info
+    {
+        --sk-panel-color-base: var(--sk-info-base);
+        --sk-panel-fg: var(--sk-info-text);
+    }
+
+    &.sk-success
+    {
+        --sk-panel-color-base: var(--sk-success-base);
+        --sk-panel-fg: var(--sk-success-text);
+    }
+
+    &.sk-warning
+    {
+        --sk-panel-color-base: var(--sk-warning-base);
+        --sk-panel-fg: var(--sk-warning-text);
+    }
+
+    &.sk-danger
+    {
+        --sk-panel-color-base: var(--sk-danger-base);
+        --sk-panel-fg: var(--sk-danger-text);
+    }
+
+    // Color kinds
+    &.sk-neon-blue
+    {
+        --sk-panel-color-base: var(--sk-neon-blue-base);
+        --sk-panel-fg: var(--sk-neon-blue-text);
+    }
+
+    &.sk-neon-purple
+    {
+        --sk-panel-color-base: var(--sk-neon-purple-base);
+        --sk-panel-fg: var(--sk-neon-purple-text);
+    }
+
+    &.sk-neon-orange
+    {
+        --sk-panel-color-base: var(--sk-neon-orange-base);
+        --sk-panel-fg: var(--sk-neon-orange-text);
+    }
+
+    &.sk-neon-green
+    {
+        --sk-panel-color-base: var(--sk-neon-green-base);
+        --sk-panel-fg: var(--sk-neon-green-text);
+    }
+
+    &.sk-neon-mint
+    {
+        --sk-panel-color-base: var(--sk-neon-mint-base);
+        --sk-panel-fg: var(--sk-neon-mint-text);
+    }
+
+    &.sk-neon-pink
+    {
+        --sk-panel-color-base: var(--sk-neon-pink-base);
+        --sk-panel-fg: var(--sk-neon-pink-text);
+    }
+
+    &.sk-yellow
+    {
+        --sk-panel-color-base: var(--sk-yellow-base);
+        --sk-panel-fg: var(--sk-yellow-text);
+    }
+
+    &.sk-red
+    {
+        --sk-panel-color-base: var(--sk-red-base);
+        --sk-panel-fg: var(--sk-red-text);
+    }
+
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-color-picker-controls
+{
+    display: flex;
+    align-items: center;
+    gap: var(--sk-space-sm);
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-color-picker-eyedropper
+{
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    padding: 0;
+    background: color-mix(in oklch, var(--sk-panel-color-base), #000 70%);
+    color: var(--sk-panel-fg);
+    border: var(--sk-border-width-thin) solid color-mix(in oklch, var(--sk-panel-color-base), transparent 50%);
+    cursor: pointer;
+    border-radius: 2px;
+    transition: background var(--sk-transition-duration-base);
+
+    &:hover:not(:disabled)
+    {
+        background: color-mix(in oklch, var(--sk-panel-color-base), #000 50%);
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-color-picker-sliders
+{
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: var(--sk-space-xs);
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-color-picker-inputs
+{
+    display: flex;
+    flex-direction: column;
+    gap: var(--sk-space-xs);
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-color-picker-format-buttons
+{
+    display: flex;
+    gap: 2px;
+}
+
+.sk-color-picker-format-btn
+{
+    flex: 1;
+    padding: var(--sk-space-3xs) var(--sk-space-xs);
+    font-size: 0.6875rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    cursor: pointer;
+    border: var(--sk-border-width-thin) solid transparent;
+    background: color-mix(in oklch, var(--sk-panel-color-base), #000 75%);
+    color: color-mix(in oklch, var(--sk-panel-fg), transparent 40%);
+    transition-property: background, color, border-color;
+    transition-duration: var(--sk-transition-duration-base);
+
+    &:hover
+    {
+        background: color-mix(in oklch, var(--sk-panel-color-base), #000 60%);
+        color: var(--sk-panel-fg);
+    }
+
+    &.sk-active
+    {
+        background: color-mix(in oklch, var(--sk-panel-color-base), #000 50%);
+        color: var(--sk-panel-fg);
+        border-color: var(--sk-panel-color-base);
+    }
+
+    &:first-child
+    {
+        @include cut-border(
+            $cut: 0.25rem,
+            $border-width: var(--sk-border-width-thin),
+            $border-color: transparent,
+            $corners: (top-left)
+        );
+    }
+
+    &:last-child
+    {
+        @include cut-border(
+            $cut: 0.25rem,
+            $border-width: var(--sk-border-width-thin),
+            $border-color: transparent,
+            $corners: (bottom-right)
+        );
+    }
+
+    &:first-child.sk-active
+    {
+        @include cut-border(
+            $cut: 0.25rem,
+            $border-width: var(--sk-border-width-thin),
+            $border-color: var(--sk-panel-color-base),
+            $corners: (top-left)
+        );
+    }
+
+    &:last-child.sk-active
+    {
+        @include cut-border(
+            $cut: 0.25rem,
+            $border-width: var(--sk-border-width-thin),
+            $border-color: var(--sk-panel-color-base),
+            $corners: (bottom-right)
+        );
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/styles/components/_index.scss

@@ -14,6 +14,7 @@
     @include meta.load-css('card');
     @include meta.load-css('checkbox');
     @include meta.load-css('collapsible');
+    @include meta.load-css('color-picker');
     @include meta.load-css('divider');
     @include meta.load-css('field');
     @include meta.load-css('group');
@@ -29,11 +30,13 @@
     @include meta.load-css('popover');
     @include meta.load-css('progress');
     @include meta.load-css('radio');
+    @include meta.load-css('scroll-area');
     @include meta.load-css('select');
     @include meta.load-css('sidebar');
     @include meta.load-css('skeleton');
     @include meta.load-css('slider');
     @include meta.load-css('spinner');
+    @include meta.load-css('splitter');
     @include meta.load-css('switch');
     @include meta.load-css('table');
     @include meta.load-css('tabs');
@@ -41,7 +44,9 @@
     @include meta.load-css('tags-input');
     @include meta.load-css('textarea');
     @include meta.load-css('toast');
+    @include meta.load-css('toolbar');
     @include meta.load-css('tooltip');
+    @include meta.load-css('tree-view');
 }
 
 //----------------------------------------------------------------------------------------------------------------------

package/src/styles/components/_menu.scss

@@ -6,7 +6,7 @@
 //----------------------------------------------------------------------------------------------------------------------
 
 // Base menu container styling (applied via our wrapper components)
-.sk-dropdown-menu-content
+.sk-menu-content
 {
     // Color tokens (can be overridden by custom colors via component)
     --sk-menu-color-base: var(--sk-neutral-base);
@@ -131,7 +131,7 @@
 // Menu Item Styles
 //----------------------------------------------------------------------------------------------------------------------
 
-.sk-dropdown-menu-item
+.sk-menu-item
 {
     display: flex;
     align-items: center;
@@ -192,7 +192,7 @@
 // Menu Separator Styles
 //----------------------------------------------------------------------------------------------------------------------
 
-.sk-dropdown-menu-separator
+.sk-menu-separator
 {
     height: 1px;
     margin: var(--sk-space-xs) 0;
@@ -201,6 +201,55 @@
 
 //----------------------------------------------------------------------------------------------------------------------
 
+//----------------------------------------------------------------------------------------------------------------------
+// Checkbox & Radio Item Styles
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-menu-checkbox-item,
+.sk-menu-radio-item
+{
+    position: relative;
+    padding-left: calc(var(--sk-space-md) + 1.25rem);
+}
+
+.sk-menu-item-indicator
+{
+    position: absolute;
+    left: var(--sk-space-sm);
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1rem;
+    height: 1rem;
+}
+
+.sk-menu-radio-dot
+{
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 50%;
+    background: currentColor;
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Menu Label Styles
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-menu-label
+{
+    padding: var(--sk-space-xs) var(--sk-space-md);
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: color-mix(in oklch, var(--sk-menu-fg), transparent 40%);
+    user-select: none;
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+
 //----------------------------------------------------------------------------------------------------------------------
 // Submenu Caret
 //----------------------------------------------------------------------------------------------------------------------