DLS: Refactor Calendar color code in DLS to line up with code in CMS

[lalov1]

DLS:

<style type="text/css">#calendars #trigger-orange-a11y span {background-color: #9D360F;}#calendars #trigger-orange-a11y span {background-color: #9D360F;}.orange-a11y .fc-event-skin,.fc-agenda .orange-a11y .fc-event-time,.fc-event-dot.orange-a11y,.label.orange-a11y,tr.orange-a11y .fc-event-dot,a.orange-a11y {border-color: #9D360F;background-color: #9D360F;color: white !important;}.fc-view-month .orange-a11y.fixedtime,.fc-view-month .orange-a11y.fixedtime .fc-event-skin,.fc-view-month .fc-agenda .orange-a11y.fixedtime .fc-event-time,.fc-view-month .orange-a11y.fixedtime a {border-color: transparent;background-color: transparent;color: #9D360F !important;}.fc-list-item.orange-a11y {display: table-row !important;}.orange-a11y-off {display: none;}#calendars #trigger-blue span {background-color: #0C2340;}#calendars #trigger-blue span {background-color: #0C2340;}.blue .fc-event-skin,.fc-agenda .blue .fc-event-time,.fc-event-dot.blue,.label.blue,tr.blue .fc-event-dot,a.blue {border-color: #0C2340;background-color: #0C2340;color: white !important;}.fc-view-month .blue.fixedtime,.fc-view-month .blue.fixedtime .fc-event-skin,.fc-view-month .fc-agenda .blue.fixedtime .fc-event-time,.fc-view-month .blue.fixedtime a {border-color: transparent;background-color: transparent;color: #0C2340 !important;}.fc-list-item.blue {display: table-row !important;}.blue-off {display: none;}#calendars #trigger-grey-1 span {background-color: #DBDEE3;}#calendars #trigger-grey-1 span {background-color: #DBDEE3;}.grey-1 .fc-event-skin,.fc-agenda .grey-1 .fc-event-time,.fc-event-dot.grey-1,.label.grey-1,tr.grey-1 .fc-event-dot,a.grey-1 {border-color: #DBDEE3;background-color: #DBDEE3;color: black !important;}.fc-view-month .grey-1.fixedtime,.fc-view-month .grey-1.fixedtime .fc-event-skin,.fc-view-month .fc-agenda .grey-1.fixedtime .fc-event-time,.fc-view-month .grey-1.fixedtime a {border-color: transparent;background-color: transparent;color: #DBDEE3 !important;}.fc-list-item.grey-1 {display: table-row !important;}.grey-1-off {display: none;}#calendars #trigger-grey-3 span {background-color: #606060;}#calendars #trigger-grey-3 span {background-color: #606060;}.grey-3 .fc-event-skin,.fc-agenda .grey-3 .fc-event-time,.fc-event-dot.grey-3,.label.grey-3,tr.grey-3 .fc-event-dot,a.grey-3 {border-color: #606060;background-color: #606060;color: white !important;}.fc-view-month .grey-3.fixedtime,.fc-view-month .grey-3.fixedtime .fc-event-skin,.fc-view-month .fc-agenda .grey-3.fixedtime .fc-event-time,.fc-view-month .grey-3.fixedtime a {border-color: transparent;background-color: transparent;color: #606060 !important;}.fc-list-item.grey-3 {display: table-row !important;}.grey-3-off {display: none;}#calendars #trigger-blue-2 span {background-color: #495970;}#calendars #trigger-blue-2 span {background-color: #495970;}.blue-2 .fc-event-skin,.fc-agenda .blue-2 .fc-event-time,.fc-event-dot.blue-2,.label.blue-2,tr.blue-2 .fc-event-dot,a.blue-2 {border-color: #495970;background-color: #495970;color: white !important;}.fc-view-month .blue-2.fixedtime,.fc-view-month .blue-2.fixedtime .fc-event-skin,.fc-view-month .fc-agenda .blue-2.fixedtime .fc-event-time,.fc-view-month .blue-2.fixedtime a {border-color: transparent;background-color: transparent;color: #495970 !important;}.fc-list-item.blue-2 {display: table-row !important;}.blue-2-off {display: none;}#calendar .orange-a11y,#calendar .blue,#calendar .grey-1,#calendar .grey-3,#calendar .blue-2 { display: block; }</style>

CMS:

## Import common string helpers
#import ("/_cms/formats/calendar/include/helpers")

#set ($colorMappings = $_XPathTool.selectNodes($contentRoot, "//system-data-structure[contains(@definition-path,'Color Mapping')]/category"))

#set ($categoriesMap = []) ## Create a hash of the selected categories and associated information.
#set ($mappingSize = $_MathTool.sub($colorMappings.size(),1))
#foreach ($i in [0..$mappingSize])
    #set ($category = $colorMappings.get($_MathTool.sub($mappingSize,$i)))
    #set ($classname = $category.getChild("classname").value.replaceAll(" ", "_"))
    #if ($classname == "") ## If there was no classname supplied, use the category name
        #set ($classname = $calCat.value.replaceAll(" ", "_"))
    #end
    #set ($csscolor = $category.getChild("csscolor").value)
    #set ($textcolor = $category.getChild("textcolor").value)
    #set ($_void = $categoriesMap.add({"name":"${calCat.value}", "classname":"${classname}", "csscolor":"${csscolor}", "textcolor":"${textcolor}"}))
#end

## Output the styles for each category, based on the category map included with the page.
#if ($categoriesMap.size() > 0)
    #set ($categoryCSS = "#outputCategoryCSS($categoriesMap)")
    ${categoryCSS.replaceAll($trimSpacingRegExp, "")}
#end

#*
    Outputs the CSS styles for categories present within the provided color mapping SD Block.

    @param  $categories ArrayList of categorie information
*#
#macro (outputCategoryCSS $categories)
    <style type="text/css">
    #set ($categoryClasses = [])
    #foreach ($cat in $categories)
        #set ($classname = $cat.get("classname"))
        #set ($csscolor = $cat.get("csscolor"))
        #set ($textcolor = $cat.get("textcolor"))
        #set ($_void = $categoryClasses.add("#calendar .${classname}"))
        #calendars #trigger-${classname} span {
            background-color: ${csscolor};
        }
        
        #calendars #trigger-${classname} span {
            background-color: ${csscolor};
        }
        
        .${classname} .fc-event-skin,
        .fc-agenda .${classname} .fc-event-time,
        .fc-event-dot.${classname},
        .label.${classname},
        tr.${classname} .fc-event-dot,
        a.${classname} {
            border-color: ${csscolor};
            background-color: ${csscolor};
            color: ${textcolor} !important;
        }
        
        .fc-view-month .${classname}.fixedtime,
        .fc-view-month .${classname}.fixedtime .fc-event-skin,
        .fc-view-month .fc-agenda .${classname}.fixedtime .fc-event-time,
        .fc-view-month .${classname}.fixedtime a {
            border-color: transparent;
            background-color: transparent;
            color: ${csscolor} !important;
        }
        
        .fc-list-item.${classname} {
            display: table-row !important;
        }
        
        .${classname}-off {
            display: none;
        }
        
        
    #end
    ${_DisplayTool.list($categoryClasses,",")} { display: block; }
    </style>
#end