Added colors-oklch scss module (#10)

mayank99 · Jul 30, 2023 · f63d2b2 · f63d2b2
1 parent 92cdf15
commit f63d2b2
Showing 1 changed file with 24 additions and 0 deletions.
diff --git a/package/generateScss.mjs b/package/generateScss.mjs
@@ -13,6 +13,8 @@ import MasksEdges from 'open-props/src/masks.edges';
 import MasksCornerCuts from 'open-props/src/masks.corner-cuts';
 import { CustomMedia as Media } from 'open-props/src/media';
 // import Animations from 'open-props/src/animations';
+import OklchColors from 'open-props/src/props.colors-oklch.js';
+import OklchHues from 'open-props/src/props.colors-oklch-hues.js';
 
 import fs from 'node:fs/promises';
 import path from 'node:path';
@@ -129,11 +131,33 @@ const generateSCSSModule = async (moduleName, importObj) => {
   await writeSCSSModule(moduleName, generatedScss);
 };
 
+// Seperate scss module for colors-oklch.scss
+const generateOklchScss = async () => {
+  let oklchScss = '';
+
+  for (const [hueKey, hueValue] of Object.entries(OklchHues)) {
+    const hueName = hueKey.replace('--hue-', '');
+
+    for (const [colorKey, colorValue] of Object.entries(OklchColors)) {
+      if (colorKey === '--color-bright') {
+        oklchScss += `$${hueName}-bright: ${colorValue.replace(/\bvar\(--color-hue,\s*0\)/g, `${hueValue}`)};\n`;
+      } else if (colorKey.includes('--color-')) {
+        const colorIndex = colorKey.replace('--color-', '');
+        oklchScss += `$${hueName}-${colorIndex}: ${colorValue.replace(/\bvar\(--color-hue,\s*0\)/g, `${hueValue}`)};\n`;
+      }
+    }
+  }
+
+  await writeSCSSModule('colors-oklch', oklchScss);
+};
 
 for (const [moduleName, importObj] of Object.entries(openPropFiles)) {
   generateSCSSModule(moduleName, importObj);
 }
 
+// Generate colors-oklch.scss
+generateOklchScss(OklchColors);
+
 // Generate index.scss
 let indexScss = '';
 for (const moduleName in openPropFiles) {