@skewedaspect/sleekspace-ui 0.8.1 → 0.9.0

package/src/styles/components/_table.scss

@@ -4,13 +4,14 @@
 //----------------------------------------------------------------------------------------------------------------------
 
 @use '../theme/variables' as *;
-@use '../mixins/cut-border' as *;
+@use '../mixins' as *;
 
 //----------------------------------------------------------------------------------------------------------------------
 // Design Tokens
 //----------------------------------------------------------------------------------------------------------------------
 
-.sk-table
+.sk-table,
+sk-table
 {
     // Default foreground color (uses neutral foreground by default)
     --sk-table-text: var(--sk-neutral-text);
@@ -24,18 +25,6 @@
     --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;
-    }
 }
 
 //----------------------------------------------------------------------------------------------------------------------
@@ -114,7 +103,8 @@
 // Base Table Styles
 //----------------------------------------------------------------------------------------------------------------------
 
-.sk-table
+.sk-table,
+sk-table
 {
     width: 100%;
     border-collapse: collapse;
@@ -185,123 +175,106 @@
             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)
-    //------------------------------------------------------------------------------------------------------------------
+//----------------------------------------------------------------------------------------------------------------------
+// Kind Variants
+//----------------------------------------------------------------------------------------------------------------------
 
-    &.sk-hoverable
+@each $kind in $kinds
+{
+    @include kind-variant('table', $kind)
     {
-        // Hover is already applied by default
-    }
+        // Anchor property ensures the selector pair is always emitted by Sass.
+        --sk-table-kind: #{ $kind };
 
-    //------------------------------------------------------------------------------------------------------------------
-    // Bordered Variant (adds right borders on cells)
-    //------------------------------------------------------------------------------------------------------------------
-
-    &.sk-bordered
-    {
-        td,
-        th
+        @if $kind != 'neutral'
         {
-            border-right: 1px solid var(--sk-table-border-color);
+            --sk-table-text: var(--sk-#{ $kind }-text);
 
-            &:last-child
+            thead
             {
-                border-right: none;
+                background-color: color-mix(in oklch, var(--sk-#{ $kind }-base), transparent var(--sk-table-header-bg-transparency));
+
+                th
+                {
+                    color: var(--sk-table-text);
+                }
             }
-        }
-    }
 
-    //------------------------------------------------------------------------------------------------------------------
-    // No Inner Borders Option (like ApiReference) - removes vertical cell borders
-    //------------------------------------------------------------------------------------------------------------------
+            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));
+                    }
+                }
+            }
 
-    &.sk-no-inner-borders
-    {
-        &.sk-bordered
-        {
-            td,
-            th
+            tfoot
             {
-                border-right: none;
+                background-color: color-mix(in oklch, var(--sk-#{ $kind }-base), transparent var(--sk-table-footer-bg-transparency));
+
+                td,
+                th
+                {
+                    color: var(--sk-table-text);
+                }
             }
         }
     }
+}
 
-    //------------------------------------------------------------------------------------------------------------------
-    // Spacing Variants
-    //------------------------------------------------------------------------------------------------------------------
+//----------------------------------------------------------------------------------------------------------------------
+// Variant Variants (subtle)
+//----------------------------------------------------------------------------------------------------------------------
+
+@include variant-variant('table', 'subtle')
+{
+    // Subtle variant opacity tokens
+    --sk-table-header-bg-transparency: 90%;
+    --sk-table-footer-bg-transparency: 90%;
+    --sk-table-stripe-transparency: 85%;
+    --sk-table-border-opacity: 0.15;
 
-    &.sk-compact
+    thead
     {
-        thead th,
-        tbody td,
-        tfoot td,
-        tfoot th
+        background-color: color-mix(in oklch, var(--sk-neutral-base), transparent var(--sk-table-header-bg-transparency));
+
+        th
         {
-            padding: 0.5rem 0.75rem;
+            color: var(--sk-neutral-base);
         }
     }
 
-    &.sk-comfortable
+    tfoot
     {
-        thead th,
-        tbody td,
-        tfoot td,
-        tfoot th
+        background-color: color-mix(in oklch, var(--sk-neutral-base), transparent var(--sk-table-footer-bg-transparency));
+
+        td,
+        th
         {
-            padding: 1rem 1.25rem;
+            color: var(--sk-neutral-base);
         }
     }
 
-    //------------------------------------------------------------------------------------------------------------------
-    // Kind Variants
-    //------------------------------------------------------------------------------------------------------------------
-
-    // Kind variants - override colors for non-neutral kinds
+    // Subtle variant for 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));
-                        }
+                        color: var(--sk-#{ $kind }-base);
                     }
                 }
 
@@ -312,95 +285,106 @@
                     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));
+                        color: var(--sk-#{ $kind }-base);
                     }
                 }
             }
         }
     }
+}
 
-    //------------------------------------------------------------------------------------------------------------------
-    // Subtle Variant - More transparent backgrounds, borders use opacity (like subtle buttons)
-    //------------------------------------------------------------------------------------------------------------------
+//----------------------------------------------------------------------------------------------------------------------
+// Boolean Modifiers
+//----------------------------------------------------------------------------------------------------------------------
 
-    &.sk-subtle
+// Striped rows
+@include bool-modifier('table', 'striped')
+{
+    tbody tr:nth-child(even)
     {
-        // Backgrounds use transparency (no overlaps here)
-        thead
-        {
-            background-color: color-mix(in oklch, var(--sk-neutral-base), transparent var(--sk-table-header-bg-transparency));
+        background-color: color-mix(in oklch, var(--sk-neutral-base), transparent var(--sk-table-stripe-transparency));
+    }
+}
 
-            th
-            {
-                // Subtle headers use base color, not computed foreground
-                color: var(--sk-neutral-base);
-            }
-        }
+// Bordered cells (column separators). Paired with `sk-no-inner-borders` to cancel — the
+// Vue component emits both classes by default (bordered=true, innerBorders=false), so
+// the default render shows no column separators. The cancel lives in its own selector
+// below so source order wins on equal specificity.
+@include bool-modifier('table', 'bordered')
+{
+    td,
+    th
+    {
+        border-right: 1px solid var(--sk-table-border-color);
 
-        tfoot
+        &:last-child
         {
-            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);
-            }
+            border-right: none;
         }
+    }
+}
 
-        &.sk-striped tbody tr:nth-child(even)
-        {
-            background-color: color-mix(in oklch, var(--sk-neutral-base), transparent var(--sk-table-stripe-transparency));
-        }
+// Cancels the column separators added by `sk-bordered`. Emitted when `innerBorders=false`
+// (the default), so the common case of `bordered=true, innerBorders=false` renders cleanly.
+@include bool-modifier('table', 'no-inner-borders')
+{
+    td,
+    th
+    {
+        border-right: none;
+    }
+}
 
-        // 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));
+// Compact spacing
+@include bool-modifier('table', 'compact')
+{
+    thead th,
+    tbody td,
+    tfoot td,
+    tfoot th
+    {
+        padding: 0.5rem 0.75rem;
+    }
+}
 
-                        th
-                        {
-                            // Subtle headers use base color, not computed foreground
-                            color: var(--sk-#{ $kind }-base);
-                        }
-                    }
+// Comfortable spacing
+@include bool-modifier('table', 'comfortable')
+{
+    thead th,
+    tbody td,
+    tfoot td,
+    tfoot th
+    {
+        padding: 1rem 1.25rem;
+    }
+}
 
-                    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);
-                        }
-                    }
+//----------------------------------------------------------------------------------------------------------------------
+// Defaults When Absent
+//----------------------------------------------------------------------------------------------------------------------
 
-                    &.sk-striped tbody tr:nth-child(even)
-                    {
-                        background-color: color-mix(in oklch, var(--sk-#{ $kind }-base), transparent var(--sk-table-stripe-transparency));
-                    }
-                }
-            }
-        }
-    }
+// Default kind: neutral
+$_table-kind-not: '';
+@each $kind in $kinds
+{
+    $_table-kind-not: $_table-kind-not + ':not(.sk-' + $kind + ')';
+}
+
+.sk-table:where(#{ $_table-kind-not })
+{
+    --sk-table-text: var(--sk-neutral-text);
+    --sk-table-border-base: var(--sk-neutral-base);
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+// Custom-Element API Defaults (attribute-absence path)
+//----------------------------------------------------------------------------------------------------------------------
+
+// Default kind: neutral
+@include defaults-when-no-attr('table', 'kind')
+{
+    --sk-table-text: var(--sk-neutral-text);
+    --sk-table-border-base: var(--sk-neutral-base);
 }
 
 //----------------------------------------------------------------------------------------------------------------------