@ebay/skin 17.5.0 → 18.0.0-next.0

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 (475) hide show
  1. package/.changeset/bright-kiwis-repeat.md +5 -0
  2. package/.changeset/chilled-games-stare.md +5 -0
  3. package/.changeset/gold-radios-reply.md +5 -0
  4. package/.changeset/light-lions-explode.md +5 -0
  5. package/.changeset/pre.json +15 -0
  6. package/.changeset/ten-rockets-double.md +5 -0
  7. package/.changeset/wild-donkeys-attack.md +5 -0
  8. package/.github/workflows/pages-html-proofer.yml +1 -1
  9. package/.prettierignore +0 -1
  10. package/.storybook/main.js +4 -11
  11. package/.storybook/preview.js +1 -1
  12. package/.stylelintrc +16 -24
  13. package/CHANGELOG.md +20 -0
  14. package/CONTRIBUTING.md +1 -1
  15. package/bundles.browser.json +1 -0
  16. package/bundles.css +1 -0
  17. package/bundles.js +1 -0
  18. package/bundles.mjs +1 -0
  19. package/chart-legend.browser.json +1 -0
  20. package/chart-legend.css +1 -0
  21. package/chart-legend.js +1 -0
  22. package/chart-legend.mjs +1 -0
  23. package/dist/alert-dialog/alert-dialog.css +84 -72
  24. package/dist/alert-dialog/alert-dialog.css.map +1 -0
  25. package/dist/avatar/avatar.css +81 -62
  26. package/dist/avatar/avatar.css.map +1 -0
  27. package/dist/badge/badge.css +16 -11
  28. package/dist/badge/badge.css.map +1 -0
  29. package/dist/breadcrumbs/breadcrumbs.css +85 -57
  30. package/dist/breadcrumbs/breadcrumbs.css.map +1 -0
  31. package/dist/bundles/skin-default.css +10068 -0
  32. package/dist/bundles/skin-default.css.map +1 -0
  33. package/dist/bundles/skin-full.css +10252 -0
  34. package/dist/bundles/skin-full.css.map +1 -0
  35. package/dist/bundles/skin-headless.css +9680 -0
  36. package/dist/bundles/skin-headless.css.map +1 -0
  37. package/dist/button/button.css +590 -415
  38. package/dist/button/button.css.map +1 -0
  39. package/dist/calendar/calendar.css +148 -102
  40. package/dist/calendar/calendar.css.map +1 -0
  41. package/dist/carousel/carousel.css +231 -205
  42. package/dist/carousel/carousel.css.map +1 -0
  43. package/dist/chart-legend/chart-legend.css +77 -0
  44. package/dist/chart-legend/chart-legend.css.map +1 -0
  45. package/dist/checkbox/checkbox.css +77 -54
  46. package/dist/checkbox/checkbox.css.map +1 -0
  47. package/dist/chip/chip.css +41 -34
  48. package/dist/chip/chip.css.map +1 -0
  49. package/dist/chips-combobox/chips-combobox.css +77 -62
  50. package/dist/chips-combobox/chips-combobox.css.map +1 -0
  51. package/dist/combobox/combobox.css +244 -161
  52. package/dist/combobox/combobox.css.map +1 -0
  53. package/dist/confirm-dialog/confirm-dialog.css +86 -73
  54. package/dist/confirm-dialog/confirm-dialog.css.map +1 -0
  55. package/dist/cta-button/cta-button.css +96 -70
  56. package/dist/cta-button/cta-button.css.map +1 -0
  57. package/dist/date-textbox/date-textbox.css +24 -15
  58. package/dist/date-textbox/date-textbox.css.map +1 -0
  59. package/dist/details/details.css +34 -27
  60. package/dist/details/details.css.map +1 -0
  61. package/dist/donut-chart/donut-chart.css +91 -0
  62. package/dist/donut-chart/donut-chart.css.map +1 -0
  63. package/dist/drawer-dialog/drawer-dialog.css +133 -118
  64. package/dist/drawer-dialog/drawer-dialog.css.map +1 -0
  65. package/dist/education-notice/education-notice.css +62 -34
  66. package/dist/education-notice/education-notice.css.map +1 -0
  67. package/dist/eek/eek.css +97 -74
  68. package/dist/eek/eek.css.map +1 -0
  69. package/dist/field/field.css +87 -53
  70. package/dist/field/field.css.map +1 -0
  71. package/dist/filter-button/filter-button.css +115 -75
  72. package/dist/filter-button/filter-button.css.map +1 -0
  73. package/dist/filter-menu/filter-menu.css +168 -113
  74. package/dist/filter-menu/filter-menu.css.map +1 -0
  75. package/dist/filter-menu-button/filter-menu-button.css +298 -172
  76. package/dist/filter-menu-button/filter-menu-button.css.map +1 -0
  77. package/dist/flag/flag.css +528 -272
  78. package/dist/flag/flag.css.map +1 -0
  79. package/dist/floating-label/floating-label.css +100 -51
  80. package/dist/floating-label/floating-label.css.map +1 -0
  81. package/dist/fullscreen-dialog/fullscreen-dialog.css +112 -99
  82. package/dist/fullscreen-dialog/fullscreen-dialog.css.map +1 -0
  83. package/dist/global/global.css +32 -13
  84. package/dist/global/global.css.map +1 -0
  85. package/dist/icon/icon.css +50 -2946
  86. package/dist/icon/icon.css.map +1 -0
  87. package/dist/icon-button/icon-button.css +307 -212
  88. package/dist/icon-button/icon-button.css.map +1 -0
  89. package/dist/image-placeholder/image-placeholder.css +6 -4
  90. package/dist/image-placeholder/image-placeholder.css.map +1 -0
  91. package/dist/infotip/infotip.css +121 -92
  92. package/dist/infotip/infotip.css.map +1 -0
  93. package/dist/inline-notice/inline-notice.css +16 -9
  94. package/dist/inline-notice/inline-notice.css.map +1 -0
  95. package/dist/lightbox-dialog/lightbox-dialog.css +239 -183
  96. package/dist/lightbox-dialog/lightbox-dialog.css.map +1 -0
  97. package/dist/link/link.css +37 -19
  98. package/dist/link/link.css.map +1 -0
  99. package/dist/listbox/listbox.css +86 -58
  100. package/dist/listbox/listbox.css.map +1 -0
  101. package/dist/listbox-button/listbox-button.css +240 -134
  102. package/dist/listbox-button/listbox-button.css.map +1 -0
  103. package/dist/marketsans/marketsans.css +34 -12
  104. package/dist/marketsans/marketsans.css.map +1 -0
  105. package/dist/menu/menu.css +136 -99
  106. package/dist/menu/menu.css.map +1 -0
  107. package/dist/menu-button/menu-button.css +236 -157
  108. package/dist/menu-button/menu-button.css.map +1 -0
  109. package/dist/mixins/_typography-mixins.scss +136 -0
  110. package/dist/mixins/_utility-mixins.scss +62 -0
  111. package/dist/page-grid/page-grid.css +57 -46
  112. package/dist/page-grid/page-grid.css.map +1 -0
  113. package/dist/page-notice/page-notice.css +142 -85
  114. package/dist/page-notice/page-notice.css.map +1 -0
  115. package/dist/pagination/pagination.css +109 -80
  116. package/dist/pagination/pagination.css.map +1 -0
  117. package/dist/panel-dialog/panel-dialog.css +115 -98
  118. package/dist/panel-dialog/panel-dialog.css.map +1 -0
  119. package/dist/phone-input/phone-input.css +100 -88
  120. package/dist/phone-input/phone-input.css.map +1 -0
  121. package/dist/progress-bar/progress-bar.css +32 -15
  122. package/dist/progress-bar/progress-bar.css.map +1 -0
  123. package/dist/progress-bar-expressive/progress-bar-expressive.css +302 -203
  124. package/dist/progress-bar-expressive/progress-bar-expressive.css.map +1 -0
  125. package/dist/progress-spinner/progress-spinner.css +24 -20
  126. package/dist/progress-spinner/progress-spinner.css.map +1 -0
  127. package/dist/progress-stepper/progress-stepper.css +229 -117
  128. package/dist/progress-stepper/progress-stepper.css.map +1 -0
  129. package/dist/radio/radio.css +71 -52
  130. package/dist/radio/radio.css.map +1 -0
  131. package/dist/section-notice/section-notice.css +102 -72
  132. package/dist/section-notice/section-notice.css.map +1 -0
  133. package/dist/section-title/section-title.css +66 -52
  134. package/dist/section-title/section-title.css.map +1 -0
  135. package/dist/segmented-buttons/segmented-buttons.css +49 -38
  136. package/dist/segmented-buttons/segmented-buttons.css.map +1 -0
  137. package/dist/select/select.css +96 -60
  138. package/dist/select/select.css.map +1 -0
  139. package/dist/signal/signal.css +25 -16
  140. package/dist/signal/signal.css.map +1 -0
  141. package/dist/skeleton/skeleton.css +131 -108
  142. package/dist/skeleton/skeleton.css.map +1 -0
  143. package/dist/snackbar-dialog/snackbar-dialog.css +82 -52
  144. package/dist/snackbar-dialog/snackbar-dialog.css.map +1 -0
  145. package/dist/split-button/split-button.css +3 -1
  146. package/dist/split-button/split-button.css.map +1 -0
  147. package/dist/star-rating/star-rating.css +40 -19
  148. package/dist/star-rating/star-rating.css.map +1 -0
  149. package/dist/star-rating-select/star-rating-select.css +67 -39
  150. package/dist/star-rating-select/star-rating-select.css.map +1 -0
  151. package/dist/svg/icons.svg +21 -21
  152. package/dist/switch/switch.css +119 -78
  153. package/dist/switch/switch.css.map +1 -0
  154. package/dist/tabs/tabs.css +70 -51
  155. package/dist/tabs/tabs.css.map +1 -0
  156. package/dist/textbox/textbox.css +167 -112
  157. package/dist/textbox/textbox.css.map +1 -0
  158. package/dist/toast-dialog/toast-dialog.css +140 -90
  159. package/dist/toast-dialog/toast-dialog.css.map +1 -0
  160. package/dist/toggle-button/toggle-button.css +154 -114
  161. package/dist/toggle-button/toggle-button.css.map +1 -0
  162. package/dist/toggle-button-group/toggle-button-group.css +610 -60
  163. package/dist/toggle-button-group/toggle-button-group.css.map +1 -0
  164. package/dist/tokens/evo-core.css +139 -67
  165. package/dist/tokens/evo-dark.css +57 -62
  166. package/dist/tokens/evo-light.css +76 -76
  167. package/dist/tooltip/tooltip.css +117 -84
  168. package/dist/tooltip/tooltip.css.map +1 -0
  169. package/dist/tourtip/tourtip.css +141 -107
  170. package/dist/tourtip/tourtip.css.map +1 -0
  171. package/dist/typography/typography.css +86 -59
  172. package/dist/typography/typography.css.map +1 -0
  173. package/dist/utility/utility.css +75 -72
  174. package/dist/utility/utility.css.map +1 -0
  175. package/dist/variables/_variables.scss +64 -0
  176. package/dist/video/video.css +46 -34
  177. package/dist/video/video.css.map +1 -0
  178. package/donut-chart.browser.json +1 -0
  179. package/donut-chart.css +1 -0
  180. package/donut-chart.js +1 -0
  181. package/donut-chart.mjs +1 -0
  182. package/gh.browser.json +4 -4
  183. package/index.browser.json +3 -0
  184. package/index.css +3 -0
  185. package/index.js +3 -0
  186. package/index.mjs +3 -0
  187. package/package.json +74 -55
  188. package/postcss.config.js +17 -0
  189. package/scripts/README.md +1 -1
  190. package/scripts/generate-bundle.js +13 -12
  191. package/scripts/generate-images.js +34 -23
  192. package/src/{less/alert-dialog/alert-dialog.less → sass/alert-dialog/alert-dialog.scss} +14 -12
  193. package/src/sass/avatar/avatar.scss +134 -0
  194. package/src/sass/badge/badge.scss +21 -0
  195. package/src/{less/breadcrumbs/breadcrumbs.less → sass/breadcrumbs/breadcrumbs.scss} +23 -12
  196. package/src/{less → sass}/breadcrumbs/stories/button-cascade.stories.js +12 -12
  197. package/src/{less → sass}/breadcrumbs/stories/button-overflow.stories.js +15 -15
  198. package/src/{less → sass}/breadcrumbs/stories/buttons.stories.js +5 -5
  199. package/src/{less → sass}/breadcrumbs/stories/link-cascade.stories.js +12 -12
  200. package/src/{less → sass}/breadcrumbs/stories/link-overflow.stories.js +15 -15
  201. package/src/{less → sass}/breadcrumbs/stories/links.stories.js +5 -5
  202. package/src/sass/bundles/skin-default.scss +9 -0
  203. package/src/sass/bundles/skin-full.scss +10 -0
  204. package/src/sass/bundles/skin-headless.scss +72 -0
  205. package/src/{less/button/button.less → sass/button/button.scss} +183 -69
  206. package/src/{less → sass}/button/stories/button/base.stories.js +5 -5
  207. package/src/{less → sass}/button/stories/button/borderless.stories.js +4 -4
  208. package/src/{less → sass}/button/stories/button/cascade.stories.js +3 -3
  209. package/src/{less → sass}/button/stories/button/dimensions.stories.js +2 -2
  210. package/src/{less → sass}/button/stories/button/primary.stories.js +4 -4
  211. package/src/{less → sass}/button/stories/button/secondary.stories.js +4 -4
  212. package/src/{less → sass}/button/stories/button/tertiary.stories.js +4 -4
  213. package/src/{less → sass}/button/stories/button/text-spacing.stories.js +1 -1
  214. package/src/{less → sass}/button/stories/destructive-button/primary.stories.js +3 -3
  215. package/src/{less → sass}/button/stories/destructive-button/secondary.stories.js +3 -3
  216. package/src/{less → sass}/button/stories/destructive-button/tertiary.stories.js +3 -3
  217. package/src/{less → sass}/button/stories/fake-button/base.stories.js +2 -2
  218. package/src/{less → sass}/button/stories/fake-button/cascade.stories.js +3 -3
  219. package/src/{less → sass}/button/stories/fake-button/dimensions.stories.js +1 -1
  220. package/src/{less → sass}/button/stories/fake-button/primary.stories.js +4 -4
  221. package/src/{less → sass}/button/stories/fake-button/secondary.stories.js +4 -4
  222. package/src/{less → sass}/button/stories/fake-button/text-spacing.stories.js +1 -1
  223. package/src/{less/calendar/calendar.less → sass/calendar/calendar.scss} +43 -18
  224. package/src/{less → sass}/calendar/stories/calendar.stories.js +6 -6
  225. package/src/{less/carousel/carousel.less → sass/carousel/carousel.scss} +66 -49
  226. package/src/{less → sass}/carousel/stories/carousel.stories.js +25 -25
  227. package/src/sass/chart-legend/chart-legend.scss +74 -0
  228. package/src/sass/chart-legend/stories/chart-legend.stories.js +65 -0
  229. package/src/{less/checkbox/checkbox.less → sass/checkbox/checkbox.scss} +25 -24
  230. package/src/{less/chip/chip.less → sass/chip/chip.scss} +1 -1
  231. package/src/{less → sass}/chip/stories/interactive-chip.stories.js +17 -17
  232. package/src/{less/chips-combobox/chips-combobox.less → sass/chips-combobox/chips-combobox.scss} +7 -7
  233. package/src/{less → sass}/chips-combobox/stories/chips-combobox.stories.js +38 -38
  234. package/src/{less → sass}/chips-combobox/stories/rtl-chips-combobox.stories.js +34 -34
  235. package/src/{less/combobox/combobox.less → sass/combobox/combobox.scss} +76 -35
  236. package/src/{less → sass}/combobox/stories/combobox.stories.js +11 -11
  237. package/src/{less/confirm-dialog/confirm-dialog.less → sass/confirm-dialog/confirm-dialog.scss} +14 -12
  238. package/src/sass/cta-button/cta-button.scss +105 -0
  239. package/src/{less → sass}/cta-button/stories/cascade.stories.js +3 -3
  240. package/src/{less → sass}/cta-button/stories/cta-button.stories.js +2 -2
  241. package/src/{less → sass}/cta-button/stories/dimensions.stories.js +2 -2
  242. package/src/{less/date-textbox/date-textbox.less → sass/date-textbox/date-textbox.scss} +10 -6
  243. package/src/{less → sass}/date-textbox/stories/date-textbox.stories.js +23 -7
  244. package/src/{less/details/details.less → sass/details/details.scss} +9 -5
  245. package/src/{less → sass}/details/stories/cascade.stories.js +3 -3
  246. package/src/{less → sass}/details/stories/details.stories.js +5 -5
  247. package/src/sass/donut-chart/donut-chart.scss +98 -0
  248. package/src/sass/donut-chart/stories/donut-chart.stories.js +39 -0
  249. package/src/{less/drawer-dialog/drawer-dialog.less → sass/drawer-dialog/drawer-dialog.scss} +24 -21
  250. package/src/{less → sass}/drawer-dialog/stories/drawer-dialog.stories.js +7 -7
  251. package/src/{less/education-notice/education-notice.less → sass/education-notice/education-notice.scss} +26 -8
  252. package/src/{less → sass}/education-notice/stories/base.stories.js +13 -13
  253. package/src/{less/eek/eek.less → sass/eek/eek.scss} +43 -42
  254. package/src/{less/field/field.less → sass/field/field.scss} +23 -13
  255. package/src/{less → sass}/field/stories/stacked.stories.js +8 -8
  256. package/src/{less → sass}/field/stories/unstacked.stories.js +4 -4
  257. package/src/sass/filter-button/filter-button.scss +112 -0
  258. package/src/{less/filter-menu/filter-menu.less → sass/filter-menu/filter-menu.scss} +22 -10
  259. package/src/{less → sass}/filter-menu/stories/filter-menu.stories.js +24 -24
  260. package/src/{less/filter-menu-button/filter-menu-button.less → sass/filter-menu-button/filter-menu-button.scss} +103 -36
  261. package/src/{less → sass}/filter-menu-button/stories/filter-menu-button.stories.js +124 -124
  262. package/src/{less/floating-label/floating-label.less → sass/floating-label/floating-label.scss} +31 -15
  263. package/src/{less → sass}/floating-label/stories/floating-label.stories.js +15 -15
  264. package/src/{less/fullscreen-dialog/fullscreen-dialog.less → sass/fullscreen-dialog/fullscreen-dialog.scss} +15 -11
  265. package/src/{less → sass}/fullscreen-dialog/stories/fullscreen-dialog.stories.js +4 -4
  266. package/src/sass/gh/_gh-mixins.scss +197 -0
  267. package/src/sass/global/global.scss +50 -0
  268. package/src/{less → sass}/global/stories/global.stories.js +12 -12
  269. package/src/sass/icon/icon.scss +83 -0
  270. package/src/{less → sass}/icon/stories/icon.stories.js +5 -5
  271. package/src/{less/icon-button/icon-button.less → sass/icon-button/icon-button.scss} +88 -35
  272. package/src/sass/icon-button/stories/alignment.stories.js +28 -0
  273. package/src/{less → sass}/icon-button/stories/buttons.stories.js +36 -36
  274. package/src/{less → sass}/icon-button/stories/links.stories.js +36 -36
  275. package/src/sass/image-placeholder/image-placeholder.scss +10 -0
  276. package/src/sass/infotip/infotip.scss +136 -0
  277. package/src/{less → sass}/infotip/stories/infotip.stories.js +12 -12
  278. package/src/{less/inline-notice/inline-notice.less → sass/inline-notice/inline-notice.scss} +3 -3
  279. package/src/{less → sass}/inline-notice/stories/inline.stories.js +11 -11
  280. package/src/{less/lightbox-dialog/lightbox-dialog.less → sass/lightbox-dialog/lightbox-dialog.scss} +61 -19
  281. package/src/{less → sass}/lightbox-dialog/stories/lightbox-dialog.stories.js +40 -33
  282. package/src/sass/link/link.scss +61 -0
  283. package/src/{less/listbox/listbox.less → sass/listbox/listbox.scss} +20 -14
  284. package/src/{less → sass}/listbox/stories/cascade.stories.js +9 -9
  285. package/src/{less → sass}/listbox/stories/listbox.stories.js +18 -18
  286. package/src/sass/listbox-button/listbox-button.scss +233 -0
  287. package/src/{less → sass}/listbox-button/stories/base.stories.js +48 -48
  288. package/src/{less → sass}/listbox-button/stories/cascade.stories.js +15 -15
  289. package/src/{less → sass}/listbox-button/stories/dimensions.stories.js +5 -5
  290. package/src/{less → sass}/listbox-button/stories/error/error.base.stories.js +38 -38
  291. package/src/{less → sass}/listbox-button/stories/error/error.cascade.stories.js +15 -15
  292. package/src/{less → sass}/listbox-button/stories/error/error.dimensions.stories.js +5 -5
  293. package/src/{less → sass}/listbox-button/stories/error/error.form.stories.js +10 -10
  294. package/src/{less → sass}/listbox-button/stories/form.stories.js +15 -15
  295. package/src/{less → sass}/listbox-button/stories/subtitle.stories.js +38 -38
  296. package/src/sass/marketsans/marketsans.scss +46 -0
  297. package/src/{less/menu/menu.less → sass/menu/menu.scss} +22 -12
  298. package/src/{less → sass}/menu/stories/fake-menu.stories.js +4 -4
  299. package/src/{less → sass}/menu/stories/multiSelect.stories.js +9 -9
  300. package/src/{less/menu-button/menu-button.less → sass/menu-button/menu-button.scss} +60 -30
  301. package/src/{less → sass}/menu-button/stories/base.stories.js +30 -30
  302. package/src/{less → sass}/menu-button/stories/cascade.stories.js +6 -6
  303. package/src/{less → sass}/menu-button/stories/dimensions.stories.js +1 -1
  304. package/src/{less → sass}/menu-button/stories/fake-menu-button.stories.js +6 -6
  305. package/src/sass/mixins/private/_bubble-mixins.scss +168 -0
  306. package/src/sass/mixins/private/_button-mixins.scss +95 -0
  307. package/src/{less/mixins/private/dialog-mixins.less → sass/mixins/private/_dialog-mixins.scss} +25 -22
  308. package/src/sass/mixins/private/_dropdown-mixins.scss +60 -0
  309. package/src/{less/mixins/private/filter-button-mixins.less → sass/mixins/private/_filter-button-mixins.scss} +6 -2
  310. package/src/sass/mixins/private/_filter-menu-mixins.scss +45 -0
  311. package/src/sass/mixins/private/_generated-icon-mixins.scss +517 -0
  312. package/src/sass/mixins/private/_icon-mixins.scss +12 -0
  313. package/src/sass/mixins/private/_listbox-mixins.scss +48 -0
  314. package/src/sass/mixins/private/_menu-mixins.scss +30 -0
  315. package/src/{less/mixins/private/selection-list-mixins.less → sass/mixins/private/_selection-list-mixins.scss} +3 -3
  316. package/src/sass/mixins/private/_token-mixins.scss +124 -0
  317. package/src/sass/mixins/public/_typography-mixins.scss +136 -0
  318. package/src/sass/mixins/public/_utility-mixins.scss +62 -0
  319. package/src/{less/page-grid/page-grid.less → sass/page-grid/page-grid.scss} +22 -22
  320. package/src/{less/page-notice/page-notice.less → sass/page-notice/page-notice.scss} +66 -26
  321. package/src/{less → sass}/page-notice/stories/page-notice.stories.js +14 -14
  322. package/src/{less → sass}/page-notice/stories/test.stories.js +7 -7
  323. package/src/{less/pagination/pagination.less → sass/pagination/pagination.scss} +28 -14
  324. package/src/{less → sass}/pagination/stories/button-cascade.stories.js +6 -6
  325. package/src/{less → sass}/pagination/stories/buttons.stories.js +4 -4
  326. package/src/{less → sass}/pagination/stories/link-cascade.stories.js +6 -6
  327. package/src/{less → sass}/pagination/stories/links.stories.js +4 -4
  328. package/src/{less → sass}/pagination/stories/overflow.stories.js +20 -20
  329. package/src/{less/panel-dialog/panel-dialog.less → sass/panel-dialog/panel-dialog.scss} +19 -16
  330. package/src/{less → sass}/panel-dialog/stories/panel-dialog.stories.js +7 -7
  331. package/src/{less/phone-input/phone-input.less → sass/phone-input/phone-input.scss} +47 -56
  332. package/src/{less → sass}/phone-input/stories/phone-input.stories.js +56 -56
  333. package/src/sass/progress-bar/progress-bar.scss +51 -0
  334. package/src/{less/progress-bar-expressive/progress-bar-expressive.less → sass/progress-bar-expressive/progress-bar-expressive.scss} +19 -20
  335. package/src/{less/progress-spinner/progress-spinner.less → sass/progress-spinner/progress-spinner.scss} +3 -3
  336. package/src/{less → sass}/progress-spinner/stories/progress-spinner.stories.js +4 -4
  337. package/src/{less/progress-stepper/progress-stepper.less → sass/progress-stepper/progress-stepper.scss} +55 -30
  338. package/src/{less/radio/radio.less → sass/radio/radio.scss} +25 -24
  339. package/src/{less/section-notice/section-notice.less → sass/section-notice/section-notice.scss} +42 -18
  340. package/src/{less → sass}/section-notice/stories/icon-16.stories.js +14 -14
  341. package/src/{less → sass}/section-notice/stories/iconless.stories.js +4 -4
  342. package/src/{less → sass}/section-notice/stories/test.stories.js +4 -4
  343. package/src/{less/section-title/section-title.less → sass/section-title/section-title.scss} +15 -11
  344. package/src/{less → sass}/section-title/stories/rtl.stories.js +3 -3
  345. package/src/{less → sass}/section-title/stories/section-title.stories.js +4 -4
  346. package/src/{less/segmented-buttons/segmented-buttons.less → sass/segmented-buttons/segmented-buttons.scss} +8 -8
  347. package/src/{less → sass}/segmented-buttons/stories/segmented-buttons.stories.js +2 -2
  348. package/src/{less/select/select.less → sass/select/select.scss} +52 -17
  349. package/src/{less → sass}/select/stories/cascade.stories.js +3 -3
  350. package/src/{less → sass}/select/stories/default.stories.js +9 -9
  351. package/src/{less → sass}/select/stories/floating-label.stories.js +4 -4
  352. package/src/{less/signal/signal.less → sass/signal/signal.scss} +9 -6
  353. package/src/{less/skeleton/skeleton.less → sass/skeleton/skeleton.scss} +23 -20
  354. package/src/{less/snackbar-dialog/snackbar-dialog.less → sass/snackbar-dialog/snackbar-dialog.scss} +30 -11
  355. package/src/{less/split-button/split-button.less → sass/split-button/split-button.scss} +1 -1
  356. package/src/{less → sass}/split-button/stories/base.stories.js +13 -13
  357. package/src/{less → sass}/split-button/stories/rtl.stories.js +6 -6
  358. package/src/{less → sass}/split-button/stories/size.stories.js +2 -2
  359. package/src/{less/star-rating/star-rating.less → sass/star-rating/star-rating.scss} +14 -14
  360. package/src/{less/star-rating-select/star-rating-select.less → sass/star-rating-select/star-rating-select.scss} +16 -15
  361. package/src/{less/switch/switch.less → sass/switch/switch.scss} +48 -20
  362. package/src/{less/tabs/tabs.less → sass/tabs/tabs.scss} +17 -7
  363. package/src/{less → sass}/textbox/stories/icon.stories.js +32 -18
  364. package/src/{less → sass}/textbox/stories/rtl/icon.stories.js +27 -11
  365. package/src/sass/textbox/stories/rtl/textbox.stories.js +45 -0
  366. package/src/{less → sass}/textbox/stories/textbox.stories.js +24 -2
  367. package/src/sass/textbox/textbox.scss +238 -0
  368. package/src/{less/toast-dialog/toast-dialog.less → sass/toast-dialog/toast-dialog.scss} +67 -23
  369. package/src/{less → sass}/toggle-button/stories/gallery-layout.stories.js +3 -3
  370. package/src/{less → sass}/toggle-button/stories/list-layout.stories.js +3 -3
  371. package/src/{less/toggle-button/toggle-button.less → sass/toggle-button/toggle-button.scss} +6 -1
  372. package/src/sass/toggle-button-group/stories/gallery-layout-exceptions.stories.js +471 -0
  373. package/src/sass/toggle-button-group/stories/gallery-layout.stories.js +564 -0
  374. package/src/sass/toggle-button-group/stories/list-layout-exceptions.stories.js +507 -0
  375. package/src/sass/toggle-button-group/stories/list-layout.stories.js +505 -0
  376. package/src/sass/toggle-button-group/stories/minimal-layout-exceptions.stories.js +291 -0
  377. package/src/sass/toggle-button-group/stories/minimal-layout.stories.js +289 -0
  378. package/src/sass/toggle-button-group/toggle-button-group.scss +342 -0
  379. package/src/{less → sass}/tooltip/stories/pointer.stories.js +12 -12
  380. package/src/{less → sass}/tooltip/stories/tooltip.stories.js +3 -3
  381. package/src/sass/tooltip/tooltip.scss +118 -0
  382. package/src/{less → sass}/tourtip/stories/tourtip.stories.js +5 -5
  383. package/src/{less/tourtip/tourtip.less → sass/tourtip/tourtip.scss} +41 -33
  384. package/src/{less/typography/typography.less → sass/typography/typography.scss} +24 -21
  385. package/src/{less/utility/utility.less → sass/utility/utility.scss} +13 -13
  386. package/src/sass/variables/_variables.scss +64 -0
  387. package/src/{less/video/video.less → sass/video/video.scss} +3 -3
  388. package/src/svg/icons.svg +21 -21
  389. package/src/tokens/evo-core.css +139 -67
  390. package/src/tokens/evo-dark.css +57 -62
  391. package/src/tokens/evo-light.css +76 -76
  392. package/svg.svg +21 -21
  393. package/_cdn/skin/v17.5.0/skin-default.min.css +0 -76
  394. package/_cdn/skin/v17.5.0/skin-full.min.css +0 -160
  395. package/_cdn/skin/v17.5.0/skin-headless.min.css +0 -6
  396. package/dist/variables/variables.less +0 -70
  397. package/less[ds-4].less +0 -3
  398. package/src/less/avatar/avatar.less +0 -134
  399. package/src/less/badge/badge.less +0 -16
  400. package/src/less/bundles/skin-default.less +0 -3
  401. package/src/less/bundles/skin-full.less +0 -4
  402. package/src/less/bundles/skin-headless.less +0 -70
  403. package/src/less/cta-button/cta-button.less +0 -79
  404. package/src/less/filter-button/filter-button.less +0 -80
  405. package/src/less/global/global.less +0 -37
  406. package/src/less/icon/generated/icon.less +0 -2905
  407. package/src/less/icon/icon.less +0 -62
  408. package/src/less/icon-button/stories/alignment.stories.js +0 -28
  409. package/src/less/image-placeholder/image-placeholder.less +0 -9
  410. package/src/less/infotip/infotip.less +0 -126
  411. package/src/less/link/link.less +0 -44
  412. package/src/less/listbox-button/listbox-button.less +0 -184
  413. package/src/less/marketsans/marketsans.less +0 -45
  414. package/src/less/mixins/private/bubble-mixins.less +0 -166
  415. package/src/less/mixins/private/button-mixins.less +0 -95
  416. package/src/less/mixins/private/dropdown-mixins.less +0 -44
  417. package/src/less/mixins/private/filter-menu-mixins.less +0 -31
  418. package/src/less/mixins/private/generated-icon-mixins.less +0 -517
  419. package/src/less/mixins/private/icon-mixins.less +0 -17
  420. package/src/less/mixins/private/listbox-mixins.less +0 -35
  421. package/src/less/mixins/private/menu-mixins.less +0 -21
  422. package/src/less/mixins/private/token-mixins.less +0 -100
  423. package/src/less/progress-bar/progress-bar.less +0 -35
  424. package/src/less/textbox/stories/rtl/textbox.stories.js +0 -17
  425. package/src/less/textbox/textbox.less +0 -181
  426. package/src/less/toggle-button-group/stories/gallery-layout.stories.js +0 -657
  427. package/src/less/toggle-button-group/stories/list-layout.stories.js +0 -611
  428. package/src/less/toggle-button-group/stories/minimal-layout.stories.js +0 -341
  429. package/src/less/toggle-button-group/toggle-button-group.less +0 -111
  430. package/src/less/tooltip/tooltip.less +0 -109
  431. package/src/less/variables/variables.less +0 -70
  432. /package/src/{less → sass}/alert-dialog/stories/alert-dialog.stories.js +0 -0
  433. /package/src/{less → sass}/avatar/stories/avatar.stories.js +0 -0
  434. /package/src/{less → sass}/badge/stories/badge.stories.js +0 -0
  435. /package/src/{less → sass}/button/stories/destructive-button/borderless.stories.js +0 -0
  436. /package/src/{less → sass}/checkbox/stories/checked.stories.js +0 -0
  437. /package/src/{less → sass}/checkbox/stories/mixed.stories.js +0 -0
  438. /package/src/{less → sass}/checkbox/stories/unchecked.stories.js +0 -0
  439. /package/src/{less → sass}/chip/stories/static-chip.stories.js +0 -0
  440. /package/src/{less → sass}/confirm-dialog/stories/confirm-dialog.stories.js +0 -0
  441. /package/src/{less → sass}/field/stories/helper-texts-stacked.stories.js +0 -0
  442. /package/src/{less → sass}/filter-button/stories/button.stories.js +0 -0
  443. /package/src/{less → sass}/filter-button/stories/group.stories.js +0 -0
  444. /package/src/{less → sass}/filter-button/stories/link.stories.js +0 -0
  445. /package/src/{less/flag/flag.less → sass/flag/flag.scss} +0 -0
  446. /package/src/{less → sass}/flag/stories/flag.stories.js +0 -0
  447. /package/src/{less → sass}/gh/gh-mixins.less +0 -0
  448. /package/src/{less → sass}/image-placeholder/stories/image-placeholder.stories.js +0 -0
  449. /package/src/{less → sass}/link/stories/link.stories.js +0 -0
  450. /package/src/{less → sass}/menu/stories/misc.stories.js +0 -0
  451. /package/src/{less → sass}/mixins/public/typography-mixins.less +0 -0
  452. /package/src/{less → sass}/mixins/public/utility-mixins.less +0 -0
  453. /package/src/{less → sass}/progress-bar/stories/progress-bar.stories.js +0 -0
  454. /package/src/{less → sass}/progress-bar-expressive/stories/progress-bar-expressive.stories.js +0 -0
  455. /package/src/{less → sass}/progress-stepper/stories/progress-stepper.stories.js +0 -0
  456. /package/src/{less → sass}/radio/stories/checked.stories.js +0 -0
  457. /package/src/{less → sass}/radio/stories/unchecked.stories.js +0 -0
  458. /package/src/{less → sass}/signal/stories/signal.stories.js +0 -0
  459. /package/src/{less → sass}/skeleton/stories/base.stories.js +0 -0
  460. /package/src/{less → sass}/skeleton/stories/composite.stories.js +0 -0
  461. /package/src/{less → sass}/skeleton/stories/rtl.stories.js +0 -0
  462. /package/src/{less → sass}/snackbar-dialog/stories/base.stories.js +0 -0
  463. /package/src/{less → sass}/snackbar-dialog/stories/font-size.stories.js +0 -0
  464. /package/src/{less → sass}/snackbar-dialog/stories/rtl.stories.js +0 -0
  465. /package/src/{less → sass}/star-rating/stories/star-rating.stories.js +0 -0
  466. /package/src/{less → sass}/star-rating-select/stories/star-rating-select.stories.js +0 -0
  467. /package/src/{less → sass}/switch/stories/form.stories.js +0 -0
  468. /package/src/{less → sass}/switch/stories/script.stories.js +0 -0
  469. /package/src/{less → sass}/tabs/stories/fake-tabs/block.stories.js +0 -0
  470. /package/src/{less → sass}/tabs/stories/fake-tabs/inlineBlock.stories.js +0 -0
  471. /package/src/{less → sass}/tabs/stories/tabs/block.stories.js +0 -0
  472. /package/src/{less → sass}/tabs/stories/tabs/inlineBlock.stories.js +0 -0
  473. /package/src/{less → sass}/toast-dialog/stories/toast-dialog.stories.js +0 -0
  474. /package/src/{less → sass}/toggle-button/stories/gallery-layout-responsive.stories.js +0 -0
  475. /package/src/{less → sass}/toggle-button/stories/minimal-layout.stories.js +0 -0
@@ -1,63 +1,74 @@
1
1
  :root {
2
- --page-grid-number-cols: 8;
3
- --page-grid-outside-margins: 16px;
4
- --page-grid-column-gaps: var(--spacing-100);
5
- --page-grid-row-gaps: var(--spacing-200);
6
- --page-grid-column-widths: calc((100% / 8) - var(--spacing-100) + 1px);
7
- --page-grid-max-width: 1584px;
8
- --page-grid-total-max-width: calc(var(--page-grid-max-width) + (var(--page-grid-outside-margins) * 2));
2
+ --page-grid-number-cols: 8;
3
+ --page-grid-outside-margins: 16px;
4
+ --page-grid-column-gaps: var(--spacing-100);
5
+ --page-grid-row-gaps: var(--spacing-200);
6
+ --page-grid-column-widths: calc(12.5% - var(--spacing-100) + 1px);
7
+ --page-grid-max-width: 1584px;
8
+ --page-grid-total-max-width: calc(
9
+ var(--page-grid-max-width) + var(--page-grid-outside-margins) * 2
10
+ );
9
11
  }
10
12
  @media screen and (min-width: 512px) {
11
- :root {
12
- --page-grid-number-cols: 16;
13
- --page-grid-column-gaps: var(--spacing-200);
14
- --page-grid-column-widths: calc((100% / 16) - var(--spacing-200) + 1px);
15
- --page-grid-outside-margins: 32px;
16
- }
13
+ :root {
14
+ --page-grid-number-cols: 16;
15
+ --page-grid-column-gaps: var(--spacing-200);
16
+ --page-grid-column-widths: calc(6.25% - var(--spacing-200) + 1px);
17
+ --page-grid-outside-margins: 32px;
18
+ }
17
19
  }
18
20
  @media screen and (min-width: 1280px) {
19
- :root {
20
- --page-grid-outside-margins: 48px;
21
- }
21
+ :root {
22
+ --page-grid-outside-margins: 48px;
23
+ }
22
24
  }
23
- /* Mobile-first implies defaults, there is no "first" breakpoint,
24
- and we don't need a minimum viewport width to support. */
25
25
  .page-grid-container {
26
- box-sizing: border-box;
27
- display: block;
28
- margin-left: auto;
29
- margin-right: auto;
30
- max-width: var(--page-grid-max-width);
31
- padding-left: var(--page-grid-outside-margins);
32
- padding-right: var(--page-grid-outside-margins);
33
- position: relative;
34
- width: 100%;
26
+ box-sizing: border-box;
27
+ display: block;
28
+ margin-left: auto;
29
+ margin-right: auto;
30
+ max-width: var(--page-grid-max-width);
31
+ padding-left: var(--page-grid-outside-margins);
32
+ padding-right: var(--page-grid-outside-margins);
33
+ position: relative;
34
+ width: 100%;
35
35
  }
36
+
36
37
  .page-grid {
37
- column-gap: var(--page-grid-column-gaps);
38
- display: grid;
39
- grid-template-columns: repeat(var(--page-grid-number-cols), var(--page-grid-column-widths));
40
- row-gap: var(--page-grid-row-gaps);
38
+ column-gap: var(--page-grid-column-gaps);
39
+ grid-template-columns: repeat(
40
+ var(--page-grid-number-cols),
41
+ var(--page-grid-column-widths)
42
+ );
43
+ row-gap: var(--page-grid-row-gaps);
41
44
  }
42
- .subgrid,
43
- .page-grid__subgrid {
44
- display: grid;
45
+ .page-grid,
46
+ .page-grid__subgrid,
47
+ .subgrid {
48
+ display: grid;
45
49
  }
46
50
  @supports (grid-template-columns: subgrid) {
47
- .subgrid,
48
- .page-grid__subgrid {
49
- grid-template-columns: subgrid;
50
- }
51
+ .page-grid__subgrid,
52
+ .subgrid {
53
+ grid-template-columns: subgrid;
54
+ }
51
55
  }
52
56
  .page-grid-container .nested-grid-container {
53
- max-width: 100%;
54
- padding: 0;
55
- width: 100%;
57
+ max-width: 100%;
58
+ padding: 0;
59
+ width: 100%;
56
60
  }
57
- /* prettier-ignore */
58
61
  .page-grid--debug {
59
- --debug-grid-col-color: pink;
60
- --debug-grid-gutter-color: transparent;
61
- /* stylelint-disable-next-line */
62
- background: repeating-linear-gradient(90deg, var(--debug-grid-col-color) 0, var(--debug-grid-col-color) var(--page-grid-column-widths), var(--debug-grid-gutter-color) var(--page-grid-column-widths), var(--debug-grid-gutter-color) calc(var(--page-grid-column-widths) + var(--page-grid-column-gaps)));
62
+ --debug-grid-col-color: pink;
63
+ --debug-grid-gutter-color: transparent;
64
+ background: repeating-linear-gradient(
65
+ 90deg,
66
+ var(--debug-grid-col-color) 0,
67
+ var(--debug-grid-col-color) var(--page-grid-column-widths),
68
+ var(--debug-grid-gutter-color) var(--page-grid-column-widths),
69
+ var(--debug-grid-gutter-color)
70
+ calc(var(--page-grid-column-widths) + var(--page-grid-column-gaps))
71
+ );
63
72
  }
73
+
74
+ /*# sourceMappingURL=page-grid.css.map */
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/sass/page-grid/page-grid.scss","page-grid.css"],"names":[],"mappings":"AAEA;EACI,yBAAA;EACA,gCAAA;EACA,0CAAA;EACA,uCAAA;EACA,gEAAA;EAIA,4BAAA;EAEA,iGAAA;ACQJ;ADJI;EAfJ;IAgBQ,0BAAA;IACA,0CAAA;IACA,gEAAA;IAIA,gCAAA;ECON;AACF;ADLI;EAzBJ;IA0BQ,gCAAA;ECQN;AACF;ADHA;EACI,qBAAA;EACA,aAAA;EACA,gBAAA;EACA,iBAAA;EACA,oCAAA;EACA,6CAAA;EACA,8CAAA;EACA,iBAAA;EACA,UAAA;ACQJ;;ADLA;EACI,uCAAA;EAEA,0FAAA;EAIA,iCAAA;ACKJ;ADCA;EAXI,YAAA;ACkBJ;ADDA;EAEI;IAEI,6BAAA;ECKN;AACF;ADDA;EACI,cAAA;EACA,SAAA;EACA,UAAA;ACIJ;ADAA;EACI,2BAAA;EACA,qCAAA;EAGA,ySAAA;ACGJ","file":"page-grid.css"}
@@ -1,140 +1,197 @@
1
1
  .page-notice {
2
- background-color: var(--page-notice-general-background-color, var(--color-background-inverse));
3
- border-color: var(--page-notice-general-border-color, var(--color-background-inverse));
4
- border-style: solid;
5
- border-width: 1px;
6
- color: var(--page-notice-color, var(--color-foreground-on-inverse));
7
- font-size: var(--font-size-default);
8
- margin: var(--spacing-100) 0;
9
- padding: var(--spacing-200);
10
- }
2
+ background-color: var(
3
+ --page-notice-general-background-color,
4
+ var(--color-background-inverse)
5
+ );
6
+ border-color: var(
7
+ --page-notice-general-border-color,
8
+ var(--color-background-inverse)
9
+ );
10
+ border-style: solid;
11
+ border-width: 1px;
12
+ color: var(--page-notice-color, var(--color-foreground-on-inverse));
13
+ font-size: var(--font-size-default);
14
+ margin: var(--spacing-100) 0;
15
+ padding: var(--spacing-200);
16
+ }
17
+
11
18
  div[role="region"].page-notice,
12
19
  section.page-notice {
13
- display: grid;
14
- grid-template-columns: 32px auto auto auto;
20
+ display: grid;
21
+ grid-template-columns: 32px auto auto auto;
15
22
  }
23
+
16
24
  span[role="region"].page-notice {
17
- display: grid;
25
+ display: grid;
18
26
  }
27
+
19
28
  .page-notice__title {
20
- font-size: var(--font-size-default);
21
- font-weight: normal;
22
- margin: 1px 0 0;
29
+ font-size: var(--font-size-default);
30
+ font-weight: 400;
31
+ margin: 1px 0 0;
23
32
  }
24
- /* legacy version with separate bold heading */
33
+
34
+ .page-notice a,
25
35
  .page-notice__title:not(:only-child) {
26
- font-weight: bold;
36
+ font-weight: 700;
27
37
  }
38
+
28
39
  .page-notice a {
29
- color: var(--page-notice-color, var(--color-foreground-on-inverse));
30
- font-size: var(--font-size-default);
31
- font-weight: bold;
40
+ color: var(--page-notice-color, var(--color-foreground-on-inverse));
41
+ font-size: var(--font-size-default);
32
42
  }
33
43
  .page-notice__cta a {
34
- white-space: nowrap;
44
+ white-space: nowrap;
35
45
  }
46
+
36
47
  .page-notice__dismiss {
37
- cursor: pointer;
48
+ cursor: pointer;
38
49
  }
39
- .page-notice a:hover {
40
- color: var(--page-notice-color, var(--color-foreground-on-inverse));
50
+
51
+ .page-notice a:hover,
52
+ .page-notice button.fake-link {
53
+ color: var(--page-notice-color, var(--color-foreground-on-inverse));
41
54
  }
55
+
42
56
  .page-notice button.fake-link {
43
- color: var(--page-notice-color, var(--color-foreground-on-inverse));
44
- font-size: var(--font-size-default);
45
- font-weight: bold;
57
+ font-size: var(--font-size-default);
58
+ font-weight: 700;
46
59
  }
60
+
47
61
  .page-notice button.fake-link:hover {
48
- color: var(--page-notice-color, var(--color-foreground-on-inverse));
62
+ color: var(--page-notice-color, var(--color-foreground-on-inverse));
49
63
  }
50
64
  .page-notice a:focus-visible,
51
65
  .page-notice button.fake-link:focus-visible {
52
- outline: 2px solid var(--color-foreground-on-inverse);
53
- outline-offset: 2px;
66
+ outline: 2px solid var(--color-foreground-on-inverse);
67
+ outline-offset: 2px;
54
68
  }
69
+
55
70
  .page-notice--attention {
56
- background-color: var(--page-notice-attention-background-color, var(--color-background-attention));
57
- border-color: var(--page-notice-attention-border-color, var(--color-stroke-attention));
71
+ background-color: var(
72
+ --page-notice-attention-background-color,
73
+ var(--color-background-attention)
74
+ );
75
+ border-color: var(
76
+ --page-notice-attention-border-color,
77
+ var(--color-stroke-attention)
78
+ );
58
79
  }
59
80
  .page-notice--attention .page-notice__header svg {
60
- color: var(--page-notice-attention-icon-color, var(--color-foreground-on-attention));
81
+ color: var(
82
+ --page-notice-attention-icon-color,
83
+ var(--color-foreground-on-attention)
84
+ );
61
85
  }
86
+
62
87
  .page-notice--confirmation {
63
- background-color: var(--page-notice-confirmation-background-color, var(--color-background-confirmation));
64
- border-color: var(--page-notice-confirmation-border-color, var(--color-stroke-confirmation));
88
+ background-color: var(
89
+ --page-notice-confirmation-background-color,
90
+ var(--color-background-confirmation)
91
+ );
92
+ border-color: var(
93
+ --page-notice-confirmation-border-color,
94
+ var(--color-stroke-confirmation)
95
+ );
65
96
  }
66
97
  .page-notice--confirmation .page-notice__header svg {
67
- color: var(--page-notice-confirmation-icon-color, var(--color-foreground-on-confirmation));
98
+ color: var(
99
+ --page-notice-confirmation-icon-color,
100
+ var(--color-foreground-on-confirmation)
101
+ );
68
102
  }
103
+
69
104
  .page-notice--information {
70
- background-color: var(--page-notice-information-background-color, var(--color-background-information));
71
- border-color: var(--page-notice-information-border-color, var(--color-stroke-information));
105
+ background-color: var(
106
+ --page-notice-information-background-color,
107
+ var(--color-background-information)
108
+ );
109
+ border-color: var(
110
+ --page-notice-information-border-color,
111
+ var(--color-stroke-information)
112
+ );
72
113
  }
73
114
  .page-notice--information .page-notice__header svg {
74
- color: var(--page-notice-information-icon-color, var(--color-foreground-on-information));
115
+ color: var(
116
+ --page-notice-information-icon-color,
117
+ var(--color-foreground-on-information)
118
+ );
75
119
  }
120
+
76
121
  .page-notice--general {
77
- background-color: var(--page-notice-general-background-color, var(--color-background-inverse));
122
+ background-color: var(
123
+ --page-notice-general-background-color,
124
+ var(--color-background-inverse)
125
+ );
78
126
  }
127
+
79
128
  .page-notice__header {
80
- grid-column: 1;
81
- grid-row: 1;
82
- -webkit-margin-end: var(--spacing-200);
83
- margin-inline-end: var(--spacing-200);
129
+ grid-column: 1;
130
+ }
131
+
132
+ .page-notice__header,
133
+ .page-notice__main {
134
+ grid-row: 1;
135
+ -webkit-margin-end: var(--spacing-200);
136
+ margin-inline-end: var(--spacing-200);
84
137
  }
138
+
85
139
  .page-notice__main {
86
- grid-column: 1 / 3;
87
- grid-row: 1;
88
- -webkit-margin-end: var(--spacing-200);
89
- margin-inline-end: var(--spacing-200);
140
+ grid-column: 1 / 3;
90
141
  }
142
+
91
143
  .page-notice__header + .page-notice__main {
92
- grid-column: 2;
144
+ grid-column: 2;
93
145
  }
146
+
94
147
  .page-notice__footer {
95
- grid-column: 4;
96
- grid-row: 1;
97
- text-align: right;
148
+ grid-column: 4;
149
+ grid-row: 1;
150
+ text-align: right;
98
151
  }
152
+
99
153
  .page-notice__main p {
100
- font-size: var(--font-size-default);
101
- margin: 2px 0 0;
154
+ font-size: var(--font-size-default);
155
+ margin: 2px 0 0;
102
156
  }
103
- /* support legacy 6.5 notice with heading + paragaphs */
104
157
  .page-notice__main .page-notice__title ~ p {
105
- margin: var(--spacing-50) 0 0;
158
+ margin: var(--spacing-50) 0 0;
106
159
  }
160
+
107
161
  p.page-notice__cta {
108
- grid-column: 2;
109
- grid-row: 2;
110
- justify-self: flex-start;
111
- margin-bottom: 0;
112
- margin-right: var(--spacing-200);
113
- margin-top: var(--spacing-200);
114
- }
162
+ grid-column: 2;
163
+ grid-row: 2;
164
+ justify-self: flex-start;
165
+ margin-bottom: 0;
166
+ margin-right: var(--spacing-200);
167
+ margin-top: var(--spacing-200);
168
+ }
169
+
115
170
  @media (min-width: 512px) {
116
- section.page-notice,
117
- div[role="region"].page-notice {
118
- margin: var(--spacing-200) 0;
119
- }
120
- .page-notice__title {
121
- margin-bottom: 2px;
122
- }
123
- p.page-notice__cta {
124
- grid-column: 4;
125
- grid-row: 1;
126
- justify-self: flex-end;
127
- margin-top: 1px;
128
- padding-right: var(--spacing-200);
129
- }
130
- .page-notice__footer {
131
- justify-self: flex-end;
132
- margin-top: 0;
133
- }
171
+ div[role="region"].page-notice,
172
+ section.page-notice {
173
+ margin: var(--spacing-200) 0;
174
+ }
175
+ .page-notice__title {
176
+ margin-bottom: 2px;
177
+ }
178
+ p.page-notice__cta {
179
+ grid-column: 4;
180
+ grid-row: 1;
181
+ justify-self: flex-end;
182
+ margin-top: 1px;
183
+ padding-right: var(--spacing-200);
184
+ }
185
+ .page-notice__footer {
186
+ justify-self: flex-end;
187
+ margin-top: 0;
188
+ }
134
189
  }
135
190
  [dir="rtl"] .page-notice__footer {
136
- margin-left: initial;
137
- margin-right: auto;
138
- padding-left: initial;
139
- padding-right: 16px;
191
+ margin-left: 0;
192
+ margin-right: auto;
193
+ padding-left: 0;
194
+ padding-right: 16px;
140
195
  }
196
+
197
+ /*# sourceMappingURL=page-notice.css.map */
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/sass/page-notice/page-notice.scss","../../src/sass/mixins/private/_token-mixins.scss","page-notice.css"],"names":[],"mappings":"AAGA;ECDQ,6FAAA;EAAA,qFAAA;EDWJ,kBAAA;EACA,gBAAA;ECZI,kEAAA;EDeJ,kCAAA;EACA,2BAAA;EACA,0BAAA;AEHJ;;AFMA;EAEI,YAAA;EAEA,yCAAA;AEHJ;;AFMA;EACI,YAAA;AEHJ;;AFMA;EACI,kCAAA;EACA,eAAA;EACA,cAAA;AEHJ;;AFWA;EAHI,eAAA;AEGJ;;AFAA;EC1CQ,kEAAA;ED6CJ,kCAAA;AEHJ;AFQA;EACI,kBAAA;AEJJ;;AFOA;EACI,cAAA;AEJJ;;AFWA;EC9DQ,kEAAA;AC6DR;;AFCA;EAGI,kCAAA;EACA,eAAA;AELJ;;AFQA;ECrEQ,kEAAA;ACiER;AFYA;EAEI,oDAAA;EACA,kBAAA;AELJ;;AFQA;ECnFQ,iGAAA;EAAA,qFAAA;ACgFR;AFaI;EC7FI,mFAAA;ACmFR;;AFkBA;ECrGQ,uGAAA;EAAA,2FAAA;ACwFR;AFuBI;EC/GI,yFAAA;AC2FR;;AF4BA;ECvHQ,qGAAA;EAAA,yFAAA;ACgGR;AFiCI;ECjII,uFAAA;ACmGR;;AFsCA;ECzIQ,6FAAA;ACuGR;;AFyCA;EACI,aAAA;AEpCJ;;AFyCA;EAJI,UAAA;EACA,qCAAA;UAAA,oCAAA;AEhCJ;;AFmCA;EACI,kBAAA;AEpCJ;;AFyCA;EACI,aAAA;AEtCJ;;AFyCA;EACI,aAAA;EACA,UAAA;EACA,gBAAA;AEtCJ;;AFyCA;EACI,kCAAA;EACA,cAAA;AEtCJ;AF0CA;EACI,4BAAA;AEtCJ;;AFyCA;EACI,aAAA;EACA,UAAA;EACA,uBAAA;EACA,eAAA;EACA,+BAAA;EACA,6BAAA;AEtCJ;;AFyCA;EACI;IAEI,2BAAA;EEtCN;EFyCE;IACI,iBAAA;EEvCN;EF0CE;IACI,aAAA;IACA,UAAA;IACA,qBAAA;IACA,cAAA;IACA,gCAAA;EExCN;EF2CE;IACI,qBAAA;IACA,YAAA;EEzCN;AACF;AF6CI;EACI,aAAA;EACA,iBAAA;EACA,cAAA;EACA,kBAAA;AE3CR","file":"page-notice.css"}
@@ -1,136 +1,165 @@
1
1
  nav.pagination {
2
- align-items: center;
3
- display: inline-flex;
4
- justify-content: center;
5
- color: var(--pagination-item-foreground-color, var(--color-foreground-secondary));
6
- font-family: inherit;
7
- font-size: 1rem;
8
- margin: var(--spacing-100) 0;
9
- max-width: 100%;
10
- }
2
+ align-items: center;
3
+ color: var(
4
+ --pagination-item-foreground-color,
5
+ var(--color-foreground-secondary)
6
+ );
7
+ display: inline-flex;
8
+ font-family: inherit;
9
+ font-size: 1rem;
10
+ justify-content: center;
11
+ margin: var(--spacing-100) 0;
12
+ max-width: 100%;
13
+ }
14
+
11
15
  nav.pagination a,
12
16
  nav.pagination button {
13
- color: inherit;
14
- font-size: 1em;
17
+ color: inherit;
18
+ font-size: 1em;
15
19
  }
20
+
16
21
  ol.pagination__items {
17
- align-items: center;
18
- display: inline-flex;
19
- justify-content: center;
20
- box-sizing: border-box;
21
- height: 44px;
22
- list-style-type: none;
23
- margin: 0;
24
- padding: 0;
22
+ align-items: center;
23
+ box-sizing: border-box;
24
+ display: inline-flex;
25
+ height: 44px;
26
+ justify-content: center;
27
+ list-style-type: none;
28
+ margin: 0;
29
+ padding: 0;
25
30
  }
26
31
  ol.pagination__items li:not([hidden]) {
27
- align-items: center;
28
- display: flex;
29
- justify-content: center;
32
+ align-items: center;
33
+ display: flex;
34
+ justify-content: center;
30
35
  }
36
+
31
37
  a.pagination__next,
32
38
  a.pagination__previous,
33
39
  button.pagination__next,
34
40
  button.pagination__previous {
35
- align-items: center;
36
- display: inline-flex;
37
- justify-content: center;
41
+ align-items: center;
42
+ display: inline-flex;
43
+ justify-content: center;
38
44
  }
45
+
39
46
  a.pagination__next,
40
47
  button.pagination__next {
41
- -webkit-margin-start: var(--spacing-100);
42
- margin-inline-start: var(--spacing-100);
48
+ -webkit-margin-start: var(--spacing-100);
49
+ margin-inline-start: var(--spacing-100);
43
50
  }
51
+
44
52
  a.pagination__previous,
45
53
  button.pagination__previous {
46
- -webkit-margin-end: var(--spacing-100);
47
- margin-inline-end: var(--spacing-100);
54
+ -webkit-margin-end: var(--spacing-100);
55
+ margin-inline-end: var(--spacing-100);
48
56
  }
57
+
49
58
  .pagination__item {
50
- align-items: center;
51
- display: inline-flex;
52
- justify-content: center;
53
- box-sizing: border-box;
54
- font-weight: var(--font-weight-regular);
55
- height: 44px;
56
- width: 44px;
57
- }
59
+ align-items: center;
60
+ box-sizing: border-box;
61
+ display: inline-flex;
62
+ font-weight: var(--font-weight-regular);
63
+ height: 44px;
64
+ justify-content: center;
65
+ width: 44px;
66
+ }
67
+
58
68
  button.pagination__item {
59
- background: none;
60
- border: none;
61
- font-family: inherit;
69
+ background: none;
70
+ border: none;
71
+ font-family: inherit;
62
72
  }
73
+
63
74
  a.pagination__item {
64
- text-decoration: none;
75
+ text-decoration: none;
65
76
  }
77
+
66
78
  a.pagination__item,
67
79
  button.pagination__item {
68
- position: relative;
69
- }
70
- a.pagination__item::after,
71
- button.pagination__item::after {
72
- background-color: transparent;
73
- border-radius: 4px;
74
- bottom: 0;
75
- content: "";
76
- display: block;
77
- height: 2px;
78
- left: calc(50% - 10px);
79
- position: absolute;
80
- width: 20px;
80
+ position: relative;
81
+ }
82
+ a.pagination__item:after,
83
+ button.pagination__item:after {
84
+ background-color: initial;
85
+ border-radius: 4px;
86
+ bottom: 0;
87
+ content: "";
88
+ display: block;
89
+ height: 2px;
90
+ left: calc(50% - 10px);
91
+ position: absolute;
92
+ width: 20px;
81
93
  }
82
94
  a.pagination__item[aria-current="page"],
83
95
  button.pagination__item[aria-current="page"] {
84
- color: var(--pagination-item-current-foreground-color, var(--color-foreground-primary));
85
- font-weight: var(--font-weight-bold);
96
+ color: var(
97
+ --pagination-item-current-foreground-color,
98
+ var(--color-foreground-primary)
99
+ );
100
+ font-weight: var(--font-weight-bold);
86
101
  }
87
- a.pagination__item[aria-current="page"]::after,
88
- button.pagination__item[aria-current="page"]::after {
89
- background-color: currentColor;
102
+ a.pagination__item[aria-current="page"]:after,
103
+ button.pagination__item[aria-current="page"]:after {
104
+ background-color: currentColor;
90
105
  }
91
106
  a.pagination__item:not([aria-current="page"]):active,
92
107
  button.pagination__item:not([aria-current="page"]):active {
93
- color: var(--pagination-item-active-foreground-color, var(--color-foreground-primary));
108
+ color: var(
109
+ --pagination-item-active-foreground-color,
110
+ var(--color-foreground-primary)
111
+ );
94
112
  }
95
113
  a.pagination__item:not([aria-current="page"]):focus,
96
- button.pagination__item:not([aria-current="page"]):focus,
97
114
  a.pagination__item:not([aria-current="page"]):hover,
115
+ button.pagination__item:not([aria-current="page"]):focus,
98
116
  button.pagination__item:not([aria-current="page"]):hover {
99
- color: var(--pagination-item-hover-foreground-color, var(--color-foreground-accent));
117
+ color: var(
118
+ --pagination-item-hover-foreground-color,
119
+ var(--color-foreground-accent)
120
+ );
100
121
  }
101
- a.pagination__item:not([aria-current="page"]):focus::after,
102
- button.pagination__item:not([aria-current="page"]):focus::after,
103
- a.pagination__item:not([aria-current="page"]):hover::after,
104
- button.pagination__item:not([aria-current="page"]):hover::after {
105
- background-color: currentColor;
122
+ a.pagination__item:not([aria-current="page"]):focus:after,
123
+ a.pagination__item:not([aria-current="page"]):hover:after,
124
+ button.pagination__item:not([aria-current="page"]):focus:after,
125
+ button.pagination__item:not([aria-current="page"]):hover:after {
126
+ background-color: currentColor;
106
127
  }
107
128
  a.pagination__item:focus:not(:focus-visible),
108
129
  button.pagination__item:focus:not(:focus-visible) {
109
- outline: none;
130
+ outline: none;
110
131
  }
132
+
111
133
  span.pagination__item button.icon-btn--transparent:focus,
112
134
  span.pagination__item button.icon-btn--transparent:hover {
113
- background-color: var(--color-state-primary-hover);
135
+ background-color: var(--color-state-primary-hover);
114
136
  }
115
137
  span.pagination__item button.icon-btn--transparent:active {
116
- background-color: var(--color-state-primary-active);
138
+ background-color: var(--color-state-primary-active);
117
139
  }
140
+
118
141
  nav.pagination--fluid {
119
- width: 100%;
142
+ width: 100%;
120
143
  }
144
+
121
145
  nav.pagination--fluid ol.pagination__items {
122
- flex-grow: 1;
123
- max-width: none;
146
+ flex-grow: 1;
147
+ max-width: none;
124
148
  }
149
+
125
150
  nav.pagination--fluid ol.pagination__items li {
126
- flex: 1 0 var(--spacing-600);
151
+ flex: 1 0 var(--spacing-600);
127
152
  }
128
- [dir="rtl"] nav.pagination svg.icon--arrow-right-16,
129
- [dir="rtl"] nav.pagination svg.icon--arrow-left-16 {
130
- transform: rotate(180deg);
153
+
154
+ [dir="rtl"] nav.pagination svg.icon--arrow-left-16,
155
+ [dir="rtl"] nav.pagination svg.icon--arrow-right-16 {
156
+ transform: rotate(180deg);
131
157
  }
158
+
132
159
  @media (min-width: 768px) {
133
- nav.pagination {
134
- margin: var(--spacing-200) 0;
135
- }
160
+ nav.pagination {
161
+ margin: var(--spacing-200) 0;
162
+ }
136
163
  }
164
+
165
+ /*# sourceMappingURL=pagination.css.map */
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/sass/pagination/pagination.scss","../../src/sass/mixins/public/_utility-mixins.scss","../../src/sass/mixins/private/_token-mixins.scss","pagination.css"],"names":[],"mappings":"AAIA;ECkDI,kBAAA;ECpDI,gFAAA;EDqDJ,mBAK6B;EDhD7B,mBAAA;EACA,cAAA;EC2CA,sBAAA;ED1CA,2BAAA;EACA,cAAA;AGCJ;;AHEA;EAEI,aAAA;EACA,aAAA;AGCJ;;AHEA;EC8BI,kBAAA;ED3BA,qBAAA;EC4BA,mBAK6B;EDhC7B,WAAA;EC4BA,sBAAA;ED3BA,oBAAA;EACA,QAAA;EACA,SAAA;AGEJ;AHAI;ECqBA,kBAAA;EACA,YAFiC;EAGjC,sBAAA;AElBJ;;AHAA;ECgBI,kBAAA;EACA,mBAK6B;EAJ7B,sBAAA;AETJ;;AHFA;EAEI,uCAAA;UAAA,sCAAA;AGKJ;;AHFA;EAEI,qCAAA;UAAA,oCAAA;AGKJ;;AHFA;ECDI,kBAAA;EDIA,qBAAA;ECHA,mBAK6B;EDD7B,sCAAA;EACA,WAAA;ECJA,sBAAA;EDKA,UAAA;AGMJ;;AHHA;EACI,eAAA;EACA,WAAA;EACA,mBAAA;AGMJ;;AHHA;EACI,oBAAA;AGMJ;;AHHA;EAEI,iBAAA;AGOJ;AHLI;EACI,wBAAA;EACA,iBAAA;EACA,QAAA;EACA,UAAA;EACA,aAAA;EACA,UAAA;EACA,qBAAA;EACA,iBAAA;EACA,UAAA;AGQR;AHLI;EExFI,sFAAA;EF8FA,mCAAA;AGIR;AHFQ;EACI,6BAAA;AGKZ;AHAQ;EEtGA,qFAAA;AC0GR;AHGQ;EE7GA,mFAAA;AC+GR;AHKY;EACI,6BAAA;AGDhB;AHOI;EACI,YAAA;AGJR;;AHSI;EAEI,iDAAA;AGPR;AHUI;EACI,kDAAA;AGRR;;AHYA;EACI,UAAA;AGTJ;;AHYA;EACI,WAAA;EACA,cAAA;AGTJ;;AHYA;EACI,2BAAA;AGTJ;;AHaI;EAEI,wBAAA;AGVR;;AHcA;EACI;IACI,2BAAA;EGXN;AACF","file":"pagination.css"}