@d34dman/flowdrop 0.0.1

package/dist/styles/base.css

@@ -0,0 +1,858 @@
+/* Base CSS with BEM syntax to replace Tailwind and DaisyUI */
+
+/* Reset and base styles */
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  overflow: hidden;
+}
+
+/* Layout utilities */
+.flowdrop-layout {
+  display: flex;
+  height: 100vh;
+  width: 100%;
+}
+
+.flowdrop-layout__main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.flowdrop-layout__sidebar {
+  width: 320px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+}
+
+/* Button styles */
+.flowdrop-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem 1rem;
+  border: 1px solid transparent;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  text-decoration: none;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  background-color: #ffffff;
+  color: #374151;
+  min-height: 2.5rem;
+}
+
+.flowdrop-btn:hover {
+  background-color: #f9fafb;
+  border-color: #d1d5db;
+}
+
+.flowdrop-btn:focus {
+  outline: 2px solid #3b82f6;
+  outline-offset: 2px;
+}
+
+.flowdrop-btn--primary {
+  background-color: #3b82f6;
+  color: #ffffff;
+  border-color: #3b82f6;
+}
+
+.flowdrop-btn--primary:hover {
+  background-color: #2563eb;
+  border-color: #2563eb;
+}
+
+.flowdrop-btn--secondary {
+  background-color: #6b7280;
+  color: #ffffff;
+  border-color: #6b7280;
+}
+
+.flowdrop-btn--secondary:hover {
+  background-color: #4b5563;
+  border-color: #4b5563;
+}
+
+.flowdrop-btn--outline {
+  background-color: transparent;
+  color: #374151;
+  border-color: #d1d5db;
+}
+
+.flowdrop-btn--outline:hover {
+  background-color: #f9fafb;
+  border-color: #9ca3af;
+}
+
+.flowdrop-btn--ghost {
+  background-color: transparent;
+  color: #374151;
+  border-color: transparent;
+}
+
+.flowdrop-btn--ghost:hover {
+  background-color: #f3f4f6;
+}
+
+.flowdrop-btn--sm {
+  padding: 0.375rem 0.75rem;
+  font-size: 0.75rem;
+  min-height: 2rem;
+}
+
+.flowdrop-btn--lg {
+  padding: 0.75rem 1.5rem;
+  font-size: 1rem;
+  min-height: 3rem;
+}
+
+/* Input styles */
+.flowdrop-input {
+  display: block;
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid #d1d5db;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: #111827;
+  background-color: #ffffff;
+  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+}
+
+.flowdrop-input:focus {
+  outline: none;
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+.flowdrop-input--sm {
+  padding: 0.375rem 0.5rem;
+  font-size: 0.75rem;
+}
+
+.flowdrop-input--lg {
+  padding: 0.75rem 1rem;
+  font-size: 1rem;
+}
+
+/* Card styles */
+.flowdrop-card {
+  background-color: #ffffff;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.5rem;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+}
+
+.flowdrop-card--compact {
+  padding: 0.5rem;
+}
+
+.flowdrop-card__body {
+  padding: 1rem;
+}
+
+.flowdrop-card__header {
+  padding: 1rem 1rem 0.5rem;
+  border-bottom: 1px solid #f3f4f6;
+}
+
+.flowdrop-card__footer {
+  padding: 0.5rem 1rem 1rem;
+  border-top: 1px solid #f3f4f6;
+}
+
+/* Badge styles */
+.flowdrop-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  border-radius: 0.375rem;
+  background-color: #f3f4f6;
+  color: #374151;
+}
+
+.flowdrop-badge--primary {
+  background-color: #dbeafe;
+  color: #1e40af;
+}
+
+.flowdrop-badge--secondary {
+  background-color: #e5e7eb;
+  color: #374151;
+}
+
+.flowdrop-badge--success {
+  background-color: #d1fae5;
+  color: #065f46;
+}
+
+.flowdrop-badge--warning {
+  background-color: #fef3c7;
+  color: #92400e;
+}
+
+.flowdrop-badge--error {
+  background-color: #fee2e2;
+  color: #991b1b;
+}
+
+/* Navbar styles */
+.flowdrop-navbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  background-color: #ffffff;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.flowdrop-navbar__start {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.flowdrop-navbar__center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+}
+
+.flowdrop-navbar__end {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+/* Join button group */
+.flowdrop-join {
+  display: inline-flex;
+  border-radius: 0.375rem;
+  overflow: hidden;
+}
+
+.flowdrop-join__item {
+  border-radius: 0;
+  border-right: 1px solid #d1d5db;
+}
+
+.flowdrop-join__item:first-child {
+  border-top-left-radius: 0.375rem;
+  border-bottom-left-radius: 0.375rem;
+}
+
+.flowdrop-join__item:last-child {
+  border-top-right-radius: 0.375rem;
+  border-bottom-right-radius: 0.375rem;
+  border-right: none;
+}
+
+/* Hero section */
+.flowdrop-hero {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100%;
+  padding: 2rem;
+}
+
+.flowdrop-hero__content {
+  text-align: center;
+  max-width: 28rem;
+}
+
+.flowdrop-hero__icon {
+  font-size: 3.75rem;
+  margin-bottom: 1rem;
+}
+
+.flowdrop-hero__title {
+  font-size: 1.125rem;
+  font-weight: 700;
+  margin-bottom: 0.5rem;
+  color: #111827;
+}
+
+.flowdrop-hero__description {
+  font-size: 0.875rem;
+  color: #6b7280;
+  margin-bottom: 1rem;
+}
+
+/* Divider */
+.flowdrop-divider {
+  display: flex;
+  align-items: center;
+  margin: 1rem 0;
+}
+
+.flowdrop-divider::before {
+  content: "";
+  flex: 1;
+  height: 1px;
+  background-color: #e5e7eb;
+}
+
+.flowdrop-divider__text {
+  padding: 0 0.75rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: #6b7280;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.flowdrop-divider::after {
+  content: "";
+  flex: 1;
+  height: 1px;
+  background-color: #e5e7eb;
+}
+
+/* Details/Summary */
+.flowdrop-details {
+  background-color: #ffffff;
+  border-radius: 0.5rem;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+}
+
+.flowdrop-details__summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.2s ease-in-out;
+}
+
+.flowdrop-details__summary:hover {
+  background-color: #f9fafb;
+}
+
+.flowdrop-details__content {
+  padding: 0.75rem;
+  padding-top: 0;
+}
+
+/* Loading spinner */
+.flowdrop-spinner {
+  display: inline-block;
+  width: 1rem;
+  height: 1rem;
+  border: 2px solid #e5e7eb;
+  border-top: 2px solid #3b82f6;
+  border-radius: 50%;
+  animation: flowdrop-spin 1s linear infinite;
+}
+
+.flowdrop-spinner--sm {
+  width: 0.75rem;
+  height: 0.75rem;
+  border-width: 1px;
+}
+
+.flowdrop-spinner--lg {
+  width: 1.5rem;
+  height: 1.5rem;
+  border-width: 3px;
+}
+
+@keyframes flowdrop-spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+/* Utility classes */
+.flowdrop-flex {
+  display: flex;
+}
+
+.flowdrop-flex--col {
+  flex-direction: column;
+}
+
+.flowdrop-flex--center {
+  align-items: center;
+  justify-content: center;
+}
+
+.flowdrop-flex--between {
+  justify-content: space-between;
+}
+
+.flowdrop-flex--1 {
+  flex: 1;
+}
+
+.flowdrop-gap--1 {
+  gap: 0.25rem;
+}
+
+.flowdrop-gap--2 {
+  gap: 0.5rem;
+}
+
+.flowdrop-gap--3 {
+  gap: 0.75rem;
+}
+
+.flowdrop-gap--4 {
+  gap: 1rem;
+}
+
+.flowdrop-p--1 {
+  padding: 0.25rem;
+}
+
+.flowdrop-p--2 {
+  padding: 0.5rem;
+}
+
+.flowdrop-p--3 {
+  padding: 0.75rem;
+}
+
+.flowdrop-p--4 {
+  padding: 1rem;
+}
+
+.flowdrop-m--0 {
+  margin: 0;
+}
+
+.flowdrop-mb--1 {
+  margin-bottom: 0.25rem;
+}
+
+.flowdrop-mb--2 {
+  margin-bottom: 0.5rem;
+}
+
+.flowdrop-mb--3 {
+  margin-bottom: 0.75rem;
+}
+
+.flowdrop-mb--4 {
+  margin-bottom: 1rem;
+}
+
+.flowdrop-text--xs {
+  font-size: 0.75rem;
+}
+
+.flowdrop-text--sm {
+  font-size: 0.875rem;
+}
+
+.flowdrop-text--lg {
+  font-size: 1.125rem;
+}
+
+.flowdrop-text--xl {
+  font-size: 1.25rem;
+}
+
+.flowdrop-font--bold {
+  font-weight: 700;
+}
+
+.flowdrop-font--medium {
+  font-weight: 500;
+}
+
+.flowdrop-text--center {
+  text-align: center;
+}
+
+.flowdrop-text--gray {
+  color: #6b7280;
+}
+
+.flowdrop-text--gray-dark {
+  color: #374151;
+}
+
+.flowdrop-bg--white {
+  background-color: #ffffff;
+}
+
+.flowdrop-bg--gray {
+  background-color: #f9fafb;
+}
+
+.flowdrop-bg--gray-light {
+  background-color: #f3f4f6;
+}
+
+.flowdrop-border {
+  border: 1px solid #e5e7eb;
+}
+
+.flowdrop-border--b {
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.flowdrop-border--t {
+  border-top: 1px solid #e5e7eb;
+}
+
+.flowdrop-border--r {
+  border-right: 1px solid #e5e7eb;
+}
+
+.flowdrop-rounded {
+  border-radius: 0.375rem;
+}
+
+.flowdrop-rounded--lg {
+  border-radius: 0.5rem;
+}
+
+.flowdrop-shadow {
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+}
+
+.flowdrop-shadow--lg {
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+}
+
+.flowdrop-w--full {
+  width: 100%;
+}
+
+.flowdrop-h--full {
+  height: 100%;
+}
+
+.flowdrop-min-h--0 {
+  min-height: 0;
+}
+
+.flowdrop-overflow--hidden {
+  overflow: hidden;
+}
+
+.flowdrop-overflow--auto {
+  overflow: auto;
+}
+
+.flowdrop-cursor--pointer {
+  cursor: pointer;
+}
+
+.flowdrop-cursor--grab {
+  cursor: grab;
+}
+
+.flowdrop-cursor--grabbing {
+  cursor: grabbing;
+}
+
+.flowdrop-transition {
+  transition: all 0.2s ease-in-out;
+}
+
+.flowdrop-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.flowdrop-opacity--70 {
+  opacity: 0.7;
+}
+
+.flowdrop-opacity--60 {
+  opacity: 0.6;
+}
+
+/* Responsive utilities */
+@media (min-width: 640px) {
+  .flowdrop-sm\\:flex {
+    display: flex;
+  }
+  
+  .flowdrop-sm\\:hidden {
+    display: none;
+  }
+}
+
+@media (min-width: 768px) {
+  .flowdrop-md\\:flex {
+    display: flex;
+  }
+  
+  .flowdrop-md\\:hidden {
+    display: none;
+  }
+}
+
+@media (min-width: 1024px) {
+  .flowdrop-lg\\:flex {
+    display: flex;
+  }
+  
+  .flowdrop-lg\\:hidden {
+    display: none;
+  }
+}
+
+/* Color system - Category colors */
+.flowdrop-color--primary {
+  background-color: #3b82f6;
+  color: #ffffff;
+}
+
+.flowdrop-color--primary-light {
+  background-color: #dbeafe;
+  color: #1e40af;
+}
+
+.flowdrop-color--primary-text {
+  color: #1e40af;
+}
+
+.flowdrop-color--primary-border {
+  border-color: #93c5fd;
+}
+
+.flowdrop-color--secondary {
+  background-color: #6b7280;
+  color: #ffffff;
+}
+
+.flowdrop-color--secondary-light {
+  background-color: #f3f4f6;
+  color: #374151;
+}
+
+.flowdrop-color--secondary-text {
+  color: #374151;
+}
+
+.flowdrop-color--secondary-border {
+  border-color: #d1d5db;
+}
+
+.flowdrop-color--success {
+  background-color: #10b981;
+  color: #ffffff;
+}
+
+.flowdrop-color--success-light {
+  background-color: #d1fae5;
+  color: #065f46;
+}
+
+.flowdrop-color--success-text {
+  color: #065f46;
+}
+
+.flowdrop-color--success-border {
+  border-color: #6ee7b7;
+}
+
+.flowdrop-color--warning {
+  background-color: #f59e0b;
+  color: #ffffff;
+}
+
+.flowdrop-color--warning-light {
+  background-color: #fef3c7;
+  color: #92400e;
+}
+
+.flowdrop-color--warning-text {
+  color: #92400e;
+}
+
+.flowdrop-color--warning-border {
+  border-color: #fbbf24;
+}
+
+.flowdrop-color--error {
+  background-color: #ef4444;
+  color: #ffffff;
+}
+
+.flowdrop-color--error-light {
+  background-color: #fee2e2;
+  color: #991b1b;
+}
+
+.flowdrop-color--error-text {
+  color: #991b1b;
+}
+
+.flowdrop-color--error-border {
+  border-color: #f87171;
+}
+
+.flowdrop-color--info {
+  background-color: #06b6d4;
+  color: #ffffff;
+}
+
+.flowdrop-color--info-light {
+  background-color: #cffafe;
+  color: #0e7490;
+}
+
+.flowdrop-color--info-text {
+  color: #0e7490;
+}
+
+.flowdrop-color--info-border {
+  border-color: #67e8f9;
+}
+
+.flowdrop-color--accent {
+  background-color: #8b5cf6;
+  color: #ffffff;
+}
+
+.flowdrop-color--accent-light {
+  background-color: #ede9fe;
+  color: #5b21b6;
+}
+
+.flowdrop-color--accent-text {
+  color: #5b21b6;
+}
+
+.flowdrop-color--accent-border {
+  border-color: #a78bfa;
+}
+
+.flowdrop-color--neutral {
+  background-color: #6b7280;
+  color: #ffffff;
+}
+
+.flowdrop-color--neutral-light {
+  background-color: #f9fafb;
+  color: #374151;
+}
+
+.flowdrop-color--neutral-text {
+  color: #374151;
+}
+
+.flowdrop-color--neutral-border {
+  border-color: #d1d5db;
+}
+
+.flowdrop-color--base {
+  background-color: #ffffff;
+  color: #111827;
+}
+
+.flowdrop-color--base-light {
+  background-color: #f9fafb;
+  color: #374151;
+}
+
+.flowdrop-color--base-text {
+  color: #111827;
+}
+
+.flowdrop-color--base-border {
+  border-color: #e5e7eb;
+}
+
+/* Data type colors for ports */
+.flowdrop-color--emerald {
+  background-color: #10b981;
+  color: #ffffff;
+}
+
+.flowdrop-color--blue {
+  background-color: #3b82f6;
+  color: #ffffff;
+}
+
+.flowdrop-color--purple {
+  background-color: #8b5cf6;
+  color: #ffffff;
+}
+
+.flowdrop-color--amber {
+  background-color: #f59e0b;
+  color: #ffffff;
+}
+
+.flowdrop-color--orange {
+  background-color: #f97316;
+  color: #ffffff;
+}
+
+.flowdrop-color--red {
+  background-color: #ef4444;
+  color: #ffffff;
+}
+
+.flowdrop-color--pink {
+  background-color: #ec4899;
+  color: #ffffff;
+}
+
+.flowdrop-color--indigo {
+  background-color: #6366f1;
+  color: #ffffff;
+}
+
+.flowdrop-color--teal {
+  background-color: #14b8a6;
+  color: #ffffff;
+}
+
+.flowdrop-color--cyan {
+  background-color: #06b6d4;
+  color: #ffffff;
+}
+
+.flowdrop-color--lime {
+  background-color: #84cc16;
+  color: #ffffff;
+}
+
+.flowdrop-color--slate {
+  background-color: #64748b;
+  color: #ffffff;
+}
+
+:root {
+  /* Reference tokens (Tailwind palette) */
+  --color-ref-emerald-500: #10b981;
+  --color-ref-blue-600: #2563eb;
+  --color-ref-amber-500: #f59e0b;
+  --color-ref-orange-500: #f97316;
+  --color-ref-red-500: #ef4444;
+  --color-ref-pink-500: #ec4899;
+  --color-ref-indigo-500: #6366f1;
+  --color-ref-teal-500: #14b8a6;
+  --color-ref-cyan-500: #06b6d4;
+  --color-ref-lime-500: #84cc16;
+  --color-ref-slate-500: #64748b;
+  --color-ref-purple-600: #8b5cf6;
+  /* Add more as needed */
+}