@primer/primitives 11.1.0-rc.f0583fc7 → 11.2.0-rc.1012e204

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/primitives",
-  "version": "11.1.0-rc.f0583fc7",
+  "version": "11.2.0-rc.1012e204",
   "description": "Typography, spacing, and color primitives for Primer design system",
   "type": "module",
   "files": [
@@ -52,29 +52,29 @@
     "@changesets/cli": "^2.27.7",
     "@github/prettier-config": "^0.0.6",
     "@playwright/test": "^1.47.1",
-    "@types/node": "22.9",
-    "@typescript-eslint/eslint-plugin": "8.15",
-    "@typescript-eslint/parser": "8.15",
-    "@vitest/coverage-v8": "^2.0.3",
+    "@types/node": "^24.3.0",
+    "@typescript-eslint/eslint-plugin": "^8.41.0",
+    "@typescript-eslint/parser": "^8.41.0",
+    "@vitest/coverage-v8": "^3.2.4",
     "color-blend": "^4.0.0",
     "color2k": "^2.0.3",
     "console-table-printer": "^2.12.1",
-    "eslint": "9.16",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-react": "7.37",
-    "eslint-import-resolver-typescript": "3.6",
-    "eslint-plugin-github": "^5.1.3",
+    "eslint": "^9.34.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-import-resolver-typescript": "^4.4.4",
+    "eslint-plugin-github": "^6.0.0",
     "eslint-plugin-jsx-a11y": "6.10",
+    "eslint-plugin-react": "7.37",
     "eslint-plugin-react-hooks": "^5.0.0",
     "json5": "^2.2.1",
     "markdown-table-ts": "^1.0.3",
     "prettier": "^3.3.3",
     "style-dictionary": "^5.0.0",
-    "tsx": "^4.19.0",
-    "typescript": "5.6",
-    "typescript-eslint": "^8.16.0",
-    "vitest": "^2.0.3",
-    "zod": "3.23",
-    "zod-validation-error": "3.4"
+    "tsx": "^4.20.5",
+    "typescript": "^5.9.2",
+    "typescript-eslint": "^8.41.0",
+    "vitest": "^3.2.4",
+    "zod": "^4.1.3",
+    "zod-validation-error": "^4.0.1"
   }
 }

package/src/tokens/component/progressBar.json5

@@ -0,0 +1,145 @@
+{
+  progressBar: {
+    track: {
+      bgColor: {
+        $value: '{borderColor.default}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            group: 'component',
+            scopes: ['bgColor'],
+          },
+          'org.primer.overrides': {
+            'dark-high-contrast': '{bgColor.inverse}',
+            'dark-dimmed-high-contrast': '{bgColor.inverse}',
+            'dark-protanopia-deuteranopia-high-contrast': '{bgColor.inverse}',
+            'dark-tritanopia-high-contrast': '{bgColor.inverse}',
+            'light-high-contrast': '{bgColor.default}',
+            'light-protanopia-deuteranopia-high-contrast': '{bgColor.default}',
+            'light-tritanopia-high-contrast': '{bgColor.default}',
+          },
+        },
+      },
+      borderColor: {
+        $value: '{base.color.transparent}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            group: 'component',
+            scopes: ['borderColor'],
+          },
+          'org.primer.overrides': {
+            'dark-high-contrast': '{progressBar.track.bgColor}',
+            'dark-dimmed-high-contrast': '{progressBar.track.bgColor}',
+            'dark-protanopia-deuteranopia-high-contrast': '{progressBar.track.bgColor}',
+            'dark-tritanopia-high-contrast': '{progressBar.track.bgColor}',
+            'light-high-contrast': '{base.color.neutral.11}',
+            'light-protanopia-deuteranopia-high-contrast': '{base.color.neutral.11}',
+            'light-tritanopia-high-contrast': '{base.color.neutral.11}',
+          },
+        },
+      },
+    },
+    bgColor: {
+      danger: {
+        $value: '{bgColor.danger.emphasis}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            group: 'component',
+            scopes: ['bgColor'],
+          },
+        },
+      },
+      severe: {
+        $value: '{bgColor.severe.emphasis}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            group: 'component',
+            scopes: ['bgColor'],
+          },
+        },
+      },
+      sponsors: {
+        $value: '{bgColor.sponsors.emphasis}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            group: 'component',
+            scopes: ['bgColor'],
+          },
+        },
+      },
+      done: {
+        $value: '{bgColor.done.emphasis}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            group: 'component',
+            scopes: ['bgColor'],
+          },
+        },
+      },
+      accent: {
+        $value: '{bgColor.accent.emphasis}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            group: 'component',
+            scopes: ['bgColor'],
+          },
+        },
+      },
+      success: {
+        $value: '{bgColor.success.emphasis}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            group: 'component',
+            scopes: ['bgColor'],
+          },
+        },
+      },
+      neutral: {
+        $value: '{bgColor.neutral.emphasis}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            group: 'component',
+            scopes: ['bgColor'],
+          },
+          'org.primer.overrides': {
+            'dark-high-contrast': '{base.color.neutral.8}',
+            'dark-dimmed-high-contrast': '{base.color.neutral.8}',
+            'dark-protanopia-deuteranopia-high-contrast': '{base.color.neutral.8}',
+            'dark-tritanopia-high-contrast': '{base.color.neutral.8}',
+            'light-high-contrast': '{base.color.neutral.8}',
+            'light-protanopia-deuteranopia-high-contrast': '{base.color.neutral.8}',
+            'light-tritanopia-high-contrast': '{base.color.neutral.8}',
+          },
+        },
+      },
+      attention: {
+        $value: '{bgColor.attention.emphasis}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            group: 'component',
+            scopes: ['bgColor'],
+          },
+        },
+      },
+    },
+  },
+}

package/src/tokens/functional/color/bgColor.json5

@@ -592,6 +592,54 @@
         },
       },
     },
+    draft: {
+      muted: {
+        $value: '{bgColor.neutral.muted}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            group: 'semantic',
+            scopes: ['bgColor'],
+            codeSyntax: {
+              web: 'var(--bgColor-draft-muted)',
+            },
+          },
+          'org.primer.overrides': {
+            'light-tritanopia': '{bgColor.neutral.muted}',
+            'light-tritanopia-high-contrast': '{bgColor.neutral.muted}',
+            'dark-tritanopia': {
+              $value: '{bgColor.neutral.muted}',
+              alpha: 0.1,
+            },
+            'light-protanopia-deuteranopia': '{bgColor.neutral.muted}',
+            'light-protanopia-deuteranopia-high-contrast': '{bgColor.neutral.muted}',
+            'dark-protanopia-deuteranopia': {
+              $value: '{bgColor.neutral.muted}',
+              alpha: 0.1,
+            },
+            'dark-protanopia-deuteranopia-high-contrast': {
+              $value: '{bgColor.neutral.muted}',
+              alpha: 0.1,
+            },
+          },
+        },
+      },
+      emphasis: {
+        $value: '{bgColor.neutral.emphasis}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            group: 'semantic',
+            scopes: ['bgColor'],
+            codeSyntax: {
+              web: 'var(--bgColor-draft-emphasis)',
+            },
+          },
+        },
+      },
+    },
     done: {
       muted: {
         $value: '{base.color.purple.0}',

package/src/tokens/functional/color/borderColor.json5

@@ -734,6 +734,70 @@
         },
       },
     },
+    draft: {
+      muted: {
+        $value: '{borderColor.neutral.muted}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            group: 'semantic',
+            scopes: ['borderColor'],
+            codeSyntax: {
+              web: 'var(--borderColor-draft-muted) */',
+            },
+          },
+          'org.primer.overrides': {
+            'dark-tritanopia': {
+              $value: '{borderColor.default}',
+              alpha: 0.4,
+            },
+            'dark-tritanopia-high-contrast': {
+              $value: '{borderColor.default}',
+              alpha: 1,
+            },
+            'light-tritanopia': {
+              $value: '{borderColor.default}',
+              alpha: 0.4,
+            },
+            'light-tritanopia-high-contrast': {
+              $value: '{borderColor.default}',
+              alpha: 1,
+            },
+            'dark-protanopia-deuteranopia': {
+              $value: '{borderColor.default}',
+              alpha: 0.4,
+            },
+            'dark-protanopia-deuteranopia-high-contrast': {
+              $value: '{borderColor.default}',
+              alpha: 1,
+            },
+            'light-protanopia-deuteranopia': {
+              $value: '{borderColor.default}',
+              alpha: 0.4,
+            },
+            'light-protanopia-deuteranopia-high-contrast': {
+              $value: '{borderColor.default}',
+              alpha: 1,
+            },
+          },
+        },
+      },
+      emphasis: {
+        $value: '{borderColor.neutral.emphasis}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            group: 'semantic',
+            scopes: ['borderColor'],
+            codeSyntax: {
+              web: 'var(--borderColor-draft-emphasis)',
+            },
+          },
+        },
+      },
+    },
     done: {
       muted: {
         $value: '{base.color.purple.3}',

package/src/tokens/functional/color/fgColor.json5

@@ -335,6 +335,20 @@
         },
       },
     },
+    draft: {
+      $value: '{fgColor.neutral}',
+      $type: 'color',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'mode',
+          group: 'semantic',
+          scopes: ['fgColor'],
+          codeSyntax: {
+            web: 'var(--fgColor-draft)',
+          },
+        },
+      },
+    },
     done: {
       $value: '{base.color.purple.5}',
       $type: 'color',