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 typography style system to align with new DNN 10 CSS variables #371

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 typography 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.

$fonts: (
    'base-font-size': 18,
);

$var-base-font-size: #{map-get($fonts, 'base-font-size')};
$lineheight: 1.5;
$base-line-height: calc($var-base-font-size * 1.5);
$defaultlineheight: calc($var-base-font-size * 1.5);

$ubuntu: 'Ubuntu', Helvetica, sans-serif;

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

// Font function
@function font($font-name) {
    @return var(--dnn-#{$font-name}, map-get($fonts, $font-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 just consume them with the understanding that out-of-the-box in DNN 10, only super users will be able to change the values of these CSS variables.