[CORL-748] Update admin login to match new branding styles (#2788)

* Update admin login to match new branding styles

CORL-748

* Update admin login to match new branding styles

CORL-748

src/core/client/admin/components/AuthBox.css

@@ -1,17 +1,8 @@
 .container {
-  width: 350px;
-  background-color: #f5f5f5;
-  border: 1px solid var(--palette-grey-lighter);
+  width: 385px;
+  background-color: var(--v2-colors-grey-100);
+  border: 1px solid var(--v2-colors-grey-300);
   margin-top: 70px;
-  padding: 0 calc(3 * var(--mini-unit)) calc(4 * var(--mini-unit))
-    calc(3 * var(--mini-unit));
+  padding: var(--v2-spacing-6);
   box-sizing: border-box;
 }
-
-.brandIcon {
-  display: inline-flex;
-  background: var(--palette-common-white);
-  padding: calc(0.5 * var(--mini-unit));
-  border: 1px solid var(--palette-grey-lighter);
-  margin-top: -42px;
-}

src/core/client/admin/components/AuthBox.tsx

@@ -1,12 +1,6 @@
 import React, { FunctionComponent } from "react";
 
-import {
-  BrandMark,
-  BrandName,
-  Flex,
-  HorizontalGutter,
-  Typography,
-} from "coral-ui/components";
+import { BrandName, Flex, HorizontalGutter } from "coral-ui/components/v2";
 
 import styles from "./AuthBox.css";
 
@@ -20,15 +14,10 @@ const AuthBox: FunctionComponent<Props> = ({ title, children }) => {
     <div data-testid="authBox">
       <Flex justifyContent="center">
         <HorizontalGutter className={styles.container} size="double">
-          <Flex justifyContent="center">
-            <div className={styles.brandIcon}>
-              <BrandMark size="lg" />
-            </div>
-          </Flex>
           <div>
-            <Typography align="center" variant="heading3">
-              {title}
-            </Typography>
+            <Flex justifyContent="center">
+              <div className="adminSignInTitle">{title}</div>
+            </Flex>
             <BrandName size="lg" align="center" />
           </div>
           {children}

src/core/client/admin/components/__snapshots__/AuthBox.spec.tsx.snap

@@ -11,23 +11,15 @@ exports[`renders correctly 1`] = `
       className="AuthBox-container"
       size="double"
     >
-      <ForwardRef(forwardRef)
-        justifyContent="center"
-      >
-        <div
-          className="AuthBox-brandIcon"
-        >
-          <withPropsOnChange(BrandMark)
-            size="lg"
-          />
-        </div>
-      </ForwardRef(forwardRef)>
       <div>
         <ForwardRef(forwardRef)
-          align="center"
-          variant="heading3"
+          justifyContent="center"
         >
-          title
+          <div
+            className="adminSignInTitle"
+          >
+            title
+          </div>
         </ForwardRef(forwardRef)>
         <withPropsOnChange(BrandName)
           align="center"

src/core/client/admin/routes/AuthCheck/Restricted.css

@@ -1,9 +1,52 @@
+.title {
+  font-weight: var(--v2-font-weight-secondary-bold);
+  font-family: var(--v2-font-family-secondary);
+  color: var(--v2-colors-mono-100);
+  font-size: var(--v2-font-size-3);
+  line-height: var(--v2-line-height-title);
+
+  padding-bottom: var(--v2-spacing-3);
+}
+
+.username {
+  font-size: var(--v2-font-size-6);
+  font-weight: var(--v2-font-weight-secondary-bold);
+  font-family: var(--v2-font-family-secondary);
+  line-height: var(--v2-line-height-reset);
+  color: var(--v2-colors-mono-900);
+
+  text-align: center;
+
+  padding-bottom: var(--v2-spacing-5);
+}
+
+.copy {
+  font-size: var(--v2-font-size-3);
+  font-weight: var(--v2-font-weight-primary-regular);
+  font-family: var(--v2-font-family-primary);
+  line-height: var(--v2-line-height-reset);
+  color: var(--v2-colors-mono-500);
+
+  text-align: center;
+}
+
 .lockIcon {
-  color: var(--palette-grey-dark);
+  color: var(--v2-colors-mono-900);
+  padding-bottom: var(--v2-spacing-2);
 }
+
 .noPermission {
-  color: var(--palette-grey-dark);
+  font-size: var(--v2-font-size-4);
+  font-weight: var(--v2-font-weight-primary-semi-bold);
+  font-family: var(--v2-font-family-primary);
+  line-height: var(--v2-line-height-reset);
+  color: var(--v2-colors-mono-900);
+
+  text-align: center;
+
+  padding-bottom: var(--v2-spacing-5);
 }
+
 .contactAdmin {
-  color: var(--palette-grey-main);
+  padding-top: var(--v2-spacing-3);
 }

src/core/client/admin/routes/AuthCheck/Restricted.tsx

@@ -1,14 +1,9 @@
 import { Localized } from "@fluent/react/compat";
+import cn from "classnames";
 import React, { FunctionComponent } from "react";
 
 import AuthBox from "coral-admin/components/AuthBox";
-import {
-  Button,
-  Flex,
-  HorizontalGutter,
-  Icon,
-  Typography,
-} from "coral-ui/components";
+import { Button, Flex, HorizontalGutter, Icon } from "coral-ui/components/v2";
 
 import styles from "./Restricted.css";
 
@@ -18,17 +13,15 @@ interface Props {
 }
 
 const SignIn: FunctionComponent<Props> = ({ username, onSignInAs }) => {
-  const Username = () => (
-    <Typography variant="heading1" align="center">
-      {username}
-    </Typography>
-  );
+  const Username = () => <div className={styles.username}>{username}</div>;
   return (
     <AuthBox
       title={
-        <Localized id="restricted-currentlySignedInTo">
-          <span>Currently signed in to</span>
-        </Localized>
+        <div className={styles.title}>
+          <Localized id="restricted-currentlySignedInTo">
+            <span>Currently signed in to</span>
+          </Localized>
+        </div>
       }
     >
       <HorizontalGutter size="double">
@@ -39,38 +32,35 @@ const SignIn: FunctionComponent<Props> = ({ username, onSignInAs }) => {
             </Icon>
           </Flex>
           <Localized id="restricted-noPermissionInfo">
-            <Typography
-              variant="heading3"
-              align="center"
-              className={styles.noPermission}
-            >
+            <div className={styles.noPermission}>
               You do not have permission to access this page.
-            </Typography>
+            </div>
           </Localized>
         </div>
         <div>
           <Localized id="restricted-signedInAs" Username={<Username />}>
-            <Typography variant="bodyCopy" align="center" container="div">
+            <div className={styles.copy}>
               {"You are signed in as: <Username></Username>"}
-            </Typography>
+            </div>
           </Localized>
         </div>
         <Flex justifyContent="center">
           <Localized id="restricted-signInWithADifferentAccount">
-            <Button variant="filled" color="primary" onClick={onSignInAs}>
+            <Button
+              variant="regular"
+              color="regular"
+              size="large"
+              onClick={onSignInAs}
+            >
               Sign in with a different account
             </Button>
           </Localized>
         </Flex>
         <Localized id="restricted-contactAdmin">
-          <Typography
-            variant="bodyCopy"
-            align="center"
-            className={styles.contactAdmin}
-          >
+          <div className={cn(styles.copy, styles.contactAdmin)}>
             If you think this is an error, please contact your administrator for
             assistance.
-          </Typography>
+          </div>
         </Localized>
       </HorizontalGutter>
     </AuthBox>

src/core/client/admin/routes/AuthCheck/__snapshots__/Restricted.spec.tsx.snap

@@ -3,13 +3,17 @@
 exports[`renders correctly 1`] = `
 <AuthBox
   title={
-    <Localized
-      id="restricted-currentlySignedInTo"
+    <div
+      className="Restricted-title"
     >
-      <span>
-        Currently signed in to
-      </span>
-    </Localized>
+      <Localized
+        id="restricted-currentlySignedInTo"
+      >
+        <span>
+          Currently signed in to
+        </span>
+      </Localized>
+    </div>
   }
 >
   <ForwardRef(forwardRef)
@@ -29,13 +33,11 @@ exports[`renders correctly 1`] = `
       <Localized
         id="restricted-noPermissionInfo"
       >
-        <ForwardRef(forwardRef)
-          align="center"
+        <div
           className="Restricted-noPermission"
-          variant="heading3"
         >
           You do not have permission to access this page.
-        </ForwardRef(forwardRef)>
+        </div>
       </Localized>
     </div>
     <div>
@@ -43,13 +45,11 @@ exports[`renders correctly 1`] = `
         Username={<Username />}
         id="restricted-signedInAs"
       >
-        <ForwardRef(forwardRef)
-          align="center"
-          container="div"
-          variant="bodyCopy"
+        <div
+          className="Restricted-copy"
         >
           You are signed in as: &lt;Username&gt;&lt;/Username&gt;
-        </ForwardRef(forwardRef)>
+        </div>
       </Localized>
     </div>
     <ForwardRef(forwardRef)
@@ -59,9 +59,10 @@ exports[`renders correctly 1`] = `
         id="restricted-signInWithADifferentAccount"
       >
         <ForwardRef(forwardRef)
-          color="primary"
+          color="regular"
           onClick={[Function]}
-          variant="filled"
+          size="large"
+          variant="regular"
         >
           Sign in with a different account
         </ForwardRef(forwardRef)>
@@ -70,13 +71,11 @@ exports[`renders correctly 1`] = `
     <Localized
       id="restricted-contactAdmin"
     >
-      <ForwardRef(forwardRef)
-        align="center"
-        className="Restricted-contactAdmin"
-        variant="bodyCopy"
+      <div
+        className="Restricted-copy Restricted-contactAdmin"
       >
         If you think this is an error, please contact your administrator for assistance.
-      </ForwardRef(forwardRef)>
+      </div>
     </Localized>
   </ForwardRef(forwardRef)>
 </AuthBox>

src/core/client/admin/routes/Login/EmailField.tsx

@@ -8,7 +8,7 @@ import {
   required,
   validateEmail,
 } from "coral-framework/lib/validation";
-import { FormField, InputLabel, TextField } from "coral-ui/components";
+import { FormField, InputLabel, TextField } from "coral-ui/components/v2";
 
 interface Props {
   disabled: boolean;
@@ -32,6 +32,7 @@ const EmailField: FunctionComponent<Props> = props => (
             color={colorFromMeta(meta)}
             disabled={props.disabled}
             fullWidth
+            data-testid="email-field"
           />
         </Localized>
         <ValidationMessage meta={meta} fullWidth />

src/core/client/admin/routes/Login/views/SignIn/HorizontalSeparator.css

@@ -9,8 +9,13 @@
   margin: 0;
 }
 .text {
-  composes: heading3 from "coral-ui/shared/typography.css";
   position: relative;
   background-color: #f5f5f5;
   padding: 0 var(--mini-unit);
+
+  font-size: var(--v2-font-size-4);
+  font-weight: var(--v2-font-weight-bold);
+  font-family: var(--v2-font-family-primary);
+  line-height: var(--v2-line-height-title);
+  color: var(--v2-colors-mono-100);
 }

src/core/client/admin/routes/Login/views/SignIn/HorizontalSeparator.tsx

@@ -1,6 +1,6 @@
 import React, { FunctionComponent } from "react";
 
-import { Flex } from "coral-ui/components";
+import { Flex } from "coral-ui/components/v2";
 
 import styles from "./HorizontalSeparator.css";
 

src/core/client/admin/routes/Login/views/SignIn/SignIn.css

@@ -0,0 +1,17 @@
+.title {
+  font-weight: var(--v2-font-weight-secondary-bold);
+  font-family: var(--v2-font-family-secondary);
+  color: var(--v2-colors-mono-100);
+  font-size: var(--v2-font-size-3);
+  line-height: var(--v2-line-height-title);
+
+  padding-bottom: var(--v2-spacing-3);
+}
+
+.orSeparator {
+  padding-bottom: var(--v2-spacing-5);
+}
+
+.loginButton {
+  padding-bottom: var(--v2-spacing-4);
+}

src/core/client/admin/routes/Login/views/SignIn/SignIn.tsx

@@ -3,7 +3,7 @@ import React, { FunctionComponent } from "react";
 
 import AuthBox from "coral-admin/components/AuthBox";
 import { PropTypesOf } from "coral-framework/types";
-import { CallOut, HorizontalGutter } from "coral-ui/components";
+import { CallOut, HorizontalGutter } from "coral-ui/components/v2";
 
 import OrSeparator from "./OrSeparator";
 import SignInWithEmailContainer from "./SignInWithEmailContainer";
@@ -12,6 +12,8 @@ import SignInWithGoogleContainer from "./SignInWithGoogleContainer";
 import SignInWithOIDCContainer from "./SignInWithOIDCContainer";
 import Version from "./Version";
 
+import styles from "./SignIn.css";
+
 interface Props {
   error: string | null;
   emailEnabled?: boolean;
@@ -37,9 +39,11 @@ const SignIn: FunctionComponent<Props> = ({
     <>
       <AuthBox
         title={
-          <Localized id="login-signInTo">
-            <span>Sign in to</span>
-          </Localized>
+          <div className={styles.title}>
+            <Localized id="login-signInTo">
+              <span>Sign in to</span>
+            </Localized>
+          </div>
         }
       >
         <HorizontalGutter size="oneAndAHalf">
@@ -49,11 +53,23 @@ const SignIn: FunctionComponent<Props> = ({
             </CallOut>
           )}
           {emailEnabled && <SignInWithEmailContainer />}
-          {emailEnabled && oneClickIntegrationEnabled && <OrSeparator />}
+          {emailEnabled && oneClickIntegrationEnabled && (
+            <div className={styles.orSeparator}>
+              <OrSeparator />
+            </div>
+          )}
           {oneClickIntegrationEnabled && (
             <HorizontalGutter>
-              {facebookEnabled && <SignInWithFacebookContainer auth={auth} />}
-              {googleEnabled && <SignInWithGoogleContainer auth={auth} />}
+              {facebookEnabled && (
+                <div className={styles.loginButton}>
+                  <SignInWithFacebookContainer auth={auth} />
+                </div>
+              )}
+              {googleEnabled && (
+                <div className={styles.loginButton}>
+                  <SignInWithGoogleContainer auth={auth} />
+                </div>
+              )}
               {oidcEnabled && <SignInWithOIDCContainer auth={auth} />}
             </HorizontalGutter>
           )}

src/core/client/admin/routes/Login/views/SignIn/SignInWithEmail.css

@@ -1,4 +1,20 @@
 .textLink {
-  color: var(--palette-primary-main);
+  font-weight: var(--v2-font-weight-primary-semi-bold);
+  font-family: var(--v2-font-family-primary);
+  color: var(--v2-colors-teal-700);
+  font-size: var(--v2-font-size-1);
+  line-height: var(--v2-line-height-reset);
   text-decoration: underline;
-}
+}
+
+.container {
+  padding-bottom: var(--v2-spacing-5);
+}
+
+.field {
+  padding-bottom: var(--v2-spacing-4);
+}
+
+.field {
+  padding-bottom: var(--v2-spacing-4);
+}

src/core/client/admin/routes/Login/views/SignIn/SignInWithEmail.tsx

@@ -19,8 +19,7 @@ import {
   FormField,
   HorizontalGutter,
   InputLabel,
-  Typography,
-} from "coral-ui/components";
+} from "coral-ui/components/v2";
 
 import EmailField from "../../EmailField";
 
@@ -42,36 +41,37 @@ const SignInWithEmail: FunctionComponent<SignInWithEmailForm> = props => {
     <Form onSubmit={props.onSubmit}>
       {({ handleSubmit, submitting, submitError }) => (
         <form autoComplete="off" onSubmit={handleSubmit}>
-          <HorizontalGutter size="full">
+          <HorizontalGutter size="full" className={styles.container}>
             {submitError && (
               <CallOut color="error" fullWidth>
                 {submitError}
               </CallOut>
             )}
-
-            <EmailField disabled={submitting} />
-            <Field name="password" validate={composeValidators(required)}>
-              {({ input, meta }) => (
-                <FormField>
-                  <Localized id="login-signIn-passwordLabel">
-                    <InputLabel htmlFor={input.name}>Password</InputLabel>
-                  </Localized>
-                  <Localized
-                    id="login-signIn-passwordTextField"
-                    attrs={{ placeholder: true }}
-                  >
-                    <PasswordField
-                      {...input}
-                      id={input.name}
-                      placeholder="Password"
-                      color={colorFromMeta(meta)}
-                      disabled={submitting}
-                      fullWidth
-                    />
-                  </Localized>
-                  <ValidationMessage meta={meta} fullWidth />
-                  <Flex justifyContent="flex-end">
-                    <Typography>
+            <div className={styles.field}>
+              <EmailField disabled={submitting} />
+            </div>
+            <div className={styles.field}>
+              <Field name="password" validate={composeValidators(required)}>
+                {({ input, meta }) => (
+                  <FormField>
+                    <Localized id="login-signIn-passwordLabel">
+                      <InputLabel htmlFor={input.name}>Password</InputLabel>
+                    </Localized>
+                    <Localized
+                      id="login-signIn-passwordTextField"
+                      attrs={{ placeholder: true }}
+                    >
+                      <PasswordField
+                        {...input}
+                        id={input.name}
+                        placeholder="Password"
+                        color={colorFromMeta(meta)}
+                        disabled={submitting}
+                        fullWidth
+                      />
+                    </Localized>
+                    <ValidationMessage meta={meta} fullWidth />
+                    <Flex justifyContent="flex-end">
                       <Localized id="login-signIn-forgot-password">
                         <Link
                           className={styles.textLink}
@@ -80,21 +80,20 @@ const SignInWithEmail: FunctionComponent<SignInWithEmailForm> = props => {
                           Forgot your password?
                         </Link>
                       </Localized>
-                    </Typography>
-                  </Flex>
-                </FormField>
-              )}
-            </Field>
+                    </Flex>
+                  </FormField>
+                )}
+              </Field>
+            </div>
             <Button
-              variant="filled"
-              color="brand"
+              variant="regular"
+              color="regular"
               size="large"
               type="submit"
               disabled={submitting}
               fullWidth
             >
               <ButtonIcon size="md">email</ButtonIcon>
-
               <Localized id="login-signIn-signInWithEmail">
                 <span>Sign in with Email</span>
               </Localized>

src/core/client/admin/routes/Login/views/SignIn/Version.css

@@ -1,8 +1,18 @@
-.version {
-  width: 350px;
-  background-color: #f5f5f5;
-  border: 1px solid var(--palette-grey-lighter);
+.container {
+  width: 385px;
+  background-color: var(--v2-colors-grey-100);
+  border: 1px solid var(--v2-colors-grey-300);
   border-top: 0;
-  padding: var(--mini-unit);
+  padding-top: var(--v2-spacing-3);
+  padding-bottom: var(--v2-spacing-3);
+  padding-left: var(--v2-spacing-6);
+  padding-right: var(--v2-spacing-6);
   box-sizing: border-box;
+
+  text-align: center;
+  font-size: var(--v2-font-size-1);
+  font-weight: var(--v2-font-weight-primary-bold);
+  font-family: var(--v2-font-family-primary);
+  line-height: var(--v2-line-height-reset);
+  color: var(--v2-colors-mono-100);
 }

src/core/client/admin/routes/Login/views/SignIn/Version.tsx

@@ -1,15 +1,15 @@
 import React, { FunctionComponent } from "react";
 
-import { Flex, Typography } from "coral-ui/components";
+import { Flex } from "coral-ui/components/v2";
 
 import styles from "./Version.css";
 
 const Version: FunctionComponent = () => {
   return (
-    <Flex justifyContent="center">
-      <Typography className={styles.version} variant="detail" align="center">
+    <Flex justifyContent="center" alignItems="center">
+      <div className={styles.container}>
         {process.env.TALK_VERSION ? `v${process.env.TALK_VERSION}` : "Unknown"}
-      </Typography>
+      </div>
     </Flex>
   );
 };

src/core/client/admin/routes/Login/views/SignIn/__snapshots__/SignIn.spec.tsx.snap

@@ -4,13 +4,17 @@ exports[`renders correctly 1`] = `
 <React.Fragment>
   <AuthBox
     title={
-      <Localized
-        id="login-signInTo"
+      <div
+        className="SignIn-title"
       >
-        <span>
-          Sign in to
-        </span>
-      </Localized>
+        <Localized
+          id="login-signInTo"
+        >
+          <span>
+            Sign in to
+          </span>
+        </Localized>
+      </div>
     }
   >
     <ForwardRef(forwardRef)

src/core/client/admin/test/auth/__snapshots__/createPassword.spec.tsx.snap

@@ -39,6 +39,7 @@ we require users to create a password.
             autoComplete="off"
             autoCorrect="off"
             className="PasswordField-colorError PasswordField-fullWidth PasswordField-input"
+            data-testid="password-field"
             disabled={false}
             id="password"
             name="password"
@@ -167,6 +168,7 @@ we require users to create a password.
                       autoComplete="off"
                       autoCorrect="off"
                       className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
+                      data-testid="password-field"
                       disabled={false}
                       id="password"
                       name="password"
@@ -258,6 +260,7 @@ we require users to create a password.
             autoComplete="off"
             autoCorrect="off"
             className="PasswordField-colorError PasswordField-fullWidth PasswordField-input"
+            data-testid="password-field"
             disabled={false}
             id="password"
             name="password"
@@ -371,6 +374,7 @@ GraphQL request (4:3)
             autoComplete="off"
             autoCorrect="off"
             className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
+            data-testid="password-field"
             disabled={false}
             id="password"
             name="password"
@@ -457,6 +461,7 @@ we require users to create a password.
             autoComplete="off"
             autoCorrect="off"
             className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
+            data-testid="password-field"
             disabled={false}
             id="password"
             name="password"

src/core/client/admin/test/auth/__snapshots__/restricted.spec.tsx.snap

@@ -10,39 +10,27 @@ exports[`show restricted screen for commenters and staff 1`] = `
     <div
       className="Box-root HorizontalGutter-root AuthBox-container HorizontalGutter-double"
     >
-      <div
-        className="Box-root Flex-root Flex-flex Flex-justifyCenter"
-      >
-        <div
-          className="AuthBox-brandIcon"
-        >
-          <svg
-            className="BrandMark-base BrandMark-lg"
-            data-name="Layer 1"
-            id="Layer_1"
-            viewBox="0 0 520.96 540.83"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M510.27,352.74a17.5,17.5,0,0,0-22.93,9.3A235.18,235.18,0,0,1,287.92,505.19V463a66.65,66.65,0,0,1,3.22-6.65c10.93-19.65,31.34-30.85,55-43.83,26.9-14.77,57.38-31.51,76-64.65a17.5,17.5,0,1,0-30.51-17.14c-13.72,24.41-37.33,37.38-62.33,51.11-14.16,7.78-28.59,15.71-41.34,25.91V382.59c0-36,23.82-56.49,54-82.46,18.33-15.79,37.29-32.11,52.27-53.74C411.77,221,420.32,193,420.32,160.7a17.5,17.5,0,0,0-35,0c0,35.62-13.1,59.79-31.43,80.24-17.9-24.71-30.34-56.66-30.34-80.24a17.5,17.5,0,0,0-35,0c0,32.53,15.93,73.46,39.93,104.75-3.11,2.72-6.26,5.43-9.43,8.16-17.77,15.31-35.87,30.91-48.63,50.41-12.77-19.5-30.86-35.1-48.64-50.41-3.17-2.73-6.32-5.44-9.42-8.16,24-31.29,39.92-72.22,39.92-104.75a17.5,17.5,0,0,0-35,0c0,23.58-12.44,55.54-30.34,80.24-18.33-20.45-31.43-44.62-31.43-80.24a17.5,17.5,0,0,0-35,0c0,32.26,8.56,60.29,26.16,85.69,15,21.63,33.94,37.95,52.27,53.74,30.16,26,54,46.48,54,82.46v25.19c-12.77-10.22-27.21-18.16-41.38-25.94-25-13.73-48.62-26.7-62.33-51.11a17.5,17.5,0,1,0-30.51,17.14c18.61,33.14,49.09,49.88,76,64.65,23.63,13,44,24.18,55,43.83a70.43,70.43,0,0,1,3.26,6.72v42.12A235.34,235.34,0,0,1,104,104a235.56,235.56,0,0,1,383.39,74.84,17.5,17.5,0,1,0,32.23-13.64,270.22,270.22,0,1,0,0,210.53A17.5,17.5,0,0,0,510.27,352.74Z"
-              fill="#f77160"
-            />
-          </svg>
-        </div>
-      </div>
       <div>
-        <h1
-          className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Typography-alignCenter"
+        <div
+          className="Box-root Flex-root Flex-flex Flex-justifyCenter"
         >
-          <span>
-            Currently signed in to
-          </span>
-        </h1>
-        <h1
-          className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter BrandName-root BrandName-lg"
+          <div
+            className="adminSignInTitle"
+          >
+            <div
+              className="Restricted-title"
+            >
+              <span>
+                Currently signed in to
+              </span>
+            </div>
+          </div>
+        </div>
+        <div
+          className="BrandName-root BrandName-lg BrandName-alignCenter"
         >
           Coral
-        </h1>
+        </div>
       </div>
       <div
         className="Box-root HorizontalGutter-root HorizontalGutter-double"
@@ -58,31 +46,31 @@ exports[`show restricted screen for commenters and staff 1`] = `
               lock
             </i>
           </div>
-          <h1
-            className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Typography-alignCenter Restricted-noPermission"
+          <div
+            className="Restricted-noPermission"
           >
             You do not have permission to access this page.
-          </h1>
+          </div>
         </div>
         <div>
           <div
-            className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Typography-alignCenter"
+            className="Restricted-copy"
           >
             You are signed in as: 
-            <h1
-              className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter"
+            <div
+              className="Restricted-username"
             >
               Markus
-            </h1>
+            </div>
           </div>
         </div>
         <div
           className="Box-root Flex-root Flex-flex Flex-justifyCenter"
         >
           <button
-            className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
-            data-color="primary"
-            data-variant="filled"
+            className="BaseButton-root Button-root Button-sizeLarge Button-colorRegular Button-variantRegular Button-uppercase"
+            data-color="regular"
+            data-variant="regular"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -94,11 +82,11 @@ exports[`show restricted screen for commenters and staff 1`] = `
             Sign in with a different account
           </button>
         </div>
-        <p
-          className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Typography-alignCenter Restricted-contactAdmin"
+        <div
+          className="Restricted-copy Restricted-contactAdmin"
         >
           If you think this is an error, please contact your administrator for assistance.
-        </p>
+        </div>
       </div>
     </div>
   </div>
@@ -115,39 +103,27 @@ exports[`show restricted screen for commenters and staff 2`] = `
     <div
       className="Box-root HorizontalGutter-root AuthBox-container HorizontalGutter-double"
     >
-      <div
-        className="Box-root Flex-root Flex-flex Flex-justifyCenter"
-      >
-        <div
-          className="AuthBox-brandIcon"
-        >
-          <svg
-            className="BrandMark-base BrandMark-lg"
-            data-name="Layer 1"
-            id="Layer_1"
-            viewBox="0 0 520.96 540.83"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M510.27,352.74a17.5,17.5,0,0,0-22.93,9.3A235.18,235.18,0,0,1,287.92,505.19V463a66.65,66.65,0,0,1,3.22-6.65c10.93-19.65,31.34-30.85,55-43.83,26.9-14.77,57.38-31.51,76-64.65a17.5,17.5,0,1,0-30.51-17.14c-13.72,24.41-37.33,37.38-62.33,51.11-14.16,7.78-28.59,15.71-41.34,25.91V382.59c0-36,23.82-56.49,54-82.46,18.33-15.79,37.29-32.11,52.27-53.74C411.77,221,420.32,193,420.32,160.7a17.5,17.5,0,0,0-35,0c0,35.62-13.1,59.79-31.43,80.24-17.9-24.71-30.34-56.66-30.34-80.24a17.5,17.5,0,0,0-35,0c0,32.53,15.93,73.46,39.93,104.75-3.11,2.72-6.26,5.43-9.43,8.16-17.77,15.31-35.87,30.91-48.63,50.41-12.77-19.5-30.86-35.1-48.64-50.41-3.17-2.73-6.32-5.44-9.42-8.16,24-31.29,39.92-72.22,39.92-104.75a17.5,17.5,0,0,0-35,0c0,23.58-12.44,55.54-30.34,80.24-18.33-20.45-31.43-44.62-31.43-80.24a17.5,17.5,0,0,0-35,0c0,32.26,8.56,60.29,26.16,85.69,15,21.63,33.94,37.95,52.27,53.74,30.16,26,54,46.48,54,82.46v25.19c-12.77-10.22-27.21-18.16-41.38-25.94-25-13.73-48.62-26.7-62.33-51.11a17.5,17.5,0,1,0-30.51,17.14c18.61,33.14,49.09,49.88,76,64.65,23.63,13,44,24.18,55,43.83a70.43,70.43,0,0,1,3.26,6.72v42.12A235.34,235.34,0,0,1,104,104a235.56,235.56,0,0,1,383.39,74.84,17.5,17.5,0,1,0,32.23-13.64,270.22,270.22,0,1,0,0,210.53A17.5,17.5,0,0,0,510.27,352.74Z"
-              fill="#f77160"
-            />
-          </svg>
-        </div>
-      </div>
       <div>
-        <h1
-          className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Typography-alignCenter"
+        <div
+          className="Box-root Flex-root Flex-flex Flex-justifyCenter"
         >
-          <span>
-            Currently signed in to
-          </span>
-        </h1>
-        <h1
-          className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter BrandName-root BrandName-lg"
+          <div
+            className="adminSignInTitle"
+          >
+            <div
+              className="Restricted-title"
+            >
+              <span>
+                Currently signed in to
+              </span>
+            </div>
+          </div>
+        </div>
+        <div
+          className="BrandName-root BrandName-lg BrandName-alignCenter"
         >
           Coral
-        </h1>
+        </div>
       </div>
       <div
         className="Box-root HorizontalGutter-root HorizontalGutter-double"
@@ -163,31 +139,31 @@ exports[`show restricted screen for commenters and staff 2`] = `
               lock
             </i>
           </div>
-          <h1
-            className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Typography-alignCenter Restricted-noPermission"
+          <div
+            className="Restricted-noPermission"
           >
             You do not have permission to access this page.
-          </h1>
+          </div>
         </div>
         <div>
           <div
-            className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Typography-alignCenter"
+            className="Restricted-copy"
           >
             You are signed in as: 
-            <h1
-              className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter"
+            <div
+              className="Restricted-username"
             >
               Markus
-            </h1>
+            </div>
           </div>
         </div>
         <div
           className="Box-root Flex-root Flex-flex Flex-justifyCenter"
         >
           <button
-            className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
-            data-color="primary"
-            data-variant="filled"
+            className="BaseButton-root Button-root Button-sizeLarge Button-colorRegular Button-variantRegular Button-uppercase"
+            data-color="regular"
+            data-variant="regular"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -199,11 +175,11 @@ exports[`show restricted screen for commenters and staff 2`] = `
             Sign in with a different account
           </button>
         </div>
-        <p
-          className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Typography-alignCenter Restricted-contactAdmin"
+        <div
+          className="Restricted-copy Restricted-contactAdmin"
         >
           If you think this is an error, please contact your administrator for assistance.
-        </p>
+        </div>
       </div>
     </div>
   </div>

src/core/client/admin/test/auth/signInWithEmail.spec.tsx

@@ -85,7 +85,7 @@ it("checks for invalid email", async () => {
 
   act(() => {
     within(form)
-      .getByLabelText("Email Address")
+      .getByTestID("email-field")
       .props.onChange({ target: { value: "invalid-email" } });
   });
   act(() => {
@@ -104,7 +104,7 @@ it("accepts valid email", async () => {
 
   act(() => {
     within(form)
-      .getByLabelText("Email Address")
+      .getByTestID("email-field")
       .props.onChange({ target: { value: "hans@test.com" } });
   });
   act(() => {
@@ -123,7 +123,7 @@ it("accepts correct password", async () => {
 
   act(() => {
     within(form)
-      .getByLabelText("Password")
+      .getByTestID("password-field")
       .props.onChange({ target: { value: "testtest" } });
   });
   act(() => {
@@ -141,12 +141,12 @@ it("shows server error", async () => {
   const { form, context } = await createTestRenderer();
   act(() => {
     within(form)
-      .getByLabelText("Email Address")
+      .getByTestID("email-field")
       .props.onChange({ target: { value: "hans@test.com" } });
   });
   act(() => {
     within(form)
-      .getByLabelText("Password")
+      .getByTestID("password-field")
       .props.onChange({ target: { value: "testtest" } });
   });
 
@@ -184,12 +184,12 @@ it("submits form successfully", async () => {
   const { form, context } = await createTestRenderer();
   act(() => {
     within(form)
-      .getByLabelText("Email Address")
+      .getByTestID("email-field")
       .props.onChange({ target: { value: "hans@test.com" } });
   });
   act(() => {
     within(form)
-      .getByLabelText("Password")
+      .getByTestID("password-field")
       .props.onChange({ target: { value: "testtest" } });
   });
 

src/core/client/admin/test/configure/__snapshots__/auth.spec.tsx.snap

@@ -872,6 +872,7 @@ needs to be displayed, e.g. “Log in with <Facebook>”.
                           autoComplete="off"
                           autoCorrect="off"
                           className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
+                          data-testid="password-field"
                           disabled={true}
                           id="auth.integrations.oidc.clientSecret"
                           name="auth.integrations.oidc.clientSecret"
@@ -1252,6 +1253,7 @@ integration to register for a new account.
                           autoComplete="off"
                           autoCorrect="off"
                           className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
+                          data-testid="password-field"
                           id="configure-auth-sso-key"
                           name="key"
                           placeholder=""
@@ -1603,6 +1605,7 @@ to create and set up a web application. For more information visit:
                           autoComplete="off"
                           autoCorrect="off"
                           className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
+                          data-testid="password-field"
                           disabled={true}
                           id="auth.integrations.google.clientSecret"
                           name="auth.integrations.google.clientSecret"
@@ -1923,6 +1926,7 @@ For more information visit:
                           autoComplete="off"
                           autoCorrect="off"
                           className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
+                          data-testid="password-field"
                           disabled={true}
                           id="auth.integrations.facebook.clientSecret"
                           name="auth.integrations.facebook.clientSecret"

src/core/client/admin/test/configure/__snapshots__/moderation.spec.tsx.snap

@@ -977,6 +977,7 @@ community model building purposes to improve the API over time.
                         autoComplete="off"
                         autoCorrect="off"
                         className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
+                        data-testid="password-field"
                         disabled={false}
                         id="configure-moderation-integrations.perspective.key"
                         name="integrations.perspective.key"
@@ -1180,6 +1181,7 @@ in your Akismet account:
                         autoComplete="off"
                         autoCorrect="off"
                         className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
+                        data-testid="password-field"
                         disabled={false}
                         id="configure-moderation-integrations.akismet.key"
                         name="integrations.akismet.key"

src/core/client/auth/test/__snapshots__/createPassword.spec.tsx.snap

@@ -39,6 +39,7 @@ we require users to create a password.
             autoComplete="off"
             autoCorrect="off"
             className="PasswordField-colorError PasswordField-fullWidth PasswordField-input"
+            data-testid="password-field"
             disabled={false}
             id="password"
             name="password"
@@ -158,6 +159,7 @@ we require users to create a password.
                     autoComplete="off"
                     autoCorrect="off"
                     className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
+                    data-testid="password-field"
                     disabled={false}
                     id="password"
                     name="password"
@@ -248,6 +250,7 @@ we require users to create a password.
             autoComplete="off"
             autoCorrect="off"
             className="PasswordField-colorError PasswordField-fullWidth PasswordField-input"
+            data-testid="password-field"
             disabled={false}
             id="password"
             name="password"
@@ -361,6 +364,7 @@ GraphQL request (4:3)
             autoComplete="off"
             autoCorrect="off"
             className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
+            data-testid="password-field"
             disabled={false}
             id="password"
             name="password"
@@ -447,6 +451,7 @@ we require users to create a password.
             autoComplete="off"
             autoCorrect="off"
             className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
+            data-testid="password-field"
             disabled={false}
             id="password"
             name="password"

src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap

@@ -61,6 +61,7 @@ exports[`auth configuration renders all auth enabled 1`] = `
                 autoComplete="off"
                 autoCorrect="off"
                 className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
+                data-testid="password-field"
                 disabled={false}
                 id="password"
                 name="password"
@@ -145,9 +146,9 @@ exports[`auth configuration renders all auth enabled 1`] = `
       className="Box-root HorizontalGutter-root HorizontalGutter-full"
     >
       <button
-        className="BaseButton-root Button-root Button-sizeLarge Button-colorRegular FacebookButton-colorRegular Button-variantFilled FacebookButton-variantFilled Button-fullWidth"
+        className="BaseButton-root Button-root Button-sizeLarge Button-colorRegular FacebookButton-colorRegular Button-variantRegular FacebookButton-variantRegular Button-uppercase Button-fullWidth"
         data-color="regular"
-        data-variant="filled"
+        data-variant="regular"
         onBlur={[Function]}
         onClick={[Function]}
         onFocus={[Function]}
@@ -173,9 +174,9 @@ exports[`auth configuration renders all auth enabled 1`] = `
         </span>
       </button>
       <button
-        className="BaseButton-root Button-root Button-sizeLarge Button-colorRegular GoogleButton-colorRegular Button-variantFilled GoogleButton-variantFilled Button-fullWidth"
+        className="BaseButton-root Button-root Button-sizeLarge Button-colorRegular GoogleButton-colorRegular Button-variantRegular GoogleButton-variantRegular Button-uppercase Button-fullWidth"
         data-color="regular"
-        data-variant="filled"
+        data-variant="regular"
         onBlur={[Function]}
         onClick={[Function]}
         onFocus={[Function]}
@@ -201,7 +202,7 @@ exports[`auth configuration renders all auth enabled 1`] = `
         </span>
       </button>
       <button
-        className="BaseButton-root Button-root Button-sizeLarge Button-colorRegular OIDCButton-colorRegular Button-variantFilled OIDCButton-variantFilled Button-fullWidth"
+        className="BaseButton-root Button-root Button-sizeLarge Button-colorRegular OIDCButton-colorRegular Button-variantFilled Button-fullWidth"
         data-color="regular"
         data-variant="filled"
         onBlur={[Function]}
@@ -233,9 +234,9 @@ exports[`auth configuration renders only some social login enabled 1`] = `
       className="Box-root HorizontalGutter-root HorizontalGutter-full"
     >
       <button
-        className="BaseButton-root Button-root Button-sizeLarge Button-colorRegular FacebookButton-colorRegular Button-variantFilled FacebookButton-variantFilled Button-fullWidth"
+        className="BaseButton-root Button-root Button-sizeLarge Button-colorRegular FacebookButton-colorRegular Button-variantRegular FacebookButton-variantRegular Button-uppercase Button-fullWidth"
         data-color="regular"
-        data-variant="filled"
+        data-variant="regular"
         onBlur={[Function]}
         onClick={[Function]}
         onFocus={[Function]}
@@ -261,9 +262,9 @@ exports[`auth configuration renders only some social login enabled 1`] = `
         </span>
       </button>
       <button
-        className="BaseButton-root Button-root Button-sizeLarge Button-colorRegular GoogleButton-colorRegular Button-variantFilled GoogleButton-variantFilled Button-fullWidth"
+        className="BaseButton-root Button-root Button-sizeLarge Button-colorRegular GoogleButton-colorRegular Button-variantRegular GoogleButton-variantRegular Button-uppercase Button-fullWidth"
         data-color="regular"
-        data-variant="filled"
+        data-variant="regular"
         onBlur={[Function]}
         onClick={[Function]}
         onFocus={[Function]}
@@ -395,6 +396,7 @@ exports[`renders sign in view 1`] = `
                       autoComplete="off"
                       autoCorrect="off"
                       className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
+                      data-testid="password-field"
                       disabled={false}
                       id="password"
                       name="password"

src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap

@@ -97,6 +97,7 @@ exports[`auth configuration renders all auth enabled 1`] = `
                 autoComplete="off"
                 autoCorrect="off"
                 className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
+                data-testid="password-field"
                 disabled={false}
                 id="password"
                 name="password"
@@ -166,9 +167,9 @@ exports[`auth configuration renders all auth enabled 1`] = `
       className="Box-root HorizontalGutter-root HorizontalGutter-full"
     >
       <button
-        className="BaseButton-root Button-root Button-sizeLarge Button-colorRegular FacebookButton-colorRegular Button-variantFilled FacebookButton-variantFilled Button-fullWidth"
+        className="BaseButton-root Button-root Button-sizeLarge Button-colorRegular FacebookButton-colorRegular Button-variantRegular FacebookButton-variantRegular Button-uppercase Button-fullWidth"
         data-color="regular"
-        data-variant="filled"
+        data-variant="regular"
         onBlur={[Function]}
         onClick={[Function]}
         onFocus={[Function]}
@@ -194,9 +195,9 @@ exports[`auth configuration renders all auth enabled 1`] = `
         </span>
       </button>
       <button
-        className="BaseButton-root Button-root Button-sizeLarge Button-colorRegular GoogleButton-colorRegular Button-variantFilled GoogleButton-variantFilled Button-fullWidth"
+        className="BaseButton-root Button-root Button-sizeLarge Button-colorRegular GoogleButton-colorRegular Button-variantRegular GoogleButton-variantRegular Button-uppercase Button-fullWidth"
         data-color="regular"
-        data-variant="filled"
+        data-variant="regular"
         onBlur={[Function]}
         onClick={[Function]}
         onFocus={[Function]}
@@ -222,7 +223,7 @@ exports[`auth configuration renders all auth enabled 1`] = `
         </span>
       </button>
       <button
-        className="BaseButton-root Button-root Button-sizeLarge Button-colorRegular OIDCButton-colorRegular Button-variantFilled OIDCButton-variantFilled Button-fullWidth"
+        className="BaseButton-root Button-root Button-sizeLarge Button-colorRegular OIDCButton-colorRegular Button-variantFilled Button-fullWidth"
         data-color="regular"
         data-variant="filled"
         onBlur={[Function]}
@@ -254,9 +255,9 @@ exports[`auth configuration renders only some social login enabled 1`] = `
       className="Box-root HorizontalGutter-root HorizontalGutter-full"
     >
       <button
-        className="BaseButton-root Button-root Button-sizeLarge Button-colorRegular FacebookButton-colorRegular Button-variantFilled FacebookButton-variantFilled Button-fullWidth"
+        className="BaseButton-root Button-root Button-sizeLarge Button-colorRegular FacebookButton-colorRegular Button-variantRegular FacebookButton-variantRegular Button-uppercase Button-fullWidth"
         data-color="regular"
-        data-variant="filled"
+        data-variant="regular"
         onBlur={[Function]}
         onClick={[Function]}
         onFocus={[Function]}
@@ -282,9 +283,9 @@ exports[`auth configuration renders only some social login enabled 1`] = `
         </span>
       </button>
       <button
-        className="BaseButton-root Button-root Button-sizeLarge Button-colorRegular GoogleButton-colorRegular Button-variantFilled GoogleButton-variantFilled Button-fullWidth"
+        className="BaseButton-root Button-root Button-sizeLarge Button-colorRegular GoogleButton-colorRegular Button-variantRegular GoogleButton-variantRegular Button-uppercase Button-fullWidth"
         data-color="regular"
-        data-variant="filled"
+        data-variant="regular"
         onBlur={[Function]}
         onClick={[Function]}
         onFocus={[Function]}
@@ -452,6 +453,7 @@ exports[`renders sign up form 1`] = `
                       autoComplete="off"
                       autoCorrect="off"
                       className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
+                      data-testid="password-field"
                       disabled={false}
                       id="password"
                       name="password"

src/core/client/framework/components/FacebookButton.css

@@ -1,9 +1,7 @@
-.variantFilled {
-  &.colorRegular {
-    background-color: #3b5998;
-  }
+.variantRegular {
   &:not(.disabled) {
     &.colorRegular {
+      background-color: #3b5998;
       &.mouseHover {
         background-color: #4467b0;
       }

src/core/client/framework/components/FacebookButton.tsx

@@ -1,7 +1,7 @@
 import React, { FunctionComponent } from "react";
 
 import { PropTypesOf } from "coral-framework/types";
-import { Button } from "coral-ui/components";
+import { Button } from "coral-ui/components/v2";
 
 import styles from "./FacebookButton.css";
 
@@ -28,7 +28,7 @@ const facebookIcon = (
 const FacebookButton: FunctionComponent<Props> = props => (
   <Button
     classes={styles}
-    variant="filled"
+    variant="regular"
     size="large"
     fullWidth
     onClick={props.onClick}

src/core/client/framework/components/GoogleButton.css

@@ -1,9 +1,7 @@
-.variantFilled {
-  &.colorRegular {
-    background-color: #db4437;
-  }
+.variantRegular {
   &:not(.disabled) {
     &.colorRegular {
+      background-color: #db4437;
       &.mouseHover {
         background-color: #e05f54;
       }

src/core/client/framework/components/GoogleButton.tsx

@@ -1,7 +1,7 @@
 import React, { FunctionComponent } from "react";
 
 import { PropTypesOf } from "coral-framework/types";
-import { Button } from "coral-ui/components";
+import { Button } from "coral-ui/components/v2";
 
 import styles from "./GoogleButton.css";
 
@@ -28,7 +28,7 @@ const googleIcon = (
 const GoogleButton: FunctionComponent<Props> = props => (
   <Button
     classes={styles}
-    variant="filled"
+    variant="regular"
     size="large"
     fullWidth
     onClick={props.onClick}

src/core/client/framework/components/OIDCButton.css

@@ -1,9 +1,7 @@
-.variantFilled {
-  &.colorRegular {
-    background-color: #0d5b8f;
-  }
+.variantRegular {
   &:not(.disabled) {
     &.colorRegular {
+      background-color: #0d5b8f;
       &.mouseHover {
         background-color: #106fae;
       }

src/core/client/framework/components/PasswordField.tsx

@@ -2,7 +2,7 @@ import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";
 
 import { Omit, PropTypesOf } from "coral-framework/types";
-import { PasswordField as PasswordFieldUI } from "coral-ui/components";
+import { PasswordField as PasswordFieldUI } from "coral-ui/components/v2";
 
 type Props = Omit<
   PropTypesOf<typeof PasswordFieldUI>,

src/core/client/framework/components/__snapshots__/FacebookButton.spec.tsx.snap

@@ -8,13 +8,13 @@ exports[`renders correctly 1`] = `
       "colorRegular": "FacebookButton-colorRegular",
       "disabled)": "FacebookButton-disabled)",
       "mouseHover": "FacebookButton-mouseHover",
-      "variantFilled": "FacebookButton-variantFilled",
+      "variantRegular": "FacebookButton-variantRegular",
     }
   }
   fullWidth={true}
   onClick={[Function]}
   size="large"
-  variant="filled"
+  variant="regular"
 >
   <svg
     fill="none"

src/core/client/framework/components/__snapshots__/GoogleButton.spec.tsx.snap

@@ -8,13 +8,13 @@ exports[`renders correctly 1`] = `
       "colorRegular": "GoogleButton-colorRegular",
       "disabled)": "GoogleButton-disabled)",
       "mouseHover": "GoogleButton-mouseHover",
-      "variantFilled": "GoogleButton-variantFilled",
+      "variantRegular": "GoogleButton-variantRegular",
     }
   }
   fullWidth={true}
   onClick={[Function]}
   size="large"
-  variant="filled"
+  variant="regular"
 >
   <svg
     fill="none"

src/core/client/framework/components/__snapshots__/OIDCButton.spec.tsx.snap

@@ -8,7 +8,7 @@ exports[`renders correctly 1`] = `
       "colorRegular": "OIDCButton-colorRegular",
       "disabled)": "OIDCButton-disabled)",
       "mouseHover": "OIDCButton-mouseHover",
-      "variantFilled": "OIDCButton-variantFilled",
+      "variantRegular": "OIDCButton-variantRegular",
     }
   }
   fullWidth={true}

src/core/client/ui/components/v2/Brand/Brand.mdx

@@ -0,0 +1,20 @@
+---
+name: Brand
+menu: UI Kit
+---
+
+import { Playground, PropsTable } from "docz";
+import { BrandName, BrandIcon, Logo } from "./";
+import HorizontalGutter from "../HorizontalGutter";
+
+# Brand
+
+## Basic usage
+
+<Playground>
+  <HorizontalGutter>
+    <BrandName />
+    <BrandIcon />
+    <Logo />
+  </HorizontalGutter>
+</Playground>

src/core/client/ui/components/v2/Brand/BrandMark.css

@@ -0,0 +1,12 @@
+.base {
+}
+
+.md {
+  height: 25px;
+  width: 25px;
+}
+
+.lg {
+  height: 58px;
+  width: 59px;
+}

src/core/client/ui/components/v2/Brand/BrandMark.tsx

@@ -0,0 +1,44 @@
+import cn from "classnames";
+import React, { FunctionComponent } from "react";
+
+import { withStyles } from "coral-ui/hocs";
+
+import styles from "./BrandMark.css";
+
+interface Props {
+  className?: string;
+  classes: typeof styles;
+  size?: "md" | "lg";
+  fill?: string;
+}
+
+const BrandMark: FunctionComponent<Props> = ({
+  className,
+  classes,
+  size,
+  fill,
+  ...rest
+}) => (
+  <svg
+    {...rest}
+    className={cn(classes.base, className, {
+      [classes.md]: size === "md",
+      [classes.lg]: size === "lg",
+    })}
+    id="Layer_1"
+    data-name="Layer 1"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 520.96 540.83"
+  >
+    <path
+      fill={fill}
+      d="M510.27,352.74a17.5,17.5,0,0,0-22.93,9.3A235.18,235.18,0,0,1,287.92,505.19V463a66.65,66.65,0,0,1,3.22-6.65c10.93-19.65,31.34-30.85,55-43.83,26.9-14.77,57.38-31.51,76-64.65a17.5,17.5,0,1,0-30.51-17.14c-13.72,24.41-37.33,37.38-62.33,51.11-14.16,7.78-28.59,15.71-41.34,25.91V382.59c0-36,23.82-56.49,54-82.46,18.33-15.79,37.29-32.11,52.27-53.74C411.77,221,420.32,193,420.32,160.7a17.5,17.5,0,0,0-35,0c0,35.62-13.1,59.79-31.43,80.24-17.9-24.71-30.34-56.66-30.34-80.24a17.5,17.5,0,0,0-35,0c0,32.53,15.93,73.46,39.93,104.75-3.11,2.72-6.26,5.43-9.43,8.16-17.77,15.31-35.87,30.91-48.63,50.41-12.77-19.5-30.86-35.1-48.64-50.41-3.17-2.73-6.32-5.44-9.42-8.16,24-31.29,39.92-72.22,39.92-104.75a17.5,17.5,0,0,0-35,0c0,23.58-12.44,55.54-30.34,80.24-18.33-20.45-31.43-44.62-31.43-80.24a17.5,17.5,0,0,0-35,0c0,32.26,8.56,60.29,26.16,85.69,15,21.63,33.94,37.95,52.27,53.74,30.16,26,54,46.48,54,82.46v25.19c-12.77-10.22-27.21-18.16-41.38-25.94-25-13.73-48.62-26.7-62.33-51.11a17.5,17.5,0,1,0-30.51,17.14c18.61,33.14,49.09,49.88,76,64.65,23.63,13,44,24.18,55,43.83a70.43,70.43,0,0,1,3.26,6.72v42.12A235.34,235.34,0,0,1,104,104a235.56,235.56,0,0,1,383.39,74.84,17.5,17.5,0,1,0,32.23-13.64,270.22,270.22,0,1,0,0,210.53A17.5,17.5,0,0,0,510.27,352.74Z"
+    />
+  </svg>
+);
+BrandMark.defaultProps = {
+  size: "md",
+  fill: "#f77160",
+};
+
+export default withStyles(styles)(BrandMark);

src/core/client/ui/components/v2/Brand/BrandName.css

@@ -0,0 +1,37 @@
+.root {
+
+  margin: 0;
+
+  font-weight: var(--v2-font-weight-secondary-bold);
+  font-family: var(--v2-font-family-secondary);
+  color: var(--v2-colors-coral-500);
+
+  font-size: 1.15rem;
+  line-height: 1.15rem;
+}
+
+.md {
+  font-size: 1.5rem;
+  line-height: 1.5rem;
+}
+
+.lg {
+  font-size: 2.625rem;
+  line-height: 2.625rem;
+}
+
+.alignLeft {
+  text-align: left;
+}
+
+.alignCenter {
+  text-align: center;
+}
+
+.alignRight {
+  text-align: right;
+}
+
+.alignJustify {
+  text-align: justify;
+}

src/core/client/ui/components/v2/Brand/BrandName.spec.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
+
+import { PropTypesOf } from "coral-framework/types";
+
+import BrandName from "./BrandName";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof BrandName> = {
+    align: "center",
+    className: "custom",
+    size: "lg",
+  };
+  const renderer = createRenderer();
+  renderer.render(<BrandName {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
+});

src/core/client/ui/components/v2/Brand/BrandName.tsx

@@ -0,0 +1,45 @@
+import { Localized } from "@fluent/react/compat";
+import cn from "classnames";
+import React, { FunctionComponent } from "react";
+
+import { withStyles } from "coral-ui/hocs";
+
+import styles from "./BrandName.css";
+
+interface Props {
+  align?: "inherit" | "left" | "center" | "right" | "justify";
+  className?: string;
+  classes: typeof styles;
+  size?: "md" | "lg";
+}
+
+const BrandName: FunctionComponent<Props> = ({
+  align,
+  className,
+  classes,
+  size,
+  ...rest
+}) => (
+  <Localized id="ui-brandName">
+    <div
+      {...rest}
+      className={cn(className, classes.root, {
+        [classes.md]: size === "md",
+        [classes.lg]: size === "lg",
+        [classes.alignLeft]: align === "left",
+        [classes.alignCenter]: align === "center",
+        [classes.alignRight]: align === "right",
+        [classes.alignJustify]: align === "justify",
+      })}
+    >
+      Coral
+    </div>
+  </Localized>
+);
+
+BrandName.defaultProps = {
+  size: "md",
+  align: "left",
+};
+
+export default withStyles(styles)(BrandName);

src/core/client/ui/components/v2/Brand/LogoHorizontal.css

@@ -0,0 +1,14 @@
+.base {
+  height: 34px;
+  width: 89px;
+}
+
+.hiddenTitle { 
+  position: absolute !important;
+  height: 1px; 
+  width: 1px;
+  overflow: hidden;
+  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
+  clip: rect(1px, 1px, 1px, 1px);
+  white-space: nowrap; /* added line */
+}

src/core/client/ui/components/v2/Brand/LogoHorizontal.tsx

@@ -0,0 +1,139 @@
+import { Localized } from "@fluent/react/compat";
+import React, { FunctionComponent } from "react";
+
+import { withStyles } from "coral-ui/hocs";
+
+import styles from "./LogoHorizontal.css";
+
+interface Props {
+  className?: string;
+  classes: typeof styles;
+  fill?: string;
+}
+
+const LogoHorizontal: FunctionComponent<Props> = ({
+  className,
+  classes,
+  fill,
+  ...rest
+}) => (
+  <>
+    <Localized id="ui-brandName">
+      <h1 aria-hidden className={styles.hiddenTitle}>
+        Coral
+      </h1>
+    </Localized>
+    <svg
+      id="Layer_1"
+      className={styles.base}
+      data-name="Layer 1"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 1011.23 388.38"
+    >
+      <title>Coral by Vox Media</title>
+      <path
+        fill={fill}
+        d="M384.61,375.13c0,6.54-4.55,10-11.82,10H359.44V350.25h12.22c7.27,0,11.81,3.24,11.81,9.49,0,3.75-2,6.47-4.54,7.38A8.45,8.45,0,0,1,384.61,375.13Zm-13-10.22c4,0,6.19-1.54,6.19-4.83s-2.16-4.72-6.19-4.72h-6.42v9.55ZM365.18,380h7.5c4,0,6.13-2,6.13-5.12s-2.15-5.11-6.13-5.11h-7.5Z"
+      />
+      <path
+        fill={fill}
+        d="M415.76,350.25H422l-12.67,21v13.92h-5.85V371.21l-12.62-21h6.42l9.26,15.62Z"
+      />
+      <path
+        fill={fill}
+        d="M358.84,148.31c0-56.33,44-100.89,99.76-100.89a98.22,98.22,0,0,1,75.95,35.31,12.88,12.88,0,0,1,3.36,8.41,11.9,11.9,0,0,1-12,11.77c-3.08,0-6.44-2-9.53-4.77-13.45-16.81-33.62-28-57.73-28-42,0-75.1,34.47-75.1,78.19,0,43.43,33.07,77.9,75.1,77.9,24.11,0,44.28-11.21,57.73-27.74,3.09-3.08,6.45-4.76,9.53-4.76a11.72,11.72,0,0,1,12,11.77,12.2,12.2,0,0,1-3.36,8.12,97.56,97.56,0,0,1-75.95,35.59C402.84,249.19,358.84,204.64,358.84,148.31Z"
+      />
+      <path
+        fill={fill}
+        d="M556.69,174.93c0-41.48,31.95-74.26,74-74.26s73.71,32.78,73.71,74.26-31.67,74.26-73.71,74.26S556.69,216.41,556.69,174.93Zm125,0c0-29.71-22.14-53.53-51-53.53s-51.28,23.82-51.28,53.53c0,29.42,22.42,53.53,51.28,53.53S681.68,204.35,681.68,174.93Z"
+      />
+      <path
+        fill={fill}
+        d="M729.87,161.2c0-36.15,23-60.53,57.73-60.53A10.34,10.34,0,0,1,798,111,10.52,10.52,0,0,1,787.6,121.4c-20.73,0-35.31,13.74-35.31,39.8v75.94a11.3,11.3,0,0,1-11.21,11.49,11.13,11.13,0,0,1-11.21-11.49Z"
+      />
+      <path
+        fill={fill}
+        d="M928.84,226.77a70.75,70.75,0,0,1-52.4,22.42c-41.2,0-72.59-32.78-72.59-74.26s31.39-74.26,72.59-74.26a71.84,71.84,0,0,1,52.4,22.41V112.43a11.25,11.25,0,0,1,11.21-11.21,11.07,11.07,0,0,1,11.21,11.21V237.14a11.13,11.13,0,0,1-11.21,11.49,11.31,11.31,0,0,1-11.21-11.49Zm0-49.6v-4.48c-1.12-29.15-23.26-51.29-51-51.29-28.59,0-51.29,23.26-51.29,53.53s22.7,53.53,51.29,53.53C905.58,228.46,927.72,206.32,928.84,177.17Z"
+      />
+      <path
+        fill={fill}
+        d="M988.81,59.19A11.06,11.06,0,0,1,1000,48a11.24,11.24,0,0,1,11.21,11.21v178A11.3,11.3,0,0,1,1000,248.63a11.13,11.13,0,0,1-11.21-11.49Z"
+      />
+      <path
+        fill={fill}
+        d="M279.85,193.46a9.61,9.61,0,0,0-12.58,5.1A129,129,0,0,1,157.9,277.07V253.94a37.3,37.3,0,0,1,1.77-3.66c6-10.78,17.19-16.92,30.15-24,14.75-8.1,31.47-17.28,41.68-35.46a9.6,9.6,0,0,0-16.74-9.4c-7.52,13.39-20.47,20.51-34.18,28-7.77,4.26-15.68,8.62-22.68,14.22V209.83c0-19.74,13.07-31,29.61-45.23,20.16-17.36,43-37,43-76.47a9.6,9.6,0,0,0-19.2,0c0,19.54-7.18,32.79-17.23,44-9.82-13.55-16.64-31.08-16.64-44a9.6,9.6,0,0,0-19.2,0c0,17.84,8.74,40.29,21.9,57.45L175,150.06c-9.75,8.39-19.67,16.95-26.67,27.64-7-10.69-16.93-19.25-26.68-27.64l-5.17-4.48c13.16-17.16,21.9-39.6,21.9-57.45a9.6,9.6,0,0,0-19.2,0c0,12.94-6.82,30.46-16.63,44-10.06-11.22-17.24-24.47-17.24-44a9.6,9.6,0,0,0-19.2,0c0,39.43,22.85,59.11,43,76.47,16.53,14.24,29.6,25.49,29.6,45.23v13.82c-7-5.61-14.92-10-22.7-14.23-13.71-7.53-26.66-14.65-34.18-28a9.59,9.59,0,0,0-16.73,9.4C75.3,209,92,218.14,106.77,226.24c13,7.12,24.16,13.26,30.15,24a37,37,0,0,1,1.79,3.7v23.09A129.07,129.07,0,0,1,57,57a129.19,129.19,0,0,1,210.26,41A9.6,9.6,0,0,0,285,90.58a148.38,148.38,0,0,0-273.29,0A148.3,148.3,0,0,0,253.17,253.17,147.66,147.66,0,0,0,285,206,9.59,9.59,0,0,0,279.85,193.46Z"
+      />
+      <path
+        fill={fill}
+        d="M529.25,340.63a23.88,23.88,0,1,0,23.88,23.88,23.88,23.88,0,0,0-23.88-23.88m0,35.71C523,376.34,518,371,518,364.51s5-11.83,11.26-11.83a11.84,11.84,0,0,1,0,23.66"
+      />
+      <polygon
+        fill={fill}
+        points="457.04 341.57 481.21 388.16 505.38 341.57 491.29 341.57 481.35 361.01 471.41 341.57 457.04 341.57"
+      />
+      <rect fill={fill} x="754.13" y="341.58" width="12.81" height="45.94" />
+      <polygon
+        fill={fill}
+        points="699.3 353.08 699.3 341.57 664.08 341.57 664.08 387.51 699.3 387.51 699.3 376.01 677.48 376.01 677.48 370.08 697.69 370.08 697.69 359.01 677.48 359.01 677.48 353.08 699.3 353.08"
+      />
+      <path
+        fill={fill}
+        d="M725.05,341.57h-19.3v45.94h19.3a23,23,0,1,0,0-45.94m-1,34.3h-5.32V353.22H724a11.33,11.33,0,1,1,0,22.65"
+      />
+      <polygon
+        fill={fill}
+        points="643.67 361.9 643.67 387.51 656.62 387.51 656.62 341.57 640.58 341.57 630.64 360.73 620.7 341.57 604.65 341.57 604.65 387.51 617.32 387.51 617.32 361.9 630.5 387.3 643.67 361.9"
+      />
+      <polygon
+        fill={fill}
+        points="575.38 375.42 583.46 387.51 598.63 387.51 582.96 364.55 598.49 341.57 583.6 341.57 575.52 353.67 575.66 353.67 567.58 341.57 552.55 341.57 568.07 364.55 552.41 387.51 567.29 387.51 575.38 375.42"
+      />
+      <path
+        fill={fill}
+        d="M789.35,371.55l5.72-16.41,5.73,16.41Zm13.4-30H787.69l-16.56,45.94H784l2-5.91h18.21l2,5.91H819.3Z"
+      />
+      <path
+        fill={fill}
+        d="M384.61,375.13c0,6.54-4.55,10-11.82,10H359.44V350.25h12.22c7.27,0,11.81,3.24,11.81,9.49,0,3.75-2,6.47-4.54,7.38A8.45,8.45,0,0,1,384.61,375.13Zm-13-10.22c4,0,6.19-1.54,6.19-4.83s-2.16-4.72-6.19-4.72h-6.42v9.55ZM365.18,380h7.5c4,0,6.13-2,6.13-5.12s-2.15-5.11-6.13-5.11h-7.5Z"
+      />
+      <path
+        fill={fill}
+        d="M415.76,350.25H422l-12.67,21v13.92h-5.85V371.21l-12.62-21h6.42l9.26,15.62Z"
+      />
+      <path
+        fill={fill}
+        d="M529.25,340.63a23.88,23.88,0,1,0,23.88,23.88,23.88,23.88,0,0,0-23.88-23.88m0,35.71C523,376.34,518,371,518,364.51s5-11.83,11.26-11.83a11.84,11.84,0,0,1,0,23.66"
+      />
+      <polygon
+        fill={fill}
+        points="457.04 341.57 481.21 388.16 505.38 341.57 491.29 341.57 481.35 361.01 471.41 341.57 457.04 341.57"
+      />
+      <rect fill={fill} x="754.13" y="341.58" width="12.81" height="45.94" />
+      <polygon
+        fill={fill}
+        points="699.3 353.08 699.3 341.57 664.08 341.57 664.08 387.51 699.3 387.51 699.3 376.01 677.48 376.01 677.48 370.08 697.69 370.08 697.69 359.01 677.48 359.01 677.48 353.08 699.3 353.08"
+      />
+      <path
+        fill={fill}
+        d="M725.05,341.57h-19.3v45.94h19.3a23,23,0,1,0,0-45.94m-1,34.3h-5.32V353.22H724a11.33,11.33,0,1,1,0,22.65"
+      />
+      <polygon
+        fill={fill}
+        points="643.67 361.9 643.67 387.51 656.62 387.51 656.62 341.57 640.58 341.57 630.64 360.73 620.7 341.57 604.65 341.57 604.65 387.51 617.32 387.51 617.32 361.9 630.5 387.3 643.67 361.9"
+      />
+      <polygon
+        fill={fill}
+        points="575.38 375.42 583.46 387.51 598.63 387.51 582.96 364.55 598.49 341.57 583.6 341.57 575.52 353.67 575.66 353.67 567.58 341.57 552.55 341.57 568.07 364.55 552.41 387.51 567.29 387.51 575.38 375.42"
+      />
+      <path
+        fill={fill}
+        d="M789.35,371.55l5.72-16.41,5.73,16.41Zm13.4-30H787.69l-16.56,45.94H784l2-5.91h18.21l2,5.91H819.3Z"
+      />
+    </svg>
+  </>
+);
+LogoHorizontal.defaultProps = {
+  fill: "#f77160",
+};
+
+export default withStyles(styles)(LogoHorizontal);

src/core/client/ui/components/v2/Brand/__snapshots__/BrandName.spec.tsx.snap

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<BrandName
+  align="center"
+  className="custom"
+  classes={
+    Object {
+      "alignCenter": "BrandName-alignCenter",
+      "alignJustify": "BrandName-alignJustify",
+      "alignLeft": "BrandName-alignLeft",
+      "alignRight": "BrandName-alignRight",
+      "lg": "BrandName-lg",
+      "md": "BrandName-md",
+      "root": "BrandName-root",
+    }
+  }
+  size="lg"
+/>
+`;

src/core/client/ui/components/v2/Brand/index.ts

@@ -0,0 +1,3 @@
+export { default as BrandName } from "./BrandName";
+export { default as BrandMark } from "./BrandMark";
+export { default as LogoHorizontal } from "./LogoHorizontal";

src/core/client/ui/components/v2/InputLabel/InputLabel.css

@@ -0,0 +1,9 @@
+.root {
+  display: block;
+
+  font-size: var(--v2-font-size-2);
+  font-weight: var(--v2-font-weight-primary-bold);
+  font-family: var(--v2-font-family-primary);
+  line-height: var(--v2-line-height-reset);
+  color: var(--v2-colors-mono-500);
+}

src/core/client/ui/components/v2/InputLabel/InputLabel.mdx

@@ -0,0 +1,19 @@
+---
+name: InputLabel
+menu: UI Kit
+---
+
+import { Playground, PropsTable } from 'docz'
+import InputLabel from './InputLabel.tsx'
+import HorizontalGutter from '../HorizontalGutter'
+
+# InputLabel
+
+## Basic Use
+<Playground>
+  <HorizontalGutter>
+    <InputLabel>Well... Hello there.</InputLabel>
+  </HorizontalGutter>
+</Playground>
+
+

src/core/client/ui/components/v2/InputLabel/InputLabel.spec.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+
+import { PropTypesOf } from "coral-ui/types";
+
+import InputLabel from "./InputLabel";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof InputLabel> = {
+    className: "custom",
+  };
+  const renderer = TestRenderer.create(
+    <InputLabel {...props}>Hello</InputLabel>
+  );
+  expect(renderer.toJSON()).toMatchSnapshot();
+});

src/core/client/ui/components/v2/InputLabel/InputLabel.tsx

@@ -0,0 +1,38 @@
+import cn from "classnames";
+import React, { FunctionComponent, ReactNode } from "react";
+
+import { withStyles } from "coral-ui/hocs";
+
+import styles from "./InputLabel.css";
+
+export interface InputLabelProps {
+  id?: string;
+  htmlFor?: string;
+  /**
+   * The content of the component.
+   */
+  children?: ReactNode;
+  /**
+   * Convenient prop to override the root styling.
+   */
+  className?: string;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: typeof styles;
+}
+
+const InputLabelProps: FunctionComponent<InputLabelProps> = props => {
+  const { className, children, classes, ...rest } = props;
+
+  const rootClassName = cn(classes.root, className);
+
+  return (
+    <div className={rootClassName} {...rest}>
+      {children}
+    </div>
+  );
+};
+
+const enhanced = withStyles(styles)(InputLabelProps);
+export default enhanced;

src/core/client/ui/components/v2/InputLabel/__snapshots__/InputLabel.spec.tsx.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<div
+  className="InputLabel-root custom"
+>
+  Hello
+</div>
+`;

src/core/client/ui/components/v2/InputLabel/index.ts

@@ -0,0 +1 @@
+export { default } from "./InputLabel";

src/core/client/ui/components/v2/PasswordField/PasswordField.tsx

@@ -141,6 +141,7 @@ class PasswordField extends Component<PasswordFieldProps, State> {
             placeholder={placeholder}
             value={value}
             type={reveal ? "text" : "password"}
+            data-testid="password-field"
           />
           <div
             role="button"

src/core/client/ui/components/v2/PasswordField/__snapshots__/PasswordField.spec.tsx.snap

@@ -12,6 +12,7 @@ exports[`renders correctly 1`] = `
       autoComplete="off"
       autoCorrect="off"
       className="PasswordField-colorRegular PasswordField-input"
+      data-testid="password-field"
       defaultValue="Hello World"
       placeholder=""
       spellCheck={false}
@@ -48,6 +49,7 @@ exports[`renders correctly 2`] = `
       autoComplete="off"
       autoCorrect="off"
       className="PasswordField-colorRegular PasswordField-input"
+      data-testid="password-field"
       defaultValue="Hello World"
       placeholder=""
       spellCheck={false}

src/core/client/ui/components/v2/TextField/TextField.css

@@ -6,7 +6,7 @@ $input-regular-focused-border: var(--v2-colors-teal-500);
 $input-disabled-background: var(--v2-colors-white-500);
 $input-disabled-value: var(--v2-colors-grey-400);
 $input-disabled-border: var(--v2-colors-grey-400);
-$input-error-border: var(--v2-colors-red-500);
+$input-error-border: var(--v2-palette-error-darkest);
 $input-dark-focused-border: var(--v2-colors-blue-500);
 
 .root {

src/core/client/ui/components/v2/index.ts

@@ -63,3 +63,5 @@ export {
   default as ValidationMessage,
   ValidationMessageProps,
 } from "./ValidationMessage";
+export { BrandName, BrandMark, LogoHorizontal } from "./Brand";
+export { default as InputLabel } from "./InputLabel";