Merge branch 'main' into rezrah/backfill-esm-tokens-control

Author: rezrah

.changeset/brand-functional-token-maps-export.md

@@ -0,0 +1,5 @@
+---
+'@primer/brand-primitives': patch
+---
+
+Added JSON-based typography and size map exports at `@primer/brand-primitives/lib/design-tokens/json/typography.json` and `@primer/brand-primitives/lib/design-tokens/json/size.json`.

.changeset/react-brand-functional-token-maps-export.md

@@ -0,0 +1,5 @@
+---
+'@primer/react-brand': patch
+---
+
+Added JSON-based typography and size map exports at `@primer/react-brand/lib/design-tokens/json/typography.json` and `@primer/react-brand/lib/design-tokens/json/size.json`.

packages/design-tokens/scripts/build-tokens.js

@@ -6,6 +6,7 @@ const mediaQueryFormat = require('../src/formats/responsive-media-query')
 const colorModeFormat = require('../src/formats/color-mode-attributes')
 const oneDimensionalFormat = require('../src/formats/json-one-dimensional')
 const isColorValue = require('../src/filters/isColorValue')
+const isSizeValue = require('../src/filters/isSizeValue')
 
 const lightJson = require('../src/tokens/base/colors/light')
 const darkJson = require('../src/tokens/base/colors/dark')
@@ -339,6 +340,57 @@ const darkJson = require('../src/tokens/base/colors/dark')
     },
   })
 
+  /**
+   * Build a flat JSON map of global typography tokens.
+   */
+  buildPrimitives({
+    source: [`tokens/base/typography/typography.json`, `tokens/functional/typography/typography-responsive.json`],
+    namespace,
+    platforms: {
+      jsonTypography: {
+        prefix: namespace,
+        addPrefix: token => token.isSource && !token.filePath.replace(/\\/g, '/').includes('/base/typography/'),
+        buildPath: `${outputPath}/json/`,
+        transformGroup: 'css',
+        files: [
+          {
+            destination: `typography.json`,
+            format: `json/one-dimensional`,
+            filter: token => token.isSource,
+          },
+        ],
+      },
+    },
+  })
+
+  /**
+   * Build a flat JSON map of global size tokens.
+   */
+  buildPrimitives({
+    source: [
+      `tokens/base/size/size.json`,
+      `tokens/functional/size/size.json`,
+      `tokens/functional/size/breakpoints.json`,
+      `tokens/functional/size/border.json`,
+    ],
+    namespace,
+    platforms: {
+      jsonSize: {
+        prefix: namespace,
+        addPrefix: token => token.isSource && !token.filePath.replace(/\\/g, '/').includes('/base/size/'),
+        buildPath: `${outputPath}/json/`,
+        transformGroup: 'css',
+        files: [
+          {
+            destination: `size.json`,
+            format: `json/one-dimensional`,
+            filter: token => token.isSource && isSizeValue(token.value),
+          },
+        ],
+      },
+    },
+  })
+
   /**
    * Step 4:
    * Clean up the temporary directory

packages/design-tokens/src/filters/isSizeValue.js

@@ -0,0 +1,30 @@
+/**
+ * @description Check whether a token value can be used as a CSS size.
+ *
+ * @param {string} value the token's resolved value
+ * @returns {boolean} `true` when the value is size-shaped
+ */
+const SIZE_FUNCTION_PREFIXES = ['max(', 'min(', 'clamp(', 'calc(']
+const LENGTH_VALUE = /^-?(\d+\.?\d*|\.\d+)(px|rem|em|vh|vw|vmin|vmax|ch)$/
+
+// TODO: Use isDimension from @primer/primitives once all size tokens include $type metadata.
+const isSizeValue = value => {
+  if (typeof value !== 'string') return false
+
+  const normalized = value.trim().toLowerCase()
+
+  if (normalized === '') return false
+
+  if (normalized.startsWith('(')) return false
+  if (normalized.startsWith('inset')) return false
+  if (normalized.includes('cubic-bezier')) return false
+  if (/^-?(\d+\.?\d*|\.\d+)(ms|s)$/.test(normalized)) return false
+
+  if (normalized.startsWith('var(')) return false
+
+  if (SIZE_FUNCTION_PREFIXES.some(prefix => normalized.startsWith(prefix))) return true
+
+  return LENGTH_VALUE.test(normalized)
+}
+
+module.exports = isSizeValue

packages/design-tokens/src/filters/isSizeValue.test.js

@@ -0,0 +1,68 @@
+const {describe, it, expect} = require('@jest/globals')
+const isSizeValue = require('./isSizeValue')
+
+describe('isSizeValue', () => {
+  it('keeps bare length values', () => {
+    expect(isSizeValue('2px')).toBe(true)
+    expect(isSizeValue('0.125rem')).toBe(true)
+    expect(isSizeValue('624.9375rem')).toBe(true)
+    expect(isSizeValue('-0.035em')).toBe(true)
+    expect(isSizeValue('20rem')).toBe(true)
+  })
+
+  it('keeps viewport length units', () => {
+    expect(isSizeValue('100vh')).toBe(true)
+    expect(isSizeValue('50vw')).toBe(true)
+    expect(isSizeValue('2ch')).toBe(true)
+  })
+
+  it('keeps math functions', () => {
+    expect(isSizeValue('max(1px, 0.0625rem)')).toBe(true)
+    expect(isSizeValue('min(2px, 0.125rem)')).toBe(true)
+    expect(isSizeValue('clamp(1rem, 2vw, 3rem)')).toBe(true)
+    expect(isSizeValue('calc(48rem - 0.02px)')).toBe(true)
+  })
+
+  it('excludes unresolved var() references', () => {
+    expect(isSizeValue('var(--base-size-16)')).toBe(false)
+    expect(isSizeValue('var(--brand-borderWidth-thin)')).toBe(false)
+    expect(isSizeValue('var(--brand-animation-easing-glide)')).toBe(false)
+    expect(isSizeValue('var(--brand-animation-duration-default)')).toBe(false)
+  })
+
+  it('excludes color values', () => {
+    expect(isSizeValue('#000000')).toBe(false)
+    expect(isSizeValue('rgb(0, 0, 0)')).toBe(false)
+    expect(isSizeValue('var(--brand-color-text-default)')).toBe(false)
+  })
+
+  it('excludes time values', () => {
+    expect(isSizeValue('80ms')).toBe(false)
+    expect(isSizeValue('0.6s')).toBe(false)
+  })
+
+  it('excludes easing functions', () => {
+    expect(isSizeValue('cubic-bezier(0.16, 1, 0.3, 1)')).toBe(false)
+  })
+
+  it('excludes inset composites', () => {
+    expect(isSizeValue('inset 0 0 0 var(--brand-borderWidth-thin)')).toBe(false)
+  })
+
+  it('excludes media-query ranges', () => {
+    expect(isSizeValue('(max-width: calc(48rem - 0.02px))')).toBe(false)
+    expect(isSizeValue('(orientation: portrait)')).toBe(false)
+  })
+
+  it('excludes unitless and keyword values', () => {
+    expect(isSizeValue('0')).toBe(false)
+    expect(isSizeValue('1.5')).toBe(false)
+    expect(isSizeValue('none')).toBe(false)
+  })
+
+  it('excludes non-string values', () => {
+    expect(isSizeValue(undefined)).toBe(false)
+    expect(isSizeValue(null)).toBe(false)
+    expect(isSizeValue(4)).toBe(false)
+  })
+})