@amsterdam/design-system-css 0.6.0 → 0.7.0

package/src/components/logo/logo.scss

@@ -3,19 +3,19 @@
  * Copyright Gemeente Amsterdam
  */
 
-.amsterdam-logo {
+.ams-logo {
   display: block;
-  height: var(--amsterdam-logo-height);
+  height: var(--ams-logo-height);
 }
 
-.amsterdam-logo__emblem {
-  fill: var(--amsterdam-logo-emblem-color);
+.ams-logo__emblem {
+  fill: var(--ams-logo-emblem-color);
 }
 
-.amsterdam-logo__text-primary {
-  fill: var(--amsterdam-logo-title-color);
+.ams-logo__text-primary {
+  fill: var(--ams-logo-title-color);
 }
 
-.amsterdam-logo__text-secondary {
-  fill: var(--amsterdam-logo-subsite-color);
+.ams-logo__text-secondary {
+  fill: var(--ams-logo-subsite-color);
 }

package/src/components/margin/margin.scss

@@ -5,8 +5,8 @@
 
 @import "../../common/size";
 
-@each $size in map-keys($amsterdam-sizes) {
-  .amsterdam-mb--#{$size} {
-    margin-block-end: var(--amsterdam-margin-#{$size}) !important;
+@each $size in map-keys($ams-sizes) {
+  .ams-mb--#{$size} {
+    margin-block-end: var(--ams-margin-#{$size}) !important;
   }
 }

package/src/components/mark/mark.scss

@@ -3,6 +3,6 @@
  * Copyright Gemeente Amsterdam
  */
 
-.amsterdam-mark {
-  background-color: var(--amsterdam-mark-background-color);
+.ams-mark {
+  background-color: var(--ams-mark-background-color);
 }

package/src/components/mega-menu/mega-menu.scss

@@ -3,14 +3,14 @@
  * Copyright Gemeente Amsterdam
  */
 
-.amsterdam-mega-menu__list-category {
-  column-gap: var(--amsterdam-mega-menu-list-category-column-gap);
-  column-width: var(--amsterdam-mega-menu-list-category-column-width);
+.ams-mega-menu__list-category {
+  column-gap: var(--ams-mega-menu-list-category-column-gap);
+  column-width: var(--ams-mega-menu-list-category-column-width);
 
   // TODO Move to bottom margin of heading
-  padding-block-start: var(--amsterdam-mega-menu-list-category-padding-block-start);
+  padding-block-start: var(--ams-mega-menu-list-category-padding-block-start);
 
   &:not(:last-child) {
-    padding-block-end: var(--amsterdam-mega-menu-list-category-padding-block-end);
+    padding-block-end: var(--ams-mega-menu-list-category-padding-block-end);
   }
 }

package/src/components/ordered-list/ordered-list.scss

@@ -13,39 +13,39 @@
 }
 
 /** A list is a grid column with a gap between items. */
-.amsterdam-ordered-list {
+.ams-ordered-list {
   @include reset;
 
   display: grid;
-  gap: var(--amsterdam-ordered-list-gap);
+  gap: var(--ams-ordered-list-gap);
 }
 
 /** A list with markers sets typography for its text content. */
-.amsterdam-ordered-list:not(.amsterdam-ordered-list--no-markers) {
-  color: var(--amsterdam-ordered-list-color);
-  font-family: var(--amsterdam-ordered-list-font-family);
-  font-size: var(--amsterdam-ordered-list-font-size);
-  font-weight: var(--amsterdam-ordered-list-font-weight);
-  line-height: var(--amsterdam-ordered-list-line-height);
-  list-style-type: var(--amsterdam-ordered-list-list-style-type);
+.ams-ordered-list:not(.ams-ordered-list--no-markers) {
+  color: var(--ams-ordered-list-color);
+  font-family: var(--ams-ordered-list-font-family);
+  font-size: var(--ams-ordered-list-font-size);
+  font-weight: var(--ams-ordered-list-font-weight);
+  line-height: var(--ams-ordered-list-line-height);
+  list-style-type: var(--ams-ordered-list-list-style-type);
 
   /** List items are responsible for indentation and marker positioning. */
-  .amsterdam-ordered-list__item {
-    margin-inline-start: var(--amsterdam-ordered-list-item-margin-inline-start);
-    padding-inline-start: var(--amsterdam-ordered-list-item-padding-inline-start);
+  .ams-ordered-list__item {
+    margin-inline-start: var(--ams-ordered-list-item-margin-inline-start);
+    padding-inline-start: var(--ams-ordered-list-item-padding-inline-start);
   }
 }
 
-.amsterdam-ordered-list--inverse-color:not(.amsterdam-ordered-list--no-markers) {
-  color: var(--amsterdam-ordered-list-inverse-color);
+.ams-ordered-list--inverse-color:not(.ams-ordered-list--no-markers) {
+  color: var(--ams-ordered-list-inverse-color);
 }
 
 /** A nested list has a different marker and less indentation for correct alignment. */
-:is(.amsterdam-ordered-list, .amsterdam-unordered-list) .amsterdam-ordered-list {
-  list-style-type: var(--amsterdam-ordered-list-ordered-list-list-style-type);
+:is(.ams-ordered-list, .ams-unordered-list) .ams-ordered-list {
+  list-style-type: var(--ams-ordered-list-ordered-list-list-style-type);
 
-  .amsterdam-ordered-list__item {
-    margin-inline-start: var(--amsterdam-ordered-list-ordered-list-item-margin-inline-start);
-    padding-inline-start: var(--amsterdam-ordered-list-ordered-list-item-padding-inline-start);
+  .ams-ordered-list__item {
+    margin-inline-start: var(--ams-ordered-list-ordered-list-item-margin-inline-start);
+    padding-inline-start: var(--ams-ordered-list-ordered-list-item-padding-inline-start);
   }
 }

package/src/components/overlap/overlap.scss

@@ -3,7 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
-.amsterdam-overlap {
+.ams-overlap {
   display: grid;
 
   > * {

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

@@ -11,19 +11,19 @@
   -webkit-text-size-adjust: 100%;
 }
 
-.amsterdam-page-heading {
+.ams-page-heading {
   break-after: avoid;
   break-inside: avoid;
-  color: var(--amsterdam-page-heading-color);
-  font-family: var(--amsterdam-page-heading-font-family);
-  font-size: var(--amsterdam-page-heading-font-size);
-  font-weight: var(--amsterdam-page-heading-font-weight);
-  line-height: var(--amsterdam-page-heading-line-height);
+  color: var(--ams-page-heading-color);
+  font-family: var(--ams-page-heading-font-family);
+  font-size: var(--ams-page-heading-font-size);
+  font-weight: var(--ams-page-heading-font-weight);
+  line-height: var(--ams-page-heading-line-height);
 
   @include hyphenation;
   @include reset;
 }
 
-.amsterdam-page-heading--inverse-color {
-  color: var(--amsterdam-page-heading-inverse-color);
+.ams-page-heading--inverse-color {
+  color: var(--ams-page-heading-inverse-color);
 }

package/src/components/page-menu/page-menu.scss

@@ -14,50 +14,50 @@
   -webkit-text-size-adjust: 100%;
 }
 
-.amsterdam-page-menu {
+.ams-page-menu {
   align-items: center;
-  column-gap: var(--amsterdam-page-menu-column-gap);
+  column-gap: var(--ams-page-menu-column-gap);
   display: flex;
   flex-direction: row;
   list-style: none;
-  row-gap: var(--amsterdam-page-menu-row-gap);
+  row-gap: var(--ams-page-menu-row-gap);
 
   @include reset-list;
 }
 
-.amsterdam-page-menu--align-end {
+.ams-page-menu--align-end {
   justify-content: end;
 }
 
 @mixin page-menu-item {
-  color: var(--amsterdam-page-menu-item-color);
+  color: var(--ams-page-menu-item-color);
   display: inline-flex;
   flex-direction: row;
-  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);
-  gap: var(--amsterdam-page-menu-item-gap);
-  line-height: var(--amsterdam-page-menu-item-line-height);
-  outline-offset: var(--amsterdam-page-menu-item-outline-offset);
+  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);
+  gap: var(--ams-page-menu-item-gap);
+  line-height: var(--ams-page-menu-item-line-height);
+  outline-offset: var(--ams-page-menu-item-outline-offset);
   text-align: center;
-  text-decoration-line: var(--amsterdam-page-menu-item-text-decoration-line);
-  text-decoration-thickness: var(--amsterdam-page-menu-item-text-decoration-thickness);
-  text-underline-offset: var(--amsterdam-page-menu-item-text-underline-offset);
+  text-decoration-line: var(--ams-page-menu-item-text-decoration-line);
+  text-decoration-thickness: var(--ams-page-menu-item-text-decoration-thickness);
+  text-underline-offset: var(--ams-page-menu-item-text-underline-offset);
   touch-action: manipulation;
   white-space: nowrap;
 }
 
-.amsterdam-page-menu__link {
+.ams-page-menu__link {
   @include page-menu-item;
   @include reset-item;
 }
 
-.amsterdam-page-menu__link:hover,
-.amsterdam-page-menu__button:hover {
-  color: var(--amsterdam-page-menu-item-hover-color);
-  text-decoration-line: var(--amsterdam-page-menu-item-hover-text-decoration-line);
+.ams-page-menu__link:hover,
+.ams-page-menu__button:hover {
+  color: var(--ams-page-menu-item-hover-color);
+  text-decoration-line: var(--ams-page-menu-item-hover-text-decoration-line);
 }
 
-.amsterdam-page-menu__link svg {
+.ams-page-menu__link svg {
   color: currentColor;
 }

package/src/components/pagination/pagination.scss

@@ -9,15 +9,15 @@
   padding-inline-start: 0;
 }
 
-.amsterdam-pagination__list {
-  color: var(--amsterdam-pagination-color);
+.ams-pagination__list {
+  color: var(--ams-pagination-color);
   display: flex;
   flex-wrap: wrap;
-  font-family: var(--amsterdam-pagination-font-family);
-  font-size: var(--amsterdam-pagination-font-size);
-  font-weight: var(--amsterdam-pagination-font-weight);
+  font-family: var(--ams-pagination-font-family);
+  font-size: var(--ams-pagination-font-size);
+  font-weight: var(--ams-pagination-font-weight);
   justify-content: center;
-  line-height: var(--amsterdam-pagination-line-height);
+  line-height: var(--ams-pagination-line-height);
 
   @include list-reset;
 }
@@ -29,7 +29,7 @@
   -webkit-text-size-adjust: 100%;
 }
 
-.amsterdam-pagination__button {
+.ams-pagination__button {
   /* The reset is included at the top of the block here, if you set it
   at the bottom `all: unset` overrides the `gap` property. */
   @include button-reset;
@@ -37,16 +37,16 @@
   cursor: pointer;
   display: flex;
   gap: 0.5rem;
-  outline-offset: var(--amsterdam-pagination-button-outline-offset);
-  padding-inline: var(--amsterdam-pagination-button-padding-inline);
-  text-decoration-line: var(--amsterdam-pagination-button-text-decoration-line);
-  text-decoration-thickness: var(--amsterdam-pagination-button-text-decoration-thickness);
-  text-underline-offset: var(--amsterdam-pagination-button-text-underline-offset);
+  outline-offset: var(--ams-pagination-button-outline-offset);
+  padding-inline: var(--ams-pagination-button-padding-inline);
+  text-decoration-line: var(--ams-pagination-button-text-decoration-line);
+  text-decoration-thickness: var(--ams-pagination-button-text-decoration-thickness);
+  text-underline-offset: var(--ams-pagination-button-text-underline-offset);
   touch-action: manipulation;
 
   &:hover {
-    color: var(--amsterdam-pagination-button-hover-color);
-    text-decoration-line: var(--amsterdam-pagination-button-hover-text-decoration-line);
+    color: var(--ams-pagination-button-hover-color);
+    text-decoration-line: var(--ams-pagination-button-hover-text-decoration-line);
   }
 
   &:disabled {
@@ -54,15 +54,15 @@
   }
 
   // Override for icon size
-  span.amsterdam-icon svg {
+  span.ams-icon svg {
     height: 1rem;
     width: 1rem;
   }
 }
 
-.amsterdam-pagination__button--current {
+.ams-pagination__button--current {
   cursor: default;
-  font-weight: var(--amsterdam-pagination-button-current-font-weight);
+  font-weight: var(--ams-pagination-button-current-font-weight);
 
   &:hover {
     text-decoration: none;

package/src/components/paragraph/paragraph.scss

@@ -9,26 +9,26 @@
   -webkit-text-size-adjust: 100%;
 }
 
-.amsterdam-paragraph {
-  color: var(--amsterdam-paragraph-color);
-  font-family: var(--amsterdam-paragraph-font-family);
-  font-size: var(--amsterdam-paragraph-medium-font-size);
-  font-weight: var(--amsterdam-paragraph-font-weight);
-  line-height: var(--amsterdam-paragraph-medium-line-height);
+.ams-paragraph {
+  color: var(--ams-paragraph-color);
+  font-family: var(--ams-paragraph-font-family);
+  font-size: var(--ams-paragraph-medium-font-size);
+  font-weight: var(--ams-paragraph-font-weight);
+  line-height: var(--ams-paragraph-medium-line-height);
 
   @include reset;
 }
 
-.amsterdam-paragraph--small {
-  font-size: var(--amsterdam-paragraph-small-font-size);
-  line-height: var(--amsterdam-paragraph-small-line-height);
+.ams-paragraph--small {
+  font-size: var(--ams-paragraph-small-font-size);
+  line-height: var(--ams-paragraph-small-line-height);
 }
 
-.amsterdam-paragraph--large {
-  font-size: var(--amsterdam-paragraph-large-font-size);
-  line-height: var(--amsterdam-paragraph-large-line-height);
+.ams-paragraph--large {
+  font-size: var(--ams-paragraph-large-font-size);
+  line-height: var(--ams-paragraph-large-line-height);
 }
 
-.amsterdam-paragraph--inverse-color {
-  color: var(--amsterdam-paragraph-inverse-color);
+.ams-paragraph--inverse-color {
+  color: var(--ams-paragraph-inverse-color);
 }

package/src/components/radio/radio.scss

@@ -6,23 +6,23 @@
 @import "../../common/input-label-focus";
 @import "../../common/hide-input";
 
-.amsterdam-radio__input {
+.ams-radio__input {
   @include hide-input;
   @include input-label-focus;
 }
 
-.amsterdam-radio__circle {
+.ams-radio__circle {
   align-items: center;
   display: flex;
   flex-shrink: 0;
-  height: calc(var(--amsterdam-radio-font-size) * var(--amsterdam-radio-line-height));
+  height: calc(var(--ams-radio-font-size) * var(--ams-radio-line-height));
   width: 1.5rem;
 
   &::after {
     background-position: center;
     background-repeat: no-repeat;
     background-size: 1rem;
-    border-color: var(--amsterdam-radio-circle-border-color);
+    border-color: var(--ams-radio-circle-border-color);
     border-radius: 100%;
     border-style: solid;
     border-width: 0.125rem;
@@ -37,25 +37,25 @@
   -webkit-text-size-adjust: 100%;
 }
 
-.amsterdam-radio__label {
-  color: var(--amsterdam-radio-color);
+.ams-radio__label {
+  color: var(--ams-radio-color);
   cursor: pointer;
   display: inline-flex;
-  font-family: var(--amsterdam-radio-font-family);
-  font-size: var(--amsterdam-radio-font-size);
-  font-weight: var(--amsterdam-radio-font-weight);
+  font-family: var(--ams-radio-font-family);
+  font-size: var(--ams-radio-font-size);
+  font-weight: var(--ams-radio-font-weight);
   gap: 0.5rem;
-  line-height: var(--amsterdam-radio-line-height);
-  outline-offset: var(--amsterdam-radio-outline-offset);
+  line-height: var(--ams-radio-line-height);
+  outline-offset: var(--ams-radio-outline-offset);
 
   &:hover {
-    color: var(--amsterdam-radio-hover-color);
+    color: var(--ams-radio-hover-color);
     text-decoration-line: underline;
     text-decoration-thickness: 0.125rem;
     text-underline-offset: 0.375rem;
 
-    .amsterdam-radio__circle::after {
-      border-color: var(--amsterdam-radio-circle-hover-border-color);
+    .ams-radio__circle::after {
+      border-color: var(--ams-radio-circle-hover-border-color);
     }
   }
 
@@ -63,95 +63,95 @@
 }
 
 // Default checked
-.amsterdam-radio__input:checked {
-  + .amsterdam-radio__label .amsterdam-radio__circle::after {
-    background-image: var(--amsterdam-radio-circle-checked-background-image);
+.ams-radio__input:checked {
+  + .ams-radio__label .ams-radio__circle::after {
+    background-image: var(--ams-radio-circle-checked-background-image);
   }
 }
 
 // Invalid unchecked
-.amsterdam-radio__input[aria-invalid="true"] {
-  + .amsterdam-radio__label .amsterdam-radio__circle::after {
-    border-color: var(--amsterdam-radio-circle-invalid-border-color);
+.ams-radio__input[aria-invalid="true"] {
+  + .ams-radio__label .ams-radio__circle::after {
+    border-color: var(--ams-radio-circle-invalid-border-color);
   }
 }
 
 // Disabled unchecked
-.amsterdam-radio__input:disabled {
-  + .amsterdam-radio__label {
-    color: var(--amsterdam-radio-disabled-color);
+.ams-radio__input:disabled {
+  + .ams-radio__label {
+    color: var(--ams-radio-disabled-color);
     cursor: not-allowed;
 
-    .amsterdam-radio__circle::after {
-      border-color: var(--amsterdam-radio-circle-disabled-border-color);
+    .ams-radio__circle::after {
+      border-color: var(--ams-radio-circle-disabled-border-color);
       border-width: 0.125rem;
     }
   }
 }
 
 // Invalid checked
-.amsterdam-radio__input[aria-invalid="true"]:checked {
-  + .amsterdam-radio__label .amsterdam-radio__circle::after {
-    background-image: var(--amsterdam-radio-circle-invalid-checked-background-image);
+.ams-radio__input[aria-invalid="true"]:checked {
+  + .ams-radio__label .ams-radio__circle::after {
+    background-image: var(--ams-radio-circle-invalid-checked-background-image);
   }
 }
 
 // Disabled label
-.amsterdam-radio__input:disabled + .amsterdam-radio__label:hover {
+.ams-radio__input:disabled + .ams-radio__label:hover {
   text-decoration: none;
 }
 
 // Disabled checked
-.amsterdam-radio__input:disabled:checked {
-  + .amsterdam-radio__label .amsterdam-radio__circle::after {
-    background-image: var(--amsterdam-radio-circle-disabled-checked-background-image);
+.ams-radio__input:disabled:checked {
+  + .ams-radio__label .ams-radio__circle::after {
+    background-image: var(--ams-radio-circle-disabled-checked-background-image);
   }
 }
 
 // Disabled invalid unchecked
-.amsterdam-radio__input[aria-invalid="true"]:disabled {
-  + .amsterdam-radio__label .amsterdam-radio__circle::after {
+.ams-radio__input[aria-invalid="true"]:disabled {
+  + .ams-radio__label .ams-radio__circle::after {
     // TODO: currently disabled invalid gets the same styling as disabled. This should get its own styling.
-    border-color: var(--amsterdam-radio-circle-disabled-border-color);
+    border-color: var(--ams-radio-circle-disabled-border-color);
   }
 }
 
 // HOVER STATES
 
 // Invalid unchecked hover
-.amsterdam-radio__input[aria-invalid="true"] + .amsterdam-radio__label:hover .amsterdam-radio__circle::after {
+.ams-radio__input[aria-invalid="true"] + .ams-radio__label:hover .ams-radio__circle::after {
   // TODO: this should be the (currently non-existent) dark red hover color
-  border-color: var(--amsterdam-radio-circle-invalid-hover-border-color);
+  border-color: var(--ams-radio-circle-invalid-hover-border-color);
 }
 
 // Default checked hover
-.amsterdam-radio__input:checked + .amsterdam-radio__label:hover .amsterdam-radio__circle::after {
-  background-image: var(--amsterdam-radio-circle-checked-hover-background-image);
+.ams-radio__input:checked + .ams-radio__label:hover .ams-radio__circle::after {
+  background-image: var(--ams-radio-circle-checked-hover-background-image);
 }
 
 // Invalid checked hover
-.amsterdam-radio__input[aria-invalid="true"]:checked + .amsterdam-radio__label:hover .amsterdam-radio__circle::after {
+.ams-radio__input[aria-invalid="true"]:checked + .ams-radio__label:hover .ams-radio__circle::after {
   // TODO: this should be the (currently non-existent) dark red hover color
-  background-image: var(--amsterdam-radio-circle-invalid-checked-hover-background-image);
+  background-image: var(--ams-radio-circle-invalid-checked-hover-background-image);
 }
 
 // Disabled checked hover
-.amsterdam-radio__input:disabled:checked + .amsterdam-radio__label:hover .amsterdam-radio__circle::after {
-  background-image: var(--amsterdam-radio-circle-disabled-checked-hover-background-image);
+.ams-radio__input:disabled:checked + .ams-radio__label:hover .ams-radio__circle::after {
+  background-image: var(--ams-radio-circle-disabled-checked-hover-background-image);
 }
 
 // Disabled invalid unchecked hover
-.amsterdam-radio__input[aria-invalid="true"]:disabled + .amsterdam-radio__label:hover .amsterdam-radio__circle::after {
+.ams-radio__input[aria-invalid="true"]:disabled + .ams-radio__label:hover .ams-radio__circle::after {
   // TODO: currently disabled invalid gets the same styling as disabled. This should get its own styling.
-  border-color: var(--amsterdam-radio-circle-disabled-border-color);
+  border-color: var(--ams-radio-circle-disabled-border-color);
 }
 
 // DISABLED INVALID STATES
 
 // Disabled invalid checked
-.amsterdam-radio__input[aria-invalid="true"]:disabled:checked {
-  + .amsterdam-radio__label .amsterdam-radio__circle::after {
+.ams-radio__input[aria-invalid="true"]:disabled:checked {
+  + .ams-radio__label .ams-radio__circle::after {
     // TODO: currently disabled invalid gets the same styling as disabled. This should get its own styling.
-    background-image: var(--amsterdam-radio-circle-disabled-checked-background-image);
+    background-image: var(--ams-radio-circle-disabled-checked-background-image);
   }
 }

package/src/components/row/row.scss

@@ -5,13 +5,13 @@
 
 @import "../../common/size";
 
-.amsterdam-row {
+.ams-row {
   display: flex;
   flex-direction: row;
 }
 
-@each $size, $label in $amsterdam-sizes {
-  .amsterdam-row--#{$label} {
-    gap: var(--amsterdam-row-gap-#{$size});
+@each $size, $label in $ams-sizes {
+  .ams-row--#{$label} {
+    gap: var(--ams-row-gap-#{$size});
   }
 }

package/src/components/screen/screen.scss

@@ -7,16 +7,16 @@
   box-sizing: border-box;
 }
 
-.amsterdam-screen {
+.ams-screen {
   @include reset;
 
   margin-inline: auto;
 }
 
-.amsterdam-screen--wide {
-  max-width: var(--amsterdam-screen-wide-max-width);
+.ams-screen--wide {
+  max-width: var(--ams-screen-wide-max-width);
 }
 
-.amsterdam-screen--x-wide {
-  max-width: var(--amsterdam-screen-x-wide-max-width);
+.ams-screen--x-wide {
+  max-width: var(--ams-screen-x-wide-max-width);
 }