npm package: @raspberrypifoundation/design-system-core
Description: Markup and styles for the **Raspberry Pi Foundation Design System**
Latest version: 2.4.1

# RPF Design System - Core

Markup and styles for the **Raspberry Pi Foundation Design System**

<a href="https://design-system-core.rpf-internal.org/?path=/docs/about--docs">![CoreComponents](https://img.shields.io/badge/Core-Components_%28Storybook%29-label?style=for-the-badge&color=hsla%28223%2C%209%25%2C%2085%25%2C%201%29&labelColor=D95495)</a>

### Design System links:

<a href="https://rpf-design-system.pages.dev/">![DesignSystemDocumentation](https://img.shields.io/badge/Design_System-Documentation-label?style=for-the-badge&color=hsla(223%2C%209%25%2C%2085%25%2C%201)&labelColor=CD2355)</a>
<br>
<a href="https://github.com/raspberrypifoundation/design-system-react/">![ReactRepository](https://img.shields.io/badge/React-Repository-label?style=for-the-badge&color=hsla(223%2C%209%25%2C%2085%25%2C%201)&labelColor=00AECE)</a>
<a href="https://design-system-react.rpf-internal.org/?path=/docs/documentation-introduction--documentation">![ReactComponents](https://img.shields.io/badge/React-Components_(Storybook)-label?style=for-the-badge&color=hsla(223%2C%209%25%2C%2085%25%2C%201)&labelColor=00AECE)</a>
<br>
<a href="https://github.com/raspberrypifoundation/design-system-rails/">![RailsRepository](https://img.shields.io/badge/Rails-Repository-label?style=for-the-badge&color=hsla(223%2C%209%25%2C%2085%25%2C%201)&labelColor=CC0000)</a>
<a href="https://design-system-rails.rpf-internal.org/lookbook">![RailsComponents](https://img.shields.io/badge/Rails-Components_(Lookbook)-label?style=for-the-badge&color=hsla(223%2C%209%25%2C%2085%25%2C%201)&labelColor=CC0000)</a>

---

## Usage

```
npm install --save @raspberrypifoundation/design-system-core
```

### Development

Dependencies:
* asdf (https://asdf-vm.com/)

```
asdf install
```

Install packages:

```
npm i
```

Run Storybook:

```
npm run storybook
```


### Testing

Run the tests with `npm run test`.

If you get an error about Playwright not being installed, you can install it with `npx playwright install`.

#### Building

You can build a version of the compiled CSS by running `npm run build`.

#### Development and production builds

The CSS is built as part of the CD process, deploying to `https://static.raspberrypi.org/styles/design-system-core/branches/**insert branch name here**/design-system-core.css`. For example, the main branch will get built at

- https://static.raspberrypi.org/styles/design-system-core/branches/main/design-system-core.css

And [tagged releases](https://github.com/raspberrypifoundation/design-system-core/releases) will get built to versioned URLs of the following form, allowing downstream projects to track individual releases of the design system.

- `https://static.raspberrypi.org/styles/design-system-core/releases/vx.y.z/design-system-core.css`

#### Releasing a version

To find the current version, run `npm version` ([manual](https://docs.npmjs.com/cli/v8/commands/npm-version))

- To update the npm side of things, run `npm version x.y.z`, where `x`, `y` and `z` is a semantically versioned release number. You can also run `npm version patch`, for example.
- Create a tag by running `git tag v$version` - note the tag starts with a `v`
- Then run `git push` and the tag will be pushed
- [Create a release on GitHub](https://github.com/raspberrypifoundation/design-system-core/releases/new) and generate the default release notes
- This will trigger GitHub actions to build and release the new version.
- It will also deploy a built version of the CSS to `https://static.raspberrypi.org/styles/design-system-core/releases/**tag**/design-system.css`

#### Docker

To Do