@i-cell/ids-styles 0.0.1 → 0.0.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 (32) hide show
  1. package/dist/accordion/accordion.css +29 -14
  2. package/dist/accordion/accordion.min.css +1 -1
  3. package/dist/accordion/accordion.plugin.js +193 -0
  4. package/dist/action-item/action-item.css +33 -33
  5. package/dist/action-item/action-item.min.css +1 -1
  6. package/dist/action-item/action-item.plugin.js +180 -0
  7. package/dist/action-panel/action-panel.css +12 -12
  8. package/dist/action-panel/action-panel.min.css +1 -1
  9. package/dist/action-panel/action-panel.plugin.js +94 -0
  10. package/dist/avatar/avatar.css +78 -82
  11. package/dist/avatar/avatar.min.css +1 -1
  12. package/dist/avatar/avatar.plugin.js +269 -0
  13. package/dist/button/button.css +187 -180
  14. package/dist/button/button.min.css +1 -1
  15. package/dist/button/button.plugin.js +800 -0
  16. package/dist/card/card.plugin.js +850 -0
  17. package/dist/components.css +718 -637
  18. package/dist/components.min.css +1 -1
  19. package/dist/components.plugin.js +4011 -0
  20. package/dist/dialog/dialog.css +92 -43
  21. package/dist/dialog/dialog.min.css +1 -1
  22. package/dist/dialog/dialog.plugin.js +224 -0
  23. package/dist/divider/divider.css +2 -2
  24. package/dist/divider/divider.min.css +1 -1
  25. package/dist/divider/divider.plugin.js +39 -0
  26. package/dist/icon-button/icon-button.css +102 -102
  27. package/dist/icon-button/icon-button.min.css +1 -1
  28. package/dist/icon-button/icon-button.plugin.js +674 -0
  29. package/dist/tag/tag.css +183 -169
  30. package/dist/tag/tag.min.css +1 -1
  31. package/dist/tag/tag.plugin.js +769 -0
  32. package/package.json +14 -4
package/dist/accordion/accordion.css CHANGED
@@ -25,25 +25,12 @@
25
25
  flex: 1 0 0;
26
26
  overflow: hidden;
27
27
  text-overflow: ellipsis;
28
+ font-style: normal;
28
29
  }
29
30
  .ids-accordion.ids-accordion-disabled > .ids-accordion-summary {
30
31
  pointer-events: none;
31
32
  user-select: none;
32
33
  }
33
- .ids-accordion.ids-accordion-dense .ids-accordion-title, .ids-accordion.ids-accordion-compact .ids-accordion-title {
34
- font-size: 12px;
35
- font-style: normal;
36
- font-weight: 600;
37
- line-height: 16px;
38
- letter-spacing: 0.5px;
39
- }
40
- .ids-accordion.ids-accordion-comfortable .ids-accordion-title, .ids-accordion.ids-accordion-spacious .ids-accordion-title {
41
- font-size: 16px;
42
- font-style: normal;
43
- font-weight: 600;
44
- line-height: 20px;
45
- letter-spacing: 0.1px;
46
- }
47
34
  .ids-accordion > .ids-accordion-content {
48
35
  display: flex;
49
36
  flex-direction: column;
@@ -61,6 +48,13 @@
61
48
  border-radius: var(--ids-comp-size-accordion-summary-size-border-radius-compact);
62
49
  border-width: var(--ids-comp-size-accordion-summary-size-border-width-compact);
63
50
  }
51
+ .ids-accordion.ids-accordion-compact > .ids-accordion-summary > .ids-accordion-title {
52
+ font-family: var(--ids-comp-size-accordion-summary-typography-font-family-compact);
53
+ font-size: var(--ids-comp-size-accordion-summary-typography-font-size-compact);
54
+ font-weight: var(--ids-comp-size-accordion-summary-typography-font-weight-compact);
55
+ letter-spacing: var(--ids-comp-size-accordion-summary-typography-letter-spacing-compact);
56
+ line-height: var(--ids-comp-size-accordion-summary-typography-line-height-compact);
57
+ }
64
58
  .ids-accordion.ids-accordion-compact > .ids-accordion-content {
65
59
  padding: var(--ids-comp-size-accordion-details-size-padding-y-compact) var(--ids-comp-size-accordion-details-size-padding-x-compact);
66
60
  gap: var(--ids-comp-size-accordion-details-size-gap-compact);
@@ -77,6 +71,13 @@
77
71
  border-radius: var(--ids-comp-size-accordion-summary-size-border-radius-comfortable);
78
72
  border-width: var(--ids-comp-size-accordion-summary-size-border-width-comfortable);
79
73
  }
74
+ .ids-accordion.ids-accordion-comfortable > .ids-accordion-summary > .ids-accordion-title {
75
+ font-family: var(--ids-comp-size-accordion-summary-typography-font-family-comfortable);
76
+ font-size: var(--ids-comp-size-accordion-summary-typography-font-size-comfortable);
77
+ font-weight: var(--ids-comp-size-accordion-summary-typography-font-weight-comfortable);
78
+ letter-spacing: var(--ids-comp-size-accordion-summary-typography-letter-spacing-comfortable);
79
+ line-height: var(--ids-comp-size-accordion-summary-typography-line-height-comfortable);
80
+ }
80
81
  .ids-accordion.ids-accordion-comfortable > .ids-accordion-content {
81
82
  padding: var(--ids-comp-size-accordion-details-size-padding-y-comfortable) var(--ids-comp-size-accordion-details-size-padding-x-comfortable);
82
83
  gap: var(--ids-comp-size-accordion-details-size-gap-comfortable);
@@ -93,6 +94,13 @@
93
94
  border-radius: var(--ids-comp-size-accordion-summary-size-border-radius-spacious);
94
95
  border-width: var(--ids-comp-size-accordion-summary-size-border-width-spacious);
95
96
  }
97
+ .ids-accordion.ids-accordion-spacious > .ids-accordion-summary > .ids-accordion-title {
98
+ font-family: var(--ids-comp-size-accordion-summary-typography-font-family-spacious);
99
+ font-size: var(--ids-comp-size-accordion-summary-typography-font-size-spacious);
100
+ font-weight: var(--ids-comp-size-accordion-summary-typography-font-weight-spacious);
101
+ letter-spacing: var(--ids-comp-size-accordion-summary-typography-letter-spacing-spacious);
102
+ line-height: var(--ids-comp-size-accordion-summary-typography-line-height-spacious);
103
+ }
96
104
  .ids-accordion.ids-accordion-spacious > .ids-accordion-content {
97
105
  padding: var(--ids-comp-size-accordion-details-size-padding-y-spacious) var(--ids-comp-size-accordion-details-size-padding-x-spacious);
98
106
  gap: var(--ids-comp-size-accordion-details-size-gap-spacious);
@@ -109,6 +117,13 @@
109
117
  border-radius: var(--ids-comp-size-accordion-summary-size-border-radius-dense);
110
118
  border-width: var(--ids-comp-size-accordion-summary-size-border-width-dense);
111
119
  }
120
+ .ids-accordion.ids-accordion-dense > .ids-accordion-summary > .ids-accordion-title {
121
+ font-family: var(--ids-comp-size-accordion-summary-typography-font-family-dense);
122
+ font-size: var(--ids-comp-size-accordion-summary-typography-font-size-dense);
123
+ font-weight: var(--ids-comp-size-accordion-summary-typography-font-weight-dense);
124
+ letter-spacing: var(--ids-comp-size-accordion-summary-typography-letter-spacing-dense);
125
+ line-height: var(--ids-comp-size-accordion-summary-typography-line-height-dense);
126
+ }
112
127
  .ids-accordion.ids-accordion-dense > .ids-accordion-content {
113
128
  padding: var(--ids-comp-size-accordion-details-size-padding-y-dense) var(--ids-comp-size-accordion-details-size-padding-x-dense);
114
129
  gap: var(--ids-comp-size-accordion-details-size-gap-dense);
package/dist/accordion/accordion.min.css CHANGED
@@ -1 +1 @@
1
- .ids-accordion{display:flex;flex-direction:column;align-items:flex-start;width:100%;background:var(--ids-comp-accordion-item-color-bg-enabled)}.ids-accordion>.ids-accordion-summary{display:flex;align-items:center;width:100%;border-style:solid;cursor:pointer}.ids-accordion>.ids-accordion-summary:focus{outline-offset:2px;outline-style:solid;outline-width:var(--ids-comp-accordion-summary-focused-outline-size-outline);outline-color:var(--ids-comp-accordion-summary-focused-outline-color-dark-focused)}.ids-theme-dark .ids-accordion>.ids-accordion-summary:focus{outline-color:var(--ids-comp-accordion-summary-focused-outline-color-light-focused)}.ids-accordion>.ids-accordion-summary>.ids-accordion-title{flex:1 0 0;overflow:hidden;text-overflow:ellipsis}.ids-accordion.ids-accordion-disabled>.ids-accordion-summary{pointer-events:none;user-select:none}.ids-accordion.ids-accordion-dense .ids-accordion-title,.ids-accordion.ids-accordion-compact .ids-accordion-title{font-size:12px;font-style:normal;font-weight:600;line-height:16px;letter-spacing:.5px}.ids-accordion.ids-accordion-comfortable .ids-accordion-title,.ids-accordion.ids-accordion-spacious .ids-accordion-title{font-size:16px;font-style:normal;font-weight:600;line-height:20px;letter-spacing:.1px}.ids-accordion>.ids-accordion-content{display:flex;flex-direction:column;background:var(--ids-comp-accordion-details-color-bg-enabled)}.ids-accordion.ids-accordion-compact{padding:var(--ids-comp-size-accordion-item-size-padding-y-compact) var(--ids-comp-size-accordion-item-size-padding-x-compact);gap:var(--ids-comp-size-accordion-item-size-gap-compact);border-radius:var(--ids-comp-size-accordion-item-size-border-radius-compact)}.ids-accordion.ids-accordion-compact>.ids-accordion-summary{height:var(--ids-comp-size-accordion-summary-size-height-compact);padding:var(--ids-comp-size-accordion-summary-size-padding-y-compact) var(--ids-comp-size-accordion-summary-size-padding-x-compact);gap:var(--ids-comp-size-accordion-summary-size-gap-compact);border-radius:var(--ids-comp-size-accordion-summary-size-border-radius-compact);border-width:var(--ids-comp-size-accordion-summary-size-border-width-compact)}.ids-accordion.ids-accordion-compact>.ids-accordion-content{padding:var(--ids-comp-size-accordion-details-size-padding-y-compact) var(--ids-comp-size-accordion-details-size-padding-x-compact);gap:var(--ids-comp-size-accordion-details-size-gap-compact)}.ids-accordion.ids-accordion-comfortable{padding:var(--ids-comp-size-accordion-item-size-padding-y-comfortable) var(--ids-comp-size-accordion-item-size-padding-x-comfortable);gap:var(--ids-comp-size-accordion-item-size-gap-comfortable);border-radius:var(--ids-comp-size-accordion-item-size-border-radius-comfortable)}.ids-accordion.ids-accordion-comfortable>.ids-accordion-summary{height:var(--ids-comp-size-accordion-summary-size-height-comfortable);padding:var(--ids-comp-size-accordion-summary-size-padding-y-comfortable) var(--ids-comp-size-accordion-summary-size-padding-x-comfortable);gap:var(--ids-comp-size-accordion-summary-size-gap-comfortable);border-radius:var(--ids-comp-size-accordion-summary-size-border-radius-comfortable);border-width:var(--ids-comp-size-accordion-summary-size-border-width-comfortable)}.ids-accordion.ids-accordion-comfortable>.ids-accordion-content{padding:var(--ids-comp-size-accordion-details-size-padding-y-comfortable) var(--ids-comp-size-accordion-details-size-padding-x-comfortable);gap:var(--ids-comp-size-accordion-details-size-gap-comfortable)}.ids-accordion.ids-accordion-spacious{padding:var(--ids-comp-size-accordion-item-size-padding-y-spacious) var(--ids-comp-size-accordion-item-size-padding-x-spacious);gap:var(--ids-comp-size-accordion-item-size-gap-spacious);border-radius:var(--ids-comp-size-accordion-item-size-border-radius-spacious)}.ids-accordion.ids-accordion-spacious>.ids-accordion-summary{height:var(--ids-comp-size-accordion-summary-size-height-spacious);padding:var(--ids-comp-size-accordion-summary-size-padding-y-spacious) var(--ids-comp-size-accordion-summary-size-padding-x-spacious);gap:var(--ids-comp-size-accordion-summary-size-gap-spacious);border-radius:var(--ids-comp-size-accordion-summary-size-border-radius-spacious);border-width:var(--ids-comp-size-accordion-summary-size-border-width-spacious)}.ids-accordion.ids-accordion-spacious>.ids-accordion-content{padding:var(--ids-comp-size-accordion-details-size-padding-y-spacious) var(--ids-comp-size-accordion-details-size-padding-x-spacious);gap:var(--ids-comp-size-accordion-details-size-gap-spacious)}.ids-accordion.ids-accordion-dense{padding:var(--ids-comp-size-accordion-item-size-padding-y-dense) var(--ids-comp-size-accordion-item-size-padding-x-dense);gap:var(--ids-comp-size-accordion-item-size-gap-dense);border-radius:var(--ids-comp-size-accordion-item-size-border-radius-dense)}.ids-accordion.ids-accordion-dense>.ids-accordion-summary{height:var(--ids-comp-size-accordion-summary-size-height-dense);padding:var(--ids-comp-size-accordion-summary-size-padding-y-dense) var(--ids-comp-size-accordion-summary-size-padding-x-dense);gap:var(--ids-comp-size-accordion-summary-size-gap-dense);border-radius:var(--ids-comp-size-accordion-summary-size-border-radius-dense);border-width:var(--ids-comp-size-accordion-summary-size-border-width-dense)}.ids-accordion.ids-accordion-dense>.ids-accordion-content{padding:var(--ids-comp-size-accordion-details-size-padding-y-dense) var(--ids-comp-size-accordion-details-size-padding-x-dense);gap:var(--ids-comp-size-accordion-details-size-gap-dense)}.ids-accordion.ids-accordion-text>.ids-accordion-summary{background:var(--ids-comp-accordion-summary-text-color-bg-enabled);border-color:var(--ids-comp-accordion-summary-text-color-border-enabled);color:var(--ids-comp-accordion-summary-text-color-fg-label-enabled)}.ids-accordion.ids-accordion-text>.ids-accordion-summary:hover{background:var(--ids-comp-accordion-summary-text-color-bg-hovered);border-color:var(--ids-comp-accordion-summary-text-color-border-hovered);color:var(--ids-comp-accordion-summary-text-color-fg-label-hovered)}.ids-accordion.ids-accordion-text>.ids-accordion-summary:focus{background:var(--ids-comp-accordion-summary-text-color-bg-focused);border-color:var(--ids-comp-accordion-summary-text-color-border-focused);color:var(--ids-comp-accordion-summary-text-color-fg-label-focused)}.ids-accordion.ids-accordion-text>.ids-accordion-summary:active{background:var(--ids-comp-accordion-summary-text-color-bg-pressed);border-color:var(--ids-comp-accordion-summary-text-color-border-pressed);color:var(--ids-comp-accordion-summary-text-color-fg-label-pressed)}.ids-accordion.ids-accordion-text.ids-accordion-disabled>.ids-accordion-summary{background:var(--ids-comp-accordion-summary-text-color-bg-disabled);border-color:var(--ids-comp-accordion-summary-text-color-border-disabled);color:var(--ids-comp-accordion-summary-text-color-fg-label-disabled)}.ids-accordion.ids-accordion-filled>.ids-accordion-summary{background:var(--ids-comp-accordion-summary-filled-color-bg-enabled);border-color:var(--ids-comp-accordion-summary-filled-color-border-enabled);color:var(--ids-comp-accordion-summary-filled-color-fg-label-enabled)}.ids-accordion.ids-accordion-filled>.ids-accordion-summary:hover{background:var(--ids-comp-accordion-summary-filled-color-bg-hovered);border-color:var(--ids-comp-accordion-summary-filled-color-border-hovered);color:var(--ids-comp-accordion-summary-filled-color-fg-label-hovered)}.ids-accordion.ids-accordion-filled>.ids-accordion-summary:focus{background:var(--ids-comp-accordion-summary-filled-color-bg-focused);border-color:var(--ids-comp-accordion-summary-filled-color-border-focused);color:var(--ids-comp-accordion-summary-filled-color-fg-label-focused)}.ids-accordion.ids-accordion-filled>.ids-accordion-summary:active{background:var(--ids-comp-accordion-summary-filled-color-bg-pressed);border-color:var(--ids-comp-accordion-summary-filled-color-border-pressed);color:var(--ids-comp-accordion-summary-filled-color-fg-label-pressed)}.ids-accordion.ids-accordion-filled.ids-accordion-disabled>.ids-accordion-summary{background:var(--ids-comp-accordion-summary-filled-color-bg-disabled);border-color:var(--ids-comp-accordion-summary-filled-color-border-disabled);color:var(--ids-comp-accordion-summary-filled-color-fg-label-disabled)}
1
+ .ids-accordion{display:flex;flex-direction:column;align-items:flex-start;width:100%;background:var(--ids-comp-accordion-item-color-bg-enabled)}.ids-accordion>.ids-accordion-summary{display:flex;align-items:center;width:100%;border-style:solid;cursor:pointer}.ids-accordion>.ids-accordion-summary:focus{outline-offset:2px;outline-style:solid;outline-width:var(--ids-comp-accordion-summary-focused-outline-size-outline);outline-color:var(--ids-comp-accordion-summary-focused-outline-color-dark-focused)}.ids-theme-dark .ids-accordion>.ids-accordion-summary:focus{outline-color:var(--ids-comp-accordion-summary-focused-outline-color-light-focused)}.ids-accordion>.ids-accordion-summary>.ids-accordion-title{flex:1 0 0;overflow:hidden;text-overflow:ellipsis;font-style:normal}.ids-accordion.ids-accordion-disabled>.ids-accordion-summary{pointer-events:none;user-select:none}.ids-accordion>.ids-accordion-content{display:flex;flex-direction:column;background:var(--ids-comp-accordion-details-color-bg-enabled)}.ids-accordion.ids-accordion-compact{padding:var(--ids-comp-size-accordion-item-size-padding-y-compact) var(--ids-comp-size-accordion-item-size-padding-x-compact);gap:var(--ids-comp-size-accordion-item-size-gap-compact);border-radius:var(--ids-comp-size-accordion-item-size-border-radius-compact)}.ids-accordion.ids-accordion-compact>.ids-accordion-summary{height:var(--ids-comp-size-accordion-summary-size-height-compact);padding:var(--ids-comp-size-accordion-summary-size-padding-y-compact) var(--ids-comp-size-accordion-summary-size-padding-x-compact);gap:var(--ids-comp-size-accordion-summary-size-gap-compact);border-radius:var(--ids-comp-size-accordion-summary-size-border-radius-compact);border-width:var(--ids-comp-size-accordion-summary-size-border-width-compact)}.ids-accordion.ids-accordion-compact>.ids-accordion-summary>.ids-accordion-title{font-family:var(--ids-comp-size-accordion-summary-typography-font-family-compact);font-size:var(--ids-comp-size-accordion-summary-typography-font-size-compact);font-weight:var(--ids-comp-size-accordion-summary-typography-font-weight-compact);letter-spacing:var(--ids-comp-size-accordion-summary-typography-letter-spacing-compact);line-height:var(--ids-comp-size-accordion-summary-typography-line-height-compact)}.ids-accordion.ids-accordion-compact>.ids-accordion-content{padding:var(--ids-comp-size-accordion-details-size-padding-y-compact) var(--ids-comp-size-accordion-details-size-padding-x-compact);gap:var(--ids-comp-size-accordion-details-size-gap-compact)}.ids-accordion.ids-accordion-comfortable{padding:var(--ids-comp-size-accordion-item-size-padding-y-comfortable) var(--ids-comp-size-accordion-item-size-padding-x-comfortable);gap:var(--ids-comp-size-accordion-item-size-gap-comfortable);border-radius:var(--ids-comp-size-accordion-item-size-border-radius-comfortable)}.ids-accordion.ids-accordion-comfortable>.ids-accordion-summary{height:var(--ids-comp-size-accordion-summary-size-height-comfortable);padding:var(--ids-comp-size-accordion-summary-size-padding-y-comfortable) var(--ids-comp-size-accordion-summary-size-padding-x-comfortable);gap:var(--ids-comp-size-accordion-summary-size-gap-comfortable);border-radius:var(--ids-comp-size-accordion-summary-size-border-radius-comfortable);border-width:var(--ids-comp-size-accordion-summary-size-border-width-comfortable)}.ids-accordion.ids-accordion-comfortable>.ids-accordion-summary>.ids-accordion-title{font-family:var(--ids-comp-size-accordion-summary-typography-font-family-comfortable);font-size:var(--ids-comp-size-accordion-summary-typography-font-size-comfortable);font-weight:var(--ids-comp-size-accordion-summary-typography-font-weight-comfortable);letter-spacing:var(--ids-comp-size-accordion-summary-typography-letter-spacing-comfortable);line-height:var(--ids-comp-size-accordion-summary-typography-line-height-comfortable)}.ids-accordion.ids-accordion-comfortable>.ids-accordion-content{padding:var(--ids-comp-size-accordion-details-size-padding-y-comfortable) var(--ids-comp-size-accordion-details-size-padding-x-comfortable);gap:var(--ids-comp-size-accordion-details-size-gap-comfortable)}.ids-accordion.ids-accordion-spacious{padding:var(--ids-comp-size-accordion-item-size-padding-y-spacious) var(--ids-comp-size-accordion-item-size-padding-x-spacious);gap:var(--ids-comp-size-accordion-item-size-gap-spacious);border-radius:var(--ids-comp-size-accordion-item-size-border-radius-spacious)}.ids-accordion.ids-accordion-spacious>.ids-accordion-summary{height:var(--ids-comp-size-accordion-summary-size-height-spacious);padding:var(--ids-comp-size-accordion-summary-size-padding-y-spacious) var(--ids-comp-size-accordion-summary-size-padding-x-spacious);gap:var(--ids-comp-size-accordion-summary-size-gap-spacious);border-radius:var(--ids-comp-size-accordion-summary-size-border-radius-spacious);border-width:var(--ids-comp-size-accordion-summary-size-border-width-spacious)}.ids-accordion.ids-accordion-spacious>.ids-accordion-summary>.ids-accordion-title{font-family:var(--ids-comp-size-accordion-summary-typography-font-family-spacious);font-size:var(--ids-comp-size-accordion-summary-typography-font-size-spacious);font-weight:var(--ids-comp-size-accordion-summary-typography-font-weight-spacious);letter-spacing:var(--ids-comp-size-accordion-summary-typography-letter-spacing-spacious);line-height:var(--ids-comp-size-accordion-summary-typography-line-height-spacious)}.ids-accordion.ids-accordion-spacious>.ids-accordion-content{padding:var(--ids-comp-size-accordion-details-size-padding-y-spacious) var(--ids-comp-size-accordion-details-size-padding-x-spacious);gap:var(--ids-comp-size-accordion-details-size-gap-spacious)}.ids-accordion.ids-accordion-dense{padding:var(--ids-comp-size-accordion-item-size-padding-y-dense) var(--ids-comp-size-accordion-item-size-padding-x-dense);gap:var(--ids-comp-size-accordion-item-size-gap-dense);border-radius:var(--ids-comp-size-accordion-item-size-border-radius-dense)}.ids-accordion.ids-accordion-dense>.ids-accordion-summary{height:var(--ids-comp-size-accordion-summary-size-height-dense);padding:var(--ids-comp-size-accordion-summary-size-padding-y-dense) var(--ids-comp-size-accordion-summary-size-padding-x-dense);gap:var(--ids-comp-size-accordion-summary-size-gap-dense);border-radius:var(--ids-comp-size-accordion-summary-size-border-radius-dense);border-width:var(--ids-comp-size-accordion-summary-size-border-width-dense)}.ids-accordion.ids-accordion-dense>.ids-accordion-summary>.ids-accordion-title{font-family:var(--ids-comp-size-accordion-summary-typography-font-family-dense);font-size:var(--ids-comp-size-accordion-summary-typography-font-size-dense);font-weight:var(--ids-comp-size-accordion-summary-typography-font-weight-dense);letter-spacing:var(--ids-comp-size-accordion-summary-typography-letter-spacing-dense);line-height:var(--ids-comp-size-accordion-summary-typography-line-height-dense)}.ids-accordion.ids-accordion-dense>.ids-accordion-content{padding:var(--ids-comp-size-accordion-details-size-padding-y-dense) var(--ids-comp-size-accordion-details-size-padding-x-dense);gap:var(--ids-comp-size-accordion-details-size-gap-dense)}.ids-accordion.ids-accordion-text>.ids-accordion-summary{background:var(--ids-comp-accordion-summary-text-color-bg-enabled);border-color:var(--ids-comp-accordion-summary-text-color-border-enabled);color:var(--ids-comp-accordion-summary-text-color-fg-label-enabled)}.ids-accordion.ids-accordion-text>.ids-accordion-summary:hover{background:var(--ids-comp-accordion-summary-text-color-bg-hovered);border-color:var(--ids-comp-accordion-summary-text-color-border-hovered);color:var(--ids-comp-accordion-summary-text-color-fg-label-hovered)}.ids-accordion.ids-accordion-text>.ids-accordion-summary:focus{background:var(--ids-comp-accordion-summary-text-color-bg-focused);border-color:var(--ids-comp-accordion-summary-text-color-border-focused);color:var(--ids-comp-accordion-summary-text-color-fg-label-focused)}.ids-accordion.ids-accordion-text>.ids-accordion-summary:active{background:var(--ids-comp-accordion-summary-text-color-bg-pressed);border-color:var(--ids-comp-accordion-summary-text-color-border-pressed);color:var(--ids-comp-accordion-summary-text-color-fg-label-pressed)}.ids-accordion.ids-accordion-text.ids-accordion-disabled>.ids-accordion-summary{background:var(--ids-comp-accordion-summary-text-color-bg-disabled);border-color:var(--ids-comp-accordion-summary-text-color-border-disabled);color:var(--ids-comp-accordion-summary-text-color-fg-label-disabled)}.ids-accordion.ids-accordion-filled>.ids-accordion-summary{background:var(--ids-comp-accordion-summary-filled-color-bg-enabled);border-color:var(--ids-comp-accordion-summary-filled-color-border-enabled);color:var(--ids-comp-accordion-summary-filled-color-fg-label-enabled)}.ids-accordion.ids-accordion-filled>.ids-accordion-summary:hover{background:var(--ids-comp-accordion-summary-filled-color-bg-hovered);border-color:var(--ids-comp-accordion-summary-filled-color-border-hovered);color:var(--ids-comp-accordion-summary-filled-color-fg-label-hovered)}.ids-accordion.ids-accordion-filled>.ids-accordion-summary:focus{background:var(--ids-comp-accordion-summary-filled-color-bg-focused);border-color:var(--ids-comp-accordion-summary-filled-color-border-focused);color:var(--ids-comp-accordion-summary-filled-color-fg-label-focused)}.ids-accordion.ids-accordion-filled>.ids-accordion-summary:active{background:var(--ids-comp-accordion-summary-filled-color-bg-pressed);border-color:var(--ids-comp-accordion-summary-filled-color-border-pressed);color:var(--ids-comp-accordion-summary-filled-color-fg-label-pressed)}.ids-accordion.ids-accordion-filled.ids-accordion-disabled>.ids-accordion-summary{background:var(--ids-comp-accordion-summary-filled-color-bg-disabled);border-color:var(--ids-comp-accordion-summary-filled-color-border-disabled);color:var(--ids-comp-accordion-summary-filled-color-fg-label-disabled)}
package/dist/accordion/accordion.plugin.js ADDED
@@ -0,0 +1,193 @@
1
+ // Tailwind CSS plugin for the accordion component in the i-Cell Design System
2
+ module.exports = function AccordionPlugin() {
3
+ return function ({ addComponents }) {
4
+ const cssObj = {
5
+ '.ids-accordion': {
6
+ display: 'flex',
7
+ flexDirection: 'column',
8
+ alignItems: 'flex-start',
9
+ width: '100%',
10
+ background: 'var(--ids-comp-accordion-item-color-bg-enabled)',
11
+ },
12
+ '.ids-accordion>.ids-accordion-summary': {
13
+ display: 'flex',
14
+ alignItems: 'center',
15
+ width: '100%',
16
+ borderStyle: 'solid',
17
+ cursor: 'pointer',
18
+ },
19
+ '.ids-accordion>.ids-accordion-summary:focus': {
20
+ outlineOffset: '2px',
21
+ outlineStyle: 'solid',
22
+ outlineWidth: 'var(--ids-comp-accordion-summary-focused-outline-size-outline)',
23
+ outlineColor: 'var(--ids-comp-accordion-summary-focused-outline-color-dark-focused)',
24
+ },
25
+ '.ids-theme-dark .ids-accordion>.ids-accordion-summary:focus': {
26
+ outlineColor: 'var(--ids-comp-accordion-summary-focused-outline-color-light-focused)',
27
+ },
28
+ '.ids-accordion>.ids-accordion-summary>.ids-accordion-title': {
29
+ flex: '1 0 0',
30
+ overflow: 'hidden',
31
+ textOverflow: 'ellipsis',
32
+ fontStyle: 'normal',
33
+ },
34
+ '.ids-accordion.ids-accordion-disabled>.ids-accordion-summary': { pointerEvents: 'none', userSelect: 'none' },
35
+ '.ids-accordion>.ids-accordion-content': {
36
+ display: 'flex',
37
+ flexDirection: 'column',
38
+ background: 'var(--ids-comp-accordion-details-color-bg-enabled)',
39
+ },
40
+ '.ids-accordion.ids-accordion-compact': {
41
+ padding: 'var(--ids-comp-size-accordion-item-size-padding-y-compact) var(--ids-comp-size-accordion-item-size-padding-x-compact)',
42
+ gap: 'var(--ids-comp-size-accordion-item-size-gap-compact)',
43
+ borderRadius: 'var(--ids-comp-size-accordion-item-size-border-radius-compact)',
44
+ },
45
+ '.ids-accordion.ids-accordion-compact>.ids-accordion-summary': {
46
+ height: 'var(--ids-comp-size-accordion-summary-size-height-compact)',
47
+ padding:
48
+ 'var(--ids-comp-size-accordion-summary-size-padding-y-compact) var(--ids-comp-size-accordion-summary-size-padding-x-compact)',
49
+ gap: 'var(--ids-comp-size-accordion-summary-size-gap-compact)',
50
+ borderRadius: 'var(--ids-comp-size-accordion-summary-size-border-radius-compact)',
51
+ borderWidth: 'var(--ids-comp-size-accordion-summary-size-border-width-compact)',
52
+ },
53
+ '.ids-accordion.ids-accordion-compact>.ids-accordion-summary>.ids-accordion-title': {
54
+ fontFamily: 'var(--ids-comp-size-accordion-summary-typography-font-family-compact)',
55
+ fontSize: 'var(--ids-comp-size-accordion-summary-typography-font-size-compact)',
56
+ fontWeight: 'var(--ids-comp-size-accordion-summary-typography-font-weight-compact)',
57
+ letterSpacing: 'var(--ids-comp-size-accordion-summary-typography-letter-spacing-compact)',
58
+ lineHeight: 'var(--ids-comp-size-accordion-summary-typography-line-height-compact)',
59
+ },
60
+ '.ids-accordion.ids-accordion-compact>.ids-accordion-content': {
61
+ padding:
62
+ 'var(--ids-comp-size-accordion-details-size-padding-y-compact) var(--ids-comp-size-accordion-details-size-padding-x-compact)',
63
+ gap: 'var(--ids-comp-size-accordion-details-size-gap-compact)',
64
+ },
65
+ '.ids-accordion.ids-accordion-comfortable': {
66
+ padding:
67
+ 'var(--ids-comp-size-accordion-item-size-padding-y-comfortable) var(--ids-comp-size-accordion-item-size-padding-x-comfortable)',
68
+ gap: 'var(--ids-comp-size-accordion-item-size-gap-comfortable)',
69
+ borderRadius: 'var(--ids-comp-size-accordion-item-size-border-radius-comfortable)',
70
+ },
71
+ '.ids-accordion.ids-accordion-comfortable>.ids-accordion-summary': {
72
+ height: 'var(--ids-comp-size-accordion-summary-size-height-comfortable)',
73
+ padding:
74
+ 'var(--ids-comp-size-accordion-summary-size-padding-y-comfortable) var(--ids-comp-size-accordion-summary-size-padding-x-comfortable)',
75
+ gap: 'var(--ids-comp-size-accordion-summary-size-gap-comfortable)',
76
+ borderRadius: 'var(--ids-comp-size-accordion-summary-size-border-radius-comfortable)',
77
+ borderWidth: 'var(--ids-comp-size-accordion-summary-size-border-width-comfortable)',
78
+ },
79
+ '.ids-accordion.ids-accordion-comfortable>.ids-accordion-summary>.ids-accordion-title': {
80
+ fontFamily: 'var(--ids-comp-size-accordion-summary-typography-font-family-comfortable)',
81
+ fontSize: 'var(--ids-comp-size-accordion-summary-typography-font-size-comfortable)',
82
+ fontWeight: 'var(--ids-comp-size-accordion-summary-typography-font-weight-comfortable)',
83
+ letterSpacing: 'var(--ids-comp-size-accordion-summary-typography-letter-spacing-comfortable)',
84
+ lineHeight: 'var(--ids-comp-size-accordion-summary-typography-line-height-comfortable)',
85
+ },
86
+ '.ids-accordion.ids-accordion-comfortable>.ids-accordion-content': {
87
+ padding:
88
+ 'var(--ids-comp-size-accordion-details-size-padding-y-comfortable) var(--ids-comp-size-accordion-details-size-padding-x-comfortable)',
89
+ gap: 'var(--ids-comp-size-accordion-details-size-gap-comfortable)',
90
+ },
91
+ '.ids-accordion.ids-accordion-spacious': {
92
+ padding: 'var(--ids-comp-size-accordion-item-size-padding-y-spacious) var(--ids-comp-size-accordion-item-size-padding-x-spacious)',
93
+ gap: 'var(--ids-comp-size-accordion-item-size-gap-spacious)',
94
+ borderRadius: 'var(--ids-comp-size-accordion-item-size-border-radius-spacious)',
95
+ },
96
+ '.ids-accordion.ids-accordion-spacious>.ids-accordion-summary': {
97
+ height: 'var(--ids-comp-size-accordion-summary-size-height-spacious)',
98
+ padding:
99
+ 'var(--ids-comp-size-accordion-summary-size-padding-y-spacious) var(--ids-comp-size-accordion-summary-size-padding-x-spacious)',
100
+ gap: 'var(--ids-comp-size-accordion-summary-size-gap-spacious)',
101
+ borderRadius: 'var(--ids-comp-size-accordion-summary-size-border-radius-spacious)',
102
+ borderWidth: 'var(--ids-comp-size-accordion-summary-size-border-width-spacious)',
103
+ },
104
+ '.ids-accordion.ids-accordion-spacious>.ids-accordion-summary>.ids-accordion-title': {
105
+ fontFamily: 'var(--ids-comp-size-accordion-summary-typography-font-family-spacious)',
106
+ fontSize: 'var(--ids-comp-size-accordion-summary-typography-font-size-spacious)',
107
+ fontWeight: 'var(--ids-comp-size-accordion-summary-typography-font-weight-spacious)',
108
+ letterSpacing: 'var(--ids-comp-size-accordion-summary-typography-letter-spacing-spacious)',
109
+ lineHeight: 'var(--ids-comp-size-accordion-summary-typography-line-height-spacious)',
110
+ },
111
+ '.ids-accordion.ids-accordion-spacious>.ids-accordion-content': {
112
+ padding:
113
+ 'var(--ids-comp-size-accordion-details-size-padding-y-spacious) var(--ids-comp-size-accordion-details-size-padding-x-spacious)',
114
+ gap: 'var(--ids-comp-size-accordion-details-size-gap-spacious)',
115
+ },
116
+ '.ids-accordion.ids-accordion-dense': {
117
+ padding: 'var(--ids-comp-size-accordion-item-size-padding-y-dense) var(--ids-comp-size-accordion-item-size-padding-x-dense)',
118
+ gap: 'var(--ids-comp-size-accordion-item-size-gap-dense)',
119
+ borderRadius: 'var(--ids-comp-size-accordion-item-size-border-radius-dense)',
120
+ },
121
+ '.ids-accordion.ids-accordion-dense>.ids-accordion-summary': {
122
+ height: 'var(--ids-comp-size-accordion-summary-size-height-dense)',
123
+ padding: 'var(--ids-comp-size-accordion-summary-size-padding-y-dense) var(--ids-comp-size-accordion-summary-size-padding-x-dense)',
124
+ gap: 'var(--ids-comp-size-accordion-summary-size-gap-dense)',
125
+ borderRadius: 'var(--ids-comp-size-accordion-summary-size-border-radius-dense)',
126
+ borderWidth: 'var(--ids-comp-size-accordion-summary-size-border-width-dense)',
127
+ },
128
+ '.ids-accordion.ids-accordion-dense>.ids-accordion-summary>.ids-accordion-title': {
129
+ fontFamily: 'var(--ids-comp-size-accordion-summary-typography-font-family-dense)',
130
+ fontSize: 'var(--ids-comp-size-accordion-summary-typography-font-size-dense)',
131
+ fontWeight: 'var(--ids-comp-size-accordion-summary-typography-font-weight-dense)',
132
+ letterSpacing: 'var(--ids-comp-size-accordion-summary-typography-letter-spacing-dense)',
133
+ lineHeight: 'var(--ids-comp-size-accordion-summary-typography-line-height-dense)',
134
+ },
135
+ '.ids-accordion.ids-accordion-dense>.ids-accordion-content': {
136
+ padding: 'var(--ids-comp-size-accordion-details-size-padding-y-dense) var(--ids-comp-size-accordion-details-size-padding-x-dense)',
137
+ gap: 'var(--ids-comp-size-accordion-details-size-gap-dense)',
138
+ },
139
+ '.ids-accordion.ids-accordion-text>.ids-accordion-summary': {
140
+ background: 'var(--ids-comp-accordion-summary-text-color-bg-enabled)',
141
+ borderColor: 'var(--ids-comp-accordion-summary-text-color-border-enabled)',
142
+ color: 'var(--ids-comp-accordion-summary-text-color-fg-label-enabled)',
143
+ },
144
+ '.ids-accordion.ids-accordion-text>.ids-accordion-summary:hover': {
145
+ background: 'var(--ids-comp-accordion-summary-text-color-bg-hovered)',
146
+ borderColor: 'var(--ids-comp-accordion-summary-text-color-border-hovered)',
147
+ color: 'var(--ids-comp-accordion-summary-text-color-fg-label-hovered)',
148
+ },
149
+ '.ids-accordion.ids-accordion-text>.ids-accordion-summary:focus': {
150
+ background: 'var(--ids-comp-accordion-summary-text-color-bg-focused)',
151
+ borderColor: 'var(--ids-comp-accordion-summary-text-color-border-focused)',
152
+ color: 'var(--ids-comp-accordion-summary-text-color-fg-label-focused)',
153
+ },
154
+ '.ids-accordion.ids-accordion-text>.ids-accordion-summary:active': {
155
+ background: 'var(--ids-comp-accordion-summary-text-color-bg-pressed)',
156
+ borderColor: 'var(--ids-comp-accordion-summary-text-color-border-pressed)',
157
+ color: 'var(--ids-comp-accordion-summary-text-color-fg-label-pressed)',
158
+ },
159
+ '.ids-accordion.ids-accordion-text.ids-accordion-disabled>.ids-accordion-summary': {
160
+ background: 'var(--ids-comp-accordion-summary-text-color-bg-disabled)',
161
+ borderColor: 'var(--ids-comp-accordion-summary-text-color-border-disabled)',
162
+ color: 'var(--ids-comp-accordion-summary-text-color-fg-label-disabled)',
163
+ },
164
+ '.ids-accordion.ids-accordion-filled>.ids-accordion-summary': {
165
+ background: 'var(--ids-comp-accordion-summary-filled-color-bg-enabled)',
166
+ borderColor: 'var(--ids-comp-accordion-summary-filled-color-border-enabled)',
167
+ color: 'var(--ids-comp-accordion-summary-filled-color-fg-label-enabled)',
168
+ },
169
+ '.ids-accordion.ids-accordion-filled>.ids-accordion-summary:hover': {
170
+ background: 'var(--ids-comp-accordion-summary-filled-color-bg-hovered)',
171
+ borderColor: 'var(--ids-comp-accordion-summary-filled-color-border-hovered)',
172
+ color: 'var(--ids-comp-accordion-summary-filled-color-fg-label-hovered)',
173
+ },
174
+ '.ids-accordion.ids-accordion-filled>.ids-accordion-summary:focus': {
175
+ background: 'var(--ids-comp-accordion-summary-filled-color-bg-focused)',
176
+ borderColor: 'var(--ids-comp-accordion-summary-filled-color-border-focused)',
177
+ color: 'var(--ids-comp-accordion-summary-filled-color-fg-label-focused)',
178
+ },
179
+ '.ids-accordion.ids-accordion-filled>.ids-accordion-summary:active': {
180
+ background: 'var(--ids-comp-accordion-summary-filled-color-bg-pressed)',
181
+ borderColor: 'var(--ids-comp-accordion-summary-filled-color-border-pressed)',
182
+ color: 'var(--ids-comp-accordion-summary-filled-color-fg-label-pressed)',
183
+ },
184
+ '.ids-accordion.ids-accordion-filled.ids-accordion-disabled>.ids-accordion-summary': {
185
+ background: 'var(--ids-comp-accordion-summary-filled-color-bg-disabled)',
186
+ borderColor: 'var(--ids-comp-accordion-summary-filled-color-border-disabled)',
187
+ color: 'var(--ids-comp-accordion-summary-filled-color-fg-label-disabled)',
188
+ },
189
+ };
190
+
191
+ addComponents(cssObj);
192
+ };
193
+ };
package/dist/action-item/action-item.css CHANGED
@@ -10,21 +10,6 @@
10
10
  text-overflow: ellipsis;
11
11
  font-style: normal;
12
12
  }
13
- .ids-action-item.ids-action-item-compact {
14
- font-size: 12px;
15
- line-height: 16px;
16
- font-weight: 500;
17
- }
18
- .ids-action-item.ids-action-item-comfortable {
19
- font-size: 16px;
20
- line-height: 24px;
21
- font-weight: 500;
22
- }
23
- .ids-action-item.ids-action-item-spacious {
24
- font-size: 16px;
25
- line-height: 20px;
26
- font-weight: 600;
27
- }
28
13
  .ids-action-item *[icon-leading],
29
14
  .ids-action-item *[icon-trailing] {
30
15
  gap: 10px;
@@ -37,6 +22,11 @@
37
22
  border-radius: var(--ids-comp-size-action-item-size-border-radius-compact);
38
23
  padding: var(--ids-comp-size-action-item-size-padding-y-compact) var(--ids-comp-size-action-item-size-padding-x-compact);
39
24
  height: var(--ids-comp-size-action-item-size-height-compact);
25
+ font-family: var(--ids-comp-size-action-item-label-typography-font-family-compact);
26
+ font-size: var(--ids-comp-size-action-item-label-typography-font-size-compact);
27
+ font-weight: var(--ids-comp-size-action-item-label-typography-font-weight-compact);
28
+ letter-spacing: var(--ids-comp-size-action-item-label-typography-letter-spacing-compact);
29
+ line-height: var(--ids-comp-size-action-item-label-typography-line-height-compact);
40
30
  }
41
31
  .ids-action-item.ids-action-item-compact *[icon-leading],
42
32
  .ids-action-item.ids-action-item-compact *[icon-trailing] {
@@ -44,28 +34,33 @@
44
34
  height: var(--ids-comp-action-item-size-compact-icon);
45
35
  }
46
36
  .ids-action-item.ids-action-item-compact.ids-action-item-text.ids-action-item-surface {
47
- border: var(--ids-comp-size-action-item-size-border-width-compact, 1px) solid var(--ids-comp-action-item-text-color-border-surface-enabled, rgba(255, 255, 255, 0));
37
+ border: var(--ids-comp-size-action-item-size-border-width-compact) solid var(--ids-comp-action-item-text-color-border-surface-enabled);
48
38
  }
49
39
  .ids-action-item.ids-action-item-compact.ids-action-item-text.ids-action-item-surface:hover {
50
- border: var(--ids-comp-size-action-item-size-border-width-compact, 1px) solid var(--ids-comp-action-item-text-color-border-surface-hovered, rgba(255, 255, 255, 0));
40
+ border: var(--ids-comp-size-action-item-size-border-width-compact) solid var(--ids-comp-action-item-text-color-border-surface-hovered);
51
41
  }
52
42
  .ids-action-item.ids-action-item-compact.ids-action-item-text.ids-action-item-surface:disabled {
53
- border: var(--ids-comp-size-action-item-size-border-width-compact, 1px) solid var(--ids-comp-action-item-text-color-border-surface-disabled, rgba(255, 255, 255, 0));
43
+ border: var(--ids-comp-size-action-item-size-border-width-compact) solid var(--ids-comp-action-item-text-color-border-surface-disabled);
54
44
  }
55
45
  .ids-action-item.ids-action-item-compact.ids-action-item-filled.ids-action-item-surface {
56
- border: var(--ids-comp-size-action-item-size-border-width-compact, 1px) solid var(--ids-comp-action-item-filled-color-border-surface-enabled, rgba(255, 255, 255, 0));
46
+ border: var(--ids-comp-size-action-item-size-border-width-compact) solid var(--ids-comp-action-item-filled-color-border-surface-enabled);
57
47
  }
58
48
  .ids-action-item.ids-action-item-compact.ids-action-item-filled.ids-action-item-surface:hover {
59
- border: var(--ids-comp-size-action-item-size-border-width-compact, 1px) solid var(--ids-comp-action-item-filled-color-border-surface-hovered, rgba(255, 255, 255, 0));
49
+ border: var(--ids-comp-size-action-item-size-border-width-compact) solid var(--ids-comp-action-item-filled-color-border-surface-hovered);
60
50
  }
61
51
  .ids-action-item.ids-action-item-compact.ids-action-item-filled.ids-action-item-surface:disabled {
62
- border: var(--ids-comp-size-action-item-size-border-width-compact, 1px) solid var(--ids-comp-action-item-filled-color-border-surface-disabled, rgba(255, 255, 255, 0));
52
+ border: var(--ids-comp-size-action-item-size-border-width-compact) solid var(--ids-comp-action-item-filled-color-border-surface-disabled);
63
53
  }
64
54
  .ids-action-item.ids-action-item-comfortable {
65
55
  gap: var(--ids-comp-size-action-item-size-gap-comfortable);
66
56
  border-radius: var(--ids-comp-size-action-item-size-border-radius-comfortable);
67
57
  padding: var(--ids-comp-size-action-item-size-padding-y-comfortable) var(--ids-comp-size-action-item-size-padding-x-comfortable);
68
58
  height: var(--ids-comp-size-action-item-size-height-comfortable);
59
+ font-family: var(--ids-comp-size-action-item-label-typography-font-family-comfortable);
60
+ font-size: var(--ids-comp-size-action-item-label-typography-font-size-comfortable);
61
+ font-weight: var(--ids-comp-size-action-item-label-typography-font-weight-comfortable);
62
+ letter-spacing: var(--ids-comp-size-action-item-label-typography-letter-spacing-comfortable);
63
+ line-height: var(--ids-comp-size-action-item-label-typography-line-height-comfortable);
69
64
  }
70
65
  .ids-action-item.ids-action-item-comfortable *[icon-leading],
71
66
  .ids-action-item.ids-action-item-comfortable *[icon-trailing] {
@@ -73,28 +68,33 @@
73
68
  height: var(--ids-comp-action-item-size-comfortable-icon);
74
69
  }
75
70
  .ids-action-item.ids-action-item-comfortable.ids-action-item-text.ids-action-item-surface {
76
- border: var(--ids-comp-size-action-item-size-border-width-comfortable, 1px) solid var(--ids-comp-action-item-text-color-border-surface-enabled, rgba(255, 255, 255, 0));
71
+ border: var(--ids-comp-size-action-item-size-border-width-comfortable) solid var(--ids-comp-action-item-text-color-border-surface-enabled);
77
72
  }
78
73
  .ids-action-item.ids-action-item-comfortable.ids-action-item-text.ids-action-item-surface:hover {
79
- border: var(--ids-comp-size-action-item-size-border-width-comfortable, 1px) solid var(--ids-comp-action-item-text-color-border-surface-hovered, rgba(255, 255, 255, 0));
74
+ border: var(--ids-comp-size-action-item-size-border-width-comfortable) solid var(--ids-comp-action-item-text-color-border-surface-hovered);
80
75
  }
81
76
  .ids-action-item.ids-action-item-comfortable.ids-action-item-text.ids-action-item-surface:disabled {
82
- border: var(--ids-comp-size-action-item-size-border-width-comfortable, 1px) solid var(--ids-comp-action-item-text-color-border-surface-disabled, rgba(255, 255, 255, 0));
77
+ border: var(--ids-comp-size-action-item-size-border-width-comfortable) solid var(--ids-comp-action-item-text-color-border-surface-disabled);
83
78
  }
84
79
  .ids-action-item.ids-action-item-comfortable.ids-action-item-filled.ids-action-item-surface {
85
- border: var(--ids-comp-size-action-item-size-border-width-comfortable, 1px) solid var(--ids-comp-action-item-filled-color-border-surface-enabled, rgba(255, 255, 255, 0));
80
+ border: var(--ids-comp-size-action-item-size-border-width-comfortable) solid var(--ids-comp-action-item-filled-color-border-surface-enabled);
86
81
  }
87
82
  .ids-action-item.ids-action-item-comfortable.ids-action-item-filled.ids-action-item-surface:hover {
88
- border: var(--ids-comp-size-action-item-size-border-width-comfortable, 1px) solid var(--ids-comp-action-item-filled-color-border-surface-hovered, rgba(255, 255, 255, 0));
83
+ border: var(--ids-comp-size-action-item-size-border-width-comfortable) solid var(--ids-comp-action-item-filled-color-border-surface-hovered);
89
84
  }
90
85
  .ids-action-item.ids-action-item-comfortable.ids-action-item-filled.ids-action-item-surface:disabled {
91
- border: var(--ids-comp-size-action-item-size-border-width-comfortable, 1px) solid var(--ids-comp-action-item-filled-color-border-surface-disabled, rgba(255, 255, 255, 0));
86
+ border: var(--ids-comp-size-action-item-size-border-width-comfortable) solid var(--ids-comp-action-item-filled-color-border-surface-disabled);
92
87
  }
93
88
  .ids-action-item.ids-action-item-spacious {
94
89
  gap: var(--ids-comp-size-action-item-size-gap-spacious);
95
90
  border-radius: var(--ids-comp-size-action-item-size-border-radius-spacious);
96
91
  padding: var(--ids-comp-size-action-item-size-padding-y-spacious) var(--ids-comp-size-action-item-size-padding-x-spacious);
97
92
  height: var(--ids-comp-size-action-item-size-height-spacious);
93
+ font-family: var(--ids-comp-size-action-item-label-typography-font-family-spacious);
94
+ font-size: var(--ids-comp-size-action-item-label-typography-font-size-spacious);
95
+ font-weight: var(--ids-comp-size-action-item-label-typography-font-weight-spacious);
96
+ letter-spacing: var(--ids-comp-size-action-item-label-typography-letter-spacing-spacious);
97
+ line-height: var(--ids-comp-size-action-item-label-typography-line-height-spacious);
98
98
  }
99
99
  .ids-action-item.ids-action-item-spacious *[icon-leading],
100
100
  .ids-action-item.ids-action-item-spacious *[icon-trailing] {
@@ -102,22 +102,22 @@
102
102
  height: var(--ids-comp-action-item-size-spacious-icon);
103
103
  }
104
104
  .ids-action-item.ids-action-item-spacious.ids-action-item-text.ids-action-item-surface {
105
- border: var(--ids-comp-size-action-item-size-border-width-spacious, 1px) solid var(--ids-comp-action-item-text-color-border-surface-enabled, rgba(255, 255, 255, 0));
105
+ border: var(--ids-comp-size-action-item-size-border-width-spacious) solid var(--ids-comp-action-item-text-color-border-surface-enabled);
106
106
  }
107
107
  .ids-action-item.ids-action-item-spacious.ids-action-item-text.ids-action-item-surface:hover {
108
- border: var(--ids-comp-size-action-item-size-border-width-spacious, 1px) solid var(--ids-comp-action-item-text-color-border-surface-hovered, rgba(255, 255, 255, 0));
108
+ border: var(--ids-comp-size-action-item-size-border-width-spacious) solid var(--ids-comp-action-item-text-color-border-surface-hovered);
109
109
  }
110
110
  .ids-action-item.ids-action-item-spacious.ids-action-item-text.ids-action-item-surface:disabled {
111
- border: var(--ids-comp-size-action-item-size-border-width-spacious, 1px) solid var(--ids-comp-action-item-text-color-border-surface-disabled, rgba(255, 255, 255, 0));
111
+ border: var(--ids-comp-size-action-item-size-border-width-spacious) solid var(--ids-comp-action-item-text-color-border-surface-disabled);
112
112
  }
113
113
  .ids-action-item.ids-action-item-spacious.ids-action-item-filled.ids-action-item-surface {
114
- border: var(--ids-comp-size-action-item-size-border-width-spacious, 1px) solid var(--ids-comp-action-item-filled-color-border-surface-enabled, rgba(255, 255, 255, 0));
114
+ border: var(--ids-comp-size-action-item-size-border-width-spacious) solid var(--ids-comp-action-item-filled-color-border-surface-enabled);
115
115
  }
116
116
  .ids-action-item.ids-action-item-spacious.ids-action-item-filled.ids-action-item-surface:hover {
117
- border: var(--ids-comp-size-action-item-size-border-width-spacious, 1px) solid var(--ids-comp-action-item-filled-color-border-surface-hovered, rgba(255, 255, 255, 0));
117
+ border: var(--ids-comp-size-action-item-size-border-width-spacious) solid var(--ids-comp-action-item-filled-color-border-surface-hovered);
118
118
  }
119
119
  .ids-action-item.ids-action-item-spacious.ids-action-item-filled.ids-action-item-surface:disabled {
120
- border: var(--ids-comp-size-action-item-size-border-width-spacious, 1px) solid var(--ids-comp-action-item-filled-color-border-surface-disabled, rgba(255, 255, 255, 0));
120
+ border: var(--ids-comp-size-action-item-size-border-width-spacious) solid var(--ids-comp-action-item-filled-color-border-surface-disabled);
121
121
  }
122
122
  .ids-action-item.ids-action-item-text.ids-action-item-surface {
123
123
  color: var(--ids-comp-action-item-text-color-fg-label-surface-enabled);
package/dist/action-item/action-item.min.css CHANGED
@@ -1 +1 @@
1
- .ids-action-item{width:100%;display:inline-flex;flex-shrink:0;align-items:center;justify-content:center}.ids-action-item .ids-action-item-label{overflow:hidden;text-overflow:ellipsis;font-style:normal}.ids-action-item.ids-action-item-compact{font-size:12px;line-height:16px;font-weight:500}.ids-action-item.ids-action-item-comfortable{font-size:16px;line-height:24px;font-weight:500}.ids-action-item.ids-action-item-spacious{font-size:16px;line-height:20px;font-weight:600}.ids-action-item *[icon-leading],.ids-action-item *[icon-trailing]{gap:10px;display:flex;align-items:center;justify-content:center}.ids-action-item.ids-action-item-compact{gap:var(--ids-comp-size-action-item-size-gap-compact);border-radius:var(--ids-comp-size-action-item-size-border-radius-compact);padding:var(--ids-comp-size-action-item-size-padding-y-compact) var(--ids-comp-size-action-item-size-padding-x-compact);height:var(--ids-comp-size-action-item-size-height-compact)}.ids-action-item.ids-action-item-compact *[icon-leading],.ids-action-item.ids-action-item-compact *[icon-trailing]{width:var(--ids-comp-action-item-size-compact-icon);height:var(--ids-comp-action-item-size-compact-icon)}.ids-action-item.ids-action-item-compact.ids-action-item-text.ids-action-item-surface{border:var(--ids-comp-size-action-item-size-border-width-compact, 1px) solid var(--ids-comp-action-item-text-color-border-surface-enabled, rgba(255, 255, 255, 0))}.ids-action-item.ids-action-item-compact.ids-action-item-text.ids-action-item-surface:hover{border:var(--ids-comp-size-action-item-size-border-width-compact, 1px) solid var(--ids-comp-action-item-text-color-border-surface-hovered, rgba(255, 255, 255, 0))}.ids-action-item.ids-action-item-compact.ids-action-item-text.ids-action-item-surface:disabled{border:var(--ids-comp-size-action-item-size-border-width-compact, 1px) solid var(--ids-comp-action-item-text-color-border-surface-disabled, rgba(255, 255, 255, 0))}.ids-action-item.ids-action-item-compact.ids-action-item-filled.ids-action-item-surface{border:var(--ids-comp-size-action-item-size-border-width-compact, 1px) solid var(--ids-comp-action-item-filled-color-border-surface-enabled, rgba(255, 255, 255, 0))}.ids-action-item.ids-action-item-compact.ids-action-item-filled.ids-action-item-surface:hover{border:var(--ids-comp-size-action-item-size-border-width-compact, 1px) solid var(--ids-comp-action-item-filled-color-border-surface-hovered, rgba(255, 255, 255, 0))}.ids-action-item.ids-action-item-compact.ids-action-item-filled.ids-action-item-surface:disabled{border:var(--ids-comp-size-action-item-size-border-width-compact, 1px) solid var(--ids-comp-action-item-filled-color-border-surface-disabled, rgba(255, 255, 255, 0))}.ids-action-item.ids-action-item-comfortable{gap:var(--ids-comp-size-action-item-size-gap-comfortable);border-radius:var(--ids-comp-size-action-item-size-border-radius-comfortable);padding:var(--ids-comp-size-action-item-size-padding-y-comfortable) var(--ids-comp-size-action-item-size-padding-x-comfortable);height:var(--ids-comp-size-action-item-size-height-comfortable)}.ids-action-item.ids-action-item-comfortable *[icon-leading],.ids-action-item.ids-action-item-comfortable *[icon-trailing]{width:var(--ids-comp-action-item-size-comfortable-icon);height:var(--ids-comp-action-item-size-comfortable-icon)}.ids-action-item.ids-action-item-comfortable.ids-action-item-text.ids-action-item-surface{border:var(--ids-comp-size-action-item-size-border-width-comfortable, 1px) solid var(--ids-comp-action-item-text-color-border-surface-enabled, rgba(255, 255, 255, 0))}.ids-action-item.ids-action-item-comfortable.ids-action-item-text.ids-action-item-surface:hover{border:var(--ids-comp-size-action-item-size-border-width-comfortable, 1px) solid var(--ids-comp-action-item-text-color-border-surface-hovered, rgba(255, 255, 255, 0))}.ids-action-item.ids-action-item-comfortable.ids-action-item-text.ids-action-item-surface:disabled{border:var(--ids-comp-size-action-item-size-border-width-comfortable, 1px) solid var(--ids-comp-action-item-text-color-border-surface-disabled, rgba(255, 255, 255, 0))}.ids-action-item.ids-action-item-comfortable.ids-action-item-filled.ids-action-item-surface{border:var(--ids-comp-size-action-item-size-border-width-comfortable, 1px) solid var(--ids-comp-action-item-filled-color-border-surface-enabled, rgba(255, 255, 255, 0))}.ids-action-item.ids-action-item-comfortable.ids-action-item-filled.ids-action-item-surface:hover{border:var(--ids-comp-size-action-item-size-border-width-comfortable, 1px) solid var(--ids-comp-action-item-filled-color-border-surface-hovered, rgba(255, 255, 255, 0))}.ids-action-item.ids-action-item-comfortable.ids-action-item-filled.ids-action-item-surface:disabled{border:var(--ids-comp-size-action-item-size-border-width-comfortable, 1px) solid var(--ids-comp-action-item-filled-color-border-surface-disabled, rgba(255, 255, 255, 0))}.ids-action-item.ids-action-item-spacious{gap:var(--ids-comp-size-action-item-size-gap-spacious);border-radius:var(--ids-comp-size-action-item-size-border-radius-spacious);padding:var(--ids-comp-size-action-item-size-padding-y-spacious) var(--ids-comp-size-action-item-size-padding-x-spacious);height:var(--ids-comp-size-action-item-size-height-spacious)}.ids-action-item.ids-action-item-spacious *[icon-leading],.ids-action-item.ids-action-item-spacious *[icon-trailing]{width:var(--ids-comp-action-item-size-spacious-icon);height:var(--ids-comp-action-item-size-spacious-icon)}.ids-action-item.ids-action-item-spacious.ids-action-item-text.ids-action-item-surface{border:var(--ids-comp-size-action-item-size-border-width-spacious, 1px) solid var(--ids-comp-action-item-text-color-border-surface-enabled, rgba(255, 255, 255, 0))}.ids-action-item.ids-action-item-spacious.ids-action-item-text.ids-action-item-surface:hover{border:var(--ids-comp-size-action-item-size-border-width-spacious, 1px) solid var(--ids-comp-action-item-text-color-border-surface-hovered, rgba(255, 255, 255, 0))}.ids-action-item.ids-action-item-spacious.ids-action-item-text.ids-action-item-surface:disabled{border:var(--ids-comp-size-action-item-size-border-width-spacious, 1px) solid var(--ids-comp-action-item-text-color-border-surface-disabled, rgba(255, 255, 255, 0))}.ids-action-item.ids-action-item-spacious.ids-action-item-filled.ids-action-item-surface{border:var(--ids-comp-size-action-item-size-border-width-spacious, 1px) solid var(--ids-comp-action-item-filled-color-border-surface-enabled, rgba(255, 255, 255, 0))}.ids-action-item.ids-action-item-spacious.ids-action-item-filled.ids-action-item-surface:hover{border:var(--ids-comp-size-action-item-size-border-width-spacious, 1px) solid var(--ids-comp-action-item-filled-color-border-surface-hovered, rgba(255, 255, 255, 0))}.ids-action-item.ids-action-item-spacious.ids-action-item-filled.ids-action-item-surface:disabled{border:var(--ids-comp-size-action-item-size-border-width-spacious, 1px) solid var(--ids-comp-action-item-filled-color-border-surface-disabled, rgba(255, 255, 255, 0))}.ids-action-item.ids-action-item-text.ids-action-item-surface{color:var(--ids-comp-action-item-text-color-fg-label-surface-enabled);background:var(--ids-comp-action-item-text-color-bg-surface-enabled)}.ids-action-item.ids-action-item-text.ids-action-item-surface.ids-action-item-active{color:var(--ids-comp-action-item-text-color-fg-label-surface-active);background:var(--ids-comp-action-item-text-color-bg-surface-active)}.ids-action-item.ids-action-item-text.ids-action-item-surface:hover{color:var(--ids-comp-action-item-text-color-fg-label-surface-hovered);background:var(--ids-comp-action-item-text-color-bg-surface-hovered)}.ids-action-item.ids-action-item-text.ids-action-item-surface:focus{color:var(--ids-comp-action-item-text-color-fg-label-surface-focused);background:var(--ids-comp-action-item-text-color-bg-surface-focused)}.ids-action-item.ids-action-item-text.ids-action-item-surface:active{background:var(--ids-comp-action-item-text-color-bg-surface-pressed)}.ids-action-item.ids-action-item-text.ids-action-item-surface:disabled{color:var(--ids-comp-action-item-text-color-fg-label-surface-disabled);background:var(--ids-comp-action-item-text-color-bg-surface-disabled)}.ids-action-item.ids-action-item-filled.ids-action-item-surface{color:var(--ids-comp-action-item-filled-color-fg-label-surface-enabled);background:var(--ids-comp-action-item-filled-color-bg-surface-enabled)}.ids-action-item.ids-action-item-filled.ids-action-item-surface.ids-action-item-active{color:var(--ids-comp-action-item-filled-color-fg-label-surface-active);background:var(--ids-comp-action-item-filled-color-bg-surface-active)}.ids-action-item.ids-action-item-filled.ids-action-item-surface:hover{color:var(--ids-comp-action-item-filled-color-fg-label-surface-hovered);background:var(--ids-comp-action-item-filled-color-bg-surface-hovered)}.ids-action-item.ids-action-item-filled.ids-action-item-surface:focus{color:var(--ids-comp-action-item-filled-color-fg-label-surface-focused);background:var(--ids-comp-action-item-filled-color-bg-surface-focused)}.ids-action-item.ids-action-item-filled.ids-action-item-surface:active{background:var(--ids-comp-action-item-filled-color-bg-surface-pressed)}.ids-action-item.ids-action-item-filled.ids-action-item-surface:disabled{color:var(--ids-comp-action-item-filled-color-fg-label-surface-disabled);background:var(--ids-comp-action-item-filled-color-bg-surface-disabled)}
1
+ .ids-action-item{width:100%;display:inline-flex;flex-shrink:0;align-items:center;justify-content:center}.ids-action-item .ids-action-item-label{overflow:hidden;text-overflow:ellipsis;font-style:normal}.ids-action-item *[icon-leading],.ids-action-item *[icon-trailing]{gap:10px;display:flex;align-items:center;justify-content:center}.ids-action-item.ids-action-item-compact{gap:var(--ids-comp-size-action-item-size-gap-compact);border-radius:var(--ids-comp-size-action-item-size-border-radius-compact);padding:var(--ids-comp-size-action-item-size-padding-y-compact) var(--ids-comp-size-action-item-size-padding-x-compact);height:var(--ids-comp-size-action-item-size-height-compact);font-family:var(--ids-comp-size-action-item-label-typography-font-family-compact);font-size:var(--ids-comp-size-action-item-label-typography-font-size-compact);font-weight:var(--ids-comp-size-action-item-label-typography-font-weight-compact);letter-spacing:var(--ids-comp-size-action-item-label-typography-letter-spacing-compact);line-height:var(--ids-comp-size-action-item-label-typography-line-height-compact)}.ids-action-item.ids-action-item-compact *[icon-leading],.ids-action-item.ids-action-item-compact *[icon-trailing]{width:var(--ids-comp-action-item-size-compact-icon);height:var(--ids-comp-action-item-size-compact-icon)}.ids-action-item.ids-action-item-compact.ids-action-item-text.ids-action-item-surface{border:var(--ids-comp-size-action-item-size-border-width-compact) solid var(--ids-comp-action-item-text-color-border-surface-enabled)}.ids-action-item.ids-action-item-compact.ids-action-item-text.ids-action-item-surface:hover{border:var(--ids-comp-size-action-item-size-border-width-compact) solid var(--ids-comp-action-item-text-color-border-surface-hovered)}.ids-action-item.ids-action-item-compact.ids-action-item-text.ids-action-item-surface:disabled{border:var(--ids-comp-size-action-item-size-border-width-compact) solid var(--ids-comp-action-item-text-color-border-surface-disabled)}.ids-action-item.ids-action-item-compact.ids-action-item-filled.ids-action-item-surface{border:var(--ids-comp-size-action-item-size-border-width-compact) solid var(--ids-comp-action-item-filled-color-border-surface-enabled)}.ids-action-item.ids-action-item-compact.ids-action-item-filled.ids-action-item-surface:hover{border:var(--ids-comp-size-action-item-size-border-width-compact) solid var(--ids-comp-action-item-filled-color-border-surface-hovered)}.ids-action-item.ids-action-item-compact.ids-action-item-filled.ids-action-item-surface:disabled{border:var(--ids-comp-size-action-item-size-border-width-compact) solid var(--ids-comp-action-item-filled-color-border-surface-disabled)}.ids-action-item.ids-action-item-comfortable{gap:var(--ids-comp-size-action-item-size-gap-comfortable);border-radius:var(--ids-comp-size-action-item-size-border-radius-comfortable);padding:var(--ids-comp-size-action-item-size-padding-y-comfortable) var(--ids-comp-size-action-item-size-padding-x-comfortable);height:var(--ids-comp-size-action-item-size-height-comfortable);font-family:var(--ids-comp-size-action-item-label-typography-font-family-comfortable);font-size:var(--ids-comp-size-action-item-label-typography-font-size-comfortable);font-weight:var(--ids-comp-size-action-item-label-typography-font-weight-comfortable);letter-spacing:var(--ids-comp-size-action-item-label-typography-letter-spacing-comfortable);line-height:var(--ids-comp-size-action-item-label-typography-line-height-comfortable)}.ids-action-item.ids-action-item-comfortable *[icon-leading],.ids-action-item.ids-action-item-comfortable *[icon-trailing]{width:var(--ids-comp-action-item-size-comfortable-icon);height:var(--ids-comp-action-item-size-comfortable-icon)}.ids-action-item.ids-action-item-comfortable.ids-action-item-text.ids-action-item-surface{border:var(--ids-comp-size-action-item-size-border-width-comfortable) solid var(--ids-comp-action-item-text-color-border-surface-enabled)}.ids-action-item.ids-action-item-comfortable.ids-action-item-text.ids-action-item-surface:hover{border:var(--ids-comp-size-action-item-size-border-width-comfortable) solid var(--ids-comp-action-item-text-color-border-surface-hovered)}.ids-action-item.ids-action-item-comfortable.ids-action-item-text.ids-action-item-surface:disabled{border:var(--ids-comp-size-action-item-size-border-width-comfortable) solid var(--ids-comp-action-item-text-color-border-surface-disabled)}.ids-action-item.ids-action-item-comfortable.ids-action-item-filled.ids-action-item-surface{border:var(--ids-comp-size-action-item-size-border-width-comfortable) solid var(--ids-comp-action-item-filled-color-border-surface-enabled)}.ids-action-item.ids-action-item-comfortable.ids-action-item-filled.ids-action-item-surface:hover{border:var(--ids-comp-size-action-item-size-border-width-comfortable) solid var(--ids-comp-action-item-filled-color-border-surface-hovered)}.ids-action-item.ids-action-item-comfortable.ids-action-item-filled.ids-action-item-surface:disabled{border:var(--ids-comp-size-action-item-size-border-width-comfortable) solid var(--ids-comp-action-item-filled-color-border-surface-disabled)}.ids-action-item.ids-action-item-spacious{gap:var(--ids-comp-size-action-item-size-gap-spacious);border-radius:var(--ids-comp-size-action-item-size-border-radius-spacious);padding:var(--ids-comp-size-action-item-size-padding-y-spacious) var(--ids-comp-size-action-item-size-padding-x-spacious);height:var(--ids-comp-size-action-item-size-height-spacious);font-family:var(--ids-comp-size-action-item-label-typography-font-family-spacious);font-size:var(--ids-comp-size-action-item-label-typography-font-size-spacious);font-weight:var(--ids-comp-size-action-item-label-typography-font-weight-spacious);letter-spacing:var(--ids-comp-size-action-item-label-typography-letter-spacing-spacious);line-height:var(--ids-comp-size-action-item-label-typography-line-height-spacious)}.ids-action-item.ids-action-item-spacious *[icon-leading],.ids-action-item.ids-action-item-spacious *[icon-trailing]{width:var(--ids-comp-action-item-size-spacious-icon);height:var(--ids-comp-action-item-size-spacious-icon)}.ids-action-item.ids-action-item-spacious.ids-action-item-text.ids-action-item-surface{border:var(--ids-comp-size-action-item-size-border-width-spacious) solid var(--ids-comp-action-item-text-color-border-surface-enabled)}.ids-action-item.ids-action-item-spacious.ids-action-item-text.ids-action-item-surface:hover{border:var(--ids-comp-size-action-item-size-border-width-spacious) solid var(--ids-comp-action-item-text-color-border-surface-hovered)}.ids-action-item.ids-action-item-spacious.ids-action-item-text.ids-action-item-surface:disabled{border:var(--ids-comp-size-action-item-size-border-width-spacious) solid var(--ids-comp-action-item-text-color-border-surface-disabled)}.ids-action-item.ids-action-item-spacious.ids-action-item-filled.ids-action-item-surface{border:var(--ids-comp-size-action-item-size-border-width-spacious) solid var(--ids-comp-action-item-filled-color-border-surface-enabled)}.ids-action-item.ids-action-item-spacious.ids-action-item-filled.ids-action-item-surface:hover{border:var(--ids-comp-size-action-item-size-border-width-spacious) solid var(--ids-comp-action-item-filled-color-border-surface-hovered)}.ids-action-item.ids-action-item-spacious.ids-action-item-filled.ids-action-item-surface:disabled{border:var(--ids-comp-size-action-item-size-border-width-spacious) solid var(--ids-comp-action-item-filled-color-border-surface-disabled)}.ids-action-item.ids-action-item-text.ids-action-item-surface{color:var(--ids-comp-action-item-text-color-fg-label-surface-enabled);background:var(--ids-comp-action-item-text-color-bg-surface-enabled)}.ids-action-item.ids-action-item-text.ids-action-item-surface.ids-action-item-active{color:var(--ids-comp-action-item-text-color-fg-label-surface-active);background:var(--ids-comp-action-item-text-color-bg-surface-active)}.ids-action-item.ids-action-item-text.ids-action-item-surface:hover{color:var(--ids-comp-action-item-text-color-fg-label-surface-hovered);background:var(--ids-comp-action-item-text-color-bg-surface-hovered)}.ids-action-item.ids-action-item-text.ids-action-item-surface:focus{color:var(--ids-comp-action-item-text-color-fg-label-surface-focused);background:var(--ids-comp-action-item-text-color-bg-surface-focused)}.ids-action-item.ids-action-item-text.ids-action-item-surface:active{background:var(--ids-comp-action-item-text-color-bg-surface-pressed)}.ids-action-item.ids-action-item-text.ids-action-item-surface:disabled{color:var(--ids-comp-action-item-text-color-fg-label-surface-disabled);background:var(--ids-comp-action-item-text-color-bg-surface-disabled)}.ids-action-item.ids-action-item-filled.ids-action-item-surface{color:var(--ids-comp-action-item-filled-color-fg-label-surface-enabled);background:var(--ids-comp-action-item-filled-color-bg-surface-enabled)}.ids-action-item.ids-action-item-filled.ids-action-item-surface.ids-action-item-active{color:var(--ids-comp-action-item-filled-color-fg-label-surface-active);background:var(--ids-comp-action-item-filled-color-bg-surface-active)}.ids-action-item.ids-action-item-filled.ids-action-item-surface:hover{color:var(--ids-comp-action-item-filled-color-fg-label-surface-hovered);background:var(--ids-comp-action-item-filled-color-bg-surface-hovered)}.ids-action-item.ids-action-item-filled.ids-action-item-surface:focus{color:var(--ids-comp-action-item-filled-color-fg-label-surface-focused);background:var(--ids-comp-action-item-filled-color-bg-surface-focused)}.ids-action-item.ids-action-item-filled.ids-action-item-surface:active{background:var(--ids-comp-action-item-filled-color-bg-surface-pressed)}.ids-action-item.ids-action-item-filled.ids-action-item-surface:disabled{color:var(--ids-comp-action-item-filled-color-fg-label-surface-disabled);background:var(--ids-comp-action-item-filled-color-bg-surface-disabled)}