@metropolle/design-system 1.0.0-beta.2025.8.29.1357.b23d6f9 → 1.0.0-beta.2025.8.29.1558.9969927
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/dist/css/components.css +259 -0
- package/package.json +1 -1
package/dist/css/components.css
CHANGED
|
@@ -594,6 +594,265 @@
|
|
|
594
594
|
gap: var(--mds-spacing-xl);
|
|
595
595
|
}
|
|
596
596
|
|
|
597
|
+
/* ========================================
|
|
598
|
+
Layout Utility Classes - @back optimization
|
|
599
|
+
======================================== */
|
|
600
|
+
|
|
601
|
+
/* Flexbox utilities */
|
|
602
|
+
.mds-flex {
|
|
603
|
+
display: flex;
|
|
604
|
+
}
|
|
605
|
+
|
|
606
|
+
.mds-flex-col {
|
|
607
|
+
display: flex;
|
|
608
|
+
flex-direction: column;
|
|
609
|
+
}
|
|
610
|
+
|
|
611
|
+
.mds-flex-center {
|
|
612
|
+
display: flex;
|
|
613
|
+
align-items: center;
|
|
614
|
+
justify-content: center;
|
|
615
|
+
}
|
|
616
|
+
|
|
617
|
+
.mds-flex-between {
|
|
618
|
+
display: flex;
|
|
619
|
+
align-items: center;
|
|
620
|
+
justify-content: space-between;
|
|
621
|
+
}
|
|
622
|
+
|
|
623
|
+
.mds-flex-start {
|
|
624
|
+
display: flex;
|
|
625
|
+
align-items: flex-start;
|
|
626
|
+
justify-content: flex-start;
|
|
627
|
+
}
|
|
628
|
+
|
|
629
|
+
.mds-flex-end {
|
|
630
|
+
display: flex;
|
|
631
|
+
align-items: center;
|
|
632
|
+
justify-content: flex-end;
|
|
633
|
+
}
|
|
634
|
+
|
|
635
|
+
/* Spacing utilities */
|
|
636
|
+
.mds-gap-xs { gap: var(--mds-spacing-xs); }
|
|
637
|
+
.mds-gap-sm { gap: var(--mds-spacing-sm); }
|
|
638
|
+
.mds-gap-md { gap: var(--mds-spacing-md); }
|
|
639
|
+
.mds-gap-lg { gap: var(--mds-spacing-lg); }
|
|
640
|
+
.mds-gap-xl { gap: var(--mds-spacing-xl); }
|
|
641
|
+
|
|
642
|
+
/* Padding utilities */
|
|
643
|
+
.mds-p-xs { padding: var(--mds-spacing-xs); }
|
|
644
|
+
.mds-p-sm { padding: var(--mds-spacing-sm); }
|
|
645
|
+
.mds-p-md { padding: var(--mds-spacing-md); }
|
|
646
|
+
.mds-p-lg { padding: var(--mds-spacing-lg); }
|
|
647
|
+
.mds-p-xl { padding: var(--mds-spacing-xl); }
|
|
648
|
+
|
|
649
|
+
/* Margin utilities */
|
|
650
|
+
.mds-m-xs { margin: var(--mds-spacing-xs); }
|
|
651
|
+
.mds-m-sm { margin: var(--mds-spacing-sm); }
|
|
652
|
+
.mds-m-md { margin: var(--mds-spacing-md); }
|
|
653
|
+
.mds-m-lg { margin: var(--mds-spacing-lg); }
|
|
654
|
+
.mds-m-xl { margin: var(--mds-spacing-xl); }
|
|
655
|
+
|
|
656
|
+
/* Margin bottom utilities */
|
|
657
|
+
.mds-mb-xs { margin-bottom: var(--mds-spacing-xs); }
|
|
658
|
+
.mds-mb-sm { margin-bottom: var(--mds-spacing-sm); }
|
|
659
|
+
.mds-mb-md { margin-bottom: var(--mds-spacing-md); }
|
|
660
|
+
.mds-mb-lg { margin-bottom: var(--mds-spacing-lg); }
|
|
661
|
+
.mds-mb-xl { margin-bottom: var(--mds-spacing-xl); }
|
|
662
|
+
|
|
663
|
+
/* ========================================
|
|
664
|
+
Dashboard Layout Classes - @back optimization
|
|
665
|
+
======================================== */
|
|
666
|
+
|
|
667
|
+
/* Dashboard container */
|
|
668
|
+
.mds-dashboard-container {
|
|
669
|
+
display: flex;
|
|
670
|
+
min-height: 100vh;
|
|
671
|
+
font-family: var(--mds-typography-fontFamily-brand);
|
|
672
|
+
transition: all 0.3s ease;
|
|
673
|
+
background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #2a2a2a 100%);
|
|
674
|
+
background-attachment: fixed;
|
|
675
|
+
background-repeat: no-repeat;
|
|
676
|
+
background-size: 100% 100%;
|
|
677
|
+
color: #ffffff;
|
|
678
|
+
}
|
|
679
|
+
|
|
680
|
+
/* Light theme dashboard container */
|
|
681
|
+
html[data-theme="light"] .mds-dashboard-container {
|
|
682
|
+
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #cbd5e1 100%);
|
|
683
|
+
color: #1a1a1a;
|
|
684
|
+
}
|
|
685
|
+
|
|
686
|
+
/* Dashboard main content */
|
|
687
|
+
.mds-dashboard-main {
|
|
688
|
+
flex: 1;
|
|
689
|
+
margin-left: 260px;
|
|
690
|
+
margin-top: 60px;
|
|
691
|
+
display: flex;
|
|
692
|
+
flex-direction: column;
|
|
693
|
+
min-height: calc(100vh - 60px);
|
|
694
|
+
}
|
|
695
|
+
|
|
696
|
+
/* Page header */
|
|
697
|
+
.mds-page-header {
|
|
698
|
+
padding: var(--mds-spacing-lg) var(--mds-spacing-xl) var(--mds-spacing-md) var(--mds-spacing-xl);
|
|
699
|
+
backdrop-filter: blur(10px);
|
|
700
|
+
-webkit-backdrop-filter: blur(10px);
|
|
701
|
+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
|
702
|
+
}
|
|
703
|
+
|
|
704
|
+
/* Dark theme page header */
|
|
705
|
+
html[data-theme="dark"] .mds-page-header {
|
|
706
|
+
background-color: rgba(30, 41, 59, 0.4);
|
|
707
|
+
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
708
|
+
}
|
|
709
|
+
|
|
710
|
+
/* Light theme page header */
|
|
711
|
+
html[data-theme="light"] .mds-page-header {
|
|
712
|
+
background-color: rgba(255, 255, 255, 0.7);
|
|
713
|
+
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
|
714
|
+
}
|
|
715
|
+
|
|
716
|
+
/* Page title */
|
|
717
|
+
.mds-page-title {
|
|
718
|
+
margin: 0 0 var(--mds-spacing-xs) 0;
|
|
719
|
+
font-size: var(--mds-typography-fontSize-xl);
|
|
720
|
+
font-weight: var(--mds-typography-fontWeight-semibold);
|
|
721
|
+
color: var(--mds-colors-color-text-primary);
|
|
722
|
+
}
|
|
723
|
+
|
|
724
|
+
/* Page description */
|
|
725
|
+
.mds-page-description {
|
|
726
|
+
margin: 0;
|
|
727
|
+
font-size: var(--mds-typography-fontSize-sm);
|
|
728
|
+
color: var(--mds-colors-color-text-secondary);
|
|
729
|
+
line-height: var(--mds-typography-lineHeight-normal);
|
|
730
|
+
}
|
|
731
|
+
|
|
732
|
+
/* Main content area */
|
|
733
|
+
.mds-main-content {
|
|
734
|
+
flex: 1;
|
|
735
|
+
padding: var(--mds-spacing-xl);
|
|
736
|
+
overflow-y: auto;
|
|
737
|
+
position: relative;
|
|
738
|
+
}
|
|
739
|
+
|
|
740
|
+
/* ========================================
|
|
741
|
+
Navbar Classes - @back optimization
|
|
742
|
+
======================================== */
|
|
743
|
+
|
|
744
|
+
/* Fixed navbar */
|
|
745
|
+
.mds-navbar {
|
|
746
|
+
position: fixed;
|
|
747
|
+
top: 0;
|
|
748
|
+
left: 0;
|
|
749
|
+
right: 0;
|
|
750
|
+
height: 60px;
|
|
751
|
+
z-index: 1000;
|
|
752
|
+
padding: 0 var(--mds-spacing-xl);
|
|
753
|
+
backdrop-filter: blur(20px);
|
|
754
|
+
-webkit-backdrop-filter: blur(20px);
|
|
755
|
+
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
|
|
756
|
+
transition: all 0.3s ease;
|
|
757
|
+
}
|
|
758
|
+
|
|
759
|
+
/* Dark theme navbar */
|
|
760
|
+
html[data-theme="dark"] .mds-navbar {
|
|
761
|
+
background: rgba(255, 255, 255, 0.1);
|
|
762
|
+
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
763
|
+
}
|
|
764
|
+
|
|
765
|
+
/* Light theme navbar */
|
|
766
|
+
html[data-theme="light"] .mds-navbar {
|
|
767
|
+
background: rgba(255, 255, 255, 0.8);
|
|
768
|
+
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
|
769
|
+
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
|
770
|
+
}
|
|
771
|
+
|
|
772
|
+
/* Navbar content container */
|
|
773
|
+
.mds-navbar-content {
|
|
774
|
+
display: flex;
|
|
775
|
+
align-items: center;
|
|
776
|
+
justify-content: space-between;
|
|
777
|
+
height: 100%;
|
|
778
|
+
max-width: 100%;
|
|
779
|
+
}
|
|
780
|
+
|
|
781
|
+
/* Navbar brand section */
|
|
782
|
+
.mds-navbar-brand {
|
|
783
|
+
display: flex;
|
|
784
|
+
align-items: center;
|
|
785
|
+
gap: var(--mds-spacing-md);
|
|
786
|
+
}
|
|
787
|
+
|
|
788
|
+
/* Navbar actions section */
|
|
789
|
+
.mds-navbar-actions {
|
|
790
|
+
display: flex;
|
|
791
|
+
align-items: center;
|
|
792
|
+
gap: var(--mds-spacing-md);
|
|
793
|
+
}
|
|
794
|
+
|
|
795
|
+
/* User info in navbar */
|
|
796
|
+
.mds-navbar-user {
|
|
797
|
+
font-size: var(--mds-typography-fontSize-sm);
|
|
798
|
+
color: var(--mds-colors-color-text-secondary);
|
|
799
|
+
margin-right: var(--mds-spacing-sm);
|
|
800
|
+
}
|
|
801
|
+
|
|
802
|
+
/* Sidebar-width brand section */
|
|
803
|
+
.mds-navbar-brand-section {
|
|
804
|
+
width: 260px;
|
|
805
|
+
display: flex;
|
|
806
|
+
align-items: center;
|
|
807
|
+
justify-content: center;
|
|
808
|
+
}
|
|
809
|
+
|
|
810
|
+
/* Center user info section */
|
|
811
|
+
.mds-navbar-center {
|
|
812
|
+
flex: 1;
|
|
813
|
+
display: flex;
|
|
814
|
+
justify-content: center;
|
|
815
|
+
}
|
|
816
|
+
|
|
817
|
+
/* User info badge */
|
|
818
|
+
.mds-navbar-user-badge {
|
|
819
|
+
display: flex;
|
|
820
|
+
align-items: center;
|
|
821
|
+
gap: var(--mds-spacing-sm);
|
|
822
|
+
font-size: var(--mds-typography-fontSize-sm);
|
|
823
|
+
padding: var(--mds-spacing-sm) var(--mds-spacing-md);
|
|
824
|
+
border-radius: 20px;
|
|
825
|
+
border: 1px solid;
|
|
826
|
+
font-weight: var(--mds-typography-fontWeight-medium);
|
|
827
|
+
}
|
|
828
|
+
|
|
829
|
+
/* Dark theme user badge */
|
|
830
|
+
html[data-theme="dark"] .mds-navbar-user-badge {
|
|
831
|
+
color: #888;
|
|
832
|
+
background-color: rgba(255, 255, 255, 0.05);
|
|
833
|
+
border-color: rgba(255, 255, 255, 0.1);
|
|
834
|
+
}
|
|
835
|
+
|
|
836
|
+
/* Light theme user badge */
|
|
837
|
+
html[data-theme="light"] .mds-navbar-user-badge {
|
|
838
|
+
color: #666;
|
|
839
|
+
background-color: rgba(0, 0, 0, 0.03);
|
|
840
|
+
border-color: rgba(0, 0, 0, 0.1);
|
|
841
|
+
}
|
|
842
|
+
|
|
843
|
+
/* User badge elements */
|
|
844
|
+
.mds-navbar-user-badge .user-name {
|
|
845
|
+
font-weight: var(--mds-typography-fontWeight-medium);
|
|
846
|
+
}
|
|
847
|
+
|
|
848
|
+
.mds-navbar-user-badge .user-separator {
|
|
849
|
+
opacity: 0.7;
|
|
850
|
+
}
|
|
851
|
+
|
|
852
|
+
.mds-navbar-user-badge .user-email {
|
|
853
|
+
opacity: 0.8;
|
|
854
|
+
}
|
|
855
|
+
|
|
597
856
|
/* Dark mode support (future) */
|
|
598
857
|
@media (prefers-color-scheme: dark) {
|
|
599
858
|
/* Enhanced styles for dark mode when implemented */
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@metropolle/design-system",
|
|
3
|
-
"version": "1.0.0-beta.2025.08.29.
|
|
3
|
+
"version": "1.0.0-beta.2025.08.29.1558.9969927",
|
|
4
4
|
"description": "Sistema de design unificado para a plataforma Metropolle",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/react/index.js",
|