@ons/design-system 67.2.0 → 69.0.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 (182) hide show
  1. package/README.md +5 -0
  2. package/components/access-code/_macro.njk +1 -1
  3. package/components/access-code/_macro.spec.js +2 -10
  4. package/components/access-code/access-code.dom.js +1 -1
  5. package/components/access-code/access-code.spec.js +2 -2
  6. package/components/access-code/example-access-code-error.njk +9 -14
  7. package/components/access-code/example-access-code.njk +3 -5
  8. package/components/accordion/accordion.js +4 -4
  9. package/components/address-input/_macro.spec.js +3 -15
  10. package/components/address-input/autosuggest.address.dom.js +1 -1
  11. package/components/address-input/autosuggest.address.js +3 -2
  12. package/components/address-input/autosuggest.address.setter.js +3 -3
  13. package/components/address-input/autosuggest.address.spec.js +66 -69
  14. package/components/address-output/_macro.spec.js +6 -30
  15. package/components/autosuggest/autosuggest.dom.js +1 -1
  16. package/components/autosuggest/autosuggest.helpers.js +1 -1
  17. package/components/back-to-top/_back-to-top.scss +34 -0
  18. package/components/back-to-top/_macro.njk +17 -0
  19. package/components/back-to-top/_macro.spec.js +60 -0
  20. package/components/back-to-top/back-to-top.dom.js +12 -0
  21. package/components/back-to-top/back-to-top.js +58 -0
  22. package/components/back-to-top/back-to-top.spec.js +117 -0
  23. package/components/back-to-top/example-back-to-top.njk +37 -0
  24. package/components/back-to-top/example-full-page-back-to-top.njk +192 -0
  25. package/components/browser-banner/_macro.spec.js +4 -12
  26. package/components/button/_macro.njk +6 -6
  27. package/components/button/_macro.spec.js +1 -5
  28. package/components/button/button.js +7 -8
  29. package/components/button/button.spec.js +17 -39
  30. package/components/call-to-action/_macro.spec.js +2 -6
  31. package/components/card/_macro.njk +25 -25
  32. package/components/card/_macro.spec.js +6 -30
  33. package/components/char-check-limit/_macro.njk +1 -1
  34. package/components/char-check-limit/_macro.spec.js +3 -7
  35. package/components/char-check-limit/character-check.spec.js +24 -20
  36. package/components/checkboxes/_checkbox-macro.njk +1 -1
  37. package/components/checkboxes/_checkbox.scss +0 -3
  38. package/components/checkboxes/_macro.spec.js +1 -5
  39. package/components/checkboxes/checkbox-with-autoselect.js +3 -3
  40. package/components/checkboxes/checkbox-with-fieldset.js +2 -2
  41. package/components/checkboxes/checkboxes-with-reveal.js +4 -2
  42. package/components/checkboxes/checkboxes.dom.js +2 -2
  43. package/components/checkboxes/checkboxes.spec.js +13 -13
  44. package/components/content-pagination/_macro.spec.js +2 -2
  45. package/components/cookies-banner/cookies-banner.dom.js +1 -1
  46. package/components/cookies-banner/cookies-banner.js +1 -1
  47. package/components/cookies-banner/cookies-banner.spec.js +7 -7
  48. package/components/details/details.spec.js +12 -12
  49. package/components/details/example-details-with-warning.njk +5 -7
  50. package/components/document-list/_macro.spec.js +9 -27
  51. package/components/document-list/document-list.scss +1 -1
  52. package/components/document-list/example-document-list-downloads.njk +3 -3
  53. package/components/document-list/example-document-list-search-result-featured.njk +1 -1
  54. package/components/document-list/example-document-list-search-results.njk +3 -3
  55. package/components/download-resources/download-resources.js +54 -54
  56. package/components/download-resources/download-resources.spec.js +3 -1
  57. package/components/error/_macro.njk +1 -1
  58. package/components/error/_macro.spec.js +2 -6
  59. package/components/feedback/_macro.spec.js +4 -20
  60. package/components/field/_macro.spec.js +1 -3
  61. package/components/fieldset/_fieldset.scss +1 -2
  62. package/components/fieldset/_macro.spec.js +3 -9
  63. package/components/footer/_footer.scss +8 -0
  64. package/components/footer/_macro.njk +8 -7
  65. package/components/footer/_macro.spec.js +14 -2
  66. package/components/helpers/grid.njk +15 -15
  67. package/components/icon/_macro.njk +7 -3
  68. package/components/icon/_macro.spec.js +4 -12
  69. package/components/image/_macro.spec.js +1 -5
  70. package/components/input/_macro.njk +22 -23
  71. package/components/input/_macro.spec.js +1 -1
  72. package/components/input/character-check.dom.js +1 -1
  73. package/components/input/input.spec.js +1 -4
  74. package/components/label/_label.scss +1 -0
  75. package/components/label/_macro.njk +2 -2
  76. package/components/label/_macro.spec.js +4 -13
  77. package/components/list/_macro.spec.js +4 -12
  78. package/components/message/_macro.njk +17 -17
  79. package/components/message/_macro.spec.js +9 -33
  80. package/components/message-list/_macro.spec.js +7 -39
  81. package/components/modal/_macro.spec.js +3 -9
  82. package/components/modal/modal.dom.js +1 -1
  83. package/components/modal/modal.spec.js +5 -5
  84. package/components/mutually-exclusive/_macro.spec.js +2 -10
  85. package/components/mutually-exclusive/mutually-exclusive.checkboxes.spec.js +26 -26
  86. package/components/mutually-exclusive/mutually-exclusive.date.spec.js +9 -9
  87. package/components/mutually-exclusive/mutually-exclusive.dom.js +1 -1
  88. package/components/mutually-exclusive/mutually-exclusive.duration.spec.js +8 -8
  89. package/components/mutually-exclusive/mutually-exclusive.email.spec.js +7 -7
  90. package/components/mutually-exclusive/mutually-exclusive.js +13 -13
  91. package/components/mutually-exclusive/mutually-exclusive.multiple-options.checkboxes.spec.js +29 -29
  92. package/components/mutually-exclusive/mutually-exclusive.number.spec.js +7 -7
  93. package/components/mutually-exclusive/mutually-exclusive.textarea.spec.js +8 -8
  94. package/components/navigation/navigation.spec.js +0 -2
  95. package/components/pagination/_macro.spec.js +11 -53
  96. package/components/panel/_macro.njk +17 -17
  97. package/components/panel/_macro.spec.js +25 -25
  98. package/components/panel/_panel.scss +10 -9
  99. package/components/panel/example-panel-bare.njk +3 -4
  100. package/components/panel/example-panel-with-announcement.njk +6 -10
  101. package/components/panel/example-panel-with-error-summary.njk +2 -2
  102. package/components/panel/example-panel-with-information.njk +0 -1
  103. package/components/panel/example-panel-with-success-message.njk +1 -1
  104. package/components/panel/example-panel-with-warning.njk +2 -3
  105. package/components/password/password.dom.js +1 -1
  106. package/components/phase-banner/_macro.spec.js +3 -9
  107. package/components/question/_macro.njk +1 -1
  108. package/components/question/_macro.spec.js +5 -19
  109. package/components/question/_question.scss +1 -4
  110. package/components/question/example-question-interviewer-note.njk +1 -1
  111. package/components/quote/_macro.spec.js +2 -10
  112. package/components/radios/clear-radios.js +3 -3
  113. package/components/radios/radio-with-fieldset.js +4 -4
  114. package/components/radios/radios.dom.js +1 -1
  115. package/components/radios/radios.spec.js +26 -26
  116. package/components/related-content/_macro.spec.js +2 -4
  117. package/components/related-content/_section-macro.spec.js +2 -8
  118. package/components/relationships/example-relationships-error.njk +16 -18
  119. package/components/relationships/relationships.dom.js +1 -1
  120. package/components/relationships/relationships.js +2 -2
  121. package/components/reply/_macro.spec.js +3 -3
  122. package/components/reply/reply.dom.js +1 -1
  123. package/components/reply/reply.spec.js +3 -3
  124. package/components/section-navigation/_macro.spec.js +13 -21
  125. package/components/select/_macro.spec.js +6 -6
  126. package/components/share-page/_macro.spec.js +6 -14
  127. package/components/skip-to-content/_macro.spec.js +3 -11
  128. package/components/skip-to-content/skip-to-content.dom.js +1 -1
  129. package/components/skip-to-content/skip-to-content.js +1 -1
  130. package/components/skip-to-content/skip-to-content.spec.js +2 -2
  131. package/components/status/_macro.njk +2 -2
  132. package/components/status/_macro.spec.js +5 -9
  133. package/components/status/example-status-dead.njk +1 -1
  134. package/components/status/example-status-error.njk +1 -1
  135. package/components/status/example-status-pending.njk +1 -1
  136. package/components/status/example-status-small.njk +1 -1
  137. package/components/status/example-status-success.njk +1 -1
  138. package/components/summary/_macro.njk +4 -5
  139. package/components/summary/_macro.spec.js +27 -9
  140. package/components/table/_macro.spec.js +6 -10
  141. package/components/table/scrollable-table.dom.js +1 -1
  142. package/components/table/scrollable-table.js +1 -1
  143. package/components/table/sortable-table.js +4 -4
  144. package/components/table/table.spec.js +21 -17
  145. package/components/table-of-contents/_macro.njk +31 -31
  146. package/components/table-of-contents/_macro.spec.js +3 -11
  147. package/components/table-of-contents/toc.dom.js +1 -1
  148. package/components/table-of-contents/toc.spec.js +36 -32
  149. package/components/tabs/example-tabs-details.njk +1 -1
  150. package/components/tabs/tabs.dom.js +1 -1
  151. package/components/tabs/tabs.js +8 -8
  152. package/components/text-indent/_macro.spec.js +2 -6
  153. package/components/textarea/textarea.dom.js +1 -1
  154. package/components/textarea/textarea.spec.js +8 -8
  155. package/components/timeout-modal/_macro.spec.js +1 -3
  156. package/components/timeout-modal/timeout-modal.dom.js +1 -1
  157. package/components/timeout-modal/timeout-modal.spec.js +10 -10
  158. package/components/timeout-panel/_macro.njk +16 -17
  159. package/components/timeout-panel/_macro.spec.js +1 -1
  160. package/components/timeout-panel/timeout-panel.dom.js +1 -1
  161. package/components/timeout-panel/timeout-panel.spec.js +8 -8
  162. package/components/video/_macro.spec.js +1 -5
  163. package/components/video/video.dom.js +1 -1
  164. package/components/video/video.spec.js +16 -12
  165. package/css/main.css +1 -1
  166. package/favicons/safari-pinned-tab.svg +23 -23
  167. package/js/analytics.js +15 -14
  168. package/js/cookies-settings.dom.js +1 -1
  169. package/js/cookies-settings.spec.js +19 -19
  170. package/js/domready.js +1 -1
  171. package/js/fetch.js +1 -1
  172. package/js/inpagelink.js +3 -3
  173. package/js/main.js +1 -0
  174. package/js/print-button.js +1 -1
  175. package/js/timeout.js +1 -1
  176. package/package.json +2 -1
  177. package/scripts/main.es5.js +1 -1
  178. package/scripts/main.js +1 -1
  179. package/scss/base/_typography.scss +8 -2
  180. package/scss/main.scss +1 -0
  181. package/scss/overrides/hcm.scss +8 -1
  182. package/scss/vars/_colors.scss +2 -1
package/scss/base/_typography.scss CHANGED
@@ -23,11 +23,17 @@ h5,
23
23
  h6 {
24
24
  line-height: 1.2;
25
25
  margin: 0 0 1rem;
26
- em {
27
- background-color: var(--ons-color-highlight);
26
+ strong {
27
+ @extend .ons-highlight;
28
28
  }
29
29
  }
30
30
 
31
+ mark {
32
+ @extend .ons-highlight;
33
+
34
+ font-weight: $font-weight-bold;
35
+ }
36
+
31
37
  code {
32
38
  font-size: 0.8rem;
33
39
  }
package/scss/main.scss CHANGED
@@ -6,6 +6,7 @@
6
6
  @import '../components/access-code/access-code';
7
7
  @import '../components/address-output/address-output';
8
8
  @import '../components/autosuggest/autosuggest';
9
+ @import '../components/back-to-top/back-to-top';
9
10
  @import '../components/breadcrumbs/breadcrumbs';
10
11
  @import '../components/browser-banner/browser-banner';
11
12
  @import '../components/button/button';
package/scss/overrides/hcm.scss CHANGED
@@ -193,7 +193,14 @@
193
193
  }
194
194
 
195
195
  // Highlighting
196
- h1 em,
196
+ h1 strong,
197
+ h2 strong,
198
+ h3 strong,
199
+ h4 strong,
200
+ h5 strong,
201
+ h6 strong,
202
+ mark,
203
+ .ons-fieldset__legend-title strong,
197
204
  .ons-highlight {
198
205
  background-color: mark;
199
206
  color: marktext;
package/scss/vars/_colors.scss CHANGED
@@ -102,7 +102,8 @@
102
102
  --ons-color-borders-document-image-focus: var(--ons-color-black);
103
103
 
104
104
  // Placeholders
105
- --ons-color-placeholder: var(--ons-color-grey-15);
105
+ --ons-color-text-placeholder: var(--ons-color-grey-75);
106
+ --ons-color-image-placeholder: var(--ons-color-grey-15);
106
107
 
107
108
  // Form elements
108
109
  --ons-color-button: var(--ons-color-leaf-green);