@cdx-ui/styles 0.0.1-beta.8 → 0.0.1-beta.80
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.
- package/README.md +116 -20
- package/css/theme.css +201 -85
- package/css/vanilla.css +124 -54
- package/lib/commonjs/applyThemeOverride.js +154 -0
- package/lib/commonjs/applyThemeOverride.js.map +1 -0
- package/lib/commonjs/index.js +82 -0
- package/lib/commonjs/index.js.map +1 -1
- package/lib/commonjs/palette.js +262 -0
- package/lib/commonjs/palette.js.map +1 -0
- package/lib/commonjs/theming.js +255 -0
- package/lib/commonjs/theming.js.map +1 -0
- package/lib/commonjs/types.js +75 -0
- package/lib/commonjs/types.js.map +1 -0
- package/lib/commonjs/useCdxFonts.js +7 -231
- package/lib/commonjs/useCdxFonts.js.map +1 -1
- package/lib/commonjs/useForgeFonts.js +237 -0
- package/lib/commonjs/useForgeFonts.js.map +1 -0
- package/lib/module/applyThemeOverride.js +149 -0
- package/lib/module/applyThemeOverride.js.map +1 -0
- package/lib/module/index.js +11 -20
- package/lib/module/index.js.map +1 -1
- package/lib/module/palette.js +257 -0
- package/lib/module/palette.js.map +1 -0
- package/lib/module/theming.js +239 -0
- package/lib/module/theming.js.map +1 -0
- package/lib/module/types.js +71 -0
- package/lib/module/types.js.map +1 -0
- package/lib/module/useCdxFonts.js +2 -220
- package/lib/module/useCdxFonts.js.map +1 -1
- package/lib/module/useForgeFonts.js +223 -0
- package/lib/module/useForgeFonts.js.map +1 -0
- package/lib/runtime/prestige-vs-default.json +1 -0
- package/lib/runtime/pulse-vs-default.json +1 -0
- package/lib/runtime/token-to-css-var.json +672 -0
- package/lib/typescript/applyThemeOverride.d.ts +26 -0
- package/lib/typescript/applyThemeOverride.d.ts.map +1 -0
- package/lib/typescript/index.d.ts +8 -57
- package/lib/typescript/index.d.ts.map +1 -1
- package/lib/typescript/palette.d.ts +60 -0
- package/lib/typescript/palette.d.ts.map +1 -0
- package/lib/typescript/theming.d.ts +40 -0
- package/lib/typescript/theming.d.ts.map +1 -0
- package/lib/typescript/types.d.ts +90 -0
- package/lib/typescript/types.d.ts.map +1 -0
- package/lib/typescript/useCdxFonts.d.ts +2 -11
- package/lib/typescript/useCdxFonts.d.ts.map +1 -1
- package/lib/typescript/useForgeFonts.d.ts +12 -0
- package/lib/typescript/useForgeFonts.d.ts.map +1 -0
- package/package.json +27 -8
- package/runtime/prestige-vs-default.json +1 -0
- package/runtime/pulse-vs-default.json +1 -0
- package/runtime/token-to-css-var.json +672 -0
- package/src/__tests__/applyThemeOverride.test.ts +552 -0
- package/src/__tests__/generateColorScale.test.ts +296 -0
- package/src/__tests__/theming.test.ts +647 -0
- package/src/applyThemeOverride.ts +139 -0
- package/src/index.ts +36 -60
- package/src/palette.ts +307 -0
- package/src/theming.ts +268 -0
- package/src/types.ts +112 -0
- package/src/useCdxFonts.ts +2 -230
- package/src/useForgeFonts.ts +230 -0
- package/tokens/presets/.manifest.json +3 -3
- package/tokens/presets/poise.json +319 -39
- package/tokens/presets/prestige.json +1 -1
- package/tokens/presets/pulse.json +1 -1
package/css/vanilla.css
CHANGED
|
@@ -376,77 +376,109 @@
|
|
|
376
376
|
--color-chart-simple-secondary: var(--color-brand-950);
|
|
377
377
|
--color-content-action: var(--color-brand-700);
|
|
378
378
|
--color-content-action-on-strong: var(--color-white);
|
|
379
|
-
--color-content-action-on-subtle: var(--color-brand-
|
|
379
|
+
--color-content-action-on-subtle: var(--color-brand-900);
|
|
380
380
|
--color-content-brand: var(--color-brand-700);
|
|
381
381
|
--color-content-danger: var(--color-red-700);
|
|
382
382
|
--color-content-danger-on-strong: var(--color-white);
|
|
383
383
|
--color-content-danger-on-subtle: var(--color-red-900);
|
|
384
|
-
--color-content-info: var(--color-sky-
|
|
384
|
+
--color-content-info: var(--color-sky-700);
|
|
385
385
|
--color-content-info-on-strong: var(--color-white);
|
|
386
386
|
--color-content-info-on-subtle: var(--color-sky-900);
|
|
387
387
|
--color-content-link: var(--color-blue-600);
|
|
388
388
|
--color-content-link-visited: var(--color-purple-800);
|
|
389
|
+
--color-content-neutral-on-strong: var(--color-white);
|
|
390
|
+
--color-content-neutral-on-subtle: var(--color-base-900);
|
|
389
391
|
--color-content-primary: var(--color-base-950);
|
|
390
392
|
--color-content-secondary: var(--color-base-800);
|
|
391
|
-
--color-content-selected: var(--color-brand-
|
|
392
|
-
--color-content-success: var(--color-green-
|
|
393
|
+
--color-content-selected: var(--color-brand-600);
|
|
394
|
+
--color-content-success: var(--color-green-700);
|
|
393
395
|
--color-content-success-on-strong: var(--color-white);
|
|
394
396
|
--color-content-success-on-subtle: var(--color-green-900);
|
|
395
397
|
--color-content-tertiary: var(--color-base-600);
|
|
396
|
-
--color-content-warning: var(--color-amber-
|
|
398
|
+
--color-content-warning: var(--color-amber-700);
|
|
397
399
|
--color-content-warning-on-strong: var(--color-black);
|
|
398
400
|
--color-content-warning-on-subtle: var(--color-amber-900);
|
|
399
401
|
--color-stroke-action: var(--color-brand-700);
|
|
400
402
|
--color-stroke-danger: var(--color-red-700);
|
|
401
403
|
--color-stroke-focus: var(--color-brand-700);
|
|
402
404
|
--color-stroke-hover: var(--color-base-950);
|
|
403
|
-
--color-stroke-info: var(--color-sky-
|
|
405
|
+
--color-stroke-info: var(--color-sky-700);
|
|
404
406
|
--color-stroke-primary: var(--color-base-500);
|
|
405
407
|
--color-stroke-ring: var(--color-base-950);
|
|
406
408
|
--color-stroke-secondary: var(--color-base-100);
|
|
407
|
-
--color-stroke-success: var(--color-green-
|
|
408
|
-
--color-stroke-warning: var(--color-amber-
|
|
409
|
+
--color-stroke-success: var(--color-green-700);
|
|
410
|
+
--color-stroke-warning: var(--color-amber-700);
|
|
409
411
|
--color-surface-accent-core: var(--color-accent-input);
|
|
410
412
|
--color-surface-accent-strong: var(--color-accent-700);
|
|
413
|
+
--color-surface-accent-subtle: var(--color-accent-200);
|
|
414
|
+
--color-surface-accent-tint: var(--color-accent-100);
|
|
411
415
|
--color-surface-action-strong: var(--color-brand-700);
|
|
412
|
-
--color-surface-action-strong-active: var(--color-brand-
|
|
416
|
+
--color-surface-action-strong-active: var(--color-brand-900);
|
|
413
417
|
--color-surface-action-strong-hover: var(--color-brand-800);
|
|
414
|
-
--color-surface-action-subtle: var(--color-brand-
|
|
415
|
-
--color-surface-action-subtle-active: var(--color-brand-
|
|
416
|
-
--color-surface-action-subtle-hover: var(--color-brand-
|
|
417
|
-
--color-surface-action-tint: var(--color-brand-
|
|
418
|
+
--color-surface-action-subtle: var(--color-brand-100);
|
|
419
|
+
--color-surface-action-subtle-active: var(--color-brand-300);
|
|
420
|
+
--color-surface-action-subtle-hover: var(--color-brand-200);
|
|
421
|
+
--color-surface-action-tint: var(--color-brand-50);
|
|
418
422
|
--color-surface-action-tint-active: var(--color-brand-200);
|
|
419
|
-
--color-surface-action-tint-hover: var(--color-brand-
|
|
420
|
-
--color-surface-
|
|
423
|
+
--color-surface-action-tint-hover: var(--color-brand-100);
|
|
424
|
+
--color-surface-backdrop: rgba(0, 0, 0, 0.5);
|
|
425
|
+
--color-surface-background: var(--color-base-50);
|
|
421
426
|
--color-surface-brand-core: var(--color-brand-input);
|
|
422
427
|
--color-surface-brand-strong: var(--color-brand-700);
|
|
428
|
+
--color-surface-brand-subtle: var(--color-brand-200);
|
|
429
|
+
--color-surface-brand-tint: var(--color-brand-100);
|
|
423
430
|
--color-surface-danger-strong: var(--color-red-700);
|
|
424
|
-
--color-surface-danger-strong-active: var(--color-red-
|
|
431
|
+
--color-surface-danger-strong-active: var(--color-red-900);
|
|
425
432
|
--color-surface-danger-strong-hover: var(--color-red-800);
|
|
426
|
-
--color-surface-danger-subtle: var(--color-red-
|
|
433
|
+
--color-surface-danger-subtle: var(--color-red-100);
|
|
427
434
|
--color-surface-danger-subtle-active: var(--color-red-300);
|
|
428
|
-
--color-surface-danger-subtle-hover: var(--color-red-
|
|
429
|
-
--color-surface-danger-tint: var(--color-red-
|
|
435
|
+
--color-surface-danger-subtle-hover: var(--color-red-200);
|
|
436
|
+
--color-surface-danger-tint: var(--color-red-50);
|
|
430
437
|
--color-surface-danger-tint-active: var(--color-red-200);
|
|
431
|
-
--color-surface-danger-tint-hover: var(--color-red-
|
|
432
|
-
--color-surface-info-strong: var(--color-sky-
|
|
433
|
-
--color-surface-info-
|
|
434
|
-
--color-surface-info-
|
|
435
|
-
--color-surface-
|
|
436
|
-
--color-surface-
|
|
438
|
+
--color-surface-danger-tint-hover: var(--color-red-100);
|
|
439
|
+
--color-surface-info-strong: var(--color-sky-700);
|
|
440
|
+
--color-surface-info-strong-active: var(--color-sky-900);
|
|
441
|
+
--color-surface-info-strong-hover: var(--color-sky-800);
|
|
442
|
+
--color-surface-info-subtle: var(--color-sky-100);
|
|
443
|
+
--color-surface-info-subtle-active: var(--color-sky-300);
|
|
444
|
+
--color-surface-info-subtle-hover: var(--color-sky-200);
|
|
445
|
+
--color-surface-info-tint: var(--color-sky-50);
|
|
446
|
+
--color-surface-info-tint-active: var(--color-sky-200);
|
|
447
|
+
--color-surface-info-tint-hover: var(--color-sky-100);
|
|
448
|
+
--color-surface-neutral-strong: var(--color-base-700);
|
|
449
|
+
--color-surface-neutral-strong-active: var(--color-base-900);
|
|
450
|
+
--color-surface-neutral-strong-hover: var(--color-base-800);
|
|
451
|
+
--color-surface-neutral-subtle: var(--color-base-100);
|
|
452
|
+
--color-surface-neutral-subtle-active: var(--color-base-300);
|
|
453
|
+
--color-surface-neutral-subtle-hover: var(--color-base-200);
|
|
454
|
+
--color-surface-neutral-tint: var(--color-base-50);
|
|
455
|
+
--color-surface-neutral-tint-active: var(--color-base-200);
|
|
456
|
+
--color-surface-neutral-tint-hover: var(--color-base-100);
|
|
437
457
|
--color-surface-primary: var(--color-white);
|
|
438
|
-
--color-surface-primary-active: var(--color-base-
|
|
458
|
+
--color-surface-primary-active: var(--color-base-200);
|
|
439
459
|
--color-surface-primary-hover: var(--color-base-100);
|
|
440
460
|
--color-surface-secondary: var(--color-base-100);
|
|
441
|
-
--color-surface-secondary-active: var(--color-base-
|
|
461
|
+
--color-surface-secondary-active: var(--color-base-300);
|
|
442
462
|
--color-surface-secondary-hover: var(--color-base-200);
|
|
443
463
|
--color-surface-success-strong: var(--color-green-600);
|
|
444
|
-
--color-surface-success-
|
|
445
|
-
--color-surface-success-
|
|
464
|
+
--color-surface-success-strong-active: var(--color-green-800);
|
|
465
|
+
--color-surface-success-strong-hover: var(--color-green-700);
|
|
466
|
+
--color-surface-success-subtle: var(--color-green-100);
|
|
467
|
+
--color-surface-success-subtle-active: var(--color-green-300);
|
|
468
|
+
--color-surface-success-subtle-hover: var(--color-green-200);
|
|
469
|
+
--color-surface-success-tint: var(--color-green-50);
|
|
470
|
+
--color-surface-success-tint-active: var(--color-green-200);
|
|
471
|
+
--color-surface-success-tint-hover: var(--color-green-100);
|
|
446
472
|
--color-surface-tertiary: var(--color-brand-100);
|
|
447
473
|
--color-surface-warning-strong: var(--color-amber-400);
|
|
448
|
-
--color-surface-warning-
|
|
449
|
-
--color-surface-warning-
|
|
474
|
+
--color-surface-warning-strong-active: var(--color-amber-600);
|
|
475
|
+
--color-surface-warning-strong-hover: var(--color-amber-500);
|
|
476
|
+
--color-surface-warning-subtle: var(--color-amber-100);
|
|
477
|
+
--color-surface-warning-subtle-active: var(--color-amber-300);
|
|
478
|
+
--color-surface-warning-subtle-hover: var(--color-amber-200);
|
|
479
|
+
--color-surface-warning-tint: var(--color-amber-50);
|
|
480
|
+
--color-surface-warning-tint-active: var(--color-amber-200);
|
|
481
|
+
--color-surface-warning-tint-hover: var(--color-amber-100);
|
|
450
482
|
--font-body: var(--font-sans);
|
|
451
483
|
--font-body-bold: var(--font-sans-bold);
|
|
452
484
|
--font-body-bold-italic: var(--font-sans-bold-italic);
|
|
@@ -464,9 +496,12 @@
|
|
|
464
496
|
--font-display-semibold: 'Crimson Pro SemiBold';
|
|
465
497
|
--font-display-semibold-italic: 'Crimson Pro SemiBold Italic';
|
|
466
498
|
--opacity-disabled: 0.5;
|
|
499
|
+
--opacity-focus: 0.12;
|
|
467
500
|
--opacity-hover: 0.08;
|
|
468
501
|
--opacity-hover-overlay: 0.2;
|
|
469
502
|
--opacity-selected: 0.12;
|
|
503
|
+
--opacity-selected-focus: 0.24;
|
|
504
|
+
--opacity-selected-hover: 0.2;
|
|
470
505
|
}
|
|
471
506
|
|
|
472
507
|
@media (prefers-color-scheme: dark) {
|
|
@@ -498,6 +533,8 @@
|
|
|
498
533
|
--color-content-info-on-subtle: var(--color-sky-900);
|
|
499
534
|
--color-content-link: var(--color-white);
|
|
500
535
|
--color-content-link-visited: var(--color-purple-200);
|
|
536
|
+
--color-content-neutral-on-strong: var(--color-base-900);
|
|
537
|
+
--color-content-neutral-on-subtle: var(--color-base-100);
|
|
501
538
|
--color-content-primary: var(--color-white);
|
|
502
539
|
--color-content-secondary: var(--color-base-100);
|
|
503
540
|
--color-content-selected: var(--color-brand-100);
|
|
@@ -519,46 +556,76 @@
|
|
|
519
556
|
--color-stroke-success: var(--color-green-200);
|
|
520
557
|
--color-stroke-warning: var(--color-amber-300);
|
|
521
558
|
--color-surface-accent-core: var(--color-accent-input);
|
|
522
|
-
--color-surface-accent-strong: var(--color-accent-
|
|
559
|
+
--color-surface-accent-strong: var(--color-accent-300);
|
|
560
|
+
--color-surface-accent-subtle: var(--color-accent-900);
|
|
561
|
+
--color-surface-accent-tint: var(--color-accent-950);
|
|
523
562
|
--color-surface-action-strong: var(--color-brand-300);
|
|
524
|
-
--color-surface-action-strong-active: var(--color-brand-
|
|
563
|
+
--color-surface-action-strong-active: var(--color-brand-100);
|
|
525
564
|
--color-surface-action-strong-hover: var(--color-brand-200);
|
|
526
|
-
--color-surface-action-subtle: var(--color-brand-
|
|
527
|
-
--color-surface-action-subtle-active: var(--color-brand-
|
|
565
|
+
--color-surface-action-subtle: var(--color-brand-900);
|
|
566
|
+
--color-surface-action-subtle-active: var(--color-brand-700);
|
|
528
567
|
--color-surface-action-subtle-hover: var(--color-brand-800);
|
|
529
|
-
--color-surface-action-tint: var(--color-brand-
|
|
568
|
+
--color-surface-action-tint: var(--color-brand-950);
|
|
530
569
|
--color-surface-action-tint-active: var(--color-brand-800);
|
|
531
|
-
--color-surface-action-tint-hover: var(--color-brand-
|
|
532
|
-
--color-surface-
|
|
570
|
+
--color-surface-action-tint-hover: var(--color-brand-900);
|
|
571
|
+
--color-surface-backdrop: rgba(0, 0, 0, 0.5);
|
|
572
|
+
--color-surface-background: var(--color-base-950);
|
|
533
573
|
--color-surface-brand-core: var(--color-brand-input);
|
|
534
|
-
--color-surface-brand-strong: var(--color-brand-
|
|
574
|
+
--color-surface-brand-strong: var(--color-brand-300);
|
|
575
|
+
--color-surface-brand-subtle: var(--color-brand-900);
|
|
576
|
+
--color-surface-brand-tint: var(--color-brand-950);
|
|
535
577
|
--color-surface-danger-strong: var(--color-red-200);
|
|
536
|
-
--color-surface-danger-strong-active: var(--color-red-
|
|
578
|
+
--color-surface-danger-strong-active: var(--color-red-50);
|
|
537
579
|
--color-surface-danger-strong-hover: var(--color-red-100);
|
|
538
|
-
--color-surface-danger-subtle: var(--color-red-
|
|
539
|
-
--color-surface-danger-subtle-active: var(--color-red-
|
|
580
|
+
--color-surface-danger-subtle: var(--color-red-900);
|
|
581
|
+
--color-surface-danger-subtle-active: var(--color-red-700);
|
|
540
582
|
--color-surface-danger-subtle-hover: var(--color-red-800);
|
|
541
|
-
--color-surface-danger-tint: var(--color-red-
|
|
583
|
+
--color-surface-danger-tint: var(--color-red-950);
|
|
542
584
|
--color-surface-danger-tint-active: var(--color-red-800);
|
|
543
|
-
--color-surface-danger-tint-hover: var(--color-red-
|
|
585
|
+
--color-surface-danger-tint-hover: var(--color-red-900);
|
|
544
586
|
--color-surface-info-strong: var(--color-sky-300);
|
|
545
|
-
--color-surface-info-
|
|
546
|
-
--color-surface-info-
|
|
547
|
-
--color-surface-
|
|
548
|
-
--color-surface-
|
|
587
|
+
--color-surface-info-strong-active: var(--color-sky-100);
|
|
588
|
+
--color-surface-info-strong-hover: var(--color-sky-200);
|
|
589
|
+
--color-surface-info-subtle: var(--color-sky-900);
|
|
590
|
+
--color-surface-info-subtle-active: var(--color-sky-700);
|
|
591
|
+
--color-surface-info-subtle-hover: var(--color-sky-800);
|
|
592
|
+
--color-surface-info-tint: var(--color-sky-950);
|
|
593
|
+
--color-surface-info-tint-active: var(--color-sky-800);
|
|
594
|
+
--color-surface-info-tint-hover: var(--color-sky-900);
|
|
595
|
+
--color-surface-neutral-strong: var(--color-base-300);
|
|
596
|
+
--color-surface-neutral-strong-active: var(--color-base-100);
|
|
597
|
+
--color-surface-neutral-strong-hover: var(--color-base-200);
|
|
598
|
+
--color-surface-neutral-subtle: var(--color-base-900);
|
|
599
|
+
--color-surface-neutral-subtle-active: var(--color-base-700);
|
|
600
|
+
--color-surface-neutral-subtle-hover: var(--color-base-800);
|
|
601
|
+
--color-surface-neutral-tint: var(--color-base-950);
|
|
602
|
+
--color-surface-neutral-tint-active: var(--color-base-800);
|
|
603
|
+
--color-surface-neutral-tint-hover: var(--color-base-900);
|
|
549
604
|
--color-surface-primary: var(--color-base-950);
|
|
550
|
-
--color-surface-primary-active: var(--color-base-
|
|
605
|
+
--color-surface-primary-active: var(--color-base-800);
|
|
551
606
|
--color-surface-primary-hover: var(--color-base-900);
|
|
552
607
|
--color-surface-secondary: var(--color-base-900);
|
|
553
|
-
--color-surface-secondary-active: var(--color-base-
|
|
608
|
+
--color-surface-secondary-active: var(--color-base-700);
|
|
554
609
|
--color-surface-secondary-hover: var(--color-base-800);
|
|
555
610
|
--color-surface-success-strong: var(--color-green-300);
|
|
556
|
-
--color-surface-success-
|
|
557
|
-
--color-surface-success-
|
|
611
|
+
--color-surface-success-strong-active: var(--color-green-100);
|
|
612
|
+
--color-surface-success-strong-hover: var(--color-green-200);
|
|
613
|
+
--color-surface-success-subtle: var(--color-green-900);
|
|
614
|
+
--color-surface-success-subtle-active: var(--color-green-700);
|
|
615
|
+
--color-surface-success-subtle-hover: var(--color-green-800);
|
|
616
|
+
--color-surface-success-tint: var(--color-green-950);
|
|
617
|
+
--color-surface-success-tint-active: var(--color-green-800);
|
|
618
|
+
--color-surface-success-tint-hover: var(--color-green-900);
|
|
558
619
|
--color-surface-tertiary: var(--color-brand-900);
|
|
559
620
|
--color-surface-warning-strong: var(--color-amber-300);
|
|
560
|
-
--color-surface-warning-
|
|
561
|
-
--color-surface-warning-
|
|
621
|
+
--color-surface-warning-strong-active: var(--color-amber-100);
|
|
622
|
+
--color-surface-warning-strong-hover: var(--color-amber-200);
|
|
623
|
+
--color-surface-warning-subtle: var(--color-amber-900);
|
|
624
|
+
--color-surface-warning-subtle-active: var(--color-amber-700);
|
|
625
|
+
--color-surface-warning-subtle-hover: var(--color-amber-800);
|
|
626
|
+
--color-surface-warning-tint: var(--color-amber-950);
|
|
627
|
+
--color-surface-warning-tint-active: var(--color-amber-800);
|
|
628
|
+
--color-surface-warning-tint-hover: var(--color-amber-900);
|
|
562
629
|
--font-body: var(--font-sans);
|
|
563
630
|
--font-body-bold: var(--font-sans-bold);
|
|
564
631
|
--font-body-bold-italic: var(--font-sans-bold-italic);
|
|
@@ -576,9 +643,12 @@
|
|
|
576
643
|
--font-display-semibold: 'Crimson Pro SemiBold';
|
|
577
644
|
--font-display-semibold-italic: 'Crimson Pro SemiBold Italic';
|
|
578
645
|
--opacity-disabled: 0.5;
|
|
646
|
+
--opacity-focus: 0.12;
|
|
579
647
|
--opacity-hover: 0.08;
|
|
580
648
|
--opacity-hover-overlay: 0.2;
|
|
581
649
|
--opacity-selected: 0.12;
|
|
650
|
+
--opacity-selected-focus: 0.24;
|
|
651
|
+
--opacity-selected-hover: 0.2;
|
|
582
652
|
}
|
|
583
653
|
}
|
|
584
654
|
|
|
@@ -0,0 +1,154 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.DEFAULT_PRESET = void 0;
|
|
7
|
+
exports.applyThemeOverride = applyThemeOverride;
|
|
8
|
+
var _prestigeVsDefault = _interopRequireDefault(require("../runtime/prestige-vs-default.json"));
|
|
9
|
+
var _pulseVsDefault = _interopRequireDefault(require("../runtime/pulse-vs-default.json"));
|
|
10
|
+
var _tokenToCssVar = _interopRequireDefault(require("../runtime/token-to-css-var.json"));
|
|
11
|
+
var _theming = require("./theming");
|
|
12
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
13
|
+
// ---------------------------------------------------------------------------
|
|
14
|
+
// Constants
|
|
15
|
+
// ---------------------------------------------------------------------------
|
|
16
|
+
|
|
17
|
+
/** The build-time default preset. Apps ship with Poise baked into CSS. */
|
|
18
|
+
const DEFAULT_PRESET = exports.DEFAULT_PRESET = 'poise';
|
|
19
|
+
|
|
20
|
+
// ---------------------------------------------------------------------------
|
|
21
|
+
// Preset patch lookup
|
|
22
|
+
// ---------------------------------------------------------------------------
|
|
23
|
+
|
|
24
|
+
const PRESET_PATCHES = {
|
|
25
|
+
poise: null,
|
|
26
|
+
prestige: _prestigeVsDefault.default,
|
|
27
|
+
pulse: _pulseVsDefault.default
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
// ---------------------------------------------------------------------------
|
|
31
|
+
// Platform detection
|
|
32
|
+
// ---------------------------------------------------------------------------
|
|
33
|
+
|
|
34
|
+
function detectPlatform() {
|
|
35
|
+
try {
|
|
36
|
+
// eslint-disable-next-line @typescript-eslint/no-require-imports
|
|
37
|
+
const {
|
|
38
|
+
Platform: RNPlatform
|
|
39
|
+
} = require('react-native');
|
|
40
|
+
const os = RNPlatform.OS;
|
|
41
|
+
if (os === 'ios' || os === 'android') return os;
|
|
42
|
+
return 'web';
|
|
43
|
+
} catch {
|
|
44
|
+
return 'web';
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
// ---------------------------------------------------------------------------
|
|
49
|
+
// Result type
|
|
50
|
+
// ---------------------------------------------------------------------------
|
|
51
|
+
|
|
52
|
+
// ---------------------------------------------------------------------------
|
|
53
|
+
// Options
|
|
54
|
+
// ---------------------------------------------------------------------------
|
|
55
|
+
|
|
56
|
+
// ---------------------------------------------------------------------------
|
|
57
|
+
// Orchestrator
|
|
58
|
+
// ---------------------------------------------------------------------------
|
|
59
|
+
|
|
60
|
+
/**
|
|
61
|
+
* Apply a `ThemeOverride` end-to-end: schema version gate, preset patch
|
|
62
|
+
* selection, palette generation, and `Uniwind.updateCSSVariables` calls.
|
|
63
|
+
*
|
|
64
|
+
* Encapsulates the full runtime theme application sequence so consuming
|
|
65
|
+
* apps don't need to orchestrate lower-level utilities or import Uniwind
|
|
66
|
+
* directly.
|
|
67
|
+
*/
|
|
68
|
+
function applyThemeOverride(override, options = {}) {
|
|
69
|
+
const {
|
|
70
|
+
runtimeMap = _tokenToCssVar.default,
|
|
71
|
+
runtimePlatform = detectPlatform()
|
|
72
|
+
} = options;
|
|
73
|
+
|
|
74
|
+
// --- Schema version gate ---
|
|
75
|
+
if (!(0, _theming.isSchemaVersionSupported)(override)) {
|
|
76
|
+
return {
|
|
77
|
+
applied: false,
|
|
78
|
+
reason: 'unsupported_schema_version'
|
|
79
|
+
};
|
|
80
|
+
}
|
|
81
|
+
const basePreset = override.$extensions['com.forge.ui.themeOverride'].basePreset;
|
|
82
|
+
const hasInputs = override.inputs !== undefined && Object.keys(override.inputs).length > 0;
|
|
83
|
+
const hasOverrides = override.overrides !== undefined && Object.keys(override.overrides).length > 0;
|
|
84
|
+
|
|
85
|
+
// --- Metadata-only check ---
|
|
86
|
+
const isDefaultPreset = basePreset === DEFAULT_PRESET;
|
|
87
|
+
if (isDefaultPreset && !hasInputs && !hasOverrides) {
|
|
88
|
+
return {
|
|
89
|
+
applied: false,
|
|
90
|
+
reason: 'no_theme_changes'
|
|
91
|
+
};
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
// --- Preset patch step ---
|
|
95
|
+
let presetMaps = {
|
|
96
|
+
light: {},
|
|
97
|
+
dark: {}
|
|
98
|
+
};
|
|
99
|
+
if (!isDefaultPreset) {
|
|
100
|
+
const patch = PRESET_PATCHES[basePreset];
|
|
101
|
+
if (patch) {
|
|
102
|
+
presetMaps = (0, _theming.presetPatchToUniwindMaps)(patch, runtimeMap, runtimePlatform);
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
// --- FI override step ---
|
|
107
|
+
let overrideMaps = {
|
|
108
|
+
light: {},
|
|
109
|
+
dark: {}
|
|
110
|
+
};
|
|
111
|
+
if (hasInputs || hasOverrides) {
|
|
112
|
+
overrideMaps = (0, _theming.themeOverrideToUniwindMaps)(override, runtimeMap);
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
// --- Merge per mode (FI wins on collision) ---
|
|
116
|
+
const mergedLight = {
|
|
117
|
+
...presetMaps.light,
|
|
118
|
+
...overrideMaps.light
|
|
119
|
+
};
|
|
120
|
+
const mergedDark = {
|
|
121
|
+
...presetMaps.dark,
|
|
122
|
+
...overrideMaps.dark
|
|
123
|
+
};
|
|
124
|
+
|
|
125
|
+
// --- Non-default preset with no FI changes still needs patch application ---
|
|
126
|
+
if (Object.keys(mergedLight).length === 0 && Object.keys(mergedDark).length === 0) {
|
|
127
|
+
return {
|
|
128
|
+
applied: false,
|
|
129
|
+
reason: 'no_theme_changes'
|
|
130
|
+
};
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
// --- Apply via Uniwind ---
|
|
134
|
+
try {
|
|
135
|
+
// eslint-disable-next-line @typescript-eslint/no-require-imports
|
|
136
|
+
const {
|
|
137
|
+
Uniwind
|
|
138
|
+
} = require('uniwind');
|
|
139
|
+
if (Object.keys(mergedLight).length > 0) {
|
|
140
|
+
Uniwind.updateCSSVariables('light', mergedLight);
|
|
141
|
+
}
|
|
142
|
+
if (Object.keys(mergedDark).length > 0) {
|
|
143
|
+
Uniwind.updateCSSVariables('dark', mergedDark);
|
|
144
|
+
}
|
|
145
|
+
} catch {
|
|
146
|
+
throw new Error('applyThemeOverride requires "uniwind" to be installed. ' + 'Add it as a dependency in your app.');
|
|
147
|
+
}
|
|
148
|
+
return {
|
|
149
|
+
applied: true,
|
|
150
|
+
light: mergedLight,
|
|
151
|
+
dark: mergedDark
|
|
152
|
+
};
|
|
153
|
+
}
|
|
154
|
+
//# sourceMappingURL=applyThemeOverride.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["_prestigeVsDefault","_interopRequireDefault","require","_pulseVsDefault","_tokenToCssVar","_theming","e","__esModule","default","DEFAULT_PRESET","exports","PRESET_PATCHES","poise","prestige","prestigePatch","pulse","pulsePatch","detectPlatform","Platform","RNPlatform","os","OS","applyThemeOverride","override","options","runtimeMap","defaultRuntimeMap","runtimePlatform","isSchemaVersionSupported","applied","reason","basePreset","$extensions","hasInputs","inputs","undefined","Object","keys","length","hasOverrides","overrides","isDefaultPreset","presetMaps","light","dark","patch","presetPatchToUniwindMaps","overrideMaps","themeOverrideToUniwindMaps","mergedLight","mergedDark","Uniwind","updateCSSVariables","Error"],"sourceRoot":"../../src","sources":["applyThemeOverride.ts"],"mappings":"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","ignoreList":[]}
|
package/lib/commonjs/index.js
CHANGED
|
@@ -3,11 +3,93 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
+
Object.defineProperty(exports, "DEFAULT_PRESET", {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: function () {
|
|
9
|
+
return _theming.DEFAULT_PRESET;
|
|
10
|
+
}
|
|
11
|
+
});
|
|
12
|
+
Object.defineProperty(exports, "INPUT_TOKEN_MAP", {
|
|
13
|
+
enumerable: true,
|
|
14
|
+
get: function () {
|
|
15
|
+
return _types.INPUT_TOKEN_MAP;
|
|
16
|
+
}
|
|
17
|
+
});
|
|
18
|
+
Object.defineProperty(exports, "OVERRIDE_SCHEMA_VERSION", {
|
|
19
|
+
enumerable: true,
|
|
20
|
+
get: function () {
|
|
21
|
+
return _types.OVERRIDE_SCHEMA_VERSION;
|
|
22
|
+
}
|
|
23
|
+
});
|
|
24
|
+
Object.defineProperty(exports, "SUPPORTED_OVERRIDE_SCHEMA_VERSIONS", {
|
|
25
|
+
enumerable: true,
|
|
26
|
+
get: function () {
|
|
27
|
+
return _types.SUPPORTED_OVERRIDE_SCHEMA_VERSIONS;
|
|
28
|
+
}
|
|
29
|
+
});
|
|
30
|
+
Object.defineProperty(exports, "applyThemeOverride", {
|
|
31
|
+
enumerable: true,
|
|
32
|
+
get: function () {
|
|
33
|
+
return _theming.applyThemeOverride;
|
|
34
|
+
}
|
|
35
|
+
});
|
|
36
|
+
Object.defineProperty(exports, "deriveBaseColorKey", {
|
|
37
|
+
enumerable: true,
|
|
38
|
+
get: function () {
|
|
39
|
+
return _palette.deriveBaseColorKey;
|
|
40
|
+
}
|
|
41
|
+
});
|
|
42
|
+
Object.defineProperty(exports, "generateColorScale", {
|
|
43
|
+
enumerable: true,
|
|
44
|
+
get: function () {
|
|
45
|
+
return _palette.generateColorScale;
|
|
46
|
+
}
|
|
47
|
+
});
|
|
48
|
+
Object.defineProperty(exports, "generatePalettesFromInputs", {
|
|
49
|
+
enumerable: true,
|
|
50
|
+
get: function () {
|
|
51
|
+
return _palette.generatePalettesFromInputs;
|
|
52
|
+
}
|
|
53
|
+
});
|
|
54
|
+
Object.defineProperty(exports, "isSchemaVersionSupported", {
|
|
55
|
+
enumerable: true,
|
|
56
|
+
get: function () {
|
|
57
|
+
return _theming.isSchemaVersionSupported;
|
|
58
|
+
}
|
|
59
|
+
});
|
|
60
|
+
Object.defineProperty(exports, "presetFonts", {
|
|
61
|
+
enumerable: true,
|
|
62
|
+
get: function () {
|
|
63
|
+
return _types.presetFonts;
|
|
64
|
+
}
|
|
65
|
+
});
|
|
66
|
+
Object.defineProperty(exports, "presetPatchToUniwindMaps", {
|
|
67
|
+
enumerable: true,
|
|
68
|
+
get: function () {
|
|
69
|
+
return _theming.presetPatchToUniwindMaps;
|
|
70
|
+
}
|
|
71
|
+
});
|
|
72
|
+
Object.defineProperty(exports, "themeOverrideToUniwindMaps", {
|
|
73
|
+
enumerable: true,
|
|
74
|
+
get: function () {
|
|
75
|
+
return _theming.themeOverrideToUniwindMaps;
|
|
76
|
+
}
|
|
77
|
+
});
|
|
6
78
|
Object.defineProperty(exports, "useCdxFonts", {
|
|
7
79
|
enumerable: true,
|
|
8
80
|
get: function () {
|
|
9
81
|
return _useCdxFonts.useCdxFonts;
|
|
10
82
|
}
|
|
11
83
|
});
|
|
84
|
+
Object.defineProperty(exports, "useForgeFonts", {
|
|
85
|
+
enumerable: true,
|
|
86
|
+
get: function () {
|
|
87
|
+
return _useForgeFonts.useForgeFonts;
|
|
88
|
+
}
|
|
89
|
+
});
|
|
90
|
+
var _types = require("./types");
|
|
91
|
+
var _palette = require("./palette");
|
|
92
|
+
var _theming = require("./theming");
|
|
93
|
+
var _useForgeFonts = require("./useForgeFonts");
|
|
12
94
|
var _useCdxFonts = require("./useCdxFonts");
|
|
13
95
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["
|
|
1
|
+
{"version":3,"names":["_types","require","_palette","_theming","_useForgeFonts","_useCdxFonts"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,IAAAA,MAAA,GAAAC,OAAA;AAsBA,IAAAC,QAAA,GAAAD,OAAA;AAOA,IAAAE,QAAA,GAAAF,OAAA;AAcA,IAAAG,cAAA,GAAAH,OAAA;AACA,IAAAI,YAAA,GAAAJ,OAAA","ignoreList":[]}
|