Skip to content

Commit 0092d93

Browse files
aslilacaslilac
committed
add light theme
1 parent a6901ae commit 0092d93

File tree

38 files changed

+1146
-239
lines changed

38 files changed

+1146
-239
lines changed

‎site/.storybook/main.js

Lines changed: 7 additions & 1 deletion
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

Lines changed: 28 additions & 25 deletions
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].*",

‎site/package.json

Lines changed: 1 addition & 0 deletions
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

Lines changed: 9 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -94,13 +94,15 @@ export const ActiveUserChart: FC<ActiveUserChartProps> = ({
9494
},
9595
scales: {
9696
y: {
97+
grid: { color: theme.palette.divider },
9798
suggestedMin: 0,
9899
ticks: {
99100
precision: 0,
100101
},
101102
},
102103

103104
x: {
105+
grid: { color: theme.palette.divider },
104106
ticks: {
105107
stepSize: data.length > 10 ? 2 : undefined,
106108
},
@@ -122,11 +124,9 @@ export const ActiveUserChart: FC<ActiveUserChartProps> = ({
122124
{
123125
label: `${interval === "day" ? "Daily" : "Weekly"} Active Users`,
124126
data: chartData,
125-
pointBackgroundColor: theme.palette.info.light,
126-
pointBorderColor: theme.palette.info.light,
127-
borderColor: theme.palette.info.light,
128-
backgroundColor: theme.palette.info.dark,
129-
fill: "origin",
127+
pointBackgroundColor: theme.experimental.roles.active.outline,
128+
pointBorderColor: theme.experimental.roles.active.outline,
129+
borderColor: theme.experimental.roles.active.outline,
130130
},
131131
],
132132
}}

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,14 @@ import type { Meta, StoryObj } from "@storybook/react";
22
import {
33
Badges,
44
AlphaBadge,
5+
DisabledBadge,
56
EnabledBadge,
67
EntitledBadge,
78
EnterpriseBadge,
9+
HealthyBadge,
10+
NotHealthyBadge,
11+
NotRegisteredBadge,
12+
NotReachableBadge,
813
} from "./Badges";
914

1015
const meta: Meta<typeof Badges> = {
@@ -26,6 +31,24 @@ export const Entitled: Story = {
2631
children: <EntitledBadge />,
2732
},
2833
};
34+
export const ProxyStatus: Story = {
35+
args: {
36+
children: (
37+
<>
38+
<HealthyBadge />
39+
<HealthyBadge derpOnly />
40+
<NotHealthyBadge />
41+
<NotRegisteredBadge />
42+
<NotReachableBadge />
43+
</>
44+
),
45+
},
46+
};
47+
export const Disabled: Story = {
48+
args: {
49+
children: <DisabledBadge />,
50+
},
51+
};
2952
export const Enterprise: Story = {
3053
args: {
3154
children: <EnterpriseBadge />,

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

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -22,14 +22,17 @@ const styles = {
2222
enabledBadge: (theme) => ({
2323
border: `1px solid ${theme.experimental.roles.success.outline}`,
2424
backgroundColor: theme.experimental.roles.success.background,
25+
color: theme.experimental.roles.success.text,
2526
}),
2627
errorBadge: (theme) => ({
2728
border: `1px solid ${theme.experimental.roles.error.outline}`,
2829
backgroundColor: theme.experimental.roles.error.background,
30+
color: theme.experimental.roles.error.text,
2931
}),
3032
warnBadge: (theme) => ({
3133
border: `1px solid ${theme.experimental.roles.warning.outline}`,
3234
backgroundColor: theme.experimental.roles.warning.background,
35+
color: theme.experimental.roles.warning.text,
3336
}),
3437
} satisfies Record<string, Interpolation<Theme>>;
3538

@@ -42,10 +45,9 @@ export const EntitledBadge: FC = () => {
4245
};
4346

4447
interface HealthyBadge {
45-
derpOnly: boolean;
48+
derpOnly?: boolean;
4649
}
47-
export const HealthyBadge: FC<HealthyBadge> = (props) => {
48-
const { derpOnly } = props;
50+
export const HealthyBadge: FC<HealthyBadge> = ({ derpOnly }) => {
4951
return (
5052
<span css={[styles.badge, styles.enabledBadge]}>
5153
{derpOnly ? "Healthy (DERP only)" : "Healthy"}
@@ -79,8 +81,9 @@ export const DisabledBadge: FC = () => {
7981
css={[
8082
styles.badge,
8183
(theme) => ({
82-
border: `1px solid ${theme.palette.divider}`,
83-
backgroundColor: theme.palette.background.paper,
84+
border: `1px solid ${theme.experimental.l1.outline}`,
85+
backgroundColor: theme.experimental.l1.background,
86+
color: theme.experimental.l1.text,
8487
}),
8588
]}
8689
>
@@ -95,8 +98,9 @@ export const EnterpriseBadge: FC = () => {
9598
css={[
9699
styles.badge,
97100
(theme) => ({
98-
backgroundColor: theme.palette.info.dark,
99-
border: `1px solid ${theme.palette.info.light}`,
101+
backgroundColor: theme.experimental.roles.info.background,
102+
border: `1px solid ${theme.experimental.roles.info.outline}`,
103+
color: theme.experimental.roles.info.text,
100104
}),
101105
]}
102106
>
@@ -110,11 +114,11 @@ export const AlphaBadge: FC = () => {
110114
<span
111115
css={[
112116
styles.badge,
113-
{
114-
border: `1px solid ${colors.violet[600]}`,
115-
backgroundColor: colors.violet[950],
116-
color: colors.violet[50],
117-
},
117+
(theme) => ({
118+
border: `1px solid ${theme.experimental.roles.preview.outline}`,
119+
backgroundColor: theme.experimental.roles.preview.background,
120+
color: theme.experimental.roles.preview.text,
121+
}),
118122
]}
119123
>
120124
Alpha

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
11
import type { Meta, StoryObj } from "@storybook/react";
22
import { CodeExample } from "./CodeExample";
33

4-
const sampleCode = `echo "Hello, world"`;
5-
64
const meta: Meta<typeof CodeExample> = {
75
title: "components/CodeExample",
86
component: CodeExample,
9-
argTypes: {
10-
code: { control: "string", defaultValue: sampleCode },
7+
args: {
8+
code: `echo "hello, friend!"`,
119
},
1210
};
1311

1412
export default meta;
1513
type Story = StoryObj<typeof CodeExample>;
1614

17-
export const Example: Story = {
15+
export const Example: Story = {};
16+
17+
export const Secret: Story = {
1818
args: {
19-
code: sampleCode,
19+
secret: true,
2020
},
2121
};
2222

‎site/src/components/CodeExample/CodeExample.tsx

Lines changed: 34 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,51 @@
11
import { type FC } from "react";
2-
import { useTheme } from "@emotion/react";
2+
import { type Interpolation, type Theme } from "@emotion/react";
33
import { MONOSPACE_FONT_FAMILY } from "theme/constants";
44
import { CopyButton } from "../CopyButton/CopyButton";
55

66
export interface CodeExampleProps {
77
code: string;
8-
password?: boolean;
8+
secret?: boolean;
99
className?: string;
1010
}
1111

1212
/**
1313
* Component to show single-line code examples, with a copy button
1414
*/
15-
export const CodeExample: FC<CodeExampleProps> = (props) => {
16-
const { code, password, className } = props;
17-
const theme = useTheme();
18-
15+
export const CodeExample: FC<CodeExampleProps> = ({
16+
code,
17+
secret,
18+
className,
19+
}) => {
1920
return (
20-
<div
21-
css={{
22-
display: "flex",
23-
flexDirection: "row",
24-
alignItems: "center",
25-
background: "rgb(0 0 0 / 30%)",
26-
color: theme.palette.primary.contrastText,
27-
fontFamily: MONOSPACE_FONT_FAMILY,
28-
fontSize: 14,
29-
borderRadius: 8,
30-
padding: 8,
31-
lineHeight: "150%",
32-
border: `1px solid ${theme.palette.divider}`,
33-
}}
34-
className={className}
35-
>
36-
<code
37-
css={{
38-
padding: "0 8px",
39-
width: "100%",
40-
display: "flex",
41-
alignItems: "center",
42-
wordBreak: "break-all",
43-
"-webkit-text-security": password ? "disc" : undefined,
44-
}}
45-
>
46-
{code}
47-
</code>
21+
<div css={styles.container} className={className}>
22+
<code css={[styles.code, secret && styles.secret]}>{code}</code>
4823
<CopyButton text={code} />
4924
</div>
5025
);
5126
};
27+
28+
const styles = {
29+
container: (theme) => ({
30+
display: "flex",
31+
flexDirection: "row",
32+
alignItems: "center",
33+
color: theme.experimental.l1.text,
34+
fontFamily: MONOSPACE_FONT_FAMILY,
35+
fontSize: 14,
36+
borderRadius: 8,
37+
padding: 8,
38+
lineHeight: "150%",
39+
border: `1px solid ${theme.experimental.l1.outline}`,
40+
}),
41+
42+
code: {
43+
padding: "0 8px",
44+
flexGrow: 1,
45+
wordBreak: "break-all",
46+
},
47+
48+
secret: {
49+
"-webkit-text-security": "disc", // also supported by firefox
50+
},
51+
} satisfies Record<string, Interpolation<Theme>>;

0 commit comments

Comments
 (0)