@sbb-esta/lyne-elements 5.0.0-next.3 → 5.0.1

package/core/styles/layout.scss

@@ -1,20 +0,0 @@
-@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/mixins/buttons.scss

@@ -1,12 +0,0 @@
-@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/dev_and_debug.scss

@@ -1,8 +0,0 @@
-// 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/image.scss

@@ -1,43 +0,0 @@
-@use './typo';
-
-// TODO(breaking-change): check which mixins can be inlined
-@mixin figure {
-  display: grid;
-  grid-template-rows: auto;
-  grid-template-columns: 100%;
-  grid-auto-rows: auto;
-  margin: 0;
-}
-
-@mixin figure-image {
-  grid-row: 1;
-  grid-column: 1;
-  width: 100%;
-}
-
-@mixin figure-caption {
-  grid-row: 2;
-  grid-column: 1;
-  padding-block-start: var(--sbb-spacing-fixed-4x);
-  color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
-  @include typo.text-xs--regular;
-}
-
-@mixin figure-overlap-base {
-  display: flex;
-  gap: var(--sbb-spacing-fixed-1x);
-  flex-wrap: wrap;
-  margin: var(--sbb-spacing-responsive-xxxs);
-
-  // Chips or other image overlaying element should stay in light mode as the image stays in light mode as well.
-  color-scheme: only light;
-  position: relative;
-  order: 1; // Alternative to z-index
-  grid-row: 1;
-  grid-column: 1;
-}
-
-@mixin figure-overlap($row-alignment, $column-alignment) {
-  place-self: #{$row-alignment} #{$column-alignment};
-  justify-content: #{$column-alignment};
-}

package/core/styles/mixins/inputs.scss

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

package/core/styles/mixins/panel.scss

@@ -1,80 +0,0 @@
-@use '../core/functions';
-@use '../core/mediaqueries';
-@use './typo';
-
-// ----------------------------------------------------------------------------------------------------
-// Panel Mixins: Achieve the styling of a panel
-// ----------------------------------------------------------------------------------------------------
-// TODO: delete this file within the next major;
-
-// @deprecated
-@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-heading);
-  --sbb-panel-font-size: var(--sbb-typo-scale-1-5x);
-  --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-duration: var(
-    --sbb-disable-animation-duration,
-    var(--sbb-animation-duration-4x)
-  );
-  --sbb-panel-animation-easing: var(--sbb-animation-easing);
-
-  @include mediaqueries.mq($from: large) {
-    --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: ultra) {
-    --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;
-  }
-}
-
-// @deprecated
-@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);
-    }
-  }
-}
-
-// @deprecated
-@mixin panel-text {
-  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-heading);
-  color: var(--sbb-panel-color);
-}

package/core/styles/mixins/popover.scss

@@ -1,14 +0,0 @@
-// ----------------------------------------------------------------------------------------------------
-// Popover Mixins
-// ----------------------------------------------------------------------------------------------------
-
-@mixin popover-reset {
-  margin: 0;
-  padding: 0;
-  border: none;
-  width: auto;
-  height: auto;
-  background-color: transparent;
-  color: inherit;
-  pointer-events: none;
-}

package/core/styles/mixins/table.scss

@@ -1,185 +0,0 @@
-@use './typo';
-
-// 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;
-
-  --sbb-table-border: var(--sbb-border-width-1x) solid var(--sbb-table-border-color);
-  --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-sticky-shadow-transition-duration: var(--sbb-animation-duration-6x);
-
-  border-spacing: 0;
-  caption-side: bottom;
-  color: var(--sbb-table-color);
-  table-layout: auto;
-  text-align: left;
-
-  th {
-    @include table-header-cell;
-  }
-
-  td {
-    @include table-data-cell;
-  }
-
-  :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;
-  }
-
-  caption {
-    @include table-caption;
-  }
-}
-
-// @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 {
-    border-block-end: var(--sbb-table-border);
-  }
-}
-
-// @deprecated
-@mixin table-header-cell {
-  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);
-}
-
-// @deprecated
-@mixin table-data-cell {
-  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);
-}
-
-// @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));
-
-  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;
-}
-
-// @deprecated
-@mixin table-filter {
-  padding-block-start: 0 !important;
-}
-
-// @deprecated
-@mixin table--striped {
-  tbody tr:nth-child(odd) :is(th, td) {
-    @include table-row--striped;
-  }
-}
-
-// @deprecated
-@mixin table--unstriped {
-  tbody tr:nth-child(odd) :is(th, td) {
-    background-color: var(--sbb-table-background-color);
-  }
-}
-
-// @deprecated
-@mixin table-row--striped {
-  background-color: var(--sbb-table-row-striped-color);
-}
-
-// @deprecated
-@mixin 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);
-}
-
-// @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);
-  --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);
-}
-
-// @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);
-  --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);
-}
-
-// @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);
-  --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);
-}
-
-// @deprecated
-@mixin table--theme-iron {
-  --sbb-table-cell-color: var(--sbb-color-4);
-
-  tbody > tr > td {
-    color: var(--sbb-table-cell-color);
-  }
-}
-
-// @deprecated
-@mixin table--theme-iron-negative {
-  --sbb-table-cell-color: var(--sbb-color-cloud);
-}

package/core/styles/mixins/timetable-form.scss

@@ -1,63 +0,0 @@
-@use '../core/functions';
-@use '../core/mediaqueries';
-
-@mixin sbb-timetable-form {
-  --sbb-timetable-form-content-max-width: #{functions.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 #{functions.px-to-rem-build(178)},
-    var(--sbb-background-color-3) #{functions.px-to-rem-build(178)} 100%
-  );
-
-  @include mediaqueries.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 mediaqueries.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%;
-  }
-}
-
-@mixin timetable-form-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);
-  }
-}

package/core/styles/mixins/typo.scss

@@ -1,237 +0,0 @@
-// ----------------------------------------------------------------------------------------------------
-// Typo: Title Style Mixins
-// ----------------------------------------------------------------------------------------------------
-
-@mixin title-rules {
-  margin-block: var(--sbb-title-margin-block, 0);
-  margin-inline: 0;
-  font-family: var(--sbb-typo-font-family);
-  font-weight: bold;
-  font-size: var(--sbb-title-font-size);
-  letter-spacing: var(--sbb-typo-letter-spacing-heading);
-  line-height: var(--sbb-title-line-height, var(--sbb-typo-line-height-heading));
-}
-
-@mixin title--level-1 {
-  --sbb-title-font-size: var(--sbb-heading-font-size-1);
-}
-
-@mixin title--level-1-spacing {
-  --sbb-title-margin-block: var(--sbb-heading-margin-block-1);
-}
-
-@mixin title--level-2 {
-  --sbb-title-font-size: var(--sbb-heading-font-size-2);
-}
-
-@mixin title--level-2-spacing {
-  --sbb-title-margin-block: var(--sbb-heading-margin-block-2);
-}
-
-@mixin title--level-3 {
-  --sbb-title-font-size: var(--sbb-heading-font-size-3);
-}
-
-@mixin title--level-3-spacing {
-  --sbb-title-margin-block: var(--sbb-heading-margin-block-3);
-}
-
-@mixin title--level-4 {
-  --sbb-title-font-size: var(--sbb-heading-font-size-4);
-}
-
-@mixin title--level-4-spacing {
-  --sbb-title-margin-block: var(--sbb-heading-margin-block-4);
-}
-
-@mixin title--level-5 {
-  --sbb-title-font-size: var(--sbb-heading-font-size-5);
-}
-
-@mixin title--level-5-spacing {
-  --sbb-title-margin-block: var(--sbb-heading-margin-block-5);
-}
-
-@mixin title--level-6 {
-  --sbb-title-font-size: var(--sbb-heading-font-size-6);
-  --sbb-title-line-height: var(--sbb-typo-line-height-text);
-}
-
-@mixin title--level-6-spacing {
-  --sbb-title-margin-block: var(--sbb-heading-margin-block-6);
-}
-
-@mixin title-1($exclude-spacing: false) {
-  @include title--level-1;
-  @if not($exclude-spacing) {
-    @include title--level-1-spacing;
-  }
-  @include title-rules;
-}
-
-@mixin title-2($exclude-spacing: false) {
-  @include title--level-2;
-  @if not($exclude-spacing) {
-    @include title--level-2-spacing;
-  }
-  @include title-rules;
-}
-
-@mixin title-3($exclude-spacing: false) {
-  @include title--level-3;
-  @if not($exclude-spacing) {
-    @include title--level-3-spacing;
-  }
-  @include title-rules;
-}
-
-@mixin title-4($exclude-spacing: false) {
-  @include title--level-4;
-  @if not($exclude-spacing) {
-    @include title--level-4-spacing;
-  }
-  @include title-rules;
-}
-
-@mixin title-5($exclude-spacing: false) {
-  @include title--level-5;
-  @if not($exclude-spacing) {
-    @include title--level-5-spacing;
-  }
-  @include title-rules;
-}
-
-@mixin title-6($exclude-spacing: false) {
-  @include title--level-6;
-  @if not($exclude-spacing) {
-    @include title--level-6-spacing;
-  }
-  @include title-rules;
-}
-
-@mixin title--negative {
-  --sbb-title-color: var(--sbb-color-3-negative);
-}
-
-// ----------------------------------------------------------------------------------------------------
-// Typo: Text Style Mixins
-// ----------------------------------------------------------------------------------------------------
-@mixin text {
-  font-family: var(--sbb-typo-font-family);
-  font-weight: normal;
-  line-height: var(--sbb-typo-line-height-text);
-  letter-spacing: var(--sbb-typo-letter-spacing-text);
-  font-size: var(--sbb-text-font-size);
-}
-
-@mixin text--bold {
-  font-weight: bold;
-}
-
-@mixin text-xl--regular {
-  --sbb-text-font-size: var(--sbb-text-font-size-xl);
-  @include text;
-}
-
-@mixin text-xl--bold {
-  @include text-xl--regular;
-  @include text--bold;
-}
-
-@mixin text-l--regular {
-  --sbb-text-font-size: var(--sbb-text-font-size-l);
-  @include text;
-}
-
-@mixin text-l--bold {
-  @include text-l--regular;
-  @include text--bold;
-}
-
-@mixin text-m--regular {
-  --sbb-text-font-size: var(--sbb-text-font-size-m);
-  @include text;
-}
-
-@mixin text-m--bold {
-  @include text-m--regular;
-  @include text--bold;
-}
-
-@mixin text-s--regular {
-  --sbb-text-font-size: var(--sbb-text-font-size-s);
-  @include text;
-}
-
-@mixin text-s--bold {
-  @include text-s--regular;
-  @include text--bold;
-}
-
-@mixin text-xs--regular {
-  --sbb-text-font-size: var(--sbb-text-font-size-xs);
-  @include text;
-}
-
-@mixin text-xs--bold {
-  @include text-xs--regular;
-  @include text--bold;
-}
-
-@mixin text-xxs--regular {
-  --sbb-text-font-size: var(--sbb-text-font-size-xxs);
-  @include text;
-}
-
-@mixin text-xxs--bold {
-  @include text-xxs--regular;
-  @include text--bold;
-}
-
-@mixin text-inherit {
-  font-family: inherit;
-  font-weight: inherit;
-  line-height: inherit;
-  letter-spacing: inherit;
-  font-size: inherit;
-  text-align: inherit;
-}
-
-@mixin placeholder {
-  color: var(--sbb-color-5);
-  -webkit-text-fill-color: var(--sbb-color-5);
-  opacity: 1;
-}
-
-@mixin clamp-lines($lines) {
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: $lines;
-}
-
-@mixin legend {
-  @include text-xs--regular;
-
-  padding: 0;
-  color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
-}
-
-%sub-sup {
-  font-size: 60%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-
-@mixin sub {
-  @extend %sub-sup;
-
-  bottom: -0.36em;
-}
-
-@mixin sup {
-  @extend %sub-sup;
-
-  top: -0.5em;
-}

package/core/styles/option-panel-common.global.scss

@@ -1,11 +0,0 @@
-$theme: 'standard' !default;
-
-@mixin base {
-  --sbb-options-panel-border-radius: var(--sbb-border-radius-4x);
-  --sbb-options-panel-animation-timing-function: ease;
-  --sbb-options-panel-background-color: var(--sbb-background-color-2);
-  --sbb-options-panel-divider-margin-block: var(--sbb-spacing-fixed-3x);
-  --sbb-options-panel-box-shadow: var(--sbb-box-shadow-level-9-hard);
-  --sbb-options-panel-margin-block-start: var(--sbb-spacing-fixed-2x);
-  --sbb-options-panel-padding-block: var(--sbb-spacing-fixed-1x);
-}