Skip to content

ref(theme) remove yellow100-yellow400 #106144

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
JonasBa merged 5 commits into from
Jan 14, 2026
Merged

ref(theme) remove yellow100-yellow400 #106144

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
bff3394
ref(theme) remove yello100-yello300
JonasBa Jan 12, 2026
c942c78
ref(theme) remove theme.yellow400
JonasBa Jan 12, 2026
938b8f9
Merge branch 'master' into jb/de-304
JonasBa Jan 13, 2026
5a0e220
fix colors
JonasBa Jan 13, 2026
ac2c5d8
Merge branch 'master' into jb/de-304
JonasBa Jan 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions static/app/components/events/attachmentViewers/logFileViewer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,13 +54,13 @@ const SentryStyleAnsi = styled(Ansi)`
Object.entries(COLOR_MAP).map(
([ansiColor, themeColor]) => `
.ansi-${ansiColor}-bg {
background-color: ${themeColor === 'pink' ? p.theme.colors.pink400 : p.theme[`${themeColor}400`]};
background-color: ${themeColor === 'pink' ? p.theme.colors.pink500 : themeColor === 'yellow' ? p.theme.colors.yellow500 : p.theme[`${themeColor}400`]};
}
.ansi-${ansiColor}-fg {
color: ${themeColor === 'pink' ? p.theme.colors.pink400 : p.theme[`${themeColor}400`]};
color: ${themeColor === 'pink' ? p.theme.colors.pink500 : themeColor === 'yellow' ? p.theme.colors.yellow500 : p.theme[`${themeColor}400`]};
}
.ansi-bright-${ansiColor}-fg {
color: ${themeColor === 'pink' ? p.theme.colors.pink200 : p.theme[`${themeColor}200`]};
color: ${themeColor === 'pink' ? p.theme.colors.pink200 : themeColor === 'yellow' ? p.theme.colors.yellow200 : p.theme[`${themeColor}200`]};
Comment on lines -57 to +63
Copy link
Collaborator

@TkDodo TkDodo Jan 14, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

since all the 400 colors will become 500 colors, in the end, this is just gonna be p.theme.colors[${themeColor}500]} without any ternaries.

that’s what I did for the red removal, I think we’re all gonna have conflicts on this 😅

#106254

Copy link
Member Author

@JonasBa JonasBa Jan 14, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, we're going to have conflicts here, but they should be easy to resolve at least :D

}`
)}

Expand Down
17 changes: 0 additions & 17 deletions static/app/utils/theme/theme.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1021,23 +1021,6 @@ const deprecatedColorMappings = (colors: Colors) => ({
return colors.red100;
},

/** @deprecated */
get yellow400() {
return colors.yellow500;
},
/** @deprecated */
get yellow300() {
return colors.yellow400;
},
/** @deprecated */
get yellow200() {
return colors.yellow200;
},
/** @deprecated */
get yellow100() {
return colors.yellow100;
},

/** @deprecated */
get green400() {
return colors.green500;
Expand Down
8 changes: 4 additions & 4 deletions static/app/views/dashboards/widgets/bigNumberWidget/thresholdsIndicator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ export function ThresholdsIndicator({

return (
<ThresholdsHoverWrapper thresholds={thresholdsConfig} type={type}>
<Circle role="status" aria-label={state} color={theme[colorName]} />
<Circle role="status" aria-label={state} color={theme.colors[colorName]} />
</ThresholdsHoverWrapper>
);
}
Expand All @@ -79,9 +79,9 @@ const Circle = styled('div')<{color: string}>`
type ThresholdState = 'poor' | 'meh' | 'good';

const COLOR_NAME_FOR_STATE = {
poor: 'red300',
meh: 'yellow300',
good: 'green300',
poor: 'red400',
meh: 'yellow400',
good: 'green400',
} as const satisfies Record<ThresholdState, string>;

function getThresholdState(
Expand Down
Loading