feat: overwrite quiz colors with primer colors

- using mixings to avoid duplication
scout-ch · Oct 18, 2023 · 43fabe2 · 43fabe2
1 parent c7ace99
commit 43fabe2
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 13 deletions.
diff --git a/src/styles/quiz.scss b/src/styles/quiz.scss
@@ -36,10 +36,8 @@
   .btn {
     font-weight: unset !important;
     font-size: unset !important;
-    border-color: var(--borderColor-muted, var(--color-border-muted)) !important;
-    border-radius: 6px !important;
-    margin-right: 0.5em;
-    margin-left: 0.5em;
+    @include default-border;
+    padding: var(--base-size-8, 8px) !important;
     &:disabled {
       cursor: not-allowed;
       opacity: 0.6;
@@ -49,34 +47,35 @@
     }
     &:not(.incorrect):not(.correct) {
       @include default-color();
-      background-color: var(--bgColor-default, var(--color-bg-default))  !important;
     }
   }
-  .startQuizBtn {
-    @include default-color();
-    background-color: var(--bgColor-default, var(--color-bg-default))  !important;
-  }
-
   .answerBtn {
+    min-width: 52px;
     width: unset !important;
     > span {
       font-size: unset;
     }
   }
 
+  .correct {
+    cursor: not-allowed !important;
+    pointer-events: none;
+    opacity: 0.6;
+    @include primer-success-emphasis;
+  }
   .incorrect {
     cursor: not-allowed !important;
     pointer-events: none;
     opacity: 0.6;
+    @include primer-danger-emphasis;
   }
 
   .tag-container {
     *:not(.number-of-selection) {
       display: none;
     }
     .number-of-selection {
-      color: var(--fgColor-on-emphasis, var(--color-fg-on-emphasis)) !important;
-      background-color: var(--bgColor-emphasis, var(--color-accent-emphasis)) !important;
+      @include primer-open;
     }
   }
 

diff --git a/src/styles/utilities.scss b/src/styles/utilities.scss
@@ -157,10 +157,41 @@ textarea {
 }
 @mixin default-border {
   border: var(--borderWidth-thin, 1px) solid var(--borderColor-default, var(--color-border-default)) !important;
-  border-radius: 6px;
+  border-radius: 6px !important;
 }
 
 @mixin default-style {
   @include default-color();
   @include default-border();
+}
+
+@mixin primer-open {
+  @include default-border();
+  color: var(--fgColor-done, var(--color-done-fg)) !important;
+  background-color: var(--bgColor-done-subtle, var(--color-done-subtle)) !important;
+  border-color: var(--borderColor-done-muted, var(--color-done-muted)) !important;
+}
+@mixin primer-success {
+  @include default-border();
+  color: var(--fgColor-success, var(--color-success-fg)) !important;
+  background-color: var(--bgColor-success-subtle, var(--color-success-subtle)) !important;
+  border-color: var(--borderColor-success-muted, var(--color-success-muted)) !important;
+}
+@mixin primer-success-emphasis {
+  @include default-border();
+  color: var(--fgColor-success, var(--color-success-fg)) !important;
+  background-color: var(--bgColor-success-subtle, var(--color-success-subtle)) !important;
+  border-color: var(--borderColor-success-emphasis, var(--color-success-emphasis)) !important;
+}
+@mixin primer-danger {
+  @include default-border();
+  color: var(--fgColor-danger, var(--color-danger-fg)) !important;
+  background-color: var(--bgColor-danger-subtle, var(--color-danger-subtle)) !important;
+  border-color: var(--borderColor-danger-muted, var(--color-danger-muted)) !important;
+}
+@mixin primer-danger-emphasis {
+  @include default-border();
+  color: var(--fgColor-danger, var(--color-danger-fg)) !important;
+  background-color: var(--bgColor-danger-subtle, var(--color-danger-subtle)) !important;
+  border-color: var(--borderColor-danger-emphasis, var(--color-danger-emphasis)) !important;
 }