@cupra/ui-react 2.0.0-canary.242 → 2.0.0-canary.243
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +16 -9
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -244,15 +244,20 @@ If your TypeScript setup does not support bundler-based module resolution, use r
|
|
|
244
244
|
|
|
245
245
|
Wrap your React application with `ThemeProvider`.
|
|
246
246
|
|
|
247
|
-
The provider requires **three props**:
|
|
247
|
+
The provider requires **three required props plus one optional**:
|
|
248
248
|
|
|
249
|
-
| Prop
|
|
250
|
-
|
|
251
|
-
| `theme`
|
|
252
|
-
| `loadFonts`
|
|
253
|
-
| `loadStyles
|
|
249
|
+
| Prop | Type | Required | Description |
|
|
250
|
+
|--------------------|---------|----------|-------------------------------------------------------------------------------------------------------------------|
|
|
251
|
+
| `theme` | string | Yes | Visual theme identifier (e.g. cupra-diagonal) |
|
|
252
|
+
| `loadFonts` | boolean | Yes | Auto-load DS-UI font files |
|
|
253
|
+
| `loadStyles` | boolean | Yes | Auto-load `theme.css`, the stylesheet the `ui-kit` components require |
|
|
254
|
+
| `loadUnusedStyles` | boolean | No, defaults to `true` | Auto-load `unused-styles.css`, the theme's `--ds-` tokens that `ui-kit` doesn't consume internally, only needed if your own CSS reads raw tokens |
|
|
254
255
|
|
|
255
|
-
If `loadFonts` or `
|
|
256
|
+
If `loadFonts`, `loadStyles` or `loadUnusedStyles` are `false`, you must manually include the corresponding `<link>` tags.
|
|
257
|
+
|
|
258
|
+
**Performance note:** disable the automatic downloads and load the stylesheets manually, prioritizing
|
|
259
|
+
`theme.css` over `unused-styles.css`, unless your own CSS reads raw tokens directly, in which case load
|
|
260
|
+
both with the same priority.
|
|
256
261
|
|
|
257
262
|
### Option A — Manual CSS and font links
|
|
258
263
|
|
|
@@ -266,7 +271,9 @@ If `loadFonts` or `loadStyles` are `false`, you must manually include the corres
|
|
|
266
271
|
<>
|
|
267
272
|
<link rel="preload" as="font" type="font/woff2" href="https://ds-assets.cupra.com/fonts/[theme]/[font-file]" crossOrigin="anonymous" />
|
|
268
273
|
<link rel="stylesheet" href="https://ds-assets.cupra.com/[version]/styles/[theme]/theme.css" />
|
|
269
|
-
|
|
274
|
+
{/* Only needed if your own CSS reads raw --ds- tokens directly */}
|
|
275
|
+
<link rel="stylesheet" href="https://ds-assets.cupra.com/[version]/styles/[theme]/unused-styles.css" />
|
|
276
|
+
<ThemeProvider theme="[theme]" loadFonts={false} loadStyles={false} loadUnusedStyles={false}>
|
|
270
277
|
<Button variant="destructive" icon-name="filters-background">
|
|
271
278
|
Click me
|
|
272
279
|
</Button>
|
|
@@ -285,7 +292,7 @@ If `loadFonts` or `loadStyles` are `false`, you must manually include the corres
|
|
|
285
292
|
|
|
286
293
|
export function App() {
|
|
287
294
|
return (
|
|
288
|
-
<ThemeProvider theme="cupra-diagonal" loadFonts={true} loadStyles={true}>
|
|
295
|
+
<ThemeProvider theme="cupra-diagonal" loadFonts={true} loadStyles={true} loadUnusedStyles={true}>
|
|
289
296
|
<Button variant="primary">Button</Button>
|
|
290
297
|
</ThemeProvider>
|
|
291
298
|
);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cupra/ui-react",
|
|
3
|
-
"version": "2.0.0-canary.
|
|
3
|
+
"version": "2.0.0-canary.243",
|
|
4
4
|
"description": "React components library",
|
|
5
5
|
"author": "SEAT S.A.",
|
|
6
6
|
"license": "SEAT S.A. Library EULA 1.0",
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
}
|
|
51
51
|
],
|
|
52
52
|
"peerDependencies": {
|
|
53
|
-
"@cupra/ui-kit": "2.0.0-canary.
|
|
53
|
+
"@cupra/ui-kit": "2.0.0-canary.228",
|
|
54
54
|
"react": ">= 18.3.1 < 20",
|
|
55
55
|
"react-dom": ">= 18.3.1 < 20",
|
|
56
56
|
"typescript": ">=5.0.0"
|
|
@@ -74,7 +74,7 @@
|
|
|
74
74
|
"storybook": "^10.6.0",
|
|
75
75
|
"typescript": "^5.9.3",
|
|
76
76
|
"vite": "^8.2.2",
|
|
77
|
-
"@cupra/ui-kit": "2.0.0-canary.
|
|
77
|
+
"@cupra/ui-kit": "2.0.0-canary.228"
|
|
78
78
|
},
|
|
79
79
|
"scripts": {
|
|
80
80
|
"build": "rm -rf dist && pnpm --filter @cupra/ui-kit build:react && tsc --declaration --emitDeclarationOnly && BUILD_FORMAT=esm vite build --emptyOutDir false && BUILD_FORMAT=cjs vite build --emptyOutDir false",
|