opensource/coder
3
0
Fork 0
mirror of https://github.com/coder/coder.git synced 2026-09-24 15:04:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: add more fill variants to the experimental theme (#11827)

Browse Source
This commit is contained in:
Kayla Washburn-Love
2024-01-26 10:28:59 -07:00
committed by GitHub
parent 42e997d39e
commit c85fc3c8fe
18 changed files with 335 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/components/Dialogs/Dialog.tsx
+6 -6
View File
@@ -72,16 +72,16 @@ export const DialogActionButtons: FC<DialogActionButtonsProps> = ({
const styles = {
dangerButton: (theme) => ({
"&.MuiButton-contained": {
backgroundColor: theme.experimental.roles.danger.fill,
borderColor: theme.experimental.roles.danger.outline,
backgroundColor: theme.experimental.roles.danger.fill.solid,
borderColor: theme.experimental.roles.danger.fill.outline,
"&:not(.MuiLoadingButton-loading)": {
color: theme.experimental.roles.danger.text,
color: theme.experimental.roles.danger.fill.text,
},
"&:hover:not(:disabled)": {
backgroundColor: theme.experimental.roles.danger.hover.fill,
borderColor: theme.experimental.roles.danger.hover.outline,
backgroundColor: theme.experimental.roles.danger.hover.fill.solid,
borderColor: theme.experimental.roles.danger.hover.fill.outline,
},
"&.Mui-disabled": {
@@ -89,7 +89,7 @@ const styles = {
borderColor: theme.experimental.roles.danger.disabled.outline,
"&:not(.MuiLoadingButton-loading)": {
color: theme.experimental.roles.danger.disabled.text,
color: theme.experimental.roles.danger.disabled.fill.text,
},
},
},
site/src/components/HelpTooltip/HelpTooltip.tsx
+1 -1
View File
@@ -206,7 +206,7 @@ const styles = {
display: "flex",
alignItems: "center",
...(theme.typography.body2 as CSSObject),
color: theme.experimental.roles.active.fill,
color: theme.experimental.roles.active.fill.outline,
}),
linkIcon: {
site/src/components/LastSeen/LastSeen.tsx
+3 -3
View File
@@ -23,13 +23,13 @@ export const LastSeen: FC<LastSeenProps> = ({ at, ...attrs }) => {
// Since the agent reports on a 10m interval,
// the last_used_at can be inaccurate when recent.
message = "Now";
color = theme.experimental.roles.success.fill;
color = theme.experimental.roles.success.fill.solid;
} else if (t.isAfter(now.subtract(3, "day"))) {
color = theme.experimental.l2.text;
} else if (t.isAfter(now.subtract(1, "month"))) {
color = theme.experimental.roles.warning.fill;
color = theme.experimental.roles.warning.fill.solid;
} else if (t.isAfter(now.subtract(100, "year"))) {
color = theme.experimental.roles.error.fill;
color = theme.experimental.roles.error.fill.solid;
} else {
message = "Never";
}
site/src/components/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx
+1 -1
View File
@@ -161,7 +161,7 @@ export const WorkspaceStatusText: FC<WorkspaceStatusBadgeProps> = ({
css={(theme) => ({
fontWeight: 600,
color: type
? theme.experimental.roles[type].fill
? theme.experimental.roles[type].fill.solid
: theme.experimental.l1.text,
})}
>
site/src/modules/dashboard/Navbar/UserDropdown/UserDropdown.tsx
+1 -1
View File
@@ -45,7 +45,7 @@ export const UserDropdown: FC<UserDropdownProps> = ({
/>
</Badge>
<DropdownArrow
color={theme.experimental.l2.fill}
color={theme.experimental.l2.fill.solid}
close={popover.isOpen}
/>
</div>
site/src/pages/CreateWorkspacePage/ExternalAuthBanner/ExternalAuthItem.tsx
+1 -1
View File
@@ -118,7 +118,7 @@ const styles = {
}),
providerConnectedLabelIcon: (theme) => ({
color: theme.experimental.roles.success.fill,
color: theme.experimental.roles.success.fill.solid,
fontSize: 16,
}),
} as Record<string, Interpolation<Theme>>;
site/src/pages/DeploySettingsPage/Option.tsx
+28 -32
View File
@@ -1,6 +1,6 @@
import CheckCircleOutlined from "@mui/icons-material/CheckCircleOutlined";
import { css, useTheme } from "@emotion/react";
import { type HTMLAttributes, type PropsWithChildren, type FC } from "react";
import { css, type Interpolation, type Theme, useTheme } from "@emotion/react";
import { type FC, type HTMLAttributes, type PropsWithChildren } from "react";
import { MONOSPACE_FONT_FAMILY } from "theme/constants";
import { DisabledBadge, EnabledBadge } from "components/Badges/Badges";
@@ -107,42 +107,16 @@ export const OptionValue: FC<OptionValueProps> = (props) => {
type OptionConfigProps = HTMLAttributes<HTMLDivElement> & { isSource: boolean };
// OptionConfig takes a isSource bool to indicate if the Option is the source of the configured value.
export const OptionConfig = ({ isSource, ...attrs }: OptionConfigProps) => {
const theme = useTheme();
const borderColor = isSource
? theme.experimental.roles.active.outline
: theme.palette.divider;
export const OptionConfig: FC<OptionConfigProps> = ({ isSource, ...attrs }) => {
return (
<div
{...attrs}
css={[
{
fontSize: 13,
fontFamily: MONOSPACE_FONT_FAMILY,
fontWeight: 600,
backgroundColor: theme.palette.background.paper,
display: "inline-flex",
alignItems: "center",
borderRadius: 4,
padding: 6,
lineHeight: 1,
gap: 6,
border: `1px solid ${borderColor}`,
},
isSource
? {
"& .OptionConfigFlag": {
background: theme.experimental.roles.active.fill,
},
}
: undefined,
]}
css={[styles.configOption, isSource && styles.sourceConfigOption]}
/>
);
};
export const OptionConfigFlag = (props: HTMLAttributes<HTMLDivElement>) => {
export const OptionConfigFlag: FC<HTMLAttributes<HTMLDivElement>> = (props) => {
const theme = useTheme();
return (
@@ -163,6 +137,28 @@ export const OptionConfigFlag = (props: HTMLAttributes<HTMLDivElement>) => {
};
const styles = {
configOption: (theme) => ({
fontSize: 13,
fontFamily: MONOSPACE_FONT_FAMILY,
fontWeight: 600,
backgroundColor: theme.palette.background.paper,
display: "inline-flex",
alignItems: "center",
borderRadius: 4,
padding: 6,
lineHeight: 1,
gap: 6,
border: `1px solid ${theme.palette.divider}`,
}),
sourceConfigOption: (theme) => ({
border: `1px solid ${theme.experimental.roles.active.fill.outline}`,
"& .OptionConfigFlag": {
background: theme.experimental.roles.active.fill.solid,
},
}),
option: css`
font-size: 14px;
font-family: ${MONOSPACE_FONT_FAMILY};
@@ -173,4 +169,4 @@ const styles = {
padding: 16px;
}
`,
};
} satisfies Record<string, Interpolation<Theme>>;
site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx
+2 -2
View File
@@ -421,8 +421,8 @@ const TemplateUsagePanel: FC<TemplateUsagePanelProps> = ({
validUsage?.reduce((total, usage) => total + usage.seconds, 0) ?? 1;
const usageColors = chroma
.scale([
theme.experimental.roles.success.fill,
theme.experimental.roles.notice.fill,
theme.experimental.roles.success.fill.solid,
theme.experimental.roles.notice.fill.solid,
])
.mode("lch")
.colors(validUsage?.length ?? 0);
site/src/pages/UsersPage/UsersFilter.tsx
+1 -1
View File
@@ -129,7 +129,7 @@ const StatusIndicator: FC<StatusIndicatorProps> = ({ option }) => {
height: 8,
width: 8,
borderRadius: 4,
backgroundColor: theme.experimental.roles[option.color].fill,
backgroundColor: theme.experimental.roles[option.color].fill.solid,
}}
/>
);
site/src/pages/WorkspacePage/WorkspaceDeleteDialog/WorkspaceDeleteDialog.tsx
+2 -2
View File
@@ -182,9 +182,9 @@ const styles = {
lineHeight: "18px",
"& .option": {
color: theme.experimental.roles.danger.fill,
color: theme.experimental.roles.danger.fill.solid,
"&.Mui-checked": {
color: theme.experimental.roles.danger.fill,
color: theme.experimental.roles.danger.fill.solid,
},
},
site/src/pages/WorkspacesPage/BatchUpdateConfirmation.tsx
+1 -1
View File
@@ -477,7 +477,7 @@ const styles = {
newVersion: (theme) => ({
fontSize: 13,
fontWeight: 500,
color: theme.experimental.roles.active.fill,
color: theme.experimental.roles.active.fill.solid,
}),
message: {
site/src/pages/WorkspacesPage/LastUsed.tsx
+3 -3
View File
@@ -40,16 +40,16 @@ export const LastUsed: FC<LastUsedProps> = ({ lastUsedAt }) => {
);
if (t.isAfter(now.subtract(1, "hour"))) {
circle = <Circle color={theme.experimental.roles.success.fill} />;
circle = <Circle color={theme.experimental.roles.success.fill.solid} />;
// Since the agent reports on a 10m interval,
// the last_used_at can be inaccurate when recent.
message = "Now";
} else if (t.isAfter(now.subtract(3, "day"))) {
circle = <Circle color={theme.palette.text.secondary} />;
} else if (t.isAfter(now.subtract(1, "month"))) {
circle = <Circle color={theme.palette.warning.light} />;
circle = <Circle color={theme.experimental.roles.warning.fill.solid} />;
} else if (t.isAfter(now.subtract(100, "year"))) {
circle = <Circle color={theme.experimental.roles.error.fill} />;
circle = <Circle color={theme.experimental.roles.error.fill.solid} />;
} else {
message = "Never";
}
site/src/pages/WorkspacesPage/filter/filter.tsx
+1 -1
View File
@@ -215,7 +215,7 @@ const StatusIndicator: FC<StatusIndicatorProps> = ({ option }) => {
height: 8,
width: 8,
borderRadius: 4,
backgroundColor: theme.experimental.roles[option.color].fill,
backgroundColor: theme.experimental.roles[option.color].fill.solid,
}}
/>
);
site/src/theme/dark/experimental.ts
+90 -18
View File
@@ -5,26 +5,42 @@ export default {
l1: {
background: colors.zinc[950],
outline: colors.zinc[700],
fill: colors.zinc[600],
text: colors.white,
fill: {
solid: colors.zinc[600],
outline: colors.zinc[600],
text: colors.white,
},
},
l2: {
background: colors.zinc[900],
outline: colors.zinc[700],
fill: colors.zinc[500],
text: colors.zinc[50],
fill: {
solid: colors.zinc[500],
outline: colors.zinc[500],
text: colors.white,
},
disabled: {
background: colors.gray[900],
outline: colors.zinc[700],
fill: colors.zinc[500],
text: colors.zinc[200],
fill: {
solid: colors.zinc[500],
outline: colors.zinc[500],
text: colors.white,
},
},
hover: {
background: colors.zinc[800],
outline: colors.zinc[600],
fill: colors.zinc[400],
text: colors.white,
fill: {
solid: colors.zinc[400],
outline: colors.zinc[400],
text: colors.white,
},
},
},
@@ -32,86 +48,142 @@ export default {
danger: {
background: colors.orange[950],
outline: colors.orange[500],
fill: colors.orange[700],
text: colors.orange[50],
fill: {
solid: colors.orange[700],
outline: colors.orange[700],
text: colors.white,
},
disabled: {
background: colors.orange[950],
outline: colors.orange[800],
fill: colors.orange[800],
text: colors.orange[200],
fill: {
solid: colors.orange[800],
outline: colors.orange[800],
text: colors.white,
},
},
hover: {
background: colors.orange[900],
outline: colors.orange[500],
fill: colors.orange[500],
text: colors.white,
fill: {
solid: colors.orange[500],
outline: colors.orange[500],
text: colors.white,
},
},
},
error: {
background: colors.red[950],
outline: colors.red[600],
fill: colors.red[400],
text: colors.red[50],
fill: {
solid: colors.red[400],
outline: colors.red[400],
text: colors.white,
},
},
warning: {
background: colors.amber[950],
outline: colors.amber[300],
fill: colors.amber[500],
text: colors.amber[50],
fill: {
solid: colors.amber[500],
outline: colors.amber[500],
text: colors.white,
},
},
notice: {
background: colors.yellow[950],
outline: colors.yellow[200],
fill: colors.yellow[500],
text: colors.yellow[50],
fill: {
solid: colors.yellow[500],
outline: colors.yellow[500],
text: colors.white,
},
},
info: {
background: colors.blue[950],
outline: colors.blue[400],
fill: colors.blue[600],
text: colors.blue[50],
fill: {
solid: colors.blue[600],
outline: colors.blue[600],
text: colors.white,
},
},
success: {
background: colors.green[950],
outline: colors.green[500],
fill: colors.green[600],
text: colors.green[50],
fill: {
solid: colors.green[600],
outline: colors.green[600],
text: colors.white,
},
disabled: {
background: colors.green[950],
outline: colors.green[800],
fill: colors.green[800],
text: colors.green[200],
fill: {
solid: colors.green[800],
outline: colors.green[800],
text: colors.white,
},
},
hover: {
background: colors.green[900],
outline: colors.green[500],
fill: colors.green[500],
text: colors.white,
fill: {
solid: colors.green[500],
outline: colors.green[500],
text: colors.white,
},
},
},
active: {
background: colors.sky[950],
outline: colors.sky[500],
fill: colors.sky[600],
text: colors.sky[50],
fill: {
solid: colors.sky[600],
outline: colors.sky[600],
text: colors.white,
},
disabled: {
background: colors.sky[950],
outline: colors.sky[800],
fill: colors.sky[800],
text: colors.sky[200],
fill: {
solid: colors.sky[800],
outline: colors.sky[800],
text: colors.white,
},
},
hover: {
background: colors.sky[900],
outline: colors.sky[500],
fill: colors.sky[500],
text: colors.white,
fill: {
solid: colors.sky[500],
outline: colors.sky[500],
text: colors.white,
},
},
},
preview: {
background: colors.violet[950],
outline: colors.violet[500],
fill: colors.violet[400],
text: colors.violet[50],
fill: {
solid: colors.violet[400],
outline: colors.violet[400],
text: colors.white,
},
},
},
} satisfies NewTheme;
site/src/theme/darkBlue/experimental.ts
+90 -18
View File
@@ -5,26 +5,42 @@ export default {
l1: {
background: colors.gray[950],
outline: colors.gray[700],
fill: colors.gray[600],
text: colors.white,
fill: {
solid: colors.gray[600],
outline: colors.gray[600],
text: colors.white,
},
},
l2: {
background: colors.gray[900],
outline: colors.gray[700],
fill: colors.gray[500],
text: colors.gray[50],
fill: {
solid: colors.gray[500],
outline: colors.gray[500],
text: colors.white,
},
disabled: {
background: colors.gray[900],
outline: colors.zinc[700],
fill: colors.gray[500],
text: colors.gray[200],
fill: {
solid: colors.gray[500],
outline: colors.gray[500],
text: colors.white,
},
},
hover: {
background: colors.gray[800],
outline: colors.gray[600],
fill: colors.zinc[400],
text: colors.white,
fill: {
solid: colors.zinc[400],
outline: colors.zinc[400],
text: colors.white,
},
},
},
@@ -32,86 +48,142 @@ export default {
danger: {
background: colors.orange[950],
outline: colors.orange[600],
fill: colors.orange[600],
text: colors.orange[50],
fill: {
solid: colors.orange[600],
outline: colors.orange[600],
text: colors.white,
},
disabled: {
background: colors.orange[950],
outline: colors.orange[800],
fill: colors.orange[800],
text: colors.orange[200],
fill: {
solid: colors.orange[800],
outline: colors.orange[800],
text: colors.white,
},
},
hover: {
background: colors.orange[900],
outline: colors.orange[500],
fill: colors.orange[500],
text: colors.white,
fill: {
solid: colors.orange[500],
outline: colors.orange[500],
text: colors.white,
},
},
},
error: {
background: colors.red[950],
outline: colors.red[500],
fill: colors.red[600],
text: colors.red[50],
fill: {
solid: colors.red[600],
outline: colors.red[600],
text: colors.white,
},
},
warning: {
background: colors.amber[950],
outline: colors.amber[300],
fill: colors.amber[500],
text: colors.amber[50],
fill: {
solid: colors.amber[500],
outline: colors.amber[500],
text: colors.white,
},
},
notice: {
background: colors.yellow[950],
outline: colors.yellow[200],
fill: colors.yellow[500],
text: colors.yellow[50],
fill: {
solid: colors.yellow[500],
outline: colors.yellow[500],
text: colors.white,
},
},
info: {
background: colors.blue[950],
outline: colors.blue[400],
fill: colors.blue[500],
text: colors.blue[50],
fill: {
solid: colors.blue[500],
outline: colors.blue[500],
text: colors.white,
},
},
success: {
background: colors.green[950],
outline: colors.green[500],
fill: colors.green[600],
text: colors.green[50],
fill: {
solid: colors.green[600],
outline: colors.green[600],
text: colors.white,
},
disabled: {
background: colors.green[950],
outline: colors.green[800],
fill: colors.green[800],
text: colors.green[200],
fill: {
solid: colors.green[800],
outline: colors.green[800],
text: colors.white,
},
},
hover: {
background: colors.green[900],
outline: colors.green[500],
fill: colors.green[500],
text: colors.white,
fill: {
solid: colors.green[500],
outline: colors.green[500],
text: colors.white,
},
},
},
active: {
background: colors.sky[950],
outline: colors.sky[500],
fill: colors.sky[600],
text: colors.sky[50],
fill: {
solid: colors.sky[600],
outline: colors.sky[600],
text: colors.white,
},
disabled: {
background: colors.sky[950],
outline: colors.sky[800],
fill: colors.sky[800],
text: colors.sky[200],
fill: {
solid: colors.sky[800],
outline: colors.sky[800],
text: colors.white,
},
},
hover: {
background: colors.sky[900],
outline: colors.sky[500],
fill: colors.sky[500],
text: colors.white,
fill: {
solid: colors.sky[500],
outline: colors.sky[500],
text: colors.white,
},
},
},
preview: {
background: colors.violet[950],
outline: colors.violet[500],
fill: colors.violet[400],
text: colors.violet[50],
fill: {
solid: colors.violet[400],
outline: colors.violet[400],
text: colors.white,
},
},
},
} satisfies NewTheme;
site/src/theme/experimental.ts
+11 -4
View File
@@ -51,13 +51,20 @@ export interface Role {
/** A border, or a color for an outlined icon */
outline: string;
/** A color for icons, text on a neutral background, the background of a button which should stand out */
fill: string;
/** A color for text on the corresponding `background` */
text: string;
// contrastOutline?: string;
/** A set of more saturated colors to make things stand out */
fill: {
/** A saturated color for use as a background, or for text or icons on a neutral background */
solid: string;
/** A color for outlining an area using the solid background color, or for an outlined icon */
outline: string;
/** A color for text when using the `solid` background color */
text: string;
};
}
/** Provides additional colors which can indicate different states for interactive elements */
site/src/theme/light/experimental.ts
+90 -18
View File
@@ -5,26 +5,42 @@ export default {
l1: {
background: colors.gray[50],
outline: colors.gray[300],
fill: colors.gray[700],
text: colors.black,
fill: {
solid: colors.gray[700],
outline: colors.gray[700],
text: colors.white,
},
},
l2: {
background: colors.gray[100],
outline: colors.gray[500],
fill: colors.gray[500],
text: colors.gray[950],
fill: {
solid: colors.gray[500],
outline: colors.gray[500],
text: colors.white,
},
disabled: {
background: colors.gray[100],
outline: colors.gray[500],
fill: colors.gray[500],
text: colors.gray[800],
fill: {
solid: colors.gray[500],
outline: colors.gray[500],
text: colors.white,
},
},
hover: {
background: colors.gray[200],
outline: colors.gray[700],
fill: colors.zinc[600],
text: colors.black,
fill: {
solid: colors.zinc[600],
outline: colors.zinc[600],
text: colors.white,
},
},
},
@@ -32,86 +48,142 @@ export default {
danger: {
background: colors.orange[50],
outline: colors.orange[400],
fill: colors.orange[600],
text: colors.orange[950],
fill: {
solid: colors.orange[600],
outline: colors.orange[600],
text: colors.white,
},
disabled: {
background: colors.orange[50],
outline: colors.orange[800],
fill: colors.orange[800],
text: colors.orange[800],
fill: {
solid: colors.orange[800],
outline: colors.orange[800],
text: colors.white,
},
},
hover: {
background: colors.orange[100],
outline: colors.orange[500],
fill: colors.orange[500],
text: colors.black,
fill: {
solid: colors.orange[500],
outline: colors.orange[500],
text: colors.white,
},
},
},
error: {
background: colors.red[100],
outline: colors.red[500],
fill: colors.red[600],
text: colors.red[950],
fill: {
solid: colors.red[600],
outline: colors.red[600],
text: colors.white,
},
},
warning: {
background: colors.amber[50],
outline: colors.amber[300],
fill: colors.amber[500],
text: colors.amber[950],
fill: {
solid: colors.amber[500],
outline: colors.amber[500],
text: colors.white,
},
},
notice: {
background: colors.yellow[50],
outline: colors.yellow[600],
fill: colors.yellow[500],
text: colors.yellow[950],
fill: {
solid: colors.yellow[500],
outline: colors.yellow[500],
text: colors.white,
},
},
info: {
background: colors.blue[50],
outline: colors.blue[400],
fill: colors.blue[600],
text: colors.blue[950],
fill: {
solid: colors.blue[600],
outline: colors.blue[600],
text: colors.white,
},
},
success: {
background: colors.green[50],
outline: colors.green[500],
fill: colors.green[600],
text: colors.green[950],
fill: {
solid: colors.green[600],
outline: colors.green[600],
text: colors.white,
},
disabled: {
background: colors.green[50],
outline: colors.green[800],
fill: colors.green[800],
text: colors.green[800],
fill: {
solid: colors.green[800],
outline: colors.green[800],
text: colors.white,
},
},
hover: {
background: colors.green[100],
outline: colors.green[500],
fill: colors.green[500],
text: colors.black,
fill: {
solid: colors.green[500],
outline: colors.green[500],
text: colors.white,
},
},
},
active: {
background: colors.sky[100],
outline: colors.sky[500],
fill: colors.sky[600],
text: colors.sky[950],
fill: {
solid: colors.sky[600],
outline: colors.sky[600],
text: colors.white,
},
disabled: {
background: colors.sky[50],
outline: colors.sky[800],
fill: colors.sky[800],
text: colors.sky[200],
fill: {
solid: colors.sky[800],
outline: colors.sky[800],
text: colors.white,
},
},
hover: {
background: colors.sky[200],
outline: colors.sky[400],
fill: colors.sky[500],
text: colors.black,
fill: {
solid: colors.sky[500],
outline: colors.sky[500],
text: colors.white,
},
},
},
preview: {
background: colors.violet[50],
outline: colors.violet[500],
fill: colors.violet[600],
text: colors.violet[950],
fill: {
solid: colors.violet[600],
outline: colors.violet[600],
text: colors.white,
},
},
},
} satisfies NewTheme;
site/src/utils/latency.ts
+3 -3
View File
@@ -5,12 +5,12 @@ export const getLatencyColor = (theme: Theme, latency?: number) => {
return theme.palette.text.secondary;
}
let color = theme.experimental.roles.success.fill;
let color = theme.experimental.roles.success.fill.solid;
if (latency >= 150 && latency < 300) {
color = theme.experimental.roles.warning.fill;
color = theme.experimental.roles.warning.fill.solid;
} else if (latency >= 300) {
color = theme.experimental.roles.error.fill;
color = theme.experimental.roles.error.fill.solid;
}
return color;
};