fix: theme & user dropdown

apps/course/src/lib/navigators/NavUser.svelte

@@ -87,7 +87,7 @@
             <a on:click="{onlineDrawerOpen}">
               <Icon type="listOnline" />
               <div class="ml-2">
-                View <span class="badge bg-warning-500 text-white">{$studentsOnline}</span> Online
+                View <span class="badge bg-error-500 text-white">{$studentsOnline}</span> Online
               </div>
             </a>
           </li>

packages/tutors-ui/lib/themes/dyslexia.css

@@ -1,64 +1,111 @@
 @import url("https://cdn.jsdelivr.net/npm/open-dyslexic@1.0.3/otf/OpenDyslexic-Regular.otf");
 
 :root {
-  --theme-border-base: 0px;
+  /* =~= Theme Properties =~= */
   --theme-font-family-heading: "OpenDyslexic", sans-serif;
   --theme-font-family-base: "OpenDyslexic", sans-serif;
   --theme-font-color-base: var(--color-primary-900);
   --theme-font-color-dark: var(--color-primary-200);
+  --theme-rounded-base: 8px;
+  --theme-rounded-container: 8px;
+  --theme-border-base: 1px;
+  /* =~= Theme On-X Colors =~= */
+  --on-primary: 255 255 255;
+  --on-secondary: 255 255 255;
+  --on-tertiary: 255 255 255;
+  --on-success: 255 255 255;
+  --on-warning: 255 255 255;
+  --on-error: 255 255 255;
+  --on-surface: 255 255 255;
+  /* =~= Theme Colors  =~= */
+  /* primary | #37919b */
+--color-primary-50: 225 239 240; /* ⬅ #e1eff0 */
+--color-primary-100: 215 233 235; /* ⬅ #d7e9eb */
+--color-primary-200: 205 228 230; /* ⬅ #cde4e6 */
+--color-primary-300: 175 211 215; /* ⬅ #afd3d7 */
+--color-primary-400: 115 178 185; /* ⬅ #73b2b9 */
+--color-primary-500: 55 145 155; /* ⬅ #37919b */
+--color-primary-600: 50 131 140; /* ⬅ #32838c */
+--color-primary-700: 41 109 116; /* ⬅ #296d74 */
+--color-primary-800: 33 87 93; /* ⬅ #21575d */
+--color-primary-900: 27 71 76; /* ⬅ #1b474c */
+/* secondary | #3dae81 */
+--color-secondary-50: 226 243 236; /* ⬅ #e2f3ec */
+--color-secondary-100: 216 239 230; /* ⬅ #d8efe6 */
+--color-secondary-200: 207 235 224; /* ⬅ #cfebe0 */
+--color-secondary-300: 177 223 205; /* ⬅ #b1dfcd */
+--color-secondary-400: 119 198 167; /* ⬅ #77c6a7 */
+--color-secondary-500: 61 174 129; /* ⬅ #3dae81 */
+--color-secondary-600: 55 157 116; /* ⬅ #379d74 */
+--color-secondary-700: 46 131 97; /* ⬅ #2e8361 */
+--color-secondary-800: 37 104 77; /* ⬅ #25684d */
+--color-secondary-900: 30 85 63; /* ⬅ #1e553f */
+/* tertiary | #e2ac08 */
+--color-tertiary-50: 251 243 218; /* ⬅ #fbf3da */
+--color-tertiary-100: 249 238 206; /* ⬅ #f9eece */
+--color-tertiary-200: 248 234 193; /* ⬅ #f8eac1 */
+--color-tertiary-300: 243 222 156; /* ⬅ #f3de9c */
+--color-tertiary-400: 235 197 82; /* ⬅ #ebc552 */
+--color-tertiary-500: 226 172 8; /* ⬅ #e2ac08 */
+--color-tertiary-600: 203 155 7; /* ⬅ #cb9b07 */
+--color-tertiary-700: 170 129 6; /* ⬅ #aa8106 */
+--color-tertiary-800: 136 103 5; /* ⬅ #886705 */
+--color-tertiary-900: 111 84 4; /* ⬅ #6f5404 */
+/* success | #3dae81 */
+--color-success-50: 226 243 236; /* ⬅ #e2f3ec */
+--color-success-100: 216 239 230; /* ⬅ #d8efe6 */
+--color-success-200: 207 235 224; /* ⬅ #cfebe0 */
+--color-success-300: 177 223 205; /* ⬅ #b1dfcd */
+--color-success-400: 119 198 167; /* ⬅ #77c6a7 */
+--color-success-500: 61 174 129; /* ⬅ #3dae81 */
+--color-success-600: 55 157 116; /* ⬅ #379d74 */
+--color-success-700: 46 131 97; /* ⬅ #2e8361 */
+--color-success-800: 37 104 77; /* ⬅ #25684d */
+--color-success-900: 30 85 63; /* ⬅ #1e553f */
+/* warning | #e2ac08 */
+--color-warning-50: 251 243 218; /* ⬅ #fbf3da */
+--color-warning-100: 249 238 206; /* ⬅ #f9eece */
+--color-warning-200: 248 234 193; /* ⬅ #f8eac1 */
+--color-warning-300: 243 222 156; /* ⬅ #f3de9c */
+--color-warning-400: 235 197 82; /* ⬅ #ebc552 */
+--color-warning-500: 226 172 8; /* ⬅ #e2ac08 */
+--color-warning-600: 203 155 7; /* ⬅ #cb9b07 */
+--color-warning-700: 170 129 6; /* ⬅ #aa8106 */
+--color-warning-800: 136 103 5; /* ⬅ #886705 */
+--color-warning-900: 111 84 4; /* ⬅ #6f5404 */
+/* error | #de0d30 */
+--color-error-50: 250 219 224; /* ⬅ #fadbe0 */
+--color-error-100: 248 207 214; /* ⬅ #f8cfd6 */
+--color-error-200: 247 195 203; /* ⬅ #f7c3cb */
+--color-error-300: 242 158 172; /* ⬅ #f29eac */
+--color-error-400: 232 86 110; /* ⬅ #e8566e */
+--color-error-500: 222 13 48; /* ⬅ #de0d30 */
+--color-error-600: 200 12 43; /* ⬅ #c80c2b */
+--color-error-700: 167 10 36; /* ⬅ #a70a24 */
+--color-error-800: 133 8 29; /* ⬅ #85081d */
+--color-error-900: 109 6 24; /* ⬅ #6d0618 */
+/* surface | #2a2e37 */
 
-  --color-primary-50: 232 246 247;
-  --color-primary-100: 210 236 239;
-  --color-primary-200: 165 217 223;
-  --color-primary-300: 123 200 208;
-  --color-primary-400: 78 181 192;
-  --color-primary-500: 55 145 155;
-  --color-primary-600: 44 116 124;
-  --color-primary-700: 33 88 94;
-  --color-primary-800: 21 56 60;
-  --color-primary-900: 11 28 30;
+--color-surface-50: 252 252 248;
+--color-surface-100: 248 248 236;
+--color-surface-200: 241 241 218;
+--color-surface-300: 230 230 188;
+--color-surface-400: 205 205 121;
+--color-surface-500: 171 171 63;
+--color-surface-600: 123 123 45;
+--color-surface-700: 89 89 33;
+--color-surface-800: 52 52 19;
+--color-surface-900: 26 26 10;
 
-  --color-accent-50: 247 252 250;
-  --color-accent-100: 236 248 243;
-  --color-accent-200: 217 242 232;
-  --color-accent-300: 187 231 214;
-  --color-accent-400: 119 207 172;
-  --color-accent-500: 61 174 129;
-  --color-accent-600: 44 125 92;
-  --color-accent-700: 32 91 67;
-  --color-accent-800: 19 53 39;
-  --color-accent-900: 9 26 20;
+}
 
-  --color-tertiary-50: 255 252 245;
-  --color-tertiary-100: 254 248 230;
-  --color-tertiary-200: 253 241 206;
-  --color-tertiary-300: 252 230 166;
-  --color-tertiary-400: 249 206 78;
-  --color-tertiary-500: 226 172 8;
-  --color-tertiary-600: 162 123 6;
-  --color-tertiary-700: 118 90 4;
-  --color-tertiary-800: 69 52 2;
-  --color-tertiary-900: 34 26 1;
+[data-theme="tutors"] h1,
+[data-theme="tutors"] h2,
+[data-theme="tutors"] h3,
+[data-theme="tutors"] h4,
+[data-theme="tutors"] h5,
+[data-theme="tutors"] h6 {
+  font-weight: bold;
+}
 
-  --color-warning-50: 254 245 247;
-  --color-warning-100: 254 231 235;
-  --color-warning-200: 252 207 214;
-  --color-warning-300: 250 168 182;
-  --color-warning-400: 245 81 109;
-  --color-warning-500: 222 13 48;
-  --color-warning-600: 159 9 34;
-  --color-warning-700: 116 7 25;
-  --color-warning-800: 67 4 15;
-  --color-warning-900: 34 2 7;
 
-  --color-surface-50: 252 252 248;
-  --color-surface-100: 248 248 236;
-  --color-surface-200: 241 241 218;
-  --color-surface-300: 230 230 188;
-  --color-surface-400: 205 205 121;
-  --color-surface-500: 171 171 63;
-  --color-surface-600: 123 123 45;
-  --color-surface-700: 89 89 33;
-  --color-surface-800: 52 52 19;
-  --color-surface-900: 26 26 10;
-}