chore: remove useTheme from IssueLabel

.changeset/curly-rivers-arrive.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+chore: remove useTheme from IssueLabel

packages/react/src/experimental/IssueLabel/IssueLabel.module.css

@@ -213,4 +213,62 @@
       --label-fgColor-active: var(--label-auburn-fgColor-active);
     }
   }
+
+  [data-color-mode='dark'] .IssueLabel:not([data-variant]) {
+    --label-bgColor-rest: var(--label-bgColor-dark-rest);
+    --label-bgColor-hover: var(--label-bgColor-dark-hover);
+    --label-bgColor-active: var(--label-bgColor-dark-active);
+    --label-fgColor: var(--label-fgColor-dark);
+    --label-fgColor-hover: var(--label-fgColor-dark-hover);
+    --label-fgColor-active: var(--label-fgColor-dark-active);
+  }
+
+  [data-color-mode='light'] .IssueLabel:not([data-variant]) {
+    --label-bgColor-rest: var(--label-bgColor-light-rest);
+    --label-bgColor-hover: var(--label-bgColor-light-hover);
+    --label-bgColor-active: var(--label-bgColor-light-active);
+    --label-fgColor: var(--label-fgColor-light);
+    --label-fgColor-hover: var(--label-fgColor-light-hover);
+    --label-fgColor-active: var(--label-fgColor-light-active);
+  }
+
+  @media (prefers-color-scheme: light) {
+    [data-color-mode='auto'][data-light-theme*='light'] .IssueLabel:not([data-variant]) {
+      --label-bgColor-rest: var(--label-bgColor-light-rest);
+      --label-bgColor-hover: var(--label-bgColor-light-hover);
+      --label-bgColor-active: var(--label-bgColor-light-active);
+      --label-fgColor: var(--label-fgColor-light);
+      --label-fgColor-hover: var(--label-fgColor-light-hover);
+      --label-fgColor-active: var(--label-fgColor-light-active);
+    }
+
+    [data-color-mode='auto'][data-light-theme*='dark'] .IssueLabel:not([data-variant]) {
+      --label-bgColor-rest: var(--label-bgColor-dark-rest);
+      --label-bgColor-hover: var(--label-bgColor-dark-hover);
+      --label-bgColor-active: var(--label-bgColor-dark-active);
+      --label-fgColor: var(--label-fgColor-dark);
+      --label-fgColor-hover: var(--label-fgColor-dark-hover);
+      --label-fgColor-active: var(--label-fgColor-dark-active);
+    }
+  }
+
+  @media (prefers-color-scheme: dark) {
+    [data-color-mode='auto'][data-dark-theme*='light'] .IssueLabel:not([data-variant]) {
+      --label-bgColor-rest: var(--label-bgColor-light-rest);
+      --label-bgColor-hover: var(--label-bgColor-light-hover);
+      --label-bgColor-active: var(--label-bgColor-light-active);
+      --label-fgColor: var(--label-fgColor-light);
+      --label-fgColor-hover: var(--label-fgColor-light-hover);
+      --label-fgColor-active: var(--label-fgColor-light-active);
+    }
+
+    [data-color-mode='auto'][data-dark-theme*='dark'] .IssueLabel:not([data-variant]) {
+      --label-bgColor-rest: var(--label-bgColor-dark-rest);
+      --label-bgColor-hover: var(--label-bgColor-dark-hover);
+      --label-bgColor-active: var(--label-bgColor-dark-active);
+      --label-fgColor: var(--label-fgColor-dark);
+      --label-fgColor-hover: var(--label-fgColor-dark-hover);
+      --label-fgColor-active: var(--label-fgColor-dark-active);
+    }
+  }
 }

packages/react/src/experimental/IssueLabel/IssueLabel.tsx

@@ -1,6 +1,5 @@
 import {clsx} from 'clsx'
 import type React from 'react'
-import {useTheme} from '../../ThemeProvider'
 import {getColorsFromHex} from './getColorFromHex'
 import classes from './IssueLabel.module.css'
 
@@ -71,17 +70,10 @@ function IssueLabel<As extends React.ElementType>({
   variant = 'gray',
   ...props
 }: IssueLabelProps<As>): React.ReactNode {
-  const {resolvedColorScheme} = useTheme()
-  const mode = resolvedColorScheme?.startsWith('dark') ? 'dark' : 'light'
-  // TODO: get the bgColor, getting it from theme.colorScheme seems a bit sketchy
-  const bgColors: Record<string, Hex> = {
-    light: '#ffffff',
-    dark: '#0d1117',
-  }
   const sharedProps = {
     className: clsx(className, classes.IssueLabel),
     'data-variant': fillColor ? undefined : variant,
-    style: fillColor ? {...style, ...getColorsFromHex(fillColor, resolvedColorScheme, bgColors[mode])} : style,
+    style: fillColor ? {...style, ...getColorsFromHex(fillColor)} : style,
   }
 
   if ('as' in props && props.as) {

packages/react/src/experimental/IssueLabel/getColorFromHex.ts

@@ -5,25 +5,17 @@ import type {Hex} from './IssueLabel'
 /**
  * transforms a hex color provided by the user into a color object with background and text colors
  * @param colorHex — the hex color provided by the user
- * @param colorScheme — the color scheme the user has currently set
- * @param bgColor — the background color from the selected theme, needed to calc the contrast for the colors
  * @returns
  */
-export const getColorsFromHex = (
-  colorHex: Hex,
-  colorScheme = 'light',
-  bgColor: Hex,
-): React.CSSProperties | undefined => {
+export const getColorsFromHex = (colorHex: Hex): React.CSSProperties | undefined => {
   // start values for light mode
-  let bgLightness = 96
-  let lightnessIncrement: 1 | -1 = -1
-  let ratio = 4.5
-  // start values for dark mode
-  if (colorScheme.startsWith('dark')) {
-    bgLightness = 16
-    lightnessIncrement = 1
-    ratio = 5.5
-  }
+  const lightBgLightness = 96
+  const lightLightnessIncrement: 1 | -1 = -1
+  const lightRatio = 4.5
+
+  const darkBgLightness = 16
+  const darkLightnessIncrement: 1 | -1 = 1
+  const darkRatio = 5.5
 
   // get hue and saturation value from hex color
   // eslint-disable-next-line prefer-const
@@ -42,11 +34,21 @@ export const getColorsFromHex = (
   /**
    * creating a background color from the provided hex color
    */
-  const {colorHex: backgroundColor, lightness: currentBgLightness} = getColorWithContrast(
-    hsluvToHex({h, s, l: bgLightness}) as Hex,
-    bgColor,
+  const {colorHex: darkBackgroundColor, lightness: darkCurrentBgLightness} = getColorWithContrast(
+    hsluvToHex({h, s, l: darkBgLightness}) as Hex,
+    '#0d1117', // dark mode background color
+    1.2,
+    darkLightnessIncrement,
+  )
+
+  /**
+   * creating a background color from the provided hex color
+   */
+  const {colorHex: lightBackgroundColor, lightness: lightCurrentBgLightness} = getColorWithContrast(
+    hsluvToHex({h, s, l: lightBgLightness}) as Hex,
+    '#ffffff', // light mode background color
     1.2,
-    lightnessIncrement,
+    lightLightnessIncrement,
   )
 
   // avoid intense bright colors
@@ -56,20 +58,33 @@ export const getColorsFromHex = (
   /**
    * creating a text color from with a contrast ratio of at least 4.5 to the generated background color
    */
-  const {colorHex: textColor} = getColorWithContrast(
+  const {colorHex: darkTextColor} = getColorWithContrast(
+    hsluvToHex({h, s, l: 50}) as Hex,
+    darkBackgroundColor,
+    darkRatio,
+    darkLightnessIncrement as 1 | -1,
+  )
+
+  const {colorHex: lightTextColor} = getColorWithContrast(
     hsluvToHex({h, s, l: 50}) as Hex,
-    backgroundColor,
-    ratio,
-    lightnessIncrement as 1 | -1,
+    lightBackgroundColor,
+    lightRatio,
+    lightLightnessIncrement as 1 | -1,
   )
 
   return {
-    '--label-bgColor-rest': backgroundColor,
-    '--label-bgColor-hover': hsluvToHex({h, s, l: currentBgLightness + 4 * lightnessIncrement}),
-    '--label-bgColor-active': hsluvToHex({h, s, l: currentBgLightness + 8 * lightnessIncrement}),
-    '--label-fgColor': textColor,
-    '--label-fgColor-hover': textColor,
-    '--label-fgColor-active': textColor,
+    '--label-bgColor-light-rest': lightBackgroundColor,
+    '--label-bgColor-light-hover': hsluvToHex({h, s, l: lightCurrentBgLightness + 4 * lightLightnessIncrement}),
+    '--label-bgColor-light-active': hsluvToHex({h, s, l: lightCurrentBgLightness + 8 * lightLightnessIncrement}),
+    '--label-fgColor-light': lightTextColor,
+    '--label-fgColor-light-hover': lightTextColor,
+    '--label-fgColor-light-active': lightTextColor,
+    '--label-bgColor-dark-rest': darkBackgroundColor,
+    '--label-bgColor-dark-hover': hsluvToHex({h, s, l: darkCurrentBgLightness + 4 * darkLightnessIncrement}),
+    '--label-bgColor-dark-active': hsluvToHex({h, s, l: darkCurrentBgLightness + 8 * darkLightnessIncrement}),
+    '--label-fgColor-dark': darkTextColor,
+    '--label-fgColor-dark-hover': darkTextColor,
+    '--label-fgColor-dark-active': darkTextColor,
   } as React.CSSProperties
 }
 /**