search

abpframework / abp

Open Source Web Application Framework for ASP.NET Core. Offers an opinionated architecture to build enterprise software solutions with best practices on top of the .NET and the ASP.NET Core platforms. Provides the fundamental infrastructure, production-ready startup templates, application modules, UI themes, tooling, guides and documentation.
https://abp.io
GNU Lesser General Public License v3.0
12.31k stars 3.32k forks source link

User interface for styling #19697

Open nebula2 opened 2 weeks ago

nebula2 commented 2 weeks ago

Is there an existing issue for this?

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