@lucca-front/scss 21.3.0-rc.2 → 21.3.0-rc.4
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 +5 -4
- package/src/commons/config.scss +15 -1
- package/src/commons/utils/color.scss +1 -0
- package/src/commons/utils/index.scss +4 -0
- package/src/commons/vars.scss +3 -3
- package/src/components/presentation/component.scss +2 -1
- package/src/components/presentation/index.scss +3 -0
- package/src/components/presentation/mods.scss +4 -0
- package/src/components/presentation/vars.scss +2 -0
package/package.json
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lucca-front/scss",
|
|
3
|
-
"version": "21.3.0-rc.
|
|
3
|
+
"version": "21.3.0-rc.4",
|
|
4
4
|
"description": "A Sass framework for Lucca products.",
|
|
5
5
|
"main": "src/main.scss",
|
|
6
6
|
"scripts": {},
|
|
7
7
|
"repository": {
|
|
8
8
|
"type": "git",
|
|
9
|
-
"url": "git+https://github.com/LuccaSA/lucca-front.git"
|
|
9
|
+
"url": "git+https://github.com/LuccaSA/lucca-front.git",
|
|
10
|
+
"directory": "packages/scss"
|
|
10
11
|
},
|
|
11
12
|
"keywords": [
|
|
12
13
|
"lucca",
|
|
@@ -23,7 +24,7 @@
|
|
|
23
24
|
"normalize.css": "^8.0.0"
|
|
24
25
|
},
|
|
25
26
|
"peerDependencies": {
|
|
26
|
-
"@lucca-front/icons": "21.3.0-rc.
|
|
27
|
-
"@lucca/prisme": "21.3.0-rc.
|
|
27
|
+
"@lucca-front/icons": "21.3.0-rc.4",
|
|
28
|
+
"@lucca/prisme": "21.3.0-rc.4"
|
|
28
29
|
}
|
|
29
30
|
}
|
package/src/commons/config.scss
CHANGED
|
@@ -130,7 +130,7 @@ $palettesDefault: 'brand', 'brandContrasted', 'neutral', 'navigation', 'orchid';
|
|
|
130
130
|
$palettesProduct: 'product';
|
|
131
131
|
$palettesOtherProduct: () !default;
|
|
132
132
|
$palettesDecorative: 'kiwi', 'cucumber', 'mint', 'lagoon', 'blueberry', 'lavender', 'watermelon', 'pumpkin' !default;
|
|
133
|
-
$palettesDecorativeMandatory: 'pineapple', 'lime', 'grape', 'glacier';
|
|
133
|
+
$palettesDecorativeMandatory: 'pineapple', 'lime', 'grape', 'glacier', 'pineappleContrasted';
|
|
134
134
|
|
|
135
135
|
// pineapple, lime, grape, glacier
|
|
136
136
|
$palettesDeprecated: ('lucca', 'grey', 'primary', 'secondary') !default;
|
|
@@ -569,6 +569,19 @@ $pineapple: (
|
|
|
569
569
|
900: #665400,
|
|
570
570
|
) !default;
|
|
571
571
|
|
|
572
|
+
$pineappleContrasted: (
|
|
573
|
+
50: #fef7d7,
|
|
574
|
+
100: #fbf1b6,
|
|
575
|
+
200: #fae999,
|
|
576
|
+
300: #f9e16c,
|
|
577
|
+
400: #f8dc4f,
|
|
578
|
+
500: #e7c623,
|
|
579
|
+
600: #b89600,
|
|
580
|
+
700: #8f7500,
|
|
581
|
+
800: #7b6500,
|
|
582
|
+
900: #665400,
|
|
583
|
+
) !default;
|
|
584
|
+
|
|
572
585
|
// https://sass-lang.com/documentation/variables/#advanced-variable-functions
|
|
573
586
|
$productsInterpolation: (
|
|
574
587
|
'brand': $brand,
|
|
@@ -609,6 +622,7 @@ $palettesInterpolation: (
|
|
|
609
622
|
'watermelon': $watermelon,
|
|
610
623
|
'pumpkin': $pumpkin,
|
|
611
624
|
'pineapple': $pineapple,
|
|
625
|
+
'pineappleContrasted': $pineappleContrasted,
|
|
612
626
|
'pagga': $pagga,
|
|
613
627
|
'poplee': $poplee,
|
|
614
628
|
'coreHR': $coreHR,
|
|
@@ -29,6 +29,7 @@
|
|
|
29
29
|
@include core.rosetta('--palettes-brand', '--palettes-brandContrasted', config.$palettesShades);
|
|
30
30
|
@include core.rosetta('--palettes-success', '--palettes-successContrasted', config.$palettesShades);
|
|
31
31
|
@include core.rosetta('--palettes-warning', '--palettes-warningContrasted', config.$palettesShades);
|
|
32
|
+
@include core.rosetta('--palettes-pineapple', '--palettes-pineappleContrasted', config.$palettesShades);
|
|
32
33
|
}
|
|
33
34
|
|
|
34
35
|
@mixin borderGradient($gradient: linear-gradient(to bottom right, var(--palettes-neutral-0), var(--palettes-neutral-900)), $radius: var(--pr-t-border-radius-default), $width: var(--commons-divider-width)) {
|
|
@@ -580,6 +580,10 @@
|
|
|
580
580
|
@include core.classes('text-decoration', core.$decoration);
|
|
581
581
|
@include core.classes('overflow', core.$overflow);
|
|
582
582
|
|
|
583
|
+
.pr-u-overflowWrapAnywhere {
|
|
584
|
+
overflow-wrap: anywhere !important;
|
|
585
|
+
}
|
|
586
|
+
|
|
583
587
|
@media (prefers-reduced-motion: no-preference) {
|
|
584
588
|
@include core.classes('scroll-behavior', core.$scrollBehavior);
|
|
585
589
|
}
|
package/src/commons/vars.scss
CHANGED
|
@@ -69,9 +69,9 @@
|
|
|
69
69
|
}
|
|
70
70
|
|
|
71
71
|
// stylelint-disable custom-property-pattern
|
|
72
|
-
--palettes-assets-primary-lighter: var(--palettes-#{config.$product}-50);
|
|
73
|
-
--palettes-assets-primary-light: var(--palettes-#{config.$product}-100);
|
|
74
|
-
--palettes-assets-primary-dark: var(--palettes-#{config.$product}-200);
|
|
72
|
+
--palettes-assets-primary-lighter: var(--palettes-#{config.$product}-50, var(--palettes-50));
|
|
73
|
+
--palettes-assets-primary-light: var(--palettes-#{config.$product}-100, var(--palettes-100));
|
|
74
|
+
--palettes-assets-primary-dark: var(--palettes-#{config.$product}-200, var(--palettes-200));
|
|
75
75
|
--palettes-assets-brand-lighter: var(--palettes-#{map.get(map.get(config.$palettesAssets, config.$product), 'brand')}-50);
|
|
76
76
|
--palettes-assets-brand-light: var(--palettes-#{map.get(map.get(config.$palettesAssets, config.$product), 'brand')}-100);
|
|
77
77
|
--palettes-assets-brand-dark: var(--palettes-#{map.get(map.get(config.$palettesAssets, config.$product), 'brand')}-200);
|
|
@@ -3,10 +3,11 @@
|
|
|
3
3
|
|
|
4
4
|
@mixin component($atRoot: namespace.$defaultAtRoot) {
|
|
5
5
|
margin: 0;
|
|
6
|
+
font: var(--components-presentation-font);
|
|
6
7
|
|
|
7
8
|
@at-root ($atRoot) {
|
|
8
9
|
.presentation-term {
|
|
9
|
-
font: var(--
|
|
10
|
+
font: var(--components-presentation-term-font);
|
|
10
11
|
color: var(--pr-t-color-text-subtle);
|
|
11
12
|
display: flex;
|
|
12
13
|
align-items: center;
|