Export color-related variables as CSS variables

Also * Add some helper vars for OSD Signed-off-by: Miki <miki@amazon.com>
AMoo-Miki · Jun 19, 2023 · 286737c · 286737c
1 parent 3f91360
commit 286737c
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 0 deletions.
diff --git a/scripts/compile-scss.js b/scripts/compile-scss.js
@@ -58,6 +58,7 @@ async function compileScssFiles(
         const outputFilenames = await compileScssFile(
           inputFilename,
           path.join(destinationDirectory, `oui_${name}.css`),
+          path.join(destinationDirectory, `oui_${name}_vars.css`),
           path.join(destinationDirectory, `oui_${name}.json`),
           path.join(destinationDirectory, `oui_${name}.json.d.ts`),
           packageName
@@ -83,6 +84,7 @@ async function compileScssFiles(
         const outputFilenames = await compileScssFile(
           inputFilename,
           path.join(destinationDirectory, `eui_${name.replace('cascadia', 'next')}.css`),
+          path.join(destinationDirectory, `eui_${name.replace('cascadia', 'next')}_vars.css`),
           path.join(destinationDirectory, `eui_${name.replace('cascadia', 'next')}.json`),
           path.join(destinationDirectory, `eui_${name.replace('cascadia', 'next')}.json.d.ts`),
           packageName,
@@ -108,6 +110,7 @@ async function compileScssFiles(
 async function compileScssFile(
   inputFilename,
   outputCssFilename,
+  outputCssVarsFilename,
   outputVarsFilename,
   outputVarTypesFilename,
   packageName,
@@ -180,10 +183,19 @@ async function compileScssFile(
     }
   );
 
+  // Make CSS variables of extracted vars
+  const cssVariablesFilter = /-(color|shade|background)(-|:)/
+  const cssVariablesCss = makeCssVariableFromDef(extractedVars)
+    .filter(line => cssVariablesFilter.test(line));
+
+  cssVariablesCss.unshift(':root {');
+  cssVariablesCss.push('}');
+
   await Promise.all([
     writeFile(outputCssFilename, postprocessedCss),
     writeFile(outputCssMinifiedFilename, postprocessedMinifiedCss),
     writeFile(outputVarsFilename, JSON.stringify(extractedVars, undefined, 2)),
+    writeFile(outputCssVarsFilename, cssVariablesCss.join('\n')),
     writeFile(outputVarTypesFilename, extractedVarTypes),
   ]);
 
@@ -195,6 +207,14 @@ async function compileScssFile(
   ];
 }
 
+const makeCssVariableFromDef = (obj, prefix = '-') => {
+  return Object.keys(obj).flatMap(key => {
+    const name = prefix + '-' + key.replace(/[A-Z0-9]+/g, m => '-' + m.toLowerCase());
+    if (typeof obj[key] === 'string') return `  ${name}: ${obj[key]};`;
+    return makeCssVariableFromDef(obj[key], name)
+  });
+};
+
 if (require.main === module) {
   const [nodeBin, scriptName, ouiPackageName] = process.argv;
 

diff --git a/src/global_styling/variables/_colors.scss b/src/global_styling/variables/_colors.scss
@@ -156,6 +156,10 @@ $ouiCodeBlockDeletionColor: makeHighContrastColor($ouiColorDanger, $ouiCodeBlock
 $ouiCodeBlockSelectorClassColor: inherit !default;
 $ouiCodeBlockSelectorIdColor: inherit !default;
 
+// OSD Helpers
+$ouiColorWarningAlpha90: transparentize($ouiColorWarning, 0.9);
+$ouiColorWarningAlpha70: transparentize($ouiColorWarning, 0.7);
+
 
 /* OUI -> EUI Aliases */
 $euiColorGhost: $ouiColorGhost;
@@ -274,4 +278,6 @@ $euiCodeBlockAdditionColor: $ouiCodeBlockAdditionColor;
 $euiCodeBlockDeletionColor: $ouiCodeBlockDeletionColor;
 $euiCodeBlockSelectorClassColor: $ouiCodeBlockSelectorClassColor;
 $euiCodeBlockSelectorIdColor: $ouiCodeBlockSelectorIdColor;
+$euiColorWarningAlpha90: $ouiColorWarningAlpha90;
+$euiColorWarningAlpha70: $ouiColorWarningAlpha70;
 /* End of Aliases */
diff --git a/src/themes/oui-cascadia/global_styling/variables/_colors.scss b/src/themes/oui-cascadia/global_styling/variables/_colors.scss
@@ -156,6 +156,10 @@ $ouiCodeBlockDeletionColor: makeHighContrastColor($ouiColorDanger, $ouiCodeBlock
 $ouiCodeBlockSelectorClassColor: inherit !default;
 $ouiCodeBlockSelectorIdColor: inherit !default;
 
+// OSD Helpers
+$ouiColorWarningAlpha90: transparentize($ouiColorWarning, 0.9);
+$ouiColorWarningAlpha70: transparentize($ouiColorWarning, 0.7);
+
 
 /* OUI -> EUI Aliases */
 $euiColorGhost: $ouiColorGhost;
@@ -274,4 +278,6 @@ $euiCodeBlockAdditionColor: $ouiCodeBlockAdditionColor;
 $euiCodeBlockDeletionColor: $ouiCodeBlockDeletionColor;
 $euiCodeBlockSelectorClassColor: $ouiCodeBlockSelectorClassColor;
 $euiCodeBlockSelectorIdColor: $ouiCodeBlockSelectorIdColor;
+$euiColorWarningAlpha90: $ouiColorWarningAlpha90;
+$euiColorWarningAlpha70: $ouiColorWarningAlpha70;
 /* End of Aliases */