docs: update colors and typography (#8604)

This commit is contained in:
Shahed Nasser
2024-08-16 09:28:16 +03:00
committed by GitHub
parent 12728f17ad
commit f00e61707c
7 changed files with 78 additions and 89 deletions

View File

@@ -39,7 +39,7 @@ const SecurityDescription = ({
{getSecuritySchemaTypeName(securitySchema)}
</p>
{(securitySchema.type === "http" || securitySchema.type === "apiKey") && (
<p className={clsx("bg-docs-bg-surface", "p-1")}>
<p className={clsx("bg-medusa-bg-subtle", "p-1")}>
<strong>
{securitySchema.type === "http"
? "HTTP Authorization Scheme"

View File

@@ -12,7 +12,7 @@ const TagsOperationParametersNested = ({
{...props}
className={clsx(
props.className,
"bg-docs-bg-surface px-1 pt-1",
"bg-medusa-bg-subtle px-1 pt-1",
"border-medusa-border-base my-1 rounded-sm border"
)}
>

View File

@@ -44,7 +44,7 @@ export function ComponentExample({
>
<div
className={clx(
"bg-docs-bg border-medusa-border-base flex max-h-[400px] min-h-[400px]",
"bg-medusa-bg-base border-medusa-border-base flex max-h-[400px] min-h-[400px]",
"w-full items-center justify-center overflow-auto rounded-md border px-10 py-5"
)}
>

View File

@@ -9,8 +9,8 @@ export const Bordered = ({ wrapperClassName, children }: BorderedProps) => {
return (
<span
className={clsx(
"border-medusa-border-strong bg-docs-bg",
"dark:bg-docs-bg-dark mr-docs_1 inline-flex w-fit items-center justify-center rounded-docs_DEFAULT border border-solid p-[3px]",
"border-medusa-border-strong bg-medusa-bg-base",
"mr-docs_1 inline-flex w-fit items-center justify-center rounded-docs_DEFAULT border border-solid p-[3px]",
"no-zoom-img",
wrapperClassName
)}

View File

@@ -35,7 +35,7 @@ export const LearningPath = ({
return (
<div
className={clsx(
"rounded shadow-elevation-card-rest dark:shadow-elevation-card-rest-dark bg-docs-bg-surface mt-docs_1.5 mb-docs_4",
"rounded shadow-elevation-card-rest dark:shadow-elevation-card-rest-dark bg-medusa-bg-subtle mt-docs_1.5 mb-docs_4",
className
)}
>

View File

@@ -186,43 +186,36 @@ module.exports = {
},
},
},
/* docs defaults */
docs: {
bg: {
DEFAULT: "var(--docs-bg)",
surface: "var(--docs-bg-surface)",
},
},
},
boxShadow: {
"elevation-card-rest":
"0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 1px 2px -1px rgba(0, 0, 0, 0.08), 0px 2px 4px 0px rgba(0, 0, 0, 0.04)",
"elevation-card-rest-dark":
"0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 1px 2px 0px rgba(0, 0, 0, 0.32), 0px 2px 4px 0px rgba(0, 0, 0, 0.32)",
"0px -1px 0px 0px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(39, 39, 42, 1), 0px 1px 2px 0px rgba(0, 0, 0, 0.32), 0px 2px 4px 0px rgba(0, 0, 0, 0.32)",
"elevation-card-hover":
"0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 1px 2px -1px rgba(0, 0, 0, 0.08), 0px 2px 8px 0px rgba(0, 0, 0, 0.1)",
"elevation-card-hover-dark":
"0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 1px 4px 0px rgba(0, 0, 0, 0.48), 0px 2px 8px 0px rgba(0, 0, 0, 0.48)",
"0px -1px 0px 0px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(39, 39, 42, 1), 0px 1px 4px 0px rgba(0, 0, 0, 0.48), 0px 2px 8px 0px rgba(0, 0, 0, 0.48)",
"elevation-tooltip":
"0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 2px 4px 0px rgba(0, 0, 0, 0.08), 0px 4px 8px 0px rgba(0, 0, 0, 0.08)",
"elevation-tooltip-dark":
"0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 2px 4px 0px rgba(0, 0, 0, 0.32), 0px 4px 8px 0px rgba(0, 0, 0, 0.32)",
"0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 2px 4px 0px rgba(0, 0, 0, 0.32), 0px 4px 8px 0px rgba(0, 0, 0, 0.32)",
"elevation-flyout":
"0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 4px 8px 0px rgba(0, 0, 0, 0.08), 0px 8px 16px 0px rgba(0, 0, 0, 0.08)",
"elevation-flyout-dark":
"0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 4px 8px 0px rgba(0, 0, 0, 0.32), 0px 8px 16px 0px rgba(0, 0, 0, 0.32)",
"0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 4px 8px 0px rgba(0, 0, 0, 0.32), 0px 8px 16px 0px rgba(0, 0, 0, 0.32)",
"elevation-modal":
"0px 0px 0px 1px rgba(255, 255, 255, 1) inset, 0px 0px 0px 1.5px rgba(228, 228, 231, 0.6) inset, 0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 8px 16px 0px rgba(0, 0, 0, 0.08), 0px 16px 32px 0px rgba(0, 0, 0, 0.08)",
"elevation-modal-dark":
"0px 0px 0px 1px rgba(24, 24, 27, 1) inset, 0px 0px 0px 1.5px rgba(255, 255, 255, 0.06) inset, 0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 8px 16px 0px rgba(0, 0, 0, 0.32), 0px 16px 32px 0px rgba(0, 0, 0, 0.32)",
"0px 0px 0px 1px rgba(24, 24, 27, 1) inset, 0px 0px 0px 1.5px rgba(255, 255, 255, 0.06) inset, 0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 4px 8px 0px rgba(0, 0, 0, 0.32), 0px 8px 16px 0px rgba(0, 0, 0, 0.32)",
"button-neutral":
"0px 1px 2px 0px rgba(0, 0, 0, 0.12), 0px 0px 0px 1px rgba(0, 0, 0, 0.08)",
"button-neutral-dark":
"0px -1px 0px 0px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(255, 255, 255, 0.08), 0px 0px 0px 1px rgba(39, 39, 42, 1), 0px 0px 1px 1.5px rgba(0, 0, 0, 0.24), 0px 2px 2px 0px rgba(0, 0, 0, 0.24)",
"0px -1px 0px 0px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(39, 39, 42, 1), 0px 0px 1px 1.5px rgba(0, 0, 0, 0.24), 0px 2px 2px 0px rgba(0, 0, 0, 0.24)",
"button-neutral-focused":
"0px 1px 2px 0px rgba(0, 0, 0, 0.12), 0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px rgba(59, 130, 246, 0.6)",
"button-neutral-focused-dark":
"0px -1px 0px 0px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(255, 255, 255, 0.08), 0px 0px 0px 1px rgba(39, 39, 42, 1), 0px 0px 0px 2px rgba(24, 24, 27, 1), 0px 0px 0px 4px rgba(96, 165, 250, 0.8)",
"0px -1px 0px 0px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(39, 39, 42, 1), 0px 0px 0px 2px rgba(24, 24, 27, 1), 0px 0px 0px 4px rgba(96, 165, 250, 0.8)",
"button-danger":
"0px 0.75px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px 1px 2px 0px rgba(190, 18, 60, 0.4), 0px 0px 0px 1px rgba(190, 18, 60, 1)",
"button-danger-dark":
@@ -241,15 +234,15 @@ module.exports = {
"0px -1px 0px 0px rgba(255, 255, 255, 0.12), 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 0px 0px 1px rgba(82, 82, 91, 1), 0px 0px 0px 2px rgba(24, 24, 27, 1), 0px 0px 0px 4px rgba(96, 165, 250, 0.8)",
"elevation-code-block":
"0px 0px 0px 1px #18181B inset, 0px 0px 0px 1.5px rgba(255, 255, 255, 0.20) inset",
"0px 0px 0px 1px rgba(24, 24, 27, 1) inset, 0px 0px 0px 1.5px rgba(255, 255, 255, 0.2) inset",
"elevation-code-block-dark":
"0px 0px 0px 1px #27272A inset, 0px 0px 0px 1.5px rgba(255, 255, 255, 0.10) inset",
"0px -1px 0px 0px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(39, 39, 42, 1), 0px 1px 2px 0px rgba(0, 0, 0, 0.32), 0px 2px 4px 0px rgba(0, 0, 0, 0.32)",
active: "0px 0px 0px 3px #E1F0FF",
"active-dark": "0px 0px 0px 3px #2C2250",
"border-base":
"0px 1px 2px 0px rgba(0, 0, 0, 0.12), 0px 0px 0px 1px rgba(0, 0, 0, 0.08)",
"border-base-dark":
"0px -1px 0px 0px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 0px 0px 1px #18181B, 0px 0px 1px 1.5px rgba(0, 0, 0, 0.24), 0px 2px 2px 0px rgba(0, 0, 0, 0.24)",
"0px -1px 0px 0px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(39, 39, 42, 1), 0px 0px 1px 1.5px rgba(0, 0, 0, 0.24), 0px 2px 2px 0px rgba(0, 0, 0, 0.24)",
},
borderRadius: {
xxs: "2px",
@@ -323,128 +316,128 @@ module.exports = {
},
fontSize: {
h1: [
"32px",
"2rem",
{
lineHeight: "44px",
lineHeight: "2.75rem",
fontWeight: "500",
},
],
h2: [
"24px",
"1.5rem",
{
lineHeight: "32px",
lineHeight: "2rem",
fontWeight: "500",
},
],
h3: [
"18px",
"1.125rem",
{
lineHeight: "28px",
lineHeight: "1.75rem",
fontWeight: "500",
},
],
h4: [
"16px",
"1rem",
{
lineHeight: "20px",
lineHeight: "1.25rem",
fontWeight: "500",
},
],
"compact-large-plus": [
"16px",
"1rem",
{
lineHeight: "20px",
lineHeight: "1.25rem",
fontWeight: "500",
},
],
"compact-large": [
"16px",
"1rem",
{
lineHeight: "20px",
lineHeight: "1.25rem",
fontWeight: "400",
},
],
"compact-medium-plus": [
"14px",
"0.875rem",
{
lineHeight: "20px",
lineHeight: "1.25rem",
fontWeight: "500",
},
],
"compact-medium": [
"14px",
"0.875rem",
{
lineHeight: "20px",
lineHeight: "1.25rem",
fontWeight: "400",
},
],
"compact-small-plus": [
"13px",
"0.8125rem",
{
lineHeight: "20px",
lineHeight: "1.25rem",
fontWeight: "500",
},
],
"compact-small": [
"13px",
"0.8125rem",
{
lineHeight: "20px",
lineHeight: "1.25rem",
fontWeight: "400",
},
],
"compact-x-small-plus": [
"12px",
"0.75rem",
{
lineHeight: "20px",
lineHeight: "1.25rem",
fontWeight: "500",
},
],
"compact-x-small": [
"13px",
"0.75rem",
{
lineHeight: "20px",
lineHeight: "1.25rem",
fontWeight: "400",
},
],
"x-large-plus": [
"18px",
"1.125rem",
{
lineHeight: "32px",
lineHeight: "1.6875rem",
fontWeight: "500",
},
],
"x-large": [
"18px",
"1.125rem",
{
lineHeight: "32px",
lineHeight: "1.6875rem",
fontWeight: "400",
},
],
"large-plus": [
"16px",
"1rem",
{
lineHeight: "28px",
lineHeight: "1.5rem",
fontWeight: "500",
},
],
large: [
"16px",
"1rem",
{
lineHeight: "28px",
lineHeight: "1.5rem",
fontWeight: "400",
},
],
"medium-plus": [
"14px",
"0.875rem",
{
lineHeight: "24px",
lineHeight: "1.3125rem",
fontWeight: "500",
},
],
medium: [
"14px",
"0.875rem",
{
lineHeight: "24px",
lineHeight: "1.3125rem",
fontWeight: "400",
},
],
@@ -458,7 +451,7 @@ module.exports = {
"code-body": [
"12px",
{
lineHeight: "22px",
lineHeight: "18px",
fontWeight: "400",
},
],

View File

@@ -11,7 +11,7 @@ const light = {
"--docs-bg-switch-off": "rgba(228, 228, 231, 1)",
"--docs-bg-switch-off-hover": "rgba(212, 212, 216, 1)",
"--docs-bg-interactive": "rgba(59, 130, 246, 1)",
"--docs-bg-overlay": "rgba(9, 9, 11, 0.4)",
"--docs-bg-overlay": "rgba(24, 24, 27, 0.4)",
"--docs-bg-disabled": "rgba(244, 244, 245, 1)",
"--docs-bg-highlight": "rgba(239, 246, 255, 1)",
"--docs-bg-highlight-hover": "rgba(219, 234, 254, 1)",
@@ -20,7 +20,7 @@ const light = {
"--docs-bg-field-component": "rgba(255, 255, 255, 1)",
"--docs-bg-field-component-hover": "rgba(250, 250, 250, 1)",
"--docs-fg-base": "rgba(9, 9, 11, 1)",
"--docs-fg-base": "rgba(24, 24, 27, 1)",
"--docs-fg-subtle": "rgba(82, 82, 91, 1)",
"--docs-fg-muted": "rgba(161, 161, 170, 1)",
"--docs-fg-disabled": "rgba(212, 212, 216, 1)",
@@ -59,12 +59,12 @@ const light = {
"--docs-tags-purple-bg": "rgba(237, 233, 254, 1)",
"--docs-tags-purple-bg-hover": "rgba(221, 214, 254, 1)",
"--docs-tags-purple-text": "rgba(91, 33, 182, 1)",
"--docs-tags-purple-icon": "rgba(139, 92, 246, 1)",
"--docs-tags-purple-icon": "rgba(167, 139, 250, 1)",
"--docs-tags-purple-border": "rgba(221, 214, 254, 1)",
"--docs-tags-blue-bg": "rgba(219, 234, 254, 1)",
"--docs-tags-blue-bg-hover": "rgba(191, 219, 254, 1)",
"--docs-tags-blue-text": "rgba(30, 64, 175, 1)",
"--docs-tags-blue-icon": "rgba(59, 130, 246, 1)",
"--docs-tags-blue-icon": "rgba(96, 165, 250, 1)",
"--docs-tags-blue-border": "rgba(191, 219, 254, 1)",
"--docs-tags-green-bg": "rgba(209, 250, 229, 1)",
"--docs-tags-green-bg-hover": "rgba(167, 243, 208, 1)",
@@ -72,7 +72,7 @@ const light = {
"--docs-tags-green-icon": "rgba(16, 185, 129, 1)",
"--docs-tags-green-border": "rgba(167, 243, 208, 1)",
"--docs-tags-orange-bg": "rgba(255, 237, 213, 1)",
"--docs-tags-orange-bg-hover": "rgba(253, 230, 138, 1)",
"--docs-tags-orange-bg-hover": "rgba(254, 215, 170, 1)",
"--docs-tags-orange-text": "rgba(154, 52, 18, 1)",
"--docs-tags-orange-icon": "rgba(249, 115, 22, 1)",
"--docs-tags-orange-border": "rgba(254, 215, 170, 1)",
@@ -88,9 +88,6 @@ const light = {
"--docs-code-bg-header": "rgba(31, 41, 55, 1)",
"--docs-code-border": "rgba(55, 65, 81, 1)",
"--docs-bg": "var(--docs-bg-base)",
"--docs-bg-surface": "var(--docs-bg-subtle)",
"--docs-contrast-bg-base": "rgba(24, 24, 27, 1)",
"--docs-contrast-bg-base-pressed": "rgba(63, 63, 70, 1)",
"--docs-contrast-bg-base-hover": "rgba(39, 39, 42, 1)",
@@ -105,31 +102,33 @@ const light = {
}
const dark = {
"--docs-bg-base": "rgba(24, 24, 27, 1)",
"--docs-bg-base": "rgba(33, 33, 36, 1)",
"--docs-bg-base-hover": "rgba(39, 39, 42, 1)",
"--docs-bg-base-pressed": "rgba(63, 63, 70, 1)",
"--docs-bg-subtle": "rgba(9, 9, 11, 1)",
"--docs-bg-subtle-hover": "rgba(24, 24, 27, 1)",
"--docs-bg-subtle-pressed": "rgba(63, 63, 70, 1)",
"--docs-bg-subtle": "rgba(24, 24, 27, 1)",
"--docs-bg-subtle-hover": "rgba(33, 33, 36, 1)",
"--docs-bg-subtle-pressed": "rgba(39, 39, 42, 1)",
"--docs-bg-component": "rgba(39, 39, 42, 1)",
"--docs-bg-component-pressed": "rgba(255, 255, 255, 0.16)",
"--docs-bg-component-hover": "rgba(255, 255, 255, 0.1)",
"--docs-bg-switch-off": "rgba(63, 63, 70, 1)",
"--docs-bg-switch-off-hover": "rgba(82, 82, 91, 1)",
"--docs-bg-interactive": "rgba(96, 165, 250, 1)",
"--docs-bg-overlay": "rgba(9, 9, 11, 0.72)",
"--docs-bg-overlay": "rgba(24, 24, 27, 0.72)",
"--docs-bg-disabled": "rgba(39, 39, 42, 1)",
"--docs-bg-highlight": "rgba(23, 37, 84, 1)",
"--docs-bg-highlight-hover": "rgba(30, 58, 138, 1)",
"--docs-bg-field": "rgba(255, 255, 255, 0.04)",
"--docs-bg-field-hover": "rgba(255, 255, 255, 0.08)",
"--docs-bg-field-component": "rgba(33, 33, 36, 1)",
"--docs-bg-field-component-hover": "rgba(39, 39, 42, 1)",
"--docs-fg-base": "rgba(244, 244, 245, 1)",
"--docs-fg-subtle": "rgba(161, 161, 170, 1)",
"--docs-fg-muted": "rgba(113, 113, 122, 1)",
"--docs-fg-disabled": "rgba(82, 82, 91, 1)",
"--docs-fg-on-color": "rgba(255, 255, 255, 1)",
"--docs-fg-on-inverted": "rgba(9, 9, 11, 1)",
"--docs-fg-on-inverted": "rgba(24, 24, 27, 1)",
"--docs-fg-interactive": "rgba(96, 165, 250, 1)",
"--docs-fg-interactive-hover": "rgba(147, 197, 253, 1)",
"--docs-fg-error": "rgba(251, 113, 133, 1)",
@@ -145,28 +144,28 @@ const dark = {
"--docs-button-inverted": "rgba(82, 82, 91, 1)",
"--docs-button-inverted-hover": "rgba(113, 113, 122, 1)",
"--docs-button-inverted-pressed": "rgba(161, 161, 170, 1)",
"--docs-button-neutral": "rgba(39, 39, 42, 1)",
"--docs-button-neutral-hover": "rgba(63, 63, 70, 1)",
"--docs-button-neutral-pressed": "rgba(82, 82, 91, 1)",
"--docs-button-neutral": "rgba(255, 255, 255, 0.04)",
"--docs-button-neutral-hover": "rgba(255, 255, 255, 0.08)",
"--docs-button-neutral-pressed": "rgba(255, 255, 255, 0.12)",
"--docs-button-danger": "rgba(159, 18, 57, 1)",
"--docs-button-danger-hover": "rgba(190, 18, 60, 1)",
"--docs-button-danger-pressed": "rgba(225, 29, 72, 1)",
"--docs-button-transparent": "rgba(255, 255, 255, 0)",
"--docs-button-transparent-hover": "rgba(39, 39, 42, 1)",
"--docs-button-transparent-pressed": "rgba(63, 63, 70, 1)",
"--docs-button-transparent-hover": "rgba(255, 255, 255, 0.08)",
"--docs-button-transparent-pressed": "rgba(255, 255, 255, 0.12)",
"--docs-tags-neutral-bg": "rgba(255, 255, 255, 0.08)",
"--docs-tags-neutral-bg-hover": "rgba(63, 63, 70, 1)",
"--docs-tags-neutral-bg-hover": "rgba(255, 255, 255, 0.12)",
"--docs-tags-neutral-text": "rgba(212, 212, 216, 1)",
"--docs-tags-neutral-icon": "rgba(113, 113, 122, 1)",
"--docs-tags-neutral-border": "rgba(63, 63, 70, 1)",
"--docs-tags-neutral-border": "rgba(255, 255, 255, 0.06)",
"--docs-tags-purple-bg": "rgba(46, 16, 101, 1)",
"--docs-tags-purple-bg-hover": "rgba(76, 29, 149, 1)",
"--docs-tags-purple-bg-hover": "rgba(91, 33, 182, 1)",
"--docs-tags-purple-text": "rgba(196, 181, 253, 1)",
"--docs-tags-purple-icon": "rgba(167, 139, 250, 1)",
"--docs-tags-purple-border": "rgba(91, 33, 182, 1)",
"--docs-tags-blue-bg": "rgba(23, 37, 84, 1)",
"--docs-tags-blue-bg-hover": "rgba(30, 42, 138, 1)",
"--docs-tags-blue-bg-hover": "rgba(30, 58, 138, 1)",
"--docs-tags-blue-text": "rgba(147, 197, 253, 1)",
"--docs-tags-blue-icon": "rgba(96, 165, 250, 1)",
"--docs-tags-blue-border": "rgba(30, 58, 138, 1)",
@@ -176,7 +175,7 @@ const dark = {
"--docs-tags-green-icon": "rgba(16, 185, 129, 1)",
"--docs-tags-green-border": "rgba(6, 78, 59, 1)",
"--docs-tags-orange-bg": "rgba(67, 20, 7, 1)",
"--docs-tags-orange-bg-hover": "rgba(120, 53, 15, 1)",
"--docs-tags-orange-bg-hover": "rgba(124, 45, 18, 1)",
"--docs-tags-orange-text": "rgba(253, 186, 116, 1)",
"--docs-tags-orange-icon": "rgba(251, 146, 60, 1)",
"--docs-tags-orange-border": "rgba(124, 45, 18, 1)",
@@ -192,12 +191,9 @@ const dark = {
"--docs-code-bg-header": "rgba(24, 24, 26, 1)",
"--docs-code-border": "rgba(46, 48, 53, 1)",
"--docs-bg": "var(--docs-bg-subtle)",
"--docs-bg-surface": "var(--docs-bg-base)",
"--docs-contrast-bg-base": "rgba(39, 39, 42, 1)",
"--docs-contrast-bg-base-pressed": "rgba(113, 113, 122, 1)",
"--docs-contrast-bg-base-hover": "rgba(82, 82, 91, 1)",
"--docs-contrast-bg-base-pressed": "rgba(82, 82, 91, 1)",
"--docs-contrast-bg-base-hover": "rgba(63, 63, 70, 1)",
"--docs-contrast-bg-subtle": "rgba(47, 47, 50, 1)",
"--docs-contrast-bg-highlight": "rgba(82, 82, 91, 1)",
"--docs-contrast-bg-alpha": "rgba(63, 63, 70, 0.9)",