Use factorized colors.

2022-03-06 14:35:49 +01:00
parent a08f92c84c
commit ba11f17531
4 changed files with 24 additions and 10 deletions
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -5,6 +5,7 @@
  --primary-border: #ccc;
  --primary-hover: #eee;
  --secondary: #dddddd;
+  --secondary-hover: #c9c9c9;
  --secondaryBorder: #cccccc;

  --disabled: #eee;
@@ -84,7 +85,6 @@ button {
      min-width: 1rem;
      min-height: 1rem;
      padding: 0;
-      background-color: inherit;
  }

  &.raised {
@@ -96,6 +96,22 @@ button {

  &.stroked {
    border-color: var(--primary-border);
+
+    &.primary {
+      background-color: var(--primary);
+
+      &:hover {
+        background-color: var(--primary-hover);
+      }
+    }
+    
+    &.secondary {
+      background-color: var(--secondary);
+
+      &:hover {
+        background-color: var(--secondary-hover)
+      }
+    }
  }

  &.alert {