Nagłówki — tagi HTML (kontekst .resetcss + .customResetCssHeadings)

h1 — Lorem ipsum dolor sit amet @h1FontSize × @headersSize · default: 24px

h2 — Lorem ipsum dolor sit amet @h2FontSize × @headersSize · default: 22px

h3 — Lorem ipsum dolor sit amet @h3FontSize × @headersSize · default: 20px

h4 — Lorem ipsum dolor sit amet @h4FontSize × @headersSize · default: 19px

h5 — Lorem ipsum dolor sit amet @h5FontSize × @headersSize · default: 18px

h6 — Lorem ipsum dolor sit amet @h6FontSize × @headersSize · default: 17px

Nagłówki — klasy .h1–.h6 (sam rozmiar, bez komponentu)

Lorem ipsum dolor sit amet @h1FontSize · default: 24px

Lorem ipsum dolor sit amet @h2FontSize · default: 22px

Lorem ipsum dolor sit amet @h3FontSize · default: 20px

Lorem ipsum dolor sit amet @h4FontSize · default: 19px

Lorem ipsum dolor sit amet @h5FontSize · default: 18px

Lorem ipsum dolor sit amet @h6FontSize · default: 17px

Nagłówki — komponent .header (semibold + margin-bottom)

header_h2 @h2FontSize · @hxFontWeight

header_h3 @h3FontSize · @hxFontWeight

header_h4 @h4FontSize · @hxFontWeight

header_h5 @h5FontSize · @hxFontWeight

header_h6 @h6FontSize · @hxFontWeight

header_underline linia dekoracyjna pod nagłówkiem

header_highlight kolor primary na fragmencie tekstu

Długi akapit — flow tekstu, line-height, spacing

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Link w tekście — kolor @linkColorPrimary, hover ciemniejszy.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Pogrubiony fragment, kursywa, semibold.

Trzeci akapit z podkreśleniem i przekreśleniem. Ut labore et dolore magna aliqua enim ad minim veniam nostrud exercitation laboris.

Paragrafy — skala @fontSizeInPx* (@baseFontSize = 16px anchor)

p_xl — Lorem ipsum dolor sit amet consectetur. @fontSizeInPxXl · default: 20px

p_l — Lorem ipsum dolor sit amet consectetur. @fontSizeInPxL · default: 18px

p M (domyślny) — Lorem ipsum dolor sit amet consectetur. @fontSizeInPxM · default: 16px

p_s — Lorem ipsum dolor sit amet consectetur. @fontSizeInPxS · default: 14px

p_xs — Lorem ipsum dolor sit amet consectetur. @fontSizeInPxXS · default: 12px

p_no-margin — Lorem ipsum dolor sit amet. (brak dolnego marginesu)

Listy — komponent .list Shopera (@listItemColorNeutral · @listItemFontSizeInPxS)

Listy — surowe HTML ul / ol w kontekście .resetcss

• Element listy nieuporządkowanej
• Element listy nieuporządkowanej
• Element z zagnieżdżoną listą
  • Zagnieżdżony element 1
  • Zagnieżdżony element 2
• Element listy nieuporządkowanej

1. Pierwszy element listy numerowanej
2. Drugi element
3. Trzeci element z zagnieżdżeniem
   1. Zagnieżdżony 1
   2. Zagnieżdżony 2

Linki — @linkColor* (@linkColorPrimary · @linkColorRegular)

link (primary)   link_secondary   link_regular   link_no-underline   link_secondary link_no-underline   link_disabled

Grubość tekstu — @fontWeight*

font_normal — The quick brown fox @fontWeightNormal · 400

font_medium — The quick brown fox @fontWeightMedium · 500

font_semibold — The quick brown fox @fontWeightSemibold · 600

font_bold — The quick brown fox @fontWeightBold · 700

font_extrabold — The quick brown fox @fontWeightExtrabold · 800

Rozmiar tekstu — font_size-*

font_size-l @fontSizeInPxL · default: 18px

font_size-m @fontSizeInPxM · default: 16px

font_size-s @fontSizeInPxS · default: 14px

font_size-xs @fontSizeInPxXS · default: 12px

Styl, dekoracja, transformacja

font_italic   font_underline   font_line-through   text_uppercase

Wyrównanie tekstu

align_left — Lorem ipsum dolor sit amet consectetur adipiscing.

align_center — Lorem ipsum dolor sit amet consectetur adipiscing.

align_right — Lorem ipsum dolor sit amet consectetur adipiscing.

Overline i helper

overline — KATEGORIA PRODUKTÓW
overline_s — mniejszy label sekcji
helper — tekst pomocniczy (secondary color, mniejszy rozmiar)

Kolory tekstu — @*Colors skala

color_main   color_secondary   color_tertiary

primary-700   primary-500   primary-300   primary-100 @primaryColor

secondary-700   secondary-500   secondary-300   secondary-100 @secondaryColor

neutral-700   neutral-500   neutral-300   neutral-100 @neutralColor

success-700   error-700   warning-700

Przyciski — warianty (@btnBgColor* · @btnColor* · @btnBorderRadius)

btn_primary  btn_secondary  btn_outline  btn_ghost  btn_special

Przyciski — rozmiary (@btnPaddingTop/Right L/M/S/XS)

L  M (domyślny)  S  XS

Przyciski — stany

disabled

Tagi — @tagBorderRadius · @tagFontSizeInPx

tag  tag_secondary (pill)  tag_tertiary  tag_minimal  tag_l  tag_interactive

Tagi — semantyczne

success  info  error  notice

Palety kolorow — CSS custom properties (:root) i LESS

CSS: var(--primaryColors500)  |  LESS: @primaryColors500  |  ★ = baza palety (zmien tu, reszta sie generuje automatycznie)

Neutral — @neutralColor (domyslnie #8c98a8) · --neutralColor

Primary — @primaryColor (domyslnie #464fe5) · --primaryColor

Secondary — @secondaryColor (domyslnie #d6302d) · --secondaryColor

Globalne zmienne kolorow — :root

Zmiana tych zmiennych wplywa globalnie na wyglad sklepu niezaleznie od palet. LESS: @globalFontColor, @globalBodyBackgroundColor itd.

Kolory semantyczne — tylko LESS (brak CSS custom property w :root)

Success / warning / error nie sa eksportowane do :root jako CSS variables — dostepne wylacznie przez LESS lub klasy komponentow Shopera.

success  @successColor · domyslnie #10b970 · tag_success, color_success-700

warning  @warningColor · domyslnie #ffc107 · color_warning-700

error  @errorColor · domyslnie #ea4640 · tag_error, color_error-700

Przyklad uzycia w LESS: background-color: @successColor; lub color: @successColors700;

Separator poziomy — @separatorColor

Separator pionowy — separator-horizontal (inline między elementami)

Element lewy Element środkowy Element prawy

Box — @globalBorderRadius · @globalBorderColor

Ceny — @priceColor · @priceFontSize

199,00 zł price_l

99,00 zł price_m · @priceFontSize = @fontSizeInPxM

Wskaźnik (badge koszyka) — @indicatorBgColorPrimary (@secondaryColor) · @indicatorBgColorSecondary (@primaryColors500)

Koszyk primary   Koszyk secondary indicator_static = bez position:absolute

Paginacja — @paginationIconNextColor (@primaryColors500) · @paginationIconPrevColor (@neutralColors700)

Gwiazdki ocen — @starFilledColor (@primaryColor) · @starEmptyColor (@neutralColors200)

Gwiazdki w Shoper renderowane przez web component product-rating z SVG. Zmienne do przetestowania w kontekście strony produktu lub listingu.

@starFilledColor: @primaryColor — wypełniona gwiazdka
@starEmptyColor: @neutralColors200 — pusta gwiazdka
@starHoverColor: @primaryColor — gwiazdka hover (formularz opinii)

Natywne web komponenty Shopera — headless (brak domyslnych styli, wymagaja klas CSS)

Wszystkie komponenty h-* sa "headless" — nie maja wlasnych styli. Wyglad definiuja klasy CSS Shopera (np. .accordion, .tabs) lub wlasne. Klikalne przyklady ponizej dzialaja na zywo.

h-accordion — rozwijane sekcje

Klasy: .accordion · .accordion__toggler · .accordion__toggler-icon · LESS: @accordionTogglerBorderColor · @accordionTogglerBgColor

Sekcja 1 — otwarta domyslnie

Tresc sekcji 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod magna vel lectus tincidunt.

Sekcja 2 — zamknieta domyslnie Sekcja 3

h-tabs — zakladki nawigacyjne

Klasy: .tabs · .tabs__tab (selected = aktywna) · LESS: @tabsBorderColor · @tabsActiveBorderColor · @tabsActiveFontColor

Zakladka pierwsza Zakladka druga Zakladka trzecia

Tresc zakladki pierwszej. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Tresc zakladki drugiej. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Tresc zakladki trzeciej. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

h-show-more — ogranicz liste z przyciskiem "pokaz wiecej"

Atrybut count = ile elementow widocznych poczatkowo · mobile-only = aktywny tylko na mobile

Element 1 — widoczny

Element 2 — widoczny

Element 3 — widoczny

Element 4 — ukryty poczatkowo

Element 5 — ukryty poczatkowo

Pokaz wiecej

h-toggle — prosta widocznosc tresci (bez animacji)

h-toggle-btn action="expand" otwiera, action="collapse" zamyka · atrybut opened = widoczny od razu

Ukryj tresc

h-dropdown — rozwijane menu / lista opcji

Atrybut direction: bottom-left / bottom-center / bottom-right / top-* · toggleOnHover = otwieraj na hover

Otworz dropdown ▼

Opcja pierwsza

Opcja druga

Link w dropdown

h-modal — modal dialog (overlay)

h-modal-opener name="X" otwiera modal z id="X" · sloty: modal__header, modal__body, modal__footer · LESS: @modalBgColor · @modalOverlayBgColor · @modalBorderRadius

Otworz modal

h-sheet — boczny panel (overlay z boku ekranu)

Identyczna API jak h-modal · sloty: header, body, footer · LESS: @sheetBgColor · @sheetOverlayBgColor

Otworz sheet (panel boczny)

h-hint — babelek z podpowiedzia (hover / focus)

Atrybut direction: top / bottom / left / right (+ -center / -left / -right) · LESS: @hintBgColor · @hintFontColor · @hintBorderRadius

Tekst z podpowiedzia hint (najedz) To jest tresc h-hint. Wyswietla sie nad triggerem. i kontynuacja zdania.

Link z hint direction=bottom-left Hint ponizej, wyrownany do lewej krawedzi triggera.

h-tooltip — tooltip (hover / focus, krotszy czas wyswietlania niz hint)

Ta sama API co h-hint · LESS: @tooltipBgColor · @tooltipFontColor · @tooltipBorderRadius

Przycisk z tooltip Krotka podpowiedz tooltipa. Najedz lub skup uwage na przycisku. i ikona z Tooltip przy ikonie, otwiera sie po prawej. strony.

Komponenty nie pokazane w style guide

h-slider — wymaga konfiguracji Splide.js; dokumentacja: .claude/dev/h-slider.md

h-video — wymaga realnego URL do pliku wideo (src="")

h-yt-video — wymaga URL do filmu YouTube

h-portal / h-portal-target — komponent narzeddziowy uzywany przez modal/sheet/dropdown wewnetrznie; nie stylizowany bezposrednio