Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 97f7a35

Browse files
aslilacaslilac
authored
feat: add light theme (coder#11266)
1 parent e0d34ca commit 97f7a35

File tree

101 files changed

+1947
-968
lines changed

Some content is hidden

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

101 files changed

+1947
-968
lines changed

‎.github/workflows/pr-deploy.yaml

+1
Original file line numberDiff line numberDiff line change
@@ -351,6 +351,7 @@ jobs:
351351
- name: Install/Upgrade Helm chart
352352
run: |
353353
set -euo pipefail
354+
helm dependency update --skip-refresh ./helm/coder
354355
helm upgrade --install "pr${{ env.PR_NUMBER }}" ./helm/coder \
355356
--namespace "pr${{ env.PR_NUMBER }}" \
356357
--values ./pr-deploy-values.yaml \

‎site/.storybook/main.js

+7-1
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,16 @@ import turbosnap from "vite-plugin-turbosnap";
33
module.exports = {
44
stories: ["../src/**/*.stories.tsx"],
55
addons: [
6+
{
7+
name: "@storybook/addon-essentials",
8+
options: {
9+
backgrounds: false,
10+
},
11+
},
612
"@storybook/addon-links",
7-
"@storybook/addon-essentials",
813
"@storybook/addon-mdx-gfm",
914
"@storybook/addon-actions",
15+
"@storybook/addon-themes",
1016
],
1117
staticDirs: ["../static"],
1218
framework: {

‎site/.storybook/preview.jsx

+40-25
Original file line numberDiff line numberDiff line change
@@ -4,24 +4,33 @@ import {
44
ThemeProvider as MuiThemeProvider,
55
} from "@mui/material/styles";
66
import { ThemeProvider as EmotionThemeProvider } from "@emotion/react";
7+
import { DecoratorHelpers } from "@storybook/addon-themes";
78
import { withRouter } from "storybook-addon-react-router-v6";
9+
import { QueryClient, QueryClientProvider } from "react-query";
810
import { HelmetProvider } from "react-helmet-async";
9-
import theme from "theme";
10-
import colors from "theme/tailwind";
11+
import themes from "theme";
1112
import "theme/globalFonts";
12-
import { QueryClient, QueryClientProvider } from "react-query";
13+
14+
DecoratorHelpers.initializeThemeState(Object.keys(themes), "dark");
1315

1416
export const decorators = [
15-
(Story) => (
16-
<StyledEngineProvider injectFirst>
17-
<MuiThemeProvider theme={theme.dark}>
18-
<EmotionThemeProvider theme={theme.dark}>
19-
<CssBaseline />
20-
<Story />
21-
</EmotionThemeProvider>
22-
</MuiThemeProvider>
23-
</StyledEngineProvider>
24-
),
17+
(Story, context) => {
18+
const selectedTheme = DecoratorHelpers.pluckThemeFromContext(context);
19+
const { themeOverride } = DecoratorHelpers.useThemeParameters();
20+
21+
const selected = themeOverride || selectedTheme || "dark";
22+
23+
return (
24+
<StyledEngineProvider injectFirst>
25+
<MuiThemeProvider theme={themes[selected]}>
26+
<EmotionThemeProvider theme={themes[selected]}>
27+
<CssBaseline />
28+
<Story />
29+
</EmotionThemeProvider>
30+
</MuiThemeProvider>
31+
</StyledEngineProvider>
32+
);
33+
},
2534
withRouter,
2635
(Story) => {
2736
return (
@@ -50,18 +59,12 @@ export const decorators = [
5059
];
5160

5261
export const parameters = {
53-
backgrounds: {
54-
default: "dark",
55-
values: [
56-
{
57-
name: "dark",
58-
value: colors.gray[950],
59-
},
60-
{
61-
name: "light",
62-
value: colors.gray[50],
63-
},
64-
],
62+
options: {
63+
storySort: {
64+
method: "alphabetical",
65+
order: ["design", "pages", "components"],
66+
locales: "en-US",
67+
},
6568
},
6669
actions: {
6770
argTypesRegex: "^(on|handler)[A-Z].*",
@@ -73,4 +76,16 @@ export const parameters = {
7376
date: /Date$/,
7477
},
7578
},
79+
viewport: {
80+
viewports: {
81+
ipad: {
82+
name: "iPad Mini",
83+
styles: {
84+
height: "1024px",
85+
width: "768px",
86+
},
87+
type: "tablet",
88+
},
89+
},
90+
},
7691
};

‎site/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,7 @@
104104
"@storybook/addon-essentials": "7.5.2",
105105
"@storybook/addon-links": "7.5.2",
106106
"@storybook/addon-mdx-gfm": "7.5.2",
107+
"@storybook/addon-themes": "7.6.4",
107108
"@storybook/react": "7.5.2",
108109
"@storybook/react-vite": "7.5.2",
109110
"@swc/core": "1.3.38",

‎site/pnpm-lock.yaml

+9
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎site/src/@types/mui.d.ts

-5
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,6 @@
11
import type { PaletteColor, PaletteColorOptions } from "@mui/material/styles";
2-
import type { NewTheme } from "theme/experimental";
32

43
declare module "@mui/material/styles" {
5-
interface Theme {
6-
experimental: NewTheme;
7-
}
8-
94
interface Palette {
105
neutral: PaletteColor;
116
}

‎site/src/App.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { QueryClient, QueryClientProvider } from "react-query";
22
import type { FC, ReactNode } from "react";
33
import { HelmetProvider } from "react-helmet-async";
44
import { AppRouter } from "./AppRouter";
5-
import { ThemeProviders } from "./contexts/ThemeProviders";
5+
import { ThemeProvider } from "./contexts/ThemeProvider";
66
import { AuthProvider } from "./contexts/AuthProvider/AuthProvider";
77
import { ErrorBoundary } from "./components/ErrorBoundary/ErrorBoundary";
88
import { GlobalSnackbar } from "./components/GlobalSnackbar/GlobalSnackbar";
@@ -30,10 +30,10 @@ export const AppProviders: FC<AppProvidersProps> = ({
3030
<HelmetProvider>
3131
<QueryClientProvider client={queryClient}>
3232
<AuthProvider>
33-
<ThemeProviders>
33+
<ThemeProvider>
3434
{children}
3535
<GlobalSnackbar />
36-
</ThemeProviders>
36+
</ThemeProvider>
3737
</AuthProvider>
3838
</QueryClientProvider>
3939
</HelmetProvider>

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

+5-5
Original file line numberDiff line numberDiff line change
@@ -96,13 +96,15 @@ export const ActiveUserChart: FC<ActiveUserChartProps> = ({
9696
},
9797
scales: {
9898
y: {
99+
grid: { color: theme.palette.divider },
99100
suggestedMin: 0,
100101
ticks: {
101102
precision: 0,
102103
},
103104
},
104105

105106
x: {
107+
grid: { color: theme.palette.divider },
106108
ticks: {
107109
stepSize: data.length > 10 ? 2 : undefined,
108110
},
@@ -124,11 +126,9 @@ export const ActiveUserChart: FC<ActiveUserChartProps> = ({
124126
{
125127
label: `${interval === "day" ? "Daily" : "Weekly"} Active Users`,
126128
data: chartData,
127-
pointBackgroundColor: theme.palette.info.light,
128-
pointBorderColor: theme.palette.info.light,
129-
borderColor: theme.palette.info.light,
130-
backgroundColor: theme.palette.info.dark,
131-
fill: "origin",
129+
pointBackgroundColor: theme.experimental.roles.active.outline,
130+
pointBorderColor: theme.experimental.roles.active.outline,
131+
borderColor: theme.experimental.roles.active.outline,
132132
},
133133
],
134134
}}

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

+29
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,15 @@ import type { Meta, StoryObj } from "@storybook/react";
22
import {
33
Badges,
44
AlphaBadge,
5+
BetaBadge,
6+
DisabledBadge,
57
EnabledBadge,
68
EntitledBadge,
79
EnterpriseBadge,
10+
HealthyBadge,
11+
NotHealthyBadge,
12+
NotRegisteredBadge,
13+
NotReachableBadge,
814
} from "./Badges";
915

1016
const meta: Meta<typeof Badges> = {
@@ -26,11 +32,34 @@ export const Entitled: Story = {
2632
children: <EntitledBadge />,
2733
},
2834
};
35+
export const ProxyStatus: Story = {
36+
args: {
37+
children: (
38+
<>
39+
<HealthyBadge />
40+
<HealthyBadge derpOnly />
41+
<NotHealthyBadge />
42+
<NotRegisteredBadge />
43+
<NotReachableBadge />
44+
</>
45+
),
46+
},
47+
};
48+
export const Disabled: Story = {
49+
args: {
50+
children: <DisabledBadge />,
51+
},
52+
};
2953
export const Enterprise: Story = {
3054
args: {
3155
children: <EnterpriseBadge />,
3256
},
3357
};
58+
export const Beta: Story = {
59+
args: {
60+
children: <BetaBadge />,
61+
},
62+
};
3463
export const Alpha: Story = {
3564
args: {
3665
children: <AlphaBadge />,

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

+38-18
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import type { PropsWithChildren, FC } from "react";
22
import Tooltip from "@mui/material/Tooltip";
33
import { type Interpolation, type Theme } from "@emotion/react";
44
import { Stack } from "components/Stack/Stack";
5-
import colors from "theme/tailwind";
65

76
const styles = {
87
badge: {
@@ -22,14 +21,17 @@ const styles = {
2221
enabledBadge: (theme) => ({
2322
border: `1px solid ${theme.experimental.roles.success.outline}`,
2423
backgroundColor: theme.experimental.roles.success.background,
24+
color: theme.experimental.roles.success.text,
2525
}),
2626
errorBadge: (theme) => ({
2727
border: `1px solid ${theme.experimental.roles.error.outline}`,
2828
backgroundColor: theme.experimental.roles.error.background,
29+
color: theme.experimental.roles.error.text,
2930
}),
3031
warnBadge: (theme) => ({
3132
border: `1px solid ${theme.experimental.roles.warning.outline}`,
3233
backgroundColor: theme.experimental.roles.warning.background,
34+
color: theme.experimental.roles.warning.text,
3335
}),
3436
} satisfies Record<string, Interpolation<Theme>>;
3537

@@ -42,10 +44,9 @@ export const EntitledBadge: FC = () => {
4244
};
4345

4446
interface HealthyBadge {
45-
derpOnly: boolean;
47+
derpOnly?: boolean;
4648
}
47-
export const HealthyBadge: FC<HealthyBadge> = (props) => {
48-
const { derpOnly } = props;
49+
export const HealthyBadge: FC<HealthyBadge> = ({ derpOnly }) => {
4950
return (
5051
<span css={[styles.badge, styles.enabledBadge]}>
5152
{derpOnly ? "Healthy (DERP only)" : "Healthy"}
@@ -79,8 +80,9 @@ export const DisabledBadge: FC = () => {
7980
css={[
8081
styles.badge,
8182
(theme) => ({
82-
border: `1px solid ${theme.palette.divider}`,
83-
backgroundColor: theme.palette.background.paper,
83+
border: `1px solid ${theme.experimental.l1.outline}`,
84+
backgroundColor: theme.experimental.l1.background,
85+
color: theme.experimental.l1.text,
8486
}),
8587
]}
8688
>
@@ -95,8 +97,9 @@ export const EnterpriseBadge: FC = () => {
9597
css={[
9698
styles.badge,
9799
(theme) => ({
98-
backgroundColor: theme.palette.info.dark,
99-
border: `1px solid ${theme.palette.info.light}`,
100+
backgroundColor: theme.experimental.roles.info.background,
101+
border: `1px solid ${theme.experimental.roles.info.outline}`,
102+
color: theme.experimental.roles.info.text,
100103
}),
101104
]}
102105
>
@@ -105,16 +108,33 @@ export const EnterpriseBadge: FC = () => {
105108
);
106109
};
107110

111+
export const BetaBadge: FC = () => {
112+
return (
113+
<span
114+
css={[
115+
styles.badge,
116+
(theme) => ({
117+
border: `1px solid ${theme.experimental.roles.preview.outline}`,
118+
backgroundColor: theme.experimental.roles.preview.background,
119+
color: theme.experimental.roles.preview.text,
120+
}),
121+
]}
122+
>
123+
Beta
124+
</span>
125+
);
126+
};
127+
108128
export const AlphaBadge: FC = () => {
109129
return (
110130
<span
111131
css={[
112132
styles.badge,
113-
{
114-
border: `1px solid ${colors.violet[600]}`,
115-
backgroundColor: colors.violet[950],
116-
color: colors.violet[50],
117-
},
133+
(theme) => ({
134+
border: `1px solid ${theme.experimental.roles.preview.outline}`,
135+
backgroundColor: theme.experimental.roles.preview.background,
136+
color: theme.experimental.roles.preview.text,
137+
}),
118138
]}
119139
>
120140
Alpha
@@ -127,11 +147,11 @@ export const DeprecatedBadge: FC = () => {
127147
<span
128148
css={[
129149
styles.badge,
130-
{
131-
border: `1px solid ${colors.orange[600]}`,
132-
backgroundColor: colors.orange[950],
133-
color: colors.orange[50],
134-
},
150+
(theme) => ({
151+
border: `1px solid ${theme.experimental.roles.danger.outline}`,
152+
backgroundColor: theme.experimental.roles.danger.background,
153+
color: theme.experimental.roles.danger.text,
154+
}),
135155
]}
136156
>
137157
Deprecated

0 commit comments

Comments
 (0)