@doodl/slate 1.22.3 → 1.22.6

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 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.6](https://bitbucket.org/doodlltd/slate/compare/v1.22.5...v1.22.6) (2022-06-08)
+
+
+### Bug Fixes
+
+* Fix critical typo in button background colour generator mixin ([b436504](https://bitbucket.org/doodlltd/slate/commit/b436504b82094d7ff8cc5870f9d70379de868a76))
+
+### [1.22.5](https://bitbucket.org/doodlltd/slate/compare/v1.22.4...v1.22.5) (2022-05-26)
+
+
+### Bug Fixes
+
+* Resolve colour behaviour of default contained buttons ([9fe80a6](https://bitbucket.org/doodlltd/slate/commit/9fe80a6411fb0af3b4e5cc6fa5a52a7a14531fc2))
+
+### [1.22.4](https://bitbucket.org/doodlltd/slate/compare/v1.22.3...v1.22.4) (2022-04-07)
+
 ### [1.22.3](https://bitbucket.org/doodlltd/slate/compare/v1.22.2...v1.22.3) (2022-02-13)
 
 

package/js/dist/react-components/section/index.js

@@ -1,13 +1,13 @@
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-import React from 'react';
+import React, { forwardRef } from 'react';
 import classNames from 'classnames';
 import styles from '../../../../scss/css-modules/section.module.scss';
-
-var Section = function Section(props) {
+var Section = /*#__PURE__*/forwardRef(function (props, ref) {
   var _classNames;
 
-  var children = props.children,
+  var id = props.id,
+      children = props.children,
       _props$component = props.component,
       Component = _props$component === void 0 ? 'section' : _props$component,
       className = props.className,
@@ -21,8 +21,9 @@ var Section = function Section(props) {
       removeRightPadding = _props$removeRightPad === void 0 ? false : _props$removeRightPad;
   var classes = classNames(styles.section, (_classNames = {}, _defineProperty(_classNames, styles['remove-bottom-padding'], removeBottomPadding), _defineProperty(_classNames, styles['remove-top-padding'], removeTopPadding), _defineProperty(_classNames, styles['remove-left-padding'], removeLeftPadding), _defineProperty(_classNames, styles['remove-right-padding'], removeRightPadding), _classNames), className);
   return /*#__PURE__*/React.createElement(Component, {
-    className: classes
+    id: id,
+    className: classes,
+    ref: ref
   }, children);
-};
-
+});
 export default Section;

package/package.json

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

package/scss/_mixins.scss

@@ -119,9 +119,9 @@
         } @else {
             $_colour: $slate-button-colour--contrast;
         }
-
-        @include assign-variable-property(color, $_colour, $key, #{$keyPrefix}colour--, $keySuffix);
     }
+
+    @include assign-variable-property(color, $_colour, $key, #{$keyPrefix}colour--, $keySuffix);
 }
 
 @mixin contained-button(
@@ -158,14 +158,14 @@
             // 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);
+                $_background-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);
+                $_background-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);
             }

package/scss/core/_button.scss

@@ -109,11 +109,17 @@
     }
 
     &.contained {
+        // Edge case for default contained button, where we will usually want
+        // to retain the default button colour on hover
+        $_default-button-colour-override--contained--hover: $slate-button-colour;
+        @if $slate-button-colour-override--contained--hover != 0 {
+            $_default-button-colour-override--contained--hover: $slate-button-colour-override--contained--hover;
+        }
         @include contained-button(
             $slate-button-background--contained,
             $slate-button-colour,
             $slate-button-background-override--contained--hover,
-            $slate-button-colour-override--contained--hover,
+            $_default-button-colour-override--contained--hover,
             $slate-button-border-colour-override--contained,
             $slate-button-border-colour-override--contained--hover,
         );

package/scss/variables/_button.scss

@@ -82,7 +82,7 @@ $slate-button-border-colour-bad-override--contained: 0 !default;
 $slate-button-border-colour-bad-override--contained--hover: 0 !default;
 ////
 
-$slate-button-lighten-amount: 20 !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;