@primer/primitives 10.4.0-rc.eab36abe → 10.4.0-rc.fd8ac4c9

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

@@ -0,0 +1,618 @@
+/**
+ * Dark high contrast
+ * @extends all functional tokens
+ * @description All overwrites for functional color tokens for dark high contrast color mode are in this file
+ */
+{
+  control: {
+    fgColor: {
+      placeholder: {
+        $value: '{base.color.neutral.10}',
+        $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',
+      },
+    },
+    borderColor: {
+      emphasis: {
+        $value: '{borderColor.emphasis}',
+        $type: 'color',
+      },
+    },
+    transparent: {
+      bgColor: {
+        hover: {
+          $value: '{base.color.neutral.6}',
+          $type: 'color',
+          alpha: 1,
+        },
+        active: {
+          $value: '{base.color.neutral.7}',
+          $type: 'color',
+          alpha: 1,
+        },
+        selected: {
+          $value: '{base.color.neutral.6}',
+          $type: 'color',
+          alpha: 1,
+        },
+      },
+      borderColor: {
+        hover: {
+          $value: '{borderColor.default}',
+          $type: 'color',
+        },
+        active: {
+          $value: '{borderColor.default}',
+          $type: 'color',
+        },
+      },
+    },
+    danger: {
+      bgColor: {
+        hover: {
+          $value: '{bgColor.danger.emphasis}',
+          $type: 'color',
+        },
+        active: {
+          $value: '#c51120',
+          $type: 'color',
+          alpha: 1,
+        },
+      },
+    },
+    checked: {
+      bgColor: {
+        hover: {
+          $value: '#2b64c1',
+          $type: 'color',
+        },
+        active: {
+          $value: '#3c79d0',
+          $type: 'color',
+        },
+      },
+      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: {
+      rest: {
+        $value: '{fgColor.default}',
+        $type: 'color',
+      },
+    },
+    borderColor: {
+      rest: {
+        $value: '{borderColor.emphasis}',
+        $type: 'color',
+      },
+    },
+    bgColor: {
+      rest: {
+        $value: '{base.color.neutral.5}',
+        $type: 'color',
+      },
+      hover: {
+        $value: '{base.color.neutral.6}',
+        $type: 'color',
+      },
+      active: {
+        $value: '{base.color.neutral.7}',
+        $type: 'color',
+      },
+    },
+  },
+  button: {
+    primary: {
+      bgColor: {
+        hover: {
+          $value: '#08792b',
+          $type: 'color',
+        },
+        active: {
+          $value: '#109135',
+          $type: 'color',
+        },
+        disabled: {
+          $value: '#048f2f',
+          $type: 'color',
+        },
+      },
+      borderColor: {
+        rest: {
+          $value: '{base.color.green.2}',
+          $type: 'color',
+          alpha: 1,
+        },
+        hover: {
+          $value: '{base.color.green.2}',
+          $type: 'color',
+          alpha: 1,
+        },
+        active: {
+          $value: '{base.color.green.2}',
+          $type: 'color',
+          alpha: 1,
+        },
+        disabled: {
+          $value: '{base.color.green.2}',
+          $type: 'color',
+          alpha: 0.4,
+        },
+      },
+    },
+    invisible: {
+      iconColor: {
+        rest: {
+          $value: '{base.color.neutral.11}',
+          $type: 'color',
+        },
+        hover: {
+          $value: '{base.color.neutral.11}',
+          $type: 'color',
+        },
+      },
+      bgColor: {
+        hover: {
+          $value: '{base.color.neutral.2}',
+          $type: 'color',
+          alpha: null,
+        },
+        active: {
+          $value: '{base.color.neutral.3}',
+          $type: 'color',
+          alpha: null,
+        },
+      },
+    },
+    danger: {
+      fgColor: {
+        rest: {
+          $value: '{base.color.red.2}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'mode',
+
+              group: 'component (internal)',
+              scopes: ['fgColor'],
+            },
+          },
+        },
+      },
+      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',
+        },
+      },
+      iconColor: {
+        rest: {
+          $value: '#ffb1af',
+          $type: 'color',
+        },
+      },
+    },
+    inactive: {
+      bgColor: {
+        $value: '{control.bgColor.rest}',
+        $type: 'color',
+      },
+      fgColor: {
+        $value: '{base.color.neutral.10}',
+        $type: 'color',
+      },
+    },
+  },
+  buttonCounter: {
+    primary: {
+      bgColor: {
+        rest: {
+          $value: '{base.color.neutral.0}',
+          $type: 'color',
+          alpha: 0.15,
+        },
+      },
+    },
+    danger: {
+      bgColor: {
+        hover: {
+          $value: '{base.color.neutral.0}',
+          $type: 'color',
+          alpha: 0.15,
+        },
+        rest: {
+          $value: '{base.color.neutral.0}',
+          $type: 'color',
+          alpha: 0.15,
+        },
+      },
+    },
+  },
+  display: {
+    blue: {
+      bgColor: {
+        emphasis: {
+          $value: '{base.display.color.blue.3}',
+          $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.3}',
+          $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.3}',
+          $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.3}',
+          $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.3}',
+          $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.3}',
+          $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.3}',
+          $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.3}',
+          $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.3}',
+          $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.3}',
+          $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.3}',
+          $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.3}',
+          $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.3}',
+          $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.3}',
+          $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.3}',
+          $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.3}',
+          $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.3}',
+          $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.3}',
+          $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.3}',
+          $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/dark/overrides/dark.protanopia-deuteranopia.json5

@@ -0,0 +1,65 @@
+/**
+ * Dark protanopia and deuteranopia (colorblind)
+ * @extends all functional tokens
+ * @description All overwrites for functional color tokens for dark protanopia and deuteranopia color mode are in this file
+ */
+{
+  control: {
+    danger: {
+      fgColor: {
+        hover: {
+          $value: '{base.color.orange.3}',
+          $type: 'color',
+        },
+      },
+    },
+  },
+  button: {
+    primary: {
+      bgColor: {
+        hover: {
+          $value: '#2a7aef',
+          $type: 'color',
+        },
+        active: {
+          $value: '#3685f3',
+          $type: 'color',
+        },
+        disabled: {
+          $value: '{base.color.blue.6}',
+          $type: 'color',
+        },
+      },
+      borderColor: {
+        disabled: {
+          $value: '#1158c7',
+          $type: 'color',
+        },
+      },
+    },
+    danger: {
+      fgColor: {
+        rest: {
+          $value: '{fgColor.danger}',
+          $type: 'color',
+        },
+      },
+      bgColor: {
+        hover: {
+          $value: '{base.color.orange.6}',
+          $type: 'color',
+        },
+        active: {
+          $value: '#b5531d',
+          $type: 'color',
+        },
+      },
+      iconColor: {
+        rest: {
+          $value: '#f0883e',
+          $type: 'color',
+        },
+      },
+    },
+  },
+}

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

@@ -0,0 +1,47 @@
+/**
+ * Dark tritanopia theme
+ * @extends all functional tokens
+ * @description All overwrites for functional color tokens for this theme are in this file
+ */
+{
+  button: {
+    primary: {
+      bgColor: {
+        hover: {
+          $value: '#2a7aef',
+          $type: 'color',
+        },
+        active: {
+          $value: '#3685f3',
+          $type: 'color',
+        },
+        disabled: {
+          $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',
+        },
+      },
+    },
+  },
+}