@lucca-front/scss 16.2.0-rc.3 → 16.2.0-rc.5

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 (14) hide show
  1. package/dist/lucca-front.min.css +1 -1
  2. package/package.json +2 -2
  3. package/src/components/button/mods.scss +2 -0
  4. package/src/components/buttonGroup/component.scss +1 -1
  5. package/src/components/filters/component.scss +1 -1
  6. package/src/components/navside/vars.scss +2 -2
  7. package/src/components/statusBadge/component.scss +6 -6
  8. package/src/components/statusBadge/index.scss +4 -0
  9. package/src/components/statusBadge/mods.scss +6 -0
  10. package/src/components/statusBadge/vars.scss +4 -0
  11. package/src/components/tag/component.scss +2 -2
  12. package/src/components/tag/index.scss +2 -2
  13. package/src/components/tag/mods.scss +3 -3
  14. package/src/components/tag/vars.scss +0 -10
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lucca-front/scss",
3
- "version": "16.2.0-rc.3",
3
+ "version": "16.2.0-rc.5",
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": "v16.2.0-rc.3"
26
+ "@lucca-front/icons": "v16.2.0-rc.5"
27
27
  }
28
28
  }
package/src/components/button/mods.scss CHANGED
@@ -92,6 +92,8 @@
92
92
  padding: 0 !important;
93
93
  text-align: center;
94
94
  min-width: 2rem;
95
+ border-top-right-radius: var(--commons-borderRadius-M);
96
+ border-bottom-right-radius: var(--commons-borderRadius-M);
95
97
 
96
98
  &::before {
97
99
  @include icon.generate('arrow_south');
package/src/components/buttonGroup/component.scss CHANGED
@@ -45,7 +45,7 @@
45
45
  .button-group-item {
46
46
  flex-grow: 1;
47
47
 
48
- .button {
48
+ .button:not(.mod-more) {
49
49
  width: 100%;
50
50
  border-radius: 0;
51
51
  }
package/src/components/filters/component.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  @mixin component($atRoot: 'without: rule') {
2
2
  background-color: var(--components-filters-background);
3
- border-bottom: var(--commons-divider-width) solid var(--commons-divider-color);
3
+ box-shadow: 0 1px 0 0 var(--commons-border-200);
4
4
  min-height: var(--components-filters-height);
5
5
  align-items: center;
6
6
  display: flex;
package/src/components/navside/vars.scss CHANGED
@@ -20,7 +20,7 @@
20
20
  --components-navSide-fullwidth-palette-hovered-text: var(--colors-white-color);
21
21
  --components-navSide-fullwidth-palette-alert-color: var(--palettes-primary-200);
22
22
  --components-navSide-fullwidth-palette-alert-text: var(--palettes-primary-800);
23
- --components-navSide-fullwidth-palette-selected-alert-color: var(--palettes-secondary-700);
23
+ --components-navSide-fullwidth-palette-selected-alert-color: var(--palettes-primary-700);
24
24
  --components-navSide-fullwidth-palette-selected-alert-text: var(--colors-white-color);
25
25
 
26
26
  --components-navSide-compact-palette-bg-color: var(--palettes-navigation-800);
@@ -31,7 +31,7 @@
31
31
  --components-navSide-compact-palette-hovered-text: var(--colors-white-color);
32
32
  --components-navSide-compact-palette-alert-color: var(--palettes-primary-200);
33
33
  --components-navSide-compact-palette-alert-text: var(--palettes-primary-800);
34
- --components-navSide-compact-palette-selected-alert-color: var(--palettes-secondary-700);
34
+ --components-navSide-compact-palette-selected-alert-color: var(--palettes-primary-700);
35
35
  --components-navSide-compact-palette-selected-alert-text: var(--colors-white-color);
36
36
  --components-navSide-compact-font-size: 0.875rem;
37
37
 
package/src/components/statusBadge/component.scss CHANGED
@@ -1,11 +1,11 @@
1
1
  @mixin component($atRoot: 'without: rule') {
2
2
  align-items: flex-start;
3
- background-color: var(--palettes-50, var(--palettes-primary-50));
3
+ background-color: var(--palettes-100, var(--palettes-primary-100));
4
4
  border-radius: var(--commons-borderRadius-L);
5
5
  display: inline-flex;
6
- font-size: var(--sizes-S-fontSize);
6
+ font-size: var(--components-statusBadge-fontSize);
7
7
  gap: var(--spacings-XXS);
8
- line-height: var(--sizes-XS-lineHeight);
8
+ line-height: var(--components-statusBadge-lineHeight);
9
9
  padding: calc(var(--spacings-XXS) / 2) var(--spacings-XS) calc(var(--spacings-XXS) / 2) .375rem;
10
10
  white-space: nowrap;
11
11
 
@@ -14,10 +14,10 @@
14
14
  border-radius: 50%;
15
15
  content: '';
16
16
  display: block;
17
- height: .5rem;
17
+ height: var(--components-statusBadge-dot-size);
18
18
  flex-shrink: 0;
19
- width: .5rem;
20
- top: var(--spacings-XXS);
19
+ width: var(--components-statusBadge-dot-size);
20
+ top: var(--components-statusBadge-dot-top);
21
21
  position: relative;
22
22
  }
23
23
 
package/src/components/statusBadge/index.scss CHANGED
@@ -3,4 +3,8 @@
3
3
  .statusBadge {
4
4
  @include vars;
5
5
  @include component;
6
+
7
+ &.mod-L {
8
+ @include l;
9
+ }
6
10
  }
package/src/components/statusBadge/mods.scss CHANGED
@@ -0,0 +1,6 @@
1
+ @mixin l {
2
+ --components-statusBadge-fontSize: var(--sizes-M-fontSize);
3
+ --components-statusBadge-lineHeight: var(--sizes-S-lineHeight);
4
+ --components-statusBadge-dot-size: .625rem;
5
+ --components-statusBadge-dot-top: .325rem;
6
+ }
package/src/components/statusBadge/vars.scss CHANGED
@@ -1,2 +1,6 @@
1
1
  @mixin vars {
2
+ --components-statusBadge-fontSize: var(--sizes-S-fontSize);
3
+ --components-statusBadge-lineHeight: var(--sizes-XS-lineHeight);
4
+ --components-statusBadge-dot-size: .5rem;
5
+ --components-statusBadge-dot-top: var(--spacings-XXS);
2
6
  }
package/src/components/tag/component.scss CHANGED
@@ -2,9 +2,9 @@
2
2
  background-color: var(--palettes-100, var(--palettes-grey-100));
3
3
  border-radius: var(--commons-borderRadius-M);
4
4
  color: var(--palettes-900, var(--palettes-grey-700));
5
- font-size: var(--sizes-M-fontSize);
5
+ font-size: var(--sizes-S-fontSize);
6
6
  padding: 0 var(--spacings-XXS);
7
- line-height: var(--sizes-M-lineHeight);
7
+ line-height: var(--sizes-S-lineHeight);
8
8
  display: inline-block;
9
9
  text-align: center;
10
10
  text-decoration: none;
package/src/components/tag/index.scss CHANGED
@@ -4,8 +4,8 @@
4
4
  @include vars;
5
5
  @include component;
6
6
 
7
- &.mod-S {
8
- @include s;
7
+ &.mod-L {
8
+ @include l;
9
9
  }
10
10
 
11
11
  &.mod-clickable {
package/src/components/tag/mods.scss CHANGED
@@ -7,9 +7,9 @@
7
7
  }
8
8
  }
9
9
 
10
- @mixin s {
11
- font-size: var(--sizes-S-fontSize);
12
- line-height: var(--sizes-S-lineHeight);
10
+ @mixin l {
11
+ font-size: var(--sizes-M-fontSize);
12
+ line-height: var(--sizes-M-lineHeight);
13
13
  }
14
14
 
15
15
  @mixin outlined {
package/src/components/tag/vars.scss CHANGED
@@ -1,12 +1,2 @@
1
1
  @mixin vars {
2
- --components-tag-default-palette-50: var(--palettes-primary-50);
3
- --components-tag-default-palette-100: var(--palettes-primary-100);
4
- --components-tag-default-palette-200: var(--palettes-primary-200);
5
- --components-tag-default-palette-300: var(--palettes-primary-300);
6
- --components-tag-default-palette-400: var(--palettes-primary-400);
7
- --components-tag-default-palette-500: var(--palettes-primary-500);
8
- --components-tag-default-palette-600: var(--palettes-primary-600);
9
- --components-tag-default-palette-700: var(--palettes-primary-700);
10
- --components-tag-default-palette-800: var(--palettes-primary-800);
11
- --components-tag-default-palette-900: var(--palettes-primary-900);
12
2
  }