@sbb-esta/lyne-elements-dev 0.0.0 → 4.0.0-dev.1775551720

package/core/styles/image.scss

@@ -0,0 +1,66 @@
+@use './mixins/typo';
+@use './mixins/image';
+
+.sbb-figure {
+  @include image.figure;
+
+  :is(img, sbb-image, .sbb-image):not(.sbb-figure-overlap-image) {
+    @include image.figure-image;
+  }
+
+  :is(figcaption, .sbb-caption) {
+    @include image.figure-caption;
+  }
+
+  // Utility classes for placing elements over an image (eg. 'sbb-figure-overlap-start-start')
+  :is(
+    .sbb-figure-overlap-start-start,
+    .sbb-figure-overlap-start-end,
+    .sbb-figure-overlap-end-start,
+    .sbb-figure-overlap-end-end
+  ) {
+    @include image.figure-overlap-base;
+  }
+
+  $alignments: start, end;
+  @each $row-alignment in $alignments {
+    @each $column-alignment in $alignments {
+      .sbb-figure-overlap-#{$row-alignment}-#{$column-alignment} {
+        @include image.figure-overlap($row-alignment, $column-alignment);
+      }
+    }
+  }
+}
+
+// Utility classes for the aspect ratio (eg. 'sbb-image-16-9')
+$aspects-ratio: (
+  'free': 'auto',
+  '1-1': '1 / 1',
+  '1-2': '1 / 2',
+  '2-1': '2 / 1',
+  '2-3': '2 / 3',
+  '3-2': '3 / 2',
+  '3-4': '3 / 4',
+  '4-3': '4 / 3',
+  '4-5': '4 / 5',
+  '5-4': '5 / 4',
+  '9-16': '9 / 16',
+  '16-9': '16 / 9',
+);
+@each $name, $ratio in $aspects-ratio {
+  :is(sbb-image, img).sbb-image-#{$name} {
+    --sbb-image-aspect-ratio: #{$ratio};
+  }
+}
+
+// Utility classes for the border radius (eg. 'sbb-image-border-radius-none')
+$border-radius: (
+  'default': 'var(--sbb-border-radius-4x)',
+  'none': '0',
+  'round': 'var(--sbb-border-radius-infinity)',
+);
+@each $name, $radius in $border-radius {
+  :is(img, sbb-image).sbb-image-border-radius-#{$name} {
+    border-radius: #{$radius};
+  }
+}

package/core/styles/layout.private.scss

@@ -0,0 +1,36 @@
+@use './mixins/dev_and_debug';
+@use './core/mediaqueries';
+@use './node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables.scss' as sbb-tokens;
+
+.visualized-page-spacing div,
+.visualized-grid div {
+  @include dev_and_debug.development-style;
+
+  padding: 0;
+  height: 100px;
+}
+
+.visualized-page-spacing span {
+  display: inline-block;
+  padding: 1em;
+}
+
+.visualized-grid div {
+  display: none;
+
+  $columns: (
+    'zero': sbb-tokens.$sbb-layout-base-grid-columns-zero,
+    'small': sbb-tokens.$sbb-layout-base-grid-columns-small,
+    'large': sbb-tokens.$sbb-layout-base-grid-columns-large,
+    'ultra': sbb-tokens.$sbb-layout-base-grid-columns-ultra,
+  );
+
+  // Only show divs (columns) which are available on the grid for each breakpoint
+  @each $breakpoint, $columnCount in $columns {
+    @include mediaqueries.mq($from: #{$breakpoint}) {
+      &:nth-child(-n + #{$columnCount}) {
+        display: block;
+      }
+    }
+  }
+}

package/core/styles/layout.scss

@@ -0,0 +1,20 @@
+@use './mixins/layout';
+
+.sbb-grid,
+.sbb-page-spacing {
+  @include layout.page-spacing;
+}
+
+.sbb-grid-expanded,
+.sbb-page-spacing-expanded {
+  @include layout.page-spacing-expanded;
+}
+
+.sbb-grid,
+.sbb-grid-expanded {
+  @include layout.grid-base;
+}
+
+.sbb-grid-only {
+  @include layout.grid-base;
+}

package/core/styles/lean-theme.scss

@@ -0,0 +1,3 @@
+@use './theme' with (
+  $theme: 'lean'
+);

package/core/styles/lists.scss

@@ -0,0 +1,14 @@
+@use './mixins/lists';
+
+.sbb-list {
+  @include lists.list;
+  @include lists.description-list;
+}
+
+.sbb-step-list {
+  @include lists.step-list;
+}
+
+.sbb-icon-list {
+  @include lists.icon-list;
+}

package/core/styles/mixins/a11y.scss

@@ -0,0 +1,42 @@
+// ----------------------------------------------------------------------------------------------------
+// A11y: MediaQueries & Other things
+// ----------------------------------------------------------------------------------------------------
+@mixin if-forced-colors {
+  @media (forced-colors: active) {
+    @content;
+  }
+}
+
+@mixin if-forced-colors-light {
+  @media (forced-colors: active) and (prefers-color-scheme: light) {
+    @content;
+  }
+}
+
+@mixin if-forced-colors-dark {
+  @media (forced-colors: active) and (prefers-color-scheme: dark) {
+    @content;
+  }
+}
+
+@mixin focus-outline {
+  outline-offset: var(--sbb-focus-outline-offset);
+  outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid)
+    var(--sbb-focus-outline-width);
+}
+
+@mixin screen-reader-only {
+  border: 0;
+  clip-path: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+@mixin scroll-margin-block-start {
+  scroll-margin-block-start: var(--sbb-spacing-fixed-10x);
+}

package/core/styles/mixins/animation.scss

@@ -0,0 +1,11 @@
+// ----------------------------------------------------------------------------------------------------
+// Animation related stuff
+// ----------------------------------------------------------------------------------------------------
+
+@mixin disable-animation {
+  --sbb-disable-animation-duration: 0s;
+}
+
+@mixin enable-animation {
+  --sbb-disable-animation-duration: initial;
+}

package/core/styles/mixins/badge.scss

@@ -0,0 +1,42 @@
+@use './typo';
+
+@mixin badge {
+  @include typo.text-xxs--bold;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-inline: var(--sbb-spacing-fixed-1x);
+  border-radius: var(--sbb-border-radius-infinity);
+  background-color: var(--sbb-color-primary);
+  color: var(--sbb-color-1-negative);
+  min-width: var(--sbb-spacing-fixed-4x);
+  max-height: var(--sbb-spacing-fixed-4x);
+
+  // Transparent outline is visible in forced colors mode to ensure readability
+  outline: var(--sbb-border-width-1x) solid transparent;
+}
+
+@mixin badge-attribute {
+  [sbb-badge] {
+    --sbb-badge-position-offset: calc(var(--sbb-spacing-fixed-2x) * -1);
+
+    position: relative;
+
+    &::after {
+      @include badge;
+
+      content: attr(sbb-badge);
+      position: absolute;
+      inset-block-start: var(--sbb-badge-position-offset);
+    }
+
+    &:where([sbb-badge-position='before'])::after {
+      inset-inline-start: var(--sbb-badge-position-offset);
+    }
+
+    &:where(:not([sbb-badge-position]), [sbb-badge-position='after'])::after {
+      inset-inline-end: var(--sbb-badge-position-offset);
+    }
+  }
+}

package/core/styles/mixins/buttons.scss

@@ -0,0 +1,12 @@
+@mixin button-reset {
+  appearance: none;
+  box-sizing: border-box;
+  margin: 0;
+  outline: none;
+  border: none;
+  border-radius: 0;
+  padding: 0;
+  background: none;
+  -webkit-tap-highlight-color: transparent;
+  color: inherit;
+}

package/core/styles/mixins/card.scss

@@ -0,0 +1,203 @@
+@use '../core/functions';
+@use '../core/mediaqueries';
+@use './a11y';
+@use './buttons';
+@use './typo';
+
+// -----------------------------------------------------------------------------
+// Card: Mixins & CSS custom properties
+// -----------------------------------------------------------------------------
+@mixin card-variables--global($theme: 'standard') {
+  @include card-variables--white;
+
+  --sbb-card-border-radius: var(--sbb-border-radius-4x);
+  --sbb-card-animation-easing: var(--sbb-animation-easing);
+  --sbb-card-border-style: solid;
+  --sbb-card-padding-inline-default: #{functions.theme-pattern-select(
+      (
+        'standard': var(--sbb-spacing-responsive-s),
+        'lean': var(--sbb-spacing-responsive-xxs),
+      ),
+      $theme
+    )};
+  --sbb-card-padding-block-default: #{functions.theme-pattern-select(
+      (
+        'standard': var(--sbb-spacing-responsive-xxxs),
+        'lean': var(--sbb-spacing-fixed-3x),
+      ),
+      $theme
+    )};
+  --sbb-card-with-badge-padding-block-default: #{functions.theme-pattern-select(
+      (
+        'standard': var(--sbb-spacing-fixed-6x) var(--sbb-spacing-responsive-xxxs),
+        'lean': var(--sbb-spacing-fixed-6x) var(--sbb-spacing-fixed-3x),
+      ),
+      $theme
+    )};
+}
+
+@mixin card-variables--global-forced-colors {
+  --sbb-card-border-color: CanvasText;
+  --sbb-card-border-width: var(--sbb-border-width-2x);
+}
+
+@mixin card-variables($theme: 'standard') {
+  @include card-variables--global($theme);
+
+  @include a11y.if-forced-colors {
+    @include card-variables--global-forced-colors;
+  }
+}
+
+@mixin card-variables--white {
+  --sbb-card-background-color: var(--sbb-background-color-1);
+  --sbb-card-border-color: transparent;
+}
+
+@mixin card-variables--milk {
+  --sbb-card-background-color: var(--sbb-background-color-3);
+  --sbb-card-border-color: transparent;
+}
+
+@mixin card-variables--transparent-bordered {
+  --sbb-card-background-color: transparent;
+  --sbb-card-border-color: var(--sbb-border-color-4-inverted);
+  --sbb-card-border-width: var(--sbb-border-width-1x);
+  --sbb-focus-outline-color: inherit;
+}
+
+@mixin card-variables--transparent-bordered-dashed {
+  --sbb-card-background-color: transparent;
+  --sbb-card-border-color: light-dark(var(--sbb-color-cement), var(--sbb-color-granite));
+  --sbb-card-border-width: var(--sbb-border-width-1x);
+  --sbb-card-border-style: dashed;
+  --sbb-focus-outline-color: inherit;
+}
+
+@mixin card-variables--active {
+  --sbb-card-border-color: var(--sbb-border-color-3);
+  --sbb-card-border-width: var(--sbb-border-width-2x);
+  --sbb-card-border-style: solid;
+
+  @include a11y.if-forced-colors {
+    --sbb-card-border-color: Highlight;
+  }
+}
+
+// Card sizing
+@mixin card-variables--spacing-default {
+  --sbb-card-padding-block: var(--sbb-card-padding-block-default);
+  --sbb-card-with-badge-padding-block: var(--sbb-card-with-badge-padding-block-default);
+  --sbb-card-padding-inline: var(--sbb-card-padding-inline-default);
+}
+
+@mixin card-variables--spacing-3x-xxs {
+  --sbb-card-padding-block: var(--sbb-spacing-fixed-3x);
+  --sbb-card-with-badge-padding-block: var(--sbb-spacing-fixed-6x) var(--sbb-spacing-fixed-3x);
+  --sbb-card-padding-inline: var(--sbb-spacing-responsive-xxs);
+}
+
+@mixin card-variables--spacing-xxxs-xxs {
+  --sbb-card-padding-block: var(--sbb-spacing-responsive-xxxs);
+  --sbb-card-with-badge-padding-block: var(--sbb-spacing-fixed-6x)
+    var(--sbb-spacing-responsive-xxxs);
+  --sbb-card-padding-inline: var(--sbb-spacing-responsive-xxs);
+}
+
+@mixin card-variables--spacing-xxxs-s {
+  --sbb-card-padding-block: var(--sbb-spacing-responsive-xxxs);
+  --sbb-card-with-badge-padding-block: var(--sbb-spacing-fixed-6x)
+    var(--sbb-spacing-responsive-xxxs);
+  --sbb-card-padding-inline: var(--sbb-spacing-responsive-s);
+}
+
+@mixin card-variables--spacing-4x-xxs {
+  --sbb-card-padding-block: var(--sbb-spacing-fixed-4x);
+  --sbb-card-with-badge-padding-block: var(--sbb-spacing-fixed-6x) var(--sbb-spacing-fixed-4x);
+  --sbb-card-padding-inline: var(--sbb-spacing-responsive-xxs);
+}
+
+@mixin card-variables--spacing-xxs {
+  --sbb-card-padding-block: var(--sbb-spacing-responsive-xxs);
+  --sbb-card-with-badge-padding-block: var(--sbb-spacing-fixed-6x) var(--sbb-spacing-responsive-xxs);
+  --sbb-card-padding-inline: var(--sbb-spacing-responsive-xxs);
+}
+
+@mixin card-variables--spacing-s {
+  --sbb-card-padding-block: var(--sbb-spacing-responsive-s);
+  --sbb-card-with-badge-padding-block: var(--sbb-spacing-responsive-s);
+  --sbb-card-padding-inline: var(--sbb-spacing-responsive-s);
+}
+
+@mixin card-variables--spacing-l {
+  --sbb-card-padding-block: var(--sbb-spacing-responsive-l);
+  --sbb-card-with-badge-padding-block: var(--sbb-spacing-responsive-l);
+  --sbb-card-padding-inline: var(--sbb-spacing-responsive-l);
+}
+
+@mixin card-variables--button {
+  @include a11y.if-forced-colors {
+    --sbb-card-color: ButtonText;
+  }
+}
+
+@mixin card-variables--link {
+  @include a11y.if-forced-colors {
+    --sbb-card-color: LinkText;
+    --sbb-card-border-color: CanvasText;
+  }
+}
+
+@mixin card {
+  // As the card has always a white/milk background, we have to fix the focus outline color
+  // to default color for cases where the card is used in a negative context.
+  --sbb-focus-outline-color: light-dark(
+    var(--sbb-focus-outline-color-default),
+    var(--sbb-focus-outline-color-dark)
+  );
+
+  // Propagate card text color to title text color to ensure correct color in forced colors mode
+  --sbb-title-text-color-normal-override: var(--sbb-card-color);
+  --sbb-card-animation-duration: var(
+    --sbb-disable-animation-duration,
+    var(--sbb-animation-duration-1x)
+  );
+
+  display: block;
+  position: relative;
+  padding-inline: var(--sbb-card-padding-inline);
+  padding-block: var(--sbb-card-padding-block);
+  border-radius: var(--sbb-card-border-radius);
+  background-color: var(--sbb-card-background-color);
+  box-shadow: none;
+  transition: box-shadow var(--sbb-card-animation-duration) var(--sbb-card-animation-easing);
+  color: var(--sbb-card-color);
+
+  // Apply border as after element to let it be inline
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background-color: transparent;
+    border: var(--sbb-card-border-width) var(--sbb-card-border-style) var(--sbb-card-border-color);
+    border-radius: var(--sbb-card-border-radius);
+    pointer-events: none;
+  }
+}
+
+@mixin card--hover {
+  @include mediaqueries.hover-mq($hover: true) {
+    --sbb-card-hover-shift: #{functions.px-to-rem-build(-2)};
+
+    box-shadow: var(--sbb-box-shadow-level-9-hard);
+
+    @include a11y.if-forced-colors {
+      --sbb-card-border-color: Highlight;
+    }
+  }
+}
+
+@mixin card--wrapper {
+  display: block;
+  height: 100%;
+}

package/core/styles/mixins/chip.scss

@@ -0,0 +1,95 @@
+@use './a11y';
+@use './helpers';
+@use './typo';
+
+@mixin chip-label-variables--color-milk {
+  --sbb-chip-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cloud));
+  --sbb-chip-label-background-color: var(--sbb-background-color-3);
+}
+
+@mixin chip-label-variables--color-charcoal {
+  --sbb-chip-label-color: var(--sbb-color-2-inverted);
+  --sbb-chip-label-background-color: var(--sbb-background-color-2-inverted);
+}
+
+@mixin chip-label-variables--color-white {
+  --sbb-chip-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cloud));
+  --sbb-chip-label-background-color: var(--sbb-background-color-1);
+}
+
+@mixin chip-label-variables--color-granite {
+  --sbb-chip-label-color: var(--sbb-color-2-inverted);
+  --sbb-chip-label-background-color: light-dark(var(--sbb-color-granite), var(--sbb-color-storm));
+}
+
+@mixin chip-label-variables--size-xxs {
+  --sbb-chip-label-padding-block: 0em;
+  --sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-2x);
+  --sbb-chip-label-font-size: var(--sbb-text-font-size-xxs);
+}
+
+@mixin chip-label-variables--size-xs {
+  --sbb-chip-label-padding-block: var(--sbb-spacing-fixed-1x);
+  --sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-3x);
+  --sbb-chip-label-font-size: var(--sbb-text-font-size-xs);
+}
+
+@mixin chip-label-variables--size-s {
+  --sbb-chip-label-padding-block: var(--sbb-spacing-fixed-1x);
+  --sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-4x);
+  --sbb-chip-label-font-size: var(--sbb-text-font-size-s);
+}
+
+@mixin chip-label-rules {
+  // We need an even value to make it work smoothly in Safari
+  line-height: 2;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: calc(
+    var(--sbb-typo-line-height-text) * var(--sbb-chip-label-font-size) +
+      var(--sbb-chip-label-padding-block) * 2
+  );
+  background-color: var(--sbb-chip-label-background-color);
+  padding-inline: var(--sbb-chip-label-padding-inline);
+  border-radius: var(--sbb-border-radius-infinity);
+  color: var(--sbb-chip-label-color);
+  font-size: var(--sbb-chip-label-font-size);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
+
+  // Overflow hidden needed because line-height can be taller than height which can cause weird layout shifting
+  overflow: hidden;
+
+  @include a11y.if-forced-colors {
+    outline: var(--sbb-border-width-1x) solid CanvasText;
+    outline-offset: calc(-1 * var(--sbb-border-width-1x));
+  }
+}
+
+@mixin chip-label-rules-ellipsis {
+  @include helpers.ellipsis;
+
+  display: inline-block;
+}
+
+@mixin chip($color: milk, $size: xxs) {
+  @if $color == milk {
+    @include chip-label-variables--color-milk;
+  } @else if $color == charcoal {
+    @include chip-label-variables--color-charcoal;
+  } @else if $color == white {
+    @include chip-label-variables--color-white;
+  } @else if $color == granite {
+    @include chip-label-variables--color-granite;
+  }
+
+  @if $size == xxs {
+    @include chip-label-variables--size-xxs;
+  } @else if $size == xs {
+    @include chip-label-variables--size-xs;
+  } @else if $size == s {
+    @include chip-label-variables--size-s;
+  }
+
+  @include chip-label-rules;
+}

package/core/styles/mixins/dev_and_debug.scss

@@ -0,0 +1,8 @@
+// Development, debug and prototyping appearance
+@mixin development-style {
+  background-color: rgba(#ad00ff, 0.2);
+  border-width: var(--sbb-spacing-fixed-2x);
+  border-style: dashed solid;
+  border-color: rgba(#ad00ff, 1);
+  padding: 1em;
+}

package/core/styles/mixins/font-face.scss

@@ -0,0 +1,45 @@
+@mixin font-declarations {
+  @font-face {
+    font-family: SBB;
+    src: url('https://cdn.app.sbb.ch/fonts/v1_9_subset/SBBWeb-Roman.woff2') format('woff2');
+    font-display: fallback;
+    font-weight: 400;
+  }
+
+  @font-face {
+    font-family: SBB;
+    src: url('https://cdn.app.sbb.ch/fonts/v1_9_subset/SBBWeb-Bold.woff2') format('woff2');
+    font-display: swap;
+    font-weight: 700;
+  }
+
+  @font-face {
+    font-family: SBB;
+    src: url('https://cdn.app.sbb.ch/fonts/v1_9_subset/SBBWeb-Light.woff2') format('woff2');
+    font-display: swap;
+    font-weight: 300;
+  }
+}
+
+@mixin font-declarations-full {
+  @font-face {
+    font-family: SBB;
+    src: url('https://cdn.app.sbb.ch/fonts/v1_9_full/SBBWeb-Roman.woff2') format('woff2');
+    font-display: fallback;
+    font-weight: 400;
+  }
+
+  @font-face {
+    font-family: SBB;
+    src: url('https://cdn.app.sbb.ch/fonts/v1_9_full/SBBWeb-Bold.woff2') format('woff2');
+    font-display: swap;
+    font-weight: 700;
+  }
+
+  @font-face {
+    font-family: SBB;
+    src: url('https://cdn.app.sbb.ch/fonts/v1_9_full/SBBWeb-Light.woff2') format('woff2');
+    font-display: swap;
+    font-weight: 300;
+  }
+}

package/core/styles/mixins/helpers.scss

@@ -0,0 +1,68 @@
+@mixin ellipsis {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+@mixin absolute-center-x-y {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+@mixin absolute-center-x {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+@mixin absolute-center-y {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+// This mixin can be used to avoid spacing problems by inserting an invisible space as pseudo element.
+@mixin zero-width-space {
+  &::before {
+    content: '\200B';
+    user-select: none;
+    width: 0;
+    height: 0;
+  }
+}
+
+// Placing content before and after the container stops the margin of inner elements from overflowing
+@mixin ignore-children-margin {
+  &::after,
+  &::before {
+    content: '\a0';
+    display: block;
+    visibility: hidden;
+    height: 0;
+    overflow: hidden;
+  }
+}
+
+@mixin invisible-container-overlay {
+  position: absolute;
+  opacity: 0;
+  inset: 0;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+  cursor: inherit;
+
+  // Puts the element behind the parent while keeping it visible so that
+  // it allows `click` events to propagate up.
+  z-index: -1;
+}
+
+@mixin box-sizing {
+  *,
+  ::before,
+  ::after {
+    box-sizing: border-box;
+  }
+}