diff --git a/doc/user/assets/sass/_base.scss b/doc/user/assets/sass/_base.scss index d1c87ae66585e..57064a0b86dfa 100644 --- a/doc/user/assets/sass/_base.scss +++ b/doc/user/assets/sass/_base.scss @@ -11,14 +11,35 @@ $rem-scale: 0.585; :root { --nav-height: #{rem(6.5)}; // Changes to height requires changes to partials/toc.html since custom scroll logic implementation - --h1: #{rem(4.0)}; + // Brand typefaces (style guide): FAIRE Sprig Sans → headlines; Inter → body/UI; FAIRE Sprig Sans Mono → code + --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; + --font-heading: "FAIRE Sprig Sans", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; + --font-mono: "FAIRE Sprig Sans Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; + + // Style guide rhythm + --leading-headline: 1.4; + --leading-code: 1.55; + --tracking-eyebrow: 0.05em; + --tracking-code: 0.05em; + --weight-body: 400; + --weight-body-emphasis: 500; + --weight-body-strong: 600; + --weight-heading: 500; + + // Typography reference (docs content) + --h1: #{rem(3.9)}; --h2: #{rem(2.8)}; --h3: #{rem(2.1)}; --h4: #{rem(1.7)}; --h5: #{rem(1.6)}; - --base: #{rem(1.6)}; + --base: #{rem(1.5)}; --sm: #{rem(1.4)}; --xsm: #{rem(1.2)}; + --leading-h1: 1.3; + --leading-h2: 1.4; + --leading-body: 1.625; + --tracking-h1: -0.02em; + --tracking-h2: -0.015em; @media(max-width: 850px) { --h1: #{rem(3.4)}; @@ -38,60 +59,170 @@ $rem-scale: 0.585; --medium: #{rem(5)}; --large: #{rem(6)}; - --orchid: #e537c0; + --orchid: var(--color-pink-500); --orange: #ee8660; - --lavender: #ad37e5; - --brand: #7f4eff; - --purple-dark: #472f85; + --lavender: var(--color-purple-300); + --brand: var(--color-purple-500); + --purple-dark: var(--color-purple-800); - --white: #fff; + --white: var(--color-white); --white-light: #fefefe; --code-block-light: #f9f7fd; - --nav-light: #fff; - --nav-dark: #111111d9; + --nav-light: var(--color-white); + --nav-dark: oklch(0.14 0.012 291 / 88%); - --black: #111111; - --black-mid: #141414; - --black-light: #181818; - --black-lighter: #222222; - --black-lightest: #343434; + --bg-black: oklch(0.14 0.012 291); + + --black: var(--color-black); + --black-mid: oklch(0.18 0.014 291); + --black-light: oklch(0.21 0.016 291); + --black-lighter: oklch(0.25 0.018 292); + --black-lightest: oklch(0.30 0.020 292); --gray-dark: #555555; --gray-mid: #888888; - --gray: #bbb; + --gray: #bbbbbb; --gray-light: #dddddd; - --gray-lighter: #dddd; + --gray-lighter: rgba(221, 221, 221, 0.87); --gray-lightest: #eeeeee; --shadow-default: 0 #{rem(0.625)} #{rem(1.5)} #{rem(0)} rgba(0, 0, 0, 0.08); + + --table-surface: #111115; + --table-surface-raised: #15151a; + --table-surface-header: #19191f; + --table-border: #2a2b32; + --table-grid: #24252b; + --table-heading: #5e606a; + --table-text: #d9d9de; + --table-body: #a3a3ad; + --table-muted: #5f606a; + --table-link: #8b97ff; + --table-green: #3ff47a; + --table-green-bg: #0f2a1c; + --table-green-border: #1b5d37; + --table-blue: #8b97ff; + --table-blue-bg: #1b1d33; + --table-blue-border: #333b75; + --table-orange: #ff9a3d; + --table-orange-bg: #332113; + --table-orange-border: #704017; + --table-yellow: #fbbf24; + --table-yellow-bg: rgba(251, 191, 36, 0.08); + --table-yellow-border: rgba(251, 191, 36, 0.22); + --table-blue-glow: rgba(124, 143, 255, 0.9); + --table-radius: 14px; + --table-shadow: 0 18px 50px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.04) inset; + + --surface-subtle: rgba(255, 255, 255, 0.015); + --surface-inset: rgba(0, 0, 0, 0.25); + --surface-faint: rgba(255, 255, 255, 0.01); + --border-subtle: rgba(255, 255, 255, 0.06); + --border-faint: rgba(255, 255, 255, 0.04); + + --offerings-cols: minmax(170px, 220px) minmax(0, 1fr) minmax(150px, 190px); + + // Page background mesh rhythm (theme sets colors only) + --docs-mesh-icons-step: #{rem(28)}; + --docs-mesh-icons-step-sm: #{rem(24)}; + --docs-mesh-dot-size: 1px; + --docs-mesh-dot-step: #{rem(3)}; + --docs-mesh-dot-step-sm: #{rem(2.75)}; + --docs-mesh-grid-minor-step: #{rem(2)}; + --docs-mesh-grid-minor-step-sm: #{rem(1.75)}; + --docs-mesh-grid-major-step: #{rem(8)}; + --docs-mesh-grid-major-step-sm: #{rem(7)}; + + // Style guide palette (0326-083) + --sg-midnight: #100C21; + --sg-white: #FFFFFF; + --sg-violet: #7F4EFF; + --sg-lavender-1: #F2EDFF; + --sg-lavender-2: #C0B2E4; + --sg-lavender-3: #8F76CF; + --sg-lavender-4: #472F85; + --sg-lavender-5: #342260; + --sg-lavender-6: #2C1D52; + --sg-gray-1: #DED9EE; + --sg-gray-2: #9B97A3; + --sg-gray-3: #736F81; + --sg-gray-4: #403D4D; + --sg-gray-5: #201D2C; + --sg-heading: #F0EEFF; + --sg-body: #9B97A3; + --sg-inline-lifted: #E2E0F0; + --sg-link: #8F76CF; + --sg-link-hover: #B09EE0; + --sg-divider: #2A2745; + --sg-page-bg: #13111E; + --sg-teal-3: #00C2AA; + --sg-teal-5: #007567; } body.dark { - --bg: #100b21; + --bg: var(--bg-black); --bg-nav: var(--nav-dark); --bg-sub: var(--black-light); --card: var(--black-mid); --card-light: var(--black-light); --color-scheme: dark; - --divider: var(--black-lighter); - --divider-light: var(--black-lightest); + --divider: var(--sg-divider); + --divider-light: var(--sg-divider); - --link: var(--highlight); + --link: var(--sg-link); + --link-hover: var(--sg-link-hover); --code-block: var(--card-light); --code-simple: #c2c2c2; --code-simple-bg: #292929; - --code-red: #fc6e6c; - --code-pink: #f97fe6; - --code-blue: #4b73f8; - --code-green: #819A7B; - --code-highlight: var(--code-blue); - - --important: var(--gray-lightest); - --sub: var(--gray-light); - --body: var(--gray); - --highlight: #e0a5fb; + --code-foreground: #e2e8f0; + --code-keyword: #c4b5fd; + --code-builtin: #7dcfff; + --code-type: #ffcb8b; + --code-function: #2bddc2; + --code-string: #9ece6a; + --code-number: #ff9e64; + --code-comment: #6b7394; + --code-operator: #89ddff; + --code-punctuation: color-mix(in srgb, var(--code-foreground) 48%, var(--code-comment)); + --code-attribute: #ffcb8b; + --code-variable: #e2e8f0; + --code-red: #ff6e7a; + --code-pink: var(--code-keyword); + --code-blue: var(--code-builtin); + --code-green: var(--code-string); + --code-highlight: var(--code-function); + --code-line-highlight: color-mix(in srgb, var(--highlight) 14%, transparent); + --code-lineno: var(--caption); + --code-preproc: color-mix(in srgb, var(--code-builtin) 82%, var(--caption)); + + --heading: var(--sg-heading); + --body: var(--sg-body); + --inline-lifted: var(--sg-inline-lifted); + --sub: var(--sg-lavender-2); + --caption: var(--sg-gray-2); + --important: var(--heading); + --highlight: var(--color-teal-500); + --font-h4: var(--heading); + + // Shared homepage promo surfaces (callout + offerings table) + --docs-card-surface: color-mix(in srgb, var(--card-light) 72%, var(--bg)); + --docs-card-border: color-mix(in srgb, var(--divider-light) 88%, transparent); + --docs-card-divider: color-mix(in srgb, var(--divider-light) 55%, transparent); + --docs-card-divider-strong: color-mix(in srgb, var(--divider-light) 72%, transparent); + --docs-card-glow: color-mix(in srgb, var(--sg-lavender-6) 14%, transparent); + --docs-card-inset: color-mix(in srgb, var(--bg) 55%, transparent); + --docs-card-shadow: + 0 1px 0 color-mix(in srgb, var(--heading) 4%, transparent) inset, + 0 16px 40px color-mix(in srgb, var(--bg) 35%, transparent); + + // Style guide background mesh (dark): grid + data icons + purple accent on the right + --docs-mesh-icons: url("/images/docs-mesh/data-icons-dark.svg"); + --docs-mesh-dot: color-mix(in srgb, #1e293b 25%, transparent); + --docs-mesh-grid-minor: rgba(255, 255, 255, 0.033); + --docs-mesh-grid-major: rgba(255, 255, 255, 0.055); + --docs-mesh-accent: color-mix(in srgb, var(--sg-lavender-6) 13%, transparent); --shadow-default: 0 #{rem(0.625)} #{rem(1.5)} 0 rgba(0, 0, 0, 0.4); --note: #fffad411; @@ -120,35 +251,97 @@ body.dark { --tab-bg: var(--gray-lightest); --tab-selected-bg: var(--tip-after); - --font-h4: var(--gray-lightest); + + --th-border: oklch(var(--color-teal-500-oklch) / 30%); + + --offering-nested-border: var(--border-subtle); + --offering-nested-header-bg: color-mix(in srgb, var(--sg-lavender-6) 38%, var(--card-light)); + --offering-nested-surface: var(--surface-inset); + + --offering-edition-label: var(--sg-lavender-2); + --offering-edition-heading: var(--sg-lavender-2); + --offering-edition-value: var(--sg-lavender-3); } body.light { - --bg: var(--white-light); - --bg-nav: var(--nav-light); - --bg-sub: var(--gray-lighter); - --card: var(--gray-lightest); + --bg: #F7F6FA; + --bg-nav: color-mix(in srgb, var(--bg) 88%, transparent); + --bg-sub: color-mix(in srgb, var(--sg-lavender-1) 45%, var(--white)); + --card: color-mix(in srgb, var(--sg-lavender-1) 30%, var(--white)); --card-light: var(--white); --color-scheme: light; - --divider: var(--gray); - --divider-light: var(--gray-lighter); + --divider: color-mix(in srgb, var(--sg-gray-1) 75%, var(--gray)); + --divider-light: color-mix(in srgb, var(--sg-lavender-1) 55%, var(--gray-lighter)); - --link: var(--brand); + --link: var(--sg-violet); + --link-hover: var(--sg-lavender-4); --code-block: var(--code-block-light); --code-simple: #505050; --code-simple-bg: var(--code-block-light); - --code-red: #c41a16; - --code-pink: #a90d91; - --code-blue: #1c01ce; - --code-green: #177500; - - - --important: var(--black); - --code-highlight: var(--important); - --sub: var(--black-lighter); - --body: var(--black-light); - --highlight: var(--purple-dark); + --code-foreground: var(--heading); + --code-keyword: #6d28d9; + --code-builtin: #0969da; + --code-type: #9a6700; + --code-function: #00857a; + --code-string: #067d62; + --code-number: #bc4c00; + --code-comment: #656d76; + --code-operator: #0550ae; + --code-punctuation: color-mix(in srgb, var(--code-comment) 82%, var(--heading)); + --code-attribute: #953800; + --code-variable: var(--heading); + --code-red: #cf222e; + --code-pink: var(--code-keyword); + --code-blue: var(--code-builtin); + --code-green: var(--code-string); + --code-line-highlight: color-mix(in srgb, var(--table-yellow) 22%, transparent); + --code-lineno: var(--sg-gray-2); + --code-preproc: color-mix(in srgb, var(--code-builtin) 78%, var(--sg-gray-3)); + + --heading: var(--sg-midnight); + --body: var(--sg-gray-4); + --inline-lifted: var(--sg-gray-5); + --sub: var(--sg-gray-3); + --caption: var(--sg-gray-2); + --important: var(--heading); + --code-highlight: var(--code-function); + --highlight: var(--sg-teal-5); + --font-h4: var(--heading); + + --table-text: var(--inline-lifted); + --table-body: var(--body); + + --table-green: var(--color-teal-700); + --table-orange: #C65D17; + + --docs-card-surface: linear-gradient( + 165deg, + color-mix(in srgb, var(--white) 88%, var(--sg-lavender-1)) 0%, + var(--white) 42%, + color-mix(in srgb, var(--white) 94%, var(--sg-lavender-1)) 100% + ); + --docs-card-border: color-mix(in srgb, var(--sg-lavender-2) 28%, var(--gray-light)); + --docs-card-divider: color-mix(in srgb, var(--sg-lavender-2) 24%, var(--gray-lighter)); + --docs-card-divider-strong: color-mix(in srgb, var(--sg-lavender-2) 38%, var(--gray-light)); + --docs-card-glow: color-mix(in srgb, var(--sg-violet) 7%, transparent); + --docs-card-glow-foot: color-mix(in srgb, var(--sg-lavender-1) 55%, transparent); + --docs-card-inset: color-mix(in srgb, var(--sg-lavender-1) 38%, var(--white)); + --docs-card-shadow: + 0 1px 2px rgba(16, 12, 33, 0.04), + 0 10px 32px rgba(16, 12, 33, 0.06); + + --callout-accent-soft-mix: 7%; + --callout-accent-border-mix: 28%; + --docs-card-top-accent-mix: 30%; + --docs-card-top-accent-center-mix: 65%; + + // Style guide background mesh (light): grid + data icons + --docs-mesh-icons: url("/images/docs-mesh/data-icons-light.svg"); + --docs-mesh-icons-opacity: 0.12; + --docs-mesh-dot: rgba(64, 61, 77, 0.085); + --docs-mesh-grid-minor: rgba(64, 61, 77, 0.020); + --docs-mesh-grid-major: rgba(64, 61, 77, 0.035); --note: #fffad411; --note-border: #b9a61545; @@ -175,7 +368,21 @@ body.light { --tab-bg: var(--gray-lighter); --tab-selected-bg: var(--tip); - --font-h4: var(--gray-dark); + + --surface-subtle: rgba(0, 0, 0, 0.025); + --surface-inset: rgba(0, 0, 0, 0.04); + --surface-faint: rgba(0, 0, 0, 0.015); + --border-subtle: rgba(0, 0, 0, 0.10); + --border-faint: rgba(0, 0, 0, 0.06); + + --offering-nested-border: color-mix(in srgb, var(--sg-lavender-2) 20%, var(--gray-lighter)); + --offering-nested-header-bg: color-mix(in srgb, var(--sg-lavender-1) 75%, var(--white)); + --offering-nested-surface: color-mix(in srgb, var(--sg-lavender-1) 32%, var(--white)); + + --offering-edition-label: var(--sg-violet); + --offering-edition-heading: var(--sg-gray-3); + --offering-edition-value: var(--sg-violet); + } *, @@ -187,15 +394,86 @@ body.light { } body { - font-family: "Inter", sans-serif; - color: var(--important); + font-family: var(--font-body); + color: var(--body); color-scheme: var(--color-scheme); background: var(--bg); font-size: var(--base); - line-height: 1.7; - font-weight: 300; + line-height: var(--leading-body); + font-weight: var(--weight-body); max-width: 100vw; overflow-x: hidden; + position: relative; + + &::before, + &::after { + content: ""; + inset: 0; + pointer-events: none; + position: fixed; + z-index: -1; + } + + &.dark::before { + background-color: #000; + background-image: + radial-gradient(ellipse 42% 85% at 100% 45%, var(--docs-mesh-accent) 0%, transparent 68%), + linear-gradient(to right, var(--docs-mesh-grid-major) 1px, transparent 1px), + linear-gradient(to bottom, var(--docs-mesh-grid-major) 1px, transparent 1px), + linear-gradient(to right, var(--docs-mesh-grid-minor) 1px, transparent 1px), + linear-gradient(to bottom, var(--docs-mesh-grid-minor) 1px, transparent 1px), + radial-gradient(circle, var(--docs-mesh-dot) var(--docs-mesh-dot-size), transparent var(--docs-mesh-dot-size)); + background-position: center; + background-repeat: no-repeat, repeat, repeat, repeat, repeat, repeat; + background-size: + 100% 100%, + var(--docs-mesh-grid-major-step) var(--docs-mesh-grid-major-step), + var(--docs-mesh-grid-major-step) var(--docs-mesh-grid-major-step), + var(--docs-mesh-grid-minor-step) var(--docs-mesh-grid-minor-step), + var(--docs-mesh-grid-minor-step) var(--docs-mesh-grid-minor-step), + var(--docs-mesh-dot-step) var(--docs-mesh-dot-step); + mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.65) 0%, black 28%, black 100%); + } + + &.light::before { + background-color: var(--bg); + @include docs-page-mesh-grid-layers-no-icons; + background-position: center; + background-repeat: repeat; + @include docs-page-mesh-grid-size( + var(--docs-mesh-grid-major-step), + var(--docs-mesh-grid-minor-step), + var(--docs-mesh-dot-step) + ); + mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.72) 45%, rgba(0, 0, 0, 0.58) 100%); + } + + @media (max-width: 850px) { + &.dark::before { + background-size: + 100% 100%, + var(--docs-mesh-grid-major-step-sm) var(--docs-mesh-grid-major-step-sm), + var(--docs-mesh-grid-major-step-sm) var(--docs-mesh-grid-major-step-sm), + var(--docs-mesh-grid-minor-step-sm) var(--docs-mesh-grid-minor-step-sm), + var(--docs-mesh-grid-minor-step-sm) var(--docs-mesh-grid-minor-step-sm), + var(--docs-mesh-dot-step-sm) var(--docs-mesh-dot-step-sm); + } + + &.light::before { + @include docs-page-mesh-grid-size( + var(--docs-mesh-grid-major-step-sm), + var(--docs-mesh-grid-minor-step-sm), + var(--docs-mesh-dot-step-sm) + ); + } + } + + @media (prefers-reduced-motion: reduce) { + &::before, + &::after { + background-attachment: scroll; + } + } @media(max-width: 500px) { font-size: rem(1.5); @@ -230,8 +508,7 @@ input[type="submit"] { 5. Links inside notes 6. Links inside notes with **/ -.btn, -.btn-ghost { +.btn { color: var(--white); text-decoration: none; @@ -242,87 +519,170 @@ input[type="submit"] { } } -nav { +.nav, +.sidebar, +.toc, +.toc-wrapper, +.footer { + a:not([class*="btn"]) { + color: var(--important); + + &:hover, + &:focus { + text-decoration: none; + } + } + .link-with-code { - color: var(--sub); + color: var(--important); &:hover, &:focus { text-decoration: underline; - color: var(--link); + color: var(--important); + } + } + + .btn-ghost { + color: var(--important); + + &:hover, + &:focus { + color: var(--important); + text-decoration: none; } } } +.content a:not([class]), p > a, .note > a, .tip > a, .annotation > a, -.link-with-code { +.content .link-with-code { color: var(--link); + font-family: var(--font-body); + font-weight: var(--weight-body); + text-decoration: underline; + text-decoration-color: color-mix(in srgb, var(--link) 30%, transparent); + text-underline-offset: 3px; + transition: color 0.15s ease, text-decoration-color 0.15s ease; &:hover, &:focus { + color: var(--link-hover); text-decoration: underline; - color: var(--sub); + text-decoration-color: var(--link-hover); + } +} + +.content .btn-ghost { + color: var(--important); + + &:hover, + &:focus { + color: var(--important); + text-decoration: none; } } .annotation-title { - font-weight: 600; + font-family: var(--font-heading); + font-weight: 500; + line-height: var(--leading-headline); padding-bottom: rem(1.2); } a { + color: inherit; + text-decoration: none; + &:hover, &:focus { text-decoration: underline; - color: var(--link); } - - color: var(--sub); - text-decoration: none; } /*-------- Finish links color--------*/ [class*="btn"] { + background: var(--brand); + border: 1px solid color-mix(in srgb, var(--brand) 70%, transparent); + border-radius: rem(0.8); + box-shadow: var(--docs-card-shadow); + color: var(--white); display: inline-flex; - justify-content: center; align-items: center; - font-size: 12px; + font-family: var(--font-body); + font-size: rem(1.2); + font-weight: var(--weight-body-emphasis); + justify-content: center; + letter-spacing: var(--tracking-eyebrow); + padding: rem(0.6) rem(1.2); text-transform: uppercase; + transition: + background-color 0.15s ease, + border-color 0.15s ease, + box-shadow 0.15s ease, + opacity 0.15s ease; white-space: nowrap; - font-weight: 600; - letter-spacing: 0.1em; - background: var(--brand); - color: var(--white); - padding: rem(0.6) rem(1.2); - border-radius: 8px; svg { - margin-right: rem(.6); - width: 18px; height: 18px; + margin-right: rem(0.6); + width: 18px; } &:hover, &:focus { + box-shadow: + var(--docs-card-shadow), + 0 0 0 rem(0.35) color-mix(in srgb, var(--brand) 25%, transparent); color: var(--white); text-decoration: none; - box-shadow: rgba(128,78,255,.3) 0px 0px 0px 8px } } .btn-ghost { - position: relative; - background: var(--bg); - border: 1px solid var(--brand); + background: var(--docs-card-inset); + border: 1px solid var(--docs-card-divider); + border-radius: rem(0.75); + box-shadow: none; color: var(--important); + display: inline-flex; + align-items: center; + font-family: var(--font-body); + font-size: var(--sm); + font-weight: var(--weight-body); + gap: rem(0.75); + letter-spacing: 0; + line-height: 1; + padding: rem(0.55) rem(0.85); + position: relative; + text-decoration: none; + text-transform: none; + transition: + background-color 0.15s ease, + border-color 0.15s ease, + color 0.15s ease, + box-shadow 0.15s ease; + + svg { + flex: 0 0 auto; + } &:hover, &:focus { - color: var(--important); + background: color-mix(in srgb, var(--highlight) 8%, var(--docs-card-inset)); + border-color: color-mix(in srgb, var(--highlight) 35%, var(--docs-card-divider)); + box-shadow: var(--docs-card-shadow); + color: var(--heading); + text-decoration: none; + } + + &:focus-visible { + outline: 2px solid var(--highlight); + outline-offset: 2px; } } @@ -333,25 +693,26 @@ a { } select.version-dropdown { + -moz-appearance: none; + -webkit-appearance: none; appearance: none; - -moz-appearance: none; - -webkit-appearance: none; - background-image: url('https://res.cloudinary.com/mzimgcdn/image/upload/v1737129759/dropdown.svg'); - background-position: right 0.5rem top 50%, 0 0; - background-repeat: no-repeat, repeat; - background-size: 1.3rem auto, 100%; - outline: 1px solid transparent; - border: 1px solid var(--divider); + background-color: var(--docs-card-inset); + background-image: url('https://res.cloudinary.com/mzimgcdn/image/upload/v1737129759/dropdown.svg'); + background-position: right 0.5rem top 50%, 0 0; + background-repeat: no-repeat, repeat; + background-size: 1.3rem auto, 100%; + border: 1px solid var(--docs-card-divider); + border-radius: rem(0.6); + color: var(--body); + outline: 1px solid transparent; padding: var(--pico) var(--nano); - border-radius: 4px; - background-color: var(--bg); - &:focus, - &:active { - outline: none; - } + &:focus, + &:active { + border-color: color-mix(in srgb, var(--highlight) 40%, var(--docs-card-divider)); + outline: none; + } } - red { color: var(--code-red); } -blue { color: #2300ce; } +blue { color: var(--code-blue); } diff --git a/doc/user/assets/sass/_colors.scss b/doc/user/assets/sass/_colors.scss new file mode 100644 index 0000000000000..4fb0c382175c7 --- /dev/null +++ b/doc/user/assets/sass/_colors.scss @@ -0,0 +1,226 @@ +/* Color palette from www-temporary — oklch colorspace */ + +:root { + --color-current: currentColor; + --color-transparent: transparent; + --color-black: oklch(0.1807 0.0403 291.01); + --color-white: oklch(100% 0 0); + + /* Gray */ + --color-gray-50-oklch: 0.9707 0.0164 301.22; + --color-gray-50: oklch(var(--color-gray-50-oklch)); + --color-gray-100-oklch: 0.9552 0.0245 298.61; + --color-gray-100: oklch(var(--color-gray-100-oklch)); + --color-gray-200-oklch: 0.94 0.0271 295.05; + --color-gray-200: oklch(var(--color-gray-200-oklch)); + --color-gray-300-oklch: 0.8956 0.0289 296.71; + --color-gray-300: oklch(var(--color-gray-300-oklch)); + --color-gray-400-oklch: 0.7834 0.0285 297.18; + --color-gray-400: oklch(var(--color-gray-400-oklch)); + --color-gray-500-oklch: 0.6836 0.0179 301.07; + --color-gray-500: oklch(var(--color-gray-500-oklch)); + --color-gray-600-oklch: 0.5516 0.028 295.65; + --color-gray-600: oklch(var(--color-gray-600-oklch)); + --color-gray-700-oklch: 0.4815 0.029 295.48; + --color-gray-700: oklch(var(--color-gray-700-oklch)); + --color-gray-800-oklch: 0.3694 0.0274 293.61; + --color-gray-800: oklch(var(--color-gray-800-oklch)); + --color-gray-900-oklch: 0.2413 0.0286 293.31; + --color-gray-900: oklch(var(--color-gray-900-oklch)); + + /* Purple */ + --color-purple-50-oklch: 0.9533 0.0261 300.28; + --color-purple-50: oklch(var(--color-purple-50-oklch)); + --color-purple-100-oklch: 0.8891 0.0649 301.94; + --color-purple-100: oklch(var(--color-purple-100-oklch)); + --color-purple-200-oklch: 0.7791 0.1321 299.85; + --color-purple-200: oklch(var(--color-purple-200-oklch)); + --color-purple-300-oklch: 0.6541 0.2052 293.72; + --color-purple-300: oklch(var(--color-purple-300-oklch)); + --color-purple-400-oklch: 0.5826 0.245663 289.134; + --color-purple-400: oklch(var(--color-purple-400-oklch)); + --color-purple-500-oklch: 0.5098 0.2669 284.47; + --color-purple-500: oklch(var(--color-purple-500-oklch)); + --color-purple-600-oklch: 0.4915 0.2662 280.14; + --color-purple-600: oklch(var(--color-purple-600-oklch)); + --color-purple-700-oklch: 0.4568 0.2639 276.88; + --color-purple-700: oklch(var(--color-purple-700-oklch)); + --color-purple-800-oklch: 0.4307 0.2663 269.92; + --color-purple-800: oklch(var(--color-purple-800-oklch)); + --color-purple-900-oklch: 0.3893 0.2637 264.13; + --color-purple-900: oklch(var(--color-purple-900-oklch)); + + /* Lavender */ + --color-lavender-50-oklch: 0.8445 0.0536 298.49; + --color-lavender-50: oklch(var(--color-lavender-50-oklch)); + --color-lavender-100-oklch: 0.7842 0.0687 297.2; + --color-lavender-100: oklch(var(--color-lavender-100-oklch)); + --color-lavender-200-oklch: 0.7209 0.0977 296.91; + --color-lavender-200: oklch(var(--color-lavender-200-oklch)); + --color-lavender-300-oklch: 0.627 0.1324 295.25; + --color-lavender-300: oklch(var(--color-lavender-300-oklch)); + --color-lavender-400-oklch: 0.5031 0.1765 292.12; + --color-lavender-400: oklch(var(--color-lavender-400-oklch)); + --color-lavender-500-oklch: 0.384 0.1372 291.44; + --color-lavender-500: oklch(var(--color-lavender-500-oklch)); + --color-lavender-600-oklch: 0.3455 0.1201 292.18; + --color-lavender-600: oklch(var(--color-lavender-600-oklch)); + --color-lavender-700-oklch: 0.3113 0.1052 292.61; + --color-lavender-700: oklch(var(--color-lavender-700-oklch)); + --color-lavender-800-oklch: 0.2817 0.0925 292.49; + --color-lavender-800: oklch(var(--color-lavender-800-oklch)); + --color-lavender-900-oklch: 0.1726 0.0425 289.97; + --color-lavender-900: oklch(var(--color-lavender-900-oklch)); + + /* Pink */ + --color-pink-50-oklch: 0.914 0.0788 326.2; + --color-pink-50: oklch(var(--color-pink-50-oklch)); + --color-pink-100-oklch: 0.8511 0.1427 326.74; + --color-pink-100: oklch(var(--color-pink-100-oklch)); + --color-pink-200-oklch: 0.8004 0.1988 327.23; + --color-pink-200: oklch(var(--color-pink-200-oklch)); + --color-pink-300-oklch: 0.7571 0.249 327.95; + --color-pink-300: oklch(var(--color-pink-300-oklch)); + --color-pink-400-oklch: 0.7297 0.2796 328.94; + --color-pink-400: oklch(var(--color-pink-400-oklch)); + --color-pink-500-oklch: 0.7039 0.3082 330.05; + --color-pink-500: oklch(var(--color-pink-500-oklch)); + --color-pink-600-oklch: 0.6814 0.3058 333.1; + --color-pink-600: oklch(var(--color-pink-600-oklch)); + --color-pink-700-oklch: 0.6068 0.2767 329.91; + --color-pink-700: oklch(var(--color-pink-700-oklch)); + --color-pink-800-oklch: 0.5622 0.2569 329.49; + --color-pink-800: oklch(var(--color-pink-800-oklch)); + --color-pink-900-oklch: 0.4773 0.2182 329.4; + --color-pink-900: oklch(var(--color-pink-900-oklch)); + + /* Teal */ + --color-teal-50-oklch: 0.9756 0.0213 186.04; + --color-teal-50: oklch(var(--color-teal-50-oklch)); + --color-teal-100-oklch: 0.9665 0.0298 183.8; + --color-teal-100: oklch(var(--color-teal-100-oklch)); + --color-teal-200-oklch: 0.9378 0.0542 183.4; + --color-teal-200: oklch(var(--color-teal-200-oklch)); + --color-teal-300-oklch: 0.9065 0.0984 182.02; + --color-teal-300: oklch(var(--color-teal-300-oklch)); + --color-teal-350-oklch: 0.8761 0.1297 181.02; + --color-teal-350: oklch(var(--color-teal-350-oklch)); + --color-teal-400-oklch: 0.8562 0.1545 180.23; + --color-teal-400: oklch(var(--color-teal-400-oklch)); + --color-teal-500-oklch: 0.8073 0.1401 179.17; + --color-teal-500: oklch(var(--color-teal-500-oklch)); + --color-teal-550-oklch: 0.8207 0.144 171.1; + --color-teal-550: oklch(var(--color-teal-550-oklch)); + --color-teal-600-oklch: 0.7292 0.1326 179.65; + --color-teal-600: oklch(var(--color-teal-600-oklch)); + --color-teal-700-oklch: 0.6556 0.118699 180.3171; + --color-teal-700: oklch(var(--color-teal-700-oklch)); + --color-teal-800-oklch: 0.5041 0.091051 180.6891; + --color-teal-800: oklch(var(--color-teal-800-oklch)); + --color-teal-900-oklch: 0.3542 0.043 207.05; + --color-teal-900: oklch(var(--color-teal-900-oklch)); + + /* Blue */ + --color-blue-50-oklch: 0.9597 0.0144 244.72; + --color-blue-50: oklch(var(--color-blue-50-oklch)); + --color-blue-100-oklch: 0.9191 0.0281 243.11; + --color-blue-100: oklch(var(--color-blue-100-oklch)); + --color-blue-200-oklch: 0.8881 0.0401 242.45; + --color-blue-200: oklch(var(--color-blue-200-oklch)); + --color-blue-300-oklch: 0.8401 0.0739 238.99; + --color-blue-300: oklch(var(--color-blue-300-oklch)); + --color-blue-400-oklch: 0.8039 0.108 235.56; + --color-blue-400: oklch(var(--color-blue-400-oklch)); + --color-blue-500-oklch: 0.7668 0.142 233.74; + --color-blue-500: oklch(var(--color-blue-500-oklch)); + --color-blue-600-oklch: 0.717 0.1313 234.29; + --color-blue-600: oklch(var(--color-blue-600-oklch)); + --color-blue-700-oklch: 0.6577 0.1176 235.31; + --color-blue-700: oklch(var(--color-blue-700-oklch)); + --color-blue-800-oklch: 0.5973 0.1032 236.86; + --color-blue-800: oklch(var(--color-blue-800-oklch)); + --color-blue-900-oklch: 0.4866 0.0831 240.87; + --color-blue-900: oklch(var(--color-blue-900-oklch)); + + /* Error */ + --color-error-50-oklch: 0.9577 0.0196 13.63; + --color-error-50: oklch(var(--color-error-50-oklch)); + --color-error-100-oklch: 0.9148 0.0391 15.93; + --color-error-100: oklch(var(--color-error-100-oklch)); + --color-error-200-oklch: 0.8429 0.0756 16.74; + --color-error-200: oklch(var(--color-error-200-oklch)); + --color-error-300-oklch: 0.7401 0.144 17.5; + --color-error-300: oklch(var(--color-error-300-oklch)); + --color-error-400-oklch: 0.7031 0.1897 17.76; + --color-error-400: oklch(var(--color-error-400-oklch)); + --color-error-500-oklch: 0.666 0.2229 17.56; + --color-error-500: oklch(var(--color-error-500-oklch)); + --color-error-600-oklch: 0.64 0.217 17.55; + --color-error-600: oklch(var(--color-error-600-oklch)); + --color-error-700-oklch: 0.6136 0.2084 17.78; + --color-error-700: oklch(var(--color-error-700-oklch)); + --color-error-800-oklch: 0.5766 0.1993 17.34; + --color-error-800: oklch(var(--color-error-800-oklch)); + --color-error-900-oklch: 0.5244 0.185 17.34; + --color-error-900: oklch(var(--color-error-900-oklch)); + + /* Warning */ + --color-warning-50-oklch: 0.9844 0.0189 93.66; + --color-warning-50: oklch(var(--color-warning-50-oklch)); + --color-warning-100-oklch: 0.974 0.0346 96.29; + --color-warning-100: oklch(var(--color-warning-100-oklch)); + --color-warning-200-oklch: 0.9525 0.0606 96.15; + --color-warning-200: oklch(var(--color-warning-200-oklch)); + --color-warning-300-oklch: 0.9375 0.0913 96.3; + --color-warning-300: oklch(var(--color-warning-300-oklch)); + --color-warning-400-oklch: 0.929 0.118 96.67; + --color-warning-400: oklch(var(--color-warning-400-oklch)); + --color-warning-500-oklch: 0.921 0.1367 96.69; + --color-warning-500: oklch(var(--color-warning-500-oklch)); + --color-warning-600-oklch: 0.8792 0.129 89.34; + --color-warning-600: oklch(var(--color-warning-600-oklch)); + --color-warning-700-oklch: 0.8297 0.1219 79.7; + --color-warning-700: oklch(var(--color-warning-700-oklch)); + --color-warning-800-oklch: 0.7814 0.1211 69.05; + --color-warning-800: oklch(var(--color-warning-800-oklch)); + --color-warning-900-oklch: 0.7012 0.1352 51.49; + --color-warning-900: oklch(var(--color-warning-900-oklch)); + + /* Success */ + --color-success-50-oklch: 0.9788 0.0221 160.24; + --color-success-50: oklch(var(--color-success-50-oklch)); + --color-success-100-oklch: 0.9489 0.0556 156.34; + --color-success-100: oklch(var(--color-success-100-oklch)); + --color-success-200-oklch: 0.9039 0.1006 157.23; + --color-success-200: oklch(var(--color-success-200-oklch)); + --color-success-300-oklch: 0.8453 0.1477 157.54; + --color-success-300: oklch(var(--color-success-300-oklch)); + --color-success-400-oklch: 0.773 0.1754 155.5; + --color-success-400: oklch(var(--color-success-400-oklch)); + --color-success-500-oklch: 0.6859 0.1667 154.86; + --color-success-500: oklch(var(--color-success-500-oklch)); + --color-success-600-oklch: 0.597 0.1485 154.46; + --color-success-600: oklch(var(--color-success-600-oklch)); + --color-success-700-oklch: 0.51 0.1218 156.56; + --color-success-700: oklch(var(--color-success-700-oklch)); + --color-success-800-oklch: 0.4315 0.0995 157.67; + --color-success-800: oklch(var(--color-success-800-oklch)); + --color-success-900-oklch: 0.2637 0.0332 162.32; + --color-success-900: oklch(var(--color-success-900-oklch)); + + /* Alpha */ + --color-lavender-alpha-oklch: 0.7921 0.0715 297.58; + --color-lavender-alpha: oklch(var(--color-lavender-alpha-oklch) / 20%); + --color-pink-alpha-oklch: 0.6814 0.3058 333.1; + --color-pink-alpha: oklch(var(--color-pink-alpha-oklch) / 20%); + --color-teal-alpha-oklch: 0.8761 0.1297 181.02; + --color-teal-alpha: oklch(var(--color-teal-alpha-oklch) / 20%); + --color-blue-alpha-oklch: 0.7668 0.142 233.74; + --color-blue-alpha: oklch(var(--color-blue-alpha-oklch) / 20%); + --color-error-alpha-oklch: 0.7031 0.1897 17.76; + --color-error-alpha: oklch(var(--color-error-alpha-oklch) / 20%); + --color-warning-alpha-oklch: 0.921 0.1367 96.69; + --color-warning-alpha: oklch(var(--color-warning-alpha-oklch) / 20%); + --color-white-alpha-oklch: 1 0 100; + --color-black-alpha-oklch: 0 0 100; +} diff --git a/doc/user/assets/sass/_content.scss b/doc/user/assets/sass/_content.scss index 6014d9bb8e90f..d989d82134722 100644 --- a/doc/user/assets/sass/_content.scss +++ b/doc/user/assets/sass/_content.scss @@ -8,7 +8,8 @@ h3, h4, h5, h6 { - line-height: 1.2; + font-family: var(--font-heading); + line-height: var(--leading-headline); code { font-size: inherit !important; @@ -23,24 +24,56 @@ h6 { } h1, h2, h3 { - font-weight: 500; - color: var(--important); + font-weight: var(--weight-heading); + color: var(--heading); } h1 { font-size: var(--h1); - margin-bottom: var(--xx-small); + letter-spacing: var(--tracking-h1); + line-height: var(--leading-h1); + margin-bottom: 12px; +} + +.title-row { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: var(--milli); + + .btn-ghost { + flex: 0 0 auto; + margin-top: rem(0.45); + + svg { + width: rem(1.8); + height: auto; + } + } + + @media(max-width: 850px) { + flex-direction: column; + align-items: flex-start; + + .btn-ghost { + margin-top: calc(-1 * var(--micro)); + margin-bottom: var(--micro); + } + } } h2 { font-size: var(--h2); - margin: var(--medium) 0 var(--nano); + letter-spacing: var(--tracking-h2); + line-height: var(--leading-h2); + margin: 28px 0 12px; + scroll-margin-top: calc(var(--nav-height) + #{rem(2)}); } h3 { font-size: var(--h3); - font-weight: 600; - margin: var(--small) 0 var(--nano); + margin: var(--small) 0 12px; + scroll-margin-top: calc(var(--nav-height) + #{rem(2)}); } div.tab-pane > h3 { @@ -48,13 +81,14 @@ div.tab-pane > h3 { } h4, h5, h6 { - font-weight: 600; - color: var(--font-h4); + font-weight: var(--weight-heading); + color: var(--heading); } h4 { font-size: var(--h4); margin: var(--small) 0 var(--nano); + scroll-margin-top: calc(var(--nav-height) + #{rem(2)}); } div.tab-pane > h4 { @@ -67,11 +101,21 @@ h5 { } strong { - font-weight: 500; + font-weight: var(--weight-body-strong); +} + +.content strong { + color: var(--inline-lifted); + font-weight: var(--weight-body-strong); +} + +.content em { + color: var(--inline-lifted); + font-style: italic; } p+p { - margin-top: var(--milli); + margin-top: 12px; } /* ------------------------------------------------- */ @@ -79,8 +123,17 @@ p+p { /* ------------------------------------------------- */ .content { + --code-highlight-font-size: #{rem(1.5)}; + --code-highlight-padding-top: #{rem(2.8)}; + --code-highlight-padding-inline: #{rem(1.6)}; + --code-highlight-padding-bottom: #{rem(1.4)}; + --code-pre-font-size: #{rem(1.5)}; + --code-pre-padding-block: #{rem(1.4)}; + --code-pre-padding-inline: #{rem(1.6)}; + border-left: 1px solid var(--divider-light); border-right: 1px solid var(--divider-light); + color: var(--body); a.anchorjs-link { @@ -154,8 +207,10 @@ p+p { margin-top: rem(1.6); } - p+table { - margin-top: rem(0.5); + * + table, + * + .table-container, + * + .table-scrollable { + margin-top: rem(1); } pre, @@ -165,7 +220,8 @@ p+p { .tip, .important { font-size: rem(1.5); - font-weight: 300; + font-weight: var(--weight-body); + line-height: var(--leading-body); } a:not(a[class]) { @@ -173,9 +229,17 @@ p+p { &, strong { color: var(--link); - font-weight: 300; - transition: all 0.2s; - transition-delay: 50ms; + font-weight: var(--weight-body); + text-decoration: underline; + text-decoration-color: color-mix(in srgb, var(--link) 30%, transparent); + text-underline-offset: 3px; + transition: color 0.15s ease, text-decoration-color 0.15s ease; + + &:hover, + &:focus { + color: var(--link-hover); + text-decoration-color: var(--link-hover); + } } &[href*="https://"] { @@ -201,10 +265,10 @@ p+p { &, strong { - color: var(--important); + color: var(--link-hover); } - border-color: var(--important); + border-color: var(--link-hover); &[href*="https://"] { &::after { @@ -215,495 +279,2266 @@ p+p { } .callout { - background: var(--brand); - border-radius: 3px; - padding: 1px; - border-radius: rem(1.2); - box-shadow: var(--shadow-default); + @include docs-feature-card($top-accent: true); + + margin: var(--x-small) 0; + padding: rem(1.2) rem(1.4); &:not(.bottom) { - margin: var(--large) 0; + margin: var(--x-small) 0; } - a { - margin-top: var(--milli); + > div { + background: transparent; + border: none; + border-radius: 0; + padding: 0; } - div { - background: var(--card-light); - padding: var(--x-small); - border-radius: inherit; - - @media(max-width: 400px) { - padding: var(--milli); - } + h2, + h3 { + color: var(--heading); + margin-bottom: rem(1); } - div> :first-child { + div > :first-child { margin-top: 0; } - } - - .multilinkbox { - margin: var(--small) 0; - display: flex; - gap: var(--milli); - @media(max-width: 1325px) { - flex-direction: column; - max-width: 400px; + div > :last-child { + margin-bottom: 0; } - } - - .linkbox { - flex: 0 0 31%; - position: relative; - padding: var(--milli) var(--milli) var(--nano); - font-size: var(--sm); - @include card; - &::before { - content: ""; - width: 32px; - height: 32px; - position: absolute; - top: rem(2); - background-size: contain; + p, + ul, + ol { + margin-top: rem(1); } - &.book, - &.bulb, - &.doc, - &.materialize, - &.touch { - padding-top: rem(8); + ul, + ol { + padding-left: rem(2.1); } - &.materialize::before { - background-image: url("../images/materialize_favicon_32.png"); - margin-left: -10px; + li { + margin-top: rem(0.35); } - &.book::before { - background-image: url("../images/icon_book.png"); + .btn { + margin-top: rem(1.2); + margin-right: rem(0.8); } + } - &.bulb::before { - background-image: url("../images/icon_bulb.png"); - } + .whats-new-callout { + --callout-item-surface: var(--docs-card-inset); + --callout-item-border: var(--docs-card-divider-strong); - &.doc::before { - background-image: url("../images/icon_doc.png"); + a:not(.whats-new-callout__item) { + border-bottom: 0; + text-decoration: none; } - &.touch::before { - background-image: url("../images/icon_touch.png"); - } + @include docs-card-top-hairline; - .title { - text-transform: uppercase; - font-size: 12px; - font-weight: 500; - color: var(--important); - margin-bottom: var(--nano); - } + @include docs-feature-card; + color: var(--body); + font-family: var(--font-body); + margin: var(--x-small) 0 var(--large); + overflow: hidden; + padding: var(--milli); + position: relative; - ul { - list-style: none; + &, + * { + box-sizing: border-box; } - a { - font-weight: 300; + svg { + display: block; + flex-shrink: 0; } - } - - img { - max-width: 100%; - } - table { - border-collapse: collapse; - font-size: var(--sm); - font-weight: 300; - line-height: rem(2.1); + &__header { + align-items: center; + display: flex; + gap: 14px; + justify-content: space-between; + margin-bottom: 16px; + } + + &__title-wrap { + align-items: center; + display: flex; + gap: 8px; + min-width: 0; + } + + &__sparkle { + align-items: center; + background: linear-gradient( + 145deg, + color-mix(in srgb, var(--sg-violet) 22%, transparent), + color-mix(in srgb, var(--highlight) 12%, transparent) + ); + border: 1px solid color-mix(in srgb, var(--sg-violet) 30%, transparent); + border-radius: rem(0.6); + box-shadow: 0 0 18px color-mix(in srgb, var(--sg-violet) 16%, transparent); + color: color-mix(in srgb, var(--sg-lavender-2) 88%, var(--heading)); + display: flex; + height: 36px; + justify-content: center; + width: 36px; - @media(max-width: 500px) { - code { - font-size: var(--xsm); + svg { + height: 18px; + width: 18px; } } - } - - tr { - border-bottom: 1px solid var(--divider-light); - } - - th { - color: var(--important); - border-bottom: 1px var(--highlight) solid; - text-align: left; - padding: 8px; - font-size: rem(1.3); - vertical-align: bottom; - } - - td { - padding: var(--nano); - vertical-align: top; - - @media(max-width: 500px) { - padding: var(--nano) var(--pico); - } - pre { - background-color: inherit; - border: 0; - font-size: inherit; + h2 { + color: var(--heading); + font-size: var(--h3); + font-weight: var(--weight-heading); + line-height: 1.2; margin: 0; - padding: 0; + white-space: nowrap; } - } - - pre { - background-color: var(--code-block); - border-radius: 4px; - border: 1px solid var(--divider-light); - color: $black-v2; - font-family: Courier, monospace; - font-size: rem(1.5); - margin: rem(1) 0 rem(0.5); - overflow: auto; - padding: rem(1.6); - code { - color: $black-v2; - background: none; - border: none; - padding: 0; + &__version { + background: color-mix(in srgb, var(--sg-violet) 12%, transparent); + border: 1px solid color-mix(in srgb, var(--sg-violet) 24%, transparent); + border-radius: 999px; + color: color-mix(in srgb, var(--sg-lavender-2) 90%, var(--heading)); + font-family: var(--font-mono); + font-size: var(--xsm); + font-weight: var(--weight-body); + letter-spacing: 0.02em; + line-height: 1; + padding: 4px 10px; + white-space: nowrap; } - } - - code { - font-family: "Fira Code", Courier, monospace; - font-variant-ligatures: none; - font-size: rem(1.3); - font-weight: 500; - background: var(--code-block); - border: 1px solid var(--divider-light); - box-sizing: border-box; - border-radius: 2px; - padding: rem(0.1) rem(0.25) rem(0); - color: var(--code-simple); - background: var(--code-simple-bg); - } - // TODO: This common pattern will be removed. - // Merge a highlighted code block followed by a non-highlighted code block, - // since this is a common pattern in our docs to indicate a (highlighted) - // shell or SQL snippet followed by its (unhighlighted) output. - .highlight+pre { - border-top: 0; - margin-top: -8px; - padding-top: 0; - } + &__release-link { + align-items: center; + color: var(--link); + display: inline-flex; + font-size: var(--sm); + font-weight: var(--weight-body); + gap: 6px; + line-height: 1.2; + opacity: 0.92; + transition: color 0.15s ease, opacity 0.15s ease; + white-space: nowrap; + + svg { + opacity: 0.75; + transition: opacity 0.15s ease, transform 0.15s ease; + } - ul, - ol { - margin: 0; + &:hover, + &:focus { + color: var(--link-hover); + opacity: 1; - li { - margin-bottom: rem(0.5); + svg { + opacity: 1; + transform: translate(1px, -1px); + } + } } - } - li { - h4 { - margin-top: 0; + &__items { + display: grid; + gap: 12px; } - } - - :not(div.footnotes) > ol.has-p:not(ol.has-p ol.has-p) { - list-style-type: none; - counter-reset: list-counter; - margin: 0; - padding: 0; - >li { - counter-increment: list-counter; - min-height: rem(5); - position: relative; - padding: rem(1.6) 0 rem(1.6) rem(6); - border-top: 1px solid var(--divider-light); + &__item { + @include callout-item-accent("--sg-violet"); - ul, - ol { - padding-left: var(--milli); - } + align-items: center; + background-color: var(--callout-item-surface); + border: 1px solid var(--callout-item-border); + border-radius: rem(0.8); + color: inherit; + display: flex; + gap: 12px; + padding: 14px 16px; + text-decoration: none; + transition: + background-color 0.18s ease, + border-color 0.18s ease; - ol { - li { - list-style-type: lower-alpha; - } + &:nth-child(2) { + @include callout-item-accent("--highlight"); } - @media(max-width: 850px) { - padding-left: rem(4.5); + &:nth-child(3) { + @include callout-item-accent("--orchid"); } - @media(max-width: 480px) { - padding-left: rem(3); - } + &:hover, + &:focus { + background-color: color-mix(in srgb, var(--callout-accent-soft) 20%, var(--callout-item-surface)); + border-color: var(--callout-accent-border); - &:before { - content: counter(list-counter); - color: var(--orchid); - font-size: rem(3); - font-weight: 100; - position: absolute; - top: 100; - left: rem(1); + .whats-new-callout__item-heading { + color: var(--heading); + } - @media(max-width: 850px) { - font-size: rem(4); - left: rem(.5); + .whats-new-callout__item-icon { + color: var(--heading); } - @media(max-width: 480px) { - font-size: rem(3.5); - left: 0; + .whats-new-callout__item-arrow { + color: color-mix(in srgb, var(--callout-accent) 72%, var(--heading)); + opacity: 1; + transform: translateX(2px); } } + } - &:last-child { - padding-bottom: 0; - } + &__item-icon { + align-items: center; + background: linear-gradient( + 145deg, + color-mix(in srgb, var(--callout-accent) 24%, transparent), + color-mix(in srgb, var(--callout-accent) 8%, transparent) + ); + border: 1px solid color-mix(in srgb, var(--callout-accent) 32%, transparent); + border-radius: rem(0.6); + box-shadow: 0 0 16px color-mix(in srgb, var(--callout-accent) 14%, transparent); + color: color-mix(in srgb, var(--callout-accent) 76%, var(--heading)); + display: flex; + flex-shrink: 0; + height: 40px; + justify-content: center; + transition: color 0.18s ease; + width: 40px; - p { - display: block; + svg { + height: 20px; + width: 20px; } } - } - hr { - border: none; - border-top: 1px solid $medium-grey-v2; - margin: rem(3.6) auto; - width: 80%; - } + &__item-copy { + display: grid; + flex: 1; + gap: 6px; + min-width: 0; + } - .warning, - .private-preview { - // NOTE(benesch): please ensure these colors stay yellowish/orange. - // Private preview and warnings should indicate a moderate amount of - // caution--not serious danger, but nothing to overlook either. - background: rgba(238, 134, 96, 0.05); - border: 1px solid rgba(238, 134, 96, 0.2); + &__item-arrow { + align-self: center; + color: var(--body); + display: flex; + flex-shrink: 0; + opacity: 0.45; + transition: + color 0.18s ease, + opacity 0.18s ease, + transform 0.18s ease; + } + + &__item-heading { + align-items: center; + color: var(--inline-lifted); + display: flex; + flex-wrap: wrap; + font-size: var(--sm); + font-weight: var(--weight-heading); + gap: 8px; + line-height: 1.2; + transition: color 0.18s ease; + } + + &__item-text { + color: var(--body); + display: block; + font-size: var(--sm); + font-weight: var(--weight-body); + line-height: var(--leading-body); + } + + &__badge { + border-radius: 999px; + font-family: var(--font-mono); + font-size: 10px; + font-weight: var(--weight-body-emphasis); + letter-spacing: var(--tracking-code); + line-height: 1; + padding: 4px 8px; + text-transform: uppercase; - &::after { - border-color: var(--bg) var(--bg) #fbe2d9 #fbe2d9; - background: #fbe2d9; - } + &--new { + background: color-mix(in srgb, var(--sg-teal-5) 42%, transparent); + border: 1px solid color-mix(in srgb, var(--sg-teal-3) 34%, transparent); + color: color-mix(in srgb, var(--sg-teal-3) 88%, var(--heading)); + } - .gutter { - color: #d33902; + &--preview { + background: color-mix(in srgb, var(--table-orange) 14%, transparent); + border: 1px solid color-mix(in srgb, var(--table-orange) 28%, transparent); + color: color-mix(in srgb, var(--table-orange) 88%, var(--heading)); + } } - } - - .private-preview-inline { - color: #d33902; - white-space: nowrap; - background: rgba(238, 134, 96, 0.05); - border: 1px solid rgba(238, 134, 96, 0.2); - border-radius: rem(0.6); - padding: rem(0.1); - } - .note, - .important { - background: var(--note); - border: 1px solid var(--note-border); + &__footer { + border-top: 1px solid var(--callout-item-border); + color: var(--body); + font-size: var(--sm); + font-weight: var(--weight-body); + line-height: var(--leading-body); + margin: var(--milli) 0 0; + padding-top: var(--milli); - a { - &:hover, - &:focus { - color: var(--sub) !important; - } + a { + color: var(--link); + font-weight: var(--weight-body); + text-decoration: underline; + text-decoration-color: color-mix(in srgb, var(--link) 30%, transparent); + text-underline-offset: 3px; - code { &:hover, &:focus { - color: var(--sub) !important; + color: var(--link-hover); + text-decoration-color: var(--link-hover); } } } - &::after { - border-color: var(--bg) var(--bg) var(--note-after) var(--note-after); - background: var(--note-after); - } + @media(max-width: 820px) { + padding: var(--milli); - .gutter { - color: var(--note-gutter); + &__header { + align-items: flex-start; + flex-direction: column; + gap: 14px; + } + + h2 { + font-size: var(--h4); + } } - } - .tip { - background: var(--tip); - border: 1px solid var(--tip-border); + @media(max-width: 520px) { + border-radius: var(--table-radius); + padding: 16px; - a { - &:hover, - &:focus { - color: var(--sub) !important; + &__title-wrap { + align-items: flex-start; + flex-wrap: wrap; + gap: 12px; } - code { - &:hover, - &:focus { - color: var(--sub) !important; - } + &__sparkle, + &__item-icon { + height: 30px; + width: 30px; } - } - &::after { - border-color: var(--bg) var(--bg) var(--tip-after) var(--tip-after); - background: var(--tip-after); + &__item { + align-items: flex-start; + gap: 12px; + padding: 14px; + } } + } - .gutter { - color: var(--tip-gutter); + .multilinkbox { + align-items: stretch; + display: grid; + gap: rem(1.2); + grid-template-columns: repeat(3, minmax(0, 1fr)); + margin: var(--xx-small) 0; + + @media(max-width: 860px) { + grid-template-columns: 1fr; } } - .annotation { - border: 1px solid var(--annotation-border); + .linkbox { + --linkbox-accent: var(--sg-violet); + --linkbox-accent-border: color-mix(in srgb, var(--linkbox-accent) 22%, transparent); + --linkbox-accent-soft: color-mix(in srgb, var(--linkbox-accent) 10%, transparent); + --linkbox-divider: var(--docs-card-divider-strong); + --linkbox-label: color-mix(in srgb, var(--linkbox-accent) 72%, var(--heading)); + --linkbox-link: var(--sg-lavender-2); + --linkbox-surface: var(--docs-card-surface); + + @include docs-feature-card; + + --docs-card-glow: color-mix(in srgb, var(--linkbox-accent) 8%, transparent); + + background-color: var(--linkbox-surface); + box-shadow: var(--docs-card-shadow); + color: var(--body); + display: grid; + font-family: var(--font-body); + grid-template-rows: auto 1fr; + height: 100%; + min-height: 100%; + min-width: 0; + overflow: hidden; + position: relative; + transition: + background-color 0.18s ease, + border-color 0.18s ease, + box-shadow 0.18s ease; - a { - &:hover, - &:focus { - color: var(--sub) !important; - } + &:hover, + &:focus-within { + background-color: color-mix(in srgb, var(--linkbox-accent-soft) 20%, var(--linkbox-surface)); + border-color: var(--linkbox-accent-border); - code { - &:hover, - &:focus { - color: var(--sub) !important; - } + .linkbox__category-icon { + color: var(--heading); } } - } + &--databases { + --linkbox-accent: var(--sg-teal-3); + --linkbox-label: color-mix(in srgb, var(--sg-teal-3) 78%, var(--heading)); + } - .public-preview { - background: var(--public-preview); - border: 1px solid var(--public-preview-border); - color: var(--public-preview-text); + &--brokers { + --linkbox-accent: var(--sg-violet); + --linkbox-label: color-mix(in srgb, var(--sg-violet) 72%, var(--heading)); + } - &::after { - border-color: var(--bg) var(--bg) var(--public-preview-after) var(--public-preview-after); - background: var(--public-preview-after); + &--webhooks { + --linkbox-accent: var(--orchid); + --linkbox-label: color-mix(in srgb, var(--orchid) 72%, var(--heading)); } - .gutter { - color: var(--public-preview-gutter); + &.materialize::before, + &.book::before, + &.bulb::before, + &.doc::before, + &.touch::before { + content: ""; + width: 32px; + height: 32px; + position: absolute; + top: rem(2); + left: 0; + background-size: contain; } - } - .annotation { - box-sizing: border-box; - margin: rem(1.6) 0; - padding: rem(1) rem(1) rem(1) rem(2); - position: relative; + &.materialize::before { background-image: url("../images/materialize_favicon_32.png"); } + &.book::before { background-image: url("../images/icon_book.png"); } + &.bulb::before { background-image: url("../images/icon_bulb.png"); } + &.doc::before { background-image: url("../images/icon_doc.png"); } + &.touch::before { background-image: url("../images/icon_touch.png"); } + + &.book .title, + &.bulb .title, + &.doc .title, + &.touch .title, + &.materialize .title { + padding-left: 28px; + } - @media(max-width: 510px) { - padding: rem(.8) rem(.8) rem(.8) rem(1); + &__header { + align-items: center; + border-bottom: 1px solid color-mix(in srgb, var(--linkbox-accent) 16%, var(--linkbox-divider)); + display: flex; + flex-shrink: 0; + gap: 12px; + padding: 16px; } - p:first-of-type { - margin-top: 0; + &__category-icon { + align-items: center; + background: linear-gradient( + 145deg, + color-mix(in srgb, var(--linkbox-accent) 22%, transparent), + color-mix(in srgb, var(--linkbox-accent) 7%, transparent) + ); + border: 1px solid color-mix(in srgb, var(--linkbox-accent) 32%, transparent); + border-radius: rem(0.6); + box-shadow: 0 0 14px color-mix(in srgb, var(--linkbox-accent) 12%, transparent); + color: color-mix(in srgb, var(--linkbox-accent) 72%, var(--heading)); + display: flex; + flex-shrink: 0; + height: 32px; + justify-content: center; + transition: color 0.18s ease; + width: 32px; + + &::before { + background: currentColor; + content: ""; + display: block; + height: 16px; + mask-position: center; + mask-repeat: no-repeat; + mask-size: contain; + -webkit-mask-position: center; + -webkit-mask-repeat: no-repeat; + -webkit-mask-size: contain; + width: 16px; + } + + &--databases::before { + mask-image: url("../images/connectors/category-databases.svg"); + -webkit-mask-image: url("../images/connectors/category-databases.svg"); + } + + &--brokers::before { + mask-image: url("../images/connectors/category-brokers.svg"); + -webkit-mask-image: url("../images/connectors/category-brokers.svg"); + } + + &--webhooks::before { + mask-image: url("../images/connectors/category-webhooks.svg"); + -webkit-mask-image: url("../images/connectors/category-webhooks.svg"); + } + } + + .title { + background: transparent; + border-bottom: none; + color: var(--linkbox-label); + flex: 1; + font-family: var(--font-body); + font-size: var(--xsm); + font-weight: var(--weight-heading); + letter-spacing: var(--tracking-eyebrow); + line-height: 1.3; + margin: 0; + padding: 0; + text-transform: uppercase; + } + + > ul { + align-self: start; + display: block; + list-style: none; + margin: 0; + padding: 14px 16px 18px; + } + + li { + margin: 0; + } + + // a:not(a[class]) to outrank the generic underlined content-link rule. + a:not(a[class]), + a:not(a[class]) strong { + border-radius: rem(0.45); + color: var(--linkbox-link); + display: block; + font-size: var(--sm); + font-weight: var(--weight-body); + line-height: 1.55; + margin: 0 rem(-0.4); + padding: rem(0.45) rem(0.6); + text-decoration: none; + transition: + background-color 0.15s ease, + color 0.15s ease; + + &:hover, + &:focus-visible { + background: color-mix(in srgb, var(--linkbox-accent-soft) 45%, transparent); + border-bottom: none; + color: var(--heading); + text-decoration: none; + } + } + } + + img { + max-width: 100%; + } + + > img, + p > img { + border: 1px solid var(--docs-card-divider); + border-radius: rem(0.6); + box-shadow: var(--docs-card-shadow); + display: block; + margin: rem(1.2) auto; + } + + blockquote { + @include docs-admonition-theme("--sg-lavender-2"); + @include docs-admonition-card; + + font-style: normal; + + p:last-child { + margin-bottom: 0; + } + } + + dl { + margin: rem(1.2) 0; + } + + dt { + color: var(--heading); + font-family: var(--font-heading); + font-size: var(--sm); + font-weight: var(--weight-heading); + margin-top: rem(1.2); + + &:first-child { + margin-top: 0; + } + } + + dd { + border-left: 2px solid var(--docs-card-divider); + color: var(--body); + margin: rem(0.4) 0 rem(0.8); + padding-left: rem(1.2); + } + + figure { + @include docs-feature-card; + + margin: var(--small) 0; + overflow: hidden; + padding: var(--nano); + + img { + border: 1px solid var(--docs-card-divider); + border-radius: rem(0.6); + display: block; + margin: 0 auto; + max-width: 100%; + width: 100%; + } + } + + figcaption { + padding: var(--nano) var(--milli); + font-size: var(--xsm); + font-weight: var(--weight-body); + color: var(--caption); + font-style: italic; + line-height: var(--leading-body); + } + + .architecture-diagram-figure { + @include docs-feature-card; + + margin: var(--small) 0; + overflow: hidden; + padding: rem(1.4) rem(1.4) rem(1.2); + + figcaption { + margin-top: rem(0.6); + padding: 0; + text-align: center; + } + } + + .architecture-diagram { + --arch-source-accent: #6d28d9; + --arch-source-soft: #f5f0ff; + --arch-source-border: #ddd0ff; + --arch-compute-accent: #00857a; + --arch-compute-soft: #ecfdf9; + --arch-compute-border: #9fe8dc; + --arch-serving-accent: #0969da; + --arch-serving-soft: #eff6ff; + --arch-serving-border: #b6d4fe; + --arch-code-bg: #ffffff; + --arch-stack-opacity: 0.55; + --arch-kw: #6d28d9; + --arch-fn: #00857a; + --arch-var: #374151; + --arch-txt: #4b5563; + --arch-punct: #6e7781; + --arch-shadow-color: rgb(15 23 42 / 12%); + + display: block; + aspect-ratio: 1120 / 400; + height: auto; + width: 100%; + + .arch-tier--source { + --arch-tier-accent: var(--arch-source-accent); + --arch-tier-soft: var(--arch-source-soft); + --arch-tier-border: var(--arch-source-border); + } + + .arch-tier--compute { + --arch-tier-accent: var(--arch-compute-accent); + --arch-tier-soft: var(--arch-compute-soft); + --arch-tier-border: var(--arch-compute-border); + } + + .arch-tier--serving { + --arch-tier-accent: var(--arch-serving-accent); + --arch-tier-soft: var(--arch-serving-soft); + --arch-tier-border: var(--arch-serving-border); + } + + .arch-tier-label { + fill: var(--arch-tier-accent); + font-family: var(--font-mono); + font-size: 13px; + font-weight: 600; + letter-spacing: 0.08em; + } + + .arch-tier-card { + fill: var(--arch-code-bg); + stroke: var(--arch-tier-border); + stroke-width: 1.5; + } + + .arch-tier-stack { + fill: var(--arch-tier-soft); + stroke: var(--arch-tier-border); + stroke-width: 1; + } + + .arch-tier-stack--1 { + opacity: calc(var(--arch-stack-opacity) + 0.12); + } + + .arch-tier-stack--2 { + opacity: var(--arch-stack-opacity); + } + + .arch-dot { + fill: var(--arch-tier-accent); + opacity: 0.4; + } + + .arch-card-divider { + opacity: 0.7; + stroke: var(--arch-tier-border); + stroke-width: 1; + } + + .arch-code-panel { + fill: none; + } + + .arch-code-line { + font-family: var(--font-mono); + font-size: 14px; + font-weight: 500; + letter-spacing: var(--tracking-code); + } + + .arch-kw { + fill: var(--arch-kw); + font-weight: 600; + } + + .arch-fn { + fill: var(--arch-fn); + font-weight: 600; + } + + .arch-var { + fill: var(--arch-var); + } + + .arch-txt { + fill: var(--arch-txt); + } + + .arch-punct { + fill: var(--arch-punct); + } + + .arch-stop--source { + stop-color: var(--arch-source-accent); + } + + .arch-stop--compute { + stop-color: var(--arch-compute-accent); + } + + .arch-stop--serving { + stop-color: var(--arch-serving-accent); + } + + .arch-arrowhead--compute { + fill: var(--arch-compute-accent); + } + + .arch-arrowhead--serving { + fill: var(--arch-serving-accent); + } + + .arch-flow-base { + fill: none; + opacity: 0.35; + stroke-linecap: round; + stroke-width: 2; + } + + // Data "packets" flowing along the base line. The dash period (0.1 + // dot + 10 gap) must match the keyframe offset below for a seamless + // loop. + .arch-flow-dots { + animation: arch-flow-dash 1s linear infinite; + fill: none; + stroke-dasharray: 0.1 10; + stroke-linecap: round; + stroke-width: 3; + } + + @media (prefers-reduced-motion: reduce) { + .arch-flow-dots { + animation: none; + } + } + + .arch-shadow { + flood-color: var(--arch-shadow-color); + flood-opacity: 1; + } + } + + @keyframes arch-flow-dash { + to { + stroke-dashoffset: -10.1; + } + } + + body.dark & { + .architecture-diagram { + --arch-source-accent: #c4b5fd; + --arch-source-soft: rgb(196 181 253 / 10%); + --arch-source-border: rgb(196 181 253 / 28%); + --arch-compute-accent: #2bddc2; + --arch-compute-soft: rgb(43 221 194 / 10%); + --arch-compute-border: rgb(43 221 194 / 28%); + --arch-serving-accent: #7dcfff; + --arch-serving-soft: rgb(125 207 255 / 10%); + --arch-serving-border: rgb(125 207 255 / 28%); + --arch-code-bg: color-mix(in srgb, var(--bg) 82%, var(--card-light)); + --arch-stack-opacity: 0.35; + --arch-kw: #c4b5fd; + --arch-fn: #2bddc2; + --arch-var: #e2e8f0; + --arch-txt: #cbd5e1; + --arch-punct: #7b839f; + --arch-shadow-color: rgb(0 0 0 / 45%); + } + } + + table.syntax-table { + background: + linear-gradient( + 180deg, + color-mix(in srgb, var(--sg-lavender-3) 14%, transparent) 0%, + color-mix(in srgb, var(--sg-violet) 5%, transparent) 42%, + transparent 100% + ) + 0 0 / 100% rem(1.4) no-repeat, + var(--bg); + border-collapse: separate; + border-spacing: 0; + border: 1px solid var(--docs-card-border); + border-radius: var(--table-radius); + box-shadow: var(--docs-card-shadow); + font-size: var(--sm); + font-weight: var(--weight-body); + line-height: var(--leading-body); + overflow: hidden; + table-layout: auto; + width: 100%; + + @media(max-width: 500px) { + code { + font-size: var(--xsm); + } + } + + thead th { + backdrop-filter: blur(8px); + background: color-mix(in srgb, var(--bg-sub) 42%, var(--bg)); + border-bottom: 1px solid var(--docs-card-divider); + color: var(--table-text); + font-family: var(--font-heading); + font-size: var(--xsm); + font-weight: 600; + letter-spacing: 0.08em; + text-transform: uppercase; + } + + tbody th { + color: var(--heading); + font-weight: 500; + vertical-align: top; + } + + tbody tr { + transition: background-color 0.15s ease; + + &:hover { + background: color-mix(in srgb, var(--highlight) 4%, var(--bg)); + } + } + + tr:last-child { + > th, + > td { + border-bottom: none; + } + } + + th, + td { + border-bottom: 1px solid var(--docs-card-divider); + padding: rem(0.85) rem(1.4); + text-align: left; + vertical-align: top; + } + + th + th, + th + td, + td + td { + border-left: 1px solid var(--docs-card-divider); + } + + td { + @include docs-nested-code-vars; + + color: var(--body); + + @media(max-width: 500px) { + padding: var(--nano) var(--pico); + } + + pre { + background-color: inherit; + border: 0; + box-shadow: none; + margin: 0; + } + + .highlight { + margin: rem(0.6) 0; + width: 100%; + + pre, + .chroma { + overflow-x: auto; + } + } + } + + a:not(a[class]) { + border-bottom: 1px solid color-mix(in srgb, var(--link) 35%, transparent); + color: var(--link); + font-weight: var(--weight-body-strong); + text-decoration: none; + + &:hover, + &:focus { + border-bottom-color: var(--link); + color: var(--link-hover); + text-decoration: none; + } + } + } + + table:not(.mz-offerings__nested-table):not(.syntax-table) { + background: + linear-gradient( + 180deg, + color-mix(in srgb, var(--sg-lavender-3) 14%, transparent) 0%, + color-mix(in srgb, var(--sg-violet) 5%, transparent) 42%, + transparent 100% + ) + 0 0 / 100% rem(1.4) no-repeat, + radial-gradient(130% 90% at 50% -40%, color-mix(in srgb, var(--sg-violet) 7%, transparent), transparent 58%), + var(--bg); + border-collapse: separate; + border-spacing: 0; + border: 1px solid var(--docs-card-border); + border-radius: var(--table-radius); + box-shadow: var(--docs-card-shadow); + font-size: var(--sm); + font-weight: var(--weight-body); + line-height: var(--leading-body); + overflow: hidden; + table-layout: auto; + width: 100%; + + @media(max-width: 500px) { + code { + font-size: var(--xsm); + } + } + + thead th { + backdrop-filter: blur(8px); + background: color-mix(in srgb, var(--bg-sub) 42%, var(--bg)); + border-bottom: 1px solid var(--docs-card-divider); + color: var(--table-text); + font-family: var(--font-heading); + font-size: var(--xsm); + font-weight: 600; + letter-spacing: 0.08em; + text-transform: uppercase; + } + + tbody th { + color: var(--heading); + font-weight: 500; + vertical-align: top; + } + + tbody tr { + transition: background-color 0.15s ease; + + &:hover { + background: color-mix(in srgb, var(--highlight) 4%, var(--bg)); + } + } + + tr:last-child { + > th, + > td { + border-bottom: none; + } + } + + th, + td { + border-bottom: 1px solid var(--docs-card-divider); + padding: rem(0.85) rem(1.4); + text-align: left; + vertical-align: top; + } + + th + th, + th + td, + td + td { + border-left: 1px solid var(--docs-card-divider); + } + + td { + @include docs-nested-code-vars; + + color: var(--body); + + @media(max-width: 500px) { + padding: var(--nano) var(--pico); + } + + // Inline code chips only. Block snippets live in .highlight / pre. + code:not(pre code):not(.highlight code) { + background: color-mix(in srgb, var(--highlight) 9%, var(--bg)); + border: 1px solid color-mix(in srgb, var(--highlight) 12%, transparent); + border-radius: rem(0.35); + font-size: rem(1.2); + padding: rem(0.08) rem(0.32); + } + + pre, + .highlight { + code { + background: none; + border: none; + border-radius: 0; + color: inherit; + font-size: inherit; + padding: 0; + } + } + + pre { + background-color: inherit; + border: 0; + box-shadow: none; + margin: 0; + } + + .highlight { + margin: rem(0.6) 0; + width: 100%; + + pre, + .chroma { + overflow-x: auto; + } + } + } + + a:not(a[class]) { + border-bottom: 1px solid color-mix(in srgb, var(--link) 35%, transparent); + color: var(--link); + font-weight: var(--weight-body-strong); + text-decoration: none; + + &:hover, + &:focus { + border-bottom-color: var(--link); + color: var(--link-hover); + text-decoration: none; + } + } + } + + .table-container { + overflow-x: auto; + + &.mz-offerings-container { + border-radius: var(--table-radius); + max-width: 100%; + overflow-x: visible; + } + } + + .mz-offerings { + @include docs-feature-card; + color: var(--body); + font-family: var(--font-body); + overflow: hidden; + position: relative; + width: 100%; + + @include docs-card-top-hairline; + + &, + * { + box-sizing: border-box; + } + + a:not(.mz-offerings__action-primary) { + border-bottom: 0; + text-decoration: none; + } + + svg { + display: block; + flex-shrink: 0; + } + + &__headers { + background: color-mix(in srgb, var(--bg) 35%, transparent); + border-bottom: 1px solid var(--docs-card-divider-strong); + display: grid; + grid-template-columns: var(--offerings-cols); + } + + &__col-label { + color: var(--heading); + font-family: var(--font-heading); + font-size: var(--xsm); + font-weight: var(--weight-heading); + letter-spacing: var(--tracking-eyebrow); + padding: 14px 24px; + text-transform: uppercase; + + & + & { + border-left: 1px solid var(--docs-card-divider); + } + } + + &__row { + border-top: 1px solid var(--docs-card-divider); + display: grid; + grid-template-columns: var(--offerings-cols); + position: relative; + transition: background-color 0.15s ease; + + &::before { + background: linear-gradient(180deg, transparent, var(--offering-accent), transparent); + bottom: 0; + content: ""; + left: 0; + opacity: 0.25; + position: absolute; + top: 0; + transition: opacity 0.2s ease; + width: 1px; + } + + &:hover { + background-color: var(--offering-row-glow); + + &::before { + opacity: 0.9; + } + } + + &--cloud { + @include offering-row-theme("--table-green"); + } + + &--self { + @include offering-row-theme("--sg-violet"); + + // Identity + CTA: neutral surfaces; purple only on the row stripe + inner table + --offering-badge-bg: var(--surface-inset); + --offering-badge-border: var(--border-subtle); + --offering-tile-bg: var(--surface-inset); + --offering-tile-glow: none; + --offering-cta-accent: var(--inline-lifted); + --offering-action-bg: var(--surface-subtle); + --offering-action-border: color-mix(in srgb, var(--sg-lavender-2) 28%, var(--border-subtle)); + --offering-action-hover: var(--surface-inset); + + .mz-offerings__icon-tile { + color: var(--sub); + } + + .mz-offerings__badge { + color: var(--caption); + } + + .mz-offerings__action-primary { + &:hover, + &:focus { + border-color: color-mix(in srgb, var(--sg-lavender-2) 40%, var(--border-subtle)); + color: var(--heading); + } + } + } + + &--emulator { + @include offering-row-theme("--table-orange"); + } + } + + &__identity { + display: flex; + flex-direction: column; + gap: 10px; + padding: 24px 20px 24px 26px; + } + + &__icon-badge-row { + align-items: center; + display: flex; + flex-wrap: wrap; + gap: 8px; + } + + &__icon-tile { + align-items: center; + background: var(--offering-tile-bg, var(--offering-badge-bg)); + border: 1px solid var(--offering-badge-border); + border-radius: rem(0.6); + box-shadow: var(--offering-tile-glow, none); + color: color-mix(in srgb, var(--offering-identity-accent, var(--offering-accent)) 72%, var(--heading)); + display: flex; + flex-shrink: 0; + height: 32px; + justify-content: center; + width: 32px; + } + + &__badges { + align-items: center; + display: flex; + flex-wrap: wrap; + gap: 6px; + } + + &__badge { + background: var(--offering-badge-bg); + border: 1px solid var(--offering-badge-border); + border-radius: rem(0.45); + color: var(--offering-identity-accent, var(--offering-accent)); + display: inline-flex; + font-family: var(--font-mono); + font-size: 10px; + letter-spacing: var(--tracking-code); + padding: 3px 8px; + } + + &__badge-popular { + align-items: center; + background: var(--table-yellow-bg); + border: 1px solid var(--table-yellow-border); + border-radius: rem(0.45); + color: var(--table-yellow); + display: inline-flex; + font-family: var(--font-mono); + font-size: 10px; + gap: 4px; + letter-spacing: var(--tracking-code); + padding: 3px 8px; + } + + &__name { + color: var(--inline-lifted); + font-size: var(--sm); + font-weight: var(--weight-heading); + letter-spacing: -0.015em; + line-height: 1.35; + margin: 0; + } + + &__tagline { + color: var(--body); + font-family: var(--font-mono); + font-size: var(--xsm); + line-height: 1.4; + margin: 0; + opacity: 0.88; + } + + &__desc { + border-left: 1px solid var(--docs-card-divider); + color: var(--body); + font-size: var(--sm); + font-weight: var(--weight-body); + line-height: var(--leading-body); + min-width: 0; + padding: rem(2.4); + + p { + margin: 0; + } + } + + &__nested { + margin-top: rem(1); + min-width: 0; + } + + &__nested-note { + align-items: center; + color: var(--offering-edition-label, var(--offering-accent)); + display: flex; + font-family: var(--font-mono); + font-size: var(--xsm); + gap: rem(0.6); + margin-bottom: rem(1); + } + + &__nested-wrap { + background: var(--offering-nested-surface, var(--surface-inset)); + border: 1px solid var(--offering-nested-border, var(--border-subtle)); + border-radius: rem(1); + margin-top: rem(1); + max-width: 100%; + min-width: 0; + overflow: hidden; + } + + &__nested-table { + background: transparent; + border: none; + border-collapse: collapse; + border-radius: 0; + box-shadow: none; + font-size: var(--xsm); + margin-top: 0; + min-width: 0; + table-layout: fixed; + width: 100%; + + thead tr { + background: var(--offering-nested-header-bg, var(--surface-inset)); + border-bottom: 1px solid var(--offering-nested-border, var(--border-subtle)); + } + + thead th { + background: transparent; + border: none; + color: var(--caption); + font-family: var(--font-mono); + font-size: rem(1); + font-weight: var(--weight-body-emphasis); + letter-spacing: 0.06em; + padding: rem(0.75) rem(1); + text-align: left; + text-transform: uppercase; + vertical-align: middle; + + &.mz-offerings__th-com { + text-align: center; + } + } + + th, + td { + border-bottom: none; + border-left: none; + border-top: none; + padding: rem(0.75) rem(1); + vertical-align: middle; + } + + tbody tr + tr { + border-top: 1px solid var(--border-faint); + } + + .mz-offerings__chip--yes { + background: transparent; + color: var(--offering-edition-value, var(--offering-accent)); + } + } + + &__th-ent { + color: var(--offering-edition-heading, var(--offering-accent)); + width: 24%; + } + + &__th-com { + color: var(--caption); + text-align: center; + width: 24%; + } + + &__td-feature { + color: var(--caption); + font-family: var(--font-mono); + line-height: 1.35; + white-space: normal; + width: 52%; + } + + &__td-ent { + color: var(--offering-edition-value, var(--offering-accent)); + font-family: var(--font-mono); + + &--neutral { + color: var(--inline-lifted); + } + } + + &__td-com { + color: var(--caption); + font-family: var(--font-mono); + text-align: center; + + .mz-offerings__chip { + margin-inline: auto; + } + } + + &__chip { + align-items: center; + border-radius: 50%; + display: inline-flex; + flex-shrink: 0; + height: rem(1.75); + justify-content: center; + width: rem(1.75); + + &--no { + background: var(--border-faint); + color: var(--caption); + } + } + + &__cta { + border-left: 1px solid var(--docs-card-divider); + display: flex; + flex-direction: column; + gap: 8px; + min-width: 0; + padding: 20px 16px; + + p { + color: var(--body); + font-size: var(--sm); + line-height: var(--leading-body); + margin: 0; + } + } + + &__action-primary { + align-items: center; + background: var(--offering-action-bg); + border: 1px solid var(--offering-action-border); + border-radius: rem(0.6); + box-sizing: border-box; + color: var(--offering-cta-accent, var(--offering-accent)); + display: flex; + font-family: var(--font-body); + font-size: var(--xsm); + font-weight: var(--weight-body); + gap: 6px; + justify-content: space-between; + padding: 7px 10px; + text-decoration: none; + transition: background-color 0.15s ease, border-color 0.15s ease; + white-space: normal; + + svg { + transition: transform 0.15s ease; + } + + &:hover, + &:focus { + background: var(--offering-action-hover); + border-color: var(--offering-cta-accent, var(--offering-accent)); + color: var(--offering-cta-accent, var(--offering-accent)); + text-decoration: none; + + svg { + transform: translateX(2px); + } + } + } + + &__action-secondary { + align-items: center; + border-radius: rem(0.45); + color: var(--body); + display: flex; + font-size: var(--xsm); + font-weight: var(--weight-body); + gap: 5px; + padding: 4px 10px; + text-decoration: none; + transition: color 0.15s ease; + white-space: normal; + + svg { + opacity: 0.75; + } + + &:hover, + &:focus { + color: var(--inline-lifted); + text-decoration: none; + + svg { + opacity: 1; + } + } + } + + &__footer { + align-items: center; + background: color-mix(in srgb, var(--bg) 40%, transparent); + border-top: 1px solid var(--docs-card-divider); + display: flex; + justify-content: space-between; + padding: 14px 24px; + } + + &__footer-links { + align-items: center; + display: flex; + gap: var(--milli); + } + + &__footer-label { + color: var(--caption); + font-family: var(--font-mono); + font-size: var(--xsm); + letter-spacing: var(--tracking-code); + opacity: 0.75; + } + + &__footer-link { + align-items: center; + color: var(--link); + display: inline-flex; + font-size: var(--xsm); + font-weight: var(--weight-body); + gap: 6px; + opacity: 0.92; + text-decoration: none; + transition: color 0.15s ease, opacity 0.15s ease; + + &:hover, + &:focus { + color: var(--link-hover); + opacity: 1; + text-decoration: none; + } + } + + @media (max-width: 860px) { + &__headers { + display: none; + } + + &__row { + grid-template-columns: 1fr; + + &::before { + display: none; + } + } + + &__desc, + &__cta { + border-left: none; + border-top: 1px solid var(--docs-card-divider); + } + + &__identity { + padding-bottom: 20px; + } + } + + @media (max-width: 480px) { + &__footer { + align-items: flex-start; + flex-direction: column; + gap: 8px; + } + } + } + + body.light & { + .whats-new-callout { + --callout-item-surface: var(--white); + --callout-item-border: var(--sg-gray-1); + + &__sparkle { + background: linear-gradient( + 145deg, + color-mix(in srgb, var(--sg-lavender-1) 92%, var(--sg-violet)), + color-mix(in srgb, var(--white) 88%, var(--sg-lavender-1)) + ); + border-color: color-mix(in srgb, var(--sg-lavender-2) 38%, transparent); + box-shadow: 0 2px 10px color-mix(in srgb, var(--sg-violet) 7%, transparent); + color: var(--sg-lavender-4); + } + + &__version { + background: color-mix(in srgb, var(--sg-lavender-1) 72%, var(--white)); + border-color: color-mix(in srgb, var(--sg-lavender-2) 42%, transparent); + color: var(--sg-lavender-4); + } + + &__badge--new { + background: color-mix(in srgb, var(--color-teal-100) 88%, var(--white)); + border-color: color-mix(in srgb, var(--sg-teal-3) 28%, transparent); + color: var(--sg-teal-5); + } + + &__badge--preview { + background: color-mix(in srgb, #FFF4EB 92%, var(--white)); + border-color: color-mix(in srgb, var(--table-orange) 24%, transparent); + color: color-mix(in srgb, var(--table-orange) 82%, var(--sg-midnight)); + } + } + + :not(div.footnotes) > ol.has-p:not(ol.has-p ol.has-p) { + --steps-accent: var(--sg-teal-5); + + > li { + &:before { + background: linear-gradient( + 145deg, + color-mix(in srgb, var(--sg-teal-3) 18%, var(--white)), + color-mix(in srgb, var(--sg-teal-3) 5%, var(--white)) + ); + border-color: color-mix(in srgb, var(--sg-teal-3) 45%, transparent); + box-shadow: 0 0 12px color-mix(in srgb, var(--sg-teal-3) 14%, transparent); + color: var(--sg-teal-5); + } + + &:not(:last-child)::after { + background: linear-gradient( + to bottom, + color-mix(in srgb, var(--sg-teal-3) 45%, transparent), + color-mix(in srgb, var(--sg-teal-3) 8%, transparent) + ); + } + + .highlight { + border-color: color-mix(in srgb, var(--sg-gray-1) 85%, transparent); + } + + pre { + background: color-mix(in srgb, var(--sg-lavender-1) 18%, var(--white)); + border-color: color-mix(in srgb, var(--sg-gray-1) 85%, transparent); + } + + .highlight + pre { + border-top-color: color-mix(in srgb, var(--sg-gray-1) 70%, var(--sg-teal-3)); + } + } + } + + .mz-offerings { + &__headers { + background: linear-gradient( + 180deg, + color-mix(in srgb, var(--sg-lavender-1) 55%, var(--white)) 0%, + color-mix(in srgb, var(--white) 92%, var(--sg-lavender-1)) 100% + ); + } + + &__footer { + background: color-mix(in srgb, var(--sg-lavender-1) 28%, var(--white)); + } + + &__row--cloud { + --offering-action-bg: color-mix(in srgb, var(--color-teal-100) 75%, var(--white)); + --offering-action-border: color-mix(in srgb, var(--table-green) 22%, transparent); + --offering-action-hover: color-mix(in srgb, var(--color-teal-100) 92%, var(--white)); + } + + &__row--emulator { + --offering-action-bg: color-mix(in srgb, #FFF4EB 88%, var(--white)); + --offering-action-border: color-mix(in srgb, var(--table-orange) 24%, transparent); + --offering-action-hover: color-mix(in srgb, #FFE8D6 92%, var(--white)); + } + } + + .linkbox--databases, + .linkbox--brokers, + .linkbox--webhooks { + --linkbox-divider: color-mix(in srgb, var(--sg-gray-1) 80%, transparent); + --linkbox-icon-bg: color-mix(in srgb, var(--linkbox-accent) 14%, var(--white)); + --linkbox-link: var(--sg-violet); + --docs-card-surface: var(--white); + + border-color: color-mix(in srgb, var(--sg-gray-1) 85%, transparent); + + .linkbox__header { + border-bottom-color: var(--linkbox-divider); + } + + a, + a strong { + color: var(--linkbox-link); + + &:hover, + &:focus-visible { + color: var(--sg-midnight); + } + } + } + + .linkbox:not([class*="linkbox--"]) { + --linkbox-link: var(--sg-violet); + --docs-card-surface: var(--white); + + border-color: color-mix(in srgb, var(--sg-gray-1) 85%, transparent); + } + + table.syntax-table { + background: + linear-gradient( + 180deg, + color-mix(in srgb, var(--sg-lavender-2) 18%, transparent) 0%, + color-mix(in srgb, var(--sg-violet) 4%, transparent) 45%, + transparent 100% + ) + 0 0 / 100% rem(1.4) no-repeat, + var(--bg); + border-color: var(--docs-card-border); + + thead th { + background: color-mix(in srgb, var(--bg-sub) 55%, var(--bg)); + } + + tbody tr:hover { + background: color-mix(in srgb, var(--highlight) 6%, var(--bg)); + } + } + + table:not(.mz-offerings__nested-table):not(.syntax-table) { + background: + linear-gradient( + 180deg, + color-mix(in srgb, var(--sg-lavender-2) 18%, transparent) 0%, + color-mix(in srgb, var(--sg-violet) 4%, transparent) 45%, + transparent 100% + ) + 0 0 / 100% rem(1.4) no-repeat, + radial-gradient(130% 90% at 50% -40%, color-mix(in srgb, var(--sg-violet) 5%, transparent), transparent 58%), + var(--bg); + border-color: var(--docs-card-border); + + thead th { + background: color-mix(in srgb, var(--bg-sub) 55%, var(--bg)); + } + + tbody tr:hover { + background: color-mix(in srgb, var(--highlight) 6%, var(--bg)); + } + + td code:not(pre code):not(.highlight code) { + background: color-mix(in srgb, var(--highlight) 7%, var(--bg)); + } + + td pre code, + td .highlight code { + background: none; + } + } + + .callout { + --docs-card-surface: var(--white); + } + + figure { + --docs-card-surface: var(--white); + } + + code { + background: color-mix(in srgb, var(--sg-lavender-1) 45%, var(--white)); + border-color: color-mix(in srgb, var(--sg-gray-1) 80%, transparent); + } + + .linkbox--databases { + --linkbox-label: color-mix(in srgb, var(--sg-teal-5) 55%, var(--sg-gray-3)); + } + + .linkbox--brokers { + --linkbox-label: color-mix(in srgb, var(--sg-violet) 45%, var(--sg-gray-3)); + } + + .linkbox--webhooks { + --linkbox-label: color-mix(in srgb, var(--orchid) 45%, var(--sg-gray-3)); + } + + .linkbox--databases, + .linkbox--brokers, + .linkbox--webhooks { + .linkbox__category-icon::before { + background: var(--linkbox-accent); + } + } + + pre, + .highlight { + background: var(--white); + border-color: color-mix(in srgb, var(--sg-gray-1) 85%, transparent); + box-shadow: var(--docs-card-shadow); + } + + .copy_button { + background: color-mix(in srgb, var(--sg-lavender-1) 55%, transparent); + border-color: color-mix(in srgb, var(--sg-gray-1) 80%, transparent); + color: var(--sg-gray-3); + + &:hover, + &:focus { + background: color-mix(in srgb, var(--sg-teal-3) 10%, var(--white)); + border-color: color-mix(in srgb, var(--sg-teal-3) 30%, transparent); + color: var(--sg-teal-5); + } + + &.success { + background: color-mix(in srgb, var(--color-teal-100) 85%, var(--white)); + border-color: color-mix(in srgb, var(--sg-teal-3) 35%, transparent); + color: var(--sg-teal-5); + } + } + + .code-tabs { + --code-tabs-bar-surface: color-mix(in srgb, var(--sg-lavender-1) 72%, var(--white)); + --code-tabs-border: color-mix(in srgb, var(--sg-gray-1) 85%, transparent); + --code-tabs-surface: var(--white); + box-shadow: var(--docs-card-shadow); + } + } + + pre { + background: var(--table-surface-raised); + border: 1px solid var(--table-border); + border-radius: var(--table-radius); + box-shadow: var(--docs-card-shadow); + color: var(--sub); + font-family: var(--font-mono); + font-size: var(--code-pre-font-size); + font-weight: var(--weight-body); + letter-spacing: var(--tracking-code); + line-height: var(--leading-code); + margin: rem(1.2) 0; + overflow: auto; + padding: var(--code-pre-padding-block) var(--code-pre-padding-inline); + + code { + background: none; + border: none; + color: inherit; + padding: 0; + } + } + + .highlight { + background: var(--table-surface-raised); + border: 1px solid var(--table-border); + border-radius: var(--table-radius); + box-shadow: + var(--docs-card-shadow), + inset 0 1px 0 color-mix(in srgb, var(--code-foreground) 4%, transparent); + margin: rem(1.2) 0; + overflow: hidden; + position: relative; + + pre, + .chroma { + background: transparent !important; + border: none; + border-radius: 0; + box-shadow: none; + font-size: var(--code-highlight-font-size); + margin: 0; + overflow-x: auto; + padding: + var(--code-highlight-padding-top) + var(--code-highlight-padding-inline) + var(--code-highlight-padding-bottom); + } + + .chroma { + background-color: transparent; + } + + .copy_button { + display: inline-flex; + opacity: 0; + pointer-events: none; + visibility: hidden; + } + + &:hover, + &:focus-within { + .copy_button { + opacity: 1; + pointer-events: auto; + visibility: visible; + } + } + + .copy_button.success { + opacity: 1; + pointer-events: auto; + visibility: visible; + } + } + + // Standalone blocks are full-width, so keep the copy control visible. + > .highlight .copy_button { + opacity: 1; + pointer-events: auto; + visibility: visible; + } + + code { + background: color-mix(in srgb, var(--code-simple-bg) 88%, var(--table-surface-raised)); + border: 1px solid color-mix(in srgb, var(--table-border) 75%, transparent); + border-radius: rem(0.35); + box-sizing: border-box; + color: var(--code-simple); + font-family: var(--font-mono); + font-size: rem(1.3); + font-variant-ligatures: none; + font-weight: 500; + letter-spacing: var(--tracking-code); + line-height: var(--leading-code); + padding: rem(0.1) rem(0.35) rem(0); + } + + li, + .callout, + .note, + .warning, + .tip, + .important, + .annotation, + .public-preview, + .code-tabs .tab-pane { + @include docs-nested-code-vars; + } + + li { + .highlight { + margin: rem(0.6) 0; + } + } + + // Merge a highlighted code block followed by a non-highlighted code block, + // since this is a common pattern in our docs to indicate a (highlighted) + // shell or SQL snippet followed by its (unhighlighted) output. + .highlight + pre { + border-top: 1px solid color-mix(in srgb, var(--table-border) 80%, var(--highlight)); + border-top-left-radius: 0; + border-top-right-radius: 0; + margin-top: rem(-1.2); + padding-top: rem(1.2); + } + + ul, + ol { + margin: 0; + + li { + margin-bottom: rem(0.5); + } + } + + li { + h4 { + margin-top: 0; + } + } + + :not(div.footnotes) > ol.has-p:not(ol.has-p ol.has-p) { + --steps-accent: var(--highlight); + --steps-badge-size: #{rem(3)}; + --steps-rail-width: 1px; + + list-style-type: none; + counter-reset: list-counter; + margin: rem(0.8) 0 rem(1.6); + padding: 0; + + >li { + --steps-badge-offset: #{rem(0.1)}; + counter-increment: list-counter; + min-height: rem(5); + padding: rem(0.4) 0 rem(2.6) calc(var(--steps-badge-size) + #{rem(1.6)}); + position: relative; + + &:has(> :is(h2, h3, h4):first-child) { + --steps-badge-offset: #{rem(0.45)}; + } + + &:not(:last-child)::after { + background: linear-gradient( + to bottom, + color-mix(in srgb, var(--steps-accent) 55%, transparent), + color-mix(in srgb, var(--steps-accent) 10%, transparent) + ); + bottom: rem(0.35); + content: ""; + left: calc(var(--steps-badge-size) / 2 - var(--steps-rail-width) / 2); + position: absolute; + top: calc(var(--steps-badge-offset) + var(--steps-badge-size) + #{rem(0.55)}); + width: var(--steps-rail-width); + z-index: 0; + } + + .highlight { + border: 1px solid var(--table-border); + border-radius: rem(0.8); + margin: rem(1.2) 0; + overflow: hidden; + + pre { + border: none; + border-radius: 0; + margin: 0; + } + } + + .highlight:has(+ pre) { + border-bottom: none; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + margin-bottom: 0; + } + + .highlight + pre { + border-top: 1px solid color-mix(in srgb, var(--table-border) 75%, var(--steps-accent)); + border-top-left-radius: 0; + border-top-right-radius: 0; + margin-top: 0; + padding-top: rem(1.2); + } + + .code-tabs { + --code-tabs-accent: var(--steps-accent); + } + + pre { + background: var(--table-surface-raised); + border: 1px solid var(--table-border); + border-radius: rem(0.8); + margin: rem(1.2) 0; + margin-left: 0; + } + + ul, + ol { + padding-left: var(--milli); + } + + ol { + li { + list-style-type: lower-alpha; + } + } + + @media(max-width: 850px) { + padding-left: calc(var(--steps-badge-size) + #{rem(1.2)}); + } + + @media(max-width: 480px) { + --steps-badge-size: #{rem(2.6)}; + padding-bottom: rem(2.2); + } + + &:before { + align-items: center; + background: linear-gradient( + 145deg, + color-mix(in srgb, var(--steps-accent) 26%, var(--card-light)), + color-mix(in srgb, var(--steps-accent) 8%, var(--card-light)) + ); + border: 1px solid color-mix(in srgb, var(--steps-accent) 45%, transparent); + border-radius: 50%; + box-shadow: 0 0 14px color-mix(in srgb, var(--steps-accent) 18%, transparent); + color: color-mix(in srgb, var(--steps-accent) 88%, var(--heading)); + content: counter(list-counter); + display: flex; + font-family: var(--font-mono); + font-size: rem(1.25); + font-weight: 700; + height: var(--steps-badge-size); + justify-content: center; + left: 0; + letter-spacing: -0.02em; + line-height: 1; + position: absolute; + top: var(--steps-badge-offset); + width: var(--steps-badge-size); + z-index: 1; + } + + &:last-child { + padding-bottom: rem(0.6); + } + + > :is(h2, h3, h4):first-child { + color: var(--inline-lifted); + margin-top: 0; + } + + > p:first-child { + color: var(--inline-lifted); + } + + p { + display: block; + } + + > p:first-child, + > :first-child:not(.highlight):not(pre):not(.code-tabs) { + margin-top: 0; + } + } + } + + hr { + border: none; + border-top: 1px solid var(--docs-card-divider); + margin: rem(3.6) auto; + width: 80%; + } + + // NOTE(benesch): warning/private-preview colors stay yellowish/orange. + // Public preview stays blueish (caution, not encouragement). + .note, + .important { + @include docs-admonition-theme("--table-yellow"); + @include docs-admonition-card; + } + + .tip { + @include docs-admonition-theme("--sg-violet"); + @include docs-admonition-card; + } + + .warning, + .private-preview { + @include docs-admonition-theme("--table-orange"); + @include docs-admonition-card; + } + + .public-preview { + @include docs-admonition-theme("--table-blue"); + @include docs-admonition-card; + color: var(--public-preview-text, var(--body)); + } + + .annotation { + @include docs-admonition-theme("--highlight"); + @include docs-admonition-card; + + .annotation-title { + color: var(--admonition-label); + font-family: var(--font-heading); + font-size: var(--xsm); + font-weight: var(--weight-heading); + letter-spacing: var(--tracking-eyebrow); + line-height: 1.3; + margin: 0 0 rem(0.6); + padding-bottom: 0; + text-transform: uppercase; } - } + .warning, .note, .tip, .important, .private-preview, .public-preview { - box-sizing: border-box; - margin: rem(1.6) 0; - padding: rem(1.6) rem(1.6) rem(1.6) rem(10.4); - position: relative; - border-radius: rem(1.2); - - @media(max-width: 510px) { - padding: rem(1) rem(1) rem(1) rem(6); - } - - p:first-of-type { - margin-top: 0; - } - - &::after { - content: ""; - position: absolute; - top: -1px; - right: -1px; - border-width: 0 rem(1.6) rem(1.6) 0; - border-style: solid; - } + font-size: rem(1.5); + line-height: var(--leading-body); .gutter { - position: absolute; - left: rem(1.6); - top: rem(1.8); - line-height: 23px; - font-size: rem(1.2); - font-weight: bold; + color: var(--admonition-label); + display: block; + font-family: var(--font-heading); + font-size: var(--xsm); + font-weight: var(--weight-heading); + letter-spacing: var(--tracking-eyebrow); + line-height: 1.3; + margin: 0 0 rem(0.6); + position: static; text-transform: uppercase; - - @media(max-width: 510px) { - top: rem(1.2); - } } } - .warning { - @media(max-width: 510px) { - padding-left: rem(9); - } + .private-preview-inline { + background: color-mix(in srgb, var(--table-orange) 10%, transparent); + border: 1px solid color-mix(in srgb, var(--table-orange) 28%, transparent); + border-radius: rem(0.45); + color: color-mix(in srgb, var(--table-orange) 88%, var(--heading)); + font-size: var(--xsm); + font-weight: var(--weight-body-emphasis); + padding: rem(0.15) rem(0.45); + white-space: nowrap; } .cta { - background: $purple-gradient-v2; - border-radius: 4px; - color: #fff; + background: linear-gradient(102.5deg, var(--sg-violet) 17.99%, var(--orchid) 59.07%); + border-radius: rem(0.8); + box-shadow: var(--docs-card-shadow); + color: var(--white); display: inline-block; - font-weight: 500; + font-weight: var(--weight-body-emphasis); margin: rem(3.2) 0; padding: rem(2) rem(6.4); - opacity: 1; - transition: opacity 350ms ease; + transition: opacity 0.2s ease, box-shadow 0.2s ease; &.full_width { display: block; - width: 100%; text-align: center; + width: 100%; } &.secondary { - background: $faded-purple-v2; - color: $dark-purple-v2; + background: color-mix(in srgb, var(--sg-lavender-1) 55%, var(--white)); + border: 1px solid color-mix(in srgb, var(--sg-violet) 24%, transparent); + color: var(--sg-lavender-4); &:hover { - color: $dark-purple-v2; + color: var(--sg-lavender-4); } } &:hover { - opacity: 0.9; - color: #fff; border-bottom: none; + color: var(--white); + opacity: 0.92; } } @@ -718,22 +2553,23 @@ p+p { } .symbol { - color: $purple; + color: var(--sg-violet); } .breadcrumb { + color: var(--caption); font-size: rem(1.4); letter-spacing: 0.03em; - text-transform: uppercase; - color: var(--sub); margin-bottom: var(--nano); + text-transform: uppercase; a { color: var(--sub) !important; margin: 0 rem(0.8); - &:hover { - color: $black-v2; + &:hover, + &:focus { + color: var(--heading) !important; opacity: 1; } @@ -760,13 +2596,16 @@ p+p { } #helpful { - border-top: 1px solid $grey; - margin-top: rem(4.8); - max-width: 40%; - padding-top: rem(0.8); + @include docs-feature-card; + + margin: rem(4.8) auto 0; + max-width: 22rem; + padding: rem(1.2) rem(1.4); text-align: center; table { + border: none; + box-shadow: none; table-layout: fixed; width: 100%; } @@ -776,12 +2615,19 @@ p+p { } .helpful-vote { - border: 3px solid $purple; - color: $purple; + border: 2px solid color-mix(in srgb, var(--sg-violet) 45%, transparent); + border-radius: rem(0.6); + color: var(--sg-lavender-2); display: inline-block; - font-weight: bold; + font-weight: var(--weight-body-emphasis); padding: rem(1.1) 0; + transition: background-color 0.15s ease, border-color 0.15s ease; width: 100%; + + &:hover { + background: color-mix(in srgb, var(--sg-violet) 10%, transparent); + border-color: var(--sg-violet); + } } #got-feedback { @@ -791,92 +2637,160 @@ p+p { // Navigation tabs (tab+tabs.html) .code-tabs { + --code-tabs-accent: var(--highlight); + --code-tabs-border: var(--table-border); + --code-tabs-bar-surface: var(--table-surface-header); + --code-tabs-surface: var(--table-surface); + + background: var(--code-tabs-surface); + border: 1px solid var(--code-tabs-border); + border-radius: var(--table-radius); + box-shadow: var(--table-shadow); + margin: rem(1.2) 0; + overflow: hidden; position: relative; + .nav-tabs-bar { + background: var(--code-tabs-bar-surface); + border-bottom: 1px solid var(--code-tabs-border); + padding: rem(0.6) rem(0.6) 0; + position: relative; + z-index: 2; + + &::before, + &::after { + bottom: 0; + content: ""; + opacity: 0; + pointer-events: none; + position: absolute; + top: 0; + transition: opacity 0.15s ease; + width: rem(2.4); + z-index: 4; + } + + &::before { + background: linear-gradient(to right, var(--code-tabs-bar-surface), transparent); + left: 0; + } + + &::after { + background: linear-gradient(to left, var(--code-tabs-bar-surface), transparent); + right: 0; + } + } + + .nav-tabs-scroll { + overflow: visible; + scrollbar-width: none; + + &::-webkit-scrollbar { + display: none; + } + } + .nav-tabs { + display: flex; + flex-wrap: wrap; + gap: rem(0.2); list-style: none; + margin: 0; + overflow: visible; padding: 0; + position: relative; + } - display: flex; - overflow-x: auto; - overflow-y: hidden; - // white-space: nowrap; + .tab-content { + background: var(--code-tabs-surface); + position: relative; + z-index: 1; + } - li { - display: inline-block; - margin: 0 rem(0.1); - padding: 0; - position: relative; - bottom: -1px; - background: var(--bg); - border-top: 1px solid var(--highlight); - border-left: 1px solid var(--highlight); - border-right: 1px solid var(--highlight); - border-radius: 2px 2px 2px 2px; - background: var(--tab-bg); + .tab-pane { + display: none; + padding: rem(1.2); - a { - color: var(--body); - display: block; - padding: rem(0.8) rem(1.6); - font-size: rem(1.4); - text-decoration: none; - font-weight: 500; + &.active { + display: block; + } + } - @media(max-width: 850px) { - padding: rem(0.8) rem(1.6); - } + .nav-tabs li { + background: transparent; + border: 1px solid transparent; + flex-shrink: 0; + margin: 0; + padding: 0; - @media(max-width: 380px) { - padding: rem(0.8) rem(0.8); - } + a { + color: var(--sub); + display: block; + font-size: rem(1.35); + font-weight: 500; + padding: rem(0.55) rem(1.2); + text-decoration: none; + transition: color 0.15s ease; - &:hover { - color: $purple; - border-bottom: none; - } + @media(max-width: 380px) { + padding: rem(0.55) rem(0.8); } - &.active { - - border-radius: 2px 2px 0 0; - border: 1px solid #9c86e0; - border-bottom-color: var(--bg); - - a { - color: var(--highlight); - background: var(--tab-selected-bg); - } + &:hover, + &:focus { + color: var(--inline-lifted); + text-decoration: none; } } - } - - .tab-pane { - display: none; - padding: rem(1.6) 0; - &.active { - display: block; - border-radius: 0 0 rem(1) rem(1); - border: 1px solid #9c86e0; - padding: rem(0.8) rem(0.5) rem(0.6) rem(0.6); + background: var(--code-tabs-surface); + border-color: var(--code-tabs-border); + border-bottom: none; + border-radius: rem(0.5) rem(0.5) 0 0; + position: relative; + z-index: 2; + + // Bridges the tab bar divider so the active tab reads as connected to the content. + &::after { + background: var(--code-tabs-surface); + content: ""; + height: var(--tab-join-overlap, 2px); + left: 0; + position: absolute; + right: 0; + top: 100%; + z-index: 3; + } + + a { + color: color-mix(in srgb, var(--code-tabs-accent) 88%, var(--heading)); + } } } - &.has-left-overflow .nav-tabs::before { + &.has-left-overflow .nav-tabs-bar::before { opacity: 1; } - &.has-right-overflow .nav-tabs::after { + &.has-right-overflow .nav-tabs-bar::after { opacity: 1; } - - } .table-scrollable { - box-shadow: inset 0 -4px 3px -3px $medium-grey-v2; + background: + linear-gradient( + 180deg, + color-mix(in srgb, var(--sg-lavender-3) 14%, transparent) 0%, + color-mix(in srgb, var(--sg-violet) 5%, transparent) 42%, + transparent 100% + ) + 0 0 / 100% rem(1.4) no-repeat, + var(--bg); + border: 1px solid var(--docs-card-border); + border-radius: var(--table-radius); + box-shadow: var(--docs-card-shadow); margin: rem(1) 0 rem(3); overflow: auto; @@ -884,22 +2798,27 @@ p+p { overflow: visible; } - table { + table:not(.syntax-table) { + background: transparent; + border: none; + box-shadow: none; width: 100%; } thead th { - background: var(--bg); + backdrop-filter: blur(8px); + background: color-mix(in srgb, var(--bg-sub) 42%, var(--bg)); position: sticky; top: 0; + z-index: 1; &:after { - border-bottom: 1px var(--highlight) solid; - content: ""; + border-bottom: 1px solid var(--docs-card-divider); bottom: -1px; + content: ""; left: 0; - right: 0; position: absolute; + right: 0; } } @@ -908,84 +2827,144 @@ p+p { } } +body.light .table-scrollable { + background: + linear-gradient( + 180deg, + color-mix(in srgb, var(--sg-lavender-2) 18%, transparent) 0%, + color-mix(in srgb, var(--sg-violet) 4%, transparent) 45%, + transparent 100% + ) + 0 0 / 100% rem(1.4) no-repeat, + var(--bg); + border-color: var(--docs-card-border); + + thead th { + background: color-mix(in srgb, var(--bg-sub) 55%, var(--bg)); + } +} + .level-of-support { + color: var(--caption); display: inline-block; - width: 17px; + filter: drop-shadow(0 0 rem(0.35) color-mix(in srgb, currentColor 25%, transparent)); height: 17px; position: relative; top: 5px; + width: 17px; &.level-production { - color: $success; + color: var(--table-green); } &.level-alpha, &.level-beta { - color: $progress; + color: var(--table-yellow); } &.level-in-progress { - color: $warning; + color: var(--table-orange); } &.level-researching, &.level-not-supported { - color: $danger; + color: color-mix(in srgb, var(--table-orange) 55%, var(--color-error-500)); } } .highlight { position: relative; - } .copy_button { - display: none; - position: absolute; - right: 10px; - top: 10px; - - font-size: rem(1.2); - font-weight: 300; - border: none; - background-color: $grey-light; - color: var(--black); - height: 26px; - padding: 0 12px; + align-items: center; + backdrop-filter: blur(8px); + background: color-mix(in srgb, var(--table-surface-header) 72%, transparent); + border: 1px solid var(--table-border); + border-radius: rem(0.45); + color: var(--sub); cursor: pointer; - border-radius: $border-radius; + display: inline-flex; + font-family: var(--font-mono); + font-size: rem(1.1); + font-weight: var(--weight-body-emphasis); + gap: rem(0.5); + height: rem(2.4); + justify-content: center; + letter-spacing: var(--tracking-code); + line-height: 1; + opacity: 0; + padding: 0 rem(0.9); + pointer-events: none; + position: absolute; + right: rem(0.8); + top: rem(0.8); + transition: + background-color 0.15s ease, + border-color 0.15s ease, + color 0.15s ease, + opacity 0.15s ease, + visibility 0.15s ease; + visibility: hidden; white-space: nowrap; - line-height: 2; - font-family: 'Inter', sans-serif; + z-index: 2; + + svg { + display: block; + flex-shrink: 0; + } + + .copy_button__icon--check { + display: none; + } + + &:hover, + &:focus { + background: color-mix(in srgb, var(--highlight) 14%, var(--table-surface-header)); + border-color: color-mix(in srgb, var(--highlight) 35%, var(--table-border)); + color: var(--inline-lifted); + } &.success { - opacity: 0.8; - background: #70f2a3; + background: color-mix(in srgb, var(--table-green) 18%, var(--table-surface-header)); + border-color: color-mix(in srgb, var(--table-green) 35%, var(--table-border)); + color: color-mix(in srgb, var(--table-green) 88%, var(--heading)); + opacity: 1; + pointer-events: auto; + visibility: visible; + + .copy_button__icon--copy { + display: none; + } + + .copy_button__icon--check { + display: block; + } } } #subscribe_dialog { + @include docs-feature-card; + display: none; - z-index: 10; + padding: rem(1); position: absolute; - top: 4px; - right: 4px; - padding: 6px; - @include card; + right: rem(0.4); + top: rem(0.4); + z-index: 10; form { display: flex; input[type="email"] { - font-size: rem(1.4); - padding: rem(.5); - border-radius: $border-radius; - border: none; - margin-right: rem(.8); - background: var(--bg); + background: var(--docs-card-inset); + border: 1px solid var(--docs-card-divider); + border-radius: rem(0.6); + box-shadow: none; color: var(--important); - border: 1px solid var(--divider-light); - box-shadow: var(--shadow-default); + font-size: rem(1.4); + margin-right: rem(0.8); + padding: rem(0.5); } input[type="submit"] { @@ -994,13 +2973,13 @@ p+p { } .disclaimer { - width: 100%; - color: var(--important); - margin-top: var(--nano); - padding: rem(.4) rem(.8); + border-bottom-left-radius: rem(0.6); + border-bottom-right-radius: rem(0.6); + color: var(--caption); font-size: var(--xsm); - border-bottom-left-radius: $border-radius; - border-bottom-right-radius: $border-radius; + margin-top: var(--nano); + padding: rem(0.4) rem(0.8); + width: 100%; } } @@ -1013,108 +2992,95 @@ p+p { } div.json_widget { + @include docs-feature-card; + display: flex; flex-direction: column; justify-content: center; - + margin: rem(1.2) 0; + padding: rem(1.2); position: relative; .input_container { display: inline-flex; flex-direction: row; - - margin: 16px; + gap: rem(1.2); + margin: 0 0 rem(1.2); .input_container-text { display: inline-flex; flex-direction: column; flex-grow: 3; - input { - width: 100%; - - border: 1px solid #E0DEE3; - border-radius: 8px; - margin: 8px 0; - padding: 8px; - - background-color: #F7F7F8; + input, + select.text-input { + background: var(--docs-card-inset); + border: 1px solid var(--table-border); + border-radius: rem(0.8); box-shadow: none; - font-size: 16px; - } - - .light & input { - background-color: #F7F7F8; - } - .dark & input { - background-color: #000000; + color: var(--body); + font-size: rem(1.5); + margin: rem(0.6) 0; + padding: rem(0.8); + width: 100%; } - input::placeholder { - color: #BCB9C0; + input::placeholder, + select.text-input { + color: var(--caption); } } .input_container-radio { + background: var(--docs-card-inset); + border: 1px solid var(--table-border); + border-radius: rem(0.8); display: inline-flex; flex-direction: column; flex-grow: 1; justify-content: center; - - margin: 0 16px 12px; - padding: 16px; - - border: 1px solid #E0DEE3; - border-radius: 8px; + margin: 0; + padding: rem(1.2); legend { - padding: 0 4px; + color: var(--caption); + padding: 0 rem(0.4); } } } .json { + margin-top: rem(1.2); width: 100%; - margin-top: 16px; - textarea { + background: var(--docs-card-inset); + border: 1px solid var(--table-border); + border-radius: rem(0.8); height: 400px; - width: 100%; + padding: rem(0.8); resize: none; - - border: 1px solid #E0DEE3; - border-radius: 8px; - // margin: 16px; - padding: 8px; + width: 100%; } textarea::placeholder { - opacity: 0.1; + color: var(--caption); font-size: 4vw; - text-align: center; line-height: 350px; + opacity: 0.25; + text-align: center; } .error { + border: 1px solid color-mix(in srgb, var(--table-orange) 45%, transparent); + border-radius: rem(0.8); opacity: 1; - border-color: #d33902; - border-style: solid; - border-width: thin; - border-radius: 8px; p { - background-color: rgba(229, 6, 68, 0.1); - font-weight: 500; - padding: 8px; - } - - .light & p { - color: #803737; - } - - .dark & p { - color: #fe1d5e; + background: color-mix(in srgb, var(--table-orange) 10%, transparent); + color: color-mix(in srgb, var(--table-orange) 88%, var(--heading)); + font-weight: var(--weight-body-emphasis); + padding: rem(0.8); } } @@ -1124,39 +3090,27 @@ div.json_widget { } .sql_output { - margin: 16px; + margin: rem(1.2) 0; } .log_output { - border: 1px solid #ccc; - border-radius: 4px; - padding: 10px; + background: var(--docs-card-inset); + border: 1px solid var(--table-border); + border-radius: rem(0.6); + margin-top: rem(1); max-height: 150px; overflow-y: auto; - margin-top: 10px; + padding: rem(1); } .input_container-text select.text-input { appearance: none; - background-color: #F7F7F8; - border: 1px solid #E0DEE3; - border-radius: 8px; - padding: 8px; - font-size: 16px; - color: #BCB9C0; cursor: pointer; } .input_container-text select.text-input:focus { + border-color: color-mix(in srgb, var(--highlight) 45%, var(--table-border)); outline: none; - border-color: #aca9b8; - } - - .light & select.text-input { - background-color: #F7F7F8; - } - .dark & select.text-input { - background-color: #000000; } } @@ -1169,67 +3123,7 @@ div.json_widget { } } -/* Unclear why we are suppressing the copy button in tables - but ... at least, allow for cases where we want to enable copy button in tables. -*/ - -td:not(.copyableCode) .copy_button { - display: none !important; -} - -td span.copyableCode pre:hover .copy_button { - display: inline-block !important; -} - -.highlight { - position: relative; - - &:hover { - .copy_button { - display: inline-block; - } - } -} - body.dark .content { - - .note, - .important { - a { - color: var(--link); - } - - &::after { - border-color: --var(--note-border); - background: var(--note); - } - } - - .tip { - a { - color: var(--link); - } - - &::after { - border-color: --var(--tip-border); - background: var(--tip); - } - } - - .annotation { - a { - color: var(--link); - } - - } - - .warning, - .private-preview { - .gutter { - color: #ff8504; - } - } - pre code { color: var(--sub); } @@ -1241,51 +3135,50 @@ body.dark .content { } } -body.dark { - .code-tabs .nav-tabs { - li { - background: var(--bg-sub); - - &.active { - background: var(--bg); - } - } - } -} .caption { font-size: rem(1.2); - font-weight: 300; + font-weight: var(--weight-body); + line-height: var(--leading-body); padding: var(--nano); font-style: italic; + color: var(--caption); } -td.copyableCode{ - .chroma { - background-color: var(--code-block); - } - -} -span.copyableCode{ +td.copyableCode, +span.copyableCode { .chroma { - background-color: var(--code-block); + background-color: transparent; } - } -div.footnotes { +div.footnotes { + @include docs-feature-card; font-size: var(--sm); + margin-top: rem(3); + padding: rem(1.2) rem(1.4); hr { + border-top-color: var(--docs-card-divider); + margin: rem(1.2) 0; width: 100%; } + ol { + margin: 0; + padding-left: rem(2); + } + li::marker { - font-variant-numeric: normal; + color: var(--caption); content: "[" counter(list-item) "] "; + font-variant-numeric: normal; } + a { + word-break: break-word; + } } sup { diff --git a/doc/user/assets/sass/_highlight.scss b/doc/user/assets/sass/_highlight.scss index 552cb0217ba38..f458c82c37bd6 100644 --- a/doc/user/assets/sass/_highlight.scss +++ b/doc/user/assets/sass/_highlight.scss @@ -1,13 +1,19 @@ -// Generated with `hugo gen chromastyles --style=xcode`. +// Chroma token colors mapped to semantic code palette tokens in _base.scss. /* Background */ .chroma { - background-color: #ffffff; + background-color: transparent; + color: var(--code-foreground); + font-family: var(--font-mono); + font-size: var(--code-highlight-font-size, rem(1.5)); + font-weight: 400; + letter-spacing: var(--tracking-code); + line-height: var(--leading-code); } /* Error */ .chroma .err { - color: var(--important); + color: var(--code-red); } /* LineTableTD */ @@ -31,327 +37,198 @@ /* LineHighlight */ .chroma .hl { + background-color: transparent; display: block; width: 100%; - background-color: #ffffcc; +} + +.chroma .line, +.chroma .cl { + background: transparent; } /* LineNumbersTable */ .chroma .lnt { + color: var(--code-lineno); margin-right: 0.4em; - padding: 0 0.4em 0 0.4em; - color: #7f7f7f; + padding: 0 0.4em; } /* LineNumbers */ .chroma .ln { + color: var(--code-lineno); margin-right: 0.4em; - padding: 0 0.4em 0 0.4em; - color: #7f7f7f; + padding: 0 0.4em; } /* Keyword */ -.chroma .k { - color: var(--code-pink); -} - -/* KeywordConstant */ -.chroma .kc { - color: var(--code-pink); -} - -/* KeywordDeclaration */ -.chroma .kd { - color: var(--code-pink); -} - -/* KeywordNamespace */ -.chroma .kn { - color: var(--code-pink); -} - -/* KeywordPseudo */ -.chroma .kp { - color: var(--code-pink); -} - -/* KeywordReserved */ -.chroma .kr { - color: var(--code-pink); -} - -/* KeywordType */ +.chroma .k, +.chroma .kc, +.chroma .kd, +.chroma .kn, +.chroma .kp, +.chroma .kr, .chroma .kt { - color: var(--code-pink); + color: var(--code-keyword); } /* Name */ .chroma .n { - color: var(--important); + color: var(--code-variable); } /* NameAttribute */ .chroma .na { - color: #836c28; + color: var(--code-attribute); } /* NameBuiltin */ -.chroma .nb { - color: var(--code-pink); -} - -/* NameBuiltinPseudo */ +.chroma .nb, .chroma .bp { - color: #5b269a; + color: var(--code-builtin); } /* NameClass */ .chroma .nc { - color: #3f6e75; + color: var(--code-type); } /* NameConstant */ .chroma .no { - color: var(--important); + color: var(--code-number); } /* NameDecorator */ .chroma .nd { - color: var(--important); + color: var(--code-function); } /* NameEntity */ .chroma .ni { - color: var(--important); + color: var(--code-variable); } /* NameException */ .chroma .ne { - color: var(--important); + color: var(--code-type); } /* NameFunction */ -.chroma .nf { - color: var(--important); -} - -/* NameFunctionMagic */ +.chroma .nf, .chroma .fm { - color: var(--important); + color: var(--code-function); } /* NameLabel */ .chroma .nl { - color: var(--important); + color: var(--code-variable); } /* highlighted code line */ - .hl .cl * { color: var(--code-highlight); } /* NameNamespace */ .chroma .nn { - color: var(--important); + color: var(--code-type); } /* NameOther */ .chroma .nx { - color: var(--important); + color: var(--code-variable); } /* NameProperty */ .chroma .py { - color: var(--important); + color: var(--code-variable); } /* NameTag */ .chroma .nt { - color: var(--important); + color: var(--code-keyword); } /* NameVariable */ -.chroma .nv { - color: var(--important); -} - -/* NameVariableClass */ -.chroma .vc { - color: var(--important); -} - -/* NameVariableGlobal */ -.chroma .vg { - color: var(--important); -} - -/* NameVariableInstance */ -.chroma .vi { - color: var(--important); -} - -/* NameVariableMagic */ +.chroma .nv, +.chroma .vc, +.chroma .vg, +.chroma .vi, .chroma .vm { - color: var(--important); + color: var(--code-variable); } /* Literal */ -.chroma .l { - color: var(--code-blue); -} - -/* LiteralDate */ +.chroma .l, .chroma .ld { - color: var(--code-blue); + color: var(--code-number); } /* LiteralString */ -.chroma .s { - color: var(--code-red); -} - -/* LiteralStringAffix */ -.chroma .sa { - color: var(--code-red); -} - -/* LiteralStringBacktick */ -.chroma .sb { - color: var(--code-red); +.chroma .s, +.chroma .sa, +.chroma .sb, +.chroma .sd, +.chroma .sh, +.chroma .si, +.chroma .sx, +.chroma .sr, +.chroma .s1, +.chroma .s2, +.chroma .ss { + color: var(--code-string); } /* LiteralStringChar */ .chroma .sc { - color: #2300ce; + color: var(--code-function); } /* LiteralStringDelimiter */ .chroma .dl { - color: var(--code-red); -} - -/* LiteralStringDoc */ -.chroma .sd { - color: var(--code-red); -} - -/* LiteralStringDouble */ -.chroma .s2 { - color: var(--code-red); + color: var(--code-string); } /* LiteralStringEscape */ .chroma .se { - color: var(--code-red); -} - -/* LiteralStringHeredoc */ -.chroma .sh { - color: var(--code-red); -} - -/* LiteralStringInterpol */ -.chroma .si { - color: var(--code-red); -} - -/* LiteralStringOther */ -.chroma .sx { - color: var(--code-red); -} - -/* LiteralStringRegex */ -.chroma .sr { - color: var(--code-red); -} - -/* LiteralStringSingle */ -.chroma .s1 { - color: var(--code-red); -} - -/* LiteralStringSymbol */ -.chroma .ss { - color: var(--code-red); + color: var(--code-function); } /* LiteralNumber */ -.chroma .m { - color: var(--code-blue); -} - -/* LiteralNumberBin */ -.chroma .mb { - color: var(--code-blue); -} - -/* LiteralNumberFloat */ -.chroma .mf { - color: var(--code-blue); -} - -/* LiteralNumberHex */ -.chroma .mh { - color: var(--code-blue); -} - -/* LiteralNumberInteger */ -.chroma .mi { - color: var(--code-blue); -} - -/* LiteralNumberIntegerLong */ -.chroma .il { - color: var(--code-blue); -} - -/* LiteralNumberOct */ +.chroma .m, +.chroma .mb, +.chroma .mf, +.chroma .mh, +.chroma .mi, +.chroma .il, .chroma .mo { - color: var(--code-blue); + color: var(--code-number); } /* Operator */ -.chroma .o { - color: var(--important); -} - -/* OperatorWord */ +.chroma .o, .chroma .ow { - color: var(--important); -} - -/* Comment */ -.chroma .c { - color: var(--code-green); -} - -/* CommentHashbang */ -.chroma .ch { - color: var(--code-green); + color: var(--code-operator); } -/* CommentMultiline */ -.chroma .cm { - color: var(--code-green); +/* Punctuation: muted so brackets, commas, and semicolons recede behind + the tokens that carry meaning. */ +.chroma .p { + color: var(--code-punctuation, var(--code-operator)); } -/* CommentSingle */ -.chroma .c1 { - color: var(--code-green); -} - -/* CommentSpecial */ +/* Comment */ +.chroma .c, +.chroma .ch, +.chroma .cm, +.chroma .c1, .chroma .cs { - color: var(--code-green); + color: var(--code-comment); + font-style: italic; } /* CommentPreproc */ -.chroma .cp { - color: #633820; -} - -/* CommentPreprocFile */ +.chroma .cp, .chroma .cpf { - color: #633820; + color: var(--code-preproc); } diff --git a/doc/user/assets/sass/_layout.scss b/doc/user/assets/sass/_layout.scss index 7c3499d53e315..e1c7d3461d9ae 100644 --- a/doc/user/assets/sass/_layout.scss +++ b/doc/user/assets/sass/_layout.scss @@ -10,6 +10,8 @@ .content-wrapper { display: flex; justify-content: center; + width: 100%; + box-sizing: border-box; padding-top: var(--nav-height); @media(max-width: 800px) { @@ -30,7 +32,7 @@ min-height: calc(100vh - 178px); // https://weblog.west-wind.com/posts/2016/Feb/15/Flexbox-Containers-PRE-tags-and-managing-Overflow min-width: 0; - max-width: 840px; + max-width: 900px; padding: var(--xx-small) var(--small); @media (max-width: 1260px) { @@ -55,19 +57,592 @@ overflow-x: auto; } -table.inline-headings { - th, td { +.content .fn-list { + --fn-list-cols: minmax(14rem, 44%) 1fr; + + background: + linear-gradient( + 180deg, + color-mix(in srgb, var(--sg-lavender-3) 14%, transparent) 0%, + color-mix(in srgb, var(--sg-violet) 5%, transparent) 42%, + transparent 100% + ) + 0 0 / 100% rem(1.4) no-repeat, + radial-gradient(130% 90% at 50% -40%, color-mix(in srgb, var(--sg-violet) 7%, transparent), transparent 58%), + var(--bg); + border: 1px solid var(--docs-card-border); + border-radius: var(--table-radius); + box-shadow: var(--docs-card-shadow); + font-size: var(--sm); + line-height: var(--leading-body); + margin: rem(1) 0; + overflow: hidden; + + &__header { + backdrop-filter: blur(8px); + background: color-mix(in srgb, var(--bg-sub) 42%, var(--bg)); + border-bottom: 1px solid var(--docs-card-divider); + display: grid; + gap: rem(1.75); + grid-template-columns: var(--fn-list-cols); + padding: rem(0.85) rem(1.4); + } + + &__label { + color: var(--table-text); + font-family: var(--font-heading); + font-size: var(--xsm); + font-weight: 600; + letter-spacing: 0.08em; + text-transform: uppercase; + } +} + +body.light .content .fn-list { + background: + linear-gradient( + 180deg, + color-mix(in srgb, var(--sg-lavender-2) 18%, transparent) 0%, + color-mix(in srgb, var(--sg-violet) 4%, transparent) 45%, + transparent 100% + ) + 0 0 / 100% rem(1.4) no-repeat, + radial-gradient(130% 90% at 50% -40%, color-mix(in srgb, var(--sg-violet) 5%, transparent), transparent 58%), + var(--bg); + border-color: var(--docs-card-border); + box-shadow: var(--docs-card-shadow); + + &__header { + background: color-mix(in srgb, var(--bg-sub) 55%, var(--bg)); + } + + &__label { + color: var(--caption); + } +} + +.content .fn-entry { + --fn-accent: var(--sg-violet); + --fn-accent-name: color-mix(in srgb, var(--fn-accent) 72%, var(--heading)); + --fn-accent-soft: color-mix(in srgb, var(--fn-accent) 10%, var(--bg)); + --fn-accent-border: color-mix(in srgb, var(--fn-accent) 20%, var(--divider-light)); + --fn-accent-text: color-mix(in srgb, var(--fn-accent) 65%, var(--heading)); + --fn-accent-highlight: color-mix(in srgb, var(--fn-accent) 54%, var(--sub)); + + border-bottom: 1px solid var(--docs-card-divider); + display: grid; + gap: rem(0.45) rem(1.75); + grid-template-columns: var(--fn-list-cols); + margin: 0; + padding: rem(0.85) rem(1.4); + position: relative; + transition: + background-color 0.2s ease, + box-shadow 0.2s ease; + + &:last-child { + border-bottom: none; + } + + &::before { + background: color-mix(in srgb, var(--fn-accent) 26%, var(--divider-light)); + border-radius: 0 rem(0.15) rem(0.15) 0; + bottom: 0; + content: ""; + left: 0; + position: absolute; + top: 0; + transition: background-color 0.2s ease; + width: 1px; + } + + &:hover { + background: color-mix(in srgb, var(--fn-accent) 4%, var(--bg)); + + &::before { + background: color-mix(in srgb, var(--fn-accent) 45%, var(--divider-light)); + } + + .fn-sig-pill { + border-color: color-mix(in srgb, var(--fn-accent) 28%, var(--divider-light)); + box-shadow: 0 2px 8px color-mix(in srgb, var(--fn-accent) 10%, transparent); + } + } + + &--violet { + --fn-accent: var(--sg-violet); + } + + &--blue { + --fn-accent: var(--table-blue); + } + + &--green { + --fn-accent: var(--table-green); + } + + &--orange { + --fn-accent: var(--table-orange); + } + + &--pink { + --fn-accent: var(--orchid); + } + + > dt, + > dd { + margin: 0; + } + + > dt { + align-self: center; + display: flex; + flex-wrap: wrap; + align-items: center; + gap: rem(0.6) rem(0.75); + grid-column: 1; + grid-row: 1; + min-width: 0; + } + + > dd { + align-self: center; + color: var(--table-body); + grid-column: 2; + line-height: 1.55; + min-width: 0; + + &:nth-of-type(1) { + grid-row: 1; + } + + &:nth-of-type(2) { + grid-row: 2; + } + + &:nth-of-type(3) { + grid-row: 3; + } + + &:nth-of-type(4) { + grid-row: 4; + } + p { - margin-top: 0.3em; - margin-bottom: 0.3em; - padding-left: 2em; + margin: 0; + + &:not(:last-child) { + margin-bottom: rem(0.45); + } + } + } + + @media (max-width: 640px) { + gap: rem(0.35) 0; + grid-template-columns: 1fr; + + > dt, + > dd { + grid-column: 1; + } + } +} + +.content .fn-name { + color: var(--fn-accent-name); + flex: 0 0 auto; + font-family: var(--font-heading); + font-size: rem(1.35); + font-weight: 600; + letter-spacing: 0.015em; + line-height: var(--leading-code); +} + +.content .fn-sig-pill { + align-self: center; + background: linear-gradient( + 180deg, + color-mix(in srgb, var(--fn-accent) 9%, var(--bg-sub)), + var(--fn-accent-soft) 58%, + color-mix(in srgb, var(--fn-accent) 7%, var(--bg)) + ); + border: 1px solid var(--fn-accent-border); + border-radius: rem(99); + box-shadow: none; + display: inline-flex; + flex: 0 1 auto; + max-width: 100%; + min-width: 0; + padding: rem(0.22) rem(0.7); + transition: + border-color 0.2s ease, + box-shadow 0.2s ease; + + .code-inline, + .highlight { + background: transparent; + border: none; + border-radius: 0; + box-shadow: none; + font-family: var(--font-mono); + font-size: rem(1.25); + letter-spacing: var(--tracking-code); + line-height: var(--leading-code); + margin: 0; + max-width: 100%; + overflow: hidden; + padding: 0; + text-overflow: ellipsis; + white-space: nowrap; + + pre, + .chroma { + background: transparent !important; + border: none; + box-shadow: none; + display: inline; + font-family: inherit; + font-size: inherit; + letter-spacing: inherit; + line-height: inherit; + margin: 0; + padding: 0; + white-space: inherit; + } + } + + .code-inline .cl, + .code-inline .err, + .code-inline .nb, + .code-inline .nf, + .code-inline .nv, + .code-inline .p, + .chroma .cl, + .chroma .err, + .chroma .nb, + .chroma .nf, + .chroma .nv, + .chroma .p { + color: var(--fn-accent-text); + } +} + +body.light .content .fn-sig-pill { + background: linear-gradient( + 180deg, + color-mix(in srgb, var(--fn-accent) 7%, var(--bg)), + color-mix(in srgb, var(--fn-accent) 5%, var(--bg-sub)) 58%, + color-mix(in srgb, var(--fn-accent) 4%, var(--bg)) + ); +} + +.content .fn-desc { + code, + em { + color: var(--fn-accent-highlight); + font-style: normal; + font-weight: 500; + } + + code { + background: color-mix(in srgb, var(--fn-accent) 9%, var(--bg)); + border: 1px solid color-mix(in srgb, var(--fn-accent) 12%, transparent); + border-radius: rem(0.35); + font-size: rem(1.2); + padding: rem(0.08) rem(0.32); + } + + &__link { + border-bottom: 1px solid color-mix(in srgb, var(--fn-accent-name) 35%, transparent); + color: var(--fn-accent-name); + font-weight: var(--weight-body-strong); + text-decoration: none; + transition: border-color 0.15s ease, color 0.15s ease; + + &:hover, + &:focus { + border-bottom-color: var(--fn-accent-name); + text-decoration: none; + } + } +} + +body.light .content .fn-desc code { + background: color-mix(in srgb, var(--fn-accent) 7%, var(--bg)); +} + +.content .fn-note { + color: var(--caption); + font-size: var(--xsm); + grid-column: 2; + line-height: var(--leading-body); + padding-left: rem(0.75); + position: relative; + + &::before { + background: color-mix(in srgb, var(--fn-accent) 35%, var(--table-grid)); + border-radius: rem(0.15); + bottom: rem(0.15); + content: ""; + left: 0; + position: absolute; + top: rem(0.15); + width: 2px; + } +} + +.content .metrics-list { + --metrics-list-cols: minmax(13rem, 30%) 1fr minmax(9rem, 22%); + + background: + linear-gradient( + 180deg, + color-mix(in srgb, var(--sg-lavender-3) 14%, transparent) 0%, + color-mix(in srgb, var(--sg-violet) 5%, transparent) 42%, + transparent 100% + ) + 0 0 / 100% rem(1.4) no-repeat, + radial-gradient(130% 90% at 50% -40%, color-mix(in srgb, var(--sg-violet) 7%, transparent), transparent 58%), + var(--bg); + border: 1px solid var(--docs-card-border); + border-radius: var(--table-radius); + box-shadow: var(--docs-card-shadow); + font-size: var(--sm); + line-height: var(--leading-body); + margin: rem(1) 0; + overflow: hidden; + + &__header { + backdrop-filter: blur(8px); + background: color-mix(in srgb, var(--bg-sub) 42%, var(--bg)); + border-bottom: 1px solid var(--docs-card-divider); + display: grid; + gap: rem(1.75); + grid-template-columns: var(--metrics-list-cols); + padding: rem(0.85) rem(1.4); + } + + &__label { + color: var(--table-text); + font-family: var(--font-heading); + font-size: var(--xsm); + font-weight: 600; + letter-spacing: 0.08em; + text-transform: uppercase; + } +} + +body.light .content .metrics-list { + background: + linear-gradient( + 180deg, + color-mix(in srgb, var(--sg-lavender-2) 18%, transparent) 0%, + color-mix(in srgb, var(--sg-violet) 4%, transparent) 45%, + transparent 100% + ) + 0 0 / 100% rem(1.4) no-repeat, + radial-gradient(130% 90% at 50% -40%, color-mix(in srgb, var(--sg-violet) 5%, transparent), transparent 58%), + var(--bg); + border-color: var(--docs-card-border); + + &__header { + background: color-mix(in srgb, var(--bg-sub) 55%, var(--bg)); + } + + &__label { + color: var(--caption); + } +} + +.content .metrics-entry { + --metrics-accent: var(--sg-violet); + --metrics-accent-soft: color-mix(in srgb, var(--metrics-accent) 10%, var(--bg)); + --metrics-accent-border: color-mix(in srgb, var(--metrics-accent) 20%, var(--divider-light)); + --metrics-accent-text: color-mix(in srgb, var(--metrics-accent) 65%, var(--heading)); + + border-bottom: 1px solid var(--docs-card-divider); + display: grid; + gap: rem(0.45) rem(1.75); + grid-template-columns: var(--metrics-list-cols); + margin: 0; + padding: rem(0.85) rem(1.4); + position: relative; + transition: background-color 0.2s ease; + + &:last-child { + border-bottom: none; + } + + &::before { + background: color-mix(in srgb, var(--metrics-accent) 26%, var(--divider-light)); + border-radius: 0 rem(0.15) rem(0.15) 0; + bottom: 0; + content: ""; + left: 0; + position: absolute; + top: 0; + transition: background-color 0.2s ease; + width: 1px; + } + + &:hover { + background: color-mix(in srgb, var(--metrics-accent) 4%, var(--bg)); + + &::before { + background: color-mix(in srgb, var(--metrics-accent) 45%, var(--divider-light)); + } + + .metrics-name-pill, + .metrics-label-pill { + border-color: color-mix(in srgb, var(--metrics-accent) 28%, var(--divider-light)); + } + } + + &--violet { + --metrics-accent: var(--sg-violet); + } + + &--blue { + --metrics-accent: var(--table-blue); + } + + &--green { + --metrics-accent: var(--table-green); + } + + &--orange { + --metrics-accent: var(--table-orange); + } + + &--pink { + --metrics-accent: var(--orchid); + } + + > dt, + > dd { + margin: 0; + } + + > dt { + align-self: center; + grid-column: 1; + grid-row: 1; + min-width: 0; + } + + > dd { + align-self: center; + min-width: 0; + } + + @media (max-width: 768px) { + gap: rem(0.35) 0; + grid-template-columns: 1fr; + + > dt, + > dd { + grid-column: 1; + } + + > dt { + grid-row: 1; } - .heading .highlight { - display: inline-block; + + .metrics-desc { + grid-column: 1; + grid-row: 2; } + + .metrics-labels { + grid-column: 1; + grid-row: 3; + } + } +} + +.content .metrics-term { + min-width: 0; +} + +.content .metrics-name-pill { + background: linear-gradient( + 180deg, + color-mix(in srgb, var(--metrics-accent) 9%, var(--bg-sub)), + var(--metrics-accent-soft) 58%, + color-mix(in srgb, var(--metrics-accent) 7%, var(--bg)) + ); + border: 1px solid var(--metrics-accent-border); + border-radius: rem(0.55); + display: inline-block; + max-width: 100%; + padding: rem(0.22) rem(0.65); + transition: border-color 0.2s ease; + + code { + background: transparent; + border: none; + color: var(--metrics-accent-text); + font-family: var(--font-mono); + font-size: rem(1.15); + font-weight: 500; + letter-spacing: var(--tracking-code); + line-height: var(--leading-code); + overflow-wrap: anywhere; + padding: 0; + white-space: normal; + word-break: break-word; } } +body.light .content .metrics-name-pill { + background: linear-gradient( + 180deg, + color-mix(in srgb, var(--metrics-accent) 7%, var(--bg)), + color-mix(in srgb, var(--metrics-accent) 5%, var(--bg-sub)) 58%, + color-mix(in srgb, var(--metrics-accent) 4%, var(--bg)) + ); +} + +.content .metrics-desc { + color: var(--table-body); + grid-column: 2; + grid-row: 1; + line-height: 1.55; +} + +.content .metrics-labels { + display: flex; + flex-wrap: wrap; + gap: rem(0.35) rem(0.45); + grid-column: 3; + grid-row: 1; +} + +.content .metrics-label-pill { + background: color-mix(in srgb, var(--metrics-accent) 8%, var(--bg)); + border: 1px solid var(--metrics-accent-border); + border-radius: rem(99); + display: inline-flex; + padding: rem(0.12) rem(0.5); + transition: border-color 0.2s ease; + + code { + background: transparent; + border: none; + color: var(--metrics-accent-text); + font-family: var(--font-mono); + font-size: rem(1.05); + letter-spacing: var(--tracking-code); + line-height: var(--leading-code); + padding: 0; + white-space: nowrap; + } +} + +body.light .content .metrics-label-pill { + background: color-mix(in srgb, var(--metrics-accent) 6%, var(--bg)); +} + .relative { position: relative; } @@ -81,7 +656,24 @@ table.inline-headings { background: var(--card-light); border: 1px solid var(--divider-light); border-radius: 8px; - max-width: 230px; + max-width: none; + + &:hover, + &:focus { + background: var(--card-light); + border-color: var(--divider-light); + color: var(--important); + box-shadow: none; + + .DocSearch-Button-Placeholder, + .DocSearch-Search-Icon { + color: #2bddc2; + } + + .DocSearch-Button-Key { + color: var(--body); + } + } } .DocSearch-Button-Keys { @@ -97,8 +689,9 @@ table.inline-headings { } .DocSearch-Button-Placeholder { + color: var(--body); font-size: rem(1.6); - font-weight: 300; + font-weight: var(--weight-body); @media(max-width: 768px) { display: initial; @@ -114,26 +707,105 @@ table.inline-headings { Theme override for the Algolia Docsearch modal */ +body.dark { + --docsearch-text-color: var(--heading); + --docsearch-muted-color: var(--caption); + --docsearch-container-background: color-mix(in srgb, var(--bg) 35%, rgba(0, 0, 0, 0.72)); + --docsearch-modal-background: var(--card-light); + --docsearch-modal-shadow: var(--docs-card-shadow); + --docsearch-searchbox-background: color-mix(in srgb, var(--bg-sub) 70%, var(--card-light)); + --docsearch-searchbox-focus-background: color-mix(in srgb, var(--bg-sub) 55%, var(--card-light)); + --docsearch-searchbox-shadow: inset 0 0 0 2px color-mix(in srgb, var(--sg-violet) 45%, transparent); + --docsearch-primary-color: var(--sg-violet); + --docsearch-highlight-color: var(--highlight); + --docsearch-hit-color: var(--body); + --docsearch-hit-active-color: var(--heading); + --docsearch-hit-background: color-mix(in srgb, var(--card-light) 88%, var(--bg-sub)); + --docsearch-hit-shadow: none; + --docsearch-footer-background: color-mix(in srgb, var(--bg-sub) 50%, var(--card-light)); + --docsearch-footer-shadow: inset 0 1px 0 color-mix(in srgb, var(--divider-light) 40%, transparent); + --docsearch-logo-color: var(--link); + --docsearch-key-gradient: linear-gradient(-225deg, var(--card), var(--card-light)); + --docsearch-key-shadow: inset 0 -2px 0 0 color-mix(in srgb, var(--divider-light) 65%, transparent); + + .DocSearch-Hit[aria-selected="true"] a { + background-color: color-mix(in srgb, var(--highlight) 18%, var(--card-light)); + } + + .DocSearch-Hit-source { + color: color-mix(in srgb, var(--highlight) 75%, var(--heading)); + } + + .DocSearch-Input { + color: var(--heading); + } + + .DocSearch-Hit[aria-selected="true"] mark { + color: var(--highlight) !important; + } +} + +body.light { + --docsearch-primary-color: var(--sg-violet); + --docsearch-highlight-color: var(--highlight); + --docsearch-text-color: var(--sg-midnight); + --docsearch-muted-color: var(--sg-gray-2); + --docsearch-container-background: color-mix(in srgb, var(--bg) 25%, rgba(16, 12, 33, 0.38)); + --docsearch-modal-background: var(--white); + --docsearch-modal-shadow: var(--docs-card-shadow); + --docsearch-searchbox-background: color-mix(in srgb, var(--bg-sub) 80%, var(--white)); + --docsearch-searchbox-focus-background: var(--white); + --docsearch-searchbox-shadow: inset 0 0 0 2px color-mix(in srgb, var(--sg-violet) 35%, transparent); + --docsearch-hit-color: var(--body); + --docsearch-hit-active-color: var(--heading); + --docsearch-hit-background: var(--white); + --docsearch-hit-shadow: none; + --docsearch-footer-background: color-mix(in srgb, var(--bg-sub) 65%, var(--white)); + --docsearch-footer-shadow: inset 0 1px 0 color-mix(in srgb, var(--docs-card-divider) 55%, transparent); + --docsearch-logo-color: var(--link); + --docsearch-key-gradient: linear-gradient(-225deg, var(--bg-sub), var(--white)); + --docsearch-key-shadow: inset 0 -2px 0 0 color-mix(in srgb, var(--docs-card-divider) 65%, transparent); + + .DocSearch-Hit[aria-selected="true"] a { + background-color: color-mix(in srgb, var(--highlight) 12%, var(--white)); + } + + .DocSearch-Hit-source { + color: color-mix(in srgb, var(--highlight) 70%, var(--sg-midnight)); + } + + .DocSearch-Input { + color: var(--heading); + } -.DocSearch-Modal { - --docsearch-primary-color: #{$purple-v2}; - --docsearch-highlight-color: #{$purple-v2}; - --docsearch-searchbox-shadow: inset 0 0 0 2px var(--docsearch-primary-color); + .DocSearch-Hit[aria-selected="true"] mark { + color: var(--highlight) !important; + } } .backdrop { - position: fixed; + backdrop-filter: blur(4px); + background: color-mix(in srgb, var(--bg) 35%, rgba(0, 0, 0, 0.72)); + display: none; height: 100vh; - width: 100vw; inset: 0; - background: rgba(0, 0, 0, .7); - display: none; + position: fixed; + width: 100vw; } .sidebar-wrapper { - flex: 1; + flex: 0 0 300px; + padding-left: var(--milli); + box-sizing: border-box; + + @media (min-width: 1571px) { + flex-basis: calc(((100vw - 1400px) / 2) + 300px); + padding-left: calc((100vw - 1400px) / 2); + } @media(max-width: 850px) { + min-width: 0; + padding-left: 0; position: fixed; background: var(--bg); z-index: 100; @@ -163,10 +835,10 @@ table.inline-headings { } .sidebar { - margin-left: auto; position: sticky; top: var(--nav-height); - padding: var(--xx-small) var(--small); + padding: var(--xx-small) var(--small) var(--xx-small) 0; + box-sizing: border-box; overflow-y: auto; height: calc(100vh - var(--nav-height)); display: flex; @@ -176,9 +848,10 @@ table.inline-headings { &, ul { + box-sizing: border-box; width: 100%; - min-width: 200px; - max-width: 285px; + min-width: 0; + max-width: 100%; @media(max-width: 850px) { min-width: 260px; @@ -186,7 +859,6 @@ table.inline-headings { } @media (max-width: 1570px) { - padding-left: var(--milli); padding-right: var(--nano); } @@ -199,41 +871,65 @@ table.inline-headings { display: block; cursor: pointer; position: relative; - padding: 3px 30px 3px 15px; - margin-left: 5px; + padding: 5px 26px 5px 10px; + border-radius: 6px; + color: var(--important); + font-weight: var(--weight-body); + line-height: 1.35; text-decoration: none; word-wrap: break-word; white-space: initial; + transition: color 0.2s ease, background-color 0.2s ease; &.active { - font-weight: 500; - background: var(--tip); + color: var(--highlight); + background: rgba(129, 154, 123, 0.18); + font-weight: var(--weight-body-strong); + + &::before { + content: ""; + position: absolute; + top: rem(0.7); + bottom: rem(0.7); + left: rem(0.35); + width: 1px; + background: #2bddc2; + } + } + + &:hover { + color: var(--important); + background: var(--card-light); + text-decoration: none; } - &:hover, &.active { - color: var(--highlight); text-decoration: none; + } + &:hover, + &.active { svg { - color: var(--divider-light); + color: currentColor; + opacity: 1; .darker { - color: var(--highlight); + color: currentColor; } } } svg { position: absolute; - right: 6px; + right: 4px; top: 50%; transform: translateY(-50%); - color: var(--divider-light); + color: var(--gray-dark); + opacity: 0.75; transition: transform 0.2s ease-out; .darker { - color: var(--sub); + color: currentColor; } &:hover { @@ -247,16 +943,13 @@ table.inline-headings { } code { - font-family: "Fira Code", Courier, monospace; + font-family: var(--font-mono); } .no-children>a, .level-4 a { - - - &:hover, - &.active { - border-left: 2px solid var(--highlight); + &:hover:not(.active) { + color: var(--important); } } @@ -266,8 +959,14 @@ table.inline-headings { margin-top: 0; padding-left: 0; + ul { + margin: rem(0.25) 0 rem(0.6) 10px; + padding-left: 10px; + border-left: 1px solid var(--divider-light); + } + ul ul { - margin-left: rem(0.8); + margin-left: 0; } } @@ -277,15 +976,57 @@ table.inline-headings { li.level-1 { &>a { - font-weight: 500; - color: var(--highlight); + color: var(--important); + font-family: var(--font-heading); + font-size: rem(1.55); + font-weight: var(--weight-body); + letter-spacing: 0; + text-transform: none; + + &:hover { + color: var(--important); + } + + &.active { + color: var(--important); + } } &>ul { - margin-bottom: rem(1.5); + margin-bottom: rem(1.25); + } + padding: rem(0.2) 0; + margin-bottom: rem(0.85); + } + + li.level-2>a { + font-size: rem(1.5); + padding-left: 10px; + margin-left: -10px; + + &.active { + padding-left: 10px; + } + } + + li.level-3>a { + font-size: rem(1.5); + padding-left: 10px; + margin-left: -10px; + + &.active { + padding-left: 10px; + } + } + + li.level-4>a { + font-size: rem(1.5); + padding-left: 10px; + margin-left: -10px; + + &.active { + padding-left: 10px; } - padding: 4px 0; - border-bottom: 1px solid var(--gray-light); } li.level-1, @@ -341,28 +1082,36 @@ table.inline-headings { } .toc-wrapper { - flex: 1; + flex: 0 0 240px; position: sticky; top: 90px; overflow-y: auto; height: 100vh; + padding-right: var(--nano); + box-sizing: border-box; + + @media (min-width: 1571px) { + flex-basis: calc(((100vw - 1400px) / 2) + 240px); + padding-right: calc((100vw - 1400px) / 2); + } @media(max-width: 1050px) { display: none; } .btn-ghost { - margin: var(--x-small) var(--milli) var(--milli); + margin: 0 rem(2) var(--pico); } } .toc { max-width: fit-content; min-width: 180px; - padding: var(--x-small) rem(2); + padding: var(--nano) rem(2); position: sticky; top: 0; - font-size: var(--sm); + overflow-y: auto; + font-size: rem(1.45); padding-bottom: 8.5rem; &-top { @@ -370,37 +1119,59 @@ table.inline-headings { } h2 { - font-size: var(--xsm); - letter-spacing: 0.1em; - margin: 0 0 rem(0.75) 0; + font-size: rem(1.4); + font-weight: var(--weight-body); + letter-spacing: 0; + line-height: var(--leading-headline); + margin: 0 0 rem(1.4) 0; padding: 0; display: inline-block; - color: var(--highlight); - text-transform: uppercase; + color: var(--important); + text-transform: none; } ul { + border-left: 2px solid var(--divider-light); list-style-type: none; margin: 0; - padding: 0; + padding: 0 0 0 rem(1.4); } ul ul { - margin-left: var(--milli); + border-left: none; + margin-left: 0; + padding-left: rem(1.4); } li { - padding: rem(0.25) 0; + padding: rem(0.35) 0; } a { + display: block; + color: var(--important); + font-weight: var(--weight-body); + line-height: 1.35; + position: relative; text-decoration: none; &.active { &, code { - font-weight: 500; + color: #2bddc2 !important; + font-weight: inherit; + text-shadow: 0 0 0.35px currentColor; + } + + &::before { + content: ""; + position: absolute; + top: rem(0.1); + bottom: rem(0.1); + left: calc(-1 * #{rem(1.4)} - 2px); + width: 2px; + background: #2bddc2; } } @@ -410,31 +1181,55 @@ table.inline-headings { &, code { - color: var(--highlight); text-decoration: none; } } + + &:hover, + &:focus { + color: var(--important); + } } code { - font-family: "Fira Code", Courier, monospace; + font-family: var(--font-mono); font-variant-ligatures: none; } + + .toc-scroll-top { + display: block; + margin-top: var(--x-small); + padding-top: var(--x-small); + border-top: 1px solid var(--divider-light); + color: var(--important); + font-size: var(--sm); + font-weight: var(--weight-body); + text-decoration: none; + + &:hover, + &:focus { + color: var(--important); + text-decoration: none; + } + } } -.sidebar a, -.toc a { +.sidebar a { white-space: initial; } +.toc a { + white-space: nowrap; +} + .footer { + border-top: 1px solid var(--docs-card-divider); display: flex; flex-direction: column; gap: var(--x-small); - text-align: center; margin-top: var(--large); padding: var(--small) 0 0; - border-top: 1px solid var(--divider-light); + text-align: center; &-links { display: flex; @@ -457,8 +1252,14 @@ table.inline-headings { a:not([class]), button { color: var(--sub) !important; - font-weight: 300 !important; + font-weight: var(--weight-body) !important; text-decoration: none; + transition: color 0.15s ease; + + &:hover, + &:focus { + color: var(--link) !important; + } &[href*="https://"] { border-bottom: none; @@ -481,9 +1282,9 @@ table.inline-headings { } svg { + fill: var(--gray-mid); height: rem(2.2); width: rem(2.2); - fill: var(--gray-mid); } .system.active { @@ -505,6 +1306,62 @@ table.inline-headings { } } +body.light { + .nav { + a:not([class*="btn"]) { + color: var(--body); + + &:hover, + &:focus { + color: var(--heading); + } + + &.active { + color: var(--highlight); + } + } + + &-logo { + color: var(--heading); + } + } + + .sidebar { + a { + color: var(--body); + } + + li.level-1 > a { + color: var(--heading); + } + + a:hover, + a:focus { + color: var(--heading); + } + + a.active { + color: var(--highlight); + } + } + + .toc { + h2 { + color: var(--heading); + } + + a { + color: var(--body); + + &:hover, + &:focus, + &.active { + color: var(--heading); + } + } + } +} + body.dark { .theme-switcher { @@ -515,7 +1372,11 @@ body.dark { } .banner { - background-color: var(--tip); + background: color-mix(in srgb, var(--sg-violet) 12%, var(--docs-card-inset)); + border: 1px solid color-mix(in srgb, var(--sg-violet) 22%, var(--docs-card-divider)); + border-radius: var(--table-radius); + box-shadow: var(--docs-card-shadow); + margin: var(--milli) 0; padding: var(--pico) var(--milli); text-align: center; @@ -525,6 +1386,7 @@ body.dark { a { color: var(--link); + font-weight: var(--weight-body-emphasis); } } diff --git a/doc/user/assets/sass/_mixins.scss b/doc/user/assets/sass/_mixins.scss index 12de2ccee5045..e5632fcff4a49 100644 --- a/doc/user/assets/sass/_mixins.scss +++ b/doc/user/assets/sass/_mixins.scss @@ -5,3 +5,187 @@ box-shadow: var(--shadow-default); } + +// Homepage promo blocks: What's new callout + offerings table +@mixin docs-feature-card($top-accent: false) { + $glow-foot: var(--docs-card-glow-foot, color-mix(in srgb, var(--docs-card-glow) 45%, transparent)); + $surface: + radial-gradient(120% 90% at 50% -22%, var(--docs-card-glow), transparent 62%), + linear-gradient(180deg, transparent 48%, #{$glow-foot} 100%), + var(--docs-card-surface, var(--table-surface)); + + @if $top-accent { + background: + linear-gradient( + 90deg, + transparent 0%, + color-mix(in srgb, var(--brand) var(--docs-card-top-accent-mix, 45%), transparent) 35%, + color-mix(in srgb, var(--brand) var(--docs-card-top-accent-center-mix, 90%), var(--sg-lavender-2)) 50%, + color-mix(in srgb, var(--brand) var(--docs-card-top-accent-mix, 45%), transparent) 65%, + transparent 100% + ) 0 0 / 100% 2px no-repeat, + $surface; + } @else { + background: $surface; + } + + border: 1px solid var(--docs-card-border, var(--table-border)); + border-radius: var(--table-radius); + box-shadow: var(--docs-card-shadow); +} + +// Brand gradient hairline pinned to the top edge of a docs-feature-card. +// The host element needs position: relative. +@mixin docs-card-top-hairline() { + &::before { + background: linear-gradient( + 90deg, + transparent 0%, + color-mix(in srgb, var(--brand) var(--docs-card-top-accent-mix, 45%), transparent) 35%, + color-mix(in srgb, var(--brand) var(--docs-card-top-accent-center-mix, 90%), var(--sg-lavender-2)) 50%, + color-mix(in srgb, var(--brand) var(--docs-card-top-accent-mix, 45%), transparent) 65%, + transparent 100% + ); + border-radius: var(--table-radius) var(--table-radius) 0 0; + content: ""; + height: 1px; + left: 0; + pointer-events: none; + position: absolute; + right: 0; + top: 0; + z-index: 1; + } +} + +@mixin callout-item-accent($token) { + --callout-accent: var(#{$token}); + --callout-accent-soft: color-mix(in srgb, var(#{$token}) var(--callout-accent-soft-mix, 10%), transparent); + --callout-accent-border: color-mix(in srgb, var(#{$token}) var(--callout-accent-border-mix, 22%), transparent); +} + +@mixin docs-admonition-theme($token) { + @include callout-item-accent($token); + + --admonition-surface: color-mix(in srgb, var(--callout-accent-soft) 42%, var(--docs-card-inset, var(--card-light))); + --admonition-border: color-mix(in srgb, var(--callout-accent-border) 85%, var(--table-border, var(--divider-light))); + --admonition-label: color-mix(in srgb, var(--callout-accent) 78%, var(--heading)); +} + +@mixin docs-admonition-card() { + background: var(--admonition-surface); + border: 1px solid var(--admonition-border); + border-radius: var(--table-radius); + box-shadow: var(--docs-card-shadow); + box-sizing: border-box; + color: var(--body); + margin: rem(1.2) 0; + overflow: hidden; + padding: rem(1.2) rem(1.4) rem(1.2) rem(1.6); + position: relative; + + &::before { + background: linear-gradient( + 180deg, + var(--callout-accent), + color-mix(in srgb, var(--callout-accent) 40%, transparent) + ); + bottom: 0; + content: ""; + left: 0; + position: absolute; + top: 0; + width: 3px; + } + + p:first-of-type { + margin-top: 0; + } + + a:not(a[class]) { + color: var(--link); + + &:hover, + &:focus { + color: var(--link-hover); + } + } +} + +@mixin docs-nested-code-vars { + --code-highlight-font-size: #{rem(1.35)}; + --code-highlight-padding-top: #{rem(2.2)}; + --code-highlight-padding-inline: #{rem(1.2)}; + --code-highlight-padding-bottom: #{rem(1)}; + --code-pre-font-size: #{rem(1.35)}; + --code-pre-padding-block: #{rem(1)}; + --code-pre-padding-inline: #{rem(1.2)}; +} + +@mixin offering-row-theme($accent, $cta: null) { + $cta-token: if($cta, $cta, $accent); + + --offering-accent: var(#{$accent}); + --offering-badge-bg: color-mix(in srgb, var(#{$accent}) 12%, transparent); + --offering-badge-border: color-mix(in srgb, var(#{$accent}) 24%, transparent); + --offering-tile-bg: linear-gradient( + 145deg, + color-mix(in srgb, var(#{$accent}) 22%, transparent), + color-mix(in srgb, var(#{$accent}) 7%, transparent) + ); + --offering-tile-glow: 0 0 14px color-mix(in srgb, var(#{$accent}) 14%, transparent); + --offering-row-glow: color-mix(in srgb, var(#{$accent}) 4%, transparent); + --offering-cta-accent: var(#{$cta-token}); + --offering-action-bg: color-mix(in srgb, var(#{$cta-token}) 8%, transparent); + --offering-action-border: color-mix(in srgb, var(#{$cta-token}) 22%, transparent); + --offering-action-hover: color-mix(in srgb, var(#{$cta-token}) 14%, transparent); +} + +@mixin docs-page-mesh-grid-layers() { + background-image: + var(--docs-mesh-icons), + linear-gradient(to right, var(--docs-mesh-grid-major) 1px, transparent 1px), + linear-gradient(to bottom, var(--docs-mesh-grid-major) 1px, transparent 1px), + linear-gradient(to right, var(--docs-mesh-grid-minor) 1px, transparent 1px), + linear-gradient(to bottom, var(--docs-mesh-grid-minor) 1px, transparent 1px), + radial-gradient(circle, var(--docs-mesh-dot) var(--docs-mesh-dot-size), transparent var(--docs-mesh-dot-size)); +} + +@mixin docs-page-mesh-grid-layers-no-icons() { + background-image: + linear-gradient(to right, var(--docs-mesh-grid-major) 1px, transparent 1px), + linear-gradient(to bottom, var(--docs-mesh-grid-major) 1px, transparent 1px), + linear-gradient(to right, var(--docs-mesh-grid-minor) 1px, transparent 1px), + linear-gradient(to bottom, var(--docs-mesh-grid-minor) 1px, transparent 1px), + radial-gradient(circle, var(--docs-mesh-dot) var(--docs-mesh-dot-size), transparent var(--docs-mesh-dot-size)); +} + +@mixin docs-page-mesh-size($icons-step, $major-step, $minor-step, $dot-step, $accent-cover: null) { + @if $accent-cover { + background-size: + $accent-cover, + $icons-step $icons-step, + $major-step $major-step, + $major-step $major-step, + $minor-step $minor-step, + $minor-step $minor-step, + $dot-step $dot-step; + } @else { + background-size: + $icons-step $icons-step, + $major-step $major-step, + $major-step $major-step, + $minor-step $minor-step, + $minor-step $minor-step, + $dot-step $dot-step; + } +} + +@mixin docs-page-mesh-grid-size($major-step, $minor-step, $dot-step) { + background-size: + $major-step $major-step, + $major-step $major-step, + $minor-step $minor-step, + $minor-step $minor-step, + $dot-step $dot-step; +} diff --git a/doc/user/assets/sass/_nav.scss b/doc/user/assets/sass/_nav.scss index b99bfc77fc910..3eb50ae54d537 100644 --- a/doc/user/assets/sass/_nav.scss +++ b/doc/user/assets/sass/_nav.scss @@ -30,7 +30,7 @@ } .active { - font-weight: bold; + font-weight: 500; } @media(max-width: 850px) { @@ -52,22 +52,30 @@ } a:not([class*="btn"]) { + color: var(--important); + font-family: var(--font-body); + font-weight: var(--weight-body); text-decoration: none; - border-bottom: 1px solid transparent; + border-bottom: none; &:hover, &:focus, &.active { text-decoration: none; - color: var(--important); - border-color: var(--important); + color: var(--highlight); } } + .btn { + font-family: var(--font-body); + font-weight: var(--weight-body); + } + &-logo { display: flex; align-items: center; - font-weight: 600; + font-family: var(--font-heading); + font-weight: 500; font-size: rem(1.8); color: var(--important); @@ -151,7 +159,7 @@ button.show-topics { display: none; margin: 0 0 var(--small) !important; text-align: left; - font-weight: 300; + font-weight: var(--weight-body); font-size: var(--base); color: var(--sub); diff --git a/doc/user/assets/sass/_railroad_diagrams.scss b/doc/user/assets/sass/_railroad_diagrams.scss index 53f72995910a4..4f8978a228171 100644 --- a/doc/user/assets/sass/_railroad_diagrams.scss +++ b/doc/user/assets/sass/_railroad_diagrams.scss @@ -26,13 +26,13 @@ text.terminal, text.nonterminal, text.regexp { - font-family: "Inter", sans-serif; + fill: var(--body); + font-family: var(--font-body); font-size: 14px; - fill: $black; } text.terminal { - font-weight: bold; + font-weight: var(--weight-body-emphasis); } rect, @@ -43,12 +43,12 @@ } rect.terminal { - fill: #ab96e0; - stroke: var(--sub); + fill: color-mix(in srgb, var(--sg-lavender-3) 55%, var(--table-surface-raised)); + stroke: color-mix(in srgb, var(--sg-violet) 35%, var(--sub)); } rect.nonterminal { - fill: scale-color($purple-20, $saturation: -50%); + fill: color-mix(in srgb, var(--sg-lavender-6) 45%, var(--table-surface)); stroke: var(--sub); } @@ -58,7 +58,7 @@ } polygon.regexp { - fill: scale-color($purple-10, $saturation: -50%); + fill: color-mix(in srgb, var(--sg-violet) 18%, var(--table-surface)); stroke: var(--sub); } } diff --git a/doc/user/assets/sass/main.scss b/doc/user/assets/sass/main.scss index 8ebc411e70da1..7da476c4010cf 100644 --- a/doc/user/assets/sass/main.scss +++ b/doc/user/assets/sass/main.scss @@ -56,6 +56,7 @@ $progress: #d1fa77; $warning: rgb(255, 145, 0); $danger: #f85151; +@import "colors"; @import "mixins"; @import "base"; @import "content"; diff --git a/doc/user/content/_index.md b/doc/user/content/_index.md index 25f5e6b356877..cc7c4d412b132 100644 --- a/doc/user/content/_index.md +++ b/doc/user/content/_index.md @@ -13,19 +13,7 @@ aliases: {{% include-headless "/headless/materialize-intro/intro" %}} -{{< callout >}} -## What's new! - -- **MCP servers and Agent skills**: - - [MCP server for agents: give your production AI agents fresh context from - Materialize](/releases/#mcp-server-for-agents) - - [MCP server for developers: give coding agents observability into your - Materialize environment](/releases/#mcp-server-for-developers) - - [Agent skills](/integrations/coding-agent-skills/) - -For more information on these and other changes, see the [Release Notes](/releases/). - -{{}} +{{< whats-new-callout >}} ## Materialize offerings diff --git a/doc/user/content/concepts/clusters.md b/doc/user/content/concepts/clusters.md index 5d9632964a35c..809d1332c7763 100644 --- a/doc/user/content/concepts/clusters.md +++ b/doc/user/content/concepts/clusters.md @@ -94,6 +94,10 @@ The following provides some general guidelines for clusters. See also {{% include-from-yaml data="best_practices_details" name="architecture-three-tier" %}} +{{< architecture-diagram tier="three" caption="3-tier architecture" >}} + +{{% include-from-yaml data="best_practices_details" name="architecture-three-tier-details" %}} + See also [Operational guidelines](/manage/operational-guidelines/). #### Alternatives diff --git a/doc/user/content/headless/materialize-intro/offerings.md b/doc/user/content/headless/materialize-intro/offerings.md index 43dd2dd4bd2ed..6fca941230026 100644 --- a/doc/user/content/headless/materialize-intro/offerings.md +++ b/doc/user/content/headless/materialize-intro/offerings.md @@ -4,8 +4,4 @@ headless: true Materialize is available as: -| Offering | Description | Get Started 🚀 | -|----------|-------------|-----------------| -| **Materialize Cloud** | Materialize Cloud is a fully-managed service for Materialize. | Sign up for a [free trial account](https://materialize.com/register/?utm_campaign=General&utm_source=documentation) on Materialize Cloud and try out the [Quickstart](/get-started/quickstart/). | -| **Materialize Self-Managed** | Deploy and operate Materialize in your Kubernetes environment. Whereas Materialize Cloud gives you a fully managed service, Materialize Self-Managed allows you to deploy Materialize in your own infrastructure.

{{< include-md file="shared-content/self-managed/editions-available.md" >}} | [Install self-managed](/get-started/install/) and try out the [Quickstart](/get-started/quickstart/). | -| **Materialize Emulator** | Materialize Emulator is an all-in-one Docker image that provides the fastest way to get hands-on experience with Materialize for local development. | [Download and run Materialize Emulator](/get-started/install-materialize-emulator/) and try out the [Quickstart](/get-started/quickstart/). | +{{< materialize-offerings-table >}} diff --git a/doc/user/content/manage/operational-guidelines.md b/doc/user/content/manage/operational-guidelines.md index 0b2f40304e791..6a747ccefbb3d 100644 --- a/doc/user/content/manage/operational-guidelines.md +++ b/doc/user/content/manage/operational-guidelines.md @@ -22,6 +22,10 @@ production cluster(s) to run development workloads or non-production tasks. {{% include-from-yaml data="best_practices_details" name="architecture-three-tier" %}} +{{< architecture-diagram tier="three" caption="3-tier architecture" >}} + +{{% include-from-yaml data="best_practices_details" name="architecture-three-tier-details" %}} + #### Alternatives If a three-tier architecture is infeasible or unnecessary due to low volume or a diff --git a/doc/user/data/best_practices_details.yml b/doc/user/data/best_practices_details.yml index 0c96c0b4d411c..69bef83049874 100644 --- a/doc/user/data/best_practices_details.yml +++ b/doc/user/data/best_practices_details.yml @@ -6,8 +6,7 @@ one-tier architecture may suffice for your sources, compute objects, and query serving needs. - ![Image of the 1-cluster-architecture - architecture](/images/1-tier-architecture.svg) + {{< architecture-diagram tier="one" >}} {{< yaml-table data="best_practices/one_tier_architecture" >}} @@ -35,8 +34,7 @@ is infeasible or unnecessary due to low volume or a **non**-production setup, a two-tier architecture may suffice. A two-tier architecture consists of: - ![Image of the 2-cluster architecture: Source cluster, Compute/Transform + - Serving cluster](/images/2-tier-architecture.svg) + {{< architecture-diagram tier="two" >}} {{< yaml-table data="best_practices/two_tier_architecture" >}} @@ -58,10 +56,8 @@ content: | In production, use a three-tier architecture, if feasible. - ![Image of the 3-tier architecture: Source cluster(s), Compute/Transform - cluster(s), Serving cluster(s)](/images/3-tier-architecture.svg "3-tier - architecture") - +- name: architecture-three-tier-details + content: | A three-tier architecture consists of: {{< yaml-table data="best_practices/three_tier_architecture" >}} diff --git a/doc/user/layouts/_default/_markup/render-image.html b/doc/user/layouts/_default/_markup/render-image.html index f0d6d7f8c99b4..b6eab1e493cf0 100644 --- a/doc/user/layouts/_default/_markup/render-image.html +++ b/doc/user/layouts/_default/_markup/render-image.html @@ -1,10 +1,14 @@ {{- $url := .Destination | safeURL -}} {{- $parentPath := partial "relative-link.html" . -}} -{{ .Text }} +{{- $caption := or (.Title) (.Text) -}} +
+ {{ .Text }} + {{- with $caption }}
{{ . }}
{{ end -}} +
{{- /* Chomp trailing newline. */ -}} diff --git a/doc/user/layouts/_default/baseof.html b/doc/user/layouts/_default/baseof.html index 167df07159dfe..ccdeb90b92919 100644 --- a/doc/user/layouts/_default/baseof.html +++ b/doc/user/layouts/_default/baseof.html @@ -30,6 +30,10 @@ } else { document.body.classList.add("light"); } + + document.documentElement.dataset.theme = document.body.classList.contains("dark") + ? "dark" + : "light"; {{ partial "header.html" . }} {{ block "body" .}} @@ -77,7 +81,7 @@ diff --git a/doc/user/layouts/shortcodes/include-syntax.html b/doc/user/layouts/shortcodes/include-syntax.html index 7daaf2921fbcb..87e79a199e4e2 100644 --- a/doc/user/layouts/shortcodes/include-syntax.html +++ b/doc/user/layouts/shortcodes/include-syntax.html @@ -23,6 +23,7 @@ {{- if .syntax_elements }} {{ partial "yaml-tables/generic-table.html" (dict + "class" "syntax-table" "columns" (slice (dict "column" "name" "header" "Syntax element") (dict "column" "description" "header" "Description") diff --git a/doc/user/layouts/shortcodes/linkbox.html b/doc/user/layouts/shortcodes/linkbox.html index c52815a1ca9e7..5b0f606910255 100644 --- a/doc/user/layouts/shortcodes/linkbox.html +++ b/doc/user/layouts/shortcodes/linkbox.html @@ -1,6 +1,9 @@ -
-
- {{ .Get "title" }} +
+
+ {{ with .Get "category" }} + + {{ end }} +
{{ .Get "title" }}
{{ .Inner | $.Page.RenderString }}
diff --git a/doc/user/layouts/shortcodes/materialize-offerings-table.html b/doc/user/layouts/shortcodes/materialize-offerings-table.html new file mode 100644 index 0000000000000..89a1658dc4828 --- /dev/null +++ b/doc/user/layouts/shortcodes/materialize-offerings-table.html @@ -0,0 +1,202 @@ +
+
+ +
+
Offering
+
Description
+
Get Started 🚀
+
+ +
+
+
+ +
+ Fully Managed +
+
+

Materialize Cloud

+

Zero ops · Instant scale

+
+
+

Materialize Cloud is a fully-managed service for Materialize.

+
+
+ + Start free trial + + + + + View pricing + +
+
+ +
+
+
+ +
+ Self-Hosted +
+
+

Materialize Self-Managed

+

Kubernetes · Enterprise & Community

+
+
+

Deploy Materialize in your own Kubernetes environment with full control over infrastructure, compliance boundaries, and resource allocation.

+
+

+ + Available in two editions: +

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureEnterpriseCommunity
Memory LimitUnlimited24 GB
Disk LimitUnlimited48 GB
SLA Support + + + + + + + +
SSO / RBAC + + + + + + + +
Audit Logging + + + + + + + +
LicenseCommercialBSL
+
+
+
+
+ + Install self-managed + + + + + Compare editions + +
+
+ +
+
+
+ +
+ Local Dev +
+
+

Materialize Emulator

+

Docker · No account needed

+
+
+

An all-in-one Docker image for local development. Get hands-on with Materialize's streaming SQL engine in seconds, entirely offline.

+
+
+ + Download Emulator + + + + + Try the Quickstart + +
+
+ +
+ materialize.com/docs +
+ + Quickstart + + + + Compare all features + + +
+
+ +
+
diff --git a/doc/user/layouts/shortcodes/metrics-table.html b/doc/user/layouts/shortcodes/metrics-table.html index 04ee2a6b3e78b..9d1ad09cc0f00 100644 --- a/doc/user/layouts/shortcodes/metrics-table.html +++ b/doc/user/layouts/shortcodes/metrics-table.html @@ -40,22 +40,24 @@

{{ . }}

{{- with .Get "description" }} {{ . | markdownify }} {{- end }} - - - - - - - - - - {{- range $metrics }} - - - - - - {{- end }} - -
MetricDescriptionLabels
{{ .name }}{{ .help }}{{- range $i, $label := .labels }}{{ if $i }}, {{ end }}{{ $label }}{{- end }}
+
+
+Metric +Description +Labels +
+{{ $accents := slice "violet" "blue" "green" "orange" "pink" }} +{{- range $i, $metric := $metrics }} +{{ $accent := index $accents (mod $i 5) }} +
+
{{ $metric.name }}
+
{{ $metric.help }}
+
+{{- range $label := $metric.labels -}} +{{ $label }} +{{- end -}} +
+
+{{- end }} +
{{- end }} diff --git a/doc/user/layouts/shortcodes/tabs.html b/doc/user/layouts/shortcodes/tabs.html index 822fe5ffbd571..4eb18144c5d2c 100644 --- a/doc/user/layouts/shortcodes/tabs.html +++ b/doc/user/layouts/shortcodes/tabs.html @@ -1,6 +1,10 @@ {{ $level := .Get "level" }}
-
    +
    +
    +
      +
      +
      {{ .Inner }}
      diff --git a/doc/user/layouts/shortcodes/whats-new-callout.html b/doc/user/layouts/shortcodes/whats-new-callout.html new file mode 100644 index 0000000000000..ce0390f46a72f --- /dev/null +++ b/doc/user/layouts/shortcodes/whats-new-callout.html @@ -0,0 +1,109 @@ +
      +
      +
      + +

      What's new

      + {{- $releases := where .Site.Pages "Section" "releases" -}} + {{- $released := where $releases ".Params.released" true -}} + {{- $latest := index (sort $released "Date" "desc") 0 -}} + {{- with $latest -}} + {{ .Title | replaceRE "Materialize " "" }} + {{- end -}} +
      + + Release notes + + +
      + +
      + + + + + MCP server for agents + New + + Give your production AI agents fresh context from Materialize + + + + + + + + + MCP server for developers + New + + Give coding agents observability into your Materialize environment + + + + + + + + + Agent skills + Preview + + Pre-built skill templates for common agentic patterns with Materialize + + + +
      + +

      + For more information on these and other changes, see the Release Notes. +

      +
      diff --git a/doc/user/shared-content/mat-view-use-cases.md b/doc/user/shared-content/mat-view-use-cases.md index 85f9b4805600e..0aaea61ec5d84 100644 --- a/doc/user/shared-content/mat-view-use-cases.md +++ b/doc/user/shared-content/mat-view-use-cases.md @@ -4,8 +4,7 @@ For example: {{< tabs >}} {{< tab "3-tier architecture" >}} -![Image of the 3-tier-architecture -architecture](/images/3-tier-architecture.svg) +{{< architecture-diagram tier="three" >}} In a [3-tier architecture](/manage/operational-guidelines/#three-tier-architecture) @@ -24,7 +23,7 @@ from memory. {{< tab "2-tier architecture" >}} -![Image of the 2-tier-architecture](/images/2-tier-architecture.svg) +{{< architecture-diagram tier="two" >}} In a [2-tier architecture](/manage/appendix-alternative-cluster-architectures/#two-tier-architecture) @@ -41,7 +40,7 @@ results from memory. {{}} {{< tab "1-tier architecture" >}} -![Image of the 1-tier-architecture](/images/1-tier-architecture.svg) +{{< architecture-diagram tier="one" >}} In a [1-tier architecture](/manage/appendix-alternative-cluster-architectures/#one-tier-architecture) diff --git a/doc/user/shared-content/multilink-box-native-connectors.md b/doc/user/shared-content/multilink-box-native-connectors.md index adfd4bdef0b3e..cc52a9571902b 100644 --- a/doc/user/shared-content/multilink-box-native-connectors.md +++ b/doc/user/shared-content/multilink-box-native-connectors.md @@ -1,16 +1,16 @@ {{< multilinkbox >}} -{{< linkbox title="Databases (CDC)" >}} +{{< linkbox title="Databases (CDC)" category="databases" >}} - [PostgreSQL](/ingest-data/postgres/) - [MySQL](/ingest-data/mysql/) - [SQL Server](/ingest-data/sql-server/) - [CockroachDB](/ingest-data/cdc-cockroachdb/) - [MongoDB](/ingest-data/mongodb/) {{}} -{{< linkbox title="Message Brokers" >}} +{{< linkbox title="Message Brokers" category="brokers" >}} - [Kafka](/ingest-data/kafka/) - [Redpanda](/sql/create-source/kafka) {{}} -{{< linkbox title="Webhooks" >}} +{{< linkbox title="Webhooks" category="webhooks" >}} - [Amazon EventBridge](/ingest-data/webhooks/amazon-eventbridge/) - [Segment](/ingest-data/webhooks/segment/) - [Other webhooks](/sql/create-source/webhook) diff --git a/doc/user/static/fonts/faire-sprig-sans-mono/FAIRE-SprigSansMono-Medium.woff2 b/doc/user/static/fonts/faire-sprig-sans-mono/FAIRE-SprigSansMono-Medium.woff2 new file mode 100644 index 0000000000000..8d3c624ae0ef0 Binary files /dev/null and b/doc/user/static/fonts/faire-sprig-sans-mono/FAIRE-SprigSansMono-Medium.woff2 differ diff --git a/doc/user/static/fonts/faire-sprig-sans-mono/FAIRE-SprigSansMono-Regular.woff2 b/doc/user/static/fonts/faire-sprig-sans-mono/FAIRE-SprigSansMono-Regular.woff2 new file mode 100644 index 0000000000000..61bc7e8a81a23 Binary files /dev/null and b/doc/user/static/fonts/faire-sprig-sans-mono/FAIRE-SprigSansMono-Regular.woff2 differ diff --git a/doc/user/static/fonts/faire-sprig-sans/FAIRE-SprigSans-Medium.woff2 b/doc/user/static/fonts/faire-sprig-sans/FAIRE-SprigSans-Medium.woff2 new file mode 100644 index 0000000000000..70ff9ebfa85aa Binary files /dev/null and b/doc/user/static/fonts/faire-sprig-sans/FAIRE-SprigSans-Medium.woff2 differ diff --git a/doc/user/static/fonts/faire-sprig-sans/FAIRE-SprigSans-Regular.woff2 b/doc/user/static/fonts/faire-sprig-sans/FAIRE-SprigSans-Regular.woff2 new file mode 100644 index 0000000000000..00027fd7ead9b Binary files /dev/null and b/doc/user/static/fonts/faire-sprig-sans/FAIRE-SprigSans-Regular.woff2 differ diff --git a/doc/user/static/fonts/fonts.css b/doc/user/static/fonts/fonts.css new file mode 100644 index 0000000000000..9759d5b22081e --- /dev/null +++ b/doc/user/static/fonts/fonts.css @@ -0,0 +1,58 @@ +/* Copyright Materialize, Inc. and contributors. All rights reserved. + * + * Use of this software is governed by the Business Source License + * included in the LICENSE file at the root of this repository. + * + * As of the Change Date specified in that file, in accordance with + * the Business Source License, use of this software will be governed + * by the Apache License, Version 2.0. */ + +/* Materialize brand fonts — sourced from www-temporary/apps/web/static/fonts */ + +@font-face { + font-family: "Inter"; + src: url("inter/Inter-Regular.woff2") format("woff2"); + font-weight: 400; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: "Inter"; + src: url("inter/Inter-SemiBold.woff2") format("woff2"); + font-weight: 600; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: "FAIRE Sprig Sans"; + src: url("faire-sprig-sans/FAIRE-SprigSans-Regular.woff2") format("woff2"); + font-weight: 400; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: "FAIRE Sprig Sans"; + src: url("faire-sprig-sans/FAIRE-SprigSans-Medium.woff2") format("woff2"); + font-weight: 500; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: "FAIRE Sprig Sans Mono"; + src: url("faire-sprig-sans-mono/FAIRE-SprigSansMono-Regular.woff2") format("woff2"); + font-weight: 400; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: "FAIRE Sprig Sans Mono"; + src: url("faire-sprig-sans-mono/FAIRE-SprigSansMono-Medium.woff2") format("woff2"); + font-weight: 500; + font-style: normal; + font-display: swap; +} diff --git a/doc/user/static/fonts/inter/Inter-Regular.woff2 b/doc/user/static/fonts/inter/Inter-Regular.woff2 new file mode 100644 index 0000000000000..41f6888434d64 Binary files /dev/null and b/doc/user/static/fonts/inter/Inter-Regular.woff2 differ diff --git a/doc/user/static/fonts/inter/Inter-SemiBold.woff2 b/doc/user/static/fonts/inter/Inter-SemiBold.woff2 new file mode 100644 index 0000000000000..e5bd89a0c61a0 Binary files /dev/null and b/doc/user/static/fonts/inter/Inter-SemiBold.woff2 differ diff --git a/doc/user/static/images/1-tier-architecture.svg b/doc/user/static/images/1-tier-architecture.svg index 7e0b90ce1a63b..ec21932ab80ac 100644 --- a/doc/user/static/images/1-tier-architecture.svg +++ b/doc/user/static/images/1-tier-architecture.svg @@ -1,4 +1,35 @@ - - -Single ClusterSET CLUSTER = <cluster>;CREATE SOURCE ... ;CREATE SOURCE ... ;CREATE VIEW ... ;CREATE VIEW ... ;CREATE INDEX ...;CREATE INDEX ...; + + + + ALL-IN-ONE CLUSTER(S) + + + + SET CLUSTER = <cluster>; + CREATE SOURCE ... ; + CREATE SOURCE ... ; + CREATE VIEW ... ; + CREATE VIEW ... ; + CREATE INDEX ... ; + CREATE INDEX ... ; + + diff --git a/doc/user/static/images/2-tier-architecture.svg b/doc/user/static/images/2-tier-architecture.svg index 4e49762aa6d96..c36f05e087d21 100644 --- a/doc/user/static/images/2-tier-architecture.svg +++ b/doc/user/static/images/2-tier-architecture.svg @@ -1,4 +1,55 @@ - - -Source Cluster(s)SET CLUSTER = <source_cluster>;CREATE SOURCE ... ;CREATE SOURCE ... ;Compute/Transform + Serving ClusterSET CLUSTER = <other_cluster>;CREATE VIEW ... ;CREATE VIEW ... ;CREATE INDEX ...;CREATE INDEX ...; + + + + SOURCE CLUSTER(S) + + + + SET CLUSTER = <source_cluster>; + CREATE SOURCE ... ; + CREATE SOURCE ... ; + + + + COMPUTE / TRANSFORM + + SERVING CLUSTER(S) + + + + SET CLUSTER = <other_cluster>; + CREATE VIEW ... ; + CREATE VIEW ... ; + CREATE INDEX ... ; + CREATE INDEX ... ; + + + + + + + diff --git a/doc/user/static/images/3-tier-architecture.svg b/doc/user/static/images/3-tier-architecture.svg index f4962a9f357ac..0eb6b251426fc 100644 --- a/doc/user/static/images/3-tier-architecture.svg +++ b/doc/user/static/images/3-tier-architecture.svg @@ -1,4 +1,58 @@ - - -Source Cluster(s)SET CLUSTER = <source_cluster>;CREATE SOURCE ... ;CREATE SOURCE ... ;Compute/Transform Cluster(s)SET CLUSTER = <compute_cluster>;CREATE MATERIALIZED VIEW ... ;CREATE MATERIALIZED VIEW ... ;Serving Cluster(s)SET CLUSTER = <serving_cluster>;CREATE INDEX ... ;CREATE INDEX ... ; + + + + Source Cluster(s) + + + + SET CLUSTER = <source_cluster>; + CREATE SOURCE ... ; + CREATE SOURCE ... ; + + + + Compute / Transform Cluster(s) + + + + SET CLUSTER = <compute_cluster>; + CREATE MATERIALIZED VIEW ... ; + CREATE MATERIALIZED VIEW ... ; + + + + Serving Cluster(s) + + + + SET CLUSTER = <serving_cluster>; + CREATE INDEX ... ; + CREATE INDEX ... ; + + + + + + + diff --git a/doc/user/static/images/connectors/category-brokers.svg b/doc/user/static/images/connectors/category-brokers.svg new file mode 100644 index 0000000000000..5c2f16454756e --- /dev/null +++ b/doc/user/static/images/connectors/category-brokers.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/doc/user/static/images/connectors/category-databases.svg b/doc/user/static/images/connectors/category-databases.svg new file mode 100644 index 0000000000000..7da69767a65b9 --- /dev/null +++ b/doc/user/static/images/connectors/category-databases.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/doc/user/static/images/connectors/category-webhooks.svg b/doc/user/static/images/connectors/category-webhooks.svg new file mode 100644 index 0000000000000..9b96a62111a5b --- /dev/null +++ b/doc/user/static/images/connectors/category-webhooks.svg @@ -0,0 +1,4 @@ + + + + diff --git a/doc/user/static/images/docs-mesh/data-icons-dark.svg b/doc/user/static/images/docs-mesh/data-icons-dark.svg new file mode 100644 index 0000000000000..f079b4afa76ca --- /dev/null +++ b/doc/user/static/images/docs-mesh/data-icons-dark.svg @@ -0,0 +1,113 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/doc/user/static/images/docs-mesh/data-icons-light.svg b/doc/user/static/images/docs-mesh/data-icons-light.svg new file mode 100644 index 0000000000000..a3aac80afbaf4 --- /dev/null +++ b/doc/user/static/images/docs-mesh/data-icons-light.svg @@ -0,0 +1,113 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +