@stihl-design-system/components 1.0.0-RC.1 → 1.0.0-RC.10

package/styles/scss/lib/_heading.scss

@@ -1,7 +1,8 @@
 // Base mixin to define common styles
 @mixin base-heading($fontFamily, $fontSize, $lineHeight) {
   font-family: #{unquote(
-      $fontFamily + ', Arial Narrow, Arial, Heiti SC, sans-serif'
+      $fontFamily +
+        ', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif'
     )};
   font-style: normal;
   font-variant: normal;
@@ -10,6 +11,21 @@
   line-height: $lineHeight;
 }
 
+// Mixin for bold title
+@mixin base-heading-bold($fontFamily, $fontSize, $lineHeight) {
+  @include base-heading($fontFamily, $fontSize, $lineHeight);
+
+  /* x-height 426 https://vertical-metrics.netlify.app/ */
+  font-size-adjust: 0.426;
+}
+
+// Mixin for display title text
+@mixin base-heading-display-title($fontFamily, $fontSize, $lineHeight) {
+  @include base-heading($fontFamily, $fontSize, $lineHeight);
+  /* cap-height 680 https://vertical-metrics.netlify.app/*/
+  font-size-adjust: cap-height 0.68;
+}
+
 @mixin responsive-heading($min, $fontSize, $lineHeight) {
   @include ds-media-query-min($min: $min) {
     font-size: $fontSize;
@@ -18,36 +34,74 @@
 }
 
 // Mixins for specific heading sizes
+// XL
 @mixin ds-heading-x-large {
-  @include base-heading(
+  @include base-heading-bold(
+    'STIHL Contraface Digital Text Bold',
+    1.625rem,
+    1.2
+  );
+  @include responsive-heading('l', 1.875rem, 1.25);
+}
+
+@mixin ds-heading-x-large-uppercase {
+  @include base-heading-display-title(
     'STIHL Contraface Digital Display Title',
     1.625rem,
     1.2
   );
+  text-transform: uppercase;
   @include responsive-heading('l', 1.875rem, 1.25);
 }
 
+// Large
 @mixin ds-heading-large {
-  @include base-heading(
+  @include base-heading-bold(
+    'STIHL Contraface Digital Text Bold',
+    1.375rem,
+    1.25
+  );
+  @include responsive-heading('l', 1.625rem, 1.2);
+}
+
+@mixin ds-heading-large-uppercase {
+  @include base-heading-display-title(
     'STIHL Contraface Digital Display Title',
     1.375rem,
     1.25
   );
+  text-transform: uppercase;
   @include responsive-heading('l', 1.625rem, 1.2);
 }
 
+// Medium
 @mixin ds-heading-medium {
-  @include base-heading('STIHL Contraface Digital Text Bold', 1.25rem, 1.2);
+  @include base-heading-bold(
+    'STIHL Contraface Digital Text Bold',
+    1.25rem,
+    1.2
+  );
 }
 
 @mixin ds-heading-medium-uppercase {
-  @include base-heading('STIHL Contraface Digital Display Title', 1.25rem, 1.2);
+  @include base-heading-display-title(
+    'STIHL Contraface Digital Display Title',
+    1.25rem,
+    1.2
+  );
+  text-transform: uppercase;
 }
 
+// Small
 @mixin ds-heading-small {
-  @include base-heading('STIHL Contraface Digital Text Bold', 1rem, 1.5);
+  @include base-heading-bold('STIHL Contraface Digital Text Bold', 1rem, 1.5);
 }
 
 @mixin ds-heading-small-uppercase {
-  @include base-heading('STIHL Contraface Digital Display Title', 1rem, 1.5);
+  @include base-heading-display-title(
+    'STIHL Contraface Digital Display Title',
+    1rem,
+    1.5
+  );
+  text-transform: uppercase;
 }

package/styles/scss/lib/_helpers.scss

@@ -1,3 +1,15 @@
 @function px-to-rem($pixels, $base-font-size: 16px) {
   @return #{calc($pixels / $base-font-size)}rem;
 }
+
+// Encode a color to be used in a data url.
+@function urlEncodeHexColor($string) {
+  @if type-of($string) == 'color' and str-index(#{$string}, '#') == 1 {
+    $hex: str-slice(ie-hex-str($string), 4);
+    $string: unquote('#{$hex}');
+
+    @return '%23' + $string;
+  }
+
+  @return $string;
+}

package/styles/scss/lib/_high-contrast.scss

@@ -0,0 +1,24 @@
+/**
+ * This mixin provides a utility to wrap styles within a media query specifically
+ * targeting devices that have forced-colors active and thus are in high-contrast mode.
+ *
+ * You can use the following keywords to set specific colors for elements in high contrast mode:
+ * @example
+ * ```markdown
+ * | Content                  | Keyword       |
+ * |--------------------------|---------------|
+ * | Text                     | CanvasText    |
+ * | Hyperlinks               | LinkText      |
+ * | Disabled Text            | GrayText      |
+ * | Selected Text, foreground| HighlightText |
+ * | Selected Text, background| Highlight     |
+ * | Buttons, foreground      | ButtonText    |
+ * | Buttons, background      | ButtonFace    |
+ * | Backgrounds              | Canvas        |
+ * ```
+ */
+@mixin high-contrast-media-query {
+  @media screen and (forced-colors: active) {
+    @content;
+  }
+}

package/styles/scss/lib/_link.scss

@@ -1,31 +1,32 @@
+@import '_helpers';
 @import '_hover';
 @import '_spacing';
+@import '_transition';
 
-// Encode a color to be used in a data url.
-@function urlEncodeHexColor($string) {
-  @if type-of($string) == 'color' and str-index(#{$string}, '#') == 1 {
-    $hex: str-slice(ie-hex-str($string), 4);
-    $string: unquote('#{$hex}');
-
-    @return '%23' + $string;
-  }
-
-  @return $string;
-}
+// IMPORTANT: DSLinkStandalone and ds-link mixin have same visual appearance
+// so if any changes are made to this component, they should be reflected in LinkStandalone as well.
 
 // Set the link variant colors
 @mixin link-variant(
   $content-color,
   $background-color-hover,
-  $content-color-hover
+  $content-color-hover,
+  $theme: 'light'
 ) {
-  color: $content-color;
+  & {
+    color: $content-color;
+  }
 
   &:link,
   &:visited {
     color: $content-color;
   }
 
+  &:active {
+    background-color: $background-color-hover;
+    color: $content-color-hover;
+  }
+
   @include hover-media-query {
     &:hover {
       background-color: $background-color-hover;
@@ -33,14 +34,24 @@
     }
   }
 
-  &:active {
-    background-color: $background-color-hover;
-    color: $content-color-hover;
+  &[href^="http://"]::after,
+  &[href^="https://"]::after
+  {
+    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{urlEncodeHexColor($content-color)}' viewBox='0 0 16 16' focusable='false' width='100%25' height='100%25'%3E%3Cpath fill-rule='evenodd' d='M9 2V0h7v7h-2V3.4L8.1 9.3 6.7 7.9 12.6 2H9Zm5 8h-2v4H2V4h4V2H0v14h14v-6Z' clip-rule='evenodd'/%3E%3C/svg%3E");
+  }
+
+  &[href^='#']::after {
+    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{urlEncodeHexColor($content-color)}' viewBox='0 0 16 16' focusable='false' width='100%25' height='100%25'%3E%3Cpath d='M14.4 9.6 8 16 1.6 9.6 3 8.2l4 4V0h2v12.2l4-4 1.4 1.4Z'/%3E%3C/svg%3E");
   }
+
+  // The offset is set to 0 since Inline Links do not have a 2px
+  // outline offset like the Button component. See designs for reference.
+  @include ds-focus($theme, $offset: 0);
 }
 
 // Mixin for underlined links (inline link or active standalone link)
 @mixin link-underline {
+  text-decoration-skip-ink: auto;
   text-decoration-line: underline;
   text-underline-offset: 2px;
   text-decoration-thickness: 1px;
@@ -48,108 +59,68 @@
 }
 
 // Public Link mixin that can be used to style links.
-// Is also used to style the LinkStandalone component.
-// The $type variable is used to determine if the link is inline or standalone,
 // since there a few design differences between the two.
-@mixin ds-link($variant: 'neutral', $theme: 'light', $type: 'inline') {
-  // Default link color (neutral/light)
-  $link-color: $ds-theme-light-content-color-interaction-neutral;
-
-  // The offset is set to 0 since LinkStandalone does not have a 2px
-  // outline offset like the Button component. See designs for reference.
-  @include ds-focus($theme, $offset: 0);
+@mixin ds-link($variant: 'neutral', $theme: 'light') {
+  display: inline;
+  padding-inline-end: $ds-spacing-2;
+  padding-inline-start: $ds-spacing-2;
+  padding-block-start: 0;
+  padding-block-end: 0;
+  line-height: inherit;
+  font-size: inherit;
+
+  // Inline links are always underlined
+  @include link-underline;
+
+  // Inline links do have two predefined icons for external links and anchors.
+  // The icons are added via the ::after pseudo element as svg data urls to
+  // enable the change of the icon color via the fill property.
+  // Setting the icon & icon color is done in the link-variant mixin since
+  // it depends on the actual link color.
+  :where(&)[href^="http://"]::after,
+  :where(&)[href^="https://"]::after,
+  :where(&)[href^='#']::after {
+    display: inline-block;
+    margin-inline-start: 0.375em;
+    width: 0.75em;
+    height: 0.75em;
+  }
 
   // Variants & themes
   @if ($variant == 'neutral' and $theme == 'light') {
     @include link-variant(
-      $link-color,
+      $ds-theme-light-content-color-interaction-neutral,
       $ds-theme-light-background-color-transparent-hover,
-      $link-color
+      $ds-theme-light-content-color-interaction-neutral
     );
   }
 
   @if ($variant == 'highlight' and $theme == 'light') {
-    $link-color: $ds-theme-light-content-color-interaction-accent;
     @include link-variant(
-      $link-color,
+      $ds-theme-light-content-color-interaction-accent,
       $ds-theme-light-background-color-transparent-hover,
       $ds-theme-light-content-color-interaction-accent-hover
     );
   }
 
   @if ($variant == 'neutral' and $theme == 'dark') {
-    $link-color: $ds-theme-dark-content-color-interaction-neutral;
     @include link-variant(
-      $link-color,
+      $ds-theme-dark-content-color-interaction-neutral,
       $ds-theme-dark-background-color-transparent-hover,
-      $link-color
+      $ds-theme-dark-content-color-interaction-neutral,
+      $theme: 'dark'
     );
   }
 
   @if ($variant == 'highlight' and $theme == 'dark') {
-    $link-color: $ds-theme-dark-content-color-interaction-accent;
     @include link-variant(
-      $link-color,
+      $ds-theme-dark-content-color-interaction-accent,
       $ds-theme-dark-background-color-transparent-hover,
-      $link-color
+      $ds-theme-dark-content-color-interaction-accent,
+      $theme: 'dark'
     );
   }
 
-  // Type
-  @if ($type == 'inline') {
-    // Inline link
-    @include link-underline;
-
-    display: inline;
-    padding-right: $ds-spacing-2;
-    padding-left: $ds-spacing-2;
-    padding-top: 0;
-    padding-bottom: 0;
-    line-height: inherit;
-    font-size: inherit;
-
-    // Inline links do have two predefined icons for external links and anchors.
-    // The icons are added via the ::after pseudo element as svg data urls to
-    // enable the change of the icon color via the fill property.
-    :where(&)[href^="http://"]::after,
-    :where(&)[href^="https://"]::after,
-    :where(&)[href^='#']::after {
-      display: inline-block;
-      margin-left: 0.375em;
-      width: 0.75em;
-      height: 0.75em;
-    }
-
-    &[href^="http://"]::after,
-    &[href^="https://"]::after
-    {
-      content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{urlEncodeHexColor($link-color)}' viewBox='0 0 16 16' focusable='false' width='100%25' height='100%25'%3E%3Cpath fill-rule='evenodd' d='M9 2V0h7v7h-2V3.4L8.1 9.3 6.7 7.9 12.6 2H9Zm5 8h-2v4H2V4h4V2H0v14h14v-6Z' clip-rule='evenodd'/%3E%3C/svg%3E");
-    }
-
-    &[href^='#']::after {
-      content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{urlEncodeHexColor($link-color)}' viewBox='0 0 16 16' focusable='false' width='100%25' height='100%25'%3E%3Cpath d='M14.4 9.6 8 16 1.6 9.6 3 8.2l4 4V0h2v12.2l4-4 1.4 1.4Z'/%3E%3C/svg%3E");
-    }
-  } @else {
-    // Standalone link
-    @include ds-utility-medium;
-
-    display: inline-flex;
-    align-items: center;
-    gap: $ds-spacing-6;
-    padding-right: $ds-spacing-4;
-    padding-left: $ds-spacing-4;
-    padding-top: $ds-spacing-2;
-    padding-bottom: $ds-spacing-2;
-    // Set color to transparent instead of text-decoration: none to support forced colors link decoration
-    text-decoration-color: transparent;
-
-    // The DSLinkStandalone component uses the DSIcon component to render a
-    // selectable icon. The icon is colored with the current text color.
-    svg {
-      fill: currentColor;
-    }
-  }
-
   // Transition
-  @include transition(background-color, border-color, color);
+  @include ds-transition((background-color, border-color, color));
 }

package/styles/scss/lib/_media-query.scss

@@ -6,7 +6,7 @@
       @content;
     }
   } @else {
-    @error "Passed #{$min} breakpoint is not available for used ds-media-query-min() mixin.";
+    @error "[STIHL Design System] - [ds-media-query-min()]: Passed '#{$min}' breakpoint is not available in ds-media-query-min() mixin.";
   }
 }
 
@@ -16,7 +16,7 @@
       @content;
     }
   } @else {
-    @error "Passed #{$max} breakpoint is not available for used ds-media-query-max() mixin.";
+    @error "[STIHL Design System] - [ds-media-query-max()]: Passed '#{$max}' breakpoint is not available in ds-media-query-max() mixin.";
   }
 }
 
@@ -27,6 +27,6 @@
       @content;
     }
   } @else {
-    @error "Passed #{$min} and/or #{$max} breakpoint is not available for used ds-media-query-min-max() mixin.";
+    @error "[STIHL Design System] - [ds-media-query-min-max()]: Passed '#{$min}' and/or '#{$max}' breakpoint is not available in ds-media-query-min-max() mixin.";
   }
 }

package/styles/scss/lib/_shadow.scss

@@ -0,0 +1,10 @@
+@mixin ds-shadow-m {
+  box-shadow:
+    0px 2px 12px 0px rgba(0, 0, 0, 0.08),
+    0px 1px 2px 0px rgba(0, 0, 0, 0.16);
+}
+@mixin ds-shadow-l {
+  box-shadow:
+    0px 8px 48px 0px rgba(0, 0, 0, 0.1),
+    0px 2px 4px 0px rgba(0, 0, 0, 0.04);
+}

package/styles/scss/lib/_spacing.scss

@@ -1,9 +1,11 @@
+$ds-spacing-0: 0px;
 $ds-spacing-1: 1px;
 $ds-spacing-2: 2px;
 $ds-spacing-4: 4px;
 $ds-spacing-6: 6px;
 $ds-spacing-8: 8px;
 $ds-spacing-12: 12px;
+$ds-spacing-14: 14px;
 $ds-spacing-16: 16px;
 $ds-spacing-20: 20px;
 $ds-spacing-24: 24px;
@@ -16,3 +18,15 @@ $ds-spacing-80: 80px;
 $ds-spacing-96: 96px;
 $ds-spacing-128: 128px;
 $ds-spacing-160: 160px;
+
+// Functions to adjust spacing to account for the inner border of an element  as designed in Figma.
+// This is necessary to ensure that the spacing matches the design specifications
+// where the border is included inside the element, causing an effective reduction
+// in the available space by the width of the border.
+@function adjust-spacing-for-border-1($spacing) {
+  @return #{calc($spacing - $ds-spacing-1)};
+}
+
+@function adjust-spacing-for-border-2($spacing) {
+  @return #{calc($spacing - $ds-spacing-2)};
+}

package/styles/scss/lib/_text.scss

@@ -1,7 +1,8 @@
 // Base mixin for text styles
 @mixin base-text($fontFamily, $fontSize, $lineHeight) {
   font-family: #{unquote(
-      $fontFamily + ', Arial Narrow, Arial, Heiti SC, sans-serif'
+      $fontFamily +
+        ', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif'
     )};
   font-style: normal;
   font-variant: normal;
@@ -12,52 +13,98 @@
   line-height: $lineHeight;
 }
 
+// Mixin for regular text
+@mixin base-text-regular($fontFamily, $fontSize, $lineHeight) {
+  @include base-text($fontFamily, $fontSize, $lineHeight);
+  /* x-height 414 https://vertical-metrics.netlify.app/ */
+  font-size-adjust: 0.414;
+}
+
+// Mixin for bold text
+@mixin base-text-bold($fontFamily, $fontSize, $lineHeight) {
+  @include base-text($fontFamily, $fontSize, $lineHeight);
+  /* x-height 426 https://vertical-metrics.netlify.app/ */
+  font-size-adjust: 0.426;
+}
+
 // Mixins for specific text sizes
 @mixin ds-text-large {
-  @include base-text('STIHL Contraface Digital Text Regular', 1.25rem, 1.6);
+  @include base-text-regular(
+    'STIHL Contraface Digital Text Regular',
+    1.25rem,
+    1.6
+  );
 }
 
 @mixin ds-text-large-bold {
-  @include base-text('STIHL Contraface Digital Text Bold', 1.25rem, 1.6);
+  @include base-text-bold('STIHL Contraface Digital Text Bold', 1.25rem, 1.6);
 }
 
 @mixin ds-text-medium {
-  @include base-text('STIHL Contraface Digital Text Regular', 1rem, 1.5);
+  @include base-text-regular(
+    'STIHL Contraface Digital Text Regular',
+    1rem,
+    1.5
+  );
 }
 
 @mixin ds-text-medium-bold {
-  @include base-text('STIHL Contraface Digital Text Bold', 1rem, 1.5);
+  @include base-text-bold('STIHL Contraface Digital Text Bold', 1rem, 1.5);
 }
 
 @mixin ds-text-small {
-  @include base-text('STIHL Contraface Digital Text Regular', 0.875rem, 1.14);
+  @include base-text-regular(
+    'STIHL Contraface Digital Text Regular',
+    0.875rem,
+    1.14
+  );
 }
 
 @mixin ds-text-small-bold {
-  @include base-text('STIHL Contraface Digital Text Bold', 0.875rem, 1.14);
+  @include base-text-bold('STIHL Contraface Digital Text Bold', 0.875rem, 1.14);
 }
 
 @mixin ds-text-x-small {
-  @include base-text('STIHL Contraface Digital Text Regular', 0.75rem, 1.33);
+  @include base-text-regular(
+    'STIHL Contraface Digital Text Regular',
+    0.75rem,
+    1.33
+  );
 }
 
 @mixin ds-text-x-small-bold {
-  @include base-text('STIHL Contraface Digital Text Bold', 0.75rem, 1.33);
+  @include base-text-bold('STIHL Contraface Digital Text Bold', 0.75rem, 1.33);
 }
 
 @mixin ds-text-xx-small {
-  @include base-text('STIHL Contraface Digital Text Regular', 0.625rem, 1.6);
+  @include base-text-regular(
+    'STIHL Contraface Digital Text Regular',
+    0.625rem,
+    1.6
+  );
 }
 
 // Utility text styles
 @mixin ds-utility-medium {
-  @include base-text('STIHL Contraface Digital Text Regular', 1rem, 1.25);
+  @include base-text-regular(
+    'STIHL Contraface Digital Text Regular',
+    1rem,
+    1.25
+  );
 }
 
 @mixin ds-utility-medium-bold {
-  @include base-text('STIHL Contraface Digital Text Bold', 1rem, 1.25);
+  @include base-text-bold('STIHL Contraface Digital Text Bold', 1rem, 1.25);
 }
 
 @mixin ds-utility-small {
-  @include base-text('STIHL Contraface Digital Text Regular', 0.875rem, 1.14);
+  @include base-text-regular(
+    'STIHL Contraface Digital Text Regular',
+    0.875rem,
+    1.14
+  );
+}
+
+@mixin ds-utility-small-bold {
+  @include base-text-bold('STIHL Contraface Digital Text Bold', 0.875rem, 1.14);
 }

package/styles/scss/lib/_theme.scss

@@ -70,13 +70,14 @@ $ds-theme-light-background-color-tertiary: $ds-color-core-grey-light;
 $ds-theme-light-background-color-transparent-hover: $ds-color-core-black-opacity-10;
 $ds-theme-light-background-color-transparent-pressed: $ds-color-core-black-opacity-10;
 $ds-theme-light-border-color-feedback-error: $ds-color-core-red-base;
+$ds-theme-light-border-color-feedback-info: $ds-color-core-grey-dark;
 $ds-theme-light-border-color-feedback-success: $ds-color-core-green-base;
 $ds-theme-light-border-color-feedback-warning: $ds-color-core-yellow-base;
 $ds-theme-light-border-color-focus: $ds-color-core-grey-ultra-deep;
 $ds-theme-light-border-color-primary-disabled: $ds-color-core-black-opacity-50;
 $ds-theme-light-border-color-primary-inverse: $ds-color-core-white-base;
 $ds-theme-light-border-color-primary: $ds-color-core-grey-ultra-deep;
-$ds-theme-light-border-color-secondary-disabled: $ds-color-core-black-opacity-50;
+$ds-theme-light-border-color-secondary-disabled: $ds-color-core-black-opacity-10;
 $ds-theme-light-border-color-secondary: $ds-color-core-grey-base;
 $ds-theme-light-border-color-tertiary: $ds-color-core-grey-mid;
 $ds-theme-light-content-color-brand-disabled: $ds-color-core-black-opacity-50;
@@ -107,10 +108,10 @@ $ds-theme-dark-background-color-brand-disabled: $ds-color-core-grey-mid;
 $ds-theme-dark-background-color-brand-hover: $ds-color-core-orange-dark;
 $ds-theme-dark-background-color-brand-pressed: $ds-color-core-orange-dark;
 $ds-theme-dark-background-color-brand: $ds-color-core-orange-base;
-$ds-theme-dark-background-color-feedback-error: $ds-color-core-grey-ultra-deep;
-$ds-theme-dark-background-color-feedback-info: $ds-color-core-grey-ultra-deep;
-$ds-theme-dark-background-color-feedback-success: $ds-color-core-grey-ultra-deep;
-$ds-theme-dark-background-color-feedback-warning: $ds-color-core-grey-ultra-deep;
+$ds-theme-dark-background-color-feedback-error: $ds-color-core-grey-deep;
+$ds-theme-dark-background-color-feedback-info: $ds-color-core-grey-deep;
+$ds-theme-dark-background-color-feedback-success: $ds-color-core-grey-deep;
+$ds-theme-dark-background-color-feedback-warning: $ds-color-core-grey-deep;
 $ds-theme-dark-background-color-primary-disabled: $ds-color-core-black-base;
 $ds-theme-dark-background-color-primary-hover: $ds-color-core-grey-deep;
 $ds-theme-dark-background-color-primary-inverse-disabled: $ds-color-core-grey-mid;
@@ -122,18 +123,19 @@ $ds-theme-dark-background-color-primary: $ds-color-core-black-base;
 $ds-theme-dark-background-color-secondary-disabled: $ds-color-core-grey-ultra-deep;
 $ds-theme-dark-background-color-secondary-inverse: $ds-color-core-grey-light;
 $ds-theme-dark-background-color-secondary: $ds-color-core-grey-ultra-deep;
-$ds-theme-dark-background-color-sustainability: $ds-color-core-grey-ultra-deep;
+$ds-theme-dark-background-color-sustainability: $ds-color-core-grey-deep;
 $ds-theme-dark-background-color-tertiary: $ds-color-core-grey-ultra-deep;
 $ds-theme-dark-background-color-transparent-hover: $ds-color-core-white-opacity-15;
 $ds-theme-dark-background-color-transparent-pressed: $ds-color-core-white-opacity-15;
 $ds-theme-dark-border-color-feedback-error: $ds-color-core-red-base;
+$ds-theme-dark-border-color-feedback-info: $ds-color-core-grey-dark;
 $ds-theme-dark-border-color-feedback-success: $ds-color-core-green-base;
 $ds-theme-dark-border-color-feedback-warning: $ds-color-core-yellow-base;
 $ds-theme-dark-border-color-focus: $ds-color-core-white-base;
 $ds-theme-dark-border-color-primary-disabled: $ds-color-core-white-opacity-50;
 $ds-theme-dark-border-color-primary-inverse: $ds-color-core-grey-ultra-deep;
 $ds-theme-dark-border-color-primary: $ds-color-core-grey-ultra-light;
-$ds-theme-dark-border-color-secondary-disabled: $ds-color-core-white-opacity-50;
+$ds-theme-dark-border-color-secondary-disabled: $ds-color-core-white-opacity-15;
 $ds-theme-dark-border-color-secondary: $ds-color-core-grey-dark;
 $ds-theme-dark-border-color-tertiary: $ds-color-core-grey-deep;
 $ds-theme-dark-content-color-brand-disabled: $ds-color-core-white-opacity-50;

package/styles/scss/lib/_transition.scss

@@ -1,3 +1,4 @@
+@import '_animation.scss';
 /**
  *
  * This mixin provides a concise way to set transitions with a default
@@ -7,20 +8,38 @@
  * motion and adjusts the transition duration accordingly.
  *
  * Example Usage:
- * @include transition(opacity, transform);
+ * @include ds-transition((opacity, transform), '250', 'ease-out');
+ * @include ds-transition(width, $easing-key: 'ease-out');
  */
-@mixin transition($properties...) {
+@mixin ds-transition($properties, $duration-key: '100', $easing-key: 'linear') {
   @if length($properties) == 0 or $properties == null {
-    @error "No properties provided for transition mixin.";
+    @error "[STIHL Design System] - [ds-transition()]: No properties provided for ds-transition() mixin.";
+  }
+
+  $duration: map-get($ds-animation-durations, $duration-key);
+  $easing: map-get($ds-animation-easing-functions, $easing-key);
+
+  @if not map-has-key($ds-animation-durations, $duration-key) {
+    @error "[STIHL Design System] - [ds-transition()]: Duration key '#{$duration-key}' is not available in the ds-transition() mixin.";
+  }
+
+  @if not map-has-key($ds-animation-easing-functions, $easing-key) {
+    @error "[STIHL Design System] - [ds-transition()]: Easing key '#{$easing-key}' is not available in the ds-transition() mixin.";
   }
 
   $transition-values: ();
   @each $prop in $properties {
-    $transition-values: append($transition-values, #{$prop} 0.3s ease, comma);
+    $transition-values: append(
+      $transition-values,
+      #{$prop} #{$duration} #{$easing},
+      comma
+    );
   }
-  transition: $transition-values;
+  & {
+    transition: $transition-values;
 
-  @media (prefers-reduced-motion: reduce) {
-    transition-duration: 0ms;
+    @media (prefers-reduced-motion: reduce) {
+      transition-duration: 0ms;
+    }
   }
 }