Data Viz and Sequential CSS Variables

Can anyone tell me where the Perspective theme CSS variables “Data Viz: Qualitative”, “Data Viz: Diverging” and “Sequential” are used? When I search through the built in Perspective “Light” theme I can see heavy use of the “Neutrals” variables, but not these others.

/* Sequential */
--seq-1: #AE74E8; /* purple-50 */
--seq-2: #9659D6; /* purple-60 */
--seq-3: #7D3CBD; /* purple-70 */
--seq-4: #642B9E; /* purple-80 */
--seq-5: #4B2175; /* purple-90 */
--seq-6: #371C52; /* purple-100 */

/* Data Viz: Diverging */
--div-1: #642B9E; /* purple-80 */
--div-2: #7D3CBD; /* purple-70 */
--div-3: #9656D6; /* purple-60 */
--div-4: #AE74E8; /* purple-50 */
--div-5: #C79BF2; /* purple-40 */
--div-6: #DABCF7; /* purple-30 */
--div-7: #EAD9FA; /* purple-20 */
--div-8: #F5F0FA; /* purple-10 */
--div-9: #D7FAF8; /* teal-10 */
--div-10: #83F2EB; /* teal-20 */
--div-11: #43DED3; /* teal-30 */
--div-12: #21C2B7; /* teal-40 */
--div-13: #0EA197; /* teal-50 */
--div-14: #08827A; /* teal-60 */
--div-15: #086962; /* teal-70 */
--div-16: #09524D; /* teal-80 */


/* Data Viz: Qualitative */
--qual-1: #7D3CBD; /* purple-70 */
--qual-2: #229AD6; /* primary-50 */
--qual-3: #086962; /* teal-70 */
--qual-4: #B01355; /* magenta-70 */
--qual-5: #F55353; /* red-50 */
--qual-6: #661414; /* red-90 */
--qual-7: #038537; /* green-60 */
--qual-8: #114599; /* blue-80 */
--qual-9: #ED5393; /* magenta-50 */
--qual-10: #CF7911; /* bronze-50 */

For a little more context to my question, I’m interested in creating a standard set of colors for Perspective Chart components and thought I could make use of these existing variables somehow.

1 Like