JSXUI Text Component Example

Example.tsx

import { Text } from 'components'

export default function Example() {
  return (
    <Text scale={{ initial: 1, hover: 1.2 }}>
      Hello <Text>World</Text>
    </Text>
  )
}

system.ts

const { createComponent } = createSystem({
  mediaQueries: {
    small: '@media (min-width: 0px)',
    medium: '@media (min-width: 720px)',
    large: '@media (min-width: 1280px)',
    dark: '@media (prefers-color-scheme: dark)',
  },
  colors: {
    foreground: { initial: '#000', dark: '#fff' },
    background: { initial: '#fff', dark: '#000' },
  },
})

export { createComponent }

Text.tsx

import { createContext, useContext } from 'react'
import { createComponent } from 'system'
import { useHover } from 'hooks'

export type TextProps = {
  color: string
  fontSize: string
  fontWeight: number
  lineHeight: string
  scale: number
}

const TextAncestorContext = createContext(false)

export const TextDebugContext = createContext(false)

export const Text = createComponent<TextProps>(
  function ({ Element, props }) {
    const isDebugging = useContext(TextDebugContext)
    const isDescendant = useContext(TextAncestorContext)
    const [isHover, hoverProps] = useHover()
    return (
      <TextAncestorContext.Provider value={true}>
        <Element
          variants={{
            debug: isDebugging,
            descendant: isDescendant,
            hover: isHover,
          }}
          {...hoverProps}
          {...props}
        />
      </TextAncestorContext.Provider>
    )
  },
  {
    defaults: {
      color: 'foreground',
      variant: 'body1',
    },
    transforms: {
      color: (value, theme) => ({ color: theme.colors[value] || value }),
      fontSize: (value) => ({ fontSize: value }),
      fontWeight: (value) => ({ fontWeight: value }),
      lineHeight: (value) => ({ fontSize: value }),
      scale: (value) => ({
        transform: (currentValue) => `${currentValue} scale(${value})`,
      }),
    },
    variants: {
      heading1: {
        element: 'h1',
        fontSize: '5rem',
        fontWeight: 700,
        lineHeight: '1',
      },
      heading2: {
        element: 'h2',
        fontSize: '3.5rem',
        fontWeight: 500,
        lineHeight: '1.25',
      },
      heading3: {
        element: 'h3',
        fontSize: '2rem',
        fontWeight: 500,
        lineHeight: '1.25',
      },
      body1: {
        element: { initial: 'p', descendant: 'span' },
        fontSize: { small: '1rem', large: '1.5rem' },
        fontWeight: 400,
        lineHeight: '1.5',
      },
      body2: {
        element: { initial: 'p', descendant: 'span' },
        fontSize: '0.75rem',
        fontWeight: 400,
        lineHeight: '1.25',
      },
      mark: {
        element: 'mark',
        background: 'linear-gradient(180deg, #E3BEFF, #A734FF)',
        WebkitBackgroundClip: 'text',
        WebkitTextFillColor: 'transparent',
      },
      debug: {
        boxShadow: '0 0 0 1px blue',
      },
    },
  }
)