Merge pull request #758 from lumapps/chore/color-css-variables

chore(color): always use colors css variables

Author: matmkian

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Changed
+
+-   Always use colors css variables.
+
 ## [2.1.9][] - 2021-12-15
 
 ### Fixed

packages/lumx-core/src/css/design-tokens.css

@@ -1,11 +1,7 @@
 @function lumx-color-variant($color, $variant) {
     @if map-has-key($lumx-color-palette, $color) {
-        @if $color == 'primary' or $color == 'secondary' {
-            @return var(--lumx-color-#{$color}-#{$variant});
-        } @else {
-            @return map-get(map-get($lumx-color-palette, $color), $variant);
-        }
+        @return var(--lumx-color-#{$color}-#{$variant});
     } @else {
-        @return map-get(map-get($lumx-color-palette, 'dark'), $variant);
+        @return var(--lumx-color-dark-N);
     }
 }

packages/lumx-core/src/js/constants/design-tokens.ts

@@ -0,0 +1,16 @@
+const StyleDictionary = require("style-dictionary");
+
+/**
+ * Transform group:
+ */
+const name = "transform-group-custom";
+StyleDictionary.registerTransformGroup({
+    name,
+    transforms: [
+        require("./utils/_lumx-variables"),
+        require("./utils/_color-attributes"),
+        require("./utils/_color-rgba-value"),
+        require("./utils/_css-prefer-variable")
+    ]
+});
+module.exports = name;

packages/lumx-core/src/scss/_design-tokens.scss

@@ -1,5 +1,5 @@
 const path = require('path');
-const transformGroup = require('./utils/_css-transform-group');
+const transformGroup = require('./_transform-group');
 
 module.exports = () => {
     const baseDir = `${__dirname}/../`;

packages/lumx-core/src/scss/core/color/_functions.scss

@@ -1,6 +1,6 @@
 const StyleDictionary = require('style-dictionary');
 const path = require('path');
-const transformGroup = require('./utils/_css-transform-group');
+const transformGroup = require('./_transform-group');
 
 /**
  * SCSS generator

packages/lumx-core/style-dictionary/config/_transform-group.js

@@ -1,15 +1,7 @@
 const StyleDictionary = require('style-dictionary');
 const path = require('path');
 const pickFieldsInTree = require('./utils/_pickFieldsInTree');
-
-/**
- * Transform group:
- */
-const transformGroup = 'ts-custom';
-StyleDictionary.registerTransformGroup({
-    name: transformGroup,
-    transforms: ['attribute/cti', 'name/cti/pascal', require('./utils/_color-opacity'), 'color/css', 'attribute/color'],
-});
+const transformGroup = require('./_transform-group');
 
 /**
  * Typescript generator:
@@ -24,7 +16,7 @@ StyleDictionary.registerFormat({
         return `
             ${require('./utils/_genHeader')()}
 
-            export const DESIGN_TOKENS = ${JSON.stringify(properties, null, 2)}
+            export const DESIGN_TOKENS = ${JSON.stringify(properties)}
         `;
     },
 });
@@ -47,11 +39,9 @@ module.exports = () => {
                             'version',
                             'comment',
                             'value',
-                            'attributes.category',
-                            'attributes.type',
-                            'attributes.item',
                             'attributes.hex',
                             'attributes.rgb',
+                            '$aliasedFrom'
                         ],
                     },
                 ],

packages/lumx-core/style-dictionary/config/gen-css-variables.js

@@ -0,0 +1,24 @@
+const StyleDictionary = require("style-dictionary");
+const tinycolor2 = require("tinycolor2");
+
+/**
+ * Color value transform to RGBA object with added opacity if provided.
+ */
+const name = "color/attributes";
+
+StyleDictionary.registerTransform({
+    name,
+    type: "attribute",
+    matcher: (prop) => /\bcolor\b/.exec(prop.name),
+    transformer: ({ value, attributes = {}, opacity = 1 }) => {
+        const color = tinycolor2(value);
+        if (!color.getFormat() || color.getFormat() === "name") {
+            // Skip if format "name" or undefined.
+            return attributes;
+        }
+
+        const colorWithAlpha = color.setAlpha(opacity);
+        return { ...attributes, rgb: colorWithAlpha.toRgb(), hex: colorWithAlpha.toHex() };
+    }
+});
+module.exports = name;