@i-cell/ids-styles 0.0.4 → 0.0.6

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.
@@ -0,0 +1,518 @@
1
+ // Tailwind CSS plugin for the segmented-control component in the i-Cell Design System
2
+ module.exports = function SegmentedControlPlugin() {
3
+ return function ({ addComponents }) {
4
+ const cssObj = {
5
+ '.ids-segmented-control': { display: 'inline-flex', flexDirection: 'row', flexWrap: 'nowrap', alignItems: 'center' },
6
+ '.ids-segmented-control .ids-segmented-control-item>button': {
7
+ display: 'flex',
8
+ alignItems: 'center',
9
+ borderStyle: 'solid',
10
+ position: 'relative',
11
+ textWrap: 'nowrap',
12
+ },
13
+ '.ids-segmented-control .ids-segmented-control-item>button:focus': { zIndex: 1, outlineStyle: 'solid', outlineOffset: '2px' },
14
+ '.ids-segmented-control.ids-segmented-control-compact': {
15
+ padding:
16
+ 'var(--ids-comp-segmented-control-container-size-padding-y-compact) var(--ids-comp-segmented-control-container-size-padding-x-compact)',
17
+ gap: 'var(--ids-comp-segmented-control-container-size-gap-compact)',
18
+ borderTopLeftRadius: 'var(--ids-comp-segmented-control-container-size-border-radius-left-compact)',
19
+ borderBottomLeftRadius: 'var(--ids-comp-segmented-control-container-size-border-radius-left-compact)',
20
+ borderTopRightRadius: 'var(--ids-comp-segmented-control-container-size-border-radius-right-compact)',
21
+ borderBottomRightRadius: 'var(--ids-comp-segmented-control-container-size-border-radius-right-compact)',
22
+ },
23
+ '.ids-segmented-control.ids-segmented-control-compact .ids-segmented-control-item>button': {
24
+ borderWidth: 'var(--ids-comp-segmented-control-button-size-border-width-compact)',
25
+ padding:
26
+ 'var(--ids-comp-segmented-control-button-size-padding-y-compact) var(--ids-comp-segmented-control-button-size-padding-x-compact)',
27
+ gap: 'var(--ids-comp-segmented-control-button-size-gap-compact)',
28
+ fontFamily: 'var(--ids-comp-segmented-control-button-typography-font-family-compact)',
29
+ fontSize: 'var(--ids-comp-segmented-control-button-typography-font-size-compact)',
30
+ fontWeight: 'var(--ids-comp-segmented-control-button-typography-font-weight-compact)',
31
+ letterSpacing: 'var(--ids-comp-segmented-control-button-typography-letter-spacing-compact)',
32
+ lineHeight: 'var(--ids-comp-segmented-control-button-typography-line-height-compact)',
33
+ },
34
+ '.ids-segmented-control.ids-segmented-control-compact .ids-segmented-control-item>button:focus': {
35
+ outlineWidth: 'var(--ids-comp-segmented-control-focused-outline-size-outline-width-compact)',
36
+ },
37
+ '.ids-segmented-control.ids-segmented-control-compact .ids-segmented-control-item:first-of-type>button': {
38
+ borderTopLeftRadius: 'var(--ids-comp-segmented-control-button-size-border-radius-compact)',
39
+ borderBottomLeftRadius: 'var(--ids-comp-segmented-control-button-size-border-radius-compact)',
40
+ },
41
+ '.ids-segmented-control.ids-segmented-control-compact .ids-segmented-control-item:last-of-type>button': {
42
+ borderTopRightRadius: 'var(--ids-comp-segmented-control-button-size-border-radius-compact)',
43
+ borderBottomRightRadius: 'var(--ids-comp-segmented-control-button-size-border-radius-compact)',
44
+ },
45
+ '.ids-segmented-control.ids-segmented-control-compact .ids-segmented-control-item:not(:last-of-type)>button': {
46
+ borderRightWidth: '0',
47
+ },
48
+ '.ids-segmented-control.ids-segmented-control-compact .ids-segmented-control-item .ids-icon': {
49
+ height: 'var(--ids-comp-segmented-control-button-size-icon-compact)',
50
+ width: 'var(--ids-comp-segmented-control-button-size-icon-compact)',
51
+ },
52
+ '.ids-segmented-control.ids-segmented-control-comfortable': {
53
+ padding:
54
+ 'var(--ids-comp-segmented-control-container-size-padding-y-comfortable) var(--ids-comp-segmented-control-container-size-padding-x-comfortable)',
55
+ gap: 'var(--ids-comp-segmented-control-container-size-gap-comfortable)',
56
+ borderTopLeftRadius: 'var(--ids-comp-segmented-control-container-size-border-radius-left-comfortable)',
57
+ borderBottomLeftRadius: 'var(--ids-comp-segmented-control-container-size-border-radius-left-comfortable)',
58
+ borderTopRightRadius: 'var(--ids-comp-segmented-control-container-size-border-radius-right-comfortable)',
59
+ borderBottomRightRadius: 'var(--ids-comp-segmented-control-container-size-border-radius-right-comfortable)',
60
+ },
61
+ '.ids-segmented-control.ids-segmented-control-comfortable .ids-segmented-control-item>button': {
62
+ borderWidth: 'var(--ids-comp-segmented-control-button-size-border-width-comfortable)',
63
+ padding:
64
+ 'var(--ids-comp-segmented-control-button-size-padding-y-comfortable) var(--ids-comp-segmented-control-button-size-padding-x-comfortable)',
65
+ gap: 'var(--ids-comp-segmented-control-button-size-gap-comfortable)',
66
+ fontFamily: 'var(--ids-comp-segmented-control-button-typography-font-family-comfortable)',
67
+ fontSize: 'var(--ids-comp-segmented-control-button-typography-font-size-comfortable)',
68
+ fontWeight: 'var(--ids-comp-segmented-control-button-typography-font-weight-comfortable)',
69
+ letterSpacing: 'var(--ids-comp-segmented-control-button-typography-letter-spacing-comfortable)',
70
+ lineHeight: 'var(--ids-comp-segmented-control-button-typography-line-height-comfortable)',
71
+ },
72
+ '.ids-segmented-control.ids-segmented-control-comfortable .ids-segmented-control-item>button:focus': {
73
+ outlineWidth: 'var(--ids-comp-segmented-control-focused-outline-size-outline-width-comfortable)',
74
+ },
75
+ '.ids-segmented-control.ids-segmented-control-comfortable .ids-segmented-control-item:first-of-type>button': {
76
+ borderTopLeftRadius: 'var(--ids-comp-segmented-control-button-size-border-radius-comfortable)',
77
+ borderBottomLeftRadius: 'var(--ids-comp-segmented-control-button-size-border-radius-comfortable)',
78
+ },
79
+ '.ids-segmented-control.ids-segmented-control-comfortable .ids-segmented-control-item:last-of-type>button': {
80
+ borderTopRightRadius: 'var(--ids-comp-segmented-control-button-size-border-radius-comfortable)',
81
+ borderBottomRightRadius: 'var(--ids-comp-segmented-control-button-size-border-radius-comfortable)',
82
+ },
83
+ '.ids-segmented-control.ids-segmented-control-comfortable .ids-segmented-control-item:not(:last-of-type)>button': {
84
+ borderRightWidth: '0',
85
+ },
86
+ '.ids-segmented-control.ids-segmented-control-comfortable .ids-segmented-control-item .ids-icon': {
87
+ height: 'var(--ids-comp-segmented-control-button-size-icon-comfortable)',
88
+ width: 'var(--ids-comp-segmented-control-button-size-icon-comfortable)',
89
+ },
90
+ '.ids-segmented-control.ids-segmented-control-spacious': {
91
+ padding:
92
+ 'var(--ids-comp-segmented-control-container-size-padding-y-spacious) var(--ids-comp-segmented-control-container-size-padding-x-spacious)',
93
+ gap: 'var(--ids-comp-segmented-control-container-size-gap-spacious)',
94
+ borderTopLeftRadius: 'var(--ids-comp-segmented-control-container-size-border-radius-left-spacious)',
95
+ borderBottomLeftRadius: 'var(--ids-comp-segmented-control-container-size-border-radius-left-spacious)',
96
+ borderTopRightRadius: 'var(--ids-comp-segmented-control-container-size-border-radius-right-spacious)',
97
+ borderBottomRightRadius: 'var(--ids-comp-segmented-control-container-size-border-radius-right-spacious)',
98
+ },
99
+ '.ids-segmented-control.ids-segmented-control-spacious .ids-segmented-control-item>button': {
100
+ borderWidth: 'var(--ids-comp-segmented-control-button-size-border-width-spacious)',
101
+ padding:
102
+ 'var(--ids-comp-segmented-control-button-size-padding-y-spacious) var(--ids-comp-segmented-control-button-size-padding-x-spacious)',
103
+ gap: 'var(--ids-comp-segmented-control-button-size-gap-spacious)',
104
+ fontFamily: 'var(--ids-comp-segmented-control-button-typography-font-family-spacious)',
105
+ fontSize: 'var(--ids-comp-segmented-control-button-typography-font-size-spacious)',
106
+ fontWeight: 'var(--ids-comp-segmented-control-button-typography-font-weight-spacious)',
107
+ letterSpacing: 'var(--ids-comp-segmented-control-button-typography-letter-spacing-spacious)',
108
+ lineHeight: 'var(--ids-comp-segmented-control-button-typography-line-height-spacious)',
109
+ },
110
+ '.ids-segmented-control.ids-segmented-control-spacious .ids-segmented-control-item>button:focus': {
111
+ outlineWidth: 'var(--ids-comp-segmented-control-focused-outline-size-outline-width-spacious)',
112
+ },
113
+ '.ids-segmented-control.ids-segmented-control-spacious .ids-segmented-control-item:first-of-type>button': {
114
+ borderTopLeftRadius: 'var(--ids-comp-segmented-control-button-size-border-radius-spacious)',
115
+ borderBottomLeftRadius: 'var(--ids-comp-segmented-control-button-size-border-radius-spacious)',
116
+ },
117
+ '.ids-segmented-control.ids-segmented-control-spacious .ids-segmented-control-item:last-of-type>button': {
118
+ borderTopRightRadius: 'var(--ids-comp-segmented-control-button-size-border-radius-spacious)',
119
+ borderBottomRightRadius: 'var(--ids-comp-segmented-control-button-size-border-radius-spacious)',
120
+ },
121
+ '.ids-segmented-control.ids-segmented-control-spacious .ids-segmented-control-item:not(:last-of-type)>button': {
122
+ borderRightWidth: '0',
123
+ },
124
+ '.ids-segmented-control.ids-segmented-control-spacious .ids-segmented-control-item .ids-icon': {
125
+ height: 'var(--ids-comp-segmented-control-button-size-icon-spacious)',
126
+ width: 'var(--ids-comp-segmented-control-button-size-icon-spacious)',
127
+ },
128
+ '.ids-segmented-control.ids-segmented-control-dense': {
129
+ padding:
130
+ 'var(--ids-comp-segmented-control-container-size-padding-y-dense) var(--ids-comp-segmented-control-container-size-padding-x-dense)',
131
+ gap: 'var(--ids-comp-segmented-control-container-size-gap-dense)',
132
+ borderTopLeftRadius: 'var(--ids-comp-segmented-control-container-size-border-radius-left-dense)',
133
+ borderBottomLeftRadius: 'var(--ids-comp-segmented-control-container-size-border-radius-left-dense)',
134
+ borderTopRightRadius: 'var(--ids-comp-segmented-control-container-size-border-radius-right-dense)',
135
+ borderBottomRightRadius: 'var(--ids-comp-segmented-control-container-size-border-radius-right-dense)',
136
+ },
137
+ '.ids-segmented-control.ids-segmented-control-dense .ids-segmented-control-item>button': {
138
+ borderWidth: 'var(--ids-comp-segmented-control-button-size-border-width-dense)',
139
+ padding:
140
+ 'var(--ids-comp-segmented-control-button-size-padding-y-dense) var(--ids-comp-segmented-control-button-size-padding-x-dense)',
141
+ gap: 'var(--ids-comp-segmented-control-button-size-gap-dense)',
142
+ fontFamily: 'var(--ids-comp-segmented-control-button-typography-font-family-dense)',
143
+ fontSize: 'var(--ids-comp-segmented-control-button-typography-font-size-dense)',
144
+ fontWeight: 'var(--ids-comp-segmented-control-button-typography-font-weight-dense)',
145
+ letterSpacing: 'var(--ids-comp-segmented-control-button-typography-letter-spacing-dense)',
146
+ lineHeight: 'var(--ids-comp-segmented-control-button-typography-line-height-dense)',
147
+ },
148
+ '.ids-segmented-control.ids-segmented-control-dense .ids-segmented-control-item>button:focus': {
149
+ outlineWidth: 'var(--ids-comp-segmented-control-focused-outline-size-outline-width-dense)',
150
+ },
151
+ '.ids-segmented-control.ids-segmented-control-dense .ids-segmented-control-item:first-of-type>button': {
152
+ borderTopLeftRadius: 'var(--ids-comp-segmented-control-button-size-border-radius-dense)',
153
+ borderBottomLeftRadius: 'var(--ids-comp-segmented-control-button-size-border-radius-dense)',
154
+ },
155
+ '.ids-segmented-control.ids-segmented-control-dense .ids-segmented-control-item:last-of-type>button': {
156
+ borderTopRightRadius: 'var(--ids-comp-segmented-control-button-size-border-radius-dense)',
157
+ borderBottomRightRadius: 'var(--ids-comp-segmented-control-button-size-border-radius-dense)',
158
+ },
159
+ '.ids-segmented-control.ids-segmented-control-dense .ids-segmented-control-item:not(:last-of-type)>button': { borderRightWidth: '0' },
160
+ '.ids-segmented-control.ids-segmented-control-dense .ids-segmented-control-item .ids-icon': {
161
+ height: 'var(--ids-comp-segmented-control-button-size-icon-dense)',
162
+ width: 'var(--ids-comp-segmented-control-button-size-icon-dense)',
163
+ },
164
+ '.ids-segmented-control.ids-segmented-control-primary .ids-segmented-control-item>button:focus': {
165
+ outlineColor: 'var(--ids-comp-segmented-control-focused-outline-color-dark-focused)',
166
+ },
167
+ '.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled': {
168
+ backgroundColor: 'var(--ids-comp-segmented-control-container-filled-color-bg-primary-default)',
169
+ borderColor: 'var(--ids-comp-segmented-control-container-filled-color-border-primary-default)',
170
+ },
171
+ '.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item>button': {
172
+ backgroundColor: 'var(--ids-comp-segmented-control-button-filled-color-bg-primary-default)',
173
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-default)',
174
+ },
175
+ '.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item>button .ids-icon': {
176
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-default)',
177
+ },
178
+ '.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item>button.ids-segmented-control-item-selected:not(:disabled)':
179
+ {
180
+ backgroundColor: 'var(--ids-comp-segmented-control-button-filled-color-bg-primary-active)',
181
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-active)',
182
+ },
183
+ '.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item>button.ids-segmented-control-item-selected:not(:disabled) .ids-icon':
184
+ { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-active)' },
185
+ '.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item>button:hover': {
186
+ backgroundColor: 'var(--ids-comp-segmented-control-button-filled-color-bg-primary-hovered)',
187
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-hovered)',
188
+ },
189
+ '.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item>button:hover .ids-icon':
190
+ { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-hovered)' },
191
+ '.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item>button:active': {
192
+ backgroundColor: 'var(--ids-comp-segmented-control-button-filled-color-bg-primary-pressed)',
193
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-pressed)',
194
+ },
195
+ '.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item>button:active .ids-icon':
196
+ { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-pressed)' },
197
+ '.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item>button:focus': {
198
+ backgroundColor: 'var(--ids-comp-segmented-control-button-filled-color-bg-primary-focused)',
199
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-focused)',
200
+ },
201
+ '.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item>button:focus .ids-icon':
202
+ { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-focused)' },
203
+ '.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item>button:disabled': {
204
+ backgroundColor: 'var(--ids-comp-segmented-control-button-filled-color-bg-primary-disabled)',
205
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-disabled)',
206
+ },
207
+ '.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item>button:disabled .ids-icon':
208
+ { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-disabled)' },
209
+ '.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined': {
210
+ backgroundColor: 'var(--ids-comp-segmented-control-container-outlined-color-bg-primary-default)',
211
+ borderColor: 'var(--ids-comp-segmented-control-container-outlined-color-border-primary-default)',
212
+ },
213
+ '.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item>button': {
214
+ backgroundColor: 'var(--ids-comp-segmented-control-button-outlined-color-bg-primary-default)',
215
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-default)',
216
+ },
217
+ '.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item>button .ids-icon': {
218
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-default)',
219
+ },
220
+ '.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item>button.ids-segmented-control-item-selected:not(:disabled)':
221
+ {
222
+ backgroundColor: 'var(--ids-comp-segmented-control-button-outlined-color-bg-primary-active)',
223
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-active)',
224
+ },
225
+ '.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item>button.ids-segmented-control-item-selected:not(:disabled) .ids-icon':
226
+ { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-active)' },
227
+ '.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item>button:hover': {
228
+ backgroundColor: 'var(--ids-comp-segmented-control-button-outlined-color-bg-primary-hovered)',
229
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-hovered)',
230
+ },
231
+ '.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item>button:hover .ids-icon':
232
+ { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-hovered)' },
233
+ '.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item>button:active': {
234
+ backgroundColor: 'var(--ids-comp-segmented-control-button-outlined-color-bg-primary-pressed)',
235
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-pressed)',
236
+ },
237
+ '.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item>button:active .ids-icon':
238
+ { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-pressed)' },
239
+ '.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item>button:focus': {
240
+ backgroundColor: 'var(--ids-comp-segmented-control-button-outlined-color-bg-primary-focused)',
241
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-focused)',
242
+ },
243
+ '.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item>button:focus .ids-icon':
244
+ { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-focused)' },
245
+ '.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item>button:disabled': {
246
+ backgroundColor: 'var(--ids-comp-segmented-control-button-outlined-color-bg-primary-disabled)',
247
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-disabled)',
248
+ },
249
+ '.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item>button:disabled .ids-icon':
250
+ { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-disabled)' },
251
+ '.ids-segmented-control.ids-segmented-control-surface .ids-segmented-control-item>button:focus': {
252
+ outlineColor: 'var(--ids-comp-segmented-control-focused-outline-color-dark-focused)',
253
+ },
254
+ '.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled': {
255
+ backgroundColor: 'var(--ids-comp-segmented-control-container-filled-color-bg-surface-default)',
256
+ borderColor: 'var(--ids-comp-segmented-control-container-filled-color-border-surface-default)',
257
+ },
258
+ '.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item>button': {
259
+ backgroundColor: 'var(--ids-comp-segmented-control-button-filled-color-bg-surface-default)',
260
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-default)',
261
+ },
262
+ '.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item>button .ids-icon': {
263
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-default)',
264
+ },
265
+ '.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item>button.ids-segmented-control-item-selected:not(:disabled)':
266
+ {
267
+ backgroundColor: 'var(--ids-comp-segmented-control-button-filled-color-bg-surface-active)',
268
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-active)',
269
+ },
270
+ '.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item>button.ids-segmented-control-item-selected:not(:disabled) .ids-icon':
271
+ { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-active)' },
272
+ '.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item>button:hover': {
273
+ backgroundColor: 'var(--ids-comp-segmented-control-button-filled-color-bg-surface-hovered)',
274
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-hovered)',
275
+ },
276
+ '.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item>button:hover .ids-icon':
277
+ { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-hovered)' },
278
+ '.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item>button:active': {
279
+ backgroundColor: 'var(--ids-comp-segmented-control-button-filled-color-bg-surface-pressed)',
280
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-pressed)',
281
+ },
282
+ '.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item>button:active .ids-icon':
283
+ { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-pressed)' },
284
+ '.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item>button:focus': {
285
+ backgroundColor: 'var(--ids-comp-segmented-control-button-filled-color-bg-surface-focused)',
286
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-focused)',
287
+ },
288
+ '.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item>button:focus .ids-icon':
289
+ { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-focused)' },
290
+ '.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item>button:disabled': {
291
+ backgroundColor: 'var(--ids-comp-segmented-control-button-filled-color-bg-surface-disabled)',
292
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-disabled)',
293
+ },
294
+ '.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item>button:disabled .ids-icon':
295
+ { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-disabled)' },
296
+ '.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined': {
297
+ backgroundColor: 'var(--ids-comp-segmented-control-container-outlined-color-bg-surface-default)',
298
+ borderColor: 'var(--ids-comp-segmented-control-container-outlined-color-border-surface-default)',
299
+ },
300
+ '.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item>button': {
301
+ backgroundColor: 'var(--ids-comp-segmented-control-button-outlined-color-bg-surface-default)',
302
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-default)',
303
+ },
304
+ '.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item>button .ids-icon': {
305
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-default)',
306
+ },
307
+ '.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item>button.ids-segmented-control-item-selected:not(:disabled)':
308
+ {
309
+ backgroundColor: 'var(--ids-comp-segmented-control-button-outlined-color-bg-surface-active)',
310
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-active)',
311
+ },
312
+ '.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item>button.ids-segmented-control-item-selected:not(:disabled) .ids-icon':
313
+ { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-active)' },
314
+ '.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item>button:hover': {
315
+ backgroundColor: 'var(--ids-comp-segmented-control-button-outlined-color-bg-surface-hovered)',
316
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-hovered)',
317
+ },
318
+ '.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item>button:hover .ids-icon':
319
+ { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-hovered)' },
320
+ '.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item>button:active': {
321
+ backgroundColor: 'var(--ids-comp-segmented-control-button-outlined-color-bg-surface-pressed)',
322
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-pressed)',
323
+ },
324
+ '.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item>button:active .ids-icon':
325
+ { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-pressed)' },
326
+ '.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item>button:focus': {
327
+ backgroundColor: 'var(--ids-comp-segmented-control-button-outlined-color-bg-surface-focused)',
328
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-focused)',
329
+ },
330
+ '.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item>button:focus .ids-icon':
331
+ { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-focused)' },
332
+ '.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item>button:disabled': {
333
+ backgroundColor: 'var(--ids-comp-segmented-control-button-outlined-color-bg-surface-disabled)',
334
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-disabled)',
335
+ },
336
+ '.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item>button:disabled .ids-icon':
337
+ { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-disabled)' },
338
+ '.ids-segmented-control.ids-segmented-control-light .ids-segmented-control-item>button:focus': {
339
+ outlineColor: 'var(--ids-comp-segmented-control-focused-outline-color-light-focused)',
340
+ },
341
+ '.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled': {
342
+ backgroundColor: 'var(--ids-comp-segmented-control-container-filled-color-bg-light-default)',
343
+ borderColor: 'var(--ids-comp-segmented-control-container-filled-color-border-light-default)',
344
+ },
345
+ '.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item>button': {
346
+ backgroundColor: 'var(--ids-comp-segmented-control-button-filled-color-bg-light-default)',
347
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-light-default)',
348
+ },
349
+ '.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item>button .ids-icon': {
350
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-default)',
351
+ },
352
+ '.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item>button.ids-segmented-control-item-selected:not(:disabled)':
353
+ {
354
+ backgroundColor: 'var(--ids-comp-segmented-control-button-filled-color-bg-light-active)',
355
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-light-active)',
356
+ },
357
+ '.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item>button.ids-segmented-control-item-selected:not(:disabled) .ids-icon':
358
+ { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-active)' },
359
+ '.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item>button:hover': {
360
+ backgroundColor: 'var(--ids-comp-segmented-control-button-filled-color-bg-light-hovered)',
361
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-light-hovered)',
362
+ },
363
+ '.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item>button:hover .ids-icon':
364
+ { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-hovered)' },
365
+ '.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item>button:active': {
366
+ backgroundColor: 'var(--ids-comp-segmented-control-button-filled-color-bg-light-pressed)',
367
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-light-pressed)',
368
+ },
369
+ '.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item>button:active .ids-icon':
370
+ { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-pressed)' },
371
+ '.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item>button:focus': {
372
+ backgroundColor: 'var(--ids-comp-segmented-control-button-filled-color-bg-light-focused)',
373
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-light-focused)',
374
+ },
375
+ '.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item>button:focus .ids-icon':
376
+ { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-focused)' },
377
+ '.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item>button:disabled': {
378
+ backgroundColor: 'var(--ids-comp-segmented-control-button-filled-color-bg-light-disabled)',
379
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-light-disabled)',
380
+ },
381
+ '.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item>button:disabled .ids-icon':
382
+ { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-disabled)' },
383
+ '.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined': {
384
+ backgroundColor: 'var(--ids-comp-segmented-control-container-outlined-color-bg-light-default)',
385
+ borderColor: 'var(--ids-comp-segmented-control-container-outlined-color-border-light-default)',
386
+ },
387
+ '.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item>button': {
388
+ backgroundColor: 'var(--ids-comp-segmented-control-button-outlined-color-bg-light-default)',
389
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-light-default)',
390
+ },
391
+ '.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item>button .ids-icon': {
392
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-default)',
393
+ },
394
+ '.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item>button.ids-segmented-control-item-selected:not(:disabled)':
395
+ {
396
+ backgroundColor: 'var(--ids-comp-segmented-control-button-outlined-color-bg-light-active)',
397
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-light-active)',
398
+ },
399
+ '.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item>button.ids-segmented-control-item-selected:not(:disabled) .ids-icon':
400
+ { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-active)' },
401
+ '.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item>button:hover': {
402
+ backgroundColor: 'var(--ids-comp-segmented-control-button-outlined-color-bg-light-hovered)',
403
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-light-hovered)',
404
+ },
405
+ '.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item>button:hover .ids-icon':
406
+ { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-hovered)' },
407
+ '.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item>button:active': {
408
+ backgroundColor: 'var(--ids-comp-segmented-control-button-outlined-color-bg-light-pressed)',
409
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-light-pressed)',
410
+ },
411
+ '.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item>button:active .ids-icon':
412
+ { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-pressed)' },
413
+ '.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item>button:focus': {
414
+ backgroundColor: 'var(--ids-comp-segmented-control-button-outlined-color-bg-light-focused)',
415
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-light-focused)',
416
+ },
417
+ '.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item>button:focus .ids-icon':
418
+ { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-focused)' },
419
+ '.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item>button:disabled': {
420
+ backgroundColor: 'var(--ids-comp-segmented-control-button-outlined-color-bg-light-disabled)',
421
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-light-disabled)',
422
+ },
423
+ '.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item>button:disabled .ids-icon':
424
+ { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-disabled)' },
425
+ '.ids-segmented-control.ids-segmented-control-dark .ids-segmented-control-item>button:focus': {
426
+ outlineColor: 'var(--ids-comp-segmented-control-focused-outline-color-dark-focused)',
427
+ },
428
+ '.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled': {
429
+ backgroundColor: 'var(--ids-comp-segmented-control-container-filled-color-bg-dark-default)',
430
+ borderColor: 'var(--ids-comp-segmented-control-container-filled-color-border-dark-default)',
431
+ },
432
+ '.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item>button': {
433
+ backgroundColor: 'var(--ids-comp-segmented-control-button-filled-color-bg-dark-default)',
434
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-default)',
435
+ },
436
+ '.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item>button .ids-icon': {
437
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-default)',
438
+ },
439
+ '.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item>button.ids-segmented-control-item-selected:not(:disabled)':
440
+ {
441
+ backgroundColor: 'var(--ids-comp-segmented-control-button-filled-color-bg-dark-active)',
442
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-active)',
443
+ },
444
+ '.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item>button.ids-segmented-control-item-selected:not(:disabled) .ids-icon':
445
+ { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-active)' },
446
+ '.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item>button:hover': {
447
+ backgroundColor: 'var(--ids-comp-segmented-control-button-filled-color-bg-dark-hovered)',
448
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-hovered)',
449
+ },
450
+ '.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item>button:hover .ids-icon': {
451
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-hovered)',
452
+ },
453
+ '.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item>button:active': {
454
+ backgroundColor: 'var(--ids-comp-segmented-control-button-filled-color-bg-dark-pressed)',
455
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-pressed)',
456
+ },
457
+ '.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item>button:active .ids-icon':
458
+ { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-pressed)' },
459
+ '.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item>button:focus': {
460
+ backgroundColor: 'var(--ids-comp-segmented-control-button-filled-color-bg-dark-focused)',
461
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-focused)',
462
+ },
463
+ '.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item>button:focus .ids-icon': {
464
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-focused)',
465
+ },
466
+ '.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item>button:disabled': {
467
+ backgroundColor: 'var(--ids-comp-segmented-control-button-filled-color-bg-dark-disabled)',
468
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-disabled)',
469
+ },
470
+ '.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item>button:disabled .ids-icon':
471
+ { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-disabled)' },
472
+ '.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined': {
473
+ backgroundColor: 'var(--ids-comp-segmented-control-container-outlined-color-bg-dark-default)',
474
+ borderColor: 'var(--ids-comp-segmented-control-container-outlined-color-border-dark-default)',
475
+ },
476
+ '.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item>button': {
477
+ backgroundColor: 'var(--ids-comp-segmented-control-button-outlined-color-bg-dark-default)',
478
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-default)',
479
+ },
480
+ '.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item>button .ids-icon': {
481
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-default)',
482
+ },
483
+ '.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item>button.ids-segmented-control-item-selected:not(:disabled)':
484
+ {
485
+ backgroundColor: 'var(--ids-comp-segmented-control-button-outlined-color-bg-dark-active)',
486
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-active)',
487
+ },
488
+ '.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item>button.ids-segmented-control-item-selected:not(:disabled) .ids-icon':
489
+ { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-active)' },
490
+ '.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item>button:hover': {
491
+ backgroundColor: 'var(--ids-comp-segmented-control-button-outlined-color-bg-dark-hovered)',
492
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-hovered)',
493
+ },
494
+ '.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item>button:hover .ids-icon':
495
+ { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-hovered)' },
496
+ '.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item>button:active': {
497
+ backgroundColor: 'var(--ids-comp-segmented-control-button-outlined-color-bg-dark-pressed)',
498
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-pressed)',
499
+ },
500
+ '.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item>button:active .ids-icon':
501
+ { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-pressed)' },
502
+ '.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item>button:focus': {
503
+ backgroundColor: 'var(--ids-comp-segmented-control-button-outlined-color-bg-dark-focused)',
504
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-focused)',
505
+ },
506
+ '.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item>button:focus .ids-icon':
507
+ { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-focused)' },
508
+ '.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item>button:disabled': {
509
+ backgroundColor: 'var(--ids-comp-segmented-control-button-outlined-color-bg-dark-disabled)',
510
+ color: 'var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-disabled)',
511
+ },
512
+ '.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item>button:disabled .ids-icon':
513
+ { color: 'var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-disabled)' },
514
+ };
515
+
516
+ addComponents(cssObj);
517
+ };
518
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@i-cell/ids-styles",
3
- "version": "0.0.4",
3
+ "version": "0.0.6",
4
4
  "private": false,
5
5
  "description": "Stylesheets for i-Cell Design System UI Kit components (currently Vue and Angular)",
6
6
  "scripts": {
@@ -35,7 +35,7 @@
35
35
  },
36
36
  "homepage": "https://github.com/i-Cell-Mobilsoft-Open-Source/ids-styles#readme",
37
37
  "devDependencies": {
38
- "@i-cell/ids-tokens": "0.0.13",
38
+ "@i-cell/ids-tokens": "0.0.14",
39
39
  "commander": "^12.1.0",
40
40
  "gulp": "^5.0.0",
41
41
  "gulp-prettier": "^6.0.0",