Previous version made GPDR-friendly

src/scss/_theme.scss

@@ -0,0 +1,87 @@
+:root {
+  // Pull the tokens and generate custom props
+  @each $color in $stalfos-colors {
+    #{'--color-' + nth($color, 1)}: #{nth($color, 2)};
+  }
+
+  // Set theme aliases
+  --color-mode: 'light';
+  --color-bg: #{get-color('light')};
+  --color-bg-glare: #{get-color('light')};
+  --color-text: #{get-color('dark')};
+  --color-text-glare: #{get-color('dark')};
+  --color-selection-text: #{get-color('light')};
+  --color-selection-bg: #{get-color('dark')};
+  --color-stroke: #{get-color('mid')};
+  --color-action-bg: #{get-color('primary')};
+  --color-action-text: #{get-color('dark')};
+  --color-theme-primary: #{get-color('primary')};
+  --color-theme-primary-glare: #{get-color('primary-glare')};
+  --color-theme-highlight: #{get-color('highlight')};
+  --color-theme-highlight-block: #{get-color('highlight')};
+  --color-theme-secondary: #{get-color('secondary')};
+  --color-light-gray: #{get-color('light-gray')};
+  --color-light-blue: #{get-color('light-blue')};
+  --color-white: #{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;
+}