Update color system to leverage DNN 10 CSS variables

[david-poindexter]

Is your feature request related to a problem?

The idea here is to implement a new color system based on CSS variables that will be injected by DNN 10.

Describe the solution you'd like

The following from the new DNN 10 theme Aperture will be used as inspiration.

// Color Array
$colors: (
    "primary": #00a5e0,
    "primary-light": #1aaee3,
    "primary-dark": #0091c5,
    "primary-contrast": #ffffff,
    "primary-r": 0,
    "primary-g": 165,
    "primary-b": 224,

    "secondary": #ed3d46,
    "secondary-light": #ef5059,
    "secondary-dark": #d1363e,
    "secondary-contrast": #ffffff,
    "secondary-r": 237,
    "secondary-g": 61,
    "secondary-b": 70,

    "tertiary": #0e2936,
    "tertiary-light": #3c7a9a,
    "tertiary-dark": #0b1c24,
    "tertiary-contrast": #ffffff,
    "tertiary-r": 0,
    "tertiary-g": 165,
    "tertiary-b": 225,

    "neutral": #ededee,
    "neutral-light": #ffffff,
    "neutral-dark": #999999,
    "neutral-contrast": #000000,
    "neutral-r": 245,
    "neutral-g": 245,
    "neutral-b": 245,

    "background": #ffffff,
    "background-light": #f5f5f5,
    "background-dark": #cccccc,
    "background-contrast": #000000,
    "background-r": 255,
    "background-g": 255,
    "background-b": 255,

    "foreground": #000000,
    "foreground-light": #333333,
    "foreground-dark": #000000,
    "foreground-contrast": #ffffff,
    "foreground-r": 0,
    "foreground-g": 0,
    "foreground-b": 0,

    "info": #17a2b8,
    "info-light": #23b8cf,
    "info-dark": #00889e,
    "info-contrast": #ffffff,
    "info-r": 23,
    "info-g": 162,
    "info-b": 184,

    "success": #28a745,
    "success-light": #49c25d,
    "success-dark": #00902f,
    "success-contrast": #ffffff,
    "success-r": 40,
    "success-g": 167,
    "success-b": 69,

    "warning": #ffc107,
    "warning-light": #ffd42e,
    "warning-dark": #e9ad00,
    "warning-contrast": #ffffff,
    "warning-r": 255,
    "warning-g": 193,
    "warning-b": 7,

    "danger": #dc3545,
    "danger-light": #f14954,
    "danger-dark": #c51535,
    "danger-contrast": #ffffff,
    "danger-r": 220,
    "danger-g": 53,
    "danger-b": 69,
);

///TODO: Remove these in favor of those injected by DNN 10. The defaults in DNN 10 should match these.
:root {
    --dnn-color-primary: #{map-get($colors, 'primary')};
    --dnn-color-primary-light: #{map-get($colors, 'primary-light')};
    --dnn-color-primary-dark: #{map-get($colors, 'primary-dark')};
    --dnn-color-primary-contrast: #{map-get($colors, 'primary-contrast')};
    --dnn-color-primary-r: #{map-get($colors, 'primary-r')};
    --dnn-color-primary-g: #{map-get($colors, 'primary-g')};
    --dnn-color-primary-b: #{map-get($colors, 'primary-b')};

    --dnn-color-secondary: #{map-get($colors, 'secondary')};
    --dnn-color-secondary-light: #{map-get($colors, 'secondary-light')};
    --dnn-color-secondary-dark: #{map-get($colors, 'secondary-dark')};
    --dnn-color-secondary-contrast: #{map-get($colors, 'secondary-contrast')};
    --dnn-color-secondary-r: #{map-get($colors, 'secondary-r')};
    --dnn-color-secondary-g: #{map-get($colors, 'secondary-g')};
    --dnn-color-secondary-b: #{map-get($colors, 'secondary-b')};

    --dnn-color-tertiary: #{map-get($colors, 'tertiary')};
    --dnn-color-tertiary-light: #{map-get($colors, 'tertiary-light')};
    --dnn-color-tertiary-dark: #{map-get($colors, 'tertiary-dark')};
    --dnn-color-tertiary-contrast: #{map-get($colors, 'tertiary-contrast')};
    --dnn-color-tertiary-r: #{map-get($colors, 'tertiary-r')};
    --dnn-color-tertiary-g: #{map-get($colors, 'tertiary-g')};
    --dnn-color-tertiary-b: #{map-get($colors, 'tertiary-b')};

    --dnn-color-neutral: #{map-get($colors, 'neutral')};
    --dnn-color-neutral-light: #{map-get($colors, 'neutral-light')};
    --dnn-color-neutral-dark: #{map-get($colors, 'neutral-dark')};
    --dnn-color-neutral-contrast: #{map-get($colors, 'neutral-contrast')};
    --dnn-color-neutral-r: #{map-get($colors, 'neutral-r')};
    --dnn-color-neutral-g: #{map-get($colors, 'neutral-g')};
    --dnn-color-neutral-b: #{map-get($colors, 'neutral-b')};

    --dnn-color-background: #{map-get($colors, 'background')};
    --dnn-color-background-light: #{map-get($colors, 'background-light')};
    --dnn-color-background-dark: #{map-get($colors, 'background-dark')};
    --dnn-color-background-contrast: #{map-get($colors, 'background-contrast')};
    --dnn-color-background-r: #{map-get($colors, 'background-r')};
    --dnn-color-background-g: #{map-get($colors, 'background-g')};
    --dnn-color-background-b: #{map-get($colors, 'background-b')};

    --dnn-color-foreground: #{map-get($colors, 'foreground')};
    --dnn-color-foreground-light: #{map-get($colors, 'foreground-light')};
    --dnn-color-foreground-dark: #{map-get($colors, 'foreground-dark')};
    --dnn-color-foreground-contrast: #{map-get($colors, 'foreground-contrast')};
    --dnn-color-foreground-r: #{map-get($colors, 'foreground-r')};
    --dnn-color-foreground-g: #{map-get($colors, 'foreground-g')};
    --dnn-color-foreground-b: #{map-get($colors, 'foreground-b')};

    --dnn-color-info: #{map-get($colors, 'info')};
    --dnn-color-info-light: #{map-get($colors, 'info-light')};
    --dnn-color-info-dark: #{map-get($colors, 'info-dark')};
    --dnn-color-info-contrast: #{map-get($colors, 'info-contrast')};
    --dnn-color-info-r: #{map-get($colors, 'info-r')};
    --dnn-color-info-g: #{map-get($colors, 'info-g')};
    --dnn-color-info-b: #{map-get($colors, 'info-b')};

    --dnn-color-success: #{map-get($colors, 'success')};
    --dnn-color-success-light: #{map-get($colors, 'success-light')};
    --dnn-color-success-dark: #{map-get($colors, 'success-dark')};
    --dnn-color-success-contrast: #{map-get($colors, 'success-contrast')};
    --dnn-color-success-r: #{map-get($colors, 'success-r')};
    --dnn-color-success-g: #{map-get($colors, 'success-g')};
    --dnn-color-success-b: #{map-get($colors, 'success-b')};

    --dnn-color-warning: #{map-get($colors, 'warning')};
    --dnn-color-warning-light: #{map-get($colors, 'warning-light')};
    --dnn-color-warning-dark: #{map-get($colors, 'warning-dark')};
    --dnn-color-warning-contrast: #{map-get($colors, 'warning-contrast')};
    --dnn-color-warning-r: #{map-get($colors, 'warning-r')};
    --dnn-color-warning-g: #{map-get($colors, 'warning-g')};
    --dnn-color-warning-b: #{map-get($colors, 'warning-b')};

    --dnn-color-danger: #{map-get($colors, 'danger')};
    --dnn-color-danger-light: #{map-get($colors, 'danger-light')};
    --dnn-color-danger-dark: #{map-get($colors, 'danger-dark')};
    --dnn-color-danger-contrast: #{map-get($colors, 'danger-contrast')};
    --dnn-color-danger-r: #{map-get($colors, 'danger-r')};
    --dnn-color-danger-g: #{map-get($colors, 'danger-g')};
    --dnn-color-danger-b: #{map-get($colors, 'danger-b')};
}

// Color function
@function color($color-name, $rgb: false) {
    @if($rgb) {
        @return var(--dnn-color-#{$color-name}-r) + ', ' + var(--dnn-color-#{$color-name}-g) + ', ' + var(--dnn-color-#{$color-name}-b);
    } @else {
        @return var(--dnn-color-#{$color-name}, map-get($colors, $color-name));
    }
}

Describe alternatives you've considered

n/a

Additional context

We'll need to determine whether or not we want to allow super users and/or admin to change colors within the new DNN 10 admin UI for managing colors, etc. Since the theme "wins" in the order of CSS loading, we'll either need to simply consume the CSS variables from DNN 10, or we will need to override them. Most likely we will simply consume them since the out-of-box DNN 10 experience will only allow super users the ability to change values of these CSS variables.