@graupl/graupl 1.0.0-beta.0 → 1.0.0-beta.2

package/src/scss/layout/flex-columns/_index.scss

@@ -19,7 +19,7 @@
     }
 
     #{defaults.$flex-columns-fill-selector} {
-      --#{root-defaults.$prefix}-flex-columns-max-width: unset;
+      --#{root-defaults.$prefix}flex-columns-max-width: unset;
     }
   }
 
@@ -29,11 +29,11 @@
   {
     #{defaults.$flex-columns-column-selector-prefix}#{$i} {
       /* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */
-      --#{root-defaults.$prefix}-flex-columns-size: calc(
+      --#{root-defaults.$prefix}flex-columns-size: calc(
         (100% / #{defaults.$flex-columns-max-count} * #{$i}) -
           #{$flex-columns-column-gap}
       );
-      --#{root-defaults.$prefix}-flex-columns-max-width: calc(
+      --#{root-defaults.$prefix}flex-columns-max-width: calc(
         100% / #{defaults.$flex-columns-max-count} * #{$i}
       );
       /* stylelint-enable  scss/operator-no-newline-after */
@@ -41,8 +41,8 @@
 
     @include screen.trigger(force-single-column) {
       #{defaults.$flex-columns-column-selector-prefix}#{$i} {
-        --#{root-defaults.$prefix}-flex-columns-size: 100%;
-        --#{root-defaults.$prefix}-flex-columns-max-width: auto;
+        --#{root-defaults.$prefix}flex-columns-size: 100%;
+        --#{root-defaults.$prefix}flex-columns-max-width: auto;
       }
     }
   }
@@ -61,17 +61,17 @@
       @include screen.up($screen) {
         #{defaults.$flex-columns-column-selector-prefix}#{$screen}-#{$i} {
           /* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */
-          --#{root-defaults.$prefix}-flex-columns-size: calc(
+          --#{root-defaults.$prefix}flex-columns-size: calc(
             (100% / #{defaults.$flex-columns-max-count} * #{$i}) -
               #{$flex-columns-column-gap}
           );
           /* stylelint-enable  scss/operator-no-newline-after */
-          --#{root-defaults.$prefix}-flex-columns-max-width: calc(
+          --#{root-defaults.$prefix}flex-columns-max-width: calc(
             100% / #{defaults.$flex-columns-max-count} * #{$i}
           );
 
           &#{defaults.$flex-columns-fill-selector} {
-            --#{root-defaults.$prefix}-flex-columns-max-width: unset;
+            --#{root-defaults.$prefix}flex-columns-max-width: unset;
           }
         }
       }

package/src/scss/layout/flex-columns/_variables.scss

@@ -9,18 +9,18 @@
 
 // Flex columns properties.
 $flex-columns-row-gap: var(
-  --#{root-defaults.$prefix}-flex-columns-row-gap,
+  --#{root-defaults.$prefix}flex-columns-row-gap,
   #{columns-variables.$columns-row-gap}
 );
 $flex-columns-column-gap: var(
-  --#{root-defaults.$prefix}-flex-columns-column-gap,
+  --#{root-defaults.$prefix}flex-columns-column-gap,
   #{columns-variables.$columns-column-gap}
 );
 $flex-columns-size: var(
-  --#{root-defaults.$prefix}-flex-columns-size,
+  --#{root-defaults.$prefix}flex-columns-size,
   #{defaults.$flex-columns-size}
 );
 $flex-columns-max-width: var(
-  --#{root-defaults.$prefix}-flex-columns-max-width,
+  --#{root-defaults.$prefix}flex-columns-max-width,
   #{defaults.$flex-columns-max-width}
 );

package/src/scss/mixins/_layer.scss

@@ -6,7 +6,11 @@
 @use "../defaults" as root-defaults;
 
 @mixin layer($layer) {
-  @layer #{root-defaults.$prefix}.#{$layer} {
+  @if root-defaults.$use-layers {
+    @layer #{root-defaults.$id}.#{$layer} {
+      @content;
+    }
+  } @else {
     @content;
   }
 }

package/src/scss/mixins/_screen.scss

@@ -6,7 +6,6 @@
 @use "../functions/screen";
 @use "../defaults" as root-defaults;
 @use "sass:map";
-@use "sass:list";
 @use "sass:meta";
 
 // A mixin to generate a minimum screen width media query.
@@ -45,12 +44,34 @@
 }
 
 @mixin trigger($trigger) {
+  @if not map.has-key(root-defaults.$screen-size-triggers, $trigger) {
+    @error "The screen size trigger \"#{$trigger}\" does not exist.";
+  }
+
   $screen-size-trigger: map.get(root-defaults.$screen-size-triggers, $trigger);
+
+  @if not map.has-key($screen-size-trigger, "mixin") {
+    @error "The screen size trigger \"#{$trigger}\" does not have a mixin key.";
+  }
+
+  @if not map.has-key($screen-size-trigger, "args") {
+    @error "The screen size trigger \"#{$trigger}\" does not have an args key.";
+  }
+
   $mixin-name: map.get($screen-size-trigger, "mixin");
   $mixin-args: map.get($screen-size-trigger, "args");
+
+  @if not meta.mixin-exists($mixin-name) {
+    @error "The mixin \"#{$mixin-name}\" does not exist.";
+  }
+
   $mixin: meta.get-mixin($mixin-name);
 
-  @include meta.apply($mixin, $mixin-args...) {
-    @content;
+  @if meta.accepts-content($mixin) {
+    @include meta.apply($mixin, $mixin-args...) {
+      @content;
+    }
+  } @else {
+    @warn "The mixin \"#{$mixin-name}\" does not accept content.";
   }
 }

package/src/scss/mixins/_state.scss

@@ -0,0 +1,18 @@
+// @graupl/graupl state mixins.
+//
+// A series of mixins to tie styles to a state.
+
+@use "../defaults" as root-defaults;
+@use "sass:map";
+
+/// Applies styles to a specific state.
+///
+/// @param {string} $state
+///   The name of the state to apply the styles to.
+@mixin state($state) {
+  @each $selector in map.get(root-defaults.$state-selectors, $state) {
+    &#{$selector} {
+      @content;
+    }
+  }
+}

package/src/scss/mixins/_theme.scss

@@ -0,0 +1,15 @@
+// @graupl/graupl theme mixins.
+//
+// A series of mixins to tie styles to a theme-mode.
+
+@use "../theme/color/defaults" as color-defaults;
+
+/// Applies styles to a specific theme mode.
+///
+/// @param {string} $theme-name
+///   The name of the theme mode to apply the styles to.
+@mixin theme($theme-name) {
+  #{color-defaults.$theme-selector-prefix}#{$theme-name}#{color-defaults.$theme-selector-suffix} {
+    @content;
+  }
+}

package/src/scss/mixins/_utility.scss

@@ -3,28 +3,130 @@
 // Mixins to help generate utility classes.
 
 @use "./screen";
+@use "./state";
+@use "./theme";
 @use "../functions/important";
+@use "../functions/utility";
 @use "../defaults" as root-defaults;
-@use "sass:map";
-
-@mixin create($selector, $property, $value, $breakpoint: false) {
-  #{$selector} {
-    @if $breakpoint {
-      @include screen.up($breakpoint) {
-        @each $prop in $property {
-          #{$prop}: important.insert($value);
-        }
 
-        // Allow for custom overrides and additional styles.
-        @content;
-      }
-    } @else {
-      @each $prop in $property {
-        #{$prop}: important.insert($value);
-      }
+/// Insert a map of properties and values into a utility class.
+///
+/// @param {Map} $map
+///   The map of properties and values to apply to the selector.
+@mixin _insert($map) {
+  @each $prop, $value in $map {
+    #{$prop}: important.insert($value);
+  }
+
+  // Allow for custom overrides and additional styles.
+  @content;
+}
+
+/// Handles wrapping utilities with a conditional state.
+///
+/// @param {?string} $state
+///   The state to wrap.
+@mixin _handle-state($state: null) {
+  @if $state {
+    @include state.state($state) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+/// Handles wrapping utilities with a conditional screen.
+///
+/// @param {?string} $screen
+///   The screen to wrap.
+@mixin _handle-screen($screen: null) {
+  @if $screen {
+    @include screen.up($screen) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
 
-      // Allow for custom overrides and additional styles.
+/// Handles wrapping utilities with a conditional theme.
+///
+/// @param {?string} $theme
+///   The theme mode to wrap.
+@mixin _handle-theme($theme: null) {
+  @if $theme {
+    @include theme.theme($theme) {
       @content;
     }
+  } @else {
+    @content;
+  }
+}
+
+/// Create a utility class with a list of properties and a single value.
+///
+/// @param {string}      $selector
+///   The selector to apply the utility class to.
+/// @param {string|List} $property
+///   The property/properties to apply to the selector.
+/// @param {string}      $value
+///   The value to apply to the property/properties.
+/// @param {?string}     $screen
+///   The screen to apply the utility class to.
+/// @param {?string}     $theme
+///   The theme mode to apply the utility class to.
+/// @param {?string}     $state
+///   The state to apply the utility class to.
+@mixin create(
+  $selector,
+  $property,
+  $value,
+  $screen: null,
+  $theme: null,
+  $state: null
+) {
+  $map: utility.convert-property-values-to-map($property, $value);
+
+  @include create-mapped(
+    $selector,
+    $map,
+    $screen: $screen,
+    $theme: $theme,
+    $state: $state
+  ) {
+    @content;
+  }
+}
+
+/// Create a utility class with a map of properties and values.
+///
+/// @param {string}  $selector
+///   The selector to apply the utility class to.
+/// @param {Map}     $map
+///   The map of properties and values to apply to the selector.
+/// @param {?string} $screen
+///   The screen to apply the utility class to.
+/// @param {?string} $theme
+///   The theme mode to apply the utility class to.
+/// @param {?string} $state
+///   The state to apply the utility class to.
+@mixin create-mapped(
+  $selector,
+  $map,
+  $screen: null,
+  $theme: null,
+  $state: null
+) {
+  @include _handle-theme($theme) {
+    #{$selector} {
+      @include _handle-screen($screen) {
+        @include _handle-state($state) {
+          @include _insert($map) {
+            @content;
+          }
+        }
+      }
+    }
   }
 }

package/src/scss/state/focus/_variables.scss

@@ -9,35 +9,35 @@
 @use "../../functions/theme";
 
 $focus-width: var(
-  --#{root-defaults.$prefix}-focus-width,
+  --#{root-defaults.$prefix}focus-width,
   #{root-variables.$border-width}
 );
 $focus-outline-color: var(
-  --#{root-defaults.$prefix}-focus-outline-color,
+  --#{root-defaults.$prefix}focus-outline-color,
   #{theme.get(primary, 900)}
 );
 $focus-outline-width: var(
-  --#{root-defaults.$prefix}-focus-outline-width,
+  --#{root-defaults.$prefix}focus-outline-width,
   #{$focus-width}
 );
 $focus-outline-style: var(
-  --#{root-defaults.$prefix}-focus-outline-style,
+  --#{root-defaults.$prefix}focus-outline-style,
   #{defaults.$focus-outline-style}
 );
 $focus-outline-offset: var(
-  --#{root-defaults.$prefix}-focus-outline-offset,
+  --#{root-defaults.$prefix}focus-outline-offset,
   calc(-1 * #{$focus-outline-width})
 );
 $focus-box-shadow-color: var(
-  --#{root-defaults.$prefix}-focus-box-shadow-color,
+  --#{root-defaults.$prefix}focus-box-shadow-color,
   #{theme.get(primary, 100)}
 );
 $focus-box-shadow-style: var(
-  --#{root-defaults.$prefix}-focus-box-shadow-style,
+  --#{root-defaults.$prefix}focus-box-shadow-style,
   #{defaults.$focus-box-shadow-style}
 );
 $focus-box-shadow: var(
-  --#{root-defaults.$prefix}-focus-box-shadow,
+  --#{root-defaults.$prefix}focus-box-shadow,
   #{$focus-width $focus-width} 0 0 #{$focus-box-shadow-style}
     #{$focus-box-shadow-color},
   0 0 0 #{$focus-width} #{$focus-box-shadow-style} #{$focus-box-shadow-color}

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

@@ -1,11 +1,11 @@
 // @graupl/graupl color theme styles.
 
-@use "variables" as *;
+@use "../../defaults" as root-defaults;
 @use "../../mixins/layer" as *;
+@use "../../mixins/theme";
 @use "defaults";
-@use "../../defaults" as root-defaults;
 @use "sass:map";
-@use "../../functions/theme";
+@use "variables" as *;
 
 @include layer(theme) {
   :root {
@@ -15,24 +15,24 @@
     // Generate the default colour properties.
     @each $color, $map in defaults.$colors {
       @each $shade, $value in $map {
-        --#{root-defaults.$prefix}-#{$color}--#{$shade}: #{$value};
+        --#{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};
+        --#{root-defaults.$prefix}theme-active--#{$color}--#{$shade}: #{$value};
       }
     }
   }
 
   // Generate the available theme properties.
   @each $theme-name, $theme in $themes {
-    #{defaults.$theme-selector-prefix}#{$theme-name}#{defaults.$theme-selector-suffix} {
+    @include theme.theme($theme-name) {
       @each $color, $map in $theme {
         @each $shade, $value in $map {
-          --#{root-defaults.$prefix}-theme-active--#{$color}--#{$shade}: #{$value};
+          --#{root-defaults.$prefix}theme-active--#{$color}--#{$shade}: #{$value};
         }
       }
 

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

@@ -18,7 +18,7 @@ $colors: ();
   @each $shade, $value in $map {
     // Set the custom prop name and fallback value.
     $color-property: var(
-      --#{root-defaults.$prefix}-#{$color}--#{$shade},
+      --#{root-defaults.$prefix}#{$color}--#{$shade},
       $value
     );
 
@@ -53,7 +53,7 @@ $themes: (
 
     @each $shade, $value in $map {
       $color-property: var(
-        --#{root-defaults.$prefix}-theme-#{$theme-name}--#{$color-name}--#{$shade},
+        --#{root-defaults.$prefix}theme-#{$theme-name}--#{$color-name}--#{$shade},
         #{map.get($colors, map.get($value, color), map.get($value, shade))}
       );
       $color-map: map.merge(
@@ -86,7 +86,7 @@ $themes: (
 
   @each $shade, $value in $map {
     $color-property: var(
-      --#{root-defaults.$prefix}-theme-active--#{$color-name}--#{$shade},
+      --#{root-defaults.$prefix}theme-active--#{$color-name}--#{$shade},
       #{$value}
     );
     $color-map: map.merge(
@@ -111,19 +111,19 @@ $themes: (
 }
 
 // Colour properties.
-$root-color: var(--#{root-defaults.$prefix}-root-color);
-$root-background: var(--#{root-defaults.$prefix}-root-background);
+$root-color: var(--#{root-defaults.$prefix}root-color);
+$root-background: var(--#{root-defaults.$prefix}root-background);
 
 @if map.has-key($themes, active, primary, 900) {
   $root-color: var(
-    --#{root-defaults.$prefix}-root-color,
+    --#{root-defaults.$prefix}root-color,
     #{map.get(map.get(map.get($themes, active), primary), 900)}
   );
 }
 
 @if map.has-key($themes, active, primary, 100) {
   $root-background: var(
-    --#{root-defaults.$prefix}-root-background,
+    --#{root-defaults.$prefix}root-background,
     #{map.get(map.get(map.get($themes, active), primary), 100)}
   );
 }