@primer/primitives 7.17.0-rc.60ab8d1a → 7.17.0-rc.6fa44402

package/build.js

@@ -0,0 +1,578 @@
+const glob = require('fast-glob')
+const StyleDictionary = require('style-dictionary')
+
+const {fileHeader, formattedVariables} = StyleDictionary.formatHelpers
+
+//-----
+// functions to be extracted
+// TODO: extract to a separate files
+
+const pathToKebabCase = token => token.path.join('-')
+
+const pathToDotNotation = token => token.path.join('.')
+
+const capitalize = string => string[0].toUpperCase() + string.slice(1)
+
+const pathToPascalCase = token => token.path.map(tokenPathItems => capitalize(tokenPathItems)).join('')
+
+// REGISTER THE CUSTOM TRANFORMS
+
+/**
+ * transform: scss variable names
+ * example: `$namespace-item-variant-property-modifier`
+ */
+StyleDictionary.registerTransform({
+  name: 'name/scss',
+  type: 'name',
+  transformer: pathToKebabCase,
+})
+
+/**
+ * transform: css variable names
+ * example: `--namespace-item-variant-property-modifier`
+ */
+StyleDictionary.registerTransform({
+  name: 'name/css',
+  type: 'name',
+  transformer: pathToKebabCase,
+})
+
+/**
+ * transform: js variable names
+ * example: `namespace.item.variant.property.modifier`
+ */
+StyleDictionary.registerTransform({
+  name: 'name/js',
+  type: 'name',
+  transformer: pathToDotNotation,
+})
+
+/**
+ * transform: js es6 variable names
+ * example: `NamespaceItemVariantPropertyModifier`
+ */
+StyleDictionary.registerTransform({
+  name: 'name/js/es6',
+  type: 'name',
+  transformer: pathToPascalCase,
+})
+
+// find values with px unit
+function isPx(value) {
+  return /[\d.]+px$/.test(value)
+}
+
+// transform: px to rem
+StyleDictionary.registerTransform({
+  name: 'pxToRem',
+  type: 'value',
+  transformer: token => {
+    if (isPx(token.value)) {
+      const baseFontSize = 16
+      const floatValue = parseFloat(token.value.replace('px', ''))
+
+      if (isNaN(floatValue)) {
+        return token.value
+      }
+
+      if (floatValue === 0) {
+        return '0'
+      }
+
+      if (token.name.includes('lineHeight')) {
+        return `${floatValue / baseFontSize}`
+      }
+
+      return `${floatValue / baseFontSize}rem`
+    }
+    return token.value
+  },
+})
+
+//-----
+
+// ts output
+StyleDictionary.registerTransform({
+  name: 'attribute/typescript',
+  type: 'attribute',
+  transformer: token => {
+    return {
+      typescript: {
+        // these transforms will need to match the ones you use for typescript
+        // or you can "chain" the transforms and use token.name and token.value
+        // like scss and less transforms do.
+        name: token.path.slice(1).join('.'),
+        value: token.value,
+      },
+    }
+  },
+})
+
+// css output
+StyleDictionary.registerTransform({
+  name: 'attribute/css',
+  type: 'attribute',
+  transformer: token => {
+    const tokenName = token.path.slice(1).join('-')
+    return {
+      css: {
+        name: `--${tokenName}`,
+        value: token.value,
+      },
+    }
+  },
+})
+
+// transform: composite typography to shorthands
+StyleDictionary.registerTransform({
+  name: 'typography/shorthand',
+  type: 'value',
+  transitive: true,
+  matcher: token => token.type === 'typography',
+  transformer: token => {
+    const {value} = token
+
+    // if lineHeight has value, include in shorthand
+    if (value.lineHeight) {
+      return `${value.fontWeight} ${value.fontSize}/${value.lineHeight} ${value.fontFamily}`
+    }
+
+    return `${value.fontWeight} ${value.fontSize} ${value.fontFamily}`
+  },
+})
+
+// REGISTER THE CUSTOM TRANFORM GROUPS
+
+StyleDictionary.registerTransformGroup({
+  name: 'css',
+  transforms: ['name/css', 'pxToRem', 'typography/shorthand'],
+})
+
+StyleDictionary.registerTransformGroup({
+  name: 'scss',
+  transforms: ['name/scss', 'pxToRem', 'typography/shorthand'],
+})
+
+// REGISTER A CUSTOM FORMAT
+
+// wrap mobile tokens in media query
+StyleDictionary.registerFormat({
+  name: 'css/touch-target-mobile',
+  formatter({dictionary, file, options}) {
+    const {outputReferences} = options
+    return `${fileHeader({file})}
+    @media (pointer: coarse) { :root {\n${formattedVariables({
+      format: 'css',
+      dictionary,
+      outputReferences,
+    })}\n}}\n`
+  },
+})
+
+// wrap desktop tokens in media query
+StyleDictionary.registerFormat({
+  name: 'css/touch-target-desktop',
+  formatter({dictionary, file, options}) {
+    const {outputReferences} = options
+    return `${fileHeader({file})}
+    @media (pointer: fine) { :root {\n${formattedVariables({
+      format: 'css',
+      dictionary,
+      outputReferences,
+    })}\n}}\n`
+  },
+})
+
+StyleDictionary.registerFormat({
+  name: 'custom/format/custom-media',
+  formatter({dictionary}) {
+    return dictionary.allProperties
+      .map(prop => {
+        const {value, name} = prop
+
+        return `@custom-media --${name}-viewport ${value};`
+      })
+      .join('\n')
+  },
+})
+
+// format docs
+StyleDictionary.registerFormat({
+  name: 'json/docs',
+  formatter({dictionary}) {
+    const groupedTokens = groupBy(dictionary.allProperties, 'filePath')
+
+    return JSON.stringify(groupedTokens, null, 2)
+  },
+})
+
+/**
+ * Replacement format for javascript/module
+ */
+StyleDictionary.registerFormat({
+  name: 'javascript/module-v2',
+  formatter({dictionary, file}) {
+    const recursiveleyFlattenDictionary = obj => {
+      const tree = {}
+      if (typeof obj !== 'object' || Array.isArray(obj)) {
+        return obj
+      }
+
+      if (obj.hasOwnProperty('value')) {
+        return obj.value
+      } else {
+        for (const name in obj) {
+          if (obj.hasOwnProperty(name)) {
+            tree[name] = recursiveleyFlattenDictionary(obj[name])
+          }
+        }
+      }
+      return tree
+    }
+
+    return `${fileHeader({file})}
+    
+module.exports = ${JSON.stringify(recursiveleyFlattenDictionary(dictionary.tokens), null, 2)}`
+  },
+})
+
+/**
+ * Replacement format for typescript/module-declarations
+ * Type schema corresponds to javascript/module-v2 format
+ */
+StyleDictionary.registerFormat({
+  name: 'typescript/module-declarations-v2',
+  formatter({dictionary, options, file}) {
+    const {moduleName = `tokens`} = options
+
+    const getType = value => {
+      switch (typeof value) {
+        case 'string':
+          return 'string'
+        case 'number':
+          return 'number'
+        default:
+          return 'any'
+      }
+    }
+
+    const recursiveTypeGeneration = obj => {
+      const tree = {}
+      const shortHandSizes = ['large', 'medium', 'small']
+      if (typeof obj !== 'object' || Array.isArray(obj)) {
+        return obj
+      }
+
+      if (obj.hasOwnProperty('value') && typeof obj.value === 'string') {
+        return getType(obj.value)
+      } else {
+        for (const name in obj) {
+          if ((obj.hasOwnProperty(name) && obj.name === 'shorthand') || shortHandSizes.includes(obj.name)) {
+            for (const shorthandKey in obj.value) {
+              tree[shorthandKey] = getType(obj.value[shorthandKey])
+            }
+            return tree
+          } else if (obj.hasOwnProperty(name)) {
+            tree[name] = recursiveTypeGeneration(obj[name])
+          }
+        }
+      }
+      return tree
+    }
+
+    const output = `${fileHeader({file})}
+    
+declare const ${moduleName}: ${JSON.stringify(recursiveTypeGeneration(dictionary.tokens), null, 2)}
+export default ${moduleName};`
+
+    return output
+      .replace(/"any"/g, 'any')
+      .replace(/"string"/g, 'string')
+      .replace(/"number"/g, 'number')
+  },
+})
+
+/**
+ * @name groupBy
+ * @description Equivalent to lodash _.groupBy, to avoid creating another package dependency for users
+ * @param {Array|Object} The collection to iterate over.
+ * @param {Function} The iteratee to transform keys.
+ * @returns {Object} Returns the composed aggregate object.
+ */
+function groupBy(collection, iteratee = x => x) {
+  const current = typeof iteratee === 'function' ? iteratee : ({[iteratee]: prop}) => prop
+
+  const array = Array.isArray(collection) ? collection : Object.values(collection)
+
+  return array.reduce((acc, item) => {
+    const value = current(item)
+
+    acc[value] = acc[value] || []
+
+    acc[value].push(item)
+
+    return acc
+  }, {})
+}
+
+/**
+ * @name build
+ * @description
+ *   Used to generate design tokens programmatically using StyleDictionary
+ *   Called internally to build primitives and exported for self-serve use
+ *
+ * @param {Object} options
+ * @param {string} options.source glob or file path to a JSON object of tokens
+ * @param {string} options.outputPath location to write the output files
+ * @param {string} options.namespace a custom namespace to use for the output files
+ * @param {Platform} options.platforms add custom platform configurations to style-dictionary
+ * @example
+ *  buildPrimitives({
+ *   source: [`src/colors.json`],
+ *   outputPath: 'dist',
+ *   namespace: 'primer',
+ *   platforms: {...}
+ *  })
+ */
+function buildPrimitives(
+  {source, outputPath = 'tokens-v2-private', include, platforms, namespace = 'primer'},
+  _StyleDictionary = StyleDictionary,
+) {
+  // eslint-disable-next-line no-console
+  console.log('Build started...')
+  // eslint-disable-next-line no-console
+  console.log('\n==============================================')
+
+  const customParseConfig = {
+    parsers: [
+      {
+        pattern: /\.json$/,
+        parse: ({contents, filePath}) => {
+          try {
+            let mutableContent = JSON.stringify(contents)
+
+            if (filePath.includes('/functional/')) {
+              mutableContent = mutableContent.replace(/<namespace>/g, namespace)
+            }
+
+            const parsed = JSON.parse(mutableContent)
+
+            return JSON.parse(parsed)
+          } catch (error) {
+            // eslint-disable-next-line no-console
+            console.log(error)
+          }
+        },
+      },
+    ],
+  }
+
+  const getConfig = files => {
+    const defaultPlatformConfig = {
+      css: {
+        buildPath: `${outputPath}/css/`,
+        transformGroup: 'css',
+        // map the array of token file paths to style dictionary output files
+        files: files.map(filePath => {
+          return {
+            format: `css/variables`,
+            destination: filePath.replace(`.json`, `.css`),
+            filter: token => token.filePath === filePath,
+            options: {
+              outputReferences: true,
+            },
+          }
+        }),
+      },
+      cssViewport: {
+        buildPath: `${outputPath}/css/tokens/functional/size/`,
+        transformGroup: 'css',
+        files: [
+          {
+            filter: token => token.filePath.includes('viewport'),
+            format: 'custom/format/custom-media',
+            destination: 'viewport.css',
+          },
+        ],
+      },
+      scss: {
+        buildPath: `${outputPath}/scss/`,
+        transformGroup: 'scss',
+        // map the array of token file paths to style dictionary output files
+        files: files.map(filePath => {
+          return {
+            format: `scss/variables`,
+            destination: filePath.replace(`.json`, `.scss`),
+            filter: token => token.filePath === filePath,
+            options: {
+              outputReferences: true,
+            },
+          }
+        }),
+      },
+      js: {
+        buildPath: `${outputPath}/js/`,
+        transforms: ['name/js/es6', 'pxToRem'],
+        // map the array of token file paths to style dictionary output files
+        files: files.map(filePath => {
+          return {
+            format: `javascript/es6`,
+            destination: filePath.replace(`.json`, `.js`),
+            filter: token => token.filePath === filePath,
+          }
+        }),
+      },
+      jsModule: {
+        buildPath: `${outputPath}/js/module/`,
+        transforms: ['pxToRem'],
+        // map the array of token file paths to style dictionary output files
+        files: files.map(filePath => {
+          return {
+            format: `javascript/module`,
+            destination: filePath.replace(`.json`, `.js`),
+            filter: token => token.filePath === filePath,
+          }
+        }),
+      },
+      tsTypes: {
+        buildPath: `${outputPath}/ts/`,
+        transforms: ['pxToRem'],
+        // map the array of token file paths to style dictionary output files
+        files: files.map(filePath => {
+          return {
+            format: `typescript/module-declarations-v2`,
+            destination: filePath.replace(`.json`, `.d.ts`),
+            filter: token => token.filePath === filePath,
+          }
+        }),
+      },
+      ts: {
+        buildPath: `${outputPath}/ts/`,
+        transforms: ['pxToRem'],
+        // map the array of token file paths to style dictionary output files
+        files: files.map(filePath => {
+          return {
+            format: `javascript/module-v2`,
+            destination: filePath.replace(`.json`, `.js`),
+            filter: token => token.filePath === filePath,
+          }
+        }),
+      },
+    }
+
+    const config = {
+      ...{include: include ? [include] : undefined},
+      source: files,
+      ...customParseConfig,
+      platforms: platforms ? platforms : defaultPlatformConfig,
+    }
+    return config
+  }
+
+  //build all tokens
+  _StyleDictionary
+    .extend({
+      ...getConfig(glob.sync([...source])),
+    })
+    .buildAllPlatforms()
+}
+
+/**
+ * @name init
+ * @description
+ *   Triggers the build for @primer/primitive default tokens
+ *   from an npm script. Internal use only. Use `build` for self-serve.
+ * @private
+ */
+function _init() {
+  const outputPath = 'tokens-v2-private'
+  //build all tokens
+  buildPrimitives({
+    source: [`tokens/**/*.json`, `!tokens/**/size-*.json`, `!tokens/**/color/*.json`, `!tokens/**/shadow/*.json`],
+    outputPath,
+  })
+
+  //build size fine
+  buildPrimitives({
+    source: [`tokens/functional/size/size-fine.json`, `tokens/base/size/size.json`],
+    outputPath,
+  })
+
+  //build size coarse
+  buildPrimitives({
+    source: [`tokens/functional/size/size-coarse.json`, `tokens/base/size/size.json`],
+    outputPath,
+  })
+
+  buildPrimitives({
+    source: [`tokens/base/size/size.json`, `tokens/functional/size/size-fine.json`],
+    outputPath,
+    platforms: {
+      css: {
+        buildPath: `${outputPath}/css/`,
+        transformGroup: 'css',
+        files: [
+          {
+            destination: `tokens/functional/size/size-fine.css`,
+            format: `css/touch-target-desktop`,
+            filter: token => token.filePath.includes('fine'),
+            options: {
+              outputReferences: true,
+            },
+          },
+        ],
+      },
+    },
+  })
+
+  buildPrimitives({
+    source: [`tokens/base/size/size.json`, `tokens/functional/size/size-coarse.json`],
+    platforms: {
+      css: {
+        buildPath: `${outputPath}/css/`,
+        transformGroup: 'css',
+        files: [
+          {
+            destination: `tokens/functional/size/size-coarse.css`,
+            format: `css/touch-target-mobile`,
+            filter: token => token.filePath.includes('coarse'),
+            options: {
+              outputReferences: true,
+            },
+          },
+        ],
+      },
+    },
+  })
+
+  //build docs data
+  buildPrimitives({
+    source: [`tokens/**/*.json`, `!tokens/**/color/*.json`, `!tokens/**/shadow/*.json`],
+    outputPath,
+    platforms: {
+      docs: {
+        buildPath: `${outputPath}/docs/`,
+        transformGroup: 'css',
+        files: [
+          {
+            format: 'json/docs',
+            destination: 'docValues.json',
+            options: {
+              outputReferences: false,
+            },
+          },
+        ],
+      },
+    },
+  })
+}
+
+module.exports = {
+  buildPrimitives,
+  _init,
+  StyleDictionary,
+  pathToKebabCase,
+  pathToDotNotation,
+  capitalize,
+  pathToPascalCase,
+}

package/dist/css/functional/themes/dark-colorblind.css

@@ -132,11 +132,6 @@
   --display-indigo-fgColor: #9899ec;
   --display-indigo-borderColor-muted: #25215f;
   --display-indigo-borderColor-emphasis: #7070e1;
-  --display-pink-bgColor-muted: #2d1524;
-  --display-pink-bgColor-emphasis: #d34591;
-  --display-pink-fgColor: #e57bb2;
-  --display-pink-borderColor-muted: #451c35;
-  --display-pink-borderColor-emphasis: #d34591;
   --avatar-bgColor: #ffffff1a;
   --avatar-borderColor: #ffffff26;
   --avatar-shadow: 0px 0px 0px 2px #0d1117;
@@ -675,11 +670,6 @@
     --display-indigo-fgColor: #9899ec;
     --display-indigo-borderColor-muted: #25215f;
     --display-indigo-borderColor-emphasis: #7070e1;
-    --display-pink-bgColor-muted: #2d1524;
-    --display-pink-bgColor-emphasis: #d34591;
-    --display-pink-fgColor: #e57bb2;
-    --display-pink-borderColor-muted: #451c35;
-    --display-pink-borderColor-emphasis: #d34591;
     --avatar-bgColor: #ffffff1a;
     --avatar-borderColor: #ffffff26;
     --avatar-shadow: 0px 0px 0px 2px #0d1117;

package/dist/css/functional/themes/dark-dimmed.css

@@ -132,11 +132,6 @@
   --display-indigo-fgColor: #9899ec;
   --display-indigo-borderColor-muted: #25215f;
   --display-indigo-borderColor-emphasis: #7070e1;
-  --display-pink-bgColor-muted: #2d1524;
-  --display-pink-bgColor-emphasis: #d34591;
-  --display-pink-fgColor: #e57bb2;
-  --display-pink-borderColor-muted: #451c35;
-  --display-pink-borderColor-emphasis: #d34591;
   --avatar-bgColor: #cdd9e51a;
   --avatar-borderColor: #cdd9e526;
   --avatar-shadow: 0px 0px 0px 2px #22272e;
@@ -675,11 +670,6 @@
     --display-indigo-fgColor: #9899ec;
     --display-indigo-borderColor-muted: #25215f;
     --display-indigo-borderColor-emphasis: #7070e1;
-    --display-pink-bgColor-muted: #2d1524;
-    --display-pink-bgColor-emphasis: #d34591;
-    --display-pink-fgColor: #e57bb2;
-    --display-pink-borderColor-muted: #451c35;
-    --display-pink-borderColor-emphasis: #d34591;
     --avatar-bgColor: #cdd9e51a;
     --avatar-borderColor: #cdd9e526;
     --avatar-shadow: 0px 0px 0px 2px #22272e;

package/dist/css/functional/themes/dark-high-contrast.css

@@ -132,11 +132,6 @@
   --display-indigo-fgColor: #9899ec;
   --display-indigo-borderColor-muted: #25215f;
   --display-indigo-borderColor-emphasis: #7070e1;
-  --display-pink-bgColor-muted: #2d1524;
-  --display-pink-bgColor-emphasis: #d34591;
-  --display-pink-fgColor: #e57bb2;
-  --display-pink-borderColor-muted: #451c35;
-  --display-pink-borderColor-emphasis: #d34591;
   --avatar-bgColor: #ffffff1a;
   --avatar-borderColor: #ffffffe6;
   --avatar-shadow: 0px 0px 0px 2px #0a0c10;
@@ -675,11 +670,6 @@
     --display-indigo-fgColor: #9899ec;
     --display-indigo-borderColor-muted: #25215f;
     --display-indigo-borderColor-emphasis: #7070e1;
-    --display-pink-bgColor-muted: #2d1524;
-    --display-pink-bgColor-emphasis: #d34591;
-    --display-pink-fgColor: #e57bb2;
-    --display-pink-borderColor-muted: #451c35;
-    --display-pink-borderColor-emphasis: #d34591;
     --avatar-bgColor: #ffffff1a;
     --avatar-borderColor: #ffffffe6;
     --avatar-shadow: 0px 0px 0px 2px #0a0c10;

package/dist/css/functional/themes/dark-tritanopia.css

@@ -132,11 +132,6 @@
   --display-indigo-fgColor: #9899ec;
   --display-indigo-borderColor-muted: #25215f;
   --display-indigo-borderColor-emphasis: #7070e1;
-  --display-pink-bgColor-muted: #2d1524;
-  --display-pink-bgColor-emphasis: #d34591;
-  --display-pink-fgColor: #e57bb2;
-  --display-pink-borderColor-muted: #451c35;
-  --display-pink-borderColor-emphasis: #d34591;
   --avatar-bgColor: #ffffff1a;
   --avatar-borderColor: #ffffff26;
   --avatar-shadow: 0px 0px 0px 2px #0d1117;
@@ -675,11 +670,6 @@
     --display-indigo-fgColor: #9899ec;
     --display-indigo-borderColor-muted: #25215f;
     --display-indigo-borderColor-emphasis: #7070e1;
-    --display-pink-bgColor-muted: #2d1524;
-    --display-pink-bgColor-emphasis: #d34591;
-    --display-pink-fgColor: #e57bb2;
-    --display-pink-borderColor-muted: #451c35;
-    --display-pink-borderColor-emphasis: #d34591;
     --avatar-bgColor: #ffffff1a;
     --avatar-borderColor: #ffffff26;
     --avatar-shadow: 0px 0px 0px 2px #0d1117;

package/dist/css/functional/themes/dark.css

@@ -132,11 +132,6 @@
   --display-indigo-fgColor: #9899ec;
   --display-indigo-borderColor-muted: #25215f;
   --display-indigo-borderColor-emphasis: #7070e1;
-  --display-pink-bgColor-muted: #2d1524;
-  --display-pink-bgColor-emphasis: #d34591;
-  --display-pink-fgColor: #e57bb2;
-  --display-pink-borderColor-muted: #451c35;
-  --display-pink-borderColor-emphasis: #d34591;
   --avatar-bgColor: #ffffff1a;
   --avatar-borderColor: #ffffff26;
   --avatar-shadow: 0px 0px 0px 2px #0d1117;
@@ -675,11 +670,6 @@
     --display-indigo-fgColor: #9899ec;
     --display-indigo-borderColor-muted: #25215f;
     --display-indigo-borderColor-emphasis: #7070e1;
-    --display-pink-bgColor-muted: #2d1524;
-    --display-pink-bgColor-emphasis: #d34591;
-    --display-pink-fgColor: #e57bb2;
-    --display-pink-borderColor-muted: #451c35;
-    --display-pink-borderColor-emphasis: #d34591;
     --avatar-bgColor: #ffffff1a;
     --avatar-borderColor: #ffffff26;
     --avatar-shadow: 0px 0px 0px 2px #0d1117;