@i-cell/ids-styles 0.0.15-beta.9 → 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 (76) hide show
  1. package/dist/accordion/accordion.css +184 -45
  2. package/dist/accordion/accordion.min.css +1 -1
  3. package/dist/accordion/accordion.plugin.js +194 -55
  4. package/dist/avatar/avatar.css +176 -195
  5. package/dist/avatar/avatar.min.css +1 -1
  6. package/dist/avatar/avatar.plugin.js +168 -170
  7. package/dist/button/button.css +788 -656
  8. package/dist/button/button.min.css +1 -1
  9. package/dist/button/button.plugin.js +792 -693
  10. package/dist/card/card.css +61 -35
  11. package/dist/card/card.min.css +1 -1
  12. package/dist/card/card.plugin.js +181 -126
  13. package/dist/checkbox/checkbox.css +57 -29
  14. package/dist/checkbox/checkbox.min.css +1 -1
  15. package/dist/checkbox/checkbox.plugin.js +78 -53
  16. package/dist/checkbox/pseudo-checkbox.css +53 -25
  17. package/dist/checkbox/pseudo-checkbox.min.css +1 -1
  18. package/dist/checkbox/pseudo-checkbox.plugin.js +72 -43
  19. package/dist/components.css +2434 -1796
  20. package/dist/components.min.css +1 -1
  21. package/dist/components.plugin.js +2763 -2126
  22. package/dist/dialog/dialog.css +12 -1
  23. package/dist/dialog/dialog.min.css +1 -1
  24. package/dist/dialog/dialog.plugin.js +11 -4
  25. package/dist/divider/divider.css +0 -3
  26. package/dist/divider/divider.min.css +1 -1
  27. package/dist/divider/divider.plugin.js +1 -1
  28. package/dist/form-elements/form-field/form-field.css +84 -60
  29. package/dist/form-elements/form-field/form-field.min.css +1 -1
  30. package/dist/form-elements/form-field/form-field.plugin.js +84 -60
  31. package/dist/form-elements/message/message.css +21 -12
  32. package/dist/form-elements/message/message.min.css +1 -1
  33. package/dist/form-elements/message/message.plugin.js +21 -4
  34. package/dist/icon/icon.css +3 -2
  35. package/dist/icon/icon.min.css +1 -1
  36. package/dist/icon/icon.plugin.js +3 -2
  37. package/dist/icon-button/icon-button.css +133 -82
  38. package/dist/icon-button/icon-button.min.css +1 -1
  39. package/dist/icon-button/icon-button.plugin.js +256 -182
  40. package/dist/menu-item/menu-item.css +184 -0
  41. package/dist/menu-item/menu-item.min.css +1 -0
  42. package/dist/menu-item/menu-item.plugin.js +181 -0
  43. package/dist/option/option.css +13 -0
  44. package/dist/option/option.min.css +1 -1
  45. package/dist/option/option.plugin.js +13 -1
  46. package/dist/overlay-panel/overlay-panel.css +125 -0
  47. package/dist/overlay-panel/overlay-panel.min.css +1 -0
  48. package/dist/overlay-panel/overlay-panel.plugin.js +125 -0
  49. package/dist/paginator/paginator.css +133 -23
  50. package/dist/paginator/paginator.min.css +1 -1
  51. package/dist/paginator/paginator.plugin.js +113 -41
  52. package/dist/radio/radio.css +49 -49
  53. package/dist/radio/radio.min.css +1 -1
  54. package/dist/radio/radio.plugin.js +56 -61
  55. package/dist/segmented-control/segmented-control-toggle.css +37 -25
  56. package/dist/segmented-control/segmented-control-toggle.min.css +1 -1
  57. package/dist/segmented-control/segmented-control-toggle.plugin.js +46 -45
  58. package/dist/segmented-control/segmented-control.css +37 -25
  59. package/dist/segmented-control/segmented-control.min.css +1 -1
  60. package/dist/segmented-control/segmented-control.plugin.js +87 -75
  61. package/dist/snackbar/snackbar.css +12 -0
  62. package/dist/snackbar/snackbar.min.css +1 -1
  63. package/dist/snackbar/snackbar.plugin.js +28 -4
  64. package/dist/switch/switch.css +44 -56
  65. package/dist/switch/switch.min.css +1 -1
  66. package/dist/switch/switch.plugin.js +55 -74
  67. package/dist/tag/tag.css +230 -199
  68. package/dist/tag/tag.min.css +1 -1
  69. package/dist/tag/tag.plugin.js +228 -195
  70. package/package.json +4 -4
  71. package/dist/action-item/action-item.css +0 -185
  72. package/dist/action-item/action-item.min.css +0 -1
  73. package/dist/action-item/action-item.plugin.js +0 -176
  74. package/dist/action-panel/action-panel.css +0 -91
  75. package/dist/action-panel/action-panel.min.css +0 -1
  76. package/dist/action-panel/action-panel.plugin.js +0 -91
@@ -13,6 +13,11 @@
13
13
  flex-grow: 1;
14
14
  text-align: start;
15
15
  }
16
+ .ids-message .ids-icon {
17
+ color: inherit;
18
+ height: inherit;
19
+ width: inherit;
20
+ }
16
21
  .ids-message.ids-message-compact {
17
22
  gap: var(--ids-comp-forms-message-size-gap-compact);
18
23
  padding: var(--ids-comp-forms-message-size-padding-y-compact) var(--ids-comp-forms-message-size-padding-x-compact);
@@ -26,9 +31,10 @@
26
31
  height: var(--ids-comp-forms-message-size-icon-height-compact);
27
32
  width: var(--ids-comp-forms-message-size-icon-width-compact);
28
33
  }
29
- .ids-message.ids-message-compact .ids-message__prefix > ids-icon {
30
- height: inherit;
31
- width: inherit;
34
+ .ids-message.ids-message-compact .ids-message__prefix > .ids-icon {
35
+ font-size: var(--ids-comp-forms-message-iconset-typography-font-size-compact);
36
+ font-weight: var(--ids-comp-forms-message-iconset-typography-font-weight-compact);
37
+ line-height: var(--ids-comp-forms-message-iconset-typography-line-height-compact);
32
38
  }
33
39
  .ids-message.ids-message-comfortable {
34
40
  gap: var(--ids-comp-forms-message-size-gap-comfortable);
@@ -43,9 +49,10 @@
43
49
  height: var(--ids-comp-forms-message-size-icon-height-comfortable);
44
50
  width: var(--ids-comp-forms-message-size-icon-width-comfortable);
45
51
  }
46
- .ids-message.ids-message-comfortable .ids-message__prefix > ids-icon {
47
- height: inherit;
48
- width: inherit;
52
+ .ids-message.ids-message-comfortable .ids-message__prefix > .ids-icon {
53
+ font-size: var(--ids-comp-forms-message-iconset-typography-font-size-comfortable);
54
+ font-weight: var(--ids-comp-forms-message-iconset-typography-font-weight-comfortable);
55
+ line-height: var(--ids-comp-forms-message-iconset-typography-line-height-comfortable);
49
56
  }
50
57
  .ids-message.ids-message-spacious {
51
58
  gap: var(--ids-comp-forms-message-size-gap-spacious);
@@ -60,9 +67,10 @@
60
67
  height: var(--ids-comp-forms-message-size-icon-height-spacious);
61
68
  width: var(--ids-comp-forms-message-size-icon-width-spacious);
62
69
  }
63
- .ids-message.ids-message-spacious .ids-message__prefix > ids-icon {
64
- height: inherit;
65
- width: inherit;
70
+ .ids-message.ids-message-spacious .ids-message__prefix > .ids-icon {
71
+ font-size: var(--ids-comp-forms-message-iconset-typography-font-size-spacious);
72
+ font-weight: var(--ids-comp-forms-message-iconset-typography-font-weight-spacious);
73
+ line-height: var(--ids-comp-forms-message-iconset-typography-line-height-spacious);
66
74
  }
67
75
  .ids-message.ids-message-dense {
68
76
  gap: var(--ids-comp-forms-message-size-gap-dense);
@@ -77,9 +85,10 @@
77
85
  height: var(--ids-comp-forms-message-size-icon-height-dense);
78
86
  width: var(--ids-comp-forms-message-size-icon-width-dense);
79
87
  }
80
- .ids-message.ids-message-dense .ids-message__prefix > ids-icon {
81
- height: inherit;
82
- width: inherit;
88
+ .ids-message.ids-message-dense .ids-message__prefix > .ids-icon {
89
+ font-size: var(--ids-comp-forms-message-iconset-typography-font-size-dense);
90
+ font-weight: var(--ids-comp-forms-message-iconset-typography-font-weight-dense);
91
+ line-height: var(--ids-comp-forms-message-iconset-typography-line-height-dense);
83
92
  }
84
93
  .ids-message.ids-message-light .ids-message__prefix {
85
94
  color: var(--ids-comp-forms-message-color-fg-icon-light-default);
@@ -1 +1 @@
1
- .ids-message{display:flex;justify-content:flex-start;align-items:center;font-style:normal}.ids-message .ids-message__prefix,.ids-message .ids-message__suffix{display:flex;align-items:center}.ids-message .ids-message__text{flex-grow:1;text-align:start}.ids-message.ids-message-compact{gap:var(--ids-comp-forms-message-size-gap-compact);padding:var(--ids-comp-forms-message-size-padding-y-compact) var(--ids-comp-forms-message-size-padding-x-compact);font-family:var(--ids-comp-forms-message-typography-font-family-compact);font-size:var(--ids-comp-forms-message-typography-font-size-compact);font-weight:var(--ids-comp-forms-message-typography-font-weight-compact);letter-spacing:var(--ids-comp-forms-message-typography-letter-spacing-compact);line-height:var(--ids-comp-forms-message-typography-line-height-compact)}.ids-message.ids-message-compact .ids-message__prefix{height:var(--ids-comp-forms-message-size-icon-height-compact);width:var(--ids-comp-forms-message-size-icon-width-compact)}.ids-message.ids-message-compact .ids-message__prefix>ids-icon{height:inherit;width:inherit}.ids-message.ids-message-comfortable{gap:var(--ids-comp-forms-message-size-gap-comfortable);padding:var(--ids-comp-forms-message-size-padding-y-comfortable) var(--ids-comp-forms-message-size-padding-x-comfortable);font-family:var(--ids-comp-forms-message-typography-font-family-comfortable);font-size:var(--ids-comp-forms-message-typography-font-size-comfortable);font-weight:var(--ids-comp-forms-message-typography-font-weight-comfortable);letter-spacing:var(--ids-comp-forms-message-typography-letter-spacing-comfortable);line-height:var(--ids-comp-forms-message-typography-line-height-comfortable)}.ids-message.ids-message-comfortable .ids-message__prefix{height:var(--ids-comp-forms-message-size-icon-height-comfortable);width:var(--ids-comp-forms-message-size-icon-width-comfortable)}.ids-message.ids-message-comfortable .ids-message__prefix>ids-icon{height:inherit;width:inherit}.ids-message.ids-message-spacious{gap:var(--ids-comp-forms-message-size-gap-spacious);padding:var(--ids-comp-forms-message-size-padding-y-spacious) var(--ids-comp-forms-message-size-padding-x-spacious);font-family:var(--ids-comp-forms-message-typography-font-family-spacious);font-size:var(--ids-comp-forms-message-typography-font-size-spacious);font-weight:var(--ids-comp-forms-message-typography-font-weight-spacious);letter-spacing:var(--ids-comp-forms-message-typography-letter-spacing-spacious);line-height:var(--ids-comp-forms-message-typography-line-height-spacious)}.ids-message.ids-message-spacious .ids-message__prefix{height:var(--ids-comp-forms-message-size-icon-height-spacious);width:var(--ids-comp-forms-message-size-icon-width-spacious)}.ids-message.ids-message-spacious .ids-message__prefix>ids-icon{height:inherit;width:inherit}.ids-message.ids-message-dense{gap:var(--ids-comp-forms-message-size-gap-dense);padding:var(--ids-comp-forms-message-size-padding-y-dense) var(--ids-comp-forms-message-size-padding-x-dense);font-family:var(--ids-comp-forms-message-typography-font-family-dense);font-size:var(--ids-comp-forms-message-typography-font-size-dense);font-weight:var(--ids-comp-forms-message-typography-font-weight-dense);letter-spacing:var(--ids-comp-forms-message-typography-letter-spacing-dense);line-height:var(--ids-comp-forms-message-typography-line-height-dense)}.ids-message.ids-message-dense .ids-message__prefix{height:var(--ids-comp-forms-message-size-icon-height-dense);width:var(--ids-comp-forms-message-size-icon-width-dense)}.ids-message.ids-message-dense .ids-message__prefix>ids-icon{height:inherit;width:inherit}.ids-message.ids-message-light .ids-message__prefix{color:var(--ids-comp-forms-message-color-fg-icon-light-default)}.ids-message.ids-message-light .ids-message__text,.ids-message.ids-message-light .ids-message__suffix{color:var(--ids-comp-forms-message-color-fg-text-light-default)}.ids-message.ids-message-light.ids-message-disabled .ids-message__prefix{color:var(--ids-comp-forms-message-color-fg-icon-light-disabled)}.ids-message.ids-message-light.ids-message-disabled .ids-message__text,.ids-message.ids-message-light.ids-message-disabled .ids-message__suffix{color:var(--ids-comp-forms-message-color-fg-text-light-disabled)}.ids-message.ids-message-light.ids-error-message .ids-message__prefix{color:var(--ids-comp-forms-message-color-fg-icon-light-error-default)}.ids-message.ids-message-light.ids-error-message .ids-message__text,.ids-message.ids-message-light.ids-error-message .ids-message__suffix{color:var(--ids-comp-forms-message-color-fg-text-light-error-default)}.ids-message.ids-success-message .ids-message__prefix{color:var(--ids-comp-forms-message-color-fg-icon-light-success-default)}.ids-message.ids-success-message .ids-message__text,.ids-message.ids-success-message .ids-message__suffix{color:var(--ids-comp-forms-message-color-fg-text-light-success-default)}.ids-message.ids-message-dark .ids-message__prefix{color:var(--ids-comp-forms-message-color-fg-icon-dark-default)}.ids-message.ids-message-dark .ids-message__text,.ids-message.ids-message-dark .ids-message__suffix{color:var(--ids-comp-forms-message-color-fg-text-dark-default)}.ids-message.ids-message-dark.ids-message-disabled .ids-message__prefix{color:var(--ids-comp-forms-message-color-fg-icon-dark-disabled)}.ids-message.ids-message-dark.ids-message-disabled .ids-message__text,.ids-message.ids-message-dark.ids-message-disabled .ids-message__suffix{color:var(--ids-comp-forms-message-color-fg-text-dark-disabled)}.ids-message.ids-message-dark.ids-error-message .ids-message__prefix{color:var(--ids-comp-forms-message-color-fg-icon-dark-error-default)}.ids-message.ids-message-dark.ids-error-message .ids-message__text,.ids-message.ids-message-dark.ids-error-message .ids-message__suffix{color:var(--ids-comp-forms-message-color-fg-text-dark-error-default)}.ids-message.ids-success-message .ids-message__prefix{color:var(--ids-comp-forms-message-color-fg-icon-dark-success-default)}.ids-message.ids-success-message .ids-message__text,.ids-message.ids-success-message .ids-message__suffix{color:var(--ids-comp-forms-message-color-fg-text-dark-success-default)}.ids-message.ids-message-surface .ids-message__prefix{color:var(--ids-comp-forms-message-color-fg-icon-surface-default)}.ids-message.ids-message-surface .ids-message__text,.ids-message.ids-message-surface .ids-message__suffix{color:var(--ids-comp-forms-message-color-fg-text-surface-default)}.ids-message.ids-message-surface.ids-message-disabled .ids-message__prefix{color:var(--ids-comp-forms-message-color-fg-icon-surface-disabled)}.ids-message.ids-message-surface.ids-message-disabled .ids-message__text,.ids-message.ids-message-surface.ids-message-disabled .ids-message__suffix{color:var(--ids-comp-forms-message-color-fg-text-surface-disabled)}.ids-message.ids-message-surface.ids-error-message .ids-message__prefix{color:var(--ids-comp-forms-message-color-fg-icon-surface-error-default)}.ids-message.ids-message-surface.ids-error-message .ids-message__text,.ids-message.ids-message-surface.ids-error-message .ids-message__suffix{color:var(--ids-comp-forms-message-color-fg-text-surface-error-default)}.ids-message.ids-success-message .ids-message__prefix{color:var(--ids-comp-forms-message-color-fg-icon-surface-success-default)}.ids-message.ids-success-message .ids-message__text,.ids-message.ids-success-message .ids-message__suffix{color:var(--ids-comp-forms-message-color-fg-text-surface-success-default)}
1
+ .ids-message{display:flex;justify-content:flex-start;align-items:center;font-style:normal}.ids-message .ids-message__prefix,.ids-message .ids-message__suffix{display:flex;align-items:center}.ids-message .ids-message__text{flex-grow:1;text-align:start}.ids-message .ids-icon{color:inherit;height:inherit;width:inherit}.ids-message.ids-message-compact{gap:var(--ids-comp-forms-message-size-gap-compact);padding:var(--ids-comp-forms-message-size-padding-y-compact) var(--ids-comp-forms-message-size-padding-x-compact);font-family:var(--ids-comp-forms-message-typography-font-family-compact);font-size:var(--ids-comp-forms-message-typography-font-size-compact);font-weight:var(--ids-comp-forms-message-typography-font-weight-compact);letter-spacing:var(--ids-comp-forms-message-typography-letter-spacing-compact);line-height:var(--ids-comp-forms-message-typography-line-height-compact)}.ids-message.ids-message-compact .ids-message__prefix{height:var(--ids-comp-forms-message-size-icon-height-compact);width:var(--ids-comp-forms-message-size-icon-width-compact)}.ids-message.ids-message-compact .ids-message__prefix>.ids-icon{font-size:var(--ids-comp-forms-message-iconset-typography-font-size-compact);font-weight:var(--ids-comp-forms-message-iconset-typography-font-weight-compact);line-height:var(--ids-comp-forms-message-iconset-typography-line-height-compact)}.ids-message.ids-message-comfortable{gap:var(--ids-comp-forms-message-size-gap-comfortable);padding:var(--ids-comp-forms-message-size-padding-y-comfortable) var(--ids-comp-forms-message-size-padding-x-comfortable);font-family:var(--ids-comp-forms-message-typography-font-family-comfortable);font-size:var(--ids-comp-forms-message-typography-font-size-comfortable);font-weight:var(--ids-comp-forms-message-typography-font-weight-comfortable);letter-spacing:var(--ids-comp-forms-message-typography-letter-spacing-comfortable);line-height:var(--ids-comp-forms-message-typography-line-height-comfortable)}.ids-message.ids-message-comfortable .ids-message__prefix{height:var(--ids-comp-forms-message-size-icon-height-comfortable);width:var(--ids-comp-forms-message-size-icon-width-comfortable)}.ids-message.ids-message-comfortable .ids-message__prefix>.ids-icon{font-size:var(--ids-comp-forms-message-iconset-typography-font-size-comfortable);font-weight:var(--ids-comp-forms-message-iconset-typography-font-weight-comfortable);line-height:var(--ids-comp-forms-message-iconset-typography-line-height-comfortable)}.ids-message.ids-message-spacious{gap:var(--ids-comp-forms-message-size-gap-spacious);padding:var(--ids-comp-forms-message-size-padding-y-spacious) var(--ids-comp-forms-message-size-padding-x-spacious);font-family:var(--ids-comp-forms-message-typography-font-family-spacious);font-size:var(--ids-comp-forms-message-typography-font-size-spacious);font-weight:var(--ids-comp-forms-message-typography-font-weight-spacious);letter-spacing:var(--ids-comp-forms-message-typography-letter-spacing-spacious);line-height:var(--ids-comp-forms-message-typography-line-height-spacious)}.ids-message.ids-message-spacious .ids-message__prefix{height:var(--ids-comp-forms-message-size-icon-height-spacious);width:var(--ids-comp-forms-message-size-icon-width-spacious)}.ids-message.ids-message-spacious .ids-message__prefix>.ids-icon{font-size:var(--ids-comp-forms-message-iconset-typography-font-size-spacious);font-weight:var(--ids-comp-forms-message-iconset-typography-font-weight-spacious);line-height:var(--ids-comp-forms-message-iconset-typography-line-height-spacious)}.ids-message.ids-message-dense{gap:var(--ids-comp-forms-message-size-gap-dense);padding:var(--ids-comp-forms-message-size-padding-y-dense) var(--ids-comp-forms-message-size-padding-x-dense);font-family:var(--ids-comp-forms-message-typography-font-family-dense);font-size:var(--ids-comp-forms-message-typography-font-size-dense);font-weight:var(--ids-comp-forms-message-typography-font-weight-dense);letter-spacing:var(--ids-comp-forms-message-typography-letter-spacing-dense);line-height:var(--ids-comp-forms-message-typography-line-height-dense)}.ids-message.ids-message-dense .ids-message__prefix{height:var(--ids-comp-forms-message-size-icon-height-dense);width:var(--ids-comp-forms-message-size-icon-width-dense)}.ids-message.ids-message-dense .ids-message__prefix>.ids-icon{font-size:var(--ids-comp-forms-message-iconset-typography-font-size-dense);font-weight:var(--ids-comp-forms-message-iconset-typography-font-weight-dense);line-height:var(--ids-comp-forms-message-iconset-typography-line-height-dense)}.ids-message.ids-message-light .ids-message__prefix{color:var(--ids-comp-forms-message-color-fg-icon-light-default)}.ids-message.ids-message-light .ids-message__text,.ids-message.ids-message-light .ids-message__suffix{color:var(--ids-comp-forms-message-color-fg-text-light-default)}.ids-message.ids-message-light.ids-message-disabled .ids-message__prefix{color:var(--ids-comp-forms-message-color-fg-icon-light-disabled)}.ids-message.ids-message-light.ids-message-disabled .ids-message__text,.ids-message.ids-message-light.ids-message-disabled .ids-message__suffix{color:var(--ids-comp-forms-message-color-fg-text-light-disabled)}.ids-message.ids-message-light.ids-error-message .ids-message__prefix{color:var(--ids-comp-forms-message-color-fg-icon-light-error-default)}.ids-message.ids-message-light.ids-error-message .ids-message__text,.ids-message.ids-message-light.ids-error-message .ids-message__suffix{color:var(--ids-comp-forms-message-color-fg-text-light-error-default)}.ids-message.ids-success-message .ids-message__prefix{color:var(--ids-comp-forms-message-color-fg-icon-light-success-default)}.ids-message.ids-success-message .ids-message__text,.ids-message.ids-success-message .ids-message__suffix{color:var(--ids-comp-forms-message-color-fg-text-light-success-default)}.ids-message.ids-message-dark .ids-message__prefix{color:var(--ids-comp-forms-message-color-fg-icon-dark-default)}.ids-message.ids-message-dark .ids-message__text,.ids-message.ids-message-dark .ids-message__suffix{color:var(--ids-comp-forms-message-color-fg-text-dark-default)}.ids-message.ids-message-dark.ids-message-disabled .ids-message__prefix{color:var(--ids-comp-forms-message-color-fg-icon-dark-disabled)}.ids-message.ids-message-dark.ids-message-disabled .ids-message__text,.ids-message.ids-message-dark.ids-message-disabled .ids-message__suffix{color:var(--ids-comp-forms-message-color-fg-text-dark-disabled)}.ids-message.ids-message-dark.ids-error-message .ids-message__prefix{color:var(--ids-comp-forms-message-color-fg-icon-dark-error-default)}.ids-message.ids-message-dark.ids-error-message .ids-message__text,.ids-message.ids-message-dark.ids-error-message .ids-message__suffix{color:var(--ids-comp-forms-message-color-fg-text-dark-error-default)}.ids-message.ids-success-message .ids-message__prefix{color:var(--ids-comp-forms-message-color-fg-icon-dark-success-default)}.ids-message.ids-success-message .ids-message__text,.ids-message.ids-success-message .ids-message__suffix{color:var(--ids-comp-forms-message-color-fg-text-dark-success-default)}.ids-message.ids-message-surface .ids-message__prefix{color:var(--ids-comp-forms-message-color-fg-icon-surface-default)}.ids-message.ids-message-surface .ids-message__text,.ids-message.ids-message-surface .ids-message__suffix{color:var(--ids-comp-forms-message-color-fg-text-surface-default)}.ids-message.ids-message-surface.ids-message-disabled .ids-message__prefix{color:var(--ids-comp-forms-message-color-fg-icon-surface-disabled)}.ids-message.ids-message-surface.ids-message-disabled .ids-message__text,.ids-message.ids-message-surface.ids-message-disabled .ids-message__suffix{color:var(--ids-comp-forms-message-color-fg-text-surface-disabled)}.ids-message.ids-message-surface.ids-error-message .ids-message__prefix{color:var(--ids-comp-forms-message-color-fg-icon-surface-error-default)}.ids-message.ids-message-surface.ids-error-message .ids-message__text,.ids-message.ids-message-surface.ids-error-message .ids-message__suffix{color:var(--ids-comp-forms-message-color-fg-text-surface-error-default)}.ids-message.ids-success-message .ids-message__prefix{color:var(--ids-comp-forms-message-color-fg-icon-surface-success-default)}.ids-message.ids-success-message .ids-message__text,.ids-message.ids-success-message .ids-message__suffix{color:var(--ids-comp-forms-message-color-fg-text-surface-success-default)}
@@ -5,6 +5,7 @@ module.exports = function MessagePlugin() {
5
5
  '.ids-message': { display: 'flex', justifyContent: 'flex-start', alignItems: 'center', fontStyle: 'normal' },
6
6
  '.ids-message .ids-message__prefix,.ids-message .ids-message__suffix': { display: 'flex', alignItems: 'center' },
7
7
  '.ids-message .ids-message__text': { flexGrow: 1, textAlign: 'start' },
8
+ '.ids-message .ids-icon': { color: 'inherit', height: 'inherit', width: 'inherit' },
8
9
  '.ids-message.ids-message-compact': {
9
10
  gap: 'var(--ids-comp-forms-message-size-gap-compact)',
10
11
  padding: 'var(--ids-comp-forms-message-size-padding-y-compact) var(--ids-comp-forms-message-size-padding-x-compact)',
@@ -18,7 +19,11 @@ module.exports = function MessagePlugin() {
18
19
  height: 'var(--ids-comp-forms-message-size-icon-height-compact)',
19
20
  width: 'var(--ids-comp-forms-message-size-icon-width-compact)',
20
21
  },
21
- '.ids-message.ids-message-compact .ids-message__prefix>ids-icon': { height: 'inherit', width: 'inherit' },
22
+ '.ids-message.ids-message-compact .ids-message__prefix>.ids-icon': {
23
+ fontSize: 'var(--ids-comp-forms-message-iconset-typography-font-size-compact)',
24
+ fontWeight: 'var(--ids-comp-forms-message-iconset-typography-font-weight-compact)',
25
+ lineHeight: 'var(--ids-comp-forms-message-iconset-typography-line-height-compact)',
26
+ },
22
27
  '.ids-message.ids-message-comfortable': {
23
28
  gap: 'var(--ids-comp-forms-message-size-gap-comfortable)',
24
29
  padding: 'var(--ids-comp-forms-message-size-padding-y-comfortable) var(--ids-comp-forms-message-size-padding-x-comfortable)',
@@ -32,7 +37,11 @@ module.exports = function MessagePlugin() {
32
37
  height: 'var(--ids-comp-forms-message-size-icon-height-comfortable)',
33
38
  width: 'var(--ids-comp-forms-message-size-icon-width-comfortable)',
34
39
  },
35
- '.ids-message.ids-message-comfortable .ids-message__prefix>ids-icon': { height: 'inherit', width: 'inherit' },
40
+ '.ids-message.ids-message-comfortable .ids-message__prefix>.ids-icon': {
41
+ fontSize: 'var(--ids-comp-forms-message-iconset-typography-font-size-comfortable)',
42
+ fontWeight: 'var(--ids-comp-forms-message-iconset-typography-font-weight-comfortable)',
43
+ lineHeight: 'var(--ids-comp-forms-message-iconset-typography-line-height-comfortable)',
44
+ },
36
45
  '.ids-message.ids-message-spacious': {
37
46
  gap: 'var(--ids-comp-forms-message-size-gap-spacious)',
38
47
  padding: 'var(--ids-comp-forms-message-size-padding-y-spacious) var(--ids-comp-forms-message-size-padding-x-spacious)',
@@ -46,7 +55,11 @@ module.exports = function MessagePlugin() {
46
55
  height: 'var(--ids-comp-forms-message-size-icon-height-spacious)',
47
56
  width: 'var(--ids-comp-forms-message-size-icon-width-spacious)',
48
57
  },
49
- '.ids-message.ids-message-spacious .ids-message__prefix>ids-icon': { height: 'inherit', width: 'inherit' },
58
+ '.ids-message.ids-message-spacious .ids-message__prefix>.ids-icon': {
59
+ fontSize: 'var(--ids-comp-forms-message-iconset-typography-font-size-spacious)',
60
+ fontWeight: 'var(--ids-comp-forms-message-iconset-typography-font-weight-spacious)',
61
+ lineHeight: 'var(--ids-comp-forms-message-iconset-typography-line-height-spacious)',
62
+ },
50
63
  '.ids-message.ids-message-dense': {
51
64
  gap: 'var(--ids-comp-forms-message-size-gap-dense)',
52
65
  padding: 'var(--ids-comp-forms-message-size-padding-y-dense) var(--ids-comp-forms-message-size-padding-x-dense)',
@@ -60,7 +73,11 @@ module.exports = function MessagePlugin() {
60
73
  height: 'var(--ids-comp-forms-message-size-icon-height-dense)',
61
74
  width: 'var(--ids-comp-forms-message-size-icon-width-dense)',
62
75
  },
63
- '.ids-message.ids-message-dense .ids-message__prefix>ids-icon': { height: 'inherit', width: 'inherit' },
76
+ '.ids-message.ids-message-dense .ids-message__prefix>.ids-icon': {
77
+ fontSize: 'var(--ids-comp-forms-message-iconset-typography-font-size-dense)',
78
+ fontWeight: 'var(--ids-comp-forms-message-iconset-typography-font-weight-dense)',
79
+ lineHeight: 'var(--ids-comp-forms-message-iconset-typography-line-height-dense)',
80
+ },
64
81
  '.ids-message.ids-message-light .ids-message__prefix': { color: 'var(--ids-comp-forms-message-color-fg-icon-light-default)' },
65
82
  '.ids-message.ids-message-light .ids-message__text,.ids-message.ids-message-light .ids-message__suffix': {
66
83
  color: 'var(--ids-comp-forms-message-color-fg-text-light-default)',
@@ -1,7 +1,6 @@
1
1
  .ids-icon {
2
2
  font-family: "IDS Icons";
3
- font-weight: normal;
4
- display: inline-block;
3
+ display: inline-flex;
5
4
  text-transform: none;
6
5
  letter-spacing: normal;
7
6
  word-wrap: normal;
@@ -10,6 +9,8 @@
10
9
  background-repeat: no-repeat;
11
10
  overflow: hidden;
12
11
  fill: currentColor;
12
+ align-items: center;
13
+ justify-content: center;
13
14
  }
14
15
  .ids-icon.ids-icon-smallcollection-compact {
15
16
  height: var(--ids-comp-icon-size-smallcollection-height-compact);
@@ -1 +1 @@
1
- .ids-icon{font-family:"IDS Icons";font-weight:normal;display:inline-block;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;background-repeat:no-repeat;overflow:hidden;fill:currentColor}.ids-icon.ids-icon-smallcollection-compact{height:var(--ids-comp-icon-size-smallcollection-height-compact);width:var(--ids-comp-icon-size-smallcollection-width-compact);font-size:var(--ids-comp-icon-typography-smallcollection-font-size-compact);line-height:var(--ids-comp-icon-typography-smallcollection-line-height-compact)}.ids-icon.ids-icon-smallcollection-comfortable{height:var(--ids-comp-icon-size-smallcollection-height-comfortable);width:var(--ids-comp-icon-size-smallcollection-width-comfortable);font-size:var(--ids-comp-icon-typography-smallcollection-font-size-comfortable);line-height:var(--ids-comp-icon-typography-smallcollection-line-height-comfortable)}.ids-icon.ids-icon-smallcollection-spacious{height:var(--ids-comp-icon-size-smallcollection-height-spacious);width:var(--ids-comp-icon-size-smallcollection-width-spacious);font-size:var(--ids-comp-icon-typography-smallcollection-font-size-spacious);line-height:var(--ids-comp-icon-typography-smallcollection-line-height-spacious)}.ids-icon.ids-icon-smallcollection-dense{height:var(--ids-comp-icon-size-smallcollection-height-dense);width:var(--ids-comp-icon-size-smallcollection-width-dense);font-size:var(--ids-comp-icon-typography-smallcollection-font-size-dense);line-height:var(--ids-comp-icon-typography-smallcollection-line-height-dense)}.ids-icon.ids-icon-bigcollection-compact{height:var(--ids-comp-icon-size-bigcollection-height-compact);width:var(--ids-comp-icon-size-bigcollection-width-compact);font-size:var(--ids-comp-icon-typography-bigcollection-font-size-compact);line-height:var(--ids-comp-icon-typography-bigcollection-line-height-compact)}.ids-icon.ids-icon-bigcollection-comfortable{height:var(--ids-comp-icon-size-bigcollection-height-comfortable);width:var(--ids-comp-icon-size-bigcollection-width-comfortable);font-size:var(--ids-comp-icon-typography-bigcollection-font-size-comfortable);line-height:var(--ids-comp-icon-typography-bigcollection-line-height-comfortable)}.ids-icon.ids-icon-bigcollection-spacious{height:var(--ids-comp-icon-size-bigcollection-height-spacious);width:var(--ids-comp-icon-size-bigcollection-width-spacious);font-size:var(--ids-comp-icon-typography-bigcollection-font-size-spacious);line-height:var(--ids-comp-icon-typography-bigcollection-line-height-spacious)}.ids-icon.ids-icon-bigcollection-dense{height:var(--ids-comp-icon-size-bigcollection-height-dense);width:var(--ids-comp-icon-size-bigcollection-width-dense);font-size:var(--ids-comp-icon-typography-bigcollection-font-size-dense);line-height:var(--ids-comp-icon-typography-bigcollection-line-height-dense)}.ids-icon.ids-icon-primary{color:var(--ids-comp-icon-color-primary-default)}.ids-icon.ids-icon-secondary{color:var(--ids-comp-icon-color-secondary-default)}.ids-icon.ids-icon-light{color:var(--ids-comp-icon-color-light-default)}.ids-icon.ids-icon-dark{color:var(--ids-comp-icon-color-dark-default)}.ids-icon.ids-icon-error{color:var(--ids-comp-icon-color-error-default)}.ids-icon.ids-icon-success{color:var(--ids-comp-icon-color-success-default)}.ids-icon.ids-icon-warning{color:var(--ids-comp-icon-color-warning-default)}.ids-icon.ids-icon-brand{color:var(--ids-comp-icon-color-brand-default)}.ids-icon.ids-icon-surface{color:var(--ids-comp-icon-color-surface-default)}.ids-icon svg{width:100%;height:100%}.ids-icon.ids-icon-font[fontIcon]::before{content:attr(fontIcon)}
1
+ .ids-icon{font-family:"IDS Icons";display:inline-flex;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;background-repeat:no-repeat;overflow:hidden;fill:currentColor;align-items:center;justify-content:center}.ids-icon.ids-icon-smallcollection-compact{height:var(--ids-comp-icon-size-smallcollection-height-compact);width:var(--ids-comp-icon-size-smallcollection-width-compact);font-size:var(--ids-comp-icon-typography-smallcollection-font-size-compact);line-height:var(--ids-comp-icon-typography-smallcollection-line-height-compact)}.ids-icon.ids-icon-smallcollection-comfortable{height:var(--ids-comp-icon-size-smallcollection-height-comfortable);width:var(--ids-comp-icon-size-smallcollection-width-comfortable);font-size:var(--ids-comp-icon-typography-smallcollection-font-size-comfortable);line-height:var(--ids-comp-icon-typography-smallcollection-line-height-comfortable)}.ids-icon.ids-icon-smallcollection-spacious{height:var(--ids-comp-icon-size-smallcollection-height-spacious);width:var(--ids-comp-icon-size-smallcollection-width-spacious);font-size:var(--ids-comp-icon-typography-smallcollection-font-size-spacious);line-height:var(--ids-comp-icon-typography-smallcollection-line-height-spacious)}.ids-icon.ids-icon-smallcollection-dense{height:var(--ids-comp-icon-size-smallcollection-height-dense);width:var(--ids-comp-icon-size-smallcollection-width-dense);font-size:var(--ids-comp-icon-typography-smallcollection-font-size-dense);line-height:var(--ids-comp-icon-typography-smallcollection-line-height-dense)}.ids-icon.ids-icon-bigcollection-compact{height:var(--ids-comp-icon-size-bigcollection-height-compact);width:var(--ids-comp-icon-size-bigcollection-width-compact);font-size:var(--ids-comp-icon-typography-bigcollection-font-size-compact);line-height:var(--ids-comp-icon-typography-bigcollection-line-height-compact)}.ids-icon.ids-icon-bigcollection-comfortable{height:var(--ids-comp-icon-size-bigcollection-height-comfortable);width:var(--ids-comp-icon-size-bigcollection-width-comfortable);font-size:var(--ids-comp-icon-typography-bigcollection-font-size-comfortable);line-height:var(--ids-comp-icon-typography-bigcollection-line-height-comfortable)}.ids-icon.ids-icon-bigcollection-spacious{height:var(--ids-comp-icon-size-bigcollection-height-spacious);width:var(--ids-comp-icon-size-bigcollection-width-spacious);font-size:var(--ids-comp-icon-typography-bigcollection-font-size-spacious);line-height:var(--ids-comp-icon-typography-bigcollection-line-height-spacious)}.ids-icon.ids-icon-bigcollection-dense{height:var(--ids-comp-icon-size-bigcollection-height-dense);width:var(--ids-comp-icon-size-bigcollection-width-dense);font-size:var(--ids-comp-icon-typography-bigcollection-font-size-dense);line-height:var(--ids-comp-icon-typography-bigcollection-line-height-dense)}.ids-icon.ids-icon-primary{color:var(--ids-comp-icon-color-primary-default)}.ids-icon.ids-icon-secondary{color:var(--ids-comp-icon-color-secondary-default)}.ids-icon.ids-icon-light{color:var(--ids-comp-icon-color-light-default)}.ids-icon.ids-icon-dark{color:var(--ids-comp-icon-color-dark-default)}.ids-icon.ids-icon-error{color:var(--ids-comp-icon-color-error-default)}.ids-icon.ids-icon-success{color:var(--ids-comp-icon-color-success-default)}.ids-icon.ids-icon-warning{color:var(--ids-comp-icon-color-warning-default)}.ids-icon.ids-icon-brand{color:var(--ids-comp-icon-color-brand-default)}.ids-icon.ids-icon-surface{color:var(--ids-comp-icon-color-surface-default)}.ids-icon svg{width:100%;height:100%}.ids-icon.ids-icon-font[fontIcon]::before{content:attr(fontIcon)}
@@ -4,8 +4,7 @@ module.exports = function IconPlugin() {
4
4
  const cssObj = {
5
5
  '.ids-icon': {
6
6
  fontFamily: '"IDS Icons"',
7
- fontWeight: 'normal',
8
- display: 'inline-block',
7
+ display: 'inline-flex',
9
8
  textTransform: 'none',
10
9
  letterSpacing: 'normal',
11
10
  wordWrap: 'normal',
@@ -14,6 +13,8 @@ module.exports = function IconPlugin() {
14
13
  backgroundRepeat: 'no-repeat',
15
14
  overflow: 'hidden',
16
15
  fill: 'currentColor',
16
+ alignItems: 'center',
17
+ justifyContent: 'center',
17
18
  },
18
19
  '.ids-icon.ids-icon-smallcollection-compact': {
19
20
  height: 'var(--ids-comp-icon-size-smallcollection-height-compact)',