revert(ui): remove UI portions of mixed commits from main

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Val Alexander
2026-02-22 13:00:34 -06:00
parent 26ab93f0eb
commit 6298698008
74 changed files with 1570 additions and 8326 deletions

View File

@@ -27,6 +27,10 @@
overflow: hidden;
}
:root[data-theme="light"] .config-sidebar {
background: var(--bg-hover);
}
.config-sidebar__header {
display: flex;
align-items: center;
@@ -37,7 +41,7 @@
.config-sidebar__title {
font-weight: 600;
font-size: 15px;
font-size: 14px;
letter-spacing: -0.01em;
}
@@ -71,7 +75,7 @@
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: var(--bg-elevated);
font-size: 14px;
font-size: 13px;
outline: none;
transition:
border-color var(--duration-fast) ease,
@@ -89,6 +93,14 @@
background: var(--bg-hover);
}
:root[data-theme="light"] .config-search__input {
background: white;
}
:root[data-theme="light"] .config-search__input:focus {
background: white;
}
.config-search__clear {
position: absolute;
right: 22px;
@@ -133,7 +145,7 @@
border-radius: var(--radius-md);
background: transparent;
color: var(--muted);
font-size: 14px;
font-size: 13px;
font-weight: 500;
text-align: left;
cursor: pointer;
@@ -147,6 +159,10 @@
color: var(--text);
}
:root[data-theme="light"] .config-nav__item:hover {
background: rgba(0, 0, 0, 0.04);
}
.config-nav__item.active {
background: var(--accent-subtle);
color: var(--accent);
@@ -190,6 +206,10 @@
border: 1px solid var(--border);
}
:root[data-theme="light"] .config-mode-toggle {
background: white;
}
.config-mode-toggle__btn {
flex: 1;
padding: 9px 14px;
@@ -240,6 +260,10 @@
border-bottom: 1px solid var(--border);
}
:root[data-theme="light"] .config-actions {
background: var(--bg-hover);
}
.config-actions__left,
.config-actions__right {
display: flex;
@@ -251,7 +275,7 @@
padding: 6px 14px;
border-radius: var(--radius-full);
background: var(--accent-subtle);
border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
border: 1px solid rgba(255, 77, 77, 0.3);
color: var(--accent);
font-size: 12px;
font-weight: 600;
@@ -265,7 +289,7 @@
/* Diff Panel */
.config-diff {
margin: 18px 22px 0;
border: 1px solid color-mix(in srgb, var(--danger) 25%, transparent);
border: 1px solid rgba(255, 77, 77, 0.25);
border-radius: var(--radius-lg);
background: var(--accent-subtle);
overflow: hidden;
@@ -319,6 +343,10 @@
font-family: var(--mono);
}
:root[data-theme="light"] .config-diff__item {
background: white;
}
.config-diff__path {
font-weight: 600;
color: var(--text);
@@ -356,6 +384,10 @@
background: var(--bg-accent);
}
:root[data-theme="light"] .config-section-hero {
background: var(--bg-hover);
}
.config-section-hero__icon {
width: 30px;
height: 30px;
@@ -379,7 +411,7 @@
}
.config-section-hero__title {
font-size: 17px;
font-size: 16px;
font-weight: 600;
letter-spacing: -0.01em;
white-space: nowrap;
@@ -388,7 +420,7 @@
}
.config-section-hero__desc {
font-size: 14px;
font-size: 13px;
color: var(--muted);
}
@@ -402,6 +434,10 @@
overflow-x: auto;
}
:root[data-theme="light"] .config-subnav {
background: var(--bg-hover);
}
.config-subnav__item {
border: 1px solid transparent;
border-radius: var(--radius-full);
@@ -418,6 +454,10 @@
white-space: nowrap;
}
:root[data-theme="light"] .config-subnav__item {
background: white;
}
.config-subnav__item:hover {
color: var(--text);
border-color: var(--border);
@@ -511,6 +551,10 @@
border-color: var(--border-strong);
}
:root[data-theme="light"] .config-section-card {
background: white;
}
.config-section-card__header {
display: flex;
align-items: flex-start;
@@ -520,6 +564,10 @@
border-bottom: 1px solid var(--border);
}
:root[data-theme="light"] .config-section-card__header {
background: var(--bg-hover);
}
.config-section-card__icon {
width: 34px;
height: 34px;
@@ -539,7 +587,7 @@
.config-section-card__title {
margin: 0;
font-size: 18px;
font-size: 17px;
font-weight: 600;
letter-spacing: -0.01em;
white-space: nowrap;
@@ -549,7 +597,7 @@
.config-section-card__desc {
margin: 5px 0 0;
font-size: 14px;
font-size: 13px;
color: var(--muted);
line-height: 1.45;
}
@@ -576,23 +624,23 @@
padding: 14px;
border-radius: var(--radius-md);
background: var(--danger-subtle);
border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
border: 1px solid rgba(239, 68, 68, 0.3);
}
.cfg-field__label {
font-size: 14px;
font-size: 13px;
font-weight: 600;
color: var(--text);
}
.cfg-field__help {
font-size: 13px;
font-size: 12px;
color: var(--muted);
line-height: 1.45;
}
.cfg-field__error {
font-size: 13px;
font-size: 12px;
color: var(--danger);
}
@@ -627,6 +675,14 @@
background: var(--bg-hover);
}
:root[data-theme="light"] .cfg-input {
background: white;
}
:root[data-theme="light"] .cfg-input:focus {
background: white;
}
.cfg-input--sm {
padding: 9px 12px;
font-size: 13px;
@@ -677,6 +733,10 @@
box-shadow: var(--focus-ring);
}
:root[data-theme="light"] .cfg-textarea {
background: white;
}
.cfg-textarea--sm {
padding: 10px 12px;
font-size: 12px;
@@ -691,6 +751,10 @@
background: var(--bg-accent);
}
:root[data-theme="light"] .cfg-number {
background: white;
}
.cfg-number__btn {
width: 44px;
border: none;
@@ -711,6 +775,14 @@
cursor: not-allowed;
}
:root[data-theme="light"] .cfg-number__btn {
background: var(--bg-hover);
}
:root[data-theme="light"] .cfg-number__btn:hover:not(:disabled) {
background: var(--border);
}
.cfg-number__input {
width: 85px;
padding: 11px;
@@ -753,6 +825,10 @@
box-shadow: var(--focus-ring);
}
:root[data-theme="light"] .cfg-select {
background-color: white;
}
/* Segmented Control */
.cfg-segmented {
display: inline-flex;
@@ -762,13 +838,17 @@
background: var(--bg-accent);
}
:root[data-theme="light"] .cfg-segmented {
background: var(--bg-hover);
}
.cfg-segmented__btn {
padding: 9px 18px;
border: none;
border-radius: var(--radius-sm);
background: transparent;
color: var(--muted);
font-size: 14px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition:
@@ -818,6 +898,14 @@
cursor: not-allowed;
}
:root[data-theme="light"] .cfg-toggle-row {
background: white;
}
:root[data-theme="light"] .cfg-toggle-row:hover:not(.disabled) {
background: var(--bg-hover);
}
.cfg-toggle-row__content {
flex: 1;
min-width: 0;
@@ -825,7 +913,7 @@
.cfg-toggle-row__label {
display: block;
font-size: 15px;
font-size: 14px;
font-weight: 500;
color: var(--text);
}
@@ -833,7 +921,7 @@
.cfg-toggle-row__help {
display: block;
margin-top: 3px;
font-size: 13px;
font-size: 12px;
color: var(--muted);
line-height: 1.45;
}
@@ -864,6 +952,10 @@
border-color var(--duration-normal) ease;
}
:root[data-theme="light"] .cfg-toggle__track {
background: var(--border);
}
.cfg-toggle__track::after {
content: "";
position: absolute;
@@ -881,7 +973,7 @@
.cfg-toggle input:checked + .cfg-toggle__track {
background: var(--ok-subtle);
border-color: color-mix(in srgb, var(--ok) 40%, transparent);
border-color: rgba(34, 197, 94, 0.4);
}
.cfg-toggle input:checked + .cfg-toggle__track::after {
@@ -901,6 +993,10 @@
overflow: hidden;
}
:root[data-theme="light"] .cfg-object {
background: white;
}
.cfg-object__header {
display: flex;
align-items: center;
@@ -970,6 +1066,10 @@
border-bottom: 1px solid var(--border);
}
:root[data-theme="light"] .cfg-array__header {
background: var(--bg-hover);
}
.cfg-array__label {
flex: 1;
font-size: 14px;
@@ -985,6 +1085,10 @@
border-radius: var(--radius-full);
}
:root[data-theme="light"] .cfg-array__count {
background: white;
}
.cfg-array__add {
display: inline-flex;
align-items: center;
@@ -1052,6 +1156,10 @@
border-bottom: 1px solid var(--border);
}
:root[data-theme="light"] .cfg-array__item-header {
background: var(--bg-hover);
}
.cfg-array__item-index {
font-size: 11px;
font-weight: 600;
@@ -1112,6 +1220,10 @@
border-bottom: 1px solid var(--border);
}
:root[data-theme="light"] .cfg-map__header {
background: var(--bg-hover);
}
.cfg-map__label {
font-size: 13px;
font-weight: 600;
@@ -1208,7 +1320,7 @@
}
.pill--ok {
border-color: color-mix(in srgb, var(--ok) 35%, transparent);
border-color: rgba(34, 197, 94, 0.35);
color: var(--ok);
}
@@ -1332,85 +1444,3 @@
min-width: 70px;
}
}
/* ===========================================
Environment Values Blur + Peek Toggle
=========================================== */
.config-env-values--blurred .cfg-input,
.config-env-values--blurred .cfg-number__input,
.config-env-values--blurred textarea {
color: transparent;
text-shadow: 0 0 8px var(--text);
}
.config-env-values--blurred .cfg-input::placeholder,
.config-env-values--blurred textarea::placeholder {
text-shadow: none;
color: var(--muted);
opacity: 0.7;
}
.config-env-values--blurred .cfg-input:focus,
.config-env-values--blurred .cfg-number__input:focus,
.config-env-values--blurred textarea:focus {
color: transparent;
text-shadow: 0 0 8px var(--text);
}
.config-env-values--visible.config-env-values--blurred .cfg-input,
.config-env-values--visible.config-env-values--blurred .cfg-number__input,
.config-env-values--visible.config-env-values--blurred textarea {
color: var(--text);
text-shadow: none;
}
.config-env-values--visible.config-env-values--blurred .cfg-input:focus,
.config-env-values--visible.config-env-values--blurred .cfg-number__input:focus,
.config-env-values--visible.config-env-values--blurred textarea:focus {
color: var(--text);
text-shadow: none;
}
.config-env-peek-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: var(--radius-md);
border: 1px solid var(--border);
background: transparent;
color: var(--muted);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all var(--duration-fast) ease;
flex-shrink: 0;
margin-left: auto;
}
.config-env-peek-btn:hover {
color: var(--text);
border-color: var(--border-strong);
background: var(--bg-hover);
}
.config-env-peek-btn--active {
color: var(--accent);
border-color: color-mix(in srgb, var(--accent) 40%, transparent);
background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.config-env-peek-btn svg {
flex-shrink: 0;
}
/* Raw JSON redaction blur */
.config-raw-redacted {
color: transparent !important;
text-shadow: 0 0 8px var(--text);
transition:
color var(--duration-normal, 250ms) ease,
text-shadow var(--duration-normal, 250ms) ease;
}