@ossy/themes 0.0.1-alpha → 0.0.2-alpha

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