@primer/primitives 7.16.0 → 7.17.0-rc.132f02a7

package/{tokens-next-private/docs → dist/styleLint}/functional/size/viewport.json

@@ -1,6 +1,6 @@
 {
   "viewportRange-narrow": {
-    "value": "(max-width: calc(48rem - 0.02px))",
+    "value": ["48rem", "768px"],
     "$type": "custom-viewportRange",
     "filePath": "src/tokens/functional/size/viewport.json",
     "isSource": true,
@@ -13,7 +13,7 @@
     "path": ["viewportRange", "narrow"]
   },
   "viewportRange-narrowLandscape": {
-    "value": "(max-width: calc(63.25rem - 0.02px) and (max-height: calc(34rem - 0.02px)) and (orientation: landscape))",
+    "value": ["34rem", "544px"],
     "$type": "custom-viewportRange",
     "filePath": "src/tokens/functional/size/viewport.json",
     "isSource": true,
@@ -26,7 +26,7 @@
     "path": ["viewportRange", "narrowLandscape"]
   },
   "viewportRange-regular": {
-    "value": "(min-width: 48rem)",
+    "value": ["48rem", "768px"],
     "$type": "custom-viewportRange",
     "filePath": "src/tokens/functional/size/viewport.json",
     "isSource": true,
@@ -39,7 +39,7 @@
     "path": ["viewportRange", "regular"]
   },
   "viewportRange-wide": {
-    "value": "(min-width: 87.5rem)",
+    "value": ["87.5rem", "1400px"],
     "$type": "custom-viewportRange",
     "filePath": "src/tokens/functional/size/viewport.json",
     "isSource": true,

package/{tokens-next-private/docs → dist/styleLint}/functional/themes/dark-colorblind.json

@@ -12355,7 +12355,7 @@
     "path": ["fgColor", "closed", "@"]
   },
   "fgColor-done": {
-    "value": "#a371f7",
+    "value": "#ab7df8",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -12390,7 +12390,7 @@
     "path": ["fgColor", "done", "@"]
   },
   "fgColor-upsell": {
-    "value": "#a371f7",
+    "value": "#ab7df8",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -13317,7 +13317,7 @@
     "path": ["bgColor", "closed", "emphasis"]
   },
   "bgColor-done-muted": {
-    "value": "#a371f726",
+    "value": "#ab7df826",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -13389,7 +13389,7 @@
     "path": ["bgColor", "done", "emphasis"]
   },
   "bgColor-upsell-muted": {
-    "value": "#a371f726",
+    "value": "#ab7df826",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -14256,7 +14256,7 @@
     "path": ["borderColor", "closed", "emphasis"]
   },
   "borderColor-done-muted": {
-    "value": "#a371f766",
+    "value": "#ab7df866",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -14328,7 +14328,7 @@
     "path": ["borderColor", "done", "emphasis"]
   },
   "borderColor-upsell-muted": {
-    "value": "#a371f766",
+    "value": "#ab7df866",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -14823,7 +14823,7 @@
     "path": ["color", "ansi", "blue-bright"]
   },
   "color-ansi-magenta": {
-    "value": "#bc8cff",
+    "value": "#be8fff",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {

package/{tokens-next-private/docs → dist/styleLint}/functional/themes/dark-tritanopia.json

@@ -12361,7 +12361,7 @@
     "path": ["fgColor", "closed", "@"]
   },
   "fgColor-done": {
-    "value": "#a371f7",
+    "value": "#ab7df8",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -12396,7 +12396,7 @@
     "path": ["fgColor", "done", "@"]
   },
   "fgColor-upsell": {
-    "value": "#a371f7",
+    "value": "#ab7df8",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -13323,7 +13323,7 @@
     "path": ["bgColor", "closed", "emphasis"]
   },
   "bgColor-done-muted": {
-    "value": "#a371f726",
+    "value": "#ab7df826",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -13395,7 +13395,7 @@
     "path": ["bgColor", "done", "emphasis"]
   },
   "bgColor-upsell-muted": {
-    "value": "#a371f726",
+    "value": "#ab7df826",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -14262,7 +14262,7 @@
     "path": ["borderColor", "closed", "emphasis"]
   },
   "borderColor-done-muted": {
-    "value": "#a371f766",
+    "value": "#ab7df866",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -14334,7 +14334,7 @@
     "path": ["borderColor", "done", "emphasis"]
   },
   "borderColor-upsell-muted": {
-    "value": "#a371f766",
+    "value": "#ab7df866",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -14829,7 +14829,7 @@
     "path": ["color", "ansi", "blue-bright"]
   },
   "color-ansi-magenta": {
-    "value": "#bc8cff",
+    "value": "#be8fff",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {

package/{tokens-next-private/docs → dist/styleLint}/functional/themes/dark.json

@@ -12361,7 +12361,7 @@
     "path": ["fgColor", "closed", "@"]
   },
   "fgColor-done": {
-    "value": "#a371f7",
+    "value": "#ab7df8",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -12396,7 +12396,7 @@
     "path": ["fgColor", "done", "@"]
   },
   "fgColor-upsell": {
-    "value": "#a371f7",
+    "value": "#ab7df8",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -13323,7 +13323,7 @@
     "path": ["bgColor", "closed", "emphasis"]
   },
   "bgColor-done-muted": {
-    "value": "#a371f726",
+    "value": "#ab7df826",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -13395,7 +13395,7 @@
     "path": ["bgColor", "done", "emphasis"]
   },
   "bgColor-upsell-muted": {
-    "value": "#a371f726",
+    "value": "#ab7df826",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -14260,7 +14260,7 @@
     "path": ["borderColor", "closed", "emphasis"]
   },
   "borderColor-done-muted": {
-    "value": "#a371f766",
+    "value": "#ab7df866",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -14332,7 +14332,7 @@
     "path": ["borderColor", "done", "emphasis"]
   },
   "borderColor-upsell-muted": {
-    "value": "#a371f766",
+    "value": "#ab7df866",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -14827,7 +14827,7 @@
     "path": ["color", "ansi", "blue-bright"]
   },
   "color-ansi-magenta": {
-    "value": "#bc8cff",
+    "value": "#be8fff",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {

package/{tokens-next-private/docs → dist/styleLint}/functional/typography/typography.json

@@ -39,7 +39,7 @@
     "path": ["fontStack", "monospace"]
   },
   "text-display-lineBoxHeight": {
-    "value": "3.5rem",
+    "value": ["3.5rem", "56px"],
     "$type": "dimension",
     "filePath": "src/tokens/functional/typography/typography.json",
     "isSource": true,
@@ -52,7 +52,7 @@
     "path": ["text", "display", "lineBoxHeight"]
   },
   "text-display-size": {
-    "value": "2.5rem",
+    "value": ["2.5rem", "40px"],
     "$type": "dimension",
     "filePath": "src/tokens/functional/typography/typography.json",
     "isSource": true,
@@ -91,7 +91,7 @@
     "path": ["text", "display", "weight"]
   },
   "text-display-shorthand": {
-    "value": "500 2.5rem/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+    "value": "500 2.5rem,40px/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
     "$type": "typography",
     "comment": "Hero-style text for brand to product transition pages. Utilize Title (large) styles on narrow viewports.",
     "filePath": "src/tokens/functional/typography/typography.json",
@@ -111,7 +111,7 @@
     "path": ["text", "display", "shorthand"]
   },
   "text-title-size-large": {
-    "value": "2rem",
+    "value": ["2rem", "32px"],
     "$type": "dimension",
     "filePath": "src/tokens/functional/typography/typography.json",
     "isSource": true,
@@ -124,7 +124,7 @@
     "path": ["text", "title", "size", "large"]
   },
   "text-title-size-medium": {
-    "value": "1.25rem",
+    "value": ["1.25rem", "20px"],
     "$type": "dimension",
     "filePath": "src/tokens/functional/typography/typography.json",
     "isSource": true,
@@ -137,7 +137,7 @@
     "path": ["text", "title", "size", "medium"]
   },
   "text-title-size-small": {
-    "value": "1rem",
+    "value": ["1rem", "16px"],
     "$type": "dimension",
     "filePath": "src/tokens/functional/typography/typography.json",
     "isSource": true,
@@ -228,7 +228,7 @@
     "path": ["text", "title", "weight", "small"]
   },
   "text-title-shorthand-large": {
-    "value": "600 2rem/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+    "value": "600 2rem,32px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
     "$type": "typography",
     "comment": "Page headings for user-created objects, such as issues or pull requests. Utilize title (medium) styles on narrow viewports.",
     "filePath": "src/tokens/functional/typography/typography.json",
@@ -248,7 +248,7 @@
     "path": ["text", "title", "shorthand", "large"]
   },
   "text-title-shorthand-medium": {
-    "value": "600 1.25rem/1.6 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+    "value": "600 1.25rem,20px/1.6 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
     "$type": "typography",
     "comment": "Default page title. The 32px-equivalent line-height matches with button and other medium control heights. Great for page header composition.",
     "filePath": "src/tokens/functional/typography/typography.json",
@@ -268,7 +268,7 @@
     "path": ["text", "title", "shorthand", "medium"]
   },
   "text-title-shorthand-small": {
-    "value": "600 1rem/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+    "value": "600 1rem,16px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
     "$type": "typography",
     "comment": "Uses the same size as body (large) with a heavier weight of semibold (600).",
     "filePath": "src/tokens/functional/typography/typography.json",
@@ -288,7 +288,7 @@
     "path": ["text", "title", "shorthand", "small"]
   },
   "text-subtitle-size": {
-    "value": "1.25rem",
+    "value": ["1.25rem", "20px"],
     "$type": "dimension",
     "filePath": "src/tokens/functional/typography/typography.json",
     "isSource": true,
@@ -327,7 +327,7 @@
     "path": ["text", "subtitle", "weight"]
   },
   "text-subtitle-shorthand": {
-    "value": "400 1.25rem/1.6 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+    "value": "400 1.25rem,20px/1.6 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
     "$type": "typography",
     "comment": "Page sections/sub headings, or less important object names in page titles (automated action titles, for example). Same line-height as title (medium).",
     "filePath": "src/tokens/functional/typography/typography.json",
@@ -347,7 +347,7 @@
     "path": ["text", "subtitle", "shorthand"]
   },
   "text-body-size-large": {
-    "value": "1rem",
+    "value": ["1rem", "16px"],
     "$type": "dimension",
     "filePath": "src/tokens/functional/typography/typography.json",
     "isSource": true,
@@ -360,7 +360,7 @@
     "path": ["text", "body", "size", "large"]
   },
   "text-body-size-medium": {
-    "value": "0.875rem",
+    "value": ["0.875rem", "14px"],
     "$type": "dimension",
     "filePath": "src/tokens/functional/typography/typography.json",
     "isSource": true,
@@ -373,7 +373,7 @@
     "path": ["text", "body", "size", "medium"]
   },
   "text-body-size-small": {
-    "value": "0.75rem",
+    "value": ["0.75rem", "12px"],
     "$type": "dimension",
     "filePath": "src/tokens/functional/typography/typography.json",
     "isSource": true,
@@ -438,7 +438,7 @@
     "path": ["text", "body", "weight"]
   },
   "text-body-shorthand-large": {
-    "value": "400 1rem/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+    "value": "400 1rem,16px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
     "$type": "typography",
     "comment": "User-generated content, markdown rendering.",
     "filePath": "src/tokens/functional/typography/typography.json",
@@ -458,7 +458,7 @@
     "path": ["text", "body", "shorthand", "large"]
   },
   "text-body-shorthand-medium": {
-    "value": "400 0.875rem/1.4285 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+    "value": "400 0.875rem,14px/1.4285 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
     "$type": "typography",
     "comment": "Default UI font. Most commonly used for body text.",
     "filePath": "src/tokens/functional/typography/typography.json",
@@ -478,7 +478,7 @@
     "path": ["text", "body", "shorthand", "medium"]
   },
   "text-body-shorthand-small": {
-    "value": "400 0.75rem/1.6666 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+    "value": "400 0.75rem,12px/1.6666 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
     "$type": "typography",
     "comment": "Small body text for discrete UI applications, such as helper, footnote text. Should be used sparingly across pages. Line-height matches Body (medium) at 20px.",
     "filePath": "src/tokens/functional/typography/typography.json",
@@ -498,7 +498,7 @@
     "path": ["text", "body", "shorthand", "small"]
   },
   "text-caption-size": {
-    "value": "0.75rem",
+    "value": ["0.75rem", "12px"],
     "$type": "dimension",
     "filePath": "src/tokens/functional/typography/typography.json",
     "isSource": true,
@@ -537,7 +537,7 @@
     "path": ["text", "caption", "weight"]
   },
   "text-caption-shorthand": {
-    "value": "400 0.75rem/1.3333 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+    "value": "400 0.75rem,12px/1.3333 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
     "$type": "typography",
     "comment": "Compact small font with a smaller line height of 16px. Use it for single-line scenarios, as the small sizing doesn’t pass accessibility requirements.",
     "filePath": "src/tokens/functional/typography/typography.json",
@@ -557,7 +557,7 @@
     "path": ["text", "caption", "shorthand"]
   },
   "text-codeBlock-size": {
-    "value": "0.8125rem",
+    "value": ["0.8125rem", "13px"],
     "$type": "dimension",
     "filePath": "src/tokens/functional/typography/typography.json",
     "isSource": true,
@@ -596,7 +596,7 @@
     "path": ["text", "codeBlock", "weight"]
   },
   "text-codeBlock-shorthand": {
-    "value": "400 0.8125rem/1.5385 ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace",
+    "value": "400 0.8125rem,13px/1.5385 ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace",
     "$type": "typography",
     "comment": "Default style for rendering code blocks.",
     "filePath": "src/tokens/functional/typography/typography.json",
@@ -616,7 +616,7 @@
     "path": ["text", "codeBlock", "shorthand"]
   },
   "text-codeInline-size": {
-    "value": "0.9285em",
+    "value": ["0.9285em", "14.856px"],
     "$type": "dimension",
     "filePath": "src/tokens/functional/typography/typography.json",
     "isSource": true,
@@ -642,7 +642,7 @@
     "path": ["text", "codeInline", "weight"]
   },
   "text-codeInline-shorthand": {
-    "value": "400 0.9285em ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace",
+    "value": "400 0.9285em,14.856px ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace",
     "$type": "typography",
     "comment": "Inline code blocks using em units to inherit size from its parent.",
     "filePath": "src/tokens/functional/typography/typography.json",

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@primer/primitives",
-  "version": "7.16.0",
+  "version": "7.17.0-rc.132f02a7",
   "description": "Typography, spacing, and color primitives for Primer design system",
   "files": [
     "dist",
     "tokens-v2-private",
-    "tokens-next-private",
     "build.js",
-    "tokens/"
+    "tokens/",
+    "src/**/*",
+    "!src/**/*.test.ts"
   ],
   "main": "dist/js/index.js",
   "types": "dist/js/index.d.ts",
@@ -44,7 +45,7 @@
     "lint:tokens": "ts-node ./scripts/validateTokenJson.ts",
     "prebuild": "rm -rf dist",
     "prebuild:tokens": "rm -rf tokens-v2-private",
-    "prebuild:next": "rm -rf tokens-next-private",
+    "prebuild:next": "rm -rf dist",
     "prepack": "npm run build && npm run build:tokens && npm run build:next",
     "prepare": "husky",
     "release": "changeset publish",
@@ -54,11 +55,11 @@
   },
   "prettier": "@github/prettier-config",
   "devDependencies": {
-    "@actions/github": "^5.1.1",
-    "@changesets/changelog-github": "^0.4.8",
-    "@changesets/cli": "^2.22.0",
+    "@actions/github": "^6.0.0",
+    "@changesets/changelog-github": "^0.5.0",
+    "@changesets/cli": "^2.27.1",
     "@github/prettier-config": "^0.0.6",
-    "@playwright/test": "^1.42.1",
+    "@playwright/test": "^1.43.0",
     "@types/flat": "^5.0.1",
     "@types/jest": "^29.5.2",
     "@types/lodash": "^4.14.195",
@@ -89,9 +90,9 @@
     "mkdirp": "^3.0.1",
     "prettier": "^2.7.1",
     "style-dictionary": "^3.9.2",
-    "ts-jest": "^29.1.1",
-    "ts-node": "^10.9.1",
-    "typescript": "^5.4.4",
+    "ts-jest": "^29.1.2",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.4.5",
     "zod": "^3.22.4",
     "zod-validation-error": "^3.1.0"
   }