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

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

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

/* prettier-ignore */
:root {
  --font-ui:  'Geologica', sans-serif;
  --font-main: 'Rubik', 'Noto Sans Math', 'Noto Sans Symbols 2', 'Segoe UI Symbol', sans-serif;
  --font-math: 'Noto Sans Math', 'Noto Sans Symbols 2', 'Segoe UI Symbol', sans-serif;

  /* Light Theme */
  --cl-bg-120:      hsl(000, 000%, 100%);
  --cl-bg-100:      hsl(000, 000%, 098%);
  --cl-bg-80:       hsl(000, 000%, 094%);
  --cl-bg-60:       hsl(000, 000%, 091%);
  --cl-bg-40:       hsl(000, 000%, 080%);

  --cl-fg-60:       hsl(000, 000%, 065%);
  --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, 080%, 092%);
  --cl-prim-bg-60:  hsl(190, 080%, 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%, 37%);

  /* 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(267, 050%, 050%);
  --cd-prim-bg-80: hsl(267, 050%, 032%);
  --cd-prim-bg-60: hsl(269, 030%, 028%);

  --cd-prim-fg-80: hsl(267, 070%, 070%);
  --cd-prim-fg-100: hsl(000, 000%, 100%);

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

  /* 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-controls {
  z-index: 70;
}
.z-modal-top {
  z-index: 80;
}
.z-modal-tooltip {
  z-index: 90;
}
.z-topmost {
  z-index: 99;
}

:root {
  font-family: var(--font-main);

  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;
  }
}

::selection {
  background: var(--cl-prim-bg-60);
  .dark & {
    background: var(--cd-prim-bg-60);
  }
  tr :hover& {
    background: var(--cl-red-bg-100);
    .dark & {
      background: var(--cd-red-bg-100);
    }
  }
}

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

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

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

@layer utilities {
  .font-controls {
    font-family: var(--font-ui);
    font-weight: 600;
    font-variant: small-caps;
  }
  .font-math {
    font-family: var(--font-math);
  }
}

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

  h2 {
    @apply font-semibold text-center;
  }

  b {
    @apply font-semibold;
  }

  .border {
    @apply rounded;
  }

  .shadow-border {
    @apply shadow-sm shadow-[var(--cl-bg-40)] dark:shadow-[var(--cd-bg-40)];
  }

  .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);
    @apply divide-inherit;
    .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-tab, .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) {
    @apply transition;
    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 {
    @apply transition;
    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):hover:not(:disabled) {
    @apply transition;
    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-primary):focus {
    outline-width: 2px;
    outline-style: solid;
    outline-color: var(--cl-prim-bg-100);
    .dark & {
      outline-color: var(--cd-prim-bg-100);
    }
  }

  :is(.clr-text-primary, .clr-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);
    }
  }

  :is(.clr-text-controls, .clr-btn-nav, .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);
    }
  }

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

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

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

.cm-editor {
  resize: vertical;
  overflow-y: auto;
  border-color: var(--cl-bg-40);
  .dark & {
    border-color: var(--cd-bg-40);
  }
  @apply border rounded px-[0.375rem] py-[0.15rem];
}
.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 outline-2 outline;
}

.cm-editor .cm-placeholder {
  color: var(--cl-fg-60);
  .dark & {
    color: var(--cd-fg-60);
  }
}

.rdt_TableCell {
  font-size: 0.875rem;
}