Adopts design tokens in switch, slider, and segmented styles

Author: d13

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

@@ -7,25 +7,25 @@ export const segmentedStyles = css`
 
 	.group {
 		display: inline-flex;
-		gap: 0.2rem;
-		padding: 0.2rem;
-		border-radius: 0.5rem;
+		gap: var(--gl-space-2);
+		padding: var(--gl-space-2);
 		background-color: var(--vscode-input-background);
-		border: 1px solid var(--vscode-input-border, var(--vscode-contrastBorder, transparent));
+		border: var(--gl-border-width) solid var(--vscode-input-border, var(--vscode-contrastBorder, transparent));
+		border-radius: 0.5rem;
 	}
 
 	.segment {
-		appearance: none;
-		border: 1px solid transparent;
-		border-radius: 0.3rem;
 		padding: 0.3rem 1.2rem;
 		font-family: var(--vscode-font-family);
 		font-size: 1.2rem;
 		line-height: 1.4;
 		color: var(--color-foreground--75);
-		background-color: transparent;
-		cursor: pointer;
 		white-space: nowrap;
+		appearance: none;
+		cursor: pointer;
+		background-color: transparent;
+		border: 1px solid transparent;
+		border-radius: 0.3rem;
 	}
 
 	.segment:hover:not([aria-checked='true']) {
@@ -36,10 +36,10 @@ export const segmentedStyles = css`
 	/* Fill + weight, not color alone, distinguish the selected segment;
 	   the contrast border keeps it visible in high-contrast themes. */
 	.segment[aria-checked='true'] {
+		font-weight: 600;
+		color: var(--vscode-button-foreground);
 		background-color: var(--vscode-button-background);
 		border-color: var(--vscode-contrastBorder, transparent);
-		color: var(--vscode-button-foreground);
-		font-weight: 600;
 	}
 
 	.segment:focus-visible {

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

@@ -3,8 +3,8 @@ import { css } from 'lit';
 export const sliderStyles = css`
 	:host {
 		display: inline-flex;
+		gap: var(--gl-space-12);
 		align-items: center;
-		gap: 1.2rem;
 	}
 
 	wa-slider {
@@ -18,7 +18,7 @@ export const sliderStyles = css`
 
 	wa-slider::part(track) {
 		background-color: color-mix(in srgb, var(--color-foreground) 20%, transparent);
-		border: 1px solid var(--vscode-contrastBorder, transparent);
+		border: var(--gl-border-width) solid var(--vscode-contrastBorder, transparent);
 	}
 
 	wa-slider::part(indicator) {
@@ -27,12 +27,12 @@ export const sliderStyles = css`
 
 	wa-slider::part(thumb) {
 		background-color: var(--vscode-button-background);
-		border: 1px solid var(--vscode-contrastBorder, var(--vscode-button-background));
+		border: var(--gl-border-width) solid var(--vscode-contrastBorder, var(--vscode-button-background));
 		box-shadow: 0 1px 2px var(--vscode-widget-shadow);
 	}
 
 	wa-slider:focus-within::part(thumb) {
-		outline: 1px solid var(--color-focus-border);
+		outline: var(--gl-border-width) solid var(--color-focus-border);
 		outline-offset: 2px;
 	}
 

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

@@ -33,7 +33,7 @@ export const switchStyles = css`
 	   border keeps the track visible in high-contrast themes where the fill may vanish. */
 	wa-switch::part(control) {
 		background-color: color-mix(in srgb, var(--color-foreground) 25%, transparent);
-		border: 1px solid var(--vscode-contrastBorder, transparent);
+		border: var(--gl-border-width) solid var(--vscode-contrastBorder, transparent);
 	}
 
 	/* wa-switch exposes checked as a CSS custom state (customStates.set('checked', …)),
@@ -44,7 +44,7 @@ export const switchStyles = css`
 	}
 
 	wa-switch::part(thumb) {
-		background-color: var(--vscode-button-foreground, #ffffff);
+		background-color: var(--vscode-button-foreground, #fff);
 		border: none;
 		box-shadow: 0 1px 2px var(--vscode-widget-shadow);
 	}
@@ -54,7 +54,7 @@ export const switchStyles = css`
 	}
 
 	wa-switch:focus-within::part(control) {
-		outline: 1px solid var(--color-focus-border);
+		outline: var(--gl-border-width) solid var(--color-focus-border);
 		outline-offset: 2px;
 	}