All form elements implemented.

src/_palette.scss

@@ -160,29 +160,29 @@ $surface: $grey100;
 $standout: $grey50;
 $text: $grey800;
 
-$primary50: $sea50;
+$primary50: $blue50;
-$primary100: $sea100;
+$primary100: $blue100;
-$primary200: $sea200;
+$primary200: $blue200;
-$primary300: $sea300;
+$primary300: $blue300;
-$primary400: $sea400;
+$primary400: $blue400;
-$primary500: $sea500;
+$primary500: $blue500;
-$primary600: $sea600;
+$primary600: $blue600;
-$primary700: $sea700;
+$primary700: $blue700;
-$primary800: $sea800;
+$primary800: $blue800;
-$primary900: $sea900;
+$primary900: $blue900;
-$primary: $sea;
+$primary: $blue;
 
-$accent50:  $purple50;
+$accent50: $yellow50;
-$accent100: $purple100;
+$accent100: $yellow100;
-$accent200: $purple200;
+$accent200: $yellow200;
-$accent300: $purple300;
+$accent300: $yellow300;
-$accent400: $purple400;
+$accent400: $yellow400;
-$accent500: $purple500;
+$accent500: $yellow500;
-$accent600: $purple600;
+$accent600: $yellow600;
-$accent700: $purple700;
+$accent700: $yellow700;
-$accent800: $purple800;
+$accent800: $yellow800;
-$accent900: $purple900;
+$accent900: $yellow900;
-$accent: $purple;
+$accent: $yellow;
 
 $success: $sea;
 $danger: $red;

src/forms.scss

@@ -40,7 +40,8 @@ form {
 }
 
 input,
-textarea {
+textarea,
+select {
     background-color: palette.$standout;
     border: .1rem solid palette.$standout;
     margin: .5rem;
@@ -109,6 +110,10 @@ input[type="radio"] {
     }
 }
 
+textarea {
+    resize: vertical;
+}
+
 input[type="radio"] {
     border-radius: 100%;
 
@@ -146,6 +151,7 @@ input[type="checkbox"].switch {
         top: 50%;
         left: .1rem;
         translate: 0 -50%;
+        transition: .3s;
     }
 
     &:checked::after {
@@ -160,4 +166,83 @@ input[type="checkbox"].switch {
             background-color: palette.$grey900
         }
     }
+}
+
+input[type="color"] {
+    width: 3rem;
+    height: 3rem;
+    padding: .5rem;
+    cursor: pointer;
+
+    &::-moz-color-swatch,
+    &::-webkit-color-swatch {
+        width: 100%;
+        height: 100%;
+        border: 0 none transparent;
+    }
+}
+
+input[type="file"] {
+    font-family: 'Manrope', sans-serif;
+    color: palette.$grey500;
+
+    &::file-selector-button {
+        font-family: 'Manrope', sans-serif;
+        transition: .3s color, .3s background-color;
+        cursor: pointer;
+        text-decoration: none;
+        text-align: center;
+        margin: .5rem 1rem .5rem 0;
+        padding: .5rem 1rem;
+        border: 2px solid palette.$primary;
+
+        @if lightness(palette.$primary) < 50 {
+            color: palette.$grey50
+        }
+
+        @else {
+            color: palette.$grey900
+        }
+
+        background-color: transparent;
+
+        &:hover {
+            background-color: palette.$primary;
+        }
+    }
+}
+
+input[type="range"] {
+    color: transparent;
+    background-color: transparent;
+    border: 0 none transparent;
+    padding: 0;
+
+    &::-moz-range-track,
+    &::-webkit-slider-runnable-track {
+        background-color: palette.$primary;
+
+        @supports selector(input[type="range"]::-moz-range-progress) {
+            background-color: palette.$grey200;
+        }
+
+        height: .5rem;
+        border-radius: .25rem;
+    }
+
+    &::-moz-range-thumb,
+    &::-webkit-slider-thumb {
+        background-color: palette.$grey50;
+        height: 1.25rem;
+        width: 1.25rem;
+        border: 1px solid palette.$grey300;
+        border-radius: .75rem;
+        cursor: pointer;
+    }
+
+    &::-moz-range-progress {
+        background-color: palette.$primary;
+        height: .5rem;
+        border-radius: .25rem;
+    }
 }

web/pages/forms.njk

@@ -37,11 +37,11 @@
 
 		<label for="select">Select:</label>
 		<select name="select" id="select">
-			<option value="select1">Select 1</option>
+			<option value="option1">Option 1</option>
-			<option value="select2">Select 2</option>
+			<option value="option2">Option 2</option>
-			<option value="select3">Select 3</option>
+			<option value="option3">Option 3</option>
-			<option value="select4">Select 4</option>
+			<option value="option4">Option 4</option>
-			<option value="select5">Select 5</option>
+			<option value="option5">Option 5</option>
 		</select>
 	</form>
 {% endblock %}