Open Props Skill

Use Open Props for battle-tested CSS custom properties without build-time dependencies.

Philosophy

Open Props aligns with minimalist, dependency-light principles:

Installation Options

Option 1: NPM (Full Control)

npm install open-props

/* Import specific modules */
@import 'open-props/colors.min.css';
@import 'open-props/sizes.min.css';
@import 'open-props/shadows.min.css';

Option 2: CDN (Quick Start)

<link rel="stylesheet" href="https://unpkg.com/open-props"/>

Option 3: Copy Values (Zero Dependencies)

Copy specific values you need into your own tokens file:

/* tokens.css - Copied from Open Props */
:root {
  /* Spacing - from sizes */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 4rem;

  /* Colors - from colors */
  --blue-5: oklch(51.1% 0.262 276.97);
  --gray-2: oklch(92% 0 0);
  --gray-8: oklch(27.8% 0 0);
}

Core Modules

Sizes (Spacing & Typography)

@import 'open-props/sizes.min.css';

/* Usage */
.container {
  padding: var(--size-3);      /* 1rem */
  gap: var(--size-2);          /* 0.5rem */
  max-width: var(--size-content-3); /* 60ch */
}

/* Size scale: 1-15 */
/* --size-1: 0.25rem (4px) */
/* --size-2: 0.5rem (8px) */
/* --size-3: 1rem (16px) */
/* --size-4: 1.25rem (20px) */
/* ... */
/* --size-15: 64rem (1024px) */

Colors

@import 'open-props/colors.min.css';

/* Usage */
.button {
  background: var(--blue-7);
  color: var(--gray-0);
}

.button:hover {
  background: var(--blue-8);
}

/* Color scales: 0-12 (light to dark) */
/* Available colors: gray, stone, red, pink, purple, violet, */
/* indigo, blue, cyan, teal, green, lime, yellow, orange */

Shadows

@import 'open-props/shadows.min.css';

/* Usage */
.card {
  box-shadow: var(--shadow-2);
}

.card:hover {
  box-shadow: var(--shadow-4);
}

/* Shadow scale: 1-6 (subtle to dramatic) */

Gradients

@import 'open-props/gradients.min.css';

/* Usage */
.hero {
  background: var(--gradient-1);
}

/* 30 pre-built gradients */

Animations

@import 'open-props/animations.min.css';

/* Usage */
.fade-in {
  animation: var(--animation-fade-in);
}

.slide-in {
  animation: var(--animation-slide-in-up);
}

/* Available: fade-in, fade-out, scale-up, scale-down, */
/* slide-in-*, slide-out-*, shake-*, spin, ping, blink */

Easings

@import 'open-props/easings.min.css';

/* Usage */
.transition {
  transition: transform 0.3s var(--ease-3);
}

/* Easing scale: 1-5 (subtle to dramatic) */
/* Types: ease, ease-in, ease-out, ease-in-out, */
/* ease-elastic, ease-squish, ease-bounce */

Borders

@import 'open-props/borders.min.css';

/* Usage */
.card {
  border-radius: var(--radius-2);
}

.pill {
  border-radius: var(--radius-round);
}

/* Border radius scale: 1-6 + round, blob, conditional */

Aspect Ratios

@import 'open-props/aspects.min.css';

/* Usage */
.video {
  aspect-ratio: var(--ratio-widescreen); /* 16/9 */
}

.square {
  aspect-ratio: var(--ratio-square); /* 1 */
}

Integration with @layer

Combine with CSS cascade layers:

/* main.css */
@layer tokens, reset, base, components, utilities;

@import 'open-props/colors.min.css' layer(tokens);
@import 'open-props/sizes.min.css' layer(tokens);
@import 'open-props/shadows.min.css' layer(tokens);

@layer tokens {
  /* Override or extend Open Props */
  :root {
    --color-primary: var(--blue-7);
    --color-secondary: var(--purple-7);
    --space-page: var(--size-5);
  }
}

@layer base {
  body {
    color: var(--gray-8);
    background: var(--gray-1);
  }
}

Project Token Mapping

Map Open Props to semantic project tokens:

/* tokens.css */
:root {
  /* Colors - Semantic mapping */
  --color-text: var(--gray-8);
  --color-text-muted: var(--gray-6);
  --color-background: var(--gray-0);
  --color-surface: var(--gray-1);
  --color-border: var(--gray-3);

  --color-primary: var(--blue-7);
  --color-primary-hover: var(--blue-8);
  --color-primary-text: var(--gray-0);

  --color-success: var(--green-7);
  --color-warning: var(--yellow-6);
  --color-error: var(--red-7);

  /* Spacing - Semantic mapping */
  --space-xs: var(--size-1);
  --space-sm: var(--size-2);
  --space-md: var(--size-3);
  --space-lg: var(--size-5);
  --space-xl: var(--size-7);

  /* Typography */
  --font-size-sm: var(--font-size-0);
  --font-size-base: var(--font-size-1);
  --font-size-lg: var(--font-size-2);
  --font-size-xl: var(--font-size-4);
  --font-size-2xl: var(--font-size-6);

  /* Effects */
  --shadow-sm: var(--shadow-1);
  --shadow-md: var(--shadow-3);
  --shadow-lg: var(--shadow-5);

  --radius-sm: var(--radius-2);
  --radius-md: var(--radius-3);
  --radius-lg: var(--radius-4);
}

Dark Mode

Open Props includes HSL versions for easy dark mode:

@import 'open-props/colors-hsl.min.css';

:root {
  --surface: hsl(var(--gray-0-hsl));
  --text: hsl(var(--gray-9-hsl));
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface: hsl(var(--gray-9-hsl));
    --text: hsl(var(--gray-1-hsl));
  }
}

Or use the OKLCH versions for better color manipulation:

@import 'open-props/colors.min.css'; /* OKLCH by default */

:root {
  --text-color: var(--gray-8);
  --bg-color: var(--gray-1);
}

[data-theme="dark"] {
  --text-color: var(--gray-2);
  --bg-color: var(--gray-9);
}

Responsive Typography

/* Fluid type scale */
@import 'open-props/fonts.min.css';

h1 { font-size: var(--font-size-fluid-3); }
h2 { font-size: var(--font-size-fluid-2); }
h3 { font-size: var(--font-size-fluid-1); }
p { font-size: var(--font-size-fluid-0); }
small { font-size: var(--font-size-0); }

Minimal Import Strategy

Import only what you use:

/* Minimal setup - just essentials */
@import 'open-props/sizes.min.css';
@import 'open-props/gray.min.css';      /* Just gray colors */
@import 'open-props/blue.min.css';      /* Just blue colors */
@import 'open-props/shadows.min.css';
@import 'open-props/borders.min.css';

Or copy specific values (zero runtime dependency):

/* Manually copied values - no import needed */
:root {
  --size-1: 0.25rem;
  --size-2: 0.5rem;
  --size-3: 1rem;
  --size-4: 1.25rem;
  --size-5: 1.5rem;

  --gray-0: oklch(99% 0 0);
  --gray-1: oklch(95% 0 0);
  --gray-8: oklch(27.8% 0 0);
  --gray-9: oklch(21% 0 0);

  --blue-7: oklch(48.8% 0.243 264.05);

  --shadow-2: 0 3px 5px -2px hsl(0 0% 0% / 0.1),
              0 7px 14px -5px hsl(0 0% 0% / 0.1);

  --radius-2: 0.5rem;
}

Checklist

When using Open Props:

• Import only needed modules (not everything)
• Map to semantic project tokens
• Document which values are used
• Consider copying values for zero dependencies
• Test dark mode color combinations
• Verify animation performance

Related Skills

• css-author - CSS organization and @layer
• performance - Minimize CSS payload
• accessibility-checker - Color contrast requirements