@phcdevworks/spectre-ui 0.4.1 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +0 -0
- package/README.md +61 -423
- package/dist/base.css +1 -1
- package/dist/components.css +371 -15
- package/dist/index.cjs +109 -14
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +513 -112
- package/dist/index.d.cts +55 -3
- package/dist/index.d.ts +55 -3
- package/dist/index.js +95 -15
- package/dist/index.js.map +1 -1
- package/dist/tailwind/index.cjs +8 -1
- package/dist/tailwind/index.cjs.map +1 -1
- package/dist/tailwind/index.js +8 -1
- package/dist/tailwind/index.js.map +1 -1
- package/dist/utilities.css +26 -23
- package/package.json +14 -3
package/dist/utilities.css
CHANGED
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
margin-right: auto;
|
|
19
19
|
padding-left: var(--sp-layout-container-padding-inline-md);
|
|
20
20
|
padding-right: var(--sp-layout-container-padding-inline-md);
|
|
21
|
-
max-width:
|
|
21
|
+
max-width: var(--sp-layout-container-max-width);
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
.sp-section {
|
|
@@ -67,50 +67,42 @@
|
|
|
67
67
|
}
|
|
68
68
|
|
|
69
69
|
.sp-animate-fade-in {
|
|
70
|
-
animation: var(--sp-animation-fadein-keyframes)
|
|
71
|
-
var(--sp-animation-fadein-duration) var(--sp-animation-fadein-easing);
|
|
70
|
+
animation: var(--sp-animation-fadein-keyframes) var(--sp-animation-fadein-duration) var(--sp-animation-fadein-easing);
|
|
72
71
|
}
|
|
73
72
|
|
|
74
73
|
.sp-animate-fade-out {
|
|
75
|
-
animation: var(--sp-animation-fadeout-keyframes)
|
|
76
|
-
var(--sp-animation-fadeout-duration) var(--sp-animation-fadeout-easing);
|
|
74
|
+
animation: var(--sp-animation-fadeout-keyframes) var(--sp-animation-fadeout-duration) var(--sp-animation-fadeout-easing);
|
|
77
75
|
}
|
|
78
76
|
|
|
79
77
|
.sp-animate-slide-up {
|
|
80
|
-
animation: var(--sp-animation-slideup-keyframes)
|
|
81
|
-
var(--sp-animation-slideup-duration) var(--sp-animation-slideup-easing);
|
|
78
|
+
animation: var(--sp-animation-slideup-keyframes) var(--sp-animation-slideup-duration) var(--sp-animation-slideup-easing);
|
|
82
79
|
}
|
|
83
80
|
|
|
84
81
|
.sp-animate-slide-down {
|
|
85
|
-
animation: var(--sp-animation-slidedown-keyframes)
|
|
86
|
-
var(--sp-animation-slidedown-duration)
|
|
87
|
-
var(--sp-animation-slidedown-easing);
|
|
82
|
+
animation: var(--sp-animation-slidedown-keyframes) var(--sp-animation-slidedown-duration) var(--sp-animation-slidedown-easing);
|
|
88
83
|
}
|
|
89
84
|
|
|
90
85
|
.sp-animate-scale-in {
|
|
91
|
-
animation: var(--sp-animation-scalein-keyframes)
|
|
92
|
-
var(--sp-animation-scalein-duration) var(--sp-animation-scalein-easing);
|
|
86
|
+
animation: var(--sp-animation-scalein-keyframes) var(--sp-animation-scalein-duration) var(--sp-animation-scalein-easing);
|
|
93
87
|
}
|
|
94
88
|
|
|
95
89
|
.sp-animate-bounce {
|
|
96
|
-
animation: var(--sp-animation-bounce-keyframes)
|
|
97
|
-
var(--sp-animation-bounce-duration) var(--sp-animation-bounce-easing);
|
|
90
|
+
animation: var(--sp-animation-bounce-keyframes) var(--sp-animation-bounce-duration) var(--sp-animation-bounce-easing);
|
|
98
91
|
}
|
|
99
92
|
|
|
100
93
|
.sp-animate-shake {
|
|
101
|
-
animation: var(--sp-animation-shake-keyframes)
|
|
102
|
-
var(--sp-animation-shake-duration) var(--sp-animation-shake-easing);
|
|
94
|
+
animation: var(--sp-animation-shake-keyframes) var(--sp-animation-shake-duration) var(--sp-animation-shake-easing);
|
|
103
95
|
}
|
|
104
96
|
|
|
105
97
|
.sp-animate-pulse {
|
|
106
|
-
animation: var(--sp-animation-pulse-keyframes)
|
|
107
|
-
var(--sp-animation-pulse-duration) var(--sp-animation-pulse-easing);
|
|
98
|
+
animation: var(--sp-animation-pulse-keyframes) var(--sp-animation-pulse-duration) var(--sp-animation-pulse-easing);
|
|
108
99
|
}
|
|
109
100
|
|
|
110
101
|
@keyframes fade-in {
|
|
111
102
|
from {
|
|
112
103
|
opacity: 0;
|
|
113
104
|
}
|
|
105
|
+
|
|
114
106
|
to {
|
|
115
107
|
opacity: 1;
|
|
116
108
|
}
|
|
@@ -120,6 +112,7 @@
|
|
|
120
112
|
from {
|
|
121
113
|
opacity: 1;
|
|
122
114
|
}
|
|
115
|
+
|
|
123
116
|
to {
|
|
124
117
|
opacity: 0;
|
|
125
118
|
}
|
|
@@ -128,8 +121,9 @@
|
|
|
128
121
|
@keyframes slide-up {
|
|
129
122
|
from {
|
|
130
123
|
opacity: 0;
|
|
131
|
-
transform: translateY(
|
|
124
|
+
transform: translateY(var(--sp-space-8));
|
|
132
125
|
}
|
|
126
|
+
|
|
133
127
|
to {
|
|
134
128
|
opacity: 1;
|
|
135
129
|
transform: translateY(0);
|
|
@@ -139,8 +133,9 @@
|
|
|
139
133
|
@keyframes slide-down {
|
|
140
134
|
from {
|
|
141
135
|
opacity: 0;
|
|
142
|
-
transform: translateY(-
|
|
136
|
+
transform: translateY(calc(var(--sp-space-8) * -1));
|
|
143
137
|
}
|
|
138
|
+
|
|
144
139
|
to {
|
|
145
140
|
opacity: 1;
|
|
146
141
|
transform: translateY(0);
|
|
@@ -152,6 +147,7 @@
|
|
|
152
147
|
opacity: 0;
|
|
153
148
|
transform: scale(0.95);
|
|
154
149
|
}
|
|
150
|
+
|
|
155
151
|
to {
|
|
156
152
|
opacity: 1;
|
|
157
153
|
transform: scale(1);
|
|
@@ -159,35 +155,42 @@
|
|
|
159
155
|
}
|
|
160
156
|
|
|
161
157
|
@keyframes bounce {
|
|
158
|
+
|
|
162
159
|
0%,
|
|
163
160
|
100% {
|
|
164
161
|
transform: translateY(0);
|
|
165
162
|
}
|
|
163
|
+
|
|
166
164
|
50% {
|
|
167
|
-
transform: translateY(-
|
|
165
|
+
transform: translateY(calc(var(--sp-space-4) * -1.5));
|
|
168
166
|
}
|
|
169
167
|
}
|
|
170
168
|
|
|
171
169
|
@keyframes shake {
|
|
170
|
+
|
|
172
171
|
0%,
|
|
173
172
|
100% {
|
|
174
173
|
transform: translateX(0);
|
|
175
174
|
}
|
|
175
|
+
|
|
176
176
|
20%,
|
|
177
177
|
60% {
|
|
178
|
-
transform: translateX(-
|
|
178
|
+
transform: translateX(calc(var(--sp-space-4) * -1.5));
|
|
179
179
|
}
|
|
180
|
+
|
|
180
181
|
40%,
|
|
181
182
|
80% {
|
|
182
|
-
transform: translateX(
|
|
183
|
+
transform: translateX(calc(var(--sp-space-4) * 1.5));
|
|
183
184
|
}
|
|
184
185
|
}
|
|
185
186
|
|
|
186
187
|
@keyframes pulse {
|
|
188
|
+
|
|
187
189
|
0%,
|
|
188
190
|
100% {
|
|
189
191
|
transform: scale(1);
|
|
190
192
|
}
|
|
193
|
+
|
|
191
194
|
50% {
|
|
192
195
|
transform: scale(1.04);
|
|
193
196
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@phcdevworks/spectre-ui",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"description": "Cross-platform UI built on Spectre Tokens. A Tailwind-powered design system that turns the tokens into consistent CSS utilities, component classes and design recipes for WordPress blocks, Astro components, 11ty templates and other modern web apps.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"phcdevworks",
|
|
@@ -68,6 +68,8 @@
|
|
|
68
68
|
"build:css": "mkdir -p dist && postcss src/styles/index.css -o dist/index.css",
|
|
69
69
|
"dev": "tsup --config tsup.config.ts --watch",
|
|
70
70
|
"clean": "rm -rf dist",
|
|
71
|
+
"lint": "eslint .",
|
|
72
|
+
"format": "prettier --write .",
|
|
71
73
|
"test": "vitest run"
|
|
72
74
|
},
|
|
73
75
|
"publishConfig": {
|
|
@@ -77,16 +79,25 @@
|
|
|
77
79
|
"tailwindcss": "^3.4.0 || ^4.0.0"
|
|
78
80
|
},
|
|
79
81
|
"dependencies": {
|
|
80
|
-
"@phcdevworks/spectre-tokens": "^
|
|
82
|
+
"@phcdevworks/spectre-tokens": "^2.1.0"
|
|
81
83
|
},
|
|
82
84
|
"devDependencies": {
|
|
85
|
+
"@types/node": "^25.5.0",
|
|
86
|
+
"@typescript-eslint/eslint-plugin": "^8.57.1",
|
|
87
|
+
"@typescript-eslint/parser": "^8.57.1",
|
|
83
88
|
"autoprefixer": "^10.4.20",
|
|
89
|
+
"eslint": "^10.1.0",
|
|
84
90
|
"postcss": "^8.4.35",
|
|
85
91
|
"postcss-cli": "^11.0.1",
|
|
86
92
|
"postcss-import": "^16.1.1",
|
|
93
|
+
"prettier": "^3.8.1",
|
|
87
94
|
"tailwindcss": "^3.4.15",
|
|
88
95
|
"tsup": "^8.5.1",
|
|
89
96
|
"typescript": "^5.9.3",
|
|
97
|
+
"typescript-eslint": "^8.57.1",
|
|
90
98
|
"vitest": "^4.0.15"
|
|
91
|
-
}
|
|
99
|
+
},
|
|
100
|
+
"cSpell.words": [
|
|
101
|
+
"phcdevworks"
|
|
102
|
+
]
|
|
92
103
|
}
|