@amsterdam/design-system-css 0.16.0 → 1.0.1

package/src/components/radio/radio.scss

@@ -41,13 +41,10 @@
 .ams-radio__circle {
   fill: var(--ams-radio-circle-fill);
   stroke: var(--ams-radio-circle-stroke);
-  stroke-width: var(--ams-radio-circle-stroke-width);
 }
 
 .ams-radio__hover-indicator {
-  fill: none;
-  stroke: transparent;
-  stroke-width: var(--ams-radio-hover-indicator-stroke-width);
+  stroke: none;
 }
 
 .ams-radio__checked-indicator {
@@ -169,9 +166,14 @@
   .ams-radio__input[aria-invalid="true"] + .ams-radio__label,
   .ams-radio__input[aria-invalid="true"] + .ams-radio__label:hover {
     .ams-radio__circle {
+      fill: Canvas;
       stroke: FieldText;
     }
 
+    .ams-radio__hover-indicator {
+      stroke: none;
+    }
+
     .ams-radio__checked-indicator {
       fill: FieldText;
     }

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

@@ -13,14 +13,15 @@
 @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: none;
   border-radius: 0; // Reset rounded borders on iOS devices
   margin-block: 0;
 }
 
 .ams-search-field__input {
   background-color: var(--ams-search-field-input-background-color);
-  box-shadow: var(--ams-search-field-input-box-shadow);
+  border-color: var(--ams-search-field-input-border-color);
+  border-style: var(--ams-search-field-input-border-style);
+  border-width: var(--ams-search-field-input-border-width);
   box-sizing: border-box;
   color: var(--ams-search-field-input-color);
   font-family: var(--ams-search-field-input-font-family);
@@ -47,9 +48,10 @@
 
 .ams-search-field__input:invalid,
 .ams-search-field__input[aria-invalid="true"] {
-  box-shadow: var(--ams-search-field-input-invalid-box-shadow);
+  border-color: var(--ams-search-field-input-invalid-border-color);
 
   &:hover {
+    border-color: var(--ams-search-field-input-invalid-hover-border-color);
     box-shadow: var(--ams-search-field-input-invalid-hover-box-shadow);
   }
 }

package/src/components/select/select.scss

@@ -5,13 +5,14 @@
 
 @mixin reset-select {
   appearance: none; // Reset native appearance to hide default chevron
-  border: none;
   border-radius: 0; // Reset rounded borders for Safari on MacOS
 }
 
 .ams-select {
   background-color: var(--ams-select-background-color);
-  box-shadow: var(--ams-select-box-shadow);
+  border-color: var(--ams-select-border-color);
+  border-style: var(--ams-select-border-style);
+  border-width: var(--ams-select-border-width);
   color: var(--ams-select-color);
   font-family: var(--ams-select-font-family);
   font-size: var(--ams-select-font-size);
@@ -31,32 +32,37 @@
     background-repeat: no-repeat;
     background-size: 1em 1em;
   }
-
-  &:hover {
-    box-shadow: var(--ams-select-hover-box-shadow);
-  }
 }
 
 .ams-select:invalid,
 .ams-select[aria-invalid="true"] {
-  box-shadow: var(--ams-select-invalid-box-shadow);
+  border-color: var(--ams-select-invalid-border-color);
 }
 
 .ams-select:disabled {
-  box-shadow: var(--ams-select-disabled-box-shadow);
   color: var(--ams-select-disabled-color);
   cursor: var(--ams-select-disabled-cursor);
 
   &:not([multiple]) {
     background-image: var(--ams-select-disabled-background-image);
+
+    /* stylelint-disable no-descending-specificity */
+    &:hover {
+      background-image: var(--ams-select-hover-background-image);
+    }
   }
 }
 
 .ams-select:invalid:hover,
 .ams-select[aria-invalid="true"]:hover {
+  border-color: var(--ams-select-invalid-hover-border-color);
   box-shadow: var(--ams-select-invalid-hover-box-shadow);
 }
 
+.ams-select:not(:disabled):hover {
+  box-shadow: var(--ams-select-hover-box-shadow);
+}
+
 .ams-select__option:disabled {
   color: var(--ams-select-option-disabled-color);
 }

package/src/components/switch/switch.scss

@@ -12,7 +12,7 @@
 }
 
 .ams-switch__label {
-  --ams-switch-track-border-width: 0.0625rem;
+  --ams-switch-track-border-width: var(--ams-border-width-m);
 
   background-color: var(--ams-switch-background-color);
 

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

@@ -8,14 +8,15 @@
 @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: none;
   border-radius: 0; // Reset rounded borders on iOS devices
   margin-block: 0;
 }
 
 .ams-text-area {
   background-color: var(--ams-text-area-background-color);
-  box-shadow: var(--ams-text-area-box-shadow);
+  border-color: var(--ams-text-area-border-color);
+  border-style: var(--ams-text-area-border-style);
+  border-width: var(--ams-text-area-border-width);
   box-sizing: border-box;
   color: var(--ams-text-area-color);
   font-family: var(--ams-text-area-font-family);
@@ -32,10 +33,6 @@
 
   @include text-rendering;
   @include reset-textarea;
-
-  &:hover {
-    box-shadow: var(--ams-text-area-hover-box-shadow);
-  }
 }
 
 .ams-text-area::placeholder {
@@ -44,21 +41,24 @@
 }
 
 .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);
 }
 
 .ams-text-area:invalid,
 .ams-text-area[aria-invalid="true"] {
-  box-shadow: var(--ams-text-area-invalid-box-shadow);
+  border-color: var(--ams-text-area-invalid-border-color);
 
   &:hover {
+    border-color: var(--ams-text-area-invalid-hover-border-color);
     box-shadow: var(--ams-text-area-invalid-hover-box-shadow);
   }
 }
 
+.ams-text-area:not(:disabled):hover {
+  box-shadow: var(--ams-text-area-hover-box-shadow);
+}
+
 .ams-text-area--resize-none {
   resize: none;
 }

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

@@ -8,21 +8,22 @@
 @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: none;
   border-radius: 0; // Reset rounded borders on iOS devices
   margin-block: 0;
 }
 
 .ams-text-input {
   background-color: var(--ams-text-input-background-color);
-  box-shadow: var(--ams-text-input-box-shadow);
+  border-color: var(--ams-text-input-border-color);
+  border-style: var(--ams-text-input-border-style);
+  border-width: var(--ams-text-input-border-width);
   box-sizing: border-box;
   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);
-  inline-size: 100%;
   line-height: var(--ams-text-input-line-height);
+  max-inline-size: 100%;
   outline-offset: var(--ams-text-input-outline-offset);
   padding-block: var(--ams-text-input-padding-block);
   padding-inline: var(--ams-text-input-padding-inline);
@@ -30,10 +31,10 @@
 
   @include text-rendering;
   @include reset-input;
+}
 
-  &:hover {
-    box-shadow: var(--ams-text-input-hover-box-shadow);
-  }
+.ams-text-input:not([size]) {
+  inline-size: 100%;
 }
 
 .ams-text-input::placeholder {
@@ -42,17 +43,20 @@
 }
 
 .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: var(--ams-text-input-disabled-cursor);
 }
 
 .ams-text-input:invalid,
 .ams-text-input[aria-invalid="true"] {
-  box-shadow: var(--ams-text-input-invalid-box-shadow);
+  border-color: var(--ams-text-input-invalid-border-color);
 
   &:hover {
+    border-color: var(--ams-text-input-invalid-hover-border-color);
     box-shadow: var(--ams-text-input-invalid-hover-box-shadow);
   }
 }
+
+.ams-text-input:not(:disabled):hover {
+  box-shadow: var(--ams-text-input-hover-box-shadow);
+}

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

@@ -8,7 +8,6 @@
 @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: 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;
@@ -16,7 +15,9 @@
 
 .ams-time-input {
   background-color: var(--ams-time-input-background-color);
-  box-shadow: var(--ams-time-input-box-shadow);
+  border-color: var(--ams-time-input-border-color);
+  border-style: var(--ams-time-input-border-style);
+  border-width: var(--ams-time-input-border-width);
   box-sizing: border-box;
   color: var(--ams-time-input-color);
   font-family: var(--ams-time-input-font-family);
@@ -38,10 +39,6 @@
 
   @include text-rendering;
   @include reset-input;
-
-  &:hover {
-    box-shadow: var(--ams-time-input-hover-box-shadow);
-  }
 }
 
 // This changes the default calendar icon on Chromium browsers only
@@ -56,8 +53,6 @@
 }
 
 .ams-time-input:disabled {
-  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: var(--ams-time-input-disabled-cursor);
 }
@@ -69,9 +64,14 @@
 
 .ams-time-input:invalid,
 .ams-time-input[aria-invalid="true"] {
-  box-shadow: var(--ams-time-input-invalid-box-shadow);
+  border-color: var(--ams-time-input-invalid-border-color);
 
   &:hover {
+    border-color: var(--ams-time-input-invalid-hover-border-color);
     box-shadow: var(--ams-time-input-invalid-hover-box-shadow);
   }
 }
+
+.ams-time-input:not(:disabled):hover {
+  box-shadow: var(--ams-time-input-hover-box-shadow);
+}