@stihl-design-system/components 1.0.0-RC.0

package/styles/scss/lib/_focus.scss

@@ -0,0 +1,61 @@
+@import '_theme';
+
+@mixin outline($theme, $offset, $thickness: 2px) {
+  outline: $thickness solid;
+  outline-color: if(
+    $theme == 'light',
+    $ds-theme-light-border-color-focus,
+    $ds-theme-dark-border-color-focus
+  );
+  outline-offset: $offset;
+
+  @media screen and (forced-colors: active) {
+    forced-color-adjust: auto;
+    outline-color: Highlight;
+  }
+}
+
+// Read more here: https://www.tpgi.com/focus-visible-and-backwards-compatibility/
+@mixin ds-focus($theme: 'light', $offset: 2px, $thickness: 2px) {
+  &:focus {
+    @include outline($theme, $offset, $thickness);
+  }
+  @supports selector(:focus-visible) {
+    &:focus {
+      /* revert all the above focus styles */
+      outline: revert;
+      outline-offset: revert;
+    }
+    &:focus-visible {
+      /* and then reapply the styles here instead */
+      @include outline($theme, $offset, $thickness);
+    }
+  }
+}
+
+/**
+* Adds focus to the before pseudo element, removing the original focus behavior on the parent element
+*/
+@mixin ds-focus-pseudo($theme: 'light', $offset: 2px, $thickness: 2px) {
+  // remove focus from actual element
+  &:focus,
+  &:focus-visible {
+    outline: none;
+  }
+
+  &:focus::before {
+    @include outline($theme, $offset, $thickness);
+  }
+
+  @supports selector(:focus-visible) {
+    &:focus::before {
+      /* revert all the above focus styles */
+      outline: revert;
+      outline-offset: revert;
+    }
+    &:focus-visible::before {
+      /* and then reapply the styles here instead */
+      @include outline($theme, $offset, $thickness);
+    }
+  }
+}

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

@@ -0,0 +1,11 @@
+$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-left: -32px;
+    margin-right: -32px;
+  }
+}

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

@@ -0,0 +1,6 @@
+$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

@@ -0,0 +1,117 @@
+$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

@@ -0,0 +1,14 @@
+$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

@@ -0,0 +1,48 @@
+$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;
+    @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;
+    @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-left: -24px;
+    }
+  }
+  @media (min-width: 1535px) {
+    margin-left: -32px;
+  }
+}

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

@@ -0,0 +1,174 @@
+@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;
+  box-sizing: content-box;
+  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);
+    }
+  }
+
+  @media (min-width: 768px) {
+    --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;
+  }
+
+  @media (min-width: 1024px) {
+    --ds-grid-sidebar-gap: 0px;
+    gap: var(--ds-grid-sidebar-gap);
+    column-gap: 24px;
+    // The children get a margin-bottom to imitate row-gap behavior
+    // This is counteracted for the last row in the parent
+    margin-bottom: -24px;
+    & > * {
+      margin-bottom: 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);
+      /* The safe zone + gap equal to what is called "margin" in the designs,
+       * the "margin" on the right differs based on the status of the sidebar 1 and 2
+       * 28 + 24 = 52
+       */
+      --ds-internal-grid-safe-zone-right: 28px;
+    } @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);
+      /* The safe zone + gap equal to what is called "margin" in the designs,
+       * the "margin" on the right differs based on the status of the sidebar 1 and 2
+       * 26 + 24 = 50
+       */
+      --ds-internal-grid-safe-zone-right: 26px;
+    } @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);
+      /* The safe zone + gap equal to what is called "margin" in the designs,
+       * the "margin" on the right differs based on the status of the sidebar 1 and 2
+       * 30 + 24 = 54
+       */
+      --ds-internal-grid-safe-zone-right: 30px;
+    }
+
+    --ds-internal-grid-safe-zone-left: 2px;
+
+    --ds-grid-span-one-half: span 3;
+    --ds-grid-span-one-third: span 2;
+    --ds-grid-span-two-thirds: span 4;
+  }
+
+  @media (min-width: 1536px) {
+    column-gap: 32px;
+    // The children get a margin-bottom to imitate row-gap behavior
+    // This is counteracted for the last row in the parent
+    margin-bottom: -32px;
+    & > * {
+      margin-bottom: 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);
+      /* The safe zone + gap equal to what is called "margin" in the designs,
+       * the "margin" on the right differs based on the status of the sidebar 1 and 2
+       * 40 + 32 = 72
+       */
+      --ds-internal-grid-safe-zone-right: 40px;
+    } @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);
+      /* The safe zone + gap equal to what is called "margin" in the designs,
+       * the "margin" on the right differs based on the status of the sidebar 1 and 2
+       * 32 + 32 = 64
+       */
+      --ds-internal-grid-safe-zone-right: 32px;
+    } @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);
+      /* The safe zone + gap equal to what is called "margin" in the designs,
+       * the "margin" on the right differs based on the status of the sidebar 1 and 2
+       * 36 + 32 = 68
+       */
+      --ds-internal-grid-safe-zone-right: 36px;
+    }
+
+    --ds-internal-grid-safe-zone-left: 0px;
+
+    --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

@@ -0,0 +1,86 @@
+@mixin ds-grid {
+  display: grid;
+  --ds-grid-gap: 16px;
+  gap: var(--ds-grid-gap);
+  min-width: 320px;
+  box-sizing: content-box;
+  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 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;
+
+  @media (min-width: 768px) {
+    --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 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;
+  }
+
+  @media (min-width: 1024px) {
+    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 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;
+  }
+
+  @media (min-width: 1536px) {
+    --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 designs 32+32 = 64
+    --ds-internal-grid-safe-zone: 32px;
+  }
+
+  @media (min-width: 1668px) {
+    grid-template-columns:
+      [full-start] auto
+      [extended-start] var(--ds-internal-grid-safe-zone)
+      [main-start narrow-left-start] repeat(3, minmax(0, calc(1668px / 16)))
+      [narrow-center-start] repeat(3, minmax(0, calc(1668px / 16)))
+      [narrow-left-end] repeat(3, minmax(0, calc(1668px / 16)))
+      [narrow-center-end] repeat(3, minmax(0, calc(1668px / 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

@@ -0,0 +1,45 @@
+// 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
+@mixin ds-heading-x-large {
+  @include base-heading('STIHL Contraface Display Title', 1.625rem, 1.2);
+  @include responsive-heading('l', 1.875rem, 1.25);
+}
+
+@mixin ds-heading-large {
+  @include base-heading('STIHL Contraface Display Title', 1.375rem, 1.25);
+  @include responsive-heading('l', 1.625rem, 1.2);
+}
+
+@mixin ds-heading-medium {
+  @include base-heading('STIHL Contraface Text Bold', 1.25rem, 1.2);
+}
+
+@mixin ds-heading-medium-uppercase {
+  @include base-heading('STIHL Contraface Display Title', 1.25rem, 1.2);
+}
+
+@mixin ds-heading-small {
+  @include base-heading('STIHL Contraface Text Bold', 1rem, 1.5);
+}
+
+@mixin ds-heading-small-uppercase {
+  @include base-heading('STIHL Contraface Display Title', 1rem, 1.5);
+}

package/styles/scss/lib/_helpers.scss

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

package/styles/scss/lib/_hover.scss

@@ -0,0 +1,10 @@
+/**
+ * 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;
+  }
+}