@gospore/theme 1.0.74 → 1.0.75
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +4 -3
- package/src/Theme.vue +61 -0
- package/src/base.less +255 -0
- package/src/borders.less +5 -0
- package/src/colors.js +49 -0
- package/src/colors.less +236 -0
- package/src/component-bundle.less +8 -0
- package/src/elevation.less +26 -0
- package/src/fonts.less +30 -0
- package/src/grid.less +2 -0
- package/src/index.js +4 -0
- package/src/index.less +10 -0
- package/src/layering.less +10 -0
- package/src/reset.less +25 -0
- package/src/sizing.less +17 -0
- package/src/styles.less +176 -0
- package/src/tables.less +0 -0
- package/src/transitions.less +4 -0
package/package.json
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gospore/theme",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.75",
|
|
4
4
|
"description": "",
|
|
5
5
|
"author": "Gospore",
|
|
6
6
|
"files": [
|
|
7
|
-
"dist"
|
|
7
|
+
"dist",
|
|
8
|
+
"src"
|
|
8
9
|
],
|
|
9
10
|
"main": "./dist/theme.umd.js",
|
|
10
11
|
"module": "./dist/theme.es.js",
|
|
@@ -24,5 +25,5 @@
|
|
|
24
25
|
"@vitejs/plugin-vue": "^2.2.2",
|
|
25
26
|
"vite": "^2.8.4"
|
|
26
27
|
},
|
|
27
|
-
"gitHead": "
|
|
28
|
+
"gitHead": "e550d83c1a91b3cf9b2911f0440bf4bc244e20e6"
|
|
28
29
|
}
|
package/src/Theme.vue
ADDED
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="theme">
|
|
3
|
+
<slot />
|
|
4
|
+
</div>
|
|
5
|
+
</template>
|
|
6
|
+
|
|
7
|
+
<script>
|
|
8
|
+
// Global imports - Accessibility & Stylesheets
|
|
9
|
+
import "what-input";
|
|
10
|
+
import "./index.less";
|
|
11
|
+
|
|
12
|
+
export default {
|
|
13
|
+
// eslint-disable-next-line vue/multi-word-component-names
|
|
14
|
+
name: "Theme",
|
|
15
|
+
provide() {
|
|
16
|
+
return {
|
|
17
|
+
theme: this.theme,
|
|
18
|
+
};
|
|
19
|
+
},
|
|
20
|
+
data() {
|
|
21
|
+
return {
|
|
22
|
+
theme: {
|
|
23
|
+
darkMode: window.matchMedia("(prefers-color-scheme: dark)").matches,
|
|
24
|
+
},
|
|
25
|
+
};
|
|
26
|
+
},
|
|
27
|
+
watch: {
|
|
28
|
+
theme: {
|
|
29
|
+
handler() {
|
|
30
|
+
document.documentElement.setAttribute("dark-mode", this.theme.darkMode);
|
|
31
|
+
},
|
|
32
|
+
deep: true,
|
|
33
|
+
immediate: true,
|
|
34
|
+
},
|
|
35
|
+
},
|
|
36
|
+
created() {
|
|
37
|
+
window
|
|
38
|
+
.matchMedia("(prefers-color-scheme: dark)")
|
|
39
|
+
.addEventListener("change", this.updateDarkMode);
|
|
40
|
+
|
|
41
|
+
// Set the color-scheme meta tag.
|
|
42
|
+
var colorSchemeMeta = document.createElement("meta");
|
|
43
|
+
colorSchemeMeta.name = "color-scheme";
|
|
44
|
+
colorSchemeMeta.setAttribute("content", "light dark");
|
|
45
|
+
document.getElementsByTagName("head")[0].appendChild(colorSchemeMeta);
|
|
46
|
+
},
|
|
47
|
+
beforeUnmount() {
|
|
48
|
+
window
|
|
49
|
+
.matchMedia("(prefers-color-scheme: dark)")
|
|
50
|
+
.removeEventListener("change", this.updateDarkMode);
|
|
51
|
+
},
|
|
52
|
+
methods: {
|
|
53
|
+
updateDarkMode(event) {
|
|
54
|
+
if (!event) {
|
|
55
|
+
return;
|
|
56
|
+
}
|
|
57
|
+
this.theme.darkMode = event.matches;
|
|
58
|
+
},
|
|
59
|
+
},
|
|
60
|
+
};
|
|
61
|
+
</script>
|
package/src/base.less
ADDED
|
@@ -0,0 +1,255 @@
|
|
|
1
|
+
@import "./fonts.less";
|
|
2
|
+
@import "./grid.less";
|
|
3
|
+
|
|
4
|
+
@link-text-decoration: {
|
|
5
|
+
default: none;
|
|
6
|
+
hover: underline;
|
|
7
|
+
};
|
|
8
|
+
|
|
9
|
+
body,
|
|
10
|
+
html,
|
|
11
|
+
#app {
|
|
12
|
+
height: 100%;
|
|
13
|
+
width: 100%;
|
|
14
|
+
}
|
|
15
|
+
body {
|
|
16
|
+
background-color: @background-color[light];
|
|
17
|
+
color: @text-color[light];
|
|
18
|
+
font-family: @font-family;
|
|
19
|
+
font-size: @font-size-default;
|
|
20
|
+
font-style: normal;
|
|
21
|
+
font-weight: @font-weight-regular;
|
|
22
|
+
line-height: 23px;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
input,
|
|
26
|
+
select,
|
|
27
|
+
textarea,
|
|
28
|
+
button {
|
|
29
|
+
font-family: inherit;
|
|
30
|
+
font-size: inherit;
|
|
31
|
+
font-weight: inherit;
|
|
32
|
+
line-height: 25px;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
// Default margins
|
|
36
|
+
p,
|
|
37
|
+
ul,
|
|
38
|
+
ol,
|
|
39
|
+
dl,
|
|
40
|
+
h1,
|
|
41
|
+
h2,
|
|
42
|
+
h3,
|
|
43
|
+
h4,
|
|
44
|
+
h5,
|
|
45
|
+
h6,
|
|
46
|
+
blockquote,
|
|
47
|
+
pre,
|
|
48
|
+
form,
|
|
49
|
+
table {
|
|
50
|
+
margin: (@gridSize * 2px) 0 0 0;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
// Links
|
|
54
|
+
a {
|
|
55
|
+
color: #link-color.default[light];
|
|
56
|
+
text-decoration: @link-text-decoration[default];
|
|
57
|
+
border-radius: @borderWidth;
|
|
58
|
+
cursor: pointer;
|
|
59
|
+
|
|
60
|
+
&:hover {
|
|
61
|
+
color: #link-color.hover[light];
|
|
62
|
+
text-decoration: @link-text-decoration[hover];
|
|
63
|
+
}
|
|
64
|
+
&:active {
|
|
65
|
+
color: #link-color.active[light];
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
// Headings
|
|
70
|
+
h1 {
|
|
71
|
+
.heading-800;
|
|
72
|
+
}
|
|
73
|
+
h2 {
|
|
74
|
+
.heading-700;
|
|
75
|
+
}
|
|
76
|
+
h3 {
|
|
77
|
+
.heading-600;
|
|
78
|
+
}
|
|
79
|
+
h4 {
|
|
80
|
+
.heading-500;
|
|
81
|
+
}
|
|
82
|
+
h5 {
|
|
83
|
+
.heading-400;
|
|
84
|
+
}
|
|
85
|
+
h6 {
|
|
86
|
+
.heading-300;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
hr {
|
|
90
|
+
background-color: @horizontal-rule-color[light];
|
|
91
|
+
height: 2px;
|
|
92
|
+
border-style: none;
|
|
93
|
+
margin: 40px 0;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
// Lists
|
|
97
|
+
ul,
|
|
98
|
+
ol,
|
|
99
|
+
dl {
|
|
100
|
+
padding-left: (@gridSize * 5px);
|
|
101
|
+
}
|
|
102
|
+
dd,
|
|
103
|
+
dd + dt,
|
|
104
|
+
li + li {
|
|
105
|
+
margin-top: (@gridSize / 2px);
|
|
106
|
+
}
|
|
107
|
+
ul,
|
|
108
|
+
ol {
|
|
109
|
+
ul,
|
|
110
|
+
ol {
|
|
111
|
+
&:not(:first-child) {
|
|
112
|
+
margin-top: (@gridSize / 2px);
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
// remove top margin for first element
|
|
118
|
+
p:first-child,
|
|
119
|
+
ul:first-child,
|
|
120
|
+
ol:first-child,
|
|
121
|
+
dl:first-child,
|
|
122
|
+
h1:first-child,
|
|
123
|
+
h2:first-child,
|
|
124
|
+
h3:first-child,
|
|
125
|
+
h4:first-child,
|
|
126
|
+
h5:first-child,
|
|
127
|
+
h6:first-child,
|
|
128
|
+
blockquote:first-child,
|
|
129
|
+
pre:first-child,
|
|
130
|
+
form:first-child,
|
|
131
|
+
table:first-child {
|
|
132
|
+
margin-top: 0;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
:focus {
|
|
136
|
+
outline: none;
|
|
137
|
+
box-shadow: 0px 0px 0px @focus-outline-width @focus-outline-color;
|
|
138
|
+
}
|
|
139
|
+
[data-whatintent="mouse"] :focus {
|
|
140
|
+
outline: none;
|
|
141
|
+
box-shadow: none;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
pre {
|
|
145
|
+
font-family: @font-family-code;
|
|
146
|
+
white-space: pre-wrap;
|
|
147
|
+
padding: @size8 @size16;
|
|
148
|
+
border-radius: 5px;
|
|
149
|
+
background: @code-block-color[light];
|
|
150
|
+
font-size: 0.8rem;
|
|
151
|
+
overflow-x: auto;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
blockquote {
|
|
155
|
+
white-space: pre-wrap;
|
|
156
|
+
border-left: 3px solid @blockquote-border-color[light];
|
|
157
|
+
padding-left: @size8;
|
|
158
|
+
font-style: italic;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
p code {
|
|
162
|
+
font-family: @font-family-code;
|
|
163
|
+
padding: @size0 @size8;
|
|
164
|
+
border-radius: @borderRadius;
|
|
165
|
+
background: @code-color[light];
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
table {
|
|
169
|
+
border-collapse: collapse;
|
|
170
|
+
width: 100%;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
thead,
|
|
174
|
+
tbody,
|
|
175
|
+
tfoot {
|
|
176
|
+
border-bottom: @borderWidth solid @table-border-color[light];
|
|
177
|
+
}
|
|
178
|
+
td,
|
|
179
|
+
th {
|
|
180
|
+
border: none;
|
|
181
|
+
padding: (@gridSize / 2) * 1px @gridSize*1px;
|
|
182
|
+
text-align: left;
|
|
183
|
+
}
|
|
184
|
+
th {
|
|
185
|
+
.heading-100;
|
|
186
|
+
line-height: inherit;
|
|
187
|
+
}
|
|
188
|
+
td:first-child,
|
|
189
|
+
th:first-child {
|
|
190
|
+
padding-left: 0;
|
|
191
|
+
}
|
|
192
|
+
td:last-child,
|
|
193
|
+
th:last-child {
|
|
194
|
+
padding-right: 0;
|
|
195
|
+
}
|
|
196
|
+
tr {
|
|
197
|
+
transition: background 0.1s ease-out,
|
|
198
|
+
box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38);
|
|
199
|
+
}
|
|
200
|
+
tbody tr:hover {
|
|
201
|
+
background-color: @table-hover-color[light];
|
|
202
|
+
}
|
|
203
|
+
caption {
|
|
204
|
+
.heading-600;
|
|
205
|
+
|
|
206
|
+
margin-bottom: @gridSize * 1px;
|
|
207
|
+
text-align: left;
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
[dark-mode="true"] {
|
|
211
|
+
body {
|
|
212
|
+
background-color: @background-color[dark];
|
|
213
|
+
color: @text-color[dark];
|
|
214
|
+
}
|
|
215
|
+
h1,
|
|
216
|
+
h2,
|
|
217
|
+
h3,
|
|
218
|
+
h4,
|
|
219
|
+
h5 {
|
|
220
|
+
color: #heading-color.default[dark];
|
|
221
|
+
}
|
|
222
|
+
h6 {
|
|
223
|
+
color: #heading-color.subtle[dark];
|
|
224
|
+
}
|
|
225
|
+
a {
|
|
226
|
+
color: #link-color.default[dark];
|
|
227
|
+
|
|
228
|
+
&:hover {
|
|
229
|
+
color: #link-color.hover[dark];
|
|
230
|
+
}
|
|
231
|
+
&:active {
|
|
232
|
+
color: #link-color.active[dark];
|
|
233
|
+
}
|
|
234
|
+
}
|
|
235
|
+
hr {
|
|
236
|
+
background-color: @horizontal-rule-color[dark];
|
|
237
|
+
}
|
|
238
|
+
pre {
|
|
239
|
+
background: @code-block-color[dark];
|
|
240
|
+
}
|
|
241
|
+
p code {
|
|
242
|
+
background: @code-color[dark];
|
|
243
|
+
}
|
|
244
|
+
blockquote {
|
|
245
|
+
border-left: 3px solid @blockquote-border-color[dark];
|
|
246
|
+
}
|
|
247
|
+
thead,
|
|
248
|
+
tbody,
|
|
249
|
+
tfoot {
|
|
250
|
+
border-bottom: @borderWidth solid @table-border-color[dark];
|
|
251
|
+
}
|
|
252
|
+
tbody tr:hover {
|
|
253
|
+
background-color: @table-hover-color[dark];
|
|
254
|
+
}
|
|
255
|
+
}
|
package/src/borders.less
ADDED
package/src/colors.js
ADDED
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
// Blues
|
|
2
|
+
export const B900 = "hsl(225, 90%, 16%)";
|
|
3
|
+
// @go-color-b700 = #000e7f;
|
|
4
|
+
export const B600 = "#061f80";
|
|
5
|
+
export const B500 = "hsl(225, 94%, 35%)";
|
|
6
|
+
// @go-color-b550 = #131ff2;
|
|
7
|
+
// @go-color-b500 = #001dff;
|
|
8
|
+
// @go-color-b400 = #3333ff;
|
|
9
|
+
export const B400 = "#06c";
|
|
10
|
+
export const B300 = "hsl(210, 100%, 50%)";
|
|
11
|
+
export const B200 = "hsl(210, 100%, 93%)";
|
|
12
|
+
export const B100 = "hsl(225, 100%, 96%)";
|
|
13
|
+
|
|
14
|
+
// Reds
|
|
15
|
+
export const R400 = "hsl(12, 91%, 46%)";
|
|
16
|
+
export const R300 = "hsl(11, 100%, 59%)";
|
|
17
|
+
|
|
18
|
+
// Yellows
|
|
19
|
+
export const Y300 = "hsl(40, 100%, 50%)";
|
|
20
|
+
export const Y200 = "hsl(46, 100%, 50%)";
|
|
21
|
+
|
|
22
|
+
// Greens
|
|
23
|
+
export const G500 = "hsl(120, 100%, 25%)";
|
|
24
|
+
|
|
25
|
+
// Neutrals
|
|
26
|
+
export const N1000 = "hsl(0, 0%, 0%)";
|
|
27
|
+
export const N900 = "hsl(218, 76%, 15%)";
|
|
28
|
+
// @go-color-n900 = hsl(218, 54%, 20%);
|
|
29
|
+
export const N800 = "hsla(0,0%,10%,.9)";
|
|
30
|
+
export const N500 = "hsla(0,0%,10%,.6)";
|
|
31
|
+
export const N400 = "hsl(218, 20%, 39%)";
|
|
32
|
+
export const N300 = "hsl(218, 17%, 44%)";
|
|
33
|
+
export const N200 = "hsl(218, 14%, 49%)";
|
|
34
|
+
export const N100 = "hsl(218, 14%, 54%)";
|
|
35
|
+
export const N90 = "hsl(218, 13%, 59%)";
|
|
36
|
+
export const N80 = "hsl(218, 13%, 64%)";
|
|
37
|
+
export const N70 = "hsl(217, 13%, 69%)";
|
|
38
|
+
export const N40 = "hsl(223, 12%, 89%)";
|
|
39
|
+
export const N30 = "hsl(228, 14%, 93%)";
|
|
40
|
+
export const N25 = "hsl(210, 7%, 95%)";
|
|
41
|
+
export const N20 = "hsl(220, 16%, 96%)";
|
|
42
|
+
export const N10 = "hsl(210, 25%, 98%)";
|
|
43
|
+
export const N5 = "hsl(0, 0%, 98%)";
|
|
44
|
+
export const N0 = "hsl(0, 0%, 100%)";
|
|
45
|
+
|
|
46
|
+
// Primary color palette
|
|
47
|
+
export const primary1 = B500;
|
|
48
|
+
export const primary2 = B500;
|
|
49
|
+
export const primary3 = N0;
|
package/src/colors.less
ADDED
|
@@ -0,0 +1,236 @@
|
|
|
1
|
+
// Primary Color Palette
|
|
2
|
+
@go-color-primary1: @go-color-b600;
|
|
3
|
+
@go-color-primary2: @go-color-b500;
|
|
4
|
+
@go-color-primary3: @go-color-n0;
|
|
5
|
+
|
|
6
|
+
// Neutrals
|
|
7
|
+
@go-color-n0: #ffffff;
|
|
8
|
+
@go-color-n10: #fafbfc;
|
|
9
|
+
@go-color-n20: #f4f5f7;
|
|
10
|
+
@go-color-n30: #ebecf0;
|
|
11
|
+
@go-color-n40: #dfe1e6;
|
|
12
|
+
@go-color-n50: #c1c7d0;
|
|
13
|
+
@go-color-n60: #b3bac5;
|
|
14
|
+
@go-color-n70: #a5adba;
|
|
15
|
+
@go-color-n80: #97a0af;
|
|
16
|
+
@go-color-n90: #8993a4;
|
|
17
|
+
@go-color-n100: #7a869a;
|
|
18
|
+
@go-color-n200: #6b778c;
|
|
19
|
+
@go-color-n300: #5e6c84;
|
|
20
|
+
@go-color-n400: #505f79;
|
|
21
|
+
@go-color-n500: #42526e;
|
|
22
|
+
@go-color-n600: #344563;
|
|
23
|
+
@go-color-n700: #253858;
|
|
24
|
+
@go-color-n800: #172b4d;
|
|
25
|
+
@go-color-n900: #091e42;
|
|
26
|
+
|
|
27
|
+
// Dark Mode Neutrals
|
|
28
|
+
@go-color-dn0: #0d1424;
|
|
29
|
+
@go-color-dn10: #0e1624;
|
|
30
|
+
@go-color-dn20: #121a29;
|
|
31
|
+
@go-color-dn30: #1b2638;
|
|
32
|
+
@go-color-dn40: #202b3d;
|
|
33
|
+
@go-color-dn50: #283447;
|
|
34
|
+
@go-color-dn60: #313d52;
|
|
35
|
+
@go-color-dn70: #3b475c;
|
|
36
|
+
@go-color-dn80: #455166;
|
|
37
|
+
@go-color-dn90: #56637a;
|
|
38
|
+
@go-color-dn100: #67758f;
|
|
39
|
+
@go-color-dn200: #7988a3;
|
|
40
|
+
@go-color-dn300: #8c9cb8;
|
|
41
|
+
@go-color-dn400: #9fb0cc;
|
|
42
|
+
@go-color-dn500: #abbbd6;
|
|
43
|
+
@go-color-dn600: #b8c7e0;
|
|
44
|
+
@go-color-dn700: #ced9eb;
|
|
45
|
+
@go-color-dn800: #dce5f5;
|
|
46
|
+
@go-color-dn900: #e6edfa;
|
|
47
|
+
|
|
48
|
+
// Reds
|
|
49
|
+
@go-color-r50: #ffebe6;
|
|
50
|
+
@go-color-r75: #ffbdad;
|
|
51
|
+
@go-color-r100: #ff8f73;
|
|
52
|
+
@go-color-r200: #ff7452;
|
|
53
|
+
@go-color-r300: #ff5630;
|
|
54
|
+
@go-color-r400: #de350b;
|
|
55
|
+
@go-color-r500: #bf2600;
|
|
56
|
+
|
|
57
|
+
// Yellows
|
|
58
|
+
@go-color-y50: #fffae6;
|
|
59
|
+
@go-color-y75: #fff0b3;
|
|
60
|
+
@go-color-y100: #ffe380;
|
|
61
|
+
@go-color-y200: #ffc400;
|
|
62
|
+
@go-color-y300: #ffab00;
|
|
63
|
+
@go-color-y400: #ff991f;
|
|
64
|
+
@go-color-y500: #ff8b00;
|
|
65
|
+
|
|
66
|
+
// Greens
|
|
67
|
+
@go-color-g50: #e3fcef;
|
|
68
|
+
@go-color-g75: #abf5d1;
|
|
69
|
+
@go-color-g100: #79f2c0;
|
|
70
|
+
@go-color-g200: #57d9a3;
|
|
71
|
+
@go-color-g300: #36b37e;
|
|
72
|
+
@go-color-g400: #00875a;
|
|
73
|
+
@go-color-g500: #006644;
|
|
74
|
+
|
|
75
|
+
// Blues
|
|
76
|
+
@go-color-b50: #deebff;
|
|
77
|
+
@go-color-b75: #b3d4ff;
|
|
78
|
+
@go-color-b100: #4c9aff;
|
|
79
|
+
@go-color-b200: #2684ff;
|
|
80
|
+
@go-color-b300: #0065ff;
|
|
81
|
+
@go-color-b400: #0052cc;
|
|
82
|
+
@go-color-b500: #0747a6;
|
|
83
|
+
|
|
84
|
+
// Purples
|
|
85
|
+
@go-color-p50: #eae6ff;
|
|
86
|
+
@go-color-p75: #c0b6f2;
|
|
87
|
+
@go-color-p100: #998dd9;
|
|
88
|
+
@go-color-p200: #8777d9;
|
|
89
|
+
@go-color-p300: #6554c0;
|
|
90
|
+
@go-color-p400: #5243aa;
|
|
91
|
+
@go-color-p500: #403294;
|
|
92
|
+
|
|
93
|
+
// Teals
|
|
94
|
+
@go-color-t50: #e6fcff;
|
|
95
|
+
@go-color-t75: #b3f5ff;
|
|
96
|
+
@go-color-t100: #79e2f2;
|
|
97
|
+
@go-color-t200: #00c7e6;
|
|
98
|
+
@go-color-t300: #00b8d9;
|
|
99
|
+
@go-color-t400: #00a3bf;
|
|
100
|
+
@go-color-t500: #008da6;
|
|
101
|
+
|
|
102
|
+
// Themed
|
|
103
|
+
@go-color-primary: {
|
|
104
|
+
light: @go-color-b400;
|
|
105
|
+
dark: @go-color-b100;
|
|
106
|
+
};
|
|
107
|
+
@go-color-blue: {
|
|
108
|
+
light: @go-color-b400;
|
|
109
|
+
dark: @go-color-b100;
|
|
110
|
+
};
|
|
111
|
+
@go-color-teal: {
|
|
112
|
+
light: @go-color-t300;
|
|
113
|
+
dark: @go-color-t200;
|
|
114
|
+
};
|
|
115
|
+
@go-color-purple: {
|
|
116
|
+
light: @go-color-p300;
|
|
117
|
+
dark: @go-color-p100;
|
|
118
|
+
};
|
|
119
|
+
@go-color-red: {
|
|
120
|
+
light: @go-color-r300;
|
|
121
|
+
dark: @go-color-r300;
|
|
122
|
+
};
|
|
123
|
+
@go-color-yellow: {
|
|
124
|
+
light: @go-color-y300;
|
|
125
|
+
dark: @go-color-y300;
|
|
126
|
+
};
|
|
127
|
+
@go-color-green: {
|
|
128
|
+
light: @go-color-g300;
|
|
129
|
+
dark: @go-color-g300;
|
|
130
|
+
};
|
|
131
|
+
@background-color: {
|
|
132
|
+
light: @go-color-n0;
|
|
133
|
+
dark: @go-color-dn30;
|
|
134
|
+
};
|
|
135
|
+
@text-color: {
|
|
136
|
+
light: @go-color-n900;
|
|
137
|
+
dark: @go-color-dn600;
|
|
138
|
+
};
|
|
139
|
+
@placeholder-color: {
|
|
140
|
+
light: @go-color-n100;
|
|
141
|
+
dark: @go-color-dn200;
|
|
142
|
+
};
|
|
143
|
+
#heading-color() {
|
|
144
|
+
.default() {
|
|
145
|
+
light: @go-color-n800;
|
|
146
|
+
dark: @go-color-dn600;
|
|
147
|
+
}
|
|
148
|
+
.subtle() {
|
|
149
|
+
light: @go-color-n200;
|
|
150
|
+
dark: @go-color-dn300;
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
#link-color() {
|
|
154
|
+
.default() {
|
|
155
|
+
light: @go-color-b400;
|
|
156
|
+
dark: @go-color-b100;
|
|
157
|
+
}
|
|
158
|
+
.hover() {
|
|
159
|
+
light: @go-color-b300;
|
|
160
|
+
dark: @go-color-b200;
|
|
161
|
+
}
|
|
162
|
+
.active() {
|
|
163
|
+
light: @go-color-b500;
|
|
164
|
+
dark: @go-color-b100;
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
@focus-outline-color: @go-color-b100;
|
|
168
|
+
@table-border-color: {
|
|
169
|
+
light: @go-color-n40;
|
|
170
|
+
dark: @go-color-dn70;
|
|
171
|
+
};
|
|
172
|
+
@table-hover-color: {
|
|
173
|
+
light: @go-color-n20;
|
|
174
|
+
dark: @go-color-dn50;
|
|
175
|
+
};
|
|
176
|
+
@horizontal-rule-color: {
|
|
177
|
+
light: @go-color-n40;
|
|
178
|
+
dark: @go-color-dn70;
|
|
179
|
+
};
|
|
180
|
+
@code-color: {
|
|
181
|
+
light: @go-color-n40;
|
|
182
|
+
dark: @go-color-dn70;
|
|
183
|
+
};
|
|
184
|
+
@code-block-color: {
|
|
185
|
+
light: @go-color-n20;
|
|
186
|
+
dark: @go-color-dn50;
|
|
187
|
+
};
|
|
188
|
+
@blockquote-border-color: {
|
|
189
|
+
light: @go-color-n40;
|
|
190
|
+
dark: @go-color-dn70;
|
|
191
|
+
};
|
|
192
|
+
|
|
193
|
+
// // Neutrals
|
|
194
|
+
// @go-color-n0: hsl(0, 0%, 100%);
|
|
195
|
+
// @go-color-n5: hsl(0, 0%, 98%);
|
|
196
|
+
// @go-color-n10: hsl(210, 25%, 98%);
|
|
197
|
+
// @go-color-n20: hsl(220, 16%, 96%);
|
|
198
|
+
@go-color-n25: hsl(210, 7%, 95%);
|
|
199
|
+
// @go-color-n30: hsl(228, 14%, 93%);
|
|
200
|
+
// @go-color-n40: hsl(223, 12%, 89%);
|
|
201
|
+
// @go-color-n70: hsl(217, 13%, 69%);
|
|
202
|
+
// @go-color-n80: hsl(218, 13%, 64%);
|
|
203
|
+
// @go-color-n90: hsl(218, 13%, 59%);
|
|
204
|
+
// @go-color-n100: hsl(218, 14%, 54%);
|
|
205
|
+
// @go-color-n200: hsl(218, 14%, 49%);
|
|
206
|
+
// @go-color-n300: hsl(218, 17%, 44%);
|
|
207
|
+
// @go-color-n400: hsl(218, 20%, 39%);
|
|
208
|
+
// @go-color-n500: hsla(0,0%,10%,.6);
|
|
209
|
+
// @go-color-n800: hsla(0,0%,10%,.9);
|
|
210
|
+
// // @go-color-n900: hsl(218, 54%, 20%);
|
|
211
|
+
// @go-color-n900: hsl(240, 7%, 6%);
|
|
212
|
+
@go-color-n1000: hsl(0, 0%, 0%);
|
|
213
|
+
|
|
214
|
+
// Blues
|
|
215
|
+
@go-color-b900: hsl(225, 90%, 16%);
|
|
216
|
+
// @go-color-b700: #000e7f;
|
|
217
|
+
@go-color-b600: #061f80;
|
|
218
|
+
@go-color-b500: hsl(225, 94%, 35%);
|
|
219
|
+
// @go-color-b550: #131ff2;
|
|
220
|
+
// @go-color-b500: #001dff;
|
|
221
|
+
// @go-color-b400: #3333ff;
|
|
222
|
+
// @go-color-b400: #06c;
|
|
223
|
+
// @go-color-b300: hsl(210, 100%, 50%);
|
|
224
|
+
// @go-color-b200: hsl(210, 100%, 93%);
|
|
225
|
+
// @go-color-b100: hsl(225, 100%, 96%);
|
|
226
|
+
|
|
227
|
+
// // Reds
|
|
228
|
+
// @go-color-r400: hsl(12, 91%, 46%);
|
|
229
|
+
// @go-color-r300: hsl(11, 100%, 59%);
|
|
230
|
+
|
|
231
|
+
// // Yellows
|
|
232
|
+
// @go-color-y300: hsl(40, 100%, 50%);
|
|
233
|
+
// @go-color-y200: hsl(46, 100%, 50%);
|
|
234
|
+
|
|
235
|
+
// // Greens
|
|
236
|
+
// @go-color-g500: hsl(120, 100%, 25%);
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
#elevation() {
|
|
2
|
+
.card() {
|
|
3
|
+
light: 0 1px 1px @go-color-n50, 0 0 1px 0 @go-color-n60;
|
|
4
|
+
dark: 0 1px 1px @go-color-dn20, 0 0 1px @go-color-dn30;
|
|
5
|
+
}
|
|
6
|
+
.dialog() {
|
|
7
|
+
light: 0 4px 8px -2px @go-color-n50, 0 0 1px @go-color-n60;
|
|
8
|
+
dark: 0 4px 8px -2px @go-color-dn20, 0 0 1px @go-color-dn30;
|
|
9
|
+
}
|
|
10
|
+
.modal() {
|
|
11
|
+
light: 0 8px 16px -4px @go-color-n50, 0 0 1px @go-color-n60;
|
|
12
|
+
dark: 0 8px 16px -4px @go-color-dn20, 0 0 1px @go-color-dn30;
|
|
13
|
+
}
|
|
14
|
+
.panel() {
|
|
15
|
+
light: 0 12px 24px -6px @go-color-n50, 0 0 1px @go-color-n60;
|
|
16
|
+
dark: 0 12px 24px -6px @go-color-dn20, 0 0 1px @go-color-dn30;
|
|
17
|
+
}
|
|
18
|
+
.flag() {
|
|
19
|
+
light: 0 20px 32px -8px @go-color-n50, 0 0 1px @go-color-n60;
|
|
20
|
+
dark: 0 20px 32px -8px @go-color-dn20, 0 0 1px @go-color-dn30;
|
|
21
|
+
}
|
|
22
|
+
.avatar() {
|
|
23
|
+
light: inset 0 0 10px fade(@go-color-n900, 5%);
|
|
24
|
+
dark: inset 0 0 10px fade(@go-color-n900, 5%)
|
|
25
|
+
}
|
|
26
|
+
}; ;
|
package/src/fonts.less
ADDED
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
@font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
|
|
2
|
+
"Ubuntu", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
|
|
3
|
+
@font-family-code: "SFMono-Medium", "SF Mono", "Segoe UI Mono", "Roboto Mono",
|
|
4
|
+
"Ubuntu Mono", Menlo, Consolas, Courier, monospace;
|
|
5
|
+
|
|
6
|
+
@font-style: normal;
|
|
7
|
+
|
|
8
|
+
@font-size-default: @font-size-14;
|
|
9
|
+
// @font-size-11: 11px;
|
|
10
|
+
@font-size-12: 12px;
|
|
11
|
+
@font-size-14: 14px;
|
|
12
|
+
@font-size-15: 15px;
|
|
13
|
+
@font-size-16: 16px;
|
|
14
|
+
@font-size-18: 18px;
|
|
15
|
+
@font-size-20: 20px;
|
|
16
|
+
@font-size-24: 24px;
|
|
17
|
+
@font-size-30: 30px;
|
|
18
|
+
@font-size-36: 36px;
|
|
19
|
+
@font-size-48: 48px;
|
|
20
|
+
@font-size-60: 60px;
|
|
21
|
+
@font-size-72: 72px;
|
|
22
|
+
|
|
23
|
+
@font-weight-thin: 100;
|
|
24
|
+
@font-weight-light: 300;
|
|
25
|
+
@font-weight-regular: 400;
|
|
26
|
+
@font-weight-medium: 500;
|
|
27
|
+
@font-weight-semibold: 600;
|
|
28
|
+
@font-weight-bold: 700;
|
|
29
|
+
@font-weight-extrabold: 800;
|
|
30
|
+
@font-weight-black: 900;
|
package/src/grid.less
ADDED
package/src/index.js
ADDED
package/src/index.less
ADDED
package/src/reset.less
ADDED
package/src/sizing.less
ADDED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
@size0: 0px;
|
|
2
|
+
@size4: 4px;
|
|
3
|
+
@size8: 8px;
|
|
4
|
+
@size12: 12px;
|
|
5
|
+
@size16: 16px;
|
|
6
|
+
@size24: 24px;
|
|
7
|
+
@size32: 32px;
|
|
8
|
+
@size48: 48px;
|
|
9
|
+
@size64: 64px;
|
|
10
|
+
@size96: 96px;
|
|
11
|
+
@size128: 128px;
|
|
12
|
+
@size192: 192px;
|
|
13
|
+
@size256: 256px;
|
|
14
|
+
@size384: 384px;
|
|
15
|
+
@size512: 512px;
|
|
16
|
+
@size640: 640px;
|
|
17
|
+
@size768: 768px;
|
package/src/styles.less
ADDED
|
@@ -0,0 +1,176 @@
|
|
|
1
|
+
@import "grid.less";
|
|
2
|
+
|
|
3
|
+
.heading-900 {
|
|
4
|
+
font-size: unit((35px / @font-size-default), em);
|
|
5
|
+
font-style: @font-style;
|
|
6
|
+
line-height: unit((40px / 35px), em);
|
|
7
|
+
color: #heading-color.default[light];
|
|
8
|
+
font-weight: @font-weight-medium;
|
|
9
|
+
letter-spacing: -0.01em;
|
|
10
|
+
margin-top: @gridSize * 6.5px;
|
|
11
|
+
|
|
12
|
+
[dark-mode="true"] & {
|
|
13
|
+
color: #heading-color.default[dark];
|
|
14
|
+
}
|
|
15
|
+
&:first-child {
|
|
16
|
+
margin-top: @size0;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
.heading-800 {
|
|
20
|
+
font-size: unit((29px / @font-size-default), em);
|
|
21
|
+
font-style: @font-style;
|
|
22
|
+
line-height: unit((32px / 29px), em);
|
|
23
|
+
color: #heading-color.default[light];
|
|
24
|
+
font-weight: @font-weight-semibold;
|
|
25
|
+
letter-spacing: -0.01em;
|
|
26
|
+
margin-top: @gridSize * 5px;
|
|
27
|
+
|
|
28
|
+
[dark-mode="true"] & {
|
|
29
|
+
color: #heading-color.default[dark];
|
|
30
|
+
}
|
|
31
|
+
&:first-child {
|
|
32
|
+
margin-top: @size0;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
.heading-700 {
|
|
36
|
+
font-size: unit((24px / @font-size-default), em);
|
|
37
|
+
font-style: @font-style;
|
|
38
|
+
line-height: unit((28px / 24px), em);
|
|
39
|
+
color: #heading-color.default[light];
|
|
40
|
+
font-weight: @font-weight-medium;
|
|
41
|
+
letter-spacing: -0.01em;
|
|
42
|
+
margin-top: @gridSize * 5px;
|
|
43
|
+
|
|
44
|
+
[dark-mode="true"] & {
|
|
45
|
+
color: #heading-color.default[dark];
|
|
46
|
+
}
|
|
47
|
+
&:first-child {
|
|
48
|
+
margin-top: @size0;
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
.heading-600 {
|
|
52
|
+
font-size: unit((20px / @font-size-default), em);
|
|
53
|
+
font-style: @font-style;
|
|
54
|
+
line-height: unit((24px / 20px), em);
|
|
55
|
+
color: #heading-color.default[light];
|
|
56
|
+
font-weight: @font-weight-medium;
|
|
57
|
+
letter-spacing: -0.008em;
|
|
58
|
+
margin-top: @gridSize * 3.5px;
|
|
59
|
+
|
|
60
|
+
[dark-mode="true"] & {
|
|
61
|
+
color: #heading-color.default[dark];
|
|
62
|
+
}
|
|
63
|
+
&:first-child {
|
|
64
|
+
margin-top: @size0;
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
.heading-500 {
|
|
68
|
+
font-size: unit((16px / @font-size-default), em);
|
|
69
|
+
font-style: @font-style;
|
|
70
|
+
line-height: unit((20px / 16px), em);
|
|
71
|
+
color: #heading-color.default[light];
|
|
72
|
+
font-weight: @font-weight-semibold;
|
|
73
|
+
letter-spacing: -0.006em;
|
|
74
|
+
margin-top: @gridSize * 3px;
|
|
75
|
+
|
|
76
|
+
[dark-mode="true"] & {
|
|
77
|
+
color: #heading-color.default[dark];
|
|
78
|
+
}
|
|
79
|
+
&:first-child {
|
|
80
|
+
margin-top: @size0;
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
.heading-400 {
|
|
84
|
+
font-size: unit((14px / @font-size-default), em);
|
|
85
|
+
font-style: @font-style;
|
|
86
|
+
line-height: unit((16px / 14px), em);
|
|
87
|
+
color: #heading-color.default[light];
|
|
88
|
+
font-weight: @font-weight-semibold;
|
|
89
|
+
letter-spacing: -0.003em;
|
|
90
|
+
margin-top: @gridSize * 2px;
|
|
91
|
+
|
|
92
|
+
[dark-mode="true"] & {
|
|
93
|
+
color: #heading-color.default[dark];
|
|
94
|
+
}
|
|
95
|
+
&:first-child {
|
|
96
|
+
margin-top: @size0;
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
.heading-300 {
|
|
100
|
+
font-size: unit((12px / @font-size-default), em);
|
|
101
|
+
font-style: @font-style;
|
|
102
|
+
line-height: unit((16px / 12px), em);
|
|
103
|
+
color: #heading-color.default[light];
|
|
104
|
+
font-weight: @font-weight-semibold;
|
|
105
|
+
margin-top: @gridSize * 2.5px;
|
|
106
|
+
text-transform: uppercase;
|
|
107
|
+
|
|
108
|
+
[dark-mode="true"] & {
|
|
109
|
+
color: #heading-color.default[dark];
|
|
110
|
+
}
|
|
111
|
+
&:first-child {
|
|
112
|
+
margin-top: @size0;
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
.heading-200 {
|
|
116
|
+
font-size: unit((12px / @font-size-default), em);
|
|
117
|
+
font-style: @font-style;
|
|
118
|
+
line-height: unit((16px / 12px), em);
|
|
119
|
+
color: #heading-color.subtle[light];
|
|
120
|
+
font-weight: @font-weight-semibold;
|
|
121
|
+
margin-top: @gridSize * 2px;
|
|
122
|
+
|
|
123
|
+
[dark-mode="true"] & {
|
|
124
|
+
color: #heading-color.subtle[dark];
|
|
125
|
+
}
|
|
126
|
+
&:first-child {
|
|
127
|
+
margin-top: @size0;
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
.heading-100 {
|
|
131
|
+
font-size: unit((11px / @font-size-default), em);
|
|
132
|
+
font-style: @font-style;
|
|
133
|
+
line-height: unit((16px / 11px), em);
|
|
134
|
+
color: #heading-color.subtle[light];
|
|
135
|
+
font-weight: @font-weight-bold;
|
|
136
|
+
margin-top: @gridSize * 2px;
|
|
137
|
+
|
|
138
|
+
[dark-mode="true"] & {
|
|
139
|
+
color: #heading-color.subtle[dark];
|
|
140
|
+
}
|
|
141
|
+
&:first-child {
|
|
142
|
+
margin-top: @size0;
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.text-caption {
|
|
147
|
+
font-size: @font-size-12;
|
|
148
|
+
font-weight: @font-weight-regular;
|
|
149
|
+
color: @placeholder-color[light];
|
|
150
|
+
}
|
|
151
|
+
.text-caption-bold {
|
|
152
|
+
font-size: @font-size-12;
|
|
153
|
+
font-weight: @font-weight-semibold;
|
|
154
|
+
color: @text-color[light];
|
|
155
|
+
}
|
|
156
|
+
.text-prominent {
|
|
157
|
+
font-size: @font-size-default;
|
|
158
|
+
font-weight: @font-weight-semibold;
|
|
159
|
+
color: @text-color[light];
|
|
160
|
+
}
|
|
161
|
+
.error {
|
|
162
|
+
color: @go-color-red[light];
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
[dark-mode="true"] {
|
|
166
|
+
.text-caption {
|
|
167
|
+
color: @placeholder-color[dark];
|
|
168
|
+
}
|
|
169
|
+
.text-caption-bold,
|
|
170
|
+
.text-prominent {
|
|
171
|
+
color: @text-color[dark];
|
|
172
|
+
}
|
|
173
|
+
.error {
|
|
174
|
+
color: @go-color-red[dark];
|
|
175
|
+
}
|
|
176
|
+
}
|
package/src/tables.less
ADDED
|
File without changes
|