From a8748d23c9be3ad476300dd2f1d2cbdcd53b8a5a Mon Sep 17 00:00:00 2001 From: Jonas Hungershausen Date: Tue, 17 Dec 2024 17:09:16 +0100 Subject: [PATCH] fix: align font sizes to design & use updated variable names --- eslint.config.mjs | 6 + package-lock.json | 11 + packages/elements-react/package.json | 1 + .../src/components/form/form.tsx | 3 +- .../src/components/settings/oidc-settings.tsx | 6 +- .../components/settings/passkey-settings.tsx | 6 +- .../src/components/settings/totp-settings.tsx | 11 +- .../components/settings/webauthn-settings.tsx | 6 +- .../default/assets/ory-badge-horizontal.svg | 6 +- .../default/assets/ory-badge-vertical.svg | 6 +- .../default/components/card/auth-methods.tsx | 27 +- .../theme/default/components/card/badge.tsx | 2 +- .../card/current-identifier-button.tsx | 20 +- .../theme/default/components/card/footer.tsx | 10 +- .../theme/default/components/card/header.tsx | 6 +- .../theme/default/components/card/index.tsx | 2 +- .../theme/default/components/card/layout.tsx | 2 +- .../theme/default/components/card/logo.tsx | 2 +- .../theme/default/components/form/button.tsx | 42 +- .../default/components/form/checkbox.tsx | 47 +- .../components/form/group-container.tsx | 2 +- .../components/form/horizontal-divider.tsx | 2 +- .../theme/default/components/form/index.tsx | 14 +- .../theme/default/components/form/input.tsx | 9 +- .../theme/default/components/form/label.tsx | 6 +- .../default/components/form/link-button.tsx | 2 +- .../components/form/pin-code-input.tsx | 8 +- .../theme/default/components/form/section.tsx | 26 +- .../components/form/shadcn/otp-input.tsx | 9 +- .../theme/default/components/form/social.tsx | 7 +- .../theme/default/components/form/spinner.tsx | 16 +- .../components/settings/settings-oidc.tsx | 7 +- .../components/settings/settings-passkey.tsx | 40 +- .../settings/settings-recovery-codes.tsx | 33 +- .../components/settings/settings-top.tsx | 30 +- .../components/settings/settings-webauthn.tsx | 40 +- .../default/components/ui/checkbox-label.tsx | 2 +- .../default/components/ui/dropdown-menu.tsx | 10 +- .../default/components/ui/user-avater.tsx | 7 +- .../theme/default/components/ui/user-menu.tsx | 8 +- packages/elements-react/src/types.ts | 4 +- packages/elements-react/tailwind.config.ts | 23 +- .../elements-react/variables-processed.json | 572 ++++++++++++------ 43 files changed, 668 insertions(+), 431 deletions(-) diff --git a/eslint.config.mjs b/eslint.config.mjs index f68d8fcfc..eb0c9e020 100644 --- a/eslint.config.mjs +++ b/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"], }, }, }, diff --git a/package-lock.json b/package-lock.json index 4a7b78c6d..984368885 100644 --- a/package-lock.json +++ b/package-lock.json @@ -31216,6 +31216,16 @@ "node": ">=14.0.0" } }, + "node_modules/tailwindcss-animate": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz", + "integrity": "sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==", + "dev": true, + "license": "MIT", + "peerDependencies": { + "tailwindcss": ">=3.0.0 || insiders" + } + }, "node_modules/tapable": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz", @@ -34764,6 +34774,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" }, "peerDependencies": { diff --git a/packages/elements-react/package.json b/packages/elements-react/package.json index 1a23f48f4..9406ec258 100644 --- 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 index 5dc6f723c..4ea3517b6 100644 --- 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 + SettingsSectionFooter: ComponentType } Form: { /** diff --git a/packages/elements-react/src/components/settings/oidc-settings.tsx b/packages/elements-react/src/components/settings/oidc-settings.tsx index 95a1fc483..7e29c29b6 100644 --- 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} /> - - {intl.formatMessage({ id: "settings.oidc.info" })} - + ) } diff --git a/packages/elements-react/src/components/settings/passkey-settings.tsx b/packages/elements-react/src/components/settings/passkey-settings.tsx index 33edd39cf..759f97a3c 100644 --- 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} /> - - {intl.formatMessage({ id: "settings.passkey.info" })} - + ) } diff --git a/packages/elements-react/src/components/settings/totp-settings.tsx b/packages/elements-react/src/components/settings/totp-settings.tsx index f051cb0f2..c04a89a3b 100644 --- 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} - - - {totpUnlink + + : intl.formatMessage({ id: "settings.totp.info.not-linked" }) + } + > {totpLinkButton && ( {registerNode && } - - {intl.formatMessage({ id: "settings.webauthn.info" })} - + ) } 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 index 263f1df7f..7db6e2719 100644 --- a/packages/elements-react/src/theme/default/assets/ory-badge-horizontal.svg +++ b/packages/elements-react/src/theme/default/assets/ory-badge-horizontal.svg @@ -1,5 +1,5 @@ - - - + + + 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 index 6f99ce83e..5d77fead6 100644 --- a/packages/elements-react/src/theme/default/assets/ory-badge-vertical.svg +++ b/packages/elements-react/src/theme/default/assets/ory-badge-vertical.svg @@ -1,5 +1,5 @@ - - - + + + 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 index d15361485..d66939acd 100644 --- 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 ( -
+
) diff --git a/packages/elements-react/src/theme/default/components/card/badge.tsx b/packages/elements-react/src/theme/default/components/card/badge.tsx index b636b3c91..2d44462b1 100644 --- a/packages/elements-react/src/theme/default/components/card/badge.tsx +++ b/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 ( -
+
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 index f44ffc164..38a6c7a6b 100644 --- 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 ( - - - {nodeBackButton?.attributes.value} + + + + {nodeBackButton?.attributes.value} + ) diff --git a/packages/elements-react/src/theme/default/components/card/footer.tsx b/packages/elements-react/src/theme/default/components/card/footer.tsx index 9309d1c1b..4a887afdb 100644 --- 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 ( - + {intl.formatMessage({ id: "login.registration-label", defaultMessage: "No account?", })}{" "} {intl.formatMessage({ @@ -102,12 +102,12 @@ function RegistrationCardFooter() { } return ( - + {formState.current === "method_active" ? ( <> {screenSelectionNode && ( ) } diff --git a/packages/elements-react/src/theme/default/components/form/checkbox.tsx b/packages/elements-react/src/theme/default/components/form/checkbox.tsx index 0bb85a77e..22fccef17 100644 --- a/packages/elements-react/src/theme/default/components/form/checkbox.tsx +++ b/packages/elements-react/src/theme/default/components/form/checkbox.tsx @@ -8,7 +8,6 @@ import { OryNodeInputProps, uiTextToFormattedMessage, } from "@ory/elements-react" -import { useState } from "react" import { useForm } from "react-hook-form" import { useIntl } from "react-intl" import { cn } from "../../utils/cn" @@ -17,22 +16,17 @@ import { CheckboxLabel } from "../ui/checkbox-label" function CheckboxSVG() { return ( - ) @@ -55,47 +49,44 @@ export const DefaultCheckbox = ({ const intl = useIntl() const label = getNodeLabel(node) - const [checked, setChecked] = useState(Boolean(value)) const { register } = useForm() + const hasError = node.messages.some((m) => m.type === "error") return ( -
{ - setChecked(!checked) - }} - > -
+
-
- + {node.messages.map((message) => ( {uiTextToFormattedMessage(message, intl)} ))} -
-
+ + ) } diff --git a/packages/elements-react/src/theme/default/components/form/group-container.tsx b/packages/elements-react/src/theme/default/components/form/group-container.tsx index 7f3deb247..27af79a25 100644 --- a/packages/elements-react/src/theme/default/components/form/group-container.tsx +++ b/packages/elements-react/src/theme/default/components/form/group-container.tsx @@ -4,5 +4,5 @@ import { OryFormGroupProps } from "@ory/elements-react" export function DefaultGroupContainer({ children }: OryFormGroupProps) { - return
{children}
+ return
{children}
} diff --git a/packages/elements-react/src/theme/default/components/form/horizontal-divider.tsx b/packages/elements-react/src/theme/default/components/form/horizontal-divider.tsx index 734cb3f66..894d6ad4e 100644 --- a/packages/elements-react/src/theme/default/components/form/horizontal-divider.tsx +++ b/packages/elements-react/src/theme/default/components/form/horizontal-divider.tsx @@ -2,5 +2,5 @@ // SPDX-License-Identifier: Apache-2.0 export function DefaultHorizontalDivider() { - return
+ return
} diff --git a/packages/elements-react/src/theme/default/components/form/index.tsx b/packages/elements-react/src/theme/default/components/form/index.tsx index 67796774c..eb4f35d57 100644 --- a/packages/elements-react/src/theme/default/components/form/index.tsx +++ b/packages/elements-react/src/theme/default/components/form/index.tsx @@ -53,11 +53,15 @@ export function DefaultMessage({ message }: OryMessageContentProps) { const intl = useIntl() return ( {uiTextToFormattedMessage(message, intl)} diff --git a/packages/elements-react/src/theme/default/components/form/input.tsx b/packages/elements-react/src/theme/default/components/form/input.tsx index 9d6aeb458..ed8e0fb64 100644 --- a/packages/elements-react/src/theme/default/components/form/input.tsx +++ b/packages/elements-react/src/theme/default/components/form/input.tsx @@ -49,10 +49,13 @@ export const DefaultInput = ({ autoComplete={autocomplete} placeholder={formattedLabel} className={cn( - "antialiased disabled:text-forms-fg-disabled disabled:bg-forms-bg-disabled bg-forms-bg-default rounded-border-radius-forms border border-forms-border-default leading-tight hover:border-forms-border-hover transition-colors text-sm", - "px-3 py-2.5", + "antialiased rounded-forms border leading-tight transition-colors placeholder:h-[20px] placeholder:text-input-foreground-tertiary focus-visible:outline-none focus:ring-0", + "bg-input-background-default border-input-border-default text-input-foreground-primary", + "disabled:bg-input-background-disabled disabled:border-input-border-disabled disabled:text-input-foreground-disabled", + "focus:border-input-border-focus focus-visible:border-input-border-focus", + "px-4 py-[13px]", // The settings flow input fields are supposed to be dense, so we don't need the extra padding we want on the user flows. - flowType === FlowType.Settings ? "max-w-[488px]" : "md:px-4 md:py-4", + flowType === FlowType.Settings && "max-w-[488px]", )} {...register(name, { value })} /> diff --git a/packages/elements-react/src/theme/default/components/form/label.tsx b/packages/elements-react/src/theme/default/components/form/label.tsx index 1976f070b..70d3c1bc0 100644 --- a/packages/elements-react/src/theme/default/components/form/label.tsx +++ b/packages/elements-react/src/theme/default/components/form/label.tsx @@ -56,7 +56,7 @@ export function DefaultLabel({ {intl.formatMessage({ id: "forms.label.forgot-password", @@ -82,7 +82,7 @@ export function DefaultLabel({ name={resendNode.attributes.name} value={resendNode.attributes.value} onClick={handleResend} - className="cursor-pointer text-sm font-medium text-links-link-default transition-colors hover:text-links-link-hover hover:underline" + className="cursor-pointer text-button-link-brand-brand transition-colors hover:text-button-link-brand-brand-hover underline" > {intl.formatMessage({ id: "identities.messages.1070008" })} diff --git a/packages/elements-react/src/theme/default/components/form/link-button.tsx b/packages/elements-react/src/theme/default/components/form/link-button.tsx index a68624d32..54837e3c1 100644 --- a/packages/elements-react/src/theme/default/components/form/link-button.tsx +++ b/packages/elements-react/src/theme/default/components/form/link-button.tsx @@ -22,7 +22,7 @@ export const DefaultLinkButton = forwardRef< ref={ref} title={label ? uiTextToFormattedMessage(label, intl) : ""} className={cn( - "antialiased rounded cursor-pointer text-center border border-transparent gap-3 leading-none bg-button-primary-bg-default hover:bg-button-primary-bg-hover transition-colors text-button-primary-fg-default hover:text-button-primary-fg-hover px-4 py-4.5 text-sm font-medium", + "antialiased rounded cursor-pointer text-center border gap-3 leading-none bg-button-primary-background-default hover:bg-button-primary-background-hover transition-colors text-button-primary-foreground-default hover:text-button-primary-foreground-hover p-4 font-medium", )} > {label ? uiTextToFormattedMessage(label, intl) : ""} diff --git a/packages/elements-react/src/theme/default/components/form/pin-code-input.tsx b/packages/elements-react/src/theme/default/components/form/pin-code-input.tsx index 44cf75155..096ec8074 100644 --- a/packages/elements-react/src/theme/default/components/form/pin-code-input.tsx +++ b/packages/elements-react/src/theme/default/components/form/pin-code-input.tsx @@ -24,13 +24,9 @@ export const DefaultPinCodeInput = ({ attributes }: OryNodeInputProps) => { name={name} value={value} > - + {[...Array(elements)].map((_, index) => ( - + ))} diff --git a/packages/elements-react/src/theme/default/components/form/section.tsx b/packages/elements-react/src/theme/default/components/form/section.tsx index 06993f4e9..27bdfcfae 100644 --- a/packages/elements-react/src/theme/default/components/form/section.tsx +++ b/packages/elements-react/src/theme/default/components/form/section.tsx @@ -6,6 +6,8 @@ import { OryFormSectionFooterProps, OryFormSectionProps, } from "@ory/elements-react" +import { cn } from "../../utils/cn" +import { isValidElement } from "react" const DefaultFormSection = ({ children }: OryFormSectionProps) => { return ( @@ -21,19 +23,33 @@ const DefaultFormSectionContent = ({ children, }: OryFormSectionContentProps) => { return ( -
+
-

{title}

- {description} +

+ {title} +

+ + {description} +
{children}
) } -const DefaultFormSectionFooter = ({ children }: OryFormSectionFooterProps) => { +const DefaultFormSectionFooter = ({ + children, + text, +}: OryFormSectionFooterProps) => { return ( -
+
+ {text} {children}
) diff --git a/packages/elements-react/src/theme/default/components/form/shadcn/otp-input.tsx b/packages/elements-react/src/theme/default/components/form/shadcn/otp-input.tsx index 1f40d339d..470388b13 100644 --- a/packages/elements-react/src/theme/default/components/form/shadcn/otp-input.tsx +++ b/packages/elements-react/src/theme/default/components/form/shadcn/otp-input.tsx @@ -43,16 +43,17 @@ const InputOTPSlot = React.forwardRef<
- {char} + {char} {hasFakeCaret && (
-
+
)}
diff --git a/packages/elements-react/src/theme/default/components/form/social.tsx b/packages/elements-react/src/theme/default/components/form/social.tsx index 8586f3af4..5ca183da4 100644 --- a/packages/elements-react/src/theme/default/components/form/social.tsx +++ b/packages/elements-react/src/theme/default/components/form/social.tsx @@ -62,10 +62,7 @@ export function DefaultButtonSocial({ return (
) diff --git a/packages/elements-react/src/theme/default/components/settings/settings-passkey.tsx b/packages/elements-react/src/theme/default/components/settings/settings-passkey.tsx index 2cf1a6bfc..a5caccaf1 100644 --- a/packages/elements-react/src/theme/default/components/settings/settings-passkey.tsx +++ b/packages/elements-react/src/theme/default/components/settings/settings-passkey.tsx @@ -1,29 +1,30 @@ // Copyright © 2024 Ory Corp // SPDX-License-Identifier: Apache-2.0 -import { OrySettingsPasskeyProps } from "@ory/elements-react" import { UiNodeInputAttributes } from "@ory/client-fetch" -import { DefaultButton } from "../form/button" -import { DefaultHorizontalDivider } from "../form/horizontal-divider" +import { OrySettingsPasskeyProps, useComponents } from "@ory/elements-react" import Passkey from "../../assets/icons/passkey.svg" import Trash from "../../assets/icons/trash.svg" +import { DefaultHorizontalDivider } from "../form/horizontal-divider" export function DefaultSettingsPasskey({ triggerButton, removeButtons, }: OrySettingsPasskeyProps) { + const { Node } = useComponents() + const hasRemoveButtons = removeButtons.length > 0 return (
- {triggerButton ? ( - - ) : null} + )}
{hasRemoveButtons ? (
@@ -33,7 +34,7 @@ export function DefaultSettingsPasskey({ const context = node.meta.label?.context ?? {} const addedAt = "added_at" in context ? (context.added_at as string) : null - const diaplyName = + const displayName = "display_name" in context ? (context.display_name as string) : null @@ -45,24 +46,33 @@ export function DefaultSettingsPasskey({ className="flex justify-between gap-6" key={`webauthn-remove-button-${i}`} > - +
-

- {diaplyName} +

+ {displayName}

- {keyId} + + {keyId} +
{addedAt && ( -

- {new Date(addedAt).toLocaleDateString()} +

+ {new Intl.DateTimeFormat(undefined, { + dateStyle: "long", + }).format(new Date(addedAt))}

)}
) diff --git a/packages/elements-react/src/theme/default/components/settings/settings-recovery-codes.tsx b/packages/elements-react/src/theme/default/components/settings/settings-recovery-codes.tsx index c9ade2f23..1ee595ae7 100644 --- a/packages/elements-react/src/theme/default/components/settings/settings-recovery-codes.tsx +++ b/packages/elements-react/src/theme/default/components/settings/settings-recovery-codes.tsx @@ -1,24 +1,18 @@ // Copyright © 2024 Ory Corp // SPDX-License-Identifier: Apache-2.0 +import { UiNodeInputAttributes } from "@ory/client-fetch" import { OrySettingsRecoveryCodesProps } from "@ory/elements-react" import Download from "../../assets/icons/download.svg" import Eye from "../../assets/icons/eye.svg" import Refresh from "../../assets/icons/refresh.svg" -import { UiNode, UiNodeInputAttributes } from "@ory/client-fetch" import { DefaultHorizontalDivider } from "../form/horizontal-divider" -interface SettingsRecoveryCodesProps extends OrySettingsRecoveryCodesProps { - codes: string[] - regenerateButton?: UiNode - revealButton?: UiNode -} - export function DefaultSettingsRecoveryCodes({ codes, regnerateButton, revealButton, -}: SettingsRecoveryCodesProps) { +}: OrySettingsRecoveryCodesProps) { const onDownload = () => { const element = document.createElement("a") const file = new Blob([codes.join("\n")], { @@ -43,7 +37,7 @@ export function DefaultSettingsRecoveryCodes({ > )} @@ -54,21 +48,22 @@ export function DefaultSettingsRecoveryCodes({ > + + )} + {hasCodes && ( + )} - {hasCodes ? ( - - ) : null}
{hasCodes ? ( -
-
+
+
{codes.map((code) => (

{code}

))} diff --git a/packages/elements-react/src/theme/default/components/settings/settings-top.tsx b/packages/elements-react/src/theme/default/components/settings/settings-top.tsx index 0894030bc..e6ab7e545 100644 --- a/packages/elements-react/src/theme/default/components/settings/settings-top.tsx +++ b/packages/elements-react/src/theme/default/components/settings/settings-top.tsx @@ -6,15 +6,13 @@ import { UiNodeInputAttributes, UiNodeTextAttributes, } from "@ory/client-fetch" -import { OrySettingsTotpProps } from "@ory/elements-react" -import { DefaultInput } from "../form/input" -import { DefaultImage } from "../form/image" -import { DefaultHorizontalDivider } from "../form/horizontal-divider" -import { DefaultLabel } from "../form/label" +import { OrySettingsTotpProps, useComponents } from "@ory/elements-react" import QrCode from "../../assets/icons/qrcode.svg" import Trash from "../../assets/icons/trash.svg" +import { DefaultHorizontalDivider } from "../form/horizontal-divider" export function DefaultSettingsTotp(props: OrySettingsTotpProps) { + const { Node, Card } = useComponents() if ("totpUnlink" in props && props.totpUnlink) { const { type, @@ -27,14 +25,14 @@ export function DefaultSettingsTotp(props: OrySettingsTotpProps) { return (
- +
-

+

Authenticator app

@@ -43,8 +41,8 @@ export function DefaultSettingsTotp(props: OrySettingsTotpProps) { {...buttonAttrs} >
@@ -58,10 +56,10 @@ export function DefaultSettingsTotp(props: OrySettingsTotpProps) {
-
+
-
- - - - + - - +
) diff --git a/packages/elements-react/src/theme/default/components/settings/settings-webauthn.tsx b/packages/elements-react/src/theme/default/components/settings/settings-webauthn.tsx index 65128d9a6..7ccb4d427 100644 --- a/packages/elements-react/src/theme/default/components/settings/settings-webauthn.tsx +++ b/packages/elements-react/src/theme/default/components/settings/settings-webauthn.tsx @@ -1,12 +1,8 @@ // Copyright © 2024 Ory Corp // SPDX-License-Identifier: Apache-2.0 -import { OrySettingsWebauthnProps } from "@ory/elements-react" import { UiNodeInputAttributes } from "@ory/client-fetch" -import { DefaultLabel } from "../form/label" -import { DefaultInput } from "../form/input" -import { DefaultButton } from "../form/button" -import { DefaultHorizontalDivider } from "../form/horizontal-divider" +import { OrySettingsWebauthnProps, useComponents } from "@ory/elements-react" import Key from "../../assets/icons/key.svg" import Trash from "../../assets/icons/trash.svg" @@ -15,24 +11,25 @@ export function DefaultSettingsWebauthn({ triggerButton, removeButtons, }: OrySettingsWebauthnProps) { + const { Node, Card } = useComponents() const hasRemoveButtons = removeButtons.length > 0 return (
- - - +
{triggerButton ? ( - {hasRemoveButtons ? (
- +
{removeButtons.map((node, i) => { const context = node.meta.label?.context ?? {} @@ -59,24 +56,33 @@ export function DefaultSettingsWebauthn({ className="flex justify-between gap-6" key={`webauthn-remove-button-${i}`} > - +
-

+

{diaplyName}

- {keyId} + + {keyId} +
{addedAt && ( -

- {new Date(addedAt).toLocaleDateString()} +

+ {new Intl.DateTimeFormat(undefined, { + dateStyle: "long", + }).format(new Date(addedAt))}

)}
) diff --git a/packages/elements-react/src/theme/default/components/ui/checkbox-label.tsx b/packages/elements-react/src/theme/default/components/ui/checkbox-label.tsx index afbe01e43..3e17fd2d1 100644 --- a/packages/elements-react/src/theme/default/components/ui/checkbox-label.tsx +++ b/packages/elements-react/src/theme/default/components/ui/checkbox-label.tsx @@ -38,7 +38,7 @@ export function computeLabelElements(labelText: string) { href={url} target="_blank" rel="noopener noreferrer" - className="text-links-link-default hover:text-links-link-hover hover:underline" + className="text-button-link-brand-brand hover:text-button-link-brand-brand-hover underline" > {linkText} , diff --git a/packages/elements-react/src/theme/default/components/ui/dropdown-menu.tsx b/packages/elements-react/src/theme/default/components/ui/dropdown-menu.tsx index da7b85869..6942c6ff7 100644 --- a/packages/elements-react/src/theme/default/components/ui/dropdown-menu.tsx +++ b/packages/elements-react/src/theme/default/components/ui/dropdown-menu.tsx @@ -24,7 +24,7 @@ const DropdownMenuContent = forwardRef< align="end" className={cn( "z-50 min-w-[19rem] overflow-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", - "border border-dialog-border-default bg-dialog-bg-default rounded-border-radius-cards", + "border border-interface-border-default-primary bg-interface-background-default-primary rounded-cards", className, )} {...props} @@ -44,10 +44,10 @@ const DropdownMenuItem = forwardRef< className={cn( "relative flex cursor-pointer select-none items-center outline-none transition-colors data-[disabled]:pointer-events-none", "px-8 py-3 lg:py-4.5 text-sm gap-6", - "first:border-0 border-t border-button-secondary-border-default hover:border-button-social-border-hover data-[disabled]:border-button-secondary-border-disabled", - "text-button-secondary-fg-default bg-button-secondary-bg-default", - "hover:text-button-secondary-fg-hover hover:bg-button-secondary-bg-hover", - "data-[disabled]:text-button-secondary-fg-disabled data-[disabled]:bg-button-secondary-bg-disabled", + "first:border-0 border-t border-button-secondary-border-default hover:border-button-social-border-hover", + "text-button-secondary-foreground-default bg-button-secondary-background-default", + "hover:text-button-secondary-foreground-hover hover:bg-button-secondary-background-hover", + "data-[disabled]:text-button-secondary-foreground-disabled data-[disabled]:bg-button-secondary-background-disabled", inset && "pl-8", className, )} diff --git a/packages/elements-react/src/theme/default/components/ui/user-avater.tsx b/packages/elements-react/src/theme/default/components/ui/user-avater.tsx index de7f602e7..c5fe3b65d 100644 --- a/packages/elements-react/src/theme/default/components/ui/user-avater.tsx +++ b/packages/elements-react/src/theme/default/components/ui/user-avater.tsx @@ -14,7 +14,7 @@ export const UserAvatar = forwardRef( return ( diff --git a/packages/elements-react/src/theme/default/components/ui/user-menu.tsx b/packages/elements-react/src/theme/default/components/ui/user-menu.tsx index bd37af8a9..71e261db1 100644 --- a/packages/elements-react/src/theme/default/components/ui/user-menu.tsx +++ b/packages/elements-react/src/theme/default/components/ui/user-menu.tsx @@ -45,9 +45,13 @@ export const UserMenu = ({ session }: UserMenuProps) => {
-
{initials.primary}
+
+ {initials.primary} +
{initials.secondary && ( -
{initials.secondary}
+
+ {initials.secondary} +
)}
diff --git a/packages/elements-react/src/types.ts b/packages/elements-react/src/types.ts index 562f46c6f..5c8f61944 100644 --- a/packages/elements-react/src/types.ts +++ b/packages/elements-react/src/types.ts @@ -73,4 +73,6 @@ export type OryFormSectionContentProps = PropsWithChildren<{ description?: string }> -export type OryFormSectionFooterProps = PropsWithChildren +export type OryFormSectionFooterProps = PropsWithChildren<{ + text?: string +}> diff --git a/packages/elements-react/tailwind.config.ts b/packages/elements-react/tailwind.config.ts index 10c8a18d2..a74fb710d 100644 --- a/packages/elements-react/tailwind.config.ts +++ b/packages/elements-react/tailwind.config.ts @@ -19,40 +19,41 @@ const config: Config = { animation: { "caret-blink": "caret-blink 1.25s ease-out infinite", }, - backgroundImage: { - "gradient-radial": "radial-gradient(var(--tw-gradient-stops))", - "gradient-conic": - "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))", - }, padding: { "4.5": "1.125rem", }, /* We need the default border radius as well in some cases. */ - borderRadius: variables.borderRadius, + borderRadius: variables.borderRadius.default.number, }, fontFamily: { sans: ["var(--font-sans)"], }, colors: { - ...variables.colors.light, + ...variables.light.color, + ...variables.slate.color, }, backgroundColor: { - ...variables.colors.light, + ...variables.light.color, + ...variables.slate.color, }, borderColor: { - ...variables.colors.light, + ...variables.light.color, + ...variables.slate.color, }, ringColor: { - ...variables.colors.light, + ...variables.light.color, + ...variables.slate.color, }, fill: { - ...variables.colors.light, + ...variables.light.color, + ...variables.slate.color, }, }, plugins: [ plugin((plugin) => { plugin.addVariant("loading", "&[data-loading=true]") }), + require("tailwindcss-animate"), ], } diff --git a/packages/elements-react/variables-processed.json b/packages/elements-react/variables-processed.json index 38647b2f0..404dba6de 100644 --- a/packages/elements-react/variables-processed.json +++ b/packages/elements-react/variables-processed.json @@ -1,193 +1,391 @@ { - "colors": { - "light": { - "accent": "var(--accent, #4f46e5)", - "bg-default": "var(--bg-default, #f8fafc)", - "branding-bg-default": "#4f46e5", - "branding-bg-hover": "#f8fafc", - "branding-border-hover": "#e2e8f0", - "branding-fg-default": "#ffffff", - "branding-fg-hover": "#0f172a", - "button-identifier-bg-default": "var(--button-identifier-bg-default, #ffffff)", - "button-identifier-bg-hover": "var(--button-identifier-bg-hover, #f8fafc)", - "button-identifier-border-default": "var(--button-identifier-border-default, #e2e8f0)", - "button-identifier-border-hover": "var(--button-identifier-border-hover, #e2e8f0)", - "button-identifier-fg-default": "var(--button-identifier-fg-default, #0f172a)", - "button-identifier-fg-subtle": "var(--button-identifier-fg-subtle, #334155)", - "button-primary-bg-default": "var(--button-primary-bg-default, #1e293b)", - "button-primary-bg-disabled": "var(--button-primary-bg-disabled, #64748b)", - "button-primary-bg-hover": "var(--button-primary-bg-hover, #0f172a)", - "button-primary-border-default": "var(--button-primary-border-default, #ffffff00)", - "button-primary-border-disabled": "var(--button-primary-border-disabled, #ffffff00)", - "button-primary-border-hover": "var(--button-primary-border-hover, #ffffff00)", - "button-primary-fg-default": "var(--button-primary-fg-default, #ffffff)", - "button-primary-fg-disabled": "var(--button-primary-fg-disabled, #94a3b8)", - "button-primary-fg-hover": "var(--button-primary-fg-hover, #ffffff)", - "button-secondary-bg-default": "var(--button-secondary-bg-default, #ffffff)", - "button-secondary-bg-disabled": "var(--button-secondary-bg-disabled, #f8fafc)", - "button-secondary-bg-hover": "var(--button-secondary-bg-hover, #f8fafc)", - "button-secondary-border-default": "var(--button-secondary-border-default, #e2e8f0)", - "button-secondary-border-disabled": "var(--button-secondary-border-disabled, #e2e8f0)", - "button-secondary-border-hover": "var(--button-secondary-border-hover, #e2e8f0)", - "button-secondary-fg-default": "var(--button-secondary-fg-default, #0f172a)", - "button-secondary-fg-disabled": "var(--button-secondary-fg-disabled, #94a3b8)", - "button-secondary-fg-hover": "var(--button-secondary-fg-hover, #334155)", - "button-social-bg-default": "var(--button-social-bg-default, #ffffff)", - "button-social-bg-disabled": "var(--button-social-bg-disabled, #f8fafc)", - "button-social-bg-hover": "var(--button-social-bg-hover, #f8fafc)", - "button-social-border-default": "var(--button-social-border-default, #e2e8f0)", - "button-social-border-disabled": "var(--button-social-border-disabled, #e2e8f0)", - "button-social-border-hover": "var(--button-social-border-hover, #e2e8f0)", - "button-social-fg-default": "var(--button-social-fg-default, #0f172a)", - "button-social-fg-disabled": "var(--button-social-fg-disabled, #94a3b8)", - "button-social-fg-hover": "var(--button-social-fg-hover, #334155)", - "dialog-bg-default": "var(--dialog-bg-default, #ffffff)", - "dialog-bg-subtle": "var(--dialog-bg-subtle, #f8fafc)", - "dialog-border-default": "var(--dialog-border-default, #e2e8f0)", - "dialog-fg-default": "var(--dialog-fg-default, #0f172a)", - "dialog-fg-mute": "var(--dialog-fg-mute, #64748b)", - "dialog-fg-subtle": "var(--dialog-fg-subtle, #334155)", - "forms-bg-default": "var(--forms-bg-default, #ffffff)", - "forms-bg-disabled": "var(--forms-bg-disabled, #f8fafc)", - "forms-bg-hover": "var(--forms-bg-hover, #f8fafc)", - "forms-border-default": "var(--forms-border-default, #e2e8f0)", - "forms-border-disabled": "var(--forms-border-disabled, #e2e8f0)", - "forms-border-error": "var(--forms-border-error, #ef4444)", - "forms-border-focus": "var(--forms-border-focus, #0f172a)", - "forms-border-hover": "var(--forms-border-hover, #e2e8f0)", - "forms-border-success": "var(--forms-border-success, #22c55e)", - "forms-fg-default": "var(--forms-fg-default, #0f172a)", - "forms-fg-disabled": "var(--forms-fg-disabled, #94a3b8)", - "forms-fg-error": "var(--forms-fg-error, #ef4444)", - "forms-fg-mute": "var(--forms-fg-mute, #64748b)", - "forms-fg-placeholder": "var(--forms-fg-placeholder, #64748b)", - "forms-fg-subtle": "var(--forms-fg-subtle, #334155)", - "forms-fg-success": "var(--forms-fg-success, #22c55e)", - "forms-checkbox-checkbox-bg-checked": "var(--forms-checkbox-checkbox-bg-checked, #0f172a)", - "forms-checkbox-checkbox-bg-default": "var(--forms-checkbox-checkbox-bg-default, #f8fafc)", - "forms-checkbox-checkbox-border-checked": "var(--forms-checkbox-checkbox-border-checked, #ffffff00)", - "forms-checkbox-checkbox-border-default": "var(--forms-checkbox-checkbox-border-default, #e2e8f0)", - "forms-checkbox-checkbox-fg-checked": "var(--forms-checkbox-checkbox-fg-checked, #ffffff)", - "forms-radio-radio-bg-checked": "var(--forms-radio-radio-bg-checked, #0f172a)", - "forms-radio-radio-bg-default": "var(--forms-radio-radio-bg-default, #f8fafc)", - "forms-radio-radio-border-checked": "var(--forms-radio-radio-border-checked, #ffffff00)", - "forms-radio-radio-border-default": "var(--forms-radio-radio-border-default, #e2e8f0)", - "forms-radio-radio-fg-checked": "var(--forms-radio-radio-fg-checked, #ffffff)", - "forms-toggle-toggle-bg-checked": "var(--forms-toggle-toggle-bg-checked, #0f172a)", - "forms-toggle-toggle-bg-default": "var(--forms-toggle-toggle-bg-default, #f8fafc)", - "forms-toggle-toggle-border-checked": "var(--forms-toggle-toggle-border-checked, #ffffff00)", - "forms-toggle-toggle-border-default": "var(--forms-toggle-toggle-border-default, #e2e8f0)", - "forms-toggle-toggle-fg-checked": "var(--forms-toggle-toggle-fg-checked, #ffffff)", - "forms-toggle-toggle-fg-default": "var(--forms-toggle-toggle-fg-default, #0f172a)", - "links-link-default": "var(--links-link-default, #4f46e5)", - "links-link-disabled": "var(--links-link-disabled, #94a3b8)", - "links-link-hover": "var(--links-link-hover, #0f172a)", - "links-link-inverted-default": "var(--links-link-inverted-default, #0f172a)", - "links-link-inverted-hover": "var(--links-link-inverted-hover, #4f46e5)", - "links-link-mute-default": "var(--links-link-mute-default, #64748b)", - "links-link-mute-hover": "var(--links-link-mute-hover, #0f172a)", - "syntax-syntax": "var(--syntax-syntax, #64748b)", - "syntax-syntax-key": "var(--syntax-syntax-key, #9a3412)", - "syntax-syntax-num": "var(--syntax-syntax-num, #15803d)", - "syntax-syntax-value": "var(--syntax-syntax-value, #4f46e5)" - }, - "dark": { - "accent": "var(--accent, #22d3ee)", - "bg-default": "var(--bg-default, #020617)", - "branding-bg-default": "#4f46e5", - "branding-bg-hover": "#1e293b", - "branding-border-hover": "#334155", - "branding-fg-default": "#ffffff", - "branding-fg-hover": "#ffffff", - "button-identifier-bg-default": "var(--button-identifier-bg-default, #0f172a)", - "button-identifier-bg-hover": "var(--button-identifier-bg-hover, #1e293b)", - "button-identifier-border-default": "var(--button-identifier-border-default, #334155)", - "button-identifier-border-hover": "var(--button-identifier-border-hover, #334155)", - "button-identifier-fg-default": "var(--button-identifier-fg-default, #ffffff)", - "button-identifier-fg-subtle": "var(--button-identifier-fg-subtle, #e2e8f0)", - "button-primary-bg-default": "var(--button-primary-bg-default, #ffffff)", - "button-primary-bg-disabled": "var(--button-primary-bg-disabled, #94a3b8)", - "button-primary-bg-hover": "var(--button-primary-bg-hover, #e2e8f0)", - "button-primary-border-default": "var(--button-primary-border-default, #ffffff00)", - "button-primary-border-disabled": "var(--button-primary-border-disabled, #ffffff00)", - "button-primary-border-hover": "var(--button-primary-border-hover, #ffffff00)", - "button-primary-fg-default": "var(--button-primary-fg-default, #0f172a)", - "button-primary-fg-disabled": "var(--button-primary-fg-disabled, #64748b)", - "button-primary-fg-hover": "var(--button-primary-fg-hover, #0f172a)", - "button-secondary-bg-default": "var(--button-secondary-bg-default, #0f172a)", - "button-secondary-bg-disabled": "var(--button-secondary-bg-disabled, #1e293b)", - "button-secondary-bg-hover": "var(--button-secondary-bg-hover, #1e293b)", - "button-secondary-border-default": "var(--button-secondary-border-default, #334155)", - "button-secondary-border-disabled": "var(--button-secondary-border-disabled, #334155)", - "button-secondary-border-hover": "var(--button-secondary-border-hover, #334155)", - "button-secondary-fg-default": "var(--button-secondary-fg-default, #ffffff)", - "button-secondary-fg-disabled": "var(--button-secondary-fg-disabled, #64748b)", - "button-secondary-fg-hover": "var(--button-secondary-fg-hover, #e2e8f0)", - "button-social-bg-default": "var(--button-social-bg-default, #0f172a)", - "button-social-bg-disabled": "var(--button-social-bg-disabled, #1e293b)", - "button-social-bg-hover": "var(--button-social-bg-hover, #1e293b)", - "button-social-border-default": "var(--button-social-border-default, #334155)", - "button-social-border-disabled": "var(--button-social-border-disabled, #334155)", - "button-social-border-hover": "var(--button-social-border-hover, #334155)", - "button-social-fg-default": "var(--button-social-fg-default, #ffffff)", - "button-social-fg-disabled": "var(--button-social-fg-disabled, #64748b)", - "button-social-fg-hover": "var(--button-social-fg-hover, #e2e8f0)", - "dialog-bg-default": "var(--dialog-bg-default, #0f172a)", - "dialog-bg-subtle": "var(--dialog-bg-subtle, #020617)", - "dialog-border-default": "var(--dialog-border-default, #334155)", - "dialog-fg-default": "var(--dialog-fg-default, #ffffff)", - "dialog-fg-mute": "var(--dialog-fg-mute, #94a3b8)", - "dialog-fg-subtle": "var(--dialog-fg-subtle, #e2e8f0)", - "forms-bg-default": "var(--forms-bg-default, #0f172a)", - "forms-bg-disabled": "var(--forms-bg-disabled, #1e293b)", - "forms-bg-hover": "var(--forms-bg-hover, #1e293b)", - "forms-border-default": "var(--forms-border-default, #334155)", - "forms-border-disabled": "var(--forms-border-disabled, #334155)", - "forms-border-error": "var(--forms-border-error, #ef4444)", - "forms-border-focus": "var(--forms-border-focus, #ffffff)", - "forms-border-hover": "var(--forms-border-hover, #334155)", - "forms-border-success": "var(--forms-border-success, #22c55e)", - "forms-fg-default": "var(--forms-fg-default, #ffffff)", - "forms-fg-disabled": "var(--forms-fg-disabled, #64748b)", - "forms-fg-error": "var(--forms-fg-error, #ef4444)", - "forms-fg-mute": "var(--forms-fg-mute, #94a3b8)", - "forms-fg-placeholder": "var(--forms-fg-placeholder, #94a3b8)", - "forms-fg-subtle": "var(--forms-fg-subtle, #e2e8f0)", - "forms-fg-success": "var(--forms-fg-success, #22c55e)", - "forms-checkbox-checkbox-bg-checked": "var(--forms-checkbox-checkbox-bg-checked, #ffffff)", - "forms-checkbox-checkbox-bg-default": "var(--forms-checkbox-checkbox-bg-default, #1e293b)", - "forms-checkbox-checkbox-border-checked": "var(--forms-checkbox-checkbox-border-checked, #ffffff00)", - "forms-checkbox-checkbox-border-default": "var(--forms-checkbox-checkbox-border-default, #334155)", - "forms-checkbox-checkbox-fg-checked": "var(--forms-checkbox-checkbox-fg-checked, #0f172a)", - "forms-radio-radio-bg-checked": "var(--forms-radio-radio-bg-checked, #ffffff)", - "forms-radio-radio-bg-default": "var(--forms-radio-radio-bg-default, #1e293b)", - "forms-radio-radio-border-checked": "var(--forms-radio-radio-border-checked, #ffffff00)", - "forms-radio-radio-border-default": "var(--forms-radio-radio-border-default, #334155)", - "forms-radio-radio-fg-checked": "var(--forms-radio-radio-fg-checked, #0f172a)", - "forms-toggle-toggle-bg-checked": "var(--forms-toggle-toggle-bg-checked, #ffffff)", - "forms-toggle-toggle-bg-default": "var(--forms-toggle-toggle-bg-default, #1e293b)", - "forms-toggle-toggle-border-checked": "var(--forms-toggle-toggle-border-checked, #ffffff00)", - "forms-toggle-toggle-border-default": "var(--forms-toggle-toggle-border-default, #334155)", - "forms-toggle-toggle-fg-checked": "var(--forms-toggle-toggle-fg-checked, #0f172a)", - "forms-toggle-toggle-fg-default": "var(--forms-toggle-toggle-fg-default, #ffffff)", - "links-link-default": "var(--links-link-default, #4f46e5)", - "links-link-disabled": "var(--links-link-disabled, #64748b)", - "links-link-hover": "var(--links-link-hover, #ffffff)", - "links-link-inverted-default": "var(--links-link-inverted-default, #0f172a)", - "links-link-inverted-hover": "var(--links-link-inverted-hover, #4f46e5)", - "links-link-mute-default": "var(--links-link-mute-default, #64748b)", - "links-link-mute-hover": "var(--links-link-mute-hover, #0f172a)", - "syntax-syntax": "var(--syntax-syntax, #64748b)", - "syntax-syntax-key": "var(--syntax-syntax-key, #4f46e5)", - "syntax-syntax-num": "var(--syntax-syntax-num, #93c5fd)", - "syntax-syntax-value": "var(--syntax-syntax-value, #fdba74)" + "light": { + "color": { + "button-identifier-background-default": "var(--interface-background-brand-secondary, #eff6ff)", + "button-identifier-background-hover": "var(--interface-background-brand-secondary-hover, #dbeafe)", + "button-identifier-border-border-default": "var(--interface-border-brand-brand, #3b82f6)", + "button-identifier-border-border-hover": "var(--interface-border-brand-brand, #3b82f6)", + "button-identifier-foreground-default": "var(--interface-foreground-brand-on-secondary, #172554)", + "button-identifier-foreground-hover": "var(--interface-foreground-brand-on-secondary, #172554)", + "button-link-brand-brand": "var(--interface-foreground-brand-primary, #3b82f6)", + "button-link-brand-brand-hover": "var(--interface-foreground-default-primary, #0f172a)", + "button-link-default-primary": "var(--interface-foreground-default-primary, #0f172a)", + "button-link-default-primary-hover": "var(--interface-foreground-brand-primary, #3b82f6)", + "button-link-default-secondary": "var(--interface-foreground-default-secondary, #334155)", + "button-link-default-secondary-hover": "var(--interface-foreground-default-tertiary, #64748b)", + "button-link-disabled-disabled": "var(--interface-foreground-disabled-disabled, #cbd5e1)", + "button-primary-background-default": "var(--interface-background-brand-primary, #3b82f6)", + "button-primary-background-disabled": "var(--interface-background-disabled-disabled, #e2e8f0)", + "button-primary-background-hover": "var(--interface-background-default-inverted, #0f172a)", + "button-primary-border-default": "var(--interface-border-default-none, #ffffff00)", + "button-primary-border-disabled": "var(--interface-border-disabled-disabled, #cbd5e1)", + "button-primary-border-hover": "var(--interface-border-default-none, #ffffff00)", + "button-primary-foreground-default": "var(--interface-foreground-brand-on-primary, #ffffff)", + "button-primary-foreground-disabled": "var(--interface-foreground-disabled-on-disabled, #94a3b8)", + "button-primary-foreground-hover": "var(--interface-foreground-default-inverted, #ffffff)", + "button-secondary-background-default": "var(--interface-background-default-primary, #ffffff)", + "button-secondary-background-disabled": "var(--interface-background-disabled-disabled, #e2e8f0)", + "button-secondary-background-hover": "var(--interface-background-default-primary-hover, #f8fafc)", + "button-secondary-border-default": "var(--interface-border-default-primary, #cbd5e1)", + "button-secondary-border-disabled": "var(--interface-border-disabled-disabled, #cbd5e1)", + "button-secondary-border-hover": "var(--interface-border-default-primary, #cbd5e1)", + "button-secondary-foreground-default": "var(--interface-foreground-default-primary, #0f172a)", + "button-secondary-foreground-disabled": "var(--interface-foreground-disabled-on-disabled, #94a3b8)", + "button-secondary-foreground-hover": "var(--interface-foreground-default-secondary, #334155)", + "button-social-background-default": "var(--interface-background-default-primary, #ffffff)", + "button-social-background-disabled": "var(--interface-background-disabled-disabled, #e2e8f0)", + "button-social-background-generic-provider": "var(--interface-background-default-inverted, #0f172a)", + "button-social-background-hover": "var(--interface-background-default-primary-hover, #f8fafc)", + "button-social-border-default": "var(--interface-border-default-primary, #cbd5e1)", + "button-social-border-disabled": "var(--interface-border-disabled-disabled, #cbd5e1)", + "button-social-border-generic-provider": "var(--interface-border-default-none, #ffffff00)", + "button-social-border-hover": "var(--interface-border-default-primary, #cbd5e1)", + "button-social-foreground-default": "var(--interface-foreground-default-primary, #0f172a)", + "button-social-foreground-disabled": "var(--interface-foreground-disabled-on-disabled, #94a3b8)", + "button-social-foreground-generic-provider": "var(--interface-foreground-default-inverted, #ffffff)", + "button-social-foreground-hover": "var(--interface-foreground-default-secondary, #334155)", + "checkbox-background-checked": "var(--interface-background-brand-primary, #3b82f6)", + "checkbox-background-default": "var(--interface-background-default-secondary, #f8fafc)", + "checkbox-border-checkbox-border-checked": "var(--interface-border-brand-brand, #3b82f6)", + "checkbox-border-checkbox-border-default": "var(--interface-border-default-primary, #cbd5e1)", + "checkbox-foreground-checked": "var(--interface-foreground-default-inverted, #ffffff)", + "checkbox-foreground-default": "var(--interface-foreground-default-primary, #0f172a)", + "form-background-default": "var(--interface-background-default-primary, #ffffff)", + "form-border-default": "var(--interface-border-default-primary, #cbd5e1)", + "input-background-default": "var(--interface-background-default-primary, #ffffff)", + "input-background-disabled": "var(--interface-background-disabled-disabled, #e2e8f0)", + "input-background-hover": "var(--interface-background-default-primary-hover, #f8fafc)", + "input-border-default": "var(--interface-border-default-primary, #cbd5e1)", + "input-border-disabled": "var(--interface-border-disabled-disabled, #cbd5e1)", + "input-border-focus": "var(--interface-border-brand-brand, #3b82f6)", + "input-border-hover": "var(--interface-border-default-primary, #cbd5e1)", + "input-foreground-disabled": "var(--interface-foreground-disabled-on-disabled, #94a3b8)", + "input-foreground-primary": "var(--interface-foreground-default-primary, #0f172a)", + "input-foreground-secondary": "var(--interface-foreground-default-secondary, #334155)", + "input-foreground-tertiary": "var(--interface-foreground-default-tertiary, #64748b)", + "interface-background-brand-primary": "var(--brand-500, #3b82f6)", + "interface-background-brand-primary-hover": "var(--ui-900, #0f172a)", + "interface-background-brand-secondary": "var(--brand-50, #eff6ff)", + "interface-background-brand-secondary-hover": "var(--brand-100, #dbeafe)", + "interface-background-default-inverted": "var(--ui-900, #0f172a)", + "interface-background-default-inverted-hover": "var(--ui-800, #1e293b)", + "interface-background-default-none": "var(--ui-transparent, #ffffff00)", + "interface-background-default-primary": "var(--ui-white, #ffffff)", + "interface-background-default-primary-hover": "var(--ui-50, #f8fafc)", + "interface-background-default-secondary": "var(--ui-50, #f8fafc)", + "interface-background-default-secondary-hover": "var(--ui-200, #e2e8f0)", + "interface-background-default-tertiary": "var(--ui-200, #e2e8f0)", + "interface-background-default-tertiary-hover": "var(--ui-300, #cbd5e1)", + "interface-background-disabled-disabled": "var(--ui-200, #e2e8f0)", + "interface-background-validation-danger": "var(--ui-danger, #ef4444)", + "interface-background-validation-success": "var(--ui-success, #22c55e)", + "interface-background-validation-warning": "var(--ui-warning, #eab308)", + "interface-border-brand-brand": "var(--brand-500, #3b82f6)", + "interface-border-default-inverted": "var(--ui-700, #334155)", + "interface-border-default-none": "var(--ui-transparent, #ffffff00)", + "interface-border-default-primary": "var(--ui-300, #cbd5e1)", + "interface-border-disabled-disabled": "var(--ui-300, #cbd5e1)", + "interface-border-validation-danger": "var(--ui-danger, #ef4444)", + "interface-border-validation-success": "var(--ui-success, #22c55e)", + "interface-border-validation-warning": "var(--ui-warning, #eab308)", + "interface-foreground-brand-on-primary": "var(--ui-white, #ffffff)", + "interface-foreground-brand-on-secondary": "var(--brand-950, #172554)", + "interface-foreground-brand-primary": "var(--brand-500, #3b82f6)", + "interface-foreground-brand-secondary": "var(--brand-50, #eff6ff)", + "interface-foreground-default-inverted": "var(--ui-white, #ffffff)", + "interface-foreground-default-primary": "var(--ui-900, #0f172a)", + "interface-foreground-default-secondary": "var(--ui-700, #334155)", + "interface-foreground-default-tertiary": "var(--ui-500, #64748b)", + "interface-foreground-disabled-disabled": "var(--ui-300, #cbd5e1)", + "interface-foreground-disabled-on-disabled": "var(--ui-400, #94a3b8)", + "interface-foreground-validation-danger": "var(--ui-danger, #ef4444)", + "interface-foreground-validation-success": "var(--ui-success, #22c55e)", + "interface-foreground-validation-warning": "var(--ui-warning, #eab308)", + "ory-background-default": "var(--interface-background-default-primary, #ffffff)", + "ory-border-default": "var(--interface-border-default-primary, #cbd5e1)", + "ory-foreground-default": "var(--interface-foreground-default-primary, #0f172a)", + "radio-background-checked": "var(--interface-background-brand-primary, #3b82f6)", + "radio-background-default": "var(--interface-background-default-secondary, #f8fafc)", + "radio-border-checked": "var(--interface-border-brand-brand, #3b82f6)", + "radio-border-default": "var(--interface-border-default-primary, #cbd5e1)", + "radio-foreground-checked": "var(--interface-foreground-default-inverted, #ffffff)", + "radio-foreground-default": "var(--interface-foreground-default-primary, #0f172a)", + "toggle-background-checked": "var(--interface-background-brand-primary, #3b82f6)", + "toggle-background-default": "var(--interface-background-default-secondary, #f8fafc)", + "toggle-border-checked": "var(--interface-border-default-none, #ffffff00)", + "toggle-border-default": "var(--interface-border-default-primary, #cbd5e1)", + "toggle-foreground-checked": "var(--interface-foreground-brand-on-primary, #ffffff)", + "toggle-foreground-default": "var(--interface-foreground-brand-primary, #3b82f6)" + } + }, + "dark": { + "color": { + "button-identifier-background-default": "var(--interface-background-brand-secondary, #eff6ff)", + "button-identifier-background-hover": "var(--interface-background-brand-secondary-hover, #dbeafe)", + "button-identifier-border-border-default": "var(--interface-border-brand-brand, #3b82f6)", + "button-identifier-border-border-hover": "var(--interface-border-brand-brand, #3b82f6)", + "button-identifier-foreground-default": "var(--interface-foreground-brand-on-secondary, #172554)", + "button-identifier-foreground-hover": "var(--interface-foreground-brand-on-secondary, #172554)", + "button-link-brand-brand": "var(--interface-foreground-brand-primary, #3b82f6)", + "button-link-brand-brand-hover": "var(--interface-foreground-default-primary, #0f172a)", + "button-link-default-primary": "var(--interface-foreground-default-primary, #0f172a)", + "button-link-default-primary-hover": "var(--interface-foreground-brand-primary, #3b82f6)", + "button-link-default-secondary": "var(--interface-foreground-default-secondary, #334155)", + "button-link-default-secondary-hover": "var(--interface-foreground-default-tertiary, #64748b)", + "button-link-disabled-disabled": "var(--interface-foreground-disabled-disabled, #cbd5e1)", + "button-primary-background-default": "var(--interface-background-brand-primary, #3b82f6)", + "button-primary-background-disabled": "var(--interface-foreground-disabled-disabled, #cbd5e1)", + "button-primary-background-hover": "var(--interface-background-default-inverted, #0f172a)", + "button-primary-border-default": "var(--interface-border-default-none, #ffffff00)", + "button-primary-border-disabled": "var(--interface-border-disabled-disabled, #cbd5e1)", + "button-primary-border-hover": "var(--interface-border-default-none, #ffffff00)", + "button-primary-foreground-default": "var(--interface-foreground-brand-on-primary, #ffffff)", + "button-primary-foreground-disabled": "var(--interface-foreground-disabled-on-disabled, #94a3b8)", + "button-primary-foreground-hover": "var(--interface-foreground-default-inverted, #ffffff)", + "button-secondary-background-default": "var(--interface-background-default-primary, #ffffff)", + "button-secondary-background-disabled": "var(--interface-background-disabled-disabled, #e2e8f0)", + "button-secondary-background-hover": "var(--interface-background-default-primary-hover, #f8fafc)", + "button-secondary-border-default": "var(--interface-border-default-primary, #cbd5e1)", + "button-secondary-border-disabled": "var(--interface-border-disabled-disabled, #cbd5e1)", + "button-secondary-border-hover": "var(--interface-border-default-primary, #cbd5e1)", + "button-secondary-foreground-default": "var(--interface-foreground-default-primary, #0f172a)", + "button-secondary-foreground-disabled": "var(--interface-foreground-disabled-on-disabled, #94a3b8)", + "button-secondary-foreground-hover": "var(--interface-foreground-default-secondary, #334155)", + "button-social-background-default": "var(--interface-background-default-primary, #ffffff)", + "button-social-background-disabled": "var(--interface-background-disabled-disabled, #e2e8f0)", + "button-social-background-generic-provider": "var(--interface-background-default-inverted, #0f172a)", + "button-social-background-hover": "var(--interface-background-default-primary-hover, #f8fafc)", + "button-social-border-default": "var(--interface-border-default-primary, #cbd5e1)", + "button-social-border-disabled": "var(--interface-border-disabled-disabled, #cbd5e1)", + "button-social-border-generic-provider": "var(--interface-border-default-none, #ffffff00)", + "button-social-border-hover": "var(--interface-border-default-primary, #cbd5e1)", + "button-social-foreground-default": "var(--interface-foreground-default-primary, #0f172a)", + "button-social-foreground-disabled": "var(--interface-foreground-disabled-on-disabled, #94a3b8)", + "button-social-foreground-generic-provider": "var(--interface-foreground-default-inverted, #ffffff)", + "button-social-foreground-hover": "var(--interface-foreground-default-secondary, #334155)", + "checkbox-background-checked": "var(--interface-background-brand-primary, #3b82f6)", + "checkbox-background-default": "var(--interface-background-default-secondary, #f8fafc)", + "checkbox-border-checkbox-border-checked": "var(--interface-border-brand-brand, #3b82f6)", + "checkbox-border-checkbox-border-default": "var(--interface-border-default-primary, #cbd5e1)", + "checkbox-foreground-checked": "var(--interface-foreground-default-inverted, #ffffff)", + "checkbox-foreground-default": "var(--interface-foreground-default-primary, #0f172a)", + "form-background-default": "var(--interface-background-default-primary, #ffffff)", + "form-border-default": "var(--interface-border-default-primary, #cbd5e1)", + "input-background-default": "var(--interface-background-default-primary, #ffffff)", + "input-background-disabled": "var(--interface-background-disabled-disabled, #e2e8f0)", + "input-background-hover": "var(--interface-background-default-primary-hover, #f8fafc)", + "input-border-default": "var(--interface-border-default-primary, #cbd5e1)", + "input-border-disabled": "var(--interface-border-disabled-disabled, #cbd5e1)", + "input-border-focus": "var(--interface-border-brand-brand, #3b82f6)", + "input-border-hover": "var(--interface-border-default-primary, #cbd5e1)", + "input-foreground-disabled": "var(--interface-foreground-disabled-on-disabled, #94a3b8)", + "input-foreground-primary": "var(--interface-foreground-default-primary, #0f172a)", + "input-foreground-secondary": "var(--interface-foreground-default-secondary, #334155)", + "input-foreground-tertiary": "var(--interface-foreground-default-tertiary, #64748b)", + "interface-background-brand-primary": "var(--brand-500, #3b82f6)", + "interface-background-brand-primary-hover": "var(--ui-white, #ffffff)", + "interface-background-brand-secondary": "var(--brand-950, #172554)", + "interface-background-brand-secondary-hover": "var(--brand-900, #1e3a8a)", + "interface-background-default-inverted": "var(--ui-white, #ffffff)", + "interface-background-default-inverted-hover": "var(--ui-50, #f8fafc)", + "interface-background-default-none": "var(--ui-transparent, #ffffff00)", + "interface-background-default-primary": "var(--ui-900, #0f172a)", + "interface-background-default-primary-hover": "var(--ui-950, #020617)", + "interface-background-default-secondary": "var(--ui-950, #020617)", + "interface-background-default-secondary-hover": "var(--ui-800, #1e293b)", + "interface-background-default-tertiary": "var(--ui-800, #1e293b)", + "interface-background-default-tertiary-hover": "var(--ui-700, #334155)", + "interface-background-disabled-disabled": "var(--ui-700, #334155)", + "interface-background-validation-danger": "var(--ui-danger, #ef4444)", + "interface-background-validation-success": "var(--ui-success, #22c55e)", + "interface-background-validation-warning": "var(--ui-warning, #eab308)", + "interface-border-brand-brand": "var(--brand-500, #3b82f6)", + "interface-border-default-inverted": "var(--ui-300, #cbd5e1)", + "interface-border-default-none": "var(--ui-transparent, #ffffff00)", + "interface-border-default-primary": "var(--ui-700, #334155)", + "interface-border-disabled-disabled": "var(--ui-700, #334155)", + "interface-border-validation-danger": "var(--ui-danger, #ef4444)", + "interface-border-validation-success": "var(--ui-success, #22c55e)", + "interface-border-validation-warning": "var(--ui-warning, #eab308)", + "interface-foreground-brand-on-primary": "var(--ui-white, #ffffff)", + "interface-foreground-brand-on-secondary": "var(--brand-50, #eff6ff)", + "interface-foreground-brand-primary": "var(--brand-500, #3b82f6)", + "interface-foreground-brand-secondary": "var(--brand-950, #172554)", + "interface-foreground-default-inverted": "var(--ui-900, #0f172a)", + "interface-foreground-default-primary": "var(--ui-white, #ffffff)", + "interface-foreground-default-secondary": "var(--ui-200, #e2e8f0)", + "interface-foreground-default-tertiary": "var(--ui-400, #94a3b8)", + "interface-foreground-disabled-disabled": "var(--ui-700, #334155)", + "interface-foreground-disabled-on-disabled": "var(--ui-500, #64748b)", + "interface-foreground-validation-danger": "var(--ui-danger, #ef4444)", + "interface-foreground-validation-success": "var(--ui-success, #22c55e)", + "interface-foreground-validation-warning": "var(--ui-warning, #eab308)", + "ory-background-default": "var(--interface-background-default-primary, #ffffff)", + "ory-border-default": "var(--interface-border-default-primary, #cbd5e1)", + "ory-foreground-default": "var(--interface-foreground-default-primary, #0f172a)", + "radio-background-checked": "var(--interface-background-brand-primary, #3b82f6)", + "radio-background-default": "var(--interface-background-default-secondary, #f8fafc)", + "radio-border-checked": "var(--interface-border-brand-brand, #3b82f6)", + "radio-border-default": "var(--interface-border-default-primary, #cbd5e1)", + "radio-foreground-checked": "var(--interface-foreground-default-inverted, #ffffff)", + "radio-foreground-default": "var(--interface-foreground-default-primary, #0f172a)", + "toggle-background-checked": "var(--interface-background-brand-primary, #3b82f6)", + "toggle-background-default": "var(--interface-background-default-secondary, #f8fafc)", + "toggle-border-checked": "var(--interface-border-default-none, #ffffff00)", + "toggle-border-default": "var(--interface-border-default-primary, #cbd5e1)", + "toggle-foreground-checked": "var(--interface-foreground-brand-on-primary, #ffffff)", + "toggle-foreground-default": "var(--interface-foreground-brand-primary, #3b82f6)" + } + }, + "slate": { + "color": { + "ui-100": "#f1f5f9", + "ui-200": "#e2e8f0", + "ui-300": "#cbd5e1", + "ui-400": "#94a3b8", + "ui-50": "#f8fafc", + "ui-500": "#64748b", + "ui-600": "#475569", + "ui-700": "#334155", + "ui-800": "#1e293b", + "ui-900": "#0f172a", + "ui-950": "#020617", + "ui-black": "#000000", + "ui-danger": "#ef4444", + "ui-success": "#22c55e", + "ui-transparent": "#ffffff00", + "ui-warning": "#eab308", + "ui-white": "#ffffff" + } + }, + "gray": { + "color": { + "ui-100": "#f3f4f6", + "ui-200": "#e5e7eb", + "ui-300": "#d1d5db", + "ui-400": "#9ca3af", + "ui-50": "#f9fafb", + "ui-500": "#6b7280", + "ui-600": "#4b5563", + "ui-700": "#374151", + "ui-800": "#1f2937", + "ui-900": "#111827", + "ui-950": "#030712", + "ui-black": "#000000", + "ui-danger": "#ef4444", + "ui-success": "#22c55e", + "ui-transparent": "#ffffff00", + "ui-warning": "#eab308", + "ui-white": "#ffffff" + } + }, + "neutral": { + "color": { + "ui-100": "#f5f5f5", + "ui-200": "#e5e5e5", + "ui-300": "#d4d4d4", + "ui-400": "#a3a3a3", + "ui-50": "#fafafa", + "ui-500": "#737373", + "ui-600": "#525252", + "ui-700": "#404040", + "ui-800": "#262626", + "ui-900": "#171717", + "ui-950": "#0a0a0a", + "ui-black": "#000000", + "ui-danger": "#ef4444", + "ui-success": "#22c55e", + "ui-transparent": "#ffffff00", + "ui-warning": "#eab308", + "ui-white": "#ffffff" + } + }, + "stone": { + "color": { + "ui-100": "#f5f5f4", + "ui-200": "#e7e5e4", + "ui-300": "#d6d3d1", + "ui-400": "#a8a29e", + "ui-50": "#fafaf9", + "ui-500": "#78716c", + "ui-600": "#57534e", + "ui-700": "#44403c", + "ui-800": "#292524", + "ui-900": "#1c1917", + "ui-950": "#0c0a09", + "ui-black": "#000000", + "ui-danger": "#ef4444", + "ui-success": "#22c55e", + "ui-transparent": "#ffffff00", + "ui-warning": "#eab308", + "ui-white": "#ffffff" + } + }, + "blue": { + "color": { + "brand-100": "#dbeafe", + "brand-200": "#bfdbfe", + "brand-300": "#93c5fd", + "brand-400": "#60a5fa", + "brand-50": "#eff6ff", + "brand-500": "#3b82f6", + "brand-600": "#2563eb", + "brand-700": "#1d4ed8", + "brand-800": "#1e40af", + "brand-900": "#1e3a8a", + "brand-950": "#172554" + } + }, + "purple": { + "color": { + "brand-100": "#faf5ff", + "brand-200": "#f3e8ff", + "brand-300": "#d8b4fe", + "brand-400": "#c084fc", + "brand-50": "#faf5ff", + "brand-500": "#9333ea", + "brand-600": "#9333ea", + "brand-700": "#7e22ce", + "brand-800": "#6b21a8", + "brand-900": "#581c87", + "brand-950": "#3b0764" + } + }, + "lime": { + "color": { + "brand-100": "#ecfccb", + "brand-200": "#d9f99d", + "brand-300": "#bef264", + "brand-400": "#a3e635", + "brand-50": "#f7fee7", + "brand-500": "#84cc16", + "brand-600": "#65a30d", + "brand-700": "#4d7c0f", + "brand-800": "#3f6212", + "brand-900": "#365314", + "brand-950": "#1a2e05" } }, "borderRadius": { - "border-radius-buttons": "var(--border-radius-buttons, 0.25rem)", - "border-radius-forms": "var(--border-radius-forms, 0.25rem)", - "border-radius-general": "var(--border-radius-general, 0.25rem)", - "border-radius-branding": "0.5rem", - "border-radius-cards": "var(--border-radius-cards, 0.75rem)" + "default": { + "number": { + "buttons": "0.25rem", + "forms": "0.25rem", + "general": "0.25rem", + "branding": "0.5rem", + "cards": "0.75rem", + "identifier": "62.4375rem" + } + }, + "none": { + "number": { + "branding": "0rem", + "buttons": "0rem", + "cards": "0rem", + "forms": "0rem", + "general": "0rem", + "identifier": "0rem" + } + } } }