Skip to content

Commit a708dd0

Browse files
ory-botory-bot
committed
feat: scope default theme CSS to .ory-elements
GitOrigin-RevId: ce5b6bbcc8ab91e6cb006c3dfe470cab4c496190
1 parent e150fd8 commit a708dd0

20 files changed

Lines changed: 124 additions & 51 deletions

File tree

‎eslint.config.mjs‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -122,27 +122,31 @@ const config = tseslint.config([
122122
languageOptions: {
123123
parserOptions: {
124124
ecmaFeatures: {
125-
jsx: true
126-
}
127-
}
125+
jsx: true,
126+
},
127+
},
128128
},
129129
plugins: {
130130
"react-hooks": reactHooks,
131-
'better-tailwindcss': eslintPluginBetterTailwindcss,
131+
"better-tailwindcss": eslintPluginBetterTailwindcss,
132132
},
133133
rules: {
134134
...reactHooks.configs.recommended.rules,
135135
// enable all recommended rules to report an error
136136
...eslintPluginBetterTailwindcss.configs["recommended-error"].rules,
137137
"better-tailwindcss/enforce-consistent-line-wrapping": "off",
138+
"better-tailwindcss/no-unregistered-classes": [
139+
"error",
140+
{ ignore: ["ory-elements"] },
141+
],
138142
},
139143
settings: {
140144
"better-tailwindcss": {
141145
// // tailwindcss 4: the path to the entry file of the css based tailwind config (eg: `src/global.css`)
142-
"entryPoint": "packages/elements-react/src/theme/default/global.css",
146+
entryPoint: "packages/elements-react/src/theme/default/global.css",
143147
// tailwindcss 3: the path to the tailwind config file (eg: `tailwind.config.js`)
144148
// "tailwindConfig": "/Users/jonas.hungershausen/Repositories/cloud/elements/packages/elements-react/tailwind.config.ts"
145-
}
149+
},
146150
},
147151
},
148152
{

‎examples/nextjs-app-router/postcss.config.mjs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
const config = {
33
plugins: {
44
"@tailwindcss/postcss": {},
5-
}
5+
},
66
}
77

88
export default config

‎package-lock.json‎

Lines changed: 36 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/elements-react/api-report/elements-react-theme.api.json‎

Lines changed: 31 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -645,13 +645,26 @@
645645
"excerptTokens": [
646646
{
647647
"kind": "Content",
648-
"text": "declare function DefaultCard({ children }: "
648+
"text": "declare function DefaultCard({ children, className, ...rest }: "
649649
},
650650
{
651651
"kind": "Reference",
652652
"text": "OryCardProps",
653653
"canonicalReference": "@ory/elements-react!~OryCardRootProps:type"
654654
},
655+
{
656+
"kind": "Content",
657+
"text": " & "
658+
},
659+
{
660+
"kind": "Reference",
661+
"text": "ComponentPropsWithoutRef",
662+
"canonicalReference": "@types/react!React.ComponentPropsWithoutRef:type"
663+
},
664+
{
665+
"kind": "Content",
666+
"text": "<\"div\">"
667+
},
655668
{
656669
"kind": "Content",
657670
"text": "): "
@@ -668,17 +681,17 @@
668681
],
669682
"fileUrlPath": "dist/theme/default/index.d.ts",
670683
"returnTypeTokenRange": {
671-
"startIndex": 3,
672-
"endIndex": 4
684+
"startIndex": 6,
685+
"endIndex": 7
673686
},
674687
"releaseTag": "Public",
675688
"overloadIndex": 1,
676689
"parameters": [
677690
{
678-
"parameterName": "{ children }",
691+
"parameterName": "{ children, className, ...rest }",
679692
"parameterTypeTokenRange": {
680693
"startIndex": 1,
681-
"endIndex": 2
694+
"endIndex": 5
682695
},
683696
"isOptional": false
684697
}
@@ -1562,7 +1575,7 @@
15621575
},
15631576
{
15641577
"kind": "Content",
1565-
"text": ": flowOverrideComponents, }: "
1578+
"text": ": flowOverrideComponents, className, ...rest }: "
15661579
},
15671580
{
15681581
"kind": "Reference",
@@ -1592,7 +1605,7 @@
15921605
"overloadIndex": 1,
15931606
"parameters": [
15941607
{
1595-
"parameterName": "{ flow, config, children, components: flowOverrideComponents, }",
1608+
"parameterName": "{ flow, config, children, components: flowOverrideComponents, className, ...rest }",
15961609
"parameterTypeTokenRange": {
15971610
"startIndex": 3,
15981611
"endIndex": 4
@@ -1649,7 +1662,16 @@
16491662
},
16501663
{
16511664
"kind": "Content",
1652-
"text": ";\n}"
1665+
"text": ";\n} & "
1666+
},
1667+
{
1668+
"kind": "Reference",
1669+
"text": "ComponentPropsWithoutRef",
1670+
"canonicalReference": "@types/react!React.ComponentPropsWithoutRef:type"
1671+
},
1672+
{
1673+
"kind": "Content",
1674+
"text": "<\"div\">"
16531675
},
16541676
{
16551677
"kind": "Content",
@@ -1661,7 +1683,7 @@
16611683
"name": "SettingsFlowContextProps",
16621684
"typeTokenRange": {
16631685
"startIndex": 1,
1664-
"endIndex": 10
1686+
"endIndex": 12
16651687
}
16661688
},
16671689
{

‎packages/elements-react/api-report/elements-react-theme.api.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ export namespace DefaultButtonSocial {
5959
// Warning: (ae-forgotten-export) The symbol "OryCardRootProps" needs to be exported by the entry point index.d.ts
6060
//
6161
// @public
62-
export function DefaultCard({ children }: OryCardRootProps): react_jsx_runtime.JSX.Element;
62+
export function DefaultCard({ children, className, ...rest }: OryCardRootProps & ComponentPropsWithoutRef<"div">): react_jsx_runtime.JSX.Element;
6363

6464
// Warning: (ae-forgotten-export) The symbol "OryCardContentProps" needs to be exported by the entry point index.d.ts
6565
//
@@ -147,15 +147,15 @@ export type RecoveryFlowContextProps = {
147147
export function Registration({ flow, children, components: flowOverrideComponents, config, }: RegistrationFlowContextProps): react_jsx_runtime.JSX.Element;
148148

149149
// @public
150-
export function Settings({ flow, config, children, components: flowOverrideComponents, }: SettingsFlowContextProps): react_jsx_runtime.JSX.Element;
150+
export function Settings({ flow, config, children, components: flowOverrideComponents, className, ...rest }: SettingsFlowContextProps): react_jsx_runtime.JSX.Element;
151151

152152
// @public
153153
export type SettingsFlowContextProps = {
154154
flow: SettingsFlow;
155155
components?: OryFlowComponentOverrides;
156156
config: OryClientConfiguration;
157157
children?: React.ReactNode;
158-
};
158+
} & ComponentPropsWithoutRef<"div">;
159159

160160
// @public
161161
export function Verification({ flow, config, children, components: flowOverrideComponents, }: VerificationFlowContextProps): react_jsx_runtime.JSX.Element;

‎packages/elements-react/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,7 @@
6969
"esbuild-plugin-svgr": "3.1.1",
7070
"eslint-plugin-react": "7.37.5",
7171
"postcss": "8.4.47",
72+
"postcss-scope": "^1.7.4",
7273
"tailwindcss-animate": "1.0.7",
7374
"tsup": "8.4.0",
7475
"typedoc": "0.28.5"

‎packages/elements-react/postcss.config.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,8 @@
33

44
module.exports = {
55
// eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-require-imports
6-
plugins: [require("@tailwindcss/postcss")()],
6+
plugins: [
7+
require("@tailwindcss/postcss")(),
8+
require("postcss-scope")(".ory-elements"),
9+
],
710
}

‎packages/elements-react/src/tests/jest/setup.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,5 @@
1+
// Copyright © 2025 Ory Corp
2+
// SPDX-License-Identifier: Apache-2.0
3+
14
import "@testing-library/jest-dom"
25
// import "@testing-library/jest-dom/jest-globals"

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

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ import { DefaultCardFooter } from "./footer"
88
import { DefaultCardHeader } from "./header"
99
import { DefaultCardLogo } from "./logo"
1010
import { DefaultCurrentIdentifierButton } from "./current-identifier-button"
11+
import { ComponentPropsWithoutRef } from "react"
12+
import { cn } from "../../utils/cn"
1113

1214
/**
1315
* The DefaultCard component is a styled container that serves as the main card layout for Ory Elements.
@@ -17,12 +19,18 @@ import { DefaultCurrentIdentifierButton } from "./current-identifier-button"
1719
* @group Components
1820
* @category Default Components
1921
*/
20-
export function DefaultCard({ children }: OryCardProps) {
22+
export function DefaultCard({
23+
children,
24+
className,
25+
...rest
26+
}: OryCardProps & ComponentPropsWithoutRef<"div">) {
2127
return (
22-
<div className="flex w-full flex-1 items-start justify-center font-sans-default sm:w-[480px] sm:max-w-[480px] sm:items-center">
23-
<div className="relative grid w-full grid-cols-1 gap-8 border-b border-form-border-default bg-form-background-default px-8 py-12 sm:rounded-cards sm:border sm:px-12 sm:py-14">
24-
{children}
25-
<Badge />
28+
<div className={cn("ory-elements", className)} {...rest}>
29+
<div className="flex w-full flex-1 items-start justify-center font-sans-default sm:w-[480px] sm:max-w-[480px] sm:items-center">
30+
<div className="relative grid w-full grid-cols-1 gap-8 border-b border-form-border-default bg-form-background-default px-8 py-12 sm:rounded-cards sm:border sm:px-12 sm:py-14">
31+
{children}
32+
<Badge />
33+
</div>
2634
</div>
2735
</div>
2836
)

‎packages/elements-react/src/theme/default/flows/settings.tsx‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,9 @@ import {
1010
OryProvider,
1111
OrySettingsCard,
1212
} from "@ory/elements-react"
13+
import { ComponentPropsWithoutRef } from "react"
1314
import { getOryComponents } from "../components"
15+
import { cn } from "../utils/cn"
1416

1517
/**
1618
* Props for the Settings component.
@@ -41,7 +43,7 @@ export type SettingsFlowContextProps = {
4143
* If not provided, the default OrySettingsCard will be rendered.
4244
*/
4345
children?: React.ReactNode
44-
}
46+
} & ComponentPropsWithoutRef<"div">
4547

4648
/**
4749
* The `Settings` component is used to render the settings flow in Ory Elements.
@@ -57,6 +59,8 @@ export function Settings({
5759
config,
5860
children,
5961
components: flowOverrideComponents,
62+
className,
63+
...rest
6064
}: SettingsFlowContextProps) {
6165
const components = getOryComponents(flowOverrideComponents)
6266

@@ -68,10 +72,12 @@ export function Settings({
6872
components={components}
6973
>
7074
{children ?? (
71-
<>
72-
<OryPageHeader />
73-
<OrySettingsCard />
74-
</>
75+
<div className={cn("ory-elements", className)} {...rest}>
76+
<div className="flex flex-col items-center justify-start gap-8 pb-12 font-sans-default">
77+
<OryPageHeader />
78+
<OrySettingsCard />
79+
</div>
80+
</div>
7581
)}
7682
</OryProvider>
7783
)

0 commit comments

Comments
 (0)