@jobber/design NPM

Foundation

Foundational colors, styling and design tokens for the Jobber Atlantis Design System

Installation

npm install @jobber/design

Usage

@jobber/design ships foundation.css. It also provides utilities for getting icons svg path.

CSS

Foundation

Import the @jobber/design stylesheet into your own css

@import "~@jobber/design/foundation.css";

.myLabel {
  color: var(--color-blue);
  padding: var(--space-base);
}

For web, if design/foundation.css is already included you do not need to import it for every css file. For React Native, you need to import design/foundation.css in every css files that needs it.

icons

Import the getIcon utility into your JavaScript/Typescript file

import { getIcon } from "@jobber/design";

const { svgClassNames, paths, viewBox } = getIcon({
  name: "dashboard",
  color: "green",
  size: "large",
});

You can also get the type definitions for IconNames, IconColorNames, and IconSizes from @jobber/design

import type { IconNames, IconColorNames, IconSizes } from "@jobber/design";

If you need the actual css files for icons, you can import them from @jobber/design/icons. You may not need these files for the web but they might be required for React Native

@import "@jobber/design/foundation.css";
@import "@jobber/design/icons/Icon";
@import "@jobber/design/icons/Sizes";
@import "@jobber/design/icons/Colors";

PostCSS

Inject @jobber/foundation into your css with postcss

module.exports = {
  plugins: [
    require("postcss-preset-env")({
      importFrom: ["@jobber/design"],
    }),
  ],
};

Usage With React Native

To use tokens with React Native, add the following to the file containing your project's global styling:

// Import from `foundation.native` instead of `foundation` because foundation
// would resolve the typescript for the web foundation instead of the React Native version.
import { tokens as mobileFoundationBase } from "@jobber/design/foundation.native";
import { Platform } from "react-native";

const tokens: typeof mobileFoundationBase = Platform.select({
  ios: () => require("@jobber/design/foundation.ios").tokens,
  android: () => require("@jobber/design/foundation.android").tokens,
  default: () => require("@jobber/design/foundation.native").tokens,
})();

export const GlobalStyling = {
  ...tokens,
  ...otherStyles,
};

classnames

@infinitebrahmanuniverse/nolb-_job @everything-registry/sub-chunk-491 @jobber/components-native @jobber/docz-theme @jobber/docz-tools @jobber/components

2 days ago

10 days ago

10 days ago

11 days ago

17 days ago

17 days ago

27 days ago

1 month ago

30 days ago

1 month ago

29 days ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

4 months ago

5 months ago

5 months ago

5 months ago

6 months ago

6 months ago

9 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

8 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

6 months ago

7 months ago

6 months ago

5 months ago

5 months ago

7 months ago

7 months ago

5 months ago

6 months ago

6 months ago

6 months ago

6 months ago

11 months ago

11 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

1 year ago

1 year ago

12 months ago

11 months ago

1 year ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

1 year ago

12 months ago

1 year ago

1 year ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

0.31.3-JOB-23925.695824f.0

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

0.31.3-pre-JOB-23925.0

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

0.31.3-JOB-23925.eebd19e.0

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

0.31.3-JOB-23925.7d1bd71.0

1 year ago

0.32.1-create-npm.38

1 year ago

0.31.3-JOB-23925.79969c0.0

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

0.31.3-JOB-23925.99d3361.0

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

0.31.3-JOB-23925.37a58ff.0

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

0.31.3-JOB-23925.1b246aa.0

1 year ago

0.31.3-JOB-23925.de3ce3e.0

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago