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

/* Light Theme */
/* prettier-ignore */
:not(.dark):root {
  --clr-prim-0:       oklch(100% 0 0deg);
  --clr-prim-100:     oklch(098% 0 0deg);
  --clr-prim-200:     oklch(095% 0 0deg);
  --clr-prim-300:     oklch(092% 0 0deg);
  --clr-prim-400:     oklch(085% 0 0deg);
  --clr-prim-600:     oklch(070% 0 0deg);
  --clr-prim-800:     oklch(055% 0 0deg);
  --clr-prim-999:     oklch(000% 0 0deg);

  --clr-sec-0:        oklch(100% 0 0deg);
  --clr-sec-100:      oklch(095% 0.050 262deg);
  --clr-sec-200:      oklch(088% 0.050 262deg);
  --clr-sec-300:      oklch(080% 0.100 262deg);
  --clr-sec-400:      oklch(075% 0.150 262deg);
  --clr-sec-600:      oklch(060% 0.250 262deg);


  --clr-warn-100:     oklch(094% 0.050 27deg);
  --clr-warn-600:     oklch(060% 0.250 27deg);
  --clr-ok-600:       oklch(060% 0.250 138deg);

  --clr-select-node:  oklch(080% 0.250 180deg);

  /* Highlight accents */
  --acc-bg-red:       oklch(085% 0.150 27deg);
  --acc-bg-green:     oklch(085% 0.150 138deg);
  --acc-bg-blue:      oklch(085% 0.150 262deg);
  --acc-bg-purple:    oklch(085% 0.200 295deg);
  --acc-bg-teal:      oklch(085% 0.200 210deg);
  --acc-bg-orange:    oklch(085% 0.150 62deg);

  --acc-bg-green25:   oklch(097% 0.150 138deg);
  --acc-bg-green50:   oklch(090% 0.150 138deg);
  --acc-bg-orange50:  oklch(090% 0.044 62deg);
  
  --acc-fg-red:       oklch(060% 0.220 27deg);
  --acc-fg-green:     oklch(060% 0.250 138deg);
  --acc-fg-blue:      oklch(060% 0.300 262deg);
  --acc-fg-purple:    oklch(060% 0.250 295deg);
  --acc-fg-teal:      oklch(060% 0.150 210deg);
  --acc-fg-orange:    oklch(060% 0.150 62deg);
}

/* Dark Theme */
/* prettier-ignore */
.dark:root {
  --clr-prim-0:       oklch(015% 0 0deg);
  --clr-prim-100:     oklch(022% 0 0deg);
  --clr-prim-200:     oklch(030% 0 0deg);
  --clr-prim-300:     oklch(036% 0 0deg);
  --clr-prim-400:     oklch(050% 0 0deg);
  --clr-prim-600:     oklch(065% 0 0deg);
  --clr-prim-800:     oklch(085% 0 0deg);
  --clr-prim-999:     oklch(095% 0 0deg);

  --clr-sec-0:        oklch(100% 0 0deg);
  --clr-sec-100:      oklch(025% 0.200 295deg);
  --clr-sec-200:      oklch(035% 0.150 295deg);
  --clr-sec-300:      oklch(045% 0.150 295deg);
  --clr-sec-400:      oklch(055% 0.200 295deg);
  --clr-sec-600:      oklch(070% 0.250 295deg);

  --clr-warn-100:     oklch(025% 0.100 27deg);
  --clr-warn-600:     oklch(065% 0.200 27deg);
  --clr-ok-600:       oklch(065% 0.200 138deg);

  --clr-select-node:  oklch(070% 0.250 180deg);

  /* Highlight accents */
  --acc-bg-red:       oklch(050% 0.150 27deg);
  --acc-bg-green:     oklch(050% 0.150 138deg);
  --acc-bg-blue:      oklch(050% 0.150 262deg);
  --acc-bg-purple:    oklch(050% 0.200 295deg);
  --acc-bg-teal:      oklch(050% 0.250 210deg);
  --acc-bg-orange:    oklch(050% 0.100 62deg);

  --acc-bg-green25:   oklch(028% 0.100 138deg);
  --acc-bg-green50:   oklch(038% 0.200 138deg);
  --acc-bg-orange50:  oklch(038% 0.075 62deg);

  --acc-fg-red:       oklch(075% 0.200 27deg);
  --acc-fg-green:     oklch(075% 0.150 138deg);
  --acc-fg-blue:      oklch(075% 0.150 262deg);
  --acc-fg-purple:    oklch(075% 0.250 295deg);
  --acc-fg-teal:      oklch(075% 0.150 210deg);
  --acc-fg-orange:    oklch(075% 0.150 62deg);
}