@i-cell/ids-styles 0.0.32 → 0.0.33

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 (7) hide show
  1. package/dist/components.css +167 -11
  2. package/dist/components.min.css +1 -1
  3. package/dist/components.plugin.js +157 -11
  4. package/dist/menu-item/menu-item.css +167 -11
  5. package/dist/menu-item/menu-item.min.css +1 -1
  6. package/dist/menu-item/menu-item.plugin.js +157 -11
  7. package/package.json +3 -3
package/dist/menu-item/menu-item.plugin.js CHANGED
@@ -2,10 +2,18 @@
2
2
  module.exports = function MenuItemPlugin() {
3
3
  return function ({ addComponents }) {
4
4
  const cssObj = {
5
- '.ids-menu-item': { width: '100%', display: 'inline-flex', flexShrink: 0, alignItems: 'center', justifyContent: 'center' },
5
+ 'a.ids-menu-item:link,a.ids-menu-item:visited': { textDecoration: 'none' },
6
+ '.ids-menu-item': { width: '100%', boxSizing: 'border-box', display: 'inline-flex', flexShrink: 0, alignItems: 'center' },
7
+ '.ids-menu-item.ids-menu-item-no-label': { justifyContent: 'space-between' },
6
8
  '.ids-menu-item .ids-menu-item-label': { overflow: 'hidden', textOverflow: 'ellipsis', fontStyle: 'normal' },
7
- '.ids-menu-item:not(:disabled)': { cursor: 'pointer' },
8
- '.ids-menu-item:disabled': { cursor: 'not-allowed' },
9
+ '.ids-menu-item .ids-menu-item-label--wrapper': {
10
+ display: 'flex',
11
+ flex: '1 1 0',
12
+ alignItems: 'center',
13
+ justifyContent: 'flex-start',
14
+ },
15
+ '.ids-menu-item:not(:is(:disabled,.ids-menu-item-disabled))': { cursor: 'pointer' },
16
+ '.ids-menu-item:is(:disabled,.ids-menu-item-disabled)': { cursor: 'not-allowed' },
9
17
  '.ids-menu-item.ids-menu-item-compact': {
10
18
  gap: 'var(--ids-comp-menu-item-size-gap-compact)',
11
19
  borderRadius: 'var(--ids-comp-menu-item-size-border-radius-compact)',
@@ -32,9 +40,20 @@ module.exports = function MenuItemPlugin() {
32
40
  '.ids-menu-item.ids-menu-item-compact.ids-menu-item-text.ids-menu-item-surface:hover': {
33
41
  borderColor: 'var(--ids-comp-menu-item-text-color-border-surface-hovered)',
34
42
  },
35
- '.ids-menu-item.ids-menu-item-compact.ids-menu-item-text.ids-menu-item-surface:disabled': {
43
+ '.ids-menu-item.ids-menu-item-compact.ids-menu-item-text.ids-menu-item-surface:is(:disabled,.ids-menu-item-disabled)': {
36
44
  borderColor: 'var(--ids-comp-menu-item-text-color-border-surface-disabled)',
37
45
  },
46
+ '.ids-menu-item.ids-menu-item-compact.ids-menu-item-text.ids-menu-item-light': {
47
+ borderStyle: 'solid',
48
+ borderWidth: 'var(--ids-comp-menu-item-size-border-width-compact)',
49
+ borderColor: 'var(--ids-comp-menu-item-text-color-border-light-default)',
50
+ },
51
+ '.ids-menu-item.ids-menu-item-compact.ids-menu-item-text.ids-menu-item-light:hover': {
52
+ borderColor: 'var(--ids-comp-menu-item-text-color-border-light-hovered)',
53
+ },
54
+ '.ids-menu-item.ids-menu-item-compact.ids-menu-item-text.ids-menu-item-light:is(:disabled,.ids-menu-item-disabled)': {
55
+ borderColor: 'var(--ids-comp-menu-item-text-color-border-light-disabled)',
56
+ },
38
57
  '.ids-menu-item.ids-menu-item-compact.ids-menu-item-filled.ids-menu-item-surface': {
39
58
  borderStyle: 'solid',
40
59
  borderWidth: 'var(--ids-comp-menu-item-size-border-width-compact)',
@@ -43,9 +62,20 @@ module.exports = function MenuItemPlugin() {
43
62
  '.ids-menu-item.ids-menu-item-compact.ids-menu-item-filled.ids-menu-item-surface:hover': {
44
63
  borderColor: 'var(--ids-comp-menu-item-filled-color-border-surface-hovered)',
45
64
  },
46
- '.ids-menu-item.ids-menu-item-compact.ids-menu-item-filled.ids-menu-item-surface:disabled': {
65
+ '.ids-menu-item.ids-menu-item-compact.ids-menu-item-filled.ids-menu-item-surface:is(:disabled,.ids-menu-item-disabled)': {
47
66
  borderColor: 'var(--ids-comp-menu-item-filled-color-border-surface-disabled)',
48
67
  },
68
+ '.ids-menu-item.ids-menu-item-compact.ids-menu-item-filled.ids-menu-item-light': {
69
+ borderStyle: 'solid',
70
+ borderWidth: 'var(--ids-comp-menu-item-size-border-width-compact)',
71
+ borderColor: 'var(--ids-comp-menu-item-filled-color-border-light-default)',
72
+ },
73
+ '.ids-menu-item.ids-menu-item-compact.ids-menu-item-filled.ids-menu-item-light:hover': {
74
+ borderColor: 'var(--ids-comp-menu-item-filled-color-border-light-hovered)',
75
+ },
76
+ '.ids-menu-item.ids-menu-item-compact.ids-menu-item-filled.ids-menu-item-light:is(:disabled,.ids-menu-item-disabled)': {
77
+ borderColor: 'var(--ids-comp-menu-item-filled-color-border-light-disabled)',
78
+ },
49
79
  '.ids-menu-item.ids-menu-item-comfortable': {
50
80
  gap: 'var(--ids-comp-menu-item-size-gap-comfortable)',
51
81
  borderRadius: 'var(--ids-comp-menu-item-size-border-radius-comfortable)',
@@ -72,9 +102,20 @@ module.exports = function MenuItemPlugin() {
72
102
  '.ids-menu-item.ids-menu-item-comfortable.ids-menu-item-text.ids-menu-item-surface:hover': {
73
103
  borderColor: 'var(--ids-comp-menu-item-text-color-border-surface-hovered)',
74
104
  },
75
- '.ids-menu-item.ids-menu-item-comfortable.ids-menu-item-text.ids-menu-item-surface:disabled': {
105
+ '.ids-menu-item.ids-menu-item-comfortable.ids-menu-item-text.ids-menu-item-surface:is(:disabled,.ids-menu-item-disabled)': {
76
106
  borderColor: 'var(--ids-comp-menu-item-text-color-border-surface-disabled)',
77
107
  },
108
+ '.ids-menu-item.ids-menu-item-comfortable.ids-menu-item-text.ids-menu-item-light': {
109
+ borderStyle: 'solid',
110
+ borderWidth: 'var(--ids-comp-menu-item-size-border-width-comfortable)',
111
+ borderColor: 'var(--ids-comp-menu-item-text-color-border-light-default)',
112
+ },
113
+ '.ids-menu-item.ids-menu-item-comfortable.ids-menu-item-text.ids-menu-item-light:hover': {
114
+ borderColor: 'var(--ids-comp-menu-item-text-color-border-light-hovered)',
115
+ },
116
+ '.ids-menu-item.ids-menu-item-comfortable.ids-menu-item-text.ids-menu-item-light:is(:disabled,.ids-menu-item-disabled)': {
117
+ borderColor: 'var(--ids-comp-menu-item-text-color-border-light-disabled)',
118
+ },
78
119
  '.ids-menu-item.ids-menu-item-comfortable.ids-menu-item-filled.ids-menu-item-surface': {
79
120
  borderStyle: 'solid',
80
121
  borderWidth: 'var(--ids-comp-menu-item-size-border-width-comfortable)',
@@ -83,9 +124,20 @@ module.exports = function MenuItemPlugin() {
83
124
  '.ids-menu-item.ids-menu-item-comfortable.ids-menu-item-filled.ids-menu-item-surface:hover': {
84
125
  borderColor: 'var(--ids-comp-menu-item-filled-color-border-surface-hovered)',
85
126
  },
86
- '.ids-menu-item.ids-menu-item-comfortable.ids-menu-item-filled.ids-menu-item-surface:disabled': {
127
+ '.ids-menu-item.ids-menu-item-comfortable.ids-menu-item-filled.ids-menu-item-surface:is(:disabled,.ids-menu-item-disabled)': {
87
128
  borderColor: 'var(--ids-comp-menu-item-filled-color-border-surface-disabled)',
88
129
  },
130
+ '.ids-menu-item.ids-menu-item-comfortable.ids-menu-item-filled.ids-menu-item-light': {
131
+ borderStyle: 'solid',
132
+ borderWidth: 'var(--ids-comp-menu-item-size-border-width-comfortable)',
133
+ borderColor: 'var(--ids-comp-menu-item-filled-color-border-light-default)',
134
+ },
135
+ '.ids-menu-item.ids-menu-item-comfortable.ids-menu-item-filled.ids-menu-item-light:hover': {
136
+ borderColor: 'var(--ids-comp-menu-item-filled-color-border-light-hovered)',
137
+ },
138
+ '.ids-menu-item.ids-menu-item-comfortable.ids-menu-item-filled.ids-menu-item-light:is(:disabled,.ids-menu-item-disabled)': {
139
+ borderColor: 'var(--ids-comp-menu-item-filled-color-border-light-disabled)',
140
+ },
89
141
  '.ids-menu-item.ids-menu-item-spacious': {
90
142
  gap: 'var(--ids-comp-menu-item-size-gap-spacious)',
91
143
  borderRadius: 'var(--ids-comp-menu-item-size-border-radius-spacious)',
@@ -112,9 +164,20 @@ module.exports = function MenuItemPlugin() {
112
164
  '.ids-menu-item.ids-menu-item-spacious.ids-menu-item-text.ids-menu-item-surface:hover': {
113
165
  borderColor: 'var(--ids-comp-menu-item-text-color-border-surface-hovered)',
114
166
  },
115
- '.ids-menu-item.ids-menu-item-spacious.ids-menu-item-text.ids-menu-item-surface:disabled': {
167
+ '.ids-menu-item.ids-menu-item-spacious.ids-menu-item-text.ids-menu-item-surface:is(:disabled,.ids-menu-item-disabled)': {
116
168
  borderColor: 'var(--ids-comp-menu-item-text-color-border-surface-disabled)',
117
169
  },
170
+ '.ids-menu-item.ids-menu-item-spacious.ids-menu-item-text.ids-menu-item-light': {
171
+ borderStyle: 'solid',
172
+ borderWidth: 'var(--ids-comp-menu-item-size-border-width-spacious)',
173
+ borderColor: 'var(--ids-comp-menu-item-text-color-border-light-default)',
174
+ },
175
+ '.ids-menu-item.ids-menu-item-spacious.ids-menu-item-text.ids-menu-item-light:hover': {
176
+ borderColor: 'var(--ids-comp-menu-item-text-color-border-light-hovered)',
177
+ },
178
+ '.ids-menu-item.ids-menu-item-spacious.ids-menu-item-text.ids-menu-item-light:is(:disabled,.ids-menu-item-disabled)': {
179
+ borderColor: 'var(--ids-comp-menu-item-text-color-border-light-disabled)',
180
+ },
118
181
  '.ids-menu-item.ids-menu-item-spacious.ids-menu-item-filled.ids-menu-item-surface': {
119
182
  borderStyle: 'solid',
120
183
  borderWidth: 'var(--ids-comp-menu-item-size-border-width-spacious)',
@@ -123,9 +186,20 @@ module.exports = function MenuItemPlugin() {
123
186
  '.ids-menu-item.ids-menu-item-spacious.ids-menu-item-filled.ids-menu-item-surface:hover': {
124
187
  borderColor: 'var(--ids-comp-menu-item-filled-color-border-surface-hovered)',
125
188
  },
126
- '.ids-menu-item.ids-menu-item-spacious.ids-menu-item-filled.ids-menu-item-surface:disabled': {
189
+ '.ids-menu-item.ids-menu-item-spacious.ids-menu-item-filled.ids-menu-item-surface:is(:disabled,.ids-menu-item-disabled)': {
127
190
  borderColor: 'var(--ids-comp-menu-item-filled-color-border-surface-disabled)',
128
191
  },
192
+ '.ids-menu-item.ids-menu-item-spacious.ids-menu-item-filled.ids-menu-item-light': {
193
+ borderStyle: 'solid',
194
+ borderWidth: 'var(--ids-comp-menu-item-size-border-width-spacious)',
195
+ borderColor: 'var(--ids-comp-menu-item-filled-color-border-light-default)',
196
+ },
197
+ '.ids-menu-item.ids-menu-item-spacious.ids-menu-item-filled.ids-menu-item-light:hover': {
198
+ borderColor: 'var(--ids-comp-menu-item-filled-color-border-light-hovered)',
199
+ },
200
+ '.ids-menu-item.ids-menu-item-spacious.ids-menu-item-filled.ids-menu-item-light:is(:disabled,.ids-menu-item-disabled)': {
201
+ borderColor: 'var(--ids-comp-menu-item-filled-color-border-light-disabled)',
202
+ },
129
203
  '.ids-menu-item.ids-menu-item-text.ids-menu-item-surface': {
130
204
  color: 'var(--ids-comp-menu-item-text-color-fg-label-surface-default)',
131
205
  background: 'var(--ids-comp-menu-item-text-color-bg-surface-default)',
@@ -146,10 +220,33 @@ module.exports = function MenuItemPlugin() {
146
220
  '.ids-menu-item.ids-menu-item-text.ids-menu-item-surface:active': {
147
221
  background: 'var(--ids-comp-menu-item-text-color-bg-surface-pressed)',
148
222
  },
149
- '.ids-menu-item.ids-menu-item-text.ids-menu-item-surface:disabled': {
223
+ '.ids-menu-item.ids-menu-item-text.ids-menu-item-surface:is(:disabled,.ids-menu-item-disabled)': {
150
224
  color: 'var(--ids-comp-menu-item-text-color-fg-label-surface-disabled)',
151
225
  background: 'var(--ids-comp-menu-item-text-color-bg-surface-disabled)',
152
226
  },
227
+ '.ids-menu-item.ids-menu-item-text.ids-menu-item-light': {
228
+ color: 'var(--ids-comp-menu-item-text-color-fg-label-light-default)',
229
+ background: 'var(--ids-comp-menu-item-text-color-bg-light-default)',
230
+ },
231
+ '.ids-menu-item.ids-menu-item-text.ids-menu-item-light.ids-menu-item-active': {
232
+ color: 'var(--ids-comp-menu-item-text-color-fg-label-light-active)',
233
+ background: 'var(--ids-comp-menu-item-text-color-bg-light-active)',
234
+ },
235
+ '.ids-menu-item.ids-menu-item-text.ids-menu-item-light:hover': {
236
+ color: 'var(--ids-comp-menu-item-text-color-fg-label-light-hovered)',
237
+ background: 'var(--ids-comp-menu-item-text-color-bg-light-hovered)',
238
+ },
239
+ '.ids-menu-item.ids-menu-item-text.ids-menu-item-light:focus,.ids-menu-item.ids-menu-item-text.ids-menu-item-light:focus-visible': {
240
+ color: 'var(--ids-comp-menu-item-text-color-fg-label-light-focused)',
241
+ background: 'var(--ids-comp-menu-item-text-color-bg-light-focused)',
242
+ },
243
+ '.ids-menu-item.ids-menu-item-text.ids-menu-item-light:active': {
244
+ background: 'var(--ids-comp-menu-item-text-color-bg-light-pressed)',
245
+ },
246
+ '.ids-menu-item.ids-menu-item-text.ids-menu-item-light:is(:disabled,.ids-menu-item-disabled)': {
247
+ color: 'var(--ids-comp-menu-item-text-color-fg-label-light-disabled)',
248
+ background: 'var(--ids-comp-menu-item-text-color-bg-light-disabled)',
249
+ },
153
250
  '.ids-menu-item.ids-menu-item-filled.ids-menu-item-surface': {
154
251
  color: 'var(--ids-comp-menu-item-filled-color-fg-label-surface-default)',
155
252
  background: 'var(--ids-comp-menu-item-filled-color-bg-surface-default)',
@@ -170,10 +267,59 @@ module.exports = function MenuItemPlugin() {
170
267
  '.ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:active': {
171
268
  background: 'var(--ids-comp-menu-item-filled-color-bg-surface-pressed)',
172
269
  },
173
- '.ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:disabled': {
270
+ '.ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:is(:disabled,.ids-menu-item-disabled)': {
174
271
  color: 'var(--ids-comp-menu-item-filled-color-fg-label-surface-disabled)',
175
272
  background: 'var(--ids-comp-menu-item-filled-color-bg-surface-disabled)',
176
273
  },
274
+ '.ids-menu-item.ids-menu-item-filled.ids-menu-item-light': {
275
+ color: 'var(--ids-comp-menu-item-filled-color-fg-label-light-default)',
276
+ background: 'var(--ids-comp-menu-item-filled-color-bg-light-default)',
277
+ },
278
+ '.ids-menu-item.ids-menu-item-filled.ids-menu-item-light.ids-menu-item-active': {
279
+ color: 'var(--ids-comp-menu-item-filled-color-fg-label-light-active)',
280
+ background: 'var(--ids-comp-menu-item-filled-color-bg-light-active)',
281
+ },
282
+ '.ids-menu-item.ids-menu-item-filled.ids-menu-item-light:hover': {
283
+ color: 'var(--ids-comp-menu-item-filled-color-fg-label-light-hovered)',
284
+ background: 'var(--ids-comp-menu-item-filled-color-bg-light-hovered)',
285
+ },
286
+ '.ids-menu-item.ids-menu-item-filled.ids-menu-item-light:focus,.ids-menu-item.ids-menu-item-filled.ids-menu-item-light:focus-visible':
287
+ {
288
+ color: 'var(--ids-comp-menu-item-filled-color-fg-label-light-focused)',
289
+ background: 'var(--ids-comp-menu-item-filled-color-bg-light-focused)',
290
+ },
291
+ '.ids-menu-item.ids-menu-item-filled.ids-menu-item-light:active': {
292
+ background: 'var(--ids-comp-menu-item-filled-color-bg-light-pressed)',
293
+ },
294
+ '.ids-menu-item.ids-menu-item-filled.ids-menu-item-light:is(:disabled,.ids-menu-item-disabled)': {
295
+ color: 'var(--ids-comp-menu-item-filled-color-fg-label-light-disabled)',
296
+ background: 'var(--ids-comp-menu-item-filled-color-bg-light-disabled)',
297
+ },
298
+ '.ids-active-indicator': { display: 'flex', flexDirection: 'column', justifyContent: 'center', position: 'relative' },
299
+ '.ids-active-indicator.ids-active-indicator--active:has(.ids-menu-item)::after': {
300
+ content: '""',
301
+ position: 'absolute',
302
+ width: '100%',
303
+ bottom: '0',
304
+ },
305
+ '.ids-active-indicator.ids-active-indicator--active:has(.ids-menu-item.ids-menu-item-compact)::after': {
306
+ height: 'var(--ids-comp-menu-item-active-indicator-size-height-compact)',
307
+ borderRadius: 'var(--ids-comp-menu-item-active-indicator-size-border-radius-compact)',
308
+ },
309
+ '.ids-active-indicator.ids-active-indicator--active:has(.ids-menu-item.ids-menu-item-comfortable)::after': {
310
+ height: 'var(--ids-comp-menu-item-active-indicator-size-height-comfortable)',
311
+ borderRadius: 'var(--ids-comp-menu-item-active-indicator-size-border-radius-comfortable)',
312
+ },
313
+ '.ids-active-indicator.ids-active-indicator--active:has(.ids-menu-item.ids-menu-item-spacious)::after': {
314
+ height: 'var(--ids-comp-menu-item-active-indicator-size-height-spacious)',
315
+ borderRadius: 'var(--ids-comp-menu-item-active-indicator-size-border-radius-spacious)',
316
+ },
317
+ '.ids-active-indicator.ids-active-indicator--active:has(.ids-menu-item.ids-menu-item-surface)::after': {
318
+ backgroundColor: 'var(--ids-comp-menu-item-active-indicator-color-bg-surface-default)',
319
+ },
320
+ '.ids-active-indicator.ids-active-indicator--active:has(.ids-menu-item.ids-menu-item-light)::after': {
321
+ backgroundColor: 'var(--ids-comp-menu-item-active-indicator-color-bg-light-default)',
322
+ },
177
323
  };
178
324
 
179
325
  addComponents(cssObj);
package/package.json CHANGED
@@ -1,11 +1,11 @@
1
1
  {
2
2
  "name": "@i-cell/ids-styles",
3
- "version": "0.0.32",
3
+ "version": "0.0.33",
4
4
  "private": false,
5
5
  "description": "Stylesheets for i-Cell Design System UI Kit components (currently Vue and Angular)",
6
6
  "scripts": {
7
7
  "build": "gulp",
8
- "watch": "gulp watch",
8
+ "watch": "npm run build && gulp watch",
9
9
  "prepack": "npm run build",
10
10
  "prepublish": "npm run build",
11
11
  "check-missing-tokens": "npm run build && node scripts/check-missing-tokens.mjs ./dist",
@@ -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.27",
38
+ "@i-cell/ids-tokens": "0.0.29",
39
39
  "commander": "^12.1.0",
40
40
  "gulp": "^5.0.0",
41
41
  "gulp-prettier": "^6.0.0",