Colors You can use the colors from this module in either SCSS files or JS files. To use all the SCSS variables, import the vars.scss file from this libaray. In JavaScript you can import the color object which breaks down by category. Check the reference below for color names in both languages.
/* ---- SCSS ---- */
@ import "~@politico/interactive-style/vars.scss" ;
p {
color : $politico - red ;
}
/* ---- JavaScript ---- */
import { COLORS } from '@politico/interactive-style' ;
< p style = { { color : COLORS . BRAND . POLITICO_RED } } > POLITICO </ p >
Brand Colors (COLORS.BRAND.X) JavaScript SCSS Value POLITICO_RED $politico-red #DC0228 POLITICO_DARK_RED $politico-dark-red #AC0825 POLITICO_LIGHT_BACKGROUND $politico-light-background #F4F5F7 POLITICO_LINE $politico-line #E5E7EB POLITICO_LIGHT_GRAY_TYPE $politico-light-gray-type #B1B4BD POLITICO_DARK_GRAY_TYPE $politico-dark-gray-type #6E7381 POLITICO_BLACK $politico-black #282D40 POLITICO_MAGAZINE $politico-magazine #121522 POLITICO_BLUE $politico-blue #007BC7 POLITICO_ORANGE $politico-orange #F86F00 POLITICO_LIGHT_GRAY $politico-light-gray #E5E7EB POLITICO_MEDIUM_GRAY $politico-medium-gray #6E7381 POLITICO_DARK_GRAY $politico-dark-gray #666 POLITICO_ALT_BLACK $politico-alt-black #282828
Base Colors (COLORS.BASE.X) JavaScript SCSS Value TRANSPARENT $transparent transparent BLACK $black #000000 SATAN $satan #666 WHITE $white #FFFFFF GRAY $gray #B1B4BD LIGHT_GRAY $light-gray #E5E7EB DARK_GRAY $dark-gray #666 MEDIUM_GRAY $medium-gray #6E7381 MIDNIGHT $midnight #312B41 POSITIVE $positive #75CCCA NEGATIVE $negative #EF8B67 YES $yes #75CCCA NO $no #EF8B67 FACEBOOK $facebook #3B5998 TWITTER $twitter #00ACED MAIL $mail #6E7381 LINK $link #007BC7 LINK_HOVER $link-hover #0E9AF3 BUTTON $button #E5E7EB ANNOTATION $annotation #FFF1DF ANNOTATION_HOVER $annotation-hover #FFF9F1 HIGHLIGHTER_YELLOW $highlighter-yellow #FFFAB7 HIGHLIGHTER_ORANGE $highlighter-orange #F9D289
Election Colors (COLORS.ELECTIONS.X) JavaScript SCSS Value DEM $dem #3571C0 DEM_LIGHT $dem-light #9AD3FC GOP $gop #FE5C40 GOP_LIGHT $gop-light #FFB2CB DEM1 $dem1 #3571C0 DEM2 $dem2 #D9C3A5 DEM3 $dem3 #8998AB DEM4 $dem4 #9AD3FC DEM5 $dem5 #C3F4CD DEM6 $dem6 #5DAED4 DEM7 $dem7 #8ABDC0 DEM8 $dem8 #775180 DEM9 $dem9 #FFD682 DEM10 $dem10 #948064 GOP1 $gop1 #FE5C40 GOP2 $gop2 #B8948E GOP3 $gop3 #FBA723 GOP4 $gop4 #FFB2CB GOP5 $gop5 #B41E61 GOP6 $gop6 #433E76 GOP7 $gop7 #AC5141 GOP8 $gop8 #7957B4 GOP9 $gop9 #FEE0C2 GOP10 $gop10 #FD87F7 DEM_GOP1 $dem-gop1 #3571C0 DEM_GOP2 $dem-gop2 #7392D0 DEM_GOP3 $dem-gop3 #A4B5E0 DEM_GOP4 $dem-gop4 #D2D9F0 GOP_DEM4 $gop-dem4 #FFD8CD GOP_DEM3 $gop-dem3 #FFB19C GOP_DEM2 $gop-dem2 #FF896D GOP_DEM1 $gop-dem1 #FE5C40 TEAL $teal #6BD1BB
Democrat Colors (COLORS.ELECTIONS.DEM_ALTS[X])
Republican Colors (COLORS.ELECTIONS.GOP_ALTS[X])
Dem To GOP Ramp (COLORS.ELECTIONS.DEM_TO_GOP[X])
Diverging Color Scale (COLORS.DIVERGING.X) JavaScript SCSS Value TEAL1 $teal1 #196B66 TEAL2 $teal2 #218C86 TEAL3 $teal3 #26B1AA TEAL4 $teal4 #8CD1CE TEAL5 $teal5 #BCDEDD DIRT_TEAL $dirt-teal #E9F0EC DIRT5 $dirt5 #D2D3C4 DIRT4 $dirt4 #BBA88F DIRT3 $dirt3 #9E7A4C DIRT2 $dirt2 #784C11 DIRT1 $dirt1 #5D3B0F MOSS1 $moss1 #959632 MOSS2 $moss2 #A8A74E MOSS3 $moss3 #A8A74E MOSS4 $moss4 #CFCB83 MOSS5 $moss5 #E3DD9E SAPPHIRE_MOSS $sapphire-moss #F6F0B9 SAPPHIRE5 $sapphire5 #D6D2BD SAPPHIRE4 $sapphire4 #B4B5C0 SAPPHIRE3 $sapphire3 #909AC2 SAPPHIRE2 $sapphire2 #667FC3 SAPPHIRE1 $sapphire1 #2166C3
Teal To Dirt Ramp (COLORS.DIVERGING.TEAL_TO_DIRT[X])
Moss To Sapphire Ramp (COLORS.DIVERGING.MOSS_TO_SAPPHIRE[X])
Qualitative Color Scale (COLORS.QUALITATIVE.X) JavaScript SCSS Value Q4_AQUA $q4-aqua #4FC1E7 Q4_GREEN $q4-green #6BAE80 Q4_GRAY $q4-gray #3D284D Q4_PURPLE $q4-purple #694ED6 Q6_TEAL $q6-teal #0D3C73 Q6_DARKBLUE $q6-darkblue #329CAC Q6_AQUA $q6-aqua #47BEF8 Q6_ORANGE $q6-orange #F95100 Q6_GOLD $q6-gold #F7A12D Q6_DIRT $q6-dirt #AB9F8F Q7_GRAY $q7-gray #3D284D Q7_BLUE $q7-blue #2F6CBA Q7_GREEN $q7-green #88C2B2 Q7_PEACH $q7-peach #FFCAB3 Q7_CAMEL $q7-camel #DFA486 Q7_RED $q7-red #BD3232 Q7_YELLOW $q7-yellow #EBEB35 QP_GRAY $qp-gray #3D284D QP_LIGHTGRAY $qp-lightgray #8E8E98 QP_PURPLE $qp-purple #7C7CE0 QP_LIGHTPURPLE $qp-lightpurple #9D9DEA QP_GREEN $qp-green #9B9B52 QP_LIGHTGREEN $qp-lightgreen #C6C677
4-Item Qualitative Scale (COLORS.QUALITATIVE.Q4.X) JavaScript Value AQUA #4FC1E7 GREEN #6BAE80 GRAY #3D284D PURPLE #694ED6
6-Item Qualitative Scale (COLORS.QUALITATIVE.Q6.X) JavaScript Value TEAL #0D3C73 DARKBLUE #329CAC AQUA #47BEF8 ORANGE #F95100 GOLD #F7A12D DIRT #AB9F8F
7-Item Qualitative Scale (COLORS.QUALITATIVE.Q7.X) JavaScript Value GRAY #3D284D BLUE #2F6CBA GREEN #88C2B2 PEACH #FFCAB3 CAMEL #DFA486 RED #BD3232 YELLOW #EBEB35
Sequential Color Scale (COLORS.SEQUENTIAL.X) JavaScript SCSS Value MONEY_FOAM1 $money-foam1 #46825A MONEY_FOAM2 $money-foam2 #5D926D MONEY_FOAM3 $money-foam3 #73A281 MONEY_FOAM4 $money-foam4 #88B395 MONEY_FOAM5 $money-foam5 #9FC4AA MONEY_FOAM6 $money-foam6 #B6D4BF MONEY_FOAM7 $money-foam7 #CCE6D5 MONEY_FOAM8 $money-foam8 #E4F7EB SANGRIA_PEACH1 $sangria-peach1 #7A0001 SANGRIA_PEACH2 $sangria-peach2 #972516 SANGRIA_PEACH3 $sangria-peach3 #B2422C SANGRIA_PEACH4 $sangria-peach4 #CC5F44 SANGRIA_PEACH5 $sangria-peach5 #E37E61 SANGRIA_PEACH6 $sangria-peach6 #F59E82 SANGRIA_PEACH7 $sangria-peach7 #FFC1AA SANGRIA_PEACH8 $sangria-peach8 #FFE5D8 RED_YELLOW1 $red-yellow1 #E53516 RED_YELLOW2 $red-yellow2 #EC5624 RED_YELLOW3 $red-yellow3 #F17233 RED_YELLOW4 $red-yellow4 #F68A41 RED_YELLOW5 $red-yellow5 #FAA050 RED_YELLOW6 $red-yellow6 #FDB75F RED_YELLOW7 $red-yellow7 #FECD6F RED_YELLOW8 $red-yellow8 #FFE37E
Money To Foam Ramp (COLORS.SEQUENTIAL.MONEY_TO_FOAM[X])
Sangria To Peach Ramp (COLORS.SEQUENTIAL.SANGRIA_TO_PEACH[X])
Red To Yellow Ramp (COLORS.SEQUENTIAL.RED_TO_YELLOW[X])