From f00e61707cb8b332b24a596bbb65a6f4d947e08b Mon Sep 17 00:00:00 2001 From: Shahed Nasser Date: Fri, 16 Aug 2024 09:28:16 +0300 Subject: [PATCH] docs: update colors and typography (#8604) --- .../Security/Description/index.tsx | 2 +- .../Operation/Parameters/Nested/index.tsx | 2 +- .../ui/src/components/component-example.tsx | 2 +- .../docs-ui/src/components/Bordered/index.tsx | 4 +- .../src/components/LearningPath/index.tsx | 2 +- www/packages/tailwind/base.tailwind.config.js | 101 ++++++++---------- www/packages/tailwind/theme-presets.js | 54 +++++----- 7 files changed, 78 insertions(+), 89 deletions(-) diff --git a/www/apps/api-reference/components/MDXComponents/Security/Description/index.tsx b/www/apps/api-reference/components/MDXComponents/Security/Description/index.tsx index 1345fc3e93..b5e1bdcf8f 100644 --- a/www/apps/api-reference/components/MDXComponents/Security/Description/index.tsx +++ b/www/apps/api-reference/components/MDXComponents/Security/Description/index.tsx @@ -39,7 +39,7 @@ const SecurityDescription = ({ {getSecuritySchemaTypeName(securitySchema)}

{(securitySchema.type === "http" || securitySchema.type === "apiKey") && ( -

+

{securitySchema.type === "http" ? "HTTP Authorization Scheme" diff --git a/www/apps/api-reference/components/Tags/Operation/Parameters/Nested/index.tsx b/www/apps/api-reference/components/Tags/Operation/Parameters/Nested/index.tsx index 56db8bfeab..ba79ebf6f9 100644 --- a/www/apps/api-reference/components/Tags/Operation/Parameters/Nested/index.tsx +++ b/www/apps/api-reference/components/Tags/Operation/Parameters/Nested/index.tsx @@ -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" )} > diff --git a/www/apps/ui/src/components/component-example.tsx b/www/apps/ui/src/components/component-example.tsx index f06e4f135e..6b1aa1082d 100644 --- a/www/apps/ui/src/components/component-example.tsx +++ b/www/apps/ui/src/components/component-example.tsx @@ -44,7 +44,7 @@ export function ComponentExample({ >

diff --git a/www/packages/docs-ui/src/components/Bordered/index.tsx b/www/packages/docs-ui/src/components/Bordered/index.tsx index ebe6723d0d..f598f8f96a 100644 --- a/www/packages/docs-ui/src/components/Bordered/index.tsx +++ b/www/packages/docs-ui/src/components/Bordered/index.tsx @@ -9,8 +9,8 @@ export const Bordered = ({ wrapperClassName, children }: BorderedProps) => { return ( diff --git a/www/packages/tailwind/base.tailwind.config.js b/www/packages/tailwind/base.tailwind.config.js index 36d42dbcd4..ec37502293 100644 --- a/www/packages/tailwind/base.tailwind.config.js +++ b/www/packages/tailwind/base.tailwind.config.js @@ -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", }, ], diff --git a/www/packages/tailwind/theme-presets.js b/www/packages/tailwind/theme-presets.js index f0cf3b5edf..ed3bf8cac7 100644 --- a/www/packages/tailwind/theme-presets.js +++ b/www/packages/tailwind/theme-presets.js @@ -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)",