/* ================================================================================================================== PartnerTap Design System — themeable color tokens. Every design-system color is declared here as a custom property and re-exported from styles/partnertap_theme.js as a `var(--pt-*)` string. Because the components consume those exports and drop them straight into inline styles and MUI `sx`, switching the theme is only a matter of changing which block below wins — no component re-renders and no code changes. ThemeHelper sets `data-theme` on to do exactly that. Adding a color? Declare it here first, then export the `var()` from partnertap_theme.js. Never inline a hex in a component: a literal is invisible to the theme and has to be hunted down later. Tokens are named for the ROLE they play, never for a hue or a lightness, because either becomes a lie in the other theme: `--pt-text-secondary` is #4A5568 here and #BAC7D8 in the dark theme, so a name like "gray 600" would point you the wrong way. `--pt-surface-nav` gets darker between themes while `--pt-text-primary` goes from near-black to near-white — one name could not have covered both. Two rules worth knowing: - Tokens that need alpha also carry an `-rgb` triplet, because `rgba()` cannot take a hex custom property. Use `rgba(var(--pt-fill-primary-rgb), 0.4)`, not `rgba(var(--pt-fill-primary), 0.4)`. - `var()` resolves in CSS properties but NOT in SVG presentation attributes (``) or in MUI's createTheme palette, which computes tints from a real color. Those need a literal — call ThemeHelper.resolveColor() to read the current value. ================================================================================================================== */ :root { /* Tells the browser to render native controls, scrollbars and form widgets for this theme. */ color-scheme: light; /* -- Surfaces ------------------------------------------------------------------------------------------ */ --pt-surface-nav: #0D1F3C; /* side navigation rail */ --pt-surface: #FFFFFF; /* cards, tiles, page header, inputs */ --pt-surface-subtle: #F2F4F7; /* hover and disabled fills, inset panels */ --pt-surface-page: #EAECEE; /* page body behind the cards */ --pt-surface-nav-active: #123A63; /* active/hover fill for a nav section */ /* -- Fills (a block of color with text on top) --------------------------------------------------------- */ --pt-fill-primary: #0D1F3C; /* primary buttons, KPI tiles */ --pt-fill-primary-rgb: 13, 31, 60; /* for rgba() — see note above */ --pt-text-on-fill: #FFFFFF; /* text and icons sitting on a fill; white in BOTH themes */ /* -- Text -------------------------------------------------------------------------------------------- */ --pt-text-primary: #0D1F3C; /* headings, tile titles, emphasis */ --pt-text-secondary: #4A5568; /* body copy, descriptions */ --pt-text-muted: #8A96A8; /* captions, placeholders, disabled */ --pt-icon-default: #5A6B85; /* standalone glyphs */ /* -- Navigation text ----------------------------------------------------------------------------------- */ --pt-nav-icon: #C7D3E2; --pt-nav-sub-text: #DCE5EF; /* -- Borders ----------------------------------------------------------------------------------------- */ --pt-border-subtle: #E3E7EC; /* card, tile and header hairlines */ --pt-border-control: rgba(13, 31, 60, 0.4); /* inputs, dropdowns, secondary buttons */ /* -- Accent ------------------------------------------------------------------------------------------ */ --pt-interactive: #0871CF; /* links, interactive emphasis */ --pt-interactive-subtle: #E3EEFB; --pt-accent-cyan: #00BEE3; --pt-accent-teal: #0EA5B5; --pt-accent-violet: #7C3AED; --pt-accent-purple: #45275B; --pt-accent-navy: #547FA8; --pt-accent-yellow: #EDD857; /* -- Semantic / status --------------------------------------------------------------------------------- */ --pt-success: #1F7A3D; --pt-success-surface: #E8F5EC; --pt-error: #D93B3B; --pt-error-surface: #FBEAEA; --pt-warning: #F0A22E; --pt-warning-surface: #FDF1E0; /* -- Absolutes (identical in both themes) --------------------------------------------------------------- */ --pt-pure-white: #FFFFFF; --pt-pure-white-rgb: 255, 255, 255; --pt-black: #000000; /* -- Effects ------------------------------------------------------------------------------------------ */ --pt-shadow-card: 0 4px 12px rgba(0, 0, 0, 0.08); --pt-shadow-panel-inner: inset 0 2px 6px rgba(0, 0, 0, 0.06); --pt-shadow-ambient: 0 0 0 0, 0 0 3px 0 rgba(0, 0, 0, 0.2); --pt-hover-overlay: rgba(0, 0, 0, 0.05); } /* Dark theme, from the "Partner Overview Dark" comp. Note how the roles invert: --pt-surface-nav gets DARKER while --pt-text-primary goes from near-black to near-white. Read down this list and every name still describes what the value is for, which is the whole point of naming them this way. */ :root[data-theme='dark'] { color-scheme: dark; --pt-surface-nav: #0C131C; --pt-surface: #151E2B; --pt-surface-subtle: #1C2634; --pt-surface-page: #0B1119; --pt-surface-nav-active: #1B2836; --pt-fill-primary: #27384F; --pt-fill-primary-rgb: 39, 56, 79; --pt-text-on-fill: #FFFFFF; --pt-text-primary: #E9EFF7; --pt-text-secondary: #BAC7D8; --pt-text-muted: #8593A8; --pt-icon-default: #98A6BB; --pt-nav-icon: #C7D3E2; --pt-nav-sub-text: #DCE5EF; --pt-border-subtle: #26313F; --pt-border-control: #46586F; --pt-interactive: #6BA5FA; --pt-interactive-subtle: #1B2836; --pt-accent-cyan: #00BEE3; --pt-accent-teal: #22C7D8; --pt-accent-violet: #A78BFA; --pt-accent-purple: #45275B; --pt-accent-navy: #46586F; --pt-accent-yellow: #EDD857; --pt-success: #1E7A45; --pt-success-surface: #16261D; --pt-error: #D93B3B; --pt-error-surface: #2A1A1D; --pt-warning: #F5B942; --pt-warning-surface: #2A2216; --pt-pure-white: #FFFFFF; --pt-pure-white-rgb: 255, 255, 255; --pt-black: #000000; --pt-shadow-card: 0 4px 12px rgba(0, 0, 0, 0.45); --pt-shadow-panel-inner: inset 0 2px 6px rgba(0, 0, 0, 0.35); --pt-shadow-ambient: 0 0 0 0, 0 0 3px 0 rgba(0, 0, 0, 0.6); --pt-hover-overlay: rgba(255, 255, 255, 0.06); } * { padding: 0; margin: 0; } body { font: 14px open_sansregular, Helvetica Neue, Helvetica, Arial, sans-serif; /* Inherited by every element that does not set its own color — which, in this codebase, is most text. It has to be a token or entire screens stay dark-on-dark in the dark theme. */ color: var(--pt-text-primary); background-color: var(--pt-surface-page); min-height: 100%; height: 100%; } #app, html { height: 100%; width: 100%; min-width: 360px; display: flex; flex-direction: column; box-sizing: border-box; } #app { margin: 0 auto; } hr { border: none; border-top: 1px solid var(--pt-border-subtle); margin: 0 20px; pointer-events: none; } .hoverActive { transition: 0.1s background-color ease-in; cursor: pointer; } .hoverActive:hover { background-color: var(--pt-hover-overlay); } @media print { .printFullWidth { flex: 1 } } @media print { .printNone { display: none; } } @font-face { font-family: 'open_sansregular'; src: url(/5c62b59f9b12f7b42faa.woff2) format('woff2'), url(/33004e2c16ff5d3a8b66.woff) format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'partnertap-icons'; src: url(/a951c555115bb3ce324a.woff2) format('woff2'), url(/cb11864baad79521b4b6.woff) format('woff'); font-weight: normal; font-style: normal; } /* PartnerTap Design System (August 2026) type families. Self-hosted latin-subset woff2 pulled from Google Fonts (all three are SIL OFL licensed). Plus Jakarta Sans — primary UI; DM Sans — data labels/tables/charts; Bricolage Grotesque — brand accent. See styles/partnertap_theme.js for the family stacks and type scale. */ @font-face { font-family: 'Plus Jakarta Sans'; src: url(/e2a8231f370153f0b386.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Plus Jakarta Sans'; src: url(/6663e83cd4bbdf4d65ad.woff2) format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Plus Jakarta Sans'; src: url(/f618f7dc45fafd175932.woff2) format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Plus Jakarta Sans'; src: url(/65a9b28b03f43a4dba2e.woff2) format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'DM Sans'; src: url(/362c71bfc58aab15fb11.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'DM Sans'; src: url(/ab552593a62cf56f2583.woff2) format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'DM Sans'; src: url(/3b3e83f7c9fbb9869095.woff2) format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Bricolage Grotesque'; src: url(/9ec0e6d9924c3b8920f5.woff2) format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Bricolage Grotesque'; src: url(/f86855d6f846be53b624.woff2) format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } /* Material Symbols Rounded — the design system's icon face (August 2026 redesign), self-hosted like the type families above. This is a SUBSET containing only the icons the app actually uses; adding a new icon name means regenerating the file. To regenerate, request the subset from Google Fonts with the full name list and save the woff2 the CSS points at (Google returns HTTP 400 for an unknown icon name, so a typo fails loudly): https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=ac_unit,account_circle,add,admin_panel_settings,attach_money,auto_awesome,bolt,call_split,cloud_sync,cloud_upload,contrast,database,expand_more,grid_view,group,groups,handshake,hub,menu_open,monitoring,note_add,notifications,search,star,table_view,thumb_up,track_changes,upload_file,verified_user It is a variable font carrying the FILL, wght, GRAD and opsz axes, so the thin-outline treatment the comps call for (FILL 0, wght 200) is an axis setting rather than a separate file. Icons are rendered by ui/MaterialSymbol.js; the ligature name is the element's text, so the font must load before the glyph resolves — hence no font-display swap here, which would otherwise flash the raw name (e.g. "auto_awesome") as text. */ @font-face { font-family: 'Material Symbols Rounded'; src: url(/d3608a629edfe31a71a3.woff2) format('woff2'); font-weight: 100 700; font-style: normal; } .material-symbols-rounded { font-family: 'Material Symbols Rounded'; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; } .partnertap-icons { font-family: partnertap-icons, open_sansregular, Helvetica Neue, Helvetica, Arial, sans-serif; font-weight: normal; font-style: normal; font-size: 24px; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; vertical-align: middle; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; } .MyCustomElement { position: relative; left: 0px; top: 0px; width: 100%; height: 100vh; }