Consider setting icon color to css prop

[djmtype]

Please consider setting color as a css prop so the default icon color can be easily overridden followed the fallback color.

<span class="callout-icon" style="color: var(--callout-warning-icon, #ff9100)">

Currently, we'd have to overwrite using:

.callout.warning .callout-icon {
  color: #cc0000
}

This is too specific.

[rk-terence]

Sorry for the late reply and thank you for your suggestion. Currently I am busy with other affairs, and have not spared some time to this. I admit that currently this package lacks the ability of customizing. If I can spare some time in the future, I would like to add those functionality. And pull requests are welcomed and appreciated if you'd like to.

[djmtype]

@rk-terence I decided to fork your repo, but wasn't sure if my changes are more opinionated.

I decided to remove the style tag entirely from the icon. Since the icon already includes currentColor it would inherit the css prop value I have set to the .callout.[calloutTypeText].

Whether this is a good idea, depends on the goal of this plugin. For my purpose, I'm using it with Astro. Therefore, less opinions is better.

I also updated the icons from the Lucide. For example, the pencil icon has since been updated. Also, I added aria-hidden="true" and focusable="false" along with setting height and width to 1em instead of 16, so the icon size inherits the title's font size by default. (Although adding units within width and height feels wrong, it appears to be valid according to MDN.)

Here's the CSS I use outside the repo, in my project, where I've opted for Open Props in this case.

blockquote.callout {
    --_background: initial;
    --_border-color: initial;
    --_color: initial;
    position: relative;
    border-color: var(--_border-color, var(--_color));
    z-index: 0;
    &::after {
      content: "";
      position: absolute;
      z-index: -1;
      height: 100%;
      width: 100%;
      display: block;
      opacity: .1;
      background: var(--_background, var(--_color));
      inset: 0;
    }
  }
  .callout-title {
    display: flex;
    align-items: center;
    gap: 1ch;
  }

  .callout-title > * {
    font-size: var(--font-size-3);
    font-weight: var(--font-weight-6);
  }

  .callout-icon {
    color: var(--_color, var(--brand));
  }

  .callout.note {
    --_color: var(--blue-6);
  }

  .callout.danger {
    --_color: var(--red-6);
  }
/* etc. */

[rk-terence]

Thank you for your information and feedback. Now I really think it is a bad idea to embed inline styles to the generated HTML; The role of this package is to generate HTML (structures), not style.

I have made a pull request that should solve this problem, where the new code is less opinionated by allowing customization by passing a configuration object when invoking the API through

use(remarkCallout, config)

and embedding inline style to callout icons has been disabled by default, and the SVG string of different callout types can also be provided to override the default ones. You can check the new README.md for details (I believe your forked version will suit your needs better, though).

[rk-terence]

I am going to close this, but feel free to reopen if you have any further concerns!