@muraldevkit/ds-foundation 2.27.0 → 2.28.1-dev-eNqR.1
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/README.md +20 -4
- package/dist/TOKENS.md +753 -0
- package/dist/foundation.css.map +1 -1
- package/dist/foundation.min.css.map +1 -1
- package/package.json +1 -1
- package/src/styles/_functions.scss +3 -3
- package/src/styles/_mixins.scss +6 -7
- package/src/styles/focus.scss +55 -42
- package/src/styles/index.scss +0 -1
- package/src/styles/skeletons/button.scss +18 -20
- package/src/styles/grid.scss +0 -4
package/README.md
CHANGED
|
@@ -6,10 +6,10 @@ It includes design tokens, global styles, and utilities.
|
|
|
6
6
|
## Table of contents
|
|
7
7
|
|
|
8
8
|
1. [Design tokens](#design-tokens)
|
|
9
|
+
1. [Token reference](#token-reference)
|
|
9
10
|
1. [Installation](#installation)
|
|
10
11
|
1. [Global styles and utilities](#global-styles-and-utilities)
|
|
11
12
|
1. [Noteworthy files](#noteworthy-files)
|
|
12
|
-
1. [Sass maps](#sass-maps)
|
|
13
13
|
1. [Usage](#usage)
|
|
14
14
|
1. [Importing Foundation styles](#importing-foundation-styles)
|
|
15
15
|
1. [SCSS imports](#scss-imports)
|
|
@@ -21,7 +21,19 @@ It includes design tokens, global styles, and utilities.
|
|
|
21
21
|
|
|
22
22
|
### Design Tokens
|
|
23
23
|
|
|
24
|
-
Please read our internal design token guides to understand their architecture (global, contextual vs. component hierarchy) and adoption guides. Please follow the [contribution](./docs/contributing.md) best practices when adding or updating tokens.
|
|
24
|
+
Tokens are authored as [DTCG](https://tr.designtokens.org/format/)-format JSON under `src/tokens/` and compiled by [Style Dictionary](https://styledictionary.com) into the CSS custom properties (`--mrl-*`) this package ships. Please read our internal design token guides to understand their architecture (global, contextual vs. component hierarchy) and adoption guides, and [`architecture.md`](./architecture.md) for how the pipeline works. Please follow the [contribution](./docs/contributing.md) best practices when adding or updating tokens.
|
|
25
|
+
|
|
26
|
+
#### Token reference
|
|
27
|
+
|
|
28
|
+
**`dist/TOKENS.md` is the reference for every token in the design system** — one table per family, split into global and contextual tiers, listing each token's CSS custom property name, the value as it lands in real CSS, the resolved value behind an alias, the hex equivalent for colors, and its description. It opens with the usage rules that are easy to get wrong (colors are RGB triplets and must be wrapped; some values change at the 600px breakpoint) and with guidance for finding a token from an intent or from a raw hex/px value you want to replace.
|
|
29
|
+
|
|
30
|
+
It is generated from `src/tokens/**/*.json` on every build, so it can never be out of date with the tokens it documents. Read it at:
|
|
31
|
+
|
|
32
|
+
```
|
|
33
|
+
node_modules/@muraldevkit/ds-foundation/dist/TOKENS.md
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
If you are working in this repo, run `npm run build` in `packages/foundation` first — `dist/` is gitignored, so the file exists only after a build. Do not edit it; edit the JSON sources and rebuild.
|
|
25
37
|
|
|
26
38
|
### Installation
|
|
27
39
|
|
|
@@ -39,7 +51,6 @@ Under `src/styles` you'll find the foundation styles of the design system that a
|
|
|
39
51
|
- **global-variables/breakpoints.scss** — Sass-only breakpoint variables (`$mrl-breakpoint-01..05`). Lives outside the JSON because `@media` queries cannot reference `var(--…)`.
|
|
40
52
|
- **contextual-variables/\*.scss** — Viewport-responsive overrides on top of the JSON-sourced custom properties. Used for the small set of tokens whose value changes inside `@media` blocks (Style Dictionary emits a flat `:root {}` and cannot model media queries).
|
|
41
53
|
- **baseline.scss** - Ensures modern, cross-browser element rendering. Based off of [Normalize.css](https://necolas.github.io/normalize.css/).
|
|
42
|
-
- **grid.scss** - Utility classes to allow applications to create consistent layouts.
|
|
43
54
|
- **index.scss** - Collection of all SCSS modules in the `styles` directory **except** `fonts.scss`. Forwards `_tokens` first.
|
|
44
55
|
- **fonts.scss** - Collection of font styles for loading fonts - compiles separately from other scss files.
|
|
45
56
|
|
|
@@ -77,7 +88,7 @@ To compile the DTCG token JSON into `_tokens.scss` and then transpile the SCSS t
|
|
|
77
88
|
npm run build
|
|
78
89
|
```
|
|
79
90
|
|
|
80
|
-
This runs `build.mjs`, which (1) executes Style Dictionary to regenerate `src/styles/_tokens.scss` from `src/tokens/**/*.json` and (2) compiles the Sass entry points to expanded + minified CSS with source maps. The DTCG JSON is also copied to `dist/tokens/` for downstream tooling.
|
|
91
|
+
This runs `build.mjs`, which (1) executes Style Dictionary to regenerate `src/styles/_tokens.scss`, `zeroheight/tokens.json`, and `dist/TOKENS.md` from `src/tokens/**/*.json` and (2) compiles the Sass entry points to expanded + minified CSS with source maps. The DTCG JSON is also copied to `dist/tokens/` for downstream tooling.
|
|
81
92
|
|
|
82
93
|
The design system provides compiled and minified versions of the baseline foundation styles and font declarations. The available CSS files are:
|
|
83
94
|
|
|
@@ -86,6 +97,11 @@ The design system provides compiled and minified versions of the baseline founda
|
|
|
86
97
|
1. `@muraldevkit/ds-foundation/dist/fonts.css`
|
|
87
98
|
1. `@muraldevkit/ds-foundation/dist/fonts.min.css`
|
|
88
99
|
|
|
100
|
+
The published package also contains two non-CSS outputs:
|
|
101
|
+
|
|
102
|
+
1. `@muraldevkit/ds-foundation/dist/TOKENS.md` — the generated [token reference](#token-reference).
|
|
103
|
+
1. `@muraldevkit/ds-foundation/dist/tokens/**/*.json` — the DTCG token sources, for tooling that reads tokens as structured data.
|
|
104
|
+
|
|
89
105
|
##### Available utility classes
|
|
90
106
|
|
|
91
107
|
To support the reuse of styles across components, the design system provides [multiple utility classes](./docs/css-utilities.md). You can also use these within products as a way to maintain consistency and provide easier implementation of theming.
|
package/dist/TOKENS.md
ADDED
|
@@ -0,0 +1,753 @@
|
|
|
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. Use 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
|
|
56
|
+
file.
|
|
57
|
+
|
|
58
|
+
## Usage rules
|
|
59
|
+
|
|
60
|
+
1. **Color globals are RGB triplets, not colors.** `--mrl-blue-70` resolves to
|
|
61
|
+
`48, 106, 227` — three numbers, not a CSS color. Using it directly is
|
|
62
|
+
invalid CSS and renders nothing:
|
|
63
|
+
|
|
64
|
+
```css
|
|
65
|
+
/* ✅ */
|
|
66
|
+
color: rgb(var(--mrl-blue-70));
|
|
67
|
+
background: rgba(var(--mrl-blue-70), 0.1);
|
|
68
|
+
|
|
69
|
+
/* ❌ — invalid, renders nothing */
|
|
70
|
+
color: var(--mrl-blue-70);
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
Non-color families (spacing, radii, stroke, durations, …) emit complete
|
|
74
|
+
values and are used directly, e.g. `padding: var(--mrl-spacing-05);`.
|
|
75
|
+
|
|
76
|
+
2. **Values are not constants.** A few contextual tokens change at the 600px
|
|
77
|
+
breakpoint (called out in their description below), and every
|
|
78
|
+
baseline-relative spacing/font-size token is listed with its resolved
|
|
79
|
+
default. Check the row for the token you're using instead of hard-coding a
|
|
80
|
+
value seen once elsewhere.
|
|
81
|
+
|
|
82
|
+
3. **Spacing tokens are for `padding`/`margin`, not `height`/`width`.** Sizing
|
|
83
|
+
a box uses rem values, spacing tokens encode the rhythm between elements,
|
|
84
|
+
not element dimensions.
|
|
85
|
+
|
|
86
|
+
## How to read a row
|
|
87
|
+
|
|
88
|
+
Every table below lists, per token: the CSS custom property name; its
|
|
89
|
+
**Value** as it lands in real CSS, with references preserved as `var(--…)`
|
|
90
|
+
(matching what the compiled stylesheet emits — not the fully inlined value);
|
|
91
|
+
a **Resolved** column for aliases (the reference chain down to a concrete
|
|
92
|
+
value, e.g. `--mrl-gray-80 → 72, 82, 91`) and for baseline-relative dimensions (the
|
|
93
|
+
resolved px/rem default); and the raw source **Description**, used as-is —
|
|
94
|
+
including any deprecation note the source calls out.
|
|
95
|
+
|
|
96
|
+
## Color
|
|
97
|
+
|
|
98
|
+
### Global scales
|
|
99
|
+
|
|
100
|
+
#### Gray
|
|
101
|
+
|
|
102
|
+
| Key | CSS variable | Value | Hex |
|
|
103
|
+
| --- | --- | --- | --- |
|
|
104
|
+
| 10 | `--mrl-gray-10` | `249, 250, 250` | `#f9fafa` |
|
|
105
|
+
| 20 | `--mrl-gray-20` | `236, 240, 244` | `#ecf0f4` |
|
|
106
|
+
| 30 | `--mrl-gray-30` | `220, 225, 229` | `#dce1e5` |
|
|
107
|
+
| 40 | `--mrl-gray-40` | `184, 193, 204` | `#b8c1cc` |
|
|
108
|
+
| 50 | `--mrl-gray-50` | `155, 168, 182` | `#9ba8b6` |
|
|
109
|
+
| 60 | `--mrl-gray-60` | `129, 143, 156` | `#818f9c` |
|
|
110
|
+
| 70 | `--mrl-gray-70` | `99, 112, 126` | `#63707e` |
|
|
111
|
+
| 80 | `--mrl-gray-80` | `72, 82, 91` | `#48525b` |
|
|
112
|
+
| 90 | `--mrl-gray-90` | `40, 46, 52` | `#282e34` |
|
|
113
|
+
| 100 | `--mrl-gray-100` | `27, 31, 34` | `#1b1f22` |
|
|
114
|
+
|
|
115
|
+
#### Blue
|
|
116
|
+
|
|
117
|
+
| Key | CSS variable | Value | Hex |
|
|
118
|
+
| --- | --- | --- | --- |
|
|
119
|
+
| 10 | `--mrl-blue-10` | `247, 250, 255` | `#f7faff` |
|
|
120
|
+
| 20 | `--mrl-blue-20` | `230, 244, 254` | `#e6f4fe` |
|
|
121
|
+
| 30 | `--mrl-blue-30` | `205, 230, 254` | `#cde6fe` |
|
|
122
|
+
| 40 | `--mrl-blue-40` | `180, 217, 253` | `#b4d9fd` |
|
|
123
|
+
| 50 | `--mrl-blue-50` | `131, 191, 252` | `#83bffc` |
|
|
124
|
+
| 60 | `--mrl-blue-60` | `81, 143, 251` | `#518ffb` |
|
|
125
|
+
| 70 | `--mrl-blue-70` | `48, 106, 227` | `#306ae3` |
|
|
126
|
+
| 80 | `--mrl-blue-80` | `49, 99, 201` | `#3163c9` |
|
|
127
|
+
| 90 | `--mrl-blue-90` | `42, 86, 176` | `#2a56b0` |
|
|
128
|
+
| 100 | `--mrl-blue-100` | `30, 61, 125` | `#1e3d7d` |
|
|
129
|
+
|
|
130
|
+
#### Red
|
|
131
|
+
|
|
132
|
+
| Key | CSS variable | Value | Hex |
|
|
133
|
+
| --- | --- | --- | --- |
|
|
134
|
+
| 10 | `--mrl-red-10` | `255, 235, 235` | `#ffebeb` |
|
|
135
|
+
| 20 | `--mrl-red-20` | `255, 214, 214` | `#ffd6d6` |
|
|
136
|
+
| 30 | `--mrl-red-30` | `255, 204, 204` | `#ffcccc` |
|
|
137
|
+
| 40 | `--mrl-red-40` | `255, 179, 179` | `#ffb3b3` |
|
|
138
|
+
| 50 | `--mrl-red-50` | `255, 128, 128` | `#ff8080` |
|
|
139
|
+
| 60 | `--mrl-red-60` | `255, 75, 75` | `#ff4b4b` |
|
|
140
|
+
| 70 | `--mrl-red-70` | `224, 41, 53` | `#e02935` |
|
|
141
|
+
| 80 | `--mrl-red-80` | `179, 33, 42` | `#b3212a` |
|
|
142
|
+
| 90 | `--mrl-red-90` | `140, 26, 33` | `#8c1a21` |
|
|
143
|
+
| 100 | `--mrl-red-100` | `115, 21, 27` | `#73151b` |
|
|
144
|
+
|
|
145
|
+
#### Tomato
|
|
146
|
+
|
|
147
|
+
| Key | CSS variable | Value | Hex |
|
|
148
|
+
| --- | --- | --- | --- |
|
|
149
|
+
| 10 | `--mrl-tomato-10` | `251, 224, 223` | `#fbe0df` |
|
|
150
|
+
| 20 | `--mrl-tomato-20` | `253, 216, 216` | `#fdd8d8` |
|
|
151
|
+
| 30 | `--mrl-tomato-30` | `246, 193, 194` | `#f6c1c2` |
|
|
152
|
+
| 40 | `--mrl-tomato-40` | `240, 148, 151` | `#f09497` |
|
|
153
|
+
| 50 | `--mrl-tomato-50` | `227, 99, 103` | `#e36367` |
|
|
154
|
+
| 60 | `--mrl-tomato-60` | `224, 72, 77` | `#e0484d` |
|
|
155
|
+
| 70 | `--mrl-tomato-70` | `212, 58, 64` | `#d43a40` |
|
|
156
|
+
| 80 | `--mrl-tomato-80` | `205, 45, 51` | `#cd2d33` |
|
|
157
|
+
| 90 | `--mrl-tomato-90` | `190, 39, 48` | `#be2730` |
|
|
158
|
+
| 100 | `--mrl-tomato-100` | `157, 32, 40` | `#9d2028` |
|
|
159
|
+
| desaturated | `--mrl-tomato-desaturated` | `229, 179, 182` | `#e5b3b6` |
|
|
160
|
+
|
|
161
|
+
#### Orange
|
|
162
|
+
|
|
163
|
+
| Key | CSS variable | Value | Hex |
|
|
164
|
+
| --- | --- | --- | --- |
|
|
165
|
+
| 10 | `--mrl-orange-10` | `255, 231, 204` | `#ffe7cc` |
|
|
166
|
+
| 20 | `--mrl-orange-20` | `254, 226, 194` | `#fee2c2` |
|
|
167
|
+
| 30 | `--mrl-orange-30` | `252, 218, 192` | `#fcdac0` |
|
|
168
|
+
| 40 | `--mrl-orange-40` | `245, 199, 146` | `#f5c792` |
|
|
169
|
+
| 50 | `--mrl-orange-50` | `244, 158, 72` | `#f49e48` |
|
|
170
|
+
| 60 | `--mrl-orange-60` | `229, 121, 26` | `#e5791a` |
|
|
171
|
+
| 70 | `--mrl-orange-70` | `201, 79, 19` | `#c94f13` |
|
|
172
|
+
| 80 | `--mrl-orange-80` | `191, 76, 18` | `#bf4c12` |
|
|
173
|
+
| 90 | `--mrl-orange-90` | `178, 68, 1` | `#b24401` |
|
|
174
|
+
| 100 | `--mrl-orange-100` | `147, 57, 1` | `#933901` |
|
|
175
|
+
| desaturated | `--mrl-orange-desaturated` | `235, 186, 142` | `#ebba8e` |
|
|
176
|
+
|
|
177
|
+
#### Lemon
|
|
178
|
+
|
|
179
|
+
| Key | CSS variable | Value | Hex |
|
|
180
|
+
| --- | --- | --- | --- |
|
|
181
|
+
| 10 | `--mrl-lemon-10` | `250, 241, 193` | `#faf1c1` |
|
|
182
|
+
| 20 | `--mrl-lemon-20` | `249, 240, 190` | `#f9f0be` |
|
|
183
|
+
| 30 | `--mrl-lemon-30` | `249, 237, 174` | `#f9edae` |
|
|
184
|
+
| 40 | `--mrl-lemon-40` | `245, 226, 127` | `#f5e27f` |
|
|
185
|
+
| 50 | `--mrl-lemon-50` | `228, 203, 73` | `#e4cb49` |
|
|
186
|
+
| 60 | `--mrl-lemon-60` | `182, 158, 35` | `#b69e23` |
|
|
187
|
+
| 70 | `--mrl-lemon-70` | `142, 116, 23` | `#8e7417` |
|
|
188
|
+
| 80 | `--mrl-lemon-80` | `132, 108, 21` | `#846c15` |
|
|
189
|
+
| 90 | `--mrl-lemon-90` | `122, 99, 16` | `#7a6310` |
|
|
190
|
+
| 100 | `--mrl-lemon-100` | `104, 84, 13` | `#68540d` |
|
|
191
|
+
| desaturated | `--mrl-lemon-desaturated` | `228, 215, 149` | `#e4d795` |
|
|
192
|
+
|
|
193
|
+
#### Melon
|
|
194
|
+
|
|
195
|
+
| Key | CSS variable | Value | Hex |
|
|
196
|
+
| --- | --- | --- | --- |
|
|
197
|
+
| 10 | `--mrl-melon-10` | `227, 248, 216` | `#e3f8d8` |
|
|
198
|
+
| 20 | `--mrl-melon-20` | `214, 237, 202` | `#d6edca` |
|
|
199
|
+
| 30 | `--mrl-melon-30` | `190, 226, 171` | `#bee2ab` |
|
|
200
|
+
| 40 | `--mrl-melon-40` | `161, 214, 135` | `#a1d687` |
|
|
201
|
+
| 50 | `--mrl-melon-50` | `122, 185, 91` | `#7ab95b` |
|
|
202
|
+
| 60 | `--mrl-melon-60` | `93, 160, 59` | `#5da03b` |
|
|
203
|
+
| 70 | `--mrl-melon-70` | `75, 132, 46` | `#4b842e` |
|
|
204
|
+
| 80 | `--mrl-melon-80` | `69, 121, 42` | `#45792a` |
|
|
205
|
+
| 90 | `--mrl-melon-90` | `71, 114, 49` | `#477231` |
|
|
206
|
+
| 100 | `--mrl-melon-100` | `60, 96, 41` | `#3c6029` |
|
|
207
|
+
| desaturated | `--mrl-melon-desaturated` | `169, 208, 178` | `#a9d0b2` |
|
|
208
|
+
|
|
209
|
+
#### Mint
|
|
210
|
+
|
|
211
|
+
| Key | CSS variable | Value | Hex |
|
|
212
|
+
| --- | --- | --- | --- |
|
|
213
|
+
| 10 | `--mrl-mint-10` | `220, 242, 249` | `#dcf2f9` |
|
|
214
|
+
| 20 | `--mrl-mint-20` | `207, 234, 242` | `#cfeaf2` |
|
|
215
|
+
| 30 | `--mrl-mint-30` | `177, 217, 231` | `#b1d9e7` |
|
|
216
|
+
| 40 | `--mrl-mint-40` | `138, 199, 219` | `#8ac7db` |
|
|
217
|
+
| 50 | `--mrl-mint-50` | `89, 181, 212` | `#59b5d4` |
|
|
218
|
+
| 60 | `--mrl-mint-60` | `36, 150, 188` | `#2496bc` |
|
|
219
|
+
| 70 | `--mrl-mint-70` | `9, 126, 165` | `#097ea5` |
|
|
220
|
+
| 80 | `--mrl-mint-80` | `8, 118, 155` | `#08769b` |
|
|
221
|
+
| 90 | `--mrl-mint-90` | `1, 114, 152` | `#017298` |
|
|
222
|
+
| 100 | `--mrl-mint-100` | `1, 99, 132` | `#016384` |
|
|
223
|
+
| desaturated | `--mrl-mint-desaturated` | `162, 203, 216` | `#a2cbd8` |
|
|
224
|
+
|
|
225
|
+
#### Blueberry
|
|
226
|
+
|
|
227
|
+
| Key | CSS variable | Value | Hex |
|
|
228
|
+
| --- | --- | --- | --- |
|
|
229
|
+
| 10 | `--mrl-blueberry-10` | `215, 228, 255` | `#d7e4ff` |
|
|
230
|
+
| 20 | `--mrl-blueberry-20` | `202, 219, 252` | `#cadbfc` |
|
|
231
|
+
| 30 | `--mrl-blueberry-30` | `187, 209, 251` | `#bbd1fb` |
|
|
232
|
+
| 40 | `--mrl-blueberry-40` | `139, 175, 249` | `#8baff9` |
|
|
233
|
+
| 50 | `--mrl-blueberry-50` | `105, 146, 226` | `#6992e2` |
|
|
234
|
+
| 60 | `--mrl-blueberry-60` | `91, 131, 210` | `#5b83d2` |
|
|
235
|
+
| 70 | `--mrl-blueberry-70` | `64, 110, 203` | `#406ecb` |
|
|
236
|
+
| 80 | `--mrl-blueberry-80` | `32, 89, 202` | `#2059ca` |
|
|
237
|
+
| 90 | `--mrl-blueberry-90` | `28, 77, 175` | `#1c4daf` |
|
|
238
|
+
| 100 | `--mrl-blueberry-100` | `24, 66, 149` | `#184295` |
|
|
239
|
+
| desaturated | `--mrl-blueberry-desaturated` | `173, 199, 224` | `#adc7e0` |
|
|
240
|
+
|
|
241
|
+
#### Grape
|
|
242
|
+
|
|
243
|
+
| Key | CSS variable | Value | Hex |
|
|
244
|
+
| --- | --- | --- | --- |
|
|
245
|
+
| 10 | `--mrl-grape-10` | `222, 220, 249` | `#dedcf9` |
|
|
246
|
+
| 20 | `--mrl-grape-20` | `216, 216, 249` | `#d8d8f9` |
|
|
247
|
+
| 30 | `--mrl-grape-30` | `207, 207, 247` | `#cfcff7` |
|
|
248
|
+
| 40 | `--mrl-grape-40` | `162, 163, 240` | `#a2a3f0` |
|
|
249
|
+
| 50 | `--mrl-grape-50` | `142, 129, 228` | `#8e81e4` |
|
|
250
|
+
| 60 | `--mrl-grape-60` | `132, 108, 224` | `#846ce0` |
|
|
251
|
+
| 70 | `--mrl-grape-70` | `114, 86, 219` | `#7256db` |
|
|
252
|
+
| 80 | `--mrl-grape-80` | `94, 62, 214` | `#5e3ed6` |
|
|
253
|
+
| 90 | `--mrl-grape-90` | `74, 58, 182` | `#4a3ab6` |
|
|
254
|
+
| 100 | `--mrl-grape-100` | `63, 49, 155` | `#3f319b` |
|
|
255
|
+
| desaturated | `--mrl-grape-desaturated` | `189, 187, 221` | `#bdbbdd` |
|
|
256
|
+
|
|
257
|
+
#### Dragonfruit
|
|
258
|
+
|
|
259
|
+
| Key | CSS variable | Value | Hex |
|
|
260
|
+
| --- | --- | --- | --- |
|
|
261
|
+
| 10 | `--mrl-dragonfruit-10` | `255, 225, 243` | `#ffe1f3` |
|
|
262
|
+
| 20 | `--mrl-dragonfruit-20` | `246, 213, 243` | `#f6d5f3` |
|
|
263
|
+
| 30 | `--mrl-dragonfruit-30` | `230, 188, 226` | `#e6bce2` |
|
|
264
|
+
| 40 | `--mrl-dragonfruit-40` | `216, 151, 209` | `#d897d1` |
|
|
265
|
+
| 50 | `--mrl-dragonfruit-50` | `202, 114, 193` | `#ca72c1` |
|
|
266
|
+
| 60 | `--mrl-dragonfruit-60` | `196, 100, 186` | `#c464ba` |
|
|
267
|
+
| 70 | `--mrl-dragonfruit-70` | `186, 74, 171` | `#ba4aab` |
|
|
268
|
+
| 80 | `--mrl-dragonfruit-80` | `175, 75, 168` | `#af4ba8` |
|
|
269
|
+
| 90 | `--mrl-dragonfruit-90` | `163, 67, 157` | `#a3439d` |
|
|
270
|
+
| 100 | `--mrl-dragonfruit-100` | `141, 58, 136` | `#8d3a88` |
|
|
271
|
+
| desaturated | `--mrl-dragonfruit-desaturated` | `232, 201, 221` | `#e8c9dd` |
|
|
272
|
+
|
|
273
|
+
#### Truffle
|
|
274
|
+
|
|
275
|
+
| Key | CSS variable | Value | Hex |
|
|
276
|
+
| --- | --- | --- | --- |
|
|
277
|
+
| 10 | `--mrl-truffle-10` | `236, 239, 238` | `#ecefee` |
|
|
278
|
+
| 20 | `--mrl-truffle-20` | `219, 225, 223` | `#dbe1df` |
|
|
279
|
+
| 30 | `--mrl-truffle-30` | `197, 206, 203` | `#c5cecb` |
|
|
280
|
+
| 40 | `--mrl-truffle-40` | `170, 182, 178` | `#aab6b2` |
|
|
281
|
+
| 50 | `--mrl-truffle-50` | `131, 149, 144` | `#839590` |
|
|
282
|
+
| 60 | `--mrl-truffle-60` | `108, 127, 121` | `#6c7f79` |
|
|
283
|
+
| 70 | `--mrl-truffle-70` | `96, 113, 108` | `#60716c` |
|
|
284
|
+
| 80 | `--mrl-truffle-80` | `80, 98, 93` | `#50625d` |
|
|
285
|
+
| 90 | `--mrl-truffle-90` | `70, 83, 79` | `#46534f` |
|
|
286
|
+
| 100 | `--mrl-truffle-100` | `56, 66, 63` | `#38423f` |
|
|
287
|
+
| desaturated | `--mrl-truffle-desaturated` | `196, 202, 200` | `#c4cac8` |
|
|
288
|
+
|
|
289
|
+
#### White
|
|
290
|
+
|
|
291
|
+
| Key | CSS variable | Value | Hex |
|
|
292
|
+
| --- | --- | --- | --- |
|
|
293
|
+
| white | `--mrl-white` | `255, 255, 255` | `#ffffff` |
|
|
294
|
+
|
|
295
|
+
#### Black
|
|
296
|
+
|
|
297
|
+
| Key | CSS variable | Value | Hex |
|
|
298
|
+
| --- | --- | --- | --- |
|
|
299
|
+
| black | `--mrl-black` | `0, 0, 0` | `#000000` |
|
|
300
|
+
|
|
301
|
+
#### Status
|
|
302
|
+
|
|
303
|
+
| Key | CSS variable | Value | Hex |
|
|
304
|
+
| --- | --- | --- | --- |
|
|
305
|
+
| error | `--mrl-status-error` | `179, 33, 42` | `#b3212a` |
|
|
306
|
+
| error-light | `--mrl-status-error-light` | `252, 233, 235` | `#fce9eb` |
|
|
307
|
+
| info | `--mrl-status-info` | `49, 99, 201` | `#3163c9` |
|
|
308
|
+
| info-light | `--mrl-status-info-light` | `236, 242, 254` | `#ecf2fe` |
|
|
309
|
+
| private | `--mrl-status-private` | `27, 31, 34` | `#1b1f22` |
|
|
310
|
+
| success | `--mrl-status-success` | `0, 132, 63` | `#00843f` |
|
|
311
|
+
| success-light | `--mrl-status-success-light` | `243, 250, 235` | `#f3faeb` |
|
|
312
|
+
| warning | `--mrl-status-warning` | `255, 170, 1` | `#ffaa01` |
|
|
313
|
+
| warning-light | `--mrl-status-warning-light` | `254, 246, 231` | `#fef6e7` |
|
|
314
|
+
|
|
315
|
+
#### White opacity
|
|
316
|
+
|
|
317
|
+
| Key | CSS variable | Value | Hex |
|
|
318
|
+
| --- | --- | --- | --- |
|
|
319
|
+
| 02 | `--mrl-white-opacity-02` | `rgba(255, 255, 255, 0.24)` | `#ffffff3d` |
|
|
320
|
+
| 03 | `--mrl-white-opacity-03` | `rgba(255, 255, 255, 0.3)` | `#ffffff4d` |
|
|
321
|
+
| 04 | `--mrl-white-opacity-04` | `rgba(255, 255, 255, 0.4)` | `#ffffff66` |
|
|
322
|
+
| 06 | `--mrl-white-opacity-06` | `rgba(255, 255, 255, 0.6)` | `#ffffff99` |
|
|
323
|
+
| 08 | `--mrl-white-opacity-08` | `rgba(255, 255, 255, 0.8)` | `#ffffffcc` |
|
|
324
|
+
|
|
325
|
+
#### Black opacity
|
|
326
|
+
|
|
327
|
+
| Key | CSS variable | Value | Hex |
|
|
328
|
+
| --- | --- | --- | --- |
|
|
329
|
+
| 00 | `--mrl-black-opacity-00` | `rgba(42, 82, 121, 0.06)` | `#2a52790f` |
|
|
330
|
+
| 01 | `--mrl-black-opacity-01` | `rgba(42, 82, 121, 0.12)` | `#2a52791f` |
|
|
331
|
+
| 02 | `--mrl-black-opacity-02` | `rgba(21, 57, 75, 0.24)` | `#15394b3d` |
|
|
332
|
+
| 03 | `--mrl-black-opacity-03` | `rgba(11, 41, 70, 0.32)` | `#0b294652` |
|
|
333
|
+
| 05 | `--mrl-black-opacity-05` | `rgba(31, 51, 71, 0.56)` | `#1f33478f` |
|
|
334
|
+
| 06 | `--mrl-black-opacity-06` | `rgba(21, 41, 60, 0.64)` | `#15293ca3` |
|
|
335
|
+
| 08 | `--mrl-black-opacity-08` | `rgba(24, 36, 47, 0.8)` | `#18242fcc` |
|
|
336
|
+
|
|
337
|
+
### Contextual
|
|
338
|
+
|
|
339
|
+
| CSS variable | Value | Resolved | Description |
|
|
340
|
+
| --- | --- | --- | --- |
|
|
341
|
+
| `--mrl-color-focus` | `rgba(var(--mrl-blue-70), 1)` | --mrl-blue-70 → 48, 106, 227 (#306ae3) | Focus ring on interactive elements. |
|
|
342
|
+
| `--mrl-color-focus-inverse` | `rgba(var(--mrl-white), 1)` | --mrl-white → 255, 255, 255 (#ffffff) | Focus ring on inverse (dark) surfaces. |
|
|
343
|
+
| `--mrl-color-shadows` | `rgba(var(--mrl-black), 1)` | --mrl-black → 0, 0, 0 (#000000) | Base color for shadow tokens. |
|
|
344
|
+
| `--mrl-color-brand` | `rgba(var(--mrl-red-70), 1)` | --mrl-red-70 → 224, 41, 53 (#e02935) | Primary brand color. |
|
|
345
|
+
| `--mrl-color-brand-hover` | `rgba(var(--mrl-red-80), 1)` | --mrl-red-80 → 179, 33, 42 (#b3212a) | Brand color, hover state. |
|
|
346
|
+
| `--mrl-color-brand-active` | `rgba(var(--mrl-red-90), 1)` | --mrl-red-90 → 140, 26, 33 (#8c1a21) | Brand color, active/pressed state. |
|
|
347
|
+
| `--mrl-color-accent` | `rgba(var(--mrl-blue-70), 1)` | --mrl-blue-70 → 48, 106, 227 (#306ae3) | Accent color used for emphasis and selection. |
|
|
348
|
+
| `--mrl-color-skeleton` | `rgba(var(--mrl-gray-20), 1)` | --mrl-gray-20 → 236, 240, 244 (#ecf0f4) | Skeleton placeholder background. |
|
|
349
|
+
| `--mrl-color-skeleton-inverse` | `rgba(var(--mrl-white), 1)` | --mrl-white → 255, 255, 255 (#ffffff) | Skeleton placeholder background on inverse surfaces. |
|
|
350
|
+
| `--mrl-color-background` | `rgba(var(--mrl-white), 1)` | --mrl-white → 255, 255, 255 (#ffffff) | Default surface background. |
|
|
351
|
+
| `--mrl-color-background-secondary` | `rgba(var(--mrl-gray-10), 1)` | --mrl-gray-10 → 249, 250, 250 (#f9fafa) | Secondary surface background. |
|
|
352
|
+
| `--mrl-color-background-decorative` | `rgba(var(--mrl-blue-10), 1)` | --mrl-blue-10 → 247, 250, 255 (#f7faff) | Background for decorative, non-interactive surfaces. |
|
|
353
|
+
| `--mrl-color-background-active` | `var(--mrl-black-opacity-01)` | --mrl-black-opacity-01 → rgba(42, 82, 121, 0.12) (#2a52791f) | Background, active/pressed state. |
|
|
354
|
+
| `--mrl-color-background-selected` | `rgba(var(--mrl-gray-100), 1)` | --mrl-gray-100 → 27, 31, 34 (#1b1f22) | Background, selected state. |
|
|
355
|
+
| `--mrl-color-background-emph-hover` | `rgba(var(--mrl-gray-10), 1)` | --mrl-gray-10 → 249, 250, 250 (#f9fafa) | Emphasized background, hover state. |
|
|
356
|
+
| `--mrl-color-background-emph-active` | `rgba(var(--mrl-gray-20), 1)` | --mrl-gray-20 → 236, 240, 244 (#ecf0f4) | Emphasized background, active state. |
|
|
357
|
+
| `--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. |
|
|
358
|
+
| `--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. |
|
|
359
|
+
| `--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. |
|
|
360
|
+
| `--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. |
|
|
361
|
+
| `--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. |
|
|
362
|
+
| `--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. |
|
|
363
|
+
| `--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. |
|
|
364
|
+
| `--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. |
|
|
365
|
+
| `--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. |
|
|
366
|
+
| `--mrl-color-background-inverse` | `rgba(var(--mrl-gray-100), 1)` | --mrl-gray-100 → 27, 31, 34 (#1b1f22) | Inverse (dark) surface background. |
|
|
367
|
+
| `--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. |
|
|
368
|
+
| `--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. |
|
|
369
|
+
| `--mrl-color-line` | `rgba(var(--mrl-gray-70), 1)` | --mrl-gray-70 → 99, 112, 126 (#63707e) | Use with the Base style set. |
|
|
370
|
+
| `--mrl-color-line-hover` | `rgba(var(--mrl-gray-90), 1)` | --mrl-gray-90 → 40, 46, 52 (#282e34) | Use with the Base style set. |
|
|
371
|
+
| `--mrl-color-line-active` | `rgba(var(--mrl-gray-100), 1)` | --mrl-gray-100 → 27, 31, 34 (#1b1f22) | Use with the Base style set. |
|
|
372
|
+
| `--mrl-color-line-selected` | `rgba(var(--mrl-gray-90), 1)` | --mrl-gray-90 → 40, 46, 52 (#282e34) | Use with the Base style set. |
|
|
373
|
+
| `--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. |
|
|
374
|
+
| `--mrl-color-line-secondary` | `rgba(var(--mrl-gray-30), 1)` | --mrl-gray-30 → 220, 225, 229 (#dce1e5) | Secondary line color. |
|
|
375
|
+
| `--mrl-color-line-decorative` | `rgba(var(--mrl-blue-20), 1)` | --mrl-blue-20 → 230, 244, 254 (#e6f4fe) | Line color for decorative, non-interactive surfaces. |
|
|
376
|
+
| `--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. |
|
|
377
|
+
| `--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. |
|
|
378
|
+
| `--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. |
|
|
379
|
+
| `--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. |
|
|
380
|
+
| `--mrl-color-line-emph-active` | `rgba(var(--mrl-black), 1)` | --mrl-black → 0, 0, 0 (#000000) | Use with the Base with Emphasis style set. |
|
|
381
|
+
| `--mrl-color-line-inverse` | `rgba(var(--mrl-white), 1)` | --mrl-white → 255, 255, 255 (#ffffff) | Line color on inverse surfaces. |
|
|
382
|
+
| `--mrl-color-line-inverse-disabled` | `rgba(var(--mrl-white), 1)` | --mrl-white → 255, 255, 255 (#ffffff) | Line color for disabled controls on inverse surfaces. |
|
|
383
|
+
| `--mrl-color-icon-light` | `rgba(var(--mrl-gray-70), 1)` | --mrl-gray-70 → 99, 112, 126 (#63707e) | Light icon color. |
|
|
384
|
+
| `--mrl-color-icon-disabled` | `rgba(var(--mrl-gray-40), 1)` | --mrl-gray-40 → 184, 193, 204 (#b8c1cc) | Icon color for disabled controls. |
|
|
385
|
+
| `--mrl-color-icon-inverse` | `rgba(var(--mrl-white), 1)` | --mrl-white → 255, 255, 255 (#ffffff) | Icon color on inverse surfaces. |
|
|
386
|
+
| `--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. |
|
|
387
|
+
| `--mrl-color-input-icon-default` | `rgba(var(--mrl-gray-70), 1)` | --mrl-gray-70 → 99, 112, 126 (#63707e) | Default icon color inside form inputs. |
|
|
388
|
+
| `--mrl-color-text` | `rgba(var(--mrl-gray-80), 1)` | --mrl-gray-80 → 72, 82, 91 (#48525b) | Use for the Base style set. |
|
|
389
|
+
| `--mrl-color-text-hover` | `rgba(var(--mrl-gray-90), 1)` | --mrl-gray-90 → 40, 46, 52 (#282e34) | Use for the Base style set. |
|
|
390
|
+
| `--mrl-color-text-active` | `rgba(var(--mrl-gray-90), 1)` | --mrl-gray-90 → 40, 46, 52 (#282e34) | Use for the Base style set. |
|
|
391
|
+
| `--mrl-color-text-selected` | `rgba(var(--mrl-gray-100), 1)` | --mrl-gray-100 → 27, 31, 34 (#1b1f22) | Use for the Base style set. |
|
|
392
|
+
| `--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. |
|
|
393
|
+
| `--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. |
|
|
394
|
+
| `--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. |
|
|
395
|
+
| `--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. |
|
|
396
|
+
| `--mrl-color-text-emph-active` | `rgba(var(--mrl-black), 1)` | --mrl-black → 0, 0, 0 (#000000) | Use for the Base with Emphasis style set. |
|
|
397
|
+
| `--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. |
|
|
398
|
+
| `--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. |
|
|
399
|
+
| `--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. |
|
|
400
|
+
| `--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. |
|
|
401
|
+
| `--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. |
|
|
402
|
+
| `--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. |
|
|
403
|
+
| `--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. |
|
|
404
|
+
| `--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. |
|
|
405
|
+
| `--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. |
|
|
406
|
+
| `--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. |
|
|
407
|
+
| `--mrl-color-text-warning-light` | `rgba(var(--mrl-gray-80), 1)` | --mrl-gray-80 → 72, 82, 91 (#48525b) | Text color for light-warning messages. |
|
|
408
|
+
| `--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. |
|
|
409
|
+
| `--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. |
|
|
410
|
+
| `--mrl-color-text-private` | `rgba(var(--mrl-gray-100), 1)` | --mrl-gray-100 → 27, 31, 34 (#1b1f22) | Text color for private content. |
|
|
411
|
+
| `--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. |
|
|
412
|
+
| `--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. |
|
|
413
|
+
| `--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. |
|
|
414
|
+
| `--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. |
|
|
415
|
+
| `--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. |
|
|
416
|
+
| `--mrl-color-background-hover` | `var(--mrl-black-opacity-00)` | --mrl-black-opacity-00 → rgba(42, 82, 121, 0.06) (#2a52790f) | Hover overlay. |
|
|
417
|
+
| `--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. |
|
|
418
|
+
|
|
419
|
+
## Spacing
|
|
420
|
+
|
|
421
|
+
`--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.
|
|
422
|
+
|
|
423
|
+
### Global
|
|
424
|
+
|
|
425
|
+
| CSS variable | Value | Resolved | Description |
|
|
426
|
+
| --- | --- | --- | --- |
|
|
427
|
+
| `--mrl-spacing-01` | `calc(2 / var(--mrl-baseline) * 1rem)` | 2px / 0.125rem | Spacing token. |
|
|
428
|
+
| `--mrl-spacing-02` | `calc(4 / var(--mrl-baseline) * 1rem)` | 4px / 0.25rem | Spacing token. |
|
|
429
|
+
| `--mrl-spacing-03` | `calc(8 / var(--mrl-baseline) * 1rem)` | 8px / 0.5rem | Spacing token. |
|
|
430
|
+
| `--mrl-spacing-04` | `calc(12 / var(--mrl-baseline) * 1rem)` | 12px / 0.75rem | Spacing token. |
|
|
431
|
+
| `--mrl-spacing-05` | `calc(16 / var(--mrl-baseline) * 1rem)` | 16px / 1rem | Spacing token. |
|
|
432
|
+
| `--mrl-spacing-06` | `calc(20 / var(--mrl-baseline) * 1rem)` | 20px / 1.25rem | Spacing token. |
|
|
433
|
+
| `--mrl-spacing-07` | `calc(24 / var(--mrl-baseline) * 1rem)` | 24px / 1.5rem | Spacing token. |
|
|
434
|
+
| `--mrl-spacing-08` | `calc(32 / var(--mrl-baseline) * 1rem)` | 32px / 2rem | Spacing token. |
|
|
435
|
+
| `--mrl-spacing-09` | `calc(40 / var(--mrl-baseline) * 1rem)` | 40px / 2.5rem | Spacing token. |
|
|
436
|
+
| `--mrl-spacing-10` | `calc(48 / var(--mrl-baseline) * 1rem)` | 48px / 3rem | Spacing token. |
|
|
437
|
+
| `--mrl-spacing-11` | `calc(64 / var(--mrl-baseline) * 1rem)` | 64px / 4rem | Spacing token. |
|
|
438
|
+
| `--mrl-spacing-12` | `calc(80 / var(--mrl-baseline) * 1rem)` | 80px / 5rem | Spacing token. |
|
|
439
|
+
| `--mrl-spacing-13` | `calc(96 / var(--mrl-baseline) * 1rem)` | 96px / 6rem | Spacing token. |
|
|
440
|
+
| `--mrl-spacing-14` | `calc(160 / var(--mrl-baseline) * 1rem)` | 160px / 10rem | Spacing token. |
|
|
441
|
+
|
|
442
|
+
### Contextual
|
|
443
|
+
|
|
444
|
+
| CSS variable | Value | Resolved | Description |
|
|
445
|
+
| --- | --- | --- | --- |
|
|
446
|
+
| `--mrl-space-offset-focus` | `1px` | 1px / 0.0625rem | Focus ring offset. No global spacing token for 1px, so this is hard-coded. |
|
|
447
|
+
| `--mrl-space-stack-components` | `var(--mrl-spacing-06)` | --mrl-spacing-06 → 20px / 1.25rem | Vertical stack spacing between components. |
|
|
448
|
+
| `--mrl-space-stack-controls` | `var(--mrl-spacing-05)` | --mrl-spacing-05 → 16px / 1rem | Vertical stack spacing between controls. |
|
|
449
|
+
| `--mrl-space-stack-controls-small` | `var(--mrl-spacing-04)` | --mrl-spacing-04 → 12px / 0.75rem | Vertical stack spacing between small controls. |
|
|
450
|
+
| `--mrl-space-stack-section` | `var(--mrl-spacing-07)` | --mrl-spacing-07 → 24px / 1.5rem | Vertical stack spacing between sections. |
|
|
451
|
+
| `--mrl-space-stack-section-divider` | `var(--mrl-spacing-04)` | --mrl-spacing-04 → 12px / 0.75rem | Vertical stack spacing around section dividers. |
|
|
452
|
+
| `--mrl-space-stack-section-divider-small` | `var(--mrl-spacing-03)` | --mrl-spacing-03 → 8px / 0.5rem | Vertical stack spacing around small section dividers. |
|
|
453
|
+
| `--mrl-space-stack-section-divider-large` | `var(--mrl-spacing-06)` | --mrl-spacing-06 → 20px / 1.25rem | Vertical stack spacing around large section dividers. |
|
|
454
|
+
| `--mrl-space-stack-section-divider-xlarge` | `var(--mrl-spacing-08)` | --mrl-spacing-08 → 32px / 2rem | Vertical stack spacing around xlarge section dividers. |
|
|
455
|
+
| `--mrl-space-stack-section-divider-label` | `var(--mrl-spacing-05)` | --mrl-spacing-05 → 16px / 1rem | Vertical stack spacing around section divider labels. |
|
|
456
|
+
| `--mrl-space-stack-siblings` | `var(--mrl-spacing-04)` | --mrl-spacing-04 → 12px / 0.75rem | Vertical stack spacing between sibling elements. |
|
|
457
|
+
| `--mrl-space-stack-related` | `var(--mrl-spacing-03)` | --mrl-spacing-03 → 8px / 0.5rem | Vertical stack spacing between related elements. |
|
|
458
|
+
| `--mrl-space-stack-related-small` | `var(--mrl-spacing-02)` | --mrl-spacing-02 → 4px / 0.25rem | Vertical stack spacing between closely related elements. |
|
|
459
|
+
| `--mrl-space-stack-subheading` | `var(--mrl-spacing-05)` | --mrl-spacing-05 → 16px / 1rem | Vertical stack spacing around subheadings. |
|
|
460
|
+
| `--mrl-space-stack-title` | `var(--mrl-spacing-07)` | --mrl-spacing-07 → 24px / 1.5rem | Vertical stack spacing around titles. |
|
|
461
|
+
| `--mrl-space-stack-title-related` | `var(--mrl-spacing-05)` | --mrl-spacing-05 → 16px / 1rem | Vertical stack spacing between a title and related content. |
|
|
462
|
+
| `--mrl-space-inset` | `var(--mrl-spacing-03)` | --mrl-spacing-03 → 8px / 0.5rem | Default inset padding. |
|
|
463
|
+
| `--mrl-space-inset-container` | `var(--mrl-spacing-08)` | --mrl-spacing-08 → 32px / 2rem | Inset padding for containers. |
|
|
464
|
+
| `--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). |
|
|
465
|
+
| `--mrl-space-inset-large` | `var(--mrl-spacing-05)` | --mrl-spacing-05 → 16px / 1rem | Large inset padding. |
|
|
466
|
+
| `--mrl-space-inset-control` | `var(--mrl-spacing-06)` | --mrl-spacing-06 → 20px / 1.25rem | Inset padding for controls. |
|
|
467
|
+
| `--mrl-space-inset-control-large` | `var(--mrl-spacing-05)` | --mrl-spacing-05 → 16px / 1rem | Inset padding for large controls. |
|
|
468
|
+
| `--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. |
|
|
469
|
+
| `--mrl-space-inline-related` | `var(--mrl-spacing-03)` | --mrl-spacing-03 → 8px / 0.5rem | Horizontal spacing between related elements. |
|
|
470
|
+
| `--mrl-space-inline-sibling` | `var(--mrl-spacing-04)` | --mrl-spacing-04 → 12px / 0.75rem | Horizontal spacing between sibling elements. |
|
|
471
|
+
| `--mrl-space-inline-sibling-small` | `var(--mrl-spacing-02)` | --mrl-spacing-02 → 4px / 0.25rem | Horizontal spacing between closely placed sibling elements. |
|
|
472
|
+
| `--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. |
|
|
473
|
+
| `--mrl-space-gutter` | `var(--mrl-spacing-04)` | --mrl-spacing-04 → 12px / 0.75rem | Default grid/layout gutter. |
|
|
474
|
+
| `--mrl-space-gutter-label` | `var(--mrl-spacing-05)` | --mrl-spacing-05 → 16px / 1rem | Gutter spacing around labels. |
|
|
475
|
+
|
|
476
|
+
## Typography
|
|
477
|
+
|
|
478
|
+
### Global
|
|
479
|
+
|
|
480
|
+
#### Font family
|
|
481
|
+
|
|
482
|
+
| CSS variable | Value | Description |
|
|
483
|
+
| --- | --- | --- |
|
|
484
|
+
| `--mrl-font-family-01` | `abcsocial` | Font family token. |
|
|
485
|
+
| `--mrl-font-family-02` | `stkbureau` | Font family token. |
|
|
486
|
+
|
|
487
|
+
#### Font size
|
|
488
|
+
|
|
489
|
+
| CSS variable | Value | Resolved | Description |
|
|
490
|
+
| --- | --- | --- | --- |
|
|
491
|
+
| `--mrl-font-size-01` | `calc(11 / var(--mrl-baseline) * 1rem)` | 11px / 0.6875rem | Font size token. |
|
|
492
|
+
| `--mrl-font-size-02` | `calc(12 / var(--mrl-baseline) * 1rem)` | 12px / 0.75rem | Font size token. |
|
|
493
|
+
| `--mrl-font-size-03` | `calc(14 / var(--mrl-baseline) * 1rem)` | 14px / 0.875rem | Font size token. |
|
|
494
|
+
| `--mrl-font-size-04` | `calc(16 / var(--mrl-baseline) * 1rem)` | 16px / 1rem | Font size token. |
|
|
495
|
+
| `--mrl-font-size-05` | `calc(18 / var(--mrl-baseline) * 1rem)` | 18px / 1.125rem | Font size token. |
|
|
496
|
+
| `--mrl-font-size-06` | `calc(20 / var(--mrl-baseline) * 1rem)` | 20px / 1.25rem | Font size token. |
|
|
497
|
+
| `--mrl-font-size-07` | `calc(24 / var(--mrl-baseline) * 1rem)` | 24px / 1.5rem | Font size token. |
|
|
498
|
+
| `--mrl-font-size-08` | `calc(32 / var(--mrl-baseline) * 1rem)` | 32px / 2rem | Font size token. |
|
|
499
|
+
| `--mrl-font-size-09` | `calc(40 / var(--mrl-baseline) * 1rem)` | 40px / 2.5rem | Font size token. |
|
|
500
|
+
| `--mrl-font-size-10` | `calc(48 / var(--mrl-baseline) * 1rem)` | 48px / 3rem | Font size token. |
|
|
501
|
+
| `--mrl-font-size-11` | `calc(64 / var(--mrl-baseline) * 1rem)` | 64px / 4rem | Font size token. |
|
|
502
|
+
| `--mrl-font-size-12` | `calc(80 / var(--mrl-baseline) * 1rem)` | 80px / 5rem | Font size token. |
|
|
503
|
+
| `--mrl-font-size-13` | `calc(96 / var(--mrl-baseline) * 1rem)` | 96px / 6rem | Font size token. |
|
|
504
|
+
| `--mrl-font-size-14` | `calc(120 / var(--mrl-baseline) * 1rem)` | 120px / 7.5rem | Font size token. |
|
|
505
|
+
|
|
506
|
+
#### Line height
|
|
507
|
+
|
|
508
|
+
| CSS variable | Value | Description |
|
|
509
|
+
| --- | --- | --- |
|
|
510
|
+
| `--mrl-line-height-01` | `0.875` | Line height token. |
|
|
511
|
+
| `--mrl-line-height-02` | `1` | Line height token. |
|
|
512
|
+
| `--mrl-line-height-03` | `1.125` | Line height token. |
|
|
513
|
+
| `--mrl-line-height-04` | `1.167` | Line height token. |
|
|
514
|
+
| `--mrl-line-height-05` | `1.25` | Line height token. |
|
|
515
|
+
| `--mrl-line-height-06` | `1.333` | Line height token. |
|
|
516
|
+
| `--mrl-line-height-07` | `1.4` | Line height token. |
|
|
517
|
+
| `--mrl-line-height-08` | `1.429` | Line height token. |
|
|
518
|
+
| `--mrl-line-height-09` | `1.5` | Line height token. |
|
|
519
|
+
| `--mrl-line-height-10` | `1.56` | Line height token. |
|
|
520
|
+
| `--mrl-line-height-11` | `1.75` | Line height token. |
|
|
521
|
+
| `--mrl-line-height-12` | `2` | Line height token. |
|
|
522
|
+
|
|
523
|
+
#### Letter spacing
|
|
524
|
+
|
|
525
|
+
| CSS variable | Value | Description |
|
|
526
|
+
| --- | --- | --- |
|
|
527
|
+
| `--mrl-letter-spacing-01` | `-2%` | Letter spacing token. |
|
|
528
|
+
| `--mrl-letter-spacing-02` | `-1%` | Letter spacing token. |
|
|
529
|
+
| `--mrl-letter-spacing-03` | `0%` | Letter spacing token. |
|
|
530
|
+
| `--mrl-letter-spacing-04` | `1%` | Letter spacing token. |
|
|
531
|
+
| `--mrl-letter-spacing-05` | `2%` | Letter spacing token. |
|
|
532
|
+
|
|
533
|
+
#### Font weight
|
|
534
|
+
|
|
535
|
+
| CSS variable | Value | Description |
|
|
536
|
+
| --- | --- | --- |
|
|
537
|
+
| `--mrl-font-weight-01` | `400` | Regular. Font weight token. |
|
|
538
|
+
| `--mrl-font-weight-02` | `500` | Medium. Font weight token. |
|
|
539
|
+
| `--mrl-font-weight-03` | `600` | Semi-bold. Font weight token. |
|
|
540
|
+
| `--mrl-font-weight-04` | `700` | Bold. Font weight token. |
|
|
541
|
+
| `--mrl-font-weight-05` | `800` | Extra-bold. Font weight token. |
|
|
542
|
+
|
|
543
|
+
### Contextual
|
|
544
|
+
|
|
545
|
+
#### Body font
|
|
546
|
+
|
|
547
|
+
| CSS variable | Value | Resolved | Description |
|
|
548
|
+
| --- | --- | --- | --- |
|
|
549
|
+
| `--mrl-body-font` | `var(--mrl-font-family-01), sans-serif` | --mrl-font-family-01 → abcsocial | Used for all body copy. |
|
|
550
|
+
|
|
551
|
+
#### Heading
|
|
552
|
+
|
|
553
|
+
| CSS variable | Value | Resolved | Description |
|
|
554
|
+
| --- | --- | --- | --- |
|
|
555
|
+
| `--mrl-heading-font` | `var(--mrl-font-family-01), sans-serif` | --mrl-font-family-01 → abcsocial | Used for most headings. |
|
|
556
|
+
| `--mrl-heading-font-alt` | `var(--mrl-font-family-02), serif` | --mrl-font-family-02 → stkbureau | Used for headings with kind="display". |
|
|
557
|
+
|
|
558
|
+
#### Type size
|
|
559
|
+
|
|
560
|
+
| CSS variable | Value | Resolved | Description |
|
|
561
|
+
| --- | --- | --- | --- |
|
|
562
|
+
| `--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. |
|
|
563
|
+
| `--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. |
|
|
564
|
+
| `--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. |
|
|
565
|
+
| `--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. |
|
|
566
|
+
| `--mrl-type-size-headline` | `var(--mrl-font-size-06)` | --mrl-font-size-06 → 20px / 1.25rem | Contextual typography token. |
|
|
567
|
+
| `--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. |
|
|
568
|
+
| `--mrl-type-size-headline-small` | `var(--mrl-font-size-04)` | --mrl-font-size-04 → 16px / 1rem | Contextual typography token. |
|
|
569
|
+
| `--mrl-type-size-text` | `var(--mrl-font-size-04)` | --mrl-font-size-04 → 16px / 1rem | Contextual typography token. |
|
|
570
|
+
| `--mrl-type-size-text-large` | `var(--mrl-font-size-05)` | --mrl-font-size-05 → 18px / 1.125rem | Contextual typography token. |
|
|
571
|
+
| `--mrl-type-size-text-small` | `var(--mrl-font-size-03)` | --mrl-font-size-03 → 14px / 0.875rem | Contextual typography token. |
|
|
572
|
+
| `--mrl-type-size-text-xsmall` | `var(--mrl-font-size-02)` | --mrl-font-size-02 → 12px / 0.75rem | Contextual typography token. |
|
|
573
|
+
| `--mrl-type-size-text-xxsmall` | `var(--mrl-font-size-01)` | --mrl-font-size-01 → 11px / 0.6875rem | Contextual typography token. |
|
|
574
|
+
| `--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. |
|
|
575
|
+
|
|
576
|
+
#### Type line height
|
|
577
|
+
|
|
578
|
+
| CSS variable | Value | Resolved | Description |
|
|
579
|
+
| --- | --- | --- | --- |
|
|
580
|
+
| `--mrl-type-line-height-display` | `var(--mrl-line-height-02)` | --mrl-line-height-02 → 1 | Contextual typography token. |
|
|
581
|
+
| `--mrl-type-line-height-display-large` | `var(--mrl-line-height-02)` | --mrl-line-height-02 → 1 | Contextual typography token. |
|
|
582
|
+
| `--mrl-type-line-height-display-small` | `var(--mrl-line-height-02)` | --mrl-line-height-02 → 1 | Contextual typography token. |
|
|
583
|
+
| `--mrl-type-line-height-display-xsmall` | `var(--mrl-line-height-02)` | --mrl-line-height-02 → 1 | Contextual typography token. |
|
|
584
|
+
| `--mrl-type-line-height-headline` | `var(--mrl-line-height-07)` | --mrl-line-height-07 → 1.4 | Contextual typography token. |
|
|
585
|
+
| `--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. |
|
|
586
|
+
| `--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. |
|
|
587
|
+
| `--mrl-type-line-height-interactive` | `var(--mrl-line-height-09)` | --mrl-line-height-09 → 1.5 | Contextual typography token. |
|
|
588
|
+
| `--mrl-type-line-height-interactive-large` | `var(--mrl-line-height-10)` | --mrl-line-height-10 → 1.56 | Contextual typography token. |
|
|
589
|
+
| `--mrl-type-line-height-interactive-small` | `var(--mrl-line-height-08)` | --mrl-line-height-08 → 1.429 | Contextual typography token. |
|
|
590
|
+
| `--mrl-type-line-height-interactive-xsmall` | `var(--mrl-line-height-06)` | --mrl-line-height-06 → 1.333 | Contextual typography token. |
|
|
591
|
+
| `--mrl-type-line-height-text` | `var(--mrl-line-height-09)` | --mrl-line-height-09 → 1.5 | Contextual typography token. |
|
|
592
|
+
| `--mrl-type-line-height-text-large` | `var(--mrl-line-height-10)` | --mrl-line-height-10 → 1.56 | Contextual typography token. |
|
|
593
|
+
| `--mrl-type-line-height-text-small` | `var(--mrl-line-height-08)` | --mrl-line-height-08 → 1.429 | Contextual typography token. |
|
|
594
|
+
| `--mrl-type-line-height-text-xsmall` | `var(--mrl-line-height-06)` | --mrl-line-height-06 → 1.333 | Contextual typography token. |
|
|
595
|
+
| `--mrl-type-line-height-text-xxsmall` | `var(--mrl-line-height-08)` | --mrl-line-height-08 → 1.429 | Contextual typography token. |
|
|
596
|
+
| `--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. |
|
|
597
|
+
| `--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. |
|
|
598
|
+
| `--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. |
|
|
599
|
+
| `--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. |
|
|
600
|
+
| `--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. |
|
|
601
|
+
|
|
602
|
+
#### Type weight
|
|
603
|
+
|
|
604
|
+
| CSS variable | Value | Resolved | Description |
|
|
605
|
+
| --- | --- | --- | --- |
|
|
606
|
+
| `--mrl-type-weight-display` | `var(--mrl-font-weight-01)` | --mrl-font-weight-01 → 400 | Contextual typography token. |
|
|
607
|
+
| `--mrl-type-weight-headline` | `var(--mrl-font-weight-04)` | --mrl-font-weight-04 → 700 | Contextual typography token. |
|
|
608
|
+
| `--mrl-type-weight-interactive` | `var(--mrl-font-weight-04)` | --mrl-font-weight-04 → 700 | Contextual typography token. |
|
|
609
|
+
| `--mrl-type-weight-text` | `var(--mrl-font-weight-01)` | --mrl-font-weight-01 → 400 | Contextual typography token. |
|
|
610
|
+
| `--mrl-type-weight-text-bold` | `var(--mrl-font-weight-04)` | --mrl-font-weight-04 → 700 | Contextual typography token. |
|
|
611
|
+
| `--mrl-type-weight-text-secondary` | `var(--mrl-font-weight-01)` | --mrl-font-weight-01 → 400 | Contextual typography token. |
|
|
612
|
+
| `--mrl-type-weight-title` | `var(--mrl-font-weight-04)` | --mrl-font-weight-04 → 700 | Contextual typography token. |
|
|
613
|
+
| `--mrl-type-weight-title-secondary` | `var(--mrl-font-weight-02)` | --mrl-font-weight-02 → 500 | Contextual typography token. |
|
|
614
|
+
| `--mrl-type-weight-toggleable-label` | `var(--mrl-font-weight-03)` | --mrl-font-weight-03 → 600 | Toggleable label mixin variable. |
|
|
615
|
+
|
|
616
|
+
#### Type spacing
|
|
617
|
+
|
|
618
|
+
| CSS variable | Value | Resolved | Description |
|
|
619
|
+
| --- | --- | --- | --- |
|
|
620
|
+
| `--mrl-type-spacing-display` | `var(--mrl-letter-spacing-03)` | --mrl-letter-spacing-03 → 0% | Contextual typography token. |
|
|
621
|
+
| `--mrl-type-spacing-display-large` | `var(--mrl-letter-spacing-02)` | --mrl-letter-spacing-02 → -1% | Contextual typography token. |
|
|
622
|
+
| `--mrl-type-spacing-display-small` | `var(--mrl-letter-spacing-02)` | --mrl-letter-spacing-02 → -1% | Contextual typography token. |
|
|
623
|
+
| `--mrl-type-spacing-display-xsmall` | `var(--mrl-letter-spacing-02)` | --mrl-letter-spacing-02 → -1% | Contextual typography token. |
|
|
624
|
+
| `--mrl-type-spacing-headline` | `var(--mrl-letter-spacing-03)` | --mrl-letter-spacing-03 → 0% | Contextual typography token. |
|
|
625
|
+
| `--mrl-type-spacing-headline-large` | `var(--mrl-letter-spacing-03)` | --mrl-letter-spacing-03 → 0% | Contextual typography token. |
|
|
626
|
+
| `--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. |
|
|
627
|
+
| `--mrl-type-spacing-interactive-xsmall` | `var(--mrl-letter-spacing-04)` | --mrl-letter-spacing-04 → 1% | Contextual typography token. |
|
|
628
|
+
| `--mrl-type-spacing-text` | `var(--mrl-letter-spacing-03)` | --mrl-letter-spacing-03 → 0% | Contextual typography token. |
|
|
629
|
+
|
|
630
|
+
## Border
|
|
631
|
+
|
|
632
|
+
### Global
|
|
633
|
+
|
|
634
|
+
#### Radii
|
|
635
|
+
|
|
636
|
+
| CSS variable | Value | Resolved | Description |
|
|
637
|
+
| --- | --- | --- | --- |
|
|
638
|
+
| `--mrl-radii-01` | `2px` | 2px | Border radius token. |
|
|
639
|
+
| `--mrl-radii-02` | `4px` | 4px | Border radius token. |
|
|
640
|
+
| `--mrl-radii-03` | `8px` | 8px | Border radius token. |
|
|
641
|
+
| `--mrl-radii-04` | `12px` | 12px | Border radius token. |
|
|
642
|
+
| `--mrl-radii-05` | `16px` | 16px | Border radius token. |
|
|
643
|
+
| `--mrl-radii-06` | `24px` | 24px | Border radius token. |
|
|
644
|
+
| `--mrl-radii-07` | `32px` | 32px | Border radius token. |
|
|
645
|
+
| `--mrl-radii-08` | `40px` | 40px | Border radius token. |
|
|
646
|
+
|
|
647
|
+
#### Stroke
|
|
648
|
+
|
|
649
|
+
| CSS variable | Value | Resolved | Description |
|
|
650
|
+
| --- | --- | --- | --- |
|
|
651
|
+
| `--mrl-stroke-01` | `2px` | 2px | Border width token. |
|
|
652
|
+
| `--mrl-stroke-02` | `2px` | 2px | Border width token. |
|
|
653
|
+
| `--mrl-stroke-03` | `2px` | 2px | Border width token. |
|
|
654
|
+
|
|
655
|
+
### Contextual
|
|
656
|
+
|
|
657
|
+
#### Line width
|
|
658
|
+
|
|
659
|
+
| CSS variable | Value | Resolved | Description |
|
|
660
|
+
| --- | --- | --- | --- |
|
|
661
|
+
| `--mrl-line-width-border` | `var(--mrl-stroke-01)` | --mrl-stroke-01 → 2px | Default border width. |
|
|
662
|
+
| `--mrl-line-width-border-fine` | `1px` | 1px | Fine border width. No global stroke token for 1px, so this is hard-coded. |
|
|
663
|
+
| `--mrl-line-width-border-selected` | `var(--mrl-stroke-01)` | --mrl-stroke-01 → 2px | Border width for selected state. |
|
|
664
|
+
| `--mrl-line-width-control` | `var(--mrl-stroke-01)` | --mrl-stroke-01 → 2px | Border width for controls. |
|
|
665
|
+
| `--mrl-line-width-divider` | `var(--mrl-stroke-01)` | --mrl-stroke-01 → 2px | Width for divider lines. |
|
|
666
|
+
| `--mrl-line-width-focus` | `var(--mrl-stroke-01)` | --mrl-stroke-01 → 2px | Focus ring width. |
|
|
667
|
+
|
|
668
|
+
#### Border radius
|
|
669
|
+
|
|
670
|
+
| CSS variable | Value | Resolved | Description |
|
|
671
|
+
| --- | --- | --- | --- |
|
|
672
|
+
| `--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. |
|
|
673
|
+
| `--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). |
|
|
674
|
+
| `--mrl-border-radius-content` | `var(--mrl-radii-02)` | --mrl-radii-02 → 4px | For elements that are static content. |
|
|
675
|
+
| `--mrl-border-radius-content-large` | `var(--mrl-radii-03)` | --mrl-radii-03 → 8px | Large content corner radius. |
|
|
676
|
+
| `--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. |
|
|
677
|
+
| `--mrl-border-radius-functional-large` | `var(--mrl-radii-04)` | --mrl-radii-04 → 12px | Large corner radius for functional elements. |
|
|
678
|
+
| `--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. |
|
|
679
|
+
| `--mrl-border-radius-rounded-large` | `var(--mrl-radii-08)` | --mrl-radii-08 → 40px | Large rounded corner radius. |
|
|
680
|
+
| `--mrl-border-radius-tight` | `var(--mrl-radii-01)` | --mrl-radii-01 → 2px | When the content has tight spacing considerations. |
|
|
681
|
+
|
|
682
|
+
#### Border shorthands
|
|
683
|
+
|
|
684
|
+
| CSS variable | Value | Description |
|
|
685
|
+
| --- | --- | --- |
|
|
686
|
+
| `--mrl-border` | `var(--mrl-line-width-border) solid var(--mrl-color-line)` | Default border shorthand. |
|
|
687
|
+
| `--mrl-border-hover` | `var(--mrl-line-width-border) solid var(--mrl-color-line-hover)` | Border shorthand, hover state. |
|
|
688
|
+
| `--mrl-border-active` | `var(--mrl-line-width-border) solid var(--mrl-color-line-active)` | Border shorthand, active state. |
|
|
689
|
+
| `--mrl-border-selected` | `var(--mrl-line-width-border-selected) solid var(--mrl-color-line-selected)` | Border shorthand, selected state. |
|
|
690
|
+
| `--mrl-border-disabled` | `var(--mrl-line-width-border) solid var(--mrl-color-line-disabled)` | Border shorthand, disabled state. |
|
|
691
|
+
| `--mrl-border-emph` | `var(--mrl-line-width-border) solid var(--mrl-color-line-emph)` | Emphasized border shorthand. |
|
|
692
|
+
| `--mrl-border-emph-hover` | `var(--mrl-line-width-border) solid var(--mrl-color-line-emph-hover)` | Emphasized border shorthand, hover state. |
|
|
693
|
+
| `--mrl-border-emph-active` | `var(--mrl-line-width-border) solid var(--mrl-color-line-emph-active)` | Emphasized border shorthand, active state. |
|
|
694
|
+
| `--mrl-border-emph-selected` | `var(--mrl-line-width-border-selected) solid var(--mrl-color-line-emph-selected)` | Emphasized border shorthand, selected state. |
|
|
695
|
+
| `--mrl-border-inverse` | `var(--mrl-line-width-border) solid var(--mrl-color-line-inverse)` | Border shorthand on inverse surfaces. |
|
|
696
|
+
| `--mrl-border-inverse-hover` | `var(--mrl-line-width-border) solid var(--mrl-color-line-inverse)` | Inverse border shorthand, hover state. |
|
|
697
|
+
| `--mrl-border-inverse-active` | `var(--mrl-line-width-border) solid var(--mrl-color-line-inverse)` | Inverse border shorthand, active state. |
|
|
698
|
+
| `--mrl-border-inverse-selected` | `var(--mrl-line-width-border-selected) solid var(--mrl-color-line-inverse)` | Inverse border shorthand, selected state. |
|
|
699
|
+
| `--mrl-border-inverse-disabled` | `var(--mrl-line-width-border) solid var(--mrl-color-line-inverse-disabled)` | Inverse border shorthand, disabled state. |
|
|
700
|
+
| `--mrl-border-focus` | `var(--mrl-line-width-focus) solid var(--mrl-color-focus)` | Focus ring border shorthand. |
|
|
701
|
+
| `--mrl-border-divider` | `var(--mrl-line-width-divider) solid var(--mrl-color-line-divider)` | Divider line border shorthand. |
|
|
702
|
+
|
|
703
|
+
## Shadows
|
|
704
|
+
|
|
705
|
+
### Global
|
|
706
|
+
|
|
707
|
+
| CSS variable | Value | Description |
|
|
708
|
+
| --- | --- | --- |
|
|
709
|
+
| `--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. |
|
|
710
|
+
| `--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. |
|
|
711
|
+
| `--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. |
|
|
712
|
+
| `--mrl-shadow-interactive-01` | `0 4px 5px 0 rgba(24, 36, 47, 0.08)` | Shadow token. |
|
|
713
|
+
| `--mrl-shadow-interactive-02` | `0 12px 20px 0px rgba(27, 57, 75, 0.2)` | Shadow token. |
|
|
714
|
+
|
|
715
|
+
### Contextual
|
|
716
|
+
|
|
717
|
+
| CSS variable | Value | Resolved | Description |
|
|
718
|
+
| --- | --- | --- | --- |
|
|
719
|
+
| `--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. |
|
|
720
|
+
| `--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. |
|
|
721
|
+
| `--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. |
|
|
722
|
+
| `--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. |
|
|
723
|
+
| `--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. |
|
|
724
|
+
|
|
725
|
+
## Motion
|
|
726
|
+
|
|
727
|
+
### Global
|
|
728
|
+
|
|
729
|
+
#### Timing
|
|
730
|
+
|
|
731
|
+
| CSS variable | Value | Description |
|
|
732
|
+
| --- | --- | --- |
|
|
733
|
+
| `--mrl-timing-m1` | `cubic-bezier(0.17, 0, 0, 1)` | Motion timing token. |
|
|
734
|
+
| `--mrl-timing-m1r` | `cubic-bezier(1, 0, 0.83, 1)` | Motion timing token. |
|
|
735
|
+
| `--mrl-timing-m2` | `cubic-bezier(0, 0.5, 0, 1)` | Motion timing token. |
|
|
736
|
+
| `--mrl-timing-m3` | `cubic-bezier(0.33, 0, 0.67, 1)` | Motion timing token. |
|
|
737
|
+
| `--mrl-timing-m4` | `cubic-bezier(0, 0, 0, 1)` | Motion timing token. |
|
|
738
|
+
|
|
739
|
+
#### Duration
|
|
740
|
+
|
|
741
|
+
| CSS variable | Value | Description |
|
|
742
|
+
| --- | --- | --- |
|
|
743
|
+
| `--mrl-duration-01` | `17ms` | Motion duration token. |
|
|
744
|
+
| `--mrl-duration-02` | `167ms` | Motion duration token. |
|
|
745
|
+
| `--mrl-duration-03` | `333ms` | Motion duration token. |
|
|
746
|
+
| `--mrl-duration-04` | `667ms` | Motion duration token. |
|
|
747
|
+
|
|
748
|
+
#### Distance
|
|
749
|
+
|
|
750
|
+
| CSS variable | Value | Resolved | Description |
|
|
751
|
+
| --- | --- | --- | --- |
|
|
752
|
+
| `--mrl-distance-01` | `4px` | 4px | Motion distance token. |
|
|
753
|
+
| `--mrl-distance-02` | `8px` | 8px | Motion distance token. |
|
package/dist/foundation.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../src/styles/_tokens.scss","../src/styles/contextual-variables/spacing.scss","../src/styles/contextual-variables/typography.scss","../src/styles/focus.scss","../src/styles/baseline.scss","../src/styles/spacing.scss","../src/styles/_mixins.scss","../src/styles/typography.scss","../src/styles/skeletons/button.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAIA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAAA,0EACwE;EAExE;AAAA,0EACwE;EAExE;AAAA,4EAC0E;EAE1E;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAAA;AAAA;AAAA;AAAA,KAIG;EAEH;EACA;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAAA;AAAA,KAEG;EAEH;EACA;EACA;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;EACA;EACA;AAAA;AAAA;AAAA,KAGG;EAEH;EACA;EACA;EACA;EACA;AAAA;AAAA;AAAA,KAGG;EAEH;EACA;AAAA;AAAA;AAAA,KAGG;EAEH;EACA;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA,KAEG;EAEH;EACA;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;EACA;EACA;EACA;EACA;AAAA;AAAA;AAAA,KAGG;EAEH;EACA;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;EACA;AAAA;AAAA;AAAA,KAGG;EAEH;EACA;EACA;EACA;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;EACA;EACA;EACA;EACA;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;EACA;EACA;AAAA;AAAA,KAEG;EAEH;EACA;EACA;EACA;EACA;EACA;AAAA;AAAA,KAEG;EAEH;EACA;AAAA;AAAA,KAEG;EAEH;EACA;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;EACA;AAAA;AAAA,KAEG;EAEH;EACA;EACA;AAAA;AAAA,KAEG;EAEH;EACA;EACA;EACA;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;EACA;EACA;EACA;EACA;AAAA,qCACmC;EAEnC;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;EACA;AAAA;AAAA,KAEG;EAEH;EACA;EACA;EACA;EACA;EACA;EACA;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;EACA;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;EACA;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;EACA;EACA;EACA;EACA;AAAA;AAAA,KAEG;EAEH;EACA;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAAA;AAAA,KAEG;EAEH;EACA;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;EACA;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;EACA;AAAA;AAAA,KAEG;EAEH;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAAA,wCACsC;EAEtC;EACA;EACA;EACA;AAAA,kCACgC;EAEhC;AAAA,2CACyC;EAEzC;EACA;EACA;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;;;AC7xBH;EADD;IAEE;;;;ACCF;EACC;IAEC;IACA;IACA;IACA;IACA;IACA;IACA;IAGA;IACA;IACA;IAGA;;;AC5BF;AAEA;EACC;;;ACED;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAuEC;EACA;EACA;EACA;;;AAGD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAQC;EACA;EACA;EACA;EACA;;;AAGD;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAWC;;;AAGD;AAAA;EAEC;;;AAGD;AAAA;EAEC;;;AAGD;AAAA;AAAA;AAAA;EAIC;;;AAGD;EACC;EACA;;;AAKD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;AAAA;AAAA;EAGC;;;ACtJD;
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../src/styles/_tokens.scss","../src/styles/contextual-variables/spacing.scss","../src/styles/contextual-variables/typography.scss","../src/styles/focus.scss","../src/styles/baseline.scss","../src/styles/spacing.scss","../src/styles/_mixins.scss","../src/styles/typography.scss","../src/styles/skeletons/button.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAIA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAAA,0EACwE;EAExE;AAAA,0EACwE;EAExE;AAAA,4EAC0E;EAE1E;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAAA;AAAA;AAAA;AAAA,KAIG;EAEH;EACA;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAAA;AAAA,KAEG;EAEH;EACA;EACA;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;EACA;EACA;AAAA;AAAA;AAAA,KAGG;EAEH;EACA;EACA;EACA;EACA;AAAA;AAAA;AAAA,KAGG;EAEH;EACA;AAAA;AAAA;AAAA,KAGG;EAEH;EACA;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA,KAEG;EAEH;EACA;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;EACA;EACA;EACA;EACA;AAAA;AAAA;AAAA,KAGG;EAEH;EACA;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;EACA;AAAA;AAAA;AAAA,KAGG;EAEH;EACA;EACA;EACA;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;EACA;EACA;EACA;EACA;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;EACA;EACA;AAAA;AAAA,KAEG;EAEH;EACA;EACA;EACA;EACA;EACA;AAAA;AAAA,KAEG;EAEH;EACA;AAAA;AAAA,KAEG;EAEH;EACA;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;EACA;AAAA;AAAA,KAEG;EAEH;EACA;EACA;AAAA;AAAA,KAEG;EAEH;EACA;EACA;EACA;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;EACA;EACA;EACA;EACA;AAAA,qCACmC;EAEnC;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;EACA;AAAA;AAAA,KAEG;EAEH;EACA;EACA;EACA;EACA;EACA;EACA;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;EACA;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;EACA;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;EACA;EACA;EACA;EACA;AAAA;AAAA,KAEG;EAEH;EACA;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAAA;AAAA,KAEG;EAEH;EACA;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;EACA;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;EACA;AAAA;AAAA,KAEG;EAEH;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAAA,wCACsC;EAEtC;EACA;EACA;EACA;AAAA,kCACgC;EAEhC;AAAA,2CACyC;EAEzC;EACA;EACA;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;;;AC7xBH;EADD;IAEE;;;;ACCF;EACC;IAEC;IACA;IACA;IACA;IACA;IACA;IACA;IAGA;IACA;IACA;IAGA;;;AC5BF;AAEA;EACC;;;ACED;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAuEC;EACA;EACA;EACA;;;AAGD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAQC;EACA;EACA;EACA;EACA;;;AAGD;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAWC;;;AAGD;AAAA;EAEC;;;AAGD;AAAA;EAEC;;;AAGD;AAAA;AAAA;AAAA;EAIC;;;AAGD;EACC;EACA;;;AAKD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;AAAA;AAAA;EAGC;;;ACtJD;EC+GC,SANmB;;;ADrGpB;EC2GC,SAHoB;;;ADpGrB;ECmFC;EACA,SAPmB;;AASnB;EACC;;;ADnFF;EC+EC;EACA,SAJoB;;AAMpB;EACC;;;AC7FD;EDgCA;EACA;EACA;EACA;EACA;;;ACpCA;EDgCA;EACA;EACA;EACA;EACA;;;ACpCA;EDgCA;EACA;EACA;EACA;EACA;;;ACpCA;EDgCA;EACA;EACA;EACA;EACA;;;AC/BD;EDoEC;EACA;;;AElBD;EACC;EACA;;;AAYA;AAAA;AAAA;EAzCA,YA7B4B;EAgC3B,WAhC2B;EA4C5B;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AA4BA;AAAA;AAAA;AAAA;AAAA;AAAA;EAMC;;;AAMF;AAAA;EA9DC,YA5B0B;;;AA+F3B;EAnEC,YA5B0B;EA+BzB,WA/ByB;;;AAmG3B;AAAA;EAvEC,YAxB0B;;;AAoG3B;EA5EC,YAxB0B;EA2BzB,WA3ByB;;;AAyG3B;AAAA;EAjFC,YAvB2B;EA0B1B,WA1B0B","file":"foundation.css"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../src/styles/_tokens.scss","../src/styles/contextual-variables/spacing.scss","../src/styles/contextual-variables/typography.scss","../src/styles/focus.scss","../src/styles/baseline.scss","../src/styles/spacing.scss","../src/styles/_mixins.scss","../src/styles/typography.scss","../src/styles/skeletons/button.scss"],"names":[],"mappings":"AAIA,MACC,oBACA,oBACA,oBACA,qBACA,qBACA,qBACA,qBACA,qBACA,qBACA,qBACA,qBACA,6BACA,6BACA,6BACA,6BACA,6BACA,6BACA,4BACA,0BACA,0BACA,2BACA,6BACA,6BACA,6BACA,6BACA,6BACA,4BACA,4BACA,2BACA,2BACA,4BACA,4BACA,4BACA,4BACA,4BACA,4BACA,0BACA,0BACA,0BACA,0BACA,2BACA,+BACA,+BACA,+BACA,+BACA,8BACA,6BACA,6BACA,6BACA,6BACA,8BACA,wCACA,+BACA,+BACA,+BACA,+BACA,8BACA,8BACA,6BACA,6BACA,4BACA,6BACA,wCACA,8BACA,8BACA,8BACA,8BACA,6BACA,6BACA,6BACA,6BACA,4BACA,6BACA,uCACA,8BACA,8BACA,8BACA,8BACA,6BACA,4BACA,4BACA,4BACA,4BACA,4BACA,uCACA,6BACA,6BACA,6BACA,6BACA,4BACA,4BACA,2BACA,2BACA,2BACA,2BACA,sCACA,kCACA,kCACA,kCACA,kCACA,kCACA,iCACA,iCACA,gCACA,gCACA,iCACA,2CACA,8BACA,8BACA,8BACA,8BACA,8BACA,8BACA,6BACA,4BACA,4BACA,6BACA,uCACA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,mCACA,mCACA,mCACA,oCACA,6CACA,gCACA,gCACA,gCACA,gCACA,gCACA,gCACA,+BACA,6BACA,6BACA,8BACA,yCACA,2BACA,qBACA,+BACA,uCACA,iCACA,0CACA,kCACA,0CACA,gCACA,wCACA,gDACA,gDACA,+CACA,+CACA,+CACA,+CACA,8CACA,6CACA,8CACA,4CACA,gDACA,0CACA,wBACA,yBACA,yBACA,yBACA,uBACA,uBACA,uFAGA,uFAGA,yFAGA,gEACA,mEACA,uDACA,uDACA,uDACA,wDACA,wDACA,wDACA,wDACA,wDACA,wDACA,wDACA,wDACA,wDACA,wDACA,yDACA,mBACA,gCACA,gCACA,0DACA,0DACA,0DACA,0DACA,0DACA,0DACA,0DACA,0DACA,0DACA,0DACA,0DACA,0DACA,0DACA,2DACA,4BACA,wBACA,4BACA,4BACA,2BACA,4BACA,0BACA,4BACA,0BACA,2BACA,2BACA,wBACA,6BACA,6BACA,4BACA,4BACA,4BACA,0BACA,0BACA,0BACA,0BACA,0BACA,kCACA,kDAMA,8BACA,yEAIA,0EAIA,0CACA,qDACA,oDACA,oDACA,oDACA,oDACA,8CACA,uDACA,6CACA,+CACA,+CACA,iDAIA,iDACA,uDACA,sDAIA,4DAIA,qDAIA,2DAIA,mDAIA,uDACA,+CACA,uDAKA,+CACA,8CACA,oDACA,qDACA,kDAKA,kDACA,0DAKA,kDACA,gEAKA,iEAKA,6DAIA,8DACA,iEAKA,kEAKA,+DAKA,2EAKA,qEAKA,iFAKA,qEAKA,iFAKA,iEAKA,6EAKA,+DAKA,+DAKA,oEAKA,+DAKA,8CACA,oDACA,sDACA,uDACA,yDAKA,wDACA,2DAKA,wDAKA,gEAKA,qDAKA,2DAKA,0DAKA,oDACA,+DAKA,oDACA,uDACA,oDACA,+DAKA,8DAKA,8CACA,oDACA,qDACA,wDACA,yDAKA,+DAKA,qDAKA,2DAKA,0DAKA,sDAKA,kEAKA,4DAKA,6DAKA,+DAKA,0DAKA,uDAKA,yDAKA,+DAKA,wDAKA,8DAKA,2DAKA,yDAKA,uDACA,0DACA,4EAIA,2CACA,2CACA,6CACA,sDACA,qDACA,sDAIA,kDACA,0DAIA,iDACA,2DAIA,iEAIA,iEAIA,kEAIA,iEAIA,oDAIA,mDAIA,yDAIA,sDAIA,+CACA,yDAIA,yCACA,mDACA,2DAIA,+CACA,iDACA,uDACA,oDAIA,oDAIA,0DAIA,0CACA,gDACA,uDACA,0DACA,yDAGA,mDAIA,yDAIA,yDAIA,0DAIA,kDACA,0DAIA,wDACA,8CACA,oDACA,oDACA,qDACA,sDACA,0DAIA,gEAIA,gEAIA,iEAIA,kEAIA,0DACA,kEAIA,kEAIA,mEAIA,2DACA,mEAIA,mEAIA,uDACA,6DACA,6DACA,8DACA,iEAIA,8DACA,sEAIA,sEAIA,uEAIA,qDACA,sDACA,mDACA,6DACA,kDACA,uDACA,4DACA,yDACA,gEAIA,yDACA,iEAIA,iEAIA,kEAIA,0DACA,kEAIA,kEAIA,sDACA,sEAIA,uEACA,mFACA,qFACA,kGACA,yFACA,iFACA,6FACA,+FACA,4GAGA,uFACA,6FACA,8FACA,yGAGA,yGAGA,6EACA,wFACA,iEAIA,mEAIA,0DAIA,0DAIA,2EC3xBA,0CADD,MAEE,0DCCF,qCACC,MAEC,iDACA,uDACA,uDACA,wDACA,kDACA,wDACA,wDAGA,2DACA,iEACA,iEAGA,iEC1BF,qBACC,kBCED,qXAuEC,SACA,SACA,UACA,wBAGD,+BAQC,SACA,oBACA,SACA,UACA,wBAID,8EAWC,cAGD,MAEC,gBAGD,aAEC,YAGD,wDAIC,aAGD,MACC,yBACA,iBAKD,KACC,SACA,sBACA,aACA,iCACA,qCACA,mCACA,SACA,UACA,wBAGD,kBACC,oCAGD,qBAGC,mBCtJD,+
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../src/styles/_tokens.scss","../src/styles/contextual-variables/spacing.scss","../src/styles/contextual-variables/typography.scss","../src/styles/focus.scss","../src/styles/baseline.scss","../src/styles/spacing.scss","../src/styles/_mixins.scss","../src/styles/typography.scss","../src/styles/skeletons/button.scss"],"names":[],"mappings":"AAIA,MACC,oBACA,oBACA,oBACA,qBACA,qBACA,qBACA,qBACA,qBACA,qBACA,qBACA,qBACA,6BACA,6BACA,6BACA,6BACA,6BACA,6BACA,4BACA,0BACA,0BACA,2BACA,6BACA,6BACA,6BACA,6BACA,6BACA,4BACA,4BACA,2BACA,2BACA,4BACA,4BACA,4BACA,4BACA,4BACA,4BACA,0BACA,0BACA,0BACA,0BACA,2BACA,+BACA,+BACA,+BACA,+BACA,8BACA,6BACA,6BACA,6BACA,6BACA,8BACA,wCACA,+BACA,+BACA,+BACA,+BACA,8BACA,8BACA,6BACA,6BACA,4BACA,6BACA,wCACA,8BACA,8BACA,8BACA,8BACA,6BACA,6BACA,6BACA,6BACA,4BACA,6BACA,uCACA,8BACA,8BACA,8BACA,8BACA,6BACA,4BACA,4BACA,4BACA,4BACA,4BACA,uCACA,6BACA,6BACA,6BACA,6BACA,4BACA,4BACA,2BACA,2BACA,2BACA,2BACA,sCACA,kCACA,kCACA,kCACA,kCACA,kCACA,iCACA,iCACA,gCACA,gCACA,iCACA,2CACA,8BACA,8BACA,8BACA,8BACA,8BACA,8BACA,6BACA,4BACA,4BACA,6BACA,uCACA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,mCACA,mCACA,mCACA,oCACA,6CACA,gCACA,gCACA,gCACA,gCACA,gCACA,gCACA,+BACA,6BACA,6BACA,8BACA,yCACA,2BACA,qBACA,+BACA,uCACA,iCACA,0CACA,kCACA,0CACA,gCACA,wCACA,gDACA,gDACA,+CACA,+CACA,+CACA,+CACA,8CACA,6CACA,8CACA,4CACA,gDACA,0CACA,wBACA,yBACA,yBACA,yBACA,uBACA,uBACA,uFAGA,uFAGA,yFAGA,gEACA,mEACA,uDACA,uDACA,uDACA,wDACA,wDACA,wDACA,wDACA,wDACA,wDACA,wDACA,wDACA,wDACA,wDACA,yDACA,mBACA,gCACA,gCACA,0DACA,0DACA,0DACA,0DACA,0DACA,0DACA,0DACA,0DACA,0DACA,0DACA,0DACA,0DACA,0DACA,2DACA,4BACA,wBACA,4BACA,4BACA,2BACA,4BACA,0BACA,4BACA,0BACA,2BACA,2BACA,wBACA,6BACA,6BACA,4BACA,4BACA,4BACA,0BACA,0BACA,0BACA,0BACA,0BACA,kCACA,kDAMA,8BACA,yEAIA,0EAIA,0CACA,qDACA,oDACA,oDACA,oDACA,oDACA,8CACA,uDACA,6CACA,+CACA,+CACA,iDAIA,iDACA,uDACA,sDAIA,4DAIA,qDAIA,2DAIA,mDAIA,uDACA,+CACA,uDAKA,+CACA,8CACA,oDACA,qDACA,kDAKA,kDACA,0DAKA,kDACA,gEAKA,iEAKA,6DAIA,8DACA,iEAKA,kEAKA,+DAKA,2EAKA,qEAKA,iFAKA,qEAKA,iFAKA,iEAKA,6EAKA,+DAKA,+DAKA,oEAKA,+DAKA,8CACA,oDACA,sDACA,uDACA,yDAKA,wDACA,2DAKA,wDAKA,gEAKA,qDAKA,2DAKA,0DAKA,oDACA,+DAKA,oDACA,uDACA,oDACA,+DAKA,8DAKA,8CACA,oDACA,qDACA,wDACA,yDAKA,+DAKA,qDAKA,2DAKA,0DAKA,sDAKA,kEAKA,4DAKA,6DAKA,+DAKA,0DAKA,uDAKA,yDAKA,+DAKA,wDAKA,8DAKA,2DAKA,yDAKA,uDACA,0DACA,4EAIA,2CACA,2CACA,6CACA,sDACA,qDACA,sDAIA,kDACA,0DAIA,iDACA,2DAIA,iEAIA,iEAIA,kEAIA,iEAIA,oDAIA,mDAIA,yDAIA,sDAIA,+CACA,yDAIA,yCACA,mDACA,2DAIA,+CACA,iDACA,uDACA,oDAIA,oDAIA,0DAIA,0CACA,gDACA,uDACA,0DACA,yDAGA,mDAIA,yDAIA,yDAIA,0DAIA,kDACA,0DAIA,wDACA,8CACA,oDACA,oDACA,qDACA,sDACA,0DAIA,gEAIA,gEAIA,iEAIA,kEAIA,0DACA,kEAIA,kEAIA,mEAIA,2DACA,mEAIA,mEAIA,uDACA,6DACA,6DACA,8DACA,iEAIA,8DACA,sEAIA,sEAIA,uEAIA,qDACA,sDACA,mDACA,6DACA,kDACA,uDACA,4DACA,yDACA,gEAIA,yDACA,iEAIA,iEAIA,kEAIA,0DACA,kEAIA,kEAIA,sDACA,sEAIA,uEACA,mFACA,qFACA,kGACA,yFACA,iFACA,6FACA,+FACA,4GAGA,uFACA,6FACA,8FACA,yGAGA,yGAGA,6EACA,wFACA,iEAIA,mEAIA,0DAIA,0DAIA,2EC3xBA,0CADD,MAEE,0DCCF,qCACC,MAEC,iDACA,uDACA,uDACA,wDACA,kDACA,wDACA,wDAGA,2DACA,iEACA,iEAGA,iEC1BF,qBACC,kBCED,qXAuEC,SACA,SACA,UACA,wBAGD,+BAQC,SACA,oBACA,SACA,UACA,wBAID,8EAWC,cAGD,MAEC,gBAGD,aAEC,YAGD,wDAIC,aAGD,MACC,yBACA,iBAKD,KACC,SACA,sBACA,aACA,iCACA,qCACA,mCACA,SACA,UACA,wBAGD,kBACC,oCAGD,qBAGC,mBCtJD,+BC+GC,QANmB,KDrGpB,sCC2GC,QAHoB,YDpGrB,6BCmFC,mBACA,QAPmB,KASnB,+BACC,oBDnFF,oCC+EC,mBACA,QAJoB,YAMpB,sCACC,oBC7FD,+BDgCA,iCACA,2CACA,+CACA,0DACA,2DCpCA,8BDgCA,iCACA,0CACA,+CACA,4CACA,0DCpCA,+BDgCA,iCACA,oCACA,+CACA,4CACA,oDCpCA,8BDgCA,iCACA,0CACA,+CACA,4CACA,0DC/BD,6BDoEC,gDACA,oDElBD,MACC,kEACA,gEAYA,wKAzCA,WA7B4B,sBAgC3B,UAhC2B,sBA4C5B,uDACA,8CACA,gBACA,oBACA,oBACA,iCACA,oBACA,mBA4BA,sbAMC,0EAMF,qDA9DC,WA5B0B,sBA+F3B,4BAnEC,WA5B0B,sBA+BzB,UA/ByB,sBAmG3B,qDAvEC,WAxB0B,oDAoG3B,4BA5EC,WAxB0B,oDA2BzB,UA3ByB,oDAyG3B,0FAjFC,WAvB2B,sBA0B1B,UA1B0B","file":"foundation.min.css"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@muraldevkit/ds-foundation",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.28.1-dev-eNqR.1",
|
|
4
4
|
"description": "Mural's design system's Foundation package containing our design language features used across all components",
|
|
5
5
|
"license": "https://www.mural.co/terms/developer-addendum",
|
|
6
6
|
"scripts": {
|
|
@@ -8,11 +8,11 @@
|
|
|
8
8
|
/// Converts pixels to rems
|
|
9
9
|
/// @group functions
|
|
10
10
|
/// @param {Number} $value - Pixel value to convert
|
|
11
|
-
/// @param {Number} $baseline - Baseline value to use, defaults to 16
|
|
12
|
-
/// For the Classic theme use 10.
|
|
13
11
|
/// @returns {Number} The rem equivalent of $value
|
|
12
|
+
/// Consumers that need a different baseline override the `--mrl-baseline` custom property
|
|
13
|
+
/// or `--mrl-font-size` on the root element rather than converting against another divisor.
|
|
14
14
|
/// @example mrl-rem(600)
|
|
15
|
-
@function mrl-rem($value
|
|
15
|
+
@function mrl-rem($value) {
|
|
16
16
|
$remValue: (math.div($value, 16)) + rem;
|
|
17
17
|
@return $remValue;
|
|
18
18
|
}
|
package/src/styles/_mixins.scss
CHANGED
|
@@ -2,11 +2,11 @@
|
|
|
2
2
|
/// Mural's design system mixins
|
|
3
3
|
/// @group mixins
|
|
4
4
|
////
|
|
5
|
-
@forward
|
|
5
|
+
@forward 'focus';
|
|
6
6
|
|
|
7
7
|
/// Font face mixin
|
|
8
8
|
/// @group mixins
|
|
9
|
-
/// @param {String} $font-
|
|
9
|
+
/// @param {String} $font-family - Name of the font family
|
|
10
10
|
/// @param {String} $font-path - Path of the font file
|
|
11
11
|
/// @param {Number} $font-weight - Weight of the font
|
|
12
12
|
/// @param {String} $font-style - Style of the font - default: normal
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
@mixin font-face($font-family, $font-path, $font-weight: 400, $font-style: normal) {
|
|
15
15
|
@font-face {
|
|
16
16
|
font-family: $font-family;
|
|
17
|
-
font-style
|
|
17
|
+
font-style: $font-style;
|
|
18
18
|
font-weight: $font-weight;
|
|
19
19
|
src: url('#{$font-path}.woff2') format('woff2');
|
|
20
20
|
}
|
|
@@ -67,17 +67,16 @@
|
|
|
67
67
|
}
|
|
68
68
|
|
|
69
69
|
@if $kind == 'title-secondary' {
|
|
70
|
-
$weight-token: 'title-secondary'
|
|
70
|
+
$weight-token: 'title-secondary';
|
|
71
71
|
}
|
|
72
72
|
|
|
73
73
|
font-family: var(--mrl-body-font);
|
|
74
|
-
font-size:
|
|
74
|
+
font-size: var(--mrl-type-size-text#{$size-token});
|
|
75
75
|
font-weight: var(--mrl-type-weight-#{$weight-token});
|
|
76
76
|
letter-spacing: var(--mrl-type-spacing-text);
|
|
77
77
|
line-height: var(--mrl-type-line-height-text#{$size-token});
|
|
78
78
|
}
|
|
79
79
|
|
|
80
|
-
|
|
81
80
|
/// Toggleable label mixin
|
|
82
81
|
/// This mixin is for using with icon buttons and dynamic labels withing drawers
|
|
83
82
|
/// @group mixins
|
|
@@ -149,4 +148,4 @@
|
|
|
149
148
|
// with design to create alignment as much as possible between the two implementations.
|
|
150
149
|
filter: drop-shadow(0 0 1px rgba(0, 0, 0, 24%)) drop-shadow(0 4px 4px rgba(0, 0, 0, 3%));
|
|
151
150
|
}
|
|
152
|
-
}
|
|
151
|
+
}
|
package/src/styles/focus.scss
CHANGED
|
@@ -17,18 +17,19 @@
|
|
|
17
17
|
/// @param {String} $element-radius - Used with "element" setup to apply a border radius to the focus indicator
|
|
18
18
|
/// Should be set to a CSS token. Default is var(--mrl-border-radius-functional).
|
|
19
19
|
/// @param {String} $pseudo-element - Used with the "element" setup to allow developers to choose which pseudo element
|
|
20
|
-
/// is used. Available options are "before"
|
|
20
|
+
/// is used. Available options are "before" and "after" (default)
|
|
21
21
|
/// @param {String} $is-inline-element - Used with the "element" setup with a self-closing element. Requires wrapping the
|
|
22
|
-
/// element with
|
|
22
|
+
/// element with `.mrl-u-focus-wrapper` and have an immediate sibling carrying `.mrl-u-focus-indicator`. See the text-input
|
|
23
23
|
/// as an example. Available options are "true", "false" (default)
|
|
24
24
|
/// @param {String} $focus-selector - Allows overwriting the default ":focus-visible" CSS selector for when to apply the styles.
|
|
25
25
|
/// Typical use includes ":focus" or ":focus-within"
|
|
26
26
|
/// @param {String} $border-width - The border width of the element having focus applied to ensure the offset
|
|
27
27
|
/// is correct. Default is '0px'
|
|
28
|
-
/// @param {String} $position - The position of the element having focus applied to ensure
|
|
28
|
+
/// @param {String} $position - Used with the "element" setup. The position of the element having focus applied to ensure
|
|
29
|
+
/// the offset. Available options are "relative" (default), "absolute", and "none" to leave the position property alone
|
|
29
30
|
///
|
|
30
|
-
/// @example @include mrl-focus; // Generates the default
|
|
31
|
-
/// @example @include mrl-focus($is-inverse: 'true'); // Generates an inverse
|
|
31
|
+
/// @example @include mrl-focus; // Generates the default "element" version
|
|
32
|
+
/// @example @include mrl-focus($is-inverse: 'true'); // Generates an inverse indicator
|
|
32
33
|
/// Generate the element version in the default color on a control element that has a border using the after pseudo element
|
|
33
34
|
/// @example @include mrl-focus('element', 'false', 'var(--mrl-border-radius-control)', 'after');
|
|
34
35
|
@mixin mrl-focus(
|
|
@@ -120,7 +121,7 @@
|
|
|
120
121
|
/// @param {String} $is-inverse - Used when the element is an inverse use case so colors are updated accordingly.
|
|
121
122
|
/// Available options are "false" (default) and "true"
|
|
122
123
|
///
|
|
123
|
-
/// @example :host(:focus-visible)::after { @include mrl-focus-
|
|
124
|
+
/// @example :host(:focus-visible)::after { @include mrl-focus-pseudo-element(); } // Generates the default version
|
|
124
125
|
@mixin mrl-focus-pseudo-element(
|
|
125
126
|
$element-radius: 'var(--mrl-border-radius-functional)',
|
|
126
127
|
$color-token: '',
|
|
@@ -136,22 +137,34 @@
|
|
|
136
137
|
#{string.unquote($element-radius)} + var(--mrl-line-width-focus) + var(--mrl-space-offset-focus)
|
|
137
138
|
);
|
|
138
139
|
bottom: calc(
|
|
139
|
-
(
|
|
140
|
+
(
|
|
141
|
+
var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) +
|
|
142
|
+
#{string.unquote($border-width)}
|
|
143
|
+
) *
|
|
140
144
|
-1
|
|
141
145
|
);
|
|
142
146
|
content: '';
|
|
143
147
|
display: block;
|
|
144
148
|
left: calc(
|
|
145
|
-
(
|
|
149
|
+
(
|
|
150
|
+
var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) +
|
|
151
|
+
#{string.unquote($border-width)}
|
|
152
|
+
) *
|
|
146
153
|
-1
|
|
147
154
|
);
|
|
148
155
|
position: absolute;
|
|
149
156
|
right: calc(
|
|
150
|
-
(
|
|
157
|
+
(
|
|
158
|
+
var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) +
|
|
159
|
+
#{string.unquote($border-width)}
|
|
160
|
+
) *
|
|
151
161
|
-1
|
|
152
162
|
);
|
|
153
163
|
top: calc(
|
|
154
|
-
(
|
|
164
|
+
(
|
|
165
|
+
var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) +
|
|
166
|
+
#{string.unquote($border-width)}
|
|
167
|
+
) *
|
|
155
168
|
-1
|
|
156
169
|
);
|
|
157
170
|
z-index: $mrl-zIndex-focus;
|
|
@@ -187,31 +200,31 @@
|
|
|
187
200
|
border-width: var(--mrl-line-width-focus);
|
|
188
201
|
bottom: calc(
|
|
189
202
|
(
|
|
190
|
-
var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) +
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
203
|
+
var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) +
|
|
204
|
+
#{string.unquote($border-width)}
|
|
205
|
+
) *
|
|
206
|
+
-1
|
|
194
207
|
);
|
|
195
208
|
left: calc(
|
|
196
209
|
(
|
|
197
|
-
var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) +
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
210
|
+
var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) +
|
|
211
|
+
#{string.unquote($border-width)}
|
|
212
|
+
) *
|
|
213
|
+
-1
|
|
201
214
|
);
|
|
202
215
|
right: calc(
|
|
203
216
|
(
|
|
204
|
-
var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) +
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
217
|
+
var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) +
|
|
218
|
+
#{string.unquote($border-width)}
|
|
219
|
+
) *
|
|
220
|
+
-1
|
|
208
221
|
);
|
|
209
222
|
top: calc(
|
|
210
223
|
(
|
|
211
|
-
var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) +
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
224
|
+
var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) +
|
|
225
|
+
#{string.unquote($border-width)}
|
|
226
|
+
) *
|
|
227
|
+
-1
|
|
215
228
|
);
|
|
216
229
|
}
|
|
217
230
|
}
|
|
@@ -240,31 +253,31 @@
|
|
|
240
253
|
border-width: var(--mrl-line-width-focus);
|
|
241
254
|
bottom: calc(
|
|
242
255
|
(
|
|
243
|
-
var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) +
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
256
|
+
var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) +
|
|
257
|
+
#{string.unquote($border-width)}
|
|
258
|
+
) *
|
|
259
|
+
-1
|
|
247
260
|
);
|
|
248
261
|
left: calc(
|
|
249
262
|
(
|
|
250
|
-
var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) +
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
263
|
+
var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) +
|
|
264
|
+
#{string.unquote($border-width)}
|
|
265
|
+
) *
|
|
266
|
+
-1
|
|
254
267
|
);
|
|
255
268
|
right: calc(
|
|
256
269
|
(
|
|
257
|
-
var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) +
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
270
|
+
var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) +
|
|
271
|
+
#{string.unquote($border-width)}
|
|
272
|
+
) *
|
|
273
|
+
-1
|
|
261
274
|
);
|
|
262
275
|
top: calc(
|
|
263
276
|
(
|
|
264
|
-
var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) +
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
277
|
+
var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) +
|
|
278
|
+
#{string.unquote($border-width)}
|
|
279
|
+
) *
|
|
280
|
+
-1
|
|
268
281
|
);
|
|
269
282
|
}
|
|
270
283
|
}
|
package/src/styles/index.scss
CHANGED
|
@@ -21,7 +21,7 @@ $mrl-button-height--xsmall: var(--mrl-spacing-07);
|
|
|
21
21
|
// --------------------------------------------------
|
|
22
22
|
/// Styles for button size when the button is the default (medium) size
|
|
23
23
|
/// @group button
|
|
24
|
-
/// @param {String} $size - The desired size based on the
|
|
24
|
+
/// @param {String} $size - The desired size based on the button size scale.
|
|
25
25
|
/// Available options are "default" (default), "small", "large", "xsmall"
|
|
26
26
|
/// @param {Boolean} $is-square - Determines if the button should have a min-width as well.
|
|
27
27
|
/// @example @include mrl-button-size()
|
|
@@ -45,10 +45,10 @@ $mrl-button-height--xsmall: var(--mrl-spacing-07);
|
|
|
45
45
|
}
|
|
46
46
|
}
|
|
47
47
|
|
|
48
|
-
/// Styles for
|
|
49
|
-
///
|
|
48
|
+
/// Styles for a button rendering as a placeholder, which represents a button within an
|
|
49
|
+
/// overall application loading state
|
|
50
50
|
/// @group button
|
|
51
|
-
/// @example
|
|
51
|
+
/// @example .my-button--skeleton { @include mrl-button-skeleton; }
|
|
52
52
|
@mixin mrl-button-skeleton() {
|
|
53
53
|
// per Design, the minimum should be a square
|
|
54
54
|
@include mrl-button-size('default', true);
|
|
@@ -73,7 +73,6 @@ $mrl-button-height--xsmall: var(--mrl-spacing-07);
|
|
|
73
73
|
// Styles
|
|
74
74
|
// --------------------------------------------------
|
|
75
75
|
|
|
76
|
-
|
|
77
76
|
// We scope the actual skeleton state to a class to allow adopters control
|
|
78
77
|
// over when the skeleton is visible
|
|
79
78
|
.mrl-u-preHydrateSkeleton {
|
|
@@ -89,39 +88,38 @@ $mrl-button-height--xsmall: var(--mrl-spacing-07);
|
|
|
89
88
|
// Skeleton state for inverse buttons
|
|
90
89
|
// Note: if you change any of the following styles, the button
|
|
91
90
|
// component's [state="skeleton"] styles also need to be updated
|
|
92
|
-
mrl-button[kind=
|
|
93
|
-
mrl-button[kind=
|
|
94
|
-
mrl-icon-button[kind=
|
|
95
|
-
mrl-icon-button[kind=
|
|
96
|
-
mrl-shadow-button[kind=
|
|
97
|
-
mrl-shadow-button[kind=
|
|
91
|
+
mrl-button[kind='inverse']:not(.hydrated),
|
|
92
|
+
mrl-button[kind='ghost-inverse']:not(.hydrated),
|
|
93
|
+
mrl-icon-button[kind='inverse']:not(.hydrated),
|
|
94
|
+
mrl-icon-button[kind='ghost-inverse']:not(.hydrated),
|
|
95
|
+
mrl-shadow-button[kind='inverse']:not(.hydrated),
|
|
96
|
+
mrl-shadow-button[kind='ghost-inverse']:not(.hydrated) {
|
|
98
97
|
--mrl-button-background-color-skeleton: var(--mrl-color-skeleton-inverse);
|
|
99
98
|
}
|
|
100
99
|
}
|
|
101
100
|
|
|
102
101
|
// The following styles are used for both the skeleton and the final rendering
|
|
103
102
|
// of the component so they are not scoped to a class.
|
|
104
|
-
mrl-button[size=
|
|
105
|
-
mrl-shadow-button[size=
|
|
103
|
+
mrl-button[size='small'],
|
|
104
|
+
mrl-shadow-button[size='small'] {
|
|
106
105
|
@include mrl-button-size('small');
|
|
107
106
|
}
|
|
108
107
|
|
|
109
|
-
mrl-icon-button[size=
|
|
108
|
+
mrl-icon-button[size='small'] {
|
|
110
109
|
@include mrl-button-size('small', true);
|
|
111
110
|
}
|
|
112
111
|
|
|
113
|
-
|
|
114
|
-
mrl-button[size=
|
|
115
|
-
mrl-shadow-button[size="large"] {
|
|
112
|
+
mrl-button[size='large'],
|
|
113
|
+
mrl-shadow-button[size='large'] {
|
|
116
114
|
@include mrl-button-size('large');
|
|
117
115
|
}
|
|
118
116
|
|
|
119
|
-
mrl-icon-button[size=
|
|
117
|
+
mrl-icon-button[size='large'] {
|
|
120
118
|
@include mrl-button-size('large', true);
|
|
121
119
|
}
|
|
122
120
|
|
|
123
121
|
// XSmall size is only allowed on the ghost variants of Icon Buttons
|
|
124
|
-
mrl-icon-button[size=
|
|
125
|
-
mrl-icon-button[size=
|
|
122
|
+
mrl-icon-button[size='xsmall'][kind='ghost'],
|
|
123
|
+
mrl-icon-button[size='xsmall'][kind='ghost-inverse'] {
|
|
126
124
|
@include mrl-button-size('xsmall', true);
|
|
127
125
|
}
|
package/src/styles/grid.scss
DELETED