Skip to content

Commit e044d3b

Browse files
aslilacaslilac
authored
fix: add additional theme colors (coder#11313)
1 parent 0b7d68d commit e044d3b

File tree

7 files changed

+72
-96
lines changed

7 files changed

+72
-96
lines changed

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react";
22
import {
33
Badges,
44
AlphaBadge,
5-
BetaBadge,
5+
PreviewBadge,
66
DisabledBadge,
77
EnabledBadge,
88
EntitledBadge,
@@ -55,9 +55,9 @@ export const Enterprise: Story = {
5555
children: <EnterpriseBadge />,
5656
},
5757
};
58-
export const Beta: Story = {
58+
export const Preview: Story = {
5959
args: {
60-
children: <BetaBadge />,
60+
children: <PreviewBadge />,
6161
},
6262
};
6363
export const Alpha: Story = {

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,7 @@ export const EnterpriseBadge: FC = () => {
108108
);
109109
};
110110

111-
export const BetaBadge: FC = () => {
111+
export const PreviewBadge: FC = () => {
112112
return (
113113
<span
114114
css={[
@@ -120,7 +120,7 @@ export const BetaBadge: FC = () => {
120120
}),
121121
]}
122122
>
123-
Beta
123+
Preview
124124
</span>
125125
);
126126
};

‎site/src/pages/UserSettingsPage/AppearancePage/AppearanceForm.tsx

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import type { UpdateUserAppearanceSettingsRequest } from "api/typesGenerated";
55
import themes, { DEFAULT_THEME, type Theme } from "theme";
66
import { ErrorAlert } from "components/Alert/ErrorAlert";
77
import { Stack } from "components/Stack/Stack";
8-
import { BetaBadge } from "components/Badges/Badges";
8+
import { PreviewBadge } from "components/Badges/Badges";
99
import { ThemeOverride } from "contexts/ThemeProvider";
1010

1111
export interface AppearanceFormProps {
@@ -57,7 +57,7 @@ export const AppearanceForm: FC<AppearanceFormProps> = ({
5757
/>
5858
<ThemePreviewButton
5959
displayName="Light"
60-
beta
60+
preview
6161
active={currentTheme === "light"}
6262
theme={themes.light}
6363
onSelect={() => onChangeTheme("light")}
@@ -74,7 +74,7 @@ interface AutoThemePreviewButtonProps extends Omit<ThemePreviewProps, "theme"> {
7474

7575
const AutoThemePreviewButton: FC<AutoThemePreviewButtonProps> = ({
7676
active,
77-
beta,
77+
preview,
7878
className,
7979
displayName,
8080
themes,
@@ -102,13 +102,13 @@ const AutoThemePreviewButton: FC<AutoThemePreviewButtonProps> = ({
102102
clipPath: "polygon(-5% -5%, 50% -5%, 50% 105%, -5% 105%)",
103103
}}
104104
active={active}
105-
beta={beta}
105+
preview={preview}
106106
displayName={displayName}
107107
theme={leftTheme}
108108
/>
109109
<ThemePreview
110110
active={active}
111-
beta={beta}
111+
preview={preview}
112112
displayName={displayName}
113113
theme={rightTheme}
114114
/>
@@ -123,7 +123,7 @@ interface ThemePreviewButtonProps extends ThemePreviewProps {
123123

124124
const ThemePreviewButton: FC<ThemePreviewButtonProps> = ({
125125
active,
126-
beta,
126+
preview,
127127
className,
128128
displayName,
129129
theme,
@@ -143,7 +143,7 @@ const ThemePreviewButton: FC<ThemePreviewButtonProps> = ({
143143
<label htmlFor={displayName} className={className}>
144144
<ThemePreview
145145
active={active}
146-
beta={beta}
146+
preview={preview}
147147
displayName={displayName}
148148
theme={theme}
149149
/>
@@ -154,15 +154,15 @@ const ThemePreviewButton: FC<ThemePreviewButtonProps> = ({
154154

155155
interface ThemePreviewProps {
156156
active?: boolean;
157-
beta?: boolean;
157+
preview?: boolean;
158158
className?: string;
159159
displayName: string;
160160
theme: Theme;
161161
}
162162

163163
const ThemePreview: FC<ThemePreviewProps> = ({
164164
active,
165-
beta,
165+
preview,
166166
className,
167167
displayName,
168168
theme,
@@ -198,7 +198,7 @@ const ThemePreview: FC<ThemePreviewProps> = ({
198198
</div>
199199
<div css={styles.label}>
200200
<span>{displayName}</span>
201-
{beta && <BetaBadge />}
201+
{preview && <PreviewBadge />}
202202
</div>
203203
</div>
204204
</ThemeOverride>

‎site/src/theme/dark/experimental.ts

Lines changed: 4 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -15,34 +15,15 @@ export default {
1515
fill: colors.zinc[500],
1616
text: colors.zinc[50],
1717
disabled: {
18-
background: "#f00",
19-
outline: "#f00",
18+
background: colors.gray[900],
19+
outline: colors.zinc[700],
2020
fill: colors.zinc[500],
2121
text: colors.zinc[200],
2222
},
2323
hover: {
2424
background: colors.zinc[800],
2525
outline: colors.zinc[600],
26-
fill: "#f00",
27-
text: colors.white,
28-
},
29-
},
30-
31-
l3: {
32-
background: colors.zinc[800],
33-
outline: colors.zinc[700],
34-
fill: colors.zinc[600],
35-
text: colors.white,
36-
disabled: {
37-
background: "#f00",
38-
outline: "#f00",
39-
fill: "#f00",
40-
text: colors.zinc[200],
41-
},
42-
hover: {
43-
background: "#f00",
44-
outline: "#f00",
45-
fill: "#f00",
26+
fill: colors.zinc[400],
4627
text: colors.white,
4728
},
4829
},
@@ -75,7 +56,7 @@ export default {
7556
warning: {
7657
background: colors.amber[950],
7758
outline: colors.amber[300],
78-
fill: "#f00",
59+
fill: colors.amber[500],
7960
text: colors.amber[50],
8061
},
8162
notice: {

‎site/src/theme/darkBlue/experimental.ts

Lines changed: 5 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -15,34 +15,15 @@ export default {
1515
fill: colors.gray[500],
1616
text: colors.gray[50],
1717
disabled: {
18-
background: "#f00",
19-
outline: "#f00",
18+
background: colors.gray[900],
19+
outline: colors.zinc[700],
2020
fill: colors.gray[500],
2121
text: colors.gray[200],
2222
},
2323
hover: {
24-
background: "#f00",
24+
background: colors.gray[800],
2525
outline: colors.gray[600],
26-
fill: "#f00",
27-
text: colors.white,
28-
},
29-
},
30-
31-
l3: {
32-
background: colors.gray[800],
33-
outline: colors.gray[700],
34-
fill: colors.gray[600],
35-
text: colors.white,
36-
disabled: {
37-
background: "#f00",
38-
outline: "#f00",
39-
fill: "#f00",
40-
text: colors.gray[200],
41-
},
42-
hover: {
43-
background: "#f00",
44-
outline: "#f00",
45-
fill: "#f00",
26+
fill: colors.zinc[400],
4627
text: colors.white,
4728
},
4829
},
@@ -75,7 +56,7 @@ export default {
7556
warning: {
7657
background: colors.amber[950],
7758
outline: colors.amber[300],
78-
fill: "#f00",
59+
fill: colors.amber[500],
7960
text: colors.amber[50],
8061
},
8162
notice: {

‎site/src/theme/experimental.ts

Lines changed: 43 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -9,29 +9,62 @@ export type InteractiveThemeRole = keyof {
99
export interface NewTheme {
1010
l1: Role; // page background, things which sit at the "root level"
1111
l2: InteractiveRole; // sidebars, table headers, navigation
12-
l3: InteractiveRole; // buttons, inputs
1312

1413
roles: {
15-
danger: InteractiveRole; // delete, immutable parameters, stuff that sucks to fix
16-
error: Role; // something went wrong
17-
warning: Role; // something is amiss
18-
notice: Role; // like info, but actionable. "this is fine, but you may want to..."
19-
info: Role; // just sharing :)
20-
success: InteractiveRole; // yay!! it's working!!
21-
active: InteractiveRole; // selected items, focused inputs, in progress
22-
preview: Role; // experiments, alpha/beta features
14+
/** Something is wrong; either unexpectedly, or in a meaningful way. */
15+
error: Role;
16+
17+
/** Something isn't quite right, but without serious consequence. */
18+
warning: Role;
19+
20+
/** A prompt for action, to correct or look into something. */
21+
notice: Role;
22+
23+
/** Notable information; just so you know! */
24+
info: Role;
25+
26+
/** Confirmation, or affirming that things are as desired. */
27+
success: InteractiveRole;
28+
29+
/** Selected, in progress, of particular relevance right now. */
30+
active: InteractiveRole;
31+
32+
/** Actions that have long lasting or irreversible effects.
33+
* Deletion, immutable parameters, etc.
34+
*/
35+
danger: InteractiveRole;
36+
37+
/** This isn't quite ready for prime-time, but you're welcome to look around!
38+
* Preview features, experiments, unstable etc.
39+
*/
40+
preview: Role;
2341
};
2442
}
2543

44+
/** A set of colors which work together to fill a desirable "communication role"
45+
* ie. I wish to communicate an error, I wish to communicate that this is dangerous, etc.
46+
*/
2647
export interface Role {
48+
/** A background color that works best with the corresponding `outline` and `text` colors */
2749
background: string;
50+
51+
/** A border, or a color for an outlined icon */
2852
outline: string;
53+
54+
/** A good color for icons, text on a neutral background, the background of a button which should stand out */
2955
fill: string;
30-
// contrastOutline?: string;
56+
57+
/** A color great for text on the corresponding `background` */
3158
text: string;
59+
60+
// contrastOutline?: string;
3261
}
3362

63+
/** Provides additional colors which can indicate different states for interactive elements */
3464
export interface InteractiveRole extends Role {
65+
/** A set of colors which can indicate a disabled state */
3566
disabled: Role;
67+
68+
/** A set of colors which can indicate mouse hover (or keyboard focus) */
3669
hover: Role;
3770
}

‎site/src/theme/light/experimental.ts

Lines changed: 5 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -15,34 +15,15 @@ export default {
1515
fill: colors.gray[500],
1616
text: colors.gray[950],
1717
disabled: {
18-
background: "#f00",
19-
outline: "#f00",
18+
background: colors.gray[100],
19+
outline: colors.gray[500],
2020
fill: colors.gray[500],
21-
text: colors.gray[200],
21+
text: colors.gray[800],
2222
},
2323
hover: {
2424
background: colors.gray[200],
2525
outline: colors.gray[700],
26-
fill: "#f00",
27-
text: colors.black,
28-
},
29-
},
30-
31-
l3: {
32-
background: colors.gray[200],
33-
outline: colors.gray[700],
34-
fill: colors.gray[600],
35-
text: colors.black,
36-
disabled: {
37-
background: "#f00",
38-
outline: "#f00",
39-
fill: "#f00",
40-
text: colors.gray[200],
41-
},
42-
hover: {
43-
background: "#f00",
44-
outline: "#f00",
45-
fill: "#f00",
26+
fill: colors.zinc[600],
4627
text: colors.black,
4728
},
4829
},
@@ -75,7 +56,7 @@ export default {
7556
warning: {
7657
background: colors.amber[50],
7758
outline: colors.amber[300],
78-
fill: "#f00",
59+
fill: colors.amber[500],
7960
text: colors.amber[950],
8061
},
8162
notice: {

0 commit comments

Comments
 (0)