@muraldevkit/ds-foundation 2.28.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.
Files changed (11) hide show
  1. package/README.md +20 -4
  2. package/dist/TOKENS.md +3 -2
  3. package/dist/foundation.css.map +1 -1
  4. package/dist/foundation.min.css.map +1 -1
  5. package/package.json +1 -1
  6. package/src/styles/_functions.scss +3 -3
  7. package/src/styles/_mixins.scss +6 -7
  8. package/src/styles/focus.scss +55 -42
  9. package/src/styles/index.scss +0 -1
  10. package/src/styles/skeletons/button.scss +18 -20
  11. 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 CHANGED
@@ -51,8 +51,9 @@ the _consuming_ codebase for existing usages.
51
51
  ### When nothing fits
52
52
 
53
53
  Don't invent a `--mrl-…` name and don't hard-code a value a token already
54
- covers. Consider using the closest existing token, or flag that a new one may be needed
55
- new tokens are authored in the ds-foundation package, never in this generated file.
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.
56
57
 
57
58
  ## Usage rules
58
59
 
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;ECgHC,SANmB;;;ADtGpB;EC4GC,SAHoB;;;ADrGrB;ECoFC;EACA,SAPmB;;AASnB;EACC;;;ADpFF;ECgFC;EACA,SAJoB;;AAMpB;EACC;;;AC9FD;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;EDqEC;EACA;;;AEnBD;EACC;EACA;;;AAaA;AAAA;AAAA;EA1CA,YA7B4B;EAgC3B,WAhC2B;EA4C5B;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AA6BA;AAAA;AAAA;AAAA;AAAA;AAAA;EAMC;;;AAMF;AAAA;EA/DC,YA5B0B;;;AAgG3B;EApEC,YA5B0B;EA+BzB,WA/ByB;;;AAqG3B;AAAA;EAzEC,YAxB0B;;;AAsG3B;EA9EC,YAxB0B;EA2BzB,WA3ByB;;;AA2G3B;AAAA;EAnFC,YAvB2B;EA0B1B,WA1B0B","file":"foundation.css"}
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"}
package/dist/foundation.min.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":"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,0D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","file":"foundation.min.css"}
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,0D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","file":"foundation.min.css"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@muraldevkit/ds-foundation",
3
- "version": "2.28.0",
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": {
package/src/styles/_functions.scss CHANGED
@@ -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, $baseline: 16) {
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 "focus";
5
+ @forward 'focus';
6
6
 
7
7
  /// Font face mixin
8
8
  /// @group mixins
9
- /// @param {String} $font-name - Name of the font family
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 : $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: var(--mrl-type-size-text#{$size-token});
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" (default) and "after"
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 `div.mrl-u-focus-wrapper` and have an immediate sibling `span.mrl-u-focus-indicator`. See the text-input
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 the offset, default is 'relative', pass in 'none' to remove the position property
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 outline version
31
- /// @example @include mrl-focus($is-inverse: 'true'); // Generates an inverse outline
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-shadow(); } // Generates the default version
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
- (var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + #{string.unquote($border-width)}) *
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
- (var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + #{string.unquote($border-width)}) *
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
- (var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + #{string.unquote($border-width)}) *
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
- (var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + #{string.unquote($border-width)}) *
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) + #{string.unquote(
191
- $border-width
192
- )}
193
- ) * -1
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) + #{string.unquote(
198
- $border-width
199
- )}
200
- ) * -1
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) + #{string.unquote(
205
- $border-width
206
- )}
207
- ) * -1
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) + #{string.unquote(
212
- $border-width
213
- )}
214
- ) * -1
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) + #{string.unquote(
244
- $border-width
245
- )}
246
- ) * -1
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) + #{string.unquote(
251
- $border-width
252
- )}
253
- ) * -1
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) + #{string.unquote(
258
- $border-width
259
- )}
260
- ) * -1
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) + #{string.unquote(
265
- $border-width
266
- )}
267
- ) * -1
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
@@ -12,7 +12,6 @@
12
12
  @forward 'focus';
13
13
  @forward 'functions';
14
14
  @forward 'baseline';
15
- @forward 'grid';
16
15
  @forward 'spacing';
17
16
  @forward 'typography';
18
17
  @forward 'skeletons/index';
package/src/styles/skeletons/button.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 shadow tokens.
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 buttons prior to hydrating or when it's in `state="skeleton"` which represents
49
- /// a hydrated button within an overall application loading state
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 mrl-button[state="skeleton"] { @include mrl-button-skeleton; }
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="inverse"]:not(.hydrated),
93
- mrl-button[kind="ghost-inverse"]:not(.hydrated),
94
- mrl-icon-button[kind="inverse"]:not(.hydrated),
95
- mrl-icon-button[kind="ghost-inverse"]:not(.hydrated),
96
- mrl-shadow-button[kind="inverse"]:not(.hydrated),
97
- mrl-shadow-button[kind="ghost-inverse"]:not(.hydrated) {
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="small"],
105
- mrl-shadow-button[size="small"] {
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="small"] {
108
+ mrl-icon-button[size='small'] {
110
109
  @include mrl-button-size('small', true);
111
110
  }
112
111
 
113
-
114
- mrl-button[size="large"],
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="large"] {
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="xsmall"][kind="ghost"],
125
- mrl-icon-button[size="xsmall"][kind="ghost-inverse"] {
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
@@ -1,4 +0,0 @@
1
- ////
2
- /// Mural's design system grid
3
- /// @group grid
4
- ////