@studious-creative/yumekit 0.1.5 → 0.1.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 (36) hide show
  1. package/dist/components/y-appbar.js +81 -50
  2. package/dist/components/y-avatar.js +2 -2
  3. package/dist/components/y-badge.d.ts +1 -1
  4. package/dist/components/y-badge.js +11 -11
  5. package/dist/components/y-button.js +37 -30
  6. package/dist/components/y-checkbox.js +11 -1
  7. package/dist/components/y-dialog.js +3 -3
  8. package/dist/components/y-drawer.js +9 -9
  9. package/dist/components/y-icon.d.ts +16 -0
  10. package/dist/components/y-icon.js +262 -0
  11. package/dist/components/y-menu.js +29 -8
  12. package/dist/components/y-panel.js +22 -6
  13. package/dist/components/y-select.d.ts +2 -0
  14. package/dist/components/y-select.js +21 -3
  15. package/dist/components/y-table.js +10 -10
  16. package/dist/components/y-tag.js +10 -3
  17. package/dist/components/y-theme.d.ts +2 -0
  18. package/dist/components/y-theme.js +19 -6
  19. package/dist/components/y-toast.js +1 -1
  20. package/dist/components/y-tooltip.js +1 -1
  21. package/dist/icons/all.d.ts +1 -0
  22. package/dist/icons/all.js +119 -0
  23. package/dist/icons/registry.d.ts +3 -0
  24. package/dist/icons/registry.js +30 -0
  25. package/dist/index.d.ts +2 -0
  26. package/dist/index.iife.d.ts +1 -0
  27. package/dist/index.js +477 -108
  28. package/dist/modules/load-defaults.d.ts +1 -0
  29. package/dist/modules/load-defaults.js +45 -0
  30. package/dist/styles/blue-dark.css +16 -1
  31. package/dist/styles/blue-light.css +15 -0
  32. package/dist/styles/orange-dark.css +17 -2
  33. package/dist/styles/orange-light.css +15 -0
  34. package/dist/styles/variables.css +196 -3
  35. package/dist/yumekit.min.js +1 -1
  36. package/package.json +3 -1
package/dist/components/y-appbar.js CHANGED
@@ -223,8 +223,8 @@ class YumeButton extends HTMLElement {
223
223
  position: relative;
224
224
  overflow: hidden;
225
225
  border-radius: var(--component-button-border-radius-outer, 4px);
226
- border: var(--component-button-border-width, 1px) solid var(--border-color, var(--base-content--, #1D1D1D));
227
- background: var(--background-color, #F1F6FA);
226
+ border: var(--component-button-border-width, 1px) solid var(--border-color, var(--base-content--, #f7f7fa));
227
+ background: var(--background-color, #0c0c0d);
228
228
  transition: background-color 0.1s, color 0.1s, border-color 0.1s;
229
229
  cursor: pointer;
230
230
  color: var(--text-color);
@@ -331,6 +331,7 @@ class YumeButton extends HTMLElement {
331
331
  "--primary-background-component",
332
332
  "--primary-background-hover",
333
333
  "--primary-background-active",
334
+ "--primary-content-inverse",
334
335
  ],
335
336
  secondary: [
336
337
  "--secondary-content--",
@@ -339,6 +340,7 @@ class YumeButton extends HTMLElement {
339
340
  "--secondary-background-component",
340
341
  "--secondary-background-hover",
341
342
  "--secondary-background-active",
343
+ "--secondary-content-inverse",
342
344
  ],
343
345
  base: [
344
346
  "--base-content--",
@@ -347,6 +349,7 @@ class YumeButton extends HTMLElement {
347
349
  "--base-background-component",
348
350
  "--base-background-hover",
349
351
  "--base-background-active",
352
+ "--base-content-inverse",
350
353
  ],
351
354
  success: [
352
355
  "--success-content--",
@@ -355,6 +358,7 @@ class YumeButton extends HTMLElement {
355
358
  "--success-background-component",
356
359
  "--success-background-hover",
357
360
  "--success-background-active",
361
+ "--success-content-inverse",
358
362
  ],
359
363
  error: [
360
364
  "--error-content--",
@@ -363,6 +367,7 @@ class YumeButton extends HTMLElement {
363
367
  "--error-background-component",
364
368
  "--error-background-hover",
365
369
  "--error-background-active",
370
+ "--error-content-inverse",
366
371
  ],
367
372
  warning: [
368
373
  "--warning-content--",
@@ -371,6 +376,7 @@ class YumeButton extends HTMLElement {
371
376
  "--warning-background-component",
372
377
  "--warning-background-hover",
373
378
  "--warning-background-active",
379
+ "--warning-content-inverse",
374
380
  ],
375
381
  help: [
376
382
  "--help-content--",
@@ -379,6 +385,7 @@ class YumeButton extends HTMLElement {
379
385
  "--help-background-component",
380
386
  "--help-background-hover",
381
387
  "--help-background-active",
388
+ "--help-content-inverse",
382
389
  ],
383
390
  };
384
391
 
@@ -399,19 +406,19 @@ class YumeButton extends HTMLElement {
399
406
 
400
407
  const styleVars = {
401
408
  outlined: {
402
- "--background-color": `var(${colorVars[color][3]}, rgba(241,246,250,1))`,
403
- "--border-color": `var(${colorVars[color][0]}, rgba(29,29,29,1))`,
404
- "--text-color": `var(${colorVars[color][0]}, rgba(29,29,29,1))`,
409
+ "--background-color": `var(${colorVars[color][3]}, #0c0c0d)`,
410
+ "--border-color": `var(${colorVars[color][0]}, #f7f7fa)`,
411
+ "--text-color": `var(${colorVars[color][0]}, #f7f7fa)`,
405
412
  },
406
413
  filled: {
407
- "--background-color": `var(${colorVars[color][0]}, rgba(29,29,29,1))`,
408
- "--border-color": `var(${colorVars[color][0]}, rgba(29,29,29,1))`,
409
- "--text-color": `var(${colorVars[color][3]}, rgba(241,246,250,1))`,
414
+ "--background-color": `var(${colorVars[color][0]}, #f7f7fa)`,
415
+ "--border-color": `var(${colorVars[color][0]}, #f7f7fa)`,
416
+ "--text-color": `var(${colorVars[color][6]}, #0c0c0d)`,
410
417
  },
411
418
  flat: {
412
- "--background-color": `var(${colorVars[color][3]},rgba(241,246,250,1))`,
413
- "--border-color": `var(${colorVars[color][3]},rgba(241,246,250,1))`,
414
- "--text-color": `var(${colorVars[color][0]},rgba(29,29,29,1))`,
419
+ "--background-color": `var(${colorVars[color][3]},#0c0c0d)`,
420
+ "--border-color": `var(${colorVars[color][3]},#0c0c0d)`,
421
+ "--text-color": `var(${colorVars[color][0]},#f7f7fa)`,
415
422
  },
416
423
  };
417
424
 
@@ -423,66 +430,66 @@ class YumeButton extends HTMLElement {
423
430
  if (styleType === "filled") {
424
431
  this.button.style.setProperty(
425
432
  "--hover-background-color",
426
- `var(${colorVars[color][1]}, rgba(215,219,222,1))`,
433
+ `var(${colorVars[color][1]}, #292a2b)`,
427
434
  );
428
435
  this.button.style.setProperty(
429
436
  "--hover-text-color",
430
- `var(${colorVars[color][3]}, rgba(241,246,250,1))`,
437
+ `var(${colorVars[color][6]}, #0c0c0d)`,
431
438
  );
432
439
  this.button.style.setProperty(
433
440
  "--hover-border-color",
434
- `var(${colorVars[color][1]}, rgba(215,219,222,1))`,
441
+ `var(${colorVars[color][1]}, #292a2b)`,
435
442
  );
436
443
  this.button.style.setProperty(
437
444
  "--focus-background-color",
438
- `var(${colorVars[color][2]}, rgba(188,192,195,1))`,
445
+ `var(${colorVars[color][2]}, #46474a)`,
439
446
  );
440
447
  this.button.style.setProperty(
441
448
  "--focus-text-color",
442
- `var(${colorVars[color][3]}, rgba(241,246,250,1))`,
449
+ `var(${colorVars[color][6]}, #0c0c0d)`,
443
450
  );
444
451
  this.button.style.setProperty(
445
452
  "--focus-border-color",
446
- `var(${colorVars[color][2]}, rgba(188,192,195,1))`,
453
+ `var(${colorVars[color][2]}, #46474a)`,
447
454
  );
448
455
  this.button.style.setProperty(
449
456
  "--active-background-color",
450
- `var(${colorVars[color][0]}, rgba(29,29,29,1))`,
457
+ `var(${colorVars[color][0]}, #f7f7fa)`,
451
458
  );
452
459
  this.button.style.setProperty(
453
460
  "--active-text-color",
454
- `var(${colorVars[color][3]}, rgba(241,246,250,1))`,
461
+ `var(${colorVars[color][6]}, #0c0c0d)`,
455
462
  );
456
463
  this.button.style.setProperty(
457
464
  "--active-border-color",
458
- `var(${colorVars[color][0]}, rgba(29,29,29,1))`,
465
+ `var(${colorVars[color][0]}, #f7f7fa)`,
459
466
  );
460
467
  } else {
461
- const borderColor = `var(${colorVars[color][0]}, rgba(29,29,29,1))`;
468
+ const borderColor = `var(${colorVars[color][0]}, #f7f7fa)`;
462
469
 
463
470
  this.button.style.setProperty(
464
471
  "--hover-background-color",
465
- `var(${colorVars[color][4]}, rgba(215,219,222,1))`,
472
+ `var(${colorVars[color][4]}, #292a2b)`,
466
473
  );
467
474
  this.button.style.setProperty(
468
475
  "--hover-text-color",
469
- `var(${colorVars[color][0]}, rgba(29,29,29,1))`,
476
+ `var(${colorVars[color][0]}, #f7f7fa)`,
470
477
  );
471
478
  this.button.style.setProperty(
472
479
  "--focus-background-color",
473
- `var(${colorVars[color][5]}, rgba(188,192,195,1))`,
480
+ `var(${colorVars[color][5]}, #46474a)`,
474
481
  );
475
482
  this.button.style.setProperty(
476
483
  "--focus-text-color",
477
- `var(${colorVars[color][0]}, rgba(29,29,29,1))`,
484
+ `var(${colorVars[color][0]}, #f7f7fa)`,
478
485
  );
479
486
  this.button.style.setProperty(
480
487
  "--active-background-color",
481
- `var(${colorVars[color][0]}, rgba(29,29,29,1))`,
488
+ `var(${colorVars[color][0]}, #f7f7fa)`,
482
489
  );
483
490
  this.button.style.setProperty(
484
491
  "--active-text-color",
485
- `var(${colorVars[color][3]}, rgba(241,246,250,1))`,
492
+ `var(${colorVars[color][6]}, #0c0c0d)`,
486
493
  );
487
494
 
488
495
  if (styleType === "outlined") {
@@ -503,15 +510,15 @@ class YumeButton extends HTMLElement {
503
510
  // Flat buttons match border to background
504
511
  this.button.style.setProperty(
505
512
  "--hover-border-color",
506
- `var(${colorVars[color][4]}, rgba(215,219,222,1))`,
513
+ `var(${colorVars[color][4]}, #292a2b)`,
507
514
  );
508
515
  this.button.style.setProperty(
509
516
  "--focus-border-color",
510
- `var(${colorVars[color][5]}, rgba(188,192,195,1))`,
517
+ `var(${colorVars[color][5]}, #46474a)`,
511
518
  );
512
519
  this.button.style.setProperty(
513
520
  "--active-border-color",
514
- `var(${colorVars[color][0]}, rgba(29,29,29,1))`,
521
+ `var(${colorVars[color][0]}, #f7f7fa)`,
515
522
  );
516
523
  }
517
524
  }
@@ -755,9 +762,30 @@ class YumeMenu extends HTMLElement {
755
762
  left = anchorRect.left - menuRect.width;
756
763
  }
757
764
  if (top + menuRect.height > vh) {
758
- top = vh - menuRect.height - 10;
765
+ top = anchorRect.top - menuRect.height;
766
+ }
767
+ } else if (this.direction === "up") {
768
+ top = anchorRect.top - menuRect.height;
769
+ left = anchorRect.left;
770
+
771
+ if (top < 0) {
772
+ top = anchorRect.bottom;
773
+ }
774
+ if (left + menuRect.width > vw) {
775
+ left = vw - menuRect.width - 10;
776
+ }
777
+ } else if (this.direction === "left") {
778
+ top = anchorRect.top;
779
+ left = anchorRect.left - menuRect.width;
780
+
781
+ if (left < 0) {
782
+ left = anchorRect.right;
783
+ }
784
+ if (top + menuRect.height > vh) {
785
+ top = anchorRect.top - menuRect.height;
759
786
  }
760
787
  } else {
788
+ // "down" (default)
761
789
  top = anchorRect.bottom;
762
790
  left = anchorRect.left;
763
791
 
@@ -769,8 +797,8 @@ class YumeMenu extends HTMLElement {
769
797
  }
770
798
  }
771
799
 
772
- top = Math.max(10, Math.min(top, vh - menuRect.height - 10));
773
- left = Math.max(10, Math.min(left, vw - menuRect.width - 10));
800
+ top = Math.max(0, Math.min(top, vh - menuRect.height));
801
+ left = Math.max(0, Math.min(left, vw - menuRect.width));
774
802
 
775
803
  this.style.top = `${top}px`;
776
804
  this.style.left = `${left}px`;
@@ -789,8 +817,8 @@ class YumeMenu extends HTMLElement {
789
817
  list-style: none;
790
818
  margin: 0;
791
819
  padding: 0;
792
- background: var(--component-menu-background, #fff);
793
- border: var(--component-menu-border-width, 1px) solid var(--component-menu-border-color, #ccc);
820
+ background: var(--component-menu-background, #0c0c0d);
821
+ border: var(--component-menu-border-width, 1px) solid var(--component-menu-border-color, #37383a);
794
822
  border-radius: var(--component-menu-border-radius, 4px);
795
823
  box-shadow: var(--component-menu-shadow, 0 2px 8px rgba(0, 0, 0, 0.15));
796
824
  min-width: 150px;
@@ -805,12 +833,12 @@ class YumeMenu extends HTMLElement {
805
833
  align-items: center;
806
834
  justify-content: space-between;
807
835
  white-space: nowrap;
808
- color: var(--component-menu-color, #000);
836
+ color: var(--component-menu-color, #f7f7fa);
809
837
  font-size: var(--font-size-button, 1em);
810
838
  }
811
839
 
812
840
  li.menuitem:hover {
813
- background: var(--component-menu-hover-background, #eee);
841
+ background: var(--component-menu-hover-background, #292a2b);
814
842
  }
815
843
 
816
844
  ul.submenu {
@@ -818,7 +846,7 @@ class YumeMenu extends HTMLElement {
818
846
  top: 0;
819
847
  left: 100%;
820
848
  display: none;
821
- z-index: 1001;
849
+ z-index: var(--component-menu-z-index, 1001);
822
850
  }
823
851
 
824
852
  li.menuitem:hover > ul.submenu {
@@ -1012,12 +1040,12 @@ class YumeAppbar extends HTMLElement {
1012
1040
  :host {
1013
1041
  display: block;
1014
1042
  font-family: var(--font-family-body, sans-serif);
1015
- color: var(--component-appbar-color, #fff);
1043
+ color: var(--component-appbar-color, #f7f7fa);
1016
1044
  }
1017
1045
 
1018
1046
  :host([sticky]) {
1019
1047
  position: sticky;
1020
- z-index: 100;
1048
+ z-index: var(--component-appbar-z-index, 100);
1021
1049
  }
1022
1050
  :host([orientation="vertical"][sticky="start"]),
1023
1051
  :host(:not([orientation])[sticky="start"]) {
@@ -1048,23 +1076,23 @@ class YumeAppbar extends HTMLElement {
1048
1076
  }
1049
1077
  :host([orientation="vertical"][sticky="start"]) .appbar,
1050
1078
  :host(:not([orientation])[sticky="start"]) .appbar {
1051
- border-right: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #333);
1079
+ border-right: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);
1052
1080
  }
1053
1081
  :host([orientation="vertical"][sticky="end"]) .appbar,
1054
1082
  :host(:not([orientation])[sticky="end"]) .appbar {
1055
- border-left: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #333);
1083
+ border-left: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);
1056
1084
  }
1057
1085
  :host([orientation="horizontal"][sticky="start"]) .appbar {
1058
- border-bottom: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #333);
1086
+ border-bottom: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);
1059
1087
  }
1060
1088
  :host([orientation="horizontal"][sticky="end"]) .appbar {
1061
- border-top: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #333);
1089
+ border-top: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);
1062
1090
  }
1063
1091
 
1064
1092
  .appbar {
1065
1093
  display: flex;
1066
- background: var(--component-appbar-background, #111);
1067
- border: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #333);
1094
+ background: var(--component-appbar-background, #0c0c0d);
1095
+ border: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);
1068
1096
  border-radius: var(--component-appbar-border-radius, var(--component-sidebar-border-radius, 4px));
1069
1097
  overflow: visible;
1070
1098
  padding: var(--_appbar-padding);
@@ -1113,23 +1141,23 @@ class YumeAppbar extends HTMLElement {
1113
1141
  }
1114
1142
 
1115
1143
  .appbar.vertical .appbar-header {
1116
- border-bottom: var(--component-appbar-inner-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #333);
1144
+ border-bottom: var(--component-appbar-inner-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);
1117
1145
  padding-bottom: var(--_appbar-padding);
1118
1146
  margin-bottom: var(--_appbar-padding);
1119
1147
  }
1120
1148
  .appbar.vertical .appbar-footer {
1121
- border-top: var(--component-appbar-inner-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #333);
1149
+ border-top: var(--component-appbar-inner-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);
1122
1150
  padding-top: var(--_appbar-padding);
1123
1151
  margin-top: var(--_appbar-padding);
1124
1152
  }
1125
1153
 
1126
1154
  .appbar.horizontal .appbar-header {
1127
- border-right: var(--component-appbar-inner-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #333);
1155
+ border-right: var(--component-appbar-inner-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);
1128
1156
  padding-right: var(--_appbar-padding);
1129
1157
  margin-right: var(--_appbar-padding);
1130
1158
  }
1131
1159
  .appbar.horizontal .appbar-footer {
1132
- border-left: var(--component-appbar-inner-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #333);
1160
+ border-left: var(--component-appbar-inner-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);
1133
1161
  padding-left: var(--_appbar-padding);
1134
1162
  margin-left: var(--_appbar-padding);
1135
1163
  }
@@ -1242,6 +1270,7 @@ class YumeAppbar extends HTMLElement {
1242
1270
 
1243
1271
  const bar = document.createElement("div");
1244
1272
  bar.className = `appbar ${isVertical ? "vertical" : "horizontal"}`;
1273
+
1245
1274
  if (isCollapsed) bar.classList.add("collapsed");
1246
1275
  bar.setAttribute("role", "navigation");
1247
1276
  bar.style.setProperty("--_appbar-padding", cfg.padding);
@@ -1262,6 +1291,7 @@ class YumeAppbar extends HTMLElement {
1262
1291
 
1263
1292
  const logoWrapper = document.createElement("div");
1264
1293
  logoWrapper.className = "logo-wrapper";
1294
+
1265
1295
  const logoSlot = document.createElement("slot");
1266
1296
  logoSlot.name = "logo";
1267
1297
  logoWrapper.appendChild(logoSlot);
@@ -1269,6 +1299,7 @@ class YumeAppbar extends HTMLElement {
1269
1299
 
1270
1300
  const titleWrapper = document.createElement("div");
1271
1301
  titleWrapper.className = "header-title";
1302
+
1272
1303
  const titleSlot = document.createElement("slot");
1273
1304
  titleSlot.name = "title";
1274
1305
  titleWrapper.appendChild(titleSlot);
package/dist/components/y-avatar.js CHANGED
@@ -68,8 +68,8 @@ class YumeAvatar extends HTMLElement {
68
68
  width: 100%;
69
69
  height: 100%;
70
70
  border-radius: ${borderRadius};
71
- background-color: var(--primary-content--, rgba(4, 134, 209, 1));
72
- color: var(--primary-background-component, rgba(245, 250, 250, 1));
71
+ background-color: var(--primary-content--, #0576ff);
72
+ color: var(--primary-background-component, #0c0c0d);
73
73
  display: flex;
74
74
  align-items: center;
75
75
  justify-content: center;
package/dist/components/y-badge.d.ts CHANGED
@@ -7,7 +7,7 @@ export class YumeBadge extends HTMLElement {
7
7
  get position(): string;
8
8
  get size(): string;
9
9
  get value(): string;
10
- getBadgeColor(color: any): any;
10
+ getBadgeColors(color: any): any;
11
11
  getBadgePosition(position: any, alignment: any): string;
12
12
  getSizeAttributes(size: any): any;
13
13
  hasTargetContent(): boolean;
package/dist/components/y-badge.js CHANGED
@@ -39,17 +39,17 @@ class YumeBadge extends HTMLElement {
39
39
  return this.getAttribute("value") || "";
40
40
  }
41
41
 
42
- getBadgeColor(color) {
42
+ getBadgeColors(color) {
43
43
  const colorMap = {
44
- primary: "var(--primary-content--)",
45
- secondary: "var(--secondary-content--)",
46
- base: "var(--base-content--)",
47
- success: "var(--success-content--)",
48
- warning: "var(--warning-content--)",
49
- error: "var(--error-content--)",
50
- help: "var(--help-content--)",
44
+ primary: ["var(--primary-content--)", "var(--primary-content-inverse)"],
45
+ secondary: ["var(--secondary-content--)", "var(--secondary-content-inverse)"],
46
+ base: ["var(--base-content--)", "var(--base-content-inverse)"],
47
+ success: ["var(--success-content--)", "var(--success-content-inverse)"],
48
+ warning: ["var(--warning-content--)", "var(--warning-content-inverse)"],
49
+ error: ["var(--error-content--)", "var(--error-content-inverse)"],
50
+ help: ["var(--help-content--)", "var(--help-content-inverse)"],
51
51
  };
52
- return colorMap[color] || color;
52
+ return colorMap[color] || [color, "var(--neutral-white, #fff)"];
53
53
  }
54
54
 
55
55
  getBadgePosition(position, alignment) {
@@ -97,7 +97,7 @@ class YumeBadge extends HTMLElement {
97
97
  }
98
98
 
99
99
  render() {
100
- const badgeColor = this.getBadgeColor(this.color);
100
+ const [badgeColor, badgeTextColor] = this.getBadgeColors(this.color);
101
101
  const { fontSize, padding, minSize } = this.getSizeAttributes(
102
102
  this.size,
103
103
  );
@@ -118,7 +118,7 @@ class YumeBadge extends HTMLElement {
118
118
  position: ${hasTarget ? "absolute" : "static"};
119
119
  ${hasTarget ? positionStyles : ""}
120
120
  background: ${badgeColor};
121
- color: var(--base-background-component, #fff);
121
+ color: ${badgeTextColor};
122
122
  font-size: ${fontSize};
123
123
  font-weight: bold;
124
124
  padding: ${padding};
package/dist/components/y-button.js CHANGED
@@ -223,8 +223,8 @@ class YumeButton extends HTMLElement {
223
223
  position: relative;
224
224
  overflow: hidden;
225
225
  border-radius: var(--component-button-border-radius-outer, 4px);
226
- border: var(--component-button-border-width, 1px) solid var(--border-color, var(--base-content--, #1D1D1D));
227
- background: var(--background-color, #F1F6FA);
226
+ border: var(--component-button-border-width, 1px) solid var(--border-color, var(--base-content--, #f7f7fa));
227
+ background: var(--background-color, #0c0c0d);
228
228
  transition: background-color 0.1s, color 0.1s, border-color 0.1s;
229
229
  cursor: pointer;
230
230
  color: var(--text-color);
@@ -331,6 +331,7 @@ class YumeButton extends HTMLElement {
331
331
  "--primary-background-component",
332
332
  "--primary-background-hover",
333
333
  "--primary-background-active",
334
+ "--primary-content-inverse",
334
335
  ],
335
336
  secondary: [
336
337
  "--secondary-content--",
@@ -339,6 +340,7 @@ class YumeButton extends HTMLElement {
339
340
  "--secondary-background-component",
340
341
  "--secondary-background-hover",
341
342
  "--secondary-background-active",
343
+ "--secondary-content-inverse",
342
344
  ],
343
345
  base: [
344
346
  "--base-content--",
@@ -347,6 +349,7 @@ class YumeButton extends HTMLElement {
347
349
  "--base-background-component",
348
350
  "--base-background-hover",
349
351
  "--base-background-active",
352
+ "--base-content-inverse",
350
353
  ],
351
354
  success: [
352
355
  "--success-content--",
@@ -355,6 +358,7 @@ class YumeButton extends HTMLElement {
355
358
  "--success-background-component",
356
359
  "--success-background-hover",
357
360
  "--success-background-active",
361
+ "--success-content-inverse",
358
362
  ],
359
363
  error: [
360
364
  "--error-content--",
@@ -363,6 +367,7 @@ class YumeButton extends HTMLElement {
363
367
  "--error-background-component",
364
368
  "--error-background-hover",
365
369
  "--error-background-active",
370
+ "--error-content-inverse",
366
371
  ],
367
372
  warning: [
368
373
  "--warning-content--",
@@ -371,6 +376,7 @@ class YumeButton extends HTMLElement {
371
376
  "--warning-background-component",
372
377
  "--warning-background-hover",
373
378
  "--warning-background-active",
379
+ "--warning-content-inverse",
374
380
  ],
375
381
  help: [
376
382
  "--help-content--",
@@ -379,6 +385,7 @@ class YumeButton extends HTMLElement {
379
385
  "--help-background-component",
380
386
  "--help-background-hover",
381
387
  "--help-background-active",
388
+ "--help-content-inverse",
382
389
  ],
383
390
  };
384
391
 
@@ -399,19 +406,19 @@ class YumeButton extends HTMLElement {
399
406
 
400
407
  const styleVars = {
401
408
  outlined: {
402
- "--background-color": `var(${colorVars[color][3]}, rgba(241,246,250,1))`,
403
- "--border-color": `var(${colorVars[color][0]}, rgba(29,29,29,1))`,
404
- "--text-color": `var(${colorVars[color][0]}, rgba(29,29,29,1))`,
409
+ "--background-color": `var(${colorVars[color][3]}, #0c0c0d)`,
410
+ "--border-color": `var(${colorVars[color][0]}, #f7f7fa)`,
411
+ "--text-color": `var(${colorVars[color][0]}, #f7f7fa)`,
405
412
  },
406
413
  filled: {
407
- "--background-color": `var(${colorVars[color][0]}, rgba(29,29,29,1))`,
408
- "--border-color": `var(${colorVars[color][0]}, rgba(29,29,29,1))`,
409
- "--text-color": `var(${colorVars[color][3]}, rgba(241,246,250,1))`,
414
+ "--background-color": `var(${colorVars[color][0]}, #f7f7fa)`,
415
+ "--border-color": `var(${colorVars[color][0]}, #f7f7fa)`,
416
+ "--text-color": `var(${colorVars[color][6]}, #0c0c0d)`,
410
417
  },
411
418
  flat: {
412
- "--background-color": `var(${colorVars[color][3]},rgba(241,246,250,1))`,
413
- "--border-color": `var(${colorVars[color][3]},rgba(241,246,250,1))`,
414
- "--text-color": `var(${colorVars[color][0]},rgba(29,29,29,1))`,
419
+ "--background-color": `var(${colorVars[color][3]},#0c0c0d)`,
420
+ "--border-color": `var(${colorVars[color][3]},#0c0c0d)`,
421
+ "--text-color": `var(${colorVars[color][0]},#f7f7fa)`,
415
422
  },
416
423
  };
417
424
 
@@ -423,66 +430,66 @@ class YumeButton extends HTMLElement {
423
430
  if (styleType === "filled") {
424
431
  this.button.style.setProperty(
425
432
  "--hover-background-color",
426
- `var(${colorVars[color][1]}, rgba(215,219,222,1))`,
433
+ `var(${colorVars[color][1]}, #292a2b)`,
427
434
  );
428
435
  this.button.style.setProperty(
429
436
  "--hover-text-color",
430
- `var(${colorVars[color][3]}, rgba(241,246,250,1))`,
437
+ `var(${colorVars[color][6]}, #0c0c0d)`,
431
438
  );
432
439
  this.button.style.setProperty(
433
440
  "--hover-border-color",
434
- `var(${colorVars[color][1]}, rgba(215,219,222,1))`,
441
+ `var(${colorVars[color][1]}, #292a2b)`,
435
442
  );
436
443
  this.button.style.setProperty(
437
444
  "--focus-background-color",
438
- `var(${colorVars[color][2]}, rgba(188,192,195,1))`,
445
+ `var(${colorVars[color][2]}, #46474a)`,
439
446
  );
440
447
  this.button.style.setProperty(
441
448
  "--focus-text-color",
442
- `var(${colorVars[color][3]}, rgba(241,246,250,1))`,
449
+ `var(${colorVars[color][6]}, #0c0c0d)`,
443
450
  );
444
451
  this.button.style.setProperty(
445
452
  "--focus-border-color",
446
- `var(${colorVars[color][2]}, rgba(188,192,195,1))`,
453
+ `var(${colorVars[color][2]}, #46474a)`,
447
454
  );
448
455
  this.button.style.setProperty(
449
456
  "--active-background-color",
450
- `var(${colorVars[color][0]}, rgba(29,29,29,1))`,
457
+ `var(${colorVars[color][0]}, #f7f7fa)`,
451
458
  );
452
459
  this.button.style.setProperty(
453
460
  "--active-text-color",
454
- `var(${colorVars[color][3]}, rgba(241,246,250,1))`,
461
+ `var(${colorVars[color][6]}, #0c0c0d)`,
455
462
  );
456
463
  this.button.style.setProperty(
457
464
  "--active-border-color",
458
- `var(${colorVars[color][0]}, rgba(29,29,29,1))`,
465
+ `var(${colorVars[color][0]}, #f7f7fa)`,
459
466
  );
460
467
  } else {
461
- const borderColor = `var(${colorVars[color][0]}, rgba(29,29,29,1))`;
468
+ const borderColor = `var(${colorVars[color][0]}, #f7f7fa)`;
462
469
 
463
470
  this.button.style.setProperty(
464
471
  "--hover-background-color",
465
- `var(${colorVars[color][4]}, rgba(215,219,222,1))`,
472
+ `var(${colorVars[color][4]}, #292a2b)`,
466
473
  );
467
474
  this.button.style.setProperty(
468
475
  "--hover-text-color",
469
- `var(${colorVars[color][0]}, rgba(29,29,29,1))`,
476
+ `var(${colorVars[color][0]}, #f7f7fa)`,
470
477
  );
471
478
  this.button.style.setProperty(
472
479
  "--focus-background-color",
473
- `var(${colorVars[color][5]}, rgba(188,192,195,1))`,
480
+ `var(${colorVars[color][5]}, #46474a)`,
474
481
  );
475
482
  this.button.style.setProperty(
476
483
  "--focus-text-color",
477
- `var(${colorVars[color][0]}, rgba(29,29,29,1))`,
484
+ `var(${colorVars[color][0]}, #f7f7fa)`,
478
485
  );
479
486
  this.button.style.setProperty(
480
487
  "--active-background-color",
481
- `var(${colorVars[color][0]}, rgba(29,29,29,1))`,
488
+ `var(${colorVars[color][0]}, #f7f7fa)`,
482
489
  );
483
490
  this.button.style.setProperty(
484
491
  "--active-text-color",
485
- `var(${colorVars[color][3]}, rgba(241,246,250,1))`,
492
+ `var(${colorVars[color][6]}, #0c0c0d)`,
486
493
  );
487
494
 
488
495
  if (styleType === "outlined") {
@@ -503,15 +510,15 @@ class YumeButton extends HTMLElement {
503
510
  // Flat buttons match border to background
504
511
  this.button.style.setProperty(
505
512
  "--hover-border-color",
506
- `var(${colorVars[color][4]}, rgba(215,219,222,1))`,
513
+ `var(${colorVars[color][4]}, #292a2b)`,
507
514
  );
508
515
  this.button.style.setProperty(
509
516
  "--focus-border-color",
510
- `var(${colorVars[color][5]}, rgba(188,192,195,1))`,
517
+ `var(${colorVars[color][5]}, #46474a)`,
511
518
  );
512
519
  this.button.style.setProperty(
513
520
  "--active-border-color",
514
- `var(${colorVars[color][0]}, rgba(29,29,29,1))`,
521
+ `var(${colorVars[color][0]}, #f7f7fa)`,
515
522
  );
516
523
  }
517
524
  }
package/dist/components/y-checkbox.js CHANGED
@@ -180,6 +180,16 @@ class YumeCheckbox extends HTMLElement {
180
180
  line-height: 0;
181
181
  }
182
182
 
183
+ :host([disabled]) .checkbox {
184
+ border-color: var(--component-checkbox-border-color);
185
+ background: var(--component-checkbox-disabled-background, var(--component-checkbox-background));
186
+ cursor: not-allowed;
187
+ }
188
+
189
+ :host([disabled]) .checkbox:hover {
190
+ border-color: var(--component-checkbox-border-color);
191
+ }
192
+
183
193
  .checkbox:hover {
184
194
  border-color: var(--component-checkbox-accent);
185
195
  }
@@ -191,7 +201,7 @@ class YumeCheckbox extends HTMLElement {
191
201
  display: block;
192
202
  }
193
203
 
194
- .label {
204
+ [part="label"] {
195
205
  display: inline-flex;
196
206
  align-items: center;
197
207
  font-size: 0.9em;