@patternfly/patternfly 6.0.0-alpha.129 → 6.0.0-alpha.130

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 (19) hide show
  1. package/components/TextInputGroup/text-input-group.css +1 -1
  2. package/components/TextInputGroup/text-input-group.scss +1 -1
  3. package/components/Toolbar/toolbar.css +26 -26
  4. package/components/Toolbar/toolbar.scss +7 -7
  5. package/components/_index.css +27 -212
  6. package/components/_index.scss +0 -2
  7. package/docs/components/Toolbar/examples/Toolbar.md +5 -5
  8. package/docs/demos/Toolbar/examples/Toolbar.md +3 -3
  9. package/package.json +1 -1
  10. package/patternfly-no-globals.css +27 -212
  11. package/patternfly.css +27 -212
  12. package/patternfly.min.css +1 -1
  13. package/patternfly.min.css.map +1 -1
  14. package/sass-utilities/namespaces-components.scss +0 -6
  15. package/components/Chip/chip-group.css +0 -80
  16. package/components/Chip/chip-group.scss +0 -96
  17. package/components/Chip/chip.css +0 -103
  18. package/components/Chip/chip.scss +0 -131
  19. package/docs/components/Chip/examples/Chip.md +0 -846
package/sass-utilities/namespaces-components.scss CHANGED
@@ -54,12 +54,6 @@ $card: #{$pf-prefix} + 'c-card';
54
54
  // Check
55
55
  $check: #{$pf-prefix} + 'c-check';
56
56
 
57
- // Chip
58
- $chip: #{$pf-prefix} + 'c-chip';
59
-
60
- // Chip Group
61
- $chip-group: #{$pf-prefix} + 'c-chip-group';
62
-
63
57
  // Clipboard Copy
64
58
  $clipboard-copy: #{$pf-prefix} + 'c-clipboard-copy';
65
59
 
package/components/Chip/chip-group.css DELETED
@@ -1,80 +0,0 @@
1
- .pf-v6-c-chip-group {
2
- --pf-v6-c-chip-group--PaddingBlockStart: 0;
3
- --pf-v6-c-chip-group--PaddingInlineEnd: 0;
4
- --pf-v6-c-chip-group--PaddingBlockEnd: 0;
5
- --pf-v6-c-chip-group--PaddingInlineStart: 0;
6
- --pf-v6-c-chip-group--RowGap: var(--pf-v6-global--spacer--sm);
7
- --pf-v6-c-chip-group--ColumnGap: 0;
8
- --pf-v6-c-chip-group__main--RowGap: var(--pf-v6-global--spacer--xs);
9
- --pf-v6-c-chip-group__main--ColumnGap: var(--pf-v6-global--spacer--sm);
10
- --pf-v6-c-chip-group__list--RowGap: var(--pf-v6-global--spacer--xs);
11
- --pf-v6-c-chip-group__list--ColumnGap: var(--pf-v6-global--spacer--xs);
12
- --pf-v6-c-chip-group--m-category--PaddingBlockStart: var(--pf-v6-global--spacer--xs);
13
- --pf-v6-c-chip-group--m-category--PaddingInlineEnd: var(--pf-v6-global--spacer--xs);
14
- --pf-v6-c-chip-group--m-category--PaddingBlockEnd: var(--pf-v6-global--spacer--xs);
15
- --pf-v6-c-chip-group--m-category--PaddingInlineStart: var(--pf-v6-global--spacer--sm);
16
- --pf-v6-c-chip-group--m-category--BorderRadius: var(--pf-v6-global--BorderRadius--sm);
17
- --pf-v6-c-chip-group--m-category--BackgroundColor: var(--pf-v6-global--BackgroundColor--200);
18
- --pf-v6-c-chip-group__label--FontSize: var(--pf-v6-global--FontSize--sm);
19
- --pf-v6-c-chip-group__label--MaxWidth: 18ch;
20
- --pf-v6-c-chip-group__close--MarginBlockStart: calc(var(--pf-v6-global--spacer--xs) * -1);
21
- --pf-v6-c-chip-group__close--MarginBlockEnd: calc(var(--pf-v6-global--spacer--xs) * -1);
22
- row-gap: var(--pf-v6-c-chip-group--RowGap);
23
- column-gap: var(--pf-v6-c-chip-group--ColumnGap);
24
- max-width: 100%;
25
- padding-block-start: var(--pf-v6-c-chip-group--PaddingBlockStart);
26
- padding-block-end: var(--pf-v6-c-chip-group--PaddingBlockEnd);
27
- padding-inline-start: var(--pf-v6-c-chip-group--PaddingInlineStart);
28
- padding-inline-end: var(--pf-v6-c-chip-group--PaddingInlineEnd);
29
- }
30
- .pf-v6-c-chip-group.pf-m-category {
31
- --pf-v6-c-chip-group--PaddingBlockStart: var(--pf-v6-c-chip-group--m-category--PaddingBlockStart);
32
- --pf-v6-c-chip-group--PaddingInlineEnd: var(--pf-v6-c-chip-group--m-category--PaddingInlineEnd);
33
- --pf-v6-c-chip-group--PaddingBlockEnd: var(--pf-v6-c-chip-group--m-category--PaddingBlockEnd);
34
- --pf-v6-c-chip-group--PaddingInlineStart: var(--pf-v6-c-chip-group--m-category--PaddingInlineStart);
35
- background-color: var(--pf-v6-c-chip-group--m-category--BackgroundColor);
36
- border-radius: var(--pf-v6-c-chip-group--m-category--BorderRadius);
37
- }
38
-
39
- .pf-v6-c-chip-group__main {
40
- display: flex;
41
- flex: 1;
42
- flex-wrap: wrap;
43
- row-gap: var(--pf-v6-c-chip-group__main--RowGap);
44
- column-gap: var(--pf-v6-c-chip-group__main--ColumnGap);
45
- align-items: baseline;
46
- min-width: 0;
47
- }
48
-
49
- .pf-v6-c-chip-group,
50
- .pf-v6-c-chip-group__list {
51
- display: inline-flex;
52
- flex-wrap: wrap;
53
- align-items: center;
54
- min-width: 0;
55
- }
56
-
57
- .pf-v6-c-chip-group__list {
58
- row-gap: var(--pf-v6-c-chip-group__list--RowGap);
59
- column-gap: var(--pf-v6-c-chip-group__list--ColumnGap);
60
- }
61
-
62
- .pf-v6-c-chip-group__list-item {
63
- display: inline-flex;
64
- min-width: 0;
65
- }
66
-
67
- .pf-v6-c-chip-group__label {
68
- overflow: hidden;
69
- text-overflow: ellipsis;
70
- white-space: nowrap;
71
- max-width: var(--pf-v6-c-chip-group__label--MaxWidth);
72
- font-size: var(--pf-v6-c-chip-group__label--FontSize);
73
- }
74
-
75
- .pf-v6-c-chip-group__close {
76
- display: flex;
77
- align-self: flex-start;
78
- margin-block-start: var(--pf-v6-c-chip-group__close--MarginBlockStart);
79
- margin-block-end: var(--pf-v6-c-chip-group__close--MarginBlockEnd);
80
- }
package/components/Chip/chip-group.scss DELETED
@@ -1,96 +0,0 @@
1
- @use '../../sass-utilities' as *;
2
-
3
- .#{$chip}-group {
4
- // Chip group - spaces main and close
5
- // column-gap spacer supports legacy chip group
6
- --#{$chip}-group--PaddingBlockStart: 0;
7
- --#{$chip}-group--PaddingInlineEnd: 0;
8
- --#{$chip}-group--PaddingBlockEnd: 0;
9
- --#{$chip}-group--PaddingInlineStart: 0;
10
- --#{$chip}-group--RowGap: var(--#{$pf-global}--spacer--sm);
11
- --#{$chip}-group--ColumnGap: 0;
12
-
13
- // Chip group main - spaces the category label and list
14
- --#{$chip}-group__main--RowGap: var(--#{$pf-global}--spacer--xs);
15
- --#{$chip}-group__main--ColumnGap: var(--#{$pf-global}--spacer--sm);
16
-
17
- // Chip group list - spaces the chips
18
- --#{$chip}-group__list--RowGap: var(--#{$pf-global}--spacer--xs);
19
- --#{$chip}-group__list--ColumnGap: var(--#{$pf-global}--spacer--xs);
20
-
21
- // Category modifier
22
- --#{$chip}-group--m-category--PaddingBlockStart: var(--#{$pf-global}--spacer--xs);
23
- --#{$chip}-group--m-category--PaddingInlineEnd: var(--#{$pf-global}--spacer--xs);
24
- --#{$chip}-group--m-category--PaddingBlockEnd: var(--#{$pf-global}--spacer--xs);
25
- --#{$chip}-group--m-category--PaddingInlineStart: var(--#{$pf-global}--spacer--sm);
26
- --#{$chip}-group--m-category--BorderRadius: var(--#{$pf-global}--BorderRadius--sm);
27
- --#{$chip}-group--m-category--BackgroundColor: var(--#{$pf-global}--BackgroundColor--200);
28
-
29
- // Label in group
30
- --#{$chip}-group__label--FontSize: var(--#{$pf-global}--FontSize--sm);
31
- --#{$chip}-group__label--MaxWidth: 18ch;
32
-
33
- // Chip group close - negative margin stretches height for click area
34
- --#{$chip}-group__close--MarginBlockStart: calc(var(--#{$pf-global}--spacer--xs) * -1);
35
- --#{$chip}-group__close--MarginBlockEnd: calc(var(--#{$pf-global}--spacer--xs) * -1);
36
-
37
- row-gap: var(--#{$chip}-group--RowGap);
38
- column-gap: var(--#{$chip}-group--ColumnGap);
39
- max-width: 100%;
40
- padding-block-start: var(--#{$chip}-group--PaddingBlockStart);
41
- padding-block-end: var(--#{$chip}-group--PaddingBlockEnd);
42
- padding-inline-start: var(--#{$chip}-group--PaddingInlineStart);
43
- padding-inline-end: var(--#{$chip}-group--PaddingInlineEnd);
44
-
45
- &.pf-m-category {
46
- --#{$chip}-group--PaddingBlockStart: var(--#{$chip}-group--m-category--PaddingBlockStart);
47
- --#{$chip}-group--PaddingInlineEnd: var(--#{$chip}-group--m-category--PaddingInlineEnd);
48
- --#{$chip}-group--PaddingBlockEnd: var(--#{$chip}-group--m-category--PaddingBlockEnd);
49
- --#{$chip}-group--PaddingInlineStart: var(--#{$chip}-group--m-category--PaddingInlineStart);
50
-
51
- background-color: var(--#{$chip}-group--m-category--BackgroundColor);
52
- border-radius: var(--#{$chip}-group--m-category--BorderRadius);
53
- }
54
- }
55
-
56
- .#{$chip}-group__main {
57
- display: flex;
58
- flex: 1;
59
- flex-wrap: wrap;
60
- row-gap: var(--#{$chip}-group__main--RowGap);
61
- column-gap: var(--#{$chip}-group__main--ColumnGap);
62
- align-items: baseline;
63
- min-width: 0;
64
- }
65
-
66
- .#{$chip}-group,
67
- .#{$chip}-group__list {
68
- display: inline-flex;
69
- flex-wrap: wrap;
70
- align-items: center;
71
- min-width: 0;
72
- }
73
-
74
- .#{$chip}-group__list {
75
- row-gap: var(--#{$chip}-group__list--RowGap);
76
- column-gap: var(--#{$chip}-group__list--ColumnGap);
77
- }
78
-
79
- .#{$chip}-group__list-item {
80
- display: inline-flex;
81
- min-width: 0;
82
- }
83
-
84
- .#{$chip}-group__label {
85
- @include pf-v6-text-overflow;
86
-
87
- max-width: var(--#{$chip}-group__label--MaxWidth);
88
- font-size: var(--#{$chip}-group__label--FontSize);
89
- }
90
-
91
- .#{$chip}-group__close {
92
- display: flex;
93
- align-self: flex-start;
94
- margin-block-start: var(--#{$chip}-group__close--MarginBlockStart);
95
- margin-block-end: var(--#{$chip}-group__close--MarginBlockEnd);
96
- }
package/components/Chip/chip.css DELETED
@@ -1,103 +0,0 @@
1
- .pf-v6-c-chip {
2
- --pf-v6-c-chip--PaddingBlockStart: var(--pf-v6-global--spacer--xs);
3
- --pf-v6-c-chip--PaddingInlineEnd: var(--pf-v6-global--spacer--sm);
4
- --pf-v6-c-chip--PaddingBlockEnd: var(--pf-v6-global--spacer--xs);
5
- --pf-v6-c-chip--PaddingInlineStart: var(--pf-v6-global--spacer--sm);
6
- --pf-v6-c-chip--BackgroundColor: var(--pf-v6-global--Color--light-100);
7
- --pf-v6-c-chip--BorderRadius: var(--pf-v6-global--BorderRadius--sm);
8
- --pf-v6-c-chip--before--BorderColor: var(--pf-v6-global--BorderColor--300);
9
- --pf-v6-c-chip--before--BorderWidth: var(--pf-v6-global--BorderWidth--sm);
10
- --pf-v6-c-chip--before--BorderRadius: var(--pf-v6-c-chip--BorderRadius);
11
- --pf-v6-c-chip--m-overflow__text--Color: var(--pf-v6-global--primary-color--100);
12
- --pf-v6-c-chip--m-draggable--BackgroundColor: var(--pf-v6-global--BackgroundColor--200);
13
- --pf-v6-c-chip--m-draggable--BoxShadow: var(--pf-v6-global--BoxShadow--sm);
14
- --pf-v6-c-chip--m-draggable__icon--FontSize: var(--pf-v6-global--icon--FontSize--sm);
15
- --pf-v6-c-chip__content--FontSize: var(--pf-v6-global--FontSize--xs);
16
- --pf-v6-c-chip__content--ColumnGap: var(--pf-v6-global--spacer--xs);
17
- --pf-v6-c-chip__text--Color: var(--pf-v6-global--Color--100);
18
- --pf-v6-c-chip__text--MaxWidth: 16ch;
19
- --pf-v6-c-chip__c-badge--MarginInlineStart: var(--pf-v6-global--spacer--xs);
20
- --pf-v6-c-chip__actions--FontSize: var(--pf-v6-global--FontSize--xs);
21
- --pf-v6-c-chip__actions--c-button--PaddingBlockStart: var(--pf-v6-global--spacer--xs);
22
- --pf-v6-c-chip__actions--c-button--PaddingInlineEnd: var(--pf-v6-global--spacer--sm);
23
- --pf-v6-c-chip__actions--c-button--PaddingBlockEnd: var(--pf-v6-global--spacer--xs);
24
- --pf-v6-c-chip__actions--c-button--PaddingInlineStart: var(--pf-v6-global--spacer--sm);
25
- --pf-v6-c-chip__actions--c-button--MarginBlockStart: calc(var(--pf-v6-c-chip--PaddingBlockStart) * -1);
26
- --pf-v6-c-chip__actions--c-button--MarginInlineEnd: calc(var(--pf-v6-c-chip--PaddingInlineEnd) / 2 * -1);
27
- --pf-v6-c-chip__actions--c-button--MarginBlockEnd: calc(var(--pf-v6-c-chip--PaddingBlockEnd) * -1);
28
- --pf-v6-c-chip__actions--c-button--FontSize: var(--pf-v6-global--FontSize--xs);
29
- --pf-v6-c-chip__icon--MarginInlineStart: var(--pf-v6-global--spacer--sm);
30
- position: relative;
31
- display: inline-flex;
32
- align-items: center;
33
- min-width: 0;
34
- padding-block-start: var(--pf-v6-c-chip--PaddingBlockStart);
35
- padding-block-end: var(--pf-v6-c-chip--PaddingBlockEnd);
36
- padding-inline-start: var(--pf-v6-c-chip--PaddingInlineStart);
37
- padding-inline-end: var(--pf-v6-c-chip--PaddingInlineEnd);
38
- list-style: none;
39
- background-color: var(--pf-v6-c-chip--BackgroundColor);
40
- border-radius: var(--pf-v6-c-chip--BorderRadius);
41
- }
42
- .pf-v6-c-chip::before {
43
- position: absolute;
44
- inset-block-start: 0;
45
- inset-block-end: 0;
46
- inset-inline-start: 0;
47
- inset-inline-end: 0;
48
- content: "";
49
- border: var(--pf-v6-c-chip--before--BorderWidth) solid var(--pf-v6-c-chip--before--BorderColor);
50
- border-radius: var(--pf-v6-c-chip--before--BorderRadius);
51
- }
52
- .pf-v6-c-chip.pf-m-overflow {
53
- border: 0;
54
- }
55
- .pf-v6-c-chip.pf-m-overflow .pf-v6-c-chip__text {
56
- color: var(--pf-v6-c-chip--m-overflow__text--Color);
57
- }
58
- .pf-v6-c-chip.pf-m-draggable {
59
- --pf-v6-c-chip--BackgroundColor: var(--pf-v6-c-chip--m-draggable--BackgroundColor);
60
- box-shadow: var(--pf-v6-c-chip--m-draggable--BoxShadow);
61
- }
62
- .pf-v6-c-chip.pf-m-draggable .pf-v6-c-chip__icon {
63
- font-size: var(--pf-v6-c-chip--m-draggable__icon--FontSize);
64
- }
65
-
66
- .pf-v6-c-chip__text {
67
- overflow: hidden;
68
- text-overflow: ellipsis;
69
- white-space: nowrap;
70
- position: relative;
71
- max-width: var(--pf-v6-c-chip__text--MaxWidth);
72
- color: var(--pf-v6-c-chip__text--Color);
73
- }
74
- .pf-v6-c-chip__text .pf-v6-c-badge {
75
- margin-inline-start: var(--pf-v6-c-chip__c-badge--MarginInlineStart);
76
- }
77
-
78
- .pf-v6-c-chip__icon + .pf-v6-c-chip__text,
79
- .pf-v6-c-chip__text + .pf-v6-c-chip__icon {
80
- margin-inline-start: var(--pf-v6-c-chip__icon--MarginInlineStart);
81
- }
82
-
83
- .pf-v6-c-chip__content {
84
- display: flex;
85
- column-gap: var(--pf-v6-c-chip__content--ColumnGap);
86
- align-items: center;
87
- font-size: var(--pf-v6-c-chip__content--FontSize);
88
- }
89
-
90
- .pf-v6-c-chip__actions {
91
- font-size: var(--pf-v6-c-chip__actions--FontSize);
92
- }
93
- .pf-v6-c-chip__actions .pf-v6-c-button {
94
- --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-chip__actions--c-button--PaddingBlockStart);
95
- --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-chip__actions--c-button--PaddingInlineEnd);
96
- --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-chip__actions--c-button--PaddingBlockEnd);
97
- --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-chip__actions--c-button--PaddingInlineStart);
98
- --pf-v6-c-button--FontSize: var(--pf-v6-c-chip__actions--c-button--FontSize);
99
- margin-block-start: var(--pf-v6-c-chip__actions--c-button--MarginBlockStart);
100
- margin-block-end: var(--pf-v6-c-chip__actions--c-button--MarginBlockEnd);
101
- margin-inline-end: var(--pf-v6-c-chip__actions--c-button--MarginInlineEnd);
102
- line-height: 1;
103
- }
package/components/Chip/chip.scss DELETED
@@ -1,131 +0,0 @@
1
- @use '../../sass-utilities' as *;
2
-
3
- .#{$chip} {
4
- --#{$chip}--PaddingBlockStart: var(--#{$pf-global}--spacer--xs);
5
- --#{$chip}--PaddingInlineEnd: var(--#{$pf-global}--spacer--sm);
6
- --#{$chip}--PaddingBlockEnd: var(--#{$pf-global}--spacer--xs);
7
- --#{$chip}--PaddingInlineStart: var(--#{$pf-global}--spacer--sm);
8
- --#{$chip}--BackgroundColor: var(--#{$pf-global}--Color--light-100);
9
- --#{$chip}--BorderRadius: var(--#{$pf-global}--BorderRadius--sm);
10
- --#{$chip}--before--BorderColor: var(--#{$pf-global}--BorderColor--300);
11
- --#{$chip}--before--BorderWidth: var(--#{$pf-global}--BorderWidth--sm);
12
- --#{$chip}--before--BorderRadius: var(--#{$chip}--BorderRadius);
13
-
14
- // overflow chip button
15
- --#{$chip}--m-overflow__text--Color: var(--#{$pf-global}--primary-color--100);
16
-
17
- // draggable chip
18
- --#{$chip}--m-draggable--BackgroundColor: var(--#{$pf-global}--BackgroundColor--200);
19
- --#{$chip}--m-draggable--BoxShadow: var(--#{$pf-global}--BoxShadow--sm);
20
- --#{$chip}--m-draggable__icon--FontSize: var(--#{$pf-global}--icon--FontSize--sm);
21
-
22
- // chip content
23
- --#{$chip}__content--FontSize: var(--#{$pf-global}--FontSize--xs);
24
- --#{$chip}__content--ColumnGap: var(--#{$pf-global}--spacer--xs);
25
-
26
- // chip text
27
- --#{$chip}__text--Color: var(--#{$pf-global}--Color--100);
28
- --#{$chip}__text--MaxWidth: 16ch;
29
- --#{$chip}__c-badge--MarginInlineStart: var(--#{$pf-global}--spacer--xs);
30
-
31
- // chip actions
32
- --#{$chip}__actions--FontSize: var(--#{$pf-global}--FontSize--xs);
33
-
34
- // buttons within chip actions
35
- --#{$chip}__actions--c-button--PaddingBlockStart: var(--#{$pf-global}--spacer--xs);
36
- --#{$chip}__actions--c-button--PaddingInlineEnd: var(--#{$pf-global}--spacer--sm);
37
- --#{$chip}__actions--c-button--PaddingBlockEnd: var(--#{$pf-global}--spacer--xs);
38
- --#{$chip}__actions--c-button--PaddingInlineStart: var(--#{$pf-global}--spacer--sm);
39
- --#{$chip}__actions--c-button--MarginBlockStart: calc(var(--#{$chip}--PaddingBlockStart) * -1);
40
- --#{$chip}__actions--c-button--MarginInlineEnd: calc(var(--#{$chip}--PaddingInlineEnd) / 2 * -1);
41
- --#{$chip}__actions--c-button--MarginBlockEnd: calc(var(--#{$chip}--PaddingBlockEnd) * -1);
42
- --#{$chip}__actions--c-button--FontSize: var(--#{$pf-global}--FontSize--xs);
43
-
44
- // icon
45
- --#{$chip}__icon--MarginInlineStart: var(--#{$pf-global}--spacer--sm);
46
-
47
- position: relative;
48
- display: inline-flex;
49
- align-items: center;
50
- min-width: 0;
51
- padding-block-start: var(--#{$chip}--PaddingBlockStart);
52
- padding-block-end: var(--#{$chip}--PaddingBlockEnd);
53
- padding-inline-start: var(--#{$chip}--PaddingInlineStart);
54
- padding-inline-end: var(--#{$chip}--PaddingInlineEnd);
55
- list-style: none;
56
- background-color: var(--#{$chip}--BackgroundColor);
57
- border-radius: var(--#{$chip}--BorderRadius);
58
-
59
- &::before {
60
- position: absolute;
61
- inset-block-start: 0;
62
- inset-block-end: 0;
63
- inset-inline-start: 0;
64
- inset-inline-end: 0;
65
- content: "";
66
- border: var(--#{$chip}--before--BorderWidth) solid var(--#{$chip}--before--BorderColor);
67
- border-radius: var(--#{$chip}--before--BorderRadius);
68
- }
69
-
70
- // Chip overflow modifier
71
- &.pf-m-overflow {
72
- border: 0;
73
-
74
- .#{$chip}__text {
75
- color: var(--#{$chip}--m-overflow__text--Color);
76
- }
77
- }
78
-
79
- &.pf-m-draggable {
80
- --#{$chip}--BackgroundColor: var(--#{$chip}--m-draggable--BackgroundColor);
81
-
82
- box-shadow: var(--#{$chip}--m-draggable--BoxShadow);
83
-
84
- .#{$chip}__icon {
85
- font-size: var(--#{$chip}--m-draggable__icon--FontSize);
86
- }
87
- }
88
- }
89
-
90
- // Text element
91
- .#{$chip}__text {
92
- @include pf-v6-text-overflow;
93
-
94
- position: relative;
95
- max-width: var(--#{$chip}__text--MaxWidth);
96
- color: var(--#{$chip}__text--Color);
97
-
98
- .#{$badge} {
99
- margin-inline-start: var(--#{$chip}__c-badge--MarginInlineStart); // remove in breaking change
100
- }
101
- }
102
-
103
- .#{$chip}__icon + .#{$chip}__text,
104
- .#{$chip}__text + .#{$chip}__icon {
105
- margin-inline-start: var(--#{$chip}__icon--MarginInlineStart);
106
- }
107
-
108
- .#{$chip}__content {
109
- display: flex;
110
- column-gap: var(--#{$chip}__content--ColumnGap);
111
- align-items: center;
112
- font-size: var(--#{$chip}__content--FontSize);
113
- }
114
-
115
- .#{$chip}__actions {
116
- font-size: var(--#{$chip}__actions--FontSize);
117
-
118
- // Actions Button
119
- .#{$button} {
120
- --#{$button}--PaddingBlockStart: var(--#{$chip}__actions--c-button--PaddingBlockStart);
121
- --#{$button}--PaddingInlineEnd: var(--#{$chip}__actions--c-button--PaddingInlineEnd);
122
- --#{$button}--PaddingBlockEnd: var(--#{$chip}__actions--c-button--PaddingBlockEnd);
123
- --#{$button}--PaddingInlineStart: var(--#{$chip}__actions--c-button--PaddingInlineStart);
124
- --#{$button}--FontSize: var(--#{$chip}__actions--c-button--FontSize);
125
-
126
- margin-block-start: var(--#{$chip}__actions--c-button--MarginBlockStart);
127
- margin-block-end: var(--#{$chip}__actions--c-button--MarginBlockEnd);
128
- margin-inline-end: var(--#{$chip}__actions--c-button--MarginInlineEnd);
129
- line-height: 1;
130
- }
131
- }