@skewedaspect/sleekspace-ui 0.6.0 → 0.7.0

package/src/styles/components/_scroll-area.scss

@@ -0,0 +1,120 @@
+//----------------------------------------------------------------------------------------------------------------------
+// ScrollArea Component Styles
+//----------------------------------------------------------------------------------------------------------------------
+
+$kinds: (neutral, primary, accent, info, success, warning, danger);
+
+//----------------------------------------------------------------------------------------------------------------------
+// Kind Mixin
+//----------------------------------------------------------------------------------------------------------------------
+
+@mixin scroll-area-kind($kind)
+{
+    &.sk-#{ '' + $kind }
+    {
+        --sk-scroll-area-color-base: var(--sk-#{ $kind }-base);
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// ScrollArea Root
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-scroll-area
+{
+    --sk-scroll-area-color-base: var(--sk-neutral-base);
+    --sk-scroll-area-thumb-color: var(--sk-scroll-area-color-base);
+    --sk-scroll-area-track-color: oklch(from var(--sk-neutral-base) l c h / 0.08);
+    --sk-scroll-area-size: 0.5rem;
+
+    position: relative;
+    overflow: hidden;
+
+    @each $kind in $kinds
+    {
+        @include scroll-area-kind($kind);
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// ScrollArea Viewport
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-scroll-area-viewport
+{
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+
+    // Reka UI sets this inline; override for full scroll
+    & > div
+    {
+        display: block !important;
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// ScrollArea Scrollbar
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-scroll-area-scrollbar
+{
+    display: flex;
+    touch-action: none;
+    user-select: none;
+    padding: 2px;
+    background: var(--sk-scroll-area-track-color);
+    transition: background var(--sk-transition-duration-fast) var(--sk-transition-timing-default);
+
+    &:hover
+    {
+        background: oklch(from var(--sk-neutral-base) l c h / 0.15);
+    }
+
+    // Vertical scrollbar
+    &[data-orientation='vertical']
+    {
+        width: var(--sk-scroll-area-size);
+    }
+
+    // Horizontal scrollbar
+    &[data-orientation='horizontal']
+    {
+        flex-direction: column;
+        height: var(--sk-scroll-area-size);
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// ScrollArea Thumb
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-scroll-area-thumb
+{
+    position: relative;
+    flex: 1;
+    border-radius: var(--sk-scroll-area-size);
+    background: oklch(from var(--sk-scroll-area-thumb-color) l c h / 0.4);
+    transition: background var(--sk-transition-duration-fast) var(--sk-transition-timing-default);
+
+    &:hover
+    {
+        background: oklch(from var(--sk-scroll-area-thumb-color) l c h / 0.6);
+    }
+
+    &:active
+    {
+        background: oklch(from var(--sk-scroll-area-thumb-color) l c h / 0.8);
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// ScrollArea Corner
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-scroll-area-corner
+{
+    background: var(--sk-scroll-area-track-color);
+}
+
+//----------------------------------------------------------------------------------------------------------------------

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);
+}
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/styles/components/_toolbar.scss

@@ -0,0 +1,296 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Toolbar Component Styles
+//----------------------------------------------------------------------------------------------------------------------
+
+@use '@/styles/mixins/cut-border' as *;
+
+$kinds: (neutral, primary, accent, info, success, warning, danger);
+
+//----------------------------------------------------------------------------------------------------------------------
+// Kind Mixin
+//----------------------------------------------------------------------------------------------------------------------
+
+@mixin toolbar-kind($kind)
+{
+    &.sk-#{ '' + $kind }
+    {
+        --sk-toolbar-color-base: var(--sk-#{ $kind }-base);
+        --sk-toolbar-fg: var(--sk-#{ $kind }-text);
+        --sk-toolbar-hover: var(--sk-#{ $kind }-hover);
+        --sk-toolbar-active: var(--sk-#{ $kind }-active);
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Toolbar Root
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-toolbar
+{
+    --sk-toolbar-color-base: var(--sk-neutral-base);
+    --sk-toolbar-fg: var(--sk-neutral-text);
+    --sk-toolbar-hover: var(--sk-neutral-hover);
+    --sk-toolbar-active: var(--sk-neutral-active);
+
+    // Cut size matches button corners: height / radius-factor ≈ 10px
+    --sk-toolbar-cut-size: calc(2.5rem / var(--sk-border-radius-factor));
+    --sk-toolbar-border-width: var(--sk-border-width-thin);
+    --sk-toolbar-border-color: oklch(from var(--sk-toolbar-color-base) l c h / 0.2);
+
+    // Per-corner cut sizes (toggled on by .sk-cut-* classes)
+    --sk-toolbar-cut-tl: 0px;
+    --sk-toolbar-cut-tr: 0px;
+    --sk-toolbar-cut-br: 0px;
+    --sk-toolbar-cut-bl: 0px;
+
+    display: flex;
+    align-items: center;
+    gap: var(--sk-space-xs);
+    padding: var(--sk-space-xs);
+    background: oklch(from var(--sk-toolbar-color-base) l c h / 0.08);
+    position: relative;
+
+    &.sk-vertical
+    {
+        flex-direction: column;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Corner Toggle Classes
+    //------------------------------------------------------------------------------------------------------------------
+
+    &.sk-cut-top-left     { --sk-toolbar-cut-tl: var(--sk-toolbar-cut-size); }
+    &.sk-cut-top-right    { --sk-toolbar-cut-tr: var(--sk-toolbar-cut-size); }
+    &.sk-cut-bottom-right { --sk-toolbar-cut-br: var(--sk-toolbar-cut-size); }
+    &.sk-cut-bottom-left  { --sk-toolbar-cut-bl: var(--sk-toolbar-cut-size); }
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Beveled Corners (modern)
+    //------------------------------------------------------------------------------------------------------------------
+
+    @supports (corner-shape: bevel)
+    {
+        border: var(--sk-toolbar-border-width) solid var(--sk-toolbar-border-color);
+        border-top-left-radius: var(--sk-toolbar-cut-tl);
+        border-top-right-radius: var(--sk-toolbar-cut-tr);
+        border-bottom-right-radius: var(--sk-toolbar-cut-br);
+        border-bottom-left-radius: var(--sk-toolbar-cut-bl);
+        corner-shape: bevel;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Beveled Corners (fallback)
+    //------------------------------------------------------------------------------------------------------------------
+
+    @supports not (corner-shape: bevel)
+    {
+        border: none;
+
+        clip-path: polygon(
+            var(--sk-toolbar-cut-tl) 0,
+            calc(100% - var(--sk-toolbar-cut-tr)) 0,
+            100% var(--sk-toolbar-cut-tr),
+            100% calc(100% - var(--sk-toolbar-cut-br)),
+            calc(100% - var(--sk-toolbar-cut-br)) 100%,
+            var(--sk-toolbar-cut-bl) 100%,
+            0 calc(100% - var(--sk-toolbar-cut-bl)),
+            0 var(--sk-toolbar-cut-tl)
+        );
+
+        // Border via double-polygon clip-path
+        &::before
+        {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: var(--sk-toolbar-border-color);
+            z-index: -1;
+
+            clip-path: polygon(
+                // Outer ring (clockwise)
+                var(--sk-toolbar-cut-tl) 0,
+                calc(100% - var(--sk-toolbar-cut-tr)) 0,
+                100% var(--sk-toolbar-cut-tr),
+                100% calc(100% - var(--sk-toolbar-cut-br)),
+                calc(100% - var(--sk-toolbar-cut-br)) 100%,
+                var(--sk-toolbar-cut-bl) 100%,
+                0 calc(100% - var(--sk-toolbar-cut-bl)),
+                0 var(--sk-toolbar-cut-tl),
+                var(--sk-toolbar-cut-tl) 0,
+
+                // Inner ring (counter-clockwise)
+                calc(var(--sk-toolbar-cut-tl) + var(--sk-toolbar-border-width)) var(--sk-toolbar-border-width),
+                var(--sk-toolbar-border-width) calc(var(--sk-toolbar-cut-tl) + var(--sk-toolbar-border-width)),
+                var(--sk-toolbar-border-width) calc(100% - var(--sk-toolbar-cut-bl) - var(--sk-toolbar-border-width)),
+                calc(var(--sk-toolbar-cut-bl) + var(--sk-toolbar-border-width)) calc(100% - var(--sk-toolbar-border-width)),
+                calc(100% - var(--sk-toolbar-cut-br) - var(--sk-toolbar-border-width)) calc(100% - var(--sk-toolbar-border-width)),
+                calc(100% - var(--sk-toolbar-border-width)) calc(100% - var(--sk-toolbar-cut-br) - var(--sk-toolbar-border-width)),
+                calc(100% - var(--sk-toolbar-border-width)) calc(var(--sk-toolbar-cut-tr) + var(--sk-toolbar-border-width)),
+                calc(100% - var(--sk-toolbar-cut-tr) - var(--sk-toolbar-border-width)) var(--sk-toolbar-border-width),
+                calc(var(--sk-toolbar-cut-tl) + var(--sk-toolbar-border-width)) var(--sk-toolbar-border-width)
+            );
+        }
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Kind Variants
+    //------------------------------------------------------------------------------------------------------------------
+
+    @each $kind in $kinds
+    {
+        @include toolbar-kind($kind);
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Toolbar Button
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-toolbar-button
+{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--sk-space-xs);
+    padding: var(--sk-space-xs) var(--sk-space-sm);
+    border: none;
+    background: transparent;
+    color: var(--sk-toolbar-fg);
+    cursor: pointer;
+    font-size: var(--sk-font-size-sm);
+    line-height: 1;
+
+    @include cut-border(
+        $cut: 10px,
+        $border-width: 0px,
+        $border-color: transparent,
+        $corners: (top-left bottom-right)
+    );
+
+    transition:
+        background var(--sk-transition-duration-fast) var(--sk-transition-timing-default),
+        color var(--sk-transition-duration-fast) var(--sk-transition-timing-default);
+
+    &:hover:not(:disabled)
+    {
+        background: oklch(from var(--sk-toolbar-color-base) l c h / 0.15);
+    }
+
+    &:active:not(:disabled)
+    {
+        background: oklch(from var(--sk-toolbar-color-base) l c h / 0.25);
+    }
+
+    &:focus-visible
+    {
+        outline: var(--sk-border-width-base) solid var(--sk-toolbar-color-base);
+        outline-offset: 2px;
+    }
+
+    &:disabled
+    {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Toolbar Toggle Group
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-toolbar-toggle-group
+{
+    display: flex;
+    align-items: center;
+    gap: 1px;
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Toolbar Toggle Item
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-toolbar-toggle-item
+{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--sk-space-xs) var(--sk-space-sm);
+    border: none;
+    background: transparent;
+    color: var(--sk-toolbar-fg);
+    cursor: pointer;
+    font-size: var(--sk-font-size-sm);
+    line-height: 1;
+
+    @include cut-border(
+        $cut: 10px,
+        $border-width: 0px,
+        $border-color: transparent,
+        $corners: (top-left bottom-right)
+    );
+
+    transition:
+        background var(--sk-transition-duration-fast) var(--sk-transition-timing-default),
+        color var(--sk-transition-duration-fast) var(--sk-transition-timing-default);
+
+    &:hover:not(:disabled)
+    {
+        background: oklch(from var(--sk-toolbar-color-base) l c h / 0.15);
+    }
+
+    &:active:not(:disabled)
+    {
+        background: oklch(from var(--sk-toolbar-color-base) l c h / 0.25);
+    }
+
+    &[data-state='on']
+    {
+        background: oklch(from var(--sk-toolbar-color-base) l c h / 0.25);
+        color: var(--sk-toolbar-color-base);
+
+        &:hover:not(:disabled)
+        {
+            background: oklch(from var(--sk-toolbar-color-base) l c h / 0.35);
+        }
+    }
+
+    &:focus-visible
+    {
+        outline: var(--sk-border-width-base) solid var(--sk-toolbar-color-base);
+        outline-offset: 2px;
+    }
+
+    &:disabled
+    {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Toolbar Separator
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-toolbar-separator
+{
+    background: oklch(from var(--sk-toolbar-color-base) l c h / 0.2);
+
+    .sk-toolbar.sk-horizontal > &
+    {
+        width: 1px;
+        align-self: stretch;
+        margin: var(--sk-space-xs) var(--sk-space-xxs);
+    }
+
+    .sk-toolbar.sk-vertical > &
+    {
+        height: 1px;
+        align-self: stretch;
+        margin: var(--sk-space-xxs) var(--sk-space-xs);
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------