abc-def - GitLite

KO | EN

gitlite — search

#react #typescript #go #android #machine-learning #rust #deep-learning #awesome #vue #security #pytorch #ios #openai #open-source

abc-def

(★ 106)

ABC Def is an efficient design system using a three-tier token structure and Headless UI to create web components with consistent design and flexible customization.

File Explorer

Download Latest Version (.zip)

- config.json
- README.md
- - bug_report.md
  - feature_request.md
- - ci.yaml
  - deploy-docs.yaml
  - publish-packages.yaml
- PULL_REQUEST_TEMPLATE.md
- extensions.json
- settings.json
- - eslint.config.js
  - next-env.d.ts
  - next.config.ts
  - package.json
  - postcss.config.mjs
  - tsconfig.json
- release.md
- - index.html
  - package.json
  - tsconfig.json
  - vite.config.ts
- - next-env.d.ts
  - next.config.ts
  - package.json
  - postcss.config.mjs
  - tsconfig.json
  - turbo.json
- - index.html
  - package.json
  - tsconfig.json
  - vite.config.ts
- - CHANGELOG.md
  - eslint.config.js
  - package.json
  - README.md
  - tsconfig.json
  - tsup.config.ts
- - CHANGELOG.md
  - package.json
  - README.md
- - CHANGELOG.md
  - eslint.config.js
  - package.json
  - README.md
  - tsconfig.json
  - tsup.config.ts
- - base.js
  - nextjs.js
  - package.json
  - react.js
  - tsconfig.json
  - types.d.ts
- - index.js
  - package.json
- - package.json
- - index.js
  - package.json
  - tsconfig.json
- - base.json
  - internal-package.json
  - package.json
.gitignore
.npmrc
.nvmrc
CHANGELOG.md
CODE_OF_CONDUCT.md
CONTRIBUTING.md
LICENSE
package.json
pnpm-lock.yaml
pnpm-workspace.yaml
README.md
renovate.json
SECURITY.md
turbo.json

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# ABC Def

ABC Def is a CSS-first design system for shared UI packages. The visual contract lives in `@line/abc-def-styles`; the React and Vue packages render components against the same semantic selectors and tokens.

## Packages

- `@line/abc-def-styles`: Tailwind CSS v4 tokens, semantic variables, and component selectors.
- `@line/abc-def-react`: React components that render the shared selector contract.
- `@line/abc-def-vue`: Vue components that render the shared selector contract.

## Install

```bash
pnpm add tailwindcss @line/abc-def-styles
pnpm add @line/abc-def-react react react-dom
pnpm add @line/abc-def-vue vue
```

Install only the framework package you use. Plain HTML projects only need `@line/abc-def-styles`.

## Usage

Import the shared stylesheet from CSS processed by Tailwind CSS v4:

```css
@import "tailwindcss";
@import "@line/abc-def-styles/css";
```

React apps import components from subpath entry points:

```tsx
import { Button } from "@line/abc-def-react/button";

export function Example() {
  return <Button variant="outline">Button</Button>;
}
```

ABC Def does not provide a root component export. Do not import components from `@line/abc-def-react`; use the component subpath such as `@line/abc-def-react/button`.

Vue apps use the same subpath pattern:

```vue
<script setup lang="ts">
import { Button } from "@line/abc-def-vue/button";
</script>

<template>
  <Button variant="outline">Button</Button>
</template>
```

The Vue package follows the same rule: do not import components from `@line/abc-def-vue`; use subpath entries such as `@line/abc-def-vue/button`.

Tailwind v4 ignores most package sources by default. Add an `@source` rule for the installed component package when your app uses React or Vue components:

```css
@source "../node_modules/@line/abc-def-react/dist/**/*.{js,cjs}";
@source "../node_modules/@line/abc-def-vue/dist/**/*.{js,cjs}";
```

Adjust the relative path for your app stylesheet location.

## Examples

- `examples/html-vite`: plain HTML consumer of `@line/abc-def-styles/css`
- `examples/nextjs`: React consumer of `@line/abc-def-styles/css` and `@line/abc-def-react`
- `examples/vue-vite`: Vue consumer of `@line/abc-def-styles/css` and `@line/abc-def-vue`

## Compatibility

ABC Def 2.x follows strict SemVer for documented public APIs, including package subpath exports, component props, CSS entry points, semantic selectors, and documented token names. See [Public API](./docs/public-api.md).

## Development

```bash
pnpm install
pnpm dev
```

`pnpm dev` watches the framework packages under `packages/*`. Run an example app separately when you want to verify the UI in a browser:

```bash
pnpm --filter @abc-def/example-html-vite dev
pnpm --filter @abc-def/example-vue-vite dev
pnpm --filter @abc-def/example-nextjs dev
```

Before submitting changes, run:

```bash
pnpm lint
pnpm format
pnpm typecheck
pnpm build
```

For contribution details, see [CONTRIBUTING.md](./CONTRIBUTING.md). Security reports are handled through [SECURITY.md](./SECURITY.md).

## License

Apache-2.0. See [LICENSE](./LICENSE).