digikentro

v1.0.0

Published

11 days ago

A modern, clean UI theme system with dark mode support, glassmorphism effects, and refined color palette

0High
0Medium
0Low

nir_patel

ui theme css tailwind design-system dark-mode glassmorphism react nextjs

🎨 Digikentro

A modern, clean UI theme system with dark mode support, glassmorphism effects, and refined color palette.

Installation

npm install digikentro
# or
yarn add digikentro
# or
pnpm add digikentro

Quick Start

Option 1: With Tailwind CSS (Recommended)

Update your tailwind.config.ts:

import { tailwindTheme } from 'digikentro';

export default {
  ...tailwindTheme,
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    // ... your paths
  ],
};

Copy the globals CSS to your project:

Copy the contents of node_modules/digikentro/dist/styles/globals.css to your src/index.css or app/globals.css.

Or import programmatically (if your bundler supports it):

@import 'digikentro/styles/globals';

Install the required Tailwind plugin:

npm install tailwindcss-animate

Option 2: Vanilla CSS (No Tailwind)

Simply import the theme CSS:

@import 'digikentro/styles/theme';

Or in JavaScript:

import 'digikentro/styles/theme';

🎨 What's Included

Color System

Primary - Blue tones for main actions
Secondary - Subtle backgrounds
Destructive - Red for dangerous actions
Muted - Subtle text and backgrounds
Category Colors - Marketing (blue), Client (purple), Resource (green), Mod (gray)

Dark Mode

Add the dark class to your <html> element:

<html class="dark">

Toggle programmatically:

document.documentElement.classList.toggle('dark');

Utility Classes

| Class | Description | |-------|-------------| | .glass-card | Frosted glass effect with backdrop blur | | .section-card | Standard card with hover effect | | .kpi-card | Metric/KPI display card with lift on hover | | .input-field | Styled input with focus ring | | .category-marketing | Blue tinted background | | .category-client | Purple tinted background | | .category-resource | Green tinted background | | .category-mod | Gray tinted background |

Button Classes (Vanilla CSS only)

| Class | Description | |-------|-------------| | .btn | Base button styles | | .btn-primary | Primary action button | | .btn-secondary | Secondary button | | .btn-outline | Outlined button | | .btn-ghost | Transparent button | | .btn-destructive | Danger/delete button |

Animation Classes

| Class | Description | |-------|-------------| | .animate-fade-in | Fade in from below | | .animate-slide-in | Slide in from left | | .animate-scale-in | Scale up effect |

📦 Exports

JavaScript/TypeScript

// Theme configuration for Tailwind
import { tailwindTheme, fullConfig } from 'digikentro';

// Theme constants and utilities
import { colors, shadows, animations } from 'digikentro';

// Generate CSS variables programmatically
import { generateCSSVariables } from 'digikentro';
const lightVars = generateCSSVariables('light');
const darkVars = generateCSSVariables('dark');

CSS

/* Standalone theme (no Tailwind required) */
@import 'digikentro/styles/theme';

/* For Tailwind projects */
@import 'digikentro/styles/globals';

/* Combined styles */
@import 'digikentro/styles';

🎯 CSS Variables Reference

All colors are defined as HSL values (without the hsl() wrapper):

/* Usage */
.my-element {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

Core Variables

| Variable | Description | |----------|-------------| | --background | Page background | | --foreground | Main text color | | --primary | Primary brand color | | --secondary | Secondary color | | --muted | Muted backgrounds | | --accent | Accent color | | --destructive | Error/danger color | | --border | Border color | | --ring | Focus ring color | | --radius | Border radius (0.5rem) |

Shadow Variables

| Variable | Description | |----------|-------------| | --shadow-sm | Small shadow | | --shadow-md | Medium shadow | | --shadow-lg | Large shadow | | --shadow-card | Subtle card shadow |

🔧 Customization

Override Colors

:root {
  /* Change primary to purple */
  --primary: 262 83% 58%;
  --primary-foreground: 0 0% 100%;
}

Add Custom Category

:root {
  --sales: 38 92% 50%;
  --sales-light: 38 92% 97%;
}

.dark {
  --sales: 38 70% 50%;
  --sales-light: 38 30% 18%;
}

.category-sales {
  background-color: hsl(var(--sales-light));
  border-color: hsl(var(--sales) / 0.2);
}

📄 License

Made with 💙 by Nir