nvisionative / nvQuickTheme

nvQuickTheme is more than just a great minimalist DNN (DotNetNuke) theme. It is a powerful theme building framework and developer workflow.
https://nvisionative.github.io/nvQuickTheme/
Other
41 stars 40 forks source link

Add new controls style system to align with new DNN 10 CSS variables #370

Open david-poindexter opened 5 months ago

david-poindexter commented 5 months ago

Is your feature request related to a problem?

We'll add a new controls style system to align with new DNN 10 CSS variables.

Describe the solution you'd like

We'll leverage the following from the new DNN 10 theme Aperture to integrate within nvQuickTheme.

$controls: (
    "radius": 0,
    "padding": .5rem,
);

///TODO: Remove these in favor of those injected by DNN 10. The defaults in DNN 10 should match these.
:root {
    --dnn-controls-radius: #{map-get($controls, 'radius')};
    --dnn-controls-padding: #{map-get($controls, 'padding')};
}

// Control function
@function control($control-name) {
    @return var(--dnn-controls-#{$control-name}, map-get($controls, $control-name));
 }

Describe alternatives you've considered

n/a

Additional context

Similar to the color system, we'll need to decide whether or not we simply want to consume the CSS variables from DNN 10 or if we want to override them (which would render the administration of the colors in DNN 10 impossible). Most likely we'll simply consume them with the understanding that out-of-the-box in DNN 10, only super users will be able to change values of these CSS variables.