@sbb-esta/lyne-elements 4.8.1 → 4.10.0

package/core/styles/node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables.scss

@@ -0,0 +1,371 @@
+$sbb-animation-duration-1x: 0.04s;
+$sbb-animation-duration-2x: 0.08s;
+$sbb-animation-duration-3x: 0.12s;
+$sbb-animation-duration-4x: 0.16s;
+$sbb-animation-duration-5x: 0.20s;
+$sbb-animation-duration-6x: 0.24s;
+$sbb-animation-duration-12x: 0.48s;
+$sbb-animation-easing: cubic-bezier(.47, .1, 1, .63);
+/// Original Value: 1px
+$sbb-border-width-1x: 0.0625rem;
+/// Original Value: 2px
+$sbb-border-width-2x: 0.125rem;
+/// Original Value: 3px
+$sbb-border-width-3x: 0.1875rem;
+/// Original Value: 4px
+$sbb-border-width-4x: 0.25rem;
+/// Original Value: 2px
+$sbb-border-radius-1x: 0.125rem;
+/// Original Value: 4px
+$sbb-border-radius-2x: 0.25rem;
+/// Original Value: 8px
+$sbb-border-radius-4x: 0.5rem;
+/// Original Value: 12px
+$sbb-border-radius-6x: 0.75rem;
+/// Original Value: 16px
+$sbb-border-radius-8x: 1rem;
+/// Original Value: 32px
+$sbb-border-radius-16x: 2rem;
+/// Original Value: 0px
+$sbb-breakpoint-zero-min: 0rem;
+/// Original Value: 599px
+$sbb-breakpoint-zero-max: 37.4375rem;
+/// Original Value: 600px
+$sbb-breakpoint-small-min: 37.5rem;
+/// Original Value: 1023px
+$sbb-breakpoint-small-max: 63.9375rem;
+/// Original Value: 1024px
+$sbb-breakpoint-large-min: 64rem;
+/// Original Value: 1439px
+$sbb-breakpoint-large-max: 89.9375rem;
+/// Original Value: 1440px
+$sbb-breakpoint-ultra-min: 90rem;
+/// Original Value: 2579px
+$sbb-breakpoint-ultra-max: 161.1875rem;
+$sbb-color-black: #000000;
+$sbb-color-midnight: #151515;
+$sbb-color-blue: #2d327d;
+$sbb-color-charcoal: #212121;
+$sbb-color-iron: #444444;
+$sbb-color-anthracite: #5a5a5a;
+$sbb-color-granite: #686868;
+$sbb-color-metal: #767676;
+$sbb-color-smoke: #8d8d8d;
+$sbb-color-storm: #a8a8a8;
+$sbb-color-graphite: #b7b7b7;
+$sbb-color-cement: #bdbdbd;
+$sbb-color-platinum: #cdcdcd;
+$sbb-color-aluminium: #d2d2d2;
+$sbb-color-silver: #dcdcdc;
+$sbb-color-cloud: #e5e5e5;
+$sbb-color-milk: #f6f6f6;
+$sbb-color-red: #eb0000;
+$sbb-color-red85: #ff3838;
+$sbb-color-red125: #c60018;
+$sbb-color-red150: #a20013;
+$sbb-color-royal-light: #06348b;
+$sbb-color-royal-dark: #0053ef;
+$sbb-color-royal85-light: #4077df;
+$sbb-color-royal85-dark: #4077df;
+$sbb-color-royal125-light: #032668;
+$sbb-color-royal125-dark: #245ecb;
+$sbb-color-royal150-light: #021c4e;
+$sbb-color-royal150-dark: #3c65b3;
+$sbb-color-white: #ffffff;
+$sbb-color-sky-light: #0074bf;
+$sbb-color-sky-dark: #128ede;
+$sbb-color-night-light: #143a85;
+$sbb-color-night-dark: #6587ca;
+$sbb-color-violet-light: #6f2282;
+$sbb-color-violet-dark: #b36cc5;
+$sbb-color-pink-light: #c7387a;
+$sbb-color-pink-dark: #e45295;
+$sbb-color-autumn-light: #cf3b00;
+$sbb-color-autumn-dark: #f05313;
+$sbb-color-orange-light: #f27e00;
+$sbb-color-orange-dark: #fb8e19;
+$sbb-color-peach-light: #fcbb00;
+$sbb-color-peach-dark: #ffc727;
+$sbb-color-lemon-light: #ffde15;
+$sbb-color-lemon-dark: #ffe547;
+$sbb-color-brown-light: #a05400;
+$sbb-color-brown-dark: #cf6f04;
+$sbb-color-green-light: #008233;
+$sbb-color-green-dark: #109d47;
+$sbb-color-turquoise-light: #007e84;
+$sbb-color-turquoise-dark: #00a59b;
+/// Original Value: 3px
+$sbb-focus-outline-offset: 0.1875rem;
+$sbb-hover-image-brightness: 1.075;
+$sbb-layout-base-grid-columns-zero: 4;
+$sbb-layout-base-grid-columns-small: 8;
+$sbb-layout-base-grid-columns-large: 12;
+$sbb-layout-base-grid-columns-ultra: 16;
+/// Original Value: 16px
+$sbb-layout-base-grid-gutter-responsive-zero: 1rem;
+/// Original Value: 24px
+$sbb-layout-base-grid-gutter-responsive-small: 1.5rem;
+/// Original Value: 32px
+$sbb-layout-base-grid-gutter-responsive-large: 2rem;
+/// Original Value: 32px
+$sbb-layout-base-grid-gutter-responsive-ultra: 2rem;
+/// Original Value: 20px
+$sbb-layout-base-offset-responsive-zero: 1.25rem;
+/// Original Value: 48px
+$sbb-layout-base-offset-responsive-small: 3rem;
+/// Original Value: 64px
+$sbb-layout-base-offset-responsive-large: 4rem;
+/// Original Value: 120px
+$sbb-layout-base-offset-responsive-ultra: 7.5rem;
+/// Original Value: 1200px
+$sbb-layout-base-page-max-width: 75rem;
+/// Original Value: 0px
+$sbb-shadow-elevation-level-3-shadow-1-offset-x: 0rem;
+/// Original Value: 2px
+$sbb-shadow-elevation-level-3-shadow-1-offset-y: 0.125rem;
+/// Original Value: 16px
+$sbb-shadow-elevation-level-3-shadow-1-blur: 1rem;
+/// Original Value: 0px
+$sbb-shadow-elevation-level-3-shadow-1-spread: 0rem;
+/// Original Value: 0px
+$sbb-shadow-elevation-level-3-shadow-2-offset-x: 0rem;
+/// Original Value: 1px
+$sbb-shadow-elevation-level-3-shadow-2-offset-y: 0.0625rem;
+/// Original Value: 4px
+$sbb-shadow-elevation-level-3-shadow-2-blur: 0.25rem;
+/// Original Value: 0px
+$sbb-shadow-elevation-level-3-shadow-2-spread: 0rem;
+/// Original Value: 0px
+$sbb-shadow-elevation-level-5-shadow-1-offset-x: 0rem;
+/// Original Value: 4px
+$sbb-shadow-elevation-level-5-shadow-1-offset-y: 0.25rem;
+/// Original Value: 32px
+$sbb-shadow-elevation-level-5-shadow-1-blur: 2rem;
+/// Original Value: 0px
+$sbb-shadow-elevation-level-5-shadow-1-spread: 0rem;
+/// Original Value: 0px
+$sbb-shadow-elevation-level-5-shadow-2-offset-x: 0rem;
+/// Original Value: 1px
+$sbb-shadow-elevation-level-5-shadow-2-offset-y: 0.0625rem;
+/// Original Value: 8px
+$sbb-shadow-elevation-level-5-shadow-2-blur: 0.5rem;
+/// Original Value: 0px
+$sbb-shadow-elevation-level-5-shadow-2-spread: 0rem;
+/// Original Value: 0px
+$sbb-shadow-elevation-level-9-shadow-1-offset-x: 0rem;
+/// Original Value: 16px
+$sbb-shadow-elevation-level-9-shadow-1-offset-y: 1rem;
+/// Original Value: 128px
+$sbb-shadow-elevation-level-9-shadow-1-blur: 8rem;
+/// Original Value: 0px
+$sbb-shadow-elevation-level-9-shadow-1-spread: 0rem;
+/// Original Value: 0px
+$sbb-shadow-elevation-level-9-shadow-2-offset-x: 0rem;
+/// Original Value: 4px
+$sbb-shadow-elevation-level-9-shadow-2-offset-y: 0.25rem;
+/// Original Value: 32px
+$sbb-shadow-elevation-level-9-shadow-2-blur: 2rem;
+/// Original Value: 0px
+$sbb-shadow-elevation-level-9-shadow-2-spread: 0rem;
+/// Original Value: 0px
+$sbb-shadow-elevation-level-11-shadow-1-offset-x: 0rem;
+/// Original Value: 24px
+$sbb-shadow-elevation-level-11-shadow-1-offset-y: 1.5rem;
+/// Original Value: 192px
+$sbb-shadow-elevation-level-11-shadow-1-blur: 12rem;
+/// Original Value: 0px
+$sbb-shadow-elevation-level-11-shadow-1-spread: 0rem;
+/// Original Value: 0px
+$sbb-shadow-elevation-level-11-shadow-2-offset-x: 0rem;
+/// Original Value: 4px
+$sbb-shadow-elevation-level-11-shadow-2-offset-y: 0.25rem;
+/// Original Value: 64px
+$sbb-shadow-elevation-level-11-shadow-2-blur: 4rem;
+/// Original Value: 0px
+$sbb-shadow-elevation-level-11-shadow-2-spread: 0rem;
+/// Original Value: 28px
+$sbb-size-element-xxxs-zero: 1.75rem;
+/// Original Value: 28px
+$sbb-size-element-xxxs-small: 1.75rem;
+/// Original Value: 32px
+$sbb-size-element-xxxs-large: 2rem;
+/// Original Value: 32px
+$sbb-size-element-xxxs-ultra: 2rem;
+/// Original Value: 32px
+$sbb-size-element-xxs-zero: 2rem;
+/// Original Value: 32px
+$sbb-size-element-xxs-small: 2rem;
+/// Original Value: 36px
+$sbb-size-element-xxs-large: 2.25rem;
+/// Original Value: 36px
+$sbb-size-element-xxs-ultra: 2.25rem;
+/// Original Value: 36px
+$sbb-size-element-xs-zero: 2.25rem;
+/// Original Value: 36px
+$sbb-size-element-xs-small: 2.25rem;
+/// Original Value: 40px
+$sbb-size-element-xs-large: 2.5rem;
+/// Original Value: 40px
+$sbb-size-element-xs-ultra: 2.5rem;
+/// Original Value: 44px
+$sbb-size-element-s-zero: 2.75rem;
+/// Original Value: 44px
+$sbb-size-element-s-small: 2.75rem;
+/// Original Value: 48px
+$sbb-size-element-s-large: 3rem;
+/// Original Value: 48px
+$sbb-size-element-s-ultra: 3rem;
+/// Original Value: 48px
+$sbb-size-element-m-zero: 3rem;
+/// Original Value: 48px
+$sbb-size-element-m-small: 3rem;
+/// Original Value: 56px
+$sbb-size-element-m-large: 3.5rem;
+/// Original Value: 56px
+$sbb-size-element-m-ultra: 3.5rem;
+/// Original Value: 56px
+$sbb-size-element-l-zero: 3.5rem;
+/// Original Value: 56px
+$sbb-size-element-l-small: 3.5rem;
+/// Original Value: 64px
+$sbb-size-element-l-large: 4rem;
+/// Original Value: 64px
+$sbb-size-element-l-ultra: 4rem;
+/// Original Value: 16px
+$sbb-size-icon-ui-extra-small: 1rem;
+/// Original Value: 24px
+$sbb-size-icon-ui-small: 1.5rem;
+/// Original Value: 36px
+$sbb-size-icon-ui-medium: 2.25rem;
+/// Original Value: 48px
+$sbb-size-icon-ui-large: 3rem;
+/// Original Value: 4px
+$sbb-spacing-fixed-1x: 0.25rem;
+/// Original Value: 8px
+$sbb-spacing-fixed-2x: 0.5rem;
+/// Original Value: 12px
+$sbb-spacing-fixed-3x: 0.75rem;
+/// Original Value: 16px
+$sbb-spacing-fixed-4x: 1rem;
+/// Original Value: 20px
+$sbb-spacing-fixed-5x: 1.25rem;
+/// Original Value: 24px
+$sbb-spacing-fixed-6x: 1.5rem;
+/// Original Value: 28px
+$sbb-spacing-fixed-7x: 1.75rem;
+/// Original Value: 32px
+$sbb-spacing-fixed-8x: 2rem;
+/// Original Value: 36px
+$sbb-spacing-fixed-9x: 2.25rem;
+/// Original Value: 40px
+$sbb-spacing-fixed-10x: 2.5rem;
+/// Original Value: 48px
+$sbb-spacing-fixed-12x: 3rem;
+/// Original Value: 56px
+$sbb-spacing-fixed-14x: 3.5rem;
+/// Original Value: 64px
+$sbb-spacing-fixed-16x: 4rem;
+/// Original Value: 72px
+$sbb-spacing-fixed-18x: 4.5rem;
+/// Original Value: 76px
+$sbb-spacing-fixed-19x: 4.75rem;
+/// Original Value: 80px
+$sbb-spacing-fixed-20x: 5rem;
+/// Original Value: 96px
+$sbb-spacing-fixed-24x: 6rem;
+/// Original Value: 120px
+$sbb-spacing-fixed-30x: 7.5rem;
+/// Original Value: 12px
+$sbb-spacing-responsive-xxxs-zero: 0.75rem;
+/// Original Value: 12px
+$sbb-spacing-responsive-xxxs-small: 0.75rem;
+/// Original Value: 16px
+$sbb-spacing-responsive-xxxs-large: 1rem;
+/// Original Value: 16px
+$sbb-spacing-responsive-xxxs-ultra: 1rem;
+/// Original Value: 16px
+$sbb-spacing-responsive-xxs-zero: 1rem;
+/// Original Value: 16px
+$sbb-spacing-responsive-xxs-small: 1rem;
+/// Original Value: 24px
+$sbb-spacing-responsive-xxs-large: 1.5rem;
+/// Original Value: 24px
+$sbb-spacing-responsive-xxs-ultra: 1.5rem;
+/// Original Value: 20px
+$sbb-spacing-responsive-xs-zero: 1.25rem;
+/// Original Value: 20px
+$sbb-spacing-responsive-xs-small: 1.25rem;
+/// Original Value: 24px
+$sbb-spacing-responsive-xs-large: 1.5rem;
+/// Original Value: 24px
+$sbb-spacing-responsive-xs-ultra: 1.5rem;
+/// Original Value: 24px
+$sbb-spacing-responsive-s-zero: 1.5rem;
+/// Original Value: 24px
+$sbb-spacing-responsive-s-small: 1.5rem;
+/// Original Value: 32px
+$sbb-spacing-responsive-s-large: 2rem;
+/// Original Value: 32px
+$sbb-spacing-responsive-s-ultra: 2rem;
+/// Original Value: 32px
+$sbb-spacing-responsive-m-zero: 2rem;
+/// Original Value: 32px
+$sbb-spacing-responsive-m-small: 2rem;
+/// Original Value: 40px
+$sbb-spacing-responsive-m-large: 2.5rem;
+/// Original Value: 48px
+$sbb-spacing-responsive-m-ultra: 3rem;
+/// Original Value: 32px
+$sbb-spacing-responsive-l-zero: 2rem;
+/// Original Value: 40px
+$sbb-spacing-responsive-l-small: 2.5rem;
+/// Original Value: 56px
+$sbb-spacing-responsive-l-large: 3.5rem;
+/// Original Value: 64px
+$sbb-spacing-responsive-l-ultra: 4rem;
+/// Original Value: 32px
+$sbb-spacing-responsive-xl-zero: 2rem;
+/// Original Value: 48px
+$sbb-spacing-responsive-xl-small: 3rem;
+/// Original Value: 80px
+$sbb-spacing-responsive-xl-large: 5rem;
+/// Original Value: 96px
+$sbb-spacing-responsive-xl-ultra: 6rem;
+/// Original Value: 48px
+$sbb-spacing-responsive-xxl-zero: 3rem;
+/// Original Value: 72px
+$sbb-spacing-responsive-xxl-small: 4.5rem;
+/// Original Value: 96px
+$sbb-spacing-responsive-xxl-large: 6rem;
+/// Original Value: 120px
+$sbb-spacing-responsive-xxl-ultra: 7.5rem;
+$sbb-typo-font-family: "SBB", "Helvetica Neue", Helvetica, Arial, sans-serif;
+$sbb-typo-letter-spacing-heading: 0em;
+$sbb-typo-letter-spacing-text: 0.03em;
+$sbb-typo-line-height-heading: 1.4;
+$sbb-typo-line-height-text: 1.75;
+/// Original Value: 12px
+$sbb-typo-scale-0-75x: 0.75rem;
+/// Original Value: 13px
+$sbb-typo-scale-0-8125x: 0.8125rem;
+/// Original Value: 14px
+$sbb-typo-scale-0-875x: 0.875rem;
+/// Original Value: 16px
+$sbb-typo-scale-default: 1rem;
+/// Original Value: 18px
+$sbb-typo-scale-1-125x: 1.125rem;
+/// Original Value: 20px
+$sbb-typo-scale-1-25x: 1.25rem;
+/// Original Value: 24px
+$sbb-typo-scale-1-5x: 1.5rem;
+/// Original Value: 32px
+$sbb-typo-scale-2x: 2rem;
+/// Original Value: 40px
+$sbb-typo-scale-2-5x: 2.5rem;
+/// Original Value: 48px
+$sbb-typo-scale-3x: 3rem;
+/// Original Value: 56px
+$sbb-typo-scale-3-5x: 3.5rem;
+/// Original Value: 64px
+$sbb-typo-scale-4x: 4rem;
+

package/core/styles/scrollbar.private.scss

@@ -0,0 +1,15 @@
+.negative {
+  background-color: var(--sbb-background-color-1-negative);
+  color: var(--sbb-color-1-negative);
+}
+
+.overflow-container {
+  padding: var(--sbb-spacing-responsive-xs);
+  width: 400px;
+  height: 300px;
+  overflow: auto;
+}
+
+.inner-box {
+  width: 500px;
+}

package/core/styles/styles.js

@@ -0,0 +1,2 @@
+import { t as e } from "../../styles-CMI5maF5.js";
+export { e as boxSizingStyles };

package/core/styles/table.scss

@@ -40,10 +40,12 @@ sbb-table-wrapper[negative] .sbb-table,
   }
 }
 
+// @deprecated
 .sbb-table-header-row {
   @include table.table-header-row;
 }
 
+// @deprecated
 .sbb-table-header-cell {
   @include table.table-header-cell;
 }
@@ -52,10 +54,12 @@ sbb-table-wrapper[negative] .sbb-table,
   @include table.table-row--striped;
 }
 
+// @deprecated
 .sbb-table-data-cell {
   @include table.table-data-cell;
 }
 
+// @deprecated
 .sbb-table-caption {
   @include table.table-caption;
 }
@@ -120,3 +124,33 @@ sbb-table-wrapper[negative] .sbb-table,
 html.sbb-lean .sbb-table:not(.sbb-table-xs, .sbb-table-m) {
   @include table.table--s;
 }
+
+.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;
+}
+
+.sbb-table-header-subtitle {
+  font-weight: normal;
+}

package/core/styles/typography.private.scss

@@ -0,0 +1,9 @@
+@use './mixins/link';
+
+.sbb-link {
+  @include link.link;
+}
+
+.sbb-link-negative {
+  @include link.link-negative;
+}

package/core/styles.js

@@ -1,5 +1,2 @@
-import { css as e } from "lit";
-//#region src/elements/core/styles/box-sizing.scss?lit&inline
-var t = e`*,:before,:after{box-sizing:border-box}`;
-//#endregion
-export { t as boxSizingStyles };
+import { t as e } from "../styles-CMI5maF5.js";
+export { e as boxSizingStyles };