CatalystThemingv2.0.7Ready for Production
Foundation package providing design tokens, color palettes, and TailwindCSS presets for consistent styling across all Catalyst components.
PMP® Certification
Demonstrate your expertise in leading projects and driving organizational impact. The PMP credential validates your ability to manage teams, deliver results, and advance strategic goals.
Installation
Install the theme package to access Catalyst's design tokens and Tailwind presets:
npm install @pmi/catalyst-themeConfiguration
Add the TailwindCSS preset to your configuration. The preset extends your Tailwind setup with Catalyst's design tokens, color palette, and breakpoints.
import { tailwindThemePreset } from '@pmi/catalyst-theme';
export default {
darkMode: ['selector', '.theme-pmi-dark'], // Custom selector (recommended)
content: ['./src/**/*.{ts,tsx,js,jsx}', './node_modules/@pmi/catalyst-*/**/*.{ts,tsx,js,jsx}'],
presets: [tailwindThemePreset],
};Important Notes
- Content Paths: Tailwind configuration applies styles globally based on files matched in the
contentarray. Ensure your paths include all relevant source files. - Dark Theme: Explicitly define the
darkModeoption to ensure consistent theming. When you add a preset, your config inherits settings from@pmi/catalyst-theme, but defining it explicitly prevents unintentional fallback to the default'media'theme. - Nested Themes: Not supported. Using a
.light-classinside a.dark-classwill not work as expected—Tailwind only applies the outermost theme context.
Dark Theme
Catalyst supports three dark theme configurations. The darkMode option in Tailwind can be set to:
'media': Uses the user's system preference (prefers-color-scheme). This is the default ifdarkModeis not defined.['selector', '.theme-pmi-dark']: Uses a custom selector (recommended for Catalyst). By default,@pmi/catalyst-themeincludes the.theme-pmi-darkselector for dark theme.''(empty string): Disables dark theme entirely—no dark theme styles will be generated.- To enable dark theme in your application, apply the
.theme-pmi-darkclass to a parent element, typically the root<html>or<body>element.
PMI Color Palette
All Catalyst colors are available as Tailwind utility classes:
PMI Violet
pmi-violet50
|
#EFEDF3
100
|
#E0C8F9
200
|
#CC9BFC
300
|
#B465FF
400
|
#8243D6
500
|
#4F17A8
600
|
#371075
700
|
#2A0C5A
800
|
#230A49
900
|
#1A0837
950
|
#100522
PMI Aqua
pmi-aqua50
|
#EEFAFA
100
|
#C8F0F9
200
|
#68D8ED
300
|
#05BFE0
400
|
#0890BA
500
|
#00799E
600
|
#005C77
700
|
#004154
800
|
#023041
900
|
#03202F
950
|
#030D19
PMI Tangerine
pmi-tangerine50
|
#FEF7F3
100
|
#FDDECE
200
|
#FFBC9C
300
|
#FF630F
400
|
#EB4D0A
500
|
#D5340B
600
|
#A12608
700
|
#741C06
800
|
#451409
900
|
#290906
950
|
#1A0503
PMI Red
pmi-red50
|
#FFEDEC
100
|
#FFB0A9
200
|
#FE7468
300
|
#FD3321
400
|
#F41E0B
500
|
#C41E08
600
|
#931706
700
|
#671104
800
|
#530E04
900
|
#3A0A03
950
|
#270702
PMI Green
pmi-green50
|
#F2F5F2
100
|
#BDFDBD
200
|
#83F880
300
|
#21F019
400
|
#1AB814
500
|
#197F10
600
|
#13600C
700
|
#0D4409
800
|
#0B3608
900
|
#082706
950
|
#051903
PMI Off Black
pmi-off-black50
|
#DAD6E1
100
|
#C0B8CC
200
|
#9B92A9
300
|
#796F89
400
|
#5D5171
500
|
#413358
600
|
#37284F
700
|
#2B1B45
800
|
#200F3B
900
|
#170A2A
950
|
#10081E
PMI Neutral
pmi-neutral50
|
#F7F4EF
100
|
#E7E4DC
200
|
#CFCBC2
300
|
#A8A6A1
400
|
#737373
500
|
#666666
600
|
#4D4D4D
700
|
#333333
800
|
#2C2C2C
900
|
#232323
950
|
#1A1A1A
PMI Saddle
pmi-saddle50
|
#FFF2E8
100
|
#F4E5DB
200
|
#E0CEC1
300
|
#CEB7A6
400
|
#D3AD90
500
|
#BE9577
600
|
#A4724D
700
|
#804F29
800
|
#4A2D17
900
|
#2E1C0F
950
|
#1B0E04
API Reference
Accessibility
The Catalyst color palette meets WCAG 2.2 AA contrast requirements:
- Text Contrast: Darker shades (500–950) provide sufficient contrast ratios for text on light backgrounds.
- Interactive Elements: Mid-range tones (300–600) are suitable for buttons and links.
- Backgrounds: Lighter tones (50–200) work as subtle background fills.
- Dark Theme: Inverted color usage preserves contrast ratios across themes.