refactor: extract reusable library

- move reusable domain, data, state, ui code into src/lib - update host screens to consume new library exports - document architecture and configure path aliases - bump astro integration dependencies for compatibility Refs #30
2025-11-13 10:41:55 +01:00
parent 99be99d120
commit 8a46a8a019
77 changed files with 2240 additions and 1035 deletions
@@ -0,0 +1,134 @@
+/* Use CSS custom properties from global design system */
+.button {
+  border: none;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  font-weight: 600;
+  transition: var(--transition-base);
+  touch-action: manipulation;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-sm);
+  text-decoration: none;
+  user-select: none;
+  font-family: inherit;
+  position: relative;
+  overflow: hidden;
+}
+
+.button::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
+  transform: translateX(-100%);
+  transition: transform 0.3s ease;
+}
+
+.button:hover::before {
+  transform: translateX(100%);
+}
+
+.button:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
+.button:active {
+  transform: translateY(1px);
+}
+
+/* Variants */
+.primary {
+  background: var(--color-primary);
+  color: white;
+  box-shadow: var(--shadow-md);
+}
+
+.primary:hover:not(.disabled) {
+  background: var(--color-primary-hover);
+  box-shadow: var(--shadow-lg);
+  transform: translateY(-1px);
+}
+
+.secondary {
+  background: var(--color-secondary);
+  color: var(--color-text);
+  box-shadow: var(--shadow-sm);
+}
+
+.secondary:hover:not(.disabled) {
+  background: var(--color-secondary-hover);
+  box-shadow: var(--shadow-md);
+  transform: translateY(-1px);
+}
+
+.danger {
+  background: var(--color-danger);
+  color: white;
+  box-shadow: var(--shadow-md);
+}
+
+.danger:hover:not(.disabled) {
+  background: #ef5350;
+  box-shadow: var(--shadow-lg);
+  transform: translateY(-1px);
+}
+
+/* Sizes with improved touch targets for tablets */
+.small {
+  padding: var(--space-sm) var(--space-md);
+  font-size: var(--font-size-sm);
+  min-height: var(--touch-target-min);
+  border-radius: var(--radius-sm);
+}
+
+.medium {
+  padding: var(--space-md) var(--space-lg);
+  font-size: var(--font-size-base);
+  min-height: var(--touch-target-comfortable);
+  border-radius: var(--radius-md);
+}
+
+.large {
+  padding: var(--space-lg) var(--space-xl);
+  font-size: var(--font-size-lg);
+  min-height: 56px;
+  border-radius: var(--radius-lg);
+}
+
+/* Tablet-specific size adjustments */
+@media (min-width: 768px) and (max-width: 1024px) {
+  .small {
+    min-height: var(--touch-target-comfortable);
+    padding: var(--space-md) var(--space-lg);
+    font-size: var(--font-size-base);
+  }
+  
+  .medium {
+    min-height: var(--touch-target-comfortable);
+    padding: var(--space-lg) var(--space-xl);
+    font-size: var(--font-size-lg);
+  }
+  
+  .large {
+    min-height: 64px;
+    padding: var(--space-xl) var(--space-xxl);
+    font-size: var(--font-size-xl);
+  }
+}
+
+/* States */
+.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none !important;
+}
+
+.disabled:hover::before {
+  transform: translateX(-100%);
+}