1- @import 'vsm.scss ' ;
1+ @import './ vsm.css ' ;
22
33@import 'primeicons/primeicons.css' ;
44
5- @layer tailwind-base, primevue, tailwind-utilities;
5+ @import "tailwindcss" ;
6+ @plugin "@tailwindcss/typography" ;
7+ @plugin "tailwindcss-primeui" ;
68
7- @layer tailwind-base {
8- @import 'tailwindcss/base' ;
9+ /*
10+ The default border color has changed to `currentColor` in Tailwind CSS v4,
11+ so we've added these compatibility styles to make sure everything still
12+ looks the same as it did with Tailwind CSS v3.
13+
14+ If we ever want to remove these styles, we need to add an explicit border
15+ color utility to any element that depends on these defaults.
16+ */
17+ @layer base {
18+ * ,
19+ ::after ,
20+ ::before ,
21+ ::backdrop ,
22+ ::file-selector-button {
23+ border-color : var (--color-gray-200 , currentColor);
24+ }
25+ }
26+
27+ @custom-variant dark (& : where (.dark , .dark *
28+
29+ /* Typography plugin */
30+ @utility prose {
31+ a {
32+ text-underline-offset : 0.2rem ;
33+ text-decoration : underline dashed;
34+ }
35+ }
36+
37+ @theme {
38+ --color- * : initial; /* ONLY use the following colours */
39+
40+ --color-gray-0 : # FFFFFF/* (White) */
41+ --color-gray-50 : # F3F3F3/* (N-50) */
42+ --color-gray-90 : # E9E9E9/* (N-55) */
43+ --color-gray-130 : # DEDEDE/* (N-65) */
44+ --color-gray-370 : # A1A1A1
45+ --color-gray-490 : # 828282
46+ --color-gray-510 : # 7D7D7D/* (N-200) */
47+ --color-gray-620 : # 616161/* (N-400) */
48+ --color-gray-780 : # 383838/* (D-100) */
49+ --color-gray-840 : # 292929/* (D-400) */
50+ --color-gray-870 : # 222222/* (N-670) */
51+ --color-gray-880 : # 1E1E1E/* (D-800) */
52+ --color-gray-930 : # 121212/* (D-900) */
53+
54+ --color-teal-DEFAULT : # 004C4C
55+ --color-teal-450 : # 61B8AB/* (DG-600) */
56+ --color-teal-500 : # 4FB0A1/* (DG-670) */
57+ --color-teal-550 : # 489F92/* (DG-500) */
58+ --color-teal-850 : # 004C4C/* (G-500) */
59+ --color-teal-890 : # 003737/* (G-600) */
60+ --color-teal-920 : # 002929/* (G-670) */
61+
62+ --color-yellow-DEFAULT : # FFD200
63+ --color-yellow-500 : # FFD200/* (Y-300) */
64+ --color-yellow-520 : # F3C000/* (Y-400) */
65+ --color-yellow-550 : # E5B400/* (Y-500) */
66+ --color-yellow-570 : # D9AA00/* (DY-500) */
67+
68+ --color-blue-70 : # E3F0F7/* (I-50) */
69+ --color-blue-350 : # 5AB8F2/* (DI-500) */
70+ --color-blue-660 : # 005CDE/* (I-500) */
71+ --color-blue-840 : # 1B2C36/* (DI-50) */
72+
73+ --color-green-70 : # E4F5EB/* (S-50) */
74+ --color-green-570 : # 75B12B/* (DS-500) */
75+ --color-green-750 : # 007F42/* (S-500) */
76+ --color-green-840 : # 232E23/* (DS-50) */
77+
78+ --color-red-60 : # FAE8E6/* (A-50) */
79+ --color-red-300 : # DF9186/* (DA-500) */
80+ --color-red-350 : # E0796B/* (DA-600) */
81+ --color-red-400 : # E45F4E/* (DA-700) */
82+ --color-red-620 : # C21700/* (A-500) */
83+ --color-red-750 : # B51500/* (A-600) */
84+ --color-red-770 : # A81400/* (A-700) */
85+ --color-red-840 : # 341D1D/* (DA-50) */
86+
87+ --color-grayOpacity-0 : # FFFFFFBF
88+ --color-grayOpacity-50 : # F3F3F3BF
89+ --color-grayOpacity-880 : # 1E1E1EBF
90+ --color-grayOpacity-930 : # 121212BF
91+ --color-grayOpacity-1000 : # 000000B3
92+
93+ --color-sky-50 : # f0f9ff
94+ --color-sky-100 : # e0f2fe
95+ --color-sky-200 : # bae6fd
96+ --color-sky-300 : # 7dd3fc
97+ --color-sky-400 : # 38bdf8
98+ --color-sky-500 : # 0ea5e9
99+ --color-sky-600 : # 0284c7
100+ --color-sky-700 : # 0369a1
101+ --color-sky-800 : # 075985
102+ --color-sky-900 : # 0c4a6e
103+ --color-sky-950 : # 082f49
104+
105+ --text-2xs : 0.65rem ;
106+ --text-2xs--line-height : 0.8rem ;
107+ --text-3xs : 0.55rem ;
108+ --text-3xs--line-height : 0.7rem ;
109+
110+ /* landingIntroPopIn: 'popIn 2s forwards ease-in-out', */
111+ --animate-landingIntroFadeOut : fadeOut 2s 2s forwards ease-in-out; /* delayed by 2s */
112+ /* landingSlidesPopIn: 'popIn 2s 3s forwards ease-in-out', // delayed by 3s
113+ landingEnterPopIn: 'zoomIn 2s 4s forwards ease-in-out', // delayed by 4s
114+ landingAnimateDown: 'animateDown 1s 3.1s forwards ease-in-out',
115+ landingAnimateUp: 'animateUp 1s 3.1s forwards ease-in-out',
116+ delayedFadeOut: 'fadeOut 2s 2s forwards ease-in-out',
117+ pulseTo0: 'pulseTo0 2s infinite', */
9118}
10119
11- @layer tailwind-utilities {
12- @import 'tailwindcss/components' ;
13- @import 'tailwindcss/utilities' ;
120+ @keyframes fadeOut {
121+ 0% {
122+ opacity : 1 ;
123+ }
124+ 100% {
125+ opacity : 0 ;
126+ }
14127}
15128
16129html {
17- font-family : sans-serif;
18- line-height : 1.15 ;
130+ font-family : sans-serif;
131+ line-height : 1.15 ;
19132}
20133
21134# app {
22- font-family : Avenir, Helvetica, Arial, sans-serif;
23- -webkit-font-smoothing : antialiased;
24- -moz-osx-font-smoothing : grayscale;
25- text-align : center;
26- color : # 2c3e50
27- min-height : 100svh ;
135+ font-family : Avenir, Helvetica, Arial, sans-serif;
136+ -webkit-font-smoothing : antialiased;
137+ -moz-osx-font-smoothing : grayscale;
138+ text-align : center;
139+ min-height : 100svh ;
28140}
29141
30142body .dark {
31- background : var (--p-surface-900 );
143+ background : var (--p-surface-900 );
32144}
33145
34146.rtl {
35- direction : rtl;
36- max-width : 70ch ;
147+ direction : rtl;
148+ max-width : 70ch ;
37149}
38150
39151h1 , h2 , h3 , h4 , h5 {
40- color : var (--p-primary-850 )
152+ color : var (--p-primary-850 )
41153}
42154
43155.dark h1 , .dark h2 , .dark h3 , .dark h4 , .dark h5 {
44- color : var (--p-primary-550 )
156+ color : var (--p-primary-550 )
45157}
0 commit comments