react-native-varia 0.0.1 → 0.2.1

package/lib/varia/defaultTheme.ts

@@ -0,0 +1,174 @@
+import {colorPalettes} from '../themes'
+
+export const defaultFontSizes = {
+  xxs: 10,
+  xs: 12,
+  sm: 14,
+  md: 16,
+  lg: 18,
+  xl: 20,
+  '2xl': 24,
+  '3xl': 30,
+  '4xl': 36,
+  '5xl': 48,
+  '6xl': 60,
+  '7xl': 72,
+} as const
+export const defaultFontWeights = {
+  semilight: 100,
+  light: 200,
+  thin: 300,
+  regular: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700,
+} as const
+
+export const defaultRadii = {
+  none: 0,
+  '2xs': 1,
+  xs: 2,
+  sm: 4,
+  md: 6,
+  lg: 8,
+  xl: 12,
+  '2xl': 16,
+  '3xl': 24,
+  full: 9999,
+} as const
+
+export const defaultSpacing = {
+  0: 0,
+  0.5: 2, // 0.125rem * 16
+  1: 4, // 0.25rem * 16
+  1.5: 6, // 0.375rem * 16
+  2: 8, // 0.5rem * 16
+  2.5: 10, // 0.625rem * 16
+  3: 12, // 0.75rem * 16
+  3.5: 14, // 0.875rem * 16
+  4: 16, // 1rem * 16
+  4.5: 18, // 1.125rem * 16
+  5: 20, // 1.25rem * 16
+  6: 24, // 1.5rem * 16
+  7: 28, // 1.75rem * 16
+  8: 32, // 2rem * 16
+  9: 36, // 2.25rem * 16
+  10: 40, // 2.5rem * 16
+  11: 44, // 2.75rem * 16
+  12: 48, // 3rem * 16
+  14: 56, // 3.5rem * 16
+  16: 64, // 4rem * 16
+  20: 80, // 5rem * 16
+  24: 96, // 6rem * 16
+  28: 112, // 7rem * 16
+  32: 128, // 8rem * 16
+  36: 144, // 9rem * 16
+  40: 160, // 10rem * 16
+  44: 176, // 11rem * 16
+  48: 192, // 12rem * 16
+  52: 208, // 13rem * 16
+  56: 224, // 14rem * 16
+  60: 240, // 15rem * 16
+  64: 256, // 16rem * 16
+  72: 288, // 18rem * 16
+  80: 320, // 20rem * 16
+  96: 384, // 24rem * 16
+} as const
+
+export const defaultSizes = {
+  0: 0,
+  1: 4,
+  2: 8,
+  3: 12,
+  4: 16,
+  5: 20,
+  6: 24,
+  7: 28,
+  8: 32,
+  9: 36,
+  10: 40,
+  11: 44,
+  12: 48,
+  14: 56,
+  16: 64,
+  20: 80,
+  24: 96,
+  28: 112,
+  32: 128,
+  36: 144,
+  40: 160,
+  44: 176,
+  48: 192,
+  52: 208,
+  56: 224,
+  60: 240,
+  64: 256,
+  72: 288,
+  80: 320,
+  96: 384,
+  0.5: 2,
+  1.5: 6,
+  2.5: 10,
+  3.5: 14,
+  4.5: 18,
+  '2xs': 256,
+  xs: 320,
+  sm: 384,
+  md: 448,
+  lg: 512,
+  xl: 576,
+  '2xl': 672,
+  '3xl': 768,
+  '4xl': 896,
+  '5xl': 1024,
+  '6xl': 1152,
+  '7xl': 1280,
+  '8xl': 1440,
+  full: '100%',
+} as const
+
+export const defaultColors = {
+  black: {
+    0: '#000000',
+    a1: 'rgba(0, 0, 0, 0.05)',
+    a2: 'rgba(0, 0, 0, 0.1)',
+    a3: 'rgba(0, 0, 0, 0.15)',
+    a4: 'rgba(0, 0, 0, 0.2)',
+    a5: 'rgba(0, 0, 0, 0.3)',
+    a6: 'rgba(0, 0, 0, 0.4)',
+    a7: 'rgba(0, 0, 0, 0.5)',
+    a8: 'rgba(0, 0, 0, 0.6)',
+    a9: 'rgba(0, 0, 0, 0.7)',
+    a10: 'rgba(0, 0, 0, 0.8)',
+    a11: 'rgba(0, 0, 0, 0.9)',
+    a12: 'rgba(0, 0, 0, 0.95)',
+  },
+  white: {
+    0: '#FFFFFF',
+    a1: 'rgba(255, 255, 255, 0.05)',
+    a2: 'rgba(255, 255, 255, 0.1)',
+    a3: 'rgba(255, 255, 255, 0.15)',
+    a4: 'rgba(255, 255, 255, 0.2)',
+    a5: 'rgba(255, 255, 255, 0.3)',
+    a6: 'rgba(255, 255, 255, 0.4)',
+    a7: 'rgba(255, 255, 255, 0.5)',
+    a8: 'rgba(255, 255, 255, 0.6)',
+    a9: 'rgba(255, 255, 255, 0.7)',
+    a10: 'rgba(255, 255, 255, 0.8)',
+    a11: 'rgba(255, 255, 255, 0.9)',
+    a12: 'rgba(255, 255, 255, 0.95)',
+  },
+} as const
+
+export const defaultShadows = (
+  themeColors: typeof colorPalettes.light | typeof colorPalettes.dark,
+) => {
+  return {
+    xs: `0px 1px 1px var(${defaultColors.black.a12}), 0px 0px 1px inset var(${themeColors.gray.a7})`,
+    sm: `0px 2px 4px var(${defaultColors.black.a10}), 0px 0px 1px inset var(${themeColors.gray.a7})`,
+    md: `0px 8px 16px var(${defaultColors.black.a10}), 0px 0px 1px inset var(${themeColors.gray.a7})`,
+    lg: `0px 16px 24px var(${defaultColors.black.a10}), 0px 0px 1px inset var(${themeColors.gray.a7})`,
+    xl: `0px 24px 40px var(${defaultColors.black.a10}), 0px 0px 1px inset var(${themeColors.gray.a7})`,
+    '2xl': `0px 24px 40px var(${defaultColors.black.a10}), 0px 0px 1px inset var(${themeColors.gray.a7})`,
+  }
+}

package/lib/varia/mixins.ts

@@ -0,0 +1,223 @@
+import {StyleSheet} from 'react-native-unistyles'
+import {ThemeColors} from './types'
+import {extractThemeColor} from './utils'
+
+const mixins = StyleSheet.create((theme, rt) => ({
+  size: (width: number, height: number = width) => ({
+    width,
+    height,
+  }),
+  row: {
+    justifyContent: 'center',
+    flexDirection: 'row',
+  },
+  gap: (gap: number) => ({
+    gap,
+  }),
+  center: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  sx: (sx: any) => ({
+    ...sx,
+  }),
+  w: (width: number) => ({
+    width,
+  }),
+  h: (height: number) => ({
+    height,
+  }),
+  font: (fontSize: number) => ({
+    fontSize,
+  }),
+  bg: (backgroundColor: ThemeColors) => ({
+    backgroundColor: extractThemeColor(backgroundColor, theme),
+  }),
+  flexColumn: (flex: number = 1) => ({
+    flex,
+    width: '100%',
+  }),
+  flexRow: (flex: number = 1) => ({
+    flex,
+    height: '100%',
+  }),
+  minMaxW: (minWidth: number, maxWidth: number) => ({
+    minWidth,
+    maxWidth,
+  }),
+  minMaxH: (minHeight: number, maxHeight: number) => ({
+    minHeight,
+    maxHeight,
+  }),
+  vw: (amount: number) => ({
+    width:
+      ((rt.screen.width - rt.insets.left - rt.insets.right) * amount) / 100,
+  }),
+  vh: (amount: number) => ({
+    height:
+      ((rt.screen.height - rt.insets.top - rt.insets.bottom) * amount) / 100,
+  }),
+  vwh: (amount: number) => ({
+    width:
+      ((rt.screen.width - rt.insets.left - rt.insets.right) * amount) / 100,
+    height:
+      ((rt.screen.height - rt.insets.top - rt.insets.bottom) * amount) / 100,
+  }),
+  self: (
+    alignSelf: 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch',
+  ) => ({
+    alignSelf,
+  }),
+  justify: (
+    justifyContent:
+      | 'flex-start'
+      | 'flex-end'
+      | 'center'
+      | 'space-around'
+      | 'space-between'
+      | 'space-evenly',
+  ) => ({
+    justifyContent,
+  }),
+  rtl: {
+    direction: 'rtl',
+  },
+  ar: (aspectRatio: number) => ({
+    aspectRatio,
+  }),
+  br: (borderRadius: number) => ({
+    borderRadius,
+  }),
+  bw: (borderWidth: number) => ({
+    borderWidth,
+  }),
+  bc: (borderColor: ThemeColors) => ({
+    borderColor: extractThemeColor(borderColor, theme),
+  }),
+  border: (borderWidth: number, borderColor: ThemeColors) => ({
+    borderWidth,
+    borderColor: extractThemeColor(borderColor, theme),
+  }),
+  m: (margin: number) => ({
+    margin,
+  }),
+  mt: (marginTop: number) => ({
+    marginTop,
+  }),
+  mb: (marginBottom: number) => ({
+    marginBottom,
+  }),
+  ml: (marginLeft: number) => ({
+    marginLeft,
+  }),
+  mr: (marginRight: number) => ({
+    marginRight,
+  }),
+  mx: (marginHorizontal: number) => ({
+    marginHorizontal,
+  }),
+  my: (marginVertical: number) => ({
+    marginVertical,
+  }),
+  p: (padding: number) => ({
+    padding,
+  }),
+  pt: (paddingTop: number) => ({
+    paddingTop,
+  }),
+  pb: (paddingBottom: number) => ({
+    paddingBottom,
+  }),
+  pl: (paddingLeft: number) => ({
+    paddingLeft,
+  }),
+  pr: (paddingRight: number) => ({
+    paddingRight,
+  }),
+  px: (paddingHorizontal: number) => ({
+    paddingHorizontal,
+  }),
+  py: (paddingVertical: number) => ({
+    paddingVertical,
+  }),
+  t: (top: number = 0) => ({
+    position: 'absolute',
+    top,
+  }),
+  b: (bottom: number = 0) => ({
+    position: 'absolute',
+    bottom,
+  }),
+  l: (left: number = 0) => ({
+    position: 'absolute',
+    left,
+  }),
+  r: (right: number = 0) => ({
+    position: 'absolute',
+    right,
+  }),
+  static: {
+    position: 'static',
+  },
+  absolute: {
+    position: 'absolute',
+  },
+  relative: {
+    position: 'relative',
+  },
+  z: (zIndex: number) => ({
+    zIndex,
+  }),
+  opacity: (opacity: number) => ({
+    opacity,
+  }),
+  circle: {
+    borderRadius: 9999,
+  },
+}))
+
+export const {
+  size,
+  row,
+  gap,
+  center,
+  sx,
+  flexColumn,
+  w,
+  h,
+  minMaxW,
+  minMaxH,
+  vw,
+  vh,
+  vwh,
+  self,
+  justify,
+  border,
+  bc,
+  bg,
+  br,
+  p,
+  m,
+  mt,
+  mb,
+  ml,
+  mr,
+  mx,
+  my,
+  pt,
+  pb,
+  pl,
+  pr,
+  px,
+  py,
+  t,
+  b,
+  l,
+  r,
+  absolute,
+  relative,
+  z,
+  opacity,
+  circle,
+  font,
+} = mixins

package/lib/varia/textStyles.ts

@@ -0,0 +1,48 @@
+import {StyleSheet} from 'react-native-unistyles'
+
+export const textStyle = StyleSheet.create((theme, rt) => ({
+  xs: {
+    fontSize: theme.fontSizes.xs,
+    lineHeight: 12,
+  },
+  sm: {
+    fontSize: theme.fontSizes.sm,
+    lineHeight: 20,
+  },
+  md: {
+    fontSize: theme.fontSizes.md,
+    lineHeight: 24,
+  },
+  lg: {
+    fontSize: theme.fontSizes.lg,
+    lineHeight: 28,
+  },
+  xl: {
+    fontSize: theme.fontSizes.xl,
+    lineHeight: 30,
+  },
+  '2xl': {
+    fontSize: theme.fontSizes['2xl'],
+    lineHeight: 32,
+  },
+  '3xl': {
+    fontSize: theme.fontSizes['3xl'],
+    lineHeight: 38,
+  },
+  '4xl': {
+    fontSize: theme.fontSizes['4xl'],
+    lineHeight: 44,
+  },
+  '5xl': {
+    fontSize: theme.fontSizes['5xl'],
+    lineHeight: 60,
+  },
+  '6xl': {
+    fontSize: theme.fontSizes['6xl'],
+    lineHeight: 72,
+  },
+  '7xl': {
+    fontSize: theme.fontSizes['7xl'],
+    lineHeight: 92,
+  },
+}))

package/lib/varia/types.ts

@@ -0,0 +1,277 @@
+import {darkTheme, lightTheme} from '../themes'
+
+export interface AlphaPalette {
+  '0': string
+  a1: string
+  a2: string
+  a3: string
+  a4: string
+  a5: string
+  a6: string
+  a7: string
+  a8: string
+  a9: string
+  a10: string
+  a11: string
+  a12: string
+}
+
+export interface BlackWhitePalette {
+  black: AlphaPalette
+  white: AlphaPalette
+}
+
+export interface ColorPaletteBase {
+  '1': string
+  '2': string
+  '3': string
+  '4': string
+  '5': string
+  '6': string
+  '7': string
+  '8': string
+  '9': string
+  '10': string
+  '11': string
+  '12': string
+  a1: string
+  a2: string
+  a3: string
+  a4: string
+  a5: string
+  a6: string
+  a7: string
+  a8: string
+  a9: string
+  a10: string
+  a11: string
+  a12: string
+}
+
+export interface ColorSchema {
+  theme: ColorTheme
+}
+
+export interface ColorTheme {
+  light: ColorScheme & CustomColorScheme
+  dark: ColorScheme & CustomColorScheme
+}
+
+export interface ColorScheme {
+  gray: ColorPalette
+  accent: ColorPalette
+  fg: ColorPaletteForeground
+  bg: ColorPaletteBackground
+  border: ColorPaletteBorder
+}
+
+export interface CustomColorScheme {
+  [palette: string]: ColorPalette
+}
+
+export interface ColorPaletteSemantic {
+  default: string
+  emphasized: string
+  fg: string
+  text: string
+}
+
+export interface CreatePresetDTO {
+  accent: ThemePresetDTO
+  gray: ThemePresetDTO
+  [palette: string]: ThemePresetDTO
+}
+
+export interface ThemePresetDTO {
+  light: ColorPaletteBase
+  dark: ColorPaletteBase
+}
+
+export type ColorPalette = ColorPaletteBase & ColorPaletteSemantic
+
+interface ColorPaletteUI {
+  default: string
+  muted: string
+  subtle: string
+  disabled: string
+}
+
+export interface ColorPaletteForeground extends ColorPaletteUI {
+  error: string
+}
+export interface ColorPaletteBorder extends ColorPaletteUI {
+  outline: string
+  error: string
+}
+
+export interface ColorPaletteBackground extends ColorPaletteUI {
+  canvas: string
+  emphasized: string
+}
+
+const themes = {
+  light: lightTheme,
+  dark: darkTheme,
+}
+
+export type ColorPaletteType =
+  keyof (typeof themes)[keyof typeof themes]['colors']
+
+export type ColorsType = (typeof themes)[keyof typeof themes]['colors']
+
+export type NestedColorsType = (typeof themes)[keyof typeof themes]['colors']
+
+type ConstantPalettes = 'bg' | 'fg' | 'border'
+
+export type PalettesWithNestedKeys = {
+  [K in keyof NestedColorsType]: NestedColorsType[K] extends object
+    ? K extends ConstantPalettes
+      ? never
+      : K
+    : never
+}[keyof NestedColorsType]
+
+export type ThemeType = (typeof themes)[keyof typeof themes]
+
+export type TextSemanticSizes =
+  | 'h1'
+  | 'h2'
+  | 'h3'
+  | 'h4'
+  | 'h5'
+  | 'h6'
+  | 'h7'
+  | 'h8'
+  | 'h9'
+  | 'body'
+
+export type directions =
+  | 'to top'
+  | 'to bottom'
+  | 'to left'
+  | 'to right'
+  | 'to top left'
+  | 'to top right'
+  | 'to bottom left'
+  | 'to bottom right'
+
+type ColorName = keyof ColorsType
+
+type LooseString<T extends string> = T | (string & {})
+
+type DotPrefix<T extends string, P extends string> = `${P}.${T}`
+
+export type DotNestedKeys<T, Prefix extends string = ''> = {
+  [K in keyof T]: T[K] extends object
+    ? DotNestedKeys<
+        T[K],
+        Prefix extends '' ? K & string : DotPrefix<K & string, Prefix>
+      >
+    : Prefix extends ''
+    ? K & string
+    : DotPrefix<K & string, Prefix>
+}[keyof T]
+
+type ColorKeys = DotNestedKeys<ColorsType>
+
+export type ThemeColors = LooseString<ColorKeys>
+
+export function createGradientTokens<
+  const V extends Record<
+    string,
+    {startColor: ThemeColors; endColor: ThemeColors}
+  >,
+>(tokens: {
+  defaultProps: {
+    variant: keyof V
+    direction: directions
+  }
+  variants: {
+    direction: Record<
+      directions,
+      {x1: number; y1: number; x2: number; y2: number}
+    >
+    variant: V
+  }
+}) {
+  return tokens
+}
+export function createGradientTextTokens<
+  const V extends Record<
+    string,
+    {startColor: ThemeColors; endColor: ThemeColors}
+  >,
+  const TS extends Record<
+    string,
+    {fontSize: number | string; fontWeight?: number; lineHeight?: number}
+  >,
+>(tokens: {
+  defaultProps: {
+    variant: keyof V
+    direction: directions
+    size: keyof TS
+  }
+  variants: {
+    direction: Record<
+      directions,
+      {x1: number; y1: number; x2: number; y2: number}
+    >
+    variant: V
+    size: TS
+  }
+}) {
+  return tokens
+}
+
+type SVGSize = {
+  width: number
+  height: number
+  viewBoxWidth: number
+  viewBoxHeight: number
+}
+
+export function createIconTokens<
+  const V extends Record<string, {color: ThemeColors}>,
+  const S extends Record<string, SVGSize>,
+>(tokens: {
+  defaultProps: {
+    variant: keyof V
+    sizeVariant: keyof S
+    scale: number
+  }
+  variants: {
+    sizeVariant: S
+    variant: V
+  }
+}) {
+  return tokens
+}
+
+export type SliderTokensType = {
+  defaultProps: {
+    size: string
+    color: ThemeColors
+  }
+}
+
+export function createCircleProgressTokens<
+  const V extends Record<
+    string,
+    {trackColor: ThemeColors; progressColor: ThemeColors}
+  >,
+  const S extends Record<
+    string,
+    {trackStrokeWidth: number; progressStrokeWidth: number}
+  >,
+>(tokens: {
+  defaultProps: {
+    variant: keyof V
+    size: keyof S
+  }
+  variants: {
+    size: S
+    variant: V
+  }
+}) {
+  return tokens
+}