0
# Color System
1

2
PrimeFlex provides a comprehensive color system with theme colors, surface colors, alpha variants, and automatic light/dark theme support. All color utilities support hover, focus, and active state variants.
3

4
## Theme Colors
5

6
PrimeFlex includes a set of semantic theme colors, each with 10 shades (50-900):
7

8
**Available Colors**: `blue`, `green`, `yellow`, `cyan`, `pink`, `indigo`, `teal`, `orange`, `bluegray`, `purple`, `gray`, `red`, `primary`
9

10
**Available Shades**: `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900`
11

12
## Text Colors
13

14
```scss { .api }
15
// Theme colors
16
.text-blue-50 { color: var(--p-blue-50); }
17
.text-blue-100 { color: var(--p-blue-100); }
18
.text-blue-200 { color: var(--p-blue-200); }
19
.text-blue-300 { color: var(--p-blue-300); }
20
.text-blue-400 { color: var(--p-blue-400); }
21
.text-blue-500 { color: var(--p-blue-500); }
22
.text-blue-600 { color: var(--p-blue-600); }
23
.text-blue-700 { color: var(--p-blue-700); }
24
.text-blue-800 { color: var(--p-blue-800); }
25
.text-blue-900 { color: var(--p-blue-900); }
26

27
// All other theme colors follow the same pattern:
28
// .text-{color}-{shade} { color: var(--p-{color}-{shade}); }
29
// Available for: green, yellow, cyan, pink, indigo, teal, orange, bluegray, purple, gray, red, primary
30
```
31

32
## Background Colors
33

34
```scss { .api }
35
// Theme colors
36
.bg-blue-50 { background-color: var(--p-blue-50); }
37
.bg-blue-100 { background-color: var(--p-blue-100); }
38
.bg-blue-200 { background-color: var(--p-blue-200); }
39
.bg-blue-300 { background-color: var(--p-blue-300); }
40
.bg-blue-400 { background-color: var(--p-blue-400); }
41
.bg-blue-500 { background-color: var(--p-blue-500); }
42
.bg-blue-600 { background-color: var(--p-blue-600); }
43
.bg-blue-700 { background-color: var(--p-blue-700); }
44
.bg-blue-800 { background-color: var(--p-blue-800); }
45
.bg-blue-900 { background-color: var(--p-blue-900); }
46

47
// All other theme colors follow the same pattern:
48
// .bg-{color}-{shade} { background-color: var(--p-{color}-{shade}); }
49
// Available for: green, yellow, cyan, pink, indigo, teal, orange, bluegray, purple, gray, red, primary
50

51
// Transparent background
52
.bg-transparent { background-color: transparent; }
53
```
54

55
## Border Colors
56

57
```scss { .api }
58
// Theme colors
59
.border-blue-50 { border-color: var(--p-blue-50); }
60
.border-blue-100 { border-color: var(--p-blue-100); }
61
.border-blue-200 { border-color: var(--p-blue-200); }
62
.border-blue-300 { border-color: var(--p-blue-300); }
63
.border-blue-400 { border-color: var(--p-blue-400); }
64
.border-blue-500 { border-color: var(--p-blue-500); }
65
.border-blue-600 { border-color: var(--p-blue-600); }
66
.border-blue-700 { border-color: var(--p-blue-700); }
67
.border-blue-800 { border-color: var(--p-blue-800); }
68
.border-blue-900 { border-color: var(--p-blue-900); }
69

70
// All other theme colors follow the same pattern:
71
// .border-{color}-{shade} { border-color: var(--p-{color}-{shade}); }
72
// Available for: green, yellow, cyan, pink, indigo, teal, orange, bluegray, purple, gray, red, primary
73

74
// Transparent border
75
.border-transparent { border-color: transparent; }
76
```
77

78
## Surface Colors
79

80
Surface colors automatically adapt between light and dark themes using CSS `light-dark()` function:
81

82
```scss { .api }
83
// Surface text colors (0, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900)
84
.text-surface-0 { color: light-dark(var(--p-surface-0), var(--p-surface-950)); }
85
.text-surface-50 { color: light-dark(var(--p-surface-50), var(--p-surface-900)); }
86
.text-surface-100 { color: light-dark(var(--p-surface-100), var(--p-surface-800)); }
87
.text-surface-200 { color: light-dark(var(--p-surface-200), var(--p-surface-700)); }
88
.text-surface-300 { color: light-dark(var(--p-surface-300), var(--p-surface-600)); }
89
.text-surface-400 { color: light-dark(var(--p-surface-400), var(--p-surface-500)); }
90
.text-surface-500 { color: light-dark(var(--p-surface-500), var(--p-surface-400)); }
91
.text-surface-600 { color: light-dark(var(--p-surface-600), var(--p-surface-300)); }
92
.text-surface-700 { color: light-dark(var(--p-surface-700), var(--p-surface-200)); }
93
.text-surface-800 { color: light-dark(var(--p-surface-800), var(--p-surface-100)); }
94
.text-surface-900 { color: light-dark(var(--p-surface-900), var(--p-surface-50)); }
95

96
// Surface background colors
97
.surface-0 { background-color: light-dark(var(--p-surface-0), var(--p-surface-950)); }
98
.surface-50 { background-color: light-dark(var(--p-surface-50), var(--p-surface-900)); }
99
.surface-100 { background-color: light-dark(var(--p-surface-100), var(--p-surface-800)); }
100
.surface-200 { background-color: light-dark(var(--p-surface-200), var(--p-surface-700)); }
101
.surface-300 { background-color: light-dark(var(--p-surface-300), var(--p-surface-600)); }
102
.surface-400 { background-color: light-dark(var(--p-surface-400), var(--p-surface-500)); }
103
.surface-500 { background-color: light-dark(var(--p-surface-500), var(--p-surface-400)); }
104
.surface-600 { background-color: light-dark(var(--p-surface-600), var(--p-surface-300)); }
105
.surface-700 { background-color: light-dark(var(--p-surface-700), var(--p-surface-200)); }
106
.surface-800 { background-color: light-dark(var(--p-surface-800), var(--p-surface-100)); }
107
.surface-900 { background-color: light-dark(var(--p-surface-900), var(--p-surface-50)); }
108

109
// Surface border colors
110
.border-surface-0 { border-color: light-dark(var(--p-surface-0), var(--p-surface-950)); }
111
.border-surface-50 { border-color: light-dark(var(--p-surface-50), var(--p-surface-900)); }
112
.border-surface-100 { border-color: light-dark(var(--p-surface-100), var(--p-surface-800)); }
113
.border-surface-200 { border-color: light-dark(var(--p-surface-200), var(--p-surface-700)); }
114
.border-surface-300 { border-color: light-dark(var(--p-surface-300), var(--p-surface-600)); }
115
.border-surface-400 { border-color: light-dark(var(--p-surface-400), var(--p-surface-500)); }
116
.border-surface-500 { border-color: light-dark(var(--p-surface-500), var(--p-surface-400)); }
117
.border-surface-600 { border-color: light-dark(var(--p-surface-600), var(--p-surface-300)); }
118
.border-surface-700 { border-color: light-dark(var(--p-surface-700), var(--p-surface-200)); }
119
.border-surface-800 { border-color: light-dark(var(--p-surface-800), var(--p-surface-100)); }
120
.border-surface-900 { border-color: light-dark(var(--p-surface-900), var(--p-surface-50)); }
121
```
122

123
## Alpha Colors
124

125
Semi-transparent color variants using rgba values:
126

127
```scss { .api }
128
// White alpha variants (10, 20, 30, 40, 50, 60, 70, 80, 90)
129
.bg-white-alpha-10 { background-color: rgba(255,255,255,0.1); }
130
.bg-white-alpha-20 { background-color: rgba(255,255,255,0.2); }
131
.bg-white-alpha-30 { background-color: rgba(255,255,255,0.3); }
132
.bg-white-alpha-40 { background-color: rgba(255,255,255,0.4); }
133
.bg-white-alpha-50 { background-color: rgba(255,255,255,0.5); }
134
.bg-white-alpha-60 { background-color: rgba(255,255,255,0.6); }
135
.bg-white-alpha-70 { background-color: rgba(255,255,255,0.7); }
136
.bg-white-alpha-80 { background-color: rgba(255,255,255,0.8); }
137
.bg-white-alpha-90 { background-color: rgba(255,255,255,0.9); }
138

139
// Black alpha variants
140
.bg-black-alpha-10 { background-color: rgba(0,0,0,0.1); }
141
.bg-black-alpha-20 { background-color: rgba(0,0,0,0.2); }
142
.bg-black-alpha-30 { background-color: rgba(0,0,0,0.3); }
143
.bg-black-alpha-40 { background-color: rgba(0,0,0,0.4); }
144
.bg-black-alpha-50 { background-color: rgba(0,0,0,0.5); }
145
.bg-black-alpha-60 { background-color: rgba(0,0,0,0.6); }
146
.bg-black-alpha-70 { background-color: rgba(0,0,0,0.7); }
147
.bg-black-alpha-80 { background-color: rgba(0,0,0,0.8); }
148
.bg-black-alpha-90 { background-color: rgba(0,0,0,0.9); }
149

150
// Text alpha colors
151
.text-white-alpha-10 { color: rgba(255,255,255,0.1); }
152
.text-white-alpha-20 { color: rgba(255,255,255,0.2); }
153
.text-white-alpha-30 { color: rgba(255,255,255,0.3); }
154
.text-white-alpha-40 { color: rgba(255,255,255,0.4); }
155
.text-white-alpha-50 { color: rgba(255,255,255,0.5); }
156
.text-white-alpha-60 { color: rgba(255,255,255,0.6); }
157
.text-white-alpha-70 { color: rgba(255,255,255,0.7); }
158
.text-white-alpha-80 { color: rgba(255,255,255,0.8); }
159
.text-white-alpha-90 { color: rgba(255,255,255,0.9); }
160

161
.text-black-alpha-10 { color: rgba(0,0,0,0.1); }
162
.text-black-alpha-20 { color: rgba(0,0,0,0.2); }
163
.text-black-alpha-30 { color: rgba(0,0,0,0.3); }
164
.text-black-alpha-40 { color: rgba(0,0,0,0.4); }
165
.text-black-alpha-50 { color: rgba(0,0,0,0.5); }
166
.text-black-alpha-60 { color: rgba(0,0,0,0.6); }
167
.text-black-alpha-70 { color: rgba(0,0,0,0.7); }
168
.text-black-alpha-80 { color: rgba(0,0,0,0.8); }
169
.text-black-alpha-90 { color: rgba(0,0,0,0.9); }
170

171
// Border alpha colors
172
.border-white-alpha-10 { border-color: rgba(255,255,255,0.1); }
173
.border-white-alpha-20 { border-color: rgba(255,255,255,0.2); }
174
.border-white-alpha-30 { border-color: rgba(255,255,255,0.3); }
175
.border-white-alpha-40 { border-color: rgba(255,255,255,0.4); }
176
.border-white-alpha-50 { border-color: rgba(255,255,255,0.5); }
177
.border-white-alpha-60 { border-color: rgba(255,255,255,0.6); }
178
.border-white-alpha-70 { border-color: rgba(255,255,255,0.7); }
179
.border-white-alpha-80 { border-color: rgba(255,255,255,0.8); }
180
.border-white-alpha-90 { border-color: rgba(255,255,255,0.9); }
181

182
.border-black-alpha-10 { border-color: rgba(0,0,0,0.1); }
183
.border-black-alpha-20 { border-color: rgba(0,0,0,0.2); }
184
.border-black-alpha-30 { border-color: rgba(0,0,0,0.3); }
185
.border-black-alpha-40 { border-color: rgba(0,0,0,0.4); }
186
.border-black-alpha-50 { border-color: rgba(0,0,0,0.5); }
187
.border-black-alpha-60 { border-color: rgba(0,0,0,0.6); }
188
.border-black-alpha-70 { border-color: rgba(0,0,0,0.7); }
189
.border-black-alpha-80 { border-color: rgba(0,0,0,0.8); }
190
.border-black-alpha-90 { border-color: rgba(0,0,0,0.9); }
191
```
192

193
## Special Semantic Colors
194

195
```scss { .api }
196
// Primary color utilities
197
.text-primary { color: var(--p-primary-color); }
198
.bg-primary { 
199
  background-color: var(--p-primary-color); 
200
  color: var(--p-primary-contrast-color); 
201
}
202
.bg-primary-reverse { 
203
  background-color: var(--p-primary-contrast-color); 
204
  color: var(--p-primary-color); 
205
}
206
.border-primary { border-color: var(--p-primary-color); }
207

208
// Semantic text colors
209
.text-color { color: var(--p-text-color); }
210
.text-color-secondary { color: var(--p-text-muted-color); }
211
.text-white { color: #ffffff; }
212

213
// Semantic background colors
214
.bg-white { background-color: #ffffff; }
215
.surface-ground { background-color: light-dark(var(--p-surface-50), var(--p-surface-950)); }
216
.surface-section { background-color: light-dark(var(--p-surface-0), var(--p-surface-950)); }
217
.surface-card { background-color: light-dark(var(--p-surface-0), var(--p-surface-900)); }
218
.surface-overlay { background-color: light-dark(var(--p-surface-0), var(--p-surface-900)); }
219
.surface-hover { background-color: light-dark(var(--p-surface-800), var(--p-surface-100)); }
220

221
// Semantic border colors
222
.border-white { border-color: #ffffff; }
223
.surface-border { border-color: light-dark(var(--p-surface-200), var(--p-surface-700)); }
224
```
225

226
## State Variants
227

228
All color utilities support hover, focus, and active state variants:
229

230
```scss { .api }
231
// Hover states
232
.hover\\:text-primary:hover { color: var(--p-primary-color); }
233
.hover\\:bg-primary:hover { background-color: var(--p-primary-color); }
234
.hover\\:border-primary:hover { border-color: var(--p-primary-color); }
235

236
// Focus states
237
.focus\\:text-primary:focus { color: var(--p-primary-color); }
238
.focus\\:bg-primary:focus { background-color: var(--p-primary-color); }
239
.focus\\:border-primary:focus { border-color: var(--p-primary-color); }
240

241
// Active states
242
.active\\:text-primary:active { color: var(--p-primary-color); }
243
.active\\:bg-primary:active { background-color: var(--p-primary-color); }
244
.active\\:border-primary:active { border-color: var(--p-primary-color); }
245

246
// All theme colors support state variants:
247
// .hover\\:text-{color}-{shade}:hover
248
// .focus\\:bg-{color}-{shade}:focus
249
// .active\\:border-{color}-{shade}:active
250
```
251

252
## CSS Custom Properties
253

254
PrimeFlex uses CSS custom properties for theme colors. Light theme example:
255

256
```scss { .api }
257
:root {
258
  --p-primary-color: #3B82F6;
259
  --p-primary-contrast-color: #ffffff;
260
  --p-text-color: #495057;
261
  --p-text-muted-color: #6c757d;
262
  
263
  --p-surface-0: #ffffff;
264
  --p-surface-50: #FAFAFA;
265
  --p-surface-100: #F5F5F5;
266
  --p-surface-200: #EEEEEE;
267
  --p-surface-300: #E0E0E0;
268
  --p-surface-400: #BDBDBD;
269
  --p-surface-500: #9E9E9E;
270
  --p-surface-600: #757575;
271
  --p-surface-700: #616161;
272
  --p-surface-800: #424242;
273
  --p-surface-900: #212121;
274
  
275
  --p-blue-50: #f5f9ff;
276
  --p-blue-100: #d0e1fd;
277
  --p-blue-200: #abc9fb;
278
  --p-blue-300: #85b2f9;
279
  --p-blue-400: #609af8;
280
  --p-blue-500: #3b82f6;
281
  --p-blue-600: #326fd1;
282
  --p-blue-700: #295bac;
283
  --p-blue-800: #204887;
284
  --p-blue-900: #183462;
285
  
286
  /* Similar pattern for all theme colors: green, yellow, cyan, pink, indigo, teal, orange, bluegray, purple, gray, red */
287
}
288
```
289

290
## Usage Examples
291

292
### Color Scheme Cards
293

294
```html
295
<div class="grid">
296
  <div class="col-12 md:col-4">
297
    <div class="p-4 bg-blue-500 text-white border-round">
298
      <h3 class="m-0 mb-2">Primary Card</h3>
299
      <p class="m-0 text-blue-100">Blue theme color scheme</p>
300
    </div>
301
  </div>
302
  <div class="col-12 md:col-4">
303
    <div class="p-4 surface-card border-round shadow-2">
304
      <h3 class="m-0 mb-2 text-surface-900">Surface Card</h3>
305
      <p class="m-0 text-surface-600">Adaptive surface colors</p>
306
    </div>
307
  </div>
308
  <div class="col-12 md:col-4">
309
    <div class="p-4 bg-green-500 text-white border-round">
310
      <h3 class="m-0 mb-2">Success Card</h3>
311
      <p class="m-0 text-green-100">Green success theme</p>
312
    </div>
313
  </div>
314
</div>
315
```
316

317
### Interactive Button States
318

319
```html
320
<div class="flex gap-3">
321
  <button class="px-4 py-2 bg-primary text-white border-none border-round cursor-pointer hover:bg-primary-600 active:bg-primary-700">
322
    Primary Button
323
  </button>
324
  <button class="px-4 py-2 border-1 border-primary text-primary bg-transparent border-round cursor-pointer hover:bg-primary hover:text-white">
325
    Outline Button
326
  </button>
327
  <button class="px-4 py-2 bg-red-500 text-white border-none border-round cursor-pointer hover:bg-red-600 focus:bg-red-700">
328
    Danger Button
329
  </button>
330
</div>
331
```
332

333
### Alpha Overlay
334

335
```html
336
<div class="relative">
337
  <img src="background.jpg" alt="Background" class="w-full h-20rem object-cover border-round">
338
  <div class="absolute inset-0 bg-black-alpha-50 flex align-items-center justify-content-center border-round">
339
    <div class="text-center text-white">
340
      <h2 class="m-0 mb-2 text-3xl font-bold">Overlay Title</h2>
341
      <p class="m-0 text-white-alpha-90">Semi-transparent overlay content</p>
342
    </div>
343
  </div>
344
</div>
345
```
346

347
### Theme-Aware Layout
348

349
```html
350
<div class="surface-ground min-h-screen">
351
  <header class="surface-section p-4 shadow-2">
352
    <div class="flex align-items-center justify-content-between">
353
      <h1 class="m-0 text-color">App Title</h1>
354
      <button class="bg-primary text-white border-none p-2 border-round">
355
        Action
356
      </button>
357
    </div>
358
  </header>
359
  
360
  <main class="p-4">
361
    <div class="surface-card p-4 border-round shadow-1">
362
      <h2 class="m-0 mb-3 text-color">Content Card</h2>
363
      <p class="m-0 text-color-secondary line-height-3">
364
        This layout automatically adapts to light and dark themes using surface colors.
365
      </p>
366
    </div>
367
  </main>
368
</div>
369
```
370

371
### Status Indicators
372

373
```html
374
<div class="flex flex-column gap-3">
375
  <div class="flex align-items-center gap-2">
376
    <div class="w-1rem h-1rem bg-green-500 border-circle"></div>
377
    <span class="text-green-700">Online</span>
378
  </div>
379
  <div class="flex align-items-center gap-2">
380
    <div class="w-1rem h-1rem bg-yellow-500 border-circle"></div>
381
    <span class="text-yellow-700">Away</span>
382
  </div>
383
  <div class="flex align-items-center gap-2">
384
    <div class="w-1rem h-1rem bg-red-500 border-circle"></div>
385
    <span class="text-red-700">Offline</span>
386
  </div>
387
</div>
388
```
389

390
### Gradient-like Effects with Alpha
391

392
```html
393
<div class="relative p-6 bg-blue-500 border-round overflow-hidden">
394
  <div class="absolute top-0 right-0 w-8rem h-8rem bg-white-alpha-20 border-circle -mt-4 -mr-4"></div>
395
  <div class="relative z-1 text-white">
396
    <h3 class="m-0 mb-2">Feature Card</h3>
397
    <p class="m-0 text-blue-100">Enhanced with alpha overlays</p>
398
  </div>
399
</div>
400
```