Hummingbird UI Assets

Hello there! This is the Hummingbird UI Design System.

This library contains the following assets for the other libraries in the design system:

• Colors
• Fonts

Importing Colors

Import required colors in the following manner:

import { primary, secondary } from '@afnexus/hummingbird-ui-assets'

The available colors are:

primary, 
secondary, 
neutrals, 
green, 
red, 
yellow, 
orange, 
purple, 
nPrimary, 
nSecondary, 
nNeutrals, 
nGreen, 
nRed, 
nYellow, 
nPurple, 
nOrange

Importing Fonts

You will need to import the fonts by referring to the filepath to the font in the @afnexus/hummingbird-ui-assets node module.

Assuming you want to import LatoBlack.ttf font into your index.js file, and your folder structure is the following:

my-app/
├─ node_modules/
│  ├─ @afnexus/
│     ├─ hummingbird-ui-assets
│        ├─ dist
│           ├─ fonts
│              ├─ LatoBlack.ttf
│              ├─ ...
├─ src/
│  ├─ index.js
├─ .gitignore
├─ package.json
├─ README.md

In your index.js file, your import statement would look like this:

import LatoBlack from '../node_modules/@afnexus/hummingbird-ui-assets/dist/fonts/LatoBlack.ttf

Additional Instructions for Developers Using Typescript

If you are using Typescript, you will need to declare .ttf files as modules to make Typescript recognize the font file types.

1. Create a file named fonts.d.ts. A good practice is to have a types folder in your src directory, and to store type declarations like fonts.d.ts there. You should have a file structure similar to the following:

...
├─ src/
│  ├─ index.tsx
│  ├─ types/
│     ├─ fonts.d.ts
...

2. In the fonts.d.ts file, declare the font file type module with the following statement:

declare module "*.ttf"

Typescript should now recognize the font file type!