@amsterdam/design-system-css 0.6.1 → 0.7.1

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 (156) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/README.md +2 -2
  3. package/dist/accordion/accordion.css +1 -1
  4. package/dist/accordion/accordion.css.map +1 -1
  5. package/dist/alert/alert.css +1 -1
  6. package/dist/alert/alert.css.map +1 -1
  7. package/dist/aspect-ratio/aspect-ratio.css +1 -1
  8. package/dist/aspect-ratio/aspect-ratio.css.map +1 -1
  9. package/dist/avatar/avatar.css +1 -0
  10. package/dist/avatar/avatar.css.map +1 -0
  11. package/dist/badge/badge.css +1 -1
  12. package/dist/badge/badge.css.map +1 -1
  13. package/dist/blockquote/blockquote.css +1 -1
  14. package/dist/blockquote/blockquote.css.map +1 -1
  15. package/dist/breadcrumb/breadcrumb.css +1 -1
  16. package/dist/breadcrumb/breadcrumb.css.map +1 -1
  17. package/dist/button/button.css +1 -1
  18. package/dist/button/button.css.map +1 -1
  19. package/dist/card/card.css +1 -1
  20. package/dist/card/card.css.map +1 -1
  21. package/dist/checkbox/checkbox.css +1 -1
  22. package/dist/checkbox/checkbox.css.map +1 -1
  23. package/dist/column/column.css +1 -1
  24. package/dist/column/column.css.map +1 -1
  25. package/dist/dialog/dialog.css +1 -1
  26. package/dist/dialog/dialog.css.map +1 -1
  27. package/dist/fieldset/fieldset.css +1 -1
  28. package/dist/fieldset/fieldset.css.map +1 -1
  29. package/dist/form-field-character-counter/form-field-character-counter.css +1 -0
  30. package/dist/form-field-character-counter/form-field-character-counter.css.map +1 -0
  31. package/dist/form-label/form-label.css +1 -1
  32. package/dist/form-label/form-label.css.map +1 -1
  33. package/dist/gap/gap.css +1 -1
  34. package/dist/gap/gap.css.map +1 -1
  35. package/dist/grid/grid.css +1 -1
  36. package/dist/grid/grid.css.map +1 -1
  37. package/dist/header/header.css +1 -1
  38. package/dist/header/header.css.map +1 -1
  39. package/dist/heading/heading.css +1 -1
  40. package/dist/heading/heading.css.map +1 -1
  41. package/dist/icon/icon.css +1 -1
  42. package/dist/icon/icon.css.map +1 -1
  43. package/dist/icon-button/icon-button.css +1 -1
  44. package/dist/icon-button/icon-button.css.map +1 -1
  45. package/dist/image/image.css +1 -1
  46. package/dist/image/image.css.map +1 -1
  47. package/dist/index.css +1 -1
  48. package/dist/index.css.map +1 -1
  49. package/dist/link/link.css +1 -1
  50. package/dist/link/link.css.map +1 -1
  51. package/dist/link-list/link-list.css +1 -1
  52. package/dist/link-list/link-list.css.map +1 -1
  53. package/dist/logo/logo.css +1 -1
  54. package/dist/logo/logo.css.map +1 -1
  55. package/dist/margin/margin.css +1 -1
  56. package/dist/margin/margin.css.map +1 -1
  57. package/dist/mark/mark.css +1 -1
  58. package/dist/mark/mark.css.map +1 -1
  59. package/dist/mega-menu/mega-menu.css +1 -1
  60. package/dist/mega-menu/mega-menu.css.map +1 -1
  61. package/dist/ordered-list/ordered-list.css +1 -1
  62. package/dist/ordered-list/ordered-list.css.map +1 -1
  63. package/dist/overlap/overlap.css +1 -1
  64. package/dist/overlap/overlap.css.map +1 -1
  65. package/dist/page-heading/page-heading.css +1 -1
  66. package/dist/page-heading/page-heading.css.map +1 -1
  67. package/dist/page-menu/page-menu.css +1 -1
  68. package/dist/page-menu/page-menu.css.map +1 -1
  69. package/dist/pagination/pagination.css +1 -1
  70. package/dist/pagination/pagination.css.map +1 -1
  71. package/dist/paragraph/paragraph.css +1 -1
  72. package/dist/paragraph/paragraph.css.map +1 -1
  73. package/dist/radio/radio.css +1 -1
  74. package/dist/radio/radio.css.map +1 -1
  75. package/dist/row/row.css +1 -1
  76. package/dist/row/row.css.map +1 -1
  77. package/dist/screen/screen.css +1 -1
  78. package/dist/screen/screen.css.map +1 -1
  79. package/dist/search-field/search-field.css +1 -1
  80. package/dist/search-field/search-field.css.map +1 -1
  81. package/dist/skip-link/skip-link.css +1 -1
  82. package/dist/skip-link/skip-link.css.map +1 -1
  83. package/dist/spotlight/spotlight.css +1 -1
  84. package/dist/spotlight/spotlight.css.map +1 -1
  85. package/dist/switch/switch.css +1 -1
  86. package/dist/switch/switch.css.map +1 -1
  87. package/dist/table/table.css +1 -1
  88. package/dist/table/table.css.map +1 -1
  89. package/dist/tabs/tabs.css +1 -1
  90. package/dist/tabs/tabs.css.map +1 -1
  91. package/dist/text-area/text-area.css +1 -1
  92. package/dist/text-area/text-area.css.map +1 -1
  93. package/dist/text-input/text-input.css +1 -1
  94. package/dist/text-input/text-input.css.map +1 -1
  95. package/dist/top-task-link/top-task-link.css +1 -1
  96. package/dist/top-task-link/top-task-link.css.map +1 -1
  97. package/dist/unordered-list/unordered-list.css +1 -1
  98. package/dist/unordered-list/unordered-list.css.map +1 -1
  99. package/dist/visually-hidden/visually-hidden.css +1 -1
  100. package/dist/visually-hidden/visually-hidden.css.map +1 -1
  101. package/documentation/coding-conventions.md +2 -2
  102. package/package.json +3 -3
  103. package/src/common/breakpoint.scss +2 -2
  104. package/src/common/hyphenation.scss +3 -3
  105. package/src/common/size.scss +1 -1
  106. package/src/components/accordion/accordion.scss +16 -16
  107. package/src/components/alert/alert.scss +15 -15
  108. package/src/components/aspect-ratio/aspect-ratio.scss +13 -13
  109. package/src/components/avatar/README.md +15 -0
  110. package/src/components/avatar/avatar.scss +74 -0
  111. package/src/components/badge/badge.scss +30 -30
  112. package/src/components/blockquote/blockquote.scss +8 -8
  113. package/src/components/breadcrumb/breadcrumb.scss +17 -17
  114. package/src/components/button/button.scss +37 -37
  115. package/src/components/card/card.scss +10 -10
  116. package/src/components/checkbox/checkbox.scss +80 -82
  117. package/src/components/column/column.scss +4 -4
  118. package/src/components/dialog/dialog.scss +16 -32
  119. package/src/components/fieldset/fieldset.scss +7 -7
  120. package/src/components/form-field-character-counter/README.md +19 -0
  121. package/src/components/form-field-character-counter/form-field-character-counter.scss +22 -0
  122. package/src/components/form-label/form-label.scss +6 -6
  123. package/src/components/gap/gap.scss +4 -4
  124. package/src/components/grid/grid.scss +41 -41
  125. package/src/components/header/header.scss +21 -21
  126. package/src/components/heading/heading.scss +24 -24
  127. package/src/components/icon/icon.scss +23 -23
  128. package/src/components/icon-button/icon-button.scss +18 -18
  129. package/src/components/image/image.scss +1 -1
  130. package/src/components/index.scss +2 -0
  131. package/src/components/link/link.scss +32 -32
  132. package/src/components/link-list/link-list.scss +27 -27
  133. package/src/components/logo/logo.scss +8 -8
  134. package/src/components/margin/margin.scss +3 -3
  135. package/src/components/mark/mark.scss +2 -2
  136. package/src/components/mega-menu/mega-menu.scss +5 -5
  137. package/src/components/ordered-list/ordered-list.scss +19 -19
  138. package/src/components/overlap/overlap.scss +1 -1
  139. package/src/components/page-heading/page-heading.scss +8 -8
  140. package/src/components/page-menu/page-menu.scss +20 -20
  141. package/src/components/pagination/pagination.scss +17 -17
  142. package/src/components/paragraph/paragraph.scss +14 -14
  143. package/src/components/radio/radio.scss +48 -48
  144. package/src/components/row/row.scss +4 -4
  145. package/src/components/screen/screen.scss +5 -5
  146. package/src/components/search-field/search-field.scss +25 -25
  147. package/src/components/skip-link/skip-link.scss +11 -11
  148. package/src/components/spotlight/spotlight.scss +16 -16
  149. package/src/components/switch/switch.scss +18 -18
  150. package/src/components/table/table.scss +16 -16
  151. package/src/components/tabs/tabs.scss +20 -20
  152. package/src/components/text-area/text-area.scss +27 -27
  153. package/src/components/text-input/text-input.scss +21 -21
  154. package/src/components/top-task-link/top-task-link.scss +20 -20
  155. package/src/components/unordered-list/unordered-list.scss +19 -19
  156. package/src/components/visually-hidden/visually-hidden.scss +1 -1
package/src/components/unordered-list/unordered-list.scss CHANGED
@@ -13,39 +13,39 @@
13
13
  }
14
14
 
15
15
  /** A list is a grid column with a gap between items. */
16
- .amsterdam-unordered-list {
16
+ .ams-unordered-list {
17
17
  @include reset;
18
18
 
19
19
  display: grid;
20
- gap: var(--amsterdam-unordered-list-gap);
20
+ gap: var(--ams-unordered-list-gap);
21
21
  }
22
22
 
23
23
  /** A list with markers sets typography for its text content. */
24
- .amsterdam-unordered-list:not(.amsterdam-unordered-list--no-markers) {
25
- color: var(--amsterdam-unordered-list-color);
26
- font-family: var(--amsterdam-unordered-list-font-family);
27
- font-size: var(--amsterdam-unordered-list-font-size);
28
- font-weight: var(--amsterdam-unordered-list-font-weight);
29
- line-height: var(--amsterdam-unordered-list-line-height);
30
- list-style-type: var(--amsterdam-unordered-list-list-style-type);
24
+ .ams-unordered-list:not(.ams-unordered-list--no-markers) {
25
+ color: var(--ams-unordered-list-color);
26
+ font-family: var(--ams-unordered-list-font-family);
27
+ font-size: var(--ams-unordered-list-font-size);
28
+ font-weight: var(--ams-unordered-list-font-weight);
29
+ line-height: var(--ams-unordered-list-line-height);
30
+ list-style-type: var(--ams-unordered-list-list-style-type);
31
31
 
32
32
  /** List items are responsible for indentation and marker positioning. */
33
- .amsterdam-unordered-list__item {
34
- margin-inline-start: var(--amsterdam-unordered-list-item-margin-inline-start);
35
- padding-inline-start: var(--amsterdam-unordered-list-item-padding-inline-start);
33
+ .ams-unordered-list__item {
34
+ margin-inline-start: var(--ams-unordered-list-item-margin-inline-start);
35
+ padding-inline-start: var(--ams-unordered-list-item-padding-inline-start);
36
36
  }
37
37
  }
38
38
 
39
- .amsterdam-unordered-list--inverse-color:not(.amsterdam-unordered-list--no-markers) {
40
- color: var(--amsterdam-unordered-list-inverse-color);
39
+ .ams-unordered-list--inverse-color:not(.ams-unordered-list--no-markers) {
40
+ color: var(--ams-unordered-list-inverse-color);
41
41
  }
42
42
 
43
43
  /** A nested list has a different marker and less indentation for correct alignment. */
44
- :is(.amsterdam-ordered-list, .amsterdam-unordered-list) .amsterdam-unordered-list {
45
- list-style-type: var(--amsterdam-unordered-list-unordered-list-list-style-type);
44
+ :is(.ams-ordered-list, .ams-unordered-list) .ams-unordered-list {
45
+ list-style-type: var(--ams-unordered-list-unordered-list-list-style-type);
46
46
 
47
- .amsterdam-unordered-list__item {
48
- margin-inline-start: var(--amsterdam-unordered-list-unordered-list-item-margin-inline-start);
49
- padding-inline-start: var(--amsterdam-unordered-list-unordered-list-item-padding-inline-start);
47
+ .ams-unordered-list__item {
48
+ margin-inline-start: var(--ams-unordered-list-unordered-list-item-margin-inline-start);
49
+ padding-inline-start: var(--ams-unordered-list-unordered-list-item-padding-inline-start);
50
50
  }
51
51
  }
package/src/components/visually-hidden/visually-hidden.scss CHANGED
@@ -4,7 +4,7 @@
4
4
  */
5
5
 
6
6
  // Source: https://css-tricks.com/inclusively-hidden/
7
- .amsterdam-visually-hidden:not(:active, :focus) {
7
+ .ams-visually-hidden:not(:active, :focus) {
8
8
  clip: rect(0 0 0 0);
9
9
  clip-path: inset(50%);
10
10
  height: 1px;