@lucca-front/scss 21.0.3 → 21.1.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 (47) hide show
  1. package/dist/lucca-front.min.css +1 -1
  2. package/package.json +2 -2
  3. package/src/commons/base.scss +1 -1
  4. package/src/commons/config.scss +7 -7
  5. package/src/commons/vars.scss +2 -1
  6. package/src/components/bubbleIcon/component.scss +54 -0
  7. package/src/components/bubbleIcon/exports.scss +4 -0
  8. package/src/components/bubbleIcon/index.scss +48 -0
  9. package/src/components/bubbleIcon/mods.scss +39 -0
  10. package/src/components/bubbleIcon/states.scss +13 -0
  11. package/src/components/bubbleIcon/vars.scss +13 -0
  12. package/src/components/bubbleIllustration/component.scss +20 -0
  13. package/src/components/bubbleIllustration/exports.scss +4 -0
  14. package/src/components/bubbleIllustration/index.scss +34 -0
  15. package/src/components/bubbleIllustration/mods.scss +11 -0
  16. package/src/components/bubbleIllustration/states.scss +14 -0
  17. package/src/components/bubbleIllustration/vars.scss +4 -0
  18. package/src/components/color/component.scss +82 -0
  19. package/src/components/color/exports.scss +4 -0
  20. package/src/components/color/index.scss +74 -0
  21. package/src/components/color/mods.scss +48 -0
  22. package/src/components/color/states.scss +15 -0
  23. package/src/components/color/vars.scss +13 -0
  24. package/src/components/container/index.scss +1 -0
  25. package/src/components/container/mods.scss +2 -1
  26. package/src/components/emptyState/component.scss +1 -6
  27. package/src/components/emptyState/index.scss +10 -0
  28. package/src/components/emptyState/mods.scss +9 -0
  29. package/src/components/emptyState/vars.scss +2 -1
  30. package/src/components/form/index.scss +6 -0
  31. package/src/components/form/mods.scss +9 -0
  32. package/src/components/horizontalNavigation/component.scss +1 -1
  33. package/src/components/index.scss +4 -0
  34. package/src/components/mainLayout/component.scss +2 -0
  35. package/src/components/mainLayout/mods.scss +2 -0
  36. package/src/components/mainLayout/vars.scss +2 -0
  37. package/src/components/presentation/component.scss +20 -0
  38. package/src/components/presentation/exports.scss +4 -0
  39. package/src/components/presentation/index.scss +14 -0
  40. package/src/components/presentation/mods.scss +3 -0
  41. package/src/components/presentation/states.scss +0 -0
  42. package/src/components/presentation/vars.scss +5 -0
  43. package/src/components/resourceCard/mods.scss +10 -0
  44. package/src/components/resourceCard/states.scss +10 -0
  45. package/src/components/timepicker/component.scss +8 -6
  46. package/src/components/timepicker/mods.scss +4 -3
  47. package/src/components/timepicker/vars.scss +5 -3
package/src/components/form/mods.scss CHANGED
@@ -12,6 +12,7 @@
12
12
  @use '@lucca-front/scss/src/components/multiSelect/exports' as multiSelect;
13
13
  @use '@lucca-front/scss/src/components/timepicker/exports' as timepicker;
14
14
  @use '@lucca-front/scss/src/components/box/exports' as box;
15
+ @use '@lucca-front/scss/src/components/color/exports' as color;
15
16
 
16
17
  @mixin maxWidth {
17
18
  max-inline-size: var(--components-form-maxWidth);
@@ -115,6 +116,10 @@
115
116
  .timePicker {
116
117
  @include timepicker.S;
117
118
  }
119
+
120
+ .color {
121
+ @include color.M;
122
+ }
118
123
  }
119
124
 
120
125
  @mixin XS {
@@ -369,3 +374,7 @@
369
374
  content: '*' / '';
370
375
  }
371
376
  }
377
+
378
+ @mixin hiddenLabel {
379
+ gap: 0;
380
+ }
package/src/components/horizontalNavigation/component.scss CHANGED
@@ -32,7 +32,7 @@
32
32
  .horizontalNavigation-containerOptional,
33
33
  .menu-containerOptional {
34
34
  max-inline-size: var(--commons-container-maxWidth);
35
- padding-inline: var(--commons-container-padding);
35
+ padding: var(--commons-container-padding);
36
36
  }
37
37
 
38
38
  // .menu-list is deprecated
package/src/components/index.scss CHANGED
@@ -110,6 +110,10 @@
110
110
  @forward 'listboxOption';
111
111
  @forward 'suggestion';
112
112
  @forward 'resourceCard';
113
+ @forward 'presentation';
114
+ @forward 'color';
115
+ @forward 'bubbleIllustration';
116
+ @forward 'bubbleIcon';
113
117
 
114
118
  @forward 'filterBarDeprecated';
115
119
  @forward 'tableFixedDeprecated';
package/src/components/mainLayout/component.scss CHANGED
@@ -95,6 +95,7 @@
95
95
  z-index: 1;
96
96
  inset-block-start: var(--components-mainLayout-content-inside-header-insetBlockStart);
97
97
  inset-inline-start: 0;
98
+ background-color: var(--components-mainLayout-content-inside-header-backgroundColor);
98
99
 
99
100
  &:empty {
100
101
  display: none;
@@ -106,6 +107,7 @@
106
107
  inset-block-end: var(--components-mainLayout-content-inside-footer-insetBlockEnd);
107
108
  inset-inline-start: 0;
108
109
  margin-block-start: auto;
110
+ background-color: var(--components-mainLayout-content-inside-footer-backgroundColor);
109
111
 
110
112
  &:empty {
111
113
  display: none;
package/src/components/mainLayout/mods.scss CHANGED
@@ -4,10 +4,12 @@
4
4
 
5
5
  @mixin stickyHeader {
6
6
  --components-mainLayout-content-inside-header-position: sticky;
7
+ --components-mainLayout-content-inside-header-backgroundColor: var(--commons-background-base);
7
8
  }
8
9
 
9
10
  @mixin stickyFooter {
10
11
  --components-mainLayout-content-inside-footer-position: sticky;
12
+ --components-mainLayout-content-inside-footer-backgroundColor: var(--commons-background-base);
11
13
  }
12
14
 
13
15
  @mixin stickyBlock {
package/src/components/mainLayout/vars.scss CHANGED
@@ -7,4 +7,6 @@
7
7
  --components-mainLayout-content-inside-header-insetBlockStart: auto;
8
8
  --components-mainLayout-content-inside-footer-insetBlockEnd: auto;
9
9
  --components-mainLayout-content-inside-block-firstLastOfType-marginBlock: var(--pr-t-spacings-200);
10
+ --components-mainLayout-content-inside-header-backgroundColor: transparent;
11
+ --components-mainLayout-content-inside-footer-backgroundColor: transparent;
10
12
  }
package/src/components/presentation/component.scss ADDED
@@ -0,0 +1,20 @@
1
+ @use '@lucca-front/scss/src/commons/utils/namespace';
2
+
3
+ @mixin component($atRoot: namespace.$defaultAtRoot) {
4
+ @at-root ($atRoot) {
5
+ .presentation-description {
6
+ margin: 0;
7
+ }
8
+
9
+ .presentation-description-term {
10
+ font: var(--pr-t-font-body-S);
11
+ color: var(--pr-t-color-text-subtle);
12
+ display: var(--components-presentation-description-term-display);
13
+ }
14
+
15
+ .presentation-description-definition {
16
+ display: var(--components-presentation-description-definition-display);
17
+ margin: 0;
18
+ }
19
+ }
20
+ }
package/src/components/presentation/exports.scss ADDED
@@ -0,0 +1,4 @@
1
+ @forward 'vars';
2
+ @forward 'mods';
3
+ @forward 'states';
4
+ @forward 'component';
package/src/components/presentation/index.scss ADDED
@@ -0,0 +1,14 @@
1
+ @use 'exports' as *;
2
+
3
+ .presentation {
4
+ @layer components {
5
+ @include vars;
6
+ @include component;
7
+ }
8
+
9
+ @layer mods {
10
+ &.mod-checkable{
11
+ @include checkable;
12
+ }
13
+ }
14
+ }
package/src/components/presentation/mods.scss ADDED
@@ -0,0 +1,3 @@
1
+ @mixin checkable {
2
+ --components-presentation-description-child-display: inline-block
3
+ }
package/src/components/presentation/states.scss ADDED
File without changes
package/src/components/presentation/vars.scss ADDED
@@ -0,0 +1,5 @@
1
+ @mixin vars {
2
+ --components-presentation-description-child-display: block;
3
+ --components-presentation-description-term-display: var(--components-presentation-description-child-display);
4
+ --components-presentation-description-definition-display: var(--components-presentation-description-child-display);
5
+ }
package/src/components/resourceCard/mods.scss CHANGED
@@ -1,6 +1,8 @@
1
1
  @use '@lucca-front/scss/src/commons/utils/color';
2
2
  @use '@lucca-front/scss/src/components/button/exports' as button;
3
3
  @use '@lucca-front/scss/src/components/numericBadge/exports' as numericBadge;
4
+ @use '@lucca-front/scss/src/components/bubbleIllustration/exports' as bubbleIllustration;
5
+ @use '@lucca-front/scss/src/components/bubbleIcon/exports' as bubbleIcon;
4
6
 
5
7
  @mixin gridWrapper {
6
8
  --components-resourceCardWrapper-display: grid;
@@ -23,6 +25,14 @@
23
25
  --components-resourceCard-layout-content-font: var(--pr-t-font-body-S);
24
26
  --components-resourceCard-layout-header-title-font: var(--pr-t-font-heading-4);
25
27
  --components-resourceCard-layout-before-illustration-minSize: calc(var(--pr-t-spacings-400) + var(--pr-t-spacings-50));
28
+
29
+ .bubbleIllustration {
30
+ @include bubbleIllustration.S;
31
+ }
32
+
33
+ .bubbleIcon {
34
+ @include bubbleIcon.S;
35
+ }
26
36
  }
27
37
 
28
38
  @mixin hasIllustrationGridS {
package/src/components/resourceCard/states.scss CHANGED
@@ -20,6 +20,16 @@
20
20
  --components-resourceCard-color: var(--palettes-neutral-500);
21
21
  --components-resourceCard-layout-header-title-action-color: var(--palettes-neutral-500);
22
22
  --components-resourceCard-before-boxShadow: 0 0 0 1px var(--palettes-neutral-50);
23
+
24
+
25
+ .bubbleIllustration {
26
+ --palettes-brand-600: var(--pr-t-color-input-icon-disabled);
27
+ }
28
+
29
+ .bubbleIcon {
30
+ --components-bubbleIcon-color: var(--pr-t-color-input-icon-disabled);
31
+ --components-bubbleIcon-bubble-path-fill: var(--pr-t-color-input-background-disabled);
32
+ }
23
33
  }
24
34
 
25
35
  @mixin active {
package/src/components/timepicker/component.scss CHANGED
@@ -60,13 +60,13 @@
60
60
  justify-content: center;
61
61
  border: 0;
62
62
  block-size: var(--components-timepicker-input-height);
63
- inline-size: var(--components-timepicker-input-width);
63
+ inline-size: calc(var(--components-timepicker-input-minInlineSize) + var(--components-timepicker-input-digits, 2) * 1ch);
64
64
  outline: none;
65
65
  color: inherit;
66
66
  background-color: transparent;
67
67
  text-align: center;
68
- padding-block: var(--components-timepicker-paddingInput-inline);
69
- padding-inline: var(--components-timepicker-paddingInput-block);
68
+ padding-block: var(--components-timepicker-input-padding-block);
69
+ padding-inline: var(--components-timepicker-input-padding-inline);
70
70
  box-sizing: content-box;
71
71
  opacity: 0.0001;
72
72
 
@@ -83,7 +83,7 @@
83
83
 
84
84
  .timePicker-fieldset-group-textfield-display {
85
85
  position: absolute;
86
- inset: var(--components-timepicker-paddingInput-inline) var(--components-timepicker-paddingInput-block);
86
+ inset: var(--components-timepicker-display-padding-inline) var(--components-timepicker-display-padding-block);
87
87
  border-radius: var(--pr-t-border-radius-50);
88
88
  pointer-events: none;
89
89
  display: grid;
@@ -133,7 +133,9 @@
133
133
  }
134
134
 
135
135
  .timePicker-fieldset-meridiem {
136
- inline-size: calc(var(--components-timepicker-input-width) + var(--components-timepicker-paddingInput-block) * 2);
136
+ box-sizing: content-box;
137
+ inline-size: calc(var(--components-timepicker-input-minInlineSize) + 2ch);
138
+ padding-inline: var(--components-timepicker-display-padding-block);
137
139
  position: relative;
138
140
  align-self: stretch;
139
141
  margin-inline-start: calc(var(--pr-t-spacings-50) * -1);
@@ -141,7 +143,7 @@
141
143
  &::after {
142
144
  content: '';
143
145
  position: absolute;
144
- inset: var(--components-timepicker-paddingInput-inline) var(--components-timepicker-paddingInput-block);
146
+ inset: var(--components-timepicker-display-padding-inline) var(--components-timepicker-display-padding-block);
145
147
  border-radius:var(--pr-t-border-radius-50);
146
148
  display: grid;
147
149
  place-items: center;
package/src/components/timepicker/mods.scss CHANGED
@@ -2,10 +2,11 @@
2
2
 
3
3
  @mixin S {
4
4
  --components-timepicker-font: var(--pr-t-font-body-S);
5
- --components-timepicker-paddingInput-inline: var(--pr-t-spacings-25);
6
- --components-timepicker-paddingInput-block: var(--pr-t-spacings-75);
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
+ --components-timepicker-input-padding-block: var(--pr-t-spacings-25);
7
9
  --components-timepicker-input-height: 1.75rem;
8
- --components-timepicker-input-width: 1.25rem;
9
10
  --components-timepicker-separator-left: 1.875rem;
10
11
  }
11
12
 
package/src/components/timepicker/vars.scss CHANGED
@@ -4,9 +4,11 @@
4
4
  --components-timepicker-color: var(--pr-t-color-input-text);
5
5
  --components-timepicker-font: var(--pr-t-font-body-M);
6
6
  --components-timepicker-input-height: 2rem;
7
- --components-timepicker-input-width: 1.5rem;
7
+ --components-timepicker-input-minInlineSize: 0.5rem;
8
+ --components-timepicker-input-padding-inline: var(--pr-t-spacings-100);
9
+ --components-timepicker-input-padding-block: var(--pr-t-spacings-50);
8
10
  --components-timepicker-padding: 0;
9
- --components-timepicker-paddingInput-inline: var(--pr-t-spacings-50);
10
- --components-timepicker-paddingInput-block: var(--pr-t-spacings-100);
11
+ --components-timepicker-display-padding-inline: var(--pr-t-spacings-50);
12
+ --components-timepicker-display-padding-block: var(--pr-t-spacings-100);
11
13
  --components-timepicker-separator-left: 2.375rem;
12
14
  }