@phcdevworks/spectre-tokens 4.7.0 → 4.9.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.
Files changed (12) hide show
  1. package/README.md +4 -4
  2. package/dist/index.cjs +303 -23
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.css +160 -0
  5. package/dist/index.d.cts +313 -1
  6. package/dist/index.d.ts +313 -1
  7. package/dist/index.js +303 -23
  8. package/dist/index.js.map +1 -1
  9. package/dist/tokens.dtcg.json +957 -17
  10. package/package.json +11 -11
  11. package/tokens/components.json +310 -0
  12. package/tokens/modes.json +604 -4
package/dist/index.css CHANGED
@@ -24,6 +24,13 @@
24
24
  --sp-text-on-inverse-muted: #b7c1d4;
25
25
  --sp-component-card-text: #141b24;
26
26
  --sp-component-card-text-muted: #4b576a;
27
+ --sp-component-card-accent-neutral: #4b576a;
28
+ --sp-component-card-accent-brand: #1f57db;
29
+ --sp-component-card-accent-info: #0369a1;
30
+ --sp-component-card-accent-success: #16a34a;
31
+ --sp-component-card-accent-warning: #d48806;
32
+ --sp-component-card-accent-danger: #dc2626;
33
+ --sp-component-card-accent-cta: #1f57db;
27
34
  --sp-component-input-text: #141b24;
28
35
  --sp-component-input-placeholder: #657287;
29
36
  --sp-button-text-default: #141b24;
@@ -40,6 +47,13 @@
40
47
  --sp-badge-warning-text: #8f5200;
41
48
  --sp-badge-danger-bg: #fee2e2;
42
49
  --sp-badge-danger-text: #b91c1c;
50
+ --sp-badge-accent-neutral: #4b576a;
51
+ --sp-badge-accent-brand: #1f57db;
52
+ --sp-badge-accent-info: #0369a1;
53
+ --sp-badge-accent-success: #16a34a;
54
+ --sp-badge-accent-warning: #d48806;
55
+ --sp-badge-accent-danger: #dc2626;
56
+ --sp-badge-accent-cta: #1f57db;
43
57
  --sp-icon-box-bg: #ffffff;
44
58
  --sp-icon-box-border: #d9dfeb;
45
59
  --sp-icon-box-icon-default: #0369a1;
@@ -53,6 +67,13 @@
53
67
  --sp-testimonial-author-name: #141b24;
54
68
  --sp-testimonial-author-title: #4b576a;
55
69
  --sp-testimonial-quote-mark: #4b576a;
70
+ --sp-testimonial-accent-neutral: #4b576a;
71
+ --sp-testimonial-accent-brand: #1f57db;
72
+ --sp-testimonial-accent-info: #0369a1;
73
+ --sp-testimonial-accent-success: #16a34a;
74
+ --sp-testimonial-accent-warning: #d48806;
75
+ --sp-testimonial-accent-danger: #dc2626;
76
+ --sp-testimonial-accent-cta: #1f57db;
56
77
  --sp-pricing-card-bg: #ffffff;
57
78
  --sp-pricing-card-bg-hover: #f7f8fb;
58
79
  --sp-pricing-card-border: #d9dfeb;
@@ -62,6 +83,13 @@
62
83
  --sp-pricing-card-featured-badge-text: #141b24;
63
84
  --sp-pricing-card-price: #141b24;
64
85
  --sp-pricing-card-price-description: #4b576a;
86
+ --sp-pricing-card-accent-neutral: #4b576a;
87
+ --sp-pricing-card-accent-brand: #1f57db;
88
+ --sp-pricing-card-accent-info: #0369a1;
89
+ --sp-pricing-card-accent-success: #16a34a;
90
+ --sp-pricing-card-accent-warning: #d48806;
91
+ --sp-pricing-card-accent-danger: #dc2626;
92
+ --sp-pricing-card-accent-cta: #1f57db;
65
93
  --sp-rating-star-filled: #f5ad00;
66
94
  --sp-rating-star-empty: #d9dfeb;
67
95
  --sp-rating-text: #657287;
@@ -71,6 +99,13 @@
71
99
  --sp-nav-link-hover: #1f57db;
72
100
  --sp-nav-link-active: #1946b4;
73
101
  --sp-nav-border: #d9dfeb;
102
+ --sp-nav-accent-neutral: #4b576a;
103
+ --sp-nav-accent-brand: #1f57db;
104
+ --sp-nav-accent-info: #0369a1;
105
+ --sp-nav-accent-success: #16a34a;
106
+ --sp-nav-accent-warning: #d48806;
107
+ --sp-nav-accent-danger: #dc2626;
108
+ --sp-nav-accent-cta: #1f57db;
74
109
  --sp-footer-bg: #141b24;
75
110
  --sp-footer-text: #f7f8fb;
76
111
  --sp-footer-heading: #ffffff;
@@ -80,10 +115,24 @@
80
115
  --sp-footer-border: #374253;
81
116
  --sp-footer-divider: #222b38;
82
117
  --sp-footer-chip-bg: #222b38;
118
+ --sp-footer-accent-neutral: #4b576a;
119
+ --sp-footer-accent-brand: #1f57db;
120
+ --sp-footer-accent-info: #0369a1;
121
+ --sp-footer-accent-success: #16a34a;
122
+ --sp-footer-accent-warning: #d48806;
123
+ --sp-footer-accent-danger: #dc2626;
124
+ --sp-footer-accent-cta: #1f57db;
83
125
  --sp-modal-bg: #ffffff;
84
126
  --sp-modal-shadow: 0 20px 48px -12px rgba(0, 0, 0, 0.20);
85
127
  --sp-modal-border: #d9dfeb;
86
128
  --sp-modal-overlay: rgba(0, 0, 0, 0.6);
129
+ --sp-modal-accent-neutral: #4b576a;
130
+ --sp-modal-accent-brand: #1f57db;
131
+ --sp-modal-accent-info: #0369a1;
132
+ --sp-modal-accent-success: #16a34a;
133
+ --sp-modal-accent-warning: #d48806;
134
+ --sp-modal-accent-danger: #dc2626;
135
+ --sp-modal-accent-cta: #1f57db;
87
136
  --sp-toast-success-bg: #f0fdf4;
88
137
  --sp-toast-success-text: #166534;
89
138
  --sp-toast-success-border: #bbf7d0;
@@ -100,15 +149,36 @@
100
149
  --sp-toast-info-text: #0c4a6e;
101
150
  --sp-toast-info-border: #bae6fd;
102
151
  --sp-toast-info-icon: #0369a1;
152
+ --sp-toast-accent-neutral: #4b576a;
153
+ --sp-toast-accent-brand: #1f57db;
154
+ --sp-toast-accent-info: #0369a1;
155
+ --sp-toast-accent-success: #16a34a;
156
+ --sp-toast-accent-warning: #d48806;
157
+ --sp-toast-accent-danger: #dc2626;
158
+ --sp-toast-accent-cta: #1f57db;
103
159
  --sp-tooltip-bg: #141b24;
104
160
  --sp-tooltip-text: #ffffff;
105
161
  --sp-tooltip-border: #374253;
162
+ --sp-tooltip-accent-neutral: #4b576a;
163
+ --sp-tooltip-accent-brand: #1f57db;
164
+ --sp-tooltip-accent-info: #0369a1;
165
+ --sp-tooltip-accent-success: #16a34a;
166
+ --sp-tooltip-accent-warning: #d48806;
167
+ --sp-tooltip-accent-danger: #dc2626;
168
+ --sp-tooltip-accent-cta: #1f57db;
106
169
  --sp-dropdown-bg: #ffffff;
107
170
  --sp-dropdown-border: #d9dfeb;
108
171
  --sp-dropdown-item-default: transparent;
109
172
  --sp-dropdown-item-hover: #eef1f6;
110
173
  --sp-dropdown-item-active: #f0f9ff;
111
174
  --sp-dropdown-item-text: #141b24;
175
+ --sp-dropdown-accent-neutral: #4b576a;
176
+ --sp-dropdown-accent-brand: #1f57db;
177
+ --sp-dropdown-accent-info: #0369a1;
178
+ --sp-dropdown-accent-success: #16a34a;
179
+ --sp-dropdown-accent-warning: #d48806;
180
+ --sp-dropdown-accent-danger: #dc2626;
181
+ --sp-dropdown-accent-cta: #1f57db;
112
182
  --sp-checkbox-bg: #ffffff;
113
183
  --sp-checkbox-border: #b7c1d4;
114
184
  --sp-checkbox-checked-bg: #0369a1;
@@ -148,10 +218,20 @@
148
218
  --sp-component-card-padding-sm: 1.5rem;
149
219
  --sp-component-card-padding-md: 2rem;
150
220
  --sp-component-card-padding-lg: 2.5rem;
221
+ --sp-component-card-accent-thickness: 0.25rem;
151
222
  --sp-badge-inverse-bg: rgba(255, 255, 255, 0.16);
152
223
  --sp-badge-inverse-bg-hover: rgba(255, 255, 255, 0.24);
153
224
  --sp-badge-inverse-text: #ffffff;
154
225
  --sp-badge-inverse-border: rgba(255, 255, 255, 0.3);
226
+ --sp-badge-accent-thickness: 0.25rem;
227
+ --sp-testimonial-accent-thickness: 0.25rem;
228
+ --sp-pricing-card-accent-thickness: 0.25rem;
229
+ --sp-nav-accent-thickness: 0.25rem;
230
+ --sp-footer-accent-thickness: 0.25rem;
231
+ --sp-modal-accent-thickness: 0.25rem;
232
+ --sp-toast-accent-thickness: 0.25rem;
233
+ --sp-tooltip-accent-thickness: 0.25rem;
234
+ --sp-dropdown-accent-thickness: 0.25rem;
155
235
  --sp-select-border-invalid: #ef4444;
156
236
  --sp-select-bg-invalid: #fef2f2;
157
237
  --sp-select-border-success: #22c55e;
@@ -976,6 +1056,13 @@
976
1056
  --sp-text-on-inverse-muted: #b7c1d4;
977
1057
  --sp-component-card-text: #eef1f6;
978
1058
  --sp-component-card-text-muted: #b7c1d4;
1059
+ --sp-component-card-accent-neutral: #8a96ad;
1060
+ --sp-component-card-accent-brand: #5a92ff;
1061
+ --sp-component-card-accent-info: #38bdf8;
1062
+ --sp-component-card-accent-success: #4ade80;
1063
+ --sp-component-card-accent-warning: #ffc21a;
1064
+ --sp-component-card-accent-danger: #f87171;
1065
+ --sp-component-card-accent-cta: #5a92ff;
979
1066
  --sp-component-input-text: #eef1f6;
980
1067
  --sp-component-input-placeholder: #b7c1d4;
981
1068
  --sp-button-text-default: #eef1f6;
@@ -992,6 +1079,13 @@
992
1079
  --sp-badge-warning-text: #fff1c2;
993
1080
  --sp-badge-danger-bg: #991b1b;
994
1081
  --sp-badge-danger-text: #fee2e2;
1082
+ --sp-badge-accent-neutral: #8a96ad;
1083
+ --sp-badge-accent-brand: #5a92ff;
1084
+ --sp-badge-accent-info: #38bdf8;
1085
+ --sp-badge-accent-success: #4ade80;
1086
+ --sp-badge-accent-warning: #ffc21a;
1087
+ --sp-badge-accent-danger: #f87171;
1088
+ --sp-badge-accent-cta: #5a92ff;
995
1089
  --sp-icon-box-bg: #222b38;
996
1090
  --sp-icon-box-border: #374253;
997
1091
  --sp-icon-box-icon-default: #38bdf8;
@@ -1005,6 +1099,13 @@
1005
1099
  --sp-testimonial-author-name: #eef1f6;
1006
1100
  --sp-testimonial-author-title: #b7c1d4;
1007
1101
  --sp-testimonial-quote-mark: #b7c1d4;
1102
+ --sp-testimonial-accent-neutral: #8a96ad;
1103
+ --sp-testimonial-accent-brand: #5a92ff;
1104
+ --sp-testimonial-accent-info: #38bdf8;
1105
+ --sp-testimonial-accent-success: #4ade80;
1106
+ --sp-testimonial-accent-warning: #ffc21a;
1107
+ --sp-testimonial-accent-danger: #f87171;
1108
+ --sp-testimonial-accent-cta: #5a92ff;
1008
1109
  --sp-pricing-card-bg: #222b38;
1009
1110
  --sp-pricing-card-bg-hover: #374253;
1010
1111
  --sp-pricing-card-border: #374253;
@@ -1014,6 +1115,13 @@
1014
1115
  --sp-pricing-card-featured-badge-text: #141b24;
1015
1116
  --sp-pricing-card-price: #eef1f6;
1016
1117
  --sp-pricing-card-price-description: #b7c1d4;
1118
+ --sp-pricing-card-accent-neutral: #8a96ad;
1119
+ --sp-pricing-card-accent-brand: #5a92ff;
1120
+ --sp-pricing-card-accent-info: #38bdf8;
1121
+ --sp-pricing-card-accent-success: #4ade80;
1122
+ --sp-pricing-card-accent-warning: #ffc21a;
1123
+ --sp-pricing-card-accent-danger: #f87171;
1124
+ --sp-pricing-card-accent-cta: #5a92ff;
1017
1125
  --sp-rating-star-filled: #ffc21a;
1018
1126
  --sp-rating-star-empty: #374253;
1019
1127
  --sp-rating-text: #8a96ad;
@@ -1023,6 +1131,13 @@
1023
1131
  --sp-nav-link-hover: #5a92ff;
1024
1132
  --sp-nav-link-active: #8ab6ff;
1025
1133
  --sp-nav-border: #374253;
1134
+ --sp-nav-accent-neutral: #8a96ad;
1135
+ --sp-nav-accent-brand: #5a92ff;
1136
+ --sp-nav-accent-info: #38bdf8;
1137
+ --sp-nav-accent-success: #4ade80;
1138
+ --sp-nav-accent-warning: #ffc21a;
1139
+ --sp-nav-accent-danger: #f87171;
1140
+ --sp-nav-accent-cta: #5a92ff;
1026
1141
  --sp-footer-bg: #000000;
1027
1142
  --sp-footer-text: #f7f8fb;
1028
1143
  --sp-footer-heading: #ffffff;
@@ -1032,10 +1147,24 @@
1032
1147
  --sp-footer-border: #222b38;
1033
1148
  --sp-footer-divider: #141b24;
1034
1149
  --sp-footer-chip-bg: #141b24;
1150
+ --sp-footer-accent-neutral: #8a96ad;
1151
+ --sp-footer-accent-brand: #5a92ff;
1152
+ --sp-footer-accent-info: #38bdf8;
1153
+ --sp-footer-accent-success: #4ade80;
1154
+ --sp-footer-accent-warning: #ffc21a;
1155
+ --sp-footer-accent-danger: #f87171;
1156
+ --sp-footer-accent-cta: #5a92ff;
1035
1157
  --sp-modal-bg: #222b38;
1036
1158
  --sp-modal-shadow: 0 20px 48px -12px rgba(0, 0, 0, 0.20);
1037
1159
  --sp-modal-border: #374253;
1038
1160
  --sp-modal-overlay: rgba(0, 0, 0, 0.6);
1161
+ --sp-modal-accent-neutral: #8a96ad;
1162
+ --sp-modal-accent-brand: #5a92ff;
1163
+ --sp-modal-accent-info: #38bdf8;
1164
+ --sp-modal-accent-success: #4ade80;
1165
+ --sp-modal-accent-warning: #ffc21a;
1166
+ --sp-modal-accent-danger: #f87171;
1167
+ --sp-modal-accent-cta: #5a92ff;
1039
1168
  --sp-toast-success-bg: #14532d;
1040
1169
  --sp-toast-success-text: #dcfce7;
1041
1170
  --sp-toast-success-border: #15803d;
@@ -1052,15 +1181,36 @@
1052
1181
  --sp-toast-info-text: #e0f2fe;
1053
1182
  --sp-toast-info-border: #075985;
1054
1183
  --sp-toast-info-icon: #38bdf8;
1184
+ --sp-toast-accent-neutral: #8a96ad;
1185
+ --sp-toast-accent-brand: #5a92ff;
1186
+ --sp-toast-accent-info: #38bdf8;
1187
+ --sp-toast-accent-success: #4ade80;
1188
+ --sp-toast-accent-warning: #ffc21a;
1189
+ --sp-toast-accent-danger: #f87171;
1190
+ --sp-toast-accent-cta: #5a92ff;
1055
1191
  --sp-tooltip-bg: #f7f8fb;
1056
1192
  --sp-tooltip-text: #141b24;
1057
1193
  --sp-tooltip-border: #b7c1d4;
1194
+ --sp-tooltip-accent-neutral: #8a96ad;
1195
+ --sp-tooltip-accent-brand: #5a92ff;
1196
+ --sp-tooltip-accent-info: #38bdf8;
1197
+ --sp-tooltip-accent-success: #4ade80;
1198
+ --sp-tooltip-accent-warning: #ffc21a;
1199
+ --sp-tooltip-accent-danger: #f87171;
1200
+ --sp-tooltip-accent-cta: #5a92ff;
1058
1201
  --sp-dropdown-bg: #222b38;
1059
1202
  --sp-dropdown-border: #374253;
1060
1203
  --sp-dropdown-item-default: transparent;
1061
1204
  --sp-dropdown-item-hover: #374253;
1062
1205
  --sp-dropdown-item-active: #082f49;
1063
1206
  --sp-dropdown-item-text: #eef1f6;
1207
+ --sp-dropdown-accent-neutral: #8a96ad;
1208
+ --sp-dropdown-accent-brand: #5a92ff;
1209
+ --sp-dropdown-accent-info: #38bdf8;
1210
+ --sp-dropdown-accent-success: #4ade80;
1211
+ --sp-dropdown-accent-warning: #ffc21a;
1212
+ --sp-dropdown-accent-danger: #f87171;
1213
+ --sp-dropdown-accent-cta: #5a92ff;
1064
1214
  --sp-checkbox-bg: #222b38;
1065
1215
  --sp-checkbox-border: #4b576a;
1066
1216
  --sp-checkbox-checked-bg: #0369a1;
@@ -1100,10 +1250,20 @@
1100
1250
  --sp-component-card-padding-sm: 1.5rem;
1101
1251
  --sp-component-card-padding-md: 2rem;
1102
1252
  --sp-component-card-padding-lg: 2.5rem;
1253
+ --sp-component-card-accent-thickness: 0.25rem;
1103
1254
  --sp-badge-inverse-bg: rgba(255, 255, 255, 0.16);
1104
1255
  --sp-badge-inverse-bg-hover: rgba(255, 255, 255, 0.24);
1105
1256
  --sp-badge-inverse-text: #ffffff;
1106
1257
  --sp-badge-inverse-border: rgba(255, 255, 255, 0.3);
1258
+ --sp-badge-accent-thickness: 0.25rem;
1259
+ --sp-testimonial-accent-thickness: 0.25rem;
1260
+ --sp-pricing-card-accent-thickness: 0.25rem;
1261
+ --sp-nav-accent-thickness: 0.25rem;
1262
+ --sp-footer-accent-thickness: 0.25rem;
1263
+ --sp-modal-accent-thickness: 0.25rem;
1264
+ --sp-toast-accent-thickness: 0.25rem;
1265
+ --sp-tooltip-accent-thickness: 0.25rem;
1266
+ --sp-dropdown-accent-thickness: 0.25rem;
1107
1267
  --sp-select-border-invalid: #ef4444;
1108
1268
  --sp-select-bg-invalid: #fef2f2;
1109
1269
  --sp-select-border-success: #22c55e;