@sbb-esta/lyne-elements 0.0.0 → 0.52.0

package/core/styles/mixins/buttons.scss

@@ -0,0 +1,208 @@
+@use './a11y.scss';
+@use '../core/mediaqueries.scss';
+@use '../core/functions.scss';
+@use './typo.scss';
+
+// ----------------------------------------------------------------------------------------------------
+// Buttons Mixins
+// ----------------------------------------------------------------------------------------------------
+
+@mixin button-reset {
+  -webkit-appearance: none;
+  -moz-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;
+}
+
+// Icon-button style
+@mixin icon-button($button-selector, $icon-selector) {
+  @include icon-button-base(':host', #{$button-selector}, #{$icon-selector});
+
+  :host([negative]) {
+    @include icon-button-variables-negative;
+  }
+
+  :host(:is([disabled], [data-disabled])) {
+    @include icon-button-disabled(#{$button-selector});
+  }
+
+  :host(:focus-visible:not([data-focus-origin='mouse'], [data-focus-origin='touch'])) {
+    @include icon-button-focus-visible(#{$button-selector});
+  }
+
+  :host(:not([disabled], [data-disabled], :active, [data-active]):hover) {
+    @include icon-button-hover(#{$button-selector});
+  }
+
+  :host(:not([disabled], [data-disabled]):is(:active, [data-active])) {
+    @include icon-button-active(#{$button-selector});
+  }
+}
+
+// Variables used in the icon-button
+@mixin icon-button-variables {
+  --sbb-button-color-default-background: var(--sbb-color-black-alpha-0);
+  --sbb-button-color-default-border: var(--sbb-color-black-alpha-0);
+  --sbb-button-color-default-text: var(--sbb-color-charcoal);
+  --sbb-button-color-hover-background: var(--sbb-color-milk);
+  --sbb-button-color-hover-border: var(--sbb-color-milk);
+  --sbb-button-color-hover-text: var(--sbb-color-charcoal);
+  --sbb-button-color-active-background: var(--sbb-color-cloud);
+  --sbb-button-color-active-border: var(--sbb-color-cloud);
+  --sbb-button-color-active-text: var(--sbb-color-charcoal);
+  --sbb-button-color-disabled-background: var(--sbb-color-milk);
+  --sbb-button-color-disabled-border: var(--sbb-color-smoke);
+  --sbb-button-color-disabled-text: var(--sbb-color-granite);
+  --sbb-button-border-style: solid;
+  --sbb-button-border-disabled-style: dashed;
+  --sbb-button-border-width: #{functions.px-to-rem-build(0)};
+  --sbb-button-border-radius: var(--sbb-border-radius-infinity);
+  --sbb-button-transition-duration: var(
+    --sbb-disable-animation-zero-time,
+    var(--sbb-animation-duration-2x)
+  );
+  --sbb-button-transition-easing-function: var(--sbb-animation-easing);
+  --sbb-button-inset: 0;
+
+  @include a11y.if-forced-colors {
+    --sbb-button-color-default-text: ButtonText !important;
+    --sbb-button-color-default-border: CanvasText !important;
+    --sbb-button-color-active-text: ButtonText !important;
+    --sbb-button-color-active-border: Highlight !important;
+    --sbb-button-color-hover-text: ButtonText !important;
+  }
+}
+
+// Variables used in the icon-button negative variant
+@mixin icon-button-variables-negative {
+  --sbb-button-color-default-background: var(--sbb-color-black-alpha-0);
+  --sbb-button-color-default-border: var(--sbb-color-black-alpha-0);
+  --sbb-button-color-default-text: var(--sbb-color-milk);
+  --sbb-button-color-hover-background: var(--sbb-color-charcoal);
+  --sbb-button-color-hover-border: var(--sbb-color-charcoal);
+  --sbb-button-color-hover-text: var(--sbb-color-milk);
+  --sbb-button-color-active-background: var(--sbb-color-iron);
+  --sbb-button-color-active-border: var(--sbb-color-iron);
+  --sbb-button-color-active-text: var(--sbb-color-milk);
+  --sbb-button-color-disabled-background: var(--sbb-color-black-alpha-0);
+  --sbb-button-color-disabled-border: var(--sbb-color-smoke);
+  --sbb-button-color-disabled-text: var(--sbb-color-smoke);
+}
+
+// Default state for icon-button in form-field
+@mixin icon-button-base($host-selector, $button-selector, $icon-selector) {
+  #{$host-selector} {
+    display: inline-block;
+    -webkit-tap-highlight-color: transparent;
+    height: fit-content;
+
+    // Use !important here to not interfere with Firefox focus ring definition
+    // which appears in normalize css of several frameworks.
+    outline: none !important;
+
+    @include icon-button-variables;
+
+    #{$button-selector} {
+      position: relative;
+      transition-duration: var(--sbb-button-transition-duration);
+      transition-timing-function: var(--sbb-button-transition-easing-function);
+      transition-property: color;
+      border-radius: var(--sbb-button-border-radius);
+      color: var(--sbb-button-color-default-text);
+      cursor: pointer;
+      user-select: none;
+      display: var(--sbb-button-display);
+
+      // Renders background and border in the background absolute to enable the hover animation
+      &::before {
+        position: absolute;
+        content: '';
+        inset: var(--sbb-button-inset);
+        border: var(--sbb-button-border-width) var(--sbb-button-border-style)
+          var(--sbb-button-color-default-border);
+        border-radius: var(--sbb-button-border-radius);
+        background-color: var(--sbb-button-color-default-background);
+        transition-duration: var(--sbb-button-transition-duration);
+        transition-timing-function: var(--sbb-button-transition-easing-function);
+        transition-property: inset, background-color, border-color;
+      }
+    }
+  }
+
+  #{$icon-selector} {
+    transition: transform var(--sbb-button-transition-duration)
+      var(--sbb-button-transition-easing-function);
+    transform: translateY(
+      var(--sbb-button-translate-y-content-hover, #{functions.px-to-rem-build(0)})
+    );
+    display: flex;
+  }
+}
+
+// Disabled state for icon-button in form-field
+@mixin icon-button-disabled($button-selector) {
+  --sbb-button-border-width: var(--sbb-border-width-1x);
+
+  @include a11y.if-forced-colors {
+    --sbb-button-color-disabled-text: GrayText !important;
+  }
+
+  #{$button-selector} {
+    color: var(--sbb-button-color-disabled-text);
+    cursor: default;
+    pointer-events: none;
+  }
+
+  #{$button-selector}::before {
+    background-color: var(--sbb-button-color-disabled-background);
+    border-color: var(--sbb-button-color-disabled-border);
+    border-style: var(--sbb-button-border-disabled-style);
+  }
+}
+
+@mixin icon-button-focus-visible($button-selector) {
+  #{$button-selector}::before {
+    @include a11y.focus-outline;
+  }
+}
+
+// Hover state for icon-button in form-field (exclude active state)
+@mixin icon-button-hover($button-selector) {
+  @include mediaqueries.hover-mq($hover: true) {
+    --sbb-button-translate-y-content-hover: #{functions.px-to-rem-build(-1)};
+  }
+
+  @include a11y.if-forced-colors {
+    --sbb-button-color-hover-border: Highlight !important;
+  }
+
+  #{$button-selector}::before {
+    @include mediaqueries.hover-mq($hover: true) {
+      inset: calc(var(--sbb-button-border-width) * -1);
+      background-color: var(--sbb-button-color-hover-background);
+      border-color: var(--sbb-button-color-hover-border);
+    }
+  }
+
+  #{$button-selector} {
+    @include mediaqueries.hover-mq($hover: true) {
+      color: var(--sbb-button-color-hover-text);
+    }
+  }
+}
+
+// Active state for icon-button in form-field
+@mixin icon-button-active($button-selector) {
+  #{$button-selector}::before {
+    color: var(--sbb-button-color-active-text);
+    background-color: var(--sbb-button-color-active-background);
+    border-color: var(--sbb-button-color-active-border);
+  }
+}

package/core/styles/mixins/card.scss

@@ -0,0 +1,174 @@
+@use '../core/functions';
+@use '../core/mediaqueries';
+@use './a11y';
+@use './buttons';
+@use './shadows';
+@use './typo';
+
+// -----------------------------------------------------------------------------
+// Card: Mixins & CSS custom properties
+// -----------------------------------------------------------------------------
+
+@mixin card-variables {
+  --sbb-card-background-color: var(--sbb-color-white);
+  --sbb-card-border-radius: var(--sbb-border-radius-4x);
+  --sbb-card-animation-duration: var(
+    --sbb-disable-animation-zero-time,
+    var(--sbb-animation-duration-1x)
+  );
+  --sbb-card-animation-easing: var(--sbb-animation-easing);
+  --sbb-card-border-color: transparent;
+  --sbb-card-border-style: solid;
+  --sbb-card-hover-shift: 0;
+
+  // 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: var(--sbb-focus-outline-color-default);
+
+  @include a11y.if-forced-colors {
+    --sbb-card-border-color: CanvasText;
+    --sbb-card-border-width: var(--sbb-border-width-2x);
+  }
+}
+
+@mixin card-variables--milk {
+  --sbb-card-background-color: var(--sbb-color-milk);
+  --sbb-card-border-color: transparent;
+}
+
+@mixin card-variables--transparent-bordered {
+  --sbb-card-background-color: transparent;
+  --sbb-card-border-color: var(--sbb-color-cloud);
+  --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: var(--sbb-color-cement);
+  --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-color-charcoal);
+  --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--xs {
+  --sbb-card-padding-inline: var(--sbb-spacing-responsive-xxs);
+  --sbb-card-padding-block-start: var(--sbb-spacing-fixed-3x);
+  --sbb-card-padding-block-end: var(--sbb-card-padding-block-start);
+}
+
+@mixin card-variables--s {
+  --sbb-card-padding-inline: var(--sbb-spacing-responsive-xxs);
+  --sbb-card-padding-block-start: var(--sbb-spacing-responsive-xxxs);
+  --sbb-card-padding-block-end: var(--sbb-card-padding-block-start);
+}
+
+@mixin card-variables--m {
+  --sbb-card-padding-inline: var(--sbb-spacing-responsive-s);
+  --sbb-card-padding-block-start: var(--sbb-spacing-responsive-xxxs);
+  --sbb-card-padding-block-end: var(--sbb-card-padding-block-start);
+}
+
+@mixin card-variables--m-has-badge {
+  --sbb-card-padding-block-start: var(--sbb-spacing-fixed-6x);
+  --sbb-card-padding-block-end: var(--sbb-spacing-responsive-xxxs);
+}
+
+@mixin card-variables--l {
+  --sbb-card-padding-inline: var(--sbb-spacing-responsive-xxs);
+  --sbb-card-padding-block-start: var(--sbb-spacing-fixed-4x);
+  --sbb-card-padding-block-end: var(--sbb-card-padding-block-start);
+}
+
+@mixin card-variables--l-has-badge {
+  --sbb-card-padding-block-start: var(--sbb-spacing-fixed-6x);
+  --sbb-card-padding-block-end: var(--sbb-spacing-fixed-4x);
+}
+
+@mixin card-variables--xl {
+  --sbb-card-padding-inline: var(--sbb-spacing-responsive-xxs);
+  --sbb-card-padding-block-start: var(--sbb-spacing-responsive-xxs);
+  --sbb-card-padding-block-end: var(--sbb-card-padding-block-start);
+}
+
+@mixin card-variables--xl-has-badge {
+  --sbb-card-padding-block-start: var(--sbb-spacing-fixed-6x);
+  --sbb-card-padding-block-end: var(--sbb-spacing-responsive-xxs);
+}
+
+@mixin card-variables--xxl {
+  --sbb-card-padding-inline: var(--sbb-spacing-responsive-s);
+  --sbb-card-padding-block-start: var(--sbb-spacing-responsive-s);
+  --sbb-card-padding-block-end: var(--sbb-card-padding-block-start);
+}
+
+@mixin card-variables--xxxl {
+  --sbb-card-padding-inline: var(--sbb-spacing-responsive-l);
+  --sbb-card-padding-block-start: var(--sbb-spacing-responsive-l);
+  --sbb-card-padding-block-end: var(--sbb-card-padding-block-start);
+}
+
+@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;
+  }
+}
+
+@mixin card {
+  display: block;
+  position: relative;
+  padding-inline: var(--sbb-card-padding-inline);
+  padding-block: var(--sbb-card-padding-block-start) var(--sbb-card-padding-block-end);
+  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($cardSelector) {
+  @include mediaqueries.hover-mq($hover: true) {
+    --sbb-card-hover-shift: #{functions.px-to-rem-build(-2)};
+
+    #{$cardSelector} {
+      @include shadows.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-variables--color-milk {
+  --sbb-chip-color: var(--sbb-color-granite);
+  --sbb-chip-background-color: var(--sbb-color-milk);
+}
+
+@mixin chip-variables--color-charcoal {
+  --sbb-chip-color: var(--sbb-color-white);
+  --sbb-chip-background-color: var(--sbb-color-charcoal);
+}
+
+@mixin chip-variables--color-white {
+  --sbb-chip-color: var(--sbb-color-granite);
+  --sbb-chip-background-color: var(--sbb-color-white);
+}
+
+@mixin chip-variables--color-granite {
+  --sbb-chip-color: var(--sbb-color-white);
+  --sbb-chip-background-color: var(--sbb-color-granite);
+}
+
+@mixin chip-variables--size-xxs {
+  --sbb-chip-padding-block: 0em;
+  --sbb-chip-padding-inline: var(--sbb-spacing-fixed-2x);
+  --sbb-text-font-size: var(--sbb-font-size-text-xxs);
+}
+
+@mixin chip-variables--size-xs {
+  --sbb-chip-padding-block: var(--sbb-spacing-fixed-1x);
+  --sbb-chip-padding-inline: var(--sbb-spacing-fixed-3x);
+  --sbb-text-font-size: var(--sbb-font-size-text-xs);
+}
+
+@mixin chip-variables--size-s {
+  --sbb-chip-padding-block: var(--sbb-spacing-fixed-1x);
+  --sbb-chip-padding-inline: var(--sbb-spacing-fixed-4x);
+  --sbb-text-font-size: var(--sbb-font-size-text-s);
+}
+
+@mixin chip-rules {
+  @include typo.text;
+
+  // 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-body-text) * var(--sbb-text-font-size) +
+      var(--sbb-chip-padding-block) * 2
+  );
+  background-color: var(--sbb-chip-background-color);
+  padding-inline: var(--sbb-chip-padding-inline);
+  border-radius: var(--sbb-border-radius-infinity);
+  color: var(--sbb-chip-color);
+
+  // 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-rules-ellipsis {
+  @include helpers.ellipsis;
+
+  display: inline-block;
+}
+
+@mixin chip($color: milk, $size: xxs) {
+  @if $color == milk {
+    @include chip-variables--color-milk;
+  } @else if $color == charcoal {
+    @include chip-variables--color-charcoal;
+  } @else if $color == white {
+    @include chip-variables--color-white;
+  } @else if $color == granite {
+    @include chip-variables--color-granite;
+  }
+
+  @if $size == xxs {
+    @include chip-variables--size-xxs;
+  } @else if $size == xs {
+    @include chip-variables--size-xs;
+  } @else if $size == s {
+    @include chip-variables--size-s;
+  }
+
+  @include chip-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,57 @@
+@mixin font-declarations {
+  @font-face {
+    font-family: SBB;
+    src:
+      url('https://cdn.app.sbb.ch/fonts/v1_6_subset/SBBWeb-Roman.woff2') format('woff2'),
+      url('https://cdn.app.sbb.ch/fonts/v1_6_subset/SBBWeb-Roman.woff') format('woff');
+    font-display: fallback;
+    font-weight: 400;
+  }
+
+  @font-face {
+    font-family: SBB;
+    src:
+      url('https://cdn.app.sbb.ch/fonts/v1_6_subset/SBBWeb-Bold.woff2') format('woff2'),
+      url('https://cdn.app.sbb.ch/fonts/v1_6_subset/SBBWeb-Bold.woff') format('woff');
+    font-display: swap;
+    font-weight: 700;
+  }
+
+  @font-face {
+    font-family: SBB;
+    src:
+      url('https://cdn.app.sbb.ch/fonts/v1_6_subset/SBBWeb-Light.woff2') format('woff2'),
+      url('https://cdn.app.sbb.ch/fonts/v1_6_subset/SBBWeb-Light.woff') format('woff');
+    font-display: swap;
+    font-weight: 300;
+  }
+}
+
+@mixin font-declarations-full {
+  @font-face {
+    font-family: SBB;
+    src:
+      url('https://cdn.app.sbb.ch/fonts/v1/SBBWeb-Roman.woff2') format('woff2'),
+      url('https://cdn.app.sbb.ch/fonts/v1/SBBWeb-Roman.woff') format('woff');
+    font-display: fallback;
+    font-weight: 400;
+  }
+
+  @font-face {
+    font-family: SBB;
+    src:
+      url('https://cdn.app.sbb.ch/fonts/v1/SBBWeb-Bold.woff2') format('woff2'),
+      url('https://cdn.app.sbb.ch/fonts/v1/SBBWeb-Bold.woff') format('woff');
+    font-display: swap;
+    font-weight: 700;
+  }
+
+  @font-face {
+    font-family: SBB;
+    src:
+      url('https://cdn.app.sbb.ch/fonts/v1/SBBWeb-Light.woff2') format('woff2'),
+      url('https://cdn.app.sbb.ch/fonts/v1/SBBWeb-Light.woff') format('woff');
+    font-display: swap;
+    font-weight: 300;
+  }
+}

package/core/styles/mixins/helpers.scss

@@ -0,0 +1,67 @@
+@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;
+  }
+}
+
+@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;
+  }
+}

package/core/styles/mixins/inputs.scss

@@ -0,0 +1,11 @@
+// ----------------------------------------------------------------------------------------------------
+// Inputs Mixins
+// ----------------------------------------------------------------------------------------------------
+
+@mixin input-reset {
+  outline: none;
+  border: none;
+  background-color: transparent;
+  padding: 0;
+  -webkit-appearance: none;
+}

package/core/styles/mixins/layout.scss

@@ -0,0 +1,37 @@
+@use '../core/mediaqueries';
+
+@mixin page-spacing {
+  padding-inline: var(--sbb-layout-base-offset-responsive);
+  margin-inline: auto;
+
+  // If using page-spacing in flex context,
+  // we would like to ensure it matches the width of the parent (should be full width).
+  width: 100%;
+
+  @include mediaqueries.mq($from: ultra) {
+    // Subtract padding to get real max-width
+    max-width: calc(
+      var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive)
+    );
+  }
+}
+
+@mixin page-spacing-expanded {
+  padding-inline: var(--sbb-spacing-responsive-xxs);
+}
+
+@mixin grid-base {
+  display: grid;
+  gap: var(--sbb-grid-base-gutter-responsive);
+  grid-template-columns: repeat(var(--sbb-grid-base-columns), 1fr);
+}
+
+@mixin grid {
+  @include grid-base;
+  @include page-spacing;
+}
+
+@mixin grid-expanded {
+  @include grid-base;
+  @include page-spacing-expanded;
+}