@i-cell/ids-styles 0.0.2 → 0.0.4

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 (46) hide show
  1. package/dist/accordion/accordion.css +69 -68
  2. package/dist/accordion/accordion.min.css +1 -1
  3. package/dist/accordion/accordion.plugin.js +69 -73
  4. package/dist/action-item/action-item.css +67 -55
  5. package/dist/action-item/action-item.min.css +1 -1
  6. package/dist/action-item/action-item.plugin.js +67 -73
  7. package/dist/action-panel/action-panel.css +29 -28
  8. package/dist/action-panel/action-panel.min.css +1 -1
  9. package/dist/action-panel/action-panel.plugin.js +35 -39
  10. package/dist/avatar/avatar.css +77 -154
  11. package/dist/avatar/avatar.min.css +1 -1
  12. package/dist/avatar/avatar.plugin.js +77 -148
  13. package/dist/button/button.css +134 -178
  14. package/dist/button/button.min.css +1 -1
  15. package/dist/button/button.plugin.js +141 -179
  16. package/dist/card/card.css +137 -184
  17. package/dist/card/card.min.css +1 -1
  18. package/dist/card/card.plugin.js +137 -189
  19. package/dist/checkbox/checkbox.css +554 -0
  20. package/dist/checkbox/checkbox.min.css +1 -0
  21. package/dist/checkbox/checkbox.plugin.js +539 -0
  22. package/dist/components.css +1879 -1326
  23. package/dist/components.min.css +1 -1
  24. package/dist/components.plugin.js +1832 -1374
  25. package/dist/dialog/dialog.css +99 -95
  26. package/dist/dialog/dialog.min.css +1 -1
  27. package/dist/dialog/dialog.plugin.js +103 -102
  28. package/dist/divider/divider.css +21 -23
  29. package/dist/divider/divider.min.css +1 -1
  30. package/dist/divider/divider.plugin.js +22 -30
  31. package/dist/form-elements/message/message.css +165 -0
  32. package/dist/form-elements/message/message.min.css +1 -0
  33. package/dist/form-elements/message/message.plugin.js +116 -0
  34. package/dist/form-elements/required-marker/required-marker.css +6 -0
  35. package/dist/form-elements/required-marker/required-marker.min.css +1 -0
  36. package/dist/form-elements/required-marker/required-marker.plugin.js +15 -0
  37. package/dist/icon-button/icon-button.css +101 -124
  38. package/dist/icon-button/icon-button.min.css +1 -1
  39. package/dist/icon-button/icon-button.plugin.js +108 -125
  40. package/dist/paginator/paginator.css +312 -0
  41. package/dist/paginator/paginator.min.css +1 -0
  42. package/dist/paginator/paginator.plugin.js +330 -0
  43. package/dist/tag/tag.css +104 -417
  44. package/dist/tag/tag.min.css +1 -1
  45. package/dist/tag/tag.plugin.js +111 -418
  46. package/package.json +6 -4
package/dist/paginator/paginator.plugin.js ADDED
@@ -0,0 +1,330 @@
1
+ // Tailwind CSS plugin for the paginator component in the i-Cell Design System
2
+ module.exports = function PaginatorPlugin() {
3
+ return function ({ addComponents }) {
4
+ const cssObj = {
5
+ '.ids-paginator': { display: 'inline-flex' },
6
+ '.ids-paginator .ids-paginator__navigation-container': {
7
+ display: 'flex',
8
+ flexDirection: 'row',
9
+ flexWrap: 'nowrap',
10
+ alignItems: 'center',
11
+ justifyContent: 'flex-start',
12
+ width: '100%',
13
+ },
14
+ '.ids-paginator .ids-paginator__navigation-container .ids-paginator__page-button-container': {
15
+ display: 'flex',
16
+ alignItems: 'center',
17
+ order: 2,
18
+ },
19
+ '.ids-paginator .ids-paginator__navigation-container .ids-paginator__page-button-container .ids-paginator__page-button-truncation': {
20
+ display: 'flex',
21
+ alignItems: 'center',
22
+ justifyContent: 'center',
23
+ },
24
+ '.ids-paginator .ids-paginator__navigation-container .ids-paginator__page-button': {
25
+ display: 'flex',
26
+ justifyContent: 'center',
27
+ alignItems: 'center',
28
+ fontStyle: 'normal',
29
+ },
30
+ '.ids-paginator .ids-paginator__navigation-container .ids-paginator__page-button:focus': {
31
+ outlineWidth: 'var(--ids-comp-paginator-page-links-focused-outline-size-outline)',
32
+ outlineStyle: 'solid',
33
+ },
34
+ '.ids-paginator .ids-paginator__navigation-container .ids-paginator__page-button-arrow.first,.ids-paginator .ids-paginator__navigation-container .ids-paginator__page-button-arrow.previous':
35
+ { order: 1 },
36
+ '.ids-paginator .ids-paginator__navigation-container .ids-paginator__page-button-arrow.next,.ids-paginator .ids-paginator__navigation-container .ids-paginator__page-button-arrow.last':
37
+ { order: 3 },
38
+ '.ids-paginator .ids-paginator__navigation-container .ids-paginator__help-text': { order: 4 },
39
+ '.ids-paginator .ids-paginator__help-text': {
40
+ marginLeft: 'auto',
41
+ display: 'flex',
42
+ justifyContent: 'center',
43
+ alignItems: 'center',
44
+ whiteSpace: 'nowrap',
45
+ },
46
+ '.ids-paginator.ids-paginator-compact .ids-paginator__navigation-container': {
47
+ gap: 'var(--ids-comp-paginator-size-gap-comfortable)',
48
+ },
49
+ '.ids-paginator.ids-paginator-compact .ids-paginator__navigation-container .ids-paginator__page-button': {
50
+ height: 'var(--ids-comp-paginator-page-links-size-height-compact)',
51
+ minWidth: 'var(--ids-comp-paginator-page-links-size-min-width-compact)',
52
+ padding: 'var(--ids-comp-paginator-page-links-size-padding-y-compact) var(--ids-comp-paginator-page-links-size-padding-x-compact)',
53
+ fontFamily: 'var(--ids-comp-paginator-page-links-label-typography-font-family-compact)',
54
+ fontSize: 'var(--ids-comp-paginator-page-links-label-typography-font-size-compact)',
55
+ fontWeight: 'var(--ids-comp-paginator-page-links-label-typography-font-weight-compact)',
56
+ letterSpacing: 'var(--ids-comp-paginator-page-links-label-typography-letter-spacing-compact)',
57
+ lineHeight: 'var(--ids-comp-paginator-page-links-label-typography-line-height-compact)',
58
+ borderRadius: 'var(--ids-comp-paginator-page-links-page-link-size-border-radius-compact)',
59
+ },
60
+ '.ids-paginator.ids-paginator-compact .ids-paginator__navigation-container .ids-paginator__page-button-truncation': {
61
+ height: 'var(--ids-comp-paginator-page-links-size-height-compact)',
62
+ width: 'var(--ids-comp-paginator-page-links-size-min-width-compact)',
63
+ },
64
+ '.ids-paginator.ids-paginator-compact .ids-paginator__help-text': {
65
+ fontFamily: 'var(--ids-comp-paginator-help-text-label-typography-font-family-compact)',
66
+ fontSize: 'var(--ids-comp-paginator-help-text-label-typography-font-size-compact)',
67
+ fontWeight: 'var(--ids-comp-paginator-help-text-label-typography-font-weight-compact)',
68
+ letterSpacing: 'var(--ids-comp-paginator-help-text-label-typography-letter-spacing-compact)',
69
+ lineHeight: 'var(--ids-comp-paginator-help-text-label-typography-line-height-compact)',
70
+ borderRadius: 'var(--ids-comp-paginator-help-text-size-border-radius-compact)',
71
+ height: 'var(--ids-comp-paginator-help-text-size-height-compact)',
72
+ padding: 'var(--ids-comp-paginator-help-text-size-padding-y-compact)',
73
+ },
74
+ '.ids-paginator.ids-paginator-comfortable .ids-paginator__navigation-container': {
75
+ gap: 'var(--ids-comp-paginator-size-gap-comfortable)',
76
+ },
77
+ '.ids-paginator.ids-paginator-comfortable .ids-paginator__navigation-container .ids-paginator__page-button': {
78
+ height: 'var(--ids-comp-paginator-page-links-size-height-comfortable)',
79
+ minWidth: 'var(--ids-comp-paginator-page-links-size-min-width-comfortable)',
80
+ padding:
81
+ 'var(--ids-comp-paginator-page-links-size-padding-y-comfortable) var(--ids-comp-paginator-page-links-size-padding-x-comfortable)',
82
+ fontFamily: 'var(--ids-comp-paginator-page-links-label-typography-font-family-comfortable)',
83
+ fontSize: 'var(--ids-comp-paginator-page-links-label-typography-font-size-comfortable)',
84
+ fontWeight: 'var(--ids-comp-paginator-page-links-label-typography-font-weight-comfortable)',
85
+ letterSpacing: 'var(--ids-comp-paginator-page-links-label-typography-letter-spacing-comfortable)',
86
+ lineHeight: 'var(--ids-comp-paginator-page-links-label-typography-line-height-comfortable)',
87
+ borderRadius: 'var(--ids-comp-paginator-page-links-page-link-size-border-radius-comfortable)',
88
+ },
89
+ '.ids-paginator.ids-paginator-comfortable .ids-paginator__navigation-container .ids-paginator__page-button-truncation': {
90
+ height: 'var(--ids-comp-paginator-page-links-size-height-comfortable)',
91
+ width: 'var(--ids-comp-paginator-page-links-size-min-width-comfortable)',
92
+ },
93
+ '.ids-paginator.ids-paginator-comfortable .ids-paginator__help-text': {
94
+ fontFamily: 'var(--ids-comp-paginator-help-text-label-typography-font-family-comfortable)',
95
+ fontSize: 'var(--ids-comp-paginator-help-text-label-typography-font-size-comfortable)',
96
+ fontWeight: 'var(--ids-comp-paginator-help-text-label-typography-font-weight-comfortable)',
97
+ letterSpacing: 'var(--ids-comp-paginator-help-text-label-typography-letter-spacing-comfortable)',
98
+ lineHeight: 'var(--ids-comp-paginator-help-text-label-typography-line-height-comfortable)',
99
+ borderRadius: 'var(--ids-comp-paginator-help-text-size-border-radius-comfortable)',
100
+ height: 'var(--ids-comp-paginator-help-text-size-height-comfortable)',
101
+ padding: 'var(--ids-comp-paginator-help-text-size-padding-y-comfortable)',
102
+ },
103
+ '.ids-paginator.ids-paginator-spacious .ids-paginator__navigation-container': {
104
+ gap: 'var(--ids-comp-paginator-size-gap-comfortable)',
105
+ },
106
+ '.ids-paginator.ids-paginator-spacious .ids-paginator__navigation-container .ids-paginator__page-button': {
107
+ height: 'var(--ids-comp-paginator-page-links-size-height-spacious)',
108
+ minWidth: 'var(--ids-comp-paginator-page-links-size-min-width-spacious)',
109
+ padding:
110
+ 'var(--ids-comp-paginator-page-links-size-padding-y-spacious) var(--ids-comp-paginator-page-links-size-padding-x-spacious)',
111
+ fontFamily: 'var(--ids-comp-paginator-page-links-label-typography-font-family-spacious)',
112
+ fontSize: 'var(--ids-comp-paginator-page-links-label-typography-font-size-spacious)',
113
+ fontWeight: 'var(--ids-comp-paginator-page-links-label-typography-font-weight-spacious)',
114
+ letterSpacing: 'var(--ids-comp-paginator-page-links-label-typography-letter-spacing-spacious)',
115
+ lineHeight: 'var(--ids-comp-paginator-page-links-label-typography-line-height-spacious)',
116
+ borderRadius: 'var(--ids-comp-paginator-page-links-page-link-size-border-radius-spacious)',
117
+ },
118
+ '.ids-paginator.ids-paginator-spacious .ids-paginator__navigation-container .ids-paginator__page-button-truncation': {
119
+ height: 'var(--ids-comp-paginator-page-links-size-height-spacious)',
120
+ width: 'var(--ids-comp-paginator-page-links-size-min-width-spacious)',
121
+ },
122
+ '.ids-paginator.ids-paginator-spacious .ids-paginator__help-text': {
123
+ fontFamily: 'var(--ids-comp-paginator-help-text-label-typography-font-family-spacious)',
124
+ fontSize: 'var(--ids-comp-paginator-help-text-label-typography-font-size-spacious)',
125
+ fontWeight: 'var(--ids-comp-paginator-help-text-label-typography-font-weight-spacious)',
126
+ letterSpacing: 'var(--ids-comp-paginator-help-text-label-typography-letter-spacing-spacious)',
127
+ lineHeight: 'var(--ids-comp-paginator-help-text-label-typography-line-height-spacious)',
128
+ borderRadius: 'var(--ids-comp-paginator-help-text-size-border-radius-spacious)',
129
+ height: 'var(--ids-comp-paginator-help-text-size-height-spacious)',
130
+ padding: 'var(--ids-comp-paginator-help-text-size-padding-y-spacious)',
131
+ },
132
+ '.ids-paginator.ids-paginator-dense .ids-paginator__navigation-container': { gap: 'var(--ids-comp-paginator-size-gap-comfortable)' },
133
+ '.ids-paginator.ids-paginator-dense .ids-paginator__navigation-container .ids-paginator__page-button': {
134
+ height: 'var(--ids-comp-paginator-page-links-size-height-dense)',
135
+ minWidth: 'var(--ids-comp-paginator-page-links-size-min-width-dense)',
136
+ padding: 'var(--ids-comp-paginator-page-links-size-padding-y-dense) var(--ids-comp-paginator-page-links-size-padding-x-dense)',
137
+ fontFamily: 'var(--ids-comp-paginator-page-links-label-typography-font-family-dense)',
138
+ fontSize: 'var(--ids-comp-paginator-page-links-label-typography-font-size-dense)',
139
+ fontWeight: 'var(--ids-comp-paginator-page-links-label-typography-font-weight-dense)',
140
+ letterSpacing: 'var(--ids-comp-paginator-page-links-label-typography-letter-spacing-dense)',
141
+ lineHeight: 'var(--ids-comp-paginator-page-links-label-typography-line-height-dense)',
142
+ borderRadius: 'var(--ids-comp-paginator-page-links-page-link-size-border-radius-dense)',
143
+ },
144
+ '.ids-paginator.ids-paginator-dense .ids-paginator__navigation-container .ids-paginator__page-button-truncation': {
145
+ height: 'var(--ids-comp-paginator-page-links-size-height-dense)',
146
+ width: 'var(--ids-comp-paginator-page-links-size-min-width-dense)',
147
+ },
148
+ '.ids-paginator.ids-paginator-dense .ids-paginator__help-text': {
149
+ fontFamily: 'var(--ids-comp-paginator-help-text-label-typography-font-family-dense)',
150
+ fontSize: 'var(--ids-comp-paginator-help-text-label-typography-font-size-dense)',
151
+ fontWeight: 'var(--ids-comp-paginator-help-text-label-typography-font-weight-dense)',
152
+ letterSpacing: 'var(--ids-comp-paginator-help-text-label-typography-letter-spacing-dense)',
153
+ lineHeight: 'var(--ids-comp-paginator-help-text-label-typography-line-height-dense)',
154
+ borderRadius: 'var(--ids-comp-paginator-help-text-size-border-radius-dense)',
155
+ height: 'var(--ids-comp-paginator-help-text-size-height-dense)',
156
+ padding: 'var(--ids-comp-paginator-help-text-size-padding-y-dense)',
157
+ },
158
+ '.ids-paginator.ids-paginator-primary .ids-paginator__page-button:focus': {
159
+ outlineColor: 'var(--ids-comp-paginator-page-links-focused-outline-color-dark-focused)',
160
+ },
161
+ '.ids-paginator.ids-paginator-primary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain':
162
+ {
163
+ background: 'var(--ids-comp-paginator-page-links-plain-color-bg-primary-default)',
164
+ color: 'var(--ids-comp-paginator-page-links-plain-color-fg-label-primary-default)',
165
+ },
166
+ '.ids-paginator.ids-paginator-primary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.active:not(:disabled)':
167
+ {
168
+ background: 'var(--ids-comp-paginator-page-links-plain-color-bg-primary-active)',
169
+ color: 'var(--ids-comp-paginator-page-links-plain-color-fg-label-primary-active)',
170
+ },
171
+ '.ids-paginator.ids-paginator-primary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:focus':
172
+ {
173
+ background: 'var(--ids-comp-paginator-page-links-plain-color-bg-primary-focused)',
174
+ color: 'var(--ids-comp-paginator-page-links-plain-color-fg-label-primary-focused)',
175
+ },
176
+ '.ids-paginator.ids-paginator-primary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:hover':
177
+ {
178
+ background: 'var(--ids-comp-paginator-page-links-plain-color-bg-primary-hovered)',
179
+ color: 'var(--ids-comp-paginator-page-links-plain-color-fg-label-primary-hovered)',
180
+ },
181
+ '.ids-paginator.ids-paginator-primary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:active':
182
+ {
183
+ background: 'var(--ids-comp-paginator-page-links-plain-color-bg-primary-pressed)',
184
+ color: 'var(--ids-comp-paginator-page-links-plain-color-fg-label-primary-pressed)',
185
+ },
186
+ '.ids-paginator.ids-paginator-primary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:disabled':
187
+ {
188
+ background: 'var(--ids-comp-paginator-page-links-plain-color-bg-primary-disabled)',
189
+ color: 'var(--ids-comp-paginator-page-links-plain-color-fg-label-primary-disabled)',
190
+ },
191
+ '.ids-paginator.ids-paginator-primary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow:not(:disabled)':
192
+ { color: 'var(--ids-comp-paginator-page-links-plain-color-fg-icon-primary-default)' },
193
+ '.ids-paginator.ids-paginator-primary .ids-paginator__navigation-container .ids-paginator__page-button-truncation': {
194
+ color: 'var(--ids-comp-paginator-page-links-plain-color-fg-icon-primary-disabled)',
195
+ },
196
+ '.ids-paginator.ids-paginator-primary .ids-paginator__help-text': {
197
+ color: 'var(--ids-comp-paginator-help-text-color-fg-primary-default)',
198
+ },
199
+ '.ids-paginator.ids-paginator-secondary .ids-paginator__page-button:focus': {
200
+ outlineColor: 'var(--ids-comp-paginator-page-links-focused-outline-color-dark-focused)',
201
+ },
202
+ '.ids-paginator.ids-paginator-secondary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain':
203
+ {
204
+ background: 'var(--ids-comp-paginator-page-links-plain-color-bg-secondary-default)',
205
+ color: 'var(--ids-comp-paginator-page-links-plain-color-fg-label-secondary-default)',
206
+ },
207
+ '.ids-paginator.ids-paginator-secondary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.active:not(:disabled)':
208
+ {
209
+ background: 'var(--ids-comp-paginator-page-links-plain-color-bg-secondary-active)',
210
+ color: 'var(--ids-comp-paginator-page-links-plain-color-fg-label-secondary-active)',
211
+ },
212
+ '.ids-paginator.ids-paginator-secondary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:focus':
213
+ {
214
+ background: 'var(--ids-comp-paginator-page-links-plain-color-bg-secondary-focused)',
215
+ color: 'var(--ids-comp-paginator-page-links-plain-color-fg-label-secondary-focused)',
216
+ },
217
+ '.ids-paginator.ids-paginator-secondary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:hover':
218
+ {
219
+ background: 'var(--ids-comp-paginator-page-links-plain-color-bg-secondary-hovered)',
220
+ color: 'var(--ids-comp-paginator-page-links-plain-color-fg-label-secondary-hovered)',
221
+ },
222
+ '.ids-paginator.ids-paginator-secondary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:active':
223
+ {
224
+ background: 'var(--ids-comp-paginator-page-links-plain-color-bg-secondary-pressed)',
225
+ color: 'var(--ids-comp-paginator-page-links-plain-color-fg-label-secondary-pressed)',
226
+ },
227
+ '.ids-paginator.ids-paginator-secondary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:disabled':
228
+ {
229
+ background: 'var(--ids-comp-paginator-page-links-plain-color-bg-secondary-disabled)',
230
+ color: 'var(--ids-comp-paginator-page-links-plain-color-fg-label-secondary-disabled)',
231
+ },
232
+ '.ids-paginator.ids-paginator-secondary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow:not(:disabled)':
233
+ { color: 'var(--ids-comp-paginator-page-links-plain-color-fg-icon-secondary-default)' },
234
+ '.ids-paginator.ids-paginator-secondary .ids-paginator__navigation-container .ids-paginator__page-button-truncation': {
235
+ color: 'var(--ids-comp-paginator-page-links-plain-color-fg-icon-secondary-disabled)',
236
+ },
237
+ '.ids-paginator.ids-paginator-secondary .ids-paginator__help-text': {
238
+ color: 'var(--ids-comp-paginator-help-text-color-fg-secondary-default)',
239
+ },
240
+ '.ids-paginator.ids-paginator-light .ids-paginator__page-button:focus': {
241
+ outlineColor: 'var(--ids-comp-paginator-page-links-focused-outline-color-light-focused)',
242
+ },
243
+ '.ids-paginator.ids-paginator-light .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain':
244
+ {
245
+ background: 'var(--ids-comp-paginator-page-links-plain-color-bg-light-default)',
246
+ color: 'var(--ids-comp-paginator-page-links-plain-color-fg-label-light-default)',
247
+ },
248
+ '.ids-paginator.ids-paginator-light .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.active:not(:disabled)':
249
+ {
250
+ background: 'var(--ids-comp-paginator-page-links-plain-color-bg-light-active)',
251
+ color: 'var(--ids-comp-paginator-page-links-plain-color-fg-label-light-active)',
252
+ },
253
+ '.ids-paginator.ids-paginator-light .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:focus':
254
+ {
255
+ background: 'var(--ids-comp-paginator-page-links-plain-color-bg-light-focused)',
256
+ color: 'var(--ids-comp-paginator-page-links-plain-color-fg-label-light-focused)',
257
+ },
258
+ '.ids-paginator.ids-paginator-light .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:hover':
259
+ {
260
+ background: 'var(--ids-comp-paginator-page-links-plain-color-bg-light-hovered)',
261
+ color: 'var(--ids-comp-paginator-page-links-plain-color-fg-label-light-hovered)',
262
+ },
263
+ '.ids-paginator.ids-paginator-light .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:active':
264
+ {
265
+ background: 'var(--ids-comp-paginator-page-links-plain-color-bg-light-pressed)',
266
+ color: 'var(--ids-comp-paginator-page-links-plain-color-fg-label-light-pressed)',
267
+ },
268
+ '.ids-paginator.ids-paginator-light .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:disabled':
269
+ {
270
+ background: 'var(--ids-comp-paginator-page-links-plain-color-bg-light-disabled)',
271
+ color: 'var(--ids-comp-paginator-page-links-plain-color-fg-label-light-disabled)',
272
+ },
273
+ '.ids-paginator.ids-paginator-light .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow:not(:disabled)':
274
+ { color: 'var(--ids-comp-paginator-page-links-plain-color-fg-icon-light-default)' },
275
+ '.ids-paginator.ids-paginator-light .ids-paginator__navigation-container .ids-paginator__page-button-truncation': {
276
+ color: 'var(--ids-comp-paginator-page-links-plain-color-fg-icon-light-disabled)',
277
+ },
278
+ '.ids-paginator.ids-paginator-light .ids-paginator__help-text': {
279
+ color: 'var(--ids-comp-paginator-help-text-color-fg-light-default)',
280
+ },
281
+ '.ids-paginator.ids-paginator-surface .ids-paginator__page-button:focus': {
282
+ outlineColor: 'var(--ids-comp-paginator-page-links-focused-outline-color-dark-focused)',
283
+ },
284
+ '.ids-paginator.ids-paginator-surface .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain':
285
+ {
286
+ background: 'var(--ids-comp-paginator-page-links-plain-color-bg-surface-default)',
287
+ color: 'var(--ids-comp-paginator-page-links-plain-color-fg-label-surface-default)',
288
+ },
289
+ '.ids-paginator.ids-paginator-surface .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.active:not(:disabled)':
290
+ {
291
+ background: 'var(--ids-comp-paginator-page-links-plain-color-bg-surface-active)',
292
+ color: 'var(--ids-comp-paginator-page-links-plain-color-fg-label-surface-active)',
293
+ },
294
+ '.ids-paginator.ids-paginator-surface .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:focus':
295
+ {
296
+ background: 'var(--ids-comp-paginator-page-links-plain-color-bg-surface-focused)',
297
+ color: 'var(--ids-comp-paginator-page-links-plain-color-fg-label-surface-focused)',
298
+ },
299
+ '.ids-paginator.ids-paginator-surface .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:hover':
300
+ {
301
+ background: 'var(--ids-comp-paginator-page-links-plain-color-bg-surface-hovered)',
302
+ color: 'var(--ids-comp-paginator-page-links-plain-color-fg-label-surface-hovered)',
303
+ },
304
+ '.ids-paginator.ids-paginator-surface .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:active':
305
+ {
306
+ background: 'var(--ids-comp-paginator-page-links-plain-color-bg-surface-pressed)',
307
+ color: 'var(--ids-comp-paginator-page-links-plain-color-fg-label-surface-pressed)',
308
+ },
309
+ '.ids-paginator.ids-paginator-surface .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:disabled':
310
+ {
311
+ background: 'var(--ids-comp-paginator-page-links-plain-color-bg-surface-disabled)',
312
+ color: 'var(--ids-comp-paginator-page-links-plain-color-fg-label-surface-disabled)',
313
+ },
314
+ '.ids-paginator.ids-paginator-surface .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow:not(:disabled)':
315
+ { color: 'var(--ids-comp-paginator-page-links-plain-color-fg-icon-surface-default)' },
316
+ '.ids-paginator.ids-paginator-surface .ids-paginator__navigation-container .ids-paginator__page-button-truncation': {
317
+ color: 'var(--ids-comp-paginator-page-links-plain-color-fg-icon-surface-disabled)',
318
+ },
319
+ '.ids-paginator.ids-paginator-surface .ids-paginator__help-text': {
320
+ color: 'var(--ids-comp-paginator-help-text-color-fg-surface-default)',
321
+ },
322
+ '.ids-paginator.ids-paginator-compact .ids-paginator__navigation-container .ids-paginator__page-button-container': {
323
+ display: 'none',
324
+ },
325
+ '.ids-paginator.ids-paginator-compact .ids-paginator__navigation-container .ids-paginator__help-text': { order: 2, marginLeft: '0' },
326
+ };
327
+
328
+ addComponents(cssObj);
329
+ };
330
+ };