/* SaaS Starter - design layer * * Everything that makes this look like a product rather than a generated * application. Re-branding is the three values at the top of :root. * * Referenced from Shared Components > User Interface > CSS > File URLs as * #APP_FILES#css/saas.css, so it loads on every page including the login page. * * WORKS IN LIGHT AND DARK. Colours that belong to the brand are literals; * colours that belong to the surface are taken from Universal Theme's own * variables, so switching between Iris and Vita - Dark - or any style a buyer * prefers - carries the whole design layer with it instead of leaving grey * text on a black background. */ :root { --saas-accent: #2C7BE5; --saas-accent-shade: #1A5FBF; --saas-accent-contrast:#FFFFFF; /* The brand blue is the IDENTITY - the mark, the palette, a link. It is not quite dark enough to carry white text: #FFFFFF on #2C7BE5 is 4.14:1, and button labels here are 12px, so every Sign In, Invite member and Save was below AA in BOTH light and dark. This is the same hue and saturation taken one step darker - hsl(213 78% 49%) - which reaches 4.61:1 and is not tellable apart from the brand colour beside it. Deliberately a separate token rather than a change to --saas-accent: the identity colour is the buyer's to choose, and this is a legibility floor under the one place it carries text. Promote it to --saas-accent if you would rather have a single blue. */ --saas-accent-button: #1B73DE; /* -- State colours, light ------------------------------------------- These names already existed but ONLY inside the dark block, so every rule that used them had to be scoped to .apex-theme-vita-dark. Defining the light values here lets a rule be written once and be correct in both themes - the dark block below simply overrides the same four names. Ratios are measured against the card (#FFF), not assumed. */ --saas-success-text: #15703A; /* 5.51:1 on its tint */ --saas-tint-success: #E7F6EC; --saas-warning-text: #8A5A00; /* 5.23:1 on its tint */ --saas-tint-warning: #FBF0D5; --saas-danger-text: #B3261E; /* 5.58:1 on its tint */ --saas-tint-danger: #FBE9E7; --saas-neutral-text: #4A5563; /* 6.64:1 on its tint */ --saas-tint-neutral: #EEF0F3; /* Surface colours follow the theme style rather than fighting it. */ --saas-muted: var(--ut-component-text-muted-color, #5B6472); --saas-ink: var(--ut-component-text-default-color, #1B2733); --saas-line: var(--ut-component-border-color, rgba(128,128,128,.22)); /* The theme shipped a teal primary, near-black buttons and a blue logo - three accents at once, none of them agreeing. */ --ut-palette-primary: var(--saas-accent); --ut-palette-primary-shade: var(--saas-accent-shade); --ut-palette-primary-contrast: var(--saas-accent-contrast); --ut-palette-primary-alt: var(--saas-accent-shade); --ut-palette-primary-alt-contrast: var(--saas-accent-contrast); /* The title band and the body were two greys a shade apart, carrying no meaning between them. One content surface. */ --ut-body-title-background-color: transparent; --ut-body-title-border-width: 0; --ut-body-title-box-shadow: none; } /* A hot button reads its colour from a button-scoped variable rather than from the palette, which is why setting the palette alone left every Sign In, Save and Send button near-black. */ .t-Button--hot { --a-button-background-color: var(--saas-accent-button); --a-button-border-color: var(--saas-accent-button); --a-button-text-color: var(--saas-accent-contrast); --a-button-hover-background-color: var(--saas-accent-shade); --a-button-hover-border-color: var(--saas-accent-shade); --a-button-active-background-color: var(--saas-accent-shade); --a-button-active-border-color: var(--saas-accent-shade); } /* The login page's logo slot renders the theme primary as a solid square when it has no image. It gets the product's own mark instead. */ .t-Login-logo { background-color: var(--saas-accent); background-image: url("data:image/svg+xml,"); background-repeat: no-repeat; background-position: center; background-size: 60%; border-radius: 12px; } /* PAGE HELP (V051) One line always visible saying what the page is for, and the rules that are not obvious from looking at it behind a disclosure that costs nothing until it is opened. A paragraph at the top of every screen would push the content down and be read exactly once. */ .saas-help { margin: 0 0 18px; } .saas-help-summary { margin: 0; font-size: 14px; line-height: 1.55; color: var(--saas-muted); max-width: 72ch; } .saas-help-more { margin-top: 6px; } .saas-help-more > summary { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--saas-accent); list-style: none; padding: 2px 0; } .saas-help-more > summary::-webkit-details-marker { display: none; } .saas-help-more > summary::before { content: "?"; display: inline-flex; width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid currentColor; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; line-height: 1; } .saas-help-more > summary:hover { text-decoration: underline; } .saas-help-more[open] > summary { margin-bottom: 8px; } .saas-help-more ul { margin: 0 0 2px; padding-left: 17px; font-size: 13px; line-height: 1.65; color: var(--saas-muted); max-width: 78ch; } .saas-help-more li { margin-bottom: 5px; } /* The link out of each dashboard section. */ .saas-sectionLink { font-size: 13px; font-weight: 500; } /* OVERVIEW HEADER and RECENT ACTIVITY (V041, V042) These lived in page 22's inline CSS with literal greys. Moved here so they follow the theme, and so there is one design file rather than two places to look. */ .saas-orgHeader { padding: 4px 0 8px; } .saas-orgHeader-name { font-size: 26px; font-weight: 600; letter-spacing: -.02em; margin: 0 0 12px; color: var(--saas-ink); } .saas-orgHeader-badges { margin-bottom: 16px; } .saas-orgHeader-actions { margin-bottom: 24px; } .saas-orgHeader-actions .t-Button { margin-right: 8px; } .saas-actList { list-style: none; margin: 0; padding: 0; } .saas-act { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--saas-line); } .saas-act:last-child { border-bottom: 0; } .saas-act-avatar { width: 28px; height: 28px; border-radius: 50%; background: color-mix(in srgb, var(--saas-accent) 16%, transparent); color: var(--saas-accent); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 12px; flex: 0 0 28px; } .saas-act-text { flex: 1; font-size: 14px; color: var(--saas-ink); } .saas-act-when { color: var(--saas-muted); font-size: 12px; white-space: nowrap; } .saas-act-more { margin-top: 12px; font-size: 13px; } /* ============================================================================ DARK MODE PALETTE ---------------------------------------------------------------------------- Vita - Dark's own colours are tuned against white and then reused on #1b1d1e. Three things break, and none of them is a missing rule: - the brand accent falls to 3.62:1 as link text, below AA - every "subtle" tint composites to 1.0-1.2:1 and stops being a shape at all, so tile icons and avatars are chips that are not there - the state colours sit at exactly 4.50:1 with no margin, and shout Scoped entirely to body.apex-theme-vita-dark, which APEX writes onto from the per-user theme-style preference. There is no prefers-color-scheme anywhere in Universal Theme: the person chooses, and APEX remembers. Light mode matches none of these selectors, so it is not overridden - it never applies. THE HOOK, AND WHY THESE VARIABLES AND NOT THE OBVIOUS ONES. Universal Theme resolves --a-palette-* and --a-base-link-text-color at :root, on . Redefining a --ut-palette-* here on would NOT update its --a- alias, because html has already computed it. So everything below either names the --a- variable directly or sets a variable the component element itself resolves (--ut-avatar-*, --ut-badge-subtle-*, --ut-alert-icon-*). That is the difference between this working and looking like it should. ========================================================================== */ body.apex-theme-vita-dark { /* -- The one blue ----------------------------------------------------- #2C7BE5 stays the brand FILL: hot buttons, the login mark, --ut-palette-primary. It is not lightened, because lightening a fill drives white-on-accent below 3:1 and breaks every button that uses it. This is the same hue and saturation lifted in lightness so it works as TEXT - hsl(213 76% 68%) - and it replaces UT's #349bfa as well, so the app shows one blue instead of two. 5.88:1 on the page, 6.64:1 on a card. */ --saas-accent-text: #6BA5EE; --saas-tint-accent: #26394F; /* 1.43:1 vs card - reads as a chip */ --ut-link-text-color: #6BA5EE; --a-base-link-text-color: #6BA5EE; /* -- State colours, retuned for a near-black surface ------------------ */ --saas-success-text: #51C868; /* 7.00:1 page / 7.91:1 card */ --saas-tint-success: #213B27; /* 1.39:1 vs card */ --saas-warning-text: #F5C542; /* 9.24:1 page / 10.43:1 card */ --saas-tint-warning: #42391A; /* 1.48:1 vs card */ --saas-danger-text: #FF7A70; /* 5.90:1 page / 6.66:1 card */ --saas-tint-danger: #4C2E2B; /* 1.40:1 vs card */ --saas-neutral-text: #B7C0CC; /* 7.24:1 on its tint */ --saas-tint-neutral: #2A3038; /* 1.22:1 vs card */ /* -- Metric Card badges ----------------------------------------------- .t-Badge--subtle resolves these ON THE BADGE, so a value inherited from reaches it. UT's dark defaults were #388729 on #0c1e09 (3.87:1) and #ee0701 on #340200 (4.04:1) - both fail AA for 13px text - sitting on backgrounds 1.03-1.25:1 from the card, which is to say on no background at all. */ --ut-badge-subtle-success-text-color: #51C868; --ut-badge-subtle-success-background-color: #213B27; /* 5.71:1 AA */ --ut-badge-subtle-warning-text-color: #F5C542; --ut-badge-subtle-warning-background-color: #42391A; /* 7.07:1 AA */ --ut-badge-subtle-danger-text-color: #FF7A70; --ut-badge-subtle-danger-background-color: #4C2E2B; /* 4.77:1 AA */ --ut-badge-subtle-info-text-color: #6BA5EE; --ut-badge-subtle-info-background-color: #26394F; /* 4.63:1 AA */ /* A stateless subtle badge - a plan code, a count - resolves var(--ut-badge-subtle-text-color) with no fallback in Core.min.css. Give it one rather than leaving it to inherit whatever is nearby. */ --ut-badge-subtle-text-color: #FFFFFF; --ut-badge-subtle-background-color: hsla(0,0%,100%,.10); /* 12.53:1 */ } /* -- Links and accented text in the design layer ------------------------ The base rules paint var(--saas-accent) directly, so they are repointed rather than left to inherit. (0,2,2) and (0,2,1) beat the (0,1,1) and (0,1,0) originals, and saas.css loads last, so no !important is needed. */ body.apex-theme-vita-dark .saas-help-more > summary { color: var(--saas-accent-text); } body.apex-theme-vita-dark .saas-sectionLink, body.apex-theme-vita-dark .saas-act-more a { color: var(--saas-accent-text); } /* -- Recent Activity avatar -------------------------------------------- The worst element on the page before this: color-mix(--saas-accent 16%, transparent) over #1b1d1e composites to #1e2c3e, 1.20:1 against the card, carrying 12px bold initials at 3.42:1. Initials are text, so 4.5 applies. */ body.apex-theme-vita-dark .saas-act-avatar { background: var(--saas-tint-accent); /* #26394F, 1.43:1 vs card */ color: var(--saas-accent-text); /* #6BA5EE on #26394F = 4.63:1 */ } /* -- Metric Card tile icons (People / Billing / Operations) ------------- UT sets --ut-avatar-background-color to color-mix(--a-palette-primary 10%, transparent), which is #1d2632 - 1.11:1, invisible - behind a #2C7BE5 glyph at 3.69:1. Both variables are resolved on .t-Avatar--icon itself, which is why they are set on the same element and not on body. */ body.apex-theme-vita-dark .t-MetricCard-avatar--subtle { --ut-avatar-background-color: var(--saas-tint-accent); --ut-avatar-text-color: var(--saas-accent-text); /* 4.63:1, AA */ } /* -- Org-header badges: one badge language ------------------------------ APP_UI_PKG.BADGE emits t-Badge with u-success/u-warning/u-danger, which is a SOLID fill: white on #388729 is 4.5009:1 and white on #ee0701 is 4.5004:1. They pass by a thousandth and they are the loudest things on the page. Same tinted treatment as the metric cards, so there is one badge language rather than two. Scoped to .t-Badge so u-success used elsewhere for anything other than a pill is untouched. */ body.apex-theme-vita-dark .t-Badge.u-success { background-color: var(--saas-tint-success); color: var(--saas-success-text); /* 5.71:1 AA */ } body.apex-theme-vita-dark .t-Badge.u-warning { background-color: var(--saas-tint-warning); color: var(--saas-warning-text); /* 7.07:1 AA */ } body.apex-theme-vita-dark .t-Badge.u-danger { background-color: var(--saas-tint-danger); color: var(--saas-danger-text); /* 4.77:1 AA */ } /* -- Alert banner icons, colour only ------------------------------------ V064 fixed the glyph; this fixes what colour it is. UT paints --ut-alert-icon-text-color on an --ut-alert-icon-background-color plate, and in dark that is #ee0701 on #340200 - a dark saturated glyph on a near-black plate, which reads as a smudge rather than an icon. */ body.apex-theme-vita-dark .t-Alert--danger, body.apex-theme-vita-dark .t-Alert--red { --ut-alert-icon-text-color: var(--saas-danger-text); } body.apex-theme-vita-dark .t-Alert--warning, body.apex-theme-vita-dark .t-Alert--yellow { --ut-alert-icon-text-color: var(--saas-warning-text); } body.apex-theme-vita-dark .t-Alert--success { --ut-alert-icon-text-color: var(--saas-success-text); } body.apex-theme-vita-dark .t-Alert--info { --ut-alert-icon-text-color: var(--saas-accent-text); } body.apex-theme-vita-dark .t-Alert--danger.t-Alert--horizontal, body.apex-theme-vita-dark .t-Alert--red.t-Alert--horizontal { --ut-alert-icon-background-color: var(--saas-tint-danger); } body.apex-theme-vita-dark .t-Alert--warning.t-Alert--horizontal, body.apex-theme-vita-dark .t-Alert--yellow.t-Alert--horizontal { --ut-alert-icon-background-color: var(--saas-tint-warning); } body.apex-theme-vita-dark .t-Alert--success.t-Alert--horizontal { --ut-alert-icon-background-color: var(--saas-tint-success); } body.apex-theme-vita-dark .t-Alert--info.t-Alert--horizontal { --ut-alert-icon-background-color: var(--saas-tint-accent); } /* PLAN PRICING CARDS (page 26) The catalogue used to be a five-column report, which answered "what plans exist" when the question a buyer is asking is "which one should I be on". Three cards, each listing only what it adds to the tier below it. Everything here is theme-derived, so it works in both styles with no dark-mode block of its own: surfaces come from --saas-line and the region background, text from --saas-ink and --saas-muted, and the one accent is --saas-accent-text, which the dark block already redefines. */ .saas-planGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; /* stretch, not start: plans carry different numbers of features and start leaves the card bottoms ragged at three different heights. */ align-items: stretch; margin: 4px 0 8px; } .saas-plan { border: 1px solid var(--saas-line); border-radius: 10px; padding: 22px 20px 24px; display: flex; flex-direction: column; min-width: 0; } /* The plan they are on is stated, not sold. */ .saas-plan--current { border-color: var(--saas-accent-text, var(--saas-accent)); } .saas-plan-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } .saas-plan-name { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--saas-ink); } .saas-plan-tag { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--saas-line); color: var(--saas-muted); white-space: nowrap; } .saas-plan-tag--current { color: var(--saas-accent-text, var(--saas-accent)); border-color: currentColor; } .saas-plan-price { margin: 0; display: flex; align-items: baseline; gap: 6px; } .saas-plan-cur { font-size: 13px; font-weight: 600; color: var(--saas-muted); } .saas-plan-amount { font-size: 34px; font-weight: 650; letter-spacing: -.02em; color: var(--saas-ink); line-height: 1.1; } .saas-plan-period { font-size: 13px; color: var(--saas-muted); } .saas-plan-year { margin: 4px 0 0; font-size: 12px; color: var(--saas-muted); } /* Reserved even when there is no trial, so the buttons line up across cards whatever each plan offers. */ .saas-plan-trial { margin: 10px 0 16px; font-size: 12px; font-weight: 500; color: var(--saas-muted); min-height: 1em; } .saas-plan-cta { width: 100%; justify-content: center; text-align: center; } /* Offering somebody the plan they are already on is a dead end with a button on it. It stays in the layout and stops being an action. */ .saas-plan-cta--current { background: transparent; border: 1px solid var(--saas-line); color: var(--saas-muted); cursor: default; pointer-events: none; } .saas-plan-inherits { margin: 20px 0 8px; font-size: 12px; font-weight: 600; color: var(--saas-ink); } .saas-planFeatures { list-style: none; margin: 8px 0 0; padding: 0; } .saas-planFeature { display: flex; align-items: flex-start; gap: 9px; padding: 5px 0; font-size: 13px; line-height: 1.5; color: var(--saas-ink); } .saas-planFeature--same { color: var(--saas-muted); font-style: italic; } /* Drawn rather than typed: a tick glyph would need a font this page does not otherwise load, and an emoji would be read aloud by a screen reader. */ /* A border tick is two strokes at right angles, and the ARMS MUST BE UNEQUAL: a square box gives two strokes of the same length, which is a chevron, not a check mark. Hence 11x6 - a long bottom arm and a short left one. The box is the drawing, so flex-basis matches the width the rotation actually occupies (~12px), not the element width. Checked on the rendered page, not reasoned about: this rule rendered a row of down-chevrons for its whole first life. */ .saas-planFeature-tick { flex: 0 0 13px; width: 11px; height: 6px; margin-top: 5px; border-left: 2px solid var(--saas-accent-text, var(--saas-accent)); border-bottom: 2px solid var(--saas-accent-text, var(--saas-accent)); transform: rotate(-45deg); transform-origin: center; } /* -- Usage status badge (FR-ENT-007) ------------------------------------ V_MY_USAGE carries USAGE_STATE (a machine value, which is what picks the class here) and USAGE_STATE_LABEL (the sentence a customer reads). The column's HTML expression uses one for each, because deriving a class name from prose breaks the first time the prose is reworded, and printing 'AT_LIMIT' on a billing page looks unfinished. Not scoped to a theme: every colour below resolves from tokens that are defined at :root for light and redefined in the dark block, so this rule is written once and is correct in both. Every pairing is measured - the light set runs 5.23:1 to 6.64:1, the dark set 4.77:1 to 7.24:1, all above AA for normal text at this size. OK and UNLIMITED are deliberately NEUTRAL rather than green: a table where every healthy row is coloured trains people to ignore colour, which costs exactly the row that is trying to warn them. */ .saas-usageState { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.6; white-space: nowrap; color: var(--saas-neutral-text); background-color: var(--saas-tint-neutral); } .saas-usageState--APPROACHING, .saas-usageState--AT_LIMIT { color: var(--saas-warning-text); background-color: var(--saas-tint-warning); } .saas-usageState--OVER { color: var(--saas-danger-text); background-color: var(--saas-tint-danger); } /* -- Page 25's state carrier ------------------------------------------- The invitation token and the three values derived from it live in their own region so they ALWAYS render, and therefore always submit. APEX does not submit an item whose region it did not draw, and every other region on that page is conditional - which is how P25_TOKEN came to be missing for the anonymous invitee the page exists for. A region needs a template to render at all, so it has one and is hidden here rather than being left template-less. */ .saas-stateCarrier { display: none; } /* -- The pages somebody sees before they are signed in ------------------- Sign in, forgot password, set a new password, accept an invitation, create an account, confirm registration. These use the Minimal (No Navigation) template, so the content region is the whole viewport wide - and a single email field stretched across 1500px reads as an unfinished form rather than a considered one. Every sign-in page in every product is a narrow column for the same reason: there is one thing to do and the eye should not have to hunt for it. Targeted with APEX's own page-N class on , so no page markup has to know about it. */ html.page-2 .t-Body-contentInner, html.page-3 .t-Body-contentInner, html.page-25 .t-Body-contentInner, html.page-28 .t-Body-contentInner, html.page-29 .t-Body-contentInner { max-width: 32rem; margin-left: auto; margin-right: auto; padding-top: 2.5rem; } /* The one action on the page should not be hiding in the bottom-right corner of a card that is now half the width it was designed for. A sign-in form has exactly one thing to press and it should look like it. */ html.page-2 .t-Region-buttons-right, html.page-3 .t-Region-buttons-right, html.page-25 .t-Region-buttons-right, html.page-28 .t-Region-buttons-right, html.page-29 .t-Region-buttons-right { width: 100%; } html.page-2 .t-Region-buttons-right .t-Button, html.page-3 .t-Region-buttons-right .t-Button, html.page-25 .t-Region-buttons-right .t-Button, html.page-28 .t-Region-buttons-right .t-Button, html.page-29 .t-Region-buttons-right .t-Button { width: 100%; justify-content: center; } /* Nobody is signed in on these pages, so the header should not greet anyone. The nav bar's own entries already hide themselves from the public user; this catches the account menu, which does not. */ html.page-2 .t-NavigationBar, html.page-3 .t-NavigationBar, html.page-25 .t-NavigationBar, html.page-28 .t-NavigationBar, html.page-29 .t-NavigationBar { display: none; } /* Forgot-password and create-account, under the sign-in button. */ .saas-loginLinks { margin: 1rem 0 0; font-size: 13px; text-align: center; color: var(--saas-muted); } /* -- The line under the sign-in card ------------------------------------ Forgot-password, and Create an account when sign-up is on. It is a footnote, not a section: APEX gives every region a heading and a panel by default, and a bordered box captioned "Account help" under a login form is the shape of software nobody designed. Stripped to what it is - one quiet line, the same width as the card above it. */ .saas-loginHelp { background: none; border: 0; box-shadow: none; max-width: 22.5rem; margin: 0 auto; } .saas-loginHelp .t-Region-header { display: none; } .saas-loginHelp .t-Region-body { padding: 0; } .saas-loginLinks a { color: var(--saas-accent-text, var(--saas-accent)); }