@skewedaspect/sleekspace-ui 0.2.0-beta.1

package/src/styles/components/_table.scss

@@ -0,0 +1,405 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Table Component Styles
+// Clean table styling matching ApiReference component
+//----------------------------------------------------------------------------------------------------------------------
+
+@use '../theme/variables' as *;
+@use '../mixins/cut-border' as *;
+
+//----------------------------------------------------------------------------------------------------------------------
+// Design Tokens
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-table
+{
+    // Default foreground color (uses neutral foreground by default)
+    --sk-table-text: var(--sk-neutral-text);
+
+    // Base border color - uses the base color directly (like solid buttons)
+    --sk-table-border-base: var(--sk-neutral-base);
+
+    // Default (non-subtle) opacity tokens - backgrounds use transparency
+    --sk-table-header-bg-transparency: 80%;
+    --sk-table-footer-bg-transparency: 80%;
+    --sk-table-stripe-transparency: 85%;
+    --sk-table-hover-transparency: 90%;
+    --sk-table-hover-glow-transparency: 60%;
+
+    // Subtle variant opacity tokens
+    &.sk-subtle
+    {
+        // Subtle backgrounds
+        --sk-table-header-bg-transparency: 90%;
+        --sk-table-footer-bg-transparency: 90%;
+        --sk-table-stripe-transparency: 85%;
+
+        // Subtle border opacity (like subtle buttons)
+        --sk-table-border-opacity: 0.15;
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Table Wrapper (for border and rounded corners)
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-table-wrapper
+{
+    --sk-table-border-color: color-mix(in oklch, var(--sk-neutral-base), black 20%);
+    --sk-table-corner-cut: 1rem;
+
+    overflow-x: auto;
+
+    // Cut top-right corner with neutral border (opaque, like solid buttons)
+    @include cut-border(
+        $cut: var(--sk-table-corner-cut),
+        $border-width: 1px,
+        $border-color: var(--sk-table-border-color),
+        $corners: (top-right)
+    );
+
+    // Dark background option
+    &.sk-dark-background
+    {
+        background-color: black;
+    }
+
+    // Wrapper border colors for kinds (opaque)
+    @each $kind in $kinds
+    {
+        &.sk-table-wrapper-#{ "" + $kind }
+        {
+            --sk-table-border-color: color-mix(in oklch, var(--sk-#{ $kind }-base), black 20%);
+
+            @include cut-border(
+                $cut: var(--sk-table-corner-cut),
+                $border-width: 1px,
+                $border-color: var(--sk-table-border-color),
+                $corners: (top-right)
+            );
+        }
+    }
+
+    // Subtle variant - use opacity for borders (like subtle buttons)
+    &.sk-subtle
+    {
+        --sk-table-border-color: color-mix(in oklch, var(--sk-neutral-base), black 35%);
+
+        @include cut-border(
+            $cut: var(--sk-table-corner-cut),
+            $border-width: 1px,
+            $border-color: var(--sk-table-border-color),
+            $corners: (top-right)
+        );
+
+        // Subtle wrapper border colors for kinds
+        @each $kind in $kinds
+        {
+            &.sk-table-wrapper-#{ "" + $kind }
+            {
+                --sk-table-border-color: color-mix(in oklch, var(--sk-#{ $kind }-base), black 35%);
+
+                @include cut-border(
+                    $cut: var(--sk-table-corner-cut),
+                    $border-width: 1px,
+                    $border-color: var(--sk-table-border-color),
+                    $corners: (top-right)
+                );
+            }
+        }
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Base Table Styles
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-table
+{
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.875rem;
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Header
+    //------------------------------------------------------------------------------------------------------------------
+
+    thead
+    {
+        background-color: color-mix(in oklch, var(--sk-neutral-base), transparent var(--sk-table-header-bg-transparency));
+        border-bottom: 2px solid var(--sk-table-border-color);
+
+        th
+        {
+            padding: 0.75rem 1rem;
+            text-align: left;
+            font-weight: 600;
+            color: var(--sk-table-text);
+            white-space: nowrap;
+        }
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Body
+    //------------------------------------------------------------------------------------------------------------------
+
+    tbody
+    {
+        tr
+        {
+            border-bottom: 1px solid var(--sk-table-border-color);
+
+            &:last-child
+            {
+                border-bottom: none;
+            }
+
+            &:hover
+            {
+                background-color: color-mix(in oklch, var(--sk-primary-base), transparent var(--sk-table-hover-transparency));
+                box-shadow: inset 0 0 8px 0 color-mix(in oklch, var(--sk-primary-base), transparent var(--sk-table-hover-glow-transparency));
+            }
+        }
+
+        td
+        {
+            padding: 0.75rem 1rem;
+            vertical-align: top;
+        }
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Footer
+    //------------------------------------------------------------------------------------------------------------------
+
+    tfoot
+    {
+        background-color: color-mix(in oklch, var(--sk-neutral-base), transparent var(--sk-table-footer-bg-transparency));
+        border-top: 2px solid var(--sk-table-border-color);
+
+        td,
+        th
+        {
+            padding: 0.75rem 1rem;
+            font-weight: 600;
+            color: var(--sk-table-text);
+        }
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Striped Variant
+    //------------------------------------------------------------------------------------------------------------------
+
+    &.sk-striped
+    {
+        tbody tr:nth-child(even)
+        {
+            background-color: color-mix(in oklch, var(--sk-neutral-base), transparent var(--sk-table-stripe-transparency));
+        }
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Hoverable Variant (enabled by default via tbody tr:hover above)
+    //------------------------------------------------------------------------------------------------------------------
+
+    &.sk-hoverable
+    {
+        // Hover is already applied by default
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Bordered Variant (adds right borders on cells)
+    //------------------------------------------------------------------------------------------------------------------
+
+    &.sk-bordered
+    {
+        td,
+        th
+        {
+            border-right: 1px solid var(--sk-table-border-color);
+
+            &:last-child
+            {
+                border-right: none;
+            }
+        }
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+    // No Inner Borders Option (like ApiReference) - removes vertical cell borders
+    //------------------------------------------------------------------------------------------------------------------
+
+    &.sk-no-inner-borders
+    {
+        &.sk-bordered
+        {
+            td,
+            th
+            {
+                border-right: none;
+            }
+        }
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Spacing Variants
+    //------------------------------------------------------------------------------------------------------------------
+
+    &.sk-compact
+    {
+        thead th,
+        tbody td,
+        tfoot td,
+        tfoot th
+        {
+            padding: 0.5rem 0.75rem;
+        }
+    }
+
+    &.sk-comfortable
+    {
+        thead th,
+        tbody td,
+        tfoot td,
+        tfoot th
+        {
+            padding: 1rem 1.25rem;
+        }
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Kind Variants
+    //------------------------------------------------------------------------------------------------------------------
+
+    // Kind variants - override colors for non-neutral kinds
+    @each $kind in $kinds
+    {
+        &.sk-#{ "" + $kind }
+        {
+            // Only override if not neutral (neutral is the default)
+            @if $kind != 'neutral'
+            {
+                // Set foreground color and border base for this kind
+                --sk-table-text: var(--sk-#{ $kind }-text);
+
+
+                thead
+                {
+                    background-color: color-mix(in oklch, var(--sk-#{ $kind }-base), transparent var(--sk-table-header-bg-transparency));
+
+                    th
+                    {
+                        color: var(--sk-table-text);
+                    }
+                }
+
+                tbody
+                {
+                    tr
+                    {
+                        &:hover
+                        {
+                            background-color: color-mix(in oklch, var(--sk-#{ $kind }-base), transparent var(--sk-table-hover-transparency));
+                            box-shadow: inset 0 0 8px 0 color-mix(in oklch, var(--sk-#{ $kind }-base), transparent var(--sk-table-hover-glow-transparency));
+                        }
+                    }
+                }
+
+                tfoot
+                {
+                    background-color: color-mix(in oklch, var(--sk-#{ $kind }-base), transparent var(--sk-table-footer-bg-transparency));
+
+                    td,
+                    th
+                    {
+                        color: var(--sk-table-text);
+                    }
+                }
+
+                &.sk-striped
+                {
+                    tbody tr:nth-child(even)
+                    {
+                        background-color: color-mix(in oklch, var(--sk-#{ $kind }-base), transparent var(--sk-table-stripe-transparency));
+                    }
+                }
+            }
+        }
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Subtle Variant - More transparent backgrounds, borders use opacity (like subtle buttons)
+    //------------------------------------------------------------------------------------------------------------------
+
+    &.sk-subtle
+    {
+        // Backgrounds use transparency (no overlaps here)
+        thead
+        {
+            background-color: color-mix(in oklch, var(--sk-neutral-base), transparent var(--sk-table-header-bg-transparency));
+
+            th
+            {
+                // Subtle headers use base color, not computed foreground
+                color: var(--sk-neutral-base);
+            }
+        }
+
+        tfoot
+        {
+            background-color: color-mix(in oklch, var(--sk-neutral-base), transparent var(--sk-table-footer-bg-transparency));
+
+            td,
+            th
+            {
+                // Subtle footers use base color, not computed foreground
+                color: var(--sk-neutral-base);
+            }
+        }
+
+        &.sk-striped tbody tr:nth-child(even)
+        {
+            background-color: color-mix(in oklch, var(--sk-neutral-base), transparent var(--sk-table-stripe-transparency));
+        }
+
+        // Subtle variant for kinds
+        @each $kind in $kinds
+        {
+            &.sk-#{ "" + $kind }
+            {
+                @if $kind != 'neutral'
+                {
+                    // Backgrounds use transparency
+                    thead
+                    {
+                        background-color: color-mix(in oklch, var(--sk-#{ $kind }-base), transparent var(--sk-table-header-bg-transparency));
+
+                        th
+                        {
+                            // Subtle headers use base color, not computed foreground
+                            color: var(--sk-#{ $kind }-base);
+                        }
+                    }
+
+                    tfoot
+                    {
+                        background-color: color-mix(in oklch, var(--sk-#{ $kind }-base), transparent var(--sk-table-footer-bg-transparency));
+
+                        td,
+                        th
+                        {
+                            // Subtle footers use base color, not computed foreground
+                            color: var(--sk-#{ $kind }-base);
+                        }
+                    }
+
+                    &.sk-striped tbody tr:nth-child(even)
+                    {
+                        background-color: color-mix(in oklch, var(--sk-#{ $kind }-base), transparent var(--sk-table-stripe-transparency));
+                    }
+                }
+            }
+        }
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------