@primer/primitives 7.10.0 → 7.11.0-rc.ecbdb39

package/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5

@@ -0,0 +1,50 @@
+/**
+ * Dark protanopia and deuteranopia (colorblind)
+ * @extends all functional tokens
+ * @description All overwrites for functional color tokens for dark protanopia and deuteranopia (colorblind) color mode are in this file
+ */
+{
+  color: {
+    open: {
+      fg: {
+        $value: '{base.color.scale.orange.3}',
+        $type: 'color'
+      },
+      emphasis: {
+        $value: '{base.color.scale.orange.5}',
+        $type: 'color'
+      },
+      muted: {
+        $value: '{base.color.scale.orange.4}',
+        $type: 'color',
+        alpha: 0.4
+      },
+      subtle: {
+        $value: '{base.color.scale.orange.4}',
+        $type: 'color',
+        alpha: 0.15
+      }
+    },
+    closed: {
+      fg: {
+        $value: '{base.color.scale.gray.3}',
+        $type: 'color'
+      },
+
+      emphasis: {
+        $value: '{base.color.scale.gray.4}',
+        $type: 'color'
+      },
+      muted: {
+        $value: '{base.color.scale.gray.4}',
+        $type: 'color',
+        alpha: 0.4
+      },
+      subtle: {
+        $value: '{base.color.scale.gray.4}',
+        $type: 'color',
+        alpha: 0.1
+      }
+    }
+  }
+}

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

@@ -0,0 +1,49 @@
+/**
+ * Dark tritanopia
+ * @extends all functional tokens
+ * @description All overwrites for functional color tokens for dark tritanopia color mode are in this file
+ */
+{
+  color: {
+    open: {
+      fg: {
+        $value: '{base.color.scale.orange.3}',
+        $type: 'color'
+      },
+      emphasis: {
+        $value: '{base.color.scale.orange.5}',
+        $type: 'color'
+      },
+      muted: {
+        $value: '{base.color.scale.orange.4}',
+        $type: 'color',
+        alpha: 0.4
+      },
+      subtle: {
+        $value: '{base.color.scale.orange.4}',
+        $type: 'color',
+        alpha: 0.15
+      }
+    },
+    closed: {
+      fg: {
+        $value: '{base.color.scale.gray.3}',
+        $type: 'color'
+      },
+      emphasis: {
+        $value: '{base.color.scale.gray.4}',
+        $type: 'color'
+      },
+      muted: {
+        $value: '{base.color.scale.gray.4}',
+        $type: 'color',
+        alpha: 0.4
+      },
+      subtle: {
+        $value: '{base.color.scale.gray.4}',
+        $type: 'color',
+        alpha: 0.1
+      }
+    }
+  }
+}

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

@@ -0,0 +1,332 @@
+/**
+ * Light high contrast
+ * @extends all functional tokens
+ * @description All overwrites for functional color tokens for light high contrast color mode are in this file
+ */
+{
+  color: {
+    fg: {
+      muted: {
+        $value: '{base.color.scale.gray.9}',
+        $type: 'color'
+      }
+    },
+    canvas: {
+      inset: {
+        $value: '{base.color.scale.white}',
+        $type: 'color'
+      },
+      subtle: {
+        $value: '{base.color.scale.gray.1}',
+        $type: 'color'
+      }
+    },
+    border: {
+      default: {
+        $value: '{base.color.scale.gray.8}',
+        $type: 'color'
+      },
+      muted: {
+        $value: '{base.color.scale.gray.4}',
+        $type: 'color'
+      },
+      subtle: {
+        $value: '{base.color.scale.black}',
+        $type: 'color',
+        alpha: 0.8
+      }
+    },
+    neutral: {
+      subtle: {
+        $value: '{base.color.scale.gray.1}',
+        $type: 'color'
+      }
+    },
+    accent: {
+      muted: {
+        $value: '{base.color.scale.blue.3}',
+        $type: 'color'
+      }
+    },
+    success: {
+      emphasis: {
+        $value: '{base.color.scale.green.5}',
+        $type: 'color'
+      },
+      muted: {
+        $value: '{base.color.scale.green.3}',
+        $type: 'color'
+      }
+    },
+    attention: {
+      emphasis: {
+        $value: '{base.color.scale.yellow.5}',
+        $type: 'color'
+      },
+      muted: {
+        $value: '{base.color.scale.yellow.3}',
+        $type: 'color'
+      }
+    },
+    severe: {
+      muted: {
+        $value: '{base.color.scale.orange.3}',
+        $type: 'color'
+      }
+    },
+    danger: {
+      muted: {
+        $value: '{base.color.scale.red.3}',
+        $type: 'color'
+      }
+    },
+    done: {
+      muted: {
+        $value: '{base.color.scale.purple.3}',
+        $type: 'color'
+      }
+    },
+    sponsors: {
+      muted: {
+        $value: '{base.color.scale.pink.3}',
+        $type: 'color'
+      }
+    },
+    topicTag: {
+      border: {
+        $value: '{color.accent.emphasis}',
+        $type: 'color'
+      }
+    },
+    counter: {
+      border: {
+        $value: '{color.border.default}',
+        $type: 'color'
+      }
+    },
+    btn: {
+      bg: {
+        $value: '{base.color.scale.gray.1}',
+        $type: 'color'
+      },
+      border: {
+        $value: '{color.border.subtle}',
+        $type: 'color'
+      },
+      hover: {
+        bg: {
+          $value: '{base.color.scale.gray.2}',
+          $type: 'color'
+        }
+      },
+      activeBg: {
+        $value: '{base.color.scale.gray.3}',
+        $type: 'color'
+      },
+      selectedBg: {
+        $value: '{base.color.scale.gray.3}',
+        $type: 'color'
+      },
+      focusBg: {
+        $value: '{base.color.scale.gray.2}',
+        $type: 'color'
+      },
+      primary: {
+        bg: {
+          $value: '{color.success.emphasis}',
+          $type: 'color'
+        },
+        border: {
+          $value: '{base.color.scale.green.7}',
+          $type: 'color'
+        },
+        hoverBg: {
+          $value: '{base.color.scale.green.6}',
+          $type: 'color'
+        },
+        hoverBorder: {
+          $value: '{base.color.scale.green.7}',
+          $type: 'color'
+        },
+        focusBg: {
+          $value: '{base.color.scale.green.7}',
+          $type: 'color'
+        },
+        focusBorder: {
+          $value: '{base.color.scale.green.7}',
+          $type: 'color'
+        }
+      },
+      outline: {
+        text: {
+          $value: '{base.color.scale.blue.6}',
+          $type: 'color'
+        },
+        hoverBg: {
+          $value: '{color.accent.emphasis}',
+          $type: 'color'
+        },
+        hoverBorder: {
+          $value: '{base.color.scale.blue.7}',
+          $type: 'color'
+        },
+        selectedBg: {
+          $value: '{base.color.scale.blue.7}',
+          $type: 'color'
+        },
+        selectedBorder: {
+          $value: '{base.color.scale.blue.7}',
+          $type: 'color'
+        },
+        focusBorder: {
+          $value: '{base.color.scale.blue.7}',
+          $type: 'color'
+        },
+        disabledText: {
+          $value: '{base.color.scale.blue.5}',
+          $type: 'color',
+          alpha: 0.5
+        },
+        disabledBg: {
+          $value: '{base.color.scale.gray.1}',
+          $type: 'color'
+        }
+      },
+      danger: {
+        text: {
+          $value: '{base.color.scale.red.6}',
+          $type: 'color'
+        },
+        hoverBg: {
+          $value: '{color.danger.emphasis}',
+          $type: 'color'
+        },
+        hoverBorder: {
+          $value: '{base.color.scale.red.7}',
+          $type: 'color'
+        },
+        selectedBg: {
+          $value: '{base.color.scale.red.7}',
+          $type: 'color'
+        },
+        selectedBorder: {
+          $value: '{base.color.scale.red.7}',
+          $type: 'color'
+        },
+        focusBorder: {
+          $value: '{base.color.scale.red.7}',
+          $type: 'color'
+        },
+        disabledBg: {
+          $value: '{base.color.scale.gray.1}',
+          $type: 'color'
+        },
+        icon: {
+          $value: '{base.color.scale.red.6}',
+          $type: 'color'
+        }
+      }
+    },
+    diffBlob: {
+      addition: {
+        fg: {
+          $value: '{color.fg.onEmphasis}',
+          $type: 'color'
+        },
+        wordBg: {
+          $value: '{color.success.emphasis}',
+          $type: 'color'
+        }
+      },
+      deletion: {
+        fg: {
+          $value: '{color.fg.onEmphasis}',
+          $type: 'color'
+        },
+        wordBg: {
+          $value: '{color.danger.emphasis}',
+          $type: 'color'
+        }
+      },
+      hunk: {
+        numBg: {
+          $value: '{base.color.scale.blue.1}',
+          $type: 'color'
+        }
+      }
+    },
+    header: {
+      divider: {
+        $value: '{base.color.scale.gray.3}',
+        $type: 'color'
+      }
+    },
+    actionListItem: {
+      inlineDivider: {
+        $value: '{color.border.muted}',
+        $type: 'color'
+      },
+      default: {
+        hoverBg: {
+          $value: '{base.color.scale.gray.1}',
+          $type: 'color'
+        },
+        hoverBorder: {
+          $value: '{color.border.muted}',
+          $type: 'color'
+        },
+        activeBg: {
+          $value: '{base.color.scale.gray.2}',
+          $type: 'color'
+        },
+        activeBorder: {
+          $value: '{color.border.default}',
+          $type: 'color'
+        },
+        selectedBg: {
+          $value: '{base.color.scale.gray.2}',
+          $type: 'color'
+        }
+      },
+      danger: {
+        hoverBg: {
+          $value: '{color.danger.emphasis}',
+          $type: 'color'
+        },
+        activeBg: {
+          $value: '{base.color.scale.red.7}',
+          $type: 'color'
+        },
+        hoverText: {
+          $value: '{color.fg.onEmphasis}',
+          $type: 'color'
+        }
+      }
+    },
+    page: {
+      header: {
+        bg: {
+          $value: '{color.canvas.default}',
+          $type: 'color'
+        }
+      }
+    },
+    switchTrack: {
+      bg: {
+        $value: '{base.color.scale.white}',
+        $type: 'color'
+      },
+      border: {
+        $value: '{color.border.default}',
+        $type: 'color'
+      },
+
+      checked: {
+        border: {
+          $value: '{base.color.scale.blue.5}',
+          $type: 'color'
+        }
+      }
+    }
+  }
+}

package/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5

@@ -0,0 +1,92 @@
+/**
+ * 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
+ */
+{
+  color: {
+    open: {
+      fg: {
+        $value: '{base.color.scale.orange.5}',
+        $type: 'color'
+      },
+      emphasis: {
+        $value: '{base.color.scale.orange.4}',
+        $type: 'color'
+      },
+      muted: {
+        $value: '{base.color.scale.orange.3}',
+        $type: 'color',
+        alpha: 0.4
+      },
+      subtle: {
+        $value: '{base.color.scale.orange.0}',
+        $type: 'color'
+      }
+    },
+    closed: {
+      fg: {
+        $value: '{base.color.scale.gray.5}',
+        $type: 'color'
+      },
+      emphasis: {
+        $value: '{base.color.scale.gray.5}',
+        $type: 'color'
+      },
+      muted: {
+        $value: '{base.color.scale.gray.3}',
+        $type: 'color',
+        alpha: 0.4
+      },
+      subtle: {
+        $value: '{base.color.scale.gray.0}',
+        $type: 'color'
+      }
+    },
+    diffBlob: {
+      addition: {
+        numBg: {
+          $value: '{color.success.muted}',
+          $type: 'color'
+        },
+        lineBg: {
+          $value: '{base.color.scale.green.0}',
+          $type: 'color',
+          alpha: 0.5
+        },
+        wordBg: {
+          $value: '{color.success.muted}',
+          $type: 'color'
+        }
+      },
+      deletion: {
+        numBg: {
+          $value: '{color.danger.muted}',
+          $type: 'color'
+        },
+        lineBg: {
+          $value: '{base.color.scale.red.0}',
+          $type: 'color',
+          alpha: 0.5
+        },
+        wordBg: {
+          $value: '{base.color.scale.red.2}',
+          $type: 'color',
+          alpha: 0.5
+        }
+      }
+    },
+    btn: {
+      primary: {
+        hoverBg: {
+          $value: '{base.color.scale.green.5}',
+          $type: 'color'
+        },
+        disabledBg: {
+          $value: '{base.color.scale.green.2}',
+          $type: 'color'
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,92 @@
+/**
+ * Dark tritanopia
+ * @extends all functional tokens
+ * @description All overwrites for functional color tokens for light tritanopia color mode are in this file
+ */
+{
+  color: {
+    open: {
+      fg: {
+        $value: '{base.color.scale.orange.5}',
+        $type: 'color'
+      },
+      emphasis: {
+        $value: '{base.color.scale.orange.4}',
+        $type: 'color'
+      },
+      muted: {
+        $value: '{base.color.scale.orange.3}',
+        $type: 'color',
+        alpha: 0.4
+      },
+      subtle: {
+        $value: '{base.color.scale.orange.0}',
+        $type: 'color'
+      }
+    },
+    closed: {
+      fg: {
+        $value: '{base.color.scale.gray.5}',
+        $type: 'color'
+      },
+      emphasis: {
+        $value: '{base.color.scale.gray.5}',
+        $type: 'color'
+      },
+      muted: {
+        $value: '{base.color.scale.gray.3}',
+        $type: 'color',
+        alpha: 0.4
+      },
+      subtle: {
+        $value: '{base.color.scale.gray.0}',
+        $type: 'color'
+      }
+    },
+    diffBlob: {
+      addition: {
+        numBg: {
+          $value: '{color.success.muted}',
+          $type: 'color'
+        },
+        lineBg: {
+          $value: '{base.color.scale.green.0}',
+          $type: 'color',
+          alpha: 0.5
+        },
+        wordBg: {
+          $value: '{color.success.muted}',
+          $type: 'color'
+        }
+      },
+      deletion: {
+        numBg: {
+          $value: '{color.danger.muted}',
+          $type: 'color'
+        },
+        lineBg: {
+          $value: '{base.color.scale.red.0}',
+          $type: 'color',
+          alpha: 0.5
+        },
+        wordBg: {
+          $value: '{base.color.scale.red.2}',
+          $type: 'color',
+          alpha: 0.5
+        }
+      }
+    },
+    btn: {
+      primary: {
+        hoverBg: {
+          $value: '{base.color.scale.green.5}',
+          $type: 'color'
+        },
+        disabledBg: {
+          $value: '{base.color.scale.green.2}',
+          $type: 'color'
+        }
+      }
+    }
+  }
+}