Split workspace into electron and ui packages

2025-11-17 12:06:58 +00:00
parent aa77ca2931
commit 89bd32814f
137 changed files with 407 additions and 1371 deletions
--- a/packages/ui/src/styles/utilities.css
+++ b/packages/ui/src/styles/utilities.css
@@ -0,0 +1,135 @@
+@import "./tokens.css";
+
+/* Reusable component utilities using tokens */
+
+/* Base token utility helpers */
+.text-primary {
+  color: var(--text-primary);
+}
+
+.text-secondary {
+  color: var(--text-secondary);
+}
+
+.text-muted {
+  color: var(--text-muted);
+}
+
+.text-inverted {
+  color: var(--text-inverted);
+}
+
+.text-accent {
+  color: var(--accent-primary);
+}
+
+.bg-surface-base {
+  background-color: var(--surface-base);
+}
+
+.bg-surface-secondary {
+  background-color: var(--surface-secondary);
+}
+
+.bg-surface-muted {
+  background-color: var(--surface-muted);
+}
+
+.border-base {
+  border-color: var(--border-base);
+}
+
+.icon-muted {
+  color: var(--text-muted);
+}
+
+.icon-accent {
+  color: var(--accent-primary);
+}
+
+.icon-danger-hover:hover {
+  color: var(--status-error);
+}
+
+.icon-accent-hover:hover {
+  color: var(--accent-primary);
+}
+
+.ring-accent-inset {
+  box-shadow: inset 0 0 0 2px var(--accent-primary);
+}
+
+/* Shared button + chip helpers */
+:is(.button-primary,
+    button.button-primary,
+    .button-secondary,
+    button.button-secondary,
+    .button-tertiary,
+    button.button-tertiary) {
+  @apply inline-flex items-center justify-center gap-2 font-medium transition-colors rounded-md;
+  border: 1px solid transparent;
+}
+
+:is(.button-primary,
+    button.button-primary,
+    .button-secondary,
+    button.button-secondary,
+    .button-tertiary,
+    button.button-tertiary):focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--focus-ring-offset), 0 0 0 4px var(--focus-ring-color);
+}
+
+:is(.button-primary,
+    button.button-primary,
+    .button-secondary,
+    button.button-secondary,
+    .button-tertiary,
+    button.button-tertiary):disabled {
+  @apply cursor-not-allowed opacity-50;
+}
+
+:is(.attachment-chip,
+    .neutral-badge,
+    .status-badge) {
+  @apply inline-flex items-center gap-1;
+  border-radius: var(--chip-radius);
+}
+
+/* Focus helpers */
+.focus-ring-accent:focus {
+  outline: none;
+  border-color: transparent;
+  box-shadow: 0 0 0 2px var(--accent-primary);
+}
+
+/* Shared animations */
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+@keyframes shimmer {
+  0%, 100% { opacity: 0.6; }
+  50% { opacity: 1; }
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+/* Shared layout helpers */
+.status-dot {
+  @apply w-1 h-1 rounded-full;
+}
+
+.kbd {
+  @apply inline-flex items-center gap-0.5 font-mono text-xs px-1.5 py-0.5 rounded;
+  background-color: var(--surface-secondary);
+  border: 1px solid var(--border-base);
+  color: var(--text-primary);
+}
+
+.kbd-separator {
+  @apply opacity-50;
+}