@primer/primitives 8.2.4-rc.a3f65a09 → 8.2.4-rc.acc4193a

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/primitives",
-  "version": "8.2.4-rc.a3f65a09",
+  "version": "8.2.4-rc.acc4193a",
   "description": "Typography, spacing, and color primitives for Primer design system",
   "files": [
     "dist",
@@ -33,48 +33,48 @@
     "format": "prettier --write  '**/*.{js,jsx,ts,tsx,md,mdx,css}'",
     "format:check": "prettier --check '**/*.{js,jsx,ts,tsx,md,mdx,css}'",
     "install:storybook": "cd docs/storybook && npm ci --legacy-peer-deps --no-audit --no-fund",
-    "lint": "eslint '**/*.{js,ts,tsx,md,mdx}' --max-warnings=0 --config .eslintrc.js && npm run lint:tokens",
-    "lint:fix": "eslint '**/*.{js,ts,tsx,md,mdx}' --fix --max-warnings=0 --config .eslintrc.js",
+    "lint": "ESLINT_USE_FLAT_CONFIG=false eslint '**/*.{js,ts,tsx,md,mdx}' --config .eslintrc.cjs && npm run lint:tokens",
+    "lint:fix": "eslint '**/*.{js,ts,tsx,md,mdx}' --fix --max-warnings=0 --config .eslintrc.cjs",
     "lint:tokens": "ts-node ./scripts/validateTokenJson.ts",
     "prebuild": "rm -rf dist",
     "prepack": "npm run build",
     "release": "changeset publish",
     "start:storybook": "npm run build && cd docs/storybook && npm run storybook",
-    "test": "jest --verbose --coverage"
+    "test": "vitest run --coverage"
   },
   "prettier": "@github/prettier-config",
   "devDependencies": {
     "@actions/github": "^6.0.0",
     "@changesets/changelog-github": "^0.5.0",
-    "@changesets/cli": "^2.27.1",
+    "@changesets/cli": "^2.27.7",
     "@github/prettier-config": "^0.0.6",
-    "@playwright/test": "^1.43.0",
-    "@types/jest": "^29.5.2",
-    "@types/node": "^20.4.0",
-    "@typescript-eslint/eslint-plugin": "^5.61.0",
-    "@typescript-eslint/parser": "^5.61.0",
+    "@playwright/test": "^1.45.1",
+    "@prettier/sync": "^0.5.2",
+    "@types/node": "^20.14.9",
+    "@typescript-eslint/eslint-plugin": "^7.15.0",
+    "@typescript-eslint/parser": "^7.15.0",
+    "@vitest/coverage-v8": "^2.0.1",
     "color-blend": "^4.0.0",
-    "color2k": "^2.0.0",
-    "console-table-printer": "^2.11.1",
-    "eslint": "^8.12.0",
-    "eslint-config-prettier": "^8.6.0",
-    "eslint-import-resolver-typescript": "^3.5.3",
-    "eslint-plugin-github": "^4.3.6",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-mdx": "^2.0.5",
-    "eslint-plugin-primer-react": "^1.0.1",
-    "eslint-plugin-react": "^7.29.4",
-    "eslint-plugin-react-hooks": "^4.4.0",
-    "eslint-plugin-storybook": "^0.6.15",
-    "jest": "^29.6.1",
+    "color2k": "^2.0.3",
+    "console-table-printer": "^2.12.1",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-import-resolver-typescript": "3.6",
+    "eslint-plugin-github": "^5.0.1",
+    "eslint-plugin-jsx-a11y": "6.9",
+    "eslint-plugin-mdx": "^3.1.5",
+    "eslint-plugin-primer-react": "^5.3.0",
+    "eslint-plugin-react": "7.34",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-storybook": "^0.8.0",
     "json5": "^2.2.1",
     "markdown-table-ts": "^1.0.3",
-    "prettier": "^2.7.1",
+    "prettier": "3.3",
     "style-dictionary": "^3.9.2",
-    "ts-jest": "^29.1.2",
     "ts-node": "^10.9.2",
-    "typescript": "^5.4.5",
-    "zod": "^3.22.4",
-    "zod-validation-error": "^3.1.0"
+    "typescript": "5.5",
+    "vitest": "^2.0.1",
+    "zod": "3.23",
+    "zod-validation-error": "3.3"
   }
 }

package/src/formats/cssAdvanced.ts

@@ -1,7 +1,7 @@
 import type {TransformedToken} from 'style-dictionary'
 import StyleDictionary from 'style-dictionary'
 import type {FormatterArguments} from 'style-dictionary/types/Format'
-import {format} from 'prettier'
+import syncPrettier from '@prettier/sync'
 import type {LineFormatting} from 'style-dictionary/types/FormatHelpers'
 const {fileHeader, formattedVariables} = StyleDictionary.formatHelpers
 
@@ -47,7 +47,7 @@ export const cssAdvanced: StyleDictionary.Formatter = ({
           ...token,
           name: `${platform.prefix}-${token.name}`,
           path: [platform.prefix, ...token.path],
-        } as TransformedToken),
+        }) as TransformedToken,
     )
   }
   // get queries from tokens
@@ -95,5 +95,5 @@ export const cssAdvanced: StyleDictionary.Formatter = ({
     output.push(queryString ? `${queryString} { ${cssWithSelector} }` : cssWithSelector)
   }
   // return prettified
-  return format(output.join('\n'), {parser: 'css', printWidth: 500})
+  return syncPrettier.format(output.join('\n'), {parser: 'css', printWidth: 500})
 }

package/src/formats/cssCustomMedia.ts

@@ -1,6 +1,6 @@
 import StyleDictionary from 'style-dictionary'
 import type {FormatterArguments} from 'style-dictionary/types/Format'
-import {format} from 'prettier'
+import syncPrettier from '@prettier/sync'
 const {fileHeader} = StyleDictionary.formatHelpers
 
 /**
@@ -20,5 +20,5 @@ export const cssCustomMedia: StyleDictionary.Formatter = ({
     output.push(`@custom-media --${name} ${value};`)
   })
   // return prettified
-  return format(output.join('\n'), {parser: 'css', printWidth: 500})
+  return syncPrettier.format(output.join('\n'), {parser: 'css', printWidth: 500})
 }

package/src/formats/javascriptCommonJs.ts

@@ -1,4 +1,4 @@
-import {format} from 'prettier'
+import syncPrettier from '@prettier/sync'
 import {jsonToNestedValue} from './utilities/jsonToNestedValue'
 import {prefixTokens} from './utilities/prefixTokens'
 import StyleDictionary from 'style-dictionary'
@@ -17,5 +17,5 @@ export const javascriptCommonJs: StyleDictionary.Formatter = ({dictionary, file,
   // add file header and convert output
   const output = `${fileHeader({file})}exports.default = ${JSON.stringify(jsonToNestedValue(tokens), null, 2)}\n`
   // return prettified
-  return format(output, {parser: 'typescript', printWidth: 500})
+  return syncPrettier.format(output, {parser: 'typescript', printWidth: 500})
 }

package/src/formats/javascriptEsm.ts

@@ -1,5 +1,5 @@
 import StyleDictionary from 'style-dictionary'
-import {format} from 'prettier'
+import syncPrettier from '@prettier/sync'
 import {jsonToNestedValue} from './utilities/jsonToNestedValue'
 import {prefixTokens} from './utilities/prefixTokens'
 import type {FormatterArguments} from 'style-dictionary/types/Format'
@@ -17,5 +17,5 @@ export const javascriptEsm: StyleDictionary.Formatter = ({dictionary, file, plat
   // add file header and convert output
   const output = `${fileHeader({file})}export default \n${JSON.stringify(jsonToNestedValue(tokens), null, 2)}\n`
   // return prettified
-  return format(output, {parser: 'typescript', printWidth: 500})
+  return syncPrettier.format(output, {parser: 'typescript', printWidth: 500})
 }

package/src/formats/jsonFigma.ts

@@ -1,5 +1,5 @@
 import StyleDictionary from 'style-dictionary'
-import {format} from 'prettier'
+import syncPrettier from '@prettier/sync'
 import type {FormatterArguments} from 'style-dictionary/types/Format'
 import {transformNamePathToFigma} from '../transformers/namePathToFigma'
 import type {ShadowTokenValue} from '../types/ShadowTokenValue'
@@ -130,5 +130,5 @@ export const jsonFigma: StyleDictionary.Formatter = ({dictionary, file: _file, p
   // add file header and convert output
   const output = JSON.stringify(tokens, null, 2)
   // return prettified
-  return format(output, {parser: 'json', printWidth: 500})
+  return syncPrettier.format(output, {parser: 'json', printWidth: 500})
 }

package/src/formats/jsonNestedPrefixed.ts

@@ -1,5 +1,5 @@
 import type StyleDictionary from 'style-dictionary'
-import {format} from 'prettier'
+import syncPrettier from '@prettier/sync'
 import {prefixTokens} from './utilities/prefixTokens'
 import {jsonToNestedValue} from './utilities/jsonToNestedValue'
 
@@ -19,5 +19,5 @@ export const jsonNestedPrefixed: StyleDictionary.Formatter = ({dictionary, file:
   // add file header and convert output
   const output = JSON.stringify(tokens, null, 2)
   // return prettified
-  return format(output, {parser: 'json', printWidth: 500})
+  return syncPrettier.format(output, {parser: 'json', printWidth: 500})
 }

package/src/formats/jsonOneDimensional.ts

@@ -1,5 +1,5 @@
 import type StyleDictionary from 'style-dictionary'
-import {format} from 'prettier'
+import syncPrettier from '@prettier/sync'
 import {jsonToFlat} from './utilities/jsonToFlat'
 /**
  * @description Takes a style dictionary token dictionary and converts it to a one dimensional json object.
@@ -14,5 +14,5 @@ export const jsonOneDimensional: StyleDictionary.Formatter = ({dictionary, file:
   // add file header and convert output
   const output = JSON.stringify(tokens, null, 2)
   // return prettified
-  return format(output, {parser: 'json', printWidth: 500})
+  return syncPrettier.format(output, {parser: 'json', printWidth: 500})
 }

package/src/formats/jsonPostCssFallback.ts

@@ -1,5 +1,5 @@
 import type StyleDictionary from 'style-dictionary'
-import {format} from 'prettier'
+import syncPrettier from '@prettier/sync'
 
 /**
  * @description Takes a style dictionary token dictionary and converts it to a one dimensional json object.
@@ -12,5 +12,5 @@ export const jsonPostCssFallback: StyleDictionary.Formatter = ({dictionary, file
   // add file header and convert output
   const output = JSON.stringify(tokens, null, 2)
   // return prettified
-  return format(output, {parser: 'json', printWidth: 500})
+  return syncPrettier.format(output, {parser: 'json', printWidth: 500})
 }

package/src/formats/typescriptExportDefinition.ts

@@ -1,5 +1,5 @@
 import StyleDictionary from 'style-dictionary'
-import {format} from 'prettier'
+import syncPrettier from '@prettier/sync'
 import fs = require('fs')
 import path = require('path')
 import {treeWalker} from '../utilities/treeWalker'
@@ -166,5 +166,5 @@ export const typescriptExportDefinition: StyleDictionary.Formatter = ({
   // add file header and convert output
   const output = `${fileHeader({file})}\n${getTypeDefinition(tokens, moduleName, tokenTypesPath)}\n`
   // return prettified
-  return format(output, {parser: 'typescript', printWidth: 500})
+  return syncPrettier.format(output, {parser: 'typescript', printWidth: 500})
 }

package/src/schemas/designToken.ts

@@ -16,7 +16,7 @@ import {durationToken} from './durationToken'
 // @ts-ignore: TODO: fix this
 export const designToken = z.record(
   tokenName,
-  z.lazy(() => {
+  z.lazy((): z.ZodTypeAny => {
     return z.union([
       z.discriminatedUnion('$type', [
         colorToken,

package/src/schemas/validTokenType.ts

@@ -22,7 +22,7 @@ export type TokenType = (typeof validTypes)[number]
 // @ts-ignore: TODO: fix this
 export const validateType = z.record(
   z.string(),
-  z.lazy(() => {
+  z.lazy((): z.ZodTypeAny => {
     return z.union([
       z
         .object({

package/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5

@@ -20,7 +20,7 @@
       $type: 'color',
     },
     neutral: {
-      $value: '{base.color.neutral.1}',
+      $value: '{base.color.neutral.3}',
       $type: 'color',
     },
     accent: {
@@ -65,7 +65,7 @@
       muted: {
         $value: '{base.color.neutral.5}',
         $type: 'color',
-        alpha: 0.4,
+        alpha: 0.1,
       },
       emphasis: {
         $value: '{base.color.neutral.4}',
@@ -78,6 +78,10 @@
         $type: 'color',
         alpha: 0.1,
       },
+      emphasis: {
+        $value: '{base.color.blue.4}',
+        $type: 'color',
+      },
     },
     success: {
       muted: {
@@ -85,6 +89,10 @@
         $type: 'color',
         alpha: 0.14,
       },
+      emphasis: {
+        $value: '{base.color.green.4}',
+        $type: 'color',
+      },
     },
     open: {
       muted: {
@@ -99,6 +107,10 @@
         $type: 'color',
         alpha: 0.09,
       },
+      emphasis: {
+        $value: '{base.color.red.4}',
+        $type: 'color',
+      },
     },
     closed: {
       muted: {
@@ -113,6 +125,16 @@
         $type: 'color',
         alpha: 0.088,
       },
+      emphasis: {
+        $value: '{base.color.orange.4}',
+        $type: 'color',
+      },
+    },
+    attention: {
+      emphasis: {
+        $value: '{base.color.yellow.4}',
+        $type: 'color',
+      },
     },
     done: {
       muted: {
@@ -120,6 +142,17 @@
         $type: 'color',
         alpha: 0.09,
       },
+      emphasis: {
+        $value: '{base.color.purple.4}',
+        $type: 'color',
+      },
+    },
+    upsell: {
+      muted: {
+        $value: '{bgColor.done.muted}',
+        $type: 'color',
+        alpha: 0.09,
+      },
     },
     upsell: {
       muted: {
@@ -134,6 +167,10 @@
         $type: 'color',
         alpha: 0.09,
       },
+      emphasis: {
+        $value: '{base.color.pink.4}',
+        $type: 'color',
+      },
     },
   },
   borderColor: {
@@ -521,4 +558,348 @@
       },
     },
   },
+  display: {
+    blue: {
+      bgColor: {
+        emphasis: {
+          $value: '{base.display.color.blue.6}',
+          $type: 'color',
+        },
+      },
+      fgColor: {
+        $value: '{base.display.color.blue.8}',
+        $type: 'color',
+      },
+      borderColor: {
+        emphasis: {
+          $value: '{base.display.color.blue.6}',
+          $type: 'color',
+        },
+      },
+    },
+    indigo: {
+      bgColor: {
+        emphasis: {
+          $value: '{base.display.color.indigo.6}',
+          $type: 'color',
+        },
+      },
+      fgColor: {
+        $value: '{base.display.color.indigo.8}',
+        $type: 'color',
+      },
+      borderColor: {
+        emphasis: {
+          $value: '{base.display.color.indigo.6}',
+          $type: 'color',
+        },
+      },
+    },
+    gray: {
+      bgColor: {
+        emphasis: {
+          $value: '{base.display.color.gray.6}',
+          $type: 'color',
+        },
+      },
+      fgColor: {
+        $value: '{base.display.color.gray.8}',
+        $type: 'color',
+      },
+      borderColor: {
+        emphasis: {
+          $value: '{base.display.color.gray.6}',
+          $type: 'color',
+        },
+      },
+    },
+    cyan: {
+      bgColor: {
+        emphasis: {
+          $value: '{base.display.color.cyan.6}',
+          $type: 'color',
+        },
+      },
+      fgColor: {
+        $value: '{base.display.color.cyan.8}',
+        $type: 'color',
+      },
+      borderColor: {
+        emphasis: {
+          $value: '{base.display.color.cyan.6}',
+          $type: 'color',
+        },
+      },
+    },
+    teal: {
+      bgColor: {
+        emphasis: {
+          $value: '{base.display.color.teal.6}',
+          $type: 'color',
+        },
+      },
+      fgColor: {
+        $value: '{base.display.color.teal.8}',
+        $type: 'color',
+      },
+      borderColor: {
+        emphasis: {
+          $value: '{base.display.color.teal.6}',
+          $type: 'color',
+        },
+      },
+    },
+    pine: {
+      bgColor: {
+        emphasis: {
+          $value: '{base.display.color.pine.6}',
+          $type: 'color',
+        },
+      },
+      fgColor: {
+        $value: '{base.display.color.pine.8}',
+        $type: 'color',
+      },
+      borderColor: {
+        emphasis: {
+          $value: '{base.display.color.pine.6}',
+          $type: 'color',
+        },
+      },
+    },
+    green: {
+      bgColor: {
+        emphasis: {
+          $value: '{base.display.color.green.6}',
+          $type: 'color',
+        },
+      },
+      fgColor: {
+        $value: '{base.display.color.green.8}',
+        $type: 'color',
+      },
+      borderColor: {
+        emphasis: {
+          $value: '{base.display.color.green.6}',
+          $type: 'color',
+        },
+      },
+    },
+    lime: {
+      bgColor: {
+        emphasis: {
+          $value: '{base.display.color.lime.6}',
+          $type: 'color',
+        },
+      },
+      fgColor: {
+        $value: '{base.display.color.lime.8}',
+        $type: 'color',
+      },
+      borderColor: {
+        emphasis: {
+          $value: '{base.display.color.lime.6}',
+          $type: 'color',
+        },
+      },
+    },
+    olive: {
+      bgColor: {
+        emphasis: {
+          $value: '{base.display.color.olive.6}',
+          $type: 'color',
+        },
+      },
+      fgColor: {
+        $value: '{base.display.color.olive.8}',
+        $type: 'color',
+      },
+      borderColor: {
+        emphasis: {
+          $value: '{base.display.color.olive.6}',
+          $type: 'color',
+        },
+      },
+    },
+    lemon: {
+      bgColor: {
+        emphasis: {
+          $value: '{base.display.color.lemon.6}',
+          $type: 'color',
+        },
+      },
+      fgColor: {
+        $value: '{base.display.color.lemon.8}',
+        $type: 'color',
+      },
+      borderColor: {
+        emphasis: {
+          $value: '{base.display.color.lemon.6}',
+          $type: 'color',
+        },
+      },
+    },
+    yellow: {
+      bgColor: {
+        emphasis: {
+          $value: '{base.display.color.yellow.6}',
+          $type: 'color',
+        },
+      },
+      fgColor: {
+        $value: '{base.display.color.yellow.8}',
+        $type: 'color',
+      },
+      borderColor: {
+        emphasis: {
+          $value: '{base.display.color.yellow.6}',
+          $type: 'color',
+        },
+      },
+    },
+    orange: {
+      bgColor: {
+        emphasis: {
+          $value: '{base.display.color.orange.6}',
+          $type: 'color',
+        },
+      },
+      fgColor: {
+        $value: '{base.display.color.orange.8}',
+        $type: 'color',
+      },
+      borderColor: {
+        emphasis: {
+          $value: '{base.display.color.orange.6}',
+          $type: 'color',
+        },
+      },
+    },
+    red: {
+      bgColor: {
+        emphasis: {
+          $value: '{base.display.color.red.6}',
+          $type: 'color',
+        },
+      },
+      fgColor: {
+        $value: '{base.display.color.red.8}',
+        $type: 'color',
+      },
+      borderColor: {
+        emphasis: {
+          $value: '{base.display.color.red.6}',
+          $type: 'color',
+        },
+      },
+    },
+    coral: {
+      bgColor: {
+        emphasis: {
+          $value: '{base.display.color.coral.6}',
+          $type: 'color',
+        },
+      },
+      fgColor: {
+        $value: '{base.display.color.coral.8}',
+        $type: 'color',
+      },
+      borderColor: {
+        emphasis: {
+          $value: '{base.display.color.coral.6}',
+          $type: 'color',
+        },
+      },
+    },
+    pink: {
+      bgColor: {
+        emphasis: {
+          $value: '{base.display.color.pink.6}',
+          $type: 'color',
+        },
+      },
+      fgColor: {
+        $value: '{base.display.color.pink.8}',
+        $type: 'color',
+      },
+      borderColor: {
+        emphasis: {
+          $value: '{base.display.color.pink.6}',
+          $type: 'color',
+        },
+      },
+    },
+    plum: {
+      bgColor: {
+        emphasis: {
+          $value: '{base.display.color.plum.6}',
+          $type: 'color',
+        },
+      },
+      fgColor: {
+        $value: '{base.display.color.plum.8}',
+        $type: 'color',
+      },
+      borderColor: {
+        emphasis: {
+          $value: '{base.display.color.plum.6}',
+          $type: 'color',
+        },
+      },
+    },
+    purple: {
+      bgColor: {
+        emphasis: {
+          $value: '{base.display.color.purple.6}',
+          $type: 'color',
+        },
+      },
+      fgColor: {
+        $value: '{base.display.color.purple.8}',
+        $type: 'color',
+      },
+      borderColor: {
+        emphasis: {
+          $value: '{base.display.color.purple.6}',
+          $type: 'color',
+        },
+      },
+    },
+    brown: {
+      bgColor: {
+        emphasis: {
+          $value: '{base.display.color.brown.6}',
+          $type: 'color',
+        },
+      },
+      fgColor: {
+        $value: '{base.display.color.brown.8}',
+        $type: 'color',
+      },
+      borderColor: {
+        emphasis: {
+          $value: '{base.display.color.brown.6}',
+          $type: 'color',
+        },
+      },
+    },
+    auburn: {
+      bgColor: {
+        emphasis: {
+          $value: '{base.display.color.auburn.6}',
+          $type: 'color',
+        },
+      },
+      fgColor: {
+        $value: '{base.display.color.auburn.8}',
+        $type: 'color',
+      },
+      borderColor: {
+        emphasis: {
+          $value: '{base.display.color.auburn.6}',
+          $type: 'color',
+        },
+      },
+    },
+  },
 }