@ossy/themes 0.0.1-alpha → 0.0.1

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/minimal.js ADDED
@@ -0,0 +1,223 @@
1
+ import { Standard } from './standard.js'
2
+
3
+ export const Minimal = {
4
+ ...Standard,
5
+
6
+ surface: {
7
+ 'primary': 'hsl(0, 0%, 97%)',
8
+ 'secondary': 'hsl(0, 0%, 97%)',
9
+ 'radial-gradient': 'radial-gradient(hsl(199deg 98% 85%) 0%, hsl(0deg 0% 100%) 80%)',
10
+ 'linear-gradient': 'linear-gradient(162deg, hsl(0deg 0% 100%) 0%, hsl(199deg 0% 97%) 100%)'
11
+ // 'surface-alt': 'hsl(80, 45%, 95%)'
12
+ },
13
+
14
+ separator: {
15
+ 'primary': 'hsl(0, 0%, 10%)',
16
+ 'accent': 'hsl(167, 89%, 43%)'
17
+ },
18
+
19
+ title: {
20
+
21
+ default: {
22
+ 'font-family': '\'Fira Code\', monospace',
23
+ 'color': 'hsl(199deg 98% 10%)'
24
+ },
25
+
26
+ display: {
27
+ 'font-weight': '900',
28
+ 'line-height': '1.2',
29
+ 'font-size': 'min(54px, max(3.35vw, 32px))'
30
+ },
31
+
32
+ primary: {
33
+ 'font-family': '\'Fira Code\', monospace',
34
+ 'font-size': '2rem',
35
+ 'font-weight': '900',
36
+ 'line-height': '1.2'
37
+ },
38
+
39
+ secondary: {
40
+ 'font-size': '1.5rem',
41
+ 'font-weight': '900',
42
+ 'line-height': '1.3'
43
+ },
44
+
45
+ tertiary: {
46
+ 'font-size': '1.25rem',
47
+ 'font-weight': '900',
48
+ 'line-height': '1.4'
49
+ },
50
+
51
+ lead: {
52
+ 'color': 'hsl(167, 0%, 40%)',
53
+ 'font-size': '1.2rem',
54
+ 'font-weight': '200',
55
+ 'line-height': '1.5'
56
+ },
57
+
58
+ logo: {
59
+ 'font-weight': '900',
60
+ 'line-height': '1.2',
61
+ 'font-size': 'min(30px, max(3vw, 32px))'
62
+ },
63
+
64
+ },
65
+
66
+ text: {
67
+
68
+ default: {
69
+ 'font-family': 'Roboto, sans-serif',
70
+ 'font-weight': '400',
71
+ 'font-size': '1rem',
72
+ 'line-height': '1.6',
73
+ 'color': 'hsl(182, 0%, 30%)'
74
+ },
75
+
76
+ small: {
77
+ 'font-size': '.8rem',
78
+ 'line-height': '1.2',
79
+ }
80
+
81
+ },
82
+
83
+ button: {
84
+
85
+ default: {
86
+ 'background': 'transparent',
87
+ 'color': 'hsl(0, 0%, 40%)',
88
+ 'border-width': '2px',
89
+ 'border-style': 'solid',
90
+ 'border-color': 'transparent',
91
+ 'border-radius': '999px',
92
+ 'padding': '8px 24px',
93
+ 'font-family': 'Roboto, sans-serif',
94
+ 'font-size': '14px',
95
+ 'font-weight': '500',
96
+ 'letter-spacing': '.7px',
97
+
98
+ 'background-hover': 'hsl(0, 0%, 90%)',
99
+ 'color-hover': 'hsl(0, 0%, 20%)',
100
+
101
+ 'background-disabled': 'hsl(0, 0%, 94%)',
102
+ 'color-disabled': 'hsl(0, 0%, 50%)'
103
+ },
104
+
105
+ cta: {
106
+ 'background': 'hsl(167, 89%, 43%)',
107
+ 'color': 'hsl(0, 0%, 98%)',
108
+
109
+ 'background-hover': 'hsl(167, 89%, 38%)',
110
+ 'color-hover': 'hsl(0, 0%, 98%)'
111
+ },
112
+
113
+ link: {
114
+ 'background': 'transparent',
115
+ 'border-color': 'transparent',
116
+
117
+ 'background-hover': 'transparent',
118
+ 'color-hover': '#00bd7e'
119
+ },
120
+
121
+ tab: {
122
+ 'border-style': 'solid',
123
+ 'border-color': 'transparent',
124
+ 'border-width': '4px 0 4px 0',
125
+ 'border-radius': '0',
126
+ 'padding': '16px 24px',
127
+
128
+ 'color-hover': 'hsl(0, 0%, 0%)',
129
+ 'background-hover': 'transparent',
130
+ 'border-color-hover': 'transparent',
131
+
132
+ 'border-color-focus': 'transparent'
133
+ },
134
+
135
+ 'tab-active': {
136
+ 'color': 'hsl(0, 0%, 2%)',
137
+ 'background': 'transparent',
138
+ 'border-style': 'solid',
139
+ 'border-color': 'transparent transparent hsl(0, 0%, 2%) transparent',
140
+ 'border-width': '4px 0 4px 0',
141
+ 'border-radius': '0',
142
+ 'padding': '16px 24px',
143
+
144
+ 'color-hover': 'hsl(0, 0%, 2%)',
145
+ 'background-hover': 'transparent',
146
+
147
+ 'border-color-focus': 'transparent transparent hsl(0, 0%, 2%) transparent'
148
+ },
149
+
150
+ tag: {
151
+ 'padding': '8px',
152
+ 'background': 'transparent',
153
+ 'color': 'hsl(0, 0%, 10%)',
154
+ 'border-width': '1px',
155
+ 'border-style': 'solid',
156
+ 'border-color': 'var(--separator-primary)',
157
+ 'border-radius': '6px',
158
+ 'font-size': '12px',
159
+
160
+ 'background-hover': 'hsl(0, 0%, 93%)',
161
+ 'color-hover': 'hsl(0, 0%, 0%)'
162
+ },
163
+
164
+ 'tag-active': {
165
+ 'padding': '8px',
166
+ 'background': 'hsl(0, 0%, 10%)',
167
+ 'color': 'hsl(0, 0%, 98%)',
168
+ 'border-width': '1px',
169
+ 'border-style': 'solid',
170
+ 'border-color': 'hsl(199, 98%, 43%)',
171
+ 'border-radius': '6px',
172
+ 'font-size': '12px',
173
+
174
+ 'background-hover': 'hsl(0, 0%, 30%)',
175
+ 'color-hover': 'hsl(0, 0%, 90%)'
176
+ },
177
+
178
+ },
179
+
180
+ card: {
181
+
182
+ default: {
183
+ 'background': 'transparent',
184
+ 'border-color': 'var(--separator-primary)',
185
+ 'border-style': 'solid',
186
+ 'border-width': '2px',
187
+ 'padding': 'var(--space-l)',
188
+ 'border-radius': '14px'
189
+ },
190
+
191
+ cover: {
192
+ 'padding': '0',
193
+ },
194
+
195
+ resume: {
196
+ 'background': 'var(--surface-primary)',
197
+ 'border-color': 'var(--separator-primary)',
198
+ 'border-style': 'solid',
199
+ 'border-width': '0 1px 0 0',
200
+ 'box-shadow': 'none',
201
+ 'padding': '24px 32px',
202
+ 'border-radius': '0'
203
+ },
204
+
205
+ hero: {
206
+ 'background': 'var(--surface-linear-gradient)',
207
+ 'border-color': 'transparent',
208
+ 'border-style': 'solid',
209
+ 'border-width': '1px',
210
+ 'box-shadow': 'none',
211
+ 'padding': 'var(--space-xl) var(--space-m)',
212
+ 'border-radius': '8px'
213
+ }
214
+
215
+ },
216
+
217
+ resume: {
218
+ 'background': 'var(--surface-primary)',
219
+ 'header-background': 'var(--surface-primary)',
220
+ 'header-border-bottom': '1px solid var(--separator-primary)',
221
+ 'header-padding': '0 24px',
222
+ }
223
+ }
@@ -0,0 +1,18 @@
1
+ import { Standard } from './standard.js'
2
+ import { topography } from './patterns/index.js'
3
+
4
+ export const OskarsSylwan = {
5
+ ...Standard,
6
+ // space: Standard.space,
7
+ // color: Standard.color,
8
+ // 'max-width': Standard['max-width'],
9
+ //
10
+ // title: Standard.title,
11
+ // text: Standard.text,
12
+ // button: Standard.button,
13
+ // card: Standard.card,
14
+ // separator: Standard.separator,
15
+ // surface: Standard.surface,
16
+ // surfaces: Standard.surfaces,
17
+ // resume: Standard.resume,
18
+ }
@@ -0,0 +1,255 @@
1
+ import { Standard } from './standard.js'
2
+ import { topography } from './patterns/index.js'
3
+
4
+ export const OskarsSylwan = {
5
+
6
+ space: Standard.space,
7
+ 'max-width': Standard['max-width'],
8
+
9
+ color: {
10
+ primary: 'hsl(0, 0%, 99%)',
11
+ secondary: 'hsl(199deg 98% 90%)',
12
+ accent: 'hsl(167, 89%, 43%)',
13
+ info: 'hsl(199deg 89% 43%)',
14
+ danger: 'hsl(0 89% 43%)',
15
+ 'alt-primary': 'hsl(199deg 98% 17%)',
16
+ 'alt-secondary': 'hsl(199, 98%, 10%)'
17
+ },
18
+
19
+ surface: {
20
+ 'primary': 'var(--color-primary)',
21
+ 'secondary': 'var(--color-secondary)',
22
+ 'accent': 'var(--color-accent)',
23
+ 'alt-primary': 'var(--color-alt-primary)',
24
+ 'alt-secondary': 'var(--color-alt-secondary)',
25
+ 'radial-gradient': 'radial-gradient(hsl(199deg 98% 85%) 0%, hsl(0deg 0% 100%) 80%)',
26
+ 'linear-gradient': 'linear-gradient(162deg, hsl(0deg 0% 100%) 0%, hsl(199deg 98% 99%) 100%)',
27
+ 'decorated': `
28
+ linear-gradient(180deg, var(--surface-primary) 0%, transparent 100%),
29
+ ${topography()},
30
+ linear-gradient(321deg, hsl(200, 80%, 85%) 0%, hsl(200, 100%, 97%) 20%, hsl(15, 100%, 95%) 80%, hsl(15, 100%, 85%) 100%)
31
+ `,
32
+ // 'alt': 'hsl(80, 45%, 95%)'
33
+ },
34
+
35
+ separator: {
36
+ primary: 'hsl(0, 0%, 90%)',
37
+ accent: 'hsl(167, 89%, 43%)'
38
+ },
39
+
40
+ title: {
41
+
42
+ default: {
43
+ 'font-family': 'Roboto, sans-serif',
44
+ 'color': 'var(--color-alt-primary)',
45
+ 'letter-spacing': '1px'
46
+ },
47
+
48
+ display: {
49
+ 'font-weight': '900',
50
+ 'line-height': '1.4',
51
+ 'font-size': 'min(54px, max(3.35vw, 32px))'
52
+ },
53
+
54
+ primary: {
55
+ 'font-size': '2rem',
56
+ 'font-weight': '900',
57
+ 'line-height': '1.2',
58
+ 'letter-spacing': '1px'
59
+ },
60
+
61
+ secondary: {
62
+ 'font-size': '1.5rem',
63
+ 'font-weight': '900',
64
+ 'line-height': '1.3',
65
+ 'letter-spacing': '1px'
66
+ },
67
+
68
+ tertiary: {
69
+ 'font-size': '1.25rem',
70
+ 'font-weight': '900',
71
+ 'line-height': '1.4',
72
+ 'letter-spacing': '0.25px'
73
+ },
74
+
75
+ lead: {
76
+ 'color': 'hsl(167, 89%, 43%)',
77
+ 'font-size': '1.2rem',
78
+ 'font-weight': '600',
79
+ 'line-height': '1.5',
80
+ 'letter-spacing': '0px'
81
+ },
82
+
83
+ },
84
+
85
+ text: {
86
+
87
+ default: {
88
+ 'font-family': 'Roboto, sans-serif',
89
+ 'font-weight': '300',
90
+ 'font-size': '1.1rem',
91
+ 'line-height': '1.6',
92
+ 'color': 'hsl(182, 23%, 30%)'
93
+ },
94
+
95
+ small: {
96
+ 'font-size': '.8rem',
97
+ 'line-height': '1.2',
98
+ }
99
+
100
+ },
101
+
102
+ button: {
103
+
104
+ default: {
105
+ 'font-family': 'Roboto, sans-serif',
106
+ 'background': 'transparent',
107
+ 'color': 'hsl(0, 0%, 50%)',
108
+ 'border-width': '2px',
109
+ 'border-style': 'solid',
110
+ 'border-color': 'transparent',
111
+ 'border-radius': '16px',
112
+ 'padding': '8px 24px',
113
+ 'font-size': '16px',
114
+ 'font-weight': '500',
115
+ 'letter-spacing': '.7px',
116
+
117
+ 'background-hover': 'hsl(0, 0%, 90%)',
118
+ 'color-hover': 'hsl(0, 0%, 20%)',
119
+
120
+ 'background-disabled': 'hsl(0, 0%, 94%)',
121
+ 'color-disabled': 'hsl(0, 0%, 50%)'
122
+ },
123
+
124
+ cta: {
125
+ 'background': 'var(--color-accent)',
126
+ 'color': 'var(--color-primary)',
127
+
128
+ 'background-hover': 'hsl(167, 89%, 38%)',
129
+ 'color-hover': 'hsl(0, 0%, 98%)'
130
+ },
131
+
132
+ link: {
133
+ 'font-weight': '300',
134
+ 'background': 'transparent',
135
+ 'border-color': 'transparent',
136
+
137
+ 'background-hover': 'transparent',
138
+ 'text-decoration-hover': 'underline'
139
+ },
140
+
141
+ 'link-alt': {
142
+ 'color': 'var(--color-primary)',
143
+ 'font-weight': '300',
144
+ 'background': 'transparent',
145
+ 'border-color': 'transparent',
146
+ 'padding': '0',
147
+
148
+ 'background-hover': 'transparent',
149
+ 'color-hover': 'var(--color-secondary)',
150
+ 'text-decoration-hover': 'underline'
151
+ },
152
+
153
+ tab: {
154
+ 'border-style': 'solid',
155
+ 'border-color': 'transparent',
156
+ 'border-width': '4px 0 4px 0',
157
+ 'border-radius': '0',
158
+ 'padding': '16px 24px',
159
+ 'font-weight': '300',
160
+ 'color': 'var(--color-alt-secondary)',
161
+
162
+ 'color-hover': 'var(--color-accent)',
163
+ 'background-hover': 'transparent',
164
+ 'border-color-hover': 'transparent transparent hsl(167, 89%, 43%) transparent',
165
+
166
+ 'border-color-focus': 'transparent transparent hsl(167, 89%, 43%) transparent'
167
+ },
168
+
169
+ 'tab-active': {
170
+ 'color': 'hsl(167, 89%, 43%)',
171
+ 'border-style': 'solid',
172
+ 'border-color': 'transparent transparent hsl(167, 89%, 43%) transparent',
173
+ 'border-width': '4px 0 4px 0',
174
+ 'border-radius': '0',
175
+ 'padding': '16px 24px',
176
+
177
+ 'background-hover': 'transparent',
178
+ 'color-hover': 'hsl(167, 89%, 43%)',
179
+
180
+ 'border-color-focus': 'transparent transparent hsl(167, 89%, 43%) transparent'
181
+ },
182
+
183
+ tag: {
184
+ 'padding': '8px',
185
+ 'background': 'hsl(0, 0%, 95%)',
186
+ 'color': 'hsl(0, 0%, 30%)',
187
+ 'border-width': '1px',
188
+ 'border-style': 'solid',
189
+ 'border-color': 'hsl(0, 0%, 90%)',
190
+ 'border-radius': '4px',
191
+ 'font-size': '12px',
192
+
193
+ 'background-hover': 'hsl(0, 0%, 90%)'
194
+ },
195
+
196
+ 'tag-active': {
197
+ 'active-padding': '8px',
198
+ 'active-background': 'hsla(199, 98%, 43%, .2)',
199
+ 'active-color': 'hsl(0, 0%, 20%)',
200
+ 'active-border-width': '1px',
201
+ 'active-border-style': 'solid',
202
+ 'active-border-color': 'hsl(199, 98%, 43%)',
203
+ 'active-border-radius': '4px',
204
+ 'active-font-size': '12px'
205
+ },
206
+
207
+ },
208
+
209
+ card: {
210
+
211
+ default: {
212
+ 'background': 'hsl(0, 0%, 100%)',
213
+ 'border-color': 'var(--separator-primary)',
214
+ 'border-style': 'solid',
215
+ 'border-width': '1px',
216
+ 'box-shadow': '3px 0 10px hsla(0, 0%, 85%, .75)',
217
+ 'padding': '32px',
218
+ 'border-radius': '8px'
219
+ },
220
+
221
+ cover: {
222
+ 'padding': '0',
223
+ },
224
+
225
+ resume: {
226
+ 'background': 'hsl(0, 0%, 100%)',
227
+ 'border-color': 'var(--separator-primary)',
228
+ 'border-style': 'solid',
229
+ 'border-width': '0 1px 0 0',
230
+ 'box-shadow': 'none',
231
+ 'padding': '24px 32px',
232
+ 'border-radius': '0'
233
+ },
234
+
235
+ hero: {
236
+ 'background': `
237
+ ${topography},
238
+ linear-gradient(321deg, hsl(200, 80%, 85%) 0%, hsl(200, 100%, 97%) 20%, hsl(15, 100%, 95%) 80%, hsl(15, 100%, 85%) 100%)
239
+ `,
240
+ 'border-color': 'transparent',
241
+ 'border-style': 'solid',
242
+ 'border-width': '1px',
243
+ 'box-shadow': '3px 0 10px hsla(0, 0%, 85%, .75)',
244
+ 'padding': 'var(--space-xl) var(--space-m)',
245
+ 'border-radius': '25px'
246
+ }
247
+
248
+ },
249
+
250
+ resume: {
251
+ 'header-border-bottom': '1px solid var(--separator-primary)',
252
+ 'header-padding': '0 24px',
253
+ 'background': 'var(--surface-linear-gradient)'
254
+ }
255
+ }