style: add "gap" to list of pxKeys in css theme (#195)

src/styles/readme.md

@@ -13,3 +13,4 @@ Then open the story `GetGlobalToken` to retrieve the latest global design token
 Then paste that into [GlobalTokens.json](https://github.com/mParticle/aquarium/blob/main/design/GlobalToken.json)
 
 These will then be converted into css variables on push, and committed via the [github action](https://github.com/mParticle/aquarium/blob/main/.github/workflows/tokens-to-css.yml)
+If you need these new tokens immediately for local development, run `npm run tokens-to-css`

src/utils/GetGlobalToken.tsx

@@ -12,7 +12,7 @@ export function GetGlobalToken(): React.ReactNode {
     return Object.fromEntries(
       Object.entries(obj)
         .map(([key, value]) => {
-          const pxKeys = ['padding', 'margin', 'borderRadius', 'screen', 'size', 'font', 'width', 'height']
+          const pxKeys = ['padding', 'margin', 'borderRadius', 'screen', 'size', 'font', 'width', 'height', 'gap']
           const excludePxKeys = ['lineHeight', 'fontWeight']
 
           const addPx =
@@ -40,4 +40,4 @@ export function GetGlobalToken(): React.ReactNode {
   const globalToken = wrapValuesInObject(getDesignToken(LightTheme))
 
   return <>{JSON.stringify(globalToken, null, 1)}</>
-}
+}