Europa Design System

Az EU2K Europa Design System komponens könyvtára. Web component-ek (custom element-ek) – sima HTML tagként használhatók, build nélkül, natív ES modulként.

npm

A csomag a monorepóban van (europa-design-system/), külön repó nem kell. Innen publikálod npmre:

cd europa-design-system
npm login
npm publish

Verzió bump deploy előtt:

npm version patch   # vagy minor / major
npm publish

Telepítés más projektben

npm install europa-design-system

HTML-ben (ha a bundler/node_modules útvonalat megoldod):

import 'europa-design-system';

Vagy GitHubról közvetlenül, commit push nélkül is működik fejlesztéskor:

npm install github:im-theslimeguy/EU2K-Hub#main:europa-design-system

CDN (opcionális, npm nélkül)

<script type="module"
  src="https://cdn.jsdelivr.net/gh/im-theslimeguy/EU2K-Hub@main/europa-design-system/src/index.js">
</script>

Tesztelés (lokál)

A serve a D:\EU2K-Hub gyökérből fut, a playground itt érhető el:

http://localhost:3000/europa-design-system/

Témák / tokenek

A színeket nem a komponens tartalmazza – a weboldal dönti el a témát, pontosan úgy, mint a hubban. A téma- és token-rendszert a hubból emeltük át:

• src/theme/theme-manager.js – betölti és váltja a témát (window.EU2KTheme), a theme/<mode>/<theme>.css fájlt linkeli be (nature / desert / love, dark / light).
• src/theme/icon-colorizer.js – az SVG <img>-eket inline SVG-vé alakítja és currentColor-ra állítja, hogy a tokenek színezhessék őket.
• theme/dark/*.css, theme/light/*.css – a tényleges token-készletek (CSS változók).

A weboldalon csak be kell húzni a theme-manager.js-t (és igény szerint az icon-colorizer.js-t), a komponensek pedig a globális CSS változókból olvasnak – a tokenek a Shadow DOM-ba is öröklődnek.

<edr-switch>

<!-- a téma-rendszer betöltése (a weboldal teszi) -->
<script src=".../src/theme/theme-manager.js"></script>

<!-- a komponens regisztrálása -->
<script type="module" src=".../src/index.js"></script>

<edr-switch></edr-switch>                    <!-- primary, KI -->
<edr-switch checked></edr-switch>            <!-- primary, BE -->
<edr-switch secondary></edr-switch>          <!-- secondary, KI -->
<edr-switch secondary checked></edr-switch>  <!-- secondary, BE -->
<edr-switch disabled></edr-switch>           <!-- letiltva -->

Attribútumok

| Attribútum | Leírás | | ----------- | ------------------------------------------------- | | checked | Be/ki állapot (kattintásra vált). | | secondary | Secondary variáns (alapból primary). | | disabled | Letiltja a kapcsolót. |

Esemény

document.querySelector('edr-switch').addEventListener('change', (e) => {
  console.log(e.detail.checked); // true / false
});

Színek (tokenek)

| | Primary BE | Primary KI | Secondary BE | Secondary KI | | ---------- | ---------------------------- | ----------------------------------- | ------------------------------ | ------------------------------------- | | Háttér | --background-button-primary| --background-button-primary-hover | --background-button-secondary| --background-button-secondary-hover | | Border | --border-default-primary | --border-default-primary-hover | --border-default-secondary | --border-default-secondary-hover | | Knob | --icon-button-primary | --border-default-primary | --icon-button-secondary | --border-default-secondary-hover | | Ikon | --icon-default-brand | --border-default-primary-hover | --icon-default-brand-2 | --border-default-secondary |

A BE/KI ikon a tényleges src/assets/check.svg és src/assets/x.svg fájlokból töltődik be, és currentColor-ra színeződik (a colorizer logikájával), így a fenti ikon-tokenek hajtják meg. Az SVG fájlokat szerkesztve a switch is követi.

<edr-dropdown>

Az opciókat sima <option> gyerekekként add meg:

<edr-dropdown placeholder="Válassz...">
  <option value="1">Hello World</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</edr-dropdown>

<edr-dropdown secondary>
  <option>Egy</option>
  <option>Kettő</option>
</edr-dropdown>

| Attribútum | Leírás | | ------------- | --------------------------------------------------- | | secondary | Secondary variáns (alapból primary). | | disabled | Letiltja (opacity 0.5 + pointer-events: none). | | placeholder | Kezdeti szöveg, ha nincs kiválasztva semmi. | | open | (reflektált) nyitott állapot. |

Esemény: change → detail: { value, label, index }.

Viselkedés: kattintásra lenyílik, a chevron 180°-ot fordul (le→fel). Az opciók a trigger alatt, összekapcsolt dobozokként jelennek meg (trigger: felül kerekített / nyitva alul szögletes; középső opciók szögletesek; utolsó: alul kerekített). A kiválasztott opció félkövér. Kívülre kattintva / Escape-re zár.

Színek (tokenek)

| | Primary | Secondary | | ------- | ---------------------------- | ------------------------------- | | Háttér | --background-default-brand | --background-default-brand-2 | | Border | --border-default-primary | --border-default-secondary | | Szöveg | --text-default-default | --text-default-teritary | | Chevron | --icon-default-brand | --icon-default-brand-2 |

A Figma exportban a legördülő panel külön (kékes) felület-színeket használt, de a kérésnek megfelelően az opciók a triggerrel azonos variáns-színt kapnak (összekapcsolt oszlop), nem külön panelt.

Mappaszerkezet

europa-design-system/
├── index.html                       # playground / demó
├── package.json
├── README.md
├── theme/                           # token-készletek (a hubból)
│   ├── dark/{nature,desert,love}.css
│   └── light/{nature,desert,love}.css
└── src/
    ├── index.js                     # belépési pont (regisztrálja az edr-switch-et)
    ├── assets/
    │   ├── check.svg                # BE ikon
    │   └── x.svg                    # KI ikon
    ├── theme/
    │   ├── theme-manager.js         # téma kezelés (a hubból)
    │   └── icon-colorizer.js        # SVG színezés (a hubból)
    └── components/
        ├── Switch/
        │   └── edr-switch.js        # a <edr-switch> web component
        └── Dropdown/
            └── edr-dropdown.js      # a <edr-dropdown> web component