### Dynamic Palette Playground Example

Source: https://github.com/argyleink/open-props/blob/main/docsite/index.html

An example demonstrating the setup for a dynamic palette playground, including hue and chroma variables.

```css
@import "open-props/palette";

:root {
  --palette-hue: 270;
  --palette-hue-rotate-by: 1;
  --palette-chroma: .9;
}
```

--------------------------------

### Install Open Props

Source: https://github.com/argyleink/open-props/blob/main/_autodocs/SUMMARY.md

Install the Open Props package using npm.

```bash
npm install open-props
```

--------------------------------

### Basic Dynamic Palette Setup

Source: https://github.com/argyleink/open-props/blob/main/docsite/index.html

Set up a dynamic color palette using `oklch` variables. Requires importing 'open-props/palette'.

```css
@import "open-props/palette";

:root {
  --palette-hue: 270;
  --palette-hue-rotate-by: 1;
  --palette-chroma: 0.9;
}
```

--------------------------------

### PostCSS Import Examples

Source: https://github.com/argyleink/open-props/blob/main/docsite/index.html

Shows how to import Open Props using @import syntax within PostCSS.

```css
/* the props */
@import "https://unpkg.com/open-props/src/index.css";

/* optional imports that use the props */
@import "https://unpkg.com/open-props/src/extra/normalize.css";
@import "https://unpkg.com/open-props/src/extra/buttons.css";

/* individual imports */
@import "https://unpkg.com/open-props/src/indigo.min.css";
@import "https://unpkg.com/open-props/src/indigo-hsl.min.css";
@import "https://unpkg.com/open-props/src/easings.min.css";
@import "https://unpkg.com/open-props/src/animations.min.css";
@import "https://unpkg.com/open-props/src/sizes.min.css";
@import "https://unpkg.com/open-props/src/gradients.min.css";
/* see PropPacks for the full list */
```

--------------------------------

### Install PostCSS Plugins

Source: https://github.com/argyleink/open-props/blob/main/_autodocs/errors.md

Install necessary PostCSS dependencies if a plugin is reported as non-existent.

```bash
npm install
npm run bundle
```

--------------------------------

### Install Peer Dependencies

Source: https://github.com/argyleink/open-props/blob/main/_autodocs/errors.md

Install optional peer dependencies like PostCSS, CSSnano, and postcss-cli if you encounter 'unmet peer dependency' warnings during installation and require advanced features.

```bash
npm install postcss cssnano postcss-cli
```

--------------------------------

### CSS Shadow Application Examples

Source: https://github.com/argyleink/open-props/blob/main/_autodocs/api-reference/shadows.md

Demonstrates applying various shadow elevations from Open Props to CSS classes. Includes hover effects and inner shadow highlights. Requires importing 'open-props/src/shadows'.

```css
@import 'open-props/src/shadows';

/* Default card */
.card {
  box-shadow: var(--shadow-2);
  border-radius: 1rem;
  padding: 2rem;
}

/* Elevated card */
.card:hover {
  box-shadow: var(--shadow-4);
  transition: box-shadow 0.3s ease-out;
}

/* Modal */
.modal {
  box-shadow: var(--shadow-5);
}

/* Inner shadow effect */
.glass-morphism {
  box-shadow: var(--inner-shadow-highlight);
}
```

--------------------------------

### Install Open Props via Bookmarklet

Source: https://github.com/argyleink/open-props/blob/main/readme.md

This bookmarklet adds Open Props CSS to the current page by dynamically creating a link element in the document's head.

```javascript
javascript: (() => {
  const href = "https://unpkg.com/open-props";
  document.head.append(Object.assign(document.createElement("link"),{rel:"stylesheet",href}));
})();
```

--------------------------------

### Clone Open Props Repository

Source: https://github.com/argyleink/open-props/blob/main/docsite/index.html

Clone the Open Props repository to start customizing.

```bash
git clone https://github.com/argyleink/open-props.git
```

--------------------------------

### CSS Animation Easing Usage Examples

Source: https://github.com/argyleink/open-props/blob/main/docsite/index.html

Demonstrates how to apply different easing functions to CSS animations using custom properties.

```css
.slight-ease {
  animation: fade-in 300ms var(--ease-1);
}

.dramatic-ease {
  animation: fade-in 1s var(--ease-5);
}

.bouncy {
  animation: slide-in-up 3s var(--ease-bounce-2);
}
```

--------------------------------

### Install TypeScript for Type Generation

Source: https://github.com/argyleink/open-props/blob/main/_autodocs/errors.md

Run this command if the TypeScript compiler is not found when generating types.

```bash
npm install  # Install dev dependencies including typescript
npm run gen:types
```

--------------------------------

### Button Styling with Open Props Colors

Source: https://github.com/argyleink/open-props/blob/main/docsite/index.html

Example of styling a button using Open Props color variables. This snippet demonstrates setting text color, background, and border using predefined color scales.

```css
button.blue {
  color: var(--blue-6);
  background-color: var(--blue-0);
  border: 1px solid var(--blue-1);
  text-shadow: 0 1px 0 var(--blue-2);

  &:hover {
    background-color: var(--blue-1);
  }
}
```

--------------------------------

### Combined Animation Example

Source: https://github.com/argyleink/open-props/blob/main/docsite/index.html

Shows how to combine multiple animation effects like fade, slide, and scale for complex transitions. Ensure to check animation-timing-function and animation-duration for desired effects.

```css
.slide-fade {
  animation:
    var(--animation-fade-out) forwards,
    var(--animation-slide-out-down);
  animation-timing-function: var(--ease-elastic-in-out-3);
  animation-duration: 1s;
}

.shake-in {
  animation:
    var(--animation-shake-y),
    var(--animation-fade-in),
    var(--animation-slide-in-left);
}

.push-out {
  animation:
    var(--animation-scale-down),
    var(--animation-fade-out);
  animation-timing-function: var(--ease-elastic-in-out-4);
}
```

--------------------------------

### Specific Hue Palette Type Example

Source: https://github.com/argyleink/open-props/blob/main/_autodocs/types.md

Illustrates the detailed type structure for a specific hue palette, like 'Gray', showing individual color variable names and their string values.

```typescript
export const Gray: {
  '--gray-0': string
  '--gray-1': string
  // ... '--gray-12'
}
```

--------------------------------

### CSS Gradient Fallback Example

Source: https://github.com/argyleink/open-props/blob/main/_autodocs/api-reference/gradients.md

Provide a fallback solid color for older browsers when using CSS gradients from Open Props.

```css
.bg {
  background: #333;  /* Fallback */
  background-image: var(--gradient-5);
}
```

--------------------------------

### Card Component Styling with Open Props

Source: https://github.com/argyleink/open-props/blob/main/docsite/index.html

Example of styling a card component using Open Props variables for border-radius, padding, and box-shadow. Includes a hover effect and a fade-in animation for larger screens.

```css
.card {
  border-radius: var(--radius-2);
  padding: var(--size-fluid-3);
  box-shadow: var(--shadow-2);

  &:hover {
    box-shadow: var(--shadow-3);
  }

  @media (--motionOK) {
    animation: var(--animation-fade-in);
  }
}
```

--------------------------------

### Build All Bundles

Source: https://github.com/argyleink/open-props/blob/main/docsite/index.html

Create all the various minified bundles of props.

```bash
npm run bundle
```

--------------------------------

### Animations Module Type Example

Source: https://github.com/argyleink/open-props/blob/main/_autodocs/types.md

An example of the type definition for the animations module, showing string values for animation properties.

```typescript
declare const _default: {
  '--animation-fade-in': string
  '--animation-fade-in-@': string
  '--animation-scale-up': string
  // ... more animation strings
}
export default _default
```

--------------------------------

### Build and Test Open Props

Source: https://github.com/argyleink/open-props/blob/main/readme.md

Commands to build the Open Props project and run tests. Ensure the project is built before testing.

```bash
npm run build && npm run bundle
npm test
```

--------------------------------

### Open Props File Structure

Source: https://github.com/argyleink/open-props/blob/main/_autodocs/SUMMARY.md

Overview of the directory structure for the Open Props project, detailing the location of various documentation and configuration files.

```bash
```
/output/
├── README.md                     # Project overview
├── SUMMARY.md                    # This file
├── types.md                      # TypeScript reference
├── configuration.md              # Build & setup
├── errors.md                     # Error reference
└── api-reference/
    ├── INDEX.md                  # Module index
    ├── main-entry.md             # Unified export
    ├── animations.md             # Animation properties
    ├── sizes.md                  # Size/spacing properties
    ├── colors.md                 # Color palettes
    ├── fonts.md                  # Typography properties
    ├── borders-radius.md         # Border properties
    ├── shadows.md                # Shadow properties
    ├── easing.md                 # Easing curves
    ├── gradients.md              # Gradient patterns
    └── media-queries.md          # Media query definitions
```
```

--------------------------------

### Compose Open Props Modules

Source: https://github.com/argyleink/open-props/blob/main/_autodocs/api-reference/INDEX.md

Demonstrates how to import and compose various Open Props modules to create a cohesive design element like an animated card. Ensure modules are imported before use.

```javascript
import Animations from 'open-props/src/animations'
import Easing from 'open-props/src/easing'
import Sizes from 'open-props/src/sizes'
import Fonts from 'open-props/src/fonts'
import Shadows from 'open-props/src/shadows'

const animatedCard = {
  fontSize: Fonts['--font-size-3'],
  padding: Sizes['--size-4'],
  boxShadow: Shadows['--shadow-2'],
  animation: Animations['--animation-fade-in'],  // Uses easing internally
}
```

--------------------------------

### Animation Usage Examples

Source: https://github.com/argyleink/open-props/blob/main/docsite/index.html

Demonstrates how to apply various animation CSS variables to elements. These can be used for fade, slide, spin, and other effects.

```css
.loaded {
  animation: var(--animation-fade-in) forwards;
}

.actionsheet {
  animation: var(--animation-slide-out-down) forwards;

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

.alert {
  animation: var(--animation-blink);
}
```

--------------------------------

### Full Local Build

Source: https://github.com/argyleink/open-props/blob/main/docsite/index.html

Execute both `gen:op` and `gen:shadowdom` to perform a complete local build.

```bash
npm run build
```

--------------------------------

### Applying Dark Mode with Open Props

Source: https://github.com/argyleink/open-props/blob/main/docsite/index.html

Demonstrates how to set a light theme by default and switch to a dark theme using the --OSdark custom media query. This ensures a consistent look across different user preferences.

```css
html {
  background: white;
  color: var(--gray-8);
}

@media (--OSdark) {
  html {
    background: var(--gray-9);
    color: var(--gray-1);
  }
}
```

--------------------------------

### Validate Resolved CSS Variable Width

Source: https://github.com/argyleink/open-props/blob/main/_autodocs/errors.md

Use JavaScript to get the computed style of an element and log the resolved value of a CSS variable, useful for debugging.

```html
<div id="test" style="width: var(--size-3)"></div>
<script>
  const style = getComputedStyle(document.getElementById('test'))
  console.log(style.width)  // See resolved value
</script>
```

--------------------------------

### Importing Open Props in HTML

Source: https://github.com/argyleink/open-props/blob/main/docsite/index.html

Shows how to link to Open Props stylesheets using HTML's <link> tag.

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

<!-- optional imports that use the props -->
<link rel="stylesheet" href="https://unpkg.com/open-props/normalize.min.css"/>
<link rel="stylesheet" href="https://unpkg.com/open-props/buttons.min.css"/>

<!-- individual imports -->
<link rel="stylesheet" href="https://unpkg.com/open-props/indigo.min.css"/>
<link rel="stylesheet" href="https://unpkg.com/open-props/indigo-hsl.min.css"/>
<link rel="stylesheet" href="https://unpkg.com/open-props/easings.min.css"/>
<link rel="stylesheet" href="https://unpkg.com/open-props/animations.min.css"/>
<link rel="stylesheet" href="https://unpkg.com/open-props/sizes.min.css"/>
<link rel="stylesheet" href="https://unpkg.com/open-props/gradients.min.css"/>
<!-- see PropPacks for the full list -->
```

--------------------------------

### Apply Minification and Report Bundle Sizes

Source: https://github.com/argyleink/open-props/blob/main/_autodocs/errors.md

Use these commands to address issues with unexpectedly large CSS/JS bundles. The first applies minification, and the second reports bundle sizes.

```bash
npm run bundle  # Apply minification
```

```bash
npm run bundle:sizes  # Report bundle sizes
```

--------------------------------

### Basic CSS Layout with Open Props

Source: https://github.com/argyleink/open-props/blob/main/docsite/index.html

Demonstrates using Open Props variables for positioning elements. Ensure Open Props is imported to use these variables.

```css
figure {
  position: relative;

  & figcaption {
    position: absolute;
    z-index: var(--layer-1);
    inset-inline: 0;
    inset-block: auto 0;
  }
}

.desperate-measures {
  position: fixed;
  z-index: var(--layer-important);
}
```

--------------------------------

### Animation Definitions with Easing

Source: https://github.com/argyleink/open-props/blob/main/_autodocs/api-reference/easing.md

Define CSS animations using predefined variables, including easing functions. This example shows how to apply custom easing to fade-in and spring animations.

```javascript
'--animation-fade-in': 'fade-in .5s var(--ease-3)',
'--animation-spring': 'spring-in .6s var(--ease-spring-2)'
```

--------------------------------

### Import All Open Props Modules

Source: https://github.com/argyleink/open-props/blob/main/_autodocs/api-reference/INDEX.md

Import all Open Props modules for use in your project. This can be done via the main entry point or the src directory.

```javascript
// Main entry (all modules)
import OpenProps from 'open-props'
import OpenProps from 'open-props/src'
```

--------------------------------

### Import Mask Corner Cuts

Source: https://github.com/argyleink/open-props/blob/main/docsite/index.html

Import the mask corner cuts CSS properties using NPM or CDN. Choose the appropriate import path based on your project setup.

```css
@import "open-props/masks/corner-cuts";
@import "open-props/src/props.masks.corner-cuts.css";
@import "open-props/masks.corner-cuts.min.css";
```

```css
@import "https://unpkg.com/open-props/masks.corner-cuts.min.css";
```

--------------------------------

### VSCode Autocomplete Settings

Source: https://github.com/argyleink/open-props/blob/main/docsite/index.html

Configure VSCode to provide autocompletion for Open Props CSS variables. Ensure the CSS Var Complete extension is installed and add the path to your open-props.min.css file.

```json
{
  "cssvar.files": [
    "./node_modules/open-props/open-props.min.css",
    "assets/styles/variables.css"
  ],
  "cssvar.ignore": [],
  "cssvar.extensions": [
    "css", "postcss", "jsx", "tsx"
  ]
}
```

--------------------------------

### Open Props Architecture Overview

Source: https://github.com/argyleink/open-props/blob/main/_autodocs/INDEX.md

This snippet outlines the directory structure and organization of Open Props modules, illustrating how the system is exported.

```tree
open-props/
├── Main entry point      (all modules combined)
├── Animation system      (keyframes + timing)
├── Sizing system         (spacing + scales + breakpoints)
├── Color system          (13 hues × 13 steps)
├── Typography system     (fonts + sizes + weights + heights)
├── Layout system         (borders + radius + shapes)
├── Depth system          (shadows + z-index)
├── Motion system         (easing curves)
├── Visual effects        (gradients)
├── Responsive system     (media queries)
└── Accessibility         (preference detection)
```

--------------------------------

### Usage Sample for Borders and Radii

Source: https://github.com/argyleink/open-props/blob/main/docsite/index.html

Demonstrates applying border size, conditional radii, and round radii for card elements and circular elements.

```css
.card {
  /* no radius when fullscreen */
  border-radius: var(--radius-conditional-3);
  border: var(--border-size-1) solid var(--gray-1);
}

.circle {
  inline-size: var(--size-5);
  aspect-ratio: var(--ratio-square);
  border-radius: var(--radius-round);
}

.drawn {
  inline-size: var(--size-14);
  border: var(--brown-12) var(--border-size-4) solid;
  border-radius: var(--radius-drawn-1);
}
```

--------------------------------

### Applying Gradients in CSS

Source: https://github.com/argyleink/open-props/blob/main/_autodocs/api-reference/gradients.md

Illustrates how to import and use gradient CSS variables for background properties in standard CSS.

```css
@import 'open-props/src/gradients';

.hero-section {
  background-image: var(--gradient-1);
  background-attachment: fixed;
}

.accent-box {
  background: var(--gradient-5);
  border-radius: 1rem;
}

.card-bg {
  background: var(--gradient-7);
}
```

--------------------------------

### Light and Dark Mode Text Colors

Source: https://github.com/argyleink/open-props/blob/main/docsite/index.html

Example of defining text colors that adapt to light and dark modes using media queries and Open Props variables. This ensures optimal readability in different environments.

```css
html {
  --text-1: var(--gray-9);
  --text-2: var(--gray-7);

  @media (--OSdark) {
    --text-1: var(--gray-1);
    --text-2: var(--gray-2);
  }
}
```

--------------------------------

### Module Bundling Commands

Source: https://github.com/argyleink/open-props/blob/main/_autodocs/configuration.md

Compile individual modules into separate CSS files. Use these scripts to bundle specific parts of the Open Props library.

```bash
npm run lib:all         # Bundle all modules into open-props.min.css

```

```bash
npm run lib:colors      # Bundle colors module into colors.min.css

```

```bash
npm run lib:sizes       # Bundle sizes module

```

```bash
npm run lib:fonts       # Bundle fonts module

```

```bash
npm run lib:shadows     # Bundle shadows module

```

```bash
npm run lib:animations  # Bundle animations module

```

```bash
npm run lib:easing      # Bundle easing module

```

```bash
npm run lib:borders     # Bundle borders module

```

```bash
npm run lib:zindex      # Bundle zindex module

```

```bash
npm run lib:gradients   # Bundle gradients module

```

```bash
npm run lib:media       # Bundle media queries module

```

```bash
npm run lib:palette     # Bundle palette module

```

--------------------------------

### Main Build Commands

Source: https://github.com/argyleink/open-props/blob/main/_autodocs/configuration.md

These npm scripts are used for the primary build processes, including generation, type creation, and testing.

```bash
npm run build

```

```bash
npm run bundle

```

```bash
npm run gen:op

```

```bash
npm run gen:types

```

```bash
npm run test

```

--------------------------------

### Run Tests and Rebuild if Necessary

Source: https://github.com/argyleink/open-props/blob/main/_autodocs/errors.md

Execute tests with `npm test`. If source code has changed, rebuild the project first using `npm run build && npm test` to resolve potential assertion failures.

```bash
npm test  # Run tests
```

```bash
npm run build && npm test  # Rebuild if source changed
```

--------------------------------

### Conditional Border Radius for Responsive Design

Source: https://github.com/argyleink/open-props/blob/main/_autodocs/api-reference/borders-radius.md

Use conditional radii to create responsive effects, such as a modal that spans the full screen on mobile and has rounded corners on larger screens. This example imports the necessary conditional radius variable.

```css
@import 'open-props/src/borders';

.modal {
  border-radius: var(--radius-conditional-4);
}

/* 
  On mobile: modal reaches edges (0px radius) for fullscreen effect
  On tablet/desktop: modal has rounded corners (2rem radius)
*/
```

--------------------------------

### Full Custom Build with Node.js Script

Source: https://github.com/argyleink/open-props/blob/main/docsite/index.html

Perform a full custom build by passing arguments to the props.js script for namespace, :where() usage, selector, and file prefix.

```bash
node props.js 'ns' true ':root' 'my'
```

--------------------------------

### List Available Animation Exports

Source: https://github.com/argyleink/open-props/blob/main/_autodocs/errors.md

Use Node.js to import and list all available keys from the Open Props animations module.

```bash
node -e "import Animations from 'open-props/src/animations'; 
          console.log(Object.keys(Animations))"
```

--------------------------------

### Style Dictionary NPM Import

Source: https://github.com/argyleink/open-props/blob/main/docsite/index.html

Import Style Dictionary tokens using NPM.

```javascript
import "open-props/style-dictionary-tokens"
// or
import "open-props/open-props.style-dictionary-tokens.json"
```

--------------------------------

### Shadow DOM Module Bundling

Source: https://github.com/argyleink/open-props/blob/main/_autodocs/configuration.md

Compile individual modules specifically for Shadow DOM environments. These commands bundle modules with a `:host` scope.

```bash
npm run shadow:all      # All modules with :host scope

```

```bash
npm run shadow:colors   # Colors module for Shadow DOM

```

```bash
npm run shadow:fonts    # Fonts module for Shadow DOM

```

--------------------------------

### Build CSS Variants

Source: https://github.com/argyleink/open-props/blob/main/_autodocs/api-reference/INDEX.md

Execute these commands to compile different variants of Open Props CSS, including standard, shadowdom, prefixed, and minified versions.

```bash
npm run build
npm run bundle
```

--------------------------------

### Importing Open Props in JavaScript

Source: https://github.com/argyleink/open-props/blob/main/docsite/index.html

Illustrates how to import Open Props CSS files directly within JavaScript modules.

```javascript
// the props
import 'https://unpkg.com/open-props';

// optional imports that use the props
import 'https://unpkg.com/open-props/normalize.min.css';
import 'https://unpkg.com/open-props/buttons.min.css';

// just go dark themed or light themed
import 'https://unpkg.com/open-props/normalize.dark.min.css';
import 'https://unpkg.com/open-props/buttons.dark.min.css';
import 'https://unpkg.com/open-props/normalize.light.min.css';
import 'https://unpkg.com/open-props/buttons.light.min.css';

// individual imports
import 'https://unpkg.com/open-props/indigo.min.css';
import 'https://unpkg.com/open-props/indigo-hsl.min.css';
import 'https://unpkg.com/open-props/easings.min.css';
import 'https://unpkg.com/open-props/animations.min.css';
import 'https://unpkg.com/open-props/sizes.min.css';
import 'https://unpkg.com/open-props/gradients.min.css';
// see PropPacks for the full list
```

--------------------------------

### Defining Custom Media Queries with Open Props

Source: https://github.com/argyleink/open-props/blob/main/docsite/index.html

Shows how to define custom media queries using the @custom-media syntax, which requires a PostCSS plugin. These can be used like CSS variables.

```css
@custom-media --portrait      (orientation: portrait);
@custom-media --landscape     (orientation: landscape);

@custom-media --md-only       (480px <= width < 768px);
@custom-media --md-n-above    (width >= 768px);
@custom-media --md-n-below    (width < 768px);
@custom-media --md-phone      (--md-only) and (--portrait);

@custom-media --xxl-only      (1440px <= width < 1920px);
@custom-media --xxl-n-above   (width >= 1920px);
@custom-media --xxl-n-below   (width < 1920px);
```

--------------------------------

### CSS Media Queries for Input Method Optimization

Source: https://github.com/argyleink/open-props/blob/main/_autodocs/api-reference/media-queries.md

Apply different spacing and sizing for buttons using `--touch` and `--mouse` media queries to optimize for touchscreens versus mouse input.

```css
@import 'open-props/src/media';

/* Touch-friendly spacing */
@media (--touch) {
  button {
    padding: 1rem;
    min-height: 44px;
  }
}

/* Mouse-optimized spacing */
@media (--mouse) {
  button {
    padding: 0.5rem 1rem;
  }
}
```

--------------------------------

### Full Path CSS Imports

Source: https://github.com/argyleink/open-props/blob/main/docsite/index.html

Import Open Props using full paths, including .css extensions and minified versions.

```css
@import "open-props/postcss/index.css";
@import "open-props/postcss/extra/normalize.css";
@import "open-props/postcss/extra/buttons.css";
@import "open-props/postcss/indigo.min.css";
@import "open-props/postcss/easings.min.css";
@import "open-props/postcss/animations.min.css";
@import "open-props/postcss/sizes.min.css";
@import "open-props/postcss/gradients.min.css";
```

--------------------------------

### Import Open Props

Source: https://github.com/argyleink/open-props/blob/main/_autodocs/api-reference/main-entry.md

Import the Open Props library. You can import the unified default object or the source version.

```javascript
import OpenProps from 'open-props'
// or
import OpenProps from 'open-props/src'
```

--------------------------------

### CSS Imports

Source: https://github.com/argyleink/open-props/blob/main/docsite/index.html

Import the main Open Props stylesheet, optional utility stylesheets, or individual prop packs.

```css
@import "open-props/postcss/style";
@import "open-props/postcss/normalize";
@import "open-props/postcss/buttons";
@import "open-props/postcss/indigo";
@import "open-props/postcss/easings";
@import "open-props/postcss/animations";
@import "open-props/postcss/sizes";
@import "open-props/postcss/gradients";
```

--------------------------------

### Standard CSS Imports (NPM)

Source: https://github.com/argyleink/open-props/blob/main/docsite/index.html

Import Open Props using NPM for standard CSS.

```css
/* the props */
@import "open-props/style";

/* optional imports that use the props */
@import "open-props/normalize";
@import "open-props/buttons";

/* just light or dark themes */
@import "open-props/normalize/dark";
@import "open-props/buttons/dark";
@import "open-props/normalize/light";
@import "open-props/buttons/light";

/* individual imports */
@import "open-props/indigo";
@import "open-props/easings";
@import "open-props/animations";
@import "open-props/sizes";
@import "open-props/gradients";
/* see PropPacks for the full list */
```

--------------------------------

### Basic Background Styling with JavaScript

Source: https://github.com/argyleink/open-props/blob/main/_autodocs/api-reference/gradients.md

Shows how to apply a gradient as a background style in a React component using the imported Gradients object.

```javascript
import Gradients from 'open-props/src/gradients'

const heroStyle = {
  background: Gradients['--gradient-1'],
  width: '100%',
  height: '100vh',
  display: 'flex',
  alignItems: 'center',
}
```

--------------------------------

### Usage Sample for Open Props Durations

Source: https://github.com/argyleink/open-props/blob/main/docsite/index.html

Demonstrates the application of duration properties for UI feedback, modal appearance, and card expansion animations. Uses CSS transitions and animations with custom duration variables.

```css
/* Quick UI feedback */
.checkbox {
  transition: all var(--duration-quick-1);
}

/* Modal appearance */
.modal {
  animation: fade-in var(--duration-moderate-2) var(--ease-3);
}

/* Gentle card expansion */
.card.expanded {
  transition: all var(--duration-gentle-1);
}
```

--------------------------------

### Compile CSS with PostCSS

Source: https://github.com/argyleink/open-props/blob/main/_autodocs/configuration.md

Compiles and minifies a CSS input file using PostCSS, outputting the result to the root directory as a .min.css file.

```bash
postcss src/props.colors.css -o colors.min.css
```

--------------------------------

### Import Open Props CSS

Source: https://github.com/argyleink/open-props/blob/main/docsite/index.html

Import the entire Open Props library into your CSS. This makes all 500+ design tokens available for use.

```css
@import "https://unpkg.com/open-props";
```

--------------------------------

### CSS Animations with Open Props Easing

Source: https://github.com/argyleink/open-props/blob/main/_autodocs/api-reference/easing.md

Demonstrates CSS animations using Open Props easing functions for entrance, bouncy transitions, and smooth fades. Includes keyframes definitions.

```css
@import 'open-props/src/easing';

/* Entrance animation */
@keyframes slideInUp {
  from {
    transform: translateY(100px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.modal-enter {
  animation: slideInUp 0.3s var(--ease-out-3) forwards;
}

/* Bouncy transition */
.bounce-animation {
  animation: bounce 0.6s var(--ease-spring-3);
}

/* Smooth fade */
.smooth-fade {
  transition: opacity 0.2s var(--ease-in-out-2);
}
```

--------------------------------

### Open Props Style Dictionary JSON

Source: https://github.com/argyleink/open-props/blob/main/docsite/index.html

Preview the Style Dictionary JSON for design tokens.

```json
https://unpkg.com/open-props/open-props.style-dictionary-tokens.json
```

--------------------------------

### Import Open Props Light and Dark Theme Switch

Source: https://github.com/argyleink/open-props/blob/main/docsite/index.html

Imports CSS to enable user-controlled light and dark theme switching. These imports provide theme values scoped to specific selectors.

```css
@import "https://unpkg.com/open-props/theme.light.switch.min.css";
@import "https://unpkg.com/open-props/theme.dark.switch.min.css";
```

--------------------------------

### Open Props Figma Tokens Sync JSON

Source: https://github.com/argyleink/open-props/blob/main/docsite/index.html

Import Figma tokens sync JSON for design systems.

```json
https://unpkg.com/open-props/open-props.figma-tokens.sync.json
```

--------------------------------

### Sublime Text Completion File

Source: https://github.com/argyleink/open-props/blob/main/docsite/index.html

Set up a Sublime Text completion file to enable autocompletion for Open Props CSS variables. The 'scope' property should point to the CSS file.

```json
{
  "scope": "./node_modules/open-props/open-props.min.css",
  "completions": [
    // here you'll add the classes you want autocomplete for.
  ]
}
```

--------------------------------

### PostCSS Configuration for Bundling

Source: https://github.com/argyleink/open-props/blob/main/_autodocs/configuration.md

Sets up PostCSS to process CSS, enabling features like autoprefixing and minification. It uses 'postcss-preset-env' for modern CSS compatibility and 'cssnano' for optimization.

```javascript
module.exports = {
  plugins: {
    'postcss-preset-env': {},
    'cssnano': {},
  }
}
```

--------------------------------

### Fluid Sizing and Breakpoints in CSS

Source: https://github.com/argyleink/open-props/blob/main/_autodocs/api-reference/sizes.md

Utilize CSS import and variables for fluid padding, grid gaps, and responsive container widths.

```css
@import 'open-props/src/sizes';

.hero-section {
  padding: var(--size-fluid-5);
}

.grid-gap {
  gap: var(--size-fluid-2);
}

.container {
  max-width: var(--size-xl);
  margin-inline: auto;
  padding-inline: var(--size-fluid-3);
}
```

--------------------------------

### React Component with Border Styles

Source: https://github.com/argyleink/open-props/blob/main/_autodocs/api-reference/borders-radius.md

Demonstrates how to apply different border widths and radii to a React component using Open Props values. Ensure 'open-props/src/borders' is imported.

```javascript
import Borders from 'open-props/src/borders'

export const Card = ({ variant = 'default' }) => {
  const borderStyle = {
    default: {
      borderWidth: Borders['--border-size-1'],
      borderRadius: Borders['--radius-3'],
      borderColor: '#ccc',
    },
    thick: {
      borderWidth: Borders['--border-size-4'],
      borderRadius: Borders['--radius-5'],
      borderColor: '#333',
    },
    organic: {
      borderWidth: Borders['--border-size-2'],
      borderRadius: Borders['--radius-drawn-3'],
      borderColor: '#666',
    },
    blob: {
      borderWidth: Borders['--border-size-1'],
      borderRadius: Borders['--radius-blob-2'],
      backgroundColor: 'lightblue',
    },
  }
  
  return <div style={borderStyle[variant]}>Content</div>
}
```

--------------------------------

### Mobile-First Layout with Breakpoints

Source: https://github.com/argyleink/open-props/blob/main/_autodocs/api-reference/media-queries.md

Illustrates a mobile-first CSS strategy using media query variants to adjust layout based on screen size. Base styles apply to mobile, with additional styles added for larger screens using '--SIZE-n-above' queries.

```css
/* Base styles (mobile) */
.layout { grid-template-columns: 1fr; }

/* Add columns as screen grows */
@media (--sm-n-above) { grid-template-columns: 2fr 1fr; }
@media (--lg-n-above) { grid-template-columns: 3fr 2fr; }
```

--------------------------------

### Build JavaScript Modules for NPM

Source: https://github.com/argyleink/open-props/blob/main/docsite/index.html

Build the JavaScript modules intended for publishing to NPM.

```bash
npm run lib:js
```

--------------------------------

### CSS Media Queries for Dark Mode Preference

Source: https://github.com/argyleink/open-props/blob/main/_autodocs/api-reference/media-queries.md

Implement dark and light mode themes using `--OSdark` and `--OSlight` to match the user's operating system preference.

```css
@import 'open-props/src/media';

@media (--OSdark) {
  :root {
    color-scheme: dark;
    background: #1a1a1a;
    color: #f0f0f0;
  }
}

@media (--OSlight) {
  :root {
    color-scheme: light;
    background: #ffffff;
    color: #1a1a1a;
  }
}
```

--------------------------------

### JavaScript for Reduced Motion with Media Queries

Source: https://github.com/argyleink/open-props/blob/main/_autodocs/api-reference/media-queries.md

Use JavaScript with `matchMedia` and Open Props' `CustomMedia` to conditionally apply animations based on user motion preferences.

```javascript
import { CustomMedia } from 'open-props/src/media'

const animationStyle = (withAnimation = true) => {
  if (withAnimation && matchMedia(CustomMedia['--motionOK']).matches) {
    return {
      animation: 'fadeIn 0.3s ease-out'
    }
  }
  return {
    opacity: 1,
  }
}
```

--------------------------------

### Import Individual Open Props Modules

Source: https://github.com/argyleink/open-props/blob/main/_autodocs/api-reference/INDEX.md

Import specific Open Props modules as needed. This allows for a more granular approach to including styles and properties.

```javascript
// Individual modules
import Animations from 'open-props/src/animations'
import Sizes from 'open-props/src/sizes'
import Colors from 'open-props/src/colors'
import Fonts from 'open-props/src/fonts'
import Borders from 'open-props/src/borders'
import Shadows from 'open-props/src/shadows'
import Easing from 'open-props/src/easing'
import Gradients from 'open-props/src/gradients'
import { CustomMedia } from 'open-props/src/media'
import { Gray, Red, Blue } from 'open-props/src/colors'
```

--------------------------------

### Import CustomMedia Definitions

Source: https://github.com/argyleink/open-props/blob/main/_autodocs/api-reference/media-queries.md

Import the CustomMedia object which contains all custom media query definitions.

```javascript
import { CustomMedia } from 'open-props/src/media'
```

--------------------------------

### Clean npm Cache and Reinstall

Source: https://github.com/argyleink/open-props/blob/main/_autodocs/errors.md

Resolve network or registry errors, such as 'EREACHABLE' or '404 Not Found', by clearing the npm cache and reinstalling packages.

```bash
npm cache clean --force
```

```bash
npm install
```

--------------------------------

### Import Borders Module

Source: https://github.com/argyleink/open-props/blob/main/_autodocs/api-reference/borders-radius.md

Import the entire borders module to access all border width and radius custom properties.

```javascript
import Borders from 'open-props/src/borders'
```

--------------------------------

### Import HSL Colors CSS

Source: https://github.com/argyleink/open-props/blob/main/docsite/index.html

Import the colors-hsl.css stylesheet from Open Props. This provides color design tokens in HSL format.

```css
@import "https://github.com/argyleink/open-props/blob/main/src/props.colors-hsl.css";
```

--------------------------------

### Import All Colors (Flat Import)

Source: https://github.com/argyleink/open-props/blob/main/_autodocs/api-reference/colors.md

Use this method to import all available color variables from Open Props. Access any color using bracket notation with the color variable name.

```javascript
import Colors from 'open-props/src/colors'

// Access any color
Colors['--red-5']      // #ff6b6b
Colors['--blue-3']     // #7cc5ff
Colors['--gray-9']     // #212529
```

--------------------------------

### Generate TypeScript Definitions

Source: https://github.com/argyleink/open-props/blob/main/_autodocs/errors.md

Run these commands to generate or ensure TypeScript definition files are available for Open Props.

```bash
npm run gen:types
npm install  # Ensure types are in package
```

--------------------------------

### Import Buttons CSS

Source: https://github.com/argyleink/open-props/blob/main/docsite/index.html

Import the buttons.min.css stylesheet from Open Props. This provides pre-styled button components.

```css
@import "https://unpkg.com/open-props/buttons.min.css";
```

--------------------------------

### Mixed Module Export Pattern (Media)

Source: https://github.com/argyleink/open-props/blob/main/_autodocs/types.md

Demonstrates a module that exports specific media query related variables as named exports, such as CustomMedia for motion preferences.

```javascript
// src/props.media.js
export const CustomMedia = {
  '--motionOK': '...',
  // ...
}
```

--------------------------------

### Open Props Resolver JSON

Source: https://github.com/argyleink/open-props/blob/main/docsite/index.html

Import the resolver JSON for design tokens.

```json
https://unpkg.com/open-props/open-props.resolver.json
```

--------------------------------

### CSS Media Queries for Data-Aware Loading

Source: https://github.com/argyleink/open-props/blob/main/_autodocs/api-reference/media-queries.md

Optimize asset loading based on connection speed using `--useDataOK` and `--useDataNotOK` to serve high-res images on fast connections and low-bandwidth alternatives otherwise.

```css
@import 'open-props/src/media';

@media (--useDataOK) {
  /* Autoplay videos on fast connections */
  video {
    autoplay: true;
  }
  
  .background-image {
    background-image: url('high-res.jpg');
  }
}

@media (--useDataNotOK) {
  /* Use low-bandwidth alternatives */
  .background-image {
    background: linear-gradient(45deg, #ddd, #999);
  }
  
  /* Disable autoplay */
  video {
    autoplay: false;
  }
}
```

--------------------------------

### Full Path CSS Imports (NPM)

Source: https://github.com/argyleink/open-props/blob/main/docsite/index.html

Import Open Props using full paths via NPM.

```css
/* the props */
@import "open-props/open-props.min.css";

/* optional imports that use the props */
@import "open-props/normalize.min.css";
@import "open-props/buttons.min.css";

/* individual imports */
@import "open-props/indigo.min.css";
@import "open-props/easings.min.css";
@import "open-props/animations.min.css";
@import "open-props/sizes.min.css";
@import "open-props/gradients.min.css";
/* see PropPacks for the full list */
```

--------------------------------

### Open Props Figma Tokens JSON

Source: https://github.com/argyleink/open-props/blob/main/docsite/index.html

Import Figma tokens JSON for design systems.

```json
https://unpkg.com/open-props/open-props.figma-tokens.json
```

--------------------------------

### Run gen:op Script

Source: https://github.com/argyleink/open-props/blob/main/_autodocs/configuration.md

Invokes the build/props.js script with no prefix and enables the use of :where().

```bash
cd build && node props.js "" true
```

--------------------------------

### Import Easing Module

Source: https://github.com/argyleink/open-props/blob/main/_autodocs/api-reference/easing.md

Import the easing module from Open Props to access animation curves.

```javascript
import Easing from 'open-props/src/easing'
```

--------------------------------

### JavaScript Bundles

Source: https://github.com/argyleink/open-props/blob/main/docsite/index.html

Import Open Props as a JavaScript object for use in your application. Access props using dot or bracket notation.

```javascript
import OpenProps from 'open-props';
import OpenProps from 'open-props/src';
import Colors from 'open-props/src/colors';

console.info(OpenProps.size1);
console.info(OpenProps['--size-1']);

console.info(Colors['--indigo-5']);
```

--------------------------------

### Shadow DOM CSS Imports (CDN)

Source: https://github.com/argyleink/open-props/blob/main/docsite/index.html

Import Open Props for shadow DOM environments using CDN.

```css
/* the props */
@import "https://unpkg.com/open-props/open-props.shadow.min.css";

/* individual imports */
@import "https://unpkg.com/open-props/indigo.shadow.min.css";
@import "https://unpkg.com/open-props/indigo.shadow-hsl.min.css";
@import "https://unpkg.com/open-props/easings.shadow.min.css";
@import "https://unpkg.com/open-props/animations.shadow.min.css";
@import "https://unpkg.com/open-props/sizes.shadow.min.css";
@import "https://unpkg.com/open-props/gradients.shadow.min.css";
/* see PropPacks for the full list */
```

--------------------------------

### Import Gradients CSS

Source: https://github.com/argyleink/open-props/blob/main/docsite/index.html

Import the gradients.css stylesheet from Open Props. This provides CSS variables for gradients.

```css
@import "https://github.com/argyleink/open-props/blob/main/src/props.gradients.css";
```

--------------------------------

### Shadow DOM CSS Imports (NPM)

Source: https://github.com/argyleink/open-props/blob/main/docsite/index.html

Import Open Props for shadow DOM environments using NPM.

```css
/* the props */
@import "open-props/shadow/style";
@import "open-props/open-props.shadow.min.css";

/* individual imports */
@import "open-props/shadow/indigo";
@import "open-props/shadow/indigo-hsl";
@import "open-props/shadow/easings";
@import "open-props/shadow/animations";
@import "open-props/shadow/sizes";
@import "open-props/shadow/gradients";
/* see PropPacks for the full list */
```

--------------------------------

### Run gen:shadowdom Script

Source: https://github.com/argyleink/open-props/blob/main/_autodocs/configuration.md

Invokes the build/props.js script with an empty prefix, disables :where(), and specifies :host as the selector for shadow DOM output.

```bash
cd build && node props "" false ":host" "shadow"
```

--------------------------------

### Defining Preference Media Queries

Source: https://github.com/argyleink/open-props/blob/main/docsite/index.html

Sets up custom media queries for user preferences such as dark/light mode, reduced motion, inverted colors, and forced colors. These help create accessible and user-friendly interfaces.

```css
@custom-media --OSdark        (prefers-color-scheme: dark);
@custom-media --OSlight       (prefers-color-scheme: light);

@custom-media --motionOK      (prefers-reduced-motion: no-preference);
@custom-media --motionNotOK   (prefers-reduced-motion: reduce);

@custom-media --invertedColors  (inverted-colors: inverted);
@custom-media --forcedColors  (forced-colors: active);
```

--------------------------------

### Import Pink Color Scheme CSS

Source: https://github.com/argyleink/open-props/blob/main/docsite/index.html

Import the pink.css stylesheet from Open Props. This provides a specific color scheme focused on pink hues.

```css
@import "https://github.com/argyleink/open-props/blob/main/src/props.pink.css";
```

--------------------------------

### Basic Usage in CSS

Source: https://github.com/argyleink/open-props/blob/main/_autodocs/SUMMARY.md

Import Open Props CSS variables into your stylesheet. Use the `var()` function to apply the properties.

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

.my-element {
  padding: var(--size-3);
  color: var(--gray-9);
  font-size: var(--font-size-1);
}
```

--------------------------------

### Basic Usage in JavaScript/React

Source: https://github.com/argyleink/open-props/blob/main/_autodocs/SUMMARY.md

Import and use Open Props variables in JavaScript or React components. Ensure OpenProps is imported correctly.

```javascript
import OpenProps from 'open-props'

const style = {
  padding: OpenProps['--size-3'],
  color: OpenProps['--gray-9'],
  fontSize: OpenProps['--font-size-1'],
}
```

--------------------------------

### Import Shadow DOM CSS

Source: https://github.com/argyleink/open-props/blob/main/_autodocs/errors.md

Import the specific Shadow DOM CSS file to ensure styles apply correctly within Shadow DOM components.

```css
@import 'open-props/open-props.shadow.min.css';
```

--------------------------------

### Import Colors CSS

Source: https://github.com/argyleink/open-props/blob/main/docsite/index.html

Import the colors.css stylesheet from Open Props. This provides a large set of color design tokens.

```css
@import "https://github.com/argyleink/open-props/blob/main/src/props.colors.css";
```

--------------------------------

### PostCSS JIT Props with CSS File

Source: https://github.com/argyleink/open-props/blob/main/docsite/index.html

Configure PostCSS to use postcss-jit-props by pointing to the Open Props CSS file.

```javascript
const postcssJitProps = require('postcss-jit-props');
const path = require('path');

module.exports = {
  plugins: [
    postcssJitProps({
      files: [
        path.resolve(__dirname, 'node_modules/open-props/open-props.min.css'),
      ]
    }),
  ]
}
```

--------------------------------

### Run Build Script for Shadow DOM Variant

Source: https://github.com/argyleink/open-props/blob/main/_autodocs/configuration.md

Execute the 'gen:shadowdom' npm script to generate CSS compatible with Shadow DOM. This variant wraps the styles with the :host selector.

```bash
npm run gen:shadowdom
```

--------------------------------

### Compile Shadow DOM CSS with PostCSS

Source: https://github.com/argyleink/open-props/blob/main/_autodocs/configuration.md

Compiles and minifies a CSS input file for Shadow DOM variants using PostCSS, outputting the result to the root directory with a .shadow.min.css suffix.

```bash
postcss src/shadow.props.colors.css -o colors.shadow.min.css
```

--------------------------------

### CSS Dark Mode Awareness with HSL Shadows

Source: https://github.com/argyleink/open-props/blob/main/_autodocs/api-reference/shadows.md

Illustrates how Open Props shadows, defined with HSL variables, automatically adapt to light and dark modes. No explicit media queries are needed for the shadow color itself. Requires importing 'open-props/src/shadows'.

```css
@import 'open-props/src/shadows';

/* Shadows automatically adapt via HSL variables */
.card {
  box-shadow: var(--shadow-3);
  /* 
    Light mode: dark gray shadow
    Dark mode: near-black shadow with higher opacity
  */
}
```

--------------------------------

### Import Indigo Color Scheme CSS

Source: https://github.com/argyleink/open-props/blob/main/docsite/index.html

Import the indigo.css stylesheet from Open Props. This provides a specific color scheme focused on indigo hues.

```css
@import "https://github.com/argyleink/open-props/blob/main/src/props.indigo.css";
```

--------------------------------

### Size Usage Sample

Source: https://github.com/argyleink/open-props/blob/main/docsite/index.html

Applies defined size variables for layout properties like grid gap, padding, and element dimensions. Ensure the chosen size units (rem or px) align with your design requirements.

```css
article {
  display: grid;
  gap: var(--size-3);
}

li {
  padding-inline-start: var(--size-2);
}

.icon {
  inline-size: var(--size-5);
  block-size: var(--size-5);
}
```