@sbb-esta/lyne-elements-dev 4.0.0-dev.1776067066 → 4.0.0-dev.1776085156

package/core/styles/mixins/table.scss

@@ -1,10 +1,9 @@
 @use './typo';
 
-// SBB table mixin
-// Notes:
-// We cannot use `border-collapse` because in sticky variants it gets visually broken.
-// Therefore, we have to build the grid avoiding double borders.
-// TODO: remove with next major release
+// TODO: delete this file with next major release
+// All mixins have been inlined in the table global style
+
+// @deprecated
 @mixin table {
   @include table--m;
   @include table--striped;
@@ -63,7 +62,7 @@
   }
 }
 
-// TODO: remove with next major release
+// @deprecated
 @mixin table-header-row {
   // If there is more than one header row, only the last one has the bottom border
   &:last-of-type > th {
@@ -71,7 +70,7 @@
   }
 }
 
-// TODO: remove with next major release
+// @deprecated
 @mixin table-header-cell {
   font-size: var(--sbb-table-header-cell-font-size);
   letter-spacing: var(--sbb-typo-letter-spacing-text);
@@ -83,7 +82,7 @@
   padding-inline: var(--sbb-table-header-padding-inline);
 }
 
-// TODO: remove with next major release
+// @deprecated
 @mixin table-data-cell {
   font-size: var(--sbb-table-data-cell-font-size);
   letter-spacing: var(--sbb-typo-letter-spacing-text);
@@ -94,7 +93,7 @@
   padding-inline: var(--sbb-table-cell-padding-inline);
 }
 
-// TODO: remove with next major release
+// @deprecated
 @mixin table-caption {
   // Workaround for storybook. It crashes if 'light-dark' is used as a 'var' fallback
   --sbb-table-caption-color-fallback: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
@@ -108,31 +107,31 @@
   text-align: left;
 }
 
-// TODO: remove and inline with next major release
+// @deprecated
 @mixin table-filter {
   padding-block-start: 0 !important;
 }
 
-// TODO: remove with next major release
+// @deprecated
 @mixin table--striped {
   tbody tr:nth-child(odd) :is(th, td) {
     @include table-row--striped;
   }
 }
 
-// TODO: remove with next major release
+// @deprecated
 @mixin table--unstriped {
   tbody tr:nth-child(odd) :is(th, td) {
     background-color: var(--sbb-table-background-color);
   }
 }
 
-// TODO: remove with next major release
+// @deprecated
 @mixin table-row--striped {
   background-color: var(--sbb-table-row-striped-color);
 }
 
-// TODO: remove with next major release
+// @deprecated
 @mixin table--negative {
   --sbb-table-border-color: var(--sbb-color-anthracite);
   --sbb-table-background-color: var(--sbb-background-color-1-negative);
@@ -141,7 +140,7 @@
   --sbb-table-caption-color: var(--sbb-color-cement);
 }
 
-// TODO: remove with next major release
+// @deprecated
 @mixin table--m {
   --sbb-table-header-cell-font-size: var(--sbb-text-font-size-xs);
   --sbb-table-data-cell-font-size: var(--sbb-text-font-size-s);
@@ -151,7 +150,7 @@
   --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-4x);
 }
 
-// TODO: remove with next major release
+// @deprecated
 @mixin table--s {
   --sbb-table-header-cell-font-size: var(--sbb-text-font-size-xs);
   --sbb-table-data-cell-font-size: var(--sbb-text-font-size-xs);
@@ -161,7 +160,7 @@
   --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-2x);
 }
 
-// TODO: remove with next major release
+// @deprecated
 @mixin table--xs {
   --sbb-table-header-cell-font-size: var(--sbb-text-font-size-xs);
   --sbb-table-data-cell-font-size: var(--sbb-text-font-size-xs);
@@ -171,7 +170,7 @@
   --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-1x);
 }
 
-// TODO: remove with next major release
+// @deprecated
 @mixin table--theme-iron {
   --sbb-table-cell-color: var(--sbb-color-4);
 
@@ -180,7 +179,7 @@
   }
 }
 
-// TODO: remove with next major release
+// @deprecated
 @mixin table--theme-iron-negative {
   --sbb-table-cell-color: var(--sbb-color-cloud);
 }

package/core/styles/theme.scss

@@ -14,5 +14,7 @@ $theme: 'standard' !default;
 @use './layout';
 @use './lists';
 @use './scrollbar';
-@use './table';
+@use '../../table/table.global' with (
+  $theme: $theme
+);
 @use './timetable-form';

package/off-brand-theme.css

@@ -3312,10 +3312,17 @@ sup {
   --sbb-scrollbar-track-color: var(--sbb-background-color-4-negative);
 }
 
-.sbb-table,
-.sbb-table-m,
-.sbb-table-s,
-.sbb-table-xs {
+:root {
+  --sbb-table-border-color: var(--sbb-color-cloud);
+  --sbb-table-border-color: light-dark(var(--sbb-color-cloud), var(--sbb-color-anthracite));
+  --sbb-table-background-color: var(--sbb-background-color-1);
+  --sbb-table-row-striped-color: var(--sbb-background-color-3);
+  --sbb-table-color: var(--sbb-color-1);
+  --sbb-table-caption-color: var(--sbb-color-granite);
+  --sbb-table-caption-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
+  --sbb-table-caption-margin-block-start: var(--sbb-spacing-fixed-4x);
+  --sbb-table-sticky-shadow-width: 3rem;
+  --sbb-table-sticky-shadow-transition-easing: var(--sbb-animation-easing);
   --sbb-table-header-cell-font-size: var(--sbb-text-font-size-xs);
   --sbb-table-data-cell-font-size: var(--sbb-text-font-size-s);
   --sbb-table-header-padding-block: var(--sbb-spacing-fixed-3x);
@@ -3323,28 +3330,16 @@ sup {
   --sbb-table-cell-padding-block: var(--sbb-spacing-responsive-xxxs);
   --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-4x);
 }
-.sbb-table tbody tr:nth-child(odd) :is(th, td),
-.sbb-table-m tbody tr:nth-child(odd) :is(th, td),
-.sbb-table-s tbody tr:nth-child(odd) :is(th, td),
-.sbb-table-xs tbody tr:nth-child(odd) :is(th, td) {
-  background-color: var(--sbb-table-row-striped-color);
-}
+
 .sbb-table,
 .sbb-table-m,
 .sbb-table-s,
 .sbb-table-xs {
   --sbb-table-border: var(--sbb-border-width-1x) solid var(--sbb-table-border-color);
-  --sbb-table-border-color: var(--sbb-color-cloud);
-  --sbb-table-border-color: light-dark(var(--sbb-color-cloud), var(--sbb-color-anthracite));
-  --sbb-table-background-color: var(--sbb-background-color-1);
-  --sbb-table-row-striped-color: var(--sbb-background-color-3);
-  --sbb-table-color: var(--sbb-color-1);
-  --sbb-table-caption-color: var(--sbb-color-granite);
-  --sbb-table-caption-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
-  --sbb-table-caption-margin-block-start: var(--sbb-spacing-fixed-4x);
-  --sbb-table-sticky-shadow-width: 3rem;
-  --sbb-table-sticky-shadow-transition-easing: var(--sbb-animation-easing);
-  --sbb-table-sticky-shadow-transition-duration: var(--sbb-animation-duration-6x);
+  --sbb-table-sticky-shadow-transition-duration: var(
+    --sbb-disable-animation-duration,
+    var(--sbb-animation-duration-6x)
+  );
   border-spacing: 0;
   caption-side: bottom;
   color: var(--sbb-table-color);
@@ -3388,6 +3383,12 @@ sup {
 .sbb-table-xs :is(th, td):first-child {
   border-inline-start: var(--sbb-table-border);
 }
+.sbb-table tbody tr:nth-child(odd) :is(th, td),
+.sbb-table-m tbody tr:nth-child(odd) :is(th, td),
+.sbb-table-s tbody tr:nth-child(odd) :is(th, td),
+.sbb-table-xs tbody tr:nth-child(odd) :is(th, td) {
+  background-color: var(--sbb-table-row-striped-color);
+}
 .sbb-table:has(thead tr) thead tr:first-of-type > :is(th, td), .sbb-table:not(:has(thead tr)) tbody tr:first-of-type > :is(th, td),
 .sbb-table-m:has(thead tr) thead tr:first-of-type > :is(th, td),
 .sbb-table-m:not(:has(thead tr)) tbody tr:first-of-type > :is(th, td),
@@ -3408,7 +3409,10 @@ sup {
 .sbb-table-s caption,
 .sbb-table-xs caption {
   --sbb-table-caption-color-fallback: var(--sbb-color-granite);
-  --sbb-table-caption-color-fallback: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
+  --sbb-table-caption-color-fallback: light-dark(
+    var(--sbb-color-granite),
+    var(--sbb-color-cement)
+  );
   font-size: var(--sbb-text-font-size-xs);
   letter-spacing: var(--sbb-typo-letter-spacing-text);
   color: var(--sbb-table-caption-color, var(--sbb-table-caption-color-fallback));
@@ -3463,11 +3467,15 @@ sbb-table-wrapper[negative] .sbb-table,
 .sbb-table--theme-iron {
   --sbb-table-cell-color: var(--sbb-color-4);
 }
+sbb-table-wrapper[negative] .sbb-table--theme-iron, .sbb-table--theme-iron.sbb-table--negative {
+  --sbb-table-cell-color: var(--sbb-color-cloud);
+}
 .sbb-table--theme-iron tbody > tr > td {
   color: var(--sbb-table-cell-color);
 }
-.sbb-table--theme-iron.sbb-table--negative {
-  --sbb-table-cell-color: var(--sbb-color-cloud);
+
+.sbb-table-header-subtitle {
+  font-weight: normal;
 }
 
 .sbb-table-header-row:last-of-type > th {
@@ -3551,15 +3559,6 @@ sbb-table-wrapper[negative] .sbb-table,
   inset-inline-end: unset;
 }
 
-html.sbb-lean .sbb-table:not(.sbb-table-xs, .sbb-table-m) {
-  --sbb-table-header-cell-font-size: var(--sbb-text-font-size-xs);
-  --sbb-table-data-cell-font-size: var(--sbb-text-font-size-xs);
-  --sbb-table-header-padding-block: var(--sbb-spacing-fixed-1x);
-  --sbb-table-header-padding-inline: var(--sbb-spacing-fixed-2x);
-  --sbb-table-cell-padding-block: var(--sbb-spacing-fixed-1x);
-  --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-2x);
-}
-
 .sbb-table-align-start {
   text-align: start;
 }
@@ -3584,10 +3583,6 @@ html.sbb-lean .sbb-table:not(.sbb-table-xs, .sbb-table-m) {
   text-align: right;
 }
 
-.sbb-table-header-subtitle {
-  font-weight: normal;
-}
-
 .sbb-timetable-form {
   --sbb-timetable-form-content-max-width: 46.25rem;
   position: relative;

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@sbb-esta/lyne-elements-dev",
-  "version": "4.0.0-dev.1776067066",
+  "version": "4.0.0-dev.1776085156",
   "description": "Lyne Design System",
   "keywords": [
     "design system",
     "web components",
     "lit",
-    "https://github.com/sbb-design-systems/lyne-components/commit/2c9434d79ee1e36a184d6c5fda20f2faadea0fa4"
+    "https://github.com/sbb-design-systems/lyne-components/commit/31ded68565a40fcebdd0234b8bddfd6cfcac1857"
   ],
   "type": "module",
   "exports": {

package/safety-theme.css

@@ -3312,10 +3312,17 @@ sup {
   --sbb-scrollbar-track-color: var(--sbb-background-color-4-negative);
 }
 
-.sbb-table,
-.sbb-table-m,
-.sbb-table-s,
-.sbb-table-xs {
+:root {
+  --sbb-table-border-color: var(--sbb-color-cloud);
+  --sbb-table-border-color: light-dark(var(--sbb-color-cloud), var(--sbb-color-anthracite));
+  --sbb-table-background-color: var(--sbb-background-color-1);
+  --sbb-table-row-striped-color: var(--sbb-background-color-3);
+  --sbb-table-color: var(--sbb-color-1);
+  --sbb-table-caption-color: var(--sbb-color-granite);
+  --sbb-table-caption-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
+  --sbb-table-caption-margin-block-start: var(--sbb-spacing-fixed-4x);
+  --sbb-table-sticky-shadow-width: 3rem;
+  --sbb-table-sticky-shadow-transition-easing: var(--sbb-animation-easing);
   --sbb-table-header-cell-font-size: var(--sbb-text-font-size-xs);
   --sbb-table-data-cell-font-size: var(--sbb-text-font-size-s);
   --sbb-table-header-padding-block: var(--sbb-spacing-fixed-3x);
@@ -3323,28 +3330,16 @@ sup {
   --sbb-table-cell-padding-block: var(--sbb-spacing-responsive-xxxs);
   --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-4x);
 }
-.sbb-table tbody tr:nth-child(odd) :is(th, td),
-.sbb-table-m tbody tr:nth-child(odd) :is(th, td),
-.sbb-table-s tbody tr:nth-child(odd) :is(th, td),
-.sbb-table-xs tbody tr:nth-child(odd) :is(th, td) {
-  background-color: var(--sbb-table-row-striped-color);
-}
+
 .sbb-table,
 .sbb-table-m,
 .sbb-table-s,
 .sbb-table-xs {
   --sbb-table-border: var(--sbb-border-width-1x) solid var(--sbb-table-border-color);
-  --sbb-table-border-color: var(--sbb-color-cloud);
-  --sbb-table-border-color: light-dark(var(--sbb-color-cloud), var(--sbb-color-anthracite));
-  --sbb-table-background-color: var(--sbb-background-color-1);
-  --sbb-table-row-striped-color: var(--sbb-background-color-3);
-  --sbb-table-color: var(--sbb-color-1);
-  --sbb-table-caption-color: var(--sbb-color-granite);
-  --sbb-table-caption-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
-  --sbb-table-caption-margin-block-start: var(--sbb-spacing-fixed-4x);
-  --sbb-table-sticky-shadow-width: 3rem;
-  --sbb-table-sticky-shadow-transition-easing: var(--sbb-animation-easing);
-  --sbb-table-sticky-shadow-transition-duration: var(--sbb-animation-duration-6x);
+  --sbb-table-sticky-shadow-transition-duration: var(
+    --sbb-disable-animation-duration,
+    var(--sbb-animation-duration-6x)
+  );
   border-spacing: 0;
   caption-side: bottom;
   color: var(--sbb-table-color);
@@ -3388,6 +3383,12 @@ sup {
 .sbb-table-xs :is(th, td):first-child {
   border-inline-start: var(--sbb-table-border);
 }
+.sbb-table tbody tr:nth-child(odd) :is(th, td),
+.sbb-table-m tbody tr:nth-child(odd) :is(th, td),
+.sbb-table-s tbody tr:nth-child(odd) :is(th, td),
+.sbb-table-xs tbody tr:nth-child(odd) :is(th, td) {
+  background-color: var(--sbb-table-row-striped-color);
+}
 .sbb-table:has(thead tr) thead tr:first-of-type > :is(th, td), .sbb-table:not(:has(thead tr)) tbody tr:first-of-type > :is(th, td),
 .sbb-table-m:has(thead tr) thead tr:first-of-type > :is(th, td),
 .sbb-table-m:not(:has(thead tr)) tbody tr:first-of-type > :is(th, td),
@@ -3408,7 +3409,10 @@ sup {
 .sbb-table-s caption,
 .sbb-table-xs caption {
   --sbb-table-caption-color-fallback: var(--sbb-color-granite);
-  --sbb-table-caption-color-fallback: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
+  --sbb-table-caption-color-fallback: light-dark(
+    var(--sbb-color-granite),
+    var(--sbb-color-cement)
+  );
   font-size: var(--sbb-text-font-size-xs);
   letter-spacing: var(--sbb-typo-letter-spacing-text);
   color: var(--sbb-table-caption-color, var(--sbb-table-caption-color-fallback));
@@ -3463,11 +3467,15 @@ sbb-table-wrapper[negative] .sbb-table,
 .sbb-table--theme-iron {
   --sbb-table-cell-color: var(--sbb-color-4);
 }
+sbb-table-wrapper[negative] .sbb-table--theme-iron, .sbb-table--theme-iron.sbb-table--negative {
+  --sbb-table-cell-color: var(--sbb-color-cloud);
+}
 .sbb-table--theme-iron tbody > tr > td {
   color: var(--sbb-table-cell-color);
 }
-.sbb-table--theme-iron.sbb-table--negative {
-  --sbb-table-cell-color: var(--sbb-color-cloud);
+
+.sbb-table-header-subtitle {
+  font-weight: normal;
 }
 
 .sbb-table-header-row:last-of-type > th {
@@ -3551,15 +3559,6 @@ sbb-table-wrapper[negative] .sbb-table,
   inset-inline-end: unset;
 }
 
-html.sbb-lean .sbb-table:not(.sbb-table-xs, .sbb-table-m) {
-  --sbb-table-header-cell-font-size: var(--sbb-text-font-size-xs);
-  --sbb-table-data-cell-font-size: var(--sbb-text-font-size-xs);
-  --sbb-table-header-padding-block: var(--sbb-spacing-fixed-1x);
-  --sbb-table-header-padding-inline: var(--sbb-spacing-fixed-2x);
-  --sbb-table-cell-padding-block: var(--sbb-spacing-fixed-1x);
-  --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-2x);
-}
-
 .sbb-table-align-start {
   text-align: start;
 }
@@ -3584,10 +3583,6 @@ html.sbb-lean .sbb-table:not(.sbb-table-xs, .sbb-table-m) {
   text-align: right;
 }
 
-.sbb-table-header-subtitle {
-  font-weight: normal;
-}
-
 .sbb-timetable-form {
   --sbb-timetable-form-content-max-width: 46.25rem;
   position: relative;

package/standard-theme.css

@@ -3312,10 +3312,17 @@ sup {
   --sbb-scrollbar-track-color: var(--sbb-background-color-4-negative);
 }
 
-.sbb-table,
-.sbb-table-m,
-.sbb-table-s,
-.sbb-table-xs {
+:root {
+  --sbb-table-border-color: var(--sbb-color-cloud);
+  --sbb-table-border-color: light-dark(var(--sbb-color-cloud), var(--sbb-color-anthracite));
+  --sbb-table-background-color: var(--sbb-background-color-1);
+  --sbb-table-row-striped-color: var(--sbb-background-color-3);
+  --sbb-table-color: var(--sbb-color-1);
+  --sbb-table-caption-color: var(--sbb-color-granite);
+  --sbb-table-caption-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
+  --sbb-table-caption-margin-block-start: var(--sbb-spacing-fixed-4x);
+  --sbb-table-sticky-shadow-width: 3rem;
+  --sbb-table-sticky-shadow-transition-easing: var(--sbb-animation-easing);
   --sbb-table-header-cell-font-size: var(--sbb-text-font-size-xs);
   --sbb-table-data-cell-font-size: var(--sbb-text-font-size-s);
   --sbb-table-header-padding-block: var(--sbb-spacing-fixed-3x);
@@ -3323,28 +3330,16 @@ sup {
   --sbb-table-cell-padding-block: var(--sbb-spacing-responsive-xxxs);
   --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-4x);
 }
-.sbb-table tbody tr:nth-child(odd) :is(th, td),
-.sbb-table-m tbody tr:nth-child(odd) :is(th, td),
-.sbb-table-s tbody tr:nth-child(odd) :is(th, td),
-.sbb-table-xs tbody tr:nth-child(odd) :is(th, td) {
-  background-color: var(--sbb-table-row-striped-color);
-}
+
 .sbb-table,
 .sbb-table-m,
 .sbb-table-s,
 .sbb-table-xs {
   --sbb-table-border: var(--sbb-border-width-1x) solid var(--sbb-table-border-color);
-  --sbb-table-border-color: var(--sbb-color-cloud);
-  --sbb-table-border-color: light-dark(var(--sbb-color-cloud), var(--sbb-color-anthracite));
-  --sbb-table-background-color: var(--sbb-background-color-1);
-  --sbb-table-row-striped-color: var(--sbb-background-color-3);
-  --sbb-table-color: var(--sbb-color-1);
-  --sbb-table-caption-color: var(--sbb-color-granite);
-  --sbb-table-caption-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
-  --sbb-table-caption-margin-block-start: var(--sbb-spacing-fixed-4x);
-  --sbb-table-sticky-shadow-width: 3rem;
-  --sbb-table-sticky-shadow-transition-easing: var(--sbb-animation-easing);
-  --sbb-table-sticky-shadow-transition-duration: var(--sbb-animation-duration-6x);
+  --sbb-table-sticky-shadow-transition-duration: var(
+    --sbb-disable-animation-duration,
+    var(--sbb-animation-duration-6x)
+  );
   border-spacing: 0;
   caption-side: bottom;
   color: var(--sbb-table-color);
@@ -3388,6 +3383,12 @@ sup {
 .sbb-table-xs :is(th, td):first-child {
   border-inline-start: var(--sbb-table-border);
 }
+.sbb-table tbody tr:nth-child(odd) :is(th, td),
+.sbb-table-m tbody tr:nth-child(odd) :is(th, td),
+.sbb-table-s tbody tr:nth-child(odd) :is(th, td),
+.sbb-table-xs tbody tr:nth-child(odd) :is(th, td) {
+  background-color: var(--sbb-table-row-striped-color);
+}
 .sbb-table:has(thead tr) thead tr:first-of-type > :is(th, td), .sbb-table:not(:has(thead tr)) tbody tr:first-of-type > :is(th, td),
 .sbb-table-m:has(thead tr) thead tr:first-of-type > :is(th, td),
 .sbb-table-m:not(:has(thead tr)) tbody tr:first-of-type > :is(th, td),
@@ -3408,7 +3409,10 @@ sup {
 .sbb-table-s caption,
 .sbb-table-xs caption {
   --sbb-table-caption-color-fallback: var(--sbb-color-granite);
-  --sbb-table-caption-color-fallback: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
+  --sbb-table-caption-color-fallback: light-dark(
+    var(--sbb-color-granite),
+    var(--sbb-color-cement)
+  );
   font-size: var(--sbb-text-font-size-xs);
   letter-spacing: var(--sbb-typo-letter-spacing-text);
   color: var(--sbb-table-caption-color, var(--sbb-table-caption-color-fallback));
@@ -3463,11 +3467,15 @@ sbb-table-wrapper[negative] .sbb-table,
 .sbb-table--theme-iron {
   --sbb-table-cell-color: var(--sbb-color-4);
 }
+sbb-table-wrapper[negative] .sbb-table--theme-iron, .sbb-table--theme-iron.sbb-table--negative {
+  --sbb-table-cell-color: var(--sbb-color-cloud);
+}
 .sbb-table--theme-iron tbody > tr > td {
   color: var(--sbb-table-cell-color);
 }
-.sbb-table--theme-iron.sbb-table--negative {
-  --sbb-table-cell-color: var(--sbb-color-cloud);
+
+.sbb-table-header-subtitle {
+  font-weight: normal;
 }
 
 .sbb-table-header-row:last-of-type > th {
@@ -3551,15 +3559,6 @@ sbb-table-wrapper[negative] .sbb-table,
   inset-inline-end: unset;
 }
 
-html.sbb-lean .sbb-table:not(.sbb-table-xs, .sbb-table-m) {
-  --sbb-table-header-cell-font-size: var(--sbb-text-font-size-xs);
-  --sbb-table-data-cell-font-size: var(--sbb-text-font-size-xs);
-  --sbb-table-header-padding-block: var(--sbb-spacing-fixed-1x);
-  --sbb-table-header-padding-inline: var(--sbb-spacing-fixed-2x);
-  --sbb-table-cell-padding-block: var(--sbb-spacing-fixed-1x);
-  --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-2x);
-}
-
 .sbb-table-align-start {
   text-align: start;
 }
@@ -3584,10 +3583,6 @@ html.sbb-lean .sbb-table:not(.sbb-table-xs, .sbb-table-m) {
   text-align: right;
 }
 
-.sbb-table-header-subtitle {
-  font-weight: normal;
-}
-
 .sbb-timetable-form {
   --sbb-timetable-form-content-max-width: 46.25rem;
   position: relative;

package/table.css

@@ -1,7 +1,14 @@
-.sbb-table,
-.sbb-table-m,
-.sbb-table-s,
-.sbb-table-xs {
+:root {
+  --sbb-table-border-color: var(--sbb-color-cloud);
+  --sbb-table-border-color: light-dark(var(--sbb-color-cloud), var(--sbb-color-anthracite));
+  --sbb-table-background-color: var(--sbb-background-color-1);
+  --sbb-table-row-striped-color: var(--sbb-background-color-3);
+  --sbb-table-color: var(--sbb-color-1);
+  --sbb-table-caption-color: var(--sbb-color-granite);
+  --sbb-table-caption-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
+  --sbb-table-caption-margin-block-start: var(--sbb-spacing-fixed-4x);
+  --sbb-table-sticky-shadow-width: 3rem;
+  --sbb-table-sticky-shadow-transition-easing: var(--sbb-animation-easing);
   --sbb-table-header-cell-font-size: var(--sbb-text-font-size-xs);
   --sbb-table-data-cell-font-size: var(--sbb-text-font-size-s);
   --sbb-table-header-padding-block: var(--sbb-spacing-fixed-3x);
@@ -9,28 +16,16 @@
   --sbb-table-cell-padding-block: var(--sbb-spacing-responsive-xxxs);
   --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-4x);
 }
-.sbb-table tbody tr:nth-child(odd) :is(th, td),
-.sbb-table-m tbody tr:nth-child(odd) :is(th, td),
-.sbb-table-s tbody tr:nth-child(odd) :is(th, td),
-.sbb-table-xs tbody tr:nth-child(odd) :is(th, td) {
-  background-color: var(--sbb-table-row-striped-color);
-}
+
 .sbb-table,
 .sbb-table-m,
 .sbb-table-s,
 .sbb-table-xs {
   --sbb-table-border: var(--sbb-border-width-1x) solid var(--sbb-table-border-color);
-  --sbb-table-border-color: var(--sbb-color-cloud);
-  --sbb-table-border-color: light-dark(var(--sbb-color-cloud), var(--sbb-color-anthracite));
-  --sbb-table-background-color: var(--sbb-background-color-1);
-  --sbb-table-row-striped-color: var(--sbb-background-color-3);
-  --sbb-table-color: var(--sbb-color-1);
-  --sbb-table-caption-color: var(--sbb-color-granite);
-  --sbb-table-caption-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
-  --sbb-table-caption-margin-block-start: var(--sbb-spacing-fixed-4x);
-  --sbb-table-sticky-shadow-width: 3rem;
-  --sbb-table-sticky-shadow-transition-easing: var(--sbb-animation-easing);
-  --sbb-table-sticky-shadow-transition-duration: var(--sbb-animation-duration-6x);
+  --sbb-table-sticky-shadow-transition-duration: var(
+    --sbb-disable-animation-duration,
+    var(--sbb-animation-duration-6x)
+  );
   border-spacing: 0;
   caption-side: bottom;
   color: var(--sbb-table-color);
@@ -74,6 +69,12 @@
 .sbb-table-xs :is(th, td):first-child {
   border-inline-start: var(--sbb-table-border);
 }
+.sbb-table tbody tr:nth-child(odd) :is(th, td),
+.sbb-table-m tbody tr:nth-child(odd) :is(th, td),
+.sbb-table-s tbody tr:nth-child(odd) :is(th, td),
+.sbb-table-xs tbody tr:nth-child(odd) :is(th, td) {
+  background-color: var(--sbb-table-row-striped-color);
+}
 .sbb-table:has(thead tr) thead tr:first-of-type > :is(th, td), .sbb-table:not(:has(thead tr)) tbody tr:first-of-type > :is(th, td),
 .sbb-table-m:has(thead tr) thead tr:first-of-type > :is(th, td),
 .sbb-table-m:not(:has(thead tr)) tbody tr:first-of-type > :is(th, td),
@@ -94,7 +95,10 @@
 .sbb-table-s caption,
 .sbb-table-xs caption {
   --sbb-table-caption-color-fallback: var(--sbb-color-granite);
-  --sbb-table-caption-color-fallback: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
+  --sbb-table-caption-color-fallback: light-dark(
+    var(--sbb-color-granite),
+    var(--sbb-color-cement)
+  );
   font-size: var(--sbb-text-font-size-xs);
   letter-spacing: var(--sbb-typo-letter-spacing-text);
   color: var(--sbb-table-caption-color, var(--sbb-table-caption-color-fallback));
@@ -149,11 +153,15 @@ sbb-table-wrapper[negative] .sbb-table,
 .sbb-table--theme-iron {
   --sbb-table-cell-color: var(--sbb-color-4);
 }
+sbb-table-wrapper[negative] .sbb-table--theme-iron, .sbb-table--theme-iron.sbb-table--negative {
+  --sbb-table-cell-color: var(--sbb-color-cloud);
+}
 .sbb-table--theme-iron tbody > tr > td {
   color: var(--sbb-table-cell-color);
 }
-.sbb-table--theme-iron.sbb-table--negative {
-  --sbb-table-cell-color: var(--sbb-color-cloud);
+
+.sbb-table-header-subtitle {
+  font-weight: normal;
 }
 
 .sbb-table-header-row:last-of-type > th {
@@ -237,15 +245,6 @@ sbb-table-wrapper[negative] .sbb-table,
   inset-inline-end: unset;
 }
 
-html.sbb-lean .sbb-table:not(.sbb-table-xs, .sbb-table-m) {
-  --sbb-table-header-cell-font-size: var(--sbb-text-font-size-xs);
-  --sbb-table-data-cell-font-size: var(--sbb-text-font-size-xs);
-  --sbb-table-header-padding-block: var(--sbb-spacing-fixed-1x);
-  --sbb-table-header-padding-inline: var(--sbb-spacing-fixed-2x);
-  --sbb-table-cell-padding-block: var(--sbb-spacing-fixed-1x);
-  --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-2x);
-}
-
 .sbb-table-align-start {
   text-align: start;
 }
@@ -268,8 +267,4 @@ html.sbb-lean .sbb-table:not(.sbb-table-xs, .sbb-table-m) {
 
 .sbb-table-align-right {
   text-align: right;
-}
-
-.sbb-table-header-subtitle {
-  font-weight: normal;
 }

package/core/styles/table.scss

@@ -1,156 +0,0 @@
-@use './mixins/table';
-
-.sbb-table,
-.sbb-table-m,
-.sbb-table-s,
-.sbb-table-xs {
-  @include table.table;
-}
-
-.sbb-table-m {
-  @include table.table--m;
-}
-
-.sbb-table-s {
-  @include table.table--s;
-}
-
-.sbb-table-xs {
-  @include table.table--xs;
-}
-
-sbb-table-wrapper[negative] .sbb-table,
-.sbb-table--negative {
-  @include table.table--negative;
-}
-
-.sbb-table--striped {
-  @include table.table--striped;
-}
-
-.sbb-table--unstriped {
-  @include table.table--unstriped;
-}
-
-.sbb-table--theme-iron {
-  @include table.table--theme-iron;
-
-  &.sbb-table--negative {
-    @include table.table--theme-iron-negative;
-  }
-}
-
-// @deprecated
-.sbb-table-header-row {
-  @include table.table-header-row;
-}
-
-// @deprecated
-.sbb-table-header-cell {
-  @include table.table-header-cell;
-}
-
-.sbb-table-row--striped {
-  @include table.table-row--striped;
-}
-
-// @deprecated
-.sbb-table-data-cell {
-  @include table.table-data-cell;
-}
-
-// @deprecated
-.sbb-table-caption {
-  @include table.table-caption;
-}
-
-.sbb-table-filter {
-  @include table.table-filter;
-}
-
-.sbb-table-sticky {
-  // Note that the table can either set this class or an inline style to make something sticky.
-  // We set the style as `!important` so that we get an identical specificity in both cases
-  // and to avoid cases where user styles have a higher specificity.
-  position: sticky !important;
-}
-
-// The `sbb-table-sticky-*` css classes are used by the Angular wrapper and CDK.
-// Do not rename them, pls.
-:is(.sbb-table-sticky-border-elem-left, .sbb-table-sticky-border-elem-right)::after {
-  content: '';
-  transition: {
-    timing-function: var(--sbb-table-sticky-shadow-transition-easing);
-    duration: var(--sbb-table-sticky-shadow-transition-duration);
-    property: visibility, opacity;
-  }
-
-  visibility: hidden;
-  opacity: 0;
-  position: absolute;
-  width: var(--sbb-table-sticky-shadow-width);
-  inset: 0;
-}
-
-.sbb-table-sticky-border-elem-left {
-  :is(.sbb-table-wrapper-offset-left, .sbb-table-wrapper-offset-both) & {
-    border-inline-end: var(--sbb-table-border);
-
-    &::after {
-      visibility: visible;
-      opacity: 1;
-      background-image: linear-gradient(-270deg, rgb(0 0 0 / 10%) 0%, transparent 100%);
-      inset-inline-start: unset;
-      inset-inline-end: calc(var(--sbb-table-sticky-shadow-width) * -1 - 1px);
-    }
-  }
-}
-
-.sbb-table-sticky-border-elem-right {
-  :is(.sbb-table-wrapper-offset-right, .sbb-table-wrapper-offset-both) & {
-    border-inline-start: var(--sbb-table-border);
-
-    &::after {
-      visibility: visible;
-      opacity: 1;
-      background-image: linear-gradient(270deg, rgb(0 0 0 / 10%) 0%, transparent 100%);
-      inset-inline-start: calc(var(--sbb-table-sticky-shadow-width) * -1 - 1px);
-      inset-inline-end: unset;
-    }
-  }
-}
-
-// TODO: In future, move to the 'sbb-lean' theme
-html.sbb-lean .sbb-table:not(.sbb-table-xs, .sbb-table-m) {
-  @include table.table--s;
-}
-
-.sbb-table-align-start {
-  text-align: start;
-}
-
-.sbb-table-align-center {
-  text-align: center;
-}
-
-.sbb-table-align-end {
-  text-align: end;
-}
-
-.sbb-table-align-justify {
-  text-align: justify;
-}
-
-// Backwards compatibility for sbb-angular
-.sbb-table-align-left {
-  text-align: left;
-}
-
-// Backwards compatibility for sbb-angular
-.sbb-table-align-right {
-  text-align: right;
-}
-
-.sbb-table-header-subtitle {
-  font-weight: normal;
-}