Skip to content

Commit 5118572

Browse files
author
Aleksandra Sikora
committed
feat(@theme-ui/presets): add preset-sketchy
1 parent b64189d commit 5118572

File tree

9 files changed

+357
-0
lines changed

9 files changed

+357
-0
lines changed

‎CHANGELOG.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
- Adjust media query sort logic #600
88
- Fixed link to Gatsby Plugin page in `getting-started` page. Issue #602
99
- Fix broken base-preset link on `theming` page
10+
- Add `@theme-ui/preset-sketchy`
1011

1112
## v0.3.0 2020-01-22
1213

‎packages/preset-sketchy/README.md

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
# [@theme-ui/preset-sketchy](https://theme-ui.com/presets/sketchy)
2+
3+
Theme UI includes `@theme-ui/preset-sketchy` which can be used as an example or
4+
starting point for extending your own themes.
5+
6+
```sh
7+
npm i @theme-ui/preset-sketchy
8+
```
9+
10+
```jsx
11+
// example theme
12+
import theme from '@theme-ui/preset-sketchy'
13+
14+
export default {
15+
...theme,
16+
styles: {
17+
...theme,
18+
},
19+
}
20+
```
21+
22+
This preset uses _Architects Daughter_ font, so you need to copy this code into the `<head>` of your HTML document:
23+
24+
<link
25+
rel="stylesheet"
26+
href="https://fonts.googleapis.com/css?family=Architects+Daughter"
27+
/>
28+
29+
[See all built-in presets][demo]
30+
31+
## Contributing
32+
33+
We'd love to have more presets added to the Theme UI project.
34+
If you'd like to add a new preset or improve upon the existing ones, please open an [issue][] or [pull request][].
35+
36+
[issue]: https://github.com/system-ui/theme-ui/issues
37+
[pull request]: https://github.com/system-ui/theme-ui/pulls
38+
[demo]: https://theme-ui.com/demo

‎packages/preset-sketchy/babel.config.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
module.exports = require('../../babel.config')

‎packages/preset-sketchy/package.json

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"name": "@theme-ui/preset-sketchy",
3+
"version": "0.4.0-alpha.1",
4+
"main": "dist/index.js",
5+
"module": "dist/index.esm.js",
6+
"types": "dist/index.d.ts",
7+
"source": "src/index.ts",
8+
"author": "Aleksandra Sikora",
9+
"license": "MIT",
10+
"scripts": {
11+
"prepare": "microbundle --no-compress",
12+
"watch": "microbundle watch --no-compress"
13+
},
14+
"publishConfig": {
15+
"access": "public"
16+
}
17+
}

‎packages/preset-sketchy/src/index.ts

Lines changed: 294 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,294 @@
1+
import { Theme, SystemStyleObject } from '@theme-ui/css'
2+
3+
export interface ThemeSketchy extends Theme {
4+
cards: SystemStyleObject
5+
links: SystemStyleObject
6+
forms: Record<string, SystemStyleObject>
7+
badges: SystemStyleObject
8+
alerts: SystemStyleObject
9+
messages: SystemStyleObject
10+
}
11+
12+
const defaultBorderStyles: SystemStyleObject = {
13+
border: 'thick',
14+
color: 'text',
15+
borderRadius: 'sketchy0',
16+
}
17+
18+
const buttonStyles = {
19+
...defaultBorderStyles,
20+
bg: 'muted',
21+
boxShadow: 'default',
22+
fontFamily: 'inherit',
23+
'&:hover': {
24+
boxShadow: 'hover',
25+
},
26+
}
27+
28+
const formStyles: SystemStyleObject = {
29+
borderRadius: 'sketchy3',
30+
borderColor: 'text',
31+
fontFamily: 'inherit',
32+
'&:focus': {
33+
boxShadow: 'outline',
34+
outline: 'none',
35+
},
36+
}
37+
38+
const theme: ThemeSketchy = {
39+
colors: {
40+
text: '#000200',
41+
background: '#FAFAF9',
42+
muted: 'rgba(0,0,0,.1)',
43+
primary: '#F25F5C',
44+
primaryDark: '#B51916',
45+
primaryLight: '#FCBAB1',
46+
blue: '#B6DEE2',
47+
blueDark: '#247BA0',
48+
greenDark: '#2D5948',
49+
green: '#B2E4DC',
50+
yellowDark: '#FFDA3A',
51+
yellow: '#FCF5C7',
52+
},
53+
fonts: {
54+
body:
55+
'"Architects Daughter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
56+
heading: 'inherit',
57+
monospace: 'Menlo, monospace',
58+
},
59+
fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72],
60+
sizes: {
61+
container: 800,
62+
},
63+
lineHeights: {
64+
body: 1.5,
65+
heading: 1.25,
66+
},
67+
radii: {
68+
sketchy0: '225px 25px 225px / 25px 225px',
69+
sketchy1: '15px 255px 15px / 225px 15px',
70+
sketchy2: '10px 125px 20px / 205px 25px',
71+
sketchy3: '225px 15px 15px / 15px 225px',
72+
sketchy4: '80px 15px 105px / 25px 250px',
73+
circle: '200px 185px 160px / 195px 160px',
74+
},
75+
borders: {
76+
thick: '2px solid var(--theme-ui-colors-text, black)',
77+
thin: '1px solid var(--theme-ui-colors-text, black)',
78+
},
79+
shadows: {
80+
outline: '0 0 0px 1px black rgba(0,0,0,.4)',
81+
default: '15px 24px 25px -18px rgba(0,0,0,.4)',
82+
hover: '2px 8px 10px -6px rgba(0,0,0,.4)',
83+
},
84+
styles: {
85+
root: {
86+
fontFamily: 'body',
87+
lineHeight: 'body',
88+
},
89+
a: {
90+
color: 'primary',
91+
'&:hover': {
92+
color: 'primaryDark',
93+
},
94+
},
95+
pre: {
96+
fontFamily: 'monospace',
97+
fontSize: 1,
98+
p: 3,
99+
color: 'text',
100+
bg: 'muted',
101+
overflow: 'auto',
102+
},
103+
code: {
104+
fontFamily: 'monospace',
105+
fontSize: 1,
106+
},
107+
inlineCode: {
108+
fontFamily: 'monospace',
109+
color: 'blueDark',
110+
},
111+
table: {
112+
borderCollapse: 'separate',
113+
borderSpacing: 0,
114+
},
115+
th: {
116+
border: 'thick',
117+
borderRadius: 'sketchy3',
118+
borderBottomWidth: '1px',
119+
p: 2,
120+
},
121+
td: {
122+
border: 'thick',
123+
borderRadius: 'sketchy1',
124+
p: 2,
125+
},
126+
hr: {
127+
border: 0,
128+
borderBottom: 'thin',
129+
},
130+
img: {
131+
maxWidth: '100%',
132+
},
133+
},
134+
buttons: {
135+
primary: buttonStyles,
136+
danger: {
137+
...buttonStyles,
138+
borderColor: 'primary',
139+
backgroundColor: 'primaryLight',
140+
},
141+
info: {
142+
...buttonStyles,
143+
borderColor: 'blueDark',
144+
backgroundColor: 'blue',
145+
},
146+
warning: {
147+
...buttonStyles,
148+
borderColor: 'yellowDark',
149+
backgroundColor: 'yellow',
150+
},
151+
success: {
152+
...buttonStyles,
153+
borderColor: 'greenDark',
154+
backgroundColor: 'green',
155+
},
156+
},
157+
cards: {
158+
primary: {
159+
color: 'text',
160+
borderRadius: 'sketchy1',
161+
boxShadow: 'default',
162+
border: 'thick',
163+
fontFamily: 'inherit',
164+
},
165+
},
166+
forms: {
167+
input: formStyles,
168+
select: formStyles,
169+
textarea: formStyles,
170+
slider: {
171+
bg: 'muted',
172+
},
173+
radio: {
174+
bg: 'transparent',
175+
border: 'thin',
176+
borderRadius: 'circle',
177+
...{
178+
'input:focus ~ &': {
179+
bg: 'transparent',
180+
border: 'thick',
181+
},
182+
'> path': {
183+
fill: 'none',
184+
d: '',
185+
},
186+
'input:checked ~ &': {
187+
'> path': {
188+
fill: 'text',
189+
d:
190+
'path("M 10.652237623048844 7.578611366838201 C 11.6115227800823 7.22981180626388, 13.889540717124019 6.621252514969635, 15.006068983724713 7.026960398489625 C 16.122597250325406 7.432668282009615, 17.24515580522389 8.872089685429708, 17.35140722265301 10.01285866795814 C 17.457658640082126 11.153627650486571, 16.03912316416566 12.76488553177375, 15.643577488299421 13.871574293660212 C 15.248031812433185 14.978263055546673, 15.70404673710284 15.989337062262969, 14.978133167455589 16.65299123927691 C 14.252219597808338 17.316645416290854, 12.610153195677707 17.94949960782212, 11.288096070415921 17.85349935574386 C 9.966038945154136 17.7574991036656, 7.781697843868845 17.274206036451343, 7.045790415884869 16.07698972680735 C 6.309882987900893 14.879773417163358, 6.667167006900895 11.870389393142492, 6.8726515025120625 10.670201497879903 C 7.07813599812323 9.470013602617314, 7.509354351285175 9.623932126594248, 8.278697389551876 8.87586235523182 C 9.048040427818577 8.127792583869393, 10.800397347992876 6.511149736417917, 11.488709732112266 6.181782869705334 C 12.177022116231656 5.85241600299275, 12.362948941900267 6.800560104746367, 12.408571694268218 6.899661154956319 M 13.086326549703468 6.334372159562634 C 14.045726949181018 6.585576587705861, 14.02815772607352 8.130937315240134, 14.793913170925268 8.926035996194482 C 15.559668615777017 9.72113467714883, 17.46622859426858 9.94150723842843, 17.680859218813964 11.104964245288727 C 17.89548984335935 12.268421252149023, 16.762624629428604 14.78314657395292, 16.081696918197572 15.906778037356261 C 15.400769206966542 17.030409500759603, 14.496037988376179 17.905210314899808, 13.59529295142778 17.846753025708782 C 12.694547914479381 17.788295736517757, 11.830922537359877 15.961407961261365, 10.677226696507184 15.556034302210117 C 9.52353085565449 15.150660643158869, 7.46854225335996 16.452930254273024, 6.673117906311619 15.414511071401293 C 5.877693559263278 14.376091888529562, 5.510665357146541 10.851337607072976, 5.904680614217136 9.325519204979734 C 6.29869587128773 7.799700802886492, 8.005394513273384 6.6233206129496365, 9.037209448735185 6.2596006588418405 C 10.069024384196986 5.8958807047340445, 11.66025806903873 7.303422381948635, 12.095570226987942 7.143199480332959 C 12.530882384937154 6.982976578717284, 11.801551634336983 5.127314121350047, 11.649082396430458 5.298263249147787")',
191+
},
192+
},
193+
},
194+
},
195+
checkbox: {
196+
color: 'text',
197+
borderRadius: 'sketchy1',
198+
border: 'thin',
199+
...{
200+
'> path': {
201+
d: "path('')",
202+
},
203+
'input:checked ~ &': {
204+
'> path': {
205+
fill: 'text',
206+
strokeWidth: 1,
207+
d:
208+
'path("M 4.919908 9.946009 C 6.78687 12.35396, 11.267954 19.167892, 11.244466681494456 17.627486 M 4.769042 9.779518 C 8.798076303434634 11.73868628417444, 10.99146627954846 17.425105, 10.675698 20.863192 M 9.268309 20.523752 C 20.141903 2.909804, 34.051755 -1.122666, 30.36023 -3.770398 M 9.805838 17.521756 C 20.949272 9.844316, 22.870222 0.34781, 29.66209 -4.694285")',
209+
},
210+
},
211+
'input:focus ~ &': {
212+
background: 'transparent',
213+
border: 'thick',
214+
'> path': {
215+
strokeWidth: 2,
216+
},
217+
},
218+
},
219+
},
220+
},
221+
links: {
222+
color: 'primary',
223+
nav: {
224+
borderRadius: 'sketchy1',
225+
textDecoration: 'none',
226+
px: 2,
227+
py: 1,
228+
textTransform: 'uppercase',
229+
letterSpacing: '0.2em',
230+
'&:hover': {
231+
bg: 'primaryLight',
232+
},
233+
},
234+
},
235+
badges: {
236+
primary: {
237+
borderRadius: 'sketchy1',
238+
color: 'background',
239+
bg: 'primary',
240+
},
241+
outline: {
242+
borderRadius: 'sketchy1',
243+
color: 'primary',
244+
bg: 'transparent',
245+
boxShadow: 'inset 0 0 0 1px',
246+
},
247+
},
248+
alerts: {
249+
danger: {
250+
...defaultBorderStyles,
251+
borderColor: 'primary',
252+
backgroundColor: 'primaryLight',
253+
},
254+
info: {
255+
...defaultBorderStyles,
256+
borderColor: 'blueDark',
257+
backgroundColor: 'blue',
258+
},
259+
warning: {
260+
...defaultBorderStyles,
261+
borderColor: 'yellowDark',
262+
backgroundColor: 'yellow',
263+
},
264+
success: {
265+
...defaultBorderStyles,
266+
borderColor: 'greenDark',
267+
backgroundColor: 'green',
268+
},
269+
},
270+
messages: {
271+
danger: {
272+
...defaultBorderStyles,
273+
borderColor: 'primary',
274+
backgroundColor: 'primaryLight',
275+
},
276+
info: {
277+
...defaultBorderStyles,
278+
borderColor: 'blueDark',
279+
backgroundColor: 'blue',
280+
},
281+
warning: {
282+
...defaultBorderStyles,
283+
borderColor: 'yellowDark',
284+
backgroundColor: 'yellow',
285+
},
286+
success: {
287+
...defaultBorderStyles,
288+
borderColor: 'greenDark',
289+
backgroundColor: 'green',
290+
},
291+
},
292+
}
293+
294+
export default theme

‎packages/preset-sketchy/tsconfig.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"extends": "../../tsconfig.json"
3+
}

‎packages/presets/README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ Currently, the following presets are available for use:
3636
- [`bootstrap`](https://theme-ui.com/presets/bootstrap)
3737
- [`bulma`](https://theme-ui.com/presets/bulma) (WIP)
3838
- [`tailwind`](https://theme-ui.com/presets/tailwind)
39+
- `sketchy`: [Demo webiste](https://themeui-sketchy.netlify.app/), [Theme UI docs](https://theme-ui.com/presets/sketchy)
3940

4041
## Contributing
4142

‎packages/presets/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
"@theme-ui/preset-future": "^0.4.0-alpha.0",
2222
"@theme-ui/preset-polaris": "^0.4.0-alpha.0",
2323
"@theme-ui/preset-roboto": "^0.4.0-alpha.0",
24+
"@theme-ui/preset-sketchy": "^0.4.0-alpha.1",
2425
"@theme-ui/preset-swiss": "^0.4.0-alpha.1",
2526
"@theme-ui/preset-system": "^0.4.0-alpha.1",
2627
"@theme-ui/preset-tailwind": "^0.4.0-alpha.1",

‎packages/presets/src/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,3 +12,4 @@ export { default as bootstrap } from '@theme-ui/preset-bootstrap'
1212
export { default as bulma } from '@theme-ui/preset-bulma'
1313
export { default as polaris } from '@theme-ui/preset-polaris'
1414
export { default as tailwind } from '@theme-ui/preset-tailwind'
15+
export { default as sketchy } from '@theme-ui/preset-sketchy'

0 commit comments

Comments
 (0)