open-index/open-npm huggingface dataset:
npm package: 1000films
Description: <img width="592" alt="Screen Shot 2020-09-16 at 7 49 54 PM" src="https://user-images.githubusercontent.com/40796/93403574-ea000580-f855-11ea-8b76-b1808ac45eeb.png">
Author: nikolaiwarner
Latest version: 1000.2020.5

<img width="592" alt="Screen Shot 2020-09-16 at 7 49 54 PM" src="https://user-images.githubusercontent.com/40796/93403574-ea000580-f855-11ea-8b76-b1808ac45eeb.png">

# 1000films

a command line program to search the 1000 greatest films as ranked by theyshootpictures.com, 2020 edition

## How to use

### Install

`npm i -g 1000films`

### Show film info and where to watch by rank

`1000films [number]`

### Search for films

`1000films [search string]`

### List all films

`1000films -l`

## Credits

I have converted the ranking data into a json format for easier parsing but the film ranking data is, I presume, copyright 2020 theyshootpictures.com.
npm package: 1000xdev
Description: Complete utility for 1000xdev projects.
Author: 1000xdev
Latest version: 0.2.0

# 1000xdev

Colorful console banner for 1000xdev projects.

## Install

```bash
npm install 1000xdev
```

## Use as a library

```ts
import { consoleBanner } from "1000xdev";

const PROJECT_NAME = "My Project";

consoleBanner({
  projectName: PROJECT_NAME
});
```

## Use as a React component

```tsx
import { ThousandX } from "1000xdev/react";

export default function App() {
  return (
    <>
      <ThousandX projectName="My Project" />
      {/* app */}
    </>
  );
}
```

To re-log on route changes in React Router, pass a trigger:

```tsx
import { ThousandX } from "1000xdev/react";
import { useLocation } from "react-router-dom";

export default function App() {
  const location = useLocation();
  return <ThousandX projectName="My Project" trigger={location.pathname} />;
}
```

## Use as a CLI

```bash
npx 1000xdev --project "My Project"
```

## Next.js example

```ts
// next.config.mjs
import { consoleBanner } from "1000xdev";

const PROJECT_NAME = "My Project";

consoleBanner({ projectName: PROJECT_NAME });

const nextConfig = {};
export default nextConfig;
```

## Next.js component (prints on every page)

```tsx
// app/layout.tsx
import { ThousandX } from "1000xdev/next";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <ThousandX projectName="My Project" />
        {children}
      </body>
    </html>
  );
}
```

## Options

- `projectName`: Name displayed in the banner. Defaults to `PROJECT_NAME`, `NEXT_PUBLIC_PROJECT_NAME`, or the package name.
- `baseUrl`: Defaults to `https://www.1000xdev.com`.
- `projectUrlParam`: Defaults to `p`.
- `tagLine`: Defaults to `AI-native product studio`.
- `silent`: If true, prints nothing.
- `once`: If true, prints only once per runtime (default). Set `false` to print every time you call it.
npm package: 100city-theme
Description: 100 City 多项目主题配色方案 - Design Token 系统
Latest version: 0.2.0

# @100city/theme

100 City 多项目主题配色方案。

## 可用主题

| 主题 | 风格 | 品牌色 | 适用场景 |
|------|------|--------|----------|
| `clarity` | Apple 极简，黑白灰高对比 | 蓝色 `#0071e3` | 数据产品、监控面板 |
| `aurora` | 紫青渐变，毛玻璃光晕 | 紫色 `#7c3aed` | 内容平台、创作工具 |

每个主题都包含亮色和暗色两套配色。

## 安装

```bash
# monorepo 内部项目
pnpm add 100city-theme --workspace

# 外部独立项目
pnpm add 100city-theme
```

## 使用

### 方式一：直接引入 CSS（推荐）

```css
/* 引入基础变量（字体、圆角、过渡） */
@import "@100city/theme/shared/base.css";

/* 引入主题配色（二选一） */
@import "@100city/theme/presets/clarity/theme.css";
@import "@100city/theme/presets/aurora/theme.css";
```

### 方式二：SCSS 项目

```scss
@import "@100city/theme/shared/base.css";
@import "@100city/theme/presets/aurora/theme.css";
```

### 在组件中使用

```tsx
// 背景色
<div style={{ backgroundColor: "var(--bg-card)" }}>

// 文字色
<h1 style={{ color: "var(--text-heading)" }}>标题</h1>
<p style={{ color: "var(--text-muted)" }}>描述</p>

// 品牌色
<button style={{ backgroundColor: "var(--brand-primary)" }}>按钮</button>

// 阴影
<div style={{ boxShadow: "var(--shadow-card)" }}>卡片</div>
```

### 暗色模式

给 `<html>` 或任意父元素加 `.dark` 或 `data-theme="dark"` 即可切换：

```html
<html class="dark">
```

## 变量命名规则

```
--{类别}-{用途}

类别：bg / text / border / brand / icon / status / shadow / interactive
用途：primary / secondary / muted / light / dark / hover / ...
```

## 开发

```bash
# 修改 tokens.json 后重新生成 CSS
cd packages/theme
node build.js
```

## 新增主题

1. 复制 `presets/clarity/` 为新目录
2. 修改 `tokens.json` 中的颜色值
3. 运行 `node build.js`
4. 新主题的 `theme.css` 自动生成