[FR] Make default callouts customizable and update content border for custom ones

Is your feature request related to a problem? Please describe. I would like to have the possibility to change the color of default callouts easily via custom css snippets or from the style settings GUI. Also easily add custom callouts by writing just the three parameters:

  --callout-title-color: #6f6f6f;
  --callout-color: 66, 66, 66;
  --callout-icon: lucide-database;

Describe the solution you'd like My idea is to have a single color for each callout type and then automatically change the opacity of that color for all the components. For example:

Overwrite default colors with cusotmizable parameter

  --callout-bug: #6f6f6f;
  --callout-default: #6f6f6f;
  --callout-error: #6f6f6f;
  --callout-example: #6f6f6f;
  --callout-fail: #6f6f6f;
  --callout-important: #6f6f6f;
  --callout-info: #6f6f6f;
  --callout-question: #6f6f6f;
  --callout-success: #6f6f6f;
  --callout-summary: #6f6f6f;
  --callout-tip: #6f6f6f;
  --callout-todo: #6f6f6f;
  --callout-warning: #6f6f6f;

Use color in different tonalities for all related elements:

body:not(.pt-disable-callout-styling) .callout[data-callout=bug] > .callout-title {
  color: rgba(var(--callout-bug), 1);
  background-color: rgba(var(--callout-bug), 0.5);
  border-color: rgba(var(--callout-bug), 1);
}
body:not(.pt-disable-callout-styling) .callout[data-callout=bug] > .callout-title .callout-icon .svg-icon {
  color: rgba(var(--callout-bug), 1);
}
body:not(.pt-disable-callout-styling) .callout[data-callout=bug] > .callout-content {
  background-color: rgba(var(--callout-bug), 0.2);
  border-color: rgba(var(--callout-bug), 0.5);
}

Use default color variable that can be overwritten for custom callouts:

body:not(.pt-disable-callout-styling) .callout .callout-title {
  color: hsla(var(--callout-title-color), 1);
  background-color: hsla(var(--callout-color), 0.35);
  border-color: hsla(var(--callout-color), 1);
}
body:not(.pt-disable-callout-styling)
  .callout
  .callout-title
  .callout-icon
  .svg-icon {
  color: hsla(var(--callout-title-color), 1);
}
body:not(.pt-disable-callout-styling) .callout .callout-content {
  background-color: hsla(var(--callout-color), 0.1);
  border-color: hsla(var(--callout-color), 0.8);
}

The user can then create their own custom callouts very easily:

.callout[data-callout="link"] {
  --callout-title-color: 170, 100%, 58%;
  --callout-color: 170, 100%, 58%;
  --callout-icon: lucide-link-2;
}

The problem is in this example I'm using HLS alpha to change the color and it mess up when overlapping of the two backgrounds. We would need to find a better way to have some solid color at least for the title background.

Result of custom callout link

damiankorcz / Prism-Theme

[FR] Make default callouts customizable and update content border for custom ones #123