Skip to content

Commit 4cc558b

Browse files
aslilacaslilac
committed
mark light as beta
1 parent 6491117 commit 4cc558b

File tree

9 files changed

+209
-160
lines changed

9 files changed

+209
-160
lines changed

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react";
22
import {
33
Badges,
44
AlphaBadge,
5+
BetaBadge,
56
DisabledBadge,
67
EnabledBadge,
78
EntitledBadge,
@@ -54,6 +55,11 @@ export const Enterprise: Story = {
5455
children: <EnterpriseBadge />,
5556
},
5657
};
58+
export const Beta: Story = {
59+
args: {
60+
children: <BetaBadge />,
61+
},
62+
};
5763
export const Alpha: Story = {
5864
args: {
5965
children: <AlphaBadge />,

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,23 @@ export const EnterpriseBadge: FC = () => {
109109
);
110110
};
111111

112+
export const BetaBadge: FC = () => {
113+
return (
114+
<span
115+
css={[
116+
styles.badge,
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+
}),
122+
]}
123+
>
124+
Beta
125+
</span>
126+
);
127+
};
128+
112129
export const AlphaBadge: FC = () => {
113130
return (
114131
<span

‎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: React.FC<DialogActionButtonsProps> = ({
7272
const styles = {
7373
warningButton: (theme) => ({
7474
"&.MuiButton-contained": {
75-
backgroundColor: theme.palette.warning.main,
76-
borderColor: theme.palette.warning.main,
75+
backgroundColor: theme.experimental.roles.danger.fill,
76+
borderColor: theme.experimental.roles.danger.outline,
7777

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

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

8787
"&.Mui-disabled": {
88-
backgroundColor: theme.palette.warning.dark,
89-
borderColor: theme.palette.warning.dark,
88+
backgroundColor: theme.experimental.roles.danger.disabled.background,
89+
borderColor: theme.experimental.roles.danger.disabled.outline,
9090

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

‎site/src/contexts/ThemeProviders.tsx

Lines changed: 23 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,19 @@ import {
77
import {
88
type FC,
99
type PropsWithChildren,
10+
type ReactNode,
1011
useContext,
1112
useEffect,
1213
useMemo,
1314
useState,
1415
} from "react";
15-
import themes, { DEFAULT_THEME } from "theme";
16+
import themes, { DEFAULT_THEME, type Theme } from "theme";
1617
import { AuthContext } from "./AuthProvider/AuthProvider";
1718

18-
export const ThemeProviders: FC<PropsWithChildren> = ({ children }) => {
19+
/**
20+
*
21+
*/
22+
export const ThemeProvider: FC<PropsWithChildren> = ({ children }) => {
1923
// We need to use the `AuthContext` directly, rather than the `useAuth` hook,
2024
// because Storybook and many tests depend on this component, but do not provide
2125
// an `AuthProvider`, and `useAuth` will throw in that case.
@@ -56,12 +60,23 @@ export const ThemeProviders: FC<PropsWithChildren> = ({ children }) => {
5660

5761
return (
5862
<StyledEngineProvider injectFirst>
59-
<MuiThemeProvider theme={theme}>
60-
<EmotionThemeProvider theme={theme}>
61-
<CssBaseline enableColorScheme />
62-
{children}
63-
</EmotionThemeProvider>
64-
</MuiThemeProvider>
63+
<ThemeOverride theme={theme}>{children}</ThemeOverride>
6564
</StyledEngineProvider>
6665
);
6766
};
67+
68+
interface ThemeOverrideProps {
69+
theme: Theme;
70+
children?: ReactNode;
71+
}
72+
73+
export const ThemeOverride: FC<ThemeOverrideProps> = ({ theme, children }) => {
74+
return (
75+
<MuiThemeProvider theme={theme}>
76+
<EmotionThemeProvider theme={theme}>
77+
<CssBaseline enableColorScheme />
78+
{children}
79+
</EmotionThemeProvider>
80+
</MuiThemeProvider>
81+
);
82+
};

0 commit comments

Comments
 (0)