@graupl/navigation-shelf 1.0.0-beta.16

package/src/scss/utilities/shelf-aware/_index.scss

@@ -0,0 +1,383 @@
+// @graupl/navigation-shelf [_template] utilities styles.
+//
+// This file generates the [_template] utility classes provided by Graupl.
+//
+// The following classes are generated by default:
+// - `.template-class`: Applies the base value for the property.
+//
+// The following custom properties control the generated classes:
+// - N/A.
+//
+// The following variables control the generated classes:
+// - `$selector-base`: The base selector for the utility classes.
+// - `$use-important`: A flag to determine if the `!important` flag should be added to the utility classes.
+// - `$generate-base-utilities`: A flag to determine if the base utility classes should be generated.
+// - `$screen-aware`: A flag to generate screen-aware utility classes.
+// - `$theme-aware`: A flag to generate theme-aware utility classes.
+// - `$state-aware`: A flag to generate state-aware utility classes.
+// - `$container-aware`: A flag to generate container-aware utility classes.
+// - `$screen-aware-separator`: The separator for screen-aware utility classes.
+// - `$theme-aware-separator`: The separator for theme-aware utility classes.
+// - `$state-aware-separator`: The separator for state-aware utility classes.
+// - `$container-aware-separator`: The separator for container-aware utility classes.
+// - `$screen-aware-selector-prefix`: The prefix for screen-aware utility classes.
+// - `$theme-aware-selector-prefix`: The prefix for theme-aware utility classes.
+// - `$state-aware-selector-prefix`: The prefix for state-aware utility classes.
+// - `$container-aware-selector-prefix`: The prefix for container-aware utility classes.
+// - `$template-selector-prefix`: The prefix for the utility classes.
+// - `$custom-template-properties`: The custom properties and values for the template utility classes.
+// - `$template-properties`: The merged properties and values for the template utility classes.
+//
+// Generating responsive utility classes can be done by setting `$screen-aware`, `$theme-aware`, or `$state-aware` to `true`.
+// By default, no responsive utility classes are generated.
+//
+// When set to true, screen-aware utility classes will be generated for each screen size in the following pattern:
+// - `.{screen-prefix}{screen-name}:{prefix}{value}`
+//
+// e.g. `.sm:[template-class]` will set the `template` property to `value` on screens equal to or larger than the `sm` breakpoint.
+//
+// When set to true, theme-aware utility classes will be generated for each theme in the following pattern:
+// - `.{theme-prefix}{theme-name}:{prefix}{value}`
+//
+// e.g. `.dark:[template-class]` will set the `template` property to `value` when the `dark` theme is active.
+//
+// When set to true, state-aware utility classes will be generated for each state in the following pattern:
+// - `.{state-prefix}{state-name}:{prefix}{value}`
+//
+// e.g. `.hover:[template-class]` will set the `template` property to `value` when the element is hovered.
+//
+// When set to true, container-aware utility classes will be generated for each container in the following pattern:
+// - `.{container-prefix}{container-name}:{prefix}{value}`
+//
+// e.g. `.cq:md:[template-class]` will set the `template` property to `value` when the parent container is larger than the `md` breakpoint.
+//
+// @example
+//   <div class="template-class">This content showing you how to use this.</div>
+
+@use "pkg:@graupl/core/src/defaults" as root-defaults;
+@use "pkg:@graupl/core/src/mixins/layer" as *;
+@use "pkg:@graupl/core/src/mixins/utility";
+@use "pkg:@graupl/core/src/theme/color/variables" as color;
+@use "defaults";
+@use "sass:map";
+@use "variables" as *;
+@use "../../component/navigation-shelf/defaults" as navigation-shelf-defaults;
+@use "../../component/navigation-shelf/variables" as navigation-shelf-variables;
+@use "pkg:@graupl/core/src/functions/important";
+
+@include layer(utilities) {
+  // `.`
+  $selector-prefix: defaults.$selector-base;
+
+  // `.shelf-aware`
+  $selector: #{$selector-prefix}#{defaults.$shelf-aware-selector};
+
+  @include utility.create-mapped(
+    $selector,
+    (
+      padding-right: 0,
+      padding-left: navigation-shelf-variables.$navigation-shelf-closed-width,
+    ),
+    $important: #{defaults.$use-important}
+  ) {
+    // `&.locked`
+    &#{navigation-shelf-defaults.$navigation-shelf-locked-selector-base}#{navigation-shelf-defaults.$navigation-shelf-locked-selector} {
+      padding-left: important.insert(
+        navigation-shelf-variables.$navigation-shelf-open-width,
+        defaults.$use-important
+      );
+    }
+
+    // `&.left-side`
+    &#{navigation-shelf-defaults.$navigation-shelf-side-selector-base}#{navigation-shelf-defaults.$navigation-shelf-left-side-selector}#{navigation-shelf-defaults.$navigation-shelf-side-selector-suffix} {
+      padding-right: important.insert(0, defaults.$use-important);
+      padding-left: important.insert(
+        navigation-shelf-variables.$navigation-shelf-closed-width,
+        defaults.$use-important
+      );
+
+      // `&.locked`
+      &#{navigation-shelf-defaults.$navigation-shelf-locked-selector-base}#{navigation-shelf-defaults.$navigation-shelf-locked-selector} {
+        padding-left: important.insert(
+          navigation-shelf-variables.$navigation-shelf-open-width,
+          defaults.$use-important
+        );
+      }
+    }
+
+    // `&.right-side`
+    &#{navigation-shelf-defaults.$navigation-shelf-side-selector-base}#{navigation-shelf-defaults.$navigation-shelf-right-side-selector}#{navigation-shelf-defaults.$navigation-shelf-side-selector-suffix} {
+      padding-right: important.insert(
+        navigation-shelf-variables.$navigation-shelf-closed-width,
+        defaults.$use-important
+      );
+      padding-left: important.insert(0, defaults.$use-important);
+
+      // `&.locked`
+      &#{navigation-shelf-defaults.$navigation-shelf-locked-selector-base}#{navigation-shelf-defaults.$navigation-shelf-locked-selector} {
+        padding-right: important.insert(
+          navigation-shelf-variables.$navigation-shelf-open-width,
+          defaults.$use-important
+        );
+      }
+    }
+  }
+
+  // Generate screen-aware utilities.
+  @if defaults.$screen-aware and root-defaults.$screen-aware-utilities {
+    @each $screen-name in map.keys(root-defaults.$screen-sizes) {
+      // e.g. `.md:` or `.lg:`
+      $selector-prefix: #{defaults.$selector-base}#{defaults.$screen-aware-selector-prefix}#{$screen-name}#{defaults.$screen-aware-separator};
+
+      // e.g. `.md:shelf-aware`
+      $selector: #{$selector-prefix}#{defaults.$shelf-aware-selector};
+
+      @include utility.create-mapped(
+        $selector,
+        (
+          padding-right: 0,
+          padding-left:
+            navigation-shelf-variables.$navigation-shelf-closed-width,
+        ),
+        $important: #{defaults.$use-important},
+        $screen: $screen-name
+      ) {
+        // `&.locked`
+        &#{navigation-shelf-defaults.$navigation-shelf-locked-selector-base}#{navigation-shelf-defaults.$navigation-shelf-locked-selector} {
+          padding-left: important.insert(
+            navigation-shelf-variables.$navigation-shelf-open-width,
+            defaults.$use-important
+          );
+        }
+
+        // `&.left-side`
+        &#{navigation-shelf-defaults.$navigation-shelf-side-selector-base}#{navigation-shelf-defaults.$navigation-shelf-left-side-selector}#{navigation-shelf-defaults.$navigation-shelf-side-selector-suffix} {
+          padding-right: important.insert(0, defaults.$use-important);
+          padding-left: important.insert(
+            navigation-shelf-variables.$navigation-shelf-closed-width,
+            defaults.$use-important
+          );
+
+          // `&.locked`
+          &#{navigation-shelf-defaults.$navigation-shelf-locked-selector-base}#{navigation-shelf-defaults.$navigation-shelf-locked-selector} {
+            padding-left: important.insert(
+              navigation-shelf-variables.$navigation-shelf-open-width,
+              defaults.$use-important
+            );
+          }
+        }
+
+        // `&.right-side`
+        &#{navigation-shelf-defaults.$navigation-shelf-side-selector-base}#{navigation-shelf-defaults.$navigation-shelf-right-side-selector}#{navigation-shelf-defaults.$navigation-shelf-side-selector-suffix} {
+          padding-right: important.insert(
+            navigation-shelf-variables.$navigation-shelf-closed-width,
+            defaults.$use-important
+          );
+          padding-left: important.insert(0, defaults.$use-important);
+
+          // `&.locked`
+          &#{navigation-shelf-defaults.$navigation-shelf-locked-selector-base}#{navigation-shelf-defaults.$navigation-shelf-locked-selector} {
+            padding-right: important.insert(
+              navigation-shelf-variables.$navigation-shelf-open-width,
+              defaults.$use-important
+            );
+          }
+        }
+      }
+    }
+  }
+
+  // Generate theme-aware utilities.
+  @if defaults.$theme-aware and root-defaults.$theme-aware-utilities {
+    @each $theme-name, $colors in color.$themes {
+      @if $theme-name != active {
+        // e.g. `.dark:` or `.light:`
+        $selector-prefix: #{defaults.$selector-base}#{defaults.$theme-aware-selector-prefix}#{$theme-name}#{defaults.$theme-aware-separator};
+
+        // e.g. `.dark:shelf-aware` or `.light:shelf-aware`
+        $selector: #{$selector-prefix}#{defaults.$shelf-aware-selector};
+
+        @include utility.create-mapped(
+          $selector,
+          (
+            padding-right: 0,
+            padding-left:
+              navigation-shelf-variables.$navigation-shelf-closed-width,
+          ),
+          $important: #{defaults.$use-important},
+          $theme: $theme-name
+        ) {
+          // `&.locked`
+          &#{navigation-shelf-defaults.$navigation-shelf-locked-selector-base}#{navigation-shelf-defaults.$navigation-shelf-locked-selector} {
+            padding-left: important.insert(
+              navigation-shelf-variables.$navigation-shelf-open-width,
+              defaults.$use-important
+            );
+          }
+
+          // `&.left-side`
+          &#{navigation-shelf-defaults.$navigation-shelf-side-selector-base}#{navigation-shelf-defaults.$navigation-shelf-left-side-selector}#{navigation-shelf-defaults.$navigation-shelf-side-selector-suffix} {
+            padding-right: important.insert(0, defaults.$use-important);
+            padding-left: important.insert(
+              navigation-shelf-variables.$navigation-shelf-closed-width,
+              defaults.$use-important
+            );
+
+            // `&.locked`
+            &#{navigation-shelf-defaults.$navigation-shelf-locked-selector-base}#{navigation-shelf-defaults.$navigation-shelf-locked-selector} {
+              padding-left: important.insert(
+                navigation-shelf-variables.$navigation-shelf-open-width,
+                defaults.$use-important
+              );
+            }
+          }
+
+          // `&.right-side`
+          &#{navigation-shelf-defaults.$navigation-shelf-side-selector-base}#{navigation-shelf-defaults.$navigation-shelf-right-side-selector}#{navigation-shelf-defaults.$navigation-shelf-side-selector-suffix} {
+            padding-right: important.insert(
+              navigation-shelf-variables.$navigation-shelf-closed-width,
+              defaults.$use-important
+            );
+            padding-left: important.insert(0, defaults.$use-important);
+
+            // `&.locked`
+            &#{navigation-shelf-defaults.$navigation-shelf-locked-selector-base}#{navigation-shelf-defaults.$navigation-shelf-locked-selector} {
+              padding-right: important.insert(
+                navigation-shelf-variables.$navigation-shelf-open-width,
+                defaults.$use-important
+              );
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // Generate state-aware utilities.
+  @if defaults.$state-aware and root-defaults.$state-aware-utilities {
+    @each $state-name, $value in root-defaults.$state-selectors {
+      // e.g. `.hover:` or `.focus:`
+      $selector-prefix: #{defaults.$selector-base}#{defaults.$state-aware-selector-prefix}#{$state-name}#{defaults.$state-aware-separator};
+
+      // e.g. `.hover:shelf-aware` or `.focus:shelf-aware`
+      $selector: #{$selector-prefix}#{defaults.$shelf-aware-selector};
+
+      @include utility.create-mapped(
+        $selector,
+        (
+          padding-right: 0,
+          padding-left:
+            navigation-shelf-variables.$navigation-shelf-closed-width,
+        ),
+        $important: #{defaults.$use-important},
+        $state: $state-name
+      ) {
+        // `&.locked`
+        &#{navigation-shelf-defaults.$navigation-shelf-locked-selector-base}#{navigation-shelf-defaults.$navigation-shelf-locked-selector} {
+          padding-left: important.insert(
+            navigation-shelf-variables.$navigation-shelf-open-width,
+            defaults.$use-important
+          );
+        }
+
+        // `&.left-side`
+        &#{navigation-shelf-defaults.$navigation-shelf-side-selector-base}#{navigation-shelf-defaults.$navigation-shelf-left-side-selector}#{navigation-shelf-defaults.$navigation-shelf-side-selector-suffix} {
+          padding-right: important.insert(0, defaults.$use-important);
+          padding-left: important.insert(
+            navigation-shelf-variables.$navigation-shelf-closed-width,
+            defaults.$use-important
+          );
+
+          // `&.locked`
+          &#{navigation-shelf-defaults.$navigation-shelf-locked-selector-base}#{navigation-shelf-defaults.$navigation-shelf-locked-selector} {
+            padding-left: important.insert(
+              navigation-shelf-variables.$navigation-shelf-open-width,
+              defaults.$use-important
+            );
+          }
+        }
+
+        // `&.right-side`
+        &#{navigation-shelf-defaults.$navigation-shelf-side-selector-base}#{navigation-shelf-defaults.$navigation-shelf-right-side-selector}#{navigation-shelf-defaults.$navigation-shelf-side-selector-suffix} {
+          padding-right: important.insert(
+            navigation-shelf-variables.$navigation-shelf-closed-width,
+            defaults.$use-important
+          );
+          padding-left: important.insert(0, defaults.$use-important);
+
+          // `&.locked`
+          &#{navigation-shelf-defaults.$navigation-shelf-locked-selector-base}#{navigation-shelf-defaults.$navigation-shelf-locked-selector} {
+            padding-right: important.insert(
+              navigation-shelf-variables.$navigation-shelf-open-width,
+              defaults.$use-important
+            );
+          }
+        }
+      }
+    }
+  }
+
+  // Generate container-aware utilities.
+  @if defaults.$container-aware and root-defaults.$container-aware-utilities {
+    @each $container-name in map.keys(root-defaults.$container-sizes) {
+      // e.g. `.md:` or `.lg:`
+      $selector-prefix: #{defaults.$selector-base}#{defaults.$container-aware-selector-prefix}#{$container-name}#{defaults.$container-aware-separator};
+
+      // e.g. `.cq:md:shelf-aware`
+      $selector: #{$selector-prefix}#{defaults.$shelf-aware-selector};
+
+      @include utility.create-mapped(
+        $selector,
+        (
+          padding-right: 0,
+          padding-left:
+            navigation-shelf-variables.$navigation-shelf-closed-width,
+        ),
+        $important: #{defaults.$use-important},
+        $container: $container-name
+      ) {
+        // `&.locked`
+        &#{navigation-shelf-defaults.$navigation-shelf-locked-selector-base}#{navigation-shelf-defaults.$navigation-shelf-locked-selector} {
+          padding-left: important.insert(
+            navigation-shelf-variables.$navigation-shelf-open-width,
+            defaults.$use-important
+          );
+        }
+
+        // `&.left-side`
+        &#{navigation-shelf-defaults.$navigation-shelf-side-selector-base}#{navigation-shelf-defaults.$navigation-shelf-left-side-selector}#{navigation-shelf-defaults.$navigation-shelf-side-selector-suffix} {
+          padding-right: important.insert(0, defaults.$use-important);
+          padding-left: important.insert(
+            navigation-shelf-variables.$navigation-shelf-closed-width,
+            defaults.$use-important
+          );
+
+          // `&.locked`
+          &#{navigation-shelf-defaults.$navigation-shelf-locked-selector-base}#{navigation-shelf-defaults.$navigation-shelf-locked-selector} {
+            padding-left: important.insert(
+              navigation-shelf-variables.$navigation-shelf-open-width,
+              defaults.$use-important
+            );
+          }
+        }
+
+        // `&.right-side`
+        &#{navigation-shelf-defaults.$navigation-shelf-side-selector-base}#{navigation-shelf-defaults.$navigation-shelf-right-side-selector}#{navigation-shelf-defaults.$navigation-shelf-side-selector-suffix} {
+          padding-right: important.insert(
+            navigation-shelf-variables.$navigation-shelf-closed-width,
+            defaults.$use-important
+          );
+          padding-left: important.insert(0, defaults.$use-important);
+
+          // `&.locked`
+          &#{navigation-shelf-defaults.$navigation-shelf-locked-selector-base}#{navigation-shelf-defaults.$navigation-shelf-locked-selector} {
+            padding-right: important.insert(
+              navigation-shelf-variables.$navigation-shelf-open-width,
+              defaults.$use-important
+            );
+          }
+        }
+      }
+    }
+  }
+}

package/src/scss/utilities/shelf-aware/_variables.scss

@@ -0,0 +1,6 @@
+// @graupl/navigation-shelf [_template] utilities variables.
+//
+// These values are to be used to directly style components and provide a
+// cleaner way to reference custom properties.
+
+@use "defaults";

package/src/scss/utilities/width/_defaults.scss

@@ -0,0 +1,58 @@
+// @graupl/navigation-shelf width utilities default values.
+//
+// Generally, these should not be used directly when styling components unless a static value is needed.
+// They are mainly used to provide class selectors, fallbacks for custom properties, or loop values.
+//
+// They should not be used to define direct property values (i.e. font-size, color, etc.).
+// Those should be defined as custom properties in the `_variables.scss` file.
+
+@use "../../component/navigation-shelf/variables" as *;
+@use "pkg:@graupl/core/src/defaults" as root-defaults;
+@use "pkg:@graupl/core/src/utilities/width/defaults" as width-defaults;
+@use "pkg:@graupl/core/src/variables" as root-variables;
+@use "sass:map";
+
+// Utility modifiers.
+$selector-base: width-defaults.$selector-base !default;
+$use-important: width-defaults.$use-important !default;
+$generate-base-utilities: width-defaults.$generate-base-utilities !default;
+$screen-aware: width-defaults.$screen-aware !default;
+$theme-aware: width-defaults.$theme-aware !default;
+$state-aware: width-defaults.$state-aware !default;
+$container-aware: width-defaults.$container-aware !default;
+$screen-aware-separator: width-defaults.$screen-aware-separator !default;
+$theme-aware-separator: width-defaults.$theme-aware-separator !default;
+$state-aware-separator: width-defaults.$state-aware-separator !default;
+$container-aware-separator: width-defaults.$container-aware-separator !default;
+$screen-aware-selector-prefix: width-defaults.$screen-aware-selector-prefix !default;
+$theme-aware-selector-prefix: width-defaults.$theme-aware-selector-prefix !default;
+$state-aware-selector-prefix: width-defaults.$state-aware-selector-prefix !default;
+$container-aware-selector-prefix: width-defaults.$container-aware-selector-prefix !default;
+
+// Width properties.
+$width-selector-prefix: width-defaults.$width-selector-prefix !default;
+$max-width-selector-prefix: width-defaults.$max-width-selector-prefix !default;
+$min-width-selector-prefix: width-defaults.$min-width-selector-prefix !default;
+
+// Width values.
+$-width-values: (
+  shelf-min: $navigation-shelf-min-width,
+  shelf-max: $navigation-shelf-max-width,
+  shelf-current: $navigation-shelf-current-width,
+  shelf-closed: $navigation-shelf-closed-width,
+  shelf-open: $navigation-shelf-open-width,
+);
+$custom-width-values: () !default;
+$width-values: () !default;
+
+// @todo remove this once $custom-width-values is removed
+@if $custom-width-values != () {
+  @warn "`$custom-width-values` is deprecated and will be removed in a future release of Graupl. Use `$width-values` instead.";
+
+  $width-values: map.merge($width-values, $custom-width-values);
+}
+
+// Merge custom properties with base properties if generating base utilities.
+@if $generate-base-utilities {
+  $width-values: map.merge($-width-values, $width-values);
+}