@lucca-front/scss 22.0.0-rc.1 → 22.0.0-rc.2

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 (42) hide show
  1. package/dist/lucca-front.min.css +1 -1
  2. package/package.json +5 -4
  3. package/src/commons/config.scss +18 -4
  4. package/src/commons/utils/color.scss +1 -0
  5. package/src/commons/utils/index.scss +102 -3
  6. package/src/commons/vars.scss +3 -3
  7. package/src/components/appLayout/mods.scss +2 -2
  8. package/src/components/avatar/component.scss +0 -2
  9. package/src/components/dialog/component.scss +15 -1
  10. package/src/components/dialog/mods.scss +5 -3
  11. package/src/components/dialog/vars.scss +3 -1
  12. package/src/components/fieldset/component.scss +7 -5
  13. package/src/components/fileEntry/component.scss +13 -5
  14. package/src/components/fileEntry/index.scss +18 -10
  15. package/src/components/fileEntry/mods.scss +21 -16
  16. package/src/components/fileEntry/states.scss +9 -4
  17. package/src/components/fileEntry/vars.scss +10 -13
  18. package/src/components/fileToolbar/component.scss +0 -2
  19. package/src/components/fileToolbar/index.scss +2 -2
  20. package/src/components/fileToolbar/mods.scss +13 -8
  21. package/src/components/fileUpload/component.scss +2 -1
  22. package/src/components/fileUpload/index.scss +2 -10
  23. package/src/components/fileUpload/mods.scss +25 -20
  24. package/src/components/fileUpload/states.scss +0 -9
  25. package/src/components/fileUpload/vars.scss +20 -17
  26. package/src/components/inputFramed/states.scss +8 -1
  27. package/src/components/listboxOption/mods.scss +3 -3
  28. package/src/components/loading/mods.scss +4 -0
  29. package/src/components/presentation/component.scss +2 -1
  30. package/src/components/presentation/index.scss +3 -0
  31. package/src/components/presentation/mods.scss +4 -0
  32. package/src/components/presentation/vars.scss +2 -0
  33. package/src/components/resourceCard/mods.scss +4 -4
  34. package/src/components/resourceCard/vars.scss +1 -1
  35. package/src/components/richText/component.scss +1 -0
  36. package/src/components/segmentedControl/component.scss +2 -2
  37. package/src/components/segmentedControl/states.scss +4 -6
  38. package/src/components/softwareIcon/component.scss +67 -5
  39. package/src/components/softwareIcon/index.scss +58 -0
  40. package/src/components/softwareIcon/mods.scss +32 -0
  41. package/src/components/softwareIcon/states.scss +5 -0
  42. package/src/components/softwareIcon/vars.scss +17 -0
package/src/components/fileUpload/index.scss CHANGED
@@ -15,22 +15,14 @@
15
15
  @include structure;
16
16
  }
17
17
 
18
- &.mod-S {
19
- @include S;
20
-
21
- &.is-loading {
22
- @include loadingS;
23
- }
18
+ &.mod-L {
19
+ @include L;
24
20
  }
25
21
 
26
22
  &:hover {
27
23
  @include hover;
28
24
  }
29
25
 
30
- &.is-loading {
31
- @include loading;
32
- }
33
-
34
26
  &.is-hidden {
35
27
  @include hidden;
36
28
  }
package/src/components/fileUpload/mods.scss CHANGED
@@ -1,26 +1,31 @@
1
- @mixin S {
2
- --components-fileUpload-button-display: none;
3
- --components-fileUpload-padding: var(--pr-t-spacings-150) var(--pr-t-spacings-200);
4
- --components-fileUpload-textAlign: left;
5
- --components-fileUpload-flexDirection: row;
6
- --components-fileUpload-instruction-alignItems: stretch;
7
- --components-fileUpload-instruction-display: block;
8
- --components-fileUpload-instruction-maxWidth: none;
9
- --components-fileUpload-instruction-action-fontWeight: 600;
10
- --fileUpload-instruction-action-marginBottom: 0;
11
- --components-fileUpload-instruction-action-color: var(--palettes-product-700);
12
- --components-fileUpload-alignItems: flex-start;
13
- --components-fileUpload-minHeight: none;
14
- --components-fileUpload-instruction-filename-position: static;
15
- --components-fileUpload-instruction-filename-marginTop: 0;
16
- --components-fileUpload-justifyContent: flex-start;
17
- --components-fileUpload-status-img-inset: 0;
18
- --components-fileUpload-status-img-size: var(--pr-t-spacings-600);
1
+ @mixin L {
2
+ --components-fileUpload-button-display: block;
3
+ --components-fileUpload-padding: var(--pr-t-spacings-300);
4
+ --components-fileUpload-textAlign: center;
5
+ --components-fileUpload-flexDirection: column;
6
+ --components-fileUpload-instruction-alignItems: center;
7
+ --components-fileUpload-instruction-display: flex;
8
+ --components-fileUpload-instruction-maxWidth: 30rem;
9
+ --components-fileUpload-instruction-action-fontWeight: 400;
10
+ --fileUpload-instruction-action-marginBottom: var(--pr-t-spacings-50);
11
+ --components-fileUpload-instruction-action-color: inherit;
12
+ --components-fileUpload-alignItems: center;
13
+ --components-fileUpload-minHeight: 21.5rem;
14
+ --components-fileUpload-instruction-filename-position: relative;
15
+ --components-fileUpload-instruction-filename-marginTop: calc(var(--pr-t-spacings-300) * -1);
16
+ --components-fileUpload-justifyContent: center;
17
+ --components-fileUpload-status-img-inset: var(--pr-t-spacings-75);
18
+ --components-fileUpload-status-img-size: calc(100% - var(--pr-t-spacings-75) * 2);
19
19
  }
20
20
 
21
21
  @mixin dropzone {
22
- position: fixed;
23
- inset: var(--pr-t-spacings-200);
22
+ --components-fileUpload-position: fixed;
23
+ --components-fileUpload-flexDirection: column;
24
+ --components-fileUpload-alignItems: center;
25
+ --components-fileUpload-justifyContent: center;
26
+ --components-fileUpload-instruction-display: flex;
27
+ --components-fileUpload-instruction-alignItems: center;
28
+ --components-fileUpload-inset: var(--pr-t-spacings-200);
24
29
  }
25
30
 
26
31
  @mixin structure {
package/src/components/fileUpload/states.scss CHANGED
@@ -23,15 +23,6 @@
23
23
  --components-fileUpload-borderColor: var(--palettes-critical-600);
24
24
  }
25
25
 
26
- @mixin loading {
27
- --components-fileUpload-instruction-display: none;
28
- --components-fileUpload-button-display: none;
29
- }
30
-
31
- @mixin loadingS {
32
- --components-fileUpload-instruction-display: block;
33
- }
34
-
35
26
  @mixin hidden {
36
27
  --components-fileUpload-display: none;
37
28
  }
package/src/components/fileUpload/vars.scss CHANGED
@@ -1,27 +1,30 @@
1
1
  @mixin vars {
2
- --components-fileUpload-button-display: block;
2
+ --components-fileUpload-inset: auto;
3
+ --components-fileUpload-position: relative;
3
4
  --components-fileUpload-button-visibility: visible;
4
- --components-fileUpload-padding: var(--pr-t-spacings-300);
5
- --components-fileUpload-textAlign: center;
6
- --components-fileUpload-flexDirection: column;
7
5
  --components-fileUpload-borderRadius: var(--pr-t-border-radius-input);
8
- --components-fileUpload-instruction-display: flex;
9
- --components-fileUpload-instruction-alignItems: center;
10
- --fileUpload-instruction-action-marginBottom: var(--pr-t-spacings-50);
11
6
  --components-fileUpload-width: auto;
12
7
  --components-fileUpload-display: flex;
13
- --components-fileUpload-instruction-maxWidth: 30rem;
14
- --components-fileUpload-instruction-action-fontWeight: 400;
15
- --components-fileUpload-instruction-action-color: inherit;
16
8
  --components-fileUpload-borderColor: var(--palettes-neutral-300);
17
9
  --components-fileUpload-borderStyle: dashed;
18
10
  --components-fileUpload-backgroundColor: var(--pr-t-elevation-surface-raised);
19
- --components-fileUpload-alignItems: center;
20
11
  --components-fileUpload-instruction-filename-color: inherit;
21
- --components-fileUpload-instruction-filename-marginTop: calc(var(--pr-t-spacings-300) * -1);
22
- --components-fileUpload-minHeight: 21.5rem;
23
- --components-fileUpload-instruction-filename-position: relative;
24
- --components-fileUpload-justifyContent: center;
25
- --components-fileUpload-status-img-inset: var(--pr-t-spacings-75);
26
- --components-fileUpload-status-img-size: calc(100% - var(--pr-t-spacings-75) * 2);
12
+
13
+ --components-fileUpload-button-display: none;
14
+ --components-fileUpload-padding: var(--pr-t-spacings-150) var(--pr-t-spacings-200);
15
+ --components-fileUpload-textAlign: left;
16
+ --components-fileUpload-flexDirection: row;
17
+ --components-fileUpload-instruction-alignItems: stretch;
18
+ --components-fileUpload-instruction-display: block;
19
+ --components-fileUpload-instruction-maxWidth: none;
20
+ --components-fileUpload-instruction-action-fontWeight: 600;
21
+ --fileUpload-instruction-action-marginBottom: 0;
22
+ --components-fileUpload-instruction-action-color: var(--palettes-product-700);
23
+ --components-fileUpload-alignItems: flex-start;
24
+ --components-fileUpload-minHeight: none;
25
+ --components-fileUpload-instruction-filename-position: static;
26
+ --components-fileUpload-instruction-filename-marginTop: 0;
27
+ --components-fileUpload-justifyContent: flex-start;
28
+ --components-fileUpload-status-img-inset: 0;
29
+ --components-fileUpload-status-img-size: var(--pr-t-spacings-600);
27
30
  }
package/src/components/inputFramed/states.scss CHANGED
@@ -3,10 +3,17 @@
3
3
  }
4
4
 
5
5
  @mixin disabled {
6
-
7
6
  --components-inputFramed-header-borderColor: var(--palettes-neutral-50);
8
7
  --components-inputFramed-borderColor: var(--palettes-neutral-300);
9
8
  --components-inputFramed-header-info-color: var(--pr-t-color-input-text-disabled);
9
+
10
+ .inputFramed-header-label {
11
+ --components-formLabel-color: var(--pr-t-color-text-disabled);
12
+ }
13
+
14
+ .inlineMessage {
15
+ --components-inlineMessage-color: var(--pr-t-color-text-disabled);
16
+ }
10
17
  }
11
18
 
12
19
  @mixin checked {
package/src/components/listboxOption/mods.scss CHANGED
@@ -28,9 +28,9 @@
28
28
  --components-listboxOption-content-insetBlockStart: var(--pr-t-spacings-50);
29
29
  --components-listboxOption-content-boxShadow:
30
30
  calc(var(--pr-t-spacings-100) * -1) 0 0 0 var(--pr-t-elevation-surface-raised),
31
- calc(var(--pr-t-spacings-100) * 1) 0 0 0 var(--pr-t-elevation-surface-raised),
31
+ calc(var(--pr-t-spacings-100) * 1) 0 0 0 var(--pr-t-elevation-surface-raised),
32
32
  calc(var(--pr-t-spacings-100) * -1) calc(var(--pr-t-spacings-100) * -1) 0 0 var(--pr-t-elevation-surface-raised),
33
- calc(var(--pr-t-spacings-100) * 1) calc(var(--pr-t-spacings-100) * -1) 0 0 var(--pr-t-elevation-surface-raised);
33
+ calc(var(--pr-t-spacings-100) * 1) calc(var(--pr-t-spacings-100) * -1) 0 0 var(--pr-t-elevation-surface-raised);
34
34
  }
35
35
 
36
36
  .listboxOptionWrapper {
@@ -48,7 +48,7 @@
48
48
  --components-listboxOption-content-fontWeight: var(--pr-t-font-fontWeight-semibold);
49
49
  --components-listboxOption-content-marginBlockStart: var(--pr-t-spacings-100);
50
50
  --components-listboxOption-content-boxShadow:
51
- calc(var(--pr-t-spacings-50) * 1) 0 0 var(--pr-t-spacings-50) var(--pr-t-elevation-surface-raised),
51
+ calc(var(--pr-t-spacings-50) * 1) 0 0 var(--pr-t-spacings-50) var(--pr-t-elevation-surface-raised),
52
52
  calc(var(--pr-t-spacings-50) * -1) 0 0 var(--pr-t-spacings-50) var(--pr-t-elevation-surface-raised);
53
53
  }
54
54
  }
package/src/components/loading/mods.scss CHANGED
@@ -13,6 +13,10 @@
13
13
  --components-loading-size: var(--pr-t-spacings-250);
14
14
  }
15
15
 
16
+ @mixin M {
17
+ --components-loading-size: var(--pr-t-spacings-300);
18
+ }
19
+
16
20
  @mixin L {
17
21
  @include block;
18
22
 
package/src/components/presentation/component.scss CHANGED
@@ -3,10 +3,11 @@
3
3
 
4
4
  @mixin component($atRoot: namespace.$defaultAtRoot) {
5
5
  margin: 0;
6
+ font: var(--components-presentation-font);
6
7
 
7
8
  @at-root ($atRoot) {
8
9
  .presentation-term {
9
- font: var(--pr-t-font-body-S);
10
+ font: var(--components-presentation-term-font);
10
11
  color: var(--pr-t-color-text-subtle);
11
12
  display: flex;
12
13
  align-items: center;
package/src/components/presentation/index.scss CHANGED
@@ -7,5 +7,8 @@
7
7
  }
8
8
 
9
9
  @layer mods {
10
+ &.mod-S {
11
+ @include S;
12
+ }
10
13
  }
11
14
  }
package/src/components/presentation/mods.scss CHANGED
@@ -0,0 +1,4 @@
1
+ @mixin S {
2
+ --components-presentation-font: var(--pr-t-font-body-S);
3
+ --components-presentation-term-font: var(--pr-t-font-body-XS);
4
+ }
package/src/components/presentation/vars.scss CHANGED
@@ -1,2 +1,4 @@
1
1
  @mixin vars {
2
+ --components-presentation-font: var(--pr-t-font-body-M);
3
+ --components-presentation-term-font: var(--pr-t-font-body-S);
2
4
  }
package/src/components/resourceCard/mods.scss CHANGED
@@ -13,9 +13,9 @@
13
13
  --components-resourceCard-layout-header-alignItems: start;
14
14
  --components-resourceCard-layout-header-flexDirection: column;
15
15
  --components-resourceCard-layout-gridTemplate:
16
- 'before header after' auto
16
+ 'before header after' auto
17
17
  'content content content' auto
18
- /auto 1fr auto;
18
+ /auto 1fr auto;
19
19
  }
20
20
 
21
21
  @mixin wrapped {
@@ -44,8 +44,8 @@
44
44
  @mixin hasNoContentHasIllustrationNoGrid {
45
45
  --components-resourceCard-layout-alignItems: center;
46
46
  --components-resourceCard-layout-gridTemplate:
47
- 'before header after' 1fr
48
- /auto 1fr auto;
47
+ 'before header after' 1fr
48
+ /auto 1fr auto;
49
49
  }
50
50
 
51
51
  @mixin hasContentNoGridHasIllustration {
package/src/components/resourceCard/vars.scss CHANGED
@@ -25,7 +25,7 @@
25
25
  --components-resourceCard-layout-gridTemplate:
26
26
  'before header after' auto
27
27
  'before content after' 1fr
28
- / auto 1fr auto;
28
+ / auto 1fr auto;
29
29
  }
30
30
 
31
31
  @mixin varsWrapper {
package/src/components/richText/component.scss CHANGED
@@ -12,6 +12,7 @@
12
12
  border-style: solid;
13
13
  border-width: 1px;
14
14
  border-radius: var(--pr-t-border-radius-input);
15
+ overflow: auto;
15
16
 
16
17
  &:has(.richTextField-toolbar-formatting):has(.richTextField-toolbar-chips) {
17
18
  min-block-size: calc(var(--components-richTextField-minHeight) + var(--pr-t-spacings-800) + var(--pr-t-spacings-25) + var(--pr-t-spacings-600));
package/src/components/segmentedControl/component.scss CHANGED
@@ -85,7 +85,7 @@
85
85
 
86
86
  &:hover {
87
87
  --components-segmentedControl-shadow:
88
- 0 0 0 var(--commons-divider-width) var(--palettes-product-400),
88
+ 0 0 0 var(--commons-divider-width) var(--palettes-400, var(--palettes-product-400)),
89
89
  var(--pr-t-elevation-shadow-raised);
90
90
  --components-segmentedControl-zIndex: 1;
91
91
  }
@@ -93,7 +93,7 @@
93
93
  &:active {
94
94
  --components-segmentedControl-background: var(--palettes-neutral-0);
95
95
  --components-segmentedControl-shadow:
96
- 0 0 0 var(--commons-divider-width) var(--palettes-product-500),
96
+ 0 0 0 var(--commons-divider-width) var(--palettes-500, var(--palettes-product-500)),
97
97
  var(--pr-t-elevation-shadow-raised);
98
98
  }
99
99
  }
package/src/components/segmentedControl/states.scss CHANGED
@@ -1,9 +1,9 @@
1
1
  @use '@lucca-front/scss/src/components/numericBadge/exports' as numericBadge;
2
2
 
3
3
  @mixin selected {
4
- --components-segmentedControl-background: var(--palettes-product-50);
5
- --components-segmentedControl-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-product-500);
6
- --components-segmentedControl-color: var(--palettes-product-800);
4
+ --components-segmentedControl-background: var(--palettes-50, var(--palettes-product-50));
5
+ --components-segmentedControl-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-500, var(--palettes-product-500));
6
+ --components-segmentedControl-color: var(--palettes-800, var(--palettes-product-800));
7
7
  --components-segmentedControl-cursor: default;
8
8
  --components-segmentedControl-backgroundContent: none;
9
9
  --components-segmentedControl-zIndex: 1;
@@ -12,8 +12,7 @@
12
12
  @include numericBadge.inherit;
13
13
 
14
14
  &.is-loading {
15
- // Might be deletable after layers implementation
16
- --components-numericBadge-loadingColor: var(--palettes-product-500);
15
+ --components-numericBadge-loadingColor: var(--palettes-500, var(--palettes-product-500));
17
16
  --components-numericBadge-color: transparent;
18
17
  }
19
18
  }
@@ -29,7 +28,6 @@
29
28
  @include numericBadge.disabled;
30
29
 
31
30
  &.is-loading {
32
- // Might be deletable after layers implementation
33
31
  --components-numericBadge-color: transparent;
34
32
  }
35
33
  }
package/src/components/softwareIcon/component.scss CHANGED
@@ -1,17 +1,79 @@
1
1
  @use '@lucca-front/scss/src/commons/utils/namespace';
2
+ @use '@lucca-front/scss/src/commons/utils/reset';
3
+ @use '@lucca-front/scss/src/commons/utils/a11y';
2
4
 
3
5
  @mixin component($atRoot: namespace.$defaultAtRoot) {
4
- display: inline-block;
6
+ display: var(--components-softwareIcon-display);
5
7
  inline-size: var(--components-softwareIcon-size);
6
8
  block-size: var(--components-softwareIcon-size);
9
+ z-index: var(--components-softwareIcon-zIndex);
10
+ position: relative;
11
+ transform: scale(var(--components-softwareIcon-transformScale));
12
+ transition-property: transform;
13
+ transition-duration: var(--commons-animations-durations-fast);
7
14
 
8
- svg {
9
- display: block;
10
- inline-size: 100%;
11
- block-size: 100%;
15
+ &:focus-visible {
16
+ outline: none;
12
17
  }
13
18
 
14
19
  @at-root ($atRoot) {
20
+ .softwareIcon-illustration {
21
+ overflow: visible;
22
+ }
15
23
 
24
+ .softwareIcon-illustration-bubble {
25
+ stroke: var(--components-softwareIcon-illustration-bubble-stroke);
26
+ stroke-width: var(--components-softwareIcon-illustration-bubble-strokeWidth);
27
+ }
28
+
29
+ .softwareIconWrapper {
30
+ display: flex;
31
+ flex-wrap: wrap;
32
+ align-items: center;
33
+ gap: var(--pr-t-spacings-25) 0;
34
+ padding-inline-start: calc(var(--components-softwareIconWrapper-list-item-marginInlineStart) * -1);
35
+ }
36
+
37
+ .softwareIconWrapper-list {
38
+ @include reset.list;
39
+
40
+ display: contents;
41
+ }
42
+
43
+ .softwareIconWrapper-list-item {
44
+ margin-inline-start: var(--components-softwareIconWrapper-list-item-marginInlineStart);
45
+ }
46
+
47
+ .softwareIconWrapper-action {
48
+ @include reset.button;
49
+
50
+ border-radius: 68% 35% 45% 55% / 40% 40% 64% 60%;
51
+ background-color: var(--palettes-neutral-200);
52
+ inline-size: var(--components-softwareIcon-size);
53
+ block-size: var(--components-softwareIcon-size);
54
+ transform: scale(var(--components-softwareIcon-transformScale));
55
+ transition-property: transform;
56
+ transition-duration: var(--commons-animations-durations-fast);
57
+ box-shadow: 0 0 0 var(--components-softwareIcon-action-boxShadowSpread) var(--palettes-neutral-0);
58
+ margin-inline-start: var(--components-softwareIconWrapper-list-item-marginInlineStart);
59
+ }
60
+
61
+ .softwareIconWrapper-action-more {
62
+ display: grid;
63
+ place-items: center;
64
+ font-family: var(--pr-t-font-family-brand);
65
+ font-size: var(--components-softwareIconWrapper-action-more-fontSize);
66
+ font-weight: var(--pr-t-font-fontWeight-semibold);
67
+ }
68
+
69
+ .softwareIconWrapper_popover {
70
+ @include reset.list;
71
+
72
+ display: grid;
73
+ max-inline-size: calc((var(--components-softwareIcon-size) * 8) + (var(--pr-t-spacings-50) * 7));
74
+ box-sizing: content-box;
75
+ gap: var(--pr-t-spacings-50);
76
+ grid-template-columns: repeat(auto-fit, minmax(var(--components-softwareIcon-size), 1fr));
77
+ }
16
78
  }
17
79
  }
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
  }