@renge-ui/tailwind 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 +237 -0
- package/dist/index.d.mts +109 -0
- package/dist/index.d.ts +109 -0
- package/dist/index.js +133 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +112 -0
- package/dist/index.mjs.map +1 -0
- package/package.json +44 -0
package/README.md
ADDED
|
@@ -0,0 +1,237 @@
|
|
|
1
|
+
# @renge-ui/tailwind
|
|
2
|
+
|
|
3
|
+
Tailwind CSS v3 preset for the Renge design system. Maps all `--renge-*` CSS custom properties to utility classes. Zero hardcoded values — every utility references a CSS variable.
|
|
4
|
+
|
|
5
|
+
Requires `@renge-ui/tokens` (or equivalent) to inject the CSS custom properties at runtime.
|
|
6
|
+
|
|
7
|
+
## Install
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
pnpm add @renge-ui/tailwind
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Setup
|
|
14
|
+
|
|
15
|
+
```ts
|
|
16
|
+
// tailwind.config.ts
|
|
17
|
+
import rengePreset from '@renge-ui/tailwind';
|
|
18
|
+
import type { Config } from 'tailwindcss';
|
|
19
|
+
|
|
20
|
+
export default {
|
|
21
|
+
presets: [rengePreset],
|
|
22
|
+
content: ['./src/**/*.{ts,tsx}'],
|
|
23
|
+
} satisfies Config;
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
Then inject the Renge CSS variables via `@renge-ui/tokens`:
|
|
27
|
+
|
|
28
|
+
```ts
|
|
29
|
+
import { createRengeTheme } from '@renge-ui/tokens';
|
|
30
|
+
|
|
31
|
+
const { css } = createRengeTheme({ profile: 'ocean', mode: 'light' });
|
|
32
|
+
const style = document.createElement('style');
|
|
33
|
+
style.textContent = css;
|
|
34
|
+
document.head.appendChild(style);
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
Or in a Next.js / CSS-in-JS context, use `createRengeTheme().css` in your global stylesheet.
|
|
38
|
+
|
|
39
|
+
---
|
|
40
|
+
|
|
41
|
+
## Generated Utility Classes
|
|
42
|
+
|
|
43
|
+
All utilities are prefixed with `renge-` and reference CSS variables — values update automatically when the active token profile changes.
|
|
44
|
+
|
|
45
|
+
### Spacing
|
|
46
|
+
|
|
47
|
+
Maps `--renge-space-{0–10}` (Fibonacci × base unit).
|
|
48
|
+
|
|
49
|
+
```html
|
|
50
|
+
<div class="p-renge-4 m-renge-2 gap-renge-3">
|
|
51
|
+
<div class="space-x-renge-5 px-renge-6">
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
| Class suffix | CSS variable |
|
|
55
|
+
|---|---|
|
|
56
|
+
| `renge-0` | `var(--renge-space-0)` |
|
|
57
|
+
| `renge-1` | `var(--renge-space-1)` |
|
|
58
|
+
| `renge-2` | `var(--renge-space-2)` |
|
|
59
|
+
| `renge-3` | `var(--renge-space-3)` |
|
|
60
|
+
| `renge-4` | `var(--renge-space-4)` |
|
|
61
|
+
| `renge-5` | `var(--renge-space-5)` |
|
|
62
|
+
| `renge-6` | `var(--renge-space-6)` |
|
|
63
|
+
| `renge-7` | `var(--renge-space-7)` |
|
|
64
|
+
| `renge-8` | `var(--renge-space-8)` |
|
|
65
|
+
| `renge-9` | `var(--renge-space-9)` |
|
|
66
|
+
| `renge-10` | `var(--renge-space-10)` |
|
|
67
|
+
|
|
68
|
+
### Font Size
|
|
69
|
+
|
|
70
|
+
Maps `--renge-font-size-{xs–4xl}` (φ-based scale, 8 steps).
|
|
71
|
+
|
|
72
|
+
```html
|
|
73
|
+
<h1 class="text-renge-4xl">Display heading</h1>
|
|
74
|
+
<p class="text-renge-base">Body copy</p>
|
|
75
|
+
<span class="text-renge-xs">Caption</span>
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
| Class | CSS variable |
|
|
79
|
+
|---|---|
|
|
80
|
+
| `text-renge-xs` | `var(--renge-font-size-xs)` |
|
|
81
|
+
| `text-renge-sm` | `var(--renge-font-size-sm)` |
|
|
82
|
+
| `text-renge-base` | `var(--renge-font-size-base)` |
|
|
83
|
+
| `text-renge-lg` | `var(--renge-font-size-lg)` |
|
|
84
|
+
| `text-renge-xl` | `var(--renge-font-size-xl)` |
|
|
85
|
+
| `text-renge-2xl` | `var(--renge-font-size-2xl)` |
|
|
86
|
+
| `text-renge-3xl` | `var(--renge-font-size-3xl)` |
|
|
87
|
+
| `text-renge-4xl` | `var(--renge-font-size-4xl)` |
|
|
88
|
+
|
|
89
|
+
### Line Height
|
|
90
|
+
|
|
91
|
+
Maps `--renge-line-height-{xs–4xl}` (φ-derived: body 1.618, heading 1.382, display 1.236).
|
|
92
|
+
|
|
93
|
+
```html
|
|
94
|
+
<p class="leading-renge-base">Body — φ = 1.618</p>
|
|
95
|
+
<h2 class="leading-renge-xl">Heading — 1 + 1/φ² = 1.382</h2>
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
Same 8 steps as font size (`renge-xs` through `renge-4xl`).
|
|
99
|
+
|
|
100
|
+
### Border Radius
|
|
101
|
+
|
|
102
|
+
Maps `--renge-radius-{none|1–5|full}` (Fibonacci × base unit).
|
|
103
|
+
|
|
104
|
+
```html
|
|
105
|
+
<button class="rounded-renge-2">Default button</button>
|
|
106
|
+
<div class="rounded-renge-full">Pill shape</div>
|
|
107
|
+
<div class="rounded-renge-none">Square</div>
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
| Class | CSS variable |
|
|
111
|
+
|---|---|
|
|
112
|
+
| `rounded-renge-none` | `var(--renge-radius-none)` |
|
|
113
|
+
| `rounded-renge-1` | `var(--renge-radius-1)` |
|
|
114
|
+
| `rounded-renge-2` | `var(--renge-radius-2)` |
|
|
115
|
+
| `rounded-renge-3` | `var(--renge-radius-3)` |
|
|
116
|
+
| `rounded-renge-4` | `var(--renge-radius-4)` |
|
|
117
|
+
| `rounded-renge-5` | `var(--renge-radius-5)` |
|
|
118
|
+
| `rounded-renge-full` | `var(--renge-radius-full)` |
|
|
119
|
+
|
|
120
|
+
### Transition Duration
|
|
121
|
+
|
|
122
|
+
Maps `--renge-duration-{0–10}` (Fibonacci × 100ms: 0ms, 100ms, 200ms, 300ms, 500ms, 800ms…).
|
|
123
|
+
|
|
124
|
+
```html
|
|
125
|
+
<div class="duration-renge-4 transition-all">500ms — natural acceleration</div>
|
|
126
|
+
<div class="duration-renge-3 transition-opacity">300ms</div>
|
|
127
|
+
```
|
|
128
|
+
|
|
129
|
+
| Class | CSS variable | Default value |
|
|
130
|
+
|---|---|---|
|
|
131
|
+
| `duration-renge-0` | `var(--renge-duration-0)` | 0ms |
|
|
132
|
+
| `duration-renge-1` | `var(--renge-duration-1)` | 100ms |
|
|
133
|
+
| `duration-renge-2` | `var(--renge-duration-2)` | 200ms |
|
|
134
|
+
| `duration-renge-3` | `var(--renge-duration-3)` | 300ms |
|
|
135
|
+
| `duration-renge-4` | `var(--renge-duration-4)` | 500ms |
|
|
136
|
+
| `duration-renge-5` | `var(--renge-duration-5)` | 800ms |
|
|
137
|
+
| `duration-renge-6` | `var(--renge-duration-6)` | 1300ms |
|
|
138
|
+
| `duration-renge-7` | `var(--renge-duration-7)` | 2100ms |
|
|
139
|
+
| `duration-renge-8` | `var(--renge-duration-8)` | 3400ms |
|
|
140
|
+
| `duration-renge-9` | `var(--renge-duration-9)` | 5500ms |
|
|
141
|
+
| `duration-renge-10` | `var(--renge-duration-10)` | 8900ms |
|
|
142
|
+
|
|
143
|
+
### Transition Easing
|
|
144
|
+
|
|
145
|
+
Maps `--renge-easing-{curve}` (all control points derived from φ: A = 1/φ² ≈ 0.382, B = 1/φ ≈ 0.618).
|
|
146
|
+
|
|
147
|
+
```html
|
|
148
|
+
<div class="ease-renge-spring duration-renge-4 transition-transform">Spring</div>
|
|
149
|
+
<div class="ease-renge-ease-out duration-renge-3 transition-opacity">Ease out</div>
|
|
150
|
+
```
|
|
151
|
+
|
|
152
|
+
| Class | CSS variable | Curve |
|
|
153
|
+
|---|---|---|
|
|
154
|
+
| `ease-renge-linear` | `var(--renge-easing-linear)` | `linear` |
|
|
155
|
+
| `ease-renge-ease-in` | `var(--renge-easing-ease-in)` | `cubic-bezier(0.382, 0, 1, 0.618)` |
|
|
156
|
+
| `ease-renge-ease-out` | `var(--renge-easing-ease-out)` | `cubic-bezier(0.382, 1, 0.618, 1)` |
|
|
157
|
+
| `ease-renge-ease-in-out` | `var(--renge-easing-ease-in-out)` | `cubic-bezier(0.382, 0, 0.618, 1)` |
|
|
158
|
+
| `ease-renge-spring` | `var(--renge-easing-spring)` | `cubic-bezier(0.382, 0.618, 0.618, 1.382)` |
|
|
159
|
+
|
|
160
|
+
### Colors
|
|
161
|
+
|
|
162
|
+
Maps `--renge-color-{token}` (22 semantic tokens — profile- and mode-aware via CSS variables).
|
|
163
|
+
|
|
164
|
+
```html
|
|
165
|
+
<div class="bg-renge-bg text-renge-fg border border-renge-border">
|
|
166
|
+
<button class="bg-renge-accent text-renge-fg-inverse hover:bg-renge-accent-hover">
|
|
167
|
+
<p class="text-renge-danger">Error message</p>
|
|
168
|
+
```
|
|
169
|
+
|
|
170
|
+
#### Backgrounds
|
|
171
|
+
| Class | CSS variable |
|
|
172
|
+
|---|---|
|
|
173
|
+
| `bg-renge-bg` | `var(--renge-color-bg)` |
|
|
174
|
+
| `bg-renge-bg-subtle` | `var(--renge-color-bg-subtle)` |
|
|
175
|
+
| `bg-renge-bg-muted` | `var(--renge-color-bg-muted)` |
|
|
176
|
+
| `bg-renge-bg-inverse` | `var(--renge-color-bg-inverse)` |
|
|
177
|
+
|
|
178
|
+
#### Foregrounds
|
|
179
|
+
| Class | CSS variable |
|
|
180
|
+
|---|---|
|
|
181
|
+
| `text-renge-fg` | `var(--renge-color-fg)` |
|
|
182
|
+
| `text-renge-fg-subtle` | `var(--renge-color-fg-subtle)` |
|
|
183
|
+
| `text-renge-fg-muted` | `var(--renge-color-fg-muted)` |
|
|
184
|
+
| `text-renge-fg-inverse` | `var(--renge-color-fg-inverse)` |
|
|
185
|
+
|
|
186
|
+
#### Borders
|
|
187
|
+
| Class | CSS variable |
|
|
188
|
+
|---|---|
|
|
189
|
+
| `border-renge-border` | `var(--renge-color-border)` |
|
|
190
|
+
| `border-renge-border-subtle` | `var(--renge-color-border-subtle)` |
|
|
191
|
+
| `border-renge-border-focus` | `var(--renge-color-border-focus)` |
|
|
192
|
+
|
|
193
|
+
#### Accent
|
|
194
|
+
| Class | CSS variable |
|
|
195
|
+
|---|---|
|
|
196
|
+
| `bg-renge-accent` | `var(--renge-color-accent)` |
|
|
197
|
+
| `bg-renge-accent-hover` | `var(--renge-color-accent-hover)` |
|
|
198
|
+
| `bg-renge-accent-subtle` | `var(--renge-color-accent-subtle)` |
|
|
199
|
+
|
|
200
|
+
#### Semantic States
|
|
201
|
+
| Class | CSS variable |
|
|
202
|
+
|---|---|
|
|
203
|
+
| `text-renge-success` | `var(--renge-color-success)` |
|
|
204
|
+
| `bg-renge-success-subtle` | `var(--renge-color-success-subtle)` |
|
|
205
|
+
| `text-renge-warning` | `var(--renge-color-warning)` |
|
|
206
|
+
| `bg-renge-warning-subtle` | `var(--renge-color-warning-subtle)` |
|
|
207
|
+
| `text-renge-danger` | `var(--renge-color-danger)` |
|
|
208
|
+
| `bg-renge-danger-subtle` | `var(--renge-color-danger-subtle)` |
|
|
209
|
+
| `text-renge-info` | `var(--renge-color-info)` |
|
|
210
|
+
| `bg-renge-info-subtle` | `var(--renge-color-info-subtle)` |
|
|
211
|
+
|
|
212
|
+
> Color utilities work with any Tailwind color modifier: `bg-renge-accent`, `text-renge-fg`, `border-renge-border`, `ring-renge-border-focus`, `fill-renge-accent`, `stroke-renge-accent`, etc.
|
|
213
|
+
|
|
214
|
+
---
|
|
215
|
+
|
|
216
|
+
## Profile Switching
|
|
217
|
+
|
|
218
|
+
Because every utility references a CSS variable, switching color profiles is a single class swap — no Tailwind config change needed.
|
|
219
|
+
|
|
220
|
+
```ts
|
|
221
|
+
// Switch to earth profile, dark mode
|
|
222
|
+
const { css } = createRengeTheme({ profile: 'earth', mode: 'dark' });
|
|
223
|
+
document.documentElement.style.cssText = css; // or re-inject the stylesheet
|
|
224
|
+
```
|
|
225
|
+
|
|
226
|
+
Available profiles: `ocean` (default), `earth`, `twilight`, `fire`, `void`, `leaf`.
|
|
227
|
+
|
|
228
|
+
---
|
|
229
|
+
|
|
230
|
+
## Compatibility
|
|
231
|
+
|
|
232
|
+
- **Tailwind CSS v3** — fully supported via `presets` array.
|
|
233
|
+
- **Tailwind CSS v4** — uses a different CSS-based config model (`@theme`). This preset is not applicable for v4; use `@renge-ui/tokens` CSS output directly with `@theme` instead.
|
|
234
|
+
|
|
235
|
+
---
|
|
236
|
+
|
|
237
|
+
*Part of the Renge design system. Built by Soka Labs. Proportion as a first principle.*
|
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @renge-ui/tailwind
|
|
3
|
+
*
|
|
4
|
+
* Tailwind CSS v3 preset that maps all --renge-* CSS custom properties to
|
|
5
|
+
* Tailwind utility classes. All values reference CSS variables — no
|
|
6
|
+
* hardcoded values. Requires @renge-ui/tokens (or equivalent) to inject
|
|
7
|
+
* the CSS custom properties at runtime.
|
|
8
|
+
*
|
|
9
|
+
* Usage:
|
|
10
|
+
* // tailwind.config.ts
|
|
11
|
+
* import rengePreset from '@renge-ui/tailwind';
|
|
12
|
+
* export default { presets: [rengePreset] };
|
|
13
|
+
*/
|
|
14
|
+
declare const rengePreset: {
|
|
15
|
+
theme: {
|
|
16
|
+
extend: {
|
|
17
|
+
spacing: {
|
|
18
|
+
"renge-0": string;
|
|
19
|
+
"renge-1": string;
|
|
20
|
+
"renge-2": string;
|
|
21
|
+
"renge-3": string;
|
|
22
|
+
"renge-4": string;
|
|
23
|
+
"renge-5": string;
|
|
24
|
+
"renge-6": string;
|
|
25
|
+
"renge-7": string;
|
|
26
|
+
"renge-8": string;
|
|
27
|
+
"renge-9": string;
|
|
28
|
+
"renge-10": string;
|
|
29
|
+
};
|
|
30
|
+
fontSize: {
|
|
31
|
+
"renge-xs": string;
|
|
32
|
+
"renge-sm": string;
|
|
33
|
+
"renge-base": string;
|
|
34
|
+
"renge-lg": string;
|
|
35
|
+
"renge-xl": string;
|
|
36
|
+
"renge-2xl": string;
|
|
37
|
+
"renge-3xl": string;
|
|
38
|
+
"renge-4xl": string;
|
|
39
|
+
};
|
|
40
|
+
lineHeight: {
|
|
41
|
+
"renge-xs": string;
|
|
42
|
+
"renge-sm": string;
|
|
43
|
+
"renge-base": string;
|
|
44
|
+
"renge-lg": string;
|
|
45
|
+
"renge-xl": string;
|
|
46
|
+
"renge-2xl": string;
|
|
47
|
+
"renge-3xl": string;
|
|
48
|
+
"renge-4xl": string;
|
|
49
|
+
};
|
|
50
|
+
borderRadius: {
|
|
51
|
+
"renge-none": string;
|
|
52
|
+
"renge-1": string;
|
|
53
|
+
"renge-2": string;
|
|
54
|
+
"renge-3": string;
|
|
55
|
+
"renge-4": string;
|
|
56
|
+
"renge-5": string;
|
|
57
|
+
"renge-full": string;
|
|
58
|
+
};
|
|
59
|
+
transitionDuration: {
|
|
60
|
+
"renge-0": string;
|
|
61
|
+
"renge-1": string;
|
|
62
|
+
"renge-2": string;
|
|
63
|
+
"renge-3": string;
|
|
64
|
+
"renge-4": string;
|
|
65
|
+
"renge-5": string;
|
|
66
|
+
"renge-6": string;
|
|
67
|
+
"renge-7": string;
|
|
68
|
+
"renge-8": string;
|
|
69
|
+
"renge-9": string;
|
|
70
|
+
"renge-10": string;
|
|
71
|
+
};
|
|
72
|
+
transitionTimingFunction: {
|
|
73
|
+
"renge-linear": string;
|
|
74
|
+
"renge-ease-in": string;
|
|
75
|
+
"renge-ease-out": string;
|
|
76
|
+
"renge-ease-in-out": string;
|
|
77
|
+
"renge-spring": string;
|
|
78
|
+
};
|
|
79
|
+
colors: {
|
|
80
|
+
renge: {
|
|
81
|
+
bg: string;
|
|
82
|
+
"bg-subtle": string;
|
|
83
|
+
"bg-muted": string;
|
|
84
|
+
"bg-inverse": string;
|
|
85
|
+
fg: string;
|
|
86
|
+
"fg-subtle": string;
|
|
87
|
+
"fg-muted": string;
|
|
88
|
+
"fg-inverse": string;
|
|
89
|
+
border: string;
|
|
90
|
+
"border-subtle": string;
|
|
91
|
+
"border-focus": string;
|
|
92
|
+
accent: string;
|
|
93
|
+
"accent-hover": string;
|
|
94
|
+
"accent-subtle": string;
|
|
95
|
+
success: string;
|
|
96
|
+
"success-subtle": string;
|
|
97
|
+
warning: string;
|
|
98
|
+
"warning-subtle": string;
|
|
99
|
+
danger: string;
|
|
100
|
+
"danger-subtle": string;
|
|
101
|
+
info: string;
|
|
102
|
+
"info-subtle": string;
|
|
103
|
+
};
|
|
104
|
+
};
|
|
105
|
+
};
|
|
106
|
+
};
|
|
107
|
+
};
|
|
108
|
+
|
|
109
|
+
export { rengePreset as default };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @renge-ui/tailwind
|
|
3
|
+
*
|
|
4
|
+
* Tailwind CSS v3 preset that maps all --renge-* CSS custom properties to
|
|
5
|
+
* Tailwind utility classes. All values reference CSS variables — no
|
|
6
|
+
* hardcoded values. Requires @renge-ui/tokens (or equivalent) to inject
|
|
7
|
+
* the CSS custom properties at runtime.
|
|
8
|
+
*
|
|
9
|
+
* Usage:
|
|
10
|
+
* // tailwind.config.ts
|
|
11
|
+
* import rengePreset from '@renge-ui/tailwind';
|
|
12
|
+
* export default { presets: [rengePreset] };
|
|
13
|
+
*/
|
|
14
|
+
declare const rengePreset: {
|
|
15
|
+
theme: {
|
|
16
|
+
extend: {
|
|
17
|
+
spacing: {
|
|
18
|
+
"renge-0": string;
|
|
19
|
+
"renge-1": string;
|
|
20
|
+
"renge-2": string;
|
|
21
|
+
"renge-3": string;
|
|
22
|
+
"renge-4": string;
|
|
23
|
+
"renge-5": string;
|
|
24
|
+
"renge-6": string;
|
|
25
|
+
"renge-7": string;
|
|
26
|
+
"renge-8": string;
|
|
27
|
+
"renge-9": string;
|
|
28
|
+
"renge-10": string;
|
|
29
|
+
};
|
|
30
|
+
fontSize: {
|
|
31
|
+
"renge-xs": string;
|
|
32
|
+
"renge-sm": string;
|
|
33
|
+
"renge-base": string;
|
|
34
|
+
"renge-lg": string;
|
|
35
|
+
"renge-xl": string;
|
|
36
|
+
"renge-2xl": string;
|
|
37
|
+
"renge-3xl": string;
|
|
38
|
+
"renge-4xl": string;
|
|
39
|
+
};
|
|
40
|
+
lineHeight: {
|
|
41
|
+
"renge-xs": string;
|
|
42
|
+
"renge-sm": string;
|
|
43
|
+
"renge-base": string;
|
|
44
|
+
"renge-lg": string;
|
|
45
|
+
"renge-xl": string;
|
|
46
|
+
"renge-2xl": string;
|
|
47
|
+
"renge-3xl": string;
|
|
48
|
+
"renge-4xl": string;
|
|
49
|
+
};
|
|
50
|
+
borderRadius: {
|
|
51
|
+
"renge-none": string;
|
|
52
|
+
"renge-1": string;
|
|
53
|
+
"renge-2": string;
|
|
54
|
+
"renge-3": string;
|
|
55
|
+
"renge-4": string;
|
|
56
|
+
"renge-5": string;
|
|
57
|
+
"renge-full": string;
|
|
58
|
+
};
|
|
59
|
+
transitionDuration: {
|
|
60
|
+
"renge-0": string;
|
|
61
|
+
"renge-1": string;
|
|
62
|
+
"renge-2": string;
|
|
63
|
+
"renge-3": string;
|
|
64
|
+
"renge-4": string;
|
|
65
|
+
"renge-5": string;
|
|
66
|
+
"renge-6": string;
|
|
67
|
+
"renge-7": string;
|
|
68
|
+
"renge-8": string;
|
|
69
|
+
"renge-9": string;
|
|
70
|
+
"renge-10": string;
|
|
71
|
+
};
|
|
72
|
+
transitionTimingFunction: {
|
|
73
|
+
"renge-linear": string;
|
|
74
|
+
"renge-ease-in": string;
|
|
75
|
+
"renge-ease-out": string;
|
|
76
|
+
"renge-ease-in-out": string;
|
|
77
|
+
"renge-spring": string;
|
|
78
|
+
};
|
|
79
|
+
colors: {
|
|
80
|
+
renge: {
|
|
81
|
+
bg: string;
|
|
82
|
+
"bg-subtle": string;
|
|
83
|
+
"bg-muted": string;
|
|
84
|
+
"bg-inverse": string;
|
|
85
|
+
fg: string;
|
|
86
|
+
"fg-subtle": string;
|
|
87
|
+
"fg-muted": string;
|
|
88
|
+
"fg-inverse": string;
|
|
89
|
+
border: string;
|
|
90
|
+
"border-subtle": string;
|
|
91
|
+
"border-focus": string;
|
|
92
|
+
accent: string;
|
|
93
|
+
"accent-hover": string;
|
|
94
|
+
"accent-subtle": string;
|
|
95
|
+
success: string;
|
|
96
|
+
"success-subtle": string;
|
|
97
|
+
warning: string;
|
|
98
|
+
"warning-subtle": string;
|
|
99
|
+
danger: string;
|
|
100
|
+
"danger-subtle": string;
|
|
101
|
+
info: string;
|
|
102
|
+
"info-subtle": string;
|
|
103
|
+
};
|
|
104
|
+
};
|
|
105
|
+
};
|
|
106
|
+
};
|
|
107
|
+
};
|
|
108
|
+
|
|
109
|
+
export { rengePreset as default };
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,133 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
|
|
20
|
+
// src/index.ts
|
|
21
|
+
var index_exports = {};
|
|
22
|
+
__export(index_exports, {
|
|
23
|
+
default: () => index_default
|
|
24
|
+
});
|
|
25
|
+
module.exports = __toCommonJS(index_exports);
|
|
26
|
+
var spacing = {
|
|
27
|
+
"renge-0": "var(--renge-space-0)",
|
|
28
|
+
"renge-1": "var(--renge-space-1)",
|
|
29
|
+
"renge-2": "var(--renge-space-2)",
|
|
30
|
+
"renge-3": "var(--renge-space-3)",
|
|
31
|
+
"renge-4": "var(--renge-space-4)",
|
|
32
|
+
"renge-5": "var(--renge-space-5)",
|
|
33
|
+
"renge-6": "var(--renge-space-6)",
|
|
34
|
+
"renge-7": "var(--renge-space-7)",
|
|
35
|
+
"renge-8": "var(--renge-space-8)",
|
|
36
|
+
"renge-9": "var(--renge-space-9)",
|
|
37
|
+
"renge-10": "var(--renge-space-10)"
|
|
38
|
+
};
|
|
39
|
+
var fontSize = {
|
|
40
|
+
"renge-xs": "var(--renge-font-size-xs)",
|
|
41
|
+
"renge-sm": "var(--renge-font-size-sm)",
|
|
42
|
+
"renge-base": "var(--renge-font-size-base)",
|
|
43
|
+
"renge-lg": "var(--renge-font-size-lg)",
|
|
44
|
+
"renge-xl": "var(--renge-font-size-xl)",
|
|
45
|
+
"renge-2xl": "var(--renge-font-size-2xl)",
|
|
46
|
+
"renge-3xl": "var(--renge-font-size-3xl)",
|
|
47
|
+
"renge-4xl": "var(--renge-font-size-4xl)"
|
|
48
|
+
};
|
|
49
|
+
var lineHeight = {
|
|
50
|
+
"renge-xs": "var(--renge-line-height-xs)",
|
|
51
|
+
"renge-sm": "var(--renge-line-height-sm)",
|
|
52
|
+
"renge-base": "var(--renge-line-height-base)",
|
|
53
|
+
"renge-lg": "var(--renge-line-height-lg)",
|
|
54
|
+
"renge-xl": "var(--renge-line-height-xl)",
|
|
55
|
+
"renge-2xl": "var(--renge-line-height-2xl)",
|
|
56
|
+
"renge-3xl": "var(--renge-line-height-3xl)",
|
|
57
|
+
"renge-4xl": "var(--renge-line-height-4xl)"
|
|
58
|
+
};
|
|
59
|
+
var borderRadius = {
|
|
60
|
+
"renge-none": "var(--renge-radius-none)",
|
|
61
|
+
"renge-1": "var(--renge-radius-1)",
|
|
62
|
+
"renge-2": "var(--renge-radius-2)",
|
|
63
|
+
"renge-3": "var(--renge-radius-3)",
|
|
64
|
+
"renge-4": "var(--renge-radius-4)",
|
|
65
|
+
"renge-5": "var(--renge-radius-5)",
|
|
66
|
+
"renge-full": "var(--renge-radius-full)"
|
|
67
|
+
};
|
|
68
|
+
var transitionDuration = {
|
|
69
|
+
"renge-0": "var(--renge-duration-0)",
|
|
70
|
+
"renge-1": "var(--renge-duration-1)",
|
|
71
|
+
"renge-2": "var(--renge-duration-2)",
|
|
72
|
+
"renge-3": "var(--renge-duration-3)",
|
|
73
|
+
"renge-4": "var(--renge-duration-4)",
|
|
74
|
+
"renge-5": "var(--renge-duration-5)",
|
|
75
|
+
"renge-6": "var(--renge-duration-6)",
|
|
76
|
+
"renge-7": "var(--renge-duration-7)",
|
|
77
|
+
"renge-8": "var(--renge-duration-8)",
|
|
78
|
+
"renge-9": "var(--renge-duration-9)",
|
|
79
|
+
"renge-10": "var(--renge-duration-10)"
|
|
80
|
+
};
|
|
81
|
+
var transitionTimingFunction = {
|
|
82
|
+
"renge-linear": "var(--renge-easing-linear)",
|
|
83
|
+
"renge-ease-in": "var(--renge-easing-ease-in)",
|
|
84
|
+
"renge-ease-out": "var(--renge-easing-ease-out)",
|
|
85
|
+
"renge-ease-in-out": "var(--renge-easing-ease-in-out)",
|
|
86
|
+
"renge-spring": "var(--renge-easing-spring)"
|
|
87
|
+
};
|
|
88
|
+
var colors = {
|
|
89
|
+
renge: {
|
|
90
|
+
// Backgrounds
|
|
91
|
+
"bg": "var(--renge-color-bg)",
|
|
92
|
+
"bg-subtle": "var(--renge-color-bg-subtle)",
|
|
93
|
+
"bg-muted": "var(--renge-color-bg-muted)",
|
|
94
|
+
"bg-inverse": "var(--renge-color-bg-inverse)",
|
|
95
|
+
// Foregrounds
|
|
96
|
+
"fg": "var(--renge-color-fg)",
|
|
97
|
+
"fg-subtle": "var(--renge-color-fg-subtle)",
|
|
98
|
+
"fg-muted": "var(--renge-color-fg-muted)",
|
|
99
|
+
"fg-inverse": "var(--renge-color-fg-inverse)",
|
|
100
|
+
// Borders
|
|
101
|
+
"border": "var(--renge-color-border)",
|
|
102
|
+
"border-subtle": "var(--renge-color-border-subtle)",
|
|
103
|
+
"border-focus": "var(--renge-color-border-focus)",
|
|
104
|
+
// Accent
|
|
105
|
+
"accent": "var(--renge-color-accent)",
|
|
106
|
+
"accent-hover": "var(--renge-color-accent-hover)",
|
|
107
|
+
"accent-subtle": "var(--renge-color-accent-subtle)",
|
|
108
|
+
// Semantic states
|
|
109
|
+
"success": "var(--renge-color-success)",
|
|
110
|
+
"success-subtle": "var(--renge-color-success-subtle)",
|
|
111
|
+
"warning": "var(--renge-color-warning)",
|
|
112
|
+
"warning-subtle": "var(--renge-color-warning-subtle)",
|
|
113
|
+
"danger": "var(--renge-color-danger)",
|
|
114
|
+
"danger-subtle": "var(--renge-color-danger-subtle)",
|
|
115
|
+
"info": "var(--renge-color-info)",
|
|
116
|
+
"info-subtle": "var(--renge-color-info-subtle)"
|
|
117
|
+
}
|
|
118
|
+
};
|
|
119
|
+
var rengePreset = {
|
|
120
|
+
theme: {
|
|
121
|
+
extend: {
|
|
122
|
+
spacing,
|
|
123
|
+
fontSize,
|
|
124
|
+
lineHeight,
|
|
125
|
+
borderRadius,
|
|
126
|
+
transitionDuration,
|
|
127
|
+
transitionTimingFunction,
|
|
128
|
+
colors
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
};
|
|
132
|
+
var index_default = rengePreset;
|
|
133
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["/**\n * @renge-ui/tailwind\n *\n * Tailwind CSS v3 preset that maps all --renge-* CSS custom properties to\n * Tailwind utility classes. All values reference CSS variables — no\n * hardcoded values. Requires @renge-ui/tokens (or equivalent) to inject\n * the CSS custom properties at runtime.\n *\n * Usage:\n * // tailwind.config.ts\n * import rengePreset from '@renge-ui/tailwind';\n * export default { presets: [rengePreset] };\n */\n\n// ─── Spacing ──────────────────────────────────────────────────────────────────\n// --renge-space-{0-10} → space-renge-*, p-renge-*, m-renge-*, gap-renge-*, etc.\n\nconst spacing = {\n \"renge-0\": \"var(--renge-space-0)\",\n \"renge-1\": \"var(--renge-space-1)\",\n \"renge-2\": \"var(--renge-space-2)\",\n \"renge-3\": \"var(--renge-space-3)\",\n \"renge-4\": \"var(--renge-space-4)\",\n \"renge-5\": \"var(--renge-space-5)\",\n \"renge-6\": \"var(--renge-space-6)\",\n \"renge-7\": \"var(--renge-space-7)\",\n \"renge-8\": \"var(--renge-space-8)\",\n \"renge-9\": \"var(--renge-space-9)\",\n \"renge-10\": \"var(--renge-space-10)\",\n};\n\n// ─── Typography — Font Size ───────────────────────────────────────────────────\n// --renge-font-size-{xs|sm|base|lg|xl|2xl|3xl|4xl} → text-renge-*\n\nconst fontSize = {\n \"renge-xs\": \"var(--renge-font-size-xs)\",\n \"renge-sm\": \"var(--renge-font-size-sm)\",\n \"renge-base\": \"var(--renge-font-size-base)\",\n \"renge-lg\": \"var(--renge-font-size-lg)\",\n \"renge-xl\": \"var(--renge-font-size-xl)\",\n \"renge-2xl\": \"var(--renge-font-size-2xl)\",\n \"renge-3xl\": \"var(--renge-font-size-3xl)\",\n \"renge-4xl\": \"var(--renge-font-size-4xl)\",\n};\n\n// ─── Typography — Line Height ─────────────────────────────────────────────────\n// --renge-line-height-{xs|sm|base|lg|xl|2xl|3xl|4xl} → leading-renge-*\n\nconst lineHeight = {\n \"renge-xs\": \"var(--renge-line-height-xs)\",\n \"renge-sm\": \"var(--renge-line-height-sm)\",\n \"renge-base\": \"var(--renge-line-height-base)\",\n \"renge-lg\": \"var(--renge-line-height-lg)\",\n \"renge-xl\": \"var(--renge-line-height-xl)\",\n \"renge-2xl\": \"var(--renge-line-height-2xl)\",\n \"renge-3xl\": \"var(--renge-line-height-3xl)\",\n \"renge-4xl\": \"var(--renge-line-height-4xl)\",\n};\n\n// ─── Border Radius ────────────────────────────────────────────────────────────\n// --renge-radius-{none|1-5|full} → rounded-renge-*\n\nconst borderRadius = {\n \"renge-none\": \"var(--renge-radius-none)\",\n \"renge-1\": \"var(--renge-radius-1)\",\n \"renge-2\": \"var(--renge-radius-2)\",\n \"renge-3\": \"var(--renge-radius-3)\",\n \"renge-4\": \"var(--renge-radius-4)\",\n \"renge-5\": \"var(--renge-radius-5)\",\n \"renge-full\": \"var(--renge-radius-full)\",\n};\n\n// ─── Motion — Duration ───────────────────────────────────────────────────────\n// --renge-duration-{0-10} → duration-renge-*\n\nconst transitionDuration = {\n \"renge-0\": \"var(--renge-duration-0)\",\n \"renge-1\": \"var(--renge-duration-1)\",\n \"renge-2\": \"var(--renge-duration-2)\",\n \"renge-3\": \"var(--renge-duration-3)\",\n \"renge-4\": \"var(--renge-duration-4)\",\n \"renge-5\": \"var(--renge-duration-5)\",\n \"renge-6\": \"var(--renge-duration-6)\",\n \"renge-7\": \"var(--renge-duration-7)\",\n \"renge-8\": \"var(--renge-duration-8)\",\n \"renge-9\": \"var(--renge-duration-9)\",\n \"renge-10\": \"var(--renge-duration-10)\",\n};\n\n// ─── Motion — Easing ─────────────────────────────────────────────────────────\n// --renge-easing-{linear|ease-out|ease-in|ease-in-out|spring} → ease-renge-*\n\nconst transitionTimingFunction = {\n \"renge-linear\": \"var(--renge-easing-linear)\",\n \"renge-ease-in\": \"var(--renge-easing-ease-in)\",\n \"renge-ease-out\": \"var(--renge-easing-ease-out)\",\n \"renge-ease-in-out\": \"var(--renge-easing-ease-in-out)\",\n \"renge-spring\": \"var(--renge-easing-spring)\",\n};\n\n// ─── Colors — Semantic ────────────────────────────────────────────────────────\n// --renge-color-{token} → bg-renge-*, text-renge-*, border-renge-*, etc.\n//\n// Nested under `renge` so Tailwind generates: bg-renge-accent, text-renge-fg,\n// border-renge-subtle, etc.\n\nconst colors = {\n renge: {\n // Backgrounds\n \"bg\": \"var(--renge-color-bg)\",\n \"bg-subtle\": \"var(--renge-color-bg-subtle)\",\n \"bg-muted\": \"var(--renge-color-bg-muted)\",\n \"bg-inverse\": \"var(--renge-color-bg-inverse)\",\n // Foregrounds\n \"fg\": \"var(--renge-color-fg)\",\n \"fg-subtle\": \"var(--renge-color-fg-subtle)\",\n \"fg-muted\": \"var(--renge-color-fg-muted)\",\n \"fg-inverse\": \"var(--renge-color-fg-inverse)\",\n // Borders\n \"border\": \"var(--renge-color-border)\",\n \"border-subtle\": \"var(--renge-color-border-subtle)\",\n \"border-focus\": \"var(--renge-color-border-focus)\",\n // Accent\n \"accent\": \"var(--renge-color-accent)\",\n \"accent-hover\": \"var(--renge-color-accent-hover)\",\n \"accent-subtle\": \"var(--renge-color-accent-subtle)\",\n // Semantic states\n \"success\": \"var(--renge-color-success)\",\n \"success-subtle\": \"var(--renge-color-success-subtle)\",\n \"warning\": \"var(--renge-color-warning)\",\n \"warning-subtle\": \"var(--renge-color-warning-subtle)\",\n \"danger\": \"var(--renge-color-danger)\",\n \"danger-subtle\": \"var(--renge-color-danger-subtle)\",\n \"info\": \"var(--renge-color-info)\",\n \"info-subtle\": \"var(--renge-color-info-subtle)\",\n },\n};\n\n// ─── Preset ───────────────────────────────────────────────────────────────────\n\nconst rengePreset = {\n theme: {\n extend: {\n spacing,\n fontSize,\n lineHeight,\n borderRadius,\n transitionDuration,\n transitionTimingFunction,\n colors,\n },\n },\n};\n\nexport default rengePreset;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBA,IAAM,UAAU;AAAA,EACd,WAAY;AAAA,EACZ,WAAY;AAAA,EACZ,WAAY;AAAA,EACZ,WAAY;AAAA,EACZ,WAAY;AAAA,EACZ,WAAY;AAAA,EACZ,WAAY;AAAA,EACZ,WAAY;AAAA,EACZ,WAAY;AAAA,EACZ,WAAY;AAAA,EACZ,YAAY;AACd;AAKA,IAAM,WAAW;AAAA,EACf,YAAc;AAAA,EACd,YAAc;AAAA,EACd,cAAc;AAAA,EACd,YAAc;AAAA,EACd,YAAc;AAAA,EACd,aAAc;AAAA,EACd,aAAc;AAAA,EACd,aAAc;AAChB;AAKA,IAAM,aAAa;AAAA,EACjB,YAAc;AAAA,EACd,YAAc;AAAA,EACd,cAAc;AAAA,EACd,YAAc;AAAA,EACd,YAAc;AAAA,EACd,aAAc;AAAA,EACd,aAAc;AAAA,EACd,aAAc;AAChB;AAKA,IAAM,eAAe;AAAA,EACnB,cAAc;AAAA,EACd,WAAc;AAAA,EACd,WAAc;AAAA,EACd,WAAc;AAAA,EACd,WAAc;AAAA,EACd,WAAc;AAAA,EACd,cAAc;AAChB;AAKA,IAAM,qBAAqB;AAAA,EACzB,WAAY;AAAA,EACZ,WAAY;AAAA,EACZ,WAAY;AAAA,EACZ,WAAY;AAAA,EACZ,WAAY;AAAA,EACZ,WAAY;AAAA,EACZ,WAAY;AAAA,EACZ,WAAY;AAAA,EACZ,WAAY;AAAA,EACZ,WAAY;AAAA,EACZ,YAAY;AACd;AAKA,IAAM,2BAA2B;AAAA,EAC/B,gBAAqB;AAAA,EACrB,iBAAqB;AAAA,EACrB,kBAAqB;AAAA,EACrB,qBAAqB;AAAA,EACrB,gBAAqB;AACvB;AAQA,IAAM,SAAS;AAAA,EACb,OAAO;AAAA;AAAA,IAEL,MAAiB;AAAA,IACjB,aAAiB;AAAA,IACjB,YAAiB;AAAA,IACjB,cAAiB;AAAA;AAAA,IAEjB,MAAiB;AAAA,IACjB,aAAiB;AAAA,IACjB,YAAiB;AAAA,IACjB,cAAiB;AAAA;AAAA,IAEjB,UAAiB;AAAA,IACjB,iBAAiB;AAAA,IACjB,gBAAiB;AAAA;AAAA,IAEjB,UAAiB;AAAA,IACjB,gBAAiB;AAAA,IACjB,iBAAiB;AAAA;AAAA,IAEjB,WAAmB;AAAA,IACnB,kBAAmB;AAAA,IACnB,WAAmB;AAAA,IACnB,kBAAmB;AAAA,IACnB,UAAmB;AAAA,IACnB,iBAAmB;AAAA,IACnB,QAAmB;AAAA,IACnB,eAAmB;AAAA,EACrB;AACF;AAIA,IAAM,cAAc;AAAA,EAClB,OAAO;AAAA,IACL,QAAQ;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;AAEA,IAAO,gBAAQ;","names":[]}
|
package/dist/index.mjs
ADDED
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
// src/index.ts
|
|
2
|
+
var spacing = {
|
|
3
|
+
"renge-0": "var(--renge-space-0)",
|
|
4
|
+
"renge-1": "var(--renge-space-1)",
|
|
5
|
+
"renge-2": "var(--renge-space-2)",
|
|
6
|
+
"renge-3": "var(--renge-space-3)",
|
|
7
|
+
"renge-4": "var(--renge-space-4)",
|
|
8
|
+
"renge-5": "var(--renge-space-5)",
|
|
9
|
+
"renge-6": "var(--renge-space-6)",
|
|
10
|
+
"renge-7": "var(--renge-space-7)",
|
|
11
|
+
"renge-8": "var(--renge-space-8)",
|
|
12
|
+
"renge-9": "var(--renge-space-9)",
|
|
13
|
+
"renge-10": "var(--renge-space-10)"
|
|
14
|
+
};
|
|
15
|
+
var fontSize = {
|
|
16
|
+
"renge-xs": "var(--renge-font-size-xs)",
|
|
17
|
+
"renge-sm": "var(--renge-font-size-sm)",
|
|
18
|
+
"renge-base": "var(--renge-font-size-base)",
|
|
19
|
+
"renge-lg": "var(--renge-font-size-lg)",
|
|
20
|
+
"renge-xl": "var(--renge-font-size-xl)",
|
|
21
|
+
"renge-2xl": "var(--renge-font-size-2xl)",
|
|
22
|
+
"renge-3xl": "var(--renge-font-size-3xl)",
|
|
23
|
+
"renge-4xl": "var(--renge-font-size-4xl)"
|
|
24
|
+
};
|
|
25
|
+
var lineHeight = {
|
|
26
|
+
"renge-xs": "var(--renge-line-height-xs)",
|
|
27
|
+
"renge-sm": "var(--renge-line-height-sm)",
|
|
28
|
+
"renge-base": "var(--renge-line-height-base)",
|
|
29
|
+
"renge-lg": "var(--renge-line-height-lg)",
|
|
30
|
+
"renge-xl": "var(--renge-line-height-xl)",
|
|
31
|
+
"renge-2xl": "var(--renge-line-height-2xl)",
|
|
32
|
+
"renge-3xl": "var(--renge-line-height-3xl)",
|
|
33
|
+
"renge-4xl": "var(--renge-line-height-4xl)"
|
|
34
|
+
};
|
|
35
|
+
var borderRadius = {
|
|
36
|
+
"renge-none": "var(--renge-radius-none)",
|
|
37
|
+
"renge-1": "var(--renge-radius-1)",
|
|
38
|
+
"renge-2": "var(--renge-radius-2)",
|
|
39
|
+
"renge-3": "var(--renge-radius-3)",
|
|
40
|
+
"renge-4": "var(--renge-radius-4)",
|
|
41
|
+
"renge-5": "var(--renge-radius-5)",
|
|
42
|
+
"renge-full": "var(--renge-radius-full)"
|
|
43
|
+
};
|
|
44
|
+
var transitionDuration = {
|
|
45
|
+
"renge-0": "var(--renge-duration-0)",
|
|
46
|
+
"renge-1": "var(--renge-duration-1)",
|
|
47
|
+
"renge-2": "var(--renge-duration-2)",
|
|
48
|
+
"renge-3": "var(--renge-duration-3)",
|
|
49
|
+
"renge-4": "var(--renge-duration-4)",
|
|
50
|
+
"renge-5": "var(--renge-duration-5)",
|
|
51
|
+
"renge-6": "var(--renge-duration-6)",
|
|
52
|
+
"renge-7": "var(--renge-duration-7)",
|
|
53
|
+
"renge-8": "var(--renge-duration-8)",
|
|
54
|
+
"renge-9": "var(--renge-duration-9)",
|
|
55
|
+
"renge-10": "var(--renge-duration-10)"
|
|
56
|
+
};
|
|
57
|
+
var transitionTimingFunction = {
|
|
58
|
+
"renge-linear": "var(--renge-easing-linear)",
|
|
59
|
+
"renge-ease-in": "var(--renge-easing-ease-in)",
|
|
60
|
+
"renge-ease-out": "var(--renge-easing-ease-out)",
|
|
61
|
+
"renge-ease-in-out": "var(--renge-easing-ease-in-out)",
|
|
62
|
+
"renge-spring": "var(--renge-easing-spring)"
|
|
63
|
+
};
|
|
64
|
+
var colors = {
|
|
65
|
+
renge: {
|
|
66
|
+
// Backgrounds
|
|
67
|
+
"bg": "var(--renge-color-bg)",
|
|
68
|
+
"bg-subtle": "var(--renge-color-bg-subtle)",
|
|
69
|
+
"bg-muted": "var(--renge-color-bg-muted)",
|
|
70
|
+
"bg-inverse": "var(--renge-color-bg-inverse)",
|
|
71
|
+
// Foregrounds
|
|
72
|
+
"fg": "var(--renge-color-fg)",
|
|
73
|
+
"fg-subtle": "var(--renge-color-fg-subtle)",
|
|
74
|
+
"fg-muted": "var(--renge-color-fg-muted)",
|
|
75
|
+
"fg-inverse": "var(--renge-color-fg-inverse)",
|
|
76
|
+
// Borders
|
|
77
|
+
"border": "var(--renge-color-border)",
|
|
78
|
+
"border-subtle": "var(--renge-color-border-subtle)",
|
|
79
|
+
"border-focus": "var(--renge-color-border-focus)",
|
|
80
|
+
// Accent
|
|
81
|
+
"accent": "var(--renge-color-accent)",
|
|
82
|
+
"accent-hover": "var(--renge-color-accent-hover)",
|
|
83
|
+
"accent-subtle": "var(--renge-color-accent-subtle)",
|
|
84
|
+
// Semantic states
|
|
85
|
+
"success": "var(--renge-color-success)",
|
|
86
|
+
"success-subtle": "var(--renge-color-success-subtle)",
|
|
87
|
+
"warning": "var(--renge-color-warning)",
|
|
88
|
+
"warning-subtle": "var(--renge-color-warning-subtle)",
|
|
89
|
+
"danger": "var(--renge-color-danger)",
|
|
90
|
+
"danger-subtle": "var(--renge-color-danger-subtle)",
|
|
91
|
+
"info": "var(--renge-color-info)",
|
|
92
|
+
"info-subtle": "var(--renge-color-info-subtle)"
|
|
93
|
+
}
|
|
94
|
+
};
|
|
95
|
+
var rengePreset = {
|
|
96
|
+
theme: {
|
|
97
|
+
extend: {
|
|
98
|
+
spacing,
|
|
99
|
+
fontSize,
|
|
100
|
+
lineHeight,
|
|
101
|
+
borderRadius,
|
|
102
|
+
transitionDuration,
|
|
103
|
+
transitionTimingFunction,
|
|
104
|
+
colors
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
};
|
|
108
|
+
var index_default = rengePreset;
|
|
109
|
+
export {
|
|
110
|
+
index_default as default
|
|
111
|
+
};
|
|
112
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["/**\n * @renge-ui/tailwind\n *\n * Tailwind CSS v3 preset that maps all --renge-* CSS custom properties to\n * Tailwind utility classes. All values reference CSS variables — no\n * hardcoded values. Requires @renge-ui/tokens (or equivalent) to inject\n * the CSS custom properties at runtime.\n *\n * Usage:\n * // tailwind.config.ts\n * import rengePreset from '@renge-ui/tailwind';\n * export default { presets: [rengePreset] };\n */\n\n// ─── Spacing ──────────────────────────────────────────────────────────────────\n// --renge-space-{0-10} → space-renge-*, p-renge-*, m-renge-*, gap-renge-*, etc.\n\nconst spacing = {\n \"renge-0\": \"var(--renge-space-0)\",\n \"renge-1\": \"var(--renge-space-1)\",\n \"renge-2\": \"var(--renge-space-2)\",\n \"renge-3\": \"var(--renge-space-3)\",\n \"renge-4\": \"var(--renge-space-4)\",\n \"renge-5\": \"var(--renge-space-5)\",\n \"renge-6\": \"var(--renge-space-6)\",\n \"renge-7\": \"var(--renge-space-7)\",\n \"renge-8\": \"var(--renge-space-8)\",\n \"renge-9\": \"var(--renge-space-9)\",\n \"renge-10\": \"var(--renge-space-10)\",\n};\n\n// ─── Typography — Font Size ───────────────────────────────────────────────────\n// --renge-font-size-{xs|sm|base|lg|xl|2xl|3xl|4xl} → text-renge-*\n\nconst fontSize = {\n \"renge-xs\": \"var(--renge-font-size-xs)\",\n \"renge-sm\": \"var(--renge-font-size-sm)\",\n \"renge-base\": \"var(--renge-font-size-base)\",\n \"renge-lg\": \"var(--renge-font-size-lg)\",\n \"renge-xl\": \"var(--renge-font-size-xl)\",\n \"renge-2xl\": \"var(--renge-font-size-2xl)\",\n \"renge-3xl\": \"var(--renge-font-size-3xl)\",\n \"renge-4xl\": \"var(--renge-font-size-4xl)\",\n};\n\n// ─── Typography — Line Height ─────────────────────────────────────────────────\n// --renge-line-height-{xs|sm|base|lg|xl|2xl|3xl|4xl} → leading-renge-*\n\nconst lineHeight = {\n \"renge-xs\": \"var(--renge-line-height-xs)\",\n \"renge-sm\": \"var(--renge-line-height-sm)\",\n \"renge-base\": \"var(--renge-line-height-base)\",\n \"renge-lg\": \"var(--renge-line-height-lg)\",\n \"renge-xl\": \"var(--renge-line-height-xl)\",\n \"renge-2xl\": \"var(--renge-line-height-2xl)\",\n \"renge-3xl\": \"var(--renge-line-height-3xl)\",\n \"renge-4xl\": \"var(--renge-line-height-4xl)\",\n};\n\n// ─── Border Radius ────────────────────────────────────────────────────────────\n// --renge-radius-{none|1-5|full} → rounded-renge-*\n\nconst borderRadius = {\n \"renge-none\": \"var(--renge-radius-none)\",\n \"renge-1\": \"var(--renge-radius-1)\",\n \"renge-2\": \"var(--renge-radius-2)\",\n \"renge-3\": \"var(--renge-radius-3)\",\n \"renge-4\": \"var(--renge-radius-4)\",\n \"renge-5\": \"var(--renge-radius-5)\",\n \"renge-full\": \"var(--renge-radius-full)\",\n};\n\n// ─── Motion — Duration ───────────────────────────────────────────────────────\n// --renge-duration-{0-10} → duration-renge-*\n\nconst transitionDuration = {\n \"renge-0\": \"var(--renge-duration-0)\",\n \"renge-1\": \"var(--renge-duration-1)\",\n \"renge-2\": \"var(--renge-duration-2)\",\n \"renge-3\": \"var(--renge-duration-3)\",\n \"renge-4\": \"var(--renge-duration-4)\",\n \"renge-5\": \"var(--renge-duration-5)\",\n \"renge-6\": \"var(--renge-duration-6)\",\n \"renge-7\": \"var(--renge-duration-7)\",\n \"renge-8\": \"var(--renge-duration-8)\",\n \"renge-9\": \"var(--renge-duration-9)\",\n \"renge-10\": \"var(--renge-duration-10)\",\n};\n\n// ─── Motion — Easing ─────────────────────────────────────────────────────────\n// --renge-easing-{linear|ease-out|ease-in|ease-in-out|spring} → ease-renge-*\n\nconst transitionTimingFunction = {\n \"renge-linear\": \"var(--renge-easing-linear)\",\n \"renge-ease-in\": \"var(--renge-easing-ease-in)\",\n \"renge-ease-out\": \"var(--renge-easing-ease-out)\",\n \"renge-ease-in-out\": \"var(--renge-easing-ease-in-out)\",\n \"renge-spring\": \"var(--renge-easing-spring)\",\n};\n\n// ─── Colors — Semantic ────────────────────────────────────────────────────────\n// --renge-color-{token} → bg-renge-*, text-renge-*, border-renge-*, etc.\n//\n// Nested under `renge` so Tailwind generates: bg-renge-accent, text-renge-fg,\n// border-renge-subtle, etc.\n\nconst colors = {\n renge: {\n // Backgrounds\n \"bg\": \"var(--renge-color-bg)\",\n \"bg-subtle\": \"var(--renge-color-bg-subtle)\",\n \"bg-muted\": \"var(--renge-color-bg-muted)\",\n \"bg-inverse\": \"var(--renge-color-bg-inverse)\",\n // Foregrounds\n \"fg\": \"var(--renge-color-fg)\",\n \"fg-subtle\": \"var(--renge-color-fg-subtle)\",\n \"fg-muted\": \"var(--renge-color-fg-muted)\",\n \"fg-inverse\": \"var(--renge-color-fg-inverse)\",\n // Borders\n \"border\": \"var(--renge-color-border)\",\n \"border-subtle\": \"var(--renge-color-border-subtle)\",\n \"border-focus\": \"var(--renge-color-border-focus)\",\n // Accent\n \"accent\": \"var(--renge-color-accent)\",\n \"accent-hover\": \"var(--renge-color-accent-hover)\",\n \"accent-subtle\": \"var(--renge-color-accent-subtle)\",\n // Semantic states\n \"success\": \"var(--renge-color-success)\",\n \"success-subtle\": \"var(--renge-color-success-subtle)\",\n \"warning\": \"var(--renge-color-warning)\",\n \"warning-subtle\": \"var(--renge-color-warning-subtle)\",\n \"danger\": \"var(--renge-color-danger)\",\n \"danger-subtle\": \"var(--renge-color-danger-subtle)\",\n \"info\": \"var(--renge-color-info)\",\n \"info-subtle\": \"var(--renge-color-info-subtle)\",\n },\n};\n\n// ─── Preset ───────────────────────────────────────────────────────────────────\n\nconst rengePreset = {\n theme: {\n extend: {\n spacing,\n fontSize,\n lineHeight,\n borderRadius,\n transitionDuration,\n transitionTimingFunction,\n colors,\n },\n },\n};\n\nexport default rengePreset;\n"],"mappings":";AAiBA,IAAM,UAAU;AAAA,EACd,WAAY;AAAA,EACZ,WAAY;AAAA,EACZ,WAAY;AAAA,EACZ,WAAY;AAAA,EACZ,WAAY;AAAA,EACZ,WAAY;AAAA,EACZ,WAAY;AAAA,EACZ,WAAY;AAAA,EACZ,WAAY;AAAA,EACZ,WAAY;AAAA,EACZ,YAAY;AACd;AAKA,IAAM,WAAW;AAAA,EACf,YAAc;AAAA,EACd,YAAc;AAAA,EACd,cAAc;AAAA,EACd,YAAc;AAAA,EACd,YAAc;AAAA,EACd,aAAc;AAAA,EACd,aAAc;AAAA,EACd,aAAc;AAChB;AAKA,IAAM,aAAa;AAAA,EACjB,YAAc;AAAA,EACd,YAAc;AAAA,EACd,cAAc;AAAA,EACd,YAAc;AAAA,EACd,YAAc;AAAA,EACd,aAAc;AAAA,EACd,aAAc;AAAA,EACd,aAAc;AAChB;AAKA,IAAM,eAAe;AAAA,EACnB,cAAc;AAAA,EACd,WAAc;AAAA,EACd,WAAc;AAAA,EACd,WAAc;AAAA,EACd,WAAc;AAAA,EACd,WAAc;AAAA,EACd,cAAc;AAChB;AAKA,IAAM,qBAAqB;AAAA,EACzB,WAAY;AAAA,EACZ,WAAY;AAAA,EACZ,WAAY;AAAA,EACZ,WAAY;AAAA,EACZ,WAAY;AAAA,EACZ,WAAY;AAAA,EACZ,WAAY;AAAA,EACZ,WAAY;AAAA,EACZ,WAAY;AAAA,EACZ,WAAY;AAAA,EACZ,YAAY;AACd;AAKA,IAAM,2BAA2B;AAAA,EAC/B,gBAAqB;AAAA,EACrB,iBAAqB;AAAA,EACrB,kBAAqB;AAAA,EACrB,qBAAqB;AAAA,EACrB,gBAAqB;AACvB;AAQA,IAAM,SAAS;AAAA,EACb,OAAO;AAAA;AAAA,IAEL,MAAiB;AAAA,IACjB,aAAiB;AAAA,IACjB,YAAiB;AAAA,IACjB,cAAiB;AAAA;AAAA,IAEjB,MAAiB;AAAA,IACjB,aAAiB;AAAA,IACjB,YAAiB;AAAA,IACjB,cAAiB;AAAA;AAAA,IAEjB,UAAiB;AAAA,IACjB,iBAAiB;AAAA,IACjB,gBAAiB;AAAA;AAAA,IAEjB,UAAiB;AAAA,IACjB,gBAAiB;AAAA,IACjB,iBAAiB;AAAA;AAAA,IAEjB,WAAmB;AAAA,IACnB,kBAAmB;AAAA,IACnB,WAAmB;AAAA,IACnB,kBAAmB;AAAA,IACnB,UAAmB;AAAA,IACnB,iBAAmB;AAAA,IACnB,QAAmB;AAAA,IACnB,eAAmB;AAAA,EACrB;AACF;AAIA,IAAM,cAAc;AAAA,EAClB,OAAO;AAAA,IACL,QAAQ;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;AAEA,IAAO,gBAAQ;","names":[]}
|
package/package.json
ADDED
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@renge-ui/tailwind",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "Tailwind CSS preset for the Renge design system — maps --renge-* CSS custom properties to utility classes.",
|
|
5
|
+
"main": "./dist/index.js",
|
|
6
|
+
"module": "./dist/index.mjs",
|
|
7
|
+
"types": "./dist/index.d.ts",
|
|
8
|
+
"exports": {
|
|
9
|
+
".": {
|
|
10
|
+
"types": "./dist/index.d.ts",
|
|
11
|
+
"import": "./dist/index.mjs",
|
|
12
|
+
"require": "./dist/index.js"
|
|
13
|
+
}
|
|
14
|
+
},
|
|
15
|
+
"files": ["dist"],
|
|
16
|
+
"scripts": {
|
|
17
|
+
"build": "tsup",
|
|
18
|
+
"dev": "tsup --watch",
|
|
19
|
+
"typecheck": "tsc --noEmit",
|
|
20
|
+
"test": "vitest run"
|
|
21
|
+
},
|
|
22
|
+
"keywords": ["design-system", "tailwind", "tailwindcss", "preset", "css-variables", "golden-ratio"],
|
|
23
|
+
"author": "Vanessa Martin",
|
|
24
|
+
"license": "MIT",
|
|
25
|
+
"publishConfig": { "access": "public" },
|
|
26
|
+
"repository": {
|
|
27
|
+
"type": "git",
|
|
28
|
+
"url": "https://github.com/vsm1996/renge-ui"
|
|
29
|
+
},
|
|
30
|
+
"packageManager": "pnpm@10.30.2",
|
|
31
|
+
"peerDependencies": {
|
|
32
|
+
"tailwindcss": ">=3.0.0 <5.0.0"
|
|
33
|
+
},
|
|
34
|
+
"peerDependenciesMeta": {
|
|
35
|
+
"tailwindcss": {
|
|
36
|
+
"optional": true
|
|
37
|
+
}
|
|
38
|
+
},
|
|
39
|
+
"devDependencies": {
|
|
40
|
+
"tsup": "^8.5.1",
|
|
41
|
+
"typescript": "^5.9.3",
|
|
42
|
+
"vitest": "^3.0.0"
|
|
43
|
+
}
|
|
44
|
+
}
|