@sbb-esta/lyne-elements 5.0.0-next → 5.0.0-next.2

package/core/styles/mixins/scrollbar.scss

@@ -1,8 +1,6 @@
 @use '../core/functions';
 
 @mixin scrollbar-rules {
-  --sbb-scrollbar-width: var(--sbb-spacing-fixed-3x);
-
   &::-webkit-scrollbar {
     // Total width
     width: var(--sbb-scrollbar-width);
@@ -40,12 +38,9 @@
   //  We have to use the `not` selector as Chrome supports both, the -webkit-* and the following properties.
   //  As long as possible we use the -webkit-* approach as we have more styling possibilities there.
   @supports not selector(::-webkit-scrollbar) {
-    // stylelint-disable-next-line block-no-redundant-nested-style-rules
-    & {
-      scrollbar-width: var(--sbb-scrollbar-width-firefox);
-      scrollbar-color: var(--sbb-scrollbar-color, currentcolor)
-        var(--sbb-scrollbar-track-color, transparent);
-    }
+    scrollbar-width: var(--sbb-scrollbar-width-firefox);
+    scrollbar-color: var(--sbb-scrollbar-color, currentcolor)
+      var(--sbb-scrollbar-track-color, transparent);
   }
 }
 
@@ -85,11 +80,9 @@
   --sbb-scrollbar-track-color: var(--sbb-background-color-4-negative);
 }
 
-@mixin scrollbar-variables--track-invisible {
-  --sbb-scrollbar-track-color: transparent;
-}
-
 @mixin scrollbar-variables($size: thin, $negative: false, $track-visible: false) {
+  --sbb-scrollbar-width: var(--sbb-spacing-fixed-3x);
+
   @if $size == thin {
     @include scrollbar-variables--size-thin;
   } @else {
@@ -106,8 +99,6 @@
     @include scrollbar-variables--color-negative-track-visible;
   } @else if $track-visible {
     @include scrollbar-variables--color-positive-track-visible;
-  } @else {
-    @include scrollbar-variables--track-invisible;
   }
 }
 

package/core/styles/mixins/typo.scss

@@ -7,76 +7,58 @@
   margin-inline: 0;
   font-family: var(--sbb-typo-font-family);
   font-weight: bold;
-  line-height: var(--sbb-title-line-height, var(--sbb-typo-line-height-heading));
-  letter-spacing: var(--sbb-typo-letter-spacing-heading);
   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-title-font-size-level-1-lean, var(--sbb-heading-font-size-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-lean,
-    var(--sbb-heading-margin-block-1)
-  );
+  --sbb-title-margin-block: var(--sbb-heading-margin-block-1);
 }
 
 @mixin title--level-2 {
-  --sbb-title-font-size: var(--sbb-title-font-size-level-2-lean, var(--sbb-heading-font-size-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-lean,
-    var(--sbb-heading-margin-block-2)
-  );
+  --sbb-title-margin-block: var(--sbb-heading-margin-block-2);
 }
 
 @mixin title--level-3 {
-  --sbb-title-font-size: var(--sbb-title-font-size-level-3-lean, var(--sbb-heading-font-size-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-lean,
-    var(--sbb-heading-margin-block-3)
-  );
+  --sbb-title-margin-block: var(--sbb-heading-margin-block-3);
 }
 
 @mixin title--level-4 {
-  --sbb-title-font-size: var(--sbb-title-font-size-level-4-lean, var(--sbb-heading-font-size-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-lean,
-    var(--sbb-heading-margin-block-4)
-  );
+  --sbb-title-margin-block: var(--sbb-heading-margin-block-4);
 }
 
 @mixin title--level-5 {
-  --sbb-title-font-size: var(--sbb-title-font-size-level-5-lean, var(--sbb-heading-font-size-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-lean,
-    var(--sbb-heading-margin-block-5)
-  );
+  --sbb-title-margin-block: var(--sbb-heading-margin-block-5);
 }
 
 @mixin title--level-6 {
-  --sbb-title-font-size: var(--sbb-title-font-size-level-6-lean, var(--sbb-heading-font-size-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-lean,
-    var(--sbb-heading-margin-block-6)
-  );
+  --sbb-title-margin-block: var(--sbb-heading-margin-block-6);
 }
 
 @mixin title-1($exclude-spacing: false) {
@@ -128,7 +110,7 @@
 }
 
 @mixin title--negative {
-  --sbb-title-text-color-normal: var(--sbb-color-3-negative);
+  --sbb-title-color: var(--sbb-color-3-negative);
 }
 
 // ----------------------------------------------------------------------------------------------------

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

@@ -802,6 +802,10 @@ $theme: 'standard' !default;
   --sbb-color-4-negative: var(--sbb-color-cloud);
   --sbb-color-4-negative-inverted: var(--sbb-color-iron);
   --sbb-color-5: var(--sbb-color-smoke);
+  --sbb-color-6: light-dark(var(--sbb-color-anthracite), var(--sbb-color-platinum));
+  --sbb-color-6-inverted: light-dark(var(--sbb-color-platinum), var(--sbb-color-anthracite));
+  --sbb-color-6-negative: var(--sbb-color-platinum);
+  --sbb-color-6-negative-inverted: var(--sbb-color-anthracite);
 
   --sbb-border-color-1: light-dark(var(--sbb-color-midnight), var(--sbb-color-white));
   --sbb-border-color-1-inverted: light-dark(var(--sbb-color-white), var(--sbb-color-midnight));
@@ -820,6 +824,10 @@ $theme: 'standard' !default;
   --sbb-border-color-4-negative: var(--sbb-color-cloud);
   --sbb-border-color-4-negative-inverted: var(--sbb-color-iron);
   --sbb-border-color-5: var(--sbb-color-smoke);
+  --sbb-border-color-6: light-dark(var(--sbb-color-anthracite), var(--sbb-color-platinum));
+  --sbb-border-color-6-inverted: light-dark(var(--sbb-color-platinum), var(--sbb-color-anthracite));
+  --sbb-border-color-6-negative: var(--sbb-color-platinum);
+  --sbb-border-color-6-negative-inverted: var(--sbb-color-anthracite);
 
   --sbb-shadow-color-soft-1: light-dark(
     color-mix(in srgb, var(--sbb-color-smoke) 5%, transparent),

package/core/styles/screen-reader-only.scss

@@ -0,0 +1,5 @@
+@use './mixins/a11y';
+
+.sbb-screen-reader-only {
+  @include a11y.screen-reader-only;
+}

package/core/styles/scrollbar.scss

@@ -1,44 +1,41 @@
 @use './mixins/scrollbar';
 
-.sbb-scrollbar,
-.sbb-scrollbar-negative,
-.sbb-scrollbar-thick,
-.sbb-scrollbar-thick-negative,
-.sbb-scrollbar-track-visible,
-.sbb-scrollbar-negative-track-visible,
-.sbb-scrollbar-thick-track-visible,
-.sbb-scrollbar-thick-negative-track-visible {
+:is(
+  .sbb-scrollbar,
+  .sbb-scrollbar-negative,
+  .sbb-scrollbar-thick,
+  .sbb-scrollbar-thick-negative,
+  .sbb-scrollbar-track-visible,
+  .sbb-scrollbar-negative-track-visible,
+  .sbb-scrollbar-thick-track-visible,
+  .sbb-scrollbar-thick-negative-track-visible
+) {
+  @include scrollbar.scrollbar-variables;
   @include scrollbar.scrollbar-rules;
 }
 
-.sbb-scrollbar {
-  @include scrollbar.scrollbar-variables($size: thin, $negative: false, $track-visible: false);
+:is(
+  .sbb-scrollbar-negative,
+  .sbb-scrollbar-thick-negative,
+  .sbb-scrollbar-negative-track-visible,
+  .sbb-scrollbar-thick-negative-track-visible
+) {
+  @include scrollbar.scrollbar-variables--color-negative;
 }
 
-.sbb-scrollbar-negative {
-  @include scrollbar.scrollbar-variables($size: thin, $negative: true, $track-visible: false);
+:is(
+  .sbb-scrollbar-thick-negative,
+  .sbb-scrollbar-thick,
+  .sbb-scrollbar-thick-track-visible,
+  .sbb-scrollbar-thick-negative-track-visible
+) {
+  @include scrollbar.scrollbar-variables--size-thick;
 }
 
-.sbb-scrollbar-thick {
-  @include scrollbar.scrollbar-variables($size: thick, $negative: false, $track-visible: false);
+:is(.sbb-scrollbar-track-visible, .sbb-scrollbar-thick-track-visible) {
+  @include scrollbar.scrollbar-variables--color-positive-track-visible;
 }
 
-.sbb-scrollbar-thick-negative {
-  @include scrollbar.scrollbar-variables($size: thick, $negative: true, $track-visible: false);
-}
-
-.sbb-scrollbar-track-visible {
-  @include scrollbar.scrollbar-variables($size: thin, $negative: false, $track-visible: true);
-}
-
-.sbb-scrollbar-negative-track-visible {
-  @include scrollbar.scrollbar-variables($size: thin, $negative: true, $track-visible: true);
-}
-
-.sbb-scrollbar-thick-track-visible {
-  @include scrollbar.scrollbar-variables($size: thick, $negative: false, $track-visible: true);
-}
-
-.sbb-scrollbar-thick-negative-track-visible {
-  @include scrollbar.scrollbar-variables($size: thick, $negative: true, $track-visible: true);
+:is(.sbb-scrollbar-negative-track-visible, .sbb-scrollbar-thick-negative-track-visible) {
+  @include scrollbar.scrollbar-variables--color-negative-track-visible;
 }

package/core/styles/styles.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../styles-x5HG0xjp.js";
-export { e as boxSizingStyles };
+import { n as e, r as t, t as n } from "../../styles-OHFAsnJq.js";
+export { n as hostScrollbarStyles, e as screenReaderOnlyStyles, t as scrollbarStyles };