open-index/open-npm huggingface dataset:
npm package: @shelchin/astro-react
Description: Use React components within Astro
Author: withastro
Latest version: 3.6.1

# @astrojs/react ⚛️

This **[Astro integration][astro-integration]** enables server-side rendering and client-side hydration for your [React](https://react.dev/) components.

## Documentation

Read the [`@astrojs/react` docs][docs]

## Support

- Get help in the [Astro Discord][discord]. Post questions in our `#support` forum, or visit our dedicated `#dev` channel to discuss current development and more!

- Check our [Astro Integration Documentation][astro-integration] for more on integrations.

- Submit bug reports and feature requests as [GitHub issues][issues].

## Contributing

This package is maintained by Astro's Core team. You're welcome to submit an issue or PR! These links will help you get started:

- [Contributor Manual][contributing]
- [Code of Conduct][coc]
- [Community Guide][community]

## License

MIT

Copyright (c) 2023–present [Astro][astro]

[astro]: https://astro.build/
[docs]: https://docs.astro.build/en/guides/integrations-guide/react/
[contributing]: https://github.com/withastro/astro/blob/main/CONTRIBUTING.md
[coc]: https://github.com/withastro/.github/blob/main/CODE_OF_CONDUCT.md
[community]: https://github.com/withastro/.github/blob/main/COMMUNITY_GUIDE.md
[discord]: https://astro.build/chat/
[issues]: https://github.com/withastro/astro/issues
[astro-integration]: https://docs.astro.build/en/guides/integrations-guide/
npm package: @shelchin/design-system-generator
Description: A modern, customizable CSS design token system with built-in dark mode support
Author: Shelchin
Latest version: 1.0.2

# design-system-generator

> A modern, customizable CSS design token system with built-in dark mode support

## Overview

A complete design system in a single CSS file. Customize 5 core variables to generate your entire design system with automatic color scales, spacing, typography, and more.

## Install

```sh
npm install @shelchin/design-system-generator
```

## Usage

```css
@import '@shelchin/design-system-generator';
```

**or**

```html
<link rel="stylesheet" href="node_modules/@shelchin/design-system-generator/design-system-generator.css">
```

## Customization

Override the 5 core variables to customize your design system:

```css
:root {
  --brand-hue: 217;        /* Brand color hue (0-360) */
  --brand-saturation: 91%; /* Brand color saturation */
  --radius-scale: 1;       /* Border radius scale */
  --text-scale: 1;         /* Typography scale */
  --spacing-scale: 1;      /* Spacing scale */
}
```

## Features

- 🎨 **Dynamic color system** - 10 shades generated from your brand color
- 🌗 **Built-in dark mode** - Automatic dark theme support
- 📐 **Consistent spacing** - Mathematical spacing scale
- 🔤 **Typography system** - Hierarchical text sizes
- ✨ **Premium gradients** - 6 crafted gradients
- ♿ **Accessibility ready** - High contrast and reduced motion support
- 📦 **Zero dependencies** - Pure CSS

## Dark Mode

Automatic based on system preference:

```css
@media (prefers-color-scheme: dark) {
  /* Automatic dark mode */
}
```

Manual control:

```html
<html data-theme="dark">
```

## Browser Support

- Chrome (last 3)
- Firefox (last 3)
- Safari (last 3)
- Edge (last 3)

## License

MIT