@i-cell/ids-styles 0.0.2 → 0.0.3

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 (43) hide show
  1. package/dist/accordion/accordion.css +69 -68
  2. package/dist/accordion/accordion.min.css +1 -1
  3. package/dist/accordion/accordion.plugin.js +69 -73
  4. package/dist/action-item/action-item.css +67 -55
  5. package/dist/action-item/action-item.min.css +1 -1
  6. package/dist/action-item/action-item.plugin.js +67 -73
  7. package/dist/action-panel/action-panel.css +29 -28
  8. package/dist/action-panel/action-panel.min.css +1 -1
  9. package/dist/action-panel/action-panel.plugin.js +35 -39
  10. package/dist/avatar/avatar.css +77 -154
  11. package/dist/avatar/avatar.min.css +1 -1
  12. package/dist/avatar/avatar.plugin.js +77 -148
  13. package/dist/button/button.css +134 -178
  14. package/dist/button/button.min.css +1 -1
  15. package/dist/button/button.plugin.js +141 -179
  16. package/dist/card/card.css +137 -184
  17. package/dist/card/card.min.css +1 -1
  18. package/dist/card/card.plugin.js +137 -189
  19. package/dist/checkbox/checkbox.css +554 -0
  20. package/dist/checkbox/checkbox.min.css +1 -0
  21. package/dist/checkbox/checkbox.plugin.js +539 -0
  22. package/dist/components.css +1566 -1326
  23. package/dist/components.min.css +1 -1
  24. package/dist/components.plugin.js +1511 -1374
  25. package/dist/dialog/dialog.css +99 -95
  26. package/dist/dialog/dialog.min.css +1 -1
  27. package/dist/dialog/dialog.plugin.js +103 -102
  28. package/dist/divider/divider.css +21 -23
  29. package/dist/divider/divider.min.css +1 -1
  30. package/dist/divider/divider.plugin.js +22 -30
  31. package/dist/form-elements/message/message.css +165 -0
  32. package/dist/form-elements/message/message.min.css +1 -0
  33. package/dist/form-elements/message/message.plugin.js +116 -0
  34. package/dist/form-elements/required-marker/required-marker.css +6 -0
  35. package/dist/form-elements/required-marker/required-marker.min.css +1 -0
  36. package/dist/form-elements/required-marker/required-marker.plugin.js +15 -0
  37. package/dist/icon-button/icon-button.css +101 -124
  38. package/dist/icon-button/icon-button.min.css +1 -1
  39. package/dist/icon-button/icon-button.plugin.js +108 -125
  40. package/dist/tag/tag.css +104 -417
  41. package/dist/tag/tag.min.css +1 -1
  42. package/dist/tag/tag.plugin.js +111 -418
  43. package/package.json +6 -4
package/dist/action-panel/action-panel.plugin.js CHANGED
@@ -2,87 +2,83 @@
2
2
  module.exports = function ActionPanelPlugin() {
3
3
  return function ({ addComponents }) {
4
4
  const cssObj = {
5
- '.ids-action-panel': { display: 'flex', width: '22.25rem', flexDirection: 'column', alignItems: 'flex-start' },
5
+ '.ids-action-panel': {
6
+ display: 'flex',
7
+ width: '22.25rem',
8
+ flexDirection: 'column',
9
+ alignItems: 'flex-start',
10
+ boxSizing: 'border-box',
11
+ },
6
12
  '.ids-action-panel.ids-action-panel-compact': {
7
- gap: 'var(--ids-comp-size-action-panel-size-gap-compact)',
8
- padding: 'var(--ids-comp-size-action-panel-size-padding-y-compact) var(--ids-comp-size-action-panel-size-padding-x-compact)',
9
- borderRadius: 'var(--ids-comp-size-action-panel-size-border-radius-compact)',
13
+ gap: 'var(--ids-comp-action-panel-size-gap-compact)',
14
+ padding: 'var(--ids-comp-action-panel-size-padding-y-compact) var(--ids-comp-action-panel-size-padding-x-compact)',
15
+ borderRadius: 'var(--ids-comp-action-panel-size-border-radius-compact)',
10
16
  },
11
17
  '.ids-action-panel.ids-action-panel-compact.ids-action-panel-filled.ids-action-panel-outlined': {
12
- border:
13
- 'var(--ids-comp-size-action-panel-size-border-compact) solid var(--ids-comp-action-panel-filled-color-border-light-enabled)',
18
+ border: 'var(--ids-comp-action-panel-size-border-compact) solid var(--ids-comp-action-panel-filled-color-border-light-default)',
14
19
  },
15
20
  '.ids-action-panel.ids-action-panel-compact.ids-action-panel-outlined.ids-action-panel-outlined': {
16
- border:
17
- 'var(--ids-comp-size-action-panel-size-border-compact) solid var(--ids-comp-action-panel-outlined-color-border-light-enabled)',
21
+ border: 'var(--ids-comp-action-panel-size-border-compact) solid var(--ids-comp-action-panel-outlined-color-border-light-default)',
18
22
  },
19
23
  '.ids-action-panel.ids-action-panel-compact.ids-action-panel-elevated.ids-action-panel-outlined': {
20
- border:
21
- 'var(--ids-comp-size-action-panel-size-border-compact) solid var(--ids-comp-action-panel-elevated-color-border-light-enabled)',
24
+ border: 'var(--ids-comp-action-panel-size-border-compact) solid var(--ids-comp-action-panel-elevated-color-border-light-default)',
22
25
  },
23
26
  '.ids-action-panel.ids-action-panel-comfortable': {
24
- gap: 'var(--ids-comp-size-action-panel-size-gap-comfortable)',
25
- padding:
26
- 'var(--ids-comp-size-action-panel-size-padding-y-comfortable) var(--ids-comp-size-action-panel-size-padding-x-comfortable)',
27
- borderRadius: 'var(--ids-comp-size-action-panel-size-border-radius-comfortable)',
27
+ gap: 'var(--ids-comp-action-panel-size-gap-comfortable)',
28
+ padding: 'var(--ids-comp-action-panel-size-padding-y-comfortable) var(--ids-comp-action-panel-size-padding-x-comfortable)',
29
+ borderRadius: 'var(--ids-comp-action-panel-size-border-radius-comfortable)',
28
30
  },
29
31
  '.ids-action-panel.ids-action-panel-comfortable.ids-action-panel-filled.ids-action-panel-outlined': {
30
- border:
31
- 'var(--ids-comp-size-action-panel-size-border-comfortable) solid var(--ids-comp-action-panel-filled-color-border-light-enabled)',
32
+ border: 'var(--ids-comp-action-panel-size-border-comfortable) solid var(--ids-comp-action-panel-filled-color-border-light-default)',
32
33
  },
33
34
  '.ids-action-panel.ids-action-panel-comfortable.ids-action-panel-outlined.ids-action-panel-outlined': {
34
35
  border:
35
- 'var(--ids-comp-size-action-panel-size-border-comfortable) solid var(--ids-comp-action-panel-outlined-color-border-light-enabled)',
36
+ 'var(--ids-comp-action-panel-size-border-comfortable) solid var(--ids-comp-action-panel-outlined-color-border-light-default)',
36
37
  },
37
38
  '.ids-action-panel.ids-action-panel-comfortable.ids-action-panel-elevated.ids-action-panel-outlined': {
38
39
  border:
39
- 'var(--ids-comp-size-action-panel-size-border-comfortable) solid var(--ids-comp-action-panel-elevated-color-border-light-enabled)',
40
+ 'var(--ids-comp-action-panel-size-border-comfortable) solid var(--ids-comp-action-panel-elevated-color-border-light-default)',
40
41
  },
41
42
  '.ids-action-panel.ids-action-panel-spacious': {
42
- gap: 'var(--ids-comp-size-action-panel-size-gap-spacious)',
43
- padding: 'var(--ids-comp-size-action-panel-size-padding-y-spacious) var(--ids-comp-size-action-panel-size-padding-x-spacious)',
44
- borderRadius: 'var(--ids-comp-size-action-panel-size-border-radius-spacious)',
43
+ gap: 'var(--ids-comp-action-panel-size-gap-spacious)',
44
+ padding: 'var(--ids-comp-action-panel-size-padding-y-spacious) var(--ids-comp-action-panel-size-padding-x-spacious)',
45
+ borderRadius: 'var(--ids-comp-action-panel-size-border-radius-spacious)',
45
46
  },
46
47
  '.ids-action-panel.ids-action-panel-spacious.ids-action-panel-filled.ids-action-panel-outlined': {
47
- border:
48
- 'var(--ids-comp-size-action-panel-size-border-spacious) solid var(--ids-comp-action-panel-filled-color-border-light-enabled)',
48
+ border: 'var(--ids-comp-action-panel-size-border-spacious) solid var(--ids-comp-action-panel-filled-color-border-light-default)',
49
49
  },
50
50
  '.ids-action-panel.ids-action-panel-spacious.ids-action-panel-outlined.ids-action-panel-outlined': {
51
- border:
52
- 'var(--ids-comp-size-action-panel-size-border-spacious) solid var(--ids-comp-action-panel-outlined-color-border-light-enabled)',
51
+ border: 'var(--ids-comp-action-panel-size-border-spacious) solid var(--ids-comp-action-panel-outlined-color-border-light-default)',
53
52
  },
54
53
  '.ids-action-panel.ids-action-panel-spacious.ids-action-panel-elevated.ids-action-panel-outlined': {
55
- border:
56
- 'var(--ids-comp-size-action-panel-size-border-spacious) solid var(--ids-comp-action-panel-elevated-color-border-light-enabled)',
54
+ border: 'var(--ids-comp-action-panel-size-border-spacious) solid var(--ids-comp-action-panel-elevated-color-border-light-default)',
57
55
  },
58
56
  '.ids-action-panel.ids-action-panel-dense': {
59
- gap: 'var(--ids-comp-size-action-panel-size-gap-dense)',
60
- padding: 'var(--ids-comp-size-action-panel-size-padding-y-dense) var(--ids-comp-size-action-panel-size-padding-x-dense)',
61
- borderRadius: 'var(--ids-comp-size-action-panel-size-border-radius-dense)',
57
+ gap: 'var(--ids-comp-action-panel-size-gap-dense)',
58
+ padding: 'var(--ids-comp-action-panel-size-padding-y-dense) var(--ids-comp-action-panel-size-padding-x-dense)',
59
+ borderRadius: 'var(--ids-comp-action-panel-size-border-radius-dense)',
62
60
  },
63
61
  '.ids-action-panel.ids-action-panel-dense.ids-action-panel-filled.ids-action-panel-outlined': {
64
- border: 'var(--ids-comp-size-action-panel-size-border-dense) solid var(--ids-comp-action-panel-filled-color-border-light-enabled)',
62
+ border: 'var(--ids-comp-action-panel-size-border-dense) solid var(--ids-comp-action-panel-filled-color-border-light-default)',
65
63
  },
66
64
  '.ids-action-panel.ids-action-panel-dense.ids-action-panel-outlined.ids-action-panel-outlined': {
67
- border:
68
- 'var(--ids-comp-size-action-panel-size-border-dense) solid var(--ids-comp-action-panel-outlined-color-border-light-enabled)',
65
+ border: 'var(--ids-comp-action-panel-size-border-dense) solid var(--ids-comp-action-panel-outlined-color-border-light-default)',
69
66
  },
70
67
  '.ids-action-panel.ids-action-panel-dense.ids-action-panel-elevated.ids-action-panel-outlined': {
71
- border:
72
- 'var(--ids-comp-size-action-panel-size-border-dense) solid var(--ids-comp-action-panel-elevated-color-border-light-enabled)',
68
+ border: 'var(--ids-comp-action-panel-size-border-dense) solid var(--ids-comp-action-panel-elevated-color-border-light-default)',
73
69
  },
74
70
  '.ids-action-panel.ids-action-panel-filled': {
75
71
  boxShadow: '0px 0px 0px 0px rgba(0,0,0,0),0px 0px 0px 0px rgba(0,0,0,0)',
76
- background: 'var(--ids-comp-action-panel-filled-color-bg-light-enabled)',
72
+ background: 'var(--ids-comp-action-panel-filled-color-bg-light-default)',
77
73
  },
78
74
  '.ids-action-panel.ids-action-panel-outlined': {
79
75
  boxShadow: '0px 0px 0px 0px rgba(0,0,0,0),0px 0px 0px 0px rgba(0,0,0,0)',
80
- background: 'var(--ids-comp-action-panel-outlined-color-bg-light-enabled)',
76
+ background: 'var(--ids-comp-action-panel-outlined-color-bg-light-default)',
81
77
  },
82
78
  '.ids-action-panel.ids-action-panel-elevated': {
83
79
  boxShadow:
84
- 'var(--ids-smc-reference-container-effects-shadow-horizontal-none) var(--ids-smc-reference-container-effects-shadow-vertical-xxl) var(--ids-smc-reference-container-effects-shadow-blur-xxxl) var(--ids-smc-reference-container-effects-shadow-spread-xxs) var(--ids-smc-reference-container-effects-shadow-color-dark-darker)',
85
- background: 'var(--ids-comp-action-panel-elevated-color-bg-light-enabled)',
80
+ 'var(--ids-smc-reference-container-effects-shadow-horizontal-none) var(--ids-smc-reference-container-effects-shadow-vertical-xxl) var(--ids-smc-reference-container-effects-shadow-blur-xxxl) var(--ids-smc-reference-container-effects-shadow-spread-xxs) var(--ids-smc-reference-container-effects-shadow-color-dark-default)',
81
+ background: 'var(--ids-comp-action-panel-elevated-color-bg-light-default)',
86
82
  },
87
83
  '.ids-action-panel button:hover': { borderColor: 'rgba(0,0,0,0)' },
88
84
  '.ids-action-panel button:focus': { outline: 'none !important' },
package/dist/avatar/avatar.css CHANGED
@@ -5,6 +5,7 @@
5
5
  align-items: center;
6
6
  flex-direction: column;
7
7
  justify-content: center;
8
+ border-style: solid;
8
9
  }
9
10
  .ids-avatar .ids-avatar-icon {
10
11
  gap: 10px;
@@ -22,98 +23,100 @@
22
23
  }
23
24
  .ids-avatar:focus {
24
25
  outline-offset: 2px;
25
- outline: var(--ids-comp-avatar-focused-outline-size-outline) solid var(--ids-comp-avatar-focused-outline-color-dark-focused);
26
+ outline-style: solid;
27
+ outline-width: var(--ids-comp-avatar-focused-outline-size-outline);
28
+ outline-color: var(--ids-comp-avatar-focused-outline-color-dark-focused);
26
29
  }
27
30
  .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);
31
+ outline-color: var(--ids-comp-avatar-focused-outline-color-light-focused);
29
32
  }
30
33
  .ids-avatar:active {
31
34
  outline: none;
32
35
  }
33
36
  .ids-avatar.ids-avatar-compact {
34
- width: var(--ids-comp-size-avatar-size-height-compact);
35
- height: var(--ids-comp-size-avatar-size-width-compact);
36
- gap: var(--ids-comp-size-avatar-size-gap-compact);
37
- border-radius: var(--ids-comp-size-avatar-size-border-radius-compact);
38
- padding: var(--ids-comp-size-avatar-size-padding-y-compact) var(--ids-comp-size-avatar-size-padding-x-compact);
39
- border: var(--ids-comp-size-avatar-size-border-compact) solid;
40
- font-family: var(--ids-comp-size-avatar-initials-typography-font-family-compact);
41
- font-size: var(--ids-comp-size-avatar-initials-typography-font-size-compact);
42
- font-weight: var(--ids-comp-size-avatar-initials-typography-font-weight-compact);
43
- letter-spacing: var(--ids-comp-size-avatar-initials-typography-letter-spacing-compact);
44
- line-height: var(--ids-comp-size-avatar-initials-typography-line-height-compact);
37
+ width: var(--ids-comp-avatar-size-height-compact);
38
+ height: var(--ids-comp-avatar-size-width-compact);
39
+ gap: var(--ids-comp-avatar-size-gap-compact);
40
+ border-radius: var(--ids-comp-avatar-size-border-radius-compact);
41
+ padding: var(--ids-comp-avatar-size-padding-y-compact) var(--ids-comp-avatar-size-padding-x-compact);
42
+ border: var(--ids-comp-avatar-size-border-compact);
43
+ font-family: var(--ids-comp-avatar-initials-typography-font-family-compact);
44
+ font-size: var(--ids-comp-avatar-initials-typography-font-size-compact);
45
+ font-weight: var(--ids-comp-avatar-initials-typography-font-weight-compact);
46
+ letter-spacing: var(--ids-comp-avatar-initials-typography-letter-spacing-compact);
47
+ line-height: var(--ids-comp-avatar-initials-typography-line-height-compact);
45
48
  }
46
49
  .ids-avatar.ids-avatar-compact:has(.ids-avatar-image) {
47
50
  padding: 0;
48
51
  }
49
52
  .ids-avatar.ids-avatar-compact .ids-avatar-image {
50
- width: var(--ids-comp-size-avatar-size-width-compact);
51
- height: var(--ids-comp-size-avatar-size-height-compact);
53
+ width: var(--ids-comp-avatar-size-width-compact);
54
+ height: var(--ids-comp-avatar-size-height-compact);
52
55
  }
53
56
  .ids-avatar.ids-avatar-comfortable {
54
- width: var(--ids-comp-size-avatar-size-height-comfortable);
55
- height: var(--ids-comp-size-avatar-size-width-comfortable);
56
- gap: var(--ids-comp-size-avatar-size-gap-comfortable);
57
- border-radius: var(--ids-comp-size-avatar-size-border-radius-comfortable);
58
- padding: var(--ids-comp-size-avatar-size-padding-y-comfortable) var(--ids-comp-size-avatar-size-padding-x-comfortable);
59
- border: var(--ids-comp-size-avatar-size-border-comfortable) solid;
60
- font-family: var(--ids-comp-size-avatar-initials-typography-font-family-comfortable);
61
- font-size: var(--ids-comp-size-avatar-initials-typography-font-size-comfortable);
62
- font-weight: var(--ids-comp-size-avatar-initials-typography-font-weight-comfortable);
63
- letter-spacing: var(--ids-comp-size-avatar-initials-typography-letter-spacing-comfortable);
64
- line-height: var(--ids-comp-size-avatar-initials-typography-line-height-comfortable);
57
+ width: var(--ids-comp-avatar-size-height-comfortable);
58
+ height: var(--ids-comp-avatar-size-width-comfortable);
59
+ gap: var(--ids-comp-avatar-size-gap-comfortable);
60
+ border-radius: var(--ids-comp-avatar-size-border-radius-comfortable);
61
+ padding: var(--ids-comp-avatar-size-padding-y-comfortable) var(--ids-comp-avatar-size-padding-x-comfortable);
62
+ border: var(--ids-comp-avatar-size-border-comfortable);
63
+ font-family: var(--ids-comp-avatar-initials-typography-font-family-comfortable);
64
+ font-size: var(--ids-comp-avatar-initials-typography-font-size-comfortable);
65
+ font-weight: var(--ids-comp-avatar-initials-typography-font-weight-comfortable);
66
+ letter-spacing: var(--ids-comp-avatar-initials-typography-letter-spacing-comfortable);
67
+ line-height: var(--ids-comp-avatar-initials-typography-line-height-comfortable);
65
68
  }
66
69
  .ids-avatar.ids-avatar-comfortable:has(.ids-avatar-image) {
67
70
  padding: 0;
68
71
  }
69
72
  .ids-avatar.ids-avatar-comfortable .ids-avatar-image {
70
- width: var(--ids-comp-size-avatar-size-width-comfortable);
71
- height: var(--ids-comp-size-avatar-size-height-comfortable);
73
+ width: var(--ids-comp-avatar-size-width-comfortable);
74
+ height: var(--ids-comp-avatar-size-height-comfortable);
72
75
  }
73
76
  .ids-avatar.ids-avatar-spacious {
74
- width: var(--ids-comp-size-avatar-size-height-spacious);
75
- height: var(--ids-comp-size-avatar-size-width-spacious);
76
- gap: var(--ids-comp-size-avatar-size-gap-spacious);
77
- border-radius: var(--ids-comp-size-avatar-size-border-radius-spacious);
78
- padding: var(--ids-comp-size-avatar-size-padding-y-spacious) var(--ids-comp-size-avatar-size-padding-x-spacious);
79
- border: var(--ids-comp-size-avatar-size-border-spacious) solid;
80
- font-family: var(--ids-comp-size-avatar-initials-typography-font-family-spacious);
81
- font-size: var(--ids-comp-size-avatar-initials-typography-font-size-spacious);
82
- font-weight: var(--ids-comp-size-avatar-initials-typography-font-weight-spacious);
83
- letter-spacing: var(--ids-comp-size-avatar-initials-typography-letter-spacing-spacious);
84
- line-height: var(--ids-comp-size-avatar-initials-typography-line-height-spacious);
77
+ width: var(--ids-comp-avatar-size-height-spacious);
78
+ height: var(--ids-comp-avatar-size-width-spacious);
79
+ gap: var(--ids-comp-avatar-size-gap-spacious);
80
+ border-radius: var(--ids-comp-avatar-size-border-radius-spacious);
81
+ padding: var(--ids-comp-avatar-size-padding-y-spacious) var(--ids-comp-avatar-size-padding-x-spacious);
82
+ border: var(--ids-comp-avatar-size-border-spacious);
83
+ font-family: var(--ids-comp-avatar-initials-typography-font-family-spacious);
84
+ font-size: var(--ids-comp-avatar-initials-typography-font-size-spacious);
85
+ font-weight: var(--ids-comp-avatar-initials-typography-font-weight-spacious);
86
+ letter-spacing: var(--ids-comp-avatar-initials-typography-letter-spacing-spacious);
87
+ line-height: var(--ids-comp-avatar-initials-typography-line-height-spacious);
85
88
  }
86
89
  .ids-avatar.ids-avatar-spacious:has(.ids-avatar-image) {
87
90
  padding: 0;
88
91
  }
89
92
  .ids-avatar.ids-avatar-spacious .ids-avatar-image {
90
- width: var(--ids-comp-size-avatar-size-width-spacious);
91
- height: var(--ids-comp-size-avatar-size-height-spacious);
93
+ width: var(--ids-comp-avatar-size-width-spacious);
94
+ height: var(--ids-comp-avatar-size-height-spacious);
92
95
  }
93
96
  .ids-avatar.ids-avatar-dense {
94
- width: var(--ids-comp-size-avatar-size-height-dense);
95
- height: var(--ids-comp-size-avatar-size-width-dense);
96
- gap: var(--ids-comp-size-avatar-size-gap-dense);
97
- border-radius: var(--ids-comp-size-avatar-size-border-radius-dense);
98
- padding: var(--ids-comp-size-avatar-size-padding-y-dense) var(--ids-comp-size-avatar-size-padding-x-dense);
99
- border: var(--ids-comp-size-avatar-size-border-dense) solid;
100
- font-family: var(--ids-comp-size-avatar-initials-typography-font-family-dense);
101
- font-size: var(--ids-comp-size-avatar-initials-typography-font-size-dense);
102
- font-weight: var(--ids-comp-size-avatar-initials-typography-font-weight-dense);
103
- letter-spacing: var(--ids-comp-size-avatar-initials-typography-letter-spacing-dense);
104
- line-height: var(--ids-comp-size-avatar-initials-typography-line-height-dense);
97
+ width: var(--ids-comp-avatar-size-height-dense);
98
+ height: var(--ids-comp-avatar-size-width-dense);
99
+ gap: var(--ids-comp-avatar-size-gap-dense);
100
+ border-radius: var(--ids-comp-avatar-size-border-radius-dense);
101
+ padding: var(--ids-comp-avatar-size-padding-y-dense) var(--ids-comp-avatar-size-padding-x-dense);
102
+ border: var(--ids-comp-avatar-size-border-dense);
103
+ font-family: var(--ids-comp-avatar-initials-typography-font-family-dense);
104
+ font-size: var(--ids-comp-avatar-initials-typography-font-size-dense);
105
+ font-weight: var(--ids-comp-avatar-initials-typography-font-weight-dense);
106
+ letter-spacing: var(--ids-comp-avatar-initials-typography-letter-spacing-dense);
107
+ line-height: var(--ids-comp-avatar-initials-typography-line-height-dense);
105
108
  }
106
109
  .ids-avatar.ids-avatar-dense:has(.ids-avatar-image) {
107
110
  padding: 0;
108
111
  }
109
112
  .ids-avatar.ids-avatar-dense .ids-avatar-image {
110
- width: var(--ids-comp-size-avatar-size-width-dense);
111
- height: var(--ids-comp-size-avatar-size-height-dense);
113
+ width: var(--ids-comp-avatar-size-width-dense);
114
+ height: var(--ids-comp-avatar-size-height-dense);
112
115
  }
113
116
  .ids-avatar.ids-avatar-primary {
114
- color: var(--ids-comp-avatar-color-fg-primary-enabled);
115
- background: var(--ids-comp-avatar-color-bg-primary-enabled);
116
- border-color: var(--ids-comp-avatar-color-border-primary-enabled);
117
+ color: var(--ids-comp-avatar-color-fg-primary-default);
118
+ background: var(--ids-comp-avatar-color-bg-primary-default);
119
+ border-color: var(--ids-comp-avatar-color-border-primary-default);
117
120
  }
118
121
  .ids-avatar.ids-avatar-primary:hover {
119
122
  background: var(--ids-comp-avatar-color-bg-primary-hovered);
@@ -128,12 +131,12 @@
128
131
  border-color: var(--ids-comp-avatar-color-border-primary-pressed);
129
132
  }
130
133
  .ids-avatar.ids-avatar-primary .ids-avatar-icon path {
131
- fill: var(--ids-comp-avatar-color-fg-primary-enabled);
134
+ fill: var(--ids-comp-avatar-color-fg-primary-default);
132
135
  }
133
136
  .ids-avatar.ids-avatar-secondary {
134
- color: var(--ids-comp-avatar-color-fg-secondary-enabled);
135
- background: var(--ids-comp-avatar-color-bg-secondary-enabled);
136
- border-color: var(--ids-comp-avatar-color-border-secondary-enabled);
137
+ color: var(--ids-comp-avatar-color-fg-secondary-default);
138
+ background: var(--ids-comp-avatar-color-bg-secondary-default);
139
+ border-color: var(--ids-comp-avatar-color-border-secondary-default);
137
140
  }
138
141
  .ids-avatar.ids-avatar-secondary:hover {
139
142
  background: var(--ids-comp-avatar-color-bg-secondary-hovered);
@@ -148,92 +151,12 @@
148
151
  border-color: var(--ids-comp-avatar-color-border-secondary-pressed);
149
152
  }
150
153
  .ids-avatar.ids-avatar-secondary .ids-avatar-icon path {
151
- fill: var(--ids-comp-avatar-color-fg-secondary-enabled);
152
- }
153
- .ids-avatar.ids-avatar-brand {
154
- color: var(--ids-comp-avatar-color-fg-brand-enabled);
155
- background: var(--ids-comp-avatar-color-bg-brand-enabled);
156
- border-color: var(--ids-comp-avatar-color-border-brand-enabled);
157
- }
158
- .ids-avatar.ids-avatar-brand:hover {
159
- background: var(--ids-comp-avatar-color-bg-brand-hovered);
160
- border-color: var(--ids-comp-avatar-color-border-brand-hovered);
161
- }
162
- .ids-avatar.ids-avatar-brand:focus {
163
- background: var(--ids-comp-avatar-color-bg-brand-focused);
164
- border-color: var(--ids-comp-avatar-color-border-brand-focused);
165
- }
166
- .ids-avatar.ids-avatar-brand:active {
167
- background: var(--ids-comp-avatar-color-bg-brand-pressed);
168
- border-color: var(--ids-comp-avatar-color-border-brand-pressed);
169
- }
170
- .ids-avatar.ids-avatar-brand .ids-avatar-icon path {
171
- fill: var(--ids-comp-avatar-color-fg-brand-enabled);
172
- }
173
- .ids-avatar.ids-avatar-error {
174
- color: var(--ids-comp-avatar-color-fg-error-enabled);
175
- background: var(--ids-comp-avatar-color-bg-error-enabled);
176
- border-color: var(--ids-comp-avatar-color-border-error-enabled);
177
- }
178
- .ids-avatar.ids-avatar-error:hover {
179
- background: var(--ids-comp-avatar-color-bg-error-hovered);
180
- border-color: var(--ids-comp-avatar-color-border-error-hovered);
181
- }
182
- .ids-avatar.ids-avatar-error:focus {
183
- background: var(--ids-comp-avatar-color-bg-error-focused);
184
- border-color: var(--ids-comp-avatar-color-border-error-focused);
185
- }
186
- .ids-avatar.ids-avatar-error:active {
187
- background: var(--ids-comp-avatar-color-bg-error-pressed);
188
- border-color: var(--ids-comp-avatar-color-border-error-pressed);
189
- }
190
- .ids-avatar.ids-avatar-error .ids-avatar-icon path {
191
- fill: var(--ids-comp-avatar-color-fg-error-enabled);
192
- }
193
- .ids-avatar.ids-avatar-success {
194
- color: var(--ids-comp-avatar-color-fg-success-enabled);
195
- background: var(--ids-comp-avatar-color-bg-success-enabled);
196
- border-color: var(--ids-comp-avatar-color-border-success-enabled);
197
- }
198
- .ids-avatar.ids-avatar-success:hover {
199
- background: var(--ids-comp-avatar-color-bg-success-hovered);
200
- border-color: var(--ids-comp-avatar-color-border-success-hovered);
201
- }
202
- .ids-avatar.ids-avatar-success:focus {
203
- background: var(--ids-comp-avatar-color-bg-success-focused);
204
- border-color: var(--ids-comp-avatar-color-border-success-focused);
205
- }
206
- .ids-avatar.ids-avatar-success:active {
207
- background: var(--ids-comp-avatar-color-bg-success-pressed);
208
- border-color: var(--ids-comp-avatar-color-border-success-pressed);
209
- }
210
- .ids-avatar.ids-avatar-success .ids-avatar-icon path {
211
- fill: var(--ids-comp-avatar-color-fg-success-enabled);
212
- }
213
- .ids-avatar.ids-avatar-warning {
214
- color: var(--ids-comp-avatar-color-fg-warning-enabled);
215
- background: var(--ids-comp-avatar-color-bg-warning-enabled);
216
- border-color: var(--ids-comp-avatar-color-border-warning-enabled);
217
- }
218
- .ids-avatar.ids-avatar-warning:hover {
219
- background: var(--ids-comp-avatar-color-bg-warning-hovered);
220
- border-color: var(--ids-comp-avatar-color-border-warning-hovered);
221
- }
222
- .ids-avatar.ids-avatar-warning:focus {
223
- background: var(--ids-comp-avatar-color-bg-warning-focused);
224
- border-color: var(--ids-comp-avatar-color-border-warning-focused);
225
- }
226
- .ids-avatar.ids-avatar-warning:active {
227
- background: var(--ids-comp-avatar-color-bg-warning-pressed);
228
- border-color: var(--ids-comp-avatar-color-border-warning-pressed);
229
- }
230
- .ids-avatar.ids-avatar-warning .ids-avatar-icon path {
231
- fill: var(--ids-comp-avatar-color-fg-warning-enabled);
154
+ fill: var(--ids-comp-avatar-color-fg-secondary-default);
232
155
  }
233
156
  .ids-avatar.ids-avatar-light {
234
- color: var(--ids-comp-avatar-color-fg-light-enabled);
235
- background: var(--ids-comp-avatar-color-bg-light-enabled);
236
- border-color: var(--ids-comp-avatar-color-border-light-enabled);
157
+ color: var(--ids-comp-avatar-color-fg-light-default);
158
+ background: var(--ids-comp-avatar-color-bg-light-default);
159
+ border-color: var(--ids-comp-avatar-color-border-light-default);
237
160
  }
238
161
  .ids-avatar.ids-avatar-light:hover {
239
162
  background: var(--ids-comp-avatar-color-bg-light-hovered);
@@ -248,12 +171,12 @@
248
171
  border-color: var(--ids-comp-avatar-color-border-light-pressed);
249
172
  }
250
173
  .ids-avatar.ids-avatar-light .ids-avatar-icon path {
251
- fill: var(--ids-comp-avatar-color-fg-light-enabled);
174
+ fill: var(--ids-comp-avatar-color-fg-light-default);
252
175
  }
253
176
  .ids-avatar.ids-avatar-dark {
254
- color: var(--ids-comp-avatar-color-fg-dark-enabled);
255
- background: var(--ids-comp-avatar-color-bg-dark-enabled);
256
- border-color: var(--ids-comp-avatar-color-border-dark-enabled);
177
+ color: var(--ids-comp-avatar-color-fg-dark-default);
178
+ background: var(--ids-comp-avatar-color-bg-dark-default);
179
+ border-color: var(--ids-comp-avatar-color-border-dark-default);
257
180
  }
258
181
  .ids-avatar.ids-avatar-dark:hover {
259
182
  background: var(--ids-comp-avatar-color-bg-dark-hovered);
@@ -268,12 +191,12 @@
268
191
  border-color: var(--ids-comp-avatar-color-border-dark-pressed);
269
192
  }
270
193
  .ids-avatar.ids-avatar-dark .ids-avatar-icon path {
271
- fill: var(--ids-comp-avatar-color-fg-dark-enabled);
194
+ fill: var(--ids-comp-avatar-color-fg-dark-default);
272
195
  }
273
196
  .ids-avatar.ids-avatar-surface {
274
- color: var(--ids-comp-avatar-color-fg-surface-enabled);
275
- background: var(--ids-comp-avatar-color-bg-surface-enabled);
276
- border-color: var(--ids-comp-avatar-color-border-surface-enabled);
197
+ color: var(--ids-comp-avatar-color-fg-surface-default);
198
+ background: var(--ids-comp-avatar-color-bg-surface-default);
199
+ border-color: var(--ids-comp-avatar-color-border-surface-default);
277
200
  }
278
201
  .ids-avatar.ids-avatar-surface:hover {
279
202
  background: var(--ids-comp-avatar-color-bg-surface-hovered);
@@ -288,5 +211,5 @@
288
211
  border-color: var(--ids-comp-avatar-color-border-surface-pressed);
289
212
  }
290
213
  .ids-avatar.ids-avatar-surface .ids-avatar-icon path {
291
- fill: var(--ids-comp-avatar-color-fg-surface-enabled);
214
+ fill: var(--ids-comp-avatar-color-fg-surface-default);
292
215
  }
package/dist/avatar/avatar.min.css CHANGED
@@ -1 +1 @@
1
- .ids-avatar{display:flex;font-style:normal;text-align:center;align-items:center;flex-direction:column;justify-content:center}.ids-avatar .ids-avatar-icon{gap:10px;display:flex;align-items:center;justify-content:center;flex-direction:column;width:100%;height:100%}.ids-avatar .ids-avatar-image{border-radius:50%;vertical-align:middle;max-width:none}.ids-avatar:focus{outline-offset:2px;outline:var(--ids-comp-avatar-focused-outline-size-outline) solid var(--ids-comp-avatar-focused-outline-color-dark-focused)}.ids-avatar:focus.ids-avatar-light{outline:var(--ids-comp-avatar-focused-outline-size-outline) solid var(--ids-comp-avatar-focused-outline-color-light-focused)}.ids-avatar:active{outline:none}.ids-avatar.ids-avatar-compact{width:var(--ids-comp-size-avatar-size-height-compact);height:var(--ids-comp-size-avatar-size-width-compact);gap:var(--ids-comp-size-avatar-size-gap-compact);border-radius:var(--ids-comp-size-avatar-size-border-radius-compact);padding:var(--ids-comp-size-avatar-size-padding-y-compact) var(--ids-comp-size-avatar-size-padding-x-compact);border:var(--ids-comp-size-avatar-size-border-compact) solid;font-family:var(--ids-comp-size-avatar-initials-typography-font-family-compact);font-size:var(--ids-comp-size-avatar-initials-typography-font-size-compact);font-weight:var(--ids-comp-size-avatar-initials-typography-font-weight-compact);letter-spacing:var(--ids-comp-size-avatar-initials-typography-letter-spacing-compact);line-height:var(--ids-comp-size-avatar-initials-typography-line-height-compact)}.ids-avatar.ids-avatar-compact:has(.ids-avatar-image){padding:0}.ids-avatar.ids-avatar-compact .ids-avatar-image{width:var(--ids-comp-size-avatar-size-width-compact);height:var(--ids-comp-size-avatar-size-height-compact)}.ids-avatar.ids-avatar-comfortable{width:var(--ids-comp-size-avatar-size-height-comfortable);height:var(--ids-comp-size-avatar-size-width-comfortable);gap:var(--ids-comp-size-avatar-size-gap-comfortable);border-radius:var(--ids-comp-size-avatar-size-border-radius-comfortable);padding:var(--ids-comp-size-avatar-size-padding-y-comfortable) var(--ids-comp-size-avatar-size-padding-x-comfortable);border:var(--ids-comp-size-avatar-size-border-comfortable) solid;font-family:var(--ids-comp-size-avatar-initials-typography-font-family-comfortable);font-size:var(--ids-comp-size-avatar-initials-typography-font-size-comfortable);font-weight:var(--ids-comp-size-avatar-initials-typography-font-weight-comfortable);letter-spacing:var(--ids-comp-size-avatar-initials-typography-letter-spacing-comfortable);line-height:var(--ids-comp-size-avatar-initials-typography-line-height-comfortable)}.ids-avatar.ids-avatar-comfortable:has(.ids-avatar-image){padding:0}.ids-avatar.ids-avatar-comfortable .ids-avatar-image{width:var(--ids-comp-size-avatar-size-width-comfortable);height:var(--ids-comp-size-avatar-size-height-comfortable)}.ids-avatar.ids-avatar-spacious{width:var(--ids-comp-size-avatar-size-height-spacious);height:var(--ids-comp-size-avatar-size-width-spacious);gap:var(--ids-comp-size-avatar-size-gap-spacious);border-radius:var(--ids-comp-size-avatar-size-border-radius-spacious);padding:var(--ids-comp-size-avatar-size-padding-y-spacious) var(--ids-comp-size-avatar-size-padding-x-spacious);border:var(--ids-comp-size-avatar-size-border-spacious) solid;font-family:var(--ids-comp-size-avatar-initials-typography-font-family-spacious);font-size:var(--ids-comp-size-avatar-initials-typography-font-size-spacious);font-weight:var(--ids-comp-size-avatar-initials-typography-font-weight-spacious);letter-spacing:var(--ids-comp-size-avatar-initials-typography-letter-spacing-spacious);line-height:var(--ids-comp-size-avatar-initials-typography-line-height-spacious)}.ids-avatar.ids-avatar-spacious:has(.ids-avatar-image){padding:0}.ids-avatar.ids-avatar-spacious .ids-avatar-image{width:var(--ids-comp-size-avatar-size-width-spacious);height:var(--ids-comp-size-avatar-size-height-spacious)}.ids-avatar.ids-avatar-dense{width:var(--ids-comp-size-avatar-size-height-dense);height:var(--ids-comp-size-avatar-size-width-dense);gap:var(--ids-comp-size-avatar-size-gap-dense);border-radius:var(--ids-comp-size-avatar-size-border-radius-dense);padding:var(--ids-comp-size-avatar-size-padding-y-dense) var(--ids-comp-size-avatar-size-padding-x-dense);border:var(--ids-comp-size-avatar-size-border-dense) solid;font-family:var(--ids-comp-size-avatar-initials-typography-font-family-dense);font-size:var(--ids-comp-size-avatar-initials-typography-font-size-dense);font-weight:var(--ids-comp-size-avatar-initials-typography-font-weight-dense);letter-spacing:var(--ids-comp-size-avatar-initials-typography-letter-spacing-dense);line-height:var(--ids-comp-size-avatar-initials-typography-line-height-dense)}.ids-avatar.ids-avatar-dense:has(.ids-avatar-image){padding:0}.ids-avatar.ids-avatar-dense .ids-avatar-image{width:var(--ids-comp-size-avatar-size-width-dense);height:var(--ids-comp-size-avatar-size-height-dense)}.ids-avatar.ids-avatar-primary{color:var(--ids-comp-avatar-color-fg-primary-enabled);background:var(--ids-comp-avatar-color-bg-primary-enabled);border-color:var(--ids-comp-avatar-color-border-primary-enabled)}.ids-avatar.ids-avatar-primary:hover{background:var(--ids-comp-avatar-color-bg-primary-hovered);border-color:var(--ids-comp-avatar-color-border-primary-hovered)}.ids-avatar.ids-avatar-primary:focus{background:var(--ids-comp-avatar-color-bg-primary-focused);border-color:var(--ids-comp-avatar-color-border-primary-focused)}.ids-avatar.ids-avatar-primary:active{background:var(--ids-comp-avatar-color-bg-primary-pressed);border-color:var(--ids-comp-avatar-color-border-primary-pressed)}.ids-avatar.ids-avatar-primary .ids-avatar-icon path{fill:var(--ids-comp-avatar-color-fg-primary-enabled)}.ids-avatar.ids-avatar-secondary{color:var(--ids-comp-avatar-color-fg-secondary-enabled);background:var(--ids-comp-avatar-color-bg-secondary-enabled);border-color:var(--ids-comp-avatar-color-border-secondary-enabled)}.ids-avatar.ids-avatar-secondary:hover{background:var(--ids-comp-avatar-color-bg-secondary-hovered);border-color:var(--ids-comp-avatar-color-border-secondary-hovered)}.ids-avatar.ids-avatar-secondary:focus{background:var(--ids-comp-avatar-color-bg-secondary-focused);border-color:var(--ids-comp-avatar-color-border-secondary-focused)}.ids-avatar.ids-avatar-secondary:active{background:var(--ids-comp-avatar-color-bg-secondary-pressed);border-color:var(--ids-comp-avatar-color-border-secondary-pressed)}.ids-avatar.ids-avatar-secondary .ids-avatar-icon path{fill:var(--ids-comp-avatar-color-fg-secondary-enabled)}.ids-avatar.ids-avatar-brand{color:var(--ids-comp-avatar-color-fg-brand-enabled);background:var(--ids-comp-avatar-color-bg-brand-enabled);border-color:var(--ids-comp-avatar-color-border-brand-enabled)}.ids-avatar.ids-avatar-brand:hover{background:var(--ids-comp-avatar-color-bg-brand-hovered);border-color:var(--ids-comp-avatar-color-border-brand-hovered)}.ids-avatar.ids-avatar-brand:focus{background:var(--ids-comp-avatar-color-bg-brand-focused);border-color:var(--ids-comp-avatar-color-border-brand-focused)}.ids-avatar.ids-avatar-brand:active{background:var(--ids-comp-avatar-color-bg-brand-pressed);border-color:var(--ids-comp-avatar-color-border-brand-pressed)}.ids-avatar.ids-avatar-brand .ids-avatar-icon path{fill:var(--ids-comp-avatar-color-fg-brand-enabled)}.ids-avatar.ids-avatar-error{color:var(--ids-comp-avatar-color-fg-error-enabled);background:var(--ids-comp-avatar-color-bg-error-enabled);border-color:var(--ids-comp-avatar-color-border-error-enabled)}.ids-avatar.ids-avatar-error:hover{background:var(--ids-comp-avatar-color-bg-error-hovered);border-color:var(--ids-comp-avatar-color-border-error-hovered)}.ids-avatar.ids-avatar-error:focus{background:var(--ids-comp-avatar-color-bg-error-focused);border-color:var(--ids-comp-avatar-color-border-error-focused)}.ids-avatar.ids-avatar-error:active{background:var(--ids-comp-avatar-color-bg-error-pressed);border-color:var(--ids-comp-avatar-color-border-error-pressed)}.ids-avatar.ids-avatar-error .ids-avatar-icon path{fill:var(--ids-comp-avatar-color-fg-error-enabled)}.ids-avatar.ids-avatar-success{color:var(--ids-comp-avatar-color-fg-success-enabled);background:var(--ids-comp-avatar-color-bg-success-enabled);border-color:var(--ids-comp-avatar-color-border-success-enabled)}.ids-avatar.ids-avatar-success:hover{background:var(--ids-comp-avatar-color-bg-success-hovered);border-color:var(--ids-comp-avatar-color-border-success-hovered)}.ids-avatar.ids-avatar-success:focus{background:var(--ids-comp-avatar-color-bg-success-focused);border-color:var(--ids-comp-avatar-color-border-success-focused)}.ids-avatar.ids-avatar-success:active{background:var(--ids-comp-avatar-color-bg-success-pressed);border-color:var(--ids-comp-avatar-color-border-success-pressed)}.ids-avatar.ids-avatar-success .ids-avatar-icon path{fill:var(--ids-comp-avatar-color-fg-success-enabled)}.ids-avatar.ids-avatar-warning{color:var(--ids-comp-avatar-color-fg-warning-enabled);background:var(--ids-comp-avatar-color-bg-warning-enabled);border-color:var(--ids-comp-avatar-color-border-warning-enabled)}.ids-avatar.ids-avatar-warning:hover{background:var(--ids-comp-avatar-color-bg-warning-hovered);border-color:var(--ids-comp-avatar-color-border-warning-hovered)}.ids-avatar.ids-avatar-warning:focus{background:var(--ids-comp-avatar-color-bg-warning-focused);border-color:var(--ids-comp-avatar-color-border-warning-focused)}.ids-avatar.ids-avatar-warning:active{background:var(--ids-comp-avatar-color-bg-warning-pressed);border-color:var(--ids-comp-avatar-color-border-warning-pressed)}.ids-avatar.ids-avatar-warning .ids-avatar-icon path{fill:var(--ids-comp-avatar-color-fg-warning-enabled)}.ids-avatar.ids-avatar-light{color:var(--ids-comp-avatar-color-fg-light-enabled);background:var(--ids-comp-avatar-color-bg-light-enabled);border-color:var(--ids-comp-avatar-color-border-light-enabled)}.ids-avatar.ids-avatar-light:hover{background:var(--ids-comp-avatar-color-bg-light-hovered);border-color:var(--ids-comp-avatar-color-border-light-hovered)}.ids-avatar.ids-avatar-light:focus{background:var(--ids-comp-avatar-color-bg-light-focused);border-color:var(--ids-comp-avatar-color-border-light-focused)}.ids-avatar.ids-avatar-light:active{background:var(--ids-comp-avatar-color-bg-light-pressed);border-color:var(--ids-comp-avatar-color-border-light-pressed)}.ids-avatar.ids-avatar-light .ids-avatar-icon path{fill:var(--ids-comp-avatar-color-fg-light-enabled)}.ids-avatar.ids-avatar-dark{color:var(--ids-comp-avatar-color-fg-dark-enabled);background:var(--ids-comp-avatar-color-bg-dark-enabled);border-color:var(--ids-comp-avatar-color-border-dark-enabled)}.ids-avatar.ids-avatar-dark:hover{background:var(--ids-comp-avatar-color-bg-dark-hovered);border-color:var(--ids-comp-avatar-color-border-dark-hovered)}.ids-avatar.ids-avatar-dark:focus{background:var(--ids-comp-avatar-color-bg-dark-focused);border-color:var(--ids-comp-avatar-color-border-dark-focused)}.ids-avatar.ids-avatar-dark:active{background:var(--ids-comp-avatar-color-bg-dark-pressed);border-color:var(--ids-comp-avatar-color-border-dark-pressed)}.ids-avatar.ids-avatar-dark .ids-avatar-icon path{fill:var(--ids-comp-avatar-color-fg-dark-enabled)}.ids-avatar.ids-avatar-surface{color:var(--ids-comp-avatar-color-fg-surface-enabled);background:var(--ids-comp-avatar-color-bg-surface-enabled);border-color:var(--ids-comp-avatar-color-border-surface-enabled)}.ids-avatar.ids-avatar-surface:hover{background:var(--ids-comp-avatar-color-bg-surface-hovered);border-color:var(--ids-comp-avatar-color-border-surface-hovered)}.ids-avatar.ids-avatar-surface:focus{background:var(--ids-comp-avatar-color-bg-surface-focused);border-color:var(--ids-comp-avatar-color-border-surface-focused)}.ids-avatar.ids-avatar-surface:active{background:var(--ids-comp-avatar-color-bg-surface-pressed);border-color:var(--ids-comp-avatar-color-border-surface-pressed)}.ids-avatar.ids-avatar-surface .ids-avatar-icon path{fill:var(--ids-comp-avatar-color-fg-surface-enabled)}
1
+ .ids-avatar{display:flex;font-style:normal;text-align:center;align-items:center;flex-direction:column;justify-content:center;border-style:solid}.ids-avatar .ids-avatar-icon{gap:10px;display:flex;align-items:center;justify-content:center;flex-direction:column;width:100%;height:100%}.ids-avatar .ids-avatar-image{border-radius:50%;vertical-align:middle;max-width:none}.ids-avatar:focus{outline-offset:2px;outline-style:solid;outline-width:var(--ids-comp-avatar-focused-outline-size-outline);outline-color:var(--ids-comp-avatar-focused-outline-color-dark-focused)}.ids-avatar:focus.ids-avatar-light{outline-color:var(--ids-comp-avatar-focused-outline-color-light-focused)}.ids-avatar:active{outline:none}.ids-avatar.ids-avatar-compact{width:var(--ids-comp-avatar-size-height-compact);height:var(--ids-comp-avatar-size-width-compact);gap:var(--ids-comp-avatar-size-gap-compact);border-radius:var(--ids-comp-avatar-size-border-radius-compact);padding:var(--ids-comp-avatar-size-padding-y-compact) var(--ids-comp-avatar-size-padding-x-compact);border:var(--ids-comp-avatar-size-border-compact);font-family:var(--ids-comp-avatar-initials-typography-font-family-compact);font-size:var(--ids-comp-avatar-initials-typography-font-size-compact);font-weight:var(--ids-comp-avatar-initials-typography-font-weight-compact);letter-spacing:var(--ids-comp-avatar-initials-typography-letter-spacing-compact);line-height:var(--ids-comp-avatar-initials-typography-line-height-compact)}.ids-avatar.ids-avatar-compact:has(.ids-avatar-image){padding:0}.ids-avatar.ids-avatar-compact .ids-avatar-image{width:var(--ids-comp-avatar-size-width-compact);height:var(--ids-comp-avatar-size-height-compact)}.ids-avatar.ids-avatar-comfortable{width:var(--ids-comp-avatar-size-height-comfortable);height:var(--ids-comp-avatar-size-width-comfortable);gap:var(--ids-comp-avatar-size-gap-comfortable);border-radius:var(--ids-comp-avatar-size-border-radius-comfortable);padding:var(--ids-comp-avatar-size-padding-y-comfortable) var(--ids-comp-avatar-size-padding-x-comfortable);border:var(--ids-comp-avatar-size-border-comfortable);font-family:var(--ids-comp-avatar-initials-typography-font-family-comfortable);font-size:var(--ids-comp-avatar-initials-typography-font-size-comfortable);font-weight:var(--ids-comp-avatar-initials-typography-font-weight-comfortable);letter-spacing:var(--ids-comp-avatar-initials-typography-letter-spacing-comfortable);line-height:var(--ids-comp-avatar-initials-typography-line-height-comfortable)}.ids-avatar.ids-avatar-comfortable:has(.ids-avatar-image){padding:0}.ids-avatar.ids-avatar-comfortable .ids-avatar-image{width:var(--ids-comp-avatar-size-width-comfortable);height:var(--ids-comp-avatar-size-height-comfortable)}.ids-avatar.ids-avatar-spacious{width:var(--ids-comp-avatar-size-height-spacious);height:var(--ids-comp-avatar-size-width-spacious);gap:var(--ids-comp-avatar-size-gap-spacious);border-radius:var(--ids-comp-avatar-size-border-radius-spacious);padding:var(--ids-comp-avatar-size-padding-y-spacious) var(--ids-comp-avatar-size-padding-x-spacious);border:var(--ids-comp-avatar-size-border-spacious);font-family:var(--ids-comp-avatar-initials-typography-font-family-spacious);font-size:var(--ids-comp-avatar-initials-typography-font-size-spacious);font-weight:var(--ids-comp-avatar-initials-typography-font-weight-spacious);letter-spacing:var(--ids-comp-avatar-initials-typography-letter-spacing-spacious);line-height:var(--ids-comp-avatar-initials-typography-line-height-spacious)}.ids-avatar.ids-avatar-spacious:has(.ids-avatar-image){padding:0}.ids-avatar.ids-avatar-spacious .ids-avatar-image{width:var(--ids-comp-avatar-size-width-spacious);height:var(--ids-comp-avatar-size-height-spacious)}.ids-avatar.ids-avatar-dense{width:var(--ids-comp-avatar-size-height-dense);height:var(--ids-comp-avatar-size-width-dense);gap:var(--ids-comp-avatar-size-gap-dense);border-radius:var(--ids-comp-avatar-size-border-radius-dense);padding:var(--ids-comp-avatar-size-padding-y-dense) var(--ids-comp-avatar-size-padding-x-dense);border:var(--ids-comp-avatar-size-border-dense);font-family:var(--ids-comp-avatar-initials-typography-font-family-dense);font-size:var(--ids-comp-avatar-initials-typography-font-size-dense);font-weight:var(--ids-comp-avatar-initials-typography-font-weight-dense);letter-spacing:var(--ids-comp-avatar-initials-typography-letter-spacing-dense);line-height:var(--ids-comp-avatar-initials-typography-line-height-dense)}.ids-avatar.ids-avatar-dense:has(.ids-avatar-image){padding:0}.ids-avatar.ids-avatar-dense .ids-avatar-image{width:var(--ids-comp-avatar-size-width-dense);height:var(--ids-comp-avatar-size-height-dense)}.ids-avatar.ids-avatar-primary{color:var(--ids-comp-avatar-color-fg-primary-default);background:var(--ids-comp-avatar-color-bg-primary-default);border-color:var(--ids-comp-avatar-color-border-primary-default)}.ids-avatar.ids-avatar-primary:hover{background:var(--ids-comp-avatar-color-bg-primary-hovered);border-color:var(--ids-comp-avatar-color-border-primary-hovered)}.ids-avatar.ids-avatar-primary:focus{background:var(--ids-comp-avatar-color-bg-primary-focused);border-color:var(--ids-comp-avatar-color-border-primary-focused)}.ids-avatar.ids-avatar-primary:active{background:var(--ids-comp-avatar-color-bg-primary-pressed);border-color:var(--ids-comp-avatar-color-border-primary-pressed)}.ids-avatar.ids-avatar-primary .ids-avatar-icon path{fill:var(--ids-comp-avatar-color-fg-primary-default)}.ids-avatar.ids-avatar-secondary{color:var(--ids-comp-avatar-color-fg-secondary-default);background:var(--ids-comp-avatar-color-bg-secondary-default);border-color:var(--ids-comp-avatar-color-border-secondary-default)}.ids-avatar.ids-avatar-secondary:hover{background:var(--ids-comp-avatar-color-bg-secondary-hovered);border-color:var(--ids-comp-avatar-color-border-secondary-hovered)}.ids-avatar.ids-avatar-secondary:focus{background:var(--ids-comp-avatar-color-bg-secondary-focused);border-color:var(--ids-comp-avatar-color-border-secondary-focused)}.ids-avatar.ids-avatar-secondary:active{background:var(--ids-comp-avatar-color-bg-secondary-pressed);border-color:var(--ids-comp-avatar-color-border-secondary-pressed)}.ids-avatar.ids-avatar-secondary .ids-avatar-icon path{fill:var(--ids-comp-avatar-color-fg-secondary-default)}.ids-avatar.ids-avatar-light{color:var(--ids-comp-avatar-color-fg-light-default);background:var(--ids-comp-avatar-color-bg-light-default);border-color:var(--ids-comp-avatar-color-border-light-default)}.ids-avatar.ids-avatar-light:hover{background:var(--ids-comp-avatar-color-bg-light-hovered);border-color:var(--ids-comp-avatar-color-border-light-hovered)}.ids-avatar.ids-avatar-light:focus{background:var(--ids-comp-avatar-color-bg-light-focused);border-color:var(--ids-comp-avatar-color-border-light-focused)}.ids-avatar.ids-avatar-light:active{background:var(--ids-comp-avatar-color-bg-light-pressed);border-color:var(--ids-comp-avatar-color-border-light-pressed)}.ids-avatar.ids-avatar-light .ids-avatar-icon path{fill:var(--ids-comp-avatar-color-fg-light-default)}.ids-avatar.ids-avatar-dark{color:var(--ids-comp-avatar-color-fg-dark-default);background:var(--ids-comp-avatar-color-bg-dark-default);border-color:var(--ids-comp-avatar-color-border-dark-default)}.ids-avatar.ids-avatar-dark:hover{background:var(--ids-comp-avatar-color-bg-dark-hovered);border-color:var(--ids-comp-avatar-color-border-dark-hovered)}.ids-avatar.ids-avatar-dark:focus{background:var(--ids-comp-avatar-color-bg-dark-focused);border-color:var(--ids-comp-avatar-color-border-dark-focused)}.ids-avatar.ids-avatar-dark:active{background:var(--ids-comp-avatar-color-bg-dark-pressed);border-color:var(--ids-comp-avatar-color-border-dark-pressed)}.ids-avatar.ids-avatar-dark .ids-avatar-icon path{fill:var(--ids-comp-avatar-color-fg-dark-default)}.ids-avatar.ids-avatar-surface{color:var(--ids-comp-avatar-color-fg-surface-default);background:var(--ids-comp-avatar-color-bg-surface-default);border-color:var(--ids-comp-avatar-color-border-surface-default)}.ids-avatar.ids-avatar-surface:hover{background:var(--ids-comp-avatar-color-bg-surface-hovered);border-color:var(--ids-comp-avatar-color-border-surface-hovered)}.ids-avatar.ids-avatar-surface:focus{background:var(--ids-comp-avatar-color-bg-surface-focused);border-color:var(--ids-comp-avatar-color-border-surface-focused)}.ids-avatar.ids-avatar-surface:active{background:var(--ids-comp-avatar-color-bg-surface-pressed);border-color:var(--ids-comp-avatar-color-border-surface-pressed)}.ids-avatar.ids-avatar-surface .ids-avatar-icon path{fill:var(--ids-comp-avatar-color-fg-surface-default)}