@doodl/slate 1.21.5 → 1.22.0

package/scss/_mixins.scss

@@ -1,5 +1,6 @@
 @import 'variables/breakpoints';
 @import 'variables/forms';
+@import 'helpers';
 
 // Generate preset media query from breakpoint key
 @mixin respond($breakpoint) {
@@ -33,58 +34,93 @@
 }
 
 // Button generators
-@mixin default-button--hover-effect($colour, $background: 0) {
-    @if $background != 0 {
-        background: $background;
-    } @else {
-        background: change-color(
-            $colour,
-            $lightness: (100 - $slate-button-darken-amount)
-        );
+@mixin default-button--hover-effect($colour, $background: 0, $key: 0) {
+    @if $background == 0 {
+        @if type-of($colour) == "map" {
+            $background: map-get($colour,muted);
+        } @else {
+            $background: change-color(
+                guarantee-colour-value($colour),
+                $lightness: (100 - $slate-button-darken-amount)
+            );
+        }
+    }
+
+    @if type-of($colour) == "map" {
+        $colour: map-get($colour,500);
     }
-    color: $colour;
+    @include assign-variable-property(background,$background,$key,--slate-button-background--,--hover);
+    @include assign-variable-property(color,$colour,$key,--slate-button-colour--,--hover);
 }
 
-@mixin default-button--active-effect($colour, $background: 0) {
-    $shadow_colour: 0;
+@mixin default-button--active-effect($colour, $background: 0, $key: 0) {
+
+    $_shadow-colour--active: "";
+
     @if $background != 0 {
-        $shadow_colour: darken($background, 20);
+        $_shadow-colour--active: $background;
+    } @else if type-of($colour) == "map" {
+        $_shadow-colour--active: map-get($colour,muted2);
     } @else {
-        $shadow_colour:
-            darken(
-                change-color(
-                    $colour,
-                    $lightness: 100 - $slate-button-darken-amount
-                ),
-                $slate-button-darken-amount
-            );
+        $_shadow-colour--active: change-color(guarantee-colour-value($colour),$lightness: 90%);
+    }
+
+    $_key: "";
+    @if $key != 0 {
+        $_key: --#{$key};
     }
-    box-shadow: $slate-button-box-shadow--active $shadow_colour;
+    
+    @include assign-variable-property-map(
+        box-shadow,
+        (
+            // interpolate this, otherwise it gets treated as a map
+            #{$slate-button-box-shadow--active},
+            ($_shadow-colour--active, $_key)
+        ),
+        --slate-button-shadow-colour,
+        --active
+    );
 }
 
-@mixin default-button($colour, $background--hover: 0) {
-    color: $colour;
+@mixin default-button($colour, $background--hover: 0, $key: 0) {
+    $_colour: $colour;
+    @if type-of($colour) == "map" {
+        $_colour: map-get($colour,500);
+    }
+    @include assign-variable-property(color,$_colour,#{$key},--slate-button-colour--);
     &:active {
-        @include default-button--active-effect($colour, $background--hover);
+        @include default-button--active-effect($colour, $background--hover,$key);
     }
     &:hover {
-        @include default-button--hover-effect($colour, $background--hover);
+        @include default-button--hover-effect($colour, $background--hover,$key);
     }
 }
 
-@mixin button-colour-from-background($background, $colour: 0) {
-    $bg_lightness: lightness($background);
+@mixin button-colour-from-background($background, $colour: 0,$key: 0, $keyPrefix: "", $keySuffix: "") {
+    
+    $_colour: "";
+    // If colour is set explicitly, use it
     @if $colour != 0 {
-        color: $colour;
-    } @else if
-        $bg_lightness >
-        $slate-button-background--contained--lightness-correction-threshold {
-        color: change-color(
-            $background,
-            $lightness: $slate-button-color--contained--lightness-correction
-        );
+        $_colour: $colour;
     } @else {
-        color: $slate-button-colour--contrast;
+        $_bg: "";
+        @if type-of($background) == "map" {
+            $_bg: map-get($background,default);
+        } @else {
+            $_bg: guarantee-colour-value($background);
+        }
+
+        @if lightness($_bg) > $slate-button-background--contained--lightness-correction-threshold {
+            // Modify the colour to a dark variant
+            $_colour: change-color(
+                $_bg,
+                $lightness: $slate-button-color--contained--lightness-correction
+            );
+        } @else {
+            $_colour: $slate-button-colour--contrast;
+        }
+
+        @include assign-variable-property(color, $_colour, $key, #{$keyPrefix}colour--, $keySuffix);
     }
 }
 
@@ -94,50 +130,124 @@
     $background--hover: 0,
     $colour--hover: 0,
     $border-colour: 0,
-    $border-colour--hover: 0
+    $border-colour--hover: 0,
+    $key: 0
 ) {
-    $bg_lightness: lightness($background);
-    $_background--hover: ''; // Have to declare the variable here, otherwise it gets block-scoped in the @if
-    @include button-colour-from-background($background, $colour);
+    // Pre-define vars
+    $_background-colour: "";
+    $_background-colour--hover: "";
+    $_border-colour: "";
+    $_border-colour--hover: "";
+    $_shadow_colour--active: "";
+
+    // Utility vars
+    $_bg-lightness: 0;
+
+    // Background Colour
+    @if type-of($background) == "map" {
+        $_background-colour: map-get($background,500);
+    } @else {
+        $_background-colour: $background;
+    }
+
+    // Background Colour – On Hover
     @if $background--hover != 0 {
-        $_background--hover: $background--hover;
-    } @else if $bg_lightness < 20 {
-        $_background--hover: lighten($background, $slate-button-lighten-amount);
+        $_background-colour--hover: $background--hover;
     } @else {
-        $_background--hover: darken($background, $slate-button-darken-amount);
+        @if type-of($_background-colour) == "map" {
+            // Use the default value to determine a lightness
+            $_bg-lightness: lightness(map-get($_background-colour,default));
+            @if $_bg-lightness < 20 {
+                $_backround-colour--hover: map-get($background,600);
+            } @else {
+                $_background-colour--hover: map-get($background,400);
+            }
+        } @else {
+            $_bg-lightness: lightness(guarantee-colour-value($_background-colour));
+            @if $_bg-lightness < 20 {
+                $_backround-colour--hover: scale-color(guarantee-colour-value($_background-colour),$lightness: $slate-button-lighten-amount);
+            } @else {
+                $_background-colour--hover: scale-color(guarantee-colour-value($_background-colour),$lightness: -$slate-button-darken-amount);
+            }
+        }
     }
+
+    // Border Colour
     @if $border-colour != 0 {
-        border-color: $border-colour;
+        $_border-colour: $border-colour;
+    } @else if type-of($background) == "map" {
+        $_border-colour: map-get($background,400);
     } @else {
-        border-color: darken($_background--hover, $slate-button-darken-amount);
+        $_border-colour: scale-color(guarantee-colour-value($background),$lightness: -$slate-button-darken-amount);
     }
-    background: $background;
+
+    @include button-colour-from-background($_background-colour,$colour,$key,--slate-button-,--contained);
+    @include assign-variable-property(background,$_background-colour,$key,--slate-button-background--,--contained);
+    @include assign-variable-property(border-color,$_border-colour,$key,--slate-button-border-colour--,--contained);
+
     &:active {
-        $shadow_colour: 0;
-        $shadow_colour:
-            darken(
-                $_background--hover,
-                $slate-button-darken-amount
-            );
-        box-shadow: $slate-button-box-shadow--active $shadow_colour;
+        @if type-of($background) == "map" {
+            @if $_bg-lightness < 20 {
+                $_shadow-colour--active: map-get($background,300);
+            } @else {
+                $_shadow-colour--active: map-get($background,100);
+            }
+        } @else {
+            $_shadow-colour--active: scale-color(guarantee-colour-value($_background-colour--hover),$lightness: -$slate-button-darken-amount);
+        }
+
+        $_key: "";
+        @if $key != 0 {
+            $_key: --#{$key};
+        }
+        
+        @include assign-variable-property-map(
+            box-shadow,
+            (
+                // interpolate this, otherwise it gets treated as a map
+                #{$slate-button-box-shadow--active},
+                ($_shadow-colour--active, $_key)
+            ),
+            --slate-button-shadow-colour,
+            --contained--active
+        );
     }
+
     &:hover {
         @include button-colour-from-background(
-            $_background--hover,
-            $colour--hover
+            $_background-colour--hover,
+            $colour--hover,
+            $key,
+            --slate-button-,
+            --contained--hover
         );
         @if $border-colour--hover != 0 {
-            border-color: $border-colour--hover;
+            @include assign-variable-property(border-color, $border-colour--hover, $key, --slate-button-border-colour--,--contained--hover);
         }
-        background: $_background--hover;
+        @include assign-variable-property(background, $_background-colour--hover, $key, --slate-button-background--,--contained--hover);
     }
 }
 
 // Message Variant Generator
-@mixin message-variant($colour, $lightness, $alpha) {
-    border-color: $colour;
-    background: change-color($colour, $lightness: $lightness, $alpha: $alpha);
-    color: $colour;
+@mixin message-variant($colour, $lightness, $alpha, $key: 0) {
+
+    $_border-colour: "";
+    $_background-colour: "";
+    $_colour: "";
+
+    @if type-of($colour) == "map" {
+        $_border-colour: map-get($colour,500);
+        $_background-colour: map-get($colour,muted);
+        $_colour: map-get($colour,500);
+    } @else {
+        $_border-colour: $colour;
+        $_background-colour: change-color(guarantee-colour-value($colour),$lightness: $lightness, $alpha: $alpha);
+        $_colour: $colour;
+    }
+
+    @include assign-variable-property(border-color,$_border-colour, $key, --slate-message-border-colour--);
+    @include assign-variable-property(background,$_background-colour, $key, --slate-message-background-colour--);
+    @include assign-variable-property(color,$_border-colour, $key, --slate-message-colour--);
 }
 
 // Generate checkbox styles
@@ -168,7 +278,8 @@
     $border-width,
     $colour,
     $rotate-animation,
-    $background: 0, 
+    $background: 0,
+    $key: 0,
 ) {
     position: relative;
     &--spinner {
@@ -198,6 +309,18 @@
             background: $background;
         }
         animation: fadeIn $easing $timing;
+
+        $_colour: "";
+        $_muted-colour: "";
+
+        @if type-of($colour) == "map" {
+            $_colour: map-get($colour,600);
+            $_muted-colour: map-get($colour,muted);
+        } @else {
+            $_colour: scale-color($colour,$lightness: 10%);
+            $_muted-colour: change-color($colour,$lightness: 94%);
+        }
+
         &::after {
             content: '';
             position: absolute;
@@ -205,8 +328,17 @@
             right: 45%;
             width: $size;
             height: $size;
-            border: $border-width solid transparentize($colour, 0.85);
-            border-right-color: transparentize($colour, 0.3);
+            @include assign-variable-property-map(
+                border,
+                (
+                    $border-width,
+                    solid,
+                    ($_muted-colour, $key)
+                ),
+                --slate-spinner-border-colour--
+            );
+            // border-right-color: transparentize(guarantee-colour-value($colour), 0.3);
+            @include assign-variable-property(border-right-color,$_colour,$key,--slate-spinner-border-right-colour--,);
             border-radius: 100%;
             transform: translateY(-50%);
             animation: $rotate-animation;

package/scss/core/_base.scss

@@ -1,5 +1,6 @@
 @import '../variables/base';
 @import '../mixins';
+@import '../helpers';
 
 * {
     box-sizing: $slate-base-default-box-sizing;
@@ -166,16 +167,16 @@ p {
 // Anchor link defaults
 a,
 %a {
-    color: $slate-base-anchor-colour;
+    @include assign-variable-property(color,$slate-base-anchor-colour,--slate-base-anchor-colour);
     font-weight: $slate-base-anchor-font-weight;
     text-decoration: $slate-base-anchor-text-decoration;
     transition: $slate-base-anchor-transition;
     &:visited {
-        color: $slate-base-anchor-colour--visited;
+        @include assign-variable-property(color,$slate-base-anchor-colour--visited,--slate-base-anchor-colour--visited);
         text-decoration: $slate-base-anchor-text-decoration--visited;
     }
     &:hover {
-        color: $slate-base-anchor-colour--hover;
+        @include assign-variable-property(color,$slate-base-anchor-colour--hover,--slate-base-anchor-colour--hover);
         text-decoration: $slate-base-anchor-text-decoration--hover;
         cursor: $slate-base-anchor-cursor--hover;
     }

package/scss/core/_button.scss

@@ -1,14 +1,22 @@
 @import '../variables/button';
 @import '../mixins';
+@import '../helpers';
 
 #{$slate-button-selector} {
     display: $slate-button-display;
     padding: $slate-button-padding;
-    border: $slate-button-border-width $slate-button-border-style
-        $slate-button-border-colour;
-    border-radius: $slate-button-border-radius;
-    background: $slate-button-background;
-    color: $slate-button-colour;
+    @include assign-variable-property-map(
+        border,
+        (
+            ($slate-button-border-width, button-border-width),
+            ($slate-button-border-style, button-border-style),
+            ($slate-button-border-colour, button-border-colour)
+        ),
+        --slate-
+    );
+    @include assign-variable-property(border-radius, $slate-button-border-radius,button-border-radius,--slate-);
+    @include assign-variable-property(background,$slate-button-background,button-background,--slate-);
+    @include assign-variable-property(color,$slate-button-colour,button-colour,--slate-);
     font-weight: $slate-button-font-weight;
     font-size: $slate-button-font-size;
     font-family: $slate-button-font-family;
@@ -62,27 +70,31 @@
     &.primary {
         @include default-button(
             $slate-button-primary-colour,
-            $slate-button-background-primary-override--hover
+            $slate-button-background-primary-override--hover,
+            primary
         );
     }
     &.secondary {
         @include default-button(
             $slate-button-secondary-colour,
-            $slate-button-background-secondary-override--hover
+            $slate-button-background-secondary-override--hover,
+            secondary
         );
     }
     &.good,
     &.success {
         @include default-button(
             $slate-button-good-colour,
-            $slate-button-background-good-override--hover
+            $slate-button-background-good-override--hover,
+            good
         );
     }
     &.bad,
     &.error {
         @include default-button(
             $slate-button-bad-colour,
-            $slate-button-background-bad-override--hover
+            $slate-button-background-bad-override--hover,
+            bad
         );
     }
 
@@ -90,7 +102,8 @@
     &:disabled {
         @include default-button(
             $slate-button-colour--disabled,
-            $slate-button-background
+            $slate-button-background,
+            disabled
         );
         cursor: not-allowed;
     }
@@ -102,7 +115,7 @@
             $slate-button-background-override--contained--hover,
             $slate-button-colour-override--contained--hover,
             $slate-button-border-colour-override--contained,
-            $slate-button-border-colour-override--contained--hover
+            $slate-button-border-colour-override--contained--hover,
         );
         &.primary {
             @include contained-button(
@@ -111,7 +124,8 @@
                 $slate-button-background-primary-override--contained--hover,
                 $slate-button-colour-primary-override--contained--hover,
                 $slate-button-border-colour-primary-override--contained,
-                $slate-button-border-colour-primary-override--contained--hover
+                $slate-button-border-colour-primary-override--contained--hover,
+                primary
             );
         }
         &.secondary {
@@ -121,7 +135,8 @@
                 $slate-button-background-secondary-override--contained--hover,
                 $slate-button-colour-secondary-override--contained--hover,
                 $slate-button-border-colour-secondary-override--contained,
-                $slate-button-border-colour-secondary-override--contained--hover
+                $slate-button-border-colour-secondary-override--contained--hover,
+                secondary
             );
         }
         &.good,
@@ -132,7 +147,8 @@
                 $slate-button-background-good-override--contained--hover,
                 $slate-button-colour-good-override--contained--hover,
                 $slate-button-border-colour-good-override--contained,
-                $slate-button-border-colour-good-override--contained--hover
+                $slate-button-border-colour-good-override--contained--hover,
+                good
             );
         }
         &.bad,
@@ -143,7 +159,8 @@
                 $slate-button-background-bad-override--contained--hover,
                 $slate-button-colour-bad-override--contained--hover,
                 $slate-button-border-colour-bad-override--contained,
-                $slate-button-border-colour-bad-override--contained--hover
+                $slate-button-border-colour-bad-override--contained--hover,
+                bad
             );
         }
         &:disabled {
@@ -151,7 +168,8 @@
                 $slate-button-background--contained--disabled,
                 $slate-button-colour--disabled,
                 $slate-button-background--contained--disabled,
-                $slate-button-colour--disabled
+                $slate-button-colour--disabled,
+                disabled
             );
         }
     }

package/scss/core/_layout.scss

@@ -1,61 +1,10 @@
 @import '../variables/layout';
 @import '../mixins';
+@import 'parts/section-safe';
 
-section,
-.section {
-    padding: $slate-layout-section-vertical-padding
-        $slate-layout-section-horizontal-padding;
-    &:nth-of-type(even) {
-        background: $slate-layout-section-alternate-bg;
-    }
-    &.remove-bottom-padding {
-        padding-bottom: 0;
-    }
-    &.remove-top-padding {
-        padding-top: 0;
-    }
-    &.remove-left-padding {
-        padding-left: 0;
-    }
-    &.remove-right-padding {
-        padding-right: 0;
-    }
-    @include respond(medium) {
-        padding: $slate-layout-section-vertical-padding--med
-            $slate-layout-section-horizontal-padding--med;
-    }
+section {
+    @extend %section;
 }
 
-.container {
-    width: 100%;
-    max-width: $slate-layout-container-max-width;
-    &.center {
-        margin: $slate-layout-container-center-margin;
-    }
-    &.horizontal-padding {
-        padding-right: $slate-layout-container-horizontal-padding;
-        padding-left: $slate-layout-container-horizontal-padding;
-    }
-    &.vertical-padding {
-        padding-top: $slate-layout-container-vertical-padding;
-        padding-bottom: $slate-layout-container-vertical-padding;
-    }
-    &.wide {
-        max-width: $slate-layout-container-wide-max-width;
-    }
-}
-
-.gutter {
-    &-top {
-        margin-top: $slate-layout-gutter;
-        &--large {
-            margin-top: $slate-layout-gutter--large;
-        }
-    }
-    &-bottom {
-        margin-bottom: $slate-layout-gutter;
-        &--large {
-            margin-bottom: $slate-layout-gutter--large;
-        }
-    }
-}
+@import 'parts/container-safe';
+@import 'parts/gutter-safe';

package/scss/core/_lists.scss

@@ -51,16 +51,4 @@ dl {
     margin-top: $slate-lists-dl-trailing-margin;
 }
 
-%lists-typography {
-    ul,
-    ol {
-        max-width: $slate-lists-max-width--typography;
-        margin-right: $slate-lists-margin-right--typography;
-        margin-left: $slate-lists-margin-left--typography;
-    }
-}
-
-%lists-reset {
-    padding: 0;
-    list-style: none;
-}
+@import 'parts/lists-safe';

package/scss/core/_typography.scss

@@ -1,21 +1,9 @@
 @import '../variables/typography';
+@import 'parts/typography-safe';
 
 .typography {
     @extend %silverstripe-typography !optional;
     @extend %lists-typography !optional;
-    display: block;
-    width: 100%;
-    max-width: $slate-typography-max-width;
-    margin: $slate-typography-margin;
-    padding: $slate-typography-padding-vertical
-        $slate-typography-padding-horizontal;
-    &.wide {
-        max-width: $slate-typography-wide-max-width;
-    }
 }
 
-* + .typography {
-    margin-top: $slate-typography-trailing-margin;
-}
-
-$slate-debug-typography-included: 1;
+$slate-debug-typography-included: 1;

package/scss/core/global-helpers/_button.scss

@@ -0,0 +1,11 @@
+@import '../../helpers';
+
+// with new SASS, this could be done automatically by inspecting module variables (meta.module-variables)
+
+@include define-global-property-alias-from-map((
+    ($slate-button-border-width, button-border-width),
+    ($slate-button-border-style, button-border-style),
+    ($slate-button-border-colour, button-border-colour),
+    ($slate-button-border-radius, button-border-radius),
+    ($slate-button-colour, button-colour)
+),--slate-);

package/scss/core/parts/_container-safe.scss

@@ -0,0 +1,20 @@
+@import '../../variables/layout';
+
+.container {
+    width: 100%;
+    max-width: $slate-layout-container-max-width;
+    &.center {
+        margin: $slate-layout-container-center-margin;
+    }
+    &.horizontal-padding {
+        padding-right: $slate-layout-container-horizontal-padding;
+        padding-left: $slate-layout-container-horizontal-padding;
+    }
+    &.vertical-padding {
+        padding-top: $slate-layout-container-vertical-padding;
+        padding-bottom: $slate-layout-container-vertical-padding;
+    }
+    &.wide {
+        max-width: $slate-layout-container-wide-max-width;
+    }
+}