chore: copy create,theme fn from styled-components

Author: igorwessel

packages/styled-components-native/src/create.ts

@@ -0,0 +1,20 @@
+import { StyleGenerator } from '@xstyled/system'
+import { createCssFunction, XCSSFunction } from './createCssFunction'
+import { createX, X } from './createX'
+import { createStyled, XStyled } from './createStyled'
+
+interface XStyledSet<TGen extends StyleGenerator> {
+  css: XCSSFunction
+  x: X<TGen>
+  styled: XStyled
+}
+
+export const createCss = <TGen extends StyleGenerator>(
+  generator: TGen,
+): XStyledSet<TGen> => {
+  return {
+    css: createCssFunction(generator),
+    x: createX(generator),
+    styled: createStyled(generator),
+  }
+}

packages/styled-components-native/src/theme.ts

@@ -0,0 +1,40 @@
+import { useContext, ContextType } from 'react'
+import { ThemeContext } from 'styled-components/native'
+import { createUseGetter } from '@xstyled/core'
+import { th } from '@xstyled/system'
+
+export const useTheme = (): ContextType<typeof ThemeContext> => {
+  return useContext(ThemeContext)
+}
+
+export const useTh = createUseGetter(th, useTheme)
+
+export const useAngle = createUseGetter(th.angle, useTheme)
+export const useAnimation = createUseGetter(th.animation, useTheme)
+export const useBorder = createUseGetter(th.border, useTheme)
+export const useBorderColor = createUseGetter(th.borderColor, useTheme)
+export const useBorderStyle = createUseGetter(th.borderStyle, useTheme)
+export const useBorderWidth = createUseGetter(th.borderWidth, useTheme)
+export const useColor = createUseGetter(th.color, useTheme)
+export const useDuration = createUseGetter(th.duration, useTheme)
+export const useFont = createUseGetter(th.font, useTheme)
+export const useFontSize = createUseGetter(th.fontSize, useTheme)
+export const useFontWeight = createUseGetter(th.fontWeight, useTheme)
+export const useInset = createUseGetter(th.inset, useTheme)
+export const useLetterSpacing = createUseGetter(th.letterSpacing, useTheme)
+export const useLineHeight = createUseGetter(th.lineHeight, useTheme)
+export const usePercent = createUseGetter(th.percent, useTheme)
+export const usePx = createUseGetter(th.px, useTheme)
+export const useRadius = createUseGetter(th.radius, useTheme)
+export const useRingWidth = createUseGetter(th.ringWidth, useTheme)
+export const useShadow = createUseGetter(th.shadow, useTheme)
+export const useSize = createUseGetter(th.size, useTheme)
+export const useSpace = createUseGetter(th.space, useTheme)
+export const useTimingFunction = createUseGetter(th.timingFunction, useTheme)
+export const useTransform = createUseGetter(th.transform, useTheme)
+export const useTransition = createUseGetter(th.transition, useTheme)
+export const useTransitionProperty = createUseGetter(
+  th.transitionProperty,
+  useTheme,
+)
+export const useZIndex = createUseGetter(th.zIndex, useTheme)