@stihl-design-system/components 1.0.0-RC.3 → 1.0.0-RC.31

package/styles/scss/lib/_grid-sidebar.scss

@@ -1,157 +0,0 @@
-@import './_grid-sidebar-sidebar.scss';
-
-@mixin ds-grid-sidebar($is-sidebar-1-open: false, $is-sidebar-2-open: false) {
-  @if $is-sidebar-1-open == false and $is-sidebar-2-open == true {
-    @error "Sidebar 1 cannot be visually closed when sidebar 2 is open";
-  }
-
-  display: grid;
-  --ds-grid-sidebar-gap: 16px;
-  gap: var(--ds-grid-sidebar-gap);
-  min-width: 320px;
-  grid-template-columns:
-    var(--ds-internal-grid-safe-zone)
-    [main-start] repeat(4, minmax(0, 1fr))
-    [main-end] var(--ds-internal-grid-safe-zone);
-  --ds-internal-grid-safe-zone: 0;
-  --ds-grid-span-one-half: span 4;
-  --ds-grid-span-one-third: span 4;
-  --ds-grid-span-two-thirds: span 4;
-  --ds-grid-span-one-quarter: span 2;
-
-  @if $is-sidebar-1-open == false {
-    & > :first-child {
-      @include ds-grid-sidebar-sidebar-1(false);
-    }
-    & > :nth-child(2) {
-      @include ds-grid-sidebar-sidebar-2(false);
-    }
-  } @else if $is-sidebar-1-open == true and $is-sidebar-2-open == false {
-    & > :first-child {
-      @include ds-grid-sidebar-sidebar-1(true);
-    }
-    & > :nth-child(2) {
-      @include ds-grid-sidebar-sidebar-2(false);
-    }
-  } @else if $is-sidebar-1-open == true and $is-sidebar-2-open == true {
-    & > :first-child {
-      @include ds-grid-sidebar-sidebar-1(true);
-    }
-    & > :nth-child(2) {
-      @include ds-grid-sidebar-sidebar-2(true);
-    }
-  }
-
-  @include ds-media-query-min('m') {
-    --ds-grid-sidebar-gap: 24px;
-    gap: var(--ds-grid-sidebar-gap);
-    grid-template-columns:
-      var(--ds-internal-grid-safe-zone)
-      [main-start] repeat(6, minmax(0, 1fr))
-      [main-end] var(--ds-internal-grid-safe-zone);
-    --ds-internal-grid-safe-zone: 9px;
-    --ds-grid-span-one-half: span 3;
-    --ds-grid-span-one-third: span 2;
-    --ds-grid-span-two-thirds: span 4;
-    --ds-grid-span-one-quarter: span 3;
-  }
-
-  @include ds-media-query-min('l') {
-    --ds-grid-sidebar-gap: 0px;
-    gap: var(--ds-grid-sidebar-gap);
-    column-gap: 24px;
-    // The children get a margin-block-end to imitate row-gap behavior
-    // This is counteracted for the last row in the parent
-    margin-block-end: -24px;
-    & > * {
-      margin-block-end: 24px;
-    }
-    @if $is-sidebar-1-open == false {
-      grid-template-columns:
-        [sidebar-1-start] fit-content(64px)
-        [sidebar-1-end]
-        var(--ds-internal-grid-safe-zone-left)
-        [main-start] repeat(6, minmax(0, 1fr))
-        [main-end] var(--ds-internal-grid-safe-zone-right);
-    } @else if $is-sidebar-1-open == true and $is-sidebar-2-open == false {
-      grid-template-columns:
-        [sidebar-1-start] fit-content(264px)
-        [sidebar-1-end]
-        var(--ds-internal-grid-safe-zone-left)
-        [main-start] repeat(6, minmax(0, 1fr))
-        [main-end] var(--ds-internal-grid-safe-zone-right);
-    } @else if $is-sidebar-1-open == true and $is-sidebar-2-open == true {
-      grid-template-columns:
-        [sidebar-1-start] fit-content(264px)
-        [sidebar-1-end sidebar-2-start] fit-content(320px)
-        [sidebar-2-end]
-        var(--ds-internal-grid-safe-zone-left)
-        [main-start] repeat(6, minmax(0, 1fr))
-        [main-end] var(--ds-internal-grid-safe-zone-right);
-    }
-
-    --ds-internal-grid-safe-zone-left: 2px;
-    /**
-     * The safe zone + gap equal to what is called "margin" in the designs.
-     * The "margin" on the right differs ONLY in Figma, based on the status of the sidebar 1 and 2.
-     * HOWEVER, in code, the margins are always the same!
-     * 26 + 24 = 50
-     */
-    --ds-internal-grid-safe-zone-right: 26px;
-
-    --ds-grid-span-one-half: span 3;
-    --ds-grid-span-one-third: span 2;
-    --ds-grid-span-two-thirds: span 4;
-  }
-
-  @include ds-media-query-min('xl') {
-    column-gap: 32px;
-    // The children get a margin-block-end to imitate row-gap behavior
-    // This is counteracted for the last row in the parent
-    margin-block-end: -32px;
-    & > * {
-      margin-block-end: 32px;
-    }
-
-    @if $is-sidebar-1-open == false {
-      grid-template-columns:
-        [sidebar-1-start] fit-content(64px)
-        [sidebar-1-end]
-        var(--ds-internal-grid-safe-zone-left)
-        [main-start] repeat(12, minmax(0, 1fr))
-        [main-end] var(--ds-internal-grid-safe-zone-right);
-    } @else if $is-sidebar-1-open == true and $is-sidebar-2-open == false {
-      grid-template-columns:
-        [sidebar-1-start] fit-content(264px)
-        [sidebar-1-end]
-        var(--ds-internal-grid-safe-zone-left)
-        [main-start] repeat(12, minmax(0, 1fr))
-        [main-end] var(--ds-internal-grid-safe-zone-right);
-    } @else if $is-sidebar-1-open == true and $is-sidebar-2-open == true {
-      grid-template-columns:
-        [sidebar-1-start] fit-content(264px)
-        [sidebar-1-end sidebar-2-start] fit-content(320px)
-        [sidebar-2-end]
-        var(--ds-internal-grid-safe-zone-left)
-        [main-start] repeat(12, minmax(0, 1fr))
-        [main-end] var(--ds-internal-grid-safe-zone-right);
-    }
-
-    --ds-internal-grid-safe-zone-left: 0px;
-    /**
-     * The safe zone + gap equal to what is called "margin" in the designs.
-     * The "margin" on the right differs ONLY in Figma, based on the status of the sidebar 1 and 2.
-     * HOWEVER, in code, the margins are always the same!
-     * 32 + 32 = 64
-     */
-    --ds-internal-grid-safe-zone-right: 32px;
-
-    --ds-grid-span-one-half: span 6;
-    --ds-grid-span-one-third: span 4;
-    --ds-grid-span-two-thirds: span 8;
-  }
-
-  @media (min-width: 2304px) {
-    max-width: 2304px;
-  }
-}

package/styles/scss/lib/_grid.scss

@@ -1,88 +0,0 @@
-@mixin ds-grid {
-  display: grid;
-  --ds-grid-gap: 16px;
-  gap: var(--ds-grid-gap);
-  min-width: 320px;
-  grid-template-columns:
-    [full-start extended-start] var(--ds-internal-grid-safe-zone)
-    [main-start narrow-left-start narrow-center-start] repeat(4, minmax(0, 1fr))
-    [narrow-center-end narrow-left-end main-end] var(
-      --ds-internal-grid-safe-zone
-    )
-    [extended-end full-end];
-  // The safe zone + gap equal to what is called "margin" in the figma designs 0+16 = 16
-  --ds-internal-grid-safe-zone: 0;
-  --ds-grid-span-one-half: span 4;
-  --ds-grid-span-one-third: span 4;
-  --ds-grid-span-two-thirds: span 4;
-  --ds-grid-span-one-quarter: span 2;
-
-  @include ds-media-query-min('m') {
-    --ds-grid-gap: 24px;
-    gap: var(--ds-grid-gap);
-    grid-template-columns:
-      [full-start extended-start] var(--ds-internal-grid-safe-zone)
-      [main-start narrow-left-start narrow-center-start] repeat(
-        6,
-        minmax(0, 1fr)
-      )
-      [narrow-center-end narrow-left-end main-end] var(
-        --ds-internal-grid-safe-zone
-      )
-      [extended-end full-end];
-    // The safe zone + gap equal to what is called "margin" in the figma designs 9+24 = 33
-    --ds-internal-grid-safe-zone: 9px;
-    --ds-grid-span-one-half: span 3;
-    --ds-grid-span-one-third: span 2;
-    --ds-grid-span-two-thirds: span 4;
-    --ds-grid-span-one-quarter: span 3;
-  }
-
-  @include ds-media-query-min('l') {
-    grid-template-columns:
-      [full-start extended-start] var(--ds-internal-grid-safe-zone)
-      [main-start narrow-left-start] repeat(2, minmax(0, 1fr))
-      [narrow-center-start] repeat(6, minmax(0, 1fr))
-      [narrow-left-end] repeat(2, minmax(0, 1fr))
-      [narrow-center-end] repeat(2, minmax(0, 1fr))
-      [main-end] var(--ds-internal-grid-safe-zone)
-      [extended-end full-end];
-    // The safe zone + gap equal to what is called "margin" in the figma designs 26+24 = 50
-    --ds-internal-grid-safe-zone: 26px;
-    --ds-grid-span-one-half: span 6;
-    --ds-grid-span-one-third: span 4;
-    --ds-grid-span-two-thirds: span 8;
-  }
-
-  @include ds-media-query-min('xl') {
-    --ds-grid-gap: 32px;
-    gap: var(--ds-grid-gap);
-    grid-template-columns:
-      [full-start extended-start] var(--ds-internal-grid-safe-zone)
-      [main-start narrow-left-start] repeat(3, minmax(0, 1fr))
-      [narrow-center-start] repeat(3, minmax(0, 1fr))
-      [narrow-left-end] repeat(3, minmax(0, 1fr))
-      [narrow-center-end] repeat(3, minmax(0, 1fr))
-      [main-end] var(--ds-internal-grid-safe-zone)
-      [extended-end full-end];
-    // The safe zone + gap equal to what is called "margin" in the figma designs 32+32 = 64
-    --ds-internal-grid-safe-zone: 32px;
-  }
-
-  @include ds-media-query-min('xxl') {
-    // the calculation here is based on the fact
-    // that we want the main area (main-start till main-end) maximum width to be exactly 1540px
-    // so we have to pick 1584px and divide that by 16
-    grid-template-columns:
-      [full-start] auto
-      [extended-start] var(--ds-internal-grid-safe-zone)
-      [main-start narrow-left-start] repeat(3, minmax(0, calc(1584px / 16)))
-      [narrow-center-start] repeat(3, minmax(0, calc(1584px / 16)))
-      [narrow-left-end] repeat(3, minmax(0, calc(1584px / 16)))
-      [narrow-center-end] repeat(3, minmax(0, calc(1584px / 16)))
-      [main-end] var(--ds-internal-grid-safe-zone)
-      [extended-end]
-      auto [full-end];
-    --ds-internal-grid-safe-zone: 0px;
-  }
-}

package/styles/scss/lib/_heading.scss

@@ -1,66 +0,0 @@
-// Base mixin to define common styles
-@mixin base-heading($fontFamily, $fontSize, $lineHeight) {
-  font-family: #{unquote(
-      $fontFamily + ', Arial Narrow, Arial, Heiti SC, sans-serif'
-    )};
-  font-style: normal;
-  font-variant: normal;
-  font-weight: normal;
-  font-size: $fontSize;
-  line-height: $lineHeight;
-}
-
-@mixin responsive-heading($min, $fontSize, $lineHeight) {
-  @include ds-media-query-min($min: $min) {
-    font-size: $fontSize;
-    line-height: $lineHeight;
-  }
-}
-
-// Mixins for specific heading sizes
-// XL
-@mixin ds-heading-x-large {
-  @include base-heading('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(
-    'STIHL Contraface Digital Display Title',
-    1.625rem,
-    1.2
-  );
-  @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 responsive-heading('l', 1.625rem, 1.2);
-}
-
-@mixin ds-heading-large-uppercase {
-  @include base-heading(
-    'STIHL Contraface Digital Display Title',
-    1.375rem,
-    1.25
-  );
-  @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);
-}
-
-@mixin ds-heading-medium-uppercase {
-  @include base-heading('STIHL Contraface Digital Display Title', 1.25rem, 1.2);
-}
-
-// Small
-@mixin ds-heading-small {
-  @include base-heading('STIHL Contraface Digital Text Bold', 1rem, 1.5);
-}
-@mixin ds-heading-small-uppercase {
-  @include base-heading('STIHL Contraface Digital Display Title', 1rem, 1.5);
-}

package/styles/scss/lib/_helpers.scss

@@ -1,3 +0,0 @@
-@function px-to-rem($pixels, $base-font-size: 16px) {
-  @return #{calc($pixels / $base-font-size)}rem;
-}

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

@@ -1,24 +0,0 @@
-/**
- * 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/_hover.scss

@@ -1,10 +0,0 @@
-/**
- * This mixin provides a utility to wrap styles within a media query specifically
- * targeting devices that support hover. It ensures that hover styles are
- * applied only to non-touch (hover capable) devices.
-*/
-@mixin hover-media-query {
-  @media (hover: hover) {
-    @content;
-  }
-}

package/styles/scss/lib/_link.scss

@@ -1,155 +0,0 @@
-@import '_hover';
-@import '_spacing';
-
-// 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;
-}
-
-// Set the link variant colors
-@mixin link-variant(
-  $content-color,
-  $background-color-hover,
-  $content-color-hover
-) {
-  color: $content-color;
-
-  &:link,
-  &:visited {
-    color: $content-color;
-  }
-
-  @include hover-media-query {
-    &:hover {
-      background-color: $background-color-hover;
-      color: $content-color-hover;
-    }
-  }
-
-  &:active {
-    background-color: $background-color-hover;
-    color: $content-color-hover;
-  }
-}
-
-// Mixin for underlined links (inline link or active standalone link)
-@mixin link-underline {
-  text-decoration-line: underline;
-  text-underline-offset: 2px;
-  text-decoration-thickness: 1px;
-  text-decoration-color: currentColor;
-}
-
-// 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);
-
-  // Variants & themes
-  @if ($variant == 'neutral' and $theme == 'light') {
-    @include link-variant(
-      $link-color,
-      $ds-theme-light-background-color-transparent-hover,
-      $link-color
-    );
-  }
-
-  @if ($variant == 'highlight' and $theme == 'light') {
-    $link-color: $ds-theme-light-content-color-interaction-accent;
-    @include link-variant(
-      $link-color,
-      $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-background-color-transparent-hover,
-      $link-color
-    );
-  }
-
-  @if ($variant == 'highlight' and $theme == 'dark') {
-    $link-color: $ds-theme-dark-content-color-interaction-accent;
-    @include link-variant(
-      $link-color,
-      $ds-theme-dark-background-color-transparent-hover,
-      $link-color
-    );
-  }
-
-  // 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;
-    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 transition(background-color, border-color, color);
-}

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

@@ -1,32 +0,0 @@
-@import '_breakpoints.scss';
-
-@mixin ds-media-query-min($min: null) {
-  @if map-has-key($ds-breakpoints, $min) {
-    @media (min-width: #{map-get($ds-breakpoints, $min)}px) {
-      @content;
-    }
-  } @else {
-    @error "Passed #{$min} breakpoint is not available for used ds-media-query-min() mixin.";
-  }
-}
-
-@mixin ds-media-query-max($max: null) {
-  @if map-has-key($ds-breakpoints, $max) {
-    @media (max-width: #{map-get($ds-breakpoints, $max) - 1}px) {
-      @content;
-    }
-  } @else {
-    @error "Passed #{$max} breakpoint is not available for used ds-media-query-max() mixin.";
-  }
-}
-
-@mixin ds-media-query-min-max($min: null, $max: null) {
-  @if map-has-key($ds-breakpoints, $min) and map-has-key($ds-breakpoints, $max)
-  {
-    @media (min-width: #{map-get($ds-breakpoints, $min)}px) and (max-width: #{map-get($ds-breakpoints, $max) - 1}px) {
-      @content;
-    }
-  } @else {
-    @error "Passed #{$min} and/or #{$max} breakpoint is not available for used ds-media-query-min-max() mixin.";
-  }
-}

package/styles/scss/lib/_spacing.scss

@@ -1,30 +0,0 @@
-$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-16: 16px;
-$ds-spacing-20: 20px;
-$ds-spacing-24: 24px;
-$ds-spacing-32: 32px;
-$ds-spacing-40: 40px;
-$ds-spacing-48: 48px;
-$ds-spacing-56: 56px;
-$ds-spacing-64: 64px;
-$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,67 +0,0 @@
-// Base mixin for text styles
-@mixin base-text($fontFamily, $fontSize, $lineHeight) {
-  font-family: #{unquote(
-      $fontFamily + ', Arial Narrow, Arial, Heiti SC, sans-serif'
-    )};
-  font-style: normal;
-  font-variant: normal;
-  hyphens: manual;
-  overflow-wrap: break-word;
-  font-weight: normal;
-  font-size: $fontSize;
-  line-height: $lineHeight;
-}
-
-// Mixins for specific text sizes
-@mixin ds-text-large {
-  @include base-text('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);
-}
-
-@mixin ds-text-medium {
-  @include base-text('STIHL Contraface Digital Text Regular', 1rem, 1.5);
-}
-
-@mixin ds-text-medium-bold {
-  @include base-text('STIHL Contraface Digital Text Bold', 1rem, 1.5);
-}
-
-@mixin ds-text-small {
-  @include base-text('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);
-}
-
-@mixin ds-text-x-small {
-  @include base-text('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);
-}
-
-@mixin ds-text-xx-small {
-  @include base-text('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);
-}
-
-@mixin ds-utility-medium-bold {
-  @include base-text('STIHL Contraface Digital Text Bold', 1rem, 1.25);
-}
-
-@mixin ds-utility-small {
-  @include base-text('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);
-}