@studious-creative/yumekit 0.1.5 → 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 (22) hide show
  1. package/dist/components/y-appbar.js +52 -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 +2 -2
  7. package/dist/components/y-drawer.js +8 -8
  8. package/dist/components/y-menu.js +4 -4
  9. package/dist/components/y-table.js +10 -10
  10. package/dist/components/y-tag.js +10 -3
  11. package/dist/components/y-theme.d.ts +2 -0
  12. package/dist/components/y-theme.js +19 -6
  13. package/dist/index.js +118 -88
  14. package/dist/modules/load-defaults.d.ts +1 -0
  15. package/dist/modules/load-defaults.js +45 -0
  16. package/dist/styles/blue-dark.css +16 -1
  17. package/dist/styles/blue-light.css +15 -0
  18. package/dist/styles/orange-dark.css +17 -2
  19. package/dist/styles/orange-light.css +15 -0
  20. package/dist/styles/variables.css +139 -0
  21. package/dist/yumekit.min.js +1 -1
  22. 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
  }
@@ -789,8 +796,8 @@ class YumeMenu extends HTMLElement {
789
796
  list-style: none;
790
797
  margin: 0;
791
798
  padding: 0;
792
- background: var(--component-menu-background, #fff);
793
- 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);
794
801
  border-radius: var(--component-menu-border-radius, 4px);
795
802
  box-shadow: var(--component-menu-shadow, 0 2px 8px rgba(0, 0, 0, 0.15));
796
803
  min-width: 150px;
@@ -805,12 +812,12 @@ class YumeMenu extends HTMLElement {
805
812
  align-items: center;
806
813
  justify-content: space-between;
807
814
  white-space: nowrap;
808
- color: var(--component-menu-color, #000);
815
+ color: var(--component-menu-color, #f7f7fa);
809
816
  font-size: var(--font-size-button, 1em);
810
817
  }
811
818
 
812
819
  li.menuitem:hover {
813
- background: var(--component-menu-hover-background, #eee);
820
+ background: var(--component-menu-hover-background, #292a2b);
814
821
  }
815
822
 
816
823
  ul.submenu {
@@ -1012,7 +1019,7 @@ class YumeAppbar extends HTMLElement {
1012
1019
  :host {
1013
1020
  display: block;
1014
1021
  font-family: var(--font-family-body, sans-serif);
1015
- color: var(--component-appbar-color, #fff);
1022
+ color: var(--component-appbar-color, #f7f7fa);
1016
1023
  }
1017
1024
 
1018
1025
  :host([sticky]) {
@@ -1048,23 +1055,23 @@ class YumeAppbar extends HTMLElement {
1048
1055
  }
1049
1056
  :host([orientation="vertical"][sticky="start"]) .appbar,
1050
1057
  :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);
1058
+ border-right: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);
1052
1059
  }
1053
1060
  :host([orientation="vertical"][sticky="end"]) .appbar,
1054
1061
  :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);
1062
+ border-left: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);
1056
1063
  }
1057
1064
  :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);
1065
+ border-bottom: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);
1059
1066
  }
1060
1067
  :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);
1068
+ border-top: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);
1062
1069
  }
1063
1070
 
1064
1071
  .appbar {
1065
1072
  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);
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);
1068
1075
  border-radius: var(--component-appbar-border-radius, var(--component-sidebar-border-radius, 4px));
1069
1076
  overflow: visible;
1070
1077
  padding: var(--_appbar-padding);
@@ -1113,23 +1120,23 @@ class YumeAppbar extends HTMLElement {
1113
1120
  }
1114
1121
 
1115
1122
  .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);
1123
+ border-bottom: var(--component-appbar-inner-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);
1117
1124
  padding-bottom: var(--_appbar-padding);
1118
1125
  margin-bottom: var(--_appbar-padding);
1119
1126
  }
1120
1127
  .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);
1128
+ border-top: var(--component-appbar-inner-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);
1122
1129
  padding-top: var(--_appbar-padding);
1123
1130
  margin-top: var(--_appbar-padding);
1124
1131
  }
1125
1132
 
1126
1133
  .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);
1134
+ border-right: var(--component-appbar-inner-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);
1128
1135
  padding-right: var(--_appbar-padding);
1129
1136
  margin-right: var(--_appbar-padding);
1130
1137
  }
1131
1138
  .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);
1139
+ border-left: var(--component-appbar-inner-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);
1133
1140
  padding-left: var(--_appbar-padding);
1134
1141
  margin-left: var(--_appbar-padding);
1135
1142
  }
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);
package/dist/components/y-drawer.js CHANGED
@@ -279,8 +279,8 @@ class YumeDrawer extends HTMLElement {
279
279
 
280
280
  .drawer-panel {
281
281
  position: absolute;
282
- background: var(--component-drawer-background, #fff);
283
- color: var(--component-drawer-color, #000);
282
+ background: var(--component-drawer-background, #0c0c0d);
283
+ color: var(--component-drawer-color, #f7f7fa);
284
284
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
285
285
  overflow: hidden;
286
286
  outline: none;
@@ -301,12 +301,12 @@ class YumeDrawer extends HTMLElement {
301
301
  .drawer-panel[data-position="left"] {
302
302
  left: 0;
303
303
  transform: translateX(-100%);
304
- border-right: var(--component-drawer-border-width, 2px) solid var(--component-drawer-border-color, #ccc);
304
+ border-right: var(--component-drawer-border-width, 2px) solid var(--component-drawer-border-color, #37383a);
305
305
  }
306
306
  .drawer-panel[data-position="right"] {
307
307
  right: 0;
308
308
  transform: translateX(100%);
309
- border-left: var(--component-drawer-border-width, 2px) solid var(--component-drawer-border-color, #ccc);
309
+ border-left: var(--component-drawer-border-width, 2px) solid var(--component-drawer-border-color, #37383a);
310
310
  }
311
311
 
312
312
  .drawer-panel[data-position="top"],
@@ -318,12 +318,12 @@ class YumeDrawer extends HTMLElement {
318
318
  .drawer-panel[data-position="top"] {
319
319
  top: 0;
320
320
  transform: translateY(-100%);
321
- border-bottom: var(--component-drawer-border-width, 2px) solid var(--component-drawer-border-color, #ccc);
321
+ border-bottom: var(--component-drawer-border-width, 2px) solid var(--component-drawer-border-color, #37383a);
322
322
  }
323
323
  .drawer-panel[data-position="bottom"] {
324
324
  bottom: 0;
325
325
  transform: translateY(100%);
326
- border-top: var(--component-drawer-border-width, 2px) solid var(--component-drawer-border-color, #ccc);
326
+ border-top: var(--component-drawer-border-width, 2px) solid var(--component-drawer-border-color, #37383a);
327
327
  }
328
328
 
329
329
  .drawer-panel.open { transform: translate(0, 0); }
@@ -360,7 +360,7 @@ class YumeDrawer extends HTMLElement {
360
360
  flex-shrink: 0;
361
361
  align-items: center;
362
362
  justify-content: center;
363
- color: var(--component-drawer-color, #999);
363
+ color: var(--component-drawer-color, #f7f7fa);
364
364
  opacity: 0.6;
365
365
  touch-action: none; /* needed for pointer events */
366
366
  user-select: none;
@@ -369,7 +369,7 @@ class YumeDrawer extends HTMLElement {
369
369
  .resize-handle:hover,
370
370
  .resize-handle:active {
371
371
  opacity: 1;
372
- background: var(--component-drawer-hover-background, rgba(128,128,128,0.15));
372
+ background: var(--component-drawer-hover-background, #292a2b);
373
373
  }
374
374
 
375
375
  .drawer-panel[data-position="left"] > .resize-handle,
package/dist/components/y-menu.js CHANGED
@@ -240,8 +240,8 @@ class YumeMenu extends HTMLElement {
240
240
  list-style: none;
241
241
  margin: 0;
242
242
  padding: 0;
243
- background: var(--component-menu-background, #fff);
244
- border: var(--component-menu-border-width, 1px) solid var(--component-menu-border-color, #ccc);
243
+ background: var(--component-menu-background, #0c0c0d);
244
+ border: var(--component-menu-border-width, 1px) solid var(--component-menu-border-color, #37383a);
245
245
  border-radius: var(--component-menu-border-radius, 4px);
246
246
  box-shadow: var(--component-menu-shadow, 0 2px 8px rgba(0, 0, 0, 0.15));
247
247
  min-width: 150px;
@@ -256,12 +256,12 @@ class YumeMenu extends HTMLElement {
256
256
  align-items: center;
257
257
  justify-content: space-between;
258
258
  white-space: nowrap;
259
- color: var(--component-menu-color, #000);
259
+ color: var(--component-menu-color, #f7f7fa);
260
260
  font-size: var(--font-size-button, 1em);
261
261
  }
262
262
 
263
263
  li.menuitem:hover {
264
- background: var(--component-menu-hover-background, #eee);
264
+ background: var(--component-menu-hover-background, #292a2b);
265
265
  }
266
266
 
267
267
  ul.submenu {