@jobber/design 0.27.9 → 0.28.0

package/src/Spacing.mdx

@@ -0,0 +1,121 @@
+---
+name: Spacing
+menu: Design
+route: /space
+---
+
+# Spacing
+
+Our spacing system exists to support the foundational visual design principle of
+[proximity-based grouping:](https://www.nngroup.com/articles/gestalt-proximity/)
+
+> Using varying amounts of whitespace to either unite or separate elements is
+> key to communicating meaningful groupings.
+
+In the shortest, simplest terms: the closer two elements are related, the
+tighter the spacing between them should be.
+
+With this in mind, let’s start small and work our way up.
+
+## Design & usage guidelines
+
+### Miniscule and Smallest
+
+At their respective sizes (`1px` and `2px` equivalent), these values should
+mostly be used to provide optical adjustments where an element is visually
+misaligned.
+
+### Smaller
+
+The `smaller` spacing value can be used between contents of a single component.
+For example, see the spacing between an Icon and the label inside of a
+[Button.](/components/button#icons)
+
+![illustration of a smaller space between icon and button label](https://user-images.githubusercontent.com/39704901/143141489-679fa61b-5497-4e81-bfe0-b5f463673e4b.png)
+
+### Small
+
+Sibling items within a container can be separated by the `small` value to
+reflect their relation to each other. An example would be the spacing between
+[Chips in a selection group.](/components/chips#single-select)
+
+![illustration of a small space between Chip components](https://user-images.githubusercontent.com/39704901/143141613-193ceeb2-b393-44ab-a5e8-21d2f88c67c4.png)
+
+### Base
+
+Use `base` as the default spacing in larger content containers with multiple
+children of their own, such as [Card.](/components/card) This should also be
+used as the default starting point for spacing between [Form](/components/form)
+elements.
+
+![illustration of spacing between form elements inside of a card](https://user-images.githubusercontent.com/39704901/143141662-0f20eec4-8b27-44fe-96f5-1bf1c4d567aa.png)
+
+### Large
+
+Use `large` spacing for higher-level "parent" containers.
+[Modal](/components/modal) uses `large` spacing in its header and around the
+edges to give itself a bit more prominence as a "standalone" view, in a similar
+manner to [Page](/components/page).
+
+`Large` can also be used to help give a "floating" element some clear separation
+from the edge of its container, as seen in [Toast](/components/toast).
+
+![illustration of the large space around a Modal's header and content, a Page's outer padding, and a Toast near the bottom of a viewport](https://user-images.githubusercontent.com/39704901/143152557-8fca3292-dc07-4f9b-a33b-f4d4603c9dd2.png)
+
+### Larger
+
+`Larger` doubles the value of `base` to very clearly delineate two groups of
+content that themselves use `base`. It may be useful if you have a long list of
+mixed content types that need to be broken up.
+
+![illustration of larger spacing being used to break up unrelated sections of content](https://user-images.githubusercontent.com/39704901/143141846-43606573-1383-4ad2-9d95-46611488cbae.png)
+
+### Largest and Extravagant
+
+You’ll probably never need these unless you’re doing a custom layout, but
+they’re here if you need ‘em. These values are equivalent to `48px` and `64px`
+respectively.
+
+---
+
+## Implementation
+
+### Content
+
+Use the [Content component](/components/content) for any instances where you
+need uniform spacing between elements.
+
+Content can set its spacing to either `small`, `base`, or `large`; follow the
+guidelines above as needed.
+
+### Values
+
+export function Example({ of: size }) {
+  const style = {
+    width: `var(--space-${size})`,
+    height: "var(--space-base)",
+    backgroundColor: "var(--color-indigo)",
+  };
+  return <div style={style} />;
+}
+
+export function Height({ of: size }) {
+  const element = document.createElement("div");
+  element.style.height = `var(--space-${size})`;
+  document.body.appendChild(element);
+  const value = getComputedStyle(element).height;
+  element.remove();
+  return value;
+}
+
+| Name                  | Visual                       | Value                       |
+| :-------------------- | :--------------------------- | :-------------------------- |
+| `--space-minuscule`   | <Example of="minuscule" />   | <Height of="minuscule" />   |
+| `--space-smallest`    | <Example of="smallest" />    | <Height of="smallest" />    |
+| `--space-smaller`     | <Example of="smaller" />     | <Height of="smaller" />     |
+| `--space-small`       | <Example of="small" />       | <Height of="small" />       |
+| `--space-base`        | <Example of="base" />        | <Height of="base" />        |
+| `--space-large`       | <Example of="large" />       | <Height of="large" />       |
+| `--space-larger`      | <Example of="larger" />      | <Height of="larger" />      |
+| `--space-largest`     | <Example of="largest" />     | <Height of="largest" />     |
+| `--space-extravagant` | <Example of="extravagant" /> | <Height of="extravagant" /> |

package/src/Typography.mdx

@@ -0,0 +1,191 @@
+---
+name: Typography
+menu: Design
+route: /typography
+---
+
+import { Playground } from "docz";
+import { Heading } from "@jobber/components/Heading";
+import { Text } from "@jobber/components/Text";
+import { Emphasis } from "@jobber/components/Emphasis";
+import { Content } from "@jobber/components/Content";
+import { Button } from "@jobber/components/Button";
+import { Checkbox } from "@jobber/components/Checkbox";
+import { InputText } from "@jobber/components/InputText";
+import { Table, Header, Row, Cell } from "@jobber/components/Table";
+
+# Typography
+
+When a designer is talking about "type", it's unlikely they're asking about the
+latest Typescript linting rules! Typography is a core aspect of any user
+interface, and we've built a system that should make it simple for our
+interfaces to be built with consistent, considered typographic elements.
+
+The Atlantis typography system is based on the core components of
+[Heading](/packages-components-src-heading-heading) and
+[Text](/packages-components-src-text-text).
+
+<Playground>
+  <Content>
+    <Heading level={1}>
+      A <Emphasis variation="highlight">prominent</Emphasis> heading
+    </Heading>
+    <Text>
+      A longer body of text that's better suited for readabilty at smaller
+      sizes. Typically a paragraph should be displayed in a typeface that has a
+      moderate weight, and is <Emphasis variation="italic">relatively</Emphasis>{" "}
+      free of flourish.
+    </Text>
+  </Content>
+</Playground>
+
+Heading and Text are extended by the ability to add
+[Emphasis](/packages-components-src-emphasis-emphasis) to these components as
+needed.
+
+There are some foundational elements that make up these components:
+
+## Font families
+
+### Display
+
+Jobber Pro is Jobber's internal typeface and is only suitable for use in Jobber
+products. It lends a hefty-but-professional face to larger usages such as page
+titles and main section headings.
+
+As Jobber Pro is a custom typeface licensed specifically for Jobber usage, it
+will be rendered in any environments where it is licensed for use. In external
+usages, [Poppins](https://fonts.google.com/specimen/Poppins) is Atlantis'
+fallback display face. It has similar structural features and optical sizing as
+Jobber Pro.
+
+<Playground>
+  <Content>
+    <Heading level={2}>Jobber Pro is used for bold statements</Heading>
+  </Content>
+</Playground>
+
+### Base
+
+[Inter](https://fonts.google.com/specimen/Inter) is our most broadly-used
+typeface. It is used for body copy, most headings, data display, form inputs,
+labels, and more!
+
+<Playground>
+  <Content spacing="large">
+    <Heading level={3}>Inter is for less prominent headings</Heading>
+    <Text>
+      You can also use it for longer, more readable statements in paragraphs,
+      descriptive text, in lists, and more. If you've been paying careful
+      attention, you might have noticed that Atlantis even uses Inter for
+      presenting documentation!
+    </Text>
+    <Checkbox checked label="Inter can label inputs nicely"></Checkbox>
+    <InputText
+      defaultValue="It's great for input values too"
+      placeholder="Inter for labels"
+    />
+    <Table>
+      <Header>
+        <Cell>Inter</Cell>
+        <Cell>Renders</Cell>
+        <Cell align="right">Data</Cell>
+      </Header>
+      <Row>
+        <Cell>Data point</Cell>
+        <Cell>More data</Cell>
+        <Cell align="right">$280</Cell>
+      </Row>
+      <Row>
+        <Cell>Another data point</Cell>
+        <Cell>Additional values</Cell>
+        <Cell align="right">$200</Cell>
+      </Row>
+    </Table>
+  </Content>
+</Playground>
+
+## Font sizes
+
+At the default zoom level, our base font-size is equivalent to `14px`. Depending
+on the context in which your typography is being used, font-size can be adjusted
+to be larger or smaller than the base font-size.
+
+Suggestions for when to use varying font-sizes are discussed in the
+[Heading](/packages-components-src-heading-heading) component, and within the
+[Sizes](/packages-components-src-text-text#sizes) section of the Text component.
+
+export function Example({ of: size }) {
+  const style = {
+    fontSize: `var(--typography--fontSize-${size})`,
+  };
+  return <div style={style}>{size}</div>;
+}
+
+export function PixelSize({ of: size }) {
+  const element = document.createElement("div");
+  element.style.fontSize = `var(--typography--fontSize-${size})`;
+  document.body.appendChild(element);
+  const value = getComputedStyle(element).fontSize;
+  element.remove();
+  return value;
+}
+
+| Name                                 | Visual                       | Value                          |
+| :----------------------------------- | :--------------------------- | :----------------------------- |
+| `--typography--fontSize-smaller`     | <Example of="smaller" />     | <PixelSize of="smaller" />     |
+| `--typography--fontSize-small`       | <Example of="small" />       | <PixelSize of="small" />       |
+| `--typography--fontSize-base`        | <Example of="base" />        | <PixelSize of="base" />        |
+| `--typography--fontSize-large`       | <Example of="large" />       | <PixelSize of="large" />       |
+| `--typography--fontSize-larger`      | <Example of="larger" />      | <PixelSize of="larger" />      |
+| `--typography--fontSize-largest`     | <Example of="largest" />     | <PixelSize of="largest" />     |
+| `--typography--fontSize-jumbo`       | <Example of="jumbo" />       | <PixelSize of="jumbo" />       |
+| `--typography--fontSize-extravagant` | <Example of="extravagant" /> | <PixelSize of="extravagant" /> |
+
+## Line-height
+
+Line-height, or
+[leading](https://www.shillingtoneducation.com/blog/leading-typography/), is the
+space between subsequent lines of type. The line-heights in the `Heading` and
+`Text` components are optimized for each variation's unique combination of
+font-size, weight, and family, so you don't need to adjust their line-height
+manually when you use them.
+
+At smaller sizes, a more generous line-height relative to the font-size allows
+the user to more easily parse multiple lines of small text. As font-size
+increases into "display" sizes such as a level 1 `Heading`, the ratio of
+line-height to font-size decreases as the larger font-size is more readable and
+requires less line-to-line breathing room.
+
+export function Visual({ of: size }) {
+  const style = {
+    lineHeight: `var(--typography--lineHeight-${size})`,
+  };
+  return (
+    <div style={style}>
+      Line-height, or leading, is the space between subsequent lines of type.
+      The line-heights in the Heading and Text components are optimized for each
+      variation's unique combination of...
+    </div>
+  );
+}
+
+export function Value({ of: size }) {
+  const element = document.createElement("div");
+  element.style.lineHeight = `var(--typography--lineHeight-${size})`;
+  document.body.appendChild(element);
+  const value =
+    parseFloat(getComputedStyle(element).lineHeight) /
+    parseFloat(getComputedStyle(element).fontSize);
+  element.remove();
+  return parseFloat(value.toFixed(3));
+}
+
+| Name                                 | Visual                    | Value                    |
+| :----------------------------------- | :------------------------ | :----------------------- |
+| `--typography--lineHeight-large`     | <Visual of="large" />     | <Value of="large" />     |
+| `--typography--lineHeight-base`      | <Visual of="base" />      | <Value of="base" />      |
+| `--typography--lineHeight-tight`     | <Visual of="tight" />     | <Value of="tight" />     |
+| `--typography--lineHeight-tighter`   | <Visual of="tighter" />   | <Value of="tighter" />   |
+| `--typography--lineHeight-tightest`  | <Visual of="tightest" />  | <Value of="tightest" />  |
+| `--typography--lineHeight-miniscule` | <Visual of="miniscule" /> | <Value of="miniscule" /> |

package/src/animation.mdx

@@ -0,0 +1,82 @@
+---
+name: Animation
+menu: Design
+route: /animation
+---
+
+# Animation
+
+## Patterns
+
+Animations in Jobber fall under categories based on their purpose:
+
+### Reveal
+
+Reveals are used to show and hide information on the screen. For example,
+toasts, modals, sidebars appearing and disappearing on the screen.
+
+### State change
+
+State changes are used to inform the user that a context change is taking place.
+This is used when the object has changed state due to user interaction (e.g.
+hover and focus states).
+
+### Emphasis
+
+Emphasis is used to bring attention to something on already on the screen. For
+example, when you want to guide users to a particular part of the interface for
+onboarding or learning purposes.
+
+### Delighter
+
+Delighters can be used occasionally to create surprise and delight, and can give
+personality to our brand. These can be used to reinforce success in an important
+milestones in a user's journey.
+
+## Timing
+
+Use judgement when determining the appropriate timing durations for animations.
+This will depend on the size of the element and the distance it covers.
+Animations for larger elements or longer distances should be longer than smaller
+elements or shorter distances.
+
+| Name               | Value | Examples of use                                         |
+| :----------------- | :---- | :------------------------------------------------------ |
+| `--timing-quick`   | 100ms | smaller elements exiting, small elements, state changes |
+| `--timing-base`    | 200ms | larger elements exiting, small elements, state changes  |
+| `--timing-slow`    | 300ms | modals, side panels                                     |
+| `--timing-slower`  | 400ms | large elements traversing across large area             |
+| `--timing-slowest` | 500ms | page transitions                                        |
+
+## Easing
+
+Animations are linear by default, but this lends an uncanny robotic feeling to
+the motion of an element. Easing creates a more natural, pleasing transition
+between animation states to mimic the acceleration and deceleration of objects
+in the real world.
+
+### Ease in
+
+Starts slow and speeds up. Use for exiting elements that don’t fade out.
+
+### Ease out
+
+Starts fast and slows down. Use for entering elements. For example, opening a
+toast, modal, or menu.
+
+### Ease both
+
+Combines features of ease in and out curves. Use for moving from point to point,
+or for when the element disappears from the screen, but the user can return to
+the previous place at any time. For example, opening and closing a side drawer,
+side nav, or accordion.
+
+### Linear
+
+Use for color and opacity changes (things that don’t move).
+
+| Name          | Value                           |
+| :------------ | :------------------------------ |
+| `--ease-in`   | cubic-bezier(0.4, 0, 1, 0.9, 0) |
+| `--ease-out`  | cubic-bezier (0, 0, 0.4, 1)     |
+| `--ease-both` | cubic-bezier(0.5, 0, 0.4, 1)    |

package/src/borders.css

@@ -0,0 +1,6 @@
+:root {
+  --border-base: var(--space-minuscule);
+  --border-thick: var(--space-smallest);
+  --border-thicker: var(--space-smaller);
+  --border-thickest: var(--space-small);
+}

package/src/colors.css

@@ -0,0 +1,178 @@
+:root {
+  /* Jobber Semantic Layer */
+
+  /* Interactive and States */
+  --color-interactive: var(--color-green);
+  --color-interactive--hover: var(--color-green--dark);
+  --color-destructive: var(--color-red);
+  --color-destructive--hover: var(--color-red--dark);
+  --color-interactive--subtle: var(--color-greyBlue);
+  --color-interactive--subtle--hover: var(--color-greyBlue--dark);
+
+  --color-disabled: var(--color-grey);
+  --color-disabled--secondary: var(--color-grey--lighter);
+
+  --color-focus: var(--color-yellow--light);
+
+  /* Status Colours */
+
+  --color-critical: var(--color-red);
+  --color-critical--surface: var(--color-red--lightest);
+  --color-critical--onSurface: var(--color-red--dark);
+
+  --color-warning: var(--color-yellow);
+  --color-warning--surface: var(--color-yellow--lightest);
+  --color-warning--onSurface: var(--color-yellow--dark);
+
+  --color-success: var(--color-green);
+  --color-success--surface: var(--color-green--lightest);
+  --color-success--onSurface: var(--color-green--dark);
+
+  --color-informative: var(--color-lightBlue);
+  --color-informative--surface: var(--color-lightBlue--lightest);
+  --color-informative--onSurface: var(--color-lightBlue--dark);
+
+  --color-inactive: var(--color-blue--light);
+  --color-inactive--surface: var(--color-blue--lightest);
+  --color-inactive--onSurface: var(--color-blue--dark);
+
+  /* Typography */
+  --color-heading: var(--color-blue);
+  --color-text: var(--color-greyBlue--dark);
+  --color-text--secondary: var(--color-greyBlue);
+  --color-text--reverse: var(--color-white);
+  --color-text--reverse--secondary: var(--color-greyBlue--lighter);
+
+  /* Surfaces and Borders */
+  --color-surface: var(--color-white);
+  --color-surface--hover: var(--color-yellow--lightest);
+  --color-surface--active: var(--color-green--lightest);
+  --color-surface--background: var(--color-grey--lightest);
+  --color-surface--reverse: var(--color-blue);
+
+  --color-border: var(--color-grey--lighter);
+  --color-border--section: var(--color-blue);
+
+  --color-overlay: rgba(var(--color-black--rgb), 0.32);
+  --color-overlay--dimmed: rgba(var(--color-white--rgb), 0.6);
+
+  /* Brand */
+  --color-brand: var(--color-green);
+  --color-brand--highlight: rgb(160, 215, 42);
+
+  /* Jobber Workflow Colors */
+  --color-request: var(--color-indigo);
+  --color-quote: var(--color-pink);
+  --color-job: var(--color-yellowGreen);
+  --color-visit: var(--color-green);
+  --color-task: var(--color-navy);
+  --color-event: var(--color-yellow);
+  --color-invoice: var(--color-purple);
+  --color-payments: var(--color-orange);
+
+  --color-client: var(--color-teal);
+
+  /* Jobber Base Palette */
+  --color-blue: rgb(1, 41, 57);
+  --color-blue--light: rgb(77, 105, 116);
+  --color-blue--lighter: rgb(153, 169, 176);
+  --color-blue--lightest: rgb(217, 223, 225);
+  --color-blue--dark: rgb(1, 27, 37);
+
+  --color-green: rgb(125, 176, 14);
+  --color-green--light: rgb(164, 200, 86);
+  --color-green--lighter: rgb(203, 223, 159);
+  --color-green--lightest: rgb(236, 243, 219);
+  --color-green--dark: rgb(81, 114, 9);
+
+  --color-lime: rgb(153, 193, 70);
+  --color-lime--light: rgb(184, 212, 126);
+  --color-lime--lighter: rgb(214, 230, 181);
+  --color-lime--lightest: rgb(240, 246, 227);
+  --color-lime--dark: rgb(99, 125, 46);
+
+  --color-yellowGreen: rgb(187, 197, 32);
+  --color-yellowGreen--light: rgb(207, 214, 99);
+  --color-yellowGreen--lighter: rgb(228, 232, 166);
+  --color-yellowGreen--lightest: rgb(245, 246, 222);
+  --color-yellowGreen--dark: rgb(122, 128, 21);
+
+  --color-yellow: rgb(221, 195, 15);
+  --color-yellow--light: rgb(231, 213, 87);
+  --color-yellow--lighter: rgb(241, 231, 159);
+  --color-yellow--lightest: rgb(250, 246, 219);
+  --color-yellow--dark: rgb(144, 127, 10);
+
+  --color-red: rgb(201, 66, 33);
+  --color-red--light: rgb(233, 141, 119);
+  --color-red--lighter: rgb(255, 206, 194);
+  --color-red--lightest: rgb(255, 226, 219);
+  --color-red--dark: rgb(128, 25, 0);
+
+  --color-grey: rgb(181, 181, 181);
+  --color-grey--light: rgb(203, 203, 203);
+  --color-grey--lighter: rgb(225, 225, 225);
+  --color-grey--lightest: rgb(244, 244, 244);
+  --color-grey--dark: rgb(118, 118, 118);
+
+  --color-greyBlue--rgb: 101, 120, 132;
+  --color-greyBlue: rgba(var(--color-greyBlue--rgb), 1);
+  --color-greyBlue--light: rgb(147, 161, 169);
+  --color-greyBlue--lighter: rgb(193, 201, 206);
+  --color-greyBlue--lightest: rgb(232, 235, 237);
+  --color-greyBlue--dark: rgb(66, 78, 86);
+
+  --color-lightBlue: rgb(60, 162, 224);
+  --color-lightBlue--light: rgb(119, 190, 233);
+  --color-lightBlue--lighter: rgb(177, 218, 243);
+  --color-lightBlue--lightest: rgb(226, 241, 250);
+  --color-lightBlue--dark: rgb(39, 105, 146);
+
+  --color-purple: rgb(136, 112, 196);
+  --color-purple--light: rgb(172, 155, 214);
+  --color-purple--lighter: rgb(207, 198, 231);
+  --color-purple--lightest: rgb(237, 234, 246);
+  --color-purple--dark: rgb(88, 73, 127);
+
+  --color-pink: rgb(179, 96, 150);
+  --color-pink--light: rgb(202, 144, 182);
+  --color-pink--lighter: rgb(225, 191, 213);
+  --color-pink--lightest: rgb(244, 231, 239);
+  --color-pink--dark: rgb(116, 62, 98);
+
+  --color-teal: rgb(62, 173, 146);
+  --color-teal--light: rgb(120, 198, 179);
+  --color-teal--lighter: rgb(178, 222, 211);
+  --color-teal--lightest: rgb(226, 243, 239);
+  --color-teal--dark: rgb(40, 112, 95);
+
+  --color-orange: rgb(243, 150, 36);
+  --color-orange--light: rgb(247, 182, 102);
+  --color-orange--lighter: rgb(250, 213, 167);
+  --color-orange--lightest: rgb(253, 239, 222);
+  --color-orange--dark: rgb(158, 98, 23);
+
+  --color-brown: rgb(130, 107, 70);
+  --color-brown--light: rgb(168, 151, 126);
+  --color-brown--lighter: rgb(205, 196, 181);
+  --color-brown--lightest: rgb(236, 233, 227);
+  --color-brown--dark: rgb(85, 70, 46);
+
+  --color-navy: rgb(75, 106, 150);
+  --color-navy--light: rgb(129, 151, 182);
+  --color-navy--lighter: rgb(183, 195, 213);
+  --color-navy--lightest: rgb(228, 233, 239);
+  --color-navy--dark: rgb(49, 69, 98);
+
+  --color-indigo: rgb(85, 106, 203);
+  --color-indigo--light: rgb(136, 151, 219);
+  --color-indigo--lighter: rgb(187, 195, 234);
+  --color-indigo--lightest: rgb(230, 233, 247);
+  --color-indigo--dark: rgb(55, 69, 132);
+
+  --color-white--rgb: 255, 255, 255;
+  --color-white: rgba(var(--color-white--rgb), 1);
+
+  --color-black--rgb: 0, 0, 0;
+  --color-black: rgba(var(--color-black--rgb), 1);
+}

package/src/elevations.css

@@ -0,0 +1,12 @@
+:root {
+  --elevation-base: 1;
+  --elevation-menu: 6;
+  --elevation-datepicker: 6;
+  /**
+   * Modal has this much z-index to overcome docz z-index. This can be lowered
+   * once we create our own docz theme
+   */
+  --elevation-modal: 1001;
+  --elevation-tooltip: 1002;
+  --elevation-toast: 1003;
+}

package/src/foundation.css

@@ -0,0 +1,11 @@
+@import "./borders.css";
+@import "./colors.css";
+@import "./radii.css";
+@import "./spacing.css";
+@import "./shadows.css";
+@import "./timings.css";
+@import "./elevations.css";
+@import "./typography.css";
+@import "./responsiveBreakpoints.css";
+@import "./styles.css";
+@import "@jobber/fonts";