mirror of
https://github.com/coder/coder.git
synced 2026-10-24 01:26:25 +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)
119 lines
2.5 KiB
TypeScript
119 lines
2.5 KiB
TypeScript
import { Palette } from "@material-ui/core/styles/createPalette"
|
|
/**
|
|
* Augment MUI Palette with Coder-specific design system
|
|
*/
|
|
declare module "@material-ui/core/styles/createPalette" {
|
|
interface Palette {
|
|
navbar: {
|
|
main: string
|
|
}
|
|
}
|
|
|
|
interface PaletteOptions {
|
|
navbar: {
|
|
main: string
|
|
}
|
|
}
|
|
}
|
|
/**
|
|
* CustomPalette implements a minimal subset of MUI Palette interface for our
|
|
* light and dark themes.
|
|
*/
|
|
export type CustomPalette = Pick<
|
|
Palette,
|
|
"action" | "background" | "divider" | "error" | "info" | "navbar" | "primary" | "secondary" | "text" | "type"
|
|
>
|
|
|
|
/**
|
|
* Light theme color palette, the default
|
|
*
|
|
* This maps to our design system at:
|
|
* https://www.figma.com/file/VkXU4873QOsSprMQV02GgR/Design-System?node-id=3%3A2
|
|
*/
|
|
export const lightPalette: CustomPalette = {
|
|
type: "light",
|
|
background: {
|
|
default: "#F3F3F3",
|
|
paper: "#FFF",
|
|
},
|
|
|
|
primary: {
|
|
main: "#519A54",
|
|
light: "#A2E0A5",
|
|
dark: "#3A783D",
|
|
contrastText: "#FFF",
|
|
},
|
|
info: {
|
|
main: "#000",
|
|
light: "#000",
|
|
dark: "#000",
|
|
contrastText: "#FFF",
|
|
},
|
|
navbar: {
|
|
main: "#242424",
|
|
},
|
|
secondary: {
|
|
main: "#F7CD6F",
|
|
light: "#FFE7A0",
|
|
dark: "#BF9331",
|
|
contrastText: "#FFF",
|
|
},
|
|
error: {
|
|
main: "#DD4764",
|
|
light: "#A14E5E",
|
|
dark: "#912F42",
|
|
contrastText: "#FFF",
|
|
},
|
|
text: {
|
|
primary: "#000",
|
|
secondary: "#747474",
|
|
disabled: "#749367",
|
|
hint: "#749367",
|
|
},
|
|
action: {
|
|
active: "#242424",
|
|
hover: "rgba(0, 0, 0, 0.1)",
|
|
hoverOpacity: 0.08,
|
|
selected: "#D0EFD2",
|
|
disabled: "#DDE2EC",
|
|
disabledBackground: "#F3F3F3",
|
|
},
|
|
divider: "#DDE2EC",
|
|
}
|
|
|
|
/**
|
|
* Dark theme color palette
|
|
*
|
|
* This maps to our design system at:
|
|
* https://www.figma.com/file/VkXU4873QOsSprMQV02GgR/Design-System?node-id=219%3A40
|
|
*/
|
|
export const darkPalette: CustomPalette = {
|
|
type: "dark",
|
|
primary: lightPalette.primary,
|
|
secondary: lightPalette.secondary,
|
|
info: lightPalette.info,
|
|
error: lightPalette.error,
|
|
navbar: {
|
|
main: "rgb(8, 9, 10)",
|
|
},
|
|
background: {
|
|
default: "rgb(24, 26, 27)",
|
|
paper: "rgb(31, 33, 35)",
|
|
},
|
|
text: {
|
|
primary: "rgba(255, 255, 255, 0.95)",
|
|
secondary: "#BDBDBD",
|
|
disabled: "#BDBDBD",
|
|
hint: "#BDBDBD",
|
|
},
|
|
action: {
|
|
active: "#FFF",
|
|
hover: "rgba(255, 255, 255, 0.1)",
|
|
hoverOpacity: 0.1,
|
|
selected: "rgba(255, 255, 255, 0.2)",
|
|
disabled: "rgba(255, 255, 255, 0.1)",
|
|
disabledBackground: "rgba(255, 255, 255, 0.12)",
|
|
},
|
|
divider: "rgba(255, 255, 255, 0.12)",
|
|
}
|