lumina-sass 2.4.2 → 2.6.2
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 +1 -1
- package/src/flexbox/_flexbox-row.sass +3 -0
- package/src/mix/_buttons.sass +36 -0
- package/src/mix/_elements.sass +34 -0
- package/src/mix/_index.sass +4 -1
- package/src/mix/_misc-styling.sass +3 -0
- package/src/mix/_typography.sass +64 -8
- package/src/test/mixins.spec.sass +148 -2
package/package.json
CHANGED
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
@use 'sass:color'
|
|
2
|
+
@use 'misc-styling' as *
|
|
3
|
+
@use 'typography' as typo
|
|
4
|
+
@use '../color/palette/groovy-70s' as *
|
|
5
|
+
|
|
6
|
+
@mixin base-btn($bg-color: $groovy-70s-cream, $text-color: $groovy-70s-warm-white, $border-color: null, $size: 1em, $weight: bold)
|
|
7
|
+
|
|
8
|
+
@if $border-color == null
|
|
9
|
+
border: none
|
|
10
|
+
@else
|
|
11
|
+
border: 1px solid $border-color
|
|
12
|
+
|
|
13
|
+
margin: 0.5em
|
|
14
|
+
cursor: pointer
|
|
15
|
+
position: relative
|
|
16
|
+
padding: 0.5em 1.5em
|
|
17
|
+
border-radius: 0.5em
|
|
18
|
+
display: inline-block
|
|
19
|
+
transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.2s
|
|
20
|
+
|
|
21
|
+
@include background-color($bg-color, $text-color)
|
|
22
|
+
@include typo.font($size: $size, $weight: $weight)
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
&:hover
|
|
26
|
+
transform: scale(1.05)
|
|
27
|
+
background-color: color.adjust($bg-color, $lightness: -5%)
|
|
28
|
+
|
|
29
|
+
&:active
|
|
30
|
+
transform: scale(0.95)
|
|
31
|
+
background-color: color.adjust($bg-color, $lightness: -10%)
|
|
32
|
+
|
|
33
|
+
&:disabled
|
|
34
|
+
opacity: 0.3
|
|
35
|
+
cursor: not-allowed
|
|
36
|
+
pointer-events: none
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
@use 'typography' as typo
|
|
2
|
+
@use '../color/alerts' as *
|
|
3
|
+
|
|
4
|
+
@mixin link-color($color, $color-hover, $color-active, $color-visited)
|
|
5
|
+
|
|
6
|
+
a
|
|
7
|
+
[aria-disabled="true"]
|
|
8
|
+
color: $disabled
|
|
9
|
+
cursor: not-allowed
|
|
10
|
+
pointer-events: none
|
|
11
|
+
text-decoration: none
|
|
12
|
+
|
|
13
|
+
&:active
|
|
14
|
+
color: $color-active
|
|
15
|
+
|
|
16
|
+
&.external-link
|
|
17
|
+
text-decoration: underline
|
|
18
|
+
|
|
19
|
+
@media (hover: hover)
|
|
20
|
+
|
|
21
|
+
&:hover
|
|
22
|
+
color: $color-hover
|
|
23
|
+
border-radius: 0.5em
|
|
24
|
+
|
|
25
|
+
&:visited
|
|
26
|
+
color: $color-visited
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
h1, h2, h3, h4, h5, h6
|
|
30
|
+
color: $color !important
|
|
31
|
+
|
|
32
|
+
color: $color
|
|
33
|
+
cursor: pointer
|
|
34
|
+
@include typo.text-adjustments()
|
package/src/mix/_index.sass
CHANGED
package/src/mix/_typography.sass
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
|
|
2
2
|
@use 'sass:map'
|
|
3
3
|
@use 'sass:list'
|
|
4
|
+
@use 'sass:meta'
|
|
5
|
+
@use 'sass:string'
|
|
4
6
|
@use '../map/fonts' as fonts
|
|
5
7
|
|
|
6
8
|
@mixin text-wrap-safe($inline: 0)
|
|
@@ -14,8 +16,18 @@
|
|
|
14
16
|
@mixin font-style($font, $family: null, $line-height: null, $variant: null)
|
|
15
17
|
$detected-family: font-family-of($font)
|
|
16
18
|
|
|
17
|
-
@if $
|
|
19
|
+
@if is-known-font($font)
|
|
18
20
|
$family: $detected-family
|
|
21
|
+
|
|
22
|
+
@else if $family == null
|
|
23
|
+
$family: $detected-family
|
|
24
|
+
@if $font != null
|
|
25
|
+
@warn "Font '#{$font}' not found in configuration map. Defaulting to stack: '#{$font}', #{$family}."
|
|
26
|
+
|
|
27
|
+
@if meta.type-of($font) == 'list'
|
|
28
|
+
$last: list.nth($font, list.length($font))
|
|
29
|
+
@if $last == $family
|
|
30
|
+
$family: null
|
|
19
31
|
|
|
20
32
|
@if $line-height != null
|
|
21
33
|
line-height: $line-height
|
|
@@ -23,11 +35,13 @@
|
|
|
23
35
|
@if $variant != null
|
|
24
36
|
font-variant: $variant
|
|
25
37
|
|
|
26
|
-
|
|
38
|
+
@if $font != null
|
|
39
|
+
font-family: $font, $family
|
|
40
|
+
@else
|
|
41
|
+
font-family: $family
|
|
27
42
|
|
|
28
43
|
@mixin font( $font:null, $size: 1rem, $family: null, $style: null, $weight: null, $line-height: null, $variant: null)
|
|
29
|
-
@
|
|
30
|
-
@include font-style($font, $family, $line-height, $variant)
|
|
44
|
+
@include font-style($font, $family, $line-height, $variant)
|
|
31
45
|
|
|
32
46
|
@if $size != null
|
|
33
47
|
font-size: $size
|
|
@@ -41,17 +55,46 @@
|
|
|
41
55
|
@if $variant != null
|
|
42
56
|
font-variant: $variant
|
|
43
57
|
|
|
44
|
-
@
|
|
58
|
+
@function get-default-stack($category)
|
|
59
|
+
@if not map.has-key(fonts.$fonts, $category)
|
|
60
|
+
@return null
|
|
61
|
+
$map: map.get(fonts.$fonts, $category)
|
|
62
|
+
$keys: map.keys($map)
|
|
63
|
+
$generic: $category
|
|
64
|
+
@if $category == 'mono'
|
|
65
|
+
$generic: monospace
|
|
66
|
+
@return list.append($keys, $generic)
|
|
67
|
+
|
|
68
|
+
@mixin sans-serif($font: null, $size: 1rem, $weight: null, $style: null)
|
|
69
|
+
@if $font == null
|
|
70
|
+
$font: get-default-stack('sans-serif')
|
|
45
71
|
@include font($font, $size, sans-serif, $style, $weight)
|
|
46
72
|
|
|
47
|
-
@mixin serif($font, $size: 1rem, $weight: null, $style: null)
|
|
73
|
+
@mixin serif($font: null, $size: 1rem, $weight: null, $style: null)
|
|
74
|
+
@if $font == null
|
|
75
|
+
$font: get-default-stack('serif')
|
|
48
76
|
@include font($font, $size, serif, $style, $weight)
|
|
49
77
|
|
|
50
|
-
@mixin monospace($font, $size: 1rem, $weight: null, $style: null)
|
|
78
|
+
@mixin monospace($font: null, $size: 1rem, $weight: null, $style: null)
|
|
79
|
+
@if $font == null
|
|
80
|
+
$font: get-default-stack('mono')
|
|
51
81
|
@include font($font, $size, monospace, $style, $weight)
|
|
52
82
|
|
|
83
|
+
@function is-known-font($font)
|
|
84
|
+
@if $font == null
|
|
85
|
+
@return false
|
|
86
|
+
@if map.has-key(fonts.$fonts, $font)
|
|
87
|
+
@return true
|
|
88
|
+
@each $category, $map in fonts.$fonts
|
|
89
|
+
@if map.has-key($map, $font)
|
|
90
|
+
@return true
|
|
91
|
+
@return false
|
|
92
|
+
|
|
53
93
|
// Helper: return the generic family for a given font name using the fonts map.
|
|
54
94
|
@function font-family-of($font)
|
|
95
|
+
@if $font == null
|
|
96
|
+
@return ('Nunito', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif)
|
|
97
|
+
|
|
55
98
|
@if map.has-key(fonts.$fonts, $font)
|
|
56
99
|
@if $font == 'mono'
|
|
57
100
|
@return monospace
|
|
@@ -60,4 +103,17 @@
|
|
|
60
103
|
@each $category, $map in fonts.$fonts
|
|
61
104
|
@if map.has-key($map, $font)
|
|
62
105
|
@return map.get($map, $font)
|
|
63
|
-
|
|
106
|
+
|
|
107
|
+
// Default fallback stack when font is not found
|
|
108
|
+
@return ('Nunito', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif)
|
|
109
|
+
|
|
110
|
+
@mixin text-adjustments($alignment: null, $decoration: null)
|
|
111
|
+
@if $alignment != null
|
|
112
|
+
text-align: $alignment
|
|
113
|
+
|
|
114
|
+
@if $decoration != null
|
|
115
|
+
text-decoration: $decoration
|
|
116
|
+
|
|
117
|
+
@if $alignment == null and $decoration == null
|
|
118
|
+
text-decoration: none
|
|
119
|
+
@warn "No parameters provided for text-adjustments mixin. Default value present."
|
|
@@ -1,8 +1,11 @@
|
|
|
1
1
|
@use 'sass:meta'
|
|
2
|
-
@use '../../node_modules/sass-true' as true
|
|
3
|
-
@use '../mix/_generators' as generators
|
|
4
2
|
@use '../mix/_media' as media
|
|
5
3
|
@use '../mix/_typography' as typo
|
|
4
|
+
@use '../mix/_buttons' as buttons
|
|
5
|
+
@use '../mix/_elements' as elements
|
|
6
|
+
@use '../mix/_generators' as generators
|
|
7
|
+
@use '../mix/_misc-styling' as misc-styling
|
|
8
|
+
@use '../../node_modules/sass-true' as true
|
|
6
9
|
|
|
7
10
|
@include true.test-module('Icon Generator')
|
|
8
11
|
@include true.test('Generates school icon class')
|
|
@@ -139,6 +142,69 @@
|
|
|
139
142
|
@include true.assert-equal(typo.font-family-of('mono'), monospace)
|
|
140
143
|
@include true.assert-equal(typo.font-family-of('serif'), serif)
|
|
141
144
|
|
|
145
|
+
@include true.test('Provides fallbacks for unknown fonts in font-family-of')
|
|
146
|
+
@include true.assert-equal(typo.font-family-of('MyCustomFont'), ('Nunito', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif))
|
|
147
|
+
|
|
148
|
+
@include true.test('Generates fallback for unknown font')
|
|
149
|
+
@include true.assert
|
|
150
|
+
@include true.output
|
|
151
|
+
@include typo.font('MyCustomFont')
|
|
152
|
+
|
|
153
|
+
@include true.expect
|
|
154
|
+
font-family: "MyCustomFont", "Nunito", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif
|
|
155
|
+
|
|
156
|
+
@include true.test('Generates fallback for unknown font')
|
|
157
|
+
@include true.assert
|
|
158
|
+
@include true.output
|
|
159
|
+
@include typo.font()
|
|
160
|
+
|
|
161
|
+
@include true.expect
|
|
162
|
+
font-family: "Nunito", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif
|
|
163
|
+
|
|
164
|
+
@include true.test('Does not overwrite explicit fallback override for unknown font')
|
|
165
|
+
@include true.assert
|
|
166
|
+
@include true.output
|
|
167
|
+
@include typo.font('MyCustomFont', $family: serif)
|
|
168
|
+
|
|
169
|
+
@include true.expect
|
|
170
|
+
font-family: "MyCustomFont", serif
|
|
171
|
+
|
|
172
|
+
@include true.test('Generates default fallback stack when no font is provided')
|
|
173
|
+
@include true.assert
|
|
174
|
+
@include true.output
|
|
175
|
+
@include typo.font()
|
|
176
|
+
|
|
177
|
+
@include true.expect
|
|
178
|
+
font-family: "Nunito", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif
|
|
179
|
+
font-size: 1rem
|
|
180
|
+
|
|
181
|
+
@include true.test('Generates default system sans-serif stack when no font is provided')
|
|
182
|
+
@include true.assert
|
|
183
|
+
@include true.output
|
|
184
|
+
@include typo.sans-serif()
|
|
185
|
+
|
|
186
|
+
@include true.expect
|
|
187
|
+
font-family: "Roboto", "Helvetica", "Arial", "Work Sans", "Nunito", "Open Sans", "Lato", "Montserrat", "Source Sans Pro", "Inter", "Tahoma", "Verdana", "Gill Sans", "Futura", "Ubuntu", "Noto Sans", "Noto Sans KR", "Noto Sans JP", "Noto Sans SC", "Noto Sans Arabic", "Noto Sans Hebrew", sans-serif
|
|
188
|
+
font-size: 1rem
|
|
189
|
+
|
|
190
|
+
@include true.test('Generates default system serif stack when no font is provided')
|
|
191
|
+
@include true.assert
|
|
192
|
+
@include true.output
|
|
193
|
+
@include typo.serif()
|
|
194
|
+
|
|
195
|
+
@include true.expect
|
|
196
|
+
font-family: "Georgia", "Times New Roman", "Palatino", "Libre Baskerville", "Merriweather", "PT Serif", "Noto Serif", "Noto Serif KR", "Noto Serif JP", "Noto Serif SC", serif
|
|
197
|
+
font-size: 1rem
|
|
198
|
+
|
|
199
|
+
@include true.test('Generates default system monospace stack when no font is provided')
|
|
200
|
+
@include true.assert
|
|
201
|
+
@include true.output
|
|
202
|
+
@include typo.monospace()
|
|
203
|
+
|
|
204
|
+
@include true.expect
|
|
205
|
+
font-family: "Courier New", "Consolas", "Ubuntu Mono", "Source Code Pro", "Fira Code", "Inconsolata", "Menlo", "Monaco", "Noto Mono", monospace
|
|
206
|
+
font-size: 1rem
|
|
207
|
+
|
|
142
208
|
@include true.test-module('Styling (Native)')
|
|
143
209
|
@include true.test('Applies typography font styling to figcaption')
|
|
144
210
|
@include true.assert
|
|
@@ -150,4 +216,84 @@
|
|
|
150
216
|
figure figcaption
|
|
151
217
|
font-style: italic
|
|
152
218
|
|
|
219
|
+
@include true.test-module('Tags and Elements')
|
|
220
|
+
@include true.test('Applies background and text color')
|
|
221
|
+
@include true.assert
|
|
222
|
+
@include true.output
|
|
223
|
+
.custom-bg
|
|
224
|
+
@include misc-styling.background-color(rgb(255, 0, 0), rgb(255, 255, 255))
|
|
225
|
+
|
|
226
|
+
@include true.expect
|
|
227
|
+
.custom-bg
|
|
228
|
+
color: rgba(255, 255, 255, 1)
|
|
229
|
+
background-color: rgba(255, 0, 0, 1)
|
|
230
|
+
|
|
231
|
+
@include true.test('Applies base button styling')
|
|
232
|
+
@include true.assert
|
|
233
|
+
@include true.output
|
|
234
|
+
button
|
|
235
|
+
@include buttons.base-btn()
|
|
236
|
+
|
|
237
|
+
@include true.expect
|
|
238
|
+
button
|
|
239
|
+
border: none
|
|
240
|
+
margin: 0.5em
|
|
241
|
+
cursor: pointer
|
|
242
|
+
position: relative
|
|
243
|
+
padding: 0.5em 1.5em
|
|
244
|
+
border-radius: 0.5em
|
|
245
|
+
display: inline-block
|
|
246
|
+
transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.2s
|
|
247
|
+
color: rgb(255, 248, 241)
|
|
248
|
+
background-color: rgb(252, 245, 235)
|
|
249
|
+
font-size: 1em
|
|
250
|
+
font-weight: bold
|
|
251
|
+
font-style: normal
|
|
252
|
+
|
|
253
|
+
&:hover
|
|
254
|
+
transform: scale(1.05)
|
|
255
|
+
background-color: rgb(248.6739130435, 233.9130434783, 212.8260869565)
|
|
256
|
+
|
|
257
|
+
&:active
|
|
258
|
+
transform: scale(0.95)
|
|
259
|
+
background-color: rgb(245.347826087, 222.8260869565, 190.652173913)
|
|
260
|
+
|
|
261
|
+
&:disabled
|
|
262
|
+
opacity: 0.3
|
|
263
|
+
cursor: not-allowed
|
|
264
|
+
|
|
265
|
+
@include true.test('Applies link colors and properties')
|
|
266
|
+
@include true.assert
|
|
267
|
+
@include true.output
|
|
268
|
+
@include elements.link-color(rgb(0, 0, 255), rgb(0, 0, 200), rgb(0, 0, 150), rgb(128, 0, 128))
|
|
269
|
+
|
|
270
|
+
@include true.expect
|
|
271
|
+
a
|
|
272
|
+
color: rgb(0, 0, 255)
|
|
273
|
+
cursor: pointer
|
|
274
|
+
text-decoration: none
|
|
275
|
+
|
|
276
|
+
[aria-disabled="true"]
|
|
277
|
+
color: rgb(160, 160, 160)
|
|
278
|
+
cursor: not-allowed
|
|
279
|
+
pointer-events: none
|
|
280
|
+
text-decoration: none
|
|
281
|
+
|
|
282
|
+
&:active
|
|
283
|
+
color: rgb(0, 0, 150)
|
|
284
|
+
|
|
285
|
+
&.external-link
|
|
286
|
+
text-decoration: underline
|
|
287
|
+
|
|
288
|
+
@media (hover: hover)
|
|
289
|
+
&:hover
|
|
290
|
+
color: rgb(0, 0, 200)
|
|
291
|
+
border-radius: 0.5em
|
|
292
|
+
|
|
293
|
+
&:visited
|
|
294
|
+
color: rgb(128, 0, 128)
|
|
295
|
+
|
|
296
|
+
h1, h2, h3, h4, h5, h6
|
|
297
|
+
color: rgb(0, 0, 255) !important
|
|
298
|
+
|
|
153
299
|
@include true.report
|