Ocean UI Color Palette TS

A lightweight, TypeScript-friendly Material Design color palette with light, medium, and dark variations.

Features

• 🎨 12 Material Design colors
• 🎯 Simple light/medium/dark variations
• 📦 TypeScript support
• 🪶 Lightweight
• 🔧 Easy to integrate

Installation

You can install Ocean UI Color Palette using your preferred package manager:

npm install ocean-ui-palette

yarn add ocean-ui-palette

pnpm add ocean-ui-palette

Usage

Basic Import

// Import the CSS in your entry file (e.g., App.tsx or index.tsx)
import "ocean-ui-palette/dist/styles/ocean-ui.css";

Available Classes

Each color has light/medium/dark variants and can be used for text, background, or borders:

// Text Colors
<span className="ocean-purple-dark">Dark Purple Text</span>
<span className="ocean-purple-medium">Medium Purple Text</span>
<span className="ocean-purple-light">Light Purple Text</span>

// Background Colors
<div className="ocean-bg-blue-dark">Dark Blue Background</div>
<div className="ocean-bg-blue-medium">Medium Blue Background</div>
<div className="ocean-bg-blue-light">Light Blue Background</div>

// Border Colors
<div className="ocean-border-green-dark">Dark Green Border</div>
<div className="ocean-border-green-medium">Medium Green Border</div>
<div className="ocean-border-green-light">Light Green Border</div>

// Common Colors
<div className="ocean-bg-black">Black Background</div>
<div className="ocean-white">White Text</div>

Available Color Variants

• Purple: ocean-(bg-/border-)purple-(dark/medium/light)
• Blue: ocean-(bg-/border-)blue-(dark/medium/light)
• Green: ocean-(bg-/border-)green-(dark/medium/light)
• Yellow: ocean-(bg-/border-)yellow-(dark/medium/light)
• Red: ocean-(bg-/border-)red-(dark/medium/light)
• Grey: ocean-(bg-/border-)grey-(dark/medium/light)
• Common: ocean-(bg-/border-)(black/white)

Programmatic Usage

import { oceanUIPalette } from "ocean-ui";

// Access color values directly in your code
const styles = {
  backgroundColor: oceanUIPalette.blue.medium,
  color: oceanUIPalette.common.white,
};