feat: add design system

2026-03-12 00:42:41 +02:00
parent fcb8dab8a0
commit 55bf63e215
93 changed files with 1647 additions and 86 deletions
--- a/src/components/atoms/Button/Button.module.css
+++ b/src/components/atoms/Button/Button.module.css
@@ -0,0 +1,85 @@
+@layer base {
+  .baseButton {
+    cursor: pointer;
+    border-radius: 9999px;
+    padding: 10px;
+
+    font-weight: 700;
+    font-size: 18px;
+    line-height: 18px;
+
+    width: fit-content;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 4px;
+
+    border-width: 0.7px;
+    border-style: solid;
+
+    text-shadow: 0px 1px 1px #00000059;
+    -webkit-text-stroke-width: 0.7px;
+
+    user-select: none;
+
+    &:disabled {
+      pointer-events: none;
+    }
+  }
+
+  .blueButton {
+    background: linear-gradient(180deg, #6cc3f1 0%, #3c6bbd 100%);
+    border-color: #012142;
+    box-shadow:
+      0px 3px 1px 1px #bfe9ff inset,
+      0px 2px 1px 1px #8ccef0 inset,
+      0px -3px 1px 1px #8fc9e966 inset,
+      0px -2px 1px 1px #29497f inset,
+      0px 1px 2px 0px #00000073;
+
+    color: #d9edff;
+    -webkit-text-stroke-color: #003a73;
+  }
+
+  .redButton {
+    background: linear-gradient(180deg, #f16c6c 0%, #a73030 100%);
+    border-color: #420101;
+    box-shadow:
+      0px 3px 1px 1px #ffbfbf inset,
+      0px 2px 1px 1px #f08c8c inset,
+      0px -3px 1px 1px #e98f8f66 inset,
+      0px -2px 1px 1px #7f2929 inset,
+      0px 1px 2px 0px #00000073;
+
+    color: #ffd9d9;
+    -webkit-text-stroke-color: #730000;
+  }
+
+  .greenButton {
+    background: linear-gradient(180deg, #5bdf5b 0%, #15812e 100%);
+    border-color: #00450a;
+    box-shadow:
+      0px 3px 1px 1px #9bff9f inset,
+      0px 2px 1px 1px #8cf08e inset,
+      0px -3px 1px 1px #8fe99b66 inset,
+      0px -2px 1px 1px #1d672d inset,
+      0px 1px 2px 0px #00000073;
+
+    color: #cdffd2;
+    -webkit-text-stroke-color: #007313;
+  }
+
+  .yellowButton {
+    background: linear-gradient(180deg, #ffbd42 0%, #e59a0f 100%);
+    border-color: #453100;
+    box-shadow:
+      0px 3px 1px 1px #ffefb2 inset,
+      0px 2px 1px 1px #ffe57b inset,
+      0px -3px 1px 1px #ffe9ab66 inset,
+      0px -2px 1px 1px #a88010 inset,
+      0px 1px 2px 0px #00000073;
+
+    color: #fffdcd;
+    -webkit-text-stroke-color: #735a00;
+  }
+}