@amsterdam/design-system-css 0.14.1 → 0.15.0

package/src/components/spotlight/spotlight.scss

@@ -7,22 +7,18 @@
   background-color: var(--ams-spotlight-background-color);
 }
 
-.ams-spotlight--blue {
-  background-color: var(--ams-spotlight-blue-background-color);
-}
-
-.ams-spotlight--dark-blue {
-  background-color: var(--ams-spotlight-dark-blue-background-color);
-}
-
-.ams-spotlight--dark-green {
-  background-color: var(--ams-spotlight-dark-green-background-color);
+.ams-spotlight--azure {
+  background-color: var(--ams-spotlight-azure-background-color);
 }
 
 .ams-spotlight--green {
   background-color: var(--ams-spotlight-green-background-color);
 }
 
+.ams-spotlight--lime {
+  background-color: var(--ams-spotlight-lime-background-color);
+}
+
 .ams-spotlight--magenta {
   background-color: var(--ams-spotlight-magenta-background-color);
 }

package/src/components/switch/switch.scss

@@ -20,7 +20,7 @@
   border: var(--ams-switch-track-border-width) solid transparent;
   border-radius: calc(var(--ams-switch-thumb-inline-size) * 2);
   box-sizing: border-box;
-  cursor: pointer;
+  cursor: var(--ams-switch-cursor);
   display: inline-block;
   inline-size: var(--ams-switch-inline-size);
   outline-offset: var(--ams-switch-outline-offset);
@@ -49,7 +49,7 @@
 
 .ams-switch__input:disabled + .ams-switch__label {
   background-color: var(--ams-switch-disabled-background-color);
-  cursor: not-allowed;
+  cursor: var(--ams-switch-disabled-cursor);
 }
 
 .ams-switch__input:checked + .ams-switch__label::before {

package/src/components/table-of-contents/table-of-contents.scss

@@ -3,6 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
+@use "../../common/hyphenation" as *;
 @use "../../common/text-rendering" as *;
 
 @mixin reset-ul {
@@ -27,6 +28,7 @@
   gap: var(--ams-table-of-contents-list-gap);
   list-style: none;
 
+  @include hyphenation;
   @include text-rendering;
   @include reset-ul;
 

package/src/components/tabs/tabs.scss

@@ -7,7 +7,7 @@
 
 @mixin reset-button {
   background-color: transparent;
-  border: 0;
+  border: none;
   margin-block: 0; // [1]
   margin-inline: 0; // [1]
 
@@ -29,6 +29,7 @@
   color: var(--ams-tabs-button-color);
   cursor: var(--ams-tabs-button-cursor);
   display: grid;
+  flex-shrink: 0;
   font-family: var(--ams-tabs-button-font-family);
   font-size: var(--ams-tabs-button-font-size);
   font-weight: var(--ams-tabs-button-font-weight);
@@ -48,14 +49,16 @@
     }
   }
 
+  &:hover:not([disabled]) {
+    color: var(--ams-tabs-button-hover-color);
+  }
+
   &:hover:not([aria-selected="true"], [disabled]) {
     box-shadow: var(--ams-tabs-button-hover-box-shadow);
-    color: var(--ams-tabs-button-hover-color);
   }
 
   &[aria-selected="true"] {
     box-shadow: var(--ams-tabs-button-selected-box-shadow);
-    color: var(--ams-tabs-button-selected-color);
     font-weight: var(--ams-tabs-button-selected-font-weight);
 
     @media (forced-colors: active) {

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

@@ -8,7 +8,7 @@
 @mixin reset-textarea {
   -webkit-appearance: none; // Reset appearance for Safari < 15.4
   appearance: none; // Reset native appearance, this causes issues on iOS and Android devices
-  border: 0;
+  border: none;
   border-radius: 0; // Reset rounded borders on iOS devices
   margin-block: 0;
 }
@@ -55,7 +55,6 @@
   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(--ams-text-area-invalid-hover-box-shadow);
   }
 }

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

@@ -8,7 +8,7 @@
 @mixin reset-input {
   -webkit-appearance: none; // Reset appearance for Safari < 15.4
   appearance: none; // Reset native appearance, this causes issues on iOS and Android devices
-  border: 0;
+  border: none;
   border-radius: 0; // Reset rounded borders on iOS devices
   margin-block: 0;
 }
@@ -45,7 +45,7 @@
   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;
+  cursor: var(--ams-text-input-disabled-cursor);
 }
 
 .ams-text-input:invalid,
@@ -53,7 +53,6 @@
   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(--ams-text-input-invalid-hover-box-shadow);
   }
 }

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

@@ -8,7 +8,7 @@
 @mixin reset-input {
   -webkit-appearance: none; // Reset appearance for Safari < 15.4
   appearance: none; // Reset native appearance, this causes issues on iOS and Android devices
-  border: 0;
+  border: none;
   border-radius: 0; // Reset rounded borders on iOS devices
   inline-size: auto; // Reset inline size of 10em set by Android devices
   margin-block: 0;
@@ -48,7 +48,7 @@
 .ams-time-input::-webkit-calendar-picker-indicator {
   appearance: none;
   background-image: var(--ams-time-input-calender-picker-indicator-background-image);
-  cursor: pointer;
+  cursor: var(--ams-time-input-calender-picker-indicator-cursor);
 }
 
 .ams-time-input:hover::-webkit-calendar-picker-indicator {
@@ -59,7 +59,7 @@
   background-color: var(--ams-time-input-disabled-background-color);
   box-shadow: var(--ams-time-input-disabled-box-shadow);
   color: var(--ams-time-input-disabled-color);
-  cursor: not-allowed;
+  cursor: var(--ams-time-input-disabled-cursor);
 }
 
 .ams-time-input:disabled::-webkit-calendar-picker-indicator {
@@ -72,7 +72,6 @@
   box-shadow: var(--ams-time-input-invalid-box-shadow);
 
   &:hover {
-    // TODO: this should be the (currently non-existent) dark red hover color
     box-shadow: var(--ams-time-input-invalid-hover-box-shadow);
   }
 }

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

@@ -13,6 +13,9 @@
   gap: var(--ams-top-task-link-gap);
   outline-offset: var(--ams-top-task-link-outline-offset);
   text-decoration: none;
+
+  @include hyphenation;
+  @include text-rendering;
 }
 
 .ams-top-task-link__label {
@@ -25,9 +28,6 @@
   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 text-rendering;
 }
 
 .ams-top-task-link:hover .ams-top-task-link__label {

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

@@ -3,6 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
+@use "../../common/hyphenation" as *;
 @use "../../common/text-rendering" as *;
 
 @mixin reset-ul {
@@ -16,6 +17,7 @@
   display: grid;
   gap: var(--ams-unordered-list-gap);
 
+  @include hyphenation;
   @include text-rendering;
   @include reset-ul;
 }
@@ -34,7 +36,7 @@
   }
 }
 
-.ams-unordered-list--inverse-color:not(.ams-unordered-list--no-markers) {
+.ams-unordered-list--inverse:not(.ams-unordered-list--no-markers) {
   color: var(--ams-unordered-list-inverse-color);
 }
 

package/dist/form-error-list/form-error-list.css

@@ -1 +0,0 @@
-.ams-form-error-list{outline-offset:var(--ams-form-error-list-outline-offset)}@supports(contain: paint) and (not (-moz-appearance: none)){.ams-form-error-list{outline-offset:calc(var(--ams-form-error-list-outline-offset)*2)}@supports(font: -apple-system-body){.ams-form-error-list{outline-offset:var(--ams-form-error-list-outline-offset)}}}/*# sourceMappingURL=form-error-list.css.map */

package/dist/form-error-list/form-error-list.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../../src/components/form-error-list/form-error-list.scss"],"names":[],"mappings":"AAAA,qBACE,yDAIA,4DALF,qBAMI,iEAGA,oCATJ,qBAUM","file":"form-error-list.css"}

package/src/common/size.scss

@@ -1,14 +0,0 @@
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-
-/** The set of available widths for gaps and margins. */
-$ams-sizes: (
-  "no": "none",
-  "xs": "extra-small",
-  "sm": "small",
-  "md": "medium",
-  "lg": "large",
-  "xl": "extra-large",
-);