ColorField: shared color-input primitive, Theme Builder + Chart Builder migration

2026-08-08 02:02:33 +00:00 · 2026-06-14 11:02:20 +03:00
parent 236b1c8a37
commit df6a0b3845
8 changed files with 240 additions and 114 deletions
@@ -0,0 +1,43 @@
+/* ColorField — token-styled native color swatch (+ optional hex field). */
+
+.field {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+/* Native color input, sized to a swatch and stripped of its OS chrome. */
+.swatch {
+  width: var(--control-height);
+  height: var(--control-height);
+  padding: 0;
+  border: var(--border-width) solid var(--border-strong);
+  background: none;
+  cursor: pointer;
+  appearance: none;
+  -webkit-appearance: none;
+}
+
+/* Compact: sits inside the 24px-tall Chart Builder constant pill. */
+.sm {
+  width: 28px;
+  height: 22px;
+}
+
+.swatch::-webkit-color-swatch-wrapper {
+  padding: 2px;
+}
+.swatch::-webkit-color-swatch {
+  border: none;
+}
+.swatch::-moz-color-swatch {
+  border: none;
+}
+
+.hex {
+  width: 8ch;
+  height: var(--control-height);
+  padding: 0 var(--space-2);
+  font-family: var(--font-mono);
+  font-size: 12px;
+}