@festo-ui/web-essentials 4.0.3-pre-20221213.1 → 5.0.0-dev.102

package/scss/_variables.scss

@@ -1,252 +1,252 @@
-$black: var(--fwe-black) !default;
-$white: var(--fwe-white) !default;
-$white-dark: var(--fwe-white-dark) !default;
-$caerul: var(--fwe-caerul) !default;
-$sucaerul: var(--fwe-sucaerul) !default;
-$sucanul: var(--fwe-sucanul) !default;
-
-$gray-100: var(--fwe-gray-100) !default;
-$gray-200: var(--fwe-gray-200) !default;
-$gray-300: var(--fwe-gray-300) !default;
-$gray-400: var(--fwe-gray-400) !default;
-
-$icon-black: var(--fwe-icon-black) !default;
-$icon-white: var(--fwe-icon-white) !default;
-$icon-gray: var(--fwe-icon-gray) !default;
-$icon-hero: var(--fwe-icon-hero) !default;
-$icon-hero-light: var(--fwe-icon-hero-light) !default;
-
-$green: var(--fwe-green) !default;
-$yellow: var(--fwe-yellow) !default;
-$orange: var(--fwe-orange) !default;
-$red: var(--fwe-red) !default;
-$green-dark: var(--fwe-green-dark) !default;
-$yellow-dark: var(--fwe-yellow-dark) !default;
-$orange-dark: var(--fwe-orange-dark) !default;
-$red-dark: var(--fwe-red-dark) !default;
-
-// button vars
-$btn: var(--fwe-btn) !default;
-$btn-hover: var(--fwe-btn-hover) !default;
-$btn-active: var(--fwe-btn-active) !default;
-$btn-disabled: var(--fwe-btn-disabled) !default;
-$btn-text: var(--fwe-btn-text) !default;
-$btn-text-hover: var(--fwe-btn-text-hover) !default;
-$btn-text-disabled: var(--fwe-btn-text-disabled) !default;
-
-$btn-hero: var(--fwe-btn-hero) !default;
-$btn-hero-hover: var(--fwe-btn-hero-hover) !default;
-$btn-hero-active: var(--fwe-btn-hero-active) !default;
-$btn-hero-disabled: var(--fwe-btn-hero-disabled) !default;
-$btn-hero-text: var(--fwe-btn-hero-text) !default;
-$btn-hero-text-hover: var(--fwe-btn-hero-text-hover) !default;
-$btn-hero-text-disabled: var(--fwe-btn-hero-text-disabled) !default;
-
-// control colors
-$text: var(--fwe-text) !default;
-$text-light: var(--fwe-text-light) !default;
-$text-disabled: var(--fwe-text-disabled) !default;
-
-$hero: var(--fwe-hero) !default;
-$hero-dark: var(--fwe-hero-dark) !default;
-$hero-darker: var(--fwe-hero-darker) !default;
-
-$control: var(--fwe-control) !default;
-$control-dark: var(--fwe-control-dark) !default;
-$control-darker: var(--fwe-control-darker) !default;
-$control-disabled: var(--fwe-control-disabled) !default;
-$control-box-shadow: 0px 1px 8px rgba(black, 0.3) !default;
-$control-scrollbar: var(--fwe-control-scrollbar) !default;
-
-$control-border: var(--fwe-control-border) !default;
-$control-border-dark: var(--fwe-control-border-dark) !default;
-$control-border-darker: var(--fwe-control-border-darker) !default;
-
-$background: var(--fwe-background) !default;
-$background-modal: rgba(black, 0.7) !default;
-$background-image-gallery: var(--fwe-background-image-gallery) !default;
-
-$border: var(--fwe-border) !default;
-$border-disabled: var(--fwe-border-disabled) !default;
-
-$snackbar-info-bg: var(--fwe-snackbar-info-bg) !default;
-$snackbar-warning-bg: var(--fwe-snackbar-warning-bg) !default;
-$snackbar-error-bg: var(--fwe-snackbar-error-bg) !default;
-
-// color map
-$colors: () !default;
-$colors: map-merge(
-  (
-    "black": $black,
-    "white": $white,
-    "white-dark": $white-dark,
-    "caerul": $caerul,
-    "sucaerul": $sucaerul,
-    "sucanul": $sucanul,
-    "gray-100": $gray-100,
-    "gray-200": $gray-200,
-    "gray-300": $gray-300,
-    "gray-400": $gray-400,
-    "icon-black": $icon-black,
-    "icon-white": $icon-white,
-    "icon-gray": $icon-gray,
-    "icon-hero": $icon-hero,
-    "icon-hero-light": $icon-hero-light,
-    "green": $green,
-    "yellow": $yellow,
-    "orange": $orange,
-    "red": $red,
-    "green-dark": $green-dark,
-    "yellow-dark": $yellow-dark,
-    "orange-dark": $orange-dark,
-    "red-dark": $red-dark,
-    "text": $text,
-    "text-light": $text-light,
-    "text-disabled": $text-disabled,
-    "hero": $hero,
-    "hero-dark": $hero-dark,
-    "hero-darker": $hero-darker,
-    "control": $control,
-    "control-dark": $control-dark,
-    "control-darker": $control-darker,
-    "control-disabled": $control-disabled,
-    "control-border": $control,
-    "control-border-dark": $control-dark,
-    "control-border-darker": $control-darker,
-    "control-border-disabled": $control-disabled,
-    "background": $background,
-    "background-modal": $background-modal,
-    "border": $border,
-    "border-disabled": $border-disabled
-  ),
-  $colors
-);
-
-$badge-colors: () !default;
-$badge-colors: map-merge(
-  (
-    "caerul": $caerul,
-    "green": $green,
-    "yellow": $yellow,
-    "orange": $orange,
-    "red": $red,
-    "hero": $hero,
-    "hero-dark": $hero-dark,
-    "hero-darker": $hero-darker,
-    "control": $control,
-    "control-dark": $control-dark,
-    "control-darker": $control-darker
-  ),
-  $badge-colors
-);
-
-$font-family-sans-serif: var(--fwe-font-family-sans-serif) !default;
-$font-family-monospace: var(--fwe-font-family-monospace) !default;
-$font-family-icons-16: var(--fwe-font-family-icons-16) !default;
-$font-family-icons-24: var(--fwe-font-family-icons-24) !default;
-$font-family-icons-32: var(--fwe-font-family-icons-32) !default;
-
-$font-family-base: $font-family-sans-serif !default;
-
-$font-size-small: var(--fwe-font-size-small) !default;
-$font-size-md: var(--fwe-font-size-md) !default;
-$font-size-base: var(--fwe-font-size-base) !default;
-$font-size-xl: var(--fwe-font-size-xl) !default;
-$font-size-xxl: var(--fwe-font-size-xxl) !default;
-
-$font-weight-normal: var(--fwe-font-weight-normal) !default;
-$font-weight-bold: var(--fwe-font-weight-bold) !default;
-
-$font-weight-base: $font-weight-normal !default;
-$line-height-base: var(--fwe-line-height-base) !default;
-$font-feature-settings: var(--fwe-font-feature-settings) !default;
-$font-variant-numeric: var(--fwe-font-variant-numeric) !default;
-
-$container-padding: 0 8px 0 8px;
-$container-paddings: (
-  xs: 0 16px 0 16px,
-  md: 0 24px 0 24px,
-  lg: 0 60px 0 60px,
-  xxl: 0 86px 0 86px
-) !default;
-
-$grid-columns: 12 !default;
-$grid-gap: 24px !default;
-$grid-breakpoint-xxs: 375px;
-$grid-breakpoint-xs: 600px;
-$grid-breakpoint-sm: 769px;
-$grid-breakpoint-md: 1025px;
-$grid-breakpoint-lg: 1281px;
-$grid-breakpoint-xl: 1441px;
-$grid-breakpoint-xxl: 1921px;
-$grid-breakpoints: (
-  unset: 0,
-  xxs: $grid-breakpoint-xxs,
-  xs: $grid-breakpoint-xs,
-  sm: $grid-breakpoint-sm,
-  md: $grid-breakpoint-md,
-  lg: $grid-breakpoint-lg,
-  xl: $grid-breakpoint-xl,
-  xxl: $grid-breakpoint-xxl
-) !default;
-
-$navbar-height: 64px;
-$navbar-bottom-box-height: 48px;
-
-$toolbar-width: 60px;
-
-$borders: (
-  0: $border,
-  disabled: $border-disabled
-) !default;
-
-$border-radius-s: 4px;
-$border-radius-m: 8px;
-$border-radius-l: 12px;
-$border-radius-xl: 16px;
-$control-border-radius: 4px;
-
-$spacer: 16px !default;
-$spacer-0: 0px;
-$spacer-1: $spacer * 0.25;
-$spacer-2: $spacer * 0.5;
-$spacer-3: $spacer;
-$spacer-4: $spacer * 1.5;
-$spacer-5: $spacer * 2;
-$spacer-6: $spacer * 3;
-$spacer-xxxs: 4px;
-$spacer-xxs: 8px;
-$spacer-xs: 12px;
-$spacer-s: 16px;
-$spacer-m: 24px;
-$spacer-l: 32px;
-$spacer-xl: 48px;
-$spacer-xxl: 64px;
-
-$spacers: (
-  0: $spacer-0,
-  1: $spacer-1,
-  2: $spacer-2,
-  3: $spacer-3,
-  4: $spacer-4,
-  5: $spacer-5,
-  6: $spacer-6,
-  xxxs: $spacer-xxxs,
-  xxs: $spacer-xxs,
-  xs: $spacer-xs,
-  s: $spacer-s,
-  m: $spacer-m,
-  l: $spacer-l,
-  xl: $spacer-xl,
-  xxl: $spacer-xxl
-) !default;
-
-$zindex-dropdown: var(--fwe-z-index-dropdown) !default;
-$zindex-sticky: var(--fwe-z-index-sticky) !default;
-$zindex-fixed: var(--fwe-z-index-fixed) !default;
-$zindex-modal-backdrop: var(--fwe-z-index-modal-backdrop) !default;
-$zindex-modal: var(--fwe-z-index-modal) !default;
-$zindex-popover: var(--fwe-z-index-popover) !default;
-$zindex-tooltip: var(--fwe-z-index-tooltip) !default;
-
-$textarea-row-const: var(--fwe-textarea-row-const) !default;
+$black: var(--fwe-black) !default;
+$white: var(--fwe-white) !default;
+$white-dark: var(--fwe-white-dark) !default;
+$caerul: var(--fwe-caerul) !default;
+$sucaerul: var(--fwe-sucaerul) !default;
+$sucanul: var(--fwe-sucanul) !default;
+
+$gray-100: var(--fwe-gray-100) !default;
+$gray-200: var(--fwe-gray-200) !default;
+$gray-300: var(--fwe-gray-300) !default;
+$gray-400: var(--fwe-gray-400) !default;
+
+$icon-black: var(--fwe-icon-black) !default;
+$icon-white: var(--fwe-icon-white) !default;
+$icon-gray: var(--fwe-icon-gray) !default;
+$icon-hero: var(--fwe-icon-hero) !default;
+$icon-hero-light: var(--fwe-icon-hero-light) !default;
+
+$green: var(--fwe-green) !default;
+$yellow: var(--fwe-yellow) !default;
+$orange: var(--fwe-orange) !default;
+$red: var(--fwe-red) !default;
+$green-dark: var(--fwe-green-dark) !default;
+$yellow-dark: var(--fwe-yellow-dark) !default;
+$orange-dark: var(--fwe-orange-dark) !default;
+$red-dark: var(--fwe-red-dark) !default;
+
+// button vars
+$btn: var(--fwe-btn) !default;
+$btn-hover: var(--fwe-btn-hover) !default;
+$btn-active: var(--fwe-btn-active) !default;
+$btn-disabled: var(--fwe-btn-disabled) !default;
+$btn-text: var(--fwe-btn-text) !default;
+$btn-text-hover: var(--fwe-btn-text-hover) !default;
+$btn-text-disabled: var(--fwe-btn-text-disabled) !default;
+
+$btn-hero: var(--fwe-btn-hero) !default;
+$btn-hero-hover: var(--fwe-btn-hero-hover) !default;
+$btn-hero-active: var(--fwe-btn-hero-active) !default;
+$btn-hero-disabled: var(--fwe-btn-hero-disabled) !default;
+$btn-hero-text: var(--fwe-btn-hero-text) !default;
+$btn-hero-text-hover: var(--fwe-btn-hero-text-hover) !default;
+$btn-hero-text-disabled: var(--fwe-btn-hero-text-disabled) !default;
+
+// control colors
+$text: var(--fwe-text) !default;
+$text-light: var(--fwe-text-light) !default;
+$text-disabled: var(--fwe-text-disabled) !default;
+
+$hero: var(--fwe-hero) !default;
+$hero-dark: var(--fwe-hero-dark) !default;
+$hero-darker: var(--fwe-hero-darker) !default;
+
+$control: var(--fwe-control) !default;
+$control-dark: var(--fwe-control-dark) !default;
+$control-darker: var(--fwe-control-darker) !default;
+$control-disabled: var(--fwe-control-disabled) !default;
+$control-box-shadow: 0px 1px 8px rgba(black, 0.3) !default;
+$control-scrollbar: var(--fwe-control-scrollbar) !default;
+
+$control-border: var(--fwe-control-border) !default;
+$control-border-dark: var(--fwe-control-border-dark) !default;
+$control-border-darker: var(--fwe-control-border-darker) !default;
+
+$background: var(--fwe-background) !default;
+$background-modal: rgba(black, 0.7) !default;
+$background-image-gallery: var(--fwe-background-image-gallery) !default;
+
+$border: var(--fwe-border) !default;
+$border-disabled: var(--fwe-border-disabled) !default;
+
+$snackbar-info-bg: var(--fwe-snackbar-info-bg) !default;
+$snackbar-warning-bg: var(--fwe-snackbar-warning-bg) !default;
+$snackbar-error-bg: var(--fwe-snackbar-error-bg) !default;
+
+// color map
+$colors: () !default;
+$colors: map-merge(
+  (
+    "black": $black,
+    "white": $white,
+    "white-dark": $white-dark,
+    "caerul": $caerul,
+    "sucaerul": $sucaerul,
+    "sucanul": $sucanul,
+    "gray-100": $gray-100,
+    "gray-200": $gray-200,
+    "gray-300": $gray-300,
+    "gray-400": $gray-400,
+    "icon-black": $icon-black,
+    "icon-white": $icon-white,
+    "icon-gray": $icon-gray,
+    "icon-hero": $icon-hero,
+    "icon-hero-light": $icon-hero-light,
+    "green": $green,
+    "yellow": $yellow,
+    "orange": $orange,
+    "red": $red,
+    "green-dark": $green-dark,
+    "yellow-dark": $yellow-dark,
+    "orange-dark": $orange-dark,
+    "red-dark": $red-dark,
+    "text": $text,
+    "text-light": $text-light,
+    "text-disabled": $text-disabled,
+    "hero": $hero,
+    "hero-dark": $hero-dark,
+    "hero-darker": $hero-darker,
+    "control": $control,
+    "control-dark": $control-dark,
+    "control-darker": $control-darker,
+    "control-disabled": $control-disabled,
+    "control-border": $control,
+    "control-border-dark": $control-dark,
+    "control-border-darker": $control-darker,
+    "control-border-disabled": $control-disabled,
+    "background": $background,
+    "background-modal": $background-modal,
+    "border": $border,
+    "border-disabled": $border-disabled
+  ),
+  $colors
+);
+
+$badge-colors: () !default;
+$badge-colors: map-merge(
+  (
+    "caerul": $caerul,
+    "green": $green,
+    "yellow": $yellow,
+    "orange": $orange,
+    "red": $red,
+    "hero": $hero,
+    "hero-dark": $hero-dark,
+    "hero-darker": $hero-darker,
+    "control": $control,
+    "control-dark": $control-dark,
+    "control-darker": $control-darker
+  ),
+  $badge-colors
+);
+
+$font-family-sans-serif: var(--fwe-font-family-sans-serif) !default;
+$font-family-monospace: var(--fwe-font-family-monospace) !default;
+$font-family-icons-16: var(--fwe-font-family-icons-16) !default;
+$font-family-icons-24: var(--fwe-font-family-icons-24) !default;
+$font-family-icons-32: var(--fwe-font-family-icons-32) !default;
+
+$font-family-base: $font-family-sans-serif !default;
+
+$font-size-small: var(--fwe-font-size-small) !default;
+$font-size-md: var(--fwe-font-size-md) !default;
+$font-size-base: var(--fwe-font-size-base) !default;
+$font-size-xl: var(--fwe-font-size-xl) !default;
+$font-size-xxl: var(--fwe-font-size-xxl) !default;
+
+$font-weight-normal: var(--fwe-font-weight-normal) !default;
+$font-weight-bold: var(--fwe-font-weight-bold) !default;
+
+$font-weight-base: $font-weight-normal !default;
+$line-height-base: var(--fwe-line-height-base) !default;
+$font-feature-settings: var(--fwe-font-feature-settings) !default;
+$font-variant-numeric: var(--fwe-font-variant-numeric) !default;
+
+$container-padding: 0 8px 0 8px;
+$container-paddings: (
+  xs: 0 16px 0 16px,
+  md: 0 24px 0 24px,
+  lg: 0 60px 0 60px,
+  xxl: 0 86px 0 86px
+) !default;
+
+$grid-columns: 12 !default;
+$grid-gap: 24px !default;
+$grid-breakpoint-xxs: 375px;
+$grid-breakpoint-xs: 600px;
+$grid-breakpoint-sm: 769px;
+$grid-breakpoint-md: 1025px;
+$grid-breakpoint-lg: 1281px;
+$grid-breakpoint-xl: 1441px;
+$grid-breakpoint-xxl: 1921px;
+$grid-breakpoints: (
+  unset: 0,
+  xxs: $grid-breakpoint-xxs,
+  xs: $grid-breakpoint-xs,
+  sm: $grid-breakpoint-sm,
+  md: $grid-breakpoint-md,
+  lg: $grid-breakpoint-lg,
+  xl: $grid-breakpoint-xl,
+  xxl: $grid-breakpoint-xxl
+) !default;
+
+$navbar-height: 64px;
+$navbar-bottom-box-height: 48px;
+
+$toolbar-width: 60px;
+
+$borders: (
+  0: $border,
+  disabled: $border-disabled
+) !default;
+
+$border-radius-s: 4px;
+$border-radius-m: 8px;
+$border-radius-l: 12px;
+$border-radius-xl: 16px;
+$control-border-radius: 4px;
+
+$spacer: 16px !default;
+$spacer-0: 0px;
+$spacer-1: $spacer * 0.25;
+$spacer-2: $spacer * 0.5;
+$spacer-3: $spacer;
+$spacer-4: $spacer * 1.5;
+$spacer-5: $spacer * 2;
+$spacer-6: $spacer * 3;
+$spacer-xxxs: 4px;
+$spacer-xxs: 8px;
+$spacer-xs: 12px;
+$spacer-s: 16px;
+$spacer-m: 24px;
+$spacer-l: 32px;
+$spacer-xl: 48px;
+$spacer-xxl: 64px;
+
+$spacers: (
+  0: $spacer-0,
+  1: $spacer-1,
+  2: $spacer-2,
+  3: $spacer-3,
+  4: $spacer-4,
+  5: $spacer-5,
+  6: $spacer-6,
+  xxxs: $spacer-xxxs,
+  xxs: $spacer-xxs,
+  xs: $spacer-xs,
+  s: $spacer-s,
+  m: $spacer-m,
+  l: $spacer-l,
+  xl: $spacer-xl,
+  xxl: $spacer-xxl
+) !default;
+
+$zindex-dropdown: var(--fwe-z-index-dropdown) !default;
+$zindex-sticky: var(--fwe-z-index-sticky) !default;
+$zindex-fixed: var(--fwe-z-index-fixed) !default;
+$zindex-modal-backdrop: var(--fwe-z-index-modal-backdrop) !default;
+$zindex-modal: var(--fwe-z-index-modal) !default;
+$zindex-popover: var(--fwe-z-index-popover) !default;
+$zindex-tooltip: var(--fwe-z-index-tooltip) !default;
+
+$textarea-row-const: var(--fwe-textarea-row-const) !default;

package/scss/festo-web-essentials.scss

@@ -1,5 +1,5 @@
 /*!
- * Festo UI - Web Essentials v3.1.0 (https://storybook.festo.design/)
+ * Festo UI - Web Essentials v5.0.0 (https://storybook.festo.design/)
  * Copyright 2022 Festo SE & Co. KG
  * Licensed under Apache-2.0
  */