@doodl/slate 1.22.13 → 1.22.15

package/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [1.22.15](https://bitbucket.org/doodlltd/slate/compare/v1.22.14...v1.22.15) (2023-06-26)
+
+
+### Bug Fixes
+
+* Resolve 'respond' mixin causing 'invalid CSS' error – workaround known bug in libsass ([5f1f04b](https://bitbucket.org/doodlltd/slate/commit/5f1f04b53d2c0f0fbbff3d0016c4db8a68dd63db))
+* Resolve non-percentage arguments for SCSS scale-color fn throwing errors in dart sass ([4fcd689](https://bitbucket.org/doodlltd/slate/commit/4fcd689df6cf79ada215b9d851f76a3fa993a42d))
+
+### [1.22.14](https://bitbucket.org/doodlltd/slate/compare/v1.22.13...v1.22.14) (2023-06-14)
+
+
+### Bug Fixes
+
+* Ensure that contained-button mixin generates a :visited state ([4057d0d](https://bitbucket.org/doodlltd/slate/commit/4057d0d48304c6e1d964d346c459611c8bbf0e3b))
+
 ### [1.22.13](https://bitbucket.org/doodlltd/slate/compare/v1.22.12...v1.22.13) (2023-06-01)
 
 ### [1.22.12](https://bitbucket.org/doodlltd/slate/compare/v1.22.11...v1.22.12) (2023-06-01)

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@doodl/slate",
-    "version": "1.22.13",
+    "version": "1.22.15",
     "description": "",
     "main": "./js/dist/index.js",
     "module": "./js/dist/index.js",

package/scss/_mixins.scss

@@ -3,8 +3,15 @@
 @import 'helpers';
 
 // Generate preset media query from breakpoint key
-@mixin respond($breakpoint) {
-    @media #{map-get($slate-media-queries,$breakpoint)} {
+@function media-query-from-breakpoint($breakpoint, $media: 'screen') {
+    $width: map-get($slate-breakpoints, $breakpoint);
+    @return '#{$media} and (min-width: #{$width})';
+}
+
+// Output content inside a media query for the defined breakpoint,
+// e.g. @media screen and (min-width: 960px) {} when breakpoint 'medium' is passed
+@mixin respond($breakpoint, $media: 'screen') {
+    @media #{media-query-from-breakpoint($breakpoint, $media)} {
         @content;
     }
 }
@@ -185,6 +192,10 @@
     @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);
 
+    &:visited {
+        @include button-colour-from-background($_background-colour,$colour,$key,--slate-button-,--contained--visited);
+    }
+
     &:active {
         @if type-of($background) == "map" {
             @if $_bg-lightness < 20 {

package/scss/core/_utils.scss

@@ -19,6 +19,10 @@
     }
 }
 
+.text-center {
+    text-align: center;
+}
+
 * + .text-columns {
     margin-top: $slate-default-spacing;
-}
+}

package/scss/variables/_breakpoints.scss

@@ -12,6 +12,7 @@ $slate-breakpoints: (
     x-large: $slate-breakpoints-x-large
 ) !default;
 
+// !Deprecated – @function media-query-from-breakpoint (def. in _mixins.scss) now handles this concatenation
 $slate-media-queries: (
     small: screen and (min-width: $slate-breakpoints-small),
     medium: screen and (min-width: $slate-breakpoints-medium),

package/scss/variables/_button.scss

@@ -82,15 +82,15 @@ $slate-button-border-colour-bad-override--contained: 0 !default;
 $slate-button-border-colour-bad-override--contained--hover: 0 !default;
 ////
 
-$slate-button-lighten-amount: 90 !default;
-$slate-button-darken-amount: 15 !default;
+$slate-button-lighten-amount: 90% !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: scale-color($slate-button-colour,15%) !default;
-$slate-button-background--contained--disabled: scale-color($slate-button-background--contained,$lightness: -15%) !default;
+$slate-button-colour--disabled: scale-color($slate-button-colour, $lightness: 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;