vitepress

vitepress copied to clipboard

Describe the bug

When trying to adapt the color schemes of Custom Container's I noticed a slight inconsistency in how color functions are used, which led to some initial confusion.

The vars.css defined colors for various type, like tip, note, warning, etc.. These colors are (for the most part) used in the corresponding Custom Container's as well.

For example, as a user if I wish to have all tips (including Custom Containers) appear in green, I can set

  --vp-c-tip-1: var(--vp-c-green-1);
  --vp-c-tip-2: var(--vp-c-green-2);
  --vp-c-tip-3: var(--vp-c-green-3);
  --vp-c-tip-soft: var(--vp-c-green-soft);

However, if I wish to achieve the same for either Notes or Info, this doesn't work. As Note and Info Customer Containers are "hardcoded" to default

  --vp-custom-block-note-bg: var(--vp-c-default-soft);
  --vp-custom-block-note-code-bg: var(--vp-c-default-soft);

in vars.css.

Reproduction

Try to make a Note Custom Container indigo:

  --vp-c-note-1: var(--vp-c-indigo-1);
  --vp-c-note-2: var(--vp-c-indigo-2);
  --vp-c-note-3: var(--vp-c-indigo-3);
  --vp-c-note-soft: var(--vp-c-indigo-soft);

But still, Note Customer container will be Gray.

Expected behavior

Setting

  --vp-c-note-1: var(--vp-c-indigo-1);
  --vp-c-note-2: var(--vp-c-indigo-2);
  --vp-c-note-3: var(--vp-c-indigo-3);
  --vp-c-note-soft: var(--vp-c-indigo-soft);

should make all notes (including Custom Containers) appear in indigo.

As a workaround users can additionally set

    --vp-custom-block-note-bg: var(--vp-c-indigo-soft);
    --vp-custom-block-note-code-bg: var(--vp-c-indigo-soft);

However, I would expect to be only required to change the --vp-custom-block-note-* CSS variables if I want Note Custom Containers to be different from other Notes.

System Info

System:
    OS: macOS 14.4.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 126.52 MB / 16.00 GB
    Shell: 3.7.1 - /opt/homebrew/bin/fish
  Binaries:
    Node: 18.19.0 - ~/Library/Caches/fnm_multishells/47864_1715772767429/bin/node
    Yarn: 1.22.22 - /opt/homebrew/bin/yarn
    npm: 10.2.3 - ~/Library/Caches/fnm_multishells/47864_1715772767429/bin/npm
    pnpm: 9.1.1 - /opt/homebrew/bin/pnpm
    Watchman: 2024.05.06.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 124.0.6367.202
    Safari: 17.4.1

Additional context

No response

Validations

• [X] Check if you're on the latest VitePress version.
• [X] Follow our Code of Conduct
• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

--vp-c-note-* were added in #3482, but looks like Anthony didn't use them anywhere.

--vp-c-note-* were added in #3482, but looks like Anthony didn't use them anywhere.

I'm happy to send to send a PR to do some clean up work here if you want.

Ah, please wait. I'll take this one. That part of CSS variables wasn't meant to be used like that.