highsoft-ui 1.0.6 → 1.0.7

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 (15) hide show
  1. package/README.md +2 -2
  2. package/dist/components/Button/index.js +30 -31
  3. package/dist/components/GPTInput/index.js +26 -26
  4. package/dist/components/Header/index.js +67 -67
  5. package/dist/components/Notification/index.js +15 -15
  6. package/dist/components/PrefPanel/index.js +91 -91
  7. package/dist/highsoft-ui.css +1 -1
  8. package/dist/main.d.ts +1 -1
  9. package/dist/main.js +6 -5
  10. package/dist/php-client.d.ts +2 -0
  11. package/dist/php-client.js +38 -0
  12. package/dist/php.d.ts +0 -1
  13. package/dist/php.js +1356 -1391
  14. package/dist/scss/variables.scss +288 -0
  15. package/package.json +2 -1
package/dist/scss/variables.scss CHANGED
@@ -224,3 +224,291 @@ $body-1000: 2.5rem;
224
224
  @mixin body-semi-1000 {
225
225
  @include body-semi($body-1000);
226
226
  }
227
+
228
+ :root {
229
+ --button-colors-neutral-background-default: var(--primitives-neutral-800);
230
+ --button-colors-neutral-background-hover: var(--primitives-neutral-700);
231
+ --button-colors-neutral-background-pressed: var(--primitives-neutral-900);
232
+ --button-colors-neutral-background-focus: var(--primitives-neutral-800);
233
+ --button-colors-neutral-background-disabled: var(--primitives-neutral-300);
234
+ --button-colors-neutral-text-default: var(--primitives-neutral-0);
235
+ --button-colors-neutral-text-hover: var(--primitives-neutral-0);
236
+ --button-colors-neutral-text-pressed: var(--primitives-neutral-0);
237
+ --button-colors-neutral-text-focus: var(--primitives-neutral-0);
238
+ --button-colors-neutral-text-disabled: var(--primitives-neutral-0);
239
+ --button-colors-neutral-stroke-inner: rgba(255, 255, 255, 0.04);
240
+ --button-colors-neutral-stroke-outer-default: var(--primitives-neutral-900);
241
+ --button-colors-neutral-stroke-outer-hover: var(--primitives-neutral-800);
242
+
243
+ --button-colors-white-background-default: var(--primitives-neutral-0);
244
+ --button-colors-white-background-hover: var(--primitives-neutral-50);
245
+ --button-colors-white-background-pressed: var(--primitives-neutral-100);
246
+ --button-colors-white-background-focus: var(--primitives-neutral-100);
247
+ --button-colors-white-background-disabled: var(--primitives-neutral-300);
248
+ --button-colors-white-text-default: var(--primitives-neutral-900);
249
+ --button-colors-white-text-hover: var(--primitives-neutral-1000);
250
+ --button-colors-white-text-pressed: var(--primitives-neutral-1000);
251
+ --button-colors-white-text-focus: var(--primitives-neutral-1000);
252
+ --button-colors-white-text-disabled: var(--primitives-neutral-0);
253
+ --button-colors-white-stroke-inner-default: rgba(0, 0, 0, 0.12);
254
+ --button-colors-white-stroke-outer-default: var(--primitives-neutral-200);
255
+ --button-colors-white-stroke-outer-hover: var(--primitives-neutral-300);
256
+ --button-colors-white-stroke-outer-disabled: var(--primitives-neutral-200);
257
+ --button-colors-white-stroke-outer-pressed: var(--primitives-neutral-200);
258
+
259
+ --button-colors-plain-background-default: rgba(242, 241, 244, 0);
260
+ --button-colors-plain-background-hover: rgba(255, 255, 255, 0.49);
261
+ --button-colors-plain-background-pressed: rgba(255, 255, 255, 0.58);
262
+ --button-colors-plain-background-focus: rgba(255, 255, 255, 0.79);
263
+ --button-colors-plain-background-disabled: rgba(200, 199, 209, 0);
264
+ --button-colors-plain-text-default: var(--primitives-neutral-900);
265
+ --button-colors-plain-text-hover: var(--primitives-neutral-1000);
266
+ --button-colors-plain-text-pressed: var(--primitives-neutral-1000);
267
+ --button-colors-plain-text-focus: var(--primitives-neutral-1000);
268
+ --button-colors-plain-text-disabled: var(--primitives-neutral-500);
269
+ --button-colors-plain-stroke-inner-default: rgba(0, 0, 0, 0.12);
270
+ --button-colors-plain-stroke-outer-default: transparent;
271
+ --button-colors-plain-stroke-outer-hover: var(--primitives-neutral-200);
272
+ --button-colors-plain-stroke-outer-disabled: var(--primitives-neutral-200);
273
+ --button-colors-plain-stroke-outer-pressed: var(--primitives-neutral-200);
274
+
275
+ --button-colors-transparent-background-default: rgba(255, 255, 255, 0);
276
+ --button-colors-transparent-background-hover: rgba(255, 255, 255, 0.36);
277
+ --button-colors-transparent-background-pressed: rgba(255, 255, 255, 1);
278
+ --button-colors-transparent-background-focus: rgba(255, 255, 255, 0);
279
+ --button-colors-transparent-background-disabled: rgba(255, 255, 255, 0);
280
+ --button-colors-transparent-text-default: var(--primitives-neutral-900);
281
+ --button-colors-transparent-text-hover: var(--primitives-neutral-1000);
282
+ --button-colors-transparent-text-pressed: var(--primitives-neutral-1000);
283
+ --button-colors-transparent-text-focus: var(--primitives-neutral-1000);
284
+ --button-colors-transparent-text-disabled: var(--primitives-neutral-500);
285
+ --button-colors-transparent-stroke-inner-default: rgba(255, 255, 255, 0.2);
286
+ --button-colors-transparent-stroke-inner-hover: rgba(255, 255, 255, 0.4);
287
+ --button-colors-transparent-stroke-outer-default: rgba(0, 0, 0, 0.12);
288
+ --button-colors-transparent-stroke-outer-hover: rgba(0, 0, 0, 0.3);
289
+ --button-colors-transparent-stroke-outer-disabled: var(
290
+ --primitives-neutral-200
291
+ );
292
+ --button-colors-transparent-stroke-outer-pressed: var(
293
+ --primitives-neutral-200
294
+ );
295
+
296
+ --button-colors-brand-background-default: var(--primitives-brand-600);
297
+ --button-colors-brand-background-hover: var(--primitives-brand-500);
298
+ --button-colors-brand-background-pressed: var(--primitives-brand-700);
299
+ --button-colors-brand-background-focus: var(--primitives-brand-600);
300
+ --button-colors-brand-background-disabled: var(--primitives-neutral-300);
301
+ --button-colors-brand-text-default: var(--primitives-neutral-0);
302
+ --button-colors-brand-stroke-inner-default: rgba(255, 255, 255, 0.2);
303
+ --button-colors-brand-stroke-outer-default: var(--primitives-brand-700);
304
+ --button-colors-brand-stroke-outer-hover: var(--primitives-brand-600);
305
+ --button-colors-brand-stroke-outer-disabled: var(--primitives-neutral-200);
306
+ --button-colors-brand-stroke-outer-pressed: var(--primitives-neutral-200);
307
+ --button-colors-brand-text-hover: var(--primitives-neutral-0);
308
+ --button-colors-brand-text-pressed: var(--primitives-neutral-0);
309
+ --button-colors-brand-text-focus: var(--primitives-neutral-0);
310
+ --button-colors-brand-text-disabled: var(--primitives-neutral-0);
311
+
312
+ --button-colors-success-background-default: var(--primitives-success-700);
313
+ --button-colors-success-background-hover: var(--primitives-success-600);
314
+ --button-colors-success-background-pressed: var(--primitives-success-700);
315
+ --button-colors-success-background-focus: var(--primitives-success-600);
316
+ --button-colors-success-background-disabled: var(--primitives-neutral-300);
317
+ --button-colors-success-text-default: var(--primitives-neutral-0);
318
+ --button-colors-success-stroke-inner-default: rgba(255, 255, 255, 0.12);
319
+ --button-colors-success-stroke-outer-default: var(--primitives-success-800);
320
+ --button-colors-success-stroke-outer-hover: var(--primitives-success-700);
321
+ --button-colors-success-stroke-outer-disabled: var(--primitives-neutral-200);
322
+ --button-colors-success-stroke-outer-pressed: var(--primitives-neutral-200);
323
+ --button-colors-success-text-hover: var(--primitives-neutral-0);
324
+ --button-colors-success-text-pressed: var(--primitives-neutral-0);
325
+ --button-colors-success-text-focus: var(--primitives-neutral-0);
326
+ --button-colors-success-text-disabled: var(--primitives-neutral-0);
327
+
328
+ --button-colors-attention-background-default: var(--primitives-attention-500);
329
+ --button-colors-attention-background-hover: var(--primitives-attention-600);
330
+ --button-colors-attention-background-pressed: var(--primitives-attention-700);
331
+ --button-colors-attention-background-focus: var(--primitives-attention-600);
332
+ --button-colors-attention-background-disabled: var(--primitives-neutral-300);
333
+ --button-colors-attention-text-default: var(--primitives-neutral-0);
334
+ --button-colors-attention-stroke-inner-default: rgba(255, 255, 255, 0.12);
335
+ --button-colors-attention-stroke-outer-default: var(
336
+ --primitives-attention-600
337
+ );
338
+ --button-colors-attention-stroke-outer-hover: var(--primitives-attention-600);
339
+ --button-colors-attention-stroke-outer-disabled: var(
340
+ --primitives-neutral-300
341
+ );
342
+ --button-colors-attention-stroke-outer-pressed: var(--primitives-neutral-200);
343
+ --button-colors-attention-text-hover: var(--primitives-neutral-0);
344
+ --button-colors-attention-text-pressed: var(--primitives-neutral-0);
345
+ --button-colors-attention-text-focus: var(--primitives-neutral-0);
346
+ --button-colors-attention-text-disabled: var(--primitives-neutral-0);
347
+
348
+ --button-colors-danger-background-default: var(--primitives-danger-600);
349
+ --button-colors-danger-background-hover: var(--primitives-danger-500);
350
+ --button-colors-danger-background-pressed: var(--primitives-danger-700);
351
+ --button-colors-danger-background-focus: var(--primitives-danger-600);
352
+ --button-colors-danger-background-disabled: var(--primitives-neutral-300);
353
+ --button-colors-danger-text-default: var(--primitives-neutral-0);
354
+ --button-colors-danger-text-hover: var(--primitives-neutral-0);
355
+ --button-colors-danger-text-pressed: var(--primitives-neutral-0);
356
+ --button-colors-danger-text-focus: var(--primitives-neutral-0);
357
+ --button-colors-danger-text-disabled: var(--primitives-neutral-0);
358
+ --button-colors-danger-stroke-inner-default: rgba(255, 255, 255, 0.12);
359
+ --button-colors-danger-stroke-outer-default: var(--primitives-danger-600);
360
+ --button-colors-danger-stroke-outer-hover: var(--primitives-danger-500);
361
+ --button-colors-danger-stroke-outer-disabled: var(--primitives-neutral-300);
362
+ --button-colors-danger-stroke-outer-pressed: var(--primitives-neutral-200);
363
+
364
+ @media screen {
365
+ --button-text: var(--primitives-neutral-1000);
366
+ --button-transparent-border: #00000012;
367
+ --button-transparent-border-hover: #00000022;
368
+ }
369
+ }
370
+
371
+ [data-theme="dark"] {
372
+ --button-colors-neutral-background-default: var(--primitives-neutral-800);
373
+ --button-colors-neutral-background-hover: var(--primitives-neutral-600);
374
+ --button-colors-neutral-background-pressed: var(--primitives-neutral-900);
375
+ --button-colors-neutral-background-focus: var(--primitives-neutral-800);
376
+ --button-colors-neutral-background-disabled: var(--primitives-neutral-300);
377
+ --button-colors-neutral-text-default: var(--primitives-neutral-0);
378
+ --button-colors-neutral-text-hover: var(--primitives-neutral-0);
379
+ --button-colors-neutral-text-pressed: var(--primitives-neutral-0);
380
+ --button-colors-neutral-text-focus: var(--primitives-neutral-0);
381
+ --button-colors-neutral-text-disabled: var(--primitives-neutral-0);
382
+ --button-colors-neutral-stroke-inner: rgba(255, 255, 255, 0.04);
383
+ --button-colors-neutral-stroke-outer-default: var(--primitives-neutral-1000);
384
+ --button-colors-neutral-stroke-outer-hover: var(--primitives-neutral-1000);
385
+
386
+ --button-colors-white-background-default: var(--primitives-neutral-0);
387
+ --button-colors-white-background-hover: var(--primitives-neutral-50);
388
+ --button-colors-white-background-pressed: var(--primitives-neutral-100);
389
+ --button-colors-white-background-focus: var(--primitives-neutral-100);
390
+ --button-colors-white-background-disabled: var(--primitives-neutral-300);
391
+ --button-colors-white-text-default: var(--primitives-neutral-900);
392
+ --button-colors-white-text-hover: var(--primitives-neutral-1000);
393
+ --button-colors-white-text-pressed: var(--primitives-neutral-1000);
394
+ --button-colors-white-text-focus: var(--primitives-neutral-1000);
395
+ --button-colors-white-text-disabled: var(--primitives-neutral-0);
396
+ --button-colors-white-stroke-inner-default: var(--primitives-neutral-0);
397
+ --button-colors-white-stroke-outer-default: var(--primitives-neutral-800);
398
+ --button-colors-white-stroke-outer-hover: var(--primitives-neutral-900);
399
+ --button-colors-white-stroke-outer-disabled: var(--primitives-neutral-800);
400
+ --button-colors-white-stroke-outer-pressed: var(--primitives-neutral-800);
401
+
402
+ --button-colors-plain-background-default: rgba(47, 46, 56, 0);
403
+ --button-colors-plain-background-hover: var(--primitives-neutral-800);
404
+ --button-colors-plain-background-pressed: var(--primitives-neutral-700);
405
+ --button-colors-plain-background-focus: var(--primitives-neutral-700);
406
+ --button-colors-plain-background-disabled: rgba(47, 46, 56, 0);
407
+ --button-colors-plain-text-default: var(--primitives-neutral-25);
408
+ --button-colors-plain-text-hover: var(--primitives-neutral-0);
409
+ --button-colors-plain-text-pressed: var(--primitives-neutral-0);
410
+ --button-colors-plain-text-focus: var(--primitives-neutral-0);
411
+ --button-colors-plain-text-disabled: var(--primitives-neutral-500);
412
+ --button-colors-plain-stroke-inner-default: rgba(0, 0, 0, 0.87);
413
+ --button-colors-plain-stroke-outer-default: transparent;
414
+ --button-colors-plain-stroke-outer-hover: var(--primitives-neutral-700);
415
+ --button-colors-plain-stroke-outer-disabled: var(--primitives-neutral-800);
416
+ --button-colors-plain-stroke-outer-pressed: var(--primitives-neutral-800);
417
+
418
+ --button-colors-transparent-background-default: rgba(255, 255, 255, 0.02);
419
+ --button-colors-transparent-background-hover: rgba(133, 133, 133, 0.09);
420
+ --button-colors-transparent-background-pressed: var(
421
+ --primitives-neutral-1000
422
+ );
423
+ --button-colors-transparent-background-focus: var(--primitives-neutral-1000);
424
+ --button-colors-transparent-background-disabled: rgba(0, 0, 0, 0);
425
+ --button-colors-transparent-text-default: var(--primitives-neutral-25);
426
+ --button-colors-transparent-text-hover: var(--primitives-neutral-0);
427
+ --button-colors-transparent-text-pressed: var(--primitives-neutral-0);
428
+ --button-colors-transparent-text-focus: var(--primitives-neutral-0);
429
+ --button-colors-transparent-text-disabled: var(--primitives-neutral-500);
430
+ --button-colors-transparent-stroke-inner-default: rgba(255, 255, 255, 0.08);
431
+ --button-colors-transparent-stroke-inner-hover: rgba(255, 255, 255, 0.08);
432
+ --button-colors-transparent-stroke-outer-default: rgba(0, 0, 0, 0.5);
433
+ --button-colors-transparent-stroke-outer-hover: rgba(0, 0, 0, 0.75);
434
+ --button-colors-transparent-stroke-outer-disabled: var(
435
+ --primitives-neutral-800
436
+ );
437
+ --button-colors-transparent-stroke-outer-pressed: var(
438
+ --primitives-neutral-800
439
+ );
440
+
441
+ --button-colors-brand-background-default: var(--primitives-brand-600);
442
+ --button-colors-brand-background-hover: var(--primitives-brand-500);
443
+ --button-colors-brand-background-pressed: var(--primitives-brand-700);
444
+ --button-colors-brand-background-focus: var(--primitives-brand-600);
445
+ --button-colors-brand-background-disabled: var(--primitives-neutral-300);
446
+ --button-colors-brand-text-default: var(--primitives-neutral-0);
447
+ --button-colors-brand-stroke-inner-default: rgba(255, 255, 255, 0.2);
448
+ --button-colors-brand-stroke-outer-default: var(--primitives-brand-900);
449
+ --button-colors-brand-stroke-outer-hover: var(--primitives-brand-1000);
450
+ --button-colors-brand-stroke-outer-disabled: var(--primitives-neutral-0);
451
+ --button-colors-brand-stroke-outer-pressed: var(--primitives-neutral-0);
452
+ --button-colors-brand-text-hover: var(--primitives-neutral-0);
453
+ --button-colors-brand-text-pressed: var(--primitives-neutral-0);
454
+ --button-colors-brand-text-focus: var(--primitives-neutral-0);
455
+ --button-colors-brand-text-disabled: var(--primitives-neutral-0);
456
+
457
+ --button-colors-success-background-default: var(--primitives-success-600);
458
+ --button-colors-success-background-hover: var(--primitives-success-500);
459
+ --button-colors-success-background-pressed: var(--primitives-success-700);
460
+ --button-colors-success-background-focus: var(--primitives-success-600);
461
+ --button-colors-success-background-disabled: var(--primitives-neutral-300);
462
+ --button-colors-success-text-default: var(--primitives-neutral-0);
463
+ --button-colors-success-stroke-inner-default: rgba(255, 255, 255, 0.12);
464
+ --button-colors-success-stroke-outer-default: var(--primitives-success-1000);
465
+ --button-colors-success-stroke-outer-hover: var(--primitives-success-700);
466
+ --button-colors-success-stroke-outer-disabled: var(--primitives-neutral-200);
467
+ --button-colors-success-stroke-outer-pressed: var(--primitives-neutral-200);
468
+ --button-colors-success-text-hover: var(--primitives-neutral-0);
469
+ --button-colors-success-text-pressed: var(--primitives-neutral-0);
470
+ --button-colors-success-text-focus: var(--primitives-neutral-0);
471
+ --button-colors-success-text-disabled: var(--primitives-neutral-0);
472
+
473
+ --button-colors-attention-background-default: var(--primitives-attention-600);
474
+ --button-colors-attention-background-hover: var(--primitives-attention-500);
475
+ --button-colors-attention-background-pressed: var(--primitives-attention-600);
476
+ --button-colors-attention-background-focus: var(--primitives-attention-600);
477
+ --button-colors-attention-background-disabled: var(--primitives-neutral-300);
478
+ --button-colors-attention-text-default: var(--primitives-neutral-0);
479
+ --button-colors-attention-stroke-inner-default: rgba(255, 255, 255, 0.12);
480
+ --button-colors-attention-stroke-outer-default: var(
481
+ --primitives-attention-600
482
+ );
483
+ --button-colors-attention-stroke-outer-hover: var(--primitives-attention-600);
484
+ --button-colors-attention-stroke-outer-disabled: var(
485
+ --primitives-neutral-300
486
+ );
487
+ --button-colors-attention-stroke-outer-pressed: var(--primitives-neutral-200);
488
+ --button-colors-attention-text-hover: var(--primitives-neutral-0);
489
+ --button-colors-attention-text-pressed: var(--primitives-neutral-0);
490
+ --button-colors-attention-text-focus: var(--primitives-neutral-0);
491
+ --button-colors-attention-text-disabled: var(--primitives-neutral-0);
492
+
493
+ --button-colors-danger-background-default: var(--primitives-danger-600);
494
+ --button-colors-danger-background-hover: var(--primitives-danger-500);
495
+ --button-colors-danger-background-pressed: var(--primitives-danger-700);
496
+ --button-colors-danger-background-focus: var(--primitives-danger-600);
497
+ --button-colors-danger-background-disabled: var(--primitives-neutral-300);
498
+ --button-colors-danger-text-default: var(--primitives-neutral-0);
499
+ --button-colors-danger-text-hover: var(--primitives-neutral-0);
500
+ --button-colors-danger-text-pressed: var(--primitives-neutral-0);
501
+ --button-colors-danger-text-focus: var(--primitives-neutral-0);
502
+ --button-colors-danger-text-disabled: var(--primitives-neutral-0);
503
+ --button-colors-danger-stroke-inner-default: rgba(255, 255, 255, 0.12);
504
+ --button-colors-danger-stroke-outer-default: var(--primitives-danger-700);
505
+ --button-colors-danger-stroke-outer-hover: var(--primitives-danger-600);
506
+ --button-colors-danger-stroke-outer-disabled: var(--primitives-neutral-300);
507
+ --button-colors-danger-stroke-outer-pressed: var(--primitives-neutral-200);
508
+
509
+ @media screen {
510
+ --button-text: var(--primitives-neutral-0);
511
+ --button-transparent-border: #00000050;
512
+ --button-transparent-border-hover: #00000060;
513
+ }
514
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "highsoft-ui",
3
- "version": "1.0.6",
3
+ "version": "1.0.7",
4
4
  "description": "Highsoft UI",
5
5
  "type": "module",
6
6
  "main": "dist/main.js",
@@ -12,6 +12,7 @@
12
12
  },
13
13
  "./css": "./dist/highsoft-ui.css",
14
14
  "./php": "./dist/php.js",
15
+ "./php/client": "./dist/php-client.js",
15
16
  "./stylelint": "./stylelint.config.js"
16
17
  },
17
18
  "files": [