@i-cell/ids-styles 0.0.15 → 0.0.16

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/avatar/avatar.css +176 -207
  2. package/dist/avatar/avatar.min.css +1 -1
  3. package/dist/avatar/avatar.plugin.js +168 -181
  4. package/dist/components.css +176 -207
  5. package/dist/components.min.css +1 -1
  6. package/dist/components.plugin.js +167 -180
  7. package/package.json +2 -2
package/dist/components.plugin.js CHANGED
@@ -322,207 +322,194 @@ module.exports = function ComponentsPlugin() {
322
322
  color: 'var(--ids-comp-accordion-summary-filled-color-fg-icon-disabled)',
323
323
  },
324
324
  '.ids-avatar': {
325
- display: 'flex',
326
- fontStyle: 'normal',
327
- textAlign: 'center',
328
- alignItems: 'center',
329
- flexDirection: 'column',
325
+ display: 'inline-flex',
330
326
  justifyContent: 'center',
331
- borderStyle: 'solid',
332
- },
333
- '.ids-avatar:not(:disabled)': { cursor: 'pointer' },
334
- '.ids-avatar:disabled': { cursor: 'not-allowed' },
335
- '.ids-avatar .ids-avatar-icon': {
336
- gap: '10px',
337
- display: 'flex',
338
327
  alignItems: 'center',
339
- justifyContent: 'center',
340
- flexDirection: 'column',
341
- width: '100%',
342
- height: '100%',
328
+ flexShrink: 0,
329
+ borderStyle: 'solid',
330
+ overflow: 'hidden',
343
331
  },
344
- '.ids-avatar .ids-avatar-image': { borderRadius: '50%', verticalAlign: 'middle', maxWidth: 'none' },
345
- '.ids-avatar:focus,.ids-avatar:focus-visible': { outlineOffset: '2px', outlineStyle: 'solid' },
346
- '.ids-avatar:active': { outline: 'none' },
347
- '.ids-avatar.ids-avatar-compact': {
348
- width: 'var(--ids-comp-avatar-size-height-compact)',
349
- height: 'var(--ids-comp-avatar-size-width-compact)',
350
- gap: 'var(--ids-comp-avatar-size-gap-compact)',
351
- borderRadius: 'var(--ids-comp-avatar-size-border-radius-compact)',
352
- padding: 'var(--ids-comp-avatar-size-padding-y-compact) var(--ids-comp-avatar-size-padding-x-compact)',
353
- border: 'var(--ids-comp-avatar-size-border-compact)',
354
- fontFamily: 'var(--ids-comp-avatar-initials-typography-font-family-compact)',
355
- fontSize: 'var(--ids-comp-avatar-initials-typography-font-size-compact)',
356
- fontWeight: 'var(--ids-comp-avatar-initials-typography-font-weight-compact)',
357
- letterSpacing: 'var(--ids-comp-avatar-initials-typography-letter-spacing-compact)',
358
- lineHeight: 'var(--ids-comp-avatar-initials-typography-line-height-compact)',
359
- },
360
- '.ids-avatar.ids-avatar-compact:focus,.ids-avatar.ids-avatar-compact:focus-visible': {
361
- outlineWidth: 'var(--ids-comp-avatar-focused-outline-size-outline)',
362
- },
363
- '.ids-avatar.ids-avatar-compact:has(.ids-avatar-image)': { padding: '0' },
364
- '.ids-avatar.ids-avatar-compact .ids-avatar-image': {
365
- width: 'var(--ids-comp-avatar-size-width-compact)',
366
- height: 'var(--ids-comp-avatar-size-height-compact)',
367
- },
368
- '.ids-avatar.ids-avatar-comfortable': {
369
- width: 'var(--ids-comp-avatar-size-height-comfortable)',
370
- height: 'var(--ids-comp-avatar-size-width-comfortable)',
371
- gap: 'var(--ids-comp-avatar-size-gap-comfortable)',
372
- borderRadius: 'var(--ids-comp-avatar-size-border-radius-comfortable)',
373
- padding: 'var(--ids-comp-avatar-size-padding-y-comfortable) var(--ids-comp-avatar-size-padding-x-comfortable)',
374
- border: 'var(--ids-comp-avatar-size-border-comfortable)',
375
- fontFamily: 'var(--ids-comp-avatar-initials-typography-font-family-comfortable)',
376
- fontSize: 'var(--ids-comp-avatar-initials-typography-font-size-comfortable)',
377
- fontWeight: 'var(--ids-comp-avatar-initials-typography-font-weight-comfortable)',
378
- letterSpacing: 'var(--ids-comp-avatar-initials-typography-letter-spacing-comfortable)',
379
- lineHeight: 'var(--ids-comp-avatar-initials-typography-line-height-comfortable)',
380
- },
381
- '.ids-avatar.ids-avatar-comfortable:focus,.ids-avatar.ids-avatar-comfortable:focus-visible': {
382
- outlineWidth: 'var(--ids-comp-avatar-focused-outline-size-outline)',
383
- },
384
- '.ids-avatar.ids-avatar-comfortable:has(.ids-avatar-image)': { padding: '0' },
385
- '.ids-avatar.ids-avatar-comfortable .ids-avatar-image': {
386
- width: 'var(--ids-comp-avatar-size-width-comfortable)',
387
- height: 'var(--ids-comp-avatar-size-height-comfortable)',
388
- },
389
- '.ids-avatar.ids-avatar-spacious': {
390
- width: 'var(--ids-comp-avatar-size-height-spacious)',
391
- height: 'var(--ids-comp-avatar-size-width-spacious)',
392
- gap: 'var(--ids-comp-avatar-size-gap-spacious)',
393
- borderRadius: 'var(--ids-comp-avatar-size-border-radius-spacious)',
394
- padding: 'var(--ids-comp-avatar-size-padding-y-spacious) var(--ids-comp-avatar-size-padding-x-spacious)',
395
- border: 'var(--ids-comp-avatar-size-border-spacious)',
396
- fontFamily: 'var(--ids-comp-avatar-initials-typography-font-family-spacious)',
397
- fontSize: 'var(--ids-comp-avatar-initials-typography-font-size-spacious)',
398
- fontWeight: 'var(--ids-comp-avatar-initials-typography-font-weight-spacious)',
399
- letterSpacing: 'var(--ids-comp-avatar-initials-typography-letter-spacing-spacious)',
400
- lineHeight: 'var(--ids-comp-avatar-initials-typography-line-height-spacious)',
401
- },
402
- '.ids-avatar.ids-avatar-spacious:focus,.ids-avatar.ids-avatar-spacious:focus-visible': {
403
- outlineWidth: 'var(--ids-comp-avatar-focused-outline-size-outline)',
404
- },
405
- '.ids-avatar.ids-avatar-spacious:has(.ids-avatar-image)': { padding: '0' },
406
- '.ids-avatar.ids-avatar-spacious .ids-avatar-image': {
407
- width: 'var(--ids-comp-avatar-size-width-spacious)',
408
- height: 'var(--ids-comp-avatar-size-height-spacious)',
409
- },
410
- '.ids-avatar.ids-avatar-dense': {
411
- width: 'var(--ids-comp-avatar-size-height-dense)',
412
- height: 'var(--ids-comp-avatar-size-width-dense)',
413
- gap: 'var(--ids-comp-avatar-size-gap-dense)',
414
- borderRadius: 'var(--ids-comp-avatar-size-border-radius-dense)',
415
- padding: 'var(--ids-comp-avatar-size-padding-y-dense) var(--ids-comp-avatar-size-padding-x-dense)',
416
- border: 'var(--ids-comp-avatar-size-border-dense)',
417
- fontFamily: 'var(--ids-comp-avatar-initials-typography-font-family-dense)',
418
- fontSize: 'var(--ids-comp-avatar-initials-typography-font-size-dense)',
419
- fontWeight: 'var(--ids-comp-avatar-initials-typography-font-weight-dense)',
420
- letterSpacing: 'var(--ids-comp-avatar-initials-typography-letter-spacing-dense)',
421
- lineHeight: 'var(--ids-comp-avatar-initials-typography-line-height-dense)',
422
- },
423
- '.ids-avatar.ids-avatar-dense:focus,.ids-avatar.ids-avatar-dense:focus-visible': {
424
- outlineWidth: 'var(--ids-comp-avatar-focused-outline-size-outline)',
425
- },
426
- '.ids-avatar.ids-avatar-dense:has(.ids-avatar-image)': { padding: '0' },
427
- '.ids-avatar.ids-avatar-dense .ids-avatar-image': {
428
- width: 'var(--ids-comp-avatar-size-width-dense)',
429
- height: 'var(--ids-comp-avatar-size-height-dense)',
332
+ '.ids-avatar.ids-avatar-type-initials': { flexDirection: 'column', textAlign: 'center', fontStyle: 'normal', color: 'inherit' },
333
+ '.ids-avatar.ids-avatar-type-icon': { flexShrink: 0 },
334
+ '.ids-avatar.ids-avatar-type-icon>.ids-icon': { color: 'inherit' },
335
+ '.ids-avatar.ids-avatar-type-image>img': { width: '100%', height: '100%', objectFit: 'cover' },
336
+ '.ids-avatar.ids-avatar-smallcollection-compact': {
337
+ width: 'var(--ids-comp-avatar-size-smallcollection-width-compact)',
338
+ height: 'var(--ids-comp-avatar-size-smallcollection-height-compact)',
339
+ borderWidth: 'var(--ids-comp-avatar-size-smallcollection-border-compact)',
340
+ borderRadius: 'var(--ids-comp-avatar-size-smallcollection-border-radius-compact)',
341
+ },
342
+ '.ids-avatar.ids-avatar-smallcollection-compact.ids-avatar-type-initials': {
343
+ fontSize: 'var(--ids-comp-avatar-initials-typography-smallcollection-font-size-compact)',
344
+ fontWeight: 'var(--ids-comp-avatar-initials-typography-smallcollection-font-weight-compact)',
345
+ lineHeight: 'var(--ids-comp-avatar-initials-typography-smallcollection-line-height-compact)',
346
+ letterSpacing: 'var(--ids-comp-avatar-initials-typography-smallcollection-letter-spacing-compact)',
347
+ },
348
+ '.ids-avatar.ids-avatar-smallcollection-compact.ids-avatar-type-icon>.ids-icon': {
349
+ width: 'var(--ids-comp-avatar-size-smallcollection-icon-compact)',
350
+ height: 'var(--ids-comp-avatar-size-smallcollection-icon-compact)',
351
+ fontSize: 'var(--ids-comp-avatar-icon-typography-smallcollection-font-size-compact)',
352
+ fontWeight: 'var(--ids-comp-avatar-icon-typography-smallcollection-font-weight-compact)',
353
+ lineHeight: 'var(--ids-comp-avatar-icon-typography-smallcollection-line-height-compact)',
354
+ },
355
+ '.ids-avatar.ids-avatar-smallcollection-comfortable': {
356
+ width: 'var(--ids-comp-avatar-size-smallcollection-width-comfortable)',
357
+ height: 'var(--ids-comp-avatar-size-smallcollection-height-comfortable)',
358
+ borderWidth: 'var(--ids-comp-avatar-size-smallcollection-border-comfortable)',
359
+ borderRadius: 'var(--ids-comp-avatar-size-smallcollection-border-radius-comfortable)',
360
+ },
361
+ '.ids-avatar.ids-avatar-smallcollection-comfortable.ids-avatar-type-initials': {
362
+ fontSize: 'var(--ids-comp-avatar-initials-typography-smallcollection-font-size-comfortable)',
363
+ fontWeight: 'var(--ids-comp-avatar-initials-typography-smallcollection-font-weight-comfortable)',
364
+ lineHeight: 'var(--ids-comp-avatar-initials-typography-smallcollection-line-height-comfortable)',
365
+ letterSpacing: 'var(--ids-comp-avatar-initials-typography-smallcollection-letter-spacing-comfortable)',
366
+ },
367
+ '.ids-avatar.ids-avatar-smallcollection-comfortable.ids-avatar-type-icon>.ids-icon': {
368
+ width: 'var(--ids-comp-avatar-size-smallcollection-icon-comfortable)',
369
+ height: 'var(--ids-comp-avatar-size-smallcollection-icon-comfortable)',
370
+ fontSize: 'var(--ids-comp-avatar-icon-typography-smallcollection-font-size-comfortable)',
371
+ fontWeight: 'var(--ids-comp-avatar-icon-typography-smallcollection-font-weight-comfortable)',
372
+ lineHeight: 'var(--ids-comp-avatar-icon-typography-smallcollection-line-height-comfortable)',
373
+ },
374
+ '.ids-avatar.ids-avatar-smallcollection-spacious': {
375
+ width: 'var(--ids-comp-avatar-size-smallcollection-width-spacious)',
376
+ height: 'var(--ids-comp-avatar-size-smallcollection-height-spacious)',
377
+ borderWidth: 'var(--ids-comp-avatar-size-smallcollection-border-spacious)',
378
+ borderRadius: 'var(--ids-comp-avatar-size-smallcollection-border-radius-spacious)',
379
+ },
380
+ '.ids-avatar.ids-avatar-smallcollection-spacious.ids-avatar-type-initials': {
381
+ fontSize: 'var(--ids-comp-avatar-initials-typography-smallcollection-font-size-spacious)',
382
+ fontWeight: 'var(--ids-comp-avatar-initials-typography-smallcollection-font-weight-spacious)',
383
+ lineHeight: 'var(--ids-comp-avatar-initials-typography-smallcollection-line-height-spacious)',
384
+ letterSpacing: 'var(--ids-comp-avatar-initials-typography-smallcollection-letter-spacing-spacious)',
385
+ },
386
+ '.ids-avatar.ids-avatar-smallcollection-spacious.ids-avatar-type-icon>.ids-icon': {
387
+ width: 'var(--ids-comp-avatar-size-smallcollection-icon-spacious)',
388
+ height: 'var(--ids-comp-avatar-size-smallcollection-icon-spacious)',
389
+ fontSize: 'var(--ids-comp-avatar-icon-typography-smallcollection-font-size-spacious)',
390
+ fontWeight: 'var(--ids-comp-avatar-icon-typography-smallcollection-font-weight-spacious)',
391
+ lineHeight: 'var(--ids-comp-avatar-icon-typography-smallcollection-line-height-spacious)',
392
+ },
393
+ '.ids-avatar.ids-avatar-smallcollection-dense': {
394
+ width: 'var(--ids-comp-avatar-size-smallcollection-width-dense)',
395
+ height: 'var(--ids-comp-avatar-size-smallcollection-height-dense)',
396
+ borderWidth: 'var(--ids-comp-avatar-size-smallcollection-border-dense)',
397
+ borderRadius: 'var(--ids-comp-avatar-size-smallcollection-border-radius-dense)',
398
+ },
399
+ '.ids-avatar.ids-avatar-smallcollection-dense.ids-avatar-type-initials': {
400
+ fontSize: 'var(--ids-comp-avatar-initials-typography-smallcollection-font-size-dense)',
401
+ fontWeight: 'var(--ids-comp-avatar-initials-typography-smallcollection-font-weight-dense)',
402
+ lineHeight: 'var(--ids-comp-avatar-initials-typography-smallcollection-line-height-dense)',
403
+ letterSpacing: 'var(--ids-comp-avatar-initials-typography-smallcollection-letter-spacing-dense)',
404
+ },
405
+ '.ids-avatar.ids-avatar-smallcollection-dense.ids-avatar-type-icon>.ids-icon': {
406
+ width: 'var(--ids-comp-avatar-size-smallcollection-icon-dense)',
407
+ height: 'var(--ids-comp-avatar-size-smallcollection-icon-dense)',
408
+ fontSize: 'var(--ids-comp-avatar-icon-typography-smallcollection-font-size-dense)',
409
+ fontWeight: 'var(--ids-comp-avatar-icon-typography-smallcollection-font-weight-dense)',
410
+ lineHeight: 'var(--ids-comp-avatar-icon-typography-smallcollection-line-height-dense)',
411
+ },
412
+ '.ids-avatar.ids-avatar-bigcollection-compact': {
413
+ width: 'var(--ids-comp-avatar-size-bigcollection-width-compact)',
414
+ height: 'var(--ids-comp-avatar-size-bigcollection-height-compact)',
415
+ borderWidth: 'var(--ids-comp-avatar-size-bigcollection-border-compact)',
416
+ borderRadius: 'var(--ids-comp-avatar-size-bigcollection-border-radius-compact)',
417
+ },
418
+ '.ids-avatar.ids-avatar-bigcollection-compact.ids-avatar-type-initials': {
419
+ fontSize: 'var(--ids-comp-avatar-initials-typography-bigcollection-font-size-compact)',
420
+ fontWeight: 'var(--ids-comp-avatar-initials-typography-bigcollection-font-weight-compact)',
421
+ lineHeight: 'var(--ids-comp-avatar-initials-typography-bigcollection-line-height-compact)',
422
+ letterSpacing: 'var(--ids-comp-avatar-initials-typography-bigcollection-letter-spacing-compact)',
423
+ },
424
+ '.ids-avatar.ids-avatar-bigcollection-compact.ids-avatar-type-icon>.ids-icon': {
425
+ width: 'var(--ids-comp-avatar-size-bigcollection-icon-compact)',
426
+ height: 'var(--ids-comp-avatar-size-bigcollection-icon-compact)',
427
+ fontSize: 'var(--ids-comp-avatar-icon-typography-bigcollection-font-size-compact)',
428
+ fontWeight: 'var(--ids-comp-avatar-icon-typography-bigcollection-font-weight-compact)',
429
+ lineHeight: 'var(--ids-comp-avatar-icon-typography-bigcollection-line-height-compact)',
430
+ },
431
+ '.ids-avatar.ids-avatar-bigcollection-comfortable': {
432
+ width: 'var(--ids-comp-avatar-size-bigcollection-width-comfortable)',
433
+ height: 'var(--ids-comp-avatar-size-bigcollection-height-comfortable)',
434
+ borderWidth: 'var(--ids-comp-avatar-size-bigcollection-border-comfortable)',
435
+ borderRadius: 'var(--ids-comp-avatar-size-bigcollection-border-radius-comfortable)',
436
+ },
437
+ '.ids-avatar.ids-avatar-bigcollection-comfortable.ids-avatar-type-initials': {
438
+ fontSize: 'var(--ids-comp-avatar-initials-typography-bigcollection-font-size-comfortable)',
439
+ fontWeight: 'var(--ids-comp-avatar-initials-typography-bigcollection-font-weight-comfortable)',
440
+ lineHeight: 'var(--ids-comp-avatar-initials-typography-bigcollection-line-height-comfortable)',
441
+ letterSpacing: 'var(--ids-comp-avatar-initials-typography-bigcollection-letter-spacing-comfortable)',
442
+ },
443
+ '.ids-avatar.ids-avatar-bigcollection-comfortable.ids-avatar-type-icon>.ids-icon': {
444
+ width: 'var(--ids-comp-avatar-size-bigcollection-icon-comfortable)',
445
+ height: 'var(--ids-comp-avatar-size-bigcollection-icon-comfortable)',
446
+ fontSize: 'var(--ids-comp-avatar-icon-typography-bigcollection-font-size-comfortable)',
447
+ fontWeight: 'var(--ids-comp-avatar-icon-typography-bigcollection-font-weight-comfortable)',
448
+ lineHeight: 'var(--ids-comp-avatar-icon-typography-bigcollection-line-height-comfortable)',
449
+ },
450
+ '.ids-avatar.ids-avatar-bigcollection-spacious': {
451
+ width: 'var(--ids-comp-avatar-size-bigcollection-width-spacious)',
452
+ height: 'var(--ids-comp-avatar-size-bigcollection-height-spacious)',
453
+ borderWidth: 'var(--ids-comp-avatar-size-bigcollection-border-spacious)',
454
+ borderRadius: 'var(--ids-comp-avatar-size-bigcollection-border-radius-spacious)',
455
+ },
456
+ '.ids-avatar.ids-avatar-bigcollection-spacious.ids-avatar-type-initials': {
457
+ fontSize: 'var(--ids-comp-avatar-initials-typography-bigcollection-font-size-spacious)',
458
+ fontWeight: 'var(--ids-comp-avatar-initials-typography-bigcollection-font-weight-spacious)',
459
+ lineHeight: 'var(--ids-comp-avatar-initials-typography-bigcollection-line-height-spacious)',
460
+ letterSpacing: 'var(--ids-comp-avatar-initials-typography-bigcollection-letter-spacing-spacious)',
461
+ },
462
+ '.ids-avatar.ids-avatar-bigcollection-spacious.ids-avatar-type-icon>.ids-icon': {
463
+ width: 'var(--ids-comp-avatar-size-bigcollection-icon-spacious)',
464
+ height: 'var(--ids-comp-avatar-size-bigcollection-icon-spacious)',
465
+ fontSize: 'var(--ids-comp-avatar-icon-typography-bigcollection-font-size-spacious)',
466
+ fontWeight: 'var(--ids-comp-avatar-icon-typography-bigcollection-font-weight-spacious)',
467
+ lineHeight: 'var(--ids-comp-avatar-icon-typography-bigcollection-line-height-spacious)',
468
+ },
469
+ '.ids-avatar.ids-avatar-bigcollection-dense': {
470
+ width: 'var(--ids-comp-avatar-size-bigcollection-width-dense)',
471
+ height: 'var(--ids-comp-avatar-size-bigcollection-height-dense)',
472
+ borderWidth: 'var(--ids-comp-avatar-size-bigcollection-border-dense)',
473
+ borderRadius: 'var(--ids-comp-avatar-size-bigcollection-border-radius-dense)',
474
+ },
475
+ '.ids-avatar.ids-avatar-bigcollection-dense.ids-avatar-type-initials': {
476
+ fontSize: 'var(--ids-comp-avatar-initials-typography-bigcollection-font-size-dense)',
477
+ fontWeight: 'var(--ids-comp-avatar-initials-typography-bigcollection-font-weight-dense)',
478
+ lineHeight: 'var(--ids-comp-avatar-initials-typography-bigcollection-line-height-dense)',
479
+ letterSpacing: 'var(--ids-comp-avatar-initials-typography-bigcollection-letter-spacing-dense)',
480
+ },
481
+ '.ids-avatar.ids-avatar-bigcollection-dense.ids-avatar-type-icon>.ids-icon': {
482
+ width: 'var(--ids-comp-avatar-size-bigcollection-icon-dense)',
483
+ height: 'var(--ids-comp-avatar-size-bigcollection-icon-dense)',
484
+ fontSize: 'var(--ids-comp-avatar-icon-typography-bigcollection-font-size-dense)',
485
+ fontWeight: 'var(--ids-comp-avatar-icon-typography-bigcollection-font-weight-dense)',
486
+ lineHeight: 'var(--ids-comp-avatar-icon-typography-bigcollection-line-height-dense)',
430
487
  },
431
488
  '.ids-avatar.ids-avatar-primary': {
432
489
  color: 'var(--ids-comp-avatar-color-fg-primary-default)',
433
- background: 'var(--ids-comp-avatar-color-bg-primary-default)',
434
490
  borderColor: 'var(--ids-comp-avatar-color-border-primary-default)',
491
+ background: 'var(--ids-comp-avatar-color-bg-primary-default)',
435
492
  },
436
- '.ids-avatar.ids-avatar-primary:hover': {
437
- background: 'var(--ids-comp-avatar-color-bg-primary-hovered)',
438
- borderColor: 'var(--ids-comp-avatar-color-border-primary-hovered)',
439
- },
440
- '.ids-avatar.ids-avatar-primary:focus,.ids-avatar.ids-avatar-primary:focus-visible': {
441
- background: 'var(--ids-comp-avatar-color-bg-primary-focused)',
442
- borderColor: 'var(--ids-comp-avatar-color-border-primary-focused)',
443
- outlineColor: 'var(--ids-comp-avatar-focused-outline-color-dark-focused)',
444
- },
445
- '.ids-avatar.ids-avatar-primary:active': {
446
- background: 'var(--ids-comp-avatar-color-bg-primary-pressed)',
447
- borderColor: 'var(--ids-comp-avatar-color-border-primary-pressed)',
448
- },
449
- '.ids-avatar.ids-avatar-primary .ids-avatar-icon path': { fill: 'var(--ids-comp-avatar-color-fg-primary-default)' },
450
493
  '.ids-avatar.ids-avatar-secondary': {
451
494
  color: 'var(--ids-comp-avatar-color-fg-secondary-default)',
452
- background: 'var(--ids-comp-avatar-color-bg-secondary-default)',
453
495
  borderColor: 'var(--ids-comp-avatar-color-border-secondary-default)',
496
+ background: 'var(--ids-comp-avatar-color-bg-secondary-default)',
454
497
  },
455
- '.ids-avatar.ids-avatar-secondary:hover': {
456
- background: 'var(--ids-comp-avatar-color-bg-secondary-hovered)',
457
- borderColor: 'var(--ids-comp-avatar-color-border-secondary-hovered)',
458
- },
459
- '.ids-avatar.ids-avatar-secondary:focus,.ids-avatar.ids-avatar-secondary:focus-visible': {
460
- background: 'var(--ids-comp-avatar-color-bg-secondary-focused)',
461
- borderColor: 'var(--ids-comp-avatar-color-border-secondary-focused)',
462
- outlineColor: 'var(--ids-comp-avatar-focused-outline-color-dark-focused)',
463
- },
464
- '.ids-avatar.ids-avatar-secondary:active': {
465
- background: 'var(--ids-comp-avatar-color-bg-secondary-pressed)',
466
- borderColor: 'var(--ids-comp-avatar-color-border-secondary-pressed)',
498
+ '.ids-avatar.ids-avatar-surface': {
499
+ color: 'var(--ids-comp-avatar-color-fg-surface-default)',
500
+ borderColor: 'var(--ids-comp-avatar-color-border-surface-default)',
501
+ background: 'var(--ids-comp-avatar-color-bg-surface-default)',
467
502
  },
468
- '.ids-avatar.ids-avatar-secondary .ids-avatar-icon path': { fill: 'var(--ids-comp-avatar-color-fg-secondary-default)' },
469
503
  '.ids-avatar.ids-avatar-light': {
470
504
  color: 'var(--ids-comp-avatar-color-fg-light-default)',
471
- background: 'var(--ids-comp-avatar-color-bg-light-default)',
472
505
  borderColor: 'var(--ids-comp-avatar-color-border-light-default)',
506
+ background: 'var(--ids-comp-avatar-color-bg-light-default)',
473
507
  },
474
- '.ids-avatar.ids-avatar-light:hover': {
475
- background: 'var(--ids-comp-avatar-color-bg-light-hovered)',
476
- borderColor: 'var(--ids-comp-avatar-color-border-light-hovered)',
477
- },
478
- '.ids-avatar.ids-avatar-light:focus,.ids-avatar.ids-avatar-light:focus-visible': {
479
- background: 'var(--ids-comp-avatar-color-bg-light-focused)',
480
- borderColor: 'var(--ids-comp-avatar-color-border-light-focused)',
481
- outlineColor: 'var(--ids-comp-avatar-focused-outline-color-light-focused)',
482
- },
483
- '.ids-avatar.ids-avatar-light:active': {
484
- background: 'var(--ids-comp-avatar-color-bg-light-pressed)',
485
- borderColor: 'var(--ids-comp-avatar-color-border-light-pressed)',
486
- },
487
- '.ids-avatar.ids-avatar-light .ids-avatar-icon path': { fill: 'var(--ids-comp-avatar-color-fg-light-default)' },
488
508
  '.ids-avatar.ids-avatar-dark': {
489
509
  color: 'var(--ids-comp-avatar-color-fg-dark-default)',
490
- background: 'var(--ids-comp-avatar-color-bg-dark-default)',
491
510
  borderColor: 'var(--ids-comp-avatar-color-border-dark-default)',
511
+ background: 'var(--ids-comp-avatar-color-bg-dark-default)',
492
512
  },
493
- '.ids-avatar.ids-avatar-dark:hover': {
494
- background: 'var(--ids-comp-avatar-color-bg-dark-hovered)',
495
- borderColor: 'var(--ids-comp-avatar-color-border-dark-hovered)',
496
- },
497
- '.ids-avatar.ids-avatar-dark:focus,.ids-avatar.ids-avatar-dark:focus-visible': {
498
- background: 'var(--ids-comp-avatar-color-bg-dark-focused)',
499
- borderColor: 'var(--ids-comp-avatar-color-border-dark-focused)',
500
- outlineColor: 'var(--ids-comp-avatar-focused-outline-color-dark-focused)',
501
- },
502
- '.ids-avatar.ids-avatar-dark:active': {
503
- background: 'var(--ids-comp-avatar-color-bg-dark-pressed)',
504
- borderColor: 'var(--ids-comp-avatar-color-border-dark-pressed)',
505
- },
506
- '.ids-avatar.ids-avatar-dark .ids-avatar-icon path': { fill: 'var(--ids-comp-avatar-color-fg-dark-default)' },
507
- '.ids-avatar.ids-avatar-surface': {
508
- color: 'var(--ids-comp-avatar-color-fg-surface-default)',
509
- background: 'var(--ids-comp-avatar-color-bg-surface-default)',
510
- borderColor: 'var(--ids-comp-avatar-color-border-surface-default)',
511
- },
512
- '.ids-avatar.ids-avatar-surface:hover': {
513
- background: 'var(--ids-comp-avatar-color-bg-surface-hovered)',
514
- borderColor: 'var(--ids-comp-avatar-color-border-surface-hovered)',
515
- },
516
- '.ids-avatar.ids-avatar-surface:focus,.ids-avatar.ids-avatar-surface:focus-visible': {
517
- background: 'var(--ids-comp-avatar-color-bg-surface-focused)',
518
- borderColor: 'var(--ids-comp-avatar-color-border-surface-focused)',
519
- outlineColor: 'var(--ids-comp-avatar-focused-outline-color-dark-focused)',
520
- },
521
- '.ids-avatar.ids-avatar-surface:active': {
522
- background: 'var(--ids-comp-avatar-color-bg-surface-pressed)',
523
- borderColor: 'var(--ids-comp-avatar-color-border-surface-pressed)',
524
- },
525
- '.ids-avatar.ids-avatar-surface .ids-avatar-icon path': { fill: 'var(--ids-comp-avatar-color-fg-surface-default)' },
526
513
  '.ids-button': {
527
514
  flexShrink: 0,
528
515
  width: 'fit-content',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@i-cell/ids-styles",
3
- "version": "0.0.15",
3
+ "version": "0.0.16",
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.25-beta.7",
38
+ "@i-cell/ids-tokens": "0.0.25-beta.8",
39
39
  "commander": "^12.1.0",
40
40
  "gulp": "^5.0.0",
41
41
  "gulp-prettier": "^6.0.0",