feat: add dark theme support

Author: mrholek

scss/themes/dark/variables/components/_select.scss

@@ -0,0 +1,73 @@
+// Dark theme
+
+$c-select-color__dt:                   $body-color__dt !default;
+$c-select-disabled-color__dt:          $text-disabled__dt !default;
+$c-select-bg__dt:                      $input-bg__dt !default;
+$c-select-disabled-bg__dt:             $input-disabled-bg__dt !default;
+$c-select-indicator-color__dt:         $gray-800 !default;
+$c-select-indicator__dt:               url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'><path fill='#{$c-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>") !default;
+$c-select-indicator-bg__dt:            $input-bg__dt !default;
+$c-select-indicator-border-color__dt:  $gray-500 !default;
+$c-select-background__dt:              escape-svg($c-select-indicator) no-repeat right $c-select-padding-x center / $c-select-bg-size !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon)
+$c-select-border-color__dt:            $input-border-color__dt !default;
+
+$c-select-focus-bg__dt:            $input-focus-bg__dt !default;
+$c-select-focus-border-color__dt:  $input-focus-border-color__dt !default;
+$c-select-focus-color__dt:         $input-focus-color__dt !default;
+
+$c-select-tag-bg__dt:             rgba($white, .1) !default;
+$c-select-tag-border-color__dt:   $border-color__dt !default;
+
+$c-select-search-color__dt:         $input-color__dt !default;
+$c-select-search-bg__dt:            transparent !default;
+$c-select-search-border-color__dt:  $input-border-color__dt !default;
+
+$c-select-options-color__dt:         $body-color__dt !default;
+$c-select-options-bg__dt:            $bg-elevation-8 !default;
+$c-select-options-border-color__dt:  $border-color__dt !default;
+
+$c-select-option-hover-color__dt:     $body-color__dt !default;
+$c-select-option-hover-bg__dt:        rgba($white, .04) !default;
+$c-select-option-disabled-color__dt:  $gray-600 !default;
+$c-select-option-selected-bg__dt:     rgba($white, .04) !default;
+
+$c-select-option-indicator-checked-color__dt:          $component-active-color__dt !default;
+$c-select-option-indicator-checked-bg__dt:             $component-active-bg__dt !default;
+$c-select-option-indicator-checked-border-color__dt:   $c-select-option-indicator-checked-bg__dt !default;
+$c-select-option-checkbox-indicator-icon-checked__dt:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path fill='#{$c-select-option-indicator-checked-color__dt}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/></svg>") !default;
+
+// stylelint-disable-next-line scss/dollar-variable-default
+$c-select-theme-map: map-merge(
+  $c-select-theme-map,
+  (
+    dark: (
+      "c-select-color":                                   $c-select-color__dt,
+      "c-select-bg":                                      $c-select-bg__dt,
+      "c-select-background":                              $c-select-background__dt,
+      "c-select-border-color":                            $c-select-border-color__dt,
+      "c-select-focus-bg":                                $c-select-focus-bg__dt,
+      "c-select-focus-border-color":                      $c-select-focus-border-color__dt,
+      "c-select-focus-color":                             $c-select-focus-color__dt,
+      "c-select-tag-bg":                                  $c-select-tag-bg__dt,
+      "c-select-tag-border-color":                        $c-select-tag-border-color__dt,
+      "c-select-disabled-color":                          $c-select-disabled-color__dt,
+      "c-select-disabled-bg":                             $c-select-disabled-bg__dt,
+      "c-select-search-color":                            $c-select-search-color__dt,
+      "c-select-search-bg":                               $c-select-search-bg__dt,
+      "c-select-search-border-color":                     $c-select-search-border-color__dt,
+      "c-select-options-color":                           $c-select-options-color__dt,
+      "c-select-options-bg":                              $c-select-options-bg__dt,
+      "c-select-options-border-color":                    $c-select-options-border-color__dt,
+      "c-select-option-hover-color":                      $c-select-option-hover-color__dt,
+      "c-select-option-hover-bg":                         $c-select-option-hover-bg__dt,
+      "c-select-option-disabled-color":                   $c-select-option-disabled-color__dt,
+      "c-select-option-selected-bg":                      $c-select-option-selected-bg__dt,
+      "c-select-indicator-bg":                            $c-select-indicator-bg__dt,
+      "c-select-indicator-border-color":                  $c-select-indicator-border-color__dt,
+      "c-select-option-indicator-checked-color":          $c-select-option-indicator-checked-color__dt,
+      "c-select-option-indicator-checked-bg":             $c-select-option-indicator-checked-bg__dt,
+      "c-select-option-indicator-checked-border-color":   $c-select-option-indicator-checked-border-color__dt,
+      "c-select-option-checkbox-indicator-icon-checked":  $c-select-option-checkbox-indicator-icon-checked__dt
+    )
+  )
+);