@lucca-front/scss 19.3.0-rc.2 → 19.3.0-rc.3
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/dist/lucca-front.min.css +1 -1
- package/package.json +2 -2
- package/src/commons/base.scss +8 -2
- package/src/commons/config.scss +11 -1
- package/src/commons/core.scss +25 -13
- package/src/commons/utils/index.scss +4 -0
- package/src/commons/vars.scss +8 -0
- package/src/components/button/component.scss +2 -2
- package/src/components/callout/component.scss +1 -1
- package/src/components/calloutAccordion/component.scss +1 -1
- package/src/components/calloutDisclosure/component.scss +1 -1
- package/src/components/footer/component.scss +1 -0
- package/src/components/highlightData/component.scss +2 -3
- package/src/components/indexTable/component.scss +1 -0
- package/src/components/indexTable/mods.scss +13 -12
- package/src/components/link/mods.scss +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lucca-front/scss",
|
|
3
|
-
"version": "19.3.0-rc.
|
|
3
|
+
"version": "19.3.0-rc.3",
|
|
4
4
|
"description": "A Sass framework for Lucca products.",
|
|
5
5
|
"main": "src/main.scss",
|
|
6
6
|
"scripts": {},
|
|
@@ -23,6 +23,6 @@
|
|
|
23
23
|
"normalize.css": "^8.0.0"
|
|
24
24
|
},
|
|
25
25
|
"peerDependencies": {
|
|
26
|
-
"@lucca-front/icons": "19.3.0-rc.
|
|
26
|
+
"@lucca-front/icons": "19.3.0-rc.3"
|
|
27
27
|
}
|
|
28
28
|
}
|
package/src/commons/base.scss
CHANGED
|
@@ -23,10 +23,16 @@
|
|
|
23
23
|
|
|
24
24
|
@mixin base($atRoot: namespace.$defaultAtRoot) {
|
|
25
25
|
@at-root ($atRoot) {
|
|
26
|
-
@
|
|
26
|
+
@if config.$fontFamily {
|
|
27
|
+
@include core.fontFace(config.$fontFamily, config.$fontWeights, config.$fontStyles);
|
|
28
|
+
}
|
|
27
29
|
|
|
28
30
|
@if config.$fontFamilyCursive {
|
|
29
|
-
@include core.fontFace(config.$fontFamilyCursive, config.$fontWeightsCursive);
|
|
31
|
+
@include core.fontFace(config.$fontFamilyCursive, config.$fontWeightsCursive, config.$fontStylesCursive);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
@if config.$fontFamilyBrand {
|
|
35
|
+
@include core.fontFace(config.$fontFamilyBrand, config.$fontWeightsBrand, config.$fontStylesBrand);
|
|
30
36
|
}
|
|
31
37
|
|
|
32
38
|
*,
|
package/src/commons/config.scss
CHANGED
|
@@ -13,12 +13,22 @@ $fontWeights: (
|
|
|
13
13
|
'bold': 700,
|
|
14
14
|
'black': 800,
|
|
15
15
|
) !default;
|
|
16
|
+
$fontStyles: ('normal') !default;
|
|
17
|
+
|
|
18
|
+
$fontFamilyBrand: false !default;
|
|
19
|
+
$fontWeightsBrand: (
|
|
20
|
+
'regular': 400,
|
|
21
|
+
'bold': 700,
|
|
22
|
+
'black': 800,
|
|
23
|
+
) !default;
|
|
24
|
+
$fontStylesBrand: ('normal', 'italic') !default;
|
|
16
25
|
|
|
17
26
|
$fontFamilyCursive: false !default;
|
|
18
27
|
$fontWeightsCursive: (
|
|
19
28
|
'regular': 400,
|
|
20
29
|
'bold': 700,
|
|
21
30
|
) !default;
|
|
31
|
+
$fontStylesCursive: ('normal') !default;
|
|
22
32
|
|
|
23
33
|
$product: 'brand' !default;
|
|
24
34
|
$palettesShades: text, 0, 25, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900; // text is deprecated
|
|
@@ -573,7 +583,7 @@ $loading: (
|
|
|
573
583
|
|
|
574
584
|
$textLink: (
|
|
575
585
|
color: var(--palettes-product-700),
|
|
576
|
-
hover: var(--palettes-product-
|
|
586
|
+
hover: var(--palettes-product-800),
|
|
577
587
|
disabled: var(--palettes-neutral-500), // disabled token candidate
|
|
578
588
|
);
|
|
579
589
|
|
package/src/commons/core.scss
CHANGED
|
@@ -6,10 +6,8 @@
|
|
|
6
6
|
|
|
7
7
|
$contents: '100\\%', 'fit-content';
|
|
8
8
|
$boxModel: 'margin', 'padding', 'border';
|
|
9
|
-
$boxDirection:
|
|
10
|
-
|
|
11
|
-
$corners:
|
|
12
|
-
'', 'top-left-', 'top-right-', 'bottom-left-', 'bottom-right-', 'start-start-', 'start-end-', 'end-start-', 'end-end-'; // top-left, top-right, bottom-left and bottom-right are deprecated
|
|
9
|
+
$boxDirection: '', 'top', 'bottom', 'left', 'right', 'inline', 'block', 'block-start', 'block-end', 'inline-start', 'inline-end'; // top, bottom, left and right are deprecated
|
|
10
|
+
$corners: '', 'top-left-', 'top-right-', 'bottom-left-', 'bottom-right-', 'start-start-', 'start-end-', 'end-start-', 'end-end-'; // top-left, top-right, bottom-left and bottom-right are deprecated
|
|
13
11
|
$gaps: 'column-gap', 'row-gap', 'gap';
|
|
14
12
|
$displays: 'block', 'flex', 'grid', 'inline', 'inline-flex', 'inline-block', 'inline-grid', 'contents', 'none';
|
|
15
13
|
$direction: 'column', 'column-reverse', 'row', 'row-reverse';
|
|
@@ -127,16 +125,30 @@ $overflow: 'hidden', 'auto', 'visible', 'scroll';
|
|
|
127
125
|
}
|
|
128
126
|
}
|
|
129
127
|
|
|
130
|
-
@mixin fontFace($family, $weights, $path: '//cdn.lucca.fr/transverse/fonts'
|
|
128
|
+
@mixin fontFace($family, $weights, $styles, $path: '//cdn.lucca.fr/transverse/fonts') {
|
|
131
129
|
@each $keyword, $number in $weights {
|
|
132
|
-
@
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
130
|
+
@each $style in $styles {
|
|
131
|
+
@if $style == 'normal' {
|
|
132
|
+
@font-face {
|
|
133
|
+
font-family: '#{$family}';
|
|
134
|
+
src:
|
|
135
|
+
url('#{$path}/#{$family}/#{$keyword}.woff2') format('woff2'),
|
|
136
|
+
url('#{$path}/#{$family}/#{$keyword}.woff') format('woff');
|
|
137
|
+
font-weight: #{$number};
|
|
138
|
+
font-style: #{$style};
|
|
139
|
+
font-display: swap;
|
|
140
|
+
}
|
|
141
|
+
} @else {
|
|
142
|
+
@font-face {
|
|
143
|
+
font-family: '#{$family}';
|
|
144
|
+
src:
|
|
145
|
+
url('#{$path}/#{$family}/#{$keyword}-#{$style}.woff2') format('woff2'),
|
|
146
|
+
url('#{$path}/#{$family}/#{$keyword}-#{$style}.woff') format('woff');
|
|
147
|
+
font-weight: #{$number};
|
|
148
|
+
font-style: #{$style};
|
|
149
|
+
font-display: swap;
|
|
150
|
+
}
|
|
151
|
+
}
|
|
140
152
|
}
|
|
141
153
|
}
|
|
142
154
|
}
|
|
@@ -274,6 +274,10 @@
|
|
|
274
274
|
font-family: var(--commons-font-family-cursive) !important;
|
|
275
275
|
}
|
|
276
276
|
|
|
277
|
+
.u-fontFamilyBrand {
|
|
278
|
+
font-family: var(--commons-font-family-brand) !important;
|
|
279
|
+
}
|
|
280
|
+
|
|
277
281
|
.pr-u-focusVisible {
|
|
278
282
|
&:focus-visible {
|
|
279
283
|
@include a11y.focusVisible;
|
package/src/commons/vars.scss
CHANGED
|
@@ -47,10 +47,18 @@
|
|
|
47
47
|
--commons-border-100: var(--palettes-neutral-100);
|
|
48
48
|
--commons-border-200: var(--palettes-neutral-200);
|
|
49
49
|
|
|
50
|
+
@if (config.$fontFamily) {
|
|
51
|
+
--commons-font-family: '#{config.$fontFamily}', Tahoma, sans-serif;
|
|
52
|
+
}
|
|
53
|
+
|
|
50
54
|
@if (config.$fontFamilyCursive) {
|
|
51
55
|
--commons-font-family-cursive: '#{config.$fontFamilyCursive}', cursive;
|
|
52
56
|
}
|
|
53
57
|
|
|
58
|
+
@if (config.$fontFamilyBrand) {
|
|
59
|
+
--commons-font-family-brand: '#{config.$fontFamilyBrand}', sans-serif;
|
|
60
|
+
}
|
|
61
|
+
|
|
54
62
|
// Deprecated
|
|
55
63
|
--commons-background-base: var(--palettes-neutral-25);
|
|
56
64
|
--commons-divider-color: var(--palettes-neutral-200);
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
|
|
57
57
|
&:hover {
|
|
58
58
|
--components-button-color: var(--palettes-0, var(--palettes-text, var(--palettes-product-0)));
|
|
59
|
-
--components-button-backgroundColor: var(--palettes-
|
|
59
|
+
--components-button-backgroundColor: var(--palettes-800, var(--palettes-product-800));
|
|
60
60
|
}
|
|
61
61
|
|
|
62
62
|
&:focus-visible {
|
|
@@ -64,7 +64,7 @@
|
|
|
64
64
|
}
|
|
65
65
|
|
|
66
66
|
&:active {
|
|
67
|
-
--components-button-backgroundColor: var(--palettes-
|
|
67
|
+
--components-button-backgroundColor: var(--palettes-900, var(--palettes-product-900));
|
|
68
68
|
}
|
|
69
69
|
|
|
70
70
|
&:disabled {
|
|
@@ -12,7 +12,6 @@
|
|
|
12
12
|
position: relative;
|
|
13
13
|
|
|
14
14
|
@at-root ($atRoot) {
|
|
15
|
-
|
|
16
15
|
.highlightData-content {
|
|
17
16
|
@include reset.list($list: 'dl');
|
|
18
17
|
display: var(--components-highlightData-display);
|
|
@@ -49,14 +48,14 @@
|
|
|
49
48
|
.highlightData-content-action {
|
|
50
49
|
grid-area: action;
|
|
51
50
|
padding-block-start: var(--components-highlightData-action-padding);
|
|
52
|
-
|
|
51
|
+
|
|
53
52
|
&:empty {
|
|
54
53
|
display: none;
|
|
55
54
|
}
|
|
56
55
|
|
|
57
56
|
.link {
|
|
58
57
|
--commons-text-link-color: var(--palettes-700, var(--palettes-product-700));
|
|
59
|
-
--commons-text-link-hover: var(--palettes-
|
|
58
|
+
--commons-text-link-hover: var(--palettes-800, var(--palettes-product-800));
|
|
60
59
|
}
|
|
61
60
|
|
|
62
61
|
.button {
|
|
@@ -42,10 +42,10 @@
|
|
|
42
42
|
// because we can't set an individual spacing for each row, transparent border are used for this
|
|
43
43
|
border-block-end: var(--components-indexTable-row-stack-border-bottom) solid transparent;
|
|
44
44
|
// stack apparence
|
|
45
|
-
background-image:
|
|
46
|
-
var(--components-indexTable-row-
|
|
47
|
-
background-position:
|
|
48
|
-
var(--components-indexTable-row-
|
|
45
|
+
background-image: var(--components-indexTable-row-stack2-background-image, none),
|
|
46
|
+
var(--components-indexTable-row-stack3-background-image, none);
|
|
47
|
+
background-position: var(--components-indexTable-row-stack2-background-position, 0 0),
|
|
48
|
+
var(--components-indexTable-row-stack3-background-position, 0 0);
|
|
49
49
|
background-repeat: no-repeat, no-repeat;
|
|
50
50
|
transition-property: background-image, background-position;
|
|
51
51
|
transition-duration: var(--commons-animations-durations-fast);
|
|
@@ -230,10 +230,10 @@
|
|
|
230
230
|
position: absolute;
|
|
231
231
|
inset-block-start: 0;
|
|
232
232
|
inset-block-end: calc((var(--components-indexTable-row-spacing-responsive) + var(--components-indexTable-stack3-row-spacing)) * -1);
|
|
233
|
-
background-image:
|
|
234
|
-
var(--components-indexTable-row-
|
|
235
|
-
background-position:
|
|
236
|
-
var(--components-indexTable-row-
|
|
233
|
+
background-image: var(--components-indexTable-row-stack2-background-image, none),
|
|
234
|
+
var(--components-indexTable-row-stack3-background-image, none);
|
|
235
|
+
background-position: var(--components-indexTable-row-stack2-background-position, 0 0),
|
|
236
|
+
var(--components-indexTable-row-stack3-background-position, 0 0);
|
|
237
237
|
background-repeat: no-repeat, no-repeat;
|
|
238
238
|
transition-property: background-image, background-position;
|
|
239
239
|
transition-duration: var(--commons-animations-durations-fast);
|
|
@@ -294,14 +294,15 @@
|
|
|
294
294
|
}
|
|
295
295
|
|
|
296
296
|
@mixin layoutFixed {
|
|
297
|
-
table-layout: fixed;
|
|
298
|
-
|
|
299
297
|
[class*='row-cell'] {
|
|
300
298
|
--cell-width: calc(var(--components-indexTable-cell-fixed-width, var(--components-index-table-cell-fixed-width)) * 1rem);
|
|
301
299
|
}
|
|
302
300
|
|
|
303
|
-
&.mod-layoutFixed
|
|
304
|
-
|
|
301
|
+
&.mod-layoutFixed {
|
|
302
|
+
table-layout: fixed;
|
|
303
|
+
[class*='row-cell'] {
|
|
304
|
+
@include cellFixedWidth;
|
|
305
|
+
}
|
|
305
306
|
}
|
|
306
307
|
|
|
307
308
|
//Layout fixed at breakpoint
|