// Ripple Design Map - Notifications //

// Define design colors for notifications used in the design system here.
// Color maps may include a range (eg, 500: blue, 600: darkblue, ...), and references (eg, 'normal' = 500, 'title' = 'normal', ...).

// Design Map for Notification Colours
$design-map-notifications: (
    '_variables':       false, // DON'T Output this map as CSS Variables

    'success': (
        // Range
        700:            #5DA176,
        500:            #57BC8A,
        300:            #DEF8E7,
        // References
        'text':         700,
        'normal':       500,
        'border':       500,
        'bg':           300,
    ),

    'info': (
        // Range
        700:            #3A61D8,
        500:            #4B72E6,
        300:            #E1E7FE,
        // References
        'text':         700,
        'normal':       500,
        'border':       500,
        'bg':           300,
    ),

    'warning': (
        // Range
        700:            #D1903C,
        500:            #E8B44E,
        300:            #F8F0E4,
        // References
        'text':         700,
        'normal':       500,
        'border':       500,
        'bg':           300,
    ),

    'error': (
        // Range
        700:            #CC2A2B,
        500:            #DC4B4A,
        300:            #FBE1E1,
        // References
        'text':         700,
        'normal':       500,
        'border':       500,
        'bg':           300,
    ),

) !default;

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