@sbb-esta/lyne-elements 3.12.1 → 4.0.0-next

package/core/styles/mixins/buttons.scss

@@ -1,15 +1,3 @@
-@use './a11y';
-@use '../core/mediaqueries';
-@use '../core/functions';
-@use './typo';
-
-$disabled: '[disabled], :disabled, [disabled-interactive], [data-disabled], [data-group-disabled]';
-$active: ':active, [data-active]';
-
-// ----------------------------------------------------------------------------------------------------
-// Buttons Mixins
-// ----------------------------------------------------------------------------------------------------
-
 @mixin button-reset {
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -23,162 +11,3 @@ $active: ':active, [data-active]';
   -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})) {
-    @include icon-button-disabled(#{$button-selector});
-  }
-
-  :host(:is([data-focus-visible], :focus-visible)) {
-    @include icon-button-focus-visible(#{$button-selector});
-  }
-
-  :host([data-focus-visible]) {
-    // Basically the focus-outline mixin is made for use with focus-visible.
-    // As we use it here with data-focus-visible, we have to ensure that the outline is not overridden when mouse or touch is in use.
-    --sbb-focus-outline-style: initial;
-  }
-
-  :host(:not(#{$disabled}, #{$active}):hover) {
-    @include icon-button-hover(#{$button-selector});
-  }
-
-  :host(:not(#{$disabled}):is(#{$active})) {
-    @include icon-button-active(#{$button-selector});
-  }
-}
-
-// Variables used in the icon-button
-@mixin icon-button-variables {
-  --sbb-button-color-text: var(--sbb-color-3);
-  --sbb-button-color-default-background: transparent;
-  --sbb-button-color-hover-background: var(--sbb-background-color-3);
-  --sbb-button-color-active-background: var(--sbb-background-color-4);
-  --sbb-button-color-disabled-background: var(--sbb-background-color-3);
-  --sbb-button-color-disabled-border: var(--sbb-border-color-5);
-  --sbb-button-color-disabled-text: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
-  --sbb-button-border-disabled-width: var(--sbb-border-width-1x);
-  --sbb-button-border-disabled-style: dashed;
-  --sbb-button-border-radius: var(--sbb-border-radius-infinity);
-  --sbb-button-transition-duration: var(
-    --sbb-disable-animation-duration,
-    var(--sbb-animation-duration-2x)
-  );
-  --sbb-button-transition-easing-function: var(--sbb-animation-easing);
-
-  @include a11y.if-forced-colors {
-    --sbb-button-color-text: ButtonText !important;
-    --sbb-button-color-hover-background: Highlight !important;
-    --sbb-button-color-active-background: Highlight !important;
-    --sbb-button-color-disabled-background: Canvas !important;
-    --sbb-button-color-disabled-border: GrayText !important;
-    --sbb-button-color-disabled-text: GrayText !important;
-  }
-}
-
-// Variables used in the icon-button negative variant
-@mixin icon-button-variables-negative {
-  --sbb-button-color-text: var(--sbb-color-3-negative);
-  --sbb-button-color-default-background: transparent;
-  --sbb-button-color-hover-background: var(--sbb-background-color-3-negative);
-  --sbb-button-color-active-background: var(--sbb-background-color-4-negative);
-  --sbb-button-color-disabled-background: var(--sbb-background-color-3-negative);
-  --sbb-button-color-disabled-border: var(--sbb-border-color-5);
-  --sbb-button-color-disabled-text: var(--sbb-color-5);
-}
-
-// 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-text);
-      cursor: pointer;
-      user-select: none;
-      display: flex;
-
-      // Renders background in the background absolute to enable the hover animation
-      &::before {
-        position: absolute;
-        content: '';
-        inset: 0;
-        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;
-      }
-    }
-  }
-
-  #{$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) {
-  #{$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: var(--sbb-button-border-disabled-width) var(--sbb-button-border-disabled-style)
-      var(--sbb-button-color-disabled-border);
-  }
-}
-
-@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)};
-  }
-
-  #{$button-selector}::before {
-    @include mediaqueries.hover-mq($hover: true) {
-      background-color: var(--sbb-button-color-hover-background);
-    }
-  }
-}
-
-// Active state for icon-button in form-field
-@mixin icon-button-active($button-selector) {
-  #{$button-selector}::before {
-    background-color: var(--sbb-button-color-active-background);
-  }
-}

package/core/styles/mixins/card.scss

@@ -2,7 +2,6 @@
 @use '../core/mediaqueries';
 @use './a11y';
 @use './buttons';
-@use './shadows';
 @use './typo';
 
 // -----------------------------------------------------------------------------
@@ -162,7 +161,7 @@
     --sbb-card-hover-shift: #{functions.px-to-rem-build(-2)};
 
     #{$cardSelector} {
-      @include shadows.shadow-level-9-hard;
+      box-shadow: var(--sbb-box-shadow-level-9-hard);
     }
 
     @include a11y.if-forced-colors {

package/core/styles/mixins/lists.scss

@@ -186,7 +186,7 @@
   }
 
   &:where(.sbb-text-xl) {
-    @include mediaqueries.mq($from: medium) {
+    @include mediaqueries.mq($from: large) {
       --sbb-step-list-dimensions: #{functions.px-to-rem-build(41)};
     }
   }

package/core/styles/mixins/panel.scss

@@ -24,7 +24,7 @@
   );
   --sbb-panel-animation-easing: var(--sbb-animation-easing);
 
-  @include mediaqueries.mq($from: medium) {
+  @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)};