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

0.0.9 • Public • Published

Welcome to Topaz for Vue Projects ;)

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

Install Topaz Vue

npm i -D topaz-vue

Install UnoCSS (instructions here)

Update the main.ts file:

import "@unocss/reset/tailwind.css";
import "virtual:uno.css";

Update the uno.config.ts file:

import { defineConfig } from "unocss";
import presetTopazVue from "topaz-vue/src/unocss-preset-topaz-vue";

export default defineConfig({
  presets: [presetTopazVue()],
  content: {
    filesystem: ["./node_modules/topaz-vue/**/*.vue"],
  },
});

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

<script setup lang="ts">
  import {TzButton} from "topaz-vue";
</script>

<template>
  <TzButton label="Button" />
</template>

UnoCSS Preset Topaz Vue

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

import { defineConfig } from "unocss";
import presetTopazVue from "topaz-vue/src/unocss-preset-topaz-vue";

export default defineConfig({
  presets: [presetTopazVue()],
  content: {
    filesystem: ["./node_modules/topaz-vue/**/*.vue"],
  },
  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: "#0891B2",
      "accent-1": "#06B6D4",
      "accent-2": "#22D3EE",
      "dark-accent": "#22D3EE",
      "dark-accent-1": "#06B6D4",
      "dark-accent-2": "#0891B2",
      primary: "#083344",
      "primary-1": "#164E63",
      "primary-2": "#155E75",
      "dark-primary": "#E2E8F0",
      "dark-primary-1": "#CBD5E1",
      "dark-primary-2": "#94A3B8",
      secondary: "#94A3B8",
      "secondary-1": "#CBD5E1",
      "secondary-2": "#E2E8F0",
      "dark-secondary": "#155E75",
      "dark-secondary-1": "#164E63",
      "dark-secondary-2": "#083344",
      negative: "#B91C1C",
      "negative-1": "#DC2626",
      "negative-2": "#EF4444",
      "dark-negative": "#EF4444",
      "dark-negative-1": "#DC2626",
      "dark-negative-2": "#B91C1C",
      dark: "#E5E7EB",
      "dark-1": "#F3F4F6",
      "dark-2": "#FFFFFF",
      "dark-dark": "#000000",
      "dark-dark-1": "#111827",
      "dark-dark-2": "#1F2937",
      light: "#000000",
      "light-1": "#111827",
      "light-2": "#1F2937",
      "dark-light": "#FFFFFF",
      "dark-light-1": "#F3F4F6",
      "dark-light-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",
    },
  },
});

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-vue

Weekly Downloads

7

Version

0.0.9

License

MIT

Unpacked Size

396 kB

Total Files

23

Last publish

Collaborators

  • antoniozanotti