common-ui-theme

Custom Ant Design theme with CSS variables and custom components.

Installation

npm install common-ui-theme

Import common-ui-theme/dist/index.css in main.tsx or index.tsx.

import 'common-ui-theme/dist/index.css';

CSS Variables

These are the CSS variables used in the theme.

`:root {
    --font-sans: 'Inter', system-ui, sans-serif;
    --color-primary: rgb(64, 150, 255);
    --color-info: rgb(64, 150, 255);
    --color-link: rgb(64, 150, 255);
    --color-bg-base: rgb(249, 250, 251);
    --color-bg-layout: rgb(249, 250, 251);
    --color-bg-container: rgb(255, 255, 255);
    --color-bg-elevated: rgb(255, 255, 255);
    --color-text-base: rgb(31, 41, 55);
    --color-text-secondary: rgb(107 114 128);
    --color-text-description: rgb(156 163 175);
    --color-border: rgba(17,24,39,0.1);
    --color-border-secondary: rgba(0, 0, 0, 0.08);
    --color-split: rgba(0, 0, 0, 0.06);
    --color-success: rgb(16 185 129);
    --color-warning: rgb(245 158 11);
    --color-error: rgb(244 63 94);
}`

`.dark {
    --color-bg-base: rgb(18, 28, 42);
    --color-bg-layout: rgb(18, 28, 42);
    --color-bg-container: rgb(26, 36, 52);
    --color-bg-elevated: rgb(30, 41, 58);
    --color-text-base: rgb(249, 250, 251);
    --color-text-secondary: rgb(156, 163, 175);
    --color-text-description: rgb(107, 114, 128);
    --color-border: rgba(255,255,255,0.1);
    --color-border-secondary: rgba(255,255,255,0.08);
    --color-split: rgba(255,255,255,0.06);
    --color-success: rgb(16 185 129);
    --color-warning: rgb(245 158 11);
    --color-error: rgb(244 63 94);
}`

Components

ErrorPage

ErrorPage is a ready-made component designed to display HTTP error pages (401, 403, 404, 500).

Usage example:

import { ErrorPage } from "common-ui-theme/dist/ErrorPage";

export default function NotFound() {
    return <ErrorPage code={404} />;
}