managarten/packages/shared-tailwind/src/components.css

/* Shared Component Styles for Mana Apps
 * Import this in your app.css: @import '@mana/shared-tailwind/components.css';
 *
 * Requires theme-variables.css to be imported first for CSS variable support
 */

body {
  margin: 0;
  font-family: var(--font-body);
}

html {
  margin: 0;
  padding: 0;
}

@layer base {
  h1 {
    @apply text-3xl font-bold;
    color: var(--color-text);
  }
  h2 {
    @apply text-2xl font-semibold;
    color: var(--color-text);
  }
  h3 {
    @apply text-xl font-semibold;
    color: var(--color-text);
  }
}

@layer components {
  .btn-primary {
    @apply rounded-lg px-4 py-2 font-semibold transition-colors;
    background-color: var(--color-primary-button);
    color: var(--color-primary-button-text);
  }

  .btn-primary:hover {
    opacity: 0.9;
  }

  .btn-secondary {
    @apply rounded-lg px-4 py-2 font-semibold transition-colors;
    background-color: var(--color-secondary-button);
    color: var(--color-text);
    border: 1px solid var(--color-border);
  }

  .btn-secondary:hover {
    background-color: var(--color-content-bg-hover);
  }

  .btn-danger {
    @apply rounded-lg px-4 py-2 font-semibold transition-colors;
    background-color: var(--color-error);
    color: #ffffff;
  }

  .btn-danger:hover {
    opacity: 0.9;
  }

  .input-field {
    @apply w-full rounded-lg px-4 py-2 transition-colors;
    background-color: var(--color-content-bg);
    color: var(--color-text);
    border: 1px solid var(--color-border);
  }

  .input-field:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
  }

  .card {
    @apply rounded-lg p-6 shadow-sm;
    background-color: var(--color-content-bg);
    color: var(--color-text);
  }

  /* Header & Navigation */
  .header-style {
    background-color: var(--color-menu-bg);
    border-bottom: 1px solid var(--color-border);
  }

  .logo-text {
    @apply text-2xl font-bold;
    color: var(--color-primary);
  }

  .nav-link {
    @apply transition-colors;
    color: var(--color-text);
  }

  .nav-link:hover {
    color: var(--color-primary);
  }

  .user-email {
    @apply text-sm;
    color: var(--color-text);
    opacity: 0.7;
  }

  /* Main Content Area */
  .main-content {
    background-color: var(--color-page-bg);
  }

  /* Selected/Active State */
  .bg-selected {
    background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
  }

  /* Status Badge Colors */
  .status-completed {
    background-color: rgba(76, 175, 80, 0.15);
    color: #4caf50;
  }

  .status-processing {
    background-color: color-mix(in srgb, var(--color-primary) 15%, transparent);
    color: var(--color-primary);
  }

  .status-failed {
    background-color: color-mix(in srgb, var(--color-error) 15%, transparent);
    color: var(--color-error);
  }

  .status-default {
    background-color: color-mix(in srgb, var(--color-text) 10%, transparent);
    color: var(--color-text);
  }

  /* Info/Alert Boxes */
  .info-box {
    background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
  }

  /* Loading Spinner */
  .spinner-border {
    border-color: var(--color-primary);
  }

  /* Focus Ring */
  .focus\:ring-primary:focus {
    --tw-ring-color: var(--color-primary);
  }

  .focus\:ring-2:focus {
    box-shadow: 0 0 0 2px var(--tw-ring-color, var(--color-primary));
  }
}

@layer utilities {
  /* Theme Color Utilities - in utilities layer for @apply support */
  .bg-content {
    background-color: var(--color-content-bg);
  }

  .bg-content-hover {
    background-color: var(--color-content-bg-hover);
  }

  .hover\:bg-content-hover:hover {
    background-color: var(--color-content-bg-hover);
  }

  .bg-menu {
    background-color: var(--color-menu-bg);
  }

  .bg-menu-hover {
    background-color: var(--color-menu-bg-hover);
  }

  .hover\:bg-menu-hover:hover {
    background-color: var(--color-menu-bg-hover);
  }

  .bg-panel {
    background-color: var(--color-panel-bg);
  }

  .bg-page {
    background-color: var(--color-page-bg);
  }

  .border-theme {
    border-color: var(--color-border);
  }

  .border-theme-light {
    border-color: var(--color-border-light);
  }

  .text-theme {
    color: var(--color-text);
  }

  .text-theme-secondary {
    color: var(--color-text);
    opacity: 0.6;
  }

  .text-theme-muted {
    color: var(--color-text);
    opacity: 0.4;
  }

  .text-primary {
    color: var(--color-primary);
  }

  .bg-primary {
    background-color: var(--color-primary);
  }

  .bg-primary-button {
    background-color: var(--color-primary-button);
  }

  .text-primary-button-text {
    color: var(--color-primary-button-text);
  }

  .bg-secondary-button {
    background-color: var(--color-secondary-button);
  }
}