@doodl/slate 1.22.14 → 1.22.16

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.16](https://bitbucket.org/doodlltd/slate/compare/v1.22.15...v1.22.16) (2023-07-03)
+
+
+### Bug Fixes
+
+* Strip units from $slate-hamburger-height definition sanity check ([d22ed18](https://bitbucket.org/doodlltd/slate/commit/d22ed18668bba72fbd66ccdd441a89c419a1389a))
+
+### [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)
 
 

package/package.json

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

package/scss/_helpers.scss

@@ -140,6 +140,10 @@
     @return var(#{map-get(map-get($map,$tint),property)},#{map-get(map-get($map,$tint),default)});
 }
 
+@function strip-units($number) {
+  @return $number / ($number * 0 + 1);
+}
+
 @mixin define-global-property-alias($key, $property) {
   @if is-property($property) or is-property-map($property) {
     $_property: extract-property($property);

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

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;

package/scss/variables/_hamburger.scss

@@ -1,12 +1,13 @@
 @import 'colours';
+@import '../helpers';
 
 $slate-hamburger-bar-colour: $slate-highlight-colour !default;
 
 $slate-hamburger-width: 30px !default;
 $slate-hamburger-height: 22px !default; // Should always be evenly divisible by 2
 
-@if $slate-hamburger-height % 2 != 0 {
-    @error "$slate-hamburger-height should always be evenly divisibly by 2 i.e. $slate-hambuger-height % 2 == 0";
+@if strip-units($slate-hamburger-height) % 2 != 0 {
+    @error "$slate-hamburger-height should always be evenly divisibly by 2 i.e. $slate-hamburger-height % 2 == 0 (#{$slate-hamburger-height} provided).";
 }
 
 $slate-hamburger-bar-height: 4px !default;