Mirrors/rowy
1
0
Fork 0
mirror of https://github.com/rowyio/rowy.git synced 2025-12-29 00:16:39 +01:00
Code Issues Packages Projects Releases Wiki Activity

dark mode updates

Browse Source
This commit is contained in:
Sidney Alcantara
2021-08-18 00:32:47 +10:00
parent e791e056b9
commit 83701f5b7f
6 changed files with 286 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
www-v1/src/Theme/colors.ts
View File

@@ -22,9 +22,10 @@ export const PRIMARY = "#420AFD";
// export const PRIMARY = "#c4492c";
// export const PRIMARY = "#0070EB";
// export const PRIMARY = "#015FB8";
// export const PRIMARY = "#E8016D";
export const ERROR = "#B00020"; // https://material.io/design/color/dark-theme.html#ui-application
export const DARK_PRIMARY = "#A2BAFF"; // l: 75, c: 65, h: 275
export const DARK_PRIMARY = "#B0B6FD"; // l: 75, c: 65, h: 275
export const colorsLight = (
_primary: Parameters<typeof colord>[0] = PRIMARY
@@ -32,6 +33,7 @@ export const colorsLight = (
const primary = colord(_primary);
const h = primary.toLch().h;
const secondary = colord({ l: 10, c: 20, h });
const secondaryDark = colord({ l: 0, c: 0, h });
const bgDefault = colord({ l: 98, c: 2, h });
const shadowBase = colord({ l: 0, c: 20, h });
const tooltip = shadowBase.alpha(0.8);
@@ -39,7 +41,10 @@ export const colorsLight = (
return {
palette: {
primary: { main: primary.toHslString() },
secondary: { main: secondary.toHslString() },
secondary: {
main: secondary.toHslString(),
dark: secondaryDark.toHslString(),
},
error: { main: ERROR },
success: { light: "#34c759", main: "#00802e", dark: "#105e24" },
background: { default: bgDefault.toHslString() },
@@ -123,6 +128,10 @@ export const colorsDark = (
h: colord(ERROR).toLch().h,
}).toHslString(),
},
action: {
hover: "rgba(255, 255, 255, 0.08)",
hoverOpacity: 0.08,
},
// success: { light: "#34c759" },
// input: "rgba(255, 255, 255, 0.24)",
input: "rgba(255, 255, 255, 0.06)",

128
www-v1/src/Theme/components.ts
View File

@@ -1,11 +1,22 @@
import { Theme, ThemeOptions } from "@material-ui/core/styles";
import { colord } from "colord";
import { colord, extend } from "colord";
import mixPlugin from "colord/plugins/mix";
extend([mixPlugin]);
export const components = (theme: Theme): ThemeOptions => {
const colorDividerHalf = colord(theme.palette.divider)
.alpha(colord(theme.palette.divider).alpha() / 2)
.toHslString();
const fabBackgroundColor =
theme.palette.mode === "dark"
? colord(theme.palette.background.default)
.mix(theme.palette.action.selected, 0.24)
.alpha(1)
.toHslString()
: theme.palette.background.paper;
return {
components: {
MuiContainer: {
@@ -122,14 +133,6 @@ export const components = (theme: Theme): ThemeOptions => {
},
},
},
MuiFab: {
styleOverrides: {
sizeSmall: {
width: 36,
height: 36,
},
},
},
MuiSnackbar: {
styleOverrides: {
root: {
@@ -141,7 +144,8 @@ export const components = (theme: Theme): ThemeOptions => {
MuiSnackbarContent: {
styleOverrides: {
root: {
borderRadius: 8,
borderRadius: (theme.shape.borderRadius as number) * 2,
backgroundColor: theme.palette.secondary.main,
},
},
},
@@ -248,10 +252,46 @@ export const components = (theme: Theme): ThemeOptions => {
backgroundColor: "transparent",
},
},
outlinedPrimary: {
"&:hover": {
backgroundColor: colord(theme.palette.input)
.mix(
theme.palette.primary.main,
theme.palette.action.hoverOpacity
)
.toHslString(),
},
},
outlinedSecondary: {
"&:hover": {
backgroundColor: colord(theme.palette.input)
.mix(
theme.palette.secondary.main,
theme.palette.action.hoverOpacity
)
.toHslString(),
},
},
contained: {
boxShadow: `${theme.shadows[2]}, 0 -1px 0 0 rgba(0, 0, 0, 0.12) inset`,
},
containedPrimary: {
"&:hover": {
backgroundColor:
theme.palette.mode === "dark"
? theme.palette.primary.light
: theme.palette.primary.dark,
},
},
containedSecondary: {
"&:hover": {
backgroundColor: colord(theme.palette.secondary.main)
.mix(theme.palette.secondary.contrastText, 0.12)
.alpha(1)
.toHslString(),
},
},
},
},
MuiButtonGroup: {
@@ -271,6 +311,60 @@ export const components = (theme: Theme): ThemeOptions => {
},
},
},
MuiFab: {
styleOverrides: {
root: {
"&:not(.MuiFab-primary):not(.MuiFab-secondary):not(.Mui-disabled)": {
backgroundColor: fabBackgroundColor,
color: theme.palette.text.primary,
"&:hover": {
backgroundColor: colord(fabBackgroundColor)
.mix(
theme.palette.action.hover,
theme.palette.action.hoverOpacity
)
.alpha(1)
.toHslString(),
},
},
"&.Mui-disabled": {
backgroundColor: colord(theme.palette.background.default)
.mix(
theme.palette.action.disabledBackground,
colord(theme.palette.action.disabledBackground).alpha()
)
.alpha(1)
.toHslString(),
},
},
primary: {
boxShadow: `${theme.shadows[6]}, 0 -1px 0 0 rgba(0, 0, 0, 0.12) inset`,
"&:hover": {
backgroundColor:
theme.palette.mode === "dark"
? theme.palette.primary.light
: theme.palette.primary.dark,
},
},
secondary: {
boxShadow: `${theme.shadows[6]}, 0 -1px 0 0 rgba(0, 0, 0, 0.12) inset`,
"&:hover": {
backgroundColor: colord(theme.palette.secondary.main)
.mix(theme.palette.secondary.contrastText, 0.12)
.alpha(1)
.toHslString(),
},
},
sizeSmall: {
width: 36,
height: 36,
},
},
},
MuiChip: {
defaultProps: {
@@ -289,6 +383,20 @@ export const components = (theme: Theme): ThemeOptions => {
padding: "2px 0",
"&.MuiChip-outlined": { padding: "1px 0" },
},
clickable: {
"&.MuiChip-filledPrimary:hover": {
backgroundColor:
theme.palette.mode === "dark"
? theme.palette.primary.light
: theme.palette.primary.dark,
},
"&.MuiChip-filledSecondary:hover": {
backgroundColor: colord(theme.palette.secondary.main)
.mix(theme.palette.secondary.contrastText, 0.12)
.toHslString(),
},
},
},
},
MuiSwitch: {

2
www-v1/src/components/Navigation/index.tsx
View File

@@ -68,7 +68,7 @@ export default function Navigation({
return (
<>
<AppBar
position="static"
position="sticky"
color="inherit"
elevation={0}
className={classes.appBar}

2
www-v1/src/components/SideDrawer/index.tsx
View File

@@ -98,7 +98,7 @@ export default function SideDrawer() {
),
paper: clsx({ [classes.paperClose]: !open }),
}}
PaperProps={{ elevation: 7 }}
PaperProps={{ elevation: 4 }}
>
<ErrorBoundary>
<div className={classes.drawerContents}>

33
www-v1/src/components/SideDrawer/useStyles.ts
View File

@@ -21,7 +21,7 @@ export const useStyles = makeStyles((theme) =>
paper: {
border: "none",
boxShadow: theme.shadows[7].replace(/, 0 (\d+px)/g, ", -$1 0"),
boxShadow: theme.shadows[4].replace(/, 0 (\d+px)/g, ", -$1 0"),
borderTopLeftRadius: `${(theme.shape.borderRadius as number) * 3}px`,
borderBottomLeftRadius: `${(theme.shape.borderRadius as number) * 3}px`,
@@ -33,7 +33,7 @@ export const useStyles = makeStyles((theme) =>
height: `calc(100% - ${APP_BAR_HEIGHT + TABLE_HEADER_HEIGHT}px)`,
transition: theme.transitions.create("transform", {
easing: theme.transitions.easing.custom,
easing: theme.transitions.easing.easeInOut,
duration: theme.transitions.duration.standard,
}),
@@ -57,37 +57,38 @@ export const useStyles = makeStyles((theme) =>
},
},
bumpPaper: {
animation: `${theme.transitions.duration.standard}ms ${theme.transitions.easing.custom} $bumpPaper`,
animation: `${theme.transitions.duration.standard}ms ${theme.transitions.easing.easeInOut} $bumpPaper`,
},
fab: {
display: "flex",
boxShadow: theme.shadows[7],
"&:active": { boxShadow: theme.shadows[7] },
boxShadow: theme.shadows[4],
"&:active": { boxShadow: theme.shadows[4] },
"&.Mui-disabled": {
boxShadow: theme.shadows[7],
backgroundColor: theme.palette.background.default,
// backgroundColor:
// theme.palette.grey[theme.palette.mode === "light" ? 300 : 800],
},
"&.Mui-disabled": { boxShadow: theme.shadows[4] },
"& + &": { marginTop: theme.spacing(4) },
},
navFabContainer: {
position: "absolute",
top: theme.spacing(8),
left: theme.spacing(-2.5),
top: theme.spacing(6),
left: -18,
zIndex: theme.zIndex.drawer + 1,
},
"@keyframes navFab": {
from: { transform: "translateY(-50vh)" },
to: { transform: "translateY(0)" },
from: {
opacity: 0,
transform: "translateY(-48px)",
},
to: {
opacity: 1,
transform: "translateY(0)",
},
},
navFab: {
animation: `${theme.transitions.duration.standard}ms ${theme.transitions.easing.custom} both $navFab`,
animation: `${theme.transitions.duration.standard}ms ${theme.transitions.easing.easeInOut} both $navFab`,
},
drawerFabContainer: {

172
www-v1/src/pages/Test.tsx
View File

@@ -14,6 +14,8 @@ import {
TableCell,
Typography,
Button,
IconButton,
Fab,
Chip,
Paper,
MenuList,
@@ -25,6 +27,7 @@ import {
Switch,
TextField,
} from "@material-ui/core";
import SparkIcon from "@material-ui/icons/OfflineBoltOutlined";
const typographyVariants = [
"h1",
@@ -261,9 +264,89 @@ export default function TestView() {
</Stack>
<Stack spacing={1} direction="row" alignItems="center">
<Chip size="small" label="Main" />
<Chip size="medium" label="Main" />
<IconButton size="small">
<SparkIcon />
</IconButton>
<IconButton size="medium">
<SparkIcon />
</IconButton>
<IconButton size="large">
<SparkIcon />
</IconButton>
<IconButton color="primary" size="small">
<SparkIcon />
</IconButton>
<IconButton color="primary" size="medium">
<SparkIcon />
</IconButton>
<IconButton color="primary" size="large">
<SparkIcon />
</IconButton>
<IconButton color="secondary" size="small">
<SparkIcon />
</IconButton>
<IconButton color="secondary" size="medium">
<SparkIcon />
</IconButton>
<IconButton color="secondary" size="large">
<SparkIcon />
</IconButton>
<IconButton disabled size="small">
<SparkIcon />
</IconButton>
<IconButton disabled size="medium">
<SparkIcon />
</IconButton>
<IconButton disabled size="large">
<SparkIcon />
</IconButton>
</Stack>
<Stack spacing={1} direction="row" alignItems="center">
<Fab size="small">
<SparkIcon />
</Fab>
<Fab size="medium">
<SparkIcon />
</Fab>
<Fab size="large">
<SparkIcon />
</Fab>
<Fab color="primary" size="small">
<SparkIcon />
</Fab>
<Fab color="primary" size="medium">
<SparkIcon />
</Fab>
<Fab color="primary" size="large">
<SparkIcon />
</Fab>
<Fab color="secondary" size="small">
<SparkIcon />
</Fab>
<Fab color="secondary" size="medium">
<SparkIcon />
</Fab>
<Fab color="secondary" size="large">
<SparkIcon />
</Fab>
<Fab disabled size="small">
<SparkIcon />
</Fab>
<Fab disabled size="medium">
<SparkIcon />
</Fab>
<Fab disabled size="large">
<SparkIcon />
</Fab>
</Stack>
<Stack spacing={1} direction="row" alignItems="center">
<Chip clickable variant="filled" size="small" label="Main" />
<Chip clickable variant="filled" size="medium" label="Main" />
<Chip
clickable
variant="filled"
size="medium"
label={
<>
@@ -273,10 +356,25 @@ export default function TestView() {
</>
}
/>
<Chip size="small" variant="outlined" label="Main" />
<Chip
clickable
variant="filled"
color="primary"
size="small"
variant="outlined"
label="Main"
/>
<Chip
clickable
variant="filled"
color="primary"
size="medium"
label="Main"
/>
<Chip
clickable
variant="filled"
color="primary"
size="medium"
label={
<>
Main
@@ -285,10 +383,25 @@ export default function TestView() {
</>
}
/>
<Chip size="medium" variant="outlined" label="Main" />
<Chip
clickable
variant="filled"
color="secondary"
size="small"
label="Main"
/>
<Chip
clickable
variant="filled"
color="secondary"
size="medium"
label="Main"
/>
<Chip
clickable
variant="filled"
color="secondary"
size="medium"
variant="outlined"
label={
<>
Main
@@ -300,11 +413,12 @@ export default function TestView() {
</Stack>
<Stack spacing={1} direction="row" alignItems="center">
<Chip color="primary" size="small" label="Main" />
<Chip size="medium" color="primary" label="Main" />
<Chip clickable variant="outlined" size="small" label="Main" />
<Chip clickable variant="outlined" size="medium" label="Main" />
<Chip
clickable
variant="outlined"
size="medium"
color="primary"
label={
<>
Main
@@ -314,37 +428,24 @@ export default function TestView() {
}
/>
<Chip
clickable
variant="outlined"
color="primary"
size="small"
variant="outlined"
label="Main"
/>
<Chip
size="medium"
color="primary"
clickable
variant="outlined"
color="primary"
size="medium"
label="Main"
/>
<Chip
size="medium"
color="primary"
clickable
variant="outlined"
label={
<>
Main
<br />
Multiline
</>
}
/>
</Stack>
<Stack spacing={1} direction="row" alignItems="center">
<Chip color="secondary" size="small" label="Main" />
<Chip size="medium" color="secondary" label="Main" />
<Chip
color="primary"
size="medium"
color="secondary"
label={
<>
Main
@@ -354,21 +455,24 @@ export default function TestView() {
}
/>
<Chip
clickable
variant="outlined"
color="secondary"
size="small"
variant="outlined"
label="Main"
/>
<Chip
size="medium"
color="secondary"
clickable
variant="outlined"
color="secondary"
size="medium"
label="Main"
/>
<Chip
size="medium"
color="secondary"
clickable
variant="outlined"
color="secondary"
size="medium"
label={
<>
Main