open-index/open-npm huggingface dataset:
npm package: @pierre/theme
Description: Pierre theme for Shiki, VS Code, and more
Latest version: 0.0.29

```
PIERRE COMPUTER COMPANY █
PROJECT: THEME

~~~

CONTACT: SUPPORT@PIERRE.CO
LOCATION: USA
STATUS: ONLINE
OPEN POSITIONS: [Systems Engineer](https://pierre.computer/careers/systems-engineer)

~~~

Overview:
 - Light and dark themes for Visual Studio Code, Cursor, Zed, and Shiki.
 - Built for [Diffs.com](https://diffs.com)

~~~

Usage:

 VS Code / Cursor:
  1. Install "Pierre Theme" from the Extensions marketplace
  2. Cmd+Shift+P > "Color Theme" > select Pierre Light or Pierre Dark

 Shiki / npm:
  npm install @pierre/theme

  import pierreDark from '@pierre/theme/pierre-dark'
  import pierreLight from '@pierre/theme/pierre-light'

  Available themes:
   - @pierre/theme/pierre-dark
   - @pierre/theme/pierre-light
   - @pierre/theme/pierre-dark-vibrant   (Display P3)
   - @pierre/theme/pierre-light-vibrant  (Display P3)

 Zed:
  Install "Pierre" from the Zed extension registry
```
npm package: @pierre/vscode-icons
Description: File icon theme for VS Code backed by source SVGs.
Latest version: 0.0.6

# Pierre Icons for VS Code

File icon theme for VS Code with three tiers and per-icon palette colors.

## Themes

The extension ships three icon themes, each building on the last:

- **Pierre Icons (Minimal)** -- file, folder, text, and image icons only. Monochrome.
- **Pierre Icons** -- adds language icons (JS, TS, CSS, HTML, Python, Go, Rust, Ruby, Swift, Bash, Markdown) plus font, SVG, JSON, and git. Monochrome.
- **Pierre Icons (Complete)** -- adds framework, tooling, and config icons (React, Vue, Svelte, Astro, Docker, Tailwind, ESLint, Prettier, npm, Vite, webpack, and more). Uses per-icon colors from the [Pierre palette](https://github.com/pierrecomputer/theme).

## Color system

Colors come from the Pierre palette, using level `400` for dark themes and `600` for light themes -- the same scale used for syntax tokens in the [Pierre color theme](https://github.com/pierrecomputer/theme).

Minimal and default tiers are monochrome (gray `400` / `800`). The complete tier applies per-icon colors, with two modes:

- **Single color** (`color(hue)`) -- one palette hue for all paths. Duo-tone icons get visual weight from the `opacity` attribute baked into the SVG's background path.
- **Dual color** (`duoColor(fg, bg)`) -- separate palette hues for foreground and background paths. Requires SVG paths to have `class="fg"` and `class="bg"` attributes (set in Figma). The build injects a `<style>` block to override bg fills via CSS.

## Build

```bash
npm run build
```

This reads source SVGs from `svgs/`, optimizes them with SVGO, stamps dark/light fill colors, and writes the output to `icons/`. Three theme JSON files are generated: `theme-minimal.json`, `theme-default.json`, and `theme-complete.json`.

For development, watch mode rebuilds on SVG changes:

```bash
npm run watch
```

## Load locally

### Run from source (VS Code)

1. Open this folder in VS Code.
2. Run `npm run build`.
3. Press `F5` to launch an Extension Development Host.
4. Choose one of the Pierre Icons themes from **File Icon Theme**.

### Package a VSIX

```bash
npm run package
```

Then install the generated `.vsix` in VS Code or Cursor.

## Adding icons

1. Add or update SVGs in `svgs/`. For duo-tone icons, use `class="bg"` and `class="fg"` on paths.
2. Add an entry to the appropriate tier array in `scripts/build-icon-theme.mjs`:

```js
// Single color
{ name: "react", color: color(palette.cyan), fileExtensions: ["jsx", "tsx"] }

// Dual color (fg + bg)
{ name: "lang-python", color: duoColor(palette.blue, palette.yellow), fileExtensions: ["py"] }

// Monochrome (no color property)
{ name: "font", fileExtensions: ["ttf", "otf", "woff", "woff2"] }
```

3. Run `npm run build`.
npm package: @pierredelattre/source
Description: Design system for prototyping and launching projects fast.
Latest version: 0.1.0

# Source

Design system for prototyping and launching projects fast.

Clone, import, build.

## Philosophy

Native Web Components, CSS custom properties. No framework, no build step, no dependencies.

## Usage

```html
<link rel="stylesheet" href="path/to/source-design-system/index.css">
<script type="module" src="path/to/source-design-system/index.js"></script>
```

## Structure

```
tokens/         Colors, typography, spacing, radius
components/     Web Components
styles/         Reset and base styles
index.css       CSS entry point
index.js        JS entry point
```

## Tokens

Two levels — primitives and semantic. Convention: `--<category>-<name>`.

```css
--color-neutral-900: #1a1a1a;
--color-text: var(--color-neutral-900);
```

## Components

One folder per component with its own JS and CSS.

```
components/
└── button/
    ├── button.js
    └── button.css
```