fix: align font sizes to design & use updated variable names

eslint.config.mjs

@@ -194,9 +194,15 @@ 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"],
       },
     },
   },

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": [

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: {
     /**

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

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

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}

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

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

packages/elements-react/src/theme/default/components/card/badge.tsx

@@ -6,7 +6,7 @@ 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">
+    <div className="absolute bg-ory-background-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-lg border-button-social-border-default border max-md:py-[7px] md:pl-[7px]">
       <OryLogoHorizontal width={22} height={8} className="md:hidden" />
       <OryLogoVertical width={8} height={22} className="max-md:hidden" />
     </div>

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={
+        "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 ">
+        <IconArrowLeft
+          size={16}
+          stroke="1"
+          className="shrink-0 text-button-identifier-foreground-default "
+        />
+        <span className="overflow-hidden text-ellipsis text-nowrap text-sm font-medium text-button-identifier-foreground-default">
+          {nodeBackButton?.attributes.value}
+        </span>
       </span>
     </a>
   )

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 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 hover:underline"
             href={loginLink}
           >
             {intl.formatMessage({

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>

packages/elements-react/src/theme/default/components/card/index.tsx

@@ -13,7 +13,7 @@ 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="relative grid max-w-sm grid-cols-1 gap-8 rounded-cards border border-form-border-default bg-form-background-default px-8 py-12 md:w-[480px] md:max-w-[480px] md:px-12 md:py-14">
         {children}
         <Badge />
       </div>

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

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