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

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

@@ -0,0 +1,581 @@
+/**
+ * Light high contrast
+ * @extends all functional tokens
+ * @description All overwrites for functional color tokens for light 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',
+      },
+    },
+    transparent: {
+      bgColor: {
+        hover: {
+          $value: '{base.color.neutral.5}',
+          $type: 'color',
+          alpha: 1,
+        },
+        active: {
+          $value: '{base.color.neutral.6}',
+          $type: 'color',
+          alpha: 1,
+        },
+        selected: {
+          $value: '{base.color.neutral.5}',
+          $type: 'color',
+          alpha: 1,
+        },
+      },
+      borderColor: {
+        hover: {
+          $value: '{borderColor.default}',
+          $type: 'color',
+        },
+        active: {
+          $value: '{borderColor.default}',
+          $type: 'color',
+        },
+      },
+    },
+    danger: {
+      fgColor: {
+        hover: {
+          $value: '{fgColor.onEmphasis}',
+          $type: 'color',
+        },
+      },
+      bgColor: {
+        hover: {
+          $value: '{bgColor.danger.emphasis}',
+          $type: 'color',
+          alpha: null,
+        },
+        active: {
+          $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',
+        },
+      },
+    },
+  },
+  controlTrack: {
+    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',
+      },
+    },
+    borderColor: {
+      rest: {
+        $value: '{borderColor.emphasis}',
+        $type: 'color',
+      },
+    },
+  },
+  button: {
+    primary: {
+      bgColor: {
+        rest: {
+          $value: '{base.color.green.5}',
+          $type: 'color',
+        },
+        hover: {
+          $value: '#04571e',
+          $type: 'color',
+        },
+        active: {
+          $value: '#03501b',
+          $type: 'color',
+        },
+        disabled: {
+          $value: '#85cb97',
+          $type: 'color',
+        },
+      },
+      borderColor: {
+        rest: {
+          $value: '{base.color.green.7}',
+          $type: 'color',
+          alpha: 1,
+        },
+        hover: {
+          $value: '{base.color.green.7}',
+          $type: 'color',
+          alpha: 1,
+        },
+        active: {
+          $value: '{base.color.green.7}',
+          $type: 'color',
+          alpha: 1,
+        },
+        disabled: {
+          $value: '#85cb97',
+          $type: 'color',
+        },
+      },
+    },
+    inactive: {
+      fgColor: {
+        $value: '{base.color.neutral.10}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            group: 'component (internal)',
+            scopes: ['fgColor'],
+          },
+        },
+      },
+      bgColor: {
+        $value: '{control.bgColor.rest}',
+        $type: 'color',
+      },
+    },
+    invisible: {
+      fgColor: {
+        hover: {
+          $value: '{base.color.neutral.11}',
+          $type: 'color',
+        },
+      },
+      iconColor: {
+        hover: {
+          $value: '{base.color.neutral.11}',
+          $type: 'color',
+        },
+      },
+    },
+    outline: {
+      bgColor: {
+        active: {
+          $value: '#033f9d',
+          $type: 'color',
+        },
+      },
+    },
+    danger: {
+      bgColor: {
+        active: {
+          $value: '#74041a',
+          $type: 'color',
+        },
+      },
+    },
+  },
+  buttonCounter: {
+    default: {
+      bgColor: {
+        rest: {
+          $value: '{base.color.neutral.7}',
+          $type: 'color',
+        },
+      },
+    },
+    danger: {
+      fgColor: {
+        rest: {
+          $value: '#980e1e',
+          $type: 'color',
+        },
+      },
+    },
+  },
+  header: {
+    borderColor: {
+      divider: {
+        $value: '{base.color.neutral.7}',
+        $type: 'color',
+      },
+    },
+  },
+  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

@@ -0,0 +1,69 @@
+/**
+ * Light protanopia and deuteranopia (colorblind)
+ * @extends all functional tokens
+ * @description All overwrites for functional color tokens for light protanopia and deuteranopia color mode are in this file
+ */
+{
+  button: {
+    primary: {
+      bgColor: {
+        hover: {
+          $value: '#0864d1',
+          $type: 'color',
+        },
+        active: {
+          $value: '#075fc8',
+          $type: 'color',
+        },
+        disabled: {
+          $value: '#92caff',
+          $type: 'color',
+        },
+      },
+      shadow: {
+        selected: {
+          $value: [
+            {
+              color: '{base.color.blue.9}',
+              alpha: 0.3,
+              offsetX: '0px',
+              offsetY: '1px',
+              blur: '0px',
+              spread: '0px',
+              inset: true,
+            },
+          ],
+          $type: 'shadow',
+        },
+      },
+    },
+    danger: {
+      bgColor: {
+        hover: {
+          $value: '{base.color.orange.6}',
+          $type: 'color',
+        },
+        active: {
+          $value: '#7e2f00',
+          $type: 'color',
+        },
+      },
+      shadow: {
+        selected: {
+          $value: [
+            {
+              color: '{base.color.orange.9}',
+              alpha: 0.2,
+              offsetX: '0px',
+              offsetY: '1px',
+              blur: '0px',
+              spread: '0px',
+              inset: true,
+            },
+          ],
+          $type: 'shadow',
+        },
+      },
+    },
+  },
+}

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

@@ -0,0 +1,41 @@
+/**
+ * Light 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: '#0864d1',
+          $type: 'color',
+        },
+        active: {
+          $value: '#075fc8',
+          $type: 'color',
+        },
+        disabled: {
+          $value: '#92caff',
+          $type: 'color',
+        },
+      },
+      shadow: {
+        selected: {
+          $value: [
+            {
+              color: '{base.color.blue.9}',
+              alpha: 0.3,
+              offsetX: '0px',
+              offsetY: '1px',
+              blur: '0px',
+              spread: '0px',
+              inset: true,
+            },
+          ],
+          $type: 'shadow',
+        },
+      },
+    },
+  },
+}