fix: align font sizes to design & use updated variable names (#318)

ory · Dec 30, 2024 · d5a5895 · d5a5895
1 parent 0ce7e0f
commit d5a5895
Show file tree

Hide file tree

Showing 46 changed files with 732 additions and 458 deletions.
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -194,9 +194,26 @@ const config = tseslint.config([
     files: ["packages/elements-react/**/*.{js,jsx,ts,tsx}"],
     ...tailwind.configs["flat/recommended"][0],
     ...tailwind.configs["flat/recommended"][1],
+    rules: {
+      ...tailwind.configs["flat/recommended"][1].rules,
+      "tailwindcss/classnames-order": "off",
+      "tailwindcss/no-custom-classname": [
+        "warn",
+        {
+          cssFiles: [
+            "packages/elements-react/**/*.css",
+            "!**/node_modules",
+            "!**/.*",
+            "!**/dist",
+            "!**/build",
+          ],
+        },
+      ],
+    },
     settings: {
       tailwindcss: {
         config: "packages/elements-react/tailwind.config.ts",
+        callees: ["classnames", "clsx", "ctl", "cn"],
       },
     },
   },

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/elements-react/api-report/elements-react.api.json b/packages/elements-react/api-report/elements-react.api.json
@@ -1535,8 +1535,8 @@
             },
             {
               "kind": "Reference",
-              "text": "OryFormSectionContentProps",
-              "canonicalReference": "@ory/elements-react!OryFormSectionContentProps:type"
+              "text": "OryFormSectionFooterProps",
+              "canonicalReference": "@ory/elements-react!OryFormSectionFooterProps:type"
             },
             {
               "kind": "Content",
@@ -2308,6 +2308,10 @@
               "text": "PropsWithChildren",
               "canonicalReference": "@types/react!React.PropsWithChildren:type"
             },
+            {
+              "kind": "Content",
+              "text": "<{\n    text?: string;\n}>"
+            },
             {
               "kind": "Content",
               "text": ";"
@@ -2318,7 +2322,7 @@
           "name": "OryFormSectionFooterProps",
           "typeTokenRange": {
             "startIndex": 1,
-            "endIndex": 2
+            "endIndex": 3
           }
         },
         {

diff --git a/packages/elements-react/api-report/elements-react.api.md b/packages/elements-react/api-report/elements-react.api.md
@@ -191,7 +191,7 @@ export type OryFlowComponents = {
         AuthMethodListItem: ComponentType<OryCardAuthMethodListItemProps>;
         SettingsSection: ComponentType<OryFormSectionProps>;
         SettingsSectionContent: ComponentType<OryFormSectionContentProps>;
-        SettingsSectionFooter: ComponentType<OryFormSectionContentProps>;
+        SettingsSectionFooter: ComponentType<OryFormSectionFooterProps>;
     };
     Form: {
         Root: ComponentType<OryFormRootProps>;
@@ -265,7 +265,9 @@ export type OryFormSectionContentProps = PropsWithChildren<{
 }>;
 
 // @public (undocumented)
-export type OryFormSectionFooterProps = PropsWithChildren;
+export type OryFormSectionFooterProps = PropsWithChildren<{
+    text?: string;
+}>;
 
 // @public (undocumented)
 export type OryFormSectionProps = PropsWithChildren<{

diff --git a/packages/elements-react/package.json b/packages/elements-react/package.json
@@ -57,6 +57,7 @@
     "esbuild-plugin-svgr": "3.0.0",
     "eslint-plugin-react": "7.37.1",
     "postcss": "8.4.47",
+    "tailwindcss-animate": "1.0.7",
     "tsup": "8.3.0"
   },
   "keywords": [

diff --git a/packages/elements-react/src/components/form/form.tsx b/packages/elements-react/src/components/form/form.tsx
@@ -24,6 +24,7 @@ import {
   OryCardLogoProps,
   OryFormRootProps,
   OryFormSectionContentProps,
+  OryFormSectionFooterProps,
   OryNodeAnchorProps,
   OryNodeButtonProps,
   OryNodeImageProps,
@@ -148,7 +149,7 @@ export type OryFlowComponents = {
     /**
      * The SettingsSectionFooter component is rendered around the footer of each section of the settings.
      */
-    SettingsSectionFooter: ComponentType<OryFormSectionContentProps>
+    SettingsSectionFooter: ComponentType<OryFormSectionFooterProps>
   }
   Form: {
     /**

diff --git a/packages/elements-react/src/components/settings/oidc-settings.tsx b/packages/elements-react/src/components/settings/oidc-settings.tsx
@@ -37,9 +37,9 @@ export function OrySettingsOidc({ nodes }: HeadlessSettingsOidcProps) {
           unlinkButtons={unlinkButtons}
         />
       </Card.SettingsSectionContent>
-      <Card.SettingsSectionFooter>
-        <span>{intl.formatMessage({ id: "settings.oidc.info" })}</span>
-      </Card.SettingsSectionFooter>
+      <Card.SettingsSectionFooter
+        text={intl.formatMessage({ id: "settings.oidc.info" })}
+      ></Card.SettingsSectionFooter>
     </>
   )
 }
diff --git a/packages/elements-react/src/components/settings/passkey-settings.tsx b/packages/elements-react/src/components/settings/passkey-settings.tsx
@@ -83,9 +83,9 @@ export function OrySettingsPasskey({ nodes }: HeadlessSettingsPasskeyProps) {
           removeButtons={removeNodes}
         />
       </Card.SettingsSectionContent>
-      <Card.SettingsSectionFooter>
-        <span>{intl.formatMessage({ id: "settings.passkey.info" })}</span>
-      </Card.SettingsSectionFooter>
+      <Card.SettingsSectionFooter
+        text={intl.formatMessage({ id: "settings.passkey.info" })}
+      ></Card.SettingsSectionFooter>
     </>
   )
 }
diff --git a/packages/elements-react/src/components/settings/totp-settings.tsx b/packages/elements-react/src/components/settings/totp-settings.tsx
@@ -64,12 +64,13 @@ export function OrySettingsTotp({ nodes }: HeadlessSettingsTotpProps) {
       >
         {content}
       </Card.SettingsSectionContent>
-      <Card.SettingsSectionFooter>
-        <span>
-          {totpUnlink
+      <Card.SettingsSectionFooter
+        text={
+          totpUnlink
             ? intl.formatMessage({ id: "settings.totp.info.linked" })
-            : intl.formatMessage({ id: "settings.totp.info.not-linked" })}
-        </span>
+            : intl.formatMessage({ id: "settings.totp.info.not-linked" })
+        }
+      >
         {totpLinkButton && (
           <Node.Button
             node={totpLinkButton}

diff --git a/packages/elements-react/src/components/settings/webauthn-settings.tsx b/packages/elements-react/src/components/settings/webauthn-settings.tsx
@@ -88,9 +88,9 @@ export function OrySettingsWebauthn({ nodes }: HeadlessSettingsWebauthnProps) {
         />
         {registerNode && <Node node={registerNode} />}
       </Card.SettingsSectionContent>
-      <Card.SettingsSectionFooter>
-        <span>{intl.formatMessage({ id: "settings.webauthn.info" })}</span>
-      </Card.SettingsSectionFooter>
+      <Card.SettingsSectionFooter
+        text={intl.formatMessage({ id: "settings.webauthn.info" })}
+      ></Card.SettingsSectionFooter>
     </>
   )
 }
diff --git a/packages/elements-react/src/theme/default/assets/ory-badge-horizontal.svg b/packages/elements-react/src/theme/default/assets/ory-badge-horizontal.svg
diff --git a/packages/elements-react/src/theme/default/assets/ory-badge-vertical.svg b/packages/elements-react/src/theme/default/assets/ory-badge-vertical.svg
diff --git a/packages/elements-react/src/theme/default/components/card/auth-methods.tsx b/packages/elements-react/src/theme/default/components/card/auth-methods.tsx
@@ -25,26 +25,31 @@ export function DefaultAuthMethodListItem({
   const Icon = iconsMap[group] || null
 
   return (
-    <div className="w-full rounded px-2 py-1 hover:bg-forms-bg-hover">
+    <div className="w-full rounded px-2 py-1 hover:bg-interface-background-default-primary-hover">
       <button
-        className="flex cursor-pointer gap-3 py-2 text-left"
+        className="flex cursor-pointer gap-3 py-2 text-left items-start"
         onClick={onClick}
         type={isGroupImmediateSubmit(group) ? "submit" : "button"}
         id={`auth-method-list-item-${group}`}
         data-testid="auth-method-list-item"
         aria-label={`Authenticate with ${group}`}
       >
-        <div className={"mt-[2px] size-4 flex-none"}>
-          {Icon && <Icon size={20} className="text-forms-fg-default" />}
-        </div>
-        <div className={"flex-1 text-sm leading-normal"}>
-          <div className="text-sm text-forms-fg-default">
+        <span className="mt-1">
+          {Icon && (
+            <Icon
+              size={16}
+              className="text-interface-foreground-brand-primary"
+            />
+          )}
+        </span>
+        <span className="flex-1 leading-normal inline-flex flex-col">
+          <span className="text-interface-foreground-default-primary">
             {intl.formatMessage({ id: `two-step.${group}.title` })}
-          </div>
-          <div className="text-sm text-forms-fg-mute">
+          </span>
+          <span className="text-interface-foreground-default-secondary">
             {intl.formatMessage({ id: `two-step.${group}.description` })}
-          </div>
-        </div>
+          </span>
+        </span>
       </button>
     </div>
   )

diff --git a/packages/elements-react/src/theme/default/components/card/badge.tsx b/packages/elements-react/src/theme/default/components/card/badge.tsx
@@ -6,9 +6,9 @@ import OryLogoVertical from "../../assets/ory-badge-vertical.svg"
 
 export function Badge() {
   return (
-    <div className="absolute bg-branding-bg-default p-2 font-bold max-md:bottom-0 max-md:left-8 max-md:translate-y-full max-md:rounded-b-md  md:right-0 md:top-8 md:translate-x-full md:rounded-r-md">
-      <OryLogoHorizontal width={22} height={8} className="md:hidden" />
-      <OryLogoVertical width={8} height={22} className="max-md:hidden" />
+    <div className="absolute bg-ory-background-default p-2 font-bold max-sm:bottom-0 max-sm:left-8 max-sm:translate-y-full max-sm:rounded-b-md sm:right-0 sm:top-8 sm:translate-x-full sm:rounded-r-lg border-ory-border-default border max-sm:py-[7px] sm:pl-[7px]">
+      <OryLogoHorizontal width={22} height={8} className="sm:hidden" />
+      <OryLogoVertical width={8} height={22} className="max-sm:hidden" />
     </div>
   )
 }
diff --git a/packages/elements-react/src/theme/default/components/card/current-identifier-button.tsx b/packages/elements-react/src/theme/default/components/card/current-identifier-button.tsx
@@ -34,17 +34,23 @@ export function DefaultCurrentIdentifierButton() {
 
   return (
     <a
-      className="inline-flex max-w-full cursor-pointer items-center gap-1 self-start rounded-full border border-button-identifier-border-default bg-button-identifier-bg-default px-3 py-[5px] transition-colors hover:border-button-identifier-border-hover hover:bg-button-identifier-bg-hover"
+      className={
+        "group inline-flex max-w-full cursor-pointer items-center gap-1 self-start rounded-full border px-[11px] py-[5px] transition-colors " +
+        "border-button-identifier-border-border-default bg-button-identifier-background-default hover:border-button-identifier-border-border-hover hover:bg-button-identifier-background-hover"
+      }
       {...attributes}
       href={initFlowUrl}
       title={`Adjust ${nodeBackButton?.attributes.value}`}
     >
-      <IconArrowLeft
-        size={16}
-        className="shrink-0 text-button-identifier-fg-subtle"
-      />
-      <span className="overflow-hidden text-ellipsis text-nowrap text-sm font-medium text-button-identifier-fg-default">
-        {nodeBackButton?.attributes.value}
+      <span className="inline-flex min-h-5 items-center gap-2 overflow-hidden text-ellipsis">
+        <IconArrowLeft
+          size={16}
+          stroke="1"
+          className="shrink-0 text-button-identifier-foreground-default group-hover:text-button-identifier-foreground-hover"
+        />
+        <span className="overflow-hidden text-ellipsis text-nowrap text-sm font-medium text-button-identifier-foreground-default group-hover:text-button-identifier-foreground-hover">
+          {nodeBackButton?.attributes.value}
+        </span>
       </span>
     </a>
   )

diff --git a/packages/elements-react/src/theme/default/components/card/footer.tsx b/packages/elements-react/src/theme/default/components/card/footer.tsx
@@ -49,13 +49,13 @@ function LoginCardFooter() {
   }
 
   return (
-    <span className="text-sm font-normal leading-normal antialiased">
+    <span className="font-normal leading-normal antialiased text-interface-foreground-default-primary">
       {intl.formatMessage({
         id: "login.registration-label",
         defaultMessage: "No account?",
       })}{" "}
       <a
-        className="text-links-link-default transition-colors hover:text-links-link-hover hover:underline"
+        className="text-button-link-brand-brand transition-colors hover:text-button-link-brand-brand-hover underline"
         href={registrationLink}
       >
         {intl.formatMessage({
@@ -102,12 +102,12 @@ function RegistrationCardFooter() {
   }
 
   return (
-    <span className="text-sm font-normal leading-normal antialiased">
+    <span className="font-normal leading-normal antialiased">
       {formState.current === "method_active" ? (
         <>
           {screenSelectionNode && (
             <button
-              className="font-medium text-links-link-default"
+              className="font-medium text-button-link-brand-brand hover:text-button-link-brand-brand-hover"
               type="submit"
               onClick={handleScreenSelection}
             >
@@ -125,7 +125,7 @@ function RegistrationCardFooter() {
             defaultMessage: "Already have an account?",
           })}{" "}
           <a
-            className="text-links-link-default transition-colors hover:text-links-link-hover hover:underline"
+            className="text-button-link-brand-brand transition-colors hover:text-button-link-brand-brand-hover underline"
             href={loginLink}
           >
             {intl.formatMessage({

diff --git a/packages/elements-react/src/theme/default/components/card/header.tsx b/packages/elements-react/src/theme/default/components/card/header.tsx
@@ -11,10 +11,12 @@ function InnerCardHeader({ title, text }: { title: string; text?: string }) {
     <header className="flex flex-col gap-8 antialiased">
       <Card.Logo />
       <div className="flex flex-col gap-2">
-        <h2 className="text-lg font-semibold leading-normal text-dialog-fg-default">
+        <h2 className="text-lg font-semibold leading-normal text-interface-foreground-default-primary">
           {title}
         </h2>
-        <p className="text-sm leading-normal text-dialog-fg-subtle">{text}</p>
+        <p className="leading-normal text-interface-foreground-default-secondary">
+          {text}
+        </p>
         <DefaultCurrentIdentifierButton />
       </div>
     </header>

diff --git a/packages/elements-react/src/theme/default/components/card/index.tsx b/packages/elements-react/src/theme/default/components/card/index.tsx
@@ -12,8 +12,8 @@ import { DefaultCardLayout } from "./layout"
 
 export function DefaultCard({ children }: OryCardProps) {
   return (
-    <div className="flex flex-1 flex-col items-center justify-center font-sans">
-      <div className="relative grid max-w-sm grid-cols-1 gap-8 rounded-border-radius-cards border border-dialog-border-default bg-dialog-bg-default px-8 py-12 md:w-[480px] md:max-w-[480px] md:px-12 md:py-14">
+    <div className="flex flex-1 sm:items-center justify-center font-sans items-start w-full sm:w-[480px] sm:max-w-[480px]">
+      <div className="relative grid grid-cols-1 gap-8 sm:rounded-cards sm:border border-form-border-default bg-form-background-default px-8 py-12 sm:px-12 sm:py-14 border-b w-full">
         {children}
         <Badge />
       </div>

diff --git a/packages/elements-react/src/theme/default/components/card/layout.tsx b/packages/elements-react/src/theme/default/components/card/layout.tsx
@@ -5,7 +5,7 @@ import { PropsWithChildren } from "react"
 
 export function DefaultCardLayout({ children }: PropsWithChildren) {
   return (
-    <main className="pt-4 p-4 pb-8 flex items-center justify-center flex-col gap-8 min-h-screen">
+    <main className="p-4 pb-8 flex items-center justify-center flex-col gap-8 min-h-screen">
       {children}
     </main>
   )

diff --git a/packages/elements-react/src/theme/default/components/card/logo.tsx b/packages/elements-react/src/theme/default/components/card/logo.tsx
@@ -11,7 +11,7 @@ export function DefaultCardLogo() {
   }
 
   return (
-    <h1 className="text-xl font-semibold leading-normal text-dialog-fg-default">
+    <h1 className="text-xl font-semibold leading-normal text-interface-foreground-default-primary">
       {flow.config.name}
     </h1>
   )