@lluc_llull/ui-lib 0.28.1 → 0.28.3

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 (13) hide show
  1. package/directives/header-scroll.directive.d.ts +8 -0
  2. package/directives/index.d.ts +1 -0
  3. package/fesm2022/lluc_llull-ui-lib-content.mjs +4 -4
  4. package/fesm2022/lluc_llull-ui-lib-content.mjs.map +1 -1
  5. package/fesm2022/lluc_llull-ui-lib-directives.mjs +26 -1
  6. package/fesm2022/lluc_llull-ui-lib-directives.mjs.map +1 -1
  7. package/fesm2022/lluc_llull-ui-lib-footers.mjs +8 -8
  8. package/fesm2022/lluc_llull-ui-lib-footers.mjs.map +1 -1
  9. package/fesm2022/lluc_llull-ui-lib-headers.mjs +5 -5
  10. package/fesm2022/lluc_llull-ui-lib-headers.mjs.map +1 -1
  11. package/package.json +1 -1
  12. package/src/lib/styles/main.css +165 -88
  13. package/styles/main.css +165 -88
package/styles/main.css CHANGED
@@ -81,7 +81,7 @@
81
81
  min-width: 40px;
82
82
  padding: 0 12px;
83
83
  background: transparent;
84
- border-radius: 4px;
84
+ border-radius: 0;
85
85
  color: var(--button-header-text);
86
86
  }
87
87
  .btn-header:hover {
@@ -127,8 +127,8 @@ body {
127
127
  height: 100%;
128
128
  font-family: var(--font-base);
129
129
  font-size: var(--font-size-base);
130
- color: var(--color-text);
131
- background-color: var(--color-bg);
130
+ color: var(--text-primary);
131
+ background-color: var(--content-bg);
132
132
  }
133
133
 
134
134
  a {
@@ -533,8 +533,8 @@ body.show-grid .debug-grid-overlay {
533
533
  --color-primary-70: rgba(var(--color-primary-raw), 0.7);
534
534
  --color-primary-80: rgba(var(--color-primary-raw), 0.8);
535
535
  --color-primary-90: rgba(var(--color-primary-raw), 0.9);
536
- --color-secondary: #f3f4f6;
537
- --color-secondary-raw: 243, 244, 246;
536
+ --color-secondary: #e2e8f0;
537
+ --color-secondary-raw: 226, 232, 240;
538
538
  --color-secondary-10: rgba(var(--color-secondary-raw), 0.1);
539
539
  --color-secondary-20: rgba(var(--color-secondary-raw), 0.2);
540
540
  --color-secondary-30: rgba(var(--color-secondary-raw), 0.3);
@@ -544,52 +544,90 @@ body.show-grid .debug-grid-overlay {
544
544
  --color-secondary-70: rgba(var(--color-secondary-raw), 0.7);
545
545
  --color-secondary-80: rgba(var(--color-secondary-raw), 0.8);
546
546
  --color-secondary-90: rgba(var(--color-secondary-raw), 0.9);
547
- --color-text: #f3f4f6;
548
- --color-bg: #0f0f10;
547
+ --header-bg: transparent;
548
+ --header-bg-fixed-dark: #1a1d21;
549
+ --header-bg-fixed-light: #e2e8f0;
550
+ --header-mobile-bg: #1a1d21;
551
+ --header-logo-text: #e2e8f0;
552
+ --header-logo-text-dark: #e2e8f0;
553
+ --header-logo-text-light: #1a1d21;
554
+ --header-link: #e2e8f0;
555
+ --header-link-hover: #60a5fa;
556
+ --footer-bg: #0f1117;
557
+ --footer-text: #e2e8f0;
558
+ --footer-text-hover: #60a5fa;
559
+ --footer-links: #e2e8f0;
560
+ --footer-links-hover: #60a5fa;
561
+ --footer-arrows: #e2e8f0;
562
+ --footer-arrows-hover: #0f1117;
563
+ --footer-arrows-bg: #2a2d35;
564
+ --footer-arrows-bg-hover: #3a3d45;
565
+ --content-bg: #0f1117;
566
+ --content-bg-light: #0f1117;
567
+ --content-bg-dark: #f5f5f5;
568
+ --content-overlay: rgba(0, 0, 0, 0.6);
569
+ --text-primary: #e2e8f0;
570
+ --text-primary-raw: 30, 37, 48;
571
+ --text-primary-10: rgba(var(--text-primary-raw), 0.1);
572
+ --text-primary-20: rgba(var(--text-primary-raw), 0.2);
573
+ --text-primary-30: rgba(var(--text-primary-raw), 0.3);
574
+ --text-primary-40: rgba(var(--text-primary-raw), 0.4);
575
+ --text-primary-50: rgba(var(--text-primary-raw), 0.5);
576
+ --text-primary-60: rgba(var(--text-primary-raw), 0.6);
577
+ --text-primary-70: rgba(var(--text-primary-raw), 0.7);
578
+ --text-primary-80: rgba(var(--text-primary-raw), 0.8);
579
+ --text-primary-90: rgba(var(--text-primary-raw), 0.9);
580
+ --text-secondary: rgba(30, 37, 48, 0.6);
581
+ --text-secondary-raw: 30, 37, 48;
582
+ --text-secondary-10: rgba(var(--text-secondary-raw), 0.1);
583
+ --text-secondary-20: rgba(var(--text-secondary-raw), 0.2);
584
+ --text-secondary-30: rgba(var(--text-secondary-raw), 0.3);
585
+ --text-secondary-40: rgba(var(--text-secondary-raw), 0.4);
586
+ --text-secondary-50: rgba(var(--text-secondary-raw), 0.5);
587
+ --text-secondary-60: rgba(var(--text-secondary-raw), 0.6);
588
+ --text-secondary-70: rgba(var(--text-secondary-raw), 0.7);
589
+ --text-secondary-80: rgba(var(--text-secondary-raw), 0.8);
590
+ --text-secondary-90: rgba(var(--text-secondary-raw), 0.9);
591
+ --text-disabled: rgba(226, 232, 240, 0.3);
592
+ --text-inverse: #0f1117;
593
+ --surface-primary: #1a1d21;
594
+ --surface-secondary: #22262d;
595
+ --surface-tertiary: #2a2e36;
596
+ --modal-bg: var(--surface-primary);
597
+ --close-btn: var(--text-primary);
598
+ --item-text: var(--text-primary);
599
+ --border-primary: #2a2e36;
600
+ --border-secondary: #343840;
601
+ --border-focus: #60a5fa;
602
+ --divider: rgba(226, 232, 240, 0.08);
603
+ --progress-color: var(--text-primary);
604
+ --progress-bg: #60a5fa;
605
+ --tag-color: var(--text-primary);
606
+ --tag-bg: #1e3a5f;
549
607
  --button-primary-bg: #007bff;
550
- --button-primary-text: #f9f9f9;
551
- --button-primary-bg-hover: #033468;
552
- --button-primary-text-hover: #f9f9f9;
553
- --button-primary-outline-border: #020202;
554
- --button-primary-outline-text: #020202;
608
+ --button-primary-text: #ffffff;
609
+ --button-primary-bg-hover: #1a6fd4;
610
+ --button-primary-text-hover: #ffffff;
611
+ --button-primary-outline-border: #60a5fa;
612
+ --button-primary-outline-text: #60a5fa;
555
613
  --button-primary-outline-bg-hover: #007bff;
556
- --button-primary-outline-text-hover: #f9f9f9;
557
- --button-secondary-bg: #2b3035;
558
- --button-secondary-text: #f9f9f9;
559
- --button-secondary-bg-hover: #1c1e20;
560
- --button-secondary-text-hover: #f9f9f9;
561
- --button-link-text: #f3f4f6;
562
- --button-link-text-hover: #79b6ff;
563
- --button-header-bg: #007bff;
564
- --button-header-text: #f9f9f9;
565
- --button-header-bg-hover: rgba(230, 230, 230, 0.062);
566
- --button-header-text-hover: #f9f9f9;
567
- --header-clear-bg: #0f0f10;
568
- --header-mobile-bg: #0f0f10;
569
- --header-logo-text: #0f0f10;
570
- --modal-bg: #17181a;
571
- --close-btn: #f3f4f6;
572
- --item-text: #f3f4f6;
573
- --progress-color: #f9f9f9;
574
- --progress-bg: #79b6ff;
575
- --tag-color: #f9f9f9;
576
- --tag-bg: #79b6ff;
577
- --footer-bg: #0f0f10;
578
- --footer-text: #f3f4f6;
579
- --footer-text-hover: #79b6ff;
580
- --footer-links: #f3f4f6;
581
- --footer-links-hover: #79b6ff;
582
- --footer-arrows: #fff;
583
- --footer-arrows-hover: #0f0f10;
584
- --footer-arrows-bg: #dddddd;
585
- --footer-arrows-bg-hover: #f3f3f3;
586
- }
587
-
588
- :root,
614
+ --button-primary-outline-text-hover: #ffffff;
615
+ --button-secondary-bg: var(--surface-secondary);
616
+ --button-secondary-text: var(--text-primary);
617
+ --button-secondary-bg-hover: var(--surface-tertiary);
618
+ --button-secondary-text-hover: var(--text-primary);
619
+ --button-link-text: var(--text-primary);
620
+ --button-link-text-hover: #60a5fa;
621
+ --button-header-bg: transparent;
622
+ --button-header-text: var(--text-primary);
623
+ --button-header-bg-hover: rgba(226, 232, 240, 0.06);
624
+ --button-header-text-hover: var(--text-primary);
625
+ }
626
+
589
627
  :root[data-theme=light] {
590
628
  color-scheme: light;
591
- --color-primary: #007bff;
592
- --color-primary-raw: 0, 123, 255;
629
+ --color-primary: #0066dd;
630
+ --color-primary-raw: 0, 102, 221;
593
631
  --color-primary-10: rgba(var(--color-primary-raw), 0.1);
594
632
  --color-primary-20: rgba(var(--color-primary-raw), 0.2);
595
633
  --color-primary-30: rgba(var(--color-primary-raw), 0.3);
@@ -599,8 +637,8 @@ body.show-grid .debug-grid-overlay {
599
637
  --color-primary-70: rgba(var(--color-primary-raw), 0.7);
600
638
  --color-primary-80: rgba(var(--color-primary-raw), 0.8);
601
639
  --color-primary-90: rgba(var(--color-primary-raw), 0.9);
602
- --color-secondary: #f3f4f6;
603
- --color-secondary-raw: 243, 244, 246;
640
+ --color-secondary: #334155;
641
+ --color-secondary-raw: 51, 65, 85;
604
642
  --color-secondary-10: rgba(var(--color-secondary-raw), 0.1);
605
643
  --color-secondary-20: rgba(var(--color-secondary-raw), 0.2);
606
644
  --color-secondary-30: rgba(var(--color-secondary-raw), 0.3);
@@ -610,45 +648,84 @@ body.show-grid .debug-grid-overlay {
610
648
  --color-secondary-70: rgba(var(--color-secondary-raw), 0.7);
611
649
  --color-secondary-80: rgba(var(--color-secondary-raw), 0.8);
612
650
  --color-secondary-90: rgba(var(--color-secondary-raw), 0.9);
613
- --color-text: #111111;
614
- --color-bg: #f9f9f9;
615
- --button-primary-bg: #007bff;
616
- --button-primary-text: #f9f9f9;
617
- --button-primary-bg-hover: #033468;
618
- --button-primary-text-hover: #f9f9f9;
619
- --button-primary-outline-border: #020202;
620
- --button-primary-outline-text: #020202;
621
- --button-primary-outline-bg-hover: #007bff;
622
- --button-primary-outline-text-hover: #f9f9f9;
623
- --button-secondary-bg: #6c757d;
624
- --button-secondary-text: #f9f9f9;
625
- --button-secondary-bg-hover: #1c1e20;
626
- --button-secondary-text-hover: #f9f9f9;
627
- --button-link-text: #111111;
628
- --button-link-text-hover: #007bff;
629
- --button-header-bg: #007bff;
630
- --button-header-text: #f9f9f9;
631
- --button-header-bg-hover: rgba(0, 0, 0, 0.05);
632
- --button-header-text-hover: #f9f9f9;
633
- --header-clear-bg: #007bff;
634
- --header-mobile-bg: #007bff;
635
- --header-logo-text: #0f0f10;
636
- --modal-bg: #f9f9f9;
637
- --close-btn: #111111;
638
- --item-text: #111111;
639
- --progress-color: #79b6ff;
640
- --progress-bg: #dde8f5;
641
- --tag-color: #79b6ff;
642
- --tag-bg: #dde8f5;
643
- --footer-bg: #dadada;
644
- --footer-text: #000;
645
- --footer-text-hover: #79b6ff;
646
- --footer-links: #000;
647
- --footer-links-hover: #79b6ff;
648
- --footer-arrows: #fff;
649
- --footer-arrows-hover: #fff;
650
- --footer-arrows-bg: #b6b6b6;
651
- --footer-arrows-bg-hover: #8b8a8a;
651
+ --header-bg: transparent;
652
+ --header-bg-fixed-dark: #0a0a0a;
653
+ --header-bg-fixed-light: #f5f3ef;
654
+ --header-mobile-bg: #f5f3ef;
655
+ --header-logo-text: #1e2530;
656
+ --header-logo-text-dark: #f5f3ef;
657
+ --header-logo-text-light: #0a0a0a;
658
+ --header-link: #1e2530;
659
+ --header-link-hover: #0066dd;
660
+ --footer-bg: #1e2530;
661
+ --footer-text: #e2e8f0;
662
+ --footer-text-hover: #60a5fa;
663
+ --footer-links: #e2e8f0;
664
+ --footer-links-hover: #60a5fa;
665
+ --footer-arrows: #1e2530;
666
+ --footer-arrows-hover: #f5f3ef;
667
+ --footer-arrows-bg: #e2e8f0;
668
+ --footer-arrows-bg-hover: #cbd5e1;
669
+ --content-bg: #f5f3ef;
670
+ --content-bg-light: #f5f5f5;
671
+ --content-bg-dark: #0f1117;
672
+ --content-overlay: rgba(0, 0, 0, 0.35);
673
+ --text-primary: #1e2530;
674
+ --text-primary-raw: 30, 37, 48;
675
+ --text-primary-10: rgba(var(--text-primary-raw), 0.1);
676
+ --text-primary-20: rgba(var(--text-primary-raw), 0.2);
677
+ --text-primary-30: rgba(var(--text-primary-raw), 0.3);
678
+ --text-primary-40: rgba(var(--text-primary-raw), 0.4);
679
+ --text-primary-50: rgba(var(--text-primary-raw), 0.5);
680
+ --text-primary-60: rgba(var(--text-primary-raw), 0.6);
681
+ --text-primary-70: rgba(var(--text-primary-raw), 0.7);
682
+ --text-primary-80: rgba(var(--text-primary-raw), 0.8);
683
+ --text-primary-90: rgba(var(--text-primary-raw), 0.9);
684
+ --text-secondary: rgba(30, 37, 48, 0.6);
685
+ --text-secondary-raw: 30, 37, 48;
686
+ --text-secondary-10: rgba(var(--text-secondary-raw), 0.1);
687
+ --text-secondary-20: rgba(var(--text-secondary-raw), 0.2);
688
+ --text-secondary-30: rgba(var(--text-secondary-raw), 0.3);
689
+ --text-secondary-40: rgba(var(--text-secondary-raw), 0.4);
690
+ --text-secondary-50: rgba(var(--text-secondary-raw), 0.5);
691
+ --text-secondary-60: rgba(var(--text-secondary-raw), 0.6);
692
+ --text-secondary-70: rgba(var(--text-secondary-raw), 0.7);
693
+ --text-secondary-80: rgba(var(--text-secondary-raw), 0.8);
694
+ --text-secondary-90: rgba(var(--text-secondary-raw), 0.9);
695
+ --text-disabled: rgba(30, 37, 48, 0.3);
696
+ --text-inverse: #f5f3ef;
697
+ --surface-primary: #edeae4;
698
+ --surface-secondary: #e4e0d8;
699
+ --surface-tertiary: #d8d3c9;
700
+ --modal-bg: var(--surface-primary);
701
+ --close-btn: var(--text-primary);
702
+ --item-text: var(--text-primary);
703
+ --border-primary: #d8d3c9;
704
+ --border-secondary: #c8c2b6;
705
+ --border-focus: #0066dd;
706
+ --divider: rgba(30, 37, 48, 0.1);
707
+ --progress-color: var(--text-primary);
708
+ --progress-bg: #0066dd;
709
+ --tag-color: #f5f3ef;
710
+ --tag-bg: #0066dd;
711
+ --button-primary-bg: #0066dd;
712
+ --button-primary-text: #ffffff;
713
+ --button-primary-bg-hover: #0052b3;
714
+ --button-primary-text-hover: #ffffff;
715
+ --button-primary-outline-border: #0066dd;
716
+ --button-primary-outline-text: #0066dd;
717
+ --button-primary-outline-bg-hover: #0066dd;
718
+ --button-primary-outline-text-hover: #ffffff;
719
+ --button-secondary-bg: var(--surface-secondary);
720
+ --button-secondary-text: var(--text-primary);
721
+ --button-secondary-bg-hover: var(--surface-tertiary);
722
+ --button-secondary-text-hover: var(--text-primary);
723
+ --button-link-text: var(--text-primary);
724
+ --button-link-text-hover: #0066dd;
725
+ --button-header-bg: transparent;
726
+ --button-header-text: var(--text-primary);
727
+ --button-header-bg-hover: rgba(30, 37, 48, 0.06);
728
+ --button-header-text-hover: var(--text-primary);
652
729
  }
653
730
 
654
731
  /*# sourceMappingURL=main.css.map */