feat: Custom build for separate dark and light variables

.github/workflows/release.yml

@@ -18,7 +18,7 @@ jobs:
           registry-url: https://registry.npmjs.org
       - run: npm install
       - run: npm run transform
-      - run: npm run build
+      - run: URL=$(node ./build.js)
       - name: 🚀 publish to npm
         run: npm run semantic-release
         env:

build.js

@@ -0,0 +1,70 @@
+const StyleDictionary = require('style-dictionary');
+const fs = require('fs-extra');
+
+const path = `build/`;
+
+// before this runs we should clean the directories we are generating files in
+// to make sure they are ✨clean✨
+console.log(`cleaning ${path}...`);
+fs.removeSync(path);
+
+// Adding custom actions, transforms, and formats
+const styleDictionary = StyleDictionary.extend({});
+
+const modes = [`light`, `dark`];
+
+console.log(`☀️ Building light mode...`);
+styleDictionary
+  .extend({
+    source: [
+      // this is saying find any files in the tokens folder
+      // that does not have .dark or .light, but ends in .json
+      `tokens/!(*.${modes.join(`|*.`)}).json`,
+    ],
+
+    platforms: {
+      css: {
+        transformGroup: `css`,
+        buildPath: path,
+        files: [
+          {
+            destination: `variables.css`,
+            format: `css/variables`,
+            options: {
+              outputReferences: true,
+            },
+          },
+        ],
+      },
+    },
+  })
+  .buildAllPlatforms();
+
+// Dark Mode
+// we will only build the files we need to, we don't need to rebuild all the files
+console.log(`\n\n🌙 Building dark mode...`);
+styleDictionary
+  .extend({
+    // Using the include array so that theme token overrides don't show
+    // warnings in the console.
+    include: [`tokens/!(*.${modes.join(`|*.`)}).json`],
+    source: [`tokens/dark.json`],
+    platforms: {
+      css: {
+        transformGroup: `css`,
+        buildPath: path,
+        files: [
+          {
+            destination: `variables-dark.css`,
+            format: `css/variables`,
+            // only putting in the tokens from files with '.dark' in the filepath
+            filter: (token) => token.filePath.indexOf(`dark`) > -1,
+            options: {
+              outputReferences: true,
+            },
+          },
+        ],
+      },
+    },
+  })
+  .buildAllPlatforms();

build/variables-dark.css

@@ -0,0 +1,79 @@
+/**
+ * Do not edit directly
+ * Generated on Thu, 17 Nov 2022 13:41:59 GMT
+ */
+
+:root {
+  --clr-alert-off: #f0757599;
+  --clr-alert-main: #f07575;
+  --clr-alert-900: #5c0a0a;
+  --clr-alert-800: #5c0a0a;
+  --clr-alert-700: #810e0e;
+  --clr-alert-600: #a51212;
+  --clr-alert-500: #ca1616;
+  --clr-alert-400: #e72323;
+  --clr-alert-300: #eb4747;
+  --clr-alert-200: #ef6c6c;
+  --clr-alert-100: #f39191;
+  --clr-alert-50: #f6acac;
+  --clr-gradient-linear: linear-gradient(90deg, #23e6c0 0%, #7733ff 100%);
+  --clr-surface-secondary: #313131;
+  --clr-surface-primary: #222222;
+  --clr-heading-off: #ffffff73;
+  --clr-heading-inverse: #000000;
+  --clr-heading-main: #ffffff;
+  --clr-background-secondary: #1b1b1b;
+  --clr-background-primary: #121212;
+  --clr-text-off: #ffffff4d;
+  --clr-text-inverse: #434d56;
+  --clr-text-main: #ffffff99;
+  --clr-shade-1: #000000;
+  --clr-shade-0: #ffffff;
+  --clr-neutral-900: #1a1a1a;
+  --clr-neutral-800: #1a1a1a;
+  --clr-neutral-700: #484848;
+  --clr-neutral-600: #5c5c5c;
+  --clr-neutral-500: #707070;
+  --clr-neutral-400: #858585;
+  --clr-neutral-300: #999999;
+  --clr-neutral-200: #adadad;
+  --clr-neutral-100: #d1d1d1;
+  --clr-neutral-50: #d1d1d1;
+  --clr-tertiary-off: #ff66c499;
+  --clr-tertiary-main: #ff66c4;
+  --clr-tertiary-900: #33001f;
+  --clr-tertiary-800: #33001f;
+  --clr-tertiary-700: #8f0058;
+  --clr-tertiary-600: #b80071;
+  --clr-tertiary-500: #e0008a;
+  --clr-tertiary-400: #ff0aa1;
+  --clr-tertiary-300: #ff33b1;
+  --clr-tertiary-200: #ff5cc0;
+  --clr-tertiary-100: #ff85d0;
+  --clr-tertiary-50: #ffa3dc;
+  --clr-secondary-off: #b191f399;
+  --clr-secondary-main: #5216ca;
+  --clr-secondary-900: #13052e;
+  --clr-secondary-800: #13052e;
+  --clr-secondary-700: #340e81;
+  --clr-secondary-600: #4312a5;
+  --clr-secondary-500: #5216ca;
+  --clr-secondary-400: #6423e7;
+  --clr-secondary-300: #7e47eb;
+  --clr-secondary-200: #986cef;
+  --clr-secondary-100: #b191f3;
+  --clr-secondary-50: #c5acf6;
+  --clr-primary-badge: #38e8c61a;
+  --clr-primary-off: #23e7bf80;
+  --clr-primary-main: #38e8c6;
+  --clr-primary-900: #084539;
+  --clr-primary-800: #0a5c4b;
+  --clr-primary-700: #0e816a;
+  --clr-primary-600: #12a588;
+  --clr-primary-500: #16caa6;
+  --clr-primary-400: #23e7bf;
+  --clr-primary-300: #47ebca;
+  --clr-primary-200: #6cefd5;
+  --clr-primary-100: #91f3df;
+  --clr-primary-50: #acf6e7;
+}

build/variables.css

@@ -0,0 +1,160 @@
+/**
+ * Do not edit directly
+ * Generated on Thu, 17 Nov 2022 13:41:59 GMT
+ */
+
+:root {
+  --paragraph-indent-0: 0;
+  --text-decoration-none: none;
+  --text-case-uppercase: uppercase;
+  --text-case-none: none;
+  --paragraph-spacing-0: 0;
+  --letter-spacing-4: -2%;
+  --letter-spacing-3: 8%;
+  --letter-spacing-2: 10%;
+  --letter-spacing-1: 0%;
+  --letter-spacing-0: 0;
+  --font-size-10: 76;
+  --font-size-9: 52;
+  --font-size-8: 36;
+  --font-size-7: 32;
+  --font-size-6: 28;
+  --font-size-5: 24;
+  --font-size-4: 18;
+  --font-size-3: 16;
+  --font-size-2: 15;
+  --font-size-1: 14;
+  --font-size-0: 12;
+  --font-weights-jetbrains-mono-8: Bold;
+  --font-weights-jetbrains-mono-7: Medium;
+  --font-weights-inter-6: Semi Bold;
+  --font-weights-inter-5: Medium;
+  --font-weights-inter-4: Regular;
+  --font-weights-satoshi-variable-3: Black;
+  --font-weights-satoshi-variable-2: Bold;
+  --font-weights-satoshi-variable-1: Medium;
+  --font-weights-satoshi-variable-0: Regular;
+  --line-heights-9: 86;
+  --line-heights-8: 18;
+  --line-heights-7: 20;
+  --line-heights-6: 24;
+  --line-heights-5: 28;
+  --line-heights-4: 32;
+  --line-heights-3: 36;
+  --line-heights-2: 40;
+  --line-heights-1: 44;
+  --line-heights-0: 58;
+  --font-families-jetbrains-mono: JetBrains Mono;
+  --font-families-inter: Inter;
+  --font-families-satoshi-variable: Satoshi Variable;
+  --clr-alert-off: #f0757599;
+  --clr-alert-main: #f07575;
+  --clr-alert-900: #f6acac;
+  --clr-alert-800: #f39191;
+  --clr-alert-700: #ef6c6c;
+  --clr-alert-600: #eb4747;
+  --clr-alert-500: #e72323;
+  --clr-alert-400: #ca1616;
+  --clr-alert-300: #a51212;
+  --clr-alert-200: #810e0e;
+  --clr-alert-100: #5c0a0a;
+  --clr-alert-50: #5c0a0a;
+  --clr-gradient-linear: linear-gradient(90deg, #23e6c0 0%, #7733ff 100%);
+  --clr-surface-secondary: #d1d1d1;
+  --clr-surface-primary: #e1e1e1;
+  --clr-heading-off: #00000099;
+  --clr-heading-inverse: #ffffff;
+  --clr-heading-main: #000000;
+  --clr-background-secondary: #e6e6e6;
+  --clr-background-primary: #ffffff;
+  --clr-text-off: #00000073;
+  --clr-text-inverse: #ffffff99;
+  --clr-text-main: #000000c7;
+  --clr-shade-1: #ffffff;
+  --clr-shade-0: #000000;
+  --clr-neutral-900: #d1d1d1;
+  --clr-neutral-800: #d1d1d1;
+  --clr-neutral-700: #adadad;
+  --clr-neutral-600: #999999;
+  --clr-neutral-500: #858585;
+  --clr-neutral-400: #707070;
+  --clr-neutral-300: #5c5c5c;
+  --clr-neutral-200: #484848;
+  --clr-neutral-100: #1a1a1a;
+  --clr-neutral-50: #1a1a1a;
+  --clr-tertiary-off: #ff66c499;
+  --clr-tertiary-main: #ff66c4;
+  --clr-tertiary-900: #33001f;
+  --clr-tertiary-800: #33001f;
+  --clr-tertiary-700: #8f0058;
+  --clr-tertiary-600: #b80071;
+  --clr-tertiary-500: #e0008a;
+  --clr-tertiary-400: #ff0aa1;
+  --clr-tertiary-300: #ff33b1;
+  --clr-tertiary-200: #ff5cc0;
+  --clr-tertiary-100: #ff85d0;
+  --clr-tertiary-50: #ffa3dc;
+  --clr-secondary-off: #b191f399;
+  --clr-secondary-main: #986cef;
+  --clr-secondary-900: #c5acf6;
+  --clr-secondary-800: #b191f3;
+  --clr-secondary-700: #986cef;
+  --clr-secondary-600: #7e47eb;
+  --clr-secondary-500: #6423e7;
+  --clr-secondary-400: #5216ca;
+  --clr-secondary-300: #4312a5;
+  --clr-secondary-200: #340e81;
+  --clr-secondary-100: #13052e;
+  --clr-secondary-50: #13052e;
+  --clr-primary-badge: #38e8c61a;
+  --clr-primary-off: #23e7bf80;
+  --clr-primary-main: #38e8c6;
+  --clr-primary-900: #acf6e7;
+  --clr-primary-800: #91f3df;
+  --clr-primary-700: #6cefd5;
+  --clr-primary-600: #47ebca;
+  --clr-primary-500: #23e7bf;
+  --clr-primary-400: #16caa6;
+  --clr-primary-300: #12a588;
+  --clr-primary-200: #0e816a;
+  --clr-primary-100: #0a5c4b;
+  --clr-primary-50: #0a5c4b;
+  --display-large-black: [object Object];
+  --display-large-extrabold: [object Object];
+  --display-large-bold: [object Object];
+  --display-large-regular: [object Object];
+  --tagline-large: [object Object];
+  --tagline-small: [object Object];
+  --paragraph-xsmall-bold: [object Object];
+  --paragraph-xsmall-semibold: [object Object];
+  --paragraph-xsmall-regular: [object Object];
+  --paragraph-small-bold: [object Object];
+  --paragraph-small-semibold: [object Object];
+  --paragraph-small-regular: [object Object];
+  --paragraph-medium-bold: [object Object];
+  --paragraph-medium-semibold: [object Object];
+  --paragraph-medium-regular: [object Object];
+  --paragraph-large-bold: [object Object];
+  --paragraph-large-semibold: [object Object];
+  --paragraph-large-regular: [object Object];
+  --heading-5-black: [object Object];
+  --heading-5-extra-bold: [object Object];
+  --heading-5-bold: [object Object];
+  --heading-5-regular: [object Object];
+  --heading-4-black: [object Object];
+  --heading-4-extra-bold: [object Object];
+  --heading-4-bold: [object Object];
+  --heading-4-regular: [object Object];
+  --heading-3-extra-bold: [object Object];
+  --heading-3-bold: [object Object];
+  --heading-3-black: [object Object];
+  --heading-3-regular: [object Object];
+  --heading-2-black: [object Object];
+  --heading-2-extra-bold: [object Object];
+  --heading-2-bold: [object Object];
+  --heading-2-regular: [object Object];
+  --heading-1-black: [object Object];
+  --heading-1-extra-bold: [object Object];
+  --heading-1-bold: [object Object];
+  --heading-1-regular: [object Object];
+}