/* The theme tokens, shared by facecue.net and the documentation. * * ONE source, two builds. Eleventy passthrough-copies src/static to the site * root, so this lands at /assets/fc-tokens.css and site.css reads it. The MkDocs * hook at documentation/hooks/site_chrome.py adds the same file to the docs * build as stylesheets/fc-tokens.css, ahead of facecue.css, which reads it too. * The WebGL demo template carries its own copy of the handful it needs, because * a build has to stand on its own wherever it is hosted. * * ⛔ Edit this file, never a built copy, and never re-declare one of these * tokens in site.css or in the documentation's dark scheme. A palette decision * is one edit here. The preview panel's Copy CSS writes changed tokens in this * file's own form so they can be pasted straight in. * * Declared on :root so both properties inherit them. The documentation's light * scheme re-declares the ones it changes on , which wins over :root for * everything on the page, so the toggle keeps working. * * The comments name the Unity editor colour each value was lifted from; the * rest are hand-tuned between two asset colours and kept as picked. */ :root { --fc-panel: #141414; /* PanelSurface */ --fc-section: #282726; /* SectionBackground */ --fc-section-header: #1E1D1C; /* SectionHeaderBackground, CardBackground, FieldBackground */ --fc-section-border: #3A3836; /* SectionBorder, HeadlessBoxBorder */ --fc-headless: #2E2D2C; /* HeadlessBoxBackground */ --fc-callout: #1B1B1B; /* CalloutBoxBackground */ --fc-callout-border: #6B5E38; /* CalloutBoxBorder */ --fc-hub-group: #2A2620; /* HubGroupBackground, HelpButtonBackground */ --fc-hub-tile: #1F1E1D; /* HubTileBackground */ --fc-hub-tile-hover: #3D382E; /* HubTileHoverBackground */ --fc-hairline: #7A6A40; /* TitleHairlineColor, HubDividerColor, CardBorder */ --fc-text: #CCCCCC; /* BodyText */ --fc-text-bright: #E6E6E6; /* FieldLabelColor */ --fc-text-label: #DBDBE0; /* HubSectionHeaderColor, HubTileLabelColor */ --fc-text-muted: #8A857F; /* SubtitleText */ --fc-text-disabled: #706A63; /* DisabledText */ --fc-text-body-soft: #A8A8B2; /* HubSettingsBodyColor */ --fc-tan: #D0C090; /* TitleText, HeaderText, HubTileAccentColor */ --fc-tan-bright: #E6D8A8; --fc-gold: #C09A5C; /* FoldoutArrowColor, SliderHandleFill, OneClickWizardLinkColor */ --fc-amber: #BB8F1C; /* HelpButtonGlyphColor */ --fc-olive: #6A5A4A; /* PopupSelectionBackground, the active segment */ --fc-olive-deep: #4D4030; --fc-olive-dark: #322A1E; /* ToggleOnBackground, GutterPickerBackground */ /* Derived, not lifted: the asset has no warm off-white, only neutral whites and full tan. These sit between the two for copy that should read warm without reading tan. */ --fc-warm-white: #E5E0D5; --fc-warm-grey: #C7C1B6; /* Hand-tuned between two asset colours and kept as picked. The surface is 1.4 off the region bottom bar and 2.8 off the Hub group, the line is 9 off the gutter-picker border, the rail is 11 off the field text colour. */ --fc-warm-surface: #282622; --fc-warm-line: #5E5542; --fc-warm-rail: #B39C6F; /* Nearest asset colours, for the record: the amber is 23 off TierAdvanced, the warm hover 1.4 off the Hub group, the neutral hover 2 off the picker's own hover. */ --fc-amber-bright: #D6A64B; --fc-warm-hover: #2B2720; --fc-neutral-hover: #2E2C29; /* Outlines, same story. Nearest, in order: 9 off ButtonBackground, 12 off the callout border, 5 off the region bottom bar's border, 18 off the slider handle's. */ --fc-grey-line: #413F3F; --fc-olive-line: #68592D; --fc-sand-line: #494436; --fc-bronze-line: #694521; --fc-button: #47433F; /* ButtonBackground */ --fc-button-hover: #59544F; /* ButtonBackgroundHover */ --fc-button-label: #BAAB81; /* ButtonLabelColor */ --fc-button-border: #222121; /* ButtonBorderColor */ --fc-tier-basic: #4A8F56; /* TierBasic */ --fc-tier-advanced: #C0A04A; /* TierAdvanced */ --fc-tier-expert: #B85050; /* TierExpert */ --fc-expert-fill: #7A3A3A; /* The three signal colours, and the blue the editor selects with. Shared by every palette on purpose: a warning means the same thing whatever the page is wearing. */ --fc-red: #F27373; /* WindowHeaderErrorText */ --fc-yellow: #F2C766; /* WindowHeaderWarningText */ --fc-green: #5CB85C; --fc-blue: #73A2E6; /* SelectedLabel */ --fc-warning: var(--fc-yellow); --fc-warning-border: #B38C40; /* SectionWarningBorder */ --fc-warning-bg: #2C2721; /* over SectionWarningBodyBackground #33291A */ --fc-error: var(--fc-red); --fc-error-border: #A64D4D; /* SectionErrorBorder */ --fc-error-bg: #322525; /* over SectionErrorBodyBackground #362121 */ --fc-ok: var(--fc-green); --fc-selection: var(--fc-blue); /* How far the warning and danger callouts tint toward their signal colour. 0 is the ordinary bright text, the way the tip callout reads; 1 is the full signal colour. Text and icon are separate dials, because the icon is a mark that should stay unambiguous while the heading beside it stays readable. */ --fc-alert-tint: 0.35; --fc-alert-icon-tint: 1; /* Screenshot corner rounding, in px. */ --fc-figure-radius: 3px; /* Edge-fade figures: how far in from each edge the image dissolves into the page, and how much of it is left at the very edge (0 is gone, 1 is a hard edge). Read only when carries data-fc-figure="fade". */ --fc-figure-fade: 4px; --fc-figure-fade-edge: 0; /* Syntax colours. VS Code's Dark+, the most familiar dark IDE scheme: a reader who writes C# has seen these exact hues every day. */ --fc-code-comment: #6A9955; --fc-code-keyword: #569CD6; --fc-code-string: #CE9178; --fc-code-number: #B5CEA8; --fc-code-function: #DCDCAA; --fc-code-type: #4EC9B0; --fc-code-name: #9CDCFE; --fc-code-constant: #4FC1FF; --fc-code-operator: #D4D4D4; --fc-code-special: #C586C0; }