foundation: rename screens -> breakpoints

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,

src/foundation/types/screens.ts → src/foundation/types/breakpoints.ts

@@ -1,7 +1,7 @@
 /**
  * Flume breakpoints.
  */
-export interface Screens {
+export interface Breakpoints {
   /**
    * String index signature for type compat.
    */

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'

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
 }

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,15 +19,15 @@ const parseBreakpoints = (breakpoints: Screens): NumberedBreakpoints => {
 
 export interface BreakpointsProps {
   breakpoints: NumberedBreakpoints
-  current: keyof Screens
+  current: keyof Breakpoints
   isMobile: boolean
   isDesktop: boolean
 }
 
 /** 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'

src/tailwind/config.ts

@@ -10,7 +10,7 @@ export const getConfig = (theme: Theme = gameflowTheme): Partial<TailwindConfig>
     shadows,
     borderRadius,
     animations: animation,
-    screens,
+    breakpoints,
     typography,
     motion,
   } = theme
@@ -24,7 +24,7 @@ export const getConfig = (theme: Theme = gameflowTheme): Partial<TailwindConfig>
         fontWeight,
         borderRadius,
       },
-      screens,
+      screens: breakpoints,
       colors,
       spacing,
       animation,