@shopware/unocss-design-tokens-layer 1.0.0 → 1.0.2
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 +25 -10
- package/app/plugins/unocss-runtime.client.ts +10 -4
- package/nuxt.config.ts +1 -2
- package/package.json +21 -14
- package/theme.ts +75 -0
- package/uno.config.ts +3 -75
- package/uno.runtime.config.ts +21 -0
package/README.md
CHANGED
|
@@ -29,26 +29,41 @@ Extend the generated base Uno config in your project:
|
|
|
29
29
|
import { mergeConfigs } from "@unocss/core";
|
|
30
30
|
import baseConfig from "./.nuxt/uno.config.mjs";
|
|
31
31
|
|
|
32
|
-
export default mergeConfigs([
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
32
|
+
export default mergeConfigs([
|
|
33
|
+
baseConfig,
|
|
34
|
+
{
|
|
35
|
+
theme: {
|
|
36
|
+
colors: {
|
|
37
|
+
"brand-primary": "#123456",
|
|
38
|
+
},
|
|
36
39
|
},
|
|
37
40
|
},
|
|
38
|
-
|
|
41
|
+
]);
|
|
39
42
|
```
|
|
43
|
+
|
|
40
44
|
<!-- AUTO GENERATED CHANGELOG -->
|
|
41
45
|
|
|
42
46
|
## Changelog
|
|
43
47
|
|
|
44
48
|
Full changelog for stable version is available [here](https://github.com/shopware/frontends/blob/main/packages/unocss-design-tokens-layer/CHANGELOG.md)
|
|
45
49
|
|
|
46
|
-
### Latest changes: 1.0.
|
|
50
|
+
### Latest changes: 1.0.2
|
|
51
|
+
|
|
52
|
+
### Patch Changes
|
|
47
53
|
|
|
48
|
-
|
|
54
|
+
- [#2632](https://github.com/shopware/frontends/pull/2632) [`9274aa8`](https://github.com/shopware/frontends/commit/9274aa86b8b4c6741fb45c595e239e6f733284db) Thanks [@mkucmus](https://github.com/mkucmus)! - Load `presetWind3` from `@unocss/preset-wind3` instead of the `unocss` barrel in
|
|
55
|
+
`uno.runtime.config.ts`.
|
|
49
56
|
|
|
50
|
-
|
|
57
|
+
That file is imported by a client plugin, and the barrel statically re-exports
|
|
58
|
+
`@unocss/transformer-attributify-jsx`. That transformer depends on `oxc-parser`, whose
|
|
59
|
+
browser entry imports `@oxc-parser/binding-wasm32-wasi`. The binding is not present in a
|
|
60
|
+
production install, so the client bundle failed to build:
|
|
51
61
|
|
|
52
|
-
|
|
62
|
+
```
|
|
63
|
+
[vite]: Rolldown failed to resolve import "@oxc-parser/binding-wasm32-wasi"
|
|
64
|
+
from "oxc-parser/src-js/wasm.js"
|
|
65
|
+
```
|
|
53
66
|
|
|
54
|
-
|
|
67
|
+
The parser never runs in the browser. Importing the preset directly keeps it out of the
|
|
68
|
+
client graph and also stops a 1.4 MB `.wasm` file and its worker from being emitted into
|
|
69
|
+
the public bundle.
|
|
@@ -1,6 +1,4 @@
|
|
|
1
|
-
import initUnocssRuntime from "@unocss/runtime";
|
|
2
1
|
import { defineNuxtPlugin, useAppConfig } from "#imports";
|
|
3
|
-
import config from "../../uno.config";
|
|
4
2
|
|
|
5
3
|
// Resolves UnoCSS utility classes at runtime via DOM MutationObserver.
|
|
6
4
|
// Needed when CMS content contains dynamic classes not known at build time,
|
|
@@ -9,9 +7,17 @@ import config from "../../uno.config";
|
|
|
9
7
|
// Can be disabled via app.config.ts: { unocssRuntime: false }
|
|
10
8
|
// When disabled, CMS classes unknown at build time won't be resolved —
|
|
11
9
|
// add them to the UnoCSS safelist in uno.config.ts to ensure they are generated.
|
|
12
|
-
export default defineNuxtPlugin(() => {
|
|
10
|
+
export default defineNuxtPlugin(async () => {
|
|
13
11
|
const appConfig = useAppConfig();
|
|
14
12
|
if (!appConfig.unocssRuntime) return;
|
|
15
13
|
|
|
16
|
-
|
|
14
|
+
const [runtime, config] = await Promise.allSettled([
|
|
15
|
+
import("@unocss/runtime"),
|
|
16
|
+
// Theme-only config — full uno.config pulls @iconify-json/carbon into the client.
|
|
17
|
+
import("@shopware/unocss-design-tokens-layer/uno.runtime.config"),
|
|
18
|
+
]);
|
|
19
|
+
|
|
20
|
+
if (runtime.status === "rejected" || config.status === "rejected") return;
|
|
21
|
+
|
|
22
|
+
runtime.value.default({ defaults: config.value.default });
|
|
17
23
|
});
|
package/nuxt.config.ts
CHANGED
package/package.json
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@shopware/unocss-design-tokens-layer",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"description": "Reusable Nuxt Layer for Shopware design tokens and UnoCSS configuration",
|
|
5
5
|
"author": "Shopware",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
8
8
|
"url": "git+https://github.com/shopware/frontends.git"
|
|
9
9
|
},
|
|
10
|
-
"homepage": "https://
|
|
10
|
+
"homepage": "https://developer.shopware.com/frontends/",
|
|
11
11
|
"keywords": [
|
|
12
12
|
"Shopware",
|
|
13
13
|
"UnoCSS",
|
|
@@ -21,31 +21,38 @@
|
|
|
21
21
|
"license": "MIT",
|
|
22
22
|
"type": "module",
|
|
23
23
|
"main": "./nuxt.config.ts",
|
|
24
|
+
"exports": {
|
|
25
|
+
".": "./nuxt.config.ts",
|
|
26
|
+
"./uno.config": "./uno.config.ts",
|
|
27
|
+
"./uno.runtime.config": "./uno.runtime.config.ts"
|
|
28
|
+
},
|
|
24
29
|
"files": [
|
|
25
30
|
"app",
|
|
26
31
|
"nuxt.config.ts",
|
|
27
32
|
"index.d.ts",
|
|
28
|
-
"
|
|
33
|
+
"theme.ts",
|
|
34
|
+
"uno.config.ts",
|
|
35
|
+
"uno.runtime.config.ts"
|
|
29
36
|
],
|
|
30
37
|
"dependencies": {
|
|
31
|
-
"@
|
|
32
|
-
"@unocss/
|
|
33
|
-
"@unocss/
|
|
34
|
-
"@unocss/
|
|
35
|
-
"unocss": "66.
|
|
38
|
+
"@iconify-json/carbon": "1.2.25",
|
|
39
|
+
"@unocss/nuxt": "66.10.0",
|
|
40
|
+
"@unocss/core": "66.7.5",
|
|
41
|
+
"@unocss/preset-wind3": "66.7.5",
|
|
42
|
+
"@unocss/runtime": "66.7.5",
|
|
43
|
+
"unocss": "66.7.5"
|
|
36
44
|
},
|
|
37
45
|
"devDependencies": {
|
|
38
|
-
"@
|
|
39
|
-
"@nuxt/schema": "4.4.6",
|
|
46
|
+
"@nuxt/schema": "4.5.2",
|
|
40
47
|
"@typescript/native-preview": "7.0.0-dev.20260205.1",
|
|
41
|
-
"nuxt": "4.
|
|
48
|
+
"nuxt": "4.5.2",
|
|
42
49
|
"typescript": "5.9.3",
|
|
43
|
-
"unbuild": "
|
|
50
|
+
"unbuild": "3.6.1",
|
|
44
51
|
"tsconfig": "0.0.0"
|
|
45
52
|
},
|
|
46
53
|
"scripts": {
|
|
47
|
-
"lint": "
|
|
48
|
-
"lint:fix": "
|
|
54
|
+
"lint": "oxlint . && oxfmt --check .",
|
|
55
|
+
"lint:fix": "oxlint --fix . && oxfmt --write . && pnpm run typecheck",
|
|
49
56
|
"typecheck": "pnpm nuxt prepare && tsgo --noEmit"
|
|
50
57
|
}
|
|
51
58
|
}
|
package/theme.ts
ADDED
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
export const designTokenTheme = {
|
|
2
|
+
colors: {
|
|
3
|
+
"brand-primary": "#543B95",
|
|
4
|
+
"surface-surface": "#FFFFFF",
|
|
5
|
+
"outline-outline": "#79747E",
|
|
6
|
+
"outline-outline-variant": "#CAC4D0",
|
|
7
|
+
"outline-outline-primary": "#543B95",
|
|
8
|
+
"outline-outline-disabled": "#9893A6",
|
|
9
|
+
"outline-outline-focus": "#1722F9",
|
|
10
|
+
"surface-on-surface": "#1D1B20",
|
|
11
|
+
"states-info": "#0288D1",
|
|
12
|
+
"states-info-hover": "#0275B4",
|
|
13
|
+
"states-info-pressed": "#0275B4",
|
|
14
|
+
"states-on-info": "#FFFFFF",
|
|
15
|
+
"states-info-container": "#BBE7FF",
|
|
16
|
+
"states-on-info-container": "#013957",
|
|
17
|
+
"surface-surface-variant": "#FBF6FF",
|
|
18
|
+
"states-success": "#15B31C",
|
|
19
|
+
"states-success-hover": "#108C16",
|
|
20
|
+
"surface-on-surface-variant": "#696470",
|
|
21
|
+
"surface-surface-disabled": "#E8E8E8",
|
|
22
|
+
"states-success-pressed": "#108C16",
|
|
23
|
+
"surface-on-surface-disabled": "#9893A6",
|
|
24
|
+
"states-on-success": "#FFFFFF",
|
|
25
|
+
"surface-surface-primary": "#D0BCFF",
|
|
26
|
+
"surface-on-surface-primary": "#3A276A",
|
|
27
|
+
"surface-inverse-surface": "#322F35",
|
|
28
|
+
"states-success-container": "#C9FFCB",
|
|
29
|
+
"states-on-success-container": "#09480C",
|
|
30
|
+
"surface-inverse-on-surface": "#FFFFFF",
|
|
31
|
+
"states-warning": "#F57C00",
|
|
32
|
+
"states-warning-hover": "#C26200",
|
|
33
|
+
"surface-surface-container-lowest": "#FFFFFF",
|
|
34
|
+
"states-warning-pressed": "#C26200",
|
|
35
|
+
"surface-surface-container-low": "#F7F2FA",
|
|
36
|
+
"surface-surface-container": "#F3EDF7",
|
|
37
|
+
"states-on-warning": "#FFFFFF",
|
|
38
|
+
"states-warning-container": "#FFE1C2",
|
|
39
|
+
"surface-surface-container-high": "#ECE6F0",
|
|
40
|
+
"states-on-warning-container": "#874400",
|
|
41
|
+
"surface-surface-container-highest": "#E6E0E9",
|
|
42
|
+
"surface-background": "#FFFFFF",
|
|
43
|
+
"surface-on-background": "#1D1B20",
|
|
44
|
+
"states-error": "#D12D24",
|
|
45
|
+
"states-error-hover": "#AB251D",
|
|
46
|
+
"states-error-pressed": "#AB251D",
|
|
47
|
+
"states-on-error": "#FFFFFF",
|
|
48
|
+
"states-error-container": "#F9DEDC",
|
|
49
|
+
"states-on-error-container": "#852221",
|
|
50
|
+
"brand-primary-hover": "#45317A",
|
|
51
|
+
"brand-primary-pressed": "#45317A",
|
|
52
|
+
"brand-on-primary": "#FFFFFF",
|
|
53
|
+
"brand-secondary": "#E1D5FF",
|
|
54
|
+
"brand-secondary-hover": "#D0BCFC",
|
|
55
|
+
"brand-secondary-pressed": "#D0BCFC",
|
|
56
|
+
"brand-on-secondary": "#3A276A",
|
|
57
|
+
"brand-tertiary": "#F1F1F1",
|
|
58
|
+
"brand-tertiary-hover": "#E3E3E3",
|
|
59
|
+
"brand-tertiary-pressed": "#E3E3E3",
|
|
60
|
+
"brand-on-tertiary": "#1D1B20",
|
|
61
|
+
"fixed-fixed-on-image": "#FFFFFF",
|
|
62
|
+
"other-sale": "#D12D24",
|
|
63
|
+
"other-shadow": "#000000",
|
|
64
|
+
"overlay-dark-highest": "rgba(0, 0, 0, 0.75)",
|
|
65
|
+
"overlay-dark-high": "rgba(0, 0, 0, 0.5)",
|
|
66
|
+
"overlay-dark": "rgba(0, 0, 0, 0.30000001192092896)",
|
|
67
|
+
"overlay-dark-low": "rgba(0, 0, 0, 0.11999999731779099)",
|
|
68
|
+
"overlay-dark-lowest": "rgba(0, 0, 0, 0.07999999821186066)",
|
|
69
|
+
"overlay-light-highest": "rgba(255, 255, 255, 0.75)",
|
|
70
|
+
"overlay-light-high": "rgba(255, 255, 255, 0.5)",
|
|
71
|
+
"overlay-light": "rgba(255, 255, 255, 0.25)",
|
|
72
|
+
"overlay-light-low": "rgba(255, 255, 255, 0.11999999731779099)",
|
|
73
|
+
"overlay-light-lowest": "rgba(255, 255, 255, 0.07999999821186066)",
|
|
74
|
+
},
|
|
75
|
+
};
|
package/uno.config.ts
CHANGED
|
@@ -1,82 +1,10 @@
|
|
|
1
1
|
import type { ConfigBase } from "@unocss/core";
|
|
2
2
|
import { presetIcons, presetWind3 } from "unocss";
|
|
3
3
|
|
|
4
|
+
import { designTokenTheme } from "./theme";
|
|
5
|
+
|
|
4
6
|
const templateConfig: ConfigBase = {
|
|
5
|
-
theme:
|
|
6
|
-
colors: {
|
|
7
|
-
"brand-primary": "#543B95",
|
|
8
|
-
"surface-surface": "#FFFFFF",
|
|
9
|
-
"outline-outline": "#79747E",
|
|
10
|
-
"outline-outline-variant": "#CAC4D0",
|
|
11
|
-
"outline-outline-primary": "#543B95",
|
|
12
|
-
"outline-outline-disabled": "#9893A6",
|
|
13
|
-
"outline-outline-focus": "#1722F9",
|
|
14
|
-
"surface-on-surface": "#1D1B20",
|
|
15
|
-
"states-info": "#0288D1",
|
|
16
|
-
"states-info-hover": "#0275B4",
|
|
17
|
-
"states-info-pressed": "#0275B4",
|
|
18
|
-
"states-on-info": "#FFFFFF",
|
|
19
|
-
"states-info-container": "#BBE7FF",
|
|
20
|
-
"states-on-info-container": "#013957",
|
|
21
|
-
"surface-surface-variant": "#FBF6FF",
|
|
22
|
-
"states-success": "#15B31C",
|
|
23
|
-
"states-success-hover": "#108C16",
|
|
24
|
-
"surface-on-surface-variant": "#696470",
|
|
25
|
-
"surface-surface-disabled": "#E8E8E8",
|
|
26
|
-
"states-success-pressed": "#108C16",
|
|
27
|
-
"surface-on-surface-disabled": "#9893A6",
|
|
28
|
-
"states-on-success": "#FFFFFF",
|
|
29
|
-
"surface-surface-primary": "#D0BCFF",
|
|
30
|
-
"surface-on-surface-primary": "#3A276A",
|
|
31
|
-
"surface-inverse-surface": "#322F35",
|
|
32
|
-
"states-success-container": "#C9FFCB",
|
|
33
|
-
"states-on-success-container": "#09480C",
|
|
34
|
-
"surface-inverse-on-surface": "#FFFFFF",
|
|
35
|
-
"states-warning": "#F57C00",
|
|
36
|
-
"states-warning-hover": "#C26200",
|
|
37
|
-
"surface-surface-container-lowest": "#FFFFFF",
|
|
38
|
-
"states-warning-pressed": "#C26200",
|
|
39
|
-
"surface-surface-container-low": "#F7F2FA",
|
|
40
|
-
"surface-surface-container": "#F3EDF7",
|
|
41
|
-
"states-on-warning": "#FFFFFF",
|
|
42
|
-
"states-warning-container": "#FFE1C2",
|
|
43
|
-
"surface-surface-container-high": "#ECE6F0",
|
|
44
|
-
"states-on-warning-container": "#874400",
|
|
45
|
-
"surface-surface-container-highest": "#E6E0E9",
|
|
46
|
-
"surface-background": "#FFFFFF",
|
|
47
|
-
"surface-on-background": "#1D1B20",
|
|
48
|
-
"states-error": "#D12D24",
|
|
49
|
-
"states-error-hover": "#AB251D",
|
|
50
|
-
"states-error-pressed": "#AB251D",
|
|
51
|
-
"states-on-error": "#FFFFFF",
|
|
52
|
-
"states-error-container": "#F9DEDC",
|
|
53
|
-
"states-on-error-container": "#852221",
|
|
54
|
-
"brand-primary-hover": "#45317A",
|
|
55
|
-
"brand-primary-pressed": "#45317A",
|
|
56
|
-
"brand-on-primary": "#FFFFFF",
|
|
57
|
-
"brand-secondary": "#E1D5FF",
|
|
58
|
-
"brand-secondary-hover": "#D0BCFC",
|
|
59
|
-
"brand-secondary-pressed": "#D0BCFC",
|
|
60
|
-
"brand-on-secondary": "#3A276A",
|
|
61
|
-
"brand-tertiary": "#F1F1F1",
|
|
62
|
-
"brand-tertiary-hover": "#E3E3E3",
|
|
63
|
-
"brand-tertiary-pressed": "#E3E3E3",
|
|
64
|
-
"brand-on-tertiary": "#1D1B20",
|
|
65
|
-
"fixed-fixed-on-image": "#FFFFFF",
|
|
66
|
-
"other-sale": "#D12D24",
|
|
67
|
-
"other-shadow": "#000000",
|
|
68
|
-
"overlay-dark-highest": "rgba(0, 0, 0, 0.75)",
|
|
69
|
-
"overlay-dark-high": "rgba(0, 0, 0, 0.5)",
|
|
70
|
-
"overlay-dark": "rgba(0, 0, 0, 0.30000001192092896)",
|
|
71
|
-
"overlay-dark-low": "rgba(0, 0, 0, 0.11999999731779099)",
|
|
72
|
-
"overlay-dark-lowest": "rgba(0, 0, 0, 0.07999999821186066)",
|
|
73
|
-
"overlay-light-highest": "rgba(255, 255, 255, 0.75)",
|
|
74
|
-
"overlay-light-high": "rgba(255, 255, 255, 0.5)",
|
|
75
|
-
"overlay-light": "rgba(255, 255, 255, 0.25)",
|
|
76
|
-
"overlay-light-low": "rgba(255, 255, 255, 0.11999999731779099)",
|
|
77
|
-
"overlay-light-lowest": "rgba(255, 255, 255, 0.07999999821186066)",
|
|
78
|
-
},
|
|
79
|
-
},
|
|
7
|
+
theme: designTokenTheme,
|
|
80
8
|
presets: [
|
|
81
9
|
presetWind3(),
|
|
82
10
|
presetIcons({
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import type { ConfigBase } from "@unocss/core";
|
|
2
|
+
// Import the preset from its own package, not the `unocss` barrel. This config is
|
|
3
|
+
// loaded by a client plugin, and the barrel statically re-exports
|
|
4
|
+
// `@unocss/transformer-attributify-jsx`, which pulls `oxc-parser` and its wasm
|
|
5
|
+
// binding into the client bundle.
|
|
6
|
+
import { presetWind3 } from "@unocss/preset-wind3";
|
|
7
|
+
|
|
8
|
+
import { designTokenTheme } from "./theme";
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* Slim config for @unocss/runtime on the client.
|
|
12
|
+
* Omits presetIcons / icon collection loaders so the full @iconify-json/carbon
|
|
13
|
+
* JSON (~1.1 MB) is not shipped as a client chunk. Icon utilities must come from
|
|
14
|
+
* the build-time UnoCSS scan or safelist.
|
|
15
|
+
*/
|
|
16
|
+
const runtimeConfig: ConfigBase = {
|
|
17
|
+
theme: designTokenTheme,
|
|
18
|
+
presets: [presetWind3()],
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
export default runtimeConfig;
|