feat!: update font, font-weight and remove Rubik (#840)

* feat!: update font, font-weight and remove Rubik * test: add more EV stories
supertokens · Jul 31, 2024 · cadb778 · cadb778
1 parent 99159a8
commit cadb778
Show file tree

Hide file tree

Showing 61 changed files with 157 additions and 402 deletions.
diff --git a/.circleci/publish.sh b/.circleci/publish.sh
@@ -13,8 +13,11 @@ then
     cd ..
     npm publish --tag latest
     npm i || exit $?
-    npx -y chromatic --auto-accept-changes master
+    npx -y chromatic --auto-accept-changes --branch=master
+    npx -y chromatic --auto-accept-changes --branch=$version
 else
     cd ..
     npm publish --tag version-$version
+    npm i || exit $?
+    npx -y chromatic --auto-accept-changes --branch=$version
 fi
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [unreleased]
 
+## [0.45.0] - 2024-07-31
+
+### Breaking changes
+
+-   Updated the font and font-weights in the default styles
+-   We no longer load the Rubik font by default
+
 ## [0.44.0] - 2024-07-15
 
 -   Removes the default `maxAgeInSeconds` value (previously 300 seconds) in EmailVerification Claim. If the claim value is true and `maxAgeInSeconds` is not provided, it will not be refreshed.

diff --git a/examples/for-tests-react-16/src/App.css b/examples/for-tests-react-16/src/App.css
@@ -4,7 +4,6 @@
     justify-content: stretch;
     width: 100vw;
     height: 100vh;
-    font-family: Rubik;
 }
 
 .fill {

diff --git a/examples/for-tests/src/App.css b/examples/for-tests/src/App.css
@@ -4,7 +4,6 @@
     justify-content: stretch;
     width: 100vw;
     height: 100vh;
-    font-family: Rubik;
 }
 
 .fill {

diff --git a/lib/build/emailpasswordprebuiltui.js b/lib/build/emailpasswordprebuiltui.js
diff --git a/lib/build/emailverification-shared2.js b/lib/build/emailverification-shared2.js
diff --git a/lib/build/emailverificationprebuiltui.js b/lib/build/emailverificationprebuiltui.js
diff --git a/lib/build/genericComponentOverrideContext.js b/lib/build/genericComponentOverrideContext.js
diff --git a/lib/build/index2.js b/lib/build/index2.js
diff --git a/lib/build/multifactorauthprebuiltui.js b/lib/build/multifactorauthprebuiltui.js
diff --git a/lib/build/passwordlessprebuiltui.js b/lib/build/passwordlessprebuiltui.js
diff --git a/lib/build/recipe/authRecipe/components/theme/themeBase.d.ts b/lib/build/recipe/authRecipe/components/theme/themeBase.d.ts
diff --git a/lib/build/recipe/emailpassword/components/themes/themeBase.d.ts b/lib/build/recipe/emailpassword/components/themes/themeBase.d.ts
diff --git a/lib/build/recipe/multifactorauth/components/themes/themeBase.d.ts b/lib/build/recipe/multifactorauth/components/themes/themeBase.d.ts
diff --git a/lib/build/recipe/multitenancy/components/themes/themeBase.d.ts b/lib/build/recipe/multitenancy/components/themes/themeBase.d.ts
diff --git a/lib/build/recipe/passwordless/components/themes/themeBase.d.ts b/lib/build/recipe/passwordless/components/themes/themeBase.d.ts
diff --git a/lib/build/recipe/session/components/themes/themeBase.d.ts b/lib/build/recipe/session/components/themes/themeBase.d.ts
diff --git a/lib/build/recipe/thirdparty/components/themes/themeBase.d.ts b/lib/build/recipe/thirdparty/components/themes/themeBase.d.ts
diff --git a/lib/build/recipe/totp/components/themes/themeBase.d.ts b/lib/build/recipe/totp/components/themes/themeBase.d.ts
diff --git a/lib/build/sessionprebuiltui.js b/lib/build/sessionprebuiltui.js
diff --git a/lib/build/styles/styles.d.ts b/lib/build/styles/styles.d.ts
diff --git a/lib/build/thirdpartyprebuiltui.js b/lib/build/thirdpartyprebuiltui.js
diff --git a/lib/build/totpprebuiltui.js b/lib/build/totpprebuiltui.js
diff --git a/lib/build/version.d.ts b/lib/build/version.d.ts
diff --git a/lib/ts/components/assets/errorLargeIcon.tsx b/lib/ts/components/assets/errorLargeIcon.tsx
@@ -38,7 +38,7 @@ export default function ErrorLargeIcon(): JSX.Element {
                 </g>
                 <text
                     fill="#fff"
-                    font-family="Rubik-Bold, Rubik"
+                    font-family="Arial-Bold, Arial"
                     font-size="18px"
                     fontWeight="700"
                     transform="translate(-824.894 -352.483) translate(838.997 377.437)">

diff --git a/lib/ts/recipe/authRecipe/components/theme/authPage/index.tsx b/lib/ts/recipe/authRecipe/components/theme/authPage/index.tsx
@@ -18,7 +18,6 @@
  */
 
 import { SuperTokensBranding } from "../../../../../components/SuperTokensBranding";
-import { hasFontDefined } from "../../../../../styles/styles";
 import SuperTokens from "../../../../../superTokens";
 import UserContextWrapper from "../../../../../usercontext/userContextWrapper";
 import GeneralError from "../../../../emailpassword/components/library/generalError";
@@ -69,11 +68,10 @@ export function AuthPageTheme(props: AuthPageThemeProps): JSX.Element {
 
 function AuthPageThemeWrapper(props: AuthPageThemeProps): JSX.Element {
     const rootStyle = SuperTokens.getInstanceOrThrow().rootStyle;
-    const hasFont = hasFontDefined(rootStyle);
 
     return (
         <UserContextWrapper userContext={props.userContext}>
-            <ThemeBase loadDefaultFont={!hasFont} userStyles={[rootStyle]}>
+            <ThemeBase userStyles={[rootStyle]}>
                 <AuthPageTheme {...props} />
             </ThemeBase>
         </UserContextWrapper>

diff --git a/lib/ts/recipe/authRecipe/components/theme/themeBase.tsx b/lib/ts/recipe/authRecipe/components/theme/themeBase.tsx
@@ -20,18 +20,13 @@ import styles from "../../../../styles/styles.css";
 
 import type { PropsWithChildren } from "react";
 
-export const ThemeBase: React.FC<
-    PropsWithChildren<{ loadDefaultFont: boolean; userStyles: Array<string | undefined> }>
-> = ({ children, userStyles, loadDefaultFont }) => {
+export const ThemeBase: React.FC<PropsWithChildren<{ userStyles: Array<string | undefined> }>> = ({
+    children,
+    userStyles,
+}) => {
     return (
         <Fragment>
             {children}
-            {loadDefaultFont && (
-                <link
-                    href="//fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700"
-                    rel="stylesheet"
-                    type="text/css"></link>
-            )}
             <style>
                 {styles}
                 {userStyles.join("\n")}

diff --git a/lib/ts/recipe/emailpassword/components/themes/resetPasswordUsingToken/index.tsx b/lib/ts/recipe/emailpassword/components/themes/resetPasswordUsingToken/index.tsx
@@ -16,7 +16,6 @@
 /*
  * Imports.
  */
-import { hasFontDefined } from "../../../../../styles/styles";
 import SuperTokens from "../../../../../superTokens";
 import UserContextWrapper from "../../../../../usercontext/userContextWrapper";
 import { ThemeBase } from "../themeBase";
@@ -46,13 +45,12 @@ export function ResetPasswordUsingTokenTheme(props: ResetPasswordUsingTokenTheme
 
 function ResetPasswordUsingTokenThemeWrapper(props: ResetPasswordUsingTokenThemeProps): JSX.Element {
     const rootStyle = SuperTokens.getInstanceOrThrow().rootStyle;
-    const hasFont = hasFontDefined(rootStyle) || hasFontDefined(props.config.recipeRootStyle);
     const userStyles = props.submitNewPasswordForm
         ? props.config.resetPasswordUsingTokenFeature.submitNewPasswordForm.style
         : props.config.resetPasswordUsingTokenFeature.enterEmailForm.style;
     return (
         <UserContextWrapper userContext={props.userContext}>
-            <ThemeBase loadDefaultFont={!hasFont} userStyles={[rootStyle, props.config.recipeRootStyle, userStyles]}>
+            <ThemeBase userStyles={[rootStyle, props.config.recipeRootStyle, userStyles]}>
                 <ResetPasswordUsingTokenTheme {...props} />
             </ThemeBase>
         </UserContextWrapper>

diff --git a/lib/ts/recipe/emailpassword/components/themes/signIn/index.tsx b/lib/ts/recipe/emailpassword/components/themes/signIn/index.tsx
@@ -15,7 +15,6 @@
 import STGeneralError from "supertokens-web-js/utils/error";
 
 import { withOverride } from "../../../../../components/componentOverride/withOverride";
-import { hasFontDefined } from "../../../../../styles/styles";
 import SuperTokens from "../../../../../superTokens";
 import { useUserContext } from "../../../../../usercontext";
 import UserContextWrapper from "../../../../../usercontext/userContextWrapper";
@@ -78,13 +77,12 @@ export const SignInForm = withOverride(
 
 function SignInTheme(props: SignInThemeProps): JSX.Element {
     const rootStyle = SuperTokens.getInstanceOrThrow().rootStyle;
-    const hasFont = hasFontDefined(rootStyle) || hasFontDefined(props.config.recipeRootStyle);
 
     const activeStyle = props.config.signInAndUpFeature.signInForm.style;
 
     return (
         <UserContextWrapper userContext={props.userContext}>
-            <ThemeBase loadDefaultFont={!hasFont} userStyles={[rootStyle, props.config.recipeRootStyle, activeStyle]}>
+            <ThemeBase userStyles={[rootStyle, props.config.recipeRootStyle, activeStyle]}>
                 <SignInForm {...props} />
             </ThemeBase>
         </UserContextWrapper>

diff --git a/lib/ts/recipe/emailpassword/components/themes/signUp/index.tsx b/lib/ts/recipe/emailpassword/components/themes/signUp/index.tsx
@@ -15,7 +15,6 @@
 import STGeneralError from "supertokens-web-js/lib/build/error";
 
 import { withOverride } from "../../../../../components/componentOverride/withOverride";
-import { hasFontDefined } from "../../../../../styles/styles";
 import SuperTokens from "../../../../../superTokens";
 import { useUserContext } from "../../../../../usercontext";
 import UserContextWrapper from "../../../../../usercontext/userContextWrapper";
@@ -76,13 +75,12 @@ export const SignUpForm = withOverride(
 
 function SignUpTheme(props: SignUpThemeProps): JSX.Element {
     const rootStyle = SuperTokens.getInstanceOrThrow().rootStyle;
-    const hasFont = hasFontDefined(rootStyle) || hasFontDefined(props.config.recipeRootStyle);
 
     const activeStyle = props.config.signInAndUpFeature.signUpForm.style;
 
     return (
         <UserContextWrapper userContext={props.userContext}>
-            <ThemeBase loadDefaultFont={!hasFont} userStyles={[rootStyle, props.config.recipeRootStyle, activeStyle]}>
+            <ThemeBase userStyles={[rootStyle, props.config.recipeRootStyle, activeStyle]}>
                 <SignUpForm {...props} />
             </ThemeBase>
         </UserContextWrapper>

diff --git a/lib/ts/recipe/emailpassword/components/themes/styles.css b/lib/ts/recipe/emailpassword/components/themes/styles.css
@@ -123,7 +123,7 @@
 
 [data-supertokens~="label"] {
     text-align: left;
-    font-weight: 500;
+    font-weight: 400;
     font-size: var(--font-size-1);
     line-height: 24px;
     color: rgb(var(--palette-textLabel));
@@ -148,19 +148,11 @@
     margin-top: 11px;
 }
 
-[data-supertokens~="headerTinyTitle"] {
-    margin-top: 13px;
-    font-size: var(--font-size-3);
-    letter-spacing: 1.1px;
-    font-weight: 500;
-    line-height: 28px;
-}
-
 [data-supertokens~="sendVerifyEmailText"] {
     line-height: 21px;
     font-size: var(--font-size-1);
     text-align: center;
-    font-weight: 300;
+    font-weight: 400;
     letter-spacing: 0.8px;
 }
 
@@ -177,7 +169,7 @@
 
 [data-supertokens~="sendVerifyEmailResend"] {
     margin-top: 13px;
-    font-weight: 300;
+    font-weight: 400;
 }
 
 [data-supertokens~="sendVerifyEmailResend"]:hover {

diff --git a/lib/ts/recipe/emailpassword/components/themes/themeBase.tsx b/lib/ts/recipe/emailpassword/components/themes/themeBase.tsx
@@ -20,18 +20,13 @@ import styles from "./styles.css";
 
 import type { PropsWithChildren } from "react";
 
-export const ThemeBase: React.FC<
-    PropsWithChildren<{ loadDefaultFont: boolean; userStyles: Array<string | undefined> }>
-> = ({ children, userStyles, loadDefaultFont }) => {
+export const ThemeBase: React.FC<PropsWithChildren<{ userStyles: Array<string | undefined> }>> = ({
+    children,
+    userStyles,
+}) => {
     return (
         <Fragment>
             {children}
-            {loadDefaultFont && (
-                <link
-                    href="//fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700"
-                    rel="stylesheet"
-                    type="text/css"></link>
-            )}
             <style>
                 {styles}
                 {userStyles.join("\n")}