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

package/styles/scss/{lib → ds/lib/ds-internal}/_focus.scss

@@ -1,12 +1,12 @@
-@import '_theme';
-@import '_high-contrast';
+@use '../theme' as *;
+@use '_high-contrast' as *;
 
 @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
+    $theme-light-border-color-focus,
+    $theme-dark-border-color-focus
   );
   outline-offset: $offset;
 
@@ -16,29 +16,27 @@
   }
 }
 
-// Read more here: https://www.tpgi.com/focus-visible-and-backwards-compatibility/
-@mixin ds-focus($theme: 'light', $offset: 2px, $thickness: 2px) {
+
+@mixin 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
+
+@mixin focus-pseudo($theme: 'light', $offset: 2px, $thickness: 2px) {
+  
   &:focus,
   &:focus-visible {
     outline: none;
@@ -50,12 +48,12 @@
 
   @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/ds/lib/ds-internal/_heading.scss

@@ -0,0 +1,37 @@
+@use 'sass:string';
+@use '../media-query' as *;
+
+
+@mixin base-heading($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;
+  font-weight: normal;
+  font-size: $fontSize;
+  line-height: $lineHeight;
+}
+
+
+@mixin base-heading-bold($fontFamily, $fontSize, $lineHeight) {
+  @include base-heading($fontFamily, $fontSize, $lineHeight);
+
+  
+  font-size-adjust: 0.426;
+}
+
+
+@mixin base-heading-display-title($fontFamily, $fontSize, $lineHeight) {
+  @include base-heading($fontFamily, $fontSize, $lineHeight);
+  
+  font-size-adjust: cap-height 0.68;
+}
+
+@mixin responsive-heading($min, $fontSize, $lineHeight) {
+  @include media-query-min($min: $min) {
+    font-size: $fontSize;
+    line-height: $lineHeight;
+  }
+}

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

@@ -0,0 +1,32 @@
+@use 'sass:color';
+@use 'sass:meta';
+@use 'sass:string';
+@use '../spacing' as *;
+
+@function px-to-rem($pixels, $base-font-size: 16px) {
+  @return #{calc($pixels / $base-font-size)}rem;
+}
+
+
+@function urlEncodeHexColor($string) {
+  @if meta.type-of($string) == 'color' and string.index(#{$string}, '#') == 1 {
+    $hex: string.slice(color.ie-hex-str($string), 4);
+    $string: string.unquote('#{$hex}');
+
+    @return '%23' + $string;
+  }
+
+  @return $string;
+}
+
+
+
+
+
+@function adjust-spacing-for-border-1($spacing) {
+  @return #{calc($spacing - $spacing-1)};
+}
+
+@function adjust-spacing-for-border-2($spacing) {
+  @return #{calc($spacing - $spacing-2)};
+}

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

@@ -0,0 +1,6 @@
+
+@mixin high-contrast-media-query {
+  @media screen and (forced-colors: active) {
+    @content;
+  }
+}

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

@@ -0,0 +1,6 @@
+
+@mixin hover-media-query {
+  @media (hover: hover) {
+    @content;
+  }
+}

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

@@ -0,0 +1,9 @@
+@forward '_a11y';
+@forward '_focus';
+@forward '_hover';
+@forward '_heading';
+@forward '_helpers';
+@forward '_high-contrast';
+@forward '_link';
+@forward '_spacing-dynamic';
+@forward '_text';

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

@@ -0,0 +1,62 @@
+@use '_focus' as *;
+@use '_helpers' as *;
+@use '_high-contrast' as *;
+@use '_hover' as *;
+
+
+
+
+
+@mixin link-variant(
+  $content-color,
+  $background-color-hover,
+  $content-color-hover,
+  $theme: 'light'
+) {
+  & {
+    color: $content-color;
+  }
+
+  &:link,
+  &:visited {
+    color: $content-color;
+  }
+
+  &:active {
+    background-color: $background-color-hover;
+    color: $content-color-hover;
+  }
+
+  @include hover-media-query {
+    &:hover {
+      background-color: $background-color-hover;
+      color: $content-color-hover;
+      @include high-contrast-media-query {
+        background-color: Canvas;
+      }
+    }
+  }
+
+  &[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");
+  }
+
+  
+  
+  @include focus($theme, $offset: 0);
+}
+
+
+@mixin link-underline {
+  text-decoration-skip-ink: auto;
+  text-decoration-line: underline;
+  text-underline-offset: 2px;
+  text-decoration-thickness: 1px;
+  text-decoration-color: currentColor;
+}

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;
     }