@graupl/graupl 1.0.0-beta.10 → 1.0.0-beta.12

package/packages/core/src/scss/utilities/container/_index.scss

@@ -1,174 +0,0 @@
-// @graupl/core container utilities styles.
-//
-// This file generates the container utility classes provided by Graupl.
-//
-// The following classes are generated by default:
-// - `.container-type-inline`: Sets the container-type property to `inline-size`.
-// - `.container-type-normal`: Sets the container-type property to `normal`.
-// - `.container-type-size`: Sets the container-type property to `size`.
-// - `.container-type-scroll`: Sets the container-type property to `scroll-state`.
-//
-// 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.
-// - `$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.
-// - `$container-type-selector-prefix`: The prefix for the utility classes.
-// - `$base-container-type-properties`: The base properties and values for the container-type utility classes.
-// - `$custom-container-type-properties`: The custom properties and values for the container-type utility classes.
-// - `$container-type-properties`: The merged properties and values for the container-type 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:container-inline` will set the `container-type` property to `inline-size` 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:[container-type-class]` will set the `container-type` 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:[container-type-class]` will set the `container-type` 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:[container-type-class]` will set the `container-type` property to `value` when the parent container is larger than the `md` breakpoint.
-//
-// @example
-//   <div class="container-type-inline">This div now has an inline container type.</div>
-
-@use "../../defaults" as root-defaults;
-@use "../../mixins/layer" as *;
-@use "../../mixins/utility";
-@use "../../theme/color/variables" as color;
-@use "defaults";
-@use "sass:map";
-@use "variables" as *;
-
-@include layer(utilities) {
-  // `.`
-  $selector-prefix: defaults.$selector-base;
-
-  // For each container type property, create a utility class.
-  @each $name, $value in defaults.$container-type-properties {
-    // e.g. `.container-type-inline`
-    $selector: #{$selector-prefix}#{defaults.$container-type-selector-prefix}#{$name};
-
-    @include utility.create(
-      $selector,
-      container-type,
-      $value,
-      $important: #{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};
-
-      // For each container type property, create a utility class.
-      @each $name, $value in defaults.$container-type-properties {
-        // e.g. `.md:container-type-inline`
-        $selector: #{$selector-prefix}#{defaults.$container-type-selector-prefix}#{$name};
-
-        @include utility.create(
-          $selector,
-          container-type,
-          $value,
-          $important: #{defaults.$use-important},
-          $screen: $screen-name
-        );
-      }
-    }
-  }
-
-  // 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};
-
-        // For each container type property, create a utility class.
-        @each $name, $value in defaults.$container-type-properties {
-          // e.g. `.dark:container-type-inline` or `.light:container-type-normal`
-          $selector: #{$selector-prefix}#{defaults.$container-type-selector-prefix}#{$name};
-
-          @include utility.create(
-            $selector,
-            container-type,
-            $value,
-            $important: #{defaults.$use-important},
-            $theme: $theme-name
-          );
-        }
-      }
-    }
-  }
-
-  // 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};
-
-      // For each container type property, create a utility class.
-      @each $name, $value in defaults.$container-type-properties {
-        // e.g. `.hover:container-type-inline` or `.focus:container-type-normal`
-        $selector: #{$selector-prefix}#{defaults.$container-type-selector-prefix}#{$name};
-
-        @include utility.create(
-          $selector,
-          container-type,
-          $value,
-          $important: #{defaults.$use-important},
-          $state: $state-name
-        );
-      }
-    }
-  }
-
-  // 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};
-
-      // For each container type property, create a utility class.
-      @each $name, $value in defaults.$container-type-properties {
-        // e.g. `.cq:md:container-type-inline`
-        $selector: #{$selector-prefix}#{defaults.$container-type-selector-prefix}#{$name};
-
-        @include utility.create(
-          $selector,
-          container-type,
-          $value,
-          $important: #{defaults.$use-important},
-          $container: $container-name
-        );
-      }
-    }
-  }
-}

package/packages/core/src/scss/utilities/container/_variables.scss

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

package/packages/core/src/scss/utilities/display/_defaults.scss

@@ -1,47 +0,0 @@
-// @graupl/core display 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 "../../defaults" as root-defaults;
-@use "sass:map";
-
-// Utility modifiers.
-$selector-base: root-defaults.$utility-selector-base !default;
-$use-important: root-defaults.$use-important !default;
-$screen-aware: true !default;
-$theme-aware: false !default;
-$state-aware: false !default;
-$container-aware: true !default;
-$screen-aware-separator: root-defaults.$utility-screen-aware-separator !default;
-$theme-aware-separator: root-defaults.$utility-theme-aware-separator !default;
-$state-aware-separator: root-defaults.$utility-state-aware-separator !default;
-$container-aware-separator: root-defaults.$utility-container-aware-separator !default;
-$screen-aware-selector-prefix: root-defaults.$utility-screen-aware-selector-prefix !default;
-$theme-aware-selector-prefix: root-defaults.$utility-theme-aware-selector-prefix !default;
-$state-aware-selector-prefix: root-defaults.$utility-state-aware-selector-prefix !default;
-$container-aware-selector-prefix: root-defaults.$utility-container-aware-selector-prefix !default;
-
-// Display properties.
-$display-selector-prefix: "display-" !default;
-$base-display-properties: (
-  block: block,
-  inline-block: inline-block,
-  inline: inline,
-  flex: flex,
-  inline-flex: inline-flex,
-  grid: grid,
-  inline-grid: inline-grid,
-  flow-root: flow-root,
-  none: none,
-  contents: contents,
-  list-item: list-item,
-);
-$custom-display-properties: () !default;
-$display-properties: map.merge(
-  $base-display-properties,
-  $custom-display-properties
-);

package/packages/core/src/scss/utilities/display/_index.scss

@@ -1,184 +0,0 @@
-// @graupl/core display utilities styles.
-//
-// This file generates the display utility classes provided by Graupl.
-//
-// The following classes are generated by default:
-// - `.display-block`: Sets the display property to `block`.
-// - `.display-inline-block`: Sets the display property to `inline-block`.
-// - `.display-inline`: Sets the display property to `inline`.
-// - `.display-flex`: Sets the display property to `flex`.
-// - `.display-inline-flex`: Sets the display property to `inline-flex`.
-// - `.display-grid`: Sets the display property to `grid`.
-// - `.display-inline-grid`: Sets the display property to `inline-grid`.
-// - `.display-flow-root`: Sets the display property to `flow-root`.
-// - `.display-none`: Sets the display property to `none`.
-// - `.display-contents`: Sets the display property to `contents`.
-// - `.display-list-item`: Sets the display property to `list-item`
-//
-// 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.
-// - `$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.
-// - `$display-selector-prefix`: The prefix for the display utility classes.
-// - `$base-display-properties`: The base properties and values for the display utility classes.
-// - `$custom-display-properties`: The custom properties and values for the display utility classes.
-// - `$display-properties`: The merged properties and values for the display utility classes.
-//
-// Generating responsive utility classes can be done by setting `$screen-aware`, `$theme-aware`, or `$state-aware` to `true`.
-// By default, only screen-aware 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:display-block` will set the `display` property to `block` 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:display-block` will set the `display` property to `block` 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:display-block` will set the `display` property to `block` 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:display-block` will set the `display` property to `block` when the parent container is larger than the `md` breakpoint.
-//
-// @example
-//   <div class="display-block">This is a block element.</div>
-//
-// @example
-//   <div class="display-none md:display-block">This is element will be `display: none` unless the screen size is `md` or larger.</div>
-
-@use "../../defaults" as root-defaults;
-@use "../../mixins/layer" as *;
-@use "../../mixins/utility";
-@use "../../theme/color/variables" as color;
-@use "defaults";
-@use "sass:map";
-@use "variables" as *;
-
-@include layer(utilities) {
-  // `.`
-  $selector-prefix: defaults.$selector-base;
-
-  // For each display property, create a utility class.
-  @each $name, $property in defaults.$display-properties {
-    // e.g. `.display-block` or `.display-flex`
-    $selector: #{$selector-prefix}#{defaults.$display-selector-prefix}#{$name};
-
-    @include utility.create(
-      $selector,
-      display,
-      $property,
-      $important: defaults.$use-important
-    );
-  }
-
-  // Create 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};
-
-      // For each display property, create a utility class.
-      @each $name, $property in defaults.$display-properties {
-        // e.g. `.md:display-block` or `.lg:display-flex`
-        $selector: #{$selector-prefix}#{defaults.$display-selector-prefix}#{$name};
-
-        @include utility.create(
-          $selector,
-          display,
-          $property,
-          $important: defaults.$use-important,
-          $screen: $screen-name
-        );
-      }
-    }
-  }
-
-  // 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};
-
-        // For each display property, create a utility class.
-        @each $name, $property in defaults.$display-properties {
-          // e.g. `.dark:display-block` or `.light:display-flex`
-          $selector: #{$selector-prefix}#{defaults.$display-selector-prefix}#{$name};
-
-          @include utility.create(
-            $selector,
-            display,
-            $property,
-            $important: defaults.$use-important,
-            $theme: $theme-name
-          );
-        }
-      }
-    }
-  }
-
-  // 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};
-
-      // For each display property, create a utility class.
-      @each $name, $property in defaults.$display-properties {
-        // e.g. `.hover:display-block` or `.focus:display-flex`
-        $selector: #{$selector-prefix}#{defaults.$display-selector-prefix}#{$name};
-
-        @include utility.create(
-          $selector,
-          display,
-          $property,
-          $important: defaults.$use-important,
-          $state: $state-name
-        );
-      }
-    }
-  }
-
-  // Create 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};
-
-      // For each display property, create a utility class.
-      @each $name, $property in defaults.$display-properties {
-        // e.g. `.md:display-block` or `.lg:display-flex`
-        $selector: #{$selector-prefix}#{defaults.$display-selector-prefix}#{$name};
-
-        @include utility.create(
-          $selector,
-          display,
-          $property,
-          $important: defaults.$use-important,
-          $container: $container-name
-        );
-      }
-    }
-  }
-}

package/packages/core/src/scss/utilities/display/_variables.scss

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

package/packages/core/src/scss/utilities/flex/_defaults.scss

@@ -1,99 +0,0 @@
-// @graupl/core flex 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 "../../defaults" as root-defaults;
-@use "sass:map";
-
-// Utility modifiers.
-$selector-base: root-defaults.$utility-selector-base !default;
-$use-important: root-defaults.$use-important !default;
-$screen-aware: false !default;
-$theme-aware: false !default;
-$state-aware: false !default;
-$container-aware: false !default;
-$screen-aware-separator: root-defaults.$utility-screen-aware-separator !default;
-$theme-aware-separator: root-defaults.$utility-theme-aware-separator !default;
-$state-aware-separator: root-defaults.$utility-state-aware-separator !default;
-$container-aware-separator: root-defaults.$utility-container-aware-separator !default;
-$screen-aware-selector-prefix: root-defaults.$utility-screen-aware-selector-prefix !default;
-$theme-aware-selector-prefix: root-defaults.$utility-theme-aware-selector-prefix !default;
-$state-aware-selector-prefix: root-defaults.$utility-state-aware-selector-prefix !default;
-$container-aware-selector-prefix: root-defaults.$utility-container-aware-selector-prefix !default;
-
-// Flex direction properties.
-$flex-direction-selector-prefix: "flex-" !default;
-$base-flex-direction-properties: (
-  row: row,
-  row-reverse: row-reverse,
-  col: column,
-  col-reverse: column-reverse,
-);
-$custom-flex-direction-properties: () !default;
-$flex-direction-properties: map.merge(
-  $base-flex-direction-properties,
-  $custom-flex-direction-properties
-);
-
-// Flex wrap properties.
-$flex-wrap-selector-prefix: "flex-" !default;
-$base-flex-wrap-properties: (
-  wrap: wrap,
-  wrap-reverse: wrap-reverse,
-  nowrap: nowrap,
-);
-$custom-flex-wrap-properties: () !default;
-$flex-wrap-properties: map.merge(
-  $base-flex-wrap-properties,
-  $custom-flex-wrap-properties
-);
-
-// Flex grow properties.
-$flex-grow-selector-prefix: "flex-" !default;
-$base-flex-grow-properties: (
-  grow: 1,
-  no-grow: 0,
-);
-$custom-flex-grow-properties: () !default;
-$flex-grow-properties: map.merge(
-  $base-flex-grow-properties,
-  $custom-flex-grow-properties
-);
-
-// Flex shrink properties.
-$flex-shrink-selector-prefix: "flex-" !default;
-$base-flex-shrink-properties: (
-  shrink: 1,
-  no-shrink: 0,
-);
-$custom-flex-shrink-properties: () !default;
-$flex-shrink-properties: map.merge(
-  $base-flex-shrink-properties,
-  $custom-flex-shrink-properties
-);
-
-// Flex basis properties.
-$flex-basis-selector-prefix: "flex-" !default;
-$base-flex-basis-properties: (
-  auto: auto,
-  fit-content: fit-content,
-  max-content: max-content,
-  min-content: min-content,
-  content: content,
-  0: 0,
-  full: 100%,
-  quarter: 25%,
-  half: 50%,
-  three-quarters: 75%,
-  third: calc(100% / 3),
-  two-thirds: calc(100% / 1.5),
-);
-$custom-flex-basis-properties: () !default;
-$flex-basis-properties: map.merge(
-  $base-flex-basis-properties,
-  $custom-flex-basis-properties
-);