diff --git a/landing/src/app/ui/contact-form.scss b/landing/src/app/ui/contact-form.scss index e85bdaf..ae448ae 100644 --- a/landing/src/app/ui/contact-form.scss +++ b/landing/src/app/ui/contact-form.scss @@ -84,18 +84,11 @@ font-weight: var(--pi-theme-field-label-weight, inherit); } - // 10px, not the 20px this started at, and the reason is clamping. - // - // The outline's leading piece is only 12px wide, so a 20px corner radius gets - // clamped to 12 — while the focus ring, drawn across the full width, keeps a - // true 20px curve. Same box, same declared radius, two different curves, and - // a visibly doubled edge down the left side. Under 12px nothing is clamped - // and the two agree. - // - // The single-line fields never showed this: at 999px both the outline and the - // ring clamp to half the field's height, so they land on the same curve. + // A stadium is right for a 48px input and wrong for a 112px textarea, which + // is all this is now — with the focus ring gone there is no second shape to + // agree with. .pi-field.pi-form-field__textarea { - --pi-theme-field-radius: 0.625rem; + --pi-theme-field-radius: 1.25rem; } } @@ -137,20 +130,3 @@ font-size: var(--pi-font-size-x-small, 0.75rem); } } - -// Focusing a field that already has an error drew it twice: the notched -// outline stays in the error colour, and the gradient focus ring is painted on -// top of it in the brand's violet-to-cyan. Two rings, two colours, one field — -// and on the textarea, at two different radii, which is what made it obvious. -// -// The ring is worth keeping: it is how focus reads on every other field. It -// just has to agree with the state it is decorating, so while the field is -// invalid the ring is built from the warn colour instead of the brand one. The -// field ends up with a single red indication that still brightens on focus. -:host ::ng-deep .pi-field .mat-form-field-invalid { - --pi-theme-field-focus-gradient: linear-gradient( - 120deg, - var(--pi-color-warn), - var(--pi-color-warn-200, var(--pi-color-warn)) - ); -} diff --git a/landing/src/styles.scss b/landing/src/styles.scss index 9ad74a0..cf44a00 100644 --- a/landing/src/styles.scss +++ b/landing/src/styles.scss @@ -92,19 +92,14 @@ html { @include brand-ramp('highlighted', #6c2fb5, #ffffff); } -// The `gradient` theme's signature — a gradient focus ring on fields — is a -// token, so it can be lifted onto the `alternative` shell without swapping -// themes. `_mat-form-field.scss` reads it; the flat border is turned off so it -// does not show through the ring. -.pi-shell__alternative { - --pi-theme-field-focus-gradient: linear-gradient( - 120deg, - var(--pi-color-primary), - var(--pi-color-accent), - var(--pi-color-highlighted) - ); - --pi-theme-field-border-color-focus: transparent; -} +// The `gradient` theme's focus ring is deliberately NOT lifted onto this shell. +// +// It is drawn as one continuous rounded rectangle over the whole field, while +// the outline underneath is split into three pieces. The leading piece is 12px +// wide, so a large radius clamps to a 12x24 ellipse there while the ring keeps +// a true 24px circle — two curves that cannot be made to agree at any radius, +// showing as a doubled edge down the left of every field. Focus is left to the +// outline's own colour, which is what `alternative` already defines. html, body {