Add CSS var map regex, Fix basic list of CSS vars
This commit is contained in:
Jeremy Thomas
parent
f85f5dea4e
commit
238b43761f
3 changed files with 139 additions and 5 deletions
|
|
@ -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})
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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];
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue