topaz-react
TypeScript icon, indicating that this package has built-in type declarations

0.1.10 • Public • Published

Welcome to Topaz for React Projects ;)

UI component library based on tailwindcss, heroicons. Topaz is a MIT licensed project that is developed and maintained by Antônio Zanotti.

Install Topaz React

npm i -D topaz-react

Install Tailwind CSS (instructions here)

Update the tailwind.config.ts file:

import type { Config } from "tailwindcss";
import presetTopazReact from "topaz-react/src/preset/tailwind-preset-topaz-react";

const config: Config = {
  content: ["./node_modules/topaz-react/src/components/**/*.{js,ts,jsx,tsx,mdx}"],
  presets: [presetTopazReact],
};
export default config;

That's all! Topaz's components can be imported in your .tsx files.

import { TzButton } from 'topaz-react';

export default function Home() {
  return <TzButton label="Button" />;
}

Tailwind CSS Preset Topaz React

You can customize colours and font sizes, just update the tailwind.config.ts file.

import type { Config } from "tailwindcss";
import presetTopazReact from "topaz-react/src/preset/tailwind-preset-topaz-react";

const config: Config = {
  content: ["./node_modules/topaz-react/src/components/*.{js,ts,jsx,tsx,mdx}"],
  presets: [presetTopazReact],
  theme: {
    fontSize: {
      c1: '10px',
      c2: '12px',
      c3: '14px',
      c4: '16px',
      c5: '20px',
      c6: '24px',
      c7: '32px',
      c8: '36px',
      c9: '40px',
      c10: '48px',
      c11: '64px',
      c12: '96px',
    },
    colors: {
      accent: {
        DEFAULT: '#0891B2',
        1: '#06B6D4',
        2: '#22D3EE',
      },
      'dark-accent': {
        DEFAULT: '#22D3EE',
        1: '#06B6D4',
        2: '#0891B2',
      },
      primary: {
        DEFAULT: '#083344',
        1: '#164E63',
        2: '#155E75',
      },
      'dark-primary': {
        DEFAULT: '#E2E8F0',
        1: '#CBD5E1',
        2: '#94A3B8',
      },
      secondary: {
        DEFAULT: '#94A3B8',
        1: '#CBD5E1',
        2: '#E2E8F0',
      },
      'dark-secondary': {
        DEFAULT: '#155E75',
        1: '#164E63',
        2: '#083344',
      },
      negative: {
        DEFAULT: '#B91C1C',
        1: '#DC2626',
        2: '#EF4444',
      },
      'dark-negative': {
        DEFAULT: '#EF4444',
        1: '#DC2626',
        2: '#B91C1C',
      },
      dark: {
        DEFAULT: '#E5E7EB',
        1: '#F3F4F6',
        2: '#FFFFFF',
      },
      'dark-dark': {
        DEFAULT: '#000000',
        1: '#111827',
        2: '#1F2937',
      },
      light: {
        DEFAULT: '#000000',
        1: '#111827',
        2: '#1F2937',
      },
      'dark-light': {
        DEFAULT: '#FFFFFF',
        1: '#F3F4F6',
        2: '#E5E7EB',
      },
      'inverse-accent': '#000000',
      'inverse-dark-accent': '#000000',
      'inverse-primary': '#FFFFFF',
      'inverse-dark-primary': '#000000',
      'inverse-secondary': '#000000',
      'inverse-dark-secondary': '#FFFFFF',
      'inverse-negative': '#FFFFFF',
      'inverse-dark-negative': '#000000',
      'inverse-dark': '#000000',
      'inverse-dark-dark': '#FFFFFF',
      'inverse-light': '#FFFFFF',
      'inverse-dark-light': '#000000',
    },
  },
};
export default config;

Design Point of View

The components was designed to work with these variants:

Light Theme:

  • accent: colors for greatest emphasis.
  • primary: colors for medium emphasis.
  • secondary: colors for lowest emphasis.
  • negative: colors for emphasizing actions that can be destructive.
  • dark: light colors.
  • light: dark colors.
  • inverse-accent: text color above a accent background.
  • inverse-primary: text color above a primary background.
  • inverse-secondary: text color above a secondary background.
  • inverse-negative: text color above a negative background.
  • inverse-dark: text color above a dark background.
  • inverse-light: text color above a light background.

Dark Theme:

  • dark-accent: accent colors on dark theme.
  • dark-primary: primary colors on dark theme.
  • dark-secondary: secondary colors on dark theme.
  • dark-negative: negative colors on dark theme.
  • dark-dark: light colors.
  • dark-light: dark colors.
  • inverse-dark-accent: text color above a accent background on dark theme.
  • inverse-dark-primary: text color above a primary background on dark theme.
  • inverse-dark-secondary: text color above a secondary background on dark theme.
  • inverse-dark-negative: text color above a negative background on dark theme.
  • inverse-dark-dark: text color above a dark background on dark theme.
  • inverse-dark-light: text color above a light background on dark theme.

You can use a color contrast checker to help calculate the contrast. The colours dark-2 and dark-dark-2 are used for background.

Features

  • Components: visit the official documentation to see available components.
  • Dark and Light Theme: it uses class strategy of tailwindcss.
  • Responsive: some components on screens larger than or equal to 1024px will be ~20% smaller than mobile version.

The colours swap with each other by 'dark-' prefix.

Inpired In

Package Sidebar

Install

npm i topaz-react

Weekly Downloads

13

Version

0.1.10

License

MIT

Unpacked Size

218 kB

Total Files

54

Last publish

Collaborators

  • antoniozanotti