@jobber/components 8.20.0 → 8.20.1

package/dist/docs/Banner/Banner.md

@@ -441,7 +441,7 @@ Use `UNSAFE_style` to apply inline custom styles to the Banner.
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
-| `backgroundColor` | `"disabled" | "icon" | "event" | "invoice" | "job" | "quote" | "request" | "task" | "text" | "visit" | "warning" | "success" | "base-grey--100" | "base-grey--200" | "base-grey--300" | ... 270 more ... | "client--onSurface"` | No | — | Sets the background color of the icon. |
+| `backgroundColor` | `"disabled" | "icon" | "event" | "invoice" | "job" | "quote" | "request" | "task" | "text" | "visit" | "warning" | "success" | "base-grey--100" | "base-grey--200" | "base-grey--300" | ... 275 more ... | "client--onSurface"` | No | — | Sets the background color of the icon. |
 | `color` | `"disabled" | "icon" | "task" | "text" | "warning" | "success" | "blue" | "green" | "yellow" | "red" | "grey" | "white" | "greyBlue" | "lightBlue" | "orange" | "navy" | "interactive" | ... 33 more ... | "brandHighlight"` | No | — | Determines the color of the icon. Some icons have a default system colour like quotes, jobs, and invoices. Others tha... |
 | `customColor` | `string` | No | — | Sets a custom color for the icon. Can be a rgb() or hex value. |
 | `name` | `IconNames` | No | — | The icon to show. |

package/dist/docs/Box/Box.md

@@ -206,9 +206,9 @@ defaults to respecting theme/modes.
 | `alignItems` | `AlignItems` | No | — | This feature is well established and works across many devices and browser versions. It’s been available across brows... |
 | `alignSelf` | `AlignSelf` | No | — | This feature is well established and works across many devices and browser versions. It’s been available across brows... |
 | `as` | `"article" | "aside" | "div" | "main" | "section" | "span"` | No | `div` |  |
-| `background` | `"disabled" | "icon" | "event" | "invoice" | "job" | "quote" | "request" | "task" | "text" | "visit" | "warning" | "success" | "base-grey--100" | "base-grey--200" | "base-grey--300" | ... 270 more ... | "client--onSurface"` | No | — |  |
+| `background` | `"disabled" | "icon" | "event" | "invoice" | "job" | "quote" | "request" | "task" | "text" | "visit" | "warning" | "success" | "base-grey--100" | "base-grey--200" | "base-grey--300" | ... 275 more ... | "client--onSurface"` | No | — |  |
 | `border` | `"base" | "thick" | "thicker" | "thickest" | BoxBorderWidth` | No | — |  |
-| `borderColor` | `"disabled" | "icon" | "event" | "invoice" | "job" | "quote" | "request" | "task" | "text" | "visit" | "warning" | "success" | "base-grey--100" | "base-grey--200" | "base-grey--300" | ... 270 more ... | "client--onSurface"` | No | — |  |
+| `borderColor` | `"disabled" | "icon" | "event" | "invoice" | "job" | "quote" | "request" | "task" | "text" | "visit" | "warning" | "success" | "base-grey--100" | "base-grey--200" | "base-grey--300" | ... 275 more ... | "client--onSurface"` | No | — |  |
 | `direction` | `FlexDirection` | No | — |  |
 | `gap` | `"base" | "extravagant" | "large" | "larger" | "largest" | "minuscule" | "slim" | "small" | "smaller" | "smallest"` | No | — |  |
 | `height` | `BoxDimension` | No | `auto` |  |

package/dist/docs/Button/Button.md

@@ -956,6 +956,6 @@ export const styles = StyleSheet.create({
 | `numberOfLines` | `number` | No | — |  |
 | `size` | `"base" | "extravagant" | "jumbo" | "large" | "larger" | "largest" | "small" | "smaller"` | No | — |  |
 | `textCase` | `"capitalize" | "lowercase" | "none" | "uppercase"` | No | — |  |
-| `underline` | `UnderlineStyle | "solid color-indigo" | "solid color-indigo--light" | "solid color-indigo--lighter" | "solid color-indigo--lightest" | "solid color-indigo--dark" | ... 650 more ... | "dashed color-client--onSurface"` | No | — | The style (and optionally a color) of underline the text is decorated with. All semantic color tokens (other than the... |
+| `underline` | `UnderlineStyle | "solid color-indigo" | "solid color-indigo--light" | "solid color-indigo--lighter" | "solid color-indigo--lightest" | "solid color-indigo--dark" | ... 670 more ... | "dashed color-client--onSurface"` | No | — | The style (and optionally a color) of underline the text is decorated with. All semantic color tokens (other than the... |
 | `UNSAFE_className` | `{ textStyle?: string; }` | No | — | **Use at your own risk:** Custom classNames for specific elements. This should only be used as a **last resort**. Usi... |
 | `UNSAFE_style` | `{ textStyle?: CSSProperties; }` | No | — | **Use at your own risk:** Custom style for specific elements. This should only be used as a **last resort**. Using th... |

package/dist/docs/Colors/Colors.md

@@ -84,6 +84,19 @@ different.
 Used by the `--shadow-focus` property to indicate that an element has received
 focus. Avoid using `--color-focus` directly on UI elements.
 
+### Data Visualization
+
+Use these colors to distinguish values in charts and other data visualizations.
+They respond to theming and should be preferred over base color tokens.
+
+#### Categorical
+
+Use categorical colors to distinguish unrelated groups or series. Use `subtle`
+or `bold` when multiple treatments of the first categorical color need to sit
+together in the same visualization.
+
+Use additional categorical colors for supporting data series.
+
 ### Status
 
 Use these colors in labels, icons, filters, alerts, and other elements where

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "8.20.0",
+  "version": "8.20.1",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -487,7 +487,7 @@
   "devDependencies": {
     "@apollo/client": "^3.7.10",
     "@csstools/postcss-global-data": "^1.0.3",
-    "@jobber/design": "0.105.0",
+    "@jobber/design": "0.106.0",
     "@jobber/hooks": "2.21.0",
     "@rollup/plugin-alias": "^5.1.0",
     "@rollup/plugin-commonjs": "^25.0.7",
@@ -541,5 +541,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "36deb918d5878ebcaadc91efecfc1c838e85df7f"
+  "gitHead": "c5da7c5d3db964c4803ccf359bc4e59ed63f668d"
 }