Customizing <blockquote> with CSS variables

[dkonopka]

It would be nice to modify border-width and border-color of <blockquote> with CSS variables.

https://github.com/ckeditor/ckeditor5-block-quote/blob/cc723c31fb0b9f0ae812e308d0d248a282908bc4/theme/blockquote.css#L12

cc @oleq

[Reinmar]

Isn't it enough to add this to your stylesheet?

.ck-content blockquote {
     border-left: whatever;
}

?

[dkonopka]

We are using CSS Variables in ckeditor5 to easily customize the design with variables instead of additional CSS classes in the stylesheet.

For example, if user wants to change the background color or <code> too, there is need to add next class, etc etc.

I just had this issue with Letters where we are overriding CSS variables like:

   /* Overwrite CK5 variables */
   --ck-color-text: var(--ltrs-color-white);
   --ck-color-base-foreground: var(--ltrs-color-gray-blue);

   --ck-balloon-arrow-height: 11px;
   --ck-balloon-arrow-half-width: 7px;
   --ck-color-toolbar-border: var(--ltrs-color-gray-blue);
   --ck-color-panel-border: var(--ltrs-color-gray-blue);
   --ck-color-panel-background: var(--ltrs-color-gray-blue);

   ...

IMHO it's easier to keep overriding things in one place instead of mixing it (with CSS classes). But it's only a proposal.

[Reinmar]

And what if you want to style a block quote differently? Add margins, add a big quote character in the background, etc? In all of these case you will have to override the style. Variables won't help.

[dkonopka]

Yes, you are right, if we want to make advanced customization we need to do it via CSS class.

The idea of adding variable it was only to change basic appearance like color/background-color.

[Reinmar]

In the highlight feature, the goal of using variables was to synchronise the values between multiple places where you need to configure them. Here, we're talking about a very simple CSS which is defined in one place. So, the easiest way to change it is by overriding it. Hence, for me, this is simple enough now and adding CSS variable won't make it any eaiser. In fact, this would become harder because you'd need to change two variables (width and color). And in all cases when you need more (which may be the majority of cases, see – Letters) you'll need to override the whole style anyway.

[dkonopka]

Ok, I understand this, we can close this issue then :)