Skip to content

Commit 8f482f7

Browse files
TkDodoTkDodo
authored
ref(ui): remove tokens from theme.colors (#104453)
as we already have theme.tokens and they were pointing to the same values
1 parent 6041467 commit 8f482f7

File tree

14 files changed

+50
-60
lines changed

14 files changed

+50
-60
lines changed

‎static/app/components/core/alert/alert.chonk.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -120,14 +120,14 @@ function generateAlertBackground(
120120
${tokens.background} ${width}px,
121121
${tokens.background} ${width + 1}px
122122
),
123-
linear-gradient(${theme.colors.background.primary});
123+
linear-gradient(${theme.tokens.background.primary});
124124
padding-left: calc(${width}px + ${props.theme!.space.lg});
125125
`;
126126
}
127127
return css`
128128
background-image:
129129
linear-gradient(${tokens.background}),
130-
linear-gradient(${theme.colors.background.primary});
130+
linear-gradient(${theme.tokens.background.primary});
131131
`;
132132
}
133133

‎static/app/components/core/badge/badge.chonk.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -81,27 +81,27 @@ function makeChonkBadgeTheme(
8181
case 'highlight':
8282
case 'info':
8383
return {
84-
color: theme.colors.content.accent,
84+
color: theme.tokens.content.accent,
8585
background: theme.colors.blue100,
8686
};
8787
case 'promotion':
8888
return {
89-
color: theme.colors.content.promotion,
89+
color: theme.tokens.content.promotion,
9090
background: theme.colors.pink100,
9191
};
9292
case 'danger':
9393
return {
94-
color: theme.colors.content.danger,
94+
color: theme.tokens.content.danger,
9595
background: theme.colors.red100,
9696
};
9797
case 'warning':
9898
return {
99-
color: theme.colors.content.warning,
99+
color: theme.tokens.content.warning,
100100
background: theme.colors.yellow100,
101101
};
102102
case 'success':
103103
return {
104-
color: theme.colors.content.success,
104+
color: theme.tokens.content.success,
105105
background: theme.colors.green100,
106106
};
107107
default:

‎static/app/components/core/badge/tag.chonk.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -48,34 +48,34 @@ function makeTagPillTheme(type: TagType | undefined, theme: Theme): React.CSSPro
4848
case undefined:
4949
case 'default':
5050
return {
51-
color: theme.colors.content.muted,
51+
color: theme.tokens.content.muted,
5252
background: theme.colors.gray100,
5353
};
5454

5555
// Highlight maps to info badge for now, but the highlight variant should be removed
5656
case 'info':
5757
return {
58-
color: theme.colors.content.accent,
58+
color: theme.tokens.content.accent,
5959
background: theme.colors.blue100,
6060
};
6161
case 'promotion':
6262
return {
63-
color: theme.colors.content.promotion,
63+
color: theme.tokens.content.promotion,
6464
background: theme.colors.pink100,
6565
};
6666
case 'danger':
6767
return {
68-
color: theme.colors.content.danger,
68+
color: theme.tokens.content.danger,
6969
background: theme.colors.red100,
7070
};
7171
case 'warning':
7272
return {
73-
color: theme.colors.content.warning,
73+
color: theme.tokens.content.warning,
7474
background: theme.colors.yellow100,
7575
};
7676
case 'success':
7777
return {
78-
color: theme.colors.content.success,
78+
color: theme.tokens.content.success,
7979
background: theme.colors.green100,
8080
};
8181
default:

‎static/app/components/core/menuListItem/menuListItem.chonk.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ function getTextColor({
2424
}
2525
switch (priority) {
2626
case 'primary':
27-
return theme.colors.content.accent;
27+
return theme.tokens.content.accent;
2828
case 'danger':
2929
return theme.errorText;
3030
case 'default':

‎static/app/components/core/select/select.chonk.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -293,7 +293,7 @@ export const ChonkCheckWrap = chonkStyled('div')<{
293293
: css`
294294
${p.isSelected &&
295295
css`
296-
color: ${p.theme.colors.content.accent};
296+
color: ${p.theme.tokens.content.accent};
297297
`}
298298
`}
299299
`;

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ export const ChonkNativeHiddenCheckbox = chonkStyled('input')<{
6969
background-repeat: no-repeat;
7070
background-size: ${p => toggleButtonSize[p.nativeSize].icon}px ${p => toggleButtonSize[p.nativeSize].icon}px;
7171
transition: transform ${p => p.theme.motion.snap.slow};
72-
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path fill="${p => urlEscapeHex(p.theme.colors.content.muted)}" d="M5.03 3.97a.75.75 0 0 0-1.06 1.06L6.94 8l-2.97 2.97a.75.75 0 1 0 1.06 1.06L8 9.06l2.97 2.97a.75.75 0 1 0 1.06-1.06L9.06 8l2.97-2.97a.75.75 0 0 0-1.06-1.06L8 6.94 5.03 3.97Z" clip-rule="evenodd"/></svg>');
72+
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path fill="${p => urlEscapeHex(p.theme.tokens.content.muted)}" d="M5.03 3.97a.75.75 0 0 0-1.06 1.06L6.94 8l-2.97 2.97a.75.75 0 1 0 1.06 1.06L8 9.06l2.97 2.97a.75.75 0 1 0 1.06-1.06L9.06 8l2.97-2.97a.75.75 0 0 0-1.06-1.06L8 6.94 5.03 3.97Z" clip-rule="evenodd"/></svg>');
7373
}
7474
}
7575
}
@@ -87,7 +87,7 @@ export const ChonkNativeHiddenCheckbox = chonkStyled('input')<{
8787
transform: translateY(-1px) translateX(${p => toggleWrapperSize[p.nativeSize].width - toggleButtonSize[p.nativeSize].width}px);
8888
8989
&:after {
90-
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path fill="${p => urlEscapeHex(p.theme.colors.content.accent)}" fill-rule="evenodd" d="M13.53 4.22c.3.3.3.77 0 1.06l-6.5 6.5a.75.75 0 0 1-1.08-.02l-3.5-3.75A.75.75 0 0 1 3.55 7l2.97 3.18 5.95-5.95c.3-.3.77-.3 1.06 0Z" clip-rule="evenodd"/></svg>');
90+
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path fill="${p => urlEscapeHex(p.theme.tokens.content.accent)}" fill-rule="evenodd" d="M13.53 4.22c.3.3.3.77 0 1.06l-6.5 6.5a.75.75 0 0 1-1.08-.02l-3.5-3.75A.75.75 0 0 1 3.55 7l2.97 3.18 5.95-5.95c.3-.3.77-.3 1.06 0Z" clip-rule="evenodd"/></svg>');
9191
}
9292
}
9393
}

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -98,21 +98,21 @@ function getContainerTheme(theme: Theme, type: Indicator['type']): React.CSSProp
9898
case 'success':
9999
return {
100100
background: theme.colors.green100,
101-
borderBottom: `2px solid ${theme.colors.border.success}`,
101+
borderBottom: `2px solid ${theme.tokens.border.success}`,
102102
border: `1px solid ${chonkFor(theme, theme.colors.chonk.green400)}`,
103103
boxShadow: `0 3px 0 0px ${chonkFor(theme, theme.colors.chonk.green400)}`,
104104
};
105105
case 'error':
106106
return {
107107
background: theme.colors.red100,
108-
borderBottom: `2px solid ${theme.colors.border.danger}`,
108+
borderBottom: `2px solid ${theme.tokens.border.danger}`,
109109
border: `1px solid ${chonkFor(theme, theme.colors.chonk.red400)}`,
110110
boxShadow: `0 3px 0 0px ${chonkFor(theme, theme.colors.chonk.red400)}`,
111111
};
112112
default:
113113
return {
114-
background: theme.colors.background.primary,
115-
borderBottom: `2px solid ${theme.colors.border.accent}`,
114+
background: theme.tokens.background.primary,
115+
borderBottom: `2px solid ${theme.tokens.border.accent}`,
116116
border: `1px solid ${chonkFor(theme, theme.colors.chonk.blue400)}`,
117117
boxShadow: `0 3px 0 0px ${chonkFor(theme, theme.colors.chonk.blue400)}`,
118118
};
@@ -139,7 +139,7 @@ const ToastOuterContainer = chonkStyled(motion.div)<{type: Indicator['type']}>`
139139
* so we set the background color here to the background color so that the
140140
* toast is not see-through.
141141
*/
142-
background: ${p => p.theme.colors.background.primary};
142+
background: ${p => p.theme.tokens.background.primary};
143143
border-radius: ${p => p.theme.radius.lg};
144144
border: ${p => getContainerTheme(p.theme, p.type).border};
145145
box-shadow: ${p => getContainerTheme(p.theme, p.type).boxShadow};
@@ -168,7 +168,7 @@ function getToastIconContainerTheme(
168168
};
169169
default:
170170
return {
171-
background: theme.colors.background.primary,
171+
background: theme.tokens.background.primary,
172172
borderRight: `1px solid ${chonkFor(theme, theme.colors.chonk.blue400)}`,
173173
};
174174
}

‎static/app/components/events/autofix/autofixSolutionEventItem.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -49,17 +49,17 @@ function getEventColor(
4949
): TimelineItemProps['colorConfig'] {
5050
if (isChonkTheme(theme)) {
5151
return {
52-
title: theme.colors.content.primary,
52+
title: theme.tokens.content.primary,
5353
icon: isSelected
5454
? isActive
5555
? theme.green400
56-
: theme.colors.content.primary
57-
: theme.colors.content.muted,
56+
: theme.tokens.content.primary
57+
: theme.tokens.content.muted,
5858
iconBorder: isSelected
5959
? isActive
6060
? theme.green400
61-
: theme.colors.content.primary
62-
: theme.colors.content.muted,
61+
: theme.tokens.content.primary
62+
: theme.tokens.content.muted,
6363
};
6464
}
6565
return {

‎static/app/components/events/autofix/autofixTimelineItem.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -41,9 +41,9 @@ function getEventColor(
4141
): TimelineItemProps['colorConfig'] {
4242
if (isChonkTheme(theme)) {
4343
return {
44-
title: theme.colors.content.primary,
45-
icon: isActive ? theme.colors.pink400 : theme.colors.content.muted,
46-
iconBorder: isActive ? theme.colors.pink400 : theme.colors.content.muted,
44+
title: theme.tokens.content.primary,
45+
icon: isActive ? theme.colors.pink400 : theme.tokens.content.muted,
46+
iconBorder: isActive ? theme.colors.pink400 : theme.tokens.content.muted,
4747
};
4848
}
4949
return {

‎static/app/components/events/breadcrumbs/utils.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -290,9 +290,9 @@ function getBreadcrumbColorConfig(
290290
default:
291291
if (isChonkTheme(theme)) {
292292
return {
293-
title: theme.colors.content.primary,
294-
icon: theme.colors.content.muted,
295-
iconBorder: theme.colors.content.muted,
293+
title: theme.tokens.content.primary,
294+
icon: theme.tokens.content.muted,
295+
iconBorder: theme.tokens.content.muted,
296296
};
297297
}
298298
return {title: theme.gray400, icon: theme.gray300, iconBorder: theme.gray200};

0 commit comments

Comments
 (0)