@stihl-design-system/components 1.0.0-RC.4 → 1.0.0-RC.40

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,11 @@
+@forward '_a11y';
+@forward '_focus';
+@forward '_hover';
+@forward '_heading';
+@forward '_helpers';
+@forward '_high-contrast';
+@forward '_input';
+@forward '_link';
+@forward '_link-button';
+@forward '_spacing-dynamic';
+@forward '_text';

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

@@ -0,0 +1,196 @@
+@use '_focus' as *;
+@use '_helpers' as *;
+@use '_high-contrast' as *;
+@use '_hover' as *;
+@use '../spacing' as *;
+@use '../text' as *;
+@use '../theme' as *;
+@use '../transition' as *;
+
+@mixin input-label-base($hasHint: false) {
+  @include utility-medium;
+  display: block;
+  min-height: px-to-rem($spacing-24);
+
+  
+  &:has(input) {
+    padding-block-start: $spacing-2;
+    
+    & input {
+      @if $hasHint {
+        margin-block-start: $spacing-8;
+      } @else {
+        margin-block-start: 10px;
+      }
+    }
+    
+    & :first-child:not(input) {
+      
+      margin-block-start: $spacing-4;
+      
+      margin-block-end: 0;
+    }
+  }
+  
+  &:not(:has(input)) {
+    
+    max-width: fit-content;
+    padding-block: $spacing-2;
+
+    @if $hasHint {
+      margin-block-end: $spacing-2;
+    } @else {
+      margin-block-end: $spacing-8;
+    }
+  }
+}
+
+@mixin input-label-disabled() {
+  @include high-contrast-media-query {
+    color: GrayText;
+  }
+}
+
+@mixin input-label-required() {
+  &:after {
+    content: '*';
+    margin-inline-start: $spacing-2;
+    font-family:
+      'STIHL Contraface Digital Text Regular',
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      'Helvetica Neue',
+      Arial,
+      sans-serif;
+  }
+}
+
+@mixin input-hint-base() {
+  @include utility-small;
+  display: block;
+  max-width: 25.5rem;
+  margin-block-end: $spacing-8;
+}
+
+@mixin input-base($size) {
+  @if ($size == 'medium') {
+    
+    @include utility-medium;
+
+    padding-inline-start: adjust-spacing-for-border-1($spacing-16);
+    padding-inline-end: adjust-spacing-for-border-1($spacing-16);
+    min-height: px-to-rem($spacing-48);
+    height: px-to-rem($spacing-48);
+  } @else if($size == 'small') {
+    @include utility-small;
+    
+    padding-inline-start: adjust-spacing-for-border-1($spacing-8);
+    padding-inline-end: adjust-spacing-for-border-1($spacing-8);
+    
+    min-height: px-to-rem($spacing-32);
+    height: px-to-rem($spacing-32);
+  }
+
+  
+  @include focus($offset: 0, $thickness: $spacing-1);
+  @include transition((background-color, color));
+
+  @include hover-media-query {
+    &:hover {
+      background: $theme-light-background-color-transparent-hover;
+      @include high-contrast-media-query {
+        border-color: Highlight;
+      }
+    }
+  }
+
+  & {
+    background: transparent;
+    border: $spacing-1 solid $theme-light-border-color-primary;
+    border-radius: 0;
+    color: $theme-light-content-color-primary;
+    width: 100%;
+  }
+
+  &[readonly] {
+    background-color: $theme-light-background-color-tertiary;
+    border-color: transparent;
+    color: $theme-light-content-color-primary;
+
+    @include focus($offset: 0, $thickness: $spacing-2);
+  }
+
+  &:disabled {
+    background-color: transparent;
+    border-color: $theme-light-border-color-primary-disabled;
+    color: $theme-light-content-color-primary-disabled;
+    cursor: not-allowed;
+  }
+
+  &::-webkit-placeholder,
+  &::placeholder {
+    color: $theme-light-content-color-secondary;
+    opacity: 1;
+  }
+
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+
+  
+  
+  
+  
+
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+
+  &[type='search'] {
+    appearance: none;
+    -webkit-appearance: none;
+  }
+
+  &[type='range'] {
+    accent-color: $color-core-orange-dark;
+  }
+
+  &[type='number'] {
+    -moz-appearance: textfield;
+    appearance: textfield;
+  }
+}
+
+@mixin input-invalid() {
+  border-color: $theme-light-border-color-feedback-error;
+  outline-color: $theme-light-border-color-feedback-error;
+
+  &:active,
+  &:focus,
+  &:focus-visible {
+    border-color: $theme-light-border-color-primary;
+  }
+}

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

@@ -0,0 +1,226 @@
+@use '_focus' as *;
+@use '_helpers' as *;
+@use '_high-contrast' as *;
+@use '_hover' as *;
+@use '../media-query' as *;
+@use '../spacing' as *;
+@use '../text' as *;
+@use '../theme' as *;
+@use '../transition' as *;
+
+$link-button-size-small: px-to-rem($spacing-32);
+$link-button-size-medium: px-to-rem($spacing-48);
+
+
+
+@mixin link-button-padding-medium {
+  
+  padding-block-start: adjust-spacing-for-border-1($spacing-12);
+  padding-block-end: adjust-spacing-for-border-1($spacing-12);
+  padding-inline-start: adjust-spacing-for-border-1($spacing-24);
+  padding-inline-end: adjust-spacing-for-border-1($spacing-24);
+}
+
+@mixin link-button-padding-small {
+  
+  padding-block-start: adjust-spacing-for-border-1($spacing-6);
+  padding-block-end: adjust-spacing-for-border-1($spacing-6);
+  padding-inline-start: adjust-spacing-for-border-1($spacing-16);
+  padding-inline-end: adjust-spacing-for-border-1($spacing-16);
+}
+
+@mixin link-button-base($theme: 'light', $stretched: false) {
+  @include focus($theme: $theme);
+  & {
+    @include utility-medium-bold;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    border-width: $spacing-1;
+    border-style: solid;
+    border-color: transparent;
+    gap: $spacing-8;
+    transform: translate3d(0px, 0px, 0px);
+    overflow-wrap: break-word;
+    text-align: left;
+    text-decoration: none;
+    background-color: transparent;
+    cursor: pointer;
+    @if $stretched {
+      width: 100%;
+    }
+    @include transition((background-color, border-color, color));
+  }
+}
+
+@mixin link-button-size($size: 'medium') {
+  & {
+    @if $size == 'medium' {
+      min-height: $link-button-size-medium;
+      min-width: $link-button-size-medium;
+      @include link-button-padding-medium;
+      &::before {
+        right: -($spacing-12);
+        left: -($spacing-12);
+      }
+    } @else if $size == 'small' {
+      min-height: $link-button-size-small;
+      min-width: $link-button-size-small;
+      @include link-button-padding-small;
+      &::before {
+        right: -($spacing-8);
+        left: -($spacing-8);
+      }
+    }
+  }
+}
+
+@mixin link-button-variant(
+  $variant: 'filled',
+  $theme: 'light',
+  $isFlush: false,
+  $stretched: false
+) {
+  & {
+    @if $variant == 'highlight' {
+      background-color: $theme-light-background-color-brand;
+      color: $theme-light-content-color-primary;
+
+      @include hover-media-query {
+        &:hover {
+          background-color: $theme-light-background-color-brand-hover;
+        }
+      }
+    } @else if $variant == 'filled' {
+      background-color: $theme-light-background-color-primary-inverse;
+      color: $theme-light-content-color-primary-inverse;
+
+      @include hover-media-query {
+        &:hover {
+          background-color: $theme-light-background-color-primary-inverse-hover;
+        }
+      }
+    } @else if $variant == 'outline' {
+      border-color: $theme-light-border-color-primary;
+      color: $theme-light-content-color-primary;
+
+      @include hover-media-query {
+        &:hover {
+          background-color: $theme-light-background-color-transparent-hover;
+        }
+      }
+    } @else if $variant == 'ghost' {
+      color: $theme-light-content-color-primary;
+      @if $isFlush == false {
+        @include hover-media-query {
+          &:hover {
+            background-color: $theme-light-background-color-transparent-hover;
+          }
+        }
+      } @else if $isFlush == true {
+        & {
+          
+          padding-inline-start: 0;
+          padding-inline-end: 0;
+          
+          min-width: $spacing-0;
+
+          &::before {
+            content: '';
+            position: absolute; 
+            top: -($spacing-1);
+            bottom: -($spacing-1);
+            @include transition((background-color, color));
+          }
+        }
+
+        @include focus-pseudo($theme);
+
+        @include hover-media-query {
+          &:hover::before {
+            background-color: $theme-light-background-color-transparent-hover;
+            @include high-contrast-media-query {
+              background-color: transparent;
+            }
+          }
+        }
+      }
+    } @else if $variant == 'navigation' {
+      @include utility-large-bold;
+      color: $theme-light-content-color-primary;
+
+      border-radius: $spacing-2;
+      
+      min-height: $link-button-size-small;
+      min-width: $link-button-size-small;
+      @include link-button-padding-small;
+
+      @if $stretched {
+        justify-content: flex-start;
+      }
+
+      @include media-query-min('l') {
+        @include utility-medium-bold;
+      }
+      @include focus('light', $offset: -($spacing-2));
+      @include hover-media-query {
+        &:hover {
+          background-color: $theme-light-background-color-transparent-hover;
+        }
+      }
+    }
+
+    @if $theme == 'dark' {
+      @if $variant != 'ghost' {
+        @include focus($theme);
+      }
+      & {
+        
+        @if $variant == 'filled' {
+          background-color: $theme-dark-background-color-primary-inverse;
+          color: $theme-dark-content-color-primary-inverse;
+          @include hover-media-query {
+            &:hover {
+              background-color: $theme-dark-background-color-primary-inverse-hover;
+            }
+          }
+        } @else if $variant == 'outline' {
+          border-color: $theme-dark-border-color-primary;
+          color: $theme-dark-content-color-primary;
+          @include hover-media-query {
+            &:hover {
+              background-color: $theme-dark-background-color-transparent-hover;
+            }
+          }
+        } @else if $variant == 'ghost' {
+          color: $theme-dark-content-color-primary;
+
+          @if $isFlush == false {
+            @include hover-media-query {
+              &:hover {
+                background-color: $theme-dark-background-color-transparent-hover;
+              }
+            }
+          } @else if $isFlush == true {
+            @include hover-media-query {
+              &:hover::before {
+                background-color: $theme-dark-background-color-transparent-hover;
+                @include high-contrast-media-query {
+                  background-color: transparent;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  
+  @include high-contrast-media-query {
+    background-color: Canvas !important;
+    &:hover {
+      border-color: Highlight;
+    }
+  }
+}

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,14 @@
+@use 'media-query' as *;
+
+$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;
+
+  
+  @include media-query-min('xxxl') {
+    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;
+}