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

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

@@ -0,0 +1,122 @@
+@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-first-half {
+  grid-column: $grid-main-column-start / $grid-span-one-half;
+}
+@mixin grid-span-one-half {
+  grid-column: $grid-span-one-half / $grid-main-column-end;
+}
+
+@mixin grid-sidebar-first-half {
+  @include grid-first-half;
+}
+@mixin grid-sidebar-span-one-half {
+  @include grid-span-one-half;
+}
+
+
+@mixin grid-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($isThirdItem: false) {
+  
+  grid-column: $grid-main-column-start / $grid-main-column-end;
+  
+  
+  
+  @include media-query-min('m') {
+    @if $isThirdItem == true {
+      grid-column: $grid-main-column-start / $grid-span-one-third;
+    } @else {
+      grid-column: $grid-span-one-third;
+    }
+  }
+
+  
+  @include media-query-min('l') {
+    grid-column: $grid-span-one-third;
+  }
+}
+
+@mixin grid-sidebar-first-third {
+  @include grid-first-third;
+}
+@mixin grid-sidebar-span-one-third($isThirdItem: false) {
+  @include grid-span-one-third($isThirdItem);
+}
+
+
+@mixin grid-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-first-two-thirds {
+  @include grid-first-two-thirds;
+}
+@mixin grid-sidebar-span-two-thirds {
+  @include grid-span-two-thirds;
+}
+
+
+@mixin grid-first-quarter {
+  grid-column: $grid-main-column-start / $grid-span-one-quarter;
+}
+@mixin grid-span-one-quarter($isThirdItem: false) {
+  
+  
+  
+  @if $isThirdItem == true {
+    grid-column: $grid-main-column-start / $grid-span-one-quarter;
+  } @else {
+    grid-column: $grid-span-one-quarter;
+  }
+
+  
+  @include media-query-min('l') {
+    grid-column: $grid-span-one-quarter;
+  }
+}
+
+@mixin grid-sidebar-first-quarter {
+  @include grid-first-quarter;
+}
+
+@mixin grid-sidebar-span-one-quarter($isThirdItem: false) {
+  @include grid-span-one-quarter($isThirdItem);
+}
+
+$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: 719px;
+$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.scss

@@ -0,0 +1,57 @@
+@use 'media-query' as *;
+
+@mixin grid-sidebar {
+  display: grid;
+  --ds-grid-gap: var(--ds-spacing-dynamic-xs);
+  gap: var(--ds-grid-gap);
+  min-width: 320px;
+  grid-template-columns:
+    [full-start extended-start] var(--ds-internal-grid-safe-zone)
+    [main-start] repeat(8, minmax(0, 1fr))
+    [main-end] var(--ds-internal-grid-safe-zone)
+    [extended-end full-end];
+  
+  --ds-internal-grid-safe-zone: 8px;
+  --ds-grid-span-one-half: span 8;
+  --ds-grid-span-one-third: span 8;
+  --ds-grid-span-two-thirds: span 8;
+  --ds-grid-span-one-quarter: span 4;
+
+  @include media-query-min('m') {
+    grid-template-columns:
+      [full-start extended-start] var(--ds-internal-grid-safe-zone)
+      [main-start] repeat(12, minmax(0, 1fr))
+      [main-end] var(--ds-internal-grid-safe-zone)
+      [extended-end full-end];
+    
+    --ds-internal-grid-safe-zone: 12px;
+    --ds-grid-span-one-half: span 6;
+    --ds-grid-span-one-third: span 6;
+    --ds-grid-span-two-thirds: span 6;
+    --ds-grid-span-one-quarter: span 6;
+  }
+
+  @include media-query-min('l') {
+    grid-template-columns:
+      [full-start extended-start] var(--ds-internal-grid-safe-zone)
+      [main-start] repeat(12, minmax(0, 1fr))
+      [main-end] var(--ds-internal-grid-safe-zone)
+      [extended-end full-end];
+    
+    --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;
+    --ds-grid-span-one-quarter: span 3;
+  }
+
+  @include media-query-min('xl') {
+    grid-template-columns:
+      [full-start extended-start] var(--ds-internal-grid-safe-zone)
+      [main-start] repeat(12, minmax(0, 1fr))
+      [main-end] var(--ds-internal-grid-safe-zone)
+      [extended-end full-end];
+    
+    --ds-internal-grid-safe-zone: 32px;
+  }
+}

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

@@ -0,0 +1,92 @@
+@use 'media-query' as *;
+
+@mixin grid {
+  display: grid;
+  --ds-grid-gap: var(--ds-spacing-dynamic-xs);
+  gap: var(--ds-grid-gap);
+  min-width: 320px;
+  grid-template-columns:
+    [full-start extended-start] var(--ds-internal-grid-safe-zone)
+    [main-start narrow-left-start narrow-center-start] repeat(8, minmax(0, 1fr))
+    [narrow-center-end narrow-left-end main-end] var(
+      --ds-internal-grid-safe-zone
+    )
+    [extended-end full-end];
+  
+  --ds-internal-grid-safe-zone: 8px;
+  --ds-grid-span-one-half: span 8;
+  --ds-grid-span-one-third: span 8;
+  --ds-grid-span-two-thirds: span 8;
+  --ds-grid-span-one-quarter: span 4;
+
+  @include media-query-min('m') {
+    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];
+    
+    --ds-internal-grid-safe-zone: 12px;
+    --ds-grid-span-one-half: span 6;
+    --ds-grid-span-one-third: span 6;
+    --ds-grid-span-two-thirds: span 6;
+    --ds-grid-span-one-quarter: span 6;
+  }
+
+  @include media-query-min('l') {
+    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];
+    
+    --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;
+    --ds-grid-span-one-quarter: span 3;
+  }
+
+  @include media-query-min('xl') {
+    
+    
+    
+    grid-template-columns:
+      [full-start extended-start] auto
+      [main-start narrow-left-start] repeat(3, minmax(0, calc(1408px / 16)))
+      [narrow-center-start] repeat(3, minmax(0, calc(1408px / 16)))
+      [narrow-left-end] repeat(3, minmax(0, calc(1408px / 16)))
+      [narrow-center-end] repeat(3, minmax(0, calc(1408px / 16)))
+      [main-end]auto
+      [extended-end full-end];
+
+    --ds-internal-grid-safe-zone: 0px;
+  }
+
+  @include media-query-min('xxxl') {
+    
+    
+    
+    grid-template-columns:
+      [full-start] auto
+      [extended-start] var(--ds-internal-grid-safe-zone)
+      [main-start narrow-left-start] repeat(3, minmax(0, calc(1408px / 16)))
+      [narrow-center-start] repeat(3, minmax(0, calc(1408px / 16)))
+      [narrow-left-end] repeat(3, minmax(0, calc(1408px / 16)))
+      [narrow-center-end] repeat(3, minmax(0, calc(1408px / 16)))
+      [main-end] var(--ds-internal-grid-safe-zone)
+      [extended-end]
+      auto [full-end];
+    
+    
+    --ds-internal-grid-safe-zone: 192px; 
+  }
+}

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/input.scss

@@ -0,0 +1,26 @@
+@use './ds-internal/_input' as *;
+
+@mixin input-label($hasHint: false, $isDisabled: false, $isRequired: false) {
+  @if (not $isDisabled and not $isRequired) {
+    @include input-label-base($hasHint);
+  }
+  @if $isDisabled {
+    @include input-label-disabled();
+  }
+
+  @if $isRequired {
+    @include input-label-required();
+  }
+}
+
+@mixin input-hint() {
+  @include input-hint-base();
+}
+
+@mixin input($size: 'medium', $isInvalid: false) {
+  @if (not $isInvalid) {
+    @include input-base($size);
+  } @else {
+    @include input-invalid();
+  }
+}

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

@@ -0,0 +1,29 @@
+@use './ds-internal/_link-button' as *;
+
+@mixin link-button(
+  $variant: 'filled',
+  $size: 'medium',
+  $theme: 'light',
+  $isFlush: false,
+  $stretched: false
+) {
+  @if $variant == 'navigation' {
+    @if $size == 'small' {
+      @error "[STIHL Design System] - [ds.link-button()]: A '$size' param should not be used in combination with $variant:'navigation'. Please remove the '$size' param.";
+    }
+
+    @if $theme == 'dark' {
+      @error "[STIHL Design System] - [ds.link-button()]: $variant:'navigation' param does not support $theme:'dark'. Please remove the '$theme' param.";
+    }
+  }
+  @if $variant != 'ghost' and $isFlush == true {
+    @error "[STIHL Design System] - [ds.link-button()]: $isFlush:true should only be used in combination with $variant:'ghost'. Please remove the '$isFlush' param.";
+  }
+  @if $variant== 'ghost' and $isFlush == true and $stretched == true {
+    @error "[STIHL Design System] - [ds.link-button()]: $stretched:true and $isFlush:true do not have an effect when used together. Please remove one of them.";
+  }
+
+  @include link-button-base($theme, $stretched);
+  @include link-button-size($size);
+  @include link-button-variant($variant, $theme, $isFlush, $stretched);
+}

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,14 @@
-@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-m-hover {
+  box-shadow:
+    0px 2px 12px 0px rgba(0, 0, 0, 0.16),
+    0px 1px 2px 0px rgba(0, 0, 0, 0.2);
+}
+@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);

package/styles/scss/ds/lib/spacing-dynamic.scss

@@ -0,0 +1,7 @@
+
+$spacing-dynamic-xs: var(--ds-spacing-dynamic-xs);
+$spacing-dynamic-s: var(--ds-spacing-dynamic-s);
+$spacing-dynamic-m: var(--ds-spacing-dynamic-m);
+$spacing-dynamic-l: var(--ds-spacing-dynamic-l);
+$spacing-dynamic-xl: var(--ds-spacing-dynamic-xl);
+$spacing-dynamic-xxl: var(--ds-spacing-dynamic-xxl);

package/styles/scss/ds/lib/spacing.scss

@@ -0,0 +1,20 @@
+$spacing-0: 0px;
+$spacing-1: 1px;
+$spacing-2: 2px;
+$spacing-4: 4px;
+$spacing-6: 6px;
+$spacing-8: 8px;
+$spacing-12: 12px;
+$spacing-14: 14px;
+$spacing-16: 16px;
+$spacing-20: 20px;
+$spacing-24: 24px;
+$spacing-32: 32px;
+$spacing-40: 40px;
+$spacing-48: 48px;
+$spacing-56: 56px;
+$spacing-64: 64px;
+$spacing-80: 80px;
+$spacing-96: 96px;
+$spacing-128: 128px;
+$spacing-160: 160px;

package/styles/scss/ds/lib/text.scss

@@ -0,0 +1,107 @@
+@use './ds-internal/_text' as *;
+
+
+@mixin text-large {
+  @include base-text-regular(
+    'STIHL Contraface Digital Text Regular',
+    1.25rem,
+    1.6
+  );
+}
+
+@mixin text-large-bold {
+  @include base-text-bold('STIHL Contraface Digital Text Bold', 1.25rem, 1.6);
+}
+
+@mixin text-medium {
+  @include base-text-regular(
+    'STIHL Contraface Digital Text Regular',
+    1rem,
+    1.5
+  );
+}
+
+@mixin text-medium-bold {
+  @include base-text-bold('STIHL Contraface Digital Text Bold', 1rem, 1.5);
+}
+
+@mixin text-small {
+  @include base-text-regular(
+    'STIHL Contraface Digital Text Regular',
+    0.875rem,
+    1.14
+  );
+}
+
+@mixin text-small-bold {
+  @include base-text-bold('STIHL Contraface Digital Text Bold', 0.875rem, 1.14);
+}
+
+@mixin text-x-small {
+  @include base-text-regular(
+    'STIHL Contraface Digital Text Regular',
+    0.75rem,
+    1.33
+  );
+}
+
+@mixin text-x-small-bold {
+  @include base-text-bold('STIHL Contraface Digital Text Bold', 0.75rem, 1.33);
+}
+
+@mixin text-xx-small {
+  @include base-text-regular(
+    'STIHL Contraface Digital Text Regular',
+    0.625rem,
+    1.6
+  );
+}
+
+
+@mixin utility-large {
+  @include base-text-regular(
+    'STIHL Contraface Digital Text Regular',
+    1.125rem,
+    1.33
+  );
+}
+
+@mixin utility-large-bold {
+  @include base-text-bold('STIHL Contraface Digital Text Bold', 1.125rem, 1.33);
+}
+
+@mixin utility-medium {
+  @include base-text-regular(
+    'STIHL Contraface Digital Text Regular',
+    1rem,
+    1.25
+  );
+}
+
+@mixin utility-medium-bold {
+  @include base-text-bold('STIHL Contraface Digital Text Bold', 1rem, 1.25);
+}
+
+@mixin utility-small {
+  @include base-text-regular(
+    'STIHL Contraface Digital Text Regular',
+    0.875rem,
+    1.14
+  );
+}
+
+@mixin utility-small-bold {
+  @include base-text-bold('STIHL Contraface Digital Text Bold', 0.875rem, 1.14);
+}
+
+@mixin utility-small-demi {
+  @include base-text('STIHL Contraface Digital Text Demi', 0.875rem, 1.14);
+  
+  font-size-adjust: 0.42;
+}
+
+@mixin utility-x-small-demi {
+  @include base-text('STIHL Contraface Digital Text Demi', 0.75rem, 1.33);
+  
+  font-size-adjust: 0.42;
+}