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

package/src/scss/base/button/_mixins.scss

@@ -6,7 +6,8 @@
 @use "variables" as *;
 @use "../../mixins/layer" as *;
 @use "../../mixins/animation";
-@use "../../functions/theme";
+@use "../../mixins/state";
+@use "../../mixins/theme";
 @use "sass:map";
 
 /// Mixin to apply base styles for buttons.
@@ -25,28 +26,15 @@
   font-size: $button-font-size;
   cursor: pointer;
 
-  @each $state, $selectors in root-defaults.$state-selectors {
-    @each $selector in $selectors {
-      // e.g &:visited, &:focus-visible, &:hover, &:active, &:disabled
-      &#{$selector} {
-        transform: map.get($button-transform-states, $state);
+  @include state.generate-modifiers(
+    (
+      transform: $button-transform-states,
+    )
+  );
 
-        // If the state is disabled, we want that to supersede all other states.
-        @if $state == "disabled" {
-          cursor: not-allowed;
-
-          @each $sub-state, $sub-selectors in root-defaults.$state-selectors {
-            @if $sub-state != $state {
-              @each $sub-selector in $sub-selectors {
-                // e.g &:visited, &:focus-visible, &:hover, &:active
-                &#{$sub-selector} {
-                  transform: map.get($button-transform-states, $state);
-                }
-              }
-            }
-          }
-        }
-      }
+  @each $selector in map.get(root-defaults.$state-selectors, "disabled") {
+    &#{$selector} {
+      cursor: not-allowed;
     }
   }
 
@@ -61,43 +49,21 @@
   background: $button-background;
   color: $button-color;
 
-  @each $color, $map in defaults.$button-theme-map {
-    // e.g. &.primary, &.secondary, &.tertiary
-    &#{defaults.$button-theme-selector-base}#{defaults.$button-theme-selector-prefix}#{$color} {
-      @each $prop, $value in $map {
-        --#{root-defaults.$prefix}button-#{$prop}: #{theme.get(
-            map.get($value, color),
-            map.get($value, shade)
-          )};
-      }
-    }
-  }
+  @include state.generate-modifiers(
+    (
+      border-color: $button-border-color-states,
+      background: $button-background-states,
+      color: $button-color-states,
+    )
+  );
 
-  @each $state, $selectors in root-defaults.$state-selectors {
-    @each $selector in $selectors {
-      // e.g &:visited, &:focus-visible, &:hover, &:active, &:disabled
-      &#{$selector} {
-        border-color: map.get($button-border-color-states, $state);
-        background: map.get($button-background-states, $state);
-        color: map.get($button-color-states, $state);
-
-        // If the state is disabled, we want that to supersede all other states.
-        @if $state == "disabled" {
-          @each $sub-state, $sub-selectors in root-defaults.$state-selectors {
-            @if $sub-state != $state {
-              @each $sub-selector in $sub-selectors {
-                // e.g &:visited, &:focus-visible, &:hover, &:active
-                &#{$sub-selector} {
-                  border-color: map.get($button-border-color-states, $state);
-                  background: map.get($button-background-states, $state);
-                  color: map.get($button-color-states, $state);
-                }
-              }
-            }
-          }
-        }
-      }
-    }
+  @if root-defaults.$themeable-components and defaults.$themeable {
+    @include theme.generate-modifiers(
+      defaults.$button-theme-map,
+      defaults.$button-theme-selector-base,
+      defaults.$button-theme-selector-prefix,
+      "button-"
+    );
   }
 }
 

package/src/scss/base/button/_variables.scss

@@ -3,6 +3,57 @@
 // These values are to be used to directly style bases and provide a
 // cleaner way to reference custom properties.
 
+// Custom property defaults:
+// | Custom property                            | Default                                                                                                                                                                                                                                                                      |
+// | ------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+// | --graupl-button-min-width                  | 44px                                                                                                                                                                                                                                                                         |
+// | --graupl-button-min-height                 | 44px                                                                                                                                                                                                                                                                         |
+// | --graupl-button-padding-x                  | var(--graupl-spacer-5)                                                                                                                                                                                                                                                       |
+// | --graupl-button-padding-y                  | var(--graupl-spacer-3)                                                                                                                                                                                                                                                       |
+// | --graupl-button-padding                    | var(--graupl-button-padding-y) var(--graupl-button-padding-x)                                                                                                                                                                                                                |
+// | --graupl-button-font-size                  | var(--graupl-font-base)                                                                                                                                                                                                                                                      |
+// | --graupl-button-transition                 | background var(--graupl-transition-duration-fast) var(--graupl-transition-timing-function), color var(--graupl-transition-duration-fast) var(--graupl-transition-timing-function), transform var(--graupl-transition-duration-fast) var(--graupl-transition-timing-function) |
+// | --graupl-button-transition-reduced-motion  | background var(--graupl-transition-duration-none) var(--graupl-transition-timing-function), color var(--graupl-transition-duration-none) var(--graupl-transition-timing-function)                                                                                            |
+// | --graupl-button-transform                  | none                                                                                                                                                                                                                                                                         |
+// | --graupl-button-visited-transform          | var(--graupl-button-transform)                                                                                                                                                                                                                                               |
+// | --graupl-button-focus-transform            | var(--graupl-button-transform)                                                                                                                                                                                                                                               |
+// | --graupl-button-hover-transform            | var(--graupl-button-transform)                                                                                                                                                                                                                                               |
+// | --graupl-button-active-transform           | scale(0.95)                                                                                                                                                                                                                                                                  |
+// | --graupl-button-disabled-transform         | none                                                                                                                                                                                                                                                                         |
+// | --graupl-button-background                 | var(--graupl-background)                                                                                                                                                                                                                                                     |
+// | --graupl-button-visited-background         | var(--graupl-button-background)                                                                                                                                                                                                                                              |
+// | --graupl-button-focus-background           | var(--graupl-button-background)                                                                                                                                                                                                                                              |
+// | --graupl-button-hover-background           | var(--graupl-color)                                                                                                                                                                                                                                                          |
+// | --graupl-button-active-background          | var(--graupl-button-hover-background)                                                                                                                                                                                                                                        |
+// | --graupl-button-disabled-background        | var(--graupl-background)                                                                                                                                                                                                                                                     |
+// | --graupl-button-color                      | var(--graupl-color)                                                                                                                                                                                                                                                          |
+// | --graupl-button-visited-color              | var(--graupl-button-color)                                                                                                                                                                                                                                                   |
+// | --graupl-button-focus-color                | var(--graupl-button-color)                                                                                                                                                                                                                                                   |
+// | --graupl-button-hover-color                | var(--graupl-background)                                                                                                                                                                                                                                                     |
+// | --graupl-button-active-color               | var(--graupl-button-hover-color)                                                                                                                                                                                                                                             |
+// | --graupl-button-disabled-color             | var(--graupl-theme-active--primary--200)                                                                                                                                                                                                                                     |
+// | --graupl-button-border-top-width           | var(--graupl-border-top-width)                                                                                                                                                                                                                                               |
+// | --graupl-button-border-right-width         | var(--graupl-border-right-width)                                                                                                                                                                                                                                             |
+// | --graupl-button-border-bottom-width        | var(--graupl-border-bottom-width)                                                                                                                                                                                                                                            |
+// | --graupl-button-border-left-width          | var(--graupl-border-left-width)                                                                                                                                                                                                                                              |
+// | --graupl-button-border-width               | var(--graupl-button-border-top-width) var(--graupl-button-border-right-width) var(--graupl-button-border-bottom-width) var(--graupl-button-border-left-width)                                                                                                                |
+// | --graupl-button-border-top-style           | var(--graupl-border-top-style)                                                                                                                                                                                                                                               |
+// | --graupl-button-border-right-style         | var(--graupl-border-right-style)                                                                                                                                                                                                                                             |
+// | --graupl-button-border-bottom-style        | var(--graupl-border-bottom-style)                                                                                                                                                                                                                                            |
+// | --graupl-button-border-left-style          | var(--graupl-border-left-style)                                                                                                                                                                                                                                              |
+// | --graupl-button-border-style               | var(--graupl-button-border-top-style) var(--graupl-button-border-right-style) var(--graupl-button-border-bottom-style) var(--graupl-button-border-left-style)                                                                                                                |
+// | --graupl-button-border-top-left-radius     | var(--graupl-border-top-left-radius)                                                                                                                                                                                                                                         |
+// | --graupl-button-border-top-right-radius    | var(--graupl-border-top-right-radius)                                                                                                                                                                                                                                        |
+// | --graupl-button-border-bottom-right-radius | var(--graupl-border-bottom-right-radius)                                                                                                                                                                                                                                     |
+// | --graupl-button-border-bottom-left-radius  | var(--graupl-border-bottom-left-radius)                                                                                                                                                                                                                                      |
+// | --graupl-button-border-radius              | var(--graupl-button-border-top-left-radius) var(--graupl-button-border-top-right-radius) var(--graupl-button-border-bottom-right-radius) var(--graupl-button-border-bottom-left-radius)                                                                                      |
+// | --graupl-button-border-color               | var(--graupl-border-color)                                                                                                                                                                                                                                                   |
+// | --graupl-button-visited-border-color       | var(--graupl-button-border-color)                                                                                                                                                                                                                                            |
+// | --graupl-button-focus-border-color         | var(--graupl-button-border-color)                                                                                                                                                                                                                                            |
+// | --graupl-button-hover-border-color         | var(--graupl-border-color)                                                                                                                                                                                                                                                   |
+// | --graupl-button-active-border-color        | var(--graupl-button-hover-border-color)                                                                                                                                                                                                                                      |
+// | --graupl-button-disabled-border-color      | var(--graupl-theme-active--primary--200)                                                                                                                                                                                                                                     |
+
 @use "defaults";
 @use "../../variables" as root-variables;
 @use "../../defaults" as root-defaults;
@@ -12,30 +63,43 @@
 @use "sass:map";
 
 // Button properties.
+// --graupl-button-min-width
 $button-min-width: var(
   --#{root-defaults.$prefix}button-min-width,
   #{root-defaults.$interactive-min-width}
 );
+
+// --graupl-button-min-height
 $button-min-height: var(
   --#{root-defaults.$prefix}button-min-height,
   #{root-defaults.$interactive-min-height}
 );
+
+// --graupl-button-padding-x
 $button-padding-x: var(
   --#{root-defaults.$prefix}button-padding-x,
   #{map.get(root-variables.$spacers, 5)}
 );
+
+// --graupl-button-padding-y
 $button-padding-y: var(
   --#{root-defaults.$prefix}button-padding-y,
   #{map.get(root-variables.$spacers, 3)}
 );
+
+// --graupl-button-padding
 $button-padding: var(
   --#{root-defaults.$prefix}button-padding,
   #{$button-padding-y} #{$button-padding-x}
 );
+
+// --graupl-button-font-size
 $button-font-size: var(
   --#{root-defaults.$prefix}button-font-size,
   #{map.get(typography.$font-sizes, base)}
 );
+
+// --graupl-button-transition
 $button-transition: var(
   --#{root-defaults.$prefix}button-transition,
   background #{map.get(root-variables.$transition-durations, fast)}
@@ -45,6 +109,8 @@ $button-transition: var(
   transform #{map.get(root-variables.$transition-durations, fast)}
     #{root-variables.$transition-timing-function}
 );
+
+// --graupl-button-transition-reduced-motion
 $button-transition-reduced-motion: var(
   --#{root-defaults.$prefix}button-transition-reduced-motion,
   background #{map.get(root-variables.$transition-durations, none)}
@@ -54,26 +120,37 @@ $button-transition-reduced-motion: var(
 );
 
 // Transform properties.
+// --graupl-button-transform
 $button-transform: var(
   --#{root-defaults.$prefix}button-transform,
   #{defaults.$button-initial-transform}
 );
+
+// --graupl-button-visited-transform
 $button-visited-transform: var(
   --#{root-defaults.$prefix}button-visited-transform,
   #{$button-transform}
 );
+
+// --graupl-button-focus-transform
 $button-focus-transform: var(
   --#{root-defaults.$prefix}button-focus-transform,
   #{$button-transform}
 );
+
+// --graupl-button-hover-transform
 $button-hover-transform: var(
   --#{root-defaults.$prefix}button-hover-transform,
   #{$button-transform}
 );
+
+// --graupl-button-active-transform
 $button-active-transform: var(
   --#{root-defaults.$prefix}button-active-transform,
   #{defaults.$button-final-transform}
 );
+
+// --graupl-button-disabled-transform
 $button-disabled-transform: var(
   --#{root-defaults.$prefix}button-disabled-transform,
   #{defaults.$button-disabled-transform}
@@ -88,26 +165,37 @@ $button-transform-states: (
 );
 
 // Background properties.
+// --graupl-button-background
 $button-background: var(
   --#{root-defaults.$prefix}button-background,
   #{color.$background}
 );
+
+// --graupl-button-visited-background
 $button-visited-background: var(
   --#{root-defaults.$prefix}button-visited-background,
   #{$button-background}
 );
+
+// --graupl-button-focus-background
 $button-focus-background: var(
   --#{root-defaults.$prefix}button-focus-background,
   #{$button-background}
 );
+
+// --graupl-button-hover-background
 $button-hover-background: var(
   --#{root-defaults.$prefix}button-hover-background,
   #{color.$color}
 );
+
+// --graupl-button-active-background
 $button-active-background: var(
   --#{root-defaults.$prefix}button-active-background,
   #{$button-hover-background}
 );
+
+// --graupl-button-disabled-background
 $button-disabled-background: var(
   --#{root-defaults.$prefix}button-disabled-background,
   #{color.$background}
@@ -122,23 +210,34 @@ $button-background-states: (
 );
 
 // Text properties.
+// --graupl-button-color
 $button-color: var(--#{root-defaults.$prefix}button-color, #{color.$color});
+
+// --graupl-button-visited-color
 $button-visited-color: var(
   --#{root-defaults.$prefix}button-visited-color,
   #{$button-color}
 );
+
+// --graupl-button-focus-color
 $button-focus-color: var(
   --#{root-defaults.$prefix}button-focus-color,
   #{$button-color}
 );
+
+// --graupl-button-hover-color
 $button-hover-color: var(
   --#{root-defaults.$prefix}button-hover-color,
   #{color.$background}
 );
+
+// --graupl-button-active-color
 $button-active-color: var(
   --#{root-defaults.$prefix}button-active-color,
   #{$button-hover-color}
 );
+
+// --graupl-button-disabled-color
 $button-disabled-color: var(
   --#{root-defaults.$prefix}button-disabled-color,
   #{theme.get(primary, 200)}
@@ -153,64 +252,93 @@ $button-color-states: (
 );
 
 // Border properties.
+// --graupl-button-border-top-width
 $button-border-top-width: var(
   --#{root-defaults.$prefix}button-border-top-width,
   #{root-variables.$border-top-width}
 );
+
+// --graupl-button-border-right-width
 $button-border-right-width: var(
   --#{root-defaults.$prefix}button-border-right-width,
   #{root-variables.$border-right-width}
 );
+
+// --graupl-button-border-bottom-width
 $button-border-bottom-width: var(
   --#{root-defaults.$prefix}button-border-bottom-width,
   #{root-variables.$border-bottom-width}
 );
+
+// --graupl-button-border-left-width
 $button-border-left-width: var(
   --#{root-defaults.$prefix}button-border-left-width,
   #{root-variables.$border-left-width}
 );
+
+// --graupl-button-border-width
 $button-border-width: var(
   --#{root-defaults.$prefix}button-border-width,
   #{$button-border-top-width} #{$button-border-right-width}
     #{$button-border-bottom-width} #{$button-border-left-width}
 );
+
+// --graupl-button-border-top-style
 $button-border-top-style: var(
   --#{root-defaults.$prefix}button-border-top-style,
   #{root-variables.$border-top-style}
 );
+
+// --graupl-button-border-right-style
 $button-border-right-style: var(
   --#{root-defaults.$prefix}button-border-right-style,
   #{root-variables.$border-right-style}
 );
+
+// --graupl-button-border-bottom-style
 $button-border-bottom-style: var(
   --#{root-defaults.$prefix}button-border-bottom-style,
   #{root-variables.$border-bottom-style}
 );
+
+// --graupl-button-border-left-style
 $button-border-left-style: var(
   --#{root-defaults.$prefix}button-border-left-style,
   #{root-variables.$border-left-style}
 );
+
+// --graupl-button-border-style
 $button-border-style: var(
   --#{root-defaults.$prefix}button-border-style,
   #{$button-border-top-style} #{$button-border-right-style}
     #{$button-border-bottom-style} #{$button-border-left-style}
 );
+
+// --graupl-button-border-top-left-radius
 $button-border-top-left-radius: var(
   --#{root-defaults.$prefix}button-border-top-left-radius,
   #{root-variables.$border-top-left-radius}
 );
+
+// --graupl-button-border-top-right-radius
 $button-border-top-right-radius: var(
   --#{root-defaults.$prefix}button-border-top-right-radius,
   #{root-variables.$border-top-right-radius}
 );
+
+// --graupl-button-border-bottom-right-radius
 $button-border-bottom-right-radius: var(
   --#{root-defaults.$prefix}button-border-bottom-right-radius,
   #{root-variables.$border-bottom-right-radius}
 );
+
+// --graupl-button-border-bottom-left-radius
 $button-border-bottom-left-radius: var(
   --#{root-defaults.$prefix}button-border-bottom-left-radius,
   #{root-variables.$border-bottom-left-radius}
 );
+
+// --graupl-button-border-radius
 $button-border-radius: var(
   --#{root-defaults.$prefix}button-border-radius,
   #{$button-border-top-left-radius} #{$button-border-top-right-radius}
@@ -218,26 +346,37 @@ $button-border-radius: var(
 );
 
 // Border colour properties.
+// --graupl-button-border-color
 $button-border-color: var(
   --#{root-defaults.$prefix}button-border-color,
   #{color.$border-color}
 );
+
+// --graupl-button-visited-border-color
 $button-visited-border-color: var(
   --#{root-defaults.$prefix}button-visited-border-color,
   #{$button-border-color}
 );
+
+// --graupl-button-focus-border-color
 $button-focus-border-color: var(
   --#{root-defaults.$prefix}button-focus-border-color,
   #{$button-border-color}
 );
+
+// --graupl-button-hover-border-color
 $button-hover-border-color: var(
   --#{root-defaults.$prefix}button-hover-border-color,
   #{color.$border-color}
 );
+
+// --graupl-button-active-border-color
 $button-active-border-color: var(
   --#{root-defaults.$prefix}button-active-border-color,
   #{$button-hover-border-color}
 );
+
+// --graupl-button-disabled-border-color
 $button-disabled-border-color: var(
   --#{root-defaults.$prefix}button-disabled-border-color,
   #{theme.get(primary, 200)}

package/src/scss/base/form/_defaults.scss

@@ -6,19 +6,89 @@
 // 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 "../../functions/theme";
+@use "sass:map";
+
 // Form selectors.
-$selector-base: "" !default;
-$modifier-selector-base: $selector-base !default;
+$selector-base: root-defaults.$element-selector-base !default;
+$modifier-selector-base: root-defaults.$modifier-selector-base !default;
+$generate-base-theme-map: root-defaults.$generate-base-theme-maps !default;
+$themeable: true !default;
 $input-selector-base: $selector-base !default;
 $input-selector: "input" !default;
+$input-theme-prefix-selector-base: $modifier-selector-base !default;
+$input-theme-prefix-selector: "" !default;
 $textarea-selector-base: $selector-base !default;
 $textarea-selector: "textarea" !default;
 $select-selector-base: $selector-base !default;
 $select-selector: "select" !default;
 $label-selector-base: $selector-base !default;
 $label-selector: "label" !default;
+$label-theme-prefix-selector-base: $input-theme-prefix-selector-base !default;
+$label-theme-prefix-selector: $input-theme-prefix-selector !default;
 $fieldset-selector-base: $selector-base !default;
 $fieldset-selector: "fieldset" !default;
+$fieldset-theme-prefix-selector-base: $input-theme-prefix-selector-base !default;
+$fieldset-theme-prefix-selector: $input-theme-prefix-selector !default;
 
 // Fieldset properties.
 $fieldset-direction: column !default;
+
+// Input theme defaults.
+// This map is used to define the default colour shades for the
+// themed input bases.
+//
+// e.g.
+// Primary inputs will use primary--700 as the header background,
+// and primary--100 as the header text colour.
+//
+// Secondary/tertiary inputs will use the same shade for their respective colours.
+$-input-theme-mappings: (
+  color: 900,
+  background: 100,
+  border-color: 700,
+  placeholder-color: 600,
+  disabled-color: 200,
+  disabled-border-color: 200,
+);
+$input-theme-mappings: () !default;
+$-label-theme-mappings: (
+  color: 900,
+  background: 100,
+  border-color: 700,
+);
+$label-theme-mappings: () !default;
+$-fieldset-theme-mappings: (
+  color: 900,
+  background: 100,
+  border-color: 700,
+  accent-color: 700,
+);
+$fieldset-theme-mappings: () !default;
+
+// Merge the custom input theme map with the default one.
+@if $generate-base-theme-map {
+  $input-theme-mappings: map.merge(
+    $-input-theme-mappings,
+    $input-theme-mappings
+  );
+  $label-theme-mappings: map.merge(
+    $-label-theme-mappings,
+    $label-theme-mappings
+  );
+  $fieldset-theme-mappings: map.merge(
+    $-fieldset-theme-mappings,
+    $fieldset-theme-mappings
+  );
+}
+
+$-input-theme-map: theme.generate-property-map($input-theme-mappings);
+$input-theme-map: () !default;
+$input-theme-map: map.deep-merge($-input-theme-map, $input-theme-map);
+$-label-theme-map: theme.generate-property-map($label-theme-mappings);
+$label-theme-map: () !default;
+$label-theme-map: map.deep-merge($-label-theme-map, $label-theme-map);
+$-fieldset-theme-map: theme.generate-property-map($fieldset-theme-mappings);
+$fieldset-theme-map: () !default;
+$fieldset-theme-map: map.deep-merge($-fieldset-theme-map, $fieldset-theme-map);