Skip to content

Commit 9f3aa37

Browse files
jzempeljzempel
authored
feat(theming): fill out color variables (#1782)
1 parent d94b1ae commit 9f3aa37

File tree

4 files changed

+169
-9
lines changed

4 files changed

+169
-9
lines changed

‎packages/theming/src/elements/ThemeProvider.spec.tsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,10 @@
66
*/
77

88
import React from 'react';
9+
import { useTheme } from 'styled-components';
910
import { render } from 'garden-test-utils';
1011
import { ThemeProvider } from './ThemeProvider';
12+
import { IGardenTheme } from '../types';
1113

1214
describe('ThemeProvider', () => {
1315
it('only renders children', () => {
@@ -19,4 +21,42 @@ describe('ThemeProvider', () => {
1921

2022
expect(container.firstChild!.nodeName).toBe('BUTTON');
2123
});
24+
25+
it('provides theme color variable parity between modes', () => {
26+
let dark: IGardenTheme['colors']['variables']['dark'] | undefined;
27+
let light: IGardenTheme['colors']['variables']['light'] | undefined;
28+
29+
const Test = () => {
30+
const theme = useTheme();
31+
32+
dark = theme.colors.variables.dark;
33+
light = theme.colors.variables.light;
34+
35+
return <div />;
36+
};
37+
38+
render(<Test />);
39+
40+
expect(dark).toBeDefined();
41+
expect(light).toBeDefined();
42+
43+
const { background: darkBackground, border: darkBorder, foreground: darkForeground } = dark!;
44+
const {
45+
background: lightBackground,
46+
border: lightBorder,
47+
foreground: lightForeground
48+
} = light!;
49+
const darkKeys = [
50+
...Object.keys(darkBackground),
51+
...Object.keys(darkBorder),
52+
...Object.keys(darkForeground)
53+
].join();
54+
const lightKeys = [
55+
...Object.keys(lightBackground),
56+
...Object.keys(lightBorder),
57+
...Object.keys(lightForeground)
58+
].join();
59+
60+
expect(darkKeys).toStrictEqual(lightKeys);
61+
});
2262
});

‎packages/theming/src/elements/theme/__snapshots__/index.spec.ts.snap‎

Lines changed: 62 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,24 +34,84 @@ exports[`DEFAULT_THEME matches snapshot 1`] = `
3434
"variables": {
3535
"dark": {
3636
"background": {
37+
"danger": "dangerHue.1000",
38+
"dangerEmphasis": "dangerHue.600",
3739
"default": "neutralHue.1100",
40+
"emphasis": "neutralHue.600",
41+
"primary": "primaryHue.900",
42+
"primaryEmphasis": "primaryHue.600",
43+
"raised": "neutralHue.1000",
44+
"recessed": "neutralHue.1200",
45+
"subtle": "neutralHue.1000",
46+
"success": "successHue.1000",
47+
"successEmphasis": "successHue.600",
48+
"warning": "warningHue.1000",
49+
"warningEmphasis": "warningHue.600",
3850
},
3951
"border": {
40-
"default": "neutralHue.700",
52+
"danger": "dangerHue.800",
53+
"dangerEmphasis": "dangerHue.600",
54+
"default": "neutralHue.800",
55+
"emphasis": "neutralHue.600",
56+
"primaryEmphasis": "primaryHue.600",
57+
"subtle": "neutralHue.900",
58+
"success": "successHue.800",
59+
"successEmphasis": "successHue.600",
60+
"warning": "warningHue.800",
61+
"warningEmphasis": "warningHue.600",
4162
},
4263
"foreground": {
64+
"danger": "dangerHue.400",
65+
"dangerEmphasis": "dangerHue.300",
4366
"default": "neutralHue.300",
67+
"onEmphasis": "neutralHue.1100",
68+
"primary": "primaryHue.600",
69+
"subtle": "neutralHue.500",
70+
"success": "successHue.400",
71+
"successEmphasis": "successHue.300",
72+
"warning": "warningHue.400",
73+
"warningEmphasis": "warningHue.300",
4474
},
4575
},
4676
"light": {
4777
"background": {
78+
"danger": "dangerHue.100",
79+
"dangerEmphasis": "dangerHue.700",
4880
"default": "palette.white",
81+
"emphasis": "neutralHue.700",
82+
"primary": "primaryHue.100",
83+
"primaryEmphasis": "primaryHue.700",
84+
"raised": "palette.white",
85+
"recessed": "neutralHue.100",
86+
"subtle": "neutralHue.100",
87+
"success": "successHue.100",
88+
"successEmphasis": "successHue.700",
89+
"warning": "warningHue.100",
90+
"warningEmphasis": "warningHue.700",
4991
},
5092
"border": {
51-
"default": "neutralHue.400",
93+
"danger": "dangerHue.300",
94+
"dangerEmphasis": "dangerHue.700",
95+
"default": "neutralHue.300",
96+
"emphasis": "neutralHue.600",
97+
"primaryEmphasis": "primaryHue.700",
98+
"subtle": "neutralHue.200",
99+
"success": "successHue.300",
100+
"successEmphasis": "successHue.700",
101+
"warning": "warningHue.300",
102+
"warningEmphasis": "warningHue.700",
52103
},
53104
"foreground": {
105+
"danger": "dangerHue.700",
106+
"dangerEmphasis": "dangerHue.900",
54107
"default": "neutralHue.900",
108+
"onEmphasis": "palette.white",
109+
"primary": "primaryHue.700",
110+
"subtle": "neutralHue.700",
111+
"success": "successHue.700",
112+
"successEmphasis": "successHue.900",
113+
"warning": "warningHue.700",
114+
"warningEmphasis": "warningHue.900",
55115
},
56116
},
57117
},

‎packages/theming/src/elements/theme/index.ts‎

Lines changed: 66 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -47,24 +47,84 @@ const colors = {
4747
variables: {
4848
dark: {
4949
background: {
50-
default: 'neutralHue.1100'
50+
default: 'neutralHue.1100',
51+
raised: 'neutralHue.1000',
52+
recessed: 'neutralHue.1200',
53+
subtle: 'neutralHue.1000',
54+
emphasis: 'neutralHue.600',
55+
primary: 'primaryHue.900',
56+
success: 'successHue.1000',
57+
warning: 'warningHue.1000',
58+
danger: 'dangerHue.1000',
59+
primaryEmphasis: 'primaryHue.600',
60+
successEmphasis: 'successHue.600',
61+
warningEmphasis: 'warningHue.600',
62+
dangerEmphasis: 'dangerHue.600'
5163
},
5264
border: {
53-
default: 'neutralHue.700'
65+
default: 'neutralHue.800',
66+
emphasis: 'neutralHue.600',
67+
subtle: 'neutralHue.900',
68+
success: 'successHue.800',
69+
warning: 'warningHue.800',
70+
danger: 'dangerHue.800',
71+
primaryEmphasis: 'primaryHue.600',
72+
successEmphasis: 'successHue.600',
73+
warningEmphasis: 'warningHue.600',
74+
dangerEmphasis: 'dangerHue.600'
5475
},
5576
foreground: {
56-
default: 'neutralHue.300'
77+
default: 'neutralHue.300',
78+
subtle: 'neutralHue.500',
79+
onEmphasis: 'neutralHue.1100',
80+
primary: 'primaryHue.600',
81+
success: 'successHue.400',
82+
warning: 'warningHue.400',
83+
danger: 'dangerHue.400',
84+
successEmphasis: 'successHue.300',
85+
warningEmphasis: 'warningHue.300',
86+
dangerEmphasis: 'dangerHue.300'
5787
}
5888
},
5989
light: {
6090
background: {
61-
default: 'palette.white'
91+
default: 'palette.white',
92+
raised: 'palette.white',
93+
recessed: 'neutralHue.100',
94+
subtle: 'neutralHue.100',
95+
emphasis: 'neutralHue.700',
96+
primary: 'primaryHue.100',
97+
success: 'successHue.100',
98+
warning: 'warningHue.100',
99+
danger: 'dangerHue.100',
100+
primaryEmphasis: 'primaryHue.700',
101+
successEmphasis: 'successHue.700',
102+
warningEmphasis: 'warningHue.700',
103+
dangerEmphasis: 'dangerHue.700'
62104
},
63105
border: {
64-
default: 'neutralHue.400'
106+
default: 'neutralHue.300',
107+
emphasis: 'neutralHue.600',
108+
subtle: 'neutralHue.200',
109+
success: 'successHue.300',
110+
warning: 'warningHue.300',
111+
danger: 'dangerHue.300',
112+
primaryEmphasis: 'primaryHue.700',
113+
successEmphasis: 'successHue.700',
114+
warningEmphasis: 'warningHue.700',
115+
dangerEmphasis: 'dangerHue.700'
65116
},
66117
foreground: {
67-
default: 'neutralHue.900'
118+
default: 'neutralHue.900',
119+
subtle: 'neutralHue.700',
120+
onEmphasis: 'palette.white',
121+
primary: 'primaryHue.700',
122+
success: 'successHue.700',
123+
warning: 'warningHue.700',
124+
danger: 'dangerHue.700',
125+
successEmphasis: 'successHue.900',
126+
warningEmphasis: 'warningHue.900',
127+
dangerEmphasis: 'dangerHue.900'
68128
}
69129
}
70130
}

‎packages/theming/src/utils/getColor.spec.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -306,7 +306,7 @@ describe('getColor', () => {
306306
light: { offset: 0, transparency: 0 },
307307
dark: { offset: -100, transparency: 0 }
308308
});
309-
const expected = mode === 'dark' ? PALETTE.grey[600] : PALETTE.grey[400];
309+
const expected = mode === 'dark' ? PALETTE.grey[700] : PALETTE.grey[300];
310310

311311
expect(color).toBe(expected);
312312
}

0 commit comments

Comments
 (0)