/** * Kilincscentrum – Design tokenek * ============================================================================= * Ez az egyetlen hivatalos tokenréteg. Minden szín, betűméret, térköz, * lekerekítés, árnyék, szélesség és fókuszérték innen származik. * * Szabályok: * - Minden token neve --kc- előtaggal kezdődik. * - Párhuzamos, más nevű színrendszert tilos bevezetni. * - Komponensfájlokban nyers hexa színkód, nyers px-térköz vagy nyers * lekerekítés nem szerepelhet: mindig tokenre kell hivatkozni. * - Új tokent csak akkor veszünk fel, ha a jóváhagyott Style Guide-ban * tényleges megfelelője van. * * Vizuális alap: Style Guide kék-narancs rendszer, system-ui betűcsalád, * kék elsődleges művelet, ritkán használt narancs kiemelt üzleti CTA, * 8 px gomb- és 12 px kártyalekerekítés. * ============================================================================= */ :root { /* ------------------------------------------------------------------------- * 1. MÁRKASZÍNEK * A kék az elsődleges műveleti szín. A narancs kizárólag ritka, kiemelt * üzleti CTA-hoz használható, nem díszítésre. * ---------------------------------------------------------------------- */ --kc-color-primary: #2563EB; --kc-color-primary-hover: #1D4ED8; --kc-color-primary-active: #1E40AF; --kc-color-primary-soft: #EFF6FF; --kc-color-primary-border: #BFDBFE; --kc-color-on-primary: #FFFFFF; --kc-color-accent: #C2410C; --kc-color-accent-hover: #9A3412; --kc-color-accent-active: #7C2D12; --kc-color-accent-soft: #FFF7ED; --kc-color-accent-border: #FED7AA; --kc-color-on-accent: #FFFFFF; /* ------------------------------------------------------------------------- * 2. SEMLEGES SKÁLA * Felületek, szövegek és vonalak. A surface a kártyák háttere, * a canvas az oldal alaphátterének szánt érték. * ---------------------------------------------------------------------- */ --kc-color-canvas: #F8FAFC; --kc-color-surface: #FFFFFF; --kc-color-surface-muted: #F1F5F9; --kc-color-border: #E2E8F0; --kc-color-border-strong: #CBD5E1; --kc-color-text: #0F172A; --kc-color-text-body: #334155; --kc-color-text-muted: #64748B; --kc-color-text-inverse: #FFFFFF; --kc-color-backdrop: rgba(15, 23, 42, 0.55); /* dialógus és drawer hátlap */ /* ------------------------------------------------------------------------- * 3. STÁTUSZSZÍNEK * Visszajelzésre: készlet, rendelési állapot, űrlaphiba, tájékoztatás. * Az info szándékosan az elsődleges kékre épül. * ---------------------------------------------------------------------- */ --kc-color-success: #15803D; --kc-color-success-soft: #F0FDF4; --kc-color-success-border: #BBF7D0; --kc-color-warning: #B45309; --kc-color-warning-soft: #FFFBEB; --kc-color-warning-border: #FDE68A; --kc-color-danger: #B91C1C; --kc-color-danger-soft: #FEF2F2; --kc-color-danger-border: #FECACA; --kc-color-info: #2563EB; --kc-color-info-soft: #EFF6FF; --kc-color-info-border: #BFDBFE; /* ------------------------------------------------------------------------- * 4. TIPOGRÁFIA * Kizárólag rendszerbetűtípus. Külső betűkészlet betöltése tilos. * ---------------------------------------------------------------------- */ --kc-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --kc-font-mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; --kc-font-size-xs: 0.75rem; /* 12 px - címkék, apró metaadat */ --kc-font-size-sm: 0.875rem; /* 14 px - segédszöveg, chip, státusz */ --kc-font-size-md: 1rem; /* 16 px - alap folyószöveg */ --kc-font-size-lg: 1.125rem; /* 18 px - kiemelt szöveg */ --kc-font-size-xl: 1.25rem; /* 20 px - kártyacím */ --kc-font-size-2xl: 1.5rem; /* 24 px - szekciócím */ --kc-font-size-3xl: 1.875rem; /* 30 px - oldalcím */ --kc-font-size-4xl: 2.25rem; /* 36 px - kiemelt oldalcím */ /* Folyékony címméretek: több töréspont helyett folyamatos skálázás. */ --kc-font-size-title-fluid: clamp(1.5rem, 1.15rem + 1.6vw, 2.25rem); --kc-font-size-section-fluid: clamp(1.25rem, 1.05rem + 0.9vw, 1.875rem); --kc-font-weight-regular: 400; --kc-font-weight-medium: 500; --kc-font-weight-semibold: 600; --kc-font-weight-bold: 700; --kc-line-height-tight: 1.25; --kc-line-height-snug: 1.4; --kc-line-height-normal: 1.6; --kc-letter-spacing-tight: -0.01em; --kc-letter-spacing-wide: 0.02em; /* ------------------------------------------------------------------------- * 5. TÉRKÖZÖK * 4 px alapú skála. Komponensek csak ezeket használhatják. * ---------------------------------------------------------------------- */ --kc-space-0: 0; --kc-space-1: 0.25rem; /* 4 px */ --kc-space-2: 0.5rem; /* 8 px */ --kc-space-3: 0.75rem; /* 12 px */ --kc-space-4: 1rem; /* 16 px */ --kc-space-5: 1.25rem; /* 20 px */ --kc-space-6: 1.5rem; /* 24 px */ --kc-space-8: 2rem; /* 32 px */ --kc-space-10: 2.5rem; /* 40 px */ --kc-space-12: 3rem; /* 48 px */ --kc-space-16: 4rem; /* 64 px */ /* ------------------------------------------------------------------------- * 6. LEKEREKÍTÉSEK * A Style Guide szerint: gomb 8 px, kártya 12 px. * ---------------------------------------------------------------------- */ --kc-radius-xs: 0.25rem; /* 4 px - apró jelölők */ --kc-radius-sm: 0.375rem; /* 6 px - mezők belső elemei */ --kc-radius-button: 0.5rem; /* 8 px - gomb, űrlapmező */ --kc-radius-card: 0.75rem; /* 12 px - kártya, dialógus, drawer */ --kc-radius-pill: 999px; /* chip, státuszjelölő */ /* ------------------------------------------------------------------------- * 7. ÁRNYÉKOK * Visszafogott, semleges árnyékok. Színes árnyék nem engedélyezett. * ---------------------------------------------------------------------- */ --kc-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06); --kc-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04); --kc-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.10); --kc-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.16); /* ------------------------------------------------------------------------- * 8. TARTALMI SZÉLESSÉGEK ÉS OLDALMARGÓK * A --kc-container-gutter mobilon kisebb, nagy képernyőn nagyobb; * a clamp() miatt nem kell hozzá külön töréspont. * ---------------------------------------------------------------------- */ --kc-container-max: 75rem; /* 1200 px - általános tartalomszélesség */ --kc-container-wide: 87.5rem; /* 1400 px - széles katalógusrácshoz */ --kc-container-narrow: 45rem; /* 720 px - szöveges tartalom, űrlap */ --kc-container-gutter: clamp(1rem, 0.75rem + 1vw, 2rem); --kc-measure: 68ch; /* olvasható sorhossz felső határa */ /* ------------------------------------------------------------------------- * 9. FÓKUSZ ÉS AKADÁLYMENTESSÉG * A fókuszjelzés kötelező. Ezek a tokenek hangolhatók, de a * fókuszgyűrűt eltávolítani tilos. * ---------------------------------------------------------------------- */ --kc-focus-ring-color: #1D4ED8; --kc-focus-ring-width: 2px; --kc-focus-ring-offset: 2px; --kc-focus-ring-style: solid; --kc-focus-ring-contrast: #FFFFFF; /* sötét háttéren használt kontrasztgyűrű */ --kc-tap-target-min: 44px; /* minimális érintési célméret */ /* ------------------------------------------------------------------------- * 10. MOZGÁS * A prefers-reduced-motion kezelését a base.css végzi. * ---------------------------------------------------------------------- */ --kc-transition-fast: 120ms; --kc-transition-base: 200ms; --kc-transition-slow: 320ms; --kc-ease-standard: cubic-bezier(0.2, 0, 0.2, 1); /* ------------------------------------------------------------------------- * 11. RÉTEGSORREND * Csak a saját komponensekhez. A szülősablon rétegeit nem írjuk felül. * ---------------------------------------------------------------------- */ --kc-z-sticky: 100; --kc-z-drawer: 900; --kc-z-dialog: 1000; /* ------------------------------------------------------------------------- * 12. TÖRÉSPONTOK - DOKUMENTÁCIÓS ÉRTÉKEK * Figyelem: CSS custom property nem használható @media feltételben, * ezért a responsive.css nyers értékeket ír ki. Ezek a tokenek a * hivatkozási forrás; ha itt változik egy érték, a responsive.css * megfelelő @media szabályát is frissíteni kell. * * --kc-bp-sm 480px - nagy telefon * --kc-bp-md 768px - tablet * --kc-bp-nav 900px - HIVATALOS mobil navigációs törés * --kc-bp-lg 1200px - asztali * ---------------------------------------------------------------------- */ --kc-bp-sm: 480px; --kc-bp-md: 768px; --kc-bp-nav: 900px; --kc-bp-lg: 1200px; }