Add Colors to js #17

snedadah · 2022-06-18T20:30:53-04:00

snedadah commented

2022-06-18 20:30:53 -04:00

The global colors pr will have to be merged before this one.

After further investgation, the solutions that we planned on using (getComputedStyle(document.documentElement) .getPropertyValue(property);) did not end up working, because of some wierd issues with nextjs. However, luckly it seems we can still just use the css variables inside the js (I tried it out with Amy's bar graph demo and it seemed to work well).
Thus I created a typesafe helper, utils/Colors.ts , anytime you need a color, you can use this object, eg.

import { Colors } from "utils/Colors";
<Text fill={Colors.primaryBackground}> ... </Text>

And importantly the Colors is typesafe so you can get autocomplete once you do Colors. :) (Protip: press Cntrl + Space if you want autocomplete to pop up when it isnt coming)

The global colors pr will have to be merged before this one. After further investgation, the solutions that we planned on using (`getComputedStyle(document.documentElement) .getPropertyValue(property);`) did not end up working, because of some wierd issues with nextjs. However, luckly it seems we can still just use the css variables inside the js (I tried it out with Amy's bar graph demo and it seemed to work well). Thus I created a typesafe helper, utils/Colors.ts , anytime you need a color, you can use this object, eg. import { Colors } from "utils/Colors"; <Text fill={Colors.primaryBackground}> ... </Text> And importantly the Colors is typesafe so you can get autocomplete once you do Colors. :) (Protip: press Cntrl + Space if you want autocomplete to pop up when it isnt coming)

snedadah closed this pull request

2022-06-18 20:31:18 -04:00