mirror of
https://github.com/coder/coder.git
synced 2026-09-24 15:04:27 +08:00
Bryan
ace89161fb
This is testing out [Approach 3](https://www.notion.so/coderhq/Workspaces-v2-Initial-UI-Scaffolding-3b07d2847eed48839a7e6f0f2bb9bf56#56256f25d2954897a8ee315f0820cedd) in the UI scaffolding RFC. Fixes https://github.com/coder/coder/issues/11 The folder structure looks like: - `site` - `components` (buttons, empty state, etc) - `pages` (large sections of UI -> composition of components) - `theme` (files defining our palette) Several components were able to be brought in essentially unmodified: - `SplitButton` - `EmptyState` - `Footer` - All the icons / logos - Theming (removed several items that aren't necessary, yet, though) Other components had more coupling, and need more refactoring: - `NavBar` - `Confetti` Current State:  For a full working app, there's potentially a lot more to bring in: - User / Account Settings Stuff - Users Page - Organizations Page (and all the supporting dependencies)
73 lines
1.3 KiB
TypeScript
73 lines
1.3 KiB
TypeScript
import { TypographyOptions } from "@material-ui/core/styles/createTypography"
|
|
import { BODY_FONT_FAMILY } from "./constants"
|
|
|
|
export const typography: TypographyOptions = {
|
|
fontFamily: BODY_FONT_FAMILY,
|
|
fontSize: 16,
|
|
fontWeightLight: 300,
|
|
fontWeightRegular: 400,
|
|
fontWeightMedium: 500,
|
|
h1: {
|
|
fontSize: 72,
|
|
fontWeight: 400,
|
|
letterSpacing: -2,
|
|
},
|
|
h2: {
|
|
fontSize: 64,
|
|
letterSpacing: -2,
|
|
fontWeight: 400,
|
|
},
|
|
h3: {
|
|
fontSize: 32,
|
|
letterSpacing: -0.3,
|
|
fontWeight: 400,
|
|
},
|
|
h4: {
|
|
fontSize: 24,
|
|
letterSpacing: -0.3,
|
|
fontWeight: 400,
|
|
},
|
|
h5: {
|
|
fontSize: 20,
|
|
letterSpacing: -0.3,
|
|
fontWeight: 400,
|
|
},
|
|
h6: {
|
|
fontSize: 16,
|
|
fontWeight: 600,
|
|
},
|
|
body1: {
|
|
fontSize: 16,
|
|
lineHeight: "24px",
|
|
},
|
|
body2: {
|
|
fontSize: 14,
|
|
lineHeight: "20px",
|
|
},
|
|
subtitle1: {
|
|
fontSize: 18,
|
|
lineHeight: "28px",
|
|
},
|
|
subtitle2: {
|
|
fontSize: 16,
|
|
lineHeight: "24px",
|
|
},
|
|
caption: {
|
|
fontSize: 12,
|
|
lineHeight: "16px",
|
|
},
|
|
overline: {
|
|
fontSize: 12,
|
|
fontWeight: 500,
|
|
lineHeight: "16px",
|
|
letterSpacing: 1.5,
|
|
textTransform: "uppercase",
|
|
},
|
|
button: {
|
|
fontSize: 13,
|
|
fontWeight: 600,
|
|
textTransform: "uppercase",
|
|
letterSpacing: 1.5,
|
|
},
|
|
}
|