@amsterdam/design-system-css 0.6.1 → 0.7.1

package/src/components/form-field-character-counter/form-field-character-counter.scss

@@ -0,0 +1,22 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+@mixin reset {
+  -webkit-text-size-adjust: 100%;
+}
+
+.ams-form-field-character-counter {
+  color: var(--ams-form-field-character-counter-color);
+  font-family: var(--ams-form-field-character-counter-font-family);
+  font-size: var(--ams-form-field-character-counter-font-size);
+  font-weight: var(--ams-form-field-character-counter-font-weight);
+  line-height: var(--ams-form-field-character-counter-line-height);
+
+  @include reset;
+}
+
+.ams-form-field-character-counter--error {
+  color: var(--ams-form-field-character-counter-error-color);
+}

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

@@ -9,12 +9,12 @@
   -webkit-text-size-adjust: 100%;
 }
 
-.amsterdam-form-label {
-  color: var(--amsterdam-form-label-color);
-  font-family: var(--amsterdam-form-label-font-family);
-  font-size: var(--amsterdam-form-label-font-size);
-  font-weight: var(--amsterdam-form-label-font-weight);
-  line-height: var(--amsterdam-form-label-line-height);
+.ams-form-label {
+  color: var(--ams-form-label-color);
+  font-family: var(--ams-form-label-font-family);
+  font-size: var(--ams-form-label-font-size);
+  font-weight: var(--ams-form-label-font-weight);
+  line-height: var(--ams-form-label-line-height);
 
   @include hyphenation;
   @include reset;

package/src/components/gap/gap.scss

@@ -5,12 +5,12 @@
 
 @import "../../common/size";
 
-[class|="amsterdam-gap-"] {
+[class|="ams-gap-"] {
   display: grid !important;
 }
 
-@each $size in map-keys($amsterdam-sizes) {
-  .amsterdam-gap--#{$size} {
-    gap: var(--amsterdam-gap-#{$size}) !important;
+@each $size in map-keys($ams-sizes) {
+  .ams-gap--#{$size} {
+    gap: var(--ams-gap-#{$size}) !important;
   }
 }

package/src/components/grid/grid.scss

@@ -5,105 +5,105 @@
 
 @import "../../common/breakpoint";
 
-.amsterdam-grid {
-  column-gap: var(--amsterdam-grid-column-gap);
+.ams-grid {
+  column-gap: var(--ams-grid-column-gap);
   display: grid;
-  grid-template-columns: repeat(var(--amsterdam-grid-column-count), 1fr);
-  padding-inline: var(--amsterdam-grid-padding-inline);
-  row-gap: var(--amsterdam-grid-row-gap-md);
+  grid-template-columns: repeat(var(--ams-grid-column-count), 1fr);
+  padding-inline: var(--ams-grid-padding-inline);
+  row-gap: var(--ams-grid-row-gap-md);
 
-  @media screen and (min-width: $amsterdam-breakpoint-medium) {
-    grid-template-columns: repeat(var(--amsterdam-grid-medium-column-count), 1fr);
+  @media screen and (min-width: $ams-breakpoint-medium) {
+    grid-template-columns: repeat(var(--ams-grid-medium-column-count), 1fr);
   }
 
-  @media screen and (min-width: $amsterdam-breakpoint-wide) {
-    grid-template-columns: repeat(var(--amsterdam-grid-wide-column-count), 1fr);
+  @media screen and (min-width: $ams-breakpoint-wide) {
+    grid-template-columns: repeat(var(--ams-grid-wide-column-count), 1fr);
   }
 }
 
-.amsterdam-grid--gap-vertical--none {
+.ams-grid--gap-vertical--none {
   row-gap: initial;
 }
 
-.amsterdam-grid--gap-vertical--small {
-  row-gap: var(--amsterdam-grid-row-gap-sm);
+.ams-grid--gap-vertical--small {
+  row-gap: var(--ams-grid-row-gap-sm);
 }
 
-.amsterdam-grid--gap-vertical--large {
-  row-gap: var(--amsterdam-grid-row-gap-lg);
+.ams-grid--gap-vertical--large {
+  row-gap: var(--ams-grid-row-gap-lg);
 }
 
-.amsterdam-grid--padding-bottom--small {
-  padding-block-end: var(--amsterdam-grid-padding-block-sm);
+.ams-grid--padding-bottom--small {
+  padding-block-end: var(--ams-grid-padding-block-sm);
 }
 
-.amsterdam-grid--padding-bottom--medium {
-  padding-block-end: var(--amsterdam-grid-padding-block-md);
+.ams-grid--padding-bottom--medium {
+  padding-block-end: var(--ams-grid-padding-block-md);
 }
 
-.amsterdam-grid--padding-bottom--large {
-  padding-block-end: var(--amsterdam-grid-padding-block-lg);
+.ams-grid--padding-bottom--large {
+  padding-block-end: var(--ams-grid-padding-block-lg);
 }
 
-.amsterdam-grid--padding-top--small {
-  padding-block-start: var(--amsterdam-grid-padding-block-sm);
+.ams-grid--padding-top--small {
+  padding-block-start: var(--ams-grid-padding-block-sm);
 }
 
-.amsterdam-grid--padding-top--medium {
-  padding-block-start: var(--amsterdam-grid-padding-block-md);
+.ams-grid--padding-top--medium {
+  padding-block-start: var(--ams-grid-padding-block-md);
 }
 
-.amsterdam-grid--padding-top--large {
-  padding-block-start: var(--amsterdam-grid-padding-block-lg);
+.ams-grid--padding-top--large {
+  padding-block-start: var(--ams-grid-padding-block-lg);
 }
 
-.amsterdam-grid--padding-vertical--small {
-  padding-block: var(--amsterdam-grid-padding-block-sm);
+.ams-grid--padding-vertical--small {
+  padding-block: var(--ams-grid-padding-block-sm);
 }
 
-.amsterdam-grid--padding-vertical--medium {
-  padding-block: var(--amsterdam-grid-padding-block-md);
+.ams-grid--padding-vertical--medium {
+  padding-block: var(--ams-grid-padding-block-md);
 }
 
-.amsterdam-grid--padding-vertical--large {
-  padding-block: var(--amsterdam-grid-padding-block-lg);
+.ams-grid--padding-vertical--large {
+  padding-block: var(--ams-grid-padding-block-lg);
 }
 
-.amsterdam-grid__cell--span-all {
+.ams-grid__cell--span-all {
   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} {
+  .ams-grid__cell--span-#{$i} {
     grid-column-end: span $i;
   }
 
-  .amsterdam-grid__cell--start-#{$i} {
+  .ams-grid__cell--start-#{$i} {
     grid-column-start: $i;
   }
 }
 
-@media screen and (min-width: $amsterdam-breakpoint-medium) {
+@media screen and (min-width: $ams-breakpoint-medium) {
   @for $i from 1 through 12 {
-    .amsterdam-grid__cell--span-#{$i}-medium {
+    .ams-grid__cell--span-#{$i}-medium {
       grid-column-end: span $i;
     }
 
-    .amsterdam-grid__cell--start-#{$i}-medium {
+    .ams-grid__cell--start-#{$i}-medium {
       grid-column-start: $i;
     }
   }
 }
 
-@media screen and (min-width: $amsterdam-breakpoint-wide) {
+@media screen and (min-width: $ams-breakpoint-wide) {
   @for $i from 1 through 12 {
-    .amsterdam-grid__cell--span-#{$i}-wide {
+    .ams-grid__cell--span-#{$i}-wide {
       grid-column-end: span $i;
     }
 
-    .amsterdam-grid__cell--start-#{$i}-wide {
+    .ams-grid__cell--start-#{$i}-wide {
       grid-column-start: $i;
     }
   }

package/src/components/header/header.scss

@@ -5,56 +5,56 @@
 
 @import "../../common/breakpoint";
 
-.amsterdam-header {
+.ams-header {
   align-items: center;
   display: flex;
   flex-wrap: wrap;
-  padding-block: var(--amsterdam-header-padding-block);
+  padding-block: var(--ams-header-padding-block);
   row-gap: 1.5rem;
 
-  @media screen and (min-width: $amsterdam-breakpoint-wide) {
-    column-gap: var(--amsterdam-header-column-gap);
+  @media screen and (min-width: $ams-breakpoint-wide) {
+    column-gap: var(--ams-header-column-gap);
     flex-wrap: nowrap;
   }
 }
 
-.amsterdam-header__logo-link {
+.ams-header__logo-link {
   flex: none;
-  outline-offset: var(--amsterdam-header-logo-link-outline-offset);
+  outline-offset: var(--ams-header-logo-link-outline-offset);
 }
 
-.amsterdam-header__links {
+.ams-header__links {
   display: none;
 
-  @media screen and (min-width: $amsterdam-breakpoint-medium) {
+  @media screen and (min-width: $ams-breakpoint-medium) {
     display: block;
     flex: 10 0 auto;
   }
 
-  @media screen and (min-width: $amsterdam-breakpoint-wide) {
+  @media screen and (min-width: $ams-breakpoint-wide) {
     order: 3;
   }
 }
 
-.amsterdam-header__menu {
+.ams-header__menu {
   flex: 1;
-  padding-inline-start: var(--amsterdam-page-menu-column-gap); // TODO Don’t use tokens of another component
+  padding-inline-start: var(--ams-page-menu-column-gap); // TODO Don’t use tokens of another component
   text-align: end;
 
-  @media screen and (min-width: $amsterdam-breakpoint-wide) {
+  @media screen and (min-width: $ams-breakpoint-wide) {
     order: 4;
     padding-inline-start: 0;
   }
 }
 
-.amsterdam-header__title {
+.ams-header__title {
   flex: 1 1 100%;
 
-  @media screen and (min-width: $amsterdam-breakpoint-wide) {
+  @media screen and (min-width: $ams-breakpoint-wide) {
     min-width: 0;
     order: 2;
 
-    .amsterdam-header__title-heading {
+    .ams-header__title-heading {
       display: block;
       line-height: 1;
       overflow: hidden;
@@ -66,18 +66,18 @@
 }
 
 // Temporary, will move to megamenu (and/or iconButton)
-.amsterdam-header__menu-button {
+.ams-header__menu-button {
   background-color: transparent;
   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23004699' fill-rule='evenodd' d='M0 3.238h32V7.81H0V3.238zm0 10.476h32v4.572H0v-4.572zM0 24.19h32v4.572H0V24.19z'/></svg>");
   background-position: center right;
   background-repeat: no-repeat;
   background-size: 19px 19px;
   border: 0;
-  color: var(--amsterdam-page-menu-item-color);
-  font-family: var(--amsterdam-page-menu-item-font-family);
-  font-size: var(--amsterdam-page-menu-item-font-size);
-  font-weight: var(--amsterdam-page-menu-item-font-weight);
-  line-height: var(--amsterdam-page-menu-item-line-height);
+  color: var(--ams-page-menu-item-color);
+  font-family: var(--ams-page-menu-item-font-family);
+  font-size: var(--ams-page-menu-item-font-size);
+  font-weight: var(--ams-page-menu-item-font-weight);
+  line-height: var(--ams-page-menu-item-line-height);
   margin-block: 0;
   padding-inline: 0 30px;
   text-align: center;

package/src/components/heading/heading.scss

@@ -11,47 +11,47 @@
   -webkit-text-size-adjust: 100%;
 }
 
-.amsterdam-heading {
+.ams-heading {
   break-after: avoid;
   break-inside: avoid;
-  color: var(--amsterdam-heading-color);
-  font-family: var(--amsterdam-heading-font-family);
-  font-weight: var(--amsterdam-heading-font-weight);
+  color: var(--ams-heading-color);
+  font-family: var(--ams-heading-font-family);
+  font-weight: var(--ams-heading-font-weight);
 
   @include hyphenation;
   @include reset;
 }
 
-.amsterdam-heading--1 {
-  font-size: var(--amsterdam-heading-level-1-font-size);
-  line-height: var(--amsterdam-heading-level-1-line-height);
+.ams-heading--1 {
+  font-size: var(--ams-heading-level-1-font-size);
+  line-height: var(--ams-heading-level-1-line-height);
 }
 
-.amsterdam-heading--2 {
-  font-size: var(--amsterdam-heading-level-2-font-size);
-  line-height: var(--amsterdam-heading-level-2-line-height);
+.ams-heading--2 {
+  font-size: var(--ams-heading-level-2-font-size);
+  line-height: var(--ams-heading-level-2-line-height);
 }
 
-.amsterdam-heading--3 {
-  font-size: var(--amsterdam-heading-level-3-font-size);
-  line-height: var(--amsterdam-heading-level-3-line-height);
+.ams-heading--3 {
+  font-size: var(--ams-heading-level-3-font-size);
+  line-height: var(--ams-heading-level-3-line-height);
 }
 
-.amsterdam-heading--4 {
-  font-size: var(--amsterdam-heading-level-4-font-size);
-  line-height: var(--amsterdam-heading-level-4-line-height);
+.ams-heading--4 {
+  font-size: var(--ams-heading-level-4-font-size);
+  line-height: var(--ams-heading-level-4-line-height);
 }
 
-.amsterdam-heading--5 {
-  font-size: var(--amsterdam-heading-level-5-font-size);
-  line-height: var(--amsterdam-heading-level-5-line-height);
+.ams-heading--5 {
+  font-size: var(--ams-heading-level-5-font-size);
+  line-height: var(--ams-heading-level-5-line-height);
 }
 
-.amsterdam-heading--6 {
-  font-size: var(--amsterdam-heading-level-6-font-size);
-  line-height: var(--amsterdam-heading-level-6-line-height);
+.ams-heading--6 {
+  font-size: var(--ams-heading-level-6-font-size);
+  line-height: var(--ams-heading-level-6-line-height);
 }
 
-.amsterdam-heading--inverse-color {
-  color: var(--amsterdam-heading-inverse-color);
+.ams-heading--inverse-color {
+  color: var(--ams-heading-inverse-color);
 }

package/src/components/icon/icon.scss

@@ -3,52 +3,52 @@
  * Copyright Gemeente Amsterdam
  */
 
-.amsterdam-icon {
+.ams-icon {
   align-items: center;
   display: inline-flex;
 }
 
-.amsterdam-icon svg {
+.ams-icon svg {
   fill: currentColor;
 }
 
-.amsterdam-icon--square {
+.ams-icon--square {
   aspect-ratio: 1 / 1;
   justify-content: center;
 }
 
-.amsterdam-icon--size-3 {
-  height: calc(var(--amsterdam-icon-size-3-font-size) * var(--amsterdam-icon-size-3-line-height));
+.ams-icon--size-3 {
+  height: calc(var(--ams-icon-size-3-font-size) * var(--ams-icon-size-3-line-height));
 }
 
-.amsterdam-icon--size-3 svg {
-  height: var(--amsterdam-icon-size-3-font-size);
-  width: var(--amsterdam-icon-size-3-font-size);
+.ams-icon--size-3 svg {
+  height: var(--ams-icon-size-3-font-size);
+  width: var(--ams-icon-size-3-font-size);
 }
 
-.amsterdam-icon--size-4 {
-  height: calc(var(--amsterdam-icon-size-4-font-size) * var(--amsterdam-icon-size-4-line-height));
+.ams-icon--size-4 {
+  height: calc(var(--ams-icon-size-4-font-size) * var(--ams-icon-size-4-line-height));
 }
 
-.amsterdam-icon--size-4 svg {
-  height: var(--amsterdam-icon-size-4-font-size);
-  width: var(--amsterdam-icon-size-4-font-size);
+.ams-icon--size-4 svg {
+  height: var(--ams-icon-size-4-font-size);
+  width: var(--ams-icon-size-4-font-size);
 }
 
-.amsterdam-icon--size-5 {
-  height: calc(var(--amsterdam-icon-size-5-font-size) * var(--amsterdam-icon-size-5-line-height));
+.ams-icon--size-5 {
+  height: calc(var(--ams-icon-size-5-font-size) * var(--ams-icon-size-5-line-height));
 }
 
-.amsterdam-icon--size-5 svg {
-  height: var(--amsterdam-icon-size-5-font-size);
-  width: var(--amsterdam-icon-size-5-font-size);
+.ams-icon--size-5 svg {
+  height: var(--ams-icon-size-5-font-size);
+  width: var(--ams-icon-size-5-font-size);
 }
 
-.amsterdam-icon--size-6 {
-  height: calc(var(--amsterdam-icon-size-6-font-size) * var(--amsterdam-icon-size-6-line-height));
+.ams-icon--size-6 {
+  height: calc(var(--ams-icon-size-6-font-size) * var(--ams-icon-size-6-line-height));
 }
 
-.amsterdam-icon--size-6 svg {
-  height: var(--amsterdam-icon-size-6-font-size);
-  width: var(--amsterdam-icon-size-6-font-size);
+.ams-icon--size-6 svg {
+  height: var(--ams-icon-size-6-font-size);
+  width: var(--ams-icon-size-6-font-size);
 }

package/src/components/icon-button/icon-button.scss

@@ -9,52 +9,52 @@
   padding-inline: 0;
 }
 
-.amsterdam-icon-button {
+.ams-icon-button {
   background-color: transparent;
-  color: var(--amsterdam-icon-button-color);
+  color: var(--ams-icon-button-color);
   cursor: pointer;
-  outline-offset: var(--amsterdam-icon-button-outline-offset);
+  outline-offset: var(--ams-icon-button-outline-offset);
   touch-action: manipulation;
 
   &:hover {
-    background-color: var(--amsterdam-icon-button-hover-background-color);
-    color: var(--amsterdam-icon-button-hover-color);
+    background-color: var(--ams-icon-button-hover-background-color);
+    color: var(--ams-icon-button-hover-color);
   }
 
   &:disabled {
     background-color: transparent;
-    color: var(--amsterdam-icon-button-disabled-color);
+    color: var(--ams-icon-button-disabled-color);
     cursor: not-allowed;
   }
 
   @include reset;
 }
 
-.amsterdam-icon-button--on-background-light {
-  color: var(--amsterdam-icon-button-on-background-light-color);
+.ams-icon-button--on-background-light {
+  color: var(--ams-icon-button-on-background-light-color);
 
   &:hover {
-    background-color: var(--amsterdam-icon-button-on-background-light-hover-background-color);
-    color: var(--amsterdam-icon-button-on-background-light-hover-color);
+    background-color: var(--ams-icon-button-on-background-light-hover-background-color);
+    color: var(--ams-icon-button-on-background-light-hover-color);
   }
 
   &:disabled {
     background-color: transparent;
-    color: var(--amsterdam-icon-button-on-background-light-disabled-color);
+    color: var(--ams-icon-button-on-background-light-disabled-color);
   }
 }
 
-.amsterdam-icon-button--on-background-dark {
-  background-color: var(--amsterdam-icon-button-on-background-dark-background-color);
-  color: var(--amsterdam-icon-button-on-background-dark-color);
+.ams-icon-button--on-background-dark {
+  background-color: var(--ams-icon-button-on-background-dark-background-color);
+  color: var(--ams-icon-button-on-background-dark-color);
 
   &:hover {
-    background-color: var(--amsterdam-icon-button-on-background-dark-hover-background-color);
-    color: var(--amsterdam-icon-button-on-background-dark-hover-color);
+    background-color: var(--ams-icon-button-on-background-dark-hover-background-color);
+    color: var(--ams-icon-button-on-background-dark-hover-color);
   }
 
   &:disabled {
-    background-color: var(--amsterdam-icon-button-on-background-dark-disabled-background-color);
-    color: var(--amsterdam-icon-button-on-background-dark-disabled-color);
+    background-color: var(--ams-icon-button-on-background-dark-disabled-background-color);
+    color: var(--ams-icon-button-on-background-dark-disabled-color);
   }
 }

package/src/components/image/image.scss

@@ -3,7 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
-.amsterdam-image {
+.ams-image {
   font-style: italic; /* [3] */
   height: auto; /* [1] */
   max-width: 100%; /* [1] */

package/src/components/index.scss

@@ -4,6 +4,8 @@
  */
 
 /* Append here */
+@import "./avatar/avatar";
+@import "./form-field-character-counter/form-field-character-counter";
 @import "./row/row";
 @import "./radio/radio";
 @import "./tabs/tabs";

package/src/components/link/link.scss

@@ -7,71 +7,71 @@
   -webkit-text-size-adjust: 100%;
 }
 
-.amsterdam-link {
-  color: var(--amsterdam-link-color);
-  font-family: var(--amsterdam-link-font-family);
-  font-weight: var(--amsterdam-link-font-weight);
-  outline-offset: var(--amsterdam-link-outline-offset);
+.ams-link {
+  color: var(--ams-link-color);
+  font-family: var(--ams-link-font-family);
+  font-weight: var(--ams-link-font-weight);
+  outline-offset: var(--ams-link-outline-offset);
 
   &:hover {
-    color: var(--amsterdam-link-hover-color);
+    color: var(--ams-link-hover-color);
   }
 
   @include reset;
 }
 
-.amsterdam-link--standalone {
+.ams-link--standalone {
   display: inline-block;
-  font-size: var(--amsterdam-link-standalone-font-size);
-  line-height: var(--amsterdam-link-standalone-line-height);
-  text-decoration-line: var(--amsterdam-link-standalone-text-decoration-line);
-  text-decoration-thickness: var(--amsterdam-link-standalone-text-decoration-thickness);
-  text-underline-offset: var(--amsterdam-link-standalone-text-underline-offset);
+  font-size: var(--ams-link-standalone-font-size);
+  line-height: var(--ams-link-standalone-line-height);
+  text-decoration-line: var(--ams-link-standalone-text-decoration-line);
+  text-decoration-thickness: var(--ams-link-standalone-text-decoration-thickness);
+  text-underline-offset: var(--ams-link-standalone-text-underline-offset);
 
   &:hover {
-    text-decoration-thickness: var(--amsterdam-link-standalone-hover-text-decoration-thickness);
-    text-underline-offset: var(--amsterdam-link-standalone-hover-text-underline-offset);
+    text-decoration-thickness: var(--ams-link-standalone-hover-text-decoration-thickness);
+    text-underline-offset: var(--ams-link-standalone-hover-text-underline-offset);
   }
 }
 
-.amsterdam-link--inline {
-  font-family: var(--amsterdam-link-inline-font-family);
-  font-size: var(--amsterdam-link-inline-font-size);
-  line-height: var(--amsterdam-link-inline-line-height);
-  text-decoration-line: var(--amsterdam-link-inline-text-decoration-line);
-  text-decoration-thickness: var(--amsterdam-link-inline-text-decoration-thickness);
-  text-underline-offset: var(--amsterdam-link-inline-text-underline-offset);
+.ams-link--inline {
+  font-family: var(--ams-link-inline-font-family);
+  font-size: var(--ams-link-inline-font-size);
+  line-height: var(--ams-link-inline-line-height);
+  text-decoration-line: var(--ams-link-inline-text-decoration-line);
+  text-decoration-thickness: var(--ams-link-inline-text-decoration-thickness);
+  text-underline-offset: var(--ams-link-inline-text-underline-offset);
 
   &:hover {
-    text-decoration-thickness: var(--amsterdam-link-inline-hover-text-decoration-thickness);
-    text-underline-offset: var(--amsterdam-link-inline-hover-text-underline-offset);
+    text-decoration-thickness: var(--ams-link-inline-hover-text-decoration-thickness);
+    text-underline-offset: var(--ams-link-inline-hover-text-underline-offset);
   }
 
   &:visited {
-    color: var(--amsterdam-link-inline-visited-color);
+    color: var(--ams-link-inline-visited-color);
   }
 }
 
-.amsterdam-link--on-background-dark {
-  color: var(--amsterdam-link-on-background-dark-color);
+.ams-link--on-background-dark {
+  color: var(--ams-link-on-background-dark-color);
 
   &:hover {
-    color: var(--amsterdam-link-on-background-dark-hover-color);
+    color: var(--ams-link-on-background-dark-hover-color);
   }
 
   &:visited {
-    color: var(--amsterdam-link-on-background-dark-visited-color);
+    color: var(--ams-link-on-background-dark-visited-color);
   }
 }
 
-.amsterdam-link--on-background-light {
-  color: var(--amsterdam-link-on-background-light-color);
+.ams-link--on-background-light {
+  color: var(--ams-link-on-background-light-color);
 
   &:hover {
-    color: var(--amsterdam-link-on-background-light-hover-color);
+    color: var(--ams-link-on-background-light-hover-color);
   }
 
   &:visited {
-    color: var(--amsterdam-link-on-background-light-visited-color);
+    color: var(--ams-link-on-background-light-visited-color);
   }
 }