@phcdevworks/spectre-ui 0.4.0 → 0.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +1 -1
  2. package/dist/base.css +7 -8
  3. package/dist/components.css +15 -16
  4. package/dist/index.css +188 -24
  5. package/dist/utilities.css +159 -0
  6. package/package.json +2 -2
package/README.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  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.
4
4
 
5
- > 🤝 **[Contributing Guide](CONTRIBUTING.md)** | 📝 **[Changelog](CHANGELOG.md)**
5
+ 🤝 **[Contributing Guide](CONTRIBUTING.md)** | 📝 **[Changelog](CHANGELOG.md)**
6
6
 
7
7
  ## Overview
8
8
 
package/dist/base.css CHANGED
@@ -14,9 +14,9 @@
14
14
 
15
15
  body {
16
16
  min-height: 100vh;
17
- font-family: var(--sp-font-family-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
18
- font-size: var(--sp-font-md-size, 1rem);
19
- line-height: var(--sp-font-md-line-height, 1.5);
17
+ font-family: var(--sp-font-family-sans);
18
+ font-size: var(--sp-font-md-size);
19
+ line-height: var(--sp-font-md-line-height);
20
20
  color: var(--sp-text-on-page-default);
21
21
  background-color: var(--sp-surface-page);
22
22
  }
@@ -45,7 +45,7 @@
45
45
  }
46
46
 
47
47
  a {
48
- color: var(--sp-color-brand-600, inherit);
48
+ color: var(--sp-color-brand-600);
49
49
  text-decoration: none;
50
50
  }
51
51
 
@@ -54,13 +54,12 @@
54
54
  }
55
55
 
56
56
  :focus-visible {
57
- outline: var(--sp-focus-ring-width, 2px) solid var(--sp-color-focus-primary,
58
- var(--sp-color-brand-600, currentColor));
59
- outline-offset: var(--sp-focus-ring-offset, 2px);
57
+ outline: var(--sp-focus-ring-width) solid var(--sp-color-focus-primary);
58
+ outline-offset: var(--sp-focus-ring-offset);
60
59
  }
61
60
 
62
61
  ::selection {
63
- background-color: var(--sp-color-brand-100, #ebe2ff);
62
+ background-color: var(--sp-color-brand-100);
64
63
  color: inherit;
65
64
  }
66
65
  }
package/dist/components.css CHANGED
@@ -54,22 +54,21 @@
54
54
  --sp-component-card-ghost-border: var(--sp-component-card-ghost-bg);
55
55
 
56
56
  /* input roles */
57
- --sp-component-input-role-border: var(--sp-color-neutral-300);
58
- --sp-component-input-role-bg: var(--sp-surface-input);
59
- --sp-component-input-role-text: var(--sp-component-input-text);
60
- --sp-component-input-role-placeholder: var(--sp-component-input-placeholder);
61
- --sp-component-input-role-border-focus: var(--sp-color-focus-primary);
62
- --sp-component-input-role-ring: var(--sp-color-focus-primary);
63
- --sp-component-input-role-border-error: var(--sp-color-error-500);
64
- --sp-component-input-role-bg-error: var(--sp-color-error-50);
65
- --sp-component-input-role-text-error: var(--sp-color-error-700);
66
- --sp-component-input-role-border-success: var(--sp-color-success-500);
67
- --sp-component-input-role-bg-success: var(--sp-color-success-50);
68
- --sp-component-input-role-text-success: var(--sp-color-success-700);
69
- --sp-component-input-role-bg-disabled: var(--sp-surface-input);
70
- --sp-component-input-role-text-disabled: var(--sp-text-on-surface-meta);
71
- /* Important: border-disabled should fall back to a BORDER token, not a surface token */
72
- --sp-component-input-role-border-disabled: var(--sp-color-neutral-200);
57
+ --sp-component-input-role-border: var(--sp-form-default-border);
58
+ --sp-component-input-role-bg: var(--sp-form-default-bg);
59
+ --sp-component-input-role-text: var(--sp-form-default-text);
60
+ --sp-component-input-role-placeholder: var(--sp-form-default-placeholder);
61
+ --sp-component-input-role-border-focus: var(--sp-form-focus-border);
62
+ --sp-component-input-role-ring: var(--sp-form-focus-ring);
63
+ --sp-component-input-role-border-error: var(--sp-form-invalid-border);
64
+ --sp-component-input-role-bg-error: var(--sp-form-invalid-bg);
65
+ --sp-component-input-role-text-error: var(--sp-form-invalid-text);
66
+ --sp-component-input-role-border-success: var(--sp-form-valid-border);
67
+ --sp-component-input-role-bg-success: var(--sp-form-valid-bg);
68
+ --sp-component-input-role-text-success: var(--sp-form-valid-text);
69
+ --sp-component-input-role-bg-disabled: var(--sp-form-disabled-bg);
70
+ --sp-component-input-role-text-disabled: var(--sp-form-disabled-text);
71
+ --sp-component-input-role-border-disabled: var(--sp-form-disabled-border);
73
72
 
74
73
  /* badge roles */
75
74
  --sp-component-badge-font: var(--sp-font-family-sans);
package/dist/index.css CHANGED
@@ -9,9 +9,11 @@
9
9
  --sp-surface-overlay: rgba(15,23,42,0.6);
10
10
  --sp-text-on-page-default: #0f172a;
11
11
  --sp-text-on-page-muted: #475569;
12
+ --sp-text-on-page-subtle: #94a3b8;
12
13
  --sp-text-on-page-meta: #94a3b8;
13
14
  --sp-text-on-surface-default: #0f172a;
14
15
  --sp-text-on-surface-muted: #6b7280;
16
+ --sp-text-on-surface-subtle: #94a3b8;
15
17
  --sp-text-on-surface-meta: #94a3b8;
16
18
  --sp-component-card-text: #0f172a;
17
19
  --sp-component-card-text-muted: #6b7280;
@@ -163,8 +165,11 @@
163
165
  --sp-font-xs-letter-spacing: 0.02em;
164
166
  --sp-text-on-page-default: #0f172a;
165
167
  --sp-text-on-page-muted: #475569;
168
+ --sp-text-on-page-subtle: #94a3b8;
169
+ --sp-text-on-page-meta: #94a3b8;
166
170
  --sp-text-on-surface-default: #0f172a;
167
171
  --sp-text-on-surface-muted: #6b7280;
172
+ --sp-text-on-surface-subtle: #94a3b8;
168
173
  --sp-text-on-surface-meta: #94a3b8;
169
174
  --sp-badge-neutral-bg: #f1f5f9;
170
175
  --sp-badge-neutral-text: #334155;
@@ -301,9 +306,11 @@
301
306
  --sp-surface-overlay: #1e293b;
302
307
  --sp-text-on-page-default: #f8fafc;
303
308
  --sp-text-on-page-muted: #cbd5f5;
309
+ --sp-text-on-page-subtle: #94a3b8;
304
310
  --sp-text-on-page-meta: #94a3b8;
305
311
  --sp-text-on-surface-default: #f1f5f9;
306
312
  --sp-text-on-surface-muted: #cbd5f5;
313
+ --sp-text-on-surface-subtle: #94a3b8;
307
314
  --sp-text-on-surface-meta: #94a3b8;
308
315
  --sp-component-card-text: #f1f5f9;
309
316
  --sp-component-card-text-muted: #cbd5f5;
@@ -344,9 +351,9 @@
344
351
 
345
352
  body {
346
353
  min-height: 100vh;
347
- font-family: var(--sp-font-family-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
348
- font-size: var(--sp-font-md-size, 1rem);
349
- line-height: var(--sp-font-md-line-height, 1.5);
354
+ font-family: var(--sp-font-family-sans);
355
+ font-size: var(--sp-font-md-size);
356
+ line-height: var(--sp-font-md-line-height);
350
357
  color: var(--sp-text-on-page-default);
351
358
  background-color: var(--sp-surface-page);
352
359
  }
@@ -375,7 +382,7 @@
375
382
  }
376
383
 
377
384
  a {
378
- color: var(--sp-color-brand-600, inherit);
385
+ color: var(--sp-color-brand-600);
379
386
  text-decoration: none;
380
387
  }
381
388
 
@@ -384,13 +391,12 @@
384
391
  }
385
392
 
386
393
  :focus-visible {
387
- outline: var(--sp-focus-ring-width, 2px) solid var(--sp-color-focus-primary,
388
- var(--sp-color-brand-600, currentColor));
389
- outline-offset: var(--sp-focus-ring-offset, 2px);
394
+ outline: var(--sp-focus-ring-width) solid var(--sp-color-focus-primary);
395
+ outline-offset: var(--sp-focus-ring-offset);
390
396
  }
391
397
 
392
398
  ::selection {
393
- background-color: var(--sp-color-brand-100, #ebe2ff);
399
+ background-color: var(--sp-color-brand-100);
394
400
  color: inherit;
395
401
  }
396
402
  }
@@ -450,22 +456,21 @@
450
456
  --sp-component-card-ghost-border: var(--sp-component-card-ghost-bg);
451
457
 
452
458
  /* input roles */
453
- --sp-component-input-role-border: var(--sp-color-neutral-300);
454
- --sp-component-input-role-bg: var(--sp-surface-input);
455
- --sp-component-input-role-text: var(--sp-component-input-text);
456
- --sp-component-input-role-placeholder: var(--sp-component-input-placeholder);
457
- --sp-component-input-role-border-focus: var(--sp-color-focus-primary);
458
- --sp-component-input-role-ring: var(--sp-color-focus-primary);
459
- --sp-component-input-role-border-error: var(--sp-color-error-500);
460
- --sp-component-input-role-bg-error: var(--sp-color-error-50);
461
- --sp-component-input-role-text-error: var(--sp-color-error-700);
462
- --sp-component-input-role-border-success: var(--sp-color-success-500);
463
- --sp-component-input-role-bg-success: var(--sp-color-success-50);
464
- --sp-component-input-role-text-success: var(--sp-color-success-700);
465
- --sp-component-input-role-bg-disabled: var(--sp-surface-input);
466
- --sp-component-input-role-text-disabled: var(--sp-text-on-surface-meta);
467
- /* Important: border-disabled should fall back to a BORDER token, not a surface token */
468
- --sp-component-input-role-border-disabled: var(--sp-color-neutral-200);
459
+ --sp-component-input-role-border: var(--sp-form-default-border);
460
+ --sp-component-input-role-bg: var(--sp-form-default-bg);
461
+ --sp-component-input-role-text: var(--sp-form-default-text);
462
+ --sp-component-input-role-placeholder: var(--sp-form-default-placeholder);
463
+ --sp-component-input-role-border-focus: var(--sp-form-focus-border);
464
+ --sp-component-input-role-ring: var(--sp-form-focus-ring);
465
+ --sp-component-input-role-border-error: var(--sp-form-invalid-border);
466
+ --sp-component-input-role-bg-error: var(--sp-form-invalid-bg);
467
+ --sp-component-input-role-text-error: var(--sp-form-invalid-text);
468
+ --sp-component-input-role-border-success: var(--sp-form-valid-border);
469
+ --sp-component-input-role-bg-success: var(--sp-form-valid-bg);
470
+ --sp-component-input-role-text-success: var(--sp-form-valid-text);
471
+ --sp-component-input-role-bg-disabled: var(--sp-form-disabled-bg);
472
+ --sp-component-input-role-text-disabled: var(--sp-form-disabled-text);
473
+ --sp-component-input-role-border-disabled: var(--sp-form-disabled-border);
469
474
 
470
475
  /* badge roles */
471
476
  --sp-component-badge-font: var(--sp-font-family-sans);
@@ -1069,4 +1074,163 @@
1069
1074
  .sp-shadow-strong {
1070
1075
  box-shadow: var(--sp-shadow-lg);
1071
1076
  }
1077
+
1078
+ .sp-z-base {
1079
+ z-index: var(--sp-z-index-base);
1080
+ }
1081
+
1082
+ .sp-z-dropdown {
1083
+ z-index: var(--sp-z-index-dropdown);
1084
+ }
1085
+
1086
+ .sp-z-sticky {
1087
+ z-index: var(--sp-z-index-sticky);
1088
+ }
1089
+
1090
+ .sp-z-fixed {
1091
+ z-index: var(--sp-z-index-fixed);
1092
+ }
1093
+
1094
+ .sp-z-overlay {
1095
+ z-index: var(--sp-z-index-overlay);
1096
+ }
1097
+
1098
+ .sp-z-modal {
1099
+ z-index: var(--sp-z-index-modal);
1100
+ }
1101
+
1102
+ .sp-z-popover {
1103
+ z-index: var(--sp-z-index-popover);
1104
+ }
1105
+
1106
+ .sp-z-tooltip {
1107
+ z-index: var(--sp-z-index-tooltip);
1108
+ }
1109
+
1110
+ .sp-animate-fade-in {
1111
+ animation: var(--sp-animation-fadein-keyframes)
1112
+ var(--sp-animation-fadein-duration) var(--sp-animation-fadein-easing);
1113
+ }
1114
+
1115
+ .sp-animate-fade-out {
1116
+ animation: var(--sp-animation-fadeout-keyframes)
1117
+ var(--sp-animation-fadeout-duration) var(--sp-animation-fadeout-easing);
1118
+ }
1119
+
1120
+ .sp-animate-slide-up {
1121
+ animation: var(--sp-animation-slideup-keyframes)
1122
+ var(--sp-animation-slideup-duration) var(--sp-animation-slideup-easing);
1123
+ }
1124
+
1125
+ .sp-animate-slide-down {
1126
+ animation: var(--sp-animation-slidedown-keyframes)
1127
+ var(--sp-animation-slidedown-duration)
1128
+ var(--sp-animation-slidedown-easing);
1129
+ }
1130
+
1131
+ .sp-animate-scale-in {
1132
+ animation: var(--sp-animation-scalein-keyframes)
1133
+ var(--sp-animation-scalein-duration) var(--sp-animation-scalein-easing);
1134
+ }
1135
+
1136
+ .sp-animate-bounce {
1137
+ animation: var(--sp-animation-bounce-keyframes)
1138
+ var(--sp-animation-bounce-duration) var(--sp-animation-bounce-easing);
1139
+ }
1140
+
1141
+ .sp-animate-shake {
1142
+ animation: var(--sp-animation-shake-keyframes)
1143
+ var(--sp-animation-shake-duration) var(--sp-animation-shake-easing);
1144
+ }
1145
+
1146
+ .sp-animate-pulse {
1147
+ animation: var(--sp-animation-pulse-keyframes)
1148
+ var(--sp-animation-pulse-duration) var(--sp-animation-pulse-easing);
1149
+ }
1150
+
1151
+ @keyframes fade-in {
1152
+ from {
1153
+ opacity: 0;
1154
+ }
1155
+ to {
1156
+ opacity: 1;
1157
+ }
1158
+ }
1159
+
1160
+ @keyframes fade-out {
1161
+ from {
1162
+ opacity: 1;
1163
+ }
1164
+ to {
1165
+ opacity: 0;
1166
+ }
1167
+ }
1168
+
1169
+ @keyframes slide-up {
1170
+ from {
1171
+ opacity: 0;
1172
+ transform: translateY(0.5rem);
1173
+ }
1174
+ to {
1175
+ opacity: 1;
1176
+ transform: translateY(0);
1177
+ }
1178
+ }
1179
+
1180
+ @keyframes slide-down {
1181
+ from {
1182
+ opacity: 0;
1183
+ transform: translateY(-0.5rem);
1184
+ }
1185
+ to {
1186
+ opacity: 1;
1187
+ transform: translateY(0);
1188
+ }
1189
+ }
1190
+
1191
+ @keyframes scale-in {
1192
+ from {
1193
+ opacity: 0;
1194
+ transform: scale(0.95);
1195
+ }
1196
+ to {
1197
+ opacity: 1;
1198
+ transform: scale(1);
1199
+ }
1200
+ }
1201
+
1202
+ @keyframes bounce {
1203
+ 0%,
1204
+ 100% {
1205
+ transform: translateY(0);
1206
+ }
1207
+ 50% {
1208
+ transform: translateY(-0.375rem);
1209
+ }
1210
+ }
1211
+
1212
+ @keyframes shake {
1213
+ 0%,
1214
+ 100% {
1215
+ transform: translateX(0);
1216
+ }
1217
+ 20%,
1218
+ 60% {
1219
+ transform: translateX(-0.375rem);
1220
+ }
1221
+ 40%,
1222
+ 80% {
1223
+ transform: translateX(0.375rem);
1224
+ }
1225
+ }
1226
+
1227
+ @keyframes pulse {
1228
+ 0%,
1229
+ 100% {
1230
+ transform: scale(1);
1231
+ }
1232
+ 50% {
1233
+ transform: scale(1.04);
1234
+ }
1235
+ }
1072
1236
  }
package/dist/utilities.css CHANGED
@@ -33,4 +33,163 @@
33
33
  .sp-shadow-strong {
34
34
  box-shadow: var(--sp-shadow-lg);
35
35
  }
36
+
37
+ .sp-z-base {
38
+ z-index: var(--sp-z-index-base);
39
+ }
40
+
41
+ .sp-z-dropdown {
42
+ z-index: var(--sp-z-index-dropdown);
43
+ }
44
+
45
+ .sp-z-sticky {
46
+ z-index: var(--sp-z-index-sticky);
47
+ }
48
+
49
+ .sp-z-fixed {
50
+ z-index: var(--sp-z-index-fixed);
51
+ }
52
+
53
+ .sp-z-overlay {
54
+ z-index: var(--sp-z-index-overlay);
55
+ }
56
+
57
+ .sp-z-modal {
58
+ z-index: var(--sp-z-index-modal);
59
+ }
60
+
61
+ .sp-z-popover {
62
+ z-index: var(--sp-z-index-popover);
63
+ }
64
+
65
+ .sp-z-tooltip {
66
+ z-index: var(--sp-z-index-tooltip);
67
+ }
68
+
69
+ .sp-animate-fade-in {
70
+ animation: var(--sp-animation-fadein-keyframes)
71
+ var(--sp-animation-fadein-duration) var(--sp-animation-fadein-easing);
72
+ }
73
+
74
+ .sp-animate-fade-out {
75
+ animation: var(--sp-animation-fadeout-keyframes)
76
+ var(--sp-animation-fadeout-duration) var(--sp-animation-fadeout-easing);
77
+ }
78
+
79
+ .sp-animate-slide-up {
80
+ animation: var(--sp-animation-slideup-keyframes)
81
+ var(--sp-animation-slideup-duration) var(--sp-animation-slideup-easing);
82
+ }
83
+
84
+ .sp-animate-slide-down {
85
+ animation: var(--sp-animation-slidedown-keyframes)
86
+ var(--sp-animation-slidedown-duration)
87
+ var(--sp-animation-slidedown-easing);
88
+ }
89
+
90
+ .sp-animate-scale-in {
91
+ animation: var(--sp-animation-scalein-keyframes)
92
+ var(--sp-animation-scalein-duration) var(--sp-animation-scalein-easing);
93
+ }
94
+
95
+ .sp-animate-bounce {
96
+ animation: var(--sp-animation-bounce-keyframes)
97
+ var(--sp-animation-bounce-duration) var(--sp-animation-bounce-easing);
98
+ }
99
+
100
+ .sp-animate-shake {
101
+ animation: var(--sp-animation-shake-keyframes)
102
+ var(--sp-animation-shake-duration) var(--sp-animation-shake-easing);
103
+ }
104
+
105
+ .sp-animate-pulse {
106
+ animation: var(--sp-animation-pulse-keyframes)
107
+ var(--sp-animation-pulse-duration) var(--sp-animation-pulse-easing);
108
+ }
109
+
110
+ @keyframes fade-in {
111
+ from {
112
+ opacity: 0;
113
+ }
114
+ to {
115
+ opacity: 1;
116
+ }
117
+ }
118
+
119
+ @keyframes fade-out {
120
+ from {
121
+ opacity: 1;
122
+ }
123
+ to {
124
+ opacity: 0;
125
+ }
126
+ }
127
+
128
+ @keyframes slide-up {
129
+ from {
130
+ opacity: 0;
131
+ transform: translateY(0.5rem);
132
+ }
133
+ to {
134
+ opacity: 1;
135
+ transform: translateY(0);
136
+ }
137
+ }
138
+
139
+ @keyframes slide-down {
140
+ from {
141
+ opacity: 0;
142
+ transform: translateY(-0.5rem);
143
+ }
144
+ to {
145
+ opacity: 1;
146
+ transform: translateY(0);
147
+ }
148
+ }
149
+
150
+ @keyframes scale-in {
151
+ from {
152
+ opacity: 0;
153
+ transform: scale(0.95);
154
+ }
155
+ to {
156
+ opacity: 1;
157
+ transform: scale(1);
158
+ }
159
+ }
160
+
161
+ @keyframes bounce {
162
+ 0%,
163
+ 100% {
164
+ transform: translateY(0);
165
+ }
166
+ 50% {
167
+ transform: translateY(-0.375rem);
168
+ }
169
+ }
170
+
171
+ @keyframes shake {
172
+ 0%,
173
+ 100% {
174
+ transform: translateX(0);
175
+ }
176
+ 20%,
177
+ 60% {
178
+ transform: translateX(-0.375rem);
179
+ }
180
+ 40%,
181
+ 80% {
182
+ transform: translateX(0.375rem);
183
+ }
184
+ }
185
+
186
+ @keyframes pulse {
187
+ 0%,
188
+ 100% {
189
+ transform: scale(1);
190
+ }
191
+ 50% {
192
+ transform: scale(1.04);
193
+ }
194
+ }
36
195
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@phcdevworks/spectre-ui",
3
- "version": "0.4.0",
3
+ "version": "0.4.1",
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",
@@ -77,7 +77,7 @@
77
77
  "tailwindcss": "^3.4.0 || ^4.0.0"
78
78
  },
79
79
  "dependencies": {
80
- "@phcdevworks/spectre-tokens": "^0.2.0"
80
+ "@phcdevworks/spectre-tokens": "^0.2.1"
81
81
  },
82
82
  "devDependencies": {
83
83
  "autoprefixer": "^10.4.20",