Striped table rows updated

scss/_settings.scss

@@ -5,7 +5,7 @@
 // Settings
 // ––––––––––––––––––––
 
-// Theme color
+// Theme colors
 $yo-themes: (
   "amber",
   "azure",
@@ -13,7 +13,6 @@ $yo-themes: (
   "cyan",
   "fuchsia",
   "green",
-  "grey",
   "indigo",
   "jade",
   "lime",
@@ -22,11 +21,8 @@ $yo-themes: (
   "pumpkin",
   "purple",
   "red",
-  "sand",
-  "slate",
   "violet",
-  "yellow",
-  "zinc"
+  "yellow"
 );
 $random: list.nth($yo-themes, math.random(list.length($yo-themes)));
 // picks a random theme to use as default
@@ -64,6 +60,11 @@ $enable-transitions: true !default;
 // Enable overriding with !important
 $enable-important: true !default;
 
+// How many hidden rows do you expect to have within a table?
+// <tr hidden> is what is accounted for striped rows.
+// if none, put 0 instead of 3.
+$hidden-table-levels: 4 !default;
+
 // Optional parent selector
 // If defined, all HTML tags are wrapped with this selector
 // :root is not wrapped

scss/content/_table.scss

@@ -1,6 +1,61 @@
 @use "sass:map";
 @use "../settings" as *;
 
+// Variables for striped rows
+$color-dark: var(#{$css-var-prefix}table-row-stripped-background-color);
+$color-light: var(#{$css-var-prefix}background-color);
+
+// Adjust this number to control how many <tr hidden> rows are expected.
+$hidden-levels: $hidden-table-levels;
+
+// Do not change, or remove the following line
+// needed this outside of the mixin to compile, idk why
+// sass --version = 1.83.4 compiled with dart2js 3.6.1
+$selector: "& ~ tr";
+
+// This is the work around because the compiler changes
+// :nth-child(odd of :not(:hidden))  to  :nth-child(oddof:not(:hidden))
+// which makes the stripes fail.
+// Mixin to handle the hidden row with striped backgrounds patterns
+// Thanks Shaggy: https://stackoverflow.com/questions/3773890/zebra-striping-a-table-with-hidden-rows-using-css3/36892714#36892714
+@mixin hidden-row-patterns($levels: 2, $dark-color: $color-dark, $light-color: $color-light) {
+  $current-color-odd: $light-color;
+  $current-color-even: $dark-color;
+  // Generate nested s electors for each level
+  $selector: "& ~ tr";
+
+  &[hidden] {
+    display: none;
+
+    @for $i from 1 through $levels {
+      @if $i > 1 {
+        // Swap colors for next iteration
+        $temp: $current-color-odd;
+        $current-color-odd: $current-color-even;
+        $current-color-even: $temp;
+
+        // Add another level of nesting to the selector
+        $selector: "#{$selector}[hidden] ~ tr";
+      }
+      #{$selector} {
+        &:nth-child(odd) {
+          > th,
+          > td {
+            background: $current-color-odd;
+          }
+        }
+
+        &:nth-child(even) {
+          > th,
+          > td {
+            background: $current-color-even;
+          }
+        }
+      }
+    }
+  }
+}
+
 @if map.get($modules, "content/table") {
   /**
    * Table
@@ -24,8 +79,8 @@
   // ––––––––––––––––––––
 
   // Cells
-  #{$parent-selector} th,
-  #{$parent-selector} td {
+  #{$parent-selector} table th,
+  #{$parent-selector} table td {
     padding: calc(var(#{$css-var-prefix}spacing) / 2) var(#{$css-var-prefix}spacing);
     border-bottom: var(#{$css-var-prefix}border-width)
       solid
@@ -37,8 +92,18 @@
     text-align: start;
   }
 
+  #{$parent-selector} table > caption {
+    margin-block: calc(var(#{$css-var-prefix}block-spacing-vertical) * 0.5);
+    padding: calc(var(#{$css-var-prefix}spacing) / 2) var(#{$css-var-prefix}spacing);
+    background-color: var(#{$css-var-prefix}table-row-stripped-background-color);
+    color: var(#{$css-var-prefix}h3-color);
+    font-weight: var(#{$css-var-prefix}font-weight);
+    font-size: 1.25rem;
+    text-align: center;
+  }
+
   // Footer
-  #{$parent-selector} tfoot {
+  #{$parent-selector} table > tfoot {
     th,
     td {
       border-top: var(#{$css-var-prefix}border-width)
@@ -48,13 +113,36 @@
     }
   }
 
+  #{$parent-selector} table > caption {
+    margin-block: calc(var(#{$css-var-prefix}block-spacing-vertical) * 0.5);
+    background-color: var(#{$css-var-prefix}table-row-stripped-background-color);
+    color: var(#{$css-var-prefix}h3-color);
+    font-weight: var(#{$css-var-prefix}font-weight);
+    font-size: 1.25rem;
+    text-align: center;
+  }
+
   // Striped
   @if enable-classes {
     #{$parent-selector} table {
       &.striped {
-        tbody tr:nth-child(odd of :not([hidden])) th,
-        tbody tr:nth-child(odd of :not([hidden])) td {
-          background-color: var(#{$css-var-prefix}table-row-stripped-background-color);
+        > tbody > tr {
+          &:nth-child(odd) {
+            > th,
+            > td {
+              background: $color-dark;
+            }
+          }
+
+          &:nth-child(even) {
+            > th,
+            > td {
+              background: $color-light;
+            }
+          }
+
+          // Apply the hidden row patterns
+          @include hidden-row-patterns($hidden-levels);
         }
       }
     }

scss/themes/default/_styles.scss

@@ -285,6 +285,9 @@
 
   // Table
   @if map.get($modules, "content/table") {
+    table > caption {
+      #{$css-var-prefix}font-weight: 600;
+    }
     thead,
     tfoot {
       th,