tabler-react-2 0.1.86 → 0.1.88
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/provider/tabler.js +4 -2
- package/dist/steps/index.js +3 -1
- package/docs/gatsby-config.js +4 -4
- package/docs/package.json +2 -1
- package/docs/src/components/ButtonedHookModal.jsx +15 -0
- package/docs/src/components/ConfirmModal.jsx +15 -0
- package/docs/src/components/Excerpt.jsx +2 -1
- package/docs/src/components/LoadableTabler.jsx +6 -0
- package/docs/src/config/sidebar.yml +10 -0
- package/docs/src/data/congressPeople.json +90 -0
- package/docs/src/docs/components/buttons.mdx +1 -1
- package/docs/src/docs/components/dropdown-input.mdx +0 -13
- package/docs/src/docs/components/hook-confirm.mdx +106 -0
- package/docs/src/docs/components/hook-driven-modals.mdx +219 -0
- package/docs/src/docs/components/modals.mdx +2 -2
- package/docs/src/docs/components/steps.mdx +221 -0
- package/docs/src/docs/components/tables.mdx +454 -0
- package/docs/src/docs/components/typography.mdx +3 -5
- package/docs/src/docs/getting-started.mdx +12 -0
- package/docs/src/docs/theme.mdx +151 -0
- package/docs/src/home/index.mdx +9 -17
- package/docs/static/democrat.png +0 -0
- package/docs/static/favicon.png +0 -0
- package/docs/static/republican.png +0 -0
- package/package.json +1 -1
- package/docs/src/docs/themes.mdx +0 -28
|
@@ -0,0 +1,151 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: "Themes"
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
import { TablerProvider } from "../components/LoadableTabler.jsx";
|
|
6
|
+
import { Excerpt } from "../components/Excerpt.jsx";
|
|
7
|
+
|
|
8
|
+
Tabler React 2 provides a light and dark theme. You can use the `TablerProvider` component to set the theme. You can set the `colorScheme` prop to either `light` or `dark`, or let it default to `light`.
|
|
9
|
+
|
|
10
|
+
```jsx
|
|
11
|
+
<TablerProvider colorScheme="dark">
|
|
12
|
+
<h1>Hello, world!</h1>
|
|
13
|
+
</TablerProvider>
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
## Customization
|
|
17
|
+
|
|
18
|
+
You can pass in a `theme` object to the `TablerProvider` component to customize the theme. The `theme` object accepts a nested object with the following keys:
|
|
19
|
+
|
|
20
|
+
| Key | Value |
|
|
21
|
+
| ----------------------- | ------------------------------------------------------------------------------------------------ |
|
|
22
|
+
| primary | `#206bc4` |
|
|
23
|
+
| primary-rgb | `32, 107, 196` |
|
|
24
|
+
| primary-text | `#1a569d` |
|
|
25
|
+
| primary-bg-subtle | `#d2e1f3` |
|
|
26
|
+
| primary-border-subtle | `#a6c4e7` |
|
|
27
|
+
| secondary | `#616876` |
|
|
28
|
+
| secondary-rgb | `97, 104, 118` |
|
|
29
|
+
| secondary-text | `#49566c` |
|
|
30
|
+
| secondary-bg-subtle | `#f1f5f9` |
|
|
31
|
+
| secondary-border-subtle | `#e2e8f0` |
|
|
32
|
+
| success | `#2fb344` |
|
|
33
|
+
| success-rgb | `47, 179, 68` |
|
|
34
|
+
| success-text | `#268f36` |
|
|
35
|
+
| success-bg-subtle | `#d5f0da` |
|
|
36
|
+
| success-border-subtle | `#ace1b4` |
|
|
37
|
+
| info | `#4299e1` |
|
|
38
|
+
| info-rgb | `66, 153, 225` |
|
|
39
|
+
| info-text | `#0e616e` |
|
|
40
|
+
| info-bg-subtle | `#d1ecf1` |
|
|
41
|
+
| info-border-subtle | `#a2dae3` |
|
|
42
|
+
| warning | `#f76707` |
|
|
43
|
+
| warning-rgb | `247, 103, 7` |
|
|
44
|
+
| warning-text | `#935f00` |
|
|
45
|
+
| warning-bg-subtle | `#fdeccc` |
|
|
46
|
+
| warning-border-subtle | `#fbd999` |
|
|
47
|
+
| danger | `#d63939` |
|
|
48
|
+
| danger-rgb | `214, 57, 57` |
|
|
49
|
+
| danger-text | `#ab2e2e` |
|
|
50
|
+
| danger-bg-subtle | `#f7d7d7` |
|
|
51
|
+
| danger-border-subtle | `#efb0b0` |
|
|
52
|
+
| light | `#f8fafc` |
|
|
53
|
+
| light-rgb | `248, 250, 252` |
|
|
54
|
+
| light-text | `#49566c` |
|
|
55
|
+
| light-bg-subtle | `#f8fafc` |
|
|
56
|
+
| light-border-subtle | `#e2e8f0` |
|
|
57
|
+
| dark | `#1d273b` |
|
|
58
|
+
| dark-rgb | `29, 39, 59` |
|
|
59
|
+
| dark-text | `#313c52` |
|
|
60
|
+
| dark-bg-subtle | `#9ba9be` |
|
|
61
|
+
| dark-border-subtle | `#6c7a91` |
|
|
62
|
+
| muted | `#616876` |
|
|
63
|
+
| muted-rgb | `97, 104, 118` |
|
|
64
|
+
| black | `#000000` |
|
|
65
|
+
| black-rgb | `0, 0, 0` |
|
|
66
|
+
| white | `#ffffff` |
|
|
67
|
+
| white-rgb | `255, 255, 255` |
|
|
68
|
+
| blue | `#206bc4` |
|
|
69
|
+
| blue-rgb | `32, 107, 196` |
|
|
70
|
+
| azure | `#4299e1` |
|
|
71
|
+
| azure-rgb | `66, 153, 225` |
|
|
72
|
+
| indigo | `#4263eb` |
|
|
73
|
+
| indigo-rgb | `66, 99, 235` |
|
|
74
|
+
| purple | `#ae3ec9` |
|
|
75
|
+
| purple-rgb | `174, 62, 201` |
|
|
76
|
+
| pink | `#d6336c` |
|
|
77
|
+
| pink-rgb | `214, 51, 108` |
|
|
78
|
+
| red | `#d63939` |
|
|
79
|
+
| red-rgb | `214, 57, 57` |
|
|
80
|
+
| orange | `#f76707` |
|
|
81
|
+
| orange-rgb | `247, 103, 7` |
|
|
82
|
+
| yellow | `#f59f00` |
|
|
83
|
+
| yellow-rgb | `245, 159, 0` |
|
|
84
|
+
| lime | `#74b816` |
|
|
85
|
+
| lime-rgb | `116, 184, 22` |
|
|
86
|
+
| green | `#2fb344` |
|
|
87
|
+
| green-rgb | `47, 179, 68` |
|
|
88
|
+
| teal | `#0ca678` |
|
|
89
|
+
| teal-rgb | `12, 166, 120` |
|
|
90
|
+
| cyan | `#17a2b8` |
|
|
91
|
+
| cyan-rgb | `23, 162, 184` |
|
|
92
|
+
| facebook | `#1877f2` |
|
|
93
|
+
| facebook-rgb | `24, 119, 242` |
|
|
94
|
+
| twitter | `#1da1f2` |
|
|
95
|
+
| twitter-rgb | `29, 161, 242` |
|
|
96
|
+
| linkedin | `#0a66c2` |
|
|
97
|
+
| linkedin-rgb | `10, 102, 194` |
|
|
98
|
+
| google | `#dc4e41` |
|
|
99
|
+
| google-rgb | `220, 78, 65` |
|
|
100
|
+
| youtube | `#ff0000` |
|
|
101
|
+
| youtube-rgb | `255, 0, 0` |
|
|
102
|
+
| vimeo | `#1ab7ea` |
|
|
103
|
+
| vimeo-rgb | `26, 183, 234` |
|
|
104
|
+
| dribbble | `#ea4c89` |
|
|
105
|
+
| dribbble-rgb | `234, 76, 137` |
|
|
106
|
+
| github | `#181717` |
|
|
107
|
+
| github-rgb | `24, 23, 23` |
|
|
108
|
+
| instagram | `#e4405f` |
|
|
109
|
+
| instagram-rgb | `228, 64, 95` |
|
|
110
|
+
| pinterest | `#bd081c` |
|
|
111
|
+
| pinterest-rgb | `189, 8, 28` |
|
|
112
|
+
| vk | `#6383a8` |
|
|
113
|
+
| vk-rgb | `99, 131, 168` |
|
|
114
|
+
| rss | `#ffa500` |
|
|
115
|
+
| rss-rgb | `255, 165, 0` |
|
|
116
|
+
| flickr | `#0063dc` |
|
|
117
|
+
| flickr-rgb | `0, 99, 220` |
|
|
118
|
+
| bitbucket | `#0052cc` |
|
|
119
|
+
| bitbucket-rgb | `0, 82, 204` |
|
|
120
|
+
| tabler | `#206bc4` |
|
|
121
|
+
| tabler-rgb | `32, 107, 196` |
|
|
122
|
+
| body-color | `#1d273b` |
|
|
123
|
+
| body-color-rgb | `29, 39, 59` |
|
|
124
|
+
| body-bg | `#f1f5f9` |
|
|
125
|
+
| body-bg-rgb | `241, 245, 249` |
|
|
126
|
+
| border-color | `#e6e7e9` |
|
|
127
|
+
| border-radius | `4px` |
|
|
128
|
+
| border-radius-sm | `2px` |
|
|
129
|
+
| border-radius-lg | `8px` |
|
|
130
|
+
| border-radius-xl | `1rem` |
|
|
131
|
+
| border-radius-2xl | `2rem` |
|
|
132
|
+
| border-radius-pill | `100rem` |
|
|
133
|
+
| box-shadow | `0 0.5rem 1rem rgba(29, 39, 59, 0.15)` |
|
|
134
|
+
| emphasis-color | `#000000` |
|
|
135
|
+
| emphasis-color-rgb | `0, 0, 0` |
|
|
136
|
+
| font-sans-serif | `-apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif` |
|
|
137
|
+
| font-monospace | `Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace` |
|
|
138
|
+
| body-font-family | `var(--font-sans-serif)` |
|
|
139
|
+
| body-font-size | `0.875rem` |
|
|
140
|
+
| body-font-weight | `400` |
|
|
141
|
+
| body-line-height | `1.4285714286` |
|
|
142
|
+
| link-color | `#206bc4` |
|
|
143
|
+
| link-hover-color | `#1a569d` |
|
|
144
|
+
| highlight-bg | `#fdeccc` |
|
|
145
|
+
| border-width | `1px` |
|
|
146
|
+
| breakpoint-xs | `0` |
|
|
147
|
+
| breakpoint-sm | `576px` |
|
|
148
|
+
| breakpoint-md | `768px` |
|
|
149
|
+
| breakpoint-lg | `992px` |
|
|
150
|
+
| breakpoint-xl | `1200px` |
|
|
151
|
+
| breakpoint-xxl | `1400px` |
|
package/docs/src/home/index.mdx
CHANGED
|
@@ -1,23 +1,15 @@
|
|
|
1
1
|
# Introduction
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
developed it to be easy to use and customize. Forget about other
|
|
5
|
-
things and focus on what matters: **writing docs.**
|
|
3
|
+
Tabler React 2 is a React implementation of [Tabler](https://tabler.io) UI components, but is not an official project of Tabler. It is still a work in progress, but breaking changes are not to be expected.
|
|
6
4
|
|
|
7
|
-
##
|
|
5
|
+
## Installation
|
|
8
6
|
|
|
9
|
-
|
|
10
|
-
- 📝 MDX for docs;
|
|
11
|
-
- 🛣 Yaml-based sidebar navigation;
|
|
12
|
-
- 📱 Responsive and mobile friendly;
|
|
13
|
-
- 🖥 Code highlighting with [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) and [react-live](https://github.com/FormidableLabs/react-live) support;
|
|
14
|
-
- 🥇 SEO (Sitemap, schema.org data, Open Graph and Twitter tags).
|
|
15
|
-
- 📈 Google Analytics support;
|
|
16
|
-
- 📄 Custom docs schema;
|
|
17
|
-
- 🖱 Table of Contents;
|
|
18
|
-
- ⚡️ Offline Support & WebApp Manifest;
|
|
19
|
-
- and much more 🔥
|
|
7
|
+
To install Tabler React 2, you can use npm or yarn.
|
|
20
8
|
|
|
21
|
-
|
|
9
|
+
```bash
|
|
10
|
+
npm install tabler-react-2 @tabler/icons-react
|
|
11
|
+
```
|
|
22
12
|
|
|
23
|
-
|
|
13
|
+
```bash
|
|
14
|
+
yarn add tabler-react-2 @tabler/icons-react
|
|
15
|
+
```
|
|
Binary file
|
package/docs/static/favicon.png
CHANGED
|
Binary file
|
|
Binary file
|
package/package.json
CHANGED
package/docs/src/docs/themes.mdx
DELETED
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: "Themes"
|
|
3
|
-
---
|
|
4
|
-
|
|
5
|
-
import { TablerProvider } from "../components/LoadableTabler";
|
|
6
|
-
import { Excerpt } from "../components/Excerpt.jsx";
|
|
7
|
-
|
|
8
|
-
Tabler React 2 provides a light and dark theme. You can use the `TablerProvider` component to set the theme.
|
|
9
|
-
|
|
10
|
-
## Light theme
|
|
11
|
-
|
|
12
|
-
The light theme is the default theme. It provides a light and dark theme.
|
|
13
|
-
|
|
14
|
-
<Excerpt>
|
|
15
|
-
<TablerProvider>
|
|
16
|
-
<div style={{ padding: 20 }}>
|
|
17
|
-
<h1>Hello, world!</h1>
|
|
18
|
-
</div>
|
|
19
|
-
</TablerProvider>
|
|
20
|
-
</Excerpt>
|
|
21
|
-
|
|
22
|
-
```jsx
|
|
23
|
-
<TablerProvider>
|
|
24
|
-
<div style={{ padding: 20 }}>
|
|
25
|
-
<h1>Hello, world!</h1>
|
|
26
|
-
</div>
|
|
27
|
-
</TablerProvider>
|
|
28
|
-
```
|