Refactor node packages to yarn workspaces & ditch next.js for CRA. (#161)

* chore: restructure project into yarn workspaces, remove next

* fix tests, remove webapp from terraform

* remove more ui deployment bits

* remove pages, fix FUNDING.yml

* remove isomorphism

* remove next providers

* fix linting issues

* feat: start basis of new web ui system on CRA

* chore: move types to @roleypoly/types package

* chore: move src/common/utils to @roleypoly/misc-utils

* chore: remove roleypoly/ path remappers

* chore: renmove vercel config

* chore: re-add worker-types to api package

* chore: fix type linting scope for api

* fix(web): craco should include all of packages dir

* fix(ci): change api webpack path for wrangler

* chore: remove GAR actions from CI

* chore: update codeql job

* chore: test better github dar matcher in lint-staged

packages/design-system/atoms/typography/typography.tsx

@@ -0,0 +1,117 @@
+import { palette } from '@roleypoly/design-system/atoms/colors';
+import { transitions } from '@roleypoly/design-system/atoms/timings';
+import styled, { css } from 'styled-components';
+
+const reset = css`
+    margin: 0;
+    line-height: 163%;
+    padding: 0;
+    font-weight: 400;
+    text-decoration: none;
+    font-size-adjust: 0.75;
+`;
+
+export const text900 = css`
+    ${reset}
+
+    font-size: 2.3rem;
+`;
+
+export const text800 = css`
+    ${reset}
+
+    font-size: 2rem;
+`;
+
+export const text700 = css`
+    ${reset}
+
+    font-size: 1.7rem;
+`;
+
+export const text600 = css`
+    ${reset}
+
+    font-size: 1.4rem;
+`;
+
+export const text500 = css`
+    ${reset}
+
+    font-size: 1.2rem;
+`;
+
+export const text400 = css`
+    ${reset}
+
+    font-size: 1rem;
+`;
+
+export const text300 = css`
+    ${reset}
+
+    font-size: 0.9rem;
+`;
+
+export const text200 = css`
+    ${reset}
+
+    font-size: 0.7rem;
+`;
+
+export const text100 = css`
+    ${reset}
+
+    font-size: 0.5rem;
+`;
+
+export const LargeTitle = styled.span`
+    ${text900}
+`;
+
+export const MediumTitle = styled.span`
+    ${text800}
+`;
+
+export const SmallTitle = styled.span`
+    ${text700}
+`;
+
+export const AccentTitle = styled.span`
+    ${text600}
+`;
+
+export const LargeText = styled.span`
+    ${text500}
+`;
+
+export const Text = styled.span`
+    ${text400}
+`;
+
+export const AmbientLarge = styled.span`
+    ${text200}
+`;
+
+export const AmbientSmall = styled.span`
+    ${text100}
+`;
+
+export const Link = styled.a`
+    color: ${palette.taupe500};
+    text-decoration: none;
+    transition: color ${transitions.actionable}s ease-in-out;
+    &:hover {
+        color: ${palette.taupe600};
+    }
+`;
+
+export const CompletelyStylelessLink = styled.a`
+    color: inherit;
+    text-decoration: none;
+    :visited,
+    :active,
+    :hover {
+        color: inherit;
+    }
+`;