minolith 0.0.7 → 0.0.9

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.
Files changed (13) hide show
  1. package/dist/css/minolith.css +666 -539
  2. package/dist/css/minolith.css.map +1 -1
  3. package/dist/css/minolith.min.css +4 -3
  4. package/dist/css/minolith.min.css.map +1 -1
  5. package/package.json +1 -1
  6. package/src/base/normalize.scss +3 -3
  7. package/src/components/heading.scss +1 -0
  8. package/src/components/nav.scss +157 -157
  9. package/src/css-variables/typography.scss +4 -0
  10. package/src/mixins/responsive.scss +48 -56
  11. package/src/variables/color.scss +19 -11
  12. package/src/variables/miscellaneous.scss +3 -1
  13. package/src/variables/typography.scss +6 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "minolith",
3
- "version": "0.0.7",
3
+ "version": "0.0.9",
4
4
  "description": "design system by minominolyly",
5
5
  "main": "src/minolith.scss",
6
6
  "scripts": {
package/src/base/normalize.scss CHANGED
@@ -32,7 +32,7 @@ html {
32
32
  */
33
33
 
34
34
  body {
35
- font-family: var(--#{variables.$prefix}font-family-sans-serif);
35
+ font-family: var(--#{variables.$prefix}font-family-main);
36
36
  margin: 0;
37
37
  }
38
38
 
@@ -99,8 +99,8 @@ hr {
99
99
  */
100
100
 
101
101
  pre {
102
- font-family: var(--#{variables.$prefix}font-family-monospace);
103
- font-size: var(--#{variables.$prefix}font-family-monospace); /* 2 */
102
+ font-family: var(--#{variables.$prefix}font-family-code);
103
+ font-size: var(--#{variables.$prefix}font-size-normal); /* 2 */
104
104
  }
105
105
 
106
106
  /* Text-level semantics
package/src/components/heading.scss CHANGED
@@ -2,6 +2,7 @@
2
2
 
3
3
  @mixin heading() {
4
4
  display: block;
5
+ font-family: var(--#{variables.$prefix}font-family-heading);
5
6
  font-weight: var(--#{variables.$prefix}font-weight-semibold);
6
7
  margin: 0;
7
8
  }
package/src/components/nav.scss CHANGED
@@ -64,56 +64,56 @@
64
64
  padding: 0.5rem;
65
65
  position: relative;
66
66
  text-decoration: none;
67
- color: var(--color-default-fore);
68
- text-shadow: 2px 2px 1px var(--color-default-shadow),
69
- -2px 2px 1px var(--color-default-shadow),
70
- 2px -2px 1px var(--color-default-shadow),
71
- -2px -2px 1px var(--color-default-shadow),
72
- 2px 0px 1px var(--color-default-shadow),
73
- 0px 2px 1px var(--color-default-shadow),
74
- -2px 0px 1px var(--color-default-shadow),
75
- 0px -2px 1px var(--color-default-shadow);
67
+ color: var(--#{variables.$prefix}color-default-fore);
68
+ text-shadow: 2px 2px 1px var(--#{variables.$prefix}color-default-shadow),
69
+ -2px 2px 1px var(--#{variables.$prefix}color-default-shadow),
70
+ 2px -2px 1px var(--#{variables.$prefix}color-default-shadow),
71
+ -2px -2px 1px var(--#{variables.$prefix}color-default-shadow),
72
+ 2px 0px 1px var(--#{variables.$prefix}color-default-shadow),
73
+ 0px 2px 1px var(--#{variables.$prefix}color-default-shadow),
74
+ -2px 0px 1px var(--#{variables.$prefix}color-default-shadow),
75
+ 0px -2px 1px var(--#{variables.$prefix}color-default-shadow);
76
76
  .icon {
77
- filter: drop-shadow(2px 2px 1px var(--color-default-shadow))
78
- drop-shadow(-2px 2px 1px var(--color-default-shadow))
79
- drop-shadow(2px -2px 1px var(--color-default-shadow))
80
- drop-shadow(-2px -2px 1px var(--color-default-shadow));
77
+ filter: drop-shadow(2px 2px 1px var(--#{variables.$prefix}color-default-shadow))
78
+ drop-shadow(-2px 2px 1px var(--#{variables.$prefix}color-default-shadow))
79
+ drop-shadow(2px -2px 1px var(--#{variables.$prefix}color-default-shadow))
80
+ drop-shadow(-2px -2px 1px var(--#{variables.$prefix}color-default-shadow));
81
81
  }
82
82
  &:hover {
83
- color: var(--color-default-fore-hover);
84
- text-shadow: 2px 2px 1px var(--color-default-hover-shadow),
85
- -2px 2px 1px var(--color-default-hover-shadow),
86
- 2px -2px 1px var(--color-default-hover-shadow),
87
- -2px -2px 1px var(--color-default-hover-shadow),
88
- 2px 0px 1px var(--color-default-hover-shadow),
89
- 0px 2px 1px var(--color-default-hover-shadow),
90
- -2px 0px 1px var(--color-default-hover-shadow),
91
- 0px -2px 1px var(--color-default-hover-shadow);
83
+ color: var(--#{variables.$prefix}color-default-fore-hover);
84
+ text-shadow: 2px 2px 1px var(--#{variables.$prefix}color-default-hover-shadow),
85
+ -2px 2px 1px var(--#{variables.$prefix}color-default-hover-shadow),
86
+ 2px -2px 1px var(--#{variables.$prefix}color-default-hover-shadow),
87
+ -2px -2px 1px var(--#{variables.$prefix}color-default-hover-shadow),
88
+ 2px 0px 1px var(--#{variables.$prefix}color-default-hover-shadow),
89
+ 0px 2px 1px var(--#{variables.$prefix}color-default-hover-shadow),
90
+ -2px 0px 1px var(--#{variables.$prefix}color-default-hover-shadow),
91
+ 0px -2px 1px var(--#{variables.$prefix}color-default-hover-shadow);
92
92
  opacity: 0.8;
93
93
  .icon {
94
- filter: drop-shadow(2px 2px 1px var(--color-default-hover-shadow))
95
- drop-shadow(-2px 2px 1px var(--color-default-hover-shadow))
96
- drop-shadow(2px -2px 1px var(--color-default-hover-shadow))
97
- drop-shadow(-2px -2px 1px var(--color-default-hover-shadow));
94
+ filter: drop-shadow(2px 2px 1px var(--#{variables.$prefix}color-default-hover-shadow))
95
+ drop-shadow(-2px 2px 1px var(--#{variables.$prefix}color-default-hover-shadow))
96
+ drop-shadow(2px -2px 1px var(--#{variables.$prefix}color-default-hover-shadow))
97
+ drop-shadow(-2px -2px 1px var(--#{variables.$prefix}color-default-hover-shadow));
98
98
  }
99
99
  }
100
100
  &:active {
101
- color: var(--color-default-fore-active);
102
- text-shadow: 2px 2px 1px var(--color-default-active-shadow),
103
- -2px 2px 1px var(--color-default-active-shadow),
104
- 2px -2px 1px var(--color-default-active-shadow),
105
- -2px -2px 1px var(--color-default-active-shadow),
106
- 2px 0px 1px var(--color-default-active-shadow),
107
- 0px 2px 1px var(--color-default-active-shadow),
108
- -2px 0px 1px var(--color-default-active-shadow),
109
- 0px -2px 1px var(--color-default-active-shadow);
101
+ color: var(--#{variables.$prefix}color-default-fore-active);
102
+ text-shadow: 2px 2px 1px var(--#{variables.$prefix}color-default-active-shadow),
103
+ -2px 2px 1px var(--#{variables.$prefix}color-default-active-shadow),
104
+ 2px -2px 1px var(--#{variables.$prefix}color-default-active-shadow),
105
+ -2px -2px 1px var(--#{variables.$prefix}color-default-active-shadow),
106
+ 2px 0px 1px var(--#{variables.$prefix}color-default-active-shadow),
107
+ 0px 2px 1px var(--#{variables.$prefix}color-default-active-shadow),
108
+ -2px 0px 1px var(--#{variables.$prefix}color-default-active-shadow),
109
+ 0px -2px 1px var(--#{variables.$prefix}color-default-active-shadow);
110
110
  .icon {
111
111
  filter: drop-shadow(
112
- 2px 2px 1px var(--color-default-active-shadow)
112
+ 2px 2px 1px var(--#{variables.$prefix}color-default-active-shadow)
113
113
  )
114
- drop-shadow(-2px 2px 1px var(--color-default-active-shadow))
115
- drop-shadow(2px -2px 1px var(--color-default-active-shadow))
116
- drop-shadow(-2px -2px 1px var(--color-default-active-shadow));
114
+ drop-shadow(-2px 2px 1px var(--#{variables.$prefix}color-default-active-shadow))
115
+ drop-shadow(2px -2px 1px var(--#{variables.$prefix}color-default-active-shadow))
116
+ drop-shadow(-2px -2px 1px var(--#{variables.$prefix}color-default-active-shadow));
117
117
  }
118
118
  }
119
119
  }
@@ -162,7 +162,7 @@
162
162
  display: block;
163
163
  }
164
164
  .nav-menu-item {
165
- color: var(--color-default-fore);
165
+ color: var(--#{variables.$prefix}color-default-fore);
166
166
  width: 100%;
167
167
  display: block;
168
168
  cursor: pointer;
@@ -172,54 +172,54 @@
172
172
  padding: 0.5rem;
173
173
  position: relative;
174
174
  text-decoration: none;
175
- text-shadow: 2px 2px 1px var(--color-default-shadow),
176
- -2px 2px 1px var(--color-default-shadow),
177
- 2px -2px 1px var(--color-default-shadow),
178
- -2px -2px 1px var(--color-default-shadow),
179
- 2px 0px 1px var(--color-default-shadow),
180
- 0px 2px 1px var(--color-default-shadow),
181
- -2px 0px 1px var(--color-default-shadow),
182
- 0px -2px 1px var(--color-default-shadow);
175
+ text-shadow: 2px 2px 1px var(--#{variables.$prefix}color-default-shadow),
176
+ -2px 2px 1px var(--#{variables.$prefix}color-default-shadow),
177
+ 2px -2px 1px var(--#{variables.$prefix}color-default-shadow),
178
+ -2px -2px 1px var(--#{variables.$prefix}color-default-shadow),
179
+ 2px 0px 1px var(--#{variables.$prefix}color-default-shadow),
180
+ 0px 2px 1px var(--#{variables.$prefix}color-default-shadow),
181
+ -2px 0px 1px var(--#{variables.$prefix}color-default-shadow),
182
+ 0px -2px 1px var(--#{variables.$prefix}color-default-shadow);
183
183
  .icon {
184
- filter: drop-shadow(2px 2px 1px var(--color-default-shadow))
185
- drop-shadow(-2px 2px 1px var(--color-default-shadow))
186
- drop-shadow(2px -2px 1px var(--color-default-shadow))
187
- drop-shadow(-2px -2px 1px var(--color-default-shadow));
184
+ filter: drop-shadow(2px 2px 1px var(--#{variables.$prefix}color-default-shadow))
185
+ drop-shadow(-2px 2px 1px var(--#{variables.$prefix}color-default-shadow))
186
+ drop-shadow(2px -2px 1px var(--#{variables.$prefix}color-default-shadow))
187
+ drop-shadow(-2px -2px 1px var(--#{variables.$prefix}color-default-shadow));
188
188
  }
189
189
  &:hover {
190
- color: var(--color-default-fore-hover);
191
- text-shadow: 2px 2px 1px var(--color-default-hover-shadow),
192
- -2px 2px 1px var(--color-default-hover-shadow),
193
- 2px -2px 1px var(--color-default-hover-shadow),
194
- -2px -2px 1px var(--color-default-hover-shadow),
195
- 2px 0px 1px var(--color-default-hover-shadow),
196
- 0px 2px 1px var(--color-default-hover-shadow),
197
- -2px 0px 1px var(--color-default-hover-shadow),
198
- 0px -2px 1px var(--color-default-hover-shadow);
190
+ color: var(--#{variables.$prefix}color-default-fore-hover);
191
+ text-shadow: 2px 2px 1px var(--#{variables.$prefix}color-default-hover-shadow),
192
+ -2px 2px 1px var(--#{variables.$prefix}color-default-hover-shadow),
193
+ 2px -2px 1px var(--#{variables.$prefix}color-default-hover-shadow),
194
+ -2px -2px 1px var(--#{variables.$prefix}color-default-hover-shadow),
195
+ 2px 0px 1px var(--#{variables.$prefix}color-default-hover-shadow),
196
+ 0px 2px 1px var(--#{variables.$prefix}color-default-hover-shadow),
197
+ -2px 0px 1px var(--#{variables.$prefix}color-default-hover-shadow),
198
+ 0px -2px 1px var(--#{variables.$prefix}color-default-hover-shadow);
199
199
  .icon {
200
- filter: drop-shadow(2px 2px 1px var(--color-default-hover-shadow))
201
- drop-shadow(-2px 2px 1px var(--color-default-hover-shadow))
202
- drop-shadow(2px -2px 1px var(--color-default-hover-shadow))
203
- drop-shadow(-2px -2px 1px var(--color-default-hover-shadow));
200
+ filter: drop-shadow(2px 2px 1px var(--#{variables.$prefix}color-default-hover-shadow))
201
+ drop-shadow(-2px 2px 1px var(--#{variables.$prefix}color-default-hover-shadow))
202
+ drop-shadow(2px -2px 1px var(--#{variables.$prefix}color-default-hover-shadow))
203
+ drop-shadow(-2px -2px 1px var(--#{variables.$prefix}color-default-hover-shadow));
204
204
  }
205
205
  }
206
206
  &:active {
207
- color: var(--color-default-fore-active);
208
- text-shadow: 2px 2px 1px var(--color-default-active-shadow),
209
- -2px 2px 1px var(--color-default-active-shadow),
210
- 2px -2px 1px var(--color-default-active-shadow),
211
- -2px -2px 1px var(--color-default-active-shadow),
212
- 2px 0px 1px var(--color-default-active-shadow),
213
- 0px 2px 1px var(--color-default-active-shadow),
214
- -2px 0px 1px var(--color-default-active-shadow),
215
- 0px -2px 1px var(--color-default-active-shadow);
207
+ color: var(--#{variables.$prefix}color-default-fore-active);
208
+ text-shadow: 2px 2px 1px var(--#{variables.$prefix}color-default-active-shadow),
209
+ -2px 2px 1px var(--#{variables.$prefix}color-default-active-shadow),
210
+ 2px -2px 1px var(--#{variables.$prefix}color-default-active-shadow),
211
+ -2px -2px 1px var(--#{variables.$prefix}color-default-active-shadow),
212
+ 2px 0px 1px var(--#{variables.$prefix}color-default-active-shadow),
213
+ 0px 2px 1px var(--#{variables.$prefix}color-default-active-shadow),
214
+ -2px 0px 1px var(--#{variables.$prefix}color-default-active-shadow),
215
+ 0px -2px 1px var(--#{variables.$prefix}color-default-active-shadow);
216
216
  .icon {
217
217
  filter: drop-shadow(
218
- 2px 2px 1px var(--color-default-active-shadow)
218
+ 2px 2px 1px var(--#{variables.$prefix}color-default-active-shadow)
219
219
  )
220
- drop-shadow(-2px 2px 1px var(--color-default-active-shadow))
221
- drop-shadow(2px -2px 1px var(--color-default-active-shadow))
222
- drop-shadow(-2px -2px 1px var(--color-default-active-shadow));
220
+ drop-shadow(-2px 2px 1px var(--#{variables.$prefix}color-default-active-shadow))
221
+ drop-shadow(2px -2px 1px var(--#{variables.$prefix}color-default-active-shadow))
222
+ drop-shadow(-2px -2px 1px var(--#{variables.$prefix}color-default-active-shadow));
223
223
  }
224
224
  }
225
225
  }
@@ -230,73 +230,73 @@
230
230
  @each $color in variables.$colors {
231
231
  $colorName: map.get($color, "name");
232
232
  &.is-#{$colorName} {
233
- color: var(--color-#{$colorName}-fore);
233
+ color: var(--#{variables.$prefix}color-#{$colorName}-fore);
234
234
  .nav-accordion {
235
235
  .nav-menu {
236
236
  .nav-menu-item {
237
- color: var(--color-#{$colorName}-fore);
238
- text-shadow: 2px 2px 1px var(--color-#{$colorName}-shadow),
239
- -2px 2px 1px var(--color-#{$colorName}-shadow),
240
- 2px -2px 1px var(--color-#{$colorName}-shadow),
241
- -2px -2px 1px var(--color-#{$colorName}-shadow),
242
- 2px 0px 1px var(--color-#{$colorName}-shadow),
243
- 0px 2px 1px var(--color-#{$colorName}-shadow),
244
- -2px 0px 1px var(--color-#{$colorName}-shadow),
245
- 0px -2px 1px var(--color-#{$colorName}-shadow);
237
+ color: var(--#{variables.$prefix}color-#{$colorName}-fore);
238
+ text-shadow: 2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow),
239
+ -2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow),
240
+ 2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow),
241
+ -2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow),
242
+ 2px 0px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow),
243
+ 0px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow),
244
+ -2px 0px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow),
245
+ 0px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow);
246
246
  .icon {
247
- filter: drop-shadow(2px 2px 1px var(--color-#{$colorName}-shadow))
248
- drop-shadow(-2px 2px 1px var(--color-#{$colorName}-shadow))
249
- drop-shadow(2px -2px 1px var(--color-#{$colorName}-shadow))
250
- drop-shadow(-2px -2px 1px var(--color-#{$colorName}-shadow));
247
+ filter: drop-shadow(2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow))
248
+ drop-shadow(-2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow))
249
+ drop-shadow(2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow))
250
+ drop-shadow(-2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow));
251
251
  }
252
252
  &:hover {
253
- color: var(--color-#{$colorName}-fore-hover);
254
- text-shadow: 2px 2px 1px var(--color-#{$colorName}-hover-shadow),
255
- -2px 2px 1px var(--color-#{$colorName}-hover-shadow),
256
- 2px -2px 1px var(--color-#{$colorName}-hover-shadow),
257
- -2px -2px 1px var(--color-#{$colorName}-hover-shadow),
258
- 2px 0px 1px var(--color-#{$colorName}-hover-shadow),
259
- 0px 2px 1px var(--color-#{$colorName}-hover-shadow),
260
- -2px 0px 1px var(--color-#{$colorName}-hover-shadow),
261
- 0px -2px 1px var(--color-#{$colorName}-hover-shadow);
253
+ color: var(--#{variables.$prefix}color-#{$colorName}-fore-hover);
254
+ text-shadow: 2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow),
255
+ -2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow),
256
+ 2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow),
257
+ -2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow),
258
+ 2px 0px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow),
259
+ 0px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow),
260
+ -2px 0px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow),
261
+ 0px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow);
262
262
  opacity: 0.8;
263
263
  .icon {
264
264
  filter: drop-shadow(
265
- 2px 2px 1px var(--color-#{$colorName}-hover-shadow)
265
+ 2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow)
266
266
  )
267
267
  drop-shadow(
268
- -2px 2px 1px var(--color-#{$colorName}-hover-shadow)
268
+ -2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow)
269
269
  )
270
270
  drop-shadow(
271
- 2px -2px 1px var(--color-#{$colorName}-hover-shadow)
271
+ 2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow)
272
272
  )
273
273
  drop-shadow(
274
- -2px -2px 1px var(--color-#{$colorName}-hover-shadow)
274
+ -2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow)
275
275
  );
276
276
  }
277
277
  }
278
278
  &:active {
279
- color: var(--color-#{$colorName}-fore-active);
280
- text-shadow: 2px 2px 1px var(--color-#{$colorName}-active-shadow),
281
- -2px 2px 1px var(--color-#{$colorName}-active-shadow),
282
- 2px -2px 1px var(--color-#{$colorName}-active-shadow),
283
- -2px -2px 1px var(--color-#{$colorName}-active-shadow),
284
- 2px 0px 1px var(--color-#{$colorName}-active-shadow),
285
- 0px 2px 1px var(--color-#{$colorName}-active-shadow),
286
- -2px 0px 1px var(--color-#{$colorName}-active-shadow),
287
- 0px -2px 1px var(--color-#{$colorName}-active-shadow);
279
+ color: var(--#{variables.$prefix}color-#{$colorName}-fore-active);
280
+ text-shadow: 2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow),
281
+ -2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow),
282
+ 2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow),
283
+ -2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow),
284
+ 2px 0px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow),
285
+ 0px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow),
286
+ -2px 0px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow),
287
+ 0px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow);
288
288
  .icon {
289
289
  filter: drop-shadow(
290
- 2px 2px 1px var(--color-#{$colorName}-active-shadow)
290
+ 2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow)
291
291
  )
292
292
  drop-shadow(
293
- -2px 2px 1px var(--color-#{$colorName}-active-shadow)
293
+ -2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow)
294
294
  )
295
295
  drop-shadow(
296
- 2px -2px 1px var(--color-#{$colorName}-active-shadow)
296
+ 2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow)
297
297
  )
298
298
  drop-shadow(
299
- -2px -2px 1px var(--color-#{$colorName}-active-shadow)
299
+ -2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow)
300
300
  );
301
301
  }
302
302
  }
@@ -307,61 +307,61 @@
307
307
  .nav-static {
308
308
  .nav-menu {
309
309
  .nav-menu-item {
310
- color: var(--color-#{$colorName}-fore);
311
- text-shadow: 2px 2px 1px var(--color-#{$colorName}-shadow),
312
- -2px 2px 1px var(--color-#{$colorName}-shadow),
313
- 2px -2px 1px var(--color-#{$colorName}-shadow),
314
- -2px -2px 1px var(--color-#{$colorName}-shadow),
315
- 2px 0px 1px var(--color-#{$colorName}-shadow),
316
- 0px 2px 1px var(--color-#{$colorName}-shadow),
317
- -2px 0px 1px var(--color-#{$colorName}-shadow),
318
- 0px -2px 1px var(--color-#{$colorName}-shadow);
310
+ color: var(--#{variables.$prefix}color-#{$colorName}-fore);
311
+ text-shadow: 2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow),
312
+ -2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow),
313
+ 2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow),
314
+ -2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow),
315
+ 2px 0px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow),
316
+ 0px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow),
317
+ -2px 0px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow),
318
+ 0px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow);
319
319
  .icon {
320
- filter: drop-shadow(2px 2px 1px var(--color-#{$colorName}-shadow))
321
- drop-shadow(-2px 2px 1px var(--color-#{$colorName}-shadow))
322
- drop-shadow(2px -2px 1px var(--color-#{$colorName}-shadow))
323
- drop-shadow(-2px -2px 1px var(--color-#{$colorName}-shadow));
320
+ filter: drop-shadow(2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow))
321
+ drop-shadow(-2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow))
322
+ drop-shadow(2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow))
323
+ drop-shadow(-2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-shadow));
324
324
  }
325
325
  &:hover {
326
- color: var(--color-#{$colorName}-fore-hover);
327
- text-shadow: 2px 2px 1px var(--color-#{$colorName}-hover-shadow),
328
- -2px 2px 1px var(--color-#{$colorName}-hover-shadow),
329
- 2px -2px 1px var(--color-#{$colorName}-hover-shadow),
330
- -2px -2px 1px var(--color-#{$colorName}-hover-shadow),
331
- 2px 0px 1px var(--color-#{$colorName}-hover-shadow),
332
- 0px 2px 1px var(--color-#{$colorName}-hover-shadow),
333
- -2px 0px 1px var(--color-#{$colorName}-hover-shadow),
334
- 0px -2px 1px var(--color-#{$colorName}-hover-shadow);
326
+ color: var(--#{variables.$prefix}color-#{$colorName}-fore-hover);
327
+ text-shadow: 2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow),
328
+ -2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow),
329
+ 2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow),
330
+ -2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow),
331
+ 2px 0px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow),
332
+ 0px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow),
333
+ -2px 0px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow),
334
+ 0px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow);
335
335
  opacity: 0.8;
336
336
  .icon {
337
337
  filter: drop-shadow(
338
- 2px 2px 1px var(--color-#{$colorName}-hover-shadow)
338
+ 2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow)
339
339
  )
340
- drop-shadow(-2px 2px 1px var(--color-#{$colorName}-hover-shadow))
341
- drop-shadow(2px -2px 1px var(--color-#{$colorName}-hover-shadow))
340
+ drop-shadow(-2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow))
341
+ drop-shadow(2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow))
342
342
  drop-shadow(
343
- -2px -2px 1px var(--color-#{$colorName}-hover-shadow)
343
+ -2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-hover-shadow)
344
344
  );
345
345
  }
346
346
  }
347
347
  &:active {
348
- color: var(--color-#{$colorName}-fore-active);
349
- text-shadow: 2px 2px 1px var(--color-#{$colorName}-active-shadow),
350
- -2px 2px 1px var(--color-#{$colorName}-active-shadow),
351
- 2px -2px 1px var(--color-#{$colorName}-active-shadow),
352
- -2px -2px 1px var(--color-#{$colorName}-active-shadow),
353
- 2px 0px 1px var(--color-#{$colorName}-active-shadow),
354
- 0px 2px 1px var(--color-#{$colorName}-active-shadow),
355
- -2px 0px 1px var(--color-#{$colorName}-active-shadow),
356
- 0px -2px 1px var(--color-#{$colorName}-active-shadow);
348
+ color: var(--#{variables.$prefix}color-#{$colorName}-fore-active);
349
+ text-shadow: 2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow),
350
+ -2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow),
351
+ 2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow),
352
+ -2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow),
353
+ 2px 0px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow),
354
+ 0px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow),
355
+ -2px 0px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow),
356
+ 0px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow);
357
357
  .icon {
358
358
  filter: drop-shadow(
359
- 2px 2px 1px var(--color-#{$colorName}-active-shadow)
359
+ 2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow)
360
360
  )
361
- drop-shadow(-2px 2px 1px var(--color-#{$colorName}-active-shadow))
362
- drop-shadow(2px -2px 1px var(--color-#{$colorName}-active-shadow))
361
+ drop-shadow(-2px 2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow))
362
+ drop-shadow(2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow))
363
363
  drop-shadow(
364
- -2px -2px 1px var(--color-#{$colorName}-active-shadow)
364
+ -2px -2px 1px var(--#{variables.$prefix}color-#{$colorName}-active-shadow)
365
365
  );
366
366
  }
367
367
  }
package/src/css-variables/typography.scss CHANGED
@@ -1,8 +1,12 @@
1
1
  @use "../variables/index.scss" as variables;
2
2
 
3
3
  :root {
4
+ --#{variables.$prefix}font-family-serif: #{variables.$font-family-serif};
4
5
  --#{variables.$prefix}font-family-sans-serif: #{variables.$font-family-sans-serif};
5
6
  --#{variables.$prefix}font-family-monospace: #{variables.$font-family-monospace};
7
+ --#{variables.$prefix}font-family-main: var(--#{variables.$prefix}font-family-sans-serif);
8
+ --#{variables.$prefix}font-family-heading: var(--#{variables.$prefix}font-family-sans-serif);
9
+ --#{variables.$prefix}font-family-code: var(--#{variables.$prefix}font-family-monospace);
6
10
  --#{variables.$prefix}font-size-xsmall: #{variables.$font-size-xsmall};
7
11
  --#{variables.$prefix}font-size-small: #{variables.$font-size-small};
8
12
  --#{variables.$prefix}font-size-normal: #{variables.$font-size-normal};