@primer/primitives 8.0.0 → 8.1.0

package/dist/styleLint/functional/themes/light-high-contrast.json

@@ -2190,6 +2190,151 @@
     "attributes": {},
     "path": ["display", "red", "borderColor", "emphasis"]
   },
+  "display-coral-bgColor-muted": {
+    "value": "#ffe5db",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "light",
+        "group": "component (internal)",
+        "scopes": ["bgColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/light/display-light.json5",
+    "isSource": true,
+    "original": {
+      "value": "{base.display.color.coral.0}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "light",
+          "group": "component (internal)",
+          "scopes": ["bgColor"]
+        }
+      }
+    },
+    "name": "display-coral-bgColor-muted",
+    "attributes": {},
+    "path": ["display", "coral", "bgColor", "muted"]
+  },
+  "display-coral-bgColor-emphasis": {
+    "value": "#d43511",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "light",
+        "group": "component (internal)",
+        "scopes": ["bgColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/light/display-light.json5",
+    "isSource": true,
+    "original": {
+      "value": "{base.display.color.coral.5}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "light",
+          "group": "component (internal)",
+          "scopes": ["bgColor"]
+        }
+      }
+    },
+    "name": "display-coral-bgColor-emphasis",
+    "attributes": {},
+    "path": ["display", "coral", "bgColor", "emphasis"]
+  },
+  "display-coral-fgColor": {
+    "value": "#ba2e12",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "light",
+        "group": "component (internal)",
+        "scopes": ["fgColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/light/display-light.json5",
+    "isSource": true,
+    "original": {
+      "value": "{base.display.color.coral.6}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "light",
+          "group": "component (internal)",
+          "scopes": ["fgColor"]
+        }
+      }
+    },
+    "name": "display-coral-fgColor",
+    "attributes": {},
+    "path": ["display", "coral", "fgColor"]
+  },
+  "display-coral-borderColor-muted": {
+    "value": "#fecebe",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "light",
+        "group": "component (internal)",
+        "scopes": ["borderColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/light/display-light.json5",
+    "isSource": true,
+    "original": {
+      "value": "{base.display.color.coral.1}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "light",
+          "group": "component (internal)",
+          "scopes": ["borderColor"]
+        }
+      }
+    },
+    "name": "display-coral-borderColor-muted",
+    "attributes": {},
+    "path": ["display", "coral", "borderColor", "muted"]
+  },
+  "display-coral-borderColor-emphasis": {
+    "value": "#d43511",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "light",
+        "group": "component (internal)",
+        "scopes": ["borderColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/light/display-light.json5",
+    "isSource": true,
+    "original": {
+      "value": "{base.display.color.coral.5}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "light",
+          "group": "component (internal)",
+          "scopes": ["borderColor"]
+        }
+      }
+    },
+    "name": "display-coral-borderColor-emphasis",
+    "attributes": {},
+    "path": ["display", "coral", "borderColor", "emphasis"]
+  },
   "display-yellow-bgColor-muted": {
     "value": "#ffec9e",
     "$type": "color",

package/dist/styleLint/functional/themes/light-tritanopia.json

@@ -2188,6 +2188,151 @@
     "attributes": {},
     "path": ["display", "red", "borderColor", "emphasis"]
   },
+  "display-coral-bgColor-muted": {
+    "value": "#ffe5db",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "light",
+        "group": "component (internal)",
+        "scopes": ["bgColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/light/display-light.json5",
+    "isSource": true,
+    "original": {
+      "value": "{base.display.color.coral.0}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "light",
+          "group": "component (internal)",
+          "scopes": ["bgColor"]
+        }
+      }
+    },
+    "name": "display-coral-bgColor-muted",
+    "attributes": {},
+    "path": ["display", "coral", "bgColor", "muted"]
+  },
+  "display-coral-bgColor-emphasis": {
+    "value": "#d43511",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "light",
+        "group": "component (internal)",
+        "scopes": ["bgColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/light/display-light.json5",
+    "isSource": true,
+    "original": {
+      "value": "{base.display.color.coral.5}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "light",
+          "group": "component (internal)",
+          "scopes": ["bgColor"]
+        }
+      }
+    },
+    "name": "display-coral-bgColor-emphasis",
+    "attributes": {},
+    "path": ["display", "coral", "bgColor", "emphasis"]
+  },
+  "display-coral-fgColor": {
+    "value": "#ba2e12",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "light",
+        "group": "component (internal)",
+        "scopes": ["fgColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/light/display-light.json5",
+    "isSource": true,
+    "original": {
+      "value": "{base.display.color.coral.6}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "light",
+          "group": "component (internal)",
+          "scopes": ["fgColor"]
+        }
+      }
+    },
+    "name": "display-coral-fgColor",
+    "attributes": {},
+    "path": ["display", "coral", "fgColor"]
+  },
+  "display-coral-borderColor-muted": {
+    "value": "#fecebe",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "light",
+        "group": "component (internal)",
+        "scopes": ["borderColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/light/display-light.json5",
+    "isSource": true,
+    "original": {
+      "value": "{base.display.color.coral.1}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "light",
+          "group": "component (internal)",
+          "scopes": ["borderColor"]
+        }
+      }
+    },
+    "name": "display-coral-borderColor-muted",
+    "attributes": {},
+    "path": ["display", "coral", "borderColor", "muted"]
+  },
+  "display-coral-borderColor-emphasis": {
+    "value": "#d43511",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "light",
+        "group": "component (internal)",
+        "scopes": ["borderColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/light/display-light.json5",
+    "isSource": true,
+    "original": {
+      "value": "{base.display.color.coral.5}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "light",
+          "group": "component (internal)",
+          "scopes": ["borderColor"]
+        }
+      }
+    },
+    "name": "display-coral-borderColor-emphasis",
+    "attributes": {},
+    "path": ["display", "coral", "borderColor", "emphasis"]
+  },
   "display-yellow-bgColor-muted": {
     "value": "#ffec9e",
     "$type": "color",

package/dist/styleLint/functional/themes/light.json

@@ -2188,6 +2188,151 @@
     "attributes": {},
     "path": ["display", "red", "borderColor", "emphasis"]
   },
+  "display-coral-bgColor-muted": {
+    "value": "#ffe5db",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "light",
+        "group": "component (internal)",
+        "scopes": ["bgColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/light/display-light.json5",
+    "isSource": true,
+    "original": {
+      "value": "{base.display.color.coral.0}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "light",
+          "group": "component (internal)",
+          "scopes": ["bgColor"]
+        }
+      }
+    },
+    "name": "display-coral-bgColor-muted",
+    "attributes": {},
+    "path": ["display", "coral", "bgColor", "muted"]
+  },
+  "display-coral-bgColor-emphasis": {
+    "value": "#d43511",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "light",
+        "group": "component (internal)",
+        "scopes": ["bgColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/light/display-light.json5",
+    "isSource": true,
+    "original": {
+      "value": "{base.display.color.coral.5}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "light",
+          "group": "component (internal)",
+          "scopes": ["bgColor"]
+        }
+      }
+    },
+    "name": "display-coral-bgColor-emphasis",
+    "attributes": {},
+    "path": ["display", "coral", "bgColor", "emphasis"]
+  },
+  "display-coral-fgColor": {
+    "value": "#ba2e12",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "light",
+        "group": "component (internal)",
+        "scopes": ["fgColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/light/display-light.json5",
+    "isSource": true,
+    "original": {
+      "value": "{base.display.color.coral.6}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "light",
+          "group": "component (internal)",
+          "scopes": ["fgColor"]
+        }
+      }
+    },
+    "name": "display-coral-fgColor",
+    "attributes": {},
+    "path": ["display", "coral", "fgColor"]
+  },
+  "display-coral-borderColor-muted": {
+    "value": "#fecebe",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "light",
+        "group": "component (internal)",
+        "scopes": ["borderColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/light/display-light.json5",
+    "isSource": true,
+    "original": {
+      "value": "{base.display.color.coral.1}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "light",
+          "group": "component (internal)",
+          "scopes": ["borderColor"]
+        }
+      }
+    },
+    "name": "display-coral-borderColor-muted",
+    "attributes": {},
+    "path": ["display", "coral", "borderColor", "muted"]
+  },
+  "display-coral-borderColor-emphasis": {
+    "value": "#d43511",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "light",
+        "group": "component (internal)",
+        "scopes": ["borderColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/light/display-light.json5",
+    "isSource": true,
+    "original": {
+      "value": "{base.display.color.coral.5}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "light",
+          "group": "component (internal)",
+          "scopes": ["borderColor"]
+        }
+      }
+    },
+    "name": "display-coral-borderColor-emphasis",
+    "attributes": {},
+    "path": ["display", "coral", "borderColor", "emphasis"]
+  },
   "display-yellow-bgColor-muted": {
     "value": "#ffec9e",
     "$type": "color",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/primitives",
-  "version": "8.0.0",
+  "version": "8.1.0",
   "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

@@ -24,18 +24,17 @@ import {
   typographyToCss,
   dimensionToRemPxArray,
   floatToPixel,
+  floatToPixelUnitless,
 } from './transformers'
 import {
   javascriptCommonJs,
   javascriptEsm,
   typescriptExportDefinition,
   jsonNestedPrefixed,
-  cssThemed,
   cssCustomMedia,
   jsonOneDimensional,
   jsonPostCssFallback,
-  cssWrapMediaQuery,
-  cssVariables,
+  cssAdvanced,
   jsonFigma,
 } from './formats'
 
@@ -50,8 +49,8 @@ StyleDictionary.registerParser(w3cJsonParser)
  *
  */
 StyleDictionary.registerFormat({
-  name: 'css/themed',
-  formatter: cssThemed,
+  name: 'css/advanced',
+  formatter: cssAdvanced,
 })
 
 StyleDictionary.registerFormat({
@@ -59,16 +58,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,
@@ -138,6 +127,11 @@ StyleDictionary.registerTransform({
   ...floatToPixel,
 })
 
+StyleDictionary.registerTransform({
+  name: 'float/pixelUnitless',
+  ...floatToPixelUnitless,
+})
+
 StyleDictionary.registerTransform({
   name: 'dimension/rem',
   ...dimensionToRem,

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'