User interface for styling

[nebula2]

Is there an existing issue for this?

• [X] I have searched the existing issues

Is your feature request related to a problem? Please describe the problem.

I have built a variety of abp applications where the final product is handed out to the cliient. When it comes to styling, things like "make h2 be 24px" or something, are always things I have to do it myself.

Describe the solution you'd like

I would like to see some kind of functionality which enables the user to set some common bootstrap variables by himself.

I do not know how things behave on the community version, but in leptonx (commercial) we have something like this:

:root {
  --lpx-content-text-rgb: 50,81,104;
  --lpx-content-bg-rgb: 240,244,247;
  --lpx-primary-rgb: 25,103,171;
  --lpx-secondary-rgb: 94,202,231;
  --lpx-brand-rgb: 25,103,171;
  --lpx-success-rgb: 79,191,103;
  --lpx-info-rgb: 67,138,167;
  --lpx-warning-rgb: 255,159,56;
  --lpx-danger-rgb: 192,13,73;
  --lpx-light-rgb: 240,244,247;
  --lpx-dark-rgb: 6,42,68;
  --lpx-navbar-color-rgb: 255,255,255;
  --lpx-navbar-text-color-rgb: 68,95,114;
  --lpx-navbar-active-text-color-rgb: 18,65,99;
  --lpx-text-white-rgb: 255,255,255;
  --lpx-logo-reverse: var(--logo-reverse);
  --lpx-primary: #1967AB;
  --lpx-secondary: #5ECAE7;
  --lpx-success: #4fbf67;
  --lpx-info: #438aa7;
  --lpx-warning: #ff9f38;
  --lpx-danger: #c00d49;
  --lpx-brand: #1967AB;
  --lpx-brand-text: #fff;
  --lpx-container-active-text: #fff;
  --lpx-text-white: #fff;
  --lpx-radius: 0.5rem;
  --lpx-logo: url('/images/logo/leptonx/logo-dark.png');
  --lpx-logo-icon: url('/images/logo/leptonx/logo-dark-thumbnail.png');
  --lpx-light: #f9f9f9;
  --lpx-dark: #062a44;
  --lpx-navbar-color: #fff;
  --lpx-navbar-text-color: #445f72;
  --lpx-navbar-active-text-color: #124163;
  --lpx-navbar-active-bg-color: #f3f6f9;
  --lpx-card-bg: #fff;
  --lpx-card-title-text-color: #062a44;
  --lpx-content-bg: #f9f9f9;
  --lpx-content-text: #325168;
  --lpx-border-color: #e8eef3;
  --lpx-shadow: 0 0 20px 0 rgba(76, 87, 125, 0.02);
}

I imagine a world where we have those variables - along with some other ones like sizes for h1, h2 and so on - managable by the user.

The goal would be to increase configurability and by that, giving responsibility and control to the user. With Lepton, we had the ability to let the end user choose between different pre-defined stylings. IMHO LeptonX lacks in that very specific thing.

Would that be something of interest? Could we maybe re-use some of the CMS-Kit global styles magic in order to make implementation "easy"? Just wanted to throw this in to maybe get a discussion startet :)

Additional context

No response