From 12b53074af9689567d06d552be6f4dfeaf28b9e2 Mon Sep 17 00:00:00 2001 From: Takanori Oishi Date: Sat, 17 Jun 2023 21:39:29 +0900 Subject: [PATCH] fix --- gatsby-config.ts | 17 +- .../logos/index.d.ts} | 0 src/layouts/WrapRootElement.tsx | 9 - src/layouts/themes/CustomThemeProvider.tsx | 9 +- src/layouts/themes/M3Theme.ts | 176 +++++++++--------- src/layouts/themes/useTheme.ts | 3 + 6 files changed, 108 insertions(+), 106 deletions(-) rename src/{types/logos.d.ts => components/logos/index.d.ts} (100%) diff --git a/gatsby-config.ts b/gatsby-config.ts index fa26fc45..704b57b1 100644 --- a/gatsby-config.ts +++ b/gatsby-config.ts @@ -4,12 +4,21 @@ import dotenv from "dotenv"; import { SITE_METADATA } from "./src/constants/SITE_METADATA"; +import type { + GatsbyPluginSitemapQuery, + GatsbyPluginFeedQuery, +} from "@/generated/graphqlTypes"; +import type Sentry from "@sentry/browser"; import type { GatsbyConfig } from "gatsby"; -import { - type GatsbyPluginSitemapQuery, - type GatsbyPluginFeedQuery, -} from "@/generated/graphqlTypes"; +// Google Tag Manager types +declare global { + interface Window { + Sentry?: typeof Sentry; + // eslint-disable-next-line @typescript-eslint/no-explicit-any + adsbygoogle?: any; + } +} dotenv.config({ path: `.env` }); diff --git a/src/types/logos.d.ts b/src/components/logos/index.d.ts similarity index 100% rename from src/types/logos.d.ts rename to src/components/logos/index.d.ts diff --git a/src/layouts/WrapRootElement.tsx b/src/layouts/WrapRootElement.tsx index c429d36f..1484c4b4 100644 --- a/src/layouts/WrapRootElement.tsx +++ b/src/layouts/WrapRootElement.tsx @@ -1,20 +1,11 @@ import { CustomThemeProvider } from "./themes"; -import type Sentry from "@sentry/browser"; import type { ReactNode } from "react"; interface WrapRootElementProps { children: ReactNode; } -declare global { - interface Window { - Sentry?: typeof Sentry; - // eslint-disable-next-line @typescript-eslint/no-explicit-any - adsbygoogle?: any; - } -} - /** * WrapRootElement * This is useful to set up any Provider components that will wrap your application. diff --git a/src/layouts/themes/CustomThemeProvider.tsx b/src/layouts/themes/CustomThemeProvider.tsx index e05f9485..db0c824e 100644 --- a/src/layouts/themes/CustomThemeProvider.tsx +++ b/src/layouts/themes/CustomThemeProvider.tsx @@ -2,17 +2,16 @@ import { ThemeProvider as EmotionThemeProvider, Global } from "@emotion/react"; import CssBaseline from "@mui/material/CssBaseline"; import { Experimental_CssVarsProvider as CssVarsProvider } from "@mui/material/styles/CssVarsProvider"; -import { useTheme, type CustomTheme } from "./useTheme"; +import { useTheme } from "./useTheme"; +import type { Theme as MuiTheme } from "@mui/material/styles"; import type { ReactNode } from "react"; -import type {} from "@mui/material/themeCssVarsAugmentation"; - import { FONT_FAMILY } from "@/components/markdown/constants"; +// emotion types declare module "@emotion/react" { - // eslint-disable-next-line @typescript-eslint/no-empty-interface - export interface Theme extends CustomTheme {} + export interface Theme extends MuiTheme {} } interface CustomThemeProviderProps { diff --git a/src/layouts/themes/M3Theme.ts b/src/layouts/themes/M3Theme.ts index 461cfed4..986e79d5 100644 --- a/src/layouts/themes/M3Theme.ts +++ b/src/layouts/themes/M3Theme.ts @@ -25,94 +25,7 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ -import type { ThemeOptions } from "@mui/material/styles"; - -interface M3Tone { - 0: string; - 10: string; - 20: string; - 30: string; - 40: string; - 50: string; - 60: string; - 70: string; - 80: string; - 90: string; - 95: string; - 99: string; - 100: string; -} -export interface M3ThemeTones { - primary: M3Tone; - secondary: M3Tone; - tertiary: M3Tone; - neutral: M3Tone; - neutralVariant: M3Tone; - error: M3Tone; -} - -export interface M3ColorTokens { - primary: string; - onPrimary: string; - - primaryContainer: string; - onPrimaryContainer: string; - - secondary: string; - onSecondary: string; - - secondaryContainer: string; - onSecondaryContainer: string; - - tertiary: string; - onTertiary: string; - - tertiaryContainer: string; - onTertiaryContainer: string; - - error: string; - onError: string; - - errorContainer: string; - onErrorContainer: string; - - background: string; - onBackground: string; - - surface: string; - onSurface: string; - - surfaceVariant: string; - onSurfaceVariant: string; - - inverseSurface: string; - inverseOnSurface: string; - - inversePrimary: string; - surfaceTint?: string; - - outline: string; - shadow: string; - - primary085Lighten: string; - primary080Darken: string; - primary090Lighten: string; - primary090Darken: string; - primaryContainer008Lighten: string; - primaryContainer008Darken: string; - secondaryContainer008Lighten: string; - secondaryContainer008Darken: string; - tertiaryContainer008Lighten: string; - tertiaryContainer008Darken: string; -} - -export type M3ThemeMode = "dark" | "light"; - -export interface M3ThemeScheme { - light: M3ColorTokens; - dark: M3ColorTokens; - tones?: M3ThemeTones; -} +import type { PaletteColor, ThemeOptions } from "@mui/material/styles"; declare module "@mui/material/styles" { interface Palette { @@ -209,6 +122,93 @@ declare module "@mui/material/Fab" { } } +interface M3Tone { + 0: string; + 10: string; + 20: string; + 30: string; + 40: string; + 50: string; + 60: string; + 70: string; + 80: string; + 90: string; + 95: string; + 99: string; + 100: string; +} +export interface M3ThemeTones { + primary: M3Tone; + secondary: M3Tone; + tertiary: M3Tone; + neutral: M3Tone; + neutralVariant: M3Tone; + error: M3Tone; +} + +export interface M3ColorTokens { + primary: string; + onPrimary: string; + + primaryContainer: string; + onPrimaryContainer: string; + + secondary: string; + onSecondary: string; + + secondaryContainer: string; + onSecondaryContainer: string; + + tertiary: string; + onTertiary: string; + + tertiaryContainer: string; + onTertiaryContainer: string; + + error: string; + onError: string; + + errorContainer: string; + onErrorContainer: string; + + background: string; + onBackground: string; + + surface: string; + onSurface: string; + + surfaceVariant: string; + onSurfaceVariant: string; + + inverseSurface: string; + inverseOnSurface: string; + + inversePrimary: string; + surfaceTint?: string; + + outline: string; + shadow: string; + + primary085Lighten: string; + primary080Darken: string; + primary090Lighten: string; + primary090Darken: string; + primaryContainer008Lighten: string; + primaryContainer008Darken: string; + secondaryContainer008Lighten: string; + secondaryContainer008Darken: string; + tertiaryContainer008Lighten: string; + tertiaryContainer008Darken: string; +} + +export type M3ThemeMode = "dark" | "light"; + +export interface M3ThemeScheme { + light: M3ColorTokens; + dark: M3ColorTokens; + tones?: M3ThemeTones; +} + export const getDesignTokens = ( mode: M3ThemeMode, scheme: M3ColorTokens, diff --git a/src/layouts/themes/useTheme.ts b/src/layouts/themes/useTheme.ts index 6ec9126e..dc027e98 100644 --- a/src/layouts/themes/useTheme.ts +++ b/src/layouts/themes/useTheme.ts @@ -9,6 +9,9 @@ import type { CssVarsTheme, Theme } from "@mui/material/styles"; import { FONT_FAMILY } from "@/components/markdown/constants"; +// css vars types +import type { } from "@mui/material/themeCssVarsAugmentation"; + export type CustomTheme = Omit & CssVarsTheme; export const useTheme = (): CustomTheme => {