@amsterdam/design-system-css 0.1.6 → 0.1.8

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 (148) hide show
  1. package/dist/accordion/accordion.css +1 -1
  2. package/dist/accordion/accordion.css.map +1 -1
  3. package/dist/alert/alert.css +1 -0
  4. package/dist/alert/alert.css.map +1 -0
  5. package/dist/aspect-ratio/aspect-ratio.css +1 -30
  6. package/dist/aspect-ratio/aspect-ratio.css.map +1 -1
  7. package/dist/blockquote/blockquote.css +1 -1
  8. package/dist/blockquote/blockquote.css.map +1 -1
  9. package/dist/breadcrumb/breadcrumb.css +1 -1
  10. package/dist/breadcrumb/breadcrumb.css.map +1 -1
  11. package/dist/button/button.css +1 -1
  12. package/dist/button/button.css.map +1 -1
  13. package/dist/card/card.css +1 -56
  14. package/dist/card/card.css.map +1 -1
  15. package/dist/checkbox/checkbox.css +1 -1
  16. package/dist/checkbox/checkbox.css.map +1 -1
  17. package/dist/footer/footer.css +1 -1
  18. package/dist/footer/footer.css.map +1 -1
  19. package/dist/form-label/form-label.css +1 -1
  20. package/dist/form-label/form-label.css.map +1 -1
  21. package/dist/grid/grid-cell.css +1 -1
  22. package/dist/grid/grid-cell.css.map +1 -1
  23. package/dist/grid/grid.css +1 -0
  24. package/dist/grid/grid.css.map +1 -0
  25. package/dist/heading/heading.css +1 -1
  26. package/dist/heading/heading.css.map +1 -1
  27. package/dist/highlight/highlight.css +1 -0
  28. package/dist/highlight/highlight.css.map +1 -0
  29. package/dist/icon/icon.css +1 -1
  30. package/dist/icon/icon.css.map +1 -1
  31. package/dist/image/image.css +1 -0
  32. package/dist/image/image.css.map +1 -0
  33. package/dist/index.css +1 -1
  34. package/dist/index.css.map +1 -1
  35. package/dist/link/link.css +1 -1
  36. package/dist/link/link.css.map +1 -1
  37. package/dist/ordered-list/ordered-list.css +1 -1
  38. package/dist/ordered-list/ordered-list.css.map +1 -1
  39. package/dist/page-heading/page-heading.css +1 -1
  40. package/dist/page-heading/page-heading.css.map +1 -1
  41. package/dist/page-menu/page-menu.css +1 -1
  42. package/dist/page-menu/page-menu.css.map +1 -1
  43. package/dist/pagination/pagination.css +1 -0
  44. package/dist/pagination/pagination.css.map +1 -0
  45. package/dist/paragraph/paragraph.css +1 -1
  46. package/dist/paragraph/paragraph.css.map +1 -1
  47. package/dist/screen/screen.css +1 -0
  48. package/dist/screen/screen.css.map +1 -0
  49. package/dist/switch/switch.css +1 -59
  50. package/dist/switch/switch.css.map +1 -1
  51. package/dist/top-task-link/top-task-link.css +1 -1
  52. package/dist/top-task-link/top-task-link.css.map +1 -1
  53. package/dist/unordered-list/unordered-list.css +1 -1
  54. package/dist/unordered-list/unordered-list.css.map +1 -1
  55. package/documentation/coding-conventions.md +35 -0
  56. package/package.json +5 -5
  57. package/src/accordion/README.md +1 -1
  58. package/src/accordion/accordion.scss +7 -1
  59. package/src/alert/README.md +18 -0
  60. package/src/alert/alert.scss +69 -0
  61. package/src/aspect-ratio/README.md +18 -0
  62. package/src/aspect-ratio/aspect-ratio.scss +33 -0
  63. package/src/blockquote/blockquote.scss +3 -3
  64. package/src/breadcrumb/breadcrumb.scss +4 -4
  65. package/src/button/button.scss +10 -13
  66. package/src/card/README.md +12 -0
  67. package/src/card/card.scss +56 -0
  68. package/src/checkbox/README.md +1 -1
  69. package/src/checkbox/checkbox.scss +8 -2
  70. package/src/footer/footer.scss +0 -19
  71. package/src/form-label/README.md +1 -1
  72. package/src/form-label/form-label.scss +7 -1
  73. package/src/grid/README.grid-cell.md +14 -0
  74. package/src/grid/README.grid.md +17 -0
  75. package/src/grid/grid-cell.scss +31 -3
  76. package/src/grid/grid.scss +65 -0
  77. package/src/heading/heading.scss +5 -4
  78. package/src/highlight/README.md +15 -0
  79. package/src/highlight/highlight.scss +36 -0
  80. package/src/icon/icon.scss +10 -10
  81. package/src/image/README.md +18 -0
  82. package/src/image/image.scss +16 -0
  83. package/src/index.scss +18 -4
  84. package/src/link/link.scss +28 -36
  85. package/src/ordered-list/README.md +1 -1
  86. package/src/ordered-list/ordered-list.scss +1 -1
  87. package/src/page-heading/README.md +1 -1
  88. package/src/page-heading/page-heading.scss +2 -1
  89. package/src/page-menu/page-menu.scss +2 -2
  90. package/src/pagination/README.md +16 -0
  91. package/src/pagination/pagination.scss +75 -0
  92. package/src/paragraph/paragraph.scss +3 -3
  93. package/src/screen/README.md +20 -0
  94. package/src/screen/screen.scss +22 -0
  95. package/src/switch/README.md +20 -0
  96. package/src/switch/switch.scss +59 -0
  97. package/src/top-task-link/README.md +13 -8
  98. package/src/top-task-link/top-task-link.scss +2 -2
  99. package/src/unordered-list/README.md +1 -1
  100. package/src/unordered-list/unordered-list.scss +1 -1
  101. package/src/visually-hidden/README.md +2 -2
  102. package/utils/breakpoint.scss +14 -3
  103. package/dist/buttons/button/button.css +0 -729
  104. package/dist/buttons/button/button.css.map +0 -1
  105. package/dist/containers/accordion/accordion.css +0 -69
  106. package/dist/containers/accordion/accordion.css.map +0 -1
  107. package/dist/containers/footer/footer.css +0 -35
  108. package/dist/containers/footer/footer.css.map +0 -1
  109. package/dist/containers/visually-hidden/visually-hidden.css +0 -18
  110. package/dist/containers/visually-hidden/visually-hidden.css.map +0 -1
  111. package/dist/forms/checkbox/checkbox.css +0 -170
  112. package/dist/forms/checkbox/checkbox.css.map +0 -1
  113. package/dist/forms/form-label/form-label.css +0 -26
  114. package/dist/forms/form-label/form-label.css.map +0 -1
  115. package/dist/grid/page-grid.css +0 -1
  116. package/dist/grid/page-grid.css.map +0 -1
  117. package/dist/hero/hero.css +0 -1
  118. package/dist/hero/hero.css.map +0 -1
  119. package/dist/layout/grid-cell/grid-cell.css +0 -88
  120. package/dist/layout/grid-cell/grid-cell.css.map +0 -1
  121. package/dist/layout/page-grid/page-grid.css +0 -26
  122. package/dist/layout/page-grid/page-grid.css.map +0 -1
  123. package/dist/media/icon/icon.css +0 -122
  124. package/dist/media/icon/icon.css.map +0 -1
  125. package/dist/navigation/breadcrumb/breadcrumb.css +0 -67
  126. package/dist/navigation/breadcrumb/breadcrumb.css.map +0 -1
  127. package/dist/navigation/link/link.css +0 -111
  128. package/dist/navigation/link/link.css.map +0 -1
  129. package/dist/navigation/page-menu/page-menu.css +0 -83
  130. package/dist/navigation/page-menu/page-menu.css.map +0 -1
  131. package/dist/navigation/top-task-link/top-task-link.css +0 -59
  132. package/dist/navigation/top-task-link/top-task-link.css.map +0 -1
  133. package/dist/testula/testula.css +0 -9
  134. package/dist/testula/testula.css.map +0 -1
  135. package/dist/text/blockquote/blockquote.css +0 -43
  136. package/dist/text/blockquote/blockquote.css.map +0 -1
  137. package/dist/text/heading/heading.css +0 -67
  138. package/dist/text/heading/heading.css.map +0 -1
  139. package/dist/text/ordered-list/ordered-list.css +0 -54
  140. package/dist/text/ordered-list/ordered-list.css.map +0 -1
  141. package/dist/text/page-heading/page-heading.css +0 -34
  142. package/dist/text/page-heading/page-heading.css.map +0 -1
  143. package/dist/text/paragraph/paragraph.css +0 -53
  144. package/dist/text/paragraph/paragraph.css.map +0 -1
  145. package/dist/text/unordered-list/unordered-list.css +0 -54
  146. package/dist/text/unordered-list/unordered-list.css.map +0 -1
  147. package/src/grid/README.md +0 -11
  148. package/src/grid/page-grid.scss +0 -19
package/src/top-task-link/top-task-link.scss CHANGED
@@ -26,7 +26,7 @@
26
26
  font-weight: var(--amsterdam-top-task-link-label-font-weight);
27
27
  line-height: var(--amsterdam-top-task-link-label-line-height);
28
28
 
29
- @media screen and (width > $amsterdam-breakpoint) {
29
+ @media screen and (min-width: $amsterdam-breakpoint-typography) {
30
30
  font-size: var(--amsterdam-top-task-link-label-wide-font-size);
31
31
  }
32
32
 
@@ -47,7 +47,7 @@
47
47
  font-weight: var(--amsterdam-top-task-link-description-font-weight);
48
48
  line-height: var(--amsterdam-top-task-link-description-line-height);
49
49
 
50
- @media screen and (width > $amsterdam-breakpoint) {
50
+ @media screen and (min-width: $amsterdam-breakpoint-typography) {
51
51
  font-size: var(--amsterdam-top-task-link-description-wide-font-size);
52
52
  }
53
53
 
package/src/unordered-list/README.md CHANGED
@@ -1,4 +1,4 @@
1
- # Unordered list
1
+ # Unordered List
2
2
 
3
3
  Een lijst is een verticale groep gerelateerde inhoud.
4
4
  Deze lijst kan 2 niveaus hebben.
package/src/unordered-list/unordered-list.scss CHANGED
@@ -31,7 +31,7 @@
31
31
  line-height: var(--amsterdam-unordered-list-line-height);
32
32
  list-style-type: var(--amsterdam-unordered-list-list-style-type);
33
33
 
34
- @media screen and (width > $amsterdam-breakpoint) {
34
+ @media screen and (min-width: $amsterdam-breakpoint-typography) {
35
35
  font-size: var(--amsterdam-unordered-list-wide-font-size);
36
36
  }
37
37
 
package/src/visually-hidden/README.md CHANGED
@@ -1,5 +1,5 @@
1
- # Visually hidden
1
+ # Visually Hidden
2
2
 
3
- Het visually hidden component kan gebruikt worden om inhoud te verbergen voor ziende gebruikers, maar beschikbaar te houden voor niet-visuele _user agents_, zoals schermlezers.
3
+ Het Visually Hidden component kan gebruikt worden om inhoud te verbergen voor ziende gebruikers, maar beschikbaar te houden voor niet-visuele _user agents_, zoals schermlezers.
4
4
 
5
5
  Let op: In de overgrote meerderheid van de gevallen moet inhoud die visueel beschikbaar is, ook beschikbaar zijn voor niet-visuele _user agents_, en omgekeerd. Uitgebreide aanwijzingen of instructies die alleen door niet-visuele _user agents_ worden gelezen, doen al snel meer kwaad dan goed.
package/utils/breakpoint.scss CHANGED
@@ -4,7 +4,18 @@
4
4
  */
5
5
 
6
6
  /*
7
- The breakpoint is 854px / 16 = 53.375rems
8
- https://developer.mozilla.org/en-US/docs/Web/CSS/@media#accessibility_concerns
7
+ * CSS Custom properties cannot be used inside media queries.
8
+ * We to resort to Sass variables for our breakpoint values.
9
+ */
10
+
11
+ /**
12
+ * The breakpoint for typography is 854px = 53.375rems.
13
+ * @deprecated To be replaced with the grid breakpoints.
9
14
  */
10
- $amsterdam-breakpoint: 53.375rem;
15
+ $amsterdam-breakpoint-typography: 53.375rem;
16
+
17
+ /** The breakpoint at which medium screens start. */
18
+ $amsterdam-breakpoint-medium: 36rem;
19
+
20
+ /** The breakpoint at which wide screens start. */
21
+ $amsterdam-breakpoint-wide: 68rem;