/* ============================================================================= * OpenVPN Design System 1.0 — tokens, as plain CSS * ============================================================================= * EXTRACTED once, on 2026-09-22 (WEB-2030), from: * @ovpn/ui@2.8.0 (bitbucket:openvpntechnologies/design-system-ui) * @website/shared@3.3.3-beta.1 * * There is no import and no generator here on purpose. @ovpn/ui is React + * styled-components on a private Artifactory registry and ships no .css at all * — its tokens are declared at runtime by createGlobalStyle — so a non-React * consumer has to carry the values. The design system moves roughly once a * year; a script that only runs on a machine with the website checkout beside * this one was more moving parts than that is worth. * * So: edit this file by hand. Each block below names the file it came from. * * [EMITTED] the DS itself declares this exact custom property at :root. * Name AND value are verbatim, so this is diffable: open the * named file in a checkout that has @ovpn/ui installed and * compare. Anything different is a real design-system change. * [DERIVED] the DS keeps this as a plain JS number and never emits CSS. * The value is verbatim; the custom-property NAME is ours. * [OURS] the DS has no such token; the name AND value are this app's, * justified inline. * * To refresh after an @ovpn/ui bump, from a repo that has it installed: * grep -o 'makeCSSVar("[^"]*","[^"]*")' \ * node_modules/@ovpn/ui/tokens/{color/color,color/gradient,shadow/shadow,outline/outline}.js * gives 83 of the 86 [EMITTED] pairs. The 3 --g-* gradients are missed because * gradient.js writes them as backtick templates that interpolate other tokens * (`${color.secondary.light}` -> var(--c-secondary-light)); read that one file * by eye. The [DERIVED] blocks come from tokens/typography/typography.js, * tokens/breakpoint/breakpoint.js and @website/shared/styles/spacings.js. * See ../../README.md. * ========================================================================== */ :root { /* --------------------------------------------------------------------------- * COLOR [EMITTED] @ovpn/ui/tokens/color/color.js * ------------------------------------------------------------------------ */ /* neutral */ --c-neutral-white: #FFFFFF; --c-neutral-offWhite: #FCFCFD; --c-neutral-bg: #F9FAFB; --c-neutral-bgHover: #EFF1F5; --c-neutral-light: #DCDFEA; --c-neutral-border: #B9C0D4; --c-neutral-borderHover: #7D89B0; --c-neutral-disabled: #5D6B98; --c-neutral-placeholder: #5D6B98; --c-neutral-subtitle: #4A5578; --c-neutral-body: #404968; --c-neutral-section: #30374F; --c-neutral-title: #111322; /* brand */ --c-brand-blue: #1A3967; --c-brand-blueHover: #2C3A61; --c-brand-blueActive: #162146; --c-brand-blueOriginal: #1A3967; --c-brand-orange: #ED7F22; --c-brand-orangeHover: #E06F10; --c-brand-orangeActive: #D0650B; /* primary */ --c-primary-base: #1652B8; --c-primary-baseHover: #3F67D1; --c-primary-baseActive: #2342BA; --c-primary-light: #9EC4FF; --c-primary-lightHover: #B0D2FF; --c-primary-lightActive: #7AA9FF; /* secondary */ --c-secondary-base: #FFA54A; --c-secondary-baseHover: #F09A51; --c-secondary-baseActive: #FF8D1A; --c-secondary-light: #F3A053; --c-secondary-lightHover: #F6B264; --c-secondary-lightActive: #EC7C31; /* info */ --c-info-base: #3B91F1; --c-info-baseHover: #49A4F5; --c-info-baseActive: #4C89F1; --c-info-light: #D7E6F7; --c-info-lightHover: #E1EDF9; --c-info-lightActive: #C3D8F2; /* success */ --c-success-base: #11A76E; --c-success-baseHover: #14B87F; --c-success-baseActive: #0D734B; --c-success-light: #B1EFCD; --c-success-lightHover: #C3F4DA; --c-success-lightActive: #90E6B5; /* attention */ --c-attention-base: #EDBD43; --c-attention-baseHover: #F2CC52; --c-attention-baseActive: #E3A025; --c-attention-light: #F6E3B9; --c-attention-lightHover: #F9EAC8; --c-attention-lightActive: #B3914E; /* warning */ --c-warning-base: #BB1139; --c-warning-baseHover: #CA1646; --c-warning-baseActive: #9D071E; --c-warning-light: #F8DDE2; --c-warning-lightHover: #FAE7E9; --c-warning-lightActive: #F4CBD3; /* data */ --c-data-resolutionBlue: #2B3D6B; --c-data-slateBlue: #5B62D5; --c-data-skyBlue: #9BBFF7; --c-data-romanRed: #D75D64; --c-data-celadonGreen: #A5DEAF; --c-data-trueViolet: #8F72CB; --c-data-jordyBlue: #969BEA; --c-data-cherokeeYellow: #F3D383; --c-data-crustaOrange: #F18765; --c-data-lochinvarGreen: #488A7A; --c-data-feijoaGreen: #B0DC77; --c-data-periwinkle: #D8DAF7; /* --------------------------------------------------------------------------- * GRADIENT [EMITTED] @ovpn/ui/tokens/color/gradient.js * ------------------------------------------------------------------------ */ --g-secondary-default: linear-gradient(103.36deg, #FC987B 0.96%, var(--c-secondary-light) 100%); --g-secondary-hover: linear-gradient(103.36deg, #FDAA8E 0.96%, var(--c-secondary-lightHover) 100%); --g-secondary-active: linear-gradient(103.36deg, #FA7355 0.96%, var(--c-secondary-lightActive) 100%); /* --------------------------------------------------------------------------- * SHADOW [EMITTED] @ovpn/ui/tokens/shadow/shadow.js * ------------------------------------------------------------------------ */ --sh-xs: 0 1px 2px 0 hsla(220, 43%, 11%, 0.05); --sh-sm: 0px 1px 3px hsla(220, 43%, 11%, 0.06), 0px 1px 2px hsla(220, 43%, 11%, 0.1); --sh-md: 0px 4px 8px -2px hsla(220, 43%, 11%, 0.06), 0px 2px 4px -2px hsla(220, 43%, 11%, 0.1); --sh-lg: 0px 12px 16px -4px hsla(220, 43%, 11%, 0.03), 0px 4px 6px -2px hsla(220, 43%, 11%, 0.08); --sh-xl: 0px 20px 24px -4px hsla(220, 43%, 11%, 0.03), 0px 8px 8px -4px hsla(220, 43%, 11%, 0.08); --sh-2xl: 0px 24px 48px -12px hsla(221, 43%, 11%, 0.18); --sh-3xl: 0px 32px 64px -12px hsla(221, 43%, 11%, 0.14); /* --------------------------------------------------------------------------- * OUTLINE (focus rings) [EMITTED] @ovpn/ui/tokens/outline/outline.js * Applied as box-shadow, e.g. Button: &:focus { box-shadow: var(--o-primary) } * ------------------------------------------------------------------------ */ --o-primary: 0px 1px 2px rgba(59, 145, 241, 0.05), 0px 0px 0px 4px rgba(59, 145, 241, 0.4); --o-primary-inset: inset 0px 1px 2px rgba(59, 145, 241, 0.05), inset 0px 0px 0px 4px rgba(59, 145, 241, 0.4); --o-warning: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px rgba(240, 68, 56, 0.1); --o-warning-inset: inset 0px 1px 2px rgba(16, 24, 40, 0.05), inset 0px 0px 0px 4px rgba(240, 68, 56, 0.1); --o-info: 0px 0px 0px 4px rgba(59, 145, 241, 0.45); --o-info-inset: inset 0px 0px 0px 4px rgba(59, 145, 241, 0.45); --o-neutral: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06), 0px 0px 0px 4px #F2F4F7; --o-neutral-inset: inset 0px 1px 3px rgba(16, 24, 40, 0.1), inset 0px 1px 2px rgba(16, 24, 40, 0.06), inset 0px 0px 0px 4px #F2F4F7; /* --------------------------------------------------------------------------- * TYPOGRAPHY [DERIVED] @ovpn/ui/tokens/typography/typography.js * DS stores unitless numbers; px added here. Pair --fs-X with --lh-X. * Letter-spacing is NOT in @ovpn/ui — see --ls-* below (website-only). * ------------------------------------------------------------------------ */ --fs-text-xs: 12px; --fs-text-sm: 14px; --fs-text-md: 16px; --fs-text-lg: 18px; --fs-display-sm: 20px; --fs-display-md: 24px; --fs-display-lg: 32px; --fs-display-xl: 36px; --fs-display1-xl: 48px; --fs-display2-xl: 60px; --lh-text-xs: 16px; --lh-text-sm: 20px; --lh-text-md: 24px; --lh-text-lg: 28px; --lh-display-sm: 30px; --lh-display-md: 32px; --lh-display-lg: 40px; --lh-display-xl: 44px; --lh-display1-xl: 60px; --lh-display2-xl: 72px; --fw-regular: 400; --fw-medium: 500; --fw-semi-bold: 600; /* letter-spacing [DERIVED] website-headless-frontend/src/shared/entities/ * deprecated-entities.ts (fontStack). Only the display sizes are non-zero. * Marked @deprecated there — "to be deleted after Tailwind is dropped" — * so treat as website convention, not as DS law. */ --ls-display-2xl: -0.02em; --ls-display-1xl: -0.02em; --ls-display-xl: -0.02em; /* everything below displayXl: 0 */ /* --------------------------------------------------------------------------- * SPACING [DERIVED] @website/shared/styles/spacings.js (Spacing) * NOT part of @ovpn/ui — the DS has no spacing scale. This is the website's, * mirrored in website-headless-frontend/tailwind.config.ts (which omits xl:56). * ------------------------------------------------------------------------ */ --sp-xxxs: 4px; --sp-xxs: 8px; --sp-xs: 16px; --sp-sm: 24px; --sp-md: 32px; --sp-lg: 48px; --sp-xl: 56px; /* @website/shared only — absent from tailwind.config.ts */ --sp-xxl: 64px; --sp-xxxl: 96px; /* --------------------------------------------------------------------------- * RADIUS [DERIVED] observed convention, not a token anywhere. * Frequency across @ovpn/ui@2.8.0: 8px x21, 4px x21, 50% x9, 12px x4, 20px x3. * Button/Input/Checkbox = 4px; Card/Modal/Dropdown surfaces = 8px; pills = 999px. * ------------------------------------------------------------------------ */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px; --radius-full: 50%; /* --------------------------------------------------------------------------- * BREAKPOINTS [DERIVED] custom properties do NOT work in @media queries. * Kept here as documentation only — hard-code the px in the @media rule. * ------------------------------------------------------------------------ */ /* @ovpn/ui/tokens/breakpoint/breakpoint.js (max-width semantics in DS usage) */ --bp-ds-xxl: 1920px; --bp-ds-xl: 1440px; --bp-ds-lg: 1024px; --bp-ds-md: 768px; --bp-ds-sm: 480px; /* @website/shared/styles/breakpoints.js — "approved by Matt Lord", WEB-150. * These are the ones the marketing site actually uses (min-width). */ --bp-web-xs: 639px; --bp-web-sm: 768px; --bp-web-nav992: 992px; --bp-web-md: 1024px; --bp-web-lg: 1280px; /* --------------------------------------------------------------------------- * FONT FAMILY [DERIVED] tailwind.config.ts -> fontFamily.sans * ------------------------------------------------------------------------ */ --font-sans: Inter, sans-serif; /* --------------------------------------------------------------------------- * MOTION [OURS] the DS has no motion tokens. motion.js reads these too, so * JS-sequenced choreography runs on the same numbers as the CSS. * ------------------------------------------------------------------------ */ --dur-fast: 160ms; /* tick, copy feedback, colour */ --dur-base: 240ms; /* collapse/expand, result landing, Next lighting, step change */ --dur-slow: 400ms; /* ring closing, stage revealing a result */ --dur-ambient: 8s; /* the one loop: the active task's ring */ --ease-out: cubic-bezier(.2, .8, .2, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1); /* --------------------------------------------------------------------------- * COLOUR [OURS] tints the DS lacks. Contrast measured 2026-09-22 (WCAG AA). * ------------------------------------------------------------------------ */ --c-expected-bg: #FFF4E8; /* "…, as expected" pill; --c-expected-fg on it 5.77:1 */ --c-expected-fg: #9A4A06; --c-success-tint: #E3F8EE; /* --c-success-baseActive on it 5.30:1 */ --c-info-tint: #F3F7FD; /* knowledge card */ --c-active-tint: #FFF8F1; /* active task; --c-neutral-placeholder on it 4.96:1 */ --c-stage-ink: #C9D2EA; /* caption on --c-brand-blueActive, 10.37:1 */ --c-browser-chrome: #E9ECF3; /* inactive tab strip of the stage browser frame */ --sh-stage: 0 32px 64px -12px hsla(221, 43%, 5%, 0.45); /* --sh-3xl, darkened for navy */ }