@jobber/components 9.14.2 → 9.14.3

package/dist/docs/AtlantisThemeContext/AtlantisThemeContext.md

@@ -5,16 +5,22 @@ tokens.
 
 ## Design & usage guidelines
 
-Both the web and mobile components have the exact same API, except for one minor
-difference in how you update the theme.
+Web and mobile both expose Atlantis theme context, but the runtime ownership is
+slightly different across platforms.
 
 Each platform provides a `useAtlantisTheme` hook that you may use to access the
-`theme` and `tokens` in your components.
+current theme information and design tokens in your components.
 
-On mobile, this hook also returns a `setTheme` function which you'll use to
-update the theme for the nearest `AtlantisThemeContextProvider` ancestor.
-Typically there will only be a single provider at the root, controlling the
-theme for the entire app.
+On mobile, the hook returns:
+
+* `theme`: the selected theme preference (`"system" | "light" | "dark"`)
+* `effectiveTheme`: the resolved theme Atlantis uses for tokens
+  (`"light" | "dark"`)
+* `tokens`
+* `setTheme`
+
+Typically there will only be a single provider at the root, and the consuming
+app will control `theme` and persist that preference outside Atlantis.
 
 On web, you'll need to import the `updateTheme` function and call it with the
 new theme. This is a separate function because it synchronizes the theme update
@@ -86,7 +92,7 @@ function App() {
 }
 
 function ThemedComponent() {
-  const { theme, tokens, setTheme } = useAtlantisTheme();
+  const { theme, effectiveTheme, tokens, setTheme } = useAtlantisTheme();
   return (
     <Content>
       <View
@@ -96,11 +102,16 @@ function ThemedComponent() {
         }}
       >
         <Content>
-          <Text>The current theme is: {theme}.</Text>
+          <Text>The selected theme is: {theme}.</Text>
+          <Text>The effective theme is: {effectiveTheme}.</Text>
           <Text>
             The javascript tokens can be accessed via the tokens object.
           </Text>
           <Text>The theme can be changed using `setTheme`</Text>
+          <Button
+            onPress={() => setTheme("system")}
+            label="The theme can be changed to system"
+          />
           <Button
             onPress={() => setTheme("light")}
             label="The theme can be changed to light"
@@ -163,6 +174,10 @@ regardless of the main application theme. This can be done by setting the
 `dangerouslyOverrideTheme` prop to `<themeToSet>` on the
 `AtlantisThemeContextProvider`.
 
+On mobile, forcing a theme changes the rendered tokens for that subtree, but it
+does not replace the selected theme preference semantics from the nearest
+non-forced provider.
+
 Note: If you're using `buildThemedStyles`, any `useStyles` calls must be done
 within a *child component* of the `AtlantisThemeContextProvider`, not in the
 same component that renders the provider. Same goes for `useAtlantisTheme`.

package/dist/docs/Icon/Icon.md

@@ -521,6 +521,7 @@ export function IconSizesExample() {
 |      | `partlySunny`       |
 |      | `snow`              |
 |      | `thunderLightening` |
+|      | `windy`             |
 
 ### Legacy
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "9.14.2",
+  "version": "9.14.3",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -495,7 +495,7 @@
   "devDependencies": {
     "@apollo/client": "^3.7.10",
     "@csstools/postcss-global-data": "^1.0.3",
-    "@jobber/design": "0.114.0",
+    "@jobber/design": "0.115.0",
     "@jobber/hooks": "2.21.1",
     "@rollup/plugin-alias": "^5.1.0",
     "@rollup/plugin-commonjs": "^25.0.7",
@@ -547,5 +547,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "e4dbbfa3535d42741ca8622ccb33275f4284edd3"
+  "gitHead": "b38e35f5b813caa27834c947d6f3340e6762d297"
 }