/* ===================================================================== JPS-iQ GROUP DESIGN SYSTEM 2.0 — LAYER 1 · TOKENS ===================================================================== Quelle: deploy/standards/design-system-2.0/tokens.css Ausgeliefert je Business Unit als assets/css/ds-tokens.css. Nicht je BU editieren — beim naechsten Rollout ueberschrieben. Spezifikation: deploy/standards/GROUP-DESIGN-SYSTEM-2.0.md Diese Datei laedt VOR styles.css. Sie definiert nur Werte, keine Komponenten: sie kann deshalb nichts kaputtmachen, was heute steht. Die Basiswerte (Marke, Neutrale, Typo, Abstaende) sind identisch mit dem, was seit jeher in jeder styles.css steht — hier stehen sie zum ersten Mal an EINER Stelle. Neu ist ausschliesslich die Akzent-Ebene je Business Unit. ===================================================================== */ :root { /* ---- Marke: der Anker, von dem alles andere abgeleitet ist -------- */ --c-brand: #1A77B3; --c-brand-700: #155E8E; --c-brand-800: #11456A; --c-brand-50: #EAF3FA; --c-brand-100: #D3E6F4; /* ---- Neutrale ---------------------------------------------------- */ --c-ink: #0B1B2B; --c-ink-2: #2A3B4D; --c-ink-3: #5A6B7D; --c-line: #E2E8EE; --c-bg: #FFFFFF; --c-bg-alt: #F5F8FB; --c-bg-deep: #0B1B2B; --c-bg-deep-2: #0F2438; /* ---- Semantische Rollen ------------------------------------------ Farbe traegt Bedeutung, nicht Dekoration. Diese drei sind gruppenweit gleich und NIE ein BU-Akzent: sonst hiesse Gruen bei zoho "Marke" und bei netsuite "in Ordnung". */ --c-ok: #1C7355; --c-warn: #A8701A; --c-crit: #9C3A31; --c-ok-bg: #E4F1EB; --c-warn-bg: #F8EEDC; --c-crit-bg: #F7E5E2; /* ---- Business-Unit-Akzent ---------------------------------------- Vorbelegung = Gruppe. Jede BU ueberschreibt die drei Werte unten ueber . Mehr als drei Tokens bekommt keine BU — eine zweite Akzentfarbe je Unit waere eine Palette, keine Kennzeichnung. --bu-accent Flaechen, Linien, Icons, Zustaende --bu-accent-text garantiert >= 4.5:1 auf --c-bg-alt --bu-accent-dark garantiert >= 4.5:1 auf --c-bg-deep */ --bu-accent: #1A77B3; --bu-accent-text: #1A77B3; --bu-accent-dark: #4E9BD0; --bu-name: "JPS-iQ Solutions Group"; /* ---- Typografie -------------------------------------------------- Systemschrift, bewusst: keine Webfont-Lizenz, kein Ladezustand, kein FOUT auf zehn Sites. */ --ff-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; --ff-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --fs-xs: 0.8125rem; --fs-sm: 0.9375rem; --fs-base: 1rem; --fs-md: 1.125rem; --fs-lg: 1.375rem; --fs-xl: 1.75rem; --fs-2xl: clamp(1.875rem, 2vw + 1rem, 2.625rem); --fs-3xl: clamp(2.25rem, 3vw + 1rem, 3.5rem); --fs-4xl: clamp(2.5rem, 4.5vw + 1rem, 5rem); /* ---- Abstaende und Layout ---------------------------------------- */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6.5rem; --s-10: 9rem; --max-w: 1440px; --measure: 68ch; /* Lesebreite fuer Fliesstext */ --radius: 16px; --radius-sm: 10px; --dur: 180ms; --ease: cubic-bezier(.2,.6,.2,1); } /* ===================================================================== BU-AKZENTE --------------------------------------------------------------------- Die Familie sagt, um welche Art von Angebot es geht. Die Stufe innerhalb der Familie sagt, welche Unit. Deshalb sind es vier Familien und keine zehn Einzelfarben: Gruppe Corporate Blue — der Anker Produkt Teal — das einzige Angebot, das Software ist Enterprise-System Tiefblau/Indigo — System of Record, Programm, Architektur Zugaengliches System Gruen — Einstieg, Praxis, schneller Nutzen Service & Betrieb Bronze — Menschen, Verantwortung, laufender Betrieb Alle Werte sind gegen #F5F8FB und #0B1B2B gerechnet und von deploy/scripts/designsystem.py --contrast geprueft. Eine Aenderung ohne bestandene Pruefung ist keine Aenderung, sondern ein Fehler. ===================================================================== */ /* -- Gruppe ---------------------------------------------------------- */ [data-bu="group"] { --bu-accent: #1A77B3; --bu-accent-text: #1A77B3; --bu-accent-dark: #4E9BD0; --bu-name: "JPS-iQ Solutions Group"; } /* -- Produkt --------------------------------------------------------- */ [data-bu="suite"] { --bu-accent: #0E7C86; --bu-accent-text: #0E7C86; --bu-accent-dark: #3FA6AF; --bu-name: "JPS FinanceOS"; } /* -- Enterprise-Systeme ---------------------------------------------- */ [data-bu="netsuite"] { --bu-accent: #1B4F8F; --bu-accent-text: #1B4F8F; --bu-accent-dark: #5B93D6; --bu-name: "NetSuite by JPS-iQ"; } [data-bu="microsoft"] { --bu-accent: #4257A8; --bu-accent-text: #4257A8; --bu-accent-dark: #7B8CE0; --bu-name: "Microsoft by JPS-iQ"; } [data-bu="sap"] { --bu-accent: #27406E; --bu-accent-text: #27406E; --bu-accent-dark: #7E95D0; --bu-name: "SAP by JPS-iQ"; } /* -- Zugaengliche Systeme -------------------------------------------- */ [data-bu="zoho"] { --bu-accent: #1F7A5A; --bu-accent-text: #1F7A5A; --bu-accent-dark: #3FA37B; --bu-name: "Zoho by JPS-iQ"; } [data-bu="odoo"] { --bu-accent: #3E8B62; --bu-accent-text: #397F5A; --bu-accent-dark: #5FB283; --bu-name: "Odoo by JPS-iQ"; } [data-bu="weclapp"] { --bu-accent: #2E7D6E; --bu-accent-text: #2E7D6E; --bu-accent-dark: #4FA697; --bu-name: "weclapp by JPS-iQ"; } /* -- Service & Betrieb ----------------------------------------------- */ [data-bu="bpo"] { --bu-accent: #9A6B2F; --bu-accent-text: #96682E; --bu-accent-dark: #C79A5A; --bu-name: "BPO by JPS-iQ"; } [data-bu="opcon"] { --bu-accent: #7A5C3A; --bu-accent-text: #7A5C3A; --bu-accent-dark: #B09571; --bu-name: "OPCON by JPS-iQ"; } /* ===================================================================== DUNKLE ABSCHNITTE --------------------------------------------------------------------- Ein dunkler Abschnitt ist eine Aussage, kein Stilmittel. Er ist reserviert fuer: Produktoberflaeche, Architektur, System, Transfor- mation, und den einen Markenmoment je Seite. Wer jede zweite Section dunkel macht, hat keine Hierarchie mehr, sondern ein Muster. Innerhalb von .on-dark zeigen dieselben Tokennamen auf die dunklen Werte. Komponenten muessen deshalb nie wissen, auf welchem Grund sie stehen — sie lesen immer dieselben Namen. ===================================================================== */ .on-dark, .section--deep { --c-ink: #EAF1F7; --c-ink-2: #B9CBDA; --c-ink-3: #8AA0B4; --c-line: rgba(255,255,255,.16); --c-bg: var(--c-bg-deep); --c-bg-alt: var(--c-bg-deep-2); --bu-accent-text: var(--bu-accent-dark); --c-ok: #5FC79E; --c-warn: #E0B267; --c-crit: #E88C81; --c-ok-bg: rgba(95,199,158,.14); --c-warn-bg: rgba(224,178,103,.14); --c-crit-bg: rgba(232,140,129,.14); }