ulivargas/classroomio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CLASSROOMIO-T-127: Theming configuration

Browse Source 
CLASSROOMIO-T-127: Add 4 themes configurations into the app

Clean up


Co-authored-by: Rotimi Best <rotimiibitoyeemma@gmail.com>


Merge-request: CLASSROOMIO-MR-51
Merged-by: Best Admin <best@digdippa.com>
This commit is contained in:
Rotimi Best
2023-08-20 19:08:48 +00:00
committed by Space Cloud
co-authored by Rotimi Best
parent 910d9c50a9
commit f39a0cee4b
75 changed files with 709 additions and 379 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app.postcss
+365 -4
View File
@@ -91,10 +91,371 @@ code {
fill: red;
}
.dark :global(svg.carbon-icon) {
fill: #fff;
}
@tailwind components;
@tailwind utilities;
/**
Rose Theme
*/
.theme-rose .bg-primary-50 {
background-color: #fff1f2;
}
.theme-rose .text-primary-50 {
color: #fff1f2;
}
.theme-rose .bg-primary-100 {
background-color: #ffe4e7;
}
.theme-rose .text-primary-100 {
color: #ffe4e7;
}
.theme-rose .bg-primary-200 {
background-color: #fecdd4;
}
.theme-rose .text-primary-200 {
color: #fecdd4;
}
.theme-rose .bg-primary-300 {
background-color: #fda4b2;
}
.theme-rose .text-primary-300 {
color: #fda4b2;
}
.theme-rose .bg-primary-400 {
background-color: #fb7189;
}
.theme-rose .text-primary-400 {
color: #fb7189;
}
.theme-rose .bg-primary-500 {
background-color: #f43f63;
}
.theme-rose .text-primary-500 {
color: #f43f63;
}
.theme-rose .bg-primary-600 {
background-color: #e21d4e;
}
.theme-rose .text-primary-600 {
color: #e21d4e;
}
.theme-rose .bg-primary-700 {
background-color: #be1241;
}
.theme-rose .text-primary-700 {
color: #be1241;
}
.theme-rose .bg-primary-800 {
background-color: #9f123d;
}
.theme-rose .text-primary-800 {
color: #9f123d;
}
.theme-rose .bg-primary-900 {
background-color: #88133a;
}
.theme-rose .text-primary-900 {
color: #88133a;
}
/**
Blue Theme
*/
.bg-primary-50 {
background-color: #eff6ff;
}
.text-primary-50 {
color: #eff6ff;
}
.bg-primary-100 {
background-color: #dbeafe;
}
.text-primary-100 {
color: #dbeafe;
}
.bg-primary-200 {
background-color: #bfdafe;
}
.text-primary-200 {
color: #bfdafe;
}
.bg-primary-300 {
background-color: #92c4fe;
}
.text-primary-300 {
color: #92c4fe;
}
.bg-primary-400 {
background-color: #5fa3fb;
}
.text-primary-400 {
color: #5fa3fb;
}
.bg-primary-500 {
background-color: #3a7ff7;
}
.text-primary-500 {
color: #3a7ff7;
}
.bg-primary-600 {
background-color: #2460ec;
}
.text-primary-600 {
color: #2460ec;
}
.bg-primary-700 {
background-color: #1d4ee2;
}
.text-primary-700 {
color: #1d4ee2;
}
.bg-primary-800 {
background-color: #1d3eb0;
}
.text-primary-800 {
color: #1d3eb0;
}
.bg-primary-900 {
background-color: #1d398b;
}
.text-primary-900 {
color: #1d398b;
}
/**
Green Theme
*/
.theme-green .bg-primary-50 {
background-color: #effef0;
}
.theme-green .text-primary-50 {
color: #effef0;
}
.theme-green .bg-primary-100 {
background-color: #d9ffdc;
}
.theme-green .text-primary-100 {
color: #d9ffdc;
}
.theme-green .bg-primary-200 {
background-color: #b6fcbc;
}
.theme-green .text-primary-200 {
color: #b6fcbc;
}
.theme-green .bg-primary-300 {
background-color: #7df88a;
}
.theme-green .text-primary-300 {
color: #7df88a;
}
.theme-green .bg-primary-400 {
background-color: #3deb51;
}
.theme-green .text-primary-400 {
color: #3deb51;
}
.theme-green .bg-primary-500 {
background-color: #12bf26;
}
.theme-green .text-primary-500 {
color: #12bf26;
}
.theme-green .bg-primary-600 {
background-color: #0aaf1d;
}
.theme-green .text-primary-600 {
color: #0aaf1d;
}
.theme-green .bg-primary-700 {
background-color: #0c891b;
}
.theme-green .text-primary-700 {
color: #0c891b;
}
.theme-green .bg-primary-800 {
background-color: #0f6c1b;
}
.theme-green .text-primary-800 {
color: #0f6c1b;
}
.theme-green .bg-primary-900 {
background-color: #0f581a;
}
.theme-green .text-primary-900 {
color: #0f581a;
}
/**
Orange Theme
*/
.theme-orange .bg-primary-50 {
background-color: #fff8ec;
}
.theme-orange .text-primary-50 {
color: #fff8ec;
}
.theme-orange .bg-primary-100 {
background-color: #fff0d3;
}
.theme-orange .text-primary-100 {
color: #fff0d3;
}
.theme-orange .bg-primary-200 {
background-color: #ffdca5;
}
.theme-orange .text-primary-200 {
color: #ffdca5;
}
.theme-orange .bg-primary-300 {
background-color: #ffc26d;
}
.theme-orange .text-primary-300 {
color: #ffc26d;
}
.theme-orange .bg-primary-400 {
background-color: #ff9d32;
}
.theme-orange .text-primary-400 {
color: #ff9d32;
}
.theme-orange .bg-primary-500 {
background-color: #ff7f0a;
}
.theme-orange .text-primary-500 {
color: #ff7f0a;
}
.theme-orange .bg-primary-600 {
background-color: #ff6600;
}
.theme-orange .text-primary-600 {
color: #ff6600;
}
.theme-orange .bg-primary-700 {
background-color: #cc4902;
}
.theme-orange .text-primary-700 {
color: #cc4902;
}
.theme-orange .bg-primary-800 {
background-color: #a1390b;
}
.theme-orange .text-primary-800 {
color: #a1390b;
}
.theme-orange .bg-primary-900 {
background-color: #82310c;
}
.theme-orange .text-primary-900 {
color: #82310c;
}
/**
Violet Theme
*/
.theme-violet .bg-primary-50 {
background-color: #fff2fe;
}
.theme-violet .text-primary-50 {
color: #fff2fe;
}
.theme-violet .bg-primary-100 {
background-color: #ffe3fe;
}
.theme-violet .text-primary-100 {
color: #ffe3fe;
}
.theme-violet .bg-primary-200 {
background-color: #ffc6fe;
}
.theme-violet .text-primary-200 {
color: #ffc6fe;
}
.theme-violet .bg-primary-300 {
background-color: #ff99f7;
}
.theme-violet .text-primary-300 {
color: #ff99f7;
}
.theme-violet .bg-primary-400 {
background-color: #ff5df2;
}
.theme-violet .text-primary-400 {
color: #ff5df2;
}
.theme-violet .bg-primary-500 {
background-color: #ff21f5;
}
.theme-violet .text-primary-500 {
color: #ff21f5;
}
.theme-violet .bg-primary-600 {
background-color: #fb00ff;
}
.theme-violet .text-primary-600 {
color: #fb00ff;
}
.theme-violet .bg-primary-700 {
background-color: #cf00ce;
}
.theme-violet .text-primary-700 {
color: #cf00ce;
}
.theme-violet .bg-primary-800 {
background-color: #a900a6;
}
.theme-violet .text-primary-800 {
color: #a900a6;
}
.theme-violet .bg-primary-900 {
background-color: #890684;
}
.theme-violet .text-primary-900 {
color: #890684;
}