@amsterdam/design-system-css 0.2.0 → 0.4.0

package/src/components/spotlight/README.md

@@ -0,0 +1,15 @@
+# Spotlight
+
+Emphasizes a section on a page through a distinctive background colour.
+
+## Guidelines
+
+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.
+
+## Relevant WCAG Requirements
+
+- [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;
+
+## References
+
+- [Color and contrast accessibility](https://web.dev/articles/color-and-contrast-accessibility)

package/src/components/spotlight/spotlight.scss

@@ -0,0 +1,36 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+.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);
+}

package/src/components/switch/README.md

@@ -1,20 +1,22 @@
 # Switch
 
-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.
+A switch is a control element to toggle between two different states quickly.
+A switch applies to a page or the entire system, such as an on/off switch.
 
-## Richtlijnen
+## Guidelines
 
-- Schakel alleen tussen twee verschillende statussen. Het is een binaire actie.
-- Gebruik labels met een schakelaar zodat de actie duidelijk is.
-- De actie vindt direct plaats zodra de gebruiker de schakelaar gebruikt.
+- Switch only between two different states.
+  It is a binary action.
+- Use labels with a switch to make the action clear.
+- The action takes place immediately when the user operates the switch.
 
-## Relevante WCAG eisen
+## Relevant WCAG Requirements
 
-- [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.
+- [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.
 
-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.
+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).
 
-## Referenties
+## References
 
 - [Switch Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/switch/)
 - [Role switch](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/switch_role)

package/src/components/table/README.md

@@ -0,0 +1,11 @@
+# Table
+
+Use the table component to let users compare information in rows and columns.
+Table is used to display simple information that does not need to be filtered or edited.
+
+## Guidelines
+
+- Use `<Table.Caption>` to describe a table in the same way you would use a heading.
+  A caption helps users find, navigate and understand tables.
+- Never use the table component to layout content on a page.
+  Instead, use [Grid](https://amsterdam.github.io/design-system/?path=/docs/react_layout-grid--docs).

package/src/components/table/table.scss

@@ -0,0 +1,36 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+.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: 1rem;
+  padding-inline: 1rem;
+  text-align: start;
+  vertical-align: top;
+}
+
+.amsterdam-table__header-cell {
+  font-weight: var(--amsterdam-table-header-cell-font-weight);
+}

package/src/components/text-input/README.md

@@ -0,0 +1,14 @@
+# Text Input
+
+A form field in which a user can enter text.
+
+## Guidelines
+
+- Use a Text Input when users need to enter a single line of text, such as their name or phone number.
+- Do not use a Text Input when users could provide more than 1 sentence of text.
+- The width of the Text Input should be appropriate for the information to be entered.
+- A Text Input must have a label, and in most cases, this label should be visible.
+- Use `spellcheck="false"` for fields that may contain sensitive information, such as passwords and personal data.
+  Some browser extensions for spell-checking send this information to external servers.
+- Apply automatic assistance where possible.
+  For example, in logged-in systems, pre-filling input can prevent errors and save time.

package/src/components/text-input/text-input.scss

@@ -0,0 +1,57 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+@mixin reset {
+  box-sizing: border-box;
+  margin-block: 0;
+  -webkit-text-size-adjust: 100%;
+}
+
+.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-spacious-font-size);
+  font-weight: var(--amsterdam-text-input-font-weight);
+  line-height: var(--amsterdam-text-input-spacious-line-height);
+  outline-offset: var(--amsterdam-text-input-outline-offset);
+  padding-block: 0.5rem;
+  padding-inline: 1rem;
+  touch-action: manipulation;
+  width: 100%;
+
+  @include reset;
+
+  .amsterdam-theme--compact & {
+    font-size: var(--amsterdam-text-input-compact-font-size);
+    line-height: var(--amsterdam-text-input-compact-line-height);
+  }
+
+  &: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);
+
+  &:hover {
+    // TODO: this should be the (currently non-existent) dark red hover color
+    box-shadow: var(--amsterdam-text-input-invalid-hover-box-shadow);
+  }
+}

package/src/components/top-task-link/README.md

@@ -1,20 +1,21 @@
 # Top Task Link
 
-Via dit opvallende navigatie-element vindt de Amsterdammer snel de weg naar veel voorkomende taken.
+A prominent navigation element to quickly start a task.
 
-## Richtlijnen
+## Guidelines
 
-- Een Top Task Link heeft zowel een titel als een beschrijving.
-- De titel beschrijft de essentie van de pagina waarnaar wordt verwezen.
-  Deze trekt de aandacht bij het scannen van de pagina.
-- De beschrijving geeft meer context.
-  Dit helpt de Amsterdammer bevestigen dat die zijn doel op de vervolgpagina inderdaad kan bereiken.
-- 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.
-- Plaats voor brede vensters 3 of 4 Top Task Links naast elkaar op het [Grid](?path=/docs/react_layout-grid--docs).
-  Als je meer Top Task Links hebt, zet ze dan op de volgende rij.
-  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.
-- Heb je een groep verwijzingen waarvoor een beschrijving niet nodig of logisch is, gebruik dan een [Link List](?path=/docs/react_navigation-link--docs).
+- A Top Task Link has both a title and a description.
+- The title describes the essence of the page being referred to, attracting attention when scanning the page.
+- The description provides more context, helping the user confirm that they can indeed achieve their goal on the linked page.
+- Keep both texts concise.
+  A title consists of a few words, and the description consists of 1 or 2 short sentences.
+  The description should end with a period or another appropriate punctuation mark.
+- For wide windows, place 3 or 4 Top Task Links side by side on the [Grid](?path=/docs/react_layout-grid--docs).
+  If you have more Top Task Links, place them in the next row.
+  Try to distribute the amount of links on wide windows over rows of 3 or 4 links.
+  If this is not possible, leave the last cells of the grid empty.
+- 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).
 
-## Relevante WCAG eisen
+## Relevant WCAG requirements
 
-Voor de Top Task Link gelden dezelfde eisen als voor [reguliere links](https://amsterdam.github.io/design-system/?path=/docs/react_navigation-link--docs).
+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/unordered-list/README.md

@@ -1,7 +1,7 @@
 # Unordered List
 
-Een lijst is een verticale groep gerelateerde inhoud.
-Deze lijst kan 2 niveaus hebben.
-Het eerste niveau bestaat uit vierkantjes.
-Het tweede niveau bestaat uit halve kastlijntjes.
-Tekst in de lijstitems springt een vaste afstand in.
+A list is a vertical group of related content.
+This list can have 2 levels.
+The first level consists of squares.
+The second level consists of en dashes (–).
+Text in the list items is indented by a fixed distance.

package/src/components/visually-hidden/README.md

@@ -1,5 +1,6 @@
 # Visually Hidden
 
-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.
+Hides content from sighted users but keeps it accessible to non-visual user agents, such as screen readers.
 
-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.
+Note: in most cases, visually available content should be accessible to non-visual user agents and vice versa.
+Elaborate instructions or guidance read only by non-visual user agents can do more harm than good.

package/src/components/visually-hidden/visually-hidden.scss

@@ -3,15 +3,13 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
-.amsterdam-visually-hidden {
-  clip: rect(1px, 1px, 1px, 1px);
+// Source: https://css-tricks.com/inclusively-hidden/
+.amsterdam-visually-hidden:not(:active, :focus) {
+  clip: rect(0 0 0 0);
   clip-path: inset(50%);
   height: 1px;
-  margin-block: -1px;
-  margin-inline: -1px;
   overflow: hidden;
-  padding-block: 0;
-  padding-inline: 0;
   position: absolute;
+  white-space: nowrap;
   width: 1px;
 }

package/dist/grid/grid-cell.css

@@ -1 +0,0 @@
-.amsterdam-grid-cell--full-width{grid-column:1/-1}.amsterdam-grid-cell--span-1{grid-column-end:span 1}.amsterdam-grid-cell--start-1{grid-column-start:1}.amsterdam-grid-cell--span-2{grid-column-end:span 2}.amsterdam-grid-cell--start-2{grid-column-start:2}.amsterdam-grid-cell--span-3{grid-column-end:span 3}.amsterdam-grid-cell--start-3{grid-column-start:3}.amsterdam-grid-cell--span-4{grid-column-end:span 4}.amsterdam-grid-cell--start-4{grid-column-start:4}.amsterdam-grid-cell--span-5{grid-column-end:span 5}.amsterdam-grid-cell--start-5{grid-column-start:5}.amsterdam-grid-cell--span-6{grid-column-end:span 6}.amsterdam-grid-cell--start-6{grid-column-start:6}.amsterdam-grid-cell--span-7{grid-column-end:span 7}.amsterdam-grid-cell--start-7{grid-column-start:7}.amsterdam-grid-cell--span-8{grid-column-end:span 8}.amsterdam-grid-cell--start-8{grid-column-start:8}.amsterdam-grid-cell--span-9{grid-column-end:span 9}.amsterdam-grid-cell--start-9{grid-column-start:9}.amsterdam-grid-cell--span-10{grid-column-end:span 10}.amsterdam-grid-cell--start-10{grid-column-start:10}.amsterdam-grid-cell--span-11{grid-column-end:span 11}.amsterdam-grid-cell--start-11{grid-column-start:11}.amsterdam-grid-cell--span-12{grid-column-end:span 12}.amsterdam-grid-cell--start-12{grid-column-start:12}@media screen and (min-width: 36rem){.amsterdam-grid-cell--span-1-medium{grid-column-end:span 1}.amsterdam-grid-cell--start-1-medium{grid-column-start:1}.amsterdam-grid-cell--span-2-medium{grid-column-end:span 2}.amsterdam-grid-cell--start-2-medium{grid-column-start:2}.amsterdam-grid-cell--span-3-medium{grid-column-end:span 3}.amsterdam-grid-cell--start-3-medium{grid-column-start:3}.amsterdam-grid-cell--span-4-medium{grid-column-end:span 4}.amsterdam-grid-cell--start-4-medium{grid-column-start:4}.amsterdam-grid-cell--span-5-medium{grid-column-end:span 5}.amsterdam-grid-cell--start-5-medium{grid-column-start:5}.amsterdam-grid-cell--span-6-medium{grid-column-end:span 6}.amsterdam-grid-cell--start-6-medium{grid-column-start:6}.amsterdam-grid-cell--span-7-medium{grid-column-end:span 7}.amsterdam-grid-cell--start-7-medium{grid-column-start:7}.amsterdam-grid-cell--span-8-medium{grid-column-end:span 8}.amsterdam-grid-cell--start-8-medium{grid-column-start:8}.amsterdam-grid-cell--span-9-medium{grid-column-end:span 9}.amsterdam-grid-cell--start-9-medium{grid-column-start:9}.amsterdam-grid-cell--span-10-medium{grid-column-end:span 10}.amsterdam-grid-cell--start-10-medium{grid-column-start:10}.amsterdam-grid-cell--span-11-medium{grid-column-end:span 11}.amsterdam-grid-cell--start-11-medium{grid-column-start:11}.amsterdam-grid-cell--span-12-medium{grid-column-end:span 12}.amsterdam-grid-cell--start-12-medium{grid-column-start:12}}@media screen and (min-width: 68rem){.amsterdam-grid-cell--span-1-wide{grid-column-end:span 1}.amsterdam-grid-cell--start-1-wide{grid-column-start:1}.amsterdam-grid-cell--span-2-wide{grid-column-end:span 2}.amsterdam-grid-cell--start-2-wide{grid-column-start:2}.amsterdam-grid-cell--span-3-wide{grid-column-end:span 3}.amsterdam-grid-cell--start-3-wide{grid-column-start:3}.amsterdam-grid-cell--span-4-wide{grid-column-end:span 4}.amsterdam-grid-cell--start-4-wide{grid-column-start:4}.amsterdam-grid-cell--span-5-wide{grid-column-end:span 5}.amsterdam-grid-cell--start-5-wide{grid-column-start:5}.amsterdam-grid-cell--span-6-wide{grid-column-end:span 6}.amsterdam-grid-cell--start-6-wide{grid-column-start:6}.amsterdam-grid-cell--span-7-wide{grid-column-end:span 7}.amsterdam-grid-cell--start-7-wide{grid-column-start:7}.amsterdam-grid-cell--span-8-wide{grid-column-end:span 8}.amsterdam-grid-cell--start-8-wide{grid-column-start:8}.amsterdam-grid-cell--span-9-wide{grid-column-end:span 9}.amsterdam-grid-cell--start-9-wide{grid-column-start:9}.amsterdam-grid-cell--span-10-wide{grid-column-end:span 10}.amsterdam-grid-cell--start-10-wide{grid-column-start:10}.amsterdam-grid-cell--span-11-wide{grid-column-end:span 11}.amsterdam-grid-cell--start-11-wide{grid-column-start:11}.amsterdam-grid-cell--span-12-wide{grid-column-end:span 12}.amsterdam-grid-cell--start-12-wide{grid-column-start:12}}/*# sourceMappingURL=grid-cell.css.map */

package/dist/grid/grid-cell.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../../src/components/grid/grid-cell.scss"],"names":[],"mappings":"AAOA,iCACE,iBAMA,6BACE,uBAGF,8BACE,kBANS,EACX,6BACE,uBAGF,8BACE,kBANS,EACX,6BACE,uBAGF,8BACE,kBANS,EACX,6BACE,uBAGF,8BACE,kBANS,EACX,6BACE,uBAGF,8BACE,kBANS,EACX,6BACE,uBAGF,8BACE,kBANS,EACX,6BACE,uBAGF,8BACE,kBANS,EACX,6BACE,uBAGF,8BACE,kBANS,EACX,6BACE,uBAGF,8BACE,kBANS,EACX,8BACE,wBAGF,+BACE,kBANS,GACX,8BACE,wBAGF,+BACE,kBANS,GACX,8BACE,wBAGF,+BACE,kBANS,GAUb,qCAEI,oCACE,uBAGF,qCACE,kBANS,EACX,oCACE,uBAGF,qCACE,kBANS,EACX,oCACE,uBAGF,qCACE,kBANS,EACX,oCACE,uBAGF,qCACE,kBANS,EACX,oCACE,uBAGF,qCACE,kBANS,EACX,oCACE,uBAGF,qCACE,kBANS,EACX,oCACE,uBAGF,qCACE,kBANS,EACX,oCACE,uBAGF,qCACE,kBANS,EACX,oCACE,uBAGF,qCACE,kBANS,EACX,qCACE,wBAGF,sCACE,kBANS,GACX,qCACE,wBAGF,sCACE,kBANS,GACX,qCACE,wBAGF,sCACE,kBANS,IAWf,qCAEI,kCACE,uBAGF,mCACE,kBANS,EACX,kCACE,uBAGF,mCACE,kBANS,EACX,kCACE,uBAGF,mCACE,kBANS,EACX,kCACE,uBAGF,mCACE,kBANS,EACX,kCACE,uBAGF,mCACE,kBANS,EACX,kCACE,uBAGF,mCACE,kBANS,EACX,kCACE,uBAGF,mCACE,kBANS,EACX,kCACE,uBAGF,mCACE,kBANS,EACX,kCACE,uBAGF,mCACE,kBANS,EACX,mCACE,wBAGF,oCACE,kBANS,GACX,mCACE,wBAGF,oCACE,kBANS,GACX,mCACE,wBAGF,oCACE,kBANS","file":"grid-cell.css"}

package/dist/highlight/highlight.css

@@ -1 +0,0 @@
-.amsterdam-highlight--blue{background-color:var(--amsterdam-highlight-blue-background-color)}.amsterdam-highlight--dark-green{background-color:var(--amsterdam-highlight-dark-green-background-color)}.amsterdam-highlight--green{background-color:var(--amsterdam-highlight-green-background-color)}.amsterdam-highlight--light-blue{background-color:var(--amsterdam-highlight-light-blue-background-color)}.amsterdam-highlight--magenta{background-color:var(--amsterdam-highlight-magenta-background-color)}.amsterdam-highlight--orange{background-color:var(--amsterdam-highlight-orange-background-color)}.amsterdam-highlight--purple{background-color:var(--amsterdam-highlight-purple-background-color)}.amsterdam-highlight--yellow{background-color:var(--amsterdam-highlight-yellow-background-color)}/*# sourceMappingURL=highlight.css.map */

package/dist/highlight/highlight.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../../src/components/highlight/highlight.scss"],"names":[],"mappings":"AAKA,2BACE,kEAGF,iCACE,wEAGF,4BACE,mEAGF,iCACE,wEAGF,8BACE,qEAGF,6BACE,oEAGF,6BACE,oEAGF,6BACE","file":"highlight.css"}

package/src/components/button/button-css.md

@@ -1,12 +0,0 @@
-# CSS Button
-
-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.
-Een voorbeeld van een HTML button met de Amsterdamse styling is:
-
-```html
-<button class="utrecht-button">Amsterdam Button</button>
-```
-
-Deze button wordt getoond met de Amsterdamse button styling.
-
-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

@@ -1,3 +0,0 @@
-# CSS Checkbox
-
-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

@@ -1,11 +0,0 @@
-# CSS Footer
-
-Gebruik het `footer` element als buitenste container van de footer.
-
-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.
-
-De functionaliteit op desktop en mobiel is gelijk.
-
-De hoogte wordt bepaald door de content. De breedte van de voettekst op desktop is niet schermvullend.
-
-De voettekst wordt nooit ingeklapt. Ook niet in mobiele weergave.

package/src/components/grid/README.grid-cell.md

@@ -1,14 +0,0 @@
-# Grid cell
-
-Beslaat een aantal kolommen in een [Grid](?path=/docs/react_layout-grid--docs).
-
-## Gebruik
-
-Verdeel hiermee een grid in cellen.
-Geef aan hoeveel kolommen van het grid de cel beslaat.
-Dat aantal kan variëren voor smalle, middelbrede of brede schermen.
-In elke cel plaats je vervolgens de gewenste inhoud.
-
-## Ontwerp
-
-De [ontwerpkeuzes](?path=/docs/docs-designrichtlijnen-grid--docs) staan beschreven onder de designrichtlijnen.

package/src/components/grid/README.grid.md

@@ -1,17 +0,0 @@
-# Grid
-
-Levert een tweedimensionaal raster waarop alle elementen van een pagina uitgelijnd worden.
-
-## Gebruik
-
-Elke pagina moet het grid gebruiken als basis voor de layout, dus direct binnen [Screen](?path=/docs/layout-screen--docs).
-
-Een [Footer](?path=/docs/react_containers-footer--docs) en een [Highlight](?path=/docs/react_containers-highlight--docs) zijn iets breder dan het grid.
-Daarom wordt in HTML vóór deze componenten een instantie van Grid afgesloten en erbinnen een nieuwe geopend.
-
-Meerdere instanties van dit component zijn dus mogelijk op een pagina.
-Visueel moeten ze wel allemaal op elkaar aansluiten.
-
-## Ontwerp
-
-De [ontwerpkeuzes](?path=/docs/docs-designrichtlijnen-grid--docs) staan beschreven onder de designrichtlijnen.

package/src/components/grid/grid-cell.scss

@@ -1,46 +0,0 @@
-/**
- * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
- */
-
-@import "../../common/breakpoint";
-
-.amsterdam-grid-cell--full-width {
-  grid-column: 1 / -1;
-}
-
-// The order of the following declaration blocks ensures the intended specificity.
-
-@for $i from 1 through 12 {
-  .amsterdam-grid-cell--span-#{$i} {
-    grid-column-end: span $i;
-  }
-
-  .amsterdam-grid-cell--start-#{$i} {
-    grid-column-start: $i;
-  }
-}
-
-@media screen and (min-width: $amsterdam-breakpoint-medium) {
-  @for $i from 1 through 12 {
-    .amsterdam-grid-cell--span-#{$i}-medium {
-      grid-column-end: span $i;
-    }
-
-    .amsterdam-grid-cell--start-#{$i}-medium {
-      grid-column-start: $i;
-    }
-  }
-}
-
-@media screen and (min-width: $amsterdam-breakpoint-wide) {
-  @for $i from 1 through 12 {
-    .amsterdam-grid-cell--span-#{$i}-wide {
-      grid-column-end: span $i;
-    }
-
-    .amsterdam-grid-cell--start-#{$i}-wide {
-      grid-column-start: $i;
-    }
-  }
-}

package/src/components/heading/heading-css.md

@@ -1,3 +0,0 @@
-# CSS Heading
-
-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/highlight/README.md

@@ -1,15 +0,0 @@
-# Highlight
-
-Benadrukt een sectie op een pagina middels een opvallende achtergrondkleur.
-
-## Richtlijnen
-
-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.
-
-## Relevante WCAG eisen
-
-- [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;
-
-## Referenties
-
-- [Color and contrast accessibility](https://web.dev/articles/color-and-contrast-accessibility)

package/src/components/highlight/highlight.scss

@@ -1,36 +0,0 @@
-/**
- * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
- */
-
-.amsterdam-highlight--blue {
-  background-color: var(--amsterdam-highlight-blue-background-color);
-}
-
-.amsterdam-highlight--dark-green {
-  background-color: var(--amsterdam-highlight-dark-green-background-color);
-}
-
-.amsterdam-highlight--green {
-  background-color: var(--amsterdam-highlight-green-background-color);
-}
-
-.amsterdam-highlight--light-blue {
-  background-color: var(--amsterdam-highlight-light-blue-background-color);
-}
-
-.amsterdam-highlight--magenta {
-  background-color: var(--amsterdam-highlight-magenta-background-color);
-}
-
-.amsterdam-highlight--orange {
-  background-color: var(--amsterdam-highlight-orange-background-color);
-}
-
-.amsterdam-highlight--purple {
-  background-color: var(--amsterdam-highlight-purple-background-color);
-}
-
-.amsterdam-highlight--yellow {
-  background-color: var(--amsterdam-highlight-yellow-background-color);
-}

package/src/components/paragraph/paragraph-css.md

@@ -1,3 +0,0 @@
-# HTML
-
-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.