Function Text

Parameters

• props: ColorProps<{
      borderRadii: {
          lg: number;
          md: number;
          sm: number;
          xl: number;
          xs: number;
          xxl: number;
      };
      colors: {
          accentButtonColor: string;
          accentButtonTextColor: string;
          background: string;
          backgroundHighlight: string;
          backgroundInverted: string;
          black: string;
          border: string;
          buttonBackgroundColor: string;
          buttonBorderColor: string;
          buttonTextColor: string;
          error: string;
          iconHighlight: string;
          iconPrimary: string;
          iconSecondary: string;
          labelBackground: string;
          linkPrimary: string;
          red: string;
          textPrimary: string;
          textSecondary: string;
          warning: string;
          white: string;
      };
      spacing: {
          lg: number;
          md: number;
          none: number;
          sm: number;
          xl: number;
          xmd: number;
          xs: number;
          xxl: number;
          xxs: number;
      };
      textVariants: {
          bodyLarge: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          bodyLargeBold: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          bodySmall: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          bodySmallBold: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          bodySmallSecondary: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          defaults: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
          };
          error: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          header: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
          };
          headerBold: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
          };
          link: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              letterSpacing: number;
              lineHeight: number;
          };
          subHeader: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
          };
      };
  }> & OpacityProps<{
      borderRadii: {
          lg: number;
          md: number;
          sm: number;
          xl: number;
          xs: number;
          xxl: number;
      };
      colors: {
          accentButtonColor: string;
          accentButtonTextColor: string;
          background: string;
          backgroundHighlight: string;
          backgroundInverted: string;
          black: string;
          border: string;
          buttonBackgroundColor: string;
          buttonBorderColor: string;
          buttonTextColor: string;
          error: string;
          iconHighlight: string;
          iconPrimary: string;
          iconSecondary: string;
          labelBackground: string;
          linkPrimary: string;
          red: string;
          textPrimary: string;
          textSecondary: string;
          warning: string;
          white: string;
      };
      spacing: {
          lg: number;
          md: number;
          none: number;
          sm: number;
          xl: number;
          xmd: number;
          xs: number;
          xxl: number;
          xxs: number;
      };
      textVariants: {
          bodyLarge: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          bodyLargeBold: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          bodySmall: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          bodySmallBold: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          bodySmallSecondary: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          defaults: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
          };
          error: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          header: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
          };
          headerBold: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
          };
          link: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              letterSpacing: number;
              lineHeight: number;
          };
          subHeader: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
          };
      };
  }> & VisibleProps<{
      borderRadii: {
          lg: number;
          md: number;
          sm: number;
          xl: number;
          xs: number;
          xxl: number;
      };
      colors: {
          accentButtonColor: string;
          accentButtonTextColor: string;
          background: string;
          backgroundHighlight: string;
          backgroundInverted: string;
          black: string;
          border: string;
          buttonBackgroundColor: string;
          buttonBorderColor: string;
          buttonTextColor: string;
          error: string;
          iconHighlight: string;
          iconPrimary: string;
          iconSecondary: string;
          labelBackground: string;
          linkPrimary: string;
          red: string;
          textPrimary: string;
          textSecondary: string;
          warning: string;
          white: string;
      };
      spacing: {
          lg: number;
          md: number;
          none: number;
          sm: number;
          xl: number;
          xmd: number;
          xs: number;
          xxl: number;
          xxs: number;
      };
      textVariants: {
          bodyLarge: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          bodyLargeBold: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          bodySmall: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          bodySmallBold: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          bodySmallSecondary: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          defaults: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
          };
          error: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          header: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
          };
          headerBold: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
          };
          link: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              letterSpacing: number;
              lineHeight: number;
          };
          subHeader: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
          };
      };
  }> & TypographyProps<{
      borderRadii: {
          lg: number;
          md: number;
          sm: number;
          xl: number;
          xs: number;
          xxl: number;
      };
      colors: {
          accentButtonColor: string;
          accentButtonTextColor: string;
          background: string;
          backgroundHighlight: string;
          backgroundInverted: string;
          black: string;
          border: string;
          buttonBackgroundColor: string;
          buttonBorderColor: string;
          buttonTextColor: string;
          error: string;
          iconHighlight: string;
          iconPrimary: string;
          iconSecondary: string;
          labelBackground: string;
          linkPrimary: string;
          red: string;
          textPrimary: string;
          textSecondary: string;
          warning: string;
          white: string;
      };
      spacing: {
          lg: number;
          md: number;
          none: number;
          sm: number;
          xl: number;
          xmd: number;
          xs: number;
          xxl: number;
          xxs: number;
      };
      textVariants: {
          bodyLarge: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          bodyLargeBold: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          bodySmall: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          bodySmallBold: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          bodySmallSecondary: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          defaults: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
          };
          error: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          header: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
          };
          headerBold: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
          };
          link: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              letterSpacing: number;
              lineHeight: number;
          };
          subHeader: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
          };
      };
  }> & SpacingProps<{
      borderRadii: {
          lg: number;
          md: number;
          sm: number;
          xl: number;
          xs: number;
          xxl: number;
      };
      colors: {
          accentButtonColor: string;
          accentButtonTextColor: string;
          background: string;
          backgroundHighlight: string;
          backgroundInverted: string;
          black: string;
          border: string;
          buttonBackgroundColor: string;
          buttonBorderColor: string;
          buttonTextColor: string;
          error: string;
          iconHighlight: string;
          iconPrimary: string;
          iconSecondary: string;
          labelBackground: string;
          linkPrimary: string;
          red: string;
          textPrimary: string;
          textSecondary: string;
          warning: string;
          white: string;
      };
      spacing: {
          lg: number;
          md: number;
          none: number;
          sm: number;
          xl: number;
          xmd: number;
          xs: number;
          xxl: number;
          xxs: number;
      };
      textVariants: {
          bodyLarge: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          bodyLargeBold: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          bodySmall: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          bodySmallBold: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          bodySmallSecondary: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          defaults: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
          };
          error: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          header: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
          };
          headerBold: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
          };
          link: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              letterSpacing: number;
              lineHeight: number;
          };
          subHeader: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
          };
      };
  }> & {} & {} & VariantProps<{
      borderRadii: {
          lg: number;
          md: number;
          sm: number;
          xl: number;
          xs: number;
          xxl: number;
      };
      colors: {
          accentButtonColor: string;
          accentButtonTextColor: string;
          background: string;
          backgroundHighlight: string;
          backgroundInverted: string;
          black: string;
          border: string;
          buttonBackgroundColor: string;
          buttonBorderColor: string;
          buttonTextColor: string;
          error: string;
          iconHighlight: string;
          iconPrimary: string;
          iconSecondary: string;
          labelBackground: string;
          linkPrimary: string;
          red: string;
          textPrimary: string;
          textSecondary: string;
          warning: string;
          white: string;
      };
      spacing: {
          lg: number;
          md: number;
          none: number;
          sm: number;
          xl: number;
          xmd: number;
          xs: number;
          xxl: number;
          xxs: number;
      };
      textVariants: {
          bodyLarge: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          bodyLargeBold: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          bodySmall: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          bodySmallBold: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          bodySmallSecondary: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          defaults: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
          };
          error: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          header: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
          };
          headerBold: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
          };
          link: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              letterSpacing: number;
              lineHeight: number;
          };
          subHeader: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
          };
      };
  }, "textVariants"> & SpacingShorthandProps<{
      borderRadii: {
          lg: number;
          md: number;
          sm: number;
          xl: number;
          xs: number;
          xxl: number;
      };
      colors: {
          accentButtonColor: string;
          accentButtonTextColor: string;
          background: string;
          backgroundHighlight: string;
          backgroundInverted: string;
          black: string;
          border: string;
          buttonBackgroundColor: string;
          buttonBorderColor: string;
          buttonTextColor: string;
          error: string;
          iconHighlight: string;
          iconPrimary: string;
          iconSecondary: string;
          labelBackground: string;
          linkPrimary: string;
          red: string;
          textPrimary: string;
          textSecondary: string;
          warning: string;
          white: string;
      };
      spacing: {
          lg: number;
          md: number;
          none: number;
          sm: number;
          xl: number;
          xmd: number;
          xs: number;
          xxl: number;
          xxs: number;
      };
      textVariants: {
          bodyLarge: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          bodyLargeBold: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          bodySmall: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          bodySmallBold: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          bodySmallSecondary: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          defaults: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
          };
          error: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          header: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
          };
          headerBold: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
          };
          link: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              letterSpacing: number;
              lineHeight: number;
          };
          subHeader: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
          };
      };
  }> & Omit<TextProps & {}, "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "letterSpacing" | "textAlign" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginHorizontal" | "marginVertical" | "marginStart" | "marginEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingHorizontal" | "paddingVertical" | "paddingStart" | "paddingEnd" | "columnGap" | "rowGap" | "gap" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "ms" | "me" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "ps" | "pe" | "g" | "rg" | "cg" | "opacity" | "visible" | "fontStyle" | "includeFontPadding" | "fontVariant" | "textAlignVertical" | "textDecorationLine" | "textDecorationStyle" | "textTransform" | "verticalAlign" | "writingDirection" | "textShadowOffset" | "textShadowRadius" | "variant" | "textShadowColor" | keyof ColorProps<{
      borderRadii: {
          lg: number;
          md: number;
          sm: number;
          xl: number;
          xs: number;
          xxl: number;
      };
      colors: {
          accentButtonColor: string;
          accentButtonTextColor: string;
          background: string;
          backgroundHighlight: string;
          backgroundInverted: string;
          black: string;
          border: string;
          buttonBackgroundColor: string;
          buttonBorderColor: string;
          buttonTextColor: string;
          error: string;
          iconHighlight: string;
          iconPrimary: string;
          iconSecondary: string;
          labelBackground: string;
          linkPrimary: string;
          red: string;
          textPrimary: string;
          textSecondary: string;
          warning: string;
          white: string;
      };
      spacing: {
          lg: number;
          md: number;
          none: number;
          sm: number;
          xl: number;
          xmd: number;
          xs: number;
          xxl: number;
          xxs: number;
      };
      textVariants: {
          bodyLarge: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          bodyLargeBold: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          bodySmall: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          bodySmallBold: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          bodySmallSecondary: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          defaults: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
          };
          error: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
              textAlign: string;
          };
          header: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
          };
          headerBold: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
          };
          link: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              letterSpacing: number;
              lineHeight: number;
          };
          subHeader: {
              color: string;
              fontFamily: undefined | string;
              fontSize: number;
              fontWeight: string;
              lineHeight: number;
          };
      };
  }>> & RefAttributes<unknown>