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

Commit 0f19757

Browse files
olizillaolizilla
committed
Add css and generator
1 parent df5d6b9 commit 0f19757

File tree

4 files changed

+276
-1
lines changed

4 files changed

+276
-1
lines changed

‎build/css.js

+81
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
console.time('Build css total')
2+
3+
const fs = require('fs')
4+
const path = require('path')
5+
const theme = require('../theme.json')
6+
const outputPath = path.resolve(__dirname, '../ipfs.css')
7+
8+
const fontFamily = [
9+
`.sans-serif { font-family: ${theme.fonts[0]}; }`,
10+
`.sans-serif-alt: { font-family: ${theme.fonts[1]}; }`,
11+
`.monospace: { font-family: ${theme.fonts[2]}; }`
12+
]
13+
14+
const fontSize = theme.fontSizes.map((size, i) => {
15+
return `.fs-${i}: { font-size: ${size}px; }`
16+
})
17+
18+
const color = Object.keys(theme.colors).map(name => {
19+
return `.${name} { color: ${theme.colors[name]}; }`
20+
})
21+
22+
const bg = Object.keys(theme.colors).map(name => {
23+
return `.bg-${name} { background-color: ${theme.colors[name]}; }`
24+
})
25+
26+
const border = Object.keys(theme.colors).map(name => {
27+
return `.border-${name}: { border-color: ${theme.colors[name]}; }`
28+
})
29+
30+
const spacers = [
31+
{dir: '', suffix: ['']},
32+
{dir: 'x', suffix: ['-left', '-right']},
33+
{dir: 'y', suffix: ['-top', '-bottom']},
34+
{dir: 't', suffix: ['-top']},
35+
{dir: 'l', suffix: ['-left']},
36+
{dir: 'b', suffix: ['-bottom']},
37+
{dir: 'r', suffix: ['-right']}
38+
]
39+
40+
const declaration = (type, suffix, size) => suffix.map(s => `${type}${s}: ${size}px;`).join(' ')
41+
42+
const padding = theme.space.map((size, i) => {
43+
return spacers.map(({dir, suffix}) => {
44+
return `.p${dir}${i} { ${declaration('padding', suffix, size)} }`
45+
})
46+
}).reduce((a, b) => a.concat(b))
47+
48+
const margin = theme.space.map((size, i) => {
49+
return spacers.map(({dir, suffix}) => {
50+
return `.m${dir}${i} { ${declaration('margin', suffix, size)} }`
51+
})
52+
}).reduce((a, b) => a.concat(b))
53+
54+
/* eslint-disable */
55+
const lines = [
56+
[`
57+
58+
/* _| _ \ __| __|
59+
| __/ _| \__ \ _| (_-< (_-<
60+
___| _| _| ____/ _) \__| ___/ ___/
61+
62+
See: https://github.com/ipfs-shipyard/ipfs-ui-style-guide/blob/master/theme.json
63+
*/
64+
`],
65+
color,
66+
bg,
67+
border,
68+
['\n/* ---- font ----- */'],
69+
fontFamily,
70+
fontSize,
71+
['\n/* ---- space ----- */'],
72+
margin,
73+
padding
74+
]
75+
/* eslint-enable */
76+
77+
const css = lines.reduce((a, b) => a.concat(b)).join('\n')
78+
79+
fs.writeFileSync(outputPath, css)
80+
81+
console.timeEnd('Build css total')

‎ipfs.css

+192
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,192 @@
1+
2+
3+
/* _| _ __| __|
4+
| __/ _| __ _| (_-< (_-<
5+
___| _| _| ____/ _) __| ___/ ___/
6+
7+
See: https://github.com/ipfs-shipyard/ipfs-ui-style-guide/blob/master/theme.json
8+
*/
9+
10+
.navy { color: #0b3a53; }
11+
.navy-muted { color: #244e66; }
12+
.aqua { color: #69c4cd; }
13+
.aqua-muted { color: #9ad4db; }
14+
.gray { color: #b7bbc8; }
15+
.gray-muted { color: #d9dbe2; }
16+
.charcoal { color: #34373f; }
17+
.charcoal-muted { color: #7f8491; }
18+
.red { color: #ea5037; }
19+
.red-muted { color: #f36149; }
20+
.yellow { color: #f39021; }
21+
.yellow-muted { color: #f9a13e; }
22+
.teal { color: #3e9096; }
23+
.teal-muted { color: #439a9d; }
24+
.green { color: #0cb892; }
25+
.green-muted { color: #0aca9f; }
26+
.snow { color: #edf0f4; }
27+
.snow-muted { color: #f7f8fa; }
28+
.bg-navy { background-color: #0b3a53; }
29+
.bg-navy-muted { background-color: #244e66; }
30+
.bg-aqua { background-color: #69c4cd; }
31+
.bg-aqua-muted { background-color: #9ad4db; }
32+
.bg-gray { background-color: #b7bbc8; }
33+
.bg-gray-muted { background-color: #d9dbe2; }
34+
.bg-charcoal { background-color: #34373f; }
35+
.bg-charcoal-muted { background-color: #7f8491; }
36+
.bg-red { background-color: #ea5037; }
37+
.bg-red-muted { background-color: #f36149; }
38+
.bg-yellow { background-color: #f39021; }
39+
.bg-yellow-muted { background-color: #f9a13e; }
40+
.bg-teal { background-color: #3e9096; }
41+
.bg-teal-muted { background-color: #439a9d; }
42+
.bg-green { background-color: #0cb892; }
43+
.bg-green-muted { background-color: #0aca9f; }
44+
.bg-snow { background-color: #edf0f4; }
45+
.bg-snow-muted { background-color: #f7f8fa; }
46+
.border-navy: { border-color: #0b3a53; }
47+
.border-navy-muted: { border-color: #244e66; }
48+
.border-aqua: { border-color: #69c4cd; }
49+
.border-aqua-muted: { border-color: #9ad4db; }
50+
.border-gray: { border-color: #b7bbc8; }
51+
.border-gray-muted: { border-color: #d9dbe2; }
52+
.border-charcoal: { border-color: #34373f; }
53+
.border-charcoal-muted: { border-color: #7f8491; }
54+
.border-red: { border-color: #ea5037; }
55+
.border-red-muted: { border-color: #f36149; }
56+
.border-yellow: { border-color: #f39021; }
57+
.border-yellow-muted: { border-color: #f9a13e; }
58+
.border-teal: { border-color: #3e9096; }
59+
.border-teal-muted: { border-color: #439a9d; }
60+
.border-green: { border-color: #0cb892; }
61+
.border-green-muted: { border-color: #0aca9f; }
62+
.border-snow: { border-color: #edf0f4; }
63+
.border-snow-muted: { border-color: #f7f8fa; }
64+
65+
/* ---- font ----- */
66+
.sans-serif { font-family: 'Inter UI', system-ui, sans-serif; }
67+
.sans-serif-alt: { font-family: 'Montserrat', 'Verdana', system-ui, sans-serif; }
68+
.monospace: { font-family: Consolas, monaco, monospace; }
69+
.fs-0: { font-size: 12px; }
70+
.fs-1: { font-size: 14px; }
71+
.fs-2: { font-size: 16px; }
72+
.fs-3: { font-size: 20px; }
73+
.fs-4: { font-size: 24px; }
74+
.fs-5: { font-size: 32px; }
75+
.fs-6: { font-size: 48px; }
76+
.fs-7: { font-size: 64px; }
77+
.fs-8: { font-size: 72px; }
78+
.fs-9: { font-size: 96px; }
79+
80+
/* ---- space ----- */
81+
.m0 { margin: 0px; }
82+
.mx0 { margin-left: 0px; margin-right: 0px; }
83+
.my0 { margin-top: 0px; margin-bottom: 0px; }
84+
.mt0 { margin-top: 0px; }
85+
.ml0 { margin-left: 0px; }
86+
.mb0 { margin-bottom: 0px; }
87+
.mr0 { margin-right: 0px; }
88+
.m1 { margin: 4px; }
89+
.mx1 { margin-left: 4px; margin-right: 4px; }
90+
.my1 { margin-top: 4px; margin-bottom: 4px; }
91+
.mt1 { margin-top: 4px; }
92+
.ml1 { margin-left: 4px; }
93+
.mb1 { margin-bottom: 4px; }
94+
.mr1 { margin-right: 4px; }
95+
.m2 { margin: 8px; }
96+
.mx2 { margin-left: 8px; margin-right: 8px; }
97+
.my2 { margin-top: 8px; margin-bottom: 8px; }
98+
.mt2 { margin-top: 8px; }
99+
.ml2 { margin-left: 8px; }
100+
.mb2 { margin-bottom: 8px; }
101+
.mr2 { margin-right: 8px; }
102+
.m3 { margin: 16px; }
103+
.mx3 { margin-left: 16px; margin-right: 16px; }
104+
.my3 { margin-top: 16px; margin-bottom: 16px; }
105+
.mt3 { margin-top: 16px; }
106+
.ml3 { margin-left: 16px; }
107+
.mb3 { margin-bottom: 16px; }
108+
.mr3 { margin-right: 16px; }
109+
.m4 { margin: 32px; }
110+
.mx4 { margin-left: 32px; margin-right: 32px; }
111+
.my4 { margin-top: 32px; margin-bottom: 32px; }
112+
.mt4 { margin-top: 32px; }
113+
.ml4 { margin-left: 32px; }
114+
.mb4 { margin-bottom: 32px; }
115+
.mr4 { margin-right: 32px; }
116+
.m5 { margin: 64px; }
117+
.mx5 { margin-left: 64px; margin-right: 64px; }
118+
.my5 { margin-top: 64px; margin-bottom: 64px; }
119+
.mt5 { margin-top: 64px; }
120+
.ml5 { margin-left: 64px; }
121+
.mb5 { margin-bottom: 64px; }
122+
.mr5 { margin-right: 64px; }
123+
.m6 { margin: 128px; }
124+
.mx6 { margin-left: 128px; margin-right: 128px; }
125+
.my6 { margin-top: 128px; margin-bottom: 128px; }
126+
.mt6 { margin-top: 128px; }
127+
.ml6 { margin-left: 128px; }
128+
.mb6 { margin-bottom: 128px; }
129+
.mr6 { margin-right: 128px; }
130+
.m7 { margin: 256px; }
131+
.mx7 { margin-left: 256px; margin-right: 256px; }
132+
.my7 { margin-top: 256px; margin-bottom: 256px; }
133+
.mt7 { margin-top: 256px; }
134+
.ml7 { margin-left: 256px; }
135+
.mb7 { margin-bottom: 256px; }
136+
.mr7 { margin-right: 256px; }
137+
.p0 { padding: 0px; }
138+
.px0 { padding-left: 0px; padding-right: 0px; }
139+
.py0 { padding-top: 0px; padding-bottom: 0px; }
140+
.pt0 { padding-top: 0px; }
141+
.pl0 { padding-left: 0px; }
142+
.pb0 { padding-bottom: 0px; }
143+
.pr0 { padding-right: 0px; }
144+
.p1 { padding: 4px; }
145+
.px1 { padding-left: 4px; padding-right: 4px; }
146+
.py1 { padding-top: 4px; padding-bottom: 4px; }
147+
.pt1 { padding-top: 4px; }
148+
.pl1 { padding-left: 4px; }
149+
.pb1 { padding-bottom: 4px; }
150+
.pr1 { padding-right: 4px; }
151+
.p2 { padding: 8px; }
152+
.px2 { padding-left: 8px; padding-right: 8px; }
153+
.py2 { padding-top: 8px; padding-bottom: 8px; }
154+
.pt2 { padding-top: 8px; }
155+
.pl2 { padding-left: 8px; }
156+
.pb2 { padding-bottom: 8px; }
157+
.pr2 { padding-right: 8px; }
158+
.p3 { padding: 16px; }
159+
.px3 { padding-left: 16px; padding-right: 16px; }
160+
.py3 { padding-top: 16px; padding-bottom: 16px; }
161+
.pt3 { padding-top: 16px; }
162+
.pl3 { padding-left: 16px; }
163+
.pb3 { padding-bottom: 16px; }
164+
.pr3 { padding-right: 16px; }
165+
.p4 { padding: 32px; }
166+
.px4 { padding-left: 32px; padding-right: 32px; }
167+
.py4 { padding-top: 32px; padding-bottom: 32px; }
168+
.pt4 { padding-top: 32px; }
169+
.pl4 { padding-left: 32px; }
170+
.pb4 { padding-bottom: 32px; }
171+
.pr4 { padding-right: 32px; }
172+
.p5 { padding: 64px; }
173+
.px5 { padding-left: 64px; padding-right: 64px; }
174+
.py5 { padding-top: 64px; padding-bottom: 64px; }
175+
.pt5 { padding-top: 64px; }
176+
.pl5 { padding-left: 64px; }
177+
.pb5 { padding-bottom: 64px; }
178+
.pr5 { padding-right: 64px; }
179+
.p6 { padding: 128px; }
180+
.px6 { padding-left: 128px; padding-right: 128px; }
181+
.py6 { padding-top: 128px; padding-bottom: 128px; }
182+
.pt6 { padding-top: 128px; }
183+
.pl6 { padding-left: 128px; }
184+
.pb6 { padding-bottom: 128px; }
185+
.pr6 { padding-right: 128px; }
186+
.p7 { padding: 256px; }
187+
.px7 { padding-left: 256px; padding-right: 256px; }
188+
.py7 { padding-top: 256px; padding-bottom: 256px; }
189+
.pt7 { padding-top: 256px; }
190+
.pl7 { padding-left: 256px; }
191+
.pb7 { padding-bottom: 256px; }
192+
.pr7 { padding-right: 256px; }

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
"clean": "rm -rf ./docs/*",
88
"build": "npm-run-all --serial clean --parallel build:*",
99
"build:html": "node build/html.js",
10+
"build:css": "node build/css.js",
1011
"build:fonts": "mkdir -p docs/fonts; rsync -a --exclude='MontserratAlt*' --exclude='*.woff' --exclude='*.eot' --exclude='*.otf' fonts/inter/docs/font-files/ fonts/montserrat/fonts/webfonts/ fonts/inter.css fonts/montserrat.css docs/fonts",
1112
"watch": "run-p watch:*",
1213
"watch:html": "nodemon -w theme.json -w components -w pages -e js,json,jsx -x npm run build:html",

‎theme.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
{
22
"fonts": [
33
"'Inter UI', system-ui, sans-serif",
4-
"'Montserrat', 'Verdana', system-ui, sans-serif"
4+
"'Montserrat', 'Verdana', system-ui, sans-serif",
5+
"Consolas, monaco, monospace"
56
],
67
"space": [
78
0,

0 commit comments

Comments
 (0)