[#2452] Added paragraph tokens, bumped version

maykinmedia · May 27, 2024 · 8bfb388 · 8bfb388
1 parent 91d4e8a
commit 8bfb388
Show file tree

Hide file tree

Showing 13 changed files with 226 additions and 170 deletions.
diff --git a/README.md b/README.md
@@ -1,45 +1,34 @@
 # Design Tokens
 
-The Open Inwoner project has the goal to follow the
+The Open Inwoner Project (OIP) 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
+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`.
 
-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.
+Long term goal is to make it possible for different municipalities to make their own design-tokens
+and then simply switch themes in OIP.
 
-The draft [Design Token Format](https://design-tokens.github.io/community-group/format/) drives the
-structure of these design tokens.
-
-## Add this as a submodule
-
-In the root folder of your project, create a dir or directly add the submodule in its own directory:
-
-```bash
-cd open-inwoner-design-tokens
-
-git submodule add [email protected]:maykinmedia/open-inwoner-design-tokens.git
+**Using tokens**
 
-git status
+If you are only _consuming_ the design tokens, the easiest integration path is adding the
+NPM-package in your own project.
 
-git submodule update --init
-```
+## Add this package to your project
 
-Do not forget to commit these changes to your repository.
+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.
 
-If you are using Github actions, add these to your script:
+Get the node module from https://www.npmjs.com/package/@open-inwoner/design-tokens
 
 ```bash
-      - uses: actions/checkout@v3
-        with:
-          submodules: 'true'
+npm i @open-inwoner/design-tokens
 ```
 
-
 ## Usage
 
 Install the necessary modules (from inside the `open-inwoner-design-tokens` directory):
@@ -54,22 +43,33 @@ 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.
+Import the CSS in your own CSS files by using our theme class in your Master HTML template
 
-```bash
-git submodule update --remote --merge
+```HTML
+
+<html lang="nl" class="view openinwoner-theme">
 ```
 
-**Using tokens**
+```css
+.openinwoner-theme {
+. . .
+}
+```
 
-If you are only _consuming_ the design tokens, the easiest integration path is adding this
-package in your own project.
+## Developing and using tokens
 
-Then, import the desired build target artifact and run your usual build chain.
+In case you do not just wish to consume, but add completely new tokens or adjust their values,
+follow these steps. Then, import the desired build target artifact and run your usual build chain.
+
+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.
 
-**Developing and using tokens**
+The draft [Design Token Format](https://design-tokens.github.io/community-group/format/) drives the
+structure of these design tokens.
 
-If you actively need to add or change design tokens, we recommend installing the package locally and
+For adding or changing 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.
 
@@ -101,7 +101,9 @@ tokens. E.g. if you have two tokens definition files like:
 {
   "oip": {
     "color": {
-      "fg": {"value": "#000000"}
+      "fg": {
+        "value": "#000000"
+      }
     }
   }
 }
@@ -112,7 +114,9 @@ tokens. E.g. if you have two tokens definition files like:
   "oip": {
     "color": {
       "fg": {
-        "muted": {"value": "#000000"}
+        "muted": {
+          "value": "#000000"
+        }
       }
     }
   }
@@ -137,10 +141,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
+
+In the root folder of your project, create a dir or directly add the submodule in its own directory:
+
+```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
+```
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@open-inwoner/design-tokens",
-  "version": "0.0.3-alpha.0",
+  "version": "0.0.5-alpha.4",
   "description": "Design tokens for Open Inwoner",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

diff --git a/src/brand/openinwoner/color.tokens.json b/src/brand/openinwoner/color.tokens.json
@@ -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"
-          }
-        }
+        "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",
@@ -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."
       }
     }
   }

diff --git a/src/brand/openinwoner/typography.tokens.json b/src/brand/openinwoner/typography.tokens.json
@@ -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"},

diff --git a/src/community/utrecht/heading-1.tokens.json b/src/community/utrecht/heading-1.tokens.json
diff --git a/src/community/utrecht/heading-2.tokens.json b/src/community/utrecht/heading-2.tokens.json
diff --git a/src/community/utrecht/heading-3.tokens.json b/src/community/utrecht/heading-3.tokens.json
diff --git a/src/community/utrecht/heading-4.tokens.json b/src/community/utrecht/heading-4.tokens.json