/* =============================================================================
SOLARWINDS — Palette & Design Tokens (single source of truth for the SolarWinds brand)
=============================================================================
Scope : font, color palette and semantic tokens.
Loaded : by the SolarWinds templates (head_extra block).
Pairs : component styles (.sw-*) live in app/static/css/tailwind-input.css
under the "SOLARWINDS — Design System components" section.
Icons : official SolarWinds assets in app/static/img/svg-icon/ —
solarwinds.svg (wordmark) and SWI.svg (the SolarWinds mark).
SOURCE OF THE VALUES BELOW
The palette is taken from SolarWinds' own published vector logo, which is the
authoritative carrier of their brand colors, and cross-checked against the
legacy values that were already in the stylesheet:
solarwinds.svg -> .st2 fill #FF6200 (wordmark) .st0 fill #6E8C96 (mark)
SWI.svg -> .s0 fill #FF6200 (mark)
So SolarWinds Orange is #FF6200 and SolarWinds Silver is #6E8C96.
Legacy spike: solarwinds.com is behind a WAF that returns 403/“Access Denied”
to automated browsers, so the live site could not be measured the way Red Hat
(redhat.com) and Google Cloud (cloud.google.com) were. The previous stylesheet
carried a second, older orange (#F47B20, the pre-2021 wordmark color) and a set
of teal/blue accents (#00C8DC, #00A0BE, #006482) that appear in no SolarWinds
brand asset in this repository. Those aliases are gone: nothing referenced them,
and a hue that is in no SolarWinds asset has no business on a SolarWinds page.
NEVER hard-code a hex value in .sw-* component rules; use a token from here.
============================================================================= */
/* ---------------------------------------------------------------------------
1. FONT — SolarWinds' corporate typeface is not published for third-party
use, so the brand pages use Inter. Inter is already declared and preloaded
once for the whole site in app/templates/base.html (weights 400-800,
app/static/fonts/inter/), so this file only names it as the brand font
below and does NOT repeat the @font-face rules.
This replaces the previous render-blocking Google Fonts CDN on the
SolarWinds pages — nine of them: solarwinds.html asked for Inter while each
of the eight product templates asked for Roboto, so a single brand rendered
in two different typefaces and made nine third-party requests.
--------------------------------------------------------------------------- */
:root {
/* -------------------------------------------------------------------------
2. BRAND ORANGE SCALE — SolarWinds Orange #FF6200 is the only saturated
hue in the identity; everything else is its silver and the neutrals.
------------------------------------------------------------------------- */
--sw-orange-10: #fff4eb; /* Tint / icon well on light */
--sw-orange-20: #ffe0c7;
--sw-orange-30: #ffbe8a;
--sw-orange-40: #ff9a4d;
--sw-orange-50: #ff6200; /* SOLARWINDS ORANGE — logo, buttons, accents */
--sw-orange-60: #e55800; /* Hover */
--sw-orange-70: #b34400; /* Brand orange for TEXT on light (4.9:1 on white) */
--sw-orange-80: #8a3400; /* Text on tint, deep gradient anchor */
--sw-orange-glow: rgba(255, 98, 0, 0.15);
/* -------------------------------------------------------------------------
3. SILVER SCALE — SolarWinds Silver #6E8C96 is the logo's companion hue.
------------------------------------------------------------------------- */
--sw-silver-10: #eef3f4;
--sw-silver-20: #d8e3e3;
--sw-silver-30: #b9cdd0;
--sw-silver-40: #8fb5bc;
--sw-silver-50: #6e8c96; /* SOLARWINDS SILVER — the mark */
--sw-silver-60: #587078;
--sw-silver-70: #43565c;
/* -------------------------------------------------------------------------
4. NEUTRALS — SolarWinds uses a true black for dark surfaces, not a navy.
The previous stylesheet reused one name for three different greys, which
is why cards and sections drifted apart; each step is now explicit.
------------------------------------------------------------------------- */
--sw-black: #000000;
--sw-gray-95: #121212;
--sw-gray-90: #1c1c1c; /* Dark surface */
--sw-gray-85: #2a2a2a; /* Secondary dark surface / card on dark */
--sw-gray-70: #3d3d3d;
--sw-gray-50: #6b6b6b;
--sw-gray-30: #d5d9dc; /* Hairlines */
--sw-gray-15: #eef0f2;
--sw-gray-10: #f5f7f8; /* Alt light surface */
--sw-gray-05: #f8f9fa; /* Light surface */
--sw-white: #ffffff;
/* Status — kept off the brand hues so alerts never read as branding. */
--sw-danger: #d92d20;
--sw-warning: #dc6803;
--sw-success: #12a150;
/* -------------------------------------------------------------------------
5. SEMANTIC TOKENS — what components actually consume
------------------------------------------------------------------------- */
--sw-brand: var(--sw-orange-50);
--sw-brand-hover: var(--sw-orange-60);
--sw-brand-text: var(--sw-orange-70); /* On light — WCAG AA */
--sw-brand-on-dark: var(--sw-orange-40); /* On #1c1c1c — 5.9:1 */
--sw-brand-tint: var(--sw-orange-10);
--sw-brand-tint-text: var(--sw-orange-80);
--sw-link: var(--sw-orange-70);
--sw-link-on-dark: var(--sw-orange-40);
/* Surfaces */
--sw-surface-light: var(--sw-white);
--sw-surface-alt: var(--sw-gray-05);
--sw-surface-gray: var(--sw-gray-10);
--sw-surface-dark: var(--sw-gray-90);
--sw-surface-dark-2: var(--sw-gray-85);
/* Text */
--sw-text-heading: var(--sw-gray-90);
--sw-text-body: #4a5568; /* 7.6:1 on white */
--sw-text-muted: #5c6675; /* 5.9:1 on white */
--sw-text-on-dark: var(--sw-white);
--sw-text-on-dark-muted: rgba(255, 255, 255, 0.78); /* 9.4:1 on #1c1c1c */
/* Borders */
--sw-border: var(--sw-gray-30);
--sw-border-light: var(--sw-gray-15);
--sw-border-on-dark: rgba(255, 255, 255, 0.14);
/* Gradients */
--sw-gradient-orange: linear-gradient(135deg, var(--sw-orange-50) 0%, var(--sw-orange-40) 100%);
--sw-gradient-dark: linear-gradient(180deg, var(--sw-gray-90) 0%, var(--sw-gray-85) 100%);
/* Typography — split the way the shared component contract expects (display for
headings, text for body), both resolving to the same self-hosted Inter. */
--sw-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--sw-font-text: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--sw-font: var(--sw-font-text);
/* -------------------------------------------------------------------------
6. CONTRACT TOKENS — the names the shared component section consumes.
Kept identical to the Red Hat / Microsoft / Google Cloud vocabulary so the
same component anatomy can be themed per brand without new CSS shapes.
------------------------------------------------------------------------- */
--sw-accent-2: var(--sw-silver-40); /* secondary accent, overridden per theme */
--sw-accent-2-ink: #1c1c1c; /* rides on --sw-accent-2; >=6.16:1 on all themes */
--sw-border-strong: var(--sw-gray-30);
--sw-brand-deep: var(--sw-orange-80);
/* The CTA is solid brand orange carrying #121212 ink (>=6.4:1 on both stops); white on
#FF6200 is only 3.00:1, so no white text may sit on this gradient. */
--sw-gradient-cta: linear-gradient(110deg, var(--sw-orange-50) 0%, var(--sw-orange-40) 100%);
/* Hero chrome, overridden per product by a `.sw-theme-` block. */
--sw-hero-bg: linear-gradient(135deg, var(--sw-gray-95) 0%, var(--sw-gray-90) 55%, var(--sw-orange-80) 100%);
--sw-hero-glow: rgba(255, 98, 0, 0.22);
--sw-hero-glow-2: rgba(110, 140, 150, 0.18);
/* Deep step of the brand hue, used as a gradient anchor. */
--sw-orange-70-deep: var(--sw-orange-80);
/* Shape & motion */
--sw-radius-sm: 6px;
--sw-radius-md: 10px;
--sw-radius-lg: 16px;
--sw-radius-pill: 9999px;
--sw-shadow-card: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.1);
--sw-shadow-card-hover: 0 12px 24px -6px rgba(16, 24, 40, 0.14), 0 4px 8px -4px rgba(16, 24, 40, 0.08);
--sw-ease: 0.25s ease;
/* -------------------------------------------------------------------------
6. DEPRECATED ALIASES — do not use in new rules.
Migrated straight from the old scattered :root blocks so existing .sw-*
component rules keep rendering while they are converted to the tokens
above. Every one of these resolves to an official value.
------------------------------------------------------------------------- */
--sw-orange: var(--sw-orange-50);
--sw-orange-hover: var(--sw-orange-60);
--sw-orange-dark: var(--sw-orange-60);
--sw-orange-light: var(--sw-orange-10);
--sw-silver: var(--sw-silver-50);
--sw-mid-silver: var(--sw-silver-40);
--sw-light-silver: var(--sw-silver-20);
--sw-gray: var(--sw-gray-05);
--sw-dark: var(--sw-gray-90);
--sw-dark-secondary: var(--sw-gray-85);
--sw-text: #2d3748;
--sw-text-light: var(--sw-white);
--sw-text-dark: var(--sw-gray-90);
--sw-text-muted-legacy: #4a5568;
}
/* ---------------------------------------------------------------------------
7. PER-PRODUCT HERO THEMES
Each SolarWinds product gets its own hero gradient and secondary accent, the
same way `.rh-theme-` does for Red Hat. A component only ever reads the
tokens, so a new product needs a block here and nothing else.
Every value is drawn from the two SolarWinds scales — orange and silver —
plus the neutrals. An earlier revision gave each product an outside hue
(cyan, emerald, blue, violet, teal, amber, red, lime) for the accent and the
hero wash, which put colours on a SolarWinds page that appear in no
SolarWinds asset. The products are told apart by WHICH step of the brand
scale they use and by the hero's angle, not by a foreign hue.
The accent always carries --sw-accent-2-ink (#1c1c1c), so only the steps that
clear 6.16:1 against it may be used here: orange 10-40 and silver 10-40.
--------------------------------------------------------------------------- */
.sw-theme-npm {
--sw-accent-2: var(--sw-orange-40);
--sw-hero-bg: linear-gradient(135deg, var(--sw-gray-95) 0%, var(--sw-gray-85) 55%, var(--sw-orange-80) 100%);
--sw-hero-glow: rgba(255, 98, 0, 0.22);
}
.sw-theme-sam {
--sw-accent-2: var(--sw-silver-40);
--sw-hero-bg: linear-gradient(120deg, var(--sw-gray-90) 0%, var(--sw-gray-95) 50%, var(--sw-orange-70) 100%);
--sw-hero-glow: rgba(110, 140, 150, 0.30);
}
.sw-theme-dpa {
--sw-accent-2: var(--sw-orange-30);
--sw-hero-bg: linear-gradient(150deg, var(--sw-gray-95) 0%, var(--sw-gray-90) 60%, var(--sw-orange-80) 100%);
--sw-hero-glow: rgba(255, 98, 0, 0.18);
}
.sw-theme-itsm {
--sw-accent-2: var(--sw-silver-30);
--sw-hero-bg: linear-gradient(165deg, var(--sw-gray-95) 0%, var(--sw-silver-70) 55%, var(--sw-orange-80) 100%);
--sw-hero-glow: rgba(110, 140, 150, 0.26);
}
.sw-theme-observability {
--sw-accent-2: var(--sw-orange-20);
--sw-hero-bg: linear-gradient(135deg, var(--sw-gray-90) 0%, var(--sw-gray-95) 45%, var(--sw-orange-80) 100%);
--sw-hero-glow: rgba(255, 98, 0, 0.26);
}
.sw-theme-sqlsentry {
--sw-accent-2: var(--sw-silver-20);
--sw-hero-bg: linear-gradient(105deg, var(--sw-gray-90) 0%, var(--sw-gray-85) 55%, var(--sw-orange-80) 100%);
--sw-hero-glow: rgba(110, 140, 150, 0.22);
}
.sw-theme-arm {
--sw-accent-2: var(--sw-orange-10);
--sw-hero-bg: linear-gradient(135deg, var(--sw-gray-95) 0%, var(--sw-silver-60) 60%, var(--sw-orange-80) 100%);
--sw-hero-glow: rgba(255, 98, 0, 0.16);
}
.sw-theme-sem {
--sw-accent-2: var(--sw-silver-10);
--sw-hero-bg: linear-gradient(140deg, var(--sw-gray-95) 0%, var(--sw-gray-90) 40%, var(--sw-orange-70) 100%);
--sw-hero-glow: rgba(110, 140, 150, 0.18);
}
.sw-theme-brand {
--sw-accent-2: var(--sw-silver-40);
--sw-hero-bg: linear-gradient(135deg, var(--sw-gray-95) 0%, var(--sw-gray-90) 50%, var(--sw-orange-70) 100%);
--sw-hero-glow: rgba(255, 98, 0, 0.22);
}