@primer/primitives 10.8.0-rc.f296f65b → 11.0.0-rc.56d48488

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/primitives",
-  "version": "10.8.0-rc.f296f65b",
+  "version": "11.0.0-rc.56d48488",
   "description": "Typography, spacing, and color primitives for Primer design system",
   "type": "module",
   "files": [

package/src/tokens/base/color/dark/dark.dimmed.json5

@@ -5,15 +5,6 @@
 {
   base: {
     color: {
-      black: {
-        $value: '#1c2128',
-        $type: 'color',
-        $extensions: {
-          'org.primer.figma': {
-            collection: 'base/color/dark-dimmed',
-          },
-        },
-      },
       white: {
         $value: '#cdd9e5',
         $type: 'color',

package/src/tokens/component/avatar.json5

@@ -28,12 +28,25 @@
         },
         'org.primer.overrides': {
           'dark-high-contrast': {
-            $value: '{base.color.neutral.13}',
-            alpha: 0.9,
+            $value: '{borderColor.emphasis}',
+          },
+          'dark-dimmed-high-contrast': {
+            $value: '{borderColor.emphasis}',
           },
           'light-high-contrast': {
-            $value: '{base.color.neutral.13}',
-            alpha: 0.9,
+            $value: '{borderColor.emphasis}',
+          },
+          'light-tritanopia-high-contrast': {
+            $value: '{borderColor.emphasis}',
+          },
+          'light-protanopia-deuteranopia-high-contrast': {
+            $value: '{borderColor.emphasis}',
+          },
+          'dark-tritanopia-high-contrast': {
+            $value: '{borderColor.emphasis}',
+          },
+          'dark-protanopia-deuteranopia-high-contrast': {
+            $value: '{borderColor.emphasis}',
           },
         },
       },

package/src/tokens/component/button.json5

@@ -192,6 +192,9 @@
               'dark-dimmed': {
                 $value: '#ffffff',
               },
+              'dark-dimmed-high-contrast': {
+                $value: '#ffffff',
+              },
             },
           },
         },
@@ -235,6 +238,9 @@
               'dark-dimmed': {
                 $value: '#ffffff',
               },
+              'dark-dimmed-high-contrast': {
+                $value: '#ffffff',
+              },
             },
           },
         },
@@ -275,21 +281,36 @@
               'dark-dimmed': {
                 $value: '#3b8640',
               },
+              'dark-dimmed-high-contrast': {
+                $value: '{base.color.green.6}',
+              },
               'dark-tritanopia': {
                 $value: '#2a7aef',
               },
+              'dark-tritanopia-high-contrast': {
+                $value: '#2a7aef',
+              },
               'dark-protanopia-deuteranopia': {
                 $value: '#2a7aef',
               },
+              'dark-protanopia-deuteranopia-high-contrast': {
+                $value: '#2a7aef',
+              },
               'dark-high-contrast': {
                 $value: '#08792b',
               },
               'light-tritanopia': {
                 $value: '#0864d1',
               },
+              'light-tritanopia-high-contrast': {
+                $value: '#0864d1',
+              },
               'light-protanopia-deuteranopia': {
                 $value: '#0864d1',
               },
+              'light-protanopia-deuteranopia-high-contrast': {
+                $value: '#0864d1',
+              },
               'light-high-contrast': {
                 $value: '#04571e',
               },
@@ -312,21 +333,36 @@
               'dark-dimmed': {
                 $value: '#428f46',
               },
+              'dark-dimmed-high-contrast': {
+                $value: '{base.color.green.5}',
+              },
               'dark-tritanopia': {
                 $value: '#3685f3',
               },
+              'dark-tritanopia-high-contrast': {
+                $value: '#3685f3',
+              },
               'dark-protanopia-deuteranopia': {
                 $value: '#3685f3',
               },
+              'dark-protanopia-deuteranopia-high-contrast': {
+                $value: '#3685f3',
+              },
               'dark-high-contrast': {
                 $value: '#109135',
               },
               'light-tritanopia': {
                 $value: '#075fc8',
               },
+              'light-tritanopia-high-contrast': {
+                $value: '#075fc8',
+              },
               'light-protanopia-deuteranopia': {
                 $value: '#075fc8',
               },
+              'light-protanopia-deuteranopia-high-contrast': {
+                $value: '#075fc8',
+              },
               'light-high-contrast': {
                 $value: '#03501b',
               },
@@ -347,23 +383,35 @@
                 $value: '#105823',
               },
               'dark-dimmed': {
-                $value: '#50a254',
+                $value: '#105823',
               },
               'dark-tritanopia': {
                 $value: '#5fabfe',
               },
+              'dark-tritanopia-high-contrast': {
+                $value: '#5fabfe',
+              },
               'dark-protanopia-deuteranopia': {
                 $value: '{base.color.blue.6}',
               },
+              'dark-protanopia-deuteranopia-high-contrast': {
+                $value: '{base.color.blue.6}',
+              },
               'dark-high-contrast': {
                 $value: '#048f2f',
               },
               'light-tritanopia': {
                 $value: '#92caff',
               },
+              'light-tritanopia-high-contrast': {
+                $value: '#92caff',
+              },
               'light-protanopia-deuteranopia': {
                 $value: '#92caff',
               },
+              'light-protanopia-deuteranopia-high-contrast': {
+                $value: '#92caff',
+              },
               'light-high-contrast': {
                 $value: '#85cb97',
               },
@@ -373,7 +421,7 @@
       },
       borderColor: {
         rest: {
-          $value: '{base.color.neutral.13}',
+          $value: '{borderColor.translucent}',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -382,21 +430,36 @@
               scopes: ['borderColor'],
             },
             'org.primer.overrides': {
-              dark: {
-                $value: '{base.color.neutral.13}',
-                alpha: 0.1,
-              },
               'dark-high-contrast': {
                 $value: '{base.color.green.2}',
                 alpha: 1,
               },
+              'dark-dimmed-high-contrast': {
+                $value: '{base.color.green.2}',
+                alpha: 1,
+              },
+              'dark-protanopia-deuteranopia-high-contrast': {
+                $value: '{base.color.blue.2}',
+                alpha: 1,
+              },
+              'dark-tritanopia-high-contrast': {
+                $value: '{base.color.blue.2}',
+                alpha: 1,
+              },
               'light-high-contrast': {
                 $value: '{base.color.green.7}',
                 alpha: 1,
               },
+              'light-protanopia-deuteranopia-high-contrast': {
+                $value: '{base.color.blue.7}',
+                alpha: 1,
+              },
+              'light-tritanopia-high-contrast': {
+                $value: '{base.color.blue.7}',
+                alpha: 1,
+              },
             },
           },
-          alpha: 0.15,
         },
         hover: {
           $value: '{button.primary.borderColor.rest}',
@@ -407,19 +470,6 @@
               group: 'component (internal)',
               scopes: ['borderColor'],
             },
-            'org.primer.overrides': {
-              dark: {
-                $value: '{button.primary.borderColor.rest}',
-              },
-              'dark-high-contrast': {
-                $value: '{base.color.green.2}',
-                alpha: 1,
-              },
-              'light-high-contrast': {
-                $value: '{base.color.green.7}',
-                alpha: 1,
-              },
-            },
           },
         },
         active: {
@@ -431,19 +481,6 @@
               group: 'component (internal)',
               scopes: ['borderColor'],
             },
-            'org.primer.overrides': {
-              dark: {
-                $value: '{button.primary.borderColor.rest}',
-              },
-              'dark-high-contrast': {
-                $value: '{base.color.green.2}',
-                alpha: 1,
-              },
-              'light-high-contrast': {
-                $value: '{base.color.green.7}',
-                alpha: 1,
-              },
-            },
           },
         },
         disabled: {
@@ -460,14 +497,20 @@
                 $value: '#105823',
               },
               'dark-dimmed': {
-                $value: '#50a254',
+                $value: '#105823',
               },
               'dark-tritanopia': {
                 $value: '#5fabfe',
               },
+              'dark-tritanopia-high-contrast': {
+                $value: '#5fabfe',
+              },
               'dark-protanopia-deuteranopia': {
                 $value: '#1158c7',
               },
+              'dark-protanopia-deuteranopia-high-contrast': {
+                $value: '#1158c7',
+              },
               'dark-high-contrast': {
                 $value: '{base.color.green.2}',
                 alpha: 0.4,
@@ -577,6 +620,12 @@
               'light-high-contrast': {
                 $value: '{base.color.neutral.11}',
               },
+              'light-protanopia-deuteranopia-high-contrast': {
+                $value: '{base.color.neutral.11}',
+              },
+              'light-tritanopia-high-contrast': {
+                $value: '{base.color.neutral.11}',
+              },
             },
           },
         },
@@ -633,6 +682,15 @@
               'dark-high-contrast': {
                 $value: '{base.color.neutral.11}',
               },
+              'dark-dimmed-high-contrast': {
+                $value: '{base.color.neutral.11}',
+              },
+              'dark-protanopia-deuteranopia-high-contrast': {
+                $value: '{base.color.neutral.11}',
+              },
+              'dark-tritanopia-high-contrast': {
+                $value: '{base.color.neutral.11}',
+              },
             },
           },
         },
@@ -652,12 +710,27 @@
               'dark-dimmed': {
                 $value: '{base.color.neutral.10}',
               },
+              'dark-dimmed-high-contrast': {
+                $value: '{base.color.neutral.11}',
+              },
               'dark-high-contrast': {
                 $value: '{base.color.neutral.11}',
               },
+              'dark-protanopia-deuteranopia-high-contrast': {
+                $value: '{base.color.neutral.11}',
+              },
+              'dark-tritanopia-high-contrast': {
+                $value: '{base.color.neutral.11}',
+              },
               'light-high-contrast': {
                 $value: '{base.color.neutral.11}',
               },
+              'light-protanopia-deuteranopia-high-contrast': {
+                $value: '{base.color.neutral.11}',
+              },
+              'light-tritanopia-high-contrast': {
+                $value: '{base.color.neutral.11}',
+              },
             },
           },
         },
@@ -712,6 +785,14 @@
                 $value: '{base.color.neutral.2}',
                 alpha: null,
               },
+              'dark-protanopia-deuteranopia-high-contrast': {
+                $value: '{base.color.neutral.2}',
+                alpha: null,
+              },
+              'dark-tritanopia-high-contrast': {
+                $value: '{base.color.neutral.2}',
+                alpha: null,
+              },
             },
           },
         },
@@ -732,6 +813,14 @@
                 $value: '{base.color.neutral.3}',
                 alpha: null,
               },
+              'dark-protanopia-deuteranopia-high-contrast': {
+                $value: '{base.color.neutral.3}',
+                alpha: null,
+              },
+              'dark-tritanopia-high-contrast': {
+                $value: '{base.color.neutral.3}',
+                alpha: null,
+              },
             },
           },
         },
@@ -927,9 +1016,18 @@
               'dark-tritanopia': {
                 $value: '#0d419d',
               },
+              'dark-tritanopia-high-contrast': {
+                $value: '#0d419d',
+              },
               'light-high-contrast': {
                 $value: '#033f9d',
               },
+              'light-tritanopia-high-contrast': {
+                $value: '#033f9d',
+              },
+              'light-protanopia-deuteranopia-high-contrast': {
+                $value: '#033f9d',
+              },
             },
           },
         },
@@ -967,6 +1065,15 @@
               dark: {
                 $value: '{button.default.borderColor.hover}',
               },
+              'light-high-contrast': {
+                $value: '{base.color.blue.7}',
+              },
+              'light-protanopia-deuteranopia-high-contrast': {
+                $value: '{base.color.blue.7}',
+              },
+              'light-tritanopia-high-contrast': {
+                $value: '{base.color.blue.7}',
+              },
             },
           },
         },
@@ -1038,12 +1145,21 @@
               'dark-dimmed': {
                 $value: '#ea5c53',
               },
+              'dark-dimmed-high-contrast': {
+                $value: '{base.color.red.1}',
+              },
               'dark-protanopia-deuteranopia': {
                 $value: '{fgColor.danger}',
               },
               'dark-high-contrast': {
                 $value: '{base.color.red.2}',
               },
+              'dark-tritanopia-high-contrast': {
+                $value: '{base.color.red.2}',
+              },
+              'dark-protanopia-deuteranopia-high-contrast': {
+                $value: '{base.color.orange.2}',
+              },
             },
           },
         },
@@ -1060,6 +1176,12 @@
               dark: {
                 $value: '{base.color.neutral.13}',
               },
+              'dark-dimmed-high-contrast': {
+                $value: '#ffffff',
+              },
+              'dark-dimmed': {
+                $value: '#ffffff',
+              },
             },
           },
         },
@@ -1076,6 +1198,12 @@
               dark: {
                 $value: '{base.color.neutral.13}',
               },
+              'dark-dimmed-high-contrast': {
+                $value: '#ffffff',
+              },
+              'dark-dimmed': {
+                $value: '#ffffff',
+              },
             },
           },
         },
@@ -1100,7 +1228,7 @@
       },
       iconColor: {
         rest: {
-          $value: '{fgColor.danger}',
+          $value: '{button.danger.fgColor.rest}',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -1108,20 +1236,6 @@
               group: 'component (internal)',
               scopes: ['fgColor'],
             },
-            'org.primer.overrides': {
-              dark: {
-                $value: '#FA5E55',
-              },
-              'dark-dimmed': {
-                $value: '#ea5c53',
-              },
-              'dark-protanopia-deuteranopia': {
-                $value: '#f0883e',
-              },
-              'dark-high-contrast': {
-                $value: '#ffb1af',
-              },
-            },
           },
         },
         hover: {
@@ -1137,6 +1251,9 @@
               dark: {
                 $value: '{base.color.neutral.13}',
               },
+              'dark-dimmed-high-contrast': {
+                $value: '#ffffff',
+              },
             },
           },
         },
@@ -1159,7 +1276,7 @@
           },
         },
         hover: {
-          $value: '{base.color.red.6}',
+          $value: '{bgColor.danger.emphasis}',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -1175,16 +1292,22 @@
                 $value: '{base.color.orange.6}',
               },
               'dark-high-contrast': {
-                $value: '{bgColor.danger.emphasis}',
+                $value: '{base.color.red.9}',
               },
-              'light-protanopia-deuteranopia': {
-                $value: '{base.color.orange.6}',
+              'dark-dimmed-high-contrast': {
+                $value: '{base.color.red.7}',
+              },
+              'dark-protanopia-deuteranopia-high-contrast': {
+                $value: '{base.color.orange.9}',
+              },
+              'dark-tritanopia-high-contrast': {
+                $value: '{base.color.red.9}',
               },
             },
           },
         },
         active: {
-          $value: '#8b0820',
+          $value: '{base.color.red.6}',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -1194,22 +1317,31 @@
             },
             'org.primer.overrides': {
               dark: {
-                $value: '#D03533',
+                $value: '{bgColor.danger.emphasis}',
               },
               'dark-dimmed': {
-                $value: '#c33d38',
+                $value: '{bgColor.danger.emphasis}',
+              },
+              'dark-dimmed-high-contrast': {
+                $value: '{bgColor.danger.emphasis}',
               },
               'dark-protanopia-deuteranopia': {
-                $value: '#b5531d',
+                $value: '{bgColor.danger.emphasis}',
               },
               'dark-high-contrast': {
                 $value: '{bgColor.danger.emphasis}',
               },
+              'dark-tritanopia-high-contrast': {
+                $value: '{bgColor.danger.emphasis}',
+              },
+              'dark-protanopia-deuteranopia-high-contrast': {
+                $value: '{bgColor.danger.emphasis}',
+              },
               'light-protanopia-deuteranopia': {
-                $value: '#7e2f00',
+                $value: '{base.color.orange.6}',
               },
-              'light-high-contrast': {
-                $value: '#74041a',
+              'light-protanopia-deuteranopia-high-contrast': {
+                $value: '{base.color.orange.6}',
               },
             },
           },
@@ -1265,10 +1397,30 @@
                 $value: '{base.color.red.2}',
                 alpha: 1,
               },
+              'dark-dimmed-high-contrast': {
+                $value: '{base.color.red.1}',
+                alpha: 1,
+              },
+              'dark-protanopia-deuteranopia-high-contrast': {
+                $value: '{base.color.orange.2}',
+                alpha: 1,
+              },
+              'dark-tritanopia-high-contrast': {
+                $value: '{base.color.red.2}',
+                alpha: 1,
+              },
               'light-high-contrast': {
                 $value: '{base.color.red.7}',
                 alpha: 1,
               },
+              'light-protanopia-deuteranopia-high-contrast': {
+                $value: '{base.color.orange.7}',
+                alpha: 1,
+              },
+              'light-tritanopia-high-contrast': {
+                $value: '{base.color.red.7}',
+                alpha: 1,
+              },
             },
           },
         },
@@ -1364,9 +1516,21 @@
             'dark-high-contrast': {
               $value: '{base.color.neutral.10}',
             },
+            'dark-protanopia-deuteranopia-high-contrast': {
+              $value: '{base.color.neutral.10}',
+            },
+            'dark-tritanopia-high-contrast': {
+              $value: '{base.color.neutral.10}',
+            },
             'light-high-contrast': {
               $value: '{base.color.neutral.10}',
             },
+            'light-protanopia-deuteranopia-high-contrast': {
+              $value: '{base.color.neutral.10}',
+            },
+            'light-tritanopia-high-contrast': {
+              $value: '{base.color.neutral.10}',
+            },
           },
         },
       },
@@ -1432,6 +1596,8 @@
                 $value: '{base.color.neutral.6}',
               },
               'light-high-contrast': '{base.color.neutral.7}',
+              'light-protanopia-deuteranopia-high-contrast': '{base.color.neutral.7}',
+              'light-tritanopia-high-contrast': '{base.color.neutral.7}',
             },
           },
         },
@@ -1477,6 +1643,14 @@
                 $value: '{base.color.neutral.0}',
                 alpha: 0.15,
               },
+              'dark-tritanopia-high-contrast': {
+                $value: '{base.color.neutral.0}',
+                alpha: 0.15,
+              },
+              'dark-protanopia-deuteranopia-high-contrast': {
+                $value: '{base.color.neutral.0}',
+                alpha: 0.15,
+              },
             },
           },
           alpha: 0.2,
@@ -1613,6 +1787,14 @@
                 $value: '{base.color.neutral.0}',
                 alpha: 0.15,
               },
+              'dark-protanopia-deuteranopia-high-contrast': {
+                $value: '{base.color.neutral.0}',
+                alpha: 0.15,
+              },
+              'dark-tritanopia-high-contrast': {
+                $value: '{base.color.neutral.0}',
+                alpha: 0.15,
+              },
             },
           },
           alpha: 0.2,
@@ -1653,6 +1835,14 @@
                 $value: '{base.color.neutral.0}',
                 alpha: 0.15,
               },
+              'dark-protanopia-deuteranopia-high-contrast': {
+                $value: '{base.color.neutral.0}',
+                alpha: 0.15,
+              },
+              'dark-tritanopia-high-contrast': {
+                $value: '{base.color.neutral.0}',
+                alpha: 0.15,
+              },
             },
           },
           alpha: 0.1,
@@ -1673,7 +1863,16 @@
                 $value: '{fgColor.danger}',
               },
               'light-high-contrast': {
-                $value: '#980e1e',
+                $value: '{fgColor.danger}',
+              },
+              'light-tritanopia-high-contrast': {
+                $value: '{fgColor.danger}',
+              },
+              'light-protanopia-deuteranopia': {
+                $value: '{base.color.orange.6}',
+              },
+              'light-protanopia-deuteranopia-high-contrast': {
+                $value: '{fgColor.danger}',
               },
             },
           },