@primer/primitives 8.2.4-rc.d955f312 → 8.2.4-rc.ea4beb50

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

@@ -14,14 +14,42 @@
       $value: '{base.color.neutral.5}',
       $type: 'color',
     },
+    neutral: {
+      $value: '{base.color.neutral.7}',
+      $type: 'color',
+    },
+    success: {
+      $value: '{base.color.green.6}',
+      $type: 'color',
+    },
     danger: {
       $value: '{base.color.red.6}',
       $type: 'color',
     },
+    attention: {
+      $value: '{base.color.yellow.6}',
+      $type: 'color',
+    },
+    severe: {
+      $value: '{base.color.orange.6}',
+      $type: 'color',
+    },
+    done: {
+      $value: '{base.color.purple.6}',
+      $type: 'color',
+    },
+    accent: {
+      $value: '{base.color.blue.6}',
+      $type: 'color',
+    },
     accent: {
       $value: '{base.color.blue.6}',
       $type: 'color',
     },
+    sponsors: {
+      $value: '{base.color.pink.6}',
+      $type: 'color',
+    },
   },
   bgColor: {
     muted: {
@@ -38,6 +66,11 @@
         $type: 'color',
         alpha: 1,
       },
+      emphasis: {
+        $value: '{base.color.neutral.6}',
+        $type: 'color',
+        alpha: 1,
+      },
     },
     disabled: {
       $value: '{base.color.neutral.2}',
@@ -97,6 +130,13 @@
         $type: 'color',
       },
     },
+    open: {
+      muted: {
+        $value: '{borderColor.success.muted}',
+        $type: 'color',
+        alpha: 1,
+      },
+    },
     attention: {
       muted: {
         $value: '{base.color.yellow.3}',
@@ -158,6 +198,16 @@
     },
   },
   control: {
+    fgColor: {
+      placeholder: {
+        $value: '{base.color.neutral.6}',
+        $type: 'color',
+        mix: {
+          color: '{base.color.neutral.7}',
+          weight: 0.2,
+        },
+      },
+    },
     bgColor: {
       rest: {
         $value: '{base.color.neutral.1}',
@@ -276,6 +326,12 @@
         $type: 'color',
       },
     },
+    borderColor: {
+      rest: {
+        $value: '{borderColor.emphasis}',
+        $type: 'color',
+      },
+    },
   },
   button: {
     default: {
@@ -438,4 +494,348 @@
       alpha: null,
     },
   },
+  display: {
+    blue: {
+      bgColor: {
+        emphasis: {
+          $value: '{base.display.color.blue.7}',
+          $type: 'color',
+        },
+      },
+      fgColor: {
+        $value: '{base.display.color.blue.8}',
+        $type: 'color',
+      },
+      borderColor: {
+        emphasis: {
+          $value: '{base.display.color.blue.6}',
+          $type: 'color',
+        },
+      },
+    },
+    indigo: {
+      bgColor: {
+        emphasis: {
+          $value: '{base.display.color.indigo.7}',
+          $type: 'color',
+        },
+      },
+      fgColor: {
+        $value: '{base.display.color.indigo.8}',
+        $type: 'color',
+      },
+      borderColor: {
+        emphasis: {
+          $value: '{base.display.color.indigo.6}',
+          $type: 'color',
+        },
+      },
+    },
+    gray: {
+      bgColor: {
+        emphasis: {
+          $value: '{base.display.color.gray.7}',
+          $type: 'color',
+        },
+      },
+      fgColor: {
+        $value: '{base.display.color.gray.8}',
+        $type: 'color',
+      },
+      borderColor: {
+        emphasis: {
+          $value: '{base.display.color.gray.6}',
+          $type: 'color',
+        },
+      },
+    },
+    cyan: {
+      bgColor: {
+        emphasis: {
+          $value: '{base.display.color.cyan.7}',
+          $type: 'color',
+        },
+      },
+      fgColor: {
+        $value: '{base.display.color.cyan.8}',
+        $type: 'color',
+      },
+      borderColor: {
+        emphasis: {
+          $value: '{base.display.color.cyan.6}',
+          $type: 'color',
+        },
+      },
+    },
+    teal: {
+      bgColor: {
+        emphasis: {
+          $value: '{base.display.color.teal.7}',
+          $type: 'color',
+        },
+      },
+      fgColor: {
+        $value: '{base.display.color.teal.8}',
+        $type: 'color',
+      },
+      borderColor: {
+        emphasis: {
+          $value: '{base.display.color.teal.6}',
+          $type: 'color',
+        },
+      },
+    },
+    pine: {
+      bgColor: {
+        emphasis: {
+          $value: '{base.display.color.pine.7}',
+          $type: 'color',
+        },
+      },
+      fgColor: {
+        $value: '{base.display.color.pine.8}',
+        $type: 'color',
+      },
+      borderColor: {
+        emphasis: {
+          $value: '{base.display.color.pine.6}',
+          $type: 'color',
+        },
+      },
+    },
+    green: {
+      bgColor: {
+        emphasis: {
+          $value: '{base.display.color.green.7}',
+          $type: 'color',
+        },
+      },
+      fgColor: {
+        $value: '{base.display.color.green.8}',
+        $type: 'color',
+      },
+      borderColor: {
+        emphasis: {
+          $value: '{base.display.color.green.6}',
+          $type: 'color',
+        },
+      },
+    },
+    lime: {
+      bgColor: {
+        emphasis: {
+          $value: '{base.display.color.lime.7}',
+          $type: 'color',
+        },
+      },
+      fgColor: {
+        $value: '{base.display.color.lime.8}',
+        $type: 'color',
+      },
+      borderColor: {
+        emphasis: {
+          $value: '{base.display.color.lime.6}',
+          $type: 'color',
+        },
+      },
+    },
+    olive: {
+      bgColor: {
+        emphasis: {
+          $value: '{base.display.color.olive.7}',
+          $type: 'color',
+        },
+      },
+      fgColor: {
+        $value: '{base.display.color.olive.8}',
+        $type: 'color',
+      },
+      borderColor: {
+        emphasis: {
+          $value: '{base.display.color.olive.6}',
+          $type: 'color',
+        },
+      },
+    },
+    lemon: {
+      bgColor: {
+        emphasis: {
+          $value: '{base.display.color.lemon.7}',
+          $type: 'color',
+        },
+      },
+      fgColor: {
+        $value: '{base.display.color.lemon.8}',
+        $type: 'color',
+      },
+      borderColor: {
+        emphasis: {
+          $value: '{base.display.color.lemon.6}',
+          $type: 'color',
+        },
+      },
+    },
+    yellow: {
+      bgColor: {
+        emphasis: {
+          $value: '{base.display.color.yellow.7}',
+          $type: 'color',
+        },
+      },
+      fgColor: {
+        $value: '{base.display.color.yellow.8}',
+        $type: 'color',
+      },
+      borderColor: {
+        emphasis: {
+          $value: '{base.display.color.yellow.6}',
+          $type: 'color',
+        },
+      },
+    },
+    orange: {
+      bgColor: {
+        emphasis: {
+          $value: '{base.display.color.orange.7}',
+          $type: 'color',
+        },
+      },
+      fgColor: {
+        $value: '{base.display.color.orange.8}',
+        $type: 'color',
+      },
+      borderColor: {
+        emphasis: {
+          $value: '{base.display.color.orange.6}',
+          $type: 'color',
+        },
+      },
+    },
+    red: {
+      bgColor: {
+        emphasis: {
+          $value: '{base.display.color.red.7}',
+          $type: 'color',
+        },
+      },
+      fgColor: {
+        $value: '{base.display.color.red.8}',
+        $type: 'color',
+      },
+      borderColor: {
+        emphasis: {
+          $value: '{base.display.color.red.6}',
+          $type: 'color',
+        },
+      },
+    },
+    coral: {
+      bgColor: {
+        emphasis: {
+          $value: '{base.display.color.coral.7}',
+          $type: 'color',
+        },
+      },
+      fgColor: {
+        $value: '{base.display.color.coral.8}',
+        $type: 'color',
+      },
+      borderColor: {
+        emphasis: {
+          $value: '{base.display.color.coral.6}',
+          $type: 'color',
+        },
+      },
+    },
+    pink: {
+      bgColor: {
+        emphasis: {
+          $value: '{base.display.color.pink.7}',
+          $type: 'color',
+        },
+      },
+      fgColor: {
+        $value: '{base.display.color.pink.8}',
+        $type: 'color',
+      },
+      borderColor: {
+        emphasis: {
+          $value: '{base.display.color.pink.6}',
+          $type: 'color',
+        },
+      },
+    },
+    plum: {
+      bgColor: {
+        emphasis: {
+          $value: '{base.display.color.plum.7}',
+          $type: 'color',
+        },
+      },
+      fgColor: {
+        $value: '{base.display.color.plum.8}',
+        $type: 'color',
+      },
+      borderColor: {
+        emphasis: {
+          $value: '{base.display.color.plum.6}',
+          $type: 'color',
+        },
+      },
+    },
+    purple: {
+      bgColor: {
+        emphasis: {
+          $value: '{base.display.color.purple.7}',
+          $type: 'color',
+        },
+      },
+      fgColor: {
+        $value: '{base.display.color.purple.8}',
+        $type: 'color',
+      },
+      borderColor: {
+        emphasis: {
+          $value: '{base.display.color.purple.6}',
+          $type: 'color',
+        },
+      },
+    },
+    brown: {
+      bgColor: {
+        emphasis: {
+          $value: '{base.display.color.brown.7}',
+          $type: 'color',
+        },
+      },
+      fgColor: {
+        $value: '{base.display.color.brown.8}',
+        $type: 'color',
+      },
+      borderColor: {
+        emphasis: {
+          $value: '{base.display.color.brown.6}',
+          $type: 'color',
+        },
+      },
+    },
+    auburn: {
+      bgColor: {
+        emphasis: {
+          $value: '{base.display.color.auburn.7}',
+          $type: 'color',
+        },
+      },
+      fgColor: {
+        $value: '{base.display.color.auburn.8}',
+        $type: 'color',
+      },
+      borderColor: {
+        emphasis: {
+          $value: '{base.display.color.auburn.6}',
+          $type: 'color',
+        },
+      },
+    },
+  },
 }

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

@@ -33,12 +33,9 @@
         $type: 'color',
       },
       emphasis: {
-        $value: '{base.color.blue.4}',
+        $value: '{base.color.blue.5}',
         $type: 'color',
-        mix: {
-          color: '{base.color.blue.5}',
-          weight: 0.75,
-        },
+        mix: null
       },
     },
     open: {
@@ -104,7 +101,7 @@
         alpha: 0.4,
       },
       emphasis: {
-        $value: '{base.color.blue.4}',
+        $value: '{base.color.blue.5}',
         $type: 'color',
       },
     },

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

@@ -29,12 +29,9 @@
         $type: 'color',
       },
       emphasis: {
-        $value: '{base.color.blue.4}',
+        $value: '{base.color.blue.5}',
         $type: 'color',
-        mix: {
-          color: '{base.color.blue.5}',
-          weight: 0.75,
-        },
+        mix: null
       },
     },
     open: {
@@ -76,7 +73,7 @@
         alpha: 0.4,
       },
       emphasis: {
-        $value: '{base.color.blue.4}',
+        $value: '{base.color.blue.5}',
         $type: 'color',
       },
     },

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

@@ -3070,4 +3070,30 @@
       },
     },
   },
+  tooltip: {
+    bgColor: {
+      $value: '{bgColor.emphasis}',
+      $type: 'color',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'mode',
+          mode: 'light',
+          group: 'component',
+          scopes: ['bgColor'],
+        },
+      },
+    },
+    fgColor: {
+      $value: '{fgColor.onEmphasis}',
+      $type: 'color',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'mode',
+          mode: 'light',
+          group: 'component',
+          scopes: ['fgColor'],
+        },
+      },
+    },
+  },
 }