@primer/primitives 7.16.0 → 7.17.0-rc.132f02a7

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

@@ -0,0 +1,440 @@
+/**
+ * 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.gray.9}',
+      $type: 'color',
+      mix: null,
+    },
+    disabled: {
+      $value: '{base.color.gray.5}',
+      $type: 'color',
+    },
+    danger: {
+      '@': {
+        $value: '{base.color.red.6}',
+        $type: 'color',
+      },
+    },
+    accent: {
+      '@': {
+        $value: '{base.color.blue.6}',
+        $type: 'color',
+      },
+    },
+  },
+  bgColor: {
+    muted: {
+      $value: '{base.color.gray.1}',
+      $type: 'color',
+    },
+    inset: {
+      $value: '{base.color.white}',
+      $type: 'color',
+    },
+    neutral: {
+      muted: {
+        $value: '{base.color.gray.1}',
+        $type: 'color',
+        alpha: 1,
+      },
+    },
+    disabled: {
+      $value: '{base.color.gray.2}',
+      $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.gray.8}',
+      $type: 'color',
+    },
+    muted: {
+      $value: '{base.color.gray.4}',
+      $type: 'color',
+      alpha: 1,
+    },
+    neutral: {
+      muted: {
+        $value: '{base.color.gray.4}',
+        $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',
+      },
+    },
+    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,
+      },
+    },
+  },
+  // patterns
+  avatar: {
+    borderColor: {
+      $value: '{base.color.black}',
+      $type: 'color',
+      alpha: 0.9,
+    },
+  },
+  topicTag: {
+    borderColor: {
+      $value: '{borderColor.accent.emphasis}',
+      $type: 'color',
+    },
+  },
+  counter: {
+    borderColor: {
+      $value: '{borderColor.default}',
+      $type: 'color',
+    },
+  },
+  control: {
+    bgColor: {
+      rest: {
+        $value: '{base.color.gray.1}',
+        $type: 'color',
+      },
+      hover: {
+        $value: '{base.color.gray.1}',
+        $type: 'color',
+        mix: {
+          color: '{base.color.gray.3}',
+          weight: 0.2,
+        },
+      },
+      active: {
+        $value: '{base.color.gray.1}',
+        $type: 'color',
+        mix: {
+          color: '{base.color.gray.3}',
+          weight: 0.4,
+        },
+      },
+      selected: {
+        $value: '{base.color.gray.3}',
+        $type: 'color',
+      },
+    },
+    borderColor: {
+      emphasis: {
+        $value: '{borderColor.default}',
+        $type: 'color',
+        mix: null,
+      },
+    },
+    transparent: {
+      bgColor: {
+        hover: {
+          $value: '{base.color.gray.1}',
+          $type: 'color',
+          alpha: null,
+          mix: null,
+        },
+        active: {
+          $value: '{base.color.gray.2}',
+          $type: 'color',
+          alpha: null,
+          mix: null,
+        },
+        selected: {
+          $value: '{base.color.gray.2}',
+          $type: 'color',
+        },
+      },
+      borderColor: {
+        hover: {
+          $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.gray.3}',
+        $type: 'color',
+      },
+      hover: {
+        $value: '{base.color.gray.3}',
+        $type: 'color',
+        mix: {
+          color: '{base.color.gray.5}',
+          weight: 0.2,
+        },
+      },
+      active: {
+        $value: '{base.color.gray.3}',
+        $type: 'color',
+        mix: {
+          color: '{base.color.gray.5}',
+          weight: 0.4,
+        },
+      },
+      disabled: {
+        $value: '{fgColor.disabled}',
+        $type: 'color',
+      },
+    },
+    fgColor: {
+      rest: {
+        $value: '{fgColor.default}',
+        $type: 'color',
+      },
+    },
+  },
+  button: {
+    default: {
+      borderColor: {
+        rest: {
+          $value: '{borderColor.default}',
+          $type: 'color',
+        },
+        hover: {
+          $value: '{borderColor.default}',
+          $type: 'color',
+        },
+        active: {
+          $value: '{borderColor.default}',
+          $type: 'color',
+        },
+      },
+    },
+    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,
+        },
+      },
+    },
+    invisible: {
+      fgColor: {
+        hover: {
+          $value: '{base.color.blue.2}',
+          $type: 'color',
+        },
+      },
+      iconColor: {
+        hover: {
+          $value: '{fgColor.onEmphasis}',
+          $type: 'color',
+        },
+      },
+      bgColor: {
+        hover: {
+          $value: '{base.color.gray.8}',
+          $type: 'color',
+          alpha: 1,
+        },
+        active: {
+          $value: '{base.color.gray.6}',
+          $type: 'color',
+          alpha: 1,
+        },
+      },
+    },
+  },
+  buttonCounter: {
+    default: {
+      bgColor: {
+        rest: {
+          $value: '{bgColor.neutral.emphasis}',
+          $type: 'color',
+          alpha: 0.2,
+        },
+      },
+    },
+    invisible: {
+      bgColor: {
+        rest: {
+          $value: '{bgColor.neutral.emphasis}',
+          $type: 'color',
+          alpha: 0.2,
+        },
+      },
+    },
+  },
+  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.gray.3}',
+        $type: 'color',
+      },
+    },
+  },
+  overlay: {
+    borderColor: {
+      $value: '{borderColor.muted}',
+      $type: 'color',
+      alpha: null,
+    },
+  },
+}