@total_onion/onion-library 1.0.218 → 1.0.219

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 (7) hide show
  1. package/components/component-responsive-image-v3/responsive-image-v3.scss +7 -7
  2. package/components/component-social-media-share-v3/social-media-share-v3-extra.scss +6 -0
  3. package/components/component-social-media-share-v3/social-media-share-v3.scss +131 -0
  4. package/components/fields-core-mixins-v3/core-mixins-v3.scss +0 -1
  5. package/components/fields-core-root-variables-v3/core-root-variables-v3.scss +0 -1
  6. package/components/fields-core-typography-mixins-v3/core-typography-mixins-v3.scss +80 -77
  7. package/package.json +1 -1
package/components/component-responsive-image-v3/responsive-image-v3.scss CHANGED
@@ -1,5 +1,5 @@
1
- @use 'Assets/scss/modules/library-modules/core-mixins/core-mixins';
2
- @use 'Assets/scss/modules/library-modules/core-functions/core-functions';
1
+ @use 'NodeModules/@total_onion/onion-library/components/fields-core-mixins-v3/core-mixins-v3';
2
+ @use 'NodeModules/@total_onion/onion-library/components/fields-core-functions-v3/core-functions-v3';
3
3
  @use 'Assets/scss/theme/breakpoints';
4
4
 
5
5
  @mixin responsiveImage() {
@@ -11,12 +11,12 @@
11
11
  min-height: 100%;
12
12
  display: flex;
13
13
  z-index: var(--image-z-index);
14
- border: core-functions.fluidSize(var(--image-border-width), 'static')
14
+ border: core-functions-v3.fluidSize(var(--image-border-width), 'static')
15
15
  var(--image-border-style) var(--image-border-colour);
16
- @include core-mixins.device(breakpoints.$tabPortrait) {
16
+ @include core-mixins-v3.device(breakpoints.$tabPortrait) {
17
17
  width: var(--image-width-portrait, 100%);
18
18
  }
19
- @include core-mixins.device(breakpoints.$tabLandscape) {
19
+ @include core-mixins-v3.device(breakpoints.$tabLandscape) {
20
20
  width: var(--image-width, 100%);
21
21
  }
22
22
  }
@@ -40,11 +40,11 @@
40
40
  )
41
41
  );
42
42
 
43
- @include core-mixins.device(breakpoints.$tabPortrait) {
43
+ @include core-mixins-v3.device(breakpoints.$tabPortrait) {
44
44
  aspect-ratio: var(--image-aspect-ratio-portrait);
45
45
  }
46
46
 
47
- @include core-mixins.device(breakpoints.$tabLandscape) {
47
+ @include core-mixins-v3.device(breakpoints.$tabLandscape) {
48
48
  aspect-ratio: var(--image-aspect-ratio-desktop);
49
49
  min-height: calc(
50
50
  var(--image-min-height-desktop) - calc(
package/components/component-social-media-share-v3/social-media-share-v3-extra.scss ADDED
@@ -0,0 +1,6 @@
1
+ // @use 'Assets/scss/modules/library-modules/core-mixins/core-mixins';
2
+ // @use 'Assets/scss/modules/library-modules/core-functions/core-functions';
3
+ // @use 'Assets/scss/theme/breakpoints';
4
+
5
+ @mixin additionalStyles() {
6
+ }
package/components/component-social-media-share-v3/social-media-share-v3.scss ADDED
@@ -0,0 +1,131 @@
1
+ @use 'NodeModules/@total_onion/onion-library/components/fields-core-functions-v3/core-functions-v3';
2
+ @use 'NodeModules/@total_onion/onion-library/components/component-grid-layout-element-v3/grid-layout-element-v3';
3
+ @use './social-media-share-v3-extra';
4
+ @use 'Assets/scss/theme/breakpoints';
5
+
6
+ @mixin social-media-share() {
7
+ .social-media-share-popup {
8
+ @include grid-layout-element-v3.gridLayoutElement();
9
+ .social-media-page-content {
10
+ display: grid;
11
+ grid-template-areas: ' left right ';
12
+ grid-template-columns: fit-content(100%) fit-content(100%);
13
+ grid-gap: var(--social-media-share-grid-gap);
14
+ place-content: var(--social-media-share-horizontal-align);
15
+ align-items: center;
16
+
17
+ .social-media-share-text {
18
+ grid-area: var(--social-media-share-col1);
19
+ color: var(--theme-primary-text-colour);
20
+ text-decoration-line: underline;
21
+ font-size: core-functions-v3.fontSize(16, 'static');
22
+ cursor: pointer;
23
+ }
24
+
25
+ .social-media-share-icon {
26
+ grid-area: var(--social-media-share-col2);
27
+ padding-top: core-functions-v3.fluidSize(9, 'static');
28
+
29
+ .share-icon-img {
30
+ transform: rotate(var(--social-share-icon-rotate));
31
+ cursor: pointer;
32
+ }
33
+ }
34
+ }
35
+
36
+ dialog::backdrop {
37
+ backdrop-filter: blur(10px);
38
+ }
39
+
40
+ dialog {
41
+ min-width: core-functions-v3.fluidSize(334, 'static');
42
+ width: calc(100% - 30px);
43
+ max-width: core-functions-v3.fluidSize(330, 'static');
44
+ overflow: visible;
45
+ box-shadow: var(--social-share-popup-shadow);
46
+ background-color: var(--social-share-popup-background-colour);
47
+ border-radius: core-functions-v3.fluidSize(20, 'static');
48
+ border: none;
49
+ padding: core-functions-v3.fluidSize(40, 'static')
50
+ core-functions-v3.fluidSize(20, 'static');
51
+ height: -moz-fit-content;
52
+ height: fit-content;
53
+ font-size: core-functions-v3.fontSize(50, 'static');
54
+ line-height: 1em;
55
+ text-transform: uppercase;
56
+
57
+ .icon-close {
58
+ background-color: white;
59
+ width: core-functions-v3.fluidSize(48, 'static');
60
+ height: core-functions-v3.fluidSize(48, 'static');
61
+ border-radius: 50%;
62
+ position: absolute;
63
+ top: core-functions-v3.fluidSize(-25, 'static');
64
+ right: core-functions-v3.fluidSize(20, 'static');
65
+ display: flex;
66
+ align-items: center;
67
+ justify-content: center;
68
+ cursor: pointer;
69
+ }
70
+
71
+ .dialog-actions {
72
+ text-align: center;
73
+
74
+ h3 {
75
+ font-size: core-functions-v3.fontSize(50, 'static');
76
+ font-family: var(--primary-font-family);
77
+ color: var(--social-share-popup-font-colour);
78
+ }
79
+
80
+ .wrapper-content-icons {
81
+ display: flex;
82
+ justify-content: center;
83
+ column-gap: 1rem;
84
+ padding-top: core-functions-v3.fluidSize(20, 'static');
85
+
86
+ a {
87
+ background-color: #ffffff;
88
+ border-radius: 50%;
89
+ height: core-functions-v3.fluidSize(
90
+ var(--social-media-share-a-size, 40),
91
+ 'static'
92
+ );
93
+
94
+ svg {
95
+ padding-top: core-functions-v3.fluidSize(
96
+ 5,
97
+ 'static'
98
+ );
99
+ }
100
+
101
+ svg:hover {
102
+ fill: purple;
103
+ }
104
+
105
+ svg:hover rect {
106
+ fill: purple;
107
+ }
108
+
109
+ svg:hover path {
110
+ fill: purple;
111
+ }
112
+ }
113
+
114
+ a:focus-visible {
115
+ outline: unset;
116
+ }
117
+ }
118
+
119
+ .social-media-message {
120
+ display: none;
121
+ color: white;
122
+ font-size: core-functions-v3.fontSize(16, 'static');
123
+ justify-content: center;
124
+ align-items: center;
125
+ }
126
+ }
127
+ }
128
+
129
+ @include social-media-share-v3-extra.additionalStyles();
130
+ }
131
+ }
package/components/fields-core-mixins-v3/core-mixins-v3.scss CHANGED
@@ -1,4 +1,3 @@
1
- // LIBRARY FILE - Do not modify/override here as your changes will be lost when the package is updated.
2
1
  @use 'Assets/scss/theme/breakpoints';
3
2
  @use 'NodeModules/@total_onion/onion-library/components/fields-core-functions-v3/core-functions-v3';
4
3
  @use 'sass:math';
package/components/fields-core-root-variables-v3/core-root-variables-v3.scss CHANGED
@@ -1,4 +1,3 @@
1
- // LIBRARY FILE - Do not modify/override here as your changes will be lost when the package is updated.
2
1
  @use 'NodeModules/@total_onion/onion-library/components/fields-core-mixins-v3/core-mixins-v3';
3
2
  @use 'Assets/scss/theme/breakpoints';
4
3
 
package/components/fields-core-typography-mixins-v3/core-typography-mixins-v3.scss CHANGED
@@ -1,11 +1,11 @@
1
- @use 'Assets/scss/theme/breakpoints';
2
1
  @use 'NodeModules/@total_onion/onion-library/components/fields-core-functions-v3/core-functions-v3';
3
2
  @use 'NodeModules/@total_onion/onion-library/components/fields-core-mixins-v3/core-mixins-v3';
3
+ @use 'Assets/scss/theme/breakpoints';
4
4
 
5
5
  @mixin h-xl-size {
6
6
  font-size: clamp(
7
7
  var(--h-xl-font-size-min-desktop, 10px),
8
- core-functions-v3.fontSize(var(--h-xl-desktop)),
8
+ core-functions-v3.fontSize(var(--h-xl-desktop, 70)),
9
9
  var(--h-xl-font-size-max-desktop, 180px)
10
10
  );
11
11
  line-height: var(--h-xl-line-height);
@@ -23,20 +23,20 @@
23
23
  }
24
24
  font-size: clamp(
25
25
  var(--h-xl-font-size-min-mobile, 10px),
26
- core-functions-v3.fontSize(var(--h-xl-mobile), 'mobile'),
26
+ core-functions-v3.fontSize(var(--h-xl-mobile, 44), 'mobile'),
27
27
  var(--h-xl-font-size-max-mobile, 180px)
28
28
  );
29
29
  @include core-mixins-v3.device(breakpoints.$tabPortrait) {
30
30
  font-size: clamp(
31
31
  var(--h-xl-font-size-min-mobile, 10px),
32
- core-functions-v3.fontSize(var(--h-xl-portrait), 'portrait'),
32
+ core-functions-v3.fontSize(var(--h-xl-portrait, 44), 'portrait'),
33
33
  var(--h-xl-font-size-max-mobile, 180px)
34
34
  );
35
35
  }
36
36
  @include core-mixins-v3.device(breakpoints.$tabLandscape) {
37
37
  font-size: clamp(
38
38
  var(--h-xl-font-size-min-desktop, 10px),
39
- core-functions-v3.fontSize(var(--h-xl-landscape), 'landscape'),
39
+ core-functions-v3.fontSize(var(--h-xl-landscape, 70), 'landscape'),
40
40
  var(--h-xl-font-size-max-desktop, 180px)
41
41
  );
42
42
  }
@@ -48,7 +48,7 @@
48
48
  @mixin h-l-size {
49
49
  font-size: clamp(
50
50
  var(--h-l-font-size-min-desktop, 10px),
51
- core-functions-v3.fontSize(var(--h-l-desktop)),
51
+ core-functions-v3.fontSize(var(--h-l-desktop, 44)),
52
52
  var(--h-l-font-size-max-desktop, 180px)
53
53
  );
54
54
  letter-spacing: var(--h-l-letter-spacing);
@@ -68,14 +68,14 @@
68
68
 
69
69
  font-size: clamp(
70
70
  var(--h-l-font-size-min-mobile, 10px),
71
- core-functions-v3.fontSize(var(--h-l-mobile), 'mobile'),
71
+ core-functions-v3.fontSize(var(--h-l-mobile, 32), 'mobile'),
72
72
  var(--h-l-font-size-max-mobile, 180px)
73
73
  );
74
74
 
75
75
  @include core-mixins-v3.device(breakpoints.$tabPortrait) {
76
76
  font-size: clamp(
77
77
  var(--h-l-font-size-min-mobile, 10px),
78
- core-functions-v3.fontSize(var(--h-l-portrait), 'portrait'),
78
+ core-functions-v3.fontSize(var(--h-l-portrait, 32), 'portrait'),
79
79
  var(--h-l-font-size-max-mobile, 180px)
80
80
  );
81
81
  }
@@ -83,7 +83,7 @@
83
83
  @include core-mixins-v3.device(breakpoints.$tabLandscape) {
84
84
  font-size: clamp(
85
85
  var(--h-l-font-size-min-desktop, 10px),
86
- core-functions-v3.fontSize(var(--h-l-landscape), 'landscape'),
86
+ core-functions-v3.fontSize(var(--h-l-landscape, 44), 'landscape'),
87
87
  var(--h-l-font-size-max-desktop, 180px)
88
88
  );
89
89
  }
@@ -95,7 +95,7 @@
95
95
  @mixin h-m-size {
96
96
  font-size: clamp(
97
97
  var(--h-m-font-size-min-desktop, 10px),
98
- core-functions-v3.fontSize(var(--h-m-desktop)),
98
+ core-functions-v3.fontSize(var(--h-m-desktop, 32)),
99
99
  var(--h-m-font-size-max-desktop, 180px)
100
100
  );
101
101
  letter-spacing: var(--h-m-letter-spacing);
@@ -115,14 +115,14 @@
115
115
 
116
116
  font-size: clamp(
117
117
  var(--h-m-font-size-min-mobile, 10px),
118
- core-functions-v3.fontSize(var(--h-m-mobile)),
118
+ core-functions-v3.fontSize(var(--h-m-mobile, 24)),
119
119
  var(--h-m-font-size-max-mobile, 180px)
120
120
  );
121
121
 
122
122
  @include core-mixins-v3.device(breakpoints.$tabPortrait) {
123
123
  font-size: clamp(
124
124
  var(--h-m-font-size-min-mobile, 10px),
125
- core-functions-v3.fontSize(var(--h-m-portrait)),
125
+ core-functions-v3.fontSize(var(--h-m-portrait, 24)),
126
126
  var(--h-m-font-size-max-mobile, 180px)
127
127
  );
128
128
  }
@@ -130,7 +130,7 @@
130
130
  @include core-mixins-v3.device(breakpoints.$tabLandscape) {
131
131
  font-size: clamp(
132
132
  var(--h-m-font-size-min-desktop, 10px),
133
- core-functions-v3.fontSize(var(--h-m-landscape)),
133
+ core-functions-v3.fontSize(var(--h-m-landscape, 32)),
134
134
  var(--h-m-font-size-max-desktop, 180px)
135
135
  );
136
136
  }
@@ -142,7 +142,7 @@
142
142
  @mixin h-s-size {
143
143
  font-size: clamp(
144
144
  var(--h-s-font-size-min-desktop, 10px),
145
- core-functions-v3.fontSize(var(--h-s-desktop)),
145
+ core-functions-v3.fontSize(var(--h-s-desktop, 24)),
146
146
  var(--h-s-font-size-max-desktop, 180px)
147
147
  );
148
148
  letter-spacing: var(--h-s-letter-spacing);
@@ -162,14 +162,14 @@
162
162
 
163
163
  font-size: clamp(
164
164
  var(--h-s-font-size-min-mobile, 10px),
165
- core-functions-v3.fontSize(var(--h-s-mobile), 'mobile'),
165
+ core-functions-v3.fontSize(var(--h-s-mobile, 20), 'mobile'),
166
166
  var(--h-s-font-size-max-mobile, 180px)
167
167
  );
168
168
 
169
169
  @include core-mixins-v3.device(breakpoints.$tabPortrait) {
170
170
  font-size: clamp(
171
171
  var(--h-s-font-size-min-mobile, 10px),
172
- core-functions-v3.fontSize(var(--h-s-portrait), 'portrait'),
172
+ core-functions-v3.fontSize(var(--h-s-portrait, 20), 'portrait'),
173
173
  var(--h-s-font-size-max-mobile, 180px)
174
174
  );
175
175
  }
@@ -177,7 +177,7 @@
177
177
  @include core-mixins-v3.device(breakpoints.$tabLandscape) {
178
178
  font-size: clamp(
179
179
  var(--h-s-font-size-min-desktop, 10px),
180
- core-functions-v3.fontSize(var(--h-s-landscape), 'landscape'),
180
+ core-functions-v3.fontSize(var(--h-s-landscape, 24), 'landscape'),
181
181
  var(--h-s-font-size-max-desktop, 180px)
182
182
  );
183
183
  }
@@ -189,7 +189,7 @@
189
189
  @mixin h-xs-size {
190
190
  font-size: clamp(
191
191
  var(--h-xs-font-size-min-desktop, 10px),
192
- core-functions-v3.fontSize(var(--h-xs-desktop)),
192
+ core-functions-v3.fontSize(var(--h-xs-desktop, 18)),
193
193
  var(--h-xs-font-size-max-desktop, 180px)
194
194
  );
195
195
  letter-spacing: var(--h-xs-letter-spacing);
@@ -209,14 +209,14 @@
209
209
 
210
210
  font-size: clamp(
211
211
  var(--h-xs-font-size-min-mobile, 10px),
212
- core-functions-v3.fontSize(var(--h-xs-mobile), 'mobile'),
212
+ core-functions-v3.fontSize(var(--h-xs-mobile, 14), 'mobile'),
213
213
  var(--h-xs-font-size-max-mobile, 180px)
214
214
  );
215
215
 
216
216
  @include core-mixins-v3.device(breakpoints.$tabPortrait) {
217
217
  font-size: clamp(
218
218
  var(--h-xs-font-size-min-mobile, 10px),
219
- core-functions-v3.fontSize(var(--h-xs-portrait), 'portrait'),
219
+ core-functions-v3.fontSize(var(--h-xs-portrait, 14), 'portrait'),
220
220
  var(--h-xs-font-size-max-mobile, 180px)
221
221
  );
222
222
  }
@@ -224,7 +224,7 @@
224
224
  @include core-mixins-v3.device(breakpoints.$tabLandscape) {
225
225
  font-size: clamp(
226
226
  var(--h-xs-font-size-min-desktop, 10px),
227
- core-functions-v3.fontSize(var(--h-xs-landscape), 'landscape'),
227
+ core-functions-v3.fontSize(var(--h-xs-landscape, 18), 'landscape'),
228
228
  var(--h-xs-font-size-max-desktop, 180px)
229
229
  );
230
230
  }
@@ -236,7 +236,7 @@
236
236
  @mixin h-xxs-size {
237
237
  font-size: clamp(
238
238
  var(--h-xxs-font-size-min-desktop, 10px),
239
- core-functions-v3.fontSize(var(--h-xxs-desktop)),
239
+ core-functions-v3.fontSize(var(--h-xxs-desktop, 16)),
240
240
  var(--h-xxs-font-size-max-desktop, 180px)
241
241
  );
242
242
  letter-spacing: var(--h-xxs-letter-spacing);
@@ -256,14 +256,14 @@
256
256
 
257
257
  font-size: clamp(
258
258
  var(--h-xxs-font-size-min-mobile, 10px),
259
- core-functions-v3.fontSize(var(--h-xxs-mobile), 'mobile'),
259
+ core-functions-v3.fontSize(var(--h-xxs-mobile, 12), 'mobile'),
260
260
  var(--h-xxs-font-size-max-mobile, 180px)
261
261
  );
262
262
 
263
263
  @include core-mixins-v3.device(breakpoints.$tabPortrait) {
264
264
  font-size: clamp(
265
265
  var(--h-xxs-font-size-min-mobile, 10px),
266
- core-functions-v3.fontSize(var(--h-xxs-portrait), 'portrait'),
266
+ core-functions-v3.fontSize(var(--h-xxs-portrait, 12), 'portrait'),
267
267
  var(--h-xxs-font-size-max-mobile, 180px)
268
268
  );
269
269
  }
@@ -271,7 +271,7 @@
271
271
  @include core-mixins-v3.device(breakpoints.$tabLandscape) {
272
272
  font-size: clamp(
273
273
  var(--h-xxs-font-size-min-desktop, 10px),
274
- core-functions-v3.fontSize(var(--h-xxs-landscape), 'landscape'),
274
+ core-functions-v3.fontSize(var(--h-xxs-landscape, 16), 'landscape'),
275
275
  var(--h-xxs-font-size-max-desktop, 180px)
276
276
  );
277
277
  }
@@ -283,7 +283,7 @@
283
283
  @mixin h-xxxs-size {
284
284
  font-size: clamp(
285
285
  var(--h-xxxs-font-size-min-desktop, 10px),
286
- core-functions-v3.fontSize(var(--h-xxxs-desktop)),
286
+ core-functions-v3.fontSize(var(--h-xxxs-desktop, 12)),
287
287
  var(--h-xxxs-font-size-max-desktop, 180px)
288
288
  );
289
289
  letter-spacing: var(--h-xxxs-letter-spacing);
@@ -303,14 +303,14 @@
303
303
 
304
304
  font-size: clamp(
305
305
  var(--h-xxxs-font-size-min-mobile, 10px),
306
- core-functions-v3.fontSize(var(--h-xxxs-mobile), 'mobile'),
306
+ core-functions-v3.fontSize(var(--h-xxxs-mobile, 10), 'mobile'),
307
307
  var(--h-xxxs-font-size-max-mobile, 180px)
308
308
  );
309
309
 
310
310
  @include core-mixins-v3.device(breakpoints.$tabPortrait) {
311
311
  font-size: clamp(
312
312
  var(--h-xxxs-font-size-min-mobile, 10px),
313
- core-functions-v3.fontSize(var(--h-xxxs-portrait), 'portrait'),
313
+ core-functions-v3.fontSize(var(--h-xxxs-portrait, 10), 'portrait'),
314
314
  var(--h-xxxs-font-size-max-mobile, 180px)
315
315
  );
316
316
  }
@@ -318,7 +318,10 @@
318
318
  @include core-mixins-v3.device(breakpoints.$tabLandscape) {
319
319
  font-size: clamp(
320
320
  var(--h-xxxs-font-size-min-desktop, 10px),
321
- core-functions-v3.fontSize(var(--h-xxxs-landscape), 'landscape'),
321
+ core-functions-v3.fontSize(
322
+ var(--h-xxxs-landscape, 12),
323
+ 'landscape'
324
+ ),
322
325
  var(--h-xxxs-font-size-max-desktop, 180px)
323
326
  );
324
327
  }
@@ -330,7 +333,7 @@
330
333
  @mixin sh-xl-size {
331
334
  font-size: clamp(
332
335
  var(--sh-xl-font-size-min-desktop, 10px),
333
- core-functions-v3.fontSize(var(--sh-xl-desktop)),
336
+ core-functions-v3.fontSize(var(--sh-xl-desktop, 70)),
334
337
  var(--sh-xl-font-size-max-desktop, 180px)
335
338
  );
336
339
  letter-spacing: var(--sh-xl-letter-spacing);
@@ -350,14 +353,14 @@
350
353
 
351
354
  font-size: clamp(
352
355
  var(--sh-xl-font-size-min-mobile, 10px),
353
- core-functions-v3.fontSize(var(--sh-xl-mobile)),
356
+ core-functions-v3.fontSize(var(--sh-xl-mobile, 44)),
354
357
  var(--sh-xl-font-size-max-mobile, 180px)
355
358
  );
356
359
 
357
360
  @include core-mixins-v3.device(breakpoints.$tabPortrait) {
358
361
  font-size: clamp(
359
362
  var(--sh-xl-font-size-min-mobile, 10px),
360
- core-functions-v3.fontSize(var(--sh-xl-portrait), 'portrait'),
363
+ core-functions-v3.fontSize(var(--sh-xl-portrait, 44), 'portrait'),
361
364
  var(--sh-xl-font-size-max-mobile, 180px)
362
365
  );
363
366
  }
@@ -365,7 +368,7 @@
365
368
  @include core-mixins-v3.device(breakpoints.$tabLandscape) {
366
369
  font-size: clamp(
367
370
  var(--sh-xl-font-size-min-desktop, 10px),
368
- core-functions-v3.fontSize(var(--sh-xl-landscape), 'landscape'),
371
+ core-functions-v3.fontSize(var(--sh-xl-landscape, 70), 'landscape'),
369
372
  var(--sh-xl-font-size-max-desktop, 180px)
370
373
  );
371
374
  }
@@ -377,7 +380,7 @@
377
380
  @mixin sh-l-size {
378
381
  font-size: clamp(
379
382
  var(--sh-l-font-size-min-desktop, 10px),
380
- core-functions-v3.fontSize(var(--sh-l-desktop)),
383
+ core-functions-v3.fontSize(var(--sh-l-desktop, 44)),
381
384
  var(--sh-l-font-size-max-desktop, 180px)
382
385
  );
383
386
  letter-spacing: var(--sh-l-letter-spacing);
@@ -397,14 +400,14 @@
397
400
 
398
401
  font-size: clamp(
399
402
  var(--sh-l-font-size-min-mobile, 10px),
400
- core-functions-v3.fontSize(var(--sh-l-mobile)),
403
+ core-functions-v3.fontSize(var(--sh-l-mobile, 32)),
401
404
  var(--sh-l-font-size-max-mobile, 180px)
402
405
  );
403
406
 
404
407
  @include core-mixins-v3.device(breakpoints.$tabPortrait) {
405
408
  font-size: clamp(
406
409
  var(--sh-l-font-size-min-mobile, 10px),
407
- core-functions-v3.fontSize(var(--sh-l-portrait)),
410
+ core-functions-v3.fontSize(var(--sh-l-portrait, 32)),
408
411
  var(--sh-l-font-size-max-mobile, 180px)
409
412
  );
410
413
  }
@@ -412,7 +415,7 @@
412
415
  @include core-mixins-v3.device(breakpoints.$tabLandscape) {
413
416
  font-size: clamp(
414
417
  var(--sh-l-font-size-min-desktop, 10px),
415
- core-functions-v3.fontSize(var(--sh-l-landscape)),
418
+ core-functions-v3.fontSize(var(--sh-l-landscape, 44)),
416
419
  var(--sh-l-font-size-max-desktop, 180px)
417
420
  );
418
421
  }
@@ -424,7 +427,7 @@
424
427
  @mixin sh-m-size {
425
428
  font-size: clamp(
426
429
  var(--sh-m-font-size-min-desktop, 10px),
427
- core-functions-v3.fontSize(var(--sh-m-desktop)),
430
+ core-functions-v3.fontSize(var(--sh-m-desktop, 32)),
428
431
  var(--sh-m-font-size-max-desktop, 180px)
429
432
  );
430
433
  letter-spacing: var(--sh-m-letter-spacing);
@@ -444,14 +447,14 @@
444
447
 
445
448
  font-size: clamp(
446
449
  var(--sh-m-font-size-min-mobile, 10px),
447
- core-functions-v3.fontSize(var(--sh-m-mobile)),
450
+ core-functions-v3.fontSize(var(--sh-m-mobile, 24)),
448
451
  var(--sh-m-font-size-max-mobile, 180px)
449
452
  );
450
453
 
451
454
  @include core-mixins-v3.device(breakpoints.$tabPortrait) {
452
455
  font-size: clamp(
453
456
  var(--sh-m-font-size-min-mobile, 10px),
454
- core-functions-v3.fontSize(var(--sh-m-portrait)),
457
+ core-functions-v3.fontSize(var(--sh-m-portrait, 24)),
455
458
  var(--sh-m-font-size-max-mobile, 180px)
456
459
  );
457
460
  }
@@ -459,7 +462,7 @@
459
462
  @include core-mixins-v3.device(breakpoints.$tabLandscape) {
460
463
  font-size: clamp(
461
464
  var(--sh-m-font-size-min-desktop, 10px),
462
- core-functions-v3.fontSize(var(--sh-m-landscape)),
465
+ core-functions-v3.fontSize(var(--sh-m-landscape, 32)),
463
466
  var(--sh-m-font-size-max-desktop, 180px)
464
467
  );
465
468
  }
@@ -471,7 +474,7 @@
471
474
  @mixin sh-s-size {
472
475
  font-size: clamp(
473
476
  var(--sh-s-font-size-min-desktop, 10px),
474
- core-functions-v3.fontSize(var(--sh-s-desktop)),
477
+ core-functions-v3.fontSize(var(--sh-s-desktop, 24)),
475
478
  var(--sh-s-font-size-max-desktop, 180px)
476
479
  );
477
480
  letter-spacing: var(--sh-s--letter-spacing);
@@ -491,14 +494,14 @@
491
494
 
492
495
  font-size: clamp(
493
496
  var(--sh-s-font-size-min-mobile, 10px),
494
- core-functions-v3.fontSize(var(--sh-s-mobile)),
497
+ core-functions-v3.fontSize(var(--sh-s-mobile, 20)),
495
498
  var(--sh-s-font-size-max-mobile, 180px)
496
499
  );
497
500
 
498
501
  @include core-mixins-v3.device(breakpoints.$tabPortrait) {
499
502
  font-size: clamp(
500
503
  var(--sh-s-font-size-min-mobile, 10px),
501
- core-functions-v3.fontSize(var(--sh-s-portrait)),
504
+ core-functions-v3.fontSize(var(--sh-s-portrait, 20)),
502
505
  var(--sh-s-font-size-max-mobile, 180px)
503
506
  );
504
507
  }
@@ -506,7 +509,7 @@
506
509
  @include core-mixins-v3.device(breakpoints.$tabLandscape) {
507
510
  font-size: clamp(
508
511
  var(--sh-s-font-size-min-desktop, 10px),
509
- core-functions-v3.fontSize(var(--sh-s-landscape)),
512
+ core-functions-v3.fontSize(var(--sh-s-landscape, 24)),
510
513
  var(--sh-s-font-size-max-desktop, 180px)
511
514
  );
512
515
  }
@@ -518,7 +521,7 @@
518
521
  @mixin sh-xs-size {
519
522
  font-size: clamp(
520
523
  var(--sh-xs-font-size-min-desktop, 10px),
521
- core-functions-v3.fontSize(var(--sh-xs-desktop)),
524
+ core-functions-v3.fontSize(var(--sh-xs-desktop, 18)),
522
525
  var(--sh-xs-font-size-max-desktop, 180px)
523
526
  );
524
527
  letter-spacing: var(--sh-xs-letter-spacing);
@@ -538,14 +541,14 @@
538
541
 
539
542
  font-size: clamp(
540
543
  var(--sh-xs-font-size-min-mobile, 10px),
541
- core-functions-v3.fontSize(var(--sh-xs-mobile)),
544
+ core-functions-v3.fontSize(var(--sh-xs-mobile, 14)),
542
545
  var(--sh-xs-font-size-max-mobile, 180px)
543
546
  );
544
547
 
545
548
  @include core-mixins-v3.device(breakpoints.$tabPortrait) {
546
549
  font-size: clamp(
547
550
  var(--sh-xs-font-size-min-mobile, 10px),
548
- core-functions-v3.fontSize(var(--sh-xs-portrait)),
551
+ core-functions-v3.fontSize(var(--sh-xs-portrait, 14)),
549
552
  var(--sh-xs-font-size-max-mobile, 180px)
550
553
  );
551
554
  }
@@ -553,7 +556,7 @@
553
556
  @include core-mixins-v3.device(breakpoints.$tabLandscape) {
554
557
  font-size: clamp(
555
558
  var(--sh-xs-font-size-min-desktop, 10px),
556
- core-functions-v3.fontSize(var(--sh-xs-landscape)),
559
+ core-functions-v3.fontSize(var(--sh-xs-landscape, 18)),
557
560
  var(--sh-xs-font-size-max-desktop, 180px)
558
561
  );
559
562
  }
@@ -565,7 +568,7 @@
565
568
  @mixin sh-xxs-size {
566
569
  font-size: clamp(
567
570
  var(--sh-xxs-font-size-min-desktop, 10px),
568
- core-functions-v3.fontSize(var(--sh-xxs-desktop)),
571
+ core-functions-v3.fontSize(var(--sh-xxs-desktop, 16)),
569
572
  var(--sh-xxs-font-size-max-desktop, 180px)
570
573
  );
571
574
  letter-spacing: var(--sh-xxs-letter-spacing);
@@ -585,14 +588,14 @@
585
588
 
586
589
  font-size: clamp(
587
590
  var(--sh-xxs-font-size-min-mobile, 10px),
588
- core-functions-v3.fontSize(var(--sh-xxs-mobile)),
591
+ core-functions-v3.fontSize(var(--sh-xxs-mobile, 12)),
589
592
  var(--sh-xxs-font-size-max-mobile, 180px)
590
593
  );
591
594
 
592
595
  @include core-mixins-v3.device(breakpoints.$tabPortrait) {
593
596
  font-size: clamp(
594
597
  var(--sh-xxs-font-size-min-mobile, 10px),
595
- core-functions-v3.fontSize(var(--sh-xxs-portrait)),
598
+ core-functions-v3.fontSize(var(--sh-xxs-portrait, 12)),
596
599
  var(--sh-xxs-font-size-max-mobile, 180px)
597
600
  );
598
601
  }
@@ -600,7 +603,7 @@
600
603
  @include core-mixins-v3.device(breakpoints.$tabLandscape) {
601
604
  font-size: clamp(
602
605
  var(--sh-xxs-font-size-min-desktop, 10px),
603
- core-functions-v3.fontSize(var(--sh-xxs-landscape)),
606
+ core-functions-v3.fontSize(var(--sh-xxs-landscape, 16)),
604
607
  var(--sh-xxs-font-size-max-desktop, 180px)
605
608
  );
606
609
  }
@@ -612,7 +615,7 @@
612
615
  @mixin p-l-size {
613
616
  font-size: clamp(
614
617
  var(--p-l-font-size-min-desktop, 10px),
615
- core-functions-v3.fontSize(var(--p-l-desktop)),
618
+ core-functions-v3.fontSize(var(--p-l-desktop, 20)),
616
619
  var(--p-l-font-size-max-desktop, 180px)
617
620
  );
618
621
  line-height: var(--paragraph-large-line-height);
@@ -641,14 +644,14 @@
641
644
 
642
645
  font-size: clamp(
643
646
  var(--p-l-font-size-min-mobile, 10px),
644
- core-functions-v3.fontSize(var(--p-l-mobile), 'mobile'),
647
+ core-functions-v3.fontSize(var(--p-l-mobile, 18), 'mobile'),
645
648
  var(--p-l-font-size-max-mobile, 180px)
646
649
  );
647
650
 
648
651
  @include core-mixins-v3.device(breakpoints.$tabPortrait) {
649
652
  font-size: clamp(
650
653
  var(--p-l-font-size-min-mobile, 10px),
651
- core-functions-v3.fontSize(var(--p-l-portrait), 'portrait'),
654
+ core-functions-v3.fontSize(var(--p-l-portrait, 18), 'portrait'),
652
655
  var(--p-l-font-size-max-mobile, 180px)
653
656
  );
654
657
  }
@@ -656,7 +659,7 @@
656
659
  @include core-mixins-v3.device(breakpoints.$tabLandscape) {
657
660
  font-size: clamp(
658
661
  var(--p-l-font-size-min-desktop, 10px),
659
- core-functions-v3.fontSize(var(--p-l-landscape), 'landscape'),
662
+ core-functions-v3.fontSize(var(--p-l-landscape, 20), 'landscape'),
660
663
  var(--p-l-font-size-max-desktop, 180px)
661
664
  );
662
665
  }
@@ -669,7 +672,7 @@
669
672
  @mixin p-size {
670
673
  font-size: clamp(
671
674
  var(--p-font-size-min-desktop, 10px),
672
- core-functions-v3.fontSize(var(--p-desktop)),
675
+ core-functions-v3.fontSize(var(--p-desktop, 18)),
673
676
  var(--p-font-size-max-desktop, 180px)
674
677
  );
675
678
  }
@@ -698,14 +701,14 @@
698
701
 
699
702
  font-size: clamp(
700
703
  var(--p-font-size-min-mobile, 10px),
701
- core-functions-v3.fontSize(var(--p-mobile)),
704
+ core-functions-v3.fontSize(var(--p-mobile, 16)),
702
705
  var(--p-font-size-max-mobile, 180px)
703
706
  );
704
707
 
705
708
  @include core-mixins-v3.device(breakpoints.$tabPortrait) {
706
709
  font-size: clamp(
707
710
  var(--p-font-size-min-mobile, 10px),
708
- core-functions-v3.fontSize(var(--p-portrait)),
711
+ core-functions-v3.fontSize(var(--p-portrait, 16)),
709
712
  var(--p-font-size-max-mobile, 180px)
710
713
  );
711
714
  }
@@ -713,7 +716,7 @@
713
716
  @include core-mixins-v3.device(breakpoints.$tabLandscape) {
714
717
  font-size: clamp(
715
718
  var(--p-font-size-min-desktop, 10px),
716
- core-functions-v3.fontSize(var(--p-landscape)),
719
+ core-functions-v3.fontSize(var(--p-landscape, 18)),
717
720
  var(--p-font-size-max-desktop, 180px)
718
721
  );
719
722
  }
@@ -725,7 +728,7 @@
725
728
  @mixin p-s-size {
726
729
  font-size: clamp(
727
730
  var(--p-s-font-size-min-desktop, 10px),
728
- core-functions-v3.fontSize(var(--p-s-desktop)),
731
+ core-functions-v3.fontSize(var(--p-s-desktop, 16)),
729
732
  var(--p-s-font-size-max-desktop, 180px)
730
733
  );
731
734
  }
@@ -752,14 +755,14 @@
752
755
 
753
756
  font-size: clamp(
754
757
  var(--p-s-font-size-min-mobile, 10px),
755
- core-functions-v3.fontSize(var(--p-s-mobile), 'mobile'),
758
+ core-functions-v3.fontSize(var(--p-s-mobile, 14), 'mobile'),
756
759
  var(--p-s-font-size-max-mobile, 180px)
757
760
  );
758
761
 
759
762
  @include core-mixins-v3.device(breakpoints.$tabPortrait) {
760
763
  font-size: clamp(
761
764
  var(--p-s-font-size-min-mobile, 10px),
762
- core-functions-v3.fontSize(var(--p-s-portrait), 'portrait'),
765
+ core-functions-v3.fontSize(var(--p-s-portrait, 14), 'portrait'),
763
766
  var(--p-s-font-size-max-mobile, 180px)
764
767
  );
765
768
  }
@@ -767,7 +770,7 @@
767
770
  @include core-mixins-v3.device(breakpoints.$tabLandscape) {
768
771
  font-size: clamp(
769
772
  var(--p-s-font-size-min-desktop, 10px),
770
- core-functions-v3.fontSize(var(--p-s-landscape), 'landscape'),
773
+ core-functions-v3.fontSize(var(--p-s-landscape, 16), 'landscape'),
771
774
  var(--p-s-font-size-max-desktop, 180px)
772
775
  );
773
776
  }
@@ -779,7 +782,7 @@
779
782
  @mixin p-xs-size {
780
783
  font-size: clamp(
781
784
  var(--p-xs-font-size-min-desktop, 10px),
782
- core-functions-v3.fontSize(var(--p-xs-desktop)),
785
+ core-functions-v3.fontSize(var(--p-xs-desktop, 14)),
783
786
  var(--p-xs-font-size-max-desktop, 180px)
784
787
  );
785
788
  }
@@ -806,14 +809,14 @@
806
809
 
807
810
  font-size: clamp(
808
811
  var(--p-xs-font-size-min-mobile, 10px),
809
- core-functions-v3.fontSize(var(--p-xs-mobile)),
812
+ core-functions-v3.fontSize(var(--p-xs-mobile, 12)),
810
813
  var(--p-xs-font-size-max-mobile, 180px)
811
814
  );
812
815
 
813
816
  @include core-mixins-v3.device(breakpoints.$tabPortrait) {
814
817
  font-size: clamp(
815
818
  var(--p-xs-font-size-min-mobile, 10px),
816
- core-functions-v3.fontSize(var(--p-xs-portrait)),
819
+ core-functions-v3.fontSize(var(--p-xs-portrait, 12)),
817
820
  var(--p-xs-font-size-max-mobile, 180px)
818
821
  );
819
822
  }
@@ -821,7 +824,7 @@
821
824
  @include core-mixins-v3.device(breakpoints.$tabLandscape) {
822
825
  font-size: clamp(
823
826
  var(--p-xs-font-size-min-desktop, 10px),
824
- core-functions-v3.fontSize(var(--p-xs-landscape)),
827
+ core-functions-v3.fontSize(var(--p-xs-landscape, 14)),
825
828
  var(--p-xs-font-size-max-desktop, 180px)
826
829
  );
827
830
  }
@@ -833,7 +836,7 @@
833
836
  @mixin p-xs-size {
834
837
  font-size: clamp(
835
838
  var(--p-xs-font-size-min-desktop, 10px),
836
- core-functions-v3.fontSize(var(--p-xs-desktop)),
839
+ core-functions-v3.fontSize(var(--p-xs-desktop, 12)),
837
840
  var(--p-xs-font-size-max-desktop, 180px)
838
841
  );
839
842
  }
@@ -860,14 +863,14 @@
860
863
 
861
864
  font-size: clamp(
862
865
  var(--p-xs-font-size-min-mobile, 10px),
863
- core-functions-v3.fontSize(var(--p-xs-mobile)),
866
+ core-functions-v3.fontSize(var(--p-xs-mobile, 12)),
864
867
  var(--p-xs-font-size-max-mobile, 180px)
865
868
  );
866
869
 
867
870
  @include core-mixins-v3.device(breakpoints.$tabPortrait) {
868
871
  font-size: clamp(
869
872
  var(--p-xs-font-size-min-mobile, 10px),
870
- core-functions-v3.fontSize(var(--p-xs-portrait)),
873
+ core-functions-v3.fontSize(var(--p-xs-portrait, 12)),
871
874
  var(--p-xs-font-size-max-mobile, 180px)
872
875
  );
873
876
  }
@@ -875,7 +878,7 @@
875
878
  @include core-mixins-v3.device(breakpoints.$tabLandscape) {
876
879
  font-size: clamp(
877
880
  var(--p-xs-font-size-min-desktop, 10px),
878
- core-functions-v3.fontSize(var(--p-xs-landscape)),
881
+ core-functions-v3.fontSize(var(--p-xs-landscape, 12)),
879
882
  var(--p-xs-font-size-max-desktop, 180px)
880
883
  );
881
884
  }
@@ -887,7 +890,7 @@
887
890
  @mixin p-xxs-size {
888
891
  font-size: clamp(
889
892
  var(--p-xxs-font-size-min-desktop, 10px),
890
- core-functions-v3.fontSize(var(--p-xxs-desktop)),
893
+ core-functions-v3.fontSize(var(--p-xxs-desktop, 10)),
891
894
  var(--p-xxs-font-size-max-desktop, 180px)
892
895
  );
893
896
  }
@@ -914,14 +917,14 @@
914
917
 
915
918
  font-size: clamp(
916
919
  var(--p-xxs-font-size-min-mobile, 10px),
917
- core-functions-v3.fontSize(var(--p-xxs-mobile)),
920
+ core-functions-v3.fontSize(var(--p-xxs-mobile, 10)),
918
921
  var(--p-xxs-font-size-max-mobile, 180px)
919
922
  );
920
923
 
921
924
  @include core-mixins-v3.device(breakpoints.$tabPortrait) {
922
925
  font-size: clamp(
923
926
  var(--p-xxs-font-size-min-mobile, 10px),
924
- core-functions-v3.fontSize(var(--p-xxs-portrait)),
927
+ core-functions-v3.fontSize(var(--p-xxs-portrait, 10)),
925
928
  var(--p-xxs-font-size-max-mobile, 180px)
926
929
  );
927
930
  }
@@ -929,7 +932,7 @@
929
932
  @include core-mixins-v3.device(breakpoints.$tabLandscape) {
930
933
  font-size: clamp(
931
934
  var(--p-xxs-font-size-min-desktop, 10px),
932
- core-functions-v3.fontSize(var(--p-xxs-landscape)),
935
+ core-functions-v3.fontSize(var(--p-xxs-landscape, 10)),
933
936
  var(--p-xxs-font-size-max-desktop, 180px)
934
937
  );
935
938
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@total_onion/onion-library",
3
- "version": "1.0.218",
3
+ "version": "1.0.219",
4
4
  "description": "Component library",
5
5
  "main": "index.js",
6
6
  "scripts": {