@primer/primitives 10.3.3 → 10.3.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/primitives",
-  "version": "10.3.3",
+  "version": "10.3.4",
   "description": "Typography, spacing, and color primitives for Primer design system",
   "type": "module",
   "files": [

package/src/tokens/base/color/dark/dark.high-contrast.json5

@@ -14,15 +14,6 @@
           },
         },
       },
-      white: {
-        $value: '#ffffff',
-        $type: 'color',
-        $extensions: {
-          'org.primer.figma': {
-            collection: 'base/color/dark-high-contrast',
-          },
-        },
-      },
       blue: {
         '0': {
           $value: '#caeaff',

package/src/tokens/functional/color/{light/primitives-light.json5 → bgColor.json5}

@@ -1,257 +1,4 @@
 {
-  fgColor: {
-    default: {
-      $value: '{base.color.neutral.13}',
-      $type: 'color',
-      $extensions: {
-        'org.primer.figma': {
-          collection: 'mode',
-          group: 'semantic',
-          scopes: ['fgColor'],
-          codeSyntax: {
-            web: 'var(--fgColor-default) /* utility class: .color-fg-default */',
-          },
-        },
-      },
-    },
-    muted: {
-      $value: '{base.color.neutral.9}',
-      $type: 'color',
-      $extensions: {
-        'org.primer.figma': {
-          collection: 'mode',
-          group: 'semantic',
-          scopes: ['fgColor'],
-          codeSyntax: {
-            web: 'var(--fgColor-muted) /* utility class: .color-fg-muted */',
-          },
-        },
-      },
-    },
-    onEmphasis: {
-      $value: '{base.color.neutral.0}',
-      $type: 'color',
-      $extensions: {
-        'org.primer.figma': {
-          collection: 'mode',
-          group: 'semantic',
-          scopes: ['fgColor'],
-          codeSyntax: {
-            web: 'var(--fgColor-onEmphasis) /* utility class: .color-fg-on-emphasis */',
-          },
-        },
-      },
-    },
-    onInverse: {
-      $value: '{base.color.neutral.0}',
-      $type: 'color',
-      $extensions: {
-        'org.primer.figma': {
-          collection: 'mode',
-          group: 'semantic',
-          scopes: ['fgColor'],
-        },
-      },
-    },
-    white: {
-      $value: '{base.color.neutral.0}',
-      $type: 'color',
-      $extensions: {
-        'org.primer.figma': {
-          collection: 'mode',
-          group: 'semantic',
-          scopes: ['fgColor'],
-        },
-      },
-    },
-    black: {
-      $value: '{base.color.neutral.13}',
-      $type: 'color',
-      $extensions: {
-        'org.primer.figma': {
-          collection: 'mode',
-          group: 'semantic',
-          scopes: ['fgColor'],
-        },
-      },
-    },
-    disabled: {
-      $value: '{base.color.neutral.8}',
-      $type: 'color',
-      $extensions: {
-        'org.primer.figma': {
-          collection: 'mode',
-          group: 'semantic',
-          scopes: ['fgColor'],
-        },
-      },
-    },
-    link: {
-      $value: '{fgColor.accent}',
-      $type: 'color',
-      $extensions: {
-        'org.primer.figma': {
-          collection: 'mode',
-          group: 'semantic',
-          scopes: ['fgColor'],
-          codeSyntax: {
-            web: 'var(--fgColor-link) /* utility class: .color-fg-accent */',
-          },
-        },
-      },
-    },
-    neutral: {
-      $value: '{base.color.neutral.9}',
-      $type: 'color',
-      $extensions: {
-        'org.primer.figma': {
-          collection: 'mode',
-          group: 'semantic',
-          scopes: ['fgColor'],
-        },
-      },
-    },
-    accent: {
-      $value: '{base.color.blue.5}',
-      $type: 'color',
-      $extensions: {
-        'org.primer.figma': {
-          collection: 'mode',
-          group: 'semantic',
-          scopes: ['fgColor'],
-          codeSyntax: {
-            web: 'var(--fgColor-accent) /* utility class: .color-fg-accent */',
-          },
-        },
-      },
-    },
-    success: {
-      $value: '{base.color.green.5}',
-      $type: 'color',
-      $extensions: {
-        'org.primer.figma': {
-          collection: 'mode',
-          group: 'semantic',
-          scopes: ['fgColor'],
-          codeSyntax: {
-            web: 'var(--fgColor-success) /* utility class: .color-fg-success */',
-          },
-        },
-      },
-    },
-    open: {
-      $value: '{fgColor.success}',
-      $type: 'color',
-      $extensions: {
-        'org.primer.figma': {
-          collection: 'mode',
-          group: 'semantic',
-          scopes: ['fgColor'],
-          codeSyntax: {
-            web: 'var(--fgColor-open) /* utility class: .color-fg-open */',
-          },
-        },
-      },
-    },
-    attention: {
-      $value: '{base.color.yellow.5}',
-      $type: 'color',
-      $extensions: {
-        'org.primer.figma': {
-          collection: 'mode',
-          group: 'semantic',
-          scopes: ['fgColor'],
-          codeSyntax: {
-            web: 'var(--fgColor-attention) /* utility class: .color-fg-attention */',
-          },
-        },
-      },
-    },
-    severe: {
-      $value: '{base.color.orange.5}',
-      $type: 'color',
-      $extensions: {
-        'org.primer.figma': {
-          collection: 'mode',
-          group: 'semantic',
-          scopes: ['fgColor'],
-          codeSyntax: {
-            web: 'var(--fgColor-severe) /* utility class: .color-fg-severe */',
-          },
-        },
-      },
-    },
-    danger: {
-      $value: '#d1242f',
-      $type: 'color',
-      $extensions: {
-        'org.primer.figma': {
-          collection: 'mode',
-          group: 'semantic',
-          scopes: ['fgColor'],
-          codeSyntax: {
-            web: 'var(--fgColor-danger) /* utility class: .color-fg-danger */',
-          },
-        },
-      },
-    },
-    closed: {
-      $value: '{fgColor.danger}',
-      $type: 'color',
-      $extensions: {
-        'org.primer.figma': {
-          collection: 'mode',
-          group: 'semantic',
-          scopes: ['fgColor'],
-          codeSyntax: {
-            web: 'var(--fgColor-closed) /* utility class: .color-fg-closed */',
-          },
-        },
-      },
-    },
-    done: {
-      $value: '{base.color.purple.5}',
-      $type: 'color',
-      $extensions: {
-        'org.primer.figma': {
-          collection: 'mode',
-          group: 'semantic',
-          scopes: ['fgColor'],
-          codeSyntax: {
-            web: 'var(--fgColor-done) /* utility class: .color-fg-done */',
-          },
-        },
-      },
-    },
-    upsell: {
-      $value: '{fgColor.done}',
-      $type: 'color',
-      $extensions: {
-        'org.primer.figma': {
-          collection: 'mode',
-          group: 'semantic',
-          scopes: ['fgColor'],
-          codeSyntax: {
-            web: 'var(--fgColor-upsell)',
-          },
-        },
-      },
-    },
-    sponsors: {
-      $value: '{base.color.pink.5}',
-      $type: 'color',
-      $extensions: {
-        'org.primer.figma': {
-          collection: 'mode',
-          group: 'semantic',
-          scopes: ['fgColor'],
-          codeSyntax: {
-            web: 'var(--fgColor-sponsors) /* utility class: .color-fg-sponsors */',
-          },
-        },
-      },
-    },
-  },
   bgColor: {
     default: {
       $value: '{base.color.neutral.0}',
@@ -265,6 +12,10 @@
             web: 'var(--bgColor-default) /* utility class: .color-bg-default */',
           },
         },
+        'org.primer.overrides': {
+          dark: '{base.color.neutral.1}',
+          "dark-high-contrast": "{base.color.neutral.0}",
+        },
       },
     },
     muted: {
@@ -279,6 +30,11 @@
             web: 'var(--bgColor-muted) /* utility class: .color-bg-muted */',
           },
         },
+        'org.primer.overrides': {
+          dark: '{base.color.neutral.2}',
+          "light-high-contrast": "{base.color.neutral.3}",
+          "dark-high-contrast": "{base.color.neutral.2}",
+        },
       },
     },
     inset: {
@@ -293,6 +49,10 @@
             web: 'var(--bgColor-inset) /* utility class: .color-bg-inset */',
           },
         },
+        'org.primer.overrides': {
+          dark: '{base.color.neutral.0}',
+          "light-high-contrast": "{base.color.neutral.2}",
+        },
       },
     },
     emphasis: {
@@ -307,6 +67,9 @@
             web: 'var(--bgColor-emphasis) /* utility class: .color-bg-emphasis */',
           },
         },
+        'org.primer.overrides': {
+          dark: '{base.color.neutral.7}',
+        },
       },
     },
     inverse: {
@@ -318,6 +81,9 @@
           group: 'semantic',
           scopes: ['bgColor'],
         },
+        'org.primer.overrides': {
+          dark: '{base.color.neutral.13}',
+        },
       },
     },
     white: {
@@ -329,6 +95,9 @@
           group: 'semantic',
           scopes: ['bgColor'],
         },
+        'org.primer.overrides': {
+          dark: '{base.color.neutral.13}',
+        },
       },
     },
     black: {
@@ -340,6 +109,9 @@
           group: 'semantic',
           scopes: ['bgColor'],
         },
+        'org.primer.overrides': {
+          dark: '{base.color.neutral.0}',
+        },
       },
     },
     disabled: {
@@ -351,6 +123,11 @@
           group: 'semantic',
           scopes: ['bgColor'],
         },
+        'org.primer.overrides': {
+          dark: '{base.color.neutral.3}',
+          "light-high-contrast": "{base.color.neutral.4}",
+          "dark-high-contrast": "{base.color.neutral.4}",
+        },
       },
     },
     transparent: {
@@ -377,8 +154,19 @@
             group: 'semantic',
             scopes: ['bgColor'],
           },
+          'org.primer.overrides': {
+            light: {
+              $value: '{base.color.neutral.8}',
+              alpha: 0.12,
+            },
+            dark: {
+              $value: '{base.color.neutral.8}',
+              alpha: 0.2,
+            },
+            "light-high-contrast": "{base.color.neutral.4}",
+            "dark-high-contrast": "{base.color.neutral.3}",
+          },
         },
-        alpha: 0.12,
       },
       emphasis: {
         $value: '{base.color.neutral.9}',
@@ -389,6 +177,11 @@
             group: 'semantic',
             scopes: ['bgColor'],
           },
+          'org.primer.overrides': {
+            dark: '{base.color.neutral.8}',
+            "light-high-contrast": "{base.color.neutral.10}",
+            "dark-high-contrast": "{base.color.neutral.7}",
+          },
         },
       },
     },
@@ -405,6 +198,12 @@
               web: 'var(--bgColor-accent-muted) /* utility class: .color-bg-accent */',
             },
           },
+          'org.primer.overrides': {
+            dark: {
+              $value: '{base.color.blue.4}',
+              alpha: 0.1,
+            },
+          },
         },
       },
       emphasis: {
@@ -419,6 +218,10 @@
               web: 'var(--bgColor-accent-emphasis) /* utility class: .color-bg-accent-emphasis */',
             },
           },
+          'org.primer.overrides': {
+            dark: '{base.color.blue.5}',
+            "dark-high-contrast": "{base.color.blue.9}",
+          },
         },
       },
     },
@@ -435,6 +238,23 @@
               web: 'var(--bgColor-success-muted) /* utility class: .color-bg-success */',
             },
           },
+          'org.primer.overrides': {
+            dark: {
+              $value: '{base.color.green.4}',
+              alpha: 0.15,
+            },
+            'light-tritanopia': '{base.color.blue.0}',
+            'dark-tritanopia': {
+              $value: '{base.color.blue.4}',
+              alpha: 0.15,
+            },
+            'light-protanopia-deuteranopia': '{base.color.blue.0}',
+            'dark-protanopia-deuteranopia': {
+              $value: '{base.color.blue.4}',
+              alpha: 0.2,
+            },
+            
+          },
         },
       },
       emphasis: {
@@ -449,6 +269,15 @@
               web: 'var(--bgColor-success-emphasis) /* utility class: .color-bg-success-emphasis */',
             },
           },
+          'org.primer.overrides': {
+            dark: '{base.color.green.5}',
+            'light-tritanopia': '{base.color.blue.5}',
+            'dark-tritanopia': '{base.color.blue.5}',
+            'light-protanopia-deuteranopia': '{base.color.blue.5}',
+            'dark-protanopia-deuteranopia': '{base.color.blue.5}',
+            "light-high-contrast": "{base.color.green.5}",
+            "dark-high-contrast": "{base.color.green.9}",
+          },
         },
       },
     },
@@ -465,6 +294,18 @@
               web: 'var(--bgColor-success-muted) /* utility class: .color-bg-success */',
             },
           },
+          'org.primer.overrides': {
+            'light-tritanopia': '{base.color.red.0}',
+            'dark-tritanopia': {
+              $value: '{base.color.red.4}',
+              alpha: 0.1,
+            },
+            'light-protanopia-deuteranopia': '{base.color.orange.0}',
+            'dark-protanopia-deuteranopia': {
+              $value: '{base.color.orange.4}',
+              alpha: 0.1,
+            },
+          },
         },
       },
       emphasis: {
@@ -479,6 +320,12 @@
               web: 'var(--bgColor-success-emphasis) /* utility class: .color-bg-success-emphasis */',
             },
           },
+          'org.primer.overrides': {
+            'light-tritanopia': '{base.color.red.5}',
+            'dark-tritanopia': '{base.color.red.5}',
+            'light-protanopia-deuteranopia': '{base.color.orange.5}',
+            'dark-protanopia-deuteranopia': '{base.color.orange.5}',
+          },
         },
       },
     },
@@ -495,6 +342,12 @@
               web: 'var(--bgColor-attention-muted) /* utility class: .color-bg-attention */',
             },
           },
+          'org.primer.overrides': {
+            dark: {
+              $value: '{base.color.yellow.4}',
+              alpha: 0.15,
+            },
+          },
         },
       },
       emphasis: {
@@ -509,6 +362,9 @@
               web: 'var(--bgColor-attention-emphasis) /* utility class: .color-bg-attention-emphasis */',
             },
           },
+          'org.primer.overrides': {
+            "dark-high-contrast": "{base.color.yellow.9}",
+          },
         },
       },
     },
@@ -525,6 +381,17 @@
               web: 'var(--bgColor-severe-muted) /* utility class: .color-bg-severe */',
             },
           },
+          'org.primer.overrides': {
+            dark: {
+              $value: '{base.color.orange.4}',
+              alpha: 0.1,
+            },
+            'light-tritanopia': '{base.color.red.0}',
+            'dark-tritanopia': {
+              $value: '{base.color.red.4}',
+              alpha: 0.1,
+            },
+          },
         },
       },
       emphasis: {
@@ -539,6 +406,11 @@
               web: 'var(--bgColor-severe-emphasis) /* utility class: .color-bg-severe-emphasis */',
             },
           },
+          'org.primer.overrides': {
+            'light-tritanopia': '{base.color.red.5}',
+            'dark-tritanopia': '{base.color.red.5}',
+            "dark-high-contrast": "{base.color.orange.9}",
+          },
         },
       },
     },
@@ -555,6 +427,17 @@
               web: 'var(--bgColor-danger-muted) /* utility class: .color-bg-danger */',
             },
           },
+          'org.primer.overrides': {
+            dark: {
+              $value: '{base.color.red.4}',
+              alpha: 0.1,
+            },
+            'light-protanopia-deuteranopia': '{base.color.orange.0}',
+            'dark-protanopia-deuteranopia': {
+              $value: '{base.color.orange.4}',
+              alpha: 0.1,
+            },
+          },
         },
       },
       emphasis: {
@@ -569,6 +452,11 @@
               web: 'var(--bgColor-danger-emphasis) /* utility class: .color-bg-danger-emphasis */',
             },
           },
+          'org.primer.overrides': {
+            'light-protanopia-deuteranopia': '{base.color.orange.5}',
+            "dark-protanopia-deuteranopia": "{base.color.orange.5}",
+            "dark-high-contrast": "{base.color.red.9}",
+          },
         },
       },
     },
@@ -585,6 +473,18 @@
               web: 'var(--bgColor-closed-muted) /* utility class: .color-bg-closed */',
             },
           },
+          'org.primer.overrides': {
+            'light-tritanopia': '{bgColor.neutral.muted}',
+            'dark-tritanopia': {
+              $value: '{bgColor.neutral.muted}',
+              alpha: 0.1,
+            },
+            'light-protanopia-deuteranopia': '{bgColor.neutral.muted}',
+            'dark-protanopia-deuteranopia': {
+              $value: '{bgColor.neutral.muted}',
+              alpha: 0.1,
+            },
+          },
         },
       },
       emphasis: {
@@ -599,6 +499,12 @@
               web: 'var(--bgColor-closed-emphasis) /* utility class: .color-bg-closed-emphasis */',
             },
           },
+          'org.primer.overrides': {
+            'light-tritanopia': '{bgColor.neutral.emphasis}',
+            'dark-tritanopia': '{bgColor.neutral.emphasis}',
+            'light-protanopia-deuteranopia': '{bgColor.neutral.emphasis}',
+            'dark-protanopia-deuteranopia': '{bgColor.neutral.emphasis}',
+          },
         },
       },
     },
@@ -615,6 +521,12 @@
               web: 'var(--bgColor-done-muted) /* utility class: .color-bg-done */',
             },
           },
+          'org.primer.overrides': {
+            dark: {
+              $value: '{base.color.purple.4}',
+              alpha: 0.15,
+            },
+          },
         },
       },
       emphasis: {
@@ -629,6 +541,9 @@
               web: 'var(--bgColor-done-emphasis) /* utility class: .color-bg-done-emphasis */',
             },
           },
+          'org.primer.overrides': {
+            "dark-high-contrast": "{base.color.purple.9}",
+          },
         },
       },
     },
@@ -675,6 +590,16 @@
               web: 'var(--bgColor-sponsors-muted) /* utility class: .color-bg-sponsors */',
             },
           },
+          'org.primer.overrides': {
+            dark: {
+              $value: '{base.color.pink.4}',
+              alpha: 0.1,
+            },
+            'dark-tritanopia': {
+              $value: '#db61a2',
+              alpha: 0.1,
+            },
+          },
         },
       },
       emphasis: {
@@ -689,6 +614,9 @@
               web: 'var(--bgColor-sponsors-emphasis) /* utility class: .color-bg-sponsors-emphasis */',
             },
           },
+          'org.primer.overrides': {
+"dark-high-contrast": "{base.color.pink.9}",
+          },
         },
       },
     },

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

@@ -279,6 +279,14 @@
               $value: '{base.color.red.3}',
               alpha: 0.4,
             },
+            'dark-protanopia-deuteranopia': {
+              $value: '{base.color.orange.4}',
+              alpha: 0.4,
+            },
+            'light-protanopia-deuteranopia': {
+              $value: '{base.color.orange.3}',
+              alpha: 0.4,
+            },
           },
         },
       },
@@ -297,6 +305,8 @@
           'org.primer.overrides': {
             'dark-tritanopia': '{base.color.red.5}',
             'light-tritanopia': '{base.color.red.5}',
+            'dark-protanopia-deuteranopia': '{base.color.orange.5}',
+            'light-protanopia-deuteranopia': '{base.color.orange.5}',
           },
         },
       },
@@ -470,6 +480,10 @@
               $value: '{borderColor.default}',
               alpha: 0.4,
             },
+            'dark-protanopia-deuteranopia': {
+              $value: '{borderColor.default}',
+              alpha: 0.4,
+            },
             'light-protanopia-deuteranopia': {
               $value: '{borderColor.default}',
               alpha: 0.4,

package/src/tokens/functional/color/dark/overrides/dark.dimmed.json5

@@ -28,25 +28,6 @@
       },
     },
   },
-  fgColor: {
-    default: {
-      $value: '{base.color.neutral.11}',
-      $type: 'color',
-    },
-    onEmphasis: {
-      $value: '{base.color.neutral.12}',
-      $type: 'color',
-    },
-    disabled: {
-      $value: '{base.color.neutral.8}',
-      $type: 'color',
-      alpha: 1,
-    },
-    accent: {
-      $value: '#478be6',
-      $type: 'color',
-    },
-  },
   control: {
     bgColor: {
       rest: {