@sbb-esta/lyne-elements 0.0.0 → 0.52.0

package/core/styles/mixins/link.scss

@@ -0,0 +1,99 @@
+@use './typo';
+@use './a11y';
+@use '../core/mediaqueries';
+
+@mixin block-link-variables {
+  --sbb-link-color-normal: var(--sbb-color-granite);
+  --sbb-link-color-hover: var(--sbb-color-red125);
+  --sbb-link-color-active: var(--sbb-color-red150);
+}
+
+@mixin block-link-variables--negative {
+  --sbb-link-color-normal: var(--sbb-color-white);
+  --sbb-link-color-hover: var(--sbb-color-cloud);
+  --sbb-link-color-active: var(--sbb-color-silver);
+  --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);
+}
+
+@mixin link-variables {
+  --sbb-link-color-normal: inherit;
+  --sbb-link-color-hover: var(--sbb-color-red125);
+  --sbb-link-color-active: var(--sbb-color-red150);
+}
+
+@mixin link-variables--negative {
+  --sbb-link-color-hover: var(--sbb-color-graphite);
+  --sbb-link-color-active: var(--sbb-color-metal);
+  --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);
+}
+
+@mixin link-variables--button {
+  @include a11y.if-forced-colors {
+    --sbb-link-color-normal: ButtonText;
+    --sbb-link-color-hover: ButtonText;
+    --sbb-link-color-active: ButtonText;
+  }
+}
+
+@mixin link-base {
+  color: var(--sbb-link-color-normal);
+  text-decoration: var(--sbb-link-text-decoration, underline);
+  user-select: none;
+
+  @include a11y.if-forced-colors {
+    text-decoration: underline;
+  }
+}
+
+@mixin link-focus-visible {
+  // Hide focus outline when focus origin is mouse or touch. This is being used as a workaround in various components.
+  &:focus-visible:not([data-focus-origin='mouse'], [data-focus-origin='touch']) {
+    @include a11y.focus-outline;
+
+    border-radius: calc(var(--sbb-border-radius-4x) - var(--sbb-focus-outline-offset));
+  }
+}
+
+@mixin link-hover-rules {
+  @include mediaqueries.hover-mq($hover: true) {
+    color: var(--sbb-link-color-hover);
+    text-decoration: underline;
+  }
+}
+
+@mixin link-hover {
+  &:hover {
+    @include link-hover-rules;
+  }
+}
+
+@mixin link-active-rules {
+  color: var(--sbb-link-color-active);
+}
+
+@mixin link-active {
+  &:active {
+    @include link-active-rules;
+  }
+}
+
+@mixin link-consolidation {
+  @include link-base;
+  @include typo.text-inherit;
+  @include link-focus-visible;
+  @include link-hover;
+
+  // Active definitions have to be after :hover definitions
+  @include link-active;
+}
+
+@mixin link {
+  @include link-variables;
+  @include link-consolidation;
+}
+
+@mixin link-negative {
+  @include link-variables;
+  @include link-variables--negative;
+  @include link-consolidation;
+}

package/core/styles/mixins/lists.scss

@@ -0,0 +1,186 @@
+@use 'sass:selector';
+@use '../core/functions';
+@use '../core/mediaqueries';
+@use './typo';
+
+@mixin list-reset {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  font-size: inherit;
+}
+
+@mixin list {
+  // Support both top level usage (& is empty / falsy)
+  // and applied to a selector usage.
+  #{if(&, '&:where(ol, ul)', ':is(ol, ul)')} {
+    --sbb-list-vertical-gap: 0.75em;
+    --sbb-list-padding-inline-start: 1.5em;
+
+    &,
+    :is(ol, ul) {
+      margin: 0;
+      padding: 0;
+      padding-inline-start: var(--sbb-list-padding-inline-start);
+      color: var(--sbb-color-iron);
+
+      > li {
+        + li {
+          margin-block-start: var(--sbb-list-vertical-gap);
+        }
+
+        p {
+          margin-block: 0;
+        }
+
+        // P has to be redefined to be more specific
+        > * + p {
+          margin-block-start: var(--sbb-spacing-responsive-xxxs);
+        }
+      }
+    }
+
+    :is(ul, ol),
+    .sbb-step-list & {
+      margin-block-start: var(--sbb-list-vertical-gap);
+    }
+  }
+
+  // Support both top level usage (& is empty / falsy)
+  // and applied to a selector usage.
+  #{if(&, '&:where(ul)', 'ul')} {
+    &,
+    ul {
+      list-style-type: none;
+
+      > li {
+        position: relative;
+
+        // Bullet point
+        &::before {
+          content: '\2022'; // •
+          position: absolute;
+          display: flex;
+          height: 1em;
+          width: 1em;
+          align-items: center;
+          justify-content: center;
+          inset-block-start: calc(0.5 * (var(--sbb-typo-line-height-body-text) * 1em - 1em));
+          inset-inline-start: calc(-1 * (0.5 * var(--sbb-list-padding-inline-start) + 0.5em));
+
+          // Scale 1.3 to match Figma specs.
+          transform: scale(1.3);
+        }
+      }
+    }
+  }
+}
+
+@mixin step-list {
+  --sbb-step-list-marker-dimensions: #{functions.px-to-rem-build(34)};
+  --sbb-step-list-padding-block: var(--sbb-spacing-fixed-3x);
+  --sbb-step-list-padding-inline: var(--sbb-spacing-responsive-xxs);
+  --sbb-step-list-marker-to-text-gap: var(--sbb-spacing-responsive-xxxs);
+
+  // Additional space from overall li padding to the text because text
+  // has to be centered to marker number.
+  --sbb-step-list-text-to-marker-block-offset: calc(
+    0.5 *
+      (
+        var(--sbb-step-list-marker-dimensions) - var(--sbb-typo-line-height-body-text) *
+          var(--sbb-text-font-size)
+      )
+  );
+  --sbb-step-list-vertical-gap: var(--sbb-spacing-fixed-1x);
+
+  &:where(.sbb-text-s) {
+    --sbb-step-list-padding-block: var(--sbb-spacing-fixed-4x);
+  }
+
+  &:where(.sbb-text-m, .sbb-text-l, .sbb-text-xl) {
+    --sbb-step-list-padding-block: var(--sbb-spacing-fixed-5x);
+  }
+
+  &:where(.sbb-text-xl) {
+    @include mediaqueries.mq($from: medium) {
+      --sbb-step-list-marker-dimensions: #{functions.px-to-rem-build(41)};
+    }
+  }
+
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  counter-reset: steps;
+
+  /* stylelint-disable-next-line no-descending-specificity */
+  > li {
+    position: relative;
+    counter-increment: steps;
+    background-color: var(--sbb-color-milk);
+    border-radius: var(--sbb-border-radius-4x);
+    padding-block: calc(
+        var(--sbb-step-list-padding-block) + var(--sbb-step-list-text-to-marker-block-offset)
+      )
+      var(--sbb-step-list-padding-block);
+    padding-inline: calc(
+        var(--sbb-step-list-padding-inline) + var(--sbb-step-list-marker-dimensions) +
+          var(--sbb-step-list-marker-to-text-gap)
+      )
+      var(--sbb-step-list-padding-inline);
+    min-height: calc(
+      var(--sbb-step-list-marker-dimensions) + 2 * var(--sbb-step-list-padding-block)
+    );
+
+    &::before {
+      @include typo.text-xxs--bold;
+
+      content: counter(steps);
+      position: absolute;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: var(--sbb-step-list-marker-dimensions);
+      width: var(--sbb-step-list-marker-dimensions);
+      margin-block-start: calc(-1 * var(--sbb-step-list-text-to-marker-block-offset));
+      inset-inline-start: var(--sbb-step-list-padding-inline);
+      border: var(--sbb-border-width-1x) solid var(--sbb-color-cement);
+      border-radius: 50%;
+      color: var(--sbb-color-charcoal);
+    }
+
+    + li {
+      margin-block-start: var(--sbb-step-list-vertical-gap);
+    }
+
+    p {
+      margin-block: 0;
+    }
+
+    // P has to be redefined to be more specific
+    > * + p {
+      margin-block-start: var(--sbb-spacing-responsive-xxxs);
+    }
+  }
+}
+
+@mixin description-list {
+  // Support both top level usage (& is empty / falsy)
+  // and applied to a selector usage.
+  #{if(&, '&:where(dl)', 'dl')} {
+    @include typo.text-s--regular;
+
+    margin: 0;
+    padding: 0;
+    display: grid;
+
+    // Ensure that description is always attached to the label
+    grid-template-columns: auto minmax(20%, 1fr);
+    gap: var(--sbb-spacing-fixed-1x) var(--sbb-spacing-fixed-2x);
+    color: var(--sbb-color-iron);
+
+    :is(dt, dd) {
+      margin: 0;
+      padding: 0;
+    }
+  }
+}

package/core/styles/mixins/overlay.scss

@@ -0,0 +1,154 @@
+@use './scrollbar';
+
+@mixin options-panel-overlay-variables {
+  @include scrollbar.scrollbar-variables;
+
+  --sbb-options-panel-position-x: 0;
+  --sbb-options-panel-position-y: 0;
+  --sbb-options-panel-active-option-y: 0;
+
+  // 85vh is not an exact value but looks optimized for mobile view.
+  --sbb-options-panel-max-height: calc(85vh - var(--sbb-spacing-fixed-8x));
+  --sbb-options-panel-min-height: var(--sbb-options-panel-origin-height);
+  --sbb-options-panel-visibility: visible;
+  --sbb-options-panel-width: fit-content;
+  --sbb-options-panel-border-radius: var(--sbb-border-radius-4x);
+  --sbb-options-panel-options-border-radius: 0 0 var(--sbb-options-panel-border-radius)
+    var(--sbb-options-panel-border-radius);
+  --sbb-options-panel-animation-duration: var(
+    --sbb-disable-animation-time,
+    var(--sbb-animation-duration-4x)
+  );
+  --sbb-options-panel-animation-timing-function: ease;
+  --sbb-options-panel-gap-fix-opacity: 0;
+  --sbb-options-panel-gap-fix-transform: none;
+  --sbb-options-panel-gap-fix-top: calc(
+    var(--sbb-options-panel-position-y) - var(--sbb-options-panel-border-radius)
+  );
+  --sbb-options-panel-background-color: var(--sbb-color-white);
+
+  // As the overlays have always a white background, we have to fix the focus outline color
+  // to default color for cases where the overlays are used in a negative context.
+  --sbb-focus-outline-color: var(--sbb-focus-outline-color-default);
+}
+
+@mixin options-panel-overlay-negative-variables {
+  @include scrollbar.scrollbar-variables--color-negative;
+
+  --sbb-options-panel-background-color: var(--sbb-color-midnight);
+
+  // As the overlays have always a white background, we have to fix the focus outline color
+  // to default color for cases where the overlays are used in a negative context.
+  --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);
+}
+
+@mixin options-panel-overlay-container {
+  position: fixed;
+  pointer-events: none;
+  inset: 0;
+  z-index: var(--sbb-options-panel-internal-z-index);
+}
+
+@mixin options-panel-overlay-gap {
+  display: flex;
+  justify-content: space-between;
+  position: fixed;
+  visibility: var(--sbb-options-panel-visibility);
+  opacity: var(--sbb-options-panel-gap-fix-opacity);
+  background-color: transparent;
+  width: var(--sbb-options-panel-width);
+  height: var(--sbb-options-panel-border-radius);
+  top: var(--sbb-options-panel-gap-fix-top);
+  left: var(--sbb-options-panel-position-x);
+  transform: var(--sbb-options-panel-gap-fix-transform);
+  transition: opacity var(--sbb-options-panel-animation-duration)
+    var(--sbb-options-panel-animation-timing-function);
+}
+
+@mixin options-panel-overlay {
+  display: block;
+  position: absolute;
+  visibility: var(--sbb-options-panel-visibility);
+  overflow: hidden;
+  background-color: transparent;
+  border: none;
+  border-radius: var(--sbb-options-panel-border-radius);
+  top: var(--sbb-options-panel-position-y);
+  left: var(--sbb-options-panel-position-x);
+  width: var(--sbb-options-panel-width);
+  transition: box-shadow var(--sbb-options-panel-animation-duration)
+    var(--sbb-options-panel-animation-timing-function);
+
+  &::before,
+  &::after {
+    content: '';
+    display: none;
+    position: relative;
+    width: 100%;
+    height: var(--sbb-options-panel-origin-height);
+    background-color: transparent;
+    border-radius: var(--sbb-options-panel-border-radius);
+    pointer-events: none;
+    transition: box-shadow var(--sbb-options-panel-animation-duration)
+      var(--sbb-options-panel-animation-timing-function);
+    z-index: 1;
+  }
+}
+
+@mixin optionsOverlay {
+  background-color: var(--sbb-options-panel-background-color);
+  padding-block: var(--sbb-spacing-fixed-3x);
+  padding-inline: 0;
+  border-radius: var(--sbb-options-panel-options-border-radius);
+  max-height: var(--sbb-options-panel-max-height);
+  min-height: var(--sbb-options-panel-min-height);
+  pointer-events: all;
+  overflow-y: auto;
+  animation: {
+    name: var(--sbb-options-panel-animation-name);
+    duration: var(--sbb-options-panel-animation-duration);
+    timing-function: var(--sbb-options-panel-animation-timing-function);
+  }
+}
+
+// Used to create the "wrapping" effect around the anchor for overlays (es. autocomplete/select)
+// Works in conjunction with the 'overlayGapFixCorners()' function in 'overlay.ts'
+@mixin overlay-gap-fix(
+  $radius: var(--sbb-options-panel-border-radius),
+  $color: var(--sbb-options-panel-background-color)
+) {
+  .sbb-gap-fix-wrapper {
+    position: relative;
+    overflow: hidden;
+    width: $radius;
+    height: $radius;
+    background-color: transparent;
+  }
+
+  .sbb-gap-fix-corner {
+    position: absolute;
+    border-radius: 50%;
+    border: calc($radius / 2) solid $color;
+    width: calc($radius * 3);
+    height: calc($radius * 3);
+    bottom: calc(($radius / 2) * -1);
+  }
+
+  .sbb-gap-fix-corner#left {
+    left: calc(($radius / 2) * -1);
+
+    :host([dir='rtl']) & {
+      right: calc(($radius / 2) * -1);
+      left: unset;
+    }
+  }
+
+  .sbb-gap-fix-corner#right {
+    right: calc(($radius / 2) * -1);
+
+    :host([dir='rtl']) & {
+      left: calc(($radius / 2) * -1);
+      right: unset;
+    }
+  }
+}

package/core/styles/mixins/panel.scss

@@ -0,0 +1,78 @@
+@use '../core/functions';
+@use '../core/mediaqueries';
+@use './typo';
+
+// ----------------------------------------------------------------------------------------------------
+// Panel Mixins: Achieve the styling of a panel
+// ----------------------------------------------------------------------------------------------------
+
+@mixin panel-variables {
+  --sbb-panel-width: #{functions.px-to-rem-build(223)};
+  --sbb-panel-inner-height: #{functions.px-to-rem-build(167)};
+  --sbb-panel-triangle-height: #{functions.px-to-rem-build(33)};
+  --sbb-panel-height: calc(var(--sbb-panel-inner-height) + 2 * var(--sbb-panel-triangle-height));
+  --sbb-panel-line-height: var(--sbb-typo-line-height-titles);
+  --sbb-panel-font-size: var(--sbb-typo-scale-1-5x);
+  --sbb-panel-color: var(--sbb-color-white);
+  --sbb-panel-background-color: var(--sbb-color-red-alpha-90);
+  --sbb-panel-background-color-hover: var(--sbb-color-red);
+  --sbb-panel-padding-inline: var(--sbb-spacing-responsive-m);
+  --sbb-panel-gap: var(--sbb-spacing-responsive-xs);
+  --sbb-panel-animation-duration: var(
+    --sbb-disable-animation-zero-time,
+    var(--sbb-animation-duration-4x)
+  );
+  --sbb-panel-animation-easing: var(--sbb-animation-easing);
+
+  @include mediaqueries.mq($from: medium) {
+    --sbb-panel-width: #{functions.px-to-rem-build(321)};
+    --sbb-panel-inner-height: #{functions.px-to-rem-build(240.11)};
+    --sbb-panel-triangle-height: #{functions.px-to-rem-build(47.45)};
+    --sbb-panel-font-size: var(--sbb-typo-scale-2x);
+  }
+
+  @include mediaqueries.mq($from: large) {
+    --sbb-panel-width: #{functions.px-to-rem-build(428)};
+    --sbb-panel-inner-height: #{functions.px-to-rem-build(320.38)};
+    --sbb-panel-triangle-height: #{functions.px-to-rem-build(63.31)};
+    --sbb-panel-font-size: var(--sbb-typo-scale-2-5x);
+    --sbb-panel-line-height: 1.2;
+  }
+}
+
+@mixin panel {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: var(--sbb-panel-gap);
+  width: var(--sbb-panel-width);
+  height: var(--sbb-panel-height);
+  padding-block: var(--sbb-panel-triangle-height);
+  padding-inline: var(--sbb-panel-padding-inline);
+  clip-path: polygon(
+    0 0,
+    100% var(--sbb-panel-triangle-height),
+    100% calc(100% - var(--sbb-panel-triangle-height)),
+    0% 100%
+  );
+  background-color: var(--sbb-panel-background-color);
+  transition: background var(--sbb-panel-animation-duration) var(--sbb-panel-animation-easing);
+
+  @include mediaqueries.hover-mq($hover: true) {
+    &:hover {
+      --sbb-panel-background-color: var(--sbb-panel-background-color-hover);
+    }
+  }
+}
+
+@mixin panel-text {
+  @include typo.font-smoothing;
+
+  font-family: var(--sbb-typo-font-family);
+  font-size: var(--sbb-panel-font-size);
+  font-weight: 300;
+  line-height: var(--sbb-panel-line-height);
+  letter-spacing: var(--sbb-typo-letter-spacing-titles);
+  color: var(--sbb-panel-color);
+}

package/core/styles/mixins/pearl-chain-bullet.scss

@@ -0,0 +1,129 @@
+@use './a11y';
+@use '../core/functions.scss';
+
+// ----------------------------------------------------------------------------------------------------
+// Bullet Mixins: Achieve the styling of a bullet
+// ----------------------------------------------------------------------------------------------------
+
+@mixin pearl-chain-bullet-variables {
+  --sbb-pearl-chain-bullet-size-start-end: #{functions.px-to-rem-build(10)};
+  --sbb-pearl-chain-bullet-size-stop: #{functions.px-to-rem-build(8)};
+  --sbb-pearl-chain-bullet-color: var(--sbb-color-charcoal);
+  --sbb-pearl-chain-bullet-color-past: var(--sbb-color-metal);
+  --sbb-pearl-chain-bullet-color-irrelevant: var(--sbb-color-metal);
+  --sbb-pearl-chain-bullet-color-disruption: var(--sbb-color-red);
+  --sbb-pearl-chain-bullet-border-width: var(--sbb-border-width-2x);
+  --sbb-pearl-chain-bullet-animation-duration: 1920ms;
+  --sbb-pearl-chain-bullet-animation-easing: ease-out;
+  --sbb-pearl-chain-bullet-crossed-width: #{functions.px-to-rem-build(14.14)};
+  --sbb-pearl-chain-bullet-crossed-height: #{functions.px-to-rem-build(3.5)};
+  --sbb-pearl-chain-bullet-crossed-border-width: #{functions.px-to-rem-build(1.5)};
+}
+
+@mixin pearl-chain-bullet {
+  background: var(--sbb-pearl-chain-bullet-color);
+  color: var(--sbb-pearl-chain-bullet-color);
+  border-color: var(--sbb-pearl-chain-bullet-color);
+  border-radius: 100%;
+
+  @include a11y.if-forced-colors {
+    --sbb-pearl-chain-bullet-color: CanvasText;
+  }
+}
+
+@mixin pearl-chain-bullet-start-end {
+  min-height: var(--sbb-pearl-chain-bullet-size-start-end);
+  min-width: var(--sbb-pearl-chain-bullet-size-start-end);
+  height: var(--sbb-pearl-chain-bullet-size-start-end);
+  width: var(--sbb-pearl-chain-bullet-size-start-end);
+}
+
+@mixin pearl-chain-bullet-stop {
+  min-height: var(--sbb-pearl-chain-bullet-size-stop);
+  min-width: var(--sbb-pearl-chain-bullet-size-stop);
+  height: var(--sbb-pearl-chain-bullet-size-stop);
+  width: var(--sbb-pearl-chain-bullet-size-stop);
+  border: var(--sbb-pearl-chain-bullet-border-width) solid currentcolor;
+  background: Canvas;
+}
+
+@mixin pearl-chain-bullet-past {
+  --sbb-pearl-chain-bullet-color: var(--sbb-pearl-chain-bullet-color-past);
+
+  @include a11y.if-forced-colors {
+    --sbb-pearl-chain-bullet-color: GrayText !important;
+  }
+}
+
+@mixin pearl-chain-bullet-irrelevant {
+  --sbb-pearl-chain-bullet-color: var(--sbb-pearl-chain-bullet-color-irrelevant);
+}
+
+@mixin pearl-chain-bullet-disruption {
+  --sbb-pearl-chain-bullet-color: var(--sbb-pearl-chain-bullet-color-disruption);
+  @include a11y.if-forced-colors {
+    --sbb-pearl-chain-bullet-color: Highlight;
+  }
+}
+
+@mixin pearl-chain-bullet-skipped {
+  border: var(--sbb-pearl-chain-bullet-border-width) solid currentcolor;
+  background: Canvas;
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: 50%;
+    transform: translate(-50%, -50%) rotate(45deg);
+    border-block-start: var(--sbb-pearl-chain-bullet-crossed-border-width) solid canvas;
+    background: var(--sbb-pearl-chain-bullet-color-disruption);
+    height: var(--sbb-pearl-chain-bullet-crossed-height);
+    width: var(--sbb-pearl-chain-bullet-crossed-width);
+
+    @include a11y.if-forced-colors {
+      background: Highlight;
+    }
+  }
+}
+
+@mixin pearl-chain-bullet-skipped-stop {
+  @include pearl-chain-bullet-skipped;
+  @include pearl-chain-bullet-stop;
+
+  --sbb-pearl-chain-bullet-crossed-width: #{functions.px-to-rem-build(11.31)};
+  --sbb-pearl-chain-bullet-crossed-height: #{functions.px-to-rem-build(3)};
+}
+
+@mixin pearl-chain-bullet-irrelevant-stop {
+  @include pearl-chain-bullet-stop;
+
+  --sbb-pearl-chain-bullet-border-width: var(--sbb-border-width-1x);
+}
+
+@mixin pearl-chain-bullet-position {
+  @include pearl-chain-bullet;
+  @include pearl-chain-bullet-start-end;
+  @include pearl-chain-bullet-disruption;
+
+  @keyframes pearl-chain-bullet-position-pulse {
+    0% {
+      box-shadow: 0 0 0 0 var(--sbb-pearl-chain-bullet-color-disruption);
+    }
+
+    25% {
+      box-shadow: 0 0 0 0 var(--sbb-pearl-chain-bullet-color-disruption);
+    }
+
+    50% {
+      box-shadow: 0 0 0 #{functions.px-to-rem-build(3)} var(--sbb-color-red-alpha-20);
+    }
+
+    100% {
+      box-shadow: 0 0 0 0 var(--sbb-pearl-chain-bullet-color-disruption);
+    }
+  }
+
+  animation: pearl-chain-bullet-position-pulse var(--sbb-pearl-chain-bullet-animation-duration)
+    var(--sbb-pearl-chain-bullet-animation-easing) infinite;
+}