@muraldevkit/ds-foundation 2.26.0 → 2.28.0
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.
- package/dist/TOKENS.md +752 -0
- package/dist/foundation.css +139 -75
- package/dist/foundation.css.map +1 -1
- package/dist/foundation.min.css +1 -1
- package/dist/foundation.min.css.map +1 -1
- package/dist/tokens/contextual-variables/border.json +6 -6
- package/dist/tokens/contextual-variables/color.json +48 -48
- package/dist/tokens/contextual-variables/typography.json +19 -16
- package/dist/tokens/global-variables/typography.json +5 -5
- package/package.json +1 -1
- package/src/styles/_tokens.scss +165 -75
package/dist/TOKENS.md
ADDED
|
@@ -0,0 +1,752 @@
|
|
|
1
|
+
# Mural design tokens — agent reference
|
|
2
|
+
|
|
3
|
+
Generated by `packages/foundation`'s Style Dictionary build from
|
|
4
|
+
`src/tokens/**/*.json`. Do not edit this file directly — it is rebuilt on
|
|
5
|
+
every release and never committed to source.
|
|
6
|
+
|
|
7
|
+
## Finding the right token
|
|
8
|
+
|
|
9
|
+
Work from whichever you have in hand.
|
|
10
|
+
|
|
11
|
+
### From intent — you know what you're styling
|
|
12
|
+
|
|
13
|
+
1. **Pick the family** by the CSS property you're setting: text / background /
|
|
14
|
+
border _color_ → Color; _padding / margin / gap_ → Spacing; _font size /
|
|
15
|
+
line-height / weight_ → Typography; _radius / border width / border
|
|
16
|
+
shorthand_ → Border; _elevation / box-shadow_ → Shadows; _transition /
|
|
17
|
+
animation_ → Motion.
|
|
18
|
+
2. **Scan Contextual first.** Contextual tokens are named for intent
|
|
19
|
+
(`--mrl-color-text`, `--mrl-color-accent-hover`, `--mrl-space-inset`), so
|
|
20
|
+
lead with the name. Read the Description for added context, but treat it as
|
|
21
|
+
a hint rather than the last word — some are still placeholders or
|
|
22
|
+
incomplete, so don't rule a token in or out on the Description alone.
|
|
23
|
+
3. **Drop to Global scales only if nothing fits.** Globals (`--mrl-gray-80`,
|
|
24
|
+
`--mrl-blue-70`, `--mrl-spacing-06`) are the raw palette/scale layer;
|
|
25
|
+
reaching for one is a deliberate exception, not the default.
|
|
26
|
+
4. **Check the row before committing:** a deprecation note or a 600px
|
|
27
|
+
breakpoint caveat lives in the Description, and colors must be wrapped per
|
|
28
|
+
the triplet rule below.
|
|
29
|
+
|
|
30
|
+
### From a raw value — you have a hex or px to replace
|
|
31
|
+
|
|
32
|
+
- **Color:** search this file for the hex (`#306ae3`) or the RGB triplet
|
|
33
|
+
(`48, 106, 227`). The Color tables list both, and alias rows resolve down to
|
|
34
|
+
them, so a literal string match lands on the token. Prefer the intent-named
|
|
35
|
+
contextual token that resolves to that value over the global it points at.
|
|
36
|
+
- **Dimension:** search the **Resolved** column (or **Value**, for globals).
|
|
37
|
+
Baseline-relative spacing / font-size tokens print their `px / rem` default
|
|
38
|
+
(`8px / 0.5rem`); radii, stroke, border widths, and motion distances print
|
|
39
|
+
their `px` value — so a stray `8px` maps back to the token that carries it.
|
|
40
|
+
- **Anything else:** the reverse lookup is just a literal string search. Font
|
|
41
|
+
families, durations (`167ms`), and timing curves (`cubic-bezier(…)`) all
|
|
42
|
+
appear verbatim in the **Value** column, so grep for the value you have.
|
|
43
|
+
|
|
44
|
+
### Naming convention
|
|
45
|
+
|
|
46
|
+
Every token is a CSS custom property prefixed `--mrl-`. Contextual tokens read
|
|
47
|
+
as a role (`--mrl-color-text`, `--mrl-space-inset`); global tokens read as a
|
|
48
|
+
scale plus step (`--mrl-gray-80`, `--mrl-spacing-06`). This is also how to grep
|
|
49
|
+
the _consuming_ codebase for existing usages.
|
|
50
|
+
|
|
51
|
+
### When nothing fits
|
|
52
|
+
|
|
53
|
+
Don't invent a `--mrl-…` name and don't hard-code a value a token already
|
|
54
|
+
covers. Consider using the closest existing token, or flag that a new one may be needed
|
|
55
|
+
new tokens are authored in the ds-foundation package, never in this generated file.
|
|
56
|
+
|
|
57
|
+
## Usage rules
|
|
58
|
+
|
|
59
|
+
1. **Color globals are RGB triplets, not colors.** `--mrl-blue-70` resolves to
|
|
60
|
+
`48, 106, 227` — three numbers, not a CSS color. Using it directly is
|
|
61
|
+
invalid CSS and renders nothing:
|
|
62
|
+
|
|
63
|
+
```css
|
|
64
|
+
/* ✅ */
|
|
65
|
+
color: rgb(var(--mrl-blue-70));
|
|
66
|
+
background: rgba(var(--mrl-blue-70), 0.1);
|
|
67
|
+
|
|
68
|
+
/* ❌ — invalid, renders nothing */
|
|
69
|
+
color: var(--mrl-blue-70);
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
Non-color families (spacing, radii, stroke, durations, …) emit complete
|
|
73
|
+
values and are used directly, e.g. `padding: var(--mrl-spacing-05);`.
|
|
74
|
+
|
|
75
|
+
2. **Values are not constants.** A few contextual tokens change at the 600px
|
|
76
|
+
breakpoint (called out in their description below), and every
|
|
77
|
+
baseline-relative spacing/font-size token is listed with its resolved
|
|
78
|
+
default. Check the row for the token you're using instead of hard-coding a
|
|
79
|
+
value seen once elsewhere.
|
|
80
|
+
|
|
81
|
+
3. **Spacing tokens are for `padding`/`margin`, not `height`/`width`.** Sizing
|
|
82
|
+
a box uses rem values, spacing tokens encode the rhythm between elements,
|
|
83
|
+
not element dimensions.
|
|
84
|
+
|
|
85
|
+
## How to read a row
|
|
86
|
+
|
|
87
|
+
Every table below lists, per token: the CSS custom property name; its
|
|
88
|
+
**Value** as it lands in real CSS, with references preserved as `var(--…)`
|
|
89
|
+
(matching what the compiled stylesheet emits — not the fully inlined value);
|
|
90
|
+
a **Resolved** column for aliases (the reference chain down to a concrete
|
|
91
|
+
value, e.g. `--mrl-gray-80 → 72, 82, 91`) and for baseline-relative dimensions (the
|
|
92
|
+
resolved px/rem default); and the raw source **Description**, used as-is —
|
|
93
|
+
including any deprecation note the source calls out.
|
|
94
|
+
|
|
95
|
+
## Color
|
|
96
|
+
|
|
97
|
+
### Global scales
|
|
98
|
+
|
|
99
|
+
#### Gray
|
|
100
|
+
|
|
101
|
+
| Key | CSS variable | Value | Hex |
|
|
102
|
+
| --- | --- | --- | --- |
|
|
103
|
+
| 10 | `--mrl-gray-10` | `249, 250, 250` | `#f9fafa` |
|
|
104
|
+
| 20 | `--mrl-gray-20` | `236, 240, 244` | `#ecf0f4` |
|
|
105
|
+
| 30 | `--mrl-gray-30` | `220, 225, 229` | `#dce1e5` |
|
|
106
|
+
| 40 | `--mrl-gray-40` | `184, 193, 204` | `#b8c1cc` |
|
|
107
|
+
| 50 | `--mrl-gray-50` | `155, 168, 182` | `#9ba8b6` |
|
|
108
|
+
| 60 | `--mrl-gray-60` | `129, 143, 156` | `#818f9c` |
|
|
109
|
+
| 70 | `--mrl-gray-70` | `99, 112, 126` | `#63707e` |
|
|
110
|
+
| 80 | `--mrl-gray-80` | `72, 82, 91` | `#48525b` |
|
|
111
|
+
| 90 | `--mrl-gray-90` | `40, 46, 52` | `#282e34` |
|
|
112
|
+
| 100 | `--mrl-gray-100` | `27, 31, 34` | `#1b1f22` |
|
|
113
|
+
|
|
114
|
+
#### Blue
|
|
115
|
+
|
|
116
|
+
| Key | CSS variable | Value | Hex |
|
|
117
|
+
| --- | --- | --- | --- |
|
|
118
|
+
| 10 | `--mrl-blue-10` | `247, 250, 255` | `#f7faff` |
|
|
119
|
+
| 20 | `--mrl-blue-20` | `230, 244, 254` | `#e6f4fe` |
|
|
120
|
+
| 30 | `--mrl-blue-30` | `205, 230, 254` | `#cde6fe` |
|
|
121
|
+
| 40 | `--mrl-blue-40` | `180, 217, 253` | `#b4d9fd` |
|
|
122
|
+
| 50 | `--mrl-blue-50` | `131, 191, 252` | `#83bffc` |
|
|
123
|
+
| 60 | `--mrl-blue-60` | `81, 143, 251` | `#518ffb` |
|
|
124
|
+
| 70 | `--mrl-blue-70` | `48, 106, 227` | `#306ae3` |
|
|
125
|
+
| 80 | `--mrl-blue-80` | `49, 99, 201` | `#3163c9` |
|
|
126
|
+
| 90 | `--mrl-blue-90` | `42, 86, 176` | `#2a56b0` |
|
|
127
|
+
| 100 | `--mrl-blue-100` | `30, 61, 125` | `#1e3d7d` |
|
|
128
|
+
|
|
129
|
+
#### Red
|
|
130
|
+
|
|
131
|
+
| Key | CSS variable | Value | Hex |
|
|
132
|
+
| --- | --- | --- | --- |
|
|
133
|
+
| 10 | `--mrl-red-10` | `255, 235, 235` | `#ffebeb` |
|
|
134
|
+
| 20 | `--mrl-red-20` | `255, 214, 214` | `#ffd6d6` |
|
|
135
|
+
| 30 | `--mrl-red-30` | `255, 204, 204` | `#ffcccc` |
|
|
136
|
+
| 40 | `--mrl-red-40` | `255, 179, 179` | `#ffb3b3` |
|
|
137
|
+
| 50 | `--mrl-red-50` | `255, 128, 128` | `#ff8080` |
|
|
138
|
+
| 60 | `--mrl-red-60` | `255, 75, 75` | `#ff4b4b` |
|
|
139
|
+
| 70 | `--mrl-red-70` | `224, 41, 53` | `#e02935` |
|
|
140
|
+
| 80 | `--mrl-red-80` | `179, 33, 42` | `#b3212a` |
|
|
141
|
+
| 90 | `--mrl-red-90` | `140, 26, 33` | `#8c1a21` |
|
|
142
|
+
| 100 | `--mrl-red-100` | `115, 21, 27` | `#73151b` |
|
|
143
|
+
|
|
144
|
+
#### Tomato
|
|
145
|
+
|
|
146
|
+
| Key | CSS variable | Value | Hex |
|
|
147
|
+
| --- | --- | --- | --- |
|
|
148
|
+
| 10 | `--mrl-tomato-10` | `251, 224, 223` | `#fbe0df` |
|
|
149
|
+
| 20 | `--mrl-tomato-20` | `253, 216, 216` | `#fdd8d8` |
|
|
150
|
+
| 30 | `--mrl-tomato-30` | `246, 193, 194` | `#f6c1c2` |
|
|
151
|
+
| 40 | `--mrl-tomato-40` | `240, 148, 151` | `#f09497` |
|
|
152
|
+
| 50 | `--mrl-tomato-50` | `227, 99, 103` | `#e36367` |
|
|
153
|
+
| 60 | `--mrl-tomato-60` | `224, 72, 77` | `#e0484d` |
|
|
154
|
+
| 70 | `--mrl-tomato-70` | `212, 58, 64` | `#d43a40` |
|
|
155
|
+
| 80 | `--mrl-tomato-80` | `205, 45, 51` | `#cd2d33` |
|
|
156
|
+
| 90 | `--mrl-tomato-90` | `190, 39, 48` | `#be2730` |
|
|
157
|
+
| 100 | `--mrl-tomato-100` | `157, 32, 40` | `#9d2028` |
|
|
158
|
+
| desaturated | `--mrl-tomato-desaturated` | `229, 179, 182` | `#e5b3b6` |
|
|
159
|
+
|
|
160
|
+
#### Orange
|
|
161
|
+
|
|
162
|
+
| Key | CSS variable | Value | Hex |
|
|
163
|
+
| --- | --- | --- | --- |
|
|
164
|
+
| 10 | `--mrl-orange-10` | `255, 231, 204` | `#ffe7cc` |
|
|
165
|
+
| 20 | `--mrl-orange-20` | `254, 226, 194` | `#fee2c2` |
|
|
166
|
+
| 30 | `--mrl-orange-30` | `252, 218, 192` | `#fcdac0` |
|
|
167
|
+
| 40 | `--mrl-orange-40` | `245, 199, 146` | `#f5c792` |
|
|
168
|
+
| 50 | `--mrl-orange-50` | `244, 158, 72` | `#f49e48` |
|
|
169
|
+
| 60 | `--mrl-orange-60` | `229, 121, 26` | `#e5791a` |
|
|
170
|
+
| 70 | `--mrl-orange-70` | `201, 79, 19` | `#c94f13` |
|
|
171
|
+
| 80 | `--mrl-orange-80` | `191, 76, 18` | `#bf4c12` |
|
|
172
|
+
| 90 | `--mrl-orange-90` | `178, 68, 1` | `#b24401` |
|
|
173
|
+
| 100 | `--mrl-orange-100` | `147, 57, 1` | `#933901` |
|
|
174
|
+
| desaturated | `--mrl-orange-desaturated` | `235, 186, 142` | `#ebba8e` |
|
|
175
|
+
|
|
176
|
+
#### Lemon
|
|
177
|
+
|
|
178
|
+
| Key | CSS variable | Value | Hex |
|
|
179
|
+
| --- | --- | --- | --- |
|
|
180
|
+
| 10 | `--mrl-lemon-10` | `250, 241, 193` | `#faf1c1` |
|
|
181
|
+
| 20 | `--mrl-lemon-20` | `249, 240, 190` | `#f9f0be` |
|
|
182
|
+
| 30 | `--mrl-lemon-30` | `249, 237, 174` | `#f9edae` |
|
|
183
|
+
| 40 | `--mrl-lemon-40` | `245, 226, 127` | `#f5e27f` |
|
|
184
|
+
| 50 | `--mrl-lemon-50` | `228, 203, 73` | `#e4cb49` |
|
|
185
|
+
| 60 | `--mrl-lemon-60` | `182, 158, 35` | `#b69e23` |
|
|
186
|
+
| 70 | `--mrl-lemon-70` | `142, 116, 23` | `#8e7417` |
|
|
187
|
+
| 80 | `--mrl-lemon-80` | `132, 108, 21` | `#846c15` |
|
|
188
|
+
| 90 | `--mrl-lemon-90` | `122, 99, 16` | `#7a6310` |
|
|
189
|
+
| 100 | `--mrl-lemon-100` | `104, 84, 13` | `#68540d` |
|
|
190
|
+
| desaturated | `--mrl-lemon-desaturated` | `228, 215, 149` | `#e4d795` |
|
|
191
|
+
|
|
192
|
+
#### Melon
|
|
193
|
+
|
|
194
|
+
| Key | CSS variable | Value | Hex |
|
|
195
|
+
| --- | --- | --- | --- |
|
|
196
|
+
| 10 | `--mrl-melon-10` | `227, 248, 216` | `#e3f8d8` |
|
|
197
|
+
| 20 | `--mrl-melon-20` | `214, 237, 202` | `#d6edca` |
|
|
198
|
+
| 30 | `--mrl-melon-30` | `190, 226, 171` | `#bee2ab` |
|
|
199
|
+
| 40 | `--mrl-melon-40` | `161, 214, 135` | `#a1d687` |
|
|
200
|
+
| 50 | `--mrl-melon-50` | `122, 185, 91` | `#7ab95b` |
|
|
201
|
+
| 60 | `--mrl-melon-60` | `93, 160, 59` | `#5da03b` |
|
|
202
|
+
| 70 | `--mrl-melon-70` | `75, 132, 46` | `#4b842e` |
|
|
203
|
+
| 80 | `--mrl-melon-80` | `69, 121, 42` | `#45792a` |
|
|
204
|
+
| 90 | `--mrl-melon-90` | `71, 114, 49` | `#477231` |
|
|
205
|
+
| 100 | `--mrl-melon-100` | `60, 96, 41` | `#3c6029` |
|
|
206
|
+
| desaturated | `--mrl-melon-desaturated` | `169, 208, 178` | `#a9d0b2` |
|
|
207
|
+
|
|
208
|
+
#### Mint
|
|
209
|
+
|
|
210
|
+
| Key | CSS variable | Value | Hex |
|
|
211
|
+
| --- | --- | --- | --- |
|
|
212
|
+
| 10 | `--mrl-mint-10` | `220, 242, 249` | `#dcf2f9` |
|
|
213
|
+
| 20 | `--mrl-mint-20` | `207, 234, 242` | `#cfeaf2` |
|
|
214
|
+
| 30 | `--mrl-mint-30` | `177, 217, 231` | `#b1d9e7` |
|
|
215
|
+
| 40 | `--mrl-mint-40` | `138, 199, 219` | `#8ac7db` |
|
|
216
|
+
| 50 | `--mrl-mint-50` | `89, 181, 212` | `#59b5d4` |
|
|
217
|
+
| 60 | `--mrl-mint-60` | `36, 150, 188` | `#2496bc` |
|
|
218
|
+
| 70 | `--mrl-mint-70` | `9, 126, 165` | `#097ea5` |
|
|
219
|
+
| 80 | `--mrl-mint-80` | `8, 118, 155` | `#08769b` |
|
|
220
|
+
| 90 | `--mrl-mint-90` | `1, 114, 152` | `#017298` |
|
|
221
|
+
| 100 | `--mrl-mint-100` | `1, 99, 132` | `#016384` |
|
|
222
|
+
| desaturated | `--mrl-mint-desaturated` | `162, 203, 216` | `#a2cbd8` |
|
|
223
|
+
|
|
224
|
+
#### Blueberry
|
|
225
|
+
|
|
226
|
+
| Key | CSS variable | Value | Hex |
|
|
227
|
+
| --- | --- | --- | --- |
|
|
228
|
+
| 10 | `--mrl-blueberry-10` | `215, 228, 255` | `#d7e4ff` |
|
|
229
|
+
| 20 | `--mrl-blueberry-20` | `202, 219, 252` | `#cadbfc` |
|
|
230
|
+
| 30 | `--mrl-blueberry-30` | `187, 209, 251` | `#bbd1fb` |
|
|
231
|
+
| 40 | `--mrl-blueberry-40` | `139, 175, 249` | `#8baff9` |
|
|
232
|
+
| 50 | `--mrl-blueberry-50` | `105, 146, 226` | `#6992e2` |
|
|
233
|
+
| 60 | `--mrl-blueberry-60` | `91, 131, 210` | `#5b83d2` |
|
|
234
|
+
| 70 | `--mrl-blueberry-70` | `64, 110, 203` | `#406ecb` |
|
|
235
|
+
| 80 | `--mrl-blueberry-80` | `32, 89, 202` | `#2059ca` |
|
|
236
|
+
| 90 | `--mrl-blueberry-90` | `28, 77, 175` | `#1c4daf` |
|
|
237
|
+
| 100 | `--mrl-blueberry-100` | `24, 66, 149` | `#184295` |
|
|
238
|
+
| desaturated | `--mrl-blueberry-desaturated` | `173, 199, 224` | `#adc7e0` |
|
|
239
|
+
|
|
240
|
+
#### Grape
|
|
241
|
+
|
|
242
|
+
| Key | CSS variable | Value | Hex |
|
|
243
|
+
| --- | --- | --- | --- |
|
|
244
|
+
| 10 | `--mrl-grape-10` | `222, 220, 249` | `#dedcf9` |
|
|
245
|
+
| 20 | `--mrl-grape-20` | `216, 216, 249` | `#d8d8f9` |
|
|
246
|
+
| 30 | `--mrl-grape-30` | `207, 207, 247` | `#cfcff7` |
|
|
247
|
+
| 40 | `--mrl-grape-40` | `162, 163, 240` | `#a2a3f0` |
|
|
248
|
+
| 50 | `--mrl-grape-50` | `142, 129, 228` | `#8e81e4` |
|
|
249
|
+
| 60 | `--mrl-grape-60` | `132, 108, 224` | `#846ce0` |
|
|
250
|
+
| 70 | `--mrl-grape-70` | `114, 86, 219` | `#7256db` |
|
|
251
|
+
| 80 | `--mrl-grape-80` | `94, 62, 214` | `#5e3ed6` |
|
|
252
|
+
| 90 | `--mrl-grape-90` | `74, 58, 182` | `#4a3ab6` |
|
|
253
|
+
| 100 | `--mrl-grape-100` | `63, 49, 155` | `#3f319b` |
|
|
254
|
+
| desaturated | `--mrl-grape-desaturated` | `189, 187, 221` | `#bdbbdd` |
|
|
255
|
+
|
|
256
|
+
#### Dragonfruit
|
|
257
|
+
|
|
258
|
+
| Key | CSS variable | Value | Hex |
|
|
259
|
+
| --- | --- | --- | --- |
|
|
260
|
+
| 10 | `--mrl-dragonfruit-10` | `255, 225, 243` | `#ffe1f3` |
|
|
261
|
+
| 20 | `--mrl-dragonfruit-20` | `246, 213, 243` | `#f6d5f3` |
|
|
262
|
+
| 30 | `--mrl-dragonfruit-30` | `230, 188, 226` | `#e6bce2` |
|
|
263
|
+
| 40 | `--mrl-dragonfruit-40` | `216, 151, 209` | `#d897d1` |
|
|
264
|
+
| 50 | `--mrl-dragonfruit-50` | `202, 114, 193` | `#ca72c1` |
|
|
265
|
+
| 60 | `--mrl-dragonfruit-60` | `196, 100, 186` | `#c464ba` |
|
|
266
|
+
| 70 | `--mrl-dragonfruit-70` | `186, 74, 171` | `#ba4aab` |
|
|
267
|
+
| 80 | `--mrl-dragonfruit-80` | `175, 75, 168` | `#af4ba8` |
|
|
268
|
+
| 90 | `--mrl-dragonfruit-90` | `163, 67, 157` | `#a3439d` |
|
|
269
|
+
| 100 | `--mrl-dragonfruit-100` | `141, 58, 136` | `#8d3a88` |
|
|
270
|
+
| desaturated | `--mrl-dragonfruit-desaturated` | `232, 201, 221` | `#e8c9dd` |
|
|
271
|
+
|
|
272
|
+
#### Truffle
|
|
273
|
+
|
|
274
|
+
| Key | CSS variable | Value | Hex |
|
|
275
|
+
| --- | --- | --- | --- |
|
|
276
|
+
| 10 | `--mrl-truffle-10` | `236, 239, 238` | `#ecefee` |
|
|
277
|
+
| 20 | `--mrl-truffle-20` | `219, 225, 223` | `#dbe1df` |
|
|
278
|
+
| 30 | `--mrl-truffle-30` | `197, 206, 203` | `#c5cecb` |
|
|
279
|
+
| 40 | `--mrl-truffle-40` | `170, 182, 178` | `#aab6b2` |
|
|
280
|
+
| 50 | `--mrl-truffle-50` | `131, 149, 144` | `#839590` |
|
|
281
|
+
| 60 | `--mrl-truffle-60` | `108, 127, 121` | `#6c7f79` |
|
|
282
|
+
| 70 | `--mrl-truffle-70` | `96, 113, 108` | `#60716c` |
|
|
283
|
+
| 80 | `--mrl-truffle-80` | `80, 98, 93` | `#50625d` |
|
|
284
|
+
| 90 | `--mrl-truffle-90` | `70, 83, 79` | `#46534f` |
|
|
285
|
+
| 100 | `--mrl-truffle-100` | `56, 66, 63` | `#38423f` |
|
|
286
|
+
| desaturated | `--mrl-truffle-desaturated` | `196, 202, 200` | `#c4cac8` |
|
|
287
|
+
|
|
288
|
+
#### White
|
|
289
|
+
|
|
290
|
+
| Key | CSS variable | Value | Hex |
|
|
291
|
+
| --- | --- | --- | --- |
|
|
292
|
+
| white | `--mrl-white` | `255, 255, 255` | `#ffffff` |
|
|
293
|
+
|
|
294
|
+
#### Black
|
|
295
|
+
|
|
296
|
+
| Key | CSS variable | Value | Hex |
|
|
297
|
+
| --- | --- | --- | --- |
|
|
298
|
+
| black | `--mrl-black` | `0, 0, 0` | `#000000` |
|
|
299
|
+
|
|
300
|
+
#### Status
|
|
301
|
+
|
|
302
|
+
| Key | CSS variable | Value | Hex |
|
|
303
|
+
| --- | --- | --- | --- |
|
|
304
|
+
| error | `--mrl-status-error` | `179, 33, 42` | `#b3212a` |
|
|
305
|
+
| error-light | `--mrl-status-error-light` | `252, 233, 235` | `#fce9eb` |
|
|
306
|
+
| info | `--mrl-status-info` | `49, 99, 201` | `#3163c9` |
|
|
307
|
+
| info-light | `--mrl-status-info-light` | `236, 242, 254` | `#ecf2fe` |
|
|
308
|
+
| private | `--mrl-status-private` | `27, 31, 34` | `#1b1f22` |
|
|
309
|
+
| success | `--mrl-status-success` | `0, 132, 63` | `#00843f` |
|
|
310
|
+
| success-light | `--mrl-status-success-light` | `243, 250, 235` | `#f3faeb` |
|
|
311
|
+
| warning | `--mrl-status-warning` | `255, 170, 1` | `#ffaa01` |
|
|
312
|
+
| warning-light | `--mrl-status-warning-light` | `254, 246, 231` | `#fef6e7` |
|
|
313
|
+
|
|
314
|
+
#### White opacity
|
|
315
|
+
|
|
316
|
+
| Key | CSS variable | Value | Hex |
|
|
317
|
+
| --- | --- | --- | --- |
|
|
318
|
+
| 02 | `--mrl-white-opacity-02` | `rgba(255, 255, 255, 0.24)` | `#ffffff3d` |
|
|
319
|
+
| 03 | `--mrl-white-opacity-03` | `rgba(255, 255, 255, 0.3)` | `#ffffff4d` |
|
|
320
|
+
| 04 | `--mrl-white-opacity-04` | `rgba(255, 255, 255, 0.4)` | `#ffffff66` |
|
|
321
|
+
| 06 | `--mrl-white-opacity-06` | `rgba(255, 255, 255, 0.6)` | `#ffffff99` |
|
|
322
|
+
| 08 | `--mrl-white-opacity-08` | `rgba(255, 255, 255, 0.8)` | `#ffffffcc` |
|
|
323
|
+
|
|
324
|
+
#### Black opacity
|
|
325
|
+
|
|
326
|
+
| Key | CSS variable | Value | Hex |
|
|
327
|
+
| --- | --- | --- | --- |
|
|
328
|
+
| 00 | `--mrl-black-opacity-00` | `rgba(42, 82, 121, 0.06)` | `#2a52790f` |
|
|
329
|
+
| 01 | `--mrl-black-opacity-01` | `rgba(42, 82, 121, 0.12)` | `#2a52791f` |
|
|
330
|
+
| 02 | `--mrl-black-opacity-02` | `rgba(21, 57, 75, 0.24)` | `#15394b3d` |
|
|
331
|
+
| 03 | `--mrl-black-opacity-03` | `rgba(11, 41, 70, 0.32)` | `#0b294652` |
|
|
332
|
+
| 05 | `--mrl-black-opacity-05` | `rgba(31, 51, 71, 0.56)` | `#1f33478f` |
|
|
333
|
+
| 06 | `--mrl-black-opacity-06` | `rgba(21, 41, 60, 0.64)` | `#15293ca3` |
|
|
334
|
+
| 08 | `--mrl-black-opacity-08` | `rgba(24, 36, 47, 0.8)` | `#18242fcc` |
|
|
335
|
+
|
|
336
|
+
### Contextual
|
|
337
|
+
|
|
338
|
+
| CSS variable | Value | Resolved | Description |
|
|
339
|
+
| --- | --- | --- | --- |
|
|
340
|
+
| `--mrl-color-focus` | `rgba(var(--mrl-blue-70), 1)` | --mrl-blue-70 → 48, 106, 227 (#306ae3) | Focus ring on interactive elements. |
|
|
341
|
+
| `--mrl-color-focus-inverse` | `rgba(var(--mrl-white), 1)` | --mrl-white → 255, 255, 255 (#ffffff) | Focus ring on inverse (dark) surfaces. |
|
|
342
|
+
| `--mrl-color-shadows` | `rgba(var(--mrl-black), 1)` | --mrl-black → 0, 0, 0 (#000000) | Base color for shadow tokens. |
|
|
343
|
+
| `--mrl-color-brand` | `rgba(var(--mrl-red-70), 1)` | --mrl-red-70 → 224, 41, 53 (#e02935) | Primary brand color. |
|
|
344
|
+
| `--mrl-color-brand-hover` | `rgba(var(--mrl-red-80), 1)` | --mrl-red-80 → 179, 33, 42 (#b3212a) | Brand color, hover state. |
|
|
345
|
+
| `--mrl-color-brand-active` | `rgba(var(--mrl-red-90), 1)` | --mrl-red-90 → 140, 26, 33 (#8c1a21) | Brand color, active/pressed state. |
|
|
346
|
+
| `--mrl-color-accent` | `rgba(var(--mrl-blue-70), 1)` | --mrl-blue-70 → 48, 106, 227 (#306ae3) | Accent color used for emphasis and selection. |
|
|
347
|
+
| `--mrl-color-skeleton` | `rgba(var(--mrl-gray-20), 1)` | --mrl-gray-20 → 236, 240, 244 (#ecf0f4) | Skeleton placeholder background. |
|
|
348
|
+
| `--mrl-color-skeleton-inverse` | `rgba(var(--mrl-white), 1)` | --mrl-white → 255, 255, 255 (#ffffff) | Skeleton placeholder background on inverse surfaces. |
|
|
349
|
+
| `--mrl-color-background` | `rgba(var(--mrl-white), 1)` | --mrl-white → 255, 255, 255 (#ffffff) | Default surface background. |
|
|
350
|
+
| `--mrl-color-background-secondary` | `rgba(var(--mrl-gray-10), 1)` | --mrl-gray-10 → 249, 250, 250 (#f9fafa) | Secondary surface background. |
|
|
351
|
+
| `--mrl-color-background-decorative` | `rgba(var(--mrl-blue-10), 1)` | --mrl-blue-10 → 247, 250, 255 (#f7faff) | Background for decorative, non-interactive surfaces. |
|
|
352
|
+
| `--mrl-color-background-active` | `var(--mrl-black-opacity-01)` | --mrl-black-opacity-01 → rgba(42, 82, 121, 0.12) (#2a52791f) | Background, active/pressed state. |
|
|
353
|
+
| `--mrl-color-background-selected` | `rgba(var(--mrl-gray-100), 1)` | --mrl-gray-100 → 27, 31, 34 (#1b1f22) | Background, selected state. |
|
|
354
|
+
| `--mrl-color-background-emph-hover` | `rgba(var(--mrl-gray-10), 1)` | --mrl-gray-10 → 249, 250, 250 (#f9fafa) | Emphasized background, hover state. |
|
|
355
|
+
| `--mrl-color-background-emph-active` | `rgba(var(--mrl-gray-20), 1)` | --mrl-gray-20 → 236, 240, 244 (#ecf0f4) | Emphasized background, active state. |
|
|
356
|
+
| `--mrl-color-background-info` | `rgba(var(--mrl-status-info), 1)` | --mrl-status-info → 49, 99, 201 (#3163c9) | Use for all use cases where we denote a status and there is a colored background. Use --mrl-color-text-inverse with these background colors. |
|
|
357
|
+
| `--mrl-color-background-info-light` | `rgba(var(--mrl-status-info-light), 1)` | --mrl-status-info-light → 236, 242, 254 (#ecf2fe) | Use for background of inline block notifications and badges. |
|
|
358
|
+
| `--mrl-color-background-success` | `rgba(var(--mrl-status-success), 1)` | --mrl-status-success → 0, 132, 63 (#00843f) | Use for all use cases where we denote a status and there is a colored background. Use --mrl-color-text-inverse with these background colors. |
|
|
359
|
+
| `--mrl-color-background-success-light` | `rgba(var(--mrl-status-success-light), 1)` | --mrl-status-success-light → 243, 250, 235 (#f3faeb) | Use for background of inline block notifications and badges. |
|
|
360
|
+
| `--mrl-color-background-warning` | `rgba(var(--mrl-status-warning), 1)` | --mrl-status-warning → 255, 170, 1 (#ffaa01) | Use for all use cases where we denote a status and there is a colored background. Use --mrl-color-text-inverse with these background colors. |
|
|
361
|
+
| `--mrl-color-background-warning-light` | `rgba(var(--mrl-status-warning-light), 1)` | --mrl-status-warning-light → 254, 246, 231 (#fef6e7) | Use for background of inline block notifications and badges. |
|
|
362
|
+
| `--mrl-color-background-error` | `rgba(var(--mrl-status-error), 1)` | --mrl-status-error → 179, 33, 42 (#b3212a) | Use for all use cases where we denote a status and there is a colored background. Use --mrl-color-text-inverse with these background colors. |
|
|
363
|
+
| `--mrl-color-background-error-light` | `rgba(var(--mrl-status-error-light), 1)` | --mrl-status-error-light → 252, 233, 235 (#fce9eb) | Use for background of inline block notifications and badges. |
|
|
364
|
+
| `--mrl-color-background-private` | `rgba(var(--mrl-gray-100), 1)` | --mrl-gray-100 → 27, 31, 34 (#1b1f22) | Use for all use cases where we denote a status and there is a colored background. Use --mrl-color-text-inverse with these background colors. The private variable is deprecated and will be removed in v2. |
|
|
365
|
+
| `--mrl-color-background-inverse` | `rgba(var(--mrl-gray-100), 1)` | --mrl-gray-100 → 27, 31, 34 (#1b1f22) | Inverse (dark) surface background. |
|
|
366
|
+
| `--mrl-color-background-inverse-hover` | `rgba(var(--mrl-gray-90), 1)` | --mrl-gray-90 → 40, 46, 52 (#282e34) | Use only with --mrl-color-background-inverse; other colored backgrounds will have a different style set that's TBD. |
|
|
367
|
+
| `--mrl-color-background-disabled` | `rgba(var(--mrl-gray-40), 1)` | --mrl-gray-40 → 184, 193, 204 (#b8c1cc) | Use only when there is a background on a disabled element and the text used would be --mrl-color-text-inverse. In the product the current usage aligns to --mrl-gray-50 but Design provided new guidelines for all future work. |
|
|
368
|
+
| `--mrl-color-line` | `rgba(var(--mrl-gray-70), 1)` | --mrl-gray-70 → 99, 112, 126 (#63707e) | Use with the Base style set. |
|
|
369
|
+
| `--mrl-color-line-hover` | `rgba(var(--mrl-gray-90), 1)` | --mrl-gray-90 → 40, 46, 52 (#282e34) | Use with the Base style set. |
|
|
370
|
+
| `--mrl-color-line-active` | `rgba(var(--mrl-gray-100), 1)` | --mrl-gray-100 → 27, 31, 34 (#1b1f22) | Use with the Base style set. |
|
|
371
|
+
| `--mrl-color-line-selected` | `rgba(var(--mrl-gray-90), 1)` | --mrl-gray-90 → 40, 46, 52 (#282e34) | Use with the Base style set. |
|
|
372
|
+
| `--mrl-color-line-disabled` | `rgba(var(--mrl-gray-40), 1)` | --mrl-gray-40 → 184, 193, 204 (#b8c1cc) | In the product the current usage aligns to --mrl-gray-50 but Design provided new guidelines for all future work. |
|
|
373
|
+
| `--mrl-color-line-secondary` | `rgba(var(--mrl-gray-30), 1)` | --mrl-gray-30 → 220, 225, 229 (#dce1e5) | Secondary line color. |
|
|
374
|
+
| `--mrl-color-line-decorative` | `rgba(var(--mrl-blue-20), 1)` | --mrl-blue-20 → 230, 244, 254 (#e6f4fe) | Line color for decorative, non-interactive surfaces. |
|
|
375
|
+
| `--mrl-color-line-divider` | `rgba(var(--mrl-gray-20), 1)` | --mrl-gray-20 → 236, 240, 244 (#ecf0f4) | Design calls this Light but we want a more semantic name in the code base. |
|
|
376
|
+
| `--mrl-color-line-divider-inverse` | `rgba(var(--mrl-gray-80), 1)` | --mrl-gray-80 → 72, 82, 91 (#48525b) | Design calls this Dark but we want a more semantic name in the code base. This is intended for use on dark or saturated backgrounds. |
|
|
377
|
+
| `--mrl-color-line-emph` | `rgba(var(--mrl-gray-20), 1)` | --mrl-gray-20 → 236, 240, 244 (#ecf0f4) | Use with the Base with Emphasis style set. |
|
|
378
|
+
| `--mrl-color-line-emph-hover` | `rgba(var(--mrl-gray-90), 1)` | --mrl-gray-90 → 40, 46, 52 (#282e34) | Use with the Base with Emphasis style set. |
|
|
379
|
+
| `--mrl-color-line-emph-active` | `rgba(var(--mrl-black), 1)` | --mrl-black → 0, 0, 0 (#000000) | Use with the Base with Emphasis style set. |
|
|
380
|
+
| `--mrl-color-line-inverse` | `rgba(var(--mrl-white), 1)` | --mrl-white → 255, 255, 255 (#ffffff) | Line color on inverse surfaces. |
|
|
381
|
+
| `--mrl-color-line-inverse-disabled` | `rgba(var(--mrl-white), 1)` | --mrl-white → 255, 255, 255 (#ffffff) | Line color for disabled controls on inverse surfaces. |
|
|
382
|
+
| `--mrl-color-icon-light` | `rgba(var(--mrl-gray-70), 1)` | --mrl-gray-70 → 99, 112, 126 (#63707e) | Light icon color. |
|
|
383
|
+
| `--mrl-color-icon-disabled` | `rgba(var(--mrl-gray-40), 1)` | --mrl-gray-40 → 184, 193, 204 (#b8c1cc) | Icon color for disabled controls. |
|
|
384
|
+
| `--mrl-color-icon-inverse` | `rgba(var(--mrl-white), 1)` | --mrl-white → 255, 255, 255 (#ffffff) | Icon color on inverse surfaces. |
|
|
385
|
+
| `--mrl-color-icon-emph-selected` | `rgba(var(--mrl-gray-100), 1)` | --mrl-gray-100 → 27, 31, 34 (#1b1f22) | Used when there is an icon and you're following the Base with Emphasis style set. For all other states, the icon is the same color as the text. |
|
|
386
|
+
| `--mrl-color-input-icon-default` | `rgba(var(--mrl-gray-70), 1)` | --mrl-gray-70 → 99, 112, 126 (#63707e) | Default icon color inside form inputs. |
|
|
387
|
+
| `--mrl-color-text` | `rgba(var(--mrl-gray-80), 1)` | --mrl-gray-80 → 72, 82, 91 (#48525b) | Use for the Base style set. |
|
|
388
|
+
| `--mrl-color-text-hover` | `rgba(var(--mrl-gray-90), 1)` | --mrl-gray-90 → 40, 46, 52 (#282e34) | Use for the Base style set. |
|
|
389
|
+
| `--mrl-color-text-active` | `rgba(var(--mrl-gray-90), 1)` | --mrl-gray-90 → 40, 46, 52 (#282e34) | Use for the Base style set. |
|
|
390
|
+
| `--mrl-color-text-selected` | `rgba(var(--mrl-gray-100), 1)` | --mrl-gray-100 → 27, 31, 34 (#1b1f22) | Use for the Base style set. |
|
|
391
|
+
| `--mrl-color-text-disabled` | `rgba(var(--mrl-gray-40), 1)` | --mrl-gray-40 → 184, 193, 204 (#b8c1cc) | In the product the current usage aligns to --mrl-gray-50 but Design provided new guidelines for all future work. |
|
|
392
|
+
| `--mrl-color-text-disabled-inverse` | `rgba(var(--mrl-white), 1)` | --mrl-white → 255, 255, 255 (#ffffff) | Use when the background of the element uses --mrl-color-background-disabled. |
|
|
393
|
+
| `--mrl-color-text-emph` | `rgba(var(--mrl-gray-90), 1)` | --mrl-gray-90 → 40, 46, 52 (#282e34) | Use for the Base with Emphasis style set. |
|
|
394
|
+
| `--mrl-color-text-emph-hover` | `rgba(var(--mrl-gray-90), 1)` | --mrl-gray-90 → 40, 46, 52 (#282e34) | Use for the Base with Emphasis style set. |
|
|
395
|
+
| `--mrl-color-text-emph-active` | `rgba(var(--mrl-black), 1)` | --mrl-black → 0, 0, 0 (#000000) | Use for the Base with Emphasis style set. |
|
|
396
|
+
| `--mrl-color-text-inverse` | `rgba(var(--mrl-white), 1)` | --mrl-white → 255, 255, 255 (#ffffff) | Use for Inverse or any saturated background color, such as statuses. |
|
|
397
|
+
| `--mrl-color-text-inverse-secondary` | `rgba(var(--mrl-gray-10), 1)` | --mrl-gray-10 → 249, 250, 250 (#f9fafa) | Use for Inverse or any saturated background color, such as statuses. This should only be used when there are multiple text colors within a single element. If there is only one color, always use --mrl-color-text-inverse to create consistency. |
|
|
398
|
+
| `--mrl-color-text-inverse-hover` | `rgba(var(--mrl-white), 1)` | --mrl-white → 255, 255, 255 (#ffffff) | Use for Inverse or any saturated background color, such as statuses. |
|
|
399
|
+
| `--mrl-color-text-inverse-active` | `rgba(var(--mrl-white), 1)` | --mrl-white → 255, 255, 255 (#ffffff) | Use for Inverse or any saturated background color, such as statuses. |
|
|
400
|
+
| `--mrl-color-text-inverse-selected` | `rgba(var(--mrl-white), 1)` | --mrl-white → 255, 255, 255 (#ffffff) | Use for Inverse or any saturated background color, such as statuses. |
|
|
401
|
+
| `--mrl-color-text-secondary` | `rgba(var(--mrl-gray-70), 1)` | --mrl-gray-70 → 99, 112, 126 (#63707e) | Use for static text only; if you're working on an interactive element, use one of the defined style sets. This is also used for placeholder text within form elements. |
|
|
402
|
+
| `--mrl-color-text-label` | `rgba(var(--mrl-gray-100), 1)` | --mrl-gray-100 → 27, 31, 34 (#1b1f22) | Use for static text only; if you're working on an interactive element, use one of the defined style sets. |
|
|
403
|
+
| `--mrl-color-text-heading` | `rgba(var(--mrl-gray-100), 1)` | --mrl-gray-100 → 27, 31, 34 (#1b1f22) | Use for static text only; if you're working on an interactive element, use one of the defined style sets. |
|
|
404
|
+
| `--mrl-color-text-success` | `rgba(var(--mrl-status-success), 1)` | --mrl-status-success → 0, 132, 63 (#00843f) | Use when the background is white/transparent only; for elements with a status color background use --mrl-color-text-inverse. |
|
|
405
|
+
| `--mrl-color-text-warning` | `rgba(var(--mrl-gray-90), 1)` | --mrl-gray-90 → 40, 46, 52 (#282e34) | Use when the background is white/transparent only; for elements with a status color background use --mrl-color-text-inverse. |
|
|
406
|
+
| `--mrl-color-text-warning-light` | `rgba(var(--mrl-gray-80), 1)` | --mrl-gray-80 → 72, 82, 91 (#48525b) | Text color for light-warning messages. |
|
|
407
|
+
| `--mrl-color-text-error` | `rgba(var(--mrl-status-error), 1)` | --mrl-status-error → 179, 33, 42 (#b3212a) | Use when the background is white/transparent only; for elements with a status color background use --mrl-color-text-inverse. |
|
|
408
|
+
| `--mrl-color-text-info` | `rgba(var(--mrl-status-info), 1)` | --mrl-status-info → 49, 99, 201 (#3163c9) | Use when the background is white/transparent only; for elements with a status color background use --mrl-color-text-inverse. |
|
|
409
|
+
| `--mrl-color-text-private` | `rgba(var(--mrl-gray-100), 1)` | --mrl-gray-100 → 27, 31, 34 (#1b1f22) | Text color for private content. |
|
|
410
|
+
| `--mrl-color-background-inverse-active` | `var(--mrl-color-accent)` | --mrl-color-accent → --mrl-blue-70 → 48, 106, 227 (#306ae3) | Use only with --mrl-color-background-inverse; other colored backgrounds will have a different style set that's TBD. |
|
|
411
|
+
| `--mrl-color-background-inverse-selected` | `var(--mrl-color-accent)` | --mrl-color-accent → --mrl-blue-70 → 48, 106, 227 (#306ae3) | Use only with --mrl-color-background-inverse; other colored backgrounds will have a different style set that's TBD. |
|
|
412
|
+
| `--mrl-color-line-emph-selected` | `var(--mrl-color-accent)` | --mrl-color-accent → --mrl-blue-70 → 48, 106, 227 (#306ae3) | Use with the Base with Emphasis style set. |
|
|
413
|
+
| `--mrl-color-text-emph-selected` | `var(--mrl-color-accent)` | --mrl-color-accent → --mrl-blue-70 → 48, 106, 227 (#306ae3) | Use for the Base with Emphasis style set. |
|
|
414
|
+
| `--mrl-color-background-page` | `rgb(243, 245, 246)` | — | This is an intentional one-off contextual token that does not use our standard color scales. It should only be used as the background color for non-canvas pages. |
|
|
415
|
+
| `--mrl-color-background-hover` | `var(--mrl-black-opacity-00)` | --mrl-black-opacity-00 → rgba(42, 82, 121, 0.06) (#2a52790f) | Hover overlay. |
|
|
416
|
+
| `--mrl-color-background-inverse-hover-opacity` | `var(--mrl-black-opacity-02)` | --mrl-black-opacity-02 → rgba(21, 57, 75, 0.24) (#15394b3d) | Inverse hover overlay using black-opacity-02. |
|
|
417
|
+
|
|
418
|
+
## Spacing
|
|
419
|
+
|
|
420
|
+
`--mrl-baseline` is `16`. Every spacing token below resolves as `calc(N / var(--mrl-baseline) * 1rem)`; the Resolved column shows the px/rem default so you never have to evaluate the `calc()` by hand.
|
|
421
|
+
|
|
422
|
+
### Global
|
|
423
|
+
|
|
424
|
+
| CSS variable | Value | Resolved | Description |
|
|
425
|
+
| --- | --- | --- | --- |
|
|
426
|
+
| `--mrl-spacing-01` | `calc(2 / var(--mrl-baseline) * 1rem)` | 2px / 0.125rem | Spacing token. |
|
|
427
|
+
| `--mrl-spacing-02` | `calc(4 / var(--mrl-baseline) * 1rem)` | 4px / 0.25rem | Spacing token. |
|
|
428
|
+
| `--mrl-spacing-03` | `calc(8 / var(--mrl-baseline) * 1rem)` | 8px / 0.5rem | Spacing token. |
|
|
429
|
+
| `--mrl-spacing-04` | `calc(12 / var(--mrl-baseline) * 1rem)` | 12px / 0.75rem | Spacing token. |
|
|
430
|
+
| `--mrl-spacing-05` | `calc(16 / var(--mrl-baseline) * 1rem)` | 16px / 1rem | Spacing token. |
|
|
431
|
+
| `--mrl-spacing-06` | `calc(20 / var(--mrl-baseline) * 1rem)` | 20px / 1.25rem | Spacing token. |
|
|
432
|
+
| `--mrl-spacing-07` | `calc(24 / var(--mrl-baseline) * 1rem)` | 24px / 1.5rem | Spacing token. |
|
|
433
|
+
| `--mrl-spacing-08` | `calc(32 / var(--mrl-baseline) * 1rem)` | 32px / 2rem | Spacing token. |
|
|
434
|
+
| `--mrl-spacing-09` | `calc(40 / var(--mrl-baseline) * 1rem)` | 40px / 2.5rem | Spacing token. |
|
|
435
|
+
| `--mrl-spacing-10` | `calc(48 / var(--mrl-baseline) * 1rem)` | 48px / 3rem | Spacing token. |
|
|
436
|
+
| `--mrl-spacing-11` | `calc(64 / var(--mrl-baseline) * 1rem)` | 64px / 4rem | Spacing token. |
|
|
437
|
+
| `--mrl-spacing-12` | `calc(80 / var(--mrl-baseline) * 1rem)` | 80px / 5rem | Spacing token. |
|
|
438
|
+
| `--mrl-spacing-13` | `calc(96 / var(--mrl-baseline) * 1rem)` | 96px / 6rem | Spacing token. |
|
|
439
|
+
| `--mrl-spacing-14` | `calc(160 / var(--mrl-baseline) * 1rem)` | 160px / 10rem | Spacing token. |
|
|
440
|
+
|
|
441
|
+
### Contextual
|
|
442
|
+
|
|
443
|
+
| CSS variable | Value | Resolved | Description |
|
|
444
|
+
| --- | --- | --- | --- |
|
|
445
|
+
| `--mrl-space-offset-focus` | `1px` | 1px / 0.0625rem | Focus ring offset. No global spacing token for 1px, so this is hard-coded. |
|
|
446
|
+
| `--mrl-space-stack-components` | `var(--mrl-spacing-06)` | --mrl-spacing-06 → 20px / 1.25rem | Vertical stack spacing between components. |
|
|
447
|
+
| `--mrl-space-stack-controls` | `var(--mrl-spacing-05)` | --mrl-spacing-05 → 16px / 1rem | Vertical stack spacing between controls. |
|
|
448
|
+
| `--mrl-space-stack-controls-small` | `var(--mrl-spacing-04)` | --mrl-spacing-04 → 12px / 0.75rem | Vertical stack spacing between small controls. |
|
|
449
|
+
| `--mrl-space-stack-section` | `var(--mrl-spacing-07)` | --mrl-spacing-07 → 24px / 1.5rem | Vertical stack spacing between sections. |
|
|
450
|
+
| `--mrl-space-stack-section-divider` | `var(--mrl-spacing-04)` | --mrl-spacing-04 → 12px / 0.75rem | Vertical stack spacing around section dividers. |
|
|
451
|
+
| `--mrl-space-stack-section-divider-small` | `var(--mrl-spacing-03)` | --mrl-spacing-03 → 8px / 0.5rem | Vertical stack spacing around small section dividers. |
|
|
452
|
+
| `--mrl-space-stack-section-divider-large` | `var(--mrl-spacing-06)` | --mrl-spacing-06 → 20px / 1.25rem | Vertical stack spacing around large section dividers. |
|
|
453
|
+
| `--mrl-space-stack-section-divider-xlarge` | `var(--mrl-spacing-08)` | --mrl-spacing-08 → 32px / 2rem | Vertical stack spacing around xlarge section dividers. |
|
|
454
|
+
| `--mrl-space-stack-section-divider-label` | `var(--mrl-spacing-05)` | --mrl-spacing-05 → 16px / 1rem | Vertical stack spacing around section divider labels. |
|
|
455
|
+
| `--mrl-space-stack-siblings` | `var(--mrl-spacing-04)` | --mrl-spacing-04 → 12px / 0.75rem | Vertical stack spacing between sibling elements. |
|
|
456
|
+
| `--mrl-space-stack-related` | `var(--mrl-spacing-03)` | --mrl-spacing-03 → 8px / 0.5rem | Vertical stack spacing between related elements. |
|
|
457
|
+
| `--mrl-space-stack-related-small` | `var(--mrl-spacing-02)` | --mrl-spacing-02 → 4px / 0.25rem | Vertical stack spacing between closely related elements. |
|
|
458
|
+
| `--mrl-space-stack-subheading` | `var(--mrl-spacing-05)` | --mrl-spacing-05 → 16px / 1rem | Vertical stack spacing around subheadings. |
|
|
459
|
+
| `--mrl-space-stack-title` | `var(--mrl-spacing-07)` | --mrl-spacing-07 → 24px / 1.5rem | Vertical stack spacing around titles. |
|
|
460
|
+
| `--mrl-space-stack-title-related` | `var(--mrl-spacing-05)` | --mrl-spacing-05 → 16px / 1rem | Vertical stack spacing between a title and related content. |
|
|
461
|
+
| `--mrl-space-inset` | `var(--mrl-spacing-03)` | --mrl-spacing-03 → 8px / 0.5rem | Default inset padding. |
|
|
462
|
+
| `--mrl-space-inset-container` | `var(--mrl-spacing-08)` | --mrl-spacing-08 → 32px / 2rem | Inset padding for containers. |
|
|
463
|
+
| `--mrl-space-inset-container-large` | `var(--mrl-spacing-05)` | --mrl-spacing-05 → 16px / 1rem | Inset padding for large containers (mobile-first; overridden above 600px in spacing.scss). |
|
|
464
|
+
| `--mrl-space-inset-large` | `var(--mrl-spacing-05)` | --mrl-spacing-05 → 16px / 1rem | Large inset padding. |
|
|
465
|
+
| `--mrl-space-inset-control` | `var(--mrl-spacing-06)` | --mrl-spacing-06 → 20px / 1.25rem | Inset padding for controls. |
|
|
466
|
+
| `--mrl-space-inset-control-large` | `var(--mrl-spacing-05)` | --mrl-spacing-05 → 16px / 1rem | Inset padding for large controls. |
|
|
467
|
+
| `--mrl-space-inset-control-small` | `calc(10 / var(--mrl-baseline) * 1rem)` | 10px / 0.625rem | Inset padding for small controls (form inputs, buttons). No global spacing token for 10px, so this is hard-coded. |
|
|
468
|
+
| `--mrl-space-inline-related` | `var(--mrl-spacing-03)` | --mrl-spacing-03 → 8px / 0.5rem | Horizontal spacing between related elements. |
|
|
469
|
+
| `--mrl-space-inline-sibling` | `var(--mrl-spacing-04)` | --mrl-spacing-04 → 12px / 0.75rem | Horizontal spacing between sibling elements. |
|
|
470
|
+
| `--mrl-space-inline-sibling-small` | `var(--mrl-spacing-02)` | --mrl-spacing-02 → 4px / 0.25rem | Horizontal spacing between closely placed sibling elements. |
|
|
471
|
+
| `--mrl-space-inline-sibling-xsmall` | `var(--mrl-space-inline-sibling-small)` | --mrl-space-inline-sibling-small → --mrl-spacing-02 → 4px / 0.25rem | Horizontal spacing between very closely placed sibling elements. |
|
|
472
|
+
| `--mrl-space-gutter` | `var(--mrl-spacing-04)` | --mrl-spacing-04 → 12px / 0.75rem | Default grid/layout gutter. |
|
|
473
|
+
| `--mrl-space-gutter-label` | `var(--mrl-spacing-05)` | --mrl-spacing-05 → 16px / 1rem | Gutter spacing around labels. |
|
|
474
|
+
|
|
475
|
+
## Typography
|
|
476
|
+
|
|
477
|
+
### Global
|
|
478
|
+
|
|
479
|
+
#### Font family
|
|
480
|
+
|
|
481
|
+
| CSS variable | Value | Description |
|
|
482
|
+
| --- | --- | --- |
|
|
483
|
+
| `--mrl-font-family-01` | `abcsocial` | Font family token. |
|
|
484
|
+
| `--mrl-font-family-02` | `stkbureau` | Font family token. |
|
|
485
|
+
|
|
486
|
+
#### Font size
|
|
487
|
+
|
|
488
|
+
| CSS variable | Value | Resolved | Description |
|
|
489
|
+
| --- | --- | --- | --- |
|
|
490
|
+
| `--mrl-font-size-01` | `calc(11 / var(--mrl-baseline) * 1rem)` | 11px / 0.6875rem | Font size token. |
|
|
491
|
+
| `--mrl-font-size-02` | `calc(12 / var(--mrl-baseline) * 1rem)` | 12px / 0.75rem | Font size token. |
|
|
492
|
+
| `--mrl-font-size-03` | `calc(14 / var(--mrl-baseline) * 1rem)` | 14px / 0.875rem | Font size token. |
|
|
493
|
+
| `--mrl-font-size-04` | `calc(16 / var(--mrl-baseline) * 1rem)` | 16px / 1rem | Font size token. |
|
|
494
|
+
| `--mrl-font-size-05` | `calc(18 / var(--mrl-baseline) * 1rem)` | 18px / 1.125rem | Font size token. |
|
|
495
|
+
| `--mrl-font-size-06` | `calc(20 / var(--mrl-baseline) * 1rem)` | 20px / 1.25rem | Font size token. |
|
|
496
|
+
| `--mrl-font-size-07` | `calc(24 / var(--mrl-baseline) * 1rem)` | 24px / 1.5rem | Font size token. |
|
|
497
|
+
| `--mrl-font-size-08` | `calc(32 / var(--mrl-baseline) * 1rem)` | 32px / 2rem | Font size token. |
|
|
498
|
+
| `--mrl-font-size-09` | `calc(40 / var(--mrl-baseline) * 1rem)` | 40px / 2.5rem | Font size token. |
|
|
499
|
+
| `--mrl-font-size-10` | `calc(48 / var(--mrl-baseline) * 1rem)` | 48px / 3rem | Font size token. |
|
|
500
|
+
| `--mrl-font-size-11` | `calc(64 / var(--mrl-baseline) * 1rem)` | 64px / 4rem | Font size token. |
|
|
501
|
+
| `--mrl-font-size-12` | `calc(80 / var(--mrl-baseline) * 1rem)` | 80px / 5rem | Font size token. |
|
|
502
|
+
| `--mrl-font-size-13` | `calc(96 / var(--mrl-baseline) * 1rem)` | 96px / 6rem | Font size token. |
|
|
503
|
+
| `--mrl-font-size-14` | `calc(120 / var(--mrl-baseline) * 1rem)` | 120px / 7.5rem | Font size token. |
|
|
504
|
+
|
|
505
|
+
#### Line height
|
|
506
|
+
|
|
507
|
+
| CSS variable | Value | Description |
|
|
508
|
+
| --- | --- | --- |
|
|
509
|
+
| `--mrl-line-height-01` | `0.875` | Line height token. |
|
|
510
|
+
| `--mrl-line-height-02` | `1` | Line height token. |
|
|
511
|
+
| `--mrl-line-height-03` | `1.125` | Line height token. |
|
|
512
|
+
| `--mrl-line-height-04` | `1.167` | Line height token. |
|
|
513
|
+
| `--mrl-line-height-05` | `1.25` | Line height token. |
|
|
514
|
+
| `--mrl-line-height-06` | `1.333` | Line height token. |
|
|
515
|
+
| `--mrl-line-height-07` | `1.4` | Line height token. |
|
|
516
|
+
| `--mrl-line-height-08` | `1.429` | Line height token. |
|
|
517
|
+
| `--mrl-line-height-09` | `1.5` | Line height token. |
|
|
518
|
+
| `--mrl-line-height-10` | `1.56` | Line height token. |
|
|
519
|
+
| `--mrl-line-height-11` | `1.75` | Line height token. |
|
|
520
|
+
| `--mrl-line-height-12` | `2` | Line height token. |
|
|
521
|
+
|
|
522
|
+
#### Letter spacing
|
|
523
|
+
|
|
524
|
+
| CSS variable | Value | Description |
|
|
525
|
+
| --- | --- | --- |
|
|
526
|
+
| `--mrl-letter-spacing-01` | `-2%` | Letter spacing token. |
|
|
527
|
+
| `--mrl-letter-spacing-02` | `-1%` | Letter spacing token. |
|
|
528
|
+
| `--mrl-letter-spacing-03` | `0%` | Letter spacing token. |
|
|
529
|
+
| `--mrl-letter-spacing-04` | `1%` | Letter spacing token. |
|
|
530
|
+
| `--mrl-letter-spacing-05` | `2%` | Letter spacing token. |
|
|
531
|
+
|
|
532
|
+
#### Font weight
|
|
533
|
+
|
|
534
|
+
| CSS variable | Value | Description |
|
|
535
|
+
| --- | --- | --- |
|
|
536
|
+
| `--mrl-font-weight-01` | `400` | Regular. Font weight token. |
|
|
537
|
+
| `--mrl-font-weight-02` | `500` | Medium. Font weight token. |
|
|
538
|
+
| `--mrl-font-weight-03` | `600` | Semi-bold. Font weight token. |
|
|
539
|
+
| `--mrl-font-weight-04` | `700` | Bold. Font weight token. |
|
|
540
|
+
| `--mrl-font-weight-05` | `800` | Extra-bold. Font weight token. |
|
|
541
|
+
|
|
542
|
+
### Contextual
|
|
543
|
+
|
|
544
|
+
#### Body font
|
|
545
|
+
|
|
546
|
+
| CSS variable | Value | Resolved | Description |
|
|
547
|
+
| --- | --- | --- | --- |
|
|
548
|
+
| `--mrl-body-font` | `var(--mrl-font-family-01), sans-serif` | --mrl-font-family-01 → abcsocial | Used for all body copy. |
|
|
549
|
+
|
|
550
|
+
#### Heading
|
|
551
|
+
|
|
552
|
+
| CSS variable | Value | Resolved | Description |
|
|
553
|
+
| --- | --- | --- | --- |
|
|
554
|
+
| `--mrl-heading-font` | `var(--mrl-font-family-01), sans-serif` | --mrl-font-family-01 → abcsocial | Used for most headings. |
|
|
555
|
+
| `--mrl-heading-font-alt` | `var(--mrl-font-family-02), serif` | --mrl-font-family-02 → stkbureau | Used for headings with kind="display". |
|
|
556
|
+
|
|
557
|
+
#### Type size
|
|
558
|
+
|
|
559
|
+
| CSS variable | Value | Resolved | Description |
|
|
560
|
+
| --- | --- | --- | --- |
|
|
561
|
+
| `--mrl-type-size-display` | `var(--mrl-font-size-08)` | --mrl-font-size-08 → 32px / 2rem | When the viewport is 600px or wider, this token uses --mrl-font-size-09. |
|
|
562
|
+
| `--mrl-type-size-display-large` | `var(--mrl-font-size-09)` | --mrl-font-size-09 → 40px / 2.5rem | When the viewport is 600px or wider, this token uses --mrl-font-size-10. |
|
|
563
|
+
| `--mrl-type-size-display-small` | `var(--mrl-font-size-07)` | --mrl-font-size-07 → 24px / 1.5rem | When the viewport is 600px or wider, this token uses --mrl-font-size-08. |
|
|
564
|
+
| `--mrl-type-size-display-xsmall` | `var(--mrl-font-size-06)` | --mrl-font-size-06 → 20px / 1.25rem | When the viewport is 600px or wider, this token uses --mrl-font-size-07. |
|
|
565
|
+
| `--mrl-type-size-headline` | `var(--mrl-font-size-06)` | --mrl-font-size-06 → 20px / 1.25rem | Contextual typography token. |
|
|
566
|
+
| `--mrl-type-size-headline-large` | `var(--mrl-font-size-06)` | --mrl-font-size-06 → 20px / 1.25rem | When the viewport is 600px or wider, this token uses --mrl-font-size-07. |
|
|
567
|
+
| `--mrl-type-size-headline-small` | `var(--mrl-font-size-04)` | --mrl-font-size-04 → 16px / 1rem | Contextual typography token. |
|
|
568
|
+
| `--mrl-type-size-text` | `var(--mrl-font-size-04)` | --mrl-font-size-04 → 16px / 1rem | Contextual typography token. |
|
|
569
|
+
| `--mrl-type-size-text-large` | `var(--mrl-font-size-05)` | --mrl-font-size-05 → 18px / 1.125rem | Contextual typography token. |
|
|
570
|
+
| `--mrl-type-size-text-small` | `var(--mrl-font-size-03)` | --mrl-font-size-03 → 14px / 0.875rem | Contextual typography token. |
|
|
571
|
+
| `--mrl-type-size-text-xsmall` | `var(--mrl-font-size-02)` | --mrl-font-size-02 → 12px / 0.75rem | Contextual typography token. |
|
|
572
|
+
| `--mrl-type-size-text-xxsmall` | `var(--mrl-font-size-01)` | --mrl-font-size-01 → 11px / 0.6875rem | Contextual typography token. |
|
|
573
|
+
| `--mrl-type-size-toggleable-label` | `calc(10 / var(--mrl-baseline) * 1rem)` | 10px / 0.625rem | Toggleable label mixin variable. Exceptional value: this mixin renders a 10px font, which we have no variable for. |
|
|
574
|
+
|
|
575
|
+
#### Type line height
|
|
576
|
+
|
|
577
|
+
| CSS variable | Value | Resolved | Description |
|
|
578
|
+
| --- | --- | --- | --- |
|
|
579
|
+
| `--mrl-type-line-height-display` | `var(--mrl-line-height-02)` | --mrl-line-height-02 → 1 | Contextual typography token. |
|
|
580
|
+
| `--mrl-type-line-height-display-large` | `var(--mrl-line-height-02)` | --mrl-line-height-02 → 1 | Contextual typography token. |
|
|
581
|
+
| `--mrl-type-line-height-display-small` | `var(--mrl-line-height-02)` | --mrl-line-height-02 → 1 | Contextual typography token. |
|
|
582
|
+
| `--mrl-type-line-height-display-xsmall` | `var(--mrl-line-height-02)` | --mrl-line-height-02 → 1 | Contextual typography token. |
|
|
583
|
+
| `--mrl-type-line-height-headline` | `var(--mrl-line-height-07)` | --mrl-line-height-07 → 1.4 | Contextual typography token. |
|
|
584
|
+
| `--mrl-type-line-height-headline-large` | `var(--mrl-line-height-07)` | --mrl-line-height-07 → 1.4 | When the viewport is 600px or wider, this token uses --mrl-line-height-06. |
|
|
585
|
+
| `--mrl-type-line-height-headline-small` | `var(--mrl-line-height-02)` | --mrl-line-height-02 → 1 | When the viewport is 600px or wider, this token uses --mrl-line-height-09. |
|
|
586
|
+
| `--mrl-type-line-height-interactive` | `var(--mrl-line-height-09)` | --mrl-line-height-09 → 1.5 | Contextual typography token. |
|
|
587
|
+
| `--mrl-type-line-height-interactive-large` | `var(--mrl-line-height-10)` | --mrl-line-height-10 → 1.56 | Contextual typography token. |
|
|
588
|
+
| `--mrl-type-line-height-interactive-small` | `var(--mrl-line-height-08)` | --mrl-line-height-08 → 1.429 | Contextual typography token. |
|
|
589
|
+
| `--mrl-type-line-height-interactive-xsmall` | `var(--mrl-line-height-06)` | --mrl-line-height-06 → 1.333 | Contextual typography token. |
|
|
590
|
+
| `--mrl-type-line-height-text` | `var(--mrl-line-height-09)` | --mrl-line-height-09 → 1.5 | Contextual typography token. |
|
|
591
|
+
| `--mrl-type-line-height-text-large` | `var(--mrl-line-height-10)` | --mrl-line-height-10 → 1.56 | Contextual typography token. |
|
|
592
|
+
| `--mrl-type-line-height-text-small` | `var(--mrl-line-height-08)` | --mrl-line-height-08 → 1.429 | Contextual typography token. |
|
|
593
|
+
| `--mrl-type-line-height-text-xsmall` | `var(--mrl-line-height-06)` | --mrl-line-height-06 → 1.333 | Contextual typography token. |
|
|
594
|
+
| `--mrl-type-line-height-text-xxsmall` | `var(--mrl-line-height-08)` | --mrl-line-height-08 → 1.429 | Contextual typography token. |
|
|
595
|
+
| `--mrl-type-line-height-title` | `var(--mrl-line-height-05)` | --mrl-line-height-05 → 1.25 | The title use case follows the same line-height scale as text. |
|
|
596
|
+
| `--mrl-type-line-height-title-large` | `var(--mrl-line-height-06)` | --mrl-line-height-06 → 1.333 | The title use case follows the same line-height scale as text. |
|
|
597
|
+
| `--mrl-type-line-height-title-small` | `var(--mrl-line-height-08)` | --mrl-line-height-08 → 1.429 | The title use case follows the same line-height scale as text. |
|
|
598
|
+
| `--mrl-type-line-height-title-xsmall` | `var(--mrl-line-height-06)` | --mrl-line-height-06 → 1.333 | The title use case follows the same line-height scale as text. |
|
|
599
|
+
| `--mrl-type-line-height-title-xxsmall` | `var(--mrl-line-height-06)` | --mrl-line-height-06 → 1.333 | The title use case follows the same line-height scale as text. |
|
|
600
|
+
|
|
601
|
+
#### Type weight
|
|
602
|
+
|
|
603
|
+
| CSS variable | Value | Resolved | Description |
|
|
604
|
+
| --- | --- | --- | --- |
|
|
605
|
+
| `--mrl-type-weight-display` | `var(--mrl-font-weight-01)` | --mrl-font-weight-01 → 400 | Contextual typography token. |
|
|
606
|
+
| `--mrl-type-weight-headline` | `var(--mrl-font-weight-04)` | --mrl-font-weight-04 → 700 | Contextual typography token. |
|
|
607
|
+
| `--mrl-type-weight-interactive` | `var(--mrl-font-weight-04)` | --mrl-font-weight-04 → 700 | Contextual typography token. |
|
|
608
|
+
| `--mrl-type-weight-text` | `var(--mrl-font-weight-01)` | --mrl-font-weight-01 → 400 | Contextual typography token. |
|
|
609
|
+
| `--mrl-type-weight-text-bold` | `var(--mrl-font-weight-04)` | --mrl-font-weight-04 → 700 | Contextual typography token. |
|
|
610
|
+
| `--mrl-type-weight-text-secondary` | `var(--mrl-font-weight-01)` | --mrl-font-weight-01 → 400 | Contextual typography token. |
|
|
611
|
+
| `--mrl-type-weight-title` | `var(--mrl-font-weight-04)` | --mrl-font-weight-04 → 700 | Contextual typography token. |
|
|
612
|
+
| `--mrl-type-weight-title-secondary` | `var(--mrl-font-weight-02)` | --mrl-font-weight-02 → 500 | Contextual typography token. |
|
|
613
|
+
| `--mrl-type-weight-toggleable-label` | `var(--mrl-font-weight-03)` | --mrl-font-weight-03 → 600 | Toggleable label mixin variable. |
|
|
614
|
+
|
|
615
|
+
#### Type spacing
|
|
616
|
+
|
|
617
|
+
| CSS variable | Value | Resolved | Description |
|
|
618
|
+
| --- | --- | --- | --- |
|
|
619
|
+
| `--mrl-type-spacing-display` | `var(--mrl-letter-spacing-03)` | --mrl-letter-spacing-03 → 0% | Contextual typography token. |
|
|
620
|
+
| `--mrl-type-spacing-display-large` | `var(--mrl-letter-spacing-02)` | --mrl-letter-spacing-02 → -1% | Contextual typography token. |
|
|
621
|
+
| `--mrl-type-spacing-display-small` | `var(--mrl-letter-spacing-02)` | --mrl-letter-spacing-02 → -1% | Contextual typography token. |
|
|
622
|
+
| `--mrl-type-spacing-display-xsmall` | `var(--mrl-letter-spacing-02)` | --mrl-letter-spacing-02 → -1% | Contextual typography token. |
|
|
623
|
+
| `--mrl-type-spacing-headline` | `var(--mrl-letter-spacing-03)` | --mrl-letter-spacing-03 → 0% | Contextual typography token. |
|
|
624
|
+
| `--mrl-type-spacing-headline-large` | `var(--mrl-letter-spacing-03)` | --mrl-letter-spacing-03 → 0% | Contextual typography token. |
|
|
625
|
+
| `--mrl-type-spacing-headline-small` | `var(--mrl-letter-spacing-04)` | --mrl-letter-spacing-04 → 1% | When the viewport is 600px or wider, this token uses --mrl-letter-spacing-03. |
|
|
626
|
+
| `--mrl-type-spacing-interactive-xsmall` | `var(--mrl-letter-spacing-04)` | --mrl-letter-spacing-04 → 1% | Contextual typography token. |
|
|
627
|
+
| `--mrl-type-spacing-text` | `var(--mrl-letter-spacing-03)` | --mrl-letter-spacing-03 → 0% | Contextual typography token. |
|
|
628
|
+
|
|
629
|
+
## Border
|
|
630
|
+
|
|
631
|
+
### Global
|
|
632
|
+
|
|
633
|
+
#### Radii
|
|
634
|
+
|
|
635
|
+
| CSS variable | Value | Resolved | Description |
|
|
636
|
+
| --- | --- | --- | --- |
|
|
637
|
+
| `--mrl-radii-01` | `2px` | 2px | Border radius token. |
|
|
638
|
+
| `--mrl-radii-02` | `4px` | 4px | Border radius token. |
|
|
639
|
+
| `--mrl-radii-03` | `8px` | 8px | Border radius token. |
|
|
640
|
+
| `--mrl-radii-04` | `12px` | 12px | Border radius token. |
|
|
641
|
+
| `--mrl-radii-05` | `16px` | 16px | Border radius token. |
|
|
642
|
+
| `--mrl-radii-06` | `24px` | 24px | Border radius token. |
|
|
643
|
+
| `--mrl-radii-07` | `32px` | 32px | Border radius token. |
|
|
644
|
+
| `--mrl-radii-08` | `40px` | 40px | Border radius token. |
|
|
645
|
+
|
|
646
|
+
#### Stroke
|
|
647
|
+
|
|
648
|
+
| CSS variable | Value | Resolved | Description |
|
|
649
|
+
| --- | --- | --- | --- |
|
|
650
|
+
| `--mrl-stroke-01` | `2px` | 2px | Border width token. |
|
|
651
|
+
| `--mrl-stroke-02` | `2px` | 2px | Border width token. |
|
|
652
|
+
| `--mrl-stroke-03` | `2px` | 2px | Border width token. |
|
|
653
|
+
|
|
654
|
+
### Contextual
|
|
655
|
+
|
|
656
|
+
#### Line width
|
|
657
|
+
|
|
658
|
+
| CSS variable | Value | Resolved | Description |
|
|
659
|
+
| --- | --- | --- | --- |
|
|
660
|
+
| `--mrl-line-width-border` | `var(--mrl-stroke-01)` | --mrl-stroke-01 → 2px | Default border width. |
|
|
661
|
+
| `--mrl-line-width-border-fine` | `1px` | 1px | Fine border width. No global stroke token for 1px, so this is hard-coded. |
|
|
662
|
+
| `--mrl-line-width-border-selected` | `var(--mrl-stroke-01)` | --mrl-stroke-01 → 2px | Border width for selected state. |
|
|
663
|
+
| `--mrl-line-width-control` | `var(--mrl-stroke-01)` | --mrl-stroke-01 → 2px | Border width for controls. |
|
|
664
|
+
| `--mrl-line-width-divider` | `var(--mrl-stroke-01)` | --mrl-stroke-01 → 2px | Width for divider lines. |
|
|
665
|
+
| `--mrl-line-width-focus` | `var(--mrl-stroke-01)` | --mrl-stroke-01 → 2px | Focus ring width. |
|
|
666
|
+
|
|
667
|
+
#### Border radius
|
|
668
|
+
|
|
669
|
+
| CSS variable | Value | Resolved | Description |
|
|
670
|
+
| --- | --- | --- | --- |
|
|
671
|
+
| `--mrl-border-radius-container` | `var(--mrl-radii-04)` | --mrl-radii-04 → 12px | For components/elements that are shells, meaning that the element itself doesn't typically know or care what the child elements are and simply provide a bounding element, for example, drawers, popovers, etc. |
|
|
672
|
+
| `--mrl-border-radius-container-large` | `var(--mrl-radii-05)` | --mrl-radii-05 → 16px | For components/elements that are large, shell containers (e.g., modals or other near full-page elements). |
|
|
673
|
+
| `--mrl-border-radius-content` | `var(--mrl-radii-02)` | --mrl-radii-02 → 4px | For elements that are static content. |
|
|
674
|
+
| `--mrl-border-radius-content-large` | `var(--mrl-radii-03)` | --mrl-radii-03 → 8px | Large content corner radius. |
|
|
675
|
+
| `--mrl-border-radius-functional` | `var(--mrl-radii-03)` | --mrl-radii-03 → 8px | For interactive elements. If a component can be both static and functional (e.g., Avatars), use the functional token over the "Content" token. |
|
|
676
|
+
| `--mrl-border-radius-functional-large` | `var(--mrl-radii-04)` | --mrl-radii-04 → 12px | Large corner radius for functional elements. |
|
|
677
|
+
| `--mrl-border-radius-rounded` | `var(--mrl-radii-07)` | --mrl-radii-07 → 32px | For components/elements that intentionally have an overly rounded appearance. Special note for elements that are pure circles (e.g. spinner, radio button, etc.), in these cases use a component token overwrite to make it 100% rounded. |
|
|
678
|
+
| `--mrl-border-radius-rounded-large` | `var(--mrl-radii-08)` | --mrl-radii-08 → 40px | Large rounded corner radius. |
|
|
679
|
+
| `--mrl-border-radius-tight` | `var(--mrl-radii-01)` | --mrl-radii-01 → 2px | When the content has tight spacing considerations. |
|
|
680
|
+
|
|
681
|
+
#### Border shorthands
|
|
682
|
+
|
|
683
|
+
| CSS variable | Value | Description |
|
|
684
|
+
| --- | --- | --- |
|
|
685
|
+
| `--mrl-border` | `var(--mrl-line-width-border) solid var(--mrl-color-line)` | Default border shorthand. |
|
|
686
|
+
| `--mrl-border-hover` | `var(--mrl-line-width-border) solid var(--mrl-color-line-hover)` | Border shorthand, hover state. |
|
|
687
|
+
| `--mrl-border-active` | `var(--mrl-line-width-border) solid var(--mrl-color-line-active)` | Border shorthand, active state. |
|
|
688
|
+
| `--mrl-border-selected` | `var(--mrl-line-width-border-selected) solid var(--mrl-color-line-selected)` | Border shorthand, selected state. |
|
|
689
|
+
| `--mrl-border-disabled` | `var(--mrl-line-width-border) solid var(--mrl-color-line-disabled)` | Border shorthand, disabled state. |
|
|
690
|
+
| `--mrl-border-emph` | `var(--mrl-line-width-border) solid var(--mrl-color-line-emph)` | Emphasized border shorthand. |
|
|
691
|
+
| `--mrl-border-emph-hover` | `var(--mrl-line-width-border) solid var(--mrl-color-line-emph-hover)` | Emphasized border shorthand, hover state. |
|
|
692
|
+
| `--mrl-border-emph-active` | `var(--mrl-line-width-border) solid var(--mrl-color-line-emph-active)` | Emphasized border shorthand, active state. |
|
|
693
|
+
| `--mrl-border-emph-selected` | `var(--mrl-line-width-border-selected) solid var(--mrl-color-line-emph-selected)` | Emphasized border shorthand, selected state. |
|
|
694
|
+
| `--mrl-border-inverse` | `var(--mrl-line-width-border) solid var(--mrl-color-line-inverse)` | Border shorthand on inverse surfaces. |
|
|
695
|
+
| `--mrl-border-inverse-hover` | `var(--mrl-line-width-border) solid var(--mrl-color-line-inverse)` | Inverse border shorthand, hover state. |
|
|
696
|
+
| `--mrl-border-inverse-active` | `var(--mrl-line-width-border) solid var(--mrl-color-line-inverse)` | Inverse border shorthand, active state. |
|
|
697
|
+
| `--mrl-border-inverse-selected` | `var(--mrl-line-width-border-selected) solid var(--mrl-color-line-inverse)` | Inverse border shorthand, selected state. |
|
|
698
|
+
| `--mrl-border-inverse-disabled` | `var(--mrl-line-width-border) solid var(--mrl-color-line-inverse-disabled)` | Inverse border shorthand, disabled state. |
|
|
699
|
+
| `--mrl-border-focus` | `var(--mrl-line-width-focus) solid var(--mrl-color-focus)` | Focus ring border shorthand. |
|
|
700
|
+
| `--mrl-border-divider` | `var(--mrl-line-width-divider) solid var(--mrl-color-line-divider)` | Divider line border shorthand. |
|
|
701
|
+
|
|
702
|
+
## Shadows
|
|
703
|
+
|
|
704
|
+
### Global
|
|
705
|
+
|
|
706
|
+
| CSS variable | Value | Description |
|
|
707
|
+
| --- | --- | --- |
|
|
708
|
+
| `--mrl-shadow-01` | `0 0 1px 0 rgba(11, 41, 70, 0.32), 0 4px 4px 0 rgba(42, 82, 121, 0.04)` | Shadow token. |
|
|
709
|
+
| `--mrl-shadow-02` | `0 0 1px 0 rgba(11, 41, 70, 0.32), 0 6px 8px 0 rgba(42, 82, 121, 0.04)` | Shadow token. |
|
|
710
|
+
| `--mrl-shadow-03` | `0 0 1px 0 rgba(11, 41, 70, 0.32), 0 24px 20px 0 rgba(42, 82, 121, 0.08)` | Shadow token. |
|
|
711
|
+
| `--mrl-shadow-interactive-01` | `0 4px 5px 0 rgba(24, 36, 47, 0.08)` | Shadow token. |
|
|
712
|
+
| `--mrl-shadow-interactive-02` | `0 12px 20px 0px rgba(27, 57, 75, 0.2)` | Shadow token. |
|
|
713
|
+
|
|
714
|
+
### Contextual
|
|
715
|
+
|
|
716
|
+
| CSS variable | Value | Resolved | Description |
|
|
717
|
+
| --- | --- | --- | --- |
|
|
718
|
+
| `--mrl-shadows-lifted` | `var(--mrl-shadow-01)` | --mrl-shadow-01 → 0 0 1px 0 rgba(11, 41, 70, 0.32), 0 4px 4px 0 rgba(42, 82, 121, 0.04) | Contextual shadow token. |
|
|
719
|
+
| `--mrl-shadows-raised` | `var(--mrl-shadow-02)` | --mrl-shadow-02 → 0 0 1px 0 rgba(11, 41, 70, 0.32), 0 6px 8px 0 rgba(42, 82, 121, 0.04) | Contextual shadow token. |
|
|
720
|
+
| `--mrl-shadows-floating` | `var(--mrl-shadow-03)` | --mrl-shadow-03 → 0 0 1px 0 rgba(11, 41, 70, 0.32), 0 24px 20px 0 rgba(42, 82, 121, 0.08) | Contextual shadow token. |
|
|
721
|
+
| `--mrl-shadows-hover` | `var(--mrl-shadow-interactive-01)` | --mrl-shadow-interactive-01 → 0 4px 5px 0 rgba(24, 36, 47, 0.08) | Contextual shadow token. |
|
|
722
|
+
| `--mrl-shadows-drag` | `var(--mrl-shadow-interactive-02)` | --mrl-shadow-interactive-02 → 0 12px 20px 0px rgba(27, 57, 75, 0.2) | Contextual shadow token. |
|
|
723
|
+
|
|
724
|
+
## Motion
|
|
725
|
+
|
|
726
|
+
### Global
|
|
727
|
+
|
|
728
|
+
#### Timing
|
|
729
|
+
|
|
730
|
+
| CSS variable | Value | Description |
|
|
731
|
+
| --- | --- | --- |
|
|
732
|
+
| `--mrl-timing-m1` | `cubic-bezier(0.17, 0, 0, 1)` | Motion timing token. |
|
|
733
|
+
| `--mrl-timing-m1r` | `cubic-bezier(1, 0, 0.83, 1)` | Motion timing token. |
|
|
734
|
+
| `--mrl-timing-m2` | `cubic-bezier(0, 0.5, 0, 1)` | Motion timing token. |
|
|
735
|
+
| `--mrl-timing-m3` | `cubic-bezier(0.33, 0, 0.67, 1)` | Motion timing token. |
|
|
736
|
+
| `--mrl-timing-m4` | `cubic-bezier(0, 0, 0, 1)` | Motion timing token. |
|
|
737
|
+
|
|
738
|
+
#### Duration
|
|
739
|
+
|
|
740
|
+
| CSS variable | Value | Description |
|
|
741
|
+
| --- | --- | --- |
|
|
742
|
+
| `--mrl-duration-01` | `17ms` | Motion duration token. |
|
|
743
|
+
| `--mrl-duration-02` | `167ms` | Motion duration token. |
|
|
744
|
+
| `--mrl-duration-03` | `333ms` | Motion duration token. |
|
|
745
|
+
| `--mrl-duration-04` | `667ms` | Motion duration token. |
|
|
746
|
+
|
|
747
|
+
#### Distance
|
|
748
|
+
|
|
749
|
+
| CSS variable | Value | Resolved | Description |
|
|
750
|
+
| --- | --- | --- | --- |
|
|
751
|
+
| `--mrl-distance-01` | `4px` | 4px | Motion distance token. |
|
|
752
|
+
| `--mrl-distance-02` | `8px` | 8px | Motion distance token. |
|