Matches VS Code radio and checkbox colors

Author: d13

src/webviews/apps/shared/components/checkbox/checkbox.css.ts

@@ -1,8 +1,7 @@
 import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { GlElement, observe } from '../element';
+import { GlElement } from '../element';
 import { checkboxBaseStyles } from '../forms/checkbox.css';
-import { checkboxStyles } from './checkbox.css';
 
 import '../code-icon';
 
@@ -15,7 +14,7 @@ export class Checkbox extends GlElement {
 		delegatesFocus: true,
 	};
 
-	static override readonly styles = [checkboxBaseStyles, checkboxStyles];
+	static override readonly styles = [checkboxBaseStyles];
 
 	@property({ type: Boolean, reflect: true })
 	disabled: boolean = false;
@@ -34,15 +33,9 @@ export class Checkbox extends GlElement {
 
 	constructor() {
 		super();
-		this.disabled = false;
 		this._defaultChecked = this.checked;
 	}
 
-	@observe(['defaultChecked'], { afterFirstUpdate: true })
-	private initChecked() {
-		this.checked = this.defaultChecked;
-	}
-
 	handleChange(e: Event) {
 		this.checked = (e.target as HTMLInputElement).checked;
 		const event = new CustomEvent('gl-change-value');

src/webviews/apps/shared/components/checkbox/checkbox.ts

@@ -2,29 +2,43 @@ import { css } from 'lit';
 
 export const checkboxBaseStyles = css`
 	:host {
+		--checkbox-foreground: var(--vscode-checkbox-foreground);
+		--checkbox-background: var(--vscode-checkbox-background);
+		--checkbox-border: var(--vscode-checkbox-border);
+		--checkbox-checked-foreground: var(--vscode-inputOption-activeForeground);
+		--checkbox-checked-background: var(--vscode-inputOption-activeBackground);
+		--checkbox-checked-border: var(--vscode-inputOption-activeBorder);
+		--checkbox-active-background: var(--vscode-checkbox-selectBackground);
+		--checkbox-active-border: var(--vscode-checkbox-selectBorder);
+		--checkbox-hover-background: var(--vscode-inputOption-hoverBackground);
+		--checkbox-radius: 3px;
+		--checkbox-border-width: 1px;
+		--checkbox-size: 1.6rem;
+		--checkbox-spacing: 1rem;
+
 		display: block;
 		margin-block: 0.8rem;
 	}
 
 	label {
 		display: flex;
-		gap: var(--label-spacing);
+		gap: var(--checkbox-spacing);
 		align-items: center;
-		color: var(--vscode-checkbox-foreground);
 		user-select: none;
 		white-space: nowrap;
 		cursor: pointer;
+		color: var(--checkbox-foreground);
 	}
 
-	label[aria-disabled] {
+	:host([disabled]) label {
 		cursor: default;
 		opacity: 0.5;
 	}
 
 	.label-text {
 		display: block;
 		line-height: normal;
-		margin-inline-end: var(--label-spacing);
+		margin-inline-end: var(--checkbox-spacing);
 	}
 
 	.input {
@@ -38,28 +52,34 @@ export const checkboxBaseStyles = css`
 		align-items: center;
 		justify-content: center;
 		position: relative;
-		width: var(--control-size);
-		height: var(--control-size);
+		width: var(--checkbox-size);
+		height: var(--checkbox-size);
 		box-sizing: border-box;
-		border-radius: var(--control-corner-radius);
-		border: var(--control-border-width) solid var(--vscode-checkbox-border);
-		background: var(--vscode-checkbox-background);
+		border-radius: var(--checkbox-radius);
+		color: var(--checkbox-foreground);
+		background: var(--checkbox-background);
+		border: var(--checkbox-border-width, 1px) solid var(--vscode-checkbox-border);
 	}
 
-	label:not([aria-disabled]) .input:hover + .control {
-		background: var(--vscode-checkbox-background);
-		border-color: var(--vscode-checkbox-border);
+	.input:hover + .control {
+		background-color: var(--checkbox-hover-background);
 	}
 
-	label:not([aria-disabled]) .input:focus-visible + .control,
-	label:not([aria-disabled]) .input:focus + .control {
+	.input:focus-visible + .control,
+	.input:focus + .control {
 		outline: 1px solid var(--vscode-focusBorder);
+		outline-offset: 2px;
+	}
+
+	.input:active + .control {
+		background-color: var(--checkbox-active-background);
+		border-color: var(--checkbox-active-border);
 	}
 
-	label:not([aria-disabled]):active .input + .control,
-	label:not([aria-disabled]) .input:active + .control {
-		background: var(--vscode-checkbox-background);
-		border-color: var(--vscode-focusBorder);
+	:host([checked]) .control {
+		color: var(--checkbox-checked-foreground);
+		background-color: var(--checkbox-checked-background);
+		border-color: var(--checkbox-checked-border);
 	}
 
 	code-icon {

src/webviews/apps/shared/components/forms/checkbox.css.ts

@@ -2,10 +2,13 @@ import { css } from 'lit';
 
 export const radioStyles = css`
 	:host {
-		--design-unit: 4;
-		--control-corner-radius: 50%;
-		--control-border-width: 1px;
-		--control-size: calc(var(--design-unit) * 4px + 2px);
-		--label-spacing: calc(var(--design-unit) * 2px + 2px);
+		--checkbox-radius: 50%;
+		--checkbox-foreground: var(--vscode-radio-inactiveForeground);
+		--checkbox-background: var(--vscode-radio-inactiveBackground);
+		--checkbox-border: var(--vscode-radio-inactiveBorder);
+		--checkbox-checked-foreground: var(--vscode-radio-activeForeground);
+		--checkbox-checked-background: var(--vscode-radio-activeBackground);
+		--checkbox-checked-border: var(--vscode-radio-activeBorder);
+		--checkbox-hover-background: var(--vscode-radio-inactiveHoverBackground);
 	}
 `;

src/webviews/apps/shared/components/radio/radio.css.ts

@@ -52,7 +52,6 @@ export class Radio extends GlElement {
 	}
 
 	override render() {
-		console.log('render', this.value, this.checked);
 		return html`<label ?aria-disabled=${this.disabled}
 			><button class="input" .disabled=${this.disabled} @click=${this.handleClick}></button>
 			<div class="control">${this.renderCircle()}</div>