Skip to content
This repository was archived by the owner on Jun 20, 2022. It is now read-only.

Commit a4591b1

Browse files
gregbergegregberge
authored
Merge pull request #159 from smooth-code/dark-mode
feat: add dark mode support
2 parents ea4c735 + bddd575 commit a4591b1

File tree

15 files changed

+530
-402
lines changed

15 files changed

+530
-402
lines changed

‎packages/shared/core/Card.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export const Card = createComponent({
1818
flex-direction: column;
1919
min-width: 0;
2020
word-wrap: break-word;
21-
background-color: ${th.color('white')(p)};
21+
background-color: ${th.color('lighter')(p)};
2222
background-clip: border-box;
2323
border: 0.0625rem solid;
2424
border-color: ${th.color('highlightBorder')(p)};
@@ -130,7 +130,7 @@ export const CardHeader = createComponent({
130130
padding: 0.75rem 1.25rem;
131131
margin-bottom: 0; /* Removes the default margin-bottom of <hN> */
132132
background-color: ${th.color('highlightBackground')(p)};
133-
border-bottom: 0.0625rem;
133+
border-bottom: 0.0625rem solid;
134134
border-bottom-color: ${th.color('highlightBorder')(p)};
135135
136136
&:first-child {
@@ -164,7 +164,7 @@ export const CardFooter = createComponent({
164164
return css`
165165
padding: 0.75rem 1.25rem;
166166
background-color: ${th.color('highlightBackground')(p)};
167-
border-top: 0.0625rem;
167+
border-top: 0.0625rem solid;
168168
border-top-color: ${th.color('highlightBorder')(p)};
169169
170170
&:last-child {

‎packages/shared/core/Menu.js‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export const Menu = createComponent({
3333
border: 0.0625rem solid;
3434
border-color: ${th.color('highlightBorder')(p)};
3535
font-family: ${th.font('base')(p)};
36-
background-color: ${th.color('white')(p)};
36+
background-color: ${th.color('lighter')(p)};
3737
border-radius: ${th.radius('base')(p)};
3838
padding: 0.5rem 0.25rem;
3939
z-index: 999;
@@ -86,7 +86,7 @@ export const MenuItem = createComponent({
8686
padding: 8rpx;
8787
border: 0;
8888
border-radius: ${th.radius('base')(p)};
89-
color: ${th.color('gray700')(p)};
89+
color: ${th.color('light700')(p)};
9090
font-size: 14rpx;
9191
display: block;
9292
width: 100%;
@@ -106,6 +106,16 @@ export const MenuItem = createComponent({
106106
outline: none;
107107
background-color: ${th.color('highlightBackground')(p)};
108108
}
109+
110+
&[disabled],
111+
&[aria-disabled='true'] {
112+
color: ${th.color('light500')(p)};
113+
cursor: default;
114+
115+
&:hover {
116+
background-color: transparent;
117+
}
118+
}
109119
`
110120
},
111121
},

‎packages/shared/core/Switch.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,7 @@ export const Switch = createComponent({
120120
border-radius: ${th.radius('34rpx')(p)};
121121
width: ${width};
122122
height: ${height};
123-
background-color: ${th.color('gray300')(p)};
123+
background-color: ${th.color('light300')(p)};
124124
overflow: hidden;
125125
cursor: pointer;
126126
border-width: ${th.borderWidth(`formControl.base`)(p)};
@@ -153,7 +153,7 @@ export const Switch = createComponent({
153153
154154
[data-switch-ball] {
155155
flex-shrink: 0;
156-
background-color: ${th.color('gray500')(p)};
156+
background-color: ${th.color('light500')(p)};
157157
border-radius: 50%;
158158
width: ${ballSize};
159159
height: ${ballSize};

‎packages/shared/core/theme/common/color.js‎

Lines changed: 29 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,11 +36,38 @@ export const colors = {
3636
light: th.color('gray100'),
3737
dark: th.color('gray800'),
3838

39-
highlightBackground: p => transparentize(0.96, th.color('black')(p)),
40-
highlightBorder: p => transparentize(0.875, th.color('black')(p)),
39+
lighter: th.color('white'),
40+
light100: th.color('gray100'),
41+
light200: th.color('gray200'),
42+
light300: th.color('gray300'),
43+
light400: th.color('gray400'),
44+
light500: th.color('gray500'),
45+
light600: th.color('gray600'),
46+
light700: th.color('gray700'),
47+
light800: th.color('gray800'),
48+
light900: th.color('gray900'),
49+
darker: th.color('black'),
50+
highlightBackground: p => transparentize(0.96, th.color('darker')(p)),
51+
highlightBorder: p => transparentize(0.875, th.color('darker')(p)),
4152

4253
form: {
4354
valid: th.color('success'),
4455
invalid: th.color('danger'),
4556
},
57+
58+
modes: {
59+
dark: {
60+
lighter: th.color('black'),
61+
darker: th.color('white'),
62+
light100: th.color('gray900'),
63+
light200: th.color('gray800'),
64+
light300: th.color('gray700'),
65+
light400: th.color('gray600'),
66+
light500: th.color('gray500'),
67+
light600: th.color('gray400'),
68+
light700: th.color('gray300'),
69+
light800: th.color('gray200'),
70+
light900: th.color('gray100'),
71+
},
72+
},
4673
}

‎packages/shared/core/theme/form.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -24,13 +24,13 @@ export const space = {
2424
export const colors = {
2525
...baseColors,
2626
formControl: {
27-
background: th.color('white'),
28-
border: th.color('gray400'),
29-
text: th.color('gray900'),
30-
placeholder: th.color('gray600'),
27+
background: th.color('lighter'),
28+
border: th.color('light400'),
29+
text: th.color('light900'),
30+
placeholder: th.color('light600'),
3131
disabled: {
32-
background: th.color('gray100'),
33-
text: th.color('gray900'),
32+
background: th.color('light100'),
33+
text: th.color('light900'),
3434
},
3535
},
3636
}

‎packages/shared/core/util/colors.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { th } from '@xstyled/system'
33

44
export const colorLevel = (color, level) => p => {
55
const colorInterval = p.theme.colorInterval || 0.08
6-
const baseColor = level > 0 ? th.color('black')(p) : th.color('white')(p)
6+
const baseColor = level > 0 ? th.color('darker')(p) : th.color('lighter')(p)
77
const absLevel = Math.abs(level)
88
return mix(absLevel * colorInterval, baseColor, color)
99
}

‎packages/shared/core/util/factories.js‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,13 +30,25 @@ export function createInnerComponent({ name, render, theme = {} }) {
3030
return InnerComponent
3131
}
3232

33+
function computeTheme(baseTheme, customTheme) {
34+
const theme = mergeClone(baseTheme, customTheme)
35+
if (!theme.colors || !theme.colors.modes) return baseTheme
36+
return {
37+
...theme,
38+
colors: {
39+
...theme.colors,
40+
...theme.colors.modes[theme.colorMode || theme.__colorMode],
41+
},
42+
}
43+
}
44+
3345
export function createComponent({ name, render, theme = {}, propTypes }) {
3446
theme = Array.isArray(theme) ? mergeClone(...theme) : theme
3547
const InnerComponent = createInnerComponent({ name, render, theme })
3648
const Component = styled(InnerComponent)`
3749
${p => {
3850
const cache = getThemeCache(p.theme)
39-
cache[name] = cache[name] || mergeClone(theme, p.theme)
51+
cache[name] = cache[name] || computeTheme(theme, p.theme)
4052
const props = { ...p, theme: cache[name] }
4153
const componentStyle = props.theme.components
4254
? props.theme.components[name]

‎resources/smooth-ui-logo.sketch‎

-11.6 KB
Binary file not shown.

‎website/gatsby-config.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,9 @@ module.exports = {
1313
menu: ['Getting Started', 'Customization', 'Components', 'Advanced'],
1414
nav: [{ title: 'Docs', url: '/docs/' }],
1515
codeFundProperty: 430,
16+
theme: {
17+
useCustomProperties: false,
18+
},
1619
},
1720
},
1821
{

‎website/package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,9 @@
1818
"react-dom": "^16.8.6",
1919
"reakit": "^1.0.0-beta.7",
2020
"smooth-code-landers": "^1.3.2",
21-
"smooth-doc": "^2.7.1",
22-
"smooth-ui-em-next": "npm:@smooth-ui/core-em@latest",
23-
"smooth-ui-sc-next": "npm:@smooth-ui/core-sc@latest",
21+
"smooth-doc": "^2.12.3",
22+
"smooth-ui-em-next": "npm:@smooth-ui/core-em@canary",
23+
"smooth-ui-sc-next": "npm:@smooth-ui/core-sc@canary",
2424
"styled-components": "^4.2.0"
2525
}
2626
}

0 commit comments

Comments
 (0)