Skip to content

Commit

Permalink
fix
Browse files Browse the repository at this point in the history
  • Loading branch information
@bicstone
bicstone committed Jun 17, 2023
1 parent 3078a10 commit 59a55ac
Show file tree
Hide file tree
Showing 5 changed files with 623 additions and 0 deletions.
81 changes: 81 additions & 0 deletions src/features/TimelineTab/TimelineTabList.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,17 @@
import styled, { type CSSObject } from "@emotion/styled";
import Button from "@mui/material/Button";
import { type Theme } from "@mui/material/styles";
import { alpha } from "@mui/system/colorManipulator";
import { Link } from "gatsby";
import { type HTMLAttributes } from "react";

import {
outputColorTokens,
historyColorTokens,
projectColorTokens,
type M3ColorTokens,
} from "@/layouts/themes";

const activeClassName = "active";

const StyledAnchorLinkGroup = styled("nav")(({ theme }) => ({
Expand All @@ -11,6 +20,57 @@ const StyledAnchorLinkGroup = styled("nav")(({ theme }) => ({
width: "100%",
}));

const adoptColorTokens = (
colorTokens: M3ColorTokens,
darkColorTokens: M3ColorTokens,
theme: Theme
): CSSObject => {
const background = colorTokens.surface;
const color = colorTokens.onSurface;
const darkBackground = darkColorTokens.surface;
const darkColor = darkColorTokens.onSurface;
const activeBackground = colorTokens.secondaryContainer;
const activeColor = colorTokens.onSecondaryContainer;
const activeDarkBackground = darkColorTokens.secondaryContainer;
const activeDarkColor = darkColorTokens.onSecondaryContainer;

return {
background,
color,

"&:hover": {
background: alpha(background, 0.15),
},

[theme.getColorSchemeSelector("dark")]: {
background: darkBackground,
color: darkColor,

"&:hover": {
background: alpha(darkBackground, 0.15),
},
},

[`&.${activeClassName}`]: {
background: activeBackground,
color: activeColor,

"&:hover": {
background: alpha(activeBackground, 0.15),
},

[theme.getColorSchemeSelector("dark")]: {
background: activeDarkBackground,
color: activeDarkColor,

"&:hover": {
background: alpha(activeDarkBackground, 0.15),
},
},
},
};
};

const StyledLink = styled(Button)(({ theme }) => ({
alignItems: "center",
background: theme.vars.palette.surface.main,
Expand Down Expand Up @@ -56,20 +116,41 @@ export const TimelineTabList = (
component={Link}
to="/outputs"
activeClassName={activeClassName}
css={(theme) =>
adoptColorTokens(
outputColorTokens.lightColorTokens,
outputColorTokens.darkColorTokens,
theme
)
}
>
Outputs
</StyledLink>
<StyledLink
component={Link}
to="/projects"
activeClassName={activeClassName}
css={(theme) =>
adoptColorTokens(
projectColorTokens.lightColorTokens,
projectColorTokens.darkColorTokens,
theme
)
}
>
Projects
</StyledLink>
<StyledLink
component={Link}
to="/histories"
activeClassName={activeClassName}
css={(theme) =>
adoptColorTokens(
historyColorTokens.lightColorTokens,
historyColorTokens.darkColorTokens,
theme
)
}
>
Histories
</StyledLink>
Expand Down
179 changes: 179 additions & 0 deletions src/layouts/themes/historyColorTokens.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,179 @@
import { darken, lighten } from "@mui/material/styles";

import { type M3ColorTokens, type M3ThemeTones } from "./M3Theme";

// https://m3.material.io/theme-builder#/custom
// core primary: `#b39ddb`

export const lightColorTokens: M3ColorTokens = {
primary: "#824690",
onPrimary: "#ffffff",
primaryContainer: "#fed5ff",
onPrimaryContainer: "#340044",
secondary: "#6a596c",
onSecondary: "#ffffff",
secondaryContainer: "#f3dcf2",
onSecondaryContainer: "#241727",
tertiary: "#82524d",
onTertiary: "#ffffff",
tertiaryContainer: "#ffdad4",
onTertiaryContainer: "#32110e",
error: "#ba1b1b",
onError: "#ffffff",
errorContainer: "#ffdad4",
onErrorContainer: "#410001",
background: "#fcfcfc",
onBackground: "#1e1a1e",
surface: "#fcfcfc",
onSurface: "#1e1a1e",
surfaceVariant: "#ecdfe9",
onSurfaceVariant: "#4d444d",
outline: "#7e747d",
shadow: "#000000",
inverseSurface: "#332f33",
inverseOnSurface: "#f7eef3",
inversePrimary: "#f3aeff",
primary085Lighten: lighten("#824690", 0.85),
primary080Darken: darken("#824690", 0.8),
primaryContainer008Darken: darken("#fed5ff", 0.08),
primaryContainer008Lighten: lighten("#fed5ff", 0.08),
secondaryContainer008Darken: darken("#f3dcf2", 0.08),
secondaryContainer008Lighten: lighten("#f3dcf2", 0.08),
tertiaryContainer008Darken: darken("#ffdad4", 0.08),
tertiaryContainer008Lighten: lighten("#ffdad4", 0.08),
primary090Lighten: lighten("#824690", 0.9),
primary090Darken: darken("#824690", 0.9),
};

export const darkColorTokens: M3ColorTokens = {
primary: "#f3aeff",
onPrimary: "#4e155d",
primaryContainer: "#682f76",
onPrimaryContainer: "#fed5ff",
secondary: "#d6bfd6",
onSecondary: "#3a2b3c",
secondaryContainer: "#524154",
onSecondaryContainer: "#f3dcf2",
tertiary: "#f5b7b0",
onTertiary: "#4c2521",
tertiaryContainer: "#673b36",
onTertiaryContainer: "#ffdad4",
error: "#ffb4a9",
onError: "#680003",
errorContainer: "#930006",
onErrorContainer: "#ffb4a9",
background: "#1e1a1e",
onBackground: "#e8e0e4",
surface: "#1e1a1e",
onSurface: "#e8e0e4",
surfaceVariant: "#4d444d",
onSurfaceVariant: "#cfc3cc",
outline: "#988d97",
shadow: "#000000",
inverseSurface: "#e8e0e4",
inverseOnSurface: "#332f33",
inversePrimary: "#824690",
primary085Lighten: lighten("#f3aeff", 0.85),
primary080Darken: darken("#f3aeff", 0.8),
primaryContainer008Darken: darken("#682f76", 0.08),
primaryContainer008Lighten: lighten("#682f76", 0.08),
secondaryContainer008Darken: darken("#524154", 0.08),
secondaryContainer008Lighten: lighten("#524154", 0.08),
tertiaryContainer008Darken: darken("#673b36", 0.08),
tertiaryContainer008Lighten: lighten("#673b36", 0.08),
primary090Lighten: lighten("#f3aeff", 0.9),
primary090Darken: darken("#f3aeff", 0.9),
};

export const tones: M3ThemeTones = {
primary: {
"0": "#000000",
"10": "#340044",
"20": "#4e155d",
"30": "#682f76",
"40": "#824690",
"50": "#9e60ab",
"60": "#b979c6",
"70": "#d793e3",
"80": "#f3aeff",
"90": "#fed5ff",
"95": "#ffeaff",
"99": "#fcfcfc",
"100": "#ffffff",
},
secondary: {
"0": "#000000",
"10": "#241727",
"20": "#3a2b3c",
"30": "#524154",
"40": "#6a596c",
"50": "#847185",
"60": "#9f8b9f",
"70": "#baa5ba",
"80": "#d6bfd6",
"90": "#f3dcf2",
"95": "#ffeaff",
"99": "#fcfcfc",
"100": "#ffffff",
},
tertiary: {
"0": "#000000",
"10": "#32110e",
"20": "#4c2521",
"30": "#673b36",
"40": "#82524d",
"50": "#9e6a64",
"60": "#ba837c",
"70": "#d79d96",
"80": "#f5b7b0",
"90": "#ffdad4",
"95": "#ffede9",
"99": "#fcfcfc",
"100": "#ffffff",
},
neutral: {
"0": "#000000",
"10": "#1e1a1e",
"20": "#332f33",
"30": "#4a4549",
"40": "#625d60",
"50": "#7b7679",
"60": "#958f93",
"70": "#b0a9ae",
"80": "#ccc4c9",
"90": "#e8e0e4",
"95": "#f7eef3",
"99": "#fcfcfc",
"100": "#ffffff",
},
neutralVariant: {
"0": "#000000",
"10": "#201921",
"20": "#352e35",
"30": "#4d444d",
"40": "#655c64",
"50": "#7e747d",
"60": "#988d97",
"70": "#b3a8b1",
"80": "#cfc3cc",
"90": "#ecdfe9",
"95": "#faedf7",
"99": "#fcfcfc",
"100": "#ffffff",
},
error: {
"0": "#000000",
"10": "#410001",
"20": "#680003",
"30": "#930006",
"40": "#ba1b1b",
"50": "#dd3730",
"60": "#ff5449",
"70": "#ff897a",
"80": "#ffb4a9",
"90": "#ffdad4",
"95": "#ffede9",
"99": "#fcfcfc",
"100": "#ffffff",
},
};
5 changes: 5 additions & 0 deletions src/layouts/themes/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1 +1,6 @@
export * from "./CustomThemeProvider";
export * as defaultColorTokens from "./defaultColorTokens";
export * as historyColorTokens from "./historyColorTokens";
export * as outputColorTokens from "./outputColorTokens";
export * as projectColorTokens from "./projectColorTokens";
export type { M3ColorTokens } from "./M3Theme";
Loading

0 comments on commit 59a55ac

Please sign in to comment.