npm - @utrecht/design-tokens - Versions diffs - 1.0.0-alpha.21 → 1.0.0-alpha.210 - Mend

@utrecht/design-tokens 1.0.0-alpha.21 → 1.0.0-alpha.210

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (117) hide show

package/README.md CHANGED Viewed

@@ -1,6 +1,8 @@
+<!-- @license CC0-1.0 -->
 # Design Tokens for the Utrecht Design System
-**This project is very much WORK IN PROGRESS and is released as _alpha_ version. Always define the exact version you want to use, and test for breaking changes before upgrading to a newer alpha release.**
+**This project is very much WORK IN PROGRESS and most parts are released as _alpha_ version. Always define the exact version you want to use, and test for breaking changes before upgrading to a newer alpha release.**
 Design tokens are design decisions for our design system, in this case maintained in JSON files, and distributed in various other code languages for easy reuse.
@@ -8,7 +10,7 @@ The design tokens in this package serve as single source of truth for the look a
 ## List of all design tokens
-To find out what design tokens are available, browser through the `.style-dictionary.json` files in the `src/` directory.
+To find out what design tokens are available, browser through the `.tokens.json` files in the `src/` directory.
 We currently don't have any additional documentation for every specific design token.
@@ -26,7 +28,7 @@ Design decisions at a component level, to make components look a very specific w
 ## Files in this package
-### `dist/theme/index.css`
+### `dist/index.css`
 Opt-in way to apply all the CSS variables to HTML elements with the `utrecht-theme` class name:
@@ -39,7 +41,7 @@ Opt-in way to apply all the CSS variables to HTML elements with the `utrecht-the
 This method is the preferred way to style the page.
-### `dist/index.css`
+### `dist/root.css`
 Automatically applies all the CSS variables to HTML elements to the `:root` element:
@@ -52,12 +54,12 @@ Automatically applies all the CSS variables to HTML elements to the `:root` elem
 This method should only be used in case there is no control over the HTML template and the `utrecht-theme` class name cannot be included.
-### `dist/properties.css`
+### `dist/property.css`
 Experimental CSS `@property` definitions for the design tokens that are configurable via CSS custom properties. Including these definitions is not necessarily side-effect free: with `syntax` _invalid values for custom properties will be ignored_, and `inherits` and `initial-value` declarations can influence behavior. Because [not all browsers support the `@property` declaration](https://caniuse.com/mdn-css_at-rules_property), including this file can result in rendering differences between browsers.
 ```html
-<link rel="stylesheet" href="https://unpkg.com/@utrecht/design-tokens/dist/properties.css" />
+<link rel="stylesheet" href="https://unpkg.com/@utrecht/design-tokens/dist/property.css" />
 ```
 This file should only be included when you have visual regression test for both browsers that do and don't support `@property`.
@@ -109,6 +111,14 @@ To use the design tokens in your site via CSS variables, first include the desig
 <link rel="stylesheet" href="https://unpkg.com/@utrecht/design-tokens/dist/index.css" />
 ```
+Then add the `utrecht-theme` class name to your page:
+```html
+<html class="utrecht-theme">
+  ...
+</html>
+```
 Now the CSS variables will be available and you can use of all the design tokens:
 ```css
@@ -122,7 +132,7 @@ Now the CSS variables will be available and you can use of all the design tokens
 ## Contributing
-The design tokens are stored in JSON files so we can use the design token translation tool [Style Dictionary](https://amzn.github.io/style-dictionary/) to make them available in many code languages. We use `.style-dictionary.json` as file extension for our design token definitions, to tell them apart from regular and unrelated `.json` files.
+The design tokens are stored in JSON files so we can use the design token translation tool [Style Dictionary](https://amzn.github.io/style-dictionary/) to make them available in many code languages. We use `.tokens.json` as file extension for our design token definitions, to tell them apart from regular and unrelated `.json` files.
 Style Dictionary [only recognizes one nesting level per file](https://github.com/amzn/style-dictionary/issues/366), so be careful to not to mix nesting levels in one file and separate them into multiple files.
@@ -143,7 +153,7 @@ The following example doesn't work, because the CSS output would only be `--utre
 Organize the design tokens in multiple files instead:
-`block.style-dictionary.json`:
+`block.tokens.json`:
 ```json
 {
@@ -158,7 +168,7 @@ Organize the design tokens in multiple files instead:
 }
 ```
-`modifier.style-dictionary.json`:
+`modifier.tokens.json`:
 ```json
 {