@utilitywarehouse/hearth-react-native 0.2.0 → 0.3.0

package/src/core/themes.ts

@@ -36,6 +36,42 @@ const shared = {
     '4/6': '66.666%',
     '5/6': '83.333%',
     full: '100%' as DimensionValue,
+    none: 0,
+    '2xs': {
+      base: layout.mobile.spacing['2xs'],
+      md: layout.tablet.spacing['2xs'],
+      lg: layout.desktop.spacing['2xs'],
+    },
+    xs: {
+      base: layout.mobile.spacing.xs,
+      md: layout.tablet.spacing.xs,
+      lg: layout.desktop.spacing.xs,
+    },
+    sm: {
+      base: layout.mobile.spacing.sm,
+      md: layout.tablet.spacing.sm,
+      lg: layout.desktop.spacing.sm,
+    },
+    md: {
+      base: layout.mobile.spacing.md,
+      md: layout.tablet.spacing.md,
+      lg: layout.desktop.spacing.md,
+    },
+    lg: {
+      base: layout.mobile.spacing.lg,
+      md: layout.tablet.spacing.lg,
+      lg: layout.desktop.spacing.lg,
+    },
+    xl: {
+      base: layout.mobile.spacing.xl,
+      md: layout.tablet.spacing.xl,
+      lg: layout.desktop.spacing.xl,
+    },
+    '2xl': {
+      base: layout.mobile.spacing['2xl'],
+      md: layout.tablet.spacing['2xl'],
+      lg: layout.desktop.spacing['2xl'],
+    },
   },
   borderWidth,
   borderRadius,
@@ -169,7 +205,20 @@ const shared = {
         },
       },
       space: {
-        none: {},
+        none: {
+          gap: {
+            base: layout.mobile.spacing.none,
+            md: layout.tablet.spacing.none,
+            lg: layout.desktop.spacing.none,
+          },
+        },
+        '2xs': {
+          gap: {
+            base: layout.mobile.spacing['2xs'],
+            md: layout.tablet.spacing['2xs'],
+            lg: layout.desktop.spacing['2xs'],
+          },
+        },
         xs: {
           gap: {
             base: layout.mobile.spacing.xs,
@@ -205,6 +254,13 @@ const shared = {
             lg: layout.desktop.spacing.xl,
           },
         },
+        '2xl': {
+          gap: {
+            base: layout.mobile.spacing['2xl'],
+            md: layout.tablet.spacing['2xl'],
+            lg: layout.desktop.spacing['2xl'],
+          },
+        },
       },
     },
   },

package/src/tokens/color.ts

@@ -243,55 +243,55 @@ export const light = {
     danger: {
       border: '#de2612',
       foreground: {
-        default: '#fcfbf2',
+        default: '#101010',
         subtle: '#de2612',
       },
       surface: {
-        default: '#de2612',
-        subtle: '#ffccc5',
+        default: '#ff634a',
+        subtle: '#ffa89d',
       },
     },
     functional: {
-      border: '#888888',
+      border: '#5b5b5b',
       foreground: {
-        default: '#fcfbf2',
-        subtle: '#888888',
+        default: '#101010',
+        subtle: '#5b5b5b',
       },
       surface: {
-        default: '#888888',
+        default: '#919191',
         subtle: '#d3d3d3',
       },
     },
     info: {
       border: '#1c6cd4',
       foreground: {
-        default: '#fcfbf2',
+        default: '#101010',
         subtle: '#1c6cd4',
       },
       surface: {
-        default: '#1c6cd4',
+        default: '#6bb0ff',
         subtle: '#bcddff',
       },
     },
     positive: {
       border: '#0f834a',
       foreground: {
-        default: '#fcfbf2',
+        default: '#101010',
         subtle: '#0f834a',
       },
       surface: {
-        default: '#0f834a',
+        default: '#36bf7d',
         subtle: '#a2e2c3',
       },
     },
     warning: {
       border: '#be5400',
       foreground: {
-        default: '#fcfbf2',
+        default: '#101010',
         subtle: '#be5400',
       },
       surface: {
-        default: '#be5400',
+        default: '#ff8010',
         subtle: '#ffcca8',
       },
     },
@@ -364,14 +364,14 @@ export const light = {
     },
     functional: {
       border: {
+        inverted: '#f7f7f7',
         strong: '#101010',
         subtle: '#101010',
-        inverted: '#f7f7f7',
       },
       foreground: {
+        inverted: '#f7f7f7',
         strong: '#fcfbf2',
         subtle: '#101010',
-        inverted: '#f7f7f7',
       },
       surface: {
         strong: {
@@ -469,6 +469,8 @@ export const light = {
     },
   },
   text: {
+    affirmative: '#0f834a',
+    brand: '#7a42c8',
     inverted: '#fcfbf2',
     primary: '#101010',
     secondary: '#888888',
@@ -489,56 +491,56 @@ export const dark = {
     danger: {
       border: '#ff7964',
       foreground: {
-        default: '#fcfbf2',
+        default: '#101010',
         subtle: '#ff7964',
       },
       surface: {
-        default: '#de2612',
-        subtle: '#521a16',
+        default: '#ff634a',
+        subtle: '#ffa89d',
       },
     },
     functional: {
       border: '#b2afae',
       foreground: {
-        default: '#fcfbf2',
+        default: '#101010',
         subtle: '#b2afae',
       },
       surface: {
-        default: '#888888',
-        subtle: '#232323',
+        default: '#919191',
+        subtle: '#d3d3d3',
       },
     },
     info: {
       border: '#6bb0ff',
       foreground: {
-        default: '#fcfbf2',
+        default: '#101010',
         subtle: '#6bb0ff',
       },
       surface: {
-        default: '#1c6cd4',
-        subtle: '#042455',
+        default: '#6bb0ff',
+        subtle: '#bcddff',
       },
     },
     positive: {
       border: '#58ca93',
       foreground: {
-        default: '#fcfbf2',
+        default: '#101010',
         subtle: '#58ca93',
       },
       surface: {
-        default: '#0f834a',
-        subtle: '#033d21',
+        default: '#36bf7d',
+        subtle: '#a2e2c3',
       },
     },
     warning: {
       border: '#ff9639',
       foreground: {
-        default: '#fcfbf2',
+        default: '#101010',
         subtle: '#ff9639',
       },
       surface: {
-        default: '#cb5b00',
-        subtle: '#6b2d00',
+        default: '#ff8010',
+        subtle: '#ffcca8',
       },
     },
   },
@@ -610,14 +612,14 @@ export const dark = {
     },
     functional: {
       border: {
+        inverted: '#f7f7f7',
         strong: '#ebebeb',
         subtle: '#ebebeb',
-        inverted: '#f7f7f7',
       },
       foreground: {
+        inverted: '#f7f7f7',
         strong: '#fcfbf2',
         subtle: '#ebebeb',
-        inverted: '#f7f7f7',
       },
       surface: {
         strong: {
@@ -629,8 +631,8 @@ export const dark = {
           active: '#4c4c4c',
           hover: '#3a3837',
           inverted: {
-            active: '#d3d3d3',
-            hover: '#ebebeb',
+            active: '#3a3837',
+            hover: '#3f3f3f',
           },
         },
       },
@@ -715,6 +717,8 @@ export const dark = {
     },
   },
   text: {
+    affirmative: '#58ca93',
+    brand: '#af90de',
     inverted: '#191917',
     primary: '#ebebeb',
     secondary: '#b2afae',

package/src/tokens/components/dark/button.ts

@@ -11,6 +11,7 @@ export default {
     paddingVertical: 12,
   },
   minWidth: 80,
+  shadowColor: '#101010',
   sm: {
     paddingHorizontal: 16,
     paddingVertical: 4,

package/src/tokens/components/dark/checkbox.ts

@@ -12,7 +12,7 @@ export default {
   group: {
     gap: 16,
     stack: {
-      gap: 32,
+      gap: 20,
     },
   },
   outlineColorActive: '#4c473d',

package/src/tokens/components/dark/icon-button.ts

@@ -21,9 +21,9 @@ export default {
     foregroundColorActive: '#b2afae',
     foregroundColorHover: '#d3d3d3',
     inverted: {
-      foregroundColor: '#101010',
-      foregroundColorActive: '#3a3837',
-      foregroundColorHover: '#232323',
+      foregroundColor: '#f7f7f7',
+      foregroundColorActive: '#b2afae',
+      foregroundColorHover: '#d3d3d3',
     },
     md: {
       height: 24,

package/src/tokens/components/dark/radio.ts

@@ -12,7 +12,7 @@ export default {
   group: {
     gap: 16,
     stack: {
-      gap: 32,
+      gap: 20,
     },
   },
   outlineColorActive: '#4c473d',

package/src/tokens/components/dark/tabs.ts

@@ -10,6 +10,8 @@ export default {
   gap: 12,
   item: {
     gap: 6,
+    paddingHorizontal: 12,
+    paddingVertical: 16,
     selected: {
       borderBottomRadius: 0,
       borderTopRadius: 4,

package/src/tokens/components/light/badge.ts

@@ -19,6 +19,6 @@ export default {
   paddingHorizontal: 6,
   sm: {
     height: 24,
-    paddingVertical: 0,
+    paddingVertical: 2,
   },
 } as const;

package/src/tokens/components/light/button.ts

@@ -11,6 +11,7 @@ export default {
     paddingVertical: 12,
   },
   minWidth: 80,
+  shadowColor: '#101010',
   sm: {
     paddingHorizontal: 16,
     paddingVertical: 4,

package/src/tokens/components/light/checkbox.ts

@@ -8,11 +8,11 @@ export default {
   checked: {
     backgroundColor: '#101010',
   },
-  gap: 8,
+  gap: 12,
   group: {
     gap: 16,
     stack: {
-      gap: 32,
+      gap: 20,
     },
   },
   outlineColorActive: '#d4d2c0',
@@ -22,7 +22,7 @@ export default {
     borderRadius: 8,
     borderWidth: 1,
     borderWidthSelected: 2,
-    gap: 8,
+    gap: 12,
     group: {
       gap: 6,
       stack: {

package/src/tokens/components/light/icon-button.ts

@@ -22,7 +22,7 @@ export default {
     foregroundColorHover: '#3a3837',
     inverted: {
       foregroundColor: '#f7f7f7',
-      foregroundColorActive: '#d4d2c0',
+      foregroundColorActive: '#b2afae',
       foregroundColorHover: '#d3d3d3',
     },
     md: {

package/src/tokens/components/light/radio.ts

@@ -8,11 +8,11 @@ export default {
   checked: {
     color: '#101010',
   },
-  gap: 8,
+  gap: 12,
   group: {
     gap: 16,
     stack: {
-      gap: 32,
+      gap: 20,
     },
   },
   outlineColorActive: '#d4d2c0',
@@ -24,7 +24,7 @@ export default {
     borderWidthSelected: 2,
     gap: 8,
     group: {
-      gap: 6,
+      gap: 12,
       stack: {
         gap: 12,
       },

package/src/tokens/components/light/tabs.ts

@@ -10,6 +10,8 @@ export default {
   gap: 12,
   item: {
     gap: 6,
+    paddingHorizontal: 12,
+    paddingVertical: 16,
     selected: {
       borderBottomRadius: 0,
       borderTopRadius: 4,

package/src/tokens/layout.ts

@@ -21,11 +21,14 @@ export const mobile = {
     margin: 16,
   },
   spacing: {
-    lg: 20,
-    md: 16,
-    sm: 12,
-    xl: 28,
-    xs: 8,
+    '2xl': 28,
+    '2xs': 2,
+    lg: 16,
+    md: 12,
+    none: 0,
+    sm: 8,
+    xl: 20,
+    xs: 4,
   },
 } as const;
 
@@ -48,11 +51,14 @@ export const tablet = {
     margin: 32,
   },
   spacing: {
-    lg: 24,
-    md: 16,
-    sm: 12,
-    xl: 28,
-    xs: 8,
+    '2xl': 28,
+    '2xs': 2,
+    lg: 16,
+    md: 12,
+    none: 0,
+    sm: 8,
+    xl: 24,
+    xs: 4,
   },
 } as const;
 
@@ -75,11 +81,14 @@ export const desktop = {
     margin: 32,
   },
   spacing: {
-    lg: 24,
-    md: 16,
-    sm: 12,
-    xl: 40,
-    xs: 8,
+    '2xl': 40,
+    '2xs': 2,
+    lg: 16,
+    md: 12,
+    none: 0,
+    sm: 8,
+    xl: 24,
+    xs: 4,
   },
 } as const;
 

package/src/tokens/semantic-dark.ts

@@ -16,56 +16,56 @@ export default {
     danger: {
       border: '#ff7964',
       foreground: {
-        default: '#fcfbf2',
+        default: '#101010',
         subtle: '#ff7964',
       },
       surface: {
-        default: '#de2612',
-        subtle: '#521a16',
+        default: '#ff634a',
+        subtle: '#ffa89d',
       },
     },
     functional: {
       border: '#b2afae',
       foreground: {
-        default: '#fcfbf2',
+        default: '#101010',
         subtle: '#b2afae',
       },
       surface: {
-        default: '#888888',
-        subtle: '#232323',
+        default: '#919191',
+        subtle: '#d3d3d3',
       },
     },
     info: {
       border: '#6bb0ff',
       foreground: {
-        default: '#fcfbf2',
+        default: '#101010',
         subtle: '#6bb0ff',
       },
       surface: {
-        default: '#1c6cd4',
-        subtle: '#042455',
+        default: '#6bb0ff',
+        subtle: '#bcddff',
       },
     },
     positive: {
       border: '#58ca93',
       foreground: {
-        default: '#fcfbf2',
+        default: '#101010',
         subtle: '#58ca93',
       },
       surface: {
-        default: '#0f834a',
-        subtle: '#033d21',
+        default: '#36bf7d',
+        subtle: '#a2e2c3',
       },
     },
     warning: {
       border: '#ff9639',
       foreground: {
-        default: '#fcfbf2',
+        default: '#101010',
         subtle: '#ff9639',
       },
       surface: {
-        default: '#cb5b00',
-        subtle: '#6b2d00',
+        default: '#ff8010',
+        subtle: '#ffcca8',
       },
     },
   },
@@ -137,14 +137,14 @@ export default {
     },
     functional: {
       border: {
+        inverted: '#f7f7f7',
         strong: '#ebebeb',
         subtle: '#ebebeb',
-        inverted: '#f7f7f7',
       },
       foreground: {
+        inverted: '#f7f7f7',
         strong: '#fcfbf2',
         subtle: '#ebebeb',
-        inverted: '#f7f7f7',
       },
       surface: {
         strong: {
@@ -156,8 +156,8 @@ export default {
           active: '#4c4c4c',
           hover: '#3a3837',
           inverted: {
-            active: '#d3d3d3',
-            hover: '#ebebeb',
+            active: '#3a3837',
+            hover: '#3f3f3f',
           },
         },
       },
@@ -245,6 +245,8 @@ export default {
     },
   },
   text: {
+    affirmative: '#58ca93',
+    brand: '#af90de',
     inverted: '#191917',
     primary: '#ebebeb',
     secondary: '#b2afae',

package/src/tokens/semantic-light.ts

@@ -16,55 +16,55 @@ export default {
     danger: {
       border: '#de2612',
       foreground: {
-        default: '#fcfbf2',
+        default: '#101010',
         subtle: '#de2612',
       },
       surface: {
-        default: '#de2612',
-        subtle: '#ffccc5',
+        default: '#ff634a',
+        subtle: '#ffa89d',
       },
     },
     functional: {
-      border: '#888888',
+      border: '#5b5b5b',
       foreground: {
-        default: '#fcfbf2',
-        subtle: '#888888',
+        default: '#101010',
+        subtle: '#5b5b5b',
       },
       surface: {
-        default: '#888888',
+        default: '#919191',
         subtle: '#d3d3d3',
       },
     },
     info: {
       border: '#1c6cd4',
       foreground: {
-        default: '#fcfbf2',
+        default: '#101010',
         subtle: '#1c6cd4',
       },
       surface: {
-        default: '#1c6cd4',
+        default: '#6bb0ff',
         subtle: '#bcddff',
       },
     },
     positive: {
       border: '#0f834a',
       foreground: {
-        default: '#fcfbf2',
+        default: '#101010',
         subtle: '#0f834a',
       },
       surface: {
-        default: '#0f834a',
+        default: '#36bf7d',
         subtle: '#a2e2c3',
       },
     },
     warning: {
       border: '#be5400',
       foreground: {
-        default: '#fcfbf2',
+        default: '#101010',
         subtle: '#be5400',
       },
       surface: {
-        default: '#be5400',
+        default: '#ff8010',
         subtle: '#ffcca8',
       },
     },
@@ -137,14 +137,14 @@ export default {
     },
     functional: {
       border: {
+        inverted: '#f7f7f7',
         strong: '#101010',
         subtle: '#101010',
-        inverted: '#f7f7f7',
       },
       foreground: {
+        inverted: '#f7f7f7',
         strong: '#fcfbf2',
         subtle: '#101010',
-        inverted: '#f7f7f7',
       },
       surface: {
         strong: {
@@ -245,6 +245,8 @@ export default {
     },
   },
   text: {
+    affirmative: '#0f834a',
+    brand: '#7a42c8',
     inverted: '#fcfbf2',
     primary: '#101010',
     secondary: '#888888',