@pitcher/css 2025.10.1-7.1760702439347 → 2025.10.1-7.1760708300945
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 +224 -0
- package/index.html +291 -54
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,224 @@
|
|
|
1
|
+
# Pitcher UI Framework (@pitcher/css)
|
|
2
|
+
|
|
3
|
+
A comprehensive CSS framework with components for building modern web applications, specifically designed for Pitcher embedded apps.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- **Zero Build Step** - Pure CSS framework, no compilation required
|
|
8
|
+
- **Comprehensive Components** - Buttons, forms, tables, modals, tabs, tooltips, and more
|
|
9
|
+
- **Font Awesome Integration** - Built-in icon support
|
|
10
|
+
- **Instance Color Theming** - Automatically adapts to your Pitcher instance color
|
|
11
|
+
- **Responsive Design** - Mobile-first approach with responsive utilities
|
|
12
|
+
- **Pitcher API Integration** - Works seamlessly with `@pitcher/js-api`
|
|
13
|
+
|
|
14
|
+
## Installation
|
|
15
|
+
|
|
16
|
+
### Via CDN (Recommended for Production)
|
|
17
|
+
|
|
18
|
+
```html
|
|
19
|
+
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
20
|
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
21
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@pitcher/css">
|
|
22
|
+
<script src="https://cdn.jsdelivr.net/npm/@pitcher/js-api"></script>
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
### Via NPM
|
|
26
|
+
|
|
27
|
+
```bash
|
|
28
|
+
npm install @pitcher/css
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
```html
|
|
32
|
+
<link rel="stylesheet" href="node_modules/@pitcher/css/pitcher-ui.css">
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
## Development & Debugging
|
|
36
|
+
|
|
37
|
+
**To develop or debug the CSS locally**, change the import from CDN to a local file:
|
|
38
|
+
|
|
39
|
+
```html
|
|
40
|
+
<!-- Production (CDN) -->
|
|
41
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@pitcher/css">
|
|
42
|
+
|
|
43
|
+
<!-- Development (Local File) -->
|
|
44
|
+
<link rel="stylesheet" href="pitcher-ui.css">
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
This allows you to make changes to `pitcher-ui.css` and see them reflected immediately without publishing to NPM.
|
|
48
|
+
|
|
49
|
+
## Quick Start
|
|
50
|
+
|
|
51
|
+
```html
|
|
52
|
+
<!DOCTYPE html>
|
|
53
|
+
<html lang="en">
|
|
54
|
+
<head>
|
|
55
|
+
<meta charset="UTF-8">
|
|
56
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
57
|
+
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
58
|
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
59
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@pitcher/css">
|
|
60
|
+
<script src="https://cdn.jsdelivr.net/npm/@pitcher/js-api"></script>
|
|
61
|
+
</head>
|
|
62
|
+
<body>
|
|
63
|
+
<div class="p-card">
|
|
64
|
+
<div class="p-card-header">Hello Pitcher</div>
|
|
65
|
+
<div class="p-card-body">
|
|
66
|
+
<p>Your first Pitcher UI component!</p>
|
|
67
|
+
<button class="p-btn p-btn-primary">Click Me</button>
|
|
68
|
+
</div>
|
|
69
|
+
</div>
|
|
70
|
+
|
|
71
|
+
<script>
|
|
72
|
+
// Initialize Pitcher API and apply instance color
|
|
73
|
+
window.initialize = async function (data, done) {
|
|
74
|
+
const api = window.pitcher?.useApi();
|
|
75
|
+
if (api) {
|
|
76
|
+
const env = await api.getEnv();
|
|
77
|
+
const instanceColor = env.pitcher?.instance?.color;
|
|
78
|
+
if (instanceColor) {
|
|
79
|
+
document.documentElement.style.setProperty('--p-primary', instanceColor);
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
if (done) done();
|
|
83
|
+
};
|
|
84
|
+
</script>
|
|
85
|
+
</body>
|
|
86
|
+
</html>
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
## Components
|
|
90
|
+
|
|
91
|
+
The framework includes the following components:
|
|
92
|
+
|
|
93
|
+
### Layout & Structure
|
|
94
|
+
- **Cards** - `.p-card`, `.p-card-header`, `.p-card-body`, `.p-card-footer`
|
|
95
|
+
- **Panels** - `.p-panel`
|
|
96
|
+
- **Breadcrumbs** - `.p-breadcrumb`
|
|
97
|
+
|
|
98
|
+
### Forms & Inputs
|
|
99
|
+
- **Text Inputs** - `.p-input`
|
|
100
|
+
- **Text Areas** - `.p-textarea`
|
|
101
|
+
- **Selects** - `.p-select`
|
|
102
|
+
- **Checkboxes** - `.p-checkbox`
|
|
103
|
+
- **Radio Buttons** - `.p-radio`
|
|
104
|
+
- **Toggles** - `.p-toggle`
|
|
105
|
+
- **Labels** - `.p-label`, `.p-label.required`
|
|
106
|
+
- **File Upload** - `.p-file-upload`
|
|
107
|
+
|
|
108
|
+
### Buttons & Actions
|
|
109
|
+
- **Buttons** - `.p-btn`, `.p-btn-primary`, `.p-btn-secondary`, `.p-btn-success`, `.p-btn-danger`, `.p-btn-warning`, `.p-btn-info`, `.p-btn-text`
|
|
110
|
+
- **Button Sizes** - `.p-btn-sm`, `.p-btn-lg`
|
|
111
|
+
- **Action Buttons** - `.action-button`
|
|
112
|
+
|
|
113
|
+
### Feedback & Status
|
|
114
|
+
- **Alerts** - `.p-alert`, `.p-alert-success`, `.p-alert-error`, `.p-alert-warning`, `.p-alert-info`
|
|
115
|
+
- **Badges** - `.p-badge`, `.p-badge-success`, `.p-badge-error`, `.p-badge-warning`, `.p-badge-info`
|
|
116
|
+
- **Tags** - `.p-tag`, `.p-tag-success`, `.p-tag-error`, `.p-tag-warning`, `.p-tag-info`
|
|
117
|
+
- **Toast Notifications** - `.p-toast`, `.p-toast-container`
|
|
118
|
+
- **Progress Bars** - `.p-progress`, `.p-progress-bar`
|
|
119
|
+
- **Spinners** - `.p-spinner`
|
|
120
|
+
- **Skeleton Loaders** - `.p-skeleton`, `.p-skeleton-text`, `.p-skeleton-title`, `.p-skeleton-circle`, `.p-skeleton-button`
|
|
121
|
+
|
|
122
|
+
### Navigation & Interactive
|
|
123
|
+
- **Tabs** - `.p-tabs`, `.p-tab`, `.p-tab-content`
|
|
124
|
+
- **Accordion** - `.p-accordion`, `.p-accordion-item`, `.p-accordion-header`, `.p-accordion-body`
|
|
125
|
+
- **Dropdown** - `.p-dropdown`, `.p-dropdown-menu`, `.p-dropdown-item`
|
|
126
|
+
- **Tooltips** - `.p-tooltip`, `.p-tooltip-text`
|
|
127
|
+
- **Pagination** - `.p-pagination`, `.p-pagination-item`
|
|
128
|
+
|
|
129
|
+
### Data Display
|
|
130
|
+
- **Tables** - `.p-table`, `.p-table-striped`
|
|
131
|
+
- **List Group** - `.p-list-group`, `.p-list-item`
|
|
132
|
+
- **Avatars** - `.p-avatar`, `.p-avatar-sm`, `.p-avatar-md`, `.p-avatar-lg`, `.p-avatar-xl`, `.p-avatar-group`
|
|
133
|
+
|
|
134
|
+
### Overlays
|
|
135
|
+
- **Modals** - `.p-modal`, `.p-modal-content`, `.p-modal-header`, `.p-modal-body`, `.p-modal-footer`
|
|
136
|
+
|
|
137
|
+
### Utilities
|
|
138
|
+
- **Spacing** - `.p-m-*`, `.p-p-*`, `.p-mt-*`, `.p-mb-*` (0-4)
|
|
139
|
+
- **Flexbox** - `.p-flex`, `.p-flex-col`, `.p-flex-wrap`, `.p-items-center`, `.p-justify-between`, `.p-gap-*`
|
|
140
|
+
- **Text** - `.p-text-xs`, `.p-text-sm`, `.p-text-md`, `.p-text-lg`, `.p-text-center`, `.p-text-uppercase`
|
|
141
|
+
- **Colors** - `.p-text-primary`, `.p-text-success`, `.p-text-error`, `.p-text-warning`, `.p-text-gray`, `.p-text-muted`
|
|
142
|
+
- **Fonts** - `.p-font-normal`, `.p-font-medium`, `.p-font-semibold`, `.p-font-bold`
|
|
143
|
+
|
|
144
|
+
## CSS Variables
|
|
145
|
+
|
|
146
|
+
The framework uses CSS variables for easy theming:
|
|
147
|
+
|
|
148
|
+
```css
|
|
149
|
+
:root {
|
|
150
|
+
/* Primary Colors */
|
|
151
|
+
--p-primary: #29335C;
|
|
152
|
+
--p-primary2: #4E5983;
|
|
153
|
+
--p-primary3: #7E88B1;
|
|
154
|
+
--p-primary4: #BFC5DF;
|
|
155
|
+
--p-primary5: #E0E2ED;
|
|
156
|
+
--p-primary6: #F7F8FB;
|
|
157
|
+
|
|
158
|
+
/* Status Colors */
|
|
159
|
+
--p-success: #57A40F;
|
|
160
|
+
--p-error: #BC1637;
|
|
161
|
+
--p-warning: #E5C302;
|
|
162
|
+
--p-info: #5BBFE3;
|
|
163
|
+
|
|
164
|
+
/* Spacing */
|
|
165
|
+
--spacing-1: 0.25rem;
|
|
166
|
+
--spacing-2: 0.5rem;
|
|
167
|
+
--spacing-3: 0.75rem;
|
|
168
|
+
--spacing-4: 1rem;
|
|
169
|
+
|
|
170
|
+
/* ... and more */
|
|
171
|
+
}
|
|
172
|
+
```
|
|
173
|
+
|
|
174
|
+
Override these variables to customize the theme:
|
|
175
|
+
|
|
176
|
+
```css
|
|
177
|
+
:root {
|
|
178
|
+
--p-primary: #3b82f6; /* Custom blue */
|
|
179
|
+
}
|
|
180
|
+
```
|
|
181
|
+
|
|
182
|
+
## Instance Color Theming
|
|
183
|
+
|
|
184
|
+
The framework automatically applies your Pitcher instance color when embedded:
|
|
185
|
+
|
|
186
|
+
```javascript
|
|
187
|
+
async function applyInstanceColor() {
|
|
188
|
+
const api = window.pitcher?.useApi();
|
|
189
|
+
if (!api) return;
|
|
190
|
+
|
|
191
|
+
const env = await api.getEnv();
|
|
192
|
+
const instanceColor = env.pitcher?.instance?.color;
|
|
193
|
+
|
|
194
|
+
if (instanceColor) {
|
|
195
|
+
document.documentElement.style.setProperty('--p-primary', instanceColor);
|
|
196
|
+
}
|
|
197
|
+
}
|
|
198
|
+
```
|
|
199
|
+
|
|
200
|
+
## Examples
|
|
201
|
+
|
|
202
|
+
See `index.html` for comprehensive component examples and usage patterns.
|
|
203
|
+
|
|
204
|
+
## Browser Support
|
|
205
|
+
|
|
206
|
+
- Chrome (latest)
|
|
207
|
+
- Firefox (latest)
|
|
208
|
+
- Safari (latest)
|
|
209
|
+
- Edge (latest)
|
|
210
|
+
- Mobile browsers (iOS Safari, Chrome Android)
|
|
211
|
+
|
|
212
|
+
## License
|
|
213
|
+
|
|
214
|
+
MIT
|
|
215
|
+
|
|
216
|
+
## Contributing
|
|
217
|
+
|
|
218
|
+
Issues and pull requests are welcome! This framework is specifically designed for Pitcher embedded apps but can be used in any web project.
|
|
219
|
+
|
|
220
|
+
## Links
|
|
221
|
+
|
|
222
|
+
- **NPM**: `@pitcher/css`
|
|
223
|
+
- **CDN**: `https://cdn.jsdelivr.net/npm/@pitcher/css`
|
|
224
|
+
- **Pitcher JS API**: `@pitcher/js-api`
|
package/index.html
CHANGED
|
@@ -6,7 +6,8 @@
|
|
|
6
6
|
<title>Pitcher UI Extended Demo</title>
|
|
7
7
|
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
8
8
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
9
|
-
<link rel="stylesheet" href="pitcher
|
|
9
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@pitcher/css">
|
|
10
|
+
<script src="https://cdn.jsdelivr.net/npm/@pitcher/js-api"></script>
|
|
10
11
|
</head>
|
|
11
12
|
<body>
|
|
12
13
|
<h1 class="p-mb-4">Pitcher UI Framework - Extended Demo</h1>
|
|
@@ -315,19 +316,188 @@
|
|
|
315
316
|
</div>
|
|
316
317
|
</div>
|
|
317
318
|
|
|
319
|
+
<!-- Utility Classes Showcase -->
|
|
320
|
+
<div class="p-card p-mb-4">
|
|
321
|
+
<div class="p-card-header">Utility Classes Showcase</div>
|
|
322
|
+
<div class="p-card-body">
|
|
323
|
+
|
|
324
|
+
<!-- Spacing (Margin & Padding) -->
|
|
325
|
+
<div class="p-mb-4">
|
|
326
|
+
<strong class="p-mb-2" style="display: block;">Spacing Utilities:</strong>
|
|
327
|
+
<div class="p-bg-primary" style="display: inline-block;">
|
|
328
|
+
<div class="p-m-1" style="background: white; border: 1px dashed var(--p-primary3);">m-1 (margin: 0.25rem)</div>
|
|
329
|
+
</div>
|
|
330
|
+
<div class="p-bg-primary p-ml-2" style="display: inline-block;">
|
|
331
|
+
<div class="p-m-2" style="background: white; border: 1px dashed var(--p-primary3);">m-2 (margin: 0.5rem)</div>
|
|
332
|
+
</div>
|
|
333
|
+
<div class="p-bg-primary p-ml-2" style="display: inline-block;">
|
|
334
|
+
<div class="p-m-3" style="background: white; border: 1px dashed var(--p-primary3);">m-3 (margin: 0.75rem)</div>
|
|
335
|
+
</div>
|
|
336
|
+
<div class="p-bg-primary p-ml-2" style="display: inline-block;">
|
|
337
|
+
<div class="p-m-4" style="background: white; border: 1px dashed var(--p-primary3);">m-4 (margin: 1rem)</div>
|
|
338
|
+
</div>
|
|
339
|
+
<div class="p-mt-3" style="border: 1px solid var(--rsk-color-gray-200); display: inline-block;">
|
|
340
|
+
<div class="p-p-2" style="background: var(--p-primary6);">p-2 (padding: 0.5rem)</div>
|
|
341
|
+
</div>
|
|
342
|
+
<div class="p-mt-3 p-ml-2" style="border: 1px solid var(--rsk-color-gray-200); display: inline-block;">
|
|
343
|
+
<div class="p-p-4" style="background: var(--p-primary6);">p-4 (padding: 1rem)</div>
|
|
344
|
+
</div>
|
|
345
|
+
<p class="p-text-xs p-text-gray p-mt-2 p-m-0">Classes: .p-m-0 through .p-m-4, .p-mt-*, .p-mb-*, .p-p-0 through .p-p-4</p>
|
|
346
|
+
</div>
|
|
347
|
+
|
|
348
|
+
<hr style="border: none; border-top: 1px solid var(--rsk-color-gray-200); margin: var(--spacing-4) 0;">
|
|
349
|
+
|
|
350
|
+
<!-- Flexbox Utilities -->
|
|
351
|
+
<div class="p-mb-4">
|
|
352
|
+
<strong class="p-mb-2" style="display: block;">Flexbox Utilities:</strong>
|
|
353
|
+
<div class="p-flex p-gap-2 p-mb-2" style="background: var(--p-primary6); padding: var(--spacing-2); border-radius: var(--radius-md);">
|
|
354
|
+
<div style="background: white; padding: var(--spacing-2); border-radius: var(--radius-sm);">Item 1</div>
|
|
355
|
+
<div style="background: white; padding: var(--spacing-2); border-radius: var(--radius-sm);">Item 2</div>
|
|
356
|
+
<div style="background: white; padding: var(--spacing-2); border-radius: var(--radius-sm);">Item 3</div>
|
|
357
|
+
</div>
|
|
358
|
+
<p class="p-text-xs p-m-0 p-mb-2">.p-flex .p-gap-2 - Flex with gap</p>
|
|
359
|
+
|
|
360
|
+
<div class="p-flex p-items-center p-gap-2 p-mb-2" style="background: var(--p-primary6); padding: var(--spacing-2); border-radius: var(--radius-md); height: 60px;">
|
|
361
|
+
<div style="background: white; padding: var(--spacing-2); border-radius: var(--radius-sm);">Centered</div>
|
|
362
|
+
<div style="background: white; padding: var(--spacing-2); border-radius: var(--radius-sm); height: 40px;">Vertically</div>
|
|
363
|
+
</div>
|
|
364
|
+
<p class="p-text-xs p-m-0 p-mb-2">.p-flex .p-items-center - Vertically centered items</p>
|
|
365
|
+
|
|
366
|
+
<div class="p-flex p-justify-between" style="background: var(--p-primary6); padding: var(--spacing-2); border-radius: var(--radius-md);">
|
|
367
|
+
<div style="background: white; padding: var(--spacing-2); border-radius: var(--radius-sm);">Left</div>
|
|
368
|
+
<div style="background: white; padding: var(--spacing-2); border-radius: var(--radius-sm);">Right</div>
|
|
369
|
+
</div>
|
|
370
|
+
<p class="p-text-xs p-text-gray p-mt-2 p-m-0">Classes: .p-flex, .p-flex-col, .p-flex-wrap, .p-items-center, .p-justify-between, .p-justify-center, .p-justify-end, .p-gap-1 through .p-gap-4</p>
|
|
371
|
+
</div>
|
|
372
|
+
|
|
373
|
+
<hr style="border: none; border-top: 1px solid var(--rsk-color-gray-200); margin: var(--spacing-4) 0;">
|
|
374
|
+
|
|
375
|
+
<!-- Text Alignment -->
|
|
376
|
+
<div class="p-mb-4">
|
|
377
|
+
<strong class="p-mb-2" style="display: block;">Text Alignment:</strong>
|
|
378
|
+
<div class="p-text-left p-mb-1" style="background: var(--p-primary6); padding: var(--spacing-2); border-radius: var(--radius-md);">.p-text-left - Left aligned</div>
|
|
379
|
+
<div class="p-text-center p-mb-1" style="background: var(--p-primary6); padding: var(--spacing-2); border-radius: var(--radius-md);">.p-text-center - Center aligned</div>
|
|
380
|
+
<div class="p-text-right" style="background: var(--p-primary6); padding: var(--spacing-2); border-radius: var(--radius-md);">.p-text-right - Right aligned</div>
|
|
381
|
+
</div>
|
|
382
|
+
|
|
383
|
+
<hr style="border: none; border-top: 1px solid var(--rsk-color-gray-200); margin: var(--spacing-4) 0;">
|
|
384
|
+
|
|
385
|
+
<!-- Text Transform -->
|
|
386
|
+
<div class="p-mb-4">
|
|
387
|
+
<strong class="p-mb-2" style="display: block;">Text Transform:</strong>
|
|
388
|
+
<p class="p-text-uppercase p-m-0 p-mb-1">.p-text-uppercase - uppercase text</p>
|
|
389
|
+
<p class="p-text-lowercase p-m-0 p-mb-1">.P-TEXT-LOWERCASE - LOWERCASE TEXT</p>
|
|
390
|
+
<p class="p-text-capitalize p-m-0">.p-text-capitalize - capitalize each word</p>
|
|
391
|
+
</div>
|
|
392
|
+
|
|
393
|
+
<hr style="border: none; border-top: 1px solid var(--rsk-color-gray-200); margin: var(--spacing-4) 0;">
|
|
394
|
+
|
|
395
|
+
<!-- Text Decoration -->
|
|
396
|
+
<div class="p-mb-4">
|
|
397
|
+
<strong class="p-mb-2" style="display: block;">Text Decoration:</strong>
|
|
398
|
+
<p class="p-text-underline p-m-0 p-mb-1">.p-text-underline - Underlined text</p>
|
|
399
|
+
<p class="p-text-line-through p-m-0 p-mb-1">.p-text-line-through - Strikethrough text</p>
|
|
400
|
+
<p class="p-text-no-underline p-m-0" style="text-decoration: underline;">.p-text-no-underline - Removes underline</p>
|
|
401
|
+
</div>
|
|
402
|
+
|
|
403
|
+
<hr style="border: none; border-top: 1px solid var(--rsk-color-gray-200); margin: var(--spacing-4) 0;">
|
|
404
|
+
|
|
405
|
+
<!-- Line Height -->
|
|
406
|
+
<div class="p-mb-4">
|
|
407
|
+
<strong class="p-mb-2" style="display: block;">Line Height Utilities:</strong>
|
|
408
|
+
<div class="p-mb-2" style="background: var(--p-primary6); padding: var(--spacing-2); border-radius: var(--radius-md);">
|
|
409
|
+
<p class="p-leading-tight p-m-0">.p-leading-tight (1.25) - Tight line height creates compact text blocks that work well for headings and short content.</p>
|
|
410
|
+
</div>
|
|
411
|
+
<div class="p-mb-2" style="background: var(--p-primary6); padding: var(--spacing-2); border-radius: var(--radius-md);">
|
|
412
|
+
<p class="p-leading-normal p-m-0">.p-leading-normal (1.5) - Normal line height provides balanced spacing for most body text.</p>
|
|
413
|
+
</div>
|
|
414
|
+
<div style="background: var(--p-primary6); padding: var(--spacing-2); border-radius: var(--radius-md);">
|
|
415
|
+
<p class="p-leading-relaxed p-m-0">.p-leading-relaxed (1.625) - Relaxed line height improves readability for longer paragraphs.</p>
|
|
416
|
+
</div>
|
|
417
|
+
<p class="p-text-xs p-text-gray p-mt-2 p-m-0">Classes: .p-leading-none, .p-leading-tight, .p-leading-snug, .p-leading-normal, .p-leading-relaxed, .p-leading-loose</p>
|
|
418
|
+
</div>
|
|
419
|
+
|
|
420
|
+
<hr style="border: none; border-top: 1px solid var(--rsk-color-gray-200); margin: var(--spacing-4) 0;">
|
|
421
|
+
|
|
422
|
+
<!-- Letter Spacing -->
|
|
423
|
+
<div class="p-mb-4">
|
|
424
|
+
<strong class="p-mb-2" style="display: block;">Letter Spacing Utilities:</strong>
|
|
425
|
+
<p class="p-tracking-tighter p-m-0 p-mb-1">.p-tracking-tighter - Tighter letter spacing</p>
|
|
426
|
+
<p class="p-tracking-normal p-m-0 p-mb-1">.p-tracking-normal - Normal letter spacing</p>
|
|
427
|
+
<p class="p-tracking-wide p-m-0 p-mb-1">.p-tracking-wide - Wide letter spacing</p>
|
|
428
|
+
<p class="p-tracking-widest p-m-0">.p-tracking-widest - Widest letter spacing</p>
|
|
429
|
+
<p class="p-text-xs p-text-gray p-mt-2 p-m-0">Classes: .p-tracking-tighter, .p-tracking-tight, .p-tracking-normal, .p-tracking-wide, .p-tracking-wider, .p-tracking-widest</p>
|
|
430
|
+
</div>
|
|
431
|
+
|
|
432
|
+
<hr style="border: none; border-top: 1px solid var(--rsk-color-gray-200); margin: var(--spacing-4) 0;">
|
|
433
|
+
|
|
434
|
+
<!-- Width & Display -->
|
|
435
|
+
<div class="p-mb-4">
|
|
436
|
+
<strong class="p-mb-2" style="display: block;">Width Utilities:</strong>
|
|
437
|
+
<div class="p-w-full" style="background: var(--p-primary6); padding: var(--spacing-2); border-radius: var(--radius-md); text-align: center;">
|
|
438
|
+
.p-w-full - Full width (100%)
|
|
439
|
+
</div>
|
|
440
|
+
</div>
|
|
441
|
+
|
|
442
|
+
<hr style="border: none; border-top: 1px solid var(--rsk-color-gray-200); margin: var(--spacing-4) 0;">
|
|
443
|
+
|
|
444
|
+
<!-- Background Colors -->
|
|
445
|
+
<div>
|
|
446
|
+
<strong class="p-mb-2" style="display: block;">Background Colors:</strong>
|
|
447
|
+
<div class="p-flex p-gap-2 p-flex-wrap">
|
|
448
|
+
<div class="p-bg-primary" style="padding: var(--spacing-3); border-radius: var(--radius-md); flex: 1; min-width: 120px; text-align: center;">
|
|
449
|
+
.p-bg-primary
|
|
450
|
+
</div>
|
|
451
|
+
<div class="p-bg-white" style="padding: var(--spacing-3); border-radius: var(--radius-md); border: 1px solid var(--rsk-color-gray-200); flex: 1; min-width: 120px; text-align: center;">
|
|
452
|
+
.p-bg-white
|
|
453
|
+
</div>
|
|
454
|
+
<div class="p-bg-success" style="padding: var(--spacing-3); border-radius: var(--radius-md); flex: 1; min-width: 120px; text-align: center;">
|
|
455
|
+
.p-bg-success
|
|
456
|
+
</div>
|
|
457
|
+
<div class="p-bg-error" style="padding: var(--spacing-3); border-radius: var(--radius-md); flex: 1; min-width: 120px; text-align: center;">
|
|
458
|
+
.p-bg-error
|
|
459
|
+
</div>
|
|
460
|
+
</div>
|
|
461
|
+
</div>
|
|
462
|
+
|
|
463
|
+
</div>
|
|
464
|
+
</div>
|
|
465
|
+
|
|
318
466
|
<!-- Tabs -->
|
|
319
467
|
<div class="p-card p-mb-4">
|
|
320
468
|
<div class="p-card-header">Tabs</div>
|
|
321
469
|
<div class="p-card-body p-p-0">
|
|
322
470
|
<div class="p-tabs" style="margin: 0;">
|
|
323
|
-
<button class="p-tab active">Overview</button>
|
|
324
|
-
<button class="p-tab">Features</button>
|
|
325
|
-
<button class="p-tab">Settings</button>
|
|
471
|
+
<button class="p-tab active" data-tab="overview">Overview</button>
|
|
472
|
+
<button class="p-tab" data-tab="features">Features</button>
|
|
473
|
+
<button class="p-tab" data-tab="settings">Settings</button>
|
|
326
474
|
<button class="p-tab" disabled>Disabled</button>
|
|
327
475
|
</div>
|
|
328
|
-
<div class="p-tab-content" style="padding: var(--spacing-4);">
|
|
476
|
+
<div class="p-tab-content active" data-tab-content="overview" style="padding: var(--spacing-4);">
|
|
329
477
|
<h5>Overview</h5>
|
|
330
|
-
<p>This is the overview tab content.
|
|
478
|
+
<p>This is the overview tab content. Click on other tabs to see different content.</p>
|
|
479
|
+
</div>
|
|
480
|
+
<div class="p-tab-content" data-tab-content="features" style="padding: var(--spacing-4); display: none;">
|
|
481
|
+
<h5>Features</h5>
|
|
482
|
+
<p>Our framework includes comprehensive components for building modern web applications.</p>
|
|
483
|
+
<ul>
|
|
484
|
+
<li>Responsive design system</li>
|
|
485
|
+
<li>Customizable color themes</li>
|
|
486
|
+
<li>Font Awesome icon support</li>
|
|
487
|
+
<li>Interactive components</li>
|
|
488
|
+
</ul>
|
|
489
|
+
</div>
|
|
490
|
+
<div class="p-tab-content" data-tab-content="settings" style="padding: var(--spacing-4); display: none;">
|
|
491
|
+
<h5>Settings</h5>
|
|
492
|
+
<p>Configure your application settings and preferences here.</p>
|
|
493
|
+
<div class="p-form-group">
|
|
494
|
+
<label class="p-label">Theme Color</label>
|
|
495
|
+
<select class="p-select">
|
|
496
|
+
<option>Default</option>
|
|
497
|
+
<option>Dark</option>
|
|
498
|
+
<option>Light</option>
|
|
499
|
+
</select>
|
|
500
|
+
</div>
|
|
331
501
|
</div>
|
|
332
502
|
</div>
|
|
333
503
|
</div>
|
|
@@ -397,7 +567,7 @@
|
|
|
397
567
|
</div>
|
|
398
568
|
<div>
|
|
399
569
|
<strong>Dropdown:</strong><br><br>
|
|
400
|
-
<div class="p-dropdown
|
|
570
|
+
<div class="p-dropdown">
|
|
401
571
|
<button class="p-btn p-btn-primary" onclick="this.parentElement.classList.toggle('active')">Actions ▾</button>
|
|
402
572
|
<div class="p-dropdown-menu">
|
|
403
573
|
<div class="p-dropdown-header">Actions</div>
|
|
@@ -513,32 +683,12 @@
|
|
|
513
683
|
</div>
|
|
514
684
|
</div>
|
|
515
685
|
|
|
516
|
-
<!-- Toast
|
|
686
|
+
<!-- Toast Notifications -->
|
|
517
687
|
<div class="p-card p-mb-4">
|
|
518
688
|
<div class="p-card-header">Toast Notifications</div>
|
|
519
689
|
<div class="p-card-body">
|
|
520
|
-
<p class="p-mb-3">Click the button to show a toast notification
|
|
690
|
+
<p class="p-mb-3">Click the button to show a toast notification:</p>
|
|
521
691
|
<button class="p-btn p-btn-primary" onclick="showToast()">Show Toast</button>
|
|
522
|
-
|
|
523
|
-
<div class="p-mt-4">
|
|
524
|
-
<strong>Static Examples:</strong>
|
|
525
|
-
<div style="position: relative; max-width: 400px; margin-top: 1rem;">
|
|
526
|
-
<div class="p-toast p-toast-success" style="animation: none; margin-bottom: 0.5rem;">
|
|
527
|
-
<div class="p-toast-content">
|
|
528
|
-
<div class="p-toast-title">Success!</div>
|
|
529
|
-
<div class="p-toast-message">Your changes have been saved.</div>
|
|
530
|
-
</div>
|
|
531
|
-
<button class="p-toast-close">×</button>
|
|
532
|
-
</div>
|
|
533
|
-
<div class="p-toast p-toast-info" style="animation: none;">
|
|
534
|
-
<div class="p-toast-content">
|
|
535
|
-
<div class="p-toast-title">Info</div>
|
|
536
|
-
<div class="p-toast-message">You have 3 unread messages.</div>
|
|
537
|
-
</div>
|
|
538
|
-
<button class="p-toast-close">×</button>
|
|
539
|
-
</div>
|
|
540
|
-
</div>
|
|
541
|
-
</div>
|
|
542
692
|
</div>
|
|
543
693
|
</div>
|
|
544
694
|
|
|
@@ -567,35 +717,122 @@
|
|
|
567
717
|
</div>
|
|
568
718
|
</div>
|
|
569
719
|
|
|
570
|
-
<!-- Toast Container -->
|
|
571
|
-
<div id="toastContainer" class="p-toast-container"></div>
|
|
572
|
-
|
|
573
720
|
<script>
|
|
574
|
-
//
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
721
|
+
// Initialize Pitcher API
|
|
722
|
+
let api;
|
|
723
|
+
try {
|
|
724
|
+
api = window.pitcher?.useApi();
|
|
725
|
+
} catch (e) {
|
|
726
|
+
console.log('Pitcher API not available:', e);
|
|
727
|
+
}
|
|
728
|
+
|
|
729
|
+
// Instance Color Support - applies the instance's primary color as theme
|
|
730
|
+
async function applyInstanceColor() {
|
|
731
|
+
try {
|
|
732
|
+
// Don't apply instance color in admin context
|
|
733
|
+
if (window.parent?.jsApiLocation === 'admin') {
|
|
734
|
+
console.log('Admin context detected, skipping instance color');
|
|
735
|
+
return;
|
|
736
|
+
}
|
|
737
|
+
|
|
738
|
+
if (!api) return;
|
|
589
739
|
|
|
590
|
-
|
|
591
|
-
|
|
740
|
+
const env = await api.getEnv();
|
|
741
|
+
const instanceColor = env.pitcher?.instance?.color;
|
|
592
742
|
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
743
|
+
if (instanceColor) {
|
|
744
|
+
const root = document.documentElement;
|
|
745
|
+
root.style.setProperty('--p-primary', instanceColor);
|
|
746
|
+
console.log('Applied instance color:', instanceColor);
|
|
747
|
+
}
|
|
748
|
+
} catch (error) {
|
|
749
|
+
console.log('Could not load instance color:', error);
|
|
750
|
+
}
|
|
598
751
|
}
|
|
752
|
+
|
|
753
|
+
// Color adjustment helper
|
|
754
|
+
function adjustColorBrightness(color, percent) {
|
|
755
|
+
const hex = color.replace('#', '');
|
|
756
|
+
const r = parseInt(hex.substr(0, 2), 16);
|
|
757
|
+
const g = parseInt(hex.substr(2, 2), 16);
|
|
758
|
+
const b = parseInt(hex.substr(4, 2), 16);
|
|
759
|
+
|
|
760
|
+
const newR = Math.max(0, Math.min(255, r + (r * percent / 100)));
|
|
761
|
+
const newG = Math.max(0, Math.min(255, g + (g * percent / 100)));
|
|
762
|
+
const newB = Math.max(0, Math.min(255, b + (b * percent / 100)));
|
|
763
|
+
|
|
764
|
+
return '#' + Math.round(newR).toString(16).padStart(2, '0') +
|
|
765
|
+
Math.round(newG).toString(16).padStart(2, '0') +
|
|
766
|
+
Math.round(newB).toString(16).padStart(2, '0');
|
|
767
|
+
}
|
|
768
|
+
|
|
769
|
+
// Toast notification using Pitcher API
|
|
770
|
+
window.showToast = function(message = 'This is a toast notification!', type = 'success') {
|
|
771
|
+
if (api && api.toast) {
|
|
772
|
+
api.toast({ message, type });
|
|
773
|
+
} else {
|
|
774
|
+
console.warn('Pitcher API not available');
|
|
775
|
+
}
|
|
776
|
+
};
|
|
777
|
+
|
|
778
|
+
// Tab Switching Functionality
|
|
779
|
+
let tabsInitialized = false;
|
|
780
|
+
function initializeTabs() {
|
|
781
|
+
if (tabsInitialized) return;
|
|
782
|
+
|
|
783
|
+
const tabs = document.querySelectorAll('.p-tab[data-tab]');
|
|
784
|
+
const tabContents = document.querySelectorAll('.p-tab-content[data-tab-content]');
|
|
785
|
+
|
|
786
|
+
if (tabs.length === 0) return; // DOM not ready yet
|
|
787
|
+
|
|
788
|
+
tabs.forEach(tab => {
|
|
789
|
+
tab.addEventListener('click', () => {
|
|
790
|
+
if (tab.disabled) return;
|
|
791
|
+
|
|
792
|
+
const targetTab = tab.dataset.tab;
|
|
793
|
+
|
|
794
|
+
// Remove active class from all tabs and contents
|
|
795
|
+
tabs.forEach(t => t.classList.remove('active'));
|
|
796
|
+
tabContents.forEach(content => {
|
|
797
|
+
content.classList.remove('active');
|
|
798
|
+
content.style.display = 'none';
|
|
799
|
+
});
|
|
800
|
+
|
|
801
|
+
// Add active class to clicked tab and corresponding content
|
|
802
|
+
tab.classList.add('active');
|
|
803
|
+
const targetContent = document.querySelector(`[data-tab-content="${targetTab}"]`);
|
|
804
|
+
if (targetContent) {
|
|
805
|
+
targetContent.classList.add('active');
|
|
806
|
+
targetContent.style.display = 'block';
|
|
807
|
+
}
|
|
808
|
+
});
|
|
809
|
+
});
|
|
810
|
+
|
|
811
|
+
tabsInitialized = true;
|
|
812
|
+
console.log('Tabs initialized');
|
|
813
|
+
}
|
|
814
|
+
|
|
815
|
+
// Initialize immediately if DOM is ready, otherwise wait
|
|
816
|
+
if (document.readyState === 'loading') {
|
|
817
|
+
document.addEventListener('DOMContentLoaded', async () => {
|
|
818
|
+
await applyInstanceColor();
|
|
819
|
+
initializeTabs();
|
|
820
|
+
console.log('Pitcher UI Framework initialized');
|
|
821
|
+
});
|
|
822
|
+
} else {
|
|
823
|
+
// DOM already loaded
|
|
824
|
+
applyInstanceColor();
|
|
825
|
+
initializeTabs();
|
|
826
|
+
console.log('Pitcher UI Framework initialized');
|
|
827
|
+
}
|
|
828
|
+
|
|
829
|
+
// Embedded App Initialize function (if used in Pitcher)
|
|
830
|
+
window.initialize = async function (data, done) {
|
|
831
|
+
await applyInstanceColor();
|
|
832
|
+
initializeTabs();
|
|
833
|
+
|
|
834
|
+
if (done) done();
|
|
835
|
+
};
|
|
599
836
|
</script>
|
|
600
837
|
</body>
|
|
601
838
|
</html>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pitcher/css",
|
|
3
|
-
"version": "2025.10.17.
|
|
3
|
+
"version": "2025.10.17.1760708300945",
|
|
4
4
|
"description": "Pitcher UI Framework - A comprehensive CSS framework with components for building modern web applications",
|
|
5
5
|
"main": "pitcher-ui.css",
|
|
6
6
|
"style": "pitcher-ui.css",
|