Color System
RNC Styles includes a comprehensive color system inspired by Tailwind CSS. Each color provides shades from 50 (lightest) to 950 (darkest), making it easy to create consistent themes and accessible interfaces.
Color Palate
| 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950 | |
|---|---|---|---|---|---|---|---|---|---|---|---|
| red | |||||||||||
| orange | |||||||||||
| amber | |||||||||||
| yellow | |||||||||||
| lime | |||||||||||
| green | |||||||||||
| emerald | |||||||||||
| teal | |||||||||||
| cyan | |||||||||||
| sky | |||||||||||
| blue | |||||||||||
| indigo | |||||||||||
| violet | |||||||||||
| purple | |||||||||||
| fuchsia | |||||||||||
| pink | |||||||||||
| rose | |||||||||||
| slate | |||||||||||
| gray | |||||||||||
| zinc | |||||||||||
| neutral | |||||||||||
| stone | |||||||||||
| taupe | |||||||||||
| mauve | |||||||||||
| mist | |||||||||||
| olive |
Usage
Text Color
import rncStyles from "rncstyles";
rncStyles.text_color("blue", 500);
rncStyles.d_text_color("blue", 500); // Dark Theme
Background Color
import rncStyles from "rncstyles";
rncStyles.bg_color("blue", 500);
rncStyles.d_bg_color("blue", 500); // Dark Theme
Border Color
import rncStyles from "rncstyles";
rncStyles.border_color("blue", 500);
rncStyles.d_border_color("blue", 500); // Dark Theme
Examples
// Text
rncStyles.text_color("blue", 500)
// Dark Theme Text
rncStyles.d_text_color("blue", 500)
// Background
rncStyles.bg_color("blue", 500)
// Dark Theme Background
rncStyles.d_bg_color("blue", 500)
// Border
rncStyles.border_color("blue", 500)
// Dark Theme Border
rncStyles.d_border_color("blue", 500)