@graupl/core 1.0.0-beta.22 → 1.0.0-beta.24

package/src/scss/utilities/visibility/_defaults.scss

@@ -33,19 +33,8 @@ $-visibility-properties: (
   hidden: hidden,
   collapse: collapse,
 );
-$custom-visibility-properties: () !default;
 $visibility-properties: () !default;
 
-// @todo remove this once $custom-visibility-properties is removed
-@if $custom-visibility-properties != () {
-  @warn "`$custom-visibility-properties` is deprecated and will be removed in a future release of Graupl. Use `$visibility-properties` instead.";
-
-  $visibility-properties: map.merge(
-    $visibility-properties,
-    $custom-visibility-properties
-  );
-}
-
 @if $generate-base-utilities {
   $visibility-properties: map.merge(
     $-visibility-properties,

package/src/scss/utilities/visibility/_index.scss

@@ -11,24 +11,25 @@
 // - 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.
-// - `$visibility-selector-prefix`: The prefix for the visibility utility classes.
-// - `$custom-visibility-properties`: [DEPRECATED] The custom properties and values for the visibility utility classes.
-// - `$visibility-properties`: The combined properties and values for the visibility utility classes.
+// | Variable                           | Description                                    | Default Value               |
+// | ---                                | ---                                            | ---                         |
+// | `$selector-base`                   | Base selector for utility classes.             | `"."`                       |
+// | `$use-important`                   | Append `!important` to generated declarations. | `true`                      |
+// | `$generate-base-utilities`         | Generate the base utilities.                   | `true`                      |
+// | `$screen-aware`                    | Generate screen-aware variants.                | `true`                      |
+// | `$theme-aware`                     | Generate theme-aware variants.                 | `false`                     |
+// | `$state-aware`                     | Generate state-aware variants.                 | `false`                     |
+// | `$container-aware`                 | Generate container-aware variants.             | `true`                      |
+// | `$screen-aware-separator`          | Separator for screen-aware utilities.          | `"\\:"`                     |
+// | `$theme-aware-separator`           | Separator for theme-aware utilities.           | `"\\:"`                     |
+// | `$state-aware-separator`           | Separator for state-aware utilities.           | `"\\:"`                     |
+// | `$container-aware-separator`       | Separator for container-aware utilities.       | `"\\:"`                     |
+// | `$screen-aware-selector-prefix`    | Prefix for screen-aware utilities.             | `""`                        |
+// | `$theme-aware-selector-prefix`     | Prefix for theme-aware utilities.              | `""`                        |
+// | `$state-aware-selector-prefix`     | Prefix for state-aware utilities.              | `""`                        |
+// | `$container-aware-selector-prefix` | Prefix for container-aware utilities.          | `"cq\\:"`                   |
+// | `$visibility-selector-prefix`      | Prefix for visibility utilities.               | `"visibility-"`             |
+// | `$visibility-properties`           | Map of visibility utilities.                   | `visible, hidden, collapse` |
 //
 // 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}`

package/src/scss/utilities/visually-hidden/_index.scss

@@ -10,23 +10,25 @@
 // - 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.
-// - `$visually-hidden-selector`: The selector for the visually-hidden utility class.
-// - `$visually-hidden-focusable-selector`: The selector for the focusable utility class.
+// | Variable                              | Description                                       | Default Value       |
+// | ---                                   | ---                                               | ---                 |
+// | `$selector-base`                      | Base selector for utility classes.                | `"."`               |
+// | `$use-important`                      | Append `!important` to generated declarations.    | `true`              |
+// | `$generate-base-utilities`            | Generate the base utilities.                      | `true`              |
+// | `$screen-aware`                       | Generate screen-aware variants.                   | `false`             |
+// | `$theme-aware`                        | Generate theme-aware variants.                    | `false`             |
+// | `$state-aware`                        | Generate state-aware variants.                    | `false`             |
+// | `$container-aware`                    | Generate container-aware variants.                | `false`             |
+// | `$screen-aware-separator`             | Separator for screen-aware utilities.             | `"\\:"`             |
+// | `$theme-aware-separator`              | Separator for theme-aware utilities.              | `"\\:"`             |
+// | `$state-aware-separator`              | Separator for state-aware utilities.              | `"\\:"`             |
+// | `$container-aware-separator`          | Separator for container-aware utilities.          | `"\\:"`             |
+// | `$screen-aware-selector-prefix`       | Prefix for screen-aware utilities.                | `""`                |
+// | `$theme-aware-selector-prefix`        | Prefix for theme-aware utilities.                 | `""`                |
+// | `$state-aware-selector-prefix`        | Prefix for state-aware utilities.                 | `""`                |
+// | `$container-aware-selector-prefix`    | Prefix for container-aware utilities.             | `"cq\\:"`           |
+// | `$visually-hidden-selector`           | Selector used for visually hidden utilities.      | `"visually-hidden"` |
+// | `$visually-hidden-focusable-selector` | Selector used to expose focusable hidden content. | `"focusable"`       |
 //
 // 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.

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

@@ -63,16 +63,8 @@ $-width-values: (
   );
 }
 
-$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);

package/src/scss/utilities/width/_index.scss

@@ -92,26 +92,27 @@
 // - 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.
-// - `$width-selector-prefix`: The prefix for the width utility classes.
-// - `$max-width-selector-prefix`: The prefix for the max-width utility classes.
-// - `$min-width-selector-prefix`: The prefix for the min-width utility classes.
-// - `$custom-width-values`: [DEPRECATED] The custom properties and values for the width utility classes.
-// - `$width-values`: The combined properties and values for the width utility classes.
+// | Variable                           | Description                                                                                           | Default Value                                                                                                                                                                                                          |
+// | ---                                | ---                                                                                                   | ---                                                                                                                                                                                                                    |
+// | `$selector-base`                   | Base selector for utility classes.                                                                    | `"."`                                                                                                                                                                                                                  |
+// | `$use-important`                   | Append `!important` to generated declarations.                                                        | `true`                                                                                                                                                                                                                 |
+// | `$generate-base-utilities`         | Generate the base utilities.                                                                          | `true`                                                                                                                                                                                                                 |
+// | `$screen-aware`                    | Generate screen-aware variants.                                                                       | `false`                                                                                                                                                                                                                |
+// | `$theme-aware`                     | Generate theme-aware variants.                                                                        | `false`                                                                                                                                                                                                                |
+// | `$state-aware`                     | Generate state-aware variants.                                                                        | `false`                                                                                                                                                                                                                |
+// | `$container-aware`                 | Generate container-aware variants.                                                                    | `false`                                                                                                                                                                                                                |
+// | `$screen-aware-separator`          | Separator for screen-aware utilities.                                                                 | `"\\:"`                                                                                                                                                                                                                |
+// | `$theme-aware-separator`           | Separator for theme-aware utilities.                                                                  | `"\\:"`                                                                                                                                                                                                                |
+// | `$state-aware-separator`           | Separator for state-aware utilities.                                                                  | `"\\:"`                                                                                                                                                                                                                |
+// | `$container-aware-separator`       | Separator for container-aware utilities.                                                              | `"\\:"`                                                                                                                                                                                                                |
+// | `$screen-aware-selector-prefix`    | Prefix for screen-aware utilities.                                                                    | `""`                                                                                                                                                                                                                   |
+// | `$theme-aware-selector-prefix`     | Prefix for theme-aware utilities.                                                                     | `""`                                                                                                                                                                                                                   |
+// | `$state-aware-selector-prefix`     | Prefix for state-aware utilities.                                                                     | `""`                                                                                                                                                                                                                   |
+// | `$container-aware-selector-prefix` | Prefix for container-aware utilities.                                                                 | `"cq\\:"`                                                                                                                                                                                                              |
+// | `$width-selector-prefix`           | Prefix for width utilities.                                                                           | `"w-"`                                                                                                                                                                                                                 |
+// | `$max-width-selector-prefix`       | Prefix for max-width utilities.                                                                       | `"max-w-"`                                                                                                                                                                                                             |
+// | `$min-width-selector-prefix`       | Prefix for min-width utilities.                                                                       | `"min-w-"`                                                                                                                                                                                                             |
+// | `$width-values`                    | Map of width utility values (auto, content sizing, fractional widths, viewport widths, spacers 0–10). | `auto, fit-content, max-content, min-content, stretch, full, quarter, half, three-quarters, third, two-thirds, half-screen, third-screen, two-thirds-screen, quarter-screen, three-quarters-screen, full-screen, 0–10` |
 //
 // 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.

package/src/scss/utilities/z-index/_defaults.scss

@@ -34,19 +34,8 @@ $-z-index-properties: (
   0: 0,
   1: 1,
 );
-$custom-z-index-properties: () !default;
 $z-index-properties: () !default;
 
-// @todo remove this once $custom-z-index-properties is removed
-@if $custom-z-index-properties != () {
-  @warn "`$custom-z-index-properties` is deprecated and will be removed in a future release of Graupl. Use `$z-index-properties` instead.";
-
-  $z-index-properties: map.merge(
-    $z-index-properties,
-    $custom-z-index-properties
-  );
-}
-
 @if $generate-base-utilities {
   $z-index-properties: map.merge($-z-index-properties, $z-index-properties);
 }

package/src/scss/utilities/z-index/_index.scss

@@ -11,24 +11,25 @@
 // - 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.
-// - `$z-index-selector-prefix`: The prefix for the utility classes.
-// - `$custom-z-index-properties`: [DEPRECATED] The custom properties and values for the z-index utility classes.
-// - `$z-index-properties`: The merged properties and values for the z-index utility classes.
+// | Variable                           | Description                                    | Default Value |
+// | ---                                | ---                                            | ---           |
+// | `$selector-base`                   | Base selector for utility classes.             | `"."`         |
+// | `$use-important`                   | Append `!important` to generated declarations. | `true`        |
+// | `$generate-base-utilities`         | Generate the base utilities.                   | `true`        |
+// | `$screen-aware`                    | Generate screen-aware variants.                | `false`       |
+// | `$theme-aware`                     | Generate theme-aware variants.                 | `false`       |
+// | `$state-aware`                     | Generate state-aware variants.                 | `false`       |
+// | `$container-aware`                 | Generate container-aware variants.             | `false`       |
+// | `$screen-aware-separator`          | Separator for screen-aware utilities.          | `"\\:"`       |
+// | `$theme-aware-separator`           | Separator for theme-aware utilities.           | `"\\:"`       |
+// | `$state-aware-separator`           | Separator for state-aware utilities.           | `"\\:"`       |
+// | `$container-aware-separator`       | Separator for container-aware utilities.       | `"\\:"`       |
+// | `$screen-aware-selector-prefix`    | Prefix for screen-aware utilities.             | `""`          |
+// | `$theme-aware-selector-prefix`     | Prefix for theme-aware utilities.              | `""`          |
+// | `$state-aware-selector-prefix`     | Prefix for state-aware utilities.              | `""`          |
+// | `$container-aware-selector-prefix` | Prefix for container-aware utilities.          | `"cq\\:"`     |
+// | `$z-index-selector-prefix`         | Prefix for z-index utilities.                  | `"z-"`        |
+// | `$z-index-properties`              | Map of z-index utilities.                      | `n1, 0, 1`    |
 //
 // 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.