@jobber/components-native 0.1.2-pree.21 → 0.1.2-pree.22

package/dist/types/src/Typography/Typography.style.d.ts

@@ -1,10 +1,4 @@
 import { TextStyle } from "react-native";
-/**
- * Reusable typography tokens to ensure consistency for any client facing texts.
- */
-export declare const typographyStyles: {
-    [index: string]: TextStyle;
-};
 /**
  * `StyleSheet` for Typography.tsx.
  *
@@ -15,6 +9,9 @@ export declare const typographyStyles: {
  * import { typographyStyles } from "@jobber/components-native"
  * ```
  */
-export declare const styles: {
+/**
+ * Reusable typography tokens to ensure consistency for any client facing texts.
+ */
+export declare const typographyStyles: {
     [index: string]: TextStyle;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.1.2-pree.21+78c02b0f",
+  "version": "0.1.2-pree.22+413b2161",
   "license": "MIT",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
@@ -37,5 +37,5 @@
     "react": "^18",
     "react-native": ">=0.69.2"
   },
-  "gitHead": "78c02b0f8f8f0b75b880b420437b12d9e9002b7c"
+  "gitHead": "413b2161fc2340578d89fba935942b6afbeba98a"
 }

package/src/Typography/Typography.style.ts

@@ -11,353 +11,352 @@ const tightLineHeight = tokens["typography--lineHeight-tight"];
 const minisculeLineHeight = tokens["typography--lineHeight-miniscule"];
 
 /**
- * Reusable typography tokens to ensure consistency for any client facing texts.
+ * `StyleSheet` for Typography.tsx.
+ *
+ * If you find yourself needing to use what's inside this object on files other
+ * than `<Typography />`, please import from `@jobber/components-native` instead.
+ *
+ * ```
+ * import { typographyStyles } from "@jobber/components-native"
+ * ```
  */
-export const typographyStyles: { [index: string]: TextStyle } = {
-  // This follows a pattern of
-  // { fontFamily }{ fontStyle }{ fontWeight }
-  baseRegularRegular: {
-    fontFamily: "inter-regular",
-  },
-
-  baseRegularMedium: {
-    fontFamily: "inter-medium",
-  },
-
-  baseRegularBold: {
-    fontFamily: "inter-bold",
-  },
-
-  baseRegularSemiBold: {
-    fontFamily: "inter-semibold",
-  },
-
-  baseRegularExtraBold: {
-    fontFamily: "inter-extrabold",
-  },
-
-  displayRegularBold: {
-    fontFamily: "jobberpro-bd",
-  },
-
-  displayRegularExtraBold: {
-    fontFamily: "jobberpro-xbd",
-  },
-
-  displayRegularBlack: {
-    fontFamily: "jobberpro-blk",
-  },
-
-  startAlign: {
-    textAlign: "left",
-  },
-
-  endAlign: {
-    textAlign: "right",
-  },
-
-  centerAlign: {
-    textAlign: "center",
-  },
-
-  justifyAlign: {
-    textAlign: "justify",
-  },
-
-  blue: {
-    color: tokens["color-heading"],
-  },
-
-  blueDark: {
-    color: tokens["color-blue--dark"],
-  },
-
-  white: {
-    color: tokens["color-white"],
-  },
 
-  green: {
-    color: tokens["color-green"],
-  },
-
-  greenDark: {
-    color: tokens["color-green--dark"],
-  },
-
-  grey: {
-    color: tokens["color-grey"],
-  },
-
-  greyDark: {
-    color: tokens["color-grey--dark"],
-  },
-
-  greyBlue: {
-    color: tokens["color-greyBlue"],
-  },
-
-  greyBlueDark: {
-    color: tokens["color-greyBlue--dark"],
-  },
-
-  lightBlue: {
-    color: tokens["color-lightBlue"],
-  },
-
-  lightBlueDark: {
-    color: tokens["color-lightBlue--dark"],
-  },
-
-  red: {
-    color: tokens["color-red"],
-  },
-
-  redDark: {
-    color: tokens["color-red--dark"],
-  },
-
-  yellow: {
-    color: tokens["color-yellow"],
-  },
+/**
+ * Reusable typography tokens to ensure consistency for any client facing texts.
+ */
+export const typographyStyles: { [index: string]: TextStyle } =
+  StyleSheet.create({
+    // This follows a pattern of
+    // { fontFamily }{ fontStyle }{ fontWeight }
+    baseRegularRegular: {
+      fontFamily: "inter-regular",
+    },
+
+    baseRegularMedium: {
+      fontFamily: "inter-medium",
+    },
+
+    baseRegularBold: {
+      fontFamily: "inter-bold",
+    },
+
+    baseRegularSemiBold: {
+      fontFamily: "inter-semibold",
+    },
+
+    baseRegularExtraBold: {
+      fontFamily: "inter-extrabold",
+    },
+
+    displayRegularBold: {
+      fontFamily: "jobberpro-bd",
+    },
+
+    displayRegularExtraBold: {
+      fontFamily: "jobberpro-xbd",
+    },
+
+    displayRegularBlack: {
+      fontFamily: "jobberpro-blk",
+    },
+
+    startAlign: {
+      textAlign: "left",
+    },
+
+    endAlign: {
+      textAlign: "right",
+    },
+
+    centerAlign: {
+      textAlign: "center",
+    },
+
+    justifyAlign: {
+      textAlign: "justify",
+    },
+
+    blue: {
+      color: tokens["color-heading"],
+    },
+
+    blueDark: {
+      color: tokens["color-blue--dark"],
+    },
+
+    white: {
+      color: tokens["color-white"],
+    },
+
+    green: {
+      color: tokens["color-green"],
+    },
+
+    greenDark: {
+      color: tokens["color-green--dark"],
+    },
+
+    grey: {
+      color: tokens["color-grey"],
+    },
+
+    greyDark: {
+      color: tokens["color-grey--dark"],
+    },
+
+    greyBlue: {
+      color: tokens["color-greyBlue"],
+    },
+
+    greyBlueDark: {
+      color: tokens["color-greyBlue--dark"],
+    },
+
+    lightBlue: {
+      color: tokens["color-lightBlue"],
+    },
+
+    lightBlueDark: {
+      color: tokens["color-lightBlue--dark"],
+    },
+
+    red: {
+      color: tokens["color-red"],
+    },
+
+    redDark: {
+      color: tokens["color-red--dark"],
+    },
 
-  yellowDark: {
-    color: tokens["color-yellow--dark"],
-  },
+    yellow: {
+      color: tokens["color-yellow"],
+    },
 
-  yellowGreenDark: {
-    color: tokens["color-yellowGreen--dark"],
-  },
+    yellowDark: {
+      color: tokens["color-yellow--dark"],
+    },
 
-  orangeDark: {
-    color: tokens["color-orange--dark"],
-  },
+    yellowGreenDark: {
+      color: tokens["color-yellowGreen--dark"],
+    },
 
-  navyDark: {
-    color: tokens["color-navy--dark"],
-  },
+    orangeDark: {
+      color: tokens["color-orange--dark"],
+    },
 
-  limeDark: {
-    color: tokens["color-lime--dark"],
-  },
+    navyDark: {
+      color: tokens["color-navy--dark"],
+    },
 
-  purpleDark: {
-    color: tokens["color-purple--dark"],
-  },
+    limeDark: {
+      color: tokens["color-lime--dark"],
+    },
 
-  pinkDark: {
-    color: tokens["color-pink--dark"],
-  },
+    purpleDark: {
+      color: tokens["color-purple--dark"],
+    },
 
-  tealDark: {
-    color: tokens["color-teal--dark"],
-  },
+    pinkDark: {
+      color: tokens["color-pink--dark"],
+    },
 
-  indigoDark: {
-    color: tokens["color-indigo--dark"],
-  },
+    tealDark: {
+      color: tokens["color-teal--dark"],
+    },
 
-  navy: {
-    color: tokens["color-navy"],
-  },
+    indigoDark: {
+      color: tokens["color-indigo--dark"],
+    },
 
-  heading: {
-    color: tokens["color-heading"],
-  },
+    navy: {
+      color: tokens["color-navy"],
+    },
 
-  headingReverse: {
-    color: tokens["color-text--reverse"],
-  },
+    heading: {
+      color: tokens["color-heading"],
+    },
 
-  text: {
-    color: tokens["color-text"],
-  },
+    headingReverse: {
+      color: tokens["color-text--reverse"],
+    },
 
-  textSecondary: {
-    color: tokens["color-text--secondary"],
-  },
+    text: {
+      color: tokens["color-text"],
+    },
 
-  textReverse: {
-    color: tokens["color-text--reverse"],
-  },
+    textSecondary: {
+      color: tokens["color-text--secondary"],
+    },
 
-  textReverseSecondary: {
-    color: tokens["color-text--reverse--secondary"],
-  },
+    textReverse: {
+      color: tokens["color-text--reverse"],
+    },
 
-  success: {
-    color: tokens["color-success--onSurface"],
-  },
-
-  error: {
-    color: tokens["color-critical"],
-  },
-
-  base: {
-    color: tokens["color-text"],
-  },
-
-  subdued: {
-    color: tokens["color-text--secondary"],
-  },
-
-  warn: {
-    color: tokens["color-warning--onSurface"],
-  },
-
-  info: {
-    color: tokens["color-informative--onSurface"],
-  },
-
-  critical: {
-    color: tokens["color-critical"],
-  },
-
-  successReverse: {
-    color: tokens["color-success"],
-  },
-
-  errorReverse: {
-    color: tokens["color-critical"],
-  },
-
-  baseReverse: {
-    color: tokens["color-text--reverse"],
-  },
-
-  subduedReverse: {
-    color: tokens["color-text--reverse--secondary"],
-  },
-
-  warnReverse: {
-    color: tokens["color-warning"],
-  },
-
-  infoReverse: {
-    color: tokens["color-informative"],
-  },
-
-  criticalReverse: {
-    color: tokens["color-critical"],
-  },
-
-  interactive: {
-    color: tokens["color-interactive"],
-  },
-
-  destructive: {
-    color: tokens["color-destructive"],
-  },
-
-  learning: {
-    color: tokens["color-informative"],
-  },
-
-  subtle: {
-    color: tokens["color-interactive--subtle"],
-  },
-
-  onPrimary: {
-    color: tokens["color-surface"],
-  },
-
-  disabled: {
-    color: tokens["color-disabled"],
-  },
-
-  smallestSize: {
-    fontSize: tokens["typography--fontSize-smallest"],
-    lineHeight: minisculeLineHeight,
-  },
-
-  smallerSize: {
-    fontSize: tokens["typography--fontSize-smaller"],
-    lineHeight: tightLineHeight,
-  },
-
-  smallSize: {
-    fontSize: tokens["typography--fontSize-small"],
-    lineHeight: tightLineHeight,
-  },
-
-  defaultSize: {
-    fontSize: tokens["typography--fontSize-base"],
-    lineHeight: baseLineHeight,
-  },
-
-  largeSize: {
-    fontSize: tokens["typography--fontSize-large"],
-    lineHeight: largeLineHeight,
-  },
-
-  largerSize: {
-    fontSize: tokens["typography--fontSize-larger"],
-    lineHeight: largeLineHeight,
-  },
-
-  largestSize: {
-    fontSize: tokens["typography--fontSize-largest"],
-    lineHeight: largerLineHeight,
-  },
-
-  jumboSize: {
-    fontSize: tokens["typography--fontSize-jumbo"],
-    lineHeight: jumboLineHeight,
-  },
-
-  extravagantSize: {
-    fontSize: tokens["typography--fontSize-extravagant"],
-    lineHeight: extravagantLineHeight,
-  },
-
-  extravagantLineHeight: {
-    lineHeight: extravagantLineHeight,
-  },
-
-  jumboLineHeight: {
-    lineHeight: jumboLineHeight,
-  },
-
-  largestLineHeight: {
-    lineHeight: largestLineHeight,
-  },
-  largerLineHeight: {
-    lineHeight: largerLineHeight,
-  },
-
-  largeLineHeight: {
-    lineHeight: largeLineHeight,
-  },
-
-  baseLineHeight: {
-    lineHeight: baseLineHeight,
-  },
-
-  tightLineHeight: {
-    lineHeight: tightLineHeight,
-  },
-
-  baseLetterSpacing: {
-    letterSpacing: tokens["typography--letterSpacing-base"],
-  },
-
-  looseLetterSpacing: {
-    letterSpacing: tokens["typography--letterSpacing-loose"],
-  },
-
-  strikeThrough: {
-    textDecorationLine: "line-through",
-  },
-};
+    textReverseSecondary: {
+      color: tokens["color-text--reverse--secondary"],
+    },
 
-/**
- * `StyleSheet` for Typography.tsx.
- *
- * If you find yourself needing to use what's inside this object on files other
- * than `<Typography />`, please import from `@jobber/components-native` instead.
- *
- * ```
- * import { typographyStyles } from "@jobber/components-native"
- * ```
- */
-export const styles: { [index: string]: TextStyle } =
-  StyleSheet.create(typographyStyles);
+    success: {
+      color: tokens["color-success--onSurface"],
+    },
+
+    error: {
+      color: tokens["color-critical"],
+    },
+
+    base: {
+      color: tokens["color-text"],
+    },
+
+    subdued: {
+      color: tokens["color-text--secondary"],
+    },
+
+    warn: {
+      color: tokens["color-warning--onSurface"],
+    },
+
+    info: {
+      color: tokens["color-informative--onSurface"],
+    },
+
+    critical: {
+      color: tokens["color-critical"],
+    },
+
+    successReverse: {
+      color: tokens["color-success"],
+    },
+
+    errorReverse: {
+      color: tokens["color-critical"],
+    },
+
+    baseReverse: {
+      color: tokens["color-text--reverse"],
+    },
+
+    subduedReverse: {
+      color: tokens["color-text--reverse--secondary"],
+    },
+
+    warnReverse: {
+      color: tokens["color-warning"],
+    },
+
+    infoReverse: {
+      color: tokens["color-informative"],
+    },
+
+    criticalReverse: {
+      color: tokens["color-critical"],
+    },
+
+    interactive: {
+      color: tokens["color-interactive"],
+    },
+
+    destructive: {
+      color: tokens["color-destructive"],
+    },
+
+    learning: {
+      color: tokens["color-informative"],
+    },
+
+    subtle: {
+      color: tokens["color-interactive--subtle"],
+    },
+
+    onPrimary: {
+      color: tokens["color-surface"],
+    },
+
+    disabled: {
+      color: tokens["color-disabled"],
+    },
+
+    smallestSize: {
+      fontSize: tokens["typography--fontSize-smallest"],
+      lineHeight: minisculeLineHeight,
+    },
+
+    smallerSize: {
+      fontSize: tokens["typography--fontSize-smaller"],
+      lineHeight: tightLineHeight,
+    },
+
+    smallSize: {
+      fontSize: tokens["typography--fontSize-small"],
+      lineHeight: tightLineHeight,
+    },
+
+    defaultSize: {
+      fontSize: tokens["typography--fontSize-base"],
+      lineHeight: baseLineHeight,
+    },
+
+    largeSize: {
+      fontSize: tokens["typography--fontSize-large"],
+      lineHeight: largeLineHeight,
+    },
+
+    largerSize: {
+      fontSize: tokens["typography--fontSize-larger"],
+      lineHeight: largeLineHeight,
+    },
+
+    largestSize: {
+      fontSize: tokens["typography--fontSize-largest"],
+      lineHeight: largerLineHeight,
+    },
+
+    jumboSize: {
+      fontSize: tokens["typography--fontSize-jumbo"],
+      lineHeight: jumboLineHeight,
+    },
+
+    extravagantSize: {
+      fontSize: tokens["typography--fontSize-extravagant"],
+      lineHeight: extravagantLineHeight,
+    },
+
+    extravagantLineHeight: {
+      lineHeight: extravagantLineHeight,
+    },
+
+    jumboLineHeight: {
+      lineHeight: jumboLineHeight,
+    },
+
+    largestLineHeight: {
+      lineHeight: largestLineHeight,
+    },
+    largerLineHeight: {
+      lineHeight: largerLineHeight,
+    },
+
+    largeLineHeight: {
+      lineHeight: largeLineHeight,
+    },
+
+    baseLineHeight: {
+      lineHeight: baseLineHeight,
+    },
+
+    tightLineHeight: {
+      lineHeight: tightLineHeight,
+    },
+
+    baseLetterSpacing: {
+      letterSpacing: tokens["typography--letterSpacing-base"],
+    },
+
+    looseLetterSpacing: {
+      letterSpacing: tokens["typography--letterSpacing-loose"],
+    },
+
+    strikeThrough: {
+      textDecorationLine: "line-through",
+    },
+  });