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,

0 commit comments

Comments
 (0)