@lucca-front/scss 21.2.3-rc.4 → 21.2.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/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.2.
|
|
3
|
+
"version": "21.2.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.2.
|
|
27
|
-
"@lucca/prisme": "21.2.
|
|
27
|
+
"@lucca-front/icons": "21.2.4",
|
|
28
|
+
"@lucca/prisme": "21.2.4"
|
|
28
29
|
}
|
|
29
30
|
}
|
package/src/commons/config.scss
CHANGED
|
@@ -116,7 +116,7 @@ $palettesDefault: 'brand', 'brandContrasted', 'neutral', 'navigation', 'AI';
|
|
|
116
116
|
$palettesProduct: 'product';
|
|
117
117
|
$palettesOtherProduct: () !default;
|
|
118
118
|
$palettesDecorative: 'kiwi', 'cucumber', 'mint', 'lagoon', 'blueberry', 'lavender', 'watermelon', 'pumpkin' !default;
|
|
119
|
-
$palettesDecorativeMandatory: 'pineapple', 'lime', 'grape', 'glacier';
|
|
119
|
+
$palettesDecorativeMandatory: 'pineapple', 'lime', 'grape', 'glacier', 'pineappleContrasted';
|
|
120
120
|
|
|
121
121
|
// pineapple, lime, grape, glacier
|
|
122
122
|
$palettesDeprecated: ('lucca', 'grey', 'primary', 'secondary') !default;
|
|
@@ -547,6 +547,19 @@ $pineapple: (
|
|
|
547
547
|
900: #665400,
|
|
548
548
|
) !default;
|
|
549
549
|
|
|
550
|
+
$pineappleContrasted: (
|
|
551
|
+
50: #fef7d7,
|
|
552
|
+
100: #fbf1b6,
|
|
553
|
+
200: #fae999,
|
|
554
|
+
300: #f9e16c,
|
|
555
|
+
400: #f8dc4f,
|
|
556
|
+
500: #e7c623,
|
|
557
|
+
600: #b89600,
|
|
558
|
+
700: #8f7500,
|
|
559
|
+
800: #7b6500,
|
|
560
|
+
900: #665400,
|
|
561
|
+
) !default;
|
|
562
|
+
|
|
550
563
|
// https://sass-lang.com/documentation/variables/#advanced-variable-functions
|
|
551
564
|
$productsInterpolation: (
|
|
552
565
|
'brand': $brand,
|
|
@@ -587,6 +600,7 @@ $palettesInterpolation: (
|
|
|
587
600
|
'watermelon': $watermelon,
|
|
588
601
|
'pumpkin': $pumpkin,
|
|
589
602
|
'pineapple': $pineapple,
|
|
603
|
+
'pineappleContrasted': $pineappleContrasted,
|
|
590
604
|
'pagga': $pagga,
|
|
591
605
|
'poplee': $poplee,
|
|
592
606
|
'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($angle: 0, $color1: var(--palettes-neutral-0) , $color2: var(--palettes-neutral-900), $radius: var(--pr-t-border-radius-default), $width: var(--commons-divider-width)) {
|
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;
|