SiteWebAstrolabe_public/src/scss/_theme.scss

@use 'config';
@use 'functions';
@use 'sass:list';

:root {
  // Pull the tokens and generate custom props
  @each $color in config.$colors {
    #{'--color-' + list.nth($color, 1)}: #{list.nth($color, 2)};
  }

  // Set theme aliases
  --color-mode: 'light';
  --color-bg: #{functions.get-color('light')};
  --color-bg-glare: #{functions.get-color('light')};
  --color-text: #{functions.get-color('dark')};
  --color-text-glare: #{functions.get-color('dark')};
  --color-selection-text: #{functions.get-color('light')};
  --color-selection-bg: #{functions.get-color('dark')};
  --color-stroke: #{functions.get-color('mid')};
  --color-action-bg: #{functions.get-color('primary')};
  --color-action-text: #{functions.get-color('dark')};
  --color-theme-primary: #{functions.get-color('primary')};
  --color-theme-primary-glare: #{functions.get-color('primary-glare')};
  --color-theme-highlight: #{functions.get-color('highlight')};
  --color-theme-highlight-block: #{functions.get-color('highlight')};
  --color-theme-secondary: #{functions.get-color('secondary')};
  --color-light-gray: #{functions.get-color('light-gray')};
  --color-light-blue: #{functions.get-color('light-blue')};
  --color-white: #{functions.get-color('light')};
}

body {
  color: var(--color-text);
  background-color: var(--color-bg);
}

main {
  overflow: hidden;
}

::selection {
  color: var(--color-white);
  background-color: var(--color-secondary);
}

a:not([class]),
a:not([class]):visited {
  color: var(--color-dark);
  font-weight: 600;

  &:hover {
    text-decoration: none;
  }
}

.link {
  font-weight: 400;
  color: var(--color-dark);

  &:visited {
    color: inherit;
  }
}

.return-link {
  align-self: flex-end;
  font-size: 1.125rem;
  font-weight: 700;
  margin-top: 2rem;
  color: var(--color-dark);

  &:visited {
    color: inherit;
  }
}

.justify-end {
  justify-content: flex-end;
}

.ml-1 {
  margin-left: 1rem;
}

.align-center {
  align-items: center;
}

.fw-600 {
  font-weight: 600;
}