Merge pull request #30198 from overleaf/td-ciam-misc-fixes

Miscellaneous CIAM fixes

GitOrigin-RevId: b7f38888b602fc7b4dc4fbc63e38f82527ab666e

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
 

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 {

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;

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;

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;

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);
   }
 }
 

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;

services/web/frontend/stylesheets/ciam/ds-design-system.scss

@@ -1,3 +0,0 @@
-:root {
-  --ds-grey-20: #e7e9ee;
-}

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);
   }

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);
   }

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);