/* * Coachonaut SaaS -- Token-Source-of-Truth (Child-Theme) * ========================================================= * Speist drei Systeme aus EINEM Wertesatz (Abschnitt 7a/7b des Umbauplans): * 1. BuddyBoss (--bb-*) -- BB-Kern, via Kette auch WooCommerce * 2. TutorLMS (--tutor-*) -- dockt teilweise bereits selbst an --bb-* an * 3. Coachonaut (--cnct-*) -- gespiegelt auf .cnct-theme-saas (design-system.css * im Plugin hat dieselben Werte bereits als Default; * diese Datei ist die theme-seitige Kopie/Override-Quelle) * * Wichtig: BuddyBoss schreibt seinen eigenen :root{ --bb-* }-Block per wp_head * (Prioritaet 99, aus inc/admin/options/custom-css.php) NACH den regulaer * enqueueten Stylesheets. Ohne Gegenmassnahme wuerde dieser Block unsere * Werte hier per Ladereihenfolge ueberschreiben. Deshalb: erhoehte Selektor- * Spezifitaet (":root:root" statt ":root") fuer --bb-* und --tutor-*, damit die * Ladereihenfolge keine Rolle spielt. --cnct-* ist zusaetzlich ueber * .cnct-theme-saas gesetzt (Klassen-Selektor, bereits spezifischer als :root). * * Dark Mode: [data-theme="dark"] auf UND (siehe dark-mode-toggle.js * fuer den Umschalt-Knopf -- der setzt das Attribut an beiden Stellen). */ :root:root { /* ===== BuddyBoss (--bb-*) -- Light ===== */ --bb-primary-color: #4F46E5; --bb-body-background-color: #FAF9F7; --bb-content-background-color: #FFFFFF; --bb-content-alternate-background-color: #F4F2EF; --bb-content-border-color: #E7E4DF; --bb-headings-color: #1B1A18; --bb-body-text-color: #1B1A18; --bb-alternate-text-color: #6E6A64; --bb-primary-button-background-regular: #4F46E5; --bb-primary-button-background-hover: #4338CA; --bb-primary-button-border-regular: #4F46E5; --bb-primary-button-border-hover: #4338CA; --bb-primary-button-text-regular: #FFFFFF; --bb-primary-button-text-hover: #FFFFFF; --bb-primary-button-focus-shadow: 0 0 0 3px color-mix(in srgb, #4F46E5 35%, transparent); --bb-secondary-button-background-regular: #F4F2EF; --bb-secondary-button-background-hover: #E7E4DF; --bb-secondary-button-border-regular: transparent; --bb-secondary-button-border-hover: transparent; --bb-secondary-button-text-regular: #1B1A18; --bb-secondary-button-text-hover: #1B1A18; --bb-secondary-button-focus-shadow: 0 0 0 3px color-mix(in srgb, #4F46E5 35%, transparent); --bb-outline-button-focus-shadow: 0 0 0 3px color-mix(in srgb, #4F46E5 35%, transparent); --bb-input-focus-border-color: #4F46E5; --bb-input-focus-shadow: 0 0 0 3px color-mix(in srgb, #4F46E5 20%, transparent); --bb-general-content-background-color: #FFFFFF; --bb-success-color: #178A50; --bb-warning-color: #B45309; --bb-danger-color: #DC2626; --bb-primary-color-rgb: 79, 70, 229; --bb-content-border-color-rgb: 231, 228, 223; --bb-button-radius: 99px; --bb-block-radius: 12px; --bb-block-radius-inner: 12px; --bb-input-radius: 12px; --bb-checkbox-radius: 6px; /* Header */ --bb-header-background: #FFFFFF; --bb-header-alternate-background: #F4F2EF; --bb-header-links: #1B1A18; --bb-header-links-hover: #4F46E5; /* Sidebar-Navigation (Buddypanel) */ --bb-sidenav-background: #F4F2EF; --bb-sidenav-text-regular: #6E6A64; --bb-sidenav-text-hover: #1B1A18; --bb-sidenav-text-active: #4F46E5; --bb-sidenav-menu-background-color-regular: transparent; --bb-sidenav-menu-background-color-hover: color-mix(in srgb, #1B1A18 5%, transparent); --bb-sidenav-menu-background-color-active: color-mix(in srgb, #4F46E5 9%, transparent); --bb-sidenav-count-text-color-regular: #6E6A64; --bb-sidenav-count-text-color-hover: #1B1A18; --bb-sidenav-count-text-color-active: #FFFFFF; --bb-sidenav-count-background-color-regular: #E7E4DF; --bb-sidenav-count-background-color-hover: #EFEDE9; --bb-sidenav-count-background-color-active: #4F46E5; /* Footer */ --bb-footer-background: #F4F2EF; --bb-footer-widget-background: #FFFFFF; --bb-footer-text-color: #6E6A64; --bb-footer-menu-link-color-regular: #6E6A64; --bb-footer-menu-link-color-hover: #4F46E5; --bb-footer-menu-link-color-active: #4338CA; /* Login/Registrierung */ --bb-login-register-link-color-regular: #4F46E5; --bb-login-register-link-color-hover: #4338CA; --bb-login-register-button-background-color-regular: #4F46E5; --bb-login-register-button-background-color-hover: #4338CA; --bb-login-register-button-border-color-regular: #4F46E5; --bb-login-register-button-border-color-hover: #4338CA; --bb-login-register-button-text-color-regular: #FFFFFF; --bb-login-register-button-text-color-hover: #FFFFFF; --bb-login-custom-heading-color: #1B1A18; /* Badges/Labels */ --bb-label-background-color: #F4F2EF; --bb-label-text-color: #6E6A64; /* Tooltip -- bewusst invertiert (dunkler Hintergrund, heller Text), passt sich dadurch in beiden Modi automatisch mit hohem Kontrast an. */ --bb-tooltip-background: #1B1A18; --bb-tooltip-background-rgb: 27, 26, 24; --bb-tooltip-color: #FFFFFF; /* Benachrichtigungen -- nur die tatsaechlich in theme.css genutzten -rgb-Varianten */ --bb-default-notice-color: #2563EB; --bb-default-notice-color-rgb: 37, 99, 235; --bb-success-color-rgb: 23, 138, 80; --bb-warning-color-rgb: 180, 83, 9; --bb-danger-color-rgb: 220, 38, 38; --bb-alternate-text-color-rgb: 110, 106, 100; --bb-headings-color-rgb: 27, 26, 24; /* ===== TutorLMS (--tutor-*) -- Light ===== Viele Tutor-Variablen docken im Parent-Theme bereits an --bb-* an (siehe tutorlms.css: --tutor-color-success: var(--bb-success-color) etc.). Was NICHT automatisch verkettet ist, wird hier direkt gesetzt. */ --tutor-color-primary: #4F46E5; --tutor-sidebar-background: #FFFFFF; --tutor-table-header-background: #F4F2EF; --tutor-border-color: #E7E4DF; --tutor-body-color: #1B1A18; --tutor-color-muted: #6E6A64; --tutor-color-success: #178A50; --tutor-color-warning: #B45309; --tutor-color-danger: #DC2626; /* ===== Coachonaut (--cnct-*) -- Light, Fallback-Basis ===== Volle Definition inkl. erweitertem Token-Set liegt in .cnct-theme-saas weiter unten; dieser :root:root-Block ist nur eine defensive Kopie der Kernrollen, falls .cnct-theme-saas aus irgendeinem Grund nicht greift. */ --cnct-accent: #4F46E5; --cnct-accent-strong: #4338CA; --cnct-bg: #FAF9F7; --cnct-surface: #FFFFFF; --cnct-surface-alt: #F4F2EF; --cnct-border: #E7E4DF; --cnct-text: #1B1A18; --cnct-text-strong: #1B1A18; --cnct-text-soft: #6E6A64; --cnct-success: #178A50; --cnct-warning: #B45309; --cnct-danger: #DC2626; --cnct-info: #2563EB; } [data-theme="dark"] { /* ===== BuddyBoss (--bb-*) -- Dark ===== */ --bb-body-background-color: #181817; --bb-content-background-color: #232322; --bb-content-alternate-background-color: #1F1F1E; --bb-content-border-color: #343431; --bb-headings-color: #EDECE9; --bb-body-text-color: #EDECE9; --bb-alternate-text-color: #A3A09A; --bb-primary-button-background-hover: #6366F1; --bb-primary-button-border-hover: #6366F1; --bb-secondary-button-background-regular: #1F1F1E; --bb-secondary-button-background-hover: #343431; --bb-secondary-button-text-regular: #EDECE9; --bb-secondary-button-text-hover: #EDECE9; --bb-input-focus-border-color: #6366F1; --bb-general-content-background-color: #232322; --bb-success-color: #4ADE80; --bb-warning-color: #FBBF24; --bb-danger-color: #F87171; --bb-content-border-color-rgb: 52, 52, 49; /* Header */ --bb-header-background: #232322; --bb-header-alternate-background: #1F1F1E; --bb-header-links: #EDECE9; /* Sidebar-Navigation */ --bb-sidenav-background: #1F1F1E; --bb-sidenav-text-regular: #A3A09A; --bb-sidenav-text-hover: #EDECE9; --bb-sidenav-menu-background-color-hover: color-mix(in srgb, #EDECE9 6%, transparent); --bb-sidenav-count-text-color-regular: #A3A09A; --bb-sidenav-count-text-color-hover: #EDECE9; --bb-sidenav-count-background-color-regular: #343431; --bb-sidenav-count-background-color-hover: #2C2C2A; /* Footer */ --bb-footer-background: #1F1F1E; --bb-footer-widget-background: #232322; --bb-footer-text-color: #A3A09A; --bb-footer-menu-link-color-regular: #A3A09A; /* Login/Registrierung */ --bb-login-custom-heading-color: #EDECE9; /* Badges/Labels */ --bb-label-background-color: #1F1F1E; --bb-label-text-color: #A3A09A; /* Tooltip -- invertiert sich mit: im Dark Mode heller Hintergrund, dunkler Text */ --bb-tooltip-background: #EDECE9; --bb-tooltip-background-rgb: 237, 236, 233; --bb-tooltip-color: #181817; /* Benachrichtigungen */ --bb-default-notice-color: #60A5FA; --bb-default-notice-color-rgb: 96, 165, 250; --bb-success-color-rgb: 74, 222, 128; --bb-warning-color-rgb: 251, 191, 36; --bb-danger-color-rgb: 248, 113, 113; --bb-alternate-text-color-rgb: 163, 160, 154; --bb-headings-color-rgb: 237, 236, 233; /* ===== TutorLMS (--tutor-*) -- Dark ===== */ --tutor-sidebar-background: #232322; --tutor-table-header-background: #1F1F1E; --tutor-border-color: #343431; --tutor-body-color: #EDECE9; --tutor-color-muted: #A3A09A; --tutor-color-success: #4ADE80; --tutor-color-warning: #FBBF24; --tutor-color-danger: #F87171; /* ===== Coachonaut (--cnct-*) -- Dark, Fallback-Basis ===== */ --cnct-bg: #181817; --cnct-surface: #232322; --cnct-surface-alt: #1F1F1E; --cnct-border: #343431; --cnct-text: #EDECE9; --cnct-text-strong: #EDECE9; --cnct-text-soft: #A3A09A; --cnct-success: #4ADE80; --cnct-warning: #FBBF24; --cnct-danger: #F87171; --cnct-info: #60A5FA; } /* * Coachonaut-Plugin: identische Werte nochmal explizit unter .cnct-theme-saas, * damit das Theme unabhaengig von design-system.css's eigenen Defaults die * "Source of Truth" bleibt (Plugin-Defaults aus Schritt B sind ohnehin bereits * identisch -- diese Regel ueberschreibt sie nur redundant/defensiv). */ .cnct-theme-saas { --cnct-accent: #4F46E5; --cnct-accent-strong: #4338CA; --cnct-bg: #FAF9F7; --cnct-surface: #FFFFFF; --cnct-surface-alt: #F4F2EF; --cnct-border: #E7E4DF; --cnct-border-soft: #EFEDE9; --cnct-text: #1B1A18; --cnct-text-strong: #1B1A18; --cnct-text-soft: #6E6A64; --cnct-success: #178A50; --cnct-warning: #B45309; --cnct-danger: #DC2626; --cnct-info: #2563EB; --cnct-shadow: 0 1px 2px rgba(24,20,16,.05); --cnct-font-sans: 'Geist', system-ui, -apple-system, sans-serif; } .cnct-theme-saas[data-theme="dark"] { --cnct-bg: #181817; --cnct-surface: #232322; --cnct-surface-alt: #1F1F1E; --cnct-border: #343431; --cnct-border-soft: #2C2C2A; --cnct-text: #EDECE9; --cnct-text-strong: #EDECE9; --cnct-text-soft: #A3A09A; --cnct-success: #4ADE80; --cnct-warning: #FBBF24; --cnct-danger: #F87171; --cnct-info: #60A5FA; --cnct-shadow: 0 1px 2px rgba(0,0,0,.35); } /* * Geist-Font self-hosted einbinden (SIL Open Font License). * Dateien noch ablegen unter: assets/fonts/Geist-Regular.woff2 / Geist-Medium.woff2 / Geist-SemiBold.woff2 * TODO: Font-Dateien besorgen und hier referenzieren -- bis dahin greift der * system-ui-Fallback aus --cnct-font-sans, optisch unauffaellig. */