@ossy/themes 0.1.4 → 0.1.5

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/src/gaming.js DELETED
@@ -1,233 +0,0 @@
1
- import { Standard } from './standard.js'
2
- import { topography } from './patterns/index.js'
3
-
4
- export const Gaming = {
5
-
6
- space: Standard.space,
7
- 'max-width': Standard['max-width'],
8
-
9
- surface: {
10
- 'primary': 'hsl(325, 93%, 2%)',
11
- 'secondary': 'hsl(325, 93%, 2%)',
12
- 'linear-gradient': 'linear-gradient(180deg, hsl(325, 93%, 6%) 0%, hsl(325, 93%, 2%) 50%)',
13
- 'radial-gradient': 'radial-gradient(hsl(325, 93%, 15%) 0%, hsl(325, 93%, 2%) 50%)'
14
- },
15
-
16
- separator: {
17
- 'primary': 'hsl(325, 80%, 18%)',
18
- 'accent': 'hsl(26, 82%, 53%)'
19
- },
20
-
21
- title: {
22
-
23
- default: {
24
- 'font-family': 'Roboto, sans-serif',
25
- 'color': 'hsl(182, 83%, 54%)',
26
- 'letter-spacing': '1px'
27
- },
28
-
29
- display: {
30
- 'font-weight': 'normal',
31
- 'line-height': '1.2',
32
- 'font-weight': '700',
33
- 'font-size': 'min(54px, max(3.35vw, 32px))'
34
- },
35
-
36
- primary: {
37
- 'font-size': '2rem',
38
- 'font-weight': '700',
39
- 'line-height': '1.2',
40
- 'letter-spacing': '1px'
41
- },
42
-
43
- secondary: {
44
- 'font-size': '1.5rem',
45
- 'font-weight': '700',
46
- 'line-height': '1.3',
47
- 'letter-spacing': '1px'
48
- },
49
-
50
- tertiary: {
51
- 'font-size': '1.25rem',
52
- 'font-weight': '400',
53
- 'line-height': '1.4',
54
- 'letter-spacing': '0.25px'
55
- },
56
-
57
- lead: {
58
- 'color': 'hsl(182, 80%, 40%)',
59
- 'font-size': '1.2rem',
60
- 'font-weight': '700',
61
- 'line-height': '1.5',
62
- 'letter-spacing': '0.15px'
63
- },
64
-
65
- logo: {
66
- 'font-family': '\'Alfa Slab One\', monospace',
67
- 'font-weight': '700',
68
- 'line-height': '1.2',
69
- 'font-size': 'min(30px, max(3vw, 32px))'
70
- },
71
-
72
- },
73
-
74
- text: {
75
-
76
- default: {
77
- 'font-family': '\'Tilt Neon\', sans-serif',
78
- 'font-weight': '400',
79
- 'font-size': '1rem',
80
- 'line-height': '1.6',
81
- 'color': 'hsl(182, 83%, 94%)'
82
- },
83
-
84
- small: {
85
- 'font-size': '1rem',
86
- }
87
-
88
- },
89
-
90
- button: {
91
-
92
- default: {
93
- 'background': 'transparent',
94
- 'color': 'hsl(41, 96%, 56%)',
95
- 'border-width': '1px',
96
- 'border-style': 'solid',
97
- 'border-color': 'hsl(41, 96%, 56%)',
98
- 'border-radius': '2px',
99
- 'padding': '8px 24px',
100
- 'font-family': '\'Share Tech Mono\', monospace',
101
- 'font-size': '16px',
102
- 'font-weight': '400',
103
-
104
- 'background-hover': 'hsla(26, 82%, 33%, .1)',
105
- 'color-hover': 'hsl(26, 82%, 73%)',
106
-
107
- 'background-disabled': 'hsl(0, 0%, 94%)',
108
- 'color-disabled': 'hsl(0, 0%, 50%)'
109
- },
110
-
111
- cta: {
112
- 'background': 'linear-gradient(90deg, hsl(50, 96%, 57%) 0%, hsl(41, 96%, 56%) 50%, hsl(26, 82%, 53%) 100%)',
113
- 'color': 'hsl(23, 84%, 5%)',
114
- 'box-shadow': '0 3px 6px rgba(0,0,0,.16)',
115
- 'border-color': 'hsl(26, 82%, 53%)',
116
-
117
- 'background-hover': 'linear-gradient(90deg, hsl(50, 96%, 57%) 0%, hsl(41, 96%, 56%) 50%, hsl(26, 82%, 53%) 100%)',
118
- 'color-hover': 'hsl(23, 84%, 5%)'
119
- },
120
-
121
- link: {
122
- 'background': 'transparent',
123
- 'color': 'hsl(41, 96%, 56%)',
124
- 'border-color': 'transparent',
125
-
126
- 'background-hover': 'transparent',
127
- 'color-hover': 'hsl(41, 96%, 36%)'
128
- },
129
-
130
- tab: {
131
- 'color': 'hsl(41, 96%, 56%)',
132
- 'border-style': 'solid',
133
- 'border-color': 'transparent',
134
- 'border-width': '4px 0 4px 0',
135
- 'padding': '16px 24px',
136
-
137
- 'color-hover': 'hsl(41, 96%, 26%)',
138
- 'background-hover': 'hsla(26, 82%, 33%, .3)',
139
-
140
- 'border-color-focus': 'transparent transparent hsl(41, 96%, 56%) transparent'
141
- },
142
-
143
- 'tab-active': {
144
- 'color': 'hsl(41, 96%, 56%)',
145
- 'border-style': 'solid',
146
- 'border-color': 'transparent transparent hsl(41, 96%, 56%) transparent',
147
- 'border-width': '4px 0 4px 0',
148
- 'padding': '16px 24px',
149
-
150
- 'border-color-focus': 'transparent transparent hsl(41, 96%, 56%) transparent'
151
- },
152
-
153
- tag: {
154
- 'padding': '8px',
155
- 'background': 'hsla(325, 93%, 4%, .9)',
156
- 'color': 'hsl(0, 0%, 90%)',
157
- 'border-width': '1px',
158
- 'border-style': 'solid',
159
- 'border-color': 'hsl(325, 80%, 30%)',
160
- 'border-radius': '4px',
161
- 'font-size': '12px',
162
-
163
- 'background-hover': 'hsla(325, 93%, 15%, 1)',
164
- 'color-hover': 'hsl(0, 0%, 90%)',
165
-
166
- 'background-focus': 'hsla(325, 93%, 4%, .9)'
167
- },
168
-
169
- 'tag-active': {
170
- 'padding': '8px',
171
- 'background': 'hsla(325, 93%, 15%, 1)',
172
- 'color': 'hsl(0, 0%, 90%)',
173
- 'border-width': '1px',
174
- 'border-style': 'solid',
175
- 'border-color': 'hsl(325, 80%, 30%)',
176
- 'border-radius': '4px',
177
- 'font-size': '12px',
178
-
179
- 'background-hover': 'hsla(325, 93%, 15%, 1)',
180
- 'color-hover': 'hsl(0, 0%, 90%)',
181
-
182
- 'background-focus': 'hsla(325, 93%, 15%, 1)'
183
- },
184
-
185
- },
186
-
187
- card: {
188
-
189
- default: {
190
- 'background': 'hsla(325, 93%, 4%, .9)',
191
- 'border-color': 'hsl(325, 80%, 18%)',
192
- 'border-style': 'solid',
193
- 'border-width': '1px',
194
- 'box-shadow': '3px 0 10px hsla(325, 80%, 18%, .75)',
195
- 'padding': '32px',
196
- 'border-radius': '8px'
197
- },
198
-
199
- cover: {
200
- 'padding': '0',
201
- },
202
-
203
- resume: {
204
- 'background': 'hsla(325, 93%, 4%, .9)',
205
- 'border-color': 'var(--separator-primary)',
206
- 'border-style': 'solid',
207
- 'border-width': '0 1px 0 0',
208
- 'box-shadow': 'none',
209
- 'padding': '24px 32px',
210
- 'border-radius': '0'
211
- },
212
-
213
- hero: {
214
- 'background': `
215
- ${topography},
216
- linear-gradient(321deg, hsl(200, 80%, 85%) 0%, hsl(200, 100%, 97%) 20%, hsl(15, 100%, 95%) 80%, hsl(15, 100%, 85%) 100%)
217
- `,
218
- 'border-color': 'transparent',
219
- 'border-style': 'solid',
220
- 'border-width': '1px',
221
- 'box-shadow': '3px 0 10px hsla(0, 0%, 85%, .75)',
222
- 'padding': 'var(--space-xl) var(--space-m)',
223
- 'border-radius': '25px'
224
- }
225
-
226
- },
227
-
228
- resume: {
229
- 'header-border-bottom': '1px solid var(--separator-primary)',
230
- 'header-padding': '0 24px',
231
- 'background': 'var(--surface-linear-gradient)'
232
- }
233
- }
package/src/glass.js DELETED
@@ -1,347 +0,0 @@
1
- import { Standard } from './standard.js'
2
- import { topography } from './patterns/index.js'
3
-
4
- // hsl(198, 96%, 10%) accent from old site
5
-
6
-
7
- export const Glass = {
8
- ...Standard,
9
-
10
- surface: {
11
- ...Standard.surface,
12
- primary: 'hsl(0, 100%, 100%)',
13
- secondary: 'hsl(199deg 98% 97%)',
14
- 'radial-gradient': 'radial-gradient(hsl(199deg 98% 85%) 0%, hsl(0deg 0% 100%) 80%)',
15
- 'linear-gradient': 'linear-gradient(162deg, hsl(0deg 0% 100%) 0%, hsl(199deg 98% 97%) 100%)',
16
- decorated: `
17
- linear-gradient(0deg, var(--surface-primary) 0%, transparent 100%),
18
- ${topography()},
19
- linear-gradient(321deg, hsl(200, 80%, 85%) 0%, hsl(200, 100%, 97%) 20%, hsl(15, 100%, 95%) 80%, hsl(15, 100%, 85%) 100%)
20
- `,
21
- },
22
-
23
- surfaces: {
24
- ...Standard.surfaces,
25
-
26
- // base: {
27
- // background: 'hsl(199, 90%, 98%)',
28
- // foreground: 'hsl(199, 90%, 10%)',
29
- // separator: 'hsl(0, 0%, 95%)',
30
- // },
31
-
32
- base: {
33
- background: `
34
- radial-gradient(circle at center center, hsla(15, 100%, 94%, 1) 0%, hsl(199, 90%, 98%) 50%)
35
- `,
36
- foreground: 'hsl(199, 90%, 10%)',
37
- separator: 'hsl(0, 0%, 95%)',
38
- },
39
-
40
- primary: {
41
- foreground: 'hsl(182, 23%, 30%)',
42
- 'foreground-hover': 'hsl(182, 23%, 25%)',
43
- background: 'hsla(0, 0%, 100%, .6)',
44
- 'background-hover': 'hsla(0, 0%, 90%, .7)',
45
- backdropFilter: 'saturate(180%) blur(10px)',
46
- },
47
-
48
- 'alt-primary': {
49
- foreground: 'hsl(199deg 98% 98%)',
50
- background: 'hsla(0, 0%, 30%, .8)',
51
- backdropFilter: 'saturate(90%) blur(4px)',
52
- },
53
-
54
- // primary: {
55
- // background: 'hsl(199, 90%, 100%)',
56
- // 'background-hover': 'hsl(199, 90%, 98%)',
57
- // foreground: 'hsl(182, 23%, 30%)',
58
- // 'foreground-hover': 'hsl(182, 23%, 30%)',
59
- // },
60
-
61
- secondary: {
62
- background: 'hsl(199deg 98% 97%)',
63
- 'background-hover': 'hsl(199deg 98% 95%)',
64
- foreground: 'hsl(182, 23%, 30%)',
65
- 'foreground-hover': 'hsl(182, 23%, 20%)',
66
- },
67
-
68
- // 'radial-gradient': {
69
- // background: 'radial-gradient(hsl(199deg 98% 85%) 0%, hsl(0deg 0% 100%) 80%)',
70
- // foreground: 'hsl(182, 23%, 30%)',
71
- // },
72
-
73
- // 'linear-gradient': {
74
- // background: 'linear-gradient(162deg, hsl(0deg 0% 100%) 0%, hsl(199deg 98% 97%) 100%)',
75
- // foreground: 'hsl(182, 23%, 30%)',
76
- // },
77
-
78
- // 'alt-primary': {
79
- // // background: 'hsl(199, 98%, 10%)',
80
- // background: 'hsl(199deg 98% 17%)',
81
- // // background: 'hsl(168, 28%, 40%)',
82
- // // background: 'hsl(168, 28%, 60%)',
83
- // // background: 'hsl(168, 10%, 24%)',
84
- // // background: 'hsl(167, 1%, 40%)',
85
- // foreground: 'hsl(199deg 98% 98%)',
86
- // separator: 'hsl(0, 0%, 95%)',
87
- // },
88
-
89
- 'alt-secondary': {
90
- background: 'hsl(199, 98%, 10%)',
91
- background: 'hsl(168, 28%, 5%)',
92
- background: 'hsl(168, 28%, 35%)',
93
- foreground: 'hsl(199deg 98% 98%)',
94
- separator: 'hsl(0, 0%, 95%)',
95
- },
96
-
97
- // decorated: {
98
- // background: `
99
- // linear-gradient(0deg, var(--surface-primary) 0%, transparent 100%),
100
- // ${topography()},
101
- // linear-gradient(90deg, hsla(200, 80%, 85%, .9) 0%, hsla(200, 100%, 97%, .9) 20%, hsla(15, 100%, 95%, .9) 80%, hsla(15, 100%, 85%, .9) 100%)
102
- // `,
103
- // foreground: 'hsl(182, 23%, 30%)',
104
- // },
105
-
106
- // decorated: {
107
- // background: `
108
- // radial-gradient(ellipse at center, transparent 100%, var(--surfaces-primary-background) 100%),
109
- // ${topography()},
110
- // linear-gradient(90deg, hsla(200, 80%, 85%, 1) 0%, hsla(200, 100%, 97%, 1) 20%, hsla(15, 100%, 95%, 1) 80%, hsla(15, 100%, 85%, 1) 100%)
111
- // `,
112
- // foreground: 'hsl(182, 23%, 30%)',
113
- // },
114
- // hsl(168, 28%, 40%)
115
- // decorated: {
116
- // background: `
117
- // radial-gradient(ellipse at center, transparent 0%, var(--surfaces-alt-primary-background) 70%),
118
- // ${topography()},
119
- // linear-gradient(90deg, hsla(168, 28%, 40%, 1) 0%, hsla(168, 28%, 40%, 1) 20%, hsla(168, 28%, 40%, 1) 80%, hsla(168, 28%, 40%, 1) 100%)
120
- // `,
121
- // foreground: 'hsl(182, 23%, 30%)',
122
- // },
123
-
124
- },
125
-
126
- separator: {
127
- ...Standard.separator,
128
- 'primary': 'hsl(0, 0%, 90%)',
129
- 'accent': 'hsl(167, 89%, 43%)'
130
- },
131
-
132
- title: {
133
- ...Standard.title,
134
-
135
- default: {
136
- 'font-family': 'Roboto, sans-serif',
137
- 'font-weight': '900',
138
- 'color': 'hsl(199deg 98% 17%)',
139
- 'letter-spacing': '1px'
140
- },
141
-
142
- display: {
143
- 'line-height': '1.1',
144
- 'font-size': 'min(80px, max(2.9vw, 32px))',
145
- 'font-family': 'Roboto, sans-serif',
146
- 'font-weight': '700',
147
- },
148
-
149
- primary: {
150
- 'font-size': '2rem',
151
- 'line-height': '1.2',
152
- 'letter-spacing': '1px'
153
- },
154
-
155
- secondary: {
156
- 'font-size': '1.5rem',
157
- 'line-height': '1.3',
158
- 'letter-spacing': '1px'
159
- },
160
-
161
- tertiary: {
162
- 'font-size': '1.25rem',
163
- 'line-height': '1.4',
164
- 'letter-spacing': '0.25px'
165
- },
166
-
167
- lead: {
168
- 'color': 'hsl(167, 89%, 43%)',
169
- 'font-size': '1.2rem',
170
- 'line-height': '1.5',
171
- 'letter-spacing': '0.15px'
172
- },
173
-
174
- logo: {
175
- 'font-family': 'Roboto, sans-serif',
176
- 'line-height': '1',
177
- 'font-size': 'min(30px, max(3vw, 32px))'
178
- },
179
-
180
- },
181
-
182
- text: {
183
- ...Standard.text,
184
-
185
- default: {
186
- 'font-family': 'Roboto, sans-serif',
187
- 'font-weight': '500',
188
- 'font-size': '1rem',
189
- 'line-height': '1.6',
190
- 'color': 'hsl(182, 23%, 30%)'
191
- },
192
-
193
- },
194
-
195
- button: {
196
- ...Standard.button,
197
-
198
- default: {
199
- 'background': 'transparent',
200
- 'color': 'hsl(0, 0%, 50%)',
201
- 'border-width': '2px',
202
- 'border-style': 'solid',
203
- 'border-color': 'transparent',
204
- 'border-radius': '999px',
205
- 'padding': '8px 16px',
206
- 'font-family': 'Roboto, sans-serif',
207
- 'font-size': '14px',
208
- 'font-weight': '500',
209
- 'letter-spacing': '.7px',
210
-
211
- 'background-hover': 'hsl(0, 0%, 90%)',
212
- 'color-hover': 'hsl(0, 0%, 20%)',
213
-
214
- 'background-disabled': 'hsl(0, 0%, 94%)',
215
- 'color-disabled': 'hsl(0, 0%, 50%)',
216
- },
217
-
218
- header: {
219
- 'color': 'hsl(0, 0%, 80%)',
220
- 'background': 'transparent',
221
- 'border-width': '.5px'
222
- },
223
-
224
- secondary: {
225
- 'background': 'hsla(0, 0%, 98%, .8)',
226
- 'color': 'hsl(0, 0%, 20%)',
227
- 'border-width': '.5px',
228
-
229
- 'background-hover': 'hsl(0, 0%, 95%)',
230
- 'color-hover': 'hsl(0, 0%, 15%)'
231
- },
232
-
233
- cta: {
234
- 'background': 'hsl(167, 89%, 43%)',
235
- 'color': 'hsl(0, 0%, 98%)',
236
-
237
- 'background-hover': 'hsl(167, 89%, 38%)',
238
- 'color-hover': 'hsl(0, 0%, 98%)'
239
- },
240
-
241
- link: {
242
- 'button-link-background': 'transparent',
243
- 'button-link-border-color': 'transparent',
244
-
245
- 'button-link-background-hover': 'transparent',
246
- 'button-link-color-hover': 'hsl(167, 89%, 43%)'
247
- },
248
-
249
- command: {
250
- 'border-radius': '4px',
251
- 'padding': '4px',
252
-
253
- 'background': 'hsl(0, 0%, 99%)',
254
- 'background-hover': 'hsl(0, 0%, 95%)',
255
- 'color-hover': 'hsl(199deg 89% 43%)'
256
- // 'color-hover': 'hsl(167, 89%, 43%)'
257
- },
258
-
259
- 'command-danger': {
260
- 'border-radius': '4px',
261
- 'padding': '4px',
262
-
263
- 'background': 'hsl(0, 0%, 99%)',
264
- 'background-hover': 'hsl(0, 0%, 95%)',
265
- 'color-hover': 'hsl(0 89% 43%)'
266
- },
267
-
268
-
269
- tab: {
270
- 'border-style': 'solid',
271
- 'border-color': 'transparent',
272
- 'border-width': '4px 0 4px 0',
273
- 'border-radius': '0',
274
- 'padding': '16px 24px',
275
-
276
- 'color-hover': 'hsl(167, 89%, 43%)',
277
- 'background-hover': 'transparent',
278
- 'border-color-hover': 'transparent transparent hsl(167, 89%, 43%) transparent',
279
-
280
- 'border-color-focus': 'transparent transparent hsl(167, 89%, 43%) transparent'
281
- },
282
-
283
- 'tab-active': {
284
- 'color': 'hsl(167, 89%, 43%)',
285
- 'border-style': 'solid',
286
- 'border-color': 'transparent transparent hsl(167, 89%, 43%) transparent',
287
- 'border-width': '4px 0 4px 0',
288
- 'border-radius': '0',
289
- 'padding': '16px 24px',
290
-
291
- 'background-hover': 'transparent',
292
- 'color-hover': 'hsl(167, 89%, 43%)',
293
-
294
- 'border-color-focus': 'transparent transparent hsl(167, 89%, 43%) transparent'
295
- },
296
-
297
- },
298
-
299
- card: {
300
- ...Standard.card,
301
-
302
- default: {
303
- 'background': 'hsl(0, 0%, 100%)',
304
- 'border-color': 'var(--separator-primary)',
305
- 'border-style': 'solid',
306
- 'border-width': '0',
307
- 'box-shadow': 'none',
308
- 'padding': '32px',
309
- 'border-radius': '24px'
310
- },
311
-
312
- cover: {
313
- 'padding': '0',
314
- },
315
-
316
- resume: {
317
- 'background': 'hsl(0, 0%, 100%)',
318
- 'border-color': 'var(--separator-primary)',
319
- 'border-style': 'solid',
320
- 'border-width': '0 1px 0 0',
321
- 'box-shadow': 'none',
322
- 'padding': '24px 32px',
323
- 'border-radius': '0'
324
- },
325
-
326
- hero: {
327
- 'background': `
328
- ${topography},
329
- linear-gradient(321deg, hsl(200, 80%, 85%) 0%, hsl(200, 100%, 97%) 20%, hsl(15, 100%, 95%) 80%, hsl(15, 100%, 85%) 100%)
330
- `,
331
- 'border-color': 'transparent',
332
- 'border-style': 'solid',
333
- 'border-width': '1px',
334
- 'box-shadow': '3px 0 10px hsla(0, 0%, 85%, .75)',
335
- 'padding': 'var(--space-xl) var(--space-m)',
336
- 'border-radius': '25px'
337
- }
338
-
339
- },
340
-
341
- resume: {
342
- ...Standard.resume,
343
- 'header-border-bottom': '1px solid var(--separator-primary)',
344
- 'header-padding': '0 24px',
345
- 'background': 'var(--surface-linear-gradient)'
346
- }
347
- }
package/src/index.js DELETED
@@ -1,9 +0,0 @@
1
- export * from './cloud-dark.js'
2
- export * from './cloud-light.js'
3
- export * from './gaming.js'
4
- export * from './glass.js'
5
- export * from './minimal.js'
6
- export * from './oskarssylwan.js'
7
- export * from './plexus-sanitas.js'
8
- export * from './standard.js'
9
-