@studious-creative/yumekit 0.1.4 → 0.1.6

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 (28) hide show
  1. package/dist/components/y-appbar.js +57 -45
  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-dialog.js +5 -2
  7. package/dist/components/y-drawer.js +13 -8
  8. package/dist/components/y-menu.js +6 -4
  9. package/dist/components/y-radio.js +2 -2
  10. package/dist/components/y-switch.js +2 -2
  11. package/dist/components/y-table.js +14 -10
  12. package/dist/components/y-tabs.js +4 -1
  13. package/dist/components/y-tag.js +12 -5
  14. package/dist/components/y-theme.d.ts +2 -0
  15. package/dist/components/y-theme.js +19 -6
  16. package/dist/components/y-toast.js +3 -0
  17. package/dist/components/y-tooltip.js +1 -1
  18. package/dist/index.js +149 -96
  19. package/dist/modules/load-defaults.d.ts +1 -0
  20. package/dist/modules/load-defaults.js +45 -0
  21. package/dist/styles/blue-dark.css +16 -1
  22. package/dist/styles/blue-light.css +15 -0
  23. package/dist/styles/orange-dark.css +17 -2
  24. package/dist/styles/orange-light.css +15 -0
  25. package/dist/styles/style.css +1 -13
  26. package/dist/styles/variables.css +140 -0
  27. package/dist/yumekit.min.js +1 -1
  28. package/package.json +1 -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
  }
@@ -644,6 +651,7 @@ class YumeMenu extends HTMLElement {
644
651
  const li = document.createElement("li");
645
652
  li.className = "menuitem";
646
653
  li.setAttribute("role", "menuitem");
654
+ li.setAttribute("part", "menuitem");
647
655
  li.tabIndex = 0;
648
656
 
649
657
  const contentWrapper = document.createElement("span");
@@ -788,8 +796,8 @@ class YumeMenu extends HTMLElement {
788
796
  list-style: none;
789
797
  margin: 0;
790
798
  padding: 0;
791
- background: var(--component-menu-background, #fff);
792
- border: var(--component-menu-border-width, 1px) solid var(--component-menu-border-color, #ccc);
799
+ background: var(--component-menu-background, #0c0c0d);
800
+ border: var(--component-menu-border-width, 1px) solid var(--component-menu-border-color, #37383a);
793
801
  border-radius: var(--component-menu-border-radius, 4px);
794
802
  box-shadow: var(--component-menu-shadow, 0 2px 8px rgba(0, 0, 0, 0.15));
795
803
  min-width: 150px;
@@ -804,12 +812,12 @@ class YumeMenu extends HTMLElement {
804
812
  align-items: center;
805
813
  justify-content: space-between;
806
814
  white-space: nowrap;
807
- color: var(--component-menu-color, #000);
815
+ color: var(--component-menu-color, #f7f7fa);
808
816
  font-size: var(--font-size-button, 1em);
809
817
  }
810
818
 
811
819
  li.menuitem:hover {
812
- background: var(--component-menu-hover-background, #eee);
820
+ background: var(--component-menu-hover-background, #292a2b);
813
821
  }
814
822
 
815
823
  ul.submenu {
@@ -839,6 +847,7 @@ class YumeMenu extends HTMLElement {
839
847
  const rootUl = this._createMenuList(this.items);
840
848
  rootUl.classList.add("menu");
841
849
  rootUl.setAttribute("role", "menu");
850
+ rootUl.setAttribute("part", "menu");
842
851
  this.shadowRoot.appendChild(rootUl);
843
852
  }
844
853
  }
@@ -1010,7 +1019,7 @@ class YumeAppbar extends HTMLElement {
1010
1019
  :host {
1011
1020
  display: block;
1012
1021
  font-family: var(--font-family-body, sans-serif);
1013
- color: var(--component-appbar-color, #fff);
1022
+ color: var(--component-appbar-color, #f7f7fa);
1014
1023
  }
1015
1024
 
1016
1025
  :host([sticky]) {
@@ -1046,23 +1055,23 @@ class YumeAppbar extends HTMLElement {
1046
1055
  }
1047
1056
  :host([orientation="vertical"][sticky="start"]) .appbar,
1048
1057
  :host(:not([orientation])[sticky="start"]) .appbar {
1049
- border-right: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #333);
1058
+ border-right: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);
1050
1059
  }
1051
1060
  :host([orientation="vertical"][sticky="end"]) .appbar,
1052
1061
  :host(:not([orientation])[sticky="end"]) .appbar {
1053
- border-left: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #333);
1062
+ border-left: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);
1054
1063
  }
1055
1064
  :host([orientation="horizontal"][sticky="start"]) .appbar {
1056
- border-bottom: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #333);
1065
+ border-bottom: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);
1057
1066
  }
1058
1067
  :host([orientation="horizontal"][sticky="end"]) .appbar {
1059
- border-top: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #333);
1068
+ border-top: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);
1060
1069
  }
1061
1070
 
1062
1071
  .appbar {
1063
1072
  display: flex;
1064
- background: var(--component-appbar-background, #111);
1065
- border: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #333);
1073
+ background: var(--component-appbar-background, #0c0c0d);
1074
+ border: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);
1066
1075
  border-radius: var(--component-appbar-border-radius, var(--component-sidebar-border-radius, 4px));
1067
1076
  overflow: visible;
1068
1077
  padding: var(--_appbar-padding);
@@ -1111,23 +1120,23 @@ class YumeAppbar extends HTMLElement {
1111
1120
  }
1112
1121
 
1113
1122
  .appbar.vertical .appbar-header {
1114
- border-bottom: var(--component-appbar-inner-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #333);
1123
+ border-bottom: var(--component-appbar-inner-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);
1115
1124
  padding-bottom: var(--_appbar-padding);
1116
1125
  margin-bottom: var(--_appbar-padding);
1117
1126
  }
1118
1127
  .appbar.vertical .appbar-footer {
1119
- border-top: var(--component-appbar-inner-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #333);
1128
+ border-top: var(--component-appbar-inner-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);
1120
1129
  padding-top: var(--_appbar-padding);
1121
1130
  margin-top: var(--_appbar-padding);
1122
1131
  }
1123
1132
 
1124
1133
  .appbar.horizontal .appbar-header {
1125
- border-right: var(--component-appbar-inner-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #333);
1134
+ border-right: var(--component-appbar-inner-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);
1126
1135
  padding-right: var(--_appbar-padding);
1127
1136
  margin-right: var(--_appbar-padding);
1128
1137
  }
1129
1138
  .appbar.horizontal .appbar-footer {
1130
- border-left: var(--component-appbar-inner-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #333);
1139
+ border-left: var(--component-appbar-inner-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);
1131
1140
  padding-left: var(--_appbar-padding);
1132
1141
  margin-left: var(--_appbar-padding);
1133
1142
  }
@@ -1253,6 +1262,7 @@ class YumeAppbar extends HTMLElement {
1253
1262
  /* --- Header: logo + title --- */
1254
1263
  const header = document.createElement("div");
1255
1264
  header.className = "appbar-header";
1265
+ header.setAttribute("part", "header");
1256
1266
 
1257
1267
  const headerContent = document.createElement("div");
1258
1268
  headerContent.className = "header-content";
@@ -1277,6 +1287,7 @@ class YumeAppbar extends HTMLElement {
1277
1287
  /* --- Body: y-button nav items --- */
1278
1288
  const body = document.createElement("div");
1279
1289
  body.className = "appbar-body";
1290
+ body.setAttribute("part", "body");
1280
1291
 
1281
1292
  const navItems = this.items;
1282
1293
  navItems.forEach((item) => {
@@ -1336,6 +1347,7 @@ class YumeAppbar extends HTMLElement {
1336
1347
  /* --- Footer: slot + collapse toggle (vertical only) --- */
1337
1348
  const footer = document.createElement("div");
1338
1349
  footer.className = "appbar-footer";
1350
+ footer.setAttribute("part", "footer");
1339
1351
 
1340
1352
  const footerSlot = document.createElement("slot");
1341
1353
  footerSlot.name = "footer";
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-dialog.js CHANGED
@@ -134,7 +134,7 @@ class YumeDialog extends HTMLElement {
134
134
  border: none;
135
135
  cursor: pointer;
136
136
  padding: var(--spacing-x-small, 4px);
137
- color: var(--component-dialog-color, #000);
137
+ color: var(--component-dialog-color, #f7f7fa);
138
138
  font-size: 1.25em;
139
139
  line-height: 1;
140
140
  border-radius: var(--component-button-border-radius-outer, 4px);
@@ -143,7 +143,7 @@ class YumeDialog extends HTMLElement {
143
143
  justify-content: center;
144
144
  }
145
145
  .close-btn:hover {
146
- background: var(--component-dialog-hover-background, #eee);
146
+ background: var(--component-dialog-hover-background, #292a2b);
147
147
  }
148
148
  .close-btn:focus-visible {
149
149
  outline: 2px solid var(--component-dialog-accent);
@@ -176,6 +176,7 @@ class YumeDialog extends HTMLElement {
176
176
 
177
177
  const header = document.createElement("div");
178
178
  header.className = "header";
179
+ header.setAttribute("part", "header");
179
180
 
180
181
  const headerContent = document.createElement("div");
181
182
  headerContent.className = "header-content";
@@ -195,10 +196,12 @@ class YumeDialog extends HTMLElement {
195
196
 
196
197
  const body = document.createElement("div");
197
198
  body.className = "body";
199
+ body.setAttribute("part", "body");
198
200
  body.innerHTML = `<slot name="body"></slot>`;
199
201
 
200
202
  const footer = document.createElement("div");
201
203
  footer.className = "footer";
204
+ footer.setAttribute("part", "footer");
202
205
  footer.innerHTML = `<slot name="footer"></slot>`;
203
206
 
204
207
  dialog.appendChild(header);