@skewedaspect/sleekspace-ui 0.5.1 → 0.7.0

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

package/src/styles/components/_tree-view.scss

@@ -0,0 +1,187 @@
+//----------------------------------------------------------------------------------------------------------------------
+// TreeView Component Styles
+//----------------------------------------------------------------------------------------------------------------------
+
+@use '@/styles/mixins/cut-border' as *;
+
+$kinds: (neutral, primary, accent, info, success, warning, danger);
+
+//----------------------------------------------------------------------------------------------------------------------
+// Kind Mixin
+//----------------------------------------------------------------------------------------------------------------------
+
+@mixin tree-view-kind($kind)
+{
+    &.sk-#{ '' + $kind }
+    {
+        --sk-tree-color-base: var(--sk-#{ $kind }-base);
+        --sk-tree-fg: var(--sk-#{ $kind }-text);
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// TreeView Root
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-tree-view
+{
+    --sk-tree-color-base: var(--sk-neutral-base);
+    --sk-tree-fg: var(--sk-neutral-text);
+    --sk-tree-indent: 1.25rem;
+
+    list-style: none;
+    padding: 0;
+    margin: 0;
+
+    @each $kind in $kinds
+    {
+        @include tree-view-kind($kind);
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// TreeView Item
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-tree-item
+{
+    display: flex;
+    align-items: center;
+    gap: var(--sk-space-xs);
+    padding: var(--sk-space-3xs) var(--sk-space-md) var(--sk-space-3xs) var(--sk-space-xs);
+    color: var(--sk-tree-fg);
+    cursor: pointer;
+    user-select: none;
+    position: relative;
+    font-size: var(--sk-font-size-sm);
+    line-height: 1.5;
+    outline: none;
+
+    transition:
+        background var(--sk-transition-duration-fast) var(--sk-transition-timing-default);
+
+    // Beveled clip-path matching sidebar items (top-left + bottom-right, 10px)
+    &:hover:not([data-disabled])
+    {
+        background: oklch(from var(--sk-tree-color-base) l c h / 0.1);
+        clip-path: polygon(
+            10px 0%,
+            100% 0%,
+            100% calc(100% - 10px),
+            calc(100% - 10px) 100%,
+            0% 100%,
+            0% 10px
+        );
+    }
+
+    &:active:not([data-disabled])
+    {
+        background: oklch(from var(--sk-tree-color-base) l c h / 0.15);
+    }
+
+    &[data-selected]
+    {
+        background: oklch(from var(--sk-tree-color-base) l c h / 0.2);
+        clip-path: polygon(
+            10px 0%,
+            100% 0%,
+            100% calc(100% - 10px),
+            calc(100% - 10px) 100%,
+            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-tree-color-base);
+            clip-path: polygon(
+                0% 100%,
+                0px 10px,
+                10px 0px,
+                11.41px 1.41px,
+                2px 10.83px,
+                2px 100%
+            );
+        }
+    }
+
+    &[data-selected]:hover:not([data-disabled])
+    {
+        background: oklch(from var(--sk-tree-color-base) l c h / 0.25);
+    }
+
+    &:focus-visible
+    {
+        outline: var(--sk-border-width-base) solid var(--sk-tree-color-base);
+        outline-offset: -1px;
+    }
+
+    &[data-disabled]
+    {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Chevron
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-tree-item-chevron
+{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1rem;
+    height: 1rem;
+    flex-shrink: 0;
+    color: oklch(from var(--sk-tree-fg) l c h / 0.5);
+    transition: transform var(--sk-transition-duration-fast) var(--sk-transition-timing-default);
+
+    &.sk-expanded
+    {
+        transform: rotate(90deg);
+    }
+}
+
+// Spacer for leaf nodes (keeps text aligned with branches)
+.sk-tree-item-chevron-spacer
+{
+    width: 1rem;
+    flex-shrink: 0;
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Slots
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-tree-item-leading
+{
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+}
+
+.sk-tree-item-content
+{
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.sk-tree-item-trailing
+{
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    margin-left: auto;
+    gap: var(--sk-space-3xs);
+}
+
+//----------------------------------------------------------------------------------------------------------------------