Keep browser autofill within canonical field colors
This commit is contained in:
@@ -1610,7 +1610,7 @@ export function CatalogApp() {
|
||||
<span>CANONICAL GLASS</span>
|
||||
<h2>Модальное окно и Inspector</h2>
|
||||
<p>Фон остаётся различимым, но текст и контролы сохраняют контраст. Этот материал не применяется к обычным панелям приложения.</p>
|
||||
<div className="catalog-inline"><TextField label="Пример поля" defaultValue="NODE.DC" /><Button variant="primary" shape="pill">Применить</Button></div>
|
||||
<div className="catalog-inline"><TextField label="Пример поля" name="organization" autoComplete="organization" defaultValue="NODE.DC" description="Автозаполнение сохраняет материал поля и клавиатурный фокус текущей темы." /><Button variant="primary" shape="pill">Применить</Button></div>
|
||||
</GlassMaterialSurface>
|
||||
</section>
|
||||
<SettingsCard eyebrow="ENGINE / GLASS V4" title="Параметры материала" description="Общий token-контракт ui-core; изменения сразу видны на preview, модалках и Inspector.">
|
||||
|
||||
+1
-1
@@ -39,7 +39,7 @@ Icon-only action по умолчанию круглый. Квадратная к
|
||||
|
||||
## Field
|
||||
|
||||
FieldFrame объединяет label, control, hint и description. TextField/TextAreaField реализуют стандартные текстовые поля.
|
||||
FieldFrame объединяет label, control, hint и description. TextField/TextAreaField реализуют стандартные текстовые поля. Автозаполнение браузера сохраняет материал поля, цвет текста и каретки текущей темы; синяя системная заливка не используется. Клавиатурный фокус остаётся видимым.
|
||||
|
||||
Приложение не должно вручную собирать label и input, если подходит Field. Ошибка и validation state будут расширением этого контракта, а не локальным классом приложения.
|
||||
|
||||
|
||||
@@ -350,6 +350,20 @@
|
||||
box-shadow: var(--nodedc-glass-control-shadow), inset 0 0 0 1px rgb(var(--nodedc-accent-rgb) / 0.22);
|
||||
}
|
||||
|
||||
/* Browsers enforce their autofill background with an internal !important rule.
|
||||
Paint the canonical field material above it; keep text, caret and keyboard
|
||||
focus in the same theme as manually entered values. */
|
||||
.nodedc-field__control:is(:autofill, :-webkit-autofill) {
|
||||
-webkit-text-fill-color: var(--nodedc-text-primary);
|
||||
caret-color: var(--nodedc-text-primary);
|
||||
box-shadow: inset 0 0 0 100vmax var(--nodedc-field-bg);
|
||||
}
|
||||
|
||||
.nodedc-field__control:is(:autofill, :-webkit-autofill):focus-visible {
|
||||
box-shadow: inset 0 0 0 1px rgb(var(--nodedc-accent-rgb) / 0.22),
|
||||
inset 0 0 0 100vmax var(--nodedc-field-bg);
|
||||
}
|
||||
|
||||
textarea.nodedc-field__control {
|
||||
min-height: 6rem;
|
||||
padding-block: 0.85rem;
|
||||
|
||||
@@ -109,7 +109,8 @@
|
||||
"summary": "Textual form controls with consistent labels, hints, geometry and focus surface.",
|
||||
"rules": [
|
||||
"Labels and validation copy are part of the field contract.",
|
||||
"Keyboard focus changes the surface and remains visible without a browser-blue outline."
|
||||
"Keyboard focus changes the surface and remains visible without a browser-blue outline.",
|
||||
"Browser autofill retains the canonical field material, text and caret; keyboard focus remains visible."
|
||||
]
|
||||
},
|
||||
{
|
||||
|
||||
Reference in New Issue
Block a user