/* ============================================================================ controls.css — shared button / tab / segment / select primitives (plan C5). These read the org-wide chrome tokens that V5 (global-design-tokens.js) emits as CSS custom properties on : --btn-radius (btn_radius) — corner radius for buttons/segments/selects --btn-pri / --accent (accent) — primary button + active segment fill --tab-active / --accent (accent) — active tab text + underline --tab-py / --tab-px / --tab-font (tab_density) — tab padding + font size --tb-btn-bg (tb_btn_bg) — flat icon-button background Every value has a sensible literal fallback, so an UNSET token leaves a clean default look — nothing changes until an admin commits tokens. This is the shared component layer C5 introduces; existing module button/tab systems adopt the .u-* classes incrementally (plan C5 migration list). The Excel toolbar's own .toolbar-btn already consumes --btn-radius / --tb-btn-* directly (excel-toolbar.css), so btn_radius is live there today. ============================================================================ */ /* ---- Buttons -------------------------------------------------------------- */ .u-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 12px; font-size: 13px; font-weight: 500; line-height: 1.2; border: 1px solid #d1d5db; border-radius: var(--btn-radius, 6px); background: #ffffff; color: #374151; cursor: pointer; transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, filter 0.15s; } .u-btn:hover { background: #f3f4f6; } .u-btn:active { transform: translateY(0.5px); } .u-btn:disabled { opacity: 0.5; cursor: not-allowed; } .u-btn.primary { background: var(--btn-pri, var(--accent, #2196F3)); border-color: var(--btn-pri, var(--accent, #2196F3)); color: #ffffff; } .u-btn.primary:hover { filter: brightness(0.94); } /* Flat icon button — transparent until hovered (Excel ribbon affordance). */ .u-btn.icon { padding: 6px; min-width: 32px; background: var(--tb-btn-bg, transparent); border-color: transparent; } .u-btn.icon:hover { background: #f3f4f6; } /* ---- Segmented control (canonicalizes Progress-Matrix .view-toggle) ------- */ .u-seg { display: inline-flex; border: 1px solid var(--tb-btn-border, #d1d5db); border-radius: var(--btn-radius, 6px); overflow: hidden; } .u-seg > button { border: none; background: var(--tb-btn-bg, #ffffff); color: var(--cell-text, #374151); padding: 6px 12px; font-size: 13px; cursor: pointer; transition: background 0.15s, color 0.15s; } .u-seg > button + button { border-left: 1px solid var(--tb-btn-border, #d1d5db); } .u-seg > button.active { background: var(--accent, #2196F3); color: #ffffff; } /* ---- Select --------------------------------------------------------------- */ .u-select { padding: 6px 10px; font-size: 13px; border: 1px solid var(--tb-btn-border, #d1d5db); border-radius: var(--btn-radius, 6px); background: var(--tb-btn-bg, #ffffff); color: var(--cell-text, #374151); cursor: pointer; } /* ---- Inputs (canonical text field / textarea) ----------------------------- */ .u-input { box-sizing: border-box; padding: 6px 10px; font-size: 13px; line-height: 1.2; border: 1px solid var(--tb-btn-border, #d1d5db); border-radius: var(--btn-radius, 6px); background: var(--tb-btn-bg, #ffffff); color: var(--cell-text, #374151); transition: border-color 0.15s, box-shadow 0.15s; } .u-input::placeholder { color: var(--tb-color, #9ca3af); } .u-input:focus, .u-input:focus-visible { outline: 2px solid var(--tb-btn-hover-border, #2563eb); outline-offset: 1px; border-color: var(--tb-btn-hover-border, #2563eb); } .u-input:disabled { opacity: 0.5; cursor: not-allowed; } /* ---- Tabs — density driven by the tab_density token ----------------------- */ .u-tab { display: inline-flex; align-items: center; gap: 6px; padding: var(--tab-py, 8px) var(--tab-px, 14px); font-size: var(--tab-font, 13px); font-weight: 500; color: var(--tb-color, #6b7280); background: transparent; border: none; border-bottom: 2px solid transparent; cursor: pointer; transition: color 0.15s, border-color 0.15s; } .u-tab:hover { color: var(--cell-text, #374151); } .u-tab.active { color: var(--tab-active, var(--accent, #2196F3)); border-bottom-color: var(--tab-active, var(--accent, #2196F3)); }