@shopware/unocss-design-tokens-layer 0.0.1 → 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 (8) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +22 -5
  3. package/app/plugins/unocss-runtime.client.ts +10 -4
  4. package/nuxt.config.ts +1 -2
  5. package/package.json +37 -22
  6. package/theme.ts +75 -0
  7. package/uno.config.ts +3 -75
  8. package/uno.runtime.config.ts +17 -0
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2022-2023 Shopware
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md CHANGED
@@ -29,11 +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
+
44
+ <!-- AUTO GENERATED CHANGELOG -->
45
+
46
+ ## Changelog
47
+
48
+ Full changelog for stable version is available [here](https://github.com/shopware/frontends/blob/main/packages/unocss-design-tokens-layer/CHANGELOG.md)
49
+
50
+ ### Latest changes: 1.0.1
51
+
52
+ ### Patch Changes
53
+
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.
55
+
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,43 +1,58 @@
1
1
  {
2
2
  "name": "@shopware/unocss-design-tokens-layer",
3
- "version": "0.0.1",
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
- "publishConfig": {
11
- "access": "public"
12
- },
13
- "homepage": "https://frontends.shopware.com/",
14
- "keywords": ["Shopware", "UnoCSS", "Nuxt", "Layer", "Design Tokens"],
10
+ "homepage": "https://developer.shopware.com/frontends/",
11
+ "keywords": [
12
+ "Shopware",
13
+ "UnoCSS",
14
+ "Nuxt",
15
+ "Layer",
16
+ "Design Tokens"
17
+ ],
15
18
  "bugs": {
16
19
  "url": "https://github.com/shopware/frontends/issues"
17
20
  },
18
21
  "license": "MIT",
19
22
  "type": "module",
20
23
  "main": "./nuxt.config.ts",
21
- "files": ["app", "nuxt.config.ts", "index.d.ts", "uno.config.ts"],
22
- "scripts": {
23
- "lint": "biome check .",
24
- "lint:fix": "biome check . --write && pnpm run typecheck",
25
- "typecheck": "pnpm nuxt prepare && tsgo --noEmit"
24
+ "exports": {
25
+ ".": "./nuxt.config.ts",
26
+ "./uno.config": "./uno.config.ts",
27
+ "./uno.runtime.config": "./uno.runtime.config.ts"
26
28
  },
29
+ "files": [
30
+ "app",
31
+ "nuxt.config.ts",
32
+ "index.d.ts",
33
+ "theme.ts",
34
+ "uno.config.ts",
35
+ "uno.runtime.config.ts"
36
+ ],
27
37
  "dependencies": {
28
- "@unocss/nuxt": "66.6.0",
29
- "@unocss/core": "66.6.0",
30
- "@unocss/preset-wind3": "66.6.0",
31
- "@unocss/runtime": "66.6.0",
32
- "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"
33
44
  },
34
45
  "devDependencies": {
35
- "@biomejs/biome": "1.8.3",
36
- "@nuxt/schema": "4.2.2",
46
+ "@nuxt/schema": "4.4.8",
37
47
  "@typescript/native-preview": "7.0.0-dev.20260205.1",
38
- "nuxt": "4.2.2",
39
- "tsconfig": "workspace:*",
48
+ "nuxt": "4.4.8",
40
49
  "typescript": "5.9.3",
41
- "unbuild": "2.0.0"
50
+ "unbuild": "3.6.1",
51
+ "tsconfig": "0.0.0"
52
+ },
53
+ "scripts": {
54
+ "lint": "oxlint . && oxfmt --check .",
55
+ "lint:fix": "oxlint --fix . && oxfmt --write . && pnpm run typecheck",
56
+ "typecheck": "pnpm nuxt prepare && tsgo --noEmit"
42
57
  }
43
- }
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;