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

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

@@ -998,6 +998,130 @@
     "attributes": {},
     "path": ["bgColor", "done", "muted"]
   },
+  "bgColor-draft-emphasis": {
+    "key": "{bgColor.draft.emphasis}",
+    "$value": "#59636e",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "group": "semantic",
+        "scopes": ["bgColor"],
+        "codeSyntax": {
+          "web": "var(--bgColor-draft-emphasis)"
+        }
+      }
+    },
+    "filePath": "src/tokens/functional/color/bgColor.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{bgColor.neutral.emphasis}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "group": "semantic",
+          "scopes": ["bgColor"],
+          "codeSyntax": {
+            "web": "var(--bgColor-draft-emphasis)"
+          }
+        }
+      },
+      "key": "{bgColor.draft.emphasis}"
+    },
+    "name": "bgColor-draft-emphasis",
+    "attributes": {},
+    "path": ["bgColor", "draft", "emphasis"]
+  },
+  "bgColor-draft-muted": {
+    "key": "{bgColor.draft.muted}",
+    "$value": "#818b981f",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "group": "semantic",
+        "scopes": ["bgColor"],
+        "codeSyntax": {
+          "web": "var(--bgColor-draft-muted)"
+        }
+      },
+      "org.primer.overrides": {
+        "light-tritanopia": "#818b981f",
+        "light-tritanopia-high-contrast": "#818b981f",
+        "dark-tritanopia": {
+          "$value": "#818b981f",
+          "alpha": 0.1,
+          "filePath": "src/tokens/functional/color/bgColor.json5",
+          "isSource": true,
+          "$type": "color"
+        },
+        "light-protanopia-deuteranopia": "#818b981f",
+        "light-protanopia-deuteranopia-high-contrast": "#818b981f",
+        "dark-protanopia-deuteranopia": {
+          "$value": "#818b981f",
+          "alpha": 0.1,
+          "filePath": "src/tokens/functional/color/bgColor.json5",
+          "isSource": true,
+          "$type": "color"
+        },
+        "dark-protanopia-deuteranopia-high-contrast": {
+          "$value": "#818b981f",
+          "alpha": 0.1,
+          "filePath": "src/tokens/functional/color/bgColor.json5",
+          "isSource": true,
+          "$type": "color"
+        }
+      }
+    },
+    "filePath": "src/tokens/functional/color/bgColor.json5",
+    "isSource": true,
+    "original": {
+      "$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,
+            "filePath": "src/tokens/functional/color/bgColor.json5",
+            "isSource": true,
+            "$type": "color"
+          },
+          "light-protanopia-deuteranopia": "{bgColor.neutral.muted}",
+          "light-protanopia-deuteranopia-high-contrast": "{bgColor.neutral.muted}",
+          "dark-protanopia-deuteranopia": {
+            "$value": "{bgColor.neutral.muted}",
+            "alpha": 0.1,
+            "filePath": "src/tokens/functional/color/bgColor.json5",
+            "isSource": true,
+            "$type": "color"
+          },
+          "dark-protanopia-deuteranopia-high-contrast": {
+            "$value": "{bgColor.neutral.muted}",
+            "alpha": 0.1,
+            "filePath": "src/tokens/functional/color/bgColor.json5",
+            "isSource": true,
+            "$type": "color"
+          }
+        }
+      },
+      "key": "{bgColor.draft.muted}"
+    },
+    "name": "bgColor-draft-muted",
+    "attributes": {},
+    "path": ["bgColor", "draft", "muted"]
+  },
   "bgColor-emphasis": {
     "key": "{bgColor.emphasis}",
     "$value": "#25292e",
@@ -3691,6 +3815,192 @@
     "attributes": {},
     "path": ["borderColor", "done", "muted"]
   },
+  "borderColor-draft-emphasis": {
+    "key": "{borderColor.draft.emphasis}",
+    "$value": "#59636e",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "group": "semantic",
+        "scopes": ["borderColor"],
+        "codeSyntax": {
+          "web": "var(--borderColor-draft-emphasis)"
+        }
+      }
+    },
+    "filePath": "src/tokens/functional/color/borderColor.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{borderColor.neutral.emphasis}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "group": "semantic",
+          "scopes": ["borderColor"],
+          "codeSyntax": {
+            "web": "var(--borderColor-draft-emphasis)"
+          }
+        }
+      },
+      "key": "{borderColor.draft.emphasis}"
+    },
+    "name": "borderColor-draft-emphasis",
+    "attributes": {},
+    "path": ["borderColor", "draft", "emphasis"]
+  },
+  "borderColor-draft-muted": {
+    "key": "{borderColor.draft.muted}",
+    "$value": "#d1d9e0b3",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "group": "semantic",
+        "scopes": ["borderColor"],
+        "codeSyntax": {
+          "web": "var(--borderColor-draft-muted) */"
+        }
+      },
+      "org.primer.overrides": {
+        "dark-tritanopia": {
+          "$value": "#d1d9e0",
+          "alpha": 0.4,
+          "filePath": "src/tokens/functional/color/borderColor.json5",
+          "isSource": true,
+          "$type": "color"
+        },
+        "dark-tritanopia-high-contrast": {
+          "$value": "#d1d9e0",
+          "alpha": 1,
+          "filePath": "src/tokens/functional/color/borderColor.json5",
+          "isSource": true,
+          "$type": "color"
+        },
+        "light-tritanopia": {
+          "$value": "#d1d9e0",
+          "alpha": 0.4,
+          "filePath": "src/tokens/functional/color/borderColor.json5",
+          "isSource": true,
+          "$type": "color"
+        },
+        "light-tritanopia-high-contrast": {
+          "$value": "#d1d9e0",
+          "alpha": 1,
+          "filePath": "src/tokens/functional/color/borderColor.json5",
+          "isSource": true,
+          "$type": "color"
+        },
+        "dark-protanopia-deuteranopia": {
+          "$value": "#d1d9e0",
+          "alpha": 0.4,
+          "filePath": "src/tokens/functional/color/borderColor.json5",
+          "isSource": true,
+          "$type": "color"
+        },
+        "dark-protanopia-deuteranopia-high-contrast": {
+          "$value": "#d1d9e0",
+          "alpha": 1,
+          "filePath": "src/tokens/functional/color/borderColor.json5",
+          "isSource": true,
+          "$type": "color"
+        },
+        "light-protanopia-deuteranopia": {
+          "$value": "#d1d9e0",
+          "alpha": 0.4,
+          "filePath": "src/tokens/functional/color/borderColor.json5",
+          "isSource": true,
+          "$type": "color"
+        },
+        "light-protanopia-deuteranopia-high-contrast": {
+          "$value": "#d1d9e0",
+          "alpha": 1,
+          "filePath": "src/tokens/functional/color/borderColor.json5",
+          "isSource": true,
+          "$type": "color"
+        }
+      }
+    },
+    "filePath": "src/tokens/functional/color/borderColor.json5",
+    "isSource": true,
+    "original": {
+      "$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,
+            "filePath": "src/tokens/functional/color/borderColor.json5",
+            "isSource": true,
+            "$type": "color"
+          },
+          "dark-tritanopia-high-contrast": {
+            "$value": "{borderColor.default}",
+            "alpha": 1,
+            "filePath": "src/tokens/functional/color/borderColor.json5",
+            "isSource": true,
+            "$type": "color"
+          },
+          "light-tritanopia": {
+            "$value": "{borderColor.default}",
+            "alpha": 0.4,
+            "filePath": "src/tokens/functional/color/borderColor.json5",
+            "isSource": true,
+            "$type": "color"
+          },
+          "light-tritanopia-high-contrast": {
+            "$value": "{borderColor.default}",
+            "alpha": 1,
+            "filePath": "src/tokens/functional/color/borderColor.json5",
+            "isSource": true,
+            "$type": "color"
+          },
+          "dark-protanopia-deuteranopia": {
+            "$value": "{borderColor.default}",
+            "alpha": 0.4,
+            "filePath": "src/tokens/functional/color/borderColor.json5",
+            "isSource": true,
+            "$type": "color"
+          },
+          "dark-protanopia-deuteranopia-high-contrast": {
+            "$value": "{borderColor.default}",
+            "alpha": 1,
+            "filePath": "src/tokens/functional/color/borderColor.json5",
+            "isSource": true,
+            "$type": "color"
+          },
+          "light-protanopia-deuteranopia": {
+            "$value": "{borderColor.default}",
+            "alpha": 0.4,
+            "filePath": "src/tokens/functional/color/borderColor.json5",
+            "isSource": true,
+            "$type": "color"
+          },
+          "light-protanopia-deuteranopia-high-contrast": {
+            "$value": "{borderColor.default}",
+            "alpha": 1,
+            "filePath": "src/tokens/functional/color/borderColor.json5",
+            "isSource": true,
+            "$type": "color"
+          }
+        }
+      },
+      "key": "{borderColor.draft.muted}"
+    },
+    "name": "borderColor-draft-muted",
+    "attributes": {},
+    "path": ["borderColor", "draft", "muted"]
+  },
   "borderColor-emphasis": {
     "key": "{borderColor.emphasis}",
     "$value": "#818b98",
@@ -35123,6 +35433,41 @@
     "attributes": {},
     "path": ["fgColor", "done"]
   },
+  "fgColor-draft": {
+    "key": "{fgColor.draft}",
+    "$value": "#59636e",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "group": "semantic",
+        "scopes": ["fgColor"],
+        "codeSyntax": {
+          "web": "var(--fgColor-draft)"
+        }
+      }
+    },
+    "filePath": "src/tokens/functional/color/fgColor.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{fgColor.neutral}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "group": "semantic",
+          "scopes": ["fgColor"],
+          "codeSyntax": {
+            "web": "var(--fgColor-draft)"
+          }
+        }
+      },
+      "key": "{fgColor.draft}"
+    },
+    "name": "fgColor-draft",
+    "attributes": {},
+    "path": ["fgColor", "draft"]
+  },
   "fgColor-link": {
     "key": "{fgColor.link}",
     "$value": "#0969da",

package/package.json

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