Skip to content

Commit 3e6e448

Browse files
francineluccafrancinelucca
authored
chore: refactor IssueLabelToken styles (#7012)
1 parent 2fd6c82 commit 3e6e448

File tree

3 files changed

+84
-86
lines changed

3 files changed

+84
-86
lines changed

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

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -21065,7 +21065,6 @@ exports[`TextInputWithTokens > renders with tokens using a custom token componen
2106521065
class="prc-Token-TokenBase-MtVGQ prc-Token-IssueLabel-ACoKj"
2106621066
data-cursor-is-interactive="true"
2106721067
data-has-remove-button="true"
21068-
data-in-color-mode="light"
2106921068
data-selected="false"
2107021069
data-size="xlarge"
2107121070
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
2110721106
class="prc-Token-TokenBase-MtVGQ prc-Token-IssueLabel-ACoKj"
2110821107
data-cursor-is-interactive="true"
2110921108
data-has-remove-button="true"
21110-
data-in-color-mode="light"
2111121109
data-selected="false"
2111221110
data-size="xlarge"
2111321111
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
2114921147
class="prc-Token-TokenBase-MtVGQ prc-Token-IssueLabel-ACoKj"
2115021148
data-cursor-is-interactive="true"
2115121149
data-has-remove-button="true"
21152-
data-in-color-mode="light"
2115321150
data-selected="false"
2115421151
data-size="xlarge"
2115521152
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
2119121188
class="prc-Token-TokenBase-MtVGQ prc-Token-IssueLabel-ACoKj"
2119221189
data-cursor-is-interactive="true"
2119321190
data-has-remove-button="true"
21194-
data-in-color-mode="light"
2119521191
data-selected="false"
2119621192
data-size="xlarge"
2119721193
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
2123321229
class="prc-Token-TokenBase-MtVGQ prc-Token-IssueLabel-ACoKj"
2123421230
data-cursor-is-interactive="true"
2123521231
data-has-remove-button="true"
21236-
data-in-color-mode="light"
2123721232
data-selected="false"
2123821233
data-size="xlarge"
2123921234
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
2127521270
class="prc-Token-TokenBase-MtVGQ prc-Token-IssueLabel-ACoKj"
2127621271
data-cursor-is-interactive="true"
2127721272
data-has-remove-button="true"
21278-
data-in-color-mode="light"
2127921273
data-selected="false"
2128021274
data-size="xlarge"
2128121275
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
2131721311
class="prc-Token-TokenBase-MtVGQ prc-Token-IssueLabel-ACoKj"
2131821312
data-cursor-is-interactive="true"
2131921313
data-has-remove-button="true"
21320-
data-in-color-mode="light"
2132121314
data-selected="false"
2132221315
data-size="xlarge"
2132321316
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
2135921352
class="prc-Token-TokenBase-MtVGQ prc-Token-IssueLabel-ACoKj"
2136021353
data-cursor-is-interactive="true"
2136121354
data-has-remove-button="true"
21362-
data-in-color-mode="light"
2136321355
data-selected="false"
2136421356
data-size="xlarge"
2136521357
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
2142421416
class="prc-Token-TokenBase-MtVGQ prc-Token-IssueLabel-ACoKj"
2142521417
data-cursor-is-interactive="true"
2142621418
data-has-remove-button="true"
21427-
data-in-color-mode="light"
2142821419
data-selected="false"
2142921420
data-size="xlarge"
2143021421
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
2146621457
class="prc-Token-TokenBase-MtVGQ prc-Token-IssueLabel-ACoKj"
2146721458
data-cursor-is-interactive="true"
2146821459
data-has-remove-button="true"
21469-
data-in-color-mode="light"
2147021460
data-selected="false"
2147121461
data-size="xlarge"
2147221462
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
2150821498
class="prc-Token-TokenBase-MtVGQ prc-Token-IssueLabel-ACoKj"
2150921499
data-cursor-is-interactive="true"
2151021500
data-has-remove-button="true"
21511-
data-in-color-mode="light"
2151221501
data-selected="false"
2151321502
data-size="xlarge"
2151421503
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
2155021539
class="prc-Token-TokenBase-MtVGQ prc-Token-IssueLabel-ACoKj"
2155121540
data-cursor-is-interactive="true"
2155221541
data-has-remove-button="true"
21553-
data-in-color-mode="light"
2155421542
data-selected="false"
2155521543
data-size="xlarge"
2155621544
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
2159221580
class="prc-Token-TokenBase-MtVGQ prc-Token-IssueLabel-ACoKj"
2159321581
data-cursor-is-interactive="true"
2159421582
data-has-remove-button="true"
21595-
data-in-color-mode="light"
2159621583
data-selected="false"
2159721584
data-size="xlarge"
2159821585
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
2163421621
class="prc-Token-TokenBase-MtVGQ prc-Token-IssueLabel-ACoKj"
2163521622
data-cursor-is-interactive="true"
2163621623
data-has-remove-button="true"
21637-
data-in-color-mode="light"
2163821624
data-selected="false"
2163921625
data-size="xlarge"
2164021626
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
2167621662
class="prc-Token-TokenBase-MtVGQ prc-Token-IssueLabel-ACoKj"
2167721663
data-cursor-is-interactive="true"
2167821664
data-has-remove-button="true"
21679-
data-in-color-mode="light"
2168021665
data-selected="false"
2168121666
data-size="xlarge"
2168221667
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
2171821703
class="prc-Token-TokenBase-MtVGQ prc-Token-IssueLabel-ACoKj"
2171921704
data-cursor-is-interactive="true"
2172021705
data-has-remove-button="true"
21721-
data-in-color-mode="light"
2172221706
data-selected="false"
2172321707
data-size="xlarge"
2172421708
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‎

Lines changed: 84 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,63 @@
1+
/* stylelint-disable primer/colors */
2+
@define-mixin lightThemeIssueLabel {
3+
--lightness-threshold: 0.453;
4+
--border-threshold: 0.96;
5+
--border-alpha: max(0, min(calc((var(--perceived-lightness) - var(--border-threshold)) * 100), 1));
6+
7+
background: rgb(var(--label-r), var(--label-g), var(--label-b));
8+
color: hsl(0deg, 0%, calc(var(--lightness-switch) * 100%));
9+
border-color: hsla(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) - 25) * 1%), var(--border-alpha));
10+
11+
/* Selected state */
12+
&:where([data-selected='true']) {
13+
background: hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) - 5) * 1%));
14+
}
15+
16+
&:where([data-selected='true'])::after {
17+
/* stylelint-disable-next-line primer/box-shadow */
18+
box-shadow: 0 0 0 2px rgb(var(--label-r), var(--label-g), var(--label-b));
19+
}
20+
21+
/* Interactive hover states */
22+
&:where([data-cursor-is-interactive='true']:hover) {
23+
background-image: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)),
24+
linear-gradient(
25+
rgb(var(--label-r), var(--label-g), var(--label-b)),
26+
rgb(var(--label-r), var(--label-g), var(--label-b))
27+
);
28+
box-shadow: var(--shadow-resting-medium);
29+
}
30+
}
31+
32+
@define-mixin darkThemeIssueLabel {
33+
--lightness-threshold: 0.6;
34+
--background-alpha: 0.18;
35+
--border-alpha: 0.3;
36+
--lighten-by: calc(((var(--lightness-threshold) - var(--perceived-lightness)) * 100) * var(--lightness-switch));
37+
38+
background: rgba(var(--label-r), var(--label-g), var(--label-b), var(--background-alpha));
39+
color: hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%));
40+
border-color: hsla(
41+
var(--label-h),
42+
calc(var(--label-s) * 1%),
43+
calc((var(--label-l) + var(--lighten-by)) * 1%),
44+
var(--border-alpha)
45+
);
46+
47+
/* Selected state */
48+
&:where([data-selected='true'])::after {
49+
/* stylelint-disable-next-line primer/box-shadow */
50+
box-shadow: 0 0 0 2px
51+
hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%));
52+
}
53+
54+
/* Interactive hover states */
55+
&:where([data-cursor-is-interactive='true']:hover) {
56+
background: hsla(var(--label-h), calc(var(--label-s) * 1%), calc(calc(var(--label-l) + 10) * 1%), 0.3);
57+
box-shadow: var(--shadow-resting-medium);
58+
}
59+
}
60+
161
.IssueLabel {
262
/* Color variables - dynamically set via inline CSS custom properties */
363
--label-r: 153;
@@ -16,48 +76,37 @@
1676
border-style: solid;
1777
}
1878

79+
@media (prefers-color-scheme: light) {
80+
[data-color-mode='auto'][data-light-theme*='light'] .IssueLabel {
81+
@mixin lightThemeIssueLabel;
82+
}
83+
84+
[data-color-mode='auto'][data-light-theme*='dark'] .IssueLabel {
85+
@mixin darkThemeIssueLabel;
86+
}
87+
}
88+
89+
@media (prefers-color-scheme: dark) {
90+
[data-color-mode='auto'][data-dark-theme*='light'] .IssueLabel {
91+
@mixin lightThemeIssueLabel;
92+
}
93+
94+
[data-color-mode='auto'][data-dark-theme*='dark'] .IssueLabel {
95+
@mixin darkThemeIssueLabel;
96+
}
97+
}
98+
1999
/* Light mode styles */
20-
.IssueLabel:where([data-in-color-mode*='light'], [data-in-color-mode='auto']) {
21-
--lightness-threshold: 0.453;
22-
--border-threshold: 0.96;
23-
--border-alpha: max(0, min(calc((var(--perceived-lightness) - var(--border-threshold)) * 100), 1));
24-
/* stylelint-disable-next-line primer/colors */
25-
background: rgb(var(--label-r), var(--label-g), var(--label-b));
26-
/* stylelint-disable-next-line primer/colors */
27-
color: hsl(0deg, 0%, calc(var(--lightness-switch) * 100%));
28-
/* stylelint-disable-next-line primer/colors */
29-
border-color: hsla(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) - 25) * 1%), var(--border-alpha));
100+
[data-color-mode='light'] .IssueLabel {
101+
@mixin lightThemeIssueLabel;
30102
}
31103

32104
/* Dark mode styles */
33-
.IssueLabel:where([data-in-color-mode*='dark']) {
34-
--lightness-threshold: 0.6;
35-
--background-alpha: 0.18;
36-
--border-alpha: 0.3;
37-
--lighten-by: calc(((var(--lightness-threshold) - var(--perceived-lightness)) * 100) * var(--lightness-switch));
38-
39-
/* stylelint-disable-next-line primer/colors */
40-
background: rgba(var(--label-r), var(--label-g), var(--label-b), var(--background-alpha));
41-
/* stylelint-disable-next-line primer/colors */
42-
color: hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%));
43-
/* stylelint-disable primer/colors */
44-
border-color: hsla(
45-
var(--label-h),
46-
calc(var(--label-s) * 1%),
47-
calc((var(--label-l) + var(--lighten-by)) * 1%),
48-
var(--border-alpha)
49-
);
50-
/* stylelint-enable primer/colors */
105+
[data-color-mode='dark'] .IssueLabel {
106+
@mixin darkThemeIssueLabel;
51107
}
52108

53109
/* Selected state */
54-
.IssueLabel:where(
55-
[data-selected='true'][data-in-color-mode*='light'],
56-
[data-selected='true'][data-in-color-mode='auto']
57-
) {
58-
/* stylelint-disable-next-line primer/colors */
59-
background: hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) - 5) * 1%));
60-
}
61110

62111
.IssueLabel:where([data-selected='true']) {
63112
outline: none;
@@ -76,38 +125,6 @@
76125
border-radius: var(--borderRadius-full);
77126
}
78127

79-
.IssueLabel:where(
80-
[data-selected='true'][data-in-color-mode*='light'],
81-
[data-selected='true'][data-in-color-mode='auto']
82-
)::after {
83-
/* stylelint-disable-next-line primer/box-shadow */
84-
box-shadow: 0 0 0 2px rgb(var(--label-r), var(--label-g), var(--label-b));
85-
}
86-
87-
.IssueLabel:where([data-selected='true'][data-in-color-mode='dark'])::after {
88-
/* stylelint-disable-next-line primer/box-shadow */
89-
box-shadow: 0 0 0 2px hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%));
90-
}
91-
92-
/* Interactive hover states */
93-
.IssueLabel:where(
94-
[data-cursor-is-interactive='true']:hover[data-in-color-mode*='light'],
95-
[data-cursor-is-interactive='true']:hover[data-in-color-mode='auto']
96-
) {
97-
background-image: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)),
98-
linear-gradient(
99-
rgb(var(--label-r), var(--label-g), var(--label-b)),
100-
rgb(var(--label-r), var(--label-g), var(--label-b))
101-
);
102-
box-shadow: var(--shadow-resting-medium);
103-
}
104-
105-
.IssueLabel:where([data-cursor-is-interactive='true']:hover[data-in-color-mode='dark']) {
106-
/* stylelint-disable-next-line primer/colors */
107-
background: hsla(var(--label-h), calc(var(--label-s) * 1%), calc(calc(var(--label-l) + 10) * 1%), 0.3);
108-
box-shadow: var(--shadow-resting-medium);
109-
}
110-
111128
/* Remove button styling */
112129
.IssueLabel:where([data-has-remove-button='true']) {
113130
padding-right: 0;

‎packages/react/src/Token/IssueLabelToken.tsx‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import type {TokenBaseProps} from './TokenBase'
44
import TokenBase, {defaultTokenSize, isTokenInteractive} from './TokenBase'
55
import RemoveTokenButton from './_RemoveTokenButton'
66
import {parseToHsla, parseToRgba} from 'color2k'
7-
import {useTheme} from '../ThemeProvider'
87
import TokenTextContainer from './_TokenTextContainer'
98
import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
109
import classes from './IssueLabelToken.module.css'
@@ -38,7 +37,6 @@ const IssueLabelToken = forwardRef((props, forwardedRef) => {
3837
onClick,
3938
}
4039

41-
const {resolvedColorScheme} = useTheme()
4240
const hasMultipleActionTargets = isTokenInteractive(props) && Boolean(onRemove) && !hideRemoveButton
4341
const onRemoveClick: MouseEventHandler = e => {
4442
e.stopPropagation()
@@ -70,7 +68,6 @@ const IssueLabelToken = forwardRef((props, forwardedRef) => {
7068
style={customProperties}
7169
data-has-remove-button={!hideRemoveButton && !!onRemove}
7270
data-selected={isSelected}
73-
data-in-color-mode={resolvedColorScheme || 'light'}
7471
{...(!hasMultipleActionTargets ? interactiveTokenProps : {})}
7572
{...rest}
7673
ref={forwardedRef}

0 commit comments

Comments
 (0)