Skip to content

Commit e070a55

Browse files
aslilacaslilac
authored
refactor: stabilize theme.roles (#11969)
1 parent 6c9f60a commit e070a55

File tree

47 files changed

+689
-672
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+689
-672
lines changed

‎site/src/components/ActiveUserChart/ActiveUserChart.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -127,9 +127,9 @@ export const ActiveUserChart: FC<ActiveUserChartProps> = ({
127127
{
128128
label: `${interval === "day" ? "Daily" : "Weekly"} Active Users`,
129129
data: chartData,
130-
pointBackgroundColor: theme.experimental.roles.active.outline,
131-
pointBorderColor: theme.experimental.roles.active.outline,
132-
borderColor: theme.experimental.roles.active.outline,
130+
pointBackgroundColor: theme.roles.active.outline,
131+
pointBorderColor: theme.roles.active.outline,
132+
borderColor: theme.roles.active.outline,
133133
},
134134
],
135135
}}

‎site/src/components/Badges/Badges.tsx

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -19,19 +19,19 @@ const styles = {
1919
},
2020

2121
enabledBadge: (theme) => ({
22-
border: `1px solid ${theme.experimental.roles.success.outline}`,
23-
backgroundColor: theme.experimental.roles.success.background,
24-
color: theme.experimental.roles.success.text,
22+
border: `1px solid ${theme.roles.success.outline}`,
23+
backgroundColor: theme.roles.success.background,
24+
color: theme.roles.success.text,
2525
}),
2626
errorBadge: (theme) => ({
27-
border: `1px solid ${theme.experimental.roles.error.outline}`,
28-
backgroundColor: theme.experimental.roles.error.background,
29-
color: theme.experimental.roles.error.text,
27+
border: `1px solid ${theme.roles.error.outline}`,
28+
backgroundColor: theme.roles.error.background,
29+
color: theme.roles.error.text,
3030
}),
3131
warnBadge: (theme) => ({
32-
border: `1px solid ${theme.experimental.roles.warning.outline}`,
33-
backgroundColor: theme.experimental.roles.warning.background,
34-
color: theme.experimental.roles.warning.text,
32+
border: `1px solid ${theme.roles.warning.outline}`,
33+
backgroundColor: theme.roles.warning.background,
34+
color: theme.roles.warning.text,
3535
}),
3636
} satisfies Record<string, Interpolation<Theme>>;
3737

@@ -97,9 +97,9 @@ export const EnterpriseBadge: FC = () => {
9797
css={[
9898
styles.badge,
9999
(theme) => ({
100-
backgroundColor: theme.experimental.roles.info.background,
101-
border: `1px solid ${theme.experimental.roles.info.outline}`,
102-
color: theme.experimental.roles.info.text,
100+
backgroundColor: theme.roles.info.background,
101+
border: `1px solid ${theme.roles.info.outline}`,
102+
color: theme.roles.info.text,
103103
}),
104104
]}
105105
>
@@ -114,9 +114,9 @@ export const PreviewBadge: FC = () => {
114114
css={[
115115
styles.badge,
116116
(theme) => ({
117-
border: `1px solid ${theme.experimental.roles.preview.outline}`,
118-
backgroundColor: theme.experimental.roles.preview.background,
119-
color: theme.experimental.roles.preview.text,
117+
border: `1px solid ${theme.roles.preview.outline}`,
118+
backgroundColor: theme.roles.preview.background,
119+
color: theme.roles.preview.text,
120120
}),
121121
]}
122122
>
@@ -131,9 +131,9 @@ export const AlphaBadge: FC = () => {
131131
css={[
132132
styles.badge,
133133
(theme) => ({
134-
border: `1px solid ${theme.experimental.roles.preview.outline}`,
135-
backgroundColor: theme.experimental.roles.preview.background,
136-
color: theme.experimental.roles.preview.text,
134+
border: `1px solid ${theme.roles.preview.outline}`,
135+
backgroundColor: theme.roles.preview.background,
136+
color: theme.roles.preview.text,
137137
}),
138138
]}
139139
>
@@ -148,9 +148,9 @@ export const DeprecatedBadge: FC = () => {
148148
css={[
149149
styles.badge,
150150
(theme) => ({
151-
border: `1px solid ${theme.experimental.roles.danger.outline}`,
152-
backgroundColor: theme.experimental.roles.danger.background,
153-
color: theme.experimental.roles.danger.text,
151+
border: `1px solid ${theme.roles.danger.outline}`,
152+
backgroundColor: theme.roles.danger.background,
153+
color: theme.roles.danger.text,
154154
}),
155155
]}
156156
>

‎site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -108,10 +108,10 @@ export const DeleteDialog: FC<DeleteDialogProps> = ({
108108

109109
const styles = {
110110
callout: (theme) => ({
111-
backgroundColor: theme.experimental.roles.danger.background,
112-
border: `1px solid ${theme.experimental.roles.danger.outline}`,
111+
backgroundColor: theme.roles.danger.background,
112+
border: `1px solid ${theme.roles.danger.outline}`,
113113
borderRadius: theme.shape.borderRadius,
114-
color: theme.experimental.roles.danger.text,
114+
color: theme.roles.danger.text,
115115
padding: "8px 16px",
116116
}),
117117
} satisfies Record<string, Interpolation<Theme>>;

‎site/src/components/Dialogs/Dialog.tsx

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -72,24 +72,24 @@ export const DialogActionButtons: FC<DialogActionButtonsProps> = ({
7272
const styles = {
7373
dangerButton: (theme) => ({
7474
"&.MuiButton-contained": {
75-
backgroundColor: theme.experimental.roles.danger.fill.solid,
76-
borderColor: theme.experimental.roles.danger.fill.outline,
75+
backgroundColor: theme.roles.danger.fill.solid,
76+
borderColor: theme.roles.danger.fill.outline,
7777

7878
"&:not(.MuiLoadingButton-loading)": {
79-
color: theme.experimental.roles.danger.fill.text,
79+
color: theme.roles.danger.fill.text,
8080
},
8181

8282
"&:hover:not(:disabled)": {
83-
backgroundColor: theme.experimental.roles.danger.hover.fill.solid,
84-
borderColor: theme.experimental.roles.danger.hover.fill.outline,
83+
backgroundColor: theme.roles.danger.hover.fill.solid,
84+
borderColor: theme.roles.danger.hover.fill.outline,
8585
},
8686

8787
"&.Mui-disabled": {
88-
backgroundColor: theme.experimental.roles.danger.disabled.background,
89-
borderColor: theme.experimental.roles.danger.disabled.outline,
88+
backgroundColor: theme.roles.danger.disabled.background,
89+
borderColor: theme.roles.danger.disabled.outline,
9090

9191
"&:not(.MuiLoadingButton-loading)": {
92-
color: theme.experimental.roles.danger.disabled.fill.text,
92+
color: theme.roles.danger.disabled.fill.text,
9393
},
9494
},
9595
},

‎site/src/components/HelpTooltip/HelpTooltip.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -207,7 +207,7 @@ const styles = {
207207
display: "flex",
208208
alignItems: "center",
209209
...(theme.typography.body2 as CSSObject),
210-
color: theme.experimental.roles.active.fill.outline,
210+
color: theme.roles.active.fill.outline,
211211
}),
212212

213213
linkIcon: {

‎site/src/components/InfoTooltip/InfoTooltip.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
HelpTooltipTrigger,
99
} from "components/HelpTooltip/HelpTooltip";
1010
import { css, type Interpolation, type Theme, useTheme } from "@emotion/react";
11-
import type { ThemeRole } from "theme/experimental";
11+
import type { ThemeRole } from "theme/roles";
1212

1313
interface InfoTooltipProps {
1414
type?: ThemeRole;
@@ -22,7 +22,7 @@ export const InfoTooltip: FC<InfoTooltipProps> = ({
2222
type = "info",
2323
}) => {
2424
const theme = useTheme();
25-
const iconColor = theme.experimental.roles[type].outline;
25+
const iconColor = theme.roles[type].outline;
2626

2727
return (
2828
<HelpTooltip>

‎site/src/components/LastSeen/LastSeen.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,13 +23,13 @@ export const LastSeen: FC<LastSeenProps> = ({ at, ...attrs }) => {
2323
// Since the agent reports on a 10m interval,
2424
// the last_used_at can be inaccurate when recent.
2525
message = "Now";
26-
color = theme.experimental.roles.success.fill.solid;
26+
color = theme.roles.success.fill.solid;
2727
} else if (t.isAfter(now.subtract(3, "day"))) {
2828
color = theme.experimental.l2.text;
2929
} else if (t.isAfter(now.subtract(1, "month"))) {
30-
color = theme.experimental.roles.warning.fill.solid;
30+
color = theme.roles.warning.fill.solid;
3131
} else if (t.isAfter(now.subtract(100, "year"))) {
32-
color = theme.experimental.roles.error.fill.solid;
32+
color = theme.roles.error.fill.solid;
3333
} else {
3434
message = "Never";
3535
}

‎site/src/components/PaginationWidget/PageButtons.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -74,14 +74,14 @@ const BasePageButton: FC<BasePageButtonProps> = ({
7474
<Button
7575
css={
7676
highlighted && {
77-
borderColor: theme.experimental.roles.active.outline,
78-
backgroundColor: theme.experimental.roles.active.background,
77+
borderColor: theme.roles.active.outline,
78+
backgroundColor: theme.roles.active.background,
7979

8080
// Override the hover state with active colors, but not hover
8181
// colors because clicking won't do anything.
8282
"&:hover": {
83-
borderColor: theme.experimental.roles.active.outline,
84-
backgroundColor: theme.experimental.roles.active.background,
83+
borderColor: theme.roles.active.outline,
84+
backgroundColor: theme.roles.active.background,
8585
},
8686
}
8787
}

‎site/src/components/Paywall/Paywall.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -81,8 +81,8 @@ const styles = {
8181
maxWidth: 920,
8282
margin: "auto",
8383
padding: 24,
84-
backgroundImage: `linear-gradient(160deg, transparent, ${theme.experimental.roles.active.background})`,
85-
border: `1px solid ${theme.experimental.roles.active.fill.outline}`,
84+
backgroundImage: `linear-gradient(160deg, transparent, ${theme.roles.active.background})`,
85+
border: `1px solid ${theme.roles.active.fill.outline}`,
8686
borderRadius: 8,
8787
gap: 32,
8888
}),
@@ -115,7 +115,7 @@ const styles = {
115115
fontWeight: 500,
116116
},
117117
featureIcon: (theme) => ({
118-
color: theme.experimental.roles.active.fill.outline,
118+
color: theme.roles.active.fill.outline,
119119
}),
120120
feature: {
121121
display: "flex",

‎site/src/components/Pill/Pill.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,15 @@ import {
99
type ReactNode,
1010
useMemo,
1111
} from "react";
12-
import type { ThemeRole } from "theme/experimental";
12+
import type { ThemeRole } from "theme/roles";
1313

1414
export type PillProps = HTMLAttributes<HTMLDivElement> & {
1515
icon?: ReactNode;
1616
type?: ThemeRole;
1717
};
1818

1919
const themeStyles = (type: ThemeRole) => (theme: Theme) => {
20-
const palette = theme.experimental.roles[type];
20+
const palette = theme.roles[type];
2121
return {
2222
backgroundColor: palette.background,
2323
borderColor: palette.outline,

‎site/src/modules/dashboard/DeploymentBanner/DeploymentBannerView.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -379,7 +379,7 @@ const HealthIssue: FC<PropsWithChildren> = ({ children }) => {
379379
<Stack direction="row" spacing={1} alignItems="center">
380380
<ErrorIcon
381381
css={{ width: 16, height: 16 }}
382-
htmlColor={theme.experimental.roles.error.outline}
382+
htmlColor={theme.roles.error.outline}
383383
/>
384384
{children}
385385
</Stack>

‎site/src/modules/dashboard/LicenseBanner/LicenseBannerView.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,10 +47,10 @@ export const LicenseBannerView: FC<LicenseBannerViewProps> = ({
4747
display: flex;
4848
align-items: center;
4949
padding: 12px;
50-
background-color: ${theme.experimental.roles[type].background};
50+
background-color: ${theme.roles[type].background};
5151
`;
5252

53-
const textColor = theme.experimental.roles[type].text;
53+
const textColor = theme.roles[type].text;
5454

5555
if (messages.length === 1) {
5656
return (

‎site/src/modules/resources/AgentMetadata.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -248,7 +248,7 @@ const styles = {
248248
},
249249

250250
metadataValueSuccess: (theme) => ({
251-
color: theme.experimental.roles.success.fill.outline,
251+
color: theme.roles.success.fill.outline,
252252
}),
253253

254254
metadataValueError: (theme) => ({

‎site/src/modules/resources/XRayScanAlert.tsx

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,14 @@
1-
import { Interpolation, Theme } from "@emotion/react";
21
import Button from "@mui/material/Button";
3-
import { JFrogXrayScan } from "api/typesGenerated";
2+
import { type Interpolation, type Theme } from "@emotion/react";
3+
import { type FC } from "react";
4+
import type { JFrogXrayScan } from "api/typesGenerated";
45
import { ExternalImage } from "components/ExternalImage/ExternalImage";
5-
import { FC } from "react";
66

7-
export const XRayScanAlert: FC<{ scan: JFrogXrayScan }> = ({ scan }) => {
7+
interface XRayScanAlertProps {
8+
scan: JFrogXrayScan;
9+
}
10+
11+
export const XRayScanAlert: FC<XRayScanAlertProps> = ({ scan }) => {
812
return (
913
<div role="alert" css={styles.root}>
1014
<ExternalImage
@@ -91,13 +95,13 @@ const styles = {
9195
},
9296
},
9397
critical: (theme) => ({
94-
color: theme.experimental.roles.error.fill.solid,
98+
color: theme.roles.error.fill.solid,
9599
}),
96100
high: (theme) => ({
97-
color: theme.experimental.roles.warning.fill.solid,
101+
color: theme.roles.warning.fill.solid,
98102
}),
99103
medium: (theme) => ({
100-
color: theme.experimental.roles.notice.fill.solid,
104+
color: theme.roles.notice.fill.solid,
101105
}),
102106
link: {
103107
marginLeft: "auto",

‎site/src/modules/templates/TemplateExampleCard/TemplateExampleCard.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -110,8 +110,8 @@ const styles = {
110110
}),
111111

112112
activeTag: (theme) => ({
113-
borderColor: theme.experimental.roles.active.outline,
114-
backgroundColor: theme.experimental.roles.active.background,
113+
borderColor: theme.roles.active.outline,
114+
backgroundColor: theme.roles.active.background,
115115
}),
116116

117117
description: (theme) => ({

‎site/src/modules/workspaces/WorkspaceBuildLogs/Logs.tsx

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -130,29 +130,29 @@ const styles = {
130130
padding: "0 32px",
131131

132132
"&.error": {
133-
backgroundColor: theme.experimental.roles.error.background,
134-
color: theme.experimental.roles.error.text,
133+
backgroundColor: theme.roles.error.background,
134+
color: theme.roles.error.text,
135135

136136
"& .dashed-line": {
137-
backgroundColor: theme.experimental.roles.error.outline,
137+
backgroundColor: theme.roles.error.outline,
138138
},
139139
},
140140

141141
"&.debug": {
142-
backgroundColor: theme.experimental.roles.info.background,
143-
color: theme.experimental.roles.info.text,
142+
backgroundColor: theme.roles.info.background,
143+
color: theme.roles.info.text,
144144

145145
"& .dashed-line": {
146-
backgroundColor: theme.experimental.roles.info.outline,
146+
backgroundColor: theme.roles.info.outline,
147147
},
148148
},
149149

150150
"&.warn": {
151-
backgroundColor: theme.experimental.roles.warning.background,
152-
color: theme.experimental.roles.warning.text,
151+
backgroundColor: theme.roles.warning.background,
152+
color: theme.roles.warning.text,
153153

154154
"& .dashed-line": {
155-
backgroundColor: theme.experimental.roles.warning.outline,
155+
backgroundColor: theme.roles.warning.outline,
156156
},
157157
},
158158
}),

‎site/src/modules/workspaces/WorkspaceOutdatedTooltip/WorkspaceOutdatedTooltip.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,7 @@ export const WorkspaceOutdatedTooltipContent: FC<TooltipProps> = ({
114114

115115
const styles = {
116116
icon: (theme) => ({
117-
color: theme.experimental.roles.notice.outline,
117+
color: theme.roles.notice.outline,
118118
}),
119119

120120
container: {

‎site/src/modules/workspaces/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -161,7 +161,7 @@ export const WorkspaceStatusText: FC<WorkspaceStatusBadgeProps> = ({
161161
css={(theme) => ({
162162
fontWeight: 600,
163163
color: type
164-
? theme.experimental.roles[type].fill.solid
164+
? theme.roles[type].fill.solid
165165
: theme.experimental.l1.text,
166166
})}
167167
>

‎site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import TableCell from "@mui/material/TableCell";
44
import { type FC, useState } from "react";
55
import userAgentParser from "ua-parser-js";
66
import type { AuditLog } from "api/typesGenerated";
7-
import { type ThemeRole } from "theme/experimental";
7+
import { type ThemeRole } from "theme/roles";
88
import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
99
import { Pill } from "components/Pill/Pill";
1010
import { Stack } from "components/Stack/Stack";

‎site/src/pages/CreateWorkspacePage/ExternalAuthBanner/ExternalAuthItem.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,7 @@ const styles = {
118118
}),
119119

120120
providerConnectedLabelIcon: (theme) => ({
121-
color: theme.experimental.roles.success.fill.solid,
121+
color: theme.roles.success.fill.solid,
122122
fontSize: 16,
123123
}),
124124
} as Record<string, Interpolation<Theme>>;

0 commit comments

Comments
 (0)