move raised styles into buttons.css, add comment on usage

Author: Rich-Harris

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

@@ -34,10 +34,8 @@
 	--sk-bg-accent: var(--sk-fg-accent);
 	--sk-bg-selection: hsla(204, 100%, 63%, 0.3);
 
-	/* Border colors */
+	/* Border color — use this for all borders, except 'active' borders (e.g. current nav) which use `--sk-fg-accent`  */
 	--sk-border: hsl(0, 0%, 92%);
-	--sk-border-highlight: hsl(0, 0%, 95%);
-	--sk-border-shadow: hsl(0, 0%, 86%);
 
 	/* Misc */
 	--sk-scrollbar: rgba(0, 0, 0, 0.3);
@@ -72,10 +70,8 @@
 	--sk-bg-4: hsl(var(--sk-bg-hue), 15%, 22%);
 	--sk-bg-accent: hsl(15, 100%, 35%);
 
-	/* Border colours */
+	/* Border colour */
 	--sk-border: hsl(var(--sk-bg-hue), 15%, 25%);
-	--sk-border-highlight: hsl(var(--sk-bg-hue), 15%, 32%);
-	--sk-border-shadow: var(--sk-bg-3);
 
 	/* Misc */
 	--sk-scrollbar: rgba(255, 255, 255, 0.3);

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

@@ -1,22 +1,29 @@
 :root {
+	--sk-raised-border: var(--sk-border);
+	--sk-raised-highlight: hsl(0, 0%, 95%);
+	--sk-raised-shadow: hsl(0, 0%, 86%);
+
 	/* raised buttons */
-	--sk-raised-color: var(--sk-border-highlight) var(--sk-border) var(--sk-border)
-		var(--sk-border-highlight);
-	--sk-raised-hover-color: var(--sk-border) var(--sk-border-shadow) var(--sk-border-shadow)
-		var(--sk-border);
-	--sk-raised-active-color: var(--sk-border-shadow) var(--sk-border) var(--sk-border)
-		var(--sk-border-shadow);
+	--sk-raised-color: var(--sk-raised-highlight) var(--sk-raised-border) var(--sk-raised-border)
+		var(--sk-raised-highlight);
+	--sk-raised-hover-color: var(--sk-raised-border) var(--sk-raised-shadow) var(--sk-raised-shadow)
+		var(--sk-raised-border);
+	--sk-raised-active-color: var(--sk-raised-shadow) var(--sk-raised-border) var(--sk-raised-border)
+		var(--sk-raised-shadow);
 	--sk-raised-width: 1px 2px 2px 1px;
 	--sk-raised-active-width: 2px 1px 1px 2px;
 
 	&.dark {
+		--sk-raised-highlight: hsl(var(--sk-bg-hue), 15%, 32%);
+		--sk-raised-shadow: var(--sk-bg-3);
+
 		/* raised buttons */
-		--sk-raised-color: var(--sk-border) var(--sk-border-shadow) var(--sk-border-shadow)
-			var(--sk-border);
-		--sk-raised-hover-color: var(--sk-border-highlight) var(--sk-border-shadow) var(--sk-border-shadow)
-			var(--sk-border-highlight);
-		--sk-raised-active-color: var(--sk-border-shadow) var(--sk-border-highlight) var(--sk-border-highlight)
-			var(--sk-border-shadow);
+		--sk-raised-color: var(--sk-raised-border) var(--sk-raised-shadow) var(--sk-raised-shadow)
+			var(--sk-raised-border);
+		--sk-raised-hover-color: var(--sk-raised-highlight) var(--sk-raised-shadow) var(--sk-raised-shadow)
+			var(--sk-raised-highlight);
+		--sk-raised-active-color: var(--sk-raised-shadow) var(--sk-raised-highlight) var(--sk-raised-highlight)
+			var(--sk-raised-shadow);
 	}
 }
 
@@ -54,7 +61,7 @@
 	}
 
 	&:disabled {
-		border-color: var(--sk-border);
+		border-color: var(--sk-raised-border);
 		border-width: 1px;
 	}
 }