@ripperdoc-chrome77/tokens 1.0.0-beta → 1.0.0
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 +127 -0
- package/package.json +2 -2
package/README.md
ADDED
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
# @ripperdoc-chrome77/tokens
|
|
2
|
+
|
|
3
|
+
> Design tokens, shared foundation scales, and CSS variables for the **Ripperdoc** multi-MFE design system platform.
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/@ripperdoc-chrome77/tokens)
|
|
6
|
+
[](LICENSE)
|
|
7
|
+
|
|
8
|
+
---
|
|
9
|
+
|
|
10
|
+
## 1. Overview
|
|
11
|
+
|
|
12
|
+
`@ripperdoc-chrome77/tokens` provides the raw primitives, semantic scales, and foundational CSS custom properties consumed across all Ripperdoc themes, packages, and micro-frontends (MFEs).
|
|
13
|
+
|
|
14
|
+
### Key Features
|
|
15
|
+
- **Strict 3-Tier Token Architecture**: Primitive tokens → Semantic design tokens (`--rd-*`) → Component tokens.
|
|
16
|
+
- **4px Baseline Grid**: Linear spacing scale (4px to 64px) calibrated for consistent visual rhythm.
|
|
17
|
+
- **Inter Typography Scale**: Pre-calculated responsive font sizes, line heights, letter spacings, and font weights.
|
|
18
|
+
- **Micro-Motion Curves**: Consistent durations and cubic-bezier easing tokens for fluid transitions.
|
|
19
|
+
- **TypeScript-First**: Strictly typed scale constants and string literal types.
|
|
20
|
+
|
|
21
|
+
---
|
|
22
|
+
|
|
23
|
+
## 2. Installation
|
|
24
|
+
|
|
25
|
+
```bash
|
|
26
|
+
# Using pnpm (recommended)
|
|
27
|
+
pnpm add @ripperdoc-chrome77/tokens
|
|
28
|
+
|
|
29
|
+
# Using npm
|
|
30
|
+
npm install @ripperdoc-chrome77/tokens
|
|
31
|
+
|
|
32
|
+
# Using yarn
|
|
33
|
+
yarn add @ripperdoc-chrome77/tokens
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
---
|
|
37
|
+
|
|
38
|
+
## 3. Usage
|
|
39
|
+
|
|
40
|
+
### A. Foundational CSS Custom Properties
|
|
41
|
+
Import the foundation styles into your global stylesheet, Storybook preview, or Next.js `_app.tsx` / `layout.tsx`:
|
|
42
|
+
|
|
43
|
+
```css
|
|
44
|
+
/* In your global.css or app entry point */
|
|
45
|
+
@import '@ripperdoc-chrome77/tokens/foundations.css';
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
Or via JavaScript / TypeScript:
|
|
49
|
+
|
|
50
|
+
```ts
|
|
51
|
+
import '@ripperdoc-chrome77/tokens/foundations.css';
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
This injects standard CSS variables on `:root`:
|
|
55
|
+
|
|
56
|
+
```css
|
|
57
|
+
.my-card {
|
|
58
|
+
padding: var(--rd-space-4); /* 16px */
|
|
59
|
+
border-radius: var(--rd-radius-md); /* 12px */
|
|
60
|
+
transition: all var(--rd-motion-normal) var(--rd-ease-standard);
|
|
61
|
+
}
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
### B. JavaScript / TypeScript Scale Constants
|
|
65
|
+
You can also import type-safe token values directly in code:
|
|
66
|
+
|
|
67
|
+
```ts
|
|
68
|
+
import { spacing, radii, motion, typography } from '@ripperdoc-chrome77/tokens';
|
|
69
|
+
import type { SpacingScale, RadiiScale, TypographyRole } from '@ripperdoc-chrome77/tokens';
|
|
70
|
+
|
|
71
|
+
// Access spacing scale values
|
|
72
|
+
console.log(spacing[4]); // "16px"
|
|
73
|
+
console.log(radii.md); // "12px"
|
|
74
|
+
console.log(motion.fast); // "150ms"
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
---
|
|
78
|
+
|
|
79
|
+
## 4. Token Reference
|
|
80
|
+
|
|
81
|
+
### Spacing Scale (4px Baseline)
|
|
82
|
+
| Key | Value | CSS Variable |
|
|
83
|
+
| :--- | :--- | :--- |
|
|
84
|
+
| `1` | `4px` | `--rd-space-1` |
|
|
85
|
+
| `2` | `8px` | `--rd-space-2` |
|
|
86
|
+
| `3` | `12px` | `--rd-space-3` |
|
|
87
|
+
| `4` | `16px` | `--rd-space-4` |
|
|
88
|
+
| `5` | `20px` | `--rd-space-5` |
|
|
89
|
+
| `6` | `24px` | `--rd-space-6` |
|
|
90
|
+
| `8` | `32px` | `--rd-space-8` |
|
|
91
|
+
| `10` | `40px` | `--rd-space-10` |
|
|
92
|
+
| `12` | `48px` | `--rd-space-12` |
|
|
93
|
+
| `16` | `64px` | `--rd-space-16` |
|
|
94
|
+
|
|
95
|
+
### Corner Radii
|
|
96
|
+
| Key | Value | CSS Variable |
|
|
97
|
+
| :--- | :--- | :--- |
|
|
98
|
+
| `sm` | `4px` | `--rd-radius-sm` |
|
|
99
|
+
| `default` | `8px` | `--rd-radius-md` |
|
|
100
|
+
| `md` | `12px` | `--rd-radius-md` |
|
|
101
|
+
| `lg` | `16px` | `--rd-radius-lg` |
|
|
102
|
+
| `xl` | `24px` | `--rd-radius-xl` |
|
|
103
|
+
| `full` | `9999px` | `--rd-radius-full` |
|
|
104
|
+
|
|
105
|
+
### Motion & Transitions
|
|
106
|
+
| Key | Value | CSS Variable |
|
|
107
|
+
| :--- | :--- | :--- |
|
|
108
|
+
| `fast` | `150ms` | `--rd-motion-fast` |
|
|
109
|
+
| `normal` | `250ms` | `--rd-motion-normal` |
|
|
110
|
+
| `slow` | `400ms` | `--rd-motion-slow` |
|
|
111
|
+
| `easeStandard` | `cubic-bezier(0.4, 0, 0.2, 1)` | `--rd-ease-standard` |
|
|
112
|
+
| `easeDecelerate` | `cubic-bezier(0, 0, 0.2, 1)` | `--rd-ease-decelerate` |
|
|
113
|
+
| `easeAccelerate` | `cubic-bezier(0.4, 0, 1, 1)` | `--rd-ease-accelerate` |
|
|
114
|
+
|
|
115
|
+
---
|
|
116
|
+
|
|
117
|
+
## 5. Architectural Invariants
|
|
118
|
+
|
|
119
|
+
1. **One-Way Dependency**: Ripperdoc never imports MFE code or business logic.
|
|
120
|
+
2. **Strict Prefixing**: Every CSS variable defined by Ripperdoc begins with `--rd-`.
|
|
121
|
+
3. **Theme Independence**: Tokens establish the contract; themes map color palettes into this contract.
|
|
122
|
+
|
|
123
|
+
---
|
|
124
|
+
|
|
125
|
+
## 6. License
|
|
126
|
+
|
|
127
|
+
MIT © Ripperdoc Team
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ripperdoc-chrome77/tokens",
|
|
3
|
-
"version": "1.0.0
|
|
3
|
+
"version": "1.0.0",
|
|
4
4
|
"description": "Design tokens and shared foundations for Ripperdoc design system",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -27,4 +27,4 @@
|
|
|
27
27
|
"build": "tsup && tsc --emitDeclarationOnly",
|
|
28
28
|
"typecheck": "tsc --noEmit"
|
|
29
29
|
}
|
|
30
|
-
}
|
|
30
|
+
}
|