Improve macro handling

src/view/nova/lib/__tests__/theme.test.ts

@@ -20,6 +20,9 @@ const theme = createTheme({
   },
   macros: {
     caps: (_: boolean) => ({textTransform: 'uppercase'}),
+    column: (span: boolean | number) => ({
+      flex: typeof span === 'number' ? span : 1,
+    }),
   },
   breakpoints: {
     gtPhone: 640,
@@ -139,6 +142,17 @@ describe('macros', () => {
 
     expect(styles).toEqual({})
   })
+
+  test('custom', () => {
+    const {styles} = theme.style(
+      {
+        column: 2,
+      },
+      [],
+    )
+
+    expect(styles).toEqual({flex: 2})
+  })
 })
 
 describe('breakpoints', () => {

src/view/nova/lib/theme.ts

@@ -344,7 +344,7 @@ export const createTheme = <
         styles = {
           ...styles,
           // @ts-ignore no index sig, it's fine
-          ...(rawProps[prop] === true ? macros[prop](value, tokens) : {}),
+          ...(rawProps[prop] !== false ? macros[prop](value, tokens) : {}),
         }
       } else if (breakpoints[prop]) {
         for (const b of Object.keys(breakpoints)) {

src/view/nova/themes.ts

@@ -132,7 +132,9 @@ export const light = createTheme({
      *   </Box>
      * </Box>
      */
-    column: (_: boolean) => ({flex: 1}),
+    column: (span: boolean | number) => ({
+      flex: typeof span === 'number' ? span : 1,
+    }),
     /** Shorthand for `position: 'absolute'` */
     abs: (_: boolean) => ({position: 'absolute'}),
     /** Shorthand for `StyleSheet.absoluteFillObject` */

src/view/screens/Debug.tsx

@@ -139,7 +139,7 @@ export function DebugScreen() {
 
               <Box row gap="s">
                 <Box column pa="s" bg="l6" debug />
-                <Box column pa="s" bg="l6" debug flex={2} />
+                <Box column={2} pa="s" bg="l6" debug />
                 <Box column pa="s" bg="l6" />
               </Box>
             </Box>