rework theme generation

lib/generate-theme.js

@@ -1,28 +1,47 @@
-const {theme} = require('@primer/primitives')
 const postcss = require('postcss')
 
-module.exports = function generateTheme(transform) {
-  const {variables} = transform(theme)
-  const entries = Object.entries(variables).filter(([, value]) => typeof value !== 'undefined')
+module.exports = function generateTheme(themeConfig) {
+  const {variables = {}, promotions = []} = themeConfig
 
   const sheet = postcss.root()
   const root = postcss.rule({selector: ':root'})
-  for (const [name, value] of entries) {
-    const prop = postcss.decl({
-      prop: `--${name}`,
-      value: `#{${value}}`
-    })
-    root.append(prop)
+  const defs = postcss.root()
+  defs.append(postcss.comment({text: 'override global variables to use var()'}))
+
+  sheet.append(postcss.atRule({name: 'import', params: '"../support/index.scss"'}))
+
+  root.append(postcss.comment({text: 'variables defined in the theme'}))
+  for (const [name, value] of Object.entries(variables)) {
+    declare(name, value)
+    promotions.push(name)
   }
-  sheet.append(root)
 
-  for (const [name, value] of entries) {
-    const prop = postcss.decl({
-      prop: `$${name}`,
-      value: `var(--${name}, #{${value}})`
-    })
-    sheet.append(prop)
+  root.append(postcss.comment({text: 'promotions: SCSS -> custom properties'}))
+  for (const name of new Set(promotions)) {
+    declare(name, `$${name}`)
+    define(name, `var(--${name}) !global`)
   }
 
+  root.append(defs)
+  sheet.append(root)
+
   return sheet
+
+  function declare(name, value) {
+    return root.append(
+      postcss.decl({
+        prop: `--${name}`,
+        value: /[\$\(]/.test(value) ? `#{${value}}` : value
+      })
+    )
+  }
+
+  function define(name, value) {
+    return defs.append(
+      postcss.decl({
+        prop: `$${name}`,
+        value
+      })
+    )
+  }
 }

script/generate-themes.js

@@ -2,6 +2,7 @@
 /* eslint-disable no-console */
 const globby = require('globby')
 const postcss = require('postcss')
+const stylelint = require('stylelint')
 const loadConfig = require('postcss-load-config')
 const {mkdirp, writeFile} = require('fs-extra')
 const {dirname, join} = require('path')
@@ -42,6 +43,8 @@ async function generateThemes(generateOptions = {}) {
     themes[name] = {from, to, map}
   }
 
+  await stylelint.lint({files: `${inDir}/*.scss`, fix: true})
+
   return themes
 }
 

src/index.scss

@@ -10,6 +10,8 @@
 // Imports all Primer files in their intended order for easy mass-inclusion.
 // Should you need specific files, you can easily use separate `@import`s.
 
+@import "./theme/index.scss";
+
 // Global requirements
 @import "./core/index.scss";
 @import "./product/index.scss";

src/theme/index.scss

@@ -0,0 +1,24 @@
+@import "../support/index.scss";
+
+:root {
+  @each $name, $colors in $hue-maps {
+    @each $index, $value in $colors {
+      --#{$name}-#{$index}: #{$value};
+    }
+  }
+
+  @each $index, $value in $spacer-map {
+    --spacer-#{$index}: #{$value};
+  }
+
+  @each $index, $value in $em-spacer-map {
+    --em-spacer-#{$index}: #{$value};
+  }
+
+  @each $name, $width in $breakpoints {
+    --breakpoint-#{$name}: #{$width};
+  }
+}
+
+// the default theme
+@import "./light.scss";

src/theme/light.js

@@ -0,0 +1,61 @@
+const {theme} = require('@primer/primitives')
+const {get} = require('dotmap')
+const color = key => get(theme.colors, key)
+
+const promotions = [
+  'border-black-fade',
+  'border-white-fade',
+  'border-gray-light',
+  'border-green-light',
+  'border-red-light',
+  'border-yellow',
+  'border-color-button',
+  'bg-black-fade'
+]
+
+const variables = {
+  'border-white': color('white'),
+  'border-gray': color('gray.2'),
+  'border-gray-dark': color('gray.3'),
+  'border-gray-darker': color('gray.7'),
+  'border-blue': color('blue.5'),
+  'border-blue-light': color('blue.2'),
+  'border-green': color('green.4'),
+  'border-purple': color('purple.5'),
+  'border-red': color('red.5'),
+
+  'bg-white': color('white'),
+  'bg-black': color('black'),
+  'bg-blue-light': color('blue.0'),
+  'bg-blue': color('blue.5'),
+  'bg-gray-dark': color('gray.9'),
+  'bg-gray-light': color('gray.0'),
+  'bg-gray': color('gray.1'),
+  'bg-green': color('green.5'),
+  'bg-green-light': color('green.1'),
+  'bg-orange': color('orange.7'),
+  'bg-purple': color('purple.5'),
+  'bg-purple-light': color('purple.0'),
+  'bg-pink': color('pink.5'),
+  'bg-red': color('red.5'),
+  'bg-red-light': color('red.1'),
+  'bg-yellow': color('yellow.5'),
+  'bg-yellow-light': color('yellow.2'),
+  'bg-yellow-dark': color('yellow.7'),
+
+  'text-black': color('black'),
+  'text-white': color('white'),
+  'text-blue': color('blue.5'),
+  'text-gray-dark': color('gray.9'),
+  'text-gray-light': color('gray.5'),
+  'text-gray': color('gray.6'),
+  'text-green': color('green.5'),
+  'text-orange': color('orange.9'),
+  'text-orange-light': color('orange.6'),
+  'text-purple': color('purple.5'),
+  'text-pink': color('pink.5'),
+  'text-red': color('red.6'),
+  'text-yellow': color('yellow.8')
+}
+
+module.exports = {variables, promotions}

src/theme/light.scss

@@ -0,0 +1,145 @@
+@import "../support/index.scss";
+
+:root {
+  /* variables defined in the theme */
+  --border-white: #fff;
+  --border-gray: #e1e4e8;
+  --border-gray-dark: #d1d5da;
+  --border-gray-darker: #444d56;
+  --border-blue: #0366d6;
+  --border-blue-light: #c8e1ff;
+  --border-green: #34d058;
+  --border-purple: #6f42c1;
+  --border-red: #d73a49;
+  --bg-white: #fff;
+  --bg-black: #1b1f23;
+  --bg-blue-light: #f1f8ff;
+  --bg-blue: #0366d6;
+  --bg-gray-dark: #24292e;
+  --bg-gray-light: #fafbfc;
+  --bg-gray: #f6f8fa;
+  --bg-green: #28a745;
+  --bg-green-light: #dcffe4;
+  --bg-orange: #d15704;
+  --bg-purple: #6f42c1;
+  --bg-purple-light: #f5f0ff;
+  --bg-pink: undefined;
+  --bg-red: #d73a49;
+  --bg-red-light: #ffdce0;
+  --bg-yellow: #ffd33d;
+  --bg-yellow-light: #fff5b1;
+  --bg-yellow-dark: #dbab09;
+  --text-black: #1b1f23;
+  --text-white: #fff;
+  --text-blue: #0366d6;
+  --text-gray-dark: #24292e;
+  --text-gray-light: #6a737d;
+  --text-gray: #586069;
+  --text-green: #28a745;
+  --text-orange: #a04100;
+  --text-orange-light: #e36209;
+  --text-purple: #6f42c1;
+  --text-pink: undefined;
+  --text-red: #cb2431;
+  --text-yellow: #b08800;
+
+  /* promotions: SCSS -> custom properties */
+  --border-black-fade: #{$border-black-fade};
+  --border-white-fade: #{$border-white-fade};
+  --border-gray-light: #{$border-gray-light};
+  --border-green-light: #{$border-green-light};
+  --border-red-light: #{$border-red-light};
+  --border-yellow: #{$border-yellow};
+  --border-color-button: #{$border-color-button};
+  --bg-black-fade: #{$bg-black-fade};
+  --border-white: #{$border-white};
+  --border-gray: #{$border-gray};
+  --border-gray-dark: #{$border-gray-dark};
+  --border-gray-darker: #{$border-gray-darker};
+  --border-blue: #{$border-blue};
+  --border-blue-light: #{$border-blue-light};
+  --border-green: #{$border-green};
+  --border-purple: #{$border-purple};
+  --border-red: #{$border-red};
+  --bg-white: #{$bg-white};
+  --bg-black: #{$bg-black};
+  --bg-blue-light: #{$bg-blue-light};
+  --bg-blue: #{$bg-blue};
+  --bg-gray-dark: #{$bg-gray-dark};
+  --bg-gray-light: #{$bg-gray-light};
+  --bg-gray: #{$bg-gray};
+  --bg-green: #{$bg-green};
+  --bg-green-light: #{$bg-green-light};
+  --bg-orange: #{$bg-orange};
+  --bg-purple: #{$bg-purple};
+  --bg-purple-light: #{$bg-purple-light};
+  --bg-pink: #{$bg-pink};
+  --bg-red: #{$bg-red};
+  --bg-red-light: #{$bg-red-light};
+  --bg-yellow: #{$bg-yellow};
+  --bg-yellow-light: #{$bg-yellow-light};
+  --bg-yellow-dark: #{$bg-yellow-dark};
+  --text-black: #{$text-black};
+  --text-white: #{$text-white};
+  --text-blue: #{$text-blue};
+  --text-gray-dark: #{$text-gray-dark};
+  --text-gray-light: #{$text-gray-light};
+  --text-gray: #{$text-gray};
+  --text-green: #{$text-green};
+  --text-orange: #{$text-orange};
+  --text-orange-light: #{$text-orange-light};
+  --text-purple: #{$text-purple};
+  --text-pink: #{$text-pink};
+  --text-red: #{$text-red};
+  --text-yellow: #{$text-yellow};
+
+  /* override global variables to use var() */
+  $border-black-fade: var(--border-black-fade) !global;
+  $border-white-fade: var(--border-white-fade) !global;
+  $border-gray-light: var(--border-gray-light) !global;
+  $border-green-light: var(--border-green-light) !global;
+  $border-red-light: var(--border-red-light) !global;
+  $border-yellow: var(--border-yellow) !global;
+  $border-color-button: var(--border-color-button) !global;
+  $bg-black-fade: var(--bg-black-fade) !global;
+  $border-white: var(--border-white) !global;
+  $border-gray: var(--border-gray) !global;
+  $border-gray-dark: var(--border-gray-dark) !global;
+  $border-gray-darker: var(--border-gray-darker) !global;
+  $border-blue: var(--border-blue) !global;
+  $border-blue-light: var(--border-blue-light) !global;
+  $border-green: var(--border-green) !global;
+  $border-purple: var(--border-purple) !global;
+  $border-red: var(--border-red) !global;
+  $bg-white: var(--bg-white) !global;
+  $bg-black: var(--bg-black) !global;
+  $bg-blue-light: var(--bg-blue-light) !global;
+  $bg-blue: var(--bg-blue) !global;
+  $bg-gray-dark: var(--bg-gray-dark) !global;
+  $bg-gray-light: var(--bg-gray-light) !global;
+  $bg-gray: var(--bg-gray) !global;
+  $bg-green: var(--bg-green) !global;
+  $bg-green-light: var(--bg-green-light) !global;
+  $bg-orange: var(--bg-orange) !global;
+  $bg-purple: var(--bg-purple) !global;
+  $bg-purple-light: var(--bg-purple-light) !global;
+  $bg-pink: var(--bg-pink) !global;
+  $bg-red: var(--bg-red) !global;
+  $bg-red-light: var(--bg-red-light) !global;
+  $bg-yellow: var(--bg-yellow) !global;
+  $bg-yellow-light: var(--bg-yellow-light) !global;
+  $bg-yellow-dark: var(--bg-yellow-dark) !global;
+  $text-black: var(--text-black) !global;
+  $text-white: var(--text-white) !global;
+  $text-blue: var(--text-blue) !global;
+  $text-gray-dark: var(--text-gray-dark) !global;
+  $text-gray-light: var(--text-gray-light) !global;
+  $text-gray: var(--text-gray) !global;
+  $text-green: var(--text-green) !global;
+  $text-orange: var(--text-orange) !global;
+  $text-orange-light: var(--text-orange-light) !global;
+  $text-purple: var(--text-purple) !global;
+  $text-pink: var(--text-pink) !global;
+  $text-red: var(--text-red) !global;
+  $text-yellow: var(--text-yellow) !global;
+}