CLASSROOMIO-T-127: Theming configuration
CLASSROOMIO-T-127: Add 4 themes configurations into the app Clean up Co-authored-by: Rotimi Best <[email protected]> Merge-request: CLASSROOMIO-MR-51 Merged-by: Best Admin <[email protected]>
This commit is contained in:
Rotimi Best
committed by
Space Cloud
Space Cloud
co-authored by
Rotimi Best
Rotimi Best
parent
910d9c50a9
commit
f39a0cee4b
+365
-4
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user