Skip to content

Commit c85fc3c

Browse files
aslilacaslilac
authored
refactor: add more fill variants to the experimental theme (#11827)
1 parent 42e997d commit c85fc3c

File tree

18 files changed

+335
-116
lines changed

18 files changed

+335
-116
lines changed

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

+6-6
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,
76-
borderColor: theme.experimental.roles.danger.outline,
75+
backgroundColor: theme.experimental.roles.danger.fill.solid,
76+
borderColor: theme.experimental.roles.danger.fill.outline,
7777

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

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

8787
"&.Mui-disabled": {
8888
backgroundColor: theme.experimental.roles.danger.disabled.background,
8989
borderColor: theme.experimental.roles.danger.disabled.outline,
9090

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

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -206,7 +206,7 @@ const styles = {
206206
display: "flex",
207207
alignItems: "center",
208208
...(theme.typography.body2 as CSSObject),
209-
color: theme.experimental.roles.active.fill,
209+
color: theme.experimental.roles.active.fill.outline,
210210
}),
211211

212212
linkIcon: {

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

+3-3
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;
26+
color = theme.experimental.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;
30+
color = theme.experimental.roles.warning.fill.solid;
3131
} else if (t.isAfter(now.subtract(100, "year"))) {
32-
color = theme.experimental.roles.error.fill;
32+
color = theme.experimental.roles.error.fill.solid;
3333
} else {
3434
message = "Never";
3535
}

‎site/src/components/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx

+1-1
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
164+
? theme.experimental.roles[type].fill.solid
165165
: theme.experimental.l1.text,
166166
})}
167167
>

‎site/src/modules/dashboard/Navbar/UserDropdown/UserDropdown.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ export const UserDropdown: FC<UserDropdownProps> = ({
4545
/>
4646
</Badge>
4747
<DropdownArrow
48-
color={theme.experimental.l2.fill}
48+
color={theme.experimental.l2.fill.solid}
4949
close={popover.isOpen}
5050
/>
5151
</div>

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

+1-1
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,
121+
color: theme.experimental.roles.success.fill.solid,
122122
fontSize: 16,
123123
}),
124124
} as Record<string, Interpolation<Theme>>;

‎site/src/pages/DeploySettingsPage/Option.tsx

+28-32
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import CheckCircleOutlined from "@mui/icons-material/CheckCircleOutlined";
2-
import { css, useTheme } from "@emotion/react";
3-
import { type HTMLAttributes, type PropsWithChildren, type FC } from "react";
2+
import { css, type Interpolation, type Theme, useTheme } from "@emotion/react";
3+
import { type FC, type HTMLAttributes, type PropsWithChildren } from "react";
44
import { MONOSPACE_FONT_FAMILY } from "theme/constants";
55
import { DisabledBadge, EnabledBadge } from "components/Badges/Badges";
66

@@ -107,42 +107,16 @@ export const OptionValue: FC<OptionValueProps> = (props) => {
107107
type OptionConfigProps = HTMLAttributes<HTMLDivElement> & { isSource: boolean };
108108

109109
// OptionConfig takes a isSource bool to indicate if the Option is the source of the configured value.
110-
export const OptionConfig = ({ isSource, ...attrs }: OptionConfigProps) => {
111-
const theme = useTheme();
112-
const borderColor = isSource
113-
? theme.experimental.roles.active.outline
114-
: theme.palette.divider;
115-
110+
export const OptionConfig: FC<OptionConfigProps> = ({ isSource, ...attrs }) => {
116111
return (
117112
<div
118113
{...attrs}
119-
css={[
120-
{
121-
fontSize: 13,
122-
fontFamily: MONOSPACE_FONT_FAMILY,
123-
fontWeight: 600,
124-
backgroundColor: theme.palette.background.paper,
125-
display: "inline-flex",
126-
alignItems: "center",
127-
borderRadius: 4,
128-
padding: 6,
129-
lineHeight: 1,
130-
gap: 6,
131-
border: `1px solid ${borderColor}`,
132-
},
133-
isSource
134-
? {
135-
"& .OptionConfigFlag": {
136-
background: theme.experimental.roles.active.fill,
137-
},
138-
}
139-
: undefined,
140-
]}
114+
css={[styles.configOption, isSource && styles.sourceConfigOption]}
141115
/>
142116
);
143117
};
144118

145-
export const OptionConfigFlag = (props: HTMLAttributes<HTMLDivElement>) => {
119+
export const OptionConfigFlag: FC<HTMLAttributes<HTMLDivElement>> = (props) => {
146120
const theme = useTheme();
147121

148122
return (
@@ -163,6 +137,28 @@ export const OptionConfigFlag = (props: HTMLAttributes<HTMLDivElement>) => {
163137
};
164138

165139
const styles = {
140+
configOption: (theme) => ({
141+
fontSize: 13,
142+
fontFamily: MONOSPACE_FONT_FAMILY,
143+
fontWeight: 600,
144+
backgroundColor: theme.palette.background.paper,
145+
display: "inline-flex",
146+
alignItems: "center",
147+
borderRadius: 4,
148+
padding: 6,
149+
lineHeight: 1,
150+
gap: 6,
151+
border: `1px solid ${theme.palette.divider}`,
152+
}),
153+
154+
sourceConfigOption: (theme) => ({
155+
border: `1px solid ${theme.experimental.roles.active.fill.outline}`,
156+
157+
"& .OptionConfigFlag": {
158+
background: theme.experimental.roles.active.fill.solid,
159+
},
160+
}),
161+
166162
option: css`
167163
font-size: 14px;
168164
font-family: ${MONOSPACE_FONT_FAMILY};
@@ -173,4 +169,4 @@ const styles = {
173169
padding: 16px;
174170
}
175171
`,
176-
};
172+
} satisfies Record<string, Interpolation<Theme>>;

‎site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -421,8 +421,8 @@ const TemplateUsagePanel: FC<TemplateUsagePanelProps> = ({
421421
validUsage?.reduce((total, usage) => total + usage.seconds, 0) ?? 1;
422422
const usageColors = chroma
423423
.scale([
424-
theme.experimental.roles.success.fill,
425-
theme.experimental.roles.notice.fill,
424+
theme.experimental.roles.success.fill.solid,
425+
theme.experimental.roles.notice.fill.solid,
426426
])
427427
.mode("lch")
428428
.colors(validUsage?.length ?? 0);

‎site/src/pages/UsersPage/UsersFilter.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,7 @@ const StatusIndicator: FC<StatusIndicatorProps> = ({ option }) => {
129129
height: 8,
130130
width: 8,
131131
borderRadius: 4,
132-
backgroundColor: theme.experimental.roles[option.color].fill,
132+
backgroundColor: theme.experimental.roles[option.color].fill.solid,
133133
}}
134134
/>
135135
);

‎site/src/pages/WorkspacePage/WorkspaceDeleteDialog/WorkspaceDeleteDialog.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -182,9 +182,9 @@ const styles = {
182182
lineHeight: "18px",
183183

184184
"& .option": {
185-
color: theme.experimental.roles.danger.fill,
185+
color: theme.experimental.roles.danger.fill.solid,
186186
"&.Mui-checked": {
187-
color: theme.experimental.roles.danger.fill,
187+
color: theme.experimental.roles.danger.fill.solid,
188188
},
189189
},
190190

‎site/src/pages/WorkspacesPage/BatchUpdateConfirmation.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -477,7 +477,7 @@ const styles = {
477477
newVersion: (theme) => ({
478478
fontSize: 13,
479479
fontWeight: 500,
480-
color: theme.experimental.roles.active.fill,
480+
color: theme.experimental.roles.active.fill.solid,
481481
}),
482482

483483
message: {

‎site/src/pages/WorkspacesPage/LastUsed.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -40,16 +40,16 @@ export const LastUsed: FC<LastUsedProps> = ({ lastUsedAt }) => {
4040
);
4141

4242
if (t.isAfter(now.subtract(1, "hour"))) {
43-
circle = <Circle color={theme.experimental.roles.success.fill} />;
43+
circle = <Circle color={theme.experimental.roles.success.fill.solid} />;
4444
// Since the agent reports on a 10m interval,
4545
// the last_used_at can be inaccurate when recent.
4646
message = "Now";
4747
} else if (t.isAfter(now.subtract(3, "day"))) {
4848
circle = <Circle color={theme.palette.text.secondary} />;
4949
} else if (t.isAfter(now.subtract(1, "month"))) {
50-
circle = <Circle color={theme.palette.warning.light} />;
50+
circle = <Circle color={theme.experimental.roles.warning.fill.solid} />;
5151
} else if (t.isAfter(now.subtract(100, "year"))) {
52-
circle = <Circle color={theme.experimental.roles.error.fill} />;
52+
circle = <Circle color={theme.experimental.roles.error.fill.solid} />;
5353
} else {
5454
message = "Never";
5555
}

‎site/src/pages/WorkspacesPage/filter/filter.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -215,7 +215,7 @@ const StatusIndicator: FC<StatusIndicatorProps> = ({ option }) => {
215215
height: 8,
216216
width: 8,
217217
borderRadius: 4,
218-
backgroundColor: theme.experimental.roles[option.color].fill,
218+
backgroundColor: theme.experimental.roles[option.color].fill.solid,
219219
}}
220220
/>
221221
);

0 commit comments

Comments
 (0)