@primer/primitives 9.1.0-rc.e0e1c4b6 → 9.1.0

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

@@ -0,0 +1,819 @@
+/**
+ * Light high contrast
+ * @extends all functional tokens
+ * @description All overwrites for functional color tokens for light high contrast color mode are in this file
+ */
+{
+  fgColor: {
+    muted: {
+      $value: '{base.color.neutral.10}',
+      $type: 'color',
+    },
+    disabled: {
+      $value: '{base.color.neutral.9}',
+      $type: 'color',
+    },
+    neutral: {
+      $value: '{base.color.neutral.11}',
+      $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: {
+      $value: '{base.color.neutral.3}',
+      $type: 'color',
+    },
+    inset: {
+      $value: '{base.color.neutral.2}',
+      $type: 'color',
+    },
+    neutral: {
+      emphasis: {
+        $value: '{base.color.neutral.10}',
+        $type: 'color',
+      },
+      muted: {
+        $value: '{base.color.neutral.4}',
+        $type: 'color',
+        alpha: 1,
+      },
+    },
+    disabled: {
+      $value: '{base.color.neutral.4}',
+      $type: 'color',
+    },
+    success: {
+      emphasis: {
+        $value: '{base.color.green.5}',
+        $type: 'color',
+        mix: null,
+      },
+    },
+    attention: {
+      emphasis: {
+        $value: '{base.color.yellow.5}',
+        $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.9}',
+      $type: 'color',
+      alpha: 1,
+    },
+    accent: {
+      muted: {
+        $value: '{base.color.blue.3}',
+        $type: 'color',
+        alpha: 1,
+      },
+    },
+    success: {
+      muted: {
+        $value: '{base.color.green.3}',
+        $type: 'color',
+        alpha: 1,
+      },
+      emphasis: {
+        $value: '{base.color.green.5}',
+        $type: 'color',
+      },
+    },
+    open: {
+      muted: {
+        $value: '{borderColor.success.muted}',
+        $type: 'color',
+        alpha: 1,
+      },
+    },
+    attention: {
+      muted: {
+        $value: '{base.color.yellow.3}',
+        $type: 'color',
+        alpha: 1,
+      },
+      emphasis: {
+        $value: '{base.color.yellow.5}',
+        $type: 'color',
+      },
+    },
+    severe: {
+      muted: {
+        $value: '{base.color.orange.3}',
+        $type: 'color',
+        alpha: 1,
+      },
+    },
+    danger: {
+      muted: {
+        $value: '{base.color.red.3}',
+        $type: 'color',
+        alpha: 1,
+      },
+    },
+    done: {
+      muted: {
+        $value: '{base.color.purple.3}',
+        $type: 'color',
+        alpha: 1,
+      },
+    },
+    sponsors: {
+      muted: {
+        $value: '{base.color.pink.3}',
+        $type: 'color',
+        alpha: 1,
+      },
+    },
+    upsell: {
+      muted: {
+        $value: '{borderColor.done.muted}',
+        $type: 'color',
+        alpha: 1,
+      },
+    },
+    closed: {
+      muted: {
+        $value: '{borderColor.danger.muted}',
+        $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: 'light',
+            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',
+      },
+    },
+    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,
+          mix: null,
+        },
+        active: {
+          $value: '{bgColor.danger.emphasis}',
+          $type: 'color',
+          alpha: null,
+          mix: {
+            color: '{base.color.red.7}',
+            weight: 0.4,
+          },
+        },
+      },
+    },
+  },
+  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: '{base.color.green.5}',
+          $type: 'color',
+          mix: {
+            color: '{base.color.green.7}',
+            weight: 0.2,
+          },
+        },
+        active: {
+          $value: '{base.color.green.5}',
+          $type: 'color',
+          mix: {
+            color: '{base.color.green.7}',
+            weight: 0.4,
+          },
+        },
+      },
+      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,
+        },
+      },
+    },
+    inactive: {
+      fgColor: {
+        $value: '{base.color.neutral.10}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            mode: 'light',
+            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',
+        },
+      }
+    }
+  },
+  buttonCounter: {
+    default: {
+      bgColor: {
+        rest: {
+          $value: '{base.color.neutral.7}',
+          $type: 'color',
+        },
+      },
+    },
+  },
+  diffBlob: {
+    addition: {
+      fgColor: {
+        text: {
+          $value: '{fgColor.onEmphasis}',
+          $type: 'color',
+        },
+      },
+      bgColor: {
+        word: {
+          $value: '{base.color.green.4}',
+          $type: 'color',
+        },
+      },
+    },
+    deletion: {
+      fgColor: {
+        text: {
+          $value: '{fgColor.onEmphasis}',
+          $type: 'color',
+        },
+      },
+      bgColor: {
+        word: {
+          $value: '{base.color.red.5}',
+          $type: 'color',
+          mix: null,
+          alpha: 1,
+        },
+      },
+    },
+    hunk: {
+      bgColor: {
+        num: {
+          $value: '{base.color.blue.1}',
+          $type: 'color',
+          alpha: 1,
+        },
+      },
+    },
+  },
+  header: {
+    borderColor: {
+      divider: {
+        $value: '{base.color.neutral.7}',
+        $type: 'color',
+      },
+    },
+  },
+  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.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',
+        },
+      },
+    },
+  },
+}