@pitcher/css 2025.10.1-7.1760708300945 → 2025.10.1-7.1760708463235

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 (2) hide show
  1. package/README.md +64 -47
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -16,9 +16,15 @@ A comprehensive CSS framework with components for building modern web applicatio
16
16
  ### Via CDN (Recommended for Production)
17
17
 
18
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">
19
+ <link
20
+ href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&display=swap"
21
+ rel="stylesheet"
22
+ />
23
+ <link
24
+ rel="stylesheet"
25
+ href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
26
+ />
27
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@pitcher/css" />
22
28
  <script src="https://cdn.jsdelivr.net/npm/@pitcher/js-api"></script>
23
29
  ```
24
30
 
@@ -29,7 +35,7 @@ npm install @pitcher/css
29
35
  ```
30
36
 
31
37
  ```html
32
- <link rel="stylesheet" href="node_modules/@pitcher/css/pitcher-ui.css">
38
+ <link rel="stylesheet" href="node_modules/@pitcher/css/pitcher-ui.css" />
33
39
  ```
34
40
 
35
41
  ## Development & Debugging
@@ -38,10 +44,10 @@ npm install @pitcher/css
38
44
 
39
45
  ```html
40
46
  <!-- Production (CDN) -->
41
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@pitcher/css">
47
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@pitcher/css" />
42
48
 
43
49
  <!-- Development (Local File) -->
44
- <link rel="stylesheet" href="pitcher-ui.css">
50
+ <link rel="stylesheet" href="pitcher-ui.css" />
45
51
  ```
46
52
 
47
53
  This allows you to make changes to `pitcher-ui.css` and see them reflected immediately without publishing to NPM.
@@ -51,38 +57,41 @@ This allows you to make changes to `pitcher-ui.css` and see them reflected immed
51
57
  ```html
52
58
  <!DOCTYPE html>
53
59
  <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>
60
+ <head>
61
+ <meta charset="UTF-8" />
62
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
63
+ <link
64
+ href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&display=swap"
65
+ rel="stylesheet"
66
+ />
67
+ <link
68
+ rel="stylesheet"
69
+ href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
70
+ />
71
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@pitcher/css" />
72
+ <script src="https://cdn.jsdelivr.net/npm/@pitcher/js-api"></script>
73
+ </head>
74
+ <body>
75
+ <div class="p-card">
76
+ <div class="p-card-header">Hello Pitcher</div>
77
+ <div class="p-card-body">
78
+ <p>Your first Pitcher UI component!</p>
79
+ <button class="p-btn p-btn-primary">Click Me</button>
80
+ </div>
68
81
  </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);
82
+
83
+ <script>
84
+ // Initialize Pitcher API and apply instance color
85
+ const api = window.pitcher?.useApi();
86
+ if (api) {
87
+ const env = await api.getEnv();
88
+ const instanceColor = env.pitcher?.instance?.color;
89
+ if (instanceColor) {
90
+ document.documentElement.style.setProperty('--p-primary', instanceColor);
91
+ }
80
92
  }
81
- }
82
- if (done) done();
83
- };
84
- </script>
85
- </body>
93
+ </script>
94
+ </body>
86
95
  </html>
87
96
  ```
88
97
 
@@ -91,11 +100,13 @@ This allows you to make changes to `pitcher-ui.css` and see them reflected immed
91
100
  The framework includes the following components:
92
101
 
93
102
  ### Layout & Structure
103
+
94
104
  - **Cards** - `.p-card`, `.p-card-header`, `.p-card-body`, `.p-card-footer`
95
105
  - **Panels** - `.p-panel`
96
106
  - **Breadcrumbs** - `.p-breadcrumb`
97
107
 
98
108
  ### Forms & Inputs
109
+
99
110
  - **Text Inputs** - `.p-input`
100
111
  - **Text Areas** - `.p-textarea`
101
112
  - **Selects** - `.p-select`
@@ -106,11 +117,13 @@ The framework includes the following components:
106
117
  - **File Upload** - `.p-file-upload`
107
118
 
108
119
  ### Buttons & Actions
120
+
109
121
  - **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
122
  - **Button Sizes** - `.p-btn-sm`, `.p-btn-lg`
111
123
  - **Action Buttons** - `.action-button`
112
124
 
113
125
  ### Feedback & Status
126
+
114
127
  - **Alerts** - `.p-alert`, `.p-alert-success`, `.p-alert-error`, `.p-alert-warning`, `.p-alert-info`
115
128
  - **Badges** - `.p-badge`, `.p-badge-success`, `.p-badge-error`, `.p-badge-warning`, `.p-badge-info`
116
129
  - **Tags** - `.p-tag`, `.p-tag-success`, `.p-tag-error`, `.p-tag-warning`, `.p-tag-info`
@@ -120,6 +133,7 @@ The framework includes the following components:
120
133
  - **Skeleton Loaders** - `.p-skeleton`, `.p-skeleton-text`, `.p-skeleton-title`, `.p-skeleton-circle`, `.p-skeleton-button`
121
134
 
122
135
  ### Navigation & Interactive
136
+
123
137
  - **Tabs** - `.p-tabs`, `.p-tab`, `.p-tab-content`
124
138
  - **Accordion** - `.p-accordion`, `.p-accordion-item`, `.p-accordion-header`, `.p-accordion-body`
125
139
  - **Dropdown** - `.p-dropdown`, `.p-dropdown-menu`, `.p-dropdown-item`
@@ -127,14 +141,17 @@ The framework includes the following components:
127
141
  - **Pagination** - `.p-pagination`, `.p-pagination-item`
128
142
 
129
143
  ### Data Display
144
+
130
145
  - **Tables** - `.p-table`, `.p-table-striped`
131
146
  - **List Group** - `.p-list-group`, `.p-list-item`
132
147
  - **Avatars** - `.p-avatar`, `.p-avatar-sm`, `.p-avatar-md`, `.p-avatar-lg`, `.p-avatar-xl`, `.p-avatar-group`
133
148
 
134
149
  ### Overlays
150
+
135
151
  - **Modals** - `.p-modal`, `.p-modal-content`, `.p-modal-header`, `.p-modal-body`, `.p-modal-footer`
136
152
 
137
153
  ### Utilities
154
+
138
155
  - **Spacing** - `.p-m-*`, `.p-p-*`, `.p-mt-*`, `.p-mb-*` (0-4)
139
156
  - **Flexbox** - `.p-flex`, `.p-flex-col`, `.p-flex-wrap`, `.p-items-center`, `.p-justify-between`, `.p-gap-*`
140
157
  - **Text** - `.p-text-xs`, `.p-text-sm`, `.p-text-md`, `.p-text-lg`, `.p-text-center`, `.p-text-uppercase`
@@ -148,18 +165,18 @@ The framework uses CSS variables for easy theming:
148
165
  ```css
149
166
  :root {
150
167
  /* 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;
168
+ --p-primary: #29335c;
169
+ --p-primary2: #4e5983;
170
+ --p-primary3: #7e88b1;
171
+ --p-primary4: #bfc5df;
172
+ --p-primary5: #e0e2ed;
173
+ --p-primary6: #f7f8fb;
157
174
 
158
175
  /* Status Colors */
159
- --p-success: #57A40F;
160
- --p-error: #BC1637;
161
- --p-warning: #E5C302;
162
- --p-info: #5BBFE3;
176
+ --p-success: #57a40f;
177
+ --p-error: #bc1637;
178
+ --p-warning: #e5c302;
179
+ --p-info: #5bbfe3;
163
180
 
164
181
  /* Spacing */
165
182
  --spacing-1: 0.25rem;
@@ -192,7 +209,7 @@ async function applyInstanceColor() {
192
209
  const instanceColor = env.pitcher?.instance?.color;
193
210
 
194
211
  if (instanceColor) {
195
- document.documentElement.style.setProperty('--p-primary', instanceColor);
212
+ document.documentElement.style.setProperty("--p-primary", instanceColor);
196
213
  }
197
214
  }
198
215
  ```
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pitcher/css",
3
- "version": "2025.10.17.1760708300945",
3
+ "version": "2025.10.17.1760708463235",
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",