1 | import React from 'react';
|
2 | import { md, code, Example } from '@kalamazoo/docs';
|
3 |
|
4 | export default md`
|
5 | ### Layers
|
6 |
|
7 | These are fixed values to use for layering elements with \`z-index\`.
|
8 |
|
9 | ${code`
|
10 | import { layers } from '@kalamazoo/theme';
|
11 |
|
12 | // layers properties return a number.
|
13 | () => <div style={{ zIndex: layers.card() }} />
|
14 | `}
|
15 |
|
16 | ${(
|
17 | <Example
|
18 | packageName="@kalamazoo/theme"
|
19 | Component={require('../examples/layers').default}
|
20 | source={require('!!raw-loader!../examples/layers')}
|
21 | title="Definitions"
|
22 | />
|
23 | )}
|
24 |
|
25 | ### Border radius
|
26 |
|
27 | When wanting to add some rounding to an elements edges,
|
28 | use this.
|
29 |
|
30 | ${code`
|
31 | import { borderRadius } from '@kalamazoo/theme';
|
32 |
|
33 | // borderRadius returns a number.
|
34 | () => <div style={{ borderRadius: borderRadius() />
|
35 | `}
|
36 |
|
37 | ### Grid size
|
38 |
|
39 | Grid unit that should be used for all sizing calculations.
|
40 | Refer to the [design documentation](https:
|
41 |
|
42 | ${code`
|
43 | import { gridSize } from '@kalamazoo/theme';
|
44 |
|
45 | // gridSize returns a number.
|
46 | () => <div style={{ width: gridSize() * 10 />
|
47 | `}
|
48 | `;
|
49 |
|
\ | No newline at end of file |