@primer/primitives 9.0.0-rc.da7438e1 → 9.0.0-rc.fa8264ac

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

@@ -5,22 +5,20 @@
  */
 {
   fgColor: {
-    onEmphasis: {
-      $value: '{base.color.neutral.9}',
+    default: {
+      $value: '{base.color.white}',
       $type: 'color',
     },
     muted: {
-      $value: '{base.color.neutral.1}',
+      $value: '{base.color.neutral.9}',
       $type: 'color',
-      mix: null,
-      alpha: 1,
     },
     disabled: {
-      $value: '{base.color.neutral.4}',
+      $value: '{base.color.neutral.8}',
       $type: 'color',
     },
     neutral: {
-      $value: '{base.color.neutral.3}',
+      $value: '{base.color.neutral.9}',
       $type: 'color',
     },
     accent: {
@@ -49,26 +47,25 @@
     },
   },
   bgColor: {
+    default: {
+      $value: '{base.color.black}',
+      $type: 'color',
+    },
     muted: {
-      $value: '{base.color.neutral.9}',
+      $value: '{base.color.neutral.1}',
       $type: 'color',
-      mix: {
-        color: '{base.color.neutral.8}',
-        weight: 0.5,
-      },
     },
-    emphasis: {
-      $value: '{base.color.white}',
+    disabled: {
+      $value: '{base.color.neutral.3}',
+      $type: 'color',
+    },
+    disabled: {
+      $value: '{base.color.neutral.3}',
       $type: 'color',
     },
     neutral: {
-      muted: {
-        $value: '{base.color.neutral.5}',
-        $type: 'color',
-        alpha: 0.1,
-      },
       emphasis: {
-        $value: '{base.color.neutral.4}',
+        $value: '{base.color.neutral.6}',
         $type: 'color',
       },
     },
@@ -79,7 +76,7 @@
         alpha: 0.1,
       },
       emphasis: {
-        $value: '{base.color.blue.4}',
+        $value: '{base.color.blue.9}',
         $type: 'color',
       },
     },
@@ -90,7 +87,7 @@
         alpha: 0.14,
       },
       emphasis: {
-        $value: '{base.color.green.4}',
+        $value: '{base.color.green.9}',
         $type: 'color',
       },
     },
@@ -108,7 +105,7 @@
         alpha: 0.09,
       },
       emphasis: {
-        $value: '{base.color.red.4}',
+        $value: '{base.color.red.9}',
         $type: 'color',
       },
     },
@@ -126,13 +123,13 @@
         alpha: 0.088,
       },
       emphasis: {
-        $value: '{base.color.orange.4}',
+        $value: '{base.color.orange.9}',
         $type: 'color',
       },
     },
     attention: {
       emphasis: {
-        $value: '{base.color.yellow.4}',
+        $value: '{base.color.yellow.9}',
         $type: 'color',
       },
     },
@@ -143,15 +140,8 @@
         alpha: 0.09,
       },
       emphasis: {
-        $value: '{base.color.purple.4}',
-        $type: 'color',
-      },
-    },
-    upsell: {
-      muted: {
-        $value: '{bgColor.done.muted}',
+        $value: '{base.color.purple.9}',
         $type: 'color',
-        alpha: 0.09,
       },
     },
     upsell: {
@@ -168,40 +158,34 @@
         alpha: 0.09,
       },
       emphasis: {
-        $value: '{base.color.pink.4}',
+        $value: '{base.color.pink.9}',
         $type: 'color',
       },
     },
   },
   borderColor: {
     default: {
-      $value: '{base.color.neutral.5}',
+      $value: '{base.color.neutral.9}',
       $type: 'color',
     },
     muted: {
-      $value: '{base.color.neutral.5}',
+      $value: '{borderColor.default}',
       $type: 'color',
       alpha: 1,
     },
-    translucent: {
-      $value: '{base.color.neutral.5}',
+    emphasis: {
+      $value: '{borderColor.default}',
       $type: 'color',
-      alpha: 1,
     },
-    emphasis: {
-      $value: '{base.color.neutral.4}',
+    disabled: {
+      $value: '{base.color.neutral.8}',
       $type: 'color',
+      alpha: 0.12,
     },
-    neutral: {
-      muted: {
-        $value: '{base.color.neutral.4}',
-        $type: 'color',
-        alpha: 1,
-      },
-      emphasis: {
-        $value: '{base.color.neutral.4}',
-        $type: 'color',
-      },
+    translucent: {
+      $value: '{base.color.neutral.5}',
+      $type: 'color',
+      alpha: 1,
     },
     accent: {
       muted: {
@@ -274,25 +258,31 @@
       $type: 'color',
     },
   },
+  counter: {
+    borderColor: {
+      $value: '{borderColor.default}',
+      $type: 'color',
+    },
+  },
   control: {
     fgColor: {
       placeholder: {
-        $value: '{base.color.neutral.2}',
+        $value: '{base.color.neutral.9}',
         $type: 'color',
-        mix: {
-          color: '{base.color.neutral.1}',
-          weight: 0.5,
-        },
       },
     },
     bgColor: {
+      rest: {
+        $value: '{base.color.neutral.3}',
+        $type: 'color',
+      },
+      hover: {
+        $value: '{base.color.neutral.4}',
+        $type: 'color',
+      },
       active: {
-        $value: '{base.color.neutral.7}',
+        $value: '{base.color.neutral.5}',
         $type: 'color',
-        mix: {
-          color: '{base.color.neutral.8}',
-          weight: 0.2,
-        },
       },
     },
     borderColor: {
@@ -305,7 +295,7 @@
     transparent: {
       bgColor: {
         hover: {
-          $value: '{base.color.neutral.8}',
+          $value: '{base.color.neutral.5}',
           $type: 'color',
           alpha: 1,
         },
@@ -315,7 +305,7 @@
           alpha: 1,
         },
         selected: {
-          $value: '{base.color.neutral.6}',
+          $value: '{base.color.neutral.5}',
           $type: 'color',
           alpha: 1,
         },
@@ -326,18 +316,12 @@
           $type: 'color',
         },
         active: {
-          $value: '{base.color.neutral.4}',
+          $value: '{borderColor.default}',
           $type: 'color',
         },
       },
     },
     danger: {
-      fgColor: {
-        hover: {
-          $value: '{fgColor.onEmphasis}',
-          $type: 'color',
-        },
-      },
       bgColor: {
         hover: {
           $value: '{bgColor.danger.emphasis}',
@@ -354,6 +338,22 @@
         },
       },
     },
+    checked: {
+      borderColor: {
+        rest: {
+          $value: '{base.color.blue.2}',
+          $type: 'color',
+        },
+        hover: {
+          $value: '{base.color.blue.2}',
+          $type: 'color',
+        },
+        active: {
+          $value: '{base.color.blue.2}',
+          $type: 'color',
+        },
+      },
+    },
   },
   controlTrack: {
     fgColor: {
@@ -368,26 +368,23 @@
         $type: 'color',
       },
     },
+    bgColor: {
+      rest: {
+        $value: '{base.color.neutral.4}',
+        $type: 'color',
+      },
+      hover: {
+        $value: '{base.color.neutral.5}',
+        $type: 'color',
+      },
+      active: {
+        $value: '{base.color.neutral.6}',
+        $type: 'color',
+      },
+    },
   },
   button: {
     primary: {
-      fgColor: {
-        rest: {
-          $value: '{fgColor.onEmphasis}',
-          $type: 'color',
-        },
-        disabled: {
-          $value: '{fgColor.onEmphasis}',
-          $type: 'color',
-          alpha: 0.5,
-        },
-      },
-      iconColor: {
-        rest: {
-          $value: '{fgColor.onEmphasis}',
-          $type: 'color',
-        },
-      },
       borderColor: {
         rest: {
           $value: '{base.color.green.2}',
@@ -412,15 +409,13 @@
       },
     },
     invisible: {
-      fgColor: {
-        hover: {
-          $value: '{base.color.blue.8}',
+      iconColor: {
+        rest: {
+          $value: '{base.color.neutral.10}',
           $type: 'color',
         },
-      },
-      iconColor: {
         hover: {
-          $value: '{fgColor.onEmphasis}',
+          $value: '{base.color.neutral.10}',
           $type: 'color',
         },
       },
@@ -454,6 +449,43 @@
           },
         },
       },
+      borderColor: {
+        hover: {
+          $value: '{base.color.red.2}',
+          $type: 'color',
+          alpha: 1,
+        },
+        active: {
+          $value: '{base.color.red.2}',
+          $type: 'color',
+          alpha: 1,
+        },
+      },
+      bgColor: {
+        hover: {
+          $value: '{bgColor.danger.emphasis}',
+          $type: 'color',
+        },
+        active: {
+          $value: '{bgColor.danger.emphasis}',
+          $type: 'color',
+          alpha: 1,
+          mix: {
+            color: '{base.color.red.7}',
+            weight: 0.4,
+          },
+        },
+      },
+    },
+    inactive: {
+      bgColor: {
+        $value: '{control.bgColor.rest}',
+        $type: 'color',
+      },
+      fgColor: {
+        $value: '{base.color.neutral.9}',
+        $type: 'color',
+      },
     },
   },
   buttonCounter: {
@@ -491,7 +523,7 @@
       },
       bgColor: {
         word: {
-          $value: '{base.color.green.4}',
+          $value: '{bgColor.success.emphasis}',
           $type: 'color',
           alpha: 1,
         },
@@ -506,7 +538,7 @@
       },
       bgColor: {
         word: {
-          $value: '{base.color.red.5}',
+          $value: '{bgColor.danger.emphasis}',
           $type: 'color',
           alpha: 1,
         },
@@ -528,20 +560,6 @@
       },
     },
   },
-  underlineNav: {
-    borderColor: {
-      hover: {
-        $value: '{base.color.neutral.3}',
-        $type: 'color',
-      },
-    },
-    iconColor: {
-      rest: {
-        $value: '{base.color.neutral.1}',
-        $type: 'color',
-      },
-    },
-  },
   codeMirror: {
     selection: {
       bgColor: {
@@ -553,14 +571,15 @@
   },
   overlay: {
     borderColor: {
-      $value: '{borderColor.muted}',
+      $value: '{borderColor.default}',
       $type: 'color',
-      $extensions: {
-        'org.primer.figma': {
-          collection: 'mode',
-          mode: 'dark',
-          group: 'component (internal)',
-        },
+      alpha: null,
+    },
+    backdrop: {
+      bgColor: {
+        $value: '{base.color.neutral.10}',
+        $type: 'color',
+        alpha: 0.4,
       },
     },
   },
@@ -568,7 +587,7 @@
     blue: {
       bgColor: {
         emphasis: {
-          $value: '{base.display.color.blue.6}',
+          $value: '{base.display.color.blue.3}',
           $type: 'color',
         },
       },
@@ -586,7 +605,7 @@
     indigo: {
       bgColor: {
         emphasis: {
-          $value: '{base.display.color.indigo.6}',
+          $value: '{base.display.color.indigo.3}',
           $type: 'color',
         },
       },
@@ -604,7 +623,7 @@
     gray: {
       bgColor: {
         emphasis: {
-          $value: '{base.display.color.gray.6}',
+          $value: '{base.display.color.gray.3}',
           $type: 'color',
         },
       },
@@ -622,7 +641,7 @@
     cyan: {
       bgColor: {
         emphasis: {
-          $value: '{base.display.color.cyan.6}',
+          $value: '{base.display.color.cyan.3}',
           $type: 'color',
         },
       },
@@ -640,7 +659,7 @@
     teal: {
       bgColor: {
         emphasis: {
-          $value: '{base.display.color.teal.6}',
+          $value: '{base.display.color.teal.3}',
           $type: 'color',
         },
       },
@@ -658,7 +677,7 @@
     pine: {
       bgColor: {
         emphasis: {
-          $value: '{base.display.color.pine.6}',
+          $value: '{base.display.color.pine.3}',
           $type: 'color',
         },
       },
@@ -676,7 +695,7 @@
     green: {
       bgColor: {
         emphasis: {
-          $value: '{base.display.color.green.6}',
+          $value: '{base.display.color.green.3}',
           $type: 'color',
         },
       },
@@ -694,7 +713,7 @@
     lime: {
       bgColor: {
         emphasis: {
-          $value: '{base.display.color.lime.6}',
+          $value: '{base.display.color.lime.3}',
           $type: 'color',
         },
       },
@@ -712,7 +731,7 @@
     olive: {
       bgColor: {
         emphasis: {
-          $value: '{base.display.color.olive.6}',
+          $value: '{base.display.color.olive.3}',
           $type: 'color',
         },
       },
@@ -730,7 +749,7 @@
     lemon: {
       bgColor: {
         emphasis: {
-          $value: '{base.display.color.lemon.6}',
+          $value: '{base.display.color.lemon.3}',
           $type: 'color',
         },
       },
@@ -748,7 +767,7 @@
     yellow: {
       bgColor: {
         emphasis: {
-          $value: '{base.display.color.yellow.6}',
+          $value: '{base.display.color.yellow.3}',
           $type: 'color',
         },
       },
@@ -766,7 +785,7 @@
     orange: {
       bgColor: {
         emphasis: {
-          $value: '{base.display.color.orange.6}',
+          $value: '{base.display.color.orange.3}',
           $type: 'color',
         },
       },
@@ -784,7 +803,7 @@
     red: {
       bgColor: {
         emphasis: {
-          $value: '{base.display.color.red.6}',
+          $value: '{base.display.color.red.3}',
           $type: 'color',
         },
       },
@@ -802,7 +821,7 @@
     coral: {
       bgColor: {
         emphasis: {
-          $value: '{base.display.color.coral.6}',
+          $value: '{base.display.color.coral.3}',
           $type: 'color',
         },
       },
@@ -820,7 +839,7 @@
     pink: {
       bgColor: {
         emphasis: {
-          $value: '{base.display.color.pink.6}',
+          $value: '{base.display.color.pink.3}',
           $type: 'color',
         },
       },
@@ -838,7 +857,7 @@
     plum: {
       bgColor: {
         emphasis: {
-          $value: '{base.display.color.plum.6}',
+          $value: '{base.display.color.plum.3}',
           $type: 'color',
         },
       },
@@ -856,7 +875,7 @@
     purple: {
       bgColor: {
         emphasis: {
-          $value: '{base.display.color.purple.6}',
+          $value: '{base.display.color.purple.3}',
           $type: 'color',
         },
       },
@@ -874,7 +893,7 @@
     brown: {
       bgColor: {
         emphasis: {
-          $value: '{base.display.color.brown.6}',
+          $value: '{base.display.color.brown.3}',
           $type: 'color',
         },
       },
@@ -892,7 +911,7 @@
     auburn: {
       bgColor: {
         emphasis: {
-          $value: '{base.display.color.auburn.6}',
+          $value: '{base.display.color.auburn.3}',
           $type: 'color',
         },
       },

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

@@ -18,7 +18,7 @@
       $type: 'color',
     },
     closed: {
-      $value: '{base.color.neutral.3}',
+      $value: '{fgColor.muted}',
       $type: 'color',
     },
   },
@@ -58,12 +58,11 @@
     },
     closed: {
       muted: {
-        $value: '{base.color.neutral.4}',
+        $value: '{bgColor.neutral.muted}',
         $type: 'color',
-        alpha: 0.4,
       },
       emphasis: {
-        $value: '{base.color.neutral.4}',
+        $value: '{bgColor.neutral.emphasis}',
         $type: 'color',
       },
     },
@@ -82,12 +81,11 @@
     },
     closed: {
       muted: {
-        $value: '{base.color.neutral.4}',
+        $value: '{borderColor.muted}',
         $type: 'color',
-        alpha: 0.4,
       },
       emphasis: {
-        $value: '{base.color.neutral.4}',
+        $value: '{borderColor.emphasis}',
         $type: 'color',
       },
     },

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

@@ -18,7 +18,7 @@
       $type: 'color',
     },
     closed: {
-      $value: '{base.color.neutral.4}',
+      $value: '{fgColor.muted}',
       $type: 'color',
     },
   },
@@ -58,12 +58,12 @@
     },
     closed: {
       muted: {
-        $value: '{base.color.neutral.4}',
+        $value: '{bgColor.neutral.muted}',
         $type: 'color',
         alpha: 0.1,
       },
       emphasis: {
-        $value: '{base.color.neutral.5}',
+        $value: '{bgColor.neutral.emphasis}',
         $type: 'color',
       },
     },
@@ -104,12 +104,11 @@
     },
     closed: {
       muted: {
-        $value: '{base.color.neutral.4}',
+        $value: '{borderColor.default}',
         $type: 'color',
-        alpha: 0.4,
       },
       emphasis: {
-        $value: '{base.color.neutral.5}',
+        $value: '{borderColor.emphasis}',
         $type: 'color',
       },
     },