Spark 215297/feat/add style generation from semantic colors (#817)

* feat(core): add semantic color style sheet generation scripts

* feat(core): generate base style sheets from semantic colors token

Co-authored-by: robstax <rob.stachofsky@gmail.com>

core/scss/colors/alert/theme-base.scss

@@ -0,0 +1,22 @@
+//------------------------------------------------------
+// Do not edit this file directly. These variables are
+// generated from the Momentum Design color tokens.
+// @momentum-ui/tokens/dist/semanticColor.json
+//------------------------------------------------------
+
+$md-alert-background-warning-light: $md-yellow-10 !default;
+$md-alert-background-warning-dark: $md-yellow-80 !default;
+$md-alert-background-error-light: $md-red-10 !default;
+$md-alert-background-error-dark: $md-red-80 !default;
+$md-alert-background-theme-light: $md-theme-10 !default;
+$md-alert-background-theme-dark: $md-theme-80 !default;
+$md-alert-background-success-light: $md-green-10 !default;
+$md-alert-background-success-dark: $md-green-80 !default;
+$md-alert-text-warning-light: $md-yellow-70 !default;
+$md-alert-text-warning-dark: $md-yellow-40 !default;
+$md-alert-text-error-light: $md-red-70 !default;
+$md-alert-text-error-dark: $md-red-40 !default;
+$md-alert-text-theme-light: $md-theme-70 !default;
+$md-alert-text-theme-dark: $md-theme-40 !default;
+$md-alert-text-success-light: $md-green-70 !default;
+$md-alert-text-success-dark: $md-green-40 !default;

core/scss/colors/avatar/theme-base.scss

@@ -0,0 +1,28 @@
+//------------------------------------------------------
+// Do not edit this file directly. These variables are
+// generated from the Momentum Design color tokens.
+// @momentum-ui/tokens/dist/semanticColor.json
+//------------------------------------------------------
+
+$md-avatar-cobalt-light: $md-cobalt-30 !default;
+$md-avatar-cobalt-dark: $md-cobalt-30 !default;
+$md-avatar-cyan-light: $md-cyan-30 !default;
+$md-avatar-cyan-dark: $md-cyan-30 !default;
+$md-avatar-gold-light: $md-gold-30 !default;
+$md-avatar-gold-dark: $md-gold-30 !default;
+$md-avatar-gray-light: $md-gray-30 !default;
+$md-avatar-gray-dark: $md-gray-30 !default;
+$md-avatar-lime-light: $md-lime-30 !default;
+$md-avatar-lime-dark: $md-lime-30 !default;
+$md-avatar-mint-light: $md-mint-30 !default;
+$md-avatar-mint-dark: $md-mint-30 !default;
+$md-avatar-orange-light: $md-orange-30 !default;
+$md-avatar-orange-dark: $md-orange-30 !default;
+$md-avatar-pink-light: $md-pink-30 !default;
+$md-avatar-pink-dark: $md-pink-30 !default;
+$md-avatar-purple-light: $md-purple-30 !default;
+$md-avatar-purple-dark: $md-purple-30 !default;
+$md-avatar-slate-light: $md-slate-30 !default;
+$md-avatar-slate-dark: $md-slate-30 !default;
+$md-avatar-violet-light: $md-violet-30 !default;
+$md-avatar-violet-dark: $md-violet-30 !default;

core/scss/colors/background/theme-base.scss

@@ -0,0 +1,14 @@
+//------------------------------------------------------
+// Do not edit this file directly. These variables are
+// generated from the Momentum Design color tokens.
+// @momentum-ui/tokens/dist/semanticColor.json
+//------------------------------------------------------
+
+$md-background-primary-light: $md-white !default;
+$md-background-primary-dark: $md-gray-100 !default;
+$md-background-secondary-light: $md-gray-05 !default;
+$md-background-secondary-dark: $md-gray-95 !default;
+$md-background-tertiary-light: $md-gray-10 !default;
+$md-background-tertiary-dark: $md-gray-90 !default;
+$md-background-quaternary-light: $md-gray-20 !default;
+$md-background-quaternary-dark: $md-gray-80 !default;

core/scss/colors/button/theme-base.scss

@@ -0,0 +1,68 @@
+//------------------------------------------------------
+// Do not edit this file directly. These variables are
+// generated from the Momentum Design color tokens.
+// @momentum-ui/tokens/dist/semanticColor.json
+//------------------------------------------------------
+
+$md-button-primary-bg-color-light: $md-blue-60 !default;
+$md-button-primary-bg-color-dark: $md-blue-60 !default;
+$md-button-primary-hover-bg-color-light: $md-blue-70 !default;
+$md-button-primary-hover-bg-color-dark: $md-blue-70 !default;
+$md-button-primary-pressed-bg-color-light: $md-blue-80 !default;
+$md-button-primary-pressed-bg-color-dark: $md-blue-80 !default;
+$md-button-primary-text-color-light: $md-gray-05 !default;
+$md-button-primary-text-color-dark: $md-gray-05 !default;
+$md-button-primary-outline-color-light: $md-blue-70 !default;
+$md-button-primary-outline-color-dark: $md-blue-40 !default;
+$md-button-primary-outline-text-color-light: $md-blue-70 !default;
+$md-button-primary-outline-text-color-dark: $md-blue-40 !default;
+$md-button-secondary-bg-color-light: $md-gray-20 !default;
+$md-button-secondary-bg-color-dark: $md-gray-60 !default;
+$md-button-secondary-hover-bg-color-light: $md-gray-30 !default;
+$md-button-secondary-hover-bg-color-dark: $md-gray-70 !default;
+$md-button-secondary-pressed-bg-color-light: $md-gray-40 !default;
+$md-button-secondary-pressed-bg-color-dark: $md-gray-80 !default;
+$md-button-secondary-text-color-light: $md-gray-100 !default;
+$md-button-secondary-text-color-dark: $md-gray-05 !default;
+$md-button-secondary-outline-color-light: $md-gray-70 !default;
+$md-button-secondary-outline-color-dark: $md-gray-40 !default;
+$md-button-secondary-outline-text-color-light: $md-gray-70 !default;
+$md-button-secondary-outline-text-color-dark: $md-gray-40 !default;
+$md-button-join-bg-color-light: $md-green-60 !default;
+$md-button-join-bg-color-dark: $md-green-60 !default;
+$md-button-join-hover-bg-color-light: $md-green-70 !default;
+$md-button-join-hover-bg-color-dark: $md-green-70 !default;
+$md-button-join-pressed-bg-color-light: $md-green-80 !default;
+$md-button-join-pressed-bg-color-dark: $md-green-80 !default;
+$md-button-join-text-color-light: $md-gray-05 !default;
+$md-button-join-text-color-dark: $md-gray-05 !default;
+$md-button-join-outline-color-light: $md-green-70 !default;
+$md-button-join-outline-color-dark: $md-green-40 !default;
+$md-button-join-outline-text-color-light: $md-green-70 !default;
+$md-button-join-outline-text-color-dark: $md-green-40 !default;
+$md-button-cancel-bg-color-light: $md-red-60 !default;
+$md-button-cancel-bg-color-dark: $md-red-60 !default;
+$md-button-cancel-hover-bg-color-light: $md-red-70 !default;
+$md-button-cancel-hover-bg-color-dark: $md-red-70 !default;
+$md-button-cancel-pressed-bg-color-light: $md-red-80 !default;
+$md-button-cancel-pressed-bg-color-dark: $md-red-80 !default;
+$md-button-cancel-text-color-light: $md-gray-05 !default;
+$md-button-cancel-text-color-dark: $md-gray-05 !default;
+$md-button-cancel-outline-color-light: $md-red-70 !default;
+$md-button-cancel-outline-color-dark: $md-red-40 !default;
+$md-button-cancel-outline-text-color-light: $md-red-70 !default;
+$md-button-cancel-outline-text-color-dark: $md-red-40 !default;
+$md-button-ghost-bg-color-light: none !default;
+$md-button-ghost-bg-color-dark: none !default;
+$md-button-ghost-hover-bg-color-light: $md-gray-70 !default;
+$md-button-ghost-hover-bg-color-dark: $md-gray-70 !default;
+$md-button-ghost-pressed-bg-color-light: $md-gray-80 !default;
+$md-button-ghost-pressed-bg-color-dark: $md-gray-60 !default;
+$md-button-ghost-text-color-light: $md-gray-100 !default;
+$md-button-ghost-text-color-dark: $md-gray-05 !default;
+$md-button-focus-ring-color-light: $md-blue-60 !default;
+$md-button-focus-ring-color-dark: $md-blue-40 !default;
+$md-button-disabled-bg-color-light: $md-gray-20 !default;
+$md-button-disabled-bg-color-dark: $md-gray-90 !default;
+$md-button-disabled-text-color-light: $md-gray-40 !default;
+$md-button-disabled-text-color-dark: $md-gray-70 !default;

core/scss/colors/input/theme-base.scss

@@ -0,0 +1,44 @@
+//------------------------------------------------------
+// Do not edit this file directly. These variables are
+// generated from the Momentum Design color tokens.
+// @momentum-ui/tokens/dist/semanticColor.json
+//------------------------------------------------------
+
+$md-input-background-color-light: $md-white !default;
+$md-input-background-color-dark: $md-gray-100 !default;
+$md-input-background-hover-light: $md-gray-20 !default;
+$md-input-background-hover-dark: $md-gray-80 !default;
+$md-input-background-pressed-light: $md-gray-30 !default;
+$md-input-background-pressed-dark: $md-gray-70 !default;
+$md-input-background-active-light: $md-gray-20 !default;
+$md-input-background-active-dark: $md-gray-80 !default;
+$md-input-background-theme-color-light: $md-theme-60 !default;
+$md-input-background-theme-color-dark: $md-theme-40 !default;
+$md-input-background-theme-hover-light: $md-theme-70 !default;
+$md-input-background-theme-hover-dark: $md-theme-50 !default;
+$md-input-background-theme-pressed-light: $md-theme-80 !default;
+$md-input-background-theme-pressed-dark: $md-theme-60 !default;
+$md-input-background-theme-active-light: $md-theme-80 !default;
+$md-input-background-theme-active-dark: $md-theme-60 !default;
+$md-input-background-theme-disabled-light: $md-theme-05 !default;
+$md-input-background-theme-disabled-dark: $md-theme-90 !default;
+$md-input-background-error-light: $md-red-05 !default;
+$md-input-background-error-dark: $md-red-90 !default;
+$md-input-disabled-light: $md-gray-10 !default;
+$md-input-disabled-dark: $md-gray-90 !default;
+$md-input-focusRing-light: $md-theme-60 !default;
+$md-input-focusRing-dark: $md-theme-40 !default;
+$md-input-outline-color-light: $md-gray-30 !default;
+$md-input-outline-color-dark: $md-gray-70 !default;
+$md-input-outline-active-light: $md-gray-40 !default;
+$md-input-outline-active-dark: $md-gray-60 !default;
+$md-input-outline-error-light: $md-red-50 !default;
+$md-input-outline-error-dark: $md-red-50 !default;
+$md-input-text-primary-light: $md-gray-100 !default;
+$md-input-text-primary-dark: $md-gray-05 !default;
+$md-input-text-secondary-light: $md-gray-70 !default;
+$md-input-text-secondary-dark: $md-gray-70 !default;
+$md-input-text-disabled-light: $md-gray-40 !default;
+$md-input-text-disabled-dark: $md-gray-40 !default;
+$md-input-text-error-light: $md-red-70 !default;
+$md-input-text-error-dark: $md-red-40 !default;

core/scss/colors/presence/theme-base.scss

@@ -0,0 +1,14 @@
+//------------------------------------------------------
+// Do not edit this file directly. These variables are
+// generated from the Momentum Design color tokens.
+// @momentum-ui/tokens/dist/semanticColor.json
+//------------------------------------------------------
+
+$md-presence-busy-light: $md-yellow-40 !default;
+$md-presence-busy-dark: $md-yellow-40 !default;
+$md-presence-doNotDisturb-light: $md-red-60 !default;
+$md-presence-doNotDisturb-dark: $md-red-60 !default;
+$md-presence-active-light: $md-green-50 !default;
+$md-presence-active-dark: $md-green-50 !default;
+$md-presence-away-light: $md-gray-30 !default;
+$md-presence-away-dark: $md-gray-30 !default;

core/scss/colors/separator/theme-base.scss

@@ -0,0 +1,10 @@
+//------------------------------------------------------
+// Do not edit this file directly. These variables are
+// generated from the Momentum Design color tokens.
+// @momentum-ui/tokens/dist/semanticColor.json
+//------------------------------------------------------
+
+$md-separator-primary-light: $md-gray-30 !default;
+$md-separator-primary-dark: $md-gray-70 !default;
+$md-separator-secondary-light: $md-gray-40 !default;
+$md-separator-secondary-dark: $md-gray-60 !default;

core/scss/colors/textColor/theme-base.scss

@@ -0,0 +1,20 @@
+//------------------------------------------------------
+// Do not edit this file directly. These variables are
+// generated from the Momentum Design color tokens.
+// @momentum-ui/tokens/dist/semanticColor.json
+//------------------------------------------------------
+
+$md-textColor-primary-light: $md-gray-100 !default;
+$md-textColor-primary-dark: $md-gray-05 !default;
+$md-textColor-secondary-light: $md-gray-70 !default;
+$md-textColor-secondary-dark: $md-gray-40 !default;
+$md-textColor-disabled-light: $md-gray-40 !default;
+$md-textColor-disabled-dark: $md-gray-70 !default;
+$md-textColor-highlight-light: $md-gray-20 !default;
+$md-textColor-highlight-dark: $md-gray-80 !default;
+$md-textColor-hyperlink-color-light: $md-theme-70 !default;
+$md-textColor-hyperlink-color-dark: $md-theme-40 !default;
+$md-textColor-hyperlink-hover-light: $md-theme-90 !default;
+$md-textColor-hyperlink-hover-dark: $md-theme-20 !default;
+$md-textColor-hyperlink-focus-light: $md-theme-70 !default;
+$md-textColor-hyperlink-focus-dark: $md-theme-40 !default;

core/tools/generateScssFromTokens.js

@@ -1,7 +1,9 @@
 const generateFileFromTemplate = require('@momentum-ui/utils/src/generateFileFromTemplate');
+const generateFileFromThemeToken = require('@momentum-ui/utils/src/generateFileFromThemeToken');
 const path = require('path');
 const colorData = require('@momentum-ui/tokens/dist/colors.json');
 const buttonColorData = require('@momentum-ui/tokens/dist/button.json');
+const semanticColorData = require('@momentum-ui/tokens/dist/semanticColor.json');
 colorData.prefix = 'md';
 
 const generateColorsFromTokens = async () => {
@@ -25,6 +27,16 @@ const generateColorsFromTokens = async () => {
     buttonColorData,
     path.resolve(__dirname, '../templates/buton-colors-settings.hbs')
   );
+
+  // Semantic Color Tokens
+  await Promise.all(Object.keys(semanticColorData).map(
+    async (key) => generateFileFromThemeToken(
+      path.resolve(__dirname, `../scss/colors/${semanticColorData[key].component}/`),
+      'theme-base.scss',
+      semanticColorData[key],
+      '@momentum-ui/tokens/dist/semanticColor.json'
+    )
+  ));
 };
 
 generateColorsFromTokens();

utils/src/generateFileFromThemeToken.js

@@ -0,0 +1,43 @@
+const path = require('path');
+const fs = require('fs-extra');
+
+const generateComment = (dataFile) => {
+  return [
+    '//------------------------------------------------------',
+    '// Do not edit this file directly. These variables are',
+    '// generated from the Momentum Design color tokens.',
+    `// ${dataFile}`,
+    '//------------------------------------------------------',
+  ].join('\n');
+};
+
+const delve = (value, prefix) => {
+  if (typeof value !== 'object') {
+    return `${prefix}: ${value} !default;\n`;
+  }
+
+  return Object.keys(value).map(
+    (key) => delve(value[key], `${prefix}-${key}`)
+  ).join('');
+};
+
+async function generateFileFromThemeToken(dest, fileName, data, dataFile) {
+  const scope = { ...data };
+  const prefix = `$${data.prefix}-${data.component}`;
+  const outputFile = path.join(dest, fileName);
+
+  delete scope.component;
+  delete scope.prefix;
+
+  const content = [
+    generateComment(dataFile),
+    '\n\n',
+    delve(scope, prefix)
+  ].join('');
+
+  await fs.outputFile(outputFile, content);
+
+  console.warn(`${outputFile} written!`);
+}
+
+module.exports = generateFileFromThemeToken;