@amsterdam/design-system-css 0.3.0 → 0.5.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 (141) hide show
  1. package/CHANGELOG.md +38 -0
  2. package/LICENSE.md +1 -1
  3. package/LICENSE.txt +287 -0
  4. package/README.md +13 -1
  5. package/dist/accordion/accordion.css +1 -1
  6. package/dist/accordion/accordion.css.map +1 -1
  7. package/dist/alert/alert.css +1 -1
  8. package/dist/alert/alert.css.map +1 -1
  9. package/dist/badge/badge.css +1 -0
  10. package/dist/badge/badge.css.map +1 -0
  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/checkbox/checkbox.css +1 -1
  18. package/dist/checkbox/checkbox.css.map +1 -1
  19. package/dist/dialog/dialog.css +1 -1
  20. package/dist/dialog/dialog.css.map +1 -1
  21. package/dist/form-label/form-label.css +1 -1
  22. package/dist/form-label/form-label.css.map +1 -1
  23. package/dist/grid/grid.css +1 -1
  24. package/dist/grid/grid.css.map +1 -1
  25. package/dist/header/header.css +1 -1
  26. package/dist/header/header.css.map +1 -1
  27. package/dist/heading/heading.css +1 -1
  28. package/dist/heading/heading.css.map +1 -1
  29. package/dist/icon/icon.css +1 -1
  30. package/dist/icon/icon.css.map +1 -1
  31. package/dist/icon-button/icon-button.css +1 -0
  32. package/dist/icon-button/icon-button.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/link-list/link-list.css +1 -0
  38. package/dist/link-list/link-list.css.map +1 -0
  39. package/dist/mega-menu/mega-menu.css +1 -0
  40. package/dist/mega-menu/mega-menu.css.map +1 -0
  41. package/dist/ordered-list/ordered-list.css +1 -1
  42. package/dist/ordered-list/ordered-list.css.map +1 -1
  43. package/dist/page-heading/page-heading.css +1 -1
  44. package/dist/page-heading/page-heading.css.map +1 -1
  45. package/dist/page-menu/page-menu.css +1 -1
  46. package/dist/page-menu/page-menu.css.map +1 -1
  47. package/dist/pagination/pagination.css +1 -1
  48. package/dist/pagination/pagination.css.map +1 -1
  49. package/dist/paragraph/paragraph.css +1 -1
  50. package/dist/paragraph/paragraph.css.map +1 -1
  51. package/dist/search-field/search-field.css +1 -1
  52. package/dist/search-field/search-field.css.map +1 -1
  53. package/dist/skip-link/skip-link.css +1 -1
  54. package/dist/skip-link/skip-link.css.map +1 -1
  55. package/dist/spotlight/spotlight.css +1 -1
  56. package/dist/spotlight/spotlight.css.map +1 -1
  57. package/dist/table/table.css +1 -0
  58. package/dist/table/table.css.map +1 -0
  59. package/dist/text-input/text-input.css +1 -1
  60. package/dist/text-input/text-input.css.map +1 -1
  61. package/dist/top-task-link/top-task-link.css +1 -1
  62. package/dist/top-task-link/top-task-link.css.map +1 -1
  63. package/dist/unordered-list/unordered-list.css +1 -1
  64. package/dist/unordered-list/unordered-list.css.map +1 -1
  65. package/documentation/coding-conventions.md +4 -2
  66. package/package.json +9 -10
  67. package/src/common/hyphenation.scss +5 -0
  68. package/src/components/accordion/README.md +45 -38
  69. package/src/components/accordion/accordion.scss +2 -7
  70. package/src/components/alert/README.md +15 -11
  71. package/src/components/alert/alert.scss +8 -38
  72. package/src/components/aspect-ratio/README.md +12 -12
  73. package/src/components/badge/README.md +10 -0
  74. package/src/components/badge/badge.scss +53 -0
  75. package/src/components/blockquote/README.md +8 -8
  76. package/src/components/blockquote/blockquote.scss +5 -7
  77. package/src/components/breadcrumb/README.md +10 -7
  78. package/src/components/breadcrumb/breadcrumb.scss +2 -7
  79. package/src/components/button/README.md +17 -14
  80. package/src/components/button/button.scss +2 -7
  81. package/src/components/card/README.md +18 -19
  82. package/src/components/checkbox/README.md +19 -18
  83. package/src/components/checkbox/checkbox.scss +3 -12
  84. package/src/components/dialog/README.md +9 -8
  85. package/src/components/dialog/dialog.scss +4 -23
  86. package/src/components/footer/README.md +11 -7
  87. package/src/components/form-label/README.md +5 -1
  88. package/src/components/form-label/form-label.scss +5 -7
  89. package/src/components/grid/README.md +12 -13
  90. package/src/components/grid/grid.scss +2 -6
  91. package/src/components/header/README.md +2 -2
  92. package/src/components/header/header.scss +2 -2
  93. package/src/components/heading/README.md +14 -11
  94. package/src/components/heading/heading.scss +15 -42
  95. package/src/components/icon/README.md +19 -9
  96. package/src/components/icon/icon.scss +17 -50
  97. package/src/components/icon-button/README.md +14 -0
  98. package/src/components/icon-button/icon-button.scss +60 -0
  99. package/src/components/image/README.md +16 -17
  100. package/src/components/index.scss +5 -0
  101. package/src/components/link/README.md +26 -24
  102. package/src/components/link/link.scss +2 -35
  103. package/src/components/link-list/README.md +16 -0
  104. package/src/components/link-list/link-list.scss +69 -0
  105. package/src/components/logo/README.md +21 -20
  106. package/src/components/mark/README.md +10 -11
  107. package/src/components/mega-menu/README.md +1 -0
  108. package/src/components/mega-menu/mega-menu.scss +14 -0
  109. package/src/components/ordered-list/README.md +5 -5
  110. package/src/components/ordered-list/ordered-list.scss +2 -7
  111. package/src/components/overlap/README.md +1 -1
  112. package/src/components/page-heading/README.md +10 -9
  113. package/src/components/page-heading/page-heading.scss +5 -7
  114. package/src/components/page-menu/README.md +10 -9
  115. package/src/components/page-menu/page-menu.scss +2 -7
  116. package/src/components/pagination/README.md +13 -10
  117. package/src/components/pagination/pagination.scss +2 -7
  118. package/src/components/paragraph/README.md +16 -14
  119. package/src/components/paragraph/paragraph.scss +6 -21
  120. package/src/components/screen/README.md +12 -12
  121. package/src/components/search-field/README.md +18 -18
  122. package/src/components/search-field/search-field.scss +4 -17
  123. package/src/components/skip-link/README.md +18 -25
  124. package/src/components/skip-link/skip-link.scss +0 -5
  125. package/src/components/spotlight/README.md +5 -5
  126. package/src/components/spotlight/spotlight.scss +4 -4
  127. package/src/components/switch/README.md +11 -9
  128. package/src/components/table/README.md +11 -0
  129. package/src/components/table/table.scss +36 -0
  130. package/src/components/text-input/README.md +10 -8
  131. package/src/components/text-input/text-input.scss +2 -7
  132. package/src/components/top-task-link/README.md +15 -14
  133. package/src/components/top-task-link/top-task-link.scss +6 -13
  134. package/src/components/unordered-list/README.md +5 -5
  135. package/src/components/unordered-list/unordered-list.scss +2 -7
  136. package/src/components/visually-hidden/README.md +3 -2
  137. package/src/components/button/button-css.md +0 -12
  138. package/src/components/checkbox/checkbox-css.md +0 -3
  139. package/src/components/footer/footer-css.md +0 -11
  140. package/src/components/heading/heading-css.md +0 -3
  141. package/src/components/paragraph/paragraph-css.md +0 -3
package/src/components/skip-link/README.md CHANGED
@@ -1,33 +1,26 @@
1
1
  # Skip Link
2
2
 
3
- Gebruik een Skip Link om makkelijk met het toetsenbord naar de belangrijkste inhoud te navigeren.
4
- Met een Skip Link kun je terugkerende navigatieblokken (zoals het hoofdmenu of het kruimelpad) overslaan.
3
+ Use a Skip Link to navigate to the main content quickly with the keyboard.
4
+ A Skip Link allows skipping recurring navigation blocks, such as the main menu or breadcrumb trail.
5
5
 
6
- De Skip Link staat boven de header.
7
- De link is verborgen totdat deze met de tab-toets geactiveerd wordt.
8
- Als de link getoond wordt, duwt deze de hele pagina omlaag.
6
+ The Skip Link is placed above the header.
7
+ The link is hidden until activated with the tab key.
8
+ When the link is shown, it pushes the entire page down.
9
9
 
10
- ## Richtlijnen
10
+ ## Guidelines
11
11
 
12
- ### Zo gebruiken
12
+ ### How to Use
13
13
 
14
- - Plaats de Skip Link als eerste element in `<body>`, tenzij je een cookie-banner hebt.
15
- Plaats de Skip Link dan direct na de cookie-banner.
16
- - Gebruik de Skip Link om naar de belangrijkste inhoud te navigeren.
17
- Op een artikelpagina is dat bijvoorbeeld de titel van het artikel, op een zoekpagina is dat het zoekveld.
18
- - Voor complexe pagina's met meerdere secties kun je meer dan 1 Skip Link gebruiken.
19
- In de meeste gevallen is dit niet nodig.
14
+ - Place the Skip Link as the first element in `<body>` unless you have a cookie banner.
15
+ In that case, place the Skip Link immediately after the cookie banner.
16
+ - Use the Skip Link to navigate to the main content.
17
+ On an article page, for example, it could be the title of the article; on a search page, it could be the search field.
18
+ - Set `id="example-id"` on the container of that element and then use `href="#example-id"` on the Skip Link.
19
+ - You can use more than one Skip Link for complex pages with multiple sections.
20
+ In most cases, this is not necessary.
20
21
 
21
- ### Dit vermijden
22
+ ### Avoid
22
23
 
23
- - Skip Links zijn niet nodig op een simpele pagina waar alleen tekst staat en weinig navigatie.
24
- Het doel van een Skip Link is om terugkerende navigatieblokken over te slaan.
25
- Als die blokken er niet zijn, is een Skip Link niet nodig.
26
- - Plaats de Skip Link niet in een `nav` regio, of in de Header.
27
-
28
- ## Relevante WCAG eisen
29
-
30
- - Voor dit component gelden dezelfde WCAG eisen als voor [het link component](https://amsterdam.github.io/design-system/?path=/docs/react_navigation-link--docs).
31
- - [WCAG 2.4.1](https://www.w3.org/TR/WCAG22/#bypass-blocks): gebruik een Skip Link op elke pagina die begint met een terugkerend navigatieblok.
32
- - [WCAG 3.2.3](https://www.w3.org/TR/WCAG22/#consistent-navigation): een Skip Link staat op elke pagina op dezelfde plek.
33
- - [WCAG 3.2.4](https://www.w3.org/TR/WCAG22/#consistent-identification): een Skip Link heeft dezelfde labels op alle pagina's. Bijvoorbeeld niet: "Navigatie overslaan" op een gedeelte van de site, en "Naar de inhoud" op andere pagina's.
24
+ - Skip Links are unnecessary on a simple page with only text and minimal navigation.
25
+ The purpose of a Skip Link is to bypass recurring navigation blocks.
26
+ If those blocks are not present, a Skip Link is not needed.
package/src/components/skip-link/skip-link.scss CHANGED
@@ -20,9 +20,4 @@
20
20
  &:hover {
21
21
  background-color: var(--amsterdam-skip-link-hover-background-color);
22
22
  }
23
-
24
- .amsterdam-theme--compact & {
25
- font-size: var(--amsterdam-skip-link-compact-font-size);
26
- line-height: var(--amsterdam-skip-link-compact-line-height);
27
- }
28
23
  }
package/src/components/spotlight/README.md CHANGED
@@ -1,15 +1,15 @@
1
1
  # Spotlight
2
2
 
3
- Benadrukt een sectie op een pagina middels een opvallende achtergrondkleur.
3
+ Emphasizes a section on a page through a distinctive background colour.
4
4
 
5
- ## Richtlijnen
5
+ ## Guidelines
6
6
 
7
- Raadpleeg [dit overzicht op Stijlweb](https://amsterdam.nl/stijlweb/basiselementen/kleuren/#PagCls_15671872) om na te gaan of je zwarte of witte tekst kunt gebruiken op de achtergrondkleur van je keuze.
7
+ Refer to [this overview on Stijlweb](https://amsterdam.nl/stijlweb/basiselementen/kleuren/#PagCls_15671872) to determine whether you can use black or white text on the background colour of your choice.
8
8
 
9
- ## Relevante WCAG eisen
9
+ ## Relevant WCAG Requirements
10
10
 
11
11
  - [WCAG 1.4.3](https://www.w3.org/TR/WCAG21/#contrast-minimum): Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
12
12
 
13
- ## Referenties
13
+ ## References
14
14
 
15
15
  - [Color and contrast accessibility](https://web.dev/articles/color-and-contrast-accessibility)
package/src/components/spotlight/spotlight.scss CHANGED
@@ -7,6 +7,10 @@
7
7
  background-color: var(--amsterdam-spotlight-blue-background-color);
8
8
  }
9
9
 
10
+ .amsterdam-spotlight--dark-blue {
11
+ background-color: var(--amsterdam-spotlight-dark-blue-background-color);
12
+ }
13
+
10
14
  .amsterdam-spotlight--dark-green {
11
15
  background-color: var(--amsterdam-spotlight-dark-green-background-color);
12
16
  }
@@ -15,10 +19,6 @@
15
19
  background-color: var(--amsterdam-spotlight-green-background-color);
16
20
  }
17
21
 
18
- .amsterdam-spotlight--light-blue {
19
- background-color: var(--amsterdam-spotlight-light-blue-background-color);
20
- }
21
-
22
22
  .amsterdam-spotlight--magenta {
23
23
  background-color: var(--amsterdam-spotlight-magenta-background-color);
24
24
  }
package/src/components/switch/README.md CHANGED
@@ -1,20 +1,22 @@
1
1
  # Switch
2
2
 
3
- Een switch (in het Nederlands: schakelaar) is een besturingselement om snel tussen twee verschillende staten te schakelen. Een schakelaar is van toepassing op een pagina of het hele systeem. Bijvoorbeeld een aan/uit-schakelaar.
3
+ A switch is a control element to toggle between two different states quickly.
4
+ A switch applies to a page or the entire system, such as an on/off switch.
4
5
 
5
- ## Richtlijnen
6
+ ## Guidelines
6
7
 
7
- - Schakel alleen tussen twee verschillende statussen. Het is een binaire actie.
8
- - Gebruik labels met een schakelaar zodat de actie duidelijk is.
9
- - De actie vindt direct plaats zodra de gebruiker de schakelaar gebruikt.
8
+ - Switch only between two different states.
9
+ It is a binary action.
10
+ - Use labels with a switch to make the action clear.
11
+ - The action takes place immediately when the user operates the switch.
10
12
 
11
- ## Relevante WCAG eisen
13
+ ## Relevant WCAG Requirements
12
14
 
13
- - [WCAG 1.3.5](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html): het is zowel voor een gebruiker als programmatisch duidelijk wat het doel van een formulierveld is.
15
+ - [WCAG 1.3.5](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html): it is both clear for a user and programmatically what the purpose of a form field is.
14
16
 
15
- Switch is een interactief element, hier gelden [de algemene eisen en richtlijnen voor interactieve elementen](https://amsterdam.github.io/design-system/?path=/docs/docs-designrichtlijnen-interactieve-elementen--docs) voor.
17
+ The Switch is an interactive element; general requirements and guidelines for interactive elements apply [here](https://amsterdam.github.io/design-system/?path=/docs/docs-designrichtlijnen-interactieve-elementen--docs).
16
18
 
17
- ## Referenties
19
+ ## References
18
20
 
19
21
  - [Switch Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/switch/)
20
22
  - [Role switch](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/switch_role)
package/src/components/table/README.md ADDED
@@ -0,0 +1,11 @@
1
+ # Table
2
+
3
+ Use the table component to let users compare information in rows and columns.
4
+ Table is used to display simple information that does not need to be filtered or edited.
5
+
6
+ ## Guidelines
7
+
8
+ - Use `<Table.Caption>` to describe a table in the same way you would use a heading.
9
+ A caption helps users find, navigate and understand tables.
10
+ - Never use the table component to layout content on a page.
11
+ Instead, use [Grid](https://amsterdam.github.io/design-system/?path=/docs/react_layout-grid--docs).
package/src/components/table/table.scss ADDED
@@ -0,0 +1,36 @@
1
+ /**
2
+ * @license EUPL-1.2+
3
+ * Copyright (c) 2023 Gemeente Amsterdam
4
+ */
5
+
6
+ .amsterdam-table {
7
+ overflow-x: auto;
8
+ }
9
+
10
+ .amsterdam-table__table {
11
+ border-spacing: 0;
12
+ break-inside: avoid;
13
+ color: var(--amsterdam-table-color);
14
+ font-family: var(--amsterdam-table-font-family);
15
+ font-size: var(--amsterdam-table-font-size);
16
+ font-weight: var(--amsterdam-table-font-weight);
17
+ line-height: var(--amsterdam-table-line-height);
18
+ }
19
+
20
+ .amsterdam-table__caption {
21
+ font-weight: var(--amsterdam-table-caption-font-weight);
22
+ text-align: start;
23
+ }
24
+
25
+ .amsterdam-table__cell,
26
+ .amsterdam-table__header-cell {
27
+ border-bottom: var(--amsterdam-table-cell-border-bottom);
28
+ padding-block: 1rem;
29
+ padding-inline: 1rem;
30
+ text-align: start;
31
+ vertical-align: top;
32
+ }
33
+
34
+ .amsterdam-table__header-cell {
35
+ font-weight: var(--amsterdam-table-header-cell-font-weight);
36
+ }
package/src/components/text-input/README.md CHANGED
@@ -1,12 +1,14 @@
1
1
  # Text Input
2
2
 
3
- Text input is een veld van een formulier waar een gebruiker tekst kan invoeren.
3
+ A form field in which a user can enter text.
4
4
 
5
- ## Richtlijnen
5
+ ## Guidelines
6
6
 
7
- - Gebruik een Text input als gebruikers tekst in moeten voeren die niet langer is dan 1 regel, zoals hun naam of telefoonnummer.
8
- - Gebruik een Text input niet als gebruikers meer dan 1 zin moeten invullen.
9
- - De breedte van de Text input moet passend zijn bij de informatie die ingevuld moet worden.
10
- - Een Text input moet een label hebben, en in de meeste gevallen moet dit label zichtbaar zijn.
11
- - Gebruik `spellcheck="false"` voor velden die gevoelige informatie kunnen bevatten, zoals wachtwoorden en persoonsgegevens. Sommige browser extensies voor spellingcontrole sturen deze informatie naar externe servers.
12
- - Pas waar mogelijk automatische hulp toe. Bij ingelogde systemen is bijvoorbeeld invoer vooraf in te vullen om fouten te voorkomen en tijd te besparen.
7
+ - Use a Text Input when users need to enter a single line of text, such as their name or phone number.
8
+ - Do not use a Text Input when users could provide more than 1 sentence of text.
9
+ - The width of the Text Input should be appropriate for the information to be entered.
10
+ - A Text Input must have a label, and in most cases, this label should be visible.
11
+ - Use `spellcheck="false"` for fields that may contain sensitive information, such as passwords and personal data.
12
+ Some browser extensions for spell-checking send this information to external servers.
13
+ - Apply automatic assistance where possible.
14
+ For example, in logged-in systems, pre-filling input can prevent errors and save time.
package/src/components/text-input/text-input.scss CHANGED
@@ -14,9 +14,9 @@
14
14
  box-shadow: var(--amsterdam-text-input-box-shadow);
15
15
  color: var(--amsterdam-text-input-color);
16
16
  font-family: var(--amsterdam-text-input-font-family);
17
- font-size: var(--amsterdam-text-input-spacious-font-size);
17
+ font-size: var(--amsterdam-text-input-font-size);
18
18
  font-weight: var(--amsterdam-text-input-font-weight);
19
- line-height: var(--amsterdam-text-input-spacious-line-height);
19
+ line-height: var(--amsterdam-text-input-line-height);
20
20
  outline-offset: var(--amsterdam-text-input-outline-offset);
21
21
  padding-block: 0.5rem;
22
22
  padding-inline: 1rem;
@@ -25,11 +25,6 @@
25
25
 
26
26
  @include reset;
27
27
 
28
- .amsterdam-theme--compact & {
29
- font-size: var(--amsterdam-text-input-compact-font-size);
30
- line-height: var(--amsterdam-text-input-compact-line-height);
31
- }
32
-
33
28
  &:hover {
34
29
  box-shadow: var(--amsterdam-text-input-hover-box-shadow);
35
30
  }
package/src/components/top-task-link/README.md CHANGED
@@ -1,20 +1,21 @@
1
1
  # Top Task Link
2
2
 
3
- Via dit opvallende navigatie-element vindt de Amsterdammer snel de weg naar veel voorkomende taken.
3
+ A prominent navigation element to quickly start a task.
4
4
 
5
- ## Richtlijnen
5
+ ## Guidelines
6
6
 
7
- - Een Top Task Link heeft zowel een titel als een beschrijving.
8
- - De titel beschrijft de essentie van de pagina waarnaar wordt verwezen.
9
- Deze trekt de aandacht bij het scannen van de pagina.
10
- - De beschrijving geeft meer context.
11
- Dit helpt de Amsterdammer bevestigen dat die zijn doel op de vervolgpagina inderdaad kan bereiken.
12
- - Houd beide teksten bondig. Een titel bestaat uit een paar woorden, de beschrijving uit 1 of 2 korte zinnen. De beschrijving eindigt dan ook op een punt of ander geschikt leesteken.
13
- - Plaats voor brede vensters 3 of 4 Top Task Links naast elkaar op het [Grid](?path=/docs/react_layout-grid--docs).
14
- Als je meer Top Task Links hebt, zet ze dan op de volgende rij.
15
- Probeer het aantal links op brede vensters te verdelen over rijen van 3 of 4 links. Als dit niet lukt, laat de laatste cellen van het grid dan leeg.
16
- - Heb je een groep verwijzingen waarvoor een beschrijving niet nodig of logisch is, gebruik dan een [Link List](?path=/docs/react_navigation-link--docs).
7
+ - A Top Task Link has both a title and a description.
8
+ - The title describes the essence of the page being referred to, attracting attention when scanning the page.
9
+ - The description provides more context, helping the user confirm that they can indeed achieve their goal on the linked page.
10
+ - Keep both texts concise.
11
+ A title consists of a few words, and the description consists of 1 or 2 short sentences.
12
+ The description should end with a period or another appropriate punctuation mark.
13
+ - For wide windows, place 3 or 4 Top Task Links side by side on the [Grid](?path=/docs/react_layout-grid--docs).
14
+ If you have more Top Task Links, place them in the next row.
15
+ Try to distribute the amount of links on wide windows over rows of 3 or 4 links.
16
+ If this is not possible, leave the last cells of the grid empty.
17
+ - If you have a group of links for which a description is unnecessary or illogical, use a [Link List](?path=/docs/react_navigation-link--docs).
17
18
 
18
- ## Relevante WCAG eisen
19
+ ## Relevant WCAG requirements
19
20
 
20
- Voor de Top Task Link gelden dezelfde eisen als voor [reguliere links](https://amsterdam.github.io/design-system/?path=/docs/react_navigation-link--docs).
21
+ The Top Task Link is subject to the same requirements as [regular links](https://amsterdam.github.io/design-system/?path=/docs/react_navigation-link--docs).
package/src/components/top-task-link/top-task-link.scss CHANGED
@@ -3,6 +3,8 @@
3
3
  * Copyright (c) 2023 Gemeente Amsterdam
4
4
  */
5
5
 
6
+ @import "../../common/hyphenation";
7
+
6
8
  .amsterdam-top-task-link {
7
9
  break-inside: avoid;
8
10
  display: flex;
@@ -20,18 +22,14 @@
20
22
  .amsterdam-top-task-link__label {
21
23
  color: var(--amsterdam-top-task-link-label-color);
22
24
  font-family: var(--amsterdam-top-task-link-label-font-family);
23
- font-size: var(--amsterdam-top-task-link-label-spacious-font-size);
25
+ font-size: var(--amsterdam-top-task-link-label-font-size);
24
26
  font-weight: var(--amsterdam-top-task-link-label-font-weight);
25
27
  line-height: var(--amsterdam-top-task-link-label-line-height);
26
28
  text-decoration-line: var(--amsterdam-top-task-link-label-text-decoration-line);
27
29
  text-decoration-thickness: var(--amsterdam-top-task-link-label-text-decoration-thickness);
28
30
  text-underline-offset: var(--amsterdam-top-task-link-label-text-underline-offset);
29
31
 
30
- .amsterdam-theme--compact & {
31
- font-size: var(--amsterdam-top-task-link-label-compact-font-size);
32
- line-height: var(--amsterdam-top-task-link-label-compact-line-height);
33
- }
34
-
32
+ @include hyphenation;
35
33
  @include reset;
36
34
  }
37
35
 
@@ -43,14 +41,9 @@
43
41
  .amsterdam-top-task-link__description {
44
42
  color: var(--amsterdam-top-task-link-description-color);
45
43
  font-family: var(--amsterdam-top-task-link-description-font-family);
46
- font-size: var(--amsterdam-top-task-link-description-spacious-font-size);
44
+ font-size: var(--amsterdam-top-task-link-description-font-size);
47
45
  font-weight: var(--amsterdam-top-task-link-description-font-weight);
48
- line-height: var(--amsterdam-top-task-link-description-spacious-line-height);
49
-
50
- .amsterdam-theme--compact & {
51
- font-size: var(--amsterdam-top-task-link-description-compact-font-size);
52
- line-height: var(--amsterdam-top-task-link-description-compact-line-height);
53
- }
46
+ line-height: var(--amsterdam-top-task-link-description-line-height);
54
47
 
55
48
  @include reset;
56
49
  }
package/src/components/unordered-list/README.md CHANGED
@@ -1,7 +1,7 @@
1
1
  # Unordered List
2
2
 
3
- Een lijst is een verticale groep gerelateerde inhoud.
4
- Deze lijst kan 2 niveaus hebben.
5
- Het eerste niveau bestaat uit vierkantjes.
6
- Het tweede niveau bestaat uit halve kastlijntjes.
7
- Tekst in de lijstitems springt een vaste afstand in.
3
+ A list is a vertical group of related content.
4
+ This list can have 2 levels.
5
+ The first level consists of squares.
6
+ The second level consists of en dashes (–).
7
+ Text in the list items is indented by a fixed distance.
package/src/components/unordered-list/unordered-list.scss CHANGED
@@ -24,9 +24,9 @@
24
24
  .amsterdam-unordered-list:not(.amsterdam-unordered-list--no-markers) {
25
25
  color: var(--amsterdam-unordered-list-color);
26
26
  font-family: var(--amsterdam-unordered-list-font-family);
27
- font-size: var(--amsterdam-unordered-list-spacious-font-size);
27
+ font-size: var(--amsterdam-unordered-list-font-size);
28
28
  font-weight: var(--amsterdam-unordered-list-font-weight);
29
- line-height: var(--amsterdam-unordered-list-spacious-line-height);
29
+ line-height: var(--amsterdam-unordered-list-line-height);
30
30
  list-style-type: var(--amsterdam-unordered-list-list-style-type);
31
31
 
32
32
  /** List items are responsible for indentation and marker positioning. */
@@ -45,8 +45,3 @@
45
45
  padding-inline-start: var(--amsterdam-unordered-list-unordered-list-item-padding-inline-start);
46
46
  }
47
47
  }
48
-
49
- .amsterdam-theme--compact .amsterdam-unordered-list:not(.amsterdam-unordered-list--no-markers) {
50
- font-size: var(--amsterdam-unordered-list-compact-font-size);
51
- line-height: var(--amsterdam-unordered-list-compact-line-height);
52
- }
package/src/components/visually-hidden/README.md CHANGED
@@ -1,5 +1,6 @@
1
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
+ Hides content from sighted users but keeps it accessible to non-visual user agents, such as screen readers.
4
4
 
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.
5
+ Note: in most cases, visually available content should be accessible to non-visual user agents and vice versa.
6
+ Elaborate instructions or guidance read only by non-visual user agents can do more harm than good.
package/src/components/button/button-css.md DELETED
@@ -1,12 +0,0 @@
1
- # CSS Button
2
-
3
- Het button component maakt gebruik van de CSS library van de gemeente Utrecht. Daarop is het Amsterdam Design toegepast. Concreet betekent dit dat de Utrecht class names worden gebruikt met de Amsterdamse css attribuut waarden.
4
- Een voorbeeld van een HTML button met de Amsterdamse styling is:
5
-
6
- ```html
7
- <button class="utrecht-button">Amsterdam Button</button>
8
- ```
9
-
10
- Deze button wordt getoond met de Amsterdamse button styling.
11
-
12
- Vedere documentatie van de Utrecht button is terug te vinden in hun [github](https://github.com/nl-design-system/utrecht/tree/main/components/button) repository.
package/src/components/checkbox/checkbox-css.md DELETED
@@ -1,3 +0,0 @@
1
- # CSS Checkbox
2
-
3
- Het selectievakje bestaat uit een vakje en een tekstlabel. Het tekstlabel staat rechts van het selectievakje. Om toegankelijkheid te vergroten is het volledige component (vakje en label) klikbaar.
package/src/components/footer/footer-css.md DELETED
@@ -1,11 +0,0 @@
1
- # CSS Footer
2
-
3
- Gebruik het `footer` element als buitenste container van de footer.
4
-
5
- De voettekst is blauw met witte tekst en iconen, met onderaan een witte balk. Op desktop heeft het blauwe deel van de voettekst 3 kolommen. Op mobiel heeft het blauwe deel van de voettekst 1 kolom. Kolom 1, 2 en 3 van de desktop staan dan onder elkaar.
6
-
7
- De functionaliteit op desktop en mobiel is gelijk.
8
-
9
- De hoogte wordt bepaald door de content. De breedte van de voettekst op desktop is niet schermvullend.
10
-
11
- De voettekst wordt nooit ingeklapt. Ook niet in mobiele weergave.
package/src/components/heading/heading-css.md DELETED
@@ -1,3 +0,0 @@
1
- # CSS Heading
2
-
3
- Gebruik de juiste heading HTML-elementen als je van deze classes gebruik maakt. De beschikbare elementen zijn: `h1`, `h2`, `h3`, `h4`, `h5` en `h6`. Let bij het kiezen van een heading niveau op de structuur van de pagina. Heading niveaus worden gebruikt om informatie te groeperen. De titel van de pagina krijgt een `h1`. De eerste subtitel een `h2`. De daarna volgende titels van secties die horen bij die subtitel krijgen een `h3`, enzovoort. Als je een nieuwe sectie begint, gebruik je weer een `h2`. Het is toegestaan om stijl en semantiek los van elkaar te trekken. Een `h1` kan bijvoorbeeld de class `amsterdam-heading-2` krijgen.
package/src/components/paragraph/paragraph-css.md DELETED
@@ -1,3 +0,0 @@
1
- # HTML
2
-
3
- Gebruik altijd het `<p>` HTML-element, die heeft automatisch de goede paragraph role in de accessibility tree (dat is nodig voor WCAG eis 1.3.1). Ook is zo de tekst nog steeds goed leesbaar als de CSS niet geladen kan worden.