@graupl/core 1.0.0-beta.10

package/src/scss/base/table/_index.scss

@@ -0,0 +1,314 @@
+// @graupl/core table base styles.
+//
+// This module provides the base styles for tables.
+//
+// The following selectors are generated by default:
+// - `table`: The table component.
+// - `caption`: The table caption component.
+// - `th`: The table header cell component.
+// - `td`: The table cell component.
+// - `tr`: The table row component.
+// - `tbody`: The table body component.
+// - `.bordered`: A component modifier to make the table component bordered.
+// - `.collapsed`: A component modifier to make the table component's border collapsed.
+// - `.striped-columns`: A component modifier to make the table component's columns striped.
+// - `.striped-rows`: A component modifier to make the table component's rows striped.
+// - `.hoverable`: A component modifier to make the table component's rows change colour on hover.
+// - `.highlight`: A component modifier to highlight table components.
+// - `.responsive-table`: A component modifier to make the table component responsive.
+// - `.primary`: A component modifier to apply the primary colour to the table component.
+// - `.secondary`: A component modifier to apply the secondary colour to the table component.
+// - `.tertiary`: A component modifier to apply the tertiary colour to the table component.
+//
+// The following custom properties control the generated selectors:
+// - `--graupl-table-caption-side`: The caption side of the table component.
+// - `--graupl-table-caption-padding-x`: The horizontal padding of the table caption component.
+// - `--graupl-table-caption-padding-y`: The vertical padding of the table caption component.
+// - `--graupl-table-caption-padding`: The padding of the table caption component (combines x and y padding).
+// - `--graupl-table-header-font-weight`: The font weight of the table header component.
+// - `--graupl-table-header-padding-x`: The horizontal padding of the table header component.
+// - `--graupl-table-header-padding-y`: The vertical padding of the table header component.
+// - `--graupl-table-header-padding`: The padding of the table header component (combines x and y padding).
+// - `--graupl-table-header-background`: The background colour of the table header component.
+// - `--graupl-table-header-color`: The text colour of the table header component.
+// - `--graupl-table-cell-padding-x`: The horizontal padding of the table cell component.
+// - `--graupl-table-cell-padding-y`: The vertical padding of the table cell component.
+// - `--graupl-table-cell-padding`: The padding of the table cell component (combines x and y padding).
+// - `--graupl-table-cell-background`: The background colour of the table cell component.
+// - `--graupl-table-cell-color`: The text colour of the table cell component.
+// - `--graupl-table-border-top-width`: The top border width of the table component.
+// - `--graupl-table-border-right-width`: The right border width of the table component.
+// - `--graupl-table-border-bottom-width`: The bottom border width of the table component.
+// - `--graupl-table-border-left-width`: The left border width of the table component.
+// - `--graupl-table-border-width`: The border width of the table component (combines top, right, bottom, and left widths).
+// - `--graupl-table-border-top-style`: The top border style of the table component.
+// - `--graupl-table-border-right-style`: The right border style of the table component.
+// - `--graupl-table-border-bottom-style`: The bottom border style of the table component.
+// - `--graupl-table-border-left-style`: The left border style of the table component.
+// - `--graupl-table-border-style`: The border style of the table component (combines top, right, bottom, and left styles).
+// - `--graupl-table-border-top-left-radius`: The top left border radius of the table component.
+// - `--graupl-table-border-top-right-radius`: The top right border radius of the table component.
+// - `--graupl-table-border-bottom-right-radius`: The bottom right border radius of the table component.
+// - `--graupl-table-border-bottom-left-radius`: The bottom left border radius of the table component.
+// - `--graupl-table-border-radius`: The border radius of the table component (combines top left, top right, bottom right, and bottom left radii).
+// - `--graupl-table-border-color`: The border colour of the table component.
+// - `--graupl-table-cell-border-top-width`: The top border width of the table cell component.
+// - `--graupl-table-cell-border-right-width`: The right border width of the table cell component.
+// - `--graupl-table-cell-border-bottom-width`: The bottom border width of the table cell component.
+// - `--graupl-table-cell-border-left-width`: The left border width of the table cell component.
+// - `--graupl-table-cell-border-width`: The border width of the table cell component (combines top, right, bottom, and left widths).
+// - `--graupl-table-cell-border-top-style`: The top border style of the table cell component.
+// - `--graupl-table-cell-border-right-style`: The right border style of the table cell component.
+// - `--graupl-table-cell-border-bottom-style`: The bottom border style of the table cell component.
+// - `--graupl-table-cell-border-left-style`: The left border style of the table cell component.
+// - `--graupl-table-cell-border-style`: The border style of the table cell component (combines top, right, bottom, and left styles).
+// - `--graupl-table-cell-border-top-left-radius`: The top left border radius of the table cell component.
+// - `--graupl-table-cell-border-top-right-radius`: The top right border radius of the table cell component.
+// - `--graupl-table-cell-border-bottom-right-radius`: The bottom right border radius of the table cell component.
+// - `--graupl-table-cell-border-bottom-left-radius`: The bottom left border radius of the table cell component.
+// - `--graupl-table-cell-border-radius`: The border radius of the table cell component (combines top left, top right, bottom right, and bottom left radii).
+// - `--graupl-table-cell-border-color`: The border colour of the table cell component.
+// - `--graupl-table-header-border-top-width`: The top border width of the table header component.
+// - `--graupl-table-header-border-right-width`: The right border width of the table header component.
+// - `--graupl-table-header-border-bottom-width`: The bottom border width of the table header component.
+// - `--graupl-table-header-border-left-width`: The left border width of the table header component.
+// - `--graupl-table-header-border-width`: The border width of the table header component (combines top, right, bottom, and left widths).
+// - `--graupl-table-header-border-top-style`: The top border style of the table header component.
+// - `--graupl-table-header-border-right-style`: The right border style of the table header component.
+// - `--graupl-table-header-border-bottom-style`: The bottom border style of the table header component.
+// - `--graupl-table-header-border-left-style`: The left border style of the table header component.
+// - `--graupl-table-header-border-style`: The border style of the table header component (combines top, right, bottom, and left styles).
+// - `--graupl-table-header-border-top-left-radius`: The top left border radius of the table header component.
+// - `--graupl-table-header-border-top-right-radius`: The top right border radius of the table header component.
+// - `--graupl-table-header-border-bottom-right-radius`: The bottom right border radius of the table header component.
+// - `--graupl-table-header-border-bottom-left-radius`: The bottom left border radius of the table header component.
+// - `--graupl-table-header-border-radius`: The border radius of the table header component (combines top left, top right, bottom right, and bottom left radii).
+// - `--graupl-table-header-border-color`: The border colour of the table header component.
+// - `--graupl-table-striped-background`: The background colour of the striped table component modifier.
+// - `--graupl-table-striped-color`: The text colour of the striped table component modifier.
+// - `--graupl-table-hover-background`: The background colour of the hoverable table component modifier.
+// - `--graupl-table-hover-color`: The text colour of the hoverable table component modifier.
+// - `--graupl-table-highlight-background`: The background colour of the highlighted table component modifier.
+// - `--graupl-table-highlight-color`: The text colour of the highlighted table component modifier.
+//
+// The following variables control the generated selectors:
+// - `$selector-base`: The selector base for the component.
+// - `$modifier-selector-base`: The selector base for component modifiers.
+// - `$table-selector-base`: The selector base for the table component.
+// - `$table-selector`: The selector for the table component.
+// - `$table-caption-selector-base`: The selector base for the table caption component.
+// - `$table-caption-selector`: The selector for the table caption component.
+// - `$table-header-selector-base`: The selector base for the table header cell component.
+// - `$table-header-selector`: The selector for the table header cell component.
+// - `$table-cell-selector-base`: The selector base for the table cell component.
+// - `$table-cell-selector`: The selector for the table cell component.
+// - `$table-row-selector-base`: The selector base for the table row component.
+// - `$table-row-selector`: The selector for the table row component.
+// - `$table-body-selector-base`: The selector base for the table body component.
+// - `$table-body-selector`: The selector for the table body component.
+// - `$table-theme-prefix-selector-base`: The selector base for the themed table component modifiers.
+// - `$table-theme-prefix-selector`: The selector prefix for the themed table component modifiers.
+// - `$table-bordered-selector-base`: The selector base for the bordered table component modifier.
+// - `$table-bordered-selector`: The selector for the bordered table component modifier.
+// - `$table-collapsed-selector-base`: The selector base for the collapsed table component modifier.
+// - `$table-collapsed-selector`: The selector for the collapsed table component modifier.
+// - `$table-striped-columns-selector-base`: The selector base for the striped columns table component modifier.
+// - `$table-striped-columns-selector`: The selector for the striped columns table component modifier.
+// - `$table-striped-rows-selector-base`: The selector base for the striped rows table component modifier.
+// - `$table-striped-rows-selector`: The selector for the striped rows table component modifier.
+// - `$table-hoverable-selector-base`: The selector base for the hoverable table component modifier.
+// - `$table-hoverable-selector`: The selector for the hoverable table component modifier.
+// - `$table-highlight-selector-base`: The selector base for the highlighted table component modifier.
+// - `$table-highlight-selector`: The selector for the highlighted table component modifier.
+// - `$table-responsive-selector-base`: The selector base for the responsive table component modifier.
+// - `$table-responsive-selector`: The selector for the responsive table component modifier.
+//
+// @example
+// <table class="table bordered">
+//   <caption>Table Caption</caption>
+//   <thead>
+//     <tr>
+//       <th>Header 1</th>
+//       <th>Header 2</th>
+//     </tr>
+//   </thead>
+//   <tbody>
+//     <tr>
+//       <td>Cell 1</td>
+//       <td>Cell 2</td>
+//     </tr>
+//     <tr>
+//       <td>Cell 3</td>
+//       <td>Cell 4</td>
+//     </tr>
+//   </tbody>
+// </table>
+
+@use "defaults";
+@use "variables" as *;
+@use "../../mixins/layer" as *;
+@use "../../defaults" as root-defaults;
+@use "../../functions/theme";
+
+@include layer(base) {
+  // table
+  #{defaults.$table-selector-base}#{defaults.$table-selector} {
+    border-radius: $table-border-radius;
+
+    // caption
+    #{defaults.$table-caption-selector-base}#{defaults.$table-caption-selector} {
+      padding: $table-caption-padding;
+      caption-side: $table-caption-side;
+    }
+
+    // th
+    #{defaults.$table-header-selector-base}#{defaults.$table-header-selector} {
+      padding: $table-header-padding;
+      border-radius: $table-header-border-radius;
+      font-weight: $table-header-font-weight;
+    }
+
+    // td, tbody th
+    #{defaults.$table-cell-selector-base}#{defaults.$table-cell-selector},
+    #{defaults.$table-body-selector-base}#{defaults.$table-body-selector}
+      #{defaults.$table-header-selector-base}#{defaults.$table-header-selector} {
+      padding: $table-cell-padding;
+      border-radius: $table-cell-border-radius;
+    }
+
+    // &.collapsed
+    &#{defaults.$table-collapsed-selector-base}#{defaults.$table-collapsed-selector} {
+      border-collapse: collapse;
+    }
+
+    // &.bordered
+    &#{defaults.$table-bordered-selector-base}#{defaults.$table-bordered-selector} {
+      // A bordered table can't actually have rounded corners.
+      --#{root-defaults.$prefix}table-border-radius: 0;
+      --#{root-defaults.$prefix}table-cell-border-radius: 0;
+      --#{root-defaults.$prefix}table-header-border-radius: 0;
+
+      border-collapse: collapse;
+      border-width: $table-border-width;
+      border-style: $table-border-style;
+
+      // td
+      #{defaults.$table-cell-selector-base}#{defaults.$table-cell-selector} {
+        border-width: $table-cell-border-width;
+        border-style: $table-cell-border-style;
+      }
+
+      // th
+      #{defaults.$table-header-selector-base}#{defaults.$table-header-selector} {
+        border-width: $table-header-border-width;
+        border-style: $table-header-border-style;
+      }
+    }
+  }
+
+  // .responsive-table
+  #{defaults.$table-responsive-selector-base}#{defaults.$table-responsive-selector} {
+    display: block;
+    width: 100%;
+    overflow: scroll hidden;
+
+    // table
+    #{defaults.$table-selector-base}#{defaults.$table-selector} {
+      width: 100%;
+      margin-bottom: 0;
+    }
+  }
+}
+
+@include layer(theme) {
+  // table
+  #{defaults.$table-selector-base}#{defaults.$table-selector} {
+    @each $variant in theme.variants() {
+      // e.g. &.primary, &.secondary, &.tertiary,
+      // e.g. .primary, .secondary, .tertiary
+      &#{defaults.$table-theme-prefix-selector-base}#{defaults.$table-theme-prefix-selector}#{$variant},
+      #{defaults.$table-theme-prefix-selector-base}#{defaults.$table-theme-prefix-selector}#{$variant} {
+        @each $prop, $key in defaults.$table-theme-map {
+          --#{root-defaults.$prefix}table-#{$prop}: #{theme.get(
+              $variant,
+              $key
+            )};
+        }
+      }
+    }
+
+    // th
+    #{defaults.$table-header-selector-base}#{defaults.$table-header-selector} {
+      background: $table-header-background;
+      color: $table-header-color;
+    }
+
+    // td, tbody th
+    #{defaults.$table-cell-selector-base}#{defaults.$table-cell-selector},
+    #{defaults.$table-body-selector-base}#{defaults.$table-body-selector}
+      #{defaults.$table-header-selector-base}#{defaults.$table-header-selector} {
+      background: $table-cell-background;
+      color: $table-cell-color;
+    }
+
+    // &.bordered
+    &#{defaults.$table-bordered-selector-base}#{defaults.$table-bordered-selector} {
+      border-color: $table-border-color;
+
+      // td
+      #{defaults.$table-cell-selector-base}#{defaults.$table-cell-selector} {
+        border-color: $table-cell-border-color;
+      }
+
+      // th
+      #{defaults.$table-header-selector-base}#{defaults.$table-header-selector} {
+        border-color: $table-header-border-color;
+      }
+    }
+
+    // &.striped-columns
+    &#{defaults.$table-striped-columns-selector-base}#{defaults.$table-striped-columns-selector} {
+      // tbody tr:nth-child(odd) > *
+      #{defaults.$table-body-selector-base}#{defaults.$table-body-selector}
+        #{defaults.$table-row-selector-base}#{defaults.$table-row-selector}:nth-child(
+          odd
+        )
+        > * {
+        background: $table-striped-background;
+        color: $table-striped-color;
+      }
+    }
+
+    // &.striped-rows
+    &#{defaults.$table-striped-rows-selector-base}#{defaults.$table-striped-rows-selector} {
+      // tbody tr > :nth-child(odd)
+      #{defaults.$table-body-selector-base}#{defaults.$table-body-selector}
+        #{defaults.$table-row-selector-base}#{defaults.$table-row-selector}
+        > :nth-child(odd) {
+        background: $table-striped-background;
+        color: $table-striped-color;
+      }
+    }
+
+    // &.hoverable
+    &#{defaults.$table-hoverable-selector-base}#{defaults.$table-hoverable-selector} {
+      // tbody tr:hover > *
+      #{defaults.$table-body-selector-base}#{defaults.$table-body-selector}
+        #{defaults.$table-row-selector-base}#{defaults.$table-row-selector}:hover
+        > * {
+        background: $table-hover-background;
+        color: $table-hover-color;
+      }
+    }
+
+    // &.highlight
+    #{defaults.$table-highlight-selector-base}#{defaults.$table-highlight-selector} {
+      --#{root-defaults.$prefix}table-cell-background: #{$table-highlight-background};
+      --#{root-defaults.$prefix}table-cell-color: #{$table-highlight-color};
+      --#{root-defaults.$prefix}table-header-background: #{$table-highlight-background};
+      --#{root-defaults.$prefix}table-header-color: #{$table-highlight-color};
+      --#{root-defaults.$prefix}table-striped-background: #{$table-highlight-background};
+      --#{root-defaults.$prefix}table-striped-color: #{$table-highlight-color};
+    }
+  }
+}

package/src/scss/base/table/_variables.scss

@@ -0,0 +1,309 @@
+// @graupl/core table base variables.
+//
+// These values are to be used to directly style bases and provide a
+// cleaner way to reference custom properties.
+
+@use "defaults";
+@use "../../defaults" as root-defaults;
+@use "../../variables" as root-variables;
+@use "../../theme/typography/variables" as typography;
+@use "../../theme/color/variables" as color;
+@use "../../functions/theme";
+@use "sass:map";
+
+// Table caption properties.
+$table-caption-side: var(
+  --#{root-defaults.$prefix}table-caption-side,
+  #{defaults.$table-caption-side}
+);
+$table-caption-padding-x: var(
+  --#{root-defaults.$prefix}table-caption-padding-x,
+  #{map.get(root-variables.$spacers, 3)}
+);
+$table-caption-padding-y: var(
+  --#{root-defaults.$prefix}table-caption-padding-y,
+  #{map.get(root-variables.$spacers, 3)}
+);
+$table-caption-padding: $table-caption-padding-y $table-caption-padding-x;
+
+// Table header properties.
+$table-header-font-weight: var(
+  --#{root-defaults.$prefix}table-header-font-weight,
+  #{typography.$font-weight-bold}
+);
+$table-header-padding-x: var(
+  --#{root-defaults.$prefix}table-header-padding-x,
+  #{map.get(root-variables.$spacers, 3)}
+);
+$table-header-padding-y: var(
+  --#{root-defaults.$prefix}table-header-padding-y,
+  #{map.get(root-variables.$spacers, 3)}
+);
+$table-header-padding: $table-header-padding-y $table-header-padding-x;
+$table-header-background: var(
+  --#{root-defaults.$prefix}table-header-background,
+  #{color.$background}
+);
+$table-header-color: var(
+  --#{root-defaults.$prefix}table-header-color,
+  #{color.$color}
+);
+
+// Table cell properties.
+$table-cell-padding-x: var(
+  --#{root-defaults.$prefix}table-cell-padding-x,
+  #{map.get(root-variables.$spacers, 3)}
+);
+$table-cell-padding-y: var(
+  --#{root-defaults.$prefix}table-cell-padding-y,
+  #{map.get(root-variables.$spacers, 3)}
+);
+$table-cell-padding: $table-cell-padding-y $table-cell-padding-x;
+$table-cell-background: var(
+  --#{root-defaults.$prefix}table-cell-background,
+  #{color.$background}
+);
+$table-cell-color: var(
+  --#{root-defaults.$prefix}table-cell-color,
+  #{color.$color}
+);
+
+// Table border properties.
+$table-border-top-width: var(
+  --#{root-defaults.$prefix}table-border-top-width,
+  #{root-variables.$border-top-width}
+);
+$table-border-right-width: var(
+  --#{root-defaults.$prefix}table-border-right-width,
+  #{root-variables.$border-right-width}
+);
+$table-border-bottom-width: var(
+  --#{root-defaults.$prefix}table-border-bottom-width,
+  #{root-variables.$border-bottom-width}
+);
+$table-border-left-width: var(
+  --#{root-defaults.$prefix}table-border-left-width,
+  #{root-variables.$border-left-width}
+);
+$table-border-width: var(
+  --#{root-defaults.$prefix}table-border-width,
+  #{$table-border-top-width} #{$table-border-right-width}
+    #{$table-border-bottom-width} #{$table-border-left-width}
+);
+$table-border-top-style: var(
+  --#{root-defaults.$prefix}table-border-top-style,
+  #{root-variables.$border-top-style}
+);
+$table-border-right-style: var(
+  --#{root-defaults.$prefix}table-border-right-style,
+  #{root-variables.$border-right-style}
+);
+$table-border-bottom-style: var(
+  --#{root-defaults.$prefix}table-border-bottom-style,
+  #{root-variables.$border-bottom-style}
+);
+$table-border-left-style: var(
+  --#{root-defaults.$prefix}table-border-left-style,
+  #{root-variables.$border-left-style}
+);
+$table-border-style: var(
+  --#{root-defaults.$prefix}table-border-style,
+  #{$table-border-top-style} #{$table-border-right-style}
+    #{$table-border-bottom-style} #{$table-border-left-style}
+);
+$table-border-top-left-radius: var(
+  --#{root-defaults.$prefix}table-border-top-left-radius,
+  #{root-variables.$border-top-left-radius}
+);
+$table-border-top-right-radius: var(
+  --#{root-defaults.$prefix}table-border-top-right-radius,
+  #{root-variables.$border-top-right-radius}
+);
+$table-border-bottom-right-radius: var(
+  --#{root-defaults.$prefix}table-border-bottom-right-radius,
+  #{root-variables.$border-bottom-right-radius}
+);
+$table-border-bottom-left-radius: var(
+  --#{root-defaults.$prefix}table-border-bottom-left-radius,
+  #{root-variables.$border-bottom-left-radius}
+);
+$table-border-radius: var(
+  --#{root-defaults.$prefix}table-border-radius,
+  #{$table-border-top-left-radius} #{$table-border-top-right-radius}
+    #{$table-border-bottom-right-radius} #{$table-border-bottom-left-radius}
+);
+$table-border-color: var(
+  --#{root-defaults.$prefix}table-border-color,
+  #{color.$border-color}
+);
+
+// Table cell border properties.
+$table-cell-border-top-width: var(
+  --#{root-defaults.$prefix}table-cell-border-top-width,
+  #{root-variables.$border-top-width}
+);
+$table-cell-border-right-width: var(
+  --#{root-defaults.$prefix}table-cell-border-right-width,
+  #{root-variables.$border-right-width}
+);
+$table-cell-border-bottom-width: var(
+  --#{root-defaults.$prefix}table-cell-border-bottom-width,
+  #{root-variables.$border-bottom-width}
+);
+$table-cell-border-left-width: var(
+  --#{root-defaults.$prefix}table-cell-border-left-width,
+  #{root-variables.$border-left-width}
+);
+$table-cell-border-width: var(
+  --#{root-defaults.$prefix}table-cell-border-width,
+  #{$table-cell-border-top-width} #{$table-cell-border-right-width}
+    #{$table-cell-border-bottom-width} #{$table-cell-border-left-width}
+);
+$table-cell-border-top-style: var(
+  --#{root-defaults.$prefix}table-cell-border-top-style,
+  #{root-variables.$border-top-style}
+);
+$table-cell-border-right-style: var(
+  --#{root-defaults.$prefix}table-cell-border-right-style,
+  #{root-variables.$border-right-style}
+);
+$table-cell-border-bottom-style: var(
+  --#{root-defaults.$prefix}table-cell-border-bottom-style,
+  #{root-variables.$border-bottom-style}
+);
+$table-cell-border-left-style: var(
+  --#{root-defaults.$prefix}table-cell-border-left-style,
+  #{root-variables.$border-left-style}
+);
+$table-cell-border-style: var(
+  --#{root-defaults.$prefix}table-cell-border-style,
+  #{$table-cell-border-top-style} #{$table-cell-border-right-style}
+    #{$table-cell-border-bottom-style} #{$table-cell-border-left-style}
+);
+$table-cell-border-top-left-radius: var(
+  --#{root-defaults.$prefix}table-cell-border-top-left-radius,
+  #{root-variables.$border-top-left-radius}
+);
+$table-cell-border-top-right-radius: var(
+  --#{root-defaults.$prefix}table-cell-border-top-right-radius,
+  #{root-variables.$border-top-right-radius}
+);
+$table-cell-border-bottom-right-radius: var(
+  --#{root-defaults.$prefix}table-cell-border-bottom-right-radius,
+  #{root-variables.$border-bottom-right-radius}
+);
+$table-cell-border-bottom-left-radius: var(
+  --#{root-defaults.$prefix}table-cell-border-bottom-left-radius,
+  #{root-variables.$border-bottom-left-radius}
+);
+$table-cell-border-radius: var(
+  --#{root-defaults.$prefix}table-cell-border-radius,
+  #{$table-cell-border-top-left-radius} #{$table-cell-border-top-right-radius}
+    #{$table-cell-border-bottom-right-radius}
+    #{$table-cell-border-bottom-left-radius}
+);
+$table-cell-border-color: var(
+  --#{root-defaults.$prefix}table-cell-border-color,
+  #{$table-border-color}
+);
+
+// Table header border properties.
+$table-header-border-top-width: var(
+  --#{root-defaults.$prefix}table-header-border-top-width,
+  #{$table-cell-border-top-width}
+);
+$table-header-border-right-width: var(
+  --#{root-defaults.$prefix}table-header-border-right-width,
+  #{$table-cell-border-right-width}
+);
+$table-header-border-bottom-width: var(
+  --#{root-defaults.$prefix}table-header-border-bottom-width,
+  #{$table-cell-border-bottom-width}
+);
+$table-header-border-left-width: var(
+  --#{root-defaults.$prefix}table-header-border-left-width,
+  #{$table-cell-border-left-width}
+);
+$table-header-border-width: var(
+  --#{root-defaults.$prefix}table-header-border-width,
+  #{$table-header-border-top-width} #{$table-header-border-right-width}
+    #{$table-header-border-bottom-width} #{$table-header-border-left-width}
+);
+$table-header-border-top-style: var(
+  --#{root-defaults.$prefix}table-header-border-top-style,
+  #{$table-cell-border-top-style}
+);
+$table-header-border-right-style: var(
+  --#{root-defaults.$prefix}table-header-border-right-style,
+  #{$table-cell-border-right-style}
+);
+$table-header-border-bottom-style: var(
+  --#{root-defaults.$prefix}table-header-border-bottom-style,
+  #{$table-cell-border-bottom-style}
+);
+$table-header-border-left-style: var(
+  --#{root-defaults.$prefix}table-header-border-left-style,
+  #{$table-cell-border-left-style}
+);
+$table-header-border-style: var(
+  --#{root-defaults.$prefix}table-header-border-style,
+  #{$table-header-border-top-style} #{$table-header-border-right-style}
+    #{$table-header-border-bottom-style} #{$table-header-border-left-style}
+);
+$table-header-border-top-left-radius: var(
+  --#{root-defaults.$prefix}table-header-border-top-left-radius,
+  #{$table-cell-border-top-left-radius}
+);
+$table-header-border-top-right-radius: var(
+  --#{root-defaults.$prefix}table-header-border-top-right-radius,
+  #{$table-cell-border-top-right-radius}
+);
+$table-header-border-bottom-right-radius: var(
+  --#{root-defaults.$prefix}table-header-border-bottom-right-radius,
+  #{$table-cell-border-bottom-right-radius}
+);
+$table-header-border-bottom-left-radius: var(
+  --#{root-defaults.$prefix}table-header-border-bottom-left-radius,
+  #{$table-cell-border-bottom-left-radius}
+);
+$table-header-border-radius: var(
+  --#{root-defaults.$prefix}table-header-border-radius,
+  #{$table-header-border-top-left-radius}
+    #{$table-header-border-top-right-radius}
+    #{$table-header-border-bottom-right-radius}
+    #{$table-header-border-bottom-left-radius}
+);
+$table-header-border-color: var(
+  --#{root-defaults.$prefix}table-header-border-color,
+  #{$table-border-color}
+);
+
+// Table striped properties.
+$table-striped-background: var(
+  --#{root-defaults.$prefix}table-striped-background,
+  #{theme.get(secondary, 200)}
+);
+$table-striped-color: var(
+  --#{root-defaults.$prefix}table-striped-color,
+  #{theme.get(secondary, 900)}
+);
+
+// Table hover properties.
+$table-hover-background: var(
+  --#{root-defaults.$prefix}table-hover-background,
+  #{theme.get(secondary, 300)}
+);
+$table-hover-color: var(
+  --#{root-defaults.$prefix}table-hover-color,
+  #{theme.get(secondary, 900)}
+);
+
+// Table highlight properties.
+$table-highlight-background: var(
+  --#{root-defaults.$prefix}table-highlight-background,
+  #{theme.get(secondary, 500)}
+);
+$table-highlight-color: var(
+  --#{root-defaults.$prefix}table-highlight-color,
+  #{theme.get(secondary, 100)}
+);

package/src/scss/component/_index.scss

@@ -0,0 +1,10 @@
+// @graupl/core component styles.
+
+@forward "alert";
+@forward "accordion";
+@forward "card";
+@forward "carousel";
+@forward "input-group";
+@forward "list";
+@forward "menu";
+@forward "navigation";

package/src/scss/component/accordion/_defaults.scss

@@ -0,0 +1,40 @@
+// @graupl/core accordion component default values.
+//
+// Generally, these should not be used directly when styling components unless a static value is needed.
+// They are mainly used to provide class selectors, fallbacks for custom properties, or loop values.
+//
+// They should not be used to define direct property values (i.e. font-size, color, etc.).
+// Those should be defined as custom properties in the `_variables.scss` file.
+
+@use "sass:map";
+
+// Accordion selectors.
+$accordion-selector: ".accordion" !default;
+$accordion-item-selector: ".accordion-item" !default;
+$accordion-item-header-selector: ".accordion-item-header" !default;
+$accordion-item-title-selector: ".accordion-item-title" !default;
+$accordion-item-toggle-selector: ".accordion-item-toggle" !default;
+$accordion-item-content-selector: ".accordion-item-content" !default;
+$accordion-item-body-selector: ".accordion-item-body" !default;
+$accordion-item-footer-selector: ".accordion-item-footer" !default;
+$accordion-item-open-selector: ".show" !default;
+$accordion-item-close-selector: ".hide" !default;
+$accordion-item-transition-selector: ".transitioning" !default;
+$accordion-item-toggle-pseudo-selector: "::after" !default;
+
+// Toggle transform properties.
+$accordion-item-toggle-transform: none !default;
+$accordion-item-toggle-visited-transform: $accordion-item-toggle-transform !default;
+$accordion-item-toggle-focus-transform: $accordion-item-toggle-transform !default;
+$accordion-item-toggle-hover-transform: $accordion-item-toggle-transform !default;
+$accordion-item-toggle-active-transform: $accordion-item-toggle-transform !default;
+$accordion-item-toggle-disabled-transform: $accordion-item-toggle-transform !default;
+$accordion-item-toggle-pseudo-transform: none !default;
+$accordion-item-toggle-pseudo-open-transform: rotate(-180deg) !default;
+
+// Toggle properties.
+$accordion-item-toggle-pseudo-content: "▼" !default;
+
+// Accordion transform properties.
+$accordion-item-content-transform: translateY(-100%) !default;
+$accordion-item-content-open-transform: translateY(0) !default;