@stihl-design-system/components 1.0.0-RC.11 → 1.0.0-RC.12

package/radio.DTZNJzMU.js

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

package/skiptocontent.DUQWopO4.js

@@ -1,46 +0,0 @@
-"use client";
-import { j as p } from "./chunks/jsx-runtime.C115EyI4.js";
-import { c as k } from "./chunks/index.CvOaL64Y.js";
-import { g as n } from "./chunks/helpers.B1JT5ShS.js";
-import "react";
-import { DSLink as c } from "./link.Clk5_BYp.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",
-  ...r
-}) => {
-  t.startsWith("#") && console.warn(
-    n(
-      "DSSkipToContent",
-      'The targetElementId should not start with a "#" character. Please provide the id of the element you want to skip to.'
-    )
-  ), (t.startsWith("http") || t.startsWith(".")) && console.warn(
-    n(
-      "DSSkipToContent",
-      'The targetElementId should not start with "http" or ".". Please provide the id of the element you want to skip to.'
-    )
-  );
-  const a = k(s.skipToContent, i, {
-    [s.skipToContentDark]: o === "dark"
-  });
-  return /* @__PURE__ */ p.jsx(
-    c,
-    {
-      ...r,
-      className: a,
-      href: `#${t}`,
-      theme: o,
-      children: e
-    }
-  );
-};
-export {
-  f as DSSkipToContent
-};

package/spinner.D-xrotcu.js

@@ -1,58 +0,0 @@
-"use client";
-import { j as r } from "./chunks/jsx-runtime.C115EyI4.js";
-import { c as n } from "./chunks/index.CvOaL64Y.js";
-import { D as _ } from "./chunks/Icon.C2o2seDb.js";
-import './assets/spinner.D_Nnf1ZG.css';const m = "_root_11iwi_76", z = "_root-size-small_11iwi_82", c = "_root-size-medium_11iwi_86", S = "_root-size-large_11iwi_90", d = "_root-size-x-large_11iwi_94", g = "_root-size-inherit_11iwi_98", w = "_rotate_11iwi_1", u = "_screenReaderOnly_11iwi_123", e = {
-  root: m,
-  "root-size-small": "_root-size-small_11iwi_82",
-  rootSizeSmall: z,
-  "root-size-medium": "_root-size-medium_11iwi_86",
-  rootSizeMedium: c,
-  "root-size-large": "_root-size-large_11iwi_90",
-  rootSizeLarge: S,
-  "root-size-x-large": "_root-size-x-large_11iwi_94",
-  rootSizeXLarge: d,
-  "root-size-inherit": "_root-size-inherit_11iwi_98",
-  rootSizeInherit: g,
-  rotate: w,
-  screenReaderOnly: u
-}, L = ({
-  aria: i,
-  className: t,
-  size: o = "small",
-  theme: s = "light",
-  ...a
-}) => {
-  const l = n(e.root, t, {
-    [e.rootSizeSmall]: o === "small",
-    [e.rootSizeMedium]: o === "medium",
-    [e.rootSizeLarge]: o === "large",
-    [e.rootSizeXLarge]: o === "x-large",
-    [e.rootSizeInherit]: o === "inherit"
-  });
-  return /* @__PURE__ */ r.jsxs(
-    "span",
-    {
-      className: l,
-      role: "alert",
-      "aria-live": "assertive",
-      "aria-label": (i == null ? void 0 : i["aria-label"]) || void 0,
-      ...a,
-      children: [
-        /* @__PURE__ */ r.jsx("span", { className: e.screenReaderOnly, children: " " }),
-        /* @__PURE__ */ r.jsx(
-          _,
-          {
-            name: "loading-spinner",
-            theme: s,
-            focusable: "false",
-            "aria-hidden": "true"
-          }
-        )
-      ]
-    }
-  );
-};
-export {
-  L as DSSpinner
-};

package/styles/scss/_index.scss

@@ -1,24 +0,0 @@
-@import 'lib/_a11y.scss';
-@import 'lib/_animation.scss';
-@import 'lib/_breakpoints.scss';
-@import 'lib/_container-query.scss';
-@import 'lib/_focus.scss';
-@import 'lib/_grid.scss';
-@import 'lib/_grid-extended.scss';
-@import 'lib/_grid-full.scss';
-@import 'lib/_grid-main.scss';
-@import 'lib/_grid-narrow.scss';
-@import 'lib/_grid-sidebar.scss';
-@import 'lib/_grid-sidebar-sidebar.scss';
-@import 'lib/_heading.scss';
-@import 'lib/_helpers.scss';
-@import 'lib/_high-contrast.scss';
-@import 'lib/_hover.scss';
-@import 'lib/_link.scss';
-@import 'lib/_media-query.scss';
-@import 'lib/_shadow.scss';
-@import 'lib/_spacing.scss';
-@import 'lib/_spacing-dynamic.scss';
-@import 'lib/_text.scss';
-@import 'lib/_theme.scss';
-@import 'lib/_transition.scss';

package/styles/scss/lib/_a11y.scss

@@ -1,15 +0,0 @@
-// Visually hide an element but keep them available to screen reader and other assistive
-// technology users.
-// https://www.w3.org/WAI/tutorials/forms/labels/#note-on-hiding-elements
-@mixin ds-visually-hidden {
-  border: 0;
-  clip: rect(0 0 0 0);
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  text-indent: -999999px;
-  white-space: nowrap;
-}

package/styles/scss/lib/_animation.scss

@@ -1,21 +0,0 @@
-$ds-animation-duration-100: var(--ds-animation-duration, 100ms);
-$ds-animation-duration-250: var(--ds-animation-duration, 250ms);
-$ds-animation-duration-400: var(--ds-animation-duration, 400ms);
-
-$ds-animation-durations: (
-  '100': $ds-animation-duration-100,
-  '250': $ds-animation-duration-250,
-  '400': $ds-animation-duration-400,
-);
-
-$ds-motion-functional-linear: linear;
-$ds-motion-functional-ease-in: cubic-bezier(0.5, 0, 1, 1);
-$ds-motion-functional-ease-out: cubic-bezier(0, 0, 0.5, 1);
-$ds-motion-functional-ease-in-out: cubic-bezier(0.5, 0, 0.5, 1);
-
-$ds-animation-easing-functions: (
-  'linear': $ds-motion-functional-linear,
-  'ease-in': $ds-motion-functional-ease-in,
-  'ease-out': $ds-motion-functional-ease-out,
-  'ease-in-out': $ds-motion-functional-ease-in-out,
-);

package/styles/scss/lib/_breakpoints.scss

@@ -1,15 +0,0 @@
-$ds-breakpoint-base: 0;
-$ds-breakpoint-s: 320;
-$ds-breakpoint-m: 768;
-$ds-breakpoint-l: 1024;
-$ds-breakpoint-xl: 1536;
-$ds-breakpoint-xxl: 1668;
-
-$ds-breakpoints: (
-  'base': $ds-breakpoint-base,
-  's': $ds-breakpoint-s,
-  'm': $ds-breakpoint-m,
-  'l': $ds-breakpoint-l,
-  'xl': $ds-breakpoint-xl,
-  'xxl': $ds-breakpoint-xxl,
-);

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

@@ -1,58 +0,0 @@
-@import '_breakpoints.scss';
-
-@mixin ds-container-query-min($min: null, $container-name: null) {
-  @if map-has-key($ds-breakpoints, $min) {
-    $value: #{map-get($ds-breakpoints, $min)}px;
-    @if $container-name {
-      @container #{$container-name} (min-width: #{$value}) {
-        @content;
-      }
-    } @else {
-      @container (min-width: #{$value}) {
-        @content;
-      }
-    }
-  } @else {
-    @error "[STIHL Design System] - [ds-container-query-min()]: Passed '#{$min}' breakpoint is not available in ds-container-query-min() mixin.";
-  }
-}
-
-@mixin ds-container-query-max($max: null, $container-name: null) {
-  @if map-has-key($ds-breakpoints, $max) {
-    $value: #{map-get($ds-breakpoints, $max)}px;
-    @if $container-name {
-      @container #{$container-name} (width < #{$value}) {
-        @content;
-      }
-    } @else {
-      @container (width < #{$value}) {
-        @content;
-      }
-    }
-  } @else {
-    @error "[STIHL Design System] - [ds-container-query-max()]: Passed '#{$max}' breakpoint is not available in ds-container-query-max() mixin.";
-  }
-}
-
-@mixin ds-container-query-min-max(
-  $min: null,
-  $max: null,
-  $container-name: null
-) {
-  @if map-has-key($ds-breakpoints, $min) and map-has-key($ds-breakpoints, $max)
-  {
-    $min-value: #{map-get($ds-breakpoints, $min)}px;
-    $max-value: #{map-get($ds-breakpoints, $max)}px;
-    @if $container-name {
-      @container #{$container-name} (min-width: #{$min-value}) and (width < #{$max-value}) {
-        @content;
-      }
-    } @else {
-      @container (min-width: #{$min-value}) and (width < #{$max-value}) {
-        @content;
-      }
-    }
-  } @else {
-    @error "[STIHL Design System] - [ds-container-query-min-max()]: Passed '#{$min}' and/or '#{$max}' breakpoint is not available in ds-container-query-min-max() mixin.";
-  }
-}

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

@@ -1,11 +0,0 @@
-$ds-grid-extended-column-start: extended-start;
-$ds-grid-extended-column-end: extended-end;
-
-@mixin ds-grid-extended-column {
-  grid-column: $ds-grid-extended-column-start / $ds-grid-extended-column-end;
-
-  @media (min-width: 1668px) {
-    margin-inline-start: -32px;
-    margin-inline-end: -32px;
-  }
-}

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

@@ -1,6 +0,0 @@
-$ds-grid-full-column-start: full-start;
-$ds-grid-full-column-end: full-end;
-
-@mixin ds-grid-full-column {
-  grid-column: $ds-grid-full-column-start / $ds-grid-full-column-end;
-}

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

@@ -1,117 +0,0 @@
-$ds-grid-main-column-start: main-start;
-$ds-grid-main-column-end: main-end;
-$ds-grid-sidebar-main-column-start: $ds-grid-main-column-start;
-$ds-grid-sidebar-main-column-end: $ds-grid-main-column-end;
-
-@mixin ds-grid-main-column {
-  grid-column: $ds-grid-main-column-start / $ds-grid-main-column-end;
-}
-
-@mixin ds-grid-sidebar-main-column {
-  @include ds-grid-main-column;
-}
-
-// Half
-@mixin ds-grid-span-first-half {
-  grid-column: $ds-grid-main-column-start / $ds-grid-span-one-half;
-}
-@mixin ds-grid-span-second-half {
-  grid-column: $ds-grid-span-one-half / $ds-grid-main-column-end;
-}
-
-@mixin ds-grid-sidebar-span-first-half {
-  @include ds-grid-span-first-half;
-}
-@mixin ds-grid-sidebar-span-second-half {
-  @include ds-grid-span-second-half;
-}
-
-// Third
-@mixin ds-grid-span-first-third {
-  grid-column: $ds-grid-main-column-start / $ds-grid-main-column-end;
-  @include ds-media-query-min('m') {
-    grid-column: $ds-grid-main-column-start / $ds-grid-span-one-third;
-  }
-}
-@mixin ds-grid-span-one-third {
-  grid-column: $ds-grid-main-column-start / $ds-grid-main-column-end;
-  @include ds-media-query-min('m') {
-    grid-column: $ds-grid-span-one-third;
-  }
-}
-
-@mixin ds-grid-sidebar-span-first-third {
-  @include ds-grid-span-first-third;
-}
-@mixin ds-grid-sidebar-span-one-third {
-  @include ds-grid-span-one-third;
-}
-
-// Two Thirds
-@mixin ds-grid-span-first-two-thirds {
-  grid-column: $ds-grid-main-column-start / $ds-grid-main-column-end;
-  @include ds-media-query-min('m') {
-    grid-column: $ds-grid-main-column-start / $ds-grid-span-two-thirds;
-  }
-}
-@mixin ds-grid-span-two-thirds {
-  grid-column: $ds-grid-main-column-start / $ds-grid-main-column-end;
-  @include ds-media-query-min('m') {
-    grid-column: $ds-grid-span-two-thirds / $ds-grid-main-column-end;
-  }
-}
-
-@mixin ds-grid-sidebar-span-first-two-thirds {
-  @include ds-grid-span-first-two-thirds;
-}
-@mixin ds-grid-sidebar-span-two-thirds {
-  @include ds-grid-span-two-thirds;
-}
-
-// Quarter
-@mixin ds-grid-span-first-quarter {
-  grid-column: $ds-grid-main-column-start / $ds-grid-span-one-quarter;
-}
-@mixin ds-grid-span-one-quarter {
-  grid-column: $ds-grid-span-one-quarter;
-  // one quarter on viewports smaller than xl should behave like "first" quarter by starting a new row on "overflow":
-  // first-quarter  one-quarter
-  // one-quarter    one-quarter
-  &:nth-of-type(odd) {
-    grid-column: $ds-grid-main-column-start / $ds-grid-span-one-quarter;
-  }
-  @include ds-media-query-min('l') {
-    &:nth-of-type(odd) {
-      grid-column: $ds-grid-span-one-quarter;
-    }
-  }
-}
-
-@mixin ds-grid-sidebar-span-first-quarter {
-  @include ds-grid-span-first-quarter;
-}
-
-@mixin ds-grid-sidebar-span-one-quarter {
-  grid-column: $ds-grid-span-one-quarter;
-  // one quarter on viewports smaller than xl should behave like "first" quarter by starting a new row on "overflow":
-  // first-quarter  one-quarter
-  // one-quarter    one-quarter
-  &:nth-of-type(odd) {
-    grid-column: $ds-grid-main-column-start / $ds-grid-span-one-quarter;
-  }
-  @include ds-media-query-min('xl') {
-    &:nth-of-type(odd) {
-      grid-column: $ds-grid-span-one-quarter;
-    }
-  }
-}
-
-$ds-grid-span-one-half: var(--ds-grid-span-one-half);
-$ds-grid-span-one-third: var(--ds-grid-span-one-third);
-$ds-grid-span-two-thirds: var(--ds-grid-span-two-thirds);
-$ds-grid-span-one-quarter: var(--ds-grid-span-one-quarter);
-
-$ds-grid-sidebar-span-one-half: $ds-grid-span-one-half;
-$ds-grid-sidebar-span-one-third: $ds-grid-span-one-third;
-$ds-grid-sidebar-span-two-thirds: $ds-grid-span-two-thirds;
-$ds-grid-sidebar-span-one-quarter: $ds-grid-span-one-quarter;

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

@@ -1,16 +0,0 @@
-// The max-width of the narrow content center/left area in our grid.
-$ds-grid-narrow-max-width: 948px;
-$ds-grid-narrow-left-column-start: narrow-left-start;
-$ds-grid-narrow-left-column-end: narrow-left-end;
-$ds-grid-narrow-center-column-start: narrow-center-start;
-$ds-grid-narrow-center-column-end: narrow-center-end;
-
-@mixin ds-grid-narrow-left-column {
-  grid-column: $ds-grid-narrow-left-column-start /
-    $ds-grid-narrow-left-column-end;
-}
-
-@mixin ds-grid-narrow-center-column {
-  grid-column: $ds-grid-narrow-center-column-start /
-    $ds-grid-narrow-center-column-end;
-}

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

@@ -1,50 +0,0 @@
-$ds-grid-sidebar-sidebar-1-column-start: sidebar-1-start;
-$ds-grid-sidebar-sidebar-1-column-end: sidebar-1-end;
-$ds-grid-sidebar-sidebar-2-column-start: sidebar-2-start;
-$ds-grid-sidebar-sidebar-2-column-end: sidebar-2-end;
-
-// Sidebar 1
-@mixin ds-grid-sidebar-sidebar-1($is-open: false) {
-  display: none;
-  @include ds-media-query-min('l') {
-    display: unset;
-    // This is a hack for implicit grid spanning a row from 1 till -1
-    // Using it leads us to not being able to use the row-gap property and requires us to use margins instead
-    // https://stackoverflow.com/a/49076465/2346207
-    // https://stackoverflow.com/a/56876772/2346207
-    grid-row: span 300;
-    grid-column: $ds-grid-sidebar-sidebar-1-column-start /
-      $ds-grid-sidebar-sidebar-1-column-end;
-    margin-block-end: 0;
-    @if ($is-open == true) {
-      width: 264px;
-      max-width: 264px;
-    } @else {
-      width: 64px;
-      max-width: 64px;
-    }
-  }
-}
-// Sidebar 2
-@mixin ds-grid-sidebar-sidebar-2($is-open: false) {
-  display: none;
-  @include ds-media-query-min('l') {
-    // This is a hack for implicit grid spanning a row from 1 till -1
-    // Using it leads us to not being able to use the row-gap property and requires us to use margins instead
-    // https://stackoverflow.com/a/49076465/2346207
-    // https://stackoverflow.com/a/56876772/2346207
-    grid-row: span 300;
-    margin-block-end: 0;
-    @if ($is-open == true) {
-      grid-column: $ds-grid-sidebar-sidebar-2-column-start /
-        $ds-grid-sidebar-sidebar-2-column-end;
-      display: unset;
-      width: 320px;
-      max-width: 320px;
-      margin-inline-start: -24px;
-    }
-  }
-  @media (min-width: 1535px) {
-    margin-inline-start: -32px;
-  }
-}

package/styles/scss/lib/_heading.scss

@@ -1,107 +0,0 @@
-// Base mixin to define common styles
-@mixin base-heading($fontFamily, $fontSize, $lineHeight) {
-  font-family: #{unquote(
-      $fontFamily +
-        ', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif'
-    )};
-  font-style: normal;
-  font-variant: normal;
-  font-weight: normal;
-  font-size: $fontSize;
-  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;
-    line-height: $lineHeight;
-  }
-}
-
-// Mixins for specific heading sizes
-// XL
-@mixin ds-heading-x-large {
-  @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-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-bold(
-    'STIHL Contraface Digital Text Bold',
-    1.25rem,
-    1.2
-  );
-}
-
-@mixin ds-heading-medium-uppercase {
-  @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-bold('STIHL Contraface Digital Text Bold', 1rem, 1.5);
-}
-
-@mixin ds-heading-small-uppercase {
-  @include base-heading-display-title(
-    'STIHL Contraface Digital Display Title',
-    1rem,
-    1.5
-  );
-  text-transform: uppercase;
-}

package/styles/scss/lib/_helpers.scss

@@ -1,15 +0,0 @@
-@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;
-}