graycoreio/daffodil

View on GitHub
libs/design/scss/theming/_configure-theme.scss

Summary

Maintainability
Test Coverage
@use 'sass:map';
@use 'configure-palette';
@use 'color-palettes' as palette;
@use 'get-color';

$daff-light-theme: (
    'font-color': get-color.daff-color(palette.$daff-neutral, 110),
    'base': get-color.daff-color(palette.$daff-neutral, 0),
    'base-contrast': get-color.daff-color(palette.$daff-neutral, 110),
    'white': get-color.daff-color(palette.$daff-neutral, 0),
    'black': get-color.daff-color(palette.$daff-neutral, 110),
    'neutral': configure-palette.daff-configure-palette(palette.$daff-neutral, 60),
);

$daff-dark-theme: (
    'font-color': get-color.daff-color(palette.$daff-neutral, 0),
    'base': get-color.daff-color(palette.$daff-neutral, 100),
    'base-contrast': get-color.daff-color(palette.$daff-neutral, 0),
    'white': get-color.daff-color(palette.$daff-neutral, 0),
    'black': get-color.daff-color(palette.$daff-neutral, 110),
    'neutral': configure-palette.daff-configure-palette(palette.$daff-neutral, 50),
);

$supported-theme-types: (
    'light': $daff-light-theme,
    'dark': $daff-dark-theme
);


// @docs
//
// Create a theme object given some initial settings.
// Sets light and dark mode defaults for `$info`, `$warn`, `$critical`, and `$success`
// that can be overriden by using the `daff-configure-theme-status` function.
//
// @usage
// ```
// $primary: configure-palette.daff-configure-palette(palette.$daff-blue, 60);
// $secondary: configure-palette.daff-configure-palette(palette.$daff-purple, 60);
// $tertiary: configure-palette.daff-configure-palette(palette.$daff-turquoise, 60);
// 
// $theme: daff-configure-theme($primary, $secondary, $tertiary)
// ```
@function daff-configure-theme(
    $primary,
    $secondary,
    $tertiary,
    $type: 'light'
) {
    $info: null;
    $warn: null;
    $critical: null;
    $success: null;

    @if($type == 'dark') {
        $info: configure-palette.daff-configure-palette(palette.$daff-neutral, 50);
        $warn: configure-palette.daff-configure-palette(palette.$daff-bronze, 50);
        $critical: configure-palette.daff-configure-palette(palette.$daff-red, 50);
        $success: configure-palette.daff-configure-palette(palette.$daff-green, 50);
    }
    @if($type == 'light') {
        $info: configure-palette.daff-configure-palette(palette.$daff-neutral, 60);
        $warn: configure-palette.daff-configure-palette(palette.$daff-bronze, 60);
        $critical: configure-palette.daff-configure-palette(palette.$daff-red, 60);
        $success: configure-palette.daff-configure-palette(palette.$daff-green, 60);
    }

    @return (
        'primary': $primary,
        'secondary': $secondary,
        'tertiary': $tertiary,
        'informational': $info,
        'warn':  $warn,
        'critical': $critical,
        'success': $success,
        'core': daff-build-theme-core($type)
    );
}

// @docs
//
// Create a status theme object given some initial settings.
//
// @usage
// ```
// $info: configure-palette.daff-configure-palette(palette.$daff-blue, 60);
// $warn: configure-palette.daff-configure-palette(palette.$daff-bronze, 60);
// $critical: configure-palette.daff-configure-palette(palette.$daff-red, 60);
// $success: configure-palette.daff-configure-palette(palette.$daff-green, 60);
// 
// $theme: daff-configure-theme-status($info, $warn, $critical, $success);
// ```
@function daff-configure-theme-status(
    $theme,
    $warn,
    $critical,
    $success,
    $info,
) {
    @debug $theme;
    @return map.merge($theme, (
        'warn':  $warn,
        'critical': $critical,
        'success': $success,
        'informational': $info,
    ));
}

//
// @docs
//
// Create a core theme given a theme type
// $type | ThemeType : "light" | "dark"
//
// ```
// @usage
// daff-build-theme-core("light")
// ```
@function daff-build-theme-core($type: 'light') {
    $error-msg: 'is not a valid theme type - valid types:';
    @if (not map.has-key($supported-theme-types, $type)) {
        @error '`#{$type}` `#{$error-msg}` `#{map-keys($supported-theme-types)}`';
    }

    @return map.get($supported-theme-types, $type);
}