Support for CSS variables

[ghost]

Hello,

I am used to create my own CSS variables for fluid typography, spacing and also for generating color shades. The advantage of using fluid typography/spacing is that it takes a lot of work off my shoulders because I don’t have to fiddle around responsive breakpoints that much. Font sizes and spacing is already taken care for me this way.

1. Would it be possible to input custom values inside padding/margin block editor options? Specifically, I would like to input a CSS variable for responsive spacing, for example – padding-bottom: var(--space-m) right inside the gutenberg editor (For example: Container -> Spacing -> Padding).

2. Same goes for typography (font-size) option. It would be very nice if I could set the CSS variable for fluid font sizes directly in gutenberg editor (Typography -> Font size). For example: font-size: var(--text-l);

3. As for the colors, currently I can write the CSS variable right inside the color picker instead of HEX value. There is just one issue: the color inside color picker doesn’t reflect the CSS color variable. So, for example if I write var(--color-p-500), the color picker can’t detect the exact color inside gutenberg editor. On the front-end, it works allright.

4. As of now, the workaround for my first 2 points (fluid typography and spacing) seems to be to apply a custom class to the given element, and specify the typography/or spacing values inside CSS customizer. So, for example, if I would like to apply responsive padding for container, I would apply a custom class to it in gutenberg editor (for example .containerspacing) and then in CSS customizer I would apply a padding: var(--space-m) for the class `.containerspacing`

[JeanPaiva]

Will be tracked on https://github.com/tomusborne/generateblocks-pro/issues/214