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

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

@@ -19,18 +19,159 @@
       $value: '{base.color.neutral.4}',
       $type: 'color',
     },
+    neutral: {
+      $value: '{base.color.neutral.3}',
+      $type: 'color',
+    },
+    accent: {
+      $value: '{base.color.blue.3}',
+      $type: 'color',
+      mix: {
+        color: '{base.color.blue.2}',
+        weight: 0.05,
+      },
+    },
+    danger: {
+      $value: '{base.color.red.3}',
+      $type: 'color',
+    },
+    severe: {
+      $value: '{base.color.orange.3}',
+      $type: 'color',
+    },
+    done: {
+      $value: '{base.color.purple.3}',
+      $type: 'color',
+    },
+    sponsors: {
+      $value: '{base.color.pink.3}',
+      $type: 'color',
+    },
   },
   bgColor: {
+    muted: {
+      $value: '{base.color.neutral.9}',
+      $type: 'color',
+      mix: {
+        color: '{base.color.neutral.8}',
+        weight: 0.5,
+      },
+    },
     emphasis: {
       $value: '{base.color.white}',
       $type: 'color',
     },
     neutral: {
+      muted: {
+        $value: '{base.color.neutral.5}',
+        $type: 'color',
+        alpha: 0.1,
+      },
       emphasis: {
         $value: '{base.color.neutral.4}',
         $type: 'color',
       },
     },
+    accent: {
+      muted: {
+        $value: '{base.color.blue.5}',
+        $type: 'color',
+        alpha: 0.1,
+      },
+      emphasis: {
+        $value: '{base.color.blue.4}',
+        $type: 'color',
+      },
+    },
+    success: {
+      muted: {
+        $value: '{base.color.green.4}',
+        $type: 'color',
+        alpha: 0.14,
+      },
+      emphasis: {
+        $value: '{base.color.green.4}',
+        $type: 'color',
+      },
+    },
+    open: {
+      muted: {
+        $value: '{bgColor.success.muted}',
+        $type: 'color',
+        alpha: 0.14,
+      },
+    },
+    danger: {
+      muted: {
+        $value: '{base.color.red.4}',
+        $type: 'color',
+        alpha: 0.09,
+      },
+      emphasis: {
+        $value: '{base.color.red.4}',
+        $type: 'color',
+      },
+    },
+    closed: {
+      muted: {
+        $value: '{bgColor.danger.muted}',
+        $type: 'color',
+        alpha: 0.09,
+      },
+    },
+    severe: {
+      muted: {
+        $value: '{base.color.orange.4}',
+        $type: 'color',
+        alpha: 0.088,
+      },
+      emphasis: {
+        $value: '{base.color.orange.4}',
+        $type: 'color',
+      },
+    },
+    attention: {
+      emphasis: {
+        $value: '{base.color.yellow.4}',
+        $type: 'color',
+      },
+    },
+    done: {
+      muted: {
+        $value: '{base.color.purple.5}',
+        $type: 'color',
+        alpha: 0.09,
+      },
+      emphasis: {
+        $value: '{base.color.purple.4}',
+        $type: 'color',
+      },
+    },
+    upsell: {
+      muted: {
+        $value: '{bgColor.done.muted}',
+        $type: 'color',
+        alpha: 0.09,
+      },
+    },
+    upsell: {
+      muted: {
+        $value: '{bgColor.done.muted}',
+        $type: 'color',
+        alpha: 0.09,
+      },
+    },
+    sponsors: {
+      muted: {
+        $value: '{base.color.pink.5}',
+        $type: 'color',
+        alpha: 0.09,
+      },
+      emphasis: {
+        $value: '{base.color.pink.4}',
+        $type: 'color',
+      },
+    },
   },
   borderColor: {
     default: {
@@ -47,6 +188,10 @@
       $type: 'color',
       alpha: 1,
     },
+    emphasis: {
+      $value: '{base.color.neutral.4}',
+      $type: 'color',
+    },
     neutral: {
       muted: {
         $value: '{base.color.neutral.4}',
@@ -72,6 +217,13 @@
         alpha: 1,
       },
     },
+    open: {
+      muted: {
+        $value: '{borderColor.success.muted}',
+        $type: 'color',
+        alpha: 1,
+      },
+    },
     attention: {
       muted: {
         $value: '{base.color.yellow.4}',
@@ -123,10 +275,24 @@
     },
   },
   control: {
+    fgColor: {
+      placeholder: {
+        $value: '{base.color.neutral.2}',
+        $type: 'color',
+        mix: {
+          color: '{base.color.neutral.1}',
+          weight: 0.5,
+        },
+      },
+    },
     bgColor: {
-      selected: {
-        $value: '{base.color.neutral.6}',
+      active: {
+        $value: '{base.color.neutral.7}',
         $type: 'color',
+        mix: {
+          color: '{base.color.neutral.8}',
+          weight: 0.2,
+        },
       },
     },
     borderColor: {
@@ -196,6 +362,12 @@
         $type: 'color',
       },
     },
+    borderColor: {
+      rest: {
+        $value: '{borderColor.emphasis}',
+        $type: 'color',
+      },
+    },
   },
   button: {
     primary: {
@@ -392,4 +564,358 @@
       },
     },
   },
+  display: {
+    blue: {
+      bgColor: {
+        emphasis: {
+          $value: '{base.display.color.blue.6}',
+          $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.6}',
+          $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.6}',
+          $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.6}',
+          $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.6}',
+          $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.6}',
+          $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.6}',
+          $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.6}',
+          $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.6}',
+          $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.6}',
+          $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.6}',
+          $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.6}',
+          $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.6}',
+          $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.6}',
+          $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.6}',
+          $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.6}',
+          $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.6}',
+          $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.6}',
+          $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.6}',
+          $type: 'color',
+        },
+      },
+      fgColor: {
+        $value: '{base.display.color.auburn.8}',
+        $type: 'color',
+      },
+      borderColor: {
+        emphasis: {
+          $value: '{base.display.color.auburn.6}',
+          $type: 'color',
+        },
+      },
+    },
+  },
+  tooltip: {
+    bgColor: {
+      $value: '{bgColor.inverse}',
+      $type: 'color',
+    },
+    fgColor: {
+      $value: '{fgColor.onInverse}',
+      $type: 'color',
+    },
+  },
 }

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

@@ -27,6 +27,7 @@
       muted: {
         $value: '{base.color.blue.4}',
         $type: 'color',
+        alpha: 0.15,
       },
       emphasis: {
         $value: '{base.color.blue.5}',
@@ -37,6 +38,7 @@
       muted: {
         $value: '{base.color.red.4}',
         $type: 'color',
+        alpha: 0.1,
       },
       emphasis: {
         $value: '{base.color.red.5}',
@@ -47,6 +49,7 @@
       muted: {
         $value: '{base.color.red.4}',
         $type: 'color',
+        alpha: 0.15,
       },
       emphasis: {
         $value: '{base.color.red.5}',
@@ -57,6 +60,7 @@
       muted: {
         $value: '{base.color.neutral.4}',
         $type: 'color',
+        alpha: 0.1,
       },
       emphasis: {
         $value: '{base.color.neutral.5}',

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

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