@madgex/design-system 1.18.2 → 1.20.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 +3 -1
- package/dist/_tokens/css/_tokens.css +1 -1
- package/dist/_tokens/js/_tokens-module.js +1 -1
- package/dist/_tokens/scss/_tokens.scss +1 -1
- package/dist/css/index.css +1 -1
- package/docs/01-index.njk +2 -2
- package/fractal-theme/assets/css/styles.css +21 -0
- package/fractal.js +8 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -4,12 +4,14 @@ A work-in progress Design System for building a UI for Madgex products.
|
|
|
4
4
|
|
|
5
5
|
## Usage
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
Available on NPM as [@madgex/design-system](https://www.npmjs.com/package/@madgex/design-system).
|
|
8
8
|
|
|
9
9
|
```bash
|
|
10
10
|
npm install @madgex/design-system --save
|
|
11
11
|
```
|
|
12
12
|
|
|
13
|
+
**NOTE**: Right now you'll need to be authenticated on npm under the Madgex account.
|
|
14
|
+
|
|
13
15
|
## Importing styles
|
|
14
16
|
|
|
15
17
|
You'll need to import the Madgex DS styles into your project scss file.
|
package/dist/css/index.css
CHANGED
package/docs/01-index.njk
CHANGED
|
@@ -1,3 +1,24 @@
|
|
|
1
|
+
.badge {
|
|
2
|
+
color: #fff;
|
|
3
|
+
background-color: #14f;
|
|
4
|
+
|
|
5
|
+
padding-right: 0.6em;
|
|
6
|
+
padding-left: 0.6em;
|
|
7
|
+
border-radius: 10rem;
|
|
8
|
+
|
|
9
|
+
display: inline-block;
|
|
10
|
+
padding: 0.25em 0.4em;
|
|
11
|
+
font-size: 75%;
|
|
12
|
+
font-weight: 700;
|
|
13
|
+
line-height: 1;
|
|
14
|
+
text-align: center;
|
|
15
|
+
white-space: nowrap;
|
|
16
|
+
vertical-align: baseline;
|
|
17
|
+
border-radius: 0.25rem;
|
|
18
|
+
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
|
|
19
|
+
box-shadow 0.15s ease-in-out;
|
|
20
|
+
}
|
|
21
|
+
|
|
1
22
|
.colors {
|
|
2
23
|
width: 100%;
|
|
3
24
|
}
|
package/fractal.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
const fractal = (module.exports = require('@frctl/fractal').create()); // eslint-disable-line
|
|
2
2
|
const path = require('path');
|
|
3
|
+
const fs = require('fs');
|
|
3
4
|
|
|
4
5
|
const mandelbrot = require('@frctl/mandelbrot');
|
|
5
6
|
const nunjucks = require('@frctl/nunjucks')({
|
|
@@ -26,6 +27,12 @@ const pkg = require(path.join(__dirname, 'package.json')); // eslint-disable-lin
|
|
|
26
27
|
const tokens = require('./dist/_tokens/js/_tokens-module');
|
|
27
28
|
const icons = require('./dist/assets/icons.json');
|
|
28
29
|
|
|
30
|
+
// import README.MD into homepage docs
|
|
31
|
+
let pkgReadme = fs.readFileSync(path.join(__dirname, 'README.md'), 'utf8');
|
|
32
|
+
pkgReadme = pkgReadme.split('\n');
|
|
33
|
+
pkgReadme.shift(0); // drop first line (h1)
|
|
34
|
+
pkgReadme = pkgReadme.join('\n');
|
|
35
|
+
|
|
29
36
|
/**
|
|
30
37
|
* Metadata
|
|
31
38
|
*/
|
|
@@ -51,6 +58,7 @@ fractal.docs.set('ext', '.njk'); // default is '.md'
|
|
|
51
58
|
fractal.docs.set('path', path.join(__dirname, 'docs'));
|
|
52
59
|
fractal.docs.set('default.context', {
|
|
53
60
|
pkg,
|
|
61
|
+
pkgReadme,
|
|
54
62
|
tokens,
|
|
55
63
|
icons,
|
|
56
64
|
});
|