lumina-sass 2.3.1 → 2.4.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.
Files changed (4) hide show
  1. package/package.json +1 -1
  2. package/src/map/_inputs.sass +2 -2
  3. package/src/mix/_media.sass +15 -9
  4. package/src/test/mixins.spec.sass +7 -7
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "lumina-sass",
3
- "version": "2.3.1",
3
+ "version": "2.4.1",
4
4
  "description": "Lumina Sass design tokens, mixins and public sub-modules (flexbox, color, mix).",
5
5
  "main": "src/_index.sass",
6
6
  "sass": "src/_index.sass",
package/src/map/_inputs.sass CHANGED
@@ -14,14 +14,14 @@ $inputs: (
14
14
  )
15
15
 
16
16
  $default-input-props: (
17
- border: rgb(204, 204, 204) solid 1px,
17
+ border: rgb(204, 204, 204) solid 0.0625rem,
18
18
  padding: 0.5rem 1rem,
19
19
  "border-radius": 0.5rem,
20
20
  "background-color": rgb(255, 255, 255),
21
21
  "font-size": 1rem,
22
22
  "line-height": 1.5,
23
23
  "box-sizing": border-box,
24
- outline: 1px solid rgb(0, 120, 215),
24
+ outline: 0.0625rem solid rgb(0, 120, 215),
25
25
  "focus-outline": rgb(0, 120, 215),
26
26
  cursor: text
27
27
  )
package/src/mix/_media.sass CHANGED
@@ -56,36 +56,42 @@
56
56
  @error "Invalid orientation `#{$orientation}` – use portrait or landscape."
57
57
 
58
58
  @mixin figure($object-fit: cover, $size: null, $style: italic, $width: 16, $length: 9, $position: null, $percentage: null)
59
- figure
60
- // Portrait video – forced 9:16 ratio
59
+ &
61
60
  video.portrait-media
62
- max-inline-size: 20em !important
63
- @include aspect-ratio(9, 16)
61
+ @if $width != null and $length != null
62
+ @include aspect-ratio($width, $length)
63
+
64
+ max-inline-size: 20rem !important
64
65
 
65
66
  // Landscape video – default ratio
66
67
  video.landscape-media
68
+ @if $width != null and $length != null
69
+ @include aspect-ratio($width, $length)
67
70
  object-position: center 35%
68
- @include aspect-ratio()
69
71
 
70
72
  // Image and picture handling
71
73
  picture,
72
74
  img
73
75
  inline-size: 100%
74
76
  object-fit: $object-fit
75
- @include aspect-ratio($width, $length)
77
+
78
+ @if $width != null and $length != null
79
+ @include aspect-ratio($width, $length)
80
+
76
81
  @if $position != null or $percentage != null
77
82
  object-position: $position $percentage
78
83
 
79
- // Nested <picture><img> – duplicate settings for readability
80
84
  picture
81
85
  img
82
86
  inline-size: 100%
83
87
  object-fit: $object-fit
84
- @include aspect-ratio($width, $length)
88
+
89
+ @if $width != null and $length != null
90
+ @include aspect-ratio($width, $length)
91
+
85
92
  @if $position != null or $percentage != null
86
93
  object-position: $position $percentage
87
94
 
88
- // Figcaption styling if size provided
89
95
  figcaption
90
96
  @include typo.font($size: $size, $style: $style)
91
97
 
package/src/test/mixins.spec.sass CHANGED
@@ -36,14 +36,14 @@
36
36
 
37
37
  @include true.expect
38
38
  input[type="text"]
39
- border: rgb(204, 204, 204) solid 1px
39
+ border: rgb(204, 204, 204) solid 0.0625rem
40
40
  padding: 0.5rem 1rem
41
41
  border-radius: 0.5rem
42
42
  background-color: rgb(255, 255, 255)
43
43
  font-size: 1rem
44
44
  line-height: 1.5
45
45
  box-sizing: border-box
46
- outline: 1px solid rgb(0, 120, 215)
46
+ outline: 0.0625rem solid rgb(0, 120, 215)
47
47
  focus-outline: rgb(0, 120, 215)
48
48
  cursor: text
49
49
 
@@ -151,16 +151,17 @@
151
151
  @include true.test('Generates figure structure')
152
152
  @include true.assert
153
153
  @include true.output
154
- @include media.figure()
154
+ figure
155
+ @include media.figure()
155
156
 
156
157
  @include true.expect
157
158
  figure video.portrait-media
158
- max-inline-size: 20em !important
159
- aspect-ratio: 9 / 16
159
+ aspect-ratio: 16 / 9
160
+ max-inline-size: 20rem !important
160
161
 
161
162
  figure video.landscape-media
162
- object-position: center 35%
163
163
  aspect-ratio: 16 / 9
164
+ object-position: center 35%
164
165
 
165
166
  figure picture, figure img
166
167
  inline-size: 100%
@@ -173,7 +174,6 @@
173
174
  aspect-ratio: 16 / 9
174
175
 
175
176
  figure picture figcaption
176
- font-weight: normal
177
177
  font-style: italic
178
178
 
179
179
  @include true.report