@amsterdam/design-system-css 0.1.6 → 0.1.7

package/src/form-label/form-label.scss

@@ -5,6 +5,10 @@
 
 @import "../../utils/breakpoint";
 
+@mixin reset {
+  -webkit-text-size-adjust: 100%;
+}
+
 .amsterdam-form-label {
   color: var(--amsterdam-form-label-color);
   font-family: var(--amsterdam-form-label-font-family);
@@ -15,4 +19,6 @@
   @media screen and (width > $amsterdam-breakpoint) {
     font-size: var(--amsterdam-form-label-wide-font-size);
   }
+
+  @include reset;
 }

package/src/heading/heading.scss

@@ -8,6 +8,7 @@
 @mixin reset {
   box-sizing: border-box;
   margin-block: 0;
+  -webkit-text-size-adjust: 100%;
 }
 
 .amsterdam-heading {

package/src/index.scss

@@ -4,16 +4,24 @@
  */
 
 /* Append here */
-@import "./page-menu/page-menu";
 @import "./accordion/accordion";
+@import "./alert/alert";
+@import "./aspect-ratio/aspect-ratio";
+@import "./blockquote/blockquote";
 @import "./breadcrumb/breadcrumb";
 @import "./button/button";
+@import "./checkbox/checkbox";
+@import "./footer/footer";
 @import "./form-label/form-label";
+@import "./grid/grid-cell";
+@import "./grid/page-grid";
 @import "./heading/heading";
 @import "./icon/icon";
 @import "./link/link";
+@import "./ordered-list/ordered-list";
+@import "./page-heading/page-heading";
+@import "./page-menu/page-menu";
 @import "./paragraph/paragraph";
+@import "./top-task-link/top-task-link";
 @import "./unordered-list/unordered-list";
-@import "./ordered-list/ordered-list";
-@import "./grid/grid-cell";
-@import "./grid/page-grid";
+@import "./visually-hidden/visually-hidden";

package/src/link/link.scss

@@ -5,6 +5,10 @@
 
 @import "../../utils/breakpoint";
 
+@mixin reset {
+  -webkit-text-size-adjust: 100%;
+}
+
 .amsterdam-link {
   color: var(--amsterdam-link-color);
   font-family: var(--amsterdam-link-font-family);
@@ -16,6 +20,8 @@
   &:focus {
     color: var(--amsterdam-link-focus-color);
   }
+
+  @include reset;
 }
 
 .amsterdam-link--standalone {

package/src/ordered-list/README.md

@@ -1,4 +1,4 @@
-# Ordered list
+# Ordered List
 
 Een geordende lijst is een verticale groep gerelateerde inhoud met een volgorde.
 Deze lijst kan 2 niveaus hebben.

package/src/page-heading/README.md

@@ -1,4 +1,4 @@
-# Page heading
+# Page Heading
 
 Het page heading component is een opvallende tekst aan het begin van een pagina, direct na de header.
 Gebruik dit component voor een naam, titel of motto.

package/src/page-heading/page-heading.scss

@@ -8,6 +8,7 @@
 @mixin reset {
   box-sizing: border-box;
   margin-block: 0;
+  -webkit-text-size-adjust: 100%;
 }
 
 .amsterdam-page-heading {

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

@@ -1,4 +1,4 @@
-# Top task link
+# Top Task Link
 
 De toptask link is een navigatie-element dat opvallender is dan een link, om de aandacht te trekken voor de meest belangrijke informatie.
 Zet de toptask link in zodat de gebruiker snel de juiste informatie vindt én een bijbehorende taak makkelijk kan uitvoeren.

package/src/unordered-list/README.md

@@ -1,4 +1,4 @@
-# Unordered list
+# Unordered List
 
 Een lijst is een verticale groep gerelateerde inhoud.
 Deze lijst kan 2 niveaus hebben.

package/src/visually-hidden/README.md

@@ -1,5 +1,5 @@
-# Visually hidden
+# 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.
+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.
 
 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.