@stihl-design-system/components 1.0.0-RC.7 → 1.0.0-RC.9

package/radio.CWGJtmKl.js

@@ -0,0 +1,115 @@
+"use client";
+import { j as i } from "./chunks/jsx-runtime.C115EyI4.js";
+import { c as _ } from "./chunks/index.CvOaL64Y.js";
+import { forwardRef as $, useRef as y, useState as E, useEffect as L, useCallback as O } from "react";
+import { u as P } from "./chunks/useBreakpoint.5xBNDiCf.js";
+import './assets/radio.9kpIO3HC.css';const C = (n) => n.replace(/\s+/g, ""), U = "_radio-root_o7n7v_76", q = "_radio-root--disabled_o7n7v_97", z = "_radio-root--with-custom-area_o7n7v_100", F = "_radio_o7n7v_76", G = "_dot_o7n7v_121", J = "_radio--invalid_o7n7v_145", K = "_label_o7n7v_150", M = "_label--bold_o7n7v_165", Q = "_label--hidden_o7n7v_177", T = "_label--with-custom-area_o7n7v_189", X = "_custom-area_o7n7v_193", Y = "_hint_o7n7v_201", Z = "_hint--visible_o7n7v_225", oo = "_hint--unchecked-hidden_o7n7v_229", eo = "_hint--hidden_o7n7v_234", to = "_input_o7n7v_247", o = {
+  "radio-root": "_radio-root_o7n7v_76",
+  radioRoot: U,
+  "radio-root--disabled": "_radio-root--disabled_o7n7v_97",
+  radioRootDisabled: q,
+  "radio-root--with-custom-area": "_radio-root--with-custom-area_o7n7v_100",
+  radioRootWithCustomArea: z,
+  radio: F,
+  dot: G,
+  "radio--invalid": "_radio--invalid_o7n7v_145",
+  radioInvalid: J,
+  label: K,
+  "label--bold": "_label--bold_o7n7v_165",
+  labelBold: M,
+  "label--hidden": "_label--hidden_o7n7v_177",
+  labelHidden: Q,
+  "label--with-custom-area": "_label--with-custom-area_o7n7v_189",
+  labelWithCustomArea: T,
+  "custom-area": "_custom-area_o7n7v_193",
+  customArea: X,
+  hint: Y,
+  "hint--visible": "_hint--visible_o7n7v_225",
+  hintVisible: Z,
+  "hint--unchecked-hidden": "_hint--unchecked-hidden_o7n7v_229",
+  hintUncheckedHidden: oo,
+  "hint--hidden": "_hint--hidden_o7n7v_234",
+  hintHidden: eo,
+  input: to
+}, io = $(
+  ({
+    label: n,
+    name: v,
+    value: b,
+    checked: m,
+    className: R,
+    customArea: a,
+    defaultChecked: x = !1,
+    disabled: s = !1,
+    hideLabel: k = !1,
+    hint: l,
+    invalid: j = !1,
+    isBold: N = !1,
+    hideUncheckedHint: r = !1,
+    onChange: h,
+    ...g
+  }, d) => {
+    const H = y(null), e = y(null), [w, D] = E(x), u = m !== void 0, c = u ? m : w;
+    L(() => {
+      e.current && r && ((e.current.style.height === "0px" || e.current.style.height === "") && c ? (e.current.style.height = `${e.current.scrollHeight}px`, e.current.style.opacity = "1") : (e.current.style.opacity = "0", e.current.style.height = "0px"));
+    }, [e, c]);
+    const f = P(k), A = _(
+      o.radioRoot,
+      {
+        [o.radioRootDisabled]: s,
+        [o.radioRootWithCustomArea]: !!a
+      },
+      R
+    ), W = _(o.label, {
+      [o.labelBold]: N,
+      // hide label only visually to keep them available for assistive technologies
+      [o.labelHidden]: f,
+      [o.labelWithCustomArea]: !!a
+    }), B = () => !r && l ? !0 : !!(r && l && c), V = _(o.hint, {
+      [o.hintHidden]: f,
+      [o.hintUncheckedHidden]: r,
+      [o.hintVisible]: B()
+    }), I = _(o.radio, {
+      [o.radioInvalid]: j
+    }), S = O(
+      (t) => {
+        if (s) {
+          t.preventDefault();
+          return;
+        }
+        u || D(t.target.checked), h && h(t);
+      },
+      [s, u, h]
+    ), p = l ? `${C(v)}-${C(b)}-description` : void 0;
+    return /* @__PURE__ */ i.jsxs("label", { className: A, children: [
+      /* @__PURE__ */ i.jsx(
+        "input",
+        {
+          type: "radio",
+          value: b,
+          name: v,
+          className: o.input,
+          ref: (t) => {
+            typeof d == "function" ? d(t) : d !== null && (d.current = t), H.current = t;
+          },
+          onChange: S,
+          ...g,
+          disabled: s,
+          checked: c,
+          "aria-label": typeof n == "string" ? n : void 0,
+          "aria-describedby": p
+        }
+      ),
+      /* @__PURE__ */ i.jsx("span", { className: I, children: /* @__PURE__ */ i.jsx("div", { className: o.dot }) }),
+      /* @__PURE__ */ i.jsxs("span", { className: W, children: [
+        n,
+        a && /* @__PURE__ */ i.jsx("div", { className: o.customArea, children: a }),
+        /* @__PURE__ */ i.jsx("span", { id: p, className: V, ref: e, children: l })
+      ] })
+    ] });
+  }
+);
+io.displayName = "DSRadio";
+export {
+  io as DSRadio
+};

package/{radiogroup.CiENWRos.js → radiogroup.FfK4DLsV.js}

@@ -2,10 +2,10 @@
 import "./chunks/jsx-runtime.C115EyI4.js";
 import "./chunks/index.CvOaL64Y.js";
 import "react";
-import "./chunks/Fieldset.B1vsrHNv.js";
-import "./radio.epf54-sG.js";
+import "./chunks/Fieldset.P09LInkT.js";
+import "./radio.CWGJtmKl.js";
 import "./chunks/RadioGroup.module.BBZwHDjW.js";
-import { D as s } from "./chunks/RadioGroup.BO4pbAJw.js";
+import { D as s } from "./chunks/RadioGroup.B5jRveyI.js";
 export {
   s as DSRadioGroup
 };

package/{select.DLYav8gw.js → select.BEuTuEFZ.js}

@@ -3,10 +3,10 @@ import "./chunks/jsx-runtime.C115EyI4.js";
 import "./chunks/index.CvOaL64Y.js";
 import "react";
 import "./chunks/useBreakpoint.5xBNDiCf.js";
-import "./asterisk.Cjbk-xZi.js";
+import "./asterisk.DDn-yX4P.js";
 import "./chunks/Icon.n4XZrQ4N.js";
-import "./systemfeedback.CUWch42u.js";
-import { D as s } from "./chunks/Select.COdS787F.js";
+import "./systemfeedback._8gatmgR.js";
+import { D as s } from "./chunks/Select.Cl2eJR1z.js";
 export {
   s as DSSelect
 };

package/{skiptocontent._YZRKxnc.js → skiptocontent.fP4SOp-p.js}

@@ -1,19 +1,20 @@
 "use client";
-import { j as a } from "./chunks/jsx-runtime.C115EyI4.js";
+import { j as p } from "./chunks/jsx-runtime.C115EyI4.js";
 import { c as k } from "./chunks/index.CvOaL64Y.js";
-import { DSLink as p } from "./link.SAcKvzJ3.js";
 import { g as n } from "./chunks/helpers.B1JT5ShS.js";
 import "react";
-import './assets/skiptocontent.DGVJ77cj.css';const c = "_skip-to-content_4ockd_76", h = "_skip-to-content--dark_4ockd_83", s = {
-  "skip-to-content": "_skip-to-content_4ockd_76",
-  skipToContent: c,
-  "skip-to-content--dark": "_skip-to-content--dark_4ockd_83",
-  skipToContentDark: h
-}, C = ({
+import { DSLink as c } from "./link.KZaBufPM.js";
+import './assets/skiptocontent.CHcqLS7S.css';const h = "_skip-to-content_cxg2l_76", l = "_skip-to-content--dark_cxg2l_83", s = {
+  "skip-to-content": "_skip-to-content_cxg2l_76",
+  skipToContent: h,
+  "skip-to-content--dark": "_skip-to-content--dark_cxg2l_83",
+  skipToContentDark: l
+}, f = ({
   children: e = "Skip to main content",
   className: i,
   targetElementId: t = "main",
-  theme: o = "light"
+  theme: o = "light",
+  ...r
 }) => {
   t.startsWith("#") && console.warn(
     n(
@@ -26,13 +27,14 @@ import './assets/skiptocontent.DGVJ77cj.css';const c = "_skip-to-content_4ockd_7
       'The targetElementId should not start with "http" or ".". Please provide the id of the element you want to skip to.'
     )
   );
-  const r = k(s.skipToContent, i, {
+  const a = k(s.skipToContent, i, {
     [s.skipToContentDark]: o === "dark"
   });
-  return /* @__PURE__ */ a.jsx(
-    p,
+  return /* @__PURE__ */ p.jsx(
+    c,
     {
-      className: r,
+      ...r,
+      className: a,
       href: `#${t}`,
       theme: o,
       children: e
@@ -40,5 +42,5 @@ import './assets/skiptocontent.DGVJ77cj.css';const c = "_skip-to-content_4ockd_7
   );
 };
 export {
-  C as DSSkipToContent
+  f as DSSkipToContent
 };

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;
@@ -20,47 +36,72 @@
 // Mixins for specific heading sizes
 // XL
 @mixin ds-heading-x-large {
-  @include base-heading('STIHL Contraface Digital Text Bold', 1.625rem, 1.2);
+  @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(
+  @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('STIHL Contraface Digital Text Bold', 1.375rem, 1.25);
+  @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(
+  @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/_link.scss

@@ -1,24 +1,17 @@
+@import '_helpers';
 @import '_hover';
-@import '_transition';
 @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;
@@ -29,6 +22,11 @@
     color: $content-color;
   }
 
+  &:active {
+    background-color: $background-color-hover;
+    color: $content-color-hover;
+  }
+
   @include hover-media-query {
     &:hover {
       background-color: $background-color-hover;
@@ -36,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;
@@ -51,112 +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-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 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-inline-start: 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;
-      height: fit-content;
-      gap: $ds-spacing-6;
-      padding-inline-end: $ds-spacing-4;
-      padding-inline-start: $ds-spacing-4;
-      padding-block-start: $ds-spacing-2;
-      padding-block-end: $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 ds-transition((background-color, border-color, color));
 }

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,56 +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('STIHL Contraface Digital Text Bold', 0.875rem, 1.14);
+  @include base-text-bold('STIHL Contraface Digital Text Bold', 0.875rem, 1.14);
 }