### Install penpot-export CLI

Source: https://github.com/penpot/penpot-export/blob/main/README.md

Commands to install the penpot-export CLI as a development dependency using npm or yarn.

```bash
npm install @penpot-export/cli --save-dev
```

```bash
yarn add @penpot-export/cli --dev
```

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

### Configure penpot-export

Source: https://github.com/penpot/penpot-export/blob/main/README.md

Example configuration file (penpot-export.config.js) defining authentication and export settings for colors, typographies, and page components.

```javascript
// @ts-check
require('dotenv').config()

if (typeof process.env.PENPOT_ACCESS_TOKEN !== 'string') {
  throw new Error('Missing PENPOT_ACCESS_TOKEN environment variable')
}

/**
 * @type {import('@penpot-export/core').UserConfig}
 */
const config = {
  instance: process.env.PENPOT_BASE_URL || undefined,
  accessToken: process.env.PENPOT_ACCESS_TOKEN,
  files: [
    {
      fileId: '4a499800-872e-80e1-8002-fc0b585dc061',
      colors: [
        {
          format: 'scss',
          output: 'src/styles/colors.css',
        },
      ],
      typographies: [
        {
          format: 'json',
          output: 'src/styles/typographies.css',
        },
      ],
    },
    {
      fileId: 'abea3ef6-4c19-808a-8003-01370d9cb586',
      pages: [
        {
          pageId: '71b1702b-2eb1-81d6-8002-f82a5f182088',
          format: 'css',
          output: 'src/styles/ui.css',
        },
      ],
    },
  ],
}

module.exports = config
```

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

### Inspect Penpot File

Source: https://github.com/penpot/penpot-export/blob/main/README.md

Command to retrieve metadata such as workspace, file, and page IDs from a Penpot URL.

```bash
penpot-export inspect <YOUR FILE URL HERE>
```

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

### Run Penpot Export CLI Command

Source: https://context7.com/penpot/penpot-export/llms.txt

Executes the main Penpot Export command from the project root. It reads the 'penpot-export.config.js' file to process and export declared design assets.

```bash
# Run from project root (reads penpot-export.config.js)
penpot-export

# Expected output:
# 🎨 Processing Penpot file: My Design System
# ✅ Colors: src/styles/colors.css
# ✅ Typographies: src/styles/typographies.css
```

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

### Interact with Penpot API using PenpotApiClient (TypeScript)

Source: https://context7.com/penpot/penpot-export/llms.txt

Provides a typed client for the Penpot API, enabling direct data retrieval. The 'PenpotApiClient' class handles authentication and offers methods to fetch file data, including colors, typographies, and page components. It requires the Penpot instance URL and an access token for initialization.

```typescript
import PenpotApiClient from '@penpot-export/core/api'

const penpot = new PenpotApiClient({
  baseUrl: 'https://design.penpot.app',
  accessToken: 'your-access-token',
})

// Fetch a Penpot file
const file = await penpot.getFile({
  fileId: '4a499800-872e-80e1-8002-fc0b585dc061',
})

console.log('File name:', file.name)
console.log('Colors:', Object.keys(file.data.colors || {}))
console.log('Typographies:', Object.keys(file.data.typographies || {}))
console.log('Pages:', Object.keys(file.data.pagesIndex || {}))

// Example output:
// File name: My Design System
// Colors: ['color-1', 'color-2', 'color-3']
// Typographies: ['typo-1', 'typo-2']
// Pages: ['page-1', 'page-2']
```

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

### Inspect Penpot File URL with CLI

Source: https://context7.com/penpot/penpot-export/llms.txt

Parses a Penpot file URL to extract necessary identifiers like instance URL, workspace ID, file ID, and page ID, which are crucial for configuration.

```bash
# Inspect a Penpot file URL
penpot-export inspect "https://design.penpot.app/#/workspace/f542b13d-6fc1-8116-8002-fc0aaa3627ae/52961d58-0a92-80c2-8003-2fc8ab8b34dd?page-id=38f1e350-296d-80f1-8002-fd390f93b03d"

# Expected output:
# The following details are the result of inspecting the provided URL:
#     Penpot instance: https://design.penpot.app/
#     Workspace id: f542b13d-6fc1-8116-8002-fc0aaa3627ae
#     File id: 52961d58-0a92-80c2-8003-2fc8ab8b34dd
#     Page id: 38f1e350-296d-80f1-8002-fd390f93b03d
```

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

### Create color patch component with CSS

Source: https://github.com/penpot/penpot-export/blob/main/packages/demos/demo-css/index.html

A CSS class for rendering circular color swatches. It uses inline-block display and inherits background colors to represent design tokens.

```css
.color-patch {
  display: inline-block;
  vertical-align: bottom;
  margin-right: .3em;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background-color: inherit;
}
```

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

### Export Colors as JSON (W3C Design Tokens)

Source: https://context7.com/penpot/penpot-export/llms.txt

Exports colors in the W3C Design Tokens format as JSON. Each token includes '$description', '$type', and '$value' properties for cross-platform compatibility.

```json
{
  "$description": "penpot-export: demo",
  "Neutral_100": {
    "$description": "Neutral 100",
    "$type": "color",
    "$value": "#f7f8f9ff"
  },
  "Neutral_200": {
    "$description": "Neutral 200",
    "$type": "color",
    "$value": "#f1f2f4ff"
  },
  "Primary_500": {
    "$description": "Primary 500",
    "$type": "color",
    "$value": "#31efb8ff"
  },
  "Secondary_600": {
    "$description": "Secondary 600",
    "$type": "color",
    "$value": "#9453f9ff"
  }
}
```

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

### Programmatic Export with penpotExport Function (TypeScript)

Source: https://context7.com/penpot/penpot-export/llms.txt

Utilizes the core 'penpotExport' function for custom integrations. This function takes a configuration object (including access token, instance URL, and file details) and the root project path to generate output files. It processes colors and typographies based on the specified formats and output paths.

```typescript
import penpotExport from '@penpot-export/core'

const config = {
  accessToken: 'your-access-token',
  instance: 'https://design.penpot.app',
  files: [
    {
      fileId: '4a499800-872e-80e1-8002-fc0b585dc061',
      colors: [{ format: 'css', output: 'dist/colors.css' }],
      typographies: [{ format: 'json', output: 'dist/typography.json' }],
    },
  ],
}

// Execute export
await penpotExport(config, process.cwd())

// Output:
// 🎨 Processing Penpot file: My Design System
// ✅ Colors: dist/colors.css
// ✅ Typographies: dist/typography.json
```

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

### Penpot Export Environment Variables (.env)

Source: https://context7.com/penpot/penpot-export/llms.txt

Stores sensitive credentials and configuration options in environment variables using a '.env' file for security and ease of management.

```bash
# .env file
# Optional: Base URL of the Penpot instance (without trailing slash)
PENPOT_BASE_URL="https://design.penpot.app"

# Required: File ID from your Penpot file URL
PENPOT_FILE_ID="4a499800-872e-80e1-8002-fc0b585dc061"

# Required: Personal access token (read-only permissions sufficient)
# Generate at: Your account -> Access Tokens in Penpot webapp
PENPOT_ACCESS_TOKEN="your-access-token-here"
```

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

### Export Typographies as SCSS Maps

Source: https://context7.com/penpot/penpot-export/llms.txt

Exports typography settings as SCSS maps, allowing for flexible styling and iteration. Each map contains all font properties for a specific typography.

```scss
/* Generated typographies.scss */
// These generated typography declarations rely on the given font being already available in your front end code.
// There are 0 custom fonts and 1 fonts from Google Fonts.
// You can choose to load the latter from the Google Fonts CSS API in a HTML document using:
// <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Work%20Sans:400,700">

$Body_Large: (
  "line-height": 1.4,
  "font-style": normal,
  "text-transform": none,
  "font-weight": 400,
  "font-size": 21px,
  "letter-spacing": 0px,
  "font-family": "Work Sans",
);

$Body_Medium: (
  "line-height": 1.4,
  "font-style": normal,
  "text-transform": none,
  "font-weight": 400,
  "font-size": 18px,
  "letter-spacing": 0px,
  "font-family": "Work Sans",
);

$Title_Large: (
  "line-height": 1.2,
  "font-style": normal,
  "text-transform": none,
  "font-weight": 700,
  "font-size": 77px,
  "letter-spacing": 0px,
  "font-family": "Work Sans",
);
```

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

### Transform Penpot Data with Data Adapters (TypeScript)

Source: https://context7.com/penpot/penpot-export/llms.txt

Converts raw Penpot API data into structured asset objects using provided adapters. Functions like 'adaptColors', 'adaptTypographies', and 'adaptPageComponents' normalize the data for output generation. These adapters require the Penpot file data and may accept additional parameters like 'pageId' for specific data extraction.

```typescript
import PenpotApiClient, {
  adaptColors,
  adaptTypographies,
  adaptPageComponents,
} from '@penpot-export/core/api'

const penpot = new PenpotApiClient({
  baseUrl: 'https://design.penpot.app',
  accessToken: 'your-access-token',
})

const file = await penpot.getFile({
  fileId: '4a499800-872e-80e1-8002-fc0b585dc061',
})

// Adapt colors to CSS custom properties format
const colorAssets = adaptColors(file)
// Result: { scope: 'File Name', colors: [{ name: 'Primary', value: '#31efb8ff' }] }

// Adapt typographies to CSS class definitions
const typographyAssets = adaptTypographies(file)
// Result: {
//   scope: 'File Name',
//   typographies: [{ name: 'Body', cssProps: { fontSize: '16px', ... } }],
//   typographiesSummary: { googleFonts: { 'Work Sans': ['400', '700'] }, userCustomFonts: {} }
// }

// Adapt page components with specific page ID
const pageAssets = adaptPageComponents(file, {
  pageId: '38f1e350-296d-80f1-8002-fd390f93b03d',
})
// Result: { scope: 'Page Name', pageComponents: [{ name: 'Button', cssProps: { ... } }] }
```

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

### Export Colors as SCSS Variables

Source: https://context7.com/penpot/penpot-export/llms.txt

Exports colors as SCSS variables, prefixed with '$'. Variable names retain the original Penpot color names, with spaces converted to underscores.

```scss
/* Generated colors.scss */
$Neutral_100: #f7f8f9ff;
$Neutral_200: #f1f2f4ff;
$Neutral_300: #dcdfe4ff;
$Primary_100: #e9fff7ff;
$Primary_200: #caffe9ff;
$Primary_500: #31efb8ff;
$Secondary_600: #9453f9ff;
$Secondary_700: #7d30edff;
```

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

### Define UserConfig for Penpot Export

Source: https://context7.com/penpot/penpot-export/llms.txt

The UserConfig type provides a structured schema for configuring design token exports. It requires an access token and an array of file configurations, supporting custom output paths and formats for colors, typography, and pages.

```typescript
import type { UserConfig } from '@penpot-export/core'

const config: UserConfig = {
  instance: 'https://design.penpot.app',
  accessToken: 'your-access-token',
  files: [
    {
      fileId: 'your-file-uuid',
      colors: [
        {
          output: './src/tokens/colors.css',
          format: 'css'
        }
      ],
      typographies: [
        {
          output: './src/tokens/typography.json',
          format: 'json'
        }
      ],
      pages: [
        {
          pageId: 'page-uuid',
          output: './src/styles/page.scss',
          format: 'scss'
        }
      ]
    }
  ]
}
```

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

### Export Typographies as CSS Classes

Source: https://context7.com/penpot/penpot-export/llms.txt

Exports typography assets as CSS class definitions, including all font-related properties. Class names are scoped with the Penpot file name and escaped for CSS compatibility. A header comment indicates required fonts.

```css
/* Generated typographies.css */
/*
 * These generated typography declarations rely on the given font being already available in your front end code.
 * There are 0 custom fonts and 1 fonts from Google Fonts.
 * You can choose to load the latter from the Google Fonts CSS API in a HTML document using:
 * <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Work%20Sans:400,700">
*/

.penpot-export\:_demo--Body_Large {
  line-height: 1.4;
  font-style: normal;
  text-transform: none;
  font-weight: 400;
  font-size: 21px;
  letter-spacing: 0px;
  font-family: "Work Sans";
}

.penpot-export\:_demo--Body_Medium {
  line-height: 1.4;
  font-style: normal;
  text-transform: none;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0px;
  font-family: "Work Sans";
}

.penpot-export\:_demo--Title_Large {
  line-height: 1.2;
  font-style: normal;
  text-transform: none;
  font-weight: 700;
  font-size: 77px;
  letter-spacing: 0px;
  font-family: "Work Sans";
}
```

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

### Export Colors as CSS Custom Properties

Source: https://context7.com/penpot/penpot-export/llms.txt

Exports colors as CSS custom properties within a :root selector. Colors are represented as 8-character hex values (RGBA), and variable names are derived from Penpot color names, with spaces replaced by underscores.

```css
/* Generated colors.css */
:root {
  --Neutral_100: #f7f8f9ff;
  --Neutral_200: #f1f2f4ff;
  --Neutral_300: #dcdfe4ff;
  --Primary_100: #e9fff7ff;
  --Primary_200: #caffe9ff;
  --Primary_500: #31efb8ff;
  --Secondary_600: #9453f9ff;
  --Secondary_700: #7d30edff;
}
```

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

### Export Typographies as W3C Design Tokens JSON

Source: https://context7.com/penpot/penpot-export/llms.txt

Exports typography data from Penpot into the W3C Design Tokens JSON format. This format uses the 'typography' type with a '$value' object containing font properties, making it compatible with design token pipelines like Style Dictionary. It requires the Penpot file data as input.

```json
{
  "$description": "penpot-export: demo",
  "Body_Large": {
    "$description": "Body Large",
    "$type": "typography",
    "$value": {
      "lineHeight": 1.4,
      "fontWeight": 400,
      "fontSize": "21px",
      "letterSpacing": "0px",
      "fontFamily": "Work Sans"
    }
  },
  "Body_Medium": {
    "$description": "Body Medium",
    "$type": "typography",
    "$value": {
      "lineHeight": 1.4,
      "fontWeight": 400,
      "fontSize": "18px",
      "letterSpacing": "0px",
      "fontFamily": "Work Sans"
    }
  },
  "Title_Large": {
    "$description": "Title Large",
    "$type": "typography",
    "$value": {
      "lineHeight": 1.2,
      "fontWeight": 700,
      "fontSize": "77px",
      "letterSpacing": "0px",
      "fontFamily": "Work Sans"
    }
  }
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.