Merge pull request #29654 from overleaf/ac-ciam-confirm-email-storybook

[web] CIAM design for Email confirmation form

GitOrigin-RevId: 3e66c45fe20073eb0600b8243761dbe82d7dc6b2

services/web/frontend/stylesheets/ciam/all.scss

@@ -2,3 +2,4 @@
 @import 'ciam-layout';
 @import 'ciam-variables';
 @import 'ciam-register';
+@import 'ciam-six-digits';

services/web/frontend/stylesheets/ciam/ciam-layout.scss

@@ -76,6 +76,7 @@
     border-radius: var(--ds-border-radius-400);
     max-width: 464px;
     margin: 0 auto;
+    min-height: 500px;
 
     @include media-breakpoint-up(sm) {
       padding: var(--ds-spacing-1300);

services/web/frontend/stylesheets/ciam/ciam-six-digits.scss

@@ -0,0 +1,26 @@
+@import '../ds/mixins';
+
+.ciam-six-digits-container {
+  position: relative;
+  min-width: 180px;
+
+  .ciam-six-digits-input {
+    @include ds-heading-md-regular;
+
+    letter-spacing: 0.3em;
+    padding-left: calc(50% - 3.3em) !important;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .ciam-six-digits-dash {
+    @include ds-heading-md-regular;
+
+    pointer-events: none;
+    color: var(--ds-color-neutral-400);
+    text-align: center;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+}

services/web/frontend/stylesheets/ciam/ciam-variables.scss

@@ -2,16 +2,10 @@
 
 .ciam-enabled,
 .website-redesign:not(.application-page) .ciam-enabled .notification {
-  // Links
-  // used in services/web/frontend/stylesheets/base/links.scss
+  // Links, used in services/web/frontend/stylesheets/base/links.scss
   --link-color: var(--ds-color-text-primary);
   --link-hover-color: var(--ds-color-text-secondary);
   --link-visited-color: var(--ds-color-text-secondary);
   --link-text-decoration: underline;
   --link-hover-text-decoration: none;
-
-  // TODO: validate that this is correct
-  --link-color-dark: fuchsia;
-  --link-hover-color-dark: fuchsia;
-  --link-visited-color-dark: fuchsia;
 }