// RIVER Design-System - Defaults: Colors //

// Define design colors used in the design system here.
// For each color you can define the full map manually, or ask the design system for a default scale via design-color-build-scale(...).
// Color maps may include a range (eg, 500: blue, 600: darkblue, ...), and references (eg, 'normal' = 500, 'title' = 'normal', ...).

// Design Map for Color
@if(design-setting('defaults')
    // Output color defaults if maps are enabled, or 'colors' has been whitelisted
    and (
        design-setting('defaults.maps', false) == true
        or list-contains(design-setting('defaults.maps'), 'colors')
    )
) {
    $design-map-colors: (
        // Whether to output this map as CSS Variables; options include: false (default), true
        '_variables':       true,

        'base':             white,
        'reverse':          #040F20,

        'primary': (
            // Range
            900:            #021C50,
            800:            #07296B,
            700:            #0A3786,
            600:            #0F479F,
            500:            #1658B7,
            400:            #3D78C7,
            300:            #6697D5,
            200:            #8FB6E2,
            100:            #BAD3EE,
            50:             #E6F0F9,
            // References
            'dark':         600,
            'title':        600,
            'normal':       500,
            'light':        400,
            'border':       400,
            'bg':           100,
            'alpha':        rgba(#1658B7, 0.5),
        ),
        // 'primary':        design-color-build-scale(slateblue, ('normal': 500)),

        'gray': (
            // Range
            900:            #1D1D1F,
            800:            #35363A,
            700:            #424349,
            600:            #606268,
            500:            #84858B,
            400:            #A7A9AC,
            300:            #CBCCCE,
            200:            #DFDFE1,
            100:            #EFEFF0,
            50:             #F8F8F9,
            // References
            'dark':         700,
            'title':        700,
            'normal':       600,
            'light':        400,
            'border':       400,
            'bg':           100,
            'alpha':        rgba(#606268, 0.5),
        ),
        // 'gray':            design-color-build-scale(slategray, ('normal': 600)),

        // Helpers
        // 'white':            white,
        // 'gray':             slategray,
        // 'black':            black,
        // 'transparent':      transparent,
        // 'current':          currentColor,
        // 'inherit':          inherit,
    ) !default;

    // Apply the map
    $design-map: design-map-set('colors', $design-map-colors);

}

// To update the map, you can use any of:
// design-map-set('colors', (...)); design-map-update('colors', (...)); design-map-deep-update('colors', (...))