@embeddable.com/remarkable-ui 2.0.3 → 2.0.4
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 +77 -15
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,26 +1,88 @@
|
|
|
1
1
|
# Remarkable UI
|
|
2
2
|
|
|
3
|
-
**Remarkable UI** is
|
|
3
|
+
[**Remarkable UI**](https://www.npmjs.com/package/@embeddable.com/remarkable-ui) is a library of beautiful analytics components—charts, controls, tables, and more—designed to be styled through **granular CSS variables**.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
## 🎨 Styling System
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
Every aspect of a Remarkable UI component can be customized using granular CSS variables.
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
### CSS Variables Architecture
|
|
10
10
|
|
|
11
11
|
There are **three layers** of variables in our system:
|
|
12
12
|
|
|
13
|
-
1. **
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
13
|
+
1. **Core variables**
|
|
14
|
+
- Raw CSS primitives (colors, spacing, type scale)
|
|
15
|
+
|
|
16
|
+
- _Do not override_ — they serve as the foundation.
|
|
17
|
+
|
|
18
|
+
2. **Semantic variables**
|
|
19
|
+
- Meaningful tokens built from core variables (e.g. `--em-sem-background`, `--em-sem-chart-color--1`, `--em-sem-text`)
|
|
20
|
+
|
|
21
|
+
- Control the _global_ look and feel: palettes, brand colors, default typography.
|
|
22
|
+
|
|
23
|
+
3. **Component variables**
|
|
24
|
+
- Component-specific tokens (e.g. `--em-card-border-radius`, `--em-card-subtitle-color`)
|
|
25
|
+
|
|
26
|
+
- Fine-tune individual components without affecting global semantics.
|
|
27
|
+
|
|
28
|
+
## 📦 Installation & Usage
|
|
29
|
+
|
|
30
|
+
### Installation
|
|
31
|
+
|
|
32
|
+
```bash
|
|
33
|
+
|
|
34
|
+
npm install @embeddable.com/remarkable-ui
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
### CSS Setup
|
|
38
|
+
|
|
39
|
+
The library includes fallback values for all CSS variables, so you don't need to override anything unless you want to customize the theme.
|
|
40
|
+
|
|
41
|
+
To override styles, define the variables you want in your own CSS file:
|
|
42
|
+
|
|
43
|
+
```css
|
|
44
|
+
:root {
|
|
45
|
+
...
|
|
46
|
+
--em-card-background: "grey",
|
|
47
|
+
...
|
|
48
|
+
}
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
Then import your CSS file at the root of your project:
|
|
52
|
+
|
|
53
|
+
```javascript
|
|
54
|
+
import 'your-file-here.css';
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
### Importing components
|
|
58
|
+
|
|
59
|
+
```ts
|
|
60
|
+
import { Button, Card } from '@embeddable.com/remarkable-ui';
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
## 📁 Project Structure
|
|
64
|
+
|
|
65
|
+
```
|
|
66
|
+
scripts/ # Automation scripts
|
|
67
|
+
src/
|
|
68
|
+
components/ # Chart, editor and shared components
|
|
69
|
+
hooks/ # Reusable hooks used by the components
|
|
70
|
+
styles/ # Global css and types for the exising css variables
|
|
71
|
+
types/ # Shared TypeScript types
|
|
72
|
+
utils.ts/ # Utility functions
|
|
73
|
+
```
|
|
22
74
|
|
|
23
75
|
## 🛠 Contributing
|
|
24
76
|
|
|
25
|
-
|
|
26
|
-
|
|
77
|
+
We welcome feedback and contributions!
|
|
78
|
+
|
|
79
|
+
1. Fork the repository
|
|
80
|
+
2. Create a feature branch
|
|
81
|
+
3. Commit your changes
|
|
82
|
+
4. Open a pull request
|
|
83
|
+
|
|
84
|
+
Please follow our code style and include tests for any new features.
|
|
85
|
+
|
|
86
|
+
## 📄 License
|
|
87
|
+
|
|
88
|
+
MIT — see the `LICENSE` file for details.
|