@doodl/slate 1.22.0 → 1.22.1

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 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.1](https://bitbucket.org/doodlltd/slate/compare/v1.22.0...v1.22.1) (2021-12-22)
+
 ## [1.22.0](https://bitbucket.org/doodlltd/slate/compare/v1.21.5...v1.22.0) (2021-12-16)
 
 

package/package.json

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

package/scss/_helpers.scss

@@ -152,14 +152,21 @@
 @mixin assign-variable-property($property, $value, $key, $keyPrefix: "",$keySuffix: "") {
 
     $_value: #{extract-value($value)};
-    $_fallback: #{extract-property($value)};
 
+    // Fallback for browsers that don't support custom CSS properties
     #{$property}: $_value;
-    @if variable-exists(slate-include-custom-properties) and $key != 0 {
-        #{$property}: var(#{$keyPrefix}#{$key}#{$keySuffix}, $_value);
-        // Alias CSS custom property in :root so that values cascade
-        @if variable-exists(slate-autogenerate-global-property-aliases) {
-          @include define-global-property-alias(#{$keyPrefix}#{$key}#{$keySuffix},$value);
+    @if variable-exists(slate-include-custom-properties) {
+        @if $key != 0 {
+          // Set value equal to generated custom property name, falling back to $_value if not defined
+          #{$property}: var(#{$keyPrefix}#{$key}#{$keySuffix}, $_value);
+          // Alias CSS custom property in :root so that values cascade by default
+          @if variable-exists(slate-autogenerate-global-property-aliases) {
+            @include define-global-property-alias(#{$keyPrefix}#{$key}#{$keySuffix},$value);
+          }
+        } @else if is-property($value) {
+          // Assign the CSS custom property so that the value is inherited
+          $_customProperty: #{extract-property($value)};
+          #{$property}: var(#{$_customProperty}, $_value);
         }
     }
 }