add typography to discord button; add discord theme

libs/openchallenges/ui/src/_lib-theme.scss

@@ -6,6 +6,7 @@
 @use './lib/organization-card/organization-card-theme' as organization-card;
 @use './lib/paginator/paginator-theme' as paginator;
 @use './lib/person-card/person-card-theme' as person-card;
+@use './lib/discord-button/discord-button-theme' as discord-button;
 
 @mixin theme($theme) {
   @include button-github.theme($theme);
@@ -16,4 +17,5 @@
   @include organization-card.theme($theme);
   @include paginator.theme($theme);
   @include person-card.theme($theme);
+  @include discord-button.theme($theme);
 }

libs/openchallenges/ui/src/lib/discord-button/_discord-button-theme.scss

@@ -6,13 +6,16 @@
   $primary: map.get($config, primary);
   $accent: map.get($config, accent);
   $warn: map.get($config, warn);
-  $background: map.get($config, background);
-  $foreground: map.get($config, foreground);
 
   // add color-related scss here
+  .docs-button {
+    color: white !important;
+  }
 }
 
-@mixin typography($theme) {}
+@mixin typography($theme) {
+  $typography-config: mat.get-typography-config($theme);
+}
 
 @mixin theme($theme) {
   $color-config: mat.get-color-config($theme);

libs/openchallenges/ui/src/lib/discord-button/discord-button.component.html

@@ -1,15 +1,17 @@
-<a
-  mat-button
-  class="docs-button"
-  [href]="href"
-  aria-label="OpenChallenges Discord server"
-  target="_blank"
-  rel="noreferrer"
->
-  <img
-    alt="OpenChallenges Discord server"
-    class="discord-logo"
-    src="/openchallenges-assets/images/discord-icon.svg"
-  />
-  {{ label }}
-</a>
+<div class="mat-typography">
+  <a
+    mat-button
+    class="docs-button"
+    [href]="href"
+    aria-label="OpenChallenges Discord server"
+    target="_blank"
+    rel="noreferrer"
+  >
+    <img
+      alt="OpenChallenges Discord server"
+      class="discord-logo"
+      src="/openchallenges-assets/images/discord-icon.svg"
+    />
+    {{ label }}
+  </a>
+</div>