From 38f2b5e616e5841d4dc8221254f4cb03ecc60fc1 Mon Sep 17 00:00:00 2001 From: Tim Down <158919+timdown@users.noreply.github.com> Date: Tue, 9 Dec 2025 14:27:51 +0000 Subject: [PATCH] Merge pull request #30198 from overleaf/td-ciam-misc-fixes Miscellaneous CIAM fixes GitOrigin-RevId: b7f38888b602fc7b4dc4fbc63e38f82527ab666e --- .../js/features/form-helpers/input-validator.ts | 2 ++ .../web/frontend/stylesheets/ciam/ciam-layout.scss | 2 +- .../web/frontend/stylesheets/ciam/ciam-links.scss | 12 ++++++------ .../web/frontend/stylesheets/ciam/ciam-login.scss | 2 -- .../frontend/stylesheets/ciam/ciam-onboarding.scss | 2 -- .../web/frontend/stylesheets/ciam/ciam-register.scss | 11 +++-------- .../frontend/stylesheets/ciam/ciam-try-premium.scss | 2 -- .../frontend/stylesheets/ciam/ds-design-system.scss | 3 --- .../stylesheets/ds/components/form-control.scss | 9 +++++---- .../stylesheets/ds/components/selection-group.scss | 9 ++++++++- services/web/frontend/stylesheets/ds/mixins.scss | 12 ++++++++++++ 11 files changed, 37 insertions(+), 29 deletions(-) delete mode 100644 services/web/frontend/stylesheets/ciam/ds-design-system.scss diff --git a/services/web/frontend/js/features/form-helpers/input-validator.ts b/services/web/frontend/js/features/form-helpers/input-validator.ts index c7bc9b50cc..05e170f548 100644 --- a/services/web/frontend/js/features/form-helpers/input-validator.ts +++ b/services/web/frontend/js/features/form-helpers/input-validator.ts @@ -76,6 +76,8 @@ export default function inputValidator( if (!canDisplayErrorMessages) return if (!inputEl.hasAttribute('data-ol-dirty')) return + inputEl.classList.toggle('is-invalid', !inputEl.validity.valid) + if (inputEl.validity.valid) { messageEl.hidden = true diff --git a/services/web/frontend/stylesheets/ciam/ciam-layout.scss b/services/web/frontend/stylesheets/ciam/ciam-layout.scss index 7b33ac7098..b0f88ba992 100644 --- a/services/web/frontend/stylesheets/ciam/ciam-layout.scss +++ b/services/web/frontend/stylesheets/ciam/ciam-layout.scss @@ -128,7 +128,7 @@ .ciam-card-separator { margin: var(--ds-spacing-500) 0; height: 0; - border-top: solid 1px var(--ds-grey-20); + border-top: solid 1px var(--ds-color-neutral-200); } .ciam-card-footer { diff --git a/services/web/frontend/stylesheets/ciam/ciam-links.scss b/services/web/frontend/stylesheets/ciam/ciam-links.scss index 39bad58577..8817c2b351 100644 --- a/services/web/frontend/stylesheets/ciam/ciam-links.scss +++ b/services/web/frontend/stylesheets/ciam/ciam-links.scss @@ -1,5 +1,3 @@ -// TODO: Replace `fuchsia` by the correct colors. - .ciam-enabled, .website-redesign:not(.application-page) .ciam-enabled .notification { // Links, used in services/web/frontend/stylesheets/base/links.scss @@ -10,19 +8,21 @@ --link-hover-text-decoration: underline; a { - text-decoration-thickness: 5%; + text-decoration-thickness: var(--ds-link-text-decoration-thickness); text-underline-offset: 19.5%; } a:hover, - a:focus { - text-decoration-thickness: 10%; + a:focus-visible { + text-decoration-thickness: 0.17em; } a:focus-visible { - box-shadow: none; + box-shadow: 0 0 0 2px var(--ds-color-yellow-500); outline: none; + color: var(--ds-color-text-primary); background-color: var(--ds-color-yellow-500); + border-radius: 1px; &.ciam-image-link { @include ds-focus-outline; diff --git a/services/web/frontend/stylesheets/ciam/ciam-login.scss b/services/web/frontend/stylesheets/ciam/ciam-login.scss index 98c137528b..f57341f595 100644 --- a/services/web/frontend/stylesheets/ciam/ciam-login.scss +++ b/services/web/frontend/stylesheets/ciam/ciam-login.scss @@ -1,5 +1,3 @@ -@import 'ds-design-system'; - .ciam-login-text { text-align: center; padding: var(--ds-spacing-200) 0; diff --git a/services/web/frontend/stylesheets/ciam/ciam-onboarding.scss b/services/web/frontend/stylesheets/ciam/ciam-onboarding.scss index 3bfb22b26e..1c4beb2185 100644 --- a/services/web/frontend/stylesheets/ciam/ciam-onboarding.scss +++ b/services/web/frontend/stylesheets/ciam/ciam-onboarding.scss @@ -1,5 +1,3 @@ -@import 'ds-design-system'; - .btn.btn-ds.ciam-onboarding-back-button { --bs-btn-padding-x: 0; --bs-btn-hover-bg: transparent; diff --git a/services/web/frontend/stylesheets/ciam/ciam-register.scss b/services/web/frontend/stylesheets/ciam/ciam-register.scss index f6743a5a95..9738fd4636 100644 --- a/services/web/frontend/stylesheets/ciam/ciam-register.scss +++ b/services/web/frontend/stylesheets/ciam/ciam-register.scss @@ -1,5 +1,3 @@ -@import 'ds-design-system'; - .ciam-register-columns { display: flex; flex-grow: 1; @@ -12,13 +10,10 @@ } .ciam-register-container { - display: flex; - flex-direction: column; + @include ciam-vertically-spaced; - footer .footer-links { - @include media-breakpoint-up(sm) { - justify-content: start; - } + @include media-breakpoint-up(sm) { + gap: var(--ds-spacing-800); } } diff --git a/services/web/frontend/stylesheets/ciam/ciam-try-premium.scss b/services/web/frontend/stylesheets/ciam/ciam-try-premium.scss index 5c11de99c6..8e9bb8a857 100644 --- a/services/web/frontend/stylesheets/ciam/ciam-try-premium.scss +++ b/services/web/frontend/stylesheets/ciam/ciam-try-premium.scss @@ -1,5 +1,3 @@ -@import 'ds-design-system'; - .ciam-try-premium-logo-container { display: flex; justify-content: center; diff --git a/services/web/frontend/stylesheets/ciam/ds-design-system.scss b/services/web/frontend/stylesheets/ciam/ds-design-system.scss deleted file mode 100644 index 5aaa178be0..0000000000 --- a/services/web/frontend/stylesheets/ciam/ds-design-system.scss +++ /dev/null @@ -1,3 +0,0 @@ -:root { - --ds-grey-20: #e7e9ee; -} diff --git a/services/web/frontend/stylesheets/ds/components/form-control.scss b/services/web/frontend/stylesheets/ds/components/form-control.scss index a605133f84..f6e2aaf724 100644 --- a/services/web/frontend/stylesheets/ds/components/form-control.scss +++ b/services/web/frontend/stylesheets/ds/components/form-control.scss @@ -76,7 +76,10 @@ input.form-control.form-control-ds { &.is-invalid, .was-validated &:invalid { - border-color: var(--ds-color-red-500); + &, + &:hover { + border-color: var(--ds-color-red-500); + } } } @@ -201,10 +204,8 @@ input.check-input-ds { } } - border-style: solid; - border-width: 1px; + border: solid 1px var(--ds-color-neutral-800); - &, &:hover { border-color: var(--ds-color-neutral-900); } diff --git a/services/web/frontend/stylesheets/ds/components/selection-group.scss b/services/web/frontend/stylesheets/ds/components/selection-group.scss index d27b42abd0..33bb6d0400 100644 --- a/services/web/frontend/stylesheets/ds/components/selection-group.scss +++ b/services/web/frontend/stylesheets/ds/components/selection-group.scss @@ -21,8 +21,15 @@ border-radius: var(--ds-border-radius-200); cursor: pointer; - &:has(input:checked), &:hover { + border-color: var(--ds-color-neutral-400); + + input:not(:checked) { + background-color: var(--ds-color-neutral-50); + } + } + + &:has(input:checked) { border-color: var(--ds-color-neutral-950); background-color: var(--ds-color-neutral-50); } diff --git a/services/web/frontend/stylesheets/ds/mixins.scss b/services/web/frontend/stylesheets/ds/mixins.scss index 376f40d816..a66a7eb126 100644 --- a/services/web/frontend/stylesheets/ds/mixins.scss +++ b/services/web/frontend/stylesheets/ds/mixins.scss @@ -1,5 +1,13 @@ // Typography mixins for consistent text styles +:root { + --ds-link-text-decoration-thickness: auto; +} + +@mixin ds-body-sm-links() { + --ds-link-text-decoration-thickness: 0.06em; +} + @mixin ds-body-xs-regular() { font-size: var(--ds-font-size-300); font-weight: var(--ds-font-weight-regular); @@ -13,12 +21,16 @@ } @mixin ds-body-sm-regular() { + @include ds-body-sm-links; + font-size: var(--ds-font-size-350); font-weight: var(--ds-font-weight-regular); line-height: var(--ds-font-line-height-500); } @mixin ds-body-sm-semibold() { + @include ds-body-sm-links; + font-size: var(--ds-font-size-350); font-weight: var(--ds-font-weight-semibold); line-height: var(--ds-font-line-height-500);