@ionic/core 8.7.4-dev.11757430138.13649dec → 8.7.4-dev.11758100307.13cc0353

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 (230) hide show
  1. package/components/backdrop.js +1 -1
  2. package/components/button.js +1 -1
  3. package/components/buttons.js +1 -1
  4. package/components/checkbox.js +1 -1
  5. package/components/header.js +1 -1
  6. package/components/ion-accordion-group.js +1 -1
  7. package/components/ion-accordion.js +1 -1
  8. package/components/ion-avatar.js +1 -1
  9. package/components/ion-badge.js +1 -1
  10. package/components/ion-card-content.js +1 -1
  11. package/components/ion-card-header.js +1 -1
  12. package/components/ion-card-subtitle.js +1 -1
  13. package/components/ion-card.js +1 -1
  14. package/components/ion-chip.js +1 -1
  15. package/components/ion-col.js +1 -1
  16. package/components/ion-datetime.js +1 -1
  17. package/components/ion-divider.js +1 -1
  18. package/components/ion-input-otp.js +1 -1
  19. package/components/ion-input-password-toggle.js +1 -1
  20. package/components/ion-input.js +1 -1
  21. package/components/ion-item-option.js +1 -1
  22. package/components/ion-item-options.js +1 -1
  23. package/components/ion-menu-button.js +1 -1
  24. package/components/ion-progress-bar.js +1 -1
  25. package/components/ion-range.js +1 -1
  26. package/components/ion-row.js +1 -1
  27. package/components/ion-searchbar.js +1 -1
  28. package/components/ion-segment-button.js +1 -1
  29. package/components/ion-segment.js +1 -1
  30. package/components/ion-select.js +1 -1
  31. package/components/ion-tab-bar.js +1 -1
  32. package/components/ion-tab-button.js +1 -1
  33. package/components/ion-textarea.js +1 -1
  34. package/components/ion-toast.js +1 -1
  35. package/components/ion-toggle.js +1 -1
  36. package/components/item.js +1 -1
  37. package/components/list-header.js +1 -1
  38. package/components/list.js +1 -1
  39. package/components/modal.js +1 -1
  40. package/components/radio-group.js +1 -1
  41. package/components/radio.js +1 -1
  42. package/components/ripple-effect.js +1 -1
  43. package/components/select-modal.js +1 -1
  44. package/components/spinner.js +1 -1
  45. package/components/title.js +1 -1
  46. package/components/toolbar.js +1 -1
  47. package/css/ionic/bundle.ionic.css +1 -1
  48. package/css/ionic/bundle.ionic.css.map +1 -1
  49. package/css/ionic/core.ionic.css +1 -1
  50. package/css/ionic/core.ionic.css.map +1 -1
  51. package/css/ionic/global.bundle.ionic.css +1 -1
  52. package/css/ionic/global.bundle.ionic.css.map +1 -1
  53. package/css/ionic/ionic-swiper.ionic.css +1 -1
  54. package/css/ionic/ionic-swiper.ionic.css.map +1 -1
  55. package/css/ionic/link.ionic.css +1 -1
  56. package/css/ionic/link.ionic.css.map +1 -1
  57. package/css/ionic/typography.ionic.css +1 -1
  58. package/css/ionic/typography.ionic.css.map +1 -1
  59. package/css/ionic/utils.bundle.ionic.css +1 -1
  60. package/css/ionic/utils.bundle.ionic.css.map +1 -1
  61. package/dist/cjs/ion-accordion_2.cjs.entry.js +2 -2
  62. package/dist/cjs/ion-app_8.cjs.entry.js +4 -4
  63. package/dist/cjs/ion-avatar_3.cjs.entry.js +2 -2
  64. package/dist/cjs/ion-backdrop.cjs.entry.js +1 -1
  65. package/dist/cjs/ion-button_2.cjs.entry.js +1 -1
  66. package/dist/cjs/ion-card_5.cjs.entry.js +4 -4
  67. package/dist/cjs/ion-checkbox.cjs.entry.js +1 -1
  68. package/dist/cjs/ion-chip.cjs.entry.js +1 -1
  69. package/dist/cjs/ion-col_3.cjs.entry.js +2 -2
  70. package/dist/cjs/ion-datetime_3.cjs.entry.js +1 -1
  71. package/dist/cjs/ion-divider.cjs.entry.js +1 -1
  72. package/dist/cjs/ion-input-otp.cjs.entry.js +1 -1
  73. package/dist/cjs/ion-input-password-toggle.cjs.entry.js +1 -1
  74. package/dist/cjs/ion-input.cjs.entry.js +1 -1
  75. package/dist/cjs/ion-item-option_3.cjs.entry.js +2 -2
  76. package/dist/cjs/ion-item_8.cjs.entry.js +3 -3
  77. package/dist/cjs/ion-menu_3.cjs.entry.js +1 -1
  78. package/dist/cjs/ion-modal.cjs.entry.js +1 -1
  79. package/dist/cjs/ion-progress-bar.cjs.entry.js +1 -1
  80. package/dist/cjs/ion-radio_2.cjs.entry.js +2 -2
  81. package/dist/cjs/ion-range.cjs.entry.js +1 -1
  82. package/dist/cjs/ion-ripple-effect.cjs.entry.js +1 -1
  83. package/dist/cjs/ion-searchbar.cjs.entry.js +1 -1
  84. package/dist/cjs/ion-segment_2.cjs.entry.js +2 -2
  85. package/dist/cjs/ion-select-modal.cjs.entry.js +1 -1
  86. package/dist/cjs/ion-select_3.cjs.entry.js +1 -1
  87. package/dist/cjs/ion-spinner.cjs.entry.js +1 -1
  88. package/dist/cjs/ion-tab-bar_2.cjs.entry.js +2 -2
  89. package/dist/cjs/ion-textarea.cjs.entry.js +1 -1
  90. package/dist/cjs/ion-toast.cjs.entry.js +1 -1
  91. package/dist/cjs/ion-toggle.cjs.entry.js +1 -1
  92. package/dist/collection/components/accordion/accordion.ionic.css +31 -33
  93. package/dist/collection/components/accordion-group/accordion-group.ionic.css +15 -17
  94. package/dist/collection/components/avatar/avatar.ionic.css +95 -97
  95. package/dist/collection/components/backdrop/backdrop.ionic.css +2 -4
  96. package/dist/collection/components/badge/badge.ionic.css +54 -56
  97. package/dist/collection/components/button/button.ionic.css +82 -84
  98. package/dist/collection/components/buttons/buttons.ionic.css +4 -7
  99. package/dist/collection/components/card/card.ionic.css +11 -13
  100. package/dist/collection/components/card-content/card-content.ionic.css +14 -16
  101. package/dist/collection/components/card-header/card-header.ionic.css +8 -10
  102. package/dist/collection/components/card-subtitle/card-subtitle.ionic.css +6 -8
  103. package/dist/collection/components/checkbox/checkbox.ionic.css +50 -52
  104. package/dist/collection/components/chip/chip.ionic.css +36 -38
  105. package/dist/collection/components/col/col.css +8 -0
  106. package/dist/collection/components/datetime/datetime.ionic.css +111 -113
  107. package/dist/collection/components/divider/divider.ionic.css +16 -18
  108. package/dist/collection/components/header/header.ionic.css +6 -8
  109. package/dist/collection/components/input/input.ionic.css +69 -71
  110. package/dist/collection/components/input-otp/input-otp.ionic.css +49 -51
  111. package/dist/collection/components/input-password-toggle/input-password-toggle.ionic.css +3 -5
  112. package/dist/collection/components/item/item.ionic.css +32 -34
  113. package/dist/collection/components/item-option/item-option.ionic.css +32 -34
  114. package/dist/collection/components/item-options/item-options.ionic.css +7 -9
  115. package/dist/collection/components/list/list.ionic.css +28 -30
  116. package/dist/collection/components/list-header/list-header.ionic.css +14 -16
  117. package/dist/collection/components/menu-button/menu-button.ionic.css +4 -6
  118. package/dist/collection/components/modal/modal.ionic.css +19 -21
  119. package/dist/collection/components/progress-bar/progress-bar.ionic.css +6 -8
  120. package/dist/collection/components/radio/radio.ionic.css +28 -30
  121. package/dist/collection/components/radio-group/radio-group.ionic.css +16 -18
  122. package/dist/collection/components/range/range.ionic.css +61 -63
  123. package/dist/collection/components/ripple-effect/ripple-effect.ionic.css +2 -4
  124. package/dist/collection/components/row/row.css +3 -1
  125. package/dist/collection/components/searchbar/searchbar.ionic.css +100 -102
  126. package/dist/collection/components/segment/segment.ionic.css +2 -4
  127. package/dist/collection/components/segment-button/segment-button.ionic.css +28 -30
  128. package/dist/collection/components/select/select.ionic.css +64 -66
  129. package/dist/collection/components/select-modal/select-modal.ionic.css +14 -16
  130. package/dist/collection/components/spinner/spinner.ionic.css +17 -19
  131. package/dist/collection/components/tab-bar/tab-bar.ionic.css +26 -28
  132. package/dist/collection/components/tab-button/tab-button.ionic.css +28 -30
  133. package/dist/collection/components/textarea/textarea.ionic.css +70 -72
  134. package/dist/collection/components/title/title.ionic.css +9 -11
  135. package/dist/collection/components/toast/toast.ionic.css +44 -46
  136. package/dist/collection/components/toggle/toggle.ionic.css +38 -40
  137. package/dist/collection/components/toolbar/toolbar.ionic.css +18 -20
  138. package/dist/docs.json +8 -2
  139. package/dist/esm/ion-accordion_2.entry.js +2 -2
  140. package/dist/esm/ion-app_8.entry.js +4 -4
  141. package/dist/esm/ion-avatar_3.entry.js +2 -2
  142. package/dist/esm/ion-backdrop.entry.js +1 -1
  143. package/dist/esm/ion-button_2.entry.js +1 -1
  144. package/dist/esm/ion-card_5.entry.js +4 -4
  145. package/dist/esm/ion-checkbox.entry.js +1 -1
  146. package/dist/esm/ion-chip.entry.js +1 -1
  147. package/dist/esm/ion-col_3.entry.js +2 -2
  148. package/dist/esm/ion-datetime_3.entry.js +1 -1
  149. package/dist/esm/ion-divider.entry.js +1 -1
  150. package/dist/esm/ion-input-otp.entry.js +1 -1
  151. package/dist/esm/ion-input-password-toggle.entry.js +1 -1
  152. package/dist/esm/ion-input.entry.js +1 -1
  153. package/dist/esm/ion-item-option_3.entry.js +2 -2
  154. package/dist/esm/ion-item_8.entry.js +3 -3
  155. package/dist/esm/ion-menu_3.entry.js +1 -1
  156. package/dist/esm/ion-modal.entry.js +1 -1
  157. package/dist/esm/ion-progress-bar.entry.js +1 -1
  158. package/dist/esm/ion-radio_2.entry.js +2 -2
  159. package/dist/esm/ion-range.entry.js +1 -1
  160. package/dist/esm/ion-ripple-effect.entry.js +1 -1
  161. package/dist/esm/ion-searchbar.entry.js +1 -1
  162. package/dist/esm/ion-segment_2.entry.js +2 -2
  163. package/dist/esm/ion-select-modal.entry.js +1 -1
  164. package/dist/esm/ion-select_3.entry.js +1 -1
  165. package/dist/esm/ion-spinner.entry.js +1 -1
  166. package/dist/esm/ion-tab-bar_2.entry.js +2 -2
  167. package/dist/esm/ion-textarea.entry.js +1 -1
  168. package/dist/esm/ion-toast.entry.js +1 -1
  169. package/dist/esm/ion-toggle.entry.js +1 -1
  170. package/dist/ionic/ionic.esm.js +1 -1
  171. package/dist/ionic/p-07317db2.entry.js +4 -0
  172. package/dist/ionic/p-0870e5cf.entry.js +4 -0
  173. package/dist/ionic/p-0a4718a4.entry.js +4 -0
  174. package/dist/ionic/p-0e535cb1.entry.js +4 -0
  175. package/dist/ionic/p-11f6cfff.entry.js +4 -0
  176. package/dist/ionic/{p-083bdc4a.entry.js → p-18660f23.entry.js} +1 -1
  177. package/dist/ionic/p-19efbfc2.entry.js +4 -0
  178. package/dist/ionic/{p-abc60b26.entry.js → p-1acc1bfe.entry.js} +1 -1
  179. package/dist/ionic/p-266e8f94.entry.js +4 -0
  180. package/dist/ionic/{p-45b08f61.entry.js → p-2a2897a7.entry.js} +1 -1
  181. package/dist/ionic/p-2e6836c7.entry.js +4 -0
  182. package/dist/ionic/p-304b999f.entry.js +4 -0
  183. package/dist/ionic/p-3f22a9de.entry.js +4 -0
  184. package/dist/ionic/p-4f9d7d26.entry.js +4 -0
  185. package/dist/ionic/p-57bd2088.entry.js +4 -0
  186. package/dist/ionic/p-59c4a194.entry.js +4 -0
  187. package/dist/ionic/p-5f0c7c62.entry.js +4 -0
  188. package/dist/ionic/p-75b29611.entry.js +4 -0
  189. package/dist/ionic/p-845e0158.entry.js +4 -0
  190. package/dist/ionic/p-9149ea07.entry.js +4 -0
  191. package/dist/ionic/{p-0cffd1bf.entry.js → p-9f497b9a.entry.js} +1 -1
  192. package/dist/ionic/p-a08c83ba.entry.js +4 -0
  193. package/dist/ionic/p-a3ea0e64.entry.js +4 -0
  194. package/dist/ionic/p-a5893690.entry.js +4 -0
  195. package/dist/ionic/p-b2aa3ff0.entry.js +4 -0
  196. package/dist/ionic/p-c692cc4a.entry.js +4 -0
  197. package/dist/ionic/p-c7477cd9.entry.js +4 -0
  198. package/dist/ionic/p-d04293de.entry.js +4 -0
  199. package/dist/ionic/p-d6e4bead.entry.js +4 -0
  200. package/dist/ionic/p-e7ecbdce.entry.js +4 -0
  201. package/dist/ionic/{p-bfad272a.entry.js → p-fd72d046.entry.js} +1 -1
  202. package/hydrate/index.js +46 -46
  203. package/hydrate/index.mjs +46 -46
  204. package/package.json +4 -4
  205. package/dist/ionic/p-09ee42c7.entry.js +0 -4
  206. package/dist/ionic/p-0a973339.entry.js +0 -4
  207. package/dist/ionic/p-0edc2fcf.entry.js +0 -4
  208. package/dist/ionic/p-34198a78.entry.js +0 -4
  209. package/dist/ionic/p-3610f001.entry.js +0 -4
  210. package/dist/ionic/p-389093b6.entry.js +0 -4
  211. package/dist/ionic/p-417569b5.entry.js +0 -4
  212. package/dist/ionic/p-637e497f.entry.js +0 -4
  213. package/dist/ionic/p-65d9c265.entry.js +0 -4
  214. package/dist/ionic/p-7918eeaa.entry.js +0 -4
  215. package/dist/ionic/p-80de7b65.entry.js +0 -4
  216. package/dist/ionic/p-80faabb9.entry.js +0 -4
  217. package/dist/ionic/p-8fa42767.entry.js +0 -4
  218. package/dist/ionic/p-905f6505.entry.js +0 -4
  219. package/dist/ionic/p-97bf9127.entry.js +0 -4
  220. package/dist/ionic/p-9af1c2e0.entry.js +0 -4
  221. package/dist/ionic/p-ab387abd.entry.js +0 -4
  222. package/dist/ionic/p-b8c602ec.entry.js +0 -4
  223. package/dist/ionic/p-c6887f5c.entry.js +0 -4
  224. package/dist/ionic/p-c8eb678d.entry.js +0 -4
  225. package/dist/ionic/p-cff18cc5.entry.js +0 -4
  226. package/dist/ionic/p-d207d49c.entry.js +0 -4
  227. package/dist/ionic/p-d9525f67.entry.js +0 -4
  228. package/dist/ionic/p-e6caa048.entry.js +0 -4
  229. package/dist/ionic/p-eea0e705.entry.js +0 -4
  230. package/dist/ionic/p-ff010b26.entry.js +0 -4
package/dist/collection/components/avatar/avatar.ionic.css CHANGED
@@ -4,9 +4,7 @@
4
4
  * @param pixels - Value in pixels to be converted (i.e. px)
5
5
  * @param context (optional) - Baseline value
6
6
  */
7
- /*
8
- Do not edit directly, this file was auto-generated.
9
- */ /**
7
+ /**
10
8
  * A heuristic that applies CSS to tablet
11
9
  * viewports.
12
10
  *
@@ -102,19 +100,19 @@ Do not edit directly, this file was auto-generated.
102
100
  }
103
101
 
104
102
  :host {
105
- --padding-top: var(--ion-space-0, var(--ion-scale-0, 0px));
106
- --padding-bottom: var(--ion-space-0, var(--ion-scale-0, 0px));
107
- font-size: var(--ion-font-size-450, 1.125rem);
108
- font-weight: var(--ion-font-weight-medium, 500);
109
- letter-spacing: var(--ion-font-letter-spacing-0, 0%);
110
- line-height: var(--ion-font-line-height-700, var(--ion-scale-700, 28px));
103
+ --padding-top: var(--token-space-0, var(--token-scale-0, 0px));
104
+ --padding-bottom: var(--token-space-0, var(--token-scale-0, 0px));
105
+ font-size: var(--token-font-size-450, 1.125rem);
106
+ font-weight: var(--token-font-weight-medium, 500);
107
+ letter-spacing: var(--token-font-letter-spacing-0, 0%);
108
+ line-height: var(--token-font-line-height-700, var(--token-scale-700, 28px));
111
109
  text-decoration: none;
112
110
  text-transform: none;
113
111
  display: flex;
114
112
  align-items: center;
115
113
  justify-content: center;
116
- background: var(--ion-bg-neutral-subtle-default, var(--ion-primitives-neutral-200, #efefef));
117
- color: var(--ion-text-subtlest, var(--ion-primitives-neutral-800, #626262));
114
+ background: var(--token-bg-neutral-subtle-default, var(--token-primitives-neutral-200, #efefef));
115
+ color: var(--token-text-subtlest, var(--token-primitives-neutral-800, #626262));
118
116
  }
119
117
 
120
118
  :host(:not(.avatar-image)) {
@@ -128,125 +126,125 @@ Do not edit directly, this file was auto-generated.
128
126
 
129
127
  /* 2-Extra Small */
130
128
  :host(.avatar-xxsmall) {
131
- --padding-end: var(--ion-space-050, var(--ion-scale-050, 2px));
132
- --padding-start: var(--ion-space-050, var(--ion-scale-050, 2px));
133
- font-size: var(--ion-font-size-300, 0.75rem);
134
- font-weight: var(--ion-font-weight-medium, 500);
135
- letter-spacing: var(--ion-font-letter-spacing-0, 0%);
136
- line-height: var(--ion-font-line-height-500, var(--ion-scale-500, 20px));
129
+ --padding-end: var(--token-space-050, var(--token-scale-050, 2px));
130
+ --padding-start: var(--token-space-050, var(--token-scale-050, 2px));
131
+ font-size: var(--token-font-size-300, 0.75rem);
132
+ font-weight: var(--token-font-weight-medium, 500);
133
+ letter-spacing: var(--token-font-letter-spacing-0, 0%);
134
+ line-height: var(--token-font-line-height-500, var(--token-scale-500, 20px));
137
135
  text-decoration: none;
138
136
  text-transform: none;
139
- width: var(--ion-scale-400, 16px);
140
- height: var(--ion-scale-400, 16px);
137
+ width: var(--token-scale-400, 16px);
138
+ height: var(--token-scale-400, 16px);
141
139
  }
142
140
 
143
141
  /* Extra Small */
144
142
  :host(.avatar-xsmall) {
145
- --padding-end: var(--ion-space-050, var(--ion-scale-050, 2px));
146
- --padding-start: var(--ion-space-050, var(--ion-scale-050, 2px));
147
- font-size: var(--ion-font-size-300, 0.75rem);
148
- font-weight: var(--ion-font-weight-medium, 500);
149
- letter-spacing: var(--ion-font-letter-spacing-0, 0%);
150
- line-height: var(--ion-font-line-height-500, var(--ion-scale-500, 20px));
143
+ --padding-end: var(--token-space-050, var(--token-scale-050, 2px));
144
+ --padding-start: var(--token-space-050, var(--token-scale-050, 2px));
145
+ font-size: var(--token-font-size-300, 0.75rem);
146
+ font-weight: var(--token-font-weight-medium, 500);
147
+ letter-spacing: var(--token-font-letter-spacing-0, 0%);
148
+ line-height: var(--token-font-line-height-500, var(--token-scale-500, 20px));
151
149
  text-decoration: none;
152
150
  text-transform: none;
153
- width: var(--ion-scale-600, 24px);
154
- height: var(--ion-scale-600, 24px);
151
+ width: var(--token-scale-600, 24px);
152
+ height: var(--token-scale-600, 24px);
155
153
  }
156
154
 
157
155
  /* Small */
158
156
  :host(.avatar-small) {
159
- --padding-end: var(--ion-space-150, var(--ion-scale-150, 6px));
160
- --padding-start: var(--ion-space-150, var(--ion-scale-150, 6px));
161
- font-size: var(--ion-font-size-400, 1rem);
162
- font-weight: var(--ion-font-weight-medium, 500);
163
- letter-spacing: var(--ion-font-letter-spacing-0, 0%);
164
- line-height: var(--ion-font-line-height-600, var(--ion-scale-600, 24px));
157
+ --padding-end: var(--token-space-150, var(--token-scale-150, 6px));
158
+ --padding-start: var(--token-space-150, var(--token-scale-150, 6px));
159
+ font-size: var(--token-font-size-400, 1rem);
160
+ font-weight: var(--token-font-weight-medium, 500);
161
+ letter-spacing: var(--token-font-letter-spacing-0, 0%);
162
+ line-height: var(--token-font-line-height-600, var(--token-scale-600, 24px));
165
163
  text-decoration: none;
166
164
  text-transform: none;
167
- width: var(--ion-scale-800, 32px);
168
- height: var(--ion-scale-800, 32px);
165
+ width: var(--token-scale-800, 32px);
166
+ height: var(--token-scale-800, 32px);
169
167
  }
170
168
 
171
169
  /* Medium */
172
170
  :host(.avatar-medium) {
173
- --padding-end: var(--ion-space-200, var(--ion-scale-200, 8px));
174
- --padding-start: var(--ion-space-200, var(--ion-scale-200, 8px));
175
- width: var(--ion-scale-1000, 40px);
176
- height: var(--ion-scale-1000, 40px);
171
+ --padding-end: var(--token-space-200, var(--token-scale-200, 8px));
172
+ --padding-start: var(--token-space-200, var(--token-scale-200, 8px));
173
+ width: var(--token-scale-1000, 40px);
174
+ height: var(--token-scale-1000, 40px);
177
175
  }
178
176
 
179
177
  /* Large */
180
178
  :host(.avatar-large) {
181
- --padding-end: var(--ion-space-250, var(--ion-scale-250, 10px));
182
- --padding-start: var(--ion-space-250, var(--ion-scale-250, 10px));
183
- font-size: var(--ion-font-size-500, 1.25rem);
184
- font-weight: var(--ion-font-weight-medium, 500);
185
- letter-spacing: var(--ion-font-letter-spacing-0, 0%);
186
- line-height: var(--ion-font-line-height-700, var(--ion-scale-700, 28px));
179
+ --padding-end: var(--token-space-250, var(--token-scale-250, 10px));
180
+ --padding-start: var(--token-space-250, var(--token-scale-250, 10px));
181
+ font-size: var(--token-font-size-500, 1.25rem);
182
+ font-weight: var(--token-font-weight-medium, 500);
183
+ letter-spacing: var(--token-font-letter-spacing-0, 0%);
184
+ line-height: var(--token-font-line-height-700, var(--token-scale-700, 28px));
187
185
  text-decoration: none;
188
186
  text-transform: none;
189
- width: var(--ion-scale-1200, 48px);
190
- height: var(--ion-scale-1200, 48px);
187
+ width: var(--token-scale-1200, 48px);
188
+ height: var(--token-scale-1200, 48px);
191
189
  }
192
190
 
193
191
  /* Extra Large */
194
192
  :host(.avatar-xlarge) {
195
- --padding-end: var(--ion-space-300, var(--ion-scale-300, 12px));
196
- --padding-start: var(--ion-space-300, var(--ion-scale-300, 12px));
197
- font-size: var(--ion-font-size-550, 1.375rem);
198
- font-weight: var(--ion-font-weight-medium, 500);
199
- letter-spacing: var(--ion-font-letter-spacing-0, 0%);
200
- line-height: var(--ion-font-line-height-700, var(--ion-scale-700, 28px));
193
+ --padding-end: var(--token-space-300, var(--token-scale-300, 12px));
194
+ --padding-start: var(--token-space-300, var(--token-scale-300, 12px));
195
+ font-size: var(--token-font-size-550, 1.375rem);
196
+ font-weight: var(--token-font-weight-medium, 500);
197
+ letter-spacing: var(--token-font-letter-spacing-0, 0%);
198
+ line-height: var(--token-font-line-height-700, var(--token-scale-700, 28px));
201
199
  text-decoration: none;
202
200
  text-transform: none;
203
- width: var(--ion-scale-1400, 56px);
204
- height: var(--ion-scale-1400, 56px);
201
+ width: var(--token-scale-1400, 56px);
202
+ height: var(--token-scale-1400, 56px);
205
203
  }
206
204
 
207
205
  :host(.avatar-xxsmall.avatar-soft),
208
206
  :host(.avatar-xsmall.avatar-soft),
209
207
  :host(.avatar-small.avatar-soft) {
210
- --border-radius: var(--ion-soft-2xs, var(--ion-border-radius-100, var(--ion-scale-100, 4px)));
208
+ --border-radius: var(--token-soft-2xs, var(--token-border-radius-100, var(--token-scale-100, 4px)));
211
209
  }
212
210
 
213
211
  :host(.avatar-medium.avatar-soft) {
214
- --border-radius: var(--ion-soft-xs, var(--ion-border-radius-200, var(--ion-scale-200, 8px)));
212
+ --border-radius: var(--token-soft-xs, var(--token-border-radius-200, var(--token-scale-200, 8px)));
215
213
  }
216
214
 
217
215
  :host(.avatar-large.avatar-soft),
218
216
  :host(.avatar-xlarge.avatar-soft) {
219
- --border-radius: var(--ion-soft-md, var(--ion-border-radius-400, var(--ion-scale-400, 16px)));
217
+ --border-radius: var(--token-soft-md, var(--token-border-radius-400, var(--token-scale-400, 16px)));
220
218
  }
221
219
 
222
220
  :host(.avatar-xxsmall.avatar-round),
223
221
  :host(.avatar-xsmall.avatar-round),
224
222
  :host(.avatar-small.avatar-round) {
225
- --border-radius: var(--ion-round-2xs, var(--ion-border-radius-full, 999px));
223
+ --border-radius: var(--token-round-2xs, var(--token-border-radius-full, 999px));
226
224
  }
227
225
 
228
226
  :host(.avatar-medium.avatar-round) {
229
- --border-radius: var(--ion-round-xs, var(--ion-border-radius-full, 999px));
227
+ --border-radius: var(--token-round-xs, var(--token-border-radius-full, 999px));
230
228
  }
231
229
 
232
230
  :host(.avatar-large.avatar-round),
233
231
  :host(.avatar-xlarge.avatar-round) {
234
- --border-radius: var(--ion-round-md, var(--ion-border-radius-full, 999px));
232
+ --border-radius: var(--token-round-md, var(--token-border-radius-full, 999px));
235
233
  }
236
234
 
237
235
  :host(.avatar-xxsmall.avatar-rectangular),
238
236
  :host(.avatar-xsmall.avatar-rectangular),
239
237
  :host(.avatar-small.avatar-rectangular) {
240
- --border-radius: var(--ion-rectangular-2xs, var(--ion-border-radius-0, var(--ion-scale-0, 0px)));
238
+ --border-radius: var(--token-rectangular-2xs, var(--token-border-radius-0, var(--token-scale-0, 0px)));
241
239
  }
242
240
 
243
241
  :host(.avatar-medium.avatar-rectangular) {
244
- --border-radius: var(--ion-rectangular-xs, var(--ion-border-radius-0, var(--ion-scale-0, 0px)));
242
+ --border-radius: var(--token-rectangular-xs, var(--token-border-radius-0, var(--token-scale-0, 0px)));
245
243
  }
246
244
 
247
245
  :host(.avatar-large.avatar-rectangular),
248
246
  :host(.avatar-xlarge.avatar-rectangular) {
249
- --border-radius: var(--ion-rectangular-md, var(--ion-border-radius-0, var(--ion-scale-0, 0px)));
247
+ --border-radius: var(--token-rectangular-md, var(--token-border-radius-0, var(--token-scale-0, 0px)));
250
248
  }
251
249
 
252
250
  :host(.avatar-icon) {
@@ -257,49 +255,49 @@ Do not edit directly, this file was auto-generated.
257
255
  }
258
256
 
259
257
  :host(.avatar-xxsmall) ::slotted(ion-icon) {
260
- width: var(--ion-scale-300, 12px);
261
- height: var(--ion-scale-300, 12px);
258
+ width: var(--token-scale-300, 12px);
259
+ height: var(--token-scale-300, 12px);
262
260
  }
263
261
 
264
262
  :host(.avatar-xsmall) ::slotted(ion-icon) {
265
- width: var(--ion-scale-400, 16px);
266
- height: var(--ion-scale-400, 16px);
263
+ width: var(--token-scale-400, 16px);
264
+ height: var(--token-scale-400, 16px);
267
265
  }
268
266
 
269
267
  :host(.avatar-small) ::slotted(ion-icon) {
270
- width: var(--ion-scale-500, 20px);
271
- height: var(--ion-scale-500, 20px);
268
+ width: var(--token-scale-500, 20px);
269
+ height: var(--token-scale-500, 20px);
272
270
  }
273
271
 
274
272
  :host(.avatar-medium) ::slotted(ion-icon) {
275
- width: var(--ion-scale-600, 24px);
276
- height: var(--ion-scale-600, 24px);
273
+ width: var(--token-scale-600, 24px);
274
+ height: var(--token-scale-600, 24px);
277
275
  }
278
276
 
279
277
  :host(.avatar-large) ::slotted(ion-icon) {
280
- width: var(--ion-scale-700, 28px);
281
- height: var(--ion-scale-700, 28px);
278
+ width: var(--token-scale-700, 28px);
279
+ height: var(--token-scale-700, 28px);
282
280
  }
283
281
 
284
282
  :host(.avatar-xlarge) ::slotted(ion-icon) {
285
- width: var(--ion-scale-800, 32px);
286
- height: var(--ion-scale-800, 32px);
283
+ width: var(--token-scale-800, 32px);
284
+ height: var(--token-scale-800, 32px);
287
285
  }
288
286
 
289
287
  :host ::slotted(ion-badge.badge-vertical-top:empty) {
290
- transform: translate(var(--ion-scale-050, 2px), calc(var(--ion-scale-050, 2px) * -1));
288
+ transform: translate(var(--token-scale-050, 2px), calc(var(--token-scale-050, 2px) * -1));
291
289
  }
292
290
 
293
291
  :host(.avatar-xxsmall) ::slotted(ion-badge.badge-vertical-top:empty) {
294
- transform: translate(var(--ion-scale-100, 4px), calc(var(--ion-scale-100, 4px) * -1));
292
+ transform: translate(var(--token-scale-100, 4px), calc(var(--token-scale-100, 4px) * -1));
295
293
  }
296
294
 
297
295
  :host ::slotted(ion-badge.badge-vertical-bottom:empty) {
298
- transform: translate(0, var(--ion-scale-100, 4px));
296
+ transform: translate(0, var(--token-scale-100, 4px));
299
297
  }
300
298
 
301
299
  :host(.avatar-xxsmall) ::slotted(ion-badge.badge-vertical-bottom:empty) {
302
- transform: translate(var(--ion-scale-100, 4px), var(--ion-scale-100, 4px));
300
+ transform: translate(var(--token-scale-100, 4px), var(--token-scale-100, 4px));
303
301
  }
304
302
 
305
303
  :host ::slotted(ion-badge.badge-vertical-bottom:not(:empty)) {
@@ -307,36 +305,36 @@ Do not edit directly, this file was auto-generated.
307
305
  }
308
306
 
309
307
  :host(.avatar-xxsmall) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)) {
310
- bottom: var(--ion-scale-100, 4px);
308
+ bottom: var(--token-scale-100, 4px);
311
309
  transform: translate(100%, 100%);
312
310
  }
313
311
  :host(.avatar-xxsmall) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)) {
314
- inset-inline-end: var(--ion-scale-100, 4px);
312
+ inset-inline-end: var(--token-scale-100, 4px);
315
313
  }
316
314
 
317
315
  :host(.avatar-xsmall) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)) {
318
- bottom: calc(var(--ion-scale-050, 2px) * -1);
316
+ bottom: calc(var(--token-scale-050, 2px) * -1);
319
317
  }
320
318
  :host(.avatar-xsmall) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)) {
321
- inset-inline-end: calc(var(--ion-scale-050, 2px) * -1);
319
+ inset-inline-end: calc(var(--token-scale-050, 2px) * -1);
322
320
  }
323
321
 
324
322
  :host(.avatar-small) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)),
325
323
  :host(.avatar-medium) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)),
326
324
  :host(.avatar-large) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)) {
327
- bottom: var(--ion-scale-050, 2px);
325
+ bottom: var(--token-scale-050, 2px);
328
326
  }
329
327
  :host(.avatar-small) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)),
330
328
  :host(.avatar-medium) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)),
331
329
  :host(.avatar-large) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)) {
332
- inset-inline-end: var(--ion-scale-050, 2px);
330
+ inset-inline-end: var(--token-scale-050, 2px);
333
331
  }
334
332
 
335
333
  :host(.avatar-xlarge) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)) {
336
- bottom: var(--ion-scale-150, 6px);
334
+ bottom: var(--token-scale-150, 6px);
337
335
  }
338
336
  :host(.avatar-xlarge) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)) {
339
- inset-inline-end: var(--ion-scale-150, 6px);
337
+ inset-inline-end: var(--token-scale-150, 6px);
340
338
  }
341
339
 
342
340
  :host ::slotted(ion-badge.badge-vertical-top:not(:empty)) {
@@ -344,22 +342,22 @@ Do not edit directly, this file was auto-generated.
344
342
  }
345
343
 
346
344
  :host(.avatar-xxsmall) ::slotted(ion-badge.badge-vertical-top:not(:empty)) {
347
- top: var(--ion-scale-050, 2px);
345
+ top: var(--token-scale-050, 2px);
348
346
  }
349
347
  :host(.avatar-xxsmall) ::slotted(ion-badge.badge-vertical-top:not(:empty)) {
350
348
  inset-inline-end: 0;
351
349
  }
352
350
 
353
351
  :host(.avatar-xsmall) ::slotted(ion-badge.badge-vertical-top:not(:empty)) {
354
- top: var(--ion-scale-100, 4px);
352
+ top: var(--token-scale-100, 4px);
355
353
  }
356
354
  :host(.avatar-xsmall) ::slotted(ion-badge.badge-vertical-top:not(:empty)) {
357
- inset-inline-end: calc(var(--ion-scale-050, 2px) * -1);
355
+ inset-inline-end: calc(var(--token-scale-050, 2px) * -1);
358
356
  }
359
357
 
360
358
  :host(.avatar-small) ::slotted(ion-badge.badge-vertical-top:not(:empty)),
361
359
  :host(.avatar-medium) ::slotted(ion-badge.badge-vertical-top:not(:empty)) {
362
- top: var(--ion-scale-150, 6px);
360
+ top: var(--token-scale-150, 6px);
363
361
  }
364
362
  :host(.avatar-small) ::slotted(ion-badge.badge-vertical-top:not(:empty)),
365
363
  :host(.avatar-medium) ::slotted(ion-badge.badge-vertical-top:not(:empty)) {
@@ -367,17 +365,17 @@ Do not edit directly, this file was auto-generated.
367
365
  }
368
366
 
369
367
  :host(.avatar-large) ::slotted(ion-badge.badge-vertical-top:not(:empty)) {
370
- top: var(--ion-scale-150, 6px);
368
+ top: var(--token-scale-150, 6px);
371
369
  }
372
370
  :host(.avatar-large) ::slotted(ion-badge.badge-vertical-top:not(:empty)) {
373
- inset-inline-end: var(--ion-scale-050, 2px);
371
+ inset-inline-end: var(--token-scale-050, 2px);
374
372
  }
375
373
 
376
374
  :host(.avatar-xlarge) ::slotted(ion-badge.badge-vertical-top:not(:empty)) {
377
- top: var(--ion-scale-150, 6px);
375
+ top: var(--token-scale-150, 6px);
378
376
  }
379
377
  :host(.avatar-xlarge) ::slotted(ion-badge.badge-vertical-top:not(:empty)) {
380
- inset-inline-end: var(--ion-scale-150, 6px);
378
+ inset-inline-end: var(--token-scale-150, 6px);
381
379
  }
382
380
 
383
381
  :host(.avatar-disabled)::before {
@@ -387,7 +385,7 @@ Do not edit directly, this file was auto-generated.
387
385
  top: 0;
388
386
  bottom: 0;
389
387
  position: absolute;
390
- background-color: var(--ion-state-disabled, rgba(255, 255, 255, 0.6));
388
+ background-color: var(--token-state-disabled, rgba(255, 255, 255, 0.6));
391
389
  content: "";
392
390
  pointer-events: none;
393
391
  }
package/dist/collection/components/backdrop/backdrop.ionic.css CHANGED
@@ -4,9 +4,7 @@
4
4
  * @param pixels - Value in pixels to be converted (i.e. px)
5
5
  * @param context (optional) - Baseline value
6
6
  */
7
- /*
8
- Do not edit directly, this file was auto-generated.
9
- */ /**
7
+ /**
10
8
  * A heuristic that applies CSS to tablet
11
9
  * viewports.
12
10
  *
@@ -106,6 +104,6 @@ Do not edit directly, this file was auto-generated.
106
104
  }
107
105
 
108
106
  :host {
109
- background-color: rgba(var(--ion-primitives-base-black-rgb, 17, 17, 17), 0.7);
107
+ background-color: rgba(var(--token-primitives-base-black-rgb, 17, 17, 17), 0.7);
110
108
  z-index: 2;
111
109
  }
package/dist/collection/components/badge/badge.ionic.css CHANGED
@@ -4,9 +4,7 @@
4
4
  * @param pixels - Value in pixels to be converted (i.e. px)
5
5
  * @param context (optional) - Baseline value
6
6
  */
7
- /*
8
- Do not edit directly, this file was auto-generated.
9
- */ /**
7
+ /**
10
8
  * A heuristic that applies CSS to tablet
11
9
  * viewports.
12
10
  *
@@ -126,25 +124,25 @@ Do not edit directly, this file was auto-generated.
126
124
  }
127
125
 
128
126
  :host {
129
- --padding-start: var(--ion-space-200, var(--ion-scale-200, 8px));
130
- --padding-end: var(--ion-space-200, var(--ion-scale-200, 8px));
131
- --padding-top: var(--ion-space-0, var(--ion-scale-0, 0px));
132
- --padding-bottom: var(--ion-space-0, var(--ion-scale-0, 0px));
133
- font-size: var(--ion-font-size-300, 0.75rem);
134
- font-weight: var(--ion-font-weight-medium, 500);
135
- letter-spacing: var(--ion-font-letter-spacing-0, 0%);
136
- line-height: var(--ion-font-line-height-500, var(--ion-scale-500, 20px));
127
+ --padding-start: var(--token-space-200, var(--token-scale-200, 8px));
128
+ --padding-end: var(--token-space-200, var(--token-scale-200, 8px));
129
+ --padding-top: var(--token-space-0, var(--token-scale-0, 0px));
130
+ --padding-bottom: var(--token-space-0, var(--token-scale-0, 0px));
131
+ font-size: var(--token-font-size-300, 0.75rem);
132
+ font-weight: var(--token-font-weight-medium, 500);
133
+ letter-spacing: var(--token-font-letter-spacing-0, 0%);
134
+ line-height: var(--token-font-line-height-500, var(--token-scale-500, 20px));
137
135
  text-decoration: none;
138
136
  text-transform: none;
139
137
  display: inline-flex;
140
138
  align-items: center;
141
139
  justify-content: center;
142
- min-width: var(--ion-scale-250, 10px);
140
+ min-width: var(--token-scale-250, 10px);
143
141
  }
144
142
 
145
143
  :host(.badge-bold) {
146
- --background: var(--ion-color-primary, var(--ion-bg-primary-base-default, var(--ion-semantics-primary-base, var(--ion-semantics-primary-700, var(--ion-primitives-blue-700, #105cef)))));
147
- --color: var(--ion-color-primary-contrast, var(--ion-text-inverse, var(--ion-primitives-base-white, #ffffff)));
144
+ --background: var(--ion-color-primary, var(--token-bg-primary-base-default, var(--token-semantics-primary-base, var(--token-semantics-primary-700, var(--token-primitives-blue-700, #105cef)))));
145
+ --color: var(--ion-color-primary-contrast, var(--token-text-inverse, var(--token-primitives-base-white, #ffffff)));
148
146
  }
149
147
 
150
148
  :host(.badge-bold.ion-color) {
@@ -153,8 +151,8 @@ Do not edit directly, this file was auto-generated.
153
151
  }
154
152
 
155
153
  :host(.badge-subtle) {
156
- --background: var(--ion-color-primary-subtle, var(--ion-bg-primary-subtle-default, var(--ion-semantics-primary-100, var(--ion-primitives-blue-100, #f2f4fd))));
157
- --color: var(--ion-color-primary-subtle-contrast, var(--ion-text-primary, var(--ion-semantics-primary-900, var(--ion-primitives-blue-900, #0d4bc3))));
154
+ --background: var(--ion-color-primary-subtle, var(--token-bg-primary-subtle-default, var(--token-semantics-primary-100, var(--token-primitives-blue-100, #f2f4fd))));
155
+ --color: var(--ion-color-primary-subtle-contrast, var(--token-text-primary, var(--token-semantics-primary-900, var(--token-primitives-blue-900, #0d4bc3))));
158
156
  }
159
157
 
160
158
  :host(.badge-subtle.ion-color) {
@@ -164,56 +162,56 @@ Do not edit directly, this file was auto-generated.
164
162
 
165
163
  /* Soft Badge */
166
164
  :host(.badge-soft) {
167
- border-radius: var(--ion-soft-xs, var(--ion-border-radius-200, var(--ion-scale-200, 8px)));
165
+ border-radius: var(--token-soft-xs, var(--token-border-radius-200, var(--token-scale-200, 8px)));
168
166
  }
169
167
 
170
168
  :host(.badge-small.badge-soft) {
171
- border-radius: var(--ion-soft-2xs, var(--ion-border-radius-100, var(--ion-scale-100, 4px)));
169
+ border-radius: var(--token-soft-2xs, var(--token-border-radius-100, var(--token-scale-100, 4px)));
172
170
  }
173
171
 
174
172
  /* Round Badge */
175
173
  :host(.badge-round) {
176
- border-radius: var(--ion-round-sm, var(--ion-border-radius-full, 999px));
174
+ border-radius: var(--token-round-sm, var(--token-border-radius-full, 999px));
177
175
  }
178
176
 
179
177
  /* Rectangular Badge */
180
178
  :host(.badge-rectangular) {
181
- border-radius: var(--ion-rectangular-sm, var(--ion-border-radius-0, var(--ion-scale-0, 0px)));
179
+ border-radius: var(--token-rectangular-sm, var(--token-border-radius-0, var(--token-scale-0, 0px)));
182
180
  }
183
181
 
184
182
  /* Small Badge */
185
183
  :host(.badge-small) {
186
- --padding-start: var(--ion-space-050, var(--ion-scale-050, 2px));
187
- --padding-end: var(--ion-space-050, var(--ion-scale-050, 2px));
188
- min-width: var(--ion-scale-400, 16px);
189
- height: var(--ion-scale-400, 16px);
184
+ --padding-start: var(--token-space-050, var(--token-scale-050, 2px));
185
+ --padding-end: var(--token-space-050, var(--token-scale-050, 2px));
186
+ min-width: var(--token-scale-400, 16px);
187
+ height: var(--token-scale-400, 16px);
190
188
  }
191
189
 
192
190
  :host(.badge-small) ::slotted(ion-icon) {
193
- width: var(--ion-scale-300, 12px);
194
- height: var(--ion-scale-300, 12px);
191
+ width: var(--token-scale-300, 12px);
192
+ height: var(--token-scale-300, 12px);
195
193
  }
196
194
 
197
195
  /* Medium Badge */
198
196
  /* Large size defaults to the medium size to avoid styles breakage */
199
197
  :host(.badge-medium),
200
198
  :host(.badge-large) {
201
- --padding-start: var(--ion-space-100, var(--ion-scale-100, 4px));
202
- --padding-end: var(--ion-space-100, var(--ion-scale-100, 4px));
203
- font-size: var(--ion-font-size-350, 0.875rem);
204
- font-weight: var(--ion-font-weight-medium, 500);
205
- letter-spacing: var(--ion-font-letter-spacing-0, 0%);
206
- line-height: var(--ion-font-line-height-600, var(--ion-scale-600, 24px));
199
+ --padding-start: var(--token-space-100, var(--token-scale-100, 4px));
200
+ --padding-end: var(--token-space-100, var(--token-scale-100, 4px));
201
+ font-size: var(--token-font-size-350, 0.875rem);
202
+ font-weight: var(--token-font-weight-medium, 500);
203
+ letter-spacing: var(--token-font-letter-spacing-0, 0%);
204
+ line-height: var(--token-font-line-height-600, var(--token-scale-600, 24px));
207
205
  text-decoration: none;
208
206
  text-transform: none;
209
- min-width: var(--ion-scale-600, 24px);
210
- height: var(--ion-scale-600, 24px);
207
+ min-width: var(--token-scale-600, 24px);
208
+ height: var(--token-scale-600, 24px);
211
209
  }
212
210
 
213
211
  :host(.badge-medium) ::slotted(ion-icon),
214
212
  :host(.badge-large) ::slotted(ion-icon) {
215
- width: var(--ion-scale-400, 16px);
216
- height: var(--ion-scale-400, 16px);
213
+ width: var(--token-scale-400, 16px);
214
+ height: var(--token-scale-400, 16px);
217
215
  }
218
216
 
219
217
  :host(:empty) {
@@ -222,28 +220,28 @@ Do not edit directly, this file was auto-generated.
222
220
  }
223
221
 
224
222
  :host([vertical]:not(:empty)) {
225
- --padding-start: var(--ion-scale-100, 4px);
226
- --padding-end: var(--ion-scale-100, 4px);
227
- --padding-top: var(--ion-scale-100, 4px);
228
- --padding-bottom: var(--ion-scale-100, 4px);
223
+ --padding-start: var(--token-scale-100, 4px);
224
+ --padding-end: var(--token-scale-100, 4px);
225
+ --padding-top: var(--token-scale-100, 4px);
226
+ --padding-bottom: var(--token-scale-100, 4px);
229
227
  }
230
228
 
231
229
  /* sm */
232
230
  :host(.badge-small:empty) {
233
- min-width: var(--ion-scale-200, 8px);
234
- height: var(--ion-scale-200, 8px);
231
+ min-width: var(--token-scale-200, 8px);
232
+ height: var(--token-scale-200, 8px);
235
233
  }
236
234
 
237
235
  /* md */
238
236
  :host(.badge-medium:empty) {
239
- min-width: var(--ion-scale-300, 12px);
240
- height: var(--ion-scale-300, 12px);
237
+ min-width: var(--token-scale-300, 12px);
238
+ height: var(--token-scale-300, 12px);
241
239
  }
242
240
 
243
241
  /* lg */
244
242
  :host(.badge-large:empty) {
245
- min-width: var(--ion-scale-400, 16px);
246
- height: var(--ion-scale-400, 16px);
243
+ min-width: var(--token-scale-400, 16px);
244
+ height: var(--token-scale-400, 16px);
247
245
  }
248
246
 
249
247
  :host([vertical].in-tab-button) {
@@ -260,18 +258,18 @@ Do not edit directly, this file was auto-generated.
260
258
  }
261
259
 
262
260
  :host(:not(:empty).in-button) {
263
- --padding-start: var(--ion-scale-050, 2px);
264
- --padding-end: var(--ion-scale-050, 2px);
265
- font-size: var(--ion-font-size-300, 0.75rem);
266
- font-weight: var(--ion-font-weight-medium, 500);
267
- letter-spacing: var(--ion-font-letter-spacing-1, 1%);
268
- line-height: var(--ion-font-line-height-500, var(--ion-scale-500, 20px));
261
+ --padding-start: var(--token-scale-050, 2px);
262
+ --padding-end: var(--token-scale-050, 2px);
263
+ font-size: var(--token-font-size-300, 0.75rem);
264
+ font-weight: var(--token-font-weight-medium, 500);
265
+ letter-spacing: var(--token-font-letter-spacing-1, 1%);
266
+ line-height: var(--token-font-line-height-500, var(--token-scale-500, 20px));
269
267
  text-decoration: none;
270
268
  text-transform: none;
271
- min-width: var(--ion-scale-400, 16px);
272
- height: var(--ion-scale-400, 16px);
269
+ min-width: var(--token-scale-400, 16px);
270
+ height: var(--token-scale-400, 16px);
273
271
  }
274
272
  :host(:not(:empty).in-button) ::slotted(ion-icon) {
275
- width: var(--ion-scale-300, 12px);
276
- height: var(--ion-scale-300, 12px);
273
+ width: var(--token-scale-300, 12px);
274
+ height: var(--token-scale-300, 12px);
277
275
  }