@placeholderco/placeholder-ui 2.7.0 → 2.7.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 (3) hide show
  1. package/dist/app.css +17 -16
  2. package/dist/ui/Button.svelte +37 -46
  3. package/package.json +1 -1
package/dist/app.css CHANGED
@@ -244,36 +244,37 @@ a:hover {
244
244
  .editor-button-accent-outline {
245
245
  border: 1px solid var(--editor-button-border);
246
246
  --editor-button-bg: transparent;
247
- --editor-button-hover-bg: transparent;
248
247
  }
249
248
 
250
249
  .editor-button-primary-outline {
251
- --editor-button-fg: var(--ui-primary-text-color);
252
- --editor-button-border: var(--ui-primary-text-color);
253
- --editor-button-hover-fg: var(--ui-primary-hover-color);
254
- --editor-button-hover-border: var(--ui-primary-hover-color);
250
+ --editor-button-fg: var(--ui-primary);
251
+ --editor-button-border: var(--ui-primary);
252
+ --editor-button-hover-fg: var(--ui-primary-contrast-color);
253
+ --editor-button-hover-bg: var(--ui-primary);
254
+ --editor-button-hover-border: var(--ui-primary);
255
255
  }
256
256
 
257
257
  .editor-button-accent-outline {
258
- --editor-button-fg: var(--ui-accent-text-color);
259
- --editor-button-border: var(--ui-accent-text-color);
260
- --editor-button-hover-fg: var(--ui-accent-hover-color);
261
- --editor-button-hover-border: var(--ui-accent-hover-color);
258
+ --editor-button-fg: var(--ui-accent);
259
+ --editor-button-border: var(--ui-accent);
260
+ --editor-button-hover-fg: var(--ui-accent-contrast-color);
261
+ --editor-button-hover-bg: var(--ui-accent);
262
+ --editor-button-hover-border: var(--ui-accent);
262
263
  }
263
264
 
264
265
  .editor-button-tertiary-outline {
265
- --editor-button-fg: var(--ui-tertiary-text-color);
266
- --editor-button-border: var(--ui-tertiary-text-color);
266
+ --editor-button-fg: var(--ui-tertiary);
267
+ --editor-button-border: var(--ui-tertiary);
267
268
  --editor-button-hover-fg: var(--ui-tertiary-contrast-color);
268
- --editor-button-hover-bg: var(--ui-tertiary-hover-color);
269
- --editor-button-hover-border: var(--ui-tertiary-text-color);
269
+ --editor-button-hover-bg: var(--ui-tertiary);
270
+ --editor-button-hover-border: var(--ui-tertiary);
270
271
  }
271
272
 
272
273
  .editor-button-tertiary-subtle {
273
- --editor-button-fg: var(--ui-tertiary-text-color);
274
+ --editor-button-fg: var(--ui-tertiary);
274
275
  --editor-button-bg: transparent;
275
- --editor-button-hover-fg: var(--ui-tertiary-text-color);
276
- --editor-button-hover-bg: color-mix(in srgb, var(--ui-tertiary-hover-color) 25%, transparent);
276
+ --editor-button-hover-fg: var(--ui-tertiary-contrast-color);
277
+ --editor-button-hover-bg: var(--ui-tertiary);
277
278
  }
278
279
 
279
280
  .editor-button-tertiary-outline:focus-visible,
package/dist/ui/Button.svelte CHANGED
@@ -207,16 +207,13 @@
207
207
  }
208
208
 
209
209
  .danger-subtle {
210
- background-color: initial;
211
- color: var(--danger-text);
212
-
213
- &:hover:not(:disabled) {
214
- background-color: var(--danger-bg-subtle);
215
- }
216
-
217
- :global(.loader) {
218
- color: var(--danger-text);
219
- }
210
+ --button-text-color: var(--danger-bg);
211
+ --button-bg-color: initial;
212
+ --button-hover-text-color: white;
213
+ --button-hover-bg-color: var(--danger-bg);
214
+ --button-active-text-color: white;
215
+ --button-active-bg-color: #b02a37;
216
+ --button-outline-color: var(--ui-focus-color);
220
217
  }
221
218
 
222
219
  .accent {
@@ -228,21 +225,22 @@
228
225
  }
229
226
 
230
227
  .accent-outline {
231
- --button-text-color: var(--ui-accent-text-color);
228
+ --button-text-color: var(--ui-accent);
232
229
  --button-bg-color: initial;
233
- --button-border: 1px solid var(--ui-accent-text-color);
234
- --button-hover-text-color: var(--ui-accent-hover-color);
235
- --button-hover-border: 1px solid var(--ui-accent-hover-color);
236
- --button-active-text-color: var(--ui-accent-pressed-color);
230
+ --button-border: 1px solid var(--ui-accent);
231
+ --button-hover-text-color: var(--ui-accent-contrast-color);
232
+ --button-hover-bg-color: var(--ui-accent);
233
+ --button-active-text-color: var(--ui-accent-contrast-color);
234
+ --button-active-bg-color: var(--ui-accent-pressed-color);
237
235
  --button-active-border: 1px solid var(--ui-accent-pressed-color);
238
236
  --button-outline-color: var(--ui-focus-color);
239
237
  }
240
238
 
241
239
  .accent-subtle {
242
- --button-text-color: var(--ui-accent-text-color);
240
+ --button-text-color: var(--ui-accent);
243
241
  --button-bg-color: initial;
244
242
  --button-hover-text-color: var(--ui-accent-contrast-color);
245
- --button-hover-bg-color: var(--ui-accent-hover-color);
243
+ --button-hover-bg-color: var(--ui-accent);
246
244
  --button-active-text-color: var(--ui-accent-contrast-color);
247
245
  --button-active-bg-color: var(--ui-accent-pressed-color);
248
246
  --button-outline-color: var(--ui-focus-color);
@@ -256,22 +254,25 @@
256
254
  }
257
255
 
258
256
  .primary-outline {
259
- --button-text-color: var(--ui-primary-text-color);
257
+ --button-text-color: var(--ui-primary);
260
258
  --button-bg-color: initial;
261
- --button-border: 1px solid var(--ui-primary-text-color);
262
- --button-hover-text-color: var(--ui-primary-hover-color);
263
- --button-hover-border: 1px solid var(--ui-primary-hover-color);
264
- --button-active-text-color: var(--ui-primary-pressed-color);
259
+ --button-border: 1px solid var(--ui-primary);
260
+ --button-hover-text-color: var(--ui-primary-contrast-color);
261
+ --button-hover-bg-color: var(--ui-primary);
262
+ --button-active-text-color: var(--ui-primary-contrast-color);
263
+ --button-active-bg-color: var(--ui-primary-pressed-color);
265
264
  --button-active-border: 1px solid var(--ui-primary-pressed-color);
265
+ --button-outline-color: var(--ui-focus-color);
266
266
  }
267
267
 
268
268
  .primary-subtle {
269
- --button-text-color: var(--ui-primary-text-color);
269
+ --button-text-color: var(--ui-primary);
270
270
  --button-bg-color: initial;
271
271
  --button-hover-text-color: var(--ui-primary-contrast-color);
272
- --button-hover-bg-color: var(--ui-primary-hover-color);
272
+ --button-hover-bg-color: var(--ui-primary);
273
273
  --button-active-text-color: var(--ui-primary-contrast-color);
274
274
  --button-active-bg-color: var(--ui-primary-pressed-color);
275
+ --button-outline-color: var(--ui-focus-color);
275
276
  }
276
277
 
277
278
  .tertiary {
@@ -283,35 +284,25 @@
283
284
  }
284
285
 
285
286
  .tertiary-outline {
286
- --button-text-color: var(--ui-tertiary-text-color);
287
- --button-bg-color: transparent;
288
- --button-border: 1px solid var(--ui-tertiary-text-color);
287
+ --button-text-color: var(--ui-tertiary);
288
+ --button-bg-color: initial;
289
+ --button-border: 1px solid var(--ui-tertiary);
289
290
  --button-hover-text-color: var(--ui-tertiary-contrast-color);
290
- --button-hover-bg-color: var(--ui-tertiary-hover-color);
291
+ --button-hover-bg-color: var(--ui-tertiary);
291
292
  --button-active-text-color: var(--ui-tertiary-contrast-color);
292
293
  --button-active-bg-color: var(--ui-tertiary-pressed-color);
294
+ --button-active-border: 1px solid var(--ui-tertiary-pressed-color);
293
295
  --button-outline-color: var(--ui-focus-color);
294
296
  }
295
297
 
296
298
  .tertiary-subtle {
297
- background-color: initial;
298
- color: var(--ui-tertiary-text-color);
299
-
300
- &:hover:not(:disabled) {
301
- background-color: color-mix(in srgb, var(--ui-tertiary-hover-color) 25%, transparent);
302
- }
303
-
304
- &:active:not(:disabled, .effects-disabled) {
305
- background-color: color-mix(in srgb, var(--ui-tertiary-pressed-color) 25%, transparent);
306
- }
307
-
308
- &:focus-visible {
309
- outline-color: var(--ui-focus-color);
310
- }
311
-
312
- :global(.loader) {
313
- color: var(--ui-tertiary-text-color);
314
- }
299
+ --button-text-color: var(--ui-tertiary);
300
+ --button-bg-color: initial;
301
+ --button-hover-text-color: var(--ui-tertiary-contrast-color);
302
+ --button-hover-bg-color: var(--ui-tertiary);
303
+ --button-active-text-color: var(--ui-tertiary-contrast-color);
304
+ --button-active-bg-color: var(--ui-tertiary-pressed-color);
305
+ --button-outline-color: var(--ui-focus-color);
315
306
  }
316
307
 
317
308
  button,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@placeholderco/placeholder-ui",
3
- "version": "2.7.0",
3
+ "version": "2.7.1",
4
4
  "description": "A modern, customizable Svelte 5 UI component library with comprehensive theming support. Re-brand it with a single config object.",
5
5
  "license": "MIT",
6
6
  "author": "Placeholderco",