ConceptPortal-public/rsconcept/frontend/src/styling/constants.css

/**
 * Module: Define CSS variables.
 */

/* prettier-ignore */
:root {
  --font-ui:  'Alegreya Sans SC', 'Rubik', 'Noto Color Emoji', 'Segoe UI Symbol', sans-serif;
  --font-main: 'Rubik', 'Noto Color Emoji', 'Fira Code', 'Noto Sans Math', 'Noto Sans Symbols 2', 'Segoe UI Symbol', sans-serif;
  --font-math: 'Fira Code', 'Noto Sans Math', 'Noto Sans Symbols 2', 'Rubik', 'Noto Color Emoji', 'Segoe UI Symbol', sans-serif;
  
  /* Numeric parameters */
  --font-size-base: 16px;
  --font-size-sm: 12px;
  --line-height: 1.5;

  --text-max-width: 75ch;
  --scroll-padding: 3rem;

  --duration-move: 500ms;
  --duration-modal: 300ms;
  --duration-fade: 300ms;
  --duration-select: 100ms;
}

/* Light Theme */
/* prettier-ignore */
:not(.dark):root {
  --clr-app-0:      hsl(000, 000%, 100%);
  --clr-app-100:    hsl(000, 000%, 098%);
  --clr-app-200:    hsl(000, 000%, 094%);
  --clr-app-300:    hsl(000, 000%, 091%);
  --clr-app-400:    hsl(000, 000%, 080%);
  --clr-app-600:    hsl(000, 000%, 065%);
  --clr-app-800:    hsl(000, 000%, 047%);
  --clr-app-999:    hsl(000, 000%, 000%);

  --clr-prim-100:   hsl(220, 100%, 050%);
  --clr-prim-200:   hsl(220, 100%, 060%);
  --clr-prim-300:   hsl(220, 100%, 070%);
  --clr-prim-400:   hsl(220, 100%, 080%);
  --clr-prim-600:   hsl(220, 080%, 092%);
  --clr-prim-800:   hsl(190, 080%, 094%);
  --clr-prim-999:   hsl(000, 000%, 100%);

  --clr-warn-100:   hsl(000, 100%, 095%);
  --clr-warn-600:   hsl(000, 072%, 051%);

  --clr-ok-600:     hsl(120, 080%, 37%);

  --clr-select-node:hsl(162, 082%, 051%);

  /* Highlight accents */
  --acc-bg-red:     hsl(000, 100%, 089%);
  --acc-bg-green:   hsl(100, 100%, 075%);
  --acc-bg-blue:    hsl(235, 080%, 087%);
  --acc-bg-purple:  hsl(274, 089%, 081%);
  --acc-bg-teal:    hsl(192, 089%, 081%);
  --acc-bg-orange:  hsl(028, 100%, 075%);

  --acc-bg-green25: hsl(100, 100%, 096%);
  --acc-bg-green50: hsl(100, 100%, 090%);
  --acc-bg-orange50:hsl(028, 100%, 090%);
  
  --acc-fg-red:     hsl(000, 090%, 045%);
  --acc-fg-green:   hsl(100, 090%, 035%);
  --acc-fg-blue:    hsl(235, 100%, 050%);
  --acc-fg-purple:  hsl(270, 100%, 055%);
  --acc-fg-teal:    hsl(200, 080%, 050%);
  --acc-fg-orange:  hsl(028, 100%, 050%);
}

/* Dark Theme */
/* prettier-ignore */
.dark:root {
  --clr-app-0:      hsl(000, 000%, 005%);
  --clr-app-100:    hsl(000, 000%, 009%);
  --clr-app-200:    hsl(000, 000%, 015%);
  --clr-app-300:    hsl(000, 000%, 022%);
  --clr-app-400:    hsl(000, 000%, 035%);
  --clr-app-600:    hsl(000, 000%, 055%);
  --clr-app-800:    hsl(000, 000%, 080%);
  --clr-app-999:    hsl(000, 000%, 093%);

  --clr-prim-100:   hsl(267, 070%, 070%);
  --clr-prim-200:   hsl(267, 050%, 060%);
  --clr-prim-300:   hsl(267, 050%, 050%);
  --clr-prim-400:   hsl(267, 050%, 040%);
  --clr-prim-600:   hsl(267, 050%, 032%);
  --clr-prim-800:   hsl(269, 030%, 028%);
  --clr-prim-999:   hsl(000, 000%, 100%);

  --clr-warn-100:   hsl(000, 100%, 015%);
  --clr-warn-600:   hsl(000, 080%, 055%);

  --clr-ok-600:     hsl(120, 080%, 042%);

  --clr-select-node:hsl(162, 082%, 041%);

  /* Highlight accents */
  --acc-bg-red:     hsl(000, 080%, 037%);
  --acc-bg-green:   hsl(100, 080%, 025%);
  --acc-bg-blue:    hsl(235, 054%, 049%);
  --acc-bg-purple:  hsl(270, 080%, 050%);
  --acc-bg-teal:    hsl(192, 080%, 030%);
  --acc-bg-orange:  hsl(035, 100%, 035%);

  --acc-bg-green25: hsl(100, 080%, 009%);
  --acc-bg-green50: hsl(100, 080%, 017%);
  --acc-bg-orange50:hsl(035, 100%, 016%);

  --acc-fg-red:     hsl(000, 080%, 045%);
  --acc-fg-green:   hsl(100, 080%, 035%);
  --acc-fg-blue:    hsl(235, 100%, 080%);
  --acc-fg-purple:  hsl(270, 100%, 080%);
  --acc-fg-teal:    hsl(192, 100%, 045%);
  --acc-fg-orange:  hsl(035, 100%, 050%);
}