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:        hsl(000, 000%, 100%);
  --cl-bg-100:        hsl(220, 020%, 098%);
  --cl-bg-80:         hsl(220, 014%, 096%);
  --cl-bg-60:         hsl(220, 013%, 091%);
  --cl-bg-40:         hsl(216, 012%, 084%);

  --cl-fg-60:         hsl(000, 000%, 055%);
  --cl-fg-80:         hsl(000, 000%, 047%);
  --cl-fg-100:        hsl(000, 000%, 000%);

  --cl-prim-bg-100:   hsl(220, 100%, 060%);
  --cl-prim-bg-80:    hsl(220, 100%, 090%);
  --cl-prim-bg-60:    hsl(220, 100%, 094%);
  
  --cl-prim-fg-80:    hsl(220, 100%, 050%);
  --cl-prim-fg-100:   hsl(000, 000%, 100%);

  --cl-red-bg-100:    hsl(000, 100%, 095%);
  --cl-red-fg-100:    hsl(000, 072%, 051%);
  --cl-green-fg-100:  hsl(120, 080%, 058%);

  /* Dark Theme */
  --cd-bg-120:        hsl(000, 000%, 005%);
  --cd-bg-100:        hsl(000, 000%, 009%);
  --cd-bg-80:         hsl(000, 000%, 015%);
  --cd-bg-60:         hsl(000, 000%, 022%);
  --cd-bg-40:         hsl(000, 000%, 035%);
  
  --cd-fg-60:         hsl(000, 000%, 055%);
  --cd-fg-80:         hsl(000, 000%, 080%);
  --cd-fg-100:        hsl(000, 000%, 093%);

  --cd-prim-bg-100:   hsl(025, 079%, 052%);
  --cd-prim-bg-80:    hsl(035, 080%, 043%);
  --cd-prim-bg-60:    hsl(045, 080%, 031%);

  --cd-prim-fg-80:    hsl(025, 080%, 050%);
  --cd-prim-fg-100:   hsl(000, 000%, 100%);

  --cd-red-bg-100:    hsl(000, 100%, 015%);
  --cd-red-fg-100:    hsl(000, 100%, 060%);
  --cd-green-fg-100:  hsl(120, 080%, 040%);

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

/* Depth layers */
.z-bottom {
  z-index: 0;
}
.z-pop {
  z-index: 10;
}
:is(.z-sticky,
  .sticky
) {
  z-index: 20;
}
.z-tooltip {
  z-index: 30;
}
.z-navigation {
  z-index: 50;
}
.z-modal {
  z-index: 60;
}
.z-modal-top {
  z-index: 70;
}


: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-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:hover,
    .clr-btn-primary:focus
  ) {
    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,
    .clr-btn-primary
  ) {
    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-80);
    background-color: var(--cl-bg-60);
    .dark & {
      color: var(--cd-fg-80);
      background-color: var(--cd-bg-60);
    }
  }

  :is(.clr-hover,
    .clr-tab,
    .clr-btn-nav,
    .clr-btn-default,
    .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-prim-bg-100);
    .dark & {
      outline-color: var(--cd-prim-bg-100);
    }
  }

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

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

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

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

  .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-prim-bg-100);
  .dark & {
    border-color: var(--cd-bg-40);
    outline-color: var(--cd-prim-bg-100);
  }
  @apply border shadow rounded outline-2 outline
}

.rdt_TableCell{
  font-size: 0.875rem;
}