@sbb-esta/lyne-elements-dev 5.0.0-next.3-dev.1779280803 → 5.0.0-next.3-dev.1779281392

package/table/table.global.scss

@@ -0,0 +1,295 @@
+@use '../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --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: 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: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-text-font-size-s),
+        'lean': var(--sbb-text-font-size-xs),
+      ),
+      $theme
+    )};
+  --sbb-table-header-padding-block: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-spacing-fixed-3x),
+        'lean': var(--sbb-spacing-fixed-1x),
+      ),
+      $theme
+    )};
+  --sbb-table-header-padding-inline: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-spacing-fixed-4x),
+        'lean': var(--sbb-spacing-fixed-2x),
+      ),
+      $theme
+    )};
+  --sbb-table-cell-padding-block: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-spacing-responsive-xxxs),
+        'lean': var(--sbb-spacing-fixed-1x),
+      ),
+      $theme
+    )};
+  --sbb-table-cell-padding-inline: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-spacing-fixed-4x),
+        'lean': var(--sbb-spacing-fixed-2x),
+      ),
+      $theme
+    )};
+}
+
+@mixin rules {
+  // Notes:
+  // We cannot use `border-collapse` because in sticky variants it gets visually broken.
+  // Therefore, we have to build the grid avoiding double borders.
+  :is(.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-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);
+    table-layout: auto;
+    text-align: left;
+
+    th {
+      font-size: var(--sbb-table-header-cell-font-size);
+      letter-spacing: var(--sbb-typo-letter-spacing-text);
+      font-weight: bold;
+      background-color: var(--sbb-table-background-color);
+      border-block-end: var(--sbb-table-border);
+      border-inline-end: var(--sbb-table-border);
+      padding-block: var(--sbb-table-header-padding-block);
+      padding-inline: var(--sbb-table-header-padding-inline);
+    }
+
+    td {
+      font-size: var(--sbb-table-data-cell-font-size);
+      letter-spacing: var(--sbb-typo-letter-spacing-text);
+      background-color: var(--sbb-table-background-color);
+      border-block-end: var(--sbb-table-border);
+      border-inline-end: var(--sbb-table-border);
+      padding-block: var(--sbb-table-cell-padding-block);
+      padding-inline: var(--sbb-table-cell-padding-inline);
+    }
+
+    :is(th, td) {
+      &.sbb-table-group-with-next {
+        border-inline-end: none;
+      }
+
+      &:first-child {
+        border-inline-start: var(--sbb-table-border);
+      }
+    }
+
+    // In Angular the CDK table always adds a thead even if there are no headers.
+    // Due to this fact we have to also insert `tr` in the `:has()` selector.
+    &:has(thead tr) thead,
+    &:not(:has(thead tr)) tbody {
+      tr:first-of-type > :is(th, td) {
+        border-block-start: var(--sbb-table-border);
+      }
+    }
+
+    // Avoid borders between header rows (design specification).
+    thead > tr:has(+ tr) > :is(th, td) {
+      border-block-end: none;
+    }
+  }
+
+  :is(.sbb-table, .sbb-table-m, .sbb-table-s, .sbb-table-xs) caption,
+  .sbb-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)
+    );
+
+    font-size: var(--sbb-text-font-size-xs);
+    letter-spacing: var(--sbb-typo-letter-spacing-text);
+
+    // Defaults are needed for cases where the caption is used outside a table
+    color: var(--sbb-table-caption-color, var(--sbb-table-caption-color-fallback));
+    margin-block-start: var(--sbb-table-caption-margin-block-start, var(--sbb-spacing-fixed-4x));
+    text-align: left;
+  }
+
+  .sbb-table-xs {
+    --sbb-table-data-cell-font-size: var(--sbb-text-font-size-xs);
+    --sbb-table-header-padding-block: 0;
+    --sbb-table-header-padding-inline: var(--sbb-spacing-fixed-1x);
+    --sbb-table-cell-padding-block: 0;
+    --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-1x);
+  }
+
+  .sbb-table-s {
+    --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-m {
+    --sbb-table-data-cell-font-size: var(--sbb-text-font-size-s);
+    --sbb-table-header-padding-block: var(--sbb-spacing-fixed-3x);
+    --sbb-table-header-padding-inline: var(--sbb-spacing-fixed-4x);
+    --sbb-table-cell-padding-block: var(--sbb-spacing-responsive-xxxs);
+    --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-4x);
+  }
+
+  sbb-table-wrapper[negative] .sbb-table,
+  .sbb-table--negative {
+    --sbb-table-border-color: var(--sbb-color-anthracite);
+    --sbb-table-background-color: var(--sbb-background-color-1-negative);
+    --sbb-table-color: var(--sbb-color-1-negative);
+    --sbb-table-row-striped-color: var(--sbb-background-color-3-negative);
+    --sbb-table-caption-color: var(--sbb-color-cement);
+  }
+
+  .sbb-table--striped {
+    tbody tr:nth-child(odd) :is(th, td) {
+      background-color: var(--sbb-table-row-striped-color);
+    }
+  }
+
+  .sbb-table--unstriped {
+    tbody tr:nth-child(odd) :is(th, td) {
+      background-color: var(--sbb-table-background-color);
+    }
+  }
+
+  .sbb-table--theme-iron {
+    --sbb-table-cell-color: var(--sbb-color-4);
+
+    sbb-table-wrapper[negative] &,
+    &.sbb-table--negative {
+      --sbb-table-cell-color: var(--sbb-color-cloud);
+    }
+
+    tbody > tr > td {
+      color: var(--sbb-table-cell-color);
+    }
+  }
+
+  .sbb-table-header-subtitle {
+    font-weight: normal;
+  }
+
+  .sbb-table-row--striped {
+    background-color: var(--sbb-table-row-striped-color);
+  }
+
+  .sbb-table-filter {
+    padding-block-start: 0 !important;
+  }
+
+  .sbb-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)
+    );
+
+    font-size: var(--sbb-text-font-size-xs);
+    letter-spacing: var(--sbb-typo-letter-spacing-text);
+
+    // Defaults are needed for cases where the caption is used outside a table
+    color: var(--sbb-table-caption-color, var(--sbb-table-caption-color-fallback));
+    margin-block-start: var(--sbb-table-caption-margin-block-start, var(--sbb-spacing-fixed-4x));
+    text-align: left;
+  }
+
+  .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, please.
+  :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;
+      }
+    }
+  }
+
+  .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;
+  }
+}

package/tabs/common/tab-group-common.global.scss

@@ -0,0 +1,17 @@
+@use '../../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+// These variables are shared within the `sbb-tab-label` and the `sbb-tab-nav-bar`.
+@mixin base {
+  --sbb-tab-group-content-gap-size-s: var(--sbb-spacing-responsive-xs);
+  --sbb-tab-group-content-gap-size-l: var(--sbb-spacing-responsive-s);
+  --sbb-tab-group-content-gap-size-xl: var(--sbb-spacing-responsive-m);
+  --sbb-tab-group-content-gap-default: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-tab-group-content-gap-size-l),
+        'lean': var(--sbb-tab-group-content-gap-size-s),
+      ),
+      $theme
+    )};
+}

package/tabs/common/tab-label-common.global.scss

@@ -0,0 +1,38 @@
+@use '../../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+// These variables are shared within the `sbb-tab-label` and the `sbb-tab-nav-bar`.
+@mixin base {
+  --sbb-tab-label-height: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-size-element-m),
+        'lean': var(--sbb-size-element-xs),
+      ),
+      $theme
+    )};
+  --sbb-tab-label-inline-padding: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-spacing-responsive-xs),
+        'lean': var(--sbb-spacing-responsive-xxxs),
+      ),
+      $theme
+    )};
+  --sbb-tab-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-graphite));
+  --sbb-tab-label-marker-thickness: var(--sbb-border-width-3x);
+  --sbb-tab-label-text-decoration: none;
+  --sbb-tab-label-animation-easing: var(--sbb-animation-easing);
+  --sbb-tab-label-font-size: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-text-font-size-m),
+        'lean': var(--sbb-text-font-size-s),
+      ),
+      $theme
+    )};
+  --sbb-tab-label-font-weight: bold;
+  --sbb-tab-label-gap: var(--sbb-spacing-fixed-2x);
+  --sbb-tab-label-outline-border-radius: var(--sbb-border-radius-2x);
+  --sbb-tab-label-amount-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
+  --sbb-tab-label-line-color: var(--sbb-border-color-4-inverted);
+  --sbb-tab-label-cursor: var(--sbb-cursor-pointer);
+}

package/tabs/tab-nav-bar/tab-nav-bar.global.scss

@@ -0,0 +1,10 @@
+@use '../../core/styles' as sbb;
+@use '../common/tab-label-common' as tab-label-common;
+
+$theme: 'standard' !default;
+
+@mixin rules {
+  sbb-tab-nav-bar .sbb-tab-amount {
+    @include tab-label-common.tab-label-amount;
+  }
+}

package/tag/tag/tag.global.scss

@@ -0,0 +1,41 @@
+@use '../../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-tag-animation-easing: var(--sbb-animation-easing);
+  --sbb-tag-background-color: var(--sbb-background-color-1);
+  --sbb-tag-border-color: var(--sbb-border-color-4-inverted);
+  --sbb-tag-border-style: solid;
+  --sbb-tag-border-width: var(--sbb-border-width-1x);
+  --sbb-tag-border-radius: var(--sbb-border-radius-infinity);
+  --sbb-tag-gap: var(--sbb-spacing-fixed-2x);
+  --sbb-tag-text-color: var(--sbb-color-2);
+  --sbb-tag-amount-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
+  --sbb-tag-height-s: var(--sbb-size-element-xxxs);
+  --sbb-tag-height-m: var(--sbb-size-element-xs);
+  --sbb-tag-height: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-tag-height-m),
+        'lean': var(--sbb-tag-height-s),
+      ),
+      $theme
+    )};
+  --sbb-tag-padding-inline-s: var(--sbb-spacing-fixed-3x);
+  --sbb-tag-padding-inline-m: var(--sbb-spacing-fixed-5x);
+  --sbb-tag-padding-inline: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-tag-padding-inline-m),
+        'lean': var(--sbb-tag-padding-inline-s),
+      ),
+      $theme
+    )};
+}
+
+@mixin base-forced-colors {
+  --sbb-tag-amount-color: ButtonText;
+  --sbb-tag-background-color: Canvas !important;
+  --sbb-tag-text-color: ButtonText;
+  --sbb-tag-border-color: CanvasText;
+  --sbb-tag-border-width: var(--sbb-border-width-2x);
+}

package/teaser/teaser.global.scss

@@ -0,0 +1,24 @@
+@use '../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-teaser-scale-hover: 1.02;
+  --sbb-teaser-description-color: light-dark(var(--sbb-color-granite), var(--sbb-color-silver));
+  --sbb-teaser-flex-direction: row;
+  --sbb-teaser-align-items: center;
+  --sbb-teaser-font-size: var(--sbb-text-font-size-s);
+  --sbb-teaser-gap: var(--sbb-spacing-fixed-4x);
+  --sbb-teaser-border-radius: var(--sbb-border-radius-4x);
+  --sbb-teaser-image-width: #{sbb.px-to-rem-build(300)};
+}
+
+@mixin rules {
+  sbb-teaser :is(sbb-image, img):not(.sbb-figure-overlap-image) {
+    --sbb-image-object-fit: cover;
+    --sbb-image-aspect-ratio: 4 / 3;
+
+    // The transition of the scale is done by the global rules in core.scss
+    scale: var(--sbb-teaser-scale, 1);
+  }
+}

package/teaser-hero/teaser-hero.global.scss

@@ -0,0 +1,27 @@
+@use '../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-teaser-hero-link-font-weight: 400;
+}
+
+@mixin rules {
+  sbb-teaser-hero {
+    :is(sbb-image, img):not(.sbb-figure-overlap-image) {
+      --sbb-image-aspect-ratio: 1 / 1;
+
+      border-radius: 0;
+
+      @include sbb.mq($from: small) {
+        --sbb-image-aspect-ratio: 16 / 9;
+      }
+    }
+
+    img:not(.sbb-figure-overlap-image) {
+      display: block;
+      align-self: stretch;
+      width: 100%;
+    }
+  }
+}

package/teaser-panel/teaser-panel.global.scss

@@ -0,0 +1,33 @@
+@use '../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-panel-width: #{sbb.px-to-rem-build(223)};
+  --sbb-panel-inner-height: #{sbb.px-to-rem-build(167)};
+  --sbb-panel-triangle-height: #{sbb.px-to-rem-build(33)};
+  --sbb-panel-line-height: var(--sbb-typo-line-height-heading);
+  --sbb-panel-font-size: var(--sbb-typo-scale-1-5x);
+  --sbb-panel-font-weight: 300;
+  --sbb-panel-color: var(--sbb-color-1-negative);
+  --sbb-panel-background-color: color-mix(in srgb, var(--sbb-color-primary) 90%, transparent);
+  --sbb-panel-background-color-hover: var(--sbb-color-primary);
+  --sbb-panel-padding-inline: var(--sbb-spacing-responsive-m);
+  --sbb-panel-gap: var(--sbb-spacing-responsive-xs);
+  --sbb-panel-animation-easing: var(--sbb-animation-easing);
+}
+
+@mixin base-breakpoint-large {
+  --sbb-panel-width: #{sbb.px-to-rem-build(321)};
+  --sbb-panel-inner-height: #{sbb.px-to-rem-build(240.11)};
+  --sbb-panel-triangle-height: #{sbb.px-to-rem-build(47.45)};
+  --sbb-panel-font-size: var(--sbb-typo-scale-2x);
+}
+
+@mixin base-breakpoint-ultra {
+  --sbb-panel-width: #{sbb.px-to-rem-build(428)};
+  --sbb-panel-inner-height: #{sbb.px-to-rem-build(320.38)};
+  --sbb-panel-triangle-height: #{sbb.px-to-rem-build(63.31)};
+  --sbb-panel-font-size: var(--sbb-typo-scale-2-5x);
+  --sbb-panel-line-height: 1.2;
+}

package/teaser-product/common/teaser-product-common.global.scss

@@ -0,0 +1,50 @@
+@use '../../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-teaser-product-background-color: light-dark(
+    var(--sbb-color-cloud),
+    var(--sbb-color-midnight)
+  );
+  --sbb-teaser-product-background-gradient-direction: to right;
+  --sbb-teaser-product-border-radius: var(--sbb-border-radius-4x);
+  --sbb-teaser-product-min-height: #{sbb.px-to-rem-build(600)};
+  --sbb-teaser-product-background-gradient-start: 25%;
+  --sbb-teaser-product-background-gradient-end: 75%;
+  --sbb-teaser-product-container-padding-block: var(--sbb-spacing-responsive-s);
+  --sbb-teaser-product-container-padding-inline: var(--sbb-spacing-responsive-s);
+  --sbb-teaser-product-container-spacing: var(--sbb-spacing-responsive-l);
+  --sbb-teaser-product-content-color: var(--sbb-color-4);
+  --sbb-teaser-product-footer-color: light-dark(
+    var(--sbb-color-anthracite),
+    var(--sbb-color-cloud)
+  );
+  --sbb-teaser-product-footer-font-size: var(--sbb-text-font-size-xxs);
+  --sbb-teaser-product-footer-padding-block-start: var(--sbb-spacing-responsive-s);
+  --sbb-teaser-product-footer-padding-block-end: 0;
+}
+
+@mixin base-breakpoint-large {
+  --sbb-teaser-product-container-padding-block: var(--sbb-spacing-responsive-l) 0;
+  --sbb-teaser-product-container-padding-inline: var(--sbb-spacing-responsive-xl);
+  --sbb-teaser-product-content-align-content: center;
+  --sbb-teaser-product-footer-padding-block-start: var(--sbb-spacing-responsive-xs);
+  --sbb-teaser-product-footer-padding-block-end: var(--sbb-spacing-responsive-xs);
+  --sbb-teaser-product-footer-min-height: var(--sbb-teaser-product-container-spacing);
+}
+
+@mixin rules {
+  :is(sbb-teaser-product, sbb-teaser-product-static) {
+    :is(sbb-image, img):not(.sbb-figure-overlap-image) {
+      border-radius: 0; // Reset sbb-image border radius in order to control it from teaser product.
+
+      --sbb-image-object-fit: cover;
+      --sbb-image-aspect-ratio: 16 / 9;
+    }
+
+    img:not(.sbb-figure-overlap-image) {
+      place-self: stretch;
+    }
+  }
+}

package/time-input/time-input.global.scss

@@ -0,0 +1,11 @@
+@use '../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-time-input-max-width: #{sbb.px-to-rem-build(58)};
+}
+
+@mixin base-breakpoint-large {
+  --sbb-time-input-max-width: #{sbb.px-to-rem-build(65)};
+}

package/timetable-form/timetable-form/timetable-form.global.scss

@@ -0,0 +1,97 @@
+@use '../../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-timetable-form-background-color: var(--sbb-background-color-1);
+  --sbb-timetable-form-border-radius: var(--sbb-border-radius-4x);
+}
+
+@mixin rules {
+  .sbb-timetable-form {
+    --sbb-timetable-form-content-max-width: #{sbb.px-to-rem-build(740)};
+
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    column-gap: var(--sbb-spacing-fixed-3x);
+    border-radius: var(--sbb-border-radius-4x);
+    padding-block: var(--sbb-spacing-fixed-10x) var(--sbb-spacing-responsive-l);
+    padding-inline: var(--sbb-spacing-fixed-5x);
+    background: linear-gradient(
+      to bottom,
+      var(--sbb-color-primary) 0 #{sbb.px-to-rem-build(178)},
+      var(--sbb-background-color-3) #{sbb.px-to-rem-build(178)} 100%
+    );
+
+    @include sbb.mq($to: large) {
+      &:has(sbb-signet) {
+        padding-block-start: var(--sbb-spacing-fixed-4x);
+      }
+    }
+
+    sbb-signet {
+      width: var(--sbb-spacing-fixed-16x);
+      align-self: end;
+      margin-block-end: var(--sbb-spacing-fixed-2x);
+      margin-inline: 0;
+
+      @include sbb.mq($from: large) {
+        position: absolute;
+        inset-block-start: var(--sbb-spacing-fixed-6x);
+        inset-inline-end: var(--sbb-spacing-fixed-6x);
+      }
+    }
+
+    & > * {
+      margin-inline: auto;
+      max-width: var(--sbb-timetable-form-content-max-width);
+      width: 100%;
+    }
+  }
+
+  sbb-timetable-form {
+    sbb-date-input {
+      min-width: #{sbb.px-to-rem-build(133)}; // From FIGMA spec
+    }
+
+    :is(.sbb-timetable-form-block, .sbb-timetable-form-mobile-block) {
+      --sbb-form-field-focus-underline-z-index: 1;
+
+      width: 100%;
+      position: relative;
+
+      &::after {
+        content: '';
+        position: absolute;
+        border-block-end: var(--sbb-border-width-1x) solid var(--sbb-border-color-4-inverted);
+        inset-inline: var(--sbb-form-field-padding-inline);
+        inset-block-end: 0;
+      }
+
+      sbb-datepicker-toggle {
+        margin-inline-end: var(--sbb-spacing-fixed-6x);
+      }
+    }
+
+    @include sbb.mq($from: small) {
+      .sbb-timetable-form-mobile-block {
+        width: unset;
+
+        &::after {
+          display: none;
+        }
+
+        sbb-datepicker-toggle {
+          margin-inline-end: unset;
+        }
+      }
+    }
+
+    @include sbb.mq($to: small) {
+      .sbb-timetable-form-mobile-hidden {
+        display: none;
+      }
+    }
+  }
+}

package/timetable-form/timetable-form-details/timetable-form-details.global.scss

@@ -0,0 +1,12 @@
+@use '../../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-timetable-form-details-border-block-start: var(--sbb-border-width-1x) solid
+    var(--sbb-border-color-4-inverted);
+  --sbb-timetable-form-details-gap: var(--sbb-spacing-fixed-1x);
+  --sbb-timetable-form-details-padding-block: var(--sbb-spacing-fixed-1x);
+  --sbb-timetable-form-details-padding-inline: var(--sbb-spacing-responsive-xxs);
+  --sbb-timetable-form-details-horizontal-divider-height: 1.5rem;
+}

package/timetable-form/timetable-form-field/timetable-form-field.global.scss

@@ -0,0 +1,10 @@
+@use '../../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-timetable-form-field-route-icon-color: var(--sbb-color-2);
+  --sbb-timetable-form-field-route-icon-background-color: var(--sbb-background-color-1);
+  --sbb-timetable-form-field-route-via-icon-width: var(--sbb-size-icon-ui-small);
+  --sbb-timetable-form-field-route-via-after-dimension: #{sbb.px-to-rem-build(7)};
+}

package/timetable-occupancy/timetable-occupancy.global.scss

@@ -0,0 +1,10 @@
+@use '../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-timetable-occupancy-color: var(--sbb-color-2);
+  --sbb-timetable-occupancy-font-size: var(--sbb-text-font-size-s);
+  --sbb-timetable-occupancy-list-gap: var(--sbb-spacing-fixed-2x);
+  --sbb-timetable-occupancy-item-gap: var(--sbb-spacing-fixed-1x);
+}