chore: refactor IssueLabelToken styles

packages/react/src/TextInputWithTokens/__snapshots__/TextInputWithTokens.test.tsx.snap

@@ -21065,7 +21065,6 @@ exports[`TextInputWithTokens > renders with tokens using a custom token componen
             class="prc-Token-TokenBase-MtVGQ prc-Token-IssueLabel-ACoKj"
             data-cursor-is-interactive="true"
             data-has-remove-button="true"
-            data-in-color-mode="light"
             data-selected="false"
             data-size="xlarge"
             style="--label-r: 153; --label-g: 153; --label-b: 153; --label-h: 0; --label-s: 0; --label-l: 60;"
@@ -21107,7 +21106,6 @@ exports[`TextInputWithTokens > renders with tokens using a custom token componen
             class="prc-Token-TokenBase-MtVGQ prc-Token-IssueLabel-ACoKj"
             data-cursor-is-interactive="true"
             data-has-remove-button="true"
-            data-in-color-mode="light"
             data-selected="false"
             data-size="xlarge"
             style="--label-r: 153; --label-g: 153; --label-b: 153; --label-h: 0; --label-s: 0; --label-l: 60;"
@@ -21149,7 +21147,6 @@ exports[`TextInputWithTokens > renders with tokens using a custom token componen
             class="prc-Token-TokenBase-MtVGQ prc-Token-IssueLabel-ACoKj"
             data-cursor-is-interactive="true"
             data-has-remove-button="true"
-            data-in-color-mode="light"
             data-selected="false"
             data-size="xlarge"
             style="--label-r: 153; --label-g: 153; --label-b: 153; --label-h: 0; --label-s: 0; --label-l: 60;"
@@ -21191,7 +21188,6 @@ exports[`TextInputWithTokens > renders with tokens using a custom token componen
             class="prc-Token-TokenBase-MtVGQ prc-Token-IssueLabel-ACoKj"
             data-cursor-is-interactive="true"
             data-has-remove-button="true"
-            data-in-color-mode="light"
             data-selected="false"
             data-size="xlarge"
             style="--label-r: 153; --label-g: 153; --label-b: 153; --label-h: 0; --label-s: 0; --label-l: 60;"
@@ -21233,7 +21229,6 @@ exports[`TextInputWithTokens > renders with tokens using a custom token componen
             class="prc-Token-TokenBase-MtVGQ prc-Token-IssueLabel-ACoKj"
             data-cursor-is-interactive="true"
             data-has-remove-button="true"
-            data-in-color-mode="light"
             data-selected="false"
             data-size="xlarge"
             style="--label-r: 153; --label-g: 153; --label-b: 153; --label-h: 0; --label-s: 0; --label-l: 60;"
@@ -21275,7 +21270,6 @@ exports[`TextInputWithTokens > renders with tokens using a custom token componen
             class="prc-Token-TokenBase-MtVGQ prc-Token-IssueLabel-ACoKj"
             data-cursor-is-interactive="true"
             data-has-remove-button="true"
-            data-in-color-mode="light"
             data-selected="false"
             data-size="xlarge"
             style="--label-r: 153; --label-g: 153; --label-b: 153; --label-h: 0; --label-s: 0; --label-l: 60;"
@@ -21317,7 +21311,6 @@ exports[`TextInputWithTokens > renders with tokens using a custom token componen
             class="prc-Token-TokenBase-MtVGQ prc-Token-IssueLabel-ACoKj"
             data-cursor-is-interactive="true"
             data-has-remove-button="true"
-            data-in-color-mode="light"
             data-selected="false"
             data-size="xlarge"
             style="--label-r: 153; --label-g: 153; --label-b: 153; --label-h: 0; --label-s: 0; --label-l: 60;"
@@ -21359,7 +21352,6 @@ exports[`TextInputWithTokens > renders with tokens using a custom token componen
             class="prc-Token-TokenBase-MtVGQ prc-Token-IssueLabel-ACoKj"
             data-cursor-is-interactive="true"
             data-has-remove-button="true"
-            data-in-color-mode="light"
             data-selected="false"
             data-size="xlarge"
             style="--label-r: 153; --label-g: 153; --label-b: 153; --label-h: 0; --label-s: 0; --label-l: 60;"
@@ -21424,7 +21416,6 @@ exports[`TextInputWithTokens > renders with tokens using a custom token componen
           class="prc-Token-TokenBase-MtVGQ prc-Token-IssueLabel-ACoKj"
           data-cursor-is-interactive="true"
           data-has-remove-button="true"
-          data-in-color-mode="light"
           data-selected="false"
           data-size="xlarge"
           style="--label-r: 153; --label-g: 153; --label-b: 153; --label-h: 0; --label-s: 0; --label-l: 60;"
@@ -21466,7 +21457,6 @@ exports[`TextInputWithTokens > renders with tokens using a custom token componen
           class="prc-Token-TokenBase-MtVGQ prc-Token-IssueLabel-ACoKj"
           data-cursor-is-interactive="true"
           data-has-remove-button="true"
-          data-in-color-mode="light"
           data-selected="false"
           data-size="xlarge"
           style="--label-r: 153; --label-g: 153; --label-b: 153; --label-h: 0; --label-s: 0; --label-l: 60;"
@@ -21508,7 +21498,6 @@ exports[`TextInputWithTokens > renders with tokens using a custom token componen
           class="prc-Token-TokenBase-MtVGQ prc-Token-IssueLabel-ACoKj"
           data-cursor-is-interactive="true"
           data-has-remove-button="true"
-          data-in-color-mode="light"
           data-selected="false"
           data-size="xlarge"
           style="--label-r: 153; --label-g: 153; --label-b: 153; --label-h: 0; --label-s: 0; --label-l: 60;"
@@ -21550,7 +21539,6 @@ exports[`TextInputWithTokens > renders with tokens using a custom token componen
           class="prc-Token-TokenBase-MtVGQ prc-Token-IssueLabel-ACoKj"
           data-cursor-is-interactive="true"
           data-has-remove-button="true"
-          data-in-color-mode="light"
           data-selected="false"
           data-size="xlarge"
           style="--label-r: 153; --label-g: 153; --label-b: 153; --label-h: 0; --label-s: 0; --label-l: 60;"
@@ -21592,7 +21580,6 @@ exports[`TextInputWithTokens > renders with tokens using a custom token componen
           class="prc-Token-TokenBase-MtVGQ prc-Token-IssueLabel-ACoKj"
           data-cursor-is-interactive="true"
           data-has-remove-button="true"
-          data-in-color-mode="light"
           data-selected="false"
           data-size="xlarge"
           style="--label-r: 153; --label-g: 153; --label-b: 153; --label-h: 0; --label-s: 0; --label-l: 60;"
@@ -21634,7 +21621,6 @@ exports[`TextInputWithTokens > renders with tokens using a custom token componen
           class="prc-Token-TokenBase-MtVGQ prc-Token-IssueLabel-ACoKj"
           data-cursor-is-interactive="true"
           data-has-remove-button="true"
-          data-in-color-mode="light"
           data-selected="false"
           data-size="xlarge"
           style="--label-r: 153; --label-g: 153; --label-b: 153; --label-h: 0; --label-s: 0; --label-l: 60;"
@@ -21676,7 +21662,6 @@ exports[`TextInputWithTokens > renders with tokens using a custom token componen
           class="prc-Token-TokenBase-MtVGQ prc-Token-IssueLabel-ACoKj"
           data-cursor-is-interactive="true"
           data-has-remove-button="true"
-          data-in-color-mode="light"
           data-selected="false"
           data-size="xlarge"
           style="--label-r: 153; --label-g: 153; --label-b: 153; --label-h: 0; --label-s: 0; --label-l: 60;"
@@ -21718,7 +21703,6 @@ exports[`TextInputWithTokens > renders with tokens using a custom token componen
           class="prc-Token-TokenBase-MtVGQ prc-Token-IssueLabel-ACoKj"
           data-cursor-is-interactive="true"
           data-has-remove-button="true"
-          data-in-color-mode="light"
           data-selected="false"
           data-size="xlarge"
           style="--label-r: 153; --label-g: 153; --label-b: 153; --label-h: 0; --label-s: 0; --label-l: 60;"

packages/react/src/Token/IssueLabelToken.module.css

@@ -1,3 +1,63 @@
+/* stylelint-disable primer/colors */
+@define-mixin lightThemeIssueLabel {
+  --lightness-threshold: 0.453;
+  --border-threshold: 0.96;
+  --border-alpha: max(0, min(calc((var(--perceived-lightness) - var(--border-threshold)) * 100), 1));
+
+  background: rgb(var(--label-r), var(--label-g), var(--label-b));
+  color: hsl(0deg, 0%, calc(var(--lightness-switch) * 100%));
+  border-color: hsla(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) - 25) * 1%), var(--border-alpha));
+
+  /* Selected state */
+  &:where([data-selected='true']) {
+    background: hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) - 5) * 1%));
+  }
+
+  &:where([data-selected='true'])::after {
+    /* stylelint-disable-next-line primer/box-shadow */
+    box-shadow: 0 0 0 2px rgb(var(--label-r), var(--label-g), var(--label-b));
+  }
+
+  /* Interactive hover states */
+  &:where([data-cursor-is-interactive='true']:hover) {
+    background-image: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)),
+      linear-gradient(
+        rgb(var(--label-r), var(--label-g), var(--label-b)),
+        rgb(var(--label-r), var(--label-g), var(--label-b))
+      );
+    box-shadow: var(--shadow-resting-medium);
+  }
+}
+
+@define-mixin darkThemeIssueLabel {
+  --lightness-threshold: 0.6;
+  --background-alpha: 0.18;
+  --border-alpha: 0.3;
+  --lighten-by: calc(((var(--lightness-threshold) - var(--perceived-lightness)) * 100) * var(--lightness-switch));
+
+  background: rgba(var(--label-r), var(--label-g), var(--label-b), var(--background-alpha));
+  color: hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%));
+  border-color: hsla(
+    var(--label-h),
+    calc(var(--label-s) * 1%),
+    calc((var(--label-l) + var(--lighten-by)) * 1%),
+    var(--border-alpha)
+  );
+
+  /* Selected state */
+  &:where([data-selected='true'])::after {
+    /* stylelint-disable-next-line primer/box-shadow */
+    box-shadow: 0 0 0 2px
+      hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%));
+  }
+
+  /* Interactive hover states */
+  &:where([data-cursor-is-interactive='true']:hover) {
+    background: hsla(var(--label-h), calc(var(--label-s) * 1%), calc(calc(var(--label-l) + 10) * 1%), 0.3);
+    box-shadow: var(--shadow-resting-medium);
+  }
+}
+
 .IssueLabel {
   /* Color variables - dynamically set via inline CSS custom properties */
   --label-r: 153;
@@ -16,48 +76,37 @@
   border-style: solid;
 }
 
+@media (prefers-color-scheme: light) {
+  [data-color-mode='auto'][data-light-theme*='light'] .IssueLabel {
+    @mixin lightThemeIssueLabel;
+  }
+
+  [data-color-mode='auto'][data-light-theme*='dark'] .IssueLabel {
+    @mixin darkThemeIssueLabel;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  [data-color-mode='auto'][data-dark-theme*='light'] .IssueLabel {
+    @mixin lightThemeIssueLabel;
+  }
+
+  [data-color-mode='auto'][data-dark-theme*='dark'] .IssueLabel {
+    @mixin darkThemeIssueLabel;
+  }
+}
+
 /* Light mode styles */
-.IssueLabel:where([data-in-color-mode*='light'], [data-in-color-mode='auto']) {
-  --lightness-threshold: 0.453;
-  --border-threshold: 0.96;
-  --border-alpha: max(0, min(calc((var(--perceived-lightness) - var(--border-threshold)) * 100), 1));
-  /* stylelint-disable-next-line primer/colors */
-  background: rgb(var(--label-r), var(--label-g), var(--label-b));
-  /* stylelint-disable-next-line primer/colors */
-  color: hsl(0deg, 0%, calc(var(--lightness-switch) * 100%));
-  /* stylelint-disable-next-line primer/colors */
-  border-color: hsla(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) - 25) * 1%), var(--border-alpha));
+[data-color-mode='light'] .IssueLabel {
+  @mixin lightThemeIssueLabel;
 }
 
 /* Dark mode styles */
-.IssueLabel:where([data-in-color-mode*='dark']) {
-  --lightness-threshold: 0.6;
-  --background-alpha: 0.18;
-  --border-alpha: 0.3;
-  --lighten-by: calc(((var(--lightness-threshold) - var(--perceived-lightness)) * 100) * var(--lightness-switch));
-
-  /* stylelint-disable-next-line primer/colors */
-  background: rgba(var(--label-r), var(--label-g), var(--label-b), var(--background-alpha));
-  /* stylelint-disable-next-line primer/colors */
-  color: hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%));
-  /* stylelint-disable primer/colors */
-  border-color: hsla(
-    var(--label-h),
-    calc(var(--label-s) * 1%),
-    calc((var(--label-l) + var(--lighten-by)) * 1%),
-    var(--border-alpha)
-  );
-  /* stylelint-enable primer/colors */
+[data-color-mode='dark'] .IssueLabel {
+  @mixin darkThemeIssueLabel;
 }
 
 /* Selected state */
-.IssueLabel:where(
-    [data-selected='true'][data-in-color-mode*='light'],
-    [data-selected='true'][data-in-color-mode='auto']
-  ) {
-  /* stylelint-disable-next-line primer/colors */
-  background: hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) - 5) * 1%));
-}
 
 .IssueLabel:where([data-selected='true']) {
   outline: none;
@@ -76,38 +125,6 @@
   border-radius: var(--borderRadius-full);
 }
 
-.IssueLabel:where(
-    [data-selected='true'][data-in-color-mode*='light'],
-    [data-selected='true'][data-in-color-mode='auto']
-  )::after {
-  /* stylelint-disable-next-line primer/box-shadow */
-  box-shadow: 0 0 0 2px rgb(var(--label-r), var(--label-g), var(--label-b));
-}
-
-.IssueLabel:where([data-selected='true'][data-in-color-mode='dark'])::after {
-  /* stylelint-disable-next-line primer/box-shadow */
-  box-shadow: 0 0 0 2px hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%));
-}
-
-/* Interactive hover states */
-.IssueLabel:where(
-    [data-cursor-is-interactive='true']:hover[data-in-color-mode*='light'],
-    [data-cursor-is-interactive='true']:hover[data-in-color-mode='auto']
-  ) {
-  background-image: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)),
-    linear-gradient(
-      rgb(var(--label-r), var(--label-g), var(--label-b)),
-      rgb(var(--label-r), var(--label-g), var(--label-b))
-    );
-  box-shadow: var(--shadow-resting-medium);
-}
-
-.IssueLabel:where([data-cursor-is-interactive='true']:hover[data-in-color-mode='dark']) {
-  /* stylelint-disable-next-line primer/colors */
-  background: hsla(var(--label-h), calc(var(--label-s) * 1%), calc(calc(var(--label-l) + 10) * 1%), 0.3);
-  box-shadow: var(--shadow-resting-medium);
-}
-
 /* Remove button styling */
 .IssueLabel:where([data-has-remove-button='true']) {
   padding-right: 0;

packages/react/src/Token/IssueLabelToken.tsx

@@ -4,7 +4,6 @@ import type {TokenBaseProps} from './TokenBase'
 import TokenBase, {defaultTokenSize, isTokenInteractive} from './TokenBase'
 import RemoveTokenButton from './_RemoveTokenButton'
 import {parseToHsla, parseToRgba} from 'color2k'
-import {useTheme} from '../ThemeProvider'
 import TokenTextContainer from './_TokenTextContainer'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 import classes from './IssueLabelToken.module.css'
@@ -38,7 +37,6 @@ const IssueLabelToken = forwardRef((props, forwardedRef) => {
     onClick,
   }
 
-  const {resolvedColorScheme} = useTheme()
   const hasMultipleActionTargets = isTokenInteractive(props) && Boolean(onRemove) && !hideRemoveButton
   const onRemoveClick: MouseEventHandler = e => {
     e.stopPropagation()
@@ -70,7 +68,6 @@ const IssueLabelToken = forwardRef((props, forwardedRef) => {
       style={customProperties}
       data-has-remove-button={!hideRemoveButton && !!onRemove}
       data-selected={isSelected}
-      data-in-color-mode={resolvedColorScheme || 'light'}
       {...(!hasMultipleActionTargets ? interactiveTokenProps : {})}
       {...rest}
       ref={forwardedRef}