		{
		"name": "@stepzen/design-system",
		"version": "0.2.0",
		"version": "0.3.0",
		"description": "StepZen design system",
		@@ -5,0 +5,0 @@ "main": "dist/cjs/index.js",

README.md

		@@ -14,8 +14,8 @@ # StepZen Design System

		- add an npm dependency: `npm install --save @stepzen/design-system`
		- inlcude styles into the `pages/_app.js`
		```js
		import '@stepzen/design-system/dist/css/index.css'
		```
		- That's it. Now you can access to the CSS custom properties, global styles and UI components from the StepZen design system in your `.css` and `.js` / `.ts` files.
		- add an npm dependency: `npm install --save @stepzen/design-system`
		- inlcude styles into the `pages/_app.js`
		```js
		import "@stepzen/design-system/dist/css/index.css";
		```
		- That's it. Now you can access to the CSS custom properties, global styles and UI components from the StepZen design system in your `.css` and `.js` / `.ts` files.

		@@ -25,9 +25,13 @@ ## Updating and publishing a new version
		Manual publishing steps:
		- `git clone git@github.com:steprz/design-system.git --depth 1`
		- `cd design-system`
		- `npm ci`
		- `npm version [new version]`
		- `npm run build`
		- `npm publish`

		- `git clone git@github.com:steprz/design-system.git --depth 1`
		- `cd design-system`
		- `npm ci`
		- `npm version [new version]`
		- `npm run build`
		- `npm publish`
		- `git push` (to push the version commit)
		- `git push --tags` (to push the new version tag)
		- create a GitHub release from the new version tag
		- post a summary to the `#dev-products-frontend` Slack channel

		@@ -39,16 +43,16 @@ ## Adding a new global style
		How to add a new global style to the StepZen design system:
		- consider if it would make sense to append the new style to one of the existing `.css` files
		- if not, create a new `stylesheet-name.css` file under `src/styles` (or `src/styles/tokens` for new design tokens)
		- write CSS as usual, assuming it is loaded into apps by a regular `<link rel="stylesheet">` tag
		- import the new .css file into `src/styles/index.css` with a relative `@import()`
		- create a `[StylesheetName].stories.mdx` file next to the `stylesheet-name.css` file (copy from one of the existing similar files)
		- update the `<Meta title="Design Tokens/Colors" />` tag in the copied file appropriately
		- describe the new stylesheet so that other engineers on the StepZen team know what it is and how to use it
		- publish a new version of the `@stepzen/design-system` package to npm (most likely, this would be a minor)
		- That's it. All apps using the StepZen design system via `import '@stepzen/design-system/dist/css/index.css'` will get new global styles after bumping the version of their `@stepzen/design-system` npm dependency.

		- consider if it would make sense to append the new style to one of the existing `.css` files
		- if not, create a new `stylesheet-name.css` file under `src/styles` (or `src/styles/tokens` for new design tokens)
		- write CSS as usual, assuming it is loaded into apps by a regular `<link rel="stylesheet">` tag
		- import the new .css file into `src/styles/index.css` with a relative `@import()`
		- create a `[StylesheetName].stories.mdx` file next to the `stylesheet-name.css` file (copy from one of the existing similar files)
		- update the `<Meta title="Design Tokens/Colors" />` tag in the copied file appropriately
		- describe the new stylesheet so that other engineers on the StepZen team know what it is and how to use it
		- publish a new version of the `@stepzen/design-system` package to npm (most likely, this would be a minor)
		- That's it. All apps using the StepZen design system via `import '@stepzen/design-system/dist/css/index.css'` will get new global styles after bumping the version of their `@stepzen/design-system` npm dependency.

		## Adding a new UI component

		__TBD__
		TBD

		@@ -61,6 +65,5 @@ Currently, the design system only includes a dummy sample `Button` component which is not intended for actual usage.

		- `npm run build` - (re)create a production design system bundle in the `dist/` folder (includes `.css`, `.js`, and `.d.ts` files)
		- `npm run storybook` - start a local Storybook server on http://localhost:6006
		- `npm run build-storybook` - create a production storybook bundle in the `storybook-static/` folder
		- `npx chromatic --project-token=<project-token>` - recreate a production srotybook bundle and publish it to `chromatic.com`. Copy the project token from https://www.chromatic.com/manage?appId=62ba1d9d935e74836cf81cae&view=configure. Typically you do not need to do that, since all branches on GitHub are automatically deployed to `chromatic.com` by the "Chromatic" GitHub workflow (see `.github/workflows/chromatic.yaml`).

		- `npm run build` - (re)create a production design system bundle in the `dist/` folder (includes `.css`, `.js`, and `.d.ts` files)
		- `npm run storybook` - start a local Storybook server on http://localhost:6006
		- `npm run build-storybook` - create a production storybook bundle in the `storybook-static/` folder
		- `npx chromatic --project-token=<project-token>` - recreate a production srotybook bundle and publish it to `chromatic.com`. Copy the project token from https://www.chromatic.com/manage?appId=62ba1d9d935e74836cf81cae&view=configure. Typically you do not need to do that, since all branches on GitHub are automatically deployed to `chromatic.com` by the "Chromatic" GitHub workflow (see `.github/workflows/chromatic.yaml`).

dist/css/tokens/colors.css