@primer/primitives 8.0.0-rc.eecd078a → 8.1.0-rc.313f1fc7

package/dist/css/functional/size/size-coarse.css

@@ -1,7 +0,0 @@
-@media (pointer: coarse) {
-  :root {
-    --control-minTarget-auto: 2.75rem;
-    --controlStack-small-gap-auto: 1rem;
-    --controlStack-medium-gap-auto: 0.75rem;
-  }
-}

package/dist/css/functional/size/size-fine.css

@@ -1,7 +0,0 @@
-@media (pointer: fine) {
-  :root {
-    --control-minTarget-auto: 1rem;
-    --controlStack-small-gap-auto: 0.5rem;
-    --controlStack-medium-gap-auto: 0.5rem;
-  }
-}

package/dist/css/functional/typography/typography.css

@@ -22,8 +22,8 @@
   --text-display-size: 2.5rem;
   --text-display-lineBoxHeight: 1.4;
   --fontStack-monospace: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
-  --fontStack-sansSerif: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
-  --fontStack-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  --fontStack-sansSerif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+  --fontStack-system: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
   --text-codeInline-weight: var(--base-text-weight-normal);
   --text-codeBlock-weight: var(--base-text-weight-normal);
   --text-caption-weight: var(--base-text-weight-normal);
@@ -34,14 +34,14 @@
   --text-title-weight-large: var(--base-text-weight-semibold);
   --text-display-weight: var(--base-text-weight-medium);
   --text-codeInline-shorthand: var(--text-codeInline-weight) var(--text-codeInline-size) var(--fontStack-monospace);
-  --text-codeBlock-shorthand: var(--text-codeBlock-weight) var(--text-codeBlock-size)/var(--text-codeBlock-lineHeight) var(--fontStack-monospace);
-  --text-caption-shorthand: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-lineHeight) var(--fontStack-sansSerif);
-  --text-body-shorthand-small: var(--text-body-weight) var(--text-body-size-small)/var(--text-body-lineHeight-small) var(--fontStack-sansSerif);
-  --text-body-shorthand-medium: var(--text-body-weight) var(--text-body-size-medium)/var(--text-body-lineHeight-medium) var(--fontStack-sansSerif);
-  --text-body-shorthand-large: var(--text-body-weight) var(--text-body-size-large)/var(--text-body-lineHeight-large) var(--fontStack-sansSerif);
-  --text-subtitle-shorthand: var(--text-subtitle-weight) var(--text-subtitle-size)/var(--text-subtitle-lineHeight) var(--fontStack-sansSerif);
-  --text-title-shorthand-small: var(--text-title-weight-small) var(--text-title-size-small)/var(--text-title-lineHeight-small) var(--fontStack-sansSerif);
-  --text-title-shorthand-medium: var(--text-title-weight-medium) var(--text-title-size-medium)/var(--text-title-lineHeight-medium) var(--fontStack-sansSerif);
-  --text-title-shorthand-large: var(--text-title-weight-large) var(--text-title-size-large)/var(--text-title-lineHeight-large) var(--fontStack-sansSerif);
-  --text-display-shorthand: var(--text-display-weight) var(--text-display-size)/var(--text-display-lineHeight) var(--fontStack-sansSerif);
+  --text-codeBlock-shorthand: var(--text-codeBlock-weight) var(--text-codeBlock-size) / var(--text-codeBlock-lineHeight) var(--fontStack-monospace);
+  --text-caption-shorthand: var(--text-caption-weight) var(--text-caption-size) / var(--text-caption-lineHeight) var(--fontStack-sansSerif);
+  --text-body-shorthand-small: var(--text-body-weight) var(--text-body-size-small) / var(--text-body-lineHeight-small) var(--fontStack-sansSerif);
+  --text-body-shorthand-medium: var(--text-body-weight) var(--text-body-size-medium) / var(--text-body-lineHeight-medium) var(--fontStack-sansSerif);
+  --text-body-shorthand-large: var(--text-body-weight) var(--text-body-size-large) / var(--text-body-lineHeight-large) var(--fontStack-sansSerif);
+  --text-subtitle-shorthand: var(--text-subtitle-weight) var(--text-subtitle-size) / var(--text-subtitle-lineHeight) var(--fontStack-sansSerif);
+  --text-title-shorthand-small: var(--text-title-weight-small) var(--text-title-size-small) / var(--text-title-lineHeight-small) var(--fontStack-sansSerif);
+  --text-title-shorthand-medium: var(--text-title-weight-medium) var(--text-title-size-medium) / var(--text-title-lineHeight-medium) var(--fontStack-sansSerif);
+  --text-title-shorthand-large: var(--text-title-weight-large) var(--text-title-size-large) / var(--text-title-lineHeight-large) var(--fontStack-sansSerif);
+  --text-display-shorthand: var(--text-display-weight) var(--text-display-size) / var(--text-display-lineHeight) var(--fontStack-sansSerif);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/primitives",
-  "version": "8.0.0-rc.eecd078a",
+  "version": "8.1.0-rc.313f1fc7",
   "description": "Typography, spacing, and color primitives for Primer design system",
   "files": [
     "dist",
@@ -23,7 +23,8 @@
   },
   "homepage": "https://github.com/primer/primitives#readme",
   "scripts": {
-    "build:next": "npm run build:v8 && npm run build:fallbacks && npm run build:figma",
+    "build": "npm run build:v8 && npm run build:fallbacks && npm run build:figma",
+    "build:next": "echo '\\033[31m 🛑 Use npm run build instead of npm run build:next\\033[0m'",
     "build:v8": "ts-node ./scripts/buildTokens.ts",
     "build:fallbacks": "ts-node ./scripts/buildFallbacks.ts",
     "build:figma": "ts-node scripts/buildFigma.ts",
@@ -36,11 +37,9 @@
     "lint:fix": "eslint '**/*.{js,ts,tsx,md,mdx}' --fix --max-warnings=0 --config .eslintrc.js",
     "lint:tokens": "ts-node ./scripts/validateTokenJson.ts",
     "prebuild": "rm -rf dist",
-    "prebuild:next": "rm -rf dist",
-    "prepack": "npm run build:next",
-    "prepare": "husky",
+    "prepack": "npm run build",
     "release": "changeset publish",
-    "start:storybook": "npm run build:next && cd docs/storybook && npm run storybook",
+    "start:storybook": "npm run build && cd docs/storybook && npm run storybook",
     "test": "jest --verbose --coverage"
   },
   "prettier": "@github/prettier-config",
@@ -69,7 +68,6 @@
     "eslint-plugin-react": "^7.29.4",
     "eslint-plugin-react-hooks": "^4.4.0",
     "eslint-plugin-storybook": "^0.6.15",
-    "husky": "^9.0.11",
     "jest": "^29.6.1",
     "json5": "^2.2.1",
     "markdown-table-ts": "^1.0.3",

package/src/PrimerStyleDictionary.ts

@@ -30,12 +30,10 @@ import {
   javascriptEsm,
   typescriptExportDefinition,
   jsonNestedPrefixed,
-  cssThemed,
   cssCustomMedia,
   jsonOneDimensional,
   jsonPostCssFallback,
-  cssWrapMediaQuery,
-  cssVariables,
+  cssAdvanced,
   jsonFigma,
 } from './formats'
 
@@ -50,8 +48,8 @@ StyleDictionary.registerParser(w3cJsonParser)
  *
  */
 StyleDictionary.registerFormat({
-  name: 'css/themed',
-  formatter: cssThemed,
+  name: 'css/advanced',
+  formatter: cssAdvanced,
 })
 
 StyleDictionary.registerFormat({
@@ -59,16 +57,6 @@ StyleDictionary.registerFormat({
   formatter: cssCustomMedia,
 })
 
-StyleDictionary.registerFormat({
-  name: 'css/wrapMediaQuery',
-  formatter: cssWrapMediaQuery,
-})
-
-StyleDictionary.registerFormat({
-  name: 'css/variables',
-  formatter: cssVariables,
-})
-
 StyleDictionary.registerFormat({
   name: 'javascript/esm',
   formatter: javascriptEsm,

package/src/formats/cssAdvanced.ts

@@ -0,0 +1,99 @@
+import type {TransformedToken} from 'style-dictionary'
+import StyleDictionary from 'style-dictionary'
+import type {FormatterArguments} from 'style-dictionary/types/Format'
+import {format} from 'prettier'
+import type {LineFormatting} from 'style-dictionary/types/FormatHelpers'
+const {fileHeader, formattedVariables} = StyleDictionary.formatHelpers
+
+const wrapWithSelector = (css: string, selector: string | false): string => {
+  // return without selector
+  if (selector === false || selector.trim().length === 0) return css
+  // return with selector
+  return `${selector} { ${css} }`
+}
+
+export const cssAdvanced: StyleDictionary.Formatter = ({
+  dictionary: originalDictionary,
+  options = {
+    queries: [],
+  },
+  file,
+  platform,
+}: FormatterArguments): string => {
+  // get options
+  const {outputReferences, descriptions} = options
+  // selector
+  const selector = file.options?.selector !== undefined ? file.options.selector : ':root'
+  // query extension property
+  const queryExtProp = file.options?.queryExtensionProperty || 'mediaQuery'
+  // get queries from file options
+  const queries = file.options?.queries || [
+    {
+      query: undefined,
+      matcher: () => true,
+    },
+  ]
+  // set formatting
+  const formatting: LineFormatting = {
+    commentStyle: descriptions ? 'long' : 'none',
+  }
+  // clone dictionary
+  const dictionary = {...originalDictionary}
+  // add prefix to tokens
+  if (platform.prefix) {
+    dictionary.allTokens = dictionary.allTokens.map(
+      token =>
+        ({
+          ...token,
+          name: `${platform.prefix}-${token.name}`,
+          path: [platform.prefix, ...token.path],
+        } as TransformedToken),
+    )
+  }
+  // get queries from tokens
+  for (const designToken of dictionary.allTokens) {
+    const query = designToken.$extensions?.[queryExtProp]
+    // early abort if query does not exist on token
+    if (!query) continue
+    // if query exists already from other token
+    const currentQueryIndex = queries.findIndex((q: {query: string; matcher: () => boolean}) => q.query === query)
+
+    // if query exists
+    if (currentQueryIndex > -1) {
+      queries[currentQueryIndex] = {
+        ...queries[currentQueryIndex],
+        matcher: (token: TransformedToken) =>
+          queries[currentQueryIndex].matcher(token) ||
+          token.$extensions[queryExtProp] === queries[currentQueryIndex].query,
+      }
+    }
+    // if query does not exist
+    else {
+      queries.push({
+        query,
+        matcher: (token: TransformedToken) => token.$extensions?.[queryExtProp] === query,
+      })
+    }
+  }
+  // add file header
+  const output = [fileHeader({file})]
+  // add single theme css
+  for (const query of queries) {
+    const {query: queryString, matcher} = query
+    // filter tokens to only include the ones that pass the matcher
+    const filteredDictionary = {
+      ...dictionary,
+      allTokens: dictionary.allTokens.filter(matcher || (() => true)),
+    }
+    // early abort if no matches
+    if (!filteredDictionary.allTokens.length) continue
+    // add tokens into root
+    const css = formattedVariables({format: 'css', dictionary: filteredDictionary, outputReferences, formatting})
+    // wrap css
+    const cssWithSelector = wrapWithSelector(css, query.selector !== undefined ? query.selector : selector)
+    // add css with or without query
+    output.push(queryString ? `${queryString} { ${cssWithSelector} }` : cssWithSelector)
+  }
+  // return prettified
+  return format(output.join('\n'), {parser: 'css', printWidth: 500})
+}

package/src/formats/index.ts

@@ -1,7 +1,5 @@
-export {cssThemed} from './cssThemed'
 export {cssCustomMedia} from './cssCustomMedia'
-export {cssWrapMediaQuery} from './cssWrapMediaQuery'
-export {cssVariables} from './cssVariables'
+export {cssAdvanced} from './cssAdvanced'
 export {jsonFigma} from './jsonFigma'
 export {javascriptCommonJs} from './javascriptCommonJs'
 export {javascriptEsm} from './javascriptEsm'

package/src/platforms/css.ts

@@ -1,23 +1,27 @@
 import {isFromFile, isSource} from '../filters'
 import type StyleDictionary from 'style-dictionary'
 import type {PlatformInitializer} from '../types/PlatformInitializer'
+import type {TransformedToken} from 'style-dictionary'
 
-const getCssSelectors = (outputFile: string): {selector: string; selectorLight: string; selectorDark: string} => {
+const getCssSelectors = (outputFile: string) => {
   // check for dark in the beginning of the output filename
   const lastSlash = outputFile.lastIndexOf('/')
   const outputBasename = outputFile.substring(lastSlash + 1, outputFile.indexOf('.'))
   const themeName = outputBasename.replace(/-/g, '_')
   const mode = outputBasename.substring(0, 4) === 'dark' ? 'dark' : 'light'
 
-  return {
-    selector: `[data-color-mode="${mode}"][data-${mode}-theme="${themeName}"], [data-color-mode="${mode}"][data-${mode}-theme="${themeName}"] ::backdrop`,
-    selectorLight: `[data-color-mode="auto"][data-light-theme="${themeName}"], [data-color-mode="auto"][data-light-theme="${themeName}"] ::backdrop`,
-    selectorDark: `[data-color-mode="auto"][data-dark-theme="${themeName}"], [data-color-mode="auto"][data-dark-theme="${themeName}"] ::backdrop`,
-  }
+  return [
+    {
+      selector: `[data-color-mode="${mode}"][data-${mode}-theme="${themeName}"], [data-color-mode="${mode}"][data-${mode}-theme="${themeName}"] ::backdrop, [data-color-mode="auto"][data-light-theme="${themeName}"], [data-color-mode="auto"][data-light-theme="${themeName}"] ::backdrop`,
+    },
+    {
+      query: '@media (prefers-color-scheme: dark)',
+      selector: `[data-color-mode="auto"][data-dark-theme="${themeName}"], [data-color-mode="auto"][data-dark-theme="${themeName}"] ::backdrop`,
+    },
+  ]
 }
 
 export const css: PlatformInitializer = (outputFile, prefix, buildPath, options): StyleDictionary.Platform => {
-  const {selector, selectorLight, selectorDark} = getCssSelectors(outputFile)
   return {
     prefix,
     buildPath,
@@ -40,21 +44,19 @@ export const css: PlatformInitializer = (outputFile, prefix, buildPath, options)
     files: [
       {
         destination: `${outputFile}`,
-        format: `css/themed`,
+        format: `css/advanced`,
         filter: token => isSource(token) && options?.themed === true,
         options: {
           showFileHeader: false,
           outputReferences: false,
           descriptions: false,
-          selector,
-          selectorLight,
-          selectorDark,
+          queries: getCssSelectors(outputFile),
           ...options?.options,
         },
       },
       {
         destination: `${outputFile}`,
-        format: `css/variables`,
+        format: `css/advanced`,
         filter: token => isSource(token) && options?.themed !== true,
         options: {
           showFileHeader: false,
@@ -72,7 +74,7 @@ export const css: PlatformInitializer = (outputFile, prefix, buildPath, options)
       },
       {
         destination: `${outputFile}`,
-        format: `css/wrapMediaQuery`,
+        format: `css/advanced`,
         filter: token =>
           isSource(token) &&
           isFromFile(token, [
@@ -82,10 +84,16 @@ export const css: PlatformInitializer = (outputFile, prefix, buildPath, options)
         options: {
           descriptions: false,
           showFileHeader: false,
-          mediaQuery: {
-            'css/functional/size/size-fine.css': '(pointer: fine)',
-            'css/functional/size/size-coarse.css': '(pointer: coarse)',
-          },
+          queries: [
+            {
+              query: '@media (pointer: fine)',
+              matcher: (token: TransformedToken) => token.path.includes('size-fine'),
+            },
+            {
+              query: '@media (pointer: coarse)',
+              matcher: (token: TransformedToken) => token.path.includes('size-coarse'),
+            },
+          ],
         },
       },
     ],

package/src/formats/cssThemed.ts

@@ -1,35 +0,0 @@
-import StyleDictionary from 'style-dictionary'
-import type {FormatterArguments} from 'style-dictionary/types/Format'
-import {format} from 'prettier'
-import type {LineFormatting} from 'style-dictionary/types/FormatHelpers'
-const {fileHeader, formattedVariables} = StyleDictionary.formatHelpers
-
-/**
- * @description Converts `StyleDictionary.dictionary.tokens` to css with prefers dark and light section
- * @param arguments [FormatterArguments](https://github.com/amzn/style-dictionary/blob/main/types/Format.d.ts)
- * @param arguments.options outputReferences `boolean`, selector `string`, selectorLight `string`, selectorDark `string`
- * @returns formatted `string`
- */
-export const cssThemed: StyleDictionary.Formatter = ({dictionary, options = {}, file}: FormatterArguments) => {
-  const {selector, selectorLight, selectorDark} = options
-  const {outputReferences, descriptions} = options
-  const formatting: LineFormatting = {
-    commentStyle: descriptions ? 'long' : 'none',
-  }
-  // add file header
-  const output = [fileHeader({file})]
-  // add single theme css
-  output.push(`${selector || ':root'}${selectorLight ? `, ${selectorLight}` : ''}{
-    ${formattedVariables({format: 'css', dictionary, outputReferences, formatting})}
-  }`)
-  // add auto dark theme css
-  if (selectorDark) {
-    output.push(`@media (prefers-color-scheme: dark) {
-      ${selectorDark} {
-        ${formattedVariables({format: 'css', dictionary, outputReferences, formatting})}
-      }
-    }`)
-  }
-  // return prettified
-  return format(output.join('\n'), {parser: 'css', printWidth: 500})
-}

package/src/formats/cssVariables.ts

@@ -1,25 +0,0 @@
-import StyleDictionary from 'style-dictionary'
-import type {FormatterArguments} from 'style-dictionary/types/Format'
-import type {LineFormatting} from 'style-dictionary/types/FormatHelpers'
-const {fileHeader, formattedVariables} = StyleDictionary.formatHelpers
-
-/**
- * @description Converts `StyleDictionary.dictionary.tokens` to css with prefers dark and light section
- * @param arguments [FormatterArguments](https://github.com/amzn/style-dictionary/blob/main/types/Format.d.ts)
- * @param arguments.options outputReferences `boolean`, selector `string`, selectorLight `string`, selectorDark `string`
- * @returns formatted `string`
- */
-export const cssVariables: StyleDictionary.Formatter = ({dictionary, options = {}, file}: FormatterArguments) => {
-  const selector = options.selector ? options.selector : `:root`
-  const {outputReferences, descriptions} = options
-  const formatting: LineFormatting = {
-    commentStyle: descriptions ? 'long' : 'none',
-  }
-
-  return `${fileHeader({file})}${selector} {\n${formattedVariables({
-    format: 'css',
-    dictionary,
-    outputReferences,
-    formatting,
-  })}\n}\n`
-}

package/src/formats/cssWrapMediaQuery.ts

@@ -1,29 +0,0 @@
-import StyleDictionary from 'style-dictionary'
-import type {FormatterArguments} from 'style-dictionary/types/Format'
-import {format} from 'prettier'
-import type {LineFormatting} from 'style-dictionary/types/FormatHelpers'
-const {fileHeader, formattedVariables} = StyleDictionary.formatHelpers
-
-/**
- * @description Converts `StyleDictionary.dictionary.tokens` to css with @custom-media
- * @param arguments [FormatterArguments](https://github.com/amzn/style-dictionary/blob/main/types/Format.d.ts)
- * @returns formatted `string`
- */
-export const cssWrapMediaQuery: StyleDictionary.Formatter = ({dictionary, options, file}: FormatterArguments) => {
-  const {outputReferences, descriptions} = options
-  const formatting: LineFormatting = {
-    commentStyle: descriptions ? 'long' : 'none',
-  }
-  // get specific media query or use screen
-  const mediaQuery = options.mediaQuery?.[file.destination] || 'screen'
-  // add file header
-  const output = [fileHeader({file})]
-  // add meadia query
-  output.push(`@media ${mediaQuery} {\n:root {`)
-  // add tokens
-  output.push(formattedVariables({format: 'css', dictionary, outputReferences, formatting}))
-  // close media query
-  output.push(`}\n}`)
-  // return prettified
-  return format(output.join('\n'), {parser: 'css', printWidth: 500})
-}