Skip to content

Commit 49d00e4

Browse files
TkDodoTkDodo
authored
ref(ui): replace all chonk.100 colors with computation (#95109)
1 parent e559d20 commit 49d00e4

File tree

8 files changed

+71
-90
lines changed

8 files changed

+71
-90
lines changed

‎static/app/components/core/button/styles.chonk.tsx

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import type {DO_NOT_USE_ChonkTheme} from '@emotion/react';
22

33
import type {DO_NOT_USE_ButtonProps as ButtonProps} from 'sentry/components/core/button/types';
4+
import {chonkFor} from 'sentry/components/core/chonk';
45
// eslint-disable-next-line boundaries/element-types
56
import type {StrictCSSObject} from 'sentry/utils/theme';
67
// eslint-disable-next-line boundaries/element-types
@@ -68,6 +69,8 @@ export function DO_NOT_USE_getChonkButtonStyles(
6869
},
6970
} as const;
7071

72+
const chonkButtonTheme = getChonkButtonTheme(type, p.theme);
73+
7174
return {
7275
position: 'relative',
7376
display: 'inline-flex',
@@ -82,7 +85,7 @@ export function DO_NOT_USE_getChonkButtonStyles(
8285
padding: getChonkButtonSizeTheme(p.size, p.theme).padding,
8386
borderRadius: getChonkButtonSizeTheme(p.size, p.theme).borderRadius,
8487
border: 'none',
85-
color: getChonkButtonTheme(type, p.theme).color,
88+
color: chonkButtonTheme.color,
8689

8790
background: 'none',
8891

@@ -96,8 +99,8 @@ export function DO_NOT_USE_getChonkButtonStyles(
9699
height: `calc(100% - ${chonkElevation(p.size)})`,
97100
top: `${chonkElevation(p.size)}`,
98101
transform: `translateY(-${chonkElevation(p.size)})`,
99-
boxShadow: `0 ${chonkElevation(p.size)} 0 0px ${getChonkButtonTheme(type, p.theme).background}`,
100-
background: getChonkButtonTheme(type, p.theme).background,
102+
boxShadow: `0 ${chonkElevation(p.size)} 0 0px ${chonkButtonTheme.background}`,
103+
background: chonkButtonTheme.background,
101104
borderRadius: 'inherit',
102105
},
103106

@@ -106,16 +109,16 @@ export function DO_NOT_USE_getChonkButtonStyles(
106109
display: 'block',
107110
position: 'absolute',
108111
inset: '0',
109-
background: getChonkButtonTheme(type, p.theme).surface,
112+
background: chonkButtonTheme.surface,
110113
borderRadius: 'inherit',
111-
border: `1px solid ${getChonkButtonTheme(type, p.theme).background}`,
114+
border: `1px solid ${chonkButtonTheme.background}`,
112115
transform: `translateY(-${chonkElevation(p.size)})`,
113116
transition: 'transform 0.06s ease-in-out',
114117
},
115118

116119
'&:focus-visible': {
117120
outline: 'none',
118-
color: p.disabled || p.busy ? undefined : getChonkButtonTheme(type, p.theme).color,
121+
color: p.disabled || p.busy ? undefined : chonkButtonTheme.color,
119122

120123
'&::after': {
121124
border: `1px solid ${p.theme.focusBorder}`,
@@ -140,7 +143,7 @@ export function DO_NOT_USE_getChonkButtonStyles(
140143
},
141144

142145
'&:hover': {
143-
color: p.disabled || p.busy ? undefined : getChonkButtonTheme(type, p.theme).color,
146+
color: p.disabled || p.busy ? undefined : chonkButtonTheme.color,
144147

145148
'&::after': {
146149
transform: `translateY(calc(-${chonkElevation(p.size)} - 2px))`,
@@ -257,19 +260,19 @@ function getChonkButtonTheme(type: ChonkButtonType, theme: DO_NOT_USE_ChonkTheme
257260
case 'accent':
258261
return {
259262
surface: theme.colors.chonk.blue400,
260-
background: theme.colors.chonk.blue100,
263+
background: chonkFor(theme, theme.colors.chonk.blue400),
261264
color: theme.colors.white,
262265
};
263266
case 'warning':
264267
return {
265268
surface: theme.colors.chonk.yellow400,
266-
background: theme.colors.chonk.yellow100,
269+
background: chonkFor(theme, theme.colors.chonk.yellow400),
267270
color: theme.colors.black,
268271
};
269272
case 'danger':
270273
return {
271274
surface: theme.colors.chonk.red400,
272-
background: theme.colors.chonk.red100,
275+
background: chonkFor(theme, theme.colors.chonk.red400),
273276
color: theme.colors.white,
274277
};
275278
case 'transparent':

‎static/app/components/core/chonk.ts

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import type {DO_NOT_USE_ChonkTheme} from '@emotion/react';
2+
import color from 'color';
3+
4+
const chonkCache = new Map<{baseColor: string; type: 'light' | 'dark'}, string>();
5+
6+
export function chonkFor(theme: DO_NOT_USE_ChonkTheme, baseColor: string) {
7+
const cacheKey = {baseColor, type: theme.type};
8+
if (chonkCache.has(cacheKey)) {
9+
return chonkCache.get(cacheKey)!;
10+
}
11+
const input = color(baseColor).hsl();
12+
13+
const result =
14+
theme.type === 'dark'
15+
? color.hsl(input.hue(), input.saturationl() * 0.1, input.lightness() * 0.1).hex()
16+
: color
17+
.hsl(input.hue(), input.saturationl() * 0.85, input.lightness() * 0.85)
18+
.hex();
19+
20+
chonkCache.set(cacheKey, result);
21+
22+
return result;
23+
}

‎static/app/components/core/slider/index.chonk.tsx

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import {type CSSProperties, useState} from 'react';
22

3+
import {chonkFor} from 'sentry/components/core/chonk';
34
import {space} from 'sentry/styles/space';
45
import {chonkStyled} from 'sentry/utils/theme/theme.chonk';
56

@@ -92,7 +93,7 @@ const StepMark = chonkStyled('span')<{filled?: boolean}>`
9293
width: 2px;
9394
border-radius: ${p => p.theme.radius.lg};
9495
background: ${p =>
95-
p.filled ? p.theme.colors.chonk.blue300 : p.theme.colors.surface100};
96+
p.filled ? p.theme.colors.chonk.blue400 : p.theme.colors.surface100};
9697
}
9798
`;
9899

@@ -155,8 +156,8 @@ const StyledSlider = chonkStyled('input')`
155156
min-width: calc(${p => p.theme.radius['2xs']} * 6);
156157
width: var(--p, 50%);
157158
height: 4px;
158-
background: ${p => p.theme.colors.chonk.blue300};
159-
border: 1px solid ${p => p.theme.colors.chonk.blue300};
159+
background: ${p => p.theme.colors.chonk.blue400};
160+
border: 1px solid ${p => p.theme.colors.chonk.blue400};
160161
border-radius: ${p => p.theme.radius['2xs']};
161162
}
162163
@@ -174,8 +175,8 @@ const StyledSlider = chonkStyled('input')`
174175
width: 16px;
175176
height: 16px;
176177
background: ${p => p.theme.colors.white};
177-
border: 1px solid ${p => p.theme.colors.chonk.blue100};
178-
border-bottom: 2px solid ${p => p.theme.colors.chonk.blue100};
178+
border: 1px solid ${p => chonkFor(p.theme, p.theme.colors.chonk.blue400)};
179+
border-bottom: 2px solid ${p => chonkFor(p.theme, p.theme.colors.chonk.blue400)};
179180
border-radius: ${p => p.theme.radius.sm};
180181
transform: translateY(-7px);
181182
z-index: 10;
@@ -195,8 +196,8 @@ const StyledSlider = chonkStyled('input')`
195196
width: 16px;
196197
height: 16px;
197198
background: ${p => p.theme.colors.white};
198-
border: 1px solid ${p => p.theme.colors.chonk.blue100};
199-
border-bottom: 2px solid ${p => p.theme.colors.chonk.blue100};
199+
border: 1px solid ${p => chonkFor(p.theme, p.theme.colors.chonk.blue400)};
200+
border-bottom: 2px solid ${p => chonkFor(p.theme, p.theme.colors.chonk.blue400)};
200201
border-radius: ${p => p.theme.radius.sm};
201202
transform: translateY(-7px);
202203
z-index: 1;
@@ -239,8 +240,8 @@ const SliderLabel = chonkStyled('span')`
239240
padding-inline: ${space(0.5)};
240241
width: min-content;
241242
text-align: center;
242-
background: ${p => p.theme.colors.chonk.blue300};
243-
border: 1px solid ${p => p.theme.colors.chonk.blue100};
243+
background: ${p => p.theme.colors.chonk.blue400};
244+
border: 1px solid ${p => chonkFor(p.theme, p.theme.colors.chonk.blue400)};
244245
color: ${p => p.theme.white};
245246
border-radius: ${p => p.theme.radius['2xs']};
246247
z-index: ${p => p.theme.zIndex.tooltip};

‎static/app/components/core/switch/index.chonk.tsx

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import {chonkFor} from 'sentry/components/core/chonk';
12
import type {SwitchProps} from 'sentry/components/core/switch';
23
import {chonkStyled} from 'sentry/utils/theme/theme.chonk';
34

@@ -75,14 +76,14 @@ export const ChonkNativeHiddenCheckbox = chonkStyled('input')<{
7576
7677
&:checked + div {
7778
background: ${p => p.theme.colors.chonk.blue400};
78-
border-top: 3px solid ${p => p.theme.colors.chonk.blue100};
79-
border-right: 1px solid ${p => p.theme.colors.chonk.blue100};
80-
border-bottom: 1px solid ${p => p.theme.colors.chonk.blue100};
81-
border-left: 1px solid ${p => p.theme.colors.chonk.blue100};
79+
border-top: 3px solid ${p => chonkFor(p.theme, p.theme.colors.chonk.blue400)};
80+
border-right: 1px solid ${p => chonkFor(p.theme, p.theme.colors.chonk.blue400)};
81+
border-bottom: 1px solid ${p => chonkFor(p.theme, p.theme.colors.chonk.blue400)};
82+
border-left: 1px solid ${p => chonkFor(p.theme, p.theme.colors.chonk.blue400)};
8283
8384
> div {
8485
background: ${p => p.theme.colors.surface500};
85-
border: 1px solid ${p => p.theme.colors.chonk.blue100};
86+
border: 1px solid ${p => chonkFor(p.theme, p.theme.colors.chonk.blue400)};
8687
transform: translateY(-1px) translateX(${p => toggleWrapperSize[p.nativeSize].width - toggleButtonSize[p.nativeSize].width}px);
8788
8889
&:after {

‎static/app/components/core/toast/index.chonk.tsx

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import {type HTMLMotionProps, motion} from 'framer-motion';
33

44
import type {Indicator} from 'sentry/actionCreators/indicator';
55
import {Button} from 'sentry/components/core/button';
6+
import {chonkFor} from 'sentry/components/core/chonk';
67
import LoadingIndicator from 'sentry/components/loadingIndicator';
78
import {chonkStyled} from 'sentry/utils/theme/theme.chonk';
89

@@ -15,22 +16,22 @@ function getChonkContainerTheme(
1516
return {
1617
background: theme.colors.green100,
1718
borderBottom: `2px solid ${theme.colors.border.success}`,
18-
border: `1px solid ${theme.colors.chonk.green100}`,
19-
boxShadow: `0 3px 0 0px ${theme.colors.chonk.green100}`,
19+
border: `1px solid ${chonkFor(theme, theme.colors.chonk.green400)}`,
20+
boxShadow: `0 3px 0 0px ${chonkFor(theme, theme.colors.chonk.green400)}`,
2021
};
2122
case 'error':
2223
return {
2324
background: theme.colors.red100,
2425
borderBottom: `2px solid ${theme.colors.border.danger}`,
25-
border: `1px solid ${theme.colors.chonk.red100}`,
26-
boxShadow: `0 3px 0 0px ${theme.colors.chonk.red100}`,
26+
border: `1px solid ${chonkFor(theme, theme.colors.chonk.red400)}`,
27+
boxShadow: `0 3px 0 0px ${chonkFor(theme, theme.colors.chonk.red400)}`,
2728
};
2829
default:
2930
return {
3031
background: theme.colors.background.primary,
3132
borderBottom: `2px solid ${theme.colors.border.accent}`,
32-
border: `1px solid ${theme.colors.chonk.blue100}`,
33-
boxShadow: `0 3px 0 0px ${theme.colors.chonk.blue100}`,
33+
border: `1px solid ${chonkFor(theme, theme.colors.chonk.blue400)}`,
34+
boxShadow: `0 3px 0 0px ${chonkFor(theme, theme.colors.chonk.blue400)}`,
3435
};
3536
}
3637
}
@@ -79,17 +80,17 @@ function getChonkToastIconContainerTheme(
7980
case 'success':
8081
return {
8182
background: theme.colors.chonk.green400,
82-
borderRight: `1px solid ${theme.colors.chonk.green100}`,
83+
borderRight: `1px solid ${chonkFor(theme, theme.colors.chonk.green400)}`,
8384
};
8485
case 'error':
8586
return {
8687
background: theme.colors.chonk.red400,
87-
borderRight: `1px solid ${theme.colors.chonk.red100}`,
88+
borderRight: `1px solid ${chonkFor(theme, theme.colors.chonk.red400)}`,
8889
};
8990
default:
9091
return {
9192
background: theme.colors.background.primary,
92-
borderRight: `1px solid ${theme.colors.chonk.blue100}`,
93+
borderRight: `1px solid ${chonkFor(theme, theme.colors.chonk.blue400)}`,
9394
};
9495
}
9596
}

‎static/app/utils/theme/theme.chonk.tsx

Lines changed: 5 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -639,29 +639,10 @@ const lightColors = {
639639
// Currently used for avatars, badges, booleans, buttons, checkboxes, radio buttons
640640
chonk: {
641641
blue400: '#7553FF',
642-
blue300: '#6C4DEB',
643-
blue200: '#6246D4',
644-
blue100: '#553DB8',
645-
646642
pink400: '#FF70BC',
647-
pink300: '#ED69AF',
648-
pink200: '#DB61A2',
649-
pink100: '#962963',
650-
651643
red400: '#E50045',
652-
red300: '#D4003F',
653-
red200: '#C2003B',
654-
red100: '#A80033',
655-
656644
yellow400: '#FFD00E',
657-
yellow300: '#F0C40D',
658-
yellow200: '#E0B70C',
659-
yellow100: '#C9A30A',
660-
661645
green400: '#00F261',
662-
green300: '#00E35B',
663-
green200: '#00D455',
664-
green100: '#00BF4D',
665646
},
666647
};
667648

@@ -741,29 +722,10 @@ const darkColors: typeof lightColors = {
741722
// Currently used for avatars, badges, booleans, buttons, checkboxes, radio buttons
742723
chonk: {
743724
blue400: '#7553FF',
744-
blue300: '#6C4DEB',
745-
blue200: '#6246D4',
746-
blue100: '#07050F',
747-
748725
pink400: '#FF70BC',
749-
pink300: '#ED69AF',
750-
pink200: '#DB61A2',
751-
pink100: '#0D0609',
752-
753726
red400: '#E50045',
754-
red300: '#D4003F',
755-
red200: '#C2003B',
756-
red100: '#1A0007',
757-
758727
yellow400: '#FFD00E',
759-
yellow300: '#F0C40D',
760-
yellow200: '#E0B70C',
761-
yellow100: '#0A0800',
762-
763728
green400: '#00F261',
764-
green300: '#00E35B',
765-
green200: '#00D455',
766-
green100: '#000A04',
767729
},
768730
};
769731

@@ -939,9 +901,9 @@ const generateAliases = (
939901
* Indicates that something is "active" or "selected"
940902
* NOTE: These are largely used for form elements, which I haven't mocked in ChonkUI
941903
*/
942-
active: colors.chonk.blue200,
943-
activeHover: colors.chonk.blue300,
944-
activeText: tokens.content.accent,
904+
active: tokens.component.link.accent.active,
905+
activeHover: tokens.component.link.accent.hover,
906+
activeText: tokens.component.link.accent.default,
945907

946908
/**
947909
* Indicates that something has "focus", which is different than "active" state as it is more temporal
@@ -999,12 +961,6 @@ const generateAliases = (
999961
*/
1000962
progressBackground: colors.gray100,
1001963

1002-
/**
1003-
* Tag progress bars
1004-
*/
1005-
tagBarHover: colors.chonk.blue300,
1006-
tagBar: colors.gray200,
1007-
1008964
// @todo(jonasbadalic) should these reference chonk colors?
1009965
searchTokenBackground: {
1010966
valid: colors.blue100,
@@ -1182,7 +1138,7 @@ interface ChonkTheme extends Omit<SentryTheme, 'isChonk' | 'chart'> {
11821138
*/
11831139
export const DO_NOT_USE_lightChonkTheme: ChonkTheme = {
11841140
isChonk: true,
1185-
1141+
type: 'light',
11861142
// @TODO: color theme contains some colors (like chart color palette, diff, tag and level)
11871143
...commonTheme,
11881144
...formTheme,
@@ -1261,7 +1217,7 @@ export const DO_NOT_USE_lightChonkTheme: ChonkTheme = {
12611217
*/
12621218
export const DO_NOT_USE_darkChonkTheme: ChonkTheme = {
12631219
isChonk: true,
1264-
1220+
type: 'dark',
12651221
// @TODO: color theme contains some colors (like chart color palette, diff, tag and level)
12661222
...commonTheme,
12671223
...formTheme,

‎static/app/utils/theme/theme.tsx

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -414,12 +414,6 @@ const generateThemeAliases = (colors: Colors) => ({
414414
*/
415415
progressBackground: colors.gray100,
416416

417-
/**
418-
* Tag progress bars
419-
*/
420-
tagBarHover: colors.purple200,
421-
tagBar: colors.gray200,
422-
423417
/**
424418
* Search filter "token" background
425419
*/
@@ -1222,6 +1216,7 @@ const darkAliases = generateThemeAliases(darkColors);
12221216
* @deprecated use useTheme hook instead of directly importing the theme. If you require a theme for your tests, use ThemeFixture.
12231217
*/
12241218
export const lightTheme = {
1219+
type: 'light' as 'light' | 'dark',
12251220
isChonk: false,
12261221
...commonTheme,
12271222
...formTheme,
@@ -1277,6 +1272,7 @@ export const lightTheme = {
12771272
* @deprecated use useTheme hook instead of directly importing the theme. If you require a theme for your tests, use ThemeFixture.
12781273
*/
12791274
export const darkTheme: typeof lightTheme = {
1275+
type: 'dark',
12801276
isChonk: false,
12811277
...commonTheme,
12821278
...formTheme,

0 commit comments

Comments
 (0)