From f7a6299b39a86c429d2bdba30dd217a2fc0e6fd6 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Tue, 20 Jan 2026 03:59:22 +0000 Subject: [PATCH 1/6] Initial plan From dbd9e3a3f85f4b842b308799a1d7c8a02a224782 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Tue, 20 Jan 2026 04:06:45 +0000 Subject: [PATCH 2/6] Replace color-mix with computed color values for compatibility Co-authored-by: sy-records <33931153+sy-records@users.noreply.github.com> --- src/themes/addons/core-dark.css | 2 +- src/themes/shared/_sidebar.css | 6 +----- src/themes/shared/_vars.css | 37 +++++++++++++++++---------------- 3 files changed, 21 insertions(+), 24 deletions(-) diff --git a/src/themes/addons/core-dark.css b/src/themes/addons/core-dark.css index b399d1c7a2..758a872447 100644 --- a/src/themes/addons/core-dark.css +++ b/src/themes/addons/core-dark.css @@ -19,7 +19,7 @@ --heading-color : var(--strong-color); --mark-bg : #fde047; --mark-color : var(--color-bg); - --strong-color : color-mix(in srgb, var(--color-text), white 35%); + --strong-color : #e9e9e9; /* Sidebar */ --sidebar-toggle-bg : var(--color-mono-3); diff --git a/src/themes/shared/_sidebar.css b/src/themes/shared/_sidebar.css index 13e29f2543..7777bbe347 100644 --- a/src/themes/shared/_sidebar.css +++ b/src/themes/shared/_sidebar.css @@ -221,11 +221,7 @@ @media screen and (any-hover) { &:hover { - background: color-mix( - in srgb, - var(--sidebar-toggle-bg-hover) 10%, - transparent - ); + background: var(--sidebar-toggle-bg-hover-alpha); } } diff --git a/src/themes/shared/_vars.css b/src/themes/shared/_vars.css index ffb2422654..462fea7c41 100644 --- a/src/themes/shared/_vars.css +++ b/src/themes/shared/_vars.css @@ -8,27 +8,27 @@ /* Color: Monochromatic */ --color-mono-min: var(--color-bg); - --color-mono-1 : color-mix(in srgb, var(--color-mono-min), var(--color-mono-max) 5%); - --color-mono-2 : color-mix(in srgb, var(--color-mono-min), var(--color-mono-max) 10%); - --color-mono-3 : color-mix(in srgb, var(--color-mono-min), var(--color-mono-max) 20%); - --color-mono-4 : color-mix(in srgb, var(--color-mono-min), var(--color-mono-max) 32%); - --color-mono-5 : color-mix(in srgb, var(--color-mono-max), var(--color-mono-min) 50%); - --color-mono-6 : color-mix(in srgb, var(--color-mono-max), var(--color-mono-min) 32%); - --color-mono-7 : color-mix(in srgb, var(--color-mono-max), var(--color-mono-min) 20%); - --color-mono-8 : color-mix(in srgb, var(--color-mono-max), var(--color-mono-min) 10%); - --color-mono-9 : color-mix(in srgb, var(--color-mono-max), var(--color-mono-min) 5%); + --color-mono-1 : #f5f5f5; + --color-mono-2 : #ebebeb; + --color-mono-3 : #d6d6d6; + --color-mono-4 : #bebebe; + --color-mono-5 : #999999; + --color-mono-6 : #747474; + --color-mono-7 : #5c5c5c; + --color-mono-8 : #474747; + --color-mono-9 : #3d3d3d; --color-mono-max: var(--color-text); /* Color: Theme Shades (darker) & Tints (lighter)*/ /* NOTE: Values derived from --theme-color */ - --theme-color-1: color-mix(in srgb, var(--theme-color), var(--color-mono-min) 90%); - --theme-color-2: color-mix(in srgb, var(--theme-color), var(--color-mono-min) 75%); - --theme-color-3: color-mix(in srgb, var(--theme-color), var(--color-mono-min) 55%); - --theme-color-4: color-mix(in srgb, var(--theme-color), var(--color-mono-min) 30%); - --theme-color-5: color-mix(in srgb, var(--theme-color), var(--color-mono-max) 30%); - --theme-color-6: color-mix(in srgb, var(--theme-color), var(--color-mono-max) 55%); - --theme-color-7: color-mix(in srgb, var(--theme-color), var(--color-mono-max) 75%); - --theme-color-8: color-mix(in srgb, var(--theme-color), var(--color-mono-max) 90%); + --theme-color-1: #e7f3fb; + --theme-color-2: #c2e1f5; + --theme-color-3: #91c8ed; + --theme-color-4: #54aae3; + --theme-color-5: #176ca6; + --theme-color-6: #21587d; + --theme-color-7: #29485c; + --theme-color-8: #2f3b43; /* Typography */ --font-family : system-ui, sans-serif; @@ -133,7 +133,7 @@ --link-underline-thickness-hover: var(--link-underline-thickness); --mark-bg : #fef08a; --mark-color : ; - --strong-color : color-mix(in srgb, var(--color-text), black 35%); + --strong-color : #212121; --strong-font-weight : 600; --table-row-alt-bg : var(--color-mono-1); @@ -171,6 +171,7 @@ --sidebar-toggle-alignment : center; /* start center end */ --sidebar-toggle-bg : var(--color-mono-2); --sidebar-toggle-bg-hover : var(--button-bg); + --sidebar-toggle-bg-hover-alpha : rgba(11, 133, 215, 0.1); --sidebar-toggle-color : var(--color-mono-4); --sidebar-toggle-color-hover : var(--button-color); --sidebar-toggle-height : 80px; From bb0a0b4d415b0e626862200ef197877125fd8e1e Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Tue, 20 Jan 2026 04:10:42 +0000 Subject: [PATCH 3/6] Add comprehensive documentation comments explaining color calculations Co-authored-by: sy-records <33931153+sy-records@users.noreply.github.com> --- src/themes/addons/core-dark.css | 2 +- src/themes/shared/_vars.css | 48 ++++++++++++++++++++------------- 2 files changed, 30 insertions(+), 20 deletions(-) diff --git a/src/themes/addons/core-dark.css b/src/themes/addons/core-dark.css index 758a872447..2e606b5975 100644 --- a/src/themes/addons/core-dark.css +++ b/src/themes/addons/core-dark.css @@ -19,7 +19,7 @@ --heading-color : var(--strong-color); --mark-bg : #fde047; --mark-color : var(--color-bg); - --strong-color : #e9e9e9; + --strong-color : #e9e9e9; /* 35% lighter than --color-text (#ddd) */ /* Sidebar */ --sidebar-toggle-bg : var(--color-mono-3); diff --git a/src/themes/shared/_vars.css b/src/themes/shared/_vars.css index 462fea7c41..93d8ddca45 100644 --- a/src/themes/shared/_vars.css +++ b/src/themes/shared/_vars.css @@ -7,28 +7,35 @@ --theme-color: #0b85d7; /* Color: Monochromatic */ + /* NOTE: Static color values computed from --color-bg (#fff) and --color-text (#333) + These replace color-mix() for browser compatibility. If base colors change, + recalculate using: mix(#fff, #333, percentage) in sRGB color space. + Formula: newColor = color1 * (1 - p) + color2 * p */ --color-mono-min: var(--color-bg); - --color-mono-1 : #f5f5f5; - --color-mono-2 : #ebebeb; - --color-mono-3 : #d6d6d6; - --color-mono-4 : #bebebe; - --color-mono-5 : #999999; - --color-mono-6 : #747474; - --color-mono-7 : #5c5c5c; - --color-mono-8 : #474747; - --color-mono-9 : #3d3d3d; + --color-mono-1 : #f5f5f5; /* 5% mix of --color-text with --color-bg */ + --color-mono-2 : #ebebeb; /* 10% mix of --color-text with --color-bg */ + --color-mono-3 : #d6d6d6; /* 20% mix of --color-text with --color-bg */ + --color-mono-4 : #bebebe; /* 32% mix of --color-text with --color-bg */ + --color-mono-5 : #999999; /* 50/50 mix of --color-text and --color-bg */ + --color-mono-6 : #747474; /* 68% mix of --color-text with --color-bg */ + --color-mono-7 : #5c5c5c; /* 80% mix of --color-text with --color-bg */ + --color-mono-8 : #474747; /* 90% mix of --color-text with --color-bg */ + --color-mono-9 : #3d3d3d; /* 95% mix of --color-text with --color-bg */ --color-mono-max: var(--color-text); /* Color: Theme Shades (darker) & Tints (lighter)*/ - /* NOTE: Values derived from --theme-color */ - --theme-color-1: #e7f3fb; - --theme-color-2: #c2e1f5; - --theme-color-3: #91c8ed; - --theme-color-4: #54aae3; - --theme-color-5: #176ca6; - --theme-color-6: #21587d; - --theme-color-7: #29485c; - --theme-color-8: #2f3b43; + /* NOTE: Static color values computed from --theme-color (#0b85d7) + These replace color-mix() for browser compatibility. If --theme-color changes, + recalculate using: mix(#0b85d7, target, percentage) in sRGB color space. + Tints (1-4) mix with --color-bg (#fff), Shades (5-8) mix with --color-text (#333) */ + --theme-color-1: #e7f3fb; /* 10% --theme-color, 90% white (lightest tint) */ + --theme-color-2: #c2e1f5; /* 25% --theme-color, 75% white */ + --theme-color-3: #91c8ed; /* 45% --theme-color, 55% white */ + --theme-color-4: #54aae3; /* 70% --theme-color, 30% white */ + --theme-color-5: #176ca6; /* 70% --theme-color, 30% dark gray */ + --theme-color-6: #21587d; /* 45% --theme-color, 55% dark gray */ + --theme-color-7: #29485c; /* 25% --theme-color, 75% dark gray */ + --theme-color-8: #2f3b43; /* 10% --theme-color, 90% dark gray (darkest shade) */ /* Typography */ --font-family : system-ui, sans-serif; @@ -133,7 +140,7 @@ --link-underline-thickness-hover: var(--link-underline-thickness); --mark-bg : #fef08a; --mark-color : ; - --strong-color : #212121; + --strong-color : #212121; /* 35% darker than --color-text (#333) */ --strong-font-weight : 600; --table-row-alt-bg : var(--color-mono-1); @@ -171,6 +178,9 @@ --sidebar-toggle-alignment : center; /* start center end */ --sidebar-toggle-bg : var(--color-mono-2); --sidebar-toggle-bg-hover : var(--button-bg); + /* NOTE: Hardcoded RGBA from --theme-color (#0b85d7) at 10% opacity for compatibility. + Modern rgba(from var(--theme-color) r g b / 0.1) syntax not widely supported yet. + If --theme-color changes, update this to: rgba(R, G, B, 0.1) */ --sidebar-toggle-bg-hover-alpha : rgba(11, 133, 215, 0.1); --sidebar-toggle-color : var(--color-mono-4); --sidebar-toggle-color-hover : var(--button-color); From 569b5a6add8085fac4167940bc6907a576a5fc56 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Tue, 20 Jan 2026 04:12:10 +0000 Subject: [PATCH 4/6] Fix nitpick: Clarify CSS Color Module Level 5 syntax reference Co-authored-by: sy-records <33931153+sy-records@users.noreply.github.com> --- src/themes/shared/_vars.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/themes/shared/_vars.css b/src/themes/shared/_vars.css index 93d8ddca45..4ae1b1316a 100644 --- a/src/themes/shared/_vars.css +++ b/src/themes/shared/_vars.css @@ -179,7 +179,7 @@ --sidebar-toggle-bg : var(--color-mono-2); --sidebar-toggle-bg-hover : var(--button-bg); /* NOTE: Hardcoded RGBA from --theme-color (#0b85d7) at 10% opacity for compatibility. - Modern rgba(from var(--theme-color) r g b / 0.1) syntax not widely supported yet. + CSS Color Module Level 5 rgba(from var(--theme-color) r g b / 0.1) syntax not widely supported yet. If --theme-color changes, update this to: rgba(R, G, B, 0.1) */ --sidebar-toggle-bg-hover-alpha : rgba(11, 133, 215, 0.1); --sidebar-toggle-color : var(--color-mono-4); From 8d1aa582276ece166aaff8c20e87262f211fdafe Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Tue, 20 Jan 2026 04:22:07 +0000 Subject: [PATCH 5/6] Replace color-mix during build process with PostCSS plugin - Revert source CSS files to use color-mix() functions - Create custom PostCSS plugin to replace color-mix at build time - Plugin transforms color-mix with CSS variables to pre-computed hex values - Source files remain clean and maintainable with color-mix - Build output contains no color-mix functions for compatibility Co-authored-by: sy-records <33931153+sy-records@users.noreply.github.com> --- build/postcss-replace-color-mix.cjs | 86 +++++++++++++++++++++++++++++ postcss.config.cjs | 1 + src/themes/addons/core-dark.css | 2 +- src/themes/shared/_sidebar.css | 6 +- src/themes/shared/_vars.css | 49 +++++++--------- 5 files changed, 112 insertions(+), 32 deletions(-) create mode 100644 build/postcss-replace-color-mix.cjs diff --git a/build/postcss-replace-color-mix.cjs b/build/postcss-replace-color-mix.cjs new file mode 100644 index 0000000000..f97d53eb66 --- /dev/null +++ b/build/postcss-replace-color-mix.cjs @@ -0,0 +1,86 @@ +/** + * PostCSS plugin to replace color-mix() with pre-computed values + * This plugin handles the specific color-mix usage in docsify + */ + +// Pre-computed color values based on the default theme +const colorReplacements = { + // Monochrome scale: mix of #fff and #333 + 'color-mix(in srgb, var(--color-mono-min), var(--color-mono-max) 5%)': + '#f5f5f5', + 'color-mix(in srgb, var(--color-mono-min), var(--color-mono-max) 10%)': + '#ebebeb', + 'color-mix(in srgb, var(--color-mono-min), var(--color-mono-max) 20%)': + '#d6d6d6', + 'color-mix(in srgb, var(--color-mono-min), var(--color-mono-max) 32%)': + '#bebebe', + 'color-mix(in srgb, var(--color-mono-max), var(--color-mono-min) 50%)': + '#999999', + 'color-mix(in srgb, var(--color-mono-max), var(--color-mono-min) 32%)': + '#747474', + 'color-mix(in srgb, var(--color-mono-max), var(--color-mono-min) 20%)': + '#5c5c5c', + 'color-mix(in srgb, var(--color-mono-max), var(--color-mono-min) 10%)': + '#474747', + 'color-mix(in srgb, var(--color-mono-max), var(--color-mono-min) 5%)': + '#3d3d3d', + + // Theme color tints: mix of #0b85d7 with white (#fff) + 'color-mix(in srgb, var(--theme-color), var(--color-mono-min) 90%)': + '#e7f3fb', + 'color-mix(in srgb, var(--theme-color), var(--color-mono-min) 75%)': + '#c2e1f5', + 'color-mix(in srgb, var(--theme-color), var(--color-mono-min) 55%)': + '#91c8ed', + 'color-mix(in srgb, var(--theme-color), var(--color-mono-min) 30%)': + '#54aae3', + + // Theme color shades: mix of #0b85d7 with dark gray (#333) + 'color-mix(in srgb, var(--theme-color), var(--color-mono-max) 30%)': + '#176ca6', + 'color-mix(in srgb, var(--theme-color), var(--color-mono-max) 55%)': + '#21587d', + 'color-mix(in srgb, var(--theme-color), var(--color-mono-max) 75%)': + '#29485c', + 'color-mix(in srgb, var(--theme-color), var(--color-mono-max) 90%)': + '#2f3b43', + + // Strong colors + 'color-mix(in srgb, var(--color-text), black 35%)': '#212121', + 'color-mix(in srgb, var(--color-text), white 35%)': '#e9e9e9', +}; + +// Normalize whitespace in color-mix functions for matching +function normalizeColorMix(str) { + return str.replace(/\s+/g, ' ').trim(); +} + +module.exports = () => { + return { + postcssPlugin: 'postcss-replace-color-mix', + Declaration(decl) { + const value = decl.value; + + // Check if the value contains color-mix + if (value.includes('color-mix')) { + const normalized = normalizeColorMix(value); + + // Try to find a direct match + if (colorReplacements[normalized]) { + decl.value = colorReplacements[normalized]; + } + // Handle the sidebar toggle hover case with transparency + else if ( + normalized.includes('color-mix') && + normalized.includes('var(--sidebar-toggle-bg-hover)') && + normalized.includes('transparent') + ) { + // Replace with semi-transparent version of theme color + decl.value = 'rgba(11, 133, 215, 0.1)'; + } + } + }, + }; +}; + +module.exports.postcss = true; diff --git a/postcss.config.cjs b/postcss.config.cjs index a781e8e568..6aeb56e91e 100644 --- a/postcss.config.cjs +++ b/postcss.config.cjs @@ -5,6 +5,7 @@ module.exports = ctx => ({ 'postcss-nesting': { edition: '2024-02', }, + './build/postcss-replace-color-mix.cjs': {}, cssnano: ctx.env === 'production' ? { preset: 'default' } : false, }, }); diff --git a/src/themes/addons/core-dark.css b/src/themes/addons/core-dark.css index 2e606b5975..b399d1c7a2 100644 --- a/src/themes/addons/core-dark.css +++ b/src/themes/addons/core-dark.css @@ -19,7 +19,7 @@ --heading-color : var(--strong-color); --mark-bg : #fde047; --mark-color : var(--color-bg); - --strong-color : #e9e9e9; /* 35% lighter than --color-text (#ddd) */ + --strong-color : color-mix(in srgb, var(--color-text), white 35%); /* Sidebar */ --sidebar-toggle-bg : var(--color-mono-3); diff --git a/src/themes/shared/_sidebar.css b/src/themes/shared/_sidebar.css index 7777bbe347..13e29f2543 100644 --- a/src/themes/shared/_sidebar.css +++ b/src/themes/shared/_sidebar.css @@ -221,7 +221,11 @@ @media screen and (any-hover) { &:hover { - background: var(--sidebar-toggle-bg-hover-alpha); + background: color-mix( + in srgb, + var(--sidebar-toggle-bg-hover) 10%, + transparent + ); } } diff --git a/src/themes/shared/_vars.css b/src/themes/shared/_vars.css index 4ae1b1316a..ffb2422654 100644 --- a/src/themes/shared/_vars.css +++ b/src/themes/shared/_vars.css @@ -7,35 +7,28 @@ --theme-color: #0b85d7; /* Color: Monochromatic */ - /* NOTE: Static color values computed from --color-bg (#fff) and --color-text (#333) - These replace color-mix() for browser compatibility. If base colors change, - recalculate using: mix(#fff, #333, percentage) in sRGB color space. - Formula: newColor = color1 * (1 - p) + color2 * p */ --color-mono-min: var(--color-bg); - --color-mono-1 : #f5f5f5; /* 5% mix of --color-text with --color-bg */ - --color-mono-2 : #ebebeb; /* 10% mix of --color-text with --color-bg */ - --color-mono-3 : #d6d6d6; /* 20% mix of --color-text with --color-bg */ - --color-mono-4 : #bebebe; /* 32% mix of --color-text with --color-bg */ - --color-mono-5 : #999999; /* 50/50 mix of --color-text and --color-bg */ - --color-mono-6 : #747474; /* 68% mix of --color-text with --color-bg */ - --color-mono-7 : #5c5c5c; /* 80% mix of --color-text with --color-bg */ - --color-mono-8 : #474747; /* 90% mix of --color-text with --color-bg */ - --color-mono-9 : #3d3d3d; /* 95% mix of --color-text with --color-bg */ + --color-mono-1 : color-mix(in srgb, var(--color-mono-min), var(--color-mono-max) 5%); + --color-mono-2 : color-mix(in srgb, var(--color-mono-min), var(--color-mono-max) 10%); + --color-mono-3 : color-mix(in srgb, var(--color-mono-min), var(--color-mono-max) 20%); + --color-mono-4 : color-mix(in srgb, var(--color-mono-min), var(--color-mono-max) 32%); + --color-mono-5 : color-mix(in srgb, var(--color-mono-max), var(--color-mono-min) 50%); + --color-mono-6 : color-mix(in srgb, var(--color-mono-max), var(--color-mono-min) 32%); + --color-mono-7 : color-mix(in srgb, var(--color-mono-max), var(--color-mono-min) 20%); + --color-mono-8 : color-mix(in srgb, var(--color-mono-max), var(--color-mono-min) 10%); + --color-mono-9 : color-mix(in srgb, var(--color-mono-max), var(--color-mono-min) 5%); --color-mono-max: var(--color-text); /* Color: Theme Shades (darker) & Tints (lighter)*/ - /* NOTE: Static color values computed from --theme-color (#0b85d7) - These replace color-mix() for browser compatibility. If --theme-color changes, - recalculate using: mix(#0b85d7, target, percentage) in sRGB color space. - Tints (1-4) mix with --color-bg (#fff), Shades (5-8) mix with --color-text (#333) */ - --theme-color-1: #e7f3fb; /* 10% --theme-color, 90% white (lightest tint) */ - --theme-color-2: #c2e1f5; /* 25% --theme-color, 75% white */ - --theme-color-3: #91c8ed; /* 45% --theme-color, 55% white */ - --theme-color-4: #54aae3; /* 70% --theme-color, 30% white */ - --theme-color-5: #176ca6; /* 70% --theme-color, 30% dark gray */ - --theme-color-6: #21587d; /* 45% --theme-color, 55% dark gray */ - --theme-color-7: #29485c; /* 25% --theme-color, 75% dark gray */ - --theme-color-8: #2f3b43; /* 10% --theme-color, 90% dark gray (darkest shade) */ + /* NOTE: Values derived from --theme-color */ + --theme-color-1: color-mix(in srgb, var(--theme-color), var(--color-mono-min) 90%); + --theme-color-2: color-mix(in srgb, var(--theme-color), var(--color-mono-min) 75%); + --theme-color-3: color-mix(in srgb, var(--theme-color), var(--color-mono-min) 55%); + --theme-color-4: color-mix(in srgb, var(--theme-color), var(--color-mono-min) 30%); + --theme-color-5: color-mix(in srgb, var(--theme-color), var(--color-mono-max) 30%); + --theme-color-6: color-mix(in srgb, var(--theme-color), var(--color-mono-max) 55%); + --theme-color-7: color-mix(in srgb, var(--theme-color), var(--color-mono-max) 75%); + --theme-color-8: color-mix(in srgb, var(--theme-color), var(--color-mono-max) 90%); /* Typography */ --font-family : system-ui, sans-serif; @@ -140,7 +133,7 @@ --link-underline-thickness-hover: var(--link-underline-thickness); --mark-bg : #fef08a; --mark-color : ; - --strong-color : #212121; /* 35% darker than --color-text (#333) */ + --strong-color : color-mix(in srgb, var(--color-text), black 35%); --strong-font-weight : 600; --table-row-alt-bg : var(--color-mono-1); @@ -178,10 +171,6 @@ --sidebar-toggle-alignment : center; /* start center end */ --sidebar-toggle-bg : var(--color-mono-2); --sidebar-toggle-bg-hover : var(--button-bg); - /* NOTE: Hardcoded RGBA from --theme-color (#0b85d7) at 10% opacity for compatibility. - CSS Color Module Level 5 rgba(from var(--theme-color) r g b / 0.1) syntax not widely supported yet. - If --theme-color changes, update this to: rgba(R, G, B, 0.1) */ - --sidebar-toggle-bg-hover-alpha : rgba(11, 133, 215, 0.1); --sidebar-toggle-color : var(--color-mono-4); --sidebar-toggle-color-hover : var(--button-color); --sidebar-toggle-height : 80px; From 2cb5ee147cb972d9e68748e647fa20ef7d9ee289 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Tue, 20 Jan 2026 04:25:01 +0000 Subject: [PATCH 6/6] Fix PostCSS plugin to handle whitespace in color-mix correctly Co-authored-by: sy-records <33931153+sy-records@users.noreply.github.com> --- build/postcss-replace-color-mix.cjs | 15 +++++---------- 1 file changed, 5 insertions(+), 10 deletions(-) diff --git a/build/postcss-replace-color-mix.cjs b/build/postcss-replace-color-mix.cjs index f97d53eb66..9638bcaea8 100644 --- a/build/postcss-replace-color-mix.cjs +++ b/build/postcss-replace-color-mix.cjs @@ -48,6 +48,10 @@ const colorReplacements = { // Strong colors 'color-mix(in srgb, var(--color-text), black 35%)': '#212121', 'color-mix(in srgb, var(--color-text), white 35%)': '#e9e9e9', + + // Sidebar toggle with transparency: 10% theme color with 90% transparent + 'color-mix( in srgb, var(--sidebar-toggle-bg-hover) 10%, transparent )': + 'rgba(11, 133, 215, 0.1)', }; // Normalize whitespace in color-mix functions for matching @@ -65,19 +69,10 @@ module.exports = () => { if (value.includes('color-mix')) { const normalized = normalizeColorMix(value); - // Try to find a direct match + // Replace with pre-computed value if found if (colorReplacements[normalized]) { decl.value = colorReplacements[normalized]; } - // Handle the sidebar toggle hover case with transparency - else if ( - normalized.includes('color-mix') && - normalized.includes('var(--sidebar-toggle-bg-hover)') && - normalized.includes('transparent') - ) { - // Replace with semi-transparent version of theme color - decl.value = 'rgba(11, 133, 215, 0.1)'; - } } }, };