/* dbt charts color palette — dbt Labs' orange on ink. Modeled on docs.getdbt.com, which is the same company's docs site and the nearest thing to a house style we have. Two things carried over from it: The header bar is WHITE, not orange. dbt puts the orange lockup on white and spends the orange on one CTA, the active nav item, and links. An orange bar would be louder than dbt's own docs and would swallow the mark, which is itself #FE6703. Orange is an accent, never a text color on white. #FE6703 measures 2.93:1 on white — fine as a 3px active-nav rule or a button fill under ink text, and unusable for body links. Anywhere orange has to carry text on a light ground it is darkened to #C24A02 (4.63:1). The six brand values match the dbt charts marketing theme, which sampled them from getdbt.com. Restated here rather than imported: that theme is compiled through a different pipeline, and sharing it would put this site's build downstream of one it should not depend on. Six colors is not worth that coupling — but there are two copies, so change both. */ /* Scoped to the scheme attribute, not `:root`. Material puts `data-md-color-scheme` on `` and defines the palette there, while `:root` is `` — so body computes its own values and every descendant inherits those, whatever `:root` says. It is proximity, not specificity: a `:root` override here is simply never consulted. With a white primary that meant `--md-typeset-a-color` stayed the primary and every body link rendered white on white. */ [data-md-color-scheme="default"] { /* Material paints the header bar in --md-primary-fg-color and its text in --md-primary-bg-color. White bar, ink on it. */ --md-primary-fg-color: #FFFFFF; --md-primary-fg-color--light: #FFFFFF; --md-primary-fg-color--dark: #F4F4F4; --md-primary-bg-color: #030711; --md-primary-bg-color--light: rgba(3, 7, 17, 0.62); /* Hover/focus accent. Material paints `.md-typeset a:focus,:hover` with this, so it carries text and cannot be the raw #FE6703 (2.93:1 on white) — that would regress the keyboard-focus state below the red it replaced. The raw brand orange is still the fill/rule accent elsewhere. */ --md-accent-fg-color: #C24A02; --md-accent-fg-color--transparent: rgba(254, 103, 3, 0.1); /* Body links carry text, so they take the darkened orange. */ --md-typeset-a-color: #C24A02; } /* The white header needs its own edge — on an orange bar the color change did that job. */ /* The header logo is the full dbt charts wordmark (the same artwork as the marketing site's lockup, apps/marketing-site/layouts/_partials/wordmark.html), not the square mark — give it wordmark proportions, and drop the site-name text beside it: the wordmark already says "dbt charts", and "Documentation" is carried by the page context. The ellipsis area keeps showing the page title on scroll as Material intends. */ .md-header__button.md-logo { padding-right: 0; } .md-header__button.md-logo img { height: 1.6rem; width: auto; } .md-header__topic:first-child { display: none; } .md-header { border-bottom: 1px solid #E3E3E3; box-shadow: none; } .md-header--shadow { box-shadow: none; } /* Dark mode: the bar becomes the brand ink rather than white, and the accent lightens because #C24A02 on a dark ground is the wrong direction. */ [data-md-color-scheme="slate"] { --md-primary-fg-color: #030711; --md-primary-fg-color--light: #14181F; --md-primary-fg-color--dark: #000000; --md-primary-bg-color: #FFFFFF; --md-primary-bg-color--light: rgba(255, 255, 255, 0.7); --md-accent-fg-color: #FE6703; --md-typeset-a-color: #FF8534; } [data-md-color-scheme="slate"] .md-header { border-bottom-color: #2A2E36; } /* Hide Print Version from navigation */ .md-nav__item:has(a[href*="print"]) { display: none !important; } /* Alternative selector for Material theme */ .md-nav__link[href*="print"] { display: none !important; } /* Hide from tabs navigation */ .md-tabs__item:has(a[href*="print"]) { display: none !important; } /* Reduce sidebar and TOC padding to give content more room */ .md-sidebar { padding-left: 0.6rem; padding-right: 0.6rem; } .md-sidebar--secondary { padding-left: 0.8rem; padding-right: 0.8rem; } /* Increase content max-width for more space */ .md-content { --md-content-max-width: 75rem; /* Increased from default ~60rem */ } .md-content__inner { max-width: 100%; } /* Ensure active navigation items are clearly highlighted. --md-typeset-a-color, NOT --md-primary-fg-color. Primary is the header bar's own color here (white in light, ink in dark), so deriving nav text from it paints white on white and ink on ink — the selected item vanishes in both schemes. It read fine only while primary happened to be a mid-tone red. */ .md-nav__link--active { color: var(--md-typeset-a-color); font-weight: 600; } .md-nav__item--active > .md-nav__link { color: var(--md-typeset-a-color); font-weight: 600; } /* ============================================ Code Block Styling - Match render_example ============================================ */ /* Material theme highlight blocks - add gray background */ .md-content .highlight { background-color: #f8f8f8 !important; border: 1px solid #e0e0e0; border-radius: 4px; box-sizing: border-box; overflow-x: auto; max-width: 100%; margin: 1em 0; } /* Pre elements inside highlight should inherit */ .md-content .highlight pre { background-color: transparent !important; margin: 0 !important; padding: 1em !important; overflow-x: auto; } /* Code inside pre */ .md-content .highlight pre code { background-color: transparent !important; white-space: pre; word-wrap: normal; display: block; } /* Standalone pre elements (not in highlight) */ .md-content pre:not(.highlight pre) { background-color: #f8f8f8 !important; border: 1px solid #e0e0e0; border-radius: 4px; box-sizing: border-box; padding: 1em; overflow-x: auto; max-width: 100%; } /* Ensure code blocks don't overflow container */ .md-content__inner > .highlight, .md-content__inner > pre { max-width: 100%; box-sizing: border-box; } /* Inline code styling */ .md-content code:not(pre code):not(.highlight code) { background-color: #f0f0f0; padding: 0.2em 0.4em; border-radius: 3px; font-size: 0.9em; } /* ============================================ Light Mode Syntax Highlighting Override dark Pygments colors for light background ============================================ */ /* Override Material theme CSS variables for code highlighting */ :root { /* Kept in step with the .nt rule below for consistency, but note it paints nothing: Material sets every --md-code-hl-* on `body`, and body is nearer than `:root` for every descendant, so its value wins. The color readers actually see comes from the .nt rule. */ --md-code-hl-keyword-color: #C24A02; --md-code-hl-name-color: #333; --md-code-hl-string-color: #059669; /* Green for strings */ --md-code-hl-number-color: #D97706; /* Orange for numbers */ --md-code-hl-comment-color: #6B7280; /* Gray for comments */ --md-code-hl-constant-color: #7C3AED; /* Purple for constants */ --md-code-hl-punctuation-color: #4B5563; } /* YAML Keys (Name.Tag) - darkened brand orange - with maximum specificity */ .md-content .highlight .nt, .md-content .yaml .nt, .highlight .nt, .yaml .nt { color: #C24A02 !important; } /* Strings - Green */ .md-content .highlight .s, .md-content .highlight .s1, .md-content .highlight .s2, .md-content .yaml .s, .md-content .yaml .s1, .md-content .yaml .s2 { color: #059669 !important; } /* Numbers - Orange */ .md-content .highlight .m, .md-content .highlight .mi, .md-content .highlight .mf, .md-content .yaml .m, .md-content .yaml .mi, .md-content .yaml .mf { color: #D97706 !important; } /* Keywords/Constants (true, false, null) - Purple */ .md-content .highlight .k, .md-content .highlight .kc, .md-content .yaml .k, .md-content .yaml .kc { color: #7C3AED !important; } /* Comments - Gray italic */ .md-content .highlight .c, .md-content .highlight .c1, .md-content .highlight .cm, .md-content .yaml .c, .md-content .yaml .c1, .md-content .yaml .cm { color: #6B7280 !important; font-style: italic; } /* Punctuation (colons, brackets, pipes) - Dark gray */ .md-content .highlight .p, .md-content .yaml .p { color: #4B5563 !important; } /* Names (SQL identifiers and unquoted YAML values) - readable on light code backgrounds */ .md-content .highlight .n, .md-content .highlight .no, .md-content .highlight .nx, .md-content .yaml .n, .md-content .yaml .no, .md-content .yaml .nx { color: #374151 !important; } /* Jinja expressions - Teal */ .md-content .highlight .si, .md-content .yaml .si { color: #0891B2 !important; } /* Default text - Dark */ .md-content .highlight, .md-content .yaml { color: #333 !important; } /* Dark mode code blocks */ [data-md-color-scheme="slate"] .md-content .highlight { background-color: #1e1e1e !important; border-color: #3a3a3a; } /* The dark scheme's code ground. The light #f8f8f8 above is set with !important and no scheme scope, so without these the slate token colors below (salmon, blue, green — all chosen for a dark ground) paint onto a near-white block: that is the "why does the dark mode code look like that" bug, and it is the background that is wrong, not the palette. Every selector here is example.css's own list with the scheme attribute prefixed, one-for-one. Anything less loses: example.css paints `.example-code *` AND `.example-code .yaml *`, the second of which is (0,2,0) — the same specificity a single-class override reaches — and example.css is loaded after this file, so it wins every tie. Both sides are !important, so specificity and order are all that decide it. */ [data-md-color-scheme="slate"] .md-content .highlight, [data-md-color-scheme="slate"] .md-content pre:not(.highlight pre), [data-md-color-scheme="slate"] .md-content .yaml, [data-md-color-scheme="slate"] .md-content code.language-yaml, [data-md-color-scheme="slate"] .example-container, [data-md-color-scheme="slate"] .example-code, [data-md-color-scheme="slate"] .example-code > *, [data-md-color-scheme="slate"] .example-code *, [data-md-color-scheme="slate"] .example-code pre, [data-md-color-scheme="slate"] .example-code code, [data-md-color-scheme="slate"] .example-code .yaml, [data-md-color-scheme="slate"] .example-code .yaml *, [data-md-color-scheme="slate"] .example-code .highlight, [data-md-color-scheme="slate"] .example-code .highlight * { background-color: #11141A !important; border-color: #2A2E36; } [data-md-color-scheme="slate"] .md-content code:not(pre code):not(.highlight code) { background-color: #2d2d2d; } /* Dark mode - restore original pygments colors */ [data-md-color-scheme="slate"] .md-content .highlight .nt, [data-md-color-scheme="slate"] .md-content .yaml .nt { color: #FF5370 !important; } [data-md-color-scheme="slate"] .md-content .highlight .s, [data-md-color-scheme="slate"] .md-content .highlight .s1, [data-md-color-scheme="slate"] .md-content .highlight .s2, [data-md-color-scheme="slate"] .md-content .yaml .s, [data-md-color-scheme="slate"] .md-content .yaml .s1, [data-md-color-scheme="slate"] .md-content .yaml .s2 { color: #C3E88D !important; } [data-md-color-scheme="slate"] .md-content .highlight .k, [data-md-color-scheme="slate"] .md-content .highlight .kc, [data-md-color-scheme="slate"] .md-content .yaml .k, [data-md-color-scheme="slate"] .md-content .yaml .kc { color: #89DDFF !important; } [data-md-color-scheme="slate"] .md-content .highlight .p, [data-md-color-scheme="slate"] .md-content .yaml .p { color: #89DDFF !important; } [data-md-color-scheme="slate"] .md-content .highlight, [data-md-color-scheme="slate"] .md-content .yaml { color: #EFF !important; } /* ============================================ SQL Tokens inside dbt charts YAML blocks Applied to SQL block scalar bodies in .yaml / .dbt-charts-example .example-code Token classes emitted by Pygments SqlLexer: .k = Keyword (SELECT, FROM, WHERE, GROUP, ORDER, …) .kd = Keyword.DML (SELECT, INSERT, UPDATE, DELETE) .kn = Keyword.Namespace (AS, ON, …) .kr = Keyword.Reserved .n = Name (table/column identifiers) .s = String literals inside SQL ============================================ */ /* SQL DML keywords (SELECT, INSERT, UPDATE, DELETE) — blue-teal */ .yaml .kd, .dbt-charts-example .example-code .kd { color: #0369A1 !important; font-weight: 600; } /* General SQL keywords (FROM, WHERE, GROUP BY, ORDER BY, JOIN, …) — blue-teal */ .yaml .k, .dbt-charts-example .example-code .k { color: #0369A1 !important; font-weight: 600; } /* SQL keyword type / namespace (AS, ON, IN, …) — slightly lighter blue */ .yaml .kn, .yaml .kr, .dbt-charts-example .example-code .kn, .dbt-charts-example .example-code .kr { color: #0284C7 !important; } /* Dark mode SQL keywords */ [data-md-color-scheme="slate"] .yaml .kd, [data-md-color-scheme="slate"] .dbt-charts-example .example-code .kd, [data-md-color-scheme="slate"] .yaml .k, [data-md-color-scheme="slate"] .dbt-charts-example .example-code .k { color: #38BDF8 !important; } [data-md-color-scheme="slate"] .yaml .kn, [data-md-color-scheme="slate"] .yaml .kr, [data-md-color-scheme="slate"] .dbt-charts-example .example-code .kn, [data-md-color-scheme="slate"] .dbt-charts-example .example-code .kr { color: #7DD3FC !important; } /* ============================================ Playground Button in Navigation ============================================ */ /* The header's one CTA, the slot docs.getdbt.com spends on "Install VS Code extension": solid orange, ink text. It was white-on-translucent-white, which worked while the bar was red and is invisible now that the bar is white. */ .playground-nav-button { display: inline-flex; align-items: center; margin-left: 0.6rem; margin-right: 0.6rem; padding: 0.35rem 0.75rem; color: #030711; background-color: #FE6703; border: 1px solid #FE6703; border-radius: 4px; font-size: 0.7rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; text-decoration: none; transition: all 0.2s ease; white-space: nowrap; vertical-align: middle; line-height: 1.2; } .playground-nav-button:hover { background-color: #E45A02; border-color: #E45A02; color: #030711; text-decoration: none; } /* Mobile: hide text, show icon only */ @media screen and (max-width: 76.1875em) { .playground-nav-button { padding: 0.4rem; margin-left: 0.4rem; margin-right: 0.4rem; min-width: 2rem; } .playground-nav-button::before { content: "▶"; display: inline-block; } .playground-nav-button::after { content: ""; } } /* ============================================ Dark scheme: the token colors light mode left behind ============================================ */ /* The slate overrides above cover .nt/.k/.kc/.p/.s only. Everything else keeps its light-mode value, which was chosen against #f8f8f8 and is now painting on #11141A — unquoted YAML values and SQL identifiers (.n/.no) at #374151 land on 1.79:1, effectively unreadable, which is what the dark example block looked like. Measured against #11141A: values 11.95:1, comments 6.0:1. */ /* `.example-code .nv` is set unscoped by example.css (#2563EB, `(0,2,0)`), so darkening the pane underneath it took a passing token to 3.57:1 — 18 spans across quick-guide, boards/examples and boards/content. It joins the values here rather than getting its own rule. */ [data-md-color-scheme="slate"] .example-code .nv, [data-md-color-scheme="slate"] .md-content .highlight .n, [data-md-color-scheme="slate"] .md-content .highlight .no, [data-md-color-scheme="slate"] .md-content .yaml .n, [data-md-color-scheme="slate"] .md-content .yaml .no, [data-md-color-scheme="slate"] .example-code .n, [data-md-color-scheme="slate"] .example-code .no { color: #C9D1D9 !important; } [data-md-color-scheme="slate"] .md-content .highlight .c, [data-md-color-scheme="slate"] .md-content .highlight .c1, [data-md-color-scheme="slate"] .md-content .yaml .c, [data-md-color-scheme="slate"] .md-content .yaml .c1, [data-md-color-scheme="slate"] .example-code .c, [data-md-color-scheme="slate"] .example-code .c1 { color: #8B949E !important; } /* The base text color, which is not a token class at all. Pygments leaves plain YAML scalars as bare text nodes, so they inherit the block's own color — #333, chosen for the light ground. Every unquoted value in an example (`examples_db`, `bar`, `Revenue by Product`) was rendering at about 1.6:1 on the dark pane. A token-class audit cannot see these: they have no span. */ [data-md-color-scheme="slate"] .md-content .highlight, [data-md-color-scheme="slate"] .md-content .highlight pre, [data-md-color-scheme="slate"] .md-content .highlight code, [data-md-color-scheme="slate"] .md-content .yaml, [data-md-color-scheme="slate"] .md-content code.language-yaml, [data-md-color-scheme="slate"] .example-code, [data-md-color-scheme="slate"] .example-code pre, [data-md-color-scheme="slate"] .example-code code { color: #C9D1D9 !important; } /* ============================================ Light scheme: token colors that were never scoped to it ============================================ */ /* The rules above set a handful of tokens for the light ground, but the rest of the palette is Palenight — chosen for a dark editor and applied with no scheme scope, so it paints onto #f8f8f8. Measured there before this block: plain YAML scalars 1.30:1, operators and variables 1.43:1, builtins 2.16:1, `{{` 2.94:1, numbers 3.00:1, strings 3.55:1. Light is the default scheme, so that is what most readers were getting. Scoped to [data-md-color-scheme="default"] rather than changing the base values: the slate scheme does not override most of these classes and is already clean at its own contrast, so an unscoped change would fix light by breaking dark. Each color keeps its predecessor's hue and only darkens — green stays the string color, amber the number color — so the palette still reads as itself. Measured on #f8f8f8: scalars 9.71:1, strings 5.16:1, numbers 5.66:1, operators 7.12:1, variables 6.69:1, builtins 6.31:1, errors 6.09:1, jinja 5.04:1. */ [data-md-color-scheme="default"] .md-content .highlight .l, [data-md-color-scheme="default"] .md-content .highlight .l-Scalar-Plain, [data-md-color-scheme="default"] .md-content .yaml .l, [data-md-color-scheme="default"] .md-content .yaml .l-Scalar-Plain, [data-md-color-scheme="default"] .example-code .l, [data-md-color-scheme="default"] .example-code .l-Scalar-Plain { color: #374151 !important; } [data-md-color-scheme="default"] .md-content .highlight .s, /* `.sb` is Literal.String.Backtick — the ``` markers inside the markdown fences on integrations/mkdocs. Eight live spans; without this they fall through to pygments.css's #C3E88D, a dark-ground green at 1.30:1 here. */ [data-md-color-scheme="default"] .md-content .highlight .sb, [data-md-color-scheme="default"] .md-content .highlight .s1, [data-md-color-scheme="default"] .md-content .highlight .s2, [data-md-color-scheme="default"] .md-content .yaml .s, [data-md-color-scheme="default"] .md-content .yaml .s1, [data-md-color-scheme="default"] .md-content .yaml .s2, [data-md-color-scheme="default"] .example-code .s, [data-md-color-scheme="default"] .example-code .s1, [data-md-color-scheme="default"] .example-code .s2 { color: #047857 !important; } [data-md-color-scheme="default"] .md-content .highlight .m, [data-md-color-scheme="default"] .md-content .highlight .mi, [data-md-color-scheme="default"] .md-content .highlight .mf, [data-md-color-scheme="default"] .md-content .yaml .m, [data-md-color-scheme="default"] .md-content .yaml .mi, [data-md-color-scheme="default"] .md-content .yaml .mf, [data-md-color-scheme="default"] .example-code .m, [data-md-color-scheme="default"] .example-code .mi, [data-md-color-scheme="default"] .example-code .mf { color: #9A4F00 !important; } [data-md-color-scheme="default"] .md-content .highlight .o, [data-md-color-scheme="default"] .md-content .yaml .o, [data-md-color-scheme="default"] .example-code .o { color: #4B5563 !important; } [data-md-color-scheme="default"] .md-content .highlight .nv, [data-md-color-scheme="default"] .md-content .yaml .nv, [data-md-color-scheme="default"] .example-code .nv { color: #6D28D9 !important; } [data-md-color-scheme="default"] .md-content .highlight .nb, [data-md-color-scheme="default"] .md-content .yaml .nb, [data-md-color-scheme="default"] .example-code .nb { color: #1D4ED8 !important; } /* `.err` is what Pygments emits for the `{{` of a Jinja expression inside YAML — routine in this documentation, not a broken token, so it reads as a normal color rather than an alarm. */ [data-md-color-scheme="default"] .md-content .highlight .err, [data-md-color-scheme="default"] .md-content .yaml .err, [data-md-color-scheme="default"] .example-code .err { color: #B91C1C !important; } [data-md-color-scheme="default"] .md-content .highlight .si, [data-md-color-scheme="default"] .md-content .yaml .si, [data-md-color-scheme="default"] .example-code .si { color: #0E7490 !important; } /* An expanded section's children run straight into the next top-level entry — "Linking Between Boards" sits as close to "dct CLI" as it does to its own siblings, so the nesting stops reading as nesting. Hung on Material's own expansion hook rather than on `.md-nav__item--nested .md-nav`, which would space the collapsed sections too and leave a gap under every closed chevron. No `transition` here, deliberately. Material's own `:checked ~ .md-nav` rule carries `transition: grid-template-rows .25s …, opacity …` (and `transform` on the mobile drawer) at the same (0,3,0) specificity, and this file loads after it — so a `transition` shorthand wins the tie and resets every longhand to whatever is named here, stopping the sidebar animating sitewide. The margin's snap is imperceptible under Material's 250ms row animation. */ .md-nav__toggle:checked ~ .md-nav { margin-bottom: 0.6rem; } /* ============================================ Reference tables: identifiers stay whole ============================================ */ /* The env-var and field tables put a `DCT_*` name or a YAML key in the first column. At the default content width those cells land around 125px, so `DCT_PROJECT_DIR` broke to `DCT_PROJECT_` / `DIR` — a break inside an identifier, which reads as two separate strings and cannot be copied by eye. Scoped to inline code, not to the cell: the prose column beside it should still wrap normally, and a long `Purpose` sentence forced onto one line would be far worse than the problem being fixed. */ .md-typeset table:not([class]) td code, .md-typeset table:not([class]) th code { white-space: nowrap; } /* No wrapper rule needed for the width this creates: Material already wraps every bare table in `.md-typeset__scrollwrap` (overflow-x: auto), and that is what scrolls. The inner `.md-typeset__table` is inline-block, so it shrink-to-fits and can never overflow itself. Verified by counterfactual — page-level horizontal scroll is false at 1400px and 390px with and without any rule on the inner element. */ /* A docshot clip (D-06) always freezes the light theme — same policy PNGs already follow (D-02) — so it needs a border to read as an intentional embed rather than a stray white rectangle against the dark docs theme. */ /* A clip embed scales like an SVG viewBox: the frame owns the layout box (aspect-ratio from the capture's natural W/H, capped at natural width), and the fixed-size iframe inside is scaled by the ratio of the frame's inline size to the natural width — tan(atan2(y, x)) is CSS's way to divide two lengths into a unitless number. Without container-query support the iframe falls back to its width/height attributes under the frame's max-width, i.e. the unscaled pre-existing behavior. */ .docshot-clip-frame { container-type: inline-size; max-width: 100%; overflow: hidden; border: 1px solid rgba(26, 26, 26, 0.08); border-radius: 0.75rem; } .docshot-clip-frame > .docshot-clip { display: block; border: 0; transform-origin: top left; transform: scale(tan(atan2(100cqw, calc(var(--docshot-clip-w) * 1px)))); } [data-md-color-scheme="slate"] .docshot-clip-frame { border-color: rgba(255, 255, 255, 0.08); }