open-index/open-npm huggingface dataset:
npm package: @qdesignsystems/design-system-core
Description: Base styles and CSS variables for the Q Design System
Latest version: 0.2.0

# @qdesignsystems/design-system-core

Base CSS variables and styles for the Q Design System. Works with standard shadcn/ui components — no custom component library needed.

---

## How it works

This package provides the base CSS variable structure that shadcn/ui components read from. A theme package (e.g. `@qdesignsystems/theme-myra`) then overrides those variables with the client's brand. The result: all shadcn/ui components automatically render in the correct theme.

---

## Setup

### Step 1 — Install

```bash
# With the MYRA theme
npm install @qdesignsystems/design-system-core@latest @qdesignsystems/theme-myra@latest

# With the Q theme
npm install @qdesignsystems/design-system-core@latest @qdesignsystems/theme-q@latest
```

### Step 2 — Add imports to `src/main.tsx` (at the very top)

```tsx
import '@qdesignsystems/design-system-core/styles.css';
import '@qdesignsystems/theme-myra/styles.css'; // or theme-q
```

### Step 3 — Clean `src/index.css`

Remove any `:root { }` or `.dark { }` CSS variable blocks. Keep only:

```css
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  * { @apply border-border; }
  body { @apply bg-background text-foreground; }
}
```

### Step 4 — Use shadcn/ui components normally

```bash
npx shadcn@latest add button card input badge
```

All shadcn/ui components will automatically use the theme colors.

---

## Available Themes

| Package | Description |
|---|---|
| `@qdesignsystems/theme-myra` | MYRA theme — blue primary, warm background |
| `@qdesignsystems/theme-q` | Q theme — black primary, clean minimal |
npm package: @qdesignsystems/theme-ahub
Description: Ahub theme for Q Design System
Latest version: 0.1.0

# @qdesignsystems/theme-ahub

Ahub theme for the Q Design System. Provides CSS variables for background, foreground, brand colors, typography, and shadows that match the Ahub brand in Figma.

## Usage

```bash
npm install @qdesignsystems/design-system-core @qdesignsystems/theme-ahub
```

In your app entry (e.g. `main.tsx` or `index.tsx`):

```ts
import '@qdesignsystems/design-system-core/styles.css';
import '@qdesignsystems/theme-ahub/styles.css';
```

Use local shadcn/ui components as usual. The Ahub theme is applied via CSS variables (e.g. `--background`, `--primary`, `--text-h1-size`, etc.).
npm package: @qdesignsystems/theme-myra
Description: MYRA theme for Q Design System
Latest version: 0.1.6

# @qdesignsystems/theme-myra

MYRA theme for the Q Design System. Blue primary color, warm neutral background.

---

## Setup

### Step 1 — Install

```bash
npm install @qdesignsystems/design-system-core@latest @qdesignsystems/theme-myra@latest
```

### Step 2 — Run the init command (recommended)

```bash
npx qds-init --theme=myra
```

This automatically:
- Adds the correct CSS imports to `src/main.tsx`
- Removes the default `:root { }` variable block from `src/index.css` that would otherwise override the theme

### Step 3 — Done

---

## Manual Setup

### `src/main.tsx` — add at the very top, before all other imports

```tsx
import '@qdesignsystems/design-system-core/styles.css';
import '@qdesignsystems/theme-myra/styles.css';
```

### `src/index.css` — remove the `:root` and `.dark` variable blocks

Replace the entire file with:

```css
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}
```

> **Important:** The default `index.css` in Vite/shadcn projects contains hardcoded CSS variable values that override the theme. You must remove the `:root { }` and `.dark { }` blocks for the theme to apply.
npm package: @qdesignsystems/theme-q
Description: Q theme for Q Design System
Latest version: 0.1.3

# @qdesignsystems/theme-q

Q theme for the Q Design System. Black primary color, clean minimal aesthetic.

---

## Setup

### Step 1 — Install

```bash
npm install @qdesignsystems/design-system-core@latest @qdesignsystems/theme-q@latest
```

### Step 2 — Run the init command (recommended)

```bash
npx qds-init --theme=q
```

This automatically:
- Adds the correct CSS imports to `src/main.tsx`
- Removes the default `:root { }` variable block from `src/index.css` that would otherwise override the theme

### Step 3 — Done

---

## Manual Setup

### `src/main.tsx` — add at the very top, before all other imports

```tsx
import '@qdesignsystems/design-system-core/styles.css';
import '@qdesignsystems/theme-q/styles.css';
```

### `src/index.css` — remove the `:root` and `.dark` variable blocks

Replace the entire file with:

```css
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}
```

> **Important:** The default `index.css` in Vite/shadcn projects contains hardcoded CSS variable values that override the theme. You must remove the `:root { }` and `.dark { }` blocks for the theme to apply.
npm package: @qdesignsystems/theme-vestium
Description: Vestium theme for Q Design System (Archivo, purple accent)
Latest version: 0.1.0

# @qdesignsystems/theme-vestium

Vestium theme for the Q Design System: Archivo font family, purple primary/accent (`#CB02EF` / `hsl(291 98% 47%)`), light gray backgrounds, and semantic opacity tokens.

## Install

```bash
npm install @qdesignsystems/design-system-core @qdesignsystems/theme-vestium
```

## Usage

In your app entry (e.g. `src/main.tsx`), import CSS in this order:

```ts
import '@qdesignsystems/design-system-core/styles.css';
import '@qdesignsystems/theme-vestium/styles.css';
```

Then use semantic Tailwind classes (`bg-background`, `text-foreground`, `bg-primary`, etc.) and ensure your Tailwind config extends the design system theme (e.g. from `LOVABLE_SETUP.md` in the design-system repo).