|
| 1 | +# Design Tokens |
| 2 | + |
| 3 | +This module is responsible for handling design tokens in Paragon, for rationale behind design tokens see [Scaling Paragon's styles architecture with design tokens](https://openedx.atlassian.net/wiki/spaces/BPL/pages/3630923811/Scaling+Paragon+s+styles+architecture+with+design+tokens) |
| 4 | +and relevant ADR(TODO: add link when we merge an ADR). |
| 5 | + |
| 6 | +## Overview |
| 7 | + |
| 8 | +We heavily rely on [style-dictionary](https://github.com/amzn/style-dictionary) package to build design tokens into various formats, |
| 9 | +it is recommended to read their [documentation](https://amzn.github.io/style-dictionary/#/) as well to know more about the package since we mostly focus on Paragon specifics in this document. |
| 10 | + |
| 11 | +All tokens are located in `src` directory and divided into three categories. We try to follow CTI token naming as described [here](https://amzn.github.io/style-dictionary/#/tokens?id=category-type-item), but our schema does have some differences, see tokens files for an example of that |
| 12 | + |
| 13 | +## Token modifications |
| 14 | + |
| 15 | +Style dictionary allows you to apply certain modifications to tokens during build time, e.g. if you want to make some color darker without |
| 16 | +manually calculating its value or trying to modify it with SASS functions after the variable has been built (note |
| 17 | +that most SASS functions will not work with CSS variables as SASS does not know values during compile time). |
| 18 | + |
| 19 | +All modifications need to be specified with `modify` key when describing a token, e.g. |
| 20 | +``` |
| 21 | +{ |
| 22 | + "value": "#D4F880", |
| 23 | + "modify": [{ |
| 24 | + "type": "darken" |
| 25 | + "amount": 0.1 |
| 26 | + }] |
| 27 | +} |
| 28 | +``` |
| 29 | +`modify` expects a list of modification to apply, each modification is specified with an object that carries necessary metadata, see examples below. |
| 30 | + |
| 31 | +### Color transforms |
| 32 | + |
| 33 | +Paragon uses [chroma-js](https://gka.github.io/chroma.js/) library to perform color modifications. Some of the most common examples are: |
| 34 | + |
| 35 | +1. `darken` – change lightness of a color (same behaviour as in respective SASS function), e.g. |
| 36 | + ``` |
| 37 | + { |
| 38 | + "value": "#D4F880", |
| 39 | + "modify": [{ |
| 40 | + "type": "darken" |
| 41 | + "amount": 0.1 |
| 42 | + }] |
| 43 | + } |
| 44 | + ``` |
| 45 | + outputs `#CFF37B` value |
| 46 | +
|
| 47 | +2. `mix` – mix two colors with specific ratio (same behaviour as in respective SASS function), e.g. |
| 48 | + ``` |
| 49 | + { |
| 50 | + "value": "#0A3055", |
| 51 | + "modify": [ |
| 52 | + { |
| 53 | + "type": "mix", |
| 54 | + "otherColor": "#FFF", |
| 55 | + "amount": "0.6" |
| 56 | + } |
| 57 | + ] |
| 58 | + } |
| 59 | + ``` |
| 60 | + outputs `#9DACBB` value |
| 61 | +
|
| 62 | +3. `color-yiq` – [Bootstrap's color contrast function](https://getbootstrap.com/docs/4.0/getting-started/theming/#color-contrast) that outputs black (defaults to `#454545`) or white (defaults to `#FFF`) color depending on the specified base color, e.g. |
| 63 | + ``` |
| 64 | + { |
| 65 | + "value": "#0A3055", |
| 66 | + "modify": [{ "type": "color-yiq" }] |
| 67 | + } |
| 68 | + ``` |
| 69 | + outputs `#454545` |
| 70 | +
|
| 71 | +Generally every function from `chroma-js` that has similar signature to `darken` function (i.e., first argument is color value and second is amount by which the color should be changed) can be applied to color tokens the same way as `darken` is applied, functions with other signatures are not currently supported except for the `mix`. |
| 72 | +
|
| 73 | +### Other transforms |
| 74 | +
|
| 75 | +Currently, only one other transform is supported – `str-replace`, that replaces some string with another one across the whole token value, common usage is for values that represent an SVG image |
| 76 | +
|
| 77 | +``` |
| 78 | +{ |
| 79 | + "value": "url("data:image/svg+xml,<svg><path d='somesvg' fill='{color.primary.base.value}'/></svg>\")", |
| 80 | + "modify": [{ |
| 81 | + "type": "str-replace", |
| 82 | + "toReplace": "#", |
| 83 | + "replaceWith": "%23" |
| 84 | + }] |
| 85 | +} |
| 86 | +``` |
| 87 | +Without `str-replace` the resulting value would be `url("data:image/svg+xml,<svg><path d='somesvg' fill='#0A3055'/></svg>\"`, note that fill color starts with `#` symbol which would cause image to render invalid color, by using `str-replace` fill would become `%230A3055` and the image would render correctly. |
| 88 | +
|
| 89 | +## Outputting references |
| 90 | +
|
| 91 | +By default, tokens keep references in the output, meaning having such tokens structure |
| 92 | +``` |
| 93 | +{ |
| 94 | + "color": { |
| 95 | + "green": { "value": "#178253" }, |
| 96 | + "success": { "value": "{color.green.value}" } |
| 97 | +} |
| 98 | +``` |
| 99 | +the outputted values will be |
| 100 | +``` |
| 101 | +--pgn-color-green: #178253, |
| 102 | +--pgn-color-success: var(--pgn-color-green) |
| 103 | +``` |
| 104 | +which is usually fine, but you might want to disable this behaviour for some tokens. |
| 105 | +
|
| 106 | +Style dictionary uses a simple algorithm while outputting references, i.e. it checks whether outputted value contains any known tokens and replaces them with references to that token, e.g. |
| 107 | +if you have token with value `url("data:image/svg+xml,<svg><path d='somesvg' fill='{color.green.value}'/></svg>\")` then style dictionary would transform it into |
| 108 | +`url("data:image/svg+xml,<svg><path d='somesvg' fill='var(--pgn-color-green)'/></svg>\")` which will obviously not work when rendered, and you get broken SVG. |
| 109 | +
|
| 110 | +To disable this feature for specific token use `outputReferences` flag, e.g. |
| 111 | +``` |
| 112 | +{ |
| 113 | + "value": "url("data:image/svg+xml,<svg><path d='somesvg' fill='{color.green.value}'/></svg>\")", |
| 114 | + "outputReferences": false, |
| 115 | + "modify": [{ |
| 116 | + "type": "str-replace", |
| 117 | + "toReplace": "#", |
| 118 | + "replaceWith": "%23" |
| 119 | + }] |
| 120 | +} |
| 121 | +``` |
| 122 | +this will correctly output `url("data:image/svg+xml,<svg><path d='somesvg' fill='%23178253'/></svg>")` |
| 123 | +
|
| 124 | +## Utility Classes |
| 125 | +
|
| 126 | +Style Dictionary is also able to generate CSS utility classes using design tokens, although currently it is not very-well supported, and you might be better off to just hardcode CSS classes without using Style Dictionary. |
| 127 | +Nevertheless, in some cases it might be useful. |
| 128 | +
|
| 129 | +The configuration to do build CSS classes lives in `src/utilities` directory in JSON files, let's take `color.json` as an example and see what it does. Its contents should look something like this: |
| 130 | +``` |
| 131 | +{ |
| 132 | + "utilities": [ |
| 133 | + { |
| 134 | + "filters": { |
| 135 | + "category": ["color"], |
| 136 | + "type": ["gray", "primary", "secondary", "brand", "success", "info", "warning", "danger", "light", "dark", "accent"], |
| 137 | + "item": ["base", "100", "200", "300", "400", "500", "600", "700", "800", "900", "a", "b"] |
| 138 | + }, |
| 139 | + "utilityFunctionsToApply": ["bgVariant", "textEmphasisVariant", "borderColor"] |
| 140 | + } |
| 141 | + ] |
| 142 | +} |
| 143 | +``` |
| 144 | +Namely, this is a JSON object with only one key (`utilities`, this is how Style Dictionary knows that this file is used for generating utility classes) |
| 145 | +and one value which is an array of objects that describe how to generate classes and which tokens to use. |
| 146 | +Each such object is composed of 2 keys: |
| 147 | + - `utilityFunctionsToApply`, which is an array of strings, these strings are the names of functions that will |
| 148 | + generate utility classes based on tokens. These functions must be defined in `css-utilities.js` module and must follow |
| 149 | + the same signature - accept `token` object as its only argument and output CSS class as a string (see any of `bgVariant`, `textEmphasisVariant`, `borderColor` functions for an example) |
| 150 | + - `filters`, which is an object that describes which tokens will be passed as an argument to functions provided by `utilityFunctionsToApply`. |
| 151 | + The keys in this object are the attributes of a `token` object and values are arrays of valid values that tokens will be filtered against. |
| 152 | + For list of possible keys see https://amzn.github.io/style-dictionary/#/tokens?id=category-type-item |
| 153 | +
|
| 154 | +Basically, this file tells Style Dictionary to generate utility classes using `["bgVariant", "textEmphasisVariant", "borderColor"]` |
| 155 | +functions from tokens that are of `color` category and theirs `type` is one of `["gray", "primary", ...]` |
| 156 | +and `item` is one of `["base", "100", "200", ...]`. |
| 157 | +
|
| 158 | +If you want to generate additional utility classes you need to add a similar JSON file to `src/utilities` directory. |
0 commit comments