CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-primeflex

PrimeFlex is a lightweight responsive CSS utility library to accompany Prime UI libraries and static webpages as well.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview
Eval results
Files

colors.mddocs/

Color System

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.

Theme Colors

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

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

Available Shades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900

Text Colors

// Theme colors
.text-blue-50 { color: var(--p-blue-50); }
.text-blue-100 { color: var(--p-blue-100); }
.text-blue-200 { color: var(--p-blue-200); }
.text-blue-300 { color: var(--p-blue-300); }
.text-blue-400 { color: var(--p-blue-400); }
.text-blue-500 { color: var(--p-blue-500); }
.text-blue-600 { color: var(--p-blue-600); }
.text-blue-700 { color: var(--p-blue-700); }
.text-blue-800 { color: var(--p-blue-800); }
.text-blue-900 { color: var(--p-blue-900); }

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

Background Colors

// Theme colors
.bg-blue-50 { background-color: var(--p-blue-50); }
.bg-blue-100 { background-color: var(--p-blue-100); }
.bg-blue-200 { background-color: var(--p-blue-200); }
.bg-blue-300 { background-color: var(--p-blue-300); }
.bg-blue-400 { background-color: var(--p-blue-400); }
.bg-blue-500 { background-color: var(--p-blue-500); }
.bg-blue-600 { background-color: var(--p-blue-600); }
.bg-blue-700 { background-color: var(--p-blue-700); }
.bg-blue-800 { background-color: var(--p-blue-800); }
.bg-blue-900 { background-color: var(--p-blue-900); }

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

// Transparent background
.bg-transparent { background-color: transparent; }

Border Colors

// Theme colors
.border-blue-50 { border-color: var(--p-blue-50); }
.border-blue-100 { border-color: var(--p-blue-100); }
.border-blue-200 { border-color: var(--p-blue-200); }
.border-blue-300 { border-color: var(--p-blue-300); }
.border-blue-400 { border-color: var(--p-blue-400); }
.border-blue-500 { border-color: var(--p-blue-500); }
.border-blue-600 { border-color: var(--p-blue-600); }
.border-blue-700 { border-color: var(--p-blue-700); }
.border-blue-800 { border-color: var(--p-blue-800); }
.border-blue-900 { border-color: var(--p-blue-900); }

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

// Transparent border
.border-transparent { border-color: transparent; }

Surface Colors

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

// Surface text colors (0, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900)
.text-surface-0 { color: light-dark(var(--p-surface-0), var(--p-surface-950)); }
.text-surface-50 { color: light-dark(var(--p-surface-50), var(--p-surface-900)); }
.text-surface-100 { color: light-dark(var(--p-surface-100), var(--p-surface-800)); }
.text-surface-200 { color: light-dark(var(--p-surface-200), var(--p-surface-700)); }
.text-surface-300 { color: light-dark(var(--p-surface-300), var(--p-surface-600)); }
.text-surface-400 { color: light-dark(var(--p-surface-400), var(--p-surface-500)); }
.text-surface-500 { color: light-dark(var(--p-surface-500), var(--p-surface-400)); }
.text-surface-600 { color: light-dark(var(--p-surface-600), var(--p-surface-300)); }
.text-surface-700 { color: light-dark(var(--p-surface-700), var(--p-surface-200)); }
.text-surface-800 { color: light-dark(var(--p-surface-800), var(--p-surface-100)); }
.text-surface-900 { color: light-dark(var(--p-surface-900), var(--p-surface-50)); }

// Surface background colors
.surface-0 { background-color: light-dark(var(--p-surface-0), var(--p-surface-950)); }
.surface-50 { background-color: light-dark(var(--p-surface-50), var(--p-surface-900)); }
.surface-100 { background-color: light-dark(var(--p-surface-100), var(--p-surface-800)); }
.surface-200 { background-color: light-dark(var(--p-surface-200), var(--p-surface-700)); }
.surface-300 { background-color: light-dark(var(--p-surface-300), var(--p-surface-600)); }
.surface-400 { background-color: light-dark(var(--p-surface-400), var(--p-surface-500)); }
.surface-500 { background-color: light-dark(var(--p-surface-500), var(--p-surface-400)); }
.surface-600 { background-color: light-dark(var(--p-surface-600), var(--p-surface-300)); }
.surface-700 { background-color: light-dark(var(--p-surface-700), var(--p-surface-200)); }
.surface-800 { background-color: light-dark(var(--p-surface-800), var(--p-surface-100)); }
.surface-900 { background-color: light-dark(var(--p-surface-900), var(--p-surface-50)); }

// Surface border colors
.border-surface-0 { border-color: light-dark(var(--p-surface-0), var(--p-surface-950)); }
.border-surface-50 { border-color: light-dark(var(--p-surface-50), var(--p-surface-900)); }
.border-surface-100 { border-color: light-dark(var(--p-surface-100), var(--p-surface-800)); }
.border-surface-200 { border-color: light-dark(var(--p-surface-200), var(--p-surface-700)); }
.border-surface-300 { border-color: light-dark(var(--p-surface-300), var(--p-surface-600)); }
.border-surface-400 { border-color: light-dark(var(--p-surface-400), var(--p-surface-500)); }
.border-surface-500 { border-color: light-dark(var(--p-surface-500), var(--p-surface-400)); }
.border-surface-600 { border-color: light-dark(var(--p-surface-600), var(--p-surface-300)); }
.border-surface-700 { border-color: light-dark(var(--p-surface-700), var(--p-surface-200)); }
.border-surface-800 { border-color: light-dark(var(--p-surface-800), var(--p-surface-100)); }
.border-surface-900 { border-color: light-dark(var(--p-surface-900), var(--p-surface-50)); }

Alpha Colors

Semi-transparent color variants using rgba values:

// White alpha variants (10, 20, 30, 40, 50, 60, 70, 80, 90)
.bg-white-alpha-10 { background-color: rgba(255,255,255,0.1); }
.bg-white-alpha-20 { background-color: rgba(255,255,255,0.2); }
.bg-white-alpha-30 { background-color: rgba(255,255,255,0.3); }
.bg-white-alpha-40 { background-color: rgba(255,255,255,0.4); }
.bg-white-alpha-50 { background-color: rgba(255,255,255,0.5); }
.bg-white-alpha-60 { background-color: rgba(255,255,255,0.6); }
.bg-white-alpha-70 { background-color: rgba(255,255,255,0.7); }
.bg-white-alpha-80 { background-color: rgba(255,255,255,0.8); }
.bg-white-alpha-90 { background-color: rgba(255,255,255,0.9); }

// Black alpha variants
.bg-black-alpha-10 { background-color: rgba(0,0,0,0.1); }
.bg-black-alpha-20 { background-color: rgba(0,0,0,0.2); }
.bg-black-alpha-30 { background-color: rgba(0,0,0,0.3); }
.bg-black-alpha-40 { background-color: rgba(0,0,0,0.4); }
.bg-black-alpha-50 { background-color: rgba(0,0,0,0.5); }
.bg-black-alpha-60 { background-color: rgba(0,0,0,0.6); }
.bg-black-alpha-70 { background-color: rgba(0,0,0,0.7); }
.bg-black-alpha-80 { background-color: rgba(0,0,0,0.8); }
.bg-black-alpha-90 { background-color: rgba(0,0,0,0.9); }

// Text alpha colors
.text-white-alpha-10 { color: rgba(255,255,255,0.1); }
.text-white-alpha-20 { color: rgba(255,255,255,0.2); }
.text-white-alpha-30 { color: rgba(255,255,255,0.3); }
.text-white-alpha-40 { color: rgba(255,255,255,0.4); }
.text-white-alpha-50 { color: rgba(255,255,255,0.5); }
.text-white-alpha-60 { color: rgba(255,255,255,0.6); }
.text-white-alpha-70 { color: rgba(255,255,255,0.7); }
.text-white-alpha-80 { color: rgba(255,255,255,0.8); }
.text-white-alpha-90 { color: rgba(255,255,255,0.9); }

.text-black-alpha-10 { color: rgba(0,0,0,0.1); }
.text-black-alpha-20 { color: rgba(0,0,0,0.2); }
.text-black-alpha-30 { color: rgba(0,0,0,0.3); }
.text-black-alpha-40 { color: rgba(0,0,0,0.4); }
.text-black-alpha-50 { color: rgba(0,0,0,0.5); }
.text-black-alpha-60 { color: rgba(0,0,0,0.6); }
.text-black-alpha-70 { color: rgba(0,0,0,0.7); }
.text-black-alpha-80 { color: rgba(0,0,0,0.8); }
.text-black-alpha-90 { color: rgba(0,0,0,0.9); }

// Border alpha colors
.border-white-alpha-10 { border-color: rgba(255,255,255,0.1); }
.border-white-alpha-20 { border-color: rgba(255,255,255,0.2); }
.border-white-alpha-30 { border-color: rgba(255,255,255,0.3); }
.border-white-alpha-40 { border-color: rgba(255,255,255,0.4); }
.border-white-alpha-50 { border-color: rgba(255,255,255,0.5); }
.border-white-alpha-60 { border-color: rgba(255,255,255,0.6); }
.border-white-alpha-70 { border-color: rgba(255,255,255,0.7); }
.border-white-alpha-80 { border-color: rgba(255,255,255,0.8); }
.border-white-alpha-90 { border-color: rgba(255,255,255,0.9); }

.border-black-alpha-10 { border-color: rgba(0,0,0,0.1); }
.border-black-alpha-20 { border-color: rgba(0,0,0,0.2); }
.border-black-alpha-30 { border-color: rgba(0,0,0,0.3); }
.border-black-alpha-40 { border-color: rgba(0,0,0,0.4); }
.border-black-alpha-50 { border-color: rgba(0,0,0,0.5); }
.border-black-alpha-60 { border-color: rgba(0,0,0,0.6); }
.border-black-alpha-70 { border-color: rgba(0,0,0,0.7); }
.border-black-alpha-80 { border-color: rgba(0,0,0,0.8); }
.border-black-alpha-90 { border-color: rgba(0,0,0,0.9); }

Special Semantic Colors

// Primary color utilities
.text-primary { color: var(--p-primary-color); }
.bg-primary { 
  background-color: var(--p-primary-color); 
  color: var(--p-primary-contrast-color); 
}
.bg-primary-reverse { 
  background-color: var(--p-primary-contrast-color); 
  color: var(--p-primary-color); 
}
.border-primary { border-color: var(--p-primary-color); }

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

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

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

State Variants

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

// Hover states
.hover\\:text-primary:hover { color: var(--p-primary-color); }
.hover\\:bg-primary:hover { background-color: var(--p-primary-color); }
.hover\\:border-primary:hover { border-color: var(--p-primary-color); }

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

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

// All theme colors support state variants:
// .hover\\:text-{color}-{shade}:hover
// .focus\\:bg-{color}-{shade}:focus
// .active\\:border-{color}-{shade}:active

CSS Custom Properties

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

:root {
  --p-primary-color: #3B82F6;
  --p-primary-contrast-color: #ffffff;
  --p-text-color: #495057;
  --p-text-muted-color: #6c757d;
  
  --p-surface-0: #ffffff;
  --p-surface-50: #FAFAFA;
  --p-surface-100: #F5F5F5;
  --p-surface-200: #EEEEEE;
  --p-surface-300: #E0E0E0;
  --p-surface-400: #BDBDBD;
  --p-surface-500: #9E9E9E;
  --p-surface-600: #757575;
  --p-surface-700: #616161;
  --p-surface-800: #424242;
  --p-surface-900: #212121;
  
  --p-blue-50: #f5f9ff;
  --p-blue-100: #d0e1fd;
  --p-blue-200: #abc9fb;
  --p-blue-300: #85b2f9;
  --p-blue-400: #609af8;
  --p-blue-500: #3b82f6;
  --p-blue-600: #326fd1;
  --p-blue-700: #295bac;
  --p-blue-800: #204887;
  --p-blue-900: #183462;
  
  /* Similar pattern for all theme colors: green, yellow, cyan, pink, indigo, teal, orange, bluegray, purple, gray, red */
}

Usage Examples

Color Scheme Cards

<div class="grid">
  <div class="col-12 md:col-4">
    <div class="p-4 bg-blue-500 text-white border-round">
      <h3 class="m-0 mb-2">Primary Card</h3>
      <p class="m-0 text-blue-100">Blue theme color scheme</p>
    </div>
  </div>
  <div class="col-12 md:col-4">
    <div class="p-4 surface-card border-round shadow-2">
      <h3 class="m-0 mb-2 text-surface-900">Surface Card</h3>
      <p class="m-0 text-surface-600">Adaptive surface colors</p>
    </div>
  </div>
  <div class="col-12 md:col-4">
    <div class="p-4 bg-green-500 text-white border-round">
      <h3 class="m-0 mb-2">Success Card</h3>
      <p class="m-0 text-green-100">Green success theme</p>
    </div>
  </div>
</div>

Interactive Button States

<div class="flex gap-3">
  <button class="px-4 py-2 bg-primary text-white border-none border-round cursor-pointer hover:bg-primary-600 active:bg-primary-700">
    Primary Button
  </button>
  <button class="px-4 py-2 border-1 border-primary text-primary bg-transparent border-round cursor-pointer hover:bg-primary hover:text-white">
    Outline Button
  </button>
  <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">
    Danger Button
  </button>
</div>

Alpha Overlay

<div class="relative">
  <img src="background.jpg" alt="Background" class="w-full h-20rem object-cover border-round">
  <div class="absolute inset-0 bg-black-alpha-50 flex align-items-center justify-content-center border-round">
    <div class="text-center text-white">
      <h2 class="m-0 mb-2 text-3xl font-bold">Overlay Title</h2>
      <p class="m-0 text-white-alpha-90">Semi-transparent overlay content</p>
    </div>
  </div>
</div>

Theme-Aware Layout

<div class="surface-ground min-h-screen">
  <header class="surface-section p-4 shadow-2">
    <div class="flex align-items-center justify-content-between">
      <h1 class="m-0 text-color">App Title</h1>
      <button class="bg-primary text-white border-none p-2 border-round">
        Action
      </button>
    </div>
  </header>
  
  <main class="p-4">
    <div class="surface-card p-4 border-round shadow-1">
      <h2 class="m-0 mb-3 text-color">Content Card</h2>
      <p class="m-0 text-color-secondary line-height-3">
        This layout automatically adapts to light and dark themes using surface colors.
      </p>
    </div>
  </main>
</div>

Status Indicators

<div class="flex flex-column gap-3">
  <div class="flex align-items-center gap-2">
    <div class="w-1rem h-1rem bg-green-500 border-circle"></div>
    <span class="text-green-700">Online</span>
  </div>
  <div class="flex align-items-center gap-2">
    <div class="w-1rem h-1rem bg-yellow-500 border-circle"></div>
    <span class="text-yellow-700">Away</span>
  </div>
  <div class="flex align-items-center gap-2">
    <div class="w-1rem h-1rem bg-red-500 border-circle"></div>
    <span class="text-red-700">Offline</span>
  </div>
</div>

Gradient-like Effects with Alpha

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

Install with Tessl CLI

npx tessl i tessl/npm-primeflex

docs

animation-interaction.md

borders-effects.md

colors.md

flexbox.md

form-layout.md

grid-system.md

image.md

index.md

layout.md

list-style.md

misc.md

overflow.md

spacing.md

typography.md

user-select.md

zindex.md

tile.json