@graupl/core 1.0.0-beta.14 → 1.0.0-beta.16

package/src/scss/component/alert/_index.scss

@@ -94,7 +94,7 @@
     background-color: $alert-background;
     color: $alert-color;
 
-    @each $color, $map in map.get(color.$themes, active) {
+    @each $color in theme.get-colors() {
       &#{defaults.$alert-theme-selector-prefix}#{$color} {
         @each $prop, $shade in defaults.$alert-state-theme-map {
           --#{root-defaults.$prefix}alert-#{$prop}: #{theme.get(

package/src/scss/functions/_theme.scss

@@ -27,13 +27,25 @@
     @return map.get(map.get(map.get(color.$themes, $theme), $color), $shade);
   }
 
+  @if map.has-key(color.$themes, $theme, $color, _default) {
+    @return map.get(map.get(map.get(color.$themes, $theme), $color), _default);
+  }
+
+  @return null;
+}
+
+@function get-color($color, $theme: active) {
+  @if map.has-key(color.$themes, $theme, $color) {
+    @return map.get(map.get(color.$themes, $theme), $color);
+  }
+
   @return null;
 }
 
-@function variants($theme: active) {
+@function get-colors($theme: active) {
   @if map.has-key(color.$themes, $theme) {
     @return map.keys(map.get(color.$themes, $theme));
   }
 
-  @return null;
+  @return ();
 }

package/src/scss/theme/color/_defaults.scss

@@ -6,9 +6,13 @@
 // 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";
 @use "sass:list";
+@use "sass:meta";
 
+$generate-base-colors: root-defaults.$generate-base-colors !default;
+$generate-base-themes: root-defaults.$generate-base-themes !default;
 $theme-selector-prefix: "." !default;
 $theme-selector-suffix: "-mode" !default;
 
@@ -27,8 +31,9 @@ $theme-selector-suffix: "-mode" !default;
 // Users can override any part of this giant map, allowing for fine-tuned control of theme colours.
 
 // Colours.
-$default-colors: (
+$-colors: (
   primary: (
+    _default: hsl(219deg 75% 50%),
     100: hsl(219deg 100% 95%),
     200: hsl(219deg 90% 80%),
     300: hsl(219deg 80% 65%),
@@ -40,6 +45,7 @@ $default-colors: (
     900: hsl(219deg 100% 10%),
   ),
   secondary: (
+    _default: hsl(235deg 15% 50%),
     100: hsl(235deg 40% 95%),
     200: hsl(235deg 30% 80%),
     300: hsl(235deg 20% 65%),
@@ -51,6 +57,7 @@ $default-colors: (
     900: hsl(235deg 40% 10%),
   ),
   tertiary: (
+    _default: hsl(340deg 60% 50%),
     100: hsl(340deg 85% 95%),
     200: hsl(340deg 75% 80%),
     300: hsl(340deg 65% 65%),
@@ -63,16 +70,51 @@ $default-colors: (
   ),
 );
 $custom-colors: () !default;
-$colors: map.deep-merge($default-colors, $custom-colors);
+$colors: () !default;
+
+// Loop through the customized colors and convert them to a map structure.
+// This allows users to more easlily add 1-off custom colours without having to define the entire color map structure.
+@each $color, $value in $colors {
+  @if meta.type-of($value) == "color" {
+    $colors: map.merge(
+      $colors,
+      (
+        $color: (
+            _default: $value,
+          ),
+      )
+    );
+  }
+}
+
+// @todo remove this once $custom-colors is removed
+@if $custom-colors != () {
+  @warn "`$custom-colors` is deprecated and will be removed in a future release of Graupl. Use `$colors` instead.";
+
+  $colors: map.deep-merge($colors, $custom-colors);
+}
+
+// Merge the custom colors with the default ones.
+@if $generate-base-colors {
+  $colors: map.deep-merge($-colors, $colors);
+}
 
 // Themes.
-$default-themes: (light, dark);
+$-themes: (light, dark);
 $custom-themes: () !default;
-$themes: list.join($default-themes, $custom-themes);
+$themes: () !default;
+
+// @todo remove this once $custom-themes is removed
+@if $custom-themes != () {
+  @warn "`$custom-themes` is deprecated and will be removed in a future release of Graupl. Use `$themes` instead.";
+
+  $themes: list.join($themes, $custom-themes);
+}
+
 $default-theme: light !default;
 
 // Theme mappings.
-$default-theme-mappings: (
+$-theme-mappings: (
   light: (
     100: 100,
     200: 200,
@@ -97,13 +139,23 @@ $default-theme-mappings: (
   ),
 );
 $custom-theme-mappings: () !default;
-$theme-mappings: map.deep-merge(
-  $default-theme-mappings,
-  $custom-theme-mappings
-);
+$theme-mappings: () !default;
+
+// @todo remove this once $custom-theme-mappings is removed
+@if $custom-theme-mappings != () {
+  @warn "`$custom-theme-mappings` is deprecated and will be removed in a future release of Graupl. Use `$theme-mappings` instead.";
+
+  $theme-mappings: map.deep-merge($theme-mappings, $custom-theme-mappings);
+}
+
+// Merge the custom themes with the default ones.
+@if $generate-base-themes {
+  $themes: list.join($-themes, $themes);
+  $theme-mappings: map.deep-merge($-theme-mappings, $theme-mappings);
+}
 
 // Theme map.
-$default-theme-map: ();
+$-theme-map: ();
 
 @each $theme in $themes {
   $theme-map: ();
@@ -112,12 +164,21 @@ $default-theme-map: ();
     $color-theme-map: ();
 
     @each $shade, $value in $color-map {
+      $color-property: null;
+
+      // Handle _default shade vs proper shade mappings.
+      @if map.has-key($theme-mappings, $theme, $shade) {
+        $color-property: map.get($theme-mappings, $theme, $shade);
+      } @else if $shade == "_default" {
+        $color-property: $shade;
+      }
+
       $color-theme-map: map.merge(
         $color-theme-map,
         (
           $shade: (
               color: $color-name,
-              shade: map.get($theme-mappings, $theme, $shade),
+              shade: $color-property,
             ),
         )
       );
@@ -131,8 +192,8 @@ $default-theme-map: ();
     );
   }
 
-  $default-theme-map: map.merge(
-    $default-theme-map,
+  $-theme-map: map.merge(
+    $-theme-map,
     (
       $theme: $theme-map,
     )
@@ -140,4 +201,13 @@ $default-theme-map: ();
 }
 
 $custom-theme-map: () !default;
-$theme-map: map.deep-merge($default-theme-map, $custom-theme-map);
+$theme-map: () !default;
+
+// @todo remove this once $custom-theme-map is removed
+@if $custom-theme-map != () {
+  @warn "`$custom-theme-map` is deprecated and will be removed in a future release of Graupl. Use `$theme-map` instead.";
+
+  $theme-map: map.deep-merge($theme-map, $custom-theme-map);
+}
+
+$theme-map: map.deep-merge($-theme-map, $theme-map);

package/src/scss/theme/color/_index.scss

@@ -15,14 +15,24 @@
     // Generate the default colour properties.
     @each $color, $map in defaults.$colors {
       @each $shade, $value in $map {
-        --#{root-defaults.$prefix}#{$color}--#{$shade}: #{$value};
+        // Handle _default shade vs proper shade mappings.
+        @if $shade == "_default" {
+          --#{root-defaults.$prefix}#{$color}: #{$value};
+        } @else {
+          --#{root-defaults.$prefix}#{$color}--#{$shade}: #{$value};
+        }
       }
     }
 
     // Generate the active theme properties.
     @each $color, $map in map.get($themes, defaults.$default-theme) {
       @each $shade, $value in $map {
-        --#{root-defaults.$prefix}theme-active--#{$color}--#{$shade}: #{$value};
+        // Handle _default shade vs proper shade mappings.
+        @if $shade == "_default" {
+          --#{root-defaults.$prefix}theme-active--#{$color}: #{$value};
+        } @else {
+          --#{root-defaults.$prefix}theme-active--#{$color}--#{$shade}: #{$value};
+        }
       }
     }
   }
@@ -32,7 +42,12 @@
     @include theme.theme($theme-name) {
       @each $color, $map in $theme {
         @each $shade, $value in $map {
-          --#{root-defaults.$prefix}theme-active--#{$color}--#{$shade}: #{$value};
+          // Handle _default shade vs proper shade mappings.
+          @if $shade == "_default" {
+            --#{root-defaults.$prefix}theme-active--#{$color}: #{$value};
+          } @else {
+            --#{root-defaults.$prefix}theme-active--#{$color}--#{$shade}: #{$value};
+          }
         }
       }
 

package/src/scss/theme/color/_variables.scss

@@ -16,11 +16,18 @@ $colors: ();
   $color-map: ();
 
   @each $shade, $value in $map {
+    $color-property: "";
+
     // Set the custom prop name and fallback value.
-    $color-property: var(
-      --#{root-defaults.$prefix}#{$color}--#{$shade},
-      $value
-    );
+    // Handle _default shade vs proper shade mappings.
+    @if $shade == "_default" {
+      $color-property: var(--#{root-defaults.$prefix}#{$color}, $value);
+    } @else {
+      $color-property: var(
+        --#{root-defaults.$prefix}#{$color}--#{$shade},
+        $value
+      );
+    }
 
     // Add the custom prop to the map.
     $color-map: map.merge(
@@ -52,10 +59,22 @@ $themes: (
     $color-map: ();
 
     @each $shade, $value in $map {
-      $color-property: var(
-        --#{root-defaults.$prefix}theme-#{$theme-name}--#{$color-name}--#{$shade},
-        #{map.get($colors, map.get($value, color), map.get($value, shade))}
-      );
+      $color-property: "";
+
+      // Set the custom prop name and fallback value.
+      // Handle _default shade vs proper shade mappings.
+      @if $shade == "_default" {
+        $color-property: var(
+          --#{root-defaults.$prefix}theme--#{$theme-name}--#{$color-name},
+          #{map.get($colors, map.get($value, color), map.get($value, shade))}
+        );
+      } @else {
+        $color-property: var(
+          --#{root-defaults.$prefix}theme-#{$theme-name}--#{$color-name}--#{$shade},
+          #{map.get($colors, map.get($value, color), map.get($value, shade))}
+        );
+      }
+
       $color-map: map.merge(
         $color-map,
         (
@@ -81,33 +100,47 @@ $themes: (
 }
 
 // Generate the active theme properties.
-@each $color-name, $map in map.get($themes, defaults.$default-theme) {
-  $color-map: ();
+@if map.has-key($themes, defaults.$default-theme) {
+  @each $color-name, $map in map.get($themes, defaults.$default-theme) {
+    $color-map: ();
 
-  @each $shade, $value in $map {
-    $color-property: var(
-      --#{root-defaults.$prefix}theme-active--#{$color-name}--#{$shade},
-      #{$value}
-    );
-    $color-map: map.merge(
-      $color-map,
+    @each $shade, $value in $map {
+      $color-property: "";
+
+      // Set the custom prop name and fallback value.
+      // Handle _default shade vs proper shade mappings.
+      @if $shade == "_default" {
+        $color-property: var(
+          --#{root-defaults.$prefix}theme-active--#{$color-name},
+          #{$value}
+        );
+      } @else {
+        $color-property: var(
+          --#{root-defaults.$prefix}theme-active--#{$color-name}--#{$shade},
+          #{$value}
+        );
+      }
+
+      $color-map: map.merge(
+        $color-map,
+        (
+          $shade: $color-property,
+        )
+      );
+    }
+
+    $themes: map.merge(
+      $themes,
       (
-        $shade: $color-property,
+        active: map.merge(
+            map.get($themes, active),
+            (
+              $color-name: $color-map,
+            )
+          ),
       )
     );
   }
-
-  $themes: map.merge(
-    $themes,
-    (
-      active: map.merge(
-          map.get($themes, active),
-          (
-            $color-name: $color-map,
-          )
-        ),
-    )
-  );
 }
 
 // Colour properties.

package/src/scss/theme/typography/_defaults.scss

@@ -6,9 +6,12 @@
 // 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";
 
 // font properties.
+$generate-base-font-sizes: root-defaults.$generate-base-font-sizes !default;
+$generate-base-font-weights: root-defaults.$generate-base-font-weights !default;
 $font-size-base: 1rem !default;
 $root-font-size: clamp(0.85rem, calc(0.8rem + 0.5vw), 1.25rem) !default;
 $line-height: 1.2em !default;
@@ -16,7 +19,7 @@ $line-height: 1.2em !default;
 // Multipliers for font sizes.
 // This uses a minor third scale.
 // See: https://typescale.com/?size=16&scale=1.250&text=A%20Visual%20Type%20Scale&font=Lato&fontweight=400&bodyfont=body_font_default&bodyfontweight=400&lineheight=1.75&backgroundcolor=%23ffffff&fontcolor=%23000000
-$base-font-size-multipliers: (
+$-font-size-multipliers: (
   xs: 0.694,
   sm: 0.833,
   base: 1,
@@ -28,19 +31,46 @@ $base-font-size-multipliers: (
   5xl: 2.986,
 );
 $custom-font-size-multipliers: () !default;
-$font-size-multipliers: map.merge(
-  $base-font-size-multipliers,
-  $custom-font-size-multipliers
-);
+$font-size-multipliers: () !default;
+
+// @todo remove this once $custom-font-size-multipliers is removed
+@if $custom-font-size-multipliers != () {
+  @warn "`$custom-font-size-multipliers` is deprecated and will be removed in a future release of Graupl. Use `$font-size-multipliers` instead.";
+
+  $font-size-multipliers: map.merge(
+    $font-size-multipliers,
+    $custom-font-size-multipliers
+  );
+}
+
+// Merge the font size multipliers with the default ones.
+@if $generate-base-font-sizes {
+  $font-size-multipliers: map.merge(
+    $-font-size-multipliers,
+    $font-size-multipliers
+  );
+}
 
 // Weights.
-$base-font-weights: (
+$-font-weights: (
   light: 300,
   normal: 400,
   bold: 700,
 );
 $custom-font-weights: () !default;
-$font-weights: map.merge($base-font-weights, $custom-font-weights);
+$font-weights: () !default;
+
+// @todo remove this once $custom-font-weights is removed
+@if $custom-font-weights != () {
+  @warn "`$custom-font-weights` is deprecated and will be removed in a future release of Graupl. Use `$font-weights` instead.";
+
+  $font-weights: map.merge($font-weights, $custom-font-weights);
+}
+
+// Merge the custom font weights with the default ones.
+@if $generate-base-font-weights {
+  $font-weights: map.merge($-font-weights, $font-weights);
+}
 
 /* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
 $root-font-family:

package/src/scss/utilities/_template/_defaults.scss

@@ -12,6 +12,7 @@
 // Utility modifiers.
 $selector-base: root-defaults.$utility-selector-base !default;
 $use-important: root-defaults.$use-important !default;
+$generate-base-utilities: root-defaults.$generate-base-utilities !default;
 $screen-aware: false !default;
 $theme-aware: false !default;
 $state-aware: false !default;
@@ -33,9 +34,9 @@ $container-aware-selector-prefix: root-defaults.$utility-container-aware-selecto
 // Remember to replace references like [_template], or other placeholder content with appropriate descriptions!
 
 $template-selector-prefix: "template-" !default;
-$base-template-properties: ();
-$custom-template-properties: () !default;
-$template-properties: map.merge(
-  $base-template-properties,
-  $custom-template-properties
-);
+$-template-properties: ();
+$template-properties: () !default;
+
+@if $generate-base-utilities {
+  $template-properties: map.merge($-template-properties, $template-properties);
+}

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

@@ -11,6 +11,7 @@
 // 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.
@@ -24,8 +25,7 @@
 // - `$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.
-// - `$base-template-properties`: The base properties and values for the template utility classes.
-// - `$custom-template-properties`: The custom properties and values for the template 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

@@ -12,6 +12,7 @@
 // Utility modifiers.
 $selector-base: root-defaults.$utility-selector-base !default;
 $use-important: root-defaults.$use-important !default;
+$generate-base-utilities: root-defaults.$generate-base-utilities !default;
 $screen-aware: false !default;
 $theme-aware: false !default;
 $state-aware: false !default;
@@ -27,7 +28,7 @@ $container-aware-selector-prefix: root-defaults.$utility-container-aware-selecto
 
 // Align content properties.
 $align-content-selector-prefix: "align-content-" !default;
-$base-align-content-properties: (
+$-align-content-properties: (
   normal: normal,
   start: flex-start,
   end: flex-end,
@@ -39,14 +40,21 @@ $base-align-content-properties: (
   stretch: stretch,
 );
 $custom-align-content-properties: () !default;
-$align-content-properties: map.merge(
-  $base-align-content-properties,
-  $custom-align-content-properties
-);
+$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;
-$base-align-items-properties: (
+$-align-items-properties: (
   start: start,
   end: end,
   center: center,
@@ -54,14 +62,21 @@ $base-align-items-properties: (
   stretch: stretch,
 );
 $custom-align-items-properties: () !default;
-$align-items-properties: map.merge(
-  $base-align-items-properties,
-  $custom-align-items-properties
-);
+$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;
-$base-align-self-properties: (
+$-align-self-properties: (
   auto: auto,
   start: start,
   end: end,
@@ -70,7 +85,30 @@ $base-align-self-properties: (
   stretch: stretch,
 );
 $custom-align-self-properties: () !default;
-$align-self-properties: map.merge(
-  $base-align-self-properties,
-  $custom-align-self-properties
-);
+$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(
+    $-align-content-properties,
+    $align-content-properties
+  );
+  $align-items-properties: map.merge(
+    $-align-items-properties,
+    $align-items-properties
+  );
+  $align-self-properties: map.merge(
+    $-align-self-properties,
+    $align-self-properties
+  );
+}

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

@@ -30,6 +30,7 @@
 // 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.
@@ -43,16 +44,13 @@
 // - `$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.
-// - `$base-align-content-properties`: The base properties and values for the align content utility classes.
-// - `$custom-align-content-properties`: The custom properties and values 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.
-// - `$base-align-items-properties`: The base properties and values for the align items utility classes.
-// - `$custom-align-items-properties`: The custom properties and values 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.
-// - `$base-align-self-properties`: The base properties and values for the align self utility classes.
-// - `$custom-align-self-properties`: The custom properties and values 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.
 //
 // Generating responsive utility classes can be done by setting `$screen-aware`, `$theme-aware`, or `$state-aware` to `true`.