@org-design-system/styles 0.1.4 → 0.1.6
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 +23 -34
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,51 +1,40 @@
|
|
|
1
|
-
# @org-design-system/
|
|
1
|
+
# @org-design-system/styles 🎨
|
|
2
2
|
|
|
3
|
-
The
|
|
3
|
+
The design token engine and foundational styling layer for the Antaris Design System.
|
|
4
4
|
|
|
5
5
|
## 🧱 What's Inside?
|
|
6
|
-
- **Raw Variables**: Semantic colors, spacing, typography, and effects.
|
|
7
|
-
- **Consolidated CSS**: A single entry point for all CSS variables.
|
|
8
|
-
- **Type-Safe Constants**: JavaScript/TypeScript exports for use in logic or CSS-in-JS.
|
|
9
6
|
|
|
10
|
-
|
|
7
|
+
- **Semantic Tokens**: Abstracted variables for colors, spacing, typography, and effects (e.g., `bg-surface`, `text-primary`).
|
|
8
|
+
- **OKLCH Color Engine**: Our color system uses the OKLCH color space for perceptually uniform lightness and vibrant, consistent colors across displays.
|
|
9
|
+
- **CSS Variable Injection**: Automatically injects standard CSS variables into the `:root` pseudo-class.
|
|
10
|
+
- **Type-Safe Constants**: JavaScript and TypeScript exports for use in logical conditions or CSS-in-JS.
|
|
11
11
|
|
|
12
|
-
|
|
13
|
-
We use a **two-layer** token system:
|
|
14
|
-
- **Base Tokens**: Primitive values (e.g., `blue-500`).
|
|
15
|
-
- **Semantic Tokens**: Contextual values (e.g., `text-primary`, `bg-surface`).
|
|
12
|
+
## ⚙️ Token Architecture
|
|
16
13
|
|
|
17
|
-
|
|
18
|
-
|
|
14
|
+
We utilize a **multi-layer** variable system:
|
|
15
|
+
1. **Pimitives**: Raw values (e.g., `green-500`, `radius-4`).
|
|
16
|
+
2. **Semantic**: Contextual variables mapping to primitives (e.g., `surface-success` -> `green-alpha-4`).
|
|
17
|
+
3. **Component-Specific**: Targeted overrides when necessary.
|
|
18
|
+
|
|
19
|
+
## 🛠️ Figma Integration
|
|
20
|
+
|
|
21
|
+
This package is designed to stay in sync with our Figma workspace.
|
|
19
22
|
```bash
|
|
20
|
-
#
|
|
21
|
-
# FIGMA_ACCESS_TOKEN
|
|
22
|
-
# FIGMA_FILE_KEY
|
|
23
|
+
# Sync tokens from Figma Variables API
|
|
23
24
|
npm run sync
|
|
24
25
|
```
|
|
26
|
+
*Note: Requires `FIGMA_ACCESS_TOKEN` and `FIGMA_FILE_KEY` environment variables.*
|
|
25
27
|
|
|
26
|
-
|
|
27
|
-
The `build.js` script transforms raw JSON/token data into:
|
|
28
|
-
- `dist/index.css`: Ready-to-use CSS variables.
|
|
29
|
-
- `dist/index.js/mjs`: TypeScript-compatible constants.
|
|
30
|
-
|
|
31
|
-
## 📦 Usage
|
|
28
|
+
## 📦 Consumption
|
|
32
29
|
|
|
33
|
-
|
|
34
|
-
```css
|
|
35
|
-
@import "@org-design-system/tokens/index.css";
|
|
36
|
-
|
|
37
|
-
.my-box {
|
|
38
|
-
background-color: var(--color-surface-bg);
|
|
39
|
-
border-radius: var(--radius-md);
|
|
40
|
-
}
|
|
41
|
-
```
|
|
30
|
+
This package is marked as **private** and is intended to be consumed internally by the `@org-design-system/components` package or via the main `org-design-system` metapackage.
|
|
42
31
|
|
|
43
|
-
###
|
|
32
|
+
### Direct Import (Internal Only)
|
|
44
33
|
```tsx
|
|
45
|
-
import { tokens } from "@org-design-system/
|
|
34
|
+
import { tokens } from "@org-design-system/styles";
|
|
46
35
|
|
|
47
|
-
|
|
36
|
+
const successColor = tokens.colors.success;
|
|
48
37
|
```
|
|
49
38
|
|
|
50
39
|
---
|
|
51
|
-
*
|
|
40
|
+
*The foundation of visual excellence.*
|