Renamed custom button color to ‘interactive’

dutchcelt · Jan 7, 2024 · 83aeed7 · 83aeed7
1 parent 510f024
commit 83aeed7
Show file tree

Hide file tree

Showing 4 changed files with 1,141 additions and 40 deletions.
diff --git a/src/system-custom-colors.css b/src/system-custom-colors.css
@@ -10,8 +10,8 @@
 		--system-stroke-color: color-mix(in oklab, var(--system-canvas) 55%, var(--system-canvas-text));
 		--system-invalid-color: color-mix(in oklab, var(--system-active-text) 90%, var(--system-canvas-text));
 
-		--system-submit-button: var(--system-accent-color);
-		--system-submit-button-text: var(--system-content-color-light);
+		--system-interactive-color: var(--system-accent-color);
+		--system-canvas-text-inverted: var(--system-content-color-light);
 
 		--system-content-color-light: color-mix(
 			in oklab,

diff --git a/src/system-selectors.css b/src/system-selectors.css
@@ -214,12 +214,12 @@
 	}
 
 	button[type='submit'] {
-		background: var(--system-submit-button);
-		color: var(--system-submit-button-text);
+		background: var(--system-interactive-color);
+		color: var(--system-canvas-text-inverted);
 		border: var(--system-stroke-thin) solid var(--system-accent-color);
 
 		&:is(:focus, :focus-visible, :enabled:hover) {
-			color: var(--system-submit-button-text);
+			color: var(--system-canvas-text-inverted);
 			border-color: color-mix(in oklab, var(--system-accent-color) 85%, var(--system-canvas-text));
 			background: color-mix(in oklab, var(--system-accent-color) 85%, var(--system-canvas-text));
 		}