@ramses-superapp/ramses-ui/src/styles/types.ts

Skinless UI primitives for Ramses Built Apps

import type {
  ColorValue,
  DimensionValue,
  StyleProp,
  TextInputProps,
  TextProps,
  TextStyle,
  ViewStyle,
} from 'react-native';

export type Theme = {
  Background: {
    screen: ColorValue;
    input: ColorValue;
    primaryButton: ColorValue;
    secondaryButton: ColorValue;
  };
  Text: {
    primaryTitle: ColorValue;
    text: ColorValue;
    highlightText: ColorValue;
    inputText: ColorValue;
    inputPlaceholder: ColorValue;
    primaryButtonText: ColorValue;
    secondaryButtonText: ColorValue;
  };
  Borders: {
    primaryButton: ColorValue;
    secondaryButton: ColorValue;
    input: ColorValue;
    inputActive: ColorValue;
  };
  StatusBar: {
    barStyle: 'light-content' | 'dark-content';
  };
};

export type FontWeight =
  | 'ExtraLight'
  | 'Light'
  | 'Regular'
  | 'Medium'
  | 'SemiBold'
  | 'Bold'
  | 'ExtraBold'
  | 'Black';

export type RsTextStyle = {
  text?: string | number | undefined;
  fontSize?: number;
  fontWeight?: FontWeight;
  textAlign?: 'left' | 'center' | 'right';
  textTransform?: 'none' | 'uppercase' | 'lowercase' | 'capitalize';
  color?: ColorValue;
  pressable?: boolean;
  onPress?: () => void;
  style?: StyleProp<TextStyle>;
  containerStyle?: StyleProp<ViewStyle>;
  props?: TextProps | {};
};

export type RsTextInputProps = TextInputProps & RsTextStyle;

export type RsButtonStyle = {
  title?: string | number | undefined;
  primary?: boolean;
  width?: DimensionValue;
  isLoading?: boolean;
  textStyle?: StyleProp<TextStyle>;
};