@festo-ui/web-essentials 7.3.0-dev.498 → 7.3.0-dev.501

package/scss/light/_flex-light.scss

@@ -0,0 +1,258 @@
+@use "sass:list";
+@use "sass:map";
+@use "../utils";
+@use "../variables";
+
+$basic-keywords: normal, stretch, center, start, end, flex-start, flex-end;
+$baseline-keywords: baseline, first baseline, last baseline, safe center, unsafe center;
+$positional-keywords: left, right;
+$content-keywords: space-between, space-around, space-evenly;
+$justify-keywords: auto, self-start, self-end;
+$legacy-keywords: legacy right, legacy left, legacy center;
+$flex-properties: (
+  auto: (
+    flex,
+    auto
+  ),
+  grow-0: (
+    flex-grow,
+    0
+  ),
+  grow-1: (
+    flex-grow,
+    1
+  ),
+  grow-2: (
+    flex-grow,
+    2
+  ),
+  grow-3: (
+    flex-grow,
+    3
+  ),
+  shrink-0: (
+    flex-shrink,
+    0
+  ),
+  shrink-1: (
+    flex-shrink,
+    1
+  ),
+  shrink-2: (
+    flex-shrink,
+    2
+  ),
+  shrink-3: (
+    flex-shrink,
+    3
+  ),
+  basis-0: (
+    flex-basis,
+    0
+  ),
+  basis-auto: (
+    flex-basis,
+    auto
+  ),
+  basis-fill: (
+    flex-basis,
+    fill
+  ),
+  basis-max-content: (
+    flex-basis,
+    max-content
+  ),
+  basis-min-content: (
+    flex-basis,
+    min-content
+  ),
+  basis-fit-content: (
+    flex-basis,
+    fit-content
+  ),
+  basis-content: (
+    flex-basis,
+    content
+  ),
+  wrap: (
+    flex-wrap,
+    wrap
+  ),
+  wrap-reverse: (
+    flex-wrap,
+    wrap-reverse
+  ),
+  nowrap: (
+    flex-wrap,
+    nowrap
+  ),
+  row-nowrap: (
+    flex-flow,
+    row nowrap
+  ),
+  column-wrap: (
+    flex-flow,
+    column wrap
+  ),
+  column-reverse-wrap-reverse: (
+    flex-flow,
+    column-reverse wrap-reverse
+  ),
+  row: (
+    flex-direction,
+    row
+  ),
+  row-reverse: (
+    flex-direction,
+    row-reverse
+  ),
+  column: (
+    flex-direction,
+    column
+  ),
+  column-reverse: (
+    flex-direction,
+    column-reverse
+  )
+) !default;
+
+@mixin flex-helpers($infix: "") {
+  .fwe-ml#{$infix}-auto {
+    margin-left: auto !important;
+  }
+
+  .fwe-mr#{$infix}-auto {
+    margin-right: auto !important;
+  }
+
+  .fwe-mt#{$infix}-auto {
+    margin-top: auto !important;
+  }
+
+  .fwe-mb#{$infix}-auto {
+    margin-bottom: auto !important;
+  }
+
+  .fwe-order#{$infix}-first {
+    order: -1;
+  }
+
+  .fwe-order#{$infix}-last {
+    order: 6;
+  }
+
+  .fwe-order#{$infix}-1 {
+    order: 1;
+  }
+
+  .fwe-order#{$infix}-2 {
+    order: 2;
+  }
+
+  .fwe-order#{$infix}-3 {
+    order: 3;
+  }
+
+  .fwe-order#{$infix}-4 {
+    order: 4;
+  }
+
+  .fwe-order#{$infix}-5 {
+    order: 5;
+  }
+
+  @each $classname, $properties in $flex-properties {
+    $property: list.nth($properties, 1);
+    $value: list.nth($properties, 2);
+
+    .fwe-flex#{$infix}-#{$classname} {
+      #{$property}: $value !important;
+    }
+  }
+
+  @each $property in $basic-keywords {
+    .fwe-align-items#{$infix}-#{$property} {
+      align-items: $property !important;
+    }
+
+    .fwe-align-self#{$infix}-#{$property} {
+      align-self: $property !important;
+    }
+
+    .fwe-align-content#{$infix}-#{$property} {
+      align-content: $property !important;
+    }
+
+    .fwe-justify-items#{$infix}-#{$property} {
+      justify-items: $property !important;
+    }
+
+    .fwe-justify-self#{$infix}-#{$property} {
+      justify-self: $property !important;
+    }
+
+    .fwe-justify-content#{$infix}-#{$property} {
+      justify-content: $property !important;
+    }
+  }
+
+  @each $property in $baseline-keywords {
+    .fwe-align-items#{$infix}-#{$property} {
+      align-items: $property !important;
+    }
+
+    .fwe-align-self#{$infix}-#{$property} {
+      align-self: $property !important;
+    }
+
+    .fwe-align-content#{$infix}-#{$property} {
+      align-content: $property !important;
+    }
+
+    .fwe-justify-items#{$infix}-#{$property} {
+      justify-items: $property !important;
+    }
+
+    .fwe-justify-self#{$infix}-#{$property} {
+      justify-self: $property !important;
+    }
+  }
+
+  @each $property in $positional-keywords {
+    .fwe-justify-items#{$infix}-#{$property} {
+      justify-items: $property !important;
+    }
+
+    .fwe-justify-self#{$infix}-#{$property} {
+      justify-self: $property !important;
+    }
+  }
+
+  @each $property in $content-keywords {
+    .fwe-align-content#{$infix}-#{$property} {
+      align-content: $property !important;
+    }
+
+    .fwe-justify-content#{$infix}-#{$property} {
+      justify-content: $property !important;
+    }
+  }
+
+  @each $property in $justify-keywords {
+    .fwe-justify-items#{$infix}-#{$property} {
+      justify-items: $property !important;
+    }
+
+    .fwe-justify-self#{$infix}-#{$property} {
+      justify-self: $property !important;
+    }
+  }
+
+  @each $property in $legacy-keywords {
+    .fwe-justify-items#{$infix}-#{$property} {
+      justify-items: $property !important;
+    }
+  }
+}
+
+@include flex-helpers();

package/scss/light/_spacing-light.scss

@@ -0,0 +1,52 @@
+@use "sass:map";
+@use "../utils";
+@use "../variables";
+
+$spacers-light: (
+  0: variables.$spacer-0,
+  xxxs: variables.$spacer-xxxs,
+  xxs: variables.$spacer-xxs,
+  xs: variables.$spacer-xs,
+  s: variables.$spacer-s,
+  m: variables.$spacer-m,
+  l: variables.$spacer-l,
+  xl: variables.$spacer-xl,
+  xxl: variables.$spacer-xxl
+) !default;
+
+@mixin spacings($spacers, $infix: "") {
+  @each $spacing, $space in $spacers {
+    @each $property, $abrev in (margin: "fwe-m", padding: "fwe-p") {
+      .#{$abrev}#{$infix}-#{$spacing} {
+        #{$property}: $space !important;
+      }
+
+      .#{$abrev}t#{$infix}-#{$spacing} {
+        #{$property}-top: $space !important;
+      }
+
+      .#{$abrev}b#{$infix}-#{$spacing} {
+        #{$property}-bottom: $space !important;
+      }
+
+      .#{$abrev}l#{$infix}-#{$spacing} {
+        #{$property}-left: $space !important;
+      }
+
+      .#{$abrev}r#{$infix}-#{$spacing} {
+        #{$property}-right: $space !important;
+      }
+
+      .#{$abrev}x#{$infix}-#{$spacing} {
+        #{$property}-right: $space !important;
+        #{$property}-left: $space !important;
+      }
+      .#{$abrev}y#{$infix}-#{$spacing} {
+        #{$property}-top: $space !important;
+        #{$property}-bottom: $space !important;
+      }
+    }
+  }
+}
+
+@include spacings($spacers-light);

package/scss/light/festo-web-essentials-light.scss

@@ -0,0 +1,59 @@
+/*!
+ * Festo UI - Web Essentials light (https://storybook.festo.design/)
+ * Copyright 2025 Festo SE & Co. KG
+ * Licensed under Apache-2.0
+ */
+
+@use "../rfs";
+@use "../variables";
+@use "../mixins";
+@use "../fonts";
+@use "../colors";
+
+@use "../type";
+@use "../root";
+@use "../normalize";
+@use "../utils";
+
+@use "../misc";
+@use "../display";
+@use "spacing-light";
+@use "border-light";
+@use "flex-light";
+
+@use "../layout";
+@use "../toolbar";
+@use "../table";
+@use "../list";
+@use "../navbar";
+@use "../mobile-flyout";
+@use "../breadcrumb";
+@use "../text-link";
+@use "../text-input";
+@use "../chips";
+@use "../radio";
+@use "../checkbox";
+@use "../switch";
+@use "../button";
+@use "../slider";
+@use "../loading-indicator";
+@use "../select";
+@use "../badge";
+@use "../cards";
+@use "../progressbar";
+@use "../pagination";
+@use "../snackbar";
+@use "../modal";
+@use "../segment";
+@use "../popover";
+@use "../timepicker";
+@use "../navbar-menu";
+@use "../scroll";
+@use "../search-input";
+@use "../stepper-horizontal";
+@use "../stepper-vertical";
+@use "../bottom-navigation";
+@use "../accordion";
+@use "../tree";
+@use "../sidebar-overlay";
+@use "../bottom-sheet";