@shopware/unocss-design-tokens-layer 0.0.1

package/README.md

@@ -0,0 +1,39 @@
+# @shopware/unocss-design-tokens-layer
+
+Nuxt layer that provides the shared Shopware Frontends UnoCSS setup, design tokens, reset stylesheet, and runtime support for resolving dynamic utility classes.
+
+It is intended to be composed with layers such as `@shopware/cms-base-layer`, while allowing projects to keep design tokens separate from CMS functionality.
+
+## Usage
+
+```ts
+export default defineNuxtConfig({
+  extends: [
+    "@shopware/composables/nuxt-layer",
+    "@shopware/cms-base-layer",
+    "@shopware/unocss-design-tokens-layer",
+  ],
+  modules: ["@shopware/nuxt-module", "@unocss/nuxt"],
+  css: ["@unocss/reset/tailwind-compat.css"],
+  unocss: {
+    nuxtLayers: true,
+  },
+});
+```
+
+## Customization
+
+Extend the generated base Uno config in your project:
+
+```ts
+import { mergeConfigs } from "@unocss/core";
+import baseConfig from "./.nuxt/uno.config.mjs";
+
+export default mergeConfigs([baseConfig, {
+  theme: {
+    colors: {
+      "brand-primary": "#123456",
+    },
+  },
+}]);
+```

package/app/.gitkeep

@@ -0,0 +1 @@
+

package/app/plugins/unocss-runtime.client.ts

@@ -0,0 +1,17 @@
+import initUnocssRuntime from "@unocss/runtime";
+import { defineNuxtPlugin, useAppConfig } from "#imports";
+import config from "../../uno.config";
+
+// Resolves UnoCSS utility classes at runtime via DOM MutationObserver.
+// Needed when CMS content contains dynamic classes not known at build time,
+// since extracting all CMS-used classes from the backend during build is impractical.
+// Trade-off: may cause layout shift as styles are applied after hydration.
+// Can be disabled via app.config.ts: { unocssRuntime: false }
+// When disabled, CMS classes unknown at build time won't be resolved —
+// add them to the UnoCSS safelist in uno.config.ts to ensure they are generated.
+export default defineNuxtPlugin(() => {
+  const appConfig = useAppConfig();
+  if (!appConfig.unocssRuntime) return;
+
+  initUnocssRuntime({ defaults: config });
+});

package/index.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="@nuxt/schema" />
+
+export * from "./.nuxt/imports";
+
+declare module "nuxt/schema" {
+  interface AppConfig extends CmsBaseLayerAppConfig {}
+  interface AppConfigInput extends CmsBaseLayerAppConfig {}
+}
+
+declare module "@nuxt/schema" {
+  interface AppConfig extends CmsBaseLayerAppConfig {}
+  interface AppConfigInput extends CmsBaseLayerAppConfig {}
+}

package/nuxt.config.ts

@@ -0,0 +1,15 @@
+import type { NuxtConfig } from "@nuxt/schema";
+import { defineNuxtConfig } from "nuxt/config";
+
+const config: NuxtConfig = defineNuxtConfig({
+  telemetry: {
+    enabled: false,
+  },
+  modules: ["@unocss/nuxt"],
+  css: ["@unocss/reset/tailwind-compat.css"],
+  unocss: {
+    nuxtLayers: true,
+  },
+});
+
+export default config;

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@shopware/unocss-design-tokens-layer",
+  "version": "0.0.1",
+  "description": "Reusable Nuxt Layer for Shopware design tokens and UnoCSS configuration",
+  "author": "Shopware",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/shopware/frontends.git"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "homepage": "https://frontends.shopware.com/",
+  "keywords": ["Shopware", "UnoCSS", "Nuxt", "Layer", "Design Tokens"],
+  "bugs": {
+    "url": "https://github.com/shopware/frontends/issues"
+  },
+  "license": "MIT",
+  "type": "module",
+  "main": "./nuxt.config.ts",
+  "files": ["app", "nuxt.config.ts", "index.d.ts", "uno.config.ts"],
+  "scripts": {
+    "lint": "biome check .",
+    "lint:fix": "biome check . --write && pnpm run typecheck",
+    "typecheck": "pnpm nuxt prepare && tsgo --noEmit"
+  },
+  "dependencies": {
+    "@unocss/nuxt": "66.6.0",
+    "@unocss/core": "66.6.0",
+    "@unocss/preset-wind3": "66.6.0",
+    "@unocss/runtime": "66.6.0",
+    "unocss": "66.6.0"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "1.8.3",
+    "@nuxt/schema": "4.2.2",
+    "@typescript/native-preview": "7.0.0-dev.20260205.1",
+    "nuxt": "4.2.2",
+    "tsconfig": "workspace:*",
+    "typescript": "5.9.3",
+    "unbuild": "2.0.0"
+  }
+}

package/uno.config.ts

@@ -0,0 +1,93 @@
+import type { ConfigBase } from "@unocss/core";
+import { presetIcons, presetWind3 } from "unocss";
+
+const templateConfig: ConfigBase = {
+  theme: {
+    colors: {
+      "brand-primary": "#543B95",
+      "surface-surface": "#FFFFFF",
+      "outline-outline": "#79747E",
+      "outline-outline-variant": "#CAC4D0",
+      "outline-outline-primary": "#543B95",
+      "outline-outline-disabled": "#9893A6",
+      "outline-outline-focus": "#1722F9",
+      "surface-on-surface": "#1D1B20",
+      "states-info": "#0288D1",
+      "states-info-hover": "#0275B4",
+      "states-info-pressed": "#0275B4",
+      "states-on-info": "#FFFFFF",
+      "states-info-container": "#BBE7FF",
+      "states-on-info-container": "#013957",
+      "surface-surface-variant": "#FBF6FF",
+      "states-success": "#15B31C",
+      "states-success-hover": "#108C16",
+      "surface-on-surface-variant": "#696470",
+      "surface-surface-disabled": "#E8E8E8",
+      "states-success-pressed": "#108C16",
+      "surface-on-surface-disabled": "#9893A6",
+      "states-on-success": "#FFFFFF",
+      "surface-surface-primary": "#D0BCFF",
+      "surface-on-surface-primary": "#3A276A",
+      "surface-inverse-surface": "#322F35",
+      "states-success-container": "#C9FFCB",
+      "states-on-success-container": "#09480C",
+      "surface-inverse-on-surface": "#FFFFFF",
+      "states-warning": "#F57C00",
+      "states-warning-hover": "#C26200",
+      "surface-surface-container-lowest": "#FFFFFF",
+      "states-warning-pressed": "#C26200",
+      "surface-surface-container-low": "#F7F2FA",
+      "surface-surface-container": "#F3EDF7",
+      "states-on-warning": "#FFFFFF",
+      "states-warning-container": "#FFE1C2",
+      "surface-surface-container-high": "#ECE6F0",
+      "states-on-warning-container": "#874400",
+      "surface-surface-container-highest": "#E6E0E9",
+      "surface-background": "#FFFFFF",
+      "surface-on-background": "#1D1B20",
+      "states-error": "#D12D24",
+      "states-error-hover": "#AB251D",
+      "states-error-pressed": "#AB251D",
+      "states-on-error": "#FFFFFF",
+      "states-error-container": "#F9DEDC",
+      "states-on-error-container": "#852221",
+      "brand-primary-hover": "#45317A",
+      "brand-primary-pressed": "#45317A",
+      "brand-on-primary": "#FFFFFF",
+      "brand-secondary": "#E1D5FF",
+      "brand-secondary-hover": "#D0BCFC",
+      "brand-secondary-pressed": "#D0BCFC",
+      "brand-on-secondary": "#3A276A",
+      "brand-tertiary": "#F1F1F1",
+      "brand-tertiary-hover": "#E3E3E3",
+      "brand-tertiary-pressed": "#E3E3E3",
+      "brand-on-tertiary": "#1D1B20",
+      "fixed-fixed-on-image": "#FFFFFF",
+      "other-sale": "#D12D24",
+      "other-shadow": "#000000",
+      "overlay-dark-highest": "rgba(0, 0, 0, 0.75)",
+      "overlay-dark-high": "rgba(0, 0, 0, 0.5)",
+      "overlay-dark": "rgba(0, 0, 0, 0.30000001192092896)",
+      "overlay-dark-low": "rgba(0, 0, 0, 0.11999999731779099)",
+      "overlay-dark-lowest": "rgba(0, 0, 0, 0.07999999821186066)",
+      "overlay-light-highest": "rgba(255, 255, 255, 0.75)",
+      "overlay-light-high": "rgba(255, 255, 255, 0.5)",
+      "overlay-light": "rgba(255, 255, 255, 0.25)",
+      "overlay-light-low": "rgba(255, 255, 255, 0.11999999731779099)",
+      "overlay-light-lowest": "rgba(255, 255, 255, 0.07999999821186066)",
+    },
+  },
+  presets: [
+    presetWind3(),
+    presetIcons({
+      collections: {
+        carbon: () =>
+          import("@iconify-json/carbon/icons.json", {
+            with: { type: "json" },
+          }).then((i) => i.default),
+      },
+    }),
+  ],
+};
+
+export default templateConfig;