Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[#2452] Add paragraph tokens, bump version #9

Merged
merged 2 commits into from
Jun 6, 2024
Merged

[#2452] Add paragraph tokens, bump version #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8bfb388
[#2452] Added paragraph tokens, bumped version
jiromaykin May 21, 2024
9705946
[#2452] Processed PR feedback for paragraphs
jiromaykin May 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
115 changes: 72 additions & 43 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,44 +1,39 @@
# Design Tokens

The Open Inwoner project has the goal to follow the
[NL Design System](https://github.com/nl-design-system). We organize
the design tokens in JSON files and use them within the Open Inwoner
The Open Inwoner Platform (OIP) project has the goal to follow the [NL Design System](https://github.com/nl-design-system). We organize the design tokens in JSON files and use them within the Open Inwoner
backend project.

## How it works

Specify the design tokens in JSON files, which are picked up and merged using the
[style-dictionary](https://www.npmjs.com/package/style-dictionary) library. The resulting packages
include various build targets, such as ES6 modules, CSS variables files, SASS vars... to be consumed
in downstream projects.

The draft [Design Token Format](https://design-tokens.github.io/community-group/format/) drives the
structure of these design tokens.
For any component that OIP has that corresponds with a community component, we use the community
classes. But for any component that OIP has that does not have an NLDS equivalent, we use our own
OIP brand tokens. We also set OIP (brand/component) tokens in case we have certain values that are
used repeatedly, like for example `border-radius`.

## Add this as a submodule
Long term goal is to make it possible for different municipalities to make their own design-tokens
and then simply switch themes in OIP.

In the root folder of your project, create a dir or directly add the submodule in its own directory:
## How it works

```bash
cd open-inwoner-design-tokens
The design tokens are specified in JSON files, which are picked up and merged using the
[style-dictionary](https://www.npmjs.com/package/style-dictionary) library. The resulting packages
include various build targets, such as CSS variables files, SASS vars... to be consumed in downstream projects.

git submodule add git@github.com:maykinmedia/open-inwoner-design-tokens.git
The draft [Design Token Format](https://design-tokens.github.io/community-group/format/) drives the structure of these design tokens.

git status
**Using tokens**

git submodule update --init
```
If you are only _consuming_ the design tokens, the easiest integration path is adding the
NPM-package in your own project.

Do not forget to commit these changes to your repository.
## Add this package to your project

If you are using Github actions, add these to your script:
This package can be added to your project as an NPM node module: after building the node, you will
only need to work with its rendered CSS. The easiest integration path is adding the NPM package as dependency to your project:

```bash
- uses: actions/checkout@v3
with:
submodules: 'true'
npm install --save-dev @open-inwoner/design-tokens
```

This gets the node module from https://www.npmjs.com/package/@open-inwoner/design-tokens

## Usage

Expand All @@ -54,27 +49,24 @@ Generate the CSS files
npm run build
```

In order to update an existing Git submodule, you need to execute the “git submodule update” with the “–remote” and the “–merge” option.

```bash
git submodule update --remote --merge
```
Import the CSS in your own CSS files by using our theme class in your Master HTML template

**Using tokens**
```HTML

If you are only _consuming_ the design tokens, the easiest integration path is adding this
package in your own project.
<html lang="nl" class="view openinwoner-theme">
```

Then, import the desired build target artifact and run your usual build chain.
```css
.openinwoner-theme {
...
}
```

**Developing and using tokens**
## Developing and using tokens

If you actively need to add or change design tokens, we recommend installing the package locally and
using npm workspaces or `npm link` for the least-friction experience. You can include the package as
a git-submodule and leverage npm workspaces with instructions in the downstream projects.
In case you do not just wish to consume, but add completely new tokens or adjust their values, we recommend installing the package locally and using npm workspaces or `npm link` for the least-friction experience. You can include the package as a git-submodule and leverage npm workspaces with instructions in the downstream projects.

This allows you to create atomic PRs with design token changes, while being able to develop against
the newest changes.
This allows you to create atomic PRs with design token changes, while being able to develop against the newest changes.

Run:

Expand All @@ -101,7 +93,9 @@ tokens. E.g. if you have two tokens definition files like:
{
"oip": {
"color": {
"fg": {"value": "#000000"}
"fg": {
"value": "#000000"
}
}
}
}
Expand All @@ -112,7 +106,9 @@ tokens. E.g. if you have two tokens definition files like:
"oip": {
"color": {
"fg": {
"muted": {"value": "#000000"}
"muted": {
"value": "#000000"
}
}
}
}
Expand All @@ -137,10 +133,43 @@ e.g.:
{
"oip": {
"color": {
"fg-muted": {"value": "#000000"}
"fg-muted": {
"value": "#000000"
}
}
}
}
```

The latter form is harder to keep track off across files though.

### Add as a submodule instead of NPM

From the root folder of your project:

```bash
cd open-inwoner-design-tokens

git submodule add [email protected]:maykinmedia/open-inwoner-design-tokens.git

git status

git submodule update --init
```

Do not forget to commit these changes to your repository.

If you are using Github actions, add these to your script:

```bash
- uses: actions/checkout@v3
with:
submodules: 'true'
```

In order to update an existing Git submodule, you need to execute the “git submodule update” with
the “–remote” and the “–merge” option.

```bash
git submodule update --remote --merge
```
4 changes: 2 additions & 2 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@open-inwoner/design-tokens",
"version": "0.0.3-alpha.0",
"version": "0.0.5-alpha.5",
"description": "Design tokens for Open Inwoner",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
Expand Down
88 changes: 14 additions & 74 deletions src/brand/openinwoner/color.tokens.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,101 +59,43 @@
},
"success": {
"value": "#4A7746",
"comment": "The dark green text color for success states and/or messages.",
"$extensions": {
"dte.metadata": {
"isCurated": true,
"category": "color"
}
}
"comment": "The dark green text color for success states and/or messages."
},
"success-light": {
"value": "#ecf4ec",
"comment": "The light green background color for success states and/or messages.",
"$extensions": {
"dte.metadata": {
"isCurated": true,
"category": "color"
}
}
"comment": "The light green background color for success states and/or messages."
},
"warning": {
"value": "#704000",
"comment": "The dark orange text color for warning states and/or messages.",
"$extensions": {
"dte.metadata": {
"isCurated": true,
"category": "color"
}
}
"comment": "The dark orange text color for warning states and/or messages."
},
"warning-light": {
"value": "#ffdcad",
"comment": "The light orange background color for warning states and/or messages.",
"$extensions": {
"dte.metadata": {
"isCurated": true,
"category": "color"
}
}
"comment": "The light orange background color for warning states and/or messages."
},
"danger": {
"value": "#5c000f",
"comment": "The dark red text color for error/critical states and/or messages.",
"$extensions": {
"dte.metadata": {
"isCurated": true,
"category": "color"
}
}
"comment": "The dark red text color for error/critical states and/or messages."
},
"danger-light": {
"value": "#ffdbe1",
"comment": "The light red background color for error/critical states and/or messages.",
"$extensions": {
"dte.metadata": {
"isCurated": true,
"category": "color"
}
}
"comment": "The light red background color for error/critical states and/or messages."
},
"bg": {
"value": "#ffffff",
"comment": "Background color for the (main) user interface.",
"$extensions": {
"dte.metadata": {
"isCurated": true,
"category": "color"
}
}
"comment": "Background color for the (main) user interface."
},
"fg": {
"value": "#4b4b4b",
"comment": "Blackish foreground color for the (main) user interface.",
"$extensions": {
"dte.metadata": {
"isCurated": true,
"category": "color"
}
}
"comment": "Blackish foreground color for the (main) user interface."
},
"fg-muted": {
"value": "#d2d2d2",
"comment": "Font/foreground color for non-actionable or less-important content.",
"$extensions": {
"dte.metadata": {
"category": "color"
}
}
"value": "#949494",
"comment": "Font/foreground color for non-actionable or less-important content."
},
"fg-heading": {
"value": "#000000",
"comment": "Black foreground color for fully black elements.",
"$extensions": {
"dte.metadata": {
"category": "color"
}
}
"comment": "Black foreground color for fully black elements."
},
"border": {
"value": "#d2d2d2",
Expand All @@ -167,11 +109,9 @@
},
"border": {}
},
"read-only": {
"bg": {
"value": "#d2d2d2",
"comment": "Default color for disabled/non-interactable input elements."
}
"red-notification": {
"value": "#d94100",
"comment": "The bright red color for notification badges and texts."
}
}
}
Expand Down
3 changes: 0 additions & 3 deletions src/brand/openinwoner/typography.tokens.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,6 @@
"fg": {"value": "{oip.color.fg}"},
"font-family": {"value": "Heading"}
},
"utrecht-link": {
"font-family": {"value": "{oip.typography.sans-serif.font-family}"}
},
"text": {
"margin": {"value": "20px"},
"font-size": {"value": "16px"},
Expand Down
13 changes: 0 additions & 13 deletions src/community/utrecht/heading-1.tokens.json
View file
Open in desktop

This file was deleted.

14 changes: 0 additions & 14 deletions src/community/utrecht/heading-2.tokens.json
View file
Open in desktop

This file was deleted.

13 changes: 0 additions & 13 deletions src/community/utrecht/heading-3.tokens.json
View file
Open in desktop

This file was deleted.

13 changes: 0 additions & 13 deletions src/community/utrecht/heading-4.tokens.json
View file
Open in desktop

This file was deleted.

Loading
Loading