@lucca-front/scss 21.2.2 → 21.3.0-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 (68) hide show
  1. package/dist/lucca-front.min.css +1 -1
  2. package/package.json +3 -3
  3. package/src/commons/config.scss +26 -4
  4. package/src/commons/utils/color.scss +2 -2
  5. package/src/commons/vars.scss +14 -0
  6. package/src/components/appLayout/mods.scss +2 -2
  7. package/src/components/avatar/component.scss +0 -2
  8. package/src/components/avatar/index.scss +31 -3
  9. package/src/components/avatar/mods.scss +28 -0
  10. package/src/components/button/mods.scss +8 -6
  11. package/src/components/callout/mods.scss +1 -1
  12. package/src/components/code/component.scss +1 -0
  13. package/src/components/comment/component.scss +1 -1
  14. package/src/components/dataTable/component.scss +6 -1
  15. package/src/components/dialog/component.scss +18 -3
  16. package/src/components/dialog/index.scss +4 -0
  17. package/src/components/dialog/mods.scss +9 -1
  18. package/src/components/dialog/vars.scss +4 -1
  19. package/src/components/fieldset/mods.scss +6 -0
  20. package/src/components/fieldset/vars.scss +1 -1
  21. package/src/components/fileEntry/component.scss +2 -2
  22. package/src/components/fileUpload/component.scss +1 -1
  23. package/src/components/filterPill/component.scss +29 -5
  24. package/src/components/filterPill/index.scss +14 -11
  25. package/src/components/filterPill/states.scss +7 -8
  26. package/src/components/filterPill/vars.scss +2 -1
  27. package/src/components/form/component.scss +6 -0
  28. package/src/components/form/mods.scss +1 -1
  29. package/src/components/form/vars.scss +1 -1
  30. package/src/components/grid/mods.scss +1 -1
  31. package/src/components/highlightText/component.scss +30 -0
  32. package/src/components/highlightText/exports.scss +4 -0
  33. package/src/components/highlightText/index.scss +8 -0
  34. package/src/components/highlightText/mods.scss +0 -0
  35. package/src/components/highlightText/states.scss +0 -0
  36. package/src/components/highlightText/vars.scss +9 -0
  37. package/src/components/horizontalNavigation/component.scss +23 -1
  38. package/src/components/horizontalNavigation/index.scss +19 -1
  39. package/src/components/horizontalNavigation/mods.scss +14 -0
  40. package/src/components/horizontalNavigation/vars.scss +7 -0
  41. package/src/components/impersonation/component.scss +59 -0
  42. package/src/components/impersonation/exports.scss +4 -0
  43. package/src/components/impersonation/index.scss +22 -0
  44. package/src/components/impersonation/mods.scss +0 -0
  45. package/src/components/impersonation/states.scss +18 -0
  46. package/src/components/impersonation/vars.scss +11 -0
  47. package/src/components/index.scss +2 -0
  48. package/src/components/indexTable/component.scss +4 -0
  49. package/src/components/inputFramed/states.scss +8 -1
  50. package/src/components/listboxOption/mods.scss +3 -3
  51. package/src/components/listing/component.scss +2 -2
  52. package/src/components/mobilePush/component.scss +1 -1
  53. package/src/components/multiSelect/component.scss +10 -0
  54. package/src/components/presentation/component.scss +1 -0
  55. package/src/components/resourceCard/mods.scss +4 -4
  56. package/src/components/resourceCard/vars.scss +1 -1
  57. package/src/components/simpleSelect/index.scss +1 -0
  58. package/src/components/softwareIcon/component.scss +67 -5
  59. package/src/components/softwareIcon/index.scss +58 -0
  60. package/src/components/softwareIcon/mods.scss +32 -0
  61. package/src/components/softwareIcon/states.scss +5 -0
  62. package/src/components/softwareIcon/vars.scss +17 -0
  63. package/src/components/tag/mods.scss +1 -1
  64. package/src/components/textFlow/component.scss +2 -0
  65. package/src/components/timepicker/component.scss +28 -4
  66. package/src/components/timepicker/mods.scss +24 -3
  67. package/src/components/timepicker/vars.scss +6 -3
  68. package/src/components/toast/component.scss +1 -0
package/src/components/softwareIcon/index.scss CHANGED
@@ -28,3 +28,61 @@
28
28
  }
29
29
  }
30
30
  }
31
+
32
+ .softwareIconWrapper {
33
+ @layer components {
34
+ @include varsWrapper;
35
+ }
36
+
37
+ @layer mods {
38
+ &.mod-XS {
39
+ @include wrapperXS;
40
+ }
41
+
42
+ &.mod-S {
43
+ @include wrapperS;
44
+ }
45
+
46
+ .softwareIcon,
47
+ .softwareIconWrapper-action {
48
+ @include insideWrapper;
49
+
50
+ &:hover,
51
+ &:focus {
52
+ @include insideWrapperHover;
53
+ }
54
+ }
55
+ }
56
+ }
57
+
58
+ .softwareIconWrapper_popover {
59
+ @layer components {
60
+ @include varsPopover;
61
+ }
62
+
63
+ @layer mods {
64
+ .softwareIcon,
65
+ .softwareIconWrapper-action {
66
+ @include block;
67
+
68
+ &:hover,
69
+ &:focus {
70
+ @include insideWrapperHover;
71
+ }
72
+ }
73
+
74
+ &.mod-XS {
75
+ &,
76
+ .softwareIcon {
77
+ @include XS;
78
+ }
79
+ }
80
+
81
+ &.mod-S {
82
+ &,
83
+ .softwareIcon {
84
+ @include S;
85
+ }
86
+ }
87
+ }
88
+ }
package/src/components/softwareIcon/mods.scss CHANGED
@@ -13,3 +13,35 @@
13
13
  @mixin L {
14
14
  --components-softwareIcon-size: var(--pr-t-spacings-600);
15
15
  }
16
+
17
+ @mixin wrapperXS {
18
+ --components-softwareIconWrapper-action-more-fontSize: var(--pr-t-font-fontSize-150);
19
+ --components-softwareIconWrapper-list-item-marginInlineStart: calc(var(--pr-t-spacings-50) * -1);
20
+ --components-softwareIcon-action-boxShadowSpread: 1px;
21
+
22
+ &,
23
+ .softwareIcon {
24
+ @include XS;
25
+ }
26
+ }
27
+
28
+ @mixin wrapperS {
29
+ --components-softwareIconWrapper-action-more-fontSize: var(--pr-t-font-fontSize-200);
30
+ --components-softwareIconWrapper-list-item-marginInlineStart: calc(var(--pr-t-spacings-50) * -1);
31
+
32
+ &,
33
+ .softwareIcon {
34
+ @include S;
35
+ }
36
+ }
37
+
38
+ @mixin insideWrapper {
39
+ --components-softwareIcon-illustration-bubble-stroke: var(--palettes-neutral-0);
40
+ --components-softwareIcon-illustration-bubble-strokeWidth: 4px;
41
+
42
+ @include block;
43
+ }
44
+
45
+ @mixin block {
46
+ --components-softwareIcon-display: block;
47
+ }
package/src/components/softwareIcon/states.scss CHANGED
@@ -6,3 +6,8 @@
6
6
  --components-softwareIcon-disabled-500: var(--palettes-neutral-500);
7
7
  --components-softwareIcon-disabled-600: var(--palettes-neutral-600);
8
8
  }
9
+
10
+ @mixin insideWrapperHover {
11
+ --components-softwareIcon-transformScale: 1.1;
12
+ --components-softwareIcon-zIndex: 1;
13
+ }
package/src/components/softwareIcon/vars.scss CHANGED
@@ -1,3 +1,20 @@
1
1
  @mixin vars {
2
2
  --components-softwareIcon-size: var(--pr-t-spacings-500);
3
+ --components-softwareIcon-illustration-bubble-stroke: transparent;
4
+ --components-softwareIcon-illustration-bubble-strokeWidth: 0px;
5
+ --components-softwareIcon-display: inline-block;
6
+ --components-softwareIcon-action-boxShadowSpread: 2px;
7
+ --components-softwareIcon-zIndex: auto;
8
+ --components-softwareIcon-transformScale: 1;
9
+ }
10
+
11
+ @mixin varsWrapper {
12
+ @include vars;
13
+
14
+ --components-softwareIconWrapper-list-item-marginInlineStart: calc(var(--pr-t-spacings-75) * -1);
15
+ --components-softwareIconWrapper-action-more-fontSize: var(--pr-t-font-fontSize-225);
16
+ }
17
+
18
+ @mixin varsPopover {
19
+ --components-softwareIcon-size: var(--pr-t-spacings-500);
3
20
  }
package/src/components/tag/mods.scss CHANGED
@@ -63,7 +63,7 @@
63
63
  --components-tag-boxShadow: none;
64
64
  --components-tag-position: relative;
65
65
 
66
- @include color.borderGradient(135deg, var(--palettes-brand-400), var(--palettes-AI-500), var(--pr-t-border-radius-small));
66
+ @include color.borderGradient($gradient: var(--pr-t-color-border-ai), $radius: var(--pr-t-border-radius-small));
67
67
 
68
68
  .lucca-icon {
69
69
  @include icons.AI;
package/src/components/textFlow/component.scss CHANGED
@@ -1,6 +1,8 @@
1
1
  @use '@lucca-front/scss/src/commons/utils/namespace';
2
2
 
3
3
  @mixin component($atRoot: namespace.$defaultAtRoot) {
4
+ overflow-wrap: anywhere;
5
+
4
6
  h1 {
5
7
  margin-block: var(--pr-t-spacings-300);
6
8
  }
package/src/components/timepicker/component.scss CHANGED
@@ -28,6 +28,25 @@
28
28
  &:focus-within {
29
29
  @include a11y.focusVisible($offset: 3px);
30
30
  }
31
+
32
+ .timePicker-fieldset {
33
+ box-shadow: initial;
34
+
35
+ &:focus-within {
36
+ outline: initial;
37
+ }
38
+ }
39
+ }
40
+
41
+ .timePicker-arrow {
42
+ align-self: stretch;
43
+ display: flex;
44
+ align-items: center;
45
+ color: var(--pr-t-color-text-subtle);
46
+ }
47
+
48
+ .timePicker-arrow-icon .lucca-icon {
49
+ @include icons.S;
31
50
  }
32
51
 
33
52
  .timePicker-fieldset-groupSeparator {
@@ -47,6 +66,9 @@
47
66
 
48
67
  ~ .timePicker-fieldset-group {
49
68
  margin-inline-start: calc(var(--pr-t-spacings-50) * -1);
69
+
70
+ --components-timepicker-input-padding-inline: var(--components-timepicker-end) var(--components-timepicker-start);
71
+ --components-timepicker-display-inset-inline: var(--components-timepicker-input-padding-inline);
50
72
  }
51
73
  }
52
74
 
@@ -83,7 +105,8 @@
83
105
 
84
106
  .timePicker-fieldset-group-textfield-display {
85
107
  position: absolute;
86
- inset: var(--components-timepicker-display-padding-inline) var(--components-timepicker-display-padding-block);
108
+ inset-block: var(--components-timepicker-display-inset-block);
109
+ inset-inline: var(--components-timepicker-display-inset-inline);
87
110
  border-radius: var(--pr-t-border-radius-50);
88
111
  pointer-events: none;
89
112
  display: grid;
@@ -134,8 +157,8 @@
134
157
 
135
158
  .timePicker-fieldset-meridiem {
136
159
  box-sizing: content-box;
137
- inline-size: calc(var(--components-timepicker-input-minInlineSize) + 2ch);
138
- padding-inline: var(--components-timepicker-display-padding-block);
160
+ inline-size: calc(var(--pr-t-spacings-100) + 2ch);
161
+ padding-inline: var(--pr-t-spacings-50);
139
162
  position: relative;
140
163
  align-self: stretch;
141
164
  margin-inline-start: calc(var(--pr-t-spacings-50) * -1);
@@ -143,7 +166,8 @@
143
166
  &::after {
144
167
  content: '';
145
168
  position: absolute;
146
- inset: var(--components-timepicker-display-padding-inline) var(--components-timepicker-display-padding-block);
169
+ inset-block: var(--components-timepicker-display-inset-block);
170
+ inset-inline: var(--pr-t-spacings-50);
147
171
  border-radius: var(--pr-t-border-radius-50);
148
172
  display: grid;
149
173
  place-items: center;
package/src/components/timepicker/mods.scss CHANGED
@@ -1,13 +1,34 @@
1
1
  @use '@lucca-front/scss/src/commons/utils/a11y';
2
+ @use '@lucca-front/icons/src/icon/exports' as icons;
2
3
 
3
4
  @mixin S {
4
5
  --components-timepicker-font: var(--pr-t-font-body-S);
5
- --components-timepicker-display-padding-inline: var(--pr-t-spacings-25);
6
- --components-timepicker-display-padding-block: var(--pr-t-spacings-75);
7
- --components-timepicker-input-padding-inline: var(--pr-t-spacings-75);
8
6
  --components-timepicker-input-padding-block: var(--pr-t-spacings-25);
9
7
  --components-timepicker-input-height: 1.75rem;
10
8
  --components-timepicker-separator-left: 1.875rem;
9
+ --components-timepicker-start: var(--pr-t-spacings-25);
10
+ --components-timepicker-end: var(--pr-t-spacings-75);
11
+
12
+ .timePicker-arrow-icon .lucca-icon {
13
+ @include icons.XS;
14
+ }
15
+
16
+ .timePicker-fieldset-group {
17
+ --components-timepicker-input-padding-inline: var(--components-timepicker-start) var(--components-timepicker-end);
18
+ --components-timepicker-display-inset-inline: var(--components-timepicker-input-padding-inline);
19
+
20
+ ~ .timePicker-fieldset-group {
21
+ --components-timepicker-input-padding-inline: var(--components-timepicker-end) var(--components-timepicker-start);
22
+ }
23
+ }
24
+
25
+ .timePicker-fieldset-meridiem {
26
+ inline-size: calc(var(--pr-t-spacings-50) + 2ch);
27
+
28
+ &::after {
29
+ inset-inline: var(--pr-t-spacings-25);
30
+ }
31
+ }
11
32
  }
12
33
 
13
34
  @mixin stepper {
package/src/components/timepicker/vars.scss CHANGED
@@ -5,10 +5,13 @@
5
5
  --components-timepicker-font: var(--pr-t-font-body-M);
6
6
  --components-timepicker-input-height: 2rem;
7
7
  --components-timepicker-input-minInlineSize: 0.5rem;
8
- --components-timepicker-input-padding-inline: var(--pr-t-spacings-100);
8
+ --components-timepicker-input-padding-inline: var(--components-timepicker-start) var(--components-timepicker-end);
9
9
  --components-timepicker-input-padding-block: var(--pr-t-spacings-50);
10
10
  --components-timepicker-padding: 0;
11
- --components-timepicker-display-padding-inline: var(--pr-t-spacings-50);
12
- --components-timepicker-display-padding-block: var(--pr-t-spacings-100);
11
+ --components-timepicker-display-inset-inline: var(--components-timepicker-input-padding-inline);
12
+ --components-timepicker-display-inset-block: var(--components-timepicker-input-padding-block);
13
13
  --components-timepicker-separator-left: 2.375rem;
14
+
15
+ --components-timepicker-start: var(--pr-t-spacings-50);
16
+ --components-timepicker-end: var(--pr-t-spacings-100);
14
17
  }
package/src/components/toast/component.scss CHANGED
@@ -70,6 +70,7 @@
70
70
 
71
71
  .toast-item-content-description {
72
72
  margin: 0;
73
+ overflow-wrap: anywhere;
73
74
  }
74
75
 
75
76
  .toasts-item-kill {