@aero-ui/tokens 🖋️

Sample, elegant and beautiful UI tokens of the Aero UI library based in the TailwindCSS.

Summary 📖

• Installation ☁️
• API 🏭
  • Colors 🎨
    • White ⚪️
    • Black ⚫️
    • Red 🔴
    • Yellow 🟡
    • Green 🟢
    • Teal 🟢
    • Sky 🔵
    • Blue 🔵
    • Purple 🟣
    • Pink 🩷
    • Slate 🔘
    • Gray 🔘
    • Neutral 🔘
    • Stone 🔘
  • Opacities 🔍
  • Spacings 📐
  • Z Indexes 📚
  • Borders 🔳
    • Radius ⭕️
    • Widths 📏
  • Fonts 🖌️
    • Sizes 📏
    • Weights ⚖️
    • Line Heights 📐
    • Letter Spacings 📏
  • TypeScript Support 👨‍🎨

Installation ☁️

npm:

npm install @aero-ui/tokens

Yarn:

yarn add @aero-ui/tokens

pnpm:

pnpm install @aero-ui/tokens

API 🏭

Colors 🎨

A small example of how to use colors below:

import { StyleSheet } from 'react-native';
import { colors } from '@aero-ui/tokens';

const styles = StyleSheet.create({
  container: {
    backgroundColor: colors.black[100], // #000000
  },

  card: {
    backgroundColor: colors.gray[200], // #E5E7EB
    borderColor: colors.blue[300], // #93C5FD
  },

  text: {
    color: colors.white[100], // #FFFFFF
  },

  highlightText: {
    color: colors.blue[500], // #3B82F6
  },
});

White ⚪️

| Key | Color | | ----- | ---------------------------------------------------------------------------------------------------------- | | 25 | #ffffff40 | | 50 | #ffffff80 | | 60 | #ffffff99 | | 75 | #ffffffbf | | 85 | #ffffffd9 | | 100 | #ffffff |

Black ⚫️

| Key | Color | | ----- | ---------------------------------------------------------------------------------------------------------- | | 25 | #00000040 | | 50 | #00000080 | | 60 | #00000099 | | 75 | #000000bf | | 85 | #000000d9 | | 100 | #000000 |

Red 🔴

| Key | Color | | ----- | ------------------------------------------------------------------ | | 50 | #fef2f2 | | 100 | #fee2e2 | | 200 | #fecaca | | 300 | #fca5a5 | | 400 | #f87171 | | 500 | #ef4444 | | 600 | #dc2626 | | 700 | #b91c1c | | 800 | #991b1b | | 900 | #7f1d1d | | 950 | #450a0a |

Yellow 🟡

| Key | Color | | ----- | ------------------------------------------------------------------ | | 50 | #fefce8 | | 100 | #fef9c3 | | 200 | #fef08a | | 300 | #fde047 | | 400 | #facc15 | | 500 | #eab308 | | 600 | #ca8a04 | | 700 | #a16207 | | 800 | #854d0e | | 900 | #713f12 | | 950 | #422006 |

Green 🟢

| Key | Color | | ----- | ------------------------------------------------------------------ | | 50 | #f0fdf4 | | 100 | #dcfce7 | | 200 | #bbf7d0 | | 300 | #86efac | | 400 | #4ade80 | | 500 | #22c55e | | 600 | #16a34a | | 700 | #15803d | | 800 | #166534 | | 900 | #14532d | | 950 | #052e16 |

Teal 🟢

| Key | Color | | ----- | ------------------------------------------------------------------ | | 50 | #f0fdfa | | 100 | #ccfbf1 | | 200 | #99f6e4 | | 300 | #5eead4 | | 400 | #2dd4bf | | 500 | #14b8a6 | | 600 | #0d9488 | | 700 | #0f766e | | 800 | #115e59 | | 900 | #134e4a | | 950 | #042f2e |

Sky 🔵

| Key | Color | | ----- | ------------------------------------------------------------------ | | 50 | #f0f9ff | | 100 | #e0f2fe | | 200 | #bae6fd | | 300 | #7dd3fc | | 400 | #38bdf8 | | 500 | #0ea5e9 | | 600 | #0284c7 | | 700 | #0369a1 | | 800 | #075985 | | 900 | #0c4a6e | | 950 | #082f49 |

Blue 🔵

| Key | Color | | ----- | ------------------------------------------------------------------ | | 50 | #eff6ff | | 100 | #dbeafe | | 200 | #bfdbfe | | 300 | #93c5fd | | 400 | #60a5fa | | 500 | #3b82f6 | | 600 | #2563eb | | 700 | #1d4ed8 | | 800 | #1e40af | | 900 | #1e3a8a | | 950 | #172554 |

Purple 🟣

| Key | Color | | ----- | ------------------------------------------------------------------ | | 50 | #faf5ff | | 100 | #f3e8ff | | 200 | #e9d5ff | | 300 | #d8b4fe | | 400 | #c084fc | | 500 | #a855f7 | | 600 | #9333ea | | 700 | #7e22ce | | 800 | #6b21a8 | | 900 | #581c87 | | 950 | #3b0764 |

Pink 🩷

| Key | Color | | ----- | ------------------------------------------------------------------ | | 50 | #fdf2f8 | | 100 | #fce7f3 | | 200 | #fbcfe8 | | 300 | #f9a8d4 | | 400 | #f472b6 | | 500 | #ec4899 | | 600 | #db2777 | | 700 | #be185d | | 800 | #9d174d | | 900 | #881337 | | 950 | #500724 |

Slate 🔘

| Key | Color | | ----- | ------------------------------------------------------------------ | | 50 | #f8fafc | | 100 | #f1f5f9 | | 200 | #e2e8f0 | | 300 | #cbd5e1 | | 400 | #94a3b8 | | 500 | #64748b | | 600 | #475569 | | 700 | #334155 | | 800 | #1e293b | | 900 | #0f172a | | 950 | #020617 |

Gray 🔘

| Key | Color | | ----- | ------------------------------------------------------------------ | | 50 | #f9fafb | | 100 | #f3f4f6 | | 200 | #e5e7eb | | 300 | #d1d5db | | 400 | #9ca3af | | 500 | #6b7280 | | 600 | #4b5563 | | 700 | #374151 | | 800 | #1f2937 | | 900 | #111827 | | 950 | #030712 |

Neutral 🔘

| Key | Color | | ----- | ------------------------------------------------------------------ | | 50 | #fafafa | | 100 | #f5f5f5 | | 200 | #e5e5e5 | | 300 | #d4d4d4 | | 400 | #a3a3a3 | | 500 | #737373 | | 600 | #525252 | | 700 | #404040 | | 800 | #262626 | | 900 | #171717 | | 950 | #0a0a0a |

Stone 🔘

| Key | Color | | ----- | ------------------------------------------------------------------ | | 50 | #fafaf9 | | 100 | #f5f5f4 | | 200 | #e7e5e4 | | 300 | #d6d3d1 | | 400 | #a8a29e | | 500 | #78716c | | 600 | #57534e | | 700 | #44403c | | 800 | #292524 | | 900 | #1c1917 | | 950 | #0c0a09 |

Opacities 🔍

A small example of how to use opacities below:

import { StyleSheet } from 'react-native';
import { opacities } from '@aero-ui/tokens';

const styles = StyleSheet.create({
  visible: {
    opacity: opacities[100], // 1
  },

  hidden: {
    opacity: opacities[0], // 0
  },

  disabled: {
    opacity: opacities[70], // 0.7
  },
});

| Key | Value | | ----- | ------ | | 0 | 0 | | 5 | 0.05 | | 10 | 0.1 | | 15 | 0.15 | | 20 | 0.2 | | 25 | 0.25 | | 30 | 0.3 | | 35 | 0.35 | | 40 | 0.4 | | 45 | 0.45 | | 50 | 0.5 | | 55 | 0.55 | | 60 | 0.6 | | 65 | 0.65 | | 70 | 0.7 | | 75 | 0.75 | | 80 | 0.8 | | 85 | 0.85 | | 90 | 0.9 | | 95 | 0.95 | | 100 | 1 |

Spacings 📐

A small example of how to use spacings below:

import { StyleSheet } from 'react-native';
import { spacings } from '@aero-ui/tokens';

const styles = StyleSheet.create({
  container: {
    flex: 1,

    paddingHorizontal: spacings[5], // 20
  },

  card: {
    width: '100%',
    height: 'auto',
    minHeight: spacings[24], // 96,

    padding: spacings[2], // 8,
    gap: spacings[1], // 4,
  },
});

| Key | Value | | ----- | ----- | | 0 | 0 | | px | 1 | | 0.5 | 2 | | 1 | 4 | | 1.5 | 6 | | 2 | 8 | | 2.5 | 10 | | 3 | 12 | | 3.5 | 14 | | 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 |

Z Indexes 📚

A small example of how to use z-indexes below:

import { StyleSheet } from 'react-native';
import { zIndexes } from '@aero-ui/tokens';

const styles = StyleSheet.create({
  card: {
    zIndex: zIndexes[50], // 50

    width: '100%',
    height: 'auto',
  },

  tooltip: {
    zIndex: zIndexes.full, // 9999

    width: 'auto',
    height: 'auto',
  },
});

| Key | Value | | ------ | ------ | | 0 | 0 | | 10 | 10 | | 20 | 20 | | 30 | 30 | | 40 | 40 | | 50 | 50 | | 100 | 100 | | full | 9999 |

Borders 🔳

A small example of how to use border radius and widths below:

import { StyleSheet } from 'react-native';
import { borderRadius, borderWidths, spacings } from '@aero-ui/tokens';

const styles = StyleSheet.create({
  card: {
    width: spacings[4], // 16
    height: spacings[4], // 16

    borderRadius: borderRadius.lg, // 8
    borderWidth: borderWidths[2], // 2
  },

  button: {
    width: spacings[4], // 16
    height: spacings[4], // 16

    borderRadius: borderRadius.base, // 4
    borderWidth: borderWidths.px, // 1
  },
});

Radius ⭕️

| Key | Value | | ------ | ------ | | none | 0 | | sm | 2 | | base | 4 | | md | 6 | | lg | 8 | | xl | 12 | | 2xl | 16 | | 3xl | 24 | | full | 9999 |

Widths 📏

| Key | Value | | ---- | ----- | | 0 | 0 | | px | 1 | | 2 | 2 | | 4 | 4 | | 8 | 8 |

Fonts 🖌️

A small example of how to use border font sizes, font weights, line heights and letter spacings below:

import { StyleSheet } from 'react-native';
import {
  fontSizes,
  fontWeights,
  lineHeights,
  letterSpacings,
} from '@aero-ui/tokens';

const styles = StyleSheet.create({
  title: {
    fontSize: fontSizes['6xl'], // 60
    fontWeight: fontWeights.medium, // 500
    lineHeight: lineHeights['6xl'], // 68
    letterSpacing: letterSpacings.wide, // 0.4
  },

  text: {
    fontSize: fontSizes.base, // 16
    fontWeight: fontWeights.regular, // 400
    lineHeight: lineHeights.base, // 24
    letterSpacing: letterSpacings.normal, // 0
  },
});

Sizes 📏

| Key | Value | | ------ | ----- | | xs | 12 | | sm | 14 | | base | 16 | | lg | 18 | | xl | 20 | | 2xl | 24 | | 3xl | 30 | | 4xl | 36 | | 5xl | 48 | | 6xl | 60 | | 7xl | 72 | | 8xl | 96 | | 9xl | 128 |

Weights ⚖️

| Key | Value | | ------------ | ----- | | thin | 100 | | extralight | 200 | | light | 300 | | normal | 400 | | medium | 500 | | semibold | 600 | | bold | 700 | | extrabold | 800 | | black | 900 |

Line Heights 📐

| Key | Value | | ------ | ----- | | xs | 16 | | sm | 20 | | base | 24 | | lg | 28 | | xl | 28 | | 2xl | 32 | | 3xl | 36 | | 4xl | 40 | | 5xl | 56 | | 6xl | 68 | | 7xl | 80 | | 8xl | 104 | | 9xl | 136 |

Letter Spacings 📏

| Key | Value | | --------- | ------ | | tighter | -0.8 | | tight | -0.4 | | normal | 0 | | wide | 0.4 | | wider | 0.8 | | widest | 1.6 |

TypeScript Support 👨‍🎨

Yes! Aero UI have support for TypeScript, we divide the types of each token two parts:

• Object: It's original object typeof of the token, it object typing.
• Keys: It's original object keyof typeof of the token, it all keys of the object.

All tokens are based in TailwindCSS and adapted for React Native.