@graupl/graupl 1.0.0-alpha.7 → 1.0.0-alpha.8

package/src/scss/_defaults.scss

@@ -17,17 +17,10 @@ $content-max-width: 96ch !default;
 
 // Screen sizes.
 $base-screen-sizes: (
-  xs: 0,
-  sm: 469px,
-  md: 768px,
-  lg: 1024px,
-  xl: 1280px,
-  hd: 1920px,
-  qhd: 2560px,
-  uhd: 3840px,
-) !default;
+  xs: "(0 <= width <= 48ch)",
+);
 $custom-screen-sizes: () !default;
-$screen-sizes: map.merge($base-screen-sizes, $custom-screen-sizes) !default;
+$screen-sizes: map.merge($base-screen-sizes, $custom-screen-sizes);
 
 // Spacing properties.
 $spacer: 1rem !default;
@@ -43,12 +36,12 @@ $base-spacer-multipliers: (
   8: 3,
   9: 5,
   10: 10,
-) !default;
+);
 $custom-spacer-multipliers: () !default;
 $spacer-multipliers: map.merge(
   $base-spacer-multipliers,
   $custom-spacer-multipliers
-) !default;
+);
 
 // Size properties.
 $interactive-min-width: 44px !default;
@@ -60,10 +53,15 @@ $border-width: 2px !default;
 $border-style: solid !default;
 
 // Transition properties.
-$transition-duration-base: 100;
-$transition-duration: (
+$transition-duration-base: 100 !default;
+$transition-timing-function: ease !default;
+$base-transition-durations: (
   fast: #{$transition-duration-base * 1.5}ms,
   default: #{$transition-duration-base * 2.5}ms,
   slow: #{$transition-duration-base * 3}ms,
-) !default;
-$transition-timing-function: ease !default;
+);
+$custom-transition-durations: () !default;
+$transition-durations: map.merge(
+  $base-transition-durations,
+  $custom-transition-durations
+);

package/src/scss/_variables.scss

@@ -30,21 +30,21 @@ $border-width: var(--#{defaults.$prefix}-border-width, defaults.$border-width);
 $border-style: var(--#{defaults.$prefix}-border-style, defaults.$border-style);
 
 // Transition properties.
-$transition-duration: (
+$transition-durations: (
   fast:
     var(
       --#{defaults.$prefix}-transition-duration-fast,
-      map.get(defaults.$transition-duration, fast)
+      map.get(defaults.$transition-durations, fast)
     ),
   default:
     var(
       --#{defaults.$prefix}-transition-duration-default,
-      map.get(defaults.$transition-duration, default)
+      map.get(defaults.$transition-durations, default)
     ),
   slow:
     var(
       --#{defaults.$prefix}-transition-duration-slow,
-      map.get(defaults.$transition-duration, slow)
+      map.get(defaults.$transition-durations, slow)
     ),
 );
 $transition-timing-function: var(

package/src/scss/base/table/_defaults.scss

@@ -5,4 +5,4 @@
 // which can be found in the `variables.scss` file.
 
 // Table properties.
-$caption-side: bottom !default;
+$table-caption-side: bottom !default;

package/src/scss/base/table/_variables.scss

@@ -10,31 +10,31 @@
 // Table caption properties.
 $table-caption-side: var(
   --#{root-defaults.$prefix}-table-caption-side,
-  #{defaults.$caption-side}
-) !default;
+  #{defaults.$table-caption-side}
+);
 $table-caption-padding-x: var(
   --#{root-defaults.$prefix}-table-caption-padding-x,
   #{map.get(root-variables.$spacers, 3)}
-) !default;
+);
 $table-caption-padding-y: var(
   --#{root-defaults.$prefix}-table-caption-padding-y,
   #{map.get(root-variables.$spacers, 3)}
-) !default;
+);
 $table-caption-padding: $table-caption-padding-y $table-caption-padding-x;
 
 // Table header properties.
 $table-header-font-weight: var(
   --#{root-defaults.$prefix}-table-header-font-weight,
   #{typography.$font-weight-bold}
-) !default;
+);
 $table-header-padding-x: var(
   --#{root-defaults.$prefix}-table-header-padding-x,
   #{map.get(root-variables.$spacers, 3)}
-) !default;
+);
 $table-header-padding-y: var(
   --#{root-defaults.$prefix}-table-header-padding-y,
   #{map.get(root-variables.$spacers, 3)}
-) !default;
+);
 $table-header-padding: $table-header-padding-y $table-header-padding-x;
 $table-header-background: var(
   --#{root-defaults.$prefix}-table-header-background,
@@ -49,11 +49,11 @@ $table-header-color: var(
 $table-cell-padding-x: var(
   --#{root-defaults.$prefix}-table-cell-padding-x,
   #{map.get(root-variables.$spacers, 3)}
-) !default;
+);
 $table-cell-padding-y: var(
   --#{root-defaults.$prefix}-table-cell-padding-y,
   #{map.get(root-variables.$spacers, 3)}
-) !default;
+);
 $table-cell-padding: $table-cell-padding-y $table-cell-padding-x;
 $table-cell-background: var(
   --#{root-defaults.$prefix}-table-cell-background,

package/src/scss/component/button/_defaults.scss

@@ -4,7 +4,36 @@
 // They are mainly used to provide default fallbacks for custom properties
 // which can be found in the `variables.scss` file.
 
+@use "sass:map";
+
 $button-hover-transform: none !default;
 $button-hover-transform-reduced-motion: none !default;
 $button-active-transform: scale(0.95) !default;
 $button-active-transform-reduced-motion: scale(0.98) !default;
+
+// Button state theme defaults.
+// This map is used to define the default colour shades for the
+// themed button components.
+//
+// e.g.
+// Primary buttons will use primary--900 as the text colour, primary--100 as the background
+// and primary--900 as the border colour.
+//
+// Secondary/tertiary buttons will use the same shade for their respective colours.
+$base-button-state-theme-map: (
+  color: 900,
+  border-color: 700,
+  hover-color: 100,
+  hover-background: 700,
+  hover-border-color: 700,
+  active-color: 100,
+  active-background: 700,
+  active-border-color: 700,
+  disabled-color: 200,
+  disabled-border-color: 200,
+);
+$custom-button-state-theme-map: () !default;
+$button-state-theme-map: map.merge(
+  $base-button-state-theme-map,
+  $custom-button-state-theme-map
+);

package/src/scss/component/button/_index.scss

@@ -1,5 +1,6 @@
 // Graupl Button Component.
 
+@use "defaults";
 @use "../../defaults" as root-defaults;
 @use "../../theme/color/variables" as color;
 @use "variables" as *;
@@ -88,31 +89,9 @@
 
     @each $color, $map in color.$theme-active {
       &.#{$color} {
-        --#{root-defaults.$prefix}-button-color: #{map.get($map, 900)};
-        --#{root-defaults.$prefix}-button-hover-color: #{map.get($map, 100)};
-        --#{root-defaults.$prefix}-button-active-color: #{map.get($map, 100)};
-        --#{root-defaults.$prefix}-button-disabled-color: #{map.get($map, 200)};
-        --#{root-defaults.$prefix}-button-hover-background: #{map.get(
-            $map,
-            700
-          )};
-        --#{root-defaults.$prefix}-button-active-background: #{map.get(
-            $map,
-            700
-          )};
-        --#{root-defaults.$prefix}-button-border-color: #{map.get($map, 700)};
-        --#{root-defaults.$prefix}-button-hover-border-color: #{map.get(
-            $map,
-            700
-          )};
-        --#{root-defaults.$prefix}-button-active-border-color: #{map.get(
-            $map,
-            700
-          )};
-        --#{root-defaults.$prefix}-button-disabled-border-color: #{map.get(
-            $map,
-            200
-          )};
+        @each $prop, $shade in defaults.$button-state-theme-map {
+          --#{root-defaults.$prefix}-button-#{$prop}: #{map.get($map, $shade)};
+        }
       }
     }
   }

package/src/scss/component/button/_variables.scss

@@ -34,16 +34,14 @@ $button-font-size: var(
 );
 $button-transition: var(
   --#{root-defaults.$prefix}-button-transition,
-  background #{map.get(root-variables.$transition-duration, fast)} #{root-variables.$transition-timing-function},
-  color #{map.get(root-variables.$transition-duration, fast)} #{root-variables.$transition-timing-function},
-  border-color #{map.get(root-variables.$transition-duration, fast)} #{root-variables.$transition-timing-function},
-  transform #{map.get(root-variables.$transition-duration, fast)} #{root-variables.$transition-timing-function}
+  background #{map.get(root-variables.$transition-durations, fast)} #{root-variables.$transition-timing-function},
+  color #{map.get(root-variables.$transition-durations, fast)} #{root-variables.$transition-timing-function},
+  transform #{map.get(root-variables.$transition-durations, fast)} #{root-variables.$transition-timing-function}
 );
 $button-transition-reduced-motion: var(
   --#{root-defaults.$prefix}-button-transition-reduced-motion,
-  background #{map.get(root-variables.$transition-duration, none)} #{root-variables.$transition-timing-function},
-  color #{map.get(root-variables.$transition-duration, none)} #{root-variables.$transition-timing-function},
-  border-color #{map.get(root-variables.$transition-duration, none)} #{root-variables.$transition-timing-function}
+  background #{map.get(root-variables.$transition-durations, none)} #{root-variables.$transition-timing-function},
+  color #{map.get(root-variables.$transition-durations, none)} #{root-variables.$transition-timing-function}
 );
 
 // Transform properties.

package/src/scss/component/input-group/_index.scss

@@ -35,7 +35,7 @@
     }
   }
 
-  @include screen-under(sm) {
+  @include screen(xs) {
     .input-group.inline {
       grid-template-areas: $input-group-grid-template-areas;
       grid-template-columns: $input-group-grid-template-columns;

package/src/scss/component/table/_defaults.scss

@@ -3,3 +3,28 @@
 // Generally, these should not be used directly when styling components.
 // They are mainly used to provide default fallbacks for custom properties
 // which can be found in the `variables.scss` file.
+
+@use "sass:map";
+
+// Table theme defaults.
+// This map is used to define the default colour shades for the
+// themed table components.
+//
+// e.g.
+// Primary tables will use primary--700 as the header background,
+// and primary--100 as the header text colour.
+//
+// Secondary/tertiary tables will use the same shade for their respective colours.
+$base-table-theme-map: (
+  header-background: 700,
+  header-color: 100,
+  striped-background: 200,
+  striped-color: 900,
+  hover-background: 300,
+  hover-color: 900,
+  border-color: 900,
+  highlight-background: 500,
+  highlight-color: 100,
+);
+$custom-table-theme-map: () !default;
+$table-theme-map: map.merge($base-table-theme-map, $custom-table-theme-map);

package/src/scss/component/table/_index.scss

@@ -1,6 +1,7 @@
 // Table component styles.
 
 @use "variables" as *;
+@use "defaults";
 @use "../../mixins/layer" as *;
 @use "../../defaults" as root-defaults;
 @use "../../functions/theme";
@@ -10,42 +11,12 @@
     @each $variant in theme.variants() {
       &.#{$variant},
       .#{$variant} {
-        --#{root-defaults.$prefix}-table-header-background: #{theme.get(
-            $variant,
-            700
-          )};
-        --#{root-defaults.$prefix}-table-header-color: #{theme.get(
-            $variant,
-            100
-          )};
-        --#{root-defaults.$prefix}-table-striped-background: #{theme.get(
-            $variant,
-            200
-          )};
-        --#{root-defaults.$prefix}-table-striped-color: #{theme.get(
-            $variant,
-            900
-          )};
-        --#{root-defaults.$prefix}-table-hover-background: #{theme.get(
-            $variant,
-            300
-          )};
-        --#{root-defaults.$prefix}-table-hover-color: #{theme.get(
-            $variant,
-            900
-          )};
-        --#{root-defaults.$prefix}-table-border-color: #{theme.get(
-            $variant,
-            900
-          )};
-        --#{root-defaults.$prefix}-table-highlight-background: #{theme.get(
-            $variant,
-            500
-          )};
-        --#{root-defaults.$prefix}-table-highlight-color: #{theme.get(
-            $variant,
-            100
-          )};
+        @each $prop, $key in defaults.$table-theme-map {
+          --#{root-defaults.$prefix}-table-#{$prop}: #{theme.get(
+              $variant,
+              $key
+            )};
+        }
       }
     }
 

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

@@ -28,7 +28,7 @@
   }
 
   // Disable columns on small screens to avoid horizontal bleeding.
-  @include screen-under(sm) {
+  @include screen(xs) {
     .columns {
       --#{root-defaults.$prefix}-columns-min-width: #{defaults.$columns-max-width};
     }

package/src/scss/mixins/_media-queries.scss

@@ -20,24 +20,7 @@
 @mixin screen($size) {
   $screen-size: map.get(root-defaults.$screen-sizes, $size);
 
-  @media screen and (min-width: $screen-size) {
-    @content;
-  }
-}
-
-@mixin screen-under($size) {
-  $screen-size: map.get(root-defaults.$screen-sizes, $size);
-
-  @media screen and (max-width: #{$screen-size - 1}) {
-    @content;
-  }
-}
-
-@mixin screen-between($min-size, $max-size) {
-  $min-screen-size: map.get(root-defaults.$screen-sizes, $min-size);
-  $max-screen-size: map.get(root-defaults.$screen-sizes, $max-size);
-
-  @media screen and (min-width: $min-screen-size) and (max-width: #{$max-screen-size - 1}) {
+  @media screen and #{$screen-size} {
     @content;
   }
 }

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

@@ -46,7 +46,7 @@ $custom-colors: () !default;
 $colors: map.merge($default-colors, $custom-colors);
 
 // A map for reversing the shade values of the dark theme.
-$dark-map: (
+$base-dark-map: (
   100: 900,
   200: 800,
   300: 700,
@@ -56,4 +56,6 @@ $dark-map: (
   700: 300,
   800: 200,
   900: 100,
-) !default;
+);
+$custom-dark-map: () !default;
+$dark-map: map.merge($base-dark-map, $custom-dark-map);

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

@@ -24,21 +24,21 @@ $base-font-size-multipliers: (
   3xl: 2.074,
   4xl: 2.488,
   5xl: 2.986,
-) !default;
+);
 $custom-font-size-multipliers: () !default;
 $font-size-multipliers: map.merge(
   $base-font-size-multipliers,
   $custom-font-size-multipliers
-) !default;
+);
 
 // Weights.
 $base-font-weights: (
   light: 300,
   normal: 400,
   bold: 700,
-) !default;
+);
 $custom-font-weights: () !default;
-$font-weights: map.merge($base-font-weights, $custom-font-weights) !default;
+$font-weights: map.merge($base-font-weights, $custom-font-weights);
 
 /* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
 $root-font-family:

package/src/scss/utilities/spacing/_defaults.scss

@@ -36,9 +36,9 @@ $base-spacing-properties: (
   mis: margin-inline-start,
   mie: margin-inline-end,
   mise: margin-inline-start margin-inline-end,
-) !default;
+);
 $custom-spacing-properties: () !default;
 $spacing-properties: map.merge(
   $base-spacing-properties,
   $custom-spacing-properties
-) !default;
+);