@doodl/slate 1.21.2 → 1.22.0

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;
+    }
+}

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

@@ -0,0 +1,147 @@
+@import '../../variables/grid';
+@import '../../variables/breakpoints';
+@import '../../mixins';
+
+#{$slate-grid-selector} {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+
+    @each $den in $slate-grid-division-denominators {
+        @for $num from 1 through $den {
+            &#{$slate-grid-selector}-width-#{$num}-#{$den} {
+                > * {
+                    width: percentage($num / $den);
+                }
+            }
+        }
+    }
+
+    @each $label, $query in $slate-media-queries {
+        @include respond($label) {
+            @each $den in $slate-grid-division-denominators {
+                @for $num from 1 through $den {
+                    &#{$slate-grid-selector}-width-#{$label}-#{$num}-#{$den} {
+                        > * {
+                            width: percentage($num / $den);
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    @each $den in $slate-grid-division-denominators {
+        @for $num from 1 through $den {
+            > #{$slate-grid-selector}--item-width-#{$num}-#{$den},
+            > .width-#{$num}-#{$den} {
+                width: percentage($num / $den);
+            }
+        }
+    }
+
+    @each $label, $query in $slate-media-queries {
+        @include respond($label) {
+            @each $den in $slate-grid-division-denominators {
+                @for $num from 1 through $den {
+                    > #{$slate-grid-selector}--item-width-#{$label}-#{$num}-#{$den},
+                    > .width-#{$label}-#{$num}-#{$den} {
+                        width: percentage($num / $den);
+                    }
+                }
+            }
+        }
+    }
+
+    &.center {
+        justify-content: center;
+    }
+
+    &.vertical-center {
+        align-items: center;
+    }
+    > * {
+        flex: none;
+        width: 100%;
+    }
+}
+
+* + #{$slate-grid-selector} {
+    margin-top: $slate-grid-trailing-margin;
+}
+
+#{$slate-padded-grid-selector} {
+    display: block;
+    width: 100%;
+    > #{$slate-grid-selector} {
+        width: calc(100% + #{$slate-grid-padded-grid-padding-horizontal});
+        margin-top: -$slate-grid-padded-grid-padding-vertical;
+        margin-left: -$slate-grid-padded-grid-padding-horizontal;
+        @each $den in $slate-grid-division-denominators {
+            @for $num from 1 through $den {
+                &#{$slate-grid-selector}-width-#{$num}-#{$den} {
+                    > * {
+                        width: calc(
+                            #{percentage($num / $den)} -
+                            #{$slate-grid-padded-grid-padding-horizontal}
+                        );
+                    }
+                }
+            }
+        }
+
+        @each $label, $query in $slate-media-queries {
+            @include respond($label) {
+                @each $den in $slate-grid-division-denominators {
+                    @for $num from 1 through $den {
+                        &#{$slate-grid-selector}-width-#{$label}-#{$num}-#{$den} {
+                            > * {
+                                width: calc(
+                                    #{percentage($num / $den)} -
+                                    #{$slate-grid-padded-grid-padding-horizontal}
+                                );
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        @each $den in $slate-grid-division-denominators {
+            @for $num from 1 through $den {
+                > #{$slate-grid-selector}--item-width-#{$num}-#{$den},
+                > .width-#{$num}-#{$den} {
+                    width: calc(
+                        #{percentage($num / $den)} -
+                        #{$slate-grid-padded-grid-padding-horizontal}
+                    );
+                }
+            }
+        }
+
+        @each $label, $query in $slate-media-queries {
+            @include respond($label) {
+                @each $den in $slate-grid-division-denominators {
+                    @for $num from 1 through $den {
+                        > #{$slate-grid-selector}--item-width-#{$label}-#{$num}-#{$den},
+                        > .width-#{$label}-#{$num}-#{$den} {
+                            width: calc(
+                                #{percentage($num / $den)} -
+                                #{$slate-grid-padded-grid-padding-horizontal}
+                            );
+                        }
+                    }
+                }
+            }
+        }
+        > * {
+            width: calc(100% - #{$slate-grid-padded-grid-padding-horizontal});
+            margin-top: $slate-grid-padded-grid-padding-vertical;
+            margin-left: $slate-grid-padded-grid-padding-horizontal;
+        }
+    }
+}
+
+* + #{$slate-padded-grid-selector} {
+    margin-top: $slate-grid-trailing-margin;
+}

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

@@ -0,0 +1,16 @@
+@import '../../variables/layout';
+
+.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;
+        }
+    }
+}

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

@@ -0,0 +1,15 @@
+@import '../../variables/lists';
+
+%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;
+}

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

@@ -0,0 +1,27 @@
+@import '../../variables/layout';
+@import '../../mixins';
+
+.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;
+    }
+}

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

@@ -0,0 +1,34 @@
+@import '../../variables/typography';
+
+.typography {
+    display: block;
+    width: 100%;
+    max-width: $slate-typography-max-width;
+    margin: $slate-typography-margin;
+    padding: $slate-typography-padding-vertical
+        $slate-typography-padding-horizontal;
+    &.align-left {
+        margin: 0 auto 0 0;
+    }
+    &.align-right {
+        margin: 0 0 0 auto;
+    }
+    &.remove-vertical-padding {
+        padding-top: 0;
+        padding-bottom: 0;
+    }
+    &.remove-horizontal-padding {
+        padding-left: 0;
+        padding-right: 0;
+    }
+    &.wide {
+        max-width: $slate-typography-wide-max-width;
+    }
+    &.full-width {
+        max-width: none;
+    }
+}
+
+* + .typography {
+    margin-top: $slate-typography-trailing-margin;
+}

package/scss/css-modules/container.module.scss

@@ -0,0 +1,2 @@
+@import 'projectCSSConfig';
+@import '../core/parts/container-safe';

package/scss/css-modules/grid.module.scss

@@ -0,0 +1,13 @@
+@import 'projectCSSConfig';
+@import '../core/grid';
+
+@function parse-dotless($class) {
+    $this: quote($class);
+    @return if(str-slice($this, 0, 1) == ".", str-slice($this, 2, str-length($this)), $this);
+}  
+
+// Get a bit clever here so we can access the selector dynamically
+:export {
+    slateGridClassName: unquote(parse-dotless(#{$slate-grid-selector}));
+    slatePaddedGridClassName: unquote(parse-dotless(#{$slate-padded-grid-selector}));
+}

package/scss/css-modules/section.module.scss

@@ -0,0 +1,2 @@
+@import 'projectCSSConfig';
+@import '../core/parts/section-safe';

package/scss/css-modules/typography.module.scss

@@ -0,0 +1,11 @@
+@import 'projectCSSConfig';
+@import '../core/parts/typography-safe';
+@import '../core/parts/lists-safe';
+@import '../silverstripe/editor';
+
+.typography {
+    :global {
+        @extend %silverstripe-typography !optional;
+        @extend %lists-typography !optional;
+    }
+}

package/scss/css-modules/utils.module.scss

@@ -0,0 +1,3 @@
+.text-center {
+    text-align: center;
+}

package/scss/globalcustoms.scss

@@ -0,0 +1 @@
+@import './core/global-helpers/button';

package/scss/silverstripe/_messages.scss

@@ -1,24 +1,27 @@
 @import '../variables/silverstripe-messages';
 @import '../mixins';
+@import '../helpers';
 
 .message {
-    @include message-variant(
-        $slate-silverstripe-messages-info-colour,
-        $slate-silverstripe-messages-background-lightness,
-        $slate-silverstripe-messages-background-opacity
-    );
     display: block;
     padding: $slate-silverstripe-messages-padding;
-    border: $slate-silverstripe-messages-border-thickness
-        $slate-silverstripe-messages-info-colour solid;
+    border-width: $slate-silverstripe-messages-border-thickness;
+    border-style: solid;
     border-radius: $slate-silverstripe-messages-border-radius;
     font-size: $slate-silverstripe-messages-font-size;
+    @include message-variant(
+        $slate-silverstripe-messages-info-colour,
+        $slate-silverstripe-messages-background-lightness,
+        $slate-silverstripe-messages-background-opacity,
+        info
+    );
     &.good,
     &.success {
         @include message-variant(
             $slate-silverstripe-messages-good-colour,
             $slate-silverstripe-messages-background-lightness,
-            $slate-silverstripe-messages-background-opacity
+            $slate-silverstripe-messages-background-opacity,
+            good
         );
     }
     &.bad,
@@ -27,14 +30,16 @@
         @include message-variant(
             $slate-silverstripe-messages-bad-colour,
             $slate-silverstripe-messages-background-lightness,
-            $slate-silverstripe-messages-background-opacity
+            $slate-silverstripe-messages-background-opacity,
+            bad
         );
     }
     &.warning {
         @include message-variant(
             $slate-silverstripe-messages-warning-colour,
             $slate-silverstripe-messages-background-lightness,
-            $slate-silverstripe-messages-background-opacity
+            $slate-silverstripe-messages-background-opacity,
+            warning
         );
     }
 }

package/scss/variables/_base.scss

@@ -1,6 +1,7 @@
 @import 'colours';
 @import 'animations';
 @import 'spacing';
+@import '../helpers';
 
 $slate-base-default-box-sizing: border-box !default;
 
@@ -29,13 +30,13 @@ $slate-base-p-margin: 0 !default;
 $slate-base-p-text-transform: none !default;
 $slate-base-p-trailing-margin: 1rem !default;
 
-$slate-base-anchor-colour: $slate-highlight-colour !default;
+$slate-base-anchor-colour: map-get($slate-highlight-colour-map,500) !default;
 $slate-base-anchor-font-weight: inherit !default;
 $slate-base-anchor-text-decoration: none !default;
 $slate-base-anchor-transition: color $slate-animation-timing $slate-animation-easing !default;
 $slate-base-anchor-colour--visited: $slate-base-anchor-colour !default;
 $slate-base-anchor-text-decoration--visited: $slate-base-anchor-text-decoration !default;
-$slate-base-anchor-colour--hover: darken($slate-base-anchor-colour,15%) !default;
+$slate-base-anchor-colour--hover: map-get($slate-highlight-colour-map,300) !default;
 $slate-base-anchor-cursor--hover: pointer !default;
 $slate-base-anchor-text-decoration--hover: $slate-base-anchor-text-decoration !default;
 

package/scss/variables/_button.scss

@@ -2,6 +2,7 @@
 @import 'colours';
 @import 'defaults';
 @import 'animations';
+@import '../helpers';
 
 $slate-button-selector: '.button, a.button, input[type="button"], input[type="submit"], button' !default;
 
@@ -41,8 +42,8 @@ $slate-button-font-size--large: 1.2rem !default;
 $slate-button-padding--small: $slate-button-padding !default;
 $slate-button-padding--large: 0.4rem 0.6rem !default;
 
-$slate-button-primary-colour: $slate-primary-colour !default;
-$slate-button-secondary-colour: $slate-secondary-colour !default;
+$slate-button-primary-colour: $slate-primary-colour-map !default;
+$slate-button-secondary-colour: $slate-secondary-colour-map !default;
 $slate-button-good-colour: $slate-good-colour !default;
 $slate-button-bad-colour: $slate-bad-colour !default;
 
@@ -82,11 +83,18 @@ $slate-button-border-colour-bad-override--contained--hover: 0 !default;
 ////
 
 $slate-button-lighten-amount: 20 !default;
-$slate-button-darken-amount: 4 !default;
-$slate-button-box-shadow--active: inset inset 0.05em 0.05em 0.5em !default; // Don't include the colour here
-$slate-button-background--contained: change-color($slate-button-colour, $lightness: (100 - $slate-button-darken-amount)) !default;
+$slate-button-darken-amount: 15 !default;
+$slate-button-box-shadow--active: inset 0.05em 0.05em 0.5em !default; // Don't include the colour here
+$slate-button-background--contained: scale-color($slate-button-colour, $lightness: $slate-button-lighten-amount) !default;
 $slate-button-background--contained--lightness-correction-threshold: 80% !default;
 $slate-button-color--contained--lightness-correction: 25 !default;
 
-$slate-button-colour--disabled: lighten($slate-button-colour,15%) !default;
-$slate-button-background--contained--disabled: darken($slate-button-background--contained,15%) !default;
+$slate-button-colour--disabled: scale-color($slate-button-colour,15%) !default;
+$slate-button-background--contained--disabled: scale-color($slate-button-background--contained,$lightness: -15%) !default;
+
+$slate-button-loader-fade-in-easing: $slate-animation-easing !default;
+$slate-button-loader-fade-in-timing: $slate-animation-timing !default;
+$slate-button-loader-size: 1rem !default;
+$slate-button-loader-width: 3px !default;
+$slate-button-loader-colour: $slate-secondary-colour-map !default;
+$slate-button-loader-rotate-animation: rotate 1s linear infinite !default;

package/scss/variables/_colours.scss

@@ -1,3 +1,5 @@
+@import "../helpers";
+
 $slate-primary-colour: #3ea2ff !default;
 $slate-secondary-colour: #ff653e !default;
 $slate-highlight-colour: $slate-primary-colour !default;
@@ -11,4 +13,22 @@ $slate-neutral: #eee !default;
 $slate-muted: #bbb !default;
 $slate-dark-neutral: lighten($slate-black,50) !default;
 
-$slate-contrast-colour: $slate-white;
+$slate-contrast-colour: $slate-white;
+
+$slate-primary-colour-map: build-colour-map(slate-primary-colour,$slate-primary-colour) !default;
+$slate-secondary-colour-map: build-colour-map(slate-secondary-colour,$slate-secondary-colour) !default;
+// Provide some sensible defaults for highlight colour if it matches
+// Primary or secondary colour
+$_slate-highlight-colour-map-candidate: "";
+@if $slate-highlight-colour == $slate-primary-colour {
+    $_slate-highlight-colour-map-candidate: $slate-primary-colour-map;
+} @else if $slate-highlight-colour == $slate-secondary-colour {
+    $_slate-highlight-colour-map-candidate: $slate-secondary-colour-map;
+} @else {
+    $_slate-highlight-colour-map-candidate: build-colour-map(slate-highlight-colour,$slate-highlight-colour) !default;
+}
+$slate-highlight-colour-map: $_slate-highlight-colour-map-candidate !default;
+$slate-info-colour-map: build-colour-map(slate-info-colour,$slate-info-colour) !default;
+$slate-good-colour-map: build-colour-map(slate-good-colour,$slate-good-colour) !default;
+$slate-bad-colour-map: build-colour-map(slate-bad-colour,$slate-bad-colour) !default;
+$slate-warning-colour-map: build-colour-map(slate-warning-colour,$slate-warning-colour) !default;

package/scss/variables/_forms.scss

@@ -54,6 +54,13 @@ $slate-forms-label-check-background: $slate-highlight-colour !default;
 $slate-forms-label-check-vertical-align: -0.15em !default;
 $slate-forms-label-check-margin: 0 $slate-default-spacing 0 0 !default;
 
+$slate-forms-loader-fade-in-easing: $slate-animation-easing !default;
+$slate-forms-loader-fade-in-timing: $slate-animation-timing !default;
+$slate-forms-loader-size: 2rem !default;
+$slate-forms-loader-width: 3px !default;
+$slate-forms-loader-colour: $slate-secondary-colour-map !default;
+$slate-forms-loader-rotate-animation: rotate 1s linear infinite !default;
+
 // exports for listbox field
 :export {
     slateFormsInputBorder: $slate-forms-input-border-width $slate-forms-input-border-style $slate-forms-input-border-colour;

package/scss/variables/_menu-bar.scss

@@ -3,6 +3,7 @@
 @import '../variables/spacing';
 @import '../variables/layout';
 @import '../variables/animations';
+@import '../helpers';
 
 $slate-menu-bar-background: transparent !default;
 $slate-menu-bar-z-index: 10 !default;
@@ -29,7 +30,7 @@ $slate-menu-bar-items-item-padding--horizontal: 0 !default;
 $slate-menu-bar-items-colour--visited: $slate-menu-bar-items-colour !default;
 $slate-menu-bar-items-text-decoration--visited: $slate-menu-bar-items-text-decoration !default;
 
-$slate-menu-bar-items-colour--hover: darken($slate-menu-bar-items-colour,15%) !default;
+$slate-menu-bar-items-colour--hover: darken(guarantee-colour-value($slate-menu-bar-items-colour),15%) !default;
 $slate-menu-bar-items-text-decoration--hover: $slate-menu-bar-items-text-decoration !default;
 
 $slate-menu-bar-children-background: $slate-neutral !default;

package/scss/variables/_silverstripe-messages.scss

@@ -1,8 +1,8 @@
 
-$slate-silverstripe-messages-info-colour: $slate-info-colour !default;
-$slate-silverstripe-messages-good-colour: $slate-good-colour !default;
-$slate-silverstripe-messages-bad-colour: $slate-bad-colour !default;
-$slate-silverstripe-messages-warning-colour: $slate-warning-colour !default;
+$slate-silverstripe-messages-info-colour: $slate-info-colour-map !default;
+$slate-silverstripe-messages-good-colour: $slate-good-colour-map !default;
+$slate-silverstripe-messages-bad-colour: $slate-bad-colour-map !default;
+$slate-silverstripe-messages-warning-colour: $slate-warning-colour-map !default;
 
 $slate-silverstripe-messages-font-size: 0.8rem !default;
 $slate-silverstripe-messages-padding: 0.5rem !default;