Unify segmented controls on a shared module with grey selection

2026-08-08 02:02:33 +00:00 · 2026-06-05 13:41:29 +03:00
parent 0f8738cd0c
commit cc0814a596
6 changed files with 65 additions and 82 deletions
@@ -0,0 +1,42 @@
+/*
+ * Shared look for every SegmentedControl. The control's appearance is owned here
+ * — once — so the Draft/Published and fit-mode instances can't drift apart again.
+ * Selected option uses --layer-02 (a neutral high-contrast fill, per Carbon's
+ * content switcher); --accent stays reserved for primary actions (e.g. Publish),
+ * so "current selection" never reads as "the action to take". Call sites may still
+ * pass className/optionClassName/activeClassName for layout-specific additions.
+ */
+.group {
+  display: inline-flex;
+  border: var(--border-width) solid var(--border-strong);
+}
+
+.option {
+  appearance: none;
+  border: none;
+  background: var(--bg);
+  color: var(--text-secondary);
+  font: inherit;
+  font-size: 12px;
+  line-height: 1;
+  padding: var(--space-2) var(--space-3);
+  cursor: pointer;
+  transition:
+    background var(--dur-fast) var(--ease),
+    color var(--dur-fast) var(--ease);
+}
+
+.option + .option {
+  border-left: var(--border-width) solid var(--border-strong);
+}
+
+.option:hover {
+  background: var(--layer-01);
+  color: var(--text);
+}
+
+.active,
+.active:hover {
+  background: var(--layer-02);
+  color: var(--text);
+}