@primer/primitives 9.1.0-rc.e0e1c4b6 → 9.1.0

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

@@ -0,0 +1,935 @@
+/**
+ * Dark high contrast
+ * @extends all functional tokens
+ * @description All overwrites for functional color tokens for dark high contrast color mode are in this file
+ */
+{
+  fgColor: {
+    default: {
+      $value: '{base.color.neutral.13}',
+      $type: 'color',
+    },
+    muted: {
+      $value: '{base.color.neutral.10}',
+      $type: 'color',
+    },
+    disabled: {
+      $value: '{base.color.neutral.9}',
+      $type: 'color',
+    },
+    neutral: {
+      $value: '{base.color.neutral.11}',
+      $type: 'color',
+    },
+    accent: {
+      $value: '{base.color.blue.3}',
+      $type: 'color',
+      mix: {
+        color: '{base.color.blue.2}',
+        weight: 0.08,
+      },
+    },
+    success: {
+      $value: '{base.color.green.3}',
+      $type: 'color',
+      mix: {
+        color: '{base.color.green.2}',
+        weight: 0.08,
+      },
+    },
+    danger: {
+      $value: '{base.color.red.3}',
+      $type: 'color',
+    },
+    severe: {
+      $value: '{base.color.orange.3}',
+      $type: 'color',
+    },
+    done: {
+      $value: '{base.color.purple.3}',
+      $type: 'color',
+      mix: {
+        color: '{base.color.purple.2}',
+        weight: 0.5,
+      },
+    },
+    sponsors: {
+      $value: '{base.color.pink.3}',
+      $type: 'color',
+      mix: {
+        color: '{base.color.pink.2}',
+        weight: 0.08,
+      },
+    },
+  },
+  bgColor: {
+    default: {
+      $value: '{base.color.neutral.0}',
+      $type: 'color',
+    },
+    muted: {
+      $value: '{base.color.neutral.2}',
+      $type: 'color',
+    },
+    disabled: {
+      $value: '{base.color.neutral.4}',
+      $type: 'color',
+    },
+    disabled: {
+      $value: '{base.color.neutral.4}',
+      $type: 'color',
+    },
+    neutral: {
+      emphasis: {
+        $value: '{base.color.neutral.7}',
+        $type: 'color',
+      },
+      muted: {
+        $value: '{base.color.neutral.3}',
+        $type: 'color',
+        alpha: 1,
+      },
+    },
+    accent: {
+      emphasis: {
+        $value: '{base.color.blue.9}',
+        $type: 'color',
+      },
+    },
+    success: {
+      emphasis: {
+        $value: '{base.color.green.9}',
+        $type: 'color',
+      },
+    },
+    danger: {
+      emphasis: {
+        $value: '{base.color.red.9}',
+        $type: 'color',
+      },
+    },
+    severe: {
+      emphasis: {
+        $value: '{base.color.orange.9}',
+        $type: 'color',
+      },
+    },
+    attention: {
+      emphasis: {
+        $value: '{base.color.yellow.9}',
+        $type: 'color',
+      },
+    },
+    done: {
+      emphasis: {
+        $value: '{base.color.purple.9}',
+        $type: 'color',
+      },
+    },
+    sponsors: {
+      emphasis: {
+        $value: '{base.color.pink.9}',
+        $type: 'color',
+      },
+    },
+  },
+  borderColor: {
+    default: {
+      $value: '{base.color.neutral.10}',
+      $type: 'color',
+    },
+    muted: {
+      $value: '{borderColor.default}',
+      $type: 'color',
+      alpha: 1,
+    },
+    emphasis: {
+      $value: '{borderColor.default}',
+      $type: 'color',
+    },
+    disabled: {
+      $value: '{base.color.neutral.9}',
+      $type: 'color',
+      alpha: 0.12,
+    },
+    translucent: {
+      $value: '{base.color.neutral.6}',
+      $type: 'color',
+      alpha: 1,
+    },
+    accent: {
+      muted: {
+        $value: '{base.color.blue.4}',
+        $type: 'color',
+        alpha: 1,
+      },
+    },
+    success: {
+      muted: {
+        $value: '{base.color.green.4}',
+        $type: 'color',
+        alpha: 1,
+      },
+    },
+    open: {
+      muted: {
+        $value: '{borderColor.success.muted}',
+        $type: 'color',
+        alpha: 1,
+      },
+    },
+    attention: {
+      muted: {
+        $value: '{base.color.yellow.4}',
+        $type: 'color',
+        alpha: 1,
+      },
+    },
+    closed: {
+      muted: {
+        $value: '{borderColor.danger.muted}',
+        $type: 'color',
+        alpha: 1,
+      },
+    },
+    upsell: {
+      muted: {
+          $value: '{borderColor.done.muted}',
+        $type: 'color',
+        alpha: 1,
+      },
+    },
+    severe: {
+      muted: {
+        $value: '{base.color.orange.4}',
+        $type: 'color',
+        alpha: 1,
+      },
+    },
+    danger: {
+      muted: {
+        $value: '{base.color.red.4}',
+        $type: 'color',
+        alpha: 1,
+      },
+    },
+    done: {
+      muted: {
+        $value: '{base.color.purple.4}',
+        $type: 'color',
+        alpha: 1,
+      },
+    },
+    sponsors: {
+      muted: {
+        $value: '{base.color.pink.4}',
+        $type: 'color',
+        alpha: 1,
+      },
+    },
+  },
+  // patterns
+  avatar: {
+    borderColor: {
+      $value: '{base.color.neutral.13}',
+      $type: 'color',
+      alpha: 0.9,
+    },
+  },
+  topicTag: {
+    borderColor: {
+      $value: '{borderColor.accent.emphasis}',
+      $type: 'color',
+    },
+  },
+  counter: {
+    borderColor: {
+      $value: '{borderColor.default}',
+      $type: 'color',
+    },
+    bgColor: {
+      muted: {
+        $value: '{bgColor.neutral.muted}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            mode: 'dark',
+            group: 'component',
+            scopes: ['bgColor'],
+          },
+        },
+        alpha: 1,
+      },
+    },
+  },
+  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',
+        mix: null,
+      },
+    },
+    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: '{bgColor.danger.emphasis}',
+          $type: 'color',
+          alpha: 1,
+          mix: {
+            color: '{base.color.red.7}',
+            weight: 0.4,
+          },
+        },
+      },
+    },
+    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: {
+      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: {
+      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,
+          mix: null,
+        },
+        active: {
+          $value: '{base.color.neutral.3}',
+          $type: 'color',
+          alpha: null,
+          mix: null,
+        },
+      },
+    },
+    danger: {
+      fgColor: {
+        rest: {
+          $value: '{base.color.red.2}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'mode',
+              mode: 'light',
+              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',
+          mix: null
+        },
+      },
+    },
+    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,
+        },
+      },
+    },
+  },
+  diffBlob: {
+    addition: {
+      fgColor: {
+        text: {
+          $value: '{fgColor.onEmphasis}',
+          $type: 'color',
+        },
+      },
+      bgColor: {
+        word: {
+          $value: '{bgColor.success.emphasis}',
+          $type: 'color',
+          alpha: 1,
+        },
+      },
+    },
+    deletion: {
+      fgColor: {
+        text: {
+          $value: '{fgColor.onEmphasis}',
+          $type: 'color',
+        },
+      },
+      bgColor: {
+        word: {
+          $value: '{bgColor.danger.emphasis}',
+          $type: 'color',
+          alpha: 1,
+        },
+      },
+    },
+    expander: {
+      iconColor: {
+        $value: '{fgColor.default}',
+        $type: 'color',
+      },
+    },
+    hunk: {
+      bgColor: {
+        num: {
+          $value: '{base.color.blue.4}',
+          $type: 'color',
+          alpha: 0.4,
+        },
+      },
+    },
+  },
+  codeMirror: {
+    selection: {
+      bgColor: {
+        $value: '{base.color.blue.4}',
+        $type: 'color',
+        alpha: 0.4,
+      },
+    },
+  },
+  overlay: {
+    borderColor: {
+      $value: '{borderColor.default}',
+      $type: 'color',
+      alpha: null,
+    },
+    backdrop: {
+      bgColor: {
+        $value: '{base.color.neutral.11}',
+        $type: 'color',
+        alpha: 0.4,
+      },
+    },
+  },
+  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',
+        },
+      },
+    },
+  },
+  tooltip: {
+    bgColor: {
+      $value: '{bgColor.inverse}',
+      $type: 'color',
+    },
+    fgColor: {
+      $value: '{fgColor.onInverse}',
+      $type: 'color',
+    },
+  },
+}