@rpgjs/ui-css 5.0.0-alpha.44 → 5.0.0-beta.1

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.
Files changed (11) hide show
  1. package/README.md +201 -269
  2. package/index.css +1 -0
  3. package/package.json +9 -5
  4. package/reset.css +1 -0
  5. package/src/index.css +3 -0
  6. package/src/primitives/hud.css +248 -0
  7. package/src/primitives/shop.css +467 -0
  8. package/src/tokens.css +109 -20
  9. package/theme-default/theme.css +310 -61
  10. package/theme-default.css +1 -0
  11. package/tokens.css +1 -0
package/README.md CHANGED
@@ -1,321 +1,253 @@
1
1
  # @rpgjs/ui-css
2
2
 
3
- A framework-agnostic CSS library for RPG UI components. Fully customizable via CSS custom properties.
3
+ `@rpgjs/ui-css` is the shared CSS layer for RPGJS interfaces.
4
4
 
5
- ## Installation
5
+ It provides:
6
6
 
7
- ```bash
8
- npm install @rpgjs/ui-css
9
- # or
10
- pnpm add @rpgjs/ui-css
11
- ```
7
+ - generic RPG UI primitives
8
+ - a reusable HUD / dock / minimap / shop layer
9
+ - a default theme you can use as-is or override with CSS variables
12
10
 
13
- ## Usage
11
+ ## Entry Points
14
12
 
15
- ### Basic Setup
13
+ - `@rpgjs/ui-css/index.css`
14
+ Includes `reset.css`, `tokens.css`, animations, primitives, HUD and shop styles.
15
+ - `@rpgjs/ui-css/theme-default.css`
16
+ Opinionated default theme with a modern glass-RPG look.
17
+ - `@rpgjs/ui-css/tokens.css`
18
+ Only the design tokens, useful if you want to build your own theme.
19
+ - `@rpgjs/ui-css/reset.css`
20
+ Reset only.
16
21
 
17
- ```html
18
- <!DOCTYPE html>
19
- <html>
20
- <head>
21
- <link rel="stylesheet" href="@rpgjs/ui-css/reset.css">
22
- <link rel="stylesheet" href="@rpgjs/ui-css/index.css">
23
- <link rel="stylesheet" href="@rpgjs/ui-css/theme-default.css">
24
- </head>
25
- <body>
26
- <!-- Your RPG UI here -->
27
- </body>
28
- </html>
29
- ```
22
+ ## Usage
30
23
 
31
- ### With Build Tools
24
+ ### With a bundler
32
25
 
33
- ```javascript
34
- // In your CSS/SCSS
35
- @import '@rpgjs/ui-css/reset.css';
36
- @import '@rpgjs/ui-css/index.css';
37
- @import '@rpgjs/ui-css/theme-default.css';
26
+ ```css
27
+ @import "@rpgjs/ui-css/index.css";
28
+ @import "@rpgjs/ui-css/theme-default.css";
38
29
  ```
39
30
 
40
- ## Components
41
-
42
- ### Primitives
43
-
44
- #### Core Components
45
- - `.rpg-ui-panel` - Panel container with bevel effects and shadows
46
- - `.rpg-ui-btn` - Interactive button with hover and active states
47
- - `.rpg-ui-dialog` - Dialog box with speaker labels and portrait support
48
- - `.rpg-ui-bar` - Progress/health bar with gradient fills and animations
49
- - `.rpg-ui-bar-fill` - Fill element for bars
50
- - `.rpg-ui-bar-label` - Text overlay for bars
51
- - `.rpg-ui-menu` - Menu container with selection indicators
52
- - `.rpg-ui-menu-item` - Individual menu items with hover effects
53
- - `.rpg-ui-menu-header` - Menu header section
54
-
55
- #### RPG-Specific Components
56
- - `.rpg-ui-inventory` - Inventory grid container
57
- - `.rpg-ui-inventory-slot` - Individual inventory slot with rarity indicators
58
- - `.rpg-ui-inventory-slot-icon` - Icon container for inventory items
59
- - `.rpg-ui-inventory-slot-quantity` - Item quantity display
60
- - `.rpg-ui-inventory-slot-rarity` - Rarity color indicator (common, uncommon, rare, epic, legendary)
61
- - `.rpg-ui-stats` - Stats container
62
- - `.rpg-ui-stat` - Individual stat display
63
- - `.rpg-ui-stat-label` - Stat label text
64
- - `.rpg-ui-stat-value` - Stat value with change indicators
65
- - `.rpg-ui-stat-change` - Positive/negative stat change indicator
66
- - `.rpg-ui-stat-group` - Group of related stats
67
- - `.rpg-ui-stat-group-title` - Group title
68
- - `.rpg-ui-stat-grid` - Grid layout for stats
69
- - `.rpg-ui-stat-bar-container` - Container for stat with bar
70
- - `.rpg-ui-character-card` - Character profile card
71
- - `.rpg-ui-character-card-header` - Card header section
72
- - `.rpg-ui-character-card-avatar` - Character avatar/portrait
73
- - `.rpg-ui-character-card-info` - Character info section
74
- - `.rpg-ui-character-card-name` - Character name
75
- - `.rpg-ui-character-card-class` - Character class/race
76
- - `.rpg-ui-character-card-level` - Character level badge
77
- - `.rpg-ui-character-card-stats` - Stats section in card
78
- - `.rpg-ui-character-card-section` - Card section divider
79
- - `.rpg-ui-character-card-section-title` - Section title
80
- - `.rpg-ui-hotbar` - Action bar plate container
81
- - `.rpg-ui-hotbar-track` - Slot grid wrapper
82
- - `.rpg-ui-hotbar-slot` - Individual action/item slot
83
- - `.rpg-ui-hotbar-key` - Keyboard hint label (1-0, etc.)
84
- - `.rpg-ui-hotbar-count` - Stack quantity (items)
85
- - `.rpg-ui-hotbar-text` - Fallback text label for slot content
86
-
87
- ### Variants & States
88
-
89
- #### Button Variants
90
- ```html
91
- <button class="rpg-ui-btn" data-variant="primary">Primary</button>
92
- <button class="rpg-ui-btn" data-variant="success">Success</button>
93
- <button class="rpg-ui-btn" data-variant="warning">Warning</button>
94
- <button class="rpg-ui-btn" data-variant="danger">Danger</button>
95
- ```
31
+ ### From static HTML
96
32
 
97
- #### Bar Types
98
33
  ```html
99
- <div class="rpg-ui-bar" data-type="health">Health Bar</div>
100
- <div class="rpg-ui-bar" data-type="mana">Mana Bar</div>
101
- <div class="rpg-ui-bar" data-type="stamina">Stamina Bar</div>
102
- <div class="rpg-ui-bar" data-type="experience">Experience Bar</div>
34
+ <link rel="stylesheet" href="./node_modules/@rpgjs/ui-css/index.css">
35
+ <link rel="stylesheet" href="./node_modules/@rpgjs/ui-css/theme-default.css">
103
36
  ```
104
37
 
105
- #### Menu Selection
106
- ```html
107
- <div class="rpg-ui-menu-item" data-selected="true">Selected Item</div>
108
- ```
38
+ If you use the default theme, load the default font too:
109
39
 
110
- #### Inventory Slot States
111
40
  ```html
112
- <div class="rpg-ui-inventory-slot" data-selected="true">Selected Slot</div>
113
- <div class="rpg-ui-inventory-slot" data-locked="true">Locked Slot</div>
114
- <div class="rpg-ui-inventory-slot-rarity" data-rarity="legendary"></div>
41
+ <link
42
+ rel="stylesheet"
43
+ href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600;700&display=swap"
44
+ >
115
45
  ```
116
46
 
117
- ## CSS Custom Properties (Tokens)
47
+ ### App shell
118
48
 
119
- All styling is controlled via CSS custom properties:
49
+ Apply `rpg-ui-app` on `body` or on a wrapper to get the full-screen themed background:
120
50
 
121
- ```css
122
- :root {
123
- /* Colors */
124
- --rpg-ui-bg: #1c1917;
125
- --rpg-ui-surface: #292524;
126
- --rpg-ui-border: #d6b36a;
127
- --rpg-ui-border-light: #fde047;
128
- --rpg-ui-border-dark: #78350f;
129
- --rpg-ui-text: #fef3c7;
130
- --rpg-ui-text-muted: #a8a29e;
131
- --rpg-ui-accent: #f59e0b;
132
- --rpg-ui-success: #22c55e;
133
- --rpg-ui-warning: #eab308;
134
- --rpg-ui-danger: #dc2626;
135
- --rpg-ui-info: #3b82f6;
136
-
137
- /* Gradients */
138
- --rpg-ui-gradient-surface: linear-gradient(180deg, var(--rpg-ui-surface), var(--rpg-ui-bg));
139
- --rpg-ui-gradient-accent: linear-gradient(180deg, var(--rpg-ui-accent), color-mix(in srgb, var(--rpg-ui-accent), black 20%));
140
- --rpg-ui-gradient-bar: linear-gradient(90deg, var(--rpg-ui-accent), color-mix(in srgb, var(--rpg-ui-accent), black 30%));
141
-
142
- /* Shadows */
143
- --rpg-ui-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
144
- --rpg-ui-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.6);
145
- --rpg-ui-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.8);
146
- --rpg-ui-shadow-glow: 0 0 20px var(--rpg-ui-accent);
147
- --rpg-ui-shadow-inset: inset 0 1px 3px rgba(0, 0, 0, 0.5);
148
-
149
- /* Typography */
150
- --rpg-ui-font: "Cinzel", serif;
151
- --rpg-ui-font-size: 1rem;
152
- --rpg-ui-font-size-sm: 0.875rem;
153
- --rpg-ui-font-size-lg: 1.125rem;
154
- --rpg-ui-font-weight: 600;
155
- --rpg-ui-font-weight-bold: 800;
156
- --rpg-ui-text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
157
-
158
- /* Layout */
159
- --rpg-ui-radius-sm: 4px;
160
- --rpg-ui-radius-md: 6px;
161
- --rpg-ui-radius-lg: 10px;
162
- --rpg-ui-border-width: 3px;
163
- --rpg-ui-spacing: 0.75rem;
164
- --rpg-ui-spacing-lg: 1.25rem;
165
-
166
- /* Effects */
167
- --rpg-ui-bevel-light: var(--rpg-ui-border-light);
168
- --rpg-ui-bevel-dark: var(--rpg-ui-border-dark);
169
- --rpg-ui-border-double: 4px;
170
- }
51
+ ```html
52
+ <body class="rpg-ui-app">
53
+ <div id="rpg"></div>
54
+ </body>
171
55
  ```
172
56
 
173
- ## Creating Custom Themes
174
-
175
- ### Override Globally
57
+ ## What Is Included
176
58
 
177
- ```css
178
- :root {
179
- --rpg-ui-accent: hotpink;
180
- --rpg-ui-font: "Arial", sans-serif;
181
- }
182
- ```
59
+ ### Core primitives
183
60
 
184
- ### Override Locally
61
+ - `.rpg-ui-panel`, `.rpg-ui-window`
62
+ - `.rpg-ui-btn`
63
+ - `.rpg-ui-menu`, `.rpg-ui-menu-item`, `.rpg-ui-menu-tab`
64
+ - `.rpg-ui-dialog`
65
+ - `.rpg-ui-bar`
66
+ - `.rpg-ui-save-load`
67
+ - `.rpg-ui-toast`, `.rpg-ui-notification`
68
+ - `.rpg-ui-title-screen`
69
+ - `.rpg-ui-gameover-screen`
185
70
 
186
- ```css
187
- .my-custom-ui {
188
- --rpg-ui-accent: hotpink;
189
- --rpg-ui-radius-lg: 0;
190
- }
191
- ```
71
+ ### Generic in-game layout
192
72
 
193
- ### Custom Theme File
73
+ - `.rpg-hud` / `.rpg-ui-hud`
74
+ - `.rpg-avatar`, `.rpg-avatar-face`, `.rpg-avatar-level`
75
+ - `.rpg-status-bars`, `.rpg-bar-container`, `.rpg-bar-fill`, `.rpg-bar-text`
76
+ - `.glass-panel` / `.rpg-ui-glass-panel`
77
+ - `.rpg-item-dock`, `.rpg-item-slot`, `.rpg-item-qty`
78
+ - `.rpg-fab`
79
+ - `.rpg-minimap`
194
80
 
195
- ```css
196
- /* my-theme.css */
197
- :root {
198
- --rpg-ui-bg: #2d1b69;
199
- --rpg-ui-surface: #4c2a85;
200
- --rpg-ui-border: #ff6b6b;
201
- --rpg-ui-text: #ffffff;
202
- --rpg-ui-accent: #ffd93d;
203
- --rpg-ui-font: "MedievalSharp", cursive;
204
- }
205
- ```
81
+ ### Shop UI
206
82
 
207
- ## Example
83
+ - `.rpg-shop-container`
84
+ - `.rpg-shop-tabs`, `.rpg-shop-tab`
85
+ - `.rpg-shop-card`, `.rpg-shop-card-icon`, `.rpg-shop-card-tag`
86
+ - `.rpg-shop-details`
87
+ - `.rpg-shop-modal`
88
+ - `.rpg-shop-btn`
208
89
 
209
- ### Character Card with Stats
90
+ ## Minimal Example
210
91
 
211
92
  ```html
212
- <div class="rpg-ui-character-card">
213
- <div class="rpg-ui-character-card-header">
214
- <div class="rpg-ui-character-card-avatar">🧙</div>
215
- <div class="rpg-ui-character-card-info">
216
- <div class="rpg-ui-character-card-name">Aelindor</div>
217
- <div class="rpg-ui-character-card-class">Archmage <span class="rpg-ui-character-card-level">Lv. 47</span></div>
218
- </div>
219
- </div>
220
- <div class="rpg-ui-character-card-stats">
221
- <div class="rpg-ui-stat-bar-container">
222
- <span class="rpg-ui-stat-label">HP</span>
223
- <div class="rpg-ui-bar" data-type="health">
224
- <div class="rpg-ui-bar-fill" style="width: 75%;"></div>
225
- <span class="rpg-ui-bar-label">2450/3267</span>
93
+ <!doctype html>
94
+ <html>
95
+ <head>
96
+ <meta charset="utf-8">
97
+ <meta name="viewport" content="width=device-width, initial-scale=1">
98
+ <link
99
+ rel="stylesheet"
100
+ href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600;700&display=swap"
101
+ >
102
+ <link rel="stylesheet" href="./node_modules/@rpgjs/ui-css/index.css">
103
+ <link rel="stylesheet" href="./node_modules/@rpgjs/ui-css/theme-default.css">
104
+ </head>
105
+ <body class="rpg-ui-app">
106
+ <div class="rpg-hud">
107
+ <div class="rpg-avatar">
108
+ 🧙
109
+ <div class="rpg-avatar-level">42</div>
110
+ </div>
111
+
112
+ <div class="rpg-status-bars">
113
+ <div class="rpg-bar-container">
114
+ <span class="rpg-bar-text">HP 2450 / 3200</span>
115
+ <div class="rpg-bar-fill health" style="width: 76%"></div>
116
+ </div>
117
+ <div class="rpg-bar-container">
118
+ <span class="rpg-bar-text">SP 1200 / 2000</span>
119
+ <div class="rpg-bar-fill mana" style="width: 60%"></div>
120
+ </div>
226
121
  </div>
227
- <span class="rpg-ui-stat-value">75%</span>
228
122
  </div>
229
- </div>
230
- </div>
231
- ```
232
123
 
233
- ### Inventory System
124
+ <div class="rpg-item-dock glass-panel">
125
+ <div class="rpg-item-slot active">⚔️</div>
126
+ <div class="rpg-item-slot">🧪<span class="rpg-item-qty">5</span></div>
127
+ <div class="rpg-item-slot">🎒</div>
128
+ </div>
234
129
 
235
- ```html
236
- <div class="rpg-ui-inventory" style="display: grid; grid-template-columns: repeat(4, 64px);">
237
- <div class="rpg-ui-inventory-slot" data-selected="true">
238
- <div class="rpg-ui-inventory-slot-icon">⚔️</div>
239
- <span class="rpg-ui-inventory-slot-quantity">1</span>
240
- <div class="rpg-ui-inventory-slot-rarity" data-rarity="legendary"></div>
241
- </div>
242
- <div class="rpg-ui-inventory-slot">
243
- <div class="rpg-ui-inventory-slot-icon">🧪</div>
244
- <span class="rpg-ui-inventory-slot-quantity">15</span>
245
- <div class="rpg-ui-inventory-slot-rarity" data-rarity="uncommon"></div>
246
- </div>
247
- </div>
130
+ <div class="rpg-fab">⚔️</div>
131
+ </body>
132
+ </html>
248
133
  ```
249
134
 
250
- ### Hotbar / Action Bar
135
+ ## Shop Example
251
136
 
252
137
  ```html
253
- <div class="rpg-ui-hotbar" style="--rpg-ui-hotbar-slots: 10;">
254
- <div class="rpg-ui-hotbar-track">
255
- <div class="rpg-ui-hotbar-slot" data-selected="true" data-empty="false" data-type="skill">
256
- <span class="rpg-ui-hotbar-key">1</span>
257
- <span class="rpg-ui-hotbar-text">Slash</span>
258
- </div>
259
- <div class="rpg-ui-hotbar-slot" data-empty="false" data-type="item">
260
- <span class="rpg-ui-hotbar-key">2</span>
261
- <span class="rpg-ui-hotbar-text">Potion</span>
262
- <span class="rpg-ui-hotbar-count">x3</span>
138
+ <div class="rpg-shop-container">
139
+ <div class="rpg-shop-header">
140
+ <div class="rpg-shop-merchant">
141
+ <div class="rpg-shop-merchant-avatar">🧝</div>
142
+ <div class="rpg-shop-merchant-info">
143
+ <p>Welcome to my shop.</p>
144
+ </div>
263
145
  </div>
264
- <div class="rpg-ui-hotbar-slot" data-empty="true">
265
- <span class="rpg-ui-hotbar-key">3</span>
146
+ <div class="rpg-shop-gold">1240 G</div>
147
+ </div>
148
+
149
+ <div class="rpg-shop-body">
150
+ <div class="rpg-shop-left">
151
+ <div class="rpg-shop-tabs">
152
+ <div class="rpg-shop-tab active">Weapons</div>
153
+ <div class="rpg-shop-tab">Armor</div>
154
+ </div>
155
+
156
+ <div class="rpg-shop-content">
157
+ <div class="rpg-shop-grid">
158
+ <div class="rpg-shop-card selected" tabindex="0">
159
+ <div class="rpg-shop-card-icon">🗡️</div>
160
+ <div class="rpg-shop-card-name">Crystal Blade</div>
161
+ <div class="rpg-shop-card-price">320 G</div>
162
+ <div class="rpg-shop-card-tag">Equipped</div>
163
+ </div>
164
+ </div>
165
+
166
+ <div class="rpg-shop-details">
167
+ <div class="rpg-shop-details-header">
168
+ <div class="rpg-shop-details-icon">🗡️</div>
169
+ <h2>Crystal Blade</h2>
170
+ </div>
171
+ <div class="rpg-shop-details-desc">
172
+ A light blade forged for fast melee attacks.
173
+ </div>
174
+ <button class="rpg-shop-btn">Buy</button>
175
+ </div>
176
+ </div>
266
177
  </div>
267
178
  </div>
268
179
  </div>
269
180
  ```
270
181
 
271
- ### Dialog Box
182
+ ## Theming
272
183
 
273
- ```html
274
- <div class="rpg-ui-dialog">
275
- <div class="rpg-ui-dialog-speaker">Ancient Sage</div>
276
- <div class="rpg-ui-dialog-content">
277
- The ancient prophecy speaks of a hero who will wield the Crystal of Eternity.
278
- </div>
279
- <div class="rpg-ui-dialog-indicator"></div>
280
- </div>
184
+ `index.css` already ships with default tokens. If you import `theme-default.css`, those tokens are overridden by the default RPG theme.
185
+
186
+ To customize the look, override the variables you need globally or locally.
187
+
188
+ ### Global override
189
+
190
+ ```css
191
+ :root {
192
+ --rpg-ui-accent: #7c3aed;
193
+ --rpg-ui-accent-hover: #a78bfa;
194
+ --rpg-ui-body-background:
195
+ radial-gradient(circle at top, rgba(124, 58, 237, 0.35), transparent 38%),
196
+ linear-gradient(180deg, #120f1e 0%, #09070f 100%);
197
+ --rpg-ui-surface-overlay-strong: rgba(18, 12, 30, 0.88);
198
+ }
281
199
  ```
282
200
 
283
- ### Stats Display
201
+ ### Local override
284
202
 
285
- ```html
286
- <div class="rpg-ui-stats">
287
- <div class="rpg-ui-stat">
288
- <span class="rpg-ui-stat-label">Strength</span>
289
- <span class="rpg-ui-stat-value">85 <span class="rpg-ui-stat-change" data-type="positive">+5</span></span>
290
- </div>
291
- <div class="rpg-ui-stat">
292
- <span class="rpg-ui-stat-label">Intelligence</span>
293
- <span class="rpg-ui-stat-value">142 <span class="rpg-ui-stat-change" data-type="positive">+12</span></span>
294
- </div>
295
- </div>
203
+ ```css
204
+ .my-combat-ui {
205
+ --rpg-ui-hud-top: 12px;
206
+ --rpg-ui-hud-left: 12px;
207
+ --rpg-ui-dock-bottom: 20px;
208
+ --rpg-ui-dock-slot-size: 72px;
209
+ --rpg-ui-fab-size: 92px;
210
+ }
296
211
  ```
297
212
 
298
- ## Architecture
299
-
300
- - **CSS-only**: No JavaScript dependencies
301
- - **Framework-agnostic**: Works with any framework or plain HTML
302
- - **Token-based**: All styling via CSS custom properties
303
- - **Gaming-focused**: Designed for 2D RPG games with authentic UI elements
304
- - **RPG components**: Character cards, inventory, stats, dialog boxes, menus
305
- - **Visual effects**: Bevel edges, gradients, shadows, glow effects, animations
306
- - **Minimal defaults**: Default theme is optional
307
- - **Fully customizable**: Override tokens for complete theming
308
-
309
- ## Features
310
-
311
- - 🎮 **Authentic RPG styling**: Medieval-themed default theme
312
- - ⚔️ **Character cards**: Complete character profile with stats and vitals
313
- - 📦 **Inventory system**: Slots with rarity indicators and selection states
314
- - 💪 **Stats display**: Individual stats with positive/negative change indicators
315
- - 💬 **Dialog boxes**: Speaker labels, portrait support, and navigation indicators
316
- - 📊 **Progress bars**: Health, mana, stamina, experience with gradient fills and animations
317
- - 🎨 **Button variants**: Primary, success, warning, danger with hover/active states
318
- - 📋 **Menu system**: Selection indicators, hover effects, and animations
319
- - 🎯 **Bevel effects**: 3D-style borders with light/dark edge highlighting
320
- - ✨ **Glow effects**: Subtle glows on hover and selection
321
- - 🔧 **Full customization**: Every aspect is configurable via CSS tokens
213
+ ## Useful Tokens
214
+
215
+ ### Scene
216
+
217
+ - `--rpg-ui-body-bg`
218
+ - `--rpg-ui-body-background`
219
+ - `--rpg-ui-backdrop-blur`
220
+
221
+ ### Core colors
222
+
223
+ - `--rpg-ui-surface`
224
+ - `--rpg-ui-surface-overlay`
225
+ - `--rpg-ui-surface-overlay-strong`
226
+ - `--rpg-ui-border`
227
+ - `--rpg-ui-text`
228
+ - `--rpg-ui-text-muted`
229
+ - `--rpg-ui-accent`
230
+ - `--rpg-ui-accent-hover`
231
+ - `--rpg-ui-accent-active`
232
+
233
+ ### RPG bars
234
+
235
+ - `--rpg-ui-health-gradient`
236
+ - `--rpg-ui-mana-gradient`
237
+ - `--rpg-ui-xp-gradient`
238
+
239
+ ### HUD / dock
240
+
241
+ - `--rpg-ui-hud-top`
242
+ - `--rpg-ui-hud-left`
243
+ - `--rpg-ui-avatar-size`
244
+ - `--rpg-ui-status-bars-width`
245
+ - `--rpg-ui-dock-slot-size`
246
+ - `--rpg-ui-fab-size`
247
+ - `--rpg-ui-minimap-size`
248
+
249
+ ## Notes
250
+
251
+ - If you want a completely different aesthetic, import only `index.css` and override the tokens yourself.
252
+ - The default theme is intentionally more opinionated than the base primitives.
253
+ - The RPGJS samples now consume this package directly instead of maintaining duplicated `rpg.css` files.
package/index.css ADDED
@@ -0,0 +1 @@
1
+ @import "./src/index.css";
package/package.json CHANGED
@@ -1,16 +1,20 @@
1
1
  {
2
2
  "name": "@rpgjs/ui-css",
3
- "version": "5.0.0-alpha.44",
3
+ "version": "5.0.0-beta.1",
4
4
  "description": "CSS library for RPG UI components - framework-agnostic and fully customizable",
5
5
  "license": "MIT",
6
6
  "author": "Samuel Ronce",
7
7
  "exports": {
8
- "./reset.css": "./src/reset.css",
9
- "./tokens.css": "./src/tokens.css",
10
- "./index.css": "./src/index.css",
11
- "./theme-default.css": "./theme-default/theme.css"
8
+ "./reset.css": "./reset.css",
9
+ "./tokens.css": "./tokens.css",
10
+ "./index.css": "./index.css",
11
+ "./theme-default.css": "./theme-default.css"
12
12
  },
13
13
  "files": [
14
+ "index.css",
15
+ "reset.css",
16
+ "tokens.css",
17
+ "theme-default.css",
14
18
  "src/",
15
19
  "theme-default/"
16
20
  ],
package/reset.css ADDED
@@ -0,0 +1 @@
1
+ @import "./src/reset.css";
package/src/index.css CHANGED
@@ -1,5 +1,6 @@
1
1
  /* RPG UI CSS Library */
2
2
  @import './reset.css';
3
+ @import './tokens.css';
3
4
  @import './animations.css';
4
5
 
5
6
  /* Primitives */
@@ -19,3 +20,5 @@
19
20
  @import './primitives/toast.css';
20
21
  @import './primitives/title-screen.css';
21
22
  @import './primitives/gameover.css';
23
+ @import './primitives/hud.css';
24
+ @import './primitives/shop.css';