@primer/primitives 10.2.0 → 10.3.0-rc.22c9c6cf

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/primitives",
-  "version": "10.2.0",
+  "version": "10.3.0-rc.22c9c6cf",
   "description": "Typography, spacing, and color primitives for Primer design system",
   "type": "module",
   "files": [
@@ -70,7 +70,7 @@
     "json5": "^2.2.1",
     "markdown-table-ts": "^1.0.3",
     "prettier": "^3.3.3",
-    "style-dictionary": "^4.1.3",
+    "style-dictionary": "^4.3.0",
     "tsx": "^4.19.0",
     "typescript": "5.6",
     "typescript-eslint": "^8.16.0",

package/src/tokens/component/diffBlob.json5

@@ -0,0 +1,387 @@
+{
+  diffBlob: {
+    additionLine: {
+      fgColor: {
+        $value: '{fgColor.default}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            group: 'component',
+            scopes: ['fgColor'],
+          },
+          'org.primer.overrides': {
+            'dark-high-contrast': '{fgColor.onEmphasis}',
+          },
+        },
+      },
+      bgColor: {
+        $value: '{bgColor.success.muted}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            group: 'component',
+            scopes: ['bgColor'],
+          },
+          'org.primer.overrides': {
+            dark: {
+              alpha: 0.15,
+            },
+            'dark-high-contrast': {
+              $value: '{bgColor.success.muted}',
+              alpha: 0.2,
+            },
+          },
+        },
+      },
+    },
+    additionWord: {
+      fgColor: {
+        $value: '{fgColor.default}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            group: 'component',
+            scopes: ['fgColor'],
+          },
+          'org.primer.overrides': {
+            'light-high-contrast': '{fgColor.onEmphasis}',
+          },
+        },
+      },
+      bgColor: {
+        $value: '{base.color.green.1}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            group: 'component',
+            scopes: ['bgColor'],
+          },
+          'org.primer.overrides': {
+            dark: {
+              $value: '{base.color.green.4}',
+              alpha: 0.4,
+            },
+            'light-protanopia-deuteranopia': '{base.color.blue.1}',
+            'dark-protanopia-deuteranopia': {
+              $value: '{base.color.blue.4}',
+              alpha: 0.4,
+            },
+            'light-high-contrast': '{base.color.green.5}',
+            'dark-high-contrast': '{bgColor.success.emphasis}',
+            'light-tritanopia': '{base.color.blue.1}',
+            'dark-tritanopia': {
+              $value: '{base.color.blue.4}',
+              alpha: 0.4,
+            },
+          },
+        },
+      },
+    },
+    additionNum: {
+      fgColor: {
+        $value: '{fgColor.default}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            group: 'component',
+            scopes: ['fgColor'],
+          },
+        },
+      },
+      bgColor: {
+        $value: '{base.color.green.1}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            group: 'component',
+            scopes: ['bgColor'],
+          },
+          'org.primer.overrides': {
+            dark: {
+              $value: '{base.color.green.3}',
+              alpha: 0.3,
+            },
+            'light-protanopia-deuteranopia': '{base.color.blue.1}',
+            'light-tritanopia': '{base.color.blue.1}',
+            'dark-tritanopia': {
+              $value: '{base.color.blue.3}',
+              alpha: 0.3,
+            },
+            'dark-protanopia-deuteranopia': {
+              $value: '{base.color.blue.3}',
+              alpha: 0.3,
+            },
+          },
+        },
+      },
+    },
+    deletionLine: {
+      fgColor: {
+        $value: '{fgColor.default}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            group: 'component',
+            scopes: ['fgColor'],
+          },
+          'org.primer.overrides': {
+            'dark-high-contrast': '{fgColor.onEmphasis}',
+          },
+        },
+      },
+      bgColor: {
+        $value: '{bgColor.danger.muted}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            group: 'component',
+            scopes: ['bgColor'],
+          },
+          'org.primer.overrides': {
+            'dark-protanopia-deuteranopia': {
+              $value: '{base.color.orange.4}',
+              alpha: 0.15,
+            },
+            'dark-high-contrast': {
+              $value: '{bgColor.danger.muted}',
+              alpha: 0.2,
+            },
+          },
+        },
+      },
+    },
+    deletionWord: {
+      fgColor: {
+        $value: '{fgColor.default}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            group: 'component',
+            scopes: ['fgColor'],
+          },
+          'org.primer.overrides': {
+            'light-high-contrast': '{fgColor.onEmphasis}',
+          },
+        },
+      },
+      bgColor: {
+        $value: '{base.color.red.1}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            group: 'component',
+            scopes: ['bgColor'],
+          },
+          'org.primer.overrides': {
+            dark: {
+              $value: '{base.color.red.4}',
+              alpha: 0.4,
+            },
+            'light-protanopia-deuteranopia': '{base.color.orange.1}',
+            'dark-protanopia-deuteranopia': {
+              $value: '{base.color.orange.4}',
+              alpha: 0.4,
+            },
+            'light-high-contrast': '{base.color.red.5}',
+            'dark-high-contrast': '{bgColor.danger.emphasis}',
+            'light-tritanopia': '{base.color.red.1}',
+          },
+        },
+      },
+    },
+    deletionNum: {
+      fgColor: {
+        $value: '{fgColor.default}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            group: 'component',
+            scopes: ['fgColor'],
+          },
+        },
+      },
+      bgColor: {
+        $value: '{base.color.red.1}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            group: 'component',
+            scopes: ['bgColor'],
+          },
+          'org.primer.overrides': {
+            dark: {
+              $value: '{base.color.red.4}',
+              alpha: 0.3,
+            },
+            'light-tritanopia': '{base.color.red.1}',
+            'light-protanopia-deuteranopia': '{base.color.orange.1}',
+            'dark-protanopia-deuteranopia': {
+              $value: '{base.color.orange.4}',
+              alpha: 0.3,
+            },
+          },
+        },
+      },
+    },
+    hunkLine: {
+      bgColor: {
+        $value: '{bgColor.accent.muted}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            group: 'component',
+            scopes: ['bgColor'],
+          },
+          'org.primer.overrides': {
+            'light-tritanopia': '{base.color.neutral.1}',
+            'dark-tritanopia': '{base.color.neutral.3}',
+            'light-protanopia-deuteranopia': '{base.color.neutral.1}',
+            'dark-protanopia-deuteranopia': '{base.color.neutral.3}',
+            'dark-high-contrast': {
+              $value: '{bgColor.accent.muted}',
+              alpha: 0.2,
+            },
+          },
+        },
+      },
+      fgColor: {
+        $value: '{fgColor.muted}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            group: 'component',
+            scopes: ['fgColor'],
+          },
+        },
+      },
+    },
+    hunkNum: {
+      fgColor: {
+        rest: {
+          $value: '{fgColor.default}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'mode',
+              group: 'component',
+              scopes: ['fgColor'],
+            },
+          },
+        },
+        hover: {
+          $value: '{fgColor.onEmphasis}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'mode',
+              group: 'component',
+              scopes: ['fgColor'],
+            },
+            'org.primer.overrides': {
+              'light-protanopia-deuteranopia': '{fgColor.default}',
+              'light-tritanopia': '{fgColor.default}',
+            },
+          },
+        },
+      },
+      bgColor: {
+        rest: {
+          $value: '{base.color.blue.1}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'mode',
+              group: 'component',
+              scopes: ['bgColor'],
+            },
+            'org.primer.overrides': {
+              dark: '{base.color.blue.8}',
+              'light-tritanopia': '{base.color.neutral.3}',
+              'light-protanopia-deuteranopia': '{base.color.neutral.3}',
+              'dark-protanopia-deuteranopia': '{base.color.neutral.6}',
+              'dark-tritanopia': '{base.color.neutral.6}',
+              'dark-high-contrast': {
+                $value: '{base.color.blue.4}',
+                alpha: 0.4,
+              },
+            },
+          },
+        },
+        hover: {
+          $value: '{bgColor.accent.emphasis}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'mode',
+              group: 'component',
+              scopes: ['bgColor'],
+            },
+            'org.primer.overrides': {
+              'light-tritanopia': '{base.color.neutral.7}',
+              'dark-tritanopia': '{base.color.neutral.8}',
+              'light-protanopia-deuteranopia': '{base.color.neutral.7}',
+              'dark-protanopia-deuteranopia': '{base.color.neutral.8}',
+            },
+          },
+        },
+      },
+    },
+    emptyNum: {
+      bgColor: {
+        $value: '{bgColor.muted}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            group: 'component',
+            scopes: ['bgColor'],
+          },
+        },
+      },
+    },
+    emptyLine: {
+      bgColor: {
+        $value: '{bgColor.muted}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            group: 'component',
+            scopes: ['bgColor'],
+          },
+        },
+      },
+    },
+    expander: {
+      iconColor: {
+        $value: '{fgColor.muted}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            group: 'component',
+            scopes: ['fgColor'],
+          },
+          'org.primer.overrides': {
+            'light-high-contrast': '{fgColor.default}',
+            'dark-high-contrast': '{fgColor.default}',
+          },
+        },
+      },
+    },
+  },
+}

package/src/tokens/component/header.json5

@@ -0,0 +1,65 @@
+{
+  header: {
+    bgColor: {
+      $value: '{base.color.neutral.12}',
+      $type: 'color',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'mode',
+          group: 'component (internal)',
+          scopes: ['bgColor'],
+        },
+        'org.primer.overrides': {
+          dark: {
+            $value: '{base.color.neutral.2}',
+            alpha: 0.95,
+          },
+        },
+      },
+    },
+    fgColor: {
+      default: {
+        $value: '{base.color.neutral.0}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            group: 'component (internal)',
+            scopes: ['fgColor'],
+          },
+          'org.primer.overrides': {
+            dark: '{base.color.neutral.13}',
+          },
+        },
+        alpha: 0.7,
+      },
+      logo: {
+        $value: '{base.color.neutral.0}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            group: 'component (internal)',
+            scopes: ['fgColor'],
+          },
+          'org.primer.overrides': {
+            dark: '{base.color.neutral.12}',
+          },
+        },
+      },
+    },
+    borderColor: {
+      divider: {
+        $value: '{base.color.neutral.8}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            group: 'component (internal)',
+            scopes: ['borderColor'],
+          },
+        },
+      },
+    },
+  },
+}

package/src/tokens/component/headerSerach.json5

@@ -0,0 +1,32 @@
+{
+  headerSearch: {
+    bgColor: {
+      $value: '{base.color.neutral.12}',
+      $type: 'color',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'mode',
+          group: 'component (internal)',
+          scopes: ['bgColor'],
+        },
+        'org.primer.overrides': {
+          dark: '{base.color.neutral.1}',
+        },
+      },
+    },
+    borderColor: {
+      $value: '{base.color.neutral.8}',
+      $type: 'color',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'mode',
+          group: 'component (internal)',
+          scopes: ['borderColor'],
+        },
+        'org.primer.overrides': {
+          dark: '{base.color.neutral.5}',
+        },
+      },
+    },
+  },
+}

package/src/tokens/component/highlight.json5

@@ -0,0 +1,23 @@
+{
+  highlight: {
+    neutral: {
+      bgColor: {
+        $value: '{base.color.yellow.0}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            group: 'component',
+            scopes: ['bgColor'],
+          },
+          'org.primer.overrides': {
+            dark: {
+              $value: '{base.color.yellow.3}',
+              alpha: 0.4,
+            },
+          },
+        },
+      },
+    },
+  },
+}

package/src/tokens/component/overlay.json5

@@ -0,0 +1,68 @@
+{
+  overlay: {
+    bgColor: {
+      $value: '{base.color.neutral.0}',
+      $type: 'color',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'mode',
+          group: 'component (internal)',
+          scopes: ['bgColor'],
+        },
+        'org.primer.overrides': {
+          dark: '{bgColor.muted}',
+          'dark-dimmed': '{base.color.neutral.5}',
+        },
+      },
+    },
+    borderColor: {
+      $value: '{borderColor.muted}',
+      $type: 'color',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'mode',
+          group: 'component (internal)',
+        },
+        'org.primer.overrides': {
+          dark: {
+            alpha: 1,
+            $value: '{borderColor.muted}',
+          },
+          'dark-dimmed': {
+            $value: '{base.color.neutral.7}',
+            alpha: 0.7,
+          },
+          'light-high-contrast': {
+            alpha: 1,
+            $value: '{borderColor.default}',
+          },
+          'dark-high-contrast': {
+            $value: '{borderColor.default}',
+            alpha: 1,
+          },
+        },
+      },
+      alpha: 0.5,
+    },
+    backdrop: {
+      bgColor: {
+        $value: '{base.color.neutral.7}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            group: 'component (internal)',
+            scopes: ['bgColor'],
+          },
+          'org.primer.overrides': {
+            dark: '{base.color.neutral.3}',
+            'dark-dimmed': '{base.color.neutral.4}',
+            'light-high-contrast': '{base.color.neutral.11}',
+            'dark-high-contrast': '{base.color.neutral.11}',
+          },
+        },
+        alpha: 0.4,
+      },
+    },
+  },
+}

package/src/tokens/component/page.json5

@@ -0,0 +1,20 @@
+{
+  page: {
+    header: {
+      bgColor: {
+        $value: '{bgColor.muted}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            group: 'component',
+            scopes: ['bgColor'],
+          },
+          'org.primer.overrides': {
+            dark: '{bgColor.default}',
+          },
+        },
+      },
+    },
+  },
+}

package/src/tokens/component/reactionButton.json5

@@ -0,0 +1,78 @@
+{
+  reactionButton: {
+    selected: {
+      bgColor: {
+        rest: {
+          $value: '{base.color.blue.0}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'mode',
+              group: 'component (internal)',
+              scopes: ['bgColor'],
+            },
+            'org.primer.overrides': {
+              dark: {
+                $value: '{base.color.blue.4}',
+                alpha: 0.2,
+              },
+            },
+          },
+        },
+        hover: {
+          $value: '#caecff',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'mode',
+              group: 'component (internal)',
+              scopes: ['bgColor'],
+            },
+            'org.primer.overrides': {
+              dark: {
+                $value: '#3a8cfd',
+                alpha: 0.36,
+              },
+              'dark-dimmed': {
+                $value: '#4285e5',
+                alpha: 0.36,
+              },
+              'light-high-contrast': '#c7e9ff',
+              'dark-high-contrast': {
+                $value: '#5dadff',
+                alpha: 0.36,
+              },
+            },
+          },
+        },
+      },
+      fgColor: {
+        rest: {
+          $value: '{fgColor.link}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'mode',
+              group: 'component (internal)',
+              scopes: ['fgColor'],
+            },
+          },
+        },
+        hover: {
+          $value: '{base.color.blue.6}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'mode',
+              group: 'component (internal)',
+              scopes: ['fgColor'],
+            },
+            'org.primer.overrides': {
+              dark: '{base.color.blue.2}',
+            },
+          },
+        },
+      },
+    },
+  },
+}