🎨 Improve grade colors (#1901)

Author: KATO-Hiro

src/lib/components/GradeLabel.svelte

@@ -25,13 +25,23 @@
 
   let grade = $derived(getTaskGradeLabel(taskGrade));
   let gradeColor = $derived(getTaskGradeColor(taskGrade));
+
+  function addGradientIfNeeds(taskGrade: TaskGrade | string) {
+    if (taskGrade === TaskGrade.D6) {
+      const bronze =
+        'bg-gradient-to-br from-atcoder-D6 via-stone-600 to-amber-600 shadow-inner shadow shadow-amber-900/80 ring-2 ring-amber-300/50 text-amber-50 font-bold drop-shadow relative overflow-hidden';
+      return bronze;
+    }
+    return '';
+  }
+
+  let gradient = $derived(addGradientIfNeeds(taskGrade));
 </script>
 
-<div class="rounded-lg border-2 {toChangeBorderColorIfNeeds(grade)}">
+<div class="rounded-lg border-2 {toChangeBorderColorIfNeeds(grade)} {gradient ? 'shadow-md' : ''}">
   <div
-    class="p-{defaultPadding} w-{reducedWidth} xs:w-{defaultWidth} text-sm xs:text-{defaultTextSize} text-center rounded-md {toChangeTextColorIfNeeds(
-      grade,
-    )} {gradeColor}"
+    class="p-{defaultPadding} w-{reducedWidth} xs:w-{defaultWidth} text-sm xs:text-{defaultTextSize} text-center rounded-md
+    {gradient || toChangeTextColorIfNeeds(grade) + ' ' + gradeColor}"
   >
     {#if taskGrade !== TaskGrade.PENDING}
       {grade}

tailwind.config.ts

@@ -37,13 +37,13 @@ const config = {
           Q10: '#e3cad8',
           Q9: '#e4cde0',
           Q8: '#e4cbe8',
-          Q7: '#d0afd6',
+          Q7: '#ddbbe6',
           Q6: '#d9afe5',
           Q5: '#f7cc52',
           Q4: '#f1dd72',
-          Q3: '#c8e389',
-          Q2: '#97d093',
-          Q1: '#73d091',
+          Q3: '#cde030',
+          Q2: '#6dd452',
+          Q1: '#41c7ad',
           D1: '#1c85b6',
           D2: '#7f36be',
           D3: '#e68e2e',