@stihl-design-system/components 1.0.0-RC.3 → 1.0.0-RC.30

package/styles/js/index.es.js

@@ -0,0 +1,249 @@
+const r = {
+  duration: {
+    100: "var(--ds-animation-duration, 100ms)",
+    250: "var(--ds-animation-duration, 250ms)",
+    400: "var(--ds-animation-duration, 400ms)"
+  },
+  motionFunctional: {
+    linear: "linear",
+    easeIn: "cubic-bezier(0.5, 0, 1, 1)",
+    easeOut: "cubic-bezier(0, 0, 0.5, 1)",
+    easeInOut: "cubic-bezier(0.5, 0, 0.5, 1)"
+  }
+}, a = {
+  base: 0,
+  s: 320,
+  m: 768,
+  l: 1024,
+  xl: 1536,
+  xxl: 1668,
+  xxxl: 1920
+}, i = {
+  0: "0px",
+  1: "1px",
+  2: "2px",
+  4: "4px",
+  6: "6px",
+  8: "8px",
+  12: "12px",
+  14: "14px",
+  16: "16px",
+  20: "20px",
+  24: "24px",
+  32: "32px",
+  40: "40px",
+  48: "48px",
+  56: "56px",
+  64: "64px",
+  80: "80px",
+  96: "96px",
+  128: "128px",
+  160: "160px"
+}, e = {
+  black: {
+    base: "#050505",
+    opacity_10: "#0000001A",
+    opacity_50: "#00000080"
+  },
+  blue: {
+    base: "#249ABE",
+    dark: "#1E71A1",
+    deep: "#19618B",
+    light: "#D4ECF7",
+    mid: "#8DCFE8"
+  },
+  forest: {
+    base: "#4A9E5F",
+    dark: "#3C8653",
+    deep: "#2D7644",
+    light: "#DBF0E1",
+    mid: "#77C089"
+  },
+  green: {
+    base: "#749F4A",
+    dark: "#5B863C",
+    deep: "#46762D",
+    light: "#E5F0DB",
+    mid: "#9BC077"
+  },
+  grey: {
+    base: "#B1B1B1",
+    dark: "#666666",
+    deep: "#444444",
+    light: "#EDEDED",
+    mid: "#DADADA",
+    semiDark: "#8C8C8C",
+    ultraDeep: "#252525",
+    ultraLight: "#F8F8F8"
+  },
+  orange: {
+    base: "#F37A1F",
+    dark: "#E9640C",
+    deep: "#D9480F",
+    light: "#FEE2CD",
+    mid: "#F7A669"
+  },
+  red: {
+    base: "#D43B3B",
+    dark: "#B72427",
+    deep: "#A5181D",
+    light: "#EEBCBD",
+    mid: "#DA6B6D"
+  },
+  white: {
+    base: "#FFFFFF",
+    opacity_15: "#FFFFFF26",
+    opacity_50: "#FFFFFF80"
+  },
+  yellow: {
+    base: "#FDC543",
+    dark: "#F9A521",
+    deep: "#EE8F00",
+    light: "#FDECC3",
+    mid: "#FED277"
+  }
+}, d = {
+  light: {
+    background: {
+      brandDisabled: e.grey.mid,
+      brandHover: e.orange.dark,
+      brandPressed: e.orange.dark,
+      brand: e.orange.base,
+      feedbackError: e.red.light,
+      feedbackInfo: e.grey.light,
+      feedbackSuccess: e.green.light,
+      feedbackWarning: e.yellow.light,
+      primaryDisabled: e.white.base,
+      primaryHover: e.grey.light,
+      primaryInverseDisabled: e.grey.mid,
+      primaryInverseHover: e.grey.deep,
+      primaryInversePressed: e.grey.deep,
+      primaryInverse: e.grey.ultraDeep,
+      primaryPressed: e.grey.light,
+      primary: e.white.base,
+      secondaryDisabled: e.grey.ultraLight,
+      secondaryInverseDisabled: e.grey.mid,
+      secondaryInverse: e.grey.deep,
+      secondary: e.grey.ultraLight,
+      sustainability: e.forest.light,
+      tertiary: e.grey.light,
+      transparentHover: e.black.opacity_10,
+      transparentPressed: e.black.opacity_10,
+      transparent: e.black.opacity_10
+    },
+    border: {
+      feedbackError: e.red.base,
+      feedbackInfo: e.grey.dark,
+      feedbackSuccess: e.green.base,
+      feedbackWarning: e.yellow.base,
+      focus: e.grey.ultraDeep,
+      primaryDisabled: e.black.opacity_50,
+      primaryInverse: e.white.base,
+      primary: e.grey.ultraDeep,
+      secondaryDisabled: e.black.opacity_10,
+      secondary: e.grey.base,
+      tertiary: e.grey.mid
+    },
+    content: {
+      brandDisabled: e.black.opacity_50,
+      brandHover: e.orange.deep,
+      brandPressed: e.orange.deep,
+      brand: e.orange.dark,
+      feedbackError: e.red.base,
+      feedbackInfo: e.grey.base,
+      feedbackSuccess: e.green.base,
+      feedbackWarning: e.yellow.base,
+      interactionAccentHover: e.blue.deep,
+      interactionAccentPressed: e.blue.deep,
+      interactionAccent: e.blue.dark,
+      interactionNeutral: e.grey.ultraDeep,
+      primaryDisabled: e.black.opacity_50,
+      primaryInverseDisabled: e.black.opacity_50,
+      primaryInverse: e.white.base,
+      primaryOnBrandDisabled: e.black.opacity_50,
+      primaryOnBrand: e.grey.ultraDeep,
+      primary: e.grey.ultraDeep,
+      secondaryDisabled: e.black.opacity_50,
+      secondary: e.grey.dark,
+      sustainability: e.forest.base,
+      tertiaryInverseDisabled: e.black.opacity_10,
+      tertiaryInverse: e.grey.semiDark,
+      tertiary: e.grey.base
+    }
+  },
+  dark: {
+    background: {
+      brandDisabled: e.grey.mid,
+      brandHover: e.orange.dark,
+      brandPressed: e.orange.dark,
+      brand: e.orange.base,
+      feedbackError: e.grey.deep,
+      feedbackInfo: e.grey.deep,
+      feedbackSuccess: e.grey.deep,
+      feedbackWarning: e.grey.deep,
+      primaryDisabled: e.black.base,
+      primaryHover: e.grey.deep,
+      primaryInverseDisabled: e.grey.mid,
+      primaryInverseHover: e.grey.mid,
+      primaryInversePressed: e.grey.mid,
+      primaryInverse: e.grey.ultraLight,
+      primaryPressed: e.grey.deep,
+      primary: e.black.base,
+      secondaryDisabled: e.grey.ultraDeep,
+      secondaryInverseDisabled: e.grey.base,
+      secondaryInverse: e.grey.light,
+      secondary: e.grey.ultraDeep,
+      sustainability: e.grey.deep,
+      tertiary: e.grey.ultraDeep,
+      transparentHover: e.white.opacity_15,
+      transparentPressed: e.white.opacity_15,
+      transparent: e.white.opacity_15
+    },
+    border: {
+      feedbackError: e.red.base,
+      feedbackInfo: e.grey.dark,
+      feedbackSuccess: e.green.base,
+      feedbackWarning: e.yellow.base,
+      focus: e.white.base,
+      primaryDisabled: e.white.opacity_50,
+      primaryInverse: e.grey.ultraDeep,
+      primary: e.grey.ultraLight,
+      secondaryDisabled: e.white.opacity_15,
+      secondary: e.grey.dark,
+      tertiary: e.grey.deep
+    },
+    content: {
+      brandDisabled: e.white.opacity_50,
+      brandHover: e.orange.mid,
+      brandPressed: e.orange.mid,
+      brand: e.orange.base,
+      feedbackError: e.red.mid,
+      feedbackInfo: e.grey.base,
+      feedbackSuccess: e.green.mid,
+      feedbackWarning: e.yellow.mid,
+      interactionAccentHover: e.blue.mid,
+      interactionAccentPressed: e.blue.mid,
+      interactionAccent: e.blue.mid,
+      interactionNeutral: e.white.base,
+      primaryDisabled: e.white.opacity_50,
+      primaryInverseDisabled: e.black.opacity_50,
+      primaryInverse: e.grey.ultraDeep,
+      primaryOnBrandDisabled: e.black.opacity_50,
+      primaryOnBrand: e.grey.ultraDeep,
+      primary: e.white.base,
+      secondaryDisabled: e.white.opacity_50,
+      secondary: e.grey.base,
+      sustainability: e.forest.mid,
+      tertiaryInverseDisabled: e.white.opacity_15,
+      tertiaryInverse: e.grey.dark,
+      tertiary: e.grey.dark
+    }
+  }
+};
+export {
+  r as DS_ANIMATION,
+  a as DS_BREAKPOINT,
+  e as DS_COLOR_CORE,
+  d as DS_COLOR_TOKEN,
+  i as DS_SPACING
+};

package/styles/js/lib/animation.d.ts

@@ -0,0 +1,13 @@
+export declare const DS_ANIMATION: {
+    duration: {
+        100: string;
+        250: string;
+        400: string;
+    };
+    motionFunctional: {
+        linear: string;
+        easeIn: string;
+        easeOut: string;
+        easeInOut: string;
+    };
+};

package/styles/js/lib/breakpoint.d.ts

@@ -0,0 +1,9 @@
+export declare const DS_BREAKPOINT: {
+    base: number;
+    s: number;
+    m: number;
+    l: number;
+    xl: number;
+    xxl: number;
+    xxxl: number;
+};

package/styles/js/lib/spacing.d.ts

@@ -0,0 +1,22 @@
+export declare const DS_SPACING: {
+    0: string;
+    1: string;
+    2: string;
+    4: string;
+    6: string;
+    8: string;
+    12: string;
+    14: string;
+    16: string;
+    20: string;
+    24: string;
+    32: string;
+    40: string;
+    48: string;
+    56: string;
+    64: string;
+    80: string;
+    96: string;
+    128: string;
+    160: string;
+};

package/styles/js/lib/theme.d.ts

@@ -0,0 +1,202 @@
+export declare const DS_COLOR_CORE: {
+    black: {
+        base: string;
+        opacity_10: string;
+        opacity_50: string;
+    };
+    blue: {
+        base: string;
+        dark: string;
+        deep: string;
+        light: string;
+        mid: string;
+    };
+    forest: {
+        base: string;
+        dark: string;
+        deep: string;
+        light: string;
+        mid: string;
+    };
+    green: {
+        base: string;
+        dark: string;
+        deep: string;
+        light: string;
+        mid: string;
+    };
+    grey: {
+        base: string;
+        dark: string;
+        deep: string;
+        light: string;
+        mid: string;
+        semiDark: string;
+        ultraDeep: string;
+        ultraLight: string;
+    };
+    orange: {
+        base: string;
+        dark: string;
+        deep: string;
+        light: string;
+        mid: string;
+    };
+    red: {
+        base: string;
+        dark: string;
+        deep: string;
+        light: string;
+        mid: string;
+    };
+    white: {
+        base: string;
+        opacity_15: string;
+        opacity_50: string;
+    };
+    yellow: {
+        base: string;
+        dark: string;
+        deep: string;
+        light: string;
+        mid: string;
+    };
+};
+export declare const DS_COLOR_TOKEN: {
+    light: {
+        background: {
+            brandDisabled: string;
+            brandHover: string;
+            brandPressed: string;
+            brand: string;
+            feedbackError: string;
+            feedbackInfo: string;
+            feedbackSuccess: string;
+            feedbackWarning: string;
+            primaryDisabled: string;
+            primaryHover: string;
+            primaryInverseDisabled: string;
+            primaryInverseHover: string;
+            primaryInversePressed: string;
+            primaryInverse: string;
+            primaryPressed: string;
+            primary: string;
+            secondaryDisabled: string;
+            secondaryInverseDisabled: string;
+            secondaryInverse: string;
+            secondary: string;
+            sustainability: string;
+            tertiary: string;
+            transparentHover: string;
+            transparentPressed: string;
+            transparent: string;
+        };
+        border: {
+            feedbackError: string;
+            feedbackInfo: string;
+            feedbackSuccess: string;
+            feedbackWarning: string;
+            focus: string;
+            primaryDisabled: string;
+            primaryInverse: string;
+            primary: string;
+            secondaryDisabled: string;
+            secondary: string;
+            tertiary: string;
+        };
+        content: {
+            brandDisabled: string;
+            brandHover: string;
+            brandPressed: string;
+            brand: string;
+            feedbackError: string;
+            feedbackInfo: string;
+            feedbackSuccess: string;
+            feedbackWarning: string;
+            interactionAccentHover: string;
+            interactionAccentPressed: string;
+            interactionAccent: string;
+            interactionNeutral: string;
+            primaryDisabled: string;
+            primaryInverseDisabled: string;
+            primaryInverse: string;
+            primaryOnBrandDisabled: string;
+            primaryOnBrand: string;
+            primary: string;
+            secondaryDisabled: string;
+            secondary: string;
+            sustainability: string;
+            tertiaryInverseDisabled: string;
+            tertiaryInverse: string;
+            tertiary: string;
+        };
+    };
+    dark: {
+        background: {
+            brandDisabled: string;
+            brandHover: string;
+            brandPressed: string;
+            brand: string;
+            feedbackError: string;
+            feedbackInfo: string;
+            feedbackSuccess: string;
+            feedbackWarning: string;
+            primaryDisabled: string;
+            primaryHover: string;
+            primaryInverseDisabled: string;
+            primaryInverseHover: string;
+            primaryInversePressed: string;
+            primaryInverse: string;
+            primaryPressed: string;
+            primary: string;
+            secondaryDisabled: string;
+            secondaryInverseDisabled: string;
+            secondaryInverse: string;
+            secondary: string;
+            sustainability: string;
+            tertiary: string;
+            transparentHover: string;
+            transparentPressed: string;
+            transparent: string;
+        };
+        border: {
+            feedbackError: string;
+            feedbackInfo: string;
+            feedbackSuccess: string;
+            feedbackWarning: string;
+            focus: string;
+            primaryDisabled: string;
+            primaryInverse: string;
+            primary: string;
+            secondaryDisabled: string;
+            secondary: string;
+            tertiary: string;
+        };
+        content: {
+            brandDisabled: string;
+            brandHover: string;
+            brandPressed: string;
+            brand: string;
+            feedbackError: string;
+            feedbackInfo: string;
+            feedbackSuccess: string;
+            feedbackWarning: string;
+            interactionAccentHover: string;
+            interactionAccentPressed: string;
+            interactionAccent: string;
+            interactionNeutral: string;
+            primaryDisabled: string;
+            primaryInverseDisabled: string;
+            primaryInverse: string;
+            primaryOnBrandDisabled: string;
+            primaryOnBrand: string;
+            primary: string;
+            secondaryDisabled: string;
+            secondary: string;
+            sustainability: string;
+            tertiaryInverseDisabled: string;
+            tertiaryInverse: string;
+            tertiary: string;
+        };
+    };
+};

package/styles/scss/ds/index.scss

@@ -0,0 +1,20 @@
+@forward 'lib/animation';
+@forward 'lib/breakpoints';
+@forward 'lib/container-query';
+@forward 'lib/grid';
+@forward 'lib/grid-extended';
+@forward 'lib/grid-full';
+@forward 'lib/grid-main';
+@forward 'lib/grid-narrow';
+@forward 'lib/grid-sidebar';
+@forward 'lib/heading';
+@forward 'lib/input';
+@forward 'lib/link';
+@forward 'lib/link-button';
+@forward 'lib/media-query';
+@forward 'lib/shadow';
+@forward 'lib/spacing';
+@forward 'lib/spacing-dynamic';
+@forward 'lib/text';
+@forward 'lib/theme';
+@forward 'lib/transition';

package/styles/scss/ds/lib/animation.scss

@@ -0,0 +1,21 @@
+$animation-duration-100: var(--ds-animation-duration, 100ms);
+$animation-duration-250: var(--ds-animation-duration, 250ms);
+$animation-duration-400: var(--ds-animation-duration, 400ms);
+
+$animation-durations: (
+  '100': $animation-duration-100,
+  '250': $animation-duration-250,
+  '400': $animation-duration-400,
+);
+
+$motion-functional-linear: linear;
+$motion-functional-ease-in: cubic-bezier(0.5, 0, 1, 1);
+$motion-functional-ease-out: cubic-bezier(0, 0, 0.5, 1);
+$motion-functional-ease-in-out: cubic-bezier(0.5, 0, 0.5, 1);
+
+$animation-easing-functions: (
+  'linear': $motion-functional-linear,
+  'ease-in': $motion-functional-ease-in,
+  'ease-out': $motion-functional-ease-out,
+  'ease-in-out': $motion-functional-ease-in-out,
+);

package/styles/scss/ds/lib/breakpoints.scss

@@ -0,0 +1,17 @@
+$breakpoint-base: 0;
+$breakpoint-s: 320;
+$breakpoint-m: 768;
+$breakpoint-l: 1024;
+$breakpoint-xl: 1536;
+$breakpoint-xxl: 1668;
+$breakpoint-xxxl: 1920;
+
+$breakpoints: (
+  'base': $breakpoint-base,
+  's': $breakpoint-s,
+  'm': $breakpoint-m,
+  'l': $breakpoint-l,
+  'xl': $breakpoint-xl,
+  'xxl': $breakpoint-xxl,
+  'xxxl': $breakpoint-xxxl,
+);

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

@@ -0,0 +1,54 @@
+@use 'sass:map';
+@use 'breakpoints' as *;
+
+@mixin container-query-min($min: null, $container-name: null) {
+  @if map.has-key($breakpoints, $min) {
+    $value: #{map.get($breakpoints, $min)}px;
+    @if $container-name {
+      @container #{$container-name} (min-width: #{$value}) {
+        @content;
+      }
+    } @else {
+      @container (min-width: #{$value}) {
+        @content;
+      }
+    }
+  } @else {
+    @error "[STIHL Design System] - [ds.container-query-min()]: Passed '#{$min}' breakpoint is not available in ds.container-query-min() mixin.";
+  }
+}
+
+@mixin container-query-max($max: null, $container-name: null) {
+  @if map.has-key($breakpoints, $max) {
+    $value: #{map.get($breakpoints, $max)}px;
+    @if $container-name {
+      @container #{$container-name} (width < #{$value}) {
+        @content;
+      }
+    } @else {
+      @container (width < #{$value}) {
+        @content;
+      }
+    }
+  } @else {
+    @error "[STIHL Design System] - [ds.container-query-max()]: Passed '#{$max}' breakpoint is not available in ds.container-query-max() mixin.";
+  }
+}
+
+@mixin container-query-min-max($min: null, $max: null, $container-name: null) {
+  @if map.has-key($breakpoints, $min) and map.has-key($breakpoints, $max) {
+    $min-value: #{map.get($breakpoints, $min)}px;
+    $max-value: #{map.get($breakpoints, $max)}px;
+    @if $container-name {
+      @container #{$container-name} (min-width: #{$min-value}) and (width < #{$max-value}) {
+        @content;
+      }
+    } @else {
+      @container (min-width: #{$min-value}) and (width < #{$max-value}) {
+        @content;
+      }
+    }
+  } @else {
+    @error "[STIHL Design System] - [ds.container-query-min-max()]: Passed '#{$min}' and/or '#{$max}' breakpoint is not available in ds.container-query-min-max() mixin.";
+  }
+}

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

@@ -0,0 +1,15 @@
+
+
+
+@mixin visually-hidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  text-indent: -999999px;
+  white-space: nowrap;
+}

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) {
+@mixin outline($theme: 'light', $offset: 2px, $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);
     }
   }