@phcdevworks/spectre-ui 0.0.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.
- package/LICENSE +21 -0
- package/README.md +57 -0
- package/dist/base.css +42 -0
- package/dist/components.css +218 -0
- package/dist/index.cjs +182 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +69 -0
- package/dist/index.d.ts +69 -0
- package/dist/index.js +163 -0
- package/dist/index.js.map +1 -0
- package/dist/utilities.css +36 -0
- package/package.json +66 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025 PHCDevworks
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
# Spectre UI
|
|
2
|
+
|
|
3
|
+
**Spectre UI** is the core styling layer of the **Spectre Suite** — a cross-platform design system built on TailwindCSS and powered by Spectre Tokens.
|
|
4
|
+
|
|
5
|
+
It provides precompiled CSS, utilities, and styling primitives used by **Spectre Blocks** (WordPress), **Spectre Astro**, **Spectre 11ty**, and future Spectre tools.
|
|
6
|
+
|
|
7
|
+
> One design system. Many frameworks. Full consistency.
|
|
8
|
+
|
|
9
|
+
---
|
|
10
|
+
|
|
11
|
+
## Overview
|
|
12
|
+
|
|
13
|
+
Spectre UI delivers a unified design language across multiple platforms and frameworks. Whether you're building WordPress blocks, static sites with Astro or 11ty, or future Spectre integrations, Spectre UI ensures your styles remain consistent and maintainable.
|
|
14
|
+
|
|
15
|
+
## Features
|
|
16
|
+
|
|
17
|
+
- **TailwindCSS Foundation**: Built on top of Tailwind's utility-first approach
|
|
18
|
+
- **Token-Driven Design**: Powered by Spectre Tokens for consistent theming
|
|
19
|
+
- **Cross-Platform**: Works seamlessly across WordPress, Astro, 11ty, and more
|
|
20
|
+
- **Precompiled CSS**: Ready-to-use stylesheets for fast integration
|
|
21
|
+
- **Design Primitives**: Reusable styling components and utilities
|
|
22
|
+
|
|
23
|
+
## Installation
|
|
24
|
+
|
|
25
|
+
```bash
|
|
26
|
+
npm install @phcdevworks/spectre-ui
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
## Usage
|
|
30
|
+
|
|
31
|
+
Import Spectre UI styles into your project:
|
|
32
|
+
|
|
33
|
+
```css
|
|
34
|
+
@import '@phcdevworks/spectre-ui';
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
Or use the precompiled CSS directly in your HTML:
|
|
38
|
+
|
|
39
|
+
```html
|
|
40
|
+
<link rel="stylesheet" href="node_modules/@phcdevworks/spectre-ui/dist/spectre-ui.css">
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
## Part of the Spectre Suite
|
|
44
|
+
|
|
45
|
+
- **Spectre Tokens**: Design token foundation
|
|
46
|
+
- **Spectre UI**: Core styling layer (this package)
|
|
47
|
+
- **Spectre Blocks**: WordPress block library
|
|
48
|
+
- **Spectre Astro**: Astro integration
|
|
49
|
+
- **Spectre 11ty**: Eleventy integration
|
|
50
|
+
|
|
51
|
+
## License
|
|
52
|
+
|
|
53
|
+
MIT
|
|
54
|
+
|
|
55
|
+
## Contributing
|
|
56
|
+
|
|
57
|
+
Contributions are welcome! Please open an issue or submit a pull request.
|
package/dist/base.css
ADDED
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
@layer base {
|
|
2
|
+
*,
|
|
3
|
+
*::before,
|
|
4
|
+
*::after {
|
|
5
|
+
box-sizing: border-box;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
body {
|
|
9
|
+
margin: 0;
|
|
10
|
+
min-height: 100vh;
|
|
11
|
+
font-family: var(--sp-font-family-sans, system-ui);
|
|
12
|
+
font-size: var(--sp-font-md-size, 1rem);
|
|
13
|
+
line-height: var(--sp-font-md-line-height, 1.5);
|
|
14
|
+
color: var(--sp-color-neutral-900, #0f172a);
|
|
15
|
+
background-color: var(--sp-color-neutral-50, #f8fafc);
|
|
16
|
+
text-rendering: optimizeLegibility;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
a {
|
|
20
|
+
color: var(--sp-color-brand-600, #6c32e6);
|
|
21
|
+
text-decoration: none;
|
|
22
|
+
font-weight: var(--sp-font-md-weight, 500);
|
|
23
|
+
transition: color var(--sp-duration-fast, 150ms) var(--sp-easing-out, ease);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
a:hover,
|
|
27
|
+
a:focus-visible {
|
|
28
|
+
color: var(--sp-color-brand-700, #5626b4);
|
|
29
|
+
text-decoration: underline;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
:focus-visible {
|
|
33
|
+
outline: var(--sp-focus-ring-width, 2px) var(--sp-focus-ring-style, solid)
|
|
34
|
+
var(--sp-color-focus-primary, #8652ff);
|
|
35
|
+
outline-offset: var(--sp-focus-ring-offset, 2px);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
::selection {
|
|
39
|
+
background-color: var(--sp-color-brand-200, #d7c6ff);
|
|
40
|
+
color: var(--sp-color-neutral-900, #0f172a);
|
|
41
|
+
}
|
|
42
|
+
}
|
|
@@ -0,0 +1,218 @@
|
|
|
1
|
+
@layer components {
|
|
2
|
+
.sp-btn {
|
|
3
|
+
display: inline-flex;
|
|
4
|
+
align-items: center;
|
|
5
|
+
justify-content: center;
|
|
6
|
+
gap: var(--sp-space-2xs, 0.25rem);
|
|
7
|
+
padding: var(--sp-space-2xs, 0.25rem) var(--sp-space-md, 1rem);
|
|
8
|
+
border-radius: var(--sp-radius-md, 4px);
|
|
9
|
+
border: 1px solid transparent;
|
|
10
|
+
font-family: var(--sp-font-family-sans, system-ui);
|
|
11
|
+
font-size: var(--sp-font-md-size, 1rem);
|
|
12
|
+
line-height: 1;
|
|
13
|
+
font-weight: var(--sp-font-md-weight, 500);
|
|
14
|
+
transition: background-color var(--sp-duration-fast, 150ms) var(--sp-easing-out, ease),
|
|
15
|
+
color var(--sp-duration-fast, 150ms) var(--sp-easing-out, ease),
|
|
16
|
+
box-shadow var(--sp-duration-fast, 150ms) var(--sp-easing-out, ease);
|
|
17
|
+
cursor: pointer;
|
|
18
|
+
min-height: var(--sp-min-touch-target, 44px);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.sp-btn-sm {
|
|
22
|
+
padding: var(--sp-space-3xs, 0.125rem) var(--sp-space-sm, 0.75rem);
|
|
23
|
+
font-size: var(--sp-font-sm-size, 0.875rem);
|
|
24
|
+
line-height: var(--sp-font-sm-line-height, 1.5rem);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.sp-btn-md {
|
|
28
|
+
padding: var(--sp-space-2xs, 0.25rem) var(--sp-space-md, 1rem);
|
|
29
|
+
font-size: var(--sp-font-md-size, 1rem);
|
|
30
|
+
line-height: var(--sp-font-md-line-height, 1.75rem);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.sp-btn-lg {
|
|
34
|
+
padding: var(--sp-space-xs, 0.5rem) var(--sp-space-lg, 1.5rem);
|
|
35
|
+
font-size: var(--sp-font-lg-size, 1.25rem);
|
|
36
|
+
line-height: var(--sp-font-lg-line-height, 2rem);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.sp-btn-primary {
|
|
40
|
+
background-color: var(--sp-button-primary-bg, #8652ff);
|
|
41
|
+
color: var(--sp-button-primary-text, #ffffff);
|
|
42
|
+
box-shadow: var(--sp-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.08));
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.sp-btn-primary.sp-btn-hover,
|
|
46
|
+
.sp-btn-primary:hover {
|
|
47
|
+
background-color: var(--sp-button-primary-bghover, #6c32e6);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.sp-btn-primary.sp-btn-active,
|
|
51
|
+
.sp-btn-primary:active {
|
|
52
|
+
background-color: var(--sp-button-primary-bgactive, #5626b4);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.sp-btn-primary.sp-btn-disabled,
|
|
56
|
+
.sp-btn-primary:disabled {
|
|
57
|
+
background-color: var(--sp-button-primary-bgdisabled, #cbd5f5);
|
|
58
|
+
color: var(--sp-button-primary-textdisabled, #94a3b8);
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.sp-btn-secondary {
|
|
62
|
+
background-color: var(--sp-button-secondary-bg, #ffffff);
|
|
63
|
+
color: var(--sp-button-secondary-text, #8652ff);
|
|
64
|
+
border-color: var(--sp-button-secondary-border, #8652ff);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.sp-btn-secondary.sp-btn-hover,
|
|
68
|
+
.sp-btn-secondary:hover {
|
|
69
|
+
background-color: var(--sp-button-secondary-bghover, #f1f5f9);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.sp-btn-secondary.sp-btn-active,
|
|
73
|
+
.sp-btn-secondary:active {
|
|
74
|
+
background-color: var(--sp-button-secondary-bgactive, #e2e8f0);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.sp-btn-secondary.sp-btn-disabled,
|
|
78
|
+
.sp-btn-secondary:disabled {
|
|
79
|
+
background-color: var(--sp-button-secondary-bgdisabled, #f8fafc);
|
|
80
|
+
color: var(--sp-button-secondary-textdisabled, #94a3b8);
|
|
81
|
+
border-color: var(--sp-button-secondary-borderdisabled, #cbd5f5);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.sp-btn-ghost {
|
|
85
|
+
background-color: var(--sp-button-ghost-bg, transparent);
|
|
86
|
+
color: var(--sp-button-ghost-text, #8652ff);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.sp-btn-ghost.sp-btn-hover,
|
|
90
|
+
.sp-btn-ghost:hover {
|
|
91
|
+
background-color: var(--sp-button-ghost-bghover, #f5f0ff);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.sp-btn-ghost.sp-btn-active,
|
|
95
|
+
.sp-btn-ghost:active {
|
|
96
|
+
background-color: var(--sp-button-ghost-bgactive, #ebe2ff);
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.sp-btn-ghost.sp-btn-disabled,
|
|
100
|
+
.sp-btn-ghost:disabled {
|
|
101
|
+
color: var(--sp-button-ghost-textdisabled, #94a3b8);
|
|
102
|
+
background-color: var(--sp-button-ghost-bgdisabled, transparent);
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.sp-btn-danger {
|
|
106
|
+
background-color: var(--sp-button-danger-bg, #ef4444);
|
|
107
|
+
color: var(--sp-button-danger-text, #ffffff);
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.sp-btn-danger.sp-btn-hover,
|
|
111
|
+
.sp-btn-danger:hover {
|
|
112
|
+
background-color: var(--sp-button-danger-bghover, #dc2626);
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.sp-btn-danger.sp-btn-active,
|
|
116
|
+
.sp-btn-danger:active {
|
|
117
|
+
background-color: var(--sp-button-danger-bgactive, #b91c1c);
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.sp-btn-danger.sp-btn-disabled,
|
|
121
|
+
.sp-btn-danger:disabled {
|
|
122
|
+
background-color: var(--sp-button-danger-bgdisabled, #fecaca);
|
|
123
|
+
color: var(--sp-button-danger-textdisabled, #94a3b8);
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.sp-btn-success {
|
|
127
|
+
background-color: var(--sp-button-success-bg, #22c55e);
|
|
128
|
+
color: var(--sp-button-success-text, #ffffff);
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.sp-btn-success.sp-btn-hover,
|
|
132
|
+
.sp-btn-success:hover {
|
|
133
|
+
background-color: var(--sp-button-success-bghover, #16a34a);
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.sp-btn-success.sp-btn-active,
|
|
137
|
+
.sp-btn-success:active {
|
|
138
|
+
background-color: var(--sp-button-success-bgactive, #15803d);
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.sp-btn-success.sp-btn-disabled,
|
|
142
|
+
.sp-btn-success:disabled {
|
|
143
|
+
background-color: var(--sp-button-success-bgdisabled, #bbf7d0);
|
|
144
|
+
color: var(--sp-button-success-textdisabled, #94a3b8);
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
.sp-btn-disabled,
|
|
148
|
+
.sp-btn:disabled {
|
|
149
|
+
cursor: not-allowed;
|
|
150
|
+
box-shadow: none;
|
|
151
|
+
opacity: var(--sp-opacity-disabled, 0.38);
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.sp-input {
|
|
155
|
+
width: 100%;
|
|
156
|
+
display: block;
|
|
157
|
+
padding: var(--sp-space-2xs, 0.25rem) var(--sp-space-md, 1rem);
|
|
158
|
+
border-radius: var(--sp-radius-md, 4px);
|
|
159
|
+
border: 1px solid var(--sp-form-default-border, #cbd5f5);
|
|
160
|
+
background-color: var(--sp-form-default-bg, #ffffff);
|
|
161
|
+
color: var(--sp-form-default-text, #0f172a);
|
|
162
|
+
font-family: var(--sp-font-family-sans, system-ui);
|
|
163
|
+
font-size: var(--sp-font-md-size, 1rem);
|
|
164
|
+
line-height: var(--sp-font-md-line-height, 1.75rem);
|
|
165
|
+
transition: border-color var(--sp-duration-fast, 150ms) var(--sp-easing-out, ease),
|
|
166
|
+
box-shadow var(--sp-duration-fast, 150ms) var(--sp-easing-out, ease),
|
|
167
|
+
background-color var(--sp-duration-fast, 150ms) var(--sp-easing-out, ease);
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
.sp-input::placeholder {
|
|
171
|
+
color: var(--sp-form-default-placeholder, #94a3b8);
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
.sp-input:focus,
|
|
175
|
+
.sp-input-focus {
|
|
176
|
+
border-color: var(--sp-form-focus-border, #8652ff);
|
|
177
|
+
box-shadow: 0 0 0 var(--sp-focus-ring-width, 2px) var(--sp-form-focus-ring, #8652ff);
|
|
178
|
+
outline: none;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
.sp-input-error {
|
|
182
|
+
border-color: var(--sp-form-invalid-border, #ef4444);
|
|
183
|
+
background-color: var(--sp-form-invalid-bg, #fef2f2);
|
|
184
|
+
color: var(--sp-form-invalid-text, #b91c1c);
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
.sp-input-success {
|
|
188
|
+
border-color: var(--sp-form-valid-border, #22c55e);
|
|
189
|
+
background-color: var(--sp-form-valid-bg, #f0fdf4);
|
|
190
|
+
color: var(--sp-form-valid-text, #15803d);
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
.sp-input-disabled,
|
|
194
|
+
.sp-input:disabled {
|
|
195
|
+
background-color: var(--sp-form-disabled-bg, #f8fafc);
|
|
196
|
+
border-color: var(--sp-form-disabled-border, #e2e8f0);
|
|
197
|
+
color: var(--sp-form-disabled-text, #94a3b8);
|
|
198
|
+
cursor: not-allowed;
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
.sp-card {
|
|
202
|
+
background-color: var(--sp-form-default-bg, #ffffff);
|
|
203
|
+
color: var(--sp-form-default-text, #0f172a);
|
|
204
|
+
border-radius: var(--sp-radius-lg, 8px);
|
|
205
|
+
padding: var(--sp-space-lg, 1.5rem);
|
|
206
|
+
box-shadow: var(--sp-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.08));
|
|
207
|
+
border: 1px solid transparent;
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
.sp-card-elevated {
|
|
211
|
+
box-shadow: var(--sp-shadow-lg, 0 8px 20px rgba(15, 23, 42, 0.18));
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
.sp-card-flat {
|
|
215
|
+
box-shadow: var(--sp-shadow-none, none);
|
|
216
|
+
border-color: var(--sp-color-neutral-200, #e2e8f0);
|
|
217
|
+
}
|
|
218
|
+
}
|
package/dist/index.cjs
ADDED
|
@@ -0,0 +1,182 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var tokens = require('@phcdevworks/spectre-tokens');
|
|
4
|
+
|
|
5
|
+
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
6
|
+
|
|
7
|
+
var tokens__default = /*#__PURE__*/_interopDefault(tokens);
|
|
8
|
+
|
|
9
|
+
// src/tokens.ts
|
|
10
|
+
var spectreTokens = tokens__default.default;
|
|
11
|
+
var spectreTailwindTheme = tokens.tailwindTheme;
|
|
12
|
+
var spectreTailwindPreset = tokens.tailwindPreset;
|
|
13
|
+
var createSpectreTailwindTheme = (source = spectreTokens) => tokens.createTailwindTheme(source);
|
|
14
|
+
var createSpectreCssVariableMap = (source = spectreTokens, options) => tokens.createCssVariableMap(source, options);
|
|
15
|
+
var generateSpectreCssVariables = (source = spectreTokens, options) => tokens.generateCssVariables(source, options);
|
|
16
|
+
|
|
17
|
+
// src/tailwind/preset.ts
|
|
18
|
+
var readScaleValue = (scale, key) => {
|
|
19
|
+
const value = scale[key];
|
|
20
|
+
if (value == null) {
|
|
21
|
+
throw new Error(`Missing Spectre token for key: ${String(key)}`);
|
|
22
|
+
}
|
|
23
|
+
return value;
|
|
24
|
+
};
|
|
25
|
+
var readColorValue = (scale, shade) => {
|
|
26
|
+
const scaleValue = spectreTokens.colors[scale];
|
|
27
|
+
if (!scaleValue) {
|
|
28
|
+
throw new Error(`Missing Spectre color scale: ${scale}`);
|
|
29
|
+
}
|
|
30
|
+
const value = scaleValue[shade];
|
|
31
|
+
if (!value) {
|
|
32
|
+
throw new Error(`Missing shade ${String(shade)} for ${String(scale)}`);
|
|
33
|
+
}
|
|
34
|
+
return value;
|
|
35
|
+
};
|
|
36
|
+
var componentRadii = {
|
|
37
|
+
btn: readScaleValue(spectreTokens.radii, "md"),
|
|
38
|
+
input: readScaleValue(spectreTokens.radii, "md"),
|
|
39
|
+
card: readScaleValue(spectreTokens.radii, "lg"),
|
|
40
|
+
pill: readScaleValue(spectreTokens.radii, "pill")
|
|
41
|
+
};
|
|
42
|
+
var componentShadows = {
|
|
43
|
+
soft: readScaleValue(spectreTokens.shadows, "md"),
|
|
44
|
+
card: readScaleValue(spectreTokens.shadows, "lg")
|
|
45
|
+
};
|
|
46
|
+
var spacingShortcuts = {
|
|
47
|
+
gutter: readScaleValue(spectreTokens.spacing, "lg"),
|
|
48
|
+
section: readScaleValue(spectreTokens.spacing, "2xl"),
|
|
49
|
+
stack: readScaleValue(spectreTokens.spacing, "md")
|
|
50
|
+
};
|
|
51
|
+
var componentColors = {
|
|
52
|
+
surface: {
|
|
53
|
+
DEFAULT: readColorValue("neutral", "50"),
|
|
54
|
+
muted: readColorValue("neutral", "100"),
|
|
55
|
+
strong: readColorValue("neutral", "900")
|
|
56
|
+
},
|
|
57
|
+
intent: {
|
|
58
|
+
info: readColorValue("info", "500"),
|
|
59
|
+
success: readColorValue("success", "500"),
|
|
60
|
+
warning: readColorValue("warning", "500"),
|
|
61
|
+
danger: readColorValue("error", "500")
|
|
62
|
+
}
|
|
63
|
+
};
|
|
64
|
+
var spectrePreset = {
|
|
65
|
+
content: [],
|
|
66
|
+
theme: {
|
|
67
|
+
...spectreTailwindTheme,
|
|
68
|
+
extend: {
|
|
69
|
+
borderRadius: componentRadii,
|
|
70
|
+
boxShadow: componentShadows,
|
|
71
|
+
spacing: spacingShortcuts,
|
|
72
|
+
colors: componentColors
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
};
|
|
76
|
+
|
|
77
|
+
// src/components/button.config.ts
|
|
78
|
+
var buttonConfig = {
|
|
79
|
+
baseClass: "sp-btn",
|
|
80
|
+
variants: {
|
|
81
|
+
primary: "sp-btn-primary",
|
|
82
|
+
secondary: "sp-btn-secondary",
|
|
83
|
+
ghost: "sp-btn-ghost",
|
|
84
|
+
success: "sp-btn-success",
|
|
85
|
+
danger: "sp-btn-danger"
|
|
86
|
+
},
|
|
87
|
+
sizes: {
|
|
88
|
+
sm: "sp-btn-sm",
|
|
89
|
+
md: "sp-btn-md",
|
|
90
|
+
lg: "sp-btn-lg"
|
|
91
|
+
},
|
|
92
|
+
states: {
|
|
93
|
+
default: "",
|
|
94
|
+
hover: "sp-btn-hover",
|
|
95
|
+
active: "sp-btn-active",
|
|
96
|
+
disabled: "sp-btn-disabled"
|
|
97
|
+
}
|
|
98
|
+
};
|
|
99
|
+
|
|
100
|
+
// src/recipes/button.ts
|
|
101
|
+
var getButtonClasses = ({
|
|
102
|
+
variant = "primary",
|
|
103
|
+
size = "md",
|
|
104
|
+
state = "default",
|
|
105
|
+
extraClasses = ""
|
|
106
|
+
} = {}) => {
|
|
107
|
+
const classes = [
|
|
108
|
+
buttonConfig.baseClass,
|
|
109
|
+
buttonConfig.variants[variant],
|
|
110
|
+
buttonConfig.sizes[size],
|
|
111
|
+
buttonConfig.states[state],
|
|
112
|
+
extraClasses
|
|
113
|
+
].filter(Boolean);
|
|
114
|
+
return classes.join(" ").trim();
|
|
115
|
+
};
|
|
116
|
+
|
|
117
|
+
// src/components/input.config.ts
|
|
118
|
+
var inputConfig = {
|
|
119
|
+
baseClass: "sp-input",
|
|
120
|
+
states: {
|
|
121
|
+
default: "",
|
|
122
|
+
focus: "sp-input-focus",
|
|
123
|
+
invalid: "sp-input-error",
|
|
124
|
+
valid: "sp-input-success",
|
|
125
|
+
disabled: "sp-input-disabled"
|
|
126
|
+
}
|
|
127
|
+
};
|
|
128
|
+
|
|
129
|
+
// src/recipes/input.ts
|
|
130
|
+
var getInputClasses = ({
|
|
131
|
+
state = "default",
|
|
132
|
+
extraClasses = ""
|
|
133
|
+
} = {}) => {
|
|
134
|
+
const classes = [inputConfig.baseClass, inputConfig.states[state], extraClasses].filter(Boolean);
|
|
135
|
+
return classes.join(" ").trim();
|
|
136
|
+
};
|
|
137
|
+
|
|
138
|
+
// src/components/card.config.ts
|
|
139
|
+
var cardConfig = {
|
|
140
|
+
baseClass: "sp-card",
|
|
141
|
+
variants: {
|
|
142
|
+
base: "",
|
|
143
|
+
elevated: "sp-card-elevated",
|
|
144
|
+
flat: "sp-card-flat"
|
|
145
|
+
}
|
|
146
|
+
};
|
|
147
|
+
|
|
148
|
+
// src/recipes/card.ts
|
|
149
|
+
var getCardClasses = ({
|
|
150
|
+
variant = "base",
|
|
151
|
+
extraClasses = ""
|
|
152
|
+
} = {}) => {
|
|
153
|
+
const classes = [cardConfig.baseClass, cardConfig.variants[variant], extraClasses].filter(Boolean);
|
|
154
|
+
return classes.join(" ").trim();
|
|
155
|
+
};
|
|
156
|
+
|
|
157
|
+
// src/index.ts
|
|
158
|
+
var spectreBaseStylesPath = "@phcdevworks/spectre-ui/dist/base.css";
|
|
159
|
+
var spectreComponentsStylesPath = "@phcdevworks/spectre-ui/dist/components.css";
|
|
160
|
+
var spectreUtilitiesStylesPath = "@phcdevworks/spectre-ui/dist/utilities.css";
|
|
161
|
+
var spectreStyles = {
|
|
162
|
+
base: spectreBaseStylesPath,
|
|
163
|
+
components: spectreComponentsStylesPath,
|
|
164
|
+
utilities: spectreUtilitiesStylesPath
|
|
165
|
+
};
|
|
166
|
+
|
|
167
|
+
exports.createSpectreCssVariableMap = createSpectreCssVariableMap;
|
|
168
|
+
exports.createSpectreTailwindTheme = createSpectreTailwindTheme;
|
|
169
|
+
exports.generateSpectreCssVariables = generateSpectreCssVariables;
|
|
170
|
+
exports.getButtonClasses = getButtonClasses;
|
|
171
|
+
exports.getCardClasses = getCardClasses;
|
|
172
|
+
exports.getInputClasses = getInputClasses;
|
|
173
|
+
exports.spectreBaseStylesPath = spectreBaseStylesPath;
|
|
174
|
+
exports.spectreComponentsStylesPath = spectreComponentsStylesPath;
|
|
175
|
+
exports.spectrePreset = spectrePreset;
|
|
176
|
+
exports.spectreStyles = spectreStyles;
|
|
177
|
+
exports.spectreTailwindPreset = spectreTailwindPreset;
|
|
178
|
+
exports.spectreTailwindTheme = spectreTailwindTheme;
|
|
179
|
+
exports.spectreTokens = spectreTokens;
|
|
180
|
+
exports.spectreUtilitiesStylesPath = spectreUtilitiesStylesPath;
|
|
181
|
+
//# sourceMappingURL=index.cjs.map
|
|
182
|
+
//# sourceMappingURL=index.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/tokens.ts","../src/tailwind/preset.ts","../src/components/button.config.ts","../src/recipes/button.ts","../src/components/input.config.ts","../src/recipes/input.ts","../src/components/card.config.ts","../src/recipes/card.ts","../src/index.ts"],"names":["tokens","tailwindTheme","tailwindPreset","baseCreateTailwindTheme","baseCreateCssVariableMap","baseGenerateCssVariables"],"mappings":"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","file":"index.cjs","sourcesContent":["import tokens, {\n createCssVariableMap as baseCreateCssVariableMap,\n createTailwindTheme as baseCreateTailwindTheme,\n generateCssVariables as baseGenerateCssVariables,\n tailwindPreset,\n tailwindTheme,\n type AccessibilityTokens,\n type AnimationEntry,\n type ButtonStateTokens,\n type FormStateTokens,\n type TailwindTheme,\n type TokenScale,\n type Tokens,\n type TransitionTokens,\n type TypographyTokens,\n} from '@phcdevworks/spectre-tokens';\n\nexport const spectreTokens = tokens;\nexport const spectreTailwindTheme = tailwindTheme;\nexport const spectreTailwindPreset = tailwindPreset;\n\nexport type SpectreTokens = Tokens;\nexport type SpectreTailwindTheme = TailwindTheme;\nexport type SpectreTokenScale = TokenScale;\nexport type SpectreTransitionTokens = TransitionTokens;\nexport type SpectreTypographyTokens = TypographyTokens;\nexport type SpectreAccessibilityTokens = AccessibilityTokens;\nexport type SpectreAnimationEntry = AnimationEntry;\nexport type SpectreButtonStateTokens = ButtonStateTokens;\nexport type SpectreFormStateTokens = FormStateTokens;\n\nexport interface SpectreCssVariableOptions {\n selector?: string;\n prefix?: string;\n}\n\nexport type SpectreCssVariableMap = Record<string, string>;\n\nexport const createSpectreTailwindTheme = (\n source: SpectreTokens = spectreTokens,\n): SpectreTailwindTheme => baseCreateTailwindTheme(source);\n\nexport const createSpectreCssVariableMap = (\n source: SpectreTokens = spectreTokens,\n options?: SpectreCssVariableOptions,\n): SpectreCssVariableMap => baseCreateCssVariableMap(source, options);\n\nexport const generateSpectreCssVariables = (\n source: SpectreTokens = spectreTokens,\n options?: SpectreCssVariableOptions,\n): string => baseGenerateCssVariables(source, options);\n","import type { Config } from 'tailwindcss';\nimport { spectreTailwindTheme, spectreTokens } from '../tokens';\n\nconst readScaleValue = <T extends Record<string, string>>(scale: T, key: keyof T): string => {\n const value = scale[key];\n if (value == null) {\n throw new Error(`Missing Spectre token for key: ${String(key)}`);\n }\n\n return value;\n};\n\nconst readColorValue = (scale: keyof typeof spectreTokens.colors, shade: keyof Record<string, string>): string => {\n const scaleValue = spectreTokens.colors[scale];\n if (!scaleValue) {\n throw new Error(`Missing Spectre color scale: ${scale as string}`);\n }\n\n const value = scaleValue[shade as string];\n if (!value) {\n throw new Error(`Missing shade ${String(shade)} for ${String(scale)}`);\n }\n\n return value;\n};\n\nconst componentRadii = {\n btn: readScaleValue(spectreTokens.radii, 'md'),\n input: readScaleValue(spectreTokens.radii, 'md'),\n card: readScaleValue(spectreTokens.radii, 'lg'),\n pill: readScaleValue(spectreTokens.radii, 'pill'),\n};\n\nconst componentShadows = {\n soft: readScaleValue(spectreTokens.shadows, 'md'),\n card: readScaleValue(spectreTokens.shadows, 'lg'),\n};\n\nconst spacingShortcuts = {\n gutter: readScaleValue(spectreTokens.spacing, 'lg'),\n section: readScaleValue(spectreTokens.spacing, '2xl'),\n stack: readScaleValue(spectreTokens.spacing, 'md'),\n};\n\nconst componentColors = {\n surface: {\n DEFAULT: readColorValue('neutral', '50'),\n muted: readColorValue('neutral', '100'),\n strong: readColorValue('neutral', '900'),\n },\n intent: {\n info: readColorValue('info', '500'),\n success: readColorValue('success', '500'),\n warning: readColorValue('warning', '500'),\n danger: readColorValue('error', '500'),\n },\n};\n\nexport const spectrePreset: Config = {\n content: [],\n theme: {\n ...spectreTailwindTheme,\n extend: {\n borderRadius: componentRadii,\n boxShadow: componentShadows,\n spacing: spacingShortcuts,\n colors: componentColors,\n },\n },\n};\n","export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'success' | 'danger';\nexport type ButtonSize = 'sm' | 'md' | 'lg';\nexport type ButtonState = 'default' | 'hover' | 'active' | 'disabled';\n\nexport interface ButtonClassConfig {\n baseClass: string;\n variants: Record<ButtonVariant, string>;\n sizes: Record<ButtonSize, string>;\n states: Record<ButtonState, string>;\n}\n\nexport const buttonConfig: ButtonClassConfig = {\n baseClass: 'sp-btn',\n variants: {\n primary: 'sp-btn-primary',\n secondary: 'sp-btn-secondary',\n ghost: 'sp-btn-ghost',\n success: 'sp-btn-success',\n danger: 'sp-btn-danger',\n },\n sizes: {\n sm: 'sp-btn-sm',\n md: 'sp-btn-md',\n lg: 'sp-btn-lg',\n },\n states: {\n default: '',\n hover: 'sp-btn-hover',\n active: 'sp-btn-active',\n disabled: 'sp-btn-disabled',\n },\n};\n","import { buttonConfig, type ButtonSize, type ButtonState, type ButtonVariant } from '../components/button.config';\n\nexport interface GetButtonClassesOptions {\n variant?: ButtonVariant;\n size?: ButtonSize;\n state?: ButtonState;\n extraClasses?: string;\n}\n\nexport const getButtonClasses = ({\n variant = 'primary',\n size = 'md',\n state = 'default',\n extraClasses = '',\n}: GetButtonClassesOptions = {}): string => {\n const classes = [\n buttonConfig.baseClass,\n buttonConfig.variants[variant],\n buttonConfig.sizes[size],\n buttonConfig.states[state],\n extraClasses,\n ].filter(Boolean);\n\n return classes.join(' ').trim();\n};\n","export type InputState = 'default' | 'focus' | 'invalid' | 'valid' | 'disabled';\n\nexport interface InputClassConfig {\n baseClass: string;\n states: Record<InputState, string>;\n}\n\nexport const inputConfig: InputClassConfig = {\n baseClass: 'sp-input',\n states: {\n default: '',\n focus: 'sp-input-focus',\n invalid: 'sp-input-error',\n valid: 'sp-input-success',\n disabled: 'sp-input-disabled',\n },\n};\n","import { inputConfig, type InputState } from '../components/input.config';\n\nexport interface GetInputClassesOptions {\n state?: InputState;\n extraClasses?: string;\n}\n\nexport const getInputClasses = ({\n state = 'default',\n extraClasses = '',\n}: GetInputClassesOptions = {}): string => {\n const classes = [inputConfig.baseClass, inputConfig.states[state], extraClasses].filter(Boolean);\n return classes.join(' ').trim();\n};\n","export type CardVariant = 'base' | 'elevated' | 'flat';\n\nexport interface CardClassConfig {\n baseClass: string;\n variants: Record<CardVariant, string>;\n}\n\nexport const cardConfig: CardClassConfig = {\n baseClass: 'sp-card',\n variants: {\n base: '',\n elevated: 'sp-card-elevated',\n flat: 'sp-card-flat',\n },\n};\n","import { cardConfig, type CardVariant } from '../components/card.config';\n\nexport interface GetCardClassesOptions {\n variant?: CardVariant;\n extraClasses?: string;\n}\n\nexport const getCardClasses = ({\n variant = 'base',\n extraClasses = '',\n}: GetCardClassesOptions = {}): string => {\n const classes = [cardConfig.baseClass, cardConfig.variants[variant], extraClasses].filter(Boolean);\n return classes.join(' ').trim();\n};\n","export {\n spectreTokens,\n spectreTailwindPreset,\n spectreTailwindTheme,\n createSpectreCssVariableMap,\n createSpectreTailwindTheme,\n generateSpectreCssVariables,\n} from './tokens';\n\nexport type {\n SpectreAccessibilityTokens,\n SpectreAnimationEntry,\n SpectreButtonStateTokens,\n SpectreFormStateTokens,\n SpectreTailwindTheme,\n SpectreTokenScale,\n SpectreTokens,\n SpectreTransitionTokens,\n SpectreTypographyTokens,\n} from './tokens';\n\nexport { spectrePreset } from './tailwind';\n\nexport {\n getButtonClasses,\n type GetButtonClassesOptions,\n} from './recipes/button';\nexport { getInputClasses, type GetInputClassesOptions } from './recipes/input';\nexport { getCardClasses, type GetCardClassesOptions } from './recipes/card';\n\nexport type {\n ButtonSize,\n ButtonState,\n ButtonVariant,\n} from './components/button.config';\nexport type { InputState } from './components/input.config';\nexport type { CardVariant } from './components/card.config';\n\nexport const spectreBaseStylesPath = '@phcdevworks/spectre-ui/dist/base.css';\nexport const spectreComponentsStylesPath = '@phcdevworks/spectre-ui/dist/components.css';\nexport const spectreUtilitiesStylesPath = '@phcdevworks/spectre-ui/dist/utilities.css';\n\n/**\n * Structured helper for consumers that prefer namespaced CSS entry points.\n */\nexport const spectreStyles = {\n base: spectreBaseStylesPath,\n components: spectreComponentsStylesPath,\n utilities: spectreUtilitiesStylesPath,\n} as const;\n"]}
|
package/dist/index.d.cts
ADDED
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import { Tokens, TailwindTheme, AccessibilityTokens, AnimationEntry, ButtonStateTokens, FormStateTokens, TokenScale, TransitionTokens, TypographyTokens } from '@phcdevworks/spectre-tokens';
|
|
2
|
+
import { Config } from 'tailwindcss';
|
|
3
|
+
|
|
4
|
+
declare const spectreTokens: Tokens;
|
|
5
|
+
declare const spectreTailwindTheme: TailwindTheme;
|
|
6
|
+
declare const spectreTailwindPreset: {
|
|
7
|
+
theme: TailwindTheme;
|
|
8
|
+
};
|
|
9
|
+
type SpectreTokens = Tokens;
|
|
10
|
+
type SpectreTailwindTheme = TailwindTheme;
|
|
11
|
+
type SpectreTokenScale = TokenScale;
|
|
12
|
+
type SpectreTransitionTokens = TransitionTokens;
|
|
13
|
+
type SpectreTypographyTokens = TypographyTokens;
|
|
14
|
+
type SpectreAccessibilityTokens = AccessibilityTokens;
|
|
15
|
+
type SpectreAnimationEntry = AnimationEntry;
|
|
16
|
+
type SpectreButtonStateTokens = ButtonStateTokens;
|
|
17
|
+
type SpectreFormStateTokens = FormStateTokens;
|
|
18
|
+
interface SpectreCssVariableOptions {
|
|
19
|
+
selector?: string;
|
|
20
|
+
prefix?: string;
|
|
21
|
+
}
|
|
22
|
+
type SpectreCssVariableMap = Record<string, string>;
|
|
23
|
+
declare const createSpectreTailwindTheme: (source?: SpectreTokens) => SpectreTailwindTheme;
|
|
24
|
+
declare const createSpectreCssVariableMap: (source?: SpectreTokens, options?: SpectreCssVariableOptions) => SpectreCssVariableMap;
|
|
25
|
+
declare const generateSpectreCssVariables: (source?: SpectreTokens, options?: SpectreCssVariableOptions) => string;
|
|
26
|
+
|
|
27
|
+
declare const spectrePreset: Config;
|
|
28
|
+
|
|
29
|
+
type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'success' | 'danger';
|
|
30
|
+
type ButtonSize = 'sm' | 'md' | 'lg';
|
|
31
|
+
type ButtonState = 'default' | 'hover' | 'active' | 'disabled';
|
|
32
|
+
|
|
33
|
+
interface GetButtonClassesOptions {
|
|
34
|
+
variant?: ButtonVariant;
|
|
35
|
+
size?: ButtonSize;
|
|
36
|
+
state?: ButtonState;
|
|
37
|
+
extraClasses?: string;
|
|
38
|
+
}
|
|
39
|
+
declare const getButtonClasses: ({ variant, size, state, extraClasses, }?: GetButtonClassesOptions) => string;
|
|
40
|
+
|
|
41
|
+
type InputState = 'default' | 'focus' | 'invalid' | 'valid' | 'disabled';
|
|
42
|
+
|
|
43
|
+
interface GetInputClassesOptions {
|
|
44
|
+
state?: InputState;
|
|
45
|
+
extraClasses?: string;
|
|
46
|
+
}
|
|
47
|
+
declare const getInputClasses: ({ state, extraClasses, }?: GetInputClassesOptions) => string;
|
|
48
|
+
|
|
49
|
+
type CardVariant = 'base' | 'elevated' | 'flat';
|
|
50
|
+
|
|
51
|
+
interface GetCardClassesOptions {
|
|
52
|
+
variant?: CardVariant;
|
|
53
|
+
extraClasses?: string;
|
|
54
|
+
}
|
|
55
|
+
declare const getCardClasses: ({ variant, extraClasses, }?: GetCardClassesOptions) => string;
|
|
56
|
+
|
|
57
|
+
declare const spectreBaseStylesPath = "@phcdevworks/spectre-ui/dist/base.css";
|
|
58
|
+
declare const spectreComponentsStylesPath = "@phcdevworks/spectre-ui/dist/components.css";
|
|
59
|
+
declare const spectreUtilitiesStylesPath = "@phcdevworks/spectre-ui/dist/utilities.css";
|
|
60
|
+
/**
|
|
61
|
+
* Structured helper for consumers that prefer namespaced CSS entry points.
|
|
62
|
+
*/
|
|
63
|
+
declare const spectreStyles: {
|
|
64
|
+
readonly base: "@phcdevworks/spectre-ui/dist/base.css";
|
|
65
|
+
readonly components: "@phcdevworks/spectre-ui/dist/components.css";
|
|
66
|
+
readonly utilities: "@phcdevworks/spectre-ui/dist/utilities.css";
|
|
67
|
+
};
|
|
68
|
+
|
|
69
|
+
export { type ButtonSize, type ButtonState, type ButtonVariant, type CardVariant, type GetButtonClassesOptions, type GetCardClassesOptions, type GetInputClassesOptions, type InputState, type SpectreAccessibilityTokens, type SpectreAnimationEntry, type SpectreButtonStateTokens, type SpectreFormStateTokens, type SpectreTailwindTheme, type SpectreTokenScale, type SpectreTokens, type SpectreTransitionTokens, type SpectreTypographyTokens, createSpectreCssVariableMap, createSpectreTailwindTheme, generateSpectreCssVariables, getButtonClasses, getCardClasses, getInputClasses, spectreBaseStylesPath, spectreComponentsStylesPath, spectrePreset, spectreStyles, spectreTailwindPreset, spectreTailwindTheme, spectreTokens, spectreUtilitiesStylesPath };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import { Tokens, TailwindTheme, AccessibilityTokens, AnimationEntry, ButtonStateTokens, FormStateTokens, TokenScale, TransitionTokens, TypographyTokens } from '@phcdevworks/spectre-tokens';
|
|
2
|
+
import { Config } from 'tailwindcss';
|
|
3
|
+
|
|
4
|
+
declare const spectreTokens: Tokens;
|
|
5
|
+
declare const spectreTailwindTheme: TailwindTheme;
|
|
6
|
+
declare const spectreTailwindPreset: {
|
|
7
|
+
theme: TailwindTheme;
|
|
8
|
+
};
|
|
9
|
+
type SpectreTokens = Tokens;
|
|
10
|
+
type SpectreTailwindTheme = TailwindTheme;
|
|
11
|
+
type SpectreTokenScale = TokenScale;
|
|
12
|
+
type SpectreTransitionTokens = TransitionTokens;
|
|
13
|
+
type SpectreTypographyTokens = TypographyTokens;
|
|
14
|
+
type SpectreAccessibilityTokens = AccessibilityTokens;
|
|
15
|
+
type SpectreAnimationEntry = AnimationEntry;
|
|
16
|
+
type SpectreButtonStateTokens = ButtonStateTokens;
|
|
17
|
+
type SpectreFormStateTokens = FormStateTokens;
|
|
18
|
+
interface SpectreCssVariableOptions {
|
|
19
|
+
selector?: string;
|
|
20
|
+
prefix?: string;
|
|
21
|
+
}
|
|
22
|
+
type SpectreCssVariableMap = Record<string, string>;
|
|
23
|
+
declare const createSpectreTailwindTheme: (source?: SpectreTokens) => SpectreTailwindTheme;
|
|
24
|
+
declare const createSpectreCssVariableMap: (source?: SpectreTokens, options?: SpectreCssVariableOptions) => SpectreCssVariableMap;
|
|
25
|
+
declare const generateSpectreCssVariables: (source?: SpectreTokens, options?: SpectreCssVariableOptions) => string;
|
|
26
|
+
|
|
27
|
+
declare const spectrePreset: Config;
|
|
28
|
+
|
|
29
|
+
type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'success' | 'danger';
|
|
30
|
+
type ButtonSize = 'sm' | 'md' | 'lg';
|
|
31
|
+
type ButtonState = 'default' | 'hover' | 'active' | 'disabled';
|
|
32
|
+
|
|
33
|
+
interface GetButtonClassesOptions {
|
|
34
|
+
variant?: ButtonVariant;
|
|
35
|
+
size?: ButtonSize;
|
|
36
|
+
state?: ButtonState;
|
|
37
|
+
extraClasses?: string;
|
|
38
|
+
}
|
|
39
|
+
declare const getButtonClasses: ({ variant, size, state, extraClasses, }?: GetButtonClassesOptions) => string;
|
|
40
|
+
|
|
41
|
+
type InputState = 'default' | 'focus' | 'invalid' | 'valid' | 'disabled';
|
|
42
|
+
|
|
43
|
+
interface GetInputClassesOptions {
|
|
44
|
+
state?: InputState;
|
|
45
|
+
extraClasses?: string;
|
|
46
|
+
}
|
|
47
|
+
declare const getInputClasses: ({ state, extraClasses, }?: GetInputClassesOptions) => string;
|
|
48
|
+
|
|
49
|
+
type CardVariant = 'base' | 'elevated' | 'flat';
|
|
50
|
+
|
|
51
|
+
interface GetCardClassesOptions {
|
|
52
|
+
variant?: CardVariant;
|
|
53
|
+
extraClasses?: string;
|
|
54
|
+
}
|
|
55
|
+
declare const getCardClasses: ({ variant, extraClasses, }?: GetCardClassesOptions) => string;
|
|
56
|
+
|
|
57
|
+
declare const spectreBaseStylesPath = "@phcdevworks/spectre-ui/dist/base.css";
|
|
58
|
+
declare const spectreComponentsStylesPath = "@phcdevworks/spectre-ui/dist/components.css";
|
|
59
|
+
declare const spectreUtilitiesStylesPath = "@phcdevworks/spectre-ui/dist/utilities.css";
|
|
60
|
+
/**
|
|
61
|
+
* Structured helper for consumers that prefer namespaced CSS entry points.
|
|
62
|
+
*/
|
|
63
|
+
declare const spectreStyles: {
|
|
64
|
+
readonly base: "@phcdevworks/spectre-ui/dist/base.css";
|
|
65
|
+
readonly components: "@phcdevworks/spectre-ui/dist/components.css";
|
|
66
|
+
readonly utilities: "@phcdevworks/spectre-ui/dist/utilities.css";
|
|
67
|
+
};
|
|
68
|
+
|
|
69
|
+
export { type ButtonSize, type ButtonState, type ButtonVariant, type CardVariant, type GetButtonClassesOptions, type GetCardClassesOptions, type GetInputClassesOptions, type InputState, type SpectreAccessibilityTokens, type SpectreAnimationEntry, type SpectreButtonStateTokens, type SpectreFormStateTokens, type SpectreTailwindTheme, type SpectreTokenScale, type SpectreTokens, type SpectreTransitionTokens, type SpectreTypographyTokens, createSpectreCssVariableMap, createSpectreTailwindTheme, generateSpectreCssVariables, getButtonClasses, getCardClasses, getInputClasses, spectreBaseStylesPath, spectreComponentsStylesPath, spectrePreset, spectreStyles, spectreTailwindPreset, spectreTailwindTheme, spectreTokens, spectreUtilitiesStylesPath };
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,163 @@
|
|
|
1
|
+
import tokens, { tailwindTheme, createCssVariableMap, createTailwindTheme, generateCssVariables, tailwindPreset } from '@phcdevworks/spectre-tokens';
|
|
2
|
+
|
|
3
|
+
// src/tokens.ts
|
|
4
|
+
var spectreTokens = tokens;
|
|
5
|
+
var spectreTailwindTheme = tailwindTheme;
|
|
6
|
+
var spectreTailwindPreset = tailwindPreset;
|
|
7
|
+
var createSpectreTailwindTheme = (source = spectreTokens) => createTailwindTheme(source);
|
|
8
|
+
var createSpectreCssVariableMap = (source = spectreTokens, options) => createCssVariableMap(source, options);
|
|
9
|
+
var generateSpectreCssVariables = (source = spectreTokens, options) => generateCssVariables(source, options);
|
|
10
|
+
|
|
11
|
+
// src/tailwind/preset.ts
|
|
12
|
+
var readScaleValue = (scale, key) => {
|
|
13
|
+
const value = scale[key];
|
|
14
|
+
if (value == null) {
|
|
15
|
+
throw new Error(`Missing Spectre token for key: ${String(key)}`);
|
|
16
|
+
}
|
|
17
|
+
return value;
|
|
18
|
+
};
|
|
19
|
+
var readColorValue = (scale, shade) => {
|
|
20
|
+
const scaleValue = spectreTokens.colors[scale];
|
|
21
|
+
if (!scaleValue) {
|
|
22
|
+
throw new Error(`Missing Spectre color scale: ${scale}`);
|
|
23
|
+
}
|
|
24
|
+
const value = scaleValue[shade];
|
|
25
|
+
if (!value) {
|
|
26
|
+
throw new Error(`Missing shade ${String(shade)} for ${String(scale)}`);
|
|
27
|
+
}
|
|
28
|
+
return value;
|
|
29
|
+
};
|
|
30
|
+
var componentRadii = {
|
|
31
|
+
btn: readScaleValue(spectreTokens.radii, "md"),
|
|
32
|
+
input: readScaleValue(spectreTokens.radii, "md"),
|
|
33
|
+
card: readScaleValue(spectreTokens.radii, "lg"),
|
|
34
|
+
pill: readScaleValue(spectreTokens.radii, "pill")
|
|
35
|
+
};
|
|
36
|
+
var componentShadows = {
|
|
37
|
+
soft: readScaleValue(spectreTokens.shadows, "md"),
|
|
38
|
+
card: readScaleValue(spectreTokens.shadows, "lg")
|
|
39
|
+
};
|
|
40
|
+
var spacingShortcuts = {
|
|
41
|
+
gutter: readScaleValue(spectreTokens.spacing, "lg"),
|
|
42
|
+
section: readScaleValue(spectreTokens.spacing, "2xl"),
|
|
43
|
+
stack: readScaleValue(spectreTokens.spacing, "md")
|
|
44
|
+
};
|
|
45
|
+
var componentColors = {
|
|
46
|
+
surface: {
|
|
47
|
+
DEFAULT: readColorValue("neutral", "50"),
|
|
48
|
+
muted: readColorValue("neutral", "100"),
|
|
49
|
+
strong: readColorValue("neutral", "900")
|
|
50
|
+
},
|
|
51
|
+
intent: {
|
|
52
|
+
info: readColorValue("info", "500"),
|
|
53
|
+
success: readColorValue("success", "500"),
|
|
54
|
+
warning: readColorValue("warning", "500"),
|
|
55
|
+
danger: readColorValue("error", "500")
|
|
56
|
+
}
|
|
57
|
+
};
|
|
58
|
+
var spectrePreset = {
|
|
59
|
+
content: [],
|
|
60
|
+
theme: {
|
|
61
|
+
...spectreTailwindTheme,
|
|
62
|
+
extend: {
|
|
63
|
+
borderRadius: componentRadii,
|
|
64
|
+
boxShadow: componentShadows,
|
|
65
|
+
spacing: spacingShortcuts,
|
|
66
|
+
colors: componentColors
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
};
|
|
70
|
+
|
|
71
|
+
// src/components/button.config.ts
|
|
72
|
+
var buttonConfig = {
|
|
73
|
+
baseClass: "sp-btn",
|
|
74
|
+
variants: {
|
|
75
|
+
primary: "sp-btn-primary",
|
|
76
|
+
secondary: "sp-btn-secondary",
|
|
77
|
+
ghost: "sp-btn-ghost",
|
|
78
|
+
success: "sp-btn-success",
|
|
79
|
+
danger: "sp-btn-danger"
|
|
80
|
+
},
|
|
81
|
+
sizes: {
|
|
82
|
+
sm: "sp-btn-sm",
|
|
83
|
+
md: "sp-btn-md",
|
|
84
|
+
lg: "sp-btn-lg"
|
|
85
|
+
},
|
|
86
|
+
states: {
|
|
87
|
+
default: "",
|
|
88
|
+
hover: "sp-btn-hover",
|
|
89
|
+
active: "sp-btn-active",
|
|
90
|
+
disabled: "sp-btn-disabled"
|
|
91
|
+
}
|
|
92
|
+
};
|
|
93
|
+
|
|
94
|
+
// src/recipes/button.ts
|
|
95
|
+
var getButtonClasses = ({
|
|
96
|
+
variant = "primary",
|
|
97
|
+
size = "md",
|
|
98
|
+
state = "default",
|
|
99
|
+
extraClasses = ""
|
|
100
|
+
} = {}) => {
|
|
101
|
+
const classes = [
|
|
102
|
+
buttonConfig.baseClass,
|
|
103
|
+
buttonConfig.variants[variant],
|
|
104
|
+
buttonConfig.sizes[size],
|
|
105
|
+
buttonConfig.states[state],
|
|
106
|
+
extraClasses
|
|
107
|
+
].filter(Boolean);
|
|
108
|
+
return classes.join(" ").trim();
|
|
109
|
+
};
|
|
110
|
+
|
|
111
|
+
// src/components/input.config.ts
|
|
112
|
+
var inputConfig = {
|
|
113
|
+
baseClass: "sp-input",
|
|
114
|
+
states: {
|
|
115
|
+
default: "",
|
|
116
|
+
focus: "sp-input-focus",
|
|
117
|
+
invalid: "sp-input-error",
|
|
118
|
+
valid: "sp-input-success",
|
|
119
|
+
disabled: "sp-input-disabled"
|
|
120
|
+
}
|
|
121
|
+
};
|
|
122
|
+
|
|
123
|
+
// src/recipes/input.ts
|
|
124
|
+
var getInputClasses = ({
|
|
125
|
+
state = "default",
|
|
126
|
+
extraClasses = ""
|
|
127
|
+
} = {}) => {
|
|
128
|
+
const classes = [inputConfig.baseClass, inputConfig.states[state], extraClasses].filter(Boolean);
|
|
129
|
+
return classes.join(" ").trim();
|
|
130
|
+
};
|
|
131
|
+
|
|
132
|
+
// src/components/card.config.ts
|
|
133
|
+
var cardConfig = {
|
|
134
|
+
baseClass: "sp-card",
|
|
135
|
+
variants: {
|
|
136
|
+
base: "",
|
|
137
|
+
elevated: "sp-card-elevated",
|
|
138
|
+
flat: "sp-card-flat"
|
|
139
|
+
}
|
|
140
|
+
};
|
|
141
|
+
|
|
142
|
+
// src/recipes/card.ts
|
|
143
|
+
var getCardClasses = ({
|
|
144
|
+
variant = "base",
|
|
145
|
+
extraClasses = ""
|
|
146
|
+
} = {}) => {
|
|
147
|
+
const classes = [cardConfig.baseClass, cardConfig.variants[variant], extraClasses].filter(Boolean);
|
|
148
|
+
return classes.join(" ").trim();
|
|
149
|
+
};
|
|
150
|
+
|
|
151
|
+
// src/index.ts
|
|
152
|
+
var spectreBaseStylesPath = "@phcdevworks/spectre-ui/dist/base.css";
|
|
153
|
+
var spectreComponentsStylesPath = "@phcdevworks/spectre-ui/dist/components.css";
|
|
154
|
+
var spectreUtilitiesStylesPath = "@phcdevworks/spectre-ui/dist/utilities.css";
|
|
155
|
+
var spectreStyles = {
|
|
156
|
+
base: spectreBaseStylesPath,
|
|
157
|
+
components: spectreComponentsStylesPath,
|
|
158
|
+
utilities: spectreUtilitiesStylesPath
|
|
159
|
+
};
|
|
160
|
+
|
|
161
|
+
export { createSpectreCssVariableMap, createSpectreTailwindTheme, generateSpectreCssVariables, getButtonClasses, getCardClasses, getInputClasses, spectreBaseStylesPath, spectreComponentsStylesPath, spectrePreset, spectreStyles, spectreTailwindPreset, spectreTailwindTheme, spectreTokens, spectreUtilitiesStylesPath };
|
|
162
|
+
//# sourceMappingURL=index.js.map
|
|
163
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/tokens.ts","../src/tailwind/preset.ts","../src/components/button.config.ts","../src/recipes/button.ts","../src/components/input.config.ts","../src/recipes/input.ts","../src/components/card.config.ts","../src/recipes/card.ts","../src/index.ts"],"names":["baseCreateTailwindTheme","baseCreateCssVariableMap","baseGenerateCssVariables"],"mappings":";;;AAiBO,IAAM,aAAA,GAAgB;AACtB,IAAM,oBAAA,GAAuB;AAC7B,IAAM,qBAAA,GAAwB;AAmB9B,IAAM,0BAAA,GAA6B,CACxC,MAAA,GAAwB,aAAA,KACCA,oBAAwB,MAAM;AAElD,IAAM,8BAA8B,CACzC,MAAA,GAAwB,eACxB,OAAA,KAC0BC,oBAAA,CAAyB,QAAQ,OAAO;AAE7D,IAAM,8BAA8B,CACzC,MAAA,GAAwB,eACxB,OAAA,KACWC,oBAAA,CAAyB,QAAQ,OAAO;;;AC/CrD,IAAM,cAAA,GAAiB,CAAmC,KAAA,EAAU,GAAA,KAAyB;AAC3F,EAAA,MAAM,KAAA,GAAQ,MAAM,GAAG,CAAA;AACvB,EAAA,IAAI,SAAS,IAAA,EAAM;AACjB,IAAA,MAAM,IAAI,KAAA,CAAM,CAAA,+BAAA,EAAkC,MAAA,CAAO,GAAG,CAAC,CAAA,CAAE,CAAA;AAAA,EACjE;AAEA,EAAA,OAAO,KAAA;AACT,CAAA;AAEA,IAAM,cAAA,GAAiB,CAAC,KAAA,EAA0C,KAAA,KAAgD;AAChH,EAAA,MAAM,UAAA,GAAa,aAAA,CAAc,MAAA,CAAO,KAAK,CAAA;AAC7C,EAAA,IAAI,CAAC,UAAA,EAAY;AACf,IAAA,MAAM,IAAI,KAAA,CAAM,CAAA,6BAAA,EAAgC,KAAe,CAAA,CAAE,CAAA;AAAA,EACnE;AAEA,EAAA,MAAM,KAAA,GAAQ,WAAW,KAAe,CAAA;AACxC,EAAA,IAAI,CAAC,KAAA,EAAO;AACV,IAAA,MAAM,IAAI,KAAA,CAAM,CAAA,cAAA,EAAiB,MAAA,CAAO,KAAK,CAAC,CAAA,KAAA,EAAQ,MAAA,CAAO,KAAK,CAAC,CAAA,CAAE,CAAA;AAAA,EACvE;AAEA,EAAA,OAAO,KAAA;AACT,CAAA;AAEA,IAAM,cAAA,GAAiB;AAAA,EACrB,GAAA,EAAK,cAAA,CAAe,aAAA,CAAc,KAAA,EAAO,IAAI,CAAA;AAAA,EAC7C,KAAA,EAAO,cAAA,CAAe,aAAA,CAAc,KAAA,EAAO,IAAI,CAAA;AAAA,EAC/C,IAAA,EAAM,cAAA,CAAe,aAAA,CAAc,KAAA,EAAO,IAAI,CAAA;AAAA,EAC9C,IAAA,EAAM,cAAA,CAAe,aAAA,CAAc,KAAA,EAAO,MAAM;AAClD,CAAA;AAEA,IAAM,gBAAA,GAAmB;AAAA,EACvB,IAAA,EAAM,cAAA,CAAe,aAAA,CAAc,OAAA,EAAS,IAAI,CAAA;AAAA,EAChD,IAAA,EAAM,cAAA,CAAe,aAAA,CAAc,OAAA,EAAS,IAAI;AAClD,CAAA;AAEA,IAAM,gBAAA,GAAmB;AAAA,EACvB,MAAA,EAAQ,cAAA,CAAe,aAAA,CAAc,OAAA,EAAS,IAAI,CAAA;AAAA,EAClD,OAAA,EAAS,cAAA,CAAe,aAAA,CAAc,OAAA,EAAS,KAAK,CAAA;AAAA,EACpD,KAAA,EAAO,cAAA,CAAe,aAAA,CAAc,OAAA,EAAS,IAAI;AACnD,CAAA;AAEA,IAAM,eAAA,GAAkB;AAAA,EACtB,OAAA,EAAS;AAAA,IACP,OAAA,EAAS,cAAA,CAAe,SAAA,EAAW,IAAI,CAAA;AAAA,IACvC,KAAA,EAAO,cAAA,CAAe,SAAA,EAAW,KAAK,CAAA;AAAA,IACtC,MAAA,EAAQ,cAAA,CAAe,SAAA,EAAW,KAAK;AAAA,GACzC;AAAA,EACA,MAAA,EAAQ;AAAA,IACN,IAAA,EAAM,cAAA,CAAe,MAAA,EAAQ,KAAK,CAAA;AAAA,IAClC,OAAA,EAAS,cAAA,CAAe,SAAA,EAAW,KAAK,CAAA;AAAA,IACxC,OAAA,EAAS,cAAA,CAAe,SAAA,EAAW,KAAK,CAAA;AAAA,IACxC,MAAA,EAAQ,cAAA,CAAe,OAAA,EAAS,KAAK;AAAA;AAEzC,CAAA;AAEO,IAAM,aAAA,GAAwB;AAAA,EACnC,SAAS,EAAC;AAAA,EACV,KAAA,EAAO;AAAA,IACL,GAAG,oBAAA;AAAA,IACH,MAAA,EAAQ;AAAA,MACN,YAAA,EAAc,cAAA;AAAA,MACd,SAAA,EAAW,gBAAA;AAAA,MACX,OAAA,EAAS,gBAAA;AAAA,MACT,MAAA,EAAQ;AAAA;AACV;AAEJ;;;AC1DO,IAAM,YAAA,GAAkC;AAAA,EAC7C,SAAA,EAAW,QAAA;AAAA,EACX,QAAA,EAAU;AAAA,IACR,OAAA,EAAS,gBAAA;AAAA,IACT,SAAA,EAAW,kBAAA;AAAA,IACX,KAAA,EAAO,cAAA;AAAA,IACP,OAAA,EAAS,gBAAA;AAAA,IACT,MAAA,EAAQ;AAAA,GACV;AAAA,EACA,KAAA,EAAO;AAAA,IACL,EAAA,EAAI,WAAA;AAAA,IACJ,EAAA,EAAI,WAAA;AAAA,IACJ,EAAA,EAAI;AAAA,GACN;AAAA,EACA,MAAA,EAAQ;AAAA,IACN,OAAA,EAAS,EAAA;AAAA,IACT,KAAA,EAAO,cAAA;AAAA,IACP,MAAA,EAAQ,eAAA;AAAA,IACR,QAAA,EAAU;AAAA;AAEd,CAAA;;;ACtBO,IAAM,mBAAmB,CAAC;AAAA,EAC/B,OAAA,GAAU,SAAA;AAAA,EACV,IAAA,GAAO,IAAA;AAAA,EACP,KAAA,GAAQ,SAAA;AAAA,EACR,YAAA,GAAe;AACjB,CAAA,GAA6B,EAAC,KAAc;AAC1C,EAAA,MAAM,OAAA,GAAU;AAAA,IACd,YAAA,CAAa,SAAA;AAAA,IACb,YAAA,CAAa,SAAS,OAAO,CAAA;AAAA,IAC7B,YAAA,CAAa,MAAM,IAAI,CAAA;AAAA,IACvB,YAAA,CAAa,OAAO,KAAK,CAAA;AAAA,IACzB;AAAA,GACF,CAAE,OAAO,OAAO,CAAA;AAEhB,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,GAAG,CAAA,CAAE,IAAA,EAAK;AAChC;;;ACjBO,IAAM,WAAA,GAAgC;AAAA,EAC3C,SAAA,EAAW,UAAA;AAAA,EACX,MAAA,EAAQ;AAAA,IACN,OAAA,EAAS,EAAA;AAAA,IACT,KAAA,EAAO,gBAAA;AAAA,IACP,OAAA,EAAS,gBAAA;AAAA,IACT,KAAA,EAAO,kBAAA;AAAA,IACP,QAAA,EAAU;AAAA;AAEd,CAAA;;;ACTO,IAAM,kBAAkB,CAAC;AAAA,EAC9B,KAAA,GAAQ,SAAA;AAAA,EACR,YAAA,GAAe;AACjB,CAAA,GAA4B,EAAC,KAAc;AACzC,EAAA,MAAM,OAAA,GAAU,CAAC,WAAA,CAAY,SAAA,EAAW,WAAA,CAAY,MAAA,CAAO,KAAK,CAAA,EAAG,YAAY,CAAA,CAAE,MAAA,CAAO,OAAO,CAAA;AAC/F,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,GAAG,CAAA,CAAE,IAAA,EAAK;AAChC;;;ACNO,IAAM,UAAA,GAA8B;AAAA,EACzC,SAAA,EAAW,SAAA;AAAA,EACX,QAAA,EAAU;AAAA,IACR,IAAA,EAAM,EAAA;AAAA,IACN,QAAA,EAAU,kBAAA;AAAA,IACV,IAAA,EAAM;AAAA;AAEV,CAAA;;;ACPO,IAAM,iBAAiB,CAAC;AAAA,EAC7B,OAAA,GAAU,MAAA;AAAA,EACV,YAAA,GAAe;AACjB,CAAA,GAA2B,EAAC,KAAc;AACxC,EAAA,MAAM,OAAA,GAAU,CAAC,UAAA,CAAW,SAAA,EAAW,UAAA,CAAW,QAAA,CAAS,OAAO,CAAA,EAAG,YAAY,CAAA,CAAE,MAAA,CAAO,OAAO,CAAA;AACjG,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,GAAG,CAAA,CAAE,IAAA,EAAK;AAChC;;;ACyBO,IAAM,qBAAA,GAAwB;AAC9B,IAAM,2BAAA,GAA8B;AACpC,IAAM,0BAAA,GAA6B;AAKnC,IAAM,aAAA,GAAgB;AAAA,EAC3B,IAAA,EAAM,qBAAA;AAAA,EACN,UAAA,EAAY,2BAAA;AAAA,EACZ,SAAA,EAAW;AACb","file":"index.js","sourcesContent":["import tokens, {\n createCssVariableMap as baseCreateCssVariableMap,\n createTailwindTheme as baseCreateTailwindTheme,\n generateCssVariables as baseGenerateCssVariables,\n tailwindPreset,\n tailwindTheme,\n type AccessibilityTokens,\n type AnimationEntry,\n type ButtonStateTokens,\n type FormStateTokens,\n type TailwindTheme,\n type TokenScale,\n type Tokens,\n type TransitionTokens,\n type TypographyTokens,\n} from '@phcdevworks/spectre-tokens';\n\nexport const spectreTokens = tokens;\nexport const spectreTailwindTheme = tailwindTheme;\nexport const spectreTailwindPreset = tailwindPreset;\n\nexport type SpectreTokens = Tokens;\nexport type SpectreTailwindTheme = TailwindTheme;\nexport type SpectreTokenScale = TokenScale;\nexport type SpectreTransitionTokens = TransitionTokens;\nexport type SpectreTypographyTokens = TypographyTokens;\nexport type SpectreAccessibilityTokens = AccessibilityTokens;\nexport type SpectreAnimationEntry = AnimationEntry;\nexport type SpectreButtonStateTokens = ButtonStateTokens;\nexport type SpectreFormStateTokens = FormStateTokens;\n\nexport interface SpectreCssVariableOptions {\n selector?: string;\n prefix?: string;\n}\n\nexport type SpectreCssVariableMap = Record<string, string>;\n\nexport const createSpectreTailwindTheme = (\n source: SpectreTokens = spectreTokens,\n): SpectreTailwindTheme => baseCreateTailwindTheme(source);\n\nexport const createSpectreCssVariableMap = (\n source: SpectreTokens = spectreTokens,\n options?: SpectreCssVariableOptions,\n): SpectreCssVariableMap => baseCreateCssVariableMap(source, options);\n\nexport const generateSpectreCssVariables = (\n source: SpectreTokens = spectreTokens,\n options?: SpectreCssVariableOptions,\n): string => baseGenerateCssVariables(source, options);\n","import type { Config } from 'tailwindcss';\nimport { spectreTailwindTheme, spectreTokens } from '../tokens';\n\nconst readScaleValue = <T extends Record<string, string>>(scale: T, key: keyof T): string => {\n const value = scale[key];\n if (value == null) {\n throw new Error(`Missing Spectre token for key: ${String(key)}`);\n }\n\n return value;\n};\n\nconst readColorValue = (scale: keyof typeof spectreTokens.colors, shade: keyof Record<string, string>): string => {\n const scaleValue = spectreTokens.colors[scale];\n if (!scaleValue) {\n throw new Error(`Missing Spectre color scale: ${scale as string}`);\n }\n\n const value = scaleValue[shade as string];\n if (!value) {\n throw new Error(`Missing shade ${String(shade)} for ${String(scale)}`);\n }\n\n return value;\n};\n\nconst componentRadii = {\n btn: readScaleValue(spectreTokens.radii, 'md'),\n input: readScaleValue(spectreTokens.radii, 'md'),\n card: readScaleValue(spectreTokens.radii, 'lg'),\n pill: readScaleValue(spectreTokens.radii, 'pill'),\n};\n\nconst componentShadows = {\n soft: readScaleValue(spectreTokens.shadows, 'md'),\n card: readScaleValue(spectreTokens.shadows, 'lg'),\n};\n\nconst spacingShortcuts = {\n gutter: readScaleValue(spectreTokens.spacing, 'lg'),\n section: readScaleValue(spectreTokens.spacing, '2xl'),\n stack: readScaleValue(spectreTokens.spacing, 'md'),\n};\n\nconst componentColors = {\n surface: {\n DEFAULT: readColorValue('neutral', '50'),\n muted: readColorValue('neutral', '100'),\n strong: readColorValue('neutral', '900'),\n },\n intent: {\n info: readColorValue('info', '500'),\n success: readColorValue('success', '500'),\n warning: readColorValue('warning', '500'),\n danger: readColorValue('error', '500'),\n },\n};\n\nexport const spectrePreset: Config = {\n content: [],\n theme: {\n ...spectreTailwindTheme,\n extend: {\n borderRadius: componentRadii,\n boxShadow: componentShadows,\n spacing: spacingShortcuts,\n colors: componentColors,\n },\n },\n};\n","export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'success' | 'danger';\nexport type ButtonSize = 'sm' | 'md' | 'lg';\nexport type ButtonState = 'default' | 'hover' | 'active' | 'disabled';\n\nexport interface ButtonClassConfig {\n baseClass: string;\n variants: Record<ButtonVariant, string>;\n sizes: Record<ButtonSize, string>;\n states: Record<ButtonState, string>;\n}\n\nexport const buttonConfig: ButtonClassConfig = {\n baseClass: 'sp-btn',\n variants: {\n primary: 'sp-btn-primary',\n secondary: 'sp-btn-secondary',\n ghost: 'sp-btn-ghost',\n success: 'sp-btn-success',\n danger: 'sp-btn-danger',\n },\n sizes: {\n sm: 'sp-btn-sm',\n md: 'sp-btn-md',\n lg: 'sp-btn-lg',\n },\n states: {\n default: '',\n hover: 'sp-btn-hover',\n active: 'sp-btn-active',\n disabled: 'sp-btn-disabled',\n },\n};\n","import { buttonConfig, type ButtonSize, type ButtonState, type ButtonVariant } from '../components/button.config';\n\nexport interface GetButtonClassesOptions {\n variant?: ButtonVariant;\n size?: ButtonSize;\n state?: ButtonState;\n extraClasses?: string;\n}\n\nexport const getButtonClasses = ({\n variant = 'primary',\n size = 'md',\n state = 'default',\n extraClasses = '',\n}: GetButtonClassesOptions = {}): string => {\n const classes = [\n buttonConfig.baseClass,\n buttonConfig.variants[variant],\n buttonConfig.sizes[size],\n buttonConfig.states[state],\n extraClasses,\n ].filter(Boolean);\n\n return classes.join(' ').trim();\n};\n","export type InputState = 'default' | 'focus' | 'invalid' | 'valid' | 'disabled';\n\nexport interface InputClassConfig {\n baseClass: string;\n states: Record<InputState, string>;\n}\n\nexport const inputConfig: InputClassConfig = {\n baseClass: 'sp-input',\n states: {\n default: '',\n focus: 'sp-input-focus',\n invalid: 'sp-input-error',\n valid: 'sp-input-success',\n disabled: 'sp-input-disabled',\n },\n};\n","import { inputConfig, type InputState } from '../components/input.config';\n\nexport interface GetInputClassesOptions {\n state?: InputState;\n extraClasses?: string;\n}\n\nexport const getInputClasses = ({\n state = 'default',\n extraClasses = '',\n}: GetInputClassesOptions = {}): string => {\n const classes = [inputConfig.baseClass, inputConfig.states[state], extraClasses].filter(Boolean);\n return classes.join(' ').trim();\n};\n","export type CardVariant = 'base' | 'elevated' | 'flat';\n\nexport interface CardClassConfig {\n baseClass: string;\n variants: Record<CardVariant, string>;\n}\n\nexport const cardConfig: CardClassConfig = {\n baseClass: 'sp-card',\n variants: {\n base: '',\n elevated: 'sp-card-elevated',\n flat: 'sp-card-flat',\n },\n};\n","import { cardConfig, type CardVariant } from '../components/card.config';\n\nexport interface GetCardClassesOptions {\n variant?: CardVariant;\n extraClasses?: string;\n}\n\nexport const getCardClasses = ({\n variant = 'base',\n extraClasses = '',\n}: GetCardClassesOptions = {}): string => {\n const classes = [cardConfig.baseClass, cardConfig.variants[variant], extraClasses].filter(Boolean);\n return classes.join(' ').trim();\n};\n","export {\n spectreTokens,\n spectreTailwindPreset,\n spectreTailwindTheme,\n createSpectreCssVariableMap,\n createSpectreTailwindTheme,\n generateSpectreCssVariables,\n} from './tokens';\n\nexport type {\n SpectreAccessibilityTokens,\n SpectreAnimationEntry,\n SpectreButtonStateTokens,\n SpectreFormStateTokens,\n SpectreTailwindTheme,\n SpectreTokenScale,\n SpectreTokens,\n SpectreTransitionTokens,\n SpectreTypographyTokens,\n} from './tokens';\n\nexport { spectrePreset } from './tailwind';\n\nexport {\n getButtonClasses,\n type GetButtonClassesOptions,\n} from './recipes/button';\nexport { getInputClasses, type GetInputClassesOptions } from './recipes/input';\nexport { getCardClasses, type GetCardClassesOptions } from './recipes/card';\n\nexport type {\n ButtonSize,\n ButtonState,\n ButtonVariant,\n} from './components/button.config';\nexport type { InputState } from './components/input.config';\nexport type { CardVariant } from './components/card.config';\n\nexport const spectreBaseStylesPath = '@phcdevworks/spectre-ui/dist/base.css';\nexport const spectreComponentsStylesPath = '@phcdevworks/spectre-ui/dist/components.css';\nexport const spectreUtilitiesStylesPath = '@phcdevworks/spectre-ui/dist/utilities.css';\n\n/**\n * Structured helper for consumers that prefer namespaced CSS entry points.\n */\nexport const spectreStyles = {\n base: spectreBaseStylesPath,\n components: spectreComponentsStylesPath,\n utilities: spectreUtilitiesStylesPath,\n} as const;\n"]}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
@layer utilities {
|
|
2
|
+
.sp-stack {
|
|
3
|
+
display: flex;
|
|
4
|
+
flex-direction: column;
|
|
5
|
+
gap: var(--sp-space-md, 1rem);
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.sp-hstack {
|
|
9
|
+
display: flex;
|
|
10
|
+
flex-direction: row;
|
|
11
|
+
align-items: center;
|
|
12
|
+
gap: var(--sp-space-md, 1rem);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.sp-container {
|
|
16
|
+
width: 100%;
|
|
17
|
+
max-width: var(--sp-breakpoint-xl, 1280px);
|
|
18
|
+
margin-left: auto;
|
|
19
|
+
margin-right: auto;
|
|
20
|
+
padding-left: var(--sp-space-md, 1rem);
|
|
21
|
+
padding-right: var(--sp-space-md, 1rem);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.sp-section {
|
|
25
|
+
padding-top: var(--sp-space-2xl, 3rem);
|
|
26
|
+
padding-bottom: var(--sp-space-2xl, 3rem);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.sp-shadow-soft {
|
|
30
|
+
box-shadow: var(--sp-shadow-md, 0 3px 8px rgba(15, 23, 42, 0.1));
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.sp-shadow-strong {
|
|
34
|
+
box-shadow: var(--sp-shadow-lg, 0 8px 20px rgba(15, 23, 42, 0.18));
|
|
35
|
+
}
|
|
36
|
+
}
|
package/package.json
ADDED
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@phcdevworks/spectre-ui",
|
|
3
|
+
"version": "0.0.1",
|
|
4
|
+
"description": "Framework-agnostic UI layer for the Spectre design system. Provides base CSS, component classes, utilities, and a Tailwind preset powered by @phcdevworks/spectre-tokens.",
|
|
5
|
+
"main": "./dist/index.cjs",
|
|
6
|
+
"module": "./dist/index.js",
|
|
7
|
+
"types": "./dist/index.d.ts",
|
|
8
|
+
"type": "module",
|
|
9
|
+
"exports": {
|
|
10
|
+
".": {
|
|
11
|
+
"types": "./dist/index.d.ts",
|
|
12
|
+
"import": "./dist/index.js",
|
|
13
|
+
"require": "./dist/index.cjs"
|
|
14
|
+
},
|
|
15
|
+
"./base.css": "./dist/base.css",
|
|
16
|
+
"./components.css": "./dist/components.css",
|
|
17
|
+
"./utilities.css": "./dist/utilities.css"
|
|
18
|
+
},
|
|
19
|
+
"files": [
|
|
20
|
+
"dist",
|
|
21
|
+
"README.md",
|
|
22
|
+
"LICENSE"
|
|
23
|
+
],
|
|
24
|
+
"sideEffects": false,
|
|
25
|
+
"scripts": {
|
|
26
|
+
"build": "tsup --config tsup.config.ts",
|
|
27
|
+
"dev": "tsup --config tsup.config.ts --watch",
|
|
28
|
+
"clean": "rm -rf dist"
|
|
29
|
+
},
|
|
30
|
+
"repository": {
|
|
31
|
+
"type": "git",
|
|
32
|
+
"url": "git+https://github.com/phcdevworks/spectre-ui.git"
|
|
33
|
+
},
|
|
34
|
+
"keywords": [
|
|
35
|
+
"spectre",
|
|
36
|
+
"design-system",
|
|
37
|
+
"tailwindcss",
|
|
38
|
+
"components",
|
|
39
|
+
"utilities",
|
|
40
|
+
"tokens",
|
|
41
|
+
"ui-library",
|
|
42
|
+
"phcdevworks"
|
|
43
|
+
],
|
|
44
|
+
"author": "",
|
|
45
|
+
"license": "MIT",
|
|
46
|
+
"bugs": {
|
|
47
|
+
"url": "https://github.com/phcdevworks/spectre-ui/issues"
|
|
48
|
+
},
|
|
49
|
+
"homepage": "https://github.com/phcdevworks/spectre-ui#readme",
|
|
50
|
+
"publishConfig": {
|
|
51
|
+
"access": "public"
|
|
52
|
+
},
|
|
53
|
+
"peerDependencies": {
|
|
54
|
+
"tailwindcss": "^3.4.0 || ^4.0.0"
|
|
55
|
+
},
|
|
56
|
+
"dependencies": {
|
|
57
|
+
"@phcdevworks/spectre-tokens": "^0.0.1"
|
|
58
|
+
},
|
|
59
|
+
"devDependencies": {
|
|
60
|
+
"tsup": "^8.5.1",
|
|
61
|
+
"typescript": "^5.9.3",
|
|
62
|
+
"tailwindcss": "^3.4.15",
|
|
63
|
+
"postcss": "^8.4.35",
|
|
64
|
+
"autoprefixer": "^10.4.20"
|
|
65
|
+
}
|
|
66
|
+
}
|