Initial ui-kit: Button, дизайн-токены, сборка Vite, Storybook

2026-08-13 12:33:41 +05:00
commit c12c5b591b
18 changed files with 6709 additions and 0 deletions
@@ -0,0 +1,87 @@
+@import "../tokens/tokens";
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  padding: 10px 20px;
+  border: 1px solid transparent;
+  border-radius: $r-sm;
+  font-family: $font-sans;
+  font-size: 13px;
+  font-weight: 500;
+  letter-spacing: 0.15px;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: 0.18s;
+
+  &:disabled {
+    opacity: 0.55;
+    cursor: default;
+    pointer-events: none;
+  }
+}
+
+.sm {
+  padding: 7px 14px;
+  font-size: 12.5px;
+}
+
+.full {
+  width: 100%;
+}
+
+.primary {
+  background: $navy-800;
+  border-color: $navy-800;
+  color: #fff;
+
+  &:hover {
+    background: $navy-700;
+    box-shadow: $sh-2;
+  }
+}
+
+.accent {
+  background: $grad-gold;
+  border-color: $gold-500;
+  color: $navy-950;
+  font-weight: 600;
+
+  &:hover {
+    box-shadow: $sh-gold;
+    transform: translateY(-1px);
+  }
+}
+
+.secondary {
+  background: $white;
+  border-color: $gray-300;
+  color: $navy-800;
+
+  &:hover {
+    border-color: $gold-500;
+    color: $navy-900;
+  }
+}
+
+.ghost {
+  background: transparent;
+  color: $navy-700;
+
+  &:hover {
+    background: $navy-100;
+  }
+}
+
+.danger {
+  background: $white;
+  border-color: $gray-300;
+  color: $red-500;
+
+  &:hover {
+    border-color: $red-500;
+    background: $red-50;
+  }
+}