@shopware/unocss-design-tokens-layer 1.0.0 → 1.0.1

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.
Files changed (7) hide show
  1. package/README.md +13 -11
  2. package/app/plugins/unocss-runtime.client.ts +10 -4
  3. package/nuxt.config.ts +1 -2
  4. package/package.json +21 -14
  5. package/theme.ts +75 -0
  6. package/uno.config.ts +3 -75
  7. package/uno.runtime.config.ts +17 -0
package/README.md CHANGED
@@ -29,26 +29,28 @@ 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([baseConfig, {
33
- theme: {
34
- colors: {
35
- "brand-primary": "#123456",
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.0
47
-
48
- ### Major Changes
50
+ ### Latest changes: 1.0.1
49
51
 
50
- - [#2433](https://github.com/shopware/frontends/pull/2433) [`5255cd5`](https://github.com/shopware/frontends/commit/5255cd5c09bed33ae18e05ac35a6f22810ca668d) Thanks [@patzick](https://github.com/patzick)! - Package release
52
+ ### Patch Changes
51
53
 
52
- ### Minor Changes
54
+ - [#2596](https://github.com/shopware/frontends/pull/2596) [`6572aa8`](https://github.com/shopware/frontends/commit/6572aa84431e1f4a34d6cf04e549037692d638a6) Thanks [@patzick](https://github.com/patzick)! - Reduce Rolldown/Vite build noise: scope Nuxt global components, keep the three.js async chunk warning intentional, avoid shipping full carbon icon JSON via UnoCSS runtime, and bump @vueuse to 14.4.0.
53
55
 
54
- - [#2406](https://github.com/shopware/frontends/pull/2406) [`df93461`](https://github.com/shopware/frontends/commit/df93461434cb79ec9d722cdbd42a37a9af07fb03) Thanks [@mdanilowicz](https://github.com/mdanilowicz)! - Publish the Nuxt layer that provides shared UnoCSS presets, Shopware design tokens, and the UnoCSS runtime plugin for dynamic CMS utility classes.
56
+ - [#2543](https://github.com/shopware/frontends/pull/2543) [`7cdb81f`](https://github.com/shopware/frontends/commit/7cdb81f40dc5194432560752718048c730857ddf) Thanks [@patzick](https://github.com/patzick)! - Export the shared UnoCSS config and lazy-load the optional runtime so layered templates can merge the package config directly while keeping runtime generation disabled unless requested.
package/app/plugins/unocss-runtime.client.ts CHANGED
@@ -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
- initUnocssRuntime({ defaults: config });
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
@@ -1,7 +1,6 @@
1
- import type { NuxtConfig } from "@nuxt/schema";
2
1
  import { defineNuxtConfig } from "nuxt/config";
3
2
 
4
- const config: NuxtConfig = defineNuxtConfig({
3
+ const config: ReturnType<typeof defineNuxtConfig> = defineNuxtConfig({
5
4
  telemetry: {
6
5
  enabled: false,
7
6
  },
package/package.json CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
2
  "name": "@shopware/unocss-design-tokens-layer",
3
- "version": "1.0.0",
3
+ "version": "1.0.1",
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://frontends.shopware.com/",
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
- "uno.config.ts"
33
+ "theme.ts",
34
+ "uno.config.ts",
35
+ "uno.runtime.config.ts"
29
36
  ],
30
37
  "dependencies": {
31
- "@unocss/nuxt": "66.6.0",
32
- "@unocss/core": "66.6.0",
33
- "@unocss/preset-wind3": "66.6.0",
34
- "@unocss/runtime": "66.6.0",
35
- "unocss": "66.6.0"
38
+ "@iconify-json/carbon": "1.2.24",
39
+ "@unocss/nuxt": "66.7.5",
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
- "@biomejs/biome": "1.8.3",
39
- "@nuxt/schema": "4.4.6",
46
+ "@nuxt/schema": "4.4.8",
40
47
  "@typescript/native-preview": "7.0.0-dev.20260205.1",
41
- "nuxt": "4.4.6",
48
+ "nuxt": "4.4.8",
42
49
  "typescript": "5.9.3",
43
- "unbuild": "2.0.0",
50
+ "unbuild": "3.6.1",
44
51
  "tsconfig": "0.0.0"
45
52
  },
46
53
  "scripts": {
47
- "lint": "biome check .",
48
- "lint:fix": "biome check . --write && pnpm run typecheck",
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({
package/uno.runtime.config.ts ADDED
@@ -0,0 +1,17 @@
1
+ import type { ConfigBase } from "@unocss/core";
2
+ import { presetWind3 } from "unocss";
3
+
4
+ import { designTokenTheme } from "./theme";
5
+
6
+ /**
7
+ * Slim config for @unocss/runtime on the client.
8
+ * Omits presetIcons / icon collection loaders so the full @iconify-json/carbon
9
+ * JSON (~1.1 MB) is not shipped as a client chunk. Icon utilities must come from
10
+ * the build-time UnoCSS scan or safelist.
11
+ */
12
+ const runtimeConfig: ConfigBase = {
13
+ theme: designTokenTheme,
14
+ presets: [presetWind3()],
15
+ };
16
+
17
+ export default runtimeConfig;