Add nicer checkboxes

Author: bendera

src/includes/vscode-select/styles.ts

@@ -313,37 +313,29 @@ export default [
     }
 
     .checkbox-icon {
-      background-color: var(--vscode-settings-checkboxBackground, #313131);
-      border: 1px solid currentColor;
+      align-items: center;
+      background-color: var(--vscode-checkbox-background, #313131);
+      border: 1px solid var(--vscode-checkbox-border);
       border-radius: 2px;
       box-sizing: border-box;
-      height: 14px;
+      color: var(--vscode-checkbox-foreground);
+      display: inline-flex;
+      height: 15px;
+      justify-content: center;
       margin-right: 5px;
       overflow: hidden;
       position: relative;
-      width: 14px;
-    }
-
-    .checkbox-icon.checked:before,
-    .checkbox-icon.checked:after {
-      content: '';
-      display: block;
-      height: 5px;
-      position: absolute;
-      transform: rotate(-45deg);
-      width: 10px;
+      width: 15px;
     }
 
-    .checkbox-icon.checked:before {
-      background-color: var(--vscode-foreground, #cccccc);
-      left: 1px;
-      top: 2.5px;
+    .checkbox-icon svg {
+      display: none;
+      height: 13px;
+      width: 13px;
     }
 
-    .checkbox-icon.checked:after {
-      background-color: var(--vscode-settings-checkboxBackground, #313131);
-      left: 1px;
-      top: -0.5px;
+    .checkbox-icon.checked svg {
+      display: block;
     }
 
     .dropdown-controls {

src/includes/vscode-select/template-elements.ts

@@ -1,4 +1,4 @@
-import {html} from 'lit';
+import {html, svg} from 'lit';
 
 export const chevronDownIcon = html`
   <span class="icon">
@@ -17,3 +17,17 @@ export const chevronDownIcon = html`
     </svg>
   </span>
 `;
+
+export const checkIcon = svg`<svg
+  width="16"
+  height="16"
+  viewBox="0 0 16 16"
+  xmlns="http://www.w3.org/2000/svg"
+  fill="currentColor"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M14.431 3.323l-8.47 10-.79-.036-3.35-4.77.818-.574 2.978 4.24 8.051-9.506.764.646z"
+  />
+</svg>`;

src/includes/vscode-select/vscode-select-base.ts

@@ -8,13 +8,15 @@ import {
 import {classMap} from 'lit/directives/class-map.js';
 import {ifDefined} from 'lit/directives/if-defined.js';
 import {repeat} from 'lit/directives/repeat.js';
+import {when} from 'lit/directives/when.js';
 import '../../vscode-button/index.js';
 import '../../vscode-option/index.js';
 import {VscodeOption} from '../../vscode-option/index.js';
 import {VscElement} from '../VscElement.js';
 import {filterOptionsByPattern, highlightRanges} from './helpers.js';
 import type {InternalOption, Option, FilterMethod} from './types.js';
 import {OptionListController} from './OptionListController.js';
+import {checkIcon} from './template-elements.js';
 
 export const VISIBLE_OPTS = 10;
 export const OPT_HEIGHT = 22;
@@ -604,6 +606,19 @@ export class VscodeSelectBase extends VscElement {
   //#endregion
 
   //#region render functions
+  private _renderCheckbox(
+    checked: boolean,
+    label: string | TemplateResult | TemplateResult[]
+  ) {
+    const checkboxClasses = {
+      'checkbox-icon': true,
+      checked,
+    };
+
+    return html`<span class=${classMap(checkboxClasses)}>${checkIcon}</span
+      ><span class="option-label">${label}</span>`;
+  }
+
   protected _renderOptions(): TemplateResult | TemplateResult[] {
     const list = this._opts.options;
 
@@ -640,11 +655,6 @@ export class VscodeSelectBase extends VscElement {
               selected,
             };
 
-            const checkboxClasses = {
-              'checkbox-icon': true,
-              checked: selected,
-            };
-
             const labelText =
               (op.ranges?.length ?? 0 > 0)
                 ? highlightRanges(op.label, op.ranges ?? [])
@@ -660,10 +670,11 @@ export class VscodeSelectBase extends VscElement {
                 role="option"
                 tabindex="-1"
               >
-                ${this._opts.multiSelect
-                  ? html`<span class=${classMap(checkboxClasses)}></span
-                      ><span class="option-label">${labelText}</span>`
-                  : labelText}
+                ${when(
+                  this._opts.multiSelect,
+                  () => this._renderCheckbox(selected, labelText),
+                  () => labelText
+                )}
               </li>
             `;
           }