style(table): add 'theme-iron' variant (#2803)

src/elements/core/styles/mixins/table.scss

@@ -15,8 +15,7 @@
   --sbb-table-border-radius: var(--sbb-border-radius-4x);
   --sbb-table-background-color: var(--sbb-color-white);
   --sbb-table-row-striped-color: var(--sbb-color-milk);
-  --sbb-table-header-color: var(--sbb-color-charcoal);
-  --sbb-table-cell-color: var(--sbb-color-iron);
+  --sbb-table-color: inherit;
   --sbb-table-caption-color: var(--sbb-color-granite);
   --sbb-table-caption-margin-block-start: var(--sbb-spacing-fixed-4x);
 
@@ -25,6 +24,7 @@
   border-radius: var(--sbb-table-border-radius);
   border-spacing: 0;
   caption-side: bottom;
+  color: var(--sbb-table-color);
   table-layout: auto;
 
   thead {
@@ -53,7 +53,6 @@
 
   border-bottom: var(--sbb-table-border);
   border-right: var(--sbb-table-border);
-  color: var(--sbb-table-header-color);
   padding-block: var(--sbb-table-header-padding-block);
   padding-inline: var(--sbb-table-header-padding-inline);
   text-align: left;
@@ -76,7 +75,6 @@
 
   border-top: var(--sbb-table-border);
   border-right: var(--sbb-table-border);
-  color: var(--sbb-table-cell-color);
   padding-block: var(--sbb-table-cell-padding-block);
   padding-inline: var(--sbb-table-cell-padding-inline);
 
@@ -89,7 +87,7 @@
 @mixin table-caption {
   @include typo.text-xs--regular;
 
-  // Defaults are needed for cases where the caption is used from outside a table
+  // Defaults are needed for cases where the caption is used outside a table
   color: var(--sbb-table-caption-color, var(--sbb-color-granite));
   margin-block-start: var(--sbb-table-caption-margin-block-start, var(--sbb-spacing-fixed-4x));
   text-align: left;
@@ -114,8 +112,7 @@
 @mixin table--negative {
   --sbb-table-border-color: var(--sbb-color-anthracite);
   --sbb-table-background-color: var(--sbb-color-midnight);
-  --sbb-table-header-color: var(--sbb-color-white);
-  --sbb-table-cell-color: var(--sbb-color-cloud);
+  --sbb-table-color: var(--sbb-color-white);
   --sbb-table-row-striped-color: var(--sbb-color-charcoal);
   --sbb-table-caption-color: var(--sbb-color-cement);
 }
@@ -137,3 +134,15 @@
     @include typo.text-xs--regular;
   }
 }
+
+@mixin table--theme-iron {
+  --sbb-table-cell-color: var(--sbb-color-iron);
+
+  tbody > tr > td {
+    color: var(--sbb-table-cell-color);
+  }
+}
+
+@mixin table--theme-iron-negative {
+  --sbb-table-cell-color: var(--sbb-color-cloud);
+}

src/elements/core/styles/table.scss

@@ -27,6 +27,14 @@ sbb-table-wrapper[negative] .sbb-table,
   @include table.table--unstriped;
 }
 
+.sbb-table--theme-iron {
+  @include table.table--theme-iron;
+
+  &.sbb-table--negative {
+    @include table.table--theme-iron-negative;
+  }
+}
+
 .sbb-table-header-cell {
   @include table.table-header-cell;
 }

src/elements/dialog/dialog/dialog.snapshot.spec.ts

@@ -12,6 +12,7 @@ import '../dialog-content.js';
 describe(`sbb-dialog`, () => {
   describe('renders an open dialog', async () => {
     let root: SbbDialogElement;
+
     beforeEach(async () => {
       root = await fixture(
         html` <sbb-dialog>
@@ -22,12 +23,15 @@ describe(`sbb-dialog`, () => {
       root.open();
       await waitForLitRender(root);
     });
+
     it('DOM', async () => {
       await expect(root).dom.to.be.equalSnapshot();
     });
+
     it('Shadow DOM', async () => {
       await expect(root).shadowDom.to.be.equalSnapshot();
     });
+
     testA11yTreeSnapshot();
   });
 });

src/storybook/styles/table/readme.md

@@ -60,6 +60,17 @@ For a negative color scheme, apply the `sbb-table--negative` class:
 </table>
 ```
 
+## Iron theme
+
+For the iron theme, apply the `sbb-table--theme-iron` class.
+This scheme changes the text color of the cells to `sbb-color-iron`.
+
+```html
+<table class="sbb-table sbb-table--theme-iron">
+  ...
+</table>
+```
+
 ### Mixins and classes
 
 In advanced scenarios, predefined classes might not suffice.

src/storybook/styles/table/table.stories.ts

@@ -25,16 +25,25 @@ const striped: InputType = {
   },
 };
 
+const colorTheme: InputType = {
+  options: ['none', 'iron'],
+  control: {
+    type: 'select',
+  },
+};
+
 const defaultArgTypes: ArgTypes = {
   size,
   negative,
   striped,
+  'color-theme': colorTheme,
 };
 
 const defaultArgs: Args = {
   size: size.options![1],
   negative: false,
   striped: true,
+  'color-theme': colorTheme.options![0],
 };
 
 const caption: () => TemplateResult = () => html`
@@ -85,6 +94,7 @@ const Template = (args: Args): TemplateResult => html`
       'sbb-table-s': args.size === 's',
       'sbb-table-m': args.size === 'm',
       'sbb-table--unstriped': !args.striped,
+      'sbb-table--theme-iron': args['color-theme'] === 'iron',
     })}
   >
     ${caption()} ${header()} ${body()}
@@ -109,6 +119,12 @@ export const Negative: StoryObj = {
   args: { ...defaultArgs, negative: true },
 };
 
+export const IronTheme: StoryObj = {
+  render: Template,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs, 'color-theme': 'iron' },
+};
+
 const meta: Meta = {
   parameters: {
     backgroundColor: (context: StoryContext) =>

src/storybook/styles/table/table.visual.spec.ts

@@ -85,5 +85,25 @@ describe(`table`, () => {
         }),
       );
     }
+
+    describe('iron-theme', () => {
+      for (const negative of [false, true]) {
+        it(
+          `negative=${negative}`,
+          visualDiffDefault.with(async (setup) => {
+            await setup.withFixture(
+              tableTemplate({
+                'sbb-table': true,
+                'sbb-table--theme-iron': true,
+                'sbb-table--negative': negative,
+              }),
+              {
+                backgroundColor: negative ? 'var(--sbb-color-black)' : undefined,
+              },
+            );
+          }),
+        );
+      }
+    });
   });
 });