colorinput dark fix

.github/workflows/lighthouse.yml

-name: Jekyll site CI
-
-on: [push]
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-
-    steps:
-    - name: Checkout
-      uses: actions/checkout@v1
-      
-    - name: Wait for Netlify
-      uses: JakePartusch/wait-for-netlify-action@v1.0
-      with:
-        site_name: tabler
-

_config.yml

@@ -117,6 +117,14 @@ colors:
     hex: '#868e96'
     title: Gray
 
+colors-extra:
+  white:
+    hex: '#ffffff'
+    title: White
+  dark:
+    hex: '#303645'
+    title: Dark
+
 variants:
   - name: success
     icon: check

pages/_includes/parts/input-color.html

+{% assign colors = 'dark,white' | split: ',' %}
+{% for color in site.colors limit: 10 %}
+{% assign colors = colors | push: color[0] %}
+{% endfor %}
+
 <div class="mb-3">
 	<label class="form-label">Color Input</label>
 	<div class="row row-xs">
-		{% for color in site.colors limit: 10 %}
+		{% for color in colors %}
 		<div class="col-auto">
-			<label class="form-colorinput">
-				<input name="color" type="checkbox" value="{{ color[0] }}" class="form-colorinput-input" {% if forloop.index== 2 %} checked{% endif %}/>
-				<span class="form-colorinput-color bg-{{ color[0] }}"></span>
+			<label class="form-colorinput{% if color == 'white' %} form-colorinput-light{% endif %}">
+				<input name="color" type="checkbox" value="{{ color }}" class="form-colorinput-input" {% if forloop.index >= 2 and forloop.index <= 4 %} checked{% endif %}/>
+				<span class="form-colorinput-color bg-{{ color }}"></span>
 			</label>
 		</div>
 		{% endfor %}

pages/_includes/parts/input-image.html

-{% assign limit = include.limit | default: 6 %}
+{% assign limit = include.limit | default: 9 %}
 <div class="mb-3">
 	<label class="form-label">Image Check</label>
 	<div class="row row-xs">
-		{% for photo in site.data.photos limit: limit offset: 30 %}
+		{% assign photos = site.data.photos | where: 'horizontal', true %}
+
+		{% for photo in photos limit: limit %}
 		<div class="{{ include.row-class | default: 'col-6 col-sm-4' }}">
 			<label class="form-imagecheck mb-2">
 				<input name="form-imagecheck" type="checkbox" value="{{ forloop.index }}" class="form-imagecheck-input" {% if forloop.index == 2 or forloop.index == 4  or forloop.index == 7 %} checked{% endif %}/>
 				<span class="form-imagecheck-figure">
-					<img src="{{ site.base }}/static/photos/{{ photo.file }}" alt="" class="form-imagecheck-image">
+					<img src="{{ site.base }}/static/photos/{{ photo.file }}" alt="{{ photo.title }}" class="form-imagecheck-image">
 				</span>
 			</label>
 		</div>

scss/_variables.scss

@@ -388,6 +388,10 @@ $form-check-input-border: 1px solid $border-color !default;
 $form-check-input-border-radius: $border-radius !default;
 $form-check-input-checked-bg-size: .8rem !default;
 
+$form-check-input-checked-color: $white !default;
+$form-check-input-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-check-input-checked-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M4 8.5L6.5 11l6-6'/></svg>") !default;
+$form-check-input-checked-bg-image-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$dark}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M4 8.5L6.5 11l6-6'/></svg>") !default;
+
 $form-check-input-checked-border-color: $border-color !default;
 
 $form-select-indicator-color: opacify($border-color, .24) !default;

scss/ui/forms/_form-colorinput.scss

@@ -24,7 +24,7 @@ Color Input
   border-radius: 3px;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
 
-  &::before {
+  &:before {
     position: absolute;
     top: 0;
     left: 0;
@@ -45,5 +45,11 @@ Color Input
     border-color: $primary;
     box-shadow: $input-btn-focus-box-shadow;
   }
+
+  .form-colorinput-light & {
+    &:before {
+      background-image: escape-svg($form-check-input-checked-bg-image-dark);
+    }
+  }
 }