[css-forms-1] Add styles for ::color-swatch (#13598)

Author: lukewarlow

css-forms-1/Overview.bs

@@ -820,15 +820,14 @@ spec:css-forms-1; type:value; for:/; text:::placeholder
 
   ISSUE: This section needs refining with implementation.
 
-  ISSUE(11837): Color input styles need refining.
-
 ## Basics ## {#stylesheet-basics}
 
 ```css
 input,
 textarea,
 button,
 ::file-selector-button,
+::color-swatch,
 select,
 meter,
 progress,
@@ -1041,6 +1040,27 @@ input[type="file"]:disabled::file-selector-button {
 }
 ```
 
+## Color Input ## {#stylesheet-color}
+
+```css
+input[type="color"] {
+	padding: 0;
+	overflow: clip;
+}
+
+::color-swatch {
+	inline-size: stretch;
+	block-size: stretch;
+
+	/* These prevent forced dark mode or forced colors mode from changing the background. */
+	color-scheme: light only;
+	forced-color-adjust: none;
+
+	/* Uses a linear gradient to handle showing the alpha channel of chosen color */
+	background: linear-gradient(control-value()), linear-gradient(to bottom right, black 50%, white 50%);
+}
+```
+
 ## Selects ## {#stylesheet-select}
 
 ```css