/** * Apify dark theme for the Ashby job board. Dark mode only — there is no light variant. * * Token values are copied from apify-core: * neutrals → src/packages/ui-library/src/design_system/colors/generated/css_variables_brand_neutrals.dark.ts * the rest → src/packages/ui-library/src/design_system/colors/generated/css_variables.dark.ts * Only the tokens the Ashby bundle actually consumes are declared, so re-copy * from those two files if the brand palette changes. * * Ashby's ramps run light -> dark (000 = white, 900 = darkest ink). Every ramp * below is therefore INVERTED, not substituted position-for-position: 000 * becomes the darkest surface and 900 the lightest text. This keeps the * dual-purpose tokens correct — e.g. --colorNeutral000 is both the card surface * and the label colour on a solid primary button, and a dark value works for * both once --colorPrimary600 is a light blue. * * NOT set here: --colorPrimary600 and --colorPrimary900. Ashby inlines those on * the element from the admin theme, and an inline style beats any * stylesheet rule. Set them in Ashby admin -> Theme: * Primary 600 (base) #528FFF * Primary 900 (hover) #7AA8FF */ :root { /* Apify brand dark neutrals */ --color-neutral-background: #020202; --color-neutral-card-background: #0f0f0f; --color-neutral-card-background-hover: #1d1d1d; --color-neutral-border: #2a2a2a; --color-neutral-field-border: #454545; --color-neutral-icon-subtle: #6d6d6d; --color-neutral-text-placeholder: #7b7b7b; --color-neutral-text-subtle: #888888; --color-neutral-text-muted: #a3a3a3; --color-neutral-text: #dfdfdf; /* Apify standard dark accents */ --color-primary-action: #528fff; --color-primary-action-hover: #7aa8ff; --color-primary-icon: #246dff; --color-primary-border-subtle: #1e52e0; --color-primary-background: #152447; --color-primary-background-subtle: #0f192f; --color-primary-background-hover: #1d41af; --color-primary-chip-background: #152447; --color-primary-chip-text: #97bcff; --color-danger-background: #672523; --color-danger-icon: #ef6045; --color-danger-text: #ff7157; --color-danger-chip-text: #fe9e8a; --color-success-background: #14441f; --color-success-action: #23a64a; --color-success-text: #3bb358; --color-warning-background-subtle: #301806; --color-warning-background: #5d2e0e; --color-warning-border: #a56909; --color-warning-text: #f9ce4b; --color-rose-light: #e88bb3; /* --- Ashby: surfaces --- */ --colorAppBackground: var(--color-neutral-background); --colorNeutral000: var(--color-neutral-background); --colorNeutral100: var(--color-neutral-background); /* --- Ashby: borders, weakest to strongest --- */ --colorNeutral200: var(--color-neutral-border); --colorNeutral300: var(--color-neutral-field-border); --colorNeutral400: var(--color-neutral-icon-subtle); /* --- Ashby: text, faintest to strongest --- */ --colorNeutral500: var(--color-neutral-text-placeholder); --colorNeutral600: var(--color-neutral-text-subtle); --colorNeutral700: var(--color-neutral-text-muted); --colorNeutral800: var(--color-neutral-text); /* 900 is referenced by Ashby (filter-select text, card headings) but never defined by them, so it must be declared or the property is dropped. */ --colorNeutral900: var(--color-neutral-text); /* --- Ashby: alpha neutrals. Dark ink on light inverted to light ink on dark, alpha preserved. Only 300A is used by today's bundle; the rest are declared so a future Ashby bundle can't reintroduce black ink. --- */ --colorNeutral000A: rgba(255, 255, 255, 0); --colorNeutral100A: rgba(255, 255, 255, 0.03); --colorNeutral200A: rgba(255, 255, 255, 0.1); --colorNeutral300A: rgba(255, 255, 255, 0.16); --colorNeutral400A: rgba(255, 255, 255, 0.24); --colorNeutral500A: rgba(255, 255, 255, 0.34); --colorNeutral600A: rgba(255, 255, 255, 0.51); --colorNeutral700A: rgba(255, 255, 255, 0.67); --colorNeutral800A: rgba(255, 255, 255, 0.78); /* Must stay the zero-alpha form of the token it fades from — Ashby uses the pair in one gradient. */ --colorNeutral100Transparent: rgba(29, 29, 29, 0); --colorNeutral600Transparent: rgba(136, 136, 136, 0.25); /* --- Ashby: shadows. Tinted shadows read as haze on a near-black page. --- */ --colorNeutralShadow: rgba(0, 0, 0, 0.6); --colorPrimaryShadow: rgba(0, 0, 0, 0.6); /* --- Ashby: primary. 600 and 900 come from the admin theme, see header. --- */ --colorPrimary000: var(--color-primary-background-subtle); --colorPrimary200: var(--color-primary-chip-background); --colorPrimary800: var(--color-primary-chip-text); --colorPrimary500A: rgba(82, 143, 255, 0.24); --colorShadowPrimaryLight: rgba(82, 143, 255, 0.24); --colorShadowPrimaryXLight: rgba(82, 143, 255, 0.12); /* Focus-ring accent. */ --colorSecondary900: var(--color-rose-light); /* --- Ashby: negative. 800 stays the light tone because Ashby paints solid badges with it and puts 200/Neutral000 on top as text. --- */ --colorNegative200: var(--color-danger-background); --colorNegative500: var(--color-danger-icon); --colorNegative600: var(--color-danger-text); --colorNegative800: var(--color-danger-text); --colorNegative900: var(--color-danger-chip-text); --color-danger: var(--color-danger-text); /* --- Ashby: positive --- */ --colorPositive200: var(--color-success-background); --colorPositive600: var(--color-success-action); --colorPositive800: var(--color-success-text); /* --- Ashby: warning. 600 is a badge/banner background with 800/900 as its text, so it stays light and 800/900 stay dark. --- */ --colorWarning100: var(--color-warning-background-subtle); --colorWarning500: var(--color-warning-border); --colorWarning600: var(--color-warning-text); --colorWarning700: var(--color-warning-text); --colorWarning800: var(--color-warning-background); --colorWarning900: var(--color-warning-background-subtle); /* --- Ashby: info ramp, mapped onto the primary blues --- */ --colorInfo100: var(--color-primary-background-subtle); --colorInfo200: var(--color-primary-background-subtle); --colorInfo300: var(--color-primary-background); --colorInfo400: var(--color-primary-background); --colorInfo500: var(--color-primary-background-hover); --colorInfo600: var(--color-primary-border-subtle); --colorInfo700: var(--color-primary-border-subtle); --colorInfo800: var(--color-primary-icon); --colorInfo900: var(--color-primary-action); --colorInfo1000: var(--color-primary-action); --colorInfo1100: var(--color-primary-action-hover); --colorInfo1200: var(--color-primary-chip-text); }