@lucca-front/scss 20.3.1 → 20.3.2-rc.1

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/index.scss +1 -1
  4. package/src/components/dataTable/component.scss +5 -6
  5. package/src/components/dataTable/mods.scss +1 -1
  6. package/src/components/dropdown/mods.scss +4 -4
  7. package/src/components/highlightData/mods.scss +1 -1
  8. package/src/components/inputFramed/component.scss +3 -10
  9. package/src/components/inputFramed/index.scss +2 -0
  10. package/src/components/inputFramed/states.scss +8 -0
  11. package/src/components/richText/component.scss +0 -30
  12. package/src/components/richText/index.scss +29 -0
  13. package/src/components/richText/states.scss +29 -0
  14. package/src/components/tooltip/component.scss +0 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lucca-front/scss",
3
- "version": "20.3.1",
3
+ "version": "20.3.2-rc.1",
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": "20.3.1"
26
+ "@lucca-front/icons": "20.3.2-rc.1"
27
27
  }
28
28
  }
package/src/components/button/index.scss CHANGED
@@ -192,7 +192,7 @@
192
192
  // .disabled is deprecated
193
193
  &.is-disabled,
194
194
  &.disabled,
195
- &[aria-disabled] {
195
+ &[aria-disabled="true"] {
196
196
  @include disabled;
197
197
  }
198
198
  }
package/src/components/dataTable/component.scss CHANGED
@@ -80,6 +80,10 @@
80
80
 
81
81
  &:first-child {
82
82
  inline-size: var(--components-dataTable-cellFirst-width);
83
+
84
+ .checkboxField {
85
+ --component-checkboxField-top: 0;
86
+ }
83
87
  }
84
88
  }
85
89
 
@@ -100,12 +104,6 @@
100
104
 
101
105
  .dataTable-body-row-cell {
102
106
  vertical-align: var(--components-dataTable-cell-verticalAlign);
103
-
104
- &:first-child {
105
- &:has(.checkboxField-input) {
106
- padding-bottom: var(--pr-t-spacings-150);
107
- }
108
- }
109
107
  }
110
108
 
111
109
  .dataTable-foot-row-cell {
@@ -116,6 +114,7 @@
116
114
  display: flex;
117
115
  gap: var(--pr-t-spacings-100);
118
116
  align-items: flex-start;
117
+ font-weight: var(--pr-t-font-fontWeight-semibold);
119
118
  }
120
119
 
121
120
  .dataTable-body-row-cell-expand-button.button {
package/src/components/dataTable/mods.scss CHANGED
@@ -95,7 +95,7 @@
95
95
 
96
96
  @mixin actions {
97
97
  padding-block: 0;
98
- padding-inline: 0 var(--pr-t-spacings-50);
98
+ padding-inline: var(--pr-t-spacings-50);
99
99
  text-align: end;
100
100
  white-space: nowrap;
101
101
 
package/src/components/dropdown/mods.scss CHANGED
@@ -1,12 +1,12 @@
1
1
  @mixin critical {
2
+ --components-dropdown-list-option-action-color: var(--pr-t-color-text-critical);
3
+
2
4
  &:hover,
3
5
  &:focus-visible {
4
- --components-dropdown-list-option-action-backgroundColor: var(--palettes-error-50);
5
- --components-dropdown-list-option-action-color: var(--pr-t-color-text-critical);
6
+ --components-dropdown-list-option-action-backgroundColor: var(--palettes-critical-50);
6
7
  }
7
8
 
8
9
  &:active {
9
- --components-dropdown-list-option-action-color: var(--pr-t-color-text-critical);
10
- --components-dropdown-list-option-action-backgroundColor: var(--palettes-error-100);
10
+ --components-dropdown-list-option-action-backgroundColor: var(--palettes-critical-100);
11
11
  }
12
12
  }
package/src/components/highlightData/mods.scss CHANGED
@@ -30,7 +30,7 @@
30
30
  @mixin illustrations {
31
31
  --components-highlightData-display: flex;
32
32
  --components-highlightData-alignItem: start;
33
- --components-highlightData-action-padding: var(--pr-t-spacings-150);
33
+ --components-highlightData-action-padding: var(--pr-t-spacings-100);
34
34
 
35
35
  padding-inline-end: calc(var(--components-highlightData-illustrations-width) + var(--components-highlightData-padding-inline));
36
36
  }
package/src/components/inputFramed/component.scss CHANGED
@@ -27,22 +27,14 @@
27
27
  }
28
28
 
29
29
  .inputFramed-header-field {
30
+ flex: 1;
31
+
30
32
  &.form-field.form-field {
31
33
  position: static;
32
34
  margin-block: 0;
33
35
  }
34
36
  }
35
37
 
36
- .inputFramed-header-input.radioField-input,
37
- .inputFramed-header-input.checkboxField-input {
38
- ~ .inputFramed-header-icon.radioField-icon,
39
- ~ .inputFramed-header-icon.checkboxField-icon {
40
- &::after {
41
- outline: none;
42
- }
43
- }
44
- }
45
-
46
38
  .inputFramed-header {
47
39
  padding: var(--components-inputFramed-padding);
48
40
  border-radius: var(--pr-t-border-radius-50);
@@ -52,6 +44,7 @@
52
44
  position: relative;
53
45
  flex-grow: 1;
54
46
  display: flex;
47
+ flex-wrap: wrap;
55
48
  justify-content: space-between;
56
49
  align-content: flex-start;
57
50
  gap: var(--pr-t-spacings-100);
package/src/components/inputFramed/index.scss CHANGED
@@ -22,6 +22,8 @@
22
22
 
23
23
  &:has(.inputFramed-header-input:focus-visible) {
24
24
  @include a11y.focusVisible;
25
+
26
+ @include focusVisible;
25
27
  }
26
28
 
27
29
  &:has(.inputFramed-header-input[aria-invalid="true"]) {
package/src/components/inputFramed/states.scss CHANGED
@@ -28,3 +28,11 @@
28
28
  @mixin criticalHover {
29
29
  --components-inputFramed-borderColor: var(--pr-t-color-input-border-critical-hover);
30
30
  }
31
+
32
+ @mixin focusVisible {
33
+ .inputFramed-header-icon {
34
+ &::after {
35
+ outline: none;
36
+ }
37
+ }
38
+ }
package/src/components/richText/component.scss CHANGED
@@ -19,10 +19,6 @@
19
19
  max-block-size: var(--components-richTextField-maxHeight);
20
20
  block-size: calc(var(--components-richTextField-height) + var(--pr-t-spacings-800) + var(--pr-t-spacings-25));
21
21
 
22
- &:has(.richTextField-content:focus-visible) {
23
- @include a11y.focusVisible;
24
- }
25
-
26
22
  &:has(.richTextField-toolbar-formatting):has(.richTextField-toolbar-chips) {
27
23
  min-block-size: calc(var(--components-richTextField-minHeight) + var(--pr-t-spacings-800) + var(--pr-t-spacings-25) + var(--pr-t-spacings-600));
28
24
 
@@ -36,32 +32,6 @@
36
32
  }
37
33
  }
38
34
 
39
- // specificity must be higher here
40
- .richTextField-toolbar-button.button.button {
41
- &[aria-pressed='true'] {
42
- --components-button-color: var(--palettes-0, var(--palettes-text, var(--palettes-product-0)));
43
- --components-button-backgroundColor: var(--palettes-700, var(--palettes-product-700));
44
-
45
- &:hover {
46
- --components-button-color: var(--palettes-0, var(--palettes-text, var(--palettes-product-0)));
47
- --components-button-backgroundColor: var(--palettes-600, var(--palettes-product-600));
48
- }
49
-
50
- &:active {
51
- --components-button-backgroundColor: var(--palettes-800, var(--palettes-product-800));
52
- }
53
-
54
- &:focus-visible {
55
- @include a11y.focusVisible;
56
- }
57
-
58
- &:disabled {
59
- --components-button-color: var(--commons-disabled-background);
60
- --components-button-backgroundColor: var(--palettes-neutral-500);
61
- }
62
- }
63
- }
64
-
65
35
  @at-root ($atRoot) {
66
36
  .richTextField-toolbar {
67
37
  display: var(--components-richTextField-toolbar-display);
package/src/components/richText/index.scss CHANGED
@@ -1,5 +1,6 @@
1
1
  @use 'exports' as *;
2
2
 
3
+
3
4
  .richTextField {
4
5
  @layer components {
5
6
  @include vars;
@@ -7,6 +8,10 @@
7
8
  }
8
9
 
9
10
  @layer mods {
11
+ &:has(.richTextField-content:focus-visible) {
12
+ @include focusVisible;
13
+ }
14
+
10
15
  &:hover {
11
16
  @include hover;
12
17
  }
@@ -28,3 +33,27 @@
28
33
  }
29
34
  }
30
35
  }
36
+
37
+ @layer mods {
38
+ .richTextField-toolbar-button.button.mod-onlyIcon {
39
+ &[aria-pressed='true'] {
40
+ @include buttonPressed;
41
+
42
+ &:hover {
43
+ @include buttonPressedHover;
44
+ }
45
+
46
+ &:active {
47
+ @include buttonPressedActive;
48
+ }
49
+
50
+ &:focus-visible {
51
+ @include buttonPressedFocusVisible;
52
+ }
53
+
54
+ &:disabled {
55
+ @include buttonPressedDisabled;
56
+ }
57
+ }
58
+ }
59
+ }
package/src/components/richText/states.scss CHANGED
@@ -1,3 +1,9 @@
1
+ @use '@lucca-front/scss/src/commons/utils/a11y';
2
+
3
+ @mixin focusVisible {
4
+ @include a11y.focusVisible;
5
+ }
6
+
1
7
  @mixin hover {
2
8
  --components-richTextField-borderColor: var(--pr-t-color-input-border-hover);
3
9
  }
@@ -19,3 +25,26 @@
19
25
  @mixin errorHover {
20
26
  --components-richTextField-borderColor: var(--pr-t-color-input-border-critical-hover);
21
27
  }
28
+
29
+ @mixin buttonPressed {
30
+ --components-button-color: var(--palettes-0, var(--palettes-text, var(--palettes-product-0)));
31
+ --components-button-backgroundColor: var(--palettes-700, var(--palettes-product-700));
32
+ }
33
+
34
+ @mixin buttonPressedHover {
35
+ --components-button-color: var(--palettes-0, var(--palettes-text, var(--palettes-product-0)));
36
+ --components-button-backgroundColor: var(--palettes-600, var(--palettes-product-600));
37
+ }
38
+
39
+ @mixin buttonPressedActive {
40
+ --components-button-backgroundColor: var(--palettes-800, var(--palettes-product-800));
41
+ }
42
+
43
+ @mixin buttonPressedFocusVisible {
44
+ @include a11y.focusVisible;
45
+ }
46
+
47
+ @mixin buttonPressedDisabled {
48
+ --components-button-color: var(--commons-disabled-background);
49
+ --components-button-backgroundColor: var(--palettes-neutral-500);
50
+ }
package/src/components/tooltip/component.scss CHANGED
@@ -16,7 +16,6 @@
16
16
  animation-name: scaleIn;
17
17
  animation-duration: var(--commons-animations-durations-fast);
18
18
  animation-iteration-count: 1;
19
- hyphens: auto;
20
19
  overflow-wrap: break-word;
21
20
 
22
21
  @include keyframe.scaleIn;