@primer/primitives 10.1.0-rc.f1589f93 → 10.1.0

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

@@ -67,6 +67,13 @@
         $type: 'color',
       },
     },
+    sponsors: {
+      muted: {
+        $value: '#db61a2',
+        $type: 'color',
+        alpha: 0.1,
+      },
+    },
   },
   borderColor: {
     success: {
@@ -146,7 +153,6 @@
         rest: {
           $value: '{base.color.neutral.6}',
           $type: 'color',
-          mix: null,
           $extensions: {
             alpha: 1,
           },
@@ -154,7 +160,6 @@
         hover: {
           $value: '{base.color.neutral.8}',
           $type: 'color',
-          mix: null,
           $extensions: {
             alpha: 1,
           },
@@ -165,7 +170,6 @@
       bgColor: {
         $value: '{base.color.neutral.3}',
         $type: 'color',
-        mix: null,
         $extensions: {
           alpha: 1,
         },
@@ -186,28 +190,38 @@
     primary: {
       bgColor: {
         hover: {
-          $value: '{bgColor.success.emphasis}',
+          $value: '#2a7aef',
           $type: 'color',
-          mix: {
-            color: '{base.color.blue.3}',
-            weight: 0.2,
-          },
         },
         active: {
-          $value: '{bgColor.success.emphasis}',
+          $value: '#3685f3',
           $type: 'color',
-          mix: {
-            color: '{base.color.blue.3}',
-            weight: 0.4,
-          },
         },
         disabled: {
-          $value: '{base.color.blue.4}',
+          $value: '#5fabfe',
+          $type: 'color',
+        },
+      },
+      borderColor: {
+        disabled: {
+          $value: '#5fabfe',
+          $type: 'color',
+        },
+      },
+    },
+    outline: {
+      bgColor: {
+        hover: {
+          $value: '#262c36',
+          $type: 'color',
+        },
+        active: {
+          $value: '#0d419d',
+          $type: 'color',
+        },
+        disabled: {
+          $value: '#212830',
           $type: 'color',
-          mix: {
-            color: '{base.color.blue.2}',
-            weight: 0.6,
-          },
         },
       },
     },

package/src/tokens/functional/color/dark/patterns-dark.json5

@@ -399,7 +399,7 @@
           },
         },
         hover: {
-          $value: '{bgColor.accent.emphasis}',
+          $value: '#2A7AEF',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -408,13 +408,9 @@
               scopes: ['bgColor'],
             },
           },
-          mix: {
-            color: '{base.color.blue.3}',
-            weight: 0.2,
-          },
         },
         active: {
-          $value: '{bgColor.accent.emphasis}',
+          $value: '#3685F3',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -423,10 +419,6 @@
               scopes: ['bgColor'],
             },
           },
-          mix: {
-            color: '{base.color.blue.3}',
-            weight: 0.4,
-          },
         },
         disabled: {
           $value: '{fgColor.disabled}',
@@ -888,7 +880,7 @@
           },
         },
         hover: {
-          $value: '{bgColor.success.emphasis}',
+          $value: '#29903B',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -897,13 +889,9 @@
               scopes: ['bgColor'],
             },
           },
-          mix: {
-            color: '{base.color.green.3}',
-            weight: 0.2,
-          },
         },
         active: {
-          $value: '{bgColor.success.emphasis}',
+          $value: '#2E9A40',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -912,13 +900,9 @@
               scopes: ['bgColor'],
             },
           },
-          mix: {
-            color: '{base.color.green.3}',
-            weight: 0.4,
-          },
         },
         disabled: {
-          $value: '{base.color.green.5}',
+          $value: '#105823',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -927,10 +911,6 @@
               scopes: ['bgColor'],
             },
           },
-          mix: {
-            color: '{base.color.green.8}',
-            weight: 0.6,
-          },
         },
       },
       borderColor: {
@@ -969,7 +949,7 @@
           },
         },
         disabled: {
-          $value: '{button.primary.bgColor.disabled}',
+          $value: '#105823',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -1098,7 +1078,7 @@
           },
         },
         disabled: {
-          $value: '{control.transparent.bgColor.disabled}',
+          $value: '{base.color.transparent}',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -1133,7 +1113,7 @@
           },
         },
         disabled: {
-          $value: '{control.borderColor.disabled}',
+          $value: '{base.color.transparent}',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -1267,7 +1247,7 @@
     danger: {
       fgColor: {
         rest: {
-          $value: '{base.color.red.4}',
+          $value: '#FA5E55',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -1276,10 +1256,6 @@
               scopes: ['fgColor'],
             },
           },
-          mix: {
-            color: '{base.color.red.3}',
-            weight: 0.3,
-          },
         },
         hover: {
           $value: '{base.color.neutral.13}',
@@ -1318,7 +1294,7 @@
       },
       iconColor: {
         rest: {
-          $value: '{button.danger.fgColor.rest}',
+          $value: '#FA5E55',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -1364,7 +1340,7 @@
           },
         },
         active: {
-          $value: '{base.color.red.6}',
+          $value: '#D03533',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -1373,10 +1349,6 @@
               scopes: ['bgColor'],
             },
           },
-          mix: {
-            color: '{base.color.red.4}',
-            weight: 0.4,
-          },
         },
         disabled: {
           $value: '{control.bgColor.disabled}',
@@ -1680,7 +1652,7 @@
           alpha: 0.2,
         },
         hover: {
-          $value: '{reactionButton.selected.bgColor.rest}',
+          $value: '#3a8cfd',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -1689,11 +1661,7 @@
               scopes: ['bgColor'],
             },
           },
-          mix: {
-            color: '{base.color.blue.2}',
-            weight: 0.2,
-          },
-          alpha: 0.2,
+          alpha: 0.36,
         },
       },
       fgColor: {

package/src/tokens/functional/color/dark/primitives-dark.json5

@@ -122,7 +122,7 @@
       },
     },
     accent: {
-      $value: '{base.color.blue.3}',
+      $value: '#4493F8',
       $type: 'color',
       $extensions: {
         'org.primer.figma': {
@@ -135,10 +135,6 @@
           },
         },
       },
-      mix: {
-        color: '{base.color.blue.5}',
-        weight: 0.35,
-      },
     },
     success: {
       $value: '{base.color.green.3}',
@@ -833,7 +829,6 @@
       $extensions: {
         'org.primer.figma': {
           collection: 'mode',
-
           group: 'component (internal)',
           scopes: ['borderColor'],
         },

package/src/tokens/functional/color/light/overrides/light.high-contrast.json5

@@ -78,7 +78,6 @@
       emphasis: {
         $value: '{base.color.green.5}',
         $type: 'color',
-        mix: null,
       },
     },
     attention: {
@@ -287,16 +286,32 @@
           $value: '{bgColor.danger.emphasis}',
           $type: 'color',
           alpha: null,
-          mix: null,
         },
         active: {
-          $value: '{bgColor.danger.emphasis}',
+          $value: '#8c0b1d',
+          $type: 'color',
+        },
+      },
+    },
+    checked: {
+      bgColor: {
+        hover: {
+          $value: '#0344a8',
+          $type: 'color',
+        },
+        active: {
+          $value: '#033f9d',
+          $type: 'color',
+        },
+      },
+      borderColor: {
+        hover: {
+          $value: '#0344a8',
+          $type: 'color',
+        },
+        active: {
+          $value: '#033f9d',
           $type: 'color',
-          alpha: null,
-          mix: {
-            color: '{base.color.red.7}',
-            weight: 0.4,
-          },
         },
       },
     },
@@ -331,20 +346,16 @@
           $type: 'color',
         },
         hover: {
-          $value: '{base.color.green.5}',
+          $value: '#04571e',
           $type: 'color',
-          mix: {
-            color: '{base.color.green.7}',
-            weight: 0.2,
-          },
         },
         active: {
-          $value: '{base.color.green.5}',
+          $value: '#03501b',
+          $type: 'color',
+        },
+        disabled: {
+          $value: '#85cb97',
           $type: 'color',
-          mix: {
-            color: '{base.color.green.7}',
-            weight: 0.4,
-          },
         },
       },
       borderColor: {
@@ -363,6 +374,10 @@
           $type: 'color',
           alpha: 1,
         },
+        disabled: {
+          $value: '#85cb97',
+          $type: 'color',
+        },
       },
     },
     inactive: {
@@ -396,6 +411,22 @@
         },
       },
     },
+    outline: {
+      bgColor: {
+        active: {
+          $value: '#033f9d',
+          $type: 'color',
+        },
+      },
+    },
+    danger: {
+      bgColor: {
+        active: {
+          $value: '#74041a',
+          $type: 'color',
+        },
+      },
+    },
   },
   buttonCounter: {
     default: {
@@ -406,6 +437,14 @@
         },
       },
     },
+    danger: {
+      fgColor: {
+        rest: {
+          $value: '#980e1e',
+          $type: 'color',
+        },
+      },
+    },
   },
   diffBlob: {
     additionWord: {
@@ -416,7 +455,6 @@
       bgColor: {
         $value: '{base.color.green.5}',
         $type: 'color',
-        mix: null,
         alpha: 1,
       },
     },
@@ -428,7 +466,6 @@
       bgColor: {
         $value: '{base.color.red.5}',
         $type: 'color',
-        mix: null,
         alpha: 1,
       },
     },
@@ -821,4 +858,14 @@
       alpha: 1,
     },
   },
+  reactionButton: {
+    selected: {
+      bgColor: {
+        hover: {
+          $value: '#c7e9ff',
+          $type: 'color',
+        },
+      },
+    },
+  },
 }

package/src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5

@@ -31,7 +31,6 @@
       emphasis: {
         $value: '{base.color.blue.5}',
         $type: 'color',
-        mix: null,
       },
     },
     open: {
@@ -202,28 +201,16 @@
     primary: {
       bgColor: {
         hover: {
-          $value: '{bgColor.success.emphasis}',
+          $value: '#0864d1',
           $type: 'color',
-          mix: {
-            color: '{base.color.blue.6}',
-            weight: 0.2,
-          },
         },
         active: {
-          $value: '{bgColor.success.emphasis}',
+          $value: '#075fc8',
           $type: 'color',
-          mix: {
-            color: '{base.color.blue.6}',
-            weight: 0.4,
-          },
         },
         disabled: {
-          $value: '{base.color.blue.4}',
+          $value: '#92caff',
           $type: 'color',
-          mix: {
-            color: '{base.color.blue.0}',
-            weight: 0.6,
-          },
         },
       },
       shadow: {
@@ -250,12 +237,8 @@
           $type: 'color',
         },
         active: {
-          $value: '{base.color.orange.6}',
+          $value: '#7e2f00',
           $type: 'color',
-          mix: {
-            color: '{base.color.orange.8}',
-            weight: 0.4,
-          },
         },
       },
       shadow: {

package/src/tokens/functional/color/light/overrides/light.tritanopia.json5

@@ -31,7 +31,6 @@
       emphasis: {
         $value: '{base.color.blue.5}',
         $type: 'color',
-        mix: null,
       },
     },
     open: {
@@ -198,28 +197,16 @@
     primary: {
       bgColor: {
         hover: {
-          $value: '{bgColor.success.emphasis}',
+          $value: '#0864d1',
           $type: 'color',
-          mix: {
-            color: '{base.color.blue.6}',
-            weight: 0.2,
-          },
         },
         active: {
-          $value: '{bgColor.success.emphasis}',
+          $value: '#075fc8',
           $type: 'color',
-          mix: {
-            color: '{base.color.blue.6}',
-            weight: 0.4,
-          },
         },
         disabled: {
-          $value: '{base.color.blue.4}',
+          $value: '#92caff',
           $type: 'color',
-          mix: {
-            color: '{base.color.blue.0}',
-            weight: 0.6,
-          },
         },
       },
       shadow: {