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

package/styles/scss/ds/lib/ds-internal/_spacing-dynamic.scss

@@ -0,0 +1,53 @@
+@use '../spacing.scss' as *;
+
+
+$spacing-dynamic-values: (
+  'xs': (
+    'base': $spacing-16,
+    's': $spacing-16,
+    'm': $spacing-24,
+    'l': $spacing-24,
+    'xl': $spacing-32,
+    'xxl': $spacing-32,
+  ),
+  's': (
+    'base': $spacing-24,
+    's': $spacing-24,
+    'm': $spacing-32,
+    'l': $spacing-32,
+    'xl': $spacing-40,
+    'xxl': $spacing-40,
+  ),
+  'm': (
+    'base': $spacing-32,
+    's': $spacing-32,
+    'm': $spacing-40,
+    'l': $spacing-40,
+    'xl': $spacing-48,
+    'xxl': $spacing-48,
+  ),
+  'l': (
+    'base': $spacing-40,
+    's': $spacing-40,
+    'm': $spacing-48,
+    'l': $spacing-48,
+    'xl': $spacing-56,
+    'xxl': $spacing-56,
+  ),
+  'xl': (
+    'base': $spacing-56,
+    's': $spacing-56,
+    'm': $spacing-64,
+    'l': $spacing-64,
+    'xl': $spacing-80,
+    'xxl': $spacing-80,
+  ),
+  'xxl': (
+    'base': $spacing-80,
+    's': $spacing-80,
+    'm': $spacing-96,
+    'l': $spacing-96,
+    'xl': $spacing-128,
+    'xxl': $spacing-128,
+  ),
+);

package/styles/scss/ds/lib/ds-internal/_text.scss

@@ -0,0 +1,30 @@
+@use 'sass:string';
+
+
+@mixin base-text($fontFamily, $fontSize, $lineHeight) {
+  font-family: #{string.unquote(
+      $fontFamily +
+        ', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif'
+    )};
+  font-style: normal;
+  font-variant: normal;
+  hyphens: manual;
+  overflow-wrap: break-word;
+  font-weight: normal;
+  font-size: $fontSize;
+  line-height: $lineHeight;
+}
+
+
+@mixin base-text-regular($fontFamily, $fontSize, $lineHeight) {
+  @include base-text($fontFamily, $fontSize, $lineHeight);
+  
+  font-size-adjust: 0.414;
+}
+
+
+@mixin base-text-bold($fontFamily, $fontSize, $lineHeight) {
+  @include base-text($fontFamily, $fontSize, $lineHeight);
+  
+  font-size-adjust: 0.426;
+}

package/styles/scss/ds/lib/grid-extended.scss

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

package/styles/scss/ds/lib/grid-full.scss

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

package/styles/scss/ds/lib/grid-main.scss

@@ -0,0 +1,119 @@
+@use 'media-query' as *;
+
+$grid-main-column-start: main-start;
+$grid-main-column-end: main-end;
+$grid-sidebar-main-column-start: $grid-main-column-start;
+$grid-sidebar-main-column-end: $grid-main-column-end;
+
+@mixin grid-main-column {
+  grid-column: $grid-main-column-start / $grid-main-column-end;
+}
+
+@mixin grid-sidebar-main-column {
+  @include grid-main-column;
+}
+
+
+@mixin grid-span-first-half {
+  grid-column: $grid-main-column-start / $grid-span-one-half;
+}
+@mixin grid-span-second-half {
+  grid-column: $grid-span-one-half / $grid-main-column-end;
+}
+
+@mixin grid-sidebar-span-first-half {
+  @include grid-span-first-half;
+}
+@mixin grid-sidebar-span-second-half {
+  @include grid-span-second-half;
+}
+
+
+@mixin grid-span-first-third {
+  grid-column: $grid-main-column-start / $grid-main-column-end;
+  @include media-query-min('m') {
+    grid-column: $grid-main-column-start / $grid-span-one-third;
+  }
+}
+@mixin grid-span-one-third {
+  grid-column: $grid-main-column-start / $grid-main-column-end;
+  @include media-query-min('m') {
+    grid-column: $grid-span-one-third;
+  }
+}
+
+@mixin grid-sidebar-span-first-third {
+  @include grid-span-first-third;
+}
+@mixin grid-sidebar-span-one-third {
+  @include grid-span-one-third;
+}
+
+
+@mixin grid-span-first-two-thirds {
+  grid-column: $grid-main-column-start / $grid-main-column-end;
+  @include media-query-min('m') {
+    grid-column: $grid-main-column-start / $grid-span-two-thirds;
+  }
+}
+@mixin grid-span-two-thirds {
+  grid-column: $grid-main-column-start / $grid-main-column-end;
+  @include media-query-min('m') {
+    grid-column: $grid-span-two-thirds / $grid-main-column-end;
+  }
+}
+
+@mixin grid-sidebar-span-first-two-thirds {
+  @include grid-span-first-two-thirds;
+}
+@mixin grid-sidebar-span-two-thirds {
+  @include grid-span-two-thirds;
+}
+
+
+@mixin grid-span-first-quarter {
+  grid-column: $grid-main-column-start / $grid-span-one-quarter;
+}
+@mixin grid-span-one-quarter {
+  grid-column: $grid-span-one-quarter;
+  
+  
+  
+  &:nth-of-type(odd) {
+    grid-column: $grid-main-column-start / $grid-span-one-quarter;
+  }
+  @include media-query-min('l') {
+    &:nth-of-type(odd) {
+      grid-column: $grid-span-one-quarter;
+    }
+  }
+}
+
+@mixin grid-sidebar-span-first-quarter {
+  @include grid-span-first-quarter;
+}
+
+@mixin grid-sidebar-span-one-quarter {
+  grid-column: $grid-span-one-quarter;
+  
+  
+  
+  &:nth-of-type(odd) {
+    grid-column: $grid-main-column-start / $grid-span-one-quarter;
+  }
+  @include media-query-min('xl') {
+    &:nth-of-type(odd) {
+      grid-column: $grid-span-one-quarter;
+    }
+  }
+}
+
+$grid-span-one-half: var(--ds-grid-span-one-half);
+$grid-span-one-third: var(--ds-grid-span-one-third);
+$grid-span-two-thirds: var(--ds-grid-span-two-thirds);
+$grid-span-one-quarter: var(--ds-grid-span-one-quarter);
+
+$grid-sidebar-span-one-half: $grid-span-one-half;
+$grid-sidebar-span-one-third: $grid-span-one-third;
+$grid-sidebar-span-two-thirds: $grid-span-two-thirds;
+$grid-sidebar-span-one-quarter: $grid-span-one-quarter;

package/styles/scss/ds/lib/grid-narrow.scss

@@ -0,0 +1,14 @@
+
+$grid-narrow-max-width: 948px;
+$grid-narrow-left-column-start: narrow-left-start;
+$grid-narrow-left-column-end: narrow-left-end;
+$grid-narrow-center-column-start: narrow-center-start;
+$grid-narrow-center-column-end: narrow-center-end;
+
+@mixin grid-narrow-left-column {
+  grid-column: $grid-narrow-left-column-start / $grid-narrow-left-column-end;
+}
+
+@mixin grid-narrow-center-column {
+  grid-column: $grid-narrow-center-column-start / $grid-narrow-center-column-end;
+}

package/styles/scss/ds/lib/grid-sidebar-sidebar.scss

@@ -0,0 +1,52 @@
+@use 'media-query' as *;
+
+$grid-sidebar-sidebar-1-column-start: sidebar-1-start;
+$grid-sidebar-sidebar-1-column-end: sidebar-1-end;
+$grid-sidebar-sidebar-2-column-start: sidebar-2-start;
+$grid-sidebar-sidebar-2-column-end: sidebar-2-end;
+
+
+@mixin grid-sidebar-sidebar-1($is-open: false) {
+  display: none;
+  @include media-query-min('l') {
+    display: unset;
+    
+    
+    
+    
+    grid-row: span 300;
+    grid-column: $grid-sidebar-sidebar-1-column-start /
+      $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;
+    }
+  }
+}
+
+@mixin grid-sidebar-sidebar-2($is-open: false) {
+  display: none;
+  @include media-query-min('l') {
+    
+    
+    
+    
+    grid-row: span 300;
+    margin-block-end: 0;
+    @if ($is-open == true) {
+      grid-column: $grid-sidebar-sidebar-2-column-start /
+        $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/_grid-sidebar.scss → ds/lib/grid-sidebar.scss}

@@ -1,8 +1,9 @@
-@import './_grid-sidebar-sidebar.scss';
+@use 'grid-sidebar-sidebar' as *;
+@use 'media-query' as *;
 
-@mixin ds-grid-sidebar($is-sidebar-1-open: false, $is-sidebar-2-open: false) {
+@mixin 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 "[STIHL Design System] - [ds-grid-sidebar()]: Sidebar 1 cannot be visually closed when sidebar 2 is open";
+    @error "[STIHL Design System] - [ds.grid-sidebar()]: Sidebar 1 cannot be visually closed when sidebar 2 is open";
   }
 
   display: grid;
@@ -21,28 +22,28 @@
 
   @if $is-sidebar-1-open == false {
     & > :first-child {
-      @include ds-grid-sidebar-sidebar-1(false);
+      @include grid-sidebar-sidebar-1(false);
     }
     & > :nth-child(2) {
-      @include ds-grid-sidebar-sidebar-2(false);
+      @include 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);
+      @include grid-sidebar-sidebar-1(true);
     }
     & > :nth-child(2) {
-      @include ds-grid-sidebar-sidebar-2(false);
+      @include 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);
+      @include grid-sidebar-sidebar-1(true);
     }
     & > :nth-child(2) {
-      @include ds-grid-sidebar-sidebar-2(true);
+      @include grid-sidebar-sidebar-2(true);
     }
   }
 
-  @include ds-media-query-min('m') {
+  @include media-query-min('m') {
     --ds-grid-sidebar-gap: 24px;
     gap: var(--ds-grid-sidebar-gap);
     grid-template-columns:
@@ -56,12 +57,12 @@
     --ds-grid-span-one-quarter: span 3;
   }
 
-  @include ds-media-query-min('l') {
+  @include 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;
 
     @if $is-sidebar-1-open == false {
@@ -89,29 +90,24 @@
     }
 
     --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;
 
-    // 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;
     }
   }
 
-  @include ds-media-query-min('xl') {
+  @include 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;
 
     @if $is-sidebar-1-open == false {
@@ -139,20 +135,15 @@
     }
 
     --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;
 
-    // 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;
     }

package/styles/scss/{lib/_grid.scss → ds/lib/grid.scss}

@@ -1,6 +1,8 @@
-@mixin ds-grid {
+@use 'media-query' as *;
+
+@mixin grid {
   display: grid;
-  --ds-grid-gap: 16px;
+  --ds-grid-gap: var(--ds-spacing-dynamic-xs);
   gap: var(--ds-grid-gap);
   min-width: 320px;
   grid-template-columns:
@@ -10,16 +12,14 @@
       --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);
+  @include media-query-min('m') {
     grid-template-columns:
       [full-start extended-start] var(--ds-internal-grid-safe-zone)
       [main-start narrow-left-start narrow-center-start] repeat(
@@ -30,7 +30,7 @@
         --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;
@@ -38,7 +38,7 @@
     --ds-grid-span-one-quarter: span 3;
   }
 
-  @include ds-media-query-min('l') {
+  @include 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))
@@ -47,16 +47,14 @@
       [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);
+  @include media-query-min('xl') {
     grid-template-columns:
       [full-start extended-start] var(--ds-internal-grid-safe-zone)
       [main-start narrow-left-start] repeat(3, minmax(0, 1fr))
@@ -65,14 +63,14 @@
       [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
+  @include media-query-min('xxl') {
+    
+    
+    
     grid-template-columns:
       [full-start] auto
       [extended-start] var(--ds-internal-grid-safe-zone)

package/styles/scss/ds/lib/heading.scss

@@ -0,0 +1,75 @@
+@use 'media-query' as *;
+@use './ds-internal/_heading' as *;
+
+
+
+@mixin 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 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);
+}
+
+
+@mixin heading-large {
+  @include base-heading-bold(
+    'STIHL Contraface Digital Text Bold',
+    1.375rem,
+    1.25
+  );
+  @include responsive-heading('l', 1.625rem, 1.2);
+}
+
+@mixin 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);
+}
+
+
+@mixin heading-medium {
+  @include base-heading-bold(
+    'STIHL Contraface Digital Text Bold',
+    1.25rem,
+    1.2
+  );
+}
+
+@mixin heading-medium-uppercase {
+  @include base-heading-display-title(
+    'STIHL Contraface Digital Display Title',
+    1.25rem,
+    1.2
+  );
+  text-transform: uppercase;
+}
+
+
+@mixin heading-small {
+  @include base-heading-bold('STIHL Contraface Digital Text Bold', 1rem, 1.5);
+}
+
+@mixin heading-small-uppercase {
+  @include base-heading-display-title(
+    'STIHL Contraface Digital Display Title',
+    1rem,
+    1.5
+  );
+  text-transform: uppercase;
+}

package/styles/scss/ds/lib/link.scss

@@ -0,0 +1,74 @@
+@use 'spacing' as *;
+@use 'theme' as *;
+@use 'transition' as *;
+@use './ds-internal/_link' as *;
+
+
+
+
+
+
+@mixin link($variant: 'neutral', $theme: 'light') {
+  display: inline;
+  padding-inline-end: $spacing-2;
+  padding-inline-start: $spacing-2;
+  padding-block-start: 0;
+  padding-block-end: 0;
+  line-height: inherit;
+  font-size: inherit;
+
+  
+  @include link-underline;
+
+  
+  
+  
+  
+  
+  :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;
+  }
+
+  
+  @if ($variant == 'neutral' and $theme == 'light') {
+    @include link-variant(
+      $theme-light-content-color-interaction-neutral,
+      $theme-light-background-color-transparent-hover,
+      $theme-light-content-color-interaction-neutral
+    );
+  }
+
+  @if ($variant == 'highlight' and $theme == 'light') {
+    @include link-variant(
+      $theme-light-content-color-interaction-accent,
+      $theme-light-background-color-transparent-hover,
+      $theme-light-content-color-interaction-accent-hover
+    );
+  }
+
+  @if ($variant == 'neutral' and $theme == 'dark') {
+    @include link-variant(
+      $theme-dark-content-color-interaction-neutral,
+      $theme-dark-background-color-transparent-hover,
+      $theme-dark-content-color-interaction-neutral,
+      $theme: 'dark'
+    );
+  }
+
+  @if ($variant == 'highlight' and $theme == 'dark') {
+    @include link-variant(
+      $theme-dark-content-color-interaction-accent,
+      $theme-dark-background-color-transparent-hover,
+      $theme-dark-content-color-interaction-accent,
+      $theme: 'dark'
+    );
+  }
+
+  
+  @include transition((background-color, border-color, color));
+}

package/styles/scss/ds/lib/media-query.scss

@@ -0,0 +1,32 @@
+@use 'sass:map';
+@use 'breakpoints' as *;
+
+@mixin media-query-min($min: null) {
+  @if map.has-key($breakpoints, $min) {
+    @media (min-width: #{map.get($breakpoints, $min)}px) {
+      @content;
+    }
+  } @else {
+    @error "[STIHL Design System] - [ds.media-query-min()]: Passed '#{$min}' breakpoint is not available in ds.media-query-min() mixin.";
+  }
+}
+
+@mixin media-query-max($max: null) {
+  @if map.has-key($breakpoints, $max) {
+    @media (max-width: #{map.get($breakpoints, $max) - 1}px) {
+      @content;
+    }
+  } @else {
+    @error "[STIHL Design System] - [ds.media-query-max()]: Passed '#{$max}' breakpoint is not available in ds.media-query-max() mixin.";
+  }
+}
+
+@mixin media-query-min-max($min: null, $max: null) {
+  @if map.has-key($breakpoints, $min) and map.has-key($breakpoints, $max) {
+    @media (min-width: #{map.get($breakpoints, $min)}px) and (max-width: #{map.get($breakpoints, $max) - 1}px) {
+      @content;
+    }
+  } @else {
+    @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 → ds/lib/shadow.scss}

@@ -1,9 +1,9 @@
-@mixin ds-shadow-m {
+@mixin 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 {
+@mixin shadow-l {
   box-shadow:
     0px 8px 48px 0px rgba(0, 0, 0, 0.1),
     0px 2px 4px 0px rgba(0, 0, 0, 0.04);