move --sk-raised tokens into buttons.css

Author: Rich-Harris

packages/site-kit/src/lib/styles/tokens/colours.css

@@ -46,18 +46,6 @@
 
 	/* overrides */
 	--shiki-color-background: var(--sk-bg-2);
-
-	/* raised buttons */
-	--sk-raised-color: var(--sk-border-light) var(--sk-border-medium) var(--sk-border-medium)
-		var(--sk-border-light);
-	--sk-raised-hover-color: var(--sk-border-medium) var(--sk-border-dark) var(--sk-border-dark)
-		var(--sk-border-medium);
-	--sk-raised-active-color: var(--sk-border-dark) var(--sk-border-medium) var(--sk-border-medium)
-		var(--sk-border-dark);
-
-	/* TODO move these somewhere else? */
-	--sk-raised-width: 1px 2px 2px 1px;
-	--sk-raised-active-width: 2px 1px 1px 2px;
 }
 
 :root.dark {
@@ -97,12 +85,4 @@
 
 	/* overrides */
 	--shiki-color-background: var(--sk-bg-3);
-
-	/* raised buttons */
-	--sk-raised-color: var(--sk-border-medium) var(--sk-border-dark) var(--sk-border-dark)
-		var(--sk-border-medium);
-	--sk-raised-hover-color: var(--sk-border-light) var(--sk-border-dark) var(--sk-border-dark)
-		var(--sk-border-light);
-	--sk-raised-active-color: var(--sk-border-dark) var(--sk-border-light) var(--sk-border-light)
-		var(--sk-border-dark);
 }

packages/site-kit/src/lib/styles/utils/buttons.css

@@ -1,3 +1,25 @@
+:root {
+	/* raised buttons */
+	--sk-raised-color: var(--sk-border-light) var(--sk-border-medium) var(--sk-border-medium)
+		var(--sk-border-light);
+	--sk-raised-hover-color: var(--sk-border-medium) var(--sk-border-dark) var(--sk-border-dark)
+		var(--sk-border-medium);
+	--sk-raised-active-color: var(--sk-border-dark) var(--sk-border-medium) var(--sk-border-medium)
+		var(--sk-border-dark);
+	--sk-raised-width: 1px 2px 2px 1px;
+	--sk-raised-active-width: 2px 1px 1px 2px;
+
+	&.dark {
+		/* raised buttons */
+		--sk-raised-color: var(--sk-border-medium) var(--sk-border-dark) var(--sk-border-dark)
+			var(--sk-border-medium);
+		--sk-raised-hover-color: var(--sk-border-light) var(--sk-border-dark) var(--sk-border-dark)
+			var(--sk-border-light);
+		--sk-raised-active-color: var(--sk-border-dark) var(--sk-border-light) var(--sk-border-light)
+			var(--sk-border-dark);
+	}
+}
+
 .raised {
 	border-radius: var(--sk-border-radius);
 	border-style: solid;