@phcdevworks/spectre-tokens 0.2.1 → 2.0.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/README.md +13 -17
- package/dist/index.cjs +1251 -602
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +105 -73
- package/dist/index.d.cts +1340 -87
- package/dist/index.d.ts +1340 -87
- package/dist/index.js +1251 -602
- package/dist/index.js.map +1 -1
- package/package.json +15 -4
- package/tokens/components.json +155 -0
- package/tokens/modes.json +182 -0
- package/tokens/palette.json +102 -0
- package/tokens/primitives.json +145 -0
- package/tokens/semantic-roles.json +64 -0
- package/tokens/typography.json +94 -0
- package/tokens/core.json +0 -714
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
JSON-first design tokens that power Spectre UI, Spectre Blocks, Spectre Astro, Spectre 11ty, and every future Spectre surface.
|
|
4
4
|
|
|
5
|
-
🤝 **[Contributing Guide](CONTRIBUTING.md)** | 📝 **[Changelog](CHANGELOG.md)**
|
|
5
|
+
🤝 **[Contributing Guide](CONTRIBUTING.md)** | 📝 **[Changelog](CHANGELOG.md)** | 🎨 **[Token Examples](example/examples.md)**
|
|
6
6
|
|
|
7
7
|
## Overview
|
|
8
8
|
|
|
@@ -211,7 +211,8 @@ tokens.forms.disabled;
|
|
|
211
211
|
```css
|
|
212
212
|
.input:focus {
|
|
213
213
|
border-color: var(--sp-form-focus-border);
|
|
214
|
-
outline: var(--sp-focus-ring-width) var(--sp-focus-ring-style)
|
|
214
|
+
outline: var(--sp-focus-ring-width) var(--sp-focus-ring-style)
|
|
215
|
+
var(--sp-form-focus-ring);
|
|
215
216
|
}
|
|
216
217
|
.input.error {
|
|
217
218
|
border-color: var(--sp-form-invalid-border);
|
|
@@ -244,9 +245,8 @@ tokens.animations.pulse;
|
|
|
244
245
|
|
|
245
246
|
```css
|
|
246
247
|
.modal {
|
|
247
|
-
animation: fade-in var(--sp-animation-fade-in-duration)
|
|
248
|
-
|
|
249
|
-
);
|
|
248
|
+
animation: fade-in var(--sp-animation-fade-in-duration)
|
|
249
|
+
var(--sp-animation-fade-in-easing);
|
|
250
250
|
}
|
|
251
251
|
```
|
|
252
252
|
|
|
@@ -1186,9 +1186,8 @@ const buttonStyles = {
|
|
|
1186
1186
|
padding: var(--sp-space-12) var(--sp-space-16);
|
|
1187
1187
|
font-size: var(--sp-font-md-size);
|
|
1188
1188
|
color: var(--sp-form-default-text);
|
|
1189
|
-
transition: border-color var(--sp-transition-duration-fast)
|
|
1190
|
-
|
|
1191
|
-
);
|
|
1189
|
+
transition: border-color var(--sp-transition-duration-fast)
|
|
1190
|
+
var(--sp-transition-easing-out);
|
|
1192
1191
|
min-height: var(--sp-accessibility-min-touch-target);
|
|
1193
1192
|
}
|
|
1194
1193
|
|
|
@@ -1203,9 +1202,8 @@ const buttonStyles = {
|
|
|
1203
1202
|
.form-input:focus {
|
|
1204
1203
|
outline: none;
|
|
1205
1204
|
border-color: var(--sp-form-focus-border);
|
|
1206
|
-
box-shadow: 0 0 0 var(--sp-accessibility-focus-ring-width)
|
|
1207
|
-
|
|
1208
|
-
);
|
|
1205
|
+
box-shadow: 0 0 0 var(--sp-accessibility-focus-ring-width)
|
|
1206
|
+
var(--sp-form-focus-ring);
|
|
1209
1207
|
}
|
|
1210
1208
|
|
|
1211
1209
|
.form-field--error .form-input {
|
|
@@ -1254,9 +1252,8 @@ const Container = styled.div`
|
|
|
1254
1252
|
align-items: center;
|
|
1255
1253
|
justify-content: center;
|
|
1256
1254
|
background: var(--sp-surface-overlay);
|
|
1257
|
-
animation: fade-in var(--sp-animation-fade-in-duration)
|
|
1258
|
-
|
|
1259
|
-
);
|
|
1255
|
+
animation: fade-in var(--sp-animation-fade-in-duration)
|
|
1256
|
+
var(--sp-animation-fade-in-easing);
|
|
1260
1257
|
}
|
|
1261
1258
|
|
|
1262
1259
|
.modal__content {
|
|
@@ -1265,9 +1262,8 @@ const Container = styled.div`
|
|
|
1265
1262
|
padding: var(--sp-space-32);
|
|
1266
1263
|
box-shadow: var(--sp-shadow-lg);
|
|
1267
1264
|
max-width: 32rem;
|
|
1268
|
-
animation: scale-in var(--sp-animation-scale-in-duration)
|
|
1269
|
-
|
|
1270
|
-
);
|
|
1265
|
+
animation: scale-in var(--sp-animation-scale-in-duration)
|
|
1266
|
+
var(--sp-animation-scale-in-easing);
|
|
1271
1267
|
}
|
|
1272
1268
|
|
|
1273
1269
|
@keyframes fade-in {
|