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

package/src/scss/theme/typography/_variables.scss

@@ -2,6 +2,81 @@
 //
 // These values are to be used to directly style components and provide a
 // cleaner way to reference custom properties.
+//
+// Custom property defaults:
+// | Custom property                | Default                                                                                               |
+// | ------------------------------ | ----------------------------------------------------------------------------------------------------- |
+// | --graupl-font-size-base        | 1rem                                                                                                  |
+// | --graupl-line-height           | 1.2em                                                                                                 |
+// | --graupl-font-xs               | calc(0.694 * var(--graupl-font-size-base))                                                            |
+// | --graupl-font-sm               | calc(0.833 * var(--graupl-font-size-base))                                                            |
+// | --graupl-font-base             | calc(1 * var(--graupl-font-size-base))                                                                |
+// | --graupl-font-lg               | calc(1.2 * var(--graupl-font-size-base))                                                              |
+// | --graupl-font-xl               | calc(1.44 * var(--graupl-font-size-base))                                                             |
+// | --graupl-font-2xl              | calc(1.728 * var(--graupl-font-size-base))                                                            |
+// | --graupl-font-3xl              | calc(2.074 * var(--graupl-font-size-base))                                                            |
+// | --graupl-font-4xl              | calc(2.488 * var(--graupl-font-size-base))                                                            |
+// | --graupl-font-5xl              | calc(2.986 * var(--graupl-font-size-base))                                                            |
+// | --graupl-font-weight-light     | 300                                                                                                   |
+// | --graupl-font-weight-normal    | 400                                                                                                   |
+// | --graupl-font-weight-bold      | 700                                                                                                   |
+// | --graupl-root-font-family      | system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif |
+// | --graupl-root-font-size        | clamp(0.85rem, calc(0.8rem + 0.5vw), 1.25rem)                                                         |
+// | --graupl-body-font-size        | var(--graupl-font-base)                                                                               |
+// | --graupl-body-line-height      | var(--graupl-line-height)                                                                             |
+// | --graupl-body-font-weight      | var(--graupl-font-weight-normal)                                                                      |
+// | --graupl-body-color            | var(--graupl-color)                                                                                   |
+// | --graupl-paragraph-font-size   | var(--graupl-body-font-size)                                                                          |
+// | --graupl-paragraph-line-height | var(--graupl-body-line-height)                                                                        |
+// | --graupl-paragraph-margin      | 0 0 var(--graupl-spacer-2) 0                                                                          |
+// | --graupl-paragraph-font-weight | var(--graupl-body-font-weight)                                                                        |
+// | --graupl-paragraph-color       | var(--graupl-body-color)                                                                              |
+// | --graupl-small-font-size       | var(--graupl-font-sm)                                                                                 |
+// | --graupl-small-line-height     | var(--graupl-line-height)                                                                             |
+// | --graupl-small-margin          | 0 0 var(--graupl-spacer-2) 0                                                                          |
+// | --graupl-small-font-weight     | var(--graupl-body-font-weight)                                                                        |
+// | --graupl-small-color           | var(--graupl-body-color)                                                                              |
+// | --graupl-heading-font-family   | var(--graupl-root-font-family)                                                                        |
+// | --graupl-heading-line-height   | var(--graupl-line-height)                                                                             |
+// | --graupl-heading-margin        | var(--graupl-spacer-5) 0 var(--graupl-spacer-2) 0                                                     |
+// | --graupl-heading-font-weight   | var(--graupl-font-weight-bold)                                                                        |
+// | --graupl-heading-color         | var(--graupl-body-color)                                                                              |
+// | --graupl-h1-font-size          | var(--graupl-font-5xl)                                                                                |
+// | --graupl-h1-line-height        | var(--graupl-heading-line-height)                                                                     |
+// | --graupl-h1-margin             | var(--graupl-heading-margin)                                                                          |
+// | --graupl-h1-font-family        | var(--graupl-heading-font-family)                                                                     |
+// | --graupl-h1-font-weight        | var(--graupl-heading-font-weight)                                                                     |
+// | --graupl-h1-color              | var(--graupl-heading-color)                                                                           |
+// | --graupl-h2-font-size          | var(--graupl-font-4xl)                                                                                |
+// | --graupl-h2-line-height        | var(--graupl-heading-line-height)                                                                     |
+// | --graupl-h2-margin             | var(--graupl-heading-margin)                                                                          |
+// | --graupl-h2-font-family        | var(--graupl-heading-font-family)                                                                     |
+// | --graupl-h2-font-weight        | var(--graupl-heading-font-weight)                                                                     |
+// | --graupl-h2-color              | var(--graupl-heading-color)                                                                           |
+// | --graupl-h3-font-size          | var(--graupl-font-3xl)                                                                                |
+// | --graupl-h3-line-height        | var(--graupl-heading-line-height)                                                                     |
+// | --graupl-h3-margin             | var(--graupl-heading-margin)                                                                          |
+// | --graupl-h3-font-family        | var(--graupl-heading-font-family)                                                                     |
+// | --graupl-h3-font-weight        | var(--graupl-heading-font-weight)                                                                     |
+// | --graupl-h3-color              | var(--graupl-heading-color)                                                                           |
+// | --graupl-h4-font-size          | var(--graupl-font-2xl)                                                                                |
+// | --graupl-h4-line-height        | var(--graupl-heading-line-height)                                                                     |
+// | --graupl-h4-margin             | var(--graupl-heading-margin)                                                                          |
+// | --graupl-h4-font-family        | var(--graupl-heading-font-family)                                                                     |
+// | --graupl-h4-font-weight        | var(--graupl-heading-font-weight)                                                                     |
+// | --graupl-h4-color              | var(--graupl-heading-color)                                                                           |
+// | --graupl-h5-font-size          | var(--graupl-font-xl)                                                                                 |
+// | --graupl-h5-line-height        | var(--graupl-heading-line-height)                                                                     |
+// | --graupl-h5-margin             | var(--graupl-heading-margin)                                                                          |
+// | --graupl-h5-font-family        | var(--graupl-heading-font-family)                                                                     |
+// | --graupl-h5-font-weight        | var(--graupl-heading-font-weight)                                                                     |
+// | --graupl-h5-color              | var(--graupl-heading-color)                                                                           |
+// | --graupl-h6-font-size          | var(--graupl-font-lg)                                                                                 |
+// | --graupl-h6-line-height        | var(--graupl-heading-line-height)                                                                     |
+// | --graupl-h6-margin             | var(--graupl-heading-margin)                                                                          |
+// | --graupl-h6-font-family        | var(--graupl-heading-font-family)                                                                     |
+// | --graupl-h6-font-weight        | var(--graupl-heading-font-weight)                                                                     |
+// | --graupl-h6-color              | var(--graupl-heading-color)                                                                           |
 
 @use "../../defaults" as root-defaults;
 @use "../../variables" as root-variables;
@@ -10,10 +85,13 @@
 @use "sass:map";
 
 // Font properties.
+// --graupl-font-size-base
 $font-size-base: var(
   --#{root-defaults.$prefix}font-size-base,
   #{defaults.$font-size-base}
 );
+
+// --graupl-line-height
 $line-height: var(
   --#{root-defaults.$prefix}line-height,
   #{defaults.$line-height}
@@ -23,6 +101,7 @@ $line-height: var(
 $font-sizes: ();
 
 @each $key, $value in defaults.$font-size-multipliers {
+  // --graupl-font-xs, --graupl-font-sm, --graupl-font-base, --graupl-font-lg, --graupl-font-xl, --graupl-font-2xl, --graupl-font-3xl, --graupl-font-4xl, --graupl-font-5xl
   $size: var(
     --#{root-defaults.$prefix}font-#{$key},
     calc(#{$value} * #{$font-size-base})
@@ -33,216 +112,323 @@ $font-sizes: ();
 $font-weights: ();
 
 @each $key, $value in defaults.$font-weights {
+  // --graupl-font-weight-light, --graupl-font-weight-normal, --graupl-font-weight-bold
   $weight: var(--#{root-defaults.$prefix}font-weight-#{$key}, $value);
   $font-weights: map.set($font-weights, $key, $weight);
 }
 
+// --graupl-font-weight-bold
 $font-weight-bold: var(
   --#{root-defaults.$prefix}font-weight-bold,
   #{map.get($font-weights, bold)}
 );
 
 // Root properties.
+// --graupl-root-font-family
 $root-font-family: var(
   --#{root-defaults.$prefix}root-font-family,
   #{defaults.$root-font-family}
 );
+
+// --graupl-root-font-size
 $root-font-size: var(
   --#{root-defaults.$prefix}root-font-size,
   #{defaults.$root-font-size}
 );
 
 // Typography properties.
+// --graupl-body-font-size
 $body-font-size: var(
   --#{root-defaults.$prefix}body-font-size,
   #{map.get($font-sizes, base)}
 );
+
+// --graupl-body-line-height
 $body-line-height: var(
   --#{root-defaults.$prefix}body-line-height,
   #{$line-height}
 );
+
+// --graupl-body-font-weight
 $body-font-weight: var(
   --#{root-defaults.$prefix}body-font-weight,
   #{map.get($font-weights, normal)}
 );
+
+// --graupl-body-color
 $body-color: var(
   --#{root-defaults.$prefix}body-color,
   #{color-variables.$color}
 );
+
+// --graupl-paragraph-font-size
 $paragraph-font-size: var(
   --#{root-defaults.$prefix}paragraph-font-size,
   #{$body-font-size}
 );
+
+// --graupl-paragraph-line-height
 $paragraph-line-height: var(
   --#{root-defaults.$prefix}paragraph-line-height,
   #{$body-line-height}
 );
+
+// --graupl-paragraph-margin
 $paragraph-margin: var(
   --#{root-defaults.$prefix}paragraph-margin,
   0 0 #{map.get(root-variables.$spacers, 2)} 0
 );
+
+// --graupl-paragraph-font-weight
 $paragraph-font-weight: var(
   --#{root-defaults.$prefix}paragraph-font-weight,
   #{$body-font-weight}
 );
+
+// --graupl-paragraph-color
 $paragraph-color: var(
   --#{root-defaults.$prefix}paragraph-color,
   #{$body-color}
 );
+
+// --graupl-small-font-size
 $small-font-size: var(
   --#{root-defaults.$prefix}small-font-size,
   #{map.get($font-sizes, sm)}
 );
+
+// --graupl-small-line-height
 $small-line-height: var(
   --#{root-defaults.$prefix}small-line-height,
   #{$line-height}
 );
+
+// --graupl-small-margin
 $small-margin: var(
   --#{root-defaults.$prefix}small-margin,
   0 0 #{map.get(root-variables.$spacers, 2)} 0
 );
+
+// --graupl-small-font-weight
 $small-font-weight: var(
   --#{root-defaults.$prefix}small-font-weight,
   #{$body-font-weight}
 );
+
+// --graupl-small-color
 $small-color: var(--#{root-defaults.$prefix}small-color, #{$body-color});
 
 // Headings properties.
+// --graupl-heading-font-family
 $heading-font-family: var(
   --#{root-defaults.$prefix}heading-font-family,
   $root-font-family
 );
+
+// --graupl-heading-line-height
 $heading-line-height: var(
   --#{root-defaults.$prefix}heading-line-height,
   #{$line-height}
 );
+
+// --graupl-heading-margin
 $heading-margin: var(
   --#{root-defaults.$prefix}heading-margin,
   #{map.get(root-variables.$spacers, 5)} 0
     #{map.get(root-variables.$spacers, 2)} 0
 );
+
+// --graupl-heading-font-weight
 $heading-font-weight: var(
   --#{root-defaults.$prefix}heading-font-weight,
   #{$font-weight-bold}
 );
+
+// --graupl-heading-color
 $heading-color: var(--#{root-defaults.$prefix}heading-color, #{$body-color});
 
 // H1 properties.
+// --graupl-h1-font-size
 $h1-font-size: var(
   --#{root-defaults.$prefix}h1-font-size,
   #{map.get($font-sizes, 5xl)}
 );
+
+// --graupl-h1-line-height
 $h1-line-height: var(
   --#{root-defaults.$prefix}h1-line-height,
   #{$heading-line-height}
 );
+
+// --graupl-h1-margin
 $h1-margin: var(--#{root-defaults.$prefix}h1-margin, #{$heading-margin});
+
+// --graupl-h1-font-family
 $h1-font-family: var(
   --#{root-defaults.$prefix}h1-font-family,
   $heading-font-family
 );
+
+// --graupl-h1-font-weight
 $h1-font-weight: var(
   --#{root-defaults.$prefix}h1-font-weight,
   $heading-font-weight
 );
+
+// --graupl-h1-color
 $h1-color: var(--#{root-defaults.$prefix}h1-color, #{$heading-color});
 
 // H2 properties.
+// --graupl-h2-font-size
 $h2-font-size: var(
   --#{root-defaults.$prefix}h2-font-size,
   #{map.get($font-sizes, 4xl)}
 );
+
+// --graupl-h2-line-height
 $h2-line-height: var(
   --#{root-defaults.$prefix}h2-line-height,
   #{$heading-line-height}
 );
+
+// --graupl-h2-margin
 $h2-margin: var(--#{root-defaults.$prefix}h2-margin, #{$heading-margin});
+
+// --graupl-h2-font-family
 $h2-font-family: var(
   --#{root-defaults.$prefix}h2-font-family,
   $heading-font-family
 );
+
+// --graupl-h2-font-weight
 $h2-font-weight: var(
   --#{root-defaults.$prefix}h2-font-weight,
   $heading-font-weight
 );
+
+// --graupl-h2-color
 $h2-color: var(--#{root-defaults.$prefix}h2-color, #{$heading-color});
 
 // H3 properties.
+// --graupl-h3-font-size
 $h3-font-size: var(
   --#{root-defaults.$prefix}h3-font-size,
   #{map.get($font-sizes, 3xl)}
 );
+
+// --graupl-h3-line-height
 $h3-line-height: var(
   --#{root-defaults.$prefix}h3-line-height,
   #{$heading-line-height}
 );
+
+// --graupl-h3-margin
 $h3-margin: var(--#{root-defaults.$prefix}h3-margin, #{$heading-margin});
+
+// --graupl-h3-font-family
 $h3-font-family: var(
   --#{root-defaults.$prefix}h3-font-family,
   $heading-font-family
 );
+
+// --graupl-h3-font-weight
 $h3-font-weight: var(
   --#{root-defaults.$prefix}h3-font-weight,
   $heading-font-weight
 );
+
+// --graupl-h3-color
 $h3-color: var(--#{root-defaults.$prefix}h3-color, #{$heading-color});
 
 // H4 properties.
+// --graupl-h4-font-size
 $h4-font-size: var(
   --#{root-defaults.$prefix}h4-font-size,
   #{map.get($font-sizes, 2xl)}
 );
+
+// --graupl-h4-line-height
 $h4-line-height: var(
   --#{root-defaults.$prefix}h4-line-height,
   #{$heading-line-height}
 );
+
+// --graupl-h4-margin
 $h4-margin: var(--#{root-defaults.$prefix}h4-margin, #{$heading-margin});
+
+// --graupl-h4-font-family
 $h4-font-family: var(
   --#{root-defaults.$prefix}h4-font-family,
   $heading-font-family
 );
+
+// --graupl-h4-font-weight
 $h4-font-weight: var(
   --#{root-defaults.$prefix}h4-font-weight,
   $heading-font-weight
 );
+
+// --graupl-h4-color
 $h4-color: var(--#{root-defaults.$prefix}h4-color, #{$heading-color});
 
 // H5 properties.
+// --graupl-h5-font-size
 $h5-font-size: var(
   --#{root-defaults.$prefix}h5-font-size,
   #{map.get($font-sizes, xl)}
 );
+
+// --graupl-h5-line-height
 $h5-line-height: var(
   --#{root-defaults.$prefix}h5-line-height,
   #{$heading-line-height}
 );
+
+// --graupl-h5-margin
 $h5-margin: var(--#{root-defaults.$prefix}h5-margin, #{$heading-margin});
+
+// --graupl-h5-font-family
 $h5-font-family: var(
   --#{root-defaults.$prefix}h5-font-family,
   $heading-font-family
 );
+
+// --graupl-h5-font-weight
 $h5-font-weight: var(
   --#{root-defaults.$prefix}h5-font-weight,
   $heading-font-weight
 );
+
+// --graupl-h5-color
 $h5-color: var(--#{root-defaults.$prefix}h5-color, #{$heading-color});
 
 // H6 properties.
+// --graupl-h6-font-size
 $h6-font-size: var(
   --#{root-defaults.$prefix}h6-font-size,
   #{map.get($font-sizes, lg)}
 );
+
+// --graupl-h6-line-height
 $h6-line-height: var(
   --#{root-defaults.$prefix}h6-line-height,
   #{$heading-line-height}
 );
+
+// --graupl-h6-margin
 $h6-margin: var(--#{root-defaults.$prefix}h6-margin, #{$heading-margin});
+
+// --graupl-h6-font-family
 $h6-font-family: var(
   --#{root-defaults.$prefix}h6-font-family,
   $heading-font-family
 );
+
+// --graupl-h6-font-weight
 $h6-font-weight: var(
   --#{root-defaults.$prefix}h6-font-weight,
   $heading-font-weight
 );
+
+// --graupl-h6-color
 $h6-color: var(--#{root-defaults.$prefix}h6-color, #{$heading-color});

package/src/scss/utilities/_template/_index.scss

@@ -25,7 +25,6 @@
 // - `$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`: [DEPRECATED] 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`.

package/src/scss/utilities/alignment/_defaults.scss

@@ -39,19 +39,8 @@ $-align-content-properties: (
   baseline: baseline,
   stretch: stretch,
 );
-$custom-align-content-properties: () !default;
 $align-content-properties: () !default;
 
-// @todo remove this once $custom-align-content-properties is removed
-@if $custom-align-content-properties != () {
-  @warn "`$custom-align-content-properties` is deprecated and will be removed in a future release of Graupl. Use `$align-content-properties` instead.";
-
-  $align-content-properties: map.merge(
-    $align-content-properties,
-    $custom-align-content-properties
-  );
-}
-
 // Align items properties.
 $align-items-selector-prefix: "align-items-" !default;
 $-align-items-properties: (
@@ -61,19 +50,8 @@ $-align-items-properties: (
   baseline: baseline,
   stretch: stretch,
 );
-$custom-align-items-properties: () !default;
 $align-items-properties: () !default;
 
-// @todo remove this once $custom-align-items-properties is removed
-@if $custom-align-items-properties != () {
-  @warn "`$custom-align-items-properties` is deprecated and will be removed in a future release of Graupl. Use `$align-items-properties` instead.";
-
-  $align-items-properties: map.merge(
-    $align-items-properties,
-    $custom-align-items-properties
-  );
-}
-
 // Align self properties.
 $align-self-selector-prefix: "align-self-" !default;
 $-align-self-properties: (
@@ -84,19 +62,8 @@ $-align-self-properties: (
   baseline: baseline,
   stretch: stretch,
 );
-$custom-align-self-properties: () !default;
 $align-self-properties: () !default;
 
-// @todo remove this once $custom-align-self-properties is removed
-@if $custom-align-self-properties != () {
-  @warn "`$custom-align-self-properties` is deprecated and will be removed in a future release of Graupl. Use `$align-self-properties` instead.";
-
-  $align-self-properties: map.merge(
-    $align-self-properties,
-    $custom-align-self-properties
-  );
-}
-
 // Merge custom properties with base properties if generating base utilities.
 @if $generate-base-utilities {
   $align-content-properties: map.merge(

package/src/scss/utilities/alignment/_index.scss

@@ -27,31 +27,30 @@
 // 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.
-// - `$align-content-selector-prefix`: The prefix for the align content utility classes.
-// - `$custom-align-content-properties`: [DEPRECATED] The custom properties and values for the align content utility classes.
-// - `$align-content-properties`: The combined properties and values for the align content utility classes.
-// - `$align-items-selector-prefix`: The prefix for the align items utility classes.
-// - `$custom-align-items-properties`: [DEPRECATED] The custom properties and values for the align items utility classes.
-// - `$align-items-properties`: The combined properties and values for the align items utility classes.
-// - `$align-self-selector-prefix`: The prefix for the align self utility classes.
-// - `$custom-align-self-properties`: [DEPRECATED] The custom properties and values for the align self utility classes.
-// - `$align-self-properties`: The combined properties and values for the align self utility classes.
+// The following sass variables control the generated 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\\:"`                                                                |
+// | `$align-content-selector-prefix`   | Prefix for align-content utilities.            | `"align-content-"`                                                       |
+// | `$align-content-properties`        | Map of align-content utility values.           | `normal, start, end, center, between, around, evenly, baseline, stretch` |
+// | `$align-items-selector-prefix`     | Prefix for align-items utilities.              | `"align-items-"`                                                         |
+// | `$align-items-properties`          | Map of align-items utility values.             | `start, end, center, baseline, stretch`                                  |
+// | `$align-self-selector-prefix`      | Prefix for align-self utilities.               | `"align-self-"`                                                          |
+// | `$align-self-properties`           | Map of align-self utility values.              | `auto, start, end, center, baseline, stretch`                            |
 //
 // 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.