fix: replace SCSS variables with CSS custom properties

src/css/common/_demo.scss

@@ -1,17 +1,6 @@
 // Shared chrome for the feature walkthroughs. Each demo styles its own stage
 // content; everything here is the frame around it.
 
-$callout-inline-size: 320px;
-$callout-breakpoint: 1400px;
-
-// One step above the WordPress modal overlay (100000), so the commentary is
-// not dimmed by a modal the walkthrough opened.
-$above-modal-overlay: 100001;
-
-// Space kept between the callout and both the modal and the viewport edge.
-$modal-gutter-inset: 40px;
-
-
 @keyframes demo-fade-in {
 	from {
 		opacity: 0;
@@ -62,14 +51,16 @@ $modal-gutter-inset: 40px;
 }
 
 .demo-callout {
+	--cs-callout-inline-size: 320px;
+
 	// Anchored to the foot of the viewport rather than its middle: the demo
 	// pages fill their width, so a centred panel lands on the fields the
 	// commentary is describing.
 	position: fixed;
 	inset-inline-end: 28px;
 	inset-block-end: 28px;
 	z-index: 100;
-	inline-size: $callout-inline-size;
+	inline-size: var(--cs-callout-inline-size);
 	box-sizing: border-box;
 	padding: 16px 18px;
 	border: 1px solid #b9d4ea;
@@ -81,7 +72,7 @@ $modal-gutter-inset: 40px;
 
 	// Narrow screens have no room beside the walkthrough, so the panel is
 	// dropped rather than allowed to obscure the thing it describes.
-	@media (width <= $callout-breakpoint) {
+	@media (width <= 1400px) {
 		display: none;
 	}
 }
@@ -127,9 +118,11 @@ $modal-gutter-inset: 40px;
 // rises above the overlay instead, narrowing to the gutter beside the modal so
 // it never covers what it is describing.
 body.modal-open .demo-callout {
-	z-index: $above-modal-overlay;
-	inline-size: calc((100vw - var(--cs-preview-modal-inline-size)) / 2 - #{$modal-gutter-inset});
-	max-inline-size: $callout-inline-size;
+	// One step above the WordPress modal overlay (100000), so the commentary is
+	// not dimmed by a modal the walkthrough opened.
+	z-index: 100001;
+	inline-size: calc((100vw - var(--cs-preview-modal-inline-size)) / 2 - var(--cs-preview-modal-inset));
+	max-inline-size: var(--cs-callout-inline-size);
 }
 
 // Marks the button the walkthrough is "clicking", so a simulated press reads

src/css/common/_theme.scss

@@ -33,7 +33,9 @@
 	--cs-card-radius: 8px;
 	--cs-control-height: 38px;
 	--cs-control-radius: 5px;
+	--cs-feedback-modal-inline-size: 460px;
 	--cs-preview-modal-inline-size: min(900px, 90vw);
+	--cs-preview-modal-inset: 40px;
 	--cs-font-size-body: 14px;
 	--cs-line-height-body: 1.5;
 	--cs-direction-multiplier: 1; // LTR = 1, RTL = -1

src/css/feedback.scss

@@ -1,9 +1,5 @@
 @use 'common/theme';
 
-$feedback-panel-inline-size: 460px;
-$feedback-danger: #d63638;
-$feedback-success: #00a32a;
-
 .code-snippets-feedback-launcher {
 	position: fixed;
 	inset-block-end: 24px;
@@ -68,7 +64,7 @@ $feedback-success: #00a32a;
 	inline-size: 6px;
 	block-size: 6px;
 	border-radius: 50%;
-	background: $feedback-danger;
+	background: var(--cs-color-error);
 }
 
 // The drawer slides in from the inline end, so it reads as arriving from the edge of the
@@ -99,7 +95,7 @@ $feedback-success: #00a32a;
 	position: fixed;
 	inset-block: 0;
 	inset-inline-end: 0;
-	inline-size: $feedback-panel-inline-size;
+	inline-size: var(--cs-feedback-modal-inline-size);
 	max-inline-size: 100vw;
 	block-size: 100%;
 	max-block-size: 100%;
@@ -271,12 +267,12 @@ $feedback-success: #00a32a;
 	padding-inline: 12px;
 	margin-block: 0 18px;
 	border-radius: var(--cs-control-radius);
-	border-inline-start: 4px solid $feedback-danger;
+	border-inline-start: 4px solid var(--cs-color-error);
 	background: #fcf0f1;
 	scroll-margin-block-start: 8px;
 
 	&:focus {
-		outline: 2px solid $feedback-danger;
+		outline: 2px solid var(--cs-color-error);
 		outline-offset: 2px;
 	}
 }
@@ -304,7 +300,7 @@ $feedback-success: #00a32a;
 		margin-block-end: 12px;
 		margin-inline: auto;
 		border-radius: 50%;
-		background: $feedback-success;
+		background: var(--cs-color-success);
 	}
 }
 

src/css/manage/blueprints/_form-fields.scss

@@ -1,7 +1,3 @@
-@use 'sass:color';
-
-$surface-color: #fff;
-
 .blueprint-form-field {
 	display: flex;
 	flex-direction: column;
@@ -59,7 +55,7 @@ $surface-color: #fff;
 	align-items: flex-start;
 	gap: 12px 20px;
 	padding: 12px 14px;
-	background: color.adjust($surface-color, $lightness: -2%);
+	background: #fafafa;
 	border: 1px solid var(--cs-color-border);
 	border-radius: 5px;
 

src/css/settings.scss

@@ -6,9 +6,6 @@
 @use 'common/wp-admin';
 @use 'common/page-header';
 
-$sections: general, editor, debug, version-switch,
-	editing, running, insights, library, interface, advanced;
-
 .wrap.code-snippets-settings {
 	margin-block-start: 0;
 }
@@ -91,10 +88,17 @@ body.js {
 		display: none;
 	}
 
-	@each $section in $sections {
-		.wrap[data-active-tab=#{$section}] .#{$section}-settings {
-			display: block;
-		}
+	.wrap[data-active-tab='general'] .general-settings,
+	.wrap[data-active-tab='editor'] .editor-settings,
+	.wrap[data-active-tab='debug'] .debug-settings,
+	.wrap[data-active-tab='version-switch'] .version-switch-settings,
+	.wrap[data-active-tab='editing'] .editing-settings,
+	.wrap[data-active-tab='running'] .running-settings,
+	.wrap[data-active-tab='insights'] .insights-settings,
+	.wrap[data-active-tab='library'] .library-settings,
+	.wrap[data-active-tab='interface'] .interface-settings,
+	.wrap[data-active-tab='advanced'] .advanced-settings {
+		display: block;
 	}
 }
 

src/css/welcome.scss

@@ -188,20 +188,32 @@
 		gap: 10px;
 	}
 
-	$icon-colors: (
-		lightbulb #f1c40f,
-		chart-line #85144b,
-		buddicons-replies #3d9970,
-		remove #ffbf00,
-		trash #c0c0c0,
-		shield #0074d9,
-		open-folder #5d2f27
-	);
-
-	@each $icon, $color in $icon-colors {
-		.dashicons-#{$icon} {
-			color: $color;
-		}
+	.dashicons-lightbulb {
+		color: #f1c40f;
+	}
+
+	.dashicons-chart-line {
+		color: #85144b;
+	}
+
+	.dashicons-buddicons-replies {
+		color: #3d9970;
+	}
+
+	.dashicons-remove {
+		color: #ffbf00;
+	}
+
+	.dashicons-trash {
+		color: #c0c0c0;
+	}
+
+	.dashicons-shield {
+		color: #0074d9;
+	}
+
+	.dashicons-open-folder {
+		color: #5d2f27;
 	}
 }