@jobber/components-native 0.72.1 → 0.72.2

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jobber/components-native",
-    "version": "0.72.1",
+    "version": "0.72.2",
     "license": "MIT",
     "description": "React Native implementation of Atlantis",
     "repository": {
@@ -82,5 +82,5 @@
         "react-native-safe-area-context": "^4.5.2",
         "react-native-svg": ">=12.0.0"
     },
-    "gitHead": "6dbe1a431543cacdc9e0b0f4896b7866bc1ae12d"
+    "gitHead": "5bf179fd86de1628e28da194dd8cc4c2d51ed9ab"
 }

package/dist/src/Typography/Typography.style.js

@@ -68,7 +68,11 @@ export const typographyTokens = Object.assign(Object.assign({}, fonts), { italic
     }, underline: {
         textDecorationColor: tokens["color-text--secondary"],
         textDecorationLine: "underline",
-    }, startAlign: {
+    }, 
+    /**
+     * Alignments
+     */
+    startAlign: {
         textAlign: "left",
     }, endAlign: {
         textAlign: "right",
@@ -76,9 +80,12 @@ export const typographyTokens = Object.assign(Object.assign({}, fonts), { italic
         textAlign: "center",
     }, justifyAlign: {
         textAlign: "justify",
-    }, blue: {
-        color: tokens["color-heading"],
-    }, blueDark: {
+    }, 
+    /**
+     * Colors
+     */
+    // Base colors for backwards compatibility
+    blueDark: {
         color: tokens["color-blue--dark"],
     }, white: {
         color: tokens["color-white"],
@@ -124,10 +131,10 @@ export const typographyTokens = Object.assign(Object.assign({}, fonts), { italic
         color: tokens["color-indigo--dark"],
     }, navy: {
         color: tokens["color-navy"],
-    }, heading: {
+    }, 
+    // Typography
+    heading: {
         color: tokens["color-heading"],
-    }, headingReverse: {
-        color: tokens["color-text--reverse"],
     }, text: {
         color: tokens["color-text"],
     }, textSecondary: {
@@ -136,47 +143,160 @@ export const typographyTokens = Object.assign(Object.assign({}, fonts), { italic
         color: tokens["color-text--reverse"],
     }, textReverseSecondary: {
         color: tokens["color-text--reverse--secondary"],
-    }, success: {
-        color: tokens["color-success--onSurface"],
-    }, error: {
+    }, 
+    // Statuses
+    inactive: {
+        color: tokens["color-inactive"],
+    }, inactiveSurface: {
+        color: tokens["color-inactive--surface"],
+    }, inactiveOnSurface: {
+        color: tokens["color-inactive--onSurface"],
+    }, critical: {
         color: tokens["color-critical"],
-    }, base: {
-        color: tokens["color-text"],
-    }, subdued: {
-        color: tokens["color-text--secondary"],
-    }, warn: {
+    }, criticalSurface: {
+        color: tokens["color-critical--surface"],
+    }, criticalOnSurface: {
+        color: tokens["color-critical--onSurface"],
+    }, warning: {
+        color: tokens["color-warning"],
+    }, warningSurface: {
+        color: tokens["color-warning--surface"],
+    }, warningOnSurface: {
         color: tokens["color-warning--onSurface"],
-    }, info: {
+    }, informative: {
+        color: tokens["color-informative"],
+    }, informativeSurface: {
+        color: tokens["color-informative--surface"],
+    }, informativeOnSurface: {
         color: tokens["color-informative--onSurface"],
-    }, critical: {
+    }, 
+    // To be uncommented once success in Deprecated is removed
+    // success: {
+    //   color: tokens["color-success"],
+    // },
+    successSurface: {
+        color: tokens["color-success--surface"],
+    }, successOnSurface: {
+        color: tokens["color-success--onSurface"],
+    }, 
+    // Interactions
+    interactive: {
+        color: tokens["color-interactive"],
+    }, interactiveHover: {
+        color: tokens["color-interactive--hover"],
+    }, interactiveSubtle: {
+        color: tokens["color-interactive--subtle"],
+    }, interactiveSubtleHover: {
+        color: tokens["color-interactive--subtle--hover"],
+    }, destructive: {
+        color: tokens["color-destructive"],
+    }, destructiveHover: {
+        color: tokens["color-destructive--hover"],
+    }, disabled: {
+        color: tokens["color-disabled"],
+    }, disabledSecondary: {
+        color: tokens["color-disabled--secondary"],
+    }, 
+    // Workflow
+    request: {
+        color: tokens["color-request"],
+    }, requestSurface: {
+        color: tokens["color-request--surface"],
+    }, requestOnSurface: {
+        color: tokens["color-request--onSurface"],
+    }, quote: {
+        color: tokens["color-quote"],
+    }, quoteSurface: {
+        color: tokens["color-quote--surface"],
+    }, quoteOnSurface: {
+        color: tokens["color-quote--onSurface"],
+    }, job: {
+        color: tokens["color-job"],
+    }, jobSurface: {
+        color: tokens["color-job--surface"],
+    }, jobOnSurface: {
+        color: tokens["color-job--onSurface"],
+    }, visit: {
+        color: tokens["color-visit"],
+    }, visitSurface: {
+        color: tokens["color-visit--surface"],
+    }, visitOnSurface: {
+        color: tokens["color-visit--onSurface"],
+    }, task: {
+        color: tokens["color-task"],
+    }, taskSurface: {
+        color: tokens["color-task--surface"],
+    }, taskOnSurface: {
+        color: tokens["color-task--onSurface"],
+    }, event: {
+        color: tokens["color-event"],
+    }, eventSurface: {
+        color: tokens["color-event--surface"],
+    }, eventOnSurface: {
+        color: tokens["color-event--onSurface"],
+    }, invoice: {
+        color: tokens["color-invoice"],
+    }, invoiceSurface: {
+        color: tokens["color-invoice--surface"],
+    }, invoiceOnSurface: {
+        color: tokens["color-invoice--onSurface"],
+    }, payments: {
+        color: tokens["color-payments"],
+    }, paymentsSurface: {
+        color: tokens["color-payments--surface"],
+    }, paymentsOnSurface: {
+        color: tokens["color-payments--onSurface"],
+    }, client: {
+        color: tokens["color-client"],
+    }, 
+    // Miscellaneous
+    icon: {
+        color: tokens["color-icon"],
+    }, brand: {
+        color: tokens["color-brand"],
+    }, 
+    // Deprecated
+    blue: {
+        color: tokens["color-heading"],
+    }, base: {
+        color: tokens["color-text"],
+    }, baseReverse: {
+        color: tokens["color-text--reverse"],
+    }, headingReverse: {
+        color: tokens["color-text--reverse"],
+    }, error: {
         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"],
+    }, success: {
+        color: tokens["color-success--onSurface"],
+    }, successReverse: {
+        color: tokens["color-success"],
+    }, warn: {
+        color: tokens["color-warning--onSurface"],
     }, warnReverse: {
         color: tokens["color-warning"],
+    }, subdued: {
+        color: tokens["color-text--secondary"],
+    }, subduedReverse: {
+        color: tokens["color-text--reverse--secondary"],
+    }, info: {
+        color: tokens["color-informative--onSurface"],
     }, 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: {
+    }, 
+    /**
+     * Sizes
+     */
+    smallestSize: {
         fontSize: tokens["typography--fontSize-smallest"],
         lineHeight: minusculeLineHeight,
     }, smallerSize: {
@@ -203,7 +323,11 @@ export const typographyTokens = Object.assign(Object.assign({}, fonts), { italic
     }, extravagantSize: {
         fontSize: tokens["typography--fontSize-extravagant"],
         lineHeight: extravagantLineHeight,
-    }, extravagantLineHeight: {
+    }, 
+    /**
+     * Line Heights
+     */
+    extravagantLineHeight: {
         lineHeight: extravagantLineHeight,
     }, jumboLineHeight: {
         lineHeight: jumboLineHeight,
@@ -217,7 +341,11 @@ export const typographyTokens = Object.assign(Object.assign({}, fonts), { italic
         lineHeight: baseLineHeight,
     }, tightLineHeight: {
         lineHeight: tightLineHeight,
-    }, baseLetterSpacing: {
+    }, 
+    /**
+     * Letter Spacings
+     */
+    baseLetterSpacing: {
         letterSpacing: tokens["typography--letterSpacing-base"],
     }, looseLetterSpacing: {
         letterSpacing: tokens["typography--letterSpacing-loose"],