ConceptPortal-public/rsconcept/frontend/src/index.css

@import 'react-toastify/dist/ReactToastify.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  /* Light Theme */
  --cl-bg-120: #ffffff;
  --cl-bg-100: #f9fafb;
  --cl-bg-80: #f3f4f6;
  --cl-bg-60: #e5e7eb;
  --cl-bg-40: #d1d5db;

  --cl-fg-40: #8c8c8c;
  --cl-fg-60: #777777;
  --cl-fg-80: #333333;
  --cl-fg-100: #000000;

  --cl-prim-bg-100: #3377ff;
  --cl-prim-bg-80: #ccddff;
  --cl-prim-bg-60: #e0ebff;
  
  --cl-prim-fg-60: #1a63ff;
  --cl-prim-fg-80: #0051ff;
  --cl-prim-fg-100: #ffffff;

  --cl-red-bg-100: #ffe5e5;
  --cl-red-fg-100: #dc2626;
  --cl-green-fg-100: #4ade80;

  /* Dark Theme */
  --cd-bg-120: #0d0d0d;
  --cd-bg-100: #181818;
  --cd-bg-80: #272727;
  --cd-bg-60: #383838;
  --cd-bg-40: #595959;
  
  --cd-fg-40: #878792;
  --cd-fg-60: #bcbcc2;
  --cd-fg-80: #d4d4d8;
  --cd-fg-100: #e4e4e7;

  --cd-prim-bg-100: #e66000;
  --cd-prim-bg-80: #cc7700;
  --cd-prim-bg-60: #995900;

  --cd-prim-fg-60: #ffa666;
  --cd-prim-fg-80: #ff6a00;
  --cd-prim-fg-100: #ffffff;

  --cd-red-bg-100: #4d0000;
  --cd-red-fg-100: #ff334b;
  --cd-green-fg-100: #22c55e;

  /* Import overrides */
  --toastify-color-dark: var(--cd-bg-60);
}

:root {
  color: var(--cl-fg-100);
  border-color: var(--cl-bg-40);
  background-color: var(--cl-bg-100);

  &.dark {
    color: var(--cd-fg-100);
    border-color: var(--cd-bg-40);
    background-color: var(--cd-bg-100);
  }
}

:focus {
  outline-width: 2px;
  outline-style: solid;
  outline-color: transparent;
  .dark & {
    outline-color: transparent;
  }
}

[data-color-scheme="dark"] {
  color-scheme: dark;
}

[data-color-scheme="light"] {
  color-scheme: light;
}

@layer components {
  h1 {
    @apply text-lg font-bold text-center
  }

  .border {
    @apply rounded
  }

  .clr-modal-backdrop {
    opacity: 0.75;
  }

  :is(.clr-border,
    .border, .border-x, .border-y, .border-b, .border-t, .border-l, .border-r,
    .border-2, .border-x-2, .border-y-2, .border-b-2, .border-t-2, .border-l-2, .border-r-2,
    .divide-x, .divide-y, .divide-x-2, .divide-y-2
  ) {
    border-color: var(--cl-bg-40);
    .dark & {
      border-color: var(--cd-bg-40);
    }
  }

  :is(.clr-app,
    .clr-footer,
    .clr-modal-backdrop,
    .clr-btn-nav,
    .clr-checkbox,
    .clr-input:disabled
  ) {
    background-color: var(--cl-bg-100);
    .dark & {
      background-color: var(--cd-bg-100);
    }
  }

  :is(.clr-input
   ) {
    background-color: var(--cl-bg-120);
    .dark & {
      background-color: var(--cd-bg-120);
    }
  }

  :is(.clr-controls,
    .clr-btn-default
  ) {
    background-color: var(--cl-bg-80);
    .dark & {
      background-color: var(--cd-bg-80);
    }
  }

  :is(.clr-primary,
    .clr-btn-primary,
    .clr-checkbox:checked
  ) {
    color: var(--cl-prim-fg-100);
    background-color: var(--cl-prim-bg-100);
    .dark & {
      color: var(--cd-prim-fg-100);
      background-color: var(--cd-prim-bg-100);
    }
  }

  :is(.clr-selected
  ) {
    color: var(--cl-fg-100);
    background-color: var(--cl-prim-bg-80);
    .dark & {
      color: var(--cd-fg-100);
      background-color: var(--cd-prim-bg-80);
    }
  }

  :is(.clr-disabled,
    .clr-btn-default,
    .clr-btn-primary
  ):disabled {
    color: var(--cl-fg-60);
    background-color: var(--cl-bg-60);
    .dark & {
      color: var(--cd-fg-60);
      background-color: var(--cd-bg-60);
    }
  }

  :is(.clr-hover,
    .clr-tab,
    .clr-btn-nav,
    .clr-btn-default,
    .clr-btn-primary,
    .clr-btn-clear
  ):hover:not(:disabled) {
    color: var(--cl-fg-100);
    background-color: var(--cl-prim-bg-60);
    .dark & {
      color: var(--cd-fg-100);
      background-color: var(--cd-prim-bg-60);
    }
  }

  :is(.clr-outline,
    .clr-btn-default,
    .clr-btn-primary
  ):focus {
    outline-width: 2px;
    outline-style: solid;
    outline-color: var(--cl-bg-40);
    .dark & {
      outline-color: var(--cd-bg-40);
    }
  }

  :is(.text-primary,
    .text-url
  ) {
    color: var(--cl-prim-fg-80);
    .dark & {
      color: var(--cd-prim-fg-80);
    }
  }

  .clr-footer {
    color: var(--cl-fg-40);
    .dark & {
      color: var(--cd-fg-40);
    }
  }

  .clr-btn-nav {
    color: var(--cl-fg-60);
    .dark & {
      color: var(--cd-fg-60);
    }
  }

  .clr-btn-clear {
    color: var(--cl-fg-60);
    &:disabled {
      color: var(--cl-fg-40);
    }
    .dark & {
      color: var(--cd-fg-60);
      &:disabled {
        color: var(--cd-fg-40);
      }
    }
  }

  .clr-warning {
    background-color: var(--cl-red-bg-100);
    .dark & {
      background-color: var(--cd-red-bg-100);
    }
  }

  .text-warning {
    color: var(--cl-red-fg-100);
    .dark & {
      color: var(--cd-red-fg-100);
    }
  }

  .text-success {
    color: var(--cl-green-fg-100);
    .dark & {
      color: var(--cd-green-fg-100);
    } 
  }
}

.cm-editor {
  border-color: var(--cl-bg-40);
  .dark & {
    border-color: var(--cd-bg-40);
  }
  @apply border shadow rounded px-1
}
.cm-editor.cm-focused {
  border-color: var(--cl-bg-40);
  outline-color: var(--cl-bg-40);
  .dark & {
    border-color: var(--cd-bg-40);
    outline-color: var(--cd-bg-40);
  }
  @apply border shadow rounded outline-2 outline
}

.rdt_TableCell{
  font-size: 0.875rem;
}

.react-dropdown-select-item {
  color: var(--cl-fg-100);
  border-color: var(--cl-bg-40);
  background-color: var(--cl-bg-100);

  &:hover {
    background-color: var(--cl-prim-bg-60);
  }

  .dark & {
    color: var(--cd-fg-100);
    border-color: var(--cd-bg-40);
    background-color: var(--cd-bg-100);
    &:hover {
      background-color: var(--cd-prim-bg-60);
    }
  }
}