diff --git a/src/foundation/gameflow.ts b/src/foundation/gameflow.ts index 3f7e159..424bc8d 100644 --- a/src/foundation/gameflow.ts +++ b/src/foundation/gameflow.ts @@ -2,9 +2,9 @@ import { Animations, BorderRadius, + Breakpoints, Colors, Motion, - Screens, Shadows, Spacing, Theme, @@ -75,7 +75,7 @@ export const spacing: Spacing = { xxl: '48px', } -const screens: Screens = { +const breakpoints: Breakpoints = { default: '0rem', xs: '29rem', sm: '36rem', @@ -174,7 +174,7 @@ export const animations: Animations = { export const gameflowTheme: Theme = { colors, - screens, + breakpoints, borderRadius, motion, shadows, diff --git a/src/foundation/types/screens.ts b/src/foundation/types/breakpoints.ts similarity index 93% rename from src/foundation/types/screens.ts rename to src/foundation/types/breakpoints.ts index 96263f4..d0f402c 100644 --- a/src/foundation/types/screens.ts +++ b/src/foundation/types/breakpoints.ts @@ -1,7 +1,7 @@ /** * Flume breakpoints. */ -export interface Screens { +export interface Breakpoints { /** * String index signature for type compat. */ diff --git a/src/foundation/types/index.ts b/src/foundation/types/index.ts index ead821e..0996b5f 100644 --- a/src/foundation/types/index.ts +++ b/src/foundation/types/index.ts @@ -5,5 +5,5 @@ export * from './shadows.js' export * from './spacing.js' export * from './theme.js' export * from './typography.js' -export * from './screens.js' +export * from './breakpoints.js' export * from './animations.js' diff --git a/src/foundation/types/theme.ts b/src/foundation/types/theme.ts index 48f61a1..7a7636a 100644 --- a/src/foundation/types/theme.ts +++ b/src/foundation/types/theme.ts @@ -5,7 +5,7 @@ import { Motion } from './motion.js' import { Shadows } from './shadows.js' import { Spacing } from './spacing.js' import { Typography } from './typography.js' -import { Screens } from './screens.js' +import { Breakpoints } from './breakpoints.js' export interface Theme { colors: Colors @@ -15,5 +15,5 @@ export interface Theme { animations: Animations borderRadius: BorderRadius typography: Typography - screens: Screens + breakpoints: Breakpoints } diff --git a/src/react/hooks/useBreakpoints.ts b/src/react/hooks/useBreakpoints.ts index cb19b01..3ea64e6 100644 --- a/src/react/hooks/useBreakpoints.ts +++ b/src/react/hooks/useBreakpoints.ts @@ -1,12 +1,12 @@ import { useTheme, useWindowDimensions } from './index.js' -import { Screens } from '~/foundation/index.js' +import { Breakpoints } from '~/foundation/index.js' type NumberedBreakpoints = { // eslint-disable-next-line no-unused-vars - [key in keyof Screens]: number + [key in keyof Breakpoints]: number } -const parseBreakpoints = (breakpoints: Screens): NumberedBreakpoints => { +const parseBreakpoints = (breakpoints: Breakpoints): NumberedBreakpoints => { const parsed: any = {} for (const key in breakpoints) { @@ -19,7 +19,7 @@ const parseBreakpoints = (breakpoints: Screens): NumberedBreakpoints => { export interface BreakpointsProps { breakpoints: NumberedBreakpoints - current: keyof Screens + current: keyof Breakpoints isMobile: boolean isDesktop: boolean } @@ -27,7 +27,7 @@ export interface BreakpointsProps { /** Retrieves a numbered version of the current Theme's breakpoints as well as the currently exceeded breakpoint */ export const useBreakpoints = () => { const theme = useTheme() - const breakpoints = parseBreakpoints(theme.screens) + const breakpoints = parseBreakpoints(theme.breakpoints) const current = useCurrentBreakpoint() const dimensions = useWindowDimensions() @@ -45,17 +45,17 @@ export const useBreakpoints = () => { /** Retrieves the current Theme's breakpoints and returns them as numbers.*/ export const useNumberedBreakpoints = (): NumberedBreakpoints => { - const { screens } = useTheme() - return parseBreakpoints(screens) + const { breakpoints } = useTheme() + return parseBreakpoints(breakpoints) } /** Retrieves the currently exceeded breakpoint */ -export const useCurrentBreakpoint = (): keyof Screens => { +export const useCurrentBreakpoint = (): keyof Breakpoints => { const dimensions = useWindowDimensions() const width = dimensions?.width - const { screens } = useTheme() - const parsed = parseBreakpoints(screens) + const { breakpoints } = useTheme() + const parsed = parseBreakpoints(breakpoints) if (!width) { return 'default' diff --git a/src/tailwind/config.ts b/src/tailwind/config.ts index cb9b525..3482b09 100644 --- a/src/tailwind/config.ts +++ b/src/tailwind/config.ts @@ -10,7 +10,7 @@ export const getConfig = (theme: Theme = gameflowTheme): Partial shadows, borderRadius, animations: animation, - screens, + breakpoints, typography, motion, } = theme @@ -24,7 +24,7 @@ export const getConfig = (theme: Theme = gameflowTheme): Partial fontWeight, borderRadius, }, - screens, + screens: breakpoints, colors, spacing, animation,