@amsterdam/design-system-css 0.6.1 → 0.7.1

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);
 }

package/src/components/search-field/search-field.scss

@@ -3,7 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
-.amsterdam-search-field {
+.ams-search-field {
   display: flex;
   isolation: isolate; // create new stacking context, so the input’s z-index doesn’t escape the component
 }
@@ -14,24 +14,24 @@
   -webkit-text-size-adjust: 100%;
 }
 
-.amsterdam-search-field__input {
+.ams-search-field__input {
   border: none;
-  box-shadow: var(--amsterdam-search-field-input-box-shadow);
-  color: var(--amsterdam-search-field-input-color);
-  font-family: var(--amsterdam-search-field-input-font-family);
-  font-size: var(--amsterdam-search-field-input-font-size);
-  font-weight: var(--amsterdam-search-field-input-font-weight);
-  line-height: var(--amsterdam-search-field-input-line-height);
-  outline-offset: var(--amsterdam-search-field-input-outline-offset);
-  padding-block: var(--amsterdam-search-field-input-padding-block);
-  padding-inline: var(--amsterdam-search-field-input-padding-inline);
+  box-shadow: var(--ams-search-field-input-box-shadow);
+  color: var(--ams-search-field-input-color);
+  font-family: var(--ams-search-field-input-font-family);
+  font-size: var(--ams-search-field-input-font-size);
+  font-weight: var(--ams-search-field-input-font-weight);
+  line-height: var(--ams-search-field-input-line-height);
+  outline-offset: var(--ams-search-field-input-outline-offset);
+  padding-block: var(--ams-search-field-input-padding-block);
+  padding-inline: var(--ams-search-field-input-padding-inline);
   touch-action: manipulation;
   width: 100%;
 
   @include reset;
 
   &:hover {
-    box-shadow: var(--amsterdam-search-field-input-hover-box-shadow);
+    box-shadow: var(--ams-search-field-input-hover-box-shadow);
   }
 
   &:focus {
@@ -39,32 +39,32 @@
   }
 }
 
-.amsterdam-search-field__input::placeholder {
-  color: var(--amsterdam-search-field-input-placeholder-color);
+.ams-search-field__input::placeholder {
+  color: var(--ams-search-field-input-placeholder-color);
 }
 
-.amsterdam-search-field__input::-webkit-search-cancel-button {
+.ams-search-field__input::-webkit-search-cancel-button {
   appearance: none;
-  background-image: var(--amsterdam-search-field-input-cancel-button-background-image);
+  background-image: var(--ams-search-field-input-cancel-button-background-image);
   cursor: pointer;
-  height: var(--amsterdam-search-field-input-cancel-button-height);
+  height: var(--ams-search-field-input-cancel-button-height);
   margin-inline-start: 0.5rem;
-  width: var(--amsterdam-search-field-input-cancel-button-width);
+  width: var(--ams-search-field-input-cancel-button-width);
 }
 
-.amsterdam-search-field__button {
-  background-color: var(--amsterdam-search-field-button-background-color);
+.ams-search-field__button {
+  background-color: var(--ams-search-field-button-background-color);
   border: 0;
-  color: var(--amsterdam-search-field-button-color);
+  color: var(--ams-search-field-button-color);
   cursor: pointer;
-  outline-offset: var(--amsterdam-search-field-button-outline-offset);
+  outline-offset: var(--ams-search-field-button-outline-offset);
 
   // TODO Check if these paddings are necessary
-  padding-block: var(--amsterdam-search-field-button-padding-block);
-  padding-inline: var(--amsterdam-search-field-button-padding-inline);
+  padding-block: var(--ams-search-field-button-padding-block);
+  padding-inline: var(--ams-search-field-button-padding-inline);
   touch-action: manipulation;
 
   &:hover {
-    background-color: var(--amsterdam-search-field-button-hover-background-color);
+    background-color: var(--ams-search-field-button-hover-background-color);
   }
 }

package/src/components/skip-link/skip-link.scss

@@ -3,21 +3,21 @@
  * Copyright Gemeente Amsterdam
  */
 
-.amsterdam-skip-link {
-  background-color: var(--amsterdam-skip-link-background-color);
-  color: var(--amsterdam-skip-link-color);
+.ams-skip-link {
+  background-color: var(--ams-skip-link-background-color);
+  color: var(--ams-skip-link-color);
   display: block;
-  font-family: var(--amsterdam-skip-link-font-family);
-  font-size: var(--amsterdam-skip-link-font-size);
-  font-weight: var(--amsterdam-skip-link-font-weight);
-  line-height: var(--amsterdam-skip-link-line-height);
-  outline-offset: var(--amsterdam-skip-link-outline-offset);
-  padding-block: var(--amsterdam-skip-link-padding-block);
-  padding-inline: var(--amsterdam-skip-link-padding-inline);
+  font-family: var(--ams-skip-link-font-family);
+  font-size: var(--ams-skip-link-font-size);
+  font-weight: var(--ams-skip-link-font-weight);
+  line-height: var(--ams-skip-link-line-height);
+  outline-offset: var(--ams-skip-link-outline-offset);
+  padding-block: var(--ams-skip-link-padding-block);
+  padding-inline: var(--ams-skip-link-padding-inline);
   text-align: center;
   text-decoration: none;
 
   &:hover {
-    background-color: var(--amsterdam-skip-link-hover-background-color);
+    background-color: var(--ams-skip-link-hover-background-color);
   }
 }

package/src/components/spotlight/spotlight.scss

@@ -3,34 +3,34 @@
  * Copyright Gemeente Amsterdam
  */
 
-.amsterdam-spotlight--blue {
-  background-color: var(--amsterdam-spotlight-blue-background-color);
+.ams-spotlight--blue {
+  background-color: var(--ams-spotlight-blue-background-color);
 }
 
-.amsterdam-spotlight--dark-blue {
-  background-color: var(--amsterdam-spotlight-dark-blue-background-color);
+.ams-spotlight--dark-blue {
+  background-color: var(--ams-spotlight-dark-blue-background-color);
 }
 
-.amsterdam-spotlight--dark-green {
-  background-color: var(--amsterdam-spotlight-dark-green-background-color);
+.ams-spotlight--dark-green {
+  background-color: var(--ams-spotlight-dark-green-background-color);
 }
 
-.amsterdam-spotlight--green {
-  background-color: var(--amsterdam-spotlight-green-background-color);
+.ams-spotlight--green {
+  background-color: var(--ams-spotlight-green-background-color);
 }
 
-.amsterdam-spotlight--magenta {
-  background-color: var(--amsterdam-spotlight-magenta-background-color);
+.ams-spotlight--magenta {
+  background-color: var(--ams-spotlight-magenta-background-color);
 }
 
-.amsterdam-spotlight--orange {
-  background-color: var(--amsterdam-spotlight-orange-background-color);
+.ams-spotlight--orange {
+  background-color: var(--ams-spotlight-orange-background-color);
 }
 
-.amsterdam-spotlight--purple {
-  background-color: var(--amsterdam-spotlight-purple-background-color);
+.ams-spotlight--purple {
+  background-color: var(--ams-spotlight-purple-background-color);
 }
 
-.amsterdam-spotlight--yellow {
-  background-color: var(--amsterdam-spotlight-yellow-background-color);
+.ams-spotlight--yellow {
+  background-color: var(--ams-spotlight-yellow-background-color);
 }

package/src/components/switch/switch.scss

@@ -10,51 +10,51 @@
   box-sizing: border-box;
 }
 
-.amsterdam-switch__input {
+.ams-switch__input {
   @include hide-input;
   @include input-label-focus;
 }
 
-.amsterdam-switch__label {
-  background-color: var(--amsterdam-switch-background-color);
-  border-radius: calc(var(--amsterdam-switch-thumb-width) * 2);
+.ams-switch__label {
+  background-color: var(--ams-switch-background-color);
+  border-radius: calc(var(--ams-switch-thumb-width) * 2);
   cursor: pointer;
   display: inline-block;
-  outline-offset: var(--amsterdam-switch-outline-offset);
+  outline-offset: var(--ams-switch-outline-offset);
   padding-block: 1px;
   padding-inline: 1px;
   transition: background-color 0.2s ease-in-out;
-  width: var(--amsterdam-switch-width);
+  width: var(--ams-switch-width);
 
   @include reset;
 }
 
-.amsterdam-switch__label::before {
-  background-color: var(--amsterdam-switch-thumb-background-color);
+.ams-switch__label::before {
+  background-color: var(--ams-switch-thumb-background-color);
   border-radius: 50%;
   content: "";
   display: block;
-  height: var(--amsterdam-switch-thumb-height);
+  height: var(--ams-switch-thumb-height);
   transition-duration: 0.1s;
   transition-property: box-shadow, transform;
   transition-timing-function: ease-in-out;
-  width: var(--amsterdam-switch-thumb-width);
+  width: var(--ams-switch-thumb-width);
 }
 
-.amsterdam-switch__input:checked + .amsterdam-switch__label {
-  background-color: var(--amsterdam-switch-checked-background-color);
+.ams-switch__input:checked + .ams-switch__label {
+  background-color: var(--ams-switch-checked-background-color);
 }
 
-.amsterdam-switch__input:disabled + .amsterdam-switch__label {
-  background-color: var(--amsterdam-switch-disabled-background-color);
+.ams-switch__input:disabled + .ams-switch__label {
+  background-color: var(--ams-switch-disabled-background-color);
   cursor: not-allowed;
 }
 
-.amsterdam-switch__input:checked + .amsterdam-switch__label::before {
+.ams-switch__input:checked + .ams-switch__label::before {
   // The 2px is to account for the 1px padding-inline on the label
-  transform: translate(calc(var(--amsterdam-switch-width) - var(--amsterdam-switch-thumb-width) - 2px));
+  transform: translate(calc(var(--ams-switch-width) - var(--ams-switch-thumb-width) - 2px));
 }
 
-.amsterdam-switch:hover .amsterdam-switch__input:enabled + .amsterdam-switch__label::before {
-  box-shadow: 0 0 0 2px var(--amsterdam-switch-thumb-hover-color);
+.ams-switch:hover .ams-switch__input:enabled + .ams-switch__label::before {
+  box-shadow: 0 0 0 2px var(--ams-switch-thumb-hover-color);
 }

package/src/components/table/table.scss

@@ -3,34 +3,34 @@
  * Copyright Gemeente Amsterdam
  */
 
-.amsterdam-table {
+.ams-table {
   overflow-x: auto;
 }
 
-.amsterdam-table__table {
+.ams-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);
+  color: var(--ams-table-color);
+  font-family: var(--ams-table-font-family);
+  font-size: var(--ams-table-font-size);
+  font-weight: var(--ams-table-font-weight);
+  line-height: var(--ams-table-line-height);
 }
 
-.amsterdam-table__caption {
-  font-weight: var(--amsterdam-table-caption-font-weight);
+.ams-table__caption {
+  font-weight: var(--ams-table-caption-font-weight);
   text-align: start;
 }
 
-.amsterdam-table__cell,
-.amsterdam-table__header-cell {
-  border-bottom: var(--amsterdam-table-cell-border-bottom);
-  padding-block: var(--amsterdam-table-cell-padding-block);
-  padding-inline: var(--amsterdam-table-cell-padding-inline);
+.ams-table__cell,
+.ams-table__header-cell {
+  border-bottom: var(--ams-table-cell-border-bottom);
+  padding-block: var(--ams-table-cell-padding-block);
+  padding-inline: var(--ams-table-cell-padding-inline);
   text-align: start;
   vertical-align: top;
 }
 
-.amsterdam-table__header-cell {
-  font-weight: var(--amsterdam-table-header-cell-font-weight);
+.ams-table__header-cell {
+  font-weight: var(--ams-table-header-cell-font-weight);
 }

package/src/components/tabs/tabs.scss

@@ -5,37 +5,37 @@
 
 @import "../../common/breakpoint";
 
-.amsterdam-tabs__list {
-  border-bottom: var(--amsterdam-tabs-list-border-bottom);
+.ams-tabs__list {
+  border-bottom: var(--ams-tabs-list-border-bottom);
   display: flex;
   overflow-x: auto;
 }
 
-.amsterdam-tabs__button {
-  background-color: var(--amsterdam-tabs-button-background-color);
-  border: var(--amsterdam-tabs-button-border);
-  color: var(--amsterdam-tabs-button-color);
-  cursor: var(--amsterdam-tabs-button-cursor);
-  font-family: var(--amsterdam-tabs-button-font-family);
-  font-size: var(--amsterdam-tabs-button-font-size);
-  font-weight: var(--amsterdam-tabs-button-font-weight);
-  line-height: var(--amsterdam-tabs-button-line-height);
-  outline-offset: var(--amsterdam-tabs-button-outline-offset);
-  padding-block: var(--amsterdam-tabs-button-padding-block);
-  padding-inline: var(--amsterdam-tabs-button-padding-inline);
+.ams-tabs__button {
+  background-color: var(--ams-tabs-button-background-color);
+  border: var(--ams-tabs-button-border);
+  color: var(--ams-tabs-button-color);
+  cursor: var(--ams-tabs-button-cursor);
+  font-family: var(--ams-tabs-button-font-family);
+  font-size: var(--ams-tabs-button-font-size);
+  font-weight: var(--ams-tabs-button-font-weight);
+  line-height: var(--ams-tabs-button-line-height);
+  outline-offset: var(--ams-tabs-button-outline-offset);
+  padding-block: var(--ams-tabs-button-padding-block);
+  padding-inline: var(--ams-tabs-button-padding-inline);
 
   &:disabled {
-    color: var(--amsterdam-tabs-button-disabled-color);
-    cursor: var(--amsterdam-tab-button-disabled-cursor);
+    color: var(--ams-tabs-button-disabled-color);
+    cursor: var(--ams-tab-button-disabled-cursor);
   }
 
   &:hover:not([aria-selected="true"], [disabled]) {
-    box-shadow: var(--amsterdam-tabs-button-hover-box-shadow);
-    color: var(--amsterdam-tabs-button-hover-color);
+    box-shadow: var(--ams-tabs-button-hover-box-shadow);
+    color: var(--ams-tabs-button-hover-color);
   }
 
   &[aria-selected="true"] {
-    background-color: var(--amsterdam-tabs-button-selected-background-color);
-    color: var(--amsterdam-tabs-button-selected-color);
+    background-color: var(--ams-tabs-button-selected-background-color);
+    color: var(--ams-tabs-button-selected-color);
   }
 }

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

@@ -9,62 +9,62 @@
   -webkit-text-size-adjust: 100%;
 }
 
-.amsterdam-text-area {
+.ams-text-area {
   border: none;
-  box-shadow: var(--amsterdam-text-area-box-shadow);
-  color: var(--amsterdam-text-area-color);
-  font-family: var(--amsterdam-text-area-font-family);
-  font-size: var(--amsterdam-text-area-font-size);
-  font-weight: var(--amsterdam-text-area-font-weight);
-  line-height: var(--amsterdam-text-area-line-height);
+  box-shadow: var(--ams-text-area-box-shadow);
+  color: var(--ams-text-area-color);
+  font-family: var(--ams-text-area-font-family);
+  font-size: var(--ams-text-area-font-size);
+  font-weight: var(--ams-text-area-font-weight);
+  line-height: var(--ams-text-area-line-height);
   max-width: 100%;
-  min-height: var(--amsterdam-text-area-min-height);
-  outline-offset: var(--amsterdam-text-area-outline-offset);
-  padding-block: var(--amsterdam-text-area-padding-block);
-  padding-inline: var(--amsterdam-text-area-padding-inline);
+  min-height: var(--ams-text-area-min-height);
+  outline-offset: var(--ams-text-area-outline-offset);
+  padding-block: var(--ams-text-area-padding-block);
+  padding-inline: var(--ams-text-area-padding-inline);
   touch-action: manipulation;
   width: 100%;
 
   @include reset;
 
   &:hover {
-    box-shadow: var(--amsterdam-text-area-hover-box-shadow);
+    box-shadow: var(--ams-text-area-hover-box-shadow);
   }
 }
 
-.amsterdam-text-area::placeholder {
-  color: var(--amsterdam-text-area-placeholder-color);
+.ams-text-area::placeholder {
+  color: var(--ams-text-area-placeholder-color);
 }
 
-.amsterdam-text-area:disabled {
-  background-color: var(--amsterdam-text-area-disabled-background-color);
-  box-shadow: var(--amsterdam-text-area-disabled-box-shadow);
-  color: var(--amsterdam-text-area-disabled-color);
-  cursor: var(--amsterdam-text-area-disabled-cursor);
+.ams-text-area:disabled {
+  background-color: var(--ams-text-area-disabled-background-color);
+  box-shadow: var(--ams-text-area-disabled-box-shadow);
+  color: var(--ams-text-area-disabled-color);
+  cursor: var(--ams-text-area-disabled-cursor);
 }
 
-.amsterdam-text-area:invalid,
-.amsterdam-text-area[aria-invalid="true"] {
-  box-shadow: var(--amsterdam-text-area-invalid-box-shadow);
+.ams-text-area:invalid,
+.ams-text-area[aria-invalid="true"] {
+  box-shadow: var(--ams-text-area-invalid-box-shadow);
 
   &:hover {
     // TODO: this should be the (currently non-existent) dark red hover color
-    box-shadow: var(--amsterdam-text-area-invalid-hover-box-shadow);
+    box-shadow: var(--ams-text-area-invalid-hover-box-shadow);
   }
 }
 
-.amsterdam-text-area--resize-none {
+.ams-text-area--resize-none {
   resize: none;
 }
 
-.amsterdam-text-area--resize-horizontal {
+.ams-text-area--resize-horizontal {
   resize: inline;
 }
 
-.amsterdam-text-area--resize-vertical {
+.ams-text-area--resize-vertical {
   resize: block;
 }
 
-.amsterdam-text-area--cols {
+.ams-text-area--cols {
   width: auto;
 }

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

@@ -9,44 +9,44 @@
   -webkit-text-size-adjust: 100%;
 }
 
-.amsterdam-text-input {
+.ams-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-font-size);
-  font-weight: var(--amsterdam-text-input-font-weight);
-  line-height: var(--amsterdam-text-input-line-height);
-  outline-offset: var(--amsterdam-text-input-outline-offset);
-  padding-block: var(--amsterdam-text-input-padding-block);
-  padding-inline: var(--amsterdam-text-input-padding-inline);
+  box-shadow: var(--ams-text-input-box-shadow);
+  color: var(--ams-text-input-color);
+  font-family: var(--ams-text-input-font-family);
+  font-size: var(--ams-text-input-font-size);
+  font-weight: var(--ams-text-input-font-weight);
+  line-height: var(--ams-text-input-line-height);
+  outline-offset: var(--ams-text-input-outline-offset);
+  padding-block: var(--ams-text-input-padding-block);
+  padding-inline: var(--ams-text-input-padding-inline);
   touch-action: manipulation;
   width: 100%;
 
   @include reset;
 
   &:hover {
-    box-shadow: var(--amsterdam-text-input-hover-box-shadow);
+    box-shadow: var(--ams-text-input-hover-box-shadow);
   }
 }
 
-.amsterdam-text-input::placeholder {
-  color: var(--amsterdam-text-input-placeholder-color);
+.ams-text-input::placeholder {
+  color: var(--ams-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);
+.ams-text-input:disabled {
+  background-color: var(--ams-text-input-disabled-background-color);
+  box-shadow: var(--ams-text-input-disabled-box-shadow);
+  color: var(--ams-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);
+.ams-text-input:invalid,
+.ams-text-input[aria-invalid="true"] {
+  box-shadow: var(--ams-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);
+    box-shadow: var(--ams-text-input-invalid-hover-box-shadow);
   }
 }

package/src/components/top-task-link/top-task-link.scss

@@ -5,12 +5,12 @@
 
 @import "../../common/hyphenation";
 
-.amsterdam-top-task-link {
+.ams-top-task-link {
   break-inside: avoid;
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
-  outline-offset: var(--amsterdam-top-task-link-outline-offset);
+  outline-offset: var(--ams-top-task-link-outline-offset);
   text-decoration: none;
 }
 
@@ -19,31 +19,31 @@
   -webkit-text-size-adjust: 100%;
 }
 
-.amsterdam-top-task-link__label {
-  color: var(--amsterdam-top-task-link-label-color);
-  font-family: var(--amsterdam-top-task-link-label-font-family);
-  font-size: var(--amsterdam-top-task-link-label-font-size);
-  font-weight: var(--amsterdam-top-task-link-label-font-weight);
-  line-height: var(--amsterdam-top-task-link-label-line-height);
-  text-decoration-line: var(--amsterdam-top-task-link-label-text-decoration-line);
-  text-decoration-thickness: var(--amsterdam-top-task-link-label-text-decoration-thickness);
-  text-underline-offset: var(--amsterdam-top-task-link-label-text-underline-offset);
+.ams-top-task-link__label {
+  color: var(--ams-top-task-link-label-color);
+  font-family: var(--ams-top-task-link-label-font-family);
+  font-size: var(--ams-top-task-link-label-font-size);
+  font-weight: var(--ams-top-task-link-label-font-weight);
+  line-height: var(--ams-top-task-link-label-line-height);
+  text-decoration-line: var(--ams-top-task-link-label-text-decoration-line);
+  text-decoration-thickness: var(--ams-top-task-link-label-text-decoration-thickness);
+  text-underline-offset: var(--ams-top-task-link-label-text-underline-offset);
 
   @include hyphenation;
   @include reset;
 }
 
-.amsterdam-top-task-link:hover .amsterdam-top-task-link__label {
-  color: var(--amsterdam-top-task-link-label-hover-color);
-  text-decoration-line: var(--amsterdam-top-task-link-label-hover-text-decoration-line);
+.ams-top-task-link:hover .ams-top-task-link__label {
+  color: var(--ams-top-task-link-label-hover-color);
+  text-decoration-line: var(--ams-top-task-link-label-hover-text-decoration-line);
 }
 
-.amsterdam-top-task-link__description {
-  color: var(--amsterdam-top-task-link-description-color);
-  font-family: var(--amsterdam-top-task-link-description-font-family);
-  font-size: var(--amsterdam-top-task-link-description-font-size);
-  font-weight: var(--amsterdam-top-task-link-description-font-weight);
-  line-height: var(--amsterdam-top-task-link-description-line-height);
+.ams-top-task-link__description {
+  color: var(--ams-top-task-link-description-color);
+  font-family: var(--ams-top-task-link-description-font-family);
+  font-size: var(--ams-top-task-link-description-font-size);
+  font-weight: var(--ams-top-task-link-description-font-weight);
+  line-height: var(--ams-top-task-link-description-line-height);
 
   @include reset;
 }