@amsterdam/design-system-css 0.6.0 → 0.7.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 (147) hide show
  1. package/CHANGELOG.md +18 -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/badge/badge.css +1 -1
  10. package/dist/badge/badge.css.map +1 -1
  11. package/dist/blockquote/blockquote.css +1 -1
  12. package/dist/blockquote/blockquote.css.map +1 -1
  13. package/dist/breadcrumb/breadcrumb.css +1 -1
  14. package/dist/breadcrumb/breadcrumb.css.map +1 -1
  15. package/dist/button/button.css +1 -1
  16. package/dist/button/button.css.map +1 -1
  17. package/dist/card/card.css +1 -1
  18. package/dist/card/card.css.map +1 -1
  19. package/dist/checkbox/checkbox.css +1 -1
  20. package/dist/checkbox/checkbox.css.map +1 -1
  21. package/dist/column/column.css +1 -1
  22. package/dist/column/column.css.map +1 -1
  23. package/dist/dialog/dialog.css +1 -1
  24. package/dist/dialog/dialog.css.map +1 -1
  25. package/dist/fieldset/fieldset.css +1 -1
  26. package/dist/fieldset/fieldset.css.map +1 -1
  27. package/dist/form-label/form-label.css +1 -1
  28. package/dist/form-label/form-label.css.map +1 -1
  29. package/dist/gap/gap.css +1 -1
  30. package/dist/gap/gap.css.map +1 -1
  31. package/dist/grid/grid.css +1 -1
  32. package/dist/grid/grid.css.map +1 -1
  33. package/dist/header/header.css +1 -1
  34. package/dist/header/header.css.map +1 -1
  35. package/dist/heading/heading.css +1 -1
  36. package/dist/heading/heading.css.map +1 -1
  37. package/dist/icon/icon.css +1 -1
  38. package/dist/icon/icon.css.map +1 -1
  39. package/dist/icon-button/icon-button.css +1 -1
  40. package/dist/icon-button/icon-button.css.map +1 -1
  41. package/dist/image/image.css +1 -1
  42. package/dist/image/image.css.map +1 -1
  43. package/dist/index.css +1 -1
  44. package/dist/index.css.map +1 -1
  45. package/dist/link/link.css +1 -1
  46. package/dist/link/link.css.map +1 -1
  47. package/dist/link-list/link-list.css +1 -1
  48. package/dist/link-list/link-list.css.map +1 -1
  49. package/dist/logo/logo.css +1 -1
  50. package/dist/logo/logo.css.map +1 -1
  51. package/dist/margin/margin.css +1 -1
  52. package/dist/margin/margin.css.map +1 -1
  53. package/dist/mark/mark.css +1 -1
  54. package/dist/mark/mark.css.map +1 -1
  55. package/dist/mega-menu/mega-menu.css +1 -1
  56. package/dist/mega-menu/mega-menu.css.map +1 -1
  57. package/dist/ordered-list/ordered-list.css +1 -1
  58. package/dist/ordered-list/ordered-list.css.map +1 -1
  59. package/dist/overlap/overlap.css +1 -1
  60. package/dist/overlap/overlap.css.map +1 -1
  61. package/dist/page-heading/page-heading.css +1 -1
  62. package/dist/page-heading/page-heading.css.map +1 -1
  63. package/dist/page-menu/page-menu.css +1 -1
  64. package/dist/page-menu/page-menu.css.map +1 -1
  65. package/dist/pagination/pagination.css +1 -1
  66. package/dist/pagination/pagination.css.map +1 -1
  67. package/dist/paragraph/paragraph.css +1 -1
  68. package/dist/paragraph/paragraph.css.map +1 -1
  69. package/dist/radio/radio.css +1 -1
  70. package/dist/radio/radio.css.map +1 -1
  71. package/dist/row/row.css +1 -1
  72. package/dist/row/row.css.map +1 -1
  73. package/dist/screen/screen.css +1 -1
  74. package/dist/screen/screen.css.map +1 -1
  75. package/dist/search-field/search-field.css +1 -1
  76. package/dist/search-field/search-field.css.map +1 -1
  77. package/dist/skip-link/skip-link.css +1 -1
  78. package/dist/skip-link/skip-link.css.map +1 -1
  79. package/dist/spotlight/spotlight.css +1 -1
  80. package/dist/spotlight/spotlight.css.map +1 -1
  81. package/dist/switch/switch.css +1 -1
  82. package/dist/switch/switch.css.map +1 -1
  83. package/dist/table/table.css +1 -1
  84. package/dist/table/table.css.map +1 -1
  85. package/dist/tabs/tabs.css +1 -1
  86. package/dist/tabs/tabs.css.map +1 -1
  87. package/dist/text-area/text-area.css +1 -1
  88. package/dist/text-area/text-area.css.map +1 -1
  89. package/dist/text-input/text-input.css +1 -1
  90. package/dist/text-input/text-input.css.map +1 -1
  91. package/dist/top-task-link/top-task-link.css +1 -1
  92. package/dist/top-task-link/top-task-link.css.map +1 -1
  93. package/dist/unordered-list/unordered-list.css +1 -1
  94. package/dist/unordered-list/unordered-list.css.map +1 -1
  95. package/dist/visually-hidden/visually-hidden.css +1 -1
  96. package/dist/visually-hidden/visually-hidden.css.map +1 -1
  97. package/documentation/coding-conventions.md +2 -2
  98. package/package.json +2 -2
  99. package/src/common/breakpoint.scss +2 -2
  100. package/src/common/hyphenation.scss +3 -3
  101. package/src/common/size.scss +1 -1
  102. package/src/components/accordion/accordion.scss +16 -16
  103. package/src/components/alert/alert.scss +15 -15
  104. package/src/components/aspect-ratio/aspect-ratio.scss +13 -13
  105. package/src/components/badge/badge.scss +30 -30
  106. package/src/components/blockquote/blockquote.scss +8 -8
  107. package/src/components/breadcrumb/breadcrumb.scss +17 -17
  108. package/src/components/button/button.scss +37 -41
  109. package/src/components/card/card.scss +10 -10
  110. package/src/components/checkbox/checkbox.scss +80 -82
  111. package/src/components/column/column.scss +4 -4
  112. package/src/components/dialog/dialog.scss +21 -21
  113. package/src/components/fieldset/fieldset.scss +7 -7
  114. package/src/components/form-label/form-label.scss +6 -6
  115. package/src/components/gap/gap.scss +4 -4
  116. package/src/components/grid/grid.scss +41 -41
  117. package/src/components/header/header.scss +21 -21
  118. package/src/components/heading/heading.scss +24 -24
  119. package/src/components/icon/icon.scss +23 -23
  120. package/src/components/icon-button/icon-button.scss +18 -18
  121. package/src/components/image/image.scss +1 -1
  122. package/src/components/link/link.scss +32 -32
  123. package/src/components/link-list/link-list.scss +27 -27
  124. package/src/components/logo/logo.scss +8 -8
  125. package/src/components/margin/margin.scss +3 -3
  126. package/src/components/mark/mark.scss +2 -2
  127. package/src/components/mega-menu/mega-menu.scss +5 -5
  128. package/src/components/ordered-list/ordered-list.scss +19 -19
  129. package/src/components/overlap/overlap.scss +1 -1
  130. package/src/components/page-heading/page-heading.scss +8 -8
  131. package/src/components/page-menu/page-menu.scss +20 -20
  132. package/src/components/pagination/pagination.scss +17 -17
  133. package/src/components/paragraph/paragraph.scss +14 -14
  134. package/src/components/radio/radio.scss +48 -48
  135. package/src/components/row/row.scss +4 -4
  136. package/src/components/screen/screen.scss +5 -5
  137. package/src/components/search-field/search-field.scss +25 -25
  138. package/src/components/skip-link/skip-link.scss +11 -11
  139. package/src/components/spotlight/spotlight.scss +16 -16
  140. package/src/components/switch/switch.scss +18 -18
  141. package/src/components/table/table.scss +16 -16
  142. package/src/components/tabs/tabs.scss +20 -20
  143. package/src/components/text-area/text-area.scss +27 -27
  144. package/src/components/text-input/text-input.scss +21 -21
  145. package/src/components/top-task-link/top-task-link.scss +20 -20
  146. package/src/components/unordered-list/unordered-list.scss +19 -19
  147. package/src/components/visually-hidden/visually-hidden.scss +1 -1
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../src/components/skip-link/skip-link.scss"],"names":[],"mappings":"AAKA,qBACE,6DACA,uCACA,cACA,mDACA,+CACA,mDACA,mDACA,yDACA,uDACA,yDACA,kBACA,qBAEA,2BACE","file":"skip-link.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../src/components/skip-link/skip-link.scss"],"names":[],"mappings":"AAKA,eACE,uDACA,iCACA,cACA,6CACA,yCACA,6CACA,6CACA,mDACA,iDACA,mDACA,kBACA,qBAEA,qBACE","file":"skip-link.css"}
@@ -1 +1 @@
1
- .amsterdam-spotlight--blue{background-color:var(--amsterdam-spotlight-blue-background-color)}.amsterdam-spotlight--dark-blue{background-color:var(--amsterdam-spotlight-dark-blue-background-color)}.amsterdam-spotlight--dark-green{background-color:var(--amsterdam-spotlight-dark-green-background-color)}.amsterdam-spotlight--green{background-color:var(--amsterdam-spotlight-green-background-color)}.amsterdam-spotlight--magenta{background-color:var(--amsterdam-spotlight-magenta-background-color)}.amsterdam-spotlight--orange{background-color:var(--amsterdam-spotlight-orange-background-color)}.amsterdam-spotlight--purple{background-color:var(--amsterdam-spotlight-purple-background-color)}.amsterdam-spotlight--yellow{background-color:var(--amsterdam-spotlight-yellow-background-color)}/*# sourceMappingURL=spotlight.css.map */
1
+ .ams-spotlight--blue{background-color:var(--ams-spotlight-blue-background-color)}.ams-spotlight--dark-blue{background-color:var(--ams-spotlight-dark-blue-background-color)}.ams-spotlight--dark-green{background-color:var(--ams-spotlight-dark-green-background-color)}.ams-spotlight--green{background-color:var(--ams-spotlight-green-background-color)}.ams-spotlight--magenta{background-color:var(--ams-spotlight-magenta-background-color)}.ams-spotlight--orange{background-color:var(--ams-spotlight-orange-background-color)}.ams-spotlight--purple{background-color:var(--ams-spotlight-purple-background-color)}.ams-spotlight--yellow{background-color:var(--ams-spotlight-yellow-background-color)}/*# sourceMappingURL=spotlight.css.map */
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../src/components/spotlight/spotlight.scss"],"names":[],"mappings":"AAKA,2BACE,kEAGF,gCACE,uEAGF,iCACE,wEAGF,4BACE,mEAGF,8BACE,qEAGF,6BACE,oEAGF,6BACE,oEAGF,6BACE","file":"spotlight.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../src/components/spotlight/spotlight.scss"],"names":[],"mappings":"AAKA,qBACE,4DAGF,0BACE,iEAGF,2BACE,kEAGF,sBACE,6DAGF,wBACE,+DAGF,uBACE,8DAGF,uBACE,8DAGF,uBACE","file":"spotlight.css"}
@@ -1 +1 @@
1
- .amsterdam-switch__input{appearance:none;margin-block:0;margin-inline:0;opacity:0%}.amsterdam-switch__input:focus+label{outline:auto}.amsterdam-switch__input:focus:not(:focus-visible)+label{outline:0}.amsterdam-switch__label{background-color:var(--amsterdam-switch-background-color);border-radius:calc(var(--amsterdam-switch-thumb-width)*2);cursor:pointer;display:inline-block;outline-offset:var(--amsterdam-switch-outline-offset);padding-block:1px;padding-inline:1px;transition:background-color .2s ease-in-out;width:var(--amsterdam-switch-width);box-sizing:border-box}.amsterdam-switch__label::before{background-color:var(--amsterdam-switch-thumb-background-color);border-radius:50%;content:"";display:block;height:var(--amsterdam-switch-thumb-height);transition-duration:.1s;transition-property:box-shadow,transform;transition-timing-function:ease-in-out;width:var(--amsterdam-switch-thumb-width)}.amsterdam-switch__input:checked+.amsterdam-switch__label{background-color:var(--amsterdam-switch-checked-background-color)}.amsterdam-switch__input:disabled+.amsterdam-switch__label{background-color:var(--amsterdam-switch-disabled-background-color);cursor:not-allowed}.amsterdam-switch__input:checked+.amsterdam-switch__label::before{transform:translate(calc(var(--amsterdam-switch-width) - var(--amsterdam-switch-thumb-width) - 2px))}.amsterdam-switch:hover .amsterdam-switch__input:enabled+.amsterdam-switch__label::before{box-shadow:0 0 0 2px var(--amsterdam-switch-thumb-hover-color)}/*# sourceMappingURL=switch.css.map */
1
+ .ams-switch__input{appearance:none;margin-block:0;margin-inline:0;opacity:0%}.ams-switch__input:focus+label{outline:auto}.ams-switch__input:focus:not(:focus-visible)+label{outline:0}.ams-switch__label{background-color:var(--ams-switch-background-color);border-radius:calc(var(--ams-switch-thumb-width)*2);cursor:pointer;display:inline-block;outline-offset:var(--ams-switch-outline-offset);padding-block:1px;padding-inline:1px;transition:background-color .2s ease-in-out;width:var(--ams-switch-width);box-sizing:border-box}.ams-switch__label::before{background-color:var(--ams-switch-thumb-background-color);border-radius:50%;content:"";display:block;height:var(--ams-switch-thumb-height);transition-duration:.1s;transition-property:box-shadow,transform;transition-timing-function:ease-in-out;width:var(--ams-switch-thumb-width)}.ams-switch__input:checked+.ams-switch__label{background-color:var(--ams-switch-checked-background-color)}.ams-switch__input:disabled+.ams-switch__label{background-color:var(--ams-switch-disabled-background-color);cursor:not-allowed}.ams-switch__input:checked+.ams-switch__label::before{transform:translate(calc(var(--ams-switch-width) - var(--ams-switch-thumb-width) - 2px))}.ams-switch:hover .ams-switch__input:enabled+.ams-switch__label::before{box-shadow:0 0 0 2px var(--ams-switch-thumb-hover-color)}/*# sourceMappingURL=switch.css.map */
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../src/components/switch/switch.scss","../../src/common/hide-input.scss","../../src/common/input-label-focus.scss"],"names":[],"mappings":"AAYA,yBCNE,gBACA,eACA,gBACA,WCIA,qCACE,aAGF,yDACE,UFDJ,yBACE,0DACA,0DACA,eACA,qBACA,sDACA,kBACA,mBACA,4CACA,oCAjBA,sBAsBF,iCACE,gEACA,kBACA,WACA,cACA,4CACA,wBACA,yCACA,uCACA,0CAGF,0DACE,kEAGF,2DACE,mEACA,mBAGF,kEAEE,qGAGF,0FACE","file":"switch.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../src/components/switch/switch.scss","../../src/common/hide-input.scss","../../src/common/input-label-focus.scss"],"names":[],"mappings":"AAYA,mBCNE,gBACA,eACA,gBACA,WCIA,+BACE,aAGF,mDACE,UFDJ,mBACE,oDACA,oDACA,eACA,qBACA,gDACA,kBACA,mBACA,4CACA,8BAjBA,sBAsBF,2BACE,0DACA,kBACA,WACA,cACA,sCACA,wBACA,yCACA,uCACA,oCAGF,8CACE,4DAGF,+CACE,6DACA,mBAGF,sDAEE,yFAGF,wEACE","file":"switch.css"}
@@ -1 +1 @@
1
- .amsterdam-table{overflow-x:auto}.amsterdam-table__table{border-spacing:0;break-inside:avoid;color:var(--amsterdam-table-color);font-family:var(--amsterdam-table-font-family);font-size:var(--amsterdam-table-font-size);font-weight:var(--amsterdam-table-font-weight);line-height:var(--amsterdam-table-line-height)}.amsterdam-table__caption{font-weight:var(--amsterdam-table-caption-font-weight);text-align:start}.amsterdam-table__cell,.amsterdam-table__header-cell{border-bottom:var(--amsterdam-table-cell-border-bottom);padding-block:var(--amsterdam-table-cell-padding-block);padding-inline:var(--amsterdam-table-cell-padding-inline);text-align:start;vertical-align:top}.amsterdam-table__header-cell{font-weight:var(--amsterdam-table-header-cell-font-weight)}/*# sourceMappingURL=table.css.map */
1
+ .ams-table{overflow-x:auto}.ams-table__table{border-spacing:0;break-inside:avoid;color:var(--ams-table-color);font-family:var(--ams-table-font-family);font-size:var(--ams-table-font-size);font-weight:var(--ams-table-font-weight);line-height:var(--ams-table-line-height)}.ams-table__caption{font-weight:var(--ams-table-caption-font-weight);text-align:start}.ams-table__cell,.ams-table__header-cell{border-bottom:var(--ams-table-cell-border-bottom);padding-block:var(--ams-table-cell-padding-block);padding-inline:var(--ams-table-cell-padding-inline);text-align:start;vertical-align:top}.ams-table__header-cell{font-weight:var(--ams-table-header-cell-font-weight)}/*# sourceMappingURL=table.css.map */
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../src/components/table/table.scss"],"names":[],"mappings":"AAKA,iBACE,gBAGF,wBACE,iBACA,mBACA,mCACA,+CACA,2CACA,+CACA,+CAGF,0BACE,uDACA,iBAGF,qDAEE,wDACA,wDACA,0DACA,iBACA,mBAGF,8BACE","file":"table.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../src/components/table/table.scss"],"names":[],"mappings":"AAKA,WACE,gBAGF,kBACE,iBACA,mBACA,6BACA,yCACA,qCACA,yCACA,yCAGF,oBACE,iDACA,iBAGF,yCAEE,kDACA,kDACA,oDACA,iBACA,mBAGF,wBACE","file":"table.css"}
@@ -1 +1 @@
1
- .amsterdam-tabs__list{border-bottom:var(--amsterdam-tabs-list-border-bottom);display:flex;overflow-x:auto}.amsterdam-tabs__button{background-color:var(--amsterdam-tabs-button-background-color);border:var(--amsterdam-tabs-button-border);color:var(--amsterdam-tabs-button-color);cursor:var(--amsterdam-tabs-button-cursor);font-family:var(--amsterdam-tabs-button-font-family);font-size:var(--amsterdam-tabs-button-font-size);font-weight:var(--amsterdam-tabs-button-font-weight);line-height:var(--amsterdam-tabs-button-line-height);outline-offset:var(--amsterdam-tabs-button-outline-offset);padding-block:var(--amsterdam-tabs-button-padding-block);padding-inline:var(--amsterdam-tabs-button-padding-inline)}.amsterdam-tabs__button:disabled{color:var(--amsterdam-tabs-button-disabled-color);cursor:var(--amsterdam-tab-button-disabled-cursor)}.amsterdam-tabs__button:hover:not([aria-selected=true],[disabled]){box-shadow:var(--amsterdam-tabs-button-hover-box-shadow);color:var(--amsterdam-tabs-button-hover-color)}.amsterdam-tabs__button[aria-selected=true]{background-color:var(--amsterdam-tabs-button-selected-background-color);color:var(--amsterdam-tabs-button-selected-color)}/*# sourceMappingURL=tabs.css.map */
1
+ .ams-tabs__list{border-bottom:var(--ams-tabs-list-border-bottom);display:flex;overflow-x:auto}.ams-tabs__button{background-color:var(--ams-tabs-button-background-color);border:var(--ams-tabs-button-border);color:var(--ams-tabs-button-color);cursor:var(--ams-tabs-button-cursor);font-family:var(--ams-tabs-button-font-family);font-size:var(--ams-tabs-button-font-size);font-weight:var(--ams-tabs-button-font-weight);line-height:var(--ams-tabs-button-line-height);outline-offset:var(--ams-tabs-button-outline-offset);padding-block:var(--ams-tabs-button-padding-block);padding-inline:var(--ams-tabs-button-padding-inline)}.ams-tabs__button:disabled{color:var(--ams-tabs-button-disabled-color);cursor:var(--ams-tab-button-disabled-cursor)}.ams-tabs__button:hover:not([aria-selected=true],[disabled]){box-shadow:var(--ams-tabs-button-hover-box-shadow);color:var(--ams-tabs-button-hover-color)}.ams-tabs__button[aria-selected=true]{background-color:var(--ams-tabs-button-selected-background-color);color:var(--ams-tabs-button-selected-color)}/*# sourceMappingURL=tabs.css.map */
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../src/components/tabs/tabs.scss"],"names":[],"mappings":"AAOA,sBACE,uDACA,aACA,gBAGF,wBACE,+DACA,2CACA,yCACA,2CACA,qDACA,iDACA,qDACA,qDACA,2DACA,yDACA,2DAEA,iCACE,kDACA,mDAGF,mEACE,yDACA,+CAGF,4CACE,wEACA","file":"tabs.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../src/components/tabs/tabs.scss"],"names":[],"mappings":"AAOA,gBACE,iDACA,aACA,gBAGF,kBACE,yDACA,qCACA,mCACA,qCACA,+CACA,2CACA,+CACA,+CACA,qDACA,mDACA,qDAEA,2BACE,4CACA,6CAGF,6DACE,mDACA,yCAGF,sCACE,kEACA","file":"tabs.css"}
@@ -1 +1 @@
1
- .amsterdam-text-area{border:none;box-shadow:var(--amsterdam-text-area-box-shadow);color:var(--amsterdam-text-area-color);font-family:var(--amsterdam-text-area-font-family);font-size:var(--amsterdam-text-area-font-size);font-weight:var(--amsterdam-text-area-font-weight);line-height:var(--amsterdam-text-area-line-height);max-width:100%;min-height:var(--amsterdam-text-area-min-height);outline-offset:var(--amsterdam-text-area-outline-offset);padding-block:var(--amsterdam-text-area-padding-block);padding-inline:var(--amsterdam-text-area-padding-inline);touch-action:manipulation;width:100%;box-sizing:border-box;margin-block:0;-webkit-text-size-adjust:100%}.amsterdam-text-area:hover{box-shadow:var(--amsterdam-text-area-hover-box-shadow)}.amsterdam-text-area::placeholder{color:var(--amsterdam-text-area-placeholder-color)}.amsterdam-text-area:disabled{background-color:var(--amsterdam-text-area-disabled-background-color);box-shadow:var(--amsterdam-text-area-disabled-box-shadow);color:var(--amsterdam-text-area-disabled-color);cursor:var(--amsterdam-text-area-disabled-cursor)}.amsterdam-text-area:invalid,.amsterdam-text-area[aria-invalid=true]{box-shadow:var(--amsterdam-text-area-invalid-box-shadow)}.amsterdam-text-area:invalid:hover,.amsterdam-text-area[aria-invalid=true]:hover{box-shadow:var(--amsterdam-text-area-invalid-hover-box-shadow)}.amsterdam-text-area--resize-none{resize:none}.amsterdam-text-area--resize-horizontal{resize:inline}.amsterdam-text-area--resize-vertical{resize:block}.amsterdam-text-area--cols{width:auto}/*# sourceMappingURL=text-area.css.map */
1
+ .ams-text-area{border:none;box-shadow:var(--ams-text-area-box-shadow);color:var(--ams-text-area-color);font-family:var(--ams-text-area-font-family);font-size:var(--ams-text-area-font-size);font-weight:var(--ams-text-area-font-weight);line-height:var(--ams-text-area-line-height);max-width:100%;min-height:var(--ams-text-area-min-height);outline-offset:var(--ams-text-area-outline-offset);padding-block:var(--ams-text-area-padding-block);padding-inline:var(--ams-text-area-padding-inline);touch-action:manipulation;width:100%;box-sizing:border-box;margin-block:0;-webkit-text-size-adjust:100%}.ams-text-area:hover{box-shadow:var(--ams-text-area-hover-box-shadow)}.ams-text-area::placeholder{color:var(--ams-text-area-placeholder-color)}.ams-text-area:disabled{background-color:var(--ams-text-area-disabled-background-color);box-shadow:var(--ams-text-area-disabled-box-shadow);color:var(--ams-text-area-disabled-color);cursor:var(--ams-text-area-disabled-cursor)}.ams-text-area:invalid,.ams-text-area[aria-invalid=true]{box-shadow:var(--ams-text-area-invalid-box-shadow)}.ams-text-area:invalid:hover,.ams-text-area[aria-invalid=true]:hover{box-shadow:var(--ams-text-area-invalid-hover-box-shadow)}.ams-text-area--resize-none{resize:none}.ams-text-area--resize-horizontal{resize:inline}.ams-text-area--resize-vertical{resize:block}.ams-text-area--cols{width:auto}/*# sourceMappingURL=text-area.css.map */
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../src/components/text-area/text-area.scss"],"names":[],"mappings":"AAWA,qBACE,YACA,iDACA,uCACA,mDACA,+CACA,mDACA,mDACA,eACA,iDACA,yDACA,uDACA,yDACA,0BACA,WAnBA,sBACA,eACA,8BAqBA,2BACE,uDAIJ,kCACE,mDAGF,8BACE,sEACA,0DACA,gDACA,kDAGF,qEAEE,yDAEA,iFAEE,+DAIJ,kCACE,YAGF,wCACE,cAGF,sCACE,aAGF,2BACE","file":"text-area.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../src/components/text-area/text-area.scss"],"names":[],"mappings":"AAWA,eACE,YACA,2CACA,iCACA,6CACA,yCACA,6CACA,6CACA,eACA,2CACA,mDACA,iDACA,mDACA,0BACA,WAnBA,sBACA,eACA,8BAqBA,qBACE,iDAIJ,4BACE,6CAGF,wBACE,gEACA,oDACA,0CACA,4CAGF,yDAEE,mDAEA,qEAEE,yDAIJ,4BACE,YAGF,kCACE,cAGF,gCACE,aAGF,qBACE","file":"text-area.css"}
@@ -1 +1 @@
1
- .amsterdam-text-input{border:none;box-shadow:var(--amsterdam-text-input-box-shadow);color:var(--amsterdam-text-input-color);font-family:var(--amsterdam-text-input-font-family);font-size:var(--amsterdam-text-input-font-size);font-weight:var(--amsterdam-text-input-font-weight);line-height:var(--amsterdam-text-input-line-height);outline-offset:var(--amsterdam-text-input-outline-offset);padding-block:var(--amsterdam-text-input-padding-block);padding-inline:var(--amsterdam-text-input-padding-inline);touch-action:manipulation;width:100%;box-sizing:border-box;margin-block:0;-webkit-text-size-adjust:100%}.amsterdam-text-input:hover{box-shadow:var(--amsterdam-text-input-hover-box-shadow)}.amsterdam-text-input::placeholder{color:var(--amsterdam-text-input-placeholder-color)}.amsterdam-text-input:disabled{background-color:var(--amsterdam-text-input-disabled-background-color);box-shadow:var(--amsterdam-text-input-disabled-box-shadow);color:var(--amsterdam-text-input-disabled-color);cursor:not-allowed}.amsterdam-text-input:invalid,.amsterdam-text-input[aria-invalid=true]{box-shadow:var(--amsterdam-text-input-invalid-box-shadow)}.amsterdam-text-input:invalid:hover,.amsterdam-text-input[aria-invalid=true]:hover{box-shadow:var(--amsterdam-text-input-invalid-hover-box-shadow)}/*# sourceMappingURL=text-input.css.map */
1
+ .ams-text-input{border:none;box-shadow:var(--ams-text-input-box-shadow);color:var(--ams-text-input-color);font-family:var(--ams-text-input-font-family);font-size:var(--ams-text-input-font-size);font-weight:var(--ams-text-input-font-weight);line-height:var(--ams-text-input-line-height);outline-offset:var(--ams-text-input-outline-offset);padding-block:var(--ams-text-input-padding-block);padding-inline:var(--ams-text-input-padding-inline);touch-action:manipulation;width:100%;box-sizing:border-box;margin-block:0;-webkit-text-size-adjust:100%}.ams-text-input:hover{box-shadow:var(--ams-text-input-hover-box-shadow)}.ams-text-input::placeholder{color:var(--ams-text-input-placeholder-color)}.ams-text-input:disabled{background-color:var(--ams-text-input-disabled-background-color);box-shadow:var(--ams-text-input-disabled-box-shadow);color:var(--ams-text-input-disabled-color);cursor:not-allowed}.ams-text-input:invalid,.ams-text-input[aria-invalid=true]{box-shadow:var(--ams-text-input-invalid-box-shadow)}.ams-text-input:invalid:hover,.ams-text-input[aria-invalid=true]:hover{box-shadow:var(--ams-text-input-invalid-hover-box-shadow)}/*# sourceMappingURL=text-input.css.map */
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../src/components/text-input/text-input.scss"],"names":[],"mappings":"AAWA,sBACE,YACA,kDACA,wCACA,oDACA,gDACA,oDACA,oDACA,0DACA,wDACA,0DACA,0BACA,WAjBA,sBACA,eACA,8BAmBA,4BACE,wDAIJ,mCACE,oDAGF,+BACE,uEACA,2DACA,iDACA,mBAGF,uEAEE,0DAEA,mFAEE","file":"text-input.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../src/components/text-input/text-input.scss"],"names":[],"mappings":"AAWA,gBACE,YACA,4CACA,kCACA,8CACA,0CACA,8CACA,8CACA,oDACA,kDACA,oDACA,0BACA,WAjBA,sBACA,eACA,8BAmBA,sBACE,kDAIJ,6BACE,8CAGF,yBACE,iEACA,qDACA,2CACA,mBAGF,2DAEE,oDAEA,uEAEE","file":"text-input.css"}
@@ -1 +1 @@
1
- .amsterdam-top-task-link{break-inside:avoid;display:flex;flex-direction:column;gap:.5rem;outline-offset:var(--amsterdam-top-task-link-outline-offset);text-decoration:none}.amsterdam-top-task-link__label{color:var(--amsterdam-top-task-link-label-color);font-family:var(--amsterdam-top-task-link-label-font-family);font-size:var(--amsterdam-top-task-link-label-font-size);font-weight:var(--amsterdam-top-task-link-label-font-weight);line-height:var(--amsterdam-top-task-link-label-line-height);text-decoration-line:var(--amsterdam-top-task-link-label-text-decoration-line);text-decoration-thickness:var(--amsterdam-top-task-link-label-text-decoration-thickness);text-underline-offset:var(--amsterdam-top-task-link-label-text-underline-offset);hyphenate-limit-chars:var(--amsterdam-hyphenation-hyphenate-limit-chars);hyphens:var(--amsterdam-hyphenation-hyphens);overflow-wrap:var(--amsterdam-hyphenation-overflow-wrap);box-sizing:border-box;-webkit-text-size-adjust:100%}.amsterdam-top-task-link:hover .amsterdam-top-task-link__label{color:var(--amsterdam-top-task-link-label-hover-color);text-decoration-line:var(--amsterdam-top-task-link-label-hover-text-decoration-line)}.amsterdam-top-task-link__description{color:var(--amsterdam-top-task-link-description-color);font-family:var(--amsterdam-top-task-link-description-font-family);font-size:var(--amsterdam-top-task-link-description-font-size);font-weight:var(--amsterdam-top-task-link-description-font-weight);line-height:var(--amsterdam-top-task-link-description-line-height);box-sizing:border-box;-webkit-text-size-adjust:100%}/*# sourceMappingURL=top-task-link.css.map */
1
+ .ams-top-task-link{break-inside:avoid;display:flex;flex-direction:column;gap:.5rem;outline-offset:var(--ams-top-task-link-outline-offset);text-decoration:none}.ams-top-task-link__label{color:var(--ams-top-task-link-label-color);font-family:var(--ams-top-task-link-label-font-family);font-size:var(--ams-top-task-link-label-font-size);font-weight:var(--ams-top-task-link-label-font-weight);line-height:var(--ams-top-task-link-label-line-height);text-decoration-line:var(--ams-top-task-link-label-text-decoration-line);text-decoration-thickness:var(--ams-top-task-link-label-text-decoration-thickness);text-underline-offset:var(--ams-top-task-link-label-text-underline-offset);hyphenate-limit-chars:var(--ams-hyphenation-hyphenate-limit-chars);hyphens:var(--ams-hyphenation-hyphens);overflow-wrap:var(--ams-hyphenation-overflow-wrap);box-sizing:border-box;-webkit-text-size-adjust:100%}.ams-top-task-link:hover .ams-top-task-link__label{color:var(--ams-top-task-link-label-hover-color);text-decoration-line:var(--ams-top-task-link-label-hover-text-decoration-line)}.ams-top-task-link__description{color:var(--ams-top-task-link-description-color);font-family:var(--ams-top-task-link-description-font-family);font-size:var(--ams-top-task-link-description-font-size);font-weight:var(--ams-top-task-link-description-font-weight);line-height:var(--ams-top-task-link-description-line-height);box-sizing:border-box;-webkit-text-size-adjust:100%}/*# sourceMappingURL=top-task-link.css.map */
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../src/components/top-task-link/top-task-link.scss","../../src/common/hyphenation.scss"],"names":[],"mappings":"AAOA,yBACE,mBACA,aACA,sBACA,UACA,6DACA,qBAQF,gCACE,iDACA,6DACA,yDACA,6DACA,6DACA,+EACA,yFACA,iFCvBA,yEACA,6CACA,yDDSA,sBACA,8BAiBF,+DACE,uDACA,qFAGF,sCACE,uDACA,mEACA,+DACA,mEACA,mEA5BA,sBACA","file":"top-task-link.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../src/components/top-task-link/top-task-link.scss","../../src/common/hyphenation.scss"],"names":[],"mappings":"AAOA,mBACE,mBACA,aACA,sBACA,UACA,uDACA,qBAQF,0BACE,2CACA,uDACA,mDACA,uDACA,uDACA,yEACA,mFACA,2ECvBA,mEACA,uCACA,mDDSA,sBACA,8BAiBF,mDACE,iDACA,+EAGF,gCACE,iDACA,6DACA,yDACA,6DACA,6DA5BA,sBACA","file":"top-task-link.css"}
@@ -1 +1 @@
1
- .amsterdam-unordered-list{box-sizing:border-box;list-style:none;margin-block:0;padding-inline-start:0;-webkit-text-size-adjust:100%;display:grid;gap:var(--amsterdam-unordered-list-gap)}.amsterdam-unordered-list:not(.amsterdam-unordered-list--no-markers){color:var(--amsterdam-unordered-list-color);font-family:var(--amsterdam-unordered-list-font-family);font-size:var(--amsterdam-unordered-list-font-size);font-weight:var(--amsterdam-unordered-list-font-weight);line-height:var(--amsterdam-unordered-list-line-height);list-style-type:var(--amsterdam-unordered-list-list-style-type)}.amsterdam-unordered-list:not(.amsterdam-unordered-list--no-markers) .amsterdam-unordered-list__item{margin-inline-start:var(--amsterdam-unordered-list-item-margin-inline-start);padding-inline-start:var(--amsterdam-unordered-list-item-padding-inline-start)}.amsterdam-unordered-list--inverse-color:not(.amsterdam-unordered-list--no-markers){color:var(--amsterdam-unordered-list-inverse-color)}:is(.amsterdam-ordered-list,.amsterdam-unordered-list) .amsterdam-unordered-list{list-style-type:var(--amsterdam-unordered-list-unordered-list-list-style-type)}:is(.amsterdam-ordered-list,.amsterdam-unordered-list) .amsterdam-unordered-list .amsterdam-unordered-list__item{margin-inline-start:var(--amsterdam-unordered-list-unordered-list-item-margin-inline-start);padding-inline-start:var(--amsterdam-unordered-list-unordered-list-item-padding-inline-start)}/*# sourceMappingURL=unordered-list.css.map */
1
+ .ams-unordered-list{box-sizing:border-box;list-style:none;margin-block:0;padding-inline-start:0;-webkit-text-size-adjust:100%;display:grid;gap:var(--ams-unordered-list-gap)}.ams-unordered-list:not(.ams-unordered-list--no-markers){color:var(--ams-unordered-list-color);font-family:var(--ams-unordered-list-font-family);font-size:var(--ams-unordered-list-font-size);font-weight:var(--ams-unordered-list-font-weight);line-height:var(--ams-unordered-list-line-height);list-style-type:var(--ams-unordered-list-list-style-type)}.ams-unordered-list:not(.ams-unordered-list--no-markers) .ams-unordered-list__item{margin-inline-start:var(--ams-unordered-list-item-margin-inline-start);padding-inline-start:var(--ams-unordered-list-item-padding-inline-start)}.ams-unordered-list--inverse-color:not(.ams-unordered-list--no-markers){color:var(--ams-unordered-list-inverse-color)}:is(.ams-ordered-list,.ams-unordered-list) .ams-unordered-list{list-style-type:var(--ams-unordered-list-unordered-list-list-style-type)}:is(.ams-ordered-list,.ams-unordered-list) .ams-unordered-list .ams-unordered-list__item{margin-inline-start:var(--ams-unordered-list-unordered-list-item-margin-inline-start);padding-inline-start:var(--ams-unordered-list-unordered-list-item-padding-inline-start)}/*# sourceMappingURL=unordered-list.css.map */
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../src/components/unordered-list/unordered-list.scss"],"names":[],"mappings":"AAeA,0BARE,sBACA,gBACA,eACA,uBACA,8BAOA,aACA,wCAIF,qEACE,4CACA,wDACA,oDACA,wDACA,wDACA,gEAGA,qGACE,6EACA,+EAIJ,oFACE,oDAIF,iFACE,+EAEA,iHACE,4FACA","file":"unordered-list.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../src/components/unordered-list/unordered-list.scss"],"names":[],"mappings":"AAeA,oBARE,sBACA,gBACA,eACA,uBACA,8BAOA,aACA,kCAIF,yDACE,sCACA,kDACA,8CACA,kDACA,kDACA,0DAGA,mFACE,uEACA,yEAIJ,wEACE,8CAIF,+DACE,yEAEA,yFACE,sFACA","file":"unordered-list.css"}
@@ -1 +1 @@
1
- .amsterdam-visually-hidden:not(:active,:focus){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}/*# sourceMappingURL=visually-hidden.css.map */
1
+ .ams-visually-hidden:not(:active,:focus){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}/*# sourceMappingURL=visually-hidden.css.map */
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../src/components/visually-hidden/visually-hidden.scss"],"names":[],"mappings":"AAMA,+CACE,mBACA,qBACA,WACA,gBACA,kBACA,mBACA","file":"visually-hidden.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../src/components/visually-hidden/visually-hidden.scss"],"names":[],"mappings":"AAMA,yCACE,mBACA,qBACA,WACA,gBACA,kBACA,mBACA","file":"visually-hidden.css"}
@@ -11,7 +11,7 @@ This link receives an underline when the user’s pointer hovers over it.
11
11
  Still, we define its thickness and offset for the initial state.
12
12
 
13
13
  ```css
14
- .amsterdam-link {
14
+ .ams-link {
15
15
  text-decoration: none;
16
16
  text-decoration-thickness: 2px;
17
17
  text-underline-offset: 3px;
@@ -25,7 +25,7 @@ Still, we define its thickness and offset for the initial state.
25
25
  ### Do not do this
26
26
 
27
27
  ```css
28
- .amsterdam-link {
28
+ .ams-link {
29
29
  text-decoration: none;
30
30
 
31
31
  &:hover {
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "0.6.0",
2
+ "version": "0.7.0",
3
3
  "author": "Community for NL Design System",
4
4
  "description": "CSS files for components for the City of Amsterdam based on the NL Design System architecture",
5
5
  "license": "EUPL-1.2",
@@ -15,7 +15,7 @@
15
15
  },
16
16
  "devDependencies": {
17
17
  "sass": "1.71.1",
18
- "@amsterdam/design-system-tokens": "0.6.0"
18
+ "@amsterdam/design-system-tokens": "0.7.0"
19
19
  },
20
20
  "dependencies": {
21
21
  "@utrecht/components": "3.0.0"
@@ -9,7 +9,7 @@
9
9
  */
10
10
 
11
11
  /** The breakpoint at which medium screens start. */
12
- $amsterdam-breakpoint-medium: 36rem;
12
+ $ams-breakpoint-medium: 36rem;
13
13
 
14
14
  /** The breakpoint at which wide screens start. */
15
- $amsterdam-breakpoint-wide: 68rem;
15
+ $ams-breakpoint-wide: 68rem;
@@ -4,7 +4,7 @@
4
4
  */
5
5
 
6
6
  @mixin hyphenation {
7
- hyphenate-limit-chars: var(--amsterdam-hyphenation-hyphenate-limit-chars);
8
- hyphens: var(--amsterdam-hyphenation-hyphens);
9
- overflow-wrap: var(--amsterdam-hyphenation-overflow-wrap);
7
+ hyphenate-limit-chars: var(--ams-hyphenation-hyphenate-limit-chars);
8
+ hyphens: var(--ams-hyphenation-hyphens);
9
+ overflow-wrap: var(--ams-hyphenation-overflow-wrap);
10
10
  }
@@ -4,7 +4,7 @@
4
4
  */
5
5
 
6
6
  /** The set of available options for sizing. */
7
- $amsterdam-sizes: (
7
+ $ams-sizes: (
8
8
  "xs": "extra-small",
9
9
  "sm": "small",
10
10
  "md": "medium",
@@ -3,7 +3,7 @@
3
3
  * Copyright Gemeente Amsterdam
4
4
  */
5
5
 
6
- .amsterdam-accordion__header {
6
+ .ams-accordion__header {
7
7
  display: flex;
8
8
  margin-block: 0;
9
9
  margin-inline: 0;
@@ -13,27 +13,27 @@
13
13
  -webkit-text-size-adjust: 100%;
14
14
  }
15
15
 
16
- .amsterdam-accordion__button {
16
+ .ams-accordion__button {
17
17
  background-color: transparent;
18
18
  border: 0;
19
- color: var(--amsterdam-accordion-button-color);
19
+ color: var(--ams-accordion-button-color);
20
20
  cursor: pointer;
21
21
  display: flex;
22
- font-family: var(--amsterdam-accordion-button-font-family);
23
- font-size: var(--amsterdam-accordion-button-font-size);
24
- font-weight: var(--amsterdam-accordion-button-font-weight);
22
+ font-family: var(--ams-accordion-button-font-family);
23
+ font-size: var(--ams-accordion-button-font-size);
24
+ font-weight: var(--ams-accordion-button-font-weight);
25
25
  justify-content: space-between;
26
- line-height: var(--amsterdam-accordion-button-line-height);
27
- padding-block: var(--amsterdam-accordion-button-padding-block);
28
- padding-inline: var(--amsterdam-accordion-button-padding-inline);
26
+ line-height: var(--ams-accordion-button-line-height);
27
+ padding-block: var(--ams-accordion-button-padding-block);
28
+ padding-inline: var(--ams-accordion-button-padding-inline);
29
29
  width: 100%;
30
30
 
31
31
  &:focus {
32
- outline-offset: var(--amsterdam-accordion-button-focus-outline-offset);
32
+ outline-offset: var(--ams-accordion-button-focus-outline-offset);
33
33
  }
34
34
 
35
35
  &:hover {
36
- box-shadow: var(--amsterdam-accordion-button-hover-box-shadow);
36
+ box-shadow: var(--ams-accordion-button-hover-box-shadow);
37
37
  }
38
38
 
39
39
  svg {
@@ -48,16 +48,16 @@
48
48
  @include reset;
49
49
  }
50
50
 
51
- .amsterdam-accordion__button[aria-expanded="true"] svg {
51
+ .ams-accordion__button[aria-expanded="true"] svg {
52
52
  transform: rotate(180deg);
53
53
  }
54
54
 
55
- .amsterdam-accordion__panel {
55
+ .ams-accordion__panel {
56
56
  display: none;
57
- padding-block: var(--amsterdam-accordion-panel-padding-block);
58
- padding-inline: var(--amsterdam-accordion-panel-padding-inline);
57
+ padding-block: var(--ams-accordion-panel-padding-block);
58
+ padding-inline: var(--ams-accordion-panel-padding-inline);
59
59
  }
60
60
 
61
- .amsterdam-accordion__panel--expanded {
61
+ .ams-accordion__panel--expanded {
62
62
  display: block;
63
63
  }
@@ -3,34 +3,34 @@
3
3
  * Copyright Gemeente Amsterdam
4
4
  */
5
5
 
6
- .amsterdam-alert {
6
+ .ams-alert {
7
7
  align-items: flex-start;
8
- border-style: var(--amsterdam-alert-border-style);
9
- border-width: var(--amsterdam-alert-border-width);
8
+ border-style: var(--ams-alert-border-style);
9
+ border-width: var(--ams-alert-border-width);
10
10
  display: flex;
11
11
  flex-direction: row;
12
- gap: var(--amsterdam-alert-gap);
12
+ gap: var(--ams-alert-gap);
13
13
  justify-content: space-between;
14
- padding-block: var(--amsterdam-alert-padding-block);
15
- padding-inline: var(--amsterdam-alert-padding-inline);
14
+ padding-block: var(--ams-alert-padding-block);
15
+ padding-inline: var(--ams-alert-padding-inline);
16
16
  }
17
17
 
18
- .amsterdam-alert__content {
18
+ .ams-alert__content {
19
19
  flex: auto;
20
20
  }
21
21
 
22
- .amsterdam-alert--error {
23
- border-color: var(--amsterdam-alert-error-border-color);
22
+ .ams-alert--error {
23
+ border-color: var(--ams-alert-error-border-color);
24
24
  }
25
25
 
26
- .amsterdam-alert--info {
27
- border-color: var(--amsterdam-alert-info-border-color);
26
+ .ams-alert--info {
27
+ border-color: var(--ams-alert-info-border-color);
28
28
  }
29
29
 
30
- .amsterdam-alert--success {
31
- border-color: var(--amsterdam-alert-success-border-color);
30
+ .ams-alert--success {
31
+ border-color: var(--ams-alert-success-border-color);
32
32
  }
33
33
 
34
- .amsterdam-alert--warning {
35
- border-color: var(--amsterdam-alert-warning-border-color);
34
+ .ams-alert--warning {
35
+ border-color: var(--ams-alert-warning-border-color);
36
36
  }
@@ -3,31 +3,31 @@
3
3
  * Copyright Gemeente Amsterdam
4
4
  */
5
5
 
6
- .amsterdam-aspect-ratio {
6
+ .ams-aspect-ratio {
7
7
  overflow: hidden;
8
8
  position: relative;
9
9
  }
10
10
 
11
- .amsterdam-aspect-ratio--x-tall {
12
- aspect-ratio: var(--amsterdam-aspect-ratio-x-tall);
11
+ .ams-aspect-ratio--x-tall {
12
+ aspect-ratio: var(--ams-aspect-ratio-x-tall);
13
13
  }
14
14
 
15
- .amsterdam-aspect-ratio--tall {
16
- aspect-ratio: var(--amsterdam-aspect-ratio-tall);
15
+ .ams-aspect-ratio--tall {
16
+ aspect-ratio: var(--ams-aspect-ratio-tall);
17
17
  }
18
18
 
19
- .amsterdam-aspect-ratio--square {
20
- aspect-ratio: var(--amsterdam-aspect-ratio-square);
19
+ .ams-aspect-ratio--square {
20
+ aspect-ratio: var(--ams-aspect-ratio-square);
21
21
  }
22
22
 
23
- .amsterdam-aspect-ratio--wide {
24
- aspect-ratio: var(--amsterdam-aspect-ratio-wide);
23
+ .ams-aspect-ratio--wide {
24
+ aspect-ratio: var(--ams-aspect-ratio-wide);
25
25
  }
26
26
 
27
- .amsterdam-aspect-ratio--x-wide {
28
- aspect-ratio: var(--amsterdam-aspect-ratio-x-wide);
27
+ .ams-aspect-ratio--x-wide {
28
+ aspect-ratio: var(--ams-aspect-ratio-x-wide);
29
29
  }
30
30
 
31
- .amsterdam-aspect-ratio--2x-wide {
32
- aspect-ratio: var(--amsterdam-aspect-ratio-2x-wide);
31
+ .ams-aspect-ratio--2x-wide {
32
+ aspect-ratio: var(--ams-aspect-ratio-2x-wide);
33
33
  }
@@ -3,51 +3,51 @@
3
3
  * Copyright Gemeente Amsterdam
4
4
  */
5
5
 
6
- .amsterdam-badge {
6
+ .ams-badge {
7
7
  display: inline-block;
8
- font-family: var(--amsterdam-badge-font-family);
9
- font-size: var(--amsterdam-badge-font-size);
10
- font-weight: var(--amsterdam-badge-font-weight);
11
- line-height: var(--amsterdam-badge-line-height);
12
- padding-inline: var(--amsterdam-badge-padding-inline);
8
+ font-family: var(--ams-badge-font-family);
9
+ font-size: var(--ams-badge-font-size);
10
+ font-weight: var(--ams-badge-font-weight);
11
+ line-height: var(--ams-badge-line-height);
12
+ padding-inline: var(--ams-badge-padding-inline);
13
13
  }
14
14
 
15
- .amsterdam-badge--blue {
16
- background-color: var(--amsterdam-badge-blue-background-color);
17
- color: var(--amsterdam-badge-blue-color);
15
+ .ams-badge--blue {
16
+ background-color: var(--ams-badge-blue-background-color);
17
+ color: var(--ams-badge-blue-color);
18
18
  }
19
19
 
20
- .amsterdam-badge--dark-blue {
21
- background-color: var(--amsterdam-badge-dark-blue-background-color);
22
- color: var(--amsterdam-badge-dark-blue-color);
20
+ .ams-badge--dark-blue {
21
+ background-color: var(--ams-badge-dark-blue-background-color);
22
+ color: var(--ams-badge-dark-blue-color);
23
23
  }
24
24
 
25
- .amsterdam-badge--dark-green {
26
- background-color: var(--amsterdam-badge-dark-green-background-color);
27
- color: var(--amsterdam-badge-dark-green-color);
25
+ .ams-badge--dark-green {
26
+ background-color: var(--ams-badge-dark-green-background-color);
27
+ color: var(--ams-badge-dark-green-color);
28
28
  }
29
29
 
30
- .amsterdam-badge--green {
31
- background-color: var(--amsterdam-badge-green-background-color);
32
- color: var(--amsterdam-badge-green-color);
30
+ .ams-badge--green {
31
+ background-color: var(--ams-badge-green-background-color);
32
+ color: var(--ams-badge-green-color);
33
33
  }
34
34
 
35
- .amsterdam-badge--magenta {
36
- background-color: var(--amsterdam-badge-magenta-background-color);
37
- color: var(--amsterdam-badge-magenta-color);
35
+ .ams-badge--magenta {
36
+ background-color: var(--ams-badge-magenta-background-color);
37
+ color: var(--ams-badge-magenta-color);
38
38
  }
39
39
 
40
- .amsterdam-badge--orange {
41
- background-color: var(--amsterdam-badge-orange-background-color);
42
- color: var(--amsterdam-badge-orange-color);
40
+ .ams-badge--orange {
41
+ background-color: var(--ams-badge-orange-background-color);
42
+ color: var(--ams-badge-orange-color);
43
43
  }
44
44
 
45
- .amsterdam-badge--purple {
46
- background-color: var(--amsterdam-badge-purple-background-color);
47
- color: var(--amsterdam-badge-purple-color);
45
+ .ams-badge--purple {
46
+ background-color: var(--ams-badge-purple-background-color);
47
+ color: var(--ams-badge-purple-color);
48
48
  }
49
49
 
50
- .amsterdam-badge--yellow {
51
- background-color: var(--amsterdam-badge-yellow-background-color);
52
- color: var(--amsterdam-badge-yellow-color);
50
+ .ams-badge--yellow {
51
+ background-color: var(--ams-badge-yellow-background-color);
52
+ color: var(--ams-badge-yellow-color);
53
53
  }
@@ -12,13 +12,13 @@
12
12
  -webkit-text-size-adjust: 100%;
13
13
  }
14
14
 
15
- .amsterdam-blockquote {
15
+ .ams-blockquote {
16
16
  break-inside: avoid;
17
- color: var(--amsterdam-blockquote-color);
18
- font-family: var(--amsterdam-blockquote-font-family);
19
- font-size: var(--amsterdam-blockquote-font-size);
20
- font-weight: var(--amsterdam-blockquote-font-weight);
21
- line-height: var(--amsterdam-blockquote-line-height);
17
+ color: var(--ams-blockquote-color);
18
+ font-family: var(--ams-blockquote-font-family);
19
+ font-size: var(--ams-blockquote-font-size);
20
+ font-weight: var(--ams-blockquote-font-weight);
21
+ line-height: var(--ams-blockquote-line-height);
22
22
  quotes: "“" "”";
23
23
 
24
24
  &::before {
@@ -33,6 +33,6 @@
33
33
  @include reset;
34
34
  }
35
35
 
36
- .amsterdam-blockquote--inverse-color {
37
- color: var(--amsterdam-blockquote-inverse-color);
36
+ .ams-blockquote--inverse-color {
37
+ color: var(--ams-blockquote-inverse-color);
38
38
  }
@@ -10,26 +10,26 @@
10
10
  -webkit-text-size-adjust: 100%;
11
11
  }
12
12
 
13
- .amsterdam-breadcrumb {
14
- font-family: var(--amsterdam-breadcrumb-font-family, inherit);
15
- font-size: var(--amsterdam-breadcrumb-font-size);
16
- font-weight: var(--amsterdam-breadcrumb-font-weight);
17
- line-height: var(--amsterdam-breadcrumb-line-height);
13
+ .ams-breadcrumb {
14
+ font-family: var(--ams-breadcrumb-font-family, inherit);
15
+ font-size: var(--ams-breadcrumb-font-size);
16
+ font-weight: var(--ams-breadcrumb-font-weight);
17
+ line-height: var(--ams-breadcrumb-line-height);
18
18
  }
19
19
 
20
- .amsterdam-breadcrumb__list {
20
+ .ams-breadcrumb__list {
21
21
  break-after: avoid;
22
22
  break-inside: avoid;
23
23
 
24
24
  @include reset;
25
25
  }
26
26
 
27
- .amsterdam-breadcrumb__item {
27
+ .ams-breadcrumb__item {
28
28
  display: inline;
29
29
  }
30
30
 
31
- .amsterdam-breadcrumb__item:not(:last-child)::after {
32
- background-image: var(--amsterdam-breadcrumb-separator-background-image);
31
+ .ams-breadcrumb__item:not(:last-child)::after {
32
+ background-image: var(--ams-breadcrumb-separator-background-image);
33
33
  background-repeat: no-repeat;
34
34
  content: "";
35
35
  display: inline-block;
@@ -38,15 +38,15 @@
38
38
  width: 1ex;
39
39
  }
40
40
 
41
- .amsterdam-breadcrumb__link {
42
- color: var(--amsterdam-breadcrumb-item-link-color);
43
- outline-offset: var(--amsterdam-breadcrumb-item-link-outline-offset);
44
- text-decoration-line: var(--amsterdam-breadcrumb-item-link-text-decoration-line);
45
- text-decoration-thickness: var(--amsterdam-breadcrumb-item-link-text-decoration-thickness);
46
- text-underline-offset: var(--amsterdam-breadcrumb-item-link-text-underline-offset);
41
+ .ams-breadcrumb__link {
42
+ color: var(--ams-breadcrumb-item-link-color);
43
+ outline-offset: var(--ams-breadcrumb-item-link-outline-offset);
44
+ text-decoration-line: var(--ams-breadcrumb-item-link-text-decoration-line);
45
+ text-decoration-thickness: var(--ams-breadcrumb-item-link-text-decoration-thickness);
46
+ text-underline-offset: var(--ams-breadcrumb-item-link-text-underline-offset);
47
47
 
48
48
  &:hover {
49
- color: var(--amsterdam-breadcrumb-item-link-hover-color);
50
- text-decoration-line: var(--amsterdam-breadcrumb-item-link-hover-text-decoration-line);
49
+ color: var(--ams-breadcrumb-item-link-hover-color);
50
+ text-decoration-line: var(--ams-breadcrumb-item-link-hover-text-decoration-line);
51
51
  }
52
52
  }