Separates all custom properties into their own :root sections so they can be used standalone.

Author: kj

properties.mjs

@@ -5,10 +5,12 @@ export default function properties(state={}) {
   if (Object.keys(properties)) {
     output = /*css*/`
 /*** Custom Properties ***/
+:root {
   `
  output +=  Object.keys(properties).map(key => `--${key}:${properties[key]};/* ${key} */`).join('\n')
 
 output += `
+}
   `
   }
 

space-scale-properties.mjs

@@ -3,12 +3,16 @@ import { generateSpaceScaleProperties } from './lib/scales.mjs'
 export default function spaceScaleProperties({ config }) {
   const { spaceScale } = config
   let output = ''
-  
+
   if (spaceScale) {
     output = /*css*/`
 /*** Space Scale ***/
+:root {
 `
     output += generateSpaceScaleProperties(spaceScale)
+    output += `
+}
+  `
   }
 
   return output

theme-color.mjs

@@ -21,8 +21,10 @@ export default function themeColor({ config }) {
   --${name}-900: hsl(${hue}, ${saturation}%, ${Math.floor(luminance - 40)}%);
     `
   }
+
   return /*css*/`
 /*** Theme Colors ***/
+:root {
 ${Object.keys(theme).map(name => {
 if (name === 'light' || name === 'dark') {
   return `  --${name}: ${theme[name]};`
@@ -33,6 +35,7 @@ else {
 }
 }).join('\n')}
 ${Object.keys(color).map(name => `  --${name}: ${color[name]};`).join('\n')}
+}
 `
 
 }

theme.mjs

@@ -13,13 +13,10 @@ import spaceScaleProperties from './space-scale-properties.mjs'
 
 export default function theme(config) {
   return /*css*/`
-/*** Theme ***/
-:root {
-  ${themeColor({config})}
-  ${properties({config})}
-  ${typeScaleProperties({config})}
-  ${spaceScaleProperties({config})}
-}
+${themeColor({config})}
+${properties({config})}
+${typeScaleProperties({config})}
+${spaceScaleProperties({config})}
 ${reset()}
 ${typeface({config})}
 ${smoothing({config})}

type-scale-properties.mjs

@@ -3,12 +3,16 @@ import { generateTypeScaleProperties } from './lib/scales.mjs'
 export default function typeScaleProperties({ config }) {
   const { typeScale } = config
   let output = ''
-  
+
   if (typeScale) {
     output = /*css*/`
 /*** Type Scale ***/
+:root {
 `
     output += generateTypeScaleProperties(typeScale)
+    output += `
+}
+  `
   }
 
   return output