{{~ it.colors : color }} .fill-{{=color.name}} { background-color: {{=color.hexValue}} !important; } .border-{{=color.name}} { border-color: {{=color.hexValue}} !important; } .fill-{{=color.name}} .widgetContent .fillColorBackground { background-color: {{=color.hexValue}} !important; } .fill-{{=color.name}} .fill-transparent.widget .widgetContent .userPrimaryFGPaletteColor *, .fill-{{=color.name}} .fill-transparent.widget .widgetContent .userPrimaryGridFGPaletteColor *:not(.edge):not(.summary):not(.implied_selection):not(.selected), .fill-{{=color.name}}.widget .widgetContent .userPrimaryFGPaletteColor *, .fill-{{=color.name}}.widget .widgetContent .userPrimaryGridFGPaletteColor *:not(.edge):not(.summary):not(.implied_selection):not(.selected) { color: {{=it.foregroundColors[color.name]}}; } .fill-{{=color.name}} .fill-transparent.widget .widgetContent .kpi-widget-value .labeled-value-label, .fill-{{=color.name}}.widget .widgetContent .kpi-widget-value .labeled-value-label { color: {{=it.kpiLabelColors[color.name]}}; } .fill-{{=color.name}} .fill-transparent.widget .widgetContent .kpi-widget-value .labeled-value-value, .fill-{{=color.name}}.widget .widgetContent .kpi-widget-value .labeled-value-value { color: {{=it.kpiValueColors[color.name]}}; } .fill-{{=color.name}} .fill-transparent.widget .widgetContent .kpi-widget .kpi-widget-sparkline.defaultColors svg .line, .fill-{{=color.name}}.widget .widgetContent .kpi-widget .kpi-widget-sparkline.defaultColors svg .line { stroke: {{=it.kpiValueColors[color.name]}} !important; } .fill-{{=color.name}} .fill-transparent.widget .widgetContent .infographic-widget .infographic-content.colorFill svg, .fill-{{=color.name}}.widget .widgetContent .infographic-widget .infographic-content.colorFill svg { fill: {{=it.kpiValueColors[color.name]}}; } .fill-{{=color.name}} .fill-transparent.widget .widgetContent .infographic-widget .infographic-content.colorStroke svg, .fill-{{=color.name}}.widget .widgetContent .infographic-widget .infographic-content.colorStroke svg { stroke: {{=it.kpiValueColors[color.name]}}; } .fill-{{=color.name}}.widget .widgetContent .dataplayer-view.userPrimaryFGPaletteColor .sliderTickForHorizontal .tick{ background-color: {{=it.dataPlayerColors[color.name]}}; } .fill-{{=color.name}}.widget .widgetContent .dataplayer-view.userPrimaryFGPaletteColor .sliderLabel{ color: {{=it.dataPlayerColors[color.name]}}; } .fill-{{=color.name}}.widget .widgetContent .dataplayer-view.userPrimaryFGPaletteColor .sliderNode{ fill: {{=it.dataPlayerColors[color.name]}}; } .fill-{{=color.name}}.widget .widgetContent .dataplayer-view.userPrimaryFGPaletteColor .sliderBarHorizontal{ background-color: {{=it.dataPlayerColors[color.name]}}; } .fill-{{=color.name}}.widget .widgetContent .dataplayer-view.userPrimaryFGPaletteColor .playOrPause *{ fill: {{=it.dataPlayerColors[color.name]}}; } .fill-{{=color.name}} .relativeLayoutGrid{ stroke: {{=it.gridColors[color.name]}} !important; } .fill-{{=color.name}} .absoluteLayoutGrid{ background-image: repeating-linear-gradient(0deg, {{=it.gridColors[color.name]}}, {{=it.gridColors[color.name]}} 1px, transparent 1px, transparent 100%),repeating-linear-gradient(-90deg, {{=it.gridColors[color.name]}}, {{=it.gridColors[color.name]}} 1px, transparent 1px, transparent 100%) !important; } {{~}}