update *.module.css

nhironaka · nhironaka · commit 342630eac3bc · 2026-04-28T18:03:25.000-04:00
diff --git a/packages/button/src/styles/Button.module.css b/packages/button/src/styles/Button.module.css
@@ -7,66 +7,68 @@
 	--lp-component-button-color-bg-destructive-active: var(
 		--lp-color-bg-interactive-destructive-active
 	);
-	--lp-color-border-interactive-primary-flair-base: var(--lp-color-purple-500);
-	--lp-color-border-interactive-primary-flair-hover: var(--lp-color-purple-600);
-	--lp-color-border-interactive-primary-flair-focus: var(--lp-color-purple-800);
-	--lp-color-border-interactive-primary-flair-active: var(--lp-color-purple-800);
-	--lp-color-bg-interactive-secondary-flair-base: var(--lp-color-purple-100);
-	--lp-color-bg-interactive-secondary-flair-hover: var(--lp-color-purple-300);
-	--lp-color-bg-interactive-secondary-flair-focus: var(--lp-color-purple-400);
-	--lp-color-bg-interactive-secondary-flair-active: var(--lp-color-purple-400);
-	--lp-color-border-interactive-secondary-flair-base: var(--lp-color-purple-600);
-	--lp-color-border-interactive-secondary-flair-hover: var(--lp-color-purple-700);
-	--lp-color-border-interactive-secondary-flair-focus: var(--lp-color-purple-800);
-	--lp-color-border-interactive-secondary-flair-active: var(--lp-color-purple-800);
-	--lp-color-text-interactive-flair-base: var(--lp-color-purple-700);
-	--lp-color-text-interactive-flair-hover: var(--lp-color-purple-800);
-	--lp-color-text-interactive-flair-focus: var(--lp-color-purple-900);
-	--lp-color-text-interactive-flair-active: var(--lp-color-purple-900);
+	--lp-color-border-interactive-primary-flair-base: var(--lp-color-info-500);
+	--lp-color-border-interactive-primary-flair-hover: var(--lp-color-info-600);
+	--lp-color-border-interactive-primary-flair-focus: var(--lp-color-info-800);
+	--lp-color-border-interactive-primary-flair-active: var(--lp-color-info-800);
+	--lp-color-bg-interactive-secondary-flair-base: var(--lp-color-info-100);
+	--lp-color-bg-interactive-secondary-flair-hover: var(--lp-color-info-300);
+	--lp-color-bg-interactive-secondary-flair-focus: var(--lp-color-info-400);
+	--lp-color-bg-interactive-secondary-flair-active: var(--lp-color-info-400);
+	--lp-color-border-interactive-secondary-flair-base: var(--lp-color-info-600);
+	--lp-color-border-interactive-secondary-flair-hover: var(--lp-color-info-700);
+	--lp-color-border-interactive-secondary-flair-focus: var(--lp-color-info-800);
+	--lp-color-border-interactive-secondary-flair-active: var(--lp-color-info-800);
+	--lp-color-text-interactive-flair-base: var(--lp-color-info-700);
+	--lp-color-text-interactive-flair-hover: var(--lp-color-info-800);
+	--lp-color-text-interactive-flair-focus: var(--lp-color-info-800);
+	--lp-color-text-interactive-flair-active: var(--lp-color-info-800);
 	--lp-color-bg-interactive-tertiary-flair-base: transparent;
-	--lp-color-bg-interactive-tertiary-flair-hover: var(--lp-color-purple-100);
-	--lp-color-bg-interactive-tertiary-flair-focus: var(--lp-color-purple-300);
-	--lp-color-bg-interactive-tertiary-flair-active: var(--lp-color-purple-300);
+	--lp-color-bg-interactive-tertiary-flair-hover: var(--lp-color-info-100);
+	--lp-color-bg-interactive-tertiary-flair-focus: var(--lp-color-info-300);
+	--lp-color-bg-interactive-tertiary-flair-active: var(--lp-color-info-300);
 }
 
 [data-theme='dark'] {
 	--lp-component-button-color-bg-default: transparent;
-	--lp-component-button-color-border-destructive: var(--lp-color-red-600);
-	--lp-component-button-color-bg-destructive-hover: var(--lp-color-red-900);
-	--lp-component-button-color-bg-destructive-focus: var(--lp-color-red-900);
-	--lp-component-button-color-bg-destructive-active: var(--lp-color-red-900);
-	--lp-color-border-interactive-primary-flair-base: var(--lp-color-purple-600);
-	--lp-color-border-interactive-primary-flair-hover: var(--lp-color-purple-700);
-	--lp-color-bg-interactive-secondary-flair-base: var(--lp-color-purple-950);
-	--lp-color-bg-interactive-secondary-flair-hover: var(--lp-color-purple-900);
-	--lp-color-bg-interactive-secondary-flair-focus: var(--lp-color-purple-950);
-	--lp-color-bg-interactive-secondary-flair-active: var(--lp-color-purple-950);
-	--lp-color-border-interactive-secondary-flair-hover: var(--lp-color-purple-500);
-	--lp-color-border-interactive-secondary-flair-focus: var(--lp-color-purple-700);
-	--lp-color-border-interactive-secondary-flair-active: var(--lp-color-purple-700);
-	--lp-color-text-interactive-flair-base: var(--lp-color-purple-400);
-	--lp-color-text-interactive-flair-hover: var(--lp-color-purple-400);
-	--lp-color-text-interactive-flair-focus: var(--lp-color-purple-400);
-	--lp-color-text-interactive-flair-active: var(--lp-color-purple-400);
-	--lp-color-bg-interactive-tertiary-flair-hover: var(--lp-color-purple-900);
-	--lp-color-bg-interactive-tertiary-flair-focus: var(--lp-color-purple-950);
-	--lp-color-bg-interactive-tertiary-flair-active: var(--lp-color-purple-950);
+	--lp-component-button-color-border-destructive: var(--lp-color-border-interactive-destructive);
+	--lp-component-button-color-bg-destructive-hover: var(--lp-color-bg-interactive-destructive-hover);
+	--lp-component-button-color-bg-destructive-focus: var(--lp-color-bg-interactive-destructive-focus);
+	--lp-component-button-color-bg-destructive-active: var(
+		--lp-color-bg-interactive-destructive-active
+	);
+	--lp-color-border-interactive-primary-flair-base: var(--lp-color-info-600);
+	--lp-color-border-interactive-primary-flair-hover: var(--lp-color-info-700);
+	--lp-color-bg-interactive-secondary-flair-base: var(--lp-color-info-800);
+	--lp-color-bg-interactive-secondary-flair-hover: var(--lp-color-info-800);
+	--lp-color-bg-interactive-secondary-flair-focus: var(--lp-color-info-800);
+	--lp-color-bg-interactive-secondary-flair-active: var(--lp-color-info-800);
+	--lp-color-border-interactive-secondary-flair-hover: var(--lp-color-info-500);
+	--lp-color-border-interactive-secondary-flair-focus: var(--lp-color-info-700);
+	--lp-color-border-interactive-secondary-flair-active: var(--lp-color-info-700);
+	--lp-color-text-interactive-flair-base: var(--lp-color-info-400);
+	--lp-color-text-interactive-flair-hover: var(--lp-color-info-400);
+	--lp-color-text-interactive-flair-focus: var(--lp-color-info-400);
+	--lp-color-text-interactive-flair-active: var(--lp-color-info-400);
+	--lp-color-bg-interactive-tertiary-flair-hover: var(--lp-color-info-800);
+	--lp-color-bg-interactive-tertiary-flair-focus: var(--lp-color-info-800);
+	--lp-color-bg-interactive-tertiary-flair-active: var(--lp-color-info-800);
 }
 
 .Button,
 .ButtonGroup {
 	/* Remaining Legacy Tokens */
 	--Button-border-default: 1px solid transparent;
 	--Button-box-shadow-default-active: none;
-	--Button-color-boxShadow-1-default-active: var(--lp-color-white-950);
+	--Button-color-boxShadow-1-default-active: var(--lp-color-neutral-0);
 	--Button-color-boxShadow-2-default-active: hsl(231.5 100% 62.5% / 0.1);
 	--Button-color-boxShadow-1-default-withIcon-focus: var(--lp-color-shadow-interactive-focus);
 	--Button-color-boxShadow-2-default-withIcon-focus: hsl(231.5 100% 62.5% / 0.1);
 	--Button-box-shadow-withIcon-focus: 0 0 0 1px
 		var(--Button-color-boxShadow-1-default-withIcon-focus), 0 0 0 4px
 		var(--Button-color-boxShadow-2-default-withIcon-focus);
-	--Button-color-text-destructive-focus: var(--lp-color-white-950);
-	--Button-color-background-disabled-withIcon: var(--lp-color-white-950);
+	--Button-color-text-destructive-focus: var(--lp-color-neutral-0);
+	--Button-color-background-disabled-withIcon: var(--lp-color-neutral-0);
 	--Button-color-border-disabled-withIcon: transparent;
 
 	/* End Remaining Legacy Tokens */
@@ -204,8 +206,8 @@
 	--Button-icon-color-fill-disabled-active: var(--lp-color-text-interactive-disabled);
 
 	/* SEARCH BAR CLEAR BUTTON ICON */
-	--Button-icon-clear-color-fill: var(--lp-color-blue-700);
-	--Button-icon-clear-color-text: var(--lp-color-blue-700);
+	--Button-icon-clear-color-fill: var(--lp-color-action-700);
+	--Button-icon-clear-color-text: var(--lp-color-action-700);
 
 	/* ------- PRIMARY FLAIR ------- */
 	--Button-color-border-primary-flair: var(--lp-color-border-interactive-primary-flair-base);
@@ -447,7 +449,7 @@
 
 .Button.Button--close {
 	background-color: transparent;
-	fill: var(--lp-color-gray-700);
+	fill: var(--lp-color-neutral-700);
 	color: var(--lp-color-text-ui-primary-base);
 }
 
@@ -472,9 +474,9 @@
 .Button.Button--close:active {
 	background-color: hsl(0 0% 12.9% / 0.7);
 	box-shadow:
-		0 0 0 1px var(--lp-color-gray-950),
+		0 0 0 1px var(--lp-color-neutral-800),
 		0 0 0 4px hsl(0 0% 12.9% / 0.1);
-	color: var(--lp-color-white-950);
+	color: var(--lp-color-neutral-0);
 }
 
 /* ------- DESTRUCTIVE ------- */
diff --git a/packages/components/src/styles/Alert.module.css b/packages/components/src/styles/Alert.module.css
@@ -1,25 +1,25 @@
 /* Temporary color aliases for Alerts. This block should be removed when the new color system is implemented. */
 :root,
 [data-theme='default'] {
-	--alert-color-border-neutral: var(--lp-color-gray-200);
-	--alert-color-bg-neutral: var(--lp-color-gray-0);
-	--alert-color-border-error: var(--lp-color-red-200);
-	--alert-color-bg-error: var(--lp-color-red-0);
-	--alert-color-border-info: var(--lp-color-blue-200);
-	--alert-color-bg-info: var(--lp-color-blue-0);
-	--alert-color-border-success: var(--lp-color-green-200);
-	--alert-color-bg-success: var(--lp-color-green-0);
+	--alert-color-border-neutral: var(--lp-color-neutral-200);
+	--alert-color-bg-neutral: var(--lp-color-neutral-0);
+	--alert-color-border-error: var(--lp-color-negative-200);
+	--alert-color-bg-error: var(--lp-color-negative-0);
+	--alert-color-border-info: var(--lp-color-action-200);
+	--alert-color-bg-info: var(--lp-color-action-0);
+	--alert-color-border-success: var(--lp-color-positive-200);
+	--alert-color-bg-success: var(--lp-color-positive-0);
 	--alert-color-border-warning: #fad88f;
 	--alert-color-bg-warning: #fdfae4;
 }
 [data-theme='dark'] {
-	--alert-color-border-neutral: var(--lp-color-gray-800);
-	--alert-color-bg-neutral: var(--lp-color-gray-900);
-	--alert-color-border-error: var(--lp-color-red-700);
+	--alert-color-border-neutral: var(--lp-color-neutral-700);
+	--alert-color-bg-neutral: var(--lp-color-neutral-800);
+	--alert-color-border-error: var(--lp-color-negative-700);
 	--alert-color-bg-error: #391620;
-	--alert-color-border-info: var(--lp-color-blue-700);
+	--alert-color-border-info: var(--lp-color-action-700);
 	--alert-color-bg-info: #192142;
-	--alert-color-border-success: var(--lp-color-green-700);
+	--alert-color-border-success: var(--lp-color-positive-700);
 	--alert-color-bg-success: #14260d;
 	--alert-color-border-warning: #932c00;
 	--alert-color-bg-warning: #3c170c;
diff --git a/packages/components/src/styles/Avatar.module.css b/packages/components/src/styles/Avatar.module.css
@@ -28,7 +28,7 @@
 }
 
 .blue {
-	background-color: var(--lp-color-blue-600);
+	background-color: var(--lp-color-action-600);
 }
 
 .pink {
@@ -40,11 +40,11 @@
 }
 
 .purple {
-	background-color: var(--lp-color-purple-600);
+	background-color: var(--lp-color-info-600);
 }
 
 .text {
-	fill: var(--lp-color-white-950);
+	fill: var(--lp-color-neutral-0);
 	text-anchor: middle;
 	dominant-baseline: central;
 }
diff --git a/packages/components/src/styles/Code.module.css b/packages/components/src/styles/Code.module.css
@@ -4,7 +4,7 @@
 	border-radius: var(--lp-border-radius-regular);
 	color: var(--lp-color-text-code-string);
 	width: fit-content;
-	background-color: var(--lp-color-bg-ui-tertiary);
+	background-color: var(--lp-color-bg-ui-secondary);
 	padding: var(--lp-spacing-100) var(--lp-spacing-200);
 	display: inline-flex;
 	border: none;
diff --git a/packages/components/src/styles/Modal.module.css b/packages/components/src/styles/Modal.module.css
@@ -148,7 +148,7 @@
 	inset: 0;
 	width: 100vw;
 	height: var(--visual-viewport-height);
-	background: var(--lp-color-black-500);
+	background: rgb(7 8 12 / 0.5);
 	backdrop-filter: blur(1px);
 	display: flex;
 	align-items: center;
diff --git a/packages/components/src/styles/ProgressBar.module.css b/packages/components/src/styles/ProgressBar.module.css
@@ -12,7 +12,7 @@
 }
 
 .spinner {
-	--fill-color: var(--lp-color-gray-500);
+	--fill-color: var(--lp-color-neutral-500);
 	display: inline-flex;
 }
 
@@ -27,7 +27,7 @@
 }
 
 .outerCircle {
-	stroke: var(--lp-color-white-100);
+	stroke: rgb(255 255 255 / 0.15);
 }
 
 .innerCircle {
diff --git a/packages/components/src/styles/Switch.module.css b/packages/components/src/styles/Switch.module.css
@@ -26,7 +26,7 @@
 
 .handle {
 	display: block;
-	background-color: var(--lp-color-white-950);
+	background-color: var(--lp-color-neutral-0);
 	width: var(--lp-size-16);
 	height: var(--lp-size-16);
 	border-radius: var(--lp-border-radius-large);
@@ -56,8 +56,8 @@
 
 .switch[data-selected] {
 	& .track {
-		background-color: var(--lp-color-green-500);
-		border: 1px solid var(--lp-color-green-600);
+		background-color: var(--lp-color-positive-500);
+		border: 1px solid var(--lp-color-positive-600);
 	}
 
 	& .handle {
@@ -69,7 +69,7 @@
 	}
 
 	& .label {
-		color: var(--lp-color-white-950);
+		color: var(--lp-color-neutral-0);
 		left: var(--lp-spacing-300);
 		text-shadow: 0 0 1px rgb(40 40 40 / 0.7);
 	}
diff --git a/packages/components/src/styles/Tooltip.module.css b/packages/components/src/styles/Tooltip.module.css
@@ -54,9 +54,9 @@
 	}
 
 	& kbd {
-		color: var(--lp-color-gray-100);
-		background-color: var(--lp-color-gray-900);
-		border: 1px solid var(--lp-color-gray-700);
-		box-shadow: inset 0 -1px 0 var(--lp-color-gray-700);
+		color: var(--lp-color-neutral-100);
+		background-color: var(--lp-color-neutral-800);
+		border: 1px solid var(--lp-color-neutral-700);
+		box-shadow: inset 0 -1px 0 var(--lp-color-neutral-700);
 	}
 }
diff --git a/packages/drawer/src/styles/Drawer.module.css b/packages/drawer/src/styles/Drawer.module.css
@@ -75,7 +75,7 @@
 }
 
 .content section + section {
-	border-top: 1px dotted var(--lp-color-gray-100);
+	border-top: 1px dotted var(--lp-color-neutral-100);
 }
 
 .closeButton {
diff --git a/packages/filter/src/styles/Filter.module.css b/packages/filter/src/styles/Filter.module.css
@@ -2,13 +2,13 @@
 [data-theme='default'] {
 	--lp-component-filter-color-bg-clearable: rgb(0 0 0 / 0.15);
 	--lp-component-filter-color-bg-clearable-focus: rgb(0 0 0 / 0.2);
-	--lp-component-filter-color-border-clearable-focus: var(--lp-color-gray-800);
+	--lp-component-filter-color-border-clearable-focus: var(--lp-color-neutral-800);
 }
 
 [data-theme='dark'] {
 	--lp-component-filter-color-bg-clearable: rgb(248 248 248 / 0.15);
 	--lp-component-filter-color-bg-clearable-focus: rgb(248 248 248 / 0.2);
-	--lp-component-filter-color-border-clearable-focus: var(--lp-color-gray-500);
+	--lp-component-filter-color-border-clearable-focus: var(--lp-color-neutral-500);
 }
 
 .filter {
diff --git a/packages/form/src/styles/Form.module.css b/packages/form/src/styles/Form.module.css
@@ -1,10 +1,10 @@
 :root,
 [data-theme='default'] {
-	--lp-component-form-color-text-label-disabled: var(--lp-color-gray-800);
+	--lp-component-form-color-text-label-disabled: var(--lp-color-neutral-800);
 }
 
 [data-theme='dark'] {
-	--lp-component-form-color-text-label-disabled: var(--lp-color-gray-400);
+	--lp-component-form-color-text-label-disabled: var(--lp-color-neutral-400);
 }
 
 .formGroup {
@@ -297,7 +297,7 @@ input[type='checkbox']:disabled {
 .formInput[readonly],
 .formInput[readonly]:focus {
 	color: var(--lp-color-text-ui-secondary);
-	border-color: var(--lp-color-gray-500);
+	border-color: var(--lp-color-neutral-500);
 	box-shadow: none;
 }
 
diff --git a/packages/icons/src/styles/BadgeIcon.module.css b/packages/icons/src/styles/BadgeIcon.module.css
@@ -97,14 +97,15 @@
 .gradient5,
 .gradient6 {
 	& [data-icon] {
-		fill: var(--lp-color-white-900);
+		/* brand backgrounds are theme-constant; icon fill must be too */
+		fill: rgb(255 255 255 / 0.9);
 	}
 }
 
 .yellow,
 .green,
 .gradient7 {
 	& [data-icon] {
-		fill: var(--lp-color-black-700);
+		fill: var(--lp-color-neutral-700);
 	}
 }
diff --git a/packages/modal/src/styles/Modal.module.css b/packages/modal/src/styles/Modal.module.css
@@ -3,12 +3,12 @@
 :root,
 [data-theme='default'] {
 	--lp-component-modal-color-bg-overlay: rgb(40 40 40 / 0.5);
-	--lp-component-modal-color-bg-content: var(--lp-color-white-950);
+	--lp-component-modal-color-bg-content: var(--lp-color-neutral-0);
 }
 
 [data-theme='dark'] {
 	--lp-component-modal-color-bg-overlay: rgb(25 25 25 / 0.75);
-	--lp-component-modal-color-bg-content: var(--lp-color-gray-950);
+	--lp-component-modal-color-bg-content: var(--lp-color-neutral-800);
 }
 
 :global(.has-overlay) {
diff --git a/packages/navigation/src/styles/Navigation.module.css b/packages/navigation/src/styles/Navigation.module.css
@@ -133,7 +133,7 @@
 }
 
 .NavItem:focus .NavItem-name {
-	box-shadow: 0 0 0 0.125rem var(--lp-color-blue-600);
+	box-shadow: 0 0 0 0.125rem var(--lp-color-action-600);
 	border-radius: 0.375rem;
 }
 
diff --git a/packages/tokens/src/themes.ts b/packages/tokens/src/themes.ts
@@ -7,11 +7,7 @@ export type Theme = (typeof themes)[number];
 
 export const css = (theme: Theme): Config => ({
 	log: { verbosity: 'verbose' },
-	source: [
-		'tokens/color-primitives.default.json',
-		'tokens/color-primitives-map.json',
-		`tokens/*.${theme}.json`,
-	],
+	source: ['tokens/color-primitives-map.default.json', `tokens/*.${theme}.json`],
 	platforms: {
 		css: {
 			prefix: 'lp',
diff --git a/packages/tokens/tokens/color-primitives-map.default.json b/packages/tokens/tokens/color-primitives-map.default.json
diff --git a/packages/tooltip/src/styles/Tooltip.module.css b/packages/tooltip/src/styles/Tooltip.module.css

Original file line number	Diff line number	Diff line change
`@@ -28,7 +28,7 @@`
`28`	`28`	`}`
`29`	`29`
`30`	`30`	`.blue {`
`31`		`- background-color: var(--lp-color-blue-600);`
	`31`	`+ background-color: var(--lp-color-action-600);`
`32`	`32`	`}`
`33`	`33`
`34`	`34`	`.pink {`
`@@ -40,11 +40,11 @@`
`40`	`40`	`}`
`41`	`41`
`42`	`42`	`.purple {`
`43`		`- background-color: var(--lp-color-purple-600);`
	`43`	`+ background-color: var(--lp-color-info-600);`
`44`	`44`	`}`
`45`	`45`
`46`	`46`	`.text {`
`47`		`- fill: var(--lp-color-white-950);`
	`47`	`+ fill: var(--lp-color-neutral-0);`
`48`	`48`	`text-anchor: middle;`
`49`	`49`	`dominant-baseline: central;`
`50`	`50`	`}`
Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,7 @@`
`12`	`12`	`}`
`13`	`13`
`14`	`14`	`.spinner {`
`15`		`- --fill-color: var(--lp-color-gray-500);`
	`15`	`+ --fill-color: var(--lp-color-neutral-500);`
`16`	`16`	`display: inline-flex;`
`17`	`17`	`}`
`18`	`18`
`@@ -27,7 +27,7 @@`
`27`	`27`	`}`
`28`	`28`
`29`	`29`	`.outerCircle {`
`30`		`- stroke: var(--lp-color-white-100);`
	`30`	`+ stroke: rgb(255 255 255 / 0.15);`
`31`	`31`	`}`
`32`	`32`
`33`	`33`	`.innerCircle {`
Original file line number	Diff line number	Diff line change
`@@ -54,9 +54,9 @@`
`54`	`54`	`}`
`55`	`55`
`56`	`56`	`& kbd {`
`57`		`- color: var(--lp-color-gray-100);`
`58`		`- background-color: var(--lp-color-gray-900);`
`59`		`- border: 1px solid var(--lp-color-gray-700);`
`60`		`- box-shadow: inset 0 -1px 0 var(--lp-color-gray-700);`
	`57`	`+ color: var(--lp-color-neutral-100);`
	`58`	`+ background-color: var(--lp-color-neutral-800);`
	`59`	`+ border: 1px solid var(--lp-color-neutral-700);`
	`60`	`+ box-shadow: inset 0 -1px 0 var(--lp-color-neutral-700);`
`61`	`61`	`}`
`62`	`62`	`}`
Original file line number	Diff line number	Diff line change
`@@ -75,7 +75,7 @@`
`75`	`75`	`}`
`76`	`76`
`77`	`77`	`.content section + section {`
`78`		`- border-top: 1px dotted var(--lp-color-gray-100);`
	`78`	`+ border-top: 1px dotted var(--lp-color-neutral-100);`
`79`	`79`	`}`
`80`	`80`
`81`	`81`	`.closeButton {`
Original file line number	Diff line number	Diff line change
`@@ -2,13 +2,13 @@`
`2`	`2`	`[data-theme='default'] {`
`3`	`3`	`--lp-component-filter-color-bg-clearable: rgb(0 0 0 / 0.15);`
`4`	`4`	`--lp-component-filter-color-bg-clearable-focus: rgb(0 0 0 / 0.2);`
`5`		`- --lp-component-filter-color-border-clearable-focus: var(--lp-color-gray-800);`
	`5`	`+ --lp-component-filter-color-border-clearable-focus: var(--lp-color-neutral-800);`
`6`	`6`	`}`
`7`	`7`
`8`	`8`	`[data-theme='dark'] {`
`9`	`9`	`--lp-component-filter-color-bg-clearable: rgb(248 248 248 / 0.15);`
`10`	`10`	`--lp-component-filter-color-bg-clearable-focus: rgb(248 248 248 / 0.2);`
`11`		`- --lp-component-filter-color-border-clearable-focus: var(--lp-color-gray-500);`
	`11`	`+ --lp-component-filter-color-border-clearable-focus: var(--lp-color-neutral-500);`
`12`	`12`	`}`
`13`	`13`
`14`	`14`	`.filter {`