@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/avatar/avatar.plugin.js ADDED
@@ -0,0 +1,269 @@
1
+ // Tailwind CSS plugin for the avatar component in the i-Cell Design System
2
+ module.exports = function AvatarPlugin() {
3
+ return function ({ addComponents }) {
4
+ const cssObj = {
5
+ '.ids-avatar': {
6
+ display: 'flex',
7
+ fontStyle: 'normal',
8
+ textAlign: 'center',
9
+ alignItems: 'center',
10
+ flexDirection: 'column',
11
+ justifyContent: 'center',
12
+ },
13
+ '.ids-avatar .ids-avatar-icon': {
14
+ gap: '10px',
15
+ display: 'flex',
16
+ alignItems: 'center',
17
+ justifyContent: 'center',
18
+ flexDirection: 'column',
19
+ width: '100%',
20
+ height: '100%',
21
+ },
22
+ '.ids-avatar .ids-avatar-image': { borderRadius: '50%', verticalAlign: 'middle', maxWidth: 'none' },
23
+ '.ids-avatar:focus': {
24
+ outlineOffset: '2px',
25
+ outline: 'var(--ids-comp-avatar-focused-outline-size-outline) solid var(--ids-comp-avatar-focused-outline-color-dark-focused)',
26
+ },
27
+ '.ids-avatar:focus.ids-avatar-light': {
28
+ outline: 'var(--ids-comp-avatar-focused-outline-size-outline) solid var(--ids-comp-avatar-focused-outline-color-light-focused)',
29
+ },
30
+ '.ids-avatar:active': { outline: 'none' },
31
+ '.ids-avatar.ids-avatar-compact': {
32
+ width: 'var(--ids-comp-size-avatar-size-height-compact)',
33
+ height: 'var(--ids-comp-size-avatar-size-width-compact)',
34
+ gap: 'var(--ids-comp-size-avatar-size-gap-compact)',
35
+ borderRadius: 'var(--ids-comp-size-avatar-size-border-radius-compact)',
36
+ padding: 'var(--ids-comp-size-avatar-size-padding-y-compact) var(--ids-comp-size-avatar-size-padding-x-compact)',
37
+ border: 'var(--ids-comp-size-avatar-size-border-compact) solid',
38
+ fontFamily: 'var(--ids-comp-size-avatar-initials-typography-font-family-compact)',
39
+ fontSize: 'var(--ids-comp-size-avatar-initials-typography-font-size-compact)',
40
+ fontWeight: 'var(--ids-comp-size-avatar-initials-typography-font-weight-compact)',
41
+ letterSpacing: 'var(--ids-comp-size-avatar-initials-typography-letter-spacing-compact)',
42
+ lineHeight: 'var(--ids-comp-size-avatar-initials-typography-line-height-compact)',
43
+ },
44
+ '.ids-avatar.ids-avatar-compact:has(.ids-avatar-image)': { padding: '0' },
45
+ '.ids-avatar.ids-avatar-compact .ids-avatar-image': {
46
+ width: 'var(--ids-comp-size-avatar-size-width-compact)',
47
+ height: 'var(--ids-comp-size-avatar-size-height-compact)',
48
+ },
49
+ '.ids-avatar.ids-avatar-comfortable': {
50
+ width: 'var(--ids-comp-size-avatar-size-height-comfortable)',
51
+ height: 'var(--ids-comp-size-avatar-size-width-comfortable)',
52
+ gap: 'var(--ids-comp-size-avatar-size-gap-comfortable)',
53
+ borderRadius: 'var(--ids-comp-size-avatar-size-border-radius-comfortable)',
54
+ padding: 'var(--ids-comp-size-avatar-size-padding-y-comfortable) var(--ids-comp-size-avatar-size-padding-x-comfortable)',
55
+ border: 'var(--ids-comp-size-avatar-size-border-comfortable) solid',
56
+ fontFamily: 'var(--ids-comp-size-avatar-initials-typography-font-family-comfortable)',
57
+ fontSize: 'var(--ids-comp-size-avatar-initials-typography-font-size-comfortable)',
58
+ fontWeight: 'var(--ids-comp-size-avatar-initials-typography-font-weight-comfortable)',
59
+ letterSpacing: 'var(--ids-comp-size-avatar-initials-typography-letter-spacing-comfortable)',
60
+ lineHeight: 'var(--ids-comp-size-avatar-initials-typography-line-height-comfortable)',
61
+ },
62
+ '.ids-avatar.ids-avatar-comfortable:has(.ids-avatar-image)': { padding: '0' },
63
+ '.ids-avatar.ids-avatar-comfortable .ids-avatar-image': {
64
+ width: 'var(--ids-comp-size-avatar-size-width-comfortable)',
65
+ height: 'var(--ids-comp-size-avatar-size-height-comfortable)',
66
+ },
67
+ '.ids-avatar.ids-avatar-spacious': {
68
+ width: 'var(--ids-comp-size-avatar-size-height-spacious)',
69
+ height: 'var(--ids-comp-size-avatar-size-width-spacious)',
70
+ gap: 'var(--ids-comp-size-avatar-size-gap-spacious)',
71
+ borderRadius: 'var(--ids-comp-size-avatar-size-border-radius-spacious)',
72
+ padding: 'var(--ids-comp-size-avatar-size-padding-y-spacious) var(--ids-comp-size-avatar-size-padding-x-spacious)',
73
+ border: 'var(--ids-comp-size-avatar-size-border-spacious) solid',
74
+ fontFamily: 'var(--ids-comp-size-avatar-initials-typography-font-family-spacious)',
75
+ fontSize: 'var(--ids-comp-size-avatar-initials-typography-font-size-spacious)',
76
+ fontWeight: 'var(--ids-comp-size-avatar-initials-typography-font-weight-spacious)',
77
+ letterSpacing: 'var(--ids-comp-size-avatar-initials-typography-letter-spacing-spacious)',
78
+ lineHeight: 'var(--ids-comp-size-avatar-initials-typography-line-height-spacious)',
79
+ },
80
+ '.ids-avatar.ids-avatar-spacious:has(.ids-avatar-image)': { padding: '0' },
81
+ '.ids-avatar.ids-avatar-spacious .ids-avatar-image': {
82
+ width: 'var(--ids-comp-size-avatar-size-width-spacious)',
83
+ height: 'var(--ids-comp-size-avatar-size-height-spacious)',
84
+ },
85
+ '.ids-avatar.ids-avatar-dense': {
86
+ width: 'var(--ids-comp-size-avatar-size-height-dense)',
87
+ height: 'var(--ids-comp-size-avatar-size-width-dense)',
88
+ gap: 'var(--ids-comp-size-avatar-size-gap-dense)',
89
+ borderRadius: 'var(--ids-comp-size-avatar-size-border-radius-dense)',
90
+ padding: 'var(--ids-comp-size-avatar-size-padding-y-dense) var(--ids-comp-size-avatar-size-padding-x-dense)',
91
+ border: 'var(--ids-comp-size-avatar-size-border-dense) solid',
92
+ fontFamily: 'var(--ids-comp-size-avatar-initials-typography-font-family-dense)',
93
+ fontSize: 'var(--ids-comp-size-avatar-initials-typography-font-size-dense)',
94
+ fontWeight: 'var(--ids-comp-size-avatar-initials-typography-font-weight-dense)',
95
+ letterSpacing: 'var(--ids-comp-size-avatar-initials-typography-letter-spacing-dense)',
96
+ lineHeight: 'var(--ids-comp-size-avatar-initials-typography-line-height-dense)',
97
+ },
98
+ '.ids-avatar.ids-avatar-dense:has(.ids-avatar-image)': { padding: '0' },
99
+ '.ids-avatar.ids-avatar-dense .ids-avatar-image': {
100
+ width: 'var(--ids-comp-size-avatar-size-width-dense)',
101
+ height: 'var(--ids-comp-size-avatar-size-height-dense)',
102
+ },
103
+ '.ids-avatar.ids-avatar-primary': {
104
+ color: 'var(--ids-comp-avatar-color-fg-primary-enabled)',
105
+ background: 'var(--ids-comp-avatar-color-bg-primary-enabled)',
106
+ borderColor: 'var(--ids-comp-avatar-color-border-primary-enabled)',
107
+ },
108
+ '.ids-avatar.ids-avatar-primary:hover': {
109
+ background: 'var(--ids-comp-avatar-color-bg-primary-hovered)',
110
+ borderColor: 'var(--ids-comp-avatar-color-border-primary-hovered)',
111
+ },
112
+ '.ids-avatar.ids-avatar-primary:focus': {
113
+ background: 'var(--ids-comp-avatar-color-bg-primary-focused)',
114
+ borderColor: 'var(--ids-comp-avatar-color-border-primary-focused)',
115
+ },
116
+ '.ids-avatar.ids-avatar-primary:active': {
117
+ background: 'var(--ids-comp-avatar-color-bg-primary-pressed)',
118
+ borderColor: 'var(--ids-comp-avatar-color-border-primary-pressed)',
119
+ },
120
+ '.ids-avatar.ids-avatar-primary .ids-avatar-icon path': { fill: 'var(--ids-comp-avatar-color-fg-primary-enabled)' },
121
+ '.ids-avatar.ids-avatar-secondary': {
122
+ color: 'var(--ids-comp-avatar-color-fg-secondary-enabled)',
123
+ background: 'var(--ids-comp-avatar-color-bg-secondary-enabled)',
124
+ borderColor: 'var(--ids-comp-avatar-color-border-secondary-enabled)',
125
+ },
126
+ '.ids-avatar.ids-avatar-secondary:hover': {
127
+ background: 'var(--ids-comp-avatar-color-bg-secondary-hovered)',
128
+ borderColor: 'var(--ids-comp-avatar-color-border-secondary-hovered)',
129
+ },
130
+ '.ids-avatar.ids-avatar-secondary:focus': {
131
+ background: 'var(--ids-comp-avatar-color-bg-secondary-focused)',
132
+ borderColor: 'var(--ids-comp-avatar-color-border-secondary-focused)',
133
+ },
134
+ '.ids-avatar.ids-avatar-secondary:active': {
135
+ background: 'var(--ids-comp-avatar-color-bg-secondary-pressed)',
136
+ borderColor: 'var(--ids-comp-avatar-color-border-secondary-pressed)',
137
+ },
138
+ '.ids-avatar.ids-avatar-secondary .ids-avatar-icon path': { fill: 'var(--ids-comp-avatar-color-fg-secondary-enabled)' },
139
+ '.ids-avatar.ids-avatar-brand': {
140
+ color: 'var(--ids-comp-avatar-color-fg-brand-enabled)',
141
+ background: 'var(--ids-comp-avatar-color-bg-brand-enabled)',
142
+ borderColor: 'var(--ids-comp-avatar-color-border-brand-enabled)',
143
+ },
144
+ '.ids-avatar.ids-avatar-brand:hover': {
145
+ background: 'var(--ids-comp-avatar-color-bg-brand-hovered)',
146
+ borderColor: 'var(--ids-comp-avatar-color-border-brand-hovered)',
147
+ },
148
+ '.ids-avatar.ids-avatar-brand:focus': {
149
+ background: 'var(--ids-comp-avatar-color-bg-brand-focused)',
150
+ borderColor: 'var(--ids-comp-avatar-color-border-brand-focused)',
151
+ },
152
+ '.ids-avatar.ids-avatar-brand:active': {
153
+ background: 'var(--ids-comp-avatar-color-bg-brand-pressed)',
154
+ borderColor: 'var(--ids-comp-avatar-color-border-brand-pressed)',
155
+ },
156
+ '.ids-avatar.ids-avatar-brand .ids-avatar-icon path': { fill: 'var(--ids-comp-avatar-color-fg-brand-enabled)' },
157
+ '.ids-avatar.ids-avatar-error': {
158
+ color: 'var(--ids-comp-avatar-color-fg-error-enabled)',
159
+ background: 'var(--ids-comp-avatar-color-bg-error-enabled)',
160
+ borderColor: 'var(--ids-comp-avatar-color-border-error-enabled)',
161
+ },
162
+ '.ids-avatar.ids-avatar-error:hover': {
163
+ background: 'var(--ids-comp-avatar-color-bg-error-hovered)',
164
+ borderColor: 'var(--ids-comp-avatar-color-border-error-hovered)',
165
+ },
166
+ '.ids-avatar.ids-avatar-error:focus': {
167
+ background: 'var(--ids-comp-avatar-color-bg-error-focused)',
168
+ borderColor: 'var(--ids-comp-avatar-color-border-error-focused)',
169
+ },
170
+ '.ids-avatar.ids-avatar-error:active': {
171
+ background: 'var(--ids-comp-avatar-color-bg-error-pressed)',
172
+ borderColor: 'var(--ids-comp-avatar-color-border-error-pressed)',
173
+ },
174
+ '.ids-avatar.ids-avatar-error .ids-avatar-icon path': { fill: 'var(--ids-comp-avatar-color-fg-error-enabled)' },
175
+ '.ids-avatar.ids-avatar-success': {
176
+ color: 'var(--ids-comp-avatar-color-fg-success-enabled)',
177
+ background: 'var(--ids-comp-avatar-color-bg-success-enabled)',
178
+ borderColor: 'var(--ids-comp-avatar-color-border-success-enabled)',
179
+ },
180
+ '.ids-avatar.ids-avatar-success:hover': {
181
+ background: 'var(--ids-comp-avatar-color-bg-success-hovered)',
182
+ borderColor: 'var(--ids-comp-avatar-color-border-success-hovered)',
183
+ },
184
+ '.ids-avatar.ids-avatar-success:focus': {
185
+ background: 'var(--ids-comp-avatar-color-bg-success-focused)',
186
+ borderColor: 'var(--ids-comp-avatar-color-border-success-focused)',
187
+ },
188
+ '.ids-avatar.ids-avatar-success:active': {
189
+ background: 'var(--ids-comp-avatar-color-bg-success-pressed)',
190
+ borderColor: 'var(--ids-comp-avatar-color-border-success-pressed)',
191
+ },
192
+ '.ids-avatar.ids-avatar-success .ids-avatar-icon path': { fill: 'var(--ids-comp-avatar-color-fg-success-enabled)' },
193
+ '.ids-avatar.ids-avatar-warning': {
194
+ color: 'var(--ids-comp-avatar-color-fg-warning-enabled)',
195
+ background: 'var(--ids-comp-avatar-color-bg-warning-enabled)',
196
+ borderColor: 'var(--ids-comp-avatar-color-border-warning-enabled)',
197
+ },
198
+ '.ids-avatar.ids-avatar-warning:hover': {
199
+ background: 'var(--ids-comp-avatar-color-bg-warning-hovered)',
200
+ borderColor: 'var(--ids-comp-avatar-color-border-warning-hovered)',
201
+ },
202
+ '.ids-avatar.ids-avatar-warning:focus': {
203
+ background: 'var(--ids-comp-avatar-color-bg-warning-focused)',
204
+ borderColor: 'var(--ids-comp-avatar-color-border-warning-focused)',
205
+ },
206
+ '.ids-avatar.ids-avatar-warning:active': {
207
+ background: 'var(--ids-comp-avatar-color-bg-warning-pressed)',
208
+ borderColor: 'var(--ids-comp-avatar-color-border-warning-pressed)',
209
+ },
210
+ '.ids-avatar.ids-avatar-warning .ids-avatar-icon path': { fill: 'var(--ids-comp-avatar-color-fg-warning-enabled)' },
211
+ '.ids-avatar.ids-avatar-light': {
212
+ color: 'var(--ids-comp-avatar-color-fg-light-enabled)',
213
+ background: 'var(--ids-comp-avatar-color-bg-light-enabled)',
214
+ borderColor: 'var(--ids-comp-avatar-color-border-light-enabled)',
215
+ },
216
+ '.ids-avatar.ids-avatar-light:hover': {
217
+ background: 'var(--ids-comp-avatar-color-bg-light-hovered)',
218
+ borderColor: 'var(--ids-comp-avatar-color-border-light-hovered)',
219
+ },
220
+ '.ids-avatar.ids-avatar-light:focus': {
221
+ background: 'var(--ids-comp-avatar-color-bg-light-focused)',
222
+ borderColor: 'var(--ids-comp-avatar-color-border-light-focused)',
223
+ },
224
+ '.ids-avatar.ids-avatar-light:active': {
225
+ background: 'var(--ids-comp-avatar-color-bg-light-pressed)',
226
+ borderColor: 'var(--ids-comp-avatar-color-border-light-pressed)',
227
+ },
228
+ '.ids-avatar.ids-avatar-light .ids-avatar-icon path': { fill: 'var(--ids-comp-avatar-color-fg-light-enabled)' },
229
+ '.ids-avatar.ids-avatar-dark': {
230
+ color: 'var(--ids-comp-avatar-color-fg-dark-enabled)',
231
+ background: 'var(--ids-comp-avatar-color-bg-dark-enabled)',
232
+ borderColor: 'var(--ids-comp-avatar-color-border-dark-enabled)',
233
+ },
234
+ '.ids-avatar.ids-avatar-dark:hover': {
235
+ background: 'var(--ids-comp-avatar-color-bg-dark-hovered)',
236
+ borderColor: 'var(--ids-comp-avatar-color-border-dark-hovered)',
237
+ },
238
+ '.ids-avatar.ids-avatar-dark:focus': {
239
+ background: 'var(--ids-comp-avatar-color-bg-dark-focused)',
240
+ borderColor: 'var(--ids-comp-avatar-color-border-dark-focused)',
241
+ },
242
+ '.ids-avatar.ids-avatar-dark:active': {
243
+ background: 'var(--ids-comp-avatar-color-bg-dark-pressed)',
244
+ borderColor: 'var(--ids-comp-avatar-color-border-dark-pressed)',
245
+ },
246
+ '.ids-avatar.ids-avatar-dark .ids-avatar-icon path': { fill: 'var(--ids-comp-avatar-color-fg-dark-enabled)' },
247
+ '.ids-avatar.ids-avatar-surface': {
248
+ color: 'var(--ids-comp-avatar-color-fg-surface-enabled)',
249
+ background: 'var(--ids-comp-avatar-color-bg-surface-enabled)',
250
+ borderColor: 'var(--ids-comp-avatar-color-border-surface-enabled)',
251
+ },
252
+ '.ids-avatar.ids-avatar-surface:hover': {
253
+ background: 'var(--ids-comp-avatar-color-bg-surface-hovered)',
254
+ borderColor: 'var(--ids-comp-avatar-color-border-surface-hovered)',
255
+ },
256
+ '.ids-avatar.ids-avatar-surface:focus': {
257
+ background: 'var(--ids-comp-avatar-color-bg-surface-focused)',
258
+ borderColor: 'var(--ids-comp-avatar-color-border-surface-focused)',
259
+ },
260
+ '.ids-avatar.ids-avatar-surface:active': {
261
+ background: 'var(--ids-comp-avatar-color-bg-surface-pressed)',
262
+ borderColor: 'var(--ids-comp-avatar-color-border-surface-pressed)',
263
+ },
264
+ '.ids-avatar.ids-avatar-surface .ids-avatar-icon path': { fill: 'var(--ids-comp-avatar-color-fg-surface-enabled)' },
265
+ };
266
+
267
+ addComponents(cssObj);
268
+ };
269
+ };