Add CSS var map regex, Fix basic list of CSS vars

diff --git a/sass/elements/button.sass b/sass/elements/button.sass
index 3ef8d9a31f96f2da3cb921a349c0111e850561f2..c61ef66c86a7a8daf8f5b2a73b0c287b87860758 100644 (file)
--- a/sass/elements/button.sass
+++ b/sass/elements/button.sass
@@ -154,9 +154,6 @@ $button-colors: $colors !default
       --button-active-background-l-delta: -5%
       --button-active-background-#{$name}-l: calc(#{var(--#{$name}-l)} + #{var(--button-active-background-l-delta)})
       --button-active-background-color: hsla(var(--#{$name}-h), var(--#{$name}-s), var(--button-active-background-#{$name}-l), var(--#{$name}-a))
-      --button-invert-hover-background-l-delta: -5%
-      --button-invert-hover-background-#{$name}-l: calc(#{var(--#{$name}-invert-l)} + #{var(--button-invert-hover-background-l-delta)})
-      --button-invert-hover-background-color: hsla(var(--#{$name}-h), var(--#{$name}-s), var(--button-invert-hover-background-#{$name}-l), var(--#{$name}-a))
       background-color: var(--#{$name}, #{$color})
       border-color: transparent
       color: var(--#{$name}-invert, #{$color-invert})

diff --git a/sass/themes/basic.sass b/sass/themes/basic.sass
index c5e48310af66c36efa42564c38c5cd3c506f601f..0e54aaaee2306048e2149a869e0226e373ce8396 100644 (file)
--- a/sass/themes/basic.sass
+++ b/sass/themes/basic.sass
@@ -1,6 +1,114 @@
 \:root
+  // Initial variables
   --black: #{$black}
   --black-70: rgba(0, 0, 0, 0.7)
+  --black-bis: #{$black-bis}
+  --black-ter: #{$black-ter}
+  --grey-darker: #{$grey-darker}
+  --grey-dark: #{$grey-dark}
+  --grey: #{$grey}
+  --grey-light: #{$grey-light}
+  --grey-lighter: #{$grey-lighter}
+  --grey-lightest: #{$grey-lightest}
+  --white-ter: #{$white-ter}
+  --white-bis: #{$white-bis}
   --white: #{$white}
+  --orange: #{$orange}
+  --yellow: #{$yellow}
+  --green: #{$green}
+  --turquoise: #{$turquoise}
+  --cyan: #{$cyan}
+  --blue: #{$blue}
+  --purple: #{$purple}
+  --red: #{$red}
+  --family-sans-serif: #{$family-sans-serif}
+  --family-monospace: #{$family-monospace}
+  --render-mode: #{$render-mode}
+  --size-1: #{$size-1}
+  --size-2: #{$size-2}
+  --size-3: #{$size-3}
+  --size-4: #{$size-4}
+  --size-5: #{$size-5}
+  --size-6: #{$size-6}
+  --size-7: #{$size-7}
+  --weight-light: #{$weight-light}
+  --weight-normal: #{$weight-normal}
+  --weight-medium: #{$weight-medium}
+  --weight-semibold: #{$weight-semibold}
+  --weight-bold: #{$weight-bold}
+  --block-spacing: #{$block-spacing}
+  --easing: #{$easing}
+  --radius-small: #{$radius-small}
+  --radius: #{$radius}
+  --radius-large: #{$radius-large}
+  --radius-rounded: #{$radius-rounded}
+  --speed: #{$speed}
+  // Derived
+  --scheme-main: #{$scheme-main}
+  --scheme-main-bis: #{$scheme-main-bis}
+  --scheme-main-ter: #{$scheme-main-ter}
+  --scheme-invert: #{$scheme-invert}
+  --scheme-invert-rgb: #{$scheme-invert-rgb}
+  --scheme-invert-bis: #{$scheme-invert-bis}
+  --scheme-invert-ter: #{$scheme-invert-ter}
+  --background: #{$background}
+  --border: #{$border}
+  --border-rgb: #{$border-rgb}
+  --border-hover: #{$border-hover}
+  --border-light: #{$border-light}
+  --border-light-hover: #{$border-light-hover}
+  --text: #{$text}
+  --text-invert: #{$text-invert}
+  --text-light: #{$text-light}
+  --text-strong: #{$text-strong}
+  --code: #{$code}
+  --code-background: #{$code-background}
+  --pre: #{$pre}
+  --pre-background: #{$pre-background}
+  --link-visited: #{$link-visited}
+  --link-hover: #{$link-hover}
+  --link-hover-border: #{$link-hover-border}
+  --link-focus: #{$link-focus}
+  --link-focus-border: #{$link-focus-border}
+  --link-active: #{$link-active}
+  --link-active-border: #{$link-active-border}
+  --family-primary: #{$family-primary}
+  --family-secondary: #{$family-secondary}
+  --family-code: #{$family-code}
+  --size-small: #{$size-small}
+  --size-normal: #{$size-normal}
+  --size-medium: #{$size-medium}
+  --size-large: #{$size-large}
+  // Color Maps
   +registerCSSVarColors($colors)
   +registerCSSVarColors($shades)
+  // Controls
+  --control-font-size: #{$control-font-size}
+  --control-radius: #{$control-radius}
+  --control-radius-small: #{$control-radius-small}
+  --control-border-width: #{$control-border-width}
+  --control-height: #{$control-height}
+  --control-line-height: #{$control-line-height}
+  --control-padding-vertical: #{$control-padding-vertical}
+  --control-padding-horizontal: #{$control-padding-horizontal}
+  // Inputs
+  --input-color: #{$input-color}
+  --input-background-color: #{$input-background-color}
+  --input-border-color: #{$input-border-color}
+  --input-height: #{$input-height}
+  --input-shadow: #{$input-shadow}
+  --input-placeholder-color: #{$input-placeholder-color}
+  --input-hover-color: #{$input-hover-color}
+  --input-hover-border-color: #{$input-hover-border-color}
+  --input-focus-color: #{$input-focus-color}
+  --input-focus-border-color: #{$input-focus-border-color}
+  --input-focus-box-shadow-size: #{$input-focus-box-shadow-size}
+  --input-focus-box-shadow-color: #{$input-focus-box-shadow-color}
+  --input-disabled-color: #{$input-disabled-color}
+  --input-disabled-background-color: #{$input-disabled-background-color}
+  --input-disabled-border-color: #{$input-disabled-border-color}
+  --input-disabled-placeholder-color: #{$input-disabled-placeholder-color}
+  --input-arrow: #{$input-arrow}
+  --input-icon-color: #{$input-icon-color}
+  --input-icon-active-color: #{$input-icon-active-color}
+  --input-radius: #{$input-radius}

diff --git a/test/plugins/check-css-variables-exist.js b/test/plugins/check-css-variables-exist.js
index 1619b21b31b847cdbfaf63ae75503f8827e848e3..7d95ed2731b95d0f3d81e59b041ea6c8222cb19b 100644 (file)
--- a/test/plugins/check-css-variables-exist.js
+++ b/test/plugins/check-css-variables-exist.js
@@ -2,26 +2,55 @@ module.exports = plugin;
 
 const utils = require('./utils');
 const fs = require('fs');
+const regexRegisterColors = /registerCSSVarColors\((\$[a-z]+)\)/g;
 const regexAssign = /--[a-z-]*:/g;
 const regexUsage = /var\(--[a-z-]*(\, \#|\))/g;
 const LOG_EVERYTHING = false;
 
+const COLOR_MAPS = {
+  '$colors': ["white", "black", "light", "dark", "primary", "link", "info", "success", "warning", "danger"],
+  '$shades': ["black-bis", "black-ter", "grey-darker", "grey-dark", "grey", "grey-light", "grey-lighter", "white-ter", "white-bis"],
+}
+
 function logThis(message) {
   if (LOG_EVERYTHING) {
     console.log(message);
   }
 }
 
+function getFirstGroup(regexp, str) {
+  const array = [...str.matchAll(regexp)];
+  return array.map(m => m[1]);
+}
+
 function plugin() {
   return (files, metalsmith, done) => {
     setImmediate(done);
 
     let hasErrors = false;
 
-    const cssvars = fs.readFileSync(`../sass/themes/default.sass`, "utf8");
-    let defaultAssignments = cssvars.match(regexAssign);
+    const cssvars = fs.readFileSync(`../sass/themes/basic.sass`, "utf8");
+
+    // Check for --cyan: #{$cyan}
+    let defaultAssignments = cssvars.match(regexAssign) || [];
     defaultAssignments = defaultAssignments.map(assignment => assignment.replace(':', ''));
 
+    // Check for +registerCSSVarColors($colors)
+    let registerMaps = getFirstGroup(regexRegisterColors, cssvars);
+
+    if (registerMaps) {
+      registerMaps.forEach(mapName => {
+        if (mapName in COLOR_MAPS) {
+          const colors = COLOR_MAPS[mapName].map(colorName => {
+            defaultAssignments.push(`--${colorName}`);
+            defaultAssignments.push(`--${colorName}-invert`);
+            defaultAssignments.push(`--${colorName}-light`);
+            defaultAssignments.push(`--${colorName}-dark`);
+          });
+        }
+      });
+    }
+
     Object.keys(files).forEach(filePath => {
       const {fileName, lines} = utils.getLines(files, filePath);
       const file = files[filePath];