@utilitywarehouse/hearth-react-native 0.2.0 → 0.3.1

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,15 +469,17 @@ export const light = {
     },
   },
   text: {
+    affirmative: '#0f834a',
+    brand: '#7a42c8',
     inverted: '#fcfbf2',
     primary: '#101010',
-    secondary: '#888888',
+    secondary: '#5b5b5b',
   },
 } as const;
 
 export const dark = {
   background: {
-    brand: '#996cda',
+    brand: '#7a42c8',
     primary: '#191917',
     secondary: '#232323',
   },
@@ -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',
       },
     },
   },
@@ -553,7 +555,7 @@ export const dark = {
   interactive: {
     affirmative: {
       border: {
-        strong: '#ebebeb',
+        strong: '#101010',
         subtle: '#58ca93',
       },
       foreground: {
@@ -589,7 +591,7 @@ export const dark = {
     },
     destructive: {
       border: {
-        strong: '#ebebeb',
+        strong: '#101010',
         subtle: '#ff7964',
       },
       foreground: {
@@ -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,15 +631,15 @@ export const dark = {
           active: '#4c4c4c',
           hover: '#3a3837',
           inverted: {
-            active: '#d3d3d3',
-            hover: '#ebebeb',
+            active: '#3a3837',
+            hover: '#3f3f3f',
           },
         },
       },
     },
     highlight: {
       border: {
-        strong: '#f7f7f7',
+        strong: '#101010',
       },
       foreground: {
         strong: '#101010',
@@ -715,7 +717,9 @@ export const dark = {
     },
   },
   text: {
-    inverted: '#191917',
+    affirmative: '#58ca93',
+    brand: '#af90de',
+    inverted: '#fcfbf2',
     primary: '#ebebeb',
     secondary: '#b2afae',
   },

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

@@ -6,6 +6,19 @@ export default {
   borderRadius: 8,
   borderWidth: 2,
   contentGap: 4,
+  focus: '#101010',
   gap: 8,
+  iconButton: {
+    unstyled: {
+      foregroundColor: '#101010',
+      foregroundColorActive: '#3f3f3f',
+      foregroundColorHover: '#3a3837',
+    },
+  },
+  link: {
+    color: '#101010',
+    colorActive: '#3f3f3f',
+    colorHover: '#3a3837',
+  },
   padding: 14,
 } as const;

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

@@ -7,12 +7,15 @@ export default {
   borderWidth: 2,
   checked: {
     backgroundColor: '#ebebeb',
+    icon: {
+      color: '#101010',
+    },
   },
   gap: 8,
   group: {
     gap: 16,
     stack: {
-      gap: 32,
+      gap: 20,
     },
   },
   outlineColorActive: '#4c473d',

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

@@ -3,6 +3,13 @@
  */
 
 export default {
+  iconButton: {
+    unstyled: {
+      foregroundColor: '#101010',
+      foregroundColorActive: '#3f3f3f',
+      foregroundColorHover: '#3a3837',
+    },
+  },
   borderRadius: 8,
   md: {
     height: 48,
@@ -21,9 +28,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/index.ts

@@ -34,6 +34,7 @@ export { default as overlay } from './overlay';
 export { default as pagination } from './pagination';
 export { default as parts } from './parts';
 export { default as pill } from './pill';
+export { default as progressBar } from './progress-bar';
 export { default as progressStepper } from './progress-stepper';
 export { default as radio } from './radio';
 export { default as sectionHeader } from './section-header';

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

@@ -3,6 +3,11 @@
  */
 
 export default {
+  link: {
+    color: '#101010',
+    colorActive: '#3f3f3f',
+    colorHover: '#3a3837',
+  },
   color: '#ebebeb',
   colorActive: '#b2afae',
   colorHover: '#d3d3d3',

package/src/tokens/components/dark/progress-bar.ts

@@ -0,0 +1,41 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export default {
+  barColor: '#4c473d',
+  circular: {
+    md: {
+      bar: {
+        width: 12,
+      },
+      gap: 0,
+      height: 140,
+      label: {
+        fontFamily: 'DM Sans',
+        fontSize: 24,
+        fontWeight: 400,
+        lineHeight: 24,
+      },
+    },
+    sm: {
+      barWidth: 8,
+      height: 80,
+    },
+  },
+  linear: {
+    bar: {
+      borderRadius: 9999,
+      height: 12,
+    },
+    gap: 8,
+    label: {
+      gap: 8,
+    },
+  },
+  progress: {
+    dangerColor: '#ff634a',
+    defaultColor: '#c6b5e2',
+    successColor: '#36bf7d',
+  },
+} as const;

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/alert.ts

@@ -6,6 +6,19 @@ export default {
   borderRadius: 8,
   borderWidth: 2,
   contentGap: 4,
+  focus: '#101010',
   gap: 8,
+  iconButton: {
+    unstyled: {
+      foregroundColor: '#101010',
+      foregroundColorActive: '#3f3f3f',
+      foregroundColorHover: '#3a3837',
+    },
+  },
+  link: {
+    color: '#101010',
+    colorActive: '#3f3f3f',
+    colorHover: '#3a3837',
+  },
   padding: 14,
 } as const;

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

@@ -7,12 +7,15 @@ export default {
   borderWidth: 2,
   checked: {
     backgroundColor: '#101010',
+    icon: {
+      color: '#fcfbf2',
+    },
   },
-  gap: 8,
+  gap: 12,
   group: {
     gap: 16,
     stack: {
-      gap: 32,
+      gap: 20,
     },
   },
   outlineColorActive: '#d4d2c0',
@@ -22,7 +25,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

@@ -3,6 +3,13 @@
  */
 
 export default {
+  iconButton: {
+    unstyled: {
+      foregroundColor: '#101010',
+      foregroundColorActive: '#3f3f3f',
+      foregroundColorHover: '#3a3837',
+    },
+  },
   borderRadius: 8,
   md: {
     height: 48,
@@ -22,7 +29,7 @@ export default {
     foregroundColorHover: '#3a3837',
     inverted: {
       foregroundColor: '#f7f7f7',
-      foregroundColorActive: '#d4d2c0',
+      foregroundColorActive: '#b2afae',
       foregroundColorHover: '#d3d3d3',
     },
     md: {

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

@@ -34,6 +34,7 @@ export { default as overlay } from './overlay';
 export { default as pagination } from './pagination';
 export { default as parts } from './parts';
 export { default as pill } from './pill';
+export { default as progressBar } from './progress-bar';
 export { default as progressStepper } from './progress-stepper';
 export { default as radio } from './radio';
 export { default as sectionHeader } from './section-header';

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

@@ -3,6 +3,11 @@
  */
 
 export default {
+  link: {
+    color: '#101010',
+    colorActive: '#3f3f3f',
+    colorHover: '#3a3837',
+  },
   color: '#101010',
   colorActive: '#3f3f3f',
   colorHover: '#3a3837',

package/src/tokens/components/light/progress-bar.ts

@@ -0,0 +1,41 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export default {
+  barColor: '#f1efe4',
+  circular: {
+    md: {
+      bar: {
+        width: 12,
+      },
+      gap: 0,
+      height: 140,
+      label: {
+        fontFamily: 'DM Sans',
+        fontSize: 24,
+        fontWeight: 400,
+        lineHeight: 24,
+      },
+    },
+    sm: {
+      barWidth: 8,
+      height: 80,
+    },
+  },
+  linear: {
+    bar: {
+      borderRadius: 9999,
+      height: 12,
+    },
+    gap: 8,
+    label: {
+      gap: 8,
+    },
+  },
+  progress: {
+    dangerColor: '#f4412a',
+    defaultColor: '#26164f',
+    successColor: '#19a660',
+  },
+} as const;

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/index.ts

@@ -14,6 +14,7 @@ export { default as borderWidth } from './border-width';
 export { default as font } from './font';
 export { default as letterSpacing } from './letter-spacing';
 export { default as lineHeight } from './line-height';
+export { default as motion } from './motion';
 export { default as space } from './space';
 export { default as typography } from './typography';
 export * as components from './components';