@lucca-front/scss 21.3.0-rc.7 → 21.3.0

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 (23) hide show
  1. package/dist/lucca-front.min.css +1 -1
  2. package/package.json +3 -3
  3. package/src/commons/utils/highlight-prisme.scss +6 -2
  4. package/src/commons/vars.scss +3 -3
  5. package/src/components/dialog/component.scss +2 -2
  6. package/src/components/impersonation/component.scss +1 -2
  7. package/src/components/impersonation/vars.scss +0 -1
  8. package/src/components/link/component.scss +3 -0
  9. package/src/components/link/index.scss +9 -0
  10. package/src/components/link/mods.scss +4 -0
  11. package/src/components/link/vars.scss +1 -0
  12. package/src/components/multiSelect/component.scss +4 -3
  13. package/src/components/multiSelect/index.scss +8 -2
  14. package/src/components/multiSelect/mods.scss +2 -0
  15. package/src/components/multiSelect/states.scss +10 -2
  16. package/src/components/multiSelect/vars.scss +1 -0
  17. package/src/components/numericBadge/component.scss +0 -2
  18. package/src/components/numericBadge/mods.scss +0 -12
  19. package/src/components/numericBadge/vars.scss +0 -4
  20. package/src/components/pageHeader/component.scss +2 -3
  21. package/src/components/pageHeader/mods.scss +0 -2
  22. package/src/components/pageHeader/vars.scss +0 -2
  23. package/src/components/skipLinks/component.scss +9 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lucca-front/scss",
3
- "version": "21.3.0-rc.7",
3
+ "version": "21.3.0",
4
4
  "description": "A Sass framework for Lucca products.",
5
5
  "main": "src/main.scss",
6
6
  "scripts": {},
@@ -24,7 +24,7 @@
24
24
  "normalize.css": "^8.0.0"
25
25
  },
26
26
  "peerDependencies": {
27
- "@lucca-front/icons": "21.3.0-rc.7",
28
- "@lucca/prisme": "21.3.0-rc.7"
27
+ "@lucca-front/icons": "21.3.0",
28
+ "@lucca/prisme": "21.3.0"
29
29
  }
30
30
  }
package/src/commons/utils/highlight-prisme.scss CHANGED
@@ -26,6 +26,7 @@
26
26
  .textFlow,
27
27
  .mobilePush,
28
28
  .presentation,
29
+ .highlightText,
29
30
 
30
31
  // Lists
31
32
  .chip,
@@ -106,6 +107,7 @@
106
107
  .avatar,
107
108
  .userPopover,
108
109
  .userTile,
110
+ .impersonation,
109
111
 
110
112
  // Loaders
111
113
  .loading,
@@ -142,7 +144,7 @@
142
144
 
143
145
  // Icons
144
146
  lu-bubble-illustration .bubbleIllustration,
145
- lu-bubble-icon .bubbleIcon,
147
+ lu-bubble-icon,
146
148
  lu-software-icon .softwareIcon,
147
149
  lu-icon .lucca-icon,
148
150
 
@@ -158,6 +160,7 @@
158
160
  lu-text-flow,
159
161
  lu-mobile-push,
160
162
  lu-data-presentation,
163
+ lu-highlight-text,
161
164
 
162
165
  // Lists
163
166
  lu-chip,
@@ -239,6 +242,7 @@
239
242
  // Users
240
243
  lu-user-picture,
241
244
  lu-user-tile,
245
+ lu-impersonation,
242
246
 
243
247
  // Loaders
244
248
  lu-loading,
@@ -262,7 +266,7 @@
262
266
  lu-dialog-content,
263
267
  lu-dialog-footer,
264
268
  lu-footer .footer,
265
- lu-horizontal-navigation,
269
+ lu-horizontal-navigation .horizontalNavigation,
266
270
  lu-vertical-navigation,
267
271
  [luDataTableRow] {
268
272
  outline: 2px solid springgreen;
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, 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));
72
+ --palettes-assets-primary-lighter: var(--palettes-product-50);
73
+ --palettes-assets-primary-light: var(--palettes-product-100);
74
+ --palettes-assets-primary-dark: var(--palettes-product-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);
package/src/components/dialog/component.scss CHANGED
@@ -34,7 +34,7 @@
34
34
 
35
35
  @at-root ($atRoot) {
36
36
  .dialog-inside {
37
- &:has(.dialog-inside-formOptional, .dialog-formOptional, .dialog-form) {
37
+ &:has(> .dialog-inside-formOptional, > .dialog-formOptional, > .dialog-form) {
38
38
  display: contents;
39
39
 
40
40
  .dialog-formOptional, // stylelint-disable-line selector-disallowed-list -- .dialog-formOptional is deprecated
@@ -62,7 +62,7 @@
62
62
  }
63
63
  }
64
64
 
65
- &:not(:has(.dialog-inside-formOptional, .dialog-formOptional, .dialog-form)) {
65
+ &:not(:has(> .dialog-inside-formOptional, > .dialog-formOptional, > .dialog-form)) {
66
66
  display: grid;
67
67
  grid-template-areas:
68
68
  'header '
package/src/components/impersonation/component.scss CHANGED
@@ -12,7 +12,7 @@
12
12
  .impersonation-trigger {
13
13
  @include reset.button;
14
14
 
15
- border: 1px solid var(--components-impersonation-trigger-borderColor);
15
+ box-shadow: 0 0 0 1px var(--components-impersonation-trigger-borderColor);
16
16
  background-color: var(--components-impersonation-trigger-backgroundColor);
17
17
  border-radius: var(--pr-t-border-radius-200);
18
18
  inline-size: fit-content;
@@ -24,7 +24,6 @@
24
24
  min-block-size: var(--pr-t-spacings-500);
25
25
  font-weight: var(--components-impersonation-trigger-fontWeight);
26
26
  color: var(--components-impersonation-trigger-color);
27
- box-shadow: var(--components-impersonation-trigger-boxShadow);
28
27
  transition-property: box-shadow, border-color;
29
28
  transition-duration: var(--commons-animations-durations-fast);
30
29
  }
package/src/components/impersonation/vars.scss CHANGED
@@ -5,7 +5,6 @@
5
5
  --components-impersonation-trigger-fontWeight: var(--pr-t-font-fontWeight-regular);
6
6
  --components-impersonation-trigger-color: var(--pr-t-color-text);
7
7
  --components-impersonation-trigger-icon-color: var(--pr-t-color-text-subtle);
8
- --components-impersonation-trigger-boxShadow: none;
9
8
  --components-impersonation-clear-display: none;
10
9
  --components-impersonation-trigger-icon-marginInlineStart: auto;
11
10
  }
package/src/components/link/component.scss CHANGED
@@ -37,6 +37,9 @@
37
37
  @at-root ($atRoot) {
38
38
  .link-icon {
39
39
  white-space: nowrap;
40
+ opacity: var(--components-link-icon-opacity);
41
+ transition-property: opacity;
42
+ transition-duration: var(--commons-animations-durations-fast);
40
43
 
41
44
  &::before {
42
45
  content: ' ' / '';
package/src/components/link/index.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  @use 'exports' as *;
2
+ @use '@lucca-front/scss/src/commons/utils/media';
2
3
 
3
4
  .link {
4
5
  @layer components {
@@ -19,6 +20,14 @@
19
20
  }
20
21
  }
21
22
 
23
+ @include media.isNotTouchDevice {
24
+ &.mod-hiddenIcon {
25
+ &:not(:hover, :focus-visible) {
26
+ @include hiddenIcon;
27
+ }
28
+ }
29
+ }
30
+
22
31
  &:is(:disabled, .is-disabled) {
23
32
  @include disabled;
24
33
  }
package/src/components/link/mods.scss CHANGED
@@ -17,3 +17,7 @@
17
17
  @mixin legacyIcon {
18
18
  --components-link-icon-marginInlineStart: 0.2em;
19
19
  }
20
+
21
+ @mixin hiddenIcon {
22
+ --components-link-icon-opacity: 0;
23
+ }
package/src/components/link/vars.scss CHANGED
@@ -5,4 +5,5 @@
5
5
  --components-link-color-hover: var(--commons-text-link-hover);
6
6
  --components-link-cursor: pointer;
7
7
  --components-link-icon-marginInlineStart: 0;
8
+ --components-link-icon-opacity: 1;
8
9
  }
package/src/components/multiSelect/component.scss CHANGED
@@ -32,10 +32,11 @@
32
32
  flex: 1;
33
33
  }
34
34
 
35
- .multipleSelect-displayer-value {
36
- display: flex;
35
+ .multipleSelect-displayer-suffix {
36
+ display: var(--components-multiSelect-displayer-suffix-display);
37
37
  gap: var(--pr-t-spacings-50);
38
- flex-wrap: wrap;
38
+ flex: 1;
39
+ order: 1;
39
40
  }
40
41
 
41
42
  .multipleSelect-displayer-chip.chip {
package/src/components/multiSelect/index.scss CHANGED
@@ -23,10 +23,16 @@
23
23
  @include filterPillDisplayerFocused;
24
24
  }
25
25
  }
26
+
27
+ &.is-selected {
28
+ @include filterPillSelected;
29
+ }
26
30
  }
27
31
 
28
- &.is-selected {
29
- @include selected;
32
+ &:not(.mod-filterPill) {
33
+ &.is-selected {
34
+ @include selected;
35
+ }
30
36
  }
31
37
 
32
38
  &:has(.multipleSelect-displayer-search:focus-visible) {
package/src/components/multiSelect/mods.scss CHANGED
@@ -37,6 +37,8 @@
37
37
  }
38
38
 
39
39
  @mixin filterPill {
40
+ --components-multiSelect-displayer-suffix-display: flex;
41
+
40
42
  flex-direction: column;
41
43
  align-items: stretch;
42
44
  box-shadow: none;
package/src/components/multiSelect/states.scss CHANGED
@@ -42,8 +42,16 @@
42
42
 
43
43
  @mixin selected {
44
44
  .multipleSelect-displayer-search {
45
- &[readonly],
46
- &:not(:focus) {
45
+ &:not(:focus),
46
+ &[readonly] {
47
+ @include a11y.mask;
48
+ }
49
+ }
50
+ }
51
+
52
+ @mixin filterPillSelected {
53
+ .multipleSelect-displayer-search {
54
+ &[readonly] {
47
55
  @include a11y.mask;
48
56
  }
49
57
  }
package/src/components/multiSelect/vars.scss CHANGED
@@ -6,4 +6,5 @@
6
6
  --components-multiSelect-border-color: var(--pr-t-color-input-border);
7
7
  --components-multiSelect-placeholder: var(--pr-t-color-input-text-placeholder);
8
8
  --components-multiSelect-arrow-color: var(--pr-t-color-input-icon);
9
+ --components-multiSelect-displayer-suffix-display: contents;
9
10
  }
package/src/components/numericBadge/component.scss CHANGED
@@ -8,8 +8,6 @@
8
8
  min-inline-size: var(--components-numericBadge-size);
9
9
  padding: var(--pr-t-spacings-50);
10
10
  font: var(--components-numericBadge-font);
11
- font-size: var(--components-numericBadge-fontSize); // Deprecated
12
- line-height: var(--components-numericBadge-lineHeight); // Deprecated
13
11
  font-weight: var(--pr-t-font-fontWeight-semibold);
14
12
  background-color: var(--components-numericBadge-background);
15
13
  color: var(--components-numericBadge-color);
package/src/components/numericBadge/mods.scss CHANGED
@@ -4,30 +4,18 @@
4
4
  --components-numericBadge-size: 1.5rem;
5
5
  --components-numericBadge-borderRadius: var(--pr-t-border-radius-default);
6
6
  --components-numericBadge-font: var(--pr-t-font-body-S);
7
-
8
- // Deprecated
9
- --components-numericBadge-fontSize: var(--pr-t-font-body-S-fontSize);
10
- --components-numericBadge-lineHeight: var(--pr-t-font-body-S-lineHeight);
11
7
  }
12
8
 
13
9
  @mixin S {
14
10
  --components-numericBadge-size: 1.25rem;
15
11
  --components-numericBadge-borderRadius: var(--pr-t-border-radius-small);
16
12
  --components-numericBadge-font: var(--pr-t-font-body-XS);
17
-
18
- // Deprecated
19
- --components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);
20
- --components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight);
21
13
  }
22
14
 
23
15
  @mixin XS {
24
16
  --components-numericBadge-size: 1rem;
25
17
  --components-numericBadge-borderRadius: var(--pr-t-border-radius-small);
26
18
  --components-numericBadge-font: var(--pr-t-font-body-XS);
27
-
28
- // Deprecated
29
- --components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);
30
- --components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight);
31
19
  }
32
20
 
33
21
  @mixin inherit {
package/src/components/numericBadge/vars.scss CHANGED
@@ -5,8 +5,4 @@
5
5
  --components-numericBadge-size: 1.5rem;
6
6
  --components-numericBadge-font: var(--pr-t-font-body-S);
7
7
  --components-numericBadge-borderRadius: var(--pr-t-border-radius-default);
8
-
9
- // Deprecated
10
- --components-numericBadge-fontSize: var(--pr-t-font-body-S-fontSize);
11
- --components-numericBadge-lineHeight: var(--pr-t-font-body-S-lineHeight);
12
8
  }
package/src/components/pageHeader/component.scss CHANGED
@@ -14,8 +14,8 @@
14
14
  display: flex;
15
15
  justify-content: space-between;
16
16
  align-items: flex-start;
17
- gap: var(--pr-t-spacings-100);
18
- flex-wrap: var(--components-pageHeader-content-flexWrap);
17
+ flex-wrap: wrap;
18
+ row-gap: var(--pr-t-spacings-100);
19
19
  }
20
20
 
21
21
  .pageHeader-content-title {
@@ -42,7 +42,6 @@
42
42
  align-items: center;
43
43
  flex-wrap: wrap;
44
44
  row-gap: var(--pr-t-spacings-200);
45
- flex-shrink: var(--components-pageHeader-content-action-flexShrink);
46
45
 
47
46
  .button {
48
47
  margin: 0;
package/src/components/pageHeader/mods.scss CHANGED
@@ -36,8 +36,6 @@
36
36
  }
37
37
 
38
38
  @mixin wide {
39
- --components-pageHeader-content-action-flexShrink: 0;
40
- --components-pageHeader-content-flexWrap: nowrap;
41
39
  --components-pageHeader-padding: var(--pr-t-spacings-300) var(--pr-t-spacings-400);
42
40
  }
43
41
 
package/src/components/pageHeader/vars.scss CHANGED
@@ -1,6 +1,4 @@
1
1
  @mixin vars {
2
2
  --components-pageHeader-description-max-width: 50rem;
3
3
  --components-pageHeader-padding: var(--pr-t-spacings-300) var(--pr-t-spacings-200);
4
- --components-pageHeader-content-flexWrap: wrap;
5
- --components-pageHeader-content-action-flexShrink: 1;
6
4
  }
package/src/components/skipLinks/component.scss CHANGED
@@ -5,6 +5,9 @@
5
5
  list-style-type: none;
6
6
  justify-content: center;
7
7
  display: flex;
8
+ flex-direction: column;
9
+ align-items: center;
10
+ gap: var(--pr-t-spacings-100);
8
11
  margin: 0;
9
12
  padding: 0;
10
13
  z-index: 9010;
@@ -12,6 +15,12 @@
12
15
  inset-block-end: auto;
13
16
 
14
17
  @at-root ($atRoot) {
18
+ .skipLinks_target {
19
+ &:focus-visible {
20
+ @include a11y.focusVisible;
21
+ }
22
+ }
23
+
15
24
  .skipLinks-action {
16
25
  border: 0;
17
26
  margin: 0;