Taimoormk

// below line will import Button from the package, but also it will bring in all items being exported from the root.

import { Button } from '@react-pakistan/react-commons-collection';

// in contrast of the above line, following line will only import the Button and any of it's associated exported items, i.e. interfaces or enums but this way the overall bundle size of your app will be minimum as possible.

import { Button } from '@react-pakistan/react-commons-collection/button';

// For all SVG based React Pakistan packages, root level export is not enabled, since we don't want developers to accidentally import the entire package SVG items, as that can be quite much. Below is the way to import any SVG from their categorized folder.

Taimoormk

  import { BodyParts1 } from '@react-pakistan/react-logo-collection/emoji/body-parts';

  <BodyParts1
    fontSize='32px'
  />

Taimoormk

  import { BitcoinColor22 } from '@react-pakistan/react-logo-collection/logos/bitcoin-color';

  <BitcoinColor22
    fontSize='32px'
    color='#2E2E2E'
  />

Taimoormk

  import { FourthofjulyGrey12 } from '@react-pakistan/react-icons-collection/fourthofjuly-grey';

  <FourthofjulyGrey12
    fontSize='32px'
    fill='#2E2E2E'
  />

Taimoormk

  import { theme } from '@react-pakistan/util-functions';

  // create a copy of entire theme object
  export const myCoolAppTheme = { ...theme };

  // then start updating required nodes with your design specifications
  myCoolAppTheme.typography.fontFamily = 'Montserrat';
  myCoolAppTheme.typography.h1 = {
    ...myCoolAppTheme.typography.h1,
  };

Taimoormk

  import React from 'react';
  import { withTheme } from 'styled-components';

  export const Heading = withTheme(({
    theme,
  }) => (
    <H1
      color={theme.colors.cherryRed}
    />
  ));

Taimoormk

  import styled from 'styled-components';

  export const StyledSection = styled.section`
    background-color: ${({ theme }) => theme.colors.cherryRed};
  `;

Taimoormk

  import { ThemeProvider } from 'styled-components';
  import { theme } from '@react-pakistan/util-functions';

  <ThemeProvider theme={theme}>
    <App />
  </ThemeProvider>

Taimoormk

  interface ITheme {
    avatarSizes : IAvatarSizes;
    breakpoints : IBreakpoints;
    colors : IColors;
    misc : IMisc;
    radius : IRadius;
    shadow : IShadow;
    spacing : ISpacing;
    typography : ITypography;
    zIndex : IZindex;

Taimoormk

  <H1
    color='#FFFFFF'
    desktop={`
      color: red;
    `}
    fontFamily='Playfair Display'
    fontSize='2em'
    fontWeight={700}
    laptop=''
    laptopL=''