Hyvä Theme erstellen für Magento 2.4.8-p3

app/design/frontend/Mironsoft/default/
├── etc/
├── media/
├── web/
│   ├── css/
│   └── tailwind/
├── Magento_Theme/
│   └── templates/
├── registration.php
└── theme.xml

< ?php

declare(strict_types=1);

use Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(
    ComponentRegistrar::THEME,
    'frontend/Mironsoft/default',
    __DIR__
);

< ?xml version="1.0"?>
< theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    < title>Mironsoft Default
    < parent>Hyva/default
    < media>
        < preview_image>media/preview.png< /preview_image>
    < /media>
< /theme>

bin/cli cp -r vendor/hyva-themes/magento2-default-theme-csp/web/tailwind app/design/frontend/Mironsoft/default/web/

bin/cli mkdir -p app/design/frontend/Mironsoft/default/web/css

bin/cli mkdir -p app/design/frontend/Mironsoft/default/media

bin/npm --prefix app/design/frontend/Mironsoft/default/web/tailwind install

bin/npm --prefix app/design/frontend/Mironsoft/default/web/tailwind run build

bin/npm --prefix app/design/frontend/Mironsoft/default/web/tailwind run watch

{
  "notice": [
    "This is a complementary config file for Tailwind v4 and is not a replacement for the Tailwind v3 config file.",
    "For usage, see the docs: https://docs.hyva.io/hyva-themes/working-with-tailwindcss/using-hyva-modules/"
  ],
  "tailwind": {
    "include": [
      {
        "comment": "Include parent Hyva default theme",
        "src": "vendor/hyva-themes/magento2-default-theme-csp"
      }
    ],
    "exclude": []
  },
  "tokens": {
    "values": {
      "color": {
        "primary": {
          "lighter": "oklch(52% 0.2 265)",
          "DEFAULT": "oklch(46% 0.2 265)",
          "darker": "oklch(28% 0.2 265)"
        },
        "secondary": {
          "lighter": "oklch(72% 0.2 150)",
          "DEFAULT": "oklch(53% 0.15 150)",
          "darker": "oklch(39% 0.1 153)"
        },
        "on": {
          "primary": "#fff",
          "secondary": "#fff"
        }
      },
      "form": {
        "radius": "var(--radius-lg)",
        "stroke": "var(--color-slate-400)",
        "active-color": "var(--color-primary)"
      }
    }
  }
}

/**
 * Mironsoft Default Theme
 *
 * Main entry file for theme CSS, processed by Tailwind CSS v4.
 */

@import "@hyva-themes/hyva-modules/css";
@import "tailwindcss" source(none);
@source "../../**/*.phtml";
@source "../../**/*.xml";

/* Custom styles */
@import "./base";
@import "./components";
@import "./theme";
@import "./utilities";

/* Import generated styles for Hyvä Compatible Modules and Design Tokens */
@import "./generated/hyva-source.css";
@import "./generated/hyva-tokens.css";

@theme {
    /* Background and foreground colors */
    --color-bg: var(--color-slate-50);
    --color-fg: var(--color-slate-950);
    --color-fg-secondary: var(--color-slate-600);
    --color-surface: var(--color-white);
}

{
  "name": "@mironsoft/default-theme",
  "version": "1.0.0",
  "description": "Mironsoft Default Hyvä Theme with Tailwind CSS v4",
  "type": "module",
  "dependencies": {
    "@hyva-themes/hyva-modules": "^1.2.4",
    "@tailwindcss/cli": "^4.1.17",
    "tailwindcss": "^4.1.17"
  },
  "scripts": {
    "start": "npm run watch",
    "generate": "npx hyva-sources && npx hyva-tokens",
    "prewatch": "npm run generate",
    "watch": "npx tailwindcss -i tailwind-source.css -o ../css/styles.css --watch",
    "browser-sync": "npx browser-sync start --config ./browser-sync.config.cjs",
    "prebuild": "npm run generate",
    "build": "npx tailwindcss -i tailwind-source.css -o ../css/styles.css --minify"
  },
  "engine-strict": true,
  "engines": {
    "node": ">=20.0.0"
  },
  "browserslist": [
    "> 0.5% and not dead"
  ],
  "author": "Mironsoft",
  "license": "proprietary",
  "private": true
}

app/design/frontend/Mironsoft/default/
├── etc/
│   └── view.xml (optional)
├── media/
│   └── preview.png
├── web/
│   ├── css/
│   │   └── styles.css (wird generiert)
│   └── tailwind/
│       ├── base/
│       │   ├── index.css
│       │   ├── preflight.css
│       │   └── print.css
│       ├── components/
│       │   ├── index.css
│       │   └── ... (weitere CSS-Dateien)
│       ├── generated/
│       │   ├── hyva-source.css
│       │   └── hyva-tokens.css
│       ├── theme/
│       │   ├── index.css
│       │   └── ... (weitere CSS-Dateien)
│       ├── utilities/
│       │   ├── index.css
│       │   └── ... (weitere CSS-Dateien)
│       ├── .nvmrc
│       ├── browser-sync.config.cjs
│       ├── hyva.config.json
│       ├── package.json
│       └── tailwind-source.css
├── registration.php
└── theme.xml

bin/magento setup:upgrade
bin/magento setup:di:compile
bin/magento setup:static-content:deploy -f de_DE en_US
bin/cache-clean